/* ============================================================
   DS CRM — App Stylesheet
   frontend/assets/css/app.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --crimson:   #8B1A3C;
  --crimson-d: #6a1330;
  --crimson-l: #f7e8ed;
  --gold:      #F5A800;
  --gold-d:    #c98a00;
  --gold-l:    #fef6e0;
  --ink:       #1A1A1A;
  --muted:     #7a7068;
  --border:    #e0dbd9;
  --surface:   #f8f6f4;
  --white:     #fff;
  --green:     #2e7d52;
  --blue:      #185fa5;
  --amber:     #ba7517;
  /* Structural theme tokens */
  --card-bg:        #ffffff;
  --nav-bg:         #ffffff;
  --modal-bg:       #ffffff;
  --header-bg:      #8B1A3C;
  --header-accent:  #F5A800;
  --th-bg:          #8B1A3C;
  --th-color:       #ffffff;
  --row-hover:      #faf8f7;
  --bar-track:      #ede8e5;
  --border-subtle:  #f0ebe8;
  --surface-raised: #fafafa;
}

/* ── Dark theme — Linear/Vercel-grade refined warmth ────────
   Philosophy: warm near-black base, brand crimson preserved,
   layered surfaces create depth, muted is readable on dark.   */
[data-theme="dark"] {
  --crimson:        #c8385e;
  --crimson-d:      #a02a4a;
  --crimson-l:      #240e18;
  --gold:           #F5A800;
  --gold-d:         #c98a00;
  --gold-l:         #1e1400;
  --ink:            #ece6e0;
  --muted:          #9a9080;
  --border:         #28231e;
  --surface:        #0e0c0a;
  --white:          #181410;
  --green:          #3ec077;
  --blue:           #4898d8;
  --amber:          #e09828;
  --card-bg:        #181410;
  --nav-bg:         #120f0c;
  --modal-bg:       #1c1814;
  --header-bg:      #5c1228;
  --header-accent:  #F5A800;
  --th-bg:          #300e1a;
  --th-color:       #f2e0e6;
  --row-hover:      #201c18;
  --bar-track:      #201c18;
  --border-subtle:  #1c1814;
  --surface-raised: #1c1814;
}

/* ── Matrix theme — The Matrix phosphor-green terminal ──────
   Philosophy: void-black void, #00ff41 phosphor as the single
   dominant signal, dim muted greens for secondary beats,
   CRT scanlines + neon glow used with surgical restraint.    */
[data-theme="matrix"] {
  --crimson:        #00ff41;   /* Matrix phosphor green */
  --crimson-d:      #00cc33;
  --crimson-l:      #001a0a;
  --gold:           #39ff14;   /* Chartreuse — secondary green accent */
  --gold-d:         #2dd10f;
  --gold-l:         #091400;
  --ink:            #78cc78;   /* Medium phosphor — readable, not eye-searing */
  --muted:          #4aaa4a;   /* Medium forest green — labels */
  --border:         #0d2a0d;
  --surface:        #070d07;
  --white:          #0a120a;
  --green:          #00ff41;
  --blue:           #00cc66;
  --amber:          #aaff00;
  --card-bg:        #0a120a;
  --nav-bg:         #060b06;
  --modal-bg:       #0b150b;
  --header-bg:      #040804;
  --header-accent:  #00ff41;
  --th-bg:          #040e04;
  --th-color:       #00ff41;
  --row-hover:      #0d1d0d;
  --bar-track:      #091409;
  --border-subtle:  #0c1b0c;
  --surface-raised: #0e1a0e;
}

/* ── Cyberpunk theme — Blade Runner terminal aesthetic ───────
   Philosophy: deep indigo-black base, electric cyan as the
   single dominant accent, hot magenta for secondary beats,
   scanline texture, neon glows used with restraint.           */
