/* ══════════════════════════════════════════════════════════════════════════
   Evergrove Healthcare — QA Compliance · THEME LAYER  (Grove concept)
   Data-first · donut gauge · department table · warm-graphite dark by default.
   Scoped under body.evg so non-revamped pages are untouched.
   Theme is driven by html[data-mode="light"|"dark"] (dark = default).
   Loaded after style.css. Self-hosted, PHI-safe.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens — DARK is the default ────────────────────────────────────────── */
body.evg {
  --ground:#161513; --ground-2:#100F0D; --surface:#201E1B; --surface-2:#282521; --hover:#322E29;
  --ink:#ECE7DC; --ink-2:#BDB6A7; --muted:#8B8577; --line:#39352E; --line-soft:#282420;
  --green:#5CBB88; --green-deep:#8AD3A8; --green-soft:#1E3327;
  --gold:#FFD05B; --gold-deep:#E6C577; --gold-soft:#38331C;
  --ok:#63C68C; --ok-soft:#1E3A2A; --warn:#E7B65A; --warn-soft:#3D3418; --bad:#E28B6B; --bad-soft:#40261A;
  --f-newleaf:#22B0A6; --f-grove:#54B172; --f-voyager:#B074CC; --f-detox:#4C9FD6;
  /* department data hues (dark-tuned, CVD-safe categorical) */
  --d-admissions:#3BBE74; --d-admin:#2BB6C2; --d-medical:#A574D6; --d-nursing:#E0A03E; --d-case_management:#D46F8C; --d-therapy:#93B24C;
  --accent:var(--green);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 24px 56px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.4);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --r-lg:20px;
  background:var(--ground); color:var(--ink); font-family:var(--sans);
}

/* ── Tokens — LIGHT (warm cream) ─────────────────────────────────────────── */
html[data-mode="light"] body.evg {
  --ground:#F4F0E6; --ground-2:#EBE4D3; --surface:#FFFEFB; --surface-2:#F6F1E6; --hover:#EFE9DA;
  --ink:#22261D; --ink-2:#525646; --muted:#6B6A57; --line:#E3DBC7; --line-soft:#EDE7D8;
  --green:#1F6741; --green-deep:#164E30; --green-soft:#E7F0E9; --gold:#FFD05B; --gold-deep:#836315; --gold-soft:#FBF1D3;
  --ok:#2A7047; --ok-soft:#E4F0E8; --warn:#916310; --warn-soft:#F8EFD7; --bad:#A8492A; --bad-soft:#F6E1D7;
  --f-newleaf:#0C7A7A; --f-grove:#2E7D46; --f-voyager:#6A3F91; --f-detox:#1E72AE;
  --d-admissions:#1F8A4C; --d-admin:#0E9BA8; --d-medical:#7A45A6; --d-nursing:#C67A16; --d-case_management:#B04E6A; --d-therapy:#6E8B2E;
  --shadow-sm:0 1px 2px rgba(50,44,15,.05);
  --shadow:0 8px 26px rgba(50,44,15,.08),0 2px 6px rgba(50,44,15,.05);
  --shadow-lg:0 22px 52px rgba(45,40,14,.15);
}

/* ── Legacy-token aliases ────────────────────────────────────────────────────
   Map the original style.css token names onto the Grove palette so every
   existing component (department, staff, reports, sync, login) adopts the new
   colors + dark mode with no markup changes. Defined once on body.evg; each
   alias references a Grove token that already flips per data-mode. */
body.evg {
  --bg:var(--ground); --bg-warm:var(--ground-2); --surface-hover:var(--hover);
  --border:var(--line); --border-light:var(--line-soft);
  --text:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--muted);
  --accent-hover:var(--green-deep); --accent-light:var(--green-soft); --accent-dim:color-mix(in srgb,var(--green) 12%,transparent);
  --primary:var(--green); --primary-light:var(--green-soft);
  --gold-dark:var(--gold-deep); --gold-light:var(--gold-soft);
  --teal-600:var(--f-newleaf); --teal-500:var(--f-newleaf); --sky-500:var(--f-detox); --indigo-500:var(--f-voyager);
  --success:var(--ok); --success-light:var(--ok-soft); --success-bg:var(--ok-soft); --success-text:var(--ok);
  --warning:var(--warn); --warning-light:var(--warn-soft); --warning-bg:var(--warn-soft); --warning-text:var(--warn);
  --danger:var(--bad); --danger-light:var(--bad-soft); --danger-bg:var(--bad-soft); --danger-text:var(--bad);
  --shadow-md:var(--shadow); --radius:var(--r); --radius-lg:var(--r-lg);
}

