/* ============================================================
   N8tive Project Manager — design-token theme layer
   Loaded AFTER style.css and mobile.css on every page.

   This file mirrors the Company Portal's sui-theme.css token
   system exactly (same hue 255, same faces, same devices), so
   the Portal -> Project Manager SSO hop is visually seamless.

   System:
   - Color exclusively via OKLCH tokens below (one accent hue: 255).
   - Spacing on a 4px grid (4/8/12/16/24/32/48/64).
   - Type scale: 12/14/16/20/24/32/48. Body 16/1.5, headings 1.1-1.25.
   - Display face: Space Grotesk. Body: Inter. Micro-labels: mono.

   Layout references (Mobbin): see the design PR body.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    /* ---- color tokens (identical to the Portal theme layer) ---- */
    --bg:            oklch(0.13 0.02 255);
    --bg-translucent:oklch(0.13 0.02 255 / 0.72);
    --surface:       oklch(0.17 0.02 255);
    --surface-2:     oklch(0.21 0.02 255);
    --surface-glass: oklch(0.17 0.02 255 / 0.65);
    --text:          oklch(0.95 0.01 255);
    --muted:         oklch(0.72 0.02 255);
    --faint:         oklch(0.55 0.02 255);
    --border:        oklch(0.32 0.03 255);
    --border-strong: oklch(0.45 0.05 255);
    --accent:        oklch(0.70 0.14 255);
    --accent-bright: oklch(0.82 0.10 255);
    --accent-deep:   oklch(0.55 0.16 255);
    --accent-fg:     oklch(0.15 0.03 255);
    --accent-soft:   oklch(0.70 0.14 255 / 0.10);
    --accent-soft-2: oklch(0.70 0.14 255 / 0.20);
    --accent-line:   oklch(0.70 0.14 255 / 0.28);
    --accent-glow:   oklch(0.70 0.14 255 / 0.40);
    --ok:            oklch(0.75 0.13 160);
    --ok-soft:       oklch(0.75 0.13 160 / 0.12);
    --ok-line:       oklch(0.75 0.13 160 / 0.32);
    --danger:        oklch(0.65 0.19 25);
    --danger-soft:   oklch(0.65 0.19 25 / 0.12);
    --danger-line:   oklch(0.65 0.19 25 / 0.45);
    --warn:          oklch(0.80 0.14 85);
    --warn-soft:     oklch(0.80 0.14 85 / 0.12);
    --shadow-ink:    oklch(0 0 0 / 0.45);

    /* ---- type tokens ---- */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;
    --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px;
    --fs-24: 24px; --fs-32: 32px; --fs-48: 48px;

    /* ---- spacing tokens (4px grid) ---- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

    /* ---- shape ---- */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
}

/* ---------- Base canvas (light-mode markup is retired by tokens; the
   dark-mode JS toggle keeps working, both states resolve to the theme) */
html, body,
body.bg-gray-50,
.dark body, body.dark\:bg-gray-900 {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft-2); color: var(--text); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- Typography ----------
   The Tailwind CDN reset (injected at runtime, after this sheet) sets
   h1-h6 { font-size: inherit }, so heading treatments stay class-safe. */
h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* mono micro-label (the suite's signature device, shared with the Portal) */
.sui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 999px;
}
.sui-eyebrow::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px 2px var(--accent-glow);
}

/* ---------- Splash screen: quiet accent veil, no purple gradient ---------- */
#splashScreen {
    background: var(--bg) !important;
    background-image:
        radial-gradient(120% 80% at 50% -10%, var(--accent-soft-2), transparent 60%) !important;
}
.particle { background: radial-gradient(circle, var(--accent-glow), var(--accent-soft)) !important; }

/* ---------- Surfaces: every gray/white panel maps to token surfaces ---------- */
[class*="bg-white"],
[class*="bg-gray-50"], [class*="bg-gray-100"], [class*="bg-gray-200"] {
    background-color: var(--surface) !important;
}
[class*="bg-gray-7"] { background-color: var(--surface-2) !important; }
[class*="bg-gray-8"], [class*="bg-gray-9"] { background-color: var(--surface) !important; }
[class*="hover:bg-gray-"]:hover { background-color: var(--surface-2) !important; }

