@charset "UTF-8";
/*
    Kanban dark theme — layered black finishes with a crimson accent and a
    faint metal-flake sparkle, inspired by a matte-black custom build under
    garage lighting. Scoped to the kanban page only: every rule here lives
    under html[data-theme="dark"], which kanban.js only ever sets on this
    page, so nothing here reaches the rest of the site.
*/

html[data-theme="dark"] {
    color-scheme: dark;

    /* kanban.css is almost entirely built on these custom properties, so
       redefining them here re-themes the whole board with barely any
       per-rule overrides needed below. */
    --kanban-ink: #c9c6c2;
    --kanban-ink-soft: #a19e9a;
    --kanban-muted: #7a7773;
    --kanban-muted-light: #55524f;
    --kanban-border: #2a2a2f;
    --kanban-border-strong: #3a3a40;
    --kanban-soft: #1a1a1d;
    --kanban-surface: #151517;
    --kanban-blue: #ff2f47;          /* crimson stands in for the accent color */
    --kanban-blue-dark: #c81e34;
    --kanban-blue-soft: rgba(200, 30, 52, 0.16);
    --kanban-danger: #ff5a67;
    --kanban-danger-soft: rgba(180, 35, 24, 0.2);
    --kanban-danger-soft-hover: rgba(180, 35, 24, 0.32);
    --kanban-danger-ink: #ff9a9a;
    --kanban-success-soft: rgba(22, 101, 52, 0.22);
    --kanban-success-ink: #4ade80;

    /* Extra tokens for the page chrome (header/nav/modals) that sit
       outside kanban.css's own variable set. */
    --dk-black-1: #08080a;
    --dk-black-2: #0d0d0f;
    --dk-black-3: #151517;
    --dk-black-4: #1c1c1f;
    --dk-black-5: #26262a;
    --dk-border-soft: rgba(255, 255, 255, 0.07);
    --dk-text: #e9e6e2;
    --dk-text-dim: #a9a6a2;
    --dk-text-mute: #706d6a;
    --dk-crimson: #c81e34;
    --dk-crimson-bright: #ff2f47;
    --dk-crimson-deep: #5c0e18;
    --dk-crimson-glow: rgba(200, 30, 52, 0.45);
}

/* ------------------------------------------------------------------ */
/* Page base + metal-flake sparkle texture                            */
/* ------------------------------------------------------------------ */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--dk-black-1);
    /* Fine grain + glints, then the grid-dot layer (dark version of the
       original dotted grid, colored with this page's own --kanban-border),
       then the base glow + brushed-black gradient -- see --dk-sparkle-fine
       and --dk-sparkle-base in theme-dark.css, which this page's own dark
       theme shares this recipe with verbatim. */
    background-image:
        var(--dk-sparkle-fine),
        radial-gradient(circle, var(--kanban-border) 1px, transparent 1px),
        var(--dk-sparkle-base);
    background-repeat: var(--dk-sparkle-repeat);
    background-size: var(--dk-sparkle-size);
    /* Deliberately not background-attachment: fixed - Safari has long-standing
       scroll/paint issues with fixed backgrounds, and that's a more likely
       culprit for the earlier broken-trackpad-scroll regression than the
       scrollbar-hiding below (.kanban-columns hides its scrollbar the same
       way with no reported issues). */
}

/* ------------------------------------------------------------------ */
/* Header / top bar (shared include, only touched while on this page) */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] header,
html[data-theme="dark"] nav {
    background-color: var(--dk-black-2);
}

/* The accent line lives on the full-width <header> itself, not on
   .d-header / "header > div" — style-template.css locks that inner box
   to a centered 500px column (clamp(500px, var(--body-width), 500px)),
   sized for the narrower check-list app pages. On kanban's wider board
   layout a border on that box only spans the middle third of the page
   and visibly stops partway across, so the line has to sit one level
   up on <header>, which is genuinely full width. */
html[data-theme="dark"] header {
    border-bottom: 1px solid var(--dk-crimson-deep);
}

/* The header gradient + view-mode border are set inline (and rewritten
   at runtime by header.htm's updateHeaderColor()), so this needs !important. */
html[data-theme="dark"] header .d-header {
    background: linear-gradient(180deg, rgba(28, 28, 31, 0.95) 0%, rgba(13, 13, 15, 0.98) 55%, rgba(8, 8, 9, 1) 100%) !important;
    border-bottom: none !important;
}

