/* ==========================================================================
 * kik-task-board — kanban board over Task workflow states.
 *
 * Rendered by templates/partials/kik_task_board.html, driven by
 * assets/main/script/kik-task-board.js. Loaded as a standalone stylesheet
 * (see templates/partials/quaive_head.html) so it ships without recompiling
 * the global bundle and keeps its blast radius to the board only.
 *
 * The board fills the whole document-body: its content wrapper takes the full
 * height of the (definite-height, absolutely-positioned) .document-body, and
 * the columns flex to share the width equally and the height fully, each with
 * its own scrolling body.
 *
 * Cards reuse the task-detail info-well markup verbatim
 * (.page-module.pat-well.type-sample-sheet-task + the rich-description well);
 * the rules below only shrink it.
 * ========================================================================== */

/* The board's content wrapper — a .document-content that must fill, not pad. */
.kik-task-board-content {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
    /* Override .document-content's large default padding so the columns reach
       the document-body edges (a small gutter keeps them off the corners). */
    padding: var(--grid-gutter, 12px) !important;
    /* …except at the head, which keeps the app bar's clearance on top of that
       gutter. The board branch renders no toolbar of its own (the list branch
       does), so the windowed clearance rule — which keys on a
       .kik-win-main-toolbar inside the content — never applied, and the
       shorthand above would have flattened it anyway. Without it the first
       column's title sat under the window's own maximise and close controls.

       --kik-win-toolbar-height is declared on the app body by windowed-mode.css
       and is simply absent on faces that have no window chrome, so the 0px
       fallback leaves those exactly as they were: gutter all round. */
    padding-top: calc(var(--kik-win-toolbar-height, 0px) + var(--grid-gutter, 12px)) !important;
}

.kik-task-board {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: var(--grid-gutter, 12px);
    width: 100%;
    min-height: 0;
    min-width: 0;
}

/* -------- Columns ---------------------------------------------------------- */