/* borders: all grays become the one hairline */
[class*="border-gray-"] { border-color: var(--border) !important; }

/* text: light-mode inks and dark-mode inks both resolve to token text */
[class*="text-gray-9"], [class*="text-gray-8"], [class*="text-gray-7"],
[class*="text-gray-2"], [class*="text-gray-3"] { color: var(--text) !important; }
[class*="text-gray-6"], [class*="text-gray-4"] { color: var(--muted) !important; }
[class*="text-gray-5"] { color: var(--faint) !important; }
[class*="hover:text-gray-"]:hover { color: var(--text) !important; }

/* ---------- Accent: purple/primary/blue all collapse to the one hue ---------- */
[class*="bg-purple-6"], [class*="bg-purple-7"], [class*="bg-purple-5"],
[class*="bg-primary"], [class*="bg-blue-6"], [class*="bg-blue-5"] {
    background-color: var(--accent) !important;
    color: var(--accent-fg) !important;
}
[class*="hover:bg-purple-"]:hover, [class*="hover:bg-blue-"]:hover {
    background-color: var(--accent-bright) !important;
    color: var(--accent-fg) !important;
}
/* soft chips / tinted wells */
[class*="bg-purple-1"], [class*="bg-purple-50"], [class*="bg-purple-9"],
[class*="bg-blue-1"], [class*="bg-blue-50"], [class*="bg-blue-9"],
[class*="bg-indigo-1"], [class*="bg-indigo-9"] {
    background-color: var(--accent-soft) !important;
    color: var(--accent-bright) !important;
}
[class*="text-purple-"], [class*="text-blue-"], [class*="text-indigo-"],
[class*="text-primary"] { color: var(--accent) !important; }
[class*="border-purple-"], [class*="border-blue-"], [class*="border-indigo-"] {
    border-color: var(--accent-line) !important;
}
[class*="ring-purple-"], [class*="ring-blue-"] {
    --tw-ring-color: var(--accent) !important;
}

/* gradients (buttons, banners) -> flat accent sweep */
[class*="from-purple-"], [class*="from-blue-"], [class*="from-indigo-"], [class*="from-gray-9"] {
    --tw-gradient-from: var(--accent-deep) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
[class*="via-purple-"] { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-deep), var(--tw-gradient-to) !important; }
[class*="to-purple-"], [class*="to-indigo-"] { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position) !important; }
[class*="to-blue-"] { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position) !important; }

/* ---------- Status semantics: one token per meaning ---------- */
[class*="bg-green-9"], [class*="bg-green-1"], [class*="bg-green-50"] {
    background-color: var(--ok-soft) !important;
    color: var(--ok) !important;
}
[class*="bg-green-5"], [class*="bg-green-6"] {
    background-color: var(--ok) !important;
    color: var(--accent-fg) !important;
}
[class*="hover:bg-green-"]:hover { background-color: var(--ok) !important; color: var(--accent-fg) !important; }
[class*="text-green-"] { color: var(--ok) !important; }
[class*="border-green-"] { border-color: var(--ok-line) !important; }

[class*="bg-red-9"], [class*="bg-red-1"], [class*="bg-red-50"] {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
}
[class*="bg-red-5"], [class*="bg-red-6"] {
    background-color: var(--danger) !important;
    color: var(--text) !important;
}
[class*="hover:bg-red-"]:hover { background-color: var(--danger) !important; color: var(--text) !important; }
[class*="text-red-"] { color: var(--danger) !important; }
[class*="border-red-"] { border-color: var(--danger-line) !important; }

[class*="bg-yellow-9"], [class*="bg-yellow-1"], [class*="bg-yellow-50"],
[class*="bg-amber-1"], [class*="bg-amber-9"] {
    background-color: var(--warn-soft) !important;
    color: var(--warn) !important;
}
[class*="text-yellow-"], [class*="text-amber-"] { color: var(--warn) !important; }

