/* Depth and stronger text (loaded last on every manager screen; remove the <link> to go back to the flat look).
   Light: a soft gray canvas so white cards and tiles sit above it, near-black text, darker secondary text.
   Dark: deeper canvas, brighter text, shadows tuned for dark surfaces. Every text colour still passes WCAG AA. */
:root {
  --bg: #EDF0F3; --line: #D3D8DF; --text: #0B0F14; --heading: #05080C; --muted: #2E3440; --field-line: #6B7280;
  --nav-bg: #E6EAEE; --nav-text: #11151B; --nav-dim: #2E3440; --surface: #F1F3F6;
  --elev-1: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .08);
  --elev-2: 0 2px 4px rgba(16, 24, 40, .10), 0 12px 28px rgba(16, 24, 40, .14);
  --elev-btn: 0 1px 2px rgba(16, 24, 40, .16);
  --elev-field: inset 0 1px 2px rgba(16, 24, 40, .10);
  --elev-bar: 0 2px 8px rgba(16, 24, 40, .10);
}
:root[data-theme="dark"] {
  --bg: #0A0D12; --panel: #1A1F29; --line: #2C3340; --text: #F1F4F9; --heading: #FFFFFF; --muted: #B8C0CE; --surface: #212734;
  --elev-1: 0 1px 2px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .45);
  --elev-2: 0 2px 6px rgba(0, 0, 0, .6), 0 14px 32px rgba(0, 0, 0, .55);
  --elev-btn: 0 1px 3px rgba(0, 0, 0, .6);
  --elev-field: inset 0 1px 3px rgba(0, 0, 0, .5);
  --elev-bar: 0 2px 10px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0D12; --panel: #1A1F29; --line: #2C3340; --text: #F1F4F9; --heading: #FFFFFF; --muted: #B8C0CE; --surface: #212734;
    --elev-1: 0 1px 2px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .45);
    --elev-2: 0 2px 6px rgba(0, 0, 0, .6), 0 14px 32px rgba(0, 0, 0, .55);
    --elev-btn: 0 1px 3px rgba(0, 0, 0, .6);
    --elev-field: inset 0 1px 3px rgba(0, 0, 0, .5);
    --elev-bar: 0 2px 10px rgba(0, 0, 0, .5);
  }
}

body, body.ws-body-root { background: var(--bg); color: var(--text); }

/* surfaces float above the canvas */
.card, .tile, .hub-tile, .login-card { box-shadow: var(--elev-1); border-color: var(--line); }
.tile, .hub-tile { transition: box-shadow .15s, transform .15s; }
.tile:hover, .hub-tile:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.ws-bar { box-shadow: var(--elev-bar); }
.ws-side { box-shadow: 2px 0 10px rgba(16, 24, 40, .06); }
.theme-dock, .toast { box-shadow: var(--elev-2); }

/* controls: raised buttons, pressed feel, sunken fields */
.btn { box-shadow: var(--elev-btn); transition: box-shadow .12s, transform .06s; }
.btn:hover { box-shadow: var(--elev-1); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.primary { box-shadow: 0 2px 6px rgba(14, 107, 107, .35), inset 0 1px 0 rgba(255, 255, 255, .18); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { box-shadow: var(--elev-field); }

/* tables: a shaded header band and stronger header text */
th { color: var(--text); }
thead th, .table-wrap thead th, .ws-main .table-wrap thead th { background: var(--surface); }
tr.sub td, .tile .sub, .small.muted, .muted { color: var(--muted); }

@media print {
  .card, .tile, .hub-tile, .btn, .ws-bar, .ws-side, input, select, textarea { box-shadow: none !important; }
  body { background: #fff; }
}

/* Requisition Center */
.rc-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; align-items: start; }
.rc-search label { display: flex; flex-direction: column; margin-bottom: 10px; }
.rc-search details { margin: 4px 0 10px; }
.rc-menu { position: relative; }
.rc-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 320px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--elev-2); padding: 6px; display: flex; flex-direction: column; }
.rc-pop a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 6px; color: var(--text); text-decoration: none; }
.rc-pop a .small { grid-column: 1; }
.rc-pop a kbd { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 12px/1 Inter, system-ui, sans-serif; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
.rc-pop a:hover { background: var(--accent-soft); }
@media (max-width: 860px) { .rc-layout { grid-template-columns: 1fr; } }

/* Side menu: group titles (ORDERS, BUDGETS, SETUP...) look nothing like the screens under them */
.ws-side .ws-group { display: flex; align-items: center; gap: 8px; margin: 18px 4px 6px; padding: 12px 8px 0; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-side .ws-group::after { content: ""; flex: 1; height: 1px; background: transparent; }
.ws-side #nav > .ws-group:first-child, .ws-side .ws-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.ws-side #nav a { margin-left: 10px; padding-left: 14px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; font-weight: 500; }
.ws-side #nav a.active { border-left-color: var(--accent); box-shadow: none; }
:root[data-theme="dark"] .ws-side .ws-group { color: var(--brass); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-side .ws-group { color: var(--brass); } }
.rc-pop[hidden] { display: none; }