/* ==========================================================================
   Growisto design tokens — the ONE place a colour, radius or type choice lives.
   Every element reads from here; nothing hardcodes a colour. Brand palette per
   PROMPT_07 §1, no substitutions. Loaded AFTER the app stylesheet so it wins.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root{
  /* --- palette --------------------------------------------------------- */
  --teal:#367588;            /* primary surfaces, headers, active nav */
  --teal-deep:#2B5D6D;       /* second elevation on teal */
  --teal-deepest:#245160;    /* third elevation on teal */
  --powder:#B8DBD9;          /* labels on teal, KPI backgrounds, borders on teal */
  --cultured:#F6F6F4;        /* page background -- never white, never dark */
  --raisin:#1D1D20;          /* all body text */
  --white:#FFFFFF;           /* card surfaces, text on teal */
  --flame:#E35D34;           /* alerts, behind-target, leakage, active accent */
  --amber:#EF9F27;           /* warning, stale (fill) */
  --amber-text:#854F0B;      /* warning, stale (text), light mode */
  --green:#1D9E75;           /* brand fill -- rings, chart lines, "good" accents */
  --good-text:#0F6E56;       /* on-target text, light mode -- un-aliased from --green:
                                the brand fill is 3.0:1 on white (fails 4.5:1 as text);
                                this is its own darkened, contrast-safe sibling, same as
                                --bad already is for --flame. See the comment above the
                                base :root block a few lines down. */
  --band-ref:#5F5E5A;        /* table column band: reference */
  --band-total:#185FA5;      /* table column band: total business */
  --icon-fill:#6B7378;       /* small solid badges carrying white type (e.g. the info-
                                fold "i") -- its own token, theme-invariant, because
                                --text3 (formerly this same value) now goes LIGHT in
                                dark mode and white-on-light-fill would stop reading */

  /* --- type ------------------------------------------------------------ */
  --font:'Poppins',-apple-system,system-ui,sans-serif;
  --w-regular:400;--w-semibold:600;

  /* --- shape ----------------------------------------------------------- */
  --r-card:12px;--r-btn:7px;--r-pill:12px;
  /* the ONE spacing scale: 4 · 8 · 12 · 16 · 24. Nothing else. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;
  --hairline:0.5px solid var(--border);

  /* --- the app's own token names, mapped onto the brand -- LIGHT (default) -----
     The stylesheet already reads these everywhere; pointing them at the palette
     re-skins every existing screen without touching a rule. Every status colour is
     DARKENED from the brand fill before it becomes text (green/flame both keep a
     vivid fill value above and a separate, contrast-checked text value here) --
     the brand originals survive as -bg tints and button fills, where white type
     sits on them instead. --text3 is deliberately darker than a literal read of
     "sub #7A8A90" (that value alone is 3.58:1 on white): it paints 11px captions
     and this project holds it to the full 4.5:1 floor, not the usual 3.0 large-
     text floor, after a prior regression to 3.76:1 slipped through on a laxer
     one. #68757A is the same hue, scaled dark enough to clear 4.76:1. */
  --bg:var(--cultured);--surface:var(--white);--border:#E6E8E6;--line:#E6E8E6;
  --text:var(--raisin);--ink:var(--raisin);--text2:#4A5459;--text3:#68757A;--mark-neutral:#8A9296;
  --heading-caps:var(--teal);       /* new Home section eyebrows, 7.5px caps */
  --accent:var(--teal);--accent-bg:#E9F3F2;
  --good:var(--good-text);--good-bg:#E6F2EE;
  --warn:var(--amber-text);--warn-bg:#FDF3E2;
  --bad:#B84424;--bad-bg:#FBE9E3;          /* flame darkened for text; the fill stays flame */
  --hover-tint:#EEF4F3;
  /* --soft / --sub: HOME FIX PASS §5/§7 -- a calmer table-header/selected-state pair than
     the vivid --teal fill. Aliased to already contrast-checked tokens rather than new hex
     (--hover-tint is the existing "soft interactive tint"; --text2 is the existing body-2
     colour) so nothing here needs its own WCAG proof -- it inherits the ones above/below. */
  --soft:var(--hover-tint);--sub:var(--text2);
  --sidebar-bg:var(--teal);--sidebar-text:var(--white);--sidebar-hover:var(--teal-deep);
  --sidebar-active:var(--flame);--month-bg:var(--teal-deep);--month-active:var(--flame);
  --gw-teal:var(--teal);--gw-powder:var(--powder);--gw-flame:var(--flame);
  --gw-line2:#E6EDEC;--gw-thead:var(--teal);
  --gw-sh:none;                              /* depth comes from the three teals, not shadows */
  --gw-r:var(--r-card);
}