/* active-facility accent (html[data-facility] set server-side) */
html[data-facility="newleaf"] body.evg { --accent:var(--f-newleaf); }
html[data-facility="grove"]   body.evg { --accent:var(--f-grove); }
html[data-facility="voyager"] body.evg { --accent:var(--f-voyager); }
html[data-facility="detox"]   body.evg { --accent:var(--f-detox); }

body.evg { -webkit-font-smoothing:antialiased; min-height:100vh; }
/* Native controls (date pickers, selects, scrollbars) follow the theme. */
html[data-mode="dark"] { color-scheme:dark; }
html[data-mode="light"] { color-scheme:light; }
/* Theme any Bootstrap form field (not just those inside .controls-bar). */
body.evg .form-control, body.evg .form-select { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
/* Visible keyboard focus on custom/interactive controls — many set outline:none
   or fall back to the UA outline. Only shows for keyboard users (:focus-visible). */
body.evg :is(.nav-link-custom, .seg a, .theme-toggle, .nav-burger, .btn-x, .dropdown-item,
             .fac-select, .ctl):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}
body.evg .form-control:focus, body.evg .form-select:focus { background:var(--surface); color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
body.evg .form-control::placeholder { color:var(--muted); }
body.evg .tnum { font-variant-numeric:tabular-nums; }
body.evg .container-fluid { max-width:1180px !important; }
#evg-bg { position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
/* Keyboard focus for the click-to-drill rows made focusable in evg-common.js. */
body.evg [role="button"][tabindex="0"]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:10px; }

/* ── Header / nav ────────────────────────────────────────────────────────── */
body.evg .navbar {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--surface) 82%,transparent) !important;
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
}
/* Full-width header so the logo anchors the true top-left corner. */
body.evg .navbar > .container-fluid { max-width:100% !important; padding:0 30px; }
body.evg .navbar-brand { gap:.75rem; margin-right:auto; }
body.evg .logo-img { height:66px; filter:brightness(1.1) drop-shadow(0 2px 7px rgba(0,0,0,.5)); transition:transform .2s; }
html[data-mode="light"] body.evg .logo-img { filter:drop-shadow(0 1px 3px rgba(50,44,15,.12)); }
body.evg .navbar-brand:hover .logo-img { transform:scale(1.02); }
/* ChartWatch as a compact lockup beside the Evergrove logo — same refined mark,
   sized to stay clearly secondary to the logo it sits next to. */
body.evg .brand-app { font-family:var(--serif); font-size:.98rem; letter-spacing:0; color:var(--ink); align-self:center; padding-left:.75rem; border-left:1px solid var(--line); display:inline-flex; align-items:center; gap:.3em; }
body.evg .brand-app .cw-a { font-weight:400; }
body.evg .brand-app .cw-b { font-weight:700; }

/* Facility brand logo — the selected facility's logo in the hero (and empty state).
   Transparent: the logo art carries its own colors. Rendered for a single facility. */
body.evg .fac-logo { display:flex; width:100%; margin-bottom:14px; }
body.evg .fac-logo img { height:104px; width:auto; max-width:100%; display:block; }
/* New Leaf is a circular, boxier mark — size it up so its wordmark reads at the
   same presence as the wide wordmark logos. */
body.evg .fac-logo.fac-newleaf img { height:126px; }
/* The Grove is a bold, dense wordmark — trim it down so it doesn't read heavier
   than the others. */
body.evg .fac-logo.fac-grove img { height:90px; }
/* In the hero, the logo gets its own full-width row leaning to the top-right. */
body.evg .hmain > .fac-logo { justify-content:flex-end; margin:-16px 0 16px; }
body.evg .empty-state .fac-logo { justify-content:center; margin:0 auto 20px; }
/* Facilities with a light/dark pair (e.g. Grove — its subtitle ink flips) swap
   art by theme; both load, the off-theme one is hidden. */
