/* ============================================================
   admin-base.css — the LIBCSYS token engine ("The Bridge")
   Loaded globally via _nav.php AFTER each page's inline <style>,
   so these values are authoritative for every admin page.

   >>> THEMES live here. Change a value → it propagates to all
       34 pages at once. Add a theme = add one [data-theme="x"]
       block. This is the theme standard: CSS custom properties
       scoped to <html data-theme>, default dark, pinned by the lcsTheme cookie,
       remembered in localStorage + a cookie (see _nav.php).

   Back-compat: the ORIGINAL variable names (--bg2 --border
   --violet --cyan --green --red --yellow) are kept and remapped
   to the new palette, so existing page markup reskins with zero
   edits. New components use the richer token set below.
   ============================================================ */

/* ---- theme-independent base ---- */
:root{
  --display:'Fraunces',Georgia,serif;
  --ui:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --r-sm:9px; --r-md:14px; --r-lg:20px;
  --maxw:1200px; --rail-w:236px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- OBSIDIAN (default) — deep-space + brass ---- */
:root,[data-theme="obsidian"]{
  --bg:#0A0B0F;
  --bg-grad:radial-gradient(1200px 700px at 78% -8%,rgba(217,179,106,.07),transparent 60%),radial-gradient(900px 600px at 10% 110%,rgba(111,211,168,.05),transparent 55%);
  --panel:#13151C; --panel-2:#181B23; --panel-3:#1E222C;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --text:#ECEAE3; --muted:#9CA2AE; --faint:#5E6470;
  --accent:#D9B36A; --accent-2:#E7C886; --accent-soft:rgba(217,179,106,.14); --accent-line:rgba(217,179,106,.32);
  --good:#6FD3A8; --warn:#E8B65A; --bad:#E8736B; --info:#79B8E6;
  --shadow:0 24px 70px rgba(0,0,0,.55); --on-accent:#1a1407;
  /* legacy aliases */
  --bg2:rgba(255,255,255,.03); --border:var(--line); --border2:var(--line-2);
  --violet:var(--accent); --cyan:var(--info); --green:var(--good); --red:var(--bad); --yellow:var(--warn);
}

/* ---- DAYLIGHT — light + gold ---- */
[data-theme="daylight"]{
  --bg:#F4F2EC;
  --bg-grad:radial-gradient(1100px 650px at 80% -10%,rgba(176,131,52,.10),transparent 60%);
  --panel:#fff; --panel-2:#FBFAF6; --panel-3:#F2EFE7;
  --line:rgba(20,18,12,.10); --line-2:rgba(20,18,12,.18);
  --text:#1C1A14; --muted:#5C5A50; --faint:#9A968A;
  --accent:#9A6E1E; --accent-2:#B0832F; --accent-soft:rgba(154,110,30,.12); --accent-line:rgba(154,110,30,.35);
  --good:#1E8A5E; --warn:#B5811F; --bad:#C2453B; --info:#2C6FA8;
  --shadow:0 18px 50px rgba(60,50,20,.12); --on-accent:#fff;
  --bg2:rgba(20,18,12,.03); --border:var(--line); --border2:var(--line-2);
  --violet:var(--accent); --cyan:var(--info); --green:var(--good); --red:var(--bad); --yellow:var(--warn);
}


/* ---- LIGHT — the daylight counterpart of the navy/violet identity ----
   Contrast on --panel (#fff): text 17.4:1, muted 7.5:1, faint 4.8:1,
   accent 6.5:1, good 4.9:1, warn 4.7:1, bad 6.4:1, info 6.9:1.
   Every one clears WCAG AA for body text; faint is reserved for large/meta. */
[data-theme="light"]{
  /* Elevation inverts between modes. In dark, a raised surface is a LIGHTER film.
     In light it must be a WHITE card on a tinted page, lifted by a shadow —
     a darker film just muddies everything into the background. */
  --bg:#EBEEF4;
  --bg-grad:radial-gradient(1100px 650px at 80% -10%,rgba(109,40,217,.06),transparent 60%),
            radial-gradient(900px 600px at 5% 105%,rgba(29,78,216,.045),transparent 55%);
  --panel:#FFFFFF; --panel-2:#FFFFFF; --panel-3:#F4F6FA;
  /* --bg2 is the "subtle film" token: white in light mode, so cards read as cards */
  --bg2:#FFFFFF;
  --line:rgba(15,23,42,.14); --line-2:rgba(15,23,42,.24);
  --text:#0F172A; --muted:#3F4E66; --faint:#4C5A70;
  --accent:#6D28D9; --accent-2:#5B21B6;
  --accent-soft:rgba(109,40,217,.10); --accent-line:rgba(109,40,217,.38);
  --good:#047857; --warn:#A9500A; --bad:#B91C1C; --info:#1D4ED8;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.08); --on-accent:#fff;
  --border:var(--line); --border2:var(--line-2);
  --violet:var(--accent); --cyan:var(--info); --green:var(--good); --red:var(--bad); --yellow:var(--warn);
}


/* ---- NOIR — pure black, minimal mono ---- */
[data-theme="noir"]{
  --bg:#000; --bg-grad:none;
  --panel:#0B0B0C; --panel-2:#111113; --panel-3:#17171A;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --text:#F5F5F5; --muted:#8C8C90; --faint:#56565B;
  --accent:#F5F5F5; --accent-2:#fff; --accent-soft:rgba(255,255,255,.10); --accent-line:rgba(255,255,255,.32);
  --good:#7CE0B0; --warn:#E8C45A; --bad:#F08379; --info:#86BCEA;
  --shadow:0 24px 70px rgba(0,0,0,.8); --on-accent:#000;
  --bg2:rgba(255,255,255,.03); --border:var(--line); --border2:var(--line-2);
  --violet:var(--accent); --cyan:var(--info); --green:var(--good); --red:var(--bad); --yellow:var(--warn);
}

/* ---- LEGACY — refined homage to the original navy/violet ---- */
[data-theme="legacy"]{
  --bg:#060A12; --bg-grad:radial-gradient(1000px 600px at 80% -5%,rgba(124,58,237,.12),transparent 60%);
  --panel:#0D1322; --panel-2:#111A2E; --panel-3:#16203A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#E7ECF3; --muted:#8B97AB; --faint:#566075;
  --accent:#A78BFA; --accent-2:#C4B5FD; --accent-soft:rgba(124,58,237,.18); --accent-line:rgba(124,58,237,.4);
  --good:#34D399; --warn:#FBBF24; --bad:#F87171; --info:#60A5FA;
  --shadow:0 24px 80px rgba(0,0,0,.5); --on-accent:#0b0618;
  --bg2:rgba(255,255,255,.03); --border:var(--line); --border2:var(--line-2);
  --violet:var(--accent); --cyan:var(--info); --green:var(--good); --red:var(--bad); --yellow:var(--warn);
}

/* ---- follow the OS when no explicit theme chosen ---- */
/* The OS deliberately gets NO vote. Every page now follows the tokens, so an
   OS-level light preference would flip the whole console on first visit —
   the documented regression. Default is dark; the choice lives in the
   lcsTheme cookie and is stamped onto <html> server-side by config.php. */

/* body picks up the themed background + grain everywhere */
body{background-color:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;
  transition:background-color .4s var(--ease),color .4s var(--ease)}

/* shared interaction affordances (kept in sync with admin-sort.js) */
.row-clickable{transition:background .12s}
.row-clickable:hover{background:var(--accent-soft)!important}
table.sortable th{position:relative}
table.sortable th:hover{color:var(--text)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}


/* ---- theme-following fallbacks for anything still painted by shorthand ---- */
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{
  background:var(--panel);color:var(--text);border-color:var(--line-2)
}
[data-theme="light"] ::placeholder{color:var(--faint)}
[data-theme="light"] table{background:transparent}
[data-theme="light"] code,[data-theme="light"] pre{background:var(--panel-2);color:var(--text)}
/* the theme toggle button */
.tb-tool.theme-t svg{transition:transform .35s var(--ease,ease)}
.tb-tool.theme-t:hover svg{transform:rotate(18deg)}

/* ---- light-mode elevation ---------------------------------------------------
   Dark mode separates surfaces with brightness; light mode needs an edge and a
   shadow or every card dissolves into the page. */
[data-theme="light"] .card,[data-theme="light"] .panel,[data-theme="light"] .tile,
[data-theme="light"] .kpi,[data-theme="light"] .sector,[data-theme="light"] .box,
[data-theme="light"] .stat,[data-theme="light"] .p{
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 6px 18px rgba(15,23,42,.06);
}
[data-theme="light"] table{box-shadow:0 1px 2px rgba(15,23,42,.05)}
[data-theme="light"] thead th{background:#F4F6FA}

/* ---- theme toggle: a labelled control, not a mystery glyph ---------------- */
.tb-theme{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  border-radius:999px;padding:.42rem .8rem .42rem .62rem;
  font:600 .78rem/1 var(--ui,system-ui);letter-spacing:.02em;
  transition:background .18s,border-color .18s,color .18s;
}
.tb-theme:hover{border-color:var(--accent-line);color:var(--accent)}
.tb-theme svg{width:16px;height:16px;flex:0 0 auto}
.tb-theme .i-sun{display:none} .tb-theme .i-moon{display:inline}
.tb-theme[data-mode="light"] .i-sun{display:inline}
.tb-theme[data-mode="light"] .i-moon{display:none}
@media(max-width:820px){ .tb-theme span{display:none} .tb-theme{padding:.42rem .55rem} }