/* ============================================================
   Theme — Sanitation Watch  ·  Microsoft Office / Fluent
   Modelled on the Excel start screen: white chrome, Excel green
   as the single accent, ribbon-style tabs with a green underline,
   fully rounded pill buttons, Fluent neutral greys, Segoe UI.
   Chosen because every officer already knows how to use Office —
   there is nothing to learn before using this tool.
   ============================================================ */
:root{
  /* Fluent neutrals */
  --bg:#f3f2f1;
  --surface:#ffffff;
  --surface-2:#faf9f8;
  --surface-3:#f3f2f1;
  --line:#edebe9;
  --line-strong:#d2d0ce;

  --ink:#201f1e;
  --ink-2:#323130;
  --ink-3:#605e5c;
  --ink-4:#a19f9d;

  /* Excel green */
  --accent:#107c41;
  --accent-2:#e7f2ec;
  --accent-ink:#0b5a2f;
  --accent-hover:#0e6c39;

  --ok:#107c10;      --ok-bg:#dff6dd;
  --warn:#b85c00;    --warn-bg:#fff4ce;
  --bad:#a4262c;     --bad-bg:#fde7e9;
  --info:#0f6cbd;    --info-bg:#eff6fc;
  --vip:#8764b8;     --vip-bg:#f3effa;

  --radius:8px;
  --radius-sm:4px;
  /* Fluent elevation, not drop shadows */
  --shadow:0 .3px .9px rgba(0,0,0,.10), 0 1.6px 3.6px rgba(0,0,0,.13);
  --shadow-lg:0 3.2px 7.2px rgba(0,0,0,.13), 0 .6px 1.8px rgba(0,0,0,.11);

  --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,"Segoe UI Web (West European)",
         Roboto,"Helvetica Neue",sans-serif;
  --sans-light:"Segoe UI Variable Display","Segoe UI Light","Segoe UI",sans-serif;
}

body{background:var(--bg);font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink)}

/* ============================================================
   Excel start-screen chrome
   Measured against the reference screenshot: 60px title bar,
   82px icon rail, active rail item as a filled green tile,
   content starting at 147px from the window edge.
   ============================================================ */

/* --- title bar --- */
.xl-title{display:flex;align-items:center;gap:10px;height:60px;padding:0 8px 0 14px;
  background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:40}
.xl-appicon{width:26px;height:26px;flex:0 0 26px;border-radius:3px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px}
.xl-appname{font-size:14px;font-weight:400;color:var(--ink);letter-spacing:0}
.xl-acct{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#8764b8;color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12.5px;cursor:default;
  margin-right:2px}
.xl-ic{width:38px;height:38px;border:0;background:transparent;color:var(--ink-2);
  border-radius:4px;font-size:15px;display:grid;place-items:center}
.xl-ic:hover{background:var(--surface-3)}
/* window controls, in the Office order and spacing */
.xl-wc{width:44px;height:38px;display:grid;place-items:center;font-size:12px;
  color:var(--ink-2);cursor:default;user-select:none}