body.evg .fac-logo .lo-dark { display:none; }
html[data-mode="dark"] body.evg .fac-logo .lo-light { display:none; }
html[data-mode="dark"] body.evg .fac-logo .lo-dark { display:block; }
/* Nav: spread the tabs out, right-aligned; utility items sit further right. */
body.evg .navbar .d-flex.gap-2 { gap:.55rem !important; }
body.evg .nav-link-custom { color:var(--ink-2) !important; font-weight:600; font-size:.9rem; padding:9px 17px; border-radius:11px; border:0; background:transparent !important; transition:background .14s, color .14s; }
body.evg .nav-link-custom:hover { color:var(--ink) !important; background:var(--surface-2) !important; }
/* Active = soft filled pill (brand green tint), not an underline. */
body.evg .nav-link-custom.active { color:color-mix(in srgb,var(--accent) 80%,var(--ink)) !important; background:color-mix(in srgb,var(--accent) 16%,transparent) !important; font-weight:700; }
body.evg .nav-user { margin-left:.4rem; }
body.evg .nav-user { color:var(--ink-2); border-left-color:var(--line); }
body.evg .theme-toggle { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-size:.95rem; display:grid; place-items:center; padding:0; }
body.evg .theme-toggle:hover { background:var(--surface-2); }

/* ── Controls ────────────────────────────────────────────────────────────── */
body.evg .controls { display:flex; align-items:center; justify-content:center; gap:12px; margin:24px 0 20px; flex-wrap:wrap; }
body.evg .seg { display:flex; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:2px; }
body.evg .seg a { border:0; background:transparent; color:var(--ink-2); font-weight:600; font-size:.82rem; text-decoration:none; padding:8px 13px; border-radius:9px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
body.evg .seg a:hover { color:var(--ink); }
body.evg .seg a .d { width:8px; height:8px; border-radius:50%; background:var(--fc,var(--muted)); box-shadow:0 0 0 2px color-mix(in srgb,var(--fc,var(--muted)) 24%,transparent); }
body.evg .seg a.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm),inset 0 0 0 1.5px color-mix(in srgb,var(--fc,var(--green)) 60%,transparent); }
body.evg .grow { flex:1; }
body.evg .seg-cap { font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); align-self:center; }
body.evg .ctl { font-size:.82rem; font-weight:600; color:var(--ink); font-family:var(--sans); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 11px; }
body.evg .ctl:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
/* Keep the whole date range together as one unit so From/To never split across rows. */
body.evg .daterange { display:inline-flex; align-items:center; gap:7px; flex-wrap:nowrap; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:3px 4px; }
body.evg .daterange .ctl { border:0; background:transparent; padding:5px 7px; }
body.evg .daterange .ctl:focus { box-shadow:none; }
body.evg .daterange .dash { color:var(--muted); font-weight:700; }
body.evg .daterange select.ctl { border-right:1px solid var(--line); border-radius:0; padding-right:10px; margin-right:1px; }
/* Sub-pages (Department/Staff/Reports/Sync) use .controls-bar — center it and
   round it to match the home page's controls. */
