/* ============================================================
   theme.css — Kanban Board Design System (v2)
   Matched to reference: weihu-style dashboard
   Light sidebar, pastel gradient canvas, purple/lavender accent
   Font: Prompt | Style: Corporate/Business, soft & airy
   ============================================================ */

:root {
    /* Brand — purple/lavender (matches reference) */
    --brand-900: #241B3D;
    --brand-700: #4A3B7A;
    --brand-500: #6C5CE7;   /* primary accent */
    --brand-300: #B7ACF2;
    --brand-100: #F1EEFD;

    /* Column/card pastel tints (hue-coded like reference) */
    --tint-purple: #EDE9FB;
    --tint-purple-deep: #E1D9F8;
    --tint-peach:  #FBEEE1;
    --tint-pink:   #FBE7ED;
    --tint-teal:   #E4F3F1;
    --tint-mint:   #E7F5EA;

    /* Neutrals */
    --cream: #F6F5FC;
    --page-grad: linear-gradient(160deg, #F3EEFD 0%, #F8F7FC 40%, #FDF6F4 100%);
    --ink-900: #1E1B2E;
    --ink-600: #6B6580;
    --ink-300: #A6A1BB;
    --line: #ECE9F7;
    --sidebar-bg: #FFFFFF;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --shadow-card: 0 2px 12px rgba(108, 92, 231, 0.08);
    --shadow-pop: 0 16px 34px rgba(108, 92, 231, 0.18);
}

[data-theme="dark"] {
    --cream: #17151F;
    --page-grad: linear-gradient(160deg, #1B1830 0%, #17151F 50%, #1E1720 100%);
    --ink-900: #F1EFFA;
    --ink-600: #C2BCD6;
    --ink-300: #7C7793;
    --line: #2A2740;
    --sidebar-bg: #1C1930;
    --tint-purple: #2B2650;
    --tint-purple-deep: #332C5E;
    --tint-peach:  #332A22;
    --tint-pink:   #332129;
    --tint-teal:   #1F2E2C;
    --tint-mint:   #1E2B22;
}

body {
    font-family: 'Prompt', sans-serif;
    background: var(--page-grad);
    color: var(--ink-900);
}

/* ---- Sidebar (light, per reference) ---- */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--ink-900);
    border-right: 1px solid var(--line);
}

.sidebar-eyebrow {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-300);
}

.sidebar-item {
    border-radius: var(--radius-sm);
    color: var(--ink-600);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.sidebar-item:hover { background: var(--brand-100); color: var(--brand-700); }
.sidebar-item.active {
    background: var(--brand-100);
    color: var(--brand-700);
}
.sidebar-item .icon-box {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
}
.sidebar-item.active .icon-box { background: var(--brand-500); color: #fff; }

/* ---- Board columns / cards ---- */
.kanban-column { min-width: 280px; }
.kanban-column-header { font-weight: 600; color: var(--ink-900); }

.col-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

.kanban-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(108,92,231,0.06);
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: grab;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.kanban-card.dragging { opacity: .5; cursor: grabbing; }

.tag-chip {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.6);
}

.avatar-stack img, .avatar-stack .avatar-fallback {
    border: 2px solid #fff;
    border-radius: 999px;
    margin-left: -8px;
}
.avatar-stack img:first-child, .avatar-stack .avatar-fallback:first-child { margin-left: 0; }

/* Dot-row progress (per reference — replaces bar) */
.progress-dots { display: flex; gap: 3px; align-items: center; }
.progress-dots .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); }
.progress-dots .dot.filled { background: var(--brand-500); }

.btn-primary {
    background: var(--ink-900);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background .15s ease;
}
.btn-primary:hover { background: var(--brand-700); }

.chip-count {
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.search-pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.kbd-hint {
    font-size: 11px;
    color: var(--ink-300);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 6px;
    background: var(--cream);
}

.wip-exceeded { color: #C0455A; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--brand-300); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }