/* SWP Production Suite — Clean and graphite Dark themes, shared across all 4 pages
   (index.html, commissions.html, forecast.html, gantt.html). Original Light stays exactly
   as each page's own inline <style> defines it today — nothing here touches those files'
   :root blocks or component rules; this file only overrides on the higher-specificity
   [data-theme="clean"/"dark"] selector, loaded after each page's own <style>.

   None of these pages had a light/dark toggle before, so every var name below is page-
   specific — declaring a var a given page doesn't use is harmless (no error, just unused).

   Palette matches the suite's other Clean/Dark rebuilds (Advanced Deposits, GL Hub) and
   the fleet's visual touchstone, Purchasing Hub (Tailwind slate/blue) — same hex values,
   not reinvented per app. Chrome (app-bar / hdr) goes fully light in Clean/Dark, replacing
   the permanent dark-navy bar — same fix as GL Hub's rail, for the same reason: nav text
   here is hardcoded assuming a dark bg, and gets rewritten below rather than re-tinted.

   Table geometry — widths, padding, row height — is never touched by this file. Only
   background/border/text colors on already-existing selectors. */

.theme-control { display: inline-flex; align-items: center; }
.theme-select {
  padding: .3rem 1.5rem .3rem .55rem; border-radius: 4px;
  font: 600 12px 'Aptos','Aptos Display',Calibri,sans-serif;
  cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff;
}
.theme-select:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; }

/* ─────────────────────────────────────────────────────────────────────────
   Palette — declared once, referenced by every page-specific block below via
   var(), so the two theme definitions live in exactly one place each. */
html[data-theme="clean"] {
  --swp-bg: #f1f5f9; --swp-surface: #ffffff; --swp-surface-alt: #f8fafc;
  --swp-border: #e2e8f0; --swp-border2: #cbd5e1;
  --swp-text: #1e293b; --swp-text2: #334155; --swp-muted: #64748b;
  --swp-action: #2563eb; --swp-action-hover: #1d4ed8; --swp-action-soft: #dbeafe;
  --swp-success: #15803d; --swp-success-soft: #dcfce7;
  --swp-danger: #b91c1c; --swp-danger-soft: #fee2e2;
  --swp-tan: #a05800; --swp-tan-soft: #fdf0e0;
  font-family: 'Aptos','Aptos Display',Calibri,sans-serif;
}
html[data-theme="dark"] {
  --swp-bg: #22262b; --swp-surface: #373d44; --swp-surface-alt: #454c54;
  --swp-border: #59636e; --swp-border2: #6b7682;
  --swp-text: #e1e4e8; --swp-text2: #cbd1d8; --swp-muted: #b4bbc3;
  --swp-action: #91afd2; --swp-action-hover: #a3bdd9; --swp-action-soft: rgba(145,175,210,.18);
  --swp-success: #93b99f; --swp-success-soft: rgba(105,155,120,.21);
  --swp-danger: #d29595; --swp-danger-soft: rgba(174,96,96,.2);
  --swp-tan: #c2a466; --swp-tan-soft: rgba(194,164,102,.18);
  font-family: 'Aptos','Aptos Display',Calibri,sans-serif;
}
html:is([data-theme="clean"],[data-theme="dark"]) body { font-family: inherit; }

/* Chrome shared by every page: light glass app-bar/hdr, replacing the dark navy bar.
   backdrop-filter blur is the "glass" cue used elsewhere in the suite (Dashboard/Deposits). */
html:is([data-theme="clean"],[data-theme="dark"]) .app-bar,
html:is([data-theme="clean"],[data-theme="dark"]) .hdr {
  background: var(--swp-surface); opacity: .96;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--swp-border); box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
html:is([data-theme="clean"],[data-theme="dark"]) .app-bar-logo b,
html:is([data-theme="clean"],[data-theme="dark"]) .brand h1 { color: var(--swp-text); }
html:is([data-theme="clean"],[data-theme="dark"]) .app-bar-logo span,
html:is([data-theme="clean"],[data-theme="dark"]) .brand p { color: var(--swp-muted); }
html:is([data-theme="clean"],[data-theme="dark"]) .brand a {
  color: var(--swp-muted); border-color: var(--swp-border);
}
html:is([data-theme="clean"],[data-theme="dark"]) .brand a:hover { color: var(--swp-text); border-color: var(--swp-action); }

/* Nav tabs — pale-blue active pill instead of the green-underline-on-navy treatment,
   matching Purchasing Hub's nav and the GL Hub fix. */
html:is([data-theme="clean"],[data-theme="dark"]) .app-tab {
  color: var(--swp-muted); border-bottom-color: transparent;
}
html:is([data-theme="clean"],[data-theme="dark"]) .app-tab:hover {
  color: var(--swp-text); background: var(--swp-action-soft);
}
html:is([data-theme="clean"],[data-theme="dark"]) .app-tab.active {
  color: var(--swp-action); border-bottom-color: var(--swp-action); background: transparent;
}

/* Header stat pills (forecast/gantt .hs) and connection status — translucent-white-on-navy
   becomes a bordered soft-blue chip on the light header. */