body.evg .controls-bar { justify-content:center; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
body.evg .controls-bar .form-label { color:var(--muted); }
body.evg .pill { display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 13px; white-space:nowrap; }
body.evg .pill .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
body.evg .pill.stale { color:var(--bad); } body.evg .pill.stale .dot { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }
body.evg a.pill { text-decoration:none; transition:background .13s, border-color .13s; } body.evg a.pill:hover { background:var(--surface-2); border-color:var(--muted); }
body.evg .btn-x { border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:.82rem; padding:8px 15px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
body.evg .btn-x:hover { background:var(--surface-2); }
body.evg .dropdown-menu { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
body.evg .dropdown-item { color:var(--ink); border-radius:8px; font-size:.85rem; }
body.evg .dropdown-item:hover { background:var(--surface-2); color:var(--ink); }

body.evg .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }

/* Bootstrap 5.3 tables default --bs-table-bg to the light body color; force
   transparent cells + themed ink so tables read on the Grove surfaces. */
body.evg .table { --bs-table-bg:transparent; --bs-table-color:var(--ink); --bs-table-border-color:var(--line-soft); color:var(--ink); }
body.evg .table > :not(caption) > * > * { background-color:transparent; color:var(--ink); border-color:var(--line-soft); box-shadow:none; }
body.evg .table thead th { color:var(--muted); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
body.evg .hero { display:grid; grid-template-columns:1.65fr 1fr; gap:18px; align-items:start; }
@media (max-width:920px){ body.evg .hero { grid-template-columns:1fr; } }
body.evg .hmain { padding:28px 32px; position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:radial-gradient(120% 130% at 92% -25%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 55%); }
body.evg .hmain::before { content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px; border-radius:4px; background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 35%,var(--gold))); }
/* One-time light sweep across the hero on first load (clipped by hmain's overflow). */
body.evg .hmain::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:34%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent); transform:skewX(-16deg); animation:evg-sheen 1.5s .45s ease forwards; }
@keyframes evg-sheen { to { left:130%; } }
body.evg .hgrid { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
@media (max-width:520px){ body.evg .hgrid { grid-template-columns:1fr; text-align:center; justify-items:center; } }
body.evg .gauge { position:relative; width:176px; height:176px; flex:none; }
body.evg .gauge canvas { width:176px; height:176px; }
body.evg .gauge .val { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
body.evg .gauge .num { font-family:var(--serif); font-weight:700; font-size:3rem; line-height:1; letter-spacing:-.02em; color:var(--ink); } body.evg .gauge .num small { font-size:1.2rem; color:var(--muted); }
body.evg .gauge .cap { font-size:.5rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-top:6px; width:112px; justify-self:center; white-space:normal; overflow-wrap:normal; line-height:1.25; }
body.evg .eyebrow { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:800; }
body.evg .eyebrow .ebdot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:middle; }
body.evg .headline { font-family:var(--serif); font-size:1.6rem; line-height:1.22; letter-spacing:-.01em; margin:.4rem 0 .1rem; text-wrap:balance; color:var(--ink); }
body.evg .headline .up { color:var(--ok); } body.evg .headline .down { color:var(--bad); } body.evg .headline .em { font-style:italic; font-weight:700; }
body.evg .sub { color:var(--ink-2); font-size:.9rem; }
body.evg .chips { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
body.evg .chip { font-size:.73rem; font-weight:700; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); display:inline-flex; gap:6px; align-items:center; color:var(--ink-2); }
body.evg .chip.dn { color:var(--bad); } body.evg .chip.up { color:var(--ok); }
body.evg .htrend { margin-top:auto; padding-top:20px; }
body.evg .htrend .cap { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-bottom:3px; }
body.evg .htrend canvas { width:100%; height:92px; display:block; cursor:crosshair; }
/* Hover tooltip for interactive trend points. */
body.evg .trend-tip { position:fixed; z-index:60; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1px; transform:translateY(calc(-100% - 14px)); }
body.evg .trend-tip .tt-wk { font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; }
body.evg .trend-tip .tt-pct { font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }

/* ── Needs-attention rail ────────────────────────────────────────────────── */
body.evg .rail { padding:22px 22px 12px; }
body.evg .rail h2, body.evg .rail h3 { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 3px; font-weight:800; }
body.evg .rail .lead { font-size:.8rem; color:var(--ink-2); margin:0 0 10px; }
body.evg .att { display:flex; align-items:center; gap:12px; padding:13px 10px; border-top:1px solid var(--line-soft); cursor:pointer; border-radius:11px; transition:background .13s, transform .13s; }
body.evg .att:first-of-type { border-top:0; } body.evg .att:hover { background:var(--surface-2); transform:translateX(2px); }
body.evg .att .st { width:4px; align-self:stretch; min-height:32px; border-radius:4px; } body.evg .att .st.bad { background:var(--bad); } body.evg .att .st.warn { background:var(--warn); }
body.evg .att .body { min-width:0; flex:1; }
body.evg .att .t { font-weight:650; font-size:.86rem; line-height:1.3; color:var(--ink); } body.evg .att .d { font-size:.74rem; color:var(--muted); margin-top:1px; }
body.evg .att .p { margin-left:auto; font-family:var(--serif); font-weight:700; font-size:1.25rem; } body.evg .att .p.bad { color:var(--bad); } body.evg .att .p.warn { color:var(--warn); }
body.evg .rail .empty { padding:14px 6px; font-size:.85rem; color:var(--ink-2); }

/* ── KPI tiles ───────────────────────────────────────────────────────────── */
body.evg .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
@media (max-width:760px){ body.evg .kpis { grid-template-columns:repeat(2,1fr); } }
body.evg .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 16px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease; }
body.evg .kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
body.evg .kpi::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--accent); opacity:.5; }
body.evg .kpi .k { font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
body.evg .kpi .v { font-family:var(--serif); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin-top:5px; color:var(--ink); } body.evg .kpi .v small { font-size:.85rem; color:var(--muted); }
body.evg .kpi .s { font-size:.72rem; color:var(--ink-2); margin-top:1px; } body.evg .kpi .up { color:var(--ok); font-weight:700; } body.evg .kpi .dn { color:var(--bad); font-weight:700; } body.evg .kpi .warn { color:var(--warn); font-weight:700; }

/* ── Section head ────────────────────────────────────────────────────────── */
body.evg .sec { display:flex; align-items:baseline; gap:12px; margin:30px 2px 12px; flex-wrap:wrap; }
body.evg .sec h2 { font-family:var(--serif); font-size:1.3rem; margin:0; letter-spacing:-.01em; color:var(--ink); }
body.evg .sec span { font-size:.8rem; color:var(--muted); }

/* ── Department table ────────────────────────────────────────────────────── */
body.evg .tbl { overflow-x:auto; }
body.evg .tbl table { width:100%; border-collapse:collapse; min-width:660px; margin:0; }
body.evg .tbl thead th { font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 16px; border-bottom:1px solid var(--line); background:transparent; }
body.evg .tbl thead th.r { text-align:right; }
body.evg .tbl tbody tr { cursor:pointer; transition:background .12s; position:relative; }
body.evg .tbl tbody tr:hover { background:var(--surface-2); }
body.evg .tbl tbody tr::after { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--dc,var(--accent)); opacity:0; transition:opacity .15s, width .15s; }
body.evg .tbl tbody tr:hover::after { opacity:1; width:4px; }
body.evg .tbl tbody td { padding:15px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink); }
body.evg .dname { font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:9px; }
body.evg .dname i { width:10px; height:10px; border-radius:3px; background:var(--dc); flex:none; }
body.evg .dname .ow { font-weight:500; font-size:.72rem; color:var(--muted); }
body.evg .status { font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px; white-space:nowrap; }
body.evg .status.ok, body.evg .status.good { background:var(--ok-soft); color:var(--ok); } body.evg .status.watch, body.evg .status.warn { background:var(--warn-soft); color:var(--warn); } body.evg .status.bad { background:var(--bad-soft); color:var(--bad); } body.evg .status.none { background:var(--surface-2); color:var(--muted); }
body.evg .cbar { display:flex; align-items:center; gap:10px; min-width:150px; }
body.evg .cbar .track { flex:1; height:8px; border-radius:999px; background:var(--hover); overflow:hidden; position:relative; }
body.evg .cbar .track > i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; }
body.evg .cbar .pct { font-family:var(--serif); font-weight:700; font-size:1.05rem; min-width:42px; text-align:right; }
body.evg td canvas.sp { width:120px; height:34px; display:block; }
body.evg .delta { font-weight:700; font-size:.82rem; text-align:right; } body.evg .delta.up { color:var(--ok); } body.evg .delta.dn { color:var(--bad); } body.evg .delta.flat { color:var(--muted); }

