/* ═══════════════════════════════════════════════════════════════════
   CLEAN THEME — human, calm, single-accent redesign
   Loaded LAST (after app.css and friends) so it overrides the "Aurora
   Prism" neon/glow system without having to rewrite every rule that
   already consumes these same CSS custom properties. Same idea as the
   existing light-theme override block at the bottom of app.css — this
   just goes further and also refines the DEFAULT (dark) palette, which
   that block never touched.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* One accent, not eight -- a calm muted slate blue instead of
     competing with gold/cyan/violet/pink for attention. app.css's own
     light-theme block and typography-system.css's link/focus-ring
     colors are kept in sync with this same accent directly, since
     they're not all driven by these variables. */
  --aurora-gold:   #5b7c99;
  --aurora-amber:  #5b7c99;
  --aurora-fire:   #5b7c99;
  --aurora-cyan:   #5b7c99;
  --aurora-teal:   #5b7c99;
  --aurora-blue:   #5b7c99;
  --aurora-violet: #5b7c99;
  --aurora-pink:   #5b7c99;
  --aurora-green:  #22c55e;   /* kept distinct -- real success/positive signal */
  --aurora-red:    #ef4444;   /* kept distinct -- real danger/negative signal */

  /* Neutral, near-black surfaces instead of navy-tinted void/abyss/deep */
  --void:      #0a0a0b;
  --abyss:     #0a0a0b;
  --deep:      #0e0e10;
  --surface:   #141416;
  --elevated:  #1a1a1d;
  --float:     #1f1f23;

  --text-0: #f5f5f6;
  --text-1: #d4d4d8;
  --text-2: #8a8a92;
  --text-3: #59595f;

  --bd0: rgba(255,255,255,.06);
  --bd1: rgba(255,255,255,.10);
  --bd2: rgba(255,255,255,.16);
  --bdc: rgba(255,255,255,.10);
  --bdv: rgba(255,255,255,.10);
  --bdg: rgba(255,255,255,.10);

  /* Glows become flat, real shadows -- elevation reads through a border
     + soft shadow instead of a colored blur. */
  --glow-gold: transparent; --glow-cyan: transparent; --glow-green: transparent;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 4px 16px rgba(0,0,0,.28);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.32);

  /* Inter everywhere -- one calm, human, extremely standard UI face
     instead of a display font + a monospace font fighting for the same
     labels (JetBrains Mono on nav pills/badges/stat labels was a big
     part of what read as "generated dashboard" rather than designed).
     Reuses the SAME local Inter already preloaded/registered by
     typography-system.css (--ts-font-primary) rather than a second,
     redundant remote font load. */
  --fh: var(--ts-font-primary, 'Inter', system-ui, sans-serif);
  --fm: var(--ts-font-primary, 'Inter', system-ui, sans-serif);
  --ff: var(--ts-font-primary, 'Inter', system-ui, sans-serif);
}

body { font-family: var(--ff); }

/* Kill the glow/pulse animations -- calm, not blinking */
@keyframes orbitGlow { from{} to{} }
@keyframes corePulse { 0%,100%{} 50%{} }
@keyframes livePulse { 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@keyframes sbPulse { 0%,100%{} 50%{} }
@keyframes worldBadge { 0%,100%{} 50%{} }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--bd1);
}
.sidebar::-webkit-scrollbar-thumb { background: var(--bd2); }

.ntab {
  border-radius: 8px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.ntab:hover { background: var(--bd0); }
.ntab.active {
  background: rgba(91,124,153,.10);
  color: var(--text-0);
  box-shadow: inset 2px 0 0 var(--aurora-gold);
}
.sb-group-header {
  font-family: var(--ff);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--text-2);
}
.sb-group-header:hover { color: var(--text-0); background: var(--bd0); }
.sb-group-body .ntab { font-size: 12.5px; }

/* ── Sidebar search (find-a-feature filter) ────────────────────── */
.sb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 14px 6px; padding: 8px 10px;
  background: var(--bd0); border: 1px solid var(--bd1); border-radius: 9px;
  flex-shrink: 0;
}
.sb-search-ico { font-size: 12px; opacity: .6; flex-shrink: 0; }
.sb-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--ff); font-size: 12.5px; color: var(--text-0);
}
.sb-search input::placeholder { color: var(--text-3); }
#sbSearchClear {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 11px; padding: 2px; flex-shrink: 0; line-height: 1;
}
#sbSearchClear:hover { color: var(--text-0); }
body.sb-collapsed .sb-search { display: none; }

/* Ticker: real data, but a calm static strip instead of a scrolling
   rainbow-gradient marquee -- the classic "look, it moves!" pattern a
   human designer wouldn't reach for on a serious product. */
.marquee { background: var(--surface); border-bottom: 1px solid var(--bd0); }
.mtrack { animation: none !important; }