/* ---------- Glass morphism -> flat hairline panels (Portal parity) ---------- */
.glass-card,
.dark .glass-card,
.glass-frosted,
.dark .glass-frosted,
.glass-panel,
.dark .glass-panel,
.glass-gradient-bg {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px var(--shadow-ink) !important;
}

/* modal scrims stay dark ink */
[class*="bg-black"] { background-color: var(--bg-translucent) !important; }

/* ---------- Forms ---------- */
input, select, textarea {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: var(--faint) !important; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong) !important; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    --tw-ring-color: var(--accent) !important;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Chrome refinements — 2026-07-23 modernization pass
   Everything below stays inside the token system above.
   ============================================================ */

/* Splash: the old purple SVG/gradient hardware resolves to the one hue.
   (Hex in the inline SVG is overridden here rather than edited in place.) */
.splash-logo { filter: drop-shadow(0 0 20px var(--accent-glow)); }
.logo-fill { fill: var(--accent) !important; }
.logo-hexagon, .logo-line-vertical,
.logo-line-diagonal-1, .logo-line-diagonal-2 { stroke: var(--accent) !important; }
.logo-dot-center { fill: var(--accent-bright) !important; }
.logo-dot-1, .logo-dot-2, .logo-dot-3, .logo-dot-4 { fill: var(--accent) !important; }
.splash-glow { background: radial-gradient(circle, var(--accent-soft-2), transparent 70%); }
.splash-title {
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
}
.splash-subtitle { color: var(--muted); }
.splash-loader { background: var(--accent-soft); }
.splash-loader-bar {
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    box-shadow: 0 0 10px var(--accent-glow);
}
.splash-ring, .splash-ring-2 { border-color: var(--accent-line) !important; }

