/* static/css/theme.css - shared LIGHT theme for Muster.
   Muster is authored dark-first: each page's inline <style> defines the dark
   palette on :root. This file adds a LIGHT variant that activates only when
   <html data-theme="light"> is set (the nav.js toggle, persisted in localStorage
   as `musterTheme`; a tiny inline script in each <head> applies it before first
   paint so there is no flash).

   How it stays low-touch:
   - The `[data-theme="light"]` attribute selector out-specifies the templates'
     plain `:root{...}` rules, so the neutral palette flips with NO template edits.
   - Translucent rgba() chip/tint backgrounds are deliberately NOT overridden:
     being semi-transparent they composite over the now-light surface and go pale
     on their own. Only the SOLID / hardcoded dark-assumed colours (coverage
     cells, weekend columns, pinned rows, a few hardcoded chip texts, nav) need
     explicit light values, listed at the bottom.
   - Three variable naming conventions exist in the app (standard pages, nav.css's
     --nav-*, login.html's --card/--dim/...); all three are re-pointed below. */

:root{ color-scheme: dark; }

/* ---- Variable overrides: neutrals + accents deepened for readability on light ---- */
:root[data-theme="light"]{
  color-scheme: light;

  /* standard palette: grid / daily / admin / home / calendar / swaps */
  --bg:#eef1f5; --bg-elev:#f6f8fa; --bg-card:#ffffff; --bg-pop:#ffffff;
  --border:#d7dee6; --border-bright:#c0c9d3;
  --text:#18222d; --text-dim:#5b6672;
  --accent:#a9741a;
  --op:#a9741a; --standby:#2f77b5; --training:#1f8a7a; --clinical:#2c8a52;
  --leave:#8a45b0; --off:#67727e;
  --ot:#c05a1e; --danger:#c0392b; --ok:#2c8a52; --good:#2c8a52;

  /* chip/tint fills: dark translucent -> SOLID pale, so chips keep their weight on
     white instead of ghosting (translucent-over-light composites to near-nothing) */
  --op-bg:#f6eccf; --training-bg:#d5f0ea; --clinical-bg:#dcf1e4;
  --leave-bg:#f0e2f6; --off-bg:#edf0f3;

  /* nav.css palette */
  --nav-bg:#ffffff; --nav-elev:#f1f4f7; --nav-border:#e4e9ef;
  --nav-text:#18222d; --nav-dim:#5b6672; --nav-accent:#a9741a;

  /* login.html palette */
  --card:#ffffff; --border2:#c0c9d3; --dim:#5b6672; --dim2:#79838f; --red:#c0392b;
}

/* ================= Bespoke: rules that hardcode a dark-assumed colour ================= */
/* (each mirrors the exact base selector + a leading [data-theme="light"] so it
   always out-specifies the dark rule regardless of source order.) */

/* grid coverage cells: darkened text + PALE fills on EVERY row (not just pinned).
   The base translucent dark tints (rgba red/gold/green .2-.24) composite to a muddy
   wash over the light grid; these pale fills keep the coverage band calm + legible. */
[data-theme="light"] tr.req-row td.req.met{color:#1f8a4d;background:#e3f3ea;}
[data-theme="light"] tr.req-row td.req.partial{color:#8a6300;background:#f7eecf;}
[data-theme="light"] tr.req-row td.req.unfilled{color:#c0392b;background:#fbe4df;}
[data-theme="light"] tr.req-row td.req.over{color:#2760c0;background:#e1ebfb;}

/* grid pinned coverage rows: opaque dark tints -> a touch stronger pale (stands out
   when frozen); higher specificity than the per-row rule above so pinned wins */
[data-theme="light"] tr.req-row.pinned > td.req.met{background:#dcf1e4;}
[data-theme="light"] tr.req-row.pinned > td.req.partial{background:#f6ecc8;}
[data-theme="light"] tr.req-row.pinned > td.req.unfilled{background:#fadfd9;}
[data-theme="light"] tr.req-row.pinned > td.req.over{background:#dbe8fb;}

/* weekend columns: near-black -> faint grey (grid + calendar) */
[data-theme="light"] th.daycol.weekend{background:#e8edf3;}
[data-theme="light"] td.cell.weekend{background:#e8edf3;}
[data-theme="light"] .daycell.weekend{background:#e8edf3;}

/* leave-conflict warning text */
[data-theme="light"] .grp-warn{color:#c0392b;}

/* hardcoded chip / pill text colours (the var-driven ones track automatically) */
[data-theme="light"] .chip.admin,[data-theme="light"] .pill.admin{color:#2f77b5;}
[data-theme="light"] .pill.training{color:#1f8a7a;}
[data-theme="light"] .pill.leave{color:#8a45b0;}

/* white hover overlay -> subtle dark on light */
[data-theme="light"] .pin-btn:hover{background:rgba(0,0,0,.06);}

/* ---- Nav shell: spots that assumed a dark sidebar ---- */
[data-theme="light"] #muster-nav a.navlink.active{color:#18222d;}
[data-theme="light"] #muster-nav a.navlink .badge{color:#c0392b;}
[data-theme="light"] #muster-nav a.navlink:hover{background:rgba(0,0,0,.045);}
[data-theme="light"] #muster-nav .navcollapse:hover{background:rgba(0,0,0,.045);}
[data-theme="light"] #muster-nav .usercard .signout:hover,
[data-theme="light"] #muster-nav .themetoggle:hover{background:rgba(0,0,0,.05);}

/* ---- Chip pills on light: solid pale fill + crisp border so they read as defined
   tags, not faint washes. Set the background DIRECTLY here (not only via --*-bg):
   some views (daily, calendar) hardcode their chip fills instead of using the vars,
   and a per-class rule out-specifies both, so chips are fixed on every page. ---- */
[data-theme="light"] .chip.op{background:#f6eccf;border-color:#e4cf95;}
[data-theme="light"] .chip.training{background:#d5f0ea;border-color:#a0d8cd;}
[data-theme="light"] .chip.clinical{background:#dcf1e4;border-color:#a8d8bd;}
[data-theme="light"] .chip.leave{background:#f0e2f6;border-color:#d3b3e0;}
[data-theme="light"] .chip.off{background:#edf0f3;border-color:#cfd6dd;}
[data-theme="light"] .chip.admin{background:#dcebf8;border-color:#a9cce8;}

/* ---- Soft elevation: white-on-white surfaces read as layered panels, not flat
   outlines. Dark-tuned heavy shadows would look dirty on light, so keep them faint. ---- */
[data-theme="light"] .legend{box-shadow:0 3px 12px rgba(24,34,45,.05);}
[data-theme="light"] #gridhost table{box-shadow:0 6px 20px rgba(24,34,45,.06);}
[data-theme="light"] .card{box-shadow:0 14px 44px rgba(24,34,45,.12);}
[data-theme="light"] #muster-nav{box-shadow:2px 0 14px rgba(24,34,45,.05);}

/* ---- Styled tooltip card: any element with title= gets this app-styled hover
   card instead of the native browser bubble (handler in nav.js). Same surface
   tokens as the grid hover cards / popovers; vars flip with the theme above. ---- */
.tip-card{position:fixed;z-index:200;max-width:340px;background:var(--bg-card,#1c252e);border:1px solid var(--border-bright,#3a4754);border-radius:9px;padding:8px 11px;box-shadow:0 8px 26px rgba(0,0,0,.45);font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:500;line-height:1.45;color:var(--text,#e6ecf2);pointer-events:none;display:none;white-space:pre-line;word-break:break-word;}
[data-theme="light"] .tip-card{box-shadow:0 8px 26px rgba(24,34,45,.16);}
