@import "board-axylv1Z.css";

/* =======================================================
   HPIT Intelligence Architect — Design System v2.0
   Light Mode Foundation + Purple Accent Scale
   ======================================================= */

/* --- Token System --- */
:root {
    /* Neutral Tier — Layered depth without clutter */
    --bg-main:      #F8FAFC;  /* Soft canvas — primary surface */
    --sidebar:      #F1F5F9;  /* Spine — slightly tinted white */
    --bg-deep:      #FFFFFF;  /* Cards — pure white foreground */
    --sidebar-hover:#E8EDF4;  /* Hover/active tint */
    --border:       #E2E8F0;  /* Subtle stroke */
    --border-strong:#CBD5E1;  /* Stronger strokes / dividers */

    /* Typography Scale — Gracefully muted hierarchy */
    --text-main:    #1E293B;  /* Slate 800 (was 900) — anchor headings */
    --text-body:    #334155;  /* Slate 700 (was 800) — body data */
    --text-muted:   #64748B;  /* Slate 500 — metadata, context */
    --sidebar-text: #475569;  /* Slate 600 — Nav labels */

    /* ── Indigo Ramp (full 11-stop scale) ─────────────────
       Source: Indigo 50–950
       Reference the ramp directly for one-off overrides;
       use the semantic aliases below for all component work.
    ──────────────────────────────────────────────────────── */
    --indigo-50:  #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;
    --indigo-950: #1E1B4B;

    /* ── Semantic Accent Aliases ───────────────────────────
       Map ramp weights to intent — never use raw ramp tokens
       in components; always go through these aliases.
    ──────────────────────────────────────────────────────── */
    --accent:         var(--indigo-600); /* Primary actions, brand identity */
    --accent-hover:   var(--indigo-700); /* Interaction feedback — hover/active */
    --accent-active:  var(--indigo-800); /* Pressed / focus-visible ring source */
    --accent-light:   var(--indigo-400); /* Links, secondary interactive text */
    --accent-subtle:  var(--indigo-500); /* Mid-weight — icons, accented UI text */
    --accent-bg:      var(--indigo-100); /* Badge / pill fills */
    --accent-bg-soft: var(--indigo-50);  /* Very subtle tints — row highlights */
    --accent-border:  var(--indigo-300); /* Accent-tinted borders */
    --accent-on:      #FFFFFF;           /* Text color on accent-filled backgrounds */

    /* Semantic States */
    --success:        #059669;
    --success-bg:     #D1FAE5;
    --success-border: #6EE7B7;
    --danger:         #DC2626;
    --danger-bg:      #FEE2E2;
    --danger-border:  #FCA5A5;
    --warning:        #D97706;
    --warning-bg:     #FEF3C7;
    --warning-border: #FCD34D;
    --info:           #0284C7;
    --info-bg:        #E0F2FE;

    /* Elevation Shadows (light-aware) */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.1),  0 2px 6px rgba(15,23,42,0.06);
    --shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.07);
    --shadow-xl: 0 20px 48px rgba(15,23,42,0.14), 0 8px 24px rgba(15,23,42,0.08);

    /* Base Radius */
    --radius: 2px;
}


/* =======================================================
   Dark Mode — Enterprise-Grade Token Overrides
   Double Distance Rule · Elevation Principle · OKLCH Semantics
   ======================================================= */
[data-theme="dark"] {
    /* ── Neutral Hierarchy (5% increment Double Distance Rule) ──
       Surfaces get LIGHTER as they elevate.
       bg-main (darkest) → sidebar → bg-deep (cards, lightest)
    ──────────────────────────────────────────────────────────── */
    --bg-main:       #171B26;  /* L0 — comfortable dark, not a cave  */
    --sidebar:       #1E2233;  /* L1 — spine, +5% from bg-main       */
    --bg-deep:       #252A3A;  /* L2 — cards/modals, +5% from sidebar */
    --sidebar-hover: #2D3348;  /* Hover tint — perceptibly distinct   */
    --border:        #353B52;  /* Subtle edge — brighter in dark mode  */
    --border-strong: #454D68;  /* Strong dividers / active borders     */

    /* ── Typography (restored legibility without pure white) ───────────────── */
    --text-main:     #F1F5F9;  /* Slate 100 — crisp primary headings */
    --text-body:     #E2E8F0;  /* Slate 200 — highly readable body data */
    --text-muted:    #94A3B8;  /* Slate 400 — secondary metadata */
    --sidebar-text:  #94A3B8;

    /* ── Brand Ramp Shift (300/400 primary on dark bg) ──────── */
    --accent:         var(--indigo-400);
    --accent-hover:   var(--indigo-500);
    --accent-active:  var(--indigo-600);
    --accent-light:   var(--indigo-300);
    --accent-subtle:  var(--indigo-400);
    --accent-bg:      rgba(99,102,241, 0.20);
    --accent-bg-soft: rgba(99,102,241, 0.08);
    --accent-border:  rgba(129,140,248, 0.30);
    --accent-on:      #FFFFFF;

    /* ── Semantic States (OKLCH-balanced: L=0.75 C=0.18) ──── */
    --success:        oklch(0.75 0.18 155);
    --success-bg:     oklch(0.75 0.18 155 / 0.12);
    --success-border: oklch(0.75 0.18 155 / 0.30);
    --danger:         oklch(0.75 0.18 25);
    --danger-bg:      oklch(0.75 0.18 25 / 0.12);
    --danger-border:  oklch(0.75 0.18 25 / 0.30);
    --warning:        oklch(0.75 0.18 80);
    --warning-bg:     oklch(0.75 0.18 80 / 0.12);
    --warning-border: oklch(0.75 0.18 80 / 0.30);
    --info:           oklch(0.75 0.18 235);
    --info-bg:        oklch(0.75 0.18 235 / 0.12);

    /* ── Elevation Shadows (edge-glow on dark) ──────────────── */
    --shadow-xs: 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.6);
}

/* =======================================================
   Custom Theme Systems — Forest & High Contrast
   ======================================================= */

/* ── Forest Theme (Light Mode) ── */
[data-color-theme="forest"] {
    --bg-main:      #F4F9F5;
    --sidebar:      #EAF2EC;
    --bg-deep:      #FFFFFF;
    --sidebar-hover:#DFEBE2;
    --border:       rgba(0, 0, 0, 0.12);
    --border-strong:rgba(0, 0, 0, 0.22);

    --text-main:    #0D2013;
    --text-body:    #1F3A27;
    --text-muted:   #557A5F;
    --sidebar-text: #2D5037;

    /* Green brand scale */
    --accent:         #16A34A; /* Mid green */
    --accent-hover:   #15803D;
    --accent-active:  #166534;
    --accent-light:   #15803D;
    --accent-subtle:  #16A34A;
    --accent-bg:      #DCFCE7;
    --accent-bg-soft: #F0FDF4;
    --accent-border:  #86EFAC;
    --accent-on:      #FFFFFF;
}

/* ── Forest Theme (Dark Mode) ── */
[data-color-theme="forest"][data-theme="dark"] {
    --bg-main:       #0a150e;  /* L0: Deep dark Slack canvas */
    --sidebar:       #122316;  /* L1: Channels sidebar background */
    --bg-deep:       #111c15;  /* L2: Cards/containers — neutral dark, hint of green */
    --sidebar-hover: #182a1d;  /* Hover tint */
    --border:        rgba(255, 255, 255, 0.08);  /* Semi-transparent white to let gradient shine through */
    --border-strong: rgba(255, 255, 255, 0.16);

    --text-main:     #e8f7ed;  /* Soft light green headings */
    --text-body:     #d1ebd9;  /* Soft green body */
    --text-muted:    #8aad96;  /* Brighter muted — ~5.5:1 on dark bg */
    --sidebar-text:  #8aad96;

    /* Green brand ramp on dark background */
    --accent:         #8cee45;  /* Bright vibrant lime green */
    --accent-hover:   #a3f268;
    --accent-active:  #b9f68c;
    --accent-light:   #6bcc3a;
    --accent-subtle:  #5ab832;
    --accent-bg:      rgba(140, 238, 69, 0.20);
    --accent-bg-soft: rgba(140, 238, 69, 0.10);
    --accent-border:  rgba(140, 238, 69, 0.30);
    --accent-on:      #0a150e;  /* Dark text on bright lime */
}

/* Sidebar Gradients for Forest Theme */
[data-color-theme="forest"] nav.sidebar {
    background: linear-gradient(180deg, #e2f2e5 0%, #e0e9f5 100%) !important;
}
[data-color-theme="forest"] .chat-sidebar {
    background: linear-gradient(180deg, #d3ebd8 0%, #cbdcf0 100%) !important; /* Slightly darker */
}

[data-color-theme="forest"][data-theme="dark"] nav.sidebar {
    background: linear-gradient(180deg, #122a04 0%, #020e26 100%) !important;
}
[data-color-theme="forest"][data-theme="dark"] .chat-sidebar {
    background: linear-gradient(180deg, #0d2003 0%, #010a1b 100%) !important; /* Slightly darker */
}
/* Custom Sidebar Nav Styling for Forest Theme */
[data-color-theme="forest"] .chat-sidebar .sidebar-nav-item,
[data-color-theme="forest"] .chat-sidebar .thread-btn {
    color: var(--accent) !important; /* Accent green text color by default */
}
[data-color-theme="forest"] .chat-sidebar .sidebar-nav-item .material-symbols-rounded {
    color: var(--accent) !important;
}
[data-color-theme="forest"] .chat-sidebar .thread-btn-wrapper .thread-more-btn {
    color: var(--accent) !important;
}
[data-color-theme="forest"] .chat-sidebar .thread-btn-wrapper:hover:not([data-active="true"]) {
    background: rgba(0, 0, 0, 0.05) !important; /* Soft dark overlay for light mode hover */
}
[data-color-theme="forest"][data-theme="dark"] .chat-sidebar .thread-btn-wrapper:hover:not([data-active="true"]) {
    background: rgba(255, 255, 255, 0.05) !important; /* Soft light overlay for dark mode hover */
}

/* Selected active thread styling for Forest theme — matches rail-item.active density */
[data-color-theme="forest"] .chat-sidebar .thread-btn-wrapper[data-active="true"] {
    background: var(--accent-bg) !important;
}
[data-color-theme="forest"][data-theme="dark"] .chat-sidebar .thread-btn-wrapper[data-active="true"] {
    background: var(--accent-bg) !important;
}
[data-color-theme="forest"] .chat-sidebar .thread-btn-wrapper[data-active="true"] .thread-btn,
[data-color-theme="forest"] .chat-sidebar .thread-btn-wrapper[data-active="true"] .thread-more-btn {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* Forest Dark — dark text on bright lime accent backgrounds (white on #8cee45 = ~1.8:1, FAILS WCAG) */
[data-color-theme="forest"][data-theme="dark"] .btn-action.primary,
[data-color-theme="forest"][data-theme="dark"] .auth-btn,
[data-color-theme="forest"][data-theme="dark"] button[data-action="click->chat#sendMessage"],
[data-color-theme="forest"][data-theme="dark"] button[style*="background: var(--accent)"],
[data-color-theme="forest"][data-theme="dark"] button[style*="background:var(--accent)"],
[data-color-theme="forest"][data-theme="dark"] a[style*="background: var(--accent)"],
[data-color-theme="forest"][data-theme="dark"] a[style*="background:var(--accent)"],
[data-color-theme="forest"][data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current {
    color: var(--accent-on) !important;
}

/* ── Atlantis Theme (Light Mode) ── */
[data-color-theme="atlantis"] {
    --bg-main:      #F6F8F6;
    --sidebar:      #E9F2E9;
    --bg-deep:      #FFFFFF;
    --sidebar-hover:#DFE7DF;
    --border:       rgba(0, 0, 0, 0.12);
    --border-strong:rgba(0, 0, 0, 0.22);

    --text-main:    #0A1A1A;
    --text-body:    #152B2B;
    --text-muted:   #4B7575;
    --sidebar-text: #2A4D4D;

    /* Teal brand scale */
    --accent:         #0F766E; /* Darker teal for readability (WCAG AA) */
    --accent-hover:   #115E59;
    --accent-active:  #134E4A;
    --accent-light:   #14B8A6; /* Retain vibrant teal for highlights */
    --accent-subtle:  #0D9488;
    --accent-bg:      rgba(20, 184, 166, 0.15); /* Vibrant background tint */
    --accent-bg-soft: rgba(20, 184, 166, 0.08);
    --accent-border:  rgba(20, 184, 166, 0.35);
    --accent-on:      #FFFFFF;
}

/* ── Atlantis Theme (Dark Mode) ── */
[data-color-theme="atlantis"][data-theme="dark"] {
    --bg-main:       #060F0F;
    --sidebar:       #0C1E1E;
    --bg-deep:       #0A1414;
    --sidebar-hover: #122B2B;
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text-main:     #E5F3F3;
    --text-body:     #CBE6E6;
    --text-muted:    #7DAFAB;
    --sidebar-text:  #7DAFAB;

    /* Teal brand ramp on dark background */
    --accent:         #33E2D6;
    --accent-hover:   #5AF0E6;
    --accent-active:  #8CF7F1;
    --accent-light:   #33E2D6;
    --accent-subtle:  #22C3B8;
    --accent-bg:      rgba(51, 226, 214, 0.15);
    --accent-bg-soft: rgba(51, 226, 214, 0.08);
    --accent-border:  rgba(51, 226, 214, 0.30);
    --accent-on:      #051515;
}

/* Atlantis Dark — dark text on bright teal accent backgrounds */
[data-color-theme="atlantis"][data-theme="dark"] .btn-action.primary,
[data-color-theme="atlantis"][data-theme="dark"] .auth-btn,
[data-color-theme="atlantis"][data-theme="dark"] button[data-action="click->chat#sendMessage"],
[data-color-theme="atlantis"][data-theme="dark"] button[style*="background: var(--accent)"],
[data-color-theme="atlantis"][data-theme="dark"] button[style*="background:var(--accent)"],
[data-color-theme="atlantis"][data-theme="dark"] a[style*="background: var(--accent)"],
[data-color-theme="atlantis"][data-theme="dark"] a[style*="background:var(--accent)"],
[data-color-theme="atlantis"][data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current {
    color: var(--accent-on) !important;
}

/* ── High Contrast Theme (Light Mode) ── */
[data-color-theme="high-contrast"] {
    --bg-main:      #FFFFFF;
    --sidebar:      #F0F0F0;
    --bg-deep:      #FFFFFF;
    --sidebar-hover:#E0E0E0;
    --border:       #000000;
    --border-strong:#000000;

    --text-main:    #000000;
    --text-body:    #111111;
    --text-muted:   #333333;
    --sidebar-text: #000000;

    --accent:         #000000;
    --accent-hover:   #111111;
    --accent-active:  #222222;
    --accent-light:   #333333;
    --accent-subtle:  #000000;
    --accent-bg:      #E5E5E5;
    --accent-bg-soft: #F5F5F5;
    --accent-border:  #000000;
    --accent-on:      #FFFFFF;

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
}

/* ── High Contrast Theme (Dark Mode) ── */
[data-color-theme="high-contrast"][data-theme="dark"] {
    --bg-main:       #000000;
    --sidebar:       #111111;
    --bg-deep:       #000000;
    --sidebar-hover: #222222;
    --border:        #FFFFFF;
    --border-strong: #FFFFFF;

    --text-main:     #FFFFFF;
    --text-body:     #EEEEEE;
    --text-muted:    #CCCCCC;
    --sidebar-text:  #FFFFFF;

    --accent:         #FFFFFF;
    --accent-hover:   #EEEEEE;
    --accent-active:  #DDDDDD;
    --accent-light:   #CCCCCC;
    --accent-subtle:  #FFFFFF;
    --accent-bg:      #333333;
    --accent-bg-soft: #222222;
    --accent-border:  #FFFFFF;
    --accent-on:      #000000;

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Vivid semantic states for maximum legibility against pure black */
    --success:        #22c55e;
    --success-bg:     rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.40);
    --danger:         #ef4444;
    --danger-bg:      rgba(239, 68, 68, 0.15);
    --danger-border:  rgba(239, 68, 68, 0.40);
    --warning:        #eab308;
    --warning-bg:     rgba(234, 179, 8, 0.15);
    --warning-border: rgba(234, 179, 8, 0.40);
    --info:           #3b82f6;
    --info-bg:        rgba(59, 130, 246, 0.15);
}

/* High Contrast Button Text Color Overrides for Proper Contrast */
[data-color-theme="high-contrast"]:not([data-theme="dark"]) button[style*="background:var(--accent)"],
[data-color-theme="high-contrast"]:not([data-theme="dark"]) button[style*="background: var(--accent)"],
[data-color-theme="high-contrast"]:not([data-theme="dark"]) a[style*="background:var(--accent)"],
[data-color-theme="high-contrast"]:not([data-theme="dark"]) a[style*="background: var(--accent)"],
[data-color-theme="high-contrast"]:not([data-theme="dark"]) .btn-action.primary,
[data-color-theme="high-contrast"]:not([data-theme="dark"]) .action-button.primary,
[data-color-theme="high-contrast"]:not([data-theme="dark"]) .auth-btn,
[data-color-theme="high-contrast"]:not([data-theme="dark"]) .dt-container .dt-paging .dt-paging-button.current {
    color: #FFFFFF !important;
}

[data-color-theme="high-contrast"][data-theme="dark"] button[style*="background:var(--accent)"],
[data-color-theme="high-contrast"][data-theme="dark"] button[style*="background: var(--accent)"],
[data-color-theme="high-contrast"][data-theme="dark"] a[style*="background:var(--accent)"],
[data-color-theme="high-contrast"][data-theme="dark"] a[style*="background: var(--accent)"],
[data-color-theme="high-contrast"][data-theme="dark"] .btn-action.primary,
[data-color-theme="high-contrast"][data-theme="dark"] .action-button.primary,
[data-color-theme="high-contrast"][data-theme="dark"] .auth-btn,
[data-color-theme="high-contrast"][data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current {
    color: #000000 !important;
}



/* ── Dark scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Dark auth page ── */
[data-theme="dark"] .auth-body {
    background: #0B0E17;
    animation: none;
}

[data-theme="dark"] .auth-body::before {
    background: radial-gradient(ellipse, rgba(129,140,248,0.18) 0%, transparent 70%);
    filter: blur(100px);
}

[data-theme="dark"] .auth-body::after {
    background: radial-gradient(ellipse, rgba(99,102,241,0.14) 0%, transparent 70%);
    filter: blur(120px);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-body);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4 { margin-top: 0; font-weight: 700; color: var(--text-main); }

h1 {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h1 .material-symbols-rounded {
    font-size: 1.15em;
    flex-shrink: 0;
}

h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}

p { line-height: 1.6; margin-top: 0; }

a { color: var(--accent-light); text-decoration: none; transition: color 0.12s; }
a:hover { color: var(--accent); }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

/* Links that are secondary/lower-priority stop at 400 by default,
   stepping up to 600 (--accent) only on deliberate hover interaction. */
.link-secondary { color: var(--accent-light); }
.link-secondary:hover { color: var(--accent-subtle); }

.gradient-text {
    /* 600 → 400: brand gradient reads light-to-lighter, not dark-to-light */
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; transition: background 0.15s; }
/* Subtle brand moment — scrollbar steps to 400 on hover, not just grey */
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

/* --- Animations --- */
@keyframes spin {
    100% { transform: rotate(360deg); }
}
@keyframes bellPulse {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(12deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(6deg); }
    40% { transform: rotate(0deg); }
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInDown {
    from { transform: translateY(-120%) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes letterDrop {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
/* --- Global Icon Standards --- */
/* Enforce that icons seamlessly match their surrounding typography, stripping scattered color treatments */
.material-symbols-rounded, .material-symbols-outlined {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 0.85; /* Soften geometry to retain focus on typography */
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(12px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* panic / scream — triggered by "!!!" phrases in the typing controller */
@keyframes panicShake {
    0%   { transform: translateX(0)     scale(1);    color: inherit; }
    4%   { transform: translateX(-8px)  scale(1.04); color: #D946EF; }
    8%   { transform: translateX(8px)   scale(1.02); color: #A855F7; }
    12%  { transform: translateX(-7px)  scale(1.04); color: #D946EF; }
    16%  { transform: translateX(7px)   scale(1.02); color: #A855F7; }
    20%  { transform: translateX(-6px)  scale(1.03); color: #D946EF; }
    24%  { transform: translateX(6px)   scale(1);    color: #A855F7; }
    28%  { transform: translateX(-5px)  scale(1.02); color: #D946EF; }
    32%  { transform: translateX(5px)   scale(1);    color: #A855F7; }
    36%  { transform: translateX(-4px)  scale(1.01); color: #D946EF; }
    40%  { transform: translateX(4px)   scale(1);    color: #A855F7; }
    44%  { transform: translateX(-3px)  scale(1);    color: #D946EF; }
    48%  { transform: translateX(3px)   scale(1);    color: #A855F7; }
    52%  { transform: translateX(-2px)  scale(1);    color: #D946EF; }
    56%  { transform: translateX(2px)   scale(1);    color: inherit; }
    60%  { transform: translateX(-1px)  scale(1);    color: inherit; }
    65%  { transform: translateX(1px);               color: inherit; }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0)     scale(1);    color: inherit; }
}

.animate-panic {
    display: inline-block;
    animation: panicShake 1.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    transform-origin: center;
}

/* View Transitions */
::view-transition-old(root) { animation: 0.2s ease-out fadeOut; }
::view-transition-new(root) { animation: 0.25s ease-out fadeInUp; }

/* Reduced motion / disabled animations */
[data-animations="disabled"] * {
    transition: none !important;
    animation: none !important;
}

/* --- Icon Rail Sidebar --- */
nav.sidebar {
    width: 72px;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logo */
.rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
}

.rail-logo-svg {
    width: 32px;
    height: auto;
    color: var(--sidebar-logo, var(--accent-light));
    transition: color 0.15s;
}

.rail-logo:hover .rail-logo-svg {
    color: var(--sidebar-logo-hover, var(--accent));
}

/* Nav container */
.rail-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    width: 100%;
    padding: 0 6px;
}

/* Spacer between groups */
.rail-spacer {
    height: 12px;
    flex-shrink: 0;
}

/* Individual rail item (link or button) */
.rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 6px 0;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--sidebar-text);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}

.rail-item .material-symbols-rounded {
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.12s ease;
}

.rail-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hover */
.rail-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-active-text, var(--text-main));
}

/* Active — accent background pill */
.rail-item.active {
    background: var(--sidebar-active-bg, var(--accent-bg));
    color: var(--sidebar-active-text, var(--accent));
}

.rail-item.active .material-symbols-rounded {
    color: var(--sidebar-active-text, var(--accent));
}

/* Rail footer */
.rail-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 6px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Avatar at bottom */
.rail-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    flex-shrink: 0;
}

.rail-avatar img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--border);
    transition: box-shadow 0.15s;
}

.rail-avatar:hover img {
    box-shadow: 0 0 0 2px var(--accent);
}

/* Keyboard shortcut label */
.rail-label-kbd {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.5;
}

/* --- Main Content --- */
main.content {
    flex-grow: 1;
    padding: 5rem 3.5rem 3rem;
    overflow-y: scroll;
    background: var(--bg-main);
    min-width: 0;
    min-height: 0;
}

.container { max-width: 1280px; margin: 0 auto; }

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    font-weight: 400;
}

/* --- Cards --- */
.card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.card-body { padding: 24px; }

/* --- Detail Panel (Entity Profile Pages) --- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px; /* 8pt × 6 — generous horizontal gutter */
}
.detail-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
}
.detail-grid > .detail-section {
    padding: 24px 0; /* 8pt × 3 vertical rhythm */
}
.detail-grid > .detail-section:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}
.detail-grid > .detail-section + .detail-section {
    padding-left: 24px;
}
/* For 3-col grids, only the non-last columns get the divider */
.detail-grid--3col > .detail-section:nth-child(2) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}

.detail-section-title {
    font-size: 0.75rem; /* 12px — modular scale stop */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 16px 0; /* 8pt × 2 */
}

.detail-field {
    margin-bottom: 16px; /* 8pt × 2 */
}
.detail-field:last-child {
    margin-bottom: 0;
}
.detail-field-label {
    font-size: 0.75rem; /* 12px — modular scale */
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px; /* 8pt × 0.5 — tight internal relationship */
}
.detail-field-value {
    font-size: 0.875rem;
    color: var(--text-body);
}
.detail-field-value--emphasis {
    font-weight: 600;
    color: var(--text-main);
}
.detail-field-value--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.detail-field-value--link:hover {
    color: var(--accent);
}

/* --- 3D Card Flip (People Grid) --- */
.person-card {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.person-card__inner {
    width: 100%;
    height: 100%;
}
.person-card__front {
    border-radius: 0;
    background: var(--bg-deep);
    border: none;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
    transition: background-color 0.15s;
    height: 100%;
}
.person-card:hover .person-card__front {
    background-color: var(--sidebar-hover);
}

/* --- Chat Attachments --- */
.chat-thumbnail {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-thumbnail:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-sm);
}
.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent-light);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color 0.12s, background 0.12s;
}
.chat-file-chip:hover {
    border-color: var(--accent-border);
    background: var(--accent-bg-soft);
}

/* --- Buttons --- */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 8px 16px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-body);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.12s ease;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.btn-action:hover {
    /* Default ghost btn hover nudges toward brand without fully committing */
    background: var(--accent-bg-soft);
    border-color: var(--accent-border);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.btn-action.primary {
    background: var(--accent);       /* 600 — clear primary CTA */
    border-color: var(--accent);
    color: var(--accent-on);
}

.btn-action.primary:hover {
    background: var(--accent-hover); /* 700 — steps darker, confirms intent */
    border-color: var(--accent-hover);
}

.btn-action.primary:active {
    background: var(--accent-active); /* 800 — pressed state, maximum feedback */
    border-color: var(--accent-active);
}

.btn-action.danger {
    color: var(--danger);
    border-color: rgba(220,38,38,0.25);
}
.btn-action.danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-action.success {
    color: var(--success);
    border-color: rgba(40,167,69,0.25);
}
.btn-action.success:hover {
    background: var(--success-bg);
    border-color: var(--success);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.btn-action .material-symbols-rounded { font-size: 1rem; }

/* --- Status Badges --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.status-badge.active, .status-badge.status-active               { background: var(--success-bg); color: var(--success); }
.status-badge.inactive, .status-badge.status-inactive           { background: var(--sidebar-hover); color: var(--text-muted); }
.status-badge.pending, .status-badge.status-pending             { background: var(--warning-bg); color: var(--warning); }
.status-badge.leased, .status-badge.status-leased               { background: var(--info-bg); color: var(--info); }
.status-badge.retired, .status-badge.status-retired             { background: var(--danger-bg); color: var(--danger); }
.status-badge.purple                                            { background: var(--accent-bg); color: var(--accent); }
/* Asset statuses */
.status-badge.status-deployed                                   { background: var(--info-bg); color: var(--info); }
.status-badge.status-available                                  { background: var(--success-bg); color: var(--success); }
.status-badge.status-maintenance                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-decommissioned, .status-badge.status-retired { background: var(--sidebar-hover); color: var(--text-muted); }
/* Ticket statuses */
.status-badge.status-Open                                       { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-InProgress                                 { background: var(--info-bg); color: var(--info); }
.status-badge.status-Resolved                                   { background: var(--success-bg); color: var(--success); }
/* Person/admin statuses */
.status-badge.status-invited                                    { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-offboarding                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-terminated                                 { background: var(--danger-bg); color: var(--danger); }

/* Card header h1/h2/h3 size constraint */
.card-header h1 { font-size: 1.125rem; margin: 0; }
.card-header h2 { margin: 0; }
.card-header h3 { margin: 0; }

/* --- Form Controls --- */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.12s, box-shadow 0.12s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);                         /* 600 border */
    box-shadow: 0 0 0 3px var(--accent-bg);              /* 100 ring — soft, branded */
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

/* --- Searchable Select --- */
.ss-wrapper {
    position: relative;
}
.ss-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.ss-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    line-height: 1.4;
    white-space: nowrap;
}
.ss-tag-remove {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.ss-tag-remove:hover { opacity: 1; }
.ss-search {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    background: var(--input-bg, var(--bg-deep));
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
.ss-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.ss-search::placeholder { color: var(--text-muted); }
.ss-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ss-option {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text-body);
    transition: background 0.1s;
}
.ss-option:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}
.ss-option--selected {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}
.ss-option--selected:hover {
    background: var(--accent-bg);
}
.ss-no-results {
    padding: 0.75rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Auth Pages --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #F8FAFC, #EEF2FF, #E0E7FF, #F1F5F9);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Atmospheric glow orbs — instant ambiance before JS loads */
.auth-body::before,
.auth-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-body::before {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(129,140,248,0.1) 0%, transparent 70%);
    top: -5%;
    right: -5%;
    filter: blur(80px);
}

.auth-body::after {
    width: 500px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.08) 0%, transparent 70%);
    bottom: -10%;
    left: -5%;
    filter: blur(100px);
}

.auth-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-xl);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-input-group label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-input {
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1.125rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
}

.auth-input:focus {
    border-color: var(--accent);          /* 600 */
    box-shadow: 0 0 0 3px var(--accent-bg); /* 100 ring */
}

.auth-btn {
    background: var(--accent);  /* 600 — primary identity moment */
    color: #fff;
    border: none;
    padding: 1.125rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-top: 0.5rem;
}

.auth-btn:hover {
    background: var(--accent-hover);  /* 700 — deliberate step darker */
}

.auth-btn:active {
    background: var(--accent-active); /* 800 — maximum confirmation */
}

.auth-alert {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

/* --- Reveal Utility --- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- DataTables Light Override --- */
.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-main) !important;
    padding: 0.55rem 1rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important; /* 100 ring */
}
table.dataTable thead tr {
    background: var(--sidebar) !important;
}
table.dataTable thead th {
    background: var(--sidebar) !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 0.875rem 1rem !important;
}
table.dataTable tbody tr {
    background: var(--bg-deep) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background 0.1s !important;
}
/* Table row hover: purple-50 instead of grey — "this is clickable" in brand language */
table.dataTable tbody tr:hover {
    background: var(--accent-bg-soft) !important;
}
table.dataTable tbody td {
    color: var(--text-body) !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    border-top: none !important;
}
table.dataTable.no-footer { border-bottom: 1px solid var(--border) !important; }
.dt-container .dt-paging .dt-paging-button {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    transition: all 0.12s !important;
}
/* Current page: full 600 — you are on this page */
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
/* Pagination hover: 50 bg + 400 text — exploring, not committed */
.dt-container .dt-paging .dt-paging-button:hover:not(.current) {
    background: var(--accent-bg-soft) !important;
    border-color: var(--accent-border) !important;
    color: var(--accent-light) !important;
}

/* --- Prevent DataTables Flash of Unstyled Content --- */
table.display:not(.dataTable) { opacity: 0; }
.dt-container table.display { opacity: 1; transition: opacity 0.2s ease-in; }

/* --- Glass Table (admin pages) --- */
.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-deep);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}
.glass-table th {
    background: var(--sidebar);
    text-align: left;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.glass-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-body);
}
.glass-table tbody tr:last-child td { border-bottom: none; }
.glass-table tbody tr { transition: background 0.1s; }
/* glass-table row hover also uses purple-50 — consistent brand signal */
.glass-table tbody tr:hover { background: var(--accent-bg-soft); }

/* --- Search Input Utility --- */
.search-input {
    padding: 0.55rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
    max-width: 340px;
    appearance: none;
    -webkit-appearance: none;
}
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.search-input::placeholder { color: var(--text-muted); }

/* --- Dash Tabs Structure --- */
.dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}
.dash-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    z-index: 2;
}
.dash-tab {
    background: none; border: none; cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    color: var(--text-muted);
    transition: color 0.15s;
    display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.dash-tab:hover, .dash-tab.active {
    color: var(--text-main);
}
.dash-tab__count {
    background: var(--border); color: var(--text-body);
    font-size: 0.6875rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--radius);
    min-width: 18px; text-align: center; line-height: 1.4;
}

/* =======================================================
   Login Layout - Glow Background
   ======================================================= */
.login-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Rendering handled by WebGL canvas / Three.js via stimulus controller */
}

@keyframes loginBreathe { 
    0%   { opacity: 0.7; }
    100% { opacity: 1.0; }
}

/* --- Dialog Modals --- */
dialog::backdrop {
    background: rgba(0,0,0,0.3) !important;
}

/* --- Command Palette (⌘K Search) --- */
.cmd-palette {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 640px;
    width: calc(100% - 2rem);
    margin: 12vh auto auto;
    border-radius: var(--radius);
    overflow: visible;
}

.cmd-palette::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cmd-palette-inner {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(80vh - 12vh);
}

/* Search input row */
.cmd-palette-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.cmd-palette-input-row .material-symbols-rounded {
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
}

.cmd-palette-input::placeholder {
    color: var(--text-muted);
}

.cmd-palette-kbd {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 6px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Results area */
.cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(80vh - 12vh - 60px);
    padding: 0.5rem 0;
}

/* Category group */
.cmd-palette-group {
    padding: 0;
}

.cmd-palette-group + .cmd-palette-group {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.cmd-palette-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Individual result item */
.cmd-palette-item {
    display: block;
    padding: 0.5rem 1.25rem 0.5rem 2.75rem;
    text-decoration: none;
    color: var(--text-main);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.08s ease;
}

.cmd-palette-item:hover,
.cmd-palette-item.cmd-palette-active {
    background: var(--sidebar-hover);
}

.cmd-palette-item.cmd-palette-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
    margin: 0 0.5rem;
    padding-left: 2.25rem;
}

.cmd-palette-item-primary {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-secondary {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight matched text */
.cmd-palette-item mark {
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 0 1px;
}

/* Hint / empty / loading states */
.cmd-palette-hint,
.cmd-palette-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Loading spinner */
.cmd-palette-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: cmdSpin 0.6s linear infinite;
}

@keyframes cmdSpin {
    to { transform: rotate(360deg); }
}

/* Footer hint bar */
.cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.cmd-palette-footer kbd {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1px 5px;
    margin: 0 2px;
}

/* ─────────────────────────────────────────────
   What's New Modal
───────────────────────────────────────────── */
.whats-new-dialog {
    border: none;
    padding: 0;
    border-radius: calc(var(--radius) * 2);
    background: var(--bg-deep);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    max-width: 460px;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    animation: wnFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.whats-new-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: wnFadeIn 0.2s ease forwards;
}

@keyframes wnFadeUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wnFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.whats-new-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.whats-new-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.whats-new-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.whats-new-title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 0;
}

.whats-new-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    margin-top: 2px;
}

.whats-new-close:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.whats-new-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.whats-new-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
}

.whats-new-item:last-child {
    border-bottom: none;
}

.whats-new-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.whats-new-icon .material-symbols-rounded {
    font-size: 1.125rem;
    color: var(--accent);
}

.whats-new-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.whats-new-item-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.whats-new-item-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.whats-new-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* ── Checklist Component ── */
.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cl-counter-pill {
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.cl-counter-pill.is-complete {
    color: var(--success);
}

.cl-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s, opacity 0.2s;
}
.cl-step:last-child {
    border-bottom: none;
}
.cl-step:hover {
    background: var(--sidebar-hover);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}
.cl-step.is-done {
    opacity: 0.4;
}
.cl-step.is-done:hover {
    opacity: 0.55;
}

/* Custom Toggle */
.cl-step input[type="checkbox"] {
    display: none;
}
.cl-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
    background: var(--border);
    border-radius: var(--radius);
    transition: background 0.2s;
    cursor: pointer;
}
.cl-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--bg-deep);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.cl-step input:checked + .cl-toggle {
    background: var(--accent);
}
.cl-step input:checked + .cl-toggle::after {
    transform: translateX(14px);
    background: #fff;
}

.cl-text {
    flex: 1;
    min-width: 0;
}
.cl-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-main);
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.12s;
}
.cl-step.is-done .cl-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
a.cl-title:hover {
    color: var(--accent);
}
.cl-step.is-done a.cl-title {
    pointer-events: none;
}
.cl-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 1px;
}
.cl-step.is-done .cl-desc {
    text-decoration: line-through;
}
.cl-desc a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 600;
}
.cl-desc a:hover {
    text-decoration: underline;
}