/* Header: translucent sticky bar instead of an opaque frosted slab */
header.glass-frosted {
    background: var(--bg-translucent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* Cards: quiet at rest, lift on interaction. The 24px ink shadow the flat
   panels inherited reads heavy at board density — reserve depth for modals. */
.glass-card, .dark .glass-card {
    box-shadow: 0 1px 2px var(--shadow-ink) !important;
    border-radius: var(--radius-md);
}
.glass-panel { box-shadow: 0 16px 48px var(--shadow-ink) !important; }

/* Kanban columns: hairline wells on the canvas, not stacked panels */
.kanban-column > div {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
.kanban-column [data-count] {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    background: var(--accent-soft) !important;
    color: var(--accent-bright) !important;
}

/* Task cards: the one hover moment on the board.
   (.task-card is the class the board actually renders — the old
   [data-task-id] hook never matched, kept only for queued PRs that add it.) */
.task-card, [data-task-id] {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.task-card:hover, [data-task-id]:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line) !important;
    box-shadow: 0 8px 24px var(--shadow-ink) !important;
}
.task-card.dragging, .task-card[draggable="true"]:active,
[data-task-id].dragging, [data-task-id][draggable="true"]:active {
    border-color: var(--accent) !important;
}

/* Quick stats: numbers read as data */
#quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* ---------- Notification center ---------- */
.notif-badge {
    background: var(--danger);
    color: var(--text);
    box-shadow: 0 0 0 2px var(--bg);
}
.notif-item {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item i { color: var(--muted); }
.notif-unread { background: var(--accent-soft); }
.notif-unread i { color: var(--accent); }
.notif-read { opacity: 0.75; }

/* ============================================================
   Sidebar rail — 2026-07 redesign (Linear-grounded: quiet rail
   sharing the canvas, hairline divider, soft-pill active state)
   ============================================================ */
.sui-sidebar {
    background: var(--bg) !important;
    border-right: 1px solid var(--border);
    box-shadow: none !important;
}
.sui-wordmark {
    font-family: var(--font-display);
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text) !important;
}
/* Section labels: tiny mono eyebrows, no pill */
.sui-rail-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
}
/* Nav + filter items: quiet at rest, surface on hover, accent pill active */
.sui-sidebar .nav-btn,
.sui-sidebar .filter-btn {
    color: var(--muted) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: var(--fs-14);
}
.sui-sidebar .nav-btn:hover,
.sui-sidebar .filter-btn:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    transform: none !important;
    backdrop-filter: none !important;
}
.sui-sidebar .nav-btn.bg-purple-600,
.sui-sidebar .filter-btn.bg-purple-600,
.sui-sidebar .filter-btn[class*="bg-purple-1"] {
    background: var(--accent-soft) !important;
    color: var(--accent-bright) !important;
    box-shadow: inset 2px 0 0 var(--accent) !important;
    border: none !important;
}
.sui-sidebar .nav-btn i, .sui-sidebar .filter-btn i,
.sui-sidebar .nav-btn svg, .sui-sidebar .filter-btn svg {
    width: 16px !important;
    height: 16px !important;
}
/* Footer: hairline top, compact stat chips */
.sui-rail-footer { border-top: 1px solid var(--border); }
.sui-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.sui-stat-num {
    font-family: var(--font-display);
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.1;
    color: var(--accent-bright);
}
.sui-stat-chip-ok .sui-stat-num { color: var(--ok); }
.sui-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}
/* Collapsed rail (64px): stacked header, centered icon buttons */
.sui-sidebar.sidebar-collapsed .sui-rail-header {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
}
.sui-sidebar.sidebar-collapsed .sui-rail-label { display: none; }
.sui-sidebar.sidebar-collapsed .nav-btn,
.sui-sidebar.sidebar-collapsed .filter-btn {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Kanban drop target: token accent, not legacy purple */
.drag-over {
    background-color: var(--accent-soft) !important;
    border: 2px dashed var(--accent-line) !important;
}
/* Primary action buttons (.glass-button): flat accent, not legacy purple glass */
.glass-button, .dark .glass-button {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: background 0.15s ease !important;
    transform: none !important;
}
.glass-button:hover, .dark .glass-button:hover {
    background: var(--accent-bright) !important;
    transform: none !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
}
/* Empty state card: beat style.css's #id !important light-glass rule
   (same specificity, later in cascade) */
#emptyStateOverlay > div {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--accent-line) !important;
    box-shadow: 0 16px 48px var(--shadow-ink) !important;
}
/* Legacy shine sweep reads as smears on the flat design — retire it */
.glass-shine::before { display: none !important; }
/* The cube web component has no intrinsic size at 24px inside the rail */
#sidebar n8tive-cube-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; }
/* Rail/content resize: scoped transitions. transition-all on layout-critical
   elements restarts EVERY property's animation on any class churn (glass-ui
   observer, feather icon swaps) — width/margin only, nothing else animates. */
.sui-anim-rail { transition: width 0.25s ease, transform 0.3s ease; }
.sui-anim-content { transition: margin-left 0.25s ease; }

/* ---------- Final token sweep (2026-07-25) ---------- */
/* Splash canvas class (replaces the legacy purple gradient utilities) */
.sui-splash-bg { background: var(--bg); }
/* Orange (admin impersonation panel) and pink (milestone CTA) were the last
   un-mapped hues — both collapse into the one-accent system: orange reads as
   warn (it flags an unusual testing mode), pink joins the accent sweep. */