html[data-theme="dark"] header .d-header::before {
    background: linear-gradient(to right,
        var(--dk-black-2) 0%,
        var(--dk-black-2) 25%,
        rgba(13, 13, 15, 0) 75%,
        rgba(13, 13, 15, 0) 100%) !important;
}

html[data-theme="dark"] .logo a {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] #org-name-display,
html[data-theme="dark"] #user-name-display {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] #org-name-text,
html[data-theme="dark"] #user-name-text {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] a {
    color: var(--dk-crimson-bright);
}

html[data-theme="dark"] a:hover {
    color: #ff5a6c;
}

/* Card/column titles and the attached-checklist link are rendered as <a>
   tags purely so the whole label is a click target (opening the item,
   checklist, or list in the editor) -- visually they're headings and labels,
   not the app's crimson-accented body links, so they opt back out of the
   generic rule above (which otherwise wins on specificity and paints every
   card and column title crimson instead of the intended ink/muted color). */
html[data-theme="dark"] a.kanban-card-name,
html[data-theme="dark"] a.kanban-column-title {
    color: var(--kanban-ink);
}

html[data-theme="dark"] a.kanban-card-checklist {
    color: var(--kanban-muted);
}

/* ------------------------------------------------------------------ */
/* User icons                                                         */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .user-icon svg {
    stroke: var(--dk-text-dim);
}

html[data-theme="dark"] .user-icon.single-user.logged-out svg path {
    stroke: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .user-icon:hover svg {
    stroke: var(--dk-crimson-bright);
}

html[data-theme="dark"] .user-icon.active svg,
html[data-theme="dark"] .user-icon.org-member.active svg {
    stroke: var(--dk-crimson-bright) !important;
}

html[data-theme="dark"] .user-icon.inactive svg,
html[data-theme="dark"] .user-icon.org-member.inactive svg {
    stroke: #4a4a4d !important;
}

html[data-theme="dark"] .user-icon.inactive:hover svg,
html[data-theme="dark"] .user-icon.org-member.inactive:hover svg {
    stroke: #6f6c69 !important;
}

html[data-theme="dark"] #invites-badge {
    box-shadow: 0 0 0 2px var(--dk-black-2);
}

/* ------------------------------------------------------------------ */
/* Top nav dropdown + reusable modal system (both in header.htm)      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] nav.topnav {
    background-color: rgba(13, 13, 15, 0.98);
    border-bottom: 2px solid var(--dk-crimson-deep);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 0 0 1px var(--dk-border-soft);
}

html[data-theme="dark"] nav.topnav > div {
    background-color: transparent;
}

html[data-theme="dark"] #navi a {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] #navi a:hover {
    color: var(--dk-crimson-bright);
}

html[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] .modal-content {
    background: var(--dk-black-3);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--dk-border-soft);
}

html[data-theme="dark"] .modal-header {
    border-bottom-color: var(--dk-black-5);
}

html[data-theme="dark"] .modal-header h3 {
    color: var(--dk-text);
}

html[data-theme="dark"] .modal-close {
    color: var(--dk-text-mute);
}

html[data-theme="dark"] .modal-close:hover {
    background: var(--dk-black-4);
    color: var(--dk-text);
}

html[data-theme="dark"] .modal-body {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .modal-btn-secondary {
    background: var(--dk-black-4);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .modal-btn-secondary:hover {
    background: var(--dk-black-5);
}

html[data-theme="dark"] .modal-btn-primary {
    background: linear-gradient(180deg, var(--dk-crimson-bright), var(--dk-crimson));
}

html[data-theme="dark"] .modal-btn-primary:hover {
    background: linear-gradient(180deg, #ff5a6c, var(--dk-crimson-bright));
}

html[data-theme="dark"] .modal-btn-danger {
    background: linear-gradient(180deg, #ff4d5e, #b91c2c);
}

html[data-theme="dark"] .org-item {
    background: var(--dk-black-4);
    border-color: var(--dk-black-5);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .org-item:hover {
    background: var(--dk-black-5);
}

html[data-theme="dark"] .org-item.selected {
    background-color: rgba(200, 30, 52, 0.14);
    border-color: var(--dk-crimson);
}

html[data-theme="dark"] .org-item strong {
    color: var(--dk-text);
}

html[data-theme="dark"] .org-item small {
    color: var(--dk-text-mute);
}

/* ------------------------------------------------------------------ */
/* Scrollbars                                                         */
/* ------------------------------------------------------------------ */