/* ── Criteria breakdown (collapsible) ────────────────────────────────────── */
body.evg .crit-toggle { font-size:.82rem; font-weight:700; color:var(--accent); cursor:pointer; }
body.evg .crit { padding:6px 4px; }
body.evg .crit-dept { display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--serif); font-size:1.2rem; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  padding:18px 14px 10px; margin-top:12px; border-top:1px solid var(--line); }
body.evg .crit-dept:first-child { border-top:0; margin-top:0; }
body.evg .crit-dept .cd-name { display:flex; align-items:center; gap:10px; }
body.evg .crit-dept .cd-name i { width:11px; height:11px; border-radius:3px; background:var(--dc,var(--green)); flex:none; }
body.evg .crit-dept .cd-pct { font-family:var(--serif); font-weight:700; font-size:1.1rem; color:var(--ink-2); }
body.evg .crit-row { display:grid; grid-template-columns:1.6fr 1fr auto; gap:16px; align-items:center; padding:12px 14px; border-radius:11px; cursor:pointer; }
body.evg .crit-row:hover { background:var(--surface-2); }
body.evg .crit-row + .crit-row { border-top:1px solid var(--line-soft); }
body.evg .crit-row .label { font-size:.87rem; font-weight:600; color:var(--ink); }
body.evg .crit-row.manual { opacity:.72; }
body.evg .crit-row .tag { font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:6px; margin-left:8px; background:var(--gold-soft); color:var(--gold-deep); }
body.evg .crit-row .tag.lown { background:var(--warn-soft); color:var(--warn); }
body.evg .crit-row .bar { height:8px; border-radius:999px; background:var(--hover); overflow:hidden; position:relative; }
body.evg .crit-row .bar > i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; }
body.evg .crit-row .p { font-family:var(--serif); font-weight:700; font-size:1.02rem; min-width:50px; text-align:right; }