[class*="bg-orange-5"], [class*="bg-orange-6"], [class*="hover:bg-orange-"]:hover {
    background-color: var(--warn) !important;
    color: var(--accent-fg) !important;
}
[class*="bg-orange-1"], [class*="bg-orange-50"], [class*="bg-orange-9"],
[class*="from-orange-"] {
    background-color: var(--warn-soft) !important;
    --tw-gradient-from: var(--warn-soft) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
[class*="to-red-5"], [class*="to-red-9"] { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
[class*="text-orange-"] { color: var(--warn) !important; }
[class*="border-orange-"] { border-color: var(--warn-soft) !important; }
[class*="to-pink-"] { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position) !important; }

/* ============================================================
   2026-07-31 modernization pass — board cards, task detail
   (assignments + attachments first-class), milestones,
   notification center, empty states. Token-only; all motion is
   transform/opacity and inherits the reduced-motion guard above.
   ============================================================ */

/* ---------- Kanban task cards ---------- */
.task-card { padding: var(--sp-3) !important; }
.task-card h4 {
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text) !important;
}
.task-card p {
    font-size: var(--fs-12);
    line-height: 1.5;
    color: var(--muted) !important;
}
/* Priority reads as a 3px status edge, after the base hairline above */
.task-card[class*="border-l-"] { border-left-width: 3px !important; }
.task-card[class*="border-l-green"]  { border-left-color: var(--ok) !important; }
.task-card[class*="border-l-yellow"] { border-left-color: var(--warn) !important; }
.task-card[class*="border-l-red"]    { border-left-color: var(--danger) !important; }
/* Priority chip: mono micro-label, pill */
.task-card span[class*="bg-red-1"],
.task-card span[class*="bg-yellow-1"],
.task-card span[class*="bg-green-1"] {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: var(--sp-1) var(--sp-2);
}
/* Card actions (view/edit/delete): quiet until the card is engaged.
   Hover-capable pointers only — touch keeps them always visible. */
@media (hover: hover) {
    .task-card .space-x-1 button {
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .task-card:hover .space-x-1 button,
    .task-card:focus-within .space-x-1 button { opacity: 1; }
}
/* Column headers: calm title + mono count chip (chip styled above) */
.kanban-column h3 { font-size: var(--fs-14); font-weight: 600; }

/* ---------- Modals: one shape + entrance across the app ---------- */
#detailModal > div, #editModal > div, #settingsModal > div, #helpModal > div,
#createTeamModal > div, #teamDetailModal > div, #inviteMemberModal > div,
#createStageModal > div, #createMilestoneModal > div, #milestoneDetailModal > div {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px var(--shadow-ink);
    animation: suiModalIn 0.18s ease-out;
}
@keyframes suiModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Task detail: assignments + attachments first-class ---------- */
/* Metadata labels -> mono eyebrows */
#detailModal h3.uppercase, #milestoneDetailModal h3.uppercase {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--faint) !important;
    margin-bottom: var(--sp-1);
}
/* Assignee: accent identity chip (the actionable person) */
#detailAssignee {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent-bright) !important;
    font-size: var(--fs-14);
    font-weight: 500;
}
#detailAssignee::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    flex-shrink: 0;
}
/* Owner: neutral chip (provenance, not action) */
#detailOwner {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted) !important;
    font-size: var(--fs-14);
}
/* Attachment rows: flat list items, accent paperclip, hover reveal */
#detailFiles .glass-card {
    background: var(--surface-2) !important;
    box-shadow: none !important;
    padding: var(--sp-2) var(--sp-3);
    transition: border-color 0.15s ease;
}
#detailFiles .glass-card:hover { border-color: var(--accent-line) !important; }
#detailFiles svg.feather-paperclip { color: var(--accent) !important; }
#detailFiles > p { font-size: var(--fs-14); color: var(--faint) !important; }
/* Upload dropzone */
.sui-dropzone {
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sui-dropzone:hover {
    border-color: var(--accent) !important;
    background: var(--accent-soft);
}
.sui-dropzone svg { color: var(--accent); }

/* ---------- Milestones ---------- */
#milestonesContainer .border-l-4 {
    border: 1px solid var(--border) !important;
    border-left-width: 3px !important;
    border-radius: var(--radius-md);
    box-shadow: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#milestonesContainer .border-l-4:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-ink) !important;
}
#milestonesContainer .border-l-4.border-green-500 { border-left-color: var(--ok) !important; }
#milestonesContainer .border-l-4.border-red-500   { border-left-color: var(--danger) !important; }
#milestonesContainer .border-l-4.border-blue-500  { border-left-color: var(--accent) !important; }
/* Milestone empty state: accent icon well */
#milestonesContainer .rounded-full[class*="bg-gray"] { background: var(--accent-soft) !important; }
#milestonesContainer .rounded-full svg { color: var(--accent) !important; }

