/* ============================================================================
   MightyScout dashboard -- shared brand theme (SINGLE SOURCE OF TRUTH).

   The Cloudflare Worker (src/worker.js) injects this file into the <head> of
   every page, AFTER the page's own <style>, so the rules here win. Change the
   design once here and it applies to every page.

   The structure below deliberately mirrors the Data Axle reporting dashboard:
   a full-bleed gradient masthead, a white "controls" card holding labelled
   rows, square-cornered outlined preset buttons, and a KPI grid whose cards
   repeat the control card's chrome. Only the palette differs.

   To restyle the whole dashboard, edit the tokens in the first :root block.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---- Brand tokens: the knobs. Edit these to recolor / re-font everything. ---- */
:root{
  --ms-green:#4eaf7c;       /* primary brand green */
  --ms-green-dk:#3d8e64;    /* darker green for gradients / hovers */
  --ms-green-soft:#eaf6f0;  /* pale green wash for chips / backgrounds */
  --ms-gold:#f6b03d;        /* accent gold */
  --ms-gold-soft:#fdf3e2;
  --ms-violet:#6e74d1;      /* secondary accent */
  --ms-violet-soft:#eeeffb;
  --ms-brown:#5b5147;       /* warm near-black text */
  --ms-white:#ffffff;
  --ms-line:#e7e4e0;        /* hairlines / borders */
  --ms-bg:#f7f6f4;          /* app background */
  --ms-card:#ffffff;
  --ms-muted:#8b8177;       /* muted body text */
  --ms-good:#2f8f5f;
  --ms-warn:#c9820a;
  --ms-bad:#c0492f;

  /* Masthead band. Three stops, same 120deg sweep as the Data Axle header,
     recoloured from navy to the MightyScout greens with the warm brand brown
     seeding the dark end so it does not read as a generic green. */
  --ms-band1:#33453c;
  --ms-band2:#356f52;
  --ms-band3:#4eaf7c;
  --ms-band-sub:#c3ddcd;    /* muted sub-copy on the band */

  --ms-font-head:'Poppins','Inter',sans-serif;
  --ms-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ---- Shared variable names used by the pages ---- */
:root{
  --ink:var(--ms-brown); --muted:var(--ms-muted); --line:var(--ms-line);
  --bg:var(--ms-bg); --card:var(--ms-card);
  --accent:var(--ms-green); --accent-dk:var(--ms-green-dk); --accent-soft:var(--ms-green-soft);
  --gold:var(--ms-gold); --gold-soft:var(--ms-gold-soft);
  --violet:var(--ms-violet); --violet-soft:var(--ms-violet-soft);
  --good:var(--ms-good); --warn:var(--ms-warn); --bad:var(--ms-bad);
}

/* ---- Base ---- */
body{font-family:var(--ms-font-body) !important;color:var(--ms-brown);background:var(--ms-bg);font-size:15px}
h1,h2,h3,h4{font-family:var(--ms-font-head) !important}
a{color:var(--ms-green-dk)}

/* ---- Masthead ----------------------------------------------------------
   Full-bleed gradient band, NOT a plain strip. Two-pole justified layout on a
   shared baseline: brand on the left, data-freshness on the right. The band's
   inner wrapper shares its max-width and horizontal padding with <main>, so
   the wordmark, the DATE RANGE label and the first KPI tile all line up on one
   vertical gutter. */
header{
  background:linear-gradient(120deg,var(--ms-band1) 0%,var(--ms-band2) 62%,var(--ms-band3) 100%) !important;
  color:#fff !important;
  padding:34px 28px 26px !important;
  margin-bottom:0 !important;
  border-bottom:none !important;
}
header .hwrap{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;padding:0}
header .brand h1{font-size:26px;font-weight:700;letter-spacing:.2px;color:#fff !important;margin:0}
header .brand h1 .mark{color:var(--ms-gold) !important}
header .brand p{color:var(--ms-band-sub) !important;margin:6px 0 0;font-size:14px}
header .refreshed{text-align:right;font-size:13px;color:var(--ms-band-sub)}
header .refreshed b{display:block;color:#fff;font-size:14px;margin-bottom:2px;font-weight:650}

/* ---- Cross-page nav: a TAB BAR (markup injected into <body> by the Worker) ----
   Sits above the masthead on a white ground, so the coloured band reads as the
   page header rather than as chrome. The underline is always present but
   transparent at rest, so nothing shifts by a pixel between states. */
#dashnav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ms-line);display:flex;align-items:stretch;gap:16px;padding:0 28px;font-family:var(--ms-font-head)}
#dashnav .brandlogo{display:inline-flex;align-items:center;text-decoration:none;flex:none;padding:7px 0}
#dashnav .brandlogo img{height:32px;width:auto;max-width:190px;object-fit:contain;display:block}
#dashnav .tabs{display:flex;align-items:stretch;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
#dashnav .tabs::-webkit-scrollbar{display:none}
#dashnav .tab{position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;color:var(--ms-muted);font-size:13.5px;font-weight:600;letter-spacing:.1px;padding:0 15px;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
#dashnav a.tab:hover{color:var(--ms-green-dk);background:var(--ms-green-soft);border-bottom-color:#a9dcc2}
#dashnav a.tab:focus-visible{outline:2px solid var(--ms-green);outline-offset:-4px}
#dashnav a.tab.active{color:var(--ms-green-dk);border-bottom-color:var(--ms-green)}
#dashnav a.tab.active:hover{background:var(--ms-green-soft);border-bottom-color:var(--ms-green)}
#dashnav .tab.soon{color:#bdb6ae;cursor:default}
#dashnav .tab.soon em{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--ms-line);color:var(--ms-muted);padding:1px 6px;border-radius:99px}

/* ---- Main container: same gutter as the masthead ---- */
main{max-width:1240px;margin:0 auto;padding:24px 28px 56px}

/* ---- Controls card -----------------------------------------------------
   The date control lives INSIDE a card with the same chrome as the KPI tiles,
   so it reads as the first card of the dashboard rather than as a toolbar.
   Each row starts with a fixed-width uppercase micro-label, which puts every
   row's controls on the same x and makes the card a two-column form. */
.controls{background:var(--ms-card);border:1px solid var(--ms-line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:13px;margin-bottom:22px}
.ctrlrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctrlrow .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ms-muted);font-weight:700;min-width:92px}
.ctrlrow .sep{color:var(--ms-muted);font-size:12.5px}
.ctrlrow .rule{width:1px;align-self:stretch;background:var(--ms-line);margin:0 4px}
.ctrlrow input[type=date],.ctrlrow select,.ctrlrow input[type=search]{border:1px solid var(--ms-line);border-radius:8px;padding:6px 10px;font-size:12.5px;background:#fff;color:var(--ms-brown);font-family:inherit;cursor:pointer}
.ctrlrow input[type=date]:hover,.ctrlrow select:hover,.ctrlrow input[type=search]:hover{border-color:#cdc7c0}
.ctrlrow input[type=search]{min-width:220px;cursor:text}
.ctrlrow input[type=search]:focus,.ctrlrow select:focus{outline:2px solid var(--ms-green);outline-offset:-1px}

/* Preset buttons are SQUARE-CORNERED OUTLINED BUTTONS (radius 8), not pills.
   Pills are reserved for data tags. Selected is a hard fill that matches the
   masthead's dark end; hover is the gold accent and is deliberately unrelated
   to the selected state. */
button.preset{border:1px solid var(--ms-line);background:#fff;color:var(--ms-brown);padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
button.preset:hover{border-color:var(--ms-gold);color:#a5731d}
button.preset.on{background:var(--ms-green-dk);border-color:var(--ms-green-dk);color:#fff}
button.preset.on:hover{background:var(--ms-green-dk);border-color:var(--ms-green-dk);color:#fff}
button.preset:focus-visible{outline:2px solid var(--ms-green);outline-offset:2px}

/* The resolved range, echoed back in prose in its own labelled row. */
.rangeShow{font-size:12.5px;color:var(--ms-muted)}
.rangeShow b{color:var(--ms-brown);font-weight:650}

/* ---- KPI grid: same chrome as the control card, tighter padding ---- */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.kpi{background:var(--ms-card);border:1px solid var(--ms-line);border-radius:14px;padding:16px 18px}
.kpi .t{font-size:11.5px;font-weight:700;color:var(--ms-muted);text-transform:uppercase;letter-spacing:.7px}
.kpi .v{font-size:24px;font-weight:750;margin-top:6px;letter-spacing:-.3px;font-family:var(--ms-font-head)}
.kpi .d{font-size:12.5px;margin-top:5px;font-weight:600;color:var(--ms-muted)}
.kpi .d.up{color:var(--ms-good)}
.kpi .d.down{color:var(--ms-bad)}
.kpi .d.flat{color:var(--ms-muted)}
/* One tile carries the headline number and is filled, not outlined. */
.kpi.hero{background:linear-gradient(135deg,var(--ms-green-dk),var(--ms-green));border-color:var(--ms-green-dk);color:#fff}
.kpi.hero .t,.kpi.hero .d{color:#e3f3ea}
.kpi.hero .d.up{color:#d6f2e2}
.kpi.hero .d.down{color:#ffe0d8}

/* ---- Section heads and cards below the fold ---- */
.sectionhead{margin:26px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sectionhead h2{font-size:18px;font-weight:750;margin:0}
.sectionhead span{font-size:12.5px;color:var(--ms-muted);font-weight:400}
.card{background:var(--ms-card);border:1px solid var(--ms-line);border-radius:14px;padding:20px 22px}
table.grid th{color:var(--ms-muted);font-weight:600}
table.grid tbody tr:hover{background:var(--ms-green-soft)}
.pill.good{background:var(--ms-green-soft);color:var(--ms-good)}
.pill.warn{background:var(--ms-gold-soft);color:var(--ms-warn)}
.pill.bad{background:#fbeceb;color:var(--ms-bad)}

@media (max-width:820px){
  header{padding:24px 16px 20px !important}
  header .brand h1{font-size:21px}
  #dashnav{gap:8px;padding:0 12px}
  #dashnav .brandlogo img{height:26px}
  #dashnav .tab{padding:0 11px;font-size:12.5px}
  main{padding:18px 16px 48px}
  .ctrlrow .lbl{min-width:100%}
}
