:root {
  /* Legacy warm-ink aliases now resolve to the cool ramp defined in the second
     :root below, so the ~74 selectors still using --ink/--muted/--line share ONE
     palette with the body color (which is forced to the cool ramp with
     !important). This kills the warm-vs-cool split-brain without rewriting every
     selector. --muted maps to --ink-500 (#475569, ~7:1 on white — passes AA;
     the old #667570 was ~4.0:1 and failed). */
  --ink: #1f2937;
  --muted: #475569;
  --line: #e5e7eb;
  --paper: #f8fafc;
  --panel: #ffffff;
  --teal: #187a74;
  --teal-dark: #0e4d49;
  --mint: #dff0ea;
  --mint-border: #b7ddd4;
  --sun: #f4c95d;
  --peach: #f6d3bf;
  --amber: #b7791f;
  --rose: #b84949;
  --green: #27815d;
  --violet: #5f5aa2;
  --blue: #2563eb;
  --soft-shadow: 0 2px 6px rgba(28, 48, 42, 0.10), 0 8px 24px rgba(28, 48, 42, 0.08);
  --shadow: 0 18px 45px rgba(28, 48, 42, 0.13);

  /* ── Design-system foundation (Stage 1 of the visual overhaul) ──
     Canonical primitives the refreshed components reference. Added here (the
     first/source-of-truth :root) so the teal tint ramp, semantic status colors,
     and an 8px spacing scale stop being ad-hoc fallbacks scattered across
     selectors. Existing brand tokens above are unchanged; these only ADD the
     missing rungs the mockups rely on. */

  /* Teal brand ramp (tints of --teal #187a74) — used for hub bands, tile
     borders, active fills, focus rings. Previously faked as one-off
     var(--teal-100, #...) fallbacks. */
  --teal-50:  #eef7f4;
  --teal-100: #d3ebe5;
  --teal-200: #a9d7cd;
  --teal-600: #157067;
  --teal-700: #0e4d49;

  /* Semantic status (paired fill + text for pills/badges, AA on white) */
  --status-ok-bg:    #e6f4ec;  --status-ok-fg:    #1b6e44;
  --status-warn-bg:  #fdf0d5;  --status-warn-fg:  #8a5a00;
  --status-danger-bg:#fbe6e6;  --status-danger-fg:#a02525;
  --status-info-bg:  #e6eefb;  --status-info-fg:  #1e4fb0;
  --status-neutral-bg:#eef2f6; --status-neutral-fg:#475569;

  /* 8px spacing scale — one rhythm for padding/margins/gaps. The recurring
     "crowded / give it space" feedback is a missing-scale problem; reach for
     these instead of magic pixel values. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Radii + focus ring (aliases to the canonical --r-* defined later; kept here
     so components can reference one name) */
  --radius-card: 14px;
  --radius-control: 10px;
  --focus-ring: 0 0 0 3px rgba(24, 122, 116, 0.30);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  background:
    linear-gradient(180deg, rgba(223, 240, 234, 0.58) 0, rgba(247, 251, 248, 0) 360px),
    var(--paper);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px clamp(24px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  border-bottom: 1px solid rgba(14, 77, 73, 0.12);
  box-shadow: 0 2px 12px rgba(28, 48, 42, 0.07);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.brand-logo {
  width: 150px;
  height: 44px;
  flex: 0 0 150px;
  object-fit: contain;
  padding: 0;
  border: 0;
  background: transparent;
}

.brand strong {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand small {
  color: var(--muted);
  margin-top: 2px;
}

.nav-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav-list::-webkit-scrollbar { height: 4px; }
.nav-list::-webkit-scrollbar-thumb { background: rgba(14,77,73,0.18); border-radius: 4px; }

.nav-button {
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  /* Primary navigation should read as primary — use the strong ink color, not
     the muted gray that made the menu recede. */
  color: #1e293b;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.005em;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.nav-button:hover,
.nav-button:focus-visible {
  color: var(--teal-dark);
  background: rgba(15, 118, 110, 0.06);
  outline: none;
}

.nav-button.is-active {
  color: var(--teal-dark);
  background: transparent;
  border-bottom-color: var(--teal);
}

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.family-inbox-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.family-inbox-row-body {
  margin: 6px 0;
}

.family-inbox-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.resident-document-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.resident-document-notes {
  margin: 6px 0 0;
}
.resident-document-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.resident-document-row-actions {
  display: inline-flex;
  gap: 6px;
}

.workspace {
  min-width: 0;
  max-width: 1360px;
  margin: 0 auto;
  padding-top: calc(68px + 16px);
  padding-bottom: 56px;
  padding-left: clamp(20px, 3vw, 36px);
  padding-right: clamp(20px, 3vw, 36px);
}

.topbar,
.section-heading,
.panel-heading,
.form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ============================================================================
   Navigation shell — Cisco-style: a full-width top app-bar spanning the top, a
   NARROW icon-over-label rail on the left below it, content filling the rest,
   and a section flyout that overlays content. The app-bar (.app-topbar) + flyout
   are built in JS (buildNavShell) by MOVING existing nodes, so all data-control
   ids are preserved.
   ============================================================================ */
html .app-shell {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar topbar"
    "rail   main";
  min-height: 100vh;
}

/* ── Top app-bar (full width) ───────────────────────────────────────────── */
/* A distinct dark-teal brand bar so the chrome reads apart from white content. */
html .app-topbar {
  grid-area: topbar;
  /* fixed (not sticky): the whole shell scrolls with the window, so sticky had
     nothing to stick to and the bar scrolled off on long pages. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--teal-dark, #0e4d49);
  border-bottom: 1px solid var(--teal-700, #0e4d49);
}
/* On the dark bar, the action controls + text go light. */
html .app-topbar .topbar-actions,
html .app-topbar .topbar-search,
html .app-topbar .topbar-theme,
html .app-topbar .topbar-manual,
html .app-topbar .topbar-signout { color: #eaf5f2; }
html .app-topbar .topbar-search {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #eaf5f2;
}
html .app-topbar .topbar-search .topbar-search-kbd { color: #b9dcd5; border-color: rgba(255,255,255,0.25); }
html .app-topbar .topbar-search::placeholder { color: #b9dcd5; }
/* The action cluster must never overflow the bar: allow it to shrink and, when
   space is tight, the tiered rules below drop labels to icons. */
html .app-topbar .topbar-actions { min-width: 0; flex-wrap: nowrap; }
html .app-topbar .topbar-search { min-width: 0; flex: 0 1 auto; }
/* Mid widths (<=1180px): collapse Theme/Manual/Sign out to icon-only + drop the
   status pill so the row fits without overflow well before 952px. */
@media (max-width: 1180px) {
  html .app-topbar .topbar-theme span,
  html .app-topbar .topbar-manual span,
  html .app-topbar .topbar-signout span { display: none; }
  html .app-topbar .topbar-identity .status-pill { display: none; }
  html .app-topbar .topbar-search { max-width: 200px; }
  html .app-topbar .topbar-sep { display: none; }
  /* Once these collapse to icon-only, keep them ≥32px so they remain usable
     touch targets on mobile (WCAG 2.5.5 / the Selenium touch-target gate). */
  html .app-topbar .topbar-theme,
  html .app-topbar .topbar-manual,
  html .app-topbar .topbar-signout {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* Identity lozenge on the dark bar: translucent, not the light pill. */
html .app-topbar .topbar-identity {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
html .app-topbar .topbar-identity .user-chip {
  color: #ffffff !important; background: transparent !important; border: 0 !important;
}
html .app-topbar .topbar-identity .status-pill {
  color: #cfe8e2 !important; background: transparent !important; border: 0 !important;
}
html .app-topbar .topbar-sep { background: rgba(255, 255, 255, 0.18); }
html .app-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 0 0 auto;
}
/* On the dark-teal bar the full teal wordmark is low-contrast and the old
   brightness/invert filter turned the whole logo (incl. the white "R") solid
   white — the R vanished. Instead show the self-contained R badge (its white
   monogram reads on any background) + a white "RohaChart" text label. */
html .app-topbar-brand .brand-logo { display: none; }
html .app-topbar-brand .brand-mark {
  display: block;
  height: 30px;
  width: 30px;
}
/* White wordmark next to the badge, generated via ::after so no asset change. */
html .app-topbar-brand::after {
  content: "RohaChart";
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
html .app-topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* The in-content topbar is now empty (its actions moved to the app-bar); hide it. */
html .workspace .topbar { display: none; }

/* ── Narrow rail (icon over label) ──────────────────────────────────────── */
html .sidebar {
  grid-area: rail;
  /* fixed (not sticky) — see .app-topbar note. Pinned below the 56px bar. */
  position: fixed;
  top: 56px; left: 0;
  align-self: start;
  height: calc(100vh - 56px);
  width: 100px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 8px;
  border-bottom: none;
  border-right: 1px solid var(--teal-100, #d3ebe5);
  /* !important beats the base `.sidebar { background: var(--surface) !important }` */
  background: var(--teal-50, #eef7f4) !important;
  overflow-y: auto;
  box-shadow: none;
}
/* Brand moved to the app-bar; any leftover brand/search node in the rail hides. */
html .sidebar .brand,
html .sidebar .rail-search { display: none; }
html .nav-list {
  flex-direction: column;
  flex: 0 0 auto;
  gap: 2px;
  overflow: visible;
}
/* Each rail item: icon centered over a small label, like Cisco. !important on
   the layout props because the base stylesheet has an aggressive `.nav-button`
   !important layer (font/color) and horizontal-bar defaults. */
/* Permission-gated tabs (Billing / Administration / Integrations) hide via the
   [hidden] attribute set in render(). The aggressive `display: flex !important`
   below would otherwise keep a hidden button visible, so [hidden] must win. */
html .nav-button[hidden] { display: none !important; }
html .nav-button {
  width: 100% !important;
  min-height: 58px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  line-height: 1.15;
  color: var(--muted, #64748b);
  white-space: normal !important;
  position: relative;
}
html .nav-button .nav-icon {
  width: 22px; height: 22px; flex: 0 0 22px;
}
html .nav-button .nav-label {
  font-size: 11px; font-weight: 600;
  /* wrap only between whole words (never mid-word like "Dash board") */
  white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none;
}
html .nav-button:hover { background: var(--teal-100, #d3ebe5); color: var(--teal-dark, #0e4d49); }
html .nav-button:focus-visible { outline: 2px solid var(--teal, #0f766e); outline-offset: -2px; }
html .nav-button.is-active {
  background: var(--teal-50, #e6f2f1);
  color: var(--teal-dark, #0e4d49);
}
html .nav-button.is-active .nav-icon { color: var(--teal-dark, #0e4d49); }
/* Badges (family inbox / approval queue) become a small dot at the top-right. */
html .nav-button .nav-badge {
  position: absolute;
  top: 6px; right: 12px;
  margin: 0;
  font-size: 10px;
  min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Content column ─────────────────────────────────────────────────────── */
/* Fill the grid column — override the base centered 1360px cap so content uses
   the full width beside the rail (no wasted right gutter). */
html .workspace {
  grid-area: main;
  margin: 0 !important;
  max-width: none !important;
  width: auto;
  /* top padding clears the fixed 56px app-bar (the bar is out of grid flow). */
  padding: 72px clamp(20px, 3vw, 40px) 48px;
}

/* ── Flyout (overlays content; opens from a rail item) ──────────────────── */
html .nav-flyout-backdrop {
  position: fixed;
  inset: 56px 0 0 100px;
  z-index: 55;
  /* Non-modal flyout: no dimming and no pointer capture, so content behind stays
     clickable. An outside-click closes the flyout (handled in JS). Previously the
     opaque backdrop intercepted every content click, blocking the whole UI. */
  background: transparent;
  pointer-events: none;
}
html .nav-flyout {
  position: fixed;
  top: 56px; left: 100px; bottom: 0;
  z-index: 56;
  width: 320px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-right: 1px solid var(--line, #e5e7eb);
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12);
  animation: navFlyoutIn 0.14s ease-out;
}
@keyframes navFlyoutIn {
  from { transform: translateX(-8px); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}
html .nav-flyout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
html .nav-flyout-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html .nav-flyout-back {
  border: 0; background: none; padding: 0;
  font-size: 12px; color: var(--teal-dark, #0e4d49); cursor: pointer; text-align: left;
}
html .nav-flyout-back:hover { text-decoration: underline; }
html .nav-flyout-title {
  font-size: 16px; font-weight: 700; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html .nav-flyout-close {
  border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--muted, #64748b);
  padding: 4px; border-radius: 6px; flex: 0 0 auto;
}
html .nav-flyout-close:hover { background: var(--surface-sunken, #f1f5f9); color: var(--ink, #1f2937); }
/* min-height:0 lets this flex child shrink below its content so overflow-y
   actually scrolls (without it the last item — History — is clipped). */
html .nav-flyout-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 10px 20px; }

/* Grouped chart sections */
html .nav-flyout-group + .nav-flyout-group { margin-top: 14px; }
html .nav-flyout-group.is-standalone + .nav-flyout-group.is-standalone { margin-top: 0; }
html .nav-flyout-group:not(.is-standalone) + .nav-flyout-group.is-standalone,
html .nav-flyout-group.is-standalone:first-child {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e5e7eb);
}
html .nav-flyout-group-title {
  margin: 0 0 4px; padding: 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #64748b);
}
html .nav-flyout-group-items { display: flex; flex-direction: column; gap: 1px; }
html .nav-flyout-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent;
  font-size: 13px; color: var(--ink, #1f2937); text-align: left; cursor: pointer;
}
html .nav-flyout-item:hover { background: var(--surface-sunken, #f1f5f9); }
html .nav-flyout-item:focus-visible { outline: 2px solid var(--teal, #0f766e); outline-offset: -2px; }
html .nav-flyout-item.is-active { background: var(--teal-50, #e6f2f1); color: var(--teal-dark, #0e4d49); font-weight: 600; }
html .nav-flyout-item-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.75; }
html .nav-flyout-item.is-active .nav-flyout-item-icon { opacity: 1; color: var(--teal-dark, #0e4d49); }

/* Resident picker (search + list) */
html .nav-flyout-search {
  position: relative; margin: 12px 12px 4px;
}
html .nav-flyout-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted, #64748b);
}
html .nav-flyout-search-input {
  width: 100%; padding: 8px 10px 8px 32px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
  font-size: 13px; background: var(--surface, #fff); color: var(--ink, #1f2937);
}
html .nav-flyout-search-input:focus-visible { outline: 2px solid var(--teal, #0f766e); outline-offset: 0; }
html .nav-flyout-residents { padding-top: 4px; }
html .nav-flyout-resident {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left;
}
html .nav-flyout-resident:hover { background: var(--surface-sunken, #f1f5f9); }
html .nav-flyout-resident:focus-visible { outline: 2px solid var(--teal, #0f766e); outline-offset: -2px; }
html .nav-flyout-resident-name { font-size: 13px; font-weight: 600; color: var(--ink, #1f2937); }
html .nav-flyout-resident-detail { font-size: 11px; color: var(--muted, #64748b); }
html .nav-flyout-empty { padding: 16px 12px; font-size: 13px; color: var(--muted, #64748b); }

/* Admin section page heading. */
html .admin-launcher-section-title {
  margin: 2px 0 2px; font-size: 20px; font-weight: 700; color: var(--ink, #0f172a);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet: narrow the rail a touch and let long labels wrap; flyout tracks the
   rail width. */
@media (max-width: 1024px) {
  html .app-shell { grid-template-columns: 88px minmax(0, 1fr); }
  html .sidebar { width: 88px; }
  html .nav-flyout { left: 88px; }
  html .nav-flyout-backdrop { inset: 56px 0 0 88px; }
}

/* Phones/small: the rail becomes an icon-only strip (labels hidden) and the
   flyout + backdrop cover the whole area beside it so it's usable one-handed. */
@media (max-width: 720px) {
  html .app-shell { grid-template-columns: 60px minmax(0, 1fr); }
  html .app-topbar { height: 52px; padding: 0 10px; gap: 8px; }
  html .app-topbar .topbar-theme span,
  html .app-topbar .topbar-manual span,
  html .app-topbar .topbar-signout span,
  html .app-topbar .topbar-sep { display: none; }
  /* At phone width the Search field + identity chip don't fit alongside the
     icon actions — collapse Search to a compact icon button and hide identity
     (search stays reachable; the command palette also opens it). */
  html .app-topbar .topbar-search { max-width: 40px; padding: 8px; overflow: hidden; }
  html .app-topbar .topbar-search span,
  html .app-topbar .topbar-search kbd { display: none; }
  html .app-topbar .topbar-identity { display: none; }
  html .app-topbar .topbar-actions { gap: 4px; }
  html .app-topbar .topbar-facility-switch {
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
    justify-content: center;
  }
  html .app-topbar .topbar-facility-switch span { display: none; }
  html .app-topbar .topbar-signout { margin-left: 0; }
  html .app-topbar .topbar-theme,
  html .app-topbar .topbar-manual,
  html .app-topbar .topbar-signout {
    min-width: 44px;
    min-height: 44px;
  }
  html .sidebar { width: 60px; top: 52px; height: calc(100vh - 52px); padding: 8px 4px; }
  html .nav-button { min-height: 48px; padding: 6px 2px; gap: 2px; }
  html .nav-button .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }
  /* Icon-only visually, but keep the label as the accessible name (not
     display:none, which would strip the button's name for screen readers). */
  html .nav-button .nav-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html .nav-button .nav-badge { top: 4px; right: 8px; }
  html .workspace { padding: 64px 14px 40px; }
  html .nav-flyout { top: 52px; left: 60px; width: calc(100vw - 60px); max-width: none; box-shadow: none; }
  html .nav-flyout-backdrop { inset: 52px 0 0 60px; }
  html .admin-launcher-section-title { font-size: 18px; }

  .resident-photo { width: 68px; }
  html .resident-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  html .resident-action-group > .compact-action {
    min-height: 44px !important;
    width: 100%;
    padding: 6px 8px !important;
    white-space: normal;
    text-align: center;
  }
  html .resident-action-group > .resident-discharge-action { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  html .app-topbar-brand::after { display: none; }
}

.topbar {
  min-height: 44px;
  margin-bottom: 14px;
  padding: 4px 0;
}
/* On the dashboard the brand is hidden, leaving only the action row (status /
   user / manual / sign out). Pull it tight to the hero card below and pad its
   right edge to match the card's inner content edge, so the two right-side
   clusters (Sign out · Refresh) stack instead of stepping, and the row reads as
   part of the header band rather than floating on bare background. */
body[data-section="dashboard"] .topbar { margin-bottom: 0; }
body[data-section="dashboard"] .topbar .topbar-actions { padding-right: 24px; }

/* Identity cluster (status + signed-in user) sits on the same soft pill rail as
   the dashboard fact chips, so the two right-side groups read with one visual
   language. The action icons (User Manual / Sign out) stay outside the pill. */
.topbar-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: var(--surface-sunken, #f1f5f4);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
}
/* Status + user render as matching oval pills of the same height/shape inside
   the identity rail, so they read as a paired set rather than mismatched text.
   Scoped under .topbar so these win over the earlier `.topbar .user-chip`
   (mint) rule by specificity + source order. */
.topbar .topbar-identity .status-pill,
.topbar .topbar-identity .user-chip {
  height: 30px !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.topbar .topbar-identity .user-chip { color: var(--ink-900, #15212d) !important; font-weight: 700 !important; }
.topbar .topbar-identity .status-pill { color: var(--ink-700, #334155) !important; font-weight: 600 !important; }

.topbar h1,
.section-heading h2,
.panel h3,
.form-title h3 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.section-heading h2 {
  font-size: 24px;
  line-height: 1.2;
}

.panel h3,
.form-title h3 {
  font-size: 17px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar-actions,
.hero-facts,
.checkbox-row,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.status-pill,
.user-chip,
.chip,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Long, variable-length tags (e.g. the safety banner's "Controlled: a, b, c…"
   list) must wrap their text instead of forcing horizontal overflow of the
   whole row. Short status tags keep the default nowrap pill shape. */
.tag.tag-wrap {
  white-space: normal;
  max-width: 100%;
  border-radius: 14px;
  align-items: flex-start;
  line-height: 1.35;
  padding: 4px 10px;
}

.status-pill {
  color: var(--teal-dark);
  background: var(--mint);
  border-color: #c7e7df;
}

.facility-hero {
  min-height: 56px;
  margin-bottom: 0;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px clamp(16px, 3vw, 22px);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.facility-hero .hero-copy { flex: 1 1 220px; min-width: 0; }
.facility-hero .hero-copy p { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.facility-hero .hero-copy h2 { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 2px 0 0; }
.facility-hero .hero-facts { margin-left: 0; flex: 0 1 auto; }
.facility-hero .primary-action { margin-left: auto; }

.facility-hero::after {
  display: none;
}

.hero-copy {
  max-width: none;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-copy p,
.hero-copy h2 {
  margin: 0;
  /* Long facility names / license eyebrows must wrap inside the card, not spill
     past the viewport on a phone (measured 401px right edge at 390px width). */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-copy p {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.sidebar.visual-static-sidebar {
  position: static;
}

.hero-copy h2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.hero-copy h2:empty {
  display: none;
}

.hero-facts {
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}

.hero-facts span {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}

.toast {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #26312f;
  color: #fff;
  box-shadow: var(--shadow);
  z-index: 10;
}

.toast.is-visible {
  display: block;
}

/* Tone variants so a failure doesn't read like a confirmation (the default
   neutral charcoal is used for plain info toasts). */
.toast.toast--error {
  background: #8f1922;
}
.toast.toast--success {
  background: #14603f;
}

.page-section {
  display: none;
}

.page-section.is-active {
  display: grid;
  gap: 28px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  min-height: 104px;
}

.metric {
  min-height: 72px;
  display: grid;
  align-content: space-between;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.metric small {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric strong {
  font-size: 24px;
  line-height: 1.1;
}

.metric[data-tone="risk"] {
  border-left: 3px solid var(--rose);
}

.metric[data-tone="warning"] {
  border-left: 3px solid var(--amber);
}

.metric[data-tone="clinical"] {
  border-left: 3px solid var(--teal);
}

.metric[data-tone="finance"] {
  border-left: 3px solid var(--violet);
}

.metric[data-tone="steady"] {
  border-left: 3px solid var(--sun);
}

.metric[data-tone="positive"] {
  border-left: 3px solid var(--green);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.platform-card {
  min-height: 88px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.platform-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.platform-card strong {
  font-size: 19px;
  line-height: 1.15;
}

.platform-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.platform-card[data-tone="clinical"] {
  border-left: 3px solid var(--teal);
}

.platform-card[data-tone="resident"] {
  border-left: 3px solid var(--blue);
}

.platform-card[data-tone="finance"] {
  border-left: 3px solid var(--violet);
}

.platform-card[data-tone="compliance"] {
  border-left: 3px solid var(--green);
}

.two-column,
.resident-layout,
.three-column,
.form-row,
.access-layout,
.documentation-layout,
.emar-layout {
  display: grid;
  gap: 16px;
}

.two-column,
.access-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

/* Company Account and Compliance are secondary — muted panel style */
.panel-secondary {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

#section-dashboard #signupForm {
  display: none;
}

/* ── Forms: tile grid ── */
.compact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.compact-label select {
  width: auto;
  min-height: 36px;
  padding: 4px 30px 4px 8px;
  font-size: 0.85rem;
}

.form-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* Forms list is grouped by category (Admission, Assessment, Service Plan, …) so
   the page reads as labeled sections instead of one undifferentiated tile wall.
   When #formTemplateTiles holds category groups it becomes a vertical stack; the
   tile grid lives on each group's .form-category-tiles. */
#formTemplateTiles:has(.form-category-group) {
  display: block;
}
.form-category-group { margin-top: 22px; }
.form-category-group:first-child { margin-top: 8px; }
.form-category-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-dark, #0f766e);
  border-bottom: 1px solid var(--line, #e2e8f0);
  padding-bottom: 6px;
}
.form-category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal, #0f766e) 14%, transparent);
  color: var(--teal-dark, #0f766e);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.form-category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Resident-context form tiles — smaller, 3-4 per row */
.resident-form-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.resident-form-tile {
  padding: 14px 16px;
  border-radius: 12px;
}

.resident-form-tile .form-tile-purpose {
  -webkit-line-clamp: 2;
}

.resident-forms-panel .panel-heading {
  margin-bottom: 14px;
}

.form-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 18px 20px;
  box-shadow: var(--soft-shadow);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  cursor: pointer;
}

.form-tile:hover {
  box-shadow: 0 4px 16px rgba(24,122,116,0.13);
  border-color: var(--teal);
  transform: translateY(-1px);
}

.form-tile-category {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.form-tile-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.form-tile-purpose {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.form-tile-meta {
  font-size: 0.75rem;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* ── Forms: detail / full-page view ── */
.form-detail-topbar {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.back-btn {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.back-btn:hover {
  background: var(--hover, #f0f5f4);
}

.form-detail-meta {
  flex: 1;
  min-width: 0;
}

.form-detail-meta h2 {
  margin: 2px 0 4px;
  font-size: 1.15rem;
}

.form-detail-meta .muted {
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.form-detail-meta .eyebrow {
  margin: 0;
}

.form-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.form-detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.form-web-col,
.form-print-col {
  min-width: 0;
}

.form-print-preview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  font-size: 0.85rem;
}

.workflow-spec h4 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.form-section-outline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.form-section-outline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.form-section-outline span + span::before {
  content: "·";
  margin: 0 6px;
  color: var(--muted);
}

.section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

.printable-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  width: fit-content;
  color: var(--teal-dark);
  font-weight: 900;
}

.emar-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: start;
}

.emar-order-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

.documentation-layout {
  grid-template-columns: minmax(320px, 0.55fr) minmax(0, 1fr);
  align-items: start;
}

.resident-documentation-layout,
.embedded-workflow {
  margin-top: 16px;
}

.embedded-workflow {
  display: grid;
  gap: 14px;
}

.emar-side {
  display: grid;
  gap: 16px;
}

.emar-card {
  min-height: 0;
}

.med-safety-panel {
  margin-bottom: 16px;
}
.med-safety-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.med-safety-status {
  font-size: 0.875rem;
  color: var(--text-muted, #5a6573);
}
.med-safety-summary {
  font-size: 0.875rem;
  color: var(--text-muted, #5a6573);
  margin-bottom: 8px;
}
.med-safety-empty {
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 0.9rem;
  background: #f3f5f7;
  color: #303841;
}
.med-safety-empty[data-tone="ok"]      { background: #e8f7ee; color: #1f6b3a; }
.med-safety-empty[data-tone="info"]    { background: #e8f1fb; color: #1f4f8a; }
.med-safety-empty[data-tone="warning"] { background: #fdf2e3; color: #8a5a17; }
.med-safety-alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.med-safety-alert {
  border-left: 4px solid #b5bcc6;
  background: #fafbfc;
  border-radius: 8px;
  padding: 12px 14px;
}
.med-safety-alert[data-tone="danger"]  { border-left-color: #c0392b; background: #fdecea; }
.med-safety-alert[data-tone="warning"] { border-left-color: #d68910; background: #fdf6e3; }
.med-safety-alert[data-tone="info"]    { border-left-color: #2e86c1; background: #ecf4fb; }
.med-safety-alert header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.med-safety-alert p {
  margin: 4px 0;
  font-size: 0.92rem;
}
.med-safety-mechanism em {
  color: #555;
}
.med-safety-alert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.med-safety-source {
  font-size: 0.8rem;
  color: var(--text-muted, #5a6573);
}
.compact-action.is-success {
  background: #1f6b3a;
  color: #fff;
}
.compact-action.is-warning {
  background: #9a6700;
  color: #fff;
}

/* SSO divider on the login page ("or" between password sign-in and SSO). */
.login-sso-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted, #5a6573);
  font-size: 0.85rem;
  margin: 14px 0;
}
.login-sso-divider::before,
.login-sso-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border, #d7dde5);
}
.login-sso-divider span {
  padding: 0 10px;
}

.compact-action {
  min-height: 36px;
  width: fit-content;
  padding: 0 12px;
}

.missing-document-item,
.med-pass-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* The middle column (medication name + dose line) must take the remaining
   width and be allowed to shrink/wrap, and the status badge must NOT shrink —
   otherwise a long dose line ("500 mg | 2 tablets | PO | Daily") and the status
   tag ("Medication error" / "Late administration") collide and overlap. */
.med-pass-summary > div {
  flex: 1;
  min-width: 0;
}
.med-pass-summary > .tag {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: nowrap;
}

.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.segmented-control button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--teal-dark);
  background: #f8fbf9;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover/keyboard-focus is a subtle tint so it doesn't impersonate the
   selected state — otherwise users can't tell which range is currently
   active (the bug that made these buttons feel non-functional). */
.segmented-control button:hover,
.segmented-control button:focus-visible {
  color: var(--teal-dark);
  border-color: var(--teal);
  background: #e6f3ee;
  outline: none;
}

/* Selected state is a solid fill with a contrasting ring so it stays
   visibly distinct from hover even after the cursor moves away. */
.segmented-control button.is-active {
  color: #fff;
  border-color: var(--teal-dark);
  background: var(--teal);
  box-shadow: 0 0 0 2px rgba(13, 95, 79, 0.18);
}

.segmented-control button.is-active:hover,
.segmented-control button.is-active:focus-visible {
  color: #fff;
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.med-pass-page,
.mar-pass-form {
  display: grid;
  gap: 12px;
}

.med-pass-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Stretch (not start) so a short recorded "Given" card matches the height of
     a tall pending-entry form in the same row — the grid row reads as an even
     band instead of mismatched-height tiles. */
  align-items: stretch;
}

.med-pass-card {
  display: grid;
  gap: 12px;
  /* Push the recorded-detail / form block to the bottom so the dose header
     lines up across cards and the card fills the row height. */
  grid-template-rows: auto 1fr;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 5px rgba(15, 23, 42, 0.07));
}

/* Record MAR button: full-width + consistent height so every med-pass card's
   button is the same size regardless of how much (PRN/controlled/error) content
   sits above it. Previously it sized to its text and looked inconsistent. */
.mar-pass-form [data-control="submit-mar"] {
  width: 100%;
  min-height: 44px;
  align-self: end;
}

.mar-pass-form .form-grid.compact {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.mar-pass-form textarea {
  min-height: 60px;
}

.med-pass-time {
  min-width: 66px;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 900;
}

.completed-med-pass {
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  background: #f6fbf8;
}

.emar-schedule-panel table {
  min-width: 780px;
}

.resident-layout {
  grid-template-columns: 360px minmax(0, 1fr);
}

.resident-roster-panel {
  overflow: hidden;
}

.resident-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  padding: 2px 2px var(--sp-3);
}

/* Directory header: title block on the left, grid/list toggle on the right. */
.resident-roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.resident-roster-heading-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.resident-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--teal-50);
  padding: 3px;
  border-radius: var(--r-md);
}
.resident-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Min 32px touch target (accessibility gate) — was 34x30 (2px short on
     height), which failed the mobile touch-target audit at 390px. */
  width: 36px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.resident-view-btn:hover { color: var(--ink); }
.resident-view-btn.is-active {
  background: var(--panel);
  color: var(--teal-dark);
  box-shadow: var(--shadow-xs);
}
.resident-view-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.resident-roster-toolbar {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.resident-roster-filters {
  display: inline-flex;
  gap: var(--sp-1);
  background: var(--teal-50);
  padding: 3px;
  border-radius: 999px;
}

.resident-roster-filters .filter-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 600;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.resident-roster-filters .filter-chip.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.resident-dob-line {
  margin: var(--sp-1) 0;
  font-size: var(--fs-meta);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.resident-dob-label {
  font-weight: 700;
  color: var(--ink);
  margin-right: var(--sp-1);
}

.resident-status-pill {
  display: inline-block;
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.resident-roster-search {
  /* UX audit: search input was collapsing to ~34px wide on dashboards where
     filter chips consumed the row. flex-basis 260px guarantees a usable
     target and lets the input wrap to its own line on narrow viewports. */
  flex: 1 1 260px;
  min-width: 240px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: 14px;
  background: var(--panel);
}

.resident-roster-search:focus {
  outline: none;
  border-color: var(--teal-200);
  box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
  .resident-roster-grid {
    grid-template-columns: 1fr;
  }
}

/* Directory card — matches the resident-directory mockup: avatar + name/risk
   row, status sub-tags, DOB + care line, and a divider footer carrying the
   document-completeness indicator. Tokenized to the design system so it reads
   like the rest of the app (card radius, soft elevation, 8px spacing scale). */
.resident-roster-grid .resident-card {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 0;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.resident-card-clickable { cursor: pointer; }
.resident-roster-grid .resident-card.resident-card-clickable:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.resident-card-clickable:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.resident-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.resident-roster-grid .resident-card .avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.resident-card-body { min-width: 0; }
.resident-card-namerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.resident-card-namerow > strong {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}
.resident-risk-tag {
  flex: 0 0 auto;
  white-space: nowrap;
}
.resident-subtag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.resident-subtag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.5;
}
.resident-subtag-away { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.resident-subtag-discharged { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.resident-subtag-active { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.resident-card .resident-dob-line {
  margin: var(--sp-2) 0 0;
}
.resident-card .resident-care-line {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.45;
}
.resident-sep { color: var(--line); margin: 0 2px; }
.resident-card-footer {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.resident-doc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-meta);
  font-weight: 600;
}
.resident-doc-status.is-complete { color: var(--status-ok-fg); }
.resident-doc-status.is-missing { color: var(--status-warn-fg); }
.resident-doc-icon { font-size: 13px; line-height: 1; }

/* List view — compact table alternative to the card grid. */
.resident-roster-list { padding: 2px 0 var(--sp-2); }
.resident-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.resident-list-table thead th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.resident-list-table tbody td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.resident-list-row { cursor: pointer; transition: background 0.1s; }
.resident-list-row:hover { background: var(--teal-50); }
.resident-list-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.resident-list-name { display: flex; align-items: center; gap: var(--sp-2); }
.resident-list-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: var(--fs-meta);
  flex: 0 0 auto;
}
.resident-list-name-text { font-weight: 600; }
@media (max-width: 720px) {
  .resident-list-table thead { display: none; }
  .resident-list-table, .resident-list-table tbody, .resident-list-row, .resident-list-table td { display: block; width: 100%; }
  .resident-list-row { border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--sp-2); padding: var(--sp-1) 0; }
  .resident-list-table td { border: 0; padding: var(--sp-1) var(--sp-3); }
}

.resident-detail-page {
  max-width: 1040px;
  margin: 0 auto;
}

.three-column,
.form-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel,
.form-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.panel {
  padding: 18px;
}

.form-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
}

/* Sectioned form (Google-Forms style): a clean white form whose fields are
   grouped into titled, numbered sections so the operator is guided section by
   section instead of facing one long flat grid of inputs. */
.sectioned-form {
  display: grid;
  gap: 16px;
  align-content: start;
}
.sectioned-form .form-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--soft-shadow);
  padding: 18px 20px 20px;
  margin: 0;
  min-width: 0;
}
.sectioned-form .form-section > legend {
  /* Float the legend so it renders as a normal block at the top of the panel
     instead of being notched into (and visually cut by) the fieldset's top
     border. width:100% + the clear on the next sibling keeps it on its own row. */
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-dark, #0f766e);
  padding: 0;
  margin-bottom: 2px;
}
.sectioned-form .form-section > legend + * {
  clear: left;
}
.sectioned-form .form-section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--teal-dark, #0f766e);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.sectioned-form .form-section-hint {
  margin: 0 0 14px;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.sectioned-form .form-doc-checklist {
  margin: 4px 0 0;
  padding-left: 20px;
  color: var(--ink, #1e293b);
  font-size: 14px;
  display: grid;
  gap: 4px;
}
.sectioned-form .form-doc-uploads {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.sectioned-form .form-doc-upload-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: center;
  gap: 12px;
}
.sectioned-form .form-doc-upload-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1e293b);
}
@media (max-width: 640px) {
  .sectioned-form .form-doc-upload-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.sectioned-form .form-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg, #f8fafc) 70%, transparent);
  padding: 12px 0 4px;
  display: flex;
  justify-content: flex-end;
}

.panel-heading {
  min-height: 32px;
  margin-bottom: 12px;
}

.panel-heading span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* One-line subtitle under a panel title (e.g. Family Messages) — a calm,
   normal-weight description that replaces the old tinted callout copy. */
.panel-subtitle {
  margin: 2px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 400;
}

.list-stack,
.timeline,
.resident-strip,
.aging-bars,
.time-chip-row {
  display: grid;
  gap: 10px;
}

.timeline-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

[hidden] {
  display: none !important;
}

#accessDetails,
#facilityFacts {
  min-height: 32px;
}

#taskList,
#residentStrip,
#auditPreview {
  min-height: 156px;
}
#residentStrip [data-snapshot-resident] { cursor: pointer; border-radius: 12px; }
#residentStrip [data-snapshot-resident]:hover .resident-card { border-color: var(--accent, #2563eb); }
#residentStrip [data-snapshot-resident]:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

.resident-workspace,
.admin-chart-shell {
  display: grid;
  gap: 14px;
}

.resident-chart-header {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  /* Compact identity context bar: avatar · name+meta · actions. One clean
     surface, no nested tinted panels. */
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.resident-photo {
  width: 68px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline, rgba(14, 77, 73, 0.12));
  border-radius: 50%;
  background: linear-gradient(150deg, #e6f4f3 0%, #cfe7e4 100%);
  color: var(--teal-dark, #0e4d49);
  overflow: hidden;
}

.resident-photo span {
  width: auto;
  height: auto;
  display: inline-block;
  border-radius: 0;
  color: var(--teal-dark, #0e4d49);
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* P3 — Profile photo upload affordance. The avatar tile becomes a
   button when no photo is set yet; once a photo is uploaded the same
   click target shows a "Change" overlay on hover/focus. We wrap the
   <button> in .resident-photo-wrap so the sibling hidden <input
   type="file"> remains a sibling for querySelector lookup. */
.resident-photo-wrap {
  position: relative;
  display: inline-block;
}

.resident-photo-button {
  position: relative;
  appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.resident-photo-button:focus-visible {
  outline: 2px solid var(--teal-dark, #0e4d49);
  outline-offset: 2px;
}

.resident-photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resident-photo-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 5px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: rgba(11, 62, 59, 0.78);
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
  pointer-events: none;
}

.resident-photo-button:hover .resident-photo-overlay,
.resident-photo-button:focus-visible .resident-photo-overlay,
.resident-photo-button:not(.has-photo) .resident-photo-overlay {
  opacity: 1;
}

.resident-photo-button:not(.has-photo) .resident-photo-overlay {
  background: rgba(11, 62, 59, 0.55);
}

.resident-chart-summary {
  display: grid;
  gap: 10px;
}

.resident-name-row { margin: 0; }
/* Resident name is the focal point of the compact bar. !important beats the base
   `.panel h3 { font-size:15px !important }` layer. */
.resident-name-row h3 {
  margin: 0;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink, #0f172a);
}
/* Two quiet meta lines: room · level · mobility / diagnosis · admitted. */
.resident-meta-line {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted, #64748b);
  line-height: 1.35;
}
.resident-meta-line-sub { font-size: 12.5px; opacity: 0.9; }

/* Header actions: all three visible in one segmented container so Face Sheet
   printing is immediately reachable (no dropdown). */
.resident-header-actions { display: flex; align-items: center; gap: 8px; }
.resident-action-group {
  gap: 0;
  padding: 3px;
  background: var(--surface-sunken, #f1f5f9);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
}
.resident-action-group > .compact-action {
  border: 0 !important;
  background: transparent !important;
  border-radius: 7px !important;
  white-space: nowrap;
}
.resident-action-group > .compact-action:hover,
.resident-action-group > .compact-action:focus-visible {
  background: var(--surface, #fff) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.resident-menu { position: relative; }
.resident-menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 168px; padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.resident-menu-list-end { left: auto; right: 0; }
.resident-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink, #1f2937);
  font-size: 13px; cursor: pointer; text-decoration: none;
}
.resident-menu-item:hover { background: var(--surface-sunken, #f1f5f9); }
.resident-menu-item-danger { color: #b91c1c; }
.resident-menu-item-danger:hover { background: #fef2f2; }

/* Standalone Discharge: visible + clearly labeled (not hidden behind "⋯"), but
   quiet at rest — it reveals its destructive intent (red border/text) only on
   hover/focus, so it doesn't shout on every chart. */
.resident-discharge-action { color: var(--muted, #64748b); }
.resident-discharge-action:hover,
.resident-discharge-action:focus-visible {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fef2f2;
}
/* Inside the segmented group, Discharge still turns red on hover (beat the
   group's transparent-hover rule). */
.resident-action-group > .resident-discharge-action:hover,
.resident-action-group > .resident-discharge-action:focus-visible {
  color: #b91c1c;
  background: #fef2f2 !important;
}

.resident-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resident-document-button,
.resident-report-start {
  min-height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  color: var(--teal-dark);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.resident-document-button:hover,
.resident-document-button:focus-visible,
.resident-document-button.is-active,
.resident-report-start:hover,
.resident-report-start:focus-visible {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  outline: none;
}

.resident-chart-tabs,
.admin-chart-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  padding: 0;
  border: none;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

.resident-chart-tabs::-webkit-scrollbar,
.admin-chart-tabs::-webkit-scrollbar {
  display: none;
}

.resident-chart-tab,
.admin-chart-tab {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  /* Subtle pill so each tab reads as a distinct button, not body text. */
  border-radius: 7px 7px 0 0;
  /* Darker than --muted so inactive tabs are clearly legible. */
  color: #334155;
  background: #f1f5f4;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.resident-chart-tab:hover,
.resident-chart-tab:focus-visible,
.admin-chart-tab:hover,
.admin-chart-tab:focus-visible {
  color: var(--ink);
  background: #e3edea;
  border-bottom-color: var(--line);
  outline: none;
}

.resident-chart-tab.is-active,
.admin-chart-tab.is-active {
  /* Keep teal-dark text + teal underline (theme contract) and add a mint fill
     so the active working area is unmistakable. */
  color: var(--teal-dark);
  background: var(--mint, #eef6f3);
  border-color: var(--mint-border, #c9d8d4);
  border-bottom-color: var(--teal);
  outline: none;
}

.resident-tab-panel,
.admin-tab-panel {
  display: grid;
  gap: 14px;
}

.resident-document-preview,
.resident-action-panel,
.admin-action-panel {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #c9d8d4;
  border-radius: 8px;
  background: #f7faf7;
}

.resident-workspace-status,
.admin-workspace-status {
  display: grid;
  gap: 2px;
  /* A quiet section header — just an eyebrow label + the active section title.
     No tinted card/accent-bar chrome; the section's CONTENT below is what should
     draw the eye, not this band. */
  padding: 4px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
  margin-bottom: 16px;
}

/* The internal-sounding "WORKING AREA" eyebrow was removed — the section title
   below (e.g. "Med Pass", "Family Messages") is self-explanatory, so the extra
   marker only added noise. Keep the admin eyebrow (it labels a launcher grid,
   where the marker still helps orient) but drop it on the resident chart. */
.admin-workspace-status::before {
  content: "Working area";
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.resident-document-preview span,
.resident-action-panel span,
.admin-action-panel span,
.resident-signature-item span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.resident-document-preview strong {
  font-size: 18px;
  line-height: 1.2;
}

.resident-workspace-status strong,
.admin-workspace-status strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink, #0f172a);
}

.resident-action-panel h3,
.admin-action-panel h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.resident-document-preview p,
.resident-action-panel p,
.admin-action-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.resident-workspace-status p,
.admin-workspace-status p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.action-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.resident-action-body {
  display: grid;
  gap: 10px;
}

.resident-workflow-page {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.resident-workflow-copy {
  display: grid;
  gap: 6px;
}

.resident-workflow-copy span,
.resident-completed-form span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.resident-workflow-copy h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.resident-workflow-copy p,
.resident-completed-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.resident-workflow-page .form-panel {
  box-shadow: none;
}

.resident-completed-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--mint-border);
  border-radius: 8px;
  background: #f8fbf9;
}

.resident-completed-form.compact {
  border-color: var(--line);
  background: #fff;
}

.admin-planned-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef0f2;
  color: #5a6470;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.admin-module-card.admin-module-planned {
  opacity: 0.85;
}

.notif-approval-actions[data-notif-contact] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.notif-approval-actions[data-notif-contact] input[data-contact-note] {
  flex: 1 1 220px;
  min-width: 160px;
}

.notif-contact-method {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.resident-local-draft-notice {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #e0a800;
  border-left-width: 4px;
  border-radius: 6px;
  background: #fff8e1;
  color: #6b5200;
  font-size: 13px;
  line-height: 1.35;
}

.completed-form-header {
  display: grid;
  gap: 5px;
}

.completed-form-header strong,
.resident-completed-form > strong {
  font-size: 18px;
  line-height: 1.2;
}

.completed-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.resident-record-actions {
  display: flex;
  justify-content: flex-start;
}

.resident-module-grid,
.admin-module-grid,
.resident-signature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  padding: 8px 0;
}

/* --- Flattened Administration launcher --- */
.admin-launcher-shell { display: flex; flex-direction: column; gap: 16px; }
.admin-launcher-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.admin-launcher-hint { margin: 2px 0 0; color: var(--muted, #64748b); font-size: 13px; }
.admin-launcher-filter-label { flex: 0 1 320px; }
#adminModuleFilter {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line, #d7e0dd);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
#adminModuleFilter:focus-visible { outline: 2px solid var(--teal, #0d9488); outline-offset: 1px; }
.admin-launcher-grid { display: flex; flex-direction: column; gap: 18px; }
.admin-launcher-group-title {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, #64748b);
}
.admin-launcher-empty { color: var(--muted, #64748b); font-size: 14px; padding: 12px 0; }

/* UX Phase 4: "New navigation (preview)" toggle in System Settings. */
.nav-preview-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid var(--teal-200, #a9d7cd); border-radius: 10px;
  background: var(--teal-50, #eef7f4);
}
.nav-preview-copy { display: flex; flex-direction: column; gap: 2px; }
.nav-preview-copy strong { font-size: 14px; }
.nav-preview-copy small { color: var(--muted, #64748b); max-width: 46rem; }
.nav-preview-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.admin-launcher-workspace { margin-top: 12px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 16px; }
.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;
}

.resident-module-grid-balanced .resident-module-card:last-child,
.admin-module-grid .admin-module-card:last-child:nth-child(odd) {
  max-width: 640px;
  justify-self: center;
  width: 100%;
}

.resident-module-card,
.admin-module-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: var(--soft-shadow);
}

.resident-module-card:hover,
.resident-module-card:focus-visible,
.admin-module-card:hover,
.admin-module-card:focus-visible,
.resident-report-option:hover,
.resident-report-option:focus-visible {
  border-color: var(--teal);
  background: var(--mint);
  outline: none;
}

.resident-module-icon,
.admin-module-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--teal-dark);
  background: var(--mint);
  font-size: 17px;
  font-weight: 900;
}

.resident-module-card strong,
.admin-module-card strong {
  display: block;
  font-size: 15px;
  /* Match the app's card-title hierarchy: Inter semibold in teal-dark, not the
     global heavy near-black <strong>. Keeps tile titles on-theme with the rest
     of the product. */
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--tr-tight, -0.01em);
  color: var(--teal-dark, #0e4d49);
  line-height: 1.25;
}

.resident-module-card small,
.admin-module-card small {
  /* Reserve a uniform 3-line block so every tile is the same height.
     The grid only equalizes heights within a row, so without a fixed
     minimum the tiles go ragged across rows (1-line vs 3-line blurbs).
     min-height (not a clamp) pads short blurbs up without truncating
     longer clinical text such as diet/mobility orders. */
  display: block;
  min-height: calc(3 * 1.35em);
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.resident-report-layout {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: start;
}

.resident-report-layout .resident-workspace-status,
.resident-report-layout .resident-action-panel,
.resident-report-layout .resident-workflow-page,
.resident-report-layout .resident-report-side {
  /* Everything in this tab is full-width-stacked; the side block was pinned to
     the narrow 2nd grid column, so it read as a mismatched-width card below the
     full-width form. Span it full width for a consistent column edge. */
  grid-column: 1 / -1;
}

.resident-report-select-label {
  gap: 8px;
  color: #41494c;
  font-size: 18px;
}

.resident-report-select-label select {
  min-height: 58px;
  font-size: 18px;
}

.resident-report-list {
  max-height: 390px;
  display: grid;
  overflow: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(34, 47, 45, 0.14);
}

.resident-report-option {
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid #eef2f0;
  background: #fff;
  color: #35403e;
  text-align: left;
  font-size: 17px;
}

.resident-report-option.is-selected {
  background: var(--mint);
  color: var(--teal-dark);
  font-weight: 800;
}

.resident-report-side {
  display: grid;
  gap: 18px;
}

.resident-report-side div {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-top: 12px;
  border-top: 1px solid #aab4b7;
}

.resident-report-side span {
  color: #41494c;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.resident-report-side strong {
  color: #111;
  font-size: 18px;
}

.resident-report-side p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
}

.resident-signature-item {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcfdfb;
}

.resident-signature-item strong {
  font-size: 17px;
}

.resident-signature-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.resident-signature-item[data-tone="pending"] { border-left: 4px solid #b8860b; }
.resident-signature-item[data-tone="success"] { border-left: 4px solid #0e6f4f; }
.resident-signature-item[data-tone="muted"] { opacity: 0.7; }

/* Remote-signature request panel on the Signatures tab. */
.remote-sign-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0 18px;
  background: #fcfdfb;
}
.remote-sign-panel > summary {
  cursor: pointer;
  font-weight: 600;
  margin: 0;
}
.remote-sign-body { margin-top: 12px; display: grid; gap: 12px; }
.remote-sign-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.remote-sign-form label {
  display: grid;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}
.remote-sign-form label:first-of-type,
.remote-sign-form button,
.remote-sign-form .remote-sign-error { grid-column: 1 / -1; }
.remote-sign-form input,
.remote-sign-form select {
  padding: 9px 38px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
}
.remote-sign-error {
  margin: 0;
  padding: 8px 10px;
  background: #fff3f3;
  border: 1px solid #e7a3a3;
  border-radius: 8px;
  color: #8a1f1f;
  font-size: 14px;
}

.admin-workspace {
  display: grid;
  gap: 14px;
}

.resident-clinical-hub {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.profile-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.detail-subhead {
  margin-bottom: 0;
}

/* A workflow header stacks a "← Back" affordance directly above its <h3> title
   inside the panel-heading's inner div. With no spacing the heading sat flush
   against the Back button (observed: "Back" jammed into "Safety Dashboard").
   Lay that inner div out as a column with a gap, and give the heading top
   breathing room so the title clears the button. */
.panel-heading > div:has(> .back-btn) ,
.panel-heading > div:has(> [data-admin-back]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.panel-heading > div:has(> .back-btn) > h3,
.panel-heading > div:has(> [data-admin-back]) > h3 {
  margin: 0;
}

.time-chip-row {
  grid-template-columns: repeat(auto-fit, minmax(64px, max-content));
  align-items: center;
}

.list-item,
.timeline-item,
.report-item,
.integration-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcfdfb;
}

/* Resident card now uses an internal .resident-card-top / .resident-card-footer
   structure (see the directory mockup styling above). The base rule keeps it a
   bordered column for non-grid contexts (e.g. the dashboard snapshot strip). */
.resident-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcfdfb;
}
.resident-card .resident-card-top { padding: 0; }
.resident-card .resident-card-footer { background: transparent; border-top: 0; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid var(--line); }

/* Resident payment processing: Stripe + Square side by side, each a clear card
   with its Connect / Disconnect action. */
#paymentConnectList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.payment-connect-item { align-content: start; background: #fff; }
.payment-connect-item .integration-actions { margin-top: 4px; }

.list-item header,
.resident-card header,
.report-item header,
.integration-item header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  /* A long resident name must not collide with the risk/away badges. Let the
     header wrap so the badges drop to the next line rather than overlapping the
     name, and let the name itself break instead of overflowing the card. */
  flex-wrap: wrap;
}
.resident-card header > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.resident-card header > .tag {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The away tag carries a long dynamic label ("Away: Hospital / ER") — let it
   wrap inside its pill rather than clip at the card edge. */
.resident-card header > .resident-away-tag {
  white-space: normal;
  text-align: left;
}

.list-item strong,
.resident-card strong,
.timeline-item strong,
.report-item strong,
.integration-item strong {
  line-height: 1.25;
}

.muted,
.list-item p,
.resident-card p,
.timeline-item p,
.report-item p,
.integration-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.resident-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.resident-card button {
  grid-column: 1 / -1;
}

.avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #0b3e3b;
  background: #bfe8dc;
  font-weight: 800;
}

/* Clickable avatar in resident roster cards opens the file picker so
   admins can upload a profile photo without opening the resident
   chart. When a photo has been uploaded the avatar shows it cropped
   to a square; otherwise the initials placeholder remains. */
.avatar-button {
  appearance: none;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
}

.avatar-button:hover,
.avatar-button:focus-visible {
  border-color: var(--teal-dark, #0e4d49);
}

.avatar-button:focus-visible {
  outline: 2px solid var(--teal-dark, #0e4d49);
  outline-offset: 2px;
}

.avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.detail-grid,
.form-grid {
  display: grid;
  gap: 12px;
}

.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-field {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-left: 3px solid #bfe8dc;
  background: #f7faf7;
  border-radius: 0 4px 4px 0;
}

.detail-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-field strong {
  font-size: 14px;
  line-height: 1.3;
  /* Detail values are regular weight — the bold layer is the chart sub-menu
     above, not every value tile. */
  font-weight: 500;
}

.form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-grid.compact,
.form-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Conditional field wrapper (XC-1): display:contents so the wrapped field still
   participates in the parent .form-grid track as if unwrapped; [hidden] fully
   collapses it (display:none wins over contents). */
.form-cond { display: contents; }
.form-cond[hidden] { display: none; }

.generated-form {
  display: grid;
  gap: 16px;
}

/* Template forms render one <fieldset class="generated-form-section"> per
   section already; style them as the same polished, numbered white cards as the
   Admit Resident sectioned form so every form reads section-by-section. The
   numbered step badge is a CSS counter so no markup change is needed per form. */
.generated-form { counter-reset: rc-form-section; }
.generated-form-section {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--soft-shadow);
}
/* Section headings render as a <div class="generated-form-heading">, NOT a
   <legend>: a <legend> child of a fieldset is painted by the browser as the
   special "rendered legend" anchored to the fieldset's border box, which made
   the title sit ON the card's top border (escaping the 18-20px top padding) —
   the title/component overlap. A div lays out as an ordinary block inside the
   padding box. The numbered step badge stays on ::before. */
.generated-form-section .generated-form-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 700;
}
.generated-form-section > .generated-form-heading::before {
  counter-increment: rc-form-section;
  content: counter(rc-form-section);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--teal-dark, #0f766e);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ── Form workspace modal ──
   Resident forms open as a centered overlay "document workspace": a left section
   rail navigates sections one at a time and the main pane shows the active
   section, matching the product mockup. Proportions follow the mockup: ~90vw ×
   88vh, capped at 1140px wide; rail ~30%, main ~70%. The card scrolls internally
   and the page behind dims. All section fieldsets stay in the DOM (only the
   active one is shown) so the existing single-form save/draft/print machinery is
   untouched. */
.form-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 2vw;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.form-modal {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 1140px;
  height: 88vh;
  max-height: 900px;
  background: var(--panel, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.form-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.form-modal-title h2 { margin: 0 0 2px; font-size: 1.3rem; }
.form-modal-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
  cursor: pointer;
}
.form-modal-breadcrumb:hover { color: var(--teal-dark, #0f5d3f); }
.form-modal-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel, #fff);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
}
.form-modal-close:hover { background: var(--hover, #f1f5f9); color: var(--ink, #1f2933); }
.form-modal-body {
  display: grid;
  grid-template-columns: minmax(220px, 30%) 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
/* Single-column modal body (no section rail) — used by the compliance-record
   modal, which shows a records list + custom CRUD form instead of paged
   template sections. */
.form-modal-body-single {
  grid-template-columns: 1fr;
}
.form-modal-body-single .form-modal-main { overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
/* Consistent vertical rhythm between the intro line, records panel, and the
   record-entry form inside the single-column compliance modal. */
.form-modal-body-single .form-modal-main > * + * { margin-top: var(--sp-4); }
.form-modal-body-single .form-modal-main > .muted.small { margin-top: var(--sp-2); }
.form-modal-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-muted, #f8fafc);
  overflow-y: auto;
}
.form-rail-eyebrow {
  padding: 0 10px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
}
.form-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-700, #1f2937);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
/* Read as a navigable menu, not a flat text list: each item has a left accent
   that fills in on hover/active, a hover surface, and a clear active state. */
.form-rail-item:hover {
  background: var(--teal-50, #eef7f4);
  border-color: var(--teal-100, #d3ebe5);
}
.form-rail-item.is-active {
  background: var(--teal-50, #eef7f4);
  border-color: var(--teal-200, #a9d7cd);
  font-weight: var(--fw-semibold, 600);
  color: var(--teal-dark, #0e4d49);
  box-shadow: inset 3px 0 0 var(--teal, #187a74);
}
.form-rail-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.form-rail-item.is-active .form-rail-dot { color: var(--teal-dark, #0f5d3f); }
.form-modal-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 26px;
  overflow-y: auto;
  min-width: 0;
}
.form-modal-main-head { display: flex; align-items: center; gap: 12px; min-height: 0; }
/* Each section is ONE self-contained card: the section title is the card's
   heading (inside it, with the fields), not a floating label above it. Inside
   the modal the section position is shown by the rail + the "n / total" pager,
   so the per-legend number badge (a CSS counter that only counts visible
   sections and would mislead as "1") is suppressed, and the redundant category
   eyebrow that sat above the card (overlapping the badge) is hidden. */
.form-modal-main-head .eyebrow { display: none; }
/* Only the active section paints; the rest stay in the DOM (so the one form's
   FormData still captures every field) but are visually hidden. The fieldset is
   display:block (NOT grid) so its heading lays out in normal flow inside the
   padding box — the field columns live on the inner .form-grid. */
.form-modal-section { display: none; }
.form-modal-section.is-active-section {
  display: block;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--soft-shadow);
}
.form-modal-section.is-active-section > .form-grid {
  margin-top: 14px;
}
.form-modal-section > .generated-form-heading::before { display: none; }
.form-modal-section > .generated-form-heading {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold, 600);
  color: var(--teal-dark, #0e4d49);
}
.form-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted, #f8fafc);
}
.form-modal-pager { display: flex; align-items: center; gap: 12px; }
.form-modal-pager-count { font-size: 0.85rem; color: var(--muted, #64748b); }
.form-modal-foot .form-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* All footer controls share one height/padding/radius so Clear / Print / Save
   Draft / Save & Complete read as a single aligned button group (they were
   different sizes because they mix button + anchor + action classes). */
.form-modal-foot .form-detail-actions > button,
.form-modal-foot .form-detail-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-control, 10px);
  font-size: 14px;
  font-weight: var(--fw-semibold, 600);
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .form-modal { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .form-modal-body { grid-template-columns: 1fr; }
  .form-modal-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .form-rail-eyebrow { display: none; }
}

/* ── Typed form fields ──
   A 4-up responsive grid. Rows are sized to the tallest cell in each row
   (align-items: stretch) so an option-group box never visually overlaps the
   plain field beside or above it. Generous row gap keeps sections legible at
   the density a 200-bed facility's nurse fills daily. */
.form-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 16px;
  align-items: stretch;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  min-width: 0;
}

.form-field input:not([type=radio]):not([type=checkbox]),
.form-field select,
.form-field textarea {
  font-size: 0.85rem;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}

.form-field textarea { min-height: 72px; resize: vertical; }

.form-field-full,
.form-field.form-field-full {
  grid-column: 1 / -1;
}

/* Radio and checkbox groups.
   Borderless by default so they sit flush with the plain fields beside them
   (matching label-over-control rhythm) — the bordered "box-in-a-box" look made
   sections feel noisy and caused the legend to visually collide with the field
   above. The legend is a normal stacked label; options wrap in a tidy grid. */
.form-radio-group,
.form-check-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  min-width: 0;
}

.form-radio-group legend,
.form-check-group legend,
.form-adl-score legend,
.form-sat-table legend,
.form-table legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #35403e);
  padding: 0;
  margin: 0;
  line-height: 1.3;
}

/* Option rows lay out as an even grid (not a ragged wrap), so a 2- or 4-option
   group reads cleanly in columns instead of crowding onto one line. Min 96px
   per option keeps Yes/No pairs compact while longer labels get their own cell. */
.radio-row {
  display: grid;
  /* 1fr (not max-content) so options share width evenly — max-content let a long
     label expand greedily and forced a jagged reflow. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px 16px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface, #fff);
}

/* Checkbox groups (e.g. "Items Reviewed") read better as an aligned responsive
   grid than as a ragged wrapping row — each option gets its own cell so the
   list scans cleanly down columns instead of breaking mid-line. */
.check-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 16px;
}
@media (max-width: 640px) {
  .check-wrap { grid-template-columns: 1fr; }
}

.inline-radio,
.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 2px;
  min-width: 0; /* allow long option labels to wrap instead of overflowing the cell */
  overflow-wrap: anywhere;
}
/* Checkbox AND radio options live in wrapping grids where labels often run two
   lines (e.g. MOLST resuscitation options, self-administration outcomes). Top-
   align the control (and pin its size) so every box/dot lines up in a clean
   column regardless of label length — centered alignment floated the control to
   the vertical middle of a tall wrapped row, making columns look uneven. On a
   life-sustaining-treatment order set that misalignment is a safety risk, not
   just polish. */
.inline-check,
.inline-radio { align-items: flex-start; }
.inline-check input,
.inline-radio input { flex: 0 0 auto; margin-top: 1px; }
.inline-check:hover { color: var(--teal-dark, #0f766e); }

.inline-radio input,
.inline-check input {
  accent-color: var(--teal);
  cursor: pointer;
}

/* ADL Score (0-3) */
.form-adl-score {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  gap: 6px;
}

.adl-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.score-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.83rem;
  line-height: 1.3;
  min-width: 0;
}
/* Let a long score description wrap inside the option instead of overflowing. */
.score-option span:last-child { min-width: 0; overflow-wrap: anywhere; }

.score-option:hover { background: var(--hover); }

/* Credentialed signer block — sub-fields in one responsive row. */
.form-signer { border: 1px solid var(--line); border-radius: var(--radius-control, 10px); padding: 12px 14px; }
.form-signer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 10px 14px;
}
@media (max-width: 760px) { .form-signer-grid { grid-template-columns: 1fr 1fr; } }
.form-signer-witness-label { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: var(--fs-eyebrow, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* Notification block (XC-3): party / notified? / date-time on one row, the
   response textarea spanning the full width beneath. */
.form-notification { border: 1px solid var(--line); border-radius: var(--radius-control, 10px); padding: 12px 14px; }
.form-notification-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 10px 14px;
}
.form-notification-grid .form-field-full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-notification-grid { grid-template-columns: 1fr; } }

/* Caption explaining a scored/coded scale so the point/letter badges aren't a
   mystery ("what are these numbers"). Sits under the field legend. */
.score-scale-caption {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--ink-500, #475569);
}

/* Scored clinical scale (Morse/Braden/pain): one question per row + live total. */
/* Scored clinical scale — segmented button-card design: each option is a
   full-width tappable card (label left, signed [+X] badge right); selected =
   solid teal/white; total bar color-codes by risk band. One reusable component
   for any X→Y scored instrument (Morse, Braden, pain, …). */
.form-scored-scale { border: 1px solid var(--line); border-radius: var(--radius-control, 10px); padding: 16px 18px; }
.scored-scale-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.scored-scale-item:last-of-type { border-bottom: 0; }
.scored-scale-q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  color: var(--ink-700, #1e293b);
  margin-bottom: 10px;
}
.scored-scale-qnum {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--teal-50, #eef7f4);
  color: var(--teal-dark, #0e4d49);
  font-size: 12px;
  font-weight: var(--fw-bold, 700);
}
/* Option cards: responsive equal-width grid, wrap on small screens. */
.score-pill-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.score-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius-control, 10px);
  background: var(--panel, #fff);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, box-shadow 100ms ease;
}
/* The radio drives state but is visually hidden (label is the tap target). */
.score-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.score-pill-label { font-size: 14px; line-height: 1.25; color: var(--ink-700, #1e293b); }
.score-pill-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-muted, #eef2f6);
  color: var(--ink-500, #475569);
  font-size: 13px;
  font-weight: var(--fw-bold, 700);
}
.score-pill:hover { border-color: var(--teal, #187a74); background: var(--teal-50, #f0f7f6); }
.score-pill:focus-within { outline: none; box-shadow: var(--focus-ring); }
.score-pill.is-selected {
  background: var(--teal-dark, #0f4c43);
  border-color: var(--teal-dark, #0f4c43);
}
.score-pill.is-selected .score-pill-label { color: #fff; }
.score-pill.is-selected .score-pill-badge { background: #fff; color: var(--teal-dark, #0f4c43); }

/* Compact numeric scale (0–10 pain): small square number chips in a tight row,
   not full-width cards. */
.score-num-row { display: flex; flex-wrap: wrap; gap: 6px; }
.score-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--panel, #fff);
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  color: var(--ink-700, #1e293b);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
}
.score-num input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.score-num:hover { border-color: var(--teal, #187a74); background: var(--teal-50, #f0f7f6); }
.score-num:focus-within { outline: none; box-shadow: var(--focus-ring); }
.score-num.is-selected { background: var(--teal-dark, #0f4c43); border-color: var(--teal-dark, #0f4c43); color: #fff; }

/* Total bar — prominent, color-coded by the active risk band, with a math
   breakdown line ("25 (History) + 15 (Secondary) + … = 70"). */
.scored-scale-total {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-control, 10px);
  background: var(--surface-muted, #f1f5f9);
  border: 1px solid var(--line);
}
.scored-scale-total-head { display: flex; align-items: center; gap: 10px; }
.scored-scale-total-label { font-size: 13px; font-weight: var(--fw-semibold, 600); color: var(--ink-500, #475569); text-transform: uppercase; letter-spacing: 0.04em; }
.scored-scale-num { font-size: 1.6rem; font-weight: var(--fw-display, 800); color: var(--teal-dark, #0e4d49); }
.scored-scale-math { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-500, #475569); }
.scored-scale-math:empty { display: none; }
.scored-scale-band {
  order: -1;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.scored-scale-band:empty { display: none; }
.scored-scale-band[data-tone="ok"] { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.scored-scale-band[data-tone="warning"] { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.scored-scale-band[data-tone="danger"] { background: var(--status-danger-bg); color: var(--status-danger-fg); }
/* Tint the whole total bar to match the band. */
.scored-scale-total[data-tone="ok"] { background: var(--status-ok-bg); border-color: color-mix(in srgb, var(--status-ok-fg) 25%, transparent); }
.scored-scale-total[data-tone="warning"] { background: var(--status-warn-bg); border-color: color-mix(in srgb, var(--status-warn-fg) 25%, transparent); }
.scored-scale-total[data-tone="danger"] { background: var(--status-danger-bg); border-color: color-mix(in srgb, var(--status-danger-fg) 25%, transparent); }

.score-option.is-selected {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}

.score-option input { accent-color: var(--teal); margin-top: 2px; flex-shrink: 0; }

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* IADL score — same layout as ADL score but badge uses letter */
.form-freq { font-size: 0.83rem; }
.form-freq legend { margin-bottom: 4px; }
.freq-radio { font-size: 0.83rem; }
.freq-radio.is-selected { font-weight: 700; color: var(--teal-dark); }

.trigger-star { color: var(--danger, #c0392b); font-size: 0.7rem; vertical-align: super; }

/* S/A/T coding table */
.form-sat-table {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
}

.sat-legend {
  margin: 2px 0 8px;
  font-size: 0.74rem;
  color: var(--text-muted, var(--muted, #667570));
}
.sat-legend strong { color: var(--text, var(--ink, #24312d)); }

.sat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.sat-table th,
.sat-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.sat-table th { font-weight: 700; color: var(--text-muted); font-size: 0.78rem; }
.sat-table td:first-child { white-space: normal; width: 100%; }
.sat-table .inline-radio { justify-content: center; }

/* Repeating rows (medication / visitor log) */
.form-table {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.form-table-scroll { overflow-x: auto; }

.med-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 500px;
}

.med-table th,
.med-table td {
  padding: 4px 6px;
  border: 1px solid var(--line);
}

.med-table th { background: var(--surface-raised, #f7fafa); font-weight: 700; font-size: 0.77rem; }
.med-table td input { border: none; background: transparent; width: 100%; min-width: 80px; padding: 2px 0; }
/* Pre-seeded row label (XC-2): the first cell is a fixed class/lab name, not an
   input — render it as bold static text (the value rides a hidden input). */
.med-table td.med-row-label { background: var(--surface-raised, #f7fafa); font-weight: 600; white-space: nowrap; }

.printable-preview,
.resident-action-panel,
.admin-action-panel {
  overflow: hidden;
}

.workflow-spec {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.workflow-spec h4 {
  margin: 0;
}

.workflow-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.print-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #26312f;
}

.print-header img {
  width: 96px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Let the text column shrink so a long facility name/title wraps instead of
   pushing the layout wider than the page. */
.print-header > div {
  min-width: 0;
}

.print-header p,
.print-header h1,
.print-header h3,
.print-purpose {
  margin: 0;
  overflow-wrap: anywhere;
}

.print-header p,
.print-header span {
  color: var(--muted);
  font-weight: 800;
}

.print-purpose {
  margin: 12px 0;
  color: var(--muted);
  line-height: 1.45;
}

.print-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.print-section h3 {
  margin: 0;
  font-size: 16px;
}

.print-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.print-field {
  min-height: 58px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #cfd9d6;
  border-radius: 6px;
  background: #fff;
}

.print-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.print-field div {
  min-height: 24px;
  border-bottom: 1px solid #aab7b3;
  font-weight: 700;
}

.print-field-options,
.print-field-table {
  min-height: auto;
}

/* A field that hosts a table (SAT matrix, medication rows) must clip to its
   grid cell: the cell is a grid item with min-width:auto by default, so a wide
   table would push past the box border and bleed its right-hand columns onto
   the neighbouring fields (observed: ADLS S/A/T columns overprinting Assistive
   Devices / Bowel Continence). min-width:0 lets the cell shrink; overflow:hidden
   contains anything that still can't fit. */
.print-field-table {
  min-width: 0;
  overflow: hidden;
}

/* A multi-column medication/log table (Medication orders, INR Log, Activity
   log) needs the full row width — penned into one 3-up grid cell its columns
   overflowed ~380px past the card edge (measured edge-bleed). Span all columns
   so the table lays out at full width and `table-layout: fixed` keeps it in
   bounds. The narrow SAT matrix already fits a single cell, so this targets
   only cards that actually host a .print-med-table. */
.print-field-table:has(.print-med-table),
.print-field-table:has(.print-sat-table) {
  grid-column: 1 / -1;
}

.print-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.print-field-stacked .print-options {
  flex-direction: column;
  gap: 4px;
}

.print-option {
  font-weight: 700;
  font-size: 12px;
  /* Long option labels (MOLST resuscitation orders, "transfer to hospital…")
     must WRAP inside the card, not run on one line past the card's right
     padding edge (measured edge-bleed in the form-spacing audit). Keep the
     checkbox glyph from splitting off its text with a small min-width and
     anywhere-wrapping. */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.print-option.is-selected {
  font-weight: 900;
}

.print-sat-table,
.print-med-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  /* Fixed layout: distribute the cell's width across the columns instead of
     letting a long row label widen the table past its container. */
  table-layout: fixed;
}

.print-sat-table th,
.print-sat-table td,
.print-med-table th,
.print-med-table td {
  border: 1px solid #aab7b3;
  padding: 3px 5px;
  text-align: left;
  /* Long labels wrap inside the cell rather than forcing the column wider. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* SAT matrix: give the label column the bulk of the width and keep the three
   Self/Assist/Total option columns compact + centered so they never overflow. */
.print-sat-table th:first-child,
.print-sat-table td:first-child {
  width: 46%;
}
.print-sat-table th:not(:first-child),
.print-sat-table td:not(:first-child) {
  width: 18%;
  text-align: center;
  white-space: nowrap;
}

.print-med-table td {
  min-height: 18px;
  height: 18px;
}


.print-footer-signed {
  display: grid;
  gap: 4px;
  border-top: 2px solid var(--teal-dark, #0e4d49);
  padding-top: 10px;
  margin-top: 18px;
  font-size: 0.85rem;
}

.print-signature-text {
  font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.print-attestation {
  font-style: italic;
  color: #3c4754;
}

/* Captured remote e-signatures (Resident Agreement etc.) on the printable form. */
.print-esign-section { margin-top: 18px; }
.print-esign-list { display: grid; gap: 12px; }
.print-esign {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid #c7d2dd;
  border-radius: 8px;
  padding: 10px 14px;
}
.print-esign-mark {
  border-bottom: 1px solid #1f2933;
  min-height: 44px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}
.print-esign-typed {
  font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.print-esign-image { max-height: 60px; max-width: 100%; }
.print-esign-name { font-weight: 700; }
.print-esign-statement { font-style: italic; color: #3c4754; font-size: 0.85rem; margin: 2px 0; }
.print-esign-when { font-size: 0.85rem; color: #3c4754; }
.print-esign-hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; color: #5b6b7c; }

.print-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #26312f;
  font-weight: 800;
}

/* Facility identity on every printed form. Spans the full footer width above
   the signature cells (footer is a 3-col grid; signed footer is a 1-col grid). */
.print-footer-facility {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  min-width: 0;
}

.print-footer-facility strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.print-footer-facility-meta {
  font-weight: 600;
  color: #3c4754;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.print-page {
  background: #fff;
}

.print-shell {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px;
}

.print-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Default field label: a stacked (grid) label-over-input wrapper. SCOPED to
   exclude option-style labels (radio/checkbox/score rows) which lay their
   control + text out in a ROW — a bare `label { display:grid }` was forcing
   those option rows to stack (radio, then badge, then text on separate lines).
   Those option labels carry .score-option / .radio-option / .check-option, so
   exclude them here and let their own flex rules own the layout. */
label:not(.score-option):not(.inline-radio):not(.inline-check):not(.plan-area-toggle):not(.rp-checkbox-label):not(.drill-check-item) {
  display: grid;
  gap: 6px;
  color: #35403e;
  font-size: 13px;
  font-weight: 800;
}
/* Option-style labels lay their control + text out in a ROW regardless of the
   default-label rule above. Belt-and-suspenders: assert it with higher
   specificity so no later element-level rule can re-stack them. */
label.score-option, label.inline-radio, label.inline-check {
  display: flex;
  align-items: center;
}
label.score-option { align-items: flex-start; }
label.inline-radio, label.inline-check { gap: 8px; flex-wrap: nowrap; }

input:not([type=radio]):not([type=checkbox]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfd9d6;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  outline: none;
}

/* Dropdowns must read as dropdowns. The native OS chevron is faint and
   inconsistent across browsers (often invisible on our light fields), so draw
   our own always-visible chevron and reserve room for it on the right. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
select::-ms-expand { display: none; }

input[type=radio],
input[type=checkbox] {
  width: auto;
  min-height: auto;
  border: none;
  padding: 0;
  background: transparent;
  accent-color: var(--teal);
  cursor: pointer;
}

textarea {
  min-height: 94px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(24, 122, 116, 0.12);
}

.checkbox-row label {
  /* width:fit-content + no tall min-height so the clickable label hugs the box +
     its text, instead of a 32px-tall band that toggled on clicks several pixels
     above/below the 16px checkbox (GitLab #24). The label text still toggles the
     box (standard, intended) — only the oversized invisible margin is removed. */
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
}

.checkbox-row input {
  width: 16px;
  min-height: 16px;
}

.family-notify-detail {
  border: 1px solid var(--border, #d7dde5);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 8px;
  display: grid;
  gap: 8px;
}
.family-notify-detail legend {
  font-weight: 600;
  padding: 0 6px;
}

.primary-action,
.secondary-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  font-weight: 800;
  text-decoration: none;
}

.primary-action {
  color: #fff;
  background: var(--teal-dark);
}

.primary-action:hover,
.primary-action:focus-visible {
  background: var(--teal);
}

.secondary-action {
  color: var(--teal-dark);
  border-color: #bddcd5;
  background: #eef8f5;
}

.secondary-action:hover,
.secondary-action:focus-visible {
  background: #dff0ea;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.tag[data-tone="risk"],
.chip[data-tone="risk"] {
  color: #8d2d2d;
  background: #fdebea;
  border-color: #f1c4c1;
}

.tag[data-tone="warning"],
.chip[data-tone="warning"] {
  color: #7a4d12;
  background: #fff5dd;
  border-color: #ecd7a9;
}

.tag[data-tone="positive"],
.chip[data-tone="positive"],
.tag[data-tone="success"],
.chip[data-tone="success"],
.tag[data-tone="ok"],
.chip[data-tone="ok"] {
  color: #14603f;
  background: #e7f6ee;
  border-color: #bee6d0;
}

/* MFA enrollment QR + manual-entry fallback. */
.mfa-qr {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.mfa-qr img {
  border: 1px solid var(--hairline, #e2e8f0);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.mfa-manual-entry {
  margin: 4px 0 8px;
}
.mfa-manual-entry summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-500, #475569);
}
.mfa-secret-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  word-break: break-all;
  background: var(--surface-sunken, #f1f5f9);
  border: 1px solid var(--hairline, #e2e8f0);
  border-radius: 6px;
  padding: 6px 8px;
}

/* Clinical-safety guardrail badge: must be UNMISTAKABLE, not a routine warning
   chip. Used on preview modules that persist nothing ("not for clinical use"). */
.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: #b4232f;
  border: 1px solid #8f1922;
  box-shadow: 0 1px 2px rgba(140, 20, 30, 0.25);
}

/* Preview-module CTAs are intentionally inert — they explain (toast) rather than
   persist. Style them so they DON'T read as a live primary action: muted fill,
   dashed border, "not-allowed" cursor. The control stays clickable (it surfaces
   the "not saved yet" toast) but no longer looks like it will save a clinical or
   controlled-substance record. Honesty-in-UI: a button must not look done when
   it isn't. */
form[data-preview-submit] button[type="submit"],
[data-preview-click] {
  background: var(--surface-muted, #f1f5f9) !important;
  color: var(--muted, #64748b) !important;
  border: 1px dashed var(--line, #cbd5e1) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
form[data-preview-submit] button[type="submit"]::after {
  content: " · preview";
  font-weight: 600;
  opacity: 0.7;
}

.tag[data-tone="clinical"],
.chip[data-tone="clinical"] {
  color: #0b5c57;
  background: #e2f4ef;
  border-color: #bfe8dc;
}

.aging-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
}

.ar-progress {
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #edf2ef;
}

.ar-progress::-webkit-progress-bar {
  border-radius: 8px;
  background: #edf2ef;
}

.ar-progress::-webkit-progress-value {
  border-radius: 8px;
  background: var(--teal);
}

.ar-progress::-moz-progress-bar {
  border-radius: 8px;
  background: var(--teal);
}

@media (max-width: 940px) {
  .metric-grid,
  .platform-grid,
  .three-column,
  .form-row,
  .resident-module-grid,
  .admin-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .form-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .sidebar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .nav-list {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-button {
    text-align: center;
  }

  .workspace {
    padding: 18px;
  }

  .facility-hero {
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar,
  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .two-column,
  .resident-layout,
  .three-column,
  .form-row,
  .documentation-layout,
  .access-layout,
  .emar-layout,
  .emar-order-grid,
  .metric-grid,
  .platform-grid,
  .detail-grid,
  .action-detail-grid,
  .workflow-spec-grid,
  .completed-field-grid,
  .print-grid,
  .resident-chart-header,
  .resident-report-layout,
  .resident-module-grid,
  .admin-module-grid,
  .resident-signature-grid,
  .form-detail-body {
    grid-template-columns: 1fr;
  }

  .resident-quick-actions {
    grid-template-columns: 1fr;
  }

  .resident-photo { width: 68px; }
}

@media print {
  /* US Letter portrait for all standard printables (forms, reports, chart
     histories). Legal documents like the Resident Agreement must paginate
     cleanly across as many Letter pages as needed — never trimmed to one page. */
  @page {
    size: letter portrait;
    margin: 16mm 14mm;
  }

  .print-actions,
  .sidebar,
  .topbar,
  .nav-list,
  .standalone-print-toolbar,
  .print-toolbar {
    display: none !important;
  }

  body,
  .print-page {
    background: #fff;
  }

  .print-shell,
  .workspace {
    max-width: none;
    padding: 0;
  }

  .panel,
  .printable-preview {
    border: 0;
    box-shadow: none;
  }

  /* Pagination: let the document flow across pages, but keep logical blocks
     whole so a clause, field, table row, or signature block isn't split across
     a page break. Headers stay with the content that follows them.
     NOTE: `.report-section` is intentionally NOT in this list. A report section
     wraps a whole table (e.g. the binder's "Medication administration" or the
     census roster); forcing the entire section to stay whole shoved any section
     that didn't fit in the remaining space onto a fresh page, leaving the prior
     page 40–50% blank (wasteful pagination, measured by tests/ui/print-proof).
     Sections now flow across pages; their `tr` rows and headers stay intact via
     the rules below, so nothing splits mid-row. */
  .print-section,
  .print-field,
  .print-clause,
  .chart-entry,
  .print-footer-signed,
  .print-esign,
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-section h3,
  .report-section h2,
  .print-header,
  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* Long tables (binder, MAR list) may span pages; repeat their header row. */
  table.report-table thead,
  table.print-med-table thead { display: table-header-group; }

  /* Print density: the on-screen form cards are roomy (good for data entry),
     but on paper that wastes vertical space and inflates the page count. Tighten
     field cards, gaps, and fonts for print so a long agreement uses fewer Letter
     pages WITHOUT trimming or splitting any field. */
  .print-section { gap: 5px; margin-top: 8px; }
  .print-section h3 { font-size: 12.5px; }
  .print-grid { gap: 5px; }
  .print-field { min-height: 0; padding: 4px 6px; gap: 2px; border-radius: 4px; }
  .print-field span { font-size: 8.5px; }
  .print-field div { min-height: 14px; font-size: 11px; }
  .print-option { font-size: 10px; }
  .print-clause { margin: 3px 0 5px; }
  .print-clause p { font-size: 10px; line-height: 1.35; }
  .print-header { padding-bottom: 6px; margin-bottom: 8px; }
  .print-header h1 { font-size: 1.15rem; }
  .print-purpose { font-size: 10px; line-height: 1.35; margin: 4px 0; }
  .print-record-status { font-size: 10px; }
  .print-footer, .print-footer-signed { font-size: 10px; }

  /* Invoice (and any rc-modal) print: when a modal is open and the user hits
     Print, print ONLY the modal's content — not the whole app behind it (which
     sprawled the invoice across ~4 pages of dashboard chrome). Hide the app
     shell, drop the modal's fixed/scrim positioning, and let the panel flow as
     the single printed document. */
  body:has(.rc-modal:not([hidden])) > .app-shell {
    display: none !important;
  }
  .rc-modal:not([hidden]) {
    position: static !important;
    display: block !important;
    background: #fff !important;
    inset: auto !important;
  }
  .rc-modal:not([hidden]) .rc-modal__scrim,
  .rc-modal:not([hidden]) .rc-modal__header .rc-modal__close,
  .rc-modal:not([hidden]) .rc-modal__footer {
    display: none !important;
  }
  .rc-modal:not([hidden]) .rc-modal__panel {
    position: static !important;
    max-width: none !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
  }
  .rc-modal:not([hidden]) .rc-modal__body {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Legal-document layout (Resident Agreement): single flowing column of clauses
   and fields running down the page — like a real contract — not the 3-column
   boxed-field grid used by clinical forms. Applies on screen (.form-grid-legal)
   and in the printable (.print-grid-legal). */
.form-grid-legal,
.print-grid-legal {
  display: block !important;
  grid-template-columns: none !important;
}
/* In legal layout, fields are full-width rows: label above a single answer line,
   no boxed card. */
.form-grid-legal .form-field,
.print-grid-legal .print-field {
  grid-column: auto !important;
  display: block;
  border: 0;
  background: transparent;
  padding: 2px 0;
  min-height: 0;
  margin: 4px 0;
}
.print-grid-legal .print-field { border: 0; }
.print-grid-legal .print-field span,
.form-grid-legal .form-field > :first-child {
  display: inline-block;
  margin-right: 8px;
}
/* The answer line stays underlined so it reads like a fill-in contract line. */
.print-grid-legal .print-field div {
  display: inline-block;
  min-width: 240px;
  border-bottom: 1px solid #475569;
}
.generated-form-legal .generated-form-section { border: 0; }

/* Inline error banner for the Admit Resident form (e.g. facility at capacity).
   Persistent + high-contrast so a blocked admission is unmistakable, unlike a
   transient toast. */
.form-error-banner {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--status-danger-fg, #b91c1c);
  border-left: 4px solid var(--status-danger-fg, #b91c1c);
  border-radius: var(--radius-control, 10px);
  background: var(--status-danger-bg, #fef2f2);
  color: var(--status-danger-fg, #991b1b);
  font-size: 0.9rem;
  font-weight: var(--fw-semibold, 600);
  line-height: 1.45;
}

/* Read-only legal clause prose shown between fillable slots (Resident Agreement)
   and on its printable. */
.form-clause {
  background: #f8fafc;
  border-left: 3px solid var(--accent, #187a74);
  padding: 8px 12px;
  border-radius: 4px;
}
.form-clause p { margin: 0; color: var(--ink, #0f172a); font-size: 13px; line-height: 1.5; }
.print-clause { margin: 6px 0 10px; }
.print-clause p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #1e293b; }

/* Acknowledgment ("I Agree") gate shown before a gated form (Resident Agreement
   disclaimer) is revealed. */
.form-gate-card {
  max-width: 760px;
  margin: 8px 0;
  padding: 20px 22px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}
.form-gate-card h3 { margin: 0 0 10px; font-size: 17px; color: var(--ink, #0f172a); }
.form-gate-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink, #1e293b); }
.form-gate-actions { display: flex; gap: 10px; margin-top: 16px; }

/* SaaS Subscription Agreement gate in the billing upgrade modal. */
.saas-agreement-gate { margin: 12px 0; padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; background: #f8fafc; }
.saas-agreement-status { margin: 0 0 8px; font-size: 13px; color: var(--muted, #475569); }
.saas-agreement-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink, #0f172a); }
.saas-agreement-check input { margin-top: 2px; }
/* The "Request upgrade" CTA is visibly disabled until the agreement is accepted. */
#billingUpgradeContact.is-disabled,
#billingUpgradeContact[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

@media (max-width: 620px) {
  .workspace {
    padding: 14px;
  }

  .facility-hero {
    padding: 8px 14px;
  }

  .hero-copy h2 {
    font-size: 14px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .nav-list {
    flex-wrap: nowrap;
  }

  .nav-button {
    flex: 0 0 auto;
  }

  .topbar-actions {
    width: 100%;
  }
}

/* ============================================================
   TYPOGRAPHY REFINEMENT — v20260601j
   Goal: clean modular scale, fewer weights, calmer hierarchy,
   tighter tracking on display, generous tracking on uppercase.
   ============================================================ */

:root {
  /* Type scale (15px base) */
  --fs-micro: 11px;     /* tags, badge labels */
  --fs-eyebrow: 12px;   /* uppercase eyebrows */
  --fs-meta: 13px;      /* secondary/meta */
  --fs-body: 15px;      /* default body */
  --fs-lead: 17px;      /* large body / card title */
  --fs-h3: 20px;        /* panel titles */
  --fs-h2: 24px;        /* section headers */
  --fs-h1: 30px;        /* page hero / metric numbers */
  --fs-display: 36px;   /* hero kpis */

  /* Weights — capped at 700 for body, 800 for display only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;

  /* Tracking */
  --tr-display: -0.02em;
  --tr-tight: -0.01em;
  --tr-normal: 0;
  --tr-uppercase: 0.08em;
}

body {
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* --- Brand & nav --- */
.brand strong {
  font-size: 19px;
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-tight);
}

.nav-button {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
}

/* --- Top bar / facility hero --- */
.topbar h1 {
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-tight);
  line-height: 1.15;
}

.facility-hero { padding: 16px clamp(18px, 3vw, 24px); gap: 14px 22px; }
.facility-hero .hero-copy p {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-uppercase);
  color: var(--muted);
}
.facility-hero .hero-copy h2 {
  font-size: 24px;
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
  margin-top: 4px;
}

/* --- Section / panel headings --- */
.section-heading h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-tight);
}

.panel h3, .form-title h3 {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-uppercase);
}

/* --- Metric & platform cards --- */
.metric small,
.platform-card span {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-uppercase);
  color: var(--muted);
}

.metric strong {
  font-size: 28px;
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  color: var(--ink);
}

.platform-card strong {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
}

.platform-card p {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--muted);
}

/* --- Pills & chips --- */
.status-pill, .user-chip, .chip, .tag {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

/* --- Buttons / primary action --- */
.primary-action, .ghost-action, button.cta {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

/* Some action "buttons" are actually <a> links (e.g. "Open Print Page", which
   opens a print URL in a new tab). Anchors get the browser's default underline,
   which made them visually mismatch the real <button> siblings in an action row.
   Strip it so a link-styled action looks identical to a button-styled one. */
a.primary-action, a.ghost-action, a.secondary-action,
a.compact-action, a.cta { text-decoration: none; }

/* --- Tone down stray 900-weights & oversize displays elsewhere --- */
[class*="-tab"], .resident-chart-tab, .admin-chart-tab {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

/* --- Flow: tighten dashboard rhythm --- */
.page-section.is-active { gap: 24px; }
.metric-grid { gap: 14px; }
.platform-grid { gap: 14px; }

/* --- Focus ring for keyboard nav (accessibility + polish) --- */
/* Standardized on --teal to match the second global rule + per-component rings
   (was --blue here, causing an inconsistent ring color across controls). */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   FLOW + DENSITY REFINEMENT — v20260601k
   ============================================================ */

/* Prevent horizontal overflow everywhere */
html, body { overflow-x: hidden; }
.workspace, .page-section { min-width: 0; }
.workspace * { min-width: 0; }

/* Dashboard: 4-up metric grid for density */
.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Calmer card accents: replace 3px colored left border with a subtle top accent dot */
.metric, .platform-card {
  border-left-width: 1px !important;
  border-left-color: var(--line) !important;
  position: relative;
}
.metric::before, .platform-card::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.metric[data-tone="risk"]::before    { background: var(--rose); }
.metric[data-tone="warning"]::before { background: var(--amber); }
.metric[data-tone="clinical"]::before{ background: var(--teal); }
.metric[data-tone="finance"]::before { background: var(--violet); }
.metric[data-tone="steady"]::before  { background: var(--sun); }
.metric[data-tone="positive"]::before{ background: var(--green); }
.platform-card[data-tone="clinical"]::before  { background: var(--teal); }
.platform-card[data-tone="resident"]::before  { background: var(--blue); }
.platform-card[data-tone="finance"]::before   { background: var(--violet); }
.platform-card[data-tone="compliance"]::before{ background: var(--green); }
.metric small, .platform-card span { padding-left: 14px; }

/* Dashboard KPI cards — stronger value hierarchy + a clickable affordance for
   the cards that drill into a section. Bigger number, quieter label, gentle
   hover lift so the row reads as a set of tappable stats, not flat boxes. */
.metric {
  align-content: start !important;
  gap: 10px !important;
  padding: 16px 16px 18px !important;
  min-height: 0 !important;
}
.metric strong { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.metric small { padding-left: 14px; }
.metric--interactive { cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
.metric--interactive:hover {
  border-color: color-mix(in srgb, var(--teal, #0f766e) 35%, var(--line, #e2e8f0));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.metric--interactive:focus-visible { outline: 2px solid var(--teal, #0f766e); outline-offset: 2px; }

/* Two-column layout: allow columns to actually shrink */
.two-column { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 980px) {
  .two-column { grid-template-columns: 1fr; }
}

/* Topbar: smaller, less marketing */
.topbar h1 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; }

/* Form actions row: visible Cancel next to primary */
.form-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px;
}
.ghost-action {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
.ghost-action:hover { background: var(--paper); color: var(--ink); }

/* Service Plan multi-component cards */
.plan-area-stack {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 4px;
}
.plan-area {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
}
.plan-area[open] { background: var(--panel); box-shadow: var(--soft-shadow); }
.plan-area summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  gap: 12px;
}
.plan-area summary::-webkit-details-marker { display: none; }
.plan-area-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--ink);
}
.plan-area-toggle input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--teal);
}
.plan-area-toggle strong { font-weight: 600; }
.plan-area-hint {
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.02em;
}
.plan-area-body {
  padding: 4px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--line);
}
.plan-area-body label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.plan-area-body textarea,
.plan-area-body input {
  font-size: 14px; color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel);
  font-family: inherit;
  resize: vertical;
}
.plan-area-body textarea:focus,
.plan-area-body input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(24,122,116,0.15);
}

/* ============================================================
   ADMINISTRATION REFINEMENT — v20260601l
   Removes dev "Workflow spec" cruft, deduplicates status panels,
   makes admin tabs feel like proper tabs, tightens module grid.
   ============================================================ */

/* Hide developer/test-spec panels from end users */
.workflow-spec { display: none !important; }

/* Admin: kill the redundant "Administration action" eyebrow status
   (the action-panel already shows the same info, larger) */
.admin-workspace-status { display: none !important; }

/* Admin tab strip: real horizontal tabs, not pills */
.admin-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.admin-chart-tabs::-webkit-scrollbar { display: none; }
.admin-chart-tab {
  appearance: none;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  min-height: 40px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.admin-chart-tab:hover { color: var(--ink) !important; }
.admin-chart-tab.is-active {
  color: var(--teal-dark) !important;
  border-bottom-color: var(--teal) !important;
}

/* Admin action panel: clean header strip, not a verbose article */
.admin-action-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--soft-shadow) !important;
  margin: 0 0 16px !important;
}
.admin-action-panel > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-action-panel > div:first-child > span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.admin-action-panel h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
.admin-action-panel p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  flex-basis: 100%;
}
.admin-action-panel .action-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Module grid: 3-up on desktop, denser, calmer */
.admin-module-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}
.admin-module-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.admin-module-card:hover {
  border-color: var(--teal) !important;
  box-shadow: var(--soft-shadow) !important;
  transform: translateY(-1px);
}
.admin-module-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--mint);
  color: var(--teal-dark);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.02em;
}
.admin-module-card > span:last-child {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.admin-module-card strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
}
.admin-module-card small {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

/* Compliance panel: tighter */
#section-admin .panel-secondary {
  padding: 16px 18px;
  margin-bottom: 16px;
}
#section-admin .timeline-actions { margin-top: 8px; }

/* ============================================================
   GLOBAL CONSISTENCY NORMALIZATION — v20260601m
   Implements docs/ui-evaluation-spec.md §1 (layout contract)
   and §10 (known-violations fix list). One source of truth for
   page width, gutter, vertical rhythm, tabs, and cards across
   every tab.
   ============================================================ */

:root {
  --page-max: 1280px;
  --page-gutter: clamp(16px, 3vw, 32px);
  --page-stack: 24px;
}

/* Single source of truth for page width and gutter */
.workspace {
  max-width: var(--page-max) !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* All page-sections share the same vertical rhythm */
.page-section.is-active {
  gap: var(--page-stack) !important;
}

/* Kill per-page width overrides — every page inherits --page-max */
.resident-detail-page {
  max-width: none !important;
  margin: 0 !important;
}

/* Stop self-centering single odd-cards at 640px — let them flow in the grid */
.resident-module-grid-balanced .resident-module-card:last-child,
.admin-module-grid .admin-module-card:last-child:nth-child(odd) {
  max-width: none !important;
  justify-self: stretch !important;
  width: auto !important;
}

/* Unify resident profile tabs with the admin underline tab style */
.resident-chart-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
.resident-chart-tab {
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  min-height: 40px !important;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.resident-chart-tab:hover,
.resident-chart-tab:focus-visible {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: transparent transparent var(--line) transparent !important;
}
.resident-chart-tab.is-active {
  color: var(--teal-dark) !important;
  background: transparent !important;
  border-bottom-color: var(--teal) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Resident chart section nav — CONTEMPORARY, HIGH-VISIBILITY redesign.
   Grouped clusters (Overview/Medications/Care/Safety + Family/Forms/History)
   as icon CHIPS a nurse can scan at a glance. STICKY under the resident header
   so it never scrolls away on a long chart (max visibility). Cluster headers
   are color-accented (Medications=teal, Care=indigo, Safety=amber, Overview=
   slate) via a left rule + label color, so the eye lands on the group first,
   then the icon. Scoped selectors + !important intentionally override the flat
   `.resident-chart-tab` base rule above. */
/* Chart-sections nav = the pre-branch main tile-grid hub (.chart-sections-hub +
   .chart-section-grid, styled below), with grouping ADDED: the tiles are split
   into labeled clusters (Overview / Medications / Care / Safety / Records). The
   cluster layout is a responsive column grid so the labeled zones sit side by
   side and wrap on narrow screens; each cluster's tiles keep the exact tile look. */
/* Clusters flow in a wrapping row and GROW in proportion to their tile count so
   the full width is used and every tile stays the same size — no half-empty
   trailing rows from equal-width columns. flex-basis is a rough per-tile budget;
   flex-grow (set per data-tiles below) lets a 4-tile cluster claim ~2× the width
   of a 2-tile cluster, then tiles fill their cluster edge-to-edge. */
.chart-section-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: flex-start;
}
.chart-section-cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 168px;            /* ~ two tiles before wrapping */
  flex: 2 1 168px;
}
.chart-section-cluster[data-tiles="1"] { flex-grow: 1; min-width: 96px; }
.chart-section-cluster[data-tiles="2"] { flex-grow: 2; }
.chart-section-cluster[data-tiles="3"] { flex-grow: 3; }
.chart-section-cluster[data-tiles="4"] { flex-grow: 4; }
.chart-section-cluster-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark, #0f5d3f);
}
/* Column count is pinned PER tile-count so each cluster keeps its intended shape
   and one cluster's layout never bleeds into another:
     • 4 tiles (Overview, Care)  → 2 columns → a compact 2×2
     • 2 tiles (Safety)          → 1 column  → a vertical pair
     • 1 tile                    → 1 column
   Only the 3-tile clusters (Medications, Records) get the special two-small-on-
   top + one-wide-below shape the flatten request asked for. */
.chart-section-cluster .chart-section-grid {
  margin: 0 !important;
}
.chart-section-cluster[data-tiles="1"] .chart-section-grid { grid-template-columns: 1fr !important; }
.chart-section-cluster[data-tiles="2"] .chart-section-grid { grid-template-columns: 1fr !important; }
.chart-section-cluster[data-tiles="4"] .chart-section-grid { grid-template-columns: 1fr 1fr !important; }
/* Three-tile clusters (Medications, Records): two small tiles on top, one wider
   tile spanning the full width below — flattens the height vs a 3-stack. */
.chart-section-cluster[data-tiles="3"] .chart-section-grid { grid-template-columns: 1fr 1fr !important; }
.chart-section-cluster[data-tiles="3"] .chart-section-grid > :last-child { grid-column: 1 / -1; }

/* ── Chart-sections tile grid ──
   Both the resident chart sub-nav and the Administration sub-nav render as a
   labelled icon-tile grid — a square card per section with the icon over the
   label, active tile filled teal — matching the requested "CHART SECTIONS"
   design. Scoped to .chart-section-grid so it overrides the underline-tab rules
   above for ONLY these two bars; every other tab strip is untouched. Theme
   colors only (teal + surface), no new palette. The !important here mirrors the
   specificity of the base .resident-chart-tab / .admin-chart-tab rules it
   intentionally supersedes. */
/* The sub-nav grids are wayfinding HUBS — every other panel on the page hides
   behind them — so they get a distinct elevated container (teal-tinted band +
   accent rail) that announces "navigate here" instead of blending into the
   surrounding cards. */
.chart-sections-hub {
  margin: 0 0 22px;
  padding: 16px 18px 6px;
  border: 1px solid var(--teal-100, #cfe6dd);
  border-left: 4px solid var(--teal, #1a8f63);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--teal-50, #eef7f2) 0%, var(--panel, #fff) 60%);
  box-shadow: 0 4px 14px rgba(15, 93, 63, 0.08);
}
.chart-sections-hub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.chart-sections-hub-hint { font-size: 12px; color: var(--muted, #64748b); }
.chart-sections-hub .chart-section-grid { margin-bottom: 10px !important; }
.chart-sections-eyebrow {
  display: block;
  margin: 4px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
}
.chart-sections-hub .chart-sections-eyebrow { margin: 0; color: var(--teal-dark, #0f5d3f); }
.chart-section-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
  gap: 10px !important;
  border-bottom: 0 !important;
  margin: 0 0 20px !important;
}
.chart-section-grid .resident-chart-tab,
.chart-section-grid .admin-chart-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  min-height: 78px !important;
  /* Stronger, theme-tinted border + soft shadow so each inactive tile reads as a
     distinct card against the panel (the flat muted fill washed out). The icon
     carries a teal accent for additional contrast. */
  border: 1px solid var(--teal-100, #cfe6dd) !important;
  border-radius: 12px !important;
  background: var(--panel, #fff) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  color: var(--ink, #1f2933) !important;
  text-align: center !important;
}
.chart-section-grid .resident-chart-tab .resident-chart-tab-icon {
  color: var(--teal-dark, #0f5d3f);
}
.chart-section-grid .resident-chart-tab:hover,
.chart-section-grid .resident-chart-tab:focus-visible,
.chart-section-grid .admin-chart-tab:hover,
.chart-section-grid .admin-chart-tab:focus-visible {
  border-color: var(--teal) !important;
  box-shadow: 0 2px 8px rgba(15, 93, 63, 0.14) !important;
  transform: translateY(-1px);
}
.chart-section-grid .resident-chart-tab.is-active,
.chart-section-grid .admin-chart-tab.is-active {
  background: var(--teal-dark, #0f5d3f) !important;
  border-color: var(--teal-dark, #0f5d3f) !important;
  color: #fff !important;
}
.chart-section-grid .resident-chart-tab-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}
.chart-section-grid .resident-chart-tab-icon svg { width: 20px; height: 20px; }
.chart-section-grid .resident-chart-tab-label { font-size: 12px !important; font-weight: 600 !important; line-height: 1.2; }

/* Cards: unified hover (border-color + soft shadow + 1px lift) across the app */
.metric, .platform-card, .resident-module-card, .admin-module-card, .integration-card {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.resident-module-card:hover, .integration-card:hover {
  border-color: var(--teal) !important;
  box-shadow: var(--soft-shadow) !important;
  transform: translateY(-1px);
}

/* Resident module grid: match Admin grid density (auto-fill 260px) */
.resident-module-grid,
.resident-module-grid-balanced {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

/* Top bar: lock h1 to spec (22/700, single line) */
.topbar h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reduce-motion contract */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   TEMPLATE-FORM RECORDS (v20260602a)
   Draft / Completed save workflow for forms.js templates.
   ============================================================ */
.form-tile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.form-tile-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.form-tile-badge-draft { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.form-tile-badge-completed { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.status-pill {
  display: inline-flex; align-items: center; margin-top: 6px;
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; letter-spacing: 0.02em;
}
.status-pill-draft { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

.resident-form-completed .completed-form-header strong { font-size: 16px; }
.resident-form-completed .completed-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* Populated print-form fields */
.print-field-filled div {
  border-bottom: 1px solid var(--ink);
  min-height: 18px;
  padding: 2px 4px;
  font-weight: 500;
  color: var(--ink);
}
.print-record-status {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.print-record-status[data-record-status="completed"] { color: #065f46; }
.print-record-status[data-record-status="draft"] { color: #9a3412; }

/* ============================================================
   DESIGN-PASS — v20260602b
   Senior SaaS product-design audit fixes:
   - C5/C13 status-pill + acuity-tag discipline (semantic palette)
   - C12 metric tones constrained to spec palette
   - C4 platform-grid hidden (kept as no-op for back-compat)
   - C6 resident-quick-actions hidden (redundant with form tiles)
   - W4 clickable work-queue items
   - C16 facility hero overlap fix
   - C19 form-tile grid: clamp to 4 columns max for visual rhythm
   - Accessibility: keyboard focus-visible ring on all action surfaces
   ============================================================ */

/* C5/C13 — status-pill must stay neutral; acuity uses semantic palette */
.topbar .status-pill {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
  font-weight: 600 !important;
}
.topbar .user-chip {
  background: var(--mint) !important;
  color: var(--teal-dark) !important;
  border-color: var(--mint-border) !important;
}
.tag[data-tone="risk"]    { background: #fdecec; color: var(--rose);     border-color: #f2c7c7; }
.tag[data-tone="warning"] { background: #fcf3e1; color: var(--amber);    border-color: #f0dca6; }
.tag[data-tone="positive"]{ background: #e3f3eb; color: var(--green);    border-color: #c0e1cd; }
.tag[data-tone="steady"]  { background: var(--mint); color: var(--teal-dark); border-color: var(--mint-border); }
.tag[data-tone="clinical"]{ background: var(--mint); color: var(--teal-dark); border-color: var(--mint-border); }

/* C12 — Metric tones: collapse off-palette to spec (blue/green/amber/red/gray) */
.metric[data-tone="finance"] { border-left-color: var(--teal-dark) !important; }
.metric[data-tone="steady"]  { border-left-color: var(--muted) !important; }

/* C4 — Operations platform stack retired from the dashboard */
.platform-grid { display: none !important; }

/* C6 — Resident chart quick-action pills retired (redundant with form tiles) */
.resident-quick-actions { display: none !important; }

/* W4 — Clickable Work Queue items */
.list-item-action {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.list-item-action:hover,
.list-item-action:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--soft-shadow);
  transform: translateY(-1px);
  outline: none;
}
.list-item-action header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.list-item-action p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* C16 — Facility hero: never let Refresh overlap pills */
.facility-hero {
  flex-wrap: wrap;
}
.facility-hero .primary-action {
  margin-left: auto;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .facility-hero .primary-action {
    width: 100%;
    margin-left: 0;
  }
}

/* C19 — Form tile grid clamp to keep last-row balance */
.form-tile-grid,
.resident-form-tiles {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* W5 — Resident back nav: subtle text-link rather than primary button */
.link-back {
  appearance: none;
  background: transparent;
  border: none;
  /* Padding sized so the visible hit area is >=32px tall to satisfy WCAG
     2.5.5 (target size) per qa-automation gates. */
  padding: 8px 4px;
  min-height: 32px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0;
}
.link-back:hover,
.link-back:focus-visible {
  color: var(--teal-dark);
  outline: none;
}

/* Accessibility — global focus ring */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Typography rhythm — page H2 inside section-heading */
.section-heading h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0 0;
}

/* C12 follow-up — recolor metric dots to spec palette (no purple/sun) */
.metric[data-tone="finance"]::before { background: var(--teal-dark) !important; }
.metric[data-tone="steady"]::before  { background: var(--muted) !important; }

/* C10/W6 — Admin Users header + grouped sections (v20260602f) */
.admin-users-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--line);
}
/* Action-only variant (the section title now lives in the launcher header): the
   lone "+ Add User" button aligns to the right. */
.admin-users-header-actions { justify-content: flex-end; border-bottom: 0; padding-top: 0; }
.admin-users-header h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink); }
.admin-users-header p  { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.admin-users-header .primary { white-space: nowrap; }
.admin-users-groups { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.admin-users-group h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ============================================================
   R3/R2 — Modal primitives + R2 copy-prior list (v20260602h)
   Accessible attestation modal and section review panel.
   ============================================================ */
.rc-modal[hidden] { display: none !important; }
.rc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.rc-modal__panel {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  width: min(520px, 96vw);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rc-modal__panel--wide { width: min(720px, 96vw); }
.rc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.rc-modal__header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.rc-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.rc-modal__close:hover { background: rgba(15, 23, 42, 0.06); color: var(--ink, #0f172a); }
.rc-modal__body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Regulated incident review stays inside the existing modal flow, but groups
   the investigation, reporting evidence, and final attestation into scannable
   sections. Long policy keys, names, and evidence references must wrap rather
   than widen or overlap the dialog. */
#incidentManageForm .form-section {
  padding: 14px 16px 16px;
  border-radius: 8px;
  box-shadow: none;
}
#incidentManageForm .form-section > legend { font-size: 14px; }
.incident-evidence-entry {
  margin-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
  padding-top: 10px;
}
.incident-evidence-entry summary {
  cursor: pointer;
  color: var(--teal-dark, #0f766e);
  font-weight: 700;
}
.incident-existing-evidence { margin-top: 12px; min-width: 0; }
.incident-evidence-list {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  overflow-wrap: anywhere;
}
.incident-review-options { display: grid; gap: 8px; margin-bottom: 12px; }
.incident-review-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.rc-modal__lead { margin: 0; color: var(--muted, #475569); font-size: 14px; line-height: 1.5; }

.billing-consent-recipient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #dbe3e8);
  border-left: 4px solid var(--teal, #0d766e);
  border-radius: 8px;
  background: #f8fbfa;
  overflow-wrap: anywhere;
}
.billing-consent-recipient > span:first-child {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.billing-consent-recipient > span:last-child { color: var(--muted, #64748b); font-size: 13px; }
.billing-consent-summary {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b9ddcd;
  border-radius: 8px;
  background: #f1faf5;
}
.billing-consent-summary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.billing-consent-summary__head p { margin: 3px 0 0; color: var(--muted, #64748b); font-size: 13px; }
.billing-consent-summary__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.billing-consent-summary__actions .danger-action {
  color: var(--status-danger-fg, #a02525);
  border-color: color-mix(in srgb, var(--status-danger-fg, #a02525) 28%, var(--line));
  background: var(--status-danger-bg, #fbe6e6);
}
.billing-consent-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
}
.billing-consent-facts div { min-width: 0; }
.billing-consent-facts dt { color: var(--muted, #64748b); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.billing-consent-facts dd { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.billing-consent-attestation { border-color: #a9d6c3; background: #f3faf6; }
@media (max-width: 620px) {
  .billing-consent-facts { grid-template-columns: 1fr; }
  .billing-consent-recipient { grid-template-columns: 1fr; }
  .billing-consent-recipient > span:first-child { grid-row: auto; }
}

/* Safety-check QR pop-out (in-page modal): center the code + Print button. */
.safety-qr-modal-body { align-items: center; text-align: center; }
.safety-qr-image { width: 280px; height: 280px; max-width: 100%; }

/* Check-locations list can grow long; cap its height so the Add form (now
   above it) and the rest of the page stay usable instead of the list
   swamping the panel. */
.safety-locations-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; }
.safety-locations-scroll table { margin: 0; }
/* Wrap the add-form and the locations list in their own cards so the inputs
   don't float bare on the white workspace. The panel's first heading sits flush
   at the top (no extra top margin from .admin-subhead). */
/* Emergency Preparedness Packet — grouped required-element checklist + status. */
.emergency-prep-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.emergency-prep-meter { display: flex; align-items: center; gap: 10px; min-width: 240px; flex: 1 1 240px; }
/* CSP-safe fill: a native <progress> (value/max attributes), not an inline
   style="width:%". The app's CSP has no 'unsafe-inline' for style-src, so an
   inline width was stripped and the bar always read 100% full. */
.emergency-prep-meter-bar { flex: 1; height: 8px; border: 0; border-radius: 999px; background: var(--line, #e2e8f0); overflow: hidden; -webkit-appearance: none; appearance: none; }
.emergency-prep-meter-bar::-webkit-progress-bar { border-radius: 999px; background: var(--line, #e2e8f0); }
.emergency-prep-meter-bar::-webkit-progress-value { border-radius: 999px; background: var(--teal-dark, #0f5d3f); transition: width .2s ease; }
.emergency-prep-meter-bar::-moz-progress-bar { border-radius: 999px; background: var(--teal-dark, #0f5d3f); }
.emergency-prep-meter-label { white-space: nowrap; font-size: 0.9rem; }
.emergency-prep-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emergency-prep-attestation { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin-bottom: 12px; border-radius: 8px; background: #f0f7f3; border: 1px solid #c8e0d4; }
.emergency-prep-attestation[data-tone="ok"] strong { color: var(--teal-dark, #0f5d3f); }
.emergency-prep-group { border: 1px solid var(--line, #e2e8f0); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.emergency-prep-group legend { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-dark, #0f5d3f); padding: 0 6px; }
.emergency-prep-element { padding: 12px 0; border-bottom: 1px solid var(--line, #eef2f7); }
.emergency-prep-element:last-child { border-bottom: none; }
.emergency-prep-element .emergency-prep-note { margin-top: 8px; margin-left: 26px; width: calc(100% - 26px); font-size: 0.85rem; }
/* Attested packet is locked: the documentation reference reads back as plain
   text (not a disabled, empty-looking input with a "where is this?" placeholder
   that misleadingly implied the field was still fillable). */
.emergency-prep-element .emergency-prep-note-readonly {
  margin: 8px 0 0 26px;
  font-size: 0.85rem;
  color: var(--ink, #1f2933);
  border-left: 2px solid var(--line, #e2e8f0);
  padding-left: 10px;
}
.emergency-prep-element .emergency-prep-note-readonly .muted { font-style: italic; }
.emergency-prep-element.is-confirmed .drill-check-item span { color: var(--teal-dark, #0f5d3f); }

/* RN med-order verification affordance on a med-order card. */
.med-verify-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.med-verify-line { margin: 6px 0 0; font-size: 0.85rem; }
.med-verify-line[data-tone="ok"] { color: var(--teal-dark, #0f5d3f); font-weight: 600; }

.safety-locations-add, .safety-locations-list { margin-top: 14px; }
.safety-locations-add > .admin-subhead:first-child,
.safety-locations-list > .admin-subhead:first-child { margin-top: 0; }
.rc-modal__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.rc-modal__check input { margin-top: 3px; flex: 0 0 auto; }
.rc-modal__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink, #0f172a); }
.rc-modal__field em { color: var(--muted, #64748b); font-style: normal; font-weight: 400; }
.rc-modal__field input {
  padding: 9px 12px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.rc-modal__field input:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.rc-modal__error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 0;
}
.rc-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: #f8fafc;
}
.rc-modal__footer .primary-action:disabled,
.rc-modal__footer .primary-action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.rc-modal__bulk-actions {
  display: flex;
  gap: 12px;
  font-size: 13px;
}
.link-button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--teal-dark, #0f766e);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { color: var(--ink, #0f172a); }

.rc-copy-prior__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rc-copy-prior__item {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.rc-copy-prior__item input { margin-top: 3px; flex: 0 0 auto; }
.rc-copy-prior__item-body { flex: 1; min-width: 0; }
.rc-copy-prior__item-title { font-weight: 600; font-size: 14px; color: var(--ink, #0f172a); }
.rc-copy-prior__item-meta { font-size: 12px; color: var(--muted, #64748b); margin-top: 2px; }
.rc-copy-prior__item-preview {
  margin-top: 8px;
  font-size: 12px;
  color: #334155;
  background: #f8fafc;
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 84px;
  overflow: auto;
  white-space: pre-wrap;
}
.rc-copy-prior__item-empty { font-style: italic; color: var(--muted, #94a3b8); }

/* ============================================================
   P1 polish — locked severity color scale (4-stop semantic),
   sign-out affordance, accessible focus rings. v20260602p
   ============================================================ */

/* --- 4-stop severity / priority scale (overrides ad-hoc tones) --- */
.tag[data-tone="critical"],
.chip[data-tone="critical"] {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: #fecaca;
  font-weight: 700;
}
.tag[data-tone="risk"],
.chip[data-tone="risk"] {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}
.tag[data-tone="warning"],
.chip[data-tone="warning"] {
  color: #854d0e;
  background: #fefce8;
  border-color: #fde68a;
}
.tag[data-tone="positive"],
.chip[data-tone="positive"] {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* --- Sign-out button in app topbar --- */
.topbar-signout {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #64748b);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.topbar-signout:hover {
  color: var(--ink, #0f172a);
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--line, #e5e7eb);
}
.topbar-signout:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}

/* --- Login tab keyboard focus ring (a11y) --- */
.login-tab:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   PREMIUM SAAS POLISH — v20260602q
   Goal: Linear/Vercel/Stripe-grade restraint and density.
   Strategy: type discipline, tabular numerals, neutral chrome,
   tighter spacing, refined motion, single-source typography.
   This layer is intentionally LAST in the cascade.
   ============================================================ */

:root {
  /* Refined ink palette — cooler, calmer */
  --ink-900: #0b1220;
  --ink-700: #1f2937;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;
  --hairline: #e5e7eb;
  --hairline-strong: #d1d5db;
  --surface: #ffffff;
  --surface-sunken: #f8fafc;
  --surface-raised: #ffffff;

  /* Premium shadows (layered). Deepened from the prior near-invisible alphas so
     cards read as raised surfaces rather than flat outlines. */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 5px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 4px 8px -1px rgba(15, 23, 42, 0.12), 0 2px 5px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 22px -4px rgba(15, 23, 42, 0.14), 0 6px 10px -6px rgba(15, 23, 42, 0.10);

  /* Premium radii — 8 not 12 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
}

/* --- Body typography: variable Inter, 14px base, tight rhythm --- */
body {
  font-family: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-feature-settings: "cv11", "ss01", "ss03", "cv02" !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink-700) !important;
  background: var(--surface-sunken) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* --- Tabular numerals on every numeric surface --- */
.metric strong,
.metric small,
.chip,
.tag,
.user-chip,
.status-pill,
#taskCount,
#residentCount,
#rosterCount,
.panel-heading span,
[id$="Count"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

/* --- Topbar: refined inline header (do NOT make sticky; original
   layout has a top nav strip already). Just polish typography. --- */
.topbar {
  /* UX fix: right-align the action chips (status pill, user chip,
     sign-out button) even when the h1 is empty / replaced by the
     dashboard hero. Without this, the actions float in the upper-
     left dead zone above the page hero, which testers flagged as
     "misplaced". */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 40px !important;
  margin-bottom: 16px !important;
  padding: 4px 0 !important;
}
.topbar h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.015em !important;
}
/* Push actions to the trailing edge whether the h1 is shown or empty. */
.topbar-actions {
  margin-left: auto !important;
  gap: 8px !important;
}

/* --- Chips/pills: smaller, neutral, refined.
   Note: tone-specific overrides (.tag[data-tone="risk"|"warning"|"positive"|"critical"])
   must continue to win, so we DO NOT force background/color/border-color here on the
   base .tag selector — only the structural rules. --- */
.chip, .tag, .user-chip, .status-pill {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
}
.chip:not([data-tone]), .tag:not([data-tone]) {
  background: var(--surface) !important;
  color: var(--ink-500) !important;
  border-color: var(--hairline) !important;
}
/* Identity cluster (status + signed-in user) reads as ONE unit on a soft
   surface, so it's distinct from the action icons (User Manual / Sign out) to
   its right. The user name is the emphasis; the status is a quiet dot+label. */
.user-chip {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink-900, #15212d) !important;
  font-weight: 700 !important;
  padding-left: 4px !important;
}
.status-pill {
  background: transparent !important;
  color: var(--ink-500, #64748b) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  padding-right: 2px !important;
}
.status-pill::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 6px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

/* --- Facility hero: refined KPI strip (eyebrow + chips + action) --- */
.facility-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
}
.facility-hero .hero-copy { gap: 0 !important; display: block !important; flex: 0 0 auto !important; min-width: 0; }
.facility-hero .hero-copy p {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-400) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
.facility-hero .hero-copy h2 {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.facility-hero .hero-facts {
  gap: 6px !important;
  margin-left: auto !important;
  flex: 0 1 auto !important;
}
.facility-hero .primary-action {
  margin-left: 8px !important;
  height: 32px;
  padding: 0 12px !important;
  font-size: 13px !important;
}
@media (max-width: 720px) {
  .facility-hero { flex-wrap: wrap !important; }
  .facility-hero .hero-facts { margin-left: 0 !important; width: 100%; }
}

/* --- Section headings: quieter, more confident --- */
.section-heading h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink-900) !important;
}
.panel h3, .form-title h3 {
  font-size: 15px !important;
  /* Overhaul fix 2/5: card/panel titles are teal-dark semibold, the app's
     title hierarchy — NOT heavy near-black ink. One rule retones every panel
     header across the product. */
  font-weight: var(--fw-semibold, 600) !important;
  letter-spacing: var(--tr-tight, -0.01em) !important;
  color: var(--teal-dark) !important;
}
.eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-400) !important;
}

/* --- Panels: thinner border, tighter padding, premium shadow --- */
.panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 18px !important;
}
.panel-heading {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.panel-heading span {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-400) !important;
}

/* --- Metric cards: dense, numerical, premium --- */
.metric-grid {
  gap: 10px !important;
}
.metric {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color 100ms ease, box-shadow 100ms ease !important;
  transform: none !important;
}
.metric:hover {
  border-color: var(--hairline-strong) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}
.metric small {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-400) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}
.metric strong {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-900) !important;
  line-height: 1.1 !important;
}

/* --- Buttons: refined, restrained, consistent --- */
.primary-action, button.primary-action {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 16px !important;
  /* 40px min hit target on pointer devices; raised to 44px for touch below. */
  min-height: 40px !important;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: background 80ms ease, box-shadow 80ms ease !important;
  transform: none !important;
}
.primary-action:hover { transform: none !important; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; }

.secondary-action, button.secondary-action,
.ghost-button, button.ghost-button {
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 14px !important;
  min-height: 40px !important;
  /* Sunken fill + a stronger border so the button is clearly visible on the
     white surface. The previous white-bg + faint --hairline border made these
     near-invisible against white cards. */
  background: var(--surface-sunken) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink-700) !important;
  box-shadow: var(--shadow-xs) !important;
}
/* Secondary buttons must have a VISIBLE hover (the old rule set hover to the
   same sunken/hairline values as rest = no feedback). */
.secondary-action:hover, .ghost-button:hover {
  background: var(--mint, #e7f6ee) !important;
  border-color: var(--mint-border, #bee6d0) !important;
  color: var(--ink-900, #0b1220) !important;
}

/* Touch devices (tablets care staff use): meet the 44px minimum hit target. */
@media (pointer: coarse) {
  .primary-action, button.primary-action,
  .secondary-action, button.secondary-action,
  .ghost-action, button.ghost-action,
  .ghost-button, button.ghost-button {
    min-height: 44px !important;
  }
}

/* --- Sidebar (horizontal nav strip): cleaner, denser typography --- */
.sidebar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.brand {
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
}
.brand strong { font-weight: 600 !important; font-size: 14px !important; color: var(--ink-900) !important; }

.nav-button {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-700, #334155) !important;
  letter-spacing: -0.005em !important;
}
.nav-button:hover {
  color: var(--ink-900) !important;
  background: var(--surface-sunken) !important;
}
.nav-button.is-active {
  color: var(--teal-dark) !important;
  font-weight: 800 !important;
}

/* --- List items / rows: tighter, hover-quiet --- */
.list-item, .resident-card, .resident-strip-card {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--hairline) !important;
  padding: 12px 14px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  transition: background 80ms ease, border-color 80ms ease !important;
}
.list-item:hover, .resident-card:hover, .resident-strip-card:hover {
  background: var(--surface-sunken) !important;
  border-color: var(--hairline-strong) !important;
  transform: none !important;
}

/* --- Form controls: refined inputs --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
select, textarea {
  font-family: inherit !important;
  font-size: 13px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--hairline-strong) !important;
  padding: 7px 10px !important;
  /* background-COLOR, not the background shorthand: the shorthand would erase
     the custom dropdown chevron (a background-image) on every <select>. */
  background-color: var(--surface) !important;
  color: var(--ink-900) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color 80ms ease, box-shadow 80ms ease !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--teal, #0d9488) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14) !important;
}

/* Authoritative dropdown-chevron rule. Placed after the refined-inputs block
   and using !important so it wins over every per-context padding/background
   override (.form-field, .form-grid, .audit-filter-row, .compact-label,
   .dob-select, …). Every <select> gets the same always-visible chevron and
   reserved right-side room — so dropdowns read unmistakably as dropdowns. */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 38px !important;
  /* Caret drawn with two CSS gradients (a small solid ▼), not an SVG data-URI:
     no url()-encoding pitfalls, renders identically in every browser. The two
     diagonal half-fills meet to form a downward chevron on the right edge, with
     a subtle hairline divider separating it from the field text. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--teal-dark, #0f766e) 50%),
    linear-gradient(135deg, var(--teal-dark, #0f766e) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 19px) calc(50% - 1px),
    calc(100% - 14px) calc(50% - 1px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
}
select::-ms-expand { display: none; }

/* --- Toast: subtle slide --- */
.toast {
  font-size: 13px !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--hairline) !important;
}

/* --- Skeleton shimmer for loading states --- */
@keyframes rc-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton, [data-loading="true"] {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 800px 100%;
  animation: rc-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
  user-select: none;
}

/* --- Face Sheet Import parsing spinner (20-60s vision parse in flight) --- */
.facesheet-parsing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
}
.facesheet-parsing h3 { margin: 0.25rem 0 0; }
.facesheet-parsing p { max-width: 38rem; margin: 0; }
.facesheet-parsing-elapsed { font-variant-numeric: tabular-nums; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.facesheet-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid #e2e8f0;
  border-top-color: var(--teal-600, #157067);
  animation: rc-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .facesheet-spinner { animation-duration: 2.5s; }
}

/* --- Selection color --- */
::selection {
  background: rgba(13, 148, 136, 0.18);
  color: var(--ink-900);
}

/* --- Scrollbar: thin & neutral --- */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); border: 2px solid transparent; background-clip: padding-box; }

/* --- Final motion contract: short, single-direction. Scoped to interactive
   elements rather than every node, so layout-driven property changes (grid/
   width on the ~13k-line dynamic DOM) don't animate or add paint cost. --- */
a, button, input, select, textarea,
.nav-button, .list-item, .card, .tag, .chip, .metric, .form-tile, .integration-item {
  transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Tablet (portrait, care staff devices): collapse the dense two-column
   clinical layouts to a single column so panels don't cramp/overflow at ~768px,
   and let the top nav strip wrap rather than hide tabs behind a thin scrollbar. */
@media (max-width: 1024px) {
  .emar-layout, .access-layout, .documentation-layout {
    grid-template-columns: 1fr !important;
  }
  .nav-list { flex-wrap: wrap; overflow-x: visible; }
}

/* --- Phone (<=480px): stack toolbars, keep wide tables horizontally scrollable
   inside their container, and never let the date-popover overflow the screen. */
@media (max-width: 480px) {
  .billing-toolbar, .roster-toolbar, .dashboard-header, .dashboard-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .billing-toolbar > *, .roster-toolbar > * { width: 100%; }
  /* Wide tables scroll within their own card rather than blowing out the page. */
  .invoice-detail-table, .billing-table, .mar-table, .roster-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dob-popover { width: min(280px, calc(100vw - 24px)); }
  .modal, .rc-modal__panel, .rohacare-modal-panel { width: calc(100vw - 24px); }
}

/* --- Shared disabled treatment: structurally distinct (flat surface + dim ink)
   rather than opacity-only, which dropped labels below AA and read as "loading".
   Applied alongside the existing per-control opacity rules. */
button[disabled], button[aria-disabled="true"],
.primary-action[disabled], .secondary-action[disabled], .ghost-action[disabled],
[role="menuitem"][disabled] {
  opacity: 1;
  background: var(--surface-sunken, #f1f5f9) !important;
  color: var(--ink-300, #94a3b8) !important;
  border-color: var(--hairline, #e5e7eb) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* --- Empty states: premium SaaS pattern (icon + title + hint + CTA) --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 32px 20px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--ink-500);
  min-height: 160px;
}
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--teal-dark, #0f766e);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  box-shadow: var(--shadow-xs);
}
.empty-state__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.empty-state__hint {
  font-size: 13px;
  color: var(--ink-500);
  max-width: 36ch;
  line-height: 1.5;
}
.empty-state__action {
  margin-top: 8px;
}

/* ============================================================
   P2 polish — topbar separator, sign-out icon alignment,
   nav inactive contrast bump. v20260602s
   ============================================================ */
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--line, #e5e7eb);
  margin: 0 4px;
}
.topbar-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar-signout-icon {
  flex: 0 0 14px;
  color: currentColor;
}
/* In-session facility switcher modal: radio list (mirrors login chooser). */
.login-facility-list { display: flex; flex-direction: column; gap: 8px; }
.login-facility-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}
.login-facility-option:hover { background: #f1f5f4; }
.login-facility-option input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--teal, #0d9488);
}
.login-facility-role {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-dark, #0f766e);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.topbar-facility-switch {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 6px;
  cursor: pointer;
  color: var(--teal-dark, #0f766e);
  background: var(--mint, #eef6f3);
  border: 1px solid var(--mint-border, #c9d8d4);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.topbar-facility-switch:hover { background: #e3edea; }
.topbar-facility-switch:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}
.topbar-manual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.topbar-manual:hover {
  color: var(--ink, #0f172a);
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--line, #e5e7eb);
}
.topbar-manual:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}
.topbar-manual-icon {
  flex: 0 0 14px;
  color: currentColor;
}
/* Command-palette trigger — styled like a search field so it reads as
   "search", not just another topbar button (UX nav Phase 1). */
.topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  min-width: 168px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.topbar-search:hover {
  color: var(--ink, #0f172a);
  background: rgba(15, 23, 42, 0.07);
  border-color: var(--teal, #0d9488);
}
.topbar-search:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}
.topbar-search-icon { flex: 0 0 14px; }
.topbar-search span { flex: 1 1 auto; text-align: left; }
.topbar-search-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 4px;
  padding: 1px 5px;
}
@media (max-width: 900px) {
  /* Collapse to an icon-only affordance on narrow screens. */
  .topbar-search { min-width: 0; }
  .topbar-search span, .topbar-search-kbd { display: none; }
}
/* Palette group heading (features vs residents, admin groups). */
.quick-search-group {
  margin: 12px 0 4px;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.quick-search-group:first-child { margin-top: 4px; }
/* Row hierarchy: prominent title, muted one-line detail. */
.quick-search-row > strong { font-size: 13.5px; font-weight: 600; color: var(--ink, #0f172a); line-height: 1.25; }
.quick-search-row > .muted,
.quick-search-row > .small {
  font-size: 12px; color: var(--muted, #64748b); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.quick-search-row.is-active > strong,
.quick-search-row[aria-selected="true"] > strong { color: var(--teal-dark, #0e4d49); }
/* P2-4: darken inactive nav tabs for AA contrast against pale bar */
.nav-button:not(.is-active) {
  color: #475569; /* slate-600, ~ink-700 */
}
.nav-button:not(.is-active):hover {
  color: #0f172a;
}
/* P2-3 ensure dashboard chip row wraps cleanly on narrow */
#metrics, .metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   Resident chart tabs — enhanced segmented design w/ icons
   v20260602t   (icons + active pill + scroll-snap + a11y)
   ============================================================ */
.resident-chart-tabs:not(.chart-section-grid) {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding: 6px 6px 8px !important;
  margin: 0 0 20px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  position: relative;
}
.resident-chart-tabs::-webkit-scrollbar { height: 6px; }
.resident-chart-tabs::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 3px;
}

.resident-chart-tab {
  appearance: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  scroll-snap-align: start;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.resident-chart-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.85;
  flex: 0 0 16px;
}
.resident-chart-tab-label { line-height: 1; }

.resident-chart-tab:hover,
.resident-chart-tab:focus-visible {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: var(--line, #e5e7eb) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  outline: none;
}
.resident-chart-tab:focus-visible {
  border-color: var(--teal, #0d9488) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.20) !important;
}

.resident-chart-tab.is-active {
  color: var(--teal-dark, #0f766e) !important;
  background: #ffffff !important;
  border-color: var(--teal, #0d9488) !important;
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.10), 0 4px 12px rgba(13, 148, 136, 0.14) !important;
  border-bottom-color: var(--teal, #0d9488) !important;
}
.resident-chart-tab.is-active .resident-chart-tab-icon { opacity: 1; }

/* Narrow screens — the LEGACY icon-chip strip collapsed to icon-only. This must
   NOT apply to the newer .chart-section-grid large-tile layout: those tiles are
   ~261×78px on a phone — plenty of room for the label — and hiding it leaves 16
   near-identical unlabeled tiles a nurse can't tell apart. Scope the collapse to
   tabs that are NOT inside the section grid. */
@media (max-width: 720px) {
  .resident-chart-tabs:not(.chart-section-grid) .resident-chart-tab { padding: 8px 10px !important; }
  .resident-chart-tabs:not(.chart-section-grid) .resident-chart-tab-label { display: none; }
  .resident-chart-tabs:not(.chart-section-grid) .resident-chart-tab.is-active .resident-chart-tab-label {
    display: inline; margin-left: 2px; font-size: 12px;
  }
}

/* ============================================================
   Resident chart tabs — wrapping tile grid (v20260602w)
   Replaces the v20260602u horizontal-scroll fix. Tabs now wrap
   onto a second row at narrow widths with even spacing — no
   scrollbar, no mask fade, no clipped labels.
   ============================================================ */
/* :not(.chart-section-grid) — the tile-grid variant (.chart-section-grid) lays
   out as CSS grid; without this exclusion THIS later flex rule (equal specificity
   + !important) overrode .chart-section-grid's `display:grid`, collapsing the
   2-up+1-wide tile clusters into a single flex column. */
.resident-chart-tabs:not(.chart-section-grid) {
  /* Override the base nowrap + overflow-x:auto so tabs wrap to a
     second row instead of producing a horizontal scrollbar. */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
  overflow: visible !important;
  /* No scroll-snap or mask: the row simply wraps. */
  scroll-snap-type: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  /* Nav-rail treatment: a subtle fill + hairline border so the chart
     navigation reads as a distinct rail, while the teal accent stays
     reserved for the active tab (avoids two competing teal accents). */
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 10px !important;
  background: #f1f5f4 !important;
  box-shadow: none !important;
}
.resident-chart-tab {
  /* Each tab is a tile that takes equal share of the row, with a
     sensible minimum so labels never truncate. flex-basis is set
     just under 1/6 so two rows of ~5–6 tiles fit cleanly across
     all viewports without hitting overflow. */
  flex: 1 1 140px !important;
  min-width: 0 !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  /* Sub-menu tabs read bold so the navigation is the prominent layer; the
     detail-card values below are regular weight. */
  font-weight: 700 !important;
  gap: 6px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
  /* Tabs sit as white buttons on the tinted rail so they don't blend in. */
  background: #ffffff !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 7px !important;
}
.resident-chart-tab-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.resident-chart-tab-icon svg { width: 16px; height: 16px; }
.resident-chart-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide any leftover scrollbar from the v20260602t base block. */
.resident-chart-tabs::-webkit-scrollbar { height: 0 !important; width: 0 !important; }

/* ============================================================
   Access Control (Admin > Access Control) — v20260602v
   Role permission matrix + user role assignment table.
   ============================================================ */
.rc-access {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.rc-access__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.rc-access__header h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ink, #0f172a); }
.rc-access__header p { margin: 0; font-size: 13px; color: var(--muted, #64748b); }
.rc-access__hint {
  margin: 0;
  padding: 10px 14px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 12.5px;
  color: #854d0e;
}
.rc-access-loading {
  padding: 28px 14px;
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 14px;
}

.rc-matrix-wrap, .rc-users-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}
.rc-matrix, .rc-users {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rc-matrix th, .rc-matrix td,
.rc-users th, .rc-users td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line, #e5e7eb);
  vertical-align: top;
}
.rc-matrix thead th, .rc-users thead th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--ink, #0f172a);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}
.rc-matrix tbody th { font-weight: 500; color: var(--ink, #0f172a); }
.rc-matrix tbody th small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  margin-top: 2px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
}
.rc-matrix-section th {
  background: #f1f5f9 !important;
  color: var(--ink, #0f172a) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  padding: 6px 10px !important;
}
.rc-matrix-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rc-matrix-cell input { width: 16px; height: 16px; cursor: pointer; }
.rc-matrix td { text-align: center; }

.rc-users td strong { display: block; color: var(--ink, #0f172a); }
.rc-users td small { color: var(--muted, #64748b); font-size: 12px; }
.rc-user-role {
  padding: 6px 10px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  min-width: 200px;
}
.rc-credential-editor { min-width: 270px; }
.rc-credential-editor > summary {
  cursor: pointer;
  color: var(--teal-dark, #0f766e);
  font-weight: 600;
  line-height: 1.35;
}
.rc-credential-editor > .form-grid {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  min-width: 330px;
  padding: 10px 0 2px;
}
.rc-credential-editor .form-grid-actions { justify-content: flex-start; }
.rc-user-role:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}

/* ============================================================
   Admin chart tabs — wrapping tile grid (v20260602x)
   Mirrors the resident-chart-tabs treatment from v20260602w:
   each top-level admin section becomes an equal-width tile that
   wraps onto a second row at narrow widths. Replaces the
   underline tab strip so Admin and Resident workspaces share
   the same visual language.
   ============================================================ */
.admin-chart-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
  margin: 0 0 18px !important;
  background: #f1f5f4 !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.admin-chart-tabs::-webkit-scrollbar { height: 0 !important; width: 0 !important; }

/* Segmented control: inactive tabs are transparent text living IN the gray
   rail (no per-tab border/fill), so the row reads as one tab strip rather than
   eight equal bordered boxes. Hover gets a soft white fill; the active tab is
   solid teal (set by the .subnav-bar override). */
.admin-chart-tab {
  appearance: none !important;
  flex: 1 1 140px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  min-height: 36px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--muted, #64748b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.admin-chart-tab:hover,
.admin-chart-tab:focus-visible {
  color: var(--ink, #0f172a) !important;
  background: #ffffff !important;
  border-color: var(--line, #e5e7eb) !important;
  outline: none;
}
.admin-chart-tab.is-active {
  color: #ffffff !important;
  background: var(--teal-dark, #0f766e) !important;
  border-color: var(--teal-dark, #0f766e) !important;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.28) !important;
}

/* ============================================================
   Billing workspace — $100M SaaS polish (v20260602y)
   KPI strip, status filter tabs, search, sortable columns,
   pagination, and CSV export. Renders inside section-billing.
   ============================================================ */
.section-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ghost-action {
  appearance: none;
  /* Subtle tinted fill + a clearly visible border so the button reads as a
     button on the white cards/page. The old #dde7e2 border on a white bg was
     nearly invisible — buttons looked like floating text next to the teal
     primary actions. */
  background: var(--surface-sunken, #f3f6f5);
  border: 1px solid var(--hairline-strong, #c4d0cb);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.ghost-action:hover,
.ghost-action:focus-visible {
  border-color: var(--teal, #0d9488);
  color: var(--teal-dark, #0f766e);
  background: #f0fdfa;
  outline: none;
}

.billing-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.billing-kpi {
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.billing-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--line, #e5e7eb);
}
.billing-kpi[data-tone="critical"]::before { background: #ef4444; }
.billing-kpi[data-tone="warning"]::before { background: #f59e0b; }
.billing-kpi[data-tone="positive"]::before { background: #10b981; }
.billing-kpi[data-tone="neutral"]::before { background: var(--teal, #0d9488); }
.billing-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.billing-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
}
.billing-kpi-sub {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.billing-panel { padding: 0 !important; }
.billing-panel > .panel-heading {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  margin: 0;
}
.billing-panel > .table-wrap { padding: 0; }
.billing-panel .billing-table { margin: 0; }

.billing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: #f8fafc;
}
.billing-status-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
}
.billing-status-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #64748b);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 120ms ease, color 120ms ease;
}
.billing-status-tab:hover { color: var(--ink, #0f172a); }
.billing-status-tab.is-active {
  background: var(--teal, #0d9488);
  color: #ffffff;
}
.billing-status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
  border-radius: 9px;
}
.billing-status-tab.is-active .billing-status-count {
  background: rgba(255, 255, 255, 0.25);
}

.billing-toolbar-controls {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
  /* UX audit: when the toolbar wraps, the search input previously stayed
     at its 280px min so its long placeholder ("…responsible party…") got
     clipped. flex-wrap + 1 1 320px lets it grow to fill any spare row. */
  flex-wrap: wrap;
}
.billing-search {
  appearance: none;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  min-width: 320px;
  flex: 1 1 320px;
  background: #ffffff;
}
.billing-search:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.billing-pagesize {
  appearance: none;
  /* Compact, content-width control — it was stretching to ~758px as a flex
     child of the billing toolbar. */
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 130px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  padding: 8px 28px 8px 12px;
  font: inherit;
  font-size: 13px;
  background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.billing-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.billing-table th.sortable:hover { color: var(--teal-dark, #0f766e); }
.billing-table th.sortable .sort-indicator {
  display: inline-block;
  min-width: 10px;
  margin-left: 4px;
  font-size: 10px;
  color: var(--muted, #94a3b8);
}
.billing-table th.is-sorted { color: var(--teal-dark, #0f766e); }
.billing-table th.is-sorted .sort-indicator { color: var(--teal, #0d9488); }
.billing-table th.num, .billing-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.billing-id {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  color: var(--muted, #475569);
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}
.billing-empty-row {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--muted, #64748b);
  font-style: italic;
}

.billing-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: #f8fafc;
  flex-wrap: wrap;
}
.billing-page-btn {
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 36px;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.billing-page-btn:hover:not(:disabled) {
  border-color: var(--teal, #0d9488);
  color: var(--teal-dark, #0f766e);
}
.billing-page-btn.is-active {
  background: var(--teal, #0d9488);
  border-color: var(--teal, #0d9488);
  color: #ffffff;
}
.billing-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.billing-page-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--muted, #94a3b8);
}

.tag[data-tone="neutral"],
.chip[data-tone="neutral"] {
  color: #475569;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* ============================================================
   Billing v20260602z — date range, row actions, detail modal
   ============================================================ */
.billing-date-range { display: inline-flex; align-items: center; }
.billing-date {
  appearance: none;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  color: var(--ink, #0f172a);
  /* UX audit: placeholder "mm/dd/yyyy" needs >=160px on macOS Safari/Chrome
     or the field renders as "mm/dd/y". 168px keeps the picker icon visible. */
  min-width: 168px;
}
.billing-date:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.billing-date-sep { color: var(--muted, #94a3b8); padding: 0 2px; }
.billing-date-clear { padding: 7px 10px !important; }

.billing-id-link {
  appearance: none;
  background: #f1f5f9;
  border: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  color: var(--teal-dark, #0f766e);
  cursor: pointer;
  text-decoration: none;
}
.billing-id-link:hover { background: #e2e8f0; text-decoration: underline; }

.billing-actions-col,
.billing-actions-cell {
  position: sticky;
  right: 0;
  width: 48px;
  background: var(--panel, #fff);
  box-shadow: -10px 0 12px -14px rgba(15, 23, 42, 0.55);
}
.billing-actions-col { z-index: 3; }
.billing-actions-cell {
  z-index: 2;
  padding-right: 12px !important;
  text-align: right;
}
.billing-row-menu { position: relative; display: inline-block; }
.billing-row-menu-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--muted, #64748b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.billing-row-menu-toggle:hover,
.billing-row-menu-toggle[aria-expanded="true"] {
  background: #f1f5f9;
  color: var(--ink, #0f172a);
  border-color: var(--line, #e5e7eb);
}
.billing-row-menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
  z-index: 50;
}
.billing-row-menu.is-open .billing-row-menu-list { display: block; }
.billing-row-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink, #0f172a);
  border-radius: 6px;
  cursor: pointer;
}
.billing-row-menu-list button:hover:not(:disabled) {
  background: #f1f5f9;
  color: var(--teal-dark, #0f766e);
}
.billing-row-menu-list button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Invoice detail modal contents */
.invoice-detail { display: flex; flex-direction: column; gap: 16px; }
.invoice-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
}
.invoice-detail-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invoice-detail-summary strong {
  font-size: 14px;
  color: var(--ink, #0f172a);
  font-weight: 600;
  word-break: break-word;
}
.invoice-detail-heading {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.invoice-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.invoice-detail-table th, .invoice-detail-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  text-align: left;
}
.invoice-detail-table thead th {
  background: #f8fafc;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink, #0f172a);
}
.invoice-detail-table th.num, .invoice-detail-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.invoice-detail-table tfoot th {
  background: #f8fafc;
  font-weight: 600;
}
.invoice-detail-table tfoot .invoice-detail-balance th {
  background: #ecfeff;
  color: var(--teal-dark, #0f766e);
  font-weight: 700;
}
.invoice-detail-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #64748b);
}
.invoice-detail-note a { color: var(--teal-dark, #0f766e); font-weight: 600; }
.admin-subhead, .billing-subhead {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #0f172a);
}
.billing-subhead-note { margin: 0 0 12px; }

/* ============================================================
   Billing v20260603a — responsible party block + detail contacts
   ============================================================ */
.responsible-party-block {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
}
.responsible-party-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
}
.responsible-party-block label {
  font-size: 12px;
  color: var(--ink, #0f172a);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.responsible-party-block input,
.responsible-party-block textarea {
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.responsible-party-block input:focus,
.responsible-party-block textarea:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16);
}

.invoice-detail-summary > div { gap: 4px; }
.invoice-detail-link {
  font-size: 12px;
  color: var(--teal-dark, #0f766e);
  text-decoration: none;
  word-break: break-all;
}
.invoice-detail-link:hover { text-decoration: underline; }
.invoice-detail-address {
  font-size: 12px;
  color: var(--ink, #0f172a);
  white-space: pre-line;
}

/* ============================================================
   Reports + Integrations action rows — v20260603a
   ============================================================ */
.report-actions, .integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.report-meta { font-size: 11px; }
.integration-actions .ghost-action { font-size: 12px; padding: 6px 10px; }

.responsible-party-address-grid {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.responsible-party-address-grid .rp-addr-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr;
  gap: 8px;
}
.responsible-party-address-grid label {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meds-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.meds-calendar-grid .calendar-slot {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #fff);
}
.meds-calendar-grid .calendar-slot strong { display:block; font-size: 0.85rem; color: var(--accent, #2563eb); margin-bottom: 6px; }
.meds-calendar-grid .calendar-slot ul { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.meds-calendar-grid .calendar-slot small { color: var(--muted, #64748b); font-size: 0.8rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
/* DIRECT-CHILD only: a plain field is a `.form-grid > label` (stacked label over
   input). Option labels (.score-option / .inline-radio / .inline-check) are
   nested inside a <fieldset> field and must NOT inherit this column layout — a
   broad `.form-grid label` was forcing the adl-score radio/badge/text to stack
   vertically. The child combinator stops it reaching the nested option rows. */
.form-grid > label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted, #475569); }
.form-grid > label input, .form-grid > label select, .form-grid > label textarea {
  padding: 6px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; font-size: 0.9rem;
}
.form-grid .form-grid-full { grid-column: 1 / -1; }
.form-grid .form-grid-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* Controlled-disposition follow-up stays in the legal-record row without a
   modal or nested card. Expanding an action grows the row so fields never
   overlap the forwarding deadline or adjacent records. */
.controlled-followup-meta { display: block; margin-top: 5px; line-height: 1.35; color: var(--muted, #475569); }
.controlled-followup { min-width: 210px; margin: 0 0 6px; }
.controlled-followup > summary { cursor: pointer; font-weight: 700; color: var(--teal-800, #115e59); }
.controlled-followup > form { display: grid; gap: 8px; margin-top: 8px; }
.controlled-followup > form > label { display: grid; gap: 3px; min-width: 0; font-size: 0.78rem; color: var(--muted, #475569); }
.controlled-followup > form input { width: 100%; min-width: 0; }

/* History range controls (Assessment + MAR sub-panels) */
.history-range-control {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 8px 0 12px;
}
/* Labels stack ("From" over the date input); the action buttons are single-line.
   Align everything to the bottom edge and give the buttons the input's height so
   the row reads as one consistent baseline rather than mismatched heights. */
.history-range-control .compact-action,
.history-range-control .secondary-action,
.history-range-control .ghost-action {
  align-self: flex-end;
}
.history-range-control .segmented-control { flex-wrap: wrap; }
.history-custom-input {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}
.history-custom-input input {
  padding: 4px 6px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px;
}
.assessment-history-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.assessment-history-row .row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, #e2e8f0); }
.data-table thead th { font-weight: 600; background: var(--surface-alt, #f8fafc); }

/* Assessment-schedule table — sortable/searchable list with row-select + bulk
   complete. Reuses .data-table + the app's .tag tones (no new visual language). */
.assessment-schedule-intro { margin: 4px 0 16px; }
.assessment-schedule-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.assessment-schedule-table { margin-top: 6px; }
.assessment-schedule-table thead th { padding-top: 12px; padding-bottom: 12px; }
.assessment-schedule-table tbody td { padding-top: 12px; padding-bottom: 12px; }
.assessment-schedule-toolbar .assessment-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
}
.assessment-schedule-toolbar select { padding: 5px 8px; }
.assessment-schedule-toolbar .assessment-search {
  margin-left: auto;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
}
.assessment-schedule-table th[aria-sort] { color: var(--teal-dark, #0f5d3f); cursor: default; }
.assessment-col-check { width: 34px; text-align: center; }
.assessment-col-actions { text-align: right; white-space: nowrap; }
.assessment-schedule-table tbody tr:hover { background: var(--hover, #f1f5f9); }
.assessment-schedule-table tr.is-complete td { opacity: 0.6; }
.assessment-schedule-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.assessment-selected-count { font-size: 0.85rem; color: var(--muted, #64748b); }

/* AI / dropdown / time-chip controls */
.input-with-action { display: flex; gap: 6px; align-items: flex-start; }
.input-with-action > input, .input-with-action > textarea { flex: 1 1 auto; }
.ai-button-stack { display: flex; flex-direction: column; gap: 4px; }
.compact-action { padding: 4px 10px; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }
.ai-suggest-output { display: block; margin-top: 4px; font-size: 0.75rem; color: #475569; min-height: 1em; }
.time-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
/* min-width/min-height 32px keeps each chip within WCAG 2.5.5 target-size
   (assert_touch_targets_are_usable in tests/integration/test_website_selenium.py). */
.time-chip { padding: 6px 12px; min-width: 32px; min-height: 32px; border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; cursor: pointer; font-size: 0.85rem; }
.time-chip.is-active { background: #1e40af; color: #fff; border-color: #1e40af; }

/* Work queue filters & groups */
.filter-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hairline, #e2e8f0); background: #fff; color: var(--ink, #0f172a); font-size: 12.5px; line-height: 1; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.filter-chip:hover { background: #f8fafc; }
/* Visible keyboard-focus ring so chips are operable and legible for keyboard-only
   users (a11y #3/#10) — matches the app's shared --focus-ring token. */
.filter-chip:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.45)); }
.filter-chip.is-active { background: var(--teal-dark, #0e4d49); color: #fff; border-color: var(--teal-dark, #0e4d49); }
.filter-chip[data-tone="risk"] { color: #b3261e; border-color: #f2c7c7; }
.filter-chip[data-tone="risk"].is-active { background: #b3261e; color: #fff; border-color: #b3261e; }
.filter-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: inherit; font-size: 11px; font-weight: 600; }
.filter-chip.is-active .filter-chip-count { background: rgba(255, 255, 255, 0.18); }
.task-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.task-group:last-child { margin-bottom: 0; }
.task-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid var(--hairline, #e2e8f0); }
.task-group-heading strong { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #64748b); }
.task-group-heading span { font-size: 11px; color: var(--muted, #64748b); }

/* Resident roster pagination */
.resident-roster-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.resident-roster-pagination-info { font-size: var(--fs-meta); color: var(--muted); }
.resident-roster-pagination .ghost-action[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Past-assessments history pager (Signatures / History tabs) — same treatment
   as the roster pager so a resident with many completed forms is paged, not
   rendered as an unbounded scroll. */
.assessment-history-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline, #e2e8f0); }
.assessment-history-pagination-info { font-size: 12.5px; color: var(--muted, #64748b); }
.assessment-history-pagination .ghost-action[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Chart header: context chip strip */
/* Clinical-summary chips read as their OWN zone below the identity block:
   a subtle inset panel with a divider above, so the header shows two grouped
   areas (who the resident is / their clinical snapshot) rather than loose tags
   floating under the name. */
.resident-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.resident-header-chips .tag { font-size: 12px; }

/* Med-safety status tones + disabled CTA */
.primary-action[disabled], .primary-action[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.med-safety-status[data-tone="warning"] { color: var(--amber, #b45309); }
.med-safety-status[data-tone="info"] { color: var(--muted, #64748b); }

/* ============================================================
   v20260603h — round-2 audit fixes
   ============================================================ */

/* A4: idle-warning session toast (CSP-safe replacement for inline styles) */
.rohacare-idle-title { font-weight: 600; margin-bottom: 6px; }
.rohacare-idle-countdown { margin-bottom: 10px; }
.rohacare-idle-stay {
  background: #22c55e; color: #0b3a16; border: 0; border-radius: 6px;
  padding: 8px 12px; font-weight: 600; cursor: pointer;
}

/* CSP-safe replacement for form-actions inline grid-column override */
.form-actions-full { grid-column: 1 / -1; }
/* Admin/safety forms (emergency prep, drills, safety locations, manual reading):
   a roomier grid + clear top margin so fields don't crowd each other or the
   surrounding card. 16px row / 18px column rhythm matches the resident forms. */
.form-grid-spaced { margin-top: 14px; gap: 16px 18px; }
/* Facility Profile: let the long fields (legal name, street) span the row. */
.field-wide { grid-column: 1 / -1; }

/* System Settings: visually separate high-impact controls from the editable
   record around them. These are inset workflow groups (no extra shadow), using
   the same line, mint, radius, and typography tokens as the existing module
   cards so the hierarchy is clearer without changing the product theme. */
.settings-control-card {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line, #d7e0dd);
  border-left: 4px solid var(--teal, #0d9488);
  border-radius: 8px;
  background: var(--surface-raised, #f7faf9);
}
.settings-control-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-control-card__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.settings-control-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--mint, #e7f5f1);
  color: var(--teal-dark, #0f5f59) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.settings-control-card__eyebrow {
  margin: 0 0 2px !important;
  color: var(--teal-dark, #0f5f59) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.settings-control-card h3,
.settings-control-card h4 {
  margin: 0 !important;
  color: var(--ink, #17212b) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.settings-control-card__header p:not(.settings-control-card__eyebrow) {
  max-width: 760px;
  margin: 3px 0 0 !important;
  color: var(--muted, #64748b) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.settings-control-card__header > .tag { flex: 0 0 auto; }
.settings-control-card__loading { margin: 0; color: var(--muted, #64748b); }

label.settings-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 20px !important;
  min-height: 64px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #d7e0dd);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: var(--ink, #17212b) !important;
  cursor: pointer;
}
.settings-toggle__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.settings-toggle__copy strong {
  color: var(--ink, #17212b);
  font-size: 14px;
  font-weight: 700;
}
.settings-toggle__copy small {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.settings-toggle input[type="checkbox"][role="switch"] {
  appearance: none;
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  margin: 0;
  border: 1px solid #9aa8a4;
  border-radius: 999px;
  background: #cbd5d1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.settings-toggle input[type="checkbox"][role="switch"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 120ms ease;
}
.settings-toggle input[type="checkbox"][role="switch"]:checked {
  border-color: var(--teal-dark, #0f766e);
  background: var(--teal-dark, #0f766e);
}
.settings-toggle input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }
.settings-toggle input[type="checkbox"][role="switch"]:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.24);
  outline-offset: 2px;
}
.settings-toggle input[type="checkbox"][role="switch"]:disabled { opacity: 0.55; cursor: wait; }

.settings-readiness {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--line, #d7e0dd);
}
.settings-readiness > span {
  color: var(--muted, #64748b) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.settings-readiness p { margin: 0 !important; color: var(--ink, #17212b) !important; }
.settings-readiness[data-tone="positive"] p { color: #166534 !important; }
.settings-readiness[data-tone="warning"] p { color: #92400e !important; }

.facility-access-card .form-grid { margin-top: 0; }
.facility-access-role-preview {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d7e0dd);
  border-radius: 8px;
  background: var(--panel, #fff);
}
.facility-access-role-preview > span {
  color: var(--teal-dark, #0f5f59) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.facility-access-role-preview strong { color: var(--ink, #17212b); font-size: 14px; }
.facility-access-role-preview small { color: var(--muted, #64748b); font-size: 11px; line-height: 1.35; }
.facility-access-role-preview .ghost-action { justify-self: start; margin-top: 5px; }
.facility-access-role-preview[data-state="matched"] { border-color: var(--teal, #0d9488); }
.facility-access-role-preview[data-state="unmatched"] { border-color: #d6a44a; background: #fffaf0; }

:root[data-theme="dark"] .settings-control-card {
  background: #171e28;
  border-color: #2b3444;
  border-left-color: #3ec9bd;
}
:root[data-theme="dark"] .settings-control-card__icon {
  background: #12332f;
  color: #79ded4 !important;
}
:root[data-theme="dark"] label.settings-toggle,
:root[data-theme="dark"] .facility-access-role-preview {
  background: #1a212c;
  border-color: #344052;
}
:root[data-theme="dark"] .facility-access-role-preview[data-state="matched"] { border-color: #3ec9bd; }
:root[data-theme="dark"] .facility-access-role-preview[data-state="unmatched"] {
  background: #2c2415;
  border-color: #b78a3f;
}
:root[data-theme="dark"] .settings-readiness[data-tone="positive"] p { color: #7fe0a6 !important; }
:root[data-theme="dark"] .settings-readiness[data-tone="warning"] p { color: #f0c56a !important; }

@media (max-width: 720px) {
  .settings-control-card { padding: 16px; }
  .settings-control-card__header { align-items: flex-start; flex-wrap: wrap; }
  .settings-control-card__identity { width: 100%; }
  .settings-control-card__header > .tag { margin-left: 54px; }
  label.settings-toggle { align-items: center !important; }
  .settings-readiness { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 520px) {
  label.settings-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px !important;
  }
  .settings-toggle__copy { display: contents; }
  .settings-toggle__copy strong { grid-column: 1; align-self: center; }
  .settings-toggle__copy small { grid-column: 1 / -1; }
  .settings-toggle input[type="checkbox"][role="switch"] { grid-column: 2; grid-row: 1; }
}

/* A1: mobile shell — push workspace below the (taller) sidebar on narrow viewports.
   The sidebar is position:fixed top:0 with row layout > 920px, column layout below;
   the prior padding-top:84px was correct only for the row layout. */
@media (max-width: 920px) {
  .workspace {
    padding-top: clamp(132px, 28vw, 168px);
  }
}
@media (max-width: 620px) {
  .workspace {
    padding-top: clamp(140px, 32vw, 180px);
  }
  .nav-list {
    overflow-x: auto;
    /* visible scroll hint */
    scrollbar-color: rgba(14,77,73,0.35) transparent;
  }
  .topbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .topbar-actions { width: auto; }
}

/* A5/A8: dashboard header — replaces .facility-hero + redundant h1 */
/* RC-FINAL-001b: the dedicated, simple family dashboard. */
.family-dashboard { display: grid; gap: 18px; max-width: 720px; }
.family-welcome h3 { margin: 0 0 4px; font-size: 20px; }
.family-panel { padding: 18px 20px; }
.family-resident-list { display: grid; gap: 10px; }
.family-resident-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--surface, #f8fafc);
}
.family-resident-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal, #0d9488); color: #fff; font-weight: 700;
}
.family-resident-body { display: flex; flex-direction: column; gap: 2px; }

.dashboard-header {
  display: flex;
  align-items: center; /* center the meta cluster against the title block so the
                          right-side chips don't float at the top, disconnected. */
  justify-content: space-between;
  gap: 16px 24px;
  /* Contained hero surface so the header isn't floating on the bare page
     background — a soft panel that anchors the title + facts as one band. */
  margin: 18px 0 20px;
  padding: 20px 24px;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  box-shadow: var(--soft-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
  flex-wrap: wrap; /* UX audit: prevent the actions strip from squeezing the
                     hero title into a narrow column when chips are wide. */
}
/* min(360px, 100%) so the copy block keeps its roomy 360px floor on desktop but
   never exceeds its parent on a phone — a hard 360px min-width overflowed the
   ~326px mobile content box, pushing the facility name past the viewport edge
   (measured title right edge 401px at 390px width). */
.dashboard-header-copy { min-width: min(360px, 100%); flex: 1 1 420px; overflow-wrap: anywhere; }
.dashboard-header-copy h2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Line 1: "Today, <date>" as a smaller eyebrow. Line 2: the facility name as
   the big heading. */
.dashboard-title-day {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.dashboard-title-facility {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--teal-dark);
}
.dashboard-header-sub {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .dashboard-header { flex-direction: column; align-items: stretch; }
  .dashboard-header-actions { justify-content: flex-start; }
  /* RC-DCLU-019: in the single-column mobile layout the 420px flex-basis on the
     header copy reserved a tall block that pushed the KPI strip far below the
     fold (content began ~y=797 at 390px). Reset the basis to content size so the
     first useful metric is reachable without a long scroll. */
  .dashboard-header-copy { flex: 0 1 auto; min-width: 0; }
}

/* A5: hero metric strip — promotes existing #metrics above the fold */
.metric-grid-hero {
  margin: 0 0 18px;
  /* Explicit 6-up that evenly divides the full container width, so the KPI row's
     left/right edges line up exactly with the hero card and the panels below.
     display:grid is forced because a responsive rule elsewhere computes this to
     flex, which ignored the column template and wrapped the cards. */
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .metric-grid-hero { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .metric-grid-hero { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ── Dashboard KPI cards — deep redesign (slick-bar) ───────────────────────
   Each card: a tinted icon-chip in its semantic color, a quiet uppercase label,
   a big bold value, and a one-line caption. Uniform 1px border all sides (tone
   lives in the icon-chip, not a stray left-border), generous padding, soft real
   shadow, and a clear hover lift on the interactive ones. */
.metric-grid-hero .metric {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 16px 16px 18px !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 16px !important;
  background: var(--surface, #fff) !important;
  box-shadow: var(--shadow-sm) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.metric-grid-hero .metric::before { display: none !important; } /* drop legacy dot */
.metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-sunken, #f1f5f4);
  color: var(--ink-700, #334155);
  flex: 0 0 auto;
}
.metric-grid-hero .metric small {
  padding-left: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--muted, #64748b) !important;
  line-height: 1.2 !important;
}
.metric-grid-hero .metric strong {
  /* Sized so even a long currency value ("$1,279,374.98", ~13 chars) fits the
     narrow 6-up column without clipping. Tabular figures keep digits aligned;
     the value may wrap rather than overflow. */
  font-size: clamp(16px, 1.25vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-900, #0f172a) !important;
  font-variant-numeric: tabular-nums !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
.metric-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}
/* Semantic icon-chip tints per tone. */
.metric[data-tone="risk"]     .metric-icon { background: #fef2f2; color: #dc2626; }
.metric[data-tone="warning"]  .metric-icon { background: #fffbeb; color: #b45309; }
.metric[data-tone="clinical"] .metric-icon { background: #ecfeff; color: #0e7490; }
.metric[data-tone="finance"]  .metric-icon { background: #eef2ff; color: #4f46e5; }
.metric[data-tone="steady"]   .metric-icon { background: var(--mint, #ecfdf5); color: var(--teal-dark, #0f766e); }
.metric[data-tone="positive"] .metric-icon { background: #ecfdf5; color: #059669; }
.metric-grid-hero .metric--interactive:hover {
  border-color: color-mix(in srgb, var(--teal, #0f766e) 30%, var(--line, #e2e8f0)) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* A11: create-invoice modal */
.rohacare-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vh, 60px) clamp(12px, 4vw, 32px);
}
.rohacare-modal[hidden] { display: none; }
.rohacare-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 32, 39, 0.55);
  backdrop-filter: blur(2px);
}
.rohacare-modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 80px);
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 32, 39, 0.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rohacare-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
}
.rohacare-modal-header h3 {
  margin: 0; font-size: 18px; font-weight: 700;
}
.rohacare-modal-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px;
}
.rohacare-modal-close:hover { background: rgba(14,77,73,0.06); color: var(--ink); }
.rohacare-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}
.form-panel-flush { background: transparent; border: 0; padding: 0; box-shadow: none; }

/* ============================================================
   Round 3 UI/UX fixes — v20260603i
   A6 work-queue collapsible groups
   A7 resident snapshot "view all" CTA
   A9 admin shell IA cleanup
   A12 billing date input widths
   A13 topbar duplication on dashboard
   A15 last-refreshed stamp
   ============================================================ */

/* sr-only helper for headings that exist for a11y but should not paint */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* A6 — collapsible task group headings */
.task-group { margin-bottom: 10px; }
.task-group-heading {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  appearance: none;
  background: rgba(13, 148, 136, 0.06);
  border: 1px solid rgba(13, 148, 136, 0.18);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit; cursor: pointer;
  color: var(--ink, #0f172a);
  text-align: left;
}
.task-group-heading:hover { background: rgba(13, 148, 136, 0.1); }
.task-group-heading strong { font-size: 13px; font-weight: 700; flex: 1; }
.task-group-count {
  font-size: 12px; font-weight: 600;
  color: var(--muted, #475569);
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  padding: 2px 8px;
}
.task-group-caret {
  font-size: 11px; line-height: 1;
  color: var(--teal-dark, #0f766e);
  width: 12px; display: inline-block;
}
.task-group-body { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.task-group.is-collapsed .task-group-body { display: none; }
.task-group-more {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 12px; font-weight: 600;
  color: var(--teal-dark, #0f766e);
  background: transparent;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.task-group-more:hover { background: rgba(13, 148, 136, 0.1); }

/* Work-queue row: the jump button + a "Done" dismissal button side by side. */
.task-row { display: flex; align-items: stretch; gap: 8px; }
.task-row-main { flex: 1 1 auto; min-width: 0; }
.task-done-btn {
  flex: 0 0 auto;
  align-self: center;
  cursor: pointer;
  border: 1px solid var(--mint-border, #c9d8d4);
  background: var(--mint, #eef6f3);
  color: var(--teal-dark, #0f766e);
  font-size: 12px;
  font-weight: 800;
  border-radius: 7px;
  padding: 7px 12px;
}
.task-done-btn:hover { background: #e3edea; }
.task-done-btn:disabled { opacity: 0.5; cursor: default; }
.toast-undo {
  margin-left: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: inherit;
  font-weight: 800;
  font-size: 12px;
  border-radius: 6px;
  padding: 3px 10px;
}

/* A7 — resident snapshot "view all" link card */
.resident-strip-more {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--teal-dark, #0f766e);
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-align: left;
  margin-top: 6px;
}
.resident-strip-more:hover {
  background: rgba(13, 148, 136, 0.06);
  border-color: var(--teal, #0d9488);
}

/* A9 — admin shell: remove redundant "Administration" eyebrow inside the
   action panel since the tab and section heading already establish context. */
.admin-action-panel > div:first-child > span {
  display: none !important;
}

/* A12 — billing date inputs need more breathing room so MM/DD/YYYY doesn't clip */
.billing-date { min-width: 168px; }
.billing-date-clear { min-width: 64px; }

/* A13 — hide the "RohaChart" topbar h1 on the dashboard (the dashboard header
   already names the facility). Keep it on other sections as a wayfinder. */
body[data-section="dashboard"] .topbar h1 { display: none; }

/* A15 — last-refreshed stamp lives next to the Refresh button */
.refreshed-stamp {
  font-size: 12px;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----- Persona 2 family-portal staff modal & related helpers ----- */
.panel-heading-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.invite-family-help {
  margin: 0 0 12px;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}
.invite-family-result {
  margin-top: 14px;
  padding: 12px;
  background: #eef9f1;
  border-radius: 8px;
  font-size: 0.9rem;
}
.invite-family-result__title {
  margin: 0 0 8px;
  font-weight: 600;
  color: #0f5d27;
}
.invite-family-result__url {
  width: 100%;
  padding: 8px;
  border: 1px solid #c8d1e0;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.invite-family-result__expires {
  margin: 6px 0 0;
  color: #0f5d27;
  font-size: 0.8rem;
}

/* F12: History tab role-clarifying intro line above the archive tile grid. */
.resident-history-intro {
  margin: 0 0 12px;
  font-size: 0.88rem;
}

/* PM-1: Family-notification approval queue (admin panel) */
.notifications-approval-help {
  margin: 0 0 12px;
  font-size: 0.88rem;
}
.notif-approval-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.notif-approval-banner-row h3 { margin: 0; }
.notif-approval-banner-row > div { display: flex; flex-direction: column; gap: 2px; }
.notif-approval-banner #notificationsApprovalOpen { white-space: nowrap; }
.notif-approval-card {
  border: 1px solid var(--surface-border, #e3e6ed);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
}
.notif-approval-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.notif-approval-head strong {
  display: block;
  font-size: 0.95rem;
}
.notif-approval-head .small {
  margin: 2px 0 0;
  font-size: 0.78rem;
}
.notif-approval-body {
  background: #f5f7fb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 8px;
  max-height: 220px;
  overflow-y: auto;
}
.notif-approval-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.notif-approval-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag.tone-warn {
  background: #fdf3d9;
  color: #7a5500;
}
.tag.tone-good {
  background: #e6f6ec;
  color: #0f5d27;
}
.tag.tone-muted {
  background: #eef2f7;
  color: #5b6471;
}
/* Danger chip: terminal delivery failure on the family-notification queue —
   must read as loud as a clinical alert, not blend in with warnings. */
.tag.tone-danger {
  background: #fde8e8;
  color: #991b1b;
}
.small {
  font-size: 0.8rem;
}

/* PM-2 (Persona 3): family inbox cross-resident view. */
.nav-badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.45em;
  margin-left: 0.4em;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-weight: 600;
}
.family-inbox-help {
  margin: 0 0 0.75rem 0;
}
.family-inbox-row {
  border-left: 3px solid transparent;
}
.family-inbox-row .tag.tone-warn {
  background: #fef3c7;
  color: #92400e;
}
.family-inbox-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.family-inbox-row-body {
  margin: 0.4rem 0;
}
.family-inbox-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.link-button {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Per-resident Family Messages thread (Family Messages tab). Inbound
   messages from the family portal hug the right, outbound staff
   replies hug the left, mirroring the reading direction in a typical
   chat thread without exceeding 8-bit chrome. */
.family-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.family-thread-row {
  border: 1px solid var(--hairline, rgba(14, 77, 73, 0.12));
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  max-width: 86%;
}
.family-thread-row--inbound {
  align-self: flex-end;
  border-left: 3px solid var(--teal-dark, #0e4d49);
  background: #f0f8f7;
}
.family-thread-row--outbound {
  align-self: flex-start;
  border-left: 3px solid #2563eb;
}
.family-thread-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.family-thread-subject {
  margin-bottom: 2px;
}
.family-thread-body {
  margin: 0;
  white-space: pre-wrap;
}
.link-button:hover {
  text-decoration: underline;
}

/* PM-3 (Persona 3): trial / seat-limit banner + upgrade modal. */
.billing-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}
.billing-banner.tone-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.billing-banner-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.15rem;
}
.billing-banner-cta {
  white-space: nowrap;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-backdrop[hidden] {
  display: none;
}
.modal-backdrop .modal {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
}
.modal-backdrop .modal h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}
.modal-backdrop .modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.billing-upgrade-meta {
  margin: 0.75rem 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.92rem;
}
.billing-upgrade-meta dt {
  font-weight: 600;
  color: #475569;
}
.billing-upgrade-meta dd {
  margin: 0;
}

/* F7: configurable pricing tiers rendered inside the upgrade modal. */
.billing-upgrade-plans {
  margin: 0.5rem 0 0.75rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.billing-plan-row {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.92rem;
}
.billing-plan-row:last-child {
  border-bottom: none;
}
.billing-plan-row.is-current {
  background: #f0fdf4;
}
.billing-plan-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.billing-plan-rate {
  font-weight: 600;
  white-space: nowrap;
}
.billing-plan-range {
  white-space: nowrap;
}

/* PM-5 (Persona 3): audit log filter/search row. */
.audit-filter-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem 0;
}
.audit-filter-row .resident-roster-search {
  flex: 1;
  min-width: 220px;
}
.audit-filter-row select {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
}
.audit-filter-row .audit-range-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.audit-filter-row .audit-range-field span {
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}
.audit-filter-row .audit-range-field input {
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font: inherit;
  background: #fff;
}

/* PM-7 (Persona 3): Cmd+K command palette (features + residents). */
.quick-search-modal {
  max-width: 600px;
  width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}
.quick-search-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 10px;
}
.quick-search-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.quick-search-head kbd {
  background: var(--surface-sunken, #f1f5f9);
  color: var(--muted, #64748b);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  border: 1px solid var(--line, #e5e7eb);
}
/* Search field with a leading magnifier, on its own row. */
.quick-search-input {
  width: calc(100% - 36px);
  margin: 0 18px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 11px 14px 11px 40px;
  font-size: 14px;
  outline: none;
  background: var(--surface, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 14px center;
}
.quick-search-input:focus-visible {
  border-color: var(--teal, #0f766e);
  box-shadow: 0 0 0 3px var(--teal-50, #e6f2f1);
}
.quick-search-results {
  max-height: min(56vh, 420px);
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.quick-search-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.quick-search-row:hover,
.quick-search-row.is-active,
.quick-search-row[aria-selected="true"] {
  background: var(--teal-50, #e6f2f1);
}
.quick-search-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
  color: var(--muted, #64748b);
  font-size: 12px;
}
.quick-search-foot kbd {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  margin: 0 0.15rem;
  border-radius: 4px;
  font-size: 0.7rem;
}

/* PM-9 (Persona 3): Census & Occupancy report cards. */
.census-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.census-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.75rem;
}
.census-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #475569;
}
.census-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.census-card li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed #e2e8f0;
  align-items: baseline;
}
.census-card li:last-child {
  border-bottom: none;
}
.census-footer {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

/* PM-10 (Persona 3): mobile-responsive layout fallback for the
   resident roster and primary nav. */
@media (max-width: 768px) {
  .resident-roster-grid,
  .two-column,
  .three-column,
  .stat-grid,
  .stack-grid {
    grid-template-columns: 1fr !important;
  }
  .nav-list {
    flex-wrap: wrap;
  }
  .panel {
    padding: 0.75rem;
  }
  .top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  table {
    display: block;
    overflow-x: auto;
  }
}

/* Resident safety banner — extracted from inline styles to satisfy CSP. */
/* The resident Safety banner is the single most safety-critical strip on the
   chart — a nurse must not miss a DNR, an allergy, isolation precautions, or a
   controlled med. It is deliberately loud: a thick amber accent, a tinted fill,
   an alert icon, an uppercase label, and a lift shadow so it reads as a banner,
   not a quiet info strip. When a true danger flag is present (DNR/DNI/Comfort
   Care, Do-Not-Hospitalize, or isolation precautions) it escalates to red. */
/* Calm by default: when there's no active danger flag the safety strip is a
   quiet neutral row of at-a-glance chips — it should not shout on a resident
   whose risks are all "low". It escalates to loud amber/red ONLY when a genuine
   alert is present (data-alert="true"), so attention is earned, not constant. */
.resident-safety-banner {
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  box-shadow: none;
}
.resident-safety-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
/* Shield glyph (calm state); becomes a warning triangle when alerting. */
.resident-safety-banner__label::before {
  content: "\1F6E1"; /* 🛡 shield */
  font-size: 14px;
  line-height: 1;
}
/* Quiet safety chips (Code / Fall / Elopement): smaller, muted, low-contrast so
   the strip reads calm and only the emphasized Allergy chip draws the eye. */
.resident-safety-banner .tag-quiet {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  border-color: var(--line, #e5e7eb);
  color: var(--muted, #64748b);
}
/* Allergy stays loud: solid amber fill, heavier weight — the one chip that must
   jump out at the bedside regardless of the banner's overall alert state. */
.resident-safety-banner .resident-safety-allergy[data-emphasis="true"] {
  background: #fcefc7;
  border-color: #eab308;
  color: #854d0e;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.35);
}
/* Escalated state: a genuine danger flag is present. Red, heavier, and a
   subtle attention pulse on first paint so it catches the eye. */
.resident-safety-banner[data-alert="true"] {
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 5px solid #dc2626;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.22);
}
.resident-safety-banner[data-alert="true"] .resident-safety-banner__label {
  color: #b91c1c;
}
.resident-safety-banner[data-alert="true"] .resident-safety-banner__label::before {
  content: "\26A0"; /* ⚠ warning sign only when a real alert is present */
  font-size: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .resident-safety-banner[data-alert="true"] { animation: safety-banner-attention 1.4s ease-in-out 1; }
}
@keyframes safety-banner-attention {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
  35%  { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.28); }
  100% { box-shadow: 0 1px 4px rgba(220, 38, 38, 0.22); }
}

/* Family-inbox panel embedded inside the Residents page. Rendered as
   a <details> so operators can collapse the cross-resident triage
   queue once they have routed everything and want to focus on the
   directory itself. */
.resident-family-inbox-panel { margin-top: 18px; }
.resident-family-inbox-panel > .resident-family-inbox-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 0;
  gap: 12px;
}
.resident-family-inbox-panel > .resident-family-inbox-summary::-webkit-details-marker { display: none; }
.resident-family-inbox-panel > .resident-family-inbox-summary::before {
  content: "▾";
  display: inline-block;
  width: 14px;
  color: #6b7280;
  transition: transform 0.15s ease;
}
.resident-family-inbox-panel:not([open]) > .resident-family-inbox-summary::before { transform: rotate(-90deg); }
.resident-family-inbox-panel > .resident-family-inbox-summary h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
}

/* --- Date-of-birth picker (custom, no third-party libs) --- */
.dob-field { position: relative; display: block; }
.dob-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--r-sm, 6px);
  border: 1px solid var(--hairline-strong, #cdd9d4);
  background: var(--surface, #fff);
  color: var(--ink-900, #24312d);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
  cursor: pointer;
  text-align: left;
}
.dob-trigger:hover { border-color: var(--teal, #0d9488); }
.dob-trigger[aria-expanded="true"],
.dob-trigger:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
.dob-trigger-text.is-placeholder { color: var(--muted, #667570); }
.dob-trigger-icon { font-size: 14px; line-height: 1; }
.dob-popover {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dde7e2);
  border-radius: 10px;
  box-shadow: var(--shadow, 0 18px 45px rgba(28, 48, 42, 0.1));
  padding: 12px;
}
.dob-pop-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.dob-pop-selects { display: flex; gap: 6px; flex: 1 1 auto; }
.dob-select {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 13px;
  padding: 5px 26px 5px 6px;
  background-position: right 7px center;
  border-radius: 6px;
  border: 1px solid var(--line, #dde7e2);
  background: var(--surface, #fff);
  color: var(--ink-900, #24312d);
  cursor: pointer;
}
.dob-nav {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line, #dde7e2);
  background: var(--surface, #fff);
  color: var(--ink-900, #24312d);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dob-nav:hover { background: var(--mint, #dff0ea); }
.dob-weekdays, .dob-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dob-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #667570);
  padding: 4px 0;
}
.dob-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-900, #24312d);
  cursor: pointer;
}
.dob-day:hover:not(.is-empty):not(:disabled) { background: var(--mint, #dff0ea); }
.dob-day.is-empty { cursor: default; }
.dob-day:disabled { color: var(--line, #dde7e2); cursor: not-allowed; }
.dob-day.is-selected {
  background: var(--teal, #187a74);
  color: #fff;
  font-weight: 700;
}

/* Safety Check Logs — admin QR card (printable per-location code). */
.safety-qr-card {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border, #d8dee6);
  border-radius: 12px;
  background: #fafcff;
  max-width: 320px;
}
.safety-qr-card h4 { margin: 0 0 4px; }
.safety-qr-card img { display: block; margin: 8px 0; }

.drill-checklist-fieldset,
.drill-attendance-fieldset {
  border: 1px solid var(--border, #d8dee6);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0; /* echo the 16px outer grid row-gap so it doesn't crowd siblings */
}
.drill-checklist-fieldset legend,
.drill-attendance-fieldset legend { font-weight: 600; padding: 0 6px; }
.drill-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 18px;
  margin-top: 8px;
}
.drill-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.3;
}
.drill-check-item input { margin-top: 2px; flex: 0 0 auto; }
/* Drill staff-attendance roster: name + role + remove per row. */
.drill-attendance-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.drill-attendance-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.drill-attendance-row input { min-height: 38px; }
@media (max-width: 720px) { .drill-attendance-row { grid-template-columns: 1fr; } }

.drill-checklist-detail { margin-top: 4px; font-size: 0.85rem; }
.drill-checklist-detail summary { cursor: pointer; color: var(--muted, #64748b); }
.drill-checklist-summary { margin: 6px 0 0; padding-left: 18px; }
.drill-checklist-summary li { padding: 1px 0; }

/* Activity Calendar — a real month grid (7 columns) rather than a flat table. */
.activity-calendar-grid-wrap { margin: 8px 0 18px; }
.cal-toolbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.cal-month-label { font-size: 15px; font-weight: 700; color: var(--teal-dark, #0f766e); min-width: 180px; text-align: center; }
.activity-calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.activity-calendar-grid thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #64748b); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--line, #e2e8f0);
}
.activity-calendar-grid td.cal-cell {
  vertical-align: top; height: 92px; padding: 4px 6px;
  border: 1px solid var(--line, #e2e8f0); width: 14.28%;
}
.cal-cell.cal-empty { background: #f8fafc; }
.cal-cell.is-today { background: rgba(13, 148, 136, 0.07); box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.35); }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--muted, #475569); margin-bottom: 3px; }
.cal-cell.is-today .cal-daynum { color: var(--teal-dark, #0f766e); }
.cal-day-activities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-activity {
  font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 5px;
  background: rgba(13, 148, 136, 0.1); color: #134e4a;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-activity-time { font-weight: 600; }
.cal-activity-loc { color: var(--muted, #64748b); }
.cal-activity[data-cat="physical"] { background: rgba(59, 130, 246, 0.12); color: #1e3a8a; }
.cal-activity[data-cat="social"] { background: rgba(168, 85, 247, 0.12); color: #6b21a8; }
.cal-activity[data-cat="cognitive"] { background: rgba(234, 179, 8, 0.15); color: #854d0e; }
.cal-activity[data-cat="spiritual"] { background: rgba(99, 102, 241, 0.12); color: #3730a3; }
.cal-activity[data-cat="creative"] { background: rgba(236, 72, 153, 0.12); color: #9d174d; }
.cal-activity[data-cat="outing"] { background: rgba(16, 185, 129, 0.14); color: #065f46; }
/* Conditional add-form fields hide until their controlling value is selected. */
.field-conditional[hidden] { display: none; }

/* Resident-binder export rows: keep the "Open full binder (PDF)" + "Face sheet"
   actions inline so the row reads as one action cluster, not stacked links. */
.binder-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ─────────────────────────────────────────────────────────────────────────
   UI polish pass (2026-06-28): lift several "plain" surfaces off the bare
   background so they read as designed cards, not floating text. Scoped,
   additive rules placed last so they win cleanly over the base styles above.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Dashboard header status chips — group them on a soft surface so the
      "8 beds · admin · role · compliance · updated · refresh" cluster reads as
      one toolbar instead of pills floating on the page background. */
/* Header meta cluster: a quiet inline group, not a heavy boxed strip. The
   reference facts (beds / role / compliance) sit on a soft pill rail; the
   Updated stamp + Refresh action are separated by a hairline so the action
   reads distinctly from the read-only facts. */
.dashboard-header-actions {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  align-items: center;
  gap: 10px;
}
.hero-facts {
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-sunken, #f1f5f4);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
}
.dashboard-header-actions .chip {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--ink-700, #334155);
  font-weight: 600;
  /* Wider, taller chips so the labels breathe (the global chip rule crams them
     to 24px / 0 8px). */
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}
/* Compliance chip carries its semantic tone (warning/risk) instead of reading
   neutral — a 32% readiness should look like a gap, not a fact. */
.dashboard-header-actions .chip[data-tone="warning"] {
  background: #fffbeb !important;
  border-color: #fcd97a !important;
  color: #92660b !important;
}
.dashboard-header-actions .chip[data-tone="risk"] {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
.refreshed-stamp { font-size: 12px; color: var(--muted, #64748b); }

/* 2. Face Sheet / detail fields — these are dense label/value reference items,
      not interactive cards. Keep them flat and compact (a hairline divider, no
      border box / accent bar / shadow / hover-lift) so the Basic Overview reads
      as a tidy fact sheet rather than 18 decorated tiles. */
.detail-grid { gap: 0 28px; }
.detail-field {
  gap: 1px;
  padding: 7px 0;
  border: none;
  border-bottom: 1px solid var(--line, #eef2f1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.detail-field:hover { box-shadow: none; transform: none; }
.detail-field span { font-size: 10.5px; letter-spacing: 0.04em; }
.detail-field strong { font-size: 13.5px; font-weight: 600; color: var(--ink, #15212d); }
.detail-field strong { color: var(--ink, #15212d); }

/* 2b. Face Sheet "Basic Overview" subgroups — split the dense fact sheet into
      labeled columns (Demographics / Clinical / Directives & compliance) that
      flow side-by-side on wide screens and stack on narrow ones. Each group is
      a quiet column with a small uppercase caption, not a boxed card. */
.facesheet-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 32px;
  align-items: start;
}
.facesheet-group { min-width: 0; }
.facesheet-group-title {
  margin: 4px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark, #0f766e);
  border-bottom: 2px solid color-mix(in srgb, var(--teal, #0f766e) 18%, transparent);
  padding-bottom: 4px;
}
.facesheet-group .detail-grid { grid-template-columns: 1fr; gap: 0; }

/* Assessment & Service Plan — primary action bar. Replaces the lonely tile in
   an empty grid row with a full-width banner: copy + due-status chips on the
   left, the start CTA on the right. */
.assessment-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid var(--teal, #0d9488);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--soft-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}
.assessment-primary-copy { min-width: 0; flex: 1 1 320px; }
.assessment-primary-copy h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.2; }
.assessment-primary-copy p { margin: 0 0 10px; }
.assessment-primary .primary-action { flex: 0 0 auto; white-space: nowrap; }
.assessment-due-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.assessment-schedule-form[hidden] { display: none; }

/* Care Note (and the shared note/observation/incident form pattern). The
   narrative is the focal point: a calmer default height than the old ~300px
   box, with metadata collapsed onto one row above it and routing options
   grouped under an "After saving" caption so the bare checkboxes read as
   actions, not mysteries. */
.care-note-form { gap: 18px; }
.care-note-form .form-row { gap: 14px 20px; align-items: end; }
.care-note-narrative textarea { min-height: 150px; }
/* Routing options as a quiet tinted panel with chip-style toggles: grouped and
   deliberate (not a bare divider), but lighter than a bordered fieldset. Each
   option is a pill that fills teal when checked, so the active routing reads at
   a glance. */
.care-note-routing {
  border: 0;
  border-radius: 10px;
  background: var(--surface-sunken, #f7faf9);
  padding: 14px 16px 16px;
  margin: 0;
  min-width: 0;
}
.care-note-routing-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.care-note-routing-hint {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted, #94a3b8);
  font-size: 11px;
}
.routing-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.routing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line, #d7e0dd);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #334155);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.routing-chip:hover { border-color: var(--teal, #0f766e); }
.routing-chip input { accent-color: var(--teal, #0f766e); }
.routing-chip:has(input:checked) {
  background: var(--mint, #ecfdf5);
  border-color: var(--teal, #0f766e);
  color: var(--teal-dark, #0f766e);
}
/* Only show the focus ring for KEYBOARD focus, not on mouse click. :focus-within
   drew a teal outline around the whole pill every time the box was clicked — the
   reported "green rectangle appears outside the checkbox" (GitLab #26). Gating on
   :focus-visible keeps the ring for keyboard users but not pointer interaction. */
.routing-chip:has(input:focus-visible) {
  outline: 2px solid var(--teal, #0f766e);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .care-note-form .form-row { grid-template-columns: 1fr; }
}

/* 3. Additional-reports "Most Recent / date" — it was a full-width centered
      block sitting outside the form flow. Make it a compact right-rail card
      that belongs to the layout. */
.resident-report-side div {
  justify-items: start;
  gap: 4px;
  padding: 14px 16px;
  border-top: 0;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--soft-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}
.resident-report-side span { font-size: 12px; letter-spacing: 0.04em; color: var(--muted, #64748b); }
.resident-report-side strong { font-size: 20px; color: var(--teal-dark, #0f766e); }
.resident-report-side p {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--mint, #ecfdf5);
  color: var(--teal-dark, #0f766e);
  font-weight: 600;
}

/* 4. Signature "Where each signature is captured" — this is a REFERENCE key,
      not clickable tiles. De-emphasize it (flat, muted, no hover affordance,
      default cursor) so users don't expect to click it, and tag the heading. */
.reference-key-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hover, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reference-key-note { margin: -4px 0 10px; }
.resident-signature-item--reference {
  background: var(--hover, #f8fafc);
  border-style: dashed;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.resident-signature-item--reference:hover {
  border-color: var(--teal, #0f766e);
  border-style: solid;
  background: var(--mint, #ecfdf5);
  transform: translateY(-1px);
}
.resident-signature-item--reference:focus-visible {
  outline: 2px solid var(--teal, #0f766e);
  outline-offset: 2px;
}
.resident-signature-item--reference span {
  color: var(--teal-dark, #0f766e);
  font-weight: 600;
}

/* Signed-on-file cards: title is the hero, date is a quiet caption, signer +
   attestation badge on one calm line — so four signed forms read as a scannable
   list rather than four identical walls of attestation boilerplate. */
.resident-signature-item--signed { gap: 4px; }
.resident-signature-item--signed strong { font-size: 16px; }
.resident-signature-item--signed span {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}
.resident-signature-item--signed p {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink, #15212d);
}
.signature-attested {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mint, #ecfdf5);
  color: var(--teal-dark, #0f766e);
  border: 1px solid color-mix(in srgb, var(--teal, #0f766e) 22%, transparent);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

/* ── Resident presence-status timeline (Status Log tab + Away badges) ── */
.resident-away-tag {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.resident-status-current[data-away="true"] {
  border-left: 4px solid #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
}
.resident-status-current-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: var(--fw-semibold, 600);
  font-size: 0.85rem;
  white-space: nowrap;
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}
.resident-status-current-badge[data-away="true"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}
.resident-status-current-detail { margin: 8px 0 0; color: var(--ink-500, #475569); }
.resident-status-form .form-grid-wide { grid-column: 1 / -1; }

/* 30-day presence strip */
.resident-status-strip {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.resident-status-strip-cell {
  width: 18px;
  height: 22px;
  border-radius: 3px;
  background: #cbd5e1;
  display: inline-block;
}
.resident-status-strip-cell[data-kind="present"] { background: #34d399; }
.resident-status-strip-cell[data-kind="away"] { background: #f59e0b; }
.resident-status-strip-cell[data-kind="lifecycle"] { background: #a78bfa; }
.resident-status-strip-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #475569;
}
.resident-status-strip-legend span { display: inline-flex; align-items: center; gap: 6px; }
.resident-status-strip-legend i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

/* Status log table badges, colored by kind */
/* Status-log badge: on the semantic --status-* tokens (was bespoke hex), and
   kept on one line so a two-word status like "With family / friend" doesn't wrap
   into a tall pill in the log table. */
.resident-status-cell-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: var(--fw-semibold, 600);
  white-space: nowrap;
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}
.resident-status-cell-badge[data-kind="away"] { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.resident-status-cell-badge[data-kind="lifecycle"] { background: var(--status-info-bg); color: var(--status-info-fg); }

/* Med Pass "Away — not given" card */
.med-pass-card--away {
  border-left: 4px solid #d97706;
  background: #fffbeb;
}
.med-pass-away-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef3c7;
  color: #7c2d12;
}
.med-pass-away-note strong { display: block; margin-bottom: 2px; }
.med-pass-away-note p { margin: 0; font-size: 0.85rem; }

/* ── Facility name: a highlighted, aligned brand chip in the topbar (rather
   than a plain heading that blends into the page). Kept inline so the topbar
   flow is preserved. ── */
/* Facility name is a quiet wayfinder, not a competing UI element. A clean text
   label with a small brand dot — no fill, no border, no accent bar — so it
   reads as a heading and the page content stays the focus. */
.topbar h1#facilityName {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink, #15212d);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A small brand dot anchors the label to the product palette. */
.topbar h1#facilityName::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #0f766e);
}
/* Stacked brand block: facility name + a quiet license/county line beneath, so
   the wayfinder carries the inspector-facing identifier and isn't a bare label. */
.topbar-brand { display: grid; gap: 2px; min-width: 0; }
.topbar-facility-meta {
  margin: 0;
  padding-left: 17px; /* aligns under the name text, past the 8px dot + 9px gap */
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #64748b);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.topbar-facility-meta:empty { display: none; }
/* Hide the brand block on the dashboard ONLY — the dashboard hero already reads
   "Today at <facility> · <date> · <county> · License …", so showing it here too
   names the facility twice. It stays visible on every other section. */
body[data-section="dashboard"] .topbar-brand { display: none; }

/* ── Family-shared appointments (Family tab) ── */
.family-appointment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.family-appointment-row {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.family-appointment-row[data-acked="false"] {
  border-left: 4px solid #d97706;
  background: #fffbeb;
}
.family-appointment-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.family-appointment-main strong { font-size: 0.98rem; }
.family-appointment-when { margin: 4px 0; color: #334155; font-weight: 600; }
.family-appointment-row p { margin: 2px 0; }
.family-appointment-row .compact-action { margin-top: 8px; }
.family-appointments-empty .panel-heading { margin-bottom: 0; }

/* Shared paginator for long admin lists (resident directory, contacts, …). */
.admin-list-pager, .list-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.admin-list-pager-info { font-size: 0.85rem; color: #64748b; }

/* ============================================================
   Shared sub-navigation treatment (.subnav-bar) — applied to the
   resident chart tabs and the Administration sub-tabs so a row of
   tabs unmistakably reads as a sub-menu for the current section:
   (1) an eyebrow label above the rail, (2) a strong SOLID-teal
   active tab (white text) so "you are here" is obvious — the prior
   white-with-teal-border active state was indistinguishable from a
   hover/card. Appended last so it wins the !important cascade.
   ============================================================ */
.subnav-bar {
  position: relative !important;
  margin-top: 26px !important;
}
.subnav-bar::before {
  content: "Sections";
  position: absolute;
  top: -18px;
  left: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.resident-chart-tabs.subnav-bar::before { content: "Chart sections"; }
.admin-chart-tabs.subnav-bar::before { content: "Administration sections"; }

/* Prominence: a more defined rail and bolder, slightly larger tab text so the
   sub-nav clearly reads as the primary section switcher for the page, not a
   faint row of filters. Eyebrow label is darker + sits a touch higher. */
.subnav-bar {
  margin-top: 30px !important;
  padding: 7px !important;
  background: #eef3f1 !important;
  border: 1px solid #d8e2de !important;
  border-radius: 12px !important;
}
.subnav-bar::before {
  top: -19px !important;
  color: #64748b !important;
  font-size: 11px !important;
}
.subnav-bar .admin-chart-tab,
.subnav-bar .resident-chart-tab {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  min-height: 40px !important;
}
/* Inactive tabs darken on the rail so the labels are legible, not muted-gray. */
.subnav-bar .admin-chart-tab:not(.is-active),
.subnav-bar .resident-chart-tab:not(.is-active) {
  color: var(--ink-700, #334155) !important;
}

/* Slimmer admin working-area header: title + a quiet context chip on one row,
   description beneath. Replaces the redundant Scope/Context/Workflow grid. */
.admin-action-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-action-head h3 { margin: 0; }
.admin-action-context {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-dark, #0f766e);
  background: var(--mint, #ecfdf5);
  border: 1px solid color-mix(in srgb, var(--teal, #0f766e) 20%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: none;
}
.admin-action-context:empty { display: none; }

/* Strong active state: solid teal fill, white text/icon — unmistakable. */
.subnav-bar .resident-chart-tab.is-active,
.subnav-bar .admin-chart-tab.is-active {
  color: #ffffff !important;
  background: var(--teal-dark, #0f766e) !important;
  border-color: var(--teal-dark, #0f766e) !important;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.28) !important;
}

/* Status & Location two-column layout (per mockup): current+presence | form+log.
   Each column stacks its two cards; collapses to one column under 900px. */
.resident-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5, 20px);
  align-items: start;
}
.resident-status-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 20px);
  min-width: 0;
}
@media (max-width: 900px) {
  .resident-status-grid { grid-template-columns: 1fr; }
}

/* ══ Visual overhaul — authoritative status-pill tones (overhaul fix #1) ══
   ONE source of truth for .tag / .chip status colors, mapped to the semantic
   --status-* tokens. Placed last so it supersedes the older scattered tone
   scales (which used divergent hand-mixed hex — two reds, two ambers across the
   app). The UI emits these tone names; each is given a real color here so none
   fall back to colorless grey:
     ok/positive/success/steady → ok (green)   warning/pending → warn (amber)
     danger/risk/critical → danger (red)        info/clinical → info (blue)
     neutral + anything else → neutral (grey)
   Reconciles the JS tone vocabulary with the CSS in one block. */
.tag[data-tone],
.chip[data-tone] {
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: var(--fw-semibold, 600);
}
.tag[data-tone="ok"], .chip[data-tone="ok"],
.tag[data-tone="positive"], .chip[data-tone="positive"],
.tag[data-tone="success"], .chip[data-tone="success"],
.tag[data-tone="steady"], .chip[data-tone="steady"] {
  background: var(--status-ok-bg) !important;
  color: var(--status-ok-fg) !important;
  border-color: color-mix(in srgb, var(--status-ok-fg) 22%, transparent) !important;
}
.tag[data-tone="warning"], .chip[data-tone="warning"],
.tag[data-tone="pending"], .chip[data-tone="pending"] {
  background: var(--status-warn-bg) !important;
  color: var(--status-warn-fg) !important;
  border-color: color-mix(in srgb, var(--status-warn-fg) 22%, transparent) !important;
}
.tag[data-tone="danger"], .chip[data-tone="danger"],
.tag[data-tone="risk"], .chip[data-tone="risk"],
.tag[data-tone="critical"], .chip[data-tone="critical"] {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-fg) !important;
  border-color: color-mix(in srgb, var(--status-danger-fg) 22%, transparent) !important;
}
.tag[data-tone="info"], .chip[data-tone="info"],
.tag[data-tone="clinical"], .chip[data-tone="clinical"] {
  background: var(--status-info-bg) !important;
  color: var(--status-info-fg) !important;
  border-color: color-mix(in srgb, var(--status-info-fg) 22%, transparent) !important;
}
.tag[data-tone="neutral"], .chip[data-tone="neutral"],
.tag[data-tone="muted"], .chip[data-tone="muted"] {
  background: var(--status-neutral-bg) !important;
  color: var(--status-neutral-fg) !important;
  border-color: color-mix(in srgb, var(--status-neutral-fg) 20%, transparent) !important;
}
.subnav-bar .resident-chart-tab.is-active .resident-chart-tab-icon { opacity: 1 !important; }

/* A11y: minimum touch-target height for the login page's inline text controls
   (the "Forgot password?"/"Back to sign in" links and the password "Show"
   toggle). They render as text-sized buttons (~18–30px tall) which fall under
   the 32px min tap target the mobile audit enforces. Give them a min-height and
   center their label so the hit area is comfortable on a phone — no change to
   their text styling or surrounding layout. */
.login-aux-link,
.login-password-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   Light/dark theme toggle
   The topbar toggle mirrors .topbar-manual. Dark mode is opt-in via
   <html data-theme="dark"> (set pre-paint by the inline head script and by
   app.js). It remaps the surface/ink tokens that ~74 selectors already
   reference (--paper/--panel/--ink/--muted/--line + shadows), so the dark
   background cascades app-wide without rewriting every rule.
   ───────────────────────────────────────────────────────────────────────── */
.topbar-theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, #64748b);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.topbar-theme:hover {
  color: var(--ink, #0f172a);
  background: rgba(120, 130, 150, 0.12);
  border-color: var(--line, #e5e7eb);
}
.topbar-theme:focus-visible {
  outline: 2px solid var(--teal, #0d9488);
  outline-offset: 2px;
}
.topbar-theme-icon { flex: 0 0 15px; color: currentColor; }
/* Show the moon in light mode (tap → go dark); show the sun in dark mode. */
.theme-icon-moon { display: inline-block; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline-block; }

:root[data-theme="dark"] {
  --ink: #e5e9f0;
  --muted: #a7b0c0;
  --line: #2b3444;
  --paper: #0f141c;
  --panel: #1a212c;
  --ink-500: #a7b0c0;
  --ink-700: #c3cad6;

  /* Softer status tints on dark surfaces (keep the fg readable). */
  --status-ok-bg:    #12301f;  --status-ok-fg:    #7fe0a6;
  --status-warn-bg:  #33260a;  --status-warn-fg:  #f0c56a;
  --status-danger-bg:#3a1414;  --status-danger-fg:#f39a9a;
  --status-info-bg:  #12213f;  --status-info-fg:  #8fb4f5;
  --status-neutral-bg:#20293a; --status-neutral-fg:#a7b0c0;

  --soft-shadow: 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.50);
  color-scheme: dark;
}
/* Body color is forced to the cool ramp with !important elsewhere; re-assert
   the dark ink so text is legible on the dark paper. */
:root[data-theme="dark"] body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* ===== Comprehensive dark theme (full selector coverage) ===== */
/* ==========================================================================
   RohaChart dark-theme stylesheet — assembled from per-slice CSS blocks.
   Ordered: shell → cards → tables → forms → modals → misc.
   De-duplicated: repeated selectors merged, most complete rule kept.
   Palette-locked; no invented selectors. Print blocks intentionally untouched.
   ========================================================================== */

/* ── SHELL: html / body / sidebar / brand / nav / topbar / section headers ── */

[data-theme="dark"] html {
  background: #0e1420;
}

[data-theme="dark"] body {
  color: #e6eaf1;
  background: #0e1420;
}

[data-theme="dark"] .sidebar {
  background: #1a212c !important;
  color: #e6eaf1;
  border-bottom-color: #2b3444 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

/* Cisco shell on dark surfaces: the app-bar, rail, and flyout use --surface
   (white in this theme), so re-point them to the dark panel + warm the teal
   tint that washes out on dark. */
[data-theme="dark"] .app-topbar {
  background: #1a212c; border-bottom-color: #2b3444;
}
[data-theme="dark"] .sidebar {
  background: #141a24 !important; border-right: 1px solid #2b3444;
}
[data-theme="dark"] .nav-button:hover { background: #232c3a; }
[data-theme="dark"] .nav-button.is-active { background: #12301f; color: #7fe0a6; }
[data-theme="dark"] .nav-button.is-active .nav-icon { color: #7fe0a6; }
[data-theme="dark"] .nav-flyout {
  background: #1a212c; border-right-color: #2b3444;
}
[data-theme="dark"] .nav-flyout-head,
[data-theme="dark"] .nav-flyout-group:not(.is-standalone) + .nav-flyout-group.is-standalone { border-color: #2b3444; }
[data-theme="dark"] .nav-flyout-item:hover,
[data-theme="dark"] .nav-flyout-resident:hover,
[data-theme="dark"] .nav-flyout-close:hover { background: #232c3a; }
[data-theme="dark"] .nav-flyout-item.is-active { background: #12301f; color: #7fe0a6; }
[data-theme="dark"] .nav-flyout-search-input {
  background: #141a24; border-color: #2b3444; color: #e6eaf1;
}

[data-theme="dark"] .brand strong {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .brand small {
  color: #a7b0c0;
}

[data-theme="dark"] .nav-button {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .nav-button:hover,
[data-theme="dark"] .nav-button:focus-visible {
  color: #e6eaf1 !important;
  background: #2a3342 !important;
}

[data-theme="dark"] .nav-button.is-active {
  color: #3ec9bd !important;
  border-bottom-color: #2fa79c;
}

[data-theme="dark"] .nav-button:not(.is-active) {
  color: #a7b0c0;
}

[data-theme="dark"] .nav-button:not(.is-active):hover {
  color: #e6eaf1;
}

[data-theme="dark"] .topbar-identity {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .topbar .topbar-identity .status-pill,
[data-theme="dark"] .topbar .topbar-identity .user-chip {
  background: #1a212c !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .topbar .topbar-identity .user-chip {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .topbar .topbar-identity .status-pill {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .topbar .status-pill {
  background: transparent !important;
  color: #a7b0c0 !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .topbar .user-chip {
  background: #12301f !important;
  color: #7fe0a6 !important;
  border-color: #12301f !important;
}

[data-theme="dark"] .user-chip {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .status-pill {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .topbar-signout {
  color: #a7b0c0;
}

[data-theme="dark"] .topbar-signout:hover {
  color: #e6eaf1;
  background: #2a3342;
  border-color: #2b3444;
}

[data-theme="dark"] .topbar-sep {
  background: #2b3444;
}

[data-theme="dark"] .topbar-facility-switch {
  color: #3ec9bd;
  background: #20293a;
  border-color: #2b3444;
}

[data-theme="dark"] .topbar-facility-switch:hover {
  background: #2a3342;
}

[data-theme="dark"] .topbar-manual {
  color: #a7b0c0;
}

[data-theme="dark"] .topbar-manual:hover {
  color: #e6eaf1;
  background: #2a3342;
  border-color: #2b3444;
}

[data-theme="dark"] .topbar-theme:hover {
  color: #e6eaf1;
  background: #2a3342;
  border-color: #2b3444;
}

[data-theme="dark"] .eyebrow {
  color: #3ec9bd;
}

[data-theme="dark"] .topbar h1,
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .panel h3,
[data-theme="dark"] .form-title h3 {
  color: #e6eaf1;
}

/* ── CARDS: panels / metrics / module & KPI tiles / list-items / chart headers / hub / avatars / chips ── */

[data-theme="dark"] .panel {
  background: #1a212c !important;
  border-color: #2b3444 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45) !important;
}

[data-theme="dark"] .panel-heading span {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .metric {
  background: #1a212c !important;
  border-color: #2b3444 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45) !important;
}

[data-theme="dark"] .metric:hover {
  border-color: #2a3342 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4) !important;
}

[data-theme="dark"] .metric small {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .metric strong {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .metric--interactive:hover {
  border-color: #2fa79c;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .resident-chart-header {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .resident-photo {
  background: linear-gradient(150deg, #232b38 0%, #2a3342 100%);
  border-color: #2b3444;
  color: #7fe0a6;
}

[data-theme="dark"] .resident-photo span {
  color: #7fe0a6;
}

[data-theme="dark"] .resident-name-row p {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-document-button,
[data-theme="dark"] .resident-report-start {
  color: #3ec9bd;
  border-color: #2fa79c;
  background: transparent;
}

[data-theme="dark"] .resident-document-button:hover,
[data-theme="dark"] .resident-document-button:focus-visible,
[data-theme="dark"] .resident-document-button.is-active,
[data-theme="dark"] .resident-report-start:hover,
[data-theme="dark"] .resident-report-start:focus-visible {
  color: #0e1420;
  background: #2fa79c;
  border-color: #2fa79c;
}

[data-theme="dark"] .resident-document-preview,
[data-theme="dark"] .resident-action-panel,
[data-theme="dark"] .admin-action-panel {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .admin-action-panel {
  background: #1a212c !important;
  border-color: #2b3444 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4) !important;
}

[data-theme="dark"] .admin-action-panel > div:first-child > span {
  color: #a7b0c0 !important;
  background: #0e1420;
  border-color: #2b3444;
}

[data-theme="dark"] .admin-action-panel h3 {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .admin-action-panel p {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .admin-action-panel .action-detail-grid {
  border-top-color: #2b3444;
}

[data-theme="dark"] .resident-workspace-status,
[data-theme="dark"] .admin-workspace-status {
  background: #20293a;
  border-color: #2b3444;
  border-left-color: #2fa79c;
}

[data-theme="dark"] .resident-workspace-status::before,
[data-theme="dark"] .admin-workspace-status::before {
  color: #3ec9bd;
}

[data-theme="dark"] .resident-document-preview span,
[data-theme="dark"] .resident-action-panel span,
[data-theme="dark"] .admin-action-panel span,
[data-theme="dark"] .resident-signature-item span {
  color: #3ec9bd;
}

[data-theme="dark"] .resident-workspace-status strong,
[data-theme="dark"] .admin-workspace-status strong {
  color: #e6eaf1;
}

[data-theme="dark"] .resident-document-preview p,
[data-theme="dark"] .resident-action-panel p,
[data-theme="dark"] .admin-action-panel p,
[data-theme="dark"] .resident-workspace-status p,
[data-theme="dark"] .admin-workspace-status p {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-workflow-page {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .resident-workflow-copy span,
[data-theme="dark"] .resident-completed-form span {
  color: #3ec9bd;
}

[data-theme="dark"] .resident-workflow-copy p,
[data-theme="dark"] .resident-completed-form p {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-completed-form {
  background: #20293a;
  border-color: #2b3444;
}

[data-theme="dark"] .resident-completed-form.compact {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .admin-planned-badge {
  background: #20293a;
  color: #a7b0c0;
}

[data-theme="dark"] .resident-local-draft-notice {
  background: #33260a;
  border-color: #f0c56a;
  color: #f0c56a;
}

[data-theme="dark"] .resident-module-card,
[data-theme="dark"] .admin-module-card {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .admin-module-card {
  border-color: #2b3444 !important;
  background: #1a212c !important;
}

[data-theme="dark"] .resident-module-card:hover,
[data-theme="dark"] .resident-module-card:focus-visible,
[data-theme="dark"] .admin-module-card:hover,
[data-theme="dark"] .admin-module-card:focus-visible,
[data-theme="dark"] .resident-report-option:hover,
[data-theme="dark"] .resident-report-option:focus-visible {
  border-color: #2fa79c;
  background: #2a3342;
}

[data-theme="dark"] .admin-module-card:hover {
  border-color: #2fa79c !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4) !important;
}

[data-theme="dark"] .resident-module-icon {
  color: #3ec9bd;
  background: #20293a;
}

[data-theme="dark"] .admin-module-icon {
  background: #12301f;
  color: #7fe0a6;
}

[data-theme="dark"] .resident-module-card strong {
  color: #3ec9bd;
}

[data-theme="dark"] .admin-module-card strong {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .resident-module-card small,
[data-theme="dark"] .admin-module-card small {
  color: #a7b0c0;
}

[data-theme="dark"] .admin-module-card small {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .resident-report-select-label {
  color: #e6eaf1;
}

[data-theme="dark"] .resident-report-list {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .resident-report-option {
  background: #1a212c;
  color: #e6eaf1;
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .resident-report-option.is-selected {
  background: #20293a;
  color: #3ec9bd;
}

[data-theme="dark"] .resident-report-side div {
  border-top-color: #2b3444;
}

[data-theme="dark"] .resident-report-side span {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-report-side strong {
  color: #e6eaf1;
}

[data-theme="dark"] .resident-report-side p {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-signature-item {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .resident-signature-item p {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-signature-item[data-tone="pending"] {
  border-left-color: #f0c56a;
}

[data-theme="dark"] .resident-signature-item[data-tone="success"] {
  border-left-color: #7fe0a6;
}

[data-theme="dark"] .remote-sign-panel {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .remote-sign-error {
  background: #3a1414;
  border-color: #f39a9a;
  color: #f39a9a;
}

[data-theme="dark"] .profile-section {
  border-top-color: #2b3444;
}

[data-theme="dark"] .list-item,
[data-theme="dark"] .resident-card,
[data-theme="dark"] .resident-strip-card {
  background: #1a212c !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .list-item:hover,
[data-theme="dark"] .resident-card:hover,
[data-theme="dark"] .resident-strip-card:hover {
  background: #2a3342 !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .timeline-item,
[data-theme="dark"] .report-item,
[data-theme="dark"] .integration-item {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .resident-card .resident-card-footer {
  border-top-color: #2b3444;
}

[data-theme="dark"] .payment-connect-item {
  background: #232b38;
}

[data-theme="dark"] .muted,
[data-theme="dark"] .list-item p,
[data-theme="dark"] .resident-card p,
[data-theme="dark"] .timeline-item p,
[data-theme="dark"] .report-item p,
[data-theme="dark"] .integration-item p {
  color: #a7b0c0;
}

[data-theme="dark"] .list-item-action {
  background: transparent;
  border-color: #2b3444;
}

[data-theme="dark"] .list-item-action:hover,
[data-theme="dark"] .list-item-action:focus-visible {
  border-color: #2fa79c;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .list-item-action p {
  color: #a7b0c0;
}

[data-theme="dark"] .avatar {
  color: #7fe0a6;
  background: #20293a;
}

[data-theme="dark"] .avatar-button:hover,
[data-theme="dark"] .avatar-button:focus-visible {
  border-color: #3ec9bd;
}

[data-theme="dark"] .detail-field {
  background: #232b38;
  border-left-color: #2fa79c;
}

[data-theme="dark"] .detail-field span {
  color: #a7b0c0;
}

[data-theme="dark"] .chart-sections-hub {
  border-color: #2b3444;
  border-left-color: #2fa79c;
  background: linear-gradient(180deg, #232b38 0%, #1a212c 60%);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .chart-sections-hub-hint {
  color: #a7b0c0;
}

[data-theme="dark"] .chart-sections-eyebrow {
  color: #a7b0c0;
}

[data-theme="dark"] .chart-sections-hub .chart-sections-eyebrow {
  color: #3ec9bd;
}

[data-theme="dark"] .chart-section-grid .resident-chart-tab,
[data-theme="dark"] .chart-section-grid .admin-chart-tab {
  border-color: #2b3444 !important;
  background: #232b38 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
  color: #e6eaf1 !important;
}

[data-theme="dark"] .chart-section-grid .resident-chart-tab .resident-chart-tab-icon {
  color: #3ec9bd;
}

[data-theme="dark"] .chart-section-grid .resident-chart-tab:hover,
[data-theme="dark"] .chart-section-grid .resident-chart-tab:focus-visible,
[data-theme="dark"] .chart-section-grid .admin-chart-tab:hover,
[data-theme="dark"] .chart-section-grid .admin-chart-tab:focus-visible {
  border-color: #2fa79c !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

[data-theme="dark"] .chart-section-grid .resident-chart-tab.is-active,
[data-theme="dark"] .chart-section-grid .admin-chart-tab.is-active {
  background: #2fa79c !important;
  border-color: #2fa79c !important;
  color: #0e1420 !important;
}

[data-theme="dark"] .census-card {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .census-card h4 {
  color: #a7b0c0;
}

[data-theme="dark"] .census-card li {
  border-color: #2b3444;
}

[data-theme="dark"] .safety-qr-card {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .notif-approval-card {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .notif-approval-body {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .empty-state {
  border-color: #2b3444;
  background: #232b38;
  color: #a7b0c0;
}

[data-theme="dark"] .empty-state__icon {
  background: #1a212c;
  border-color: #2b3444;
  color: #3ec9bd;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .empty-state__title {
  color: #e6eaf1;
}

[data-theme="dark"] .empty-state__hint {
  color: #a7b0c0;
}

[data-theme="dark"] .skeleton,
[data-theme="dark"] [data-loading="true"] {
  background: linear-gradient(90deg, #1a212c 0%, #232b38 50%, #1a212c 100%);
}

/* ── TABLES: chart/admin tabs / data & billing / access-control / invoice detail ── */

[data-theme="dark"] .resident-chart-tabs {
  background: #232b38 !important;
  border-color: #2b3444 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .resident-chart-tab {
  background: #1a212c !important;
  border-color: #2b3444 !important;
  color: #a7b0c0 !important;
}

[data-theme="dark"] .resident-chart-tab:hover,
[data-theme="dark"] .resident-chart-tab:focus-visible {
  color: #e6eaf1 !important;
  background: #2a3342 !important;
  border-color: #2b3444 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .resident-chart-tab:focus-visible {
  border-color: #3ec9bd !important;
  box-shadow: 0 0 0 3px rgba(62,201,189,.22) !important;
}

[data-theme="dark"] .resident-chart-tab.is-active {
  color: #3ec9bd !important;
  background: #2a3342 !important;
  border-color: #2fa79c !important;
  border-bottom-color: #2fa79c !important;
  box-shadow: none !important;
}

[data-theme="dark"] .admin-chart-tabs {
  background: #232b38 !important;
  border-color: #2b3444 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .admin-chart-tab {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .admin-chart-tab:hover,
[data-theme="dark"] .admin-chart-tab:focus-visible {
  color: #e6eaf1 !important;
  background: #2a3342 !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .admin-chart-tab.is-active {
  color: #0e1420 !important;
  background: #2fa79c !important;
  border-color: #2fa79c !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45) !important;
}

[data-theme="dark"] th,
[data-theme="dark"] td {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] th {
  color: #a7b0c0;
}

[data-theme="dark"] .med-table th,
[data-theme="dark"] .med-table td {
  border-color: #2b3444;
}

[data-theme="dark"] .med-table th {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .med-table td input {
  background: transparent;
  color: #e6eaf1;
}

[data-theme="dark"] .med-table td.med-row-label {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
  border-color: #2b3444;
}

[data-theme="dark"] .data-table thead th {
  background: #232b38;
}

[data-theme="dark"] .sat-table th,
[data-theme="dark"] .sat-table td {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .sat-table th {
  color: #a7b0c0;
}

[data-theme="dark"] .assessment-schedule-toolbar .assessment-search {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .assessment-schedule-table tbody tr:hover {
  background: #2a3342;
}

[data-theme="dark"] .rc-access__header h3 {
  color: #e6eaf1;
}

[data-theme="dark"] .rc-access__header p {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-access__hint {
  background: #33260a;
  border-color: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .rc-access-loading {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-matrix-wrap,
[data-theme="dark"] .rc-users-wrap {
  border-color: #2b3444;
  background: #1a212c;
}

[data-theme="dark"] .rc-matrix th,
[data-theme="dark"] .rc-matrix td,
[data-theme="dark"] .rc-users th,
[data-theme="dark"] .rc-users td {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .rc-matrix thead th,
[data-theme="dark"] .rc-users thead th {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .rc-matrix tbody th {
  color: #e6eaf1;
}

[data-theme="dark"] .rc-matrix tbody th small {
  color: #7c869a;
}

[data-theme="dark"] .rc-matrix-section th {
  background: #232b38 !important;
  color: #a7b0c0 !important;
}

[data-theme="dark"] .rc-users td strong {
  color: #e6eaf1;
}

[data-theme="dark"] .rc-users td small {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-user-role {
  border-color: #2b3444;
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .rc-credential-editor > summary {
  color: #5eead4;
}

[data-theme="dark"] .billing-kpi {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .billing-kpi::before {
  background: #2b3444;
}

[data-theme="dark"] .billing-kpi[data-tone="critical"]::before {
  background: #f39a9a;
}

[data-theme="dark"] .billing-kpi[data-tone="warning"]::before {
  background: #f0c56a;
}

[data-theme="dark"] .billing-kpi[data-tone="positive"]::before {
  background: #7fe0a6;
}

[data-theme="dark"] .billing-kpi[data-tone="neutral"]::before {
  background: #2fa79c;
}

[data-theme="dark"] .billing-kpi-label {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-kpi-value {
  color: #e6eaf1;
}

[data-theme="dark"] .billing-kpi-sub {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-panel > .panel-heading {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .billing-toolbar {
  border-bottom-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .billing-status-tabs {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .billing-status-tab {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-status-tab:hover {
  color: #e6eaf1;
}

[data-theme="dark"] .billing-status-tab.is-active {
  background: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .billing-status-count {
  background: #2a3342;
  color: inherit;
}

[data-theme="dark"] .billing-status-tab.is-active .billing-status-count {
  background: rgba(14,20,32,.28);
}

[data-theme="dark"] .billing-search {
  border-color: #2b3444;
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .billing-search:focus {
  border-color: #3ec9bd;
  box-shadow: 0 0 0 3px rgba(62,201,189,.22);
}

[data-theme="dark"] .billing-pagesize {
  border-color: #2b3444;
  background-color: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .billing-table th.sortable:hover {
  color: #3ec9bd;
}

[data-theme="dark"] .billing-table th.sortable .sort-indicator {
  color: #7c869a;
}

[data-theme="dark"] .billing-table th.is-sorted {
  color: #3ec9bd;
}

[data-theme="dark"] .billing-table th.is-sorted .sort-indicator {
  color: #2fa79c;
}

[data-theme="dark"] .billing-id {
  color: #a7b0c0;
  background: #232b38;
}

[data-theme="dark"] .billing-empty-row {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-pagination {
  border-top-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .billing-page-btn {
  background: #1a212c;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .billing-page-btn:hover:not(:disabled) {
  border-color: #3ec9bd;
  color: #3ec9bd;
}

[data-theme="dark"] .billing-page-btn.is-active {
  background: #2fa79c;
  border-color: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .billing-page-ellipsis {
  color: #7c869a;
}

[data-theme="dark"] .billing-date {
  border-color: #2b3444;
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .billing-date:focus {
  border-color: #3ec9bd;
  box-shadow: 0 0 0 3px rgba(62,201,189,.22);
}

[data-theme="dark"] .billing-date-sep {
  color: #7c869a;
}

[data-theme="dark"] .billing-id-link {
  background: #232b38;
  color: #3ec9bd;
}

[data-theme="dark"] .billing-id-link:hover {
  background: #2a3342;
}

[data-theme="dark"] .billing-row-menu-toggle {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-actions-col,
[data-theme="dark"] .billing-actions-cell {
  background: #1a212c;
  box-shadow: -10px 0 12px -14px rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .billing-row-menu-toggle:hover,
[data-theme="dark"] .billing-row-menu-toggle[aria-expanded="true"] {
  background: #2a3342;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .billing-row-menu-list {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .billing-row-menu-list button {
  color: #e6eaf1;
}

[data-theme="dark"] .billing-row-menu-list button:hover:not(:disabled) {
  background: #2a3342;
  color: #3ec9bd;
}

[data-theme="dark"] .invoice-detail-summary {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .invoice-detail-summary strong {
  color: #e6eaf1;
}

[data-theme="dark"] .invoice-detail-heading {
  color: #e6eaf1;
}

[data-theme="dark"] .invoice-detail-table th,
[data-theme="dark"] .invoice-detail-table td {
  border-color: #2b3444;
}

[data-theme="dark"] .invoice-detail-table thead th {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .invoice-detail-table tfoot th {
  background: #232b38;
}

[data-theme="dark"] .invoice-detail-table tfoot .invoice-detail-balance th {
  background: #12301f;
  color: #7fe0a6;
}

[data-theme="dark"] .invoice-detail-address {
  color: #e6eaf1;
}

/* ── FORMS: sectioned panels / typed fields / scored scales / plan areas / buttons / progress ── */

[data-theme="dark"] .sectioned-form .form-section {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .sectioned-form .form-section > legend {
  color: #2fa79c;
}

[data-theme="dark"] .sectioned-form .form-section-step {
  background: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .sectioned-form .form-section-hint {
  color: #a7b0c0;
}

[data-theme="dark"] .sectioned-form .form-doc-checklist {
  color: #e6eaf1;
}

[data-theme="dark"] .sectioned-form .form-doc-upload-label {
  color: #e6eaf1;
}

[data-theme="dark"] .sectioned-form .form-actions {
  background: linear-gradient(to top, #0e1420 70%, transparent);
}

[data-theme="dark"] .panel-heading span {
  color: #a7b0c0;
}

[data-theme="dark"] .generated-form-section {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .generated-form-section .generated-form-heading {
  color: #3ec9bd;
}

[data-theme="dark"] .generated-form-section > .generated-form-heading::before {
  background: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] input:not([type=radio]):not([type=checkbox]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  border-color: #2b3444;
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  border-color: #2b3444 !important;
  background-color: #232b38 !important;
  color: #e6eaf1 !important;
  box-shadow: none !important;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233ec9bd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #3ec9bd !important;
  box-shadow: 0 0 0 3px rgba(62,201,189,.22) !important;
}

[data-theme="dark"] label:not(.score-option):not(.inline-radio):not(.inline-check):not(.plan-area-toggle):not(.rp-checkbox-label):not(.drill-check-item) {
  color: #a7b0c0;
}

[data-theme="dark"] .form-field input:not([type=radio]):not([type=checkbox]),
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .form-radio-group legend,
[data-theme="dark"] .form-check-group legend,
[data-theme="dark"] .form-adl-score legend,
[data-theme="dark"] .form-sat-table legend,
[data-theme="dark"] .form-table legend {
  color: #e6eaf1;
}

[data-theme="dark"] .radio-row {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .inline-check:hover {
  color: #3ec9bd;
}

[data-theme="dark"] .form-adl-score {
  border-color: #2b3444;
}

[data-theme="dark"] .score-option:hover {
  background: #2a3342;
}

[data-theme="dark"] .form-signer {
  border-color: #2b3444;
}

[data-theme="dark"] .form-signer-witness-label {
  border-top-color: #2b3444;
  color: #a7b0c0;
}

[data-theme="dark"] .form-notification {
  border-color: #2b3444;
}

[data-theme="dark"] .score-scale-caption {
  color: #a7b0c0;
}

[data-theme="dark"] .form-scored-scale {
  border-color: #2b3444;
}

[data-theme="dark"] .scored-scale-item {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .scored-scale-q {
  color: #e6eaf1;
}

[data-theme="dark"] .scored-scale-qnum {
  background: #20293a;
  color: #3ec9bd;
}

[data-theme="dark"] .score-pill {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .score-pill-label {
  color: #e6eaf1;
}

[data-theme="dark"] .score-pill-badge {
  background: #20293a;
  color: #a7b0c0;
}

[data-theme="dark"] .score-pill:hover {
  border-color: #2fa79c;
  background: #2a3342;
}

[data-theme="dark"] .score-pill.is-selected {
  background: #2fa79c;
  border-color: #2fa79c;
}

[data-theme="dark"] .score-pill.is-selected .score-pill-label {
  color: #0e1420;
}

[data-theme="dark"] .score-pill.is-selected .score-pill-badge {
  background: #0e1420;
  color: #3ec9bd;
}

[data-theme="dark"] .score-num {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .score-num:hover {
  border-color: #2fa79c;
  background: #2a3342;
}

[data-theme="dark"] .score-num.is-selected {
  background: #2fa79c;
  border-color: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .scored-scale-total {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .scored-scale-total-label {
  color: #a7b0c0;
}

[data-theme="dark"] .scored-scale-num {
  color: #3ec9bd;
}

[data-theme="dark"] .scored-scale-math {
  color: #a7b0c0;
}

[data-theme="dark"] .scored-scale-band {
  background: #20293a;
  color: #a7b0c0;
}

[data-theme="dark"] .scored-scale-band[data-tone="ok"] {
  background: #12301f;
  color: #7fe0a6;
}

[data-theme="dark"] .scored-scale-band[data-tone="warning"] {
  background: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .scored-scale-band[data-tone="danger"] {
  background: #3a1414;
  color: #f39a9a;
}

[data-theme="dark"] .scored-scale-total[data-tone="ok"] {
  background: #12301f;
  border-color: color-mix(in srgb, #7fe0a6 25%, transparent);
}

[data-theme="dark"] .scored-scale-total[data-tone="warning"] {
  background: #33260a;
  border-color: color-mix(in srgb, #f0c56a 25%, transparent);
}

[data-theme="dark"] .scored-scale-total[data-tone="danger"] {
  background: #3a1414;
  border-color: color-mix(in srgb, #f39a9a 25%, transparent);
}

[data-theme="dark"] .score-badge {
  background: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .freq-radio.is-selected {
  color: #3ec9bd;
}

[data-theme="dark"] .trigger-star {
  color: #f39a9a;
}

[data-theme="dark"] .form-sat-table {
  border-color: #2b3444;
}

[data-theme="dark"] .sat-legend {
  color: #a7b0c0;
}

[data-theme="dark"] .sat-legend strong {
  color: #e6eaf1;
}

[data-theme="dark"] .form-table {
  border-color: #2b3444;
}

[data-theme="dark"] .form-gate-card {
  border-color: #2b3444;
  background: #1a212c;
}

[data-theme="dark"] .form-gate-card h3 {
  color: #e6eaf1;
}

[data-theme="dark"] .form-gate-card p {
  color: #a7b0c0;
}

[data-theme="dark"] .saas-agreement-gate {
  border-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .saas-agreement-status {
  color: #a7b0c0;
}

[data-theme="dark"] .saas-agreement-check {
  color: #e6eaf1;
}

[data-theme="dark"] .form-clause {
  background: #232b38;
  border-left-color: #2fa79c;
}

[data-theme="dark"] .form-clause p {
  color: #e6eaf1;
}

[data-theme="dark"] .form-error-banner {
  border-color: #3a1414;
  border-left-color: #f39a9a;
  background: #3a1414;
  color: #f39a9a;
}

[data-theme="dark"] .family-notify-detail {
  border-color: #2b3444;
}

[data-theme="dark"] .mfa-qr img {
  border-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .mfa-manual-entry summary {
  color: #a7b0c0;
}

[data-theme="dark"] .mfa-secret {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .ar-progress {
  background: #232b38;
}

[data-theme="dark"] .ar-progress::-webkit-progress-bar {
  background: #232b38;
}

[data-theme="dark"] .ar-progress::-webkit-progress-value {
  background: #2fa79c;
}

[data-theme="dark"] .ar-progress::-moz-progress-bar {
  background: #2fa79c;
}

[data-theme="dark"] .plan-area {
  border-color: #2b3444;
  background: #0e1420;
}

[data-theme="dark"] .plan-area[open] {
  background: #1a212c;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .plan-area-toggle {
  color: #e6eaf1;
}

[data-theme="dark"] .plan-area-hint {
  color: #a7b0c0;
}

[data-theme="dark"] .plan-area-body {
  border-top-color: #2b3444;
}

[data-theme="dark"] .plan-area-body label {
  color: #a7b0c0;
}

[data-theme="dark"] .plan-area-body textarea,
[data-theme="dark"] .plan-area-body input {
  color: #e6eaf1;
  border-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .plan-area-body textarea:focus,
[data-theme="dark"] .plan-area-body input:focus {
  border-color: #3ec9bd;
  box-shadow: 0 0 0 3px rgba(62, 201, 189, 0.25);
}

[data-theme="dark"] .responsible-party-block {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .responsible-party-block label {
  color: #e6eaf1;
}

[data-theme="dark"] .responsible-party-block input,
[data-theme="dark"] .responsible-party-block textarea {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .form-grid > label input,
[data-theme="dark"] .form-grid > label select,
[data-theme="dark"] .form-grid > label textarea {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .history-custom-input input {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .audit-filter-row select {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .audit-filter-row .audit-range-field span {
  color: #a7b0c0;
}

[data-theme="dark"] .audit-filter-row .audit-range-field input {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .dob-trigger {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
  box-shadow: none;
}

[data-theme="dark"] .dob-trigger-text.is-placeholder {
  color: #7c869a;
}

[data-theme="dark"] .dob-popover {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .dob-select {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .dob-nav {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .dob-nav:hover {
  background: #2a3342;
}

[data-theme="dark"] .dob-weekdays span {
  color: #a7b0c0;
}

[data-theme="dark"] .dob-day {
  color: #e6eaf1;
}

[data-theme="dark"] .dob-day:hover:not(.is-empty):not(:disabled) {
  background: #2a3342;
}

[data-theme="dark"] .dob-day:disabled {
  color: #7c869a;
}

[data-theme="dark"] .dob-day.is-selected {
  background: #2fa79c;
  color: #0e1420;
}

[data-theme="dark"] .drill-checklist-fieldset,
[data-theme="dark"] .drill-attendance-fieldset {
  border-color: #2b3444;
}

[data-theme="dark"] .primary-action {
  color: #0e1420;
  background: #2fa79c;
}

[data-theme="dark"] .primary-action:hover,
[data-theme="dark"] .primary-action:focus-visible {
  background: #3ec9bd;
}

[data-theme="dark"] .secondary-action,
[data-theme="dark"] button.secondary-action,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] button.ghost-button {
  background: #232b38 !important;
  border-color: #2b3444 !important;
  color: #e6eaf1 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .secondary-action:hover,
[data-theme="dark"] .ghost-button:hover {
  background: #2a3342 !important;
  border-color: #2b3444 !important;
  color: #e6eaf1 !important;
}

[data-theme="dark"] .ghost-action {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .ghost-action:hover,
[data-theme="dark"] .ghost-action:focus-visible {
  border-color: #3ec9bd;
  color: #3ec9bd;
  background: #2a3342;
}

[data-theme="dark"] button[disabled],
[data-theme="dark"] button[aria-disabled="true"],
[data-theme="dark"] .primary-action[disabled],
[data-theme="dark"] .secondary-action[disabled],
[data-theme="dark"] .ghost-action[disabled],
[data-theme="dark"] [role="menuitem"][disabled] {
  background: #232b38 !important;
  color: #7c869a !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] form[data-preview-submit] button[type="submit"],
[data-theme="dark"] [data-preview-click] {
  background: #232b38 !important;
  color: #7c869a !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .link-button {
  color: #8fb4f5;
}

[data-theme="dark"] .link-button:hover {
  color: #e6eaf1;
}

[data-theme="dark"] .link-back {
  color: #a7b0c0;
}

[data-theme="dark"] .link-back:hover,
[data-theme="dark"] .link-back:focus-visible {
  color: #3ec9bd;
}

/* ── MODALS: form modal / R3 modal primitives / copy-prior / backdrops / quick-search / toasts ── */

[data-theme="dark"] .form-modal-overlay {
  background: rgba(0,0,0,.6);
}

[data-theme="dark"] .form-modal {
  background: #1a212c;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .form-modal-head {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .form-modal-breadcrumb {
  color: #a7b0c0;
}

[data-theme="dark"] .form-modal-breadcrumb:hover {
  color: #3ec9bd;
}

[data-theme="dark"] .form-modal-close {
  background: #232b38;
  border-color: #2b3444;
  color: #a7b0c0;
}

[data-theme="dark"] .form-modal-close:hover {
  background: #2a3342;
  color: #e6eaf1;
}

[data-theme="dark"] .form-modal-rail {
  background: #232b38;
  border-right-color: #2b3444;
}

[data-theme="dark"] .form-rail-eyebrow {
  color: #a7b0c0;
}

[data-theme="dark"] .form-rail-item {
  color: #e6eaf1;
  border-color: transparent;
}

[data-theme="dark"] .form-rail-item:hover {
  background: #2a3342;
  border-color: #2b3444;
}

[data-theme="dark"] .form-rail-item.is-active {
  background: #20293a;
  border-color: #2b3444;
  color: #3ec9bd;
  box-shadow: inset 3px 0 0 #2fa79c;
}

[data-theme="dark"] .form-rail-dot {
  color: #7c869a;
}

[data-theme="dark"] .form-rail-item.is-active .form-rail-dot {
  color: #3ec9bd;
}

[data-theme="dark"] .form-modal-section.is-active-section {
  background: #1a212c;
  border-color: #2b3444;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .form-modal-section > .generated-form-heading {
  border-bottom-color: #2b3444;
  color: #3ec9bd;
}

[data-theme="dark"] .form-modal-foot {
  background: #232b38;
  border-top-color: #2b3444;
}

[data-theme="dark"] .form-modal-pager-count {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-modal__scrim {
  background: rgba(0,0,0,.62);
}

[data-theme="dark"] .rc-modal__panel {
  background: #1a212c;
  color: #e6eaf1;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .rc-modal__header {
  border-bottom-color: #2b3444;
}

[data-theme="dark"] .rc-modal__close {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-modal__close:hover {
  background: #2a3342;
  color: #e6eaf1;
}

[data-theme="dark"] .rc-modal__lead {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-consent-recipient {
  background: #202936;
  border-color: #344052;
}

[data-theme="dark"] .billing-consent-summary,
[data-theme="dark"] .billing-consent-attestation {
  background: #1d312d;
  border-color: #2d5c52;
}

[data-theme="dark"] .rc-modal__check {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .rc-modal__field {
  color: #e6eaf1;
}

[data-theme="dark"] .rc-modal__field em {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-modal__field input {
  background: #232b38;
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .rc-modal__field input:focus {
  border-color: #3ec9bd;
  box-shadow: 0 0 0 3px rgba(62,201,189,.25);
}

[data-theme="dark"] .rc-modal__error {
  color: #f39a9a;
  background: #3a1414;
  border-color: #3a1414;
}

[data-theme="dark"] .rc-modal__footer {
  border-top-color: #2b3444;
  background: #232b38;
}

[data-theme="dark"] .rc-copy-prior__item {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .rc-copy-prior__item-title {
  color: #e6eaf1;
}

[data-theme="dark"] .rc-copy-prior__item-meta {
  color: #a7b0c0;
}

[data-theme="dark"] .rc-copy-prior__item-preview {
  color: #a7b0c0;
  background: #232b38;
}

[data-theme="dark"] .rc-copy-prior__item-empty {
  color: #7c869a;
}

[data-theme="dark"] .modal-backdrop .modal {
  background: #1a212c;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="dark"] .billing-upgrade-meta dt {
  color: #a7b0c0;
}

[data-theme="dark"] .billing-upgrade-plans {
  border-color: #2b3444;
}

[data-theme="dark"] .billing-plan-row {
  border-color: #2b3444;
}

[data-theme="dark"] .billing-plan-row.is-current {
  background: #12301f;
}

[data-theme="dark"] .quick-search-head {
  border-color: #2b3444;
}

[data-theme="dark"] .quick-search-head kbd {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .quick-search-input {
  background: #1a212c;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .quick-search-row {
  color: #e6eaf1;
}

[data-theme="dark"] .quick-search-row:hover,
[data-theme="dark"] .quick-search-row.is-active {
  background: #12213f;
}

[data-theme="dark"] .quick-search-foot {
  border-color: #2b3444;
}

[data-theme="dark"] .quick-search-foot kbd {
  background: #232b38;
  color: #e6eaf1;
}

[data-theme="dark"] .toast {
  background: #1a212c !important;
  color: #e6eaf1 !important;
  border-color: #2b3444 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4) !important;
}

/* ── MISC: status pills/chips/tags / preview badges / filter & time chips / calendars / family portal / login / subnav / banners / presence ── */

[data-theme="dark"] .tag[data-tone="critical"],
[data-theme="dark"] .chip[data-tone="critical"] {
  color: #f39a9a;
  background: #3a1414;
  border-color: #3a1414;
}

[data-theme="dark"] .tag[data-tone="risk"],
[data-theme="dark"] .chip[data-tone="risk"] {
  color: #f0c56a;
  background: #33260a;
  border-color: #33260a;
}

[data-theme="dark"] .tag[data-tone="warning"],
[data-theme="dark"] .chip[data-tone="warning"] {
  color: #f0c56a;
  background: #33260a;
  border-color: #33260a;
}

[data-theme="dark"] .tag[data-tone="positive"],
[data-theme="dark"] .chip[data-tone="positive"],
[data-theme="dark"] .tag[data-tone="success"],
[data-theme="dark"] .chip[data-tone="success"],
[data-theme="dark"] .tag[data-tone="ok"],
[data-theme="dark"] .chip[data-tone="ok"] {
  color: #7fe0a6;
  background: #12301f;
  border-color: #12301f;
}

[data-theme="dark"] .tag[data-tone="steady"],
[data-theme="dark"] .tag[data-tone="clinical"],
[data-theme="dark"] .chip[data-tone="clinical"] {
  color: #7fe0a6;
  background: #12301f;
  border-color: #12301f;
}

[data-theme="dark"] .tag[data-tone="neutral"],
[data-theme="dark"] .chip[data-tone="neutral"] {
  color: #a7b0c0;
  background: #20293a;
  border-color: #2b3444;
}

[data-theme="dark"] .chip:not([data-tone]),
[data-theme="dark"] .tag:not([data-tone]) {
  background: #232b38 !important;
  color: #a7b0c0 !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .tag.tone-warn {
  background: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .tag.tone-good {
  background: #12301f;
  color: #7fe0a6;
}

[data-theme="dark"] .tag.tone-muted {
  background: #20293a;
  color: #a7b0c0;
}

[data-theme="dark"] .tag.tone-danger {
  background: #3a1414;
  color: #f2a4a4;
}

[data-theme="dark"] .form-tile-badge-draft {
  background: #33260a;
  color: #f0c56a;
  border-color: #33260a;
}

[data-theme="dark"] .form-tile-badge-completed {
  background: #12301f;
  color: #7fe0a6;
  border-color: #12301f;
}

[data-theme="dark"] .status-pill-draft {
  background: #33260a;
  color: #f0c56a;
  border-color: #33260a;
}

[data-theme="dark"] .print-record-status {
  color: #a7b0c0;
}

[data-theme="dark"] .print-record-status[data-record-status="completed"] {
  color: #7fe0a6;
}

[data-theme="dark"] .print-record-status[data-record-status="draft"] {
  color: #f0c56a;
}

[data-theme="dark"] .print-field-filled div {
  border-bottom-color: #e6eaf1;
  color: #e6eaf1;
}

[data-theme="dark"] .preview-badge {
  color: #f39a9a;
  background: #3a1414;
  border-color: #3a1414;
  box-shadow: none;
}

[data-theme="dark"] .filter-chip {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .filter-chip:hover {
  background: #2a3342;
}

[data-theme="dark"] .filter-chip.is-active {
  background: #2fa79c;
  color: #0e1420;
  border-color: #2fa79c;
}

[data-theme="dark"] .filter-chip[data-tone="risk"] {
  color: #f39a9a;
  border-color: #3a1414;
}

[data-theme="dark"] .filter-chip[data-tone="risk"].is-active {
  background: #3a1414;
  color: #f39a9a;
  border-color: #3a1414;
}

[data-theme="dark"] .filter-chip-count {
  background: #2a3342;
}

[data-theme="dark"] .time-chip {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .time-chip.is-active {
  background: #2fa79c;
  color: #0e1420;
  border-color: #2fa79c;
}

[data-theme="dark"] .ai-suggest-output {
  color: #a7b0c0;
}

[data-theme="dark"] .task-group-heading {
  color: #e6eaf1;
}

[data-theme="dark"] .task-group-count {
  background: #232b38;
  color: #a7b0c0;
  border-color: #2b3444;
}

[data-theme="dark"] .task-group-more {
  color: #3ec9bd;
  border-color: #2b3444;
}

[data-theme="dark"] .task-done-btn {
  background: #12301f;
  color: #7fe0a6;
  border-color: #2b3444;
}

[data-theme="dark"] .task-done-btn:hover {
  background: #173d28;
}

[data-theme="dark"] .resident-strip-more {
  color: #3ec9bd;
  border-color: #2b3444;
}

[data-theme="dark"] .invite-family-result {
  background: #12301f;
}

[data-theme="dark"] .invite-family-result__title {
  color: #7fe0a6;
}

[data-theme="dark"] .invite-family-result__url {
  background: #232b38;
  color: #e6eaf1;
  border-color: #2b3444;
}

[data-theme="dark"] .invite-family-result__expires {
  color: #7fe0a6;
}

[data-theme="dark"] .nav-badge {
  background: #f0c56a;
  color: #0e1420;
}

[data-theme="dark"] .family-inbox-row .tag.tone-warn {
  background: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .family-thread-row {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .family-thread-row--inbound {
  background: #12301f;
  border-left-color: #2fa79c;
}

[data-theme="dark"] .family-thread-row--outbound {
  border-left-color: #8fb4f5;
}

[data-theme="dark"] .resident-family-inbox-panel > .resident-family-inbox-summary::before {
  color: #a7b0c0;
}

[data-theme="dark"] .family-appointment-row {
  background: #1a212c;
  border-color: #2b3444;
}

[data-theme="dark"] .family-appointment-row[data-acked="false"] {
  background: #33260a;
  border-left-color: #f0c56a;
}

[data-theme="dark"] .family-appointment-when {
  color: #e6eaf1;
}

[data-theme="dark"] .billing-banner {
  background: #33260a;
  border-color: #2b3444;
  color: #f0c56a;
}

[data-theme="dark"] .billing-banner.tone-danger {
  background: #3a1414;
  border-color: #2b3444;
  color: #f39a9a;
}

[data-theme="dark"] .meds-calendar-grid .calendar-slot {
  background: #232b38;
  border-color: #2b3444;
}

[data-theme="dark"] .cal-cell.cal-empty {
  background: #232b38;
}

[data-theme="dark"] .cal-activity {
  background: #20293a;
  color: #a7b0c0;
}

[data-theme="dark"] .cal-activity[data-cat="physical"] {
  background: #12213f;
  color: #8fb4f5;
}

[data-theme="dark"] .cal-activity[data-cat="social"] {
  background: #20293a;
  color: #c4a3f7;
}

[data-theme="dark"] .cal-activity[data-cat="cognitive"] {
  background: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .cal-activity[data-cat="spiritual"] {
  background: #20293a;
  color: #a3a8f7;
}

[data-theme="dark"] .cal-activity[data-cat="creative"] {
  background: #3a1414;
  color: #f39ac4;
}

[data-theme="dark"] .cal-activity[data-cat="outing"] {
  background: #12301f;
  color: #7fe0a6;
}

[data-theme="dark"] .resident-safety-banner {
  background: #33260a;
  border-color: #2b3444;
  border-left-color: #f0c56a;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .resident-safety-banner__label {
  color: #f0c56a;
}

[data-theme="dark"] .resident-safety-banner[data-alert="true"] {
  background: #3a1414;
  border-color: #2b3444;
  border-left-color: #f39a9a;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

[data-theme="dark"] .resident-safety-banner[data-alert="true"] .resident-safety-banner__label {
  color: #f39a9a;
}

[data-theme="dark"] .resident-status-current[data-away="true"] {
  background: #33260a;
  border-left-color: #f0c56a;
}

[data-theme="dark"] .resident-status-current-detail {
  color: #a7b0c0;
}

[data-theme="dark"] .resident-status-strip-cell {
  background: #2b3444;
}

[data-theme="dark"] .resident-status-strip-legend {
  color: #a7b0c0;
}

[data-theme="dark"] .med-pass-card--away {
  background: #33260a;
  border-left-color: #f0c56a;
}

[data-theme="dark"] .med-pass-away-note {
  background: #33260a;
  color: #f0c56a;
}

[data-theme="dark"] .admin-list-pager-info {
  color: #a7b0c0;
}

[data-theme="dark"] .subnav-bar {
  background: #232b38 !important;
  border-color: #2b3444 !important;
}

[data-theme="dark"] .subnav-bar::before {
  color: #a7b0c0 !important;
}

[data-theme="dark"] .subnav-bar .admin-chart-tab:not(.is-active),
[data-theme="dark"] .subnav-bar .resident-chart-tab:not(.is-active) {
  color: #e6eaf1 !important;
}

[data-theme="dark"] .subnav-bar .resident-chart-tab.is-active,
[data-theme="dark"] .subnav-bar .admin-chart-tab.is-active {
  background: #2fa79c !important;
  border-color: #2fa79c !important;
  color: #0e1420 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45) !important;
}

[data-theme="dark"] .login-facility-option {
  border-color: #2b3444;
  color: #e6eaf1;
}

[data-theme="dark"] .login-facility-option:hover {
  background: #2a3342;
}

[data-theme="dark"] .login-facility-role {
  color: #3ec9bd;
}

[data-theme="dark"] .login-aux-link,
[data-theme="dark"] .login-password-toggle {
  color: #a7b0c0;
}

/* ── Dark-theme polish: metric icon-chips + brand wordmark ── */
[data-theme="dark"] .metric-icon {
  background: #232b38;
  color: #a7b0c0;
}
[data-theme="dark"] .metric[data-tone="risk"]     .metric-icon { background: #3a1414; color: #f39a9a; }
[data-theme="dark"] .metric[data-tone="warning"]  .metric-icon { background: #33260a; color: #f0c56a; }
[data-theme="dark"] .metric[data-tone="clinical"] .metric-icon { background: #0f2b2a; color: #5fd3c6; }
[data-theme="dark"] .metric[data-tone="finance"]  .metric-icon { background: #17203c; color: #8fb4f5; }
[data-theme="dark"] .metric[data-tone="steady"]   .metric-icon { background: #12301f; color: #7fe0a6; }
[data-theme="dark"] .metric[data-tone="positive"] .metric-icon { background: #12301f; color: #7fe0a6; }
[data-theme="dark"] .metric-grid-hero .metric strong,
[data-theme="dark"] .metric strong { color: #e6eaf1 !important; }
[data-theme="dark"] .metric-grid-hero .metric small,
[data-theme="dark"] .metric-sub { color: #a7b0c0 !important; }
/* Brighten the brand wordmark on the dark bar. */
[data-theme="dark"] .brand strong { color: #f1f5f9 !important; }

/* ── Dark-theme polish: header meta pills (hero-facts) + filter segmented-control ── */
[data-theme="dark"] .hero-facts {
  background: #232b38;
  border-color: #2b3444;
}
[data-theme="dark"] .hero-facts span {
  background: #1a212c;
  border-color: #2b3444;
  color: #a7b0c0;
}
[data-theme="dark"] .dashboard-header-actions .chip {
  background: #232b38;
  border-color: #2b3444;
  color: #a7b0c0;
}
[data-theme="dark"] .segmented-control {
  background: #1a212c;
  border-color: #2b3444;
}
[data-theme="dark"] .segmented-control button {
  background: #232b38;
  border-color: #2b3444;
  color: #cdd5e2;
}
[data-theme="dark"] .segmented-control button:hover,
[data-theme="dark"] .segmented-control button:focus-visible {
  background: #2a3342;
  border-color: #2fa79c;
  color: #e6eaf1;
}
[data-theme="dark"] .segmented-control button.is-active,
[data-theme="dark"] .segmented-control button.is-active:hover,
[data-theme="dark"] .segmented-control button.is-active:focus-visible {
  background: #2fa79c;
  border-color: #2fa79c;
  color: #0e1420;
  box-shadow: 0 0 0 2px rgba(47, 167, 156, 0.30);
}
/* View-mode toggle (grid/list) buttons in the resident directory. */
[data-theme="dark"] .view-toggle,
[data-theme="dark"] .roster-view-toggle {
  background: #1a212c;
  border-color: #2b3444;
}

/* ---------------------------------------------------------------------------
   Face Sheet Import — review-and-confirm workflow.
   Two-column field grid for the parsed draft, plus per-medication review rows.
   --------------------------------------------------------------------------- */

/* LAYOUT FIX (measured overflow): the upload + review forms are `.form-grid`,
   which tiles EVERY direct child — including the <fieldset> sections — into
   ~220px columns. Each ~218px-wide fieldset then held a `.form-grid-2` whose
   minmax(240px,…) columns were wider than the fieldset, so every field spilled
   ~33px past its box (overflow everywhere; the file input's name was clipped).
   Force the facesheet forms to STACK their sections full width (one column), so
   each section gets the form's full width and the inner field grid fits. */
#faceSheetUploadForm.form-grid,
#faceSheetReviewForm.form-grid {
  grid-template-columns: 1fr;
}
#faceSheetUploadForm.form-grid > fieldset,
#faceSheetReviewForm.form-grid > fieldset,
#faceSheetUploadForm.form-grid > .form-error,
#faceSheetReviewForm.form-grid > .form-error,
#faceSheetUploadForm.form-grid > .form-note,
#faceSheetReviewForm.form-grid > .form-note,
#faceSheetUploadForm.form-grid > p,
#faceSheetReviewForm.form-grid > p,
#faceSheetUploadForm.form-grid > .form-actions,
#faceSheetReviewForm.form-grid > .form-actions {
  grid-column: 1 / -1;
  min-width: 0;
}
/* The file inputs must never exceed their field (the uploaded filename was
   pushed out of view). Constrain them to the field width. */
#faceSheetUploadForm input[type="file"] {
  max-width: 100%;
  box-sizing: border-box;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
  min-width: 0;
}
.form-grid-2 > label,
.form-grid-2 > .facesheet-field { min-width: 0; }
.facesheet-field input,
.facesheet-field textarea { max-width: 100%; box-sizing: border-box; }
.form-grid-2 > label,
.facesheet-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted, #475569);
}
.facesheet-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.facesheet-field input,
.facesheet-field textarea {
  padding: 6px 8px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  font-size: 0.9rem;
}
.facesheet-field input:disabled,
.facesheet-field textarea:disabled {
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-muted, #94a3b8);
}
.facesheet-med-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.facesheet-med-row {
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
}
.facesheet-med-head {
  margin-bottom: 8px;
}
.form-note {
  border: 1px solid var(--border, #cbd5e1);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 0.85rem;
}
.form-note[data-tone="warning"] {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.06);
}
.form-note ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.panel-body {
  padding: 16px;
}
[data-theme="dark"] .facesheet-med-row {
  background: #1a212c;
  border-color: #2b3444;
}
[data-theme="dark"] .facesheet-field input:disabled,
[data-theme="dark"] .facesheet-field textarea:disabled {
  background: #141a24;
}

/* Password-reset "set new password" confirmation message (login page). The
   .login-* boxes live in marketing.css; .login-success was missing, so the
   reset-complete message would render unstyled. Green counterpart of
   .login-error, matching its box metrics. */
.login-success {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 0;
}

/* ============================================================================
   Navigation overhaul — production UX pass.
   Kept at the end of the cascade because this stylesheet contains several
   historical responsive layers.
   ============================================================================ */
.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark { display: none; }

/* (obsolete wide-rail .nav-button / rail-search rules removed — the Cisco
   icon-over-label rail is defined earlier under the shell block.) */

/* Administration opens on the tools people came to use. Account and compliance
   summaries remain available below it and retain their existing live bindings. */
html #section-admin.is-active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
html #adminWorkspace {
  order: 1;
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: 8px;
}
html #notificationsApprovalPanel {
  order: 2;
  grid-column: 1 / -1;
}
html #adminAccountSummary { order: 3; }
html #adminComplianceSummary { order: 4; }
html #signupForm {
  order: 5;
  grid-column: 1 / -1;
}
html #section-admin > .panel,
html #section-admin > .form-panel { margin-bottom: 0; }
html .admin-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
html .admin-module-card {
  min-height: 84px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 12px;
}
html .admin-module-grid .admin-module-card:last-child:nth-child(odd) {
  width: auto;
  max-width: none;
  justify-self: stretch;
}

/* The palette starts with a concise set, then expands through search. Give the
   list enough room for its groups without allowing the dialog to fill the page. */
.quick-search-results { max-height: min(52vh, 390px); }
.quick-search-row[aria-selected="true"] { background: #eff6ff; }


/* Compact/mobile: one persistent, horizontally scrollable navigation bar. The
   labels stay visible, and every item remains at least 44px tall. */
@media (max-width: 820px) {
  /* Compact widths: the top app-bar shows the mark + collapses action labels to
     icons; the narrow rail and flyout keep working. Admin grid collapses to 1
     column. (The Cisco rail is icon-only-ish already, so no rewrite needed.) */
  html .app-topbar { padding: 0 12px; }
  html .app-topbar .topbar-sep { display: none; }
  html .app-topbar .topbar-theme span,
  html .app-topbar .topbar-manual span,
  html .app-topbar .topbar-signout span,
  html .app-topbar .topbar-search span,
  html .app-topbar .topbar-search kbd { display: none; }
  html .workspace { padding: 12px !important; }
  html #section-admin.is-active {
    grid-template-columns: minmax(0, 1fr);
  }
  html #adminAccountSummary,
  html #adminComplianceSummary { grid-column: 1; }
  html .admin-launcher-head { align-items: stretch; }
  html .admin-launcher-filter-label { flex-basis: 100%; }
}

@media (max-width: 520px) {
  html .admin-module-grid { grid-template-columns: 1fr; }
  .quick-search-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
}

/* ── Medication order form: titration/taper phases + sliding-scale editor ── */
.med-schedule-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.med-schedule-mode-toggle small { font-weight: 400; color: var(--muted, #64748b); }
.med-titration-editor,
.med-sliding-scale-editor {
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0 8px;
  background: var(--surface-sunken, #f8fafc);
}
.med-titration-head { display: grid; gap: 2px; margin-bottom: 10px; }
.med-titration-title { font-weight: 700; }
.med-titration-phase,
.med-sliding-band {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
}
.med-sliding-band { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.med-sliding-band label { display: grid; gap: 3px; font-size: 12px; }

/* ── Med Pass: Scheduled/PRN tabs + batch-Given checkboxes ── */
.med-pass-tabs { margin-bottom: 12px; }
.med-pass-batch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid var(--teal-100, #cfe6dd);
  border-radius: 10px;
  background: var(--teal-50, #eef7f2);
}
.med-pass-batch-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.med-pass-batch-check { display: inline-flex; align-items: center; margin-right: 4px; }
.med-pass-batch-check input { width: 18px; height: 18px; cursor: pointer; }
.med-pass-card--prn .tag[data-tone="neutral"] { font-weight: 700; }

/* eMAR: Active / Discontinued sub-tabs + muted styling for stopped/held orders. */
.med-list-tabs { margin: 4px 0 12px; }
.med-order-item--inactive { opacity: 0.62; }
.med-order-item--inactive strong { text-decoration: line-through; text-decoration-color: rgba(100,116,139,0.5); }

/* ── Medication order full-screen workspace (flagship low-error surface) ── */
.med-order-workspace { display: grid; gap: 14px; }
.med-order-workspace-head h2 { margin: 6px 0 2px; }
.med-order-back {
  background: none; border: 0; padding: 0; margin-bottom: 4px;
  color: var(--teal-dark, #0e4d49); font-weight: 700; cursor: pointer;
}
.med-order-workspace-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.med-order-rail {
  position: sticky; top: 84px;
  display: grid; gap: 4px;
  padding: 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: var(--surface-sunken, #f8fafc);
}
.med-order-rail-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted, #64748b); margin-bottom: 4px;
}
.med-order-rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--ink, #1f2937);
}
.med-order-rail-item:hover, .med-order-rail-item:focus-visible {
  background: var(--teal-50, #eef7f2); outline: none;
}
.med-order-rail-step {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal, #1a8f63); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 22px;
}
.med-order-section {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
  scroll-margin-top: 84px;
}
.med-order-section > legend {
  padding: 0 8px; font-size: 14px; font-weight: 800; color: var(--teal-dark, #0e4d49);
}
.emar-list-actions { margin: 4px 0 14px; }

/* ICD-10-CM lookup */
.icd-lookup { position: relative; }
.icd-lookup-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.icd-lookup-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 9px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line, #eef1f4);
}
.icd-lookup-item:last-child { border-bottom: 0; }
.icd-lookup-item:hover, .icd-lookup-item:focus-visible { background: var(--teal-50, #eef7f2); outline: none; }
.icd-lookup-item strong { color: var(--teal-dark, #0e4d49); margin-right: 8px; }
.icd-lookup-empty { padding: 9px 12px; color: var(--muted, #64748b); }
.icd-lookup-selected { display: inline-block; margin-top: 6px; color: var(--teal-dark, #0e4d49); font-weight: 600; }

/* Sliding-scale capture at the pass */
.mar-sliding-capture {
  margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--teal-100, #cfe6dd); border-radius: 10px; background: var(--teal-50, #eef7f2);
}
.mar-sliding-suggest { display: block; margin-top: 4px; color: var(--teal-dark, #0e4d49); font-weight: 600; }

@media (max-width: 720px) {
  .med-order-workspace-body { grid-template-columns: 1fr; }
  .med-order-rail { position: static; }
}

/* Medication hold parameters — prominent on the eMAR card + Med Pass warning. */
.med-hold-note {
  margin: 4px 0; padding: 6px 10px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
}
.mar-hold-warning {
  margin: 0 0 10px; padding: 8px 12px;
  border-radius: 8px; font-weight: 800;
  color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5;
}

/* ============================================================
   Billing + account-security surface refinement
   Presentation-only: existing controls, IDs, and workflows are unchanged.
   ============================================================ */

#billingUpgradeModal,
#mfaEnrollmentModal {
  background: rgba(15, 23, 42, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#billingUpgradeModal .billing-upgrade-modal,
#mfaEnrollmentModal .mfa-enrollment-modal {
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
  max-height: min(92vh, 840px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.30), 0 8px 24px rgba(15, 23, 42, 0.16);
}

.billing-upgrade-header,
.mfa-enrollment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
  background: var(--surface-sunken, #f8fafc);
}

.billing-upgrade-icon,
.mfa-enrollment-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--mint-border, #b7ddd4);
  border-radius: 8px;
  color: var(--teal-dark, #0e4d49);
  background: var(--mint, #dff0ea);
}

.billing-upgrade-icon svg,
.mfa-enrollment-icon svg {
  width: 20px;
  height: 20px;
}

.billing-upgrade-eyebrow,
.mfa-enrollment-eyebrow {
  margin: 0 0 2px;
  color: var(--teal-dark, #0e4d49);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

#billingUpgradeModal .billing-upgrade-header h2,
#mfaEnrollmentModal .mfa-enrollment-header h2 {
  margin: 0;
  color: var(--ink-900, #0b1220);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.billing-upgrade-body,
.mfa-enrollment-body {
  min-height: 0;
  padding: 18px 22px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.billing-upgrade-lead,
.mfa-enrollment-lead {
  margin: 0;
  color: var(--ink-500, #475569);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}

#billingUpgradeModal .billing-upgrade-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 16px;
  margin: 14px 0 18px;
  padding: 11px 13px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
  font-size: 13px;
}

#billingUpgradeModal .billing-upgrade-meta:empty {
  display: none;
}

#billingUpgradeModal .billing-upgrade-meta dt {
  color: var(--ink-500, #475569);
  font-weight: 600;
}

#billingUpgradeModal .billing-upgrade-meta dd {
  color: var(--ink-900, #0b1220);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.billing-upgrade-plans-section {
  margin-top: 18px;
}

#billingUpgradeModal .billing-upgrade-meta:not(:empty) + .billing-upgrade-plans-section {
  margin-top: 0;
}

.billing-upgrade-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.billing-upgrade-section-heading h3 {
  margin: 0;
  color: var(--ink-900, #0b1220);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.billing-upgrade-section-heading span {
  color: var(--ink-400, #64748b);
  font-size: 12px;
}

.billing-upgrade-plans-head,
#billingUpgradeModal .billing-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 122px;
  align-items: center;
  gap: 12px;
}

.billing-upgrade-plans-head {
  padding: 7px 12px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--ink-400, #64748b);
  background: var(--surface-sunken, #f8fafc);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

.billing-upgrade-plans-head span:last-child {
  text-align: right;
}

#billingUpgradeModal .billing-upgrade-plans {
  margin: 0;
  border-color: var(--hairline, #e5e7eb);
  border-radius: 0 0 8px 8px;
}

#billingUpgradeModal .billing-upgrade-plans:empty {
  display: none;
}

#billingUpgradeModal .billing-plan-row {
  position: relative;
  min-height: 48px;
  padding: 9px 12px;
  border-bottom-color: var(--hairline, #eef2f7);
  background: var(--surface, #fff);
  font-size: 13px;
}

#billingUpgradeModal .billing-plan-row.is-current {
  background: var(--teal-50, #eef7f4);
  box-shadow: inset 3px 0 0 var(--teal, #187a74);
}

#billingUpgradeModal .billing-plan-name {
  min-width: 0;
  flex-wrap: wrap;
}

#billingUpgradeModal .billing-plan-name strong {
  color: var(--ink-900, #0b1220);
  font-weight: 700;
}

#billingUpgradeModal .billing-plan-range {
  color: var(--ink-500, #475569) !important;
}

#billingUpgradeModal .billing-plan-rate {
  color: var(--ink-900, #0b1220);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.billing-upgrade-note {
  margin: 9px 0 16px;
  color: var(--ink-500, #475569);
  font-size: 12px;
  line-height: 1.45;
}

#billingUpgradeModal .saas-agreement-gate {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--hairline-strong, #d1d5db);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
}

.saas-agreement-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.saas-agreement-heading p {
  margin: 0 0 1px;
  color: var(--teal-dark, #0e4d49);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

.saas-agreement-heading h3 {
  margin: 0;
  color: var(--ink-900, #0b1220);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

#billingUpgradeModal .saas-agreement-status {
  margin: 0 0 10px;
  color: var(--ink-500, #475569);
  font-size: 12px;
  line-height: 1.45;
}

#billingUpgradeModal .saas-agreement-status:empty {
  display: none;
}

#billingUpgradeModal .saas-agreement-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--ink-700, #1f2937);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

#billingUpgradeModal .saas-agreement-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--teal, #187a74);
}

#billingUpgradeModal .saas-agreement-check a {
  color: var(--teal-dark, #0e4d49);
  font-weight: 700;
  text-underline-offset: 2px;
}

#billingUpgradeModal .billing-upgrade-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--hairline, #e5e7eb);
  background: var(--surface-sunken, #f8fafc);
}

#billingUpgradeModal .billing-upgrade-actions #billingUpgradeClose {
  margin-right: auto;
}

#billingUpgradeModal .billing-upgrade-actions button,
#mfaEnrollmentModal .mfa-enrollment-actions button {
  letter-spacing: 0 !important;
}

#billingUpgradeModal #billingUpgradeContact[aria-disabled="true"],
#billingUpgradeModal #billingUpgradeCheckout[disabled] {
  border-color: var(--hairline, #e5e7eb) !important;
  color: var(--ink-400, #64748b) !important;
  background: var(--surface-sunken, #f8fafc) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* The account banner now reads as a compact system notice instead of a loose
   line of text and a detached CTA. */
.billing-banner {
  position: relative;
  min-height: 60px;
  margin: 8px 16px 12px;
  padding: 11px 12px 11px 17px;
  overflow: hidden;
  border-radius: 8px;
  border-color: #f1c98f;
  background: #fff9ed;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.billing-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #c46b10;
}

.billing-banner.tone-danger::before {
  background: #c24141;
}

.billing-banner-body {
  gap: 2px;
  min-width: 0;
}

.billing-banner-body strong {
  color: currentColor;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
}

.billing-banner-body .muted {
  color: currentColor;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.88;
}

.billing-banner .billing-banner-cta {
  flex: 0 0 auto;
  min-height: 36px !important;
  border-color: currentColor !important;
  color: currentColor !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

.billing-banner .billing-banner-cta:hover,
.billing-banner .billing-banner-cta:focus-visible {
  background: #fff !important;
}

/* MFA is intentionally blocking; this styling makes the required next step
   clear without weakening the enrollment gate. */
#mfaEnrollmentModal .mfa-enrollment-modal {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  max-height: min(92vh, 760px);
}

.mfa-enrollment-note {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 8px;
  color: var(--ink-500, #475569);
  background: var(--surface-sunken, #f8fafc);
  font-size: 13px;
}

.mfa-enrollment-note strong {
  color: var(--ink-900, #0b1220);
  font-size: 12px;
}

#mfaEnrollmentModal .mfa-enrollment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

#mfaEnrollmentModal .mfa-enrollment-setup {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
}

#mfaEnrollmentModal .mfa-qr {
  margin: 0 0 12px;
}

#mfaEnrollmentModal .mfa-qr img {
  width: min(200px, 100%);
  height: auto;
  border-color: var(--hairline-strong, #d1d5db);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.08));
}

#mfaEnrollmentModal .mfa-manual-entry {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--hairline, #e5e7eb);
}

#mfaEnrollmentModal .mfa-manual-entry summary {
  color: var(--teal-dark, #0e4d49);
  font-weight: 700;
}

#mfaEnrollmentModal .mfa-enrollment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

#mfaEnrollmentModal .mfa-enrollment-form label {
  display: grid;
  gap: 6px;
  color: var(--ink-700, #1f2937);
  font-size: 12px;
  font-weight: 700;
}

#mfaEnrollmentModal .mfa-enrollment-form input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

#mfaEnrollmentModal .mfa-modal-error {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--status-danger-fg, #a02525);
  font-size: 12px;
  font-weight: 600;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-modal,
:root[data-theme="dark"] #mfaEnrollmentModal .mfa-enrollment-modal {
  border-color: #344052;
  background: #1a212c;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .billing-upgrade-header,
:root[data-theme="dark"] .mfa-enrollment-header,
:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-actions {
  border-color: #344052;
  background: #202936;
}

:root[data-theme="dark"] .billing-upgrade-icon,
:root[data-theme="dark"] .mfa-enrollment-icon {
  border-color: #346b64;
  color: #8fddd2;
  background: #173b37;
}

:root[data-theme="dark"] .billing-upgrade-eyebrow,
:root[data-theme="dark"] .mfa-enrollment-eyebrow,
:root[data-theme="dark"] .saas-agreement-heading p,
:root[data-theme="dark"] #billingUpgradeModal .saas-agreement-check a,
:root[data-theme="dark"] #mfaEnrollmentModal .mfa-manual-entry summary {
  color: #8fddd2;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-header h2,
:root[data-theme="dark"] #mfaEnrollmentModal .mfa-enrollment-header h2,
:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-meta dd,
:root[data-theme="dark"] .billing-upgrade-section-heading h3,
:root[data-theme="dark"] #billingUpgradeModal .billing-plan-name strong,
:root[data-theme="dark"] #billingUpgradeModal .billing-plan-rate,
:root[data-theme="dark"] .saas-agreement-heading h3,
:root[data-theme="dark"] .mfa-enrollment-note strong {
  color: #eef2f7;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-meta,
:root[data-theme="dark"] .billing-upgrade-plans-head,
:root[data-theme="dark"] #billingUpgradeModal .saas-agreement-gate,
:root[data-theme="dark"] .mfa-enrollment-note,
:root[data-theme="dark"] #mfaEnrollmentModal .mfa-enrollment-setup {
  border-color: #344052;
  background: #202936;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-plan-row {
  border-bottom-color: #344052;
  background: #1a212c;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-plan-row.is-current {
  background: #17332f;
  box-shadow: inset 3px 0 0 #54b8ad;
}

:root[data-theme="dark"] .billing-upgrade-lead,
:root[data-theme="dark"] .mfa-enrollment-lead,
:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-meta dt,
:root[data-theme="dark"] .billing-upgrade-section-heading span,
:root[data-theme="dark"] #billingUpgradeModal .billing-plan-range,
:root[data-theme="dark"] .billing-upgrade-note,
:root[data-theme="dark"] #billingUpgradeModal .saas-agreement-status,
:root[data-theme="dark"] .mfa-enrollment-note {
  color: #b7c0ce !important;
}

:root[data-theme="dark"] #billingUpgradeModal .saas-agreement-check,
:root[data-theme="dark"] #mfaEnrollmentModal .mfa-enrollment-form label {
  color: #d7dde7;
}

:root[data-theme="dark"] #billingUpgradeModal .billing-upgrade-plans {
  border-color: #344052 !important;
}

:root[data-theme="dark"] #billingUpgradeModal .tag[data-tone="positive"],
:root[data-theme="dark"] #billingUpgradeModal .tag[data-tone="steady"] {
  border-color: #2b6f4a !important;
  color: #9aebba !important;
  background: #12301f !important;
}

:root[data-theme="dark"] #billingUpgradeModal #billingUpgradeClose {
  border-color: #465267 !important;
  color: #eef2f7 !important;
  background: #232b38 !important;
}

:root[data-theme="dark"] #billingUpgradeModal #billingUpgradeContact[aria-disabled="true"],
:root[data-theme="dark"] #billingUpgradeModal #billingUpgradeCheckout[disabled] {
  border-color: #344052 !important;
  color: #a7b0c0 !important;
  background: #232b38 !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] #mfaEnrollmentModal .mfa-manual-entry {
  border-color: #344052;
}

:root[data-theme="dark"] .billing-banner .billing-banner-cta {
  border-color: currentColor !important;
  color: currentColor !important;
  background: rgba(15, 20, 28, 0.45) !important;
}

:root[data-theme="dark"] .billing-banner .billing-banner-cta:hover,
:root[data-theme="dark"] .billing-banner .billing-banner-cta:focus-visible {
  background: rgba(15, 20, 28, 0.78) !important;
}

@media (max-width: 620px) {
  #billingUpgradeModal,
  #mfaEnrollmentModal {
    padding: 10px;
  }

  #billingUpgradeModal .billing-upgrade-modal,
  #mfaEnrollmentModal .mfa-enrollment-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .billing-upgrade-header,
  .mfa-enrollment-header {
    padding: 15px 16px;
  }

  .billing-upgrade-body,
  .mfa-enrollment-body {
    padding: 15px 16px 16px;
  }

  .billing-upgrade-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .billing-upgrade-plans-head {
    display: none;
  }

  #billingUpgradeModal .billing-upgrade-plans {
    border-radius: 8px;
  }

  #billingUpgradeModal .billing-plan-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 4px 10px;
    min-height: 64px;
  }

  #billingUpgradeModal .billing-plan-name {
    grid-column: 1 / -1;
  }

  #billingUpgradeModal .billing-plan-range {
    grid-column: 1;
  }

  #billingUpgradeModal .billing-plan-rate {
    grid-column: 2;
  }

  #billingUpgradeModal .billing-upgrade-actions {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  #billingUpgradeModal .billing-upgrade-actions #billingUpgradeClose {
    margin-right: 0;
  }

  #billingUpgradeModal .billing-upgrade-actions button {
    flex: 1 1 140px;
  }

  .billing-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin: 8px 12px 10px;
    padding: 11px 12px 12px 17px;
  }

  .billing-banner .billing-banner-cta {
    width: 100%;
  }

  #mfaEnrollmentModal .mfa-enrollment-actions button {
    width: 100%;
  }
}

/* ============================================================
   Visual hierarchy refinement - v20260717f
   Cosmetic only: retain the existing theme, content, controls, and flow while
   reserving strong borders/elevation for primary work surfaces.
   ============================================================ */

/* Let independently sized dashboard panels end with their content instead of
   stretching a short panel to match a long neighboring work queue. */
#staffDashboardPanels {
  align-items: start;
  grid-auto-rows: max-content;
}

/* Keep subscription identity and price as two readable text stacks. */
.app-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
  padding: 2px 0;
}

.app-service-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-service-row > div > span {
  display: block;
}

.app-service-amount {
  justify-items: end;
  text-align: right;
}

.app-service-amount > strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.app-service-amount > strong .muted {
  display: inline;
  font-size: 12px;
  font-weight: 600;
}

/* A partial ledger is a completeness disclosure, not ordinary row-count
   metadata. The existing server-driven data attribute remains authoritative. */
#invoiceCountLabel[data-partial-ledger="true"] {
  max-width: min(760px, 72vw);
  padding: 3px 0 3px 10px;
  border-left: 3px solid #d97706;
  color: #8a4b08 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Reports: one framed report group with calm divider rows, rather than a card
   around every export inside an already-framed panel. */
#reportList:not(:empty),
#comprehensiveReportList:not(:empty),
#auditList:not(:empty) {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: var(--panel, #fff);
}

#reportList > .report-item,
#comprehensiveReportList > .report-item,
#auditList > .timeline-item {
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#reportList > .report-item:last-child,
#comprehensiveReportList > .report-item:last-child,
#auditList > .timeline-item:last-child {
  border-bottom: 0;
}

/* Integrations: preserve the four existing workflow panels, but treat the
   providers within each panel as rows in one bounded surface. */
#paymentConnectList:not(:empty),
#accountingConnectList:not(:empty),
#integrationList:not(:empty),
#integrationControlList:not(:empty) {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: var(--panel, #fff);
}

#paymentConnectList > .integration-item,
#accountingConnectList > .integration-item,
#integrationList > .integration-item,
#integrationControlList > .integration-item {
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#accountingConnectList > .integration-item:last-child,
#integrationList > .integration-item:last-child,
#integrationControlList > .integration-item:last-child {
  border-bottom: 0;
}

@media (min-width: 701px) {
  #paymentConnectList > .integration-item {
    border-bottom: 0;
  }

  #paymentConnectList > .integration-item + .integration-item {
    border-left: 1px solid var(--line, #e5e7eb);
  }
}

/* Repeated resident records inside an existing panel read as a list. Keep the
   panel as the work surface and remove a redundant inner card boundary. */
#residentDetail .panel > .list-stack {
  gap: 0;
}

#residentDetail .panel > .list-stack > .list-item,
#residentDetail .panel > .list-stack > .timeline-item {
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#residentDetail .panel > .list-stack > .list-item:last-child,
#residentDetail .panel > .list-stack > .timeline-item:last-child {
  border-bottom: 0;
}

/* Context facts support the active resident workflow; they should not look
   like a second grid of primary actions. */
.resident-action-panel .action-detail-grid > * {
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line, #e5e7eb);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-field {
  min-width: 0;
}

.detail-field strong {
  overflow-wrap: anywhere;
}

/* The section selector is important wayfinding, but only the selected section
   should carry primary-action weight. */
.chart-sections-hub {
  margin-bottom: 18px;
  padding: 13px 16px 5px;
  border-color: var(--line, #dce5e2);
  border-left-color: var(--teal, #1a8f63);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
  box-shadow: none;
}

.chart-section-clusters {
  gap: 10px 14px;
}

.chart-section-cluster {
  gap: 6px;
}

.chart-section-cluster-title,
.chart-sections-eyebrow {
  letter-spacing: 0;
}

.chart-section-grid {
  gap: 6px !important;
}

.chart-section-grid .resident-chart-tab,
.chart-section-grid .admin-chart-tab {
  min-height: 56px !important;
  padding: 6px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ink-soft, #334155) !important;
  box-shadow: none !important;
  text-align: center !important;
}

.chart-section-grid .resident-chart-tab-label,
.chart-section-grid .admin-chart-tab-label {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.chart-section-grid .resident-chart-tab-icon {
  opacity: 0.72;
}

.chart-section-grid .resident-chart-tab:hover,
.chart-section-grid .resident-chart-tab:focus-visible,
.chart-section-grid .admin-chart-tab:hover,
.chart-section-grid .admin-chart-tab:focus-visible {
  border-color: var(--line, #dce5e2) !important;
  background: var(--panel, #fff) !important;
  box-shadow: none !important;
  transform: none;
}

.chart-section-grid .resident-chart-tab.is-active,
.chart-section-grid .admin-chart-tab.is-active,
.chart-section-grid .resident-chart-tab.is-active:hover,
.chart-section-grid .admin-chart-tab.is-active:hover {
  border-color: var(--teal-dark, #0f5d3f) !important;
  background: var(--teal-dark, #0f5d3f) !important;
  color: #fff !important;
}

.chart-section-grid .resident-chart-tab.is-active .resident-chart-tab-icon {
  opacity: 1;
}

/* Group labels provide the hierarchy in Admin > Users; a quiet rule separates
   workflows without wrapping each section in another competing container. */
.admin-users-groups {
  gap: 16px;
}

.admin-users-group {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.admin-users-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-users-group h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--teal-dark, #0f5d3f);
}

.admin-users-group h4::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line, #e5e7eb);
}

html .admin-users-group .admin-module-card {
  min-height: 76px;
  padding: 11px 12px !important;
}

.chart-section-grid .resident-chart-tab-icon {
  width: 18px;
  height: 18px;
}

.chart-section-grid .resident-chart-tab-icon svg {
  width: 17px;
  height: 17px;
}

/* At tablet and compact-desktop widths, flex line-breaking used the labels'
   intrinsic width and produced accidental 3+2 / 4+1 cluster rows. The narrow
   tiles then clipped Documents, Assessment, Observations, and Communications.
   Use intentional cluster tracks here: three clinical groups above Safety +
   Records, with the Records actions kept together in one compact row. */
@media (min-width: 701px) and (max-width: 1500px) {
  .chart-section-clusters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .chart-section-cluster,
  .chart-section-cluster[data-tiles] {
    width: auto;
    min-width: 0;
    flex: none;
  }

  .chart-section-cluster[data-cluster="safety"] .chart-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chart-section-cluster[data-cluster="records"] {
    grid-column: 2 / -1;
  }

  .chart-section-cluster[data-cluster="records"] .chart-section-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 701px) and (max-width: 960px) {
  .chart-section-clusters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-section-cluster[data-cluster="records"] {
    grid-column: 1 / -1;
  }
}

/* Access control remains a matrix, with stronger category landmarks and calm
   scan lines. Permission values and checkbox behavior are unchanged. */
.rc-matrix-section th {
  padding: 8px 10px !important;
  border-top: 1px solid var(--mint-border, #c9d8d4);
  border-bottom: 1px solid var(--mint-border, #c9d8d4) !important;
  background: var(--surface-sunken, #f2f7f5) !important;
  color: var(--teal-dark, #0f5d3f) !important;
  letter-spacing: 0;
}

.rc-matrix tbody tr:not(.rc-matrix-section):nth-child(even) > th,
.rc-matrix tbody tr:not(.rc-matrix-section):nth-child(even) > td {
  background: #fbfcfc;
}

.rc-matrix tbody tr:not(.rc-matrix-section):hover > th,
.rc-matrix tbody tr:not(.rc-matrix-section):hover > td {
  background: var(--mint, #eef6f3);
}

.rc-matrix tbody th {
  border-right: 1px solid var(--line, #e5e7eb);
}

.rc-matrix-cell input:not(:checked) {
  opacity: 0.68;
}

/* Restore readable hierarchy in dark mode. Earlier high-specificity light
   heading rules otherwise leave key titles nearly black on the dark surface. */
:root[data-theme="dark"] .topbar h1#facilityName,
:root[data-theme="dark"] .section-heading h2,
:root[data-theme="dark"] .panel h3,
:root[data-theme="dark"] .form-title h3,
:root[data-theme="dark"] .dashboard-title-facility,
:root[data-theme="dark"] .resident-workspace-status strong,
:root[data-theme="dark"] .resident-workflow-copy h3 {
  color: #e6eaf1 !important;
}

:root[data-theme="dark"] .topbar-facility-meta {
  color: #a7b0c0 !important;
}

:root[data-theme="dark"] .facesheet-group-title {
  border-bottom-color: #346b64;
  color: #8fddd2;
}

:root[data-theme="dark"] #invoiceCountLabel[data-partial-ledger="true"] {
  border-left-color: #f0b24a;
  color: #f0c56a !important;
}

:root[data-theme="dark"] #reportList:not(:empty),
:root[data-theme="dark"] #comprehensiveReportList:not(:empty),
:root[data-theme="dark"] #auditList:not(:empty),
:root[data-theme="dark"] #paymentConnectList:not(:empty),
:root[data-theme="dark"] #accountingConnectList:not(:empty),
:root[data-theme="dark"] #integrationList:not(:empty),
:root[data-theme="dark"] #integrationControlList:not(:empty) {
  border-color: #344052;
  background: #1a212c;
}

:root[data-theme="dark"] #reportList > .report-item,
:root[data-theme="dark"] #comprehensiveReportList > .report-item,
:root[data-theme="dark"] #auditList > .timeline-item,
:root[data-theme="dark"] #paymentConnectList > .integration-item,
:root[data-theme="dark"] #accountingConnectList > .integration-item,
:root[data-theme="dark"] #integrationList > .integration-item,
:root[data-theme="dark"] #integrationControlList > .integration-item,
:root[data-theme="dark"] #residentDetail .panel > .list-stack > .list-item,
:root[data-theme="dark"] #residentDetail .panel > .list-stack > .timeline-item {
  border-bottom-color: #344052;
  background: transparent !important;
}

:root[data-theme="dark"] .resident-action-panel .action-detail-grid > * {
  border-top-color: #344052;
  background: transparent;
}

:root[data-theme="dark"] .chart-sections-hub {
  border-color: #344052;
  border-left-color: #2fa79c;
  background: #202936;
  box-shadow: none;
}

:root[data-theme="dark"] .chart-section-cluster-title,
:root[data-theme="dark"] .chart-sections-hub .chart-sections-eyebrow {
  color: #8fddd2;
}

:root[data-theme="dark"] .chart-section-grid .resident-chart-tab,
:root[data-theme="dark"] .chart-section-grid .admin-chart-tab {
  border-color: transparent !important;
  background: transparent !important;
  color: #c4ccda !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .chart-section-grid .resident-chart-tab:hover,
:root[data-theme="dark"] .chart-section-grid .resident-chart-tab:focus-visible,
:root[data-theme="dark"] .chart-section-grid .admin-chart-tab:hover,
:root[data-theme="dark"] .chart-section-grid .admin-chart-tab:focus-visible {
  border-color: #465267 !important;
  background: #293342 !important;
}

:root[data-theme="dark"] .admin-users-group {
  border-bottom-color: #344052;
}

:root[data-theme="dark"] .admin-users-group h4 {
  color: #8fddd2;
}

:root[data-theme="dark"] .admin-users-group h4::after {
  background: #344052;
}

:root[data-theme="dark"] .chart-section-grid .resident-chart-tab.is-active,
:root[data-theme="dark"] .chart-section-grid .admin-chart-tab.is-active,
:root[data-theme="dark"] .chart-section-grid .resident-chart-tab.is-active:hover,
:root[data-theme="dark"] .chart-section-grid .admin-chart-tab.is-active:hover {
  border-color: #2fa79c !important;
  background: #2fa79c !important;
  color: #0e1420 !important;
}

:root[data-theme="dark"] .rc-matrix-section th {
  border-color: #346b64 !important;
  background: #173b37 !important;
  color: #8fddd2 !important;
}

:root[data-theme="dark"] .rc-matrix tbody tr:not(.rc-matrix-section):nth-child(even) > th,
:root[data-theme="dark"] .rc-matrix tbody tr:not(.rc-matrix-section):nth-child(even) > td {
  background: #1d2531;
}

:root[data-theme="dark"] .rc-matrix tbody tr:not(.rc-matrix-section):hover > th,
:root[data-theme="dark"] .rc-matrix tbody tr:not(.rc-matrix-section):hover > td {
  background: #25343d;
}

:root[data-theme="dark"] .rc-matrix tbody th {
  border-right-color: #344052;
}

/* Wrapped safety facts must expand with their clinical text instead of letting
   long controlled-medication or precaution labels escape a fixed-height tag. */
.resident-safety-banner .tag.tag-wrap {
  align-items: flex-start;
  height: auto !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Quick search is a compact command surface. Protect it from generic modal
   spacing rules and keep the selected result readable in both themes. */
.modal-backdrop .modal.quick-search-modal {
  max-width: 600px;
  padding: 0;
}

.modal-backdrop .modal.quick-search-modal h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.modal-backdrop .modal.quick-search-modal .quick-search-input {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 36px);
}

:root[data-theme="dark"] .quick-search-row:is(.is-active, [aria-selected="true"]) > strong {
  color: #3ec9bd;
}

:root[data-theme="dark"] .resident-action-group {
  border-color: #344052;
  background: #232b38;
}

@media (min-width: 761px) and (max-width: 920px) {
  .resident-chart-header {
    grid-template-columns: 68px minmax(0, 1fr) auto;
  }
}

@media (max-width: 700px) {
  .app-service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .app-service-amount {
    justify-items: start;
    padding-top: 10px;
    border-top: 1px solid var(--line, #e5e7eb);
    text-align: left;
  }

  #invoiceCountLabel[data-partial-ledger="true"] {
    max-width: 100%;
  }

  #section-integrations .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  #paymentConnectList {
    grid-template-columns: minmax(0, 1fr);
  }

  #paymentConnectList > .integration-item {
    border-bottom: 1px solid var(--line, #e5e7eb);
  }

  #paymentConnectList > .integration-item:last-child {
    border-bottom: 0;
  }

  .chart-sections-hub {
    padding: 12px 12px 4px;
  }

  .chart-sections-hub-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
  }

  .chart-section-clusters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .chart-section-cluster,
  .chart-section-cluster[data-tiles] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    min-width: 0;
  }

  .chart-section-cluster-title {
    padding-top: 3px;
  }

  .chart-sections-hub .chart-section-cluster[data-tiles="2"] .chart-section-grid,
  .chart-sections-hub .chart-section-cluster[data-tiles="3"] .chart-section-grid,
  .chart-sections-hub .chart-section-cluster[data-tiles="4"] .chart-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chart-section-grid .resident-chart-tab,
  .chart-section-grid .admin-chart-tab {
    min-height: 50px !important;
    padding: 6px !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .chart-section-grid .resident-chart-tab-icon {
    width: 16px;
    height: 16px;
  }

  .chart-section-grid .resident-chart-tab-icon svg {
    width: 15px;
    height: 15px;
  }

  #residentDetail .detail-grid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  #residentDetail .panel-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  #residentDetail .panel-heading-actions {
    justify-content: flex-start;
  }

  #residentDetail .panel-heading-actions > * {
    flex: 1 1 140px;
  }
}

@media (max-width: 600px) {
  .form-modal-section.is-active-section > .form-grid,
  .form-modal-section.is-active-section > .form-grid.compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .dashboard-header-actions .hero-facts {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

/* ===== Client training library ===== */
.training-section-heading {
  align-items: flex-end;
  margin-bottom: var(--sp-5, 20px);
}

.training-section-heading .muted {
  margin: 4px 0 0;
}

.training-manual-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  text-decoration: none;
  white-space: nowrap;
}

.training-manual-link svg,
.training-watch-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.training-library-shell {
  width: 100%;
  min-width: 0;
}

.training-library-intro {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  padding: 0 0 var(--sp-5, 20px);
  margin-bottom: var(--sp-6, 24px);
  border-bottom: 1px solid var(--hairline, var(--line));
}

.training-library-intro h3,
.training-library-intro p {
  margin: 0;
  letter-spacing: 0;
}

.training-library-intro .eyebrow {
  margin-bottom: 2px;
}

.training-library-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--teal-200, #a9d7cd);
  border-radius: var(--r-md, 8px);
  color: var(--teal-dark, #0e4d49);
  background: var(--teal-50, #eef7f4);
}

.training-library-mark svg,
.training-video-thumb svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.training-category-stack {
  display: grid;
  gap: var(--sp-8, 32px);
  min-width: 0;
}

.training-category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.training-category-heading h3 {
  margin: 0;
  color: var(--ink-900, var(--ink));
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.training-category-heading span {
  color: var(--ink-500, var(--muted));
  font-size: 12px;
}

.training-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4, 16px);
  min-width: 0;
}

.training-video-card {
  display: grid;
  grid-template-rows: auto minmax(96px, 1fr) auto;
  min-width: 0;
  min-height: 264px;
  overflow: hidden;
  border: 1px solid var(--hairline, var(--line));
  border-radius: var(--r-md, 8px);
  background: var(--surface, var(--panel));
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.training-video-thumb {
  display: grid;
  min-height: 82px;
  place-items: center;
  color: var(--teal-dark, #0e4d49);
  background: var(--surface-sunken, #f8fafc);
  border-bottom: 1px solid var(--hairline, var(--line));
}

.training-video-card-body {
  padding: 16px 16px 10px;
}

.training-video-card-body h4 {
  margin: 0 0 6px;
  color: var(--ink-900, var(--ink));
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

.training-video-card-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink-500, var(--muted));
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.training-video-card-footer {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--hairline, var(--line));
}

.training-duration {
  color: var(--ink-500, var(--muted));
  font-size: 12px;
  white-space: nowrap;
}

.training-availability {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--hairline, var(--line));
  border-radius: 999px;
  color: var(--status-neutral-fg, #475569);
  background: var(--status-neutral-bg, #eef2f6);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.training-availability[data-tone="warning"] {
  border-color: #e8cf9b;
  color: var(--status-warn-fg, #8a5a00);
  background: var(--status-warn-bg, #fdf0d5);
}

.training-watch-button {
  display: inline-flex;
  min-width: 92px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.training-library-state {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed var(--hairline-strong, var(--line));
  border-radius: var(--r-md, 8px);
  color: var(--ink-500, var(--muted));
  text-align: center;
}

.training-library-state p {
  margin: 0;
}

.training-library-state--error {
  color: var(--status-danger-fg, #a02525);
  background: var(--status-danger-bg, #fbe6e6);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--teal-100, #d3ebe5);
  border-top-color: var(--teal, #187a74);
  border-radius: 50%;
  animation: training-spinner 800ms linear infinite;
}

@keyframes training-spinner {
  to { transform: rotate(360deg); }
}

.training-video-modal-panel {
  width: min(880px, calc(100vw - 32px));
}

.training-video-modal-panel .rc-modal__header > div {
  min-width: 0;
}

.training-video-modal-panel .eyebrow {
  margin: 0 0 2px;
}

.training-video-modal-panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.training-video-modal-body {
  min-width: 0;
}

.training-video-frame {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--hairline, var(--line));
  border-radius: var(--r-md, 8px);
  aspect-ratio: 16 / 9;
  background: #0b1220;
}

.training-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#trainingVideoExpiry {
  margin: 10px 0 0;
}

[data-theme="dark"] .training-library-intro,
[data-theme="dark"] .training-video-card,
[data-theme="dark"] .training-video-card-footer,
[data-theme="dark"] .training-video-thumb {
  border-color: #2b3444;
}

[data-theme="dark"] .training-library-mark {
  border-color: #285f5a;
  color: #7dd6cc;
  background: #12312e;
}

[data-theme="dark"] .training-video-card {
  background: #1a212c;
}

[data-theme="dark"] .training-video-thumb {
  color: #7dd6cc;
  background: #141a24;
}

[data-theme="dark"] .training-category-heading h3,
[data-theme="dark"] .training-video-card-body h4 {
  color: #e6eaf1;
}

@media (max-width: 1080px) {
  .training-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .training-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 700px) {

  .training-video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .training-video-card {
    min-height: 248px;
  }

  .training-video-modal-panel {
    width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation-duration: 1600ms;
  }
}

/* ============================================================
   Medication workflow hierarchy
   Presentation only: field names, validation, payloads, and API paths stay put.
   ============================================================ */

.med-order-section-intro {
  margin: 0 0 12px;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.45;
}

.med-safety-toggle-card {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #dce3e8);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
}

.med-safety-toggle-row,
.med-safety-toggle-row label {
  min-height: 44px;
}

.med-safety-toggle-row label,
label.med-safety-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.med-safety-toggle-row label {
  width: fit-content;
  max-width: 100%;
}

label.med-safety-toggle-row {
  width: 100%;
}

.med-safety-toggle-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.med-safety-toggle-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.med-safety-toggle-row strong {
  color: var(--ink, #1f2937);
  font-size: 14px;
}

.med-safety-toggle-row small,
.field-guidance {
  display: block;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.med-safety-controlled-details {
  padding-top: 10px;
  border-top: 1px solid var(--line, #dce3e8);
}

.med-safety-controlled-details[hidden],
[data-prn-details][hidden],
[data-prn-placeholder][hidden] {
  display: none;
}

.med-safety-controlled-grid.form-grid.compact,
.med-safety-prn-grid.form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.med-safety-field-group {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--teal, #187a74);
  border-radius: 0 8px 8px 0;
  background: var(--teal-50, #eef8f5);
}

.med-safety-field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.med-safety-field-heading strong {
  font-size: 14px;
}

.med-safety-field-heading span {
  color: var(--muted, #64748b);
  font-size: 12px;
}

.med-safety-prn-placeholder {
  margin: 0;
  padding: 8px 2px;
}

.field-unit {
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 500;
}

.med-safety-hold-field {
  display: grid;
  gap: 6px;
}

.med-safety-hold-field textarea {
  min-height: 72px;
}

.med-controlled-advisory:not([hidden]) {
  display: block;
  padding: 8px 10px;
  border: 1px solid #f3cf86;
  border-radius: 6px;
  background: #fff8e7;
}

/* Medication-regimen review: remove the card-inside-card frame and let the
   numbered clinical sections provide the hierarchy. */
.pharmacy-review-form.form-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pharmacy-review-form > .form-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 2px 2px 4px;
}

.pharmacy-review-form > .form-title > p {
  grid-column: 1 / -1;
  max-width: 980px;
  margin: 0;
}

.pharmacy-review-form.sectioned-form {
  gap: 12px;
}

.pharmacy-review-form.sectioned-form .form-section {
  padding: 15px 18px 17px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.pharmacy-review-form.sectioned-form .form-section-hint {
  margin-bottom: 11px;
}

.mrr-review-grid.form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.mrr-count-grid.form-grid.compact {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  max-width: 700px;
  gap: 12px;
}

.mrr-threshold-toggle {
  width: fit-content;
  min-height: 44px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line, #dce3e8);
  border-radius: 6px;
  background: var(--surface-sunken, #f8fafc);
}

.mrr-threshold-toggle span {
  display: grid;
  gap: 1px;
}

.mrr-threshold-toggle small {
  color: var(--muted, #64748b);
  font-weight: 500;
}

.mrr-threshold-toggle:has(input:checked) {
  border-color: #e7b85d;
  background: #fff8e7;
}

.mrr-checklist-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mrr-check-group {
  min-width: 0;
  padding-left: 12px;
  border-left: 3px solid var(--teal-100, #bfe8dc);
}

.mrr-check-group h4 {
  margin: 0 0 8px;
  color: var(--teal-dark, #0e4d49);
  font-size: 13px;
  letter-spacing: 0;
}

.mrr-check-grid {
  display: grid;
  gap: 5px;
}

.mrr-check-item {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-sunken, #f8fafc);
  line-height: 1.35;
}

.mrr-check-item:hover,
.mrr-check-item:focus-within {
  border-color: var(--teal-100, #bfe8dc);
  color: var(--ink, #1f2937);
}

.mrr-check-item:has(input:checked) {
  border-color: var(--teal-100, #bfe8dc);
  background: var(--teal-50, #eef8f5);
}

.mrr-recommendation-grid.form-grid.compact {
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr);
  max-width: 760px;
}

.mrr-form-actions {
  justify-content: space-between;
  gap: 12px;
}

[data-theme="dark"] .med-controlled-advisory:not([hidden]),
[data-theme="dark"] .mrr-threshold-toggle:has(input:checked) {
  border-color: #6f5a2d;
  background: #332b18;
}

@media (max-width: 980px) {
  .mrr-checklist-groups {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .med-safety-controlled-grid.form-grid.compact,
  .med-safety-prn-grid.form-grid.compact,
  .mrr-count-grid.form-grid.compact,
  .mrr-recommendation-grid.form-grid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .med-safety-field-heading,
  .mrr-form-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .pharmacy-review-form.sectioned-form .form-section {
    padding: 14px;
  }
}