/* ── Drill-down / manual panels (reuse existing markup) ───────────────────── */
body.evg #drill-down-panel, body.evg #manual-panel, body.evg #staff-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); color:var(--ink); }
body.evg #drill-down-panel .card-header { background:var(--bad-soft); color:var(--bad); border-bottom:1px solid var(--line); }
body.evg #manual-panel .card-header, body.evg #staff-panel .card-header { background:var(--surface-2); color:var(--ink); border-bottom:1px solid var(--line); }
body.evg #drill-down-panel .table, body.evg #manual-panel .table, body.evg #staff-panel .table { color:var(--ink); }
body.evg #drill-down-panel .table thead th, body.evg #manual-panel .table thead th, body.evg #staff-panel .table thead th { color:var(--muted); border-color:var(--line); }
body.evg #drill-down-panel td, body.evg #manual-panel td, body.evg #staff-panel td { border-color:var(--line-soft); }
/* Show/hide toggle (mirrors #drill-down-panel in style.css). */
#staff-panel { display:none; overflow:hidden; }
#staff-panel.active { display:block; }
body.evg #staff-panel .card-header { padding:15px 20px; gap:12px; }
body.evg #staff-panel .card-body { padding:14px 20px 18px; }
/* Group-by toggle */
body.evg .sf-toggle { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:2px; }
body.evg .sf-toggle button { border:0; background:transparent; color:var(--ink-2); font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:7px; cursor:pointer; }
body.evg .sf-toggle button.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
/* Grouped missed-checks list — each group is a card with a severity stripe. */
body.evg #staff-list { padding:6px 2px 2px; }
body.evg .sf-group { background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--sev,var(--warn)); border-radius:12px; padding:12px 15px 9px; margin-bottom:10px; }
body.evg .sf-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
body.evg .sf-head .sf-name { font-family:var(--serif); font-size:1.08rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
body.evg .sf-head .sf-meta { font-size:.75rem; color:var(--muted); }
body.evg .sf-head .sf-count { margin-left:auto; font-size:.67rem; font-weight:800; letter-spacing:.02em; color:var(--sev,var(--warn)); background:color-mix(in srgb,var(--sev,var(--warn)) 15%,transparent); border:1px solid color-mix(in srgb,var(--sev,var(--warn)) 40%,transparent); border-radius:999px; padding:3px 10px; white-space:nowrap; }
body.evg .sf-cols { display:flex; justify-content:space-between; gap:12px; font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:0 2px 6px; }
body.evg .sf-items { display:flex; flex-direction:column; }
body.evg .sf-item { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 2px; }
body.evg .sf-item + .sf-item { border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent); }
body.evg .sf-crit { font-size:.86rem; color:var(--ink); line-height:1.35; flex:1; min-width:0; }
body.evg .sf-crit .sf-mr { color:var(--muted); font-size:.76rem; margin-left:6px; }
body.evg .sf-weeks { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; flex:none; max-width:52%; }
body.evg .sf-week { font-size:.72rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px 8px; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Failing-patients drill-down — clean patient list (mirrors the staff view). */
body.evg #drill-down-panel .card-header, body.evg #manual-panel .card-header { padding:15px 20px; }
body.evg #drill-down-panel .card-body, body.evg #manual-panel .card-body { padding:14px 20px 18px; }
body.evg #drill-down-list { padding:2px; }
/* Per-criterion trend strip in the failing drill-down header. */
body.evg .dd-trend { display:flex; align-items:center; gap:18px; padding:6px 4px 14px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); }
body.evg .dd-tl { font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
body.evg .dd-tl span { display:block; font-weight:600; letter-spacing:0; text-transform:none; font-size:.68rem; color:var(--muted); margin-top:2px; }
body.evg #dd-trend-canvas { flex:1; height:54px; min-width:0; }
body.evg .dd-tn { text-align:right; white-space:nowrap; }
body.evg #dd-trend-pct { font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--ink); font-variant-numeric:tabular-nums; }
body.evg .dd-dir { display:block; font-size:.72rem; font-weight:700; margin-top:1px; }
body.evg .dd-dir.up { color:var(--ok); } body.evg .dd-dir.down { color:var(--bad); } body.evg .dd-dir.flat { color:var(--muted); }
body.evg .dl-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 8px; border-radius:9px; }
body.evg .dl-row + .dl-row { border-top:1px solid var(--line-soft); }
body.evg .dl-row:hover { background:var(--surface-2); }
body.evg .dl-main { min-width:0; }
body.evg .dl-name { font-family:var(--serif); font-weight:700; font-size:1rem; color:var(--ink); letter-spacing:-.01em; }
body.evg .dl-meta { font-size:.75rem; color:var(--muted); margin-top:2px; }
body.evg .dl-weeks { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; flex:none; max-width:46%; }
body.evg #manual-panel select.manual-result, body.evg #manual-panel input.manual-note { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
body.evg .btn-outline-secondary { color:var(--ink-2); border-color:var(--line); }
body.evg .btn-outline-secondary:hover { background:var(--surface-2); color:var(--ink); }

