/* ==========================================================================
   Nanto Health Design System  ·  "Ward Light" v1.1 (Cerulean)
   Implements docs/DESIGN-SYSTEM.md. Loaded AFTER Bootstrap 5.3, which is kept
   as reset + grid + utilities only. This file owns colour, type, buttons,
   cards, chips, tables, the flowsheet strip and print. No !important walls:
   Bootstrap is re-skinned through its own --bs-* variables.
   Light mode only, by decision (bright wards, glossy tablets).
   ========================================================================== */

/* ---- Inter (self-hosted, offline-safe, tabular figures) ---------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* neutrals (warm-grey, teal-shifted) */
  --nh-n0:#FFFFFF; --nh-n50:#F6F8F8; --nh-n100:#EEF1F1; --nh-n200:#DEE4E3;
  --nh-n300:#C4CDCC; --nh-n400:#98A5A4; --nh-n500:#647271; --nh-n600:#4C5A59;
  --nh-n700:#374342; --nh-n800:#243030; --nh-n900:#15201F;

  /* brand cerulean (Clinical Cerulean, division colour, 2 Jul 2026) */
  --nh-cerulean-50:#E0F2FE; --nh-cerulean-100:#BAE6FD; --nh-cerulean-200:#7DD3FC;
  --nh-cerulean-300:#38BDF8; --nh-cerulean-400:#0EA5E9; --nh-cerulean-500:#0284C7;
  --nh-cerulean-600:#0369A1; --nh-cerulean-700:#075985; --nh-cerulean-800:#0C4A6E;
  --nh-cerulean-900:#082F49;

  /* semantic */
  --nh-success:#1B7A43; --nh-success-bg:#EAF6EE; --nh-success-border:#BEE3CC;
  --nh-warning:#915400; --nh-warning-bg:#FFF4DF; --nh-warning-border:#F2D9A6;
  --nh-danger:#C62828;  --nh-danger-bg:#FDEBEB;  --nh-danger-border:#F4BFBF;
  --nh-info:#1565C0;    --nh-info-bg:#E9F2FC;    --nh-info-border:#BFD8F4;

  /* workflow states */
  --nh-st-scheduled:#4C5A59;  --nh-st-scheduled-bg:#EEF1F1;
  --nh-st-checkedin:#0E7490;  --nh-st-checkedin-bg:#E4F5F9;
  --nh-st-insession:#0284C7;  --nh-st-insession-dot:#7DD3FC;
  --nh-st-discharged:#5E48B8; --nh-st-discharged-bg:#EFEBFA;
  --nh-st-awaitsign:#915400;  --nh-st-awaitsign-bg:#FFF4DF;
  --nh-st-clinsigned:#0F766E; --nh-st-clinsigned-bg:#E0F2F1;
  --nh-st-claimready:#1B7A43; --nh-st-claimready-bg:#EAF6EE;
  --nh-st-submitted:#1565C0;  --nh-st-submitted-bg:#E9F2FC;
  --nh-st-blocked:#C62828;    --nh-st-blocked-bg:#FDEBEB;
  --nh-cell-alert:#B42318;    --nh-cell-alert-bg:#FDEBEB;

  /* type */
  --nh-font-sans:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --nh-font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;

  /* space */
  --nh-s1:4px; --nh-s2:8px; --nh-s3:12px; --nh-s4:16px; --nh-s5:20px;
  --nh-s6:24px; --nh-s8:32px; --nh-s10:40px; --nh-s12:48px; --nh-s16:64px;

  /* shape + elevation */
  --nh-r-sm:6px; --nh-r-control:8px; --nh-r-card:12px; --nh-r-modal:16px; --nh-r-pill:999px;
  --nh-border:1px solid var(--nh-n200); --nh-border-strong:1px solid var(--nh-n300);
  --nh-shadow-xs:0 1px 2px rgba(21,32,31,.05);
  --nh-shadow-sm:0 1px 3px rgba(21,32,31,.08),0 1px 2px rgba(21,32,31,.04);
  --nh-shadow-md:0 4px 12px rgba(21,32,31,.10),0 2px 4px rgba(21,32,31,.05);
  --nh-shadow-lg:0 16px 40px rgba(21,32,31,.16),0 4px 12px rgba(21,32,31,.08);
  --nh-focus-ring:0 0 0 4px rgba(2,132,199,.16);

  /* motion */
  --nh-dur-fast:100ms; --nh-dur-base:160ms; --nh-dur-slow:240ms;
  --nh-ease:cubic-bezier(.2,0,0,1); --nh-ease-exit:cubic-bezier(.4,0,1,1);

  /* density (fine-pointer default) */
  --nh-control-h:40px; --nh-row-h:44px;

  /* bootstrap bridge */
  --bs-body-bg:var(--nh-n50); --bs-body-color:var(--nh-n900);
  --bs-body-font-family:var(--nh-font-sans); --bs-body-font-size:15px;
  --bs-border-color:var(--nh-n200); --bs-border-radius:var(--nh-r-control);
  --bs-link-color:var(--nh-cerulean-700); --bs-link-hover-color:var(--nh-cerulean-800);
}
@media (pointer:coarse) { :root { --nh-control-h:48px; --nh-row-h:52px; } }

