/* ===== MediCare HIS — Blue on White theme ===== */
:root {
 --blue-900: #0a3d8f;
 --blue-700: #1259d4;
 --blue-600: #1f6feb;
 --blue-500: #2f86ff;
 --blue-100: #e6efff;
 --blue-50: #f4f8ff;
 --ink: #0e1a2b;
 --muted: #5b6b80;
 --line: #d6e1f2;
 --bg: #ffffff;
 --soft: #f7faff;
 --ok: #1c9b5b;
 --warn: #d97706;
 --err: #c0392b;
 --red: #d62828;
 --orange: #f59e0b;
 --yellow: #facc15;
 --green: #22c55e;
 --shadow: 0 4px 16px rgba(15, 60, 140, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
 background: var(--soft); color: var(--ink); -webkit-font-smoothing: antialiased;
 /* Bumped from 14 → 15.5px for clinical floor readability */
 font-size: 15.5px; line-height: 1.5; }
body { min-height: 100vh; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea {
 font-family: inherit; font-size: 15px; padding: 10px 12px;
 border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus {
 outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47,134,255,0.15);
}
label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
 display: block; margin: 12px 0 6px; }

/* ===== Buttons ===== */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
 border-radius: 8px; font-weight: 600; padding: 10px 16px; font-size: 14px; border: 0; transition: 0.15s;
}
.btn-primary { background: var(--blue-700); color: white; }
.btn-primary:hover { background: var(--blue-900); }
.btn-secondary { background: var(--blue-100); color: var(--blue-900); }
.btn-secondary:hover { background: #d3e3ff; }
.btn-ghost { background: transparent; color: var(--blue-700); }
.btn-ghost:hover { background: var(--blue-100); }
.btn-danger { background: var(--err); color: white; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* ===== Login screen ===== */
.login-screen {
 min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
 background: radial-gradient(circle at 20% 0%, #d6e6ff 0%, #ffffff 60%);
}
.login-card { width: 100%; max-width: 440px; background: white; border-radius: 14px; padding: 36px;
 box-shadow: var(--shadow); border: 1px solid var(--line); }
.logo { text-align: center; margin-bottom: 24px; }
/* Logo placeholder — uses a soft gradient + clean white medical cross drawn
 purely with CSS background, so the "+" character isn't rendered as a
 thin font glyph. Reads as a deliberate brand mark, not a placeholder. */
.logo-icon {
 width: 64px; height: 64px; border-radius: 16px;
 background:
 /* horizontal arm of cross */
 linear-gradient(white, white) center/52% 14% no-repeat,
 /* vertical arm of cross */
 linear-gradient(white, white) center/14% 52% no-repeat,
 /* base gradient */
 linear-gradient(135deg, #1259d4 0%, #0a3d8f 100%);
 margin-bottom: 12px;
 font-size: 0; /* hide any "+" text content */
 box-shadow: 0 8px 22px rgba(18,89,212,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.logo-icon.small {
 width: 38px; height: 38px; border-radius: 10px; margin: 0;
 background:
 linear-gradient(white, white) center/52% 14% no-repeat,
 linear-gradient(white, white) center/14% 52% no-repeat,
 linear-gradient(135deg, #1259d4 0%, #0a3d8f 100%);
 box-shadow: 0 3px 10px rgba(18,89,212,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.logo h1 { margin: 0; color: var(--blue-900); font-size: 24px; }
.logo p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.login-card .btn-primary { width: 100%; margin-top: 18px; padding: 12px; }
.login-error { color: var(--err); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* Passkey sign-in section — clean, professional alternative to the password
 path. Shown only when the browser supports WebAuthn. */
.passkey-section { margin-top: 18px; }
.passkey-divider {
 position: relative; text-align: center; margin: 18px 0 14px;
 color: var(--muted); font-size: 11px; letter-spacing: 1.5px;
 text-transform: uppercase; font-weight: 600;
}
.passkey-divider::before, .passkey-divider::after {
 content: ''; position: absolute; top: 50%;
 width: calc(50% - 24px); height: 1px;
 background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}
.passkey-divider::before { left: 0; }
.passkey-divider::after { right: 0; background: linear-gradient(to left, transparent, #e5e7eb, transparent); }
.passkey-divider span {
 background: white; padding: 0 12px; position: relative; z-index: 1;
}
.btn-passkey {
 width: 100%; padding: 12px 16px;
 display: flex; align-items: center; justify-content: center; gap: 10px;
 background: white; color: var(--blue-900);
 border: 1.5px solid var(--blue-100); border-radius: 10px;
 font-size: 15px; font-weight: 600; cursor: pointer;
 transition: all 0.15s ease;
 box-shadow: 0 1px 2px rgba(18, 89, 212, 0.06);
}
.btn-passkey:hover {
 background: var(--blue-50); border-color: var(--blue-700);
 box-shadow: 0 4px 12px rgba(18, 89, 212, 0.12);
 transform: translateY(-1px);
}
.btn-passkey:active { transform: translateY(0); }
.btn-passkey:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-passkey svg { color: var(--blue-700); flex-shrink: 0; }
.passkey-hint {
 font-size: 12px; color: var(--muted);
 text-align: center; margin-top: 8px;
}
.login-hint { font-size: 12px; color: var(--muted); margin-top: 18px; padding: 12px; background: var(--blue-50);
 border-radius: 8px; border: 1px dashed var(--blue-100); }
.login-hint code { background: white; padding: 1px 5px; border-radius: 4px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.demo-grid span { background: white; padding: 3px 6px; border-radius: 4px; font-family: monospace; text-align: center; }

/* ===== App shell =====
 *
 * `height: 100vh` (not min-height) pins the shell to the viewport so the
 * sidebar can be a sticky 100vh column with its own internal scroll.
 * Without this, long pages grew the grid past the viewport and the
 * sidebar scrolled with the body — losing the nav as you read down a
 * busy ward dashboard. .main-area now owns the page-scroll axis. */
.app-shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden; }
.sidebar { background: var(--blue-900); color: white; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.sidebar-header { display: flex; gap: 10px; align-items: center; padding: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Larger fonts on the sidebar — clinical staff routinely run at arm's
 length on 13-15" laptops, so 14 px nav items felt cramped. */
.sidebar-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.sidebar-header p { margin: 3px 0 0; font-size: 13px; color: rgba(255,255,255,0.7); }
/* `min-height: 0` is the magic that makes overflow-y:auto actually
   scroll when this is a flex child. Without it, browsers default the
   flex child's min-height to its content size, which silently disables
   the scrollbar — surfaced by the 2026-05-08 sidebar regression. */
#sidebarNav { flex: 1 1 auto; min-height: 0; padding: 12px 0; overflow-y: auto; }
.nav-item {
 display: flex; align-items: center; gap: 11px; padding: 12px 18px; color: rgba(255,255,255,0.92);
 cursor: pointer; font-size: 15.5px; border-left: 3px solid transparent;
 letter-spacing: -0.005em;
}
.nav-item:hover { background: rgba(255,255,255,0.08); }
.nav-item.active { background: rgba(255,255,255,0.14); border-left-color: var(--blue-500); color: white; font-weight: 700; }
.nav-item .nav-label { flex: 1; }
.nav-item .badge { margin-left: auto; background: var(--blue-500); color: white; font-size: 12px;
 font-weight: 700; padding: 3px 8px; border-radius: 11px; min-width: 22px; text-align: center; }
.nav-item .badge.hidden { display: none; }
/* Inline SVG icon next to each nav label. Width is fixed so labels in
   a column always start at the same x — even on rows where PAGE_ICON
   has no mapping (the renderer drops in an empty 14px spacer). */
.nav-item .nav-icon {
 display: inline-flex; align-items: center; justify-content: center;
 width: 18px; height: 18px; flex: 0 0 18px;
 color: rgba(255,255,255,0.78);
}
.nav-item .nav-icon svg { display: block; }
.nav-item:hover .nav-icon { color: white; }
.nav-item.active .nav-icon { color: var(--blue-300, #93c5fd); }
.nav-group-head .nav-group-icon { transition: transform .15s ease; }
.nav-group.open .nav-group-head .nav-group-icon { transform: rotate(90deg); }
.nav-group .nav-group-head .badge { margin-right: 4px; }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-footer .btn-ghost { color: white; width: 100%; }
.sidebar-footer .btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* Main area owns the page scroll axis now that .app-shell pins to the
 * viewport — keeps the sidebar visible as the user scrolls a long
 * dashboard. */
.main-area { display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
.top-bar {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 28px; background: white; border-bottom: 1px solid var(--line);
}
.top-bar h1 { margin: 0; font-size: 20px; color: var(--blue-900); }
/* Universal "← Dashboard" chip — interactive feedback so it doesn't
 * fade into the top-bar as decorative chrome. */
#topBackToDash:hover { background: #eff6ff; border-color: var(--blue-500, #3b82f6); color: var(--blue-700, #1d4ed8); }
#topBackToDash:active { transform: translateY(1px); }
.hospital-name-top {
 font-size: 12px; color: var(--muted); letter-spacing: 0.5px;
 text-transform: uppercase; font-weight: 600; margin-bottom: 2px;
}
.top-bar-right { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.dept-badge { background: var(--blue-100); color: var(--blue-900); padding: 5px 12px; border-radius: 20px; font-weight: 600; font-size: 12px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 0 3px transparent; transition: 0.2s; }
.live-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }

/* ============================================================
   UI Zoom — scales the whole app proportionally.
   The actual `zoom` value is set inline on <body> by app.js
   setupZoom() (CSS `zoom` doesn't reliably accept var() — it's
   non-standard and parses values strictly across browsers, so
   the cleanest path is `body.style.zoom = '1.25'` from JS).
   Works in Chrome / Safari / Edge / Firefox 126+; older Firefox
   ignores the property, so the app renders at default scale.
   ============================================================ */
.zoom-ctl {
  display: inline-flex; align-items: center; gap: 0;
  background: #fff;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  height: 30px;
  padding: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.zoom-ctl:hover { border-color: #94a3b8; }
.zoom-ctl:focus-within {
  border-color: var(--blue-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.zoom-ctl .zoom-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 5px;
  color: #475569; cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.zoom-ctl .zoom-btn:hover { background: #f1f5f9; color: #0f172a; }
.zoom-ctl .zoom-btn:active { background: #e2e8f0; }
.zoom-ctl .zoom-btn svg { display: block; }
.zoom-ctl .zoom-field {
  display: inline-flex; align-items: baseline;
  padding: 0 4px;
  user-select: none;
  min-width: 44px; justify-content: flex-end;
}
.zoom-ctl .zoom-field input {
  width: 28px; border: 0; outline: 0; background: transparent;
  font: 600 12px/1 inherit; color: #0f172a;
  text-align: right; padding: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.zoom-ctl .zoom-field input:focus { color: var(--blue-700, #1e40af); }
.zoom-ctl .zoom-field input::-webkit-outer-spin-button,
.zoom-ctl .zoom-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zoom-ctl .zoom-field .zoom-pct { font: 600 11px/1 inherit; color: #64748b; margin-left: 1px; }
@media (max-width: 900px) { .zoom-ctl { display: none; } }

.page-content { flex: 1; padding: 24px 28px; max-width: 100%; overflow-x: hidden; }

/* ===== Cards / tables / chips ===== */
.card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card h2, .card h3 { margin: 0; color: var(--blue-900); font-size: 17.5px; }
.card h2 { font-size: 19px; }
.muted { color: var(--muted); font-size: 14px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
 .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
 .app-shell { grid-template-columns: 1fr; }
 .sidebar { display: none; }
 /* Tighter padding on mobile so content uses every pixel */
 .page-content { padding: 12px 14px; }
 .card { padding: 14px; }
 /* Tables become scrollable horizontally rather than wrapping awkwardly */
 .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
 .card table th, .card table td { white-space: nowrap; }
 /* Form rows stack on narrow screens */
 .form-row, .form-row-3, .form-grid { grid-template-columns: 1fr; gap: 8px; }
 /* Modals fill the screen on phones */
 .modal-card, .modal-body { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
 /* Top-bar trims down */
 .top-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
 .top-bar h1 { font-size: 16px; }
 .dept-badge { font-size: 11px; padding: 3px 8px; }
 #clock { display: none; }
 /* Stats: keep 2-up so the most-important numbers stay above the fold */
 .grid.grid-4 { grid-template-columns: 1fr 1fr; }
 /* Buttons in card-headers wrap rather than overflow */
 .card-header { flex-wrap: wrap; gap: 6px; }
 .card-header h2, .card-header h3 { font-size: 16px; }
 /* Patient banner photo a touch smaller */
 .photo { width: 80px !important; height: 80px !important; font-size: 22px !important; }
 /* Login screen tightens */
 .login-card { padding: 22px 18px; max-width: none; margin: 12px; }
 /* Wider tap targets on the Cell-style action buttons */
 .btn-sm { padding: 8px 12px; font-size: 13px; }
}
/* Hamburger toggle for the sidebar on mobile — added in app.js */
@media (max-width: 700px) {
 .sidebar.mobile-open { display: flex !important; position: fixed; inset: 0 30% 0 0; z-index: 60; box-shadow: 4px 0 18px rgba(0,0,0,0.25); }
 .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; }
 .mobile-nav-toggle { display: inline-flex !important; }
}
.mobile-nav-toggle, .mobile-menu-btn {
 display: none; align-items: center; justify-content: center;
 width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line);
 background: var(--blue-50); color: var(--blue-900); font-size: 18px; cursor: pointer;
}
@media (max-width: 700px) {
 .mobile-menu-btn { display: inline-flex; }
}

.stat { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.stat .num { font-size: 28px; font-weight: 700; color: var(--blue-900); margin: 4px 0; }
.stat .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 12px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
th { background: var(--blue-50); color: var(--blue-900); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
tr:hover td { background: var(--blue-50); }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.chip-blue { background: var(--blue-100); color: var(--blue-900); }
.chip-green { background: #dcfce7; color: #166534; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-red { background: #fee2e2; color: #991b1b; }
.chip-gray { background: #e2e8f0; color: #334155; }

/* Triage */
.triage-red { background: var(--red); color: white; }
.triage-orange { background: var(--orange); color: white; }
.triage-yellow { background: var(--yellow); color: #4a2f00; }
.triage-green { background: var(--green); color: white; }
.triage-blue { background: var(--blue-500); color: white; }

/* Patient photo / avatar — soft gradient placeholder reads as professional
 rather than flat blue. Real uploaded photos still display via img.photo. */
.photo, .photo-thumb {
 border-radius: 12px;
 border: 1px solid #dbe7ff;
 background: linear-gradient(135deg, #f0f7ff 0%, #dbe7ff 100%);
 display: inline-flex; align-items: center; justify-content: center;
 color: #1e40af; font-weight: 600; letter-spacing: 0.5px;
 overflow: hidden; object-fit: cover;
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(15, 60, 140, 0.06);
}
.photo {
 width: 110px; height: 110px; font-size: 30px;
 border-radius: 14px;
}
.photo-thumb {
 width: 38px; height: 38px; font-size: 13px;
 border-radius: 10px;
}
img.photo, img.photo-thumb {
 padding: 0;
 background: white; /* override gradient when actual photo loaded */
}

/* Forms layout */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Modal */
#modalRoot:empty { display: none; }
.modal-backdrop {
 position: fixed; inset: 0; background: rgba(10,30,60,0.45); z-index: 99;
 display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
 background: white; border-radius: 14px; max-width: 720px; width: 100%; max-height: 90vh;
 overflow-y: auto; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { margin: 0; color: var(--blue-900); }
.modal-close { background: transparent; border: 0; font-size: 22px; color: var(--muted); cursor: pointer; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Toast */
#toastRoot { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
 background: white; border-left: 4px solid var(--blue-700); padding: 12px 16px; border-radius: 8px;
 box-shadow: var(--shadow); font-size: 13px; min-width: 240px; animation: slideIn 0.2s;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast.warn { border-left-color: var(--warn); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Misc */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select { max-width: 280px; }
/* Empty states — softer, with subtle icon-style dot rather than just plain
 text, to read as an intentional placeholder rather than a missing value. */
.empty {
 padding: 36px 24px; text-align: center; color: var(--muted); font-size: 14px;
 background: #fafbfc; border-radius: 8px; border: 1px dashed #e2e8f0;
 line-height: 1.5;
}
.empty::before {
 content: ''; display: block; width: 8px; height: 8px;
 background: #cbd5e1; border-radius: 50%; margin: 0 auto 12px;
 box-shadow: 0 0 0 4px #f1f5f9;
}
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 14px; }
.kv b { color: var(--muted); font-weight: 600; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.checkbox-grid label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
 border-radius: 8px; cursor: pointer; text-transform: none; font-weight: 500; color: var(--ink); margin: 0; font-size: 13px; }
.checkbox-grid input { width: auto; }
.section-title { font-size: 13px; font-weight: 700; color: var(--blue-900); text-transform: uppercase; letter-spacing: 0.5px;
 margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--blue-100); }

/* Global search in top bar */
.global-search { position: relative; }
.global-search input { width: 280px; padding: 7px 10px; font-size: 13px; }
.global-results {
 position: absolute; top: 36px; right: 0; width: 360px; max-height: 380px;
 overflow-y: auto; background: white; border: 1px solid var(--line); border-radius: 10px;
 box-shadow: 0 12px 32px rgba(15,60,140,0.15); z-index: 30;
}
.global-results .row {
 display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.global-results .row:last-child { border-bottom: 0; }
.global-results .row:hover { background: var(--blue-50); }
.global-results .row .meta { flex: 1; font-size: 13px; }
.global-results .row .meta b { display: block; }
.global-results .row .meta span { color: var(--muted); font-size: 11px; }

/* Notification bell — clean SVG icon, right-aligned, professional look */
.bell-btn {
 position: relative; background: transparent; border: 0;
 display: inline-flex; align-items: center; justify-content: center;
 width: 36px; height: 36px; border-radius: 8px;
 cursor: pointer; padding: 0; color: var(--muted);
 transition: background 0.15s ease, color 0.15s ease;
}
.bell-btn:hover { background: var(--blue-50); color: var(--blue-700); }
.bell-btn:active { transform: scale(0.96); }
.bell-btn svg { display: block; }
.bell-count {
 position: absolute; top: 4px; right: 3px;
 background: #dc2626; color: white;
 border: 2px solid white;
 border-radius: 999px;
 font-size: 10px; font-weight: 700;
 padding: 0 5px; min-width: 18px; height: 16px;
 display: inline-flex; align-items: center; justify-content: center;
 box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
 animation: bell-pulse 2s ease-in-out infinite;
}
@keyframes bell-pulse {
 0%, 100% { box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35); }
 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
}

/* AI chat — Claude-Chat-style thread, composer, and typing-dot animation. */
.ai-thread::-webkit-scrollbar { width: 8px; }
.ai-thread::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.ai-chat-card #aiPrompt:focus { border-color: #1259d4; box-shadow: 0 0 0 3px rgba(18,89,212,0.10); }
.ai-typing {
 display: inline-block; animation: ai-typing-blink 1.4s infinite;
}
@keyframes ai-typing-blink {
 0%, 60%, 100% { opacity: 0.25; }
 30% { opacity: 1; }
}
.notif-panel {
 position: absolute; top: 50px; right: 16px; width: 380px; max-height: 70vh; overflow-y: auto;
 background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,60,140,0.18); z-index: 40;
}
.notif-panel .head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.notif-panel .item { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif-panel .item:hover { background: var(--blue-50); }
.notif-panel .item.unread { background: var(--blue-50); }
.notif-panel .item.critical { border-left: 3px solid var(--red); }
.notif-panel .item.warn { border-left: 3px solid var(--warn); }
.notif-panel .item .ttl { font-weight: 600; }
.notif-panel .item .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* User pill + dropdown in top bar */
.user-menu { position: relative; }
.user-pill {
 display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
 background: var(--blue-50); border: 1px solid var(--line); border-radius: 999px;
 cursor: pointer; font-size: 13px; color: var(--blue-900);
}
.user-pill:hover { background: var(--blue-100); }
.user-pill #userInitials {
 display: inline-flex; align-items: center; justify-content: center;
 width: 28px; height: 28px; background: var(--blue-700); color: white;
 border-radius: 50%; font-weight: 700; font-size: 12px;
}
.user-menu-panel {
 position: absolute; top: 44px; right: 0; min-width: 220px;
 background: white; border: 1px solid var(--line); border-radius: 10px;
 box-shadow: 0 12px 32px rgba(15,60,140,0.18); z-index: 50; overflow: hidden;
}
.user-menu-head { padding: 12px 14px; background: var(--blue-50); border-bottom: 1px solid var(--line); }
.user-menu-head div:first-child { font-weight: 700; color: var(--blue-900); }
.user-menu-item {
 display: block; width: 100%; text-align: left; padding: 10px 14px;
 background: transparent; border: 0; cursor: pointer; font-size: 13px; color: var(--ink);
}
.user-menu-item:hover { background: var(--blue-50); }
.user-menu-item.danger { color: var(--err); border-top: 1px solid var(--line); }
.user-menu-item.danger:hover { background: #fee2e2; }

@media (max-width: 700px) {
 .global-search { display: none; }
 .top-bar h1 { font-size: 16px; }
}

/* ===== ED Zones board ===== */
.zone-board {
 display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 12px;
}
@media (max-width: 1300px) { .zone-board { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px) { .zone-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .zone-board { grid-template-columns: 1fr; } }

.zone {
 border-radius: 12px; background: white; border: 1px solid var(--line); overflow: hidden;
 display: flex; flex-direction: column; min-height: 360px; box-shadow: var(--shadow);
}
.zone-head {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 12px; color: white; font-weight: 700;
}
.zone-title { font-size: 13px; letter-spacing: 0.4px; }
.zone-hint { font-size: 11px; font-weight: 500; opacity: 0.92; margin-top: 2px; }
.zone-count {
 background: rgba(255,255,255,0.25); padding: 4px 10px; border-radius: 999px;
 font-size: 13px; min-width: 28px; text-align: center;
}
.zone-body { padding: 10px; flex: 1; overflow-y: auto; max-height: 70vh; }
.zone-empty { text-align: center; padding: 30px 12px; color: var(--muted); font-size: 12px; }

.zone-red .zone-head { background: var(--red); }
.zone-orange .zone-head { background: var(--orange); }
.zone-yellow .zone-head { background: var(--yellow); color: #4a2f00; }
.zone-green .zone-head { background: var(--green); }
.zone-blue .zone-head { background: var(--blue-500); }

.zone-yellow .zone-count { background: rgba(0,0,0,0.12); }

.zone-card {
 background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--blue-500);
 border-radius: 8px; padding: 10px; margin-bottom: 10px;
}
.zone-red .zone-card { border-left-color: var(--red); }
.zone-orange .zone-card { border-left-color: var(--orange); }
.zone-yellow .zone-card { border-left-color: var(--yellow); }
.zone-green .zone-card { border-left-color: var(--green); }
.zone-blue .zone-card { border-left-color: var(--blue-500); }
.zc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.zc-name { font-weight: 700; color: var(--blue-900); font-size: 14px; }
.zc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.zc-body { font-size: 13px; margin: 6px 0 4px; }
.zc-vitals { font-size: 11px; color: var(--muted); padding: 4px 8px; background: white; border-radius: 4px; margin: 6px 0; }
.zc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 6px; }
.zc-history { font-size: 10px; color: var(--muted); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* Transfer dialog zone picker */
.zone-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) { .zone-picker { grid-template-columns: 1fr; } }
.zone-opt {
 display: flex; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer;
 border: 2px solid transparent; background: var(--soft); align-items: center;
 text-transform: none; font-weight: 500; color: var(--ink); margin: 0;
}
.zone-opt input { width: auto; }
.zone-opt:hover { background: var(--blue-50); }
.zone-opt.disabled { opacity: 0.4; cursor: not-allowed; }
.zone-opt-title { font-weight: 700; color: var(--blue-900); font-size: 13px; }
.zone-opt-hint { font-size: 11px; color: var(--muted); }
.zone-opt.zone-red { border-left: 5px solid var(--red); }
.zone-opt.zone-orange { border-left: 5px solid var(--orange); }
.zone-opt.zone-yellow { border-left: 5px solid var(--yellow); }
.zone-opt.zone-green { border-left: 5px solid var(--green); }
.zone-opt.zone-blue { border-left: 5px solid var(--blue-500); }

/* ===== Nested sidebar nav ===== */
.nav-group .nav-group-head { font-weight: 700; font-size: 15.5px; }
.nav-group .nav-child .nav-item { font-size: 14.5px; padding-left: 32px; }
.nav-group .nav-caret { margin-left: auto; transition: transform .15s; opacity: .7; }
.nav-group .nav-group-body { display: none; padding-bottom: 4px; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group.open .nav-group-body { display: block; }
.nav-item.nav-indent { padding-left: 36px; font-size: 13px; }
.nav-item.nav-color-red { border-left-color: var(--red); }
.nav-item.nav-color-orange { border-left-color: var(--orange); }
.nav-item.nav-color-yellow { border-left-color: var(--yellow); }
.nav-item.nav-color-green { border-left-color: var(--green); }
.nav-item.nav-color-blue { border-left-color: var(--blue-500); }
.nav-item.nav-color-pink { border-left-color: #ec4899; }
.nav-item.nav-color-indigo { border-left-color: #4338ca; }
.nav-item.nav-color-red.active { border-left-color: var(--red); }
.nav-item.nav-color-orange.active { border-left-color: var(--orange); }
.nav-item.nav-color-yellow.active { border-left-color: var(--yellow); color: white; }
.nav-item.nav-color-green.active { border-left-color: var(--green); }

/* ===== NEWS chips ===== */
.chip.news-routine { background: #e2e8f0; color: #334155; }
.chip.news-low { background: #dbeafe; color: #1e3a8a; }
.chip.news-medium { background: #fef3c7; color: #92400e; }
.chip.news-high { background: var(--red); color: white; animation: pulseRed 1.5s infinite; }
@keyframes pulseRed { 0%,100%{ box-shadow: 0 0 0 0 rgba(214,40,40,0.5);} 50%{ box-shadow: 0 0 0 6px rgba(214,40,40,0);} }
.news-live { margin-top: 14px; padding: 10px 12px; background: var(--blue-50); border-radius: 8px; min-height: 36px; }

/* Overdue indicators */
.due-overdue { color: var(--red); font-weight: 700; animation: pulseRed 1.5s infinite; }
.row-overdue td { background: #fff5f5 !important; }
.card-overdue { border-left-width: 6px; box-shadow: 0 0 0 2px rgba(214,40,40,0.15); }
.overdue-stat { border-left: 4px solid var(--red); animation: pulseRed 2s infinite; }

/* Patient mini-card additions */
.zc-meta-row { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0;
 font-size: 11px; color: var(--ink); padding: 4px 8px; background: white; border-radius: 4px; }
.zc-meta-row .due-overdue { font-weight: 700; }

/* Zone banner (single-zone page header) */
.zone-banner {
 display: flex; justify-content: space-between; align-items: center;
 border-radius: 12px; padding: 18px 22px; margin-bottom: 16px;
 color: white; box-shadow: var(--shadow);
}
.zone-banner.zone-red { background: linear-gradient(135deg, #d62828 0%, #ef4444 100%); }
.zone-banner.zone-orange { background: linear-gradient(135deg, #c2410c 0%, #f59e0b 100%); }
.zone-banner.zone-yellow { background: linear-gradient(135deg, #ca8a04 0%, #facc15 100%); color: #2d1f00; }
.zone-banner.zone-green { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }
.zone-banner.zone-blue { background: linear-gradient(135deg, #1259d4 0%, #3b82f6 100%); }
.zone-banner-title { font-size: 22px; font-weight: 800; letter-spacing: 0.4px; }
.zone-banner-hint { font-size: 13px; opacity: 0.92; margin-top: 2px; }
.zone-banner-stat { display: flex; flex-direction: column; align-items: center; padding: 0 10px; min-width: 80px; }
.zone-banner-stat b { font-size: 24px; font-weight: 800; }
.zone-banner-stat span { font-size: 11px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.4px; }
.zone-banner-stat.overdue b { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }

/* Zone full table */
.zone-table .vitals-cell { font-size: 12px; color: var(--muted); }
.zone-table .wait-time { font-variant-numeric: tabular-nums; }

/* Head trauma badge + GCS chips */
.chip.gcs-mild { background: #dbeafe; color: #1e3a8a; }
.chip.gcs-moderate { background: #fef3c7; color: #92400e; }
.chip.gcs-severe { background: var(--red); color: white; animation: pulseRed 1.5s infinite; }
.gcs-live { margin-top: 10px; padding: 8px 12px; background: var(--blue-50); border-radius: 6px; min-height: 30px; }
.gcs-box {
 border: 2px solid var(--red); background: #fff5f5;
 border-radius: 10px; padding: 14px; margin-top: 12px;
}
.gcs-box.hidden { display: none; }

/* Head-trauma toggle on triage form */
.trauma-toggle {
 display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 12px;
 background: #fff5f5; border: 2px solid #fee2e2; border-radius: 8px; cursor: pointer;
 text-transform: none; font-weight: 500; color: var(--ink);
}
.trauma-toggle input { width: auto; margin-top: 2px; }
.trauma-toggle:hover { background: #fee2e2; }

/* Assessment area — long wait warning */
.row-longwait td { background: #fffbeb !important; }
.row-longwait td:first-child { border-left: 3px solid var(--warn); }

/* O2 administration section + chip */
.o2-section {
 margin-top: 12px; padding: 12px 14px; border-radius: 8px;
 background: var(--blue-50); border: 1px solid var(--blue-100);
}
.o2-section .form-row-3 { gap: 10px; }
.o2-hint { font-size: 11px; margin-top: 6px; }
.chip-o2 {
 display: inline-block; padding: 2px 8px; background: var(--blue-700); color: white;
 border-radius: 999px; font-size: 11px; font-weight: 600;
}

/* Nursing notes */
.notes-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.note-item {
 border-left: 4px solid var(--blue-500); background: var(--soft);
 border-radius: 6px; padding: 10px 12px;
}
.note-item.note-info { border-left-color: var(--blue-500); }
.note-item.note-concern { border-left-color: var(--warn); background: #fffbeb; }
.note-item.note-critical { border-left-color: var(--red); background: #fff5f5; }
.note-meta { display: flex; justify-content: space-between; font-size: 13px; }
.note-tags { margin: 4px 0 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.note-body { font-size: 13px; white-space: pre-wrap; }

/* ===== Collapsible patient-record sections (allergy / consent / attachments) =====
 * Renders as a card whose header is a clickable summary. Visually identical
 * to .card so the page feels consistent; the disclosure triangle gives an
 * unmistakable affordance and lets clinicians collapse less-frequently-used
 * sections to scan the chart faster. */
.patient-section {
 background: white;
 border: 1px solid var(--line);
 border-radius: 12px;
 box-shadow: var(--shadow);
 margin-bottom: 12px;
 overflow: hidden;
}
.patient-section > summary {
 list-style: none;
 cursor: pointer;
 padding: 14px 18px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 user-select: none;
 position: relative;
 padding-right: 40px;
}
.patient-section > summary::-webkit-details-marker { display: none; }
.patient-section > summary::after {
 content: '▸';
 position: absolute;
 right: 16px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 14px;
 color: var(--blue-700);
 transition: transform 0.18s ease;
}
.patient-section[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.patient-section > summary:hover { background: var(--blue-50); }
.patient-section .patient-section-title {
 font-weight: 700;
 font-size: 17px;
 color: var(--blue-900);
}
.patient-section .patient-section-count {
 font-size: 13px;
 color: var(--muted);
 font-weight: 400;
}
.patient-section .patient-section-body {
 padding: 0 18px 16px;
 border-top: 1px solid var(--line);
 padding-top: 14px;
}
@media (max-width: 700px) {
 .patient-section > summary { padding: 12px 14px 12px 12px; padding-right: 36px; }
 .patient-section .patient-section-title { font-size: 15.5px; }
 .patient-section .patient-section-body { padding: 12px 12px 14px; }
}

/* ===== Wards ===== */
.ward-stat { transition: 0.15s; }
.ward-stat:hover { background: var(--blue-50); transform: translateY(-1px); }
.ward-stat.ward-female { border-left: 4px solid #ec4899; }
.ward-stat.ward-male { border-left: 4px solid var(--blue-700); }
.ward-stat.ward-pediatric { border-left: 4px solid var(--green); }
.ward-stat.ward-acute { border-left: 4px solid var(--red); }
.ward-stat.ward-surgical-male { border-left: 4px solid #4338ca; }
.ward-stat.ward-surgical-female { border-left: 4px solid #be185d; }
.ward-stat.ward-theatre { border-left: 4px solid #c2410c; }

.ward-banner {
 display: flex; justify-content: space-between; align-items: center;
 border-radius: 12px; padding: 18px 22px; margin-bottom: 16px;
 color: white; box-shadow: var(--shadow);
}
.ward-banner.ward-female { background: linear-gradient(135deg, #be185d 0%, #ec4899 100%); }
.ward-banner.ward-male { background: linear-gradient(135deg, #1259d4 0%, #3b82f6 100%); }
.ward-banner.ward-pediatric { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }
.ward-banner.ward-acute { background: linear-gradient(135deg, #c2410c 0%, #d62828 100%); }
.ward-banner.ward-surgical-male { background: linear-gradient(135deg, #312e81 0%, #4338ca 100%); }
.ward-banner.ward-surgical-female { background: linear-gradient(135deg, #831843 0%, #be185d 100%); }
.ward-banner.ward-theatre { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%); }
.ward-banner-title { font-size: 22px; font-weight: 800; letter-spacing: 0.4px; }
.ward-banner-hint { font-size: 13px; opacity: 0.92; margin-top: 2px; }

.chip.ward-chip-female { background: #fce7f3; color: #9d174d; }
.chip.ward-chip-male { background: #dbeafe; color: #1e3a8a; }
.chip.ward-chip-pediatric { background: #dcfce7; color: #166534; }
.chip.ward-chip-acute { background: #fee2e2; color: #991b1b; }
.chip.ward-chip-surgical-male { background: #e0e7ff; color: #312e81; }
.chip.ward-chip-surgical-female { background: #fce7f3; color: #831843; }
.chip.ward-chip-theatre { background: #ffedd5; color: #7c2d12; }

.ward-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ward-opt {
 display: flex; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer;
 border: 2px solid transparent; background: var(--soft); align-items: center;
 text-transform: none; font-weight: 500; color: var(--ink); margin: 0;
}
.ward-opt:hover { background: var(--blue-50); }
.ward-opt input { width: auto; }
.ward-opt.disabled { opacity: 0.4; cursor: not-allowed; }
.ward-opt.ward-female { border-left: 5px solid #ec4899; }
.ward-opt.ward-male { border-left: 5px solid var(--blue-700); }
.ward-opt.ward-pediatric { border-left: 5px solid var(--green); }
.ward-opt.ward-acute { border-left: 5px solid var(--red); }
.ward-opt.ward-surgical-male { border-left: 5px solid #4338ca; }
.ward-opt.ward-surgical-female { border-left: 5px solid #be185d; }
.ward-opt.ward-theatre { border-left: 5px solid #c2410c; }
@media (max-width: 600px) { .ward-picker { grid-template-columns: 1fr; } }

/* ===== MAR (Medication Administration Record) ===== */
.mar-table th, .mar-table td { vertical-align: top; }
.mar-due { font-variant-numeric: tabular-nums; }
.mar-overdue { color: var(--red); font-weight: 700; animation: pulseRed 1.5s infinite; }
.mar-due-now { color: var(--orange); font-weight: 700; }
.mar-soon { color: var(--warn); font-weight: 600; }
.mar-later { color: var(--muted); }

/* BNF info card */
.bnf-card {
 background: var(--soft); border: 1px solid var(--blue-100); border-radius: 10px;
 padding: 14px; margin-bottom: 12px;
}
.bnf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bnf-head h3 { margin: 0; color: var(--blue-900); }
.bnf-section { margin: 8px 0; font-size: 13px; }
.bnf-section b { color: var(--blue-900); display: block; margin-bottom: 4px; }
.bnf-section ul { margin: 4px 0; padding-left: 20px; }
.bnf-section li { margin: 2px 0; }
.bnf-section.bnf-warn { background: #fff5f5; border-left: 4px solid var(--red); padding: 8px 12px; border-radius: 4px; }
.bnf-section.bnf-warn b { color: var(--red); }
.bnf-section.bnf-note { background: var(--blue-50); border-left: 4px solid var(--blue-700); padding: 8px 12px; border-radius: 4px; }
.bnf-content.hidden { display: none; }
.bnf-card.collapsed { padding: 8px 14px; }

/* Interaction warnings */
.interaction-live {
 background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
 padding: 10px; min-height: 40px; font-size: 13px;
}
.ix-ok { color: var(--ok); font-weight: 600; }
.ix-warn { color: var(--warn); font-weight: 700; margin-bottom: 6px; }
.ix-item {
 border-left: 3px solid var(--blue-500); padding: 6px 10px; margin: 4px 0;
 background: white; border-radius: 4px; font-size: 13px;
}
.ix-item.ix-severe { border-left-color: var(--red); background: #fff5f5; }
.ix-item.ix-moderate { border-left-color: var(--warn); background: #fffbeb; }
.ix-item.ix-minor { border-left-color: var(--blue-500); }

/* Administer dialog summary */
.adm-summary {
 display: flex; justify-content: space-between; gap: 12px;
 padding: 12px; background: var(--blue-50); border-radius: 8px; margin-bottom: 12px;
}
.adm-patient { font-size: 13px; color: var(--muted); }
.adm-drug { font-size: 16px; margin: 4px 0; color: var(--blue-900); }
.adm-due { text-align: right; }

/* Dose calculator */
.calc-out { margin-top: 12px; }
.calc-result {
 background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 8px;
 padding: 14px; font-size: 14px;
}
.calc-result b { color: var(--blue-900); font-size: 18px; }

/* Cost-per-dose panel in Administer dialog */
.adm-cost {
 display: flex; justify-content: space-between; align-items: center;
 background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--ok);
 padding: 10px 14px; border-radius: 8px; margin: 12px 0;
 font-size: 14px;
}
.adm-cost b { color: var(--ok); font-size: 18px; }

/* Security audit page */
.audit-summary {
 display: flex; gap: 18px; align-items: baseline; padding: 14px 18px;
 border-radius: 10px; margin: 12px 0;
}
.audit-summary.all-pass { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.audit-summary.has-fail { background: #fff5f5; border: 1px solid #fecaca; color: #991b1b; }
.audit-num { font-size: 32px; font-weight: 800; }
.audit-pct { font-size: 14px; }
.audit-table tr.audit-ok td { background: #f0fdf4; }
.audit-table tr.audit-fail td { background: #fff5f5; font-weight: 600; }

/* Temporary password display */
.temp-pwd {
 margin-top: 12px; padding: 12px 14px; background: var(--blue-50);
 border: 1px solid var(--blue-100); border-radius: 8px;
 display: flex; justify-content: space-between; align-items: center;
}
.temp-pwd code { font-size: 18px; font-weight: 700; color: var(--blue-900); letter-spacing: 1px; }

/* Compact MAR / Lab when embedded in patient charts */
.emar-compact { padding: 12px; }
.emar-compact h3 { margin: 0; }
.emar-compact .mar-table th { padding: 6px 8px; font-size: 11px; }
.emar-compact .mar-table td { padding: 6px 8px; font-size: 12px; }
.lab-pipeline { width: 100%; }
.lab-pipeline th, .lab-pipeline td { padding: 6px 8px; font-size: 12px; vertical-align: top; }

/* 5-step lab pipeline pills */
.lab-stages { display: inline-flex; align-items: center; gap: 2px; }
.lab-stages .ls {
 display: inline-flex; align-items: center; justify-content: center;
 width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700;
 border: 2px solid var(--line); color: var(--muted); background: white;
}
.lab-stages .ls.done { background: var(--blue-100); border-color: var(--blue-500); color: var(--blue-900); }
.lab-stages .ls.active { background: var(--blue-700); border-color: var(--blue-700); color: white; box-shadow: 0 0 0 3px rgba(18,89,212,0.18); }
.lab-stages .ls-arrow { color: var(--muted); font-size: 12px; margin: 0 1px; }

/* QR verified banner on the administer dialog */
.qr-verified-banner {
 background: #dcfce7; border: 1px solid #86efac; color: #166534;
 padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px;
 display: flex; align-items: center; gap: 8px;
}

/* High-visibility allergy banner — used on the patient detail panel */
.allergy-banner {
 background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
 border: 2px solid #dc2626;
 color: #7f1d1d;
 padding: 10px 14px;
 border-radius: 8px;
 margin-bottom: 14px;
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 14px;
}

/* ===== Task-oriented Ward Dashboard ===== */
.ward-dash {
 display: grid;
 grid-template-columns: 240px 1fr;
 gap: 18px;
 align-items: start;
}
.ward-tasks {
 background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
 color: #fff;
 border-radius: 12px;
 padding: 16px;
 position: sticky;
 top: 16px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ward-tasks h2 {
 margin: 0 0 10px 0;
 font-size: 16px;
 letter-spacing: 0.3px;
 color: #e0e7ff;
 text-transform: uppercase;
 font-weight: 700;
}
.ward-tasks hr {
 border: 0; border-top: 1px solid rgba(255,255,255,0.18);
 margin: 12px 0;
}
.ward-tasks .task-btn {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 background: transparent;
 border: 0;
 color: #e0e7ff;
 padding: 10px 12px;
 border-radius: 8px;
 text-align: left;
 font-size: 14px;
 cursor: pointer;
 transition: background 0.15s;
}
.ward-tasks .task-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ward-tasks .task-btn.active { background: rgba(255,255,255,0.18); color: #fff; }
.ward-tasks .task-icon { font-size: 16px; flex-shrink: 0; }
.ward-tasks .task-text { flex: 1; }
.ward-tasks .task-count {
 background: rgba(255,255,255,0.16);
 color: #e0e7ff;
 font-size: 12px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 999px;
 min-width: 20px;
 text-align: center;
}
.ward-tasks .task-count.has { background: #fbbf24; color: #78350f; }
.ward-tasks .task-count.has.crit { background: #ef4444; color: #fff; }

.ward-main { min-width: 0; }
.ward-topbar {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 14px;
}
.ward-topbar h1 { font-size: 22px; font-weight: 700; color: #111827; }
.ward-user { text-align: right; font-size: 13px; }

.ward-overview {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin-bottom: 16px;
}
.ovw-card {
 background: #fff;
 border-radius: 10px;
 padding: 14px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 border-left: 3px solid #1e40af;
}
.ovw-card.alert { border-left-color: #dc2626; background: #fef2f2; }
.ovw-num { font-size: 26px; font-weight: 700; color: #111827; }
.ovw-lbl { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

.ward-row {
 display: grid;
 grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) auto auto;
 gap: 10px;
 align-items: center;
 padding: 10px 4px;
 border-bottom: 1px solid #e5e7eb;
 cursor: pointer;
 transition: background 0.12s;
}
.ward-row:hover { background: #f9fafb; }
.ward-row:last-child { border-bottom: 0; }
.ward-row-mid { color: #6b7280; font-size: 13px; }
.ward-row-tags { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 900px) {
 .ward-dash { grid-template-columns: 1fr; }
 .ward-tasks { position: static; }
 .ward-overview { grid-template-columns: repeat(2, 1fr); }
 .ward-row { grid-template-columns: 1fr; }
 .ward-row-tags { margin-top: 4px; }
}

/* ============================================================
 Sidebar — collapsible, pin-to-keep-open, hover-to-peek.
 Default: 240px wide, pinned (existing behaviour).
 When body.sidebar-collapsed is set, the sidebar shrinks to a
 64px rail with icon-only nav. Hovering expands a peek
 overlay for ~300ms before reverting (no layout reflow).
 The pin button toggles sidebar-collapsed and persists in
 localStorage.
 ============================================================ */
/* When collapsed, drop the grid entirely and make the sidebar a fixed
 overlay. .main-area gets margin-left:64px so its content always has
 room to render — no grid placement quirks possible. When pinned
 (default), keep the original two-column grid.

 IMPORTANT: this collapse behaviour is DESKTOP ONLY. On mobile (≤900px)
 the sidebar uses a different model — full-width slide-in via
 .sidebar-open driven by the hamburger button (see mobile.css). Without
 the min-width gate below, sidebar-collapsed rules would override the
 mobile rules and freeze the sidebar at 64px on phones. */
.app-shell { position: relative; }
.sidebar { transition: width 0.22s ease, box-shadow 0.22s ease; }
.main-area { transition: margin-left 0.22s ease; }
@media (min-width: 901px) {
 body.sidebar-collapsed .app-shell { display: block; } /* abandon grid */
 body.sidebar-collapsed .sidebar {
 position: fixed; top: 0; left: 0; bottom: 0; width: 64px; z-index: 30;
 box-shadow: 2px 0 6px rgba(0,0,0,0.06);
 }
 body.sidebar-collapsed .main-area {
 margin-left: 64px;
 min-height: 100vh;
 }
}

/* Pin button lives in the sidebar header; flips chevron based on state. */
.sidebar-header .pin-btn {
 margin-left: auto; background: rgba(255,255,255,0.08); border: 0; color: white;
 width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px;
 display: flex; align-items: center; justify-content: center; transition: 0.15s;
}
.sidebar-header .pin-btn:hover { background: rgba(255,255,255,0.18); }
@media (min-width: 901px) {
 body.sidebar-collapsed .sidebar-header h2,
 body.sidebar-collapsed .sidebar-header p { display: none; }
 body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 14px 0; }
 body.sidebar-collapsed .sidebar-header .pin-btn { margin-left: 0; }

 /* Collapsed nav: hide labels, badges shrink. */
 body.sidebar-collapsed .nav-item { padding: 11px 0; justify-content: center; gap: 0; position: relative; }
 body.sidebar-collapsed .nav-item .nav-label { display: none; }
 body.sidebar-collapsed .nav-item .badge {
 position: absolute; top: 4px; right: 8px; min-width: 14px; padding: 0 4px; font-size: 10px;
 }
 body.sidebar-collapsed .nav-group-head { padding: 6px 0; justify-content: center; }
 body.sidebar-collapsed .sidebar-footer .btn-ghost { padding: 6px; font-size: 0; }
 body.sidebar-collapsed .sidebar-footer .btn-ghost::before { content: ''; font-size: 16px; }

 /* Hover-peek: when collapsed, hovering the sidebar widens it without
 shifting layout. The sidebar is already fixed-positioned (above) so
 widening just expands its width over the main area. */
 body.sidebar-collapsed .sidebar:hover {
 width: 240px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.18);
 }
 body.sidebar-collapsed .sidebar:hover .sidebar-header h2,
 body.sidebar-collapsed .sidebar:hover .sidebar-header p { display: block; }
 body.sidebar-collapsed .sidebar:hover .sidebar-header { justify-content: flex-start; padding: 18px; }
 body.sidebar-collapsed .sidebar:hover .nav-item { padding: 10px 18px; justify-content: flex-start; gap: 10px; }
 body.sidebar-collapsed .sidebar:hover .nav-item .nav-label { display: inline; }
 body.sidebar-collapsed .sidebar:hover .nav-item .badge { position: static; min-width: 18px; padding: 2px 7px; font-size: 11px; }
 body.sidebar-collapsed .sidebar:hover .sidebar-footer .btn-ghost { padding: 10px 16px; font-size: 14px; }
 body.sidebar-collapsed .sidebar:hover .sidebar-footer .btn-ghost::before { content: ''; }

 /* Tooltip on collapsed nav items */
 body.sidebar-collapsed .nav-item[data-label]::after {
 content: attr(data-label); position: absolute; left: 64px; top: 50%; transform: translateY(-50%);
 background: var(--ink); color: white; padding: 5px 10px; border-radius: 6px; font-size: 12px;
 white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.12s; z-index: 100;
 }
 body.sidebar-collapsed .sidebar:not(:hover) .nav-item:hover[data-label]::after { opacity: 1; }
}

/* Mobile: hide the desktop pin button (we use the hamburger instead). */
@media (max-width: 900px) {
 .sidebar-header .pin-btn { display: none; }
}

/* ============================================================
 Page-load progress indicator.
 A thin animated bar at the very top of main-area shows during
 navigate(). app.js toggles .nav-loading on body.
 ============================================================ */
.page-loader {
 position: fixed; top: 0; left: 0; right: 0; height: 3px;
 background: linear-gradient(90deg, transparent, var(--blue-500), var(--blue-700), transparent);
 background-size: 200% 100%;
 animation: pageLoaderShimmer 1.1s linear infinite;
 z-index: 1000; transform: scaleX(0); transform-origin: left;
 transition: transform 0.18s ease, opacity 0.2s ease; opacity: 0;
}
body.nav-loading .page-loader { transform: scaleX(1); opacity: 1; }
@keyframes pageLoaderShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}
/* In-page skeleton (page-content fades during load) */
body.nav-loading .page-content {
 animation: pageContentFade 0.18s ease forwards;
}
@keyframes pageContentFade {
 from { opacity: 0.6; }
 to { opacity: 1; }
}
/* Spinner used by buttons + small inline loaders */
.spinner {
 display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor;
 border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite;
 vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
 Professional polish
 - tighter, more legible typography
 - better card shadows + rounded corners
 - cleaner table presentation
 - smoother button transitions
 ============================================================ */
:root {
 --shadow-sm: 0 1px 2px rgba(15, 60, 140, 0.05);
 --shadow-md: 0 4px 12px rgba(15, 60, 140, 0.08);
 --shadow-lg: 0 12px 32px rgba(15, 60, 140, 0.12);
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
}
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -0.005em; }
.card { box-shadow: var(--shadow-md); border-radius: var(--radius-md); transition: box-shadow 0.2s ease; }
.card:hover { box-shadow: var(--shadow-lg); }
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
 transition: background 0.18s ease, transform 0.06s ease, box-shadow 0.18s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 2px rgba(18,89,212,0.18); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(18,89,212,0.28); }

/* Tables: tight headers, subtle row hover, sticky header on long lists */
table { border-collapse: separate; border-spacing: 0; }
thead th {
 background: var(--blue-50); color: var(--blue-900); font-size: 12px; text-transform: uppercase;
 letter-spacing: 0.4px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
tbody tr:hover { background: var(--blue-50); }
tbody tr:last-child td { border-bottom: 0; }

/* Stats card refresh — used on dashboards */
.stat {
 background: white; border: 1px solid var(--line); border-radius: var(--radius-md);
 padding: 14px 16px; box-shadow: var(--shadow-sm);
 transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.stat .num { font-size: 24px; font-weight: 700; color: var(--blue-900); margin-top: 4px; line-height: 1.1; }

/* Modal pop animation (modals already use .modal-backdrop + .modal) */
.modal-backdrop {
 animation: backdropFade 0.18s ease;
 background: rgba(15, 23, 42, 0.45);
 backdrop-filter: blur(2px);
}
.modal { animation: modalPop 0.22s cubic-bezier(0.2, 0.9, 0.4, 1.05); border-radius: var(--radius-lg) !important; }
@keyframes backdropFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
 from { opacity: 0; transform: translateY(8px) scale(0.98); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card-page entrance — gentle fade for newly-rendered .page-content children.
 Using `forwards` (not `both`) so children are visible by default; the
 animation only smooths the entrance. Without this safeguard, a missed
 animation event could leave content stuck at opacity 0. */
.page-content > * { animation: cardEnter 0.24s ease forwards; }
.page-content > *:nth-child(2) { animation-delay: 0.04s; }
.page-content > *:nth-child(3) { animation-delay: 0.08s; }
.page-content > *:nth-child(4) { animation-delay: 0.10s; }
@keyframes cardEnter {
 from { opacity: 0.55; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Chip refresh — soft pill */
.chip {
 display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
 font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.chip-blue { background: var(--blue-100); color: var(--blue-900); }
.chip-green { background: #d1fae5; color: #065f46; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-red { background: #fee2e2; color: #991b1b; }
.chip-gray { background: #e2e8f0; color: #475569; }
.chip-orange { background: #ffedd5; color: #9a3412; }
.chip-purple { background: #ede9fe; color: #5b21b6; }

/* Better global focus ring (a11y) */
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; }

/* Nursing rota grid — circle buttons per (nurse, day).
 green=on, red=off, deep mauve=holiday/leave/sick. */
.rota-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.rota-grid thead th { background: var(--blue-50); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 1; }
.rota-cell {
 width: 24px; height: 24px; border-radius: 50%;
 border: 1px solid var(--line);
 cursor: pointer; padding: 0; transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.rota-cell:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
.rota-cell.rota-on { background: #16a34a !important; }
.rota-cell.rota-off { background: #dc2626 !important; }
.rota-cell.rota-leave { background: #7c3a72 !important; } /* deep mauve */
.rota-cell.rota-blank { background: #fff !important; }
.rota-cell:disabled { cursor: default; opacity: 0.85; }

/* Hide every button / element tagged data-clinical="entry" when the
 logged-in user is administrative-only (admin / hospital_admin).
 Superadmin & operational_manager keep their support powers. Used to
 strip "+ Register Patient", "+ Triage", "+ Record Donation",
 "+ Vitals", "+ Add Note", etc. from the admin's UI without each
 module needing to know about it. The previous yellow banner at the
 top of every page was removed at user request — buttons just don't
 render now. */
body.clinical-view-only [data-clinical="entry"] { display: none !important; }
body.clinical-view-only .clinical-entry-only { display: none !important; }

/* Offline outbox badge in the top bar — visible whenever there's a
 queued write waiting to sync. Click opens the outbox panel. */
.outbox-badge {
 background: #fef3c7; color: #92400e;
 padding: 4px 10px; border-radius: 999px;
 font-size: 12px; font-weight: 600;
 border: 1px solid #f59e0b;
 cursor: pointer; transition: 0.15s;
 display: inline-flex; align-items: center; gap: 4px;
}
.outbox-badge:hover { background: #fde68a; }
body.is-offline .outbox-badge { background: #fee2e2; color: #991b1b; border-color: #ef4444; }

/* Offline indicator on the live-status dot — turns red when offline */
body.is-offline .live-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }

/* Hospital logo display surfaces:
 - Login screen: 88px square card centered above the hospital name.
 - Sidebar header: 38px square next to the hospital name.
 - Top bar: 32px square next to the page title.
 When a logo is set the default "+" mark is hidden. */
.login-logo-img {
 display: block; margin: 0 auto 12px; max-width: 110px; max-height: 88px;
 object-fit: contain; background: #fff; border-radius: 14px;
 box-shadow: 0 6px 16px rgba(18,89,212,0.18);
 padding: 8px;
}
.sidebar-logo-img {
 width: 38px; height: 38px; object-fit: contain;
 background: #fff; border-radius: 10px; padding: 4px;
}
.topbar-logo {
 width: 36px; height: 36px; object-fit: contain;
 background: #fff; border-radius: 8px; padding: 3px;
 border: 1px solid var(--line);
}

/* Insurance-type radio pills (reception register form). */
.ins-opt {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 6px 12px; border: 1.5px solid var(--line);
 border-radius: 999px; cursor: pointer; font-size: 13px;
 background: white; transition: 0.15s;
 font-weight: 500; text-transform: none; letter-spacing: 0;
}
.ins-opt:hover { border-color: var(--blue-500); }
.ins-opt:has(input:checked) {
 background: var(--blue-50);
 border-color: var(--blue-700);
 color: var(--blue-900);
 font-weight: 600;
}
.ins-opt input { width: auto; margin: 0; }