/* GL Hub Clean and graphite Dark themes. Original Light (app.css, untouched) stays the
   default. Loaded after app.css so these override on equal-specificity selectors — including
   the legacy [data-theme="dark"] block in app.css, which this graphite Dark replaces.
   Table geometry (header/cell padding, widths, row height) is never touched here.

   Palette matches the suite's other Clean/Dark rebuilds (Advanced Deposits) exactly —
   Tailwind's slate/blue scale — since that's also what Purchasing Hub (the suite's named
   visual touchstone, a Tailwind app) already looks like. No gold: --gold/--gold-light are
   aliased straight to the blue action tokens below, so every existing var(--gold) usage in
   app.css (tabs, rail highlights, badges, attention/pending flags) repaints blue for free. */

.theme-control { display: inline-flex; align-items: center; }
.theme-select {
  padding: .3rem 1.5rem .3rem .55rem; border-radius: var(--radius, 6px);
  font: 600 .8125rem "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--sand, #f5f7fa);
}
.theme-select:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; }

html[data-theme="clean"] {
  --bg:           #f1f5f9;  /* slate-100 */
  --surface:      #ffffff;
  --surface-alt:  #f8fafc;  /* slate-50 */
  --row-hover:    #dbeafe;  /* blue-100 */
  --border:       #e2e8f0;  /* slate-200 */
  --border-dark:  #cbd5e1;  /* slate-300 */

  --navy:         #1e293b;  /* slate-800 */
  --navy-light:   #334155;  /* slate-700 */
  --royal:        #2563eb;  /* blue-600 */
  --royal-hover:  #1d4ed8;  /* blue-700 */
  --royal-light:  #dbeafe;  /* blue-100 */
  --sage:         #15803d;
  --sage-light:   #dcfce7;
  --gold:         var(--royal);
  --gold-light:   var(--royal-light);
  --danger:       #b91c1c;
  --text:         #1e293b;
  --text-muted:   #64748b;  /* slate-500 */

  --sand:         var(--bg);
  --sand-light:   var(--surface-alt);
  --sand-deep:    var(--row-hover);
  --stone:        var(--border);
  --stone-dark:   var(--border-dark);

  --shadow-sm:    0 1px 2px rgba(30,41,59,.06);
  --shadow:       0 4px 14px rgba(30,41,59,.07);
  --shadow-md:    0 10px 26px rgba(30,41,59,.09);

  --ap: #3f5aa0; --ap-light: #e8ecf7; --ap-ink: #2c3f75;
  --ar: #2f8577; --ar-light: #e2f2ef; --ar-ink: #1f5c52;
  --gl: #7c5a94; --gl-light: #f1e9f5; --gl-ink: #573f6a;

  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --bg:           #22262b;
  --surface:      #373d44;
  --surface-alt:  #454c54;
  --row-hover:    #48505a;
  --border:       #59636e;
  --border-dark:  #6b7682;

  --navy:         #e1e4e8;
  --navy-light:   #b4bbc3;
  --royal:        #91afd2;
  --royal-hover:  #a3bdd9;
  --royal-light:  rgba(145,175,210,.18);
  --sage:         #93b99f;
  --sage-light:   rgba(105,155,120,.21);
  --gold:         var(--royal);
  --gold-light:   var(--royal-light);
  --danger:       #d29595;
  --text:         #e1e4e8;
  --text-muted:   #b4bbc3;

  --sand:         var(--bg);
  --sand-light:   var(--surface-alt);
  --sand-deep:    #1c1f24;
  --stone:        var(--border);
  --stone-dark:   var(--border-dark);

  --shadow-sm:    0 1px 2px rgba(7,9,11,.2);
  --shadow:       0 6px 18px rgba(7,9,11,.28);
  --shadow-md:    0 16px 36px rgba(7,9,11,.32);

  --ap: #93a3d9; --ap-light: #232c48; --ap-ink: #c7d0ee;
  --ar: #8fc2b7; --ar-light: #1c332e; --ar-ink: #c3e6dd;
  --gl: #bfa0cf; --gl-light: #332944; --gl-ink: #e3d3ec;

  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html:is([data-theme="clean"],[data-theme="dark"]) body { font-family: inherit; }

/* Taller glass header, matching the rest of the suite. Height flows through --topbar-h
   into the rail's sticky offset automatically. The dark navy "command bar" is gone —
   topbar + rail become a light glass surface in Clean, a dark glass surface in Dark,
   same as the header treatment in swp-deposits/swp-dashboard. Nav text/highlight colors
   below follow suit (they were hardcoded assuming a permanently-dark rail). */
html:is([data-theme="clean"],[data-theme="dark"]) { --topbar-h: 72px; }
html[data-theme="clean"] .topbar,
html[data-theme="clean"] .rail {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .rail {
  background: rgba(30,33,38,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
html:is([data-theme="clean"],[data-theme="dark"]) .topbar {
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
html:is([data-theme="clean"],[data-theme="dark"]) .rail {
  border-right: 1px solid var(--border);
  box-shadow: none;
}
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-brand { color: var(--text); font-weight: 700; }

/* Nav text + active-pill treatment (topbar tabs, rail nav, rail foot) — pale-blue pill on
   the active item, muted text otherwise, matching Purchasing Hub's nav exactly. */
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-tabs a,
html:is([data-theme="clean"],[data-theme="dark"]) .rail-nav a,
html:is([data-theme="clean"],[data-theme="dark"]) .rail-foot a,
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-lookup {
  color: var(--text-muted);
}
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-tabs a:hover,
html:is([data-theme="clean"],[data-theme="dark"]) .rail-nav a:hover,
html:is([data-theme="clean"],[data-theme="dark"]) .rail-foot a:hover,
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-lookup:hover {
  background: var(--row-hover); color: var(--text);
}
html:is([data-theme="clean"],[data-theme="dark"]) .topbar-tabs a.active { color: var(--royal); border-bottom-color: var(--royal); }
html:is([data-theme="clean"],[data-theme="dark"]) .rail-nav a.active,
html:is([data-theme="clean"],[data-theme="dark"]) .rail-foot a.active {
  background: var(--royal-light); color: var(--royal); font-weight: 600; box-shadow: none;
}
html:is([data-theme="clean"],[data-theme="dark"]) .rail-nav a.active .rail-icon { color: var(--royal); }
html:is([data-theme="clean"],[data-theme="dark"]) .rail-badge { background: var(--royal-light); color: var(--royal); }
html:is([data-theme="clean"],[data-theme="dark"]) .rail-nav a.active .rail-badge { background: var(--royal); color: #fff; }
html:is([data-theme="clean"],[data-theme="dark"]) .rail-divider { background: var(--border); }
html:is([data-theme="clean"],[data-theme="dark"]) .rail-foot { border-top-color: var(--border); }
html:is([data-theme="clean"],[data-theme="dark"]) .topbar .rail-toggle,
html:is([data-theme="clean"],[data-theme="dark"]) .topbar .rail-foot-btn {
  border-color: var(--border); color: var(--text-muted);
}
html:is([data-theme="clean"],[data-theme="dark"]) .topbar .rail-foot-btn:hover { border-color: var(--royal); color: var(--royal); }

/* Theme-select control (visible in every theme; light-on-light here since the header itself
   is now light in Clean/Dark, unlike Light's own permanently-dark topbar). */
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select {
  background: var(--surface); border-color: var(--border); color: var(--text);
}
html:is([data-theme="clean"],[data-theme="dark"]) .theme-select:focus { outline-color: var(--royal); }

/* gl-accrue rows: the yellow highlight duplicated meaning better carried by its own label
   elsewhere in the row; swap to the suite's pale-blue "pending" treatment. */
html:is([data-theme="clean"],[data-theme="dark"]) tr.gl-accrue td { background: var(--royal-light); }
html:is([data-theme="clean"],[data-theme="dark"]) tr.gl-accrue:hover td { background: var(--row-hover); }

/* Dark-only: stronger row differentiation (alternate-row + hover), ~10% lighter than the
   base surface, per the approved graphite-dark calibration. */
html[data-theme="dark"] table.data tbody tr:nth-child(even) td { background: #3d434b; }
html[data-theme="dark"] table.data tbody tr:hover { background: #48505a; }
html[data-theme="dark"] table.data tbody tr.selected { background: var(--royal-light); }
html[data-theme="dark"] .card, html[data-theme="dark"] .tile, html[data-theme="dark"] .modal {
  border-color: var(--border-dark);
}

@media (max-width: 760px) {
  html:is([data-theme="clean"],[data-theme="dark"]) .topbar { padding: 0 .65rem; }
}