/* ---- Base -------------------------------------------------------------- */
body {
  background:var(--nh-n50); color:var(--nh-n900);
  font-family:var(--nh-font-sans); font-size:15px; line-height:1.5;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
.nh-num, td.num, .running-total, .nh-flowsheet input,
.tabular, .nh-money { font-variant-numeric:tabular-nums; }

h1,.h1,h2,.h2,h3,.h3 { color:var(--nh-n800); letter-spacing:-.01em; font-weight:600; }
h1,.h1 { letter-spacing:-.015em; }
.text-muted { color:var(--nh-n500)!important; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }

/* Section overline label */
.nh-overline, .text-uppercase.small, h2.text-uppercase {
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--nh-n600);
}

/* Card title role (DESIGN-SYSTEM 3.2 h2: card and modal titles) */
.nh-card-title {
  font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em;
  color:var(--nh-n800); margin:0 0 var(--nh-s4);
  display:flex; align-items:center; justify-content:space-between;
}

/* ---- Icons: the self-hosted Lucide sprite (DESIGN-SYSTEM 6) ------------ */
/* <svg class="nh-i"><use href="/static/icons/nh-sprite.svg#name"/></svg>
   Sized in em so existing font-size styling keeps working; colour follows
   currentColor like the icon font it replaces. */
.nh-i {
  width:1em; height:1em; flex:none;
  vertical-align:-0.125em; display:inline-block;
}