[data-theme="cyberpunk"] {
  --crimson:        #00e5ff;
  --crimson-d:      #00b8cc;
  --crimson-l:      #001c28;
  --gold:           #ff2080;
  --gold-d:         #cc1a66;
  --gold-l:         #1a0010;
  --ink:            #cce8ff;
  --muted:          #4a7090;
  --border:         #101e3a;
  --surface:        #060810;
  --white:          #0a0d1e;
  --green:          #00ff9d;
  --blue:           #0090ff;
  --amber:          #ff8800;
  --card-bg:        #0a0d1e;
  --nav-bg:         #07081a;
  --modal-bg:       #0c1024;
  --header-bg:      #04050e;
  --header-accent:  #00e5ff;
  --th-bg:          #02030a;
  --th-color:       #00e5ff;
  --row-hover:      #0c1028;
  --bar-track:      #0a1530;
  --border-subtle:  #0c1428;
  --surface-raised: #0c1028;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  overflow: hidden;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6cdc9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b5ada9; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all .12s;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  border-left: 3px solid transparent;
  user-select: none;
}
.nav-item:hover  { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--crimson-l); color: var(--crimson); font-weight: 600; border-left-color: var(--crimson); }
.nav-label { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 16px 5px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.card-title { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: all .12s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-crimson { background: var(--crimson); color: #fff; }
.btn-crimson:hover { background: var(--crimson-d); }
.btn-gold    { background: var(--gold); color: var(--ink); font-weight: 600; }
.btn-gold:hover { background: var(--gold-d); color: #fff; }
.btn-ghost   { background: var(--card-bg); color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm      { padding: 4px 10px; font-size: 11px; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  display: block;
}
.form-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  background: var(--surface);
  color: var(--ink);
}
.form-input:focus { border-color: var(--crimson); background: var(--card-bg); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Table hover ─────────────────────────────────────────── */
tr:hover td { background: var(--row-hover) !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { display: none; }
  #main-content { padding: 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   THEME OVERRIDES — using [style*=""] attribute selectors +
   !important to beat inline styles in JS-generated HTML.
   These are the 540 hardcoded colour instances we can't touch
   individually; CSS wins over inline when !important is set.
   ═══════════════════════════════════════════════════════════ */

/* ── White card/surface backgrounds ─────────────────────── */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="cyberpunk"] [style*="background:#fff"] {
  background: var(--card-bg) !important;
  color: var(--ink);
}

/* ── Progress-bar track (the unfilled portion) ───────────── */
[data-theme="dark"] [style*="background:#f0ebe8"],
[data-theme="cyberpunk"] [style*="background:#f0ebe8"] {
  background: var(--bar-track) !important;
}

/* ── Slightly-raised off-white surfaces (#fafafa) ────────── */
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="cyberpunk"] [style*="background:#fafafa"] {
  background: var(--surface-raised) !important;
}

/* ── Very light warm tint (#f8f6f4) ─────────────────────── */
[data-theme="dark"] [style*="background:#f8f6f4"],
[data-theme="cyberpunk"] [style*="background:#f8f6f4"] {
  background: var(--surface) !important;
}

/* ── Target / grey bar fill ──────────────────────────────── */
[data-theme="dark"] [style*="background:#d4c8c5"],
[data-theme="cyberpunk"] [style*="background:#d4c8c5"] {
  background: rgba(255,255,255,.1) !important;
}

/* ── Inline table-header cells that bypass tableWrap ─────── */
[data-theme="dark"] th[style*="background:#8B1A3C"],
[data-theme="cyberpunk"] th[style*="background:#8B1A3C"] {
  background: var(--th-bg) !important;
  color: var(--th-color) !important;
}

/* ── Row separators — both subtle and standard borders ───── */
[data-theme="dark"] [style*="border-bottom:0.5px solid #f0ebe8"],
[data-theme="cyberpunk"] [style*="border-bottom:0.5px solid #f0ebe8"] {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="dark"] [style*="border-bottom:0.5px solid #e0dbd9"],
[data-theme="cyberpunk"] [style*="border-bottom:0.5px solid #e0dbd9"] {
  border-bottom-color: var(--border) !important;
}

/* ── Primary text forced dark (invisible on dark bg) ─────── */
[data-theme="dark"] [style*="color:#1A1A1A"],
[data-theme="cyberpunk"] [style*="color:#1A1A1A"] {
  color: var(--ink) !important;
}

/* ── Muted secondary text ────────────────────────────────── */
[data-theme="dark"] [style*="color:#7a7068"],
[data-theme="cyberpunk"] [style*="color:#7a7068"] {
  color: var(--muted) !important;
}

/* ── All table cells inherit theme ink + border ──────────── */
[data-theme="dark"] td,
[data-theme="cyberpunk"] td {
  border-bottom-color: var(--border-subtle) !important;
  color: var(--ink);
}

/* ── Status pill backgrounds — darken pastels on dark bg ─── */
[data-theme="dark"] span[style*="#eaf3de"],
[data-theme="dark"] span[style*="#faeeda"],
[data-theme="dark"] span[style*="#fcebeb"],
[data-theme="dark"] span[style*="#e6f1fb"],
[data-theme="dark"] span[style*="#f1efe8"] {
  filter: brightness(0.38) saturate(1.8) !important;
}
[data-theme="cyberpunk"] span[style*="#eaf3de"],
[data-theme="cyberpunk"] span[style*="#faeeda"],
[data-theme="cyberpunk"] span[style*="#fcebeb"],
[data-theme="cyberpunk"] span[style*="#e6f1fb"],
[data-theme="cyberpunk"] span[style*="#f1efe8"] {
  filter: brightness(0.28) saturate(2.5) !important;
}

/* ─────────────────────────────────────────────────────────
   SCROLLBARS
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-thumb        { background: #2e2a24; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover  { background: #3e3930; }
[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb       { background: #0c1830; }
[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,.35); }

/* ─────────────────────────────────────────────────────────
   DARK THEME — surface + hover refinements
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] .card {
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .card:hover {
  border-color: rgba(200,56,94,.25);
}
[data-theme="dark"] .btn-crimson {
  box-shadow: 0 2px 8px rgba(200,56,94,.25);
}

/* ─────────────────────────────────────────────────────────
   CYBERPUNK — neon glow system
   ───────────────────────────────────────────────────────── */
[data-theme="cyberpunk"] .card {
  border-color: rgba(0,229,255,.1);
  box-shadow: 0 4px 24px rgba(0,0,0,.7), inset 0 1px 0 rgba(0,229,255,.06);
}
[data-theme="cyberpunk"] .card-header {
  border-bottom-color: rgba(0,229,255,.1);
  background: linear-gradient(180deg, rgba(0,229,255,.04) 0%, transparent 100%);
}
[data-theme="cyberpunk"] .card-title {
  color: var(--ink);
  text-shadow: 0 0 20px rgba(0,229,255,.3);
}
[data-theme="cyberpunk"] .nav-item:hover {
  background: rgba(0,229,255,.05);
  color: var(--crimson);
}
[data-theme="cyberpunk"] .nav-item.active {
  box-shadow: inset 0 0 30px rgba(0,229,255,.07);
  text-shadow: 0 0 12px rgba(0,229,255,.4);
}
[data-theme="cyberpunk"] .nav-label {
  color: rgba(0,229,255,.4);
}
[data-theme="cyberpunk"] .btn-crimson {
  letter-spacing: .04em;
  box-shadow: 0 0 18px rgba(0,229,255,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
[data-theme="cyberpunk"] .btn-crimson:hover {
  box-shadow: 0 0 32px rgba(0,229,255,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
[data-theme="cyberpunk"] .btn-gold {
  box-shadow: 0 0 18px rgba(255,32,128,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
[data-theme="cyberpunk"] .btn-gold:hover {
  box-shadow: 0 0 32px rgba(255,32,128,.55);
}
[data-theme="cyberpunk"] .btn-ghost {
  border-color: rgba(0,229,255,.2);
  color: var(--ink);
}
[data-theme="cyberpunk"] .btn-ghost:hover {
  border-color: rgba(0,229,255,.4);
  background: rgba(0,229,255,.05);
}
[data-theme="cyberpunk"] .form-input {
  color: var(--ink);
  border-color: rgba(0,229,255,.15);
}
[data-theme="cyberpunk"] .form-input:focus {
  border-color: rgba(0,229,255,.5);
  box-shadow: 0 0 0 3px rgba(0,229,255,.12), 0 0 16px rgba(0,229,255,.1);
}

/* Scanline texture — subtle CRT feel */
[data-theme="cyberpunk"] #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,229,255,.022) 2px,
    rgba(0,229,255,.022) 3px
  );
  pointer-events: none;
  z-index: 9000;
}

/* ── Theme picker ─────────────────────────────────────────── */
#theme-avatar { transition: opacity .15s, transform .1s; }
#theme-avatar:hover { opacity: .8; transform: scale(1.08); }
#theme-picker { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   MATRIX THEME — THE MATRIX PHOSPHOR-GREEN TERMINAL
   Philosophy: void-black void. Phosphor green, not neon.
   Glow ellipses behind bright characters simulate CRT bloom.
   Dark bar bases let characters and bloom pop — like the film.
   ═══════════════════════════════════════════════════════════ */

/*
  MATRIX RAIN SVG TILE — base64 encoded 16×12px tile
  Bloom design: two glow ellipses (18%/13% opacity) at y=5 create
  the soft phosphor halo. Bright "head" char ｦ (#ccffcc op.88)
  sits inside the bloom. Medium ｸ (#3daa3d op.58) is secondary.
  Dark ｼ + 3 are dim trailing chars (op.26-30) barely visible.
  background-position:0 50% centres chars in thin bars.
*/

/* ─────────────────────────────────────────────────────────
   1. SCROLLBAR
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] ::-webkit-scrollbar-track { background: #040804; }
[data-theme="matrix"] ::-webkit-scrollbar-thumb { background: #0d2a0d; border-radius: 3px; }
[data-theme="matrix"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,65,.35); }

/* ─────────────────────────────────────────────────────────
   2. CRT SCANLINE OVERLAY
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,255,65,.016) 2px,
    rgba(0,255,65,.016) 3px
  );
  pointer-events: none;
  z-index: 9000;
}

/* ─────────────────────────────────────────────────────────
   3. CARDS
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] .card {
  border-color: rgba(0,255,65,.14);
  box-shadow:
    0 4px 28px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(0,255,65,.05),
    0 0 0 0.5px rgba(0,255,65,.06);
}
[data-theme="matrix"] .card:hover {
  border-color: rgba(0,255,65,.35);
  box-shadow:
    0 4px 32px rgba(0,0,0,.95),
    0 0 22px rgba(0,255,65,.07),
    inset 0 1px 0 rgba(0,255,65,.06);
}
[data-theme="matrix"] .card-header {
  border-bottom-color: rgba(0,255,65,.1);
  background: linear-gradient(180deg, rgba(0,255,65,.035) 0%, transparent 100%);
}
[data-theme="matrix"] .card-title {
  font-family: 'Courier New', Courier, monospace;
  color: #00ff41;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  text-shadow:
    0 0 6px rgba(0,255,65,.55),
    0 0 16px rgba(0,255,65,.22);
}

/* ─────────────────────────────────────────────────────────
   4. NAV
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] .nav-item:hover {
  background: rgba(0,255,65,.055);
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0,255,65,.4);
}
[data-theme="matrix"] .nav-item.active {
  background: rgba(0,255,65,.08);
  color: #00ff41;
  border-left-color: #00ff41;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(0,255,65,.7), 0 0 20px rgba(0,255,65,.3);
  box-shadow: inset 0 0 30px rgba(0,255,65,.06), inset 3px 0 12px rgba(0,255,65,.08);
}
[data-theme="matrix"] .nav-label {
  color: rgba(0,255,65,.35);
  letter-spacing: .16em;
  font-family: 'Courier New', Courier, monospace;
  font-size: 8.5px;
}

/* ─────────────────────────────────────────────────────────
   5. BUTTONS — terminal-style outlined, no fills
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] .btn-crimson {
  background: transparent;
  color: #00ff41;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid #00ff41;
  text-shadow: 0 0 8px rgba(0,255,65,.8);
  box-shadow: 0 0 12px rgba(0,255,65,.3), inset 0 0 12px rgba(0,255,65,.05);
}
[data-theme="matrix"] .btn-crimson:hover {
  background: rgba(0,255,65,.1);
  color: #00ff41;
  box-shadow:
    0 0 24px rgba(0,255,65,.55),
    0 0 48px rgba(0,255,65,.2),
    inset 0 0 16px rgba(0,255,65,.1);
  text-shadow: 0 0 8px rgba(0,255,65,1), 0 0 20px rgba(0,255,65,.6);
}
[data-theme="matrix"] .btn-gold {
  background: transparent;
  color: #39ff14;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid #39ff14;
  text-shadow: 0 0 8px rgba(57,255,20,.7);
  box-shadow: 0 0 10px rgba(57,255,20,.25), inset 0 0 10px rgba(57,255,20,.04);
}
[data-theme="matrix"] .btn-gold:hover {
  background: rgba(57,255,20,.08);
  box-shadow: 0 0 20px rgba(57,255,20,.5), 0 0 40px rgba(57,255,20,.18);
  text-shadow: 0 0 10px rgba(57,255,20,1), 0 0 22px rgba(57,255,20,.55);
}
[data-theme="matrix"] .btn-ghost {
  border-color: rgba(0,255,65,.2);
  color: var(--muted);
  background: transparent;
}
[data-theme="matrix"] .btn-ghost:hover {
  border-color: rgba(0,255,65,.45);
  color: #00ff41;
  background: rgba(0,255,65,.05);
  text-shadow: 0 0 6px rgba(0,255,65,.4);
}

/* ─────────────────────────────────────────────────────────
   6. FORM INPUTS — monospace terminal feel
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] .form-input {
  background: #040c04;
  border-color: rgba(0,255,65,.2);
  color: var(--ink);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: .03em;
}
[data-theme="matrix"] .form-input:focus {
  border-color: #00ff41;
  background: #030a03;
  color: #00ff41;
  text-shadow: 0 0 6px rgba(0,255,65,.3);
  box-shadow:
    0 0 0 3px rgba(0,255,65,.1),
    0 0 16px rgba(0,255,65,.12),
    inset 0 0 8px rgba(0,255,65,.04);
}

/* ─────────────────────────────────────────────────────────
   7. BIG METRIC NUMBERS — phosphor bloom + monospace
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="font-size:28px"],
[data-theme="matrix"] [style*="font-size:24px"],
[data-theme="matrix"] [style*="font-size:20px"] {
  font-family: 'Courier New', Courier, monospace !important;
  color: #00ff41 !important;
  letter-spacing: .04em !important;
  text-shadow:
    0 0 8px rgba(0,255,65,.65),
    0 0 20px rgba(0,255,65,.28) !important;
}

/* ─────────────────────────────────────────────────────────
   8. INLINE OVERRIDES — SURFACES
   ───────────────────────────────────────────────────────── */
/* Modal boxes, combobox dropdowns, card surfaces */
[data-theme="matrix"] [style*="background:#fff"] {
  background: var(--card-bg) !important;
  color: var(--ink) !important;
}
/* Bar track fills */
[data-theme="matrix"] [style*="background:#f0ebe8"] {
  background: var(--bar-track) !important;
}
/* Raised surface */
[data-theme="matrix"] [style*="background:#fafafa"] {
  background: var(--surface-raised) !important;
}
/* Main surface */
[data-theme="matrix"] [style*="background:#f8f6f4"] {
  background: var(--surface) !important;
}
/* Target bar grey fill → dim phosphor green */
[data-theme="matrix"] [style*="background:#d4c8c5"] {
  background: rgba(0,255,65,.1) !important;
}
/* Frozen-pane bg, logged-by banner, quote group header */
[data-theme="matrix"] [style*="background:#f1efe8"] {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
}

/* ─────────────────────────────────────────────────────────
   9. BU FORECAST GRID — alternating column bands + cells
   ───────────────────────────────────────────────────────── */
/* Q1/Q3 column tint — barely lighter than card-bg */
[data-theme="matrix"] [style*="background:#f5f3f1"],
[data-theme="matrix"] td[style*="background:#f5f3f1"] {
  background: rgba(0,255,65,.022) !important;
}
/* Q2/Q4 white columns */
[data-theme="matrix"] td[style*="background:#ffffff"] {
  background: var(--card-bg) !important;
  color: var(--ink) !important;
}
/* Cell-edited flash → green pulse instead of yellow */
[data-theme="matrix"] [style*="background:#fffbcc"] {
  background: rgba(0,255,65,.18) !important;
  box-shadow: inset 0 0 8px rgba(0,255,65,.35) !important;
}
/* Forecast grid cell inputs */
[data-theme="matrix"] input[id^="fc-c-"] {
  background: transparent !important;
  border: 1px solid rgba(0,255,65,.18) !important;
  color: var(--ink) !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 11px !important;
  outline: none !important;
  text-align: right !important;
}
[data-theme="matrix"] input[id^="fc-c-"]:focus {
  border-color: #00ff41 !important;
  background: rgba(0,255,65,.05) !important;
  color: #00ff41 !important;
  text-shadow: 0 0 6px rgba(0,255,65,.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,65,.3),
    0 0 10px rgba(0,255,65,.2) !important;
}
/* Sticky left columns — use nav-bg as frozen pane */
[data-theme="matrix"] th[style*="position:sticky"],
[data-theme="matrix"] td[style*="position:sticky"] {
  background: var(--nav-bg) !important;
  border-right: 1px solid rgba(0,255,65,.18) !important;
}

/* ─────────────────────────────────────────────────────────
   10. TABLE HEADERS — hardcoded crimson → Matrix void
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] th[style*="background:#8B1A3C"] {
  background: var(--th-bg) !important;
  color: var(--th-color) !important;
  font-family: 'Courier New', Courier, monospace !important;
  letter-spacing: .06em !important;
  text-shadow: 0 0 8px rgba(0,255,65,.6) !important;
  border-bottom: 1px solid rgba(0,255,65,.2) !important;
}

/* ─────────────────────────────────────────────────────────
   11. BORDERS & SEPARATORS
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="border-bottom:0.5px solid #f0ebe8"] {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="matrix"] [style*="border-bottom:0.5px solid #e0dbd9"] {
  border-bottom-color: var(--border) !important;
}
[data-theme="matrix"] [style*="border:1px solid #e0dbd9"] {
  border-color: rgba(0,255,65,.18) !important;
}
[data-theme="matrix"] [style*="border:0.5px solid #e0dbd9"] {
  border-color: rgba(0,255,65,.14) !important;
}
[data-theme="matrix"] [style*="border:1px solid #c8c2bc"] {
  border-color: rgba(0,255,65,.18) !important;
}

/* ─────────────────────────────────────────────────────────
   12. TEXT COLOUR OVERRIDES
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="color:#1A1A1A"]  { color: var(--ink) !important; }
[data-theme="matrix"] [style*="color:#7a7068"]  { color: var(--muted) !important; }
[data-theme="matrix"] [style*="color:#5f5e5a"]  { color: var(--muted) !important; }
[data-theme="matrix"] [style*="color:#3b6d11"]  { color: #00ff41 !important; text-shadow: 0 0 6px rgba(0,255,65,.5) !important; }
[data-theme="matrix"] [style*="color:#185fa5"]  { color: #00cc66 !important; }
[data-theme="matrix"] [style*="color:#a32d2d"]  { color: #aaff00 !important; }
[data-theme="matrix"] [style*="color:#ba7517"]  { color: #99ff00 !important; }
[data-theme="matrix"] [style*="color:#c98a00"]  { color: #99ff00 !important; }
/* CRITICAL: crimson text used for ALL page headings, opp links, forecast
   totals, row totals, TOTALS label — invisible without this override     */
[data-theme="matrix"] [style*="color:#8B1A3C"]  { color: #00d63a !important; }

/* ─────────────────────────────────────────────────────────
   12b. BORDER COLOUR OVERRIDES
   ───────────────────────────────────────────────────────── */
/* Loading spinners use border-top-color:#8B1A3C */
[data-theme="matrix"] [style*="border-top-color:#8B1A3C"] {
  border-top-color: #00ff41 !important;
}
/* Forecast TOTALS row top border + cell borders */
[data-theme="matrix"] [style*="border-top:2px solid #8B1A3C"] {
  border-top-color: rgba(0,255,65,.35) !important;
}
[data-theme="matrix"] [style*="border-left:2px solid #c8c2bc"] {
  border-left-color: rgba(0,255,65,.2) !important;
}
/* Ghost buttons with crimson border (e.g. Sync All) */
[data-theme="matrix"] [style*="border-color:#8B1A3C"] {
  border-color: rgba(0,255,65,.45) !important;
  color: #00d63a !important;
}
/* Light border on AI forecast button */
[data-theme="matrix"] [style*="border:1px solid #cad4f5"] {
  border-color: rgba(0,255,65,.25) !important;
  color: #00cc66 !important;
}

/* ─────────────────────────────────────────────────────────
   13. TABLE CELLS — universal fallback
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] td {
  border-bottom-color: var(--border-subtle) !important;
  color: var(--ink);
}
[data-theme="matrix"] tr:hover td { background: var(--row-hover) !important; }

/* ─────────────────────────────────────────────────────────
   14. BAR FILLS — MATRIX RAIN BLOOM EFFECT
   Dark base lets the bright-green characters & glow pop.
   Tile: 16×12px — two glow ellipses (bloom) + bright head
   char ｦ (#ccffcc) + medium ｸ (#3daa3d) + dim tails.
   background-position:0 50% centres tile in thin bars.
   :not(span) prevents texture on small status pills.
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="background:#2e7d52"]:not(span) {
  background-color: rgba(0,55,18,0.94) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxMic+PGVsbGlwc2UgY3g9JzQnIGN5PSc1JyByeD0nNicgcnk9JzUnIGZpbGw9JyMwMGZmNDEnIG9wYWNpdHk9JzAuMTgnLz48ZWxsaXBzZSBjeD0nMTInIGN5PSc1JyByeD0nNS41JyByeT0nNC41JyBmaWxsPScjMDBmZjQxJyBvcGFjaXR5PScwLjEzJy8+PHRleHQgeD0nMScgeT0nOCcgZm9udC1mYW1pbHk9J21vbm9zcGFjZScgZm9udC1zaXplPSc3JyBmaWxsPScjY2NmZmNjJyBvcGFjaXR5PScwLjg4Jz4mI3hGRjY2OzwvdGV4dD48dGV4dCB4PSc5JyB5PSc3JyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMzZGFhM2QnIG9wYWNpdHk9JzAuNTgnPiYjeEZGNzg7PC90ZXh0Pjx0ZXh0IHg9JzEnIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMwZDQwMTgnIG9wYWNpdHk9JzAuMjYnPiYjeEZGN0M7PC90ZXh0Pjx0ZXh0IHg9JzknIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMxNTUwMjInIG9wYWNpdHk9JzAuMzAnPjM8L3RleHQ+PC9zdmc+") !important;
  background-size: 16px 12px !important;
  background-repeat: repeat !important;
  background-position: 0 50% !important;
  box-shadow: inset 0 0 10px rgba(0,255,65,.3), 0 0 8px rgba(0,255,65,.22) !important;
}
[data-theme="matrix"] [style*="background:#ba7517"]:not(span) {
  background-color: rgba(0,42,13,0.92) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxMic+PGVsbGlwc2UgY3g9JzQnIGN5PSc1JyByeD0nNicgcnk9JzUnIGZpbGw9JyMwMGZmNDEnIG9wYWNpdHk9JzAuMTgnLz48ZWxsaXBzZSBjeD0nMTInIGN5PSc1JyByeD0nNS41JyByeT0nNC41JyBmaWxsPScjMDBmZjQxJyBvcGFjaXR5PScwLjEzJy8+PHRleHQgeD0nMScgeT0nOCcgZm9udC1mYW1pbHk9J21vbm9zcGFjZScgZm9udC1zaXplPSc3JyBmaWxsPScjY2NmZmNjJyBvcGFjaXR5PScwLjg4Jz4mI3hGRjY2OzwvdGV4dD48dGV4dCB4PSc5JyB5PSc3JyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMzZGFhM2QnIG9wYWNpdHk9JzAuNTgnPiYjeEZGNzg7PC90ZXh0Pjx0ZXh0IHg9JzEnIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMwZDQwMTgnIG9wYWNpdHk9JzAuMjYnPiYjeEZGN0M7PC90ZXh0Pjx0ZXh0IHg9JzknIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMxNTUwMjInIG9wYWNpdHk9JzAuMzAnPjM8L3RleHQ+PC9zdmc+") !important;
  background-size: 16px 12px !important;
  background-repeat: repeat !important;
  background-position: 0 50% !important;
  box-shadow: inset 0 0 8px rgba(0,255,65,.22) !important;
}
[data-theme="matrix"] [style*="background:#F5A800"]:not(span) {
  background-color: rgba(0,48,16,0.93) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxMic+PGVsbGlwc2UgY3g9JzQnIGN5PSc1JyByeD0nNicgcnk9JzUnIGZpbGw9JyMwMGZmNDEnIG9wYWNpdHk9JzAuMTgnLz48ZWxsaXBzZSBjeD0nMTInIGN5PSc1JyByeD0nNS41JyByeT0nNC41JyBmaWxsPScjMDBmZjQxJyBvcGFjaXR5PScwLjEzJy8+PHRleHQgeD0nMScgeT0nOCcgZm9udC1mYW1pbHk9J21vbm9zcGFjZScgZm9udC1zaXplPSc3JyBmaWxsPScjY2NmZmNjJyBvcGFjaXR5PScwLjg4Jz4mI3hGRjY2OzwvdGV4dD48dGV4dCB4PSc5JyB5PSc3JyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMzZGFhM2QnIG9wYWNpdHk9JzAuNTgnPiYjeEZGNzg7PC90ZXh0Pjx0ZXh0IHg9JzEnIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMwZDQwMTgnIG9wYWNpdHk9JzAuMjYnPiYjeEZGN0M7PC90ZXh0Pjx0ZXh0IHg9JzknIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMxNTUwMjInIG9wYWNpdHk9JzAuMzAnPjM8L3RleHQ+PC9zdmc+") !important;
  background-size: 16px 12px !important;
  background-repeat: repeat !important;
  background-position: 0 50% !important;
  box-shadow: inset 0 0 8px rgba(0,255,65,.25) !important;
}
/* Crimson bar fills (not th/td headers, not span pills) */
[data-theme="matrix"] [style*="background:#8B1A3C"]:not(th):not(td):not(span) {
  background-color: rgba(0,50,16,0.93) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxMic+PGVsbGlwc2UgY3g9JzQnIGN5PSc1JyByeD0nNicgcnk9JzUnIGZpbGw9JyMwMGZmNDEnIG9wYWNpdHk9JzAuMTgnLz48ZWxsaXBzZSBjeD0nMTInIGN5PSc1JyByeD0nNS41JyByeT0nNC41JyBmaWxsPScjMDBmZjQxJyBvcGFjaXR5PScwLjEzJy8+PHRleHQgeD0nMScgeT0nOCcgZm9udC1mYW1pbHk9J21vbm9zcGFjZScgZm9udC1zaXplPSc3JyBmaWxsPScjY2NmZmNjJyBvcGFjaXR5PScwLjg4Jz4mI3hGRjY2OzwvdGV4dD48dGV4dCB4PSc5JyB5PSc3JyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMzZGFhM2QnIG9wYWNpdHk9JzAuNTgnPiYjeEZGNzg7PC90ZXh0Pjx0ZXh0IHg9JzEnIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMwZDQwMTgnIG9wYWNpdHk9JzAuMjYnPiYjeEZGN0M7PC90ZXh0Pjx0ZXh0IHg9JzknIHk9JzEyJyBmb250LWZhbWlseT0nbW9ub3NwYWNlJyBmb250LXNpemU9JzYnIGZpbGw9JyMxNTUwMjInIG9wYWNpdHk9JzAuMzAnPjM8L3RleHQ+PC9zdmc+") !important;
  background-size: 16px 12px !important;
  background-repeat: repeat !important;
  background-position: 0 50% !important;
  box-shadow: inset 0 0 10px rgba(0,255,65,.28), 0 0 8px rgba(0,255,65,.18) !important;
}

/* ─────────────────────────────────────────────────────────
   15. STATUS / TYPE PILLS — all hues → Matrix green family
   brightness+hue-rotate maps every pastel into phosphor green
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] span[style*="#eaf3de"],
[data-theme="matrix"] span[style*="#faeeda"],
[data-theme="matrix"] span[style*="#fcebeb"],
[data-theme="matrix"] span[style*="#e6f1fb"],
[data-theme="matrix"] span[style*="#f1efe8"] {
  filter: brightness(0.28) saturate(2) hue-rotate(100deg) !important;
}

/* ─────────────────────────────────────────────────────────
   16. COMBOBOX / DROPDOWN MENUS
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="box-shadow:0 4px 16px rgba(0,0,0,.12)"] {
  box-shadow: 0 4px 20px rgba(0,255,65,.15), 0 2px 8px rgba(0,0,0,.8) !important;
  border-color: rgba(0,255,65,.22) !important;
}

/* ─────────────────────────────────────────────────────────
   17. HEADER — glass nav buttons + SSO badge
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] [style*="background:rgba(255,255,255,.12)"] {
  background: rgba(0,255,65,.08) !important;
  border-color: rgba(0,255,65,.25) !important;
}
[data-theme="matrix"] [style*="border:1px solid rgba(255,255,255,.25)"] {
  border-color: rgba(0,255,65,.25) !important;
}

/* ─────────────────────────────────────────────────────────
   18. EMAIL-LEADS BADGE — red nav badge → Matrix warning
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] span[style*="background:#a32d2d"] {
  background: rgba(0,255,65,.15) !important;
  color: #00ff41 !important;
  border: 1px solid rgba(0,255,65,.35) !important;
  text-shadow: 0 0 6px rgba(0,255,65,.6) !important;
}

/* ─────────────────────────────────────────────────────────
   19. FORECAST HISTORY — inline SVG chart theming
   ───────────────────────────────────────────────────────── */
[data-theme="matrix"] svg rect[fill="#f8f6f4"] { fill: #070d07 !important; }
[data-theme="matrix"] svg line  { stroke: rgba(0,255,65,.15) !important; }
[data-theme="matrix"] svg text  {
  fill: var(--muted) !important;
  font-family: 'Courier New', Courier, monospace !important;
}