/* --- DARK palette -----------------------------------------------------------
   One additional, deliberate, contrast-proofed palette -- toggled by a body
   class (never a `data-theme` attribute, never an OS `prefers-color-scheme`
   query), set from `themeGet()`/`themeSetPref()` in dashboard.html. teal/powder/
   flame/amber/the raw --green fill stay THEME-INVARIANT accents (the sidebar and
   month-bar chrome key off --sidebar-bg/--gw-teal, both still literally teal, so
   they render identically in both themes with zero changes here) -- only
   surfaces, hairlines and TEXT swap. --accent defaults to teal in light mode, but
   teal-as-small-text on the dark card is only 2.35:1 (fails 3.0), so it gets the
   same treatment as good/warn/bad: a lightened, contrast-checked dark sibling, not
   a literal reuse of the invariant fill. Every pair below is verified against
   theme.py's own WCAG formula, not eyeballed:
     white body #FFFFFF on card #163A45 -- 12.17:1
     sub/headings #9FC3CC on card -- 6.46:1, on bg -- 7.97:1
     accent (links) #5E91A0 on card -- 3.50:1
     good text #56B698 on card -- 4.95:1, on its own good-bg -- 6.76:1
     warn text #F1AD47 on card -- 6.26:1, on its own warn-bg -- 7.74:1
     bad text #EA8667 on card -- 4.70:1, on its own bad-bg -- 6.53:1
     mark-neutral #7FA8B2 on card -- 4.72:1
   ---------------------------------------------------------------------------- */
body.dark{
  --bg:#0F2A33;--surface:#163A45;--border:#1E4C5A;--line:#1E4C5A;--cultured:#12313B;
  --text:#FFFFFF;--ink:#FFFFFF;--text2:#9FC3CC;--text3:#9FC3CC;--mark-neutral:#7FA8B2;
  --heading-caps:#9FC3CC;
  --accent:#5E91A0;--accent-bg:#173F4B;
  --good:#56B698;--good-bg:#06231A;
  --warn:#F1AD47;--warn-bg:#352309;
  --bad:#EA8667;--bad-bg:#32140B;
  --hover-tint:#1A4552;
  --gw-line2:#1E4C5A;
  --soft:var(--hover-tint);--sub:var(--text2);
}

/* --- base ---------------------------------------------------------------- */
body{font-family:var(--font);font-weight:var(--w-regular);color:var(--text);background:var(--bg) !important}
b,strong,h1,h2,h3,h4,th,.kpi .value,.pill,.tb-btn.on,.tb-btn.primary{font-weight:var(--w-semibold)}
h1,h2,h3,h4{color:var(--ink)}
.main h1{font-size:20px;margin-bottom:4px}
.main h1+.subtitle,.subtitle{font-size:13px;color:var(--text2);margin:0 0 18px}

/* --- components ---------------------------------------------------------- */
.ba-card,.kpi,.table-wrap,.chart-card,.bar-chart,.empty,.src-card,.dd-panel,.rb-pop{
  background:var(--white);border:var(--hairline);border-radius:var(--r-card);box-shadow:none}
.note{border-radius:var(--r-card);background:var(--warn-bg);border-left:3px solid var(--amber)}
.tb-btn,.ba-tin,.tb-search input,.tb-input,.rb-cal .hd select,.rb-cal .hd .nv{border-radius:var(--r-btn)}
.tb-btn.primary,.rb-foot .tb-btn.primary{background:var(--teal);border-color:var(--teal);color:var(--white)}
.tb-btn.on{background:var(--teal);border-color:var(--teal);color:var(--white)}
[data-export],[data-baexport],[data-plexport],[data-cmpexport],[data-avexport],[data-cdexport],[data-hnexport],
[data-mpexport],[data-sdexport],[data-bpexport],#daily-csv,[data-pgexport],[data-artxlsx]{
  background:var(--flame);border-color:var(--flame);color:var(--white)}