/* Styling the native scrollbar's colors doesn't hold up in Safari (it
   keeps rendering its own accent-colored thumb regardless), so it's
   hidden outright instead - scoped to html/body only, not a blanket
   descendant selector, so scrollable areas inside modals/pickers keep a
   usable scrollbar. This previously coincided with broken trackpad
   scrolling; the more likely cause was the body background's
   background-attachment: fixed (removed above), a known Safari
   scroll/paint trouble spot - .kanban-columns hides its own scrollbar
   the same way with no issues, which pointed away from hiding itself. */
html[data-theme="dark"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html[data-theme="dark"]::-webkit-scrollbar,
html[data-theme="dark"] body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ------------------------------------------------------------------ */
/* Board-specific fixes: the handful of kanban.css rules that don't   */
/* go through the --kanban-* variables above.                         */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .kanban-column[data-completion="true"] {
    background: rgba(22, 101, 52, 0.18);
}

html[data-theme="dark"] .kanban-column--selected[data-completion="true"] {
    background: rgba(22, 101, 52, 0.3);
}

html[data-theme="dark"] .kanban-card[data-available="false"] {
    background: var(--kanban-soft);
}

/* A picked card (focus mode) keeps the focus color, dimmed a touch so it does not glare against the black
   board. The second selector matches the unavailable-card rule above and comes after it, so an
   unavailable card that is picked still shows focus. */
html[data-theme="dark"] .kanban-card--focus,
html[data-theme="dark"] .kanban-card--focus[data-available="false"] {
    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--kanban-focus);
}

/* Swimlane line tints (kanban.css): solid, not translucent -- the
   light-theme lightness/saturation reads as washed-out pastel on a dark
   surface, so darker and less saturated here instead -- same
   --swimlane-hue custom property, set once per line in kanban.js, drives
   both. */
html[data-theme="dark"] .kanban-swimlane-band {
    background: hsl(var(--swimlane-hue, 217) 25% 15%);
}

html[data-theme="dark"] .kanban-swimlane-label,
html[data-theme="dark"] .kanban-swimlane-mobile-tab {
    background: hsl(var(--swimlane-hue, 217) 22% 20%);
}

/* Lines with a picked color: same mix as kanban.css, with darker-surface
   ratios so a bright pick reads as a tint rather than a slab. */
html[data-theme="dark"] .kanban-swimlane-band--custom {
    background: color-mix(in srgb, var(--swimlane-color) 14%, var(--kanban-surface));
}

html[data-theme="dark"] .kanban-swimlane-label--custom,
html[data-theme="dark"] .kanban-swimlane-mobile-tab--custom {
    background: color-mix(in srgb, var(--swimlane-color) 22%, var(--kanban-surface));
}

/* The inline-edit input's own 1px border (kanban.css) was stacking with
   the browser's default focus ring, reading as one thick border; suppress
   the native ring so only the intentional 1px border shows, in a duller
   red than --kanban-blue's bright crimson. */
html[data-theme="dark"] .kanban-inline-edit {
    border-color: var(--dk-crimson-deep);
    outline: none;
}

/* Elevation shadows assumed a light surface (black shadow, low alpha);
   on a dark surface those are invisible, so give floating chrome a
   proper black backdrop plus a faint crimson-lit edge instead. */
html[data-theme="dark"] .kanban-feedback,
html[data-theme="dark"] .kanban-menu,
html[data-theme="dark"] .kanban-filter-panel,
html[data-theme="dark"] .kanban-color-popover,
html[data-theme="dark"] .kanban-undo-toast {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--dk-border-soft);
}

html[data-theme="dark"] .kanban-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .kanban-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .kanban-card-chosen {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--dk-crimson-glow);
}

html[data-theme="dark"] .kanban-color-swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .kanban-toggle-track::after {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ */
/* Theme toggle icon swap                                             */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .kanban-theme-icon--sun {
    display: block;
}

html[data-theme="dark"] .kanban-theme-icon--moon {
    display: none;
}

/* No border-color here: inside its .kanban-view-group the button's own
   border is reset to none (only the shared divider hairline has any
   width), so coloring "the border" would really just be recoloring that
   divider red -- the bug this comment is here to stop from coming back. */
html[data-theme="dark"] #kanban-theme-toggle {
    color: var(--dk-crimson-bright);
}

html[data-theme="dark"] #kanban-theme-toggle:hover {
    background: rgba(200, 30, 52, 0.12);
    color: var(--dk-crimson-bright);
}