/* ---- Focus (all interactive) ------------------------------------------ */
:is(.btn,.nh-chip,a,input,select,textarea,summary,button):focus-visible {
  outline:2px solid var(--nh-cerulean-500); outline-offset:2px;
  box-shadow:var(--nh-focus-ring);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  --bs-btn-border-radius:var(--nh-r-control);
  font-weight:600; letter-spacing:0;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--nh-s2);
  transition:background-color var(--nh-dur-fast) var(--nh-ease),
             border-color var(--nh-dur-fast) var(--nh-ease),
             box-shadow var(--nh-dur-fast) var(--nh-ease);
}
.btn-primary {
  --bs-btn-bg:var(--nh-cerulean-600); --bs-btn-border-color:var(--nh-cerulean-600);
  --bs-btn-hover-bg:var(--nh-cerulean-700); --bs-btn-hover-border-color:var(--nh-cerulean-700);
  --bs-btn-active-bg:var(--nh-cerulean-800); --bs-btn-active-border-color:var(--nh-cerulean-800);
  --bs-btn-disabled-bg:var(--nh-cerulean-600); --bs-btn-disabled-border-color:var(--nh-cerulean-600);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.btn-outline-primary {
  --bs-btn-color:var(--nh-cerulean-700); --bs-btn-border-color:var(--nh-cerulean-600);
  --bs-btn-hover-bg:var(--nh-cerulean-600); --bs-btn-hover-border-color:var(--nh-cerulean-600);
  --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--nh-cerulean-700); --bs-btn-active-border-color:var(--nh-cerulean-700);
}
.btn-outline-secondary {
  --bs-btn-color:var(--nh-n700); --bs-btn-border-color:var(--nh-n300);
  --bs-btn-hover-bg:var(--nh-n50); --bs-btn-hover-border-color:var(--nh-n400);
  --bs-btn-hover-color:var(--nh-n900);
  --bs-btn-active-bg:var(--nh-n100); --bs-btn-active-border-color:var(--nh-n400);
  --bs-btn-active-color:var(--nh-n900);
}
.btn-danger, .btn-outline-danger {
  --bs-btn-bg:var(--nh-danger); --bs-btn-border-color:var(--nh-danger);
  --bs-btn-hover-bg:#A82121; --bs-btn-hover-border-color:#A82121;
  --bs-btn-active-bg:#8F1D1D;
  --bs-btn-color:#fff;
}
.btn-outline-danger {
  --bs-btn-bg:transparent; --bs-btn-color:var(--nh-danger); --bs-btn-hover-color:#fff;
}
.btn-brand { background:var(--nh-cerulean-600); border-color:var(--nh-cerulean-600); color:#fff; }
.btn-brand:hover { background:var(--nh-cerulean-700); border-color:var(--nh-cerulean-700); color:#fff; }
.btn-sm { --bs-btn-font-size:14px; }
/* commit actions on tablet get the tall control height */
@media (pointer:coarse) {
  .btn:not(.btn-sm) { min-height:48px; }
}

/* ---- Forms / inputs ---------------------------------------------------- */
.form-control, .form-select {
  border:1px solid var(--nh-n300); border-radius:var(--nh-r-control);
  color:var(--nh-n900); background:var(--nh-n0);
  min-height:var(--nh-control-h); font-size:16px;
}
.form-control-sm, .form-select-sm { min-height:calc(var(--nh-control-h) - 6px); font-size:15px; }
.form-control:focus, .form-select:focus {
  border-color:var(--nh-cerulean-600); box-shadow:var(--nh-focus-ring); outline:none;
}
.form-control::placeholder { color:var(--nh-n400); }
.form-label { color:var(--nh-n700); font-size:13px; font-weight:500; letter-spacing:.01em; margin-bottom:6px; }
.form-label.small, .form-label.mb-0 { margin-bottom:4px; }
/* iOS: never auto-zoom on focus. All entry fields >=16px. */
input, select, textarea { font-size:16px; }

/* ---- Cards: ONE canonical card (P0.3) ----------------------------------
   .nh-card is the canonical card. Bootstrap's .card and the section card
   .nh-sec are compatibility aliases sharing the exact same chrome, so the
   three implementations render identically. Do not fork their look. */
.card, .nh-card, .nh-sec {
  background:var(--nh-n0); border:var(--nh-border); border-radius:var(--nh-r-card);
  box-shadow:var(--nh-shadow-xs);
}
.card {
  --bs-card-bg:var(--nh-n0); --bs-card-border-color:var(--nh-n200);
  --bs-card-border-radius:var(--nh-r-card);
  --bs-card-spacer-y:var(--nh-s5); --bs-card-spacer-x:var(--nh-s5);
}
.card.shadow-sm { box-shadow:var(--nh-shadow-sm)!important; }
.nh-card, .nh-sec { padding:var(--nh-s5); }
.nh-sec { margin-bottom:var(--nh-s5); }
.nh-card--locked { background:var(--nh-n50); }

/* ---- Tables ------------------------------------------------------------ */
.table {
  --bs-table-color:var(--nh-n900);
  --bs-table-border-color:var(--nh-n100);
  --bs-table-hover-bg:var(--nh-n50);
  margin-bottom:0;
}
.table > thead, .table > thead th, .table-light, thead.table-light th {
  --bs-table-bg:var(--nh-n50);
  background:var(--nh-n50); color:var(--nh-n600);
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid var(--nh-n200);
}
.table > tbody > tr > td { border-bottom:1px solid var(--nh-n100); vertical-align:middle; }
.table > :not(caption) > * > * { padding:.6rem .75rem; }
.running-total { font-variant-numeric:tabular-nums; }

/* ---- Chips: state (legacy .state-chip.st-* remapped to Ward Light) ----- */
.state-chip, .pa-chip, .nh-chip {
  display:inline-flex; align-items:center; gap:5px; height:24px;
  padding:0 10px; border-radius:var(--nh-r-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  line-height:1;
}
.st-Scheduled   { background:var(--nh-st-scheduled-bg);  color:var(--nh-st-scheduled); }
.st-Checked-in  { background:var(--nh-st-checkedin-bg);  color:var(--nh-st-checkedin); }
.st-In-session  { background:var(--nh-st-insession);     color:#fff; }
.st-In-session::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--nh-st-insession-dot); animation:nh-pulse 2s var(--nh-ease) infinite;
}
.st-Discharged  { background:var(--nh-st-discharged-bg); color:var(--nh-st-discharged); }
.st-Awaiting-sign     { background:var(--nh-st-awaitsign-bg);  color:var(--nh-st-awaitsign); }
.st-Clinically-signed { background:var(--nh-st-clinsigned-bg); color:var(--nh-st-clinsigned); }
.st-Claim-ready { background:var(--nh-st-claimready-bg); color:var(--nh-st-claimready); }
.st-Submitted   { background:var(--nh-st-submitted-bg);  color:var(--nh-st-submitted); }
.st-Blocked     { background:var(--nh-st-blocked-bg);    color:var(--nh-st-blocked); }

.pa-valid { background:var(--nh-success-bg); color:var(--nh-success); }
.pa-warn  { background:var(--nh-warning-bg); color:var(--nh-warning); }
.pa-bad   { background:var(--nh-danger-bg);  color:var(--nh-danger); }
.pa-none  { background:var(--nh-n100);       color:var(--nh-n500); }

.role-chip {
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  padding:.2rem .55rem; border-radius:var(--nh-r-pill);
  background:var(--nh-cerulean-50); color:var(--nh-cerulean-800); font-weight:600;
}

/* new nh-chip variants for refactored screens */
.nh-chip .nh-i { width:14px; height:14px; }
.nh-chip--scheduled  { background:var(--nh-st-scheduled-bg);  color:var(--nh-st-scheduled); }
.nh-chip--checkedin  { background:var(--nh-st-checkedin-bg);  color:var(--nh-st-checkedin); }
.nh-chip--discharged { background:var(--nh-st-discharged-bg); color:var(--nh-st-discharged); }
.nh-chip--claimready { background:var(--nh-st-claimready-bg); color:var(--nh-st-claimready); }
.nh-chip--submitted  { background:var(--nh-st-submitted-bg);  color:var(--nh-st-submitted); }
.nh-chip--blocked    { background:var(--nh-st-blocked-bg);    color:var(--nh-st-blocked); }
.nh-chip--insession  { background:var(--nh-st-insession);     color:#fff; }
.nh-chip--insession::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--nh-st-insession-dot); animation:nh-pulse 2s var(--nh-ease) infinite;
}
@keyframes nh-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:1ms!important; transition-duration:1ms!important; }
}