.pill{border-radius:var(--r-pill)}
.pill.on,.tb-btn.dd-btn.on{background:var(--teal);color:var(--white);border-color:var(--teal)}
th{background:var(--teal);color:var(--white);border-bottom:none}
th .sort-ind{color:var(--powder)}
tbody tr:nth-child(even) td{background:var(--cultured)}
tbody tr:hover td{background:var(--hover-tint)}
tfoot td{background:var(--teal);color:var(--white);font-weight:var(--w-semibold);border-top:none}
.table-wrap td:first-child{background:inherit}
.table-wrap tbody tr:nth-child(odd) td:first-child{background:var(--white)}
.table-wrap tbody tr:nth-child(even) td:first-child{background:var(--cultured)}
.table-wrap tbody tr:hover td:first-child{background:var(--hover-tint)}
.table-wrap tfoot td:first-child{background:var(--teal)}
.table-wrap th:first-child{background:var(--teal)}
/* status dots: these three marks, nothing else (the old ahead/paced/slow/watch
   text-status vocabulary and its 2 rules were removed with homePace() -- the
   new Projection status pill on Home has its own dedicated CSS, see ui.css) */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-right:6px}
.dot.ok{background:var(--green)}.dot.stale{background:var(--amber)}.dot.failed{background:var(--flame)}
.status{font-size:11px;font-weight:var(--w-semibold);letter-spacing:.06em;white-space:nowrap}
.eyebrow{font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--w-semibold);color:var(--powder)}
.eyebrow.dark{color:var(--text2)}

/* --- the shell: top bar white, sidebar teal ------------------------------ */
.month-bar{background:var(--surface);border-bottom:var(--hairline);color:var(--text)}
.month-bar .logo{color:var(--text);display:inline-flex;align-items:center;gap:8px}
.month-bar .logo img{width:22px;height:22px;display:block}
.rb-btn{background:var(--teal);border-color:var(--teal);color:var(--white)}
.rb-note{color:var(--text2);opacity:1}
.rb-cat{background:var(--white);color:var(--ink);border-color:var(--powder)}
.nav-toggle{color:var(--text)}
.nav-toggle .bars i{background:var(--text)}
.sidebar{background:var(--teal);color:var(--white)}
.sidebar button{color:var(--white);border-radius:var(--r-btn);margin:1px 8px;width:calc(100% - 16px);padding:8px 10px}
.sidebar button:hover{background:var(--teal-deep)}
.sidebar button.active{background:var(--flame)}
.sidebar button .icon{color:var(--powder);opacity:1;display:inline-flex;width:16px}
.sidebar button .icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sidebar button.active .icon{color:var(--white)}
.nav-sep{background:var(--teal-deep)}
.nav-head{color:var(--powder);opacity:1;font-size:8px;letter-spacing:.14em}
.sidebar .fb-B{color:var(--white);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.sidebar .fb-P{background:var(--flame);border-color:var(--flame)}
.sidebar button.active .fb-P{background:var(--white);color:var(--flame);border-color:var(--white)}

/* --- HOME FIX PASS §10: dark mode is not teal-invariant chrome after all -- the sidebar
   and top bar explicitly switch to the dark surface, with the active nav item reading
   teal (not flame) against it. Scoped to body.dark only; light mode keeps the original
   always-teal shell above untouched. */
body.dark .sidebar{background:var(--bg)}
body.dark .sidebar button:hover{background:var(--hover-tint)}
body.dark .sidebar button.active{background:var(--teal)}
body.dark .month-bar{background:var(--bg);border-bottom:var(--hairline)}
body.dark .month-bar .logo,body.dark .month-bar .avatar{color:var(--white)}
body.dark .month-bar .avatar{background:var(--teal)}
body.dark .nav-toggle,body.dark .nav-toggle .bars i{color:var(--white)}
body.dark .nav-toggle .bars i{background:var(--white)}
body.dark .sb-search input{background:var(--surface);border-color:var(--border)}
body.dark .nav-sep,body.dark .sb-foot{border-color:var(--border);background-color:transparent}
body.dark .nav-sep{background:var(--border)}
body.dark .month-bar .acct{background:var(--surface);color:var(--text);border-color:var(--border)}