/* ── Footer / legend ─────────────────────────────────────────────────────── */
body.evg .trust { margin-top:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.76rem; }
body.evg .legend { display:flex; gap:13px; flex-wrap:wrap; } body.evg .legend span { display:inline-flex; align-items:center; gap:6px; } body.evg .legend i { width:9px; height:9px; border-radius:50%; }

/* ── Empty states ────────────────────────────────────────────────────────── */
body.evg .empty-state h4 { color:var(--ink); } body.evg .empty-state p { color:var(--ink-2); }
body.evg .empty-state-icon { background:var(--surface-2); border-color:var(--line); }

/* ── Login ───────────────────────────────────────────────────────────────────
   Nav is suppressed on the login page (base.html {% block chrome %}); the whole
   auth column is centered in the viewport over the ambient background. */
body.login-page .container-fluid { max-width:100% !important; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem 1.25rem !important; }
body.login-page .alert { width:100%; max-width:380px; margin:0 0 1.25rem; }

body.evg .login-wrap { display:flex; flex-direction:column; align-items:center; width:100%; padding:0; }
/* The real Evergrove wordmark carries the brand — sized as the hero. */
body.evg .login-logo { width:clamp(258px,32vw,380px); height:auto; margin-bottom:30px; filter:drop-shadow(0 6px 22px rgba(0,0,0,.5)); }
html[data-mode="light"] body.evg .login-logo { filter:drop-shadow(0 6px 20px rgba(50,44,15,.14)); }

body.evg .login-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg), inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent); padding:36px 36px 32px; }
body.evg .login-head { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
/* ChartWatch wordmark — the refined "04": a green check + serif, with "Chart"
   regular and "Watch" bold. The same lockup appears smaller in the header. */
body.evg .cw-mk { width:.9em; height:.9em; flex:none; color:var(--green); }
body.evg .login-title { font-family:var(--serif); font-size:2rem; line-height:1; letter-spacing:-.02em; margin:0; color:var(--ink); display:inline-flex; align-items:center; gap:.34em; }
body.evg .login-title .cw-a { font-weight:400; }
body.evg .login-title .cw-b { font-weight:700; }
body.evg .login-sub { color:var(--muted); margin:.28rem 0 0; font-size:.92rem; }

body.evg .login-form { display:flex; flex-direction:column; gap:16px; }
body.evg .login-field { display:flex; flex-direction:column; gap:7px; }
body.evg .login-card .form-label { margin:0; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
body.evg .login-card .form-control { height:46px; padding:0 14px; border-radius:12px; font-size:.95rem; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); transition:border-color .14s, box-shadow .14s, background .14s; }
body.evg .login-card .form-control:focus { background:var(--surface); color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }

body.evg .login-submit { height:46px; width:100%; margin-top:6px; border-radius:12px; font-size:.92rem; letter-spacing:.02em; box-shadow:0 6px 18px color-mix(in srgb,var(--green) 30%,transparent); }
body.evg .login-submit:active { transform:translateY(1px); }
body.evg .login-foot { margin:22px 0 0; font-size:.74rem; letter-spacing:.04em; color:var(--muted); text-align:center; }
/* ── Cursor spotlight on rows (dashboard only — JS adds .spot + tracks --cx/--cy) ── */
/* Painted as the row's own hover background — NEVER a ::before on a table <tr>.
   A generated pseudo on a <tr> makes Chrome wrap it in an anonymous table-cell,
   which shifts the whole <tbody> one column right of the <thead>. */
body.evg .tbl tbody tr.spot:hover { background:radial-gradient(240px 180px at var(--cx,50%) var(--cy,50%), color-mix(in srgb,var(--dc,var(--accent)) 15%,transparent), transparent 60%), var(--surface-2); }
body.evg .crit-row.spot { position:relative; overflow:hidden; }
body.evg .crit-row.spot::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s; background:radial-gradient(200px 200px at var(--cx,50%) var(--cy,50%), color-mix(in srgb,var(--green) 12%,transparent), transparent 60%); }
body.evg .crit-row.spot:hover::before { opacity:1; }