html:is([data-theme="clean"],[data-theme="dark"]) .hs {
  background: var(--swp-action-soft); border-color: var(--swp-border2); color: var(--swp-text2);
}
html:is([data-theme="clean"],[data-theme="dark"]) .hs.eng-learning { background: var(--swp-tan-soft); border-color: var(--swp-tan); color: var(--swp-tan); }
html:is([data-theme="clean"],[data-theme="dark"]) .hs.eng-empirical { background: var(--swp-success-soft); border-color: var(--swp-success); color: var(--swp-success); }
html:is([data-theme="clean"],[data-theme="dark"]) .conn-lbl { color: var(--swp-muted); }
html:is([data-theme="clean"],[data-theme="dark"]) .b-ghost { background: var(--swp-action-soft); color: var(--swp-action); border: 1px solid var(--swp-border2); }
html:is([data-theme="clean"],[data-theme="dark"]) .b-white { background: var(--swp-surface); color: var(--swp-action); border: 1px solid var(--swp-border2); }
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select { background: var(--swp-surface); border-color: var(--swp-border2); color: var(--swp-text); }
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select:focus { outline-color: var(--swp-action); }

/* ─────────────────────────────────────────────────────────────────────────
   index.html + commissions.html — shared :root scheme */
html[data-theme="clean"] body, html[data-theme="dark"] body { background: var(--swp-bg); color: var(--swp-text); }
html:is([data-theme="clean"],[data-theme="dark"]) {
  --white: var(--swp-surface); --off-white: var(--swp-bg);
  --sand-lt: var(--swp-surface-alt); --sand: var(--swp-border); --sand-dk: var(--swp-border2);
  --grey-lt: var(--swp-border); --grey: var(--swp-border2); --grey-md: var(--swp-muted); --grey-dk: var(--swp-text2);
  --charcoal: var(--swp-text); --blue-lt: var(--swp-action-soft);
  --blue: var(--swp-action); --blue-dk: var(--swp-action-hover); --blue-bg: var(--swp-action-soft);
  --green: var(--swp-success); --green-bg: var(--swp-success-soft);
  --amber: var(--swp-tan); --amber-bg: var(--swp-tan-soft);
  --red: var(--swp-danger); --border: var(--swp-border);
}
/* Dark-only: the pastel section tints (add-ons/remakes/stacked) and zebra rows read as
   washed-out white boxes on a dark page — give them a dark-appropriate tint instead. */
html[data-theme="dark"] .sec-addons .tbl-wrap { background: rgba(105,155,120,.08); }
html[data-theme="dark"] .sec-addons table.pt th { background: rgba(105,155,120,.18); border-bottom-color: var(--swp-border2); }
html[data-theme="dark"] .sec-remakes .tbl-wrap { background: rgba(194,164,102,.08); }
html[data-theme="dark"] .sec-remakes table.pt th { background: rgba(194,164,102,.18); border-bottom-color: var(--swp-border2); }
html[data-theme="dark"] .sec-stacked .tbl-wrap { background: rgba(145,175,210,.08); }
html[data-theme="dark"] .sec-stacked table.pt th { background: rgba(145,175,210,.18); border-bottom-color: var(--swp-border2); }
html[data-theme="dark"] .jd-evt:nth-child(even) { background: var(--swp-surface-alt); }
html[data-theme="dark"] .section th, html[data-theme="dark"] .summary-table th { background: var(--swp-surface-alt); }
html[data-theme="dark"] .section td, html[data-theme="dark"] .summary-table td { border-bottom-color: var(--swp-border); }

/* ─────────────────────────────────────────────────────────────────────────
   forecast.html — own :root scheme (--navy is the header bg, already var-driven) */
html:is([data-theme="clean"],[data-theme="dark"]) {
  --bg: var(--swp-bg); --border: var(--swp-border); --border2: var(--swp-border2);
  --text: var(--swp-text); --muted: var(--swp-muted); --light: var(--swp-action-soft);
  --navy: var(--swp-surface); --blue: var(--swp-action); --blue2: var(--swp-action-hover); --bluebg: var(--swp-action-soft);
  --green: var(--swp-success); --greenbg: var(--swp-success-soft);
  --tan: var(--swp-tan); --tanbg: var(--swp-tan-soft);
  --red: var(--swp-danger); --amber: var(--swp-tan);
}
html:is([data-theme="clean"],[data-theme="dark"]) .card-t { color: var(--swp-action); }
html:is([data-theme="clean"],[data-theme="dark"]) .sbar { background: var(--swp-surface-alt); }
/* .jtbl th uses a hardcoded hex (not a var) in forecast.html's own CSS */
html:is([data-theme="clean"],[data-theme="dark"]) .jtbl th { background: var(--swp-surface-alt); color: var(--swp-muted); }
html[data-theme="dark"] .jtbl td { border-bottom-color: var(--swp-border); }
html[data-theme="dark"] .jtbl tr.on-hold td { background: var(--swp-surface-alt) !important; }
html[data-theme="dark"] .jtbl tr:hover td { background: var(--swp-action-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   gantt.html — own :root scheme; --blue there IS the header bg (dual-purposed with the
   accent color), so .hdr needs its own override rather than relying on --blue. */
html:is([data-theme="clean"],[data-theme="dark"]) {
  --bg: var(--swp-bg); --border: var(--swp-border); --border2: var(--swp-border2);
  --text: var(--swp-text); --muted: var(--swp-muted); --light: var(--swp-action-soft);
  --red: var(--swp-danger); --green: var(--swp-success);
  /* --blue here is dual-purposed by gantt.html's own CSS as BOTH the header background
     and the accent-text color. Safe to repoint globally to the action blue — .hdr's own
     background is already pinned above by an explicit (higher-specificity) rule, so it
     doesn't pick this up as a background, only .card-t/.b-white pick it up as text. */
  --blue: var(--swp-action);
}