/* ================================================================
CHS NURSE APP — SHARED STYLESHEET (chs_styles.css)
Version 1.0 | CHS 2026 | Test Environment
----------------------------------------------------------------
ONE shared stylesheet for ALL dark-theme pages (C14):
- nurse/index.html
- dashboard/index.html
- form1 ... form10 /index.html
The Awards page is EXCLUDED — it is a standalone page with its
own celebratory gold/amber theme and does not load this file.
----------------------------------------------------------------
Palette + font stack inherited from Draft_code_for_ui_ideas.html
(the authoritative visual reference for the dark theme only).
================================================================ */
/* ----------------------------------------------------------------
0. FONTS
Google Fonts via @import. Offline, the system fallbacks below
render cleanly (fonts are non-critical to function). face-api
models are self-hosted; only the optional webfonts use a CDN.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
/* ----------------------------------------------------------------
1. DESIGN TOKENS — DARK CLINICAL THEME (default)
---------------------------------------------------------------- */
:root{
/* surfaces */
--bg:#050c18;
--s1:#0c1829;
--s2:#0f2040;
--s3:#162a50;
--s4:#1d3563;
/* brand + state colours */
--accent:#4da6ff; /* primary blue */
--accent-ink:#ffffff;
--accent2:#00e5b3; /* success / online teal */
--accent2-ink:#04261f;
--warn:#ffaa00; /* amber — attention */
--danger:#ff4d4d; /* red — critical */
--gold:#ffd166; /* leaderboard accents on dark pages */
/* text */
--text:#eaf2ff;
--muted:#8ba8c4;
--faint:#5d7290;
/* lines + glows */
--border:rgba(77,166,255,.18);
--border-strong:rgba(77,166,255,.34);
--glow-b:0 0 24px rgba(77,166,255,.35);
--glow-g:0 0 24px rgba(0,229,179,.35);
--glow-r:0 0 24px rgba(255,77,77,.40);
--glow-a:0 0 24px rgba(255,170,0,.38);
/* radii + shadows */
--r:10px;
--r-sm:6px;
--r-lg:16px;
--r-pill:999px;
--shadow:0 8px 30px rgba(0,0,0,.45);
--shadow-sm:0 3px 12px rgba(0,0,0,.35);
/* typography */
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-head:'Inter Tight','Inter',-apple-system,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
/* layout */
--maxw:480px; /* phone-first content column (nurse + forms) */
--maxw-wide:1280px; /* dashboard */
--nav-w:236px; /* dashboard sidebar */
--nav-w-collapsed:64px;
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
/* timing */
--t-fast:.16s;
--t:.24s;
--t-slow:.4s;
}
/* ----------------------------------------------------------------
2. LIGHT MODE — CAMERA ILLUMINATION
Toggled by adding `light-mode` to during a face scan so
the screen floods white and lights the nurse's face.
---------------------------------------------------------------- */
body.light-mode{
--bg:#ffffff;
--s1:#f8fafc;
--s2:#f1f5f9;
--s3:#e2e8f0;
--s4:#cbd5e1;
--text:#0f172a;
--muted:#64748b;
--faint:#94a3b8;
--border:rgba(77,166,255,.30);
--border-strong:rgba(77,166,255,.5);
transition:background var(--t-slow),color var(--t-slow);
}
body.light-mode::after{
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
}
/* ----------------------------------------------------------------
3. RESET + BASE
---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow-x:hidden;}
html{-webkit-text-size-adjust:100%;}
body{
font-family:var(--font-body);
background:var(--bg);
color:var(--text);
min-height:100dvh;
font-size:14px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* faint scanline texture over the whole app for depth */
body::after{
content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);
}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;}
a{color:var(--accent);text-decoration:none;}
::selection{background:rgba(77,166,255,.3);color:var(--text);}
/* custom scrollbars (desktop) */
*{scrollbar-width:thin;scrollbar-color:var(--s3) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--s3);border-radius:var(--r-pill);}
*::-webkit-scrollbar-thumb:hover{background:var(--s4);}
/* visible keyboard focus only */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* ----------------------------------------------------------------
4. ATMOSPHERE — animated particle background
Add as first child of .
Pure-CSS drifting glow blobs; cheap and subtle.
---------------------------------------------------------------- */
.bg-particles{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.bg-particles::before,
.bg-particles::after{
content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
}
.bg-particles::before{
width:340px;height:340px;left:-80px;top:-60px;
background:radial-gradient(circle,rgba(77,166,255,.35),transparent 70%);
animation:drift1 26s ease-in-out infinite;
}
.bg-particles::after{
width:300px;height:300px;right:-70px;bottom:-40px;
background:radial-gradient(circle,rgba(0,229,179,.28),transparent 70%);
animation:drift2 32s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,60px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-40px)}}
/* ----------------------------------------------------------------
5. PAGE SHELL (TRUE separate pages — no SPA screen-toggling)
Each page is its own document. `.page` is a normal flow column.
---------------------------------------------------------------- */
.page{
position:relative;z-index:1;
display:flex;flex-direction:column;
min-height:100dvh;
max-width:var(--maxw);
margin:0 auto;
padding:calc(18px + var(--safe-top)) 16px calc(40px + var(--safe-bottom));
}
.page-wide{max-width:var(--maxw-wide);}
.stack{display:flex;flex-direction:column;gap:10px;}
.spacer{flex:1 1 auto;}
.hidden{display:none !important;}
.center{text-align:center;}
.mono{font-family:var(--font-mono);}
/* ----------------------------------------------------------------
6. LOADING SCREEN
Full-screen overlay shown until models + sync complete.
Markup:
---------------------------------------------------------------- */
.loader{
position:fixed;inset:0;z-index:5000;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
background:var(--bg);
transition:opacity var(--t-slow),visibility var(--t-slow);
}
.loader.done{opacity:0;visibility:hidden;}
.loader-cross{
font-family:var(--font-head);font-size:54px;font-weight:800;color:var(--accent);
text-shadow:var(--glow-b);
animation:crossPulse 1.6s ease-in-out infinite;
}
@keyframes crossPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.loader-title{font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-.3px;}
.loader-title .dot{color:var(--accent2);}
.loader-bar{
width:min(260px,70vw);height:6px;border-radius:var(--r-pill);
background:var(--s2);overflow:hidden;border:1px solid var(--border);
}
.loader-bar i{
display:block;height:100%;width:0%;border-radius:var(--r-pill);
background:linear-gradient(90deg,var(--accent),var(--accent2));
box-shadow:var(--glow-b);
transition:width var(--t-slow) ease;
}
.loader-step{font-size:12.5px;color:var(--muted);letter-spacing:.02em;min-height:1.2em;text-align:center;}
/* ----------------------------------------------------------------
7. TOP BAR / HEADER
---------------------------------------------------------------- */
.hdr{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:22px;padding-bottom:14px;
border-bottom:1px solid var(--border);position:relative;min-height:34px;
}
.logo{font-family:var(--font-head);font-weight:800;font-size:18px;letter-spacing:-.3px;white-space:nowrap;}
.logo .dot{color:var(--accent2);}
.logo small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;}
/* connectivity chip — also the hidden admin trigger on the nurse page */
.chip{
font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;user-select:none;
transition:background var(--t),color var(--t);
}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.chip.online {background:rgba(0,229,179,.12);color:var(--accent2);border-color:rgba(0,229,179,.28);}
.chip.offline{background:rgba(255,170,0,.12);color:var(--warn); border-color:rgba(255,170,0,.28);}
.chip.queued {background:rgba(255,170,0,.12);color:var(--warn); border-color:rgba(255,170,0,.28);}
.chip.queued::before{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:.25}}
/* trophy icon — appears ONLY post-login (rendered by JS, never pre-login) */
.trophy-icon{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-size:22px;line-height:1;text-decoration:none;z-index:10;
filter:drop-shadow(0 0 8px rgba(255,209,102,.55));
transition:transform var(--t-fast);
}
.trophy-icon:active{transform:translate(-50%,-50%) scale(.9);}
/* nurse session badge + lock + visit counter */
.session-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.nurse-badge{
display:inline-flex;align-items:center;gap:8px;
background:var(--s1);border:1px solid var(--border);border-radius:var(--r-pill);
padding:6px 12px;font-weight:600;font-size:13px;
}
.nurse-badge .avatar{
width:22px;height:22px;border-radius:50%;flex:none;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#04261f;font-size:11px;font-weight:800;
display:flex;align-items:center;justify-content:center;
}
.visit-counter{font-size:12px;color:var(--muted);}
.visit-counter b{color:var(--accent2);}
.lock-btn{
margin-left:auto;background:transparent;border:1px solid var(--border);
color:var(--muted);border-radius:var(--r-sm);padding:6px 10px;font-size:12px;cursor:pointer;
}
.lock-btn:active{background:var(--s2);}
/* ----------------------------------------------------------------
8. BUTTONS
---------------------------------------------------------------- */
.btn{
font-family:var(--font-body);font-size:13px;font-weight:600;
padding:12px 22px;border-radius:8px;border:none;cursor:pointer;
letter-spacing:.03em;text-transform:uppercase;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:filter var(--t-fast),transform var(--t-fast),background var(--t-fast),opacity var(--t-fast);
-webkit-user-select:none;user-select:none;
}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none !important;filter:none !important;}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow-b);}
.btn-primary:active:not(:disabled){filter:brightness(1.12);}
.btn-success{background:var(--accent2);color:var(--accent2-ink);box-shadow:var(--glow-g);}
.btn-success:active:not(:disabled){filter:brightness(1.08);}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--border-strong);}
.btn-ghost:active{background:rgba(77,166,255,.08);}
.btn-danger{background:rgba(255,77,77,.12);color:var(--danger);border:1px solid rgba(255,77,77,.28);}
.btn-danger:active{background:rgba(255,77,77,.2);}
.btn-warn{background:rgba(255,170,0,.12);color:var(--warn);border:1px solid rgba(255,170,0,.28);}
.btn-warn:active{background:rgba(255,170,0,.2);}
.btn-full{width:100%;}
.btn-sm{padding:8px 14px;font-size:12px;}
.btn-lg{padding:15px 26px;font-size:14px;}
.btn-row{display:flex;gap:10px;width:100%;}
.btn-row .btn{flex:1;}
/* pulsing "ready to submit / scan succeeded" state */
@keyframes pulseBtn{
0%,100%{transform:scale(1);box-shadow:var(--glow-g);}
50%{transform:scale(1.02);box-shadow:0 0 30px rgba(0,229,179,.8);}
}
.btn-ready{
animation:pulseBtn 1.5s infinite;
background:var(--accent2) !important;color:var(--accent2-ink) !important;border:none !important;
}
/* inline spinner for in-flight buttons */
.btn .spin,.spin{
width:15px;height:15px;border-radius:50%;flex:none;
border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
/* ----------------------------------------------------------------
9. CARDS
---------------------------------------------------------------- */
.card{
background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
padding:14px;margin-bottom:10px;box-shadow:var(--shadow-sm);
}
.card-flat{box-shadow:none;}
.card-title{
font-family:var(--font-head);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:8px;
}
.card-title .count{margin-left:auto;color:var(--muted);font-weight:600;}
/* collapsible card (Form 4 medication cards, Form 3 readings) */
.card-collapsible > .card-head{
display:flex;align-items:center;gap:8px;cursor:pointer;
font-weight:600;font-size:13px;
}
.card-collapsible > .card-head .chev{margin-left:auto;transition:transform var(--t);color:var(--muted);}
.card-collapsible.collapsed > .card-body{display:none;}
.card-collapsible.collapsed > .card-head .chev{transform:rotate(-90deg);}
/* ----------------------------------------------------------------
10. FORM FIELDS
---------------------------------------------------------------- */
.field{margin-bottom:10px;}
.field:last-child{margin-bottom:0;}
.field > label{
display:block;font-size:12px;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;font-weight:500;
}
.field > label .req{color:var(--danger);margin-left:3px;}
.field input,.field select,.field textarea{
width:100%;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);
color:var(--text);font-family:var(--font-body);font-size:14px;padding:10px 12px;
outline:none;transition:border-color var(--t),box-shadow var(--t);-webkit-appearance:none;appearance:none;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,166,255,.12);}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;}
.field select option{background:var(--s2);color:var(--text);}
.field textarea{resize:vertical;min-height:68px;line-height:1.5;}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.45;}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.field-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;}
@media(max-width:360px){.field-3{grid-template-columns:1fr 1fr;}}
/* locked / auto-filled accountability fields (read-only, pre-populated) */
.field.locked input,.field.locked select,.field.locked textarea,
input.locked,select.locked,textarea.locked,input[readonly]{
background:var(--s1);color:var(--muted);border-style:dashed;cursor:not-allowed;
}
.field.locked > label::after{content:' · locked';color:var(--faint);font-size:10px;letter-spacing:.04em;}
/* greyed-out inactive field (e.g. opposite shift summary on Form 1) */
.field.inactive{opacity:.4;pointer-events:none;}
/* validation error highlight (set by shared validate()) */
.field.invalid input,.field.invalid select,.field.invalid textarea,.invalid{
border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(255,77,77,.14) !important;
}
.field.invalid .err-msg,.err-msg{color:var(--danger);font-size:11.5px;margin-top:4px;}
/* number input with trailing unit (vitals, volumes) */
.num-unit{position:relative;}
.num-unit input{padding-right:58px;}
.num-unit .unit{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-size:12px;color:var(--muted);font-family:var(--font-mono);pointer-events:none;
}
/* voice-dictation textarea wrapper (mic button overlaps corner) */
.voice-field{position:relative;}
.voice-field textarea{padding-right:44px;}
.voice-field .mic{
position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
background:var(--s3);border:1px solid var(--border);color:var(--accent);
display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;
}
.voice-field .mic.recording{background:rgba(255,77,77,.18);color:var(--danger);animation:blink 1s steps(1) infinite;}
/* ----------------------------------------------------------------
11. SAFETY / ALLERGY BANNER (Form 1, Form 4)
---------------------------------------------------------------- */
.allergy-banner{
background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.35);
border-left:4px solid var(--danger);border-radius:var(--r-sm);
padding:11px 13px;margin-bottom:14px;color:#ffd5d5;
box-shadow:var(--glow-r);
}
.allergy-banner .lbl{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--danger);display:block;margin-bottom:3px;}
.allergy-banner .val{font-size:14px;font-weight:600;}
/* shift-type locked label (Form 1) */
.shift-pill{
display:inline-flex;align-items:center;gap:7px;
background:var(--s2);border:1px solid var(--border-strong);border-radius:var(--r-pill);
padding:7px 14px;font-weight:700;font-size:13px;letter-spacing:.03em;
}
.shift-pill.day {color:var(--warn);}
.shift-pill.night{color:var(--accent);}
/* ----------------------------------------------------------------
12. GPS QUALITY DISPLAY
---------------------------------------------------------------- */
.gps-quality{display:flex;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap;}
.gps-quality .coords{font-family:var(--font-mono);color:var(--muted);}
.gps-rate{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;padding:3px 9px;border-radius:var(--r-pill);}
.gps-rate.excellent{background:rgba(0,229,179,.14);color:var(--accent2);}
.gps-rate.good{background:rgba(77,166,255,.14);color:var(--accent);}
.gps-rate.fair{background:rgba(255,170,0,.14);color:var(--warn);}
.gps-rate.unavailable{background:rgba(139,168,196,.14);color:var(--muted);}
/* on-site / off-site badge (forms + dashboard) */
.gps-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.04em;}
.gps-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.gps-badge.onsite{background:rgba(0,229,179,.13);color:var(--accent2);}
.gps-badge.offsite{background:rgba(255,77,77,.13);color:var(--danger);}
.gps-badge.unavailable{background:rgba(139,168,196,.13);color:var(--muted);}
/* ----------------------------------------------------------------
13. FACE SCAN — ring, corners, scan line, liveness
(logic + visuals reused from the draft)
---------------------------------------------------------------- */
.face-wrap{position:relative;width:230px;height:230px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;}
.face-wrap video,.face-wrap canvas{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
transform:scaleX(-1);-webkit-mask-image:-webkit-radial-gradient(white,black);
}
.face-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--border-strong);z-index:2;transition:border-color var(--t),box-shadow var(--t);}
.face-ring.scan {border-color:var(--accent);box-shadow:var(--glow-b);animation:facePulse 1.6s ease-in-out infinite;}
.face-ring.liveness{border-color:var(--warn);box-shadow:var(--glow-a);animation:facePulse 1.6s ease-in-out infinite;}
.face-ring.ok {border-color:var(--accent2);box-shadow:var(--glow-g);}
.face-ring.fail {border-color:var(--danger);box-shadow:var(--glow-r);}
@keyframes facePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.face-corners{position:absolute;inset:0;z-index:3;pointer-events:none;}
.face-corners i{position:absolute;width:18px;height:18px;border-color:var(--accent);border-style:solid;}
.face-corners i:nth-child(1){top:6px;left:6px;border-width:2px 0 0 2px;}
.face-corners i:nth-child(2){top:6px;right:6px;border-width:2px 2px 0 0;}
.face-corners i:nth-child(3){bottom:6px;left:6px;border-width:0 0 2px 2px;}
.face-corners i:nth-child(4){bottom:6px;right:6px;border-width:0 2px 2px 0;}
.scan-line{position:absolute;left:0;right:0;top:0;height:2px;border-radius:50%;z-index:4;display:none;opacity:.7;
background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scanline 2s linear infinite;}
.face-wrap.scanning .scan-line{display:block;}
@keyframes scanline{0%{top:0}50%{top:100%}100%{top:0}}
.face-status{text-align:center;margin-bottom:14px;}
.face-status .ttl{font-family:var(--font-head);font-weight:700;font-size:16px;}
.face-status .sub{font-size:12.5px;color:var(--muted);margin-top:3px;min-height:1.1em;}
/* liveness overlay (the "open your mouth" prompt over the ring) */
.liveness-overlay{
position:absolute;inset:0;z-index:6;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
background:rgba(5,12,24,.55);color:#fff;opacity:0;pointer-events:none;transition:opacity var(--t);
}
.liveness-overlay.active{opacity:1;pointer-events:all;}
.liveness-overlay .emoji{font-size:34px;line-height:1;}
.liveness-overlay .txt{font-size:12.5px;font-weight:600;text-align:center;padding:0 18px;}
.liveness-timer{position:absolute;top:-3px;left:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);}
.liveness-timer circle{fill:none;stroke:var(--warn);stroke-width:2;stroke-linecap:round;}
/* two-step progress dots: face-match -> movement */
.liveness-steps{display:flex;gap:8px;justify-content:center;margin-bottom:8px;}
.liveness-step-dot{width:9px;height:9px;border-radius:50%;background:var(--s3);transition:background var(--t);}
.liveness-step-dot.active{background:var(--accent);animation:livePulse .7s ease-in-out infinite;}
.liveness-step-dot.done{background:var(--accent2);}
@keyframes livePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
/* photo-fallback panel (after 3 failed scans) */
.fallback-panel{margin-top:14px;}
.fallback-panel .stern{
background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.3);border-radius:var(--r-sm);
padding:11px 13px;color:#ffd5d5;font-weight:600;font-size:13px;margin-bottom:12px;
}
.fallback-panel .instructions{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.fallback-preview{width:140px;height:140px;border-radius:var(--r);object-fit:cover;border:1px solid var(--border);margin:0 auto 12px;}
/* ----------------------------------------------------------------
14. SELECTABLE CARDS (GCS Form 2)
---------------------------------------------------------------- */
.select-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.select-card{
display:flex;align-items:center;gap:12px;
background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);
padding:11px 13px;cursor:pointer;transition:border-color var(--t),background var(--t),transform var(--t-fast);
}
.select-card:active{transform:scale(.99);}
.select-card .score{
flex:none;width:34px;height:34px;border-radius:8px;background:var(--s3);
display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--accent);
}
.select-card .label{font-weight:600;font-size:13px;}
.select-card .desc{font-size:11.5px;color:var(--muted);margin-top:2px;}
.select-card.selected{border-color:var(--accent);background:rgba(77,166,255,.1);box-shadow:var(--glow-b);}
.select-card.selected .score{background:var(--accent);color:#fff;}
.select-card.nt.selected{border-color:var(--warn);background:rgba(255,170,0,.1);box-shadow:var(--glow-a);}
.select-card.nt.selected .score{background:var(--warn);color:#04261f;}
/* live GCS score readout */
.score-readout{display:flex;gap:10px;justify-content:space-between;align-items:center;
background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;margin-top:8px;}
.score-readout .domain{text-align:center;}
.score-readout .domain .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.score-readout .domain .v{font-family:var(--font-mono);font-size:20px;font-weight:600;}
.score-readout .total{margin-left:auto;text-align:right;}
.score-readout .total .v{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--accent2);}
.score-readout.danger .total .v{color:var(--danger);}
.score-readout.nt .total .v{color:var(--warn);font-size:18px;}
/* in-form emergency warning (GCS < 8) */
.emergency-warn{
background:rgba(255,77,77,.12);border:1px solid rgba(255,77,77,.4);border-radius:var(--r-sm);
padding:12px 14px;color:#ffdada;font-weight:600;font-size:13px;margin-top:10px;
animation:flashRed 1.1s ease-in-out infinite;
}
@keyframes flashRed{0%,100%{box-shadow:0 0 0 rgba(255,77,77,0)}50%{box-shadow:var(--glow-r)}}
/* ----------------------------------------------------------------
15. ENTRY CARDS — fluid readings (Form 3) & medications (Form 4)
---------------------------------------------------------------- */
.entry-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:13px;margin-bottom:10px;position:relative;}
.entry-card .entry-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.entry-card .entry-head .idx{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:600;}
.entry-card .del-card{margin-left:auto;background:transparent;border:none;color:var(--danger);font-size:12px;cursor:pointer;padding:3px 6px;}
.add-card-btn{width:100%;border:1px dashed var(--border-strong);background:transparent;color:var(--accent);
border-radius:var(--r-sm);padding:12px;font-weight:600;font-size:13px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;}
.add-card-btn:active{background:rgba(77,166,255,.07);}
.add-card-btn:disabled{opacity:.35;cursor:not-allowed;}
/* running totals strip (fluid balance) */
.totals-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.totals-strip .tot{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;text-align:center;}
.totals-strip .tot .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.totals-strip .tot .v{font-family:var(--font-mono);font-size:18px;font-weight:600;margin-top:3px;}
.totals-strip .tot.net .v{color:var(--accent2);}
.totals-strip .tot.net.negative .v{color:var(--warn);}
/* medication admin-time multi-select buttons */
.time-multi{display:flex;flex-wrap:wrap;gap:7px;}
.time-multi .t{padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--s2);
font-family:var(--font-mono);font-size:12px;color:var(--muted);cursor:pointer;transition:all var(--t-fast);}
.time-multi .t.on{background:var(--accent);color:#fff;border-color:var(--accent);}
/* administered toggle (Yes/No/Withheld) */
.toggle-3{display:flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;}
.toggle-3 button{flex:1;padding:9px;background:var(--s2);border:none;color:var(--muted);font-weight:600;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;}
.toggle-3 button + button{border-left:1px solid var(--border);}
.toggle-3 button.on.yes{background:var(--accent2);color:#04261f;}
.toggle-3 button.on.no{background:var(--s4);color:var(--text);}
.toggle-3 button.on.withheld{background:var(--warn);color:#04261f;}
/* ----------------------------------------------------------------
16. CALENDAR DAY SELECTOR (Form 7 contractor claim)
---------------------------------------------------------------- */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.calendar .dow{text-align:center;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 0;}
.cal-day{
aspect-ratio:1;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--s2);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
font-size:12px;position:relative;transition:border-color var(--t-fast),background var(--t-fast);
}
.cal-day.blank{background:transparent;border-color:transparent;cursor:default;}
.cal-day .dn-marks{display:flex;gap:2px;}
.cal-day .dn-marks i{width:5px;height:5px;border-radius:50%;background:var(--s4);}
.cal-day.has-day .dn-marks i.d{background:var(--warn);}
.cal-day.has-night .dn-marks i.n{background:var(--accent);}
.cal-day.has-day,.cal-day.has-night{border-color:var(--border-strong);background:var(--s3);}
.cal-shift-toggle{display:flex;gap:8px;margin-bottom:10px;}
.cal-shift-toggle .seg{flex:1;text-align:center;padding:8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--s2);font-weight:600;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;}
.cal-shift-toggle .seg.on.day{background:var(--warn);color:#04261f;border-color:var(--warn);}
.cal-shift-toggle .seg.on.night{background:var(--accent);color:#fff;border-color:var(--accent);}
/* ----------------------------------------------------------------
17. SESSION TIMER + OVERTIME (20-min forms)
---------------------------------------------------------------- */
.timer-bar{
position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);
padding:9px 13px;margin-bottom:14px;
}
.timer-bar .clock{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--accent2);}
.timer-bar .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.timer-bar.overtime{border-color:rgba(255,77,77,.4);}
.timer-bar.overtime .clock{color:var(--danger);}
.overtime-msg{
background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.35);border-radius:var(--r-sm);
padding:11px 13px;color:#ffdada;font-size:12.5px;line-height:1.5;margin-bottom:12px;font-weight:500;
}
/* ----------------------------------------------------------------
18. FORM SELECTION LIST (nurse page)
---------------------------------------------------------------- */
.form-list{display:flex;flex-direction:column;gap:9px;}
.form-item{
display:flex;align-items:center;gap:12px;text-align:left;width:100%;
background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
padding:13px 14px;cursor:pointer;transition:border-color var(--t),transform var(--t-fast);
}
.form-item:active{transform:scale(.995);border-color:var(--border-strong);}
.form-item .num{flex:none;width:30px;height:30px;border-radius:8px;background:var(--s3);color:var(--accent);
display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:13px;}
.form-item .meta .name{display:block;font-weight:600;font-size:13.5px;color:#fff;}
.form-item .meta .desc{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.form-item .arrow{margin-left:auto;color:var(--faint);}
.form-item.disabled{opacity:.5;cursor:not-allowed;}
.form-item.disabled .num{color:var(--muted);}
.form-item .soon{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);
background:rgba(255,170,0,.12);padding:3px 8px;border-radius:var(--r-pill);}
.no-patient-msg{background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.25);border-radius:var(--r-sm);
padding:12px;color:var(--warn);font-size:12.5px;text-align:center;}
/* ----------------------------------------------------------------
19. TOASTS
---------------------------------------------------------------- */
.toast-host{position:fixed;left:0;right:0;bottom:calc(18px + var(--safe-bottom));z-index:6000;
display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;}
.toast{
pointer-events:auto;max-width:var(--maxw);width:100%;
background:var(--s2);border:1px solid var(--border-strong);border-radius:var(--r);
padding:12px 14px;font-size:13px;box-shadow:var(--shadow);
display:flex;align-items:flex-start;gap:10px;
animation:toastIn var(--t) ease;
}
.toast.out{animation:toastOut var(--t) ease forwards;}
.toast .ic{flex:none;font-size:15px;line-height:1.2;}
.toast.success{border-color:rgba(0,229,179,.4);} .toast.success .ic{color:var(--accent2);}
.toast.error {border-color:rgba(255,77,77,.4);} .toast.error .ic{color:var(--danger);}
.toast.warn {border-color:rgba(255,170,0,.4);} .toast.warn .ic{color:var(--warn);}
.toast.info {border-color:var(--border-strong);} .toast.info .ic{color:var(--accent);}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(14px)}}
/* ----------------------------------------------------------------
20. MODALS (password / PIN prompt, confirm dialog)
---------------------------------------------------------------- */
.modal-backdrop{
position:fixed;inset:0;z-index:5500;background:rgba(2,6,14,.72);
display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.modal-backdrop.open{opacity:1;visibility:visible;}
.modal{
width:100%;max-width:380px;background:var(--s1);border:1px solid var(--border-strong);
border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);
transform:translateY(10px) scale(.98);transition:transform var(--t);
}
.modal-backdrop.open .modal{transform:none;}
.modal h3{font-family:var(--font-head);font-size:17px;margin-bottom:6px;}
.modal p{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.modal .modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal .modal-actions .btn{flex:1;}
.modal-close{position:absolute;}
/* ----------------------------------------------------------------
21. NURSE ADMIN PANEL (enrolment) + read-only threshold
---------------------------------------------------------------- */
.admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.admin-stat{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px;text-align:center;}
.admin-stat .v{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent);}
.admin-stat .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.threshold-readonly{
display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);
border-radius:var(--r-sm);padding:11px 13px;font-size:13px;
}
.threshold-readonly .v{font-family:var(--font-mono);font-weight:600;color:var(--accent2);margin-left:auto;}
.threshold-readonly .note{font-size:11px;color:var(--faint);}
.enrolled-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;}
.enrolled-row{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;}
.enrolled-row .id{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-left:auto;}
.enrolled-row .samples{font-size:11px;color:var(--accent2);}
/* ================================================================
22. DASHBOARD COMPONENTS (shared theme; dashboard is wide layout)
================================================================ */
/* 22.1 shell: fixed sidebar (desktop) / hamburger drawer (mobile) */
.dash{display:flex;min-height:100dvh;position:relative;z-index:1;}
.dash-nav{
width:var(--nav-w);flex:none;background:var(--s1);border-right:1px solid var(--border);
display:flex;flex-direction:column;padding:16px 12px;gap:4px;
position:sticky;top:0;height:100dvh;overflow-y:auto;transition:width var(--t);
}
.dash-nav.collapsed{width:var(--nav-w-collapsed);}
.dash-nav .brand{font-family:var(--font-head);font-weight:800;font-size:17px;padding:6px 10px 14px;letter-spacing:-.3px;}
.dash-nav .brand .dot{color:var(--accent2);}
.nav-item{
display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent;
transition:background var(--t-fast),color var(--t-fast);white-space:nowrap;
}
.nav-item .ic{flex:none;width:18px;text-align:center;font-size:15px;}
.nav-item:hover{background:var(--s2);color:var(--text);}
.nav-item.active{background:rgba(77,166,255,.12);color:var(--accent);border-color:var(--border);}
.nav-item .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:var(--r-pill);padding:1px 7px;min-width:18px;text-align:center;}
.nav-item.alert .badge{animation:blink 1s steps(1) infinite;}
.dash-nav.collapsed .nav-item .label,.dash-nav.collapsed .brand small{display:none;}
.dash-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.dash-topbar{
position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
background:rgba(5,12,24,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-bottom:1px solid var(--border);padding:12px 18px;
}
.dash-topbar .hamburger{display:none;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:7px 10px;cursor:pointer;}
.dash-topbar .last-synced{font-size:12px;color:var(--muted);margin-left:auto;}
.dash-topbar .last-synced b{color:var(--accent2);font-family:var(--font-mono);}
.dash-content{padding:18px;max-width:var(--maxw-wide);width:100%;margin:0 auto;}
.dash-section{display:none;}
.dash-section.active{display:block;animation:fadeIn var(--t) ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-title{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:16px;}
/* mobile drawer behaviour */
@media(max-width:860px){
.dash-nav{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);width:var(--nav-w);box-shadow:var(--shadow);}
.dash-nav.open{transform:none;}
.dash-topbar .hamburger{display:inline-flex;}
.nav-overlay{position:fixed;inset:0;background:rgba(2,6,14,.6);z-index:45;opacity:0;visibility:hidden;transition:opacity var(--t);}
.nav-overlay.open{opacity:1;visibility:visible;}
}
/* 22.2 stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:15px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat-card .v{font-family:var(--font-mono);font-size:30px;font-weight:700;line-height:1;}
.stat-card .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:8px;}
.stat-card.alert{border-color:rgba(255,77,77,.4);}
.stat-card.alert.flashing{animation:flashRed 1.1s ease-in-out infinite;}
.stat-card.alert .v{color:var(--danger);}
/* 22.3 feeds */
.feed{display:flex;flex-direction:column;gap:8px;}
.feed-item{display:flex;align-items:flex-start;gap:11px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;transition:border-color var(--t-fast);}
.feed-item:hover{border-color:var(--border-strong);}
.feed-item .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--accent);}
.feed-item.amber .dot{background:var(--warn);}
.feed-item.red .dot{background:var(--danger);}
.feed-item .body{flex:1;min-width:0;}
.feed-item .body .t{font-size:13px;font-weight:500;}
.feed-item .body .meta{font-size:11px;color:var(--muted);margin-top:2px;}
.feed-item .time{font-size:11px;color:var(--faint);font-family:var(--font-mono);white-space:nowrap;}
/* 22.4 GPS compliance + shift coverage grid */
.compliance-bar{height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--danger);display:flex;border:1px solid var(--border);}
.compliance-bar .onsite{background:var(--accent2);height:100%;}
.coverage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.coverage-tile{border-radius:var(--r-sm);padding:13px;text-align:center;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--border);}
.coverage-tile.green{background:rgba(0,229,179,.1);border-color:rgba(0,229,179,.3);color:var(--accent2);}
.coverage-tile.amber{background:rgba(255,170,0,.1);border-color:rgba(255,170,0,.3);color:var(--warn);}
.coverage-tile.red{background:rgba(255,77,77,.1);border-color:rgba(255,77,77,.3);color:var(--danger);}
/* 22.5 alert cards */
.alert-card{border-radius:var(--r);padding:14px;margin-bottom:10px;border:1px solid rgba(255,77,77,.4);background:rgba(255,77,77,.07);}
.alert-card.flashing{animation:flashRed 1.1s ease-in-out infinite;}
.alert-card.acknowledged{border-color:rgba(255,170,0,.35);background:rgba(255,170,0,.06);animation:none;opacity:.85;}
.alert-card.gcs-nt{border-color:rgba(255,170,0,.4);background:rgba(255,170,0,.07);animation:none;}
.alert-card .a-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.alert-card .a-sev{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);}
.alert-card .a-sev.critical{background:var(--danger);color:#fff;}
.alert-card .a-sev.warning,.alert-card .a-sev.gcs_nt{background:var(--warn);color:#04261f;}
.alert-card .a-patient{font-weight:700;}
.alert-card .a-detail{font-size:13px;margin:4px 0;}
.alert-card .a-meta{font-size:11.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;}
/* 22.6 lists / tables / search / filters */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.search-input{flex:1;min-width:180px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);padding:9px 12px;font-size:13px;outline:none;}
.search-input:focus{border-color:var(--accent);}
.filter-pills{display:flex;gap:6px;flex-wrap:wrap;}
.filter-pill{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--s2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;}
.filter-pill.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.roster-list{display:flex;flex-direction:column;gap:8px;}
.roster-card{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;transition:border-color var(--t-fast);}
.roster-card:hover{border-color:var(--border-strong);}
.roster-card .info{flex:1;min-width:0;}
.roster-card .info .nm{font-weight:600;font-size:14px;}
.roster-card .info .sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.perf-dot{flex:none;width:11px;height:11px;border-radius:50%;}
.perf-dot.green{background:var(--accent2);} .perf-dot.amber{background:var(--warn);} .perf-dot.red{background:var(--danger);}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th,.data-table td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--border);}
.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;}
.data-table tr:hover td{background:var(--s1);}
/* status pills */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.04em;}
.pill.pending{background:rgba(255,170,0,.14);color:var(--warn);}
.pill.approved{background:rgba(0,229,179,.14);color:var(--accent2);}
.pill.declined{background:rgba(255,77,77,.14);color:var(--danger);}
.pill.new{background:rgba(77,166,255,.16);color:var(--accent);}
.pill.reviewed{background:rgba(139,168,196,.14);color:var(--muted);}
/* 22.7 profile panels (patient / nurse) */
.profile-head{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:14px;}
.profile-head h2{font-family:var(--font-head);font-size:19px;}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.kv{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;}
.kv .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.kv .v{font-size:13.5px;font-weight:500;margin-top:2px;word-break:break-word;}
.assign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
/* strengths / improvement panels */
.panel-strength{background:rgba(0,229,179,.08);border:1px solid rgba(0,229,179,.3);border-radius:var(--r);padding:14px;margin-bottom:10px;}
.panel-watch{background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.3);border-radius:var(--r);padding:14px;margin-bottom:10px;}
.panel-improve{background:rgba(255,77,77,.08);border:1px solid rgba(255,77,77,.35);border-radius:var(--r);padding:14px;margin-bottom:10px;animation:flashRed 1.4s ease-in-out infinite;}
.panel-strength .ph,.panel-watch .ph,.panel-improve .ph{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;margin-bottom:8px;}
.panel-strength .ph{color:var(--accent2);} .panel-watch .ph{color:var(--warn);} .panel-improve .ph{color:var(--danger);}
.metric-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0;}
.metric-row .mv{margin-left:auto;font-family:var(--font-mono);font-weight:600;}
/* manager notes log */
.notes-log{display:flex;flex-direction:column;gap:7px;max-height:240px;overflow-y:auto;}
.note-entry{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;font-size:12.5px;}
.note-entry .ts{font-size:10.5px;color:var(--faint);font-family:var(--font-mono);margin-top:4px;}
/* shift-history rows */
.shift-row{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;flex-wrap:wrap;}
.shift-row.gap{border-color:rgba(255,170,0,.35);}
.shift-row.fallback{border-color:rgba(255,77,77,.35);}
/* 22.8 vitals trend charts */
.chart-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:12px;}
.chart-card .chart-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.chart-range{display:flex;gap:6px;margin-left:auto;}
.chart-range button{padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--s2);color:var(--muted);font-size:11px;cursor:pointer;}
.chart-range button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.chart-canvas{width:100%;height:200px;}
/* 22.9 leaderboard */
.leaderboard{display:flex;flex-direction:column;gap:8px;}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 14px;}
.lb-row .rank{font-family:var(--font-mono);font-weight:700;font-size:16px;width:28px;text-align:center;color:var(--muted);}
.lb-row .pts{margin-left:auto;font-family:var(--font-mono);font-weight:700;color:var(--accent2);}
.lb-row.gold{border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.07);}
.lb-row.gold .rank{color:var(--gold);}
.lb-row.silver{border-color:rgba(203,213,225,.4);} .lb-row.silver .rank{color:#cbd5e1;}
.lb-row.bronze{border-color:rgba(205,127,50,.4);} .lb-row.bronze .rank{color:#cd7f32;}
/* 22.10 awards post creation + drafts + image upload */
.img-upload{display:flex;gap:8px;flex-wrap:wrap;}
.img-thumb{position:relative;width:84px;height:84px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);}
.img-thumb img{width:100%;height:100%;object-fit:cover;}
.img-thumb .rm{position:absolute;top:2px;right:2px;background:rgba(2,6,14,.7);border:none;color:var(--danger);width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:12px;}
.img-add{width:84px;height:84px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);background:transparent;color:var(--accent);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.draft-row,.post-row{display:flex;align-items:center;gap:11px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px;}
.draft-row .thumb,.post-row .thumb{width:46px;height:46px;border-radius:var(--r-sm);object-fit:cover;flex:none;border:1px solid var(--border);}
.draft-row .grow,.post-row .grow{flex:1;min-width:0;}
.draft-row .cap,.post-row .cap{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.draft-row .d,.post-row .d{font-size:11px;color:var(--faint);font-family:var(--font-mono);margin-top:2px;}
/* testimonials management */
.testimonial-mini{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px;margin-bottom:8px;}
.testimonial-mini .quote{font-size:13px;font-style:italic;}
.testimonial-mini .by{font-size:11.5px;color:var(--muted);margin-top:6px;}
/* 22.11 settings sliders */
.slider-field{margin-bottom:16px;}
.slider-field .head{display:flex;align-items:center;margin-bottom:8px;}
.slider-field .head .v{margin-left:auto;font-family:var(--font-mono);font-weight:600;color:var(--accent2);}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--s3);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-b);cursor:pointer;border:none;}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;}
.config-explain{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:6px;}
.sysinfo-row{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--border);}
.sysinfo-row .v{font-family:var(--font-mono);color:var(--muted);}
/* 22.12 weekly awards reminder popup */
.reminder-pop{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5600;
background:var(--s1);border:1px solid rgba(255,209,102,.4);border-radius:var(--r);
padding:14px 16px;box-shadow:var(--shadow);max-width:420px;width:calc(100% - 32px);
display:flex;align-items:center;gap:12px;}
.reminder-pop .ic{font-size:22px;}
.reminder-pop .msg{font-size:13px;flex:1;}
/* ----------------------------------------------------------------
23. UTILITIES — shimmer placeholder, fade-slide, coming-soon stub
---------------------------------------------------------------- */
.shimmer{position:relative;overflow:hidden;background:var(--s2);border-radius:var(--r-sm);}
.shimmer::after{content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
transform:translateX(-100%);animation:shimmer 1.4s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.fade-slide{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow),transform var(--t-slow);}
.fade-slide.in{opacity:1;transform:none;}
.coming-soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 20px;}
.coming-soon .cs-ic{font-size:50px;opacity:.6;}
.coming-soon h2{font-family:var(--font-head);font-size:22px;}
.coming-soon p{font-size:13px;color:var(--muted);max-width:300px;}
/* success burst (checkmark animation container) */
.success-burst{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;text-align:center;}
.success-burst .check{width:64px;height:64px;border-radius:50%;background:rgba(0,229,179,.14);border:2px solid var(--accent2);
display:flex;align-items:center;justify-content:center;color:var(--accent2);font-size:32px;animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* ----------------------------------------------------------------
24. RESPONSIVE — desktop widening for nurse/forms columns
---------------------------------------------------------------- */
@media(min-width:520px){
.page{padding-left:24px;padding-right:24px;}
}
/* ----------------------------------------------------------------
25. REDUCED MOTION — respect user preference
---------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
.bg-particles::before,.bg-particles::after{animation:none;}
}
/* ----------------------------------------------------------------
26. PRINT (patient PDF export opens in new tab; keep it legible)
---------------------------------------------------------------- */
@media print{
body{background:#fff;color:#000;}
body::after,.bg-particles,.dash-nav,.dash-topbar,.toast-host{display:none !important;}
.card,.stat-card{border-color:#ccc;box-shadow:none;}
}
/* ----------------------------------------------------------------
27. PATIENT HISTORY (nurse post-login; collapsible read-only view)
---------------------------------------------------------------- */
.hist-card{padding-bottom:14px;}
.hist-head{
display:flex;align-items:center;gap:8px;width:100%;
background:transparent;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;
}
.hist-head .hist-title{margin:0;padding:0;border:none;flex:1;}
.hist-chev{margin-left:auto;color:var(--muted);font-size:20px;line-height:1;transition:transform var(--t);}
.hist-chev.open{transform:rotate(90deg);}
.hist-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.hist-controls{display:flex;align-items:flex-end;gap:8px;margin-bottom:12px;}
.hist-controls .field{margin-bottom:0;flex:1;}
.hist-controls .hist-load{flex:none;}
.hist-results{display:flex;flex-direction:column;gap:8px;}
.hist-msg{font-size:12.5px;color:var(--muted);line-height:1.5;padding:4px 0;}
.hist-msg-sm{font-size:11.5px;color:var(--faint);padding:0;}
.hist-loading{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);padding:6px 0;}
.hist-item{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.hist-item-head{
display:flex;align-items:center;gap:10px;width:100%;text-align:left;
background:transparent;border:none;padding:11px 13px;cursor:pointer;color:inherit;
}
.hist-item-head:active{background:rgba(77,166,255,.06);}
.hist-item-title{font-weight:600;font-size:13px;color:#fff;flex:1;}
.hist-item-when{font-size:11px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap;}
.hist-item-arrow{color:var(--faint);transition:transform var(--t);}
.hist-item.open .hist-item-arrow{transform:rotate(90deg);}
.hist-item-body{
padding:4px 13px 12px;border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:6px;
}
.hist-row{display:flex;gap:10px;font-size:12.5px;align-items:flex-start;padding:3px 0;}
.hist-row .hk{color:var(--muted);min-width:120px;flex:none;}
.hist-row .hv{color:var(--text);word-break:break-word;flex:1;}
@media(max-width:360px){
.hist-row{flex-direction:column;gap:1px;}
.hist-row .hk{min-width:0;}
}
/* ----------------------------------------------------------------
28. BUSY SPINNER / OVERLAY ("while you wait" indicator)
Shown via CHS.showSpinner(label) / CHS.hideSpinner(). Sits ABOVE
modals (5500), the loader (5000) and the reminder pop (5600) but
BELOW toasts (6000) so the "done" toast is never covered. Blocks
pointer input while visible so an action can't be double-fired.
---------------------------------------------------------------- */
.chs-spinner-overlay{
position:fixed;inset:0;z-index:5800;
display:flex;align-items:center;justify-content:center;padding:24px;
background:rgba(2,6,14,.66);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--t),visibility var(--t);
}
.chs-spinner-overlay.show{opacity:1;visibility:visible;pointer-events:auto;}
.chs-spinner-box{
display:flex;flex-direction:column;align-items:center;gap:14px;
background:var(--s1);border:1px solid var(--border-strong);
border-radius:var(--r-lg);padding:24px 30px;box-shadow:var(--shadow);
max-width:min(280px,80vw);
}
.chs-spinner-ring{
width:38px;height:38px;border-radius:50%;flex:none;
border:3px solid var(--border);border-top-color:var(--accent);
box-shadow:var(--glow-b);
animation:spin .7s linear infinite; /* reuses the existing @keyframes spin */
}
.chs-spinner-label{
font-size:13px;font-weight:600;color:var(--text);
text-align:center;letter-spacing:.01em;line-height:1.4;
}
/* ================================================================
END OF chs_styles.css
================================================================ */