/* ---- Alerts (Bootstrap re-skin) --------------------------------------- */
.alert { border-radius:var(--nh-r-control); border-width:1px; }
.alert-warning { --bs-alert-color:var(--nh-warning); --bs-alert-bg:var(--nh-warning-bg); --bs-alert-border-color:var(--nh-warning-border); }
.alert-danger  { --bs-alert-color:var(--nh-danger);  --bs-alert-bg:var(--nh-danger-bg);  --bs-alert-border-color:var(--nh-danger-border); }
.alert-success { --bs-alert-color:var(--nh-success); --bs-alert-bg:var(--nh-success-bg); --bs-alert-border-color:var(--nh-success-border); }
.alert-info    { --bs-alert-color:var(--nh-info);    --bs-alert-bg:var(--nh-info-bg);    --bs-alert-border-color:var(--nh-info-border); }

/* ---- Session stepper: dot + hairline connector (design system 5.7) ---- */
.nh-stepper { display:flex; align-items:center; flex-wrap:wrap; min-height:48px; margin:.1rem 0 var(--nh-s4); }
.nh-step { display:inline-flex; align-items:center; gap:.4rem; font-size:13px; color:var(--nh-n500); }
.nh-step-label { line-height:1; }
.nh-step-dot {
  width:12px; height:12px; box-sizing:border-box; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--nh-n300); background:var(--nh-n0);
  display:inline-flex; align-items:center; justify-content:center;
}
.nh-step-check { width:8px; height:8px; stroke:#fff; stroke-width:3; }
.nh-step.is-done { color:var(--nh-n600); }
.nh-step.is-done .nh-step-dot { background:var(--nh-cerulean-600); border-color:var(--nh-cerulean-600); }
.nh-step.is-now { color:var(--nh-n900); font-weight:600; }
.nh-step.is-now .nh-step-dot { background:var(--nh-cerulean-600); border-color:var(--nh-cerulean-600); box-shadow:0 0 0 4px var(--nh-cerulean-100); }
.nh-step-conn { width:24px; height:1px; background:var(--nh-n300); margin:0 .6rem; flex:0 0 auto; }

/* ---- App shell: one collapsible left sidebar --------------------------- */
:root { --nh-sidebar-w:240px; --nh-sidebar-rail:56px; }

.nh-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--nh-sidebar-w);
  background:var(--nh-n0); border-right:1px solid var(--nh-n200);
  display:flex; flex-direction:column; z-index:100;
  transition:width var(--nh-dur-base) var(--nh-ease);
}
html.nh-collapsed .nh-sidebar { width:var(--nh-sidebar-rail); }

.nh-sb-brand {
  display:flex; align-items:center; gap:9px; padding:14px 14px 12px;
  border-bottom:1px solid var(--nh-n100);
  color:var(--nh-cerulean-700); font-weight:650; font-size:15px; line-height:1.15;
  text-decoration:none; white-space:nowrap; overflow:hidden;
}
.nh-sb-brand:hover { text-decoration:none; }
.nh-sb-brand svg { flex:none; }
.nh-sb-brand small { display:block; color:var(--nh-n500); font-weight:400; font-size:12px; line-height:1.2; }
html.nh-collapsed .nh-sb-brand { justify-content:center; padding-inline:0; }
html.nh-collapsed .nh-sb-brand .nh-sb-brandtext { display:none; }

.nh-sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px; }
.nh-sb-group {
  font-size:11px; line-height:16px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--nh-n500); padding:14px 10px 4px;
  white-space:nowrap;
}
html.nh-collapsed .nh-sb-group {
  height:0; padding:0; margin:10px 8px; overflow:hidden;
  border-top:1px solid var(--nh-n200); font-size:0;
}
.nh-sb-nav a {
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:1px 0; border-radius:var(--nh-r-control);
  color:var(--nh-n700); font-size:14.5px; font-weight:500; line-height:1.2;
  text-decoration:none; white-space:nowrap; overflow:hidden;
}
.nh-sb-nav a .nh-i { font-size:18px; width:20px; flex:none; color:var(--nh-n500); }
.nh-sb-nav a:hover { background:var(--nh-n50); color:var(--nh-n900); text-decoration:none; }
.nh-sb-nav a:hover .nh-i { color:var(--nh-n700); }
.nh-sb-nav a.active { background:var(--nh-cerulean-50); color:var(--nh-cerulean-700); font-weight:600; }
.nh-sb-nav a.active .nh-i { color:var(--nh-cerulean-600); }
.nh-sb-nav a.active::before {
  content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 2px 2px 0; background:var(--nh-cerulean-600);
}
html.nh-collapsed .nh-sb-nav a { justify-content:center; padding-inline:0; }
html.nh-collapsed .nh-sidebar .nh-sb-label { display:none; }

