/* ─────────────────────────────────────────────────────────────────────────
   Refreshed look — April 2026 brand guidelines applied to the portal chrome.
   Opt-in per user (avatar menu → "Refreshed look"). Everything is scoped to
   html[data-theme="refresh"], so this file is inert unless switched on.
   Owner: \Concero\Services\Theme + public/js/theme.js.

   Palette:  Binary Blue #18BFF7 · Nano Navy #161D4B (secondary #4A35BC)
             Cloud White #EAF1F7 · Cache Coral #F16C57 · Guru Green #30CCB3
             Yotta Yellow #F9D14A · Pixel Purple #A07EFA
   Type:     Poppins (body, Google Fonts) · ITC Avant Garde Gothic Pro Medium
             (caps headlines) · Chantal Medium (handwritten accent). The last
             two are self-hosted in /fonts — the same files concero.education
             serves — via the @font-face rules below; Jost / Caveat are only
             fallbacks if a local face fails to load.
   The token NAMES stay the ones every view already uses — --orange simply
   becomes Binary Blue — so the whole portal follows without per-view edits.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Avant Garde Gothic Pro';
  src: url('/fonts/itc-avant-garde-gothic-medium.otf') format('opentype');
  font-weight: 400 700;   /* one Medium face; heavier weights synthesise rather than fall back */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chantal';
  src: url('/fonts/chantalmedium.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

html[data-theme="refresh"] {
  --navy:      #161D4B;
  --navy-dk:   #0F1438;
  --navy-lt:   #4A35BC;
  --orange:    #18BFF7;
  --orange-lt: #5ED3FA;
  --orange-dk: #0BA7DE;
  --bg:        #EAF1F7;
  --surface:   #FFFFFF;
  --surface2:  #F5F8FB;
  --border:    #D8E1EB;
  --border-dk: #C3CFDC;
  --text:      #161D4B;
  --text-md:   #3B4470;
  --muted:     #6B7590;
  --green:     #148B79;   /* Guru Green, darkened for text on light tints */
  --green-dk:  #0F6E60;
  --green-bg:  #DCF6F1;
  --red:       #D2452F;   /* Cache Coral, darkened for text */
  --red-bg:    #FDE7E2;
  --amber:     #9A6F00;   /* Yotta Yellow, darkened for text */
  --amber-bg:  #FEF4CC;
  --purple:    #6541DB;   /* Pixel Purple, darkened for text */
  --purple-bg: #EEE8FE;
  --teal:      #0A7FAB;   /* Binary Blue, darkened for text */
  --teal-bg:   #DCF4FE;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(22,29,75,.05), 0 4px 14px rgba(22,29,75,.06);
  --shadow-md: 0 8px 24px rgba(22,29,75,.12);
  --font:      'Poppins', system-ui, sans-serif;
  --font-hd:   'Avant Garde Gothic Pro', 'Jost', 'Poppins', system-ui, sans-serif;
  --font-hand: 'Chantal', 'Caveat', 'Segoe Script', cursive;
  /* Card accent tops (.card-top-* in portal.css) — the guide's secondary
     "tint" row, which reads as pastel on white; a touch thicker than classic. */
  --acc-blue:   #24ECFB;
  --acc-green:  #27F4D9;
  --acc-yellow: #FFFA76;
  --acc-coral:  #FFA291;
  --acc-purple: #DCB5FD;
  --acc-navy:   #4A35BC;
  --acc-width:  4px;
}

/* Body face — the customer portal and login shells hard-code 'Inter'. */
html[data-theme="refresh"] body,
html[data-theme="refresh"] button,
html[data-theme="refresh"] input,
html[data-theme="refresh"] select,
html[data-theme="refresh"] textarea { font-family: var(--font); }

/* Headings: Avant Garde Medium, mixed case (Matt's call 2026-08-25 — the
   guide's all-caps rule is not applied in the portal). Sizes step up one tier
   from classic because Avant Garde reads smaller than Inter Tight at the
   same px. .hd / .hd-* come from portal.css; the class-based titles below
   are the header.php components. */
html[data-theme="refresh"] .hd,
html[data-theme="refresh"] .page-header h2,
html[data-theme="refresh"] .week-nav h2,
html[data-theme="refresh"] .card-title,
html[data-theme="refresh"] .modal h3,
html[data-theme="refresh"] .pt-h1,
html[data-theme="refresh"] .login-tagline h1,
html[data-theme="refresh"] .stat-card .stat-value {
  font-family: var(--font-hd);
  font-weight: 500;
  letter-spacing: 0;
}
html[data-theme="refresh"] .hd-medium { font-weight: 500; }
html[data-theme="refresh"] .hd-xs  { font-size: 14px; }
html[data-theme="refresh"] .hd-sm  { font-size: 17px; }
html[data-theme="refresh"] .hd-md  { font-size: 20px; }
html[data-theme="refresh"] .hd-lg  { font-size: 26px; }
html[data-theme="refresh"] .hd-xl  { font-size: 30px; }
html[data-theme="refresh"] .hd-2xl { font-size: 34px; }
html[data-theme="refresh"] .page-header h2,
html[data-theme="refresh"] .week-nav h2 { font-size: 26px; }
html[data-theme="refresh"] .card-title { font-size: 18px; }
html[data-theme="refresh"] .modal h3 { font-size: 20px; }
html[data-theme="refresh"] .stat-card .stat-value { font-size: 34px; }
html[data-theme="refresh"] .pt-h1 { font-size: 30px; }
html[data-theme="refresh"] .hand {
  font-family: var(--font-hand); text-transform: none; letter-spacing: -.01em; font-weight: 600;
}
/* Dashboard greeting — "Good evening, Matthew": the name in Chantal, larger so
   the handwritten face sits level with the heading beside it. */
html[data-theme="refresh"] .greet-name { font-size: 1.45em; line-height: .85; color: var(--navy); vertical-align: -.04em; }

/* Primary actions: Nano Navy text on Binary Blue (white on it is 2.1:1). */
html[data-theme="refresh"] .btn-primary,
html[data-theme="refresh"] .pt-btn-primary { color: var(--navy); font-weight: 600; }
html[data-theme="refresh"] .btn-primary:hover,
html[data-theme="refresh"] .pt-btn-primary:hover { background: var(--orange-dk); color: var(--navy); }
html[data-theme="refresh"] .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid #F6BDB2; }
html[data-theme="refresh"] .btn-danger:hover { opacity: 1; background: #FBD3CB; }

/* Nav */
html[data-theme="refresh"] .nav-avatar .user-avatar span { color: var(--navy) !important; }
html[data-theme="refresh"] .nav-dropdown a.active { background: var(--teal-bg); color: var(--teal); }
html[data-theme="refresh"] .nav-user-panel a:hover { color: var(--navy); }
html[data-theme="refresh"] .nav-user a:hover { color: #fff; }
html[data-theme="refresh"] .help-btn:hover,
html[data-theme="refresh"] .help-btn--inverted:hover { color: var(--navy); }
html[data-theme="refresh"] .help-btn:focus-visible { outline-color: var(--orange); }

/* Light-background uses of the accent that were fine in orange but not in
   Binary Blue (1.9:1 on white) — use the darkened text variant. */
html[data-theme="refresh"] .badge-orange { background: var(--teal-bg); color: var(--teal); }
html[data-theme="refresh"] .today .day-header { color: var(--teal); }
html[data-theme="refresh"] .help-modal-body .help-tip { background: var(--amber-bg); border-color: #F3DE8C; color: var(--amber); }

/* Focus ring */
html[data-theme="refresh"] input:focus,
html[data-theme="refresh"] select:focus,
html[data-theme="refresh"] textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(24,191,247,.22); }

/* Schedule entry types — project bookings were a hard-coded amber. */
html[data-theme="refresh"] .type-project,
html[data-theme="refresh"] .tech-entry.is-project { border-left-color: #F9D14A; background: rgba(249,209,74,.16); }

/* Customer portal shell */
html[data-theme="refresh"] .pt-nav a.active,
html[data-theme="refresh"] .pt-dropdown.open .pt-dropbtn,
html[data-theme="refresh"] .pt-dropbtn.active { background: var(--orange); color: var(--navy); font-weight: 600; }
html[data-theme="refresh"] .pt-card { border-radius: var(--radius-lg); }
html[data-theme="refresh"] .pt-btn { border-radius: var(--radius); }
/* Section titles inside customer-portal cards carry an inline 15px; lift them
   into the heading face like everything else. */
html[data-theme="refresh"] .pt-card h2 { font-family: var(--font-hd); font-weight: 500; letter-spacing: 0; font-size: 20px !important; }
html[data-theme="refresh"] .pt-h1 .greet-name { font-size: 1.35em; }
/* Termly reviews — the Education-style signature block: Yotta Yellow, navy
   type, white term cells. Classic keeps the plain card. */
html[data-theme="refresh"] .pt-review { background: #F9D14A; border-color: #F9D14A; color: var(--navy); }
html[data-theme="refresh"] .pt-review h2,
html[data-theme="refresh"] .pt-review .pt-sub,
html[data-theme="refresh"] .pt-review .txt-muted { color: var(--navy) !important; }
html[data-theme="refresh"] .pt-review .pt-sub { opacity: .8; }
html[data-theme="refresh"] .pt-review .grid > div { background: #fff !important; border-color: rgba(22,29,75,.12) !important; border-radius: var(--radius) !important; }

/* ── Sign-in shell — flood Nano Navy hero beside the form column ───────────
   The hero <aside> is always in the markup (views/auth/login.php) and only
   shown here; the classic layout keeps its top bar, logo tagline and value
   cards, which are hidden in exchange. */
.login-hero { display: none; }
.login-tagline .only-refresh { display: none; }
html[data-theme="refresh"] body.login-page {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch; justify-content: stretch; padding: 0; min-height: 100vh;
}
html[data-theme="refresh"] body.login-page::before { display: none; }
html[data-theme="refresh"] body.login-page .login-topbar { display: none; }
html[data-theme="refresh"] .login-hero {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 48px 56px;
}
html[data-theme="refresh"] .login-hero > * { position: relative; }
html[data-theme="refresh"] .login-hero-shape {
  position: absolute; left: -140px; bottom: -180px; width: 520px; height: 520px;
  border-radius: 160px; background: var(--navy-lt); opacity: .35; transform: rotate(14deg);
}
html[data-theme="refresh"] .login-hero-logo { height: 26px; width: auto; display: block; }
html[data-theme="refresh"] .login-hero-body { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
html[data-theme="refresh"] .login-hero-block {
  background: var(--orange); border-radius: 28px; padding: 36px 40px;
  transform: rotate(-2deg); box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
html[data-theme="refresh"] .login-hero-block h2 {
  transform: rotate(2deg); margin: 0; color: #fff;
  font-family: var(--font-hd); font-weight: 500; letter-spacing: 0;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05;
}
html[data-theme="refresh"] .login-hero-block .hand { color: var(--navy); font-size: 1.4em; line-height: .9; }
html[data-theme="refresh"] .login-hero-body p { margin: 0; padding-left: 6px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
html[data-theme="refresh"] .login-hero-values { display: flex; gap: 18px; font-size: 12px; color: rgba(255,255,255,.55); }
html[data-theme="refresh"] body.login-page .login-wrap { margin: auto; padding: 40px 24px; max-width: 468px; width: 100%; }
html[data-theme="refresh"] body.login-page .login-tagline { margin-top: 0; }
html[data-theme="refresh"] body.login-page .login-tagline .only-classic { display: none; }
html[data-theme="refresh"] body.login-page .login-tagline .only-refresh { display: block; }
html[data-theme="refresh"] body.login-page .login-tagline h1 { font-size: 30px; }
html[data-theme="refresh"] body.login-page .login-values,
html[data-theme="refresh"] body.login-page .login-values-tag { display: none; }
html[data-theme="refresh"] body.login-page .login-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
html[data-theme="refresh"] body.login-page .btn-m365,
html[data-theme="refresh"] body.login-page .btn-submit,
html[data-theme="refresh"] body.login-page input[type="email"],
html[data-theme="refresh"] body.login-page input[type="password"] { border-radius: var(--radius); }
html[data-theme="refresh"] body.login-page .btn-submit { color: var(--navy); }
html[data-theme="refresh"] body.login-page .btn-submit:hover { background: var(--orange-dk); }
@media (max-width: 900px) {
  html[data-theme="refresh"] body.login-page { grid-template-columns: 1fr; }
  html[data-theme="refresh"] .login-hero { padding: 32px 24px; gap: 28px; }
  html[data-theme="refresh"] .login-hero-block { padding: 24px 26px; }
  html[data-theme="refresh"] .login-hero-values { display: none; }
}

/* The avatar-menu switch itself (lives in both themes) */
.nav-user-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; font-size: 13px; font-weight: 500; color: var(--text-md);
  cursor: pointer; border-radius: var(--radius); user-select: none;
}
.nav-user-toggle:hover { background: var(--surface2); }
.nav-user-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-user-toggle .switch {
  position: relative; width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--border-dk); transition: background .15s;
}
.nav-user-toggle .switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s;
}
.nav-user-toggle input:checked + .switch { background: var(--orange); }
.nav-user-toggle input:checked + .switch::after { left: 16px; }
.nav-user-toggle input:focus-visible + .switch { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── Customer portal · design v2 (v5.41.11) ────────────────────────────────
   The "Customer portal — proposed" board: pill nav, org name behind a hairline,
   greeting hero with a Binary Blue blob, Cloud White date tiles, the rotated
   Yotta Yellow termly-review card, navy-on-colour avatars. Classic keeps the
   flat layout from customer-portal.css. */
/* Top-bar links only (direct children) — the dropdown menus sit inside
   .pt-nav too and must keep dark text on their white panel (v5.41.12 fix). */
html[data-theme="refresh"] .pt-nav > a,
html[data-theme="refresh"] .pt-dropbtn { border-radius: 999px; color: rgba(255,255,255,.78); }
html[data-theme="refresh"] .pt-nav > a:hover,
html[data-theme="refresh"] .pt-dropbtn:hover { color: #fff; }
html[data-theme="refresh"] .pt-dropmenu { border-radius: var(--radius); }
html[data-theme="refresh"] .pt-dropmenu a { color: var(--text); border-radius: var(--radius); }
html[data-theme="refresh"] .pt-dropmenu a:hover { background: var(--surface2); color: var(--navy); }
html[data-theme="refresh"] .pt-dropmenu a.active { background: var(--teal-bg); color: var(--teal); }
html[data-theme="refresh"] .pt-org { color: rgba(255,255,255,.75); padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); }
html[data-theme="refresh"] .pt-user { color: rgba(255,255,255,.75); }
html[data-theme="refresh"] .pt-logout { border-radius: 999px; padding: 6px 14px; }
html[data-theme="refresh"] .pt-switch select { border-radius: 999px; }
html[data-theme="refresh"] .pt-hero-shape { display: block; position: absolute; right: -40px; top: -70px; width: 220px; height: 220px; border-radius: 70px; background: var(--teal-bg); transform: rotate(20deg); }
html[data-theme="refresh"] .pt-hero-sub { font-weight: 300; color: var(--text-md); }
html[data-theme="refresh"] .pt-chip { background: var(--surface2); }
html[data-theme="refresh"] .pt-visit .d { background: var(--bg); }
html[data-theme="refresh"] .pt-badge.b-blue { background: var(--teal-bg); color: var(--teal); }
html[data-theme="refresh"] .pt-badge.b-yellow { background: var(--amber-bg); color: var(--amber); }
html[data-theme="refresh"] .pt-av.av-blue { background: #18BFF7; color: var(--navy); }
html[data-theme="refresh"] .pt-av.av-green { background: #30CCB3; color: var(--navy); }
html[data-theme="refresh"] .pt-av.av-purple { background: #A07EFA; color: var(--navy); }
/* Termly review — rotated Yotta Yellow block, content counter-rotated. */
html[data-theme="refresh"] .pt-review { border-radius: 24px; padding: 24px 26px; transform: rotate(-1.2deg); box-shadow: var(--shadow-md); }
html[data-theme="refresh"] .pt-review-in { transform: rotate(1.2deg); }
html[data-theme="refresh"] .pt-review h2 { font-size: 24px !important; line-height: 1.1; }
html[data-theme="refresh"] .pt-review h2 .hand { font-size: 1.4em; line-height: .85; color: var(--navy); }
html[data-theme="refresh"] .pt-review .pt-sub { font-weight: 500; opacity: 1; }
html[data-theme="refresh"] .pt-review .pt-term { background: #fff; border-color: rgba(22,29,75,.12); border-radius: var(--radius); }
html[data-theme="refresh"] .pt-review .pt-term.empty { background: rgba(255,255,255,.55); }
html[data-theme="refresh"] .pt-review .txt-muted { color: rgba(22,29,75,.7) !important; }
html[data-theme="refresh"] .pt-review .pt-btn-navy { background: var(--navy); color: #fff; }
html[data-theme="refresh"] .pt-sign { background: var(--teal-bg); border-left-color: var(--orange); }
html[data-theme="refresh"] .pt-chip .v { font-weight: 500; }
html[data-theme="refresh"] .pt-visit .d b { font-weight: 500; }
html[data-theme="refresh"] .db-tile .t .stat,
html[data-theme="refresh"] .db-tile .go { color: var(--teal); }
html[data-theme="refresh"] .pt-promo-dot.on { background: var(--orange); }

/* ── Onboarding pathway (onboarding.css) — brand fills ─────────────────────
   Guru Green / Yotta Yellow / Cache Coral are too light for white type, so
   the filled marks carry Nano Navy type; the text-safe darkened variants
   (--green, --amber, --red) already flow in through the shell tokens. */
html[data-theme="refresh"] .ob-scope {
  --ob-green-fill: #30CCB3; --ob-on-green: var(--navy);
  --ob-amber-fill: #F9D14A; --ob-on-amber: var(--navy);
  --ob-red-fill:   #F16C57;
  --ob-blue-line:  #B6E6F8;
  --ob-green-line: #A5EBDD;
  --ob-amber-line: #F3DE8C;
  --ob-red-line:   #F6BDB2;
  --ob-muted2:     #8B94AE;
}
html[data-theme="refresh"] .ob-hero h1,
html[data-theme="refresh"] .sv-h1 { font-weight: 500; letter-spacing: 0; }
html[data-theme="refresh"] .ob-hero h1 { font-size: 30px; }
html[data-theme="refresh"] .sv-h1 { font-size: 26px; }
html[data-theme="refresh"] .ob-phase h3,
html[data-theme="refresh"] .sv-title { font-weight: 500; letter-spacing: 0; }
html[data-theme="refresh"] .ob-phase h3 { font-size: 18px; }
html[data-theme="refresh"] .ob-phase.current h3 { font-size: 22px; font-weight: 500; }
html[data-theme="refresh"] .sv-title { font-size: 17px; }
html[data-theme="refresh"] .ob-stat .v,
html[data-theme="refresh"] .ob-ring .val b,
html[data-theme="refresh"] .sv-tile .v,
html[data-theme="refresh"] .adv .score b,
html[data-theme="refresh"] .db-banner h2 { font-weight: 500; letter-spacing: 0; }
html[data-theme="refresh"] .db-banner h2 { font-size: 24px; }
html[data-theme="refresh"] .ob-btn-primary,
html[data-theme="refresh"] .db-banner .ob-btn-primary { color: var(--navy); }
html[data-theme="refresh"] .ob-node.current .circ { box-shadow: 0 0 0 7px rgba(24,191,247,.28); }
html[data-theme="refresh"] .ob-step.done .ob-check::after { color: var(--navy); }

/* ── Mood check-in — rotated Yotta Yellow block, like the portal's termly
   review (v5.42.17). Content counter-rotated; white mood tiles; the chosen
   mood goes Nano Navy. ───────────────────────────────────────────────────── */
html[data-theme="refresh"] .mood-card { background: #F9D14A; border: 0; border-radius: 24px; padding: 20px 22px;
  transform: rotate(-1.2deg); box-shadow: var(--shadow-md); color: var(--navy); overflow: visible; }
html[data-theme="refresh"] #dash-home .dh-top-col > .mood-card { padding: 20px 22px; }
html[data-theme="refresh"] .mood-card-in { transform: rotate(1.2deg); }
/* Two deliberate lines: a lighter lead-in, then the big line with the Chantal word. */
html[data-theme="refresh"] .mood-card .hd { font-size: 24px; line-height: 1.05; }
html[data-theme="refresh"] .mood-card .mood-h-top { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(22,29,75,.8); margin-bottom: 2px; }
html[data-theme="refresh"] .mood-card .mood-h-main { display: block; }
html[data-theme="refresh"] .mood-card .hd .hand { font-size: 1.4em; line-height: .85; color: var(--navy); }
html[data-theme="refresh"] .mood-card .txt-muted { color: rgba(22,29,75,.7) !important; }
html[data-theme="refresh"] .mood-card .border-t { border-top-color: rgba(22,29,75,.14); }
html[data-theme="refresh"] .mood-card .mood-btn { background: #fff; border-color: rgba(22,29,75,.12); border-radius: var(--radius); }
html[data-theme="refresh"] .mood-card .mood-btn:hover { border-color: var(--navy); }
html[data-theme="refresh"] .mood-card .mood-btn.mood-sel { background: var(--navy); border-color: var(--navy); }
html[data-theme="refresh"] .mood-card .mood-btn.mood-sel .mood-word { color: #fff; }
html[data-theme="refresh"] .mood-card .mood-row.needs { background: rgba(255,255,255,.6); }
html[data-theme="refresh"] .mood-card details summary { color: rgba(22,29,75,.7) !important; }
html[data-theme="refresh"] .pt-member-stat .v { font-weight: 500; }
html[data-theme="refresh"] .pt-member-stat .v.txt-green { color: var(--green); }

/* Appearance segment — Nano Navy type on Binary Blue, like every primary action. */
html[data-theme="refresh"] .nav-seg-opt input:checked + span,
html[data-theme="refresh"] .nav-user-panel .nav-seg-opt input:checked + span { color: #161D4B; }

/* ═════════════════════════════════════════════════════════════════════════
   DARK MODE (v6.1.0) — opt-in from the avatar menu (Appearance → Dark, or
   System to follow the device). NEVER the default. A MODE on top of the
   refreshed look: the shell emits html[data-theme="refresh"][data-mode="dark"]
   (Theme::htmlAttr(), js/theme.js), so every refresh rule above still applies
   and this block only redefines the SAME token names — views need no edits.

   Palette: Nano Navy #161D4B becomes the card surface on a deeper navy ground;
   Binary Blue is unchanged (navy type on it, as in light); the status colours
   flip to the raw brand hues / tints (Guru Green, Yotta Yellow, Coral tint,
   Purple tint) because the darkened text variants used in light mode fail on
   navy; tinted backgrounds become the brand colour at 16–20% alpha.

   --navy is the awkward one: ~300 inline uses mean "heading text", ~60 mean
   "a navy block". It stays a (lighter) navy so the blocks still work, and the
   text uses are caught by the heading rules + the inline hammers at the end.
   Staff shell only: Theme::mode() is 'light' without a staff session.
   ═════════════════════════════════════════════════════════════════════════ */
html[data-mode="dark"] {
  color-scheme: dark;
  --navy:      #2A3478;   /* navy BLOCKS — lifted above the card surface so they still read as blocks */
  --navy-dk:   #0B1030;
  --navy-lt:   #4A35BC;
  --orange-lt: #5ED3FA;
  --orange-dk: #0BA7DE;
  --bg:        #0B1030;
  --surface:   #161D4B;   /* Nano Navy */
  --surface2:  #1F275C;
  --border:    #2B3472;
  --border-dk: #3A458F;
  --text:      #EAF1F7;   /* Cloud White */
  --text-md:   #C3CBE3;
  --muted:     #8F9ABF;   /* 5.4:1 on the surface */
  --green:     #30CCB3;   /* Guru Green, raw */
  --green-dk:  #27F4D9;
  --green-bg:  rgba(48,204,179,.16);
  --red:       #FFA291;   /* Cache Coral tint */
  --red-bg:    rgba(241,108,87,.18);
  --amber:     #F9D14A;   /* Yotta Yellow, raw */
  --amber-bg:  rgba(249,209,74,.16);
  --purple:    #DCB5FD;   /* Pixel Purple tint */
  --purple-bg: rgba(160,126,250,.20);
  --teal:      #5ED3FA;   /* Binary Blue tint — links */
  --teal-bg:   rgba(24,191,247,.16);
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.40);
  --shadow-md: 0 12px 32px rgba(0,0,0,.50);
  --acc-navy:  #4A35BC;
}
html[data-mode="dark"] body::before { opacity: .05; }

/* ── Chrome: a slightly deeper navy top bar + hairline, panels on the surface ── */
html[data-mode="dark"] nav { background: #10163D; border-bottom: 1px solid var(--border); box-shadow: none; }
html[data-mode="dark"] .mob-drawer { background: #10163D; border-right: 1px solid var(--border); }
html[data-mode="dark"] .nav-dropdown,
html[data-mode="dark"] .nav-flyout,
html[data-mode="dark"] .nav-user-panel,
html[data-mode="dark"] .nav-bell-panel,
html[data-mode="dark"] .nav-search-results { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
html[data-mode="dark"] .nav-dropdown a.active { background: var(--teal-bg); color: var(--teal); }
html[data-mode="dark"] .nav-user-panel a,
html[data-mode="dark"] .nav-user-panel .nav-user-name strong,
html[data-mode="dark"] .nav-search-item,
html[data-mode="dark"] .nav-bell-row,
html[data-mode="dark"] .nav-bell-row-body strong,
html[data-mode="dark"] .nav-fb-panel,
html[data-mode="dark"] .nav-fb-panel textarea { color: var(--text); }
html[data-mode="dark"] .nav-user-panel a:hover,
html[data-mode="dark"] .nav-search-item:hover,
html[data-mode="dark"] .nav-bell-row:hover { background: var(--surface2); }
html[data-mode="dark"] .nav-fb-panel { background: var(--surface); border-color: var(--border); }
html[data-mode="dark"] .nav-bell-badge { border-color: #10163D; }
html[data-mode="dark"] .nav-item > button.nav-link.active { border-bottom-color: var(--orange); }
html[data-mode="dark"] .modal-overlay,
html[data-mode="dark"] .mob-overlay { background: rgba(5,8,24,.65); }

/* ── Text that was navy ── */
html[data-mode="dark"] .hd,
html[data-mode="dark"] .txt-navy,
html[data-mode="dark"] .page-header h2,
html[data-mode="dark"] .week-nav h2,
html[data-mode="dark"] .card-title,
html[data-mode="dark"] .modal h3,
html[data-mode="dark"] .stat-card .stat-value,
html[data-mode="dark"] .greet-name,
html[data-mode="dark"] .nav-user-panel a:hover,
html[data-mode="dark"] h1, html[data-mode="dark"] h2, html[data-mode="dark"] h3,
html[data-mode="dark"] h4, html[data-mode="dark"] h5 { color: var(--text); }
html[data-mode="dark"] .greet-name { color: #24ECFB; }
html[data-mode="dark"] a { color: var(--teal); }

/* ── Buttons & controls ── */
html[data-mode="dark"] .btn-primary:hover { background: #5ED3FA; color: #161D4B; }
html[data-mode="dark"] .nav-seg-opt input:checked + span,
html[data-mode="dark"] .nav-user-panel .nav-seg-opt input:checked + span { background: var(--orange); color: #161D4B; }
html[data-mode="dark"] .btn-navy { background: var(--navy); color: #fff; }
html[data-mode="dark"] .btn-navy:hover { background: var(--navy-lt); }
html[data-mode="dark"] .btn-ghost { background: var(--surface2); color: var(--text-md); border-color: var(--border); }
html[data-mode="dark"] .btn-ghost:hover { background: var(--border); color: var(--text); }
html[data-mode="dark"] .btn-danger { background: var(--red-bg); color: var(--red); border-color: rgba(241,108,87,.45); }
html[data-mode="dark"] .btn-danger:hover { background: rgba(241,108,87,.3); }
html[data-mode="dark"] .help-btn:hover,
html[data-mode="dark"] .help-btn--inverted:hover { color: #161D4B; }
html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea {
  background: var(--surface2); color: var(--text); border-color: var(--border-dk); box-shadow: none;
}
html[data-mode="dark"] input::placeholder, html[data-mode="dark"] textarea::placeholder { color: var(--muted); }
html[data-mode="dark"] input:focus, html[data-mode="dark"] select:focus, html[data-mode="dark"] textarea:focus {
  border-color: var(--orange); box-shadow: 0 0 0 3px rgba(24,191,247,.28);
}
html[data-mode="dark"] .nav-user-toggle .switch::after { background: var(--text); }
html[data-mode="dark"] .nav-user-toggle input:checked + .switch { background: var(--orange); }

/* ── Badges, chips, alerts with hard-coded light pastels ── */
html[data-mode="dark"] .badge-orange { background: var(--teal-bg); color: var(--teal); }
html[data-mode="dark"] .chip-grey  { color: var(--text-md); background: var(--surface2); }
html[data-mode="dark"] .chip-blue  { color: var(--teal);   background: var(--teal-bg); }
html[data-mode="dark"] .chip-amber { color: var(--amber);  background: var(--amber-bg); }
html[data-mode="dark"] .chip-green { color: var(--green);  background: var(--green-bg); }
html[data-mode="dark"] .chip-red   { color: var(--red);    background: var(--red-bg); }
html[data-mode="dark"] .type-badge-school       { background: var(--teal-bg);   color: var(--teal);   border-color: rgba(24,191,247,.35); }
html[data-mode="dark"] .type-badge-business,
html[data-mode="dark"] .type-badge-central_team { background: var(--purple-bg); color: var(--purple); border-color: rgba(160,126,250,.4); }
html[data-mode="dark"] .code-badge { background: var(--surface2); color: var(--text-md); border-color: var(--border-dk); }
html[data-mode="dark"] .filt-btn.has-active { background: var(--surface2); border-color: var(--teal); color: var(--teal); }
html[data-mode="dark"] .filt-pill.on { background: var(--orange); color: #161D4B; border-color: var(--orange); }
html[data-mode="dark"] .mention { background: var(--purple-bg); color: var(--purple); }
html[data-mode="dark"] .alert-info    { background: var(--teal-bg);  border-color: rgba(24,191,247,.4);  color: var(--teal); }
html[data-mode="dark"] .alert-error   { border-color: rgba(241,108,87,.45); }
html[data-mode="dark"] .alert-success { border-color: rgba(48,204,179,.45); }
html[data-mode="dark"] .alert-warning { border-color: rgba(249,209,74,.45); }
html[data-mode="dark"] .help-modal-body .help-tip { border-color: rgba(249,209,74,.4); }
html[data-mode="dark"] .type-project,
html[data-mode="dark"] .tech-entry.is-project { background: rgba(249,209,74,.14); }
html[data-mode="dark"] .nav-count { background: var(--red-bg); color: var(--red); }
html[data-mode="dark"] .nav-count-urgent { background: #F16C57; color: #fff; }

/* ── Yotta Yellow blocks keep Nano Navy type (brand on-colour rule) ── */
html[data-mode="dark"] .mood-card, html[data-mode="dark"] .pt-review { color: #161D4B; }
html[data-mode="dark"] .mood-card .hd,
html[data-mode="dark"] .mood-card .hd .hand,
html[data-mode="dark"] .mood-card .mood-h-top,
html[data-mode="dark"] .pt-review h2 { color: #161D4B; }
html[data-mode="dark"] .mood-card .mood-btn { background: rgba(255,255,255,.92); color: #161D4B; }
html[data-mode="dark"] .mood-card .mood-btn.mood-sel { background: #161D4B; }

/* ── Inline-style hammers — pre-token-sweep markup ───────────────────────────
   ~100 inline white backgrounds and ~330 inline navy text colours still exist
   in views. Attribute selectors catch the common spellings; !important beats
   the inline style. The :not() guards keep navy type where it sits on a Binary
   Blue / Yotta Yellow / Guru Green block (the on-colour rule). "background:
   #fff…" also matches #fff4ec-style pastels — on navy they should go anyway.
   New code: use the tokens / portal.css classes and none of this is needed. */
html[data-mode="dark"] [style*="background:#fff"],
html[data-mode="dark"] [style*="background: #fff"],
html[data-mode="dark"] [style*="background:#FFF"],
html[data-mode="dark"] [style*="background:white"],
html[data-mode="dark"] [style*="background: white"],
html[data-mode="dark"] [style*="background-color:#fff"],
html[data-mode="dark"] [style*="background-color: #fff"],
html[data-mode="dark"] [style*="background-color:white"] { background-color: var(--surface) !important; }
html[data-mode="dark"] [style*="background:#f8fafc"],
html[data-mode="dark"] [style*="background:#f1f5f9"],
html[data-mode="dark"] [style*="background:#f5f8fb"],
html[data-mode="dark"] [style*="background:#F5F8FB"],
html[data-mode="dark"] [style*="background:#f0f3f7"],
html[data-mode="dark"] [style*="background:#f4f6f9"],
html[data-mode="dark"] [style*="background:#EAF1F7"],
html[data-mode="dark"] [style*="background:#eaf1f7"] { background-color: var(--surface2) !important; }
html[data-mode="dark"] [style^="color:var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style*=";color:var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style*="; color:var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style^="color: var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style*=";color: var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style*="; color: var(--navy)"]:not([style*="background:var(--orange)"]):not([style*="background:#18BFF7"]):not([style*="background:#F9D14A"]):not([style*="background:#30CCB3"]),
html[data-mode="dark"] [style^="color:#1a2e4a"], html[data-mode="dark"] [style*=";color:#1a2e4a"], html[data-mode="dark"] [style*="; color:#1a2e4a"],
html[data-mode="dark"] [style^="color:#161D4B"], html[data-mode="dark"] [style*=";color:#161D4B"], html[data-mode="dark"] [style*="; color:#161D4B"],
html[data-mode="dark"] [style^="color:#161d4b"], html[data-mode="dark"] [style*=";color:#161d4b"], html[data-mode="dark"] [style*="; color:#161d4b"],
html[data-mode="dark"] [style^="color:var(--text)"], html[data-mode="dark"] [style*=";color:var(--text)"] { color: var(--text) !important; }
html[data-mode="dark"] [style*="border:1px solid #e5e7eb"],
html[data-mode="dark"] [style*="border:1px solid #eee"],
html[data-mode="dark"] [style*="border:1px solid #ddd"],
html[data-mode="dark"] [style*="border:1px solid #D8E1EB"],
html[data-mode="dark"] [style*="border:1px solid #dde2ea"] { border-color: var(--border) !important; }