/* ---------- Notification center ---------- */
#notificationsPanel { border-radius: var(--radius-lg); }
#notificationsPanel h3 { font-size: var(--fs-16); font-weight: 600; }
.notif-item { position: relative; padding-right: var(--sp-8); }
.notif-unread::after {
    content: "";
    position: absolute;
    top: var(--sp-4); right: var(--sp-4);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* ---------- Board empty state: flat confidence, no pulsing blur ---------- */
#emptyStateOverlay .animate-pulse { display: none; }
#emptyStateOverlay > div {
    border-style: solid !important;
    border-width: 1px !important;
}

/* ---------- Board panels: hairline wells instead of drop shadows ---------- */
#boardView > .grid > div {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none !important;
}

/* ============================================================
   2026-08-05 "Engineered luminosity" pass — Jarvis-HUD elevation
   of the existing one-hue token system. Rules of the section:
   - glass = translucent token surfaces + hairline, blur reserved
     for chrome (header, modals, dropdown panels), never for the
     many-instance board cards;
   - glow = the existing --accent-glow family only, and only on
     interaction (hover, focus, drag) or single status dots;
   - numerals are tabular everywhere data is read;
   - all new motion is transform/opacity, 150-400ms, and inherits
     the prefers-reduced-motion kill-switch above.
   ============================================================ */

:root {
    /* Translucent faces for the glass read (same hue/lightness as the
       opaque surfaces they replace). */
    --surface-glass-2: oklch(0.21 0.02 255 / 0.72);
    --surface-glass-3: oklch(0.17 0.02 255 / 0.55);
    --accent-glow-soft: oklch(0.70 0.14 255 / 0.18);
    --ease-hud: cubic-bezier(0.22, 0.9, 0.35, 1);
}

/* ---------- Canvas atmosphere: one quiet ceiling light + hairline grid.
   Fixed, non-interactive, and cheap (two background layers, no blur). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(110% 60% at 50% -12%, var(--accent-glow-soft), transparent 62%),
        linear-gradient(var(--accent-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
    background-size: 100% 100%, 72px 72px, 72px 72px;
    opacity: 0.5;
}
/* App chrome sits above the atmosphere layer. (#ssoRedirect and
   #splashScreen are position:fixed overlays with their own z-index and
   already stack above it — never re-position them.) */
#appContainer { position: relative; z-index: 1; }

/* ---------- Tabular numerals: anywhere a number is an instrument readout */
.sui-stat-num, [data-count],
#quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate,
#remainingCount, #completedCount,
.notif-badge, #notificationsBadge,
#detailCreated, #detailUpdated, #detailCompleted, #detailDueDate,
#metricTotalTasks, #metricCompletionRate, #metricAvgTime, #metricActiveTasks {
    font-variant-numeric: tabular-nums;
}

/* ---------- Focus: one luminous ring for every interactive element.
   (style.css's legacy purple button ring is retired in place; this wins
   for everything else via the later cascade.) */
:focus-visible,
button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--accent-soft), 0 0 14px var(--accent-glow-soft) !important;
    border-radius: var(--radius-sm);
}

/* ============================================================
   Kanban board
   ============================================================ */

/* Column wells: translucent glass panes over the atmosphere grid */
.kanban-column > div {
    background: var(--surface-glass-3) !important;
}

/* Column headers as instrument panels: mono uppercase title, hairline
   base rule with a short lit segment, accent-tinted status icon. */
.sui-col-head {
    position: relative;
    margin: -4px -8px 12px;
    padding: 4px 8px 10px;
    border-bottom: 1px solid var(--border);
}
.sui-col-head::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: -1px;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    box-shadow: 0 0 8px var(--accent-glow);
}
.sui-col-title {
    font-family: var(--font-mono) !important;
    font-size: var(--fs-12) !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text) !important;
}
.sui-col-head svg.feather, .sui-col-head i {
    color: var(--accent) !important;
    width: 14px !important;
    height: 14px !important;
}
.kanban-column [data-count] {
    min-width: 24px;
    text-align: center;
    border: 1px solid var(--accent-line);
}

