/* ===========================================================================
   RICU theme — light mode overrides (every page is dark by default) and dark
   overrides for the two pages that were built light (Command Center, Where is
   my tech). Applied by theme.js via <html data-theme="light|dark">.
   =========================================================================== */

/* ---------- LIGHT: shared palette (tech app, office, boards, admin pages, receipts) ---------- */
html[data-theme="light"] {
  --bg:#eef1f4; --surface:#ffffff; --surface2:#e9edf1; --border:#cfd6dc;
  --text:#152028; --muted:#5a6b76; --link:#c41e17; --accent-press:#b3170f;
  --brand-yellow:#a67c00; --accent-dim:#fff3d6;
  --assigned:#1d4ed8; --otw:#6d28d9; --onsite:#c2410c; --done:#15803d; --partsrun:#0e7490; --free:#15803d;
  --danger:#b91c1c; --ok:#15803d; --warn:#b45309;
  /* receipts */
  --gold:#a67c00; --green:#15803d; --red:#b91c1c; --blue:#1d4ed8; --purple:#6d28d9;
  /* office tools */
  --tools-bg:#eef1f4; --tools-surface:#ffffff; --tools-surface2:#e9edf1; --tools-border:#cfd6dc;
  --tools-text:#152028; --tools-text-bright:#0f172a; --tools-muted:#5a6b76; --tools-muted2:#4b5b66; --tools-faint:#7b8a95;
  /* command center / where-is-my-tech (already light) */
  --panel:#ffffff; --panel2:#fbfcfe; --line:#e8ecf1; --divider:#eef0f3; --ink:#0f172a; --ink2:#334155; --faint:#94a3b8;
}
/* Dark backgrounds that were hard-coded instead of using a variable */
html[data-theme="light"] header,
html[data-theme="light"] .topbar,
html[data-theme="light"] .top,
html[data-theme="light"] .col-head { background:var(--surface); }
html[data-theme="light"] .wcol.unassigned { background:#fff8e1; border-color:#d9b400; }
html[data-theme="light"] .col.unassigned { border-color:#d9b400; }
html[data-theme="light"] .bc-cust { color:var(--text); }
html[data-theme="light"] .map,
html[data-theme="light"] .ph-cell img { background:var(--surface2); }
html[data-theme="light"] .about-box,
html[data-theme="light"] .set-item,
html[data-theme="light"] .menu-panel { background:var(--surface2); }
html[data-theme="light"] .set-item:hover { background:#dfe5ea; }
/* Photos / video stay on black so they look right */
html[data-theme="light"] .photoview,
html[data-theme="light"] .ritem .thumb,
html[data-theme="light"] .photos .media-vid,
html[data-theme="light"] .photos .photo-cell video,
html[data-theme="light"] .ph-cell video { background:#000; }
/* Unassigned column on the office board */
html[data-theme="light"] .col.unassigned .col-head { background:#fff8e1; }
/* subtle white highlights become subtle dark ones */
html[data-theme="light"] .jcard,
html[data-theme="light"] .bcard,
html[data-theme="light"] .wcard { box-shadow:0 1px 2px rgba(16,24,40,.06); }

/* ---------- DARK: Command Center + Where is my tech (built light) ---------- */
html[data-theme="dark"] {
  --panel:#1a2226; --panel2:#141a1e; --line:#2e3a40; --divider:#232d32;
  --ink:#e8edef; --ink2:#c5ced4; --faint:#6b7a84;
  --shadow:none; --shadow2:0 4px 18px rgba(0,0,0,.35);
  /* office tools (built dark) */
  --tools-bg:#0a0b0f; --tools-surface:#12141a; --tools-surface2:#1e2130; --tools-border:#2d3148;
  --tools-text:#e2e8f0; --tools-text-bright:#f1f5f9; --tools-muted:#94a3b8; --tools-muted2:#64748b; --tools-faint:#475569;
}
html[data-theme="dark"] body.cc,
html[data-theme="dark"] body.where { --bg:#0f1416; --muted:#93a1a8; }
html[data-theme="dark"] body.cc .backlink,
html[data-theme="dark"] body.where .backlink { background:var(--panel); color:var(--ink2); }
html[data-theme="dark"] body.cc #vzmap,
html[data-theme="dark"] body.where #map { background:#1a2226; }
html[data-theme="dark"] body.cc .map-ph { background:var(--panel2); }
html[data-theme="dark"] body.cc .kpi,
html[data-theme="dark"] body.cc .panel,
html[data-theme="dark"] body.cc .card,
html[data-theme="dark"] body.where .tcard { background:var(--panel); }
/* pastel status chips: keep readable on dark */
html[data-theme="dark"] body.cc .chip,
html[data-theme="dark"] body.where .chip { filter:saturate(.9); }

/* ---------- Leaflet + form controls follow the theme ---------- */
html[data-theme="light"] .leaflet-tile-pane { filter:none; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme:light; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme:dark; }

/* ---------- LIGHT: pink/red text that was tuned for dark backgrounds ---------- */
html[data-theme="light"] .notice.red b,
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .chip.rejected,
html[data-theme="light"] .banner.err,
html[data-theme="light"] .row.emerg .v a,
html[data-theme="light"] .banner.low b,
html[data-theme="light"] .low-row td,
html[data-theme="light"] .delta-use,
html[data-theme="light"] .alerts-h,
html[data-theme="light"] .alert-pop-title,
html[data-theme="light"] .rolepill.admin,
html[data-theme="light"] .err { color:#b91c1c; }
html[data-theme="light"] .rolepill.tech { color:#1d4ed8; }
html[data-theme="light"] .rolepill.staff { color:#6d28d9; }
html[data-theme="light"] .rolepill.accountant { color:#15803d; }
html[data-theme="light"] .rolepill.office { color:#7a5a00; }
/* office tools page: subtle white row highlights → subtle dark */
html[data-theme="light"] body .topbar { background:var(--tools-surface, var(--surface)); }