.nh-sb-foot {
  border-top:1px solid var(--nh-n100); padding:10px;
  display:flex; flex-direction:column; gap:8px;
}
.nh-sb-user { display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; }
.nh-sb-user .nh-sb-username {
  font-size:13px; color:var(--nh-n700); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.nh-sb-actions { display:flex; align-items:center; gap:8px; }
.nh-sb-actions form { flex:1; margin:0; }
html.nh-collapsed .nh-sb-user { display:none; }
html.nh-collapsed .nh-sb-actions { flex-direction:column; }
.nh-sb-toggle {
  border:0; background:transparent; color:var(--nh-n500);
  width:36px; height:31px; border-radius:var(--nh-r-control);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.nh-sb-toggle:hover { background:var(--nh-n100); color:var(--nh-n800); }
html.nh-collapsed .nh-sb-toggle .nh-i { transform:rotate(180deg); }

.nh-main {
  margin-left:var(--nh-sidebar-w); min-height:100vh;
  transition:margin-left var(--nh-dur-base) var(--nh-ease);
}
html.nh-collapsed .nh-main { margin-left:var(--nh-sidebar-rail); }

/* Mobile: sidebar hides; sticky top bar + fixed bottom nav take over */
.nh-mobiletop { display:none; }
.nh-mobilenav { display:none; }
@media (max-width:767.98px) {
  .nh-sidebar { display:none; }
  .nh-main, html.nh-collapsed .nh-main { margin-left:0; }
  .nh-wrap { padding-bottom:88px; }
  .nh-mobiletop {
    position:sticky; top:0; z-index:110;
    background:var(--nh-n0); border-bottom:1px solid var(--nh-n200);
    padding:10px var(--nh-s4);
    display:flex; align-items:center; justify-content:space-between;
  }
  .nh-mobiletop .nh-sb-brand { border-bottom:0; padding:0; }
  .nh-mobilenav {
    position:fixed; bottom:0; left:0; right:0; z-index:110; height:60px;
    background:var(--nh-n0); border-top:1px solid var(--nh-n200);
    display:flex;
  }
  .nh-mobilenav a {
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; padding:4px 0;
    color:var(--nh-n500); font-size:12px; text-decoration:none;
  }
  .nh-mobilenav a .nh-i { font-size:1.15rem; }
  .nh-mobilenav a.active { color:var(--nh-cerulean-600); }
  /* Keep the four-column actuals grid inside its phone card. */
  #lines-block .table { table-layout:fixed; width:100%; font-size:.82rem; }
  #lines-block .table > :not(caption) > * > * { padding:.45rem .25rem; }
  #lines-block .table th:first-child { width:40%; }
  #lines-block .table th:nth-child(2) { width:20%; }
  #lines-block .table th:nth-child(3) { width:18%; }
  #lines-block .table th:nth-child(4) { width:22%; }
  #lines-block input[type="number"] { max-width:100%; min-width:0; }
  #lines-block td:first-child { overflow-wrap:anywhere; }
}

/* ---- Hub tabs (underline style, per DESIGN-SYSTEM 5.7) ------------------ */
.nh-tabs {
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--nh-n200); margin-bottom:var(--nh-s5);
}
.nh-tabs a {
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  font-size:14px; font-weight:600; color:var(--nh-n600); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.nh-tabs a:hover { color:var(--nh-n800); text-decoration:none; }
.nh-tabs a.active { color:var(--nh-n900); border-bottom-color:var(--nh-cerulean-600); }

/* ---- Legacy claims-page scaffolding (old shell classes, kept until those
        pages migrate fully to nh- components) --------------------------- */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--nh-s6); }
.page-title { font-size:1.3rem; font-weight:600; color:var(--nh-n800); margin:0; }
.badge-online   { background:var(--nh-success-bg); color:var(--nh-success); }
.badge-degraded { background:var(--nh-warning-bg); color:var(--nh-warning); }
.badge-offline  { background:var(--nh-danger-bg);  color:var(--nh-danger); }

.nh-wrap { max-width:1240px; margin:0 auto; padding:var(--nh-s6) var(--nh-s4) var(--nh-s16); }
@media (min-width:1280px){ .nh-wrap { padding-inline:var(--nh-s6); } }

/* ---- Money / status text helpers -------------------------------------- */
.ok-yes { color:var(--nh-success); } .ok-no { color:var(--nh-danger); } .ok-manual { color:var(--nh-warning); }
.cell-bad { background:var(--nh-cell-alert-bg); color:var(--nh-cell-alert); font-weight:600; }
.line-adjusted { color:var(--nh-warning); }

/* ---- The flowsheet: ONE grid (P0.1) ------------------------------------
   Header, charted rows and the entry ghost row all share --nh-fs-cols (set
   from the ServiceProfile column spec), so the nurse reads one layout to
   type and to verify. The print record keeps its bordered table. */
.nh-flowsheet { --nh-fs-cols:72px 96px 56px 72px 60px 60px 60px 88px minmax(150px,1fr) 56px; }
.nh-fs-head, .nh-fs-row, .nh-fs-entry {
  display:grid; grid-template-columns:var(--nh-fs-cols); align-items:stretch;
}
.nh-fs-head {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--nh-n600); background:var(--nh-n50);
  border:1px solid var(--nh-n200); border-radius:var(--nh-r-sm) var(--nh-r-sm) 0 0;
}
.nh-fs-head > * { padding:8px 6px; text-align:center; border-right:1px solid var(--nh-n100); }
.nh-fs-head > *:last-child { border-right:0; }