.xl-wc:hover{background:var(--surface-3)}
.xl-close:hover{background:#c42b1c;color:#fff}
.xl-title .bell{width:38px;height:38px;border:0;background:transparent;border-radius:4px;
  color:var(--ink-2)}
.xl-title .bell:hover{background:var(--surface-3)}
.xl-title .bell-n{border-color:var(--surface);background:var(--bad)}

/* --- body split --- */
.xl-body{display:flex;min-height:calc(100vh - 60px)}

/* --- left icon rail --- */
.xl-rail{width:82px;flex:0 0 82px;background:var(--surface);display:flex;
  flex-direction:column;padding:4px 0 10px;position:sticky;top:0;
  height:calc(100vh - 60px);overflow-y:auto}
.xl-rail::-webkit-scrollbar{width:0}
.xl-rail-top{flex:1}
.xl-rail-bot{border-top:1px solid var(--line);padding-top:8px;margin:0 10px}
.xl-rail a{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;height:66px;margin:2px 6px;border-radius:4px;
  color:var(--ink-2);font-size:11.5px;font-weight:400;text-align:center;line-height:1.15;
  transition:.1s}
.xl-rail a:hover{background:var(--surface-3)}
/* the active item is a filled green tile, exactly as Excel marks Home */
.xl-rail a.on{background:var(--accent);color:#fff;font-weight:600}
.xl-rail a.on:hover{background:var(--accent-hover)}
.xl-rail a .ic{opacity:.85}
.xl-rail a.on .ic{opacity:1}
.xl-rail a .xl-tail{position:absolute;top:6px;right:12px;background:var(--bad);color:#fff;
  font-size:10px;font-weight:700;padding:0 5px;border-radius:9px;line-height:1.6}

/* --- main column --- */
.xl-main{flex:1;min-width:0;padding:26px 64px 60px 64px}
.xl-head{margin-bottom:26px}
/* the "Good morning" heading */
.xl-head h1{font-family:var(--sans-light);font-size:30px;font-weight:300;
  letter-spacing:-.008em;color:var(--ink);line-height:1.2}
.xl-sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}

/* --- section header: chevron + title, with a link on the right --- */
.xl-sec-h{display:flex;align-items:center;gap:9px;margin:0 0 16px}
.xl-sec-h .chev{color:var(--ink-3);font-size:13px;line-height:1}
.xl-sec-h h2{font-family:var(--sans-light);font-size:21px;font-weight:300;color:var(--ink)}
.xl-sec-h .more{margin-left:auto;font-size:13.5px;color:var(--ink-2);font-weight:400;
  display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:4px}
.xl-sec-h .more:hover{background:var(--surface-3);color:var(--accent)}

/* --- template-style tile gallery --- */
.xl-gallery{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.xl-tile{width:150px;display:block;text-align:center}
.xl-thumb{width:150px;height:106px;border:1px solid var(--line-strong);background:#fff;
  border-radius:2px;overflow:hidden;transition:.1s;position:relative}
.xl-tile:hover .xl-thumb{box-shadow:0 3.2px 7.2px rgba(0,0,0,.13);border-color:var(--accent)}
.xl-tile span{display:block;margin-top:10px;font-size:13px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-tile:hover span{color:var(--accent)}

/* --- pill filter row with the search box on the right --- */
.xl-filters{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.xl-pills{display:flex;gap:12px}
.xl-pills button{border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);border-radius:999px;padding:8px 22px;font-size:13.5px;font-weight:600;
  transition:.1s}
.xl-pills button:hover{background:var(--surface-3)}
.xl-pills button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.xl-search{margin-left:auto;flex:0 1 590px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);
  padding:0 12px;height:36px}
.xl-search svg{color:var(--ink-3);flex:0 0 16px}
.xl-search input{flex:1;min-width:0;border:0;outline:0;font-family:inherit;font-size:13.5px;
  color:var(--ink);background:transparent}
.xl-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* --- file-list style rows: name on the left, meta right-aligned --- */
.xl-listhead{display:flex;align-items:center;padding:0 0 10px;font-size:12.5px;
  color:var(--ink-3);border-bottom:1px solid var(--line)}
.xl-listhead .r{margin-left:auto;width:230px}
.xl-row{display:flex;align-items:center;gap:16px;padding:14px 8px 14px 0;
  border-bottom:1px solid var(--line);transition:background .1s}
.xl-row:hover{background:var(--surface-2)}
.xl-row .ico{width:34px;height:34px;flex:0 0 34px;border-radius:4px;display:grid;
  place-items:center;color:#fff}
.xl-row .nm{flex:1;min-width:0}
.xl-row .nm b{display:block;font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:0;line-height:1.3}
.xl-row .nm span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.xl-row .meta{width:230px;flex:0 0 230px;font-size:13px;color:var(--ink-3)}
.xl-row .act{display:flex;gap:8px;flex:0 0 auto}

@media(max-width:1180px){
  .xl-main{padding:22px 26px 50px}
  .xl-search{flex-basis:320px}
  .xl-row .meta,.xl-listhead .r{width:150px;flex-basis:150px}
}
@media(max-width:820px){
  .xl-rail{width:64px;flex:0 0 64px}
  .xl-rail a span{display:none}
  .xl-rail a{height:52px}
  .xl-appname,.xl-row .meta,.xl-listhead .r{display:none}
}

/* ---------------- Content ---------------- */
.pagewrap{max-width:none;margin:0;padding:20px 24px 56px}
.pghead{margin-bottom:18px}
/* the big light heading Office uses on its start screens */
.pghead h1{font-family:var(--sans-light);font-size:28px;font-weight:300;
  letter-spacing:-.01em;color:var(--ink)}
.pghead .sub{font-size:13.5px;color:var(--ink-3);margin-top:3px}
.grid{gap:14px}

/* ---------------- Cards ---------------- */
.card{border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:var(--surface)}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14.5px;font-weight:600;letter-spacing:0}
.card-h .hint{font-size:12.5px;color:var(--ink-3)}
.card-b{padding:16px}

/* ---------------- Stat tiles ---------------- */
.kpi{border-radius:8px;padding:16px;border:1px solid var(--line);
  box-shadow:var(--shadow);border-top:none}
.kpi.acc-ok,.kpi.acc-bad,.kpi.acc-warn,.kpi.acc-accent,.kpi.acc-vip{border-left:1px solid var(--line)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi.acc-ok::before{background:var(--ok)}
.kpi.acc-bad::before{background:var(--bad)}
.kpi.acc-warn::before{background:var(--warn)}
.kpi.acc-accent::before{background:var(--accent)}
.kpi.acc-vip::before{background:var(--vip)}
.kpi .lb{font-size:12.5px;font-weight:600;color:var(--ink-3);gap:7px;letter-spacing:0}
.kpi .lb svg{color:var(--ink-4)}
/* Office uses Light for display headings but semibold for figures — a thin
   32px numeral is elegant and hard to read across a desk. */
.kpi .vl{font-family:var(--sans);font-size:31px;font-weight:600;
  letter-spacing:-.022em;margin-top:6px;line-height:1.05;color:var(--ink)}
.kpi .vl small{font-size:16px;font-weight:400;color:var(--ink-3)}
.kpi .ft{font-size:12px;margin-top:7px}

/* ---------------- Buttons — fully rounded Office pills ---------------- */
.btn{border-radius:999px;font-weight:600;padding:6px 16px;font-size:13.5px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  transition:.1s}
.btn:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.btn:active{background:var(--line)}
.btn-sm{padding:4px 13px;font-size:12.5px}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-p:active{background:#0b5a2f;border-color:#0b5a2f}
.btn-ok{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ok:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-dn{background:var(--surface);border-color:#e8b7ba;color:var(--bad)}
.btn-dn:hover{background:var(--bad-bg);border-color:#d99aa2}
.btn-gh{border-color:transparent;background:transparent}
.btn-gh:hover{background:var(--surface-3);border-color:transparent}

/* segmented control, also pill shaped */
.seg{border-radius:999px;background:var(--surface-3);padding:3px;
  border:1px solid var(--line)}
.seg button{border-radius:999px;padding:5px 15px;font-size:13px;font-weight:600;
  color:var(--ink-2)}
.seg button:hover{color:var(--ink);background:rgba(0,0,0,.03)}
.seg button.on{background:var(--accent);color:#fff;font-weight:600;box-shadow:none}

/* inputs — Office uses a light box with a green focus underline */
.inp,select.inp{border-radius:4px;padding:6px 10px;font-size:13.5px;
  border:1px solid var(--line-strong);background:var(--surface)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fld label{font-size:12px;font-weight:600;color:var(--ink-3)}

/* pills / badges */
.pill{border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.tag{border-radius:4px;background:var(--surface-3);color:var(--ink-2)}

/* ---------------- Action Centre ---------------- */
.al-grp{background:var(--surface-2);padding:10px 16px;font-size:11.5px;
  letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
.al-grp b{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.al{padding:14px 16px;gap:13px;align-items:center;border-bottom:1px solid var(--line)}
.al:hover{background:var(--surface-2)}
.al-dot{width:9px;height:9px;flex:0 0 9px}
.al-t{font-size:14.5px;font-weight:600;letter-spacing:0;color:var(--ink)}
.al-d{font-size:13px;margin-top:2px;color:var(--ink-3)}
.al-more{background:var(--surface-2);color:var(--accent);font-weight:600}

/* ---------------- Tables — Excel-like grid ---------------- */
.tbl{font-size:13.5px}
.tbl thead th{background:var(--surface-2);font-size:12px;letter-spacing:0;
  text-transform:none;font-weight:600;color:var(--ink-2);padding:10px 14px;
  border-bottom:1px solid var(--line-strong)}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.row-alert{background:#fdf6f7}
.tbl tbody tr.row-alert:hover{background:var(--bad-bg)}
.mbar{height:6px;border-radius:3px;background:var(--surface-3)}

/* ---------------- Map ---------------- */
.mapwrap{background:#f6f8fa;border-radius:8px}
.maplegend{border-radius:0 0 8px 8px;font-size:12.5px;padding:12px 16px;
  background:var(--surface-2);border-top:1px solid var(--line)}
.scrub{padding:12px 16px;gap:14px;background:var(--surface-2);border-top:1px solid var(--line)}
.scrub b{font-size:15px;font-weight:600}
.scrub input[type=range]{accent-color:var(--accent)}
.tgl input{accent-color:var(--accent)}
.wchip,.rcard{border-radius:4px}

.drawer{border-radius:0}
.drawer-f{background:var(--surface-2)}

/* Office keeps focus rings visible — officers use keyboards */
.btn:focus-visible,.seg button:focus-visible,.tabs a:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

@media(max-width:760px){
  .xl-filters{flex-wrap:wrap}
  .xl-pills{flex-wrap:wrap}
  .xl-search{margin-left:0;flex:1 1 100%}
}