/* Task cards: glassy at rest, luminous edge on engagement. */
.task-card, [data-task-id] {
    background: var(--surface-glass-2) !important;
    transition: transform 0.25s var(--ease-hud),
                border-color 0.25s var(--ease-hud),
                box-shadow 0.25s var(--ease-hud);
}
.task-card:hover, [data-task-id]:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line) !important;
    box-shadow:
        0 8px 24px var(--shadow-ink),
        0 0 0 1px var(--accent-line),
        0 0 18px var(--accent-glow-soft) !important;
}
/* Live drag: the card becomes the brightest object on the board */
.task-card.sui-dragging, [data-task-id].sui-dragging {
    border-color: var(--accent) !important;
    box-shadow:
        0 12px 32px var(--shadow-ink),
        0 0 0 1px var(--accent),
        0 0 24px var(--accent-glow) !important;
}

/* Drop target: a lit landing pad, not a color swap. The dashed hairline +
   inner wash reads "receiving" without moving the cards inside it. */
.drag-over {
    background:
        radial-gradient(80% 60% at 50% 0%, var(--accent-glow-soft), transparent 70%),
        var(--accent-soft) !important;
    border: 1px dashed var(--accent) !important;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 24px var(--accent-glow-soft);
}

/* Board scrollbar: retire the legacy purple thumb for the one hue */
.kanban-board-container,
.dark .kanban-board-container {
    scrollbar-color: var(--border-strong) transparent;
}
.kanban-board-container::-webkit-scrollbar-track,
.dark .kanban-board-container::-webkit-scrollbar-track {
    background: transparent;
}
.kanban-board-container::-webkit-scrollbar-thumb,
.dark .kanban-board-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    background-clip: padding-box;
}
.kanban-board-container::-webkit-scrollbar-thumb:hover,
.dark .kanban-board-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}

/* Quick Stats: readout wells with tabular display numerals */
#quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate {
    font-size: var(--fs-24);
}

/* ============================================================
   App chrome
   ============================================================ */

/* Header: keep the translucent bar, add a lit segment on its hairline */
header.glass-frosted { position: sticky; }
header.glass-frosted::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-glow), transparent);
    pointer-events: none;
}

/* Sidebar active pill: the inset bar now emits a little light */
.sui-sidebar .nav-btn.bg-purple-600,
.sui-sidebar .filter-btn.bg-purple-600,
.sui-sidebar .filter-btn[class*="bg-purple-1"] {
    box-shadow:
        inset 2px 0 0 var(--accent),
        inset 8px 0 12px -8px var(--accent-glow) !important;
}
.sui-stat-chip { background: var(--surface-glass-3); }

/* Collapse button: legacy purple hover -> token wash */
#collapseBtn:hover, .dark #collapseBtn:hover {
    background: var(--accent-soft) !important;
}

/* ============================================================
   Modals & overlays: glass panels with a lit top edge
   ============================================================ */
#detailModal > div, #editModal > div, #settingsModal > div, #helpModal > div,
#createTeamModal > div, #teamDetailModal > div, #inviteMemberModal > div,
#createStageModal > div, #createMilestoneModal > div, #milestoneDetailModal > div,
#labelManagerModal > div:last-child {
    position: relative;
    background: oklch(0.17 0.02 255 / 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: suiModalIn 0.28s var(--ease-hud);
}
#detailModal > div::before, #editModal > div::before,
#settingsModal > div::before, #helpModal > div::before,
#createTeamModal > div::before, #teamDetailModal > div::before,
#inviteMemberModal > div::before, #createStageModal > div::before,
#createMilestoneModal > div::before, #milestoneDetailModal > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    pointer-events: none;
}
/* Scrims blur what they cover — depth without darkness */
#detailModal, #editModal, #settingsModal, #helpModal,
#createTeamModal, #teamDetailModal, #inviteMemberModal,
#createStageModal, #createMilestoneModal, #milestoneDetailModal,
#labelManagerModal, #ssoRedirect {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Detail modal: readout values breathe a little more than body text */
#detailModal #detailStatus, #detailModal #detailPriorityText,
#detailModal #detailDueDate, #detailModal #detailDependency {
    font-weight: 500;
}
#detailModal #detailId { color: var(--faint); letter-spacing: 0.06em; }