/* charted rows: hairline-separated grid rows continuing the header frame */
.nh-flowsheet #vitals-list {
  border:1px solid var(--nh-n200); border-top:0;
  border-radius:0 0 var(--nh-r-sm) var(--nh-r-sm);
  background:var(--nh-n0); overflow:hidden;
}
.nh-fs-row { border-bottom:1px solid var(--nh-n100); }
.nh-fs-row:last-child { border-bottom:0; }
.nh-fs-c {
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:6px; min-height:var(--nh-row-h); overflow:hidden;
  font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--nh-n900);
}
.nh-fs-c.is-text { justify-content:flex-start; text-align:left; font-weight:400; font-size:13px; }
.nh-fs-c.nh-fs-idx { color:var(--nh-n400); font-size:12px; }
.nh-fs-row .nh-i { width:14px; height:14px; flex:none; }
.nh-fs-entry {
  background:var(--nh-n0); border:1.5px solid var(--nh-cerulean-600);
  border-radius:10px; box-shadow:var(--nh-shadow-sm); margin-top:var(--nh-s2); overflow:hidden;
}
.nh-fs-entry > * { border-right:1px solid var(--nh-n100); display:flex; align-items:center; }
.nh-fs-entry > *:last-child { border-right:0; justify-content:center; }
.nh-fs-entry input, .nh-fs-entry select {
  border:0; background:transparent; width:100%; height:var(--nh-control-h);
  font-size:16px; font-weight:500; font-variant-numeric:tabular-nums;
  text-align:center; padding:0 4px; color:var(--nh-n900);
}
.nh-fs-entry input::placeholder { color:var(--nh-n300); font-weight:400; }
.nh-fs-entry input:focus, .nh-fs-entry select:focus {
  outline:none; box-shadow:inset 0 0 0 2px var(--nh-cerulean-500);
  background:var(--nh-cerulean-50); border-radius:var(--nh-r-sm);
}
.nh-fs-add {
  width:40px; height:40px; border:0; border-radius:var(--nh-r-control);
  background:var(--nh-cerulean-50); color:var(--nh-cerulean-800);
  display:inline-flex; align-items:center; justify-content:center; margin:0 auto;
}
.nh-fs-add:hover { background:var(--nh-cerulean-100); }
@media (pointer:coarse){ .nh-fs-add { width:48px; height:48px; } }

/* ---- htmx ------------------------------------------------------------- */
.htmx-indicator { display:none; } .htmx-request .htmx-indicator { display:inline-block; }
.htmx-swapping { opacity:0; transition:opacity 100ms var(--nh-ease-exit); }
.htmx-settling { opacity:1; transition:opacity 160ms var(--nh-ease); }

/* ---- Nurse floor board (Epic unit / chair board, Stage 3) -------------- */
/* Ported from docs/mockups/nh-epic.css; the mockup file is never linked by the
   app, so the classes the floor board needs live here in the real stylesheet. */
.nh-exp { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:var(--nh-r-pill); padding:2px 9px; }
.nh-exp.fresh { background:var(--nh-success-bg); color:var(--nh-success); }
.nh-exp.soon  { background:var(--nh-warning-bg); color:var(--nh-warning); }
.nh-exp.stale { background:var(--nh-danger-bg);  color:var(--nh-danger); }

.nh-queue { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--nh-s5, 20px); }
.nh-qtab { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--nh-r-control);
  background:var(--nh-n0); border:1px solid var(--nh-n200); color:var(--nh-n700);
  font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; }
