:root {
    --kanban-page-bg: #eef1f6;
    --kanban-card-bg: #ffffff;
    --kanban-cell-bg: rgba(255, 255, 255, .45);
    --kanban-cell-bg-hover: rgba(255, 255, 255, .85);
    --kanban-border: #e4e7ec;
    --kanban-grid-line: #d3d8e0;
    --kanban-accent: #2E5EAA;
    --kanban-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --kanban-shadow-hover: 0 8px 20px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .08);
    --kanban-shadow-drag: 0 16px 32px rgba(16, 24, 40, .24), 0 4px 8px rgba(16, 24, 40, .12);
    --kanban-text: #1d2939;
    --kanban-text-muted: #667085;
    --kanban-radius: 12px;
    /* Card flex-basis: cards flow horizontally inside a cell, growing to fill the column
       width and wrapping to more-per-row as the (resizable) column gets wider, or down to
       one-per-row when it's narrowed. --kanban-card-min is the smallest a card shrinks to
       before wrapping. */
    --kanban-card-w: 200px;
    --kanban-card-min: 180px;
}

/* ---------- board row (one per swimlane) ---------- */

.kanban-board-row {
    /* No overflow/scroll of its own - the shared .kanban-swimlanes-scroll ancestor
       (in Kanban.razor) scrolls every lane's row together as one unit.

       gap MUST equal ColumnGapPx (20px) in Kanban.razor: the header row, these board
       rows, and the absolutely-positioned divider math (GetColumnBoundaries) all assume
       the same column pitch = width + 20px. Any mismatch drifts columns out of alignment
       and pushes the divider lines on top of card content. */
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    flex: 1 1 auto;
}

/* ---------- column ---------- */

.kanban-column {
    /* Fixed width, not flex-grow or resizable-per-lane: every swimlane renders its own
       independent DxKanbanColumn instance for a given status, plus the shared header
       above them all, so the width must stay identical everywhere or the columns
       drift out of alignment with each other and with the header.

       No border-right here on purpose - each row is a separate short DOM box, so a
       per-row border only spans that row's own height and breaks into dashes across
       many stacked rows. The continuous divider lines are absolutely-positioned
       elements spanning the whole board instead (see .kanban-vertical-divider). */
    flex: 0 0 auto;
    width: 360px;
    display: flex;
    flex-direction: column;
    /* No horizontal padding on the column itself: inter-column space is the row/header
       gap (20px), so header, board rows and divider math share one pitch. Cell padding
       lives on .kanban-column-body instead (inside the fixed width, no pitch impact). */
    padding: 0;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.kanban-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}

.kanban-column-chevron {
    color: var(--kanban-text-muted);
    font-size: 1rem;
    line-height: 1;
}

.kanban-column-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--kanban-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column-count {
    background: #eef1f6;
    color: var(--kanban-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    min-width: 1.2rem;
    text-align: center;
}

.kanban-column-body {
    /* Cards flow left-to-right and wrap - "horizontal stacking" within each
       user x status cell (was a single-column vertical grid before). Each card is a
       fixed --kanban-card-w wide; at the 360px default column width two cards fit per
       row (2*160 + gap + padding < 360) and further cards wrap below. */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    min-height: 4.5rem;
    padding: 0.55rem;
    background: var(--kanban-cell-bg);
    border-radius: 10px;
    box-sizing: border-box;
    flex: 1 1 auto;
    transition: background-color .15s ease;
}

    /* Whole cell reads as a drop zone on hover - subtle, no JS (a Blazor dragover
       handler would round-trip per tick and ghost the card mid-drag). */
    .kanban-column-body:hover {
        background: var(--kanban-cell-bg-hover);
    }

.kanban-column-empty {
    /* Zero-width-space filler so an empty cell keeps its min-height (drop target). */
    flex: 1 1 100%;
}

/* Collapsed status column: a thin strip. The header (color dot + count) lives in the shared
   header; each lane just renders a slim empty body so columns stay aligned and it's still a
   drop target (drag a card onto it to file it into that status). */
.kanban-column-body-collapsed {
    padding: 0.25rem;
    background: rgba(255, 255, 255, .25);
}

/* ---------- card ---------- */

.kanban-card-slot {
    /* Any element with an explicit z-index (the divider lines use 1, the resize handles
       use 5) paints above plain siblings regardless of DOM order - without this,
       .kanban-vertical-divider visually cut across card content. */
    position: relative;
    z-index: 2;
    /* Grow to fill the column, shrink with it, wrap when narrower than the min. */
    flex: 1 1 var(--kanban-card-w);
    min-width: var(--kanban-card-min);
    max-width: 100%;
}

/* Inner draggable wrapper: fills the slot so the whole card is the drag source and the
   browser's drag-image ghost is the full card. Source dimming during drag is set inline
   via ondragstart/ondragend in DxKanbanColumn.razor, NOT via a CSS :active opacity - :active
   applies on mousedown (before dragstart), which would make the captured ghost faint. */
.kanban-card-draghandle {
    height: 100%;
    cursor: grab;
}

    .kanban-card-draghandle:active {
        cursor: grabbing;
    }

.kanban-card {
    position: relative;
    background: var(--kanban-card-bg);
    border: 1px solid var(--kanban-border);
    border-radius: 14px;
    box-shadow: var(--kanban-shadow);
    padding: 0.7rem 0.75rem 0.65rem 0.85rem;
    box-sizing: border-box;
    height: 100%;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

    /* Activity-type-coloured accent bar down the left edge (colour comes from the inline
       --kb-accent set per card). Rounded to follow the card's own corner radius. */
    .kanban-card::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--kb-accent, transparent);
        border-radius: 14px 0 0 14px;
        opacity: 0.85;
    }

.kanban-card-slot:hover .kanban-card {
    box-shadow: var(--kanban-shadow-hover);
    transform: translateY(-2px);
    border-color: #c5ccd6;
}

    .kanban-card-slot:hover .kanban-card::before {
        opacity: 1;
        width: 4px;
    }

.kanban-card-slot:active .kanban-card {
    box-shadow: var(--kanban-shadow-drag);
    transform: none;
}

/* ---------- scrollbars ---------- */

.kanban-swimlanes-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.kanban-swimlanes-scroll::-webkit-scrollbar-thumb {
    background: #c3c9d1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.kanban-swimlanes-scroll::-webkit-scrollbar-track {
    background: transparent;
}