/* ============================================================
   Notification center: glass dropdown with a purposeful entrance
   ============================================================ */
#notificationsPanel {
    background: oklch(0.17 0.02 255 / 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 24px 64px var(--shadow-ink), 0 0 0 1px var(--accent-soft) !important;
}
#notificationsPanel:not(.hidden) {
    animation: suiPanelIn 0.25s var(--ease-hud);
}
@keyframes suiPanelIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}
#notificationsPanel h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.notif-badge { font-family: var(--font-mono); }

/* ============================================================
   Empty state: a calm HUD frame, not a promo card
   ============================================================ */
#emptyStateOverlay { backdrop-filter: none !important; background: transparent !important; }
#emptyStateOverlay > div {
    position: relative;
    background: var(--surface-glass-3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
/* Corner brackets: the frame device that says "instrument, standing by" */
#emptyStateOverlay > div::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background:
        linear-gradient(var(--accent-line), var(--accent-line)) left 0 top 0 / 18px 1px,
        linear-gradient(var(--accent-line), var(--accent-line)) left 0 top 0 / 1px 18px,
        linear-gradient(var(--accent-line), var(--accent-line)) right 0 top 0 / 18px 1px,
        linear-gradient(var(--accent-line), var(--accent-line)) right 0 top 0 / 1px 18px,
        linear-gradient(var(--accent-line), var(--accent-line)) left 0 bottom 0 / 18px 1px,
        linear-gradient(var(--accent-line), var(--accent-line)) left 0 bottom 0 / 1px 18px,
        linear-gradient(var(--accent-line), var(--accent-line)) right 0 bottom 0 / 18px 1px,
        linear-gradient(var(--accent-line), var(--accent-line)) right 0 bottom 0 / 1px 18px;
    background-repeat: no-repeat;
}
/* Icon well: flat accent wash + slow breathing halo (transform/opacity only) */
#emptyStateOverlay > div [class*="bg-gradient-to-br"] {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-line);
}
#emptyStateOverlay > div [class*="bg-gradient-to-br"] svg {
    color: var(--accent-bright) !important;
}
#emptyStateOverlay .sui-halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow-soft), transparent 70%);
    animation: suiBreathe 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes suiBreathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.9;  transform: scale(1.12); }
}

/* ============================================================
   Sign-in overlay: the suite airlock
   ============================================================ */
#ssoRedirect .glass-panel {
    position: relative;
    background: oklch(0.17 0.02 255 / 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: var(--accent-line) !important;
    overflow: hidden;
}
#ssoRedirect .glass-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
#ssoRedirect .glass-button:hover {
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px var(--accent-glow) !important;
}

/* ============================================================
   Teams & milestones panels: same hover light as the board
   ============================================================ */
#teamsGrid > div {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none !important;
    transition: transform 0.25s var(--ease-hud),
                border-color 0.25s var(--ease-hud),
                box-shadow 0.25s var(--ease-hud);
}
#teamsGrid > div:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow: 0 8px 24px var(--shadow-ink), 0 0 18px var(--accent-glow-soft) !important;
}
#milestonesContainer .border-l-4:hover {
    box-shadow: 0 8px 24px var(--shadow-ink), 0 0 18px var(--accent-glow-soft) !important;
}

/* Let the atmosphere read through the content canvas: the flattening rule
   above painted #mainContent as an opaque bordered surface — the canvas is
   not a panel, panels sit on it. */
#mainContent.glass-gradient-bg, #mainContent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}