/* ── Section headers draw a rule when scrolled into view (JS adds .rev-in) ── */
body.evg .sec.ruled { position:relative; }
body.evg .sec.ruled::after { content:""; position:absolute; left:2px; right:2px; bottom:-7px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--gold))); transform:scaleX(0); transform-origin:left; }
body.evg .sec.ruled.rev-in::after { animation:evg-rule .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes evg-rule { to { transform:scaleX(1); } }

/* ── Sliding hover highlight on the facility selector (dashboard only — JS-created) ── */
body.evg .seg { position:relative; }
body.evg .seg a { position:relative; z-index:1; }
body.evg .seg-ind-hi { position:absolute; top:3px; bottom:3px; border-radius:9px; background:var(--surface-2); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fc-hi,var(--green)) 45%,transparent); opacity:0; transition:left .3s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1), opacity .2s; pointer-events:none; z-index:0; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes evg-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
body.evg .rev { opacity:0; animation:evg-rise .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i,0)*60ms); }
@media (prefers-reduced-motion: reduce) {
  body.evg *, body.evg *::before, body.evg *::after { animation:none !important; transition:none !important; }
  body.evg .rev { opacity:1 !important; }
  body.evg .sec.ruled::after { transform:scaleX(1) !important; }
}

/* ── Mobile / narrow screens ─────────────────────────────────────────── */
body.evg .nav-burger { display:none; }
@media (max-width:860px){
  html, body.evg { overflow-x:hidden; }   /* no page-level sideways scroll */
  /* The nav's un-wrapped link row was forcing the page wider than the phone
     and clipping every other element. Collapse it to a hamburger menu.
     (display:none needs !important to beat Bootstrap's .d-flex.) */
  body.evg .navbar > .container-fluid { padding:0 16px; flex-wrap:wrap; }
  body.evg .logo-img { height:44px; }
  body.evg .nav-burger { display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:40px; font-size:1.3rem; background:var(--surface-2);
    border:1px solid var(--line); color:var(--ink); border-radius:11px; cursor:pointer; }
  body.evg .navbar .d-flex.gap-2 { display:none !important; width:100%; flex-direction:column;
    align-items:stretch !important; gap:4px !important; padding:8px 0 6px; }
  body.evg .navbar.nav-open .d-flex.gap-2 { display:flex !important; }
  body.evg .navbar .nav-link-custom, body.evg .navbar .nav-user { width:100%; text-align:left; padding:11px 14px; }
  body.evg .navbar .dropdown, body.evg .navbar form.d-inline { width:100%; }
  body.evg .navbar .dropdown-menu { position:static !important; transform:none !important;
    border:0; box-shadow:none; background:var(--surface-2); margin:2px 0 2px 12px; }
  body.evg .navbar .nav-logout-btn { width:100%; text-align:left; }

  /* Controls stack; the date range wraps instead of running off-screen. */
  body.evg .controls { gap:9px; margin:16px 0; }
  body.evg .daterange { flex-wrap:wrap !important; justify-content:center; max-width:100%; }
  body.evg .daterange input[type="date"], body.evg .daterange .ctl { min-width:0; }
  body.evg .headline { font-size:1.35rem; }
  body.evg .hmain { padding:22px 18px; }
}
@media (max-width:480px){
  body.evg .container-fluid.px-4 { padding-left:14px !important; padding-right:14px !important; }
  body.evg .headline { font-size:1.2rem; }
  body.evg .gauge, body.evg .gauge canvas { width:148px; height:148px; }
  body.evg .gauge .num { font-size:2.5rem; }
}