.nh-qtab:hover { border-color:var(--nh-n300); }
.nh-qtab.active { background:var(--nh-cerulean-600); border-color:var(--nh-cerulean-600); color:#fff; }
.nh-qcount { font-size:12px; font-weight:700; background:var(--nh-n100); color:var(--nh-n700);
  border-radius:var(--nh-r-pill); padding:1px 8px; min-width:22px; text-align:center; }
.nh-qtab.active .nh-qcount { background:rgba(255,255,255,.22); color:#fff; }
.nh-qtab.alert .nh-qcount { background:var(--nh-danger-bg); color:var(--nh-danger); }

.nh-floor { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:14px; }
.nh-chair { border:1px solid var(--nh-n200); border-radius:var(--nh-r-card); background:var(--nh-n0);
  box-shadow:var(--nh-shadow-xs); padding:13px 14px; position:relative;
  transition:box-shadow var(--nh-dur-fast) var(--nh-ease), border-color var(--nh-dur-fast) var(--nh-ease); }
.nh-chair:hover { box-shadow:var(--nh-shadow-sm); border-color:var(--nh-n300); }
.nh-chair.empty { background:var(--nh-n50); border-style:dashed; color:var(--nh-n400);
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:148px; font-weight:600; gap:4px; }
.nh-chair.cleaning { background:var(--nh-st-checkedin-bg); }
.nh-chair.alert { border-color:var(--nh-danger); box-shadow:0 0 0 3px var(--nh-danger-bg); }
.nh-chair .ch-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:6px; }
.nh-chair .ch-id { font-size:11.5px; font-weight:700; color:var(--nh-n500); letter-spacing:.05em; }
.nh-chair .ch-pt { font-weight:650; color:var(--nh-n900); line-height:1.2; }
.nh-chair .ch-sub { font-size:12px; color:var(--nh-n500); }
.nh-chair .ch-bar { height:6px; border-radius:var(--nh-r-pill); background:var(--nh-n100); overflow:hidden; margin:11px 0 5px; }
.nh-chair .ch-bar .f { height:100%; background:var(--nh-cerulean-500); border-radius:var(--nh-r-pill); }
.nh-chair.alert .ch-bar .f { background:var(--nh-danger); }
.nh-chair .ch-foot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:6px; }
.nh-chair .ch-nurse { font-size:11.5px; color:var(--nh-cerulean-700); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.nh-chair .ch-claim { font-size:11.5px; color:var(--nh-n500); border:1px dashed var(--nh-n300); border-radius:var(--nh-r-pill);
  padding:1px 9px; cursor:pointer; background:none; display:inline-flex; align-items:center; gap:4px; }
.nh-chair .ch-claim:hover { border-color:var(--nh-cerulean-400); color:var(--nh-cerulean-700); }

/* ---- Machine register + fault log + renal cap meter (Stage 4) ---------- */
/* Ported from docs/mockups/nh-epic.css (machine-admin + biller-cockpit); the
   mockup file is never linked by the app, so the classes live here. */
.m-ok   { background:var(--nh-success-bg); color:var(--nh-success); }
.m-due  { background:var(--nh-warning-bg); color:var(--nh-warning); }
.m-down { background:var(--nh-danger-bg);  color:var(--nh-danger); }

.nh-fault { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--nh-n100); }
.nh-fault:last-child { border-bottom:0; }
.nh-fault .fi { width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
.nh-fault.warn .fi { background:var(--nh-warning); }
.nh-fault.bad .fi  { background:var(--nh-danger); }
.nh-fault.info .fi { background:var(--nh-n400); }
.nh-fault .ft { font-weight:600; color:var(--nh-n800); font-size:13.5px; }
.nh-fault .fm { font-size:12.5px; color:var(--nh-n500); }

.nh-capbar { background:var(--nh-n50); border:1px solid var(--nh-n200); border-radius:var(--nh-r-card); padding:14px 16px; }
.nh-capbar .row1 { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.nh-capbar .amt { font-size:20px; font-weight:700; color:var(--nh-n900); font-variant-numeric:tabular-nums; }
.nh-meter { height:12px; border-radius:var(--nh-r-pill); background:var(--nh-n200); overflow:hidden; position:relative; }
.nh-meter .fill { height:100%; background:var(--nh-cerulean-500); border-radius:var(--nh-r-pill); transition:width var(--nh-dur-slow) var(--nh-ease); }
.nh-meter .cap { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--nh-n800); }
.nh-capbar.over .fill { background:var(--nh-warning); }
.nh-capnote { font-size:12.5px; color:var(--nh-n600); margin-top:8px; }

/* ---- Bootstrap badge + text-colour re-skin (Ward Light soft tints) ----- */
/* Any Bootstrap semantic badge across the app inherits the Ward Light chip
   look (soft tint + readable ink) without touching each template. Keeps the
   legacy pages visually consistent with the new mockups. */
.badge { font-weight:600; border-radius:var(--nh-r-pill); letter-spacing:.01em; }
.badge.bg-success, .badge.bg-success-subtle { background:var(--nh-success-bg)!important; color:var(--nh-success)!important; }
.badge.bg-warning, .badge.bg-warning-subtle { background:var(--nh-warning-bg)!important; color:var(--nh-warning)!important; }
.badge.bg-danger,  .badge.bg-danger-subtle  { background:var(--nh-danger-bg)!important;  color:var(--nh-danger)!important; }
.badge.bg-info,    .badge.bg-info-subtle     { background:var(--nh-info-bg)!important;    color:var(--nh-info)!important; }
.badge.bg-secondary { background:var(--nh-n100)!important; color:var(--nh-n600)!important; }
.badge.bg-light     { background:var(--nh-n100)!important; color:var(--nh-n700)!important; border-color:var(--nh-n200)!important; }

/* Semantic text utilities aligned to the clinical (muted) palette */
.text-success { color:var(--nh-success)!important; }
.text-danger  { color:var(--nh-danger)!important; }
.text-warning { color:var(--nh-warning)!important; }
.text-info    { color:var(--nh-info)!important; }

/* Neutral dark button (facility admin + list filter chips) on Ward Light */
.btn-dark {
  --bs-btn-bg:var(--nh-n800); --bs-btn-border-color:var(--nh-n800);
  --bs-btn-hover-bg:var(--nh-n900); --bs-btn-hover-border-color:var(--nh-n900);
  --bs-btn-active-bg:var(--nh-n900); --bs-btn-active-border-color:var(--nh-n900);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}

/* ---- KPI hero + stat tiles + ageing buckets (dashboards / receivables) - */
/* Replaces the ad-hoc Material hexes that the older dashboards hand-coded. */
.nh-hero { border-left-width:4px!important; border-left-style:solid!important; }
.nh-hero--risk { border-left-color:var(--nh-danger)!important; }
.nh-hero--cash { border-left-color:var(--nh-warning)!important; }
.nh-hero-amt { font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.nh-hero--risk .nh-hero-amt { color:var(--nh-danger); }
.nh-hero--cash .nh-hero-amt { color:var(--nh-warning); }

.nh-tile { border-radius:var(--nh-r-control); padding:var(--nh-s3); text-align:center;
  border:1px solid var(--nh-n200); background:var(--nh-n50); }
.nh-tile .t-k   { font-size:12px; color:var(--nh-n500); }
.nh-tile .t-v   { font-weight:650; font-variant-numeric:tabular-nums; color:var(--nh-n800); }
.nh-tile .t-sub { font-size:12px; color:var(--nh-n500); }
.nh-tile--fresh { background:var(--nh-success-bg); border-color:var(--nh-success-border); }
.nh-tile--fresh .t-v { color:var(--nh-success); }
.nh-tile--soon  { background:var(--nh-warning-bg); border-color:var(--nh-warning-border); }
.nh-tile--soon .t-v  { color:var(--nh-warning); }
.nh-tile--late  { background:var(--nh-warning-bg); border-color:var(--nh-warning-border); }
.nh-tile--late .t-v  { color:var(--nh-warning); }
.nh-tile--bad   { background:var(--nh-danger-bg); border-color:var(--nh-danger-border); }
.nh-tile--bad .t-v   { color:var(--nh-danger); }
.nh-tile--brand { background:var(--nh-cerulean-50); border-color:var(--nh-cerulean-200); }
.nh-tile--brand .t-v { color:var(--nh-cerulean-700); }
/* Per-role landing hero accent (P5): cerulean rail, distinct from risk/cash. */
.nh-hero--role { border-left-color:var(--nh-cerulean-600)!important; }
.nh-hero--role .nh-hero-amt { color:var(--nh-cerulean-700); }

/* ---- Board overview collapse + "your turn" queue marker (P5) ------------ */
.nh-board-overview > summary.nh-board-sum { display:flex; align-items:center; gap:10px;
  cursor:pointer; list-style:none; margin:0; }
.nh-board-overview > summary.nh-board-sum::-webkit-details-marker { display:none; }
.nh-board-overview[open] > summary.nh-board-sum { margin-bottom:var(--nh-s3); }
.nh-board-sum .nh-i { color:var(--nh-cerulean-600); }
.nh-turn-row { background:var(--nh-cerulean-50); }
.nh-turn-row:hover { background:var(--nh-cerulean-50); }
.nh-turn-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px;
  font-weight:600; padding:1px 7px; border-radius:999px;
  background:var(--nh-cerulean-100, var(--nh-cerulean-50)); color:var(--nh-cerulean-700); }

/* ---- Empty states (DESIGN-SYSTEM 5.11) ----------------------------------
   Centred icon + title + one sentence + one next-action button. Copy states
   the next act, not the absence. Never illustrations, never mascots. */
.nh-empty { text-align:center; padding:var(--nh-s10) var(--nh-s5); }
.nh-empty > .nh-i { width:40px; height:40px; color:var(--nh-n300); display:block; margin:0 auto var(--nh-s3); }
.nh-empty .nh-empty-title { font-size:16px; line-height:22px; font-weight:600; color:var(--nh-n800); margin:0 0 var(--nh-s1); }
.nh-empty p { font-size:13px; line-height:18px; color:var(--nh-n500); margin:0 0 var(--nh-s4); }

/* ---- Field-level errors (DESIGN-SYSTEM 5.2) ------------------------------
   Converge the vendored Bootstrap validation classes onto the Ward Light
   danger token: red border + a 13px help line with the circle-alert icon. */
.form-control.is-invalid, .form-select.is-invalid {
  border-color:var(--nh-danger); background-image:none;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color:var(--nh-danger);
}
.invalid-feedback { color:var(--nh-danger); font-size:13px; }
.invalid-feedback .nh-i { width:14px; height:14px; }

/* Synthetic clinic-pilot boundary: visible on every operational screen. */
.nh-pilot-banner {
  position:sticky; top:0; z-index:1040; margin-left:var(--nh-sidebar-w);
  padding:6px 16px; background:#3f2d0b; color:#fff7df; text-align:center;
  font-size:12px; font-weight:650; letter-spacing:0;
  border-bottom:1px solid #7b5a17;
}
html.nh-collapsed .nh-pilot-banner { margin-left:var(--nh-sidebar-rail); }
@media (max-width: 767.98px) { .nh-pilot-banner { margin-left:0; } }

/* ---- Print ------------------------------------------------------------- */
@media print {
  .nh-sidebar, .nh-mobiletop, .nh-mobilenav, .nh-tabs, .no-print { display:none!important; }
  .nh-main, html.nh-collapsed .nh-main { margin-left:0!important; }
  .nh-wrap { max-width:100%; padding:0; }
  body { background:#fff; }
  .state-chip, .pa-chip, .nh-chip {
    border:.75pt solid #000!important; background:#fff!important; color:#000!important;
  }
  .st-In-session::before, .nh-chip--insession::before { display:none!important; }
  .card, .nh-card, .nh-sec { box-shadow:none!important; border:1px solid #999; }
  /* On-screen flowsheet grid, if printed directly: full cell rules so it
     photocopies legibly. The legal record still prints its bordered table. */
  .nh-flowsheet { overflow:visible!important; }
  .nh-fs-head, .nh-fs-head > *, .nh-fs-c { border:.5pt solid #000!important; }
  .nh-flowsheet #vitals-list { border:0; border-radius:0; }
  .nh-fs-row { border-bottom:0; }
}