/* ==========================================================================
 * 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;
}

.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:hover,
.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));
}

.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;
}

.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:hover,
.kik-task-card-open:focus {
    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%;
    }
}