(fixed height, internal scroll panes).
2. ONE MEASURE. --measure caps .wrap and .hdr so pages can't drift
(they had already drifted to 1080 and 1140). .app-fixed is exempt.
3. RAIL HOVER-EXPAND, restored from the old dash-sidebar. The rail is
position:fixed so expanding OVERLAYS instead of reflowing content;
.main carries a matching margin-left. Each rail item needs a
.
4. PROMOTED TOKENS the pages were each redeclaring identically:
--hair-row --font-num --pos/--pos-bg --neg/--neg-bg --bar/--bar-live.
Page-SPECIFIC palettes stay in the page (attendance's heat ramp,
reports' --cell, receipt's --rc-* statuses).
Rail markup:
D
Queue
Sign out
===================================================================== */
/* ---------- PRACTO (default — also :root fallback so a page that
somehow lost its data-theme attribute still renders Practo) ---------- */
:root,
[data-theme="practo"]{
--bg:#f0f4f8; --surface:#fff; --card:#fff;
--ink:#14171a; --brand:#29328C; --brand-dim:#1e2570; --brand-tint:#eef0fb;
--text:#14171a; --muted:#657786; --muted2:#8b98a6; --faint:#aab8c2;
--border:#e1e8ed; --hair:#e7ebef; --hair-row:#eef2f5; --wash:#f7f9fb; --rule:#c9d3db;
--shadow:0 1px 2px rgba(26,28,46,.04),0 6px 20px rgba(26,28,46,.05);
--radius:14px; --radius-sm:9px;
--font:'Inter',sans-serif; --font-display:'Fraunces',serif; --font-num:'Inter',sans-serif;
--paid:#1f7a4d; --due:#b26a00; --alert:#e0245e;
--dot:#29328C;
/* delta / trend — shared by reports comparisons + attendance leaderboards */
--pos:#1f7a4d; --pos-bg:#e6f3ec; --neg:#e0245e; --neg-bg:#fde8ef;
/* chart bars */
--bar:#4b53a6; --bar-live:#29328C;
/* layout */
--measure:1080px;
/* queue status — full hue */
--st-pending:#8b5cf6; --st-waiting:#e08a00; --st-engaged:#29328C;
--st-done:#1f7a4d; --st-alert:#e0245e;
--st-pending-bg:#f3effe; --st-waiting-bg:#fff3e0; --st-engaged-bg:#eef0fb;
--st-done-bg:#e9f6ef; --st-alert-bg:#fdeef3;
}
/* ---------- MONO SOFT ---------- */
[data-theme="mono"]{
--bg:#FAFAFA; --surface:#FFFFFF; --card:#FFFFFF;
--ink:#0A0A0A; --brand:#0A0A0A; --brand-dim:#0A0A0A; --brand-tint:#F2F2F2;
--text:#0A0A0A; --muted:#8A8A8A; --muted2:#9A9A9A; --faint:#C4C4C4;
--border:#E0E0E0; --hair:#E4E4E4; --hair-row:#F0F0F0; --wash:#F7F7F7; --rule:#CFCFCF;
--shadow:none;
--radius:11px; --radius-sm:8px;
--font:'IBM Plex Sans',sans-serif; --font-display:'Fraunces',serif; --font-num:'IBM Plex Sans',sans-serif;
--paid:#8A8A8A; --due:#C62828; --alert:#C62828;
--dot:#0A0A0A;
/* Mono discipline: a RISE is never celebrated in colour — only the one
red marks a genuinely-bad state. */
--pos:#0A0A0A; --pos-bg:#EDEDED; --neg:#C62828; --neg-bg:#FBEDEC;
--bar:#C4C4C4; --bar-live:#0A0A0A;
/* queue status — ink-density ramp (darker = more urgent) + one red */
--st-pending:#B4B4B4; --st-waiting:#6A6A6A; --st-engaged:#0A0A0A;
--st-done:#DADADA; --st-alert:#C62828;
--st-pending-bg:#F2F2F2; --st-waiting-bg:#EDEDED; --st-engaged-bg:#F0F0F0;
--st-done-bg:#F5F5F5; --st-alert-bg:#FBEDED;
}
/* ================= BASE ================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:auto;min-height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;
line-height:1.5;-webkit-font-smoothing:antialiased}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
/* ================= SAFE-AREA INSETS (v4) =================
Landscape Android with a display cutout or rounded corners puts real
values on the LEFT/RIGHT insets — the portrait-only work (Batch 9E/9F)
only ever handled -bottom. The clinic runs a mix of phones and tablets
and landscape IS used, so the fixed rail and the full-bleed queue both
have to step out of the cutout.
Parked as tokens because env() resolves at the use site, so a page can
write var(--sal) without repeating the fallback. The 0px fallback is
load-bearing: an invalid calc() drops the WHOLE declaration, so a
browser that does not know env() must still get a valid length.
These are 0 in portrait and 0 on every desktop, so nothing moves
except on the devices that need it. */
:root{
--sal:env(safe-area-inset-left,0px);
--sar:env(safe-area-inset-right,0px);
--sab:env(safe-area-inset-bottom,0px);
--sat:env(safe-area-inset-top,0px);
}
/* ================= APP FRAME (shared shell) =================
DEFAULT = a normal scrolling document. The queue/dashboard adds
.app-fixed for the old fixed-height, internally-scrolling behaviour. */
.app{display:block;min-height:100vh}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh;
margin-left:calc(64px + var(--sal));position:relative}
.app-fixed{height:100vh;overflow:hidden}
.app-fixed .main{height:100vh;min-height:0;overflow:hidden}
/* Rail: fixed, so hover-expand OVERLAYS instead of reflowing content. */
.rail{position:fixed;left:0;top:0;bottom:0;width:calc(64px + var(--sal));z-index:400;background:var(--brand);
display:flex;flex-direction:column;align-items:stretch;gap:6px;
padding:calc(14px + var(--sat)) 12px 14px calc(12px + var(--sal));
overflow:hidden;transition:width .16s ease,box-shadow .16s ease}
[data-theme="mono"] .rail{background:var(--ink)}
.rail:hover,.rail:focus-within{width:calc(212px + var(--sal));box-shadow:6px 0 28px rgba(0,0,0,.18)}
.rail .brand{width:40px;height:40px;min-width:40px;border-radius:11px;background:#fff;color:var(--brand);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
margin-bottom:12px;flex-shrink:0}
[data-theme="mono"] .rail .brand{color:var(--ink)}
.rail a,.rail button{width:100%;height:40px;border-radius:11px;display:flex;align-items:center;gap:12px;
padding:0 10px;color:#fff;opacity:.62;transition:.12s;cursor:pointer;border:0;background:transparent;
font-family:inherit;text-decoration:none;white-space:nowrap;flex-shrink:0}
.rail a:hover,.rail button:hover{opacity:1;background:rgba(255,255,255,.12)}
.rail a.on{opacity:1;background:rgba(255,255,255,.18)}
.rail svg{width:20px;height:20px;min-width:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.rail .rl-lbl{font-size:13.5px;font-weight:600;opacity:0;transition:opacity .12s ease}
.rail:hover .rl-lbl,.rail:focus-within .rl-lbl{opacity:1}
.rail .sp{flex:1;min-height:8px}
/* ── v3: the clinic name beside the mark. It is an .rl-lbl, so the fade
rule above already governs it, and the collapsed rail clips it. */
.rail .brand-row{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex-shrink:0}
.rail .brand-row .brand{margin-bottom:0}
.rail .brand-lbl{font-family:var(--font-display);font-optical-sizing:auto;font-size:15px;
font-weight:600;color:#fff;white-space:nowrap;letter-spacing:-.01em}
/* ── v3: OPT-IN viewport-height panes — .
.main{min-height:100vh} is a MINIMUM, so a page whose panes scroll
internally grows the document instead. NOT a default: attendance and
reports are normal scrolling documents and a hard 100vh would clip them —
universal definite height is exactly what broke v1. A page that wants a
mobile exception still writes its own line. */
.app.app-panes .main{height:100vh}
/* ================= HEADER (generic shell header) ================= */
.hdr{display:flex;align-items:center;gap:14px;padding:18px calc(32px + var(--sar)) 0 32px;flex-shrink:0;
width:100%;max-width:var(--measure);margin-left:auto;margin-right:auto}
.wrap{width:100%;max-width:var(--measure);margin-left:auto;margin-right:auto;
padding:20px calc(32px + var(--sar)) 90px 32px}
/* the queue is full-bleed — it manages its own panes */
.app-fixed .hdr,.app-fixed .wrap{max-width:none}
.hdr .mark{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:20px;flex-shrink:0}
[data-theme="mono"] .hdr .mark{background:var(--ink)}
.hdr .htxt h1{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.hdr .htxt .sub{font-size:12.5px;color:var(--muted)}
.hdr .sp{flex:1}
.hdr .tools{display:flex;align-items:center;gap:10px}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.12s;
font-family:inherit}
.iconbtn:hover{color:var(--text);border-color:var(--muted2)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes dc-spin{to{transform:rotate(360deg)}}
.iconbtn.spin svg{animation:dc-spin .8s linear infinite}
.mode-badge{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;
border-radius:10px;border:1px solid var(--border);background:var(--surface);
font-size:12.5px;font-weight:600;color:var(--text);font-family:inherit}
.mode-badge .chip{font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:6px;
background:var(--brand-tint);color:var(--brand)}
[data-theme="mono"] .mode-badge .chip{background:var(--wash);color:var(--muted)}
/* ================= CANONICAL DATE / VIEW CONTROLS ================= */
.stepbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);
color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:.12s;line-height:1;
font-family:inherit}
.stepbtn:hover{border-color:var(--muted2);background:var(--wash)}
.datelbl{display:flex;flex-direction:column;line-height:1.1;min-width:150px;text-align:center;cursor:pointer;user-select:none}
.datelbl .dl-day{font-family:var(--font-display);font-optical-sizing:auto;font-size:20px;font-weight:600;letter-spacing:-.01em}
.datelbl .dl-sub{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.livepill{display:inline-flex;align-items:center;gap:7px;padding:0 12px;height:34px;border-radius:9px;
background:var(--st-done-bg);font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--st-done);text-transform:uppercase}
[data-theme="mono"] .livepill{background:var(--wash);color:var(--muted);border:1px solid var(--hair)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--st-done);position:relative}
[data-theme="mono"] .livedot{background:var(--muted)}
.livedot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:inherit;opacity:.35;animation:dc-pulse 2s ease-out infinite}
@keyframes dc-pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.2);opacity:0}}
.viewtabs{display:flex;gap:4px;background:var(--brand-tint);border-radius:10px;padding:3px}
[data-theme="mono"] .viewtabs{background:var(--wash);border:1px solid var(--hair)}
.viewtabs button{border:0;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;
color:var(--muted);padding:8px 15px;border-radius:7px;cursor:pointer}
.viewtabs button.on{background:var(--surface);color:var(--brand-dim);box-shadow:var(--shadow)}
[data-theme="mono"] .viewtabs button.on{background:var(--ink);color:#fff}
/* ================= RIGHT-DRAWER SHEET (shared) ================= */
.sheet-scrim{position:fixed;inset:0;background:rgba(18,22,35,.34);opacity:0;visibility:hidden;transition:opacity .22s;z-index:60}
[data-theme="mono"] .sheet-scrim{background:rgba(10,10,10,.36)}
.sheet-scrim.show{opacity:1;visibility:visible}
.sheet{position:fixed;top:0;right:0;height:100vh;width:452px;max-width:94vw;background:var(--surface);
border-left:1px solid var(--border);transform:translateX(100%);
transition:transform .27s cubic-bezier(.4,0,.2,1),box-shadow .27s ease;
z-index:61;display:flex;flex-direction:column;overflow:hidden}
/* The shadow belongs to the OPEN state only. It casts left (-18px), and
translateX(100%) moves the box off-screen but NOT its shadow — ~18px of it
stayed inside the viewport and painted a dark strip down the right edge of
every page carrying a sheet. Worst on mobile, where the sheet is 100vw and
sits flush against that edge. */
.sheet.show{transform:translateX(0);box-shadow:-18px 0 48px rgba(18,22,35,.16)}
.sheet-hd{display:flex;align-items:flex-start;gap:13px;padding:20px calc(22px + var(--sar)) 16px 22px;border-bottom:1px solid var(--hair);flex-shrink:0}
.sheet-hd .dt-tok{font-family:var(--font-display);font-optical-sizing:auto;font-size:28px;font-weight:600;line-height:.9;letter-spacing:-.02em;color:var(--text);flex-shrink:0}
.sheet-hd .dt-tok .hash{color:var(--faint);font-size:.6em}
.sh-x{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;
color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.sh-x:hover{border-color:var(--muted2);color:var(--text)}
.sh-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.sheet-bd{flex:1;min-height:0;overflow-y:auto;padding:18px calc(22px + var(--sar)) 24px 22px}
.sheet-ft{flex-shrink:0;border-top:1px solid var(--hair);padding:13px calc(18px + var(--sar)) calc(13px + var(--sab)) 18px;display:flex;gap:10px}
.sheet-ft button{flex:1;height:44px;border-radius:11px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.sheet-ft button:hover{border-color:var(--muted2)}
.sheet-ft button.prim{background:var(--brand);color:#fff;border-color:transparent}
[data-theme="mono"] .sheet-ft button.prim{background:var(--ink)}
.sheet-ft button.prim:hover{filter:brightness(1.06)}
.sheet-ft button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.sheet-ft button.prim svg{stroke:#fff}
.sh-sec{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2);margin:20px 0 11px}
/* ================= TOAST (shared) ================= */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);z-index:999;
background:var(--ink);color:#fff;border-radius:10px;padding:11px 18px;font-size:13px;font-weight:500;
opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ================= THEME TOGGLE (the REAL control) =================
Replaces the mocks' floating bottom-left preview pill. Lives inside
Settings ("This device" section) and the mobile More sheet. Inline
segment, never fixed-positioned, never role-disabled — the theme is
per-DEVICE chrome, not clinic data. */
.theme-seg{display:inline-flex;gap:6px}
.theme-seg button{border:1px solid var(--border);background:var(--surface);font-family:var(--font);
font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 16px;border-radius:9px;cursor:pointer;transition:.12s}
.theme-seg button:hover{border-color:var(--muted2);color:var(--text)}
.theme-seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="mono"] .theme-seg button.on{background:var(--ink);border-color:var(--ink)}
.theme-seg-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.theme-seg-row .tsr-txt b{display:block;font-size:13px;font-weight:600;color:var(--text)}
.theme-seg-row .tsr-txt span{font-size:11.5px;color:var(--muted)}
/* ================= APP FOOTER (shared) =================
One line of markup per page, right at the end of .main:
theme.js fills it: © line + build stamp on the left, the compact
theme picker + signed-in address on the right. Hidden in print. */
/* An unfilled .appfoot means theme.js is stale (old file, or a service worker
matching with ignoreSearch so the ?v= bump did nothing). Collapse it rather
than paint a bare rule across the page. */
.appfoot:empty{display:none}
.appfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
width:100%;max-width:var(--measure);margin:34px auto 0;padding:16px 32px 26px;
border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.app-fixed .appfoot{max-width:none}
.appfoot .af-meta{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;min-width:0}
.appfoot .af-build{color:var(--muted2);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.appfoot .af-sp{flex:1;min-width:12px}
.appfoot .af-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.appfoot .af-user{color:var(--muted)}
/* compact theme picker (footer flavour of .theme-seg) */
.theme-pick{position:relative}
.theme-pick>button{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);
background:var(--surface);border-radius:999px;padding:8px 16px;font-family:inherit;font-size:12.5px;
color:var(--muted);cursor:pointer;transition:.12s}
.theme-pick>button:hover{border-color:var(--muted2)}
.theme-pick .tp-val{font-weight:700;color:var(--text)}
.theme-pick .tp-cv{width:11px;height:11px;stroke:var(--muted2);fill:none;stroke-width:2.4;flex-shrink:0}
.theme-pick .tp-menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:172px;padding:6px;display:none;
background:var(--surface);border:1px solid var(--border);border-radius:12px;
box-shadow:0 14px 40px rgba(20,23,26,.18);z-index:500}
[data-theme="mono"] .theme-pick .tp-menu{box-shadow:0 14px 40px rgba(10,10,10,.16)}
.theme-pick.open .tp-menu{display:block}
.theme-pick .tp-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);
padding:9px 11px;border-radius:8px;cursor:pointer;text-align:left}
.theme-pick .tp-menu button:hover{background:var(--wash)}
.theme-pick .tp-menu button .tick{opacity:0;color:var(--brand);font-weight:700}
[data-theme="mono"] .theme-pick .tp-menu button .tick{color:var(--ink)}
.theme-pick .tp-menu button.on .tick{opacity:1}
/* ================= RESPONSIVE (shared) ================= */
@media(max-width:820px){
.rail{display:none}
.main{margin-left:0;padding-left:var(--sal);padding-right:var(--sar)}
.sheet{width:100vw;max-width:100vw;border-left:0}
.appfoot{padding-left:20px;padding-right:20px;row-gap:14px}
/* clear the mobile tab bar that nav-bearing pages render */
.appfoot{margin-bottom:calc(58px + var(--sab))}
}
@media print{ .appfoot{display:none} }