/* ═══════════════════════════════════════════════════════════════
   Maisy Mat G1 — Clinical Portal  ·  Professional light theme
   Navy topbar · white cards · teal accent · clinical precision
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy:    #0B1928;
  --navy2:   #152637;
  --page:    #EFF3FA;
  --white:   #FFFFFF;
  --card-bg: #FFFFFF;
  --br:      rgba(0,0,0,0.08);
  --br2:     rgba(0,0,0,0.14);
  --t0:      #111827;
  --t1:      #4B5563;
  --t2:      #9CA3AF;
  --teal:    #059669;
  --teal2:   #047857;
  --teal-bg: rgba(5,150,105,0.08);
  --blue:    #2563EB;
  --blue-bg: rgba(37,99,235,0.08);
  --amber:   #D97706;
  --amber-bg:rgba(217,119,6,0.08);
  --red:     #DC2626;
  --red-bg:  rgba(220,38,38,0.08);
  --shadow:  0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.07);
  --shadow2: 0 4px 16px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.07);
  --f-serif: 'Fraunces', Georgia, serif;
  --f-sans:  'Geist', system-ui, sans-serif;
  --f-mono:  'Geist Mono', 'Menlo', monospace;
  --r:  8px;
  --r2: 12px;
  --topbar: 56px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--f-sans); background:var(--page); color:var(--t0); font-size:13px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
.hidden { display:none !important; }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:200;
  height:var(--topbar);
  background:var(--navy);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.topbar-brand { display:flex; align-items:baseline; gap:.6rem; }
.brand-num { font-family:var(--f-serif); font-size:28px; font-weight:400; color:#fff; line-height:1; letter-spacing:-.02em; }
.brand-text { display:flex; flex-direction:column; }
.brand-ward { font-family:var(--f-serif); font-size:10px; font-weight:300; color:var(--teal); letter-spacing:.15em; text-transform:uppercase; line-height:1; }
.brand-sub  { font-size:11px; color:rgba(255,255,255,.45); margin-top:1px; }

.topbar-stats { flex:1; display:flex; gap:.5rem; justify-content:center; }
.stat-chip {
  display:flex; align-items:center; gap:.35rem;
  padding:.22rem .65rem; border-radius:999px;
  border:.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
  font-family:var(--f-mono); font-size:11.5px; color:rgba(255,255,255,.7);
}
.stat-chip .dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); }
.stat-chip.s-relay { border-color:rgba(220,38,38,.5); color:#FCA5A5; }
.stat-chip.s-relay .dot { background:#DC2626; box-shadow:0 0 4px rgba(220,38,38,.7); }
.stat-chip.s-warn  { border-color:rgba(217,119,6,.5); color:#FCD34D; }
.stat-chip.s-warn  .dot { background:var(--amber); }
.stat-chip.s-calm  { border-color:rgba(5,150,105,.45); color:#6EE7B7; }
.stat-chip.s-calm  .dot { background:var(--teal); }

.topbar-right { display:flex; align-items:center; gap:.8rem; margin-left:auto; }
.dsub-badge { display:flex; align-items:center; gap:.4rem; padding:.28rem .65rem; border-radius:var(--r); border:.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); }
.dsub-dot   { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 5px rgba(5,150,105,.6); transition:.3s; }
.dsub-label { font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,.7); }
.dsub-badge.fired .dsub-dot  { background:var(--red); box-shadow:0 0 6px rgba(220,38,38,.8); animation:blink .9s infinite; }
.dsub-badge.fired .dsub-label { color:#FCA5A5; }

/* ── Physical GPIO chips (nurse-call + brake on Lubancat) ──────────────── */
.gpio-badge { display:flex; align-items:center; gap:.35rem; }
.gpio-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .55rem;
  border-radius:var(--r);
  border:.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);
  font-family:var(--f-mono); font-size:11px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
  transition:.2s;
}
.gpio-chip .gpio-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:.2s;
}
.gpio-chip.idle   .gpio-dot { background:var(--teal); box-shadow:0 0 5px rgba(5,150,105,.55); }
.gpio-chip.active .gpio-dot { background:var(--red);  box-shadow:0 0 6px rgba(220,38,38,.8); animation:blink .9s infinite; }
.gpio-chip.active { color:#FCA5A5; border-color:rgba(252,165,165,.35); background:rgba(220,38,38,.12); }
.gpio-chip.stale  { color:rgba(255,255,255,.45); }
.gpio-chip.stale  .gpio-dot { background:rgba(255,255,255,.25); box-shadow:none; }

.mode-group { display:flex; border:.5px solid rgba(255,255,255,.2); border-radius:var(--r); overflow:hidden; }
.mode-btn { padding:.26rem .7rem; font-size:12px; color:rgba(255,255,255,.55); transition:.15s; }
.mode-btn.active { background:rgba(255,255,255,.15); color:#fff; }
.mode-btn:hover:not(.active) { background:rgba(255,255,255,.07); }
.clock { font-family:var(--f-mono); font-size:12px; color:rgba(255,255,255,.45); min-width:5.5ch; }

/* Bed topbar extras */
.back-btn { display:flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.65); font-size:13px; padding:.28rem .65rem; border-radius:var(--r); border:.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); transition:.15s; }
.back-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.bed-header-center { display:flex; align-items:baseline; gap:.5rem; margin-left:.5rem; }
.bed-hdr-name { font-family:var(--f-serif); font-size:17px; font-weight:400; color:#fff; letter-spacing:-.01em; }
.bed-hdr-id   { font-family:var(--f-mono); font-size:12px; color:rgba(255,255,255,.5); }
.risk-chip { font-size:10px; padding:.12rem .4rem; border-radius:3px; font-family:var(--f-mono); font-weight:500; }
.risk-chip.standard      { background:rgba(37,99,235,.25); color:#93C5FD; }
.risk-chip.post_surgery  { background:rgba(217,119,6,.25); color:#FCD34D; }
.risk-chip.high_fall_risk{ background:rgba(220,38,38,.25); color:#FCA5A5; }
.stage-chip { padding:.25rem .6rem; border-radius:5px; font-size:11px; font-family:var(--f-mono); font-weight:500; }
.stage-chip.s1 { background:rgba(5,150,105,.3); color:#6EE7B7; }
.stage-chip.s2 { background:rgba(37,99,235,.3); color:#93C5FD; }
.stage-chip.s3 { background:rgba(217,119,6,.3); color:#FDE68A; }
.stage-chip.s4 { background:rgba(220,38,38,.35); color:#FCA5A5; }

/* ── Pages & layout ──────────────────────────────────────────────── */
.page { min-height:100vh; display:flex; flex-direction:column; }

/* Dashboard */
.dash-body { display:grid; grid-template-columns:320px 1fr; gap:1.5rem; padding:1.5rem; flex:1; align-content:start; }
.serif-title { font-family:var(--f-serif); font-size:16px; font-weight:400; color:var(--t0); letter-spacing:-.01em; }
.sec-hd { display:flex; align-items:baseline; gap:.75rem; margin-bottom:1.1rem; }
.sec-hint { font-size:11px; color:var(--t2); }
.link-btn { font-size:12px; color:var(--teal); background:none; border:none; cursor:pointer; }
.link-btn:hover { text-decoration:underline; }

/* Donut chart area */
.chart-area { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.donut-wrap { position:relative; }
.donut-wrap svg { display:block; }
.donut-tooltip {
  position:fixed; z-index:9999;
  background:var(--navy); color:#fff;
  border-radius:var(--r2); padding:.7rem .9rem;
  font-size:12px; line-height:1.6;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  pointer-events:none; min-width:160px;
  border:.5px solid rgba(255,255,255,.12);
}
.donut-legend { display:flex; flex-direction:column; gap:.45rem; width:100%; }
.legend-item { display:flex; align-items:center; gap:.55rem; font-size:12px; color:var(--t1); cursor:pointer; padding:.15rem .3rem; border-radius:4px; transition:.12s; }
.legend-item:hover { background:rgba(0,0,0,.04); }
.legend-item.active { color:var(--t0); font-weight:500; }
.legend-swatch { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* Patient grid */
.patients-section { min-width:0; }
.patient-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.patient-card {
  background:var(--card-bg); border-radius:var(--r2);
  box-shadow:var(--shadow);
  border-left:4px solid var(--br);
  padding:1rem 1rem 1rem .9rem;
  cursor:pointer; transition:box-shadow .18s, transform .12s;
}
.patient-card:hover { box-shadow:var(--shadow2); transform:translateY(-1px); }
.patient-card.tier-standard      { border-left-color:var(--blue); }
.patient-card.tier-post_surgery  { border-left-color:var(--amber); }
.patient-card.tier-high_fall_risk{ border-left-color:var(--red); }
.patient-card.dimmed { opacity:.4; }

.pc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.55rem; }
.pc-bed-id { font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--teal); }
.pc-stage-badge { font-size:10px; font-family:var(--f-mono); padding:.12rem .4rem; border-radius:4px; font-weight:500; }
.pc-stage-badge.s1 { color:var(--teal); background:var(--teal-bg); }
.pc-stage-badge.s2 { color:var(--blue); background:var(--blue-bg); }
.pc-stage-badge.s3 { color:var(--amber); background:var(--amber-bg); }
.pc-stage-badge.s4 { color:var(--red); background:var(--red-bg); }

.pc-name { font-family:var(--f-serif); font-size:15px; font-weight:400; color:var(--t0); line-height:1.2; margin-bottom:.25rem; }
.pc-meta { display:flex; gap:.55rem; font-size:11px; color:var(--t2); font-family:var(--f-mono); margin-bottom:.65rem; }
.pc-alert { font-size:11px; padding:.3rem .6rem; border-radius:5px; }
.pc-alert.calm  { background:var(--teal-bg); color:var(--teal2); }
.pc-alert.info  { background:var(--blue-bg); color:var(--blue); }
.pc-alert.warn  { background:var(--amber-bg); color:var(--amber); }
.pc-alert.danger{ background:var(--red-bg); color:var(--red); font-weight:500; }
.pc-alert.supp  { background:rgba(0,0,0,.04); color:var(--t2); font-style:italic; }

.pc-footer { display:flex; justify-content:space-between; align-items:center; padding-top:.5rem; border-top:.5px solid var(--br); }
.pc-dur  { font-family:var(--f-mono); font-size:11px; color:var(--t2); }
.view-link { font-size:11px; color:var(--teal); font-weight:500; }

/* ── Bed detail layout ───────────────────────────────────────────── */
.bed-body { display:grid; grid-template-columns:340px 1fr; gap:1.25rem; padding:1.25rem; flex:1; align-items:start; }
.bed-col-left, .bed-col-right { display:flex; flex-direction:column; gap:1.1rem; }

.card { background:var(--card-bg); border-radius:var(--r2); box-shadow:var(--shadow); padding:1.1rem; }
.card-hdr { margin-bottom:.9rem; }
.card-title { font-family:var(--f-serif); font-size:15px; font-weight:400; color:var(--t0); letter-spacing:-.01em; }
.card-sub { font-size:10px; color:var(--t2); display:block; margin-top:2px; }

/* Mat */
.mat-wrap { display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom:.9rem; }
.mat-axis-label { font-size:9px; font-family:var(--f-mono); color:var(--t2); text-transform:uppercase; letter-spacing:.08em; }
.mat-mid-row { display:flex; align-items:center; gap:.5rem; }
.mat-axis-label.side { writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.05em; }
.mat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:6px; background:var(--page); border:.5px solid var(--br); border-radius:var(--r); }
.mat-cell {
  width:42px; height:42px;
  border-radius:5px;
  background:rgba(0,0,0,.04);
  border:.5px solid var(--br);
  cursor:pointer;
  transition:background .2s, border-color .15s, transform .1s;
  position:relative;
}
.mat-cell:hover  { border-color:var(--teal); transform:scale(1.06); z-index:1; }
.mat-cell:active { transform:scale(.97); }
.mat-cell.manual { border-color:var(--teal); border-width:1.5px; }
.mat-cell.manual::after { content:'●'; position:absolute; top:1px; right:3px; font-size:7px; color:var(--teal); }
.mat-legend-bar { display:flex; align-items:center; gap:.5rem; font-size:10px; font-family:var(--f-mono); color:var(--t2); margin-bottom:.75rem; }
.ml-grad { flex:1; height:6px; border-radius:3px; background:linear-gradient(to right, rgba(5,150,105,.1), rgba(5,150,105,1)); }
.ml-manual { margin-left:auto; color:var(--teal); }
.sec-btn { padding:.4rem .85rem; background:var(--page); border:.5px solid var(--br2); border-radius:var(--r); font-size:12px; color:var(--t1); transition:.15s; }
.sec-btn:hover { background:#E5E7EB; color:var(--t0); }

/* Hardware controls */
.hw-controls { display:flex; flex-direction:column; gap:.75rem; }
.hw-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.hw-label { display:flex; flex-direction:column; gap:1px; }
.hw-name  { font-size:13px; font-weight:500; color:var(--t0); }
.hw-desc  { font-size:10px; color:var(--t2); }

/* Toggle switch */
.toggle-wrap { display:flex; gap:.4rem; }
.tog-btn { padding:.35rem .75rem; border-radius:5px; font-size:12px; font-family:var(--f-mono); font-weight:500; border:.5px solid var(--br2); background:var(--page); color:var(--t2); transition:.15s; }
.tog-btn.active-ok   { background:var(--teal-bg); color:var(--teal2); border-color:rgba(5,150,105,.35); }
.tog-btn.active-warn { background:var(--red-bg); color:var(--red); border-color:rgba(220,38,38,.35); }
.tog-btn.active-info { background:var(--blue-bg); color:var(--blue); border-color:rgba(37,99,235,.3); }

/* SOS button */
.sos-wrap { display:flex; gap:.55rem; align-items:center; }
.sos-btn  { padding:.45rem 1.1rem; background:var(--red); color:#fff; border-radius:var(--r); font-size:13px; font-weight:600; letter-spacing:.02em; transition:.15s; box-shadow:0 2px 6px rgba(220,38,38,.3); }
.sos-btn:hover   { background:#B91C1C; box-shadow:0 3px 10px rgba(220,38,38,.4); }
.sos-btn.active  { animation:sos-pulse 1.2s infinite; }
.sos-clear-btn { padding:.4rem .8rem; background:var(--red-bg); color:var(--red); border:.5px solid rgba(220,38,38,.3); border-radius:var(--r); font-size:12px; font-weight:500; }
.sos-clear-btn:hover { background:rgba(220,38,38,.15); }

.nurse-call-btn { width:100%; padding:.5rem; border-radius:var(--r); font-size:13px; font-weight:500; border:.5px solid var(--br2); background:var(--page); color:var(--t1); transition:.2s; text-align:center; }
.nurse-call-btn.active { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 0 0 3px rgba(5,150,105,.2); animation:nurse-glow 2s ease-in-out infinite; }
.nurse-call-btn:hover:not(.active) { background:#E5E7EB; color:var(--t0); }

/* ── Clinical status ─────────────────────────────────────────────── */
.clinical-body { display:flex; flex-direction:column; gap:.8rem; }
.clin-section-title { font-size:10px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--t2); margin-bottom:.4rem; }
.clin-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.clin-label { font-size:12px; color:var(--t1); }
.clin-val   { font-family:var(--f-mono); font-size:13px; font-weight:500; color:var(--t0); }

/* Exit ladder */
.ladder { display:flex; align-items:center; }
.l-node { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.l-pip  { width:11px; height:11px; border-radius:50%; border:1.5px solid #D1D5DB; background:#F3F4F6; transition:.3s; }
.l-lbl  { font-size:9px; font-family:var(--f-mono); color:var(--t2); }
.l-seg  { flex:1; height:1px; background:var(--br2); margin-bottom:14px; max-width:22px; }
.l-node.on-s1 .l-pip { background:var(--teal); border-color:var(--teal); }
.l-node.on-s2 .l-pip { background:var(--blue); border-color:var(--blue); }
.l-node.on-s3 .l-pip { background:var(--amber); border-color:var(--amber); }
.l-node.on-s4 .l-pip { background:var(--red); border-color:var(--red); box-shadow:0 0 7px rgba(220,38,38,.5); }
.l-node.on-s1 .l-lbl { color:var(--teal); }
.l-node.on-s2 .l-lbl { color:var(--blue); }
.l-node.on-s3 .l-lbl { color:var(--amber); }
.l-node.on-s4 .l-lbl { color:var(--red); }

/* Duration ring */
.dur-row { display:flex; align-items:center; gap:.85rem; }
.dur-ring { position:relative; flex-shrink:0; }
.dur-ring svg { display:block; transform:rotate(-90deg); }
.dur-track { fill:none; stroke:#E5E7EB; stroke-width:3; }
.dur-fill  { fill:none; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .5s, stroke .4s; }
.dur-pct   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:10px; color:var(--t1); }
.dur-info  { flex:1; }
.dur-time  { font-family:var(--f-mono); font-size:18px; font-weight:500; color:var(--t0); line-height:1; }
.dur-sub   { font-size:10px; color:var(--t2); margin-top:2px; }
.dur-hold  { font-size:10px; color:var(--t1); margin-top:2px; }

/* Sparkline */
.spark-row { display:flex; align-items:center; gap:.6rem; }
.spark-lbl { font-size:12px; color:var(--t1); }
.spark-svg { flex:1; display:block; }
.spark-area { fill:none; }
.spark-line { fill:none; stroke:var(--teal); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.spark-num  { font-family:var(--f-mono); font-size:13px; font-weight:500; color:var(--t0); min-width:2.5ch; text-align:right; }

/* Alarm bar */
.alarm-bar { padding:.5rem .75rem; border-radius:var(--r); font-size:12px; border:.5px solid transparent; display:flex; align-items:center; justify-content:space-between; margin-top:.3rem; }
.alarm-bar.calm   { background:var(--teal-bg); border-color:rgba(5,150,105,.2); color:var(--teal2); }
.alarm-bar.info   { background:var(--blue-bg); border-color:rgba(37,99,235,.22); color:var(--blue); }
.alarm-bar.warn   { background:var(--amber-bg); border-color:rgba(217,119,6,.25); color:var(--amber); font-weight:500; }
.alarm-bar.danger { background:var(--red-bg); border-color:rgba(220,38,38,.3); color:var(--red); font-weight:600; }
.alarm-bar.supp   { background:rgba(0,0,0,.04); border-color:var(--br); color:var(--t2); font-style:italic; }
.relay-tag { font-size:10px; font-family:var(--f-mono); padding:.12rem .45rem; border-radius:3px; margin-left:.5rem; flex-shrink:0; font-weight:600; }
.relay-tag.armed { background:#E5E7EB; color:var(--t1); }
.relay-tag.fired { background:var(--red); color:#fff; animation:blink .85s infinite; }

/* ── Audit log ───────────────────────────────────────────────────── */
.audit-list { max-height:260px; overflow-y:auto; }
.audit-list::-webkit-scrollbar { width:3px; }
.audit-list::-webkit-scrollbar-thumb { background:var(--br2); border-radius:2px; }
.audit-row { display:grid; grid-template-columns:78px 1fr 70px; gap:.5rem; padding:.38rem .5rem; border-bottom:.5px solid var(--br); font-size:11px; align-items:baseline; animation:slide-in .2s ease; }
.audit-row:last-child { border-bottom:none; }
.au-ts  { font-family:var(--f-mono); font-size:10px; color:var(--t2); }
.au-det { color:var(--t1); }
.au-act { font-family:var(--f-mono); font-size:10px; font-weight:500; padding:.1rem .35rem; border-radius:3px; text-align:center; }
.au-act.brake    { background:var(--red-bg); color:var(--red); }
.au-act.nurse    { background:var(--teal-bg); color:var(--teal2); }
.au-act.mat      { background:var(--blue-bg); color:var(--blue); }
.au-act.sos      { background:var(--red-bg); color:var(--red); font-weight:700; }
.au-act.scenario { background:rgba(0,0,0,.05); color:var(--t1); }
.au-act.other    { background:rgba(0,0,0,.05); color:var(--t2); }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes sos-pulse  { 0%,100%{box-shadow:0 2px 6px rgba(220,38,38,.3)} 50%{box-shadow:0 0 0 6px rgba(220,38,38,.25),0 2px 10px rgba(220,38,38,.5)} }
@keyframes nurse-glow { 0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.2)} 50%{box-shadow:0 0 0 5px rgba(5,150,105,.35)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes slide-in   { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════════════════════
   Validation pipeline & sensor health additions
   ═══════════════════════════════════════════════════════════════ */

/* Calibration progress bar */
.cal-bar-wrap { margin-bottom:.65rem; }
.cal-label { font-size:10px; font-family:var(--f-mono); color:var(--t2); margin-bottom:3px; display:flex; justify-content:space-between; }
.cal-bar { height:4px; background:#E5E7EB; border-radius:2px; overflow:hidden; }
.cal-fill { height:100%; background:var(--teal); transition:width .4s; border-radius:2px; }

/* Evidence grid — 2×3 */
.ev-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:.75rem; }
.ev-item { display:flex; align-items:center; gap:.4rem; padding:.3rem .5rem; border-radius:5px; border:.5px solid transparent; font-size:11px; }
.ev-item.pass { background:rgba(5,150,105,.07); border-color:rgba(5,150,105,.2); color:var(--teal2); }
.ev-item.fail { background:rgba(156,163,175,.08); border-color:var(--br); color:var(--t2); }
.ev-item.na   { background:rgba(156,163,175,.05); border-color:var(--br); color:var(--t2); font-style:italic; }
.ev-icon { width:14px; height:14px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.ev-item.pass .ev-icon { background:var(--teal); color:#fff; }
.ev-item.fail .ev-icon { background:#D1D5DB; color:#6B7280; }
.ev-item.na   .ev-icon { background:#E5E7EB; color:#9CA3AF; }

/* Gate rows */
.gate-list { display:flex; flex-direction:column; gap:3px; margin-bottom:.75rem; }
.gate-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.3rem .5rem; border-radius:5px; font-size:11px; }
.gate-row.gate-ok   { background:rgba(5,150,105,.06); color:var(--teal2); }
.gate-row.gate-fail { background:rgba(220,38,38,.07); color:var(--red); }
.gate-row.gate-warn { background:rgba(217,119,6,.07); color:var(--amber); }
.gate-name  { font-family:var(--f-mono); font-size:10px; }
.gate-val   { font-family:var(--f-mono); font-size:10px; font-weight:500; }

/* Confirmation window row */
.conf-row { display:flex; justify-content:space-between; font-size:11px; padding:.3rem .5rem; background:var(--page); border-radius:5px; }
.conf-label { color:var(--t2); }
.conf-val   { font-family:var(--f-mono); font-weight:600; color:var(--t0); }

/* Overall alarm eligible indicator */
.alarm-eligible-badge { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.4rem; border-radius:6px; font-size:12px; font-weight:600; margin-top:.5rem; }
.alarm-eligible-badge.eligible     { background:var(--red-bg); color:var(--red); border:.5px solid rgba(220,38,38,.3); }
.alarm-eligible-badge.not-eligible { background:var(--teal-bg); color:var(--teal2); border:.5px solid rgba(5,150,105,.25); }
.alarm-eligible-badge.care         { background:var(--amber-bg); color:var(--amber); border:.5px solid rgba(217,119,6,.3); }

/* Mat cell sensor health states */
.mat-cell.fault-zero { background:rgba(156,163,175,.2) !important; border-color:#D1D5DB !important; }
.mat-cell.fault-zero::before { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#9CA3AF; font-weight:700; }
.mat-cell.fault-one  { border-color:var(--amber) !important; border-width:1.5px !important; }
.mat-cell.fault-one::before { content:'!'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--amber); font-weight:700; }

/* Care mode section in hardware controls */
.care-mode-section { flex-direction:column; align-items:stretch; gap:.5rem; }
.care-input-row { display:flex; gap:.4rem; }
.nurse-id-input { flex:1; padding:.32rem .6rem; border:.5px solid var(--br2); border-radius:var(--r); font-family:var(--f-mono); font-size:12px; background:var(--page); color:var(--t0); }
.nurse-id-input:focus { outline:none; border-color:var(--teal); }
.care-active-bar { display:flex; align-items:center; justify-content:space-between; padding:.4rem .6rem; background:var(--amber-bg); border:.5px solid rgba(217,119,6,.3); border-radius:var(--r); font-size:11px; color:var(--amber); }
.care-deact-btn { font-size:11px; color:var(--amber); text-decoration:underline; cursor:pointer; }

/* ── Demo presets panel ───────────────────────────────────────────── */
.presets-card { background:var(--card-bg); border-radius:var(--r2); box-shadow:var(--shadow); padding:1rem; }
.presets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-top:.7rem; }
.preset-btn {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.55rem .3rem .45rem;
  background:var(--page); border:.5px solid var(--br2);
  border-radius:var(--r); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
.preset-btn:hover { background:#fff; box-shadow:var(--shadow); border-color:var(--teal); }
.preset-btn.active { background:#fff; border-color:var(--teal); box-shadow:0 0 0 2px rgba(5,150,105,.18); }
.preset-btn canvas { border-radius:3px; border:.5px solid var(--br); display:block; }
.preset-btn .preset-label { font-size:10px; font-family:var(--f-mono); color:var(--t1); letter-spacing:.01em; text-align:center; line-height:1.3; }
.preset-btn.alarm .preset-label { color:var(--red); }
.preset-btn.warn  .preset-label { color:var(--amber); }
.presets-hint { font-size:10px; color:var(--t2); margin-top:.55rem; }

/* ── Bed exit notification banner ─────────────────────────────────────── */
.exit-alert-banner {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:#DC2626; color:#fff;
  box-shadow:0 4px 24px rgba(220,38,38,.5);
  animation:exit-flash 1.2s ease-in-out infinite;
}
.exit-alert-inner {
  max-width:960px; margin:0 auto;
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1.2rem;
}
.exit-alert-icon { font-size:24px; flex-shrink:0; }
.exit-alert-text { flex:1; }
.exit-alert-text strong { font-size:15px; letter-spacing:.03em; }
.exit-alert-sub { font-size:11px; margin-top:3px; opacity:.85; }
.exit-alert-dismiss {
  padding:.45rem 1.1rem; border-radius:6px;
  border:1.5px solid rgba(255,255,255,.6);
  background:transparent; color:#fff;
  font-size:12px; font-weight:600;
  cursor:pointer; flex-shrink:0;
  transition: background .15s;
}
.exit-alert-dismiss:hover { background:rgba(255,255,255,.2); }
@keyframes exit-flash { 0%,100%{opacity:1} 50%{opacity:.82} }