/* ============================================================================
   TADA theme — crisp dashboard refresh (db/126)
   Layered OVER each screen's existing inline styles (link this AFTER the <style>
   block). Pure look-and-feel: typography, shadows, cards, section headers,
   color accents. No layout/architecture changes.
   ============================================================================ */

:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --ink:#0f1729;            /* crisper near-black ink */
  --muted:#6b7280;          /* a touch darker for legibility */
  --line:#e8eaee;           /* hairline borders */
  --accent:#2563eb;
  --accent-soft:#eaf1fe;
  --navy:#0e1626;
  --soft:#f1f4f8;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#e0820a;
  --good-bg:#e9f8ef;        /* green highlight metric card */
  --good-bd:#bcf0cf;
  /* layered soft shadows = the "crispiness" */
  --sh-xs:0 1px 2px rgba(15,23,41,.06);
  --sh-sm:0 1px 2px rgba(15,23,41,.04), 0 2px 6px rgba(15,23,41,.06);
  --sh-md:0 4px 10px rgba(15,23,41,.06), 0 10px 24px rgba(15,23,41,.08);
  --sh-lg:0 12px 34px rgba(15,23,41,.14);
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; letter-spacing:-.005em; }

/* ---- Header ---- */
header h1{ font-weight:800; letter-spacing:-.021em; }
header .sub{ font-weight:500; }

/* ---- Cards & panels: soft crisp shadow + smoother radius ---- */
.card, .list, .actpanel, .fpanel, .modal, .panel, .capcard{ box-shadow:var(--sh-sm); }
.card{ border-radius:14px; }
/* hover = BLUE glow + ring (not a gray shadow); a SELECTED card keeps its blue ring on hover (doesn't vanish) */
.card[onclick]:hover, .card.man:hover{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.30), 0 6px 16px rgba(var(--accent-rgb),.17); }
.card.sel, .card.sel:hover, .card.man.sel:hover{ border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent), 0 6px 16px rgba(var(--accent-rgb),.18); }

/* metric cards: UPPERCASE label + big bold number (reference look) */
.card .l{ text-transform:uppercase; letter-spacing:.055em; font-weight:600; font-size:11px; color:var(--muted); }
.card .n{ font-size:33px; font-weight:800; letter-spacing:-.02em; }
.card .csub{ font-weight:600; }
/* keep the small navy "manpower" stat compact */
.card.man .n{ font-size:20px; }

/* green highlight metric card */
.card.good{ background:var(--good-bg); border-color:var(--good-bd); }
.card.good .n{ color:#15803d; }

/* ---- Section headers: accent bar + uppercase (reference "│ SECTION") ---- */
.sechead, .acthd{ text-transform:uppercase; letter-spacing:.055em; font-size:12px; font-weight:700; color:#39415a; }
.sechead{ padding-left:12px; position:relative; }
.sechead::before{ content:''; position:absolute; left:0; top:1px; bottom:1px; width:3px; border-radius:2px; background:var(--accent); }

/* ---- Tabs: keep each screen's native BOX/PILL highlight (Abbie prefers it over an underline).
   Only add a soft shadow to the active pill for a touch of crispness; counts/numbers stay as-is. ---- */
.tab.active{ box-shadow:var(--sh-xs); }

/* ---- Buttons: crisper ---- */
.btn{ border-radius:9px; box-shadow:var(--sh-xs); transition:box-shadow .12s ease, border-color .12s ease, background .12s ease; }
.btn:hover{ box-shadow:var(--sh-sm); }
.btn.dark{ box-shadow:0 1px 2px rgba(14,22,38,.28); }

/* ---- Inputs: crisp focus ring ---- */
.search:focus, select:focus, input:focus, textarea:focus, .fq:focus, .cmp-q:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- Lists / tables ---- */
.list{ border-radius:14px; }
.trow:hover{ background:var(--hover); }

/* ---- Chips / pills a touch crisper ---- */
.scg, .schip, .manchip, .fbtn{ box-shadow:var(--sh-xs); }

/* ---- Sidebar depth ---- */
.side{ box-shadow:1px 0 0 rgba(15,23,41,.04), 6px 0 20px rgba(15,23,41,.05); }
.nav.active{ box-shadow:0 2px 6px rgba(var(--accent-rgb),.32); }

/* ---- Logo ICON dark-blue tile (pt.489, restored) -- TADA's real brand colors: the white share-glyph on
   its classic dark-blue square, on every theme. "TADA" wordmark + blue tagline sit on the themed sidebar. ---- */
.side .brand > svg{ background:#101a2e; border-radius:8px; padding:6px; box-sizing:content-box; }

/* ---- Reusable skeleton loader (pt.488) -- shimmering placeholder blocks for content that's still loading,
   instead of a blank area under the top progress line. Uses theme tokens so it fits every theme. ---- */
.msk{ display:inline-block; background:var(--soft); border-radius:7px; position:relative; overflow:hidden; vertical-align:middle; }
.msk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:mskShim 1.3s ease-in-out infinite; }
@media(prefers-color-scheme:dark){ .msk::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); } }
@keyframes mskShim{ 100%{ transform:translateX(100%); } }
.msk-av{ width:26px; height:26px; border-radius:50%; margin-right:10px; }
.msk-ln{ height:11px; }
.msk-pill{ width:84px; height:20px; border-radius:999px; }
.msk-btn{ width:72px; height:26px; border-radius:8px; }

/* ---- Toast crisper ---- */
.toast{ box-shadow:var(--sh-lg); border-radius:12px; }

/* ============================================================================
   THEME TOKENS (pt.493) — moved here from app-live.js's injected style so they
   load render-blocking in <head> and the FIRST paint is already themed (no
   default-blue -> theme flash on every page switch). data-theme is set by a tiny
   early inline script in each page's <head>. THIS IS NOW THE SINGLE SOURCE for
   theme colors — edit themes HERE, not in app-live.js.
   ============================================================================ */
:root{--accent-rgb:37,99,235;--hover:#fcfcfd;--od-bg:#fee2e2;--od-bd:#fca5a5;--od-ink:#b91c1c;--od-strong:#7c2d12;--clr-bg:#eef1f5;--clr-bd:#cbd5e1;--clr-ink:#334155;--alert-bg:#fef2f2;--alert-bd:#fecaca;--alert-ink:#dc2626;}
:root[data-theme="dark"]{--bg:#0e1626;--panel:#161f30;--ink:#e6ebf3;--muted:#98a6bd;--line:#27324a;--accent:#3b82f6;--accent-rgb:59,130,246;--accent-soft:#182740;--navy:#0a111e;--soft:#1b2536;--danger:#f87171;--ok:#34d399;--warn:#fbbf24;--good-bg:#123324;--good-bd:#1e5a3c;--hover:#1f2a3f;--od-bg:#2a1721;--od-bd:#5b2a35;--od-ink:#fca5a5;--od-strong:#fdba74;--clr-bg:#1b2536;--clr-bd:#33415a;--clr-ink:#c3cfe0;--alert-bg:#2a1721;--alert-bd:#5b2a35;--alert-ink:#f87171;--sh-xs:0 1px 2px rgba(0,0,0,.45);--sh-sm:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.45);--sh-md:0 4px 10px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.55);--sh-lg:0 12px 34px rgba(0,0,0,.6);}
:root[data-theme="midnight"]{--bg:#000;--panel:#0b0f17;--ink:#e8edf5;--muted:#8f9cb3;--line:#1c2536;--accent:#4b8bff;--accent-rgb:75,139,255;--accent-soft:#111a2e;--navy:#0e141f;--soft:#10151f;--danger:#f87171;--ok:#34d399;--warn:#fbbf24;--good-bg:#0e2a1d;--good-bd:#1c5238;--hover:#232b39;--od-bg:#1e1017;--od-bd:#4a2028;--od-ink:#fca5a5;--od-strong:#fdba74;--clr-bg:#12161f;--clr-bd:#232d3d;--clr-ink:#aeb9cd;--alert-bg:#1e1017;--alert-bd:#4a2028;--alert-ink:#f87171;--sh-xs:0 1px 2px rgba(0,0,0,.6);--sh-sm:0 1px 3px rgba(0,0,0,.6);--sh-md:0 6px 16px rgba(0,0,0,.65);--sh-lg:0 14px 40px rgba(0,0,0,.75);}
:root[data-theme="sepia"]{--bg:#efe6d3;--panel:#fbf5e7;--ink:#3a2f21;--muted:#7a6b53;--line:#e2d5bd;--accent:#a5642a;--accent-rgb:165,100,42;--accent-soft:#f2e5cd;--navy:#3a2f21;--soft:#f3ead6;--danger:#b3261e;--ok:#3f7d3f;--warn:#a5642a;--good-bg:#e6f0d9;--good-bd:#c3d8a5;--hover:#efe4cf;--od-bg:#f3ddd6;--od-bd:#e0b3a8;--od-ink:#b3261e;--od-strong:#8a4b1e;--clr-bg:#eee2cc;--clr-bd:#d8c8a8;--clr-ink:#6b5c44;--alert-bg:#f3ddd6;--alert-bd:#e0b3a8;--alert-ink:#b3261e;}
:root[data-theme="pink"]{--bg:#fdf4f7;--panel:#ffffff;--ink:#40202e;--muted:#9c7183;--line:#f6dde6;--accent:#e5537d;--accent-rgb:229,83,125;--accent-soft:#fce7ee;--navy:#9e3a5b;--soft:#fdeef3;--danger:#dc2626;--ok:#16a34a;--warn:#c2650a;--good-bg:#e9f8ef;--good-bd:#bcf0cf;--hover:#fce2ea;--od-bg:#fee2e2;--od-bd:#fca5a5;--od-ink:#b91c1c;--od-strong:#7c2d12;--clr-bg:#f5e9ee;--clr-bd:#e7cbd6;--clr-ink:#6e4c5b;--alert-bg:#fdecec;--alert-bd:#f6bcbc;--alert-ink:#c0261e;}
:root[data-theme="lavender"]{--bg:#f6f3fc;--panel:#ffffff;--ink:#2c1d3f;--muted:#8579a0;--line:#e7ddf6;--accent:#7c3aed;--accent-rgb:124,58,237;--accent-soft:#efe7fd;--navy:#3f2d63;--soft:#f2ecfb;--danger:#dc2626;--ok:#16a34a;--warn:#c2650a;--good-bg:#e9f8ef;--good-bd:#bcf0cf;--hover:#f0e7fb;--od-bg:#fee2e2;--od-bd:#fca5a5;--od-ink:#b91c1c;--od-strong:#7c2d12;--clr-bg:#efe8f6;--clr-bd:#dccfe8;--clr-ink:#5d4c70;--alert-bg:#fdecec;--alert-bd:#f6bcbc;--alert-ink:#c0261e;}
:root[data-theme="red"]{--bg:#fbf3f3;--panel:#ffffff;--ink:#3a1717;--muted:#94696b;--line:#f0dada;--accent:#832232;--accent-rgb:131,34,50;--accent-soft:#f6e4e7;--navy:#4a0f18;--soft:#f8ebec;--danger:#a01823;--ok:#16a34a;--warn:#c2650a;--good-bg:#e9f8ef;--good-bd:#bcf0cf;--hover:#f7e6e8;--od-bg:#fee2e2;--od-bd:#fca5a5;--od-ink:#b91c1c;--od-strong:#7c2d12;--clr-bg:#f2e6e8;--clr-bd:#e2c6cb;--clr-ink:#6a4247;--alert-bg:#fdecec;--alert-bd:#f6bcbc;--alert-ink:#c0261e;}
:root[data-theme="green"]{--bg:#eef5f0;--panel:#ffffff;--ink:#12362a;--muted:#6b8c7c;--line:#d8e8de;--accent:#0a5c39;--accent-rgb:10,92,57;--accent-soft:#dcece2;--navy:#023d29;--soft:#eaf4ee;--danger:#dc2626;--ok:#15803d;--warn:#c2650a;--good-bg:#e3f3e9;--good-bd:#a7d8b8;--hover:#e4f1ea;--od-bg:#fee2e2;--od-bd:#fca5a5;--od-ink:#b91c1c;--od-strong:#7c2d12;--clr-bg:#e7efe9;--clr-bd:#c8d8cd;--clr-ink:#3a4b40;--alert-bg:#fdecec;--alert-bd:#f6bcbc;--alert-ink:#c0261e;}
:root{color-scheme:light}
:root[data-theme="dark"],:root[data-theme="midnight"]{color-scheme:dark}
option{background-color:var(--panel);color:var(--ink)}
/* pt.518/519: PHONE -- team tabs (ALL / CG1 / CG2 / CG3 / Red Team) share the row equally and scale to the phone
   width. pt.519: TWO rows per tab to save space -- team NAME on top, the count/dot BELOW it. The tab content is
   `name-text + <span>count</span>` (or `<span class=tdot> + name-text` on the board), so a column flex stacks the
   name (anonymous text item) and the number span; the board's leading .tdot is pushed to the bottom with order. */
/* pt.524: EXCLUDE .dtabs (History's horizontally-scrolling DATE tabs) from the equal-share/two-row treatment --
   it was squishing ~10 date pills into tiny overlapping columns. Date tabs keep their own nowrap scroll design. */
@media(max-width:640px){
  .tabs:not(.dtabs){width:auto !important;max-width:100%;gap:3px;padding:3px;box-sizing:border-box;align-items:stretch}
  .tabrow{flex-wrap:wrap}
  .tabrow .tabs:not(.dtabs){flex:1 1 100% !important}   /* Manage Distribution: the tabs fill the whole row; the finalize zone wraps below */
  .tabs:not(.dtabs) .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 3px;font-size:12px;font-weight:700;line-height:1.1;text-align:center}
  .tabs:not(.dtabs) .tab span{font-size:11px;font-weight:600;opacity:.7}
  .tabs:not(.dtabs) .tab .tdot{order:2;margin:2px 0 0}   /* board: the status dot sits BELOW the name */
  .tabs:not(.dtabs) .tab svg{order:3}                     /* Manage Distribution's finalized lock sits last */
}