/* ============================================================
   EMR MD — shared theme tokens

   LIGHT (default) = clinical stationery. Cool paper, royal ink.
   DARK            = royal night. Deep navy glass.

   TYPE — chosen for clinicians, not for looks:
   · IBM Plex Sans  — body & UI. Unambiguous 1/l/I and 0/O, true
                      tabular figures. Built for technical reading.
   · IBM Plex Mono  — all data, IDs, doses, timestamps. Slashed zero on.
   · Source Serif 4 — titles only. Journal authority, not decoration.
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* --- royal blue ramp --- */
  --royal-50:  #EEF3FE;
  --royal-100: #DDE7FD;
  --royal-200: #BFD0FA;
  --royal-400: #5B8DEF;
  --royal-500: #3D6FE8;
  --royal-600: #2350C8;
  --royal-700: #1A3C9E;
  --royal-800: #142E78;
  --royal-900: #0D1E52;
  --royal-950: #071233;

  /* --- auth / device --- */
  --chassis: #DDE4F2;
  --screen: #FDFDFF;
  --screen-2: #FFFFFF;
  --bezel: #C2CEE6;
  --strip-bg: rgba(253, 253, 255, 0.9);

  --hair: rgba(15, 30, 61, 0.12);
  --hair-soft: rgba(15, 30, 61, 0.06);

  /* cardiology chart paper, drawn in royal instead of salmon */
  --grid-fine: rgba(35, 80, 200, 0.10);
  --grid-bold: rgba(35, 80, 200, 0.20);
  --grid-fine-size: 13px;
  --grid-bold-size: 65px;
  --scan: rgba(15, 30, 61, 0.006);
  --vignette: rgba(35, 80, 200, 0.07);

  /* --- console surfaces --- */
  --page: #F3F6FC;
  --surface: #FFFFFF;
  --surface-2: #F8FAFE;
  --surface-3: #EFF4FC;
  --sidebar: #FAFCFF;
  --topbar: rgba(255, 255, 255, 0.92);
  --border: rgba(15, 30, 61, 0.11);
  --border-strong: rgba(15, 30, 61, 0.22);
  --app-grid: rgba(35, 80, 200, 0.04);
  --shadow-sm: 0 1px 2px rgba(13, 30, 82, 0.06);
  --shadow-md: 0 8px 24px -14px rgba(13, 30, 82, 0.28);
  --shadow-lg: 0 24px 56px -22px rgba(13, 30, 82, 0.32);

  /* --- brand --- */
  --brand: var(--royal-600);
  --brand-deep: var(--royal-700);
  --brand-soft: var(--royal-50);

  /* --- data channels --- */
  --ch-ecg: #2350C8;     /* primary series + brand */
  --ch-spo2: #0B6FA8;    /* info / secondary */
  --ch-nibp: #A8306B;    /* tertiary */
  --ch-resp: #8A5B08;    /* quaternary */
  --ch-violet: #5B3FC4;  /* operator tier */
  --glow-ecg: rgba(35, 80, 200, 0.20);
  --glow-spo2: rgba(11, 111, 168, 0.16);
  --glow-resp: rgba(138, 91, 8, 0.16);
  --trace-w: 2.1;

  /* --- ink --- */
  --txt: #0F1E3D;
  --txt-dim: #45577E;
  --txt-faint: #5E6D8A;   /* 4.8:1 on page tint — metadata still has to be readable */

  --panel-bg: linear-gradient(165deg, #FFFFFF, #FBFCFF);
  --panel-line: rgba(15, 30, 61, 0.14);
  --panel-shadow: inset 0 1px 0 #fff, 0 28px 70px -26px rgba(13, 30, 82, 0.4);
  --panel-blur: blur(3px);

  --field-bg: #F9FBFE;
  --field-line: rgba(15, 30, 61, 0.18);
  --field-focus-bg: rgba(35, 80, 200, 0.05);

  --btn-bg: linear-gradient(180deg, #2E5CD6, #1D46B4);
  --btn-txt: #FFFFFF;
  --btn-shadow: 0 10px 24px -10px rgba(29, 70, 180, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  --tint-soft: rgba(35, 80, 200, 0.045);
  --tint-soft-2: rgba(15, 30, 61, 0.09);

  /* --- semantic status, decoupled from brand --- */
  --ok: #0F7A4E;      --ok-soft: rgba(15, 122, 78, 0.10);
  --warn: #8A5B08;    --warn-soft: rgba(138, 91, 8, 0.10);
  --bad: #BE2F26;     --bad-soft: rgba(190, 47, 38, 0.09);
  --info: #0B6FA8;    --info-soft: rgba(11, 111, 168, 0.09);
  --agency: #2350C8;  --agency-soft: rgba(35, 80, 200, 0.10);

  /* --- type --- */
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --num:  "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --tech: "Source Serif 4", "Iowan Old Style", Georgia, serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --chassis: #050916;
  --screen: #0A1024;
  --screen-2: #0D1530;
  --bezel: #1C2851;
  --strip-bg: rgba(7, 12, 28, 0.7);

  --hair: rgba(255, 255, 255, 0.10);
  --hair-soft: rgba(255, 255, 255, 0.055);

  --grid-fine: rgba(120, 160, 255, 0.045);
  --grid-bold: rgba(120, 160, 255, 0.045);
  --grid-fine-size: 26px;
  --grid-bold-size: 26px;
  --scan: rgba(255, 255, 255, 0.014);
  --vignette: rgba(0, 0, 0, 0.55);

  --page: #070C1C;
  --surface: #101832;
  --surface-2: #141E3C;
  --surface-3: #1A2549;
  --sidebar: #0A1128;
  --topbar: rgba(10, 17, 40, 0.88);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.19);
  --app-grid: rgba(120, 160, 255, 0.022);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 28px -12px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.9);

  --brand: #5B8DEF;
  --brand-deep: #3D6FE8;
  --brand-soft: rgba(91, 141, 239, 0.14);

  --ch-ecg: #5B8DEF;
  --ch-spo2: #56C7F0;
  --ch-nibp: #F07FB4;
  --ch-resp: #F5C14E;
  --ch-violet: #A78BFA;
  --glow-ecg: rgba(91, 141, 239, 0.55);
  --glow-spo2: rgba(86, 199, 240, 0.45);
  --glow-resp: rgba(245, 193, 78, 0.4);
  --trace-w: 1.9;

  --txt: #E6ECFA;
  --txt-dim: #94A3C4;
  --txt-faint: #7A89B0;   /* 5.0:1 on surface */

  --panel-bg: linear-gradient(165deg, rgba(20, 30, 60, 0.95), rgba(9, 15, 34, 0.96));
  --panel-line: rgba(255, 255, 255, 0.13);
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  --panel-blur: blur(14px) saturate(1.2);

  --field-bg: rgba(255, 255, 255, 0.05);
  --field-line: rgba(255, 255, 255, 0.15);
  --field-focus-bg: rgba(91, 141, 239, 0.09);

  --btn-bg: linear-gradient(180deg, #6E9AF5, #3D6FE8);
  --btn-txt: #061029;
  --btn-shadow: 0 10px 26px -10px rgba(61, 111, 232, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --tint-soft: rgba(255, 255, 255, 0.05);
  --tint-soft-2: rgba(255, 255, 255, 0.10);

  --ok: #3FD08A;      --ok-soft: rgba(63, 208, 138, 0.13);
  --warn: #F5C14E;    --warn-soft: rgba(245, 193, 78, 0.13);
  --bad: #FF8B7A;     --bad-soft: rgba(255, 139, 122, 0.14);
  --info: #56C7F0;    --info-soft: rgba(86, 199, 240, 0.13);
  --agency: #5B8DEF;  --agency-soft: rgba(91, 141, 239, 0.14);
}

/* ---------- Reset & base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--chassis);
  color: var(--txt);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Components get turned into links all the time — a stat tile, a card, a
   row. Every one of them then picks up a browser underline unless the
   component remembers to kill it, and sooner or later one forgets. Reset
   here instead. Every deliberate underline in this codebase is a :hover
   state, so they all still win on specificity. */
a { color: inherit; text-decoration: none; }

/* Clinical safety: slashed zero and tabular figures everywhere data lives.
   An MRN, a dose, or an NPI must never be misread. */
.mono, code, kbd,
[class*="num"], .tnum, .l-key, .limit-val,
.kpi .k-val, .vital .v-num, .htile .v, .tc-stat .v, .p-price {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ch-ecg);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tint-soft-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

::selection { background: var(--brand-soft); color: var(--txt); }

/* ---------- Utilities ---------- */

.mono { font-family: var(--mono); font-size: 0.92em; }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--txt-dim); }
.faint { color: var(--txt-faint); }
.nowrap { white-space: nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Theme switch (shared) ---------- */

.theme-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--tint-soft);
  flex: none;
}

