/* SWP Job # Codes — Clean and Dark themes. Original Light stays exactly as app.css
   defines it today — this file only overrides on the higher-specificity
   [data-theme="clean"/"dark"] selector, loaded after app.css.

   Palette matches the suite's other Clean/Dark rebuilds (Production Suite, Advanced
   Deposits, GL Hub) and the fleet's visual touchstone, Purchasing Hub — same hex
   values, not reinvented per app.

   app.css is already fully driven by custom properties, so most of this file is a
   straight variable remap. The one wrinkle: --brown-dk doubles as both the header's
   background AND a general text/accent color elsewhere (modal titles, code text,
   button hovers) — remapping it directly would fight itself, so the header gets its
   own --header-bg instead and keeps --brown-dk free to become the app's action-blue
   accent everywhere else, same role --blue plays in Production Suite's Clean/Dark. */

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

/* ─────────────────────────────────────────────────────────────────────────
   Palette — declared once, referenced by every remap below via var(). */
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;
}
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);
}

/* Remap app.css's own variable names onto that palette — every component already
   reads through these vars, so this alone repaints stats/toolbar/table/modal/
   forms/toast without touching a single component rule. */
html:is([data-theme="clean"],[data-theme="dark"]) {
  --cream: var(--swp-bg); --cream2: var(--swp-surface-alt); --cream3: var(--swp-surface-alt);
  --warm-white: var(--swp-surface);
  --brown-dk: var(--swp-action); --brown-md: var(--swp-action-hover); --brown-lt: var(--swp-action);
  --text: var(--swp-text); --text2: var(--swp-text2); --text3: var(--swp-muted);
  --border: var(--swp-border); --border2: var(--swp-border2);
  --green: var(--swp-success); --green-lt: var(--swp-success-soft); --green-dk: var(--swp-success);
  --red: var(--swp-danger); --red-lt: var(--swp-danger-soft);
  --blue: var(--swp-action); --blue-lt: var(--swp-action-soft);
  --amber: var(--swp-tan); --amber-lt: var(--swp-tan-soft);
  --shadow: 0 1px 3px rgba(0,0,0,.12); --shadow-md: 0 4px 14px rgba(0,0,0,.22);
  --header-bg: var(--swp-surface);
}
html:is([data-theme="clean"],[data-theme="dark"]) body { background: var(--swp-bg); }

/* Chrome: light glass header replacing the permanent dark-brown bar (same fix used
   across the fleet). brand-name/brand-sub/btn-ghost-lt assume a dark header bg —
   now that the header itself is light, they need their own overrides. */
html:is([data-theme="clean"],[data-theme="dark"]) .header {
  background: var(--header-bg); opacity: .97;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 2px 12px rgba(0,0,0,.08); border-bottom: 1px solid var(--swp-border);
}
html:is([data-theme="clean"],[data-theme="dark"]) .brand-name { color: var(--swp-text); }
html:is([data-theme="clean"],[data-theme="dark"]) .brand-sub { color: var(--swp-muted); }
html:is([data-theme="clean"],[data-theme="dark"]) .btn-ghost-lt { color: var(--swp-text2); border-color: var(--swp-border2); }
html:is([data-theme="clean"],[data-theme="dark"]) .btn-ghost-lt:hover { background: var(--swp-action-soft); }
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select { color: var(--swp-text2); border-color: var(--swp-border2); }
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select:focus { outline-color: var(--swp-action); }
html:is([data-theme="clean"],[data-theme="dark"]) .btn-primary { background: var(--swp-action); color: #fff; }
html:is([data-theme="clean"],[data-theme="dark"]) .btn-primary:hover { background: var(--swp-action-hover); }

/* Dark-only: the amber "can't reach Production Suite" warning banner reads as a
   washed-out pale box on the dark surface — give it a dark-appropriate tint. */
html[data-theme="dark"] #jobnum-warning { background: var(--swp-tan-soft); color: var(--swp-tan); }