.kik-task-board-column {
    flex: 1 1 0;            /* equal width, share the row fully */
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--colour-well-background, rgba(0, 0, 0, 0.03));
    border-radius: var(--border-radii, 8px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.kik-task-board-column-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* Title + count cluster on the left; the '+' is pushed right by its own
       margin-left:auto (so no justify-content needed). */
    justify-content: flex-start;
    gap: 0.5em;
    padding: 0.7em 0.9em;
    border-bottom: 2px solid var(--app-colour, var(--colour-accent, #888));
}

.kik-task-board-column-title {
    margin: 0;
    /* Don't grow — keep the count badge right after the title; shrink + ellipsis
       only when the title is too long. */
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--app-colour, var(--colour-accent, inherit));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The column-header '+': create a task directly in this column. A flat,
   accent-tinted square that fills in on hover — opens the create modal pre-set
   to the column's workflow state (see kik_task_board.html). The '+' is a
   fontello glyph drawn by ::before (same mechanism as the toolbar create icon):
   the absolutely-positioned glyph fills the button and is flex-centred, so it
   sits dead-centre regardless of the link text (which is hidden via text-indent
   but kept for screen readers / the tooltip). */
.kik-task-board-column-add {
    flex: 0 0 auto;
    margin-left: auto;          /* push to the far right of the header */
    position: relative;
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--border-radii, 6px);
    font-family: fontello;
    text-indent: -1000em;       /* hide the link's word-text; ::before shows '+' */
    overflow: hidden;
    text-decoration: none;
    cursor: default;            /* match the toolbar icon buttons (no pointer) */
    color: var(--app-colour, var(--colour-accent, #888));
    background-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.kik-task-board-column-add::before {
    content: var(--glyph-plus);
    font-family: fontello;
    text-indent: 0;
    position: absolute;
    inset: 0;                   /* fill the button */
    /* Flex-centre the glyph on both axes — immune to line-height/font-size
       em-compounding, so the '+' sits dead-centre. */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    line-height: 1;
    box-sizing: border-box;
}

.kik-task-board-column-add:focus {
    /* No underline on hover (the glyph would otherwise pick up the global
       a:hover underline). */
    text-decoration: none;
    color: var(--colour-base-background, #fff);
    background-color: var(--app-colour, var(--colour-accent, #888));
}

@media (hover: hover) {
  .kik-task-board-column-add:hover {
      /* No underline on hover (the glyph would otherwise pick up the global
         a:hover underline). */
      text-decoration: none;
      color: var(--colour-base-background, #fff);
      background-color: var(--app-colour, var(--colour-accent, #888));
  }
}

.kik-task-board-column-count {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 1.6em;
    padding: 0 0.45em;
    text-align: center;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 1em;
    /* App-colour text on a 10% app-colour tint of white, with a very subtle
       (slightly stronger) app-colour border. */
    color: var(--app-colour, var(--colour-accent, #888));
    background-color: color-mix(in srgb, var(--app-colour, var(--colour-accent, #888)) 10%, white);
    border: 1px solid color-mix(in srgb, var(--app-colour, var(--colour-accent, #888)) 22%, white);
}

.kik-task-board-column-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6em;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    transition: background-color 0.15s ease;
}

/* A column the dragged card is hovering over. */
.kik-task-board-column-body.kik-drop-target {
    background-color: color-mix(in srgb, var(--app-colour, #888) 12%, transparent);
    box-shadow: inset 0 0 0 2px var(--app-colour, var(--colour-accent, #888));
    border-radius: var(--border-radii, 8px);
}

/* -------- Cards ------------------------------------------------------------ */

.kik-task-card {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0.6em 0.7em;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    cursor: grab;
    /* Left accent stripe coloured by priority (overridden below). */
    border-left: 3px solid var(--app-colour, var(--colour-accent, #bbb));
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}

@media (hover: hover) {
  .kik-task-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  }
}

.kik-task-card:active {
    cursor: grabbing;
}

.kik-task-card.kik-dragging {
    opacity: 0.55;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.kik-task-card.priority-high { border-left-color: #d0021b; }
.kik-task-card.priority-medium { border-left-color: #f5a623; }
.kik-task-card.priority-low { border-left-color: #7ed321; }

/* Open-detail affordance — the only click target; pinned top-right, clear of
   the title, so the rest of the card is free for dragging. */
.kik-task-card-open {
    position: absolute;
    top: 0.3em;
    right: 0.3em;
    width: 1.7em;
    height: 1.7em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--colour-text-subtle, #888);
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
}
.kik-task-card-open::before { font-size: 1.05em; margin: 0; }
.kik-task-card-open:focus {
    background-color: rgba(0, 0, 0, 0.08);
    color: #000;
    text-decoration: none;
}

@media (hover: hover) {
  .kik-task-card-open:hover {
      background-color: rgba(0, 0, 0, 0.08);
      color: #000;
      text-decoration: none;
  }
}

/* Card title — plain text (the card itself is the drag handle); leave room on
   the right for the open icon. */
.kik-task-card-title {
    margin: 0 1.9em 0.35em 0;
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1.25;
    color: inherit;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Title-only card (no info well, no description): drop the bottom margin so the
   card hugs the title. The open icon is absolutely positioned, so a lone title
   is the card's last child. */
.kik-task-card-title:last-child {
    margin-bottom: 0;
}

/* -------- The reused detail-well markup, shrunk ---------------------------- */

.kik-task-card .page-module.pat-well {
    /* Strip the well chrome — the card itself is the container now. */
    --pat-well-box-shadow: none;
    --pat-well-background-colour: transparent;
    --pat-well-padding: 0;
    --pat-well-padding-top: 0;
    --pat-well-padding-right: 0;
    --pat-well-padding-bottom: 0;
    --pat-well-padding-left: 0;
    --pat-well-margin-bottom: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.72rem;
}

/* Description well: keep the markup, but clamp it so a card stays small. */
.kik-task-card-description {
    margin-top: 0.45em !important;
    padding-top: 0.4em !important;
}

.kik-task-card-description .pat-rich {
    max-height: 5.5em;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.35;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.kik-task-card-description .pat-rich :first-child { margin-top: 0; }
.kik-task-card-description .pat-rich p { margin: 0 0 0.4em; }
.kik-task-card-description .pat-rich > :last-child { margin-bottom: 0; }

/* The description's checklist tickboxes are read-only inside a card. */
.kik-task-card-description input[type=checkbox] {
    pointer-events: none;
}

/* -------- Small screens ---------------------------------------------------- */
/* On a narrow viewport the three columns won't fit side-by-side; let the board
   scroll horizontally with sensibly-wide columns instead of crushing them. */
@container screen style(--screen-small: true) {
    .kik-task-board {
        overflow-x: auto;
    }
    .kik-task-board-column {
        flex: 0 0 78%;
        min-width: 78%;
    }
}