.theme-switch button {
  width: 30px; height: 24px;
  border: 0; background: none;
  color: var(--txt-faint);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switch button:hover { color: var(--txt); }
.theme-switch button[aria-pressed="true"] { background: var(--brand-soft); color: var(--ch-ecg); }

/* ============================================================
   DEV ONLY — floating flow navigator
   ============================================================ */

.flow-nav {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-family: var(--body);
}

.flow-nav-fab {
  width: 44px; height: 44px;
  border-radius: 99px;
  border: 1px solid var(--ch-ecg);
  background: var(--surface, var(--panel-bg));
  color: var(--ch-ecg);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.15s ease;
}
.flow-nav-fab:hover { transform: translateY(-2px); }

.flow-nav-panel {
  width: 262px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-lg);
  padding: 9px;
  display: none;
}
.flow-nav.open .flow-nav-panel { display: block; }

.flow-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 7px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.flow-nav-head .t {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--txt-faint);
}

.flow-nav-arrows { display: flex; gap: 6px; }
.flow-nav-arrows a {
  width: 25px; height: 25px;
  border-radius: 7px;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--ch-ecg);
  text-decoration: none;
  font-size: 13px; font-weight: 700;
}
.flow-nav-arrows a:hover { background: var(--brand-soft); border-color: var(--ch-ecg); }
.flow-nav-arrows a.disabled { opacity: 0.3; pointer-events: none; }

.flow-nav-list { list-style: none; max-height: 320px; overflow-y: auto; }
.flow-nav-list .grp {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--txt-faint);
  padding: 9px 9px 4px;
}
.flow-nav-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--txt-dim);
  text-decoration: none;
}
.flow-nav-list a:hover { background: var(--tint-soft); color: var(--txt); }
.flow-nav-list a.current { background: var(--brand-soft); color: var(--ch-ecg); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   [hidden] MUST ACTUALLY HIDE

   The UA stylesheet's `[hidden] { display: none }` is a bare attribute
   selector, so any class that sets a display value beats it. Forty-two
   elements in this app were toggled with the hidden attribute while their
   class said display:flex or display:grid — meaning they never hid at all.
   The scheduler's week grid, the assistant popup and every .notice that is
   supposed to appear conditionally were all permanently visible.

   One rule, once, rather than a [hidden] override per component that
   somebody will forget the next time.
   ══════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }