/* ═══════════════════════════════════════════════════════════════════════════
   SCADA Solve Field Tracker — Design System
   Brand: Navy #1B3A6B · Cyan #4BA3D4 · Red #CF2E2E · Dark theme
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Brand */
  --ss-navy:#1B3A6B;--ss-navy-light:#24508F;--ss-cyan:#4BA3D4;--ss-cyan-glow:rgba(75,163,212,.25);
  --ss-red:#CF2E2E;--ss-red-glow:rgba(207,46,46,.2);
  --ss-gray:#808080;--ss-gray-light:#9E9E9E;--ss-gray-dim:rgba(128,128,128,.15);
  /* Surfaces */
  --bg:#080c18;--bg-deep:#050810;--panel:rgba(13,22,41,.85);--panel-light:rgba(18,30,56,.8);
  --card:rgba(23,37,68,.6);--card-hover:rgba(23,37,68,.8);
  --glass:rgba(255,255,255,.03);--glass-border:rgba(255,255,255,.06);
  /* Borders */
  --border:rgba(75,163,212,.12);--border-light:rgba(75,163,212,.06);
  /* Text */
  --white:#f0f2f8;--text:#d0d4e4;--text-sec:#8a94b8;--text-dim:#4a5478;
  /* Status */
  --success:#10b981;--success-dim:rgba(16,185,129,.1);
  --warn:#f59e0b;--warn-dim:rgba(245,158,11,.1);
  --danger:#ef4444;--danger-dim:rgba(239,68,68,.08);
  /* Layout */
  --radius:8px;--radius-lg:12px;--radius-xl:16px;
  --shadow:0 4px 24px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  --tr:.2s cubic-bezier(.4,0,.2,1)
}
/* ── Light Theme ── */
[data-theme="light"]{
  --bg:#f0f2f6;--bg-deep:#e4e7ed;--panel:rgba(255,255,255,.9);--panel-light:rgba(255,255,255,.95);
  --card:rgba(255,255,255,.7);--card-hover:rgba(255,255,255,.85);
  --glass:rgba(0,0,0,.02);--glass-border:rgba(0,0,0,.06);
  --border:rgba(27,58,107,.15);--border-light:rgba(27,58,107,.08);
  --white:#1a1a2e;--text:#2d3250;--text-sec:#5a6080;--text-dim:#8890a8;
  --shadow:0 2px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-lg:0 4px 24px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  --ss-cyan-glow:rgba(75,163,212,.15)
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .topbar{background:rgba(255,255,255,.88)}
[data-theme="light"] .nav-bar{background:rgba(255,255,255,.7)}
[data-theme="light"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(27,58,107,.06) 0%,transparent 60%)}
[data-theme="light"] .login-box{background:rgba(255,255,255,.92)}
[data-theme="light"] .nav-more-dropdown{background:rgba(255,255,255,.96)}
[data-theme="light"] .toast{background:rgba(255,255,255,.95)}
[data-theme="light"] .donut-center{background:rgba(255,255,255,.9)}
[data-theme="light"] .topbar-logo{background:linear-gradient(135deg,#e4e7ed,var(--ss-navy))}
[data-theme="light"] .login-logo-img{background:linear-gradient(135deg,#e4e7ed,var(--ss-navy))}
[data-theme="light"] input[type="date"]{color-scheme:light}
[data-theme="light"] .notif-item.unread{background:rgba(75,163,212,.06)}
[data-theme="light"] .stat-card{background:rgba(255,255,255,.6)}
[data-theme="light"] .card-header{color:var(--ss-navy)}

/* ── Midnight Pro Theme ── polished enterprise dark, indigo accents */
[data-theme="midnight"]{
  --ss-navy:#2d3561;--ss-navy-light:#3d4a8e;
  --ss-cyan:#7c8ff0;--ss-cyan-glow:rgba(124,143,240,.22);
  --ss-red:#e57373;--ss-red-glow:rgba(229,115,115,.18);
  --bg:#0d1018;--bg-deep:#070a12;
  --panel:rgba(20,25,40,.85);--panel-light:rgba(28,34,52,.82);
  --card:rgba(30,38,58,.55);--card-hover:rgba(35,44,68,.75);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.06);
  --border:rgba(124,143,240,.14);--border-light:rgba(124,143,240,.07);
  --white:#e8ebf5;--text:#c5cbe0;--text-sec:#8189a8;--text-dim:#525a78
}
[data-theme="midnight"] .topbar{background:rgba(13,16,24,.92)}
[data-theme="midnight"] .nav-bar{background:rgba(13,16,24,.6)}

/* ── Aurora Theme ── clean professional light, sage/teal accents */
[data-theme="aurora"]{
  --ss-navy:#3a5a7a;--ss-navy-light:#5077a0;
  --ss-cyan:#5ba89e;--ss-cyan-glow:rgba(91,168,158,.22);
  --ss-red:#c9695d;--ss-red-glow:rgba(201,105,93,.18);
  --bg:#f5f6f4;--bg-deep:#e8eae6;
  --panel:rgba(255,255,255,.92);--panel-light:rgba(255,255,255,.96);
  --card:rgba(255,255,255,.75);--card-hover:rgba(255,255,255,.9);
  --glass:rgba(0,0,0,.025);--glass-border:rgba(0,0,0,.05);
  --border:rgba(58,90,122,.12);--border-light:rgba(58,90,122,.06);
  --white:#1f2b35;--text:#374550;--text-sec:#5e6d7a;--text-dim:#8a96a3;
  --shadow:0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 4px 24px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05)
}
[data-theme="aurora"] body{background:var(--bg)}
[data-theme="aurora"] .topbar{background:rgba(255,255,255,.9)}
[data-theme="aurora"] .nav-bar{background:rgba(255,255,255,.72)}
[data-theme="aurora"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(91,168,158,.08) 0%,transparent 60%)}
[data-theme="aurora"] .login-box{background:rgba(255,255,255,.94)}
[data-theme="aurora"] .nav-more-dropdown{background:rgba(255,255,255,.96)}
[data-theme="aurora"] .toast{background:rgba(255,255,255,.95)}
[data-theme="aurora"] .donut-center{background:rgba(255,255,255,.9)}
[data-theme="aurora"] .topbar-logo{background:linear-gradient(135deg,#e8eae6,var(--ss-navy))}
[data-theme="aurora"] .login-logo-img{background:linear-gradient(135deg,#e8eae6,var(--ss-navy))}
[data-theme="aurora"] input[type="date"]{color-scheme:light}
[data-theme="aurora"] .notif-item.unread{background:rgba(91,168,158,.06)}
[data-theme="aurora"] .stat-card{background:rgba(255,255,255,.6)}
[data-theme="aurora"] .card-header{color:var(--ss-navy)}

/* ── Carbon Theme ── minimalist grayscale dark, single blue accent */
[data-theme="carbon"]{
  --ss-navy:#3a3a3e;--ss-navy-light:#4a4a50;
  --ss-cyan:#7eb6ff;--ss-cyan-glow:rgba(126,182,255,.18);
  --ss-red:#e0726b;--ss-red-glow:rgba(224,114,107,.16);
  --bg:#101012;--bg-deep:#0a0a0c;
  --panel:rgba(20,20,22,.88);--panel-light:rgba(28,28,32,.86);
  --card:rgba(28,28,32,.55);--card-hover:rgba(36,36,40,.7);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.08);--border-light:rgba(255,255,255,.04);
  --white:#f0f0f2;--text:#c8c8cc;--text-sec:#888890;--text-dim:#52525a
}
[data-theme="carbon"] .topbar{background:rgba(16,16,18,.92)}
[data-theme="carbon"] .nav-bar{background:rgba(16,16,18,.6)}

/* ── Cyber Neon Theme ── high-contrast techy, magenta + electric cyan */
[data-theme="cyber"]{
  --ss-navy:#5e1a8a;--ss-navy-light:#8a2dc4;
  --ss-cyan:#00d8e8;--ss-cyan-glow:rgba(0,216,232,.28);
  --ss-red:#ff4d97;--ss-red-glow:rgba(255,77,151,.22);
  --bg:#0a0414;--bg-deep:#04020a;
  --panel:rgba(18,8,32,.88);--panel-light:rgba(26,12,42,.85);
  --card:rgba(32,16,52,.55);--card-hover:rgba(42,20,68,.75);
  --glass:rgba(0,216,232,.025);--glass-border:rgba(0,216,232,.1);
  --border:rgba(0,216,232,.18);--border-light:rgba(0,216,232,.08);
  --white:#f0f5ff;--text:#cbd4ee;--text-sec:#8190b3;--text-dim:#525a78
}
[data-theme="cyber"] .topbar{background:rgba(10,4,20,.92)}
[data-theme="cyber"] .nav-bar{background:rgba(10,4,20,.6)}

/* ── Sand Theme ── warm professional light, terracotta/sand accents */
[data-theme="sand"]{
  --ss-navy:#7a4f3a;--ss-navy-light:#a06a4f;
  --ss-cyan:#c98b5d;--ss-cyan-glow:rgba(201,139,93,.22);
  --ss-red:#b8493c;--ss-red-glow:rgba(184,73,60,.18);
  --bg:#faf6f0;--bg-deep:#efe8dc;
  --panel:rgba(255,253,248,.92);--panel-light:rgba(255,253,248,.96);
  --card:rgba(255,253,248,.78);--card-hover:rgba(255,253,248,.92);
  --glass:rgba(122,79,58,.025);--glass-border:rgba(122,79,58,.06);
  --border:rgba(122,79,58,.14);--border-light:rgba(122,79,58,.07);
  --white:#2d1f15;--text:#43332a;--text-sec:#6a5448;--text-dim:#998777;
  --shadow:0 2px 12px rgba(122,79,58,.07),0 1px 3px rgba(122,79,58,.04);
  --shadow-lg:0 4px 24px rgba(122,79,58,.11),0 2px 8px rgba(122,79,58,.06)
}
[data-theme="sand"] body{background:var(--bg)}
[data-theme="sand"] .topbar{background:rgba(255,253,248,.9)}
[data-theme="sand"] .nav-bar{background:rgba(255,253,248,.72)}
[data-theme="sand"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(201,139,93,.08) 0%,transparent 60%)}
[data-theme="sand"] .login-box{background:rgba(255,253,248,.94)}
[data-theme="sand"] .nav-more-dropdown{background:rgba(255,253,248,.96)}
[data-theme="sand"] .toast{background:rgba(255,253,248,.95)}
[data-theme="sand"] .donut-center{background:rgba(255,253,248,.9)}
[data-theme="sand"] .topbar-logo{background:linear-gradient(135deg,#efe8dc,var(--ss-navy))}
[data-theme="sand"] .login-logo-img{background:linear-gradient(135deg,#efe8dc,var(--ss-navy))}
[data-theme="sand"] input[type="date"]{color-scheme:light}
[data-theme="sand"] .notif-item.unread{background:rgba(201,139,93,.06)}
[data-theme="sand"] .stat-card{background:rgba(255,253,248,.6)}
[data-theme="sand"] .card-header{color:var(--ss-navy)}

/* ── Forest Theme ── deep green dark, calm and natural */
[data-theme="forest"]{
  --ss-navy:#1f3a2e;--ss-navy-light:#2d5847;
  --ss-cyan:#5fbf8c;--ss-cyan-glow:rgba(95,191,140,.22);
  --ss-red:#d4734f;--ss-red-glow:rgba(212,115,79,.18);
  --bg:#0a140e;--bg-deep:#050a07;
  --panel:rgba(15,28,20,.85);--panel-light:rgba(20,38,28,.82);
  --card:rgba(22,42,30,.55);--card-hover:rgba(28,52,38,.75);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.05);
  --border:rgba(95,191,140,.14);--border-light:rgba(95,191,140,.07);
  --white:#e8f0eb;--text:#c5d2ca;--text-sec:#7a9087;--text-dim:#4a5a52
}
[data-theme="forest"] .topbar{background:rgba(10,20,14,.92)}
[data-theme="forest"] .nav-bar{background:rgba(10,20,14,.6)}

/* ── Ocean Theme ── deep teal dark, cool and calming */
[data-theme="ocean"]{
  --ss-navy:#0e3a4a;--ss-navy-light:#155670;
  --ss-cyan:#3fb8c4;--ss-cyan-glow:rgba(63,184,196,.22);
  --ss-red:#e08c5f;--ss-red-glow:rgba(224,140,95,.18);
  --bg:#06141c;--bg-deep:#020b12;
  --panel:rgba(10,28,40,.85);--panel-light:rgba(15,38,52,.82);
  --card:rgba(18,42,58,.55);--card-hover:rgba(24,52,72,.75);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.05);
  --border:rgba(63,184,196,.14);--border-light:rgba(63,184,196,.07);
  --white:#e8f0f2;--text:#c2d2d8;--text-sec:#7a929a;--text-dim:#4a5a62
}
[data-theme="ocean"] .topbar{background:rgba(6,20,28,.92)}
[data-theme="ocean"] .nav-bar{background:rgba(6,20,28,.6)}

/* ── Slate Theme ── medium blue-gray dark, neutral */
[data-theme="slate"]{
  --ss-navy:#3a4859;--ss-navy-light:#4f6275;
  --ss-cyan:#8aa5c4;--ss-cyan-glow:rgba(138,165,196,.2);
  --ss-red:#c47878;--ss-red-glow:rgba(196,120,120,.18);
  --bg:#161b21;--bg-deep:#0f1318;
  --panel:rgba(28,36,46,.85);--panel-light:rgba(38,48,60,.82);
  --card:rgba(36,46,58,.55);--card-hover:rgba(44,56,70,.75);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.05);
  --border:rgba(138,165,196,.14);--border-light:rgba(138,165,196,.07);
  --white:#eef2f7;--text:#cad2dc;--text-sec:#8d97a8;--text-dim:#576070
}
[data-theme="slate"] .topbar{background:rgba(22,27,33,.92)}
[data-theme="slate"] .nav-bar{background:rgba(22,27,33,.6)}

/* ── Mocha Theme ── warm browns dark, cozy and rich */
[data-theme="mocha"]{
  --ss-navy:#3d2a1f;--ss-navy-light:#5a3d2c;
  --ss-cyan:#c4a07a;--ss-cyan-glow:rgba(196,160,122,.22);
  --ss-red:#c46a55;--ss-red-glow:rgba(196,106,85,.18);
  --bg:#1a1410;--bg-deep:#100b08;
  --panel:rgba(32,24,18,.85);--panel-light:rgba(42,32,24,.82);
  --card:rgba(46,36,28,.55);--card-hover:rgba(56,44,34,.75);
  --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.05);
  --border:rgba(196,160,122,.14);--border-light:rgba(196,160,122,.07);
  --white:#f5ede0;--text:#d8cab5;--text-sec:#998975;--text-dim:#615648
}
[data-theme="mocha"] .topbar{background:rgba(26,20,16,.92)}
[data-theme="mocha"] .nav-bar{background:rgba(26,20,16,.6)}

/* ── Onyx Theme ── pure black, white accents, very high contrast */
[data-theme="onyx"]{
  --ss-navy:#1f1f1f;--ss-navy-light:#2f2f2f;
  --ss-cyan:#dcdcdc;--ss-cyan-glow:rgba(220,220,220,.18);
  --ss-red:#e8806a;--ss-red-glow:rgba(232,128,106,.18);
  --bg:#000000;--bg-deep:#000000;
  --panel:rgba(14,14,14,.92);--panel-light:rgba(22,22,22,.88);
  --card:rgba(22,22,22,.62);--card-hover:rgba(32,32,32,.78);
  --glass:rgba(255,255,255,.03);--glass-border:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1);--border-light:rgba(255,255,255,.05);
  --white:#ffffff;--text:#dcdcdc;--text-sec:#909090;--text-dim:#5a5a5a
}
[data-theme="onyx"] .topbar{background:rgba(0,0,0,.95)}
[data-theme="onyx"] .nav-bar{background:rgba(0,0,0,.7)}

/* ── Ice Theme ── icy light blue, cool and minimal */
[data-theme="ice"]{
  --ss-navy:#3a6090;--ss-navy-light:#5080b8;
  --ss-cyan:#5fa8d4;--ss-cyan-glow:rgba(95,168,212,.2);
  --ss-red:#c9695d;--ss-red-glow:rgba(201,105,93,.18);
  --bg:#f0f5fa;--bg-deep:#e2eaf2;
  --panel:rgba(252,254,255,.92);--panel-light:rgba(252,254,255,.96);
  --card:rgba(252,254,255,.78);--card-hover:rgba(252,254,255,.92);
  --glass:rgba(58,96,144,.025);--glass-border:rgba(58,96,144,.05);
  --border:rgba(58,96,144,.12);--border-light:rgba(58,96,144,.06);
  --white:#1a2638;--text:#324154;--text-sec:#5a6a82;--text-dim:#8a98ad;
  --shadow:0 2px 12px rgba(58,96,144,.07),0 1px 3px rgba(58,96,144,.04);
  --shadow-lg:0 4px 24px rgba(58,96,144,.11),0 2px 8px rgba(58,96,144,.06)
}
[data-theme="ice"] body{background:var(--bg)}
[data-theme="ice"] .topbar{background:rgba(252,254,255,.9)}
[data-theme="ice"] .nav-bar{background:rgba(252,254,255,.72)}
[data-theme="ice"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(95,168,212,.08) 0%,transparent 60%)}
[data-theme="ice"] .login-box{background:rgba(252,254,255,.94)}
[data-theme="ice"] .nav-more-dropdown{background:rgba(252,254,255,.96)}
[data-theme="ice"] .toast{background:rgba(252,254,255,.95)}
[data-theme="ice"] .donut-center{background:rgba(252,254,255,.9)}
[data-theme="ice"] .topbar-logo{background:linear-gradient(135deg,#e2eaf2,var(--ss-navy))}
[data-theme="ice"] .login-logo-img{background:linear-gradient(135deg,#e2eaf2,var(--ss-navy))}
[data-theme="ice"] input[type="date"]{color-scheme:light}
[data-theme="ice"] .notif-item.unread{background:rgba(95,168,212,.06)}
[data-theme="ice"] .stat-card{background:rgba(252,254,255,.6)}
[data-theme="ice"] .card-header{color:var(--ss-navy)}

/* ── Lavender Theme ── soft purple light, calming */
[data-theme="lavender"]{
  --ss-navy:#5a4a7a;--ss-navy-light:#7060a0;
  --ss-cyan:#9b87c4;--ss-cyan-glow:rgba(155,135,196,.2);
  --ss-red:#c97090;--ss-red-glow:rgba(201,112,144,.18);
  --bg:#f7f5fa;--bg-deep:#ebe7f2;
  --panel:rgba(254,253,255,.92);--panel-light:rgba(254,253,255,.96);
  --card:rgba(254,253,255,.78);--card-hover:rgba(254,253,255,.92);
  --glass:rgba(90,74,122,.025);--glass-border:rgba(90,74,122,.06);
  --border:rgba(90,74,122,.12);--border-light:rgba(90,74,122,.06);
  --white:#1f1a2d;--text:#3a3148;--text-sec:#665a78;--text-dim:#988aab;
  --shadow:0 2px 12px rgba(90,74,122,.07),0 1px 3px rgba(90,74,122,.04);
  --shadow-lg:0 4px 24px rgba(90,74,122,.11),0 2px 8px rgba(90,74,122,.06)
}
[data-theme="lavender"] body{background:var(--bg)}
[data-theme="lavender"] .topbar{background:rgba(254,253,255,.9)}
[data-theme="lavender"] .nav-bar{background:rgba(254,253,255,.72)}
[data-theme="lavender"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(155,135,196,.08) 0%,transparent 60%)}
[data-theme="lavender"] .login-box{background:rgba(254,253,255,.94)}
[data-theme="lavender"] .nav-more-dropdown{background:rgba(254,253,255,.96)}
[data-theme="lavender"] .toast{background:rgba(254,253,255,.95)}
[data-theme="lavender"] .donut-center{background:rgba(254,253,255,.9)}
[data-theme="lavender"] .topbar-logo{background:linear-gradient(135deg,#ebe7f2,var(--ss-navy))}
[data-theme="lavender"] .login-logo-img{background:linear-gradient(135deg,#ebe7f2,var(--ss-navy))}
[data-theme="lavender"] input[type="date"]{color-scheme:light}
[data-theme="lavender"] .notif-item.unread{background:rgba(155,135,196,.06)}
[data-theme="lavender"] .stat-card{background:rgba(254,253,255,.6)}
[data-theme="lavender"] .card-header{color:var(--ss-navy)}

/* ── Paper Theme ── warm off-white light, classic and readable */
[data-theme="paper"]{
  --ss-navy:#3d3527;--ss-navy-light:#5a4f3a;
  --ss-cyan:#a08560;--ss-cyan-glow:rgba(160,133,96,.2);
  --ss-red:#b04848;--ss-red-glow:rgba(176,72,72,.18);
  --bg:#faf7f0;--bg-deep:#efeae0;
  --panel:rgba(253,251,245,.94);--panel-light:rgba(253,251,245,.97);
  --card:rgba(253,251,245,.8);--card-hover:rgba(253,251,245,.94);
  --glass:rgba(61,53,39,.022);--glass-border:rgba(61,53,39,.06);
  --border:rgba(61,53,39,.12);--border-light:rgba(61,53,39,.06);
  --white:#1c1813;--text:#2d2820;--text-sec:#5a5346;--text-dim:#8a8270;
  --shadow:0 2px 12px rgba(61,53,39,.07),0 1px 3px rgba(61,53,39,.04);
  --shadow-lg:0 4px 24px rgba(61,53,39,.11),0 2px 8px rgba(61,53,39,.06)
}
[data-theme="paper"] body{background:var(--bg)}
[data-theme="paper"] .topbar{background:rgba(253,251,245,.92)}
[data-theme="paper"] .nav-bar{background:rgba(253,251,245,.74)}
[data-theme="paper"] .login-screen{background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(160,133,96,.08) 0%,transparent 60%)}
[data-theme="paper"] .login-box{background:rgba(253,251,245,.96)}
[data-theme="paper"] .nav-more-dropdown{background:rgba(253,251,245,.97)}
[data-theme="paper"] .toast{background:rgba(253,251,245,.96)}
[data-theme="paper"] .donut-center{background:rgba(253,251,245,.92)}
[data-theme="paper"] .topbar-logo{background:linear-gradient(135deg,#efeae0,var(--ss-navy))}
[data-theme="paper"] .login-logo-img{background:linear-gradient(135deg,#efeae0,var(--ss-navy))}
[data-theme="paper"] input[type="date"]{color-scheme:light}
[data-theme="paper"] .notif-item.unread{background:rgba(160,133,96,.06)}
[data-theme="paper"] .stat-card{background:rgba(253,251,245,.62)}
[data-theme="paper"] .card-header{color:var(--ss-navy)}

/* ═══════════════════════════════════════════════════════════════════════════
   CURATED STYLES — quieter, designed-with-intent variants. Each pulls the
   palette + typography + spacing in a coherent direction; pick one in the
   Account view (Display & Accessibility) to apply.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Refined Cyan (dark) — current direction, pulled back ────────────────
   Same dark + cyan, but desaturated accent, softer shadows, fewer glows.
   Default for users who want the existing look without the AI-generated
   neon-y feel. */
[data-theme="refined"]{
  --ss-cyan:#5fa3c2;--ss-cyan-glow:rgba(95,163,194,.12);
  --bg:#0a1020;--bg-deep:#070c18;--panel:rgba(16,24,42,.85);--panel-light:rgba(22,32,56,.8);
  --card:rgba(24,36,62,.55);--card-hover:rgba(24,36,62,.72);
  --border:rgba(95,163,194,.10);--border-light:rgba(95,163,194,.05);
  --white:#e6e9f1;--text:#c6cad9;--text-sec:#828ba8;--text-dim:#4d5673;
  --shadow:0 2px 12px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.18);
  --shadow-lg:0 6px 24px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22)
}
[data-theme="refined"] body{background:var(--bg)}
[data-theme="refined"] .topbar{background:rgba(10,16,32,.88)}
[data-theme="refined"] .nav-bar{background:rgba(10,16,32,.58)}

/* ── Linear (dark) — Linear.app inspired ─────────────────────────────────
   Near-monochrome surfaces, single purple-blue accent, Inter at slightly
   tighter tracking. No glow shadows, hairline borders. */
[data-theme="linear"]{
  --ss-cyan:#7b8cef;--ss-cyan-glow:rgba(123,140,239,.10);
  --ss-navy:#5e6ad2;--ss-navy-light:#7280e8;
  --bg:#0d0e10;--bg-deep:#08090b;--panel:rgba(20,21,24,.92);--panel-light:rgba(26,28,32,.92);
  --card:rgba(26,28,32,.6);--card-hover:rgba(34,36,42,.72);
  --glass:rgba(255,255,255,.02);--glass-border:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.06);--border-light:rgba(255,255,255,.03);
  --white:#f7f8f8;--text:#c7c8cb;--text-sec:#8b8c92;--text-dim:#5b5d65;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,.5);
  --radius:6px;--radius-lg:8px;--radius-xl:10px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  letter-spacing:-.011em
}
[data-theme="linear"] body{background:var(--bg);font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
[data-theme="linear"] .topbar{background:rgba(13,14,16,.94)}
[data-theme="linear"] .nav-bar{background:rgba(13,14,16,.7)}
[data-theme="linear"] .nav-tab.active{color:#7b8cef;border-color:#7b8cef}
[data-theme="linear"] .nav-more-dropdown{background:rgba(20,21,24,.98)}
[data-theme="linear"] .card-header{font-weight:600;letter-spacing:-.005em}
[data-theme="linear"] .btn-primary{background:#5e6ad2}
[data-theme="linear"] .btn-primary:hover{background:#7280e8}

/* ── Notion (light) — warm neutrals, lots of breathing room ─────────────
   Off-white surfaces (#fbfaf9), warm dark text (#37352f), simple borders
   no shadows. Generous padding. */
[data-theme="notion"]{
  --ss-cyan:#2eaadc;--ss-cyan-glow:rgba(46,170,220,.10);
  --ss-navy:#37352f;--ss-navy-light:#787773;
  --bg:#ffffff;--bg-deep:#f7f6f3;--panel:#ffffff;--panel-light:#fbfaf9;
  --card:#ffffff;--card-hover:#f7f6f3;
  --glass:rgba(55,53,47,.02);--glass-border:rgba(55,53,47,.09);
  --border:rgba(55,53,47,.09);--border-light:rgba(55,53,47,.045);
  --white:#37352f;--text:#37352f;--text-sec:#787773;--text-dim:#9b9a97;
  --shadow:0 1px 2px rgba(15,15,15,.06);
  --shadow-lg:0 4px 12px rgba(15,15,15,.1);
  --radius:4px;--radius-lg:6px;--radius-xl:8px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif
}
[data-theme="notion"] body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif}
[data-theme="notion"] .topbar{background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}
[data-theme="notion"] .nav-bar{background:rgba(251,250,249,.96);backdrop-filter:none}
[data-theme="notion"] .nav-tab{color:var(--text-sec);font-weight:500}
[data-theme="notion"] .nav-tab.active{color:var(--white);border-color:var(--white)}
[data-theme="notion"] .nav-more-dropdown{background:#ffffff;border:1px solid var(--border)}
[data-theme="notion"] .card{border:1px solid var(--border);box-shadow:none}
[data-theme="notion"] .login-screen{background:var(--bg-deep)}
[data-theme="notion"] .login-box{background:#ffffff;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
[data-theme="notion"] .login-logo-img{background:linear-gradient(135deg,#f0eeea,#37352f)}
[data-theme="notion"] .topbar-logo{background:linear-gradient(135deg,#f0eeea,#37352f)}
[data-theme="notion"] input[type="date"]{color-scheme:light}

/* ── iOS Native (light) — Apple HIG ──────────────────────────────────────
   SF Pro, generous spacing, soft surfaces with translucency, system blue
   accent, iOS-style heavier rounding. */
[data-theme="iosNative"]{
  --ss-cyan:#007aff;--ss-cyan-glow:rgba(0,122,255,.14);
  --ss-navy:#1d1d1f;--ss-navy-light:#3a3a3c;
  --bg:#f2f2f7;--bg-deep:#e5e5ea;--panel:rgba(255,255,255,.86);--panel-light:rgba(255,255,255,.92);
  --card:rgba(255,255,255,.78);--card-hover:rgba(255,255,255,.92);
  --glass:rgba(120,120,128,.06);--glass-border:rgba(120,120,128,.12);
  --border:rgba(60,60,67,.18);--border-light:rgba(60,60,67,.09);
  --white:#1d1d1f;--text:#1d1d1f;--text-sec:#3c3c4399;--text-dim:#8e8e93;
  --shadow:0 1px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --radius:10px;--radius-lg:14px;--radius-xl:18px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter',system-ui,sans-serif
}
[data-theme="iosNative"] body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter',system-ui,sans-serif}
[data-theme="iosNative"] .topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-light)}
[data-theme="iosNative"] .nav-bar{background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-light)}
[data-theme="iosNative"] .nav-tab.active{color:#007aff;border-color:#007aff}
[data-theme="iosNative"] .nav-more-dropdown{background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border-light);box-shadow:var(--shadow-lg)}
[data-theme="iosNative"] .card{background:#ffffff;border:1px solid var(--border-light);box-shadow:var(--shadow)}
[data-theme="iosNative"] .login-screen{background:linear-gradient(180deg,#f2f2f7 0%,#e5e5ea 100%)}
[data-theme="iosNative"] .login-box{background:rgba(255,255,255,.92);border:1px solid var(--border-light);backdrop-filter:blur(20px) saturate(180%)}
[data-theme="iosNative"] .login-logo-img{background:linear-gradient(135deg,#f2f2f7,#1d1d1f)}
[data-theme="iosNative"] .topbar-logo{background:linear-gradient(135deg,#f2f2f7,#1d1d1f)}
[data-theme="iosNative"] .btn-primary{background:#007aff;border-radius:10px;font-weight:600}
[data-theme="iosNative"] .btn-primary:hover{background:#0a84ff}
[data-theme="iosNative"] input[type="date"]{color-scheme:light}

/* ═══════════════════════════════════════════════════════════════════════════
   ART-INSPIRED VARIANTS
   Each theme below pulls a recognizable palette so picking one feels
   like an aesthetic decision, not a tonal tweak. Strong primaries,
   custom accents, distinctive surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mondrian (light) — De Stijl: white grid + primary block colors ──
   Crisp white surfaces, thin black borders, three primary accents
   (red / yellow / blue) rotated through the UI. Composition-with-color
   energy. */
[data-theme="mondrian"]{
  --ss-cyan:#1f47a3;--ss-cyan-glow:rgba(31,71,163,.18);
  --ss-navy:#0a0a0a;--ss-navy-light:#2a2a2a;
  --ss-red:#d4382c;--ss-red-glow:rgba(212,56,44,.18);
  --bg:#ffffff;--bg-deep:#fafafa;--panel:#ffffff;--panel-light:#fbfbfb;
  --card:#ffffff;--card-hover:#fafafa;
  --glass:rgba(0,0,0,.02);--glass-border:rgba(0,0,0,.12);
  --border:#0a0a0a;--border-light:rgba(10,10,10,.18);
  --white:#0a0a0a;--text:#0a0a0a;--text-sec:#3a3a3a;--text-dim:#7a7a7a;
  --shadow:0 0 0 1px rgba(0,0,0,.04);
  --shadow-lg:0 4px 0 #0a0a0a,0 0 0 2px #0a0a0a;
  --radius:0px;--radius-lg:0px;--radius-xl:2px;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif
}
[data-theme="mondrian"] body{background:var(--bg)}
[data-theme="mondrian"] .topbar{background:#ffffff;border-bottom:2px solid #0a0a0a}
[data-theme="mondrian"] .nav-bar{background:#ffffff;border-bottom:2px solid #0a0a0a;backdrop-filter:none}
[data-theme="mondrian"] .nav-tab.active{color:#0a0a0a;border-bottom:3px solid #d4382c}
[data-theme="mondrian"] .card{border:2px solid #0a0a0a;background:#ffffff;box-shadow:none}
[data-theme="mondrian"] .card-header{color:#0a0a0a;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #0a0a0a;padding-bottom:8px;margin-bottom:8px}
[data-theme="mondrian"] .btn-primary{background:#d4382c;border-color:#0a0a0a;color:#ffffff}
[data-theme="mondrian"] .btn-primary:hover{background:#b82d22}
[data-theme="mondrian"] .stat-card{border:2px solid #0a0a0a;background:#ffffff}
/* Rotate the primaries across the stat-card accent — nth-child(3n+1)
   gets blue, (3n+2) yellow, (3n+3) red. */
[data-theme="mondrian"] .stat-grid > *:nth-child(3n+1){border-top:6px solid #1f47a3}
[data-theme="mondrian"] .stat-grid > *:nth-child(3n+2){border-top:6px solid #f9d342}
[data-theme="mondrian"] .stat-grid > *:nth-child(3n+3){border-top:6px solid #d4382c}
[data-theme="mondrian"] input[type="date"]{color-scheme:light}

/* ── Sunset (light) — warm peach + coral, late-afternoon palette ─── */
[data-theme="sunset"]{
  --ss-cyan:#ff6f61;--ss-cyan-glow:rgba(255,111,97,.22);
  --ss-navy:#7a2e2e;--ss-navy-light:#a04545;
  --ss-red:#c0392b;--ss-red-glow:rgba(192,57,43,.18);
  --bg:#fff4e6;--bg-deep:#ffe4c4;--panel:rgba(255,250,240,.92);--panel-light:rgba(255,250,240,.96);
  --card:rgba(255,250,240,.85);--card-hover:rgba(255,250,240,.96);
  --glass:rgba(122,46,46,.04);--glass-border:rgba(122,46,46,.12);
  --border:rgba(122,46,46,.18);--border-light:rgba(122,46,46,.10);
  --white:#3d1f1f;--text:#4d2424;--text-sec:#7a4444;--text-dim:#a96c6c;
  --shadow:0 2px 10px rgba(192,57,43,.10),0 1px 3px rgba(122,46,46,.08);
  --shadow-lg:0 8px 28px rgba(192,57,43,.18),0 2px 8px rgba(122,46,46,.10)
}
[data-theme="sunset"] body{background:linear-gradient(180deg,#fff4e6 0%,#ffe4c4 100%);background-attachment:fixed}
[data-theme="sunset"] .topbar{background:rgba(255,244,230,.92)}
[data-theme="sunset"] .nav-bar{background:rgba(255,244,230,.78)}
[data-theme="sunset"] .nav-tab.active{color:#c0392b;border-color:#ff6f61}
[data-theme="sunset"] .login-screen{background:linear-gradient(180deg,#fff4e6 0%,#ffd5a8 50%,#ff9966 100%)}
[data-theme="sunset"] .card{background:rgba(255,250,240,.85);border-color:rgba(192,57,43,.15)}
[data-theme="sunset"] .btn-primary{background:#ff6f61;border-color:#ff6f61;color:#ffffff}
[data-theme="sunset"] .btn-primary:hover{background:#e85a4d}
[data-theme="sunset"] .login-logo-img{background:linear-gradient(135deg,#ffd5a8,#7a2e2e)}
[data-theme="sunset"] .topbar-logo{background:linear-gradient(135deg,#ffd5a8,#7a2e2e)}
[data-theme="sunset"] input[type="date"]{color-scheme:light}

/* ── Vaporwave (dark) — synthwave magenta + cyan on deep violet ──── */
[data-theme="vaporwave"]{
  --ss-cyan:#01cdfe;--ss-cyan-glow:rgba(1,205,254,.32);
  --ss-navy:#ff71ce;--ss-navy-light:#ff8edb;
  --ss-red:#ff2e88;--ss-red-glow:rgba(255,46,136,.28);
  --bg:#0d0023;--bg-deep:#080018;--panel:rgba(20,8,46,.85);--panel-light:rgba(28,12,60,.85);
  --card:rgba(36,16,72,.6);--card-hover:rgba(48,22,92,.78);
  --glass:rgba(255,113,206,.06);--glass-border:rgba(255,113,206,.18);
  --border:rgba(1,205,254,.22);--border-light:rgba(1,205,254,.10);
  --white:#fff5ff;--text:#e8d9f0;--text-sec:#a48bc6;--text-dim:#7560a0;
  --success:#05ffa1;--warn:#fffb96;--danger:#ff71ce;
  --shadow:0 0 18px rgba(255,113,206,.16),0 0 6px rgba(1,205,254,.12);
  --shadow-lg:0 0 40px rgba(255,113,206,.26),0 0 12px rgba(1,205,254,.18)
}
[data-theme="vaporwave"] body{background:radial-gradient(ellipse at 50% 100%,rgba(255,113,206,.10) 0%,transparent 50%),linear-gradient(180deg,#0d0023 0%,#1a0040 100%);background-attachment:fixed}
[data-theme="vaporwave"] .topbar{background:rgba(13,0,35,.92);border-bottom:1px solid rgba(255,113,206,.30)}
[data-theme="vaporwave"] .nav-bar{background:rgba(13,0,35,.78);border-bottom:1px solid rgba(1,205,254,.18)}
[data-theme="vaporwave"] .nav-tab.active{color:#01cdfe;border-color:#01cdfe;text-shadow:0 0 8px rgba(1,205,254,.6)}
[data-theme="vaporwave"] .login-screen{background:linear-gradient(180deg,#0d0023 0%,#3a0066 60%,#ff71ce 100%)}
[data-theme="vaporwave"] .card{background:rgba(36,16,72,.65);border-color:rgba(1,205,254,.22);box-shadow:0 0 14px rgba(255,113,206,.10)}
[data-theme="vaporwave"] .card-header{color:#ff71ce;text-shadow:0 0 8px rgba(255,113,206,.4)}
[data-theme="vaporwave"] .btn-primary{background:linear-gradient(135deg,#ff71ce,#01cdfe);border:none;color:#0d0023;font-weight:700;box-shadow:0 0 18px rgba(255,113,206,.28)}
[data-theme="vaporwave"] .btn-primary:hover{box-shadow:0 0 28px rgba(255,113,206,.5)}
[data-theme="vaporwave"] .login-logo-img{background:linear-gradient(135deg,#ff71ce,#01cdfe)}
[data-theme="vaporwave"] .topbar-logo{background:linear-gradient(135deg,#ff71ce,#01cdfe)}
[data-theme="vaporwave"] .stat-card{background:rgba(36,16,72,.5);border-color:rgba(255,113,206,.18)}
[data-theme="vaporwave"] .stat-num{background:linear-gradient(135deg,#ff71ce,#01cdfe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Inkwell (dark) — pure black + electric blue, high-contrast ──── */
[data-theme="inkwell"]{
  --ss-cyan:#00d4ff;--ss-cyan-glow:rgba(0,212,255,.28);
  --ss-navy:#1a1a1a;--ss-navy-light:#2a2a2a;
  --bg:#000000;--bg-deep:#040404;--panel:rgba(8,8,8,.96);--panel-light:rgba(14,14,14,.96);
  --card:rgba(12,12,12,.85);--card-hover:rgba(20,20,20,.92);
  --glass:rgba(255,255,255,.02);--glass-border:rgba(0,212,255,.20);
  --border:rgba(0,212,255,.18);--border-light:rgba(255,255,255,.06);
  --white:#ffffff;--text:#e8e8e8;--text-sec:#a8a8a8;--text-dim:#666666;
  --shadow:0 0 0 1px rgba(0,212,255,.06);
  --shadow-lg:0 0 28px rgba(0,212,255,.16),0 0 0 1px rgba(0,212,255,.18);
  --radius:2px;--radius-lg:3px;--radius-xl:4px
}
[data-theme="inkwell"] body{background:var(--bg)}
[data-theme="inkwell"] .topbar{background:rgba(0,0,0,.96);border-bottom:1px solid rgba(0,212,255,.22)}
[data-theme="inkwell"] .nav-bar{background:rgba(0,0,0,.78);border-bottom:1px solid rgba(0,212,255,.12);backdrop-filter:none}
[data-theme="inkwell"] .nav-tab{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
[data-theme="inkwell"] .nav-tab.active{color:#00d4ff;border-color:#00d4ff}
[data-theme="inkwell"] .login-screen{background:#000000;background-image:radial-gradient(ellipse at 50% 0%,rgba(0,212,255,.10) 0%,transparent 60%)}
[data-theme="inkwell"] .card{background:rgba(8,8,8,.95);border:1px solid rgba(0,212,255,.18)}
[data-theme="inkwell"] .card-header{color:#00d4ff;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.10em;font-size:12px;font-weight:700}
[data-theme="inkwell"] .btn-primary{background:#00d4ff;border-color:#00d4ff;color:#000000;font-weight:800;letter-spacing:.04em}
[data-theme="inkwell"] .btn-primary:hover{background:#33ddff}
[data-theme="inkwell"] .login-logo-img{background:#000000;border:2px solid #00d4ff}
[data-theme="inkwell"] .topbar-logo{background:#000000;border:1px solid rgba(0,212,255,.4)}
[data-theme="inkwell"] .stat-card{background:rgba(8,8,8,.95);border:1px solid rgba(0,212,255,.18)}
[data-theme="inkwell"] .stat-num{color:#00d4ff;font-family:'JetBrains Mono',monospace;letter-spacing:-.03em}

/* ── Tokyo Night (dark) — popular dev terminal: deep blue + violet ─────
   Soft contrast, easy on the eyes for long work sessions. Palette
   pulled from the Tokyo Night VS Code theme. */
[data-theme="tokyoNight"]{
  --ss-cyan:#7aa2f7;--ss-cyan-glow:rgba(122,162,247,.20);
  --ss-navy:#3b4261;--ss-navy-light:#565f89;
  --bg:#1a1b26;--bg-deep:#16161e;--panel:rgba(36,40,59,.88);--panel-light:rgba(40,44,66,.92);
  --card:rgba(36,40,59,.62);--card-hover:rgba(48,52,76,.78);
  --border:rgba(122,162,247,.14);--border-light:rgba(122,162,247,.07);
  --white:#c0caf5;--text:#a9b1d6;--text-sec:#7e85a3;--text-dim:#565f89;
  --shadow:0 2px 12px rgba(0,0,0,.32);
  --shadow-lg:0 8px 28px rgba(0,0,0,.5);
  --success:#9ece6a;--warn:#e0af68;--danger:#f7768e
}
[data-theme="tokyoNight"] body{background:var(--bg)}
[data-theme="tokyoNight"] .topbar{background:rgba(22,22,30,.94)}
[data-theme="tokyoNight"] .nav-bar{background:rgba(22,22,30,.7)}
[data-theme="tokyoNight"] .nav-tab.active{color:#bb9af7;border-color:#bb9af7}
[data-theme="tokyoNight"] .login-logo-img{background:linear-gradient(135deg,#1a1b26,#7aa2f7)}
[data-theme="tokyoNight"] .btn-primary{background:#7aa2f7;color:#1a1b26;border-color:#7aa2f7}
[data-theme="tokyoNight"] .btn-primary:hover{background:#bb9af7}

/* ── Dracula (dark) — beloved dev palette: violet + pink + green ──────
   High-saturation accents on a slightly purple-tinted dark. Bold and
   playful without sacrificing legibility. */
[data-theme="dracula"]{
  --ss-cyan:#bd93f9;--ss-cyan-glow:rgba(189,147,249,.24);
  --ss-navy:#44475a;--ss-navy-light:#6272a4;
  --bg:#282a36;--bg-deep:#21222c;--panel:rgba(68,71,90,.88);--panel-light:rgba(80,84,105,.9);
  --card:rgba(68,71,90,.55);--card-hover:rgba(80,84,105,.7);
  --border:rgba(189,147,249,.18);--border-light:rgba(189,147,249,.10);
  --white:#f8f8f2;--text:#e0e0d9;--text-sec:#a8a99d;--text-dim:#6272a4;
  --success:#50fa7b;--warn:#ffb86c;--danger:#ff5555
}
[data-theme="dracula"] body{background:var(--bg)}
[data-theme="dracula"] .topbar{background:rgba(40,42,54,.94)}
[data-theme="dracula"] .nav-bar{background:rgba(33,34,44,.7)}
[data-theme="dracula"] .nav-tab.active{color:#ff79c6;border-color:#ff79c6}
[data-theme="dracula"] .login-logo-img{background:linear-gradient(135deg,#282a36,#bd93f9);box-shadow:0 0 26px rgba(255,121,198,.32)}
[data-theme="dracula"] .topbar-logo{background:linear-gradient(135deg,#282a36,#bd93f9)}
[data-theme="dracula"] .btn-primary{background:#ff79c6;color:#282a36;border-color:#ff79c6;font-weight:700}
[data-theme="dracula"] .btn-primary:hover{background:#ff92d0}
[data-theme="dracula"] .stat-num{color:#50fa7b}

/* ── Nord (dark) — frosty arctic palette ──────────────────────────────
   Cool grays + frost blue. Calmer than Dracula, more distinctive than
   our default cyan. From the Nord theme: nordtheme.com */
[data-theme="nord"]{
  --ss-cyan:#88c0d0;--ss-cyan-glow:rgba(136,192,208,.20);
  --ss-navy:#5e81ac;--ss-navy-light:#81a1c1;
  --bg:#2e3440;--bg-deep:#262b35;--panel:rgba(59,66,82,.88);--panel-light:rgba(67,76,94,.92);
  --card:rgba(59,66,82,.6);--card-hover:rgba(76,86,106,.7);
  --border:rgba(136,192,208,.18);--border-light:rgba(136,192,208,.10);
  --white:#eceff4;--text:#d8dee9;--text-sec:#a3aec3;--text-dim:#6c7a93;
  --success:#a3be8c;--warn:#ebcb8b;--danger:#bf616a
}
[data-theme="nord"] body{background:var(--bg)}
[data-theme="nord"] .topbar{background:rgba(46,52,64,.94)}
[data-theme="nord"] .nav-bar{background:rgba(46,52,64,.7)}
[data-theme="nord"] .nav-tab.active{color:#88c0d0;border-color:#88c0d0}
[data-theme="nord"] .login-logo-img{background:linear-gradient(135deg,#2e3440,#88c0d0)}
[data-theme="nord"] .btn-primary{background:#88c0d0;color:#2e3440;border-color:#88c0d0}
[data-theme="nord"] .btn-primary:hover{background:#a0d0dc}

/* ── Gruvbox (dark) — warm retro earth tones ──────────────────────────
   Cozy and saturated. Mustard yellow + burnt orange accents on a
   warm-brown dark. From the Gruvbox terminal theme. */
[data-theme="gruvbox"]{
  --ss-cyan:#fabd2f;--ss-cyan-glow:rgba(250,189,47,.20);
  --ss-navy:#3c3836;--ss-navy-light:#504945;
  --bg:#282828;--bg-deep:#1d2021;--panel:rgba(60,56,54,.88);--panel-light:rgba(80,73,69,.92);
  --card:rgba(60,56,54,.6);--card-hover:rgba(80,73,69,.72);
  --border:rgba(250,189,47,.18);--border-light:rgba(250,189,47,.09);
  --white:#fbf1c7;--text:#ebdbb2;--text-sec:#a89984;--text-dim:#7c6f64;
  --success:#b8bb26;--warn:#fabd2f;--danger:#fb4934
}
[data-theme="gruvbox"] body{background:var(--bg)}
[data-theme="gruvbox"] .topbar{background:rgba(29,32,33,.94)}
[data-theme="gruvbox"] .nav-bar{background:rgba(29,32,33,.7)}
[data-theme="gruvbox"] .nav-tab.active{color:#fe8019;border-color:#fe8019}
[data-theme="gruvbox"] .login-logo-img{background:linear-gradient(135deg,#282828,#fabd2f)}
[data-theme="gruvbox"] .btn-primary{background:#fabd2f;color:#282828;border-color:#fabd2f;font-weight:700}
[data-theme="gruvbox"] .btn-primary:hover{background:#fe8019;color:#282828}
[data-theme="gruvbox"] .stat-num{color:#fabd2f}

/* ── Ghibli (light) — Studio Ghibli watercolor palette ────────────────
   Cream + sage + terracotta. Soft, organic, warm. Inspired by the
   warm-natural palettes of My Neighbor Totoro / Howl's Moving Castle. */
[data-theme="ghibli"]{
  --ss-cyan:#6b9080;--ss-cyan-glow:rgba(107,144,128,.16);
  --ss-navy:#3a4f41;--ss-navy-light:#5e7766;
  --bg:#faf6ed;--bg-deep:#f3eddc;--panel:rgba(255,253,247,.92);--panel-light:rgba(255,255,255,.94);
  --card:rgba(255,253,247,.86);--card-hover:rgba(255,255,255,.95);
  --border:rgba(107,144,128,.18);--border-light:rgba(107,144,128,.09);
  --white:#3a4f41;--text:#4d5b4e;--text-sec:#7a8478;--text-dim:#a39e93;
  --shadow:0 2px 10px rgba(60,80,60,.07);
  --shadow-lg:0 6px 24px rgba(60,80,60,.12);
  --success:#6b9080;--warn:#d68c45;--danger:#c45a3d
}
[data-theme="ghibli"] body{background:var(--bg)}
[data-theme="ghibli"] .topbar{background:rgba(250,246,237,.94);border-bottom:1px solid var(--border-light)}
[data-theme="ghibli"] .nav-bar{background:rgba(243,237,220,.7)}
[data-theme="ghibli"] .nav-tab.active{color:#cd853f;border-color:#cd853f}
[data-theme="ghibli"] .login-screen{background:linear-gradient(180deg,#faf6ed 0%,#e8e0c8 100%)}
[data-theme="ghibli"] .login-logo-img{background:linear-gradient(135deg,#f3eddc,#6b9080)}
[data-theme="ghibli"] .topbar-logo{background:linear-gradient(135deg,#f3eddc,#6b9080)}
[data-theme="ghibli"] .btn-primary{background:#6b9080;color:#fbf8f0;border-color:#6b9080}
[data-theme="ghibli"] .btn-primary:hover{background:#5e8273}
[data-theme="ghibli"] .card{background:#ffffff;border:1px solid rgba(107,144,128,.13);box-shadow:0 1px 3px rgba(60,80,60,.06)}
[data-theme="ghibli"] input[type="date"]{color-scheme:light}

/* ═══════════════════════════════════════════════════════════════════════════
   USER-PICKABLE ACCENT OVERRIDE
   Layers on top of any theme — the user picks an accent and that color
   replaces the theme's --ss-cyan everywhere. Implemented as inline
   CSS variables on <html>, set from setAccentColor() in app.js.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-accent]{--ss-cyan:var(--accent);--ss-cyan-glow:var(--accent-glow)}

/* ── Debug / connection banner ── */
.debug-banner{background:var(--bg-deep);padding:4px 16px;font-family:'JetBrains Mono',monospace;font-size:10px;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;color:var(--text-dim)}
.debug-banner .status-ok{color:var(--success)}
.debug-banner .status-warn{color:var(--warn)}
.debug-banner .status-err{color:var(--danger)}
.debug-banner .status-info{color:var(--text-dim)}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRAST CUSTOMIZATION
   Each user can tune four independent dimensions: card/panel separation,
   text contrast, shadow depth, and color saturation. Default level (2) has
   no rules — the theme's own values apply. Level 0 is softest, 4 is most
   defined. Theme-family selectors let text rules adapt direction (lighter
   for dark themes, darker for light).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card / panel definition ── */
[data-contrast-cards="0"] .card,
[data-contrast-cards="0"] .login-box,
[data-contrast-cards="0"] .stat-card,
[data-contrast-cards="0"] .nav-more-dropdown,
[data-contrast-cards="0"] .toast{border-color:transparent;box-shadow:none}
[data-contrast-cards="1"] .card,
[data-contrast-cards="1"] .login-box,
[data-contrast-cards="1"] .stat-card,
[data-contrast-cards="1"] .nav-more-dropdown{border-color:var(--border-light)}
[data-contrast-cards="3"] .card,
[data-contrast-cards="3"] .login-box,
[data-contrast-cards="3"] .stat-card,
[data-contrast-cards="3"] .nav-more-dropdown,
[data-contrast-cards="3"] .toast,
[data-contrast-cards="3"] .modal-content{border-width:1.5px}
[data-contrast-cards="3"][data-theme-family="dark"] .card,
[data-contrast-cards="3"][data-theme-family="dark"] .login-box,
[data-contrast-cards="3"][data-theme-family="dark"] .stat-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow)}
[data-contrast-cards="3"][data-theme-family="light"] .card,
[data-contrast-cards="3"][data-theme-family="light"] .login-box,
[data-contrast-cards="3"][data-theme-family="light"] .stat-card{box-shadow:inset 0 1px 0 rgba(0,0,0,.03),var(--shadow)}
[data-contrast-cards="4"] .card,
[data-contrast-cards="4"] .login-box,
[data-contrast-cards="4"] .stat-card,
[data-contrast-cards="4"] .nav-more-dropdown,
[data-contrast-cards="4"] .toast,
[data-contrast-cards="4"] .modal-content{border-width:2px;border-color:var(--ss-cyan-glow)}
[data-contrast-cards="4"][data-theme-family="dark"] .card,
[data-contrast-cards="4"][data-theme-family="dark"] .login-box,
[data-contrast-cards="4"][data-theme-family="dark"] .stat-card{box-shadow:0 0 0 1px var(--ss-cyan-glow),inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-lg)}
[data-contrast-cards="4"][data-theme-family="light"] .card,
[data-contrast-cards="4"][data-theme-family="light"] .login-box,
[data-contrast-cards="4"][data-theme-family="light"] .stat-card{box-shadow:0 0 0 1px var(--border),inset 0 1px 0 rgba(0,0,0,.04),var(--shadow-lg)}

/* ── Text contrast ── direction depends on theme family */
[data-theme-family="dark"][data-contrast-text="0"]{--text:#9aa1b4;--text-sec:#5a6378;--text-dim:#3a4258}
[data-theme-family="dark"][data-contrast-text="1"]{--text:#b8bfd0;--text-sec:#707a90;--text-dim:#424a62}
[data-theme-family="dark"][data-contrast-text="3"]{--text:#e8ecf8;--text-sec:#a8b2c8;--text-dim:#6a7488}
[data-theme-family="dark"][data-contrast-text="4"]{--text:#ffffff;--text-sec:#d4dae8;--text-dim:#7a829c;--white:#ffffff}
[data-theme-family="light"][data-contrast-text="0"]{--text:#5a6280;--text-sec:#7a8298;--text-dim:#9aa2b8}
[data-theme-family="light"][data-contrast-text="1"]{--text:#3a4254;--text-sec:#6a728a;--text-dim:#929aaa}
[data-theme-family="light"][data-contrast-text="3"]{--text:#1a1f2c;--text-sec:#3a4254;--text-dim:#5e6680}
[data-theme-family="light"][data-contrast-text="4"]{--text:#000000;--text-sec:#1a1f2c;--text-dim:#404858;--white:#000000}

/* ── Shadow depth ── */
[data-contrast-shadow="0"]{--shadow:none;--shadow-lg:0 1px 3px rgba(0,0,0,.08)}
[data-contrast-shadow="1"]{--shadow:0 2px 10px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);--shadow-lg:0 4px 18px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.18)}
[data-contrast-shadow="3"]{--shadow:0 6px 32px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);--shadow-lg:0 12px 56px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4)}
[data-contrast-shadow="4"]{--shadow:0 10px 44px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.45);--shadow-lg:0 20px 80px rgba(0,0,0,.75),0 6px 16px rgba(0,0,0,.55)}

/* ── Color saturation ── applied to body, not html. Filter on html creates a
   containing block that breaks position:fixed for modal overlays, causing
   horizontal-scroll artifacts on viewports narrower than the modal. */
body[data-contrast-saturation="0"]{filter:saturate(.45)}
body[data-contrast-saturation="1"]{filter:saturate(.75)}
body[data-contrast-saturation="3"]{filter:saturate(1.3)}
body[data-contrast-saturation="4"]{filter:saturate(1.65)}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
/* 100dvh tracks the real viewport on iOS so content doesn't get cut
   off by the dynamic Safari toolbar / address bar. 100vh stays as a
   fallback for older browsers; 100svh covers some Android quirks. */
.app-shell{display:flex;flex-direction:column;height:100vh;height:100svh;height:100dvh;position:relative;z-index:1}
/* Disable iOS double-tap zoom on every interactive element; keeps
   pinch-to-zoom and natural scroll behavior intact. */
button,.btn,.nav-tab,.nav-more-item,.notif-bell,.topbar-user,.rsc-tab,.rsc-org-card,.rsc-card,a,select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}

/* ── Login Screen ── */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,rgba(75,163,212,.06) 0%,transparent 60%)}
.login-screen.hidden{display:none}
.login-box{width:min(92vw,440px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px 32px;box-shadow:var(--shadow-lg);text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(20px)}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ss-red),var(--ss-cyan),var(--ss-navy-light))}
.login-logo-wrap{margin:0 auto 20px;text-align:center;perspective:600px}
.login-logo-img{width:220px;height:auto;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--bg),var(--ss-navy));padding:8px;transition:filter .35s ease,box-shadow .35s ease}
@keyframes logoSpinSlow{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
/* ── Connectivity indicator ─────────────────────────────────────────
   The login + topbar logos sit idle (no animation) until a Dataverse
   call is in flight. Spin = "doing something"; the static logo means
   either we haven't tried yet or the last call finished.
     'checking'      spinning fast, brighter glow
     'connected'     static, cyan glow (last call succeeded)
     'disconnected'  static, red glow + slight desaturate
   Driven by setConnectivityState() in js/auth.js. */
.login-logo-img.conn-checking,.topbar-logo img.conn-checking{animation:logoSpinSlow 1.4s linear infinite;filter:saturate(1.15)}
.login-logo-img.conn-connected,.topbar-logo img.conn-connected{filter:none}
.login-logo-img.conn-disconnected,.topbar-logo img.conn-disconnected{filter:grayscale(.55) saturate(.5)}
.login-logo-img.conn-checking{box-shadow:0 0 26px rgba(6,182,212,.32)}
.login-logo-img.conn-connected{box-shadow:0 0 22px rgba(6,182,212,.18)}
.login-logo-img.conn-disconnected{box-shadow:0 0 16px rgba(239,68,68,.16)}
.login-logo{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--ss-navy),var(--ss-cyan));display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 0 30px var(--ss-cyan-glow)}
.login-logo svg{width:48px;height:48px}
.login-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--white);margin-bottom:4px}
.login-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px}
.login-field{margin-bottom:14px;text-align:left}
.login-field label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:5px}
.login-field input,.login-field select{width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-deep);color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:all var(--tr);-webkit-appearance:none}
.login-field input:focus,.login-field select:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}
.login-field input::placeholder{color:var(--text-dim);opacity:.5}
.login-btn{width:100%;padding:13px;border-radius:var(--radius);border:none;background:var(--ss-cyan);color:var(--white);font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;transition:all var(--tr);margin-top:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.login-btn:hover{background:var(--ss-navy-light);box-shadow:0 4px 14px rgba(0,0,0,.2);transform:translateY(-1px)}
.login-btn:active{transform:scale(.98)}.login-btn:disabled{opacity:.5;cursor:wait}
.login-btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text-sec);box-shadow:none;margin-top:8px}
.login-error{color:var(--danger);font-size:12px;margin-top:8px;min-height:18px}
.login-divider{border:none;border-top:1px solid var(--border-light);margin:20px 0}
.login-switch{font-size:12px;color:var(--text-dim)}.login-switch a{color:var(--ss-cyan);cursor:pointer;text-decoration:underline}

/* ── Topbar ── */
.topbar{height:60px;background:rgba(8,12,24,.92);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:100;position:relative}
/* Decorative cyan hairline removed — read as generic "glowy dashboard"
   and added visual noise without conveying anything. */
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-logo{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--bg),var(--ss-navy));perspective:200px}
.topbar-logo img{transition:filter .35s ease}
@keyframes logoSpin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
.topbar-logo svg{width:20px;height:20px}
.topbar-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--white);letter-spacing:.02em}
.topbar-subtitle{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase}
.topbar-actions{display:flex;gap:6px;align-items:center}
.topbar-user{display:flex;align-items:center;gap:8px;padding:5px 12px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);cursor:pointer;transition:all var(--tr)}
.topbar-user:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.topbar-user-name{font-size:12px;font-weight:600;color:var(--text-sec)}
.topbar-user-role{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim)}

/* ── Nav Tabs ── */
.nav-bar{display:flex;gap:0;padding:0 16px;background:rgba(8,12,24,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);overflow:visible;flex-shrink:0;justify-content:center;position:relative;z-index:90}
.nav-tab{padding:11px 18px;font-size:12px;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--tr);white-space:nowrap;position:relative}
.nav-tab:hover{color:var(--text-sec);background:rgba(255,255,255,.02)}
.nav-tab.active{color:var(--ss-cyan);border-color:var(--ss-cyan)}

/* ── Main Content ── */
.main-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px;padding-bottom:120px;scroll-behavior:smooth}
.main-scroll::-webkit-scrollbar{width:4px}.main-scroll::-webkit-scrollbar-thumb{background:rgba(75,163,212,.2);border-radius:4px}
.main-scroll::-webkit-scrollbar-thumb:hover{background:rgba(75,163,212,.4)}
.view{display:none;max-width:960px;margin:0 auto}.view.active{display:block;animation:fadeUp .3s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Cards ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:14px;box-shadow:var(--shadow);position:relative;backdrop-filter:blur(8px)}
/* Cyan top-edge gradient removed — it stamped every card with a
   "designer dashboard" mark that felt synthetic. Keeping the border +
   shadow does the visual separation work without the decoration. */
.card-header{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sec);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:8px}

/* ── Forms ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid.col3{grid-template-columns:1fr 1fr 1fr}.form-grid .full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.form-input,.form-select,.form-textarea{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-deep);color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;transition:all var(--tr);-webkit-appearance:none}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim);font-style:italic;opacity:.6}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5473'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}
.form-textarea{resize:vertical;min-height:70px;line-height:1.5}
input[type="date"]{color-scheme:dark}
.form-input.auto-filled{border-color:var(--success);background:rgba(16,185,129,.04)}

/* ── Site Search ── */
.site-search-wrap{position:relative;z-index:50}
.site-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--ss-cyan);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;display:none;z-index:999}
.site-dropdown.open{display:block;animation:fadeUp .12s ease}
.site-option{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}
.site-option:hover{background:var(--card)}
.site-option .site-meta{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.site-dropdown-empty{padding:16px;text-align:center;font-size:12px;color:var(--text-dim)}

/* ── Buttons ── */
.btn{padding:8px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--glass);color:var(--text);font-size:12px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color var(--tr),background var(--tr),color var(--tr);white-space:nowrap}
.btn:hover{border-color:rgba(75,163,212,.28);background:rgba(75,163,212,.06);color:var(--white)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ss-cyan);color:var(--white);border-color:var(--ss-cyan);box-shadow:none;font-weight:600}
.btn-primary:hover{background:var(--ss-navy-light);border-color:var(--ss-navy-light);box-shadow:none;transform:none}
.btn-red{background:var(--ss-red);color:var(--white);border-color:var(--ss-red);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.btn-red:hover{background:#a81f1f;border-color:#a81f1f;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.btn-success{background:var(--success-dim);color:var(--success);border-color:rgba(16,185,129,.2)}
.btn-warn{background:var(--warn-dim);color:var(--warn);border-color:rgba(245,158,11,.2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-sec)}.btn-ghost:hover{color:var(--white);background:rgba(255,255,255,.04)}
.btn-sm{padding:6px 12px;font-size:11px}.btn-lg{padding:12px 24px;font-size:14px}

/* ── Dashboard Stats ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.stat-card{padding:18px 18px 16px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);text-align:left;transition:border-color var(--tr),background var(--tr)}
.stat-card:hover{border-color:var(--border);background:var(--card-hover)}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;color:var(--white);line-height:1.1;letter-spacing:-.02em}
.stat-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:6px;font-weight:600}
.kpi-warn .stat-num{color:var(--danger)}

/* ── Data Tables ── */
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);white-space:nowrap}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border-light);color:var(--text-sec);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table tr:hover td{background:rgba(75,163,212,.03)}
.data-table .clickable{cursor:pointer;color:var(--ss-cyan);text-decoration:underline}

/* ── Timesheet Grid ── */
.ts-grid{width:100%;border-collapse:collapse;font-size:12px}
.ts-grid th{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding:8px 6px;border-bottom:2px solid var(--border);text-align:center}
.ts-grid th:first-child,.ts-grid th:nth-child(2){text-align:left}
.ts-grid td{padding:4px 3px;border-bottom:1px solid var(--border-light);text-align:center;vertical-align:middle}
.ts-grid td:first-child,.ts-grid td:nth-child(2){text-align:left}
.ts-grid .ts-type{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:var(--text-dim);width:28px;text-align:right;padding-right:6px}
.ts-grid input[type="number"]{width:48px;padding:4px 2px;border:1px solid var(--border-light);border-radius:4px;background:var(--bg-deep);color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;text-align:center;outline:none;-moz-appearance:textfield}
.ts-grid input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none}
.ts-grid input[type="number"]:focus{border-color:var(--ss-cyan)}
.ts-grid .ts-total{font-weight:700;color:var(--white);font-family:'JetBrains Mono',monospace}
.ts-row-header{background:var(--card);font-weight:600;color:var(--text)}
.ts-row-header td{padding:8px 6px;border-bottom:2px solid var(--border)}
.ts-project-name{font-size:11px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Tags ── */
.tag{display:inline-flex;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace}
.tag-maint{background:rgba(75,163,212,.1);color:var(--ss-cyan)}
.tag-comm{background:var(--warn-dim);color:var(--warn)}
.tag-open{background:var(--success-dim);color:var(--success)}
.tag-closed{background:rgba(255,255,255,.04);color:var(--text-dim)}

/* ── Toast ── */
/* Toast lives just under the topbar (top:74px) and slides DOWN into
   view — bottom-anchored toasts kept getting clipped by mobile
   browser chrome (Safari address bar, iOS gesture indicator). top
   position also doesn't compete with the notification panel or
   any modal action bars. env(safe-area-inset-top) covers the iOS
   notch when a user installs the app as a home-screen PWA. */
.toast{position:fixed;top:calc(74px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%) translateY(-140%);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 24px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);z-index:10000;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease;pointer-events:none;backdrop-filter:blur(16px);opacity:0;max-width:min(560px,calc(100vw - 24px));text-align:center;white-space:normal;line-height:1.4}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{border-color:var(--success);color:var(--success)}
.toast.error{border-color:var(--danger);color:var(--danger)}
.toast.warn{border-color:var(--warn);color:var(--warn)}
.toast.info{border-color:var(--ss-cyan);color:var(--ss-cyan)}
/* When any themed modal (appConfirm, appPrompt, big drill-downs) is
   open we lock the body so accidental background scroll on iOS doesn't
   slip behind the modal content. The class is added in JS and removed
   when the last modal closes — see appConfirm / appPrompt in app.js. */
body.modal-open{overflow:hidden;touch-action:none}
/* Mobile: tighten side margins so longer messages stay readable. */
@media(max-width:600px){
  .toast{top:calc(58px + env(safe-area-inset-top, 0px));padding:10px 16px;font-size:12px}
}

/* ── File Browser ── */
.file-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:6px;cursor:pointer;transition:all var(--tr)}
.file-row:hover{border-color:rgba(75,163,212,.3);background:var(--card-hover)}
.file-info{flex:1;min-width:0}.file-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{font-size:11px;color:var(--text-dim);margin-top:2px}
.file-actions{display:flex;gap:6px;flex-shrink:0}

/* ── Admin Panel ── */
.admin-user-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:6px;transition:all var(--tr)}
.admin-user-row:hover{border-color:var(--border)}
.admin-user-row .user-name{flex:1;font-weight:600;font-size:13px}
.admin-user-row .user-email{flex:1;font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.admin-user-row select{padding:4px 8px;font-size:11px;border-radius:4px;border:1px solid var(--border);background:var(--bg-deep);color:var(--text);outline:none}
.admin-user-row select:focus{border-color:var(--ss-cyan)}

/* ── Notifications ── */
/* Used to be a div with onclick; now a real <button> for keyboard + a11y.
   Override native button defaults so the topbar density is unchanged. */
.notif-bell{position:relative;cursor:pointer;padding:8px;border-radius:var(--radius);color:var(--text-sec);transition:all var(--tr);display:flex;align-items:center;background:transparent;border:none;font:inherit;line-height:0}
.notif-bell:hover{color:var(--white);background:rgba(255,255,255,.05)}
.notif-bell:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:2px}
.notif-badge{position:absolute;top:2px;right:2px;background:var(--ss-red);color:var(--white);font-size:9px;font-weight:800;font-family:'JetBrains Mono',monospace;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--ss-red-glow)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.notif-panel{position:fixed;top:52px;right:16px;width:min(400px,calc(100vw - 32px));z-index:4000;animation:fadeUp .15s ease}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background var(--tr)}
.notif-item:hover{background:rgba(255,255,255,.02)}
.notif-item.unread{background:rgba(75,163,212,.04);border-left:3px solid var(--ss-cyan)}
.notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.notif-icon.danger{background:var(--danger-dim);color:var(--danger)}
.notif-icon.warn{background:var(--warn-dim);color:var(--warn)}
.notif-icon.info{background:rgba(75,163,212,.1);color:var(--ss-cyan)}
.notif-icon.success{background:var(--success-dim);color:var(--success)}
.notif-text{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px}
.notif-desc{font-size:11px;color:var(--text-dim);line-height:1.3}
.notif-time{font-size:9px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-top:3px}

/* ── Project Folders ── */
.project-folder{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:12px;transition:all var(--tr)}
.project-folder:hover{border-color:rgba(75,163,212,.2)}
.project-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background var(--tr)}
.project-header:hover{background:rgba(255,255,255,.02)}
.project-icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.project-icon.comm{background:var(--warn-dim);color:var(--warn)}
.project-icon.maint{background:rgba(75,163,212,.1);color:var(--ss-cyan)}
.project-info{flex:1;min-width:0}
.project-title{font-size:14px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-meta{font-size:11px;color:var(--text-dim);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.project-badge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;background:var(--card);border:1px solid var(--border-light);border-radius:12px;padding:2px 10px;color:var(--white);flex-shrink:0}
.project-chevron{color:var(--text-dim);transition:transform .2s;font-size:18px}
.project-folder.open .project-chevron{transform:rotate(90deg)}
.project-entries{display:none;border-top:1px solid var(--border-light);padding:8px}
.project-folder.open .project-entries{display:block}
.project-entry{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);cursor:pointer;transition:all var(--tr);font-size:12px}
.project-entry:hover{background:var(--card)}
.project-entry-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);min-width:80px}
.project-entry-specialist{color:var(--text-sec);min-width:100px}
.project-entry-notes{color:var(--text-dim);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-entry-hours{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ss-cyan);min-width:40px;text-align:right}

/* ── Job Tracker Cards ── */
.jt-card{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden}
.jt-card:hover{border-color:rgba(75,163,212,.3);background:var(--card-hover);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.jt-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px}
.jt-card.maint::before{background:var(--ss-cyan)}.jt-card.comm::before{background:var(--warn)}
.jt-card.overdue::before{background:var(--danger)}
.jt-card.completed::before{background:var(--success)}
.jt-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}
.jt-card-site{font-size:14px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.jt-card-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);white-space:nowrap}
.jt-card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--text-sec)}
.jt-card-meta span{display:flex;align-items:center;gap:3px}
.jt-card-meta .label{color:var(--text-dim);font-size:9px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
.jt-card-notes{font-size:11px;color:var(--text-dim);margin-top:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jt-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.jt-card-actions{position:absolute;top:12px;right:12px;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.jt-card:hover .jt-card-actions{opacity:1}

/* ── Job Tracker > Projects view (portfolio cards) ──────────────────────
   Linear / Asana-style project rows. Each card is a single horizontal
   row at rest; clicking expands to reveal entry rows + project actions.
   Left edge color is the health ribbon (on-track / at-risk / overdue /
   done) so portfolio shape reads at a glance during scroll. */

/* Top strip — health counts + total summary */
.jtp-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:10px;flex-wrap:wrap}
.jtp-strip-stat{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;background:var(--card);border:1px solid var(--border-light);border-radius:8px;font-size:11px;font-weight:600;color:var(--text-sec)}
.jtp-strip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.jtp-strip-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.jtp-strip-num{font-weight:800;color:var(--white);font-family:'JetBrains Mono',monospace;font-size:13px;min-width:18px;text-align:right}
.jtp-strip-spacer{flex:1}
.jtp-strip-meta{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* Project card list */
.jtp-grid{display:flex;flex-direction:column;gap:8px}
.jtp-card{background:var(--card);border:1px solid var(--border-light);border-left:3px solid var(--health,#94a3b8);border-radius:10px;overflow:hidden;transition:border-color var(--tr),background var(--tr),box-shadow var(--tr)}
.jtp-card:hover{border-color:var(--border);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.jtp-card[data-health="overdue"]{box-shadow:inset 0 0 0 1px rgba(239,68,68,.08)}

/* Head — clickable row that toggles the expand body */
.jtp-card-head{display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;transition:background .12s ease}
.jtp-card-head:hover{background:var(--card-hover)}

.jtp-card-lead{flex-shrink:0}
.jtp-card-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ss-navy),var(--ss-cyan));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;letter-spacing:.04em}

.jtp-card-main{flex:1;min-width:0}
.jtp-card-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.jtp-card-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--white);letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.jtp-card-chips{display:flex;gap:5px;align-items:center;flex-shrink:0}
.jtp-chip{font-size:9px;font-weight:700;padding:2px 8px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.jtp-chip-health{font-weight:700}
.jtp-chip-comm{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4);color:#a78bfa}
.jtp-chip-maint{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#34d399}
.jtp-chip-count{background:var(--bg-deep);border-color:var(--border-light);color:var(--text-sec);font-family:'JetBrains Mono',monospace;min-width:24px;text-align:center}

/* Progress bar — color matches health */
.jtp-progress{position:relative;height:6px;background:var(--bg-deep);border-radius:3px;overflow:hidden;margin-bottom:6px}
.jtp-progress-bar{position:absolute;left:0;top:0;height:100%;border-radius:3px;transition:width .25s ease;z-index:2}
.jtp-progress-bar-bg{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.02));z-index:1}

.jtp-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-sec);font-family:'JetBrains Mono',monospace;flex-wrap:wrap}
.jtp-card-meta strong{color:var(--white);font-weight:700}
.jtp-meta-sep{color:var(--text-dim);opacity:.5}

.jtp-card-chevron{font-size:20px;color:var(--text-dim);transition:transform .15s ease;flex-shrink:0;line-height:1}
.jtp-card.is-open .jtp-card-chevron{transform:rotate(90deg);color:var(--ss-cyan)}

/* Expand body — entries list + project actions */
.jtp-card-body{display:none;border-top:1px solid var(--border-light);background:var(--bg-deep)}
.jtp-card.is-open .jtp-card-body{display:block;animation:jtpExpand .18s ease}
@keyframes jtpExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.jtp-card-actions{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-light)}

.jtp-entries{display:flex;flex-direction:column}
.jtp-entry{display:grid;grid-template-columns:14px 90px 1fr 50px 2fr 50px;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border-light);font-size:11px;color:var(--text-sec);cursor:pointer;transition:background .12s ease}
.jtp-entry:last-child{border-bottom:none}
.jtp-entry:hover{background:var(--card-hover);color:var(--white)}
.jtp-entry-dot{width:8px;height:8px;border-radius:50%}
.jtp-entry-date{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--text-dim)}
.jtp-entry-spec{color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jtp-entry-status{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.jtp-entry-notes{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jtp-entry-hours{font-family:'JetBrains Mono',monospace;color:var(--ss-cyan);font-weight:600;text-align:right}

/* Mobile — collapse meta row vertically, tighten avatars */
@media(max-width:700px){
  .jtp-card-head{gap:10px;padding:10px}
  .jtp-card-avatar{width:30px;height:30px;font-size:11px}
  .jtp-card-title{font-size:13px}
  .jtp-card-meta{font-size:10px}
  .jtp-entry{grid-template-columns:14px 80px 1fr 40px 40px;font-size:10px}
  .jtp-entry-notes{display:none}
}

/* ── Analytics Charts ── */
.analytics-period{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.analytics-period select{padding:6px 28px 6px 10px;font-size:11px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.heatmap-grid{display:grid;gap:2px;font-size:10px}
.heatmap-cell{border-radius:3px;min-height:26px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9px;cursor:pointer;transition:all var(--tr);color:var(--white)}
.heatmap-cell:hover{box-shadow:0 0 0 2px var(--ss-cyan);z-index:1}
.heatmap-label{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;display:flex;align-items:center;color:var(--text-sec)}
.donut{border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto}
.donut-center{position:absolute;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;justify-content:center}
.chart-legend-item{display:flex;align-items:center;gap:6px;color:var(--text-sec)}
.chart-legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.coverage-gap{background:var(--danger-dim) !important;border:1px solid rgba(239,68,68,.2) !important}

/* ── Team Directory Cards ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.team-card{padding:16px;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:all var(--tr);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.team-card:hover{border-color:rgba(75,163,212,.3);background:var(--card-hover);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.25)}
.team-card-name{font-size:14px;font-weight:700;color:var(--white)}
.team-card-role{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px}
.team-card-info{font-size:11px;color:var(--text-dim);display:flex;flex-direction:column;gap:2px;width:100%}
.team-card-info div{display:flex;justify-content:space-between;padding:2px 0}
.team-card-info .label{color:var(--text-dim)}
.team-card-info .value{color:var(--text-sec);font-family:'JetBrains Mono',monospace;font-size:10px}
.team-search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deep);color:var(--text);font-size:13px;outline:none;transition:all var(--tr);margin-bottom:16px}
.team-search:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}
.team-search::placeholder{color:var(--text-dim)}

/* ── @Mention Autocomplete ── */
.mention-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:150px;overflow-y:auto;z-index:200;display:none}
.mention-dropdown.open{display:block}
.mention-option{padding:6px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.mention-option:hover{background:rgba(75,163,212,.1)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);overflow-x:hidden}
.modal-content{width:min(94vw,860px);max-height:80vh;overflow-y:auto;overflow-x:hidden}
/* Grid items inside modals must allow shrinking below intrinsic content
   width. Otherwise Chart.js canvases (default 300px intrinsic) lock the
   grid columns wider than the modal, and overflow-x:hidden then clips the
   right-most column instead of letting the canvas size to its track. */
.modal-content > div[style*="grid-template-columns"] > div{min-width:0}

/* ── Nav More Dropdown ── */
/* Desktop default: anchored under the More tab via position:absolute.
   Mobile (≤600px) overrides to position:fixed so the dropdown isn't clipped
   by the nav-bar's overflow-x:auto. JS only computes coordinates for the
   fixed (mobile) case; on desktop it leaves the inline styles cleared. */
.nav-more-wrap{position:relative}
.nav-more-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:4px;min-width:180px;background:rgba(13,22,41,.97);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:9000;padding:4px 0;backdrop-filter:blur(16px)}
.nav-more-dropdown.open{display:block;animation:fadeUp .15s ease}
@media(max-width:900px){.nav-more-dropdown{position:fixed;top:auto;right:auto;margin-top:0}}
@media(pointer:coarse){.nav-more-dropdown{position:fixed;top:auto;right:auto;margin-top:0}}
.nav-more-item{padding:9px 18px;font-size:12px;font-weight:500;color:var(--text-dim);cursor:pointer;transition:all .15s ease;white-space:nowrap}
.nav-more-item:hover{color:var(--white);background:rgba(75,163,212,.08)}
.nav-more-item.active{color:var(--ss-cyan)}
.nav-more-divider{height:1px;background:var(--border);margin:4px 10px}

/* ── Loading Skeleton ── */
.skeleton{background:linear-gradient(90deg,var(--bg-deep) 25%,rgba(75,163,212,.04) 50%,var(--bg-deep) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:120px;margin-bottom:12px}
.skeleton-row{height:16px;margin-bottom:8px;width:80%}
.skeleton-row:nth-child(2){width:60%}
.skeleton-row:nth-child(3){width:70%}

/* ── Responsive ── */
@media(max-width:1024px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.form-grid{grid-template-columns:1fr}.form-grid.col3{grid-template-columns:1fr}.ts-grid input[type="number"]{width:38px}.chart-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.modal-content{width:96vw;max-height:92vh}}
@media(max-width:600px){
  /* Home-indicator clearance on iPhone X+ — extend the bottom padding by
     the safe-area inset so FABs and the last card aren't tucked under
     the indicator. Falls back to plain 100px on Androids / older iPhones. */
  .main-scroll{padding:12px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .card{padding:16px}
  .topbar-subtitle{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .nav-tab{padding:10px 12px;font-size:11px;min-height:36px}
  .nav-bar{overflow-x:auto;scrollbar-width:thin}
  .login-logo-img{width:160px}
  .nav-more-item{padding:12px 18px;font-size:13px}
  /* Topbar — pack tighter so the brand + client filter + 4 icon bells +
     user avatar all fit on a phone screen instead of wrapping to two
     lines or pushing the avatar off the right edge. */
  .topbar{padding:0 10px;height:56px;gap:4px}
  /* Logo container slightly smaller than desktop (52->40). The img inside
     has inline `width:42 height:auto object-fit:contain` — that worked
     before; we just constrain max dimensions to fit the smaller box
     instead of overriding width/height (which collapsed on some mobile
     browsers when the explicit dims fought the cascade). */
  .topbar-logo{width:40px;height:40px;border-radius:8px}
  .topbar-logo img{max-width:34px !important;max-height:24px !important}
  .topbar-brand{gap:6px;min-width:0;flex-shrink:1;overflow:hidden}
  .topbar-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{gap:2px;flex-shrink:0}
  /* 8px padding around a 16px icon = 32px hit area. Topbar height (56px)
     caps how big we can go without lifting the whole bar; this is the
     most we can hand the user without a redesign. */
  .notif-bell{padding:8px}
  .notif-bell svg{width:16px !important;height:16px !important}
  /* Client filter — the inline desktop styles set a wide JetBrains Mono
     dropdown that crowds the topbar on narrow screens. Override via !important
     because those inline styles win specificity otherwise. */
  #topbarClientFilter{
    max-width:108px !important;
    font-size:10px !important;
    font-family:'Inter',sans-serif !important;
    padding:5px 20px 5px 7px !important;
    background-position:right 4px center !important;
  }
  /* User chip — collapse to just the avatar; the name + role pill take
     too much room and the user's own name is already visible elsewhere. */
  .topbar-user{padding:2px;gap:0;background:transparent;border:none}
  .topbar-user-name{display:none}
  /* Debug banner — single-line, ellipsize the connected URL, drop the
     entities/token info on mobile (admin-only diagnostic). */
  .debug-banner{font-size:9px;padding:3px 10px;gap:0}
  .debug-banner > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .debug-banner > span:nth-child(2){display:none}

  /* Leadership KPI strip — desktop minimum column is 170px which pushes
     two cards (~340px) past most phone widths and causes horizontal
     scroll. Drop the minimum so cards reflow to 1 col on narrow screens. */
  .lead-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important}

  /* On-call coverage strip renders 30 days in a 15-col grid (2 rows).
     At phone widths each cell is tiny and the side-scroll triggers.
     Collapse to 7 cols (weeks across, time down). */
  .lead-oncall-grid{grid-template-columns:repeat(7,1fr) !important}

  /* Resources board (Trello-style strip with 290px portfolio columns)
     is brutal on a phone — horizontal scroll inside the page scroll.
     Stack the columns vertically instead and remove the height cap so
     each portfolio's list grows to fit its assignments naturally. */
  .rsc-board{flex-direction:column !important;overflow-x:visible !important}
  .rsc-column{flex:1 1 auto !important;max-width:none !important;max-height:none !important;min-width:0 !important;width:100% !important}
}
@media(max-width:480px){
  /* The whole title-text block disappears on the smallest phones — the
     spinning logo carries the brand on its own here. */
  .topbar-title{display:none}
  .nav-bar{overflow-x:auto}
  .nav-tab{padding:8px 10px;font-size:10px}
  .login-logo-img{width:140px}
  .modal-content{width:98vw;max-height:94vh;border-radius:var(--radius)}
  .btn{min-height:32px}
  .btn-sm{min-height:28px;padding:6px 10px}
  /* Even tighter at iPhone-mini widths */
  #topbarClientFilter{max-width:92px !important}
  .topbar{padding:0 8px}
  /* Collapse Leadership KPIs to a single column on the smallest phones. */
  .lead-kpi-grid{grid-template-columns:1fr !important}
  /* On-call strip down to 5 cols at very narrow widths so 30 days flow
     into 6 readable rows instead of cramming each cell to 2-3px. */
  .lead-oncall-grid{grid-template-columns:repeat(5,1fr) !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL POLISH — applies across every theme. Quieter shadows, better
   typography rendering, calmer scrollbars, smoother focus rings.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sharper typography: kerning + ligatures + tabular numerals where
   they belong (counters / numeric columns). Slightly tighter line-height
   reads as more "designed". */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'kern','liga','clig','calt'}
body{line-height:1.5}
.stat-value,[class*="-mono"],.ts-grid input[type="number"]{font-variant-numeric:tabular-nums;font-feature-settings:'tnum','kern'}

/* Calmer text selection — matches the active accent rather than the harsh
   browser-default blue. */
::selection{background:var(--ss-cyan-glow);color:var(--white)}

/* Focus ring: replace the default outline with a soft 2-pixel ring that
   uses the theme accent. Applied via :focus-visible so mouse clicks don't
   get a ring. */
:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:2px;border-radius:6px}
button:focus-visible,.btn:focus-visible,.nav-tab:focus-visible,.nav-more-item:focus-visible{outline-offset:1px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}

/* Quieter scrollbars on WebKit — narrower, theme-tinted, no chrome. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(127,127,127,.22);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(127,127,127,.36);background-clip:padding-box}

/* Card hover: transition only the shadow + border, never the position.
   The default lift was too jumpy. */
.card{transition:box-shadow var(--tr),border-color var(--tr)}

/* Subtle horizontal rule — current default is too heavy. */
hr,.divider{border:none;border-top:1px solid var(--border-light);margin:14px 0}

/* Buttons: predictable focus, kerned text. */
.btn{font-feature-settings:'kern'}
.btn:focus{outline:none}

/* Pill / tag — numeric tabular so badges with counts line up. */
.tag{font-feature-settings:'tnum','kern'}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCES — Board + Org Chart
   The board is a horizontal kanban (project columns, person cards). The
   org chart is a centered hierarchical tree where each node renders a
   contact card and CSS-only connector lines join parent → children.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards on the board pick up a slight shadow on hover so the user knows
   the card is draggable. */
.rsc-card:hover{border-color:rgba(75,163,212,.25);background:var(--card-hover);box-shadow:0 2px 8px rgba(0,0,0,.16)}
.rsc-card:active{cursor:grabbing}
.rsc-column:hover{border-color:rgba(75,163,212,.18)}

/* Project Staffing tree — left-bar accent (portfolio color), nested
   blocks for projects, person cards stack inside each project. Designed
   to read top-to-bottom so it works on mobile widths. */
.rsc-tree{display:flex;flex-direction:column;gap:18px}
.rsc-tree-portfolio{padding:0 0 0 16px;margin-left:4px}
.rsc-tree-pf-head{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.rsc-tree-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.rsc-tree-project{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:10px;padding:12px}
.rsc-tree-project-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--white);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border-light)}
.rsc-tree-people .rsc-card{margin-bottom:6px}
.rsc-tree-people .rsc-card:last-child{margin-bottom:0}

/* Reports-To tree — vertical indented list. Each subtree drops below
   its parent and indents to the right with a dashed guide rail, much
   like a file-tree or a Notion outline. Reads naturally top-to-bottom,
   scales to deep hierarchies, and renders identically on mobile and
   desktop. The horizontal-hierarchy version this replaced ran out of
   width fast and was awkward to scan once teams grew. */
.rsc-org-tree{display:flex;flex-direction:column;gap:4px;padding:8px 14px 30px;max-width:1100px;margin:0 auto}
.rsc-org-row{position:relative}
.rsc-org-row-card{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--border-light);
  border-left:3px solid var(--section-color,transparent);
  border-radius:10px;padding:8px 12px;
  cursor:pointer;
  transition:border-color var(--tr),background var(--tr),box-shadow var(--tr),transform .15s ease;
  box-shadow:var(--shadow);position:relative;z-index:1;
}
.rsc-org-row-card:hover{border-color:rgba(75,163,212,.4);background:var(--card-hover);box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateX(2px)}
.rsc-org-row.rsc-org-compact .rsc-org-row-card{padding:5px 10px;gap:8px}
.rsc-org-row.rsc-org-drop-target>.rsc-org-row-card{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}

/* Subtree wrapper — indents to the right, draws a dashed vertical rail
   on the left edge, and each direct child gets a short horizontal hook
   into the rail. Trim the rail at the last child so it doesn't dangle
   past the final row. */
.rsc-org-subtree{position:relative;margin-left:18px;padding-left:18px;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.rsc-org-subtree::before{content:'';position:absolute;left:0;top:0;bottom:14px;width:1px;border-left:1px dashed rgba(95,163,194,.35)}
.rsc-org-subtree>.rsc-org-row::before{content:'';position:absolute;left:-18px;top:50%;width:14px;height:1px;border-top:1px dashed rgba(95,163,194,.35);transform:translateY(-1px)}
/* The first row in any subtree pushes its hook a bit higher so it lines
   up with the row card, not the row's preview/children area. */
.rsc-org-subtree>.rsc-org-row>.rsc-org-row-card{position:relative;z-index:2}

/* Disclosure caret. Triangular like Finder / VS Code. Leaf rows get a
   muted dot so the avatar column stays aligned across siblings. */
.rsc-org-caret-v{
  flex-shrink:0;width:18px;height:18px;border-radius:5px;
  background:transparent;border:1px solid transparent;color:var(--text-dim);
  cursor:pointer;font-size:10px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;transition:all .12s ease;padding:0;
}
.rsc-org-caret-v:hover{background:var(--ss-cyan);color:#fff;border-color:var(--ss-cyan)}
.rsc-org-caret-v:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:1px}
.rsc-org-caret-leaf{cursor:default;color:rgba(95,163,194,.3);font-size:14px;line-height:1;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}

/* Row meta — name + title + phone stacked tightly */
.rsc-org-row-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.rsc-org-row-name{font-size:13px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.25}
.rsc-org-row-title{font-size:10px;color:var(--ss-cyan);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.25}
.rsc-org-row-phone{font-size:9px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.25}
.rsc-org-row.rsc-org-compact .rsc-org-row-name{font-size:12px}
.rsc-org-row.rsc-org-compact .rsc-org-row-title{font-size:9px}

/* Right-side chips */
.rsc-org-row-side{display:flex;align-items:center;gap:6px;flex-shrink:0}
.rsc-org-row-section{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.04em;white-space:nowrap}
.rsc-org-row-dotted{font-size:9px;color:var(--ss-cyan);font-weight:700;padding:2px 7px;background:rgba(75,163,212,.1);border:1px solid rgba(75,163,212,.25);border-radius:6px;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.rsc-org-row-size{font-size:11px;font-weight:700;color:var(--text-sec);background:var(--bg-deep);border:1px solid var(--border-light);padding:2px 10px;border-radius:11px;font-family:'JetBrains Mono',monospace;min-width:30px;text-align:center;font-feature-settings:'tnum','kern'}
.rsc-org-row-size-sub{color:var(--text-dim);font-weight:500;font-size:9px;margin-left:1px}
.rsc-org-row-me{font-size:9px;font-weight:800;color:#fff;background:var(--ss-cyan);padding:2px 7px;border-radius:6px;letter-spacing:.08em;font-family:'JetBrains Mono',monospace}

/* Remove × — quiet by default, danger on hover */
.rsc-org-row-remove{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;padding:0 4px;line-height:1;flex-shrink:0;transition:color .12s ease,transform .12s ease}
.rsc-org-row-remove:hover{color:var(--danger);transform:scale(1.1)}
.rsc-org-row-remove:focus-visible{outline:2px solid var(--danger);outline-offset:2px;border-radius:4px}

/* Collapsed avatar stack preview — sits just under the row, hints at
   what's hidden in the subtree without expanding it. Click to expand. */
.rsc-org-row-preview{
  display:inline-flex;align-items:center;gap:4px;
  margin:2px 0 4px 36px;padding:3px 9px 3px 4px;
  background:rgba(95,163,194,.05);border:1px dashed rgba(95,163,194,.3);
  border-radius:14px;cursor:pointer;width:fit-content;
  transition:background .12s ease,border-color .12s ease;
}
.rsc-org-row-preview:hover{background:rgba(95,163,194,.12);border-color:rgba(95,163,194,.55)}
.rsc-org-row-preview-avatar{display:inline-flex;margin-left:-6px;border:2px solid var(--card);border-radius:50%}
.rsc-org-row-preview-avatar:first-child{margin-left:0}
.rsc-org-row-preview-more{font-size:10px;color:var(--text-dim);font-weight:700;font-family:'JetBrains Mono',monospace;padding:0 4px}
.rsc-org-row-preview-hint{font-size:9px;color:var(--text-dim);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-left:6px;border-left:1px solid var(--border)}

/* Hover-highlight: fade unrelated, lift related. */
.rsc-org-faded{opacity:.4;transition:opacity .18s ease}
.rsc-org-related>.rsc-org-row-card{box-shadow:0 0 0 2px var(--ss-cyan),0 6px 18px rgba(0,0,0,.28);transition:box-shadow .18s ease}
/* Top-down tree variant — the card is one level deeper than the
   list-mode card, so target it explicitly so the same hover state
   reads in both layouts. */
.rsc-org-related>.rsc-org-tnode-self>.rsc-org-tree-card{box-shadow:0 0 0 2px var(--ss-cyan),0 6px 18px rgba(0,0,0,.28);transition:box-shadow .18s ease}

/* Group highlight: when a person is hovered, their entire section
   (banner + tier wrapper) gets a warm ring tinted with the section's
   own color so the eye groups everyone together at a glance. The
   --section-color and --tier-color CSS vars are set inline by the
   markup with each section's brand hue. */
.rsc-org-section-hot{
  background:color-mix(in srgb, var(--section-color, var(--ss-cyan)) 16%, transparent) !important;
  border-color:color-mix(in srgb, var(--section-color, var(--ss-cyan)) 60%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--section-color, var(--ss-cyan)) 55%, transparent),
    0 10px 30px -8px color-mix(in srgb, var(--section-color, var(--ss-cyan)) 35%, transparent);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rsc-org-tier.rsc-org-section-hot{
  background:color-mix(in srgb, var(--tier-color, var(--ss-cyan)) 8%, transparent) !important;
  border-color:color-mix(in srgb, var(--tier-color, var(--ss-cyan)) 45%, transparent) !important;
}
.rsc-org-tier.rsc-org-section-hot .rsc-org-tier-label{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tier-color, var(--ss-cyan)) 65%, transparent),
             0 4px 14px -2px color-mix(in srgb, var(--tier-color, var(--ss-cyan)) 35%, transparent);
}
/* Fallback for browsers without color-mix support — uses the cyan glow
   token as a sensible default so the highlight still reads. */
@supports not (color: color-mix(in srgb, red, blue)){
  .rsc-org-section-hot{
    background:var(--ss-cyan-glow) !important;
    border-color:var(--ss-cyan) !important;
    box-shadow:0 0 0 1px var(--ss-cyan), 0 8px 24px -8px var(--ss-cyan-glow);
  }
}

/* Search-dim: stronger than hover-fade because typing implies intent. */
.rsc-org-dim{opacity:.18;transition:opacity .18s ease}

/* Focus-my-line mode: in-line rows keep full color and get a warm
   amber halo; off-line rows fade to background. The signed-in user's
   own row gets a slightly heavier accent. */
.rsc-org-myline>.rsc-org-row-card{border-color:rgba(255,184,76,.55);box-shadow:0 0 0 1px rgba(255,184,76,.35)}
.rsc-org-offline{opacity:.28}
.rsc-org-me>.rsc-org-row-card{box-shadow:0 0 0 2px var(--ss-cyan),0 4px 12px rgba(75,163,212,.22)}

/* Toolbar "Focus my line" toggle when active */
.btn.rsc-org-focus-on{background:rgba(255,184,76,.18);color:#ffb84c;border-color:rgba(255,184,76,.45)}
.btn.rsc-org-focus-on:hover{background:rgba(255,184,76,.28)}

/* SVG dotted-edge highlight follows the same hover model. */
.rsc-org-edge-faded{opacity:.1!important;transition:opacity .18s ease}
.rsc-org-edge-related{opacity:.85!important;stroke-width:2.5!important;transition:all .18s ease}

/* Mobile — tighten gaps, shrink the indent slightly. The layout is
   already vertical so there's no horizontal-overflow problem to solve. */
@media(max-width:700px){
  .rsc-org-tree{padding:6px 8px 24px}
  .rsc-org-subtree{margin-left:12px;padding-left:14px}
  .rsc-org-subtree>.rsc-org-row::before{left:-14px;width:10px}
  .rsc-org-row-card{padding:8px 10px;gap:8px}
  .rsc-org-row-side{flex-wrap:wrap;justify-content:flex-end;max-width:120px;gap:4px}
  .rsc-org-row-preview{margin-left:24px}
}

/* ── Reports-To — Top-down tree layout ──────────────────────────────────
   Classic hierarchical chart: boss at top, children spread horizontally
   below, avatar bubble overlaps the top of each card, pastel-tinted
   cards (depth-based), clean CSS connectors. Wrapped in a pan/zoom
   canvas so big orgs fit on screen. Modeled after the reference org
   chart with a softer, dark-theme-friendly palette. */

/* The canvas frames the tree and provides a stable viewport for pan/
   zoom. The inner wrapper is what we transform. */
.rsc-org-canvas{position:relative;overflow:hidden;border:1px solid var(--border-light);border-radius:12px;background:linear-gradient(180deg,rgba(95,163,194,.025),rgba(95,163,194,0));height:78vh;min-height:520px;cursor:grab;touch-action:none}
.rsc-org-canvas.rsc-org-canvas-panning{cursor:grabbing}
.rsc-org-canvas-inner{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;padding:40px 60px 60px}

/* Roots stack horizontally if there are multiple; each root cascades
   downward. The tiered variant stacks SECTION CLUSTERS vertically so
   section structure reads as the spine of the chart (Owners on top,
   Directors below, Specialists below, etc.) — roots within a tier
   still spread horizontally as a single row. */
.rsc-org-tree-topdown{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:40px}
.rsc-org-tree-topdown.rsc-org-tree-tiered{flex-direction:column;align-items:stretch;gap:34px}

.rsc-org-tier{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;padding:14px 18px 6px;border:1px solid var(--border-light);border-radius:14px;background:linear-gradient(180deg,rgba(95,163,194,.02) 0,transparent 60%)}
.rsc-org-tier:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:-26px;width:2px;height:18px;background:rgba(95,163,194,.25);border-radius:1px}
.rsc-org-tier-label{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tier-color,var(--text-sec));padding:4px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border-light);box-shadow:0 2px 6px rgba(0,0,0,.18);align-self:center}
.rsc-org-tier-label-other{color:var(--text-dim)}
.rsc-org-tier-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.08) inset}
.rsc-org-tier-dot-muted{background:var(--text-dim)}
.rsc-org-tier-count{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-dim);font-weight:600;letter-spacing:.02em}
.rsc-org-tier-roots{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:40px;flex-wrap:wrap;width:100%}
.rsc-org-tnode{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:36px}
.rsc-org-tnode.rsc-org-troot{padding-top:0}
.rsc-org-tnode-self{position:relative;display:flex;flex-direction:column;align-items:center}

/* Card — pastel tint cycles through 6 depth levels via --depth-idx
   set inline on the node. */
.rsc-org-tree-card{
  --tint-0: rgba(190,180,225,.95);
  --tint-1: rgba(180,210,180,.95);
  --tint-2: rgba(232,218,160,.95);
  --tint-3: rgba(232,180,150,.95);
  --tint-4: rgba(170,200,225,.95);
  --tint-5: rgba(210,180,215,.95);
  --tint-cur: var(--tint-0);
  position:relative;
  width:200px;min-height:96px;
  background:var(--tint-cur);
  color:#1c2533;
  border:1px solid rgba(0,0,0,.18);
  border-left:3px solid var(--section-color,rgba(0,0,0,.18));
  border-radius:10px;
  padding:30px 12px 12px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.18) inset;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.rsc-org-tnode[style*="--depth-idx:0"] .rsc-org-tree-card{--tint-cur:var(--tint-0)}
.rsc-org-tnode[style*="--depth-idx:1"] .rsc-org-tree-card{--tint-cur:var(--tint-1)}
.rsc-org-tnode[style*="--depth-idx:2"] .rsc-org-tree-card{--tint-cur:var(--tint-2)}
.rsc-org-tnode[style*="--depth-idx:3"] .rsc-org-tree-card{--tint-cur:var(--tint-3)}
.rsc-org-tnode[style*="--depth-idx:4"] .rsc-org-tree-card{--tint-cur:var(--tint-4)}
.rsc-org-tnode[style*="--depth-idx:5"] .rsc-org-tree-card{--tint-cur:var(--tint-5)}
.rsc-org-tree-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.32),0 0 0 2px rgba(75,163,212,.45)}
.rsc-org-tnode.rsc-org-tcompact .rsc-org-tree-card{width:160px;min-height:80px;padding:24px 10px 10px}

/* Floating avatar — overlaps the top of the card. */
.rsc-org-tree-avatar{position:absolute;top:-26px;left:50%;transform:translateX(-50%);z-index:2;border-radius:50%;background:var(--card);padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.22)}
.rsc-org-tnode.rsc-org-tcompact .rsc-org-tree-avatar{top:-20px;padding:2px}

/* Card text */
.rsc-org-tree-name{font-size:13px;font-weight:700;color:#1c2533;line-height:1.2;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rsc-org-tree-title{font-size:10px;color:#4a5566;font-weight:600;margin-top:3px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rsc-org-tree-phone{font-size:9px;color:#5a6678;font-family:'JetBrains Mono',monospace;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsc-org-tnode.rsc-org-tcompact .rsc-org-tree-name{font-size:12px}
.rsc-org-tnode.rsc-org-tcompact .rsc-org-tree-title{font-size:9px}

/* Footer chips inside the card */
.rsc-org-tree-footer{display:flex;justify-content:center;gap:5px;margin-top:8px;flex-wrap:wrap;min-height:0}
.rsc-org-tree-footer:empty{display:none}
.rsc-org-tree-section{font-size:8px;font-weight:700;padding:1px 6px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rsc-org-tree-dotted{font-size:8px;color:var(--ss-cyan);font-weight:700;padding:1px 6px;background:rgba(75,163,212,.12);border:1px solid rgba(75,163,212,.3);border-radius:5px;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.rsc-org-tree-size{font-size:9px;font-weight:700;color:#1c2533;background:rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.18);padding:1px 8px;border-radius:9px;font-family:'JetBrains Mono',monospace;min-width:22px;text-align:center;font-feature-settings:'tnum','kern'}
.rsc-org-tree-size-sub{color:rgba(0,0,0,.5);font-weight:500;font-size:8px;margin-left:1px}

/* YOU chip + remove × pinned to corners */
.rsc-org-tree-me{position:absolute;top:6px;left:6px;font-size:8px;font-weight:800;color:#fff;background:var(--ss-cyan);padding:2px 6px;border-radius:5px;letter-spacing:.06em;font-family:'JetBrains Mono',monospace;z-index:2}
.rsc-org-tree-remove{position:absolute;top:4px;right:4px;background:transparent;border:none;color:rgba(0,0,0,.4);cursor:pointer;font-size:14px;padding:2px 6px;line-height:1;border-radius:4px;transition:color .12s ease,background .12s ease;opacity:0;z-index:2}
.rsc-org-tree-card:hover .rsc-org-tree-remove{opacity:1}
.rsc-org-tree-remove:hover{color:#fff;background:var(--danger)}

/* Caret pill under the card — shows "+N" when collapsed, "−" expanded */
.rsc-org-tree-caret{
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  background:var(--card);color:var(--text);border:1px solid var(--border-light);
  min-width:24px;height:22px;padding:0 8px;border-radius:11px;
  cursor:pointer;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;
  display:inline-flex;align-items:center;justify-content:center;
  z-index:3;transition:all .12s ease;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.rsc-org-tree-caret:hover{background:var(--ss-cyan);color:#fff;border-color:var(--ss-cyan)}
.rsc-org-tree-caret:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:2px}

/* Connectors — orthogonal rails via CSS pseudo-elements. The rail
   color is muted cyan so it doesn't fight the cards for attention. */
.rsc-org-tree-children{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:40px;margin-top:36px;position:relative}
/* Drop from parent bottom → rail */
.rsc-org-tnode:not(.rsc-org-tleaf) > .rsc-org-tnode-self::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:18px;background:rgba(95,163,194,.4);transform:translateX(-1px);z-index:0}
/* Horizontal rail across children row */
.rsc-org-tree-children::before{content:'';position:absolute;top:-18px;left:0;right:0;height:2px;background:rgba(95,163,194,.4)}
.rsc-org-tree-children:has(> .rsc-org-tnode:only-child)::before{display:none}
/* Drop from rail → each child top */
.rsc-org-tree-children > .rsc-org-tnode::before{content:'';position:absolute;left:50%;top:0;width:2px;height:18px;background:rgba(95,163,194,.4);transform:translateX(-1px);z-index:0}
/* Mask rail beyond outermost siblings */
.rsc-org-tree-children > .rsc-org-tnode:first-child::after,
.rsc-org-tree-children > .rsc-org-tnode:last-child::after{content:'';position:absolute;top:-18px;width:50%;height:2px;background:var(--bg);z-index:1}
.rsc-org-tree-children > .rsc-org-tnode:first-child::after{right:50%}
.rsc-org-tree-children > .rsc-org-tnode:last-child::after{left:50%}
.rsc-org-tree-children > .rsc-org-tnode:only-child::after,
.rsc-org-tree-children > .rsc-org-tnode:only-child::before{display:none}

/* Drop-target highlight while dragging onto a card */
.rsc-org-tnode-self.rsc-org-drop-target > .rsc-org-tree-card{box-shadow:0 0 0 3px var(--ss-cyan),0 0 0 6px var(--ss-cyan-glow);border-color:var(--ss-cyan)}

/* Collapsed-state avatar preview, horizontal under the card */
.rsc-org-tree-preview{display:inline-flex;align-items:center;gap:0;margin-top:14px;padding:4px 10px 4px 8px;background:rgba(95,163,194,.08);border:1px dashed rgba(95,163,194,.4);border-radius:14px;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.rsc-org-tree-preview:hover{background:rgba(95,163,194,.18);border-color:rgba(95,163,194,.7)}
.rsc-org-tree-preview-avatar{display:inline-flex;margin-left:-6px;border:2px solid var(--card);border-radius:50%}
.rsc-org-tree-preview-avatar:first-child{margin-left:0}
.rsc-org-tree-preview-more{font-size:10px;color:var(--text-dim);font-weight:700;font-family:'JetBrains Mono',monospace;padding:0 6px}

/* Focus-my-line in tree mode — same color logic as list */
.rsc-org-tnode.rsc-org-myline > .rsc-org-tnode-self > .rsc-org-tree-card{border-color:rgba(255,184,76,.85);box-shadow:0 3px 10px rgba(0,0,0,.22),0 0 0 2px rgba(255,184,76,.5)}
.rsc-org-tnode.rsc-org-offline{opacity:.22;transition:opacity .18s ease}
.rsc-org-tnode.rsc-org-me > .rsc-org-tnode-self > .rsc-org-tree-card{box-shadow:0 3px 10px rgba(0,0,0,.22),0 0 0 3px var(--ss-cyan)}

/* Hover-highlight + search dim — shared with list */
.rsc-org-tnode.rsc-org-related > .rsc-org-tnode-self > .rsc-org-tree-card{box-shadow:0 8px 24px rgba(0,0,0,.32),0 0 0 3px var(--ss-cyan)}
.rsc-org-tnode.rsc-org-faded{opacity:.4;transition:opacity .18s ease}
.rsc-org-tnode.rsc-org-dim{opacity:.18;transition:opacity .18s ease}

/* Toolbar segmented Tree / List toggle */
.rsc-org-layout-toggle{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border);border-radius:7px;padding:2px;gap:1px}
.rsc-org-layout-btn{background:transparent;border:none;color:var(--text-dim);font-size:11px;font-weight:600;padding:5px 12px;border-radius:5px;cursor:pointer;letter-spacing:.02em;transition:all .12s ease;font-family:inherit}
.rsc-org-layout-btn:hover{color:var(--text)}
.rsc-org-layout-btn.is-on{background:var(--ss-cyan);color:#fff}
.rsc-org-layout-btn:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:2px}

/* Zoom controls — pinned to bottom-right of the canvas */
.rsc-org-zoom-ctrl{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:0;background:rgba(15,22,38,.85);border:1px solid var(--border-light);border-radius:10px;padding:3px;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.36);z-index:10;font-family:inherit}
.rsc-org-zoom-ctrl button{background:transparent;border:none;color:var(--text);width:30px;height:28px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;padding:0}
.rsc-org-zoom-ctrl button:hover{background:var(--ss-cyan);color:#fff}
.rsc-org-zoom-ctrl button:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:1px}
.rsc-org-zoom-pct{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-weight:700;padding:0 6px;min-width:36px;text-align:center;letter-spacing:.04em}
.rsc-org-zoom-sep{width:1px;height:18px;background:var(--border);margin:0 4px}

/* Mobile: hide tree-mode controls — _rscRenderReportsChart forces
   list layout under 760px so the canvas/zoom UI won't even render. */

/* ── Dashboard v2 — Hero / Critical / Map / Feed / Leaderboard ─────────── */

/* Hero strip — personalized greeting + day-pulse + next-up + actions */
.dash-hero{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;padding:18px 22px;background:linear-gradient(135deg,rgba(75,163,212,.08),rgba(75,163,212,.02) 60%,transparent);border:1px solid var(--border-light);border-radius:14px;margin-bottom:16px;position:relative;overflow:hidden}
.dash-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at top right,rgba(95,163,194,.08),transparent);pointer-events:none}
.dash-hero-main{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.dash-hero-greet-line{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--white);letter-spacing:-.015em;line-height:1.1}
.dash-hero-name{color:var(--ss-cyan)}
.dash-hero-pulse{font-size:12px;color:var(--text-sec);font-weight:500;margin-top:4px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
/* Client (Easter-egg) themes paint the dash-hero on top of a photo /
   composite background. The default text colour comes from --white,
   which is light on the dark variants but DARK on the *Day variants;
   either way some image regions blow out the contrast. Force white +
   a dark halo so the greeting + pulse always read regardless of what
   pixels are behind. */
[data-theme="nasa"] .dash-hero-greet-line,
[data-theme="nasaDay"] .dash-hero-greet-line,
[data-theme="exxon"] .dash-hero-greet-line,
[data-theme="exxonDay"] .dash-hero-greet-line,
[data-theme="pge"] .dash-hero-greet-line,
[data-theme="pgeDay"] .dash-hero-greet-line{
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.45);
}
[data-theme="nasa"] .dash-hero-pulse,
[data-theme="nasaDay"] .dash-hero-pulse,
[data-theme="exxon"] .dash-hero-pulse,
[data-theme="exxonDay"] .dash-hero-pulse,
[data-theme="pge"] .dash-hero-pulse,
[data-theme="pgeDay"] .dash-hero-pulse{
  color:#e8edf5;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
/* Keep the accent colour on the user's name but back it with the same
   halo so it never disappears into a bright cloud or sunset. */
[data-theme="nasa"] .dash-hero-name,
[data-theme="nasaDay"] .dash-hero-name,
[data-theme="exxon"] .dash-hero-name,
[data-theme="exxonDay"] .dash-hero-name,
[data-theme="pge"] .dash-hero-name,
[data-theme="pgeDay"] .dash-hero-name{
  text-shadow:0 2px 6px rgba(0,0,0,.75);
}
.dash-hero-next{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(15,22,38,.6);border:1px solid var(--border-light);border-radius:10px;cursor:pointer;transition:background .15s ease,border-color .15s ease;max-width:520px}
.dash-hero-next:hover{background:rgba(15,22,38,.85);border-color:rgba(95,163,194,.4)}
.dash-hero-next-glyph{font-size:18px;flex-shrink:0;line-height:1}
.dash-hero-next-meta{flex:1;min-width:0}
.dash-hero-next-label{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--text-dim);margin-bottom:3px}
.dash-hero-next-title{font-size:14px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-hero-next-sub{font-size:11px;color:var(--text-dim);margin-top:2px}
.dash-hero-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}

/* Critical-action card row */
.dash-critical{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.dash-card{position:relative;background:var(--card);border:1px solid var(--border-light);border-radius:10px;padding:12px 14px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.dash-card:hover{transform:translateY(-1px);border-color:rgba(95,163,194,.35);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.dash-card-num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:var(--white);letter-spacing:-.025em;line-height:1;font-feature-settings:'tnum'}
.dash-card-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:6px}
.dash-card-sub{font-size:10px;color:var(--text-sec);margin-top:4px;font-family:'JetBrains Mono',monospace}
.dash-card.kpi-warn{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.04)}
.dash-card.kpi-warn .dash-card-num{color:#ef4444}
.dash-card-preview-flag{position:absolute;top:6px;right:6px;font-size:8px;font-weight:800;color:#a78bfa;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4);padding:1px 5px;border-radius:4px;letter-spacing:.06em}

/* 2-col rows for map/feed + leaderboard/streaks */
.dash-row{margin-bottom:16px}
.dash-row-2col{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;align-items:stretch}
.dash-card-block{height:100%;display:flex;flex-direction:column}
.dash-card-block > div:last-child{flex:1}

/* Activity feed rows */
.dash-feed-row{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-light);transition:background .12s ease}
.dash-feed-row:last-child{border-bottom:none}
.dash-feed-row:hover{background:rgba(95,163,194,.04)}
.dash-feed-body{flex:1;min-width:0}
.dash-feed-line{font-size:12px;color:var(--text-sec);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dash-feed-line strong{color:var(--white);font-weight:700}
.dash-feed-time{font-size:10px;color:var(--text-dim);margin-top:3px;font-family:'JetBrains Mono',monospace}

/* Leaderboard */
.dash-lb-row{display:grid;grid-template-columns:24px 1fr 100px 36px;gap:10px;align-items:center;padding:6px 14px;font-size:12px}
.dash-lb-rank{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--ss-cyan);text-align:center}
.dash-lb-name{color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-lb-bar{height:8px;background:var(--bg-deep);border-radius:4px;overflow:hidden}
.dash-lb-bar-fill{height:100%;background:linear-gradient(90deg,var(--ss-navy),var(--ss-cyan));border-radius:4px;transition:width .4s ease}
.dash-lb-count{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--white);text-align:right;font-size:11px}

/* Streaks */
.dash-streak-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:6px 14px;font-size:12px}
.dash-streak-flame{font-size:14px;text-align:center}
.dash-streak-name{color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-streak-count{font-family:'JetBrains Mono',monospace;font-weight:700;color:#f59e0b;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);padding:2px 7px;border-radius:8px;font-size:10px;letter-spacing:.04em}

@media(max-width:900px){
  .dash-row-2col{grid-template-columns:1fr}
  .dash-hero{padding:14px 16px}
  .dash-hero-greet-line{font-size:22px}
  .dash-hero-next{max-width:none}
}

/* Map filter chips + timeline */
.dash-map-filter{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:7px;padding:2px;gap:1px}
.dash-map-filter button{background:transparent;border:none;color:var(--text-dim);font-size:10px;font-weight:600;padding:4px 10px;border-radius:5px;cursor:pointer;font-family:inherit;transition:all .12s ease}
.dash-map-filter button:hover{color:var(--text)}
.dash-map-filter button.is-on{background:var(--ss-cyan);color:#fff}

.dash-map-timeline{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:7px}
.dash-map-timeline input[type=range]{flex:1;accent-color:var(--ss-cyan)}

.dash-feed-newpill{align-self:flex-end;background:var(--ss-cyan);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:11px;margin:0 14px 6px;animation:pulse-pill 1.4s ease-in-out infinite}
@keyframes pulse-pill{0%,100%{opacity:1}50%{opacity:.55}}

/* Team Board card — Twitter/Threads-style. Composer pinned at top,
   feed underneath. Each post is avatar-on-left, content-stack-on-right
   so the conversation reads like a real social channel. */
.tp-board{padding-bottom:0}
.tp-board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.tp-board-title{display:flex;flex-direction:column;gap:2px}
.tp-board-title > span:first-child{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--white);letter-spacing:-.01em}
.tp-board-tagline{font-size:10px;color:var(--text-dim);font-weight:500;letter-spacing:.02em;text-transform:none}

.tp-board-composer{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-light);background:linear-gradient(180deg,rgba(75,163,212,.03),transparent)}
/* align-self:flex-start keeps the wrapper sized to the child avatar.
   Without it the flex parent's default align-items:stretch makes the
   wrapper taller than wide and border-radius:50% turns it into an
   ellipse. line-height:0 collapses any phantom inline-baseline space
   that browsers add around inline images / SVGs. */
.tp-composer-avatar{flex-shrink:0;align-self:flex-start;border-radius:50%;overflow:hidden;border:2px solid var(--border-light);line-height:0}
.tp-composer-form{flex:1;min-width:0}
/* Textarea is the message field — give it a visible border + bg so
   users don't mistake the placeholder for static text and start
   typing into the smaller Image URL input below. */
.tp-composer-textarea{width:100%;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;color:var(--white);font-size:14px;font-family:inherit;line-height:1.5;outline:none;resize:none;padding:9px 12px;min-height:42px;max-height:160px;overflow-y:auto;transition:border-color .12s ease,box-shadow .12s ease}
.tp-composer-textarea::placeholder{color:var(--text-dim)}
.tp-composer-textarea:hover{border-color:rgba(95,163,194,.4)}
.tp-composer-textarea:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}
.tp-composer-row{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.tp-composer-image{flex:1;min-width:160px;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:6px;color:var(--white);font-size:11px;padding:6px 10px;outline:none}
.tp-composer-image:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}

.tp-board-list{padding:0;max-height:520px;overflow-y:auto}

/* Individual post — avatar left, content right. */
.tp-post{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);transition:background .12s ease}
.tp-post:last-child{border-bottom:none}
.tp-post:hover{background:rgba(95,163,194,.03)}
.tp-post-avatar-lg{flex-shrink:0;cursor:pointer;border-radius:50%;overflow:hidden;border:2px solid var(--border-light);transition:border-color .15s ease,transform .15s ease;align-self:flex-start;line-height:0}
.tp-post-avatar-lg:hover{border-color:var(--ss-cyan);transform:scale(1.04)}
.tp-post-col{flex:1;min-width:0;display:flex;flex-direction:column}
.tp-post-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.tp-post-author-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.tp-post-author{font-size:13px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .12s ease}
.tp-post-author:hover{color:var(--ss-cyan);text-decoration:underline}
.tp-post-dot{color:var(--text-dim);font-weight:700}
.tp-post-time{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.tp-post-delete{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:0 4px;opacity:0;transition:opacity .12s ease,color .12s ease;flex-shrink:0}
.tp-post:hover .tp-post-delete{opacity:.55}
.tp-post-delete:hover{opacity:1!important;color:var(--danger)}
/* color carries an explicit hex fallback so themes that don't define
   --text still surface the post body clearly. min-height keeps the
   div visible (catches an empty content render so we never silently
   eat a post). */
.tp-post-body{font-size:13.5px;color:var(--text,#d0d4e4);line-height:1.5;margin:2px 0 8px;white-space:pre-wrap;word-wrap:break-word;letter-spacing:-.005em;min-height:1.4em;display:block}
.tp-post-body:empty::before{content:'(no text in this post)';font-style:italic;color:var(--text-dim);font-size:12px}
.tp-post-image-wrap{display:block;margin:6px 0 8px}
.tp-post-image{max-width:100%;max-height:380px;border-radius:10px;border:1px solid var(--border-light);object-fit:cover;display:block}

.tp-post-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.tp-react-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tp-react-btn{background:transparent;border:1px solid transparent;color:var(--text-sec);font-size:15px;padding:3px 7px;border-radius:14px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:inherit;transition:all .12s ease;line-height:1}
.tp-react-btn:hover{background:var(--bg-deep);border-color:var(--border-light);transform:scale(1.08)}
.tp-react-btn.is-mine{background:rgba(75,163,212,.18);border-color:var(--ss-cyan)}
.tp-react-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-sec);font-weight:700;margin-left:1px}
.tp-react-btn.is-mine .tp-react-count{color:var(--ss-cyan)}
.tp-react-total{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-weight:600;padding:0 6px;margin-right:auto}
.tp-replies-toggle{background:transparent;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:5px 10px;border-radius:6px;font-family:inherit;margin-left:auto;font-weight:600}
.tp-replies-toggle:hover{color:var(--ss-cyan);background:rgba(95,163,194,.08)}

.tp-replies{padding:8px 0 4px 0;border-top:1px dashed var(--border-light);margin-top:10px}
.tp-reply{display:flex;gap:8px;padding:6px 0}
.tp-reply-avatar{cursor:pointer;flex-shrink:0;align-self:flex-start;border-radius:50%;overflow:hidden;line-height:0}
.tp-reply-avatar:hover{transform:scale(1.05)}
.tp-reply-body{flex:1;min-width:0;font-size:12px}
.tp-reply-body strong{color:var(--white);font-weight:700;cursor:pointer}
.tp-reply-body strong:hover{color:var(--ss-cyan)}
.tp-reply-composer{display:flex;gap:6px;align-items:center;margin-top:8px;padding-top:4px}

/* Inline composer block used in the full modal (different from the
   always-on dashboard composer). */
.tp-composer textarea{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;color:var(--white);font-size:12.5px;padding:8px 10px;line-height:1.45;outline:none;transition:border-color .12s ease}
.tp-composer textarea:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}

@media(max-width:700px){
  .tp-post{padding:10px 12px;gap:10px}
  .tp-post-body{font-size:13px}
  .tp-board-composer{padding:10px 12px;gap:10px}
}

/* Composer audience row */
.tp-composer-notify-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.tp-audience-label{font-size:11px;color:var(--text-dim);font-weight:600;letter-spacing:.02em}
.tp-audience-pick{background:transparent;border:1px solid var(--border-light);color:var(--text-sec);font-size:11px;font-weight:600;padding:4px 12px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .12s ease}
.tp-audience-pick:hover{border-color:var(--ss-cyan);color:var(--ss-cyan)}

/* Audience picker modes (radio cards) */
.tp-aud-modes{display:flex;flex-direction:column;gap:6px}
.tp-aud-mode{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-light);border-radius:8px;cursor:pointer;background:var(--card);transition:all .12s ease}
.tp-aud-mode:hover{border-color:rgba(95,163,194,.4);background:var(--card-hover)}
.tp-aud-mode.is-on{border-color:var(--ss-cyan);background:rgba(75,163,212,.06)}
.tp-aud-mode input{margin:0;accent-color:var(--ss-cyan);cursor:pointer}
.tp-aud-mode-text{display:flex;flex-direction:column;gap:1px}
.tp-aud-mode-title{font-size:12px;font-weight:700;color:var(--white)}
.tp-aud-mode-desc{font-size:10px;color:var(--text-dim);font-weight:500}

/* Section rows inside the picker (custom mode) */
.tp-aud-sections{display:flex;flex-direction:column;gap:4px}
.tp-aud-section-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border-light);border-radius:6px;cursor:pointer;background:var(--card);font-size:11.5px;transition:all .12s ease}
.tp-aud-section-row:hover{border-color:rgba(95,163,194,.4)}
.tp-aud-section-row input{margin:0;accent-color:var(--ss-cyan);cursor:pointer}
.tp-aud-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tp-aud-section-name{font-weight:700;color:var(--white);flex:1}
.tp-aud-section-meta{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.tp-aud-people{background:var(--card);border:1px solid var(--border-light);border-radius:8px;padding:8px;margin-top:4px}

/* Section quick-pick chips */
.tp-section-chip{background:transparent;border:1px solid var(--border-light);color:var(--text-sec);font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;cursor:pointer;font-family:inherit;transition:all .12s ease;display:inline-flex;align-items:center;gap:5px}
.tp-section-chip::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ss-cyan))}
.tp-section-chip:hover{border-color:var(--c,var(--ss-cyan));color:var(--white)}
.tp-section-chip.is-on{background:rgba(75,163,212,.15);border-color:var(--c,var(--ss-cyan));color:var(--white)}

/* Selected-mention chips inside the picker */
.tp-mention-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(75,163,212,.18);border:1px solid var(--ss-cyan);color:var(--ss-cyan);font-size:11px;font-weight:600;padding:2px 8px;border-radius:11px}
.tp-mention-chip button{background:transparent;border:none;color:var(--ss-cyan);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.tp-mention-chip button:hover{color:var(--white)}

/* ── Sidebar groups (sections with placement="side") ────────────────────
   Renders as a fixed-width right column alongside the main chart. The
   sidebar is OUTSIDE the pan/zoom canvas so it stays put while the
   chart pans. On narrow screens the layout collapses to single column
   and the sidebar stacks below the chart. */
.rsc-org-with-sidebar{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:flex-start}
.rsc-org-with-sidebar .rsc-org-main{min-width:0}
.rsc-org-sidebar{position:sticky;top:8px;max-height:calc(78vh + 4px);overflow-y:auto;padding-right:2px}
.rsc-org-sidebar > div{display:flex;flex-direction:column;gap:10px}

/* Compact, side-stacked card list inside each sidebar group. */
.rsc-org-sidebar .rsc-org-section-member{font-size:11px}

@media(max-width:900px){
  .rsc-org-with-sidebar{grid-template-columns:1fr}
  .rsc-org-sidebar{position:static;max-height:none;margin-top:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH PASS — applies on top of every theme. Targets the surfaces users
   touch most: stat cards, buttons, inputs, nav active state, modals,
   tables. The goal is "quieter, more confident" — fewer neon glows,
   lighter borders, tighter typography, real focus indicators.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat cards: confident number, very light border, subtle hover lift.
   The default was a slightly bulky outlined box; this drops the border
   to barely-there and adds a soft cyan accent on hover instead. */
.stat-card{border-color:var(--border-light);transition:transform var(--tr),background var(--tr),border-color var(--tr),box-shadow var(--tr)}
.stat-card:hover{transform:translateY(-1px);background:var(--card-hover);border-color:rgba(75,163,212,.18)}
.stat-num{font-feature-settings:'tnum','kern';font-size:32px;letter-spacing:-.025em}
.stat-label{font-size:9px;letter-spacing:.14em;color:var(--text-dim)}

/* Buttons: real focus ring (keyboard nav was unreadable before),
   subtle hover transform, primary button gets a softer shadow.
   The :focus-visible pseudo only applies for keyboard focus, so the
   cyan ring doesn't appear on mouse-click activation. */
.btn{transition:transform .15s ease,background var(--tr),border-color var(--tr),box-shadow var(--tr),color var(--tr)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:2px;border-radius:var(--radius)}
.btn-primary{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.btn-primary:hover{box-shadow:0 4px 12px rgba(75,163,212,.22)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Form inputs: subtle focus ring instead of the browser default.
   Already-existing rule .form-input:focus only changed border color;
   we add a slim cyan glow so the focused field is clearly visible. */
.form-input:focus,.form-select:focus,textarea.form-input:focus{box-shadow:0 0 0 3px var(--ss-cyan-glow)}

/* Nav active state: cleaner indicator — keep the underline but soften
   the colored text so the focus is on the indicator line, not the chrome. */
.nav-tab.active{font-weight:600}
.nav-tab{transition:color var(--tr),border-color var(--tr),background var(--tr)}
.nav-tab:not(.active):hover{color:var(--text)}

/* Card body density: pull cards a hair closer together vertically; the
   default 14px stack felt loose once stat-cards started hovering. */
.card+.card{margin-top:12px}

/* Modal: nicer overlay treatment, more lift on the content. */
.modal-overlay{backdrop-filter:blur(4px)}
.modal-content{box-shadow:var(--shadow-lg),0 1px 0 rgba(255,255,255,.04) inset}

/* Tables: lighter borders, clearer header. */
table thead th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
table tbody tr{transition:background var(--tr)}
table tbody tr:hover{background:rgba(75,163,212,.05)}

/* Better number rendering everywhere numbers matter. */
.stat-num,.tag,.notif-badge,.topbar-user-role,td[style*="JetBrains Mono"]{font-feature-settings:'tnum','kern'}

/* Refined theme — pull the polish even further. Slightly larger numbers,
   no glow on stat cards, hairline borders. */
[data-theme="refined"] .stat-card{background:rgba(20,28,46,.5);border-color:rgba(95,163,194,.08)}
[data-theme="refined"] .stat-card:hover{border-color:rgba(95,163,194,.20);background:rgba(24,36,62,.65)}
[data-theme="refined"] .card{box-shadow:0 1px 3px rgba(0,0,0,.18)}
[data-theme="refined"] .btn-primary{background:var(--ss-cyan);border-color:var(--ss-cyan);color:#fff}
[data-theme="refined"] .btn-primary:hover{background:#76b3cd}
[data-theme="refined"] .topbar{background:rgba(10,16,32,.92);border-bottom:1px solid rgba(95,163,194,.08)}

/* X-Trace: badge pulse when there are unacknowledged assignments —
   pulls focus to the bell so an incoming work alert can't be missed.
   Banner slide is a gentle one-shot when the banner first appears. */
@keyframes xtBadgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.65) }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0) }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0) }
}
@keyframes xtBannerSlide {
  from { transform: translateY(-100%); opacity: 0 }
  to   { transform: translateY(0); opacity: 1 }
}

/* Mobile touch targets — make sure buttons + nav items meet the 44px
   recommendation. Padding bumps only kick in below 700px. */
@media(max-width:700px){
  .btn{padding:10px 16px;min-height:40px}
  .btn-sm{padding:8px 12px;min-height:36px}
  .nav-tab{min-height:44px;display:flex;align-items:center}
  .nav-more-item{padding:14px 18px}
  .form-input,.form-select,textarea.form-input{padding:10px 12px;font-size:14px} /* 14px prevents iOS auto-zoom */
}

/* ── Calendar > Allocation view ─────────────────────────────────────────
   Resource Guru / Float-style timeline: people as rows, days as columns,
   allocation chips on top of an optional heatmap-tinted utilization
   background. Right side panel hosts pending approvals + quick actions.
   Sticky person-card column + sticky day header so big teams scroll
   without losing context. */
.ss-alloc-wrap{display:flex;flex-direction:column;gap:10px}
.ss-alloc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 4px 4px}
.ss-alloc-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ss-alloc-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Range segmented toggle */
.ss-alloc-range{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:7px;padding:2px;gap:1px}
.ss-alloc-range button{background:transparent;border:none;color:var(--text-dim);font-size:11px;font-weight:600;padding:5px 12px;border-radius:5px;cursor:pointer;letter-spacing:.02em;transition:all .12s ease;font-family:inherit}
.ss-alloc-range button:hover{color:var(--text)}
.ss-alloc-range button.is-on{background:var(--ss-cyan);color:#fff}

/* Prev / Today / Next nav */
.ss-alloc-nav{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:7px;padding:2px;gap:1px}
.ss-alloc-nav button{background:transparent;border:none;color:var(--text);font-size:11px;font-weight:600;padding:5px 10px;border-radius:5px;cursor:pointer;font-family:inherit;transition:background .12s ease}
.ss-alloc-nav button:hover{background:var(--card-hover)}
.ss-alloc-today-btn{font-weight:700!important}

.ss-alloc-range-label{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--white);letter-spacing:-.01em}

/* Heatmap checkbox + filter input */
.ss-alloc-heat-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-dim);cursor:pointer;user-select:none}
.ss-alloc-heat-toggle input{margin:0;cursor:pointer;accent-color:var(--ss-cyan)}
.ss-alloc-filter{padding:6px 10px;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:6px;color:var(--white);font-size:11px;outline:none;width:200px}
.ss-alloc-filter:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 3px var(--ss-cyan-glow)}

/* Body: grid on the left + side panel on the right */
.ss-alloc-body{display:grid;grid-template-columns:1fr 280px;gap:12px;align-items:flex-start}
.ss-alloc-grid{background:var(--card);border:1px solid var(--border-light);border-radius:10px;overflow:hidden;min-width:0}

/* Header row: sticky on vertical scroll so the day labels stay put. */
.ss-alloc-grid-head{display:grid;background:var(--bg-deep);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:5}
.ss-alloc-corner{padding:10px 12px;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);border-right:1px solid var(--border-light);display:flex;align-items:center}
.ss-alloc-col-head{padding:6px 2px;text-align:center;border-right:1px solid var(--border-light);display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;min-height:42px;cursor:pointer;transition:background .12s ease;min-width:0}
.ss-alloc-col-head:hover{background:rgba(95,163,194,.08)}
.ss-alloc-col-head:focus-visible{outline:2px solid var(--ss-cyan);outline-offset:-2px}
.ss-alloc-col-head:last-child{border-right:none}
.ss-alloc-col-head.is-week-start{border-left:1px solid rgba(95,163,194,.3)}
.ss-alloc-col-head.is-weekend{background:rgba(95,163,194,.04)}
.ss-alloc-col-head.is-today{background:var(--ss-cyan);color:#fff}
.ss-alloc-col-head.is-today:hover{background:var(--ss-cyan);filter:brightness(1.08)}
.ss-alloc-col-head.is-today .ss-alloc-col-dow,.ss-alloc-col-head.is-today .ss-alloc-col-dom{color:#fff}
.ss-alloc-col-dow{min-height:1em}
.ss-alloc-col-dow{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.08em;font-family:'JetBrains Mono',monospace}
.ss-alloc-col-dom{font-size:14px;font-weight:700;color:var(--white);font-feature-settings:'tnum'}

.ss-alloc-rows{max-height:72vh;overflow-y:auto;overflow-x:hidden}
.ss-alloc-row{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--border-light);transition:background .12s ease}
.ss-alloc-row:last-child{border-bottom:none}
.ss-alloc-row:hover{background:rgba(95,163,194,.03)}
/* DOM filter hide — driven by setCalendarAllocationFilter without a
   full re-render so input focus survives every keystroke. */
.ss-alloc-row.is-hidden{display:none}

/* Person card column. Sticky-left so it stays put on horizontal scroll
   when the grid overflows on very wide month-view. */
.ss-alloc-row-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-right:1px solid var(--border-light);background:var(--card);cursor:pointer;transition:background .12s ease;min-width:0}
.ss-alloc-row-head:hover{background:var(--card-hover)}
.ss-alloc-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--ss-navy),var(--ss-cyan));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}
.ss-alloc-row-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.ss-alloc-row-name{font-size:12px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-alloc-row-sub{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.ss-alloc-cap{font-weight:700}
.ss-alloc-brk-ok{font-size:8px;padding:1px 5px;background:rgba(6,182,212,.15);border:1px solid var(--ss-cyan);color:var(--ss-cyan);border-radius:8px;font-weight:700;letter-spacing:.04em}

/* Day cells. Slim cells are background only — the colored bars overlay
   on top via .ss-alloc-bar-layer (absolute position relative to the
   row's cells container). grid-template-columns is set inline because
   the column count is data-driven (7 / 14 / 28). */
.ss-alloc-row-cells{display:grid;gap:0}
.ss-alloc-cell{position:relative;border-right:1px solid var(--border-light);min-height:42px;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;transition:background .12s ease;z-index:1}
.ss-alloc-cell:last-child{border-right:none}
.ss-alloc-cell.is-week-start{border-left:1px solid rgba(95,163,194,.25)}
.ss-alloc-cell.is-weekend{background:rgba(95,163,194,.025)}
.ss-alloc-cell.is-today{background:rgba(75,163,212,.08)!important;box-shadow:inset 0 1px 0 var(--ss-cyan),inset 0 -1px 0 var(--ss-cyan)}
.ss-alloc-cell.is-out-of-range{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(255,255,255,.015) 4px 8px)}
.ss-alloc-cell.is-timeoff{background:rgba(94,84,109,.08)}
.ss-alloc-cell:hover{filter:brightness(1.18)}

/* Single status badge inside time-off cells (PTO / sick / etc.) — keeps
   reading "off" without drawing a project bar. */
.ss-alloc-status-badge{font-size:8px;font-weight:800;padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;margin-top:3px;line-height:1.1}

/* Allocation bar overlay. Bars are absolutely positioned relative to
   the row's cells container (which is position:relative inline). Each
   bar's left/width is computed as a percentage of the daysShown span,
   so a 5-day project shows as one continuous block instead of five
   single-letter chips. */
.ss-alloc-bar-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.ss-alloc-bar{position:absolute;height:14px;padding:0 6px;border-radius:7px;border:1px solid transparent;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em;display:flex;align-items:center;overflow:hidden;cursor:pointer;pointer-events:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:filter .12s ease,transform .12s ease}
.ss-alloc-bar:hover{filter:brightness(1.12);transform:translateY(-1px)}
.ss-alloc-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.25)}

/* Break-in pills sit above the bars at the bottom of the row. */
.ss-alloc-brk-pill{position:absolute;bottom:1px;height:14px;background:rgba(245,158,11,.85);border:1px solid #f59e0b;color:#1a1300;border-radius:4px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:3}

/* "X proj" pill in the row header */
.ss-alloc-proj-count{font-size:8px;padding:1px 6px;background:rgba(95,163,194,.15);border:1px solid rgba(95,163,194,.4);color:var(--ss-cyan);border-radius:8px;font-weight:700;letter-spacing:.04em;font-family:'JetBrains Mono',monospace}

.ss-alloc-empty{padding:32px;text-align:center;color:var(--text-dim);font-size:12px}

/* Right side panel — pending approvals + quick actions */
.ss-alloc-side{display:flex;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--border-light);border-radius:10px;position:sticky;top:8px;max-height:78vh;overflow-y:auto}
.ss-alloc-side-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border-light)}
.ss-alloc-side-count{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.5);color:#fbbf24;font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 7px;border-radius:9px;letter-spacing:.04em}
.ss-alloc-side-empty{padding:14px 12px;font-size:11px;color:var(--text-dim);font-style:italic;text-align:center}
.ss-alloc-pending-row{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border-light)}
.ss-alloc-pending-row:last-child{border-bottom:none}
.ss-alloc-pending-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ss-alloc-pending-name{font-size:11px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-alloc-pending-detail{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.ss-alloc-pending-notes{font-size:10px;color:var(--text-sec);font-style:italic;line-height:1.35;margin-top:2px}
.ss-alloc-pending-actions{display:flex;gap:4px;flex-shrink:0}
.ss-alloc-pending-yes,.ss-alloc-pending-no{width:24px;height:24px;border-radius:6px;border:1px solid var(--border-light);background:transparent;font-size:13px;font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .12s ease}
.ss-alloc-pending-yes{color:#22c55e}
.ss-alloc-pending-no{color:#ef4444}
.ss-alloc-pending-yes:hover{background:#22c55e;color:#fff;border-color:#22c55e}
.ss-alloc-pending-no:hover{background:#ef4444;color:#fff;border-color:#ef4444}

/* Mobile fallback — stack the side panel under the grid, drop the
   sticky person column padding so cells get more room. */
@media(max-width:900px){
  .ss-alloc-body{grid-template-columns:1fr}
  .ss-alloc-side{position:static;max-height:none}
  .ss-alloc-row{grid-template-columns:140px 1fr}
  .ss-alloc-row-head{padding:8px}
  .ss-alloc-avatar{width:26px;height:26px;font-size:10px}
  .ss-alloc-row-name{font-size:11px}
  .ss-alloc-row-sub{font-size:9px}
  .ss-alloc-filter{width:140px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TECHNO-FUTURIST POLISH LAYER  (2026-06)
   Glow accents, monospace numerics, sharper active states. Layered at the
   bottom of the stylesheet so it overrides earlier rules without rewriting
   them and so it stays straightforward to revert.
   All effects are subtle on touch devices and clamped for mobile so they
   don't fight the field-tech phone experience.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Active nav tabs: cyan underline glow. The existing border-color stays;
   we just add a soft underline shadow so the active surface feels lit. */
.nav-tab.active{
  box-shadow:0 2px 0 -1px var(--ss-cyan), 0 6px 18px -6px var(--ss-cyan-glow);
}
.nav-tab{position:relative}
.nav-tab.active::after{
  content:'';position:absolute;left:18px;right:18px;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--ss-cyan),transparent);
  filter:blur(1px);opacity:.75;pointer-events:none;
}

/* Primary buttons: subtle cyan halo on hover. Keeps the flat brand look at
   rest, gains depth on intent. */
.btn-primary:hover{
  box-shadow:0 0 0 1px var(--ss-cyan), 0 6px 22px -6px var(--ss-cyan-glow);
}
.btn-primary:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--ss-cyan-glow), 0 0 0 1px var(--ss-cyan);
}

/* Tabular figures for any numeric display in monospace. Prevents counter
   wobble when KPI numbers animate. */
.kpi-num, .stat-num, .ts-grid input[type="number"], .ts-grid .ts-total, .dash-num{
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* Card-level hover glow for clickable surfaces. Opt-in: add `glow-on-hover`
   to any .card or generic surface you want to feel interactive. */
.glow-on-hover{transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)}
.glow-on-hover:hover{
  border-color:var(--ss-cyan);
  box-shadow:0 0 0 1px var(--ss-cyan-glow), 0 10px 36px -12px var(--ss-cyan-glow);
}

/* Section headings: tighter mono treatment when used inside the dashboard
   strip. Keep `.section-mono` opt-in so existing headers don't shift. */
.section-mono{
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:700;
  color:var(--text-dim);
}

/* Sparkline strip used by the dashboard KPI cards. The canvas inside is
   painted by renderSparkline() in uiPolish.js (raw 2d ctx — no Chart.js). */
.kpi-spark{
  height:32px;margin-top:8px;width:100%;
  border-top:1px dashed var(--border-light);padding-top:4px;
}
.kpi-spark canvas{width:100%;height:28px;display:block}

/* ── Skeleton loaders ───────────────────────────────────────────────────
   Drop-in shimmering placeholders for any async area. Class `.skel` is
   the base block; .skel-card / .skel-row are containers that match the
   real components' outer chrome so the layout doesn't jump when content
   arrives. */
.skel{
  background:linear-gradient(
    90deg,
    var(--bg-deep) 0%,
    var(--card-hover) 50%,
    var(--bg-deep) 100%
  );
  background-size:200% 100%;
  animation:skelShimmer 1.2s ease-in-out infinite;
  border-radius:4px;
}
.skel-card{position:relative;overflow:hidden}
.skel-row{position:relative;overflow:hidden;border-bottom:1px solid var(--border-light)}
@keyframes skelShimmer{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}
@media (prefers-reduced-motion: reduce){
  .skel{animation-duration:2.4s}
  @keyframes cmdkScaleIn{from{opacity:0}to{opacity:1}}
}

/* ── View Transitions ───────────────────────────────────────────────────
   The default UA cross-fade is fine for content swaps, but it animates
   the whole DOM including the nav, which causes the active tab indicator
   to flash. We assign distinct view-transition-names so the nav bar
   keeps its identity across switches and only the content area morphs. */
@supports (view-transition-name: any) {
  .topbar     { view-transition-name: ssTopbar }
  .nav-bar    { view-transition-name: ssNavBar }
  .main-scroll{ view-transition-name: ssMain }
  /* Default UA transition: a smooth 200ms cross-fade */
  ::view-transition-old(ssMain),
  ::view-transition-new(ssMain){
    animation-duration: .22s;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }
  ::view-transition-old(ssTopbar),
  ::view-transition-new(ssTopbar),
  ::view-transition-old(ssNavBar),
  ::view-transition-new(ssNavBar){
    /* Skip chrome — keeps nav stable visually */
    animation: none;
  }
}

/* ── Bespoke empty-state component ──────────────────────────────────────
   Drop a .empty-state into a card body in place of "No data". The hero
   icon is intentionally a thin-stroked SVG to read at a glance without
   feeling cartoony. */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:42px 24px;color:var(--text-dim);
}
.empty-state .empty-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg, var(--card), var(--bg-deep));
  border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;
  color:var(--ss-cyan);
  box-shadow:0 0 0 1px var(--ss-cyan-glow), 0 12px 32px -16px var(--ss-cyan-glow);
}
.empty-state .empty-title{
  font-size:14px;font-weight:600;color:var(--text-sec);margin-top:6px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
}
.empty-state .empty-sub{
  font-size:12px;color:var(--text-dim);max-width:340px;line-height:1.5;
}
.empty-state .empty-cta{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ── Delight bundle: reveal-on-scroll + magnetic + hover previews ──── */

/* Reveal-on-scroll for cards. Initial state is slightly down and
   transparent; intersection observer adds .dl-revealed once they enter
   the viewport. Stagger delays are set inline by js/delight.js. */
.dl-reveal{
  opacity:0;transform:translateY(8px);
  transition:opacity .42s cubic-bezier(.2,.8,.2,1),
             transform .42s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.dl-revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .dl-reveal,.dl-revealed{opacity:1 !important;transform:none !important;transition:none}
}

/* Magnetic primary CTAs. The transform is set inline by the move handler;
   the transition handles the snap-back on leave. */
.dl-magnetic{transition:transform .22s cubic-bezier(.2,.8,.2,1), background var(--tr), box-shadow var(--tr)}

/* Hover preview floating card */
.dl-hover{
  position:fixed;display:none;z-index:9300;
  width:280px;max-width:90vw;
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow);
  padding:12px 14px;
  animation:dlHoverIn .14s ease-out;
  pointer-events:none;
}
.dl-hover-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border-light);
}
.dl-hover-kind{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.12em;color:var(--ss-cyan);
  padding:2px 6px;border:1px solid var(--ss-cyan-glow);border-radius:4px;
  background:var(--ss-cyan-glow);
}
.dl-hover-head strong{color:var(--white);font-size:13px;font-weight:600}
.dl-hover-body{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-sec)}
.dl-hover-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.dl-hover-row span{color:var(--text-dim);font-size:10px}
.dl-hover-row strong{color:var(--white);font-weight:600;font-size:11px}
.dl-hover-row code{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-sec);
  background:var(--bg-deep);padding:2px 6px;border-radius:3px;
}
@keyframes dlHoverIn{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1;transform:translateY(0)}
}
@media(hover:none){
  /* Touch devices don't have a real hover; suppress the preview to
     avoid sticky popups after a tap. The tap itself still triggers the
     underlying onclick (profile modal, etc.) just as before. */
  .dl-hover{display:none !important}
}

/* ── Mobile Pulse: pull-to-refresh + bottom-sheet modals + trending ── */

/* Pull-to-refresh indicator — sits above the viewport at rest and
   slides down as the user pulls. */
.ptr-indicator{
  position:fixed;left:50%;top:0;
  transform:translateX(-50%) translateY(-60px);
  width:42px;height:42px;border-radius:50%;
  background:var(--panel-light);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ss-cyan);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45), 0 0 0 1px var(--ss-cyan-glow);
  z-index:8500;opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  pointer-events:none;
}
.ptr-indicator.ptr-armed{box-shadow:0 8px 24px -8px rgba(0,0,0,.5), 0 0 0 2px var(--ss-cyan-glow), 0 0 0 4px var(--ss-cyan-glow);background:var(--ss-cyan);color:var(--white)}
.ptr-indicator.ptr-loading{animation:ptrSpin .9s linear infinite}
@keyframes ptrSpin{
  from{transform:translateX(-50%) translateY(20px) rotate(0deg)}
  to  {transform:translateX(-50%) translateY(20px) rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .ptr-indicator.ptr-loading{animation:none}
}

/* Bottom-sheet modal styling for mobile. The breakinModal + appConfirm +
   commandPalette + qa overlays all use .modal-overlay or one of the new
   *-overlay classes; below 600px we slide their cards up from the bottom
   instead of centering, the iOS sheet pattern. */
@media(max-width:600px){
  .modal-overlay,
  .cmdk-overlay,
  .qa-overlay,
  .kbs-overlay{
    align-items:flex-end !important;
    padding:0 !important;
  }
  .modal-overlay .modal-content,
  .modal-overlay .card,
  .cmdk-box,
  .qa-box,
  .kbs-box{
    width:100% !important;max-width:100% !important;
    border-radius:18px 18px 0 0 !important;
    margin:0 !important;
    max-height:88vh !important;
    animation:mpSheetUp .26s cubic-bezier(.2,.8,.2,1) !important;
  }
  /* Drag-handle affordance at the top of any sheet — purely visual,
     not actually draggable (would need a custom gesture). */
  .modal-overlay .modal-content::before,
  .modal-overlay .card::before,
  .cmdk-box::before,
  .qa-box::before,
  .kbs-box::before{
    content:'';display:block;width:36px;height:4px;border-radius:2px;
    background:var(--border);
    margin:8px auto 4px;
  }
}
@keyframes mpSheetUp{
  from{transform:translateY(100%)}
  to  {transform:translateY(0)}
}

/* Trending widget */
.tw-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
}
.tw-col{display:flex;flex-direction:column;gap:5px;min-width:0}
.tw-col-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px solid var(--border-light);
}
.tw-row{display:flex;align-items:center;gap:8px;font-size:11px}
.tw-name{
  min-width:0;flex:1;color:var(--text-sec);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tw-bar{flex:0 0 60px;height:6px;background:var(--bg-deep);border-radius:3px;overflow:hidden}
.tw-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg, var(--ss-navy-light), var(--ss-cyan));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.tw-cnt{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  color:var(--ss-cyan);min-width:18px;text-align:right;
}
.tw-empty{font-size:11px;color:var(--text-dim);padding:6px 0}
.tw-pulse{
  width:6px;height:6px;border-radius:50%;background:var(--ss-cyan);
  box-shadow:0 0 0 0 var(--ss-cyan-glow);
  animation:lpDotPulse 2.4s ease-out infinite;
}
/* Tabs picker — visible on mobile + small tablet, hidden on wide
   desktop where the 3-column grid lays out naturally. Behaves like
   the iOS segmented control: 3 buttons, one active at a time, tap
   to switch which column is shown below. */
.tw-tabs{display:none}
.tw-tab{
  flex:1;background:transparent;color:var(--text-dim);
  border:1px solid var(--border-light);border-radius:6px;
  padding:7px 10px;font-size:11px;font-weight:600;letter-spacing:.04em;
  cursor:pointer;transition:all var(--tr);
  font-family:inherit;
}
.tw-tab:hover{color:var(--text-sec)}
.tw-tab.is-active{
  color:var(--white);background:var(--ss-cyan);
  border-color:var(--ss-cyan);
  box-shadow:0 0 0 2px var(--ss-cyan-glow);
}

/* Mobile + small tablet: collapse the 3-column grid into a tabs picker
   so it works reliably on every device (scroll-snap carousels have
   inconsistent behavior on some Android browsers). Below 820px the
   tabs row appears and only the active column renders. */
@media (max-width: 820px) {
  .tw-tabs{
    display:flex;gap:6px;margin-bottom:12px;
  }
  .tw-grid{
    display:block;
  }
  /* Only the .is-active column is shown; the others are display:none
     so they don't take vertical space. */
  .tw-col[data-tw-col]{display:none}
  .tw-col[data-tw-col].is-active{
    display:flex;flex-direction:column;
    background:var(--bg-deep);
    border:1px solid var(--border-light);
    border-radius:10px;
    padding:12px 14px;
    animation:twFadeIn .2s ease-out;
  }
  .tw-bar{flex:0 0 60px}
  .tw-cnt{font-size:11px}
  .tw-name{font-size:12px}
}
@keyframes twFadeIn{
  from{opacity:0;transform:translateY(4px)}
  to  {opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .tw-col[data-tw-col].is-active{animation:none}
}

/* ── Trending FAB + bottom-sheet popup ──────────────────────────────────
   Bottom-left mirror of the Quick-add FAB (which sits bottom-right). Tap
   it to slide up a bottom-sheet showing the adaptive trending data. */
.tfab{
  position:fixed;left:22px;bottom:22px;z-index:9000;
  width:50px;height:50px;border-radius:50%;
  background:var(--ss-cyan);color:var(--white);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 12px 28px -8px rgba(0,0,0,.45),
    0 0 0 1px var(--ss-cyan),
    0 0 0 6px var(--ss-cyan-glow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow var(--tr);
}
.tfab:hover{transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 18px 36px -10px rgba(0,0,0,.5),
    0 0 0 1px var(--ss-cyan),
    0 0 0 8px var(--ss-cyan-glow);
}
.tfab:active{transform:translateY(0) scale(.98)}
.tfab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ss-cyan-glow),0 0 0 1px var(--ss-cyan)}
@media(max-width:600px){.tfab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px}}

/* Overlay + sheet. On desktop centers in viewport; on mobile slides up
   from the bottom (same pattern as the breakinModal mobile override). */
.tfab-overlay{
  position:fixed;inset:0;z-index:9100;display:none;
  background:rgba(5,8,16,.55);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:24px;
  animation:cmdkFadeIn .14s ease-out;
}
[data-theme="light"] .tfab-overlay{background:rgba(0,0,0,.25)}
.tfab-sheet{
  width:min(560px,100%);max-height:80vh;
  display:flex;flex-direction:column;
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow), 0 0 60px -10px var(--ss-cyan-glow);
  overflow:hidden;
  animation:cmdkScaleIn .18s cubic-bezier(.2,.8,.2,1);
}
.tfab-handle{display:none}
.tfab-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border-light);
}
.tfab-prefix{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  color:var(--ss-cyan);letter-spacing:.14em;
  padding:3px 7px;border:1px solid var(--ss-cyan-glow);border-radius:5px;
  background:var(--ss-cyan-glow);
}
.tfab-close{
  margin-left:auto;background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;font-size:22px;line-height:1;padding:2px 8px;border-radius:4px;
}
.tfab-close:hover{background:var(--bg-deep);color:var(--text-sec)}
.tfab-body{
  flex:1;overflow-y:auto;padding:12px 18px 18px;
}
/* The renderTrendingCard already returns a .card wrapper; inside the
   sheet we want it borderless and edge-to-edge so the sheet's chrome
   is the only frame. */
.tfab-body .card{
  background:transparent !important;border:none !important;
  box-shadow:none !important;padding:0;margin:0;
}
.tfab-body .card-header{margin-bottom:14px;padding:0 0 10px;border-bottom:1px solid var(--border-light)}

/* Mobile: slide up from the bottom as a true sheet */
@media(max-width:600px){
  .tfab-overlay{
    align-items:flex-end;
    padding:0;
  }
  .tfab-sheet{
    width:100%;max-width:100%;
    border-radius:18px 18px 0 0;
    max-height:78vh;
    animation:mpSheetUp .26s cubic-bezier(.2,.8,.2,1);
  }
  .tfab-handle{
    display:block;
    width:36px;height:4px;border-radius:2px;
    background:var(--border);
    margin:8px auto 4px;
  }
}

/* ── Power-user surface: Quick-add FAB + Slash commands + Fading hints ── */

/* Floating action button — bottom-right. Hidden on the New Entry view
   (no point — that view IS the long form), and persistently dismissible. */
.qa-fab{
  position:fixed;right:22px;bottom:22px;z-index:9000;
  width:54px;height:54px;border-radius:50%;
  background:var(--ss-cyan);color:var(--white);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 12px 28px -8px rgba(0,0,0,.45),
    0 0 0 1px var(--ss-cyan),
    0 0 0 6px var(--ss-cyan-glow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow var(--tr);
}
.qa-fab:hover{transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 18px 36px -10px rgba(0,0,0,.5),
    0 0 0 1px var(--ss-cyan),
    0 0 0 8px var(--ss-cyan-glow);
}
.qa-fab:active{transform:translateY(0) scale(.98)}
.qa-fab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ss-cyan-glow),0 0 0 1px var(--ss-cyan)}
@media(max-width:600px){.qa-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:50px;height:50px}}

/* Quick-add modal — shares the cmd-palette visual language */
.qa-overlay{
  position:fixed;inset:0;z-index:9100;display:none;
  background:rgba(5,8,16,.55);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  animation:cmdkFadeIn .14s ease-out;
}
[data-theme="light"] .qa-overlay{background:rgba(0,0,0,.25)}
.qa-box{
  width:min(540px,100%);max-height:80vh;display:flex;flex-direction:column;
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow), 0 0 60px -10px var(--ss-cyan-glow);
  overflow:hidden;
  animation:cmdkScaleIn .18s cubic-bezier(.2,.8,.2,1);
}
.qa-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border-light);
}
.qa-head h3{margin:0;font-size:15px;font-weight:600;color:var(--white)}
.qa-prefix{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  color:var(--ss-cyan);letter-spacing:.12em;
  padding:3px 7px;border:1px solid var(--ss-cyan-glow);border-radius:5px;
  background:var(--ss-cyan-glow);
}
.qa-close{
  margin-left:auto;background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;border-radius:4px;
}
.qa-close:hover{background:var(--bg-deep);color:var(--text-sec)}
.qa-body{padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.qa-label{
  display:flex;flex-direction:column;gap:4px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
}
.qa-input{
  border:1px solid var(--border);border-radius:6px;
  background:var(--bg-deep);color:var(--white);
  padding:8px 10px;font-size:13px;outline:none;
  font-family:inherit;text-transform:none;letter-spacing:normal;
}
.qa-input:focus{border-color:var(--ss-cyan);box-shadow:0 0 0 2px var(--ss-cyan-glow)}
.qa-row{display:flex;gap:10px}
.qa-grow{flex:1}
.qa-foot{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-top:1px solid var(--border-light);
}
.qa-hint{
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);
  letter-spacing:.06em;
}

/* Slash-command floating menu */
.sl-menu{
  position:absolute;display:none;z-index:9500;
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow);
  padding:4px;min-width:260px;max-width:380px;
  animation:cmdkFadeIn .12s ease-out;
}
.sl-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;cursor:pointer;
}
.sl-item:hover, .sl-item.is-active{background:var(--card-hover)}
.sl-trigger{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:var(--ss-cyan);background:var(--bg-deep);
  padding:2px 7px;border-radius:4px;border:1px solid var(--border-light);
  min-width:80px;
}
.sl-label{font-size:12px;color:var(--text-sec);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Fading kbd hint chip */
.kbd-hint{margin-left:8px;display:inline-flex;align-items:center;transition:opacity .4s ease}
.kbd-hint kbd{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--text-dim);padding:1px 5px;border-radius:3px;
  background:var(--bg-deep);border:1px solid var(--border-light);
  letter-spacing:.04em;
}
.kbd-hint-fading{opacity:0}

/* ── Live Pulse: presence dots + activity ticker + Undo toast ──────────
   Slack/Discord-flavored "this app is inhabited" layer. Presence dots
   are designed to ride on an avatar wrapper's bottom-right corner
   without needing extra layout chrome.                                   */

.lp-avatar-wrap{position:relative;display:inline-flex;flex-shrink:0;line-height:0}
.lp-dot{
  position:absolute;right:-1px;bottom:-1px;
  border-radius:50%;
  border:2px solid var(--bg);
  box-shadow:0 0 0 0 transparent;
  z-index:2;
}
.lp-dot-online{background:#10b981}
.lp-dot-busy  {background:#f59e0b}
.lp-dot-away  {background:#9ca3af}
.lp-dot-pulse{
  animation:lpDotPulse 2.4s ease-out infinite;
  box-shadow:0 0 0 0 rgba(16,185,129,.55);
}
@keyframes lpDotPulse{
  0%   {box-shadow:0 0 0 0 rgba(16,185,129,.45)}
  70%  {box-shadow:0 0 0 6px rgba(16,185,129,0)}
  100% {box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
@media (prefers-reduced-motion: reduce){
  .lp-dot-pulse{animation:none}
}

/* Activity ticker — slim bar that sits between topbar and nav-bar */
#livePulseBar{display:none}
.lp-ticker{
  display:flex;align-items:center;gap:10px;
  padding:5px 14px;
  background:linear-gradient(90deg, var(--bg-deep) 0%, var(--panel-light) 100%);
  border-bottom:1px solid var(--border-light);
  font-size:11px;color:var(--text-sec);
  animation:lpTickerSlide .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes lpTickerSlide{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1;transform:translateY(0)}
}
.lp-ticker-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--ss-cyan);flex-shrink:0;
  box-shadow:0 0 0 0 var(--ss-cyan-glow);
  animation:lpDotPulse 2s ease-out infinite;
}
.lp-ticker-avatar{display:inline-flex;line-height:0}
.lp-ticker-text{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lp-ticker-text strong{color:var(--white);font-weight:600}
.lp-ticker-verb{color:var(--text-dim)}
.lp-ticker-noun{
  color:var(--text-sec);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:380px;
}
.lp-ticker-when{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--text-dim);letter-spacing:.06em;
}
.lp-ticker-close{
  background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;font-size:16px;line-height:1;padding:0 4px;
  border-radius:4px;
}
.lp-ticker-close:hover{background:var(--bg-deep);color:var(--text-sec)}
@media(max-width:600px){
  .lp-ticker{padding:5px 8px;gap:6px}
  .lp-ticker-noun{display:none}
  .lp-ticker-when{display:none}
}

/* Toast with Undo button */
.toast.lp-toast-undo{
  display:flex;align-items:center;gap:14px;
  padding-right:6px;
}
.lp-toast-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lp-toast-undo-btn{
  background:var(--ss-cyan);color:var(--white);
  border:1px solid var(--ss-cyan);border-radius:6px;
  padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;
  cursor:pointer;transition:background var(--tr),box-shadow var(--tr);
}
.lp-toast-undo-btn:hover{
  background:var(--ss-navy-light);
  box-shadow:0 0 0 2px var(--ss-cyan-glow);
}

/* ── Keyboard cheatsheet overlay ────────────────────────────────────────
   Triggered by `?`. Same chrome as the command palette but laid out as
   a 2-column shortcut list. */
.kbs-overlay{
  position:fixed;inset:0;z-index:9990;
  background:rgba(5,8,16,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:cmdkFadeIn .14s ease-out;
}
[data-theme="light"] .kbs-overlay{background:rgba(0,0,0,.25)}
.kbs-box{
  width:min(640px,100%);
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow), 0 0 60px -10px var(--ss-cyan-glow);
  padding:22px 26px;
  animation:cmdkScaleIn .18s cubic-bezier(.2,.8,.2,1);
}
.kbs-head{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--border-light);
}
.kbs-head h3{
  margin:0;font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ss-cyan);
}
.kbs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;
}
.kbs-grid .kbs-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--text-sec)}
.kbs-grid .kbs-keys{display:flex;gap:4px;align-items:center}
.kbs-grid kbd{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-sec);
  padding:2px 6px;border:1px solid var(--border-light);border-radius:4px;
  background:var(--bg-deep);min-width:18px;text-align:center;
}
.kbs-foot{margin-top:16px;font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
@media(max-width:600px){
  .kbs-grid{grid-template-columns:1fr}
  .kbs-box{padding:18px}
}

/* Disabled cursor for the org-chart card while still allowing it to be
   tab-focused. Used by non-elevated reports-to view. */
.rsc-readonly[draggable="false"]{cursor:default}

/* ── Command Palette ──────────────────────────────────────────────────── */
.cmdk-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(5,8,16,.55);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;
  animation:cmdkFadeIn .14s ease-out;
}
[data-theme="light"] .cmdk-overlay{background:rgba(0,0,0,.25)}
.cmdk-box{
  width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;
  background:var(--panel-light);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--ss-cyan-glow), 0 0 60px -10px var(--ss-cyan-glow);
  overflow:hidden;
  animation:cmdkScaleIn .18s cubic-bezier(.2,.8,.2,1);
}
.cmdk-input-row{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--border-light);
}
.cmdk-prefix{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:var(--ss-cyan);letter-spacing:.1em;
  padding:3px 7px;border:1px solid var(--ss-cyan-glow);border-radius:5px;
  background:var(--ss-cyan-glow);
}
.cmdk-input{
  flex:1;border:none;background:transparent;outline:none;
  color:var(--white);font-size:15px;font-weight:500;letter-spacing:.01em;
}
.cmdk-input::placeholder{color:var(--text-dim)}
.cmdk-hint{
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);
  letter-spacing:.08em;text-transform:uppercase;
}
.cmdk-list{flex:1;overflow-y:auto;padding:6px 0}
.cmdk-empty{padding:32px 16px;text-align:center;color:var(--text-dim);font-size:12px}
.cmdk-section{
  padding:10px 16px 4px;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
}
.cmdk-item{
  display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;
  border-left:2px solid transparent;
  transition:background var(--tr),border-color var(--tr);
}
.cmdk-item:hover, .cmdk-item.is-active{
  background:var(--card-hover);border-left-color:var(--ss-cyan);
}
.cmdk-item.is-active{box-shadow:inset 0 0 0 1px var(--ss-cyan-glow)}
.cmdk-icon{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:var(--bg-deep);
  color:var(--ss-cyan);font-size:13px;flex-shrink:0;
  border:1px solid var(--border-light);
}
.cmdk-body{flex:1;min-width:0}
.cmdk-title{
  font-size:13px;color:var(--white);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cmdk-sub{
  font-size:10px;color:var(--text-dim);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cmdk-shortcut{
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);
  padding:2px 6px;border:1px solid var(--border-light);border-radius:4px;
  background:var(--bg-deep);letter-spacing:.06em;
}
.cmdk-foot{
  display:flex;align-items:center;gap:14px;padding:8px 14px;
  border-top:1px solid var(--border-light);
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);
  letter-spacing:.08em;text-transform:uppercase;
}
.cmdk-foot kbd{
  display:inline-block;padding:1px 5px;border-radius:3px;
  background:var(--bg-deep);border:1px solid var(--border-light);
  color:var(--text-sec);font-family:inherit;font-size:9px;margin:0 3px;
}
.cmdk-match{color:var(--ss-cyan);font-weight:700}
@keyframes cmdkFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cmdkScaleIn{
  from{opacity:0;transform:translateY(-8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:600px){
  .cmdk-overlay{padding:8vh 8px 8px}
  .cmdk-box{max-height:80vh}
  .cmdk-input{font-size:14px}
  .cmdk-foot{display:none}
}

/* ── Kanban Story Board: full-screen mode + slide-in detail panel ──────
   Full-screen kanban hides the rest of the app and lets the board use
   100vh; the slide-in panel takes the existing centered modal and
   anchors it to the right edge of the viewport so the board behind
   stays visible while the user reads a card. */
body.jt-kanban-fs .topbar,
body.jt-kanban-fs .nav-bar,
body.jt-kanban-fs #livePulseBar,
body.jt-kanban-fs #assignmentBanner{display:none !important}
body.jt-kanban-fs .main-scroll{padding:8px 14px 14px 14px}
/* The .view container has a max-width:960px cap by default so every page
   reads as a centered column. In Kanban fullscreen we want the board to
   actually use the full viewport, so lift the cap on the Job Tracker
   view specifically and let the lane row span edge-to-edge. */
body.jt-kanban-fs .view#view-jobtracker{
  max-width:none !important;
  margin:0 !important;
  padding-top:8px;
}
body.jt-kanban-fs .view#view-jobtracker #jtResults{
  max-width:none;
}
body.jt-kanban-fs .view#view-jobtracker #jtResults > div{
  /* Single-row mode wrapper — let it use 100% width */
  width:100%;
}
/* In single-row mode each lane has min-width:240px;flex:1; — that's
   already fine. In swimlane mode the row of 4 lanes can stretch all
   the way across now that the .view cap is gone. */

.jt-kanban-toolbar button{font-family:inherit;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.jt-kanban-toolbar button:hover{filter:brightness(1.05)}

/* Swimlane row chrome — subtle horizontal rule between client groups */
.jt-swimlane{position:relative}
.jt-swimlane:not(:last-child){border-bottom:1px dashed var(--border-light);padding-bottom:14px}

/* Convert #kanbanJobModal from a centered card into a right-edge slide-in
   panel. We override only the positioning; the inner card chrome stays
   the same so existing button/layout work is reused.
   .kjm-panel is a class added by _kanbanOpenJobModal when shipping the
   new layout. */
.kjm-panel{
  justify-content:flex-end !important;
  align-items:stretch !important;
  background:rgba(5,8,16,.35) !important;
  backdrop-filter:blur(3px);
}
[data-theme="light"] .kjm-panel{background:rgba(0,0,0,.18) !important}
.kjm-panel > .modal-content{
  max-width:560px !important;
  width:100% !important;
  height:100vh !important;
  max-height:100vh !important;
  border-radius:0 !important;
  border-top-left-radius:14px !important;
  border-bottom-left-radius:14px !important;
  border-right:none !important;
  box-shadow:-18px 0 48px -16px rgba(0,0,0,.6),
             0 0 0 1px var(--ss-cyan-glow) !important;
  animation:kjmSlideIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes kjmSlideIn{
  from{transform:translateX(100%)}
  to  {transform:translateX(0)}
}
@media(max-width:600px){
  /* On phones, the slide-in panel becomes a bottom sheet — matches the
     pattern Live Pulse / Cmd+K already use below 600px. */
  .kjm-panel{align-items:flex-end !important;justify-content:center !important}
  .kjm-panel > .modal-content{
    height:88vh !important;max-height:88vh !important;
    border-top-left-radius:18px !important;border-top-right-radius:18px !important;
    border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;
    animation:mpSheetUp .26s cubic-bezier(.2,.8,.2,1) !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .kjm-panel > .modal-content{animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME: NASA  ── Earth-from-Space (Apple-wallpaper inspired)
   Big blue marble in the bottom-right corner — atmosphere glow, cloud
   bands, brown landmasses, and a constellation of warm city lights on
   the night-side terminator. Deep starfield behind it.
   Both dark and light variants share the same Earth; the light variant
   uses a softer day-side composition.
   All background art is in dedicated fixed-position layers with
   z-index:-1 so they sit BEHIND every page element naturally — no
   stacking-context overrides needed on .topbar/.nav-bar/etc. (the
   previous body::before/::after approach created a stacking context
   that visually swallowed dropdowns like the More menu).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="nasa"]{
  /* NASA's official "meatball" palette: Pantone 286 blue (#0B3D91) +
     accent red (#FC3D21). We keep the accent very subtle and lean
     mostly on the cyan-blue. */
  --ss-navy:#0B3D91;
  --ss-navy-light:#1B6FE0;
  --ss-cyan:#5DA9E9;
  --ss-cyan-glow:rgba(93,169,233,.32);
  --ss-red:#FC3D21;
  --ss-red-glow:rgba(252,61,33,.20);
  /* Deep space surfaces */
  --bg:#02030a;
  --bg-deep:#000004;
  --panel:rgba(10,18,38,.86);
  --panel-light:rgba(16,26,52,.82);
  --card:rgba(18,30,58,.55);
  --card-hover:rgba(28,48,90,.72);
  --glass:rgba(255,255,255,.03);
  --glass-border:rgba(93,169,233,.10);
  --border:rgba(93,169,233,.20);
  --border-light:rgba(93,169,233,.10);
  --white:#e9f1ff;
  --text:#c5d4ee;
  --text-sec:#8aa2c8;
  --text-dim:#5e7299;
}
[data-theme="nasa"] body{
  /* True deep-space matte black. The moon's own black space border
     blends seamlessly with this — no visible "ring" around the sphere. */
  background:#000003;
  background-attachment:fixed;
}
/* Light NASA variant — same imagery, day-side. The Earth in the corner
   is more illuminated; the sky behind is a dawn-blue gradient instead
   of pure black. The starfield is dialed way back since you can't see
   stars in a daylight sky. */
[data-theme="nasaDay"]{
  --ss-navy:#0B3D91;
  --ss-navy-light:#1B6FE0;
  --ss-cyan:#5DA9E9;
  --ss-cyan-glow:rgba(93,169,233,.28);
  --ss-red:#FC3D21;
  --ss-red-glow:rgba(252,61,33,.18);
  /* The day-side Earth photo lives against deep space too — that's how
     it was taken. Painting the page bg pure space-black lets the Blue
     Marble sit naturally without a halo ring. The "light" character of
     this theme is in the cards / topbar / text — translucent white
     panels floating over the space scene, like the macOS dark-Aqua
     pattern. */
  --bg:#000003;
  --bg-deep:#000000;
  /* Cards stay translucent white so the cosmos shows through softly
     behind every panel. */
  --panel:rgba(245,250,255,.94);
  --panel-light:rgba(255,255,255,.97);
  --card:rgba(255,255,255,.82);
  --card-hover:rgba(255,255,255,.95);
  --glass:rgba(255,255,255,.05);
  --glass-border:rgba(255,255,255,.18);
  --border:rgba(255,255,255,.22);
  --border-light:rgba(255,255,255,.12);
  --white:#1a2438;
  --text:#2c3a55;
  --text-sec:#536179;
  --text-dim:#8a96ac;
}
[data-theme="nasaDay"] body{
  background:#000003;
  background-attachment:fixed;
}
[data-theme="nasaDay"] .topbar{background:rgba(245,250,255,.94);backdrop-filter:blur(14px)}
[data-theme="nasaDay"] .nav-bar{background:rgba(245,250,255,.72);backdrop-filter:blur(10px)}

/* Form fields + select dropdowns + the topbar client filter all default
   to background:var(--bg-deep), which in nasaDay is pure black for the
   deep-space body. That made every input render as a solid black box
   with invisible (dark-blue-on-black) text. Override here so editable
   surfaces stay light + readable on the day theme. */
[data-theme="nasaDay"] .form-input,
[data-theme="nasaDay"] .form-select,
[data-theme="nasaDay"] .form-textarea,
[data-theme="nasaDay"] input[type="text"],
[data-theme="nasaDay"] input[type="email"],
[data-theme="nasaDay"] input[type="tel"],
[data-theme="nasaDay"] input[type="number"],
[data-theme="nasaDay"] input[type="search"],
[data-theme="nasaDay"] input[type="url"],
[data-theme="nasaDay"] input[type="date"],
[data-theme="nasaDay"] input[type="time"],
[data-theme="nasaDay"] input[type="datetime-local"],
[data-theme="nasaDay"] input[type="month"],
[data-theme="nasaDay"] input[type="week"],
[data-theme="nasaDay"] input[type="password"],
[data-theme="nasaDay"] textarea,
[data-theme="nasaDay"] select,
[data-theme="nasaDay"] #topbarClientFilter{
  background-color:rgba(255,255,255,.92) !important;
  color:#1a2438 !important;
  border-color:rgba(11,61,145,.22) !important;
}
[data-theme="nasaDay"] .form-input::placeholder,
[data-theme="nasaDay"] .form-textarea::placeholder,
[data-theme="nasaDay"] textarea::placeholder,
[data-theme="nasaDay"] input::placeholder{
  color:#6e7c97 !important;
  opacity:.85;
}
/* Active state on the topbar nav tabs: in nasaDay the underline cyan
   stays, but the inactive tab text needs a darker tone to read against
   the light topbar (was using --text-dim which is too faint over a
   translucent white background). */
[data-theme="nasaDay"] .nav-tab{color:#536179}
[data-theme="nasaDay"] .nav-tab.active{color:#0B3D91}

/* ── Background art layers (shared base for every client-themed scene) ─
   Each Easter-egg theme (NASA / Exxon / PG&E) gets its own #clientBg
   fragment injected by setThemeByName → _ensureClientArt. The base
   class .client-bg pins it behind every page element via z-index:-1
   so no chrome ever needs a stacking-context override. */
.client-bg, .nasa-bg{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
/* Starfield layer — fades out almost entirely in day mode */
.nasa-stars-a, .nasa-stars-b{
  position:absolute;inset:0;
}
.nasa-stars-a{
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 8%,  rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 42% 35%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 28%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 78% 6%,  rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1px 1px at 9%  48%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 56%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 64% 64%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1px 1px at 84% 52%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1px 1px at 96% 76%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1px 1px at 4%  16%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 71% 8%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1px 1px at 21% 38%, rgba(255,255,255,.5),  transparent 60%);
}
.nasa-stars-b{
  background-image:
    radial-gradient(2px 2px at 33% 18%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(2px 2px at 72% 42%, rgba(193,221,255,.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 62%, rgba(255,255,255,.9), transparent 60%);
  animation:nasaTwinkle 5.5s ease-in-out infinite;
}
/* Light NASA theme now uses deep-space bg too, so the starfield
   stays fully visible behind the translucent white cards. */
[data-theme="nasaDay"] .nasa-stars-a{opacity:.85}
[data-theme="nasaDay"] .nasa-stars-b{opacity:.85}
@keyframes nasaTwinkle{
  0%,100%{opacity:.35}
  50%    {opacity:.95}
}
@media (prefers-reduced-motion: reduce){
  .nasa-stars-b{animation:none;opacity:.6}
}

/* ── The Earth — real NASA photographic imagery ─────────────────────────
   Replaces the CSS-rendered globe with NASA's public-domain Earth
   photography. Two images:
     • Dark mode (.nasa-earth-night): Black Marble — Earth at night
       composite from VIIRS, showing city lights across the night
       hemisphere. Source: NASA Earth Observatory.
     • Light mode (.nasa-earth-day): Blue Marble — daytime Earth with
       clouds + landmasses. Source: NASA Visible Earth.
   Both are hosted on NASA's own eoimages CDN, which they encourage
   hotlinking for educational/non-commercial use. Falls back to a
   subtle gradient if the image fails to load (no JS detection —
   the surrounding gradient handles it visually). */
.nasa-earth-img{
  position:absolute;
  right:max(4vmin, 3vw);
  top:50%;
  transform:translateY(-50%);
  width:min(60vmin, 720px);
  height:min(60vmin, 720px);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:50%;
  /* No box-shadow on the base layer — previous bluish "atmospheric halo"
     created a visible dark ring against the lighter page bg in light
     mode and a faint mismatched glow in dark mode. The deep-space bg
     painted on body (radial vignette + starfield) does the atmospheric
     work now, and each theme layers its own halo override below. */
}
/* Dark NASA — Earth at night composite. The "Black Marble" image is one
   of the most-shared public-domain space photos, showing the warm
   golden city-light constellations across Europe / Asia / Americas.
   Image hosted by NASA Earth Observatory. */
/* Dark NASA — the FULL MOON instead of Earth-at-night.
   /assets/moon.jpg?v=20260624-6 is 1600×1520, public-domain composite from
   2010. The moon already reads as "night sky" with no extra
   trickery; the cratered surface adds genuine photo texture
   in a way the Earth-night composite couldn't at this size. */
[data-theme="nasa"] .nasa-earth-img{
  background-image:url('/assets/moon.jpg?v=20260624-6');
  background-position:center;
  /* 108% zoom crops the dark space margin in the photo so the
     circular border-radius:50% clip happens entirely inside the
     lunar disc. No more visible ring. */
  background-size:108%;
  filter:saturate(.85) brightness(1.05);
}
/* Light NASA — daytime Apollo 17 "Blue Marble".
   background-size:108% does the same crop trick as the moon to
   eliminate the dark space border that previously haloed against
   the light page bg. */
[data-theme="nasaDay"] .nasa-earth-img{
  background-image:url('/assets/earth-day.jpg?v=20260624-6');
  background-position:center;
  background-size:108%;
}
/* (drift animation removed — it fought the translateY(-50%) used for
   the new vertical centering and made the sphere wander out of
   position. The sphere reads as confident and grounded staying still.) */

/* Aurora belt — a soft green/cyan ribbon at the horizon edge of the
   Earth image. Sits above the photo and matches the new floating
   sphere placement. */
.nasa-earth-aurora{
  position:absolute;
  right:max(4vmin, 3vw);
  top:50%;
  transform:translateY(-50%);
  width:min(60vmin, 720px);
  height:min(60vmin, 720px);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 50% 10% at 50% 12%, rgba(140,255,200,.30) 0%, rgba(80,200,255,.12) 50%, transparent 80%);
  filter:blur(3px);
  animation:nasaAurora 18s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes nasaAurora{
  /* Combine the floating sway with the centering translate so the
     keyframes don't override translateY(-50%). */
  0%,100%{opacity:.45;transform:translateY(calc(-50% + 0px))}
  50%    {opacity:.75;transform:translateY(calc(-50% - 3px))}
}
@media (prefers-reduced-motion: reduce){
  .nasa-earth-aurora{animation:none;opacity:.6}
}
[data-theme="nasaDay"] .nasa-earth-aurora{opacity:.2}

/* Mission-control chrome */
[data-theme="nasa"] .topbar{
  background:rgba(2,3,10,.78);
  border-bottom:1px solid rgba(93,169,233,.18);
  backdrop-filter:blur(14px);
}
[data-theme="nasa"] .topbar-logo{
  background:linear-gradient(135deg, #0B3D91 0%, #1B6FE0 100%);
}
[data-theme="nasa"] .topbar-subtitle{color:rgba(93,169,233,.7)}
[data-theme="nasa"] .nav-bar{background:rgba(2,3,10,.55);backdrop-filter:blur(10px)}
[data-theme="nasa"] .card-header{color:#5DA9E9}
[data-theme="nasa"] .nav-tab.active{color:#5DA9E9}
[data-theme="nasa"] .nav-tab.active::after{
  background:linear-gradient(90deg, transparent, #5DA9E9, transparent);
}
[data-theme="nasa"] .stat-num{color:#e9f1ff;text-shadow:0 0 24px rgba(93,169,233,.35)}

/* On phones, the Earth is too dominant — pull it further off the
   bottom-right so a smaller crescent of it shows in the corner. */
@media(max-width:600px){
  .nasa-earth-img,
  .nasa-earth-aurora{
    right:-35vmin;bottom:-30vmin;
    width:80vmin;height:80vmin;
  }
}

/* ── Floating astronaut — Bruce McCandless STS-41B EVA ────────────────
   Bundled at /assets/astronaut.jpg?v=20260624-6 (1200×1200, public domain, NASA
   image S84-27562 from the 1984 untethered MMU spacewalk).
   The photo has the astronaut on near-black space, so background-blend
   isn't strictly needed — but mix-blend-mode:screen makes the dark
   pixels transparent so the astronaut "floats" cleanly over both the
   black nasa bg and any other layer. Positioned in the mid-upper-left
   of the viewport with a slow drift animation to feel like real
   microgravity motion. */
.nasa-astronaut{
  position:absolute;
  /* ~26vmin = a friendly-sized hero element that doesn't overwhelm
     the cards. Sized in vmin so phones don't get a gigantic astronaut. */
  left:6vw;
  top:18vh;
  width:min(26vmin, 360px);
  height:min(26vmin, 360px);
  background:url('/assets/astronaut.jpg?v=20260624-6') center/contain no-repeat;
  /* mix-blend-mode:screen lights up the astronaut's white suit + EVA
     gear against either bg and quietly drops the black space margin
     in the photo. */
  mix-blend-mode:screen;
  opacity:.95;
  filter:contrast(1.05);
  animation:nasaAstroDrift 26s ease-in-out infinite;
  will-change:transform;
}
@keyframes nasaAstroDrift{
  0%   {transform:translate(0,0) rotate(0deg)}
  25%  {transform:translate(6px,-12px) rotate(-1.5deg)}
  50%  {transform:translate(-4px,-22px) rotate(.8deg)}
  75%  {transform:translate(-10px,-8px) rotate(2deg)}
  100% {transform:translate(0,0) rotate(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .nasa-astronaut{animation:none}
}
/* On phones the astronaut would overlap the card too much; pull it
   smaller and into the top-right where it's less likely to fight the
   content. */
@media(max-width:600px){
  .nasa-astronaut{
    left:auto;right:4vw;top:10vh;
    width:min(34vmin, 200px);
    height:min(34vmin, 200px);
  }
}
/* The day-theme bg is also matte black behind the cards, so the
   screen blend works there too. No per-theme override needed. */

/* Dropdown / select option contrast under NASA themes. Browsers
   (Chrome / Edge on Windows in particular) often ignore CSS on
   <option> elements and fall back to system colors — which renders
   as black text on a black background under the NASA dark palette.
   Explicitly set color + background-color on every option so the
   open dropdown stays readable. */
[data-theme="nasa"] select,
[data-theme="nasa"] option,
[data-theme="nasa"] optgroup,
[data-theme="nasaDay"] select,
[data-theme="nasaDay"] option,
[data-theme="nasaDay"] optgroup{
  color:var(--text);
  background-color:var(--bg-deep);
}
[data-theme="nasaDay"] select,
[data-theme="nasaDay"] option,
[data-theme="nasaDay"] optgroup{
  background-color:#ffffff;
  color:#1a2438;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME: EXXON  ── Oil field (dusk pumpjacks + Permian aerial)
   Two photos in /assets/:
     - exxon-pumpjacks.jpg     → dusk/sunset pumpjack silhouettes
     - exxon-pumpjacks-day.jpg → aerial of the Permian Basin (Ward County)
   See CREDITS.md for full attribution.
     - exxon (dark)    : dusk palette, warm amber chrome on near-black
     - exxonDay (light): sand/desert palette, terracotta accents on cream
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="exxon"]{
  --ss-navy:#3a1a08;
  --ss-navy-light:#7a3a18;
  --ss-cyan:#f59e0b;          /* warm amber takes the cyan slot for accent */
  --ss-cyan-glow:rgba(245,158,11,.28);
  --ss-red:#dc2626;
  --ss-red-glow:rgba(220,38,38,.22);
  --bg:#0a0604;
  --bg-deep:#000000;
  --panel:rgba(20,12,6,.86);
  --panel-light:rgba(28,18,10,.85);
  --card:rgba(30,20,10,.62);
  --card-hover:rgba(46,28,14,.78);
  --glass:rgba(255,200,140,.04);
  --glass-border:rgba(245,158,11,.12);
  --border:rgba(245,158,11,.20);
  --border-light:rgba(245,158,11,.10);
  --white:#fff0d8;
  --text:#e8d4b0;
  --text-sec:#b89878;
  --text-dim:#7a604a;
}
[data-theme="exxonDay"]{
  --ss-navy:#7a3a18;
  --ss-navy-light:#a85a28;
  --ss-cyan:#c2410c;          /* terracotta accent */
  --ss-cyan-glow:rgba(194,65,12,.20);
  --ss-red:#9a1f1f;
  --ss-red-glow:rgba(154,31,31,.16);
  --bg:#0a0604;               /* page still matte black so image blends */
  --bg-deep:#000000;
  --panel:rgba(252,240,220,.94);
  --panel-light:rgba(255,248,232,.97);
  --card:rgba(252,240,220,.86);
  --card-hover:rgba(255,250,238,.96);
  --glass:rgba(0,0,0,.025);
  --glass-border:rgba(122,58,24,.10);
  --border:rgba(122,58,24,.18);
  --border-light:rgba(122,58,24,.08);
  --white:#2a1408;
  --text:#3d2010;
  --text-sec:#6a4828;
  --text-dim:#9a7e58;
}
[data-theme="exxon"] body,
[data-theme="exxonDay"] body{ background:#000000; background-attachment:fixed; }
[data-theme="exxon"] .topbar    { background:rgba(10,6,4,.82); backdrop-filter:blur(14px); }
[data-theme="exxon"] .nav-bar   { background:rgba(10,6,4,.58); backdrop-filter:blur(10px); }
[data-theme="exxonDay"] .topbar { background:rgba(252,240,220,.94); backdrop-filter:blur(14px); }
[data-theme="exxonDay"] .nav-bar{ background:rgba(252,240,220,.72); backdrop-filter:blur(10px); }
[data-theme="exxon"] .card-header{ color:#f59e0b; }
[data-theme="exxonDay"] .card-header{ color:#7a3a18; }
[data-theme="exxon"] .nav-tab.active{ color:#f59e0b; }
[data-theme="exxonDay"] .nav-tab.active{ color:#7a3a18; }
[data-theme="exxon"] .nav-tab.active::after,
[data-theme="exxonDay"] .nav-tab.active::after{
  background:linear-gradient(90deg, transparent, currentColor, transparent);
}
/* The Exxon scene — pumpjack silhouettes filling the bottom of the
   viewport, sky fading up to deep black at the top. */
.exxon-scene{
  position:absolute;
  inset:0;
  background:url('/assets/exxon-pumpjacks.jpg?v=20260624-6') center bottom / cover no-repeat;
  /* Narrow top-edge fade so the sky blends into the chrome without
     erasing the silhouettes or the colorful sunset band. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 16%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 16%);
}
/* Day variant: aerial of the Permian Basin oil fields (Ward County, TX).
   Centered so the road grid + well-pad pattern is the focal point. */
[data-theme="exxonDay"] .exxon-scene{
  background-image:url('/assets/exxon-pumpjacks-day.jpg?v=20260624-6');
  background-position:center center;
  filter:saturate(1.05) brightness(1.02);
}
/* Form contrast — exxonDay uses dark text on the warm cream panels,
   matching the chrome. Inputs default to var(--bg-deep) = pure black
   which would be unreadable; override to translucent cream. */
[data-theme="exxonDay"] .form-input,
[data-theme="exxonDay"] .form-select,
[data-theme="exxonDay"] .form-textarea,
[data-theme="exxonDay"] input[type="text"],
[data-theme="exxonDay"] input[type="email"],
[data-theme="exxonDay"] input[type="tel"],
[data-theme="exxonDay"] input[type="number"],
[data-theme="exxonDay"] input[type="search"],
[data-theme="exxonDay"] input[type="url"],
[data-theme="exxonDay"] input[type="date"],
[data-theme="exxonDay"] input[type="time"],
[data-theme="exxonDay"] input[type="datetime-local"],
[data-theme="exxonDay"] input[type="month"],
[data-theme="exxonDay"] input[type="week"],
[data-theme="exxonDay"] input[type="password"],
[data-theme="exxonDay"] textarea,
[data-theme="exxonDay"] select,
[data-theme="exxonDay"] #topbarClientFilter{
  background-color:rgba(252,245,232,.92) !important;
  color:#2a1408 !important;
  border-color:rgba(122,58,24,.20) !important;
}
[data-theme="exxonDay"] input::placeholder,
[data-theme="exxonDay"] textarea::placeholder{
  color:#9a7e58 !important; opacity:.85;
}
[data-theme="exxonDay"] .nav-tab{ color:#6a4828; }
/* Native dropdown popup colors (Chrome/Edge on Windows ignore CSS on
   <option> and use system colors otherwise). */
[data-theme="exxon"] select, [data-theme="exxon"] option, [data-theme="exxon"] optgroup{
  background-color:#0a0604; color:#e8d4b0;
}
[data-theme="exxonDay"] option, [data-theme="exxonDay"] optgroup{
  background-color:#fcf5e8; color:#2a1408;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME: PG&E  ── Grid (city-at-night + day transmission lines)
   Two photos in /assets/:
     - pge-powerlines.jpg     → NASA "City Lights of the United States
       2012" composite (Suomi NPP VIIRS, PD). The continent-wide glow
       of populated areas stands in for the electric grid.
     - pge-powerlines-day.jpg → daylight transmission line photo (CC BY 4.0)
   See CREDITS.md for full attribution.
     - pge (dark)    : dusk palette, electric-teal accents on near-black
     - pgeDay (light): grid-blue palette on soft sky-blue chrome
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="pge"]{
  --ss-navy:#0c2942;
  --ss-navy-light:#1a4a72;
  --ss-cyan:#22d3ee;          /* PG&E grid-blue / electric-cyan */
  --ss-cyan-glow:rgba(34,211,238,.28);
  --ss-red:#ef4444;
  --ss-red-glow:rgba(239,68,68,.20);
  --bg:#04060a;
  --bg-deep:#000000;
  --panel:rgba(8,16,30,.86);
  --panel-light:rgba(12,22,42,.85);
  --card:rgba(14,24,44,.62);
  --card-hover:rgba(22,36,62,.78);
  --glass:rgba(180,230,255,.04);
  --glass-border:rgba(34,211,238,.12);
  --border:rgba(34,211,238,.20);
  --border-light:rgba(34,211,238,.10);
  --white:#e0f4ff;
  --text:#bcdaef;
  --text-sec:#7c9fbf;
  --text-dim:#506a8c;
}
[data-theme="pgeDay"]{
  --ss-navy:#1565c0;
  --ss-navy-light:#1e88e5;
  --ss-cyan:#0891b2;          /* deep teal — PG&E grid blue */
  --ss-cyan-glow:rgba(8,145,178,.18);
  --ss-red:#b91c1c;
  --ss-red-glow:rgba(185,28,28,.15);
  --bg:#04060a;               /* page still matte black so image blends */
  --bg-deep:#000000;
  --panel:rgba(238,246,252,.94);
  --panel-light:rgba(248,252,255,.97);
  --card:rgba(238,246,252,.86);
  --card-hover:rgba(248,252,255,.96);
  --glass:rgba(0,0,0,.025);
  --glass-border:rgba(21,101,192,.10);
  --border:rgba(21,101,192,.18);
  --border-light:rgba(21,101,192,.08);
  --white:#0c1b2e;
  --text:#1b2c44;
  --text-sec:#3f5470;
  --text-dim:#7a8ba6;
}
[data-theme="pge"] body,
[data-theme="pgeDay"] body{ background:#000000; background-attachment:fixed; }
[data-theme="pge"] .topbar    { background:rgba(4,6,10,.82); backdrop-filter:blur(14px); }
[data-theme="pge"] .nav-bar   { background:rgba(4,6,10,.58); backdrop-filter:blur(10px); }
[data-theme="pgeDay"] .topbar { background:rgba(238,246,252,.94); backdrop-filter:blur(14px); }
[data-theme="pgeDay"] .nav-bar{ background:rgba(238,246,252,.72); backdrop-filter:blur(10px); }
[data-theme="pge"] .card-header   { color:#22d3ee; }
[data-theme="pgeDay"] .card-header{ color:#1565c0; }
[data-theme="pge"] .nav-tab.active   { color:#22d3ee; }
[data-theme="pgeDay"] .nav-tab.active{ color:#1565c0; }
[data-theme="pge"] .nav-tab.active::after,
[data-theme="pgeDay"] .nav-tab.active::after{
  background:linear-gradient(90deg, transparent, currentColor, transparent);
}
.pge-scene{
  position:absolute;
  inset:0;
  /* `cover` so the scene fills the viewport edge-to-edge with no letterbox.
     Both variants (night NASA "City Lights" composite + day transmission
     photo) are cropped to fill rather than fit — full-bleed by request. */
  background:url('/assets/pge-powerlines.jpg?v=20260624-6') center center / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 6%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 6%);
}
/* Day variant: daytime transmission line photo with bright sky — needs
   a stronger top fade so the sky doesn't fight the topbar. */
[data-theme="pgeDay"] .pge-scene{
  background-image:url('/assets/pge-powerlines-day.jpg?v=20260624-6');
  background-position:center 65%;
  filter:saturate(1.08) brightness(1.04);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 16%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 7%, #000 16%);
}
[data-theme="pgeDay"] .form-input,
[data-theme="pgeDay"] .form-select,
[data-theme="pgeDay"] .form-textarea,
[data-theme="pgeDay"] input[type="text"],
[data-theme="pgeDay"] input[type="email"],
[data-theme="pgeDay"] input[type="tel"],
[data-theme="pgeDay"] input[type="number"],
[data-theme="pgeDay"] input[type="search"],
[data-theme="pgeDay"] input[type="url"],
[data-theme="pgeDay"] input[type="date"],
[data-theme="pgeDay"] input[type="time"],
[data-theme="pgeDay"] input[type="datetime-local"],
[data-theme="pgeDay"] input[type="month"],
[data-theme="pgeDay"] input[type="week"],
[data-theme="pgeDay"] input[type="password"],
[data-theme="pgeDay"] textarea,
[data-theme="pgeDay"] select,
[data-theme="pgeDay"] #topbarClientFilter{
  background-color:rgba(244,250,255,.92) !important;
  color:#0c1b2e !important;
  border-color:rgba(21,101,192,.20) !important;
}
[data-theme="pgeDay"] input::placeholder,
[data-theme="pgeDay"] textarea::placeholder{
  color:#7a8ba6 !important; opacity:.85;
}
[data-theme="pgeDay"] .nav-tab{ color:#3f5470; }
[data-theme="pge"] select, [data-theme="pge"] option, [data-theme="pge"] optgroup{
  background-color:#04060a; color:#bcdaef;
}
[data-theme="pgeDay"] option, [data-theme="pgeDay"] optgroup{
  background-color:#f4faff; color:#0c1b2e;
}