/* Flatten glow-based box-shadows across badges/pills to the calm shadow
   tokens instead -- catches classes that hardcode a colored glow rather
   than reading --glow-* (which the :root override above can't reach). */
.bdg.world, .bdg.live, .bdg.new-feat {
  animation: none;
  box-shadow: none;
  border-color: var(--bd1);
}

/* ── Cards / elevated surfaces: real shadow, not colored glow ──────── */
.card, .spanel, .os-panel, .recruiter-card {
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-md); }

/* ── Buttons: solid, calm, one accent ──────────────────────────────── */
.btn-p, .btn-gold {
  background: var(--aurora-gold);
  box-shadow: none;
}
.btn-p:hover, .btn-gold:hover { background: #4a6a86; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — real white background, not a dark theme with lighter
   accents. Extends the existing [data-theme="light"] block in app.css
   (which already covers .sidebar/.card/inputs) with the pieces it
   didn't reach, plus this file's own new classes.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --void: #ffffff; --abyss: #ffffff; --deep: #fafafa;
  --surface: #ffffff; --elevated: #ffffff; --float: #f5f6f8;
  --text-0: #16161a; --text-1: #3f3f46; --text-2: #71717a; --text-3: #a1a1aa;
  --bd0: rgba(0,0,0,.05); --bd1: rgba(0,0,0,.09); --bd2: rgba(0,0,0,.14);
  --bdc: rgba(0,0,0,.09); --bdv: rgba(0,0,0,.09); --bdg: rgba(0,0,0,.09);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 28px rgba(16,24,40,.10);

  /* Real bug found live: app.css's own [data-theme="light"] block (this
     file loads after it, but only ever redefined --void/--surface/--text
     etc above) re-sets --aurora-gold/--cyan/--violet/--accent/--accent2
     back to its original brown-gold/blue/violet trio -- meaning light
     mode was still rendering the old multi-color scheme this whole time,
     regardless of every dark-mode fix above. Same one accent, just a
     darker shade for AA contrast on a white surface. */
  --aurora-gold:   #4a6a86;
  --aurora-amber:  #4a6a86;
  --aurora-fire:   #4a6a86;
  --aurora-cyan:   #4a6a86;
  --aurora-teal:   #4a6a86;
  --aurora-blue:   #4a6a86;
  --aurora-violet: #4a6a86;
  --aurora-pink:   #4a6a86;
  --aurora-green:  #16a34a;
  --aurora-red:    #dc2626;
  --accent:  #4a6a86;
  --accent2: #3d5872;
  --accent3: #4a6a86;
}
[data-theme="light"] body { background: #ffffff; }
[data-theme="light"] .marquee { background: #fafafa; border-bottom: 1px solid var(--bd0); }
[data-theme="light"] .ntab.active { background: rgba(91,124,153,.08); color: #3d5872; }
[data-theme="light"] .card, [data-theme="light"] .spanel { box-shadow: var(--shadow-sm); border-color: var(--bd1); }
[data-theme="light"] .card:hover { box-shadow: var(--shadow-md); }
[data-theme="light"] .bdg.world, [data-theme="light"] .bdg.live, [data-theme="light"] .bdg.new-feat {
  box-shadow: none; border-color: var(--bd1); background: var(--float); color: var(--text-1);
}

/* Profile Guardian and toasts hardcode a dark navy background as an
   inline style (not a class), so they stayed dark even after switching
   to light theme -- the one jarring holdover confirmed live. Inline
   styles win the cascade over a plain selector, so this needs the ID
   directly with !important, same as the card/badge overrides above. */
[data-theme="light"] #csProfileGuardian {
  background: #ffffff !important;
  border-color: var(--bd1) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Only the two spots that were near-white text / near-white ring-track
   on the old dark background -- everything else (amber accents, the
   mid-gray "missing" line, the close button) already has real contrast
   on white and is left alone. */
[data-theme="light"] #pgStatus { color: var(--text-0) !important; }
[data-theme="light"] #pgRingWrap svg circle:first-child { stroke: var(--bd2) !important; }

/* Same inline-dark-gradient pattern as #csProfileGuardian above, on the
   "Welcome back" personalisation banner -- confirmed live: stayed dark
   navy after switching to light theme. */
[data-theme="light"] #csPersoBanner {
  background: #ffffff !important;
  border-color: var(--bd1) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] #persoGreeting { color: var(--text-0) !important; }
[data-theme="light"] #persoPriority { color: var(--text-2) !important; }
/* ── Theme toggle button (replaces the old 5-dot theme-switcher) ──── */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--bd0); border: 1px solid var(--bd1);
  font-size: 15px; cursor: pointer; transition: background .2s, border-color .2s;
}
.theme-toggle-btn:hover { background: rgba(91,124,153,.10); border-color: rgba(91,124,153,.3); }

[data-theme="light"] .toast {
  background: #ffffff !important;
  border-color: var(--bd1) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-0) !important;
}