/* =========================================================
   HO-Print v4 — Consolidated Design System
   Single authoritative stylesheet replacing all prior override layers.
   ========================================================= */

/* --- 1. Design Tokens ----------------------------------- */
:root {
  --bg: #0c1424;
  --surface: #101828;
  --surface-2: #152238;
  --surface-3: #1b2b45;
  --border: rgba(148, 163, 184, .16);
  --border-md: rgba(148, 163, 184, .26);
  --text: #eef4ff;
  --text-soft: #c2d1ea;
  --text-muted: #8ea3c5;
  --accent: #005eb8;
  --accent-bg: rgba(0, 94, 184, .14);
  --accent-bdr: rgba(0, 94, 184, .32);
  --primary: #005eb8;
  --primary-2: #1b6dc1;
  --primary-bg: rgba(0, 94, 184, .14);
  --secondary: #475467;
  --secondary-bg: rgba(71, 84, 103, .16);
  --warn: #f0a04a;
  --danger: #d92d20;
  --danger-bg: rgba(217, 45, 32, .16);
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow: 0 18px 44px rgba(4, 10, 24, .34);
  --shadow-sm: 0 8px 18px rgba(4, 10, 24, .2);
  --ring: 0 0 0 3px rgba(0, 94, 184, .18);
}

/* --- 2. Base -------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background:
    radial-gradient(circle at top left, rgba(36, 198, 187, .08) 0%, transparent 28%),
    radial-gradient(circle at top right, rgba(92, 143, 214, .07) 0%, transparent 26%),
    linear-gradient(180deg, #0d1318 0%, var(--bg) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* --- 3. Global Header (hidden — uses compact in-page header) */
header {
  display: none;
}

/* --- 4. Layout Shell ------------------------------------ */
.wrap {
  min-height: 100vh;
}

.workspaceShell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 100vh;
}

.workspaceContent {
  order: 1;
  min-width: 0;
  padding: 14px 16px 22px;
}

/* --- 5. Settings Rail (peek button container) ----------- */
.settingsRail {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 19, 34, .96), rgba(13, 24, 43, .9));
  box-shadow: 0 10px 28px rgba(3, 7, 14, .28);
  transition: opacity .18s ease, transform .18s ease;
}

/* --- 6. Settings Panel (sidebar) ----------------------- */
.settingsPanel {
  order: 2;
  position: relative;
  width: 282px;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  transition: width .22s ease, opacity .22s ease;
}

.workspaceShell.isSettingsClosed .settingsPanel {
  width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  border-left: 0;
}

.workspaceShell.isSettingsOpen .settingsPanel {
  width: 282px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.settingsBackdrop {
  display: none;
}

/* Panel header */
.settingsPanelHeader {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 16px 16px 13px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  position: sticky;
  top: 0;
  z-index: 2;
}

.settingsEyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.settingsTitle {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--accent);
}

.settingsIntro {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Close button inside panel */
.settingsToggleBtn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.settingsToggleBtn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(220, 232, 255, .85);
  border-right: 2px solid rgba(220, 232, 255, .85);
  transform: rotate(45deg);
}

/* Peek button (open sidebar) */
.settingsPeekBtn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
}

.settingsPeekBtn::before {
  content: "";
  width: 10px;
  height: 10px;
  background:
    linear-gradient(180deg,
      transparent 0 20%, rgba(220, 232, 255, .8) 20% 33%,
      transparent 33% 46%, rgba(220, 232, 255, .8) 46% 59%,
      transparent 59% 72%, rgba(220, 232, 255, .8) 72% 85%,
      transparent 85%);
  border-radius: 2px;
  opacity: .8;
}

.workspaceShell.isSettingsOpen .settingsPeekBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.workspaceShell.isSettingsOpen .settingsRail {
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
}

/* Controls scroll area */
.controls {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 152, 188, .2) transparent;
}

.controlsGrid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controlGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 16px;
  border: none;
  background: transparent;
}

.controlGroup+.controlGroup {
  border-top: 1px solid var(--border);
}

.controlGroup:last-child {
  padding-bottom: 0;
}

.controlLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.controlHelp {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.controlRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- 7. Form Elements ----------------------------------- */
input[type="text"],
input[type="file"],
select,
button,
textarea {
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  padding: 0 12px;
  min-height: 38px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input[type="text"]:hover,
select:hover {
  border-color: var(--border-md);
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-bdr);
  box-shadow: var(--ring);
}

select {
  cursor: pointer;
}

button {
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .01em;
  background: rgba(255, 255, 255, .06);
  border-color: var(--border);
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

button:hover:not(:disabled) {
  border-color: var(--border-md);
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px);
}

button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

button:disabled,
input:disabled,
select:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Action buttons */
.actionRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.actionRow button {
  width: 100%;
}

#clearBtn {
  grid-column: 1 / -1;
}

#saveBtn,
#saveBackBtn,
#saveNotesCsvBtn,
#loadNotesCsvBtn {
  background: linear-gradient(180deg, rgba(92, 143, 214, .9), rgba(61, 108, 181, .9));
  border-color: rgba(100, 150, 220, .3);
  color: #fff;
}

#addTrendReportsBtn {
  background: linear-gradient(180deg, rgba(36, 198, 187, .3), rgba(20, 140, 130, .3));
  border-color: var(--accent-bdr);
  color: var(--text);
}

/* File picker */
.fileInputNative {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.customFilePicker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
}

.fileTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #f0f6ff, #d8e6f8);
  color: #0f1a2a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: filter .15s, transform .15s;
}

.fileTrigger:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.fileMetaLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fileMetaHint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Toggle switch */
.switchRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
  cursor: pointer;
}

.switchCopy {
  min-width: 0;
}

.switchTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.switchHint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.toggleSwitch {
  flex-shrink: 0;
  position: relative;
}

.toggleInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  width: 48px;
  height: 26px;
}

.toggleTrack {
  display: block;
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: rgba(90, 117, 156, .34);
  border: 1px solid rgba(125, 153, 194, .28);
  transition: background .15s, border-color .15s;
}

.toggleThumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8fbff;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}

.toggleInput:checked+.toggleTrack {
  background: var(--accent);
  border-color: rgba(36, 198, 187, .5);
}

.toggleInput:checked+.toggleTrack .toggleThumb {
  transform: translateX(22px);
}

/* Status strip */
.statusStrip {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.statusEyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.statusHint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}

.status {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

/* --- 8. Viewer Bar / Pills ------------------------------ */
.viewerBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pillValueBubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 18px;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-weight: 820;
}

.viewerBar button.pill {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.viewerBar button.pill:hover:not(:disabled) {
  border-color: var(--border-md);
  background: rgba(255, 255, 255, .1);
  transform: none;
}

.pill.isFresh {
  color: #b8ffe4;
  border-color: rgba(36, 198, 187, .4);
  background: rgba(12, 55, 49, .7);
}

.pill.isStale {
  color: #ffd2ab;
  border-color: rgba(240, 201, 122, .38);
  background: rgba(64, 37, 17, .6);
}

.chartFilterPillGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.chartFilterPill {
  border-color: rgba(92, 143, 214, .3);
  background: linear-gradient(180deg, rgba(59, 96, 154, .55), rgba(33, 58, 94, .6));
  color: #eaf2ff;
}

.chartFilterChip {
  border-color: rgba(92, 143, 214, .3);
  background: linear-gradient(180deg, rgba(45, 76, 128, .6), rgba(31, 53, 87, .65));
  color: #eaf2ff;
}

.viewerBar .spacer {
  margin-left: auto;
}

.viewerBar #viewNav {
  flex: 0 0 100%;
  width: 100%;
  margin-left: 0;
}

/* --- 9. View Nav / Tabs --------------------------------- */
.viewNav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 0px;
  column-gap: 5px;
  row-gap: 5px;
}

.viewSwitch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.viewSwitchBtn {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  width: auto;
}

.viewSwitchBtn:hover:not(:disabled) {
  background: var(--primary-bg);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.viewSwitchBtn.isActive {
  background: linear-gradient(180deg, rgba(92, 143, 214, .9), rgba(61, 108, 181, .9));
  border-color: rgba(100, 150, 220, .3);
  color: #fff;
  box-shadow: 0 4px 14px rgba(61, 108, 181, .28);
}

.viewNavHint {
  font-size: 11px;
  color: var(--text-muted);
  display: none;
}

.viewPage[hidden],
.emptyWorkspaceState[hidden] {
  display: none !important;
}

/* --- 10. Report Header ---------------------------------- */
.reportHeader {
  margin-bottom: 10px;
  padding: 10px 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.reportHeaderDisplayLine {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.reportHeaderTop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
}

.reportHeaderDisplayTitle {
  display: none;
  padding-left: 10px;
  padding-right: 10px;
}

.currentReportInline {
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  opacity: .5;
  white-space: nowrap;
}

.title {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 3px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.meta strong {
  color: var(--text-soft);
}

.reportHeaderControls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.headerBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(61, 108, 181, .24);
}

.themeToggleBtn {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
}

.themeToggleBtn:hover:not(:disabled) {
  border-color: var(--border-md);
  transform: none;
}

/* --- 11. Empty workspace state -------------------------- */
.emptyWorkspaceState {
  margin-bottom: 16px;
  padding: 28px 24px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}

.emptyWorkspaceEyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.emptyWorkspaceTitle {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.03em;
  color: var(--text);
}

.emptyWorkspaceCopy {
  max-width: 700px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

.emptyWorkspaceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.emptyWorkspaceOpenBtn {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: auto;
}

.emptyWorkspaceHint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* --- 12. Patient Records / Accordion ------------------- */
.record {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, #f5f9ff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  margin-bottom: 10px;
}

.recordToggle {
  cursor: pointer;
  user-select: none;
}

.recordToggle:active {
  transform: scale(.999);
}

.recordDetails {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(183, 199, 224, .7);
  background: linear-gradient(180deg, #f5f9fd, #eef4fb);
}

.record.open .recordDetails {
  display: block;
}

/* Bed banner */
.bedBanner {
  padding: 12px 14px;
  background: transparent;
}

.bedBannerRow {
  display: grid;
  grid-template-columns: 110px 1fr;
}

.bedBoxTop {
  border-right: 2px solid #d1dce8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  font-weight: 900;
  font-size: 18px;
  color: #111827;
  background: #f3f6fb;
}

.bedInfoTop {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bedLine1 {
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  text-align: center;
}

.bedLine2,
.bedLine3 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  text-align: center;
}

.toggleHint {
  position: absolute;
  right: 12px;
  top: 12px;
  font-weight: 900;
  font-size: 14px;
  color: #111827;
  opacity: .7;
}

/* Field grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 8px;
}

.field {
  border: 1px solid #d5e0ef;
  border-radius: var(--r-md);
  padding: 8px 10px;
  background: linear-gradient(180deg, #fff, #f7faff);
  min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.label {
  font-size: 10px;
  font-weight: 700;
  color: #52637f;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
  display: block;
}

.value {
  font-size: 12px;
  color: #0b0f17;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.abnormalLabsField .value {
  white-space: normal;
}

.abnormalLabsList {
  columns: 2 280px;
  column-gap: 18px;
}

.abnormalLabsItem {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding-bottom: 3px;
}

@media (min-width: 1700px) {
  .abnormalLabsList {
    columns: 3 260px;
  }
}

@media (max-width: 900px) {
  .abnormalLabsList {
    column-count: 1;
    column-width: auto;
  }
}

.wide-2 {
  grid-column: span 2;
}

.wide-4 {
  grid-column: span 4;
}

.searchHit {
  background: #ffe49a;
  color: #2f1b00;
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: 0 0 0 1px rgba(176, 107, 7, .12);
}

.valueEditor,
textarea.valueEditor {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9d7e8;
  border-radius: var(--r-sm);
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  color: #0b1220;
  background: linear-gradient(180deg, #fff, #f6f9fd);
  min-height: auto;
}

.valueEditor:focus {
  outline: none;
  border-color: #8abfff;
  box-shadow: 0 0 0 3px rgba(92, 143, 214, .15);
}

.valueEditor.valueTextarea {
  min-height: 88px;
  resize: vertical;
}

.pageHead {
  display: none;
}

.page {
  margin-bottom: 12px;
}

.hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* --- 13. Section shared styles ------------------------- */
.assignmentSection,
.bedBoardSection,
.teamBoardSection,
.dashboardSection,
.trendSection {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}

.sectionDivider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* Shared section headers */
.assignmentHeader,
.teamBoardHeader,
.dashboardHeader,
.trendHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Shared kickers */
.assignmentKicker,
.teamBoardKicker,
.dashboardKicker,
.bedBoardLabel,
.boardPanelKicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* Shared section titles */
.assignmentTitle,
.bedBoardTitle,
.teamBoardTitle,
.dashboardTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--text);
}

/* Shared section subtitles */
.assignmentSub,
.teamBoardSub,
.dashboardSub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 640px;
}

/* Summary pills */
.assignmentSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assignmentSummaryPill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.assignmentSummaryPill.isWarn {
  color: #fef3c7;
  border-color: rgba(245, 158, 11, .34);
  background: rgba(120, 53, 15, .28);
}

/* Assignment cards grid */
.assignmentGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}

.assignmentCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  transition: border-color .15s, box-shadow .15s;
}

.assignmentCard.isOccupied {
  border-color: rgba(36, 198, 187, .24);
  background: linear-gradient(180deg, rgba(18, 60, 56, .3), rgba(255, 255, 255, .02));
}

.assignmentCard.isBlocked {
  border-color: rgba(224, 84, 84, .28);
  background: linear-gradient(180deg, rgba(100, 20, 20, .28), rgba(255, 255, 255, .02));
}

.assignmentCard.isVacant {
  border-color: var(--border);
}

.assignmentCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.assignmentIdentity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.assignmentName {
  font-size: 14px;
  font-weight: 760;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}

.assignmentUrn {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .03em;
}

.assignmentBed {
  flex-shrink: 0;
  min-width: 56px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .3);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}

.assignmentStatus {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.assignmentStatus.isOccupied {
  color: #d1fae5;
  background: rgba(17, 94, 89, .24);
  border-color: rgba(36, 198, 187, .28);
}

.assignmentStatus.isBlocked {
  color: #fee2e2;
  background: rgba(120, 30, 30, .3);
  border-color: rgba(224, 84, 84, .3);
}

.assignmentMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.assignmentMetaItem {
  padding: 7px 9px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .2);
}

.assignmentMetaItem.isWide {
  grid-column: 1 / -1;
}

.assignmentMetaLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.assignmentMetaValue {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.assignmentSelect {
  width: 100%;
  min-height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(148, 184, 233, .22);
  background: rgba(255, 255, 255, .94);
  color: #0b1220;
  font-size: 12px;
}

.assignmentSelectLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.assignmentEmpty {
  padding: 24px 16px;
  border: 1px dashed var(--border-md);
  border-radius: var(--r-lg);
  color: var(--text-muted);
  background: rgba(255, 255, 255, .02);
  text-align: center;
  line-height: 1.6;
}

/* Staff panel */
.assignmentStaffPanel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.assignmentStaffToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.assignmentStaffToggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, .04);
  transform: none;
}

.assignmentStaffToggleMeta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.assignmentStaffBody {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.assignmentStaffForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.assignmentStaffChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.assignmentStaffChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.assignmentStaffChip button {
  min-height: 20px;
  width: 20px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assignmentStaffChip button:hover {
  background: rgba(255, 255, 255, .18);
  transform: none;
}

.assignmentStaffHint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- 14. Bed Board ------------------------------------- */
.bedBoardPage {
  min-height: calc(100vh - 200px);
}

.bedBoardSection {
  display: grid;
  grid-template-columns: minmax(0, 80%) minmax(190px, 20%);
  gap: 14px;
  align-items: start;
}

.bedBoardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.bedBoardCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

.bedBoardCard.isOccupied {
  border-color: rgba(36, 198, 187, .2);
  background: linear-gradient(180deg, rgba(18, 56, 52, .96), var(--surface-3));
}

.bedBoardCard.isBlocked {
  border-color: rgba(224, 84, 84, .2);
  background: linear-gradient(180deg, rgba(60, 18, 18, .96), var(--surface-3));
}

.bedBoardCard.isVacant {
  border-color: var(--border);
}

.bedBoardTop {
  width: 100%;
  min-height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: left;
  white-space: normal;
}

.bedBoardTop:hover:not(:disabled) {
  border: none;
  background: transparent;
  transform: none;
}

.bedBoardTop:disabled {
  opacity: 1;
  cursor: default;
}

.bedBoardBedWrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bedBoardBed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--primary-bg), rgba(61, 108, 181, .06));
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .01em;
  text-align: center;
}

.bedBoardGenderBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.bedBoardGenderBadge.isMale {
  color: #55c7ff;
}

.bedBoardGenderBadge.isFemale {
  color: #ff8ac6;
}

.bedBoardGenderBadge.isUnknown {
  color: var(--text-muted);
}

.bedBoardWorkloadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}

.bedBoardWorkloadBadge.isWorkloadLight {
  background: var(--cp-workload-light-soft);
  color: var(--cp-workload-light);
}

.bedBoardWorkloadBadge.isWorkloadModerate {
  background: var(--cp-workload-moderate-soft);
  color: var(--cp-workload-moderate);
}

.bedBoardWorkloadBadge.isWorkloadHeavy {
  background: var(--cp-workload-heavy-soft);
  color: var(--cp-workload-heavy);
}

.bedBoardWorkloadBadge.isWorkloadExtreme {
  background: var(--cp-workload-extreme-soft);
  color: var(--cp-workload-extreme);
}

/* --- 14b. Bed Directory Config ------------------------ */
.bedConfigStandalone {
  min-height: 100vh;
  background: var(--bg);
}

.bedConfigStandalone .wrap {
  max-width: 1180px;
  padding-top: 28px;
}

.bedConfigSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bedConfigHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bedConfigActions,
.bedConfigAddForm,
.bedConfigLoginForm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bedConfigGateCard {
  max-width: 620px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

.bedConfigGateTitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.bedConfigGateCopy,
.bedConfigSummary {
  margin-top: 6px;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 13px;
}

.bedConfigEditor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bedConfigToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bedConfigWardPicker {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bedConfigAddForm input,
.bedConfigLoginForm input,
.bedConfigRow input,
.bedConfigWardPicker input,
.bedConfigWardPicker select {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
}

.bedConfigWardPicker select {
  min-width: min(420px, 88vw);
  text-transform: none;
  font-weight: 700;
}

.bedConfigAddForm input,
.bedConfigLoginForm input {
  min-width: min(260px, 100%);
}

.staffDirectoryControl details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}

.staffDirectoryControl summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  list-style: none;
}

.staffDirectoryControl summary::-webkit-details-marker {
  display: none;
}

.staffDirectoryControl summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}

.staffDirectoryControl details[open] summary::after {
  transform: rotate(225deg);
}

.staffDirectoryControl summary span:last-child {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.staffDirectoryControl details .controlRow,
.staffDirectoryControl details .controlHelp {
  margin: 0 12px 12px;
}

.assignmentStaffSavedForm,
.savedStaffQuickAdd {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  width: 100%;
}

.assignmentStaffSavedSelect {
  width: 100%;
  min-width: 0;
}

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

.staffConfigPanel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 14px;
}

.staffConfigPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.staffConfigPanelHeader h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.staffConfigRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-theme="light"] .staffDirectoryControl details,
body[data-theme="light"] .staffConfigPanel {
  background: rgba(255, 255, 255, .74);
}

.bedConfigList {
  display: grid;
  gap: 8px;
}

.bedConfigRow {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.bedConfigRow.hasDuplicate {
  border-color: rgba(224, 84, 84, .58);
  background: rgba(224, 84, 84, .08);
}

@media (max-width: 720px) {
  .bedConfigHeader {
    flex-direction: column;
  }

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

  .staffConfigGrid,
  .assignmentStaffSavedForm,
  .savedStaffQuickAdd {
    grid-template-columns: 1fr;
  }
}

.bedBoardStatus {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bedBoardStatus.isOccupied {
  color: #d1fae5;
  background: rgba(17, 94, 89, .26);
  border-color: rgba(36, 198, 187, .28);
}

.bedBoardStatus.isBlocked {
  color: #fee2e2;
  background: rgba(127, 29, 29, .34);
  border-color: rgba(224, 84, 84, .3);
}

.bedBoardStatus.isVacant {
  color: var(--text-muted);
}

.bedBoardBody {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bedBoardPatientName {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.bedBoardSecondary {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.bedBoardSecondary.isMuted {
  color: var(--text-muted);
}

.bedBoardFooter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}

.bedBoardFooterLabel {
  display: none;
}

.bedBoardMetaGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.bedBoardField {
  padding: 0;
  border: none;
  background: transparent;
}

.bedBoardLabel {
  display: none;
}

.bedBoardValue {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.bedBoardValueRow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.bedBoardValueText {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bedBoardClinician {
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bedBoardClinician.isMuted {
  color: var(--text-muted);
}

.bedBoardClinician.isDoctor {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  font-family: Georgia, "Times New Roman", serif;
}

.bedBoardClinician.isNurse {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  font-family: Consolas, "Segoe UI", system-ui, sans-serif;
}

.entityDot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--assignment-accent, rgba(255, 255, 255, .3));
}

.bedBoardSelect {
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(10, 15, 19, .72);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

/* Legend */
.bedBoardLegend {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.bedBoardExtraAssignments {
  min-width: 0;
  position: sticky;
  top: 12px;
  align-self: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

.bedBoardExtraHeader {
  margin-bottom: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bedBoardExtraList {
  display: grid;
  gap: 10px;
}

.bedBoardExtraGroup {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.bedBoardExtraGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.bedBoardExtraGroupTitle {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bedBoardExtraGroupMeta {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 780;
}

.bedBoardExtraGroupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
}

.bedBoardExtraItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--assignment-accent-soft, var(--border));
  border-radius: 9px;
  background: linear-gradient(180deg, var(--assignment-accent-bg, rgba(255, 255, 255, .025)), rgba(255, 255, 255, .01));
}

.bedBoardExtraItem.isOpen {
  opacity: .62;
  border-style: dashed;
  background: rgba(255, 255, 255, .018);
}

.bedBoardExtraItem.isAssigned {
  box-shadow: inset 0 0 0 1px var(--assignment-accent-bg, rgba(0, 94, 184, .08));
}

.bedBoardExtraItem.isCharge {
  border-color: rgba(245, 158, 11, .32);
  background: rgba(245, 158, 11, .08);
}

.bedBoardExtraIcon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--assignment-accent, var(--primary));
  background: var(--assignment-accent-bg, rgba(0, 94, 184, .12));
}

.bedBoardExtraIcon svg {
  width: 14px;
  height: 14px;
}

.bedBoardExtraText {
  min-width: 0;
  align-self: center;
}

.bedBoardExtraName {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.bedBoardExtraMeta {
  justify-self: end;
  align-self: center;
  max-width: 100%;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid var(--assignment-accent-soft, var(--border));
  border-radius: 999px;
  background: var(--assignment-accent-bg, rgba(255, 255, 255, .05));
  color: var(--text-soft);
  font-size: 9.5px;
  font-weight: 760;
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: right;
}

.bedBoardExtraMeta.isAssigned {
  color: var(--text);
}

.bedBoardExtraEmpty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.bedBoardClinicianLegendGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.bedBoardClinicianChip {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--assignment-accent-soft, var(--border));
  border-radius: 8px;
  background: var(--assignment-accent-bg, rgba(255, 255, 255, .04));
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 760;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.bedBoardClinicianChip span:last-child {
  min-width: 0;
  display: block;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bedBoardClinicianChip .entityDot {
  flex: 0 0 auto;
  margin-top: 4px;
}

.bedBoardClinicianChip.isActive {
  color: var(--text);
  border-color: var(--assignment-accent, var(--accent-bdr));
  box-shadow: 0 0 0 2px var(--assignment-accent-bg, rgba(0, 94, 184, .14));
}

.bedBoardClinicianLegendEmpty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 11px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.legendGroup {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

.legendTitle {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}

.legendItems {
  --legend-col-min: 210px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--legend-col-min)), 1fr));
  gap: 6px;
}

.legendItem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}

.legendItem.isInteractive {
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}

.legendItem.isInteractive:hover {
  border-color: var(--border-md);
  background: var(--surface-2);
}

.legendItem.isInteractive:focus-visible {
  outline: 2px solid var(--accent-bdr);
  outline-offset: 1px;
}

.legendItem.isInteractive.isActive {
  border-color: var(--accent-bdr);
  background: var(--accent-bg);
}

.legendItem.isInteractive.isMuted {
  opacity: .45;
}

/* --- 15. Team Board ------------------------------------ */
.teamBoardSection {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}

#nurseBoardPage>.teamBoardSection {
  margin-bottom: 0;
  padding: 16px 18px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#nurseBoardPage>.teamBoardSection+.teamBoardSection {
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.teamBoardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.teamBoardCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

.teamBoardNameRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.teamBoardName {
  min-width: 0;
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.teamBoardMeta {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.teamBoardBeds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teamBoardBedChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  min-width: 56px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-3), rgba(255, 255, 255, .015));
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.teamBoardEmpty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}

.teamBoardScope {
  display: none;
}

/* --- 16. Nurse Drag Board ------------------------------ */
.nurseDragBoard {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.nurseAssignmentBoard {
  grid-template-columns: minmax(240px, .85fr) minmax(460px, 2.25fr) minmax(300px, 380px);
}

.nurseDragBoard.isSidebarCollapsed {
  grid-template-columns: minmax(460px, 1fr) minmax(300px, 380px);
}

.nurseAssignmentBoard.isRolePanelCollapsed {
  grid-template-columns: minmax(240px, .95fr) minmax(460px, 2.35fr);
}

.nurseAssignmentBoard.isSidebarCollapsed.isRolePanelCollapsed {
  grid-template-columns: minmax(0, 1fr);
}

.nurseDragSidebar,
.nurseDragMain {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
  box-shadow: var(--shadow-sm);
}

.nurseDragSidebar {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

.nurseDragSidebarHeader,
.nurseDragMainHeader {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.nurseDragSidebarHeader {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nurseDragSidebarHeaderTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nurseDragSidebarHeading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

#nurseBoardPage .teamBoardHeader {
  padding-bottom: 12px;
  align-items: end;
}

#nurseBoardPage .teamBoardKicker {
  margin-bottom: 2px;
  letter-spacing: .14em;
}

#nurseBoardPage .teamBoardTitle {
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.03em;
}

#nurseBoardPage .teamBoardSub {
  max-width: 640px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
}

.nurseDragTabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.nurseDragTab {
  flex: 1;
  min-height: 30px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}

.nurseDragTab.isActive {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff;
}

.nurseDragMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.nurseDragMeta.isSoloAction {
  justify-content: flex-end;
}

.nurseDragSelectionMeta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 94, 184, .24);
  background: rgba(0, 94, 184, .12);
  color: #9ec7fa;
  font-size: 10px;
  font-weight: 700;
}

.nurseDragRemaining {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 94, 184, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
}

.nurseDragClear {
  border: none;
  background: none;
  color: var(--secondary);
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
  min-height: auto;
  width: auto;
}

.nurseDragList {
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nurseDragZone {
  margin-top: 8px;
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nurseDragZone:first-child {
  margin-top: 0;
}

.nurseDragRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  cursor: grab;
  user-select: none;
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}

.nurseDragRow>* {
  pointer-events: none;
}

.nurseDragRow:hover {
  border-color: rgba(0, 94, 184, .3);
  background: rgba(0, 94, 184, .08);
  box-shadow: 0 10px 18px rgba(3, 10, 22, .18);
}

.nurseDragRow.isDragging {
  opacity: .45;
  transform: scale(1.02);
}

.nurseDragRow.isSelected {
  border-color: rgba(0, 94, 184, .38);
  background: rgba(0, 94, 184, .1);
  box-shadow: 0 0 0 3px rgba(0, 94, 184, .12);
}

.nurseDragRow.isVacant {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, .006));
}

.nurseDragRow.isBlocked {
  opacity: .4;
  cursor: not-allowed;
}

.nurseDragHandle {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.nurseDragSelect {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--primary);
  pointer-events: auto;
  cursor: pointer;
}

.nurseDragBed {
  min-width: 32px;
  font-size: 12px;
  font-weight: 760;
  color: var(--text);
}

.nurseDragInfo {
  min-width: 0;
  flex: 1;
}

.nurseDragPrimary {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nurseDragSecondary {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

.nurseDragBadge {
  flex-shrink: 0;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.nurseDragBadge.isOccupied {
  background: rgba(0, 94, 184, .14);
  color: #9ec7fa;
}

.nurseDragBadge.isVacant {
  background: rgba(255, 255, 255, .06);
  color: var(--text-muted);
}

.nurseDragBadge.isBlocked {
  background: rgba(217, 45, 32, .16);
  color: #ffb0a9;
}

.nurseDragEmpty {
  padding: 20px 14px;
  border: 1px dashed var(--border-md);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  line-height: 1.5;
  background: rgba(255, 255, 255, .02);
}

.nurseDragMainHeaderTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nurseDragMainTitle {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--text);
}

.nurseDragMainMeta {
  font-size: 11px;
  color: var(--text-soft);
}

.nurseDragActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.nurseDragActionIcon {
  width: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}

.nurseDragActionIcon svg {
  width: 20px;
  height: 20px;
}

.nurseDragActionIcon.isActive {
  border-color: rgba(0, 94, 184, .34);
  background: rgba(0, 94, 184, .13);
  color: #9ec7fa;
}

.nurseDragActionIcon:hover {
  border-color: rgba(0, 94, 184, .34);
  background: rgba(0, 94, 184, .1);
  transform: none;
}

.nurseDragActionBtn {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  transition: background .14s, border-color .14s;
}

.nurseDragActionBtn:hover {
  background: rgba(0, 94, 184, .1);
  border-color: rgba(0, 94, 184, .24);
  transform: none;
}

.nurseDragAddPanel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}

.nurseDragAddForm {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.nurseDragAddInput {
  flex: 1 1 200px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 12px;
}

.nurseDragAddHint {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
}

.nurseChargeBoard {
  padding: 12px 14px 0;
}

.nurseChargeSection {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .07), rgba(255, 255, 255, .012)),
    linear-gradient(135deg, rgba(245, 158, 11, .08), transparent 70%);
}

.nurseChargeSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nurseChargeSectionTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nurseChargeSectionMeta {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.nurseChargeAddBtn {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 9px;
  background: rgba(245, 158, 11, .11);
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.nurseChargeAddBtn svg {
  width: 16px;
  height: 16px;
}

.nurseChargeLayout {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(240px, 1.8fr);
  gap: 10px;
  align-items: start;
}

.nurseChargeRoster {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px dashed rgba(245, 158, 11, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
}

.nurseChargeRosterTitle {
  width: 100%;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nurseChargeStaffChip {
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--assignment-accent-soft, rgba(245, 158, 11, .2));
  border-radius: 999px;
  background: var(--assignment-accent-bg, rgba(255, 255, 255, .035));
  color: var(--text);
  font-size: 10px;
  font-weight: 780;
  cursor: grab;
}

.nurseChargeStaffChip.isDragging {
  opacity: .5;
}

.nurseChargeStaffName {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.nurseChargeFunctionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.nurseChargeFunction {
  min-width: 0;
  min-height: 88px;
  padding: 9px;
  border: 1px dashed var(--assignment-accent-soft, rgba(245, 158, 11, .24));
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), var(--assignment-accent-bg, rgba(255, 255, 255, .01)));
  transition: border-color .14s, background .14s, box-shadow .14s;
}

.nurseChargeFunction.isAssigned {
  border-style: solid;
  border-color: var(--assignment-accent-soft, rgba(245, 158, 11, .32));
  background: linear-gradient(180deg, var(--assignment-accent-bg, rgba(245, 158, 11, .11)), rgba(255, 255, 255, .012));
}

.nurseChargeFunction.isDropHover {
  border-color: rgba(245, 158, 11, .5);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}

.nurseChargeFunctionHeader {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nurseChargeFunctionBody {
  margin-top: 8px;
  min-width: 0;
}

.nurseChargeAssignedStaff {
  max-width: 100%;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--assignment-accent-soft, rgba(245, 158, 11, .28));
  border-radius: 10px;
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(245, 158, 11, .16)), var(--assignment-accent-bg, rgba(245, 158, 11, .08)));
  color: var(--text);
  font-size: 11px;
  font-weight: 790;
}

.nurseChargeAssignedStaff > span:not(.entityDot) {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.nurseChargeBoxHeader {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.nurseChargeBoxName {
  min-width: 0;
  flex: 1;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nurseChargeBoxBadge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .24);
  color: #fbbf24;
  background: rgba(245, 158, 11, .1);
  font-size: 9px;
  font-weight: 820;
}

.nurseChargeBoxBody {
  margin-top: 7px;
  min-width: 0;
}

.nurseChargeAssignmentChip {
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--assignment-accent-soft, rgba(245, 158, 11, .28));
  border-radius: 10px;
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(245, 158, 11, .16)), var(--assignment-accent-bg, rgba(245, 158, 11, .08)));
  color: var(--text);
  font-size: 11px;
  font-weight: 790;
}

.nurseChargeAssignmentIcon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}

.nurseChargeAssignmentIcon svg {
  width: 15px;
  height: 15px;
}

.nurseChargeAssignmentLabel {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.nurseChargeDropHint {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(245, 158, 11, .24);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 760;
}

.nurseChargeCard {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .1), rgba(255, 255, 255, .015)),
    linear-gradient(135deg, var(--assignment-accent-bg, rgba(245, 158, 11, .12)), transparent 76%);
}

.nurseChargeLabel,
.nurseChargeNurse {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nurseChargeIcon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fbbf24;
  background: rgba(245, 158, 11, .15);
  flex-shrink: 0;
}

.nurseChargeIcon svg {
  width: 13px;
  height: 13px;
}

.nurseChargeTitle {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.nurseChargeBody {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.nurseChargeNurse {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--assignment-accent-soft, rgba(245, 158, 11, .24));
  border-radius: 999px;
  background: var(--assignment-accent-bg, rgba(245, 158, 11, .12));
  color: var(--text);
  font-size: 11px;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.nurseChargeClear {
  min-height: 24px;
  width: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.nurseChargeClear svg {
  width: 13px;
  height: 13px;
}

.nurseChargeEmpty {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.nurseDragGrid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  align-items: start;
}

.nurseDropBox {
  min-width: 0;
  min-height: 170px;
  padding: 12px;
  border: 1px dashed var(--assignment-accent-soft, rgba(255, 255, 255, .18));
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .012)),
    linear-gradient(135deg, var(--assignment-accent-bg, rgba(0, 94, 184, .08)), transparent 72%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}

.nurseDropBox.isClickAssignReady {
  cursor: pointer;
}

.nurseDropBox.isDropHover {
  border-color: rgba(0, 94, 184, .42);
  background: rgba(0, 94, 184, .08);
  box-shadow: 0 0 0 3px rgba(0, 94, 184, .12);
}

.nurseDropHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nurseDropName {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 720;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nurseDropCount {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--assignment-accent-soft, rgba(255, 255, 255, .12));
  background: var(--assignment-accent-bg, rgba(255, 255, 255, .05));
}

.nurseDropRemove {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 24px;
  width: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
}

.nurseDropRemove:disabled {
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
}

.nurseDropRemove svg {
  width: 14px;
  height: 14px;
}

.nurseDropBeds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 74px;
  align-content: flex-start;
  flex: 1 1 auto;
}

.nurseDropChip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--assignment-accent-soft, rgba(255, 255, 255, .12));
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .18)), var(--assignment-accent-bg, rgba(0, 94, 184, .08)));
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: grab;
}

.nurseDropChip.isSelected {
  box-shadow: 0 0 0 3px var(--assignment-accent-bg, rgba(0, 94, 184, .12));
  border-color: var(--assignment-accent, rgba(158, 199, 250, .52));
}

.nurseDropChip input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--primary);
  pointer-events: auto;
  cursor: pointer;
}

.nurseDropChip button {
  border: none;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  min-height: 20px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.nurseDropChip button svg {
  width: 12px;
  height: 12px;
}

.nurseDropHint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  height: 100%;
  padding: 0 14px;
  flex: 1 1 auto;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 14px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .006)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0, rgba(255, 255, 255, .02) 8px, transparent 8px, transparent 16px);
}

.nurseDropDivider {
  height: 2px;
  margin: 3px 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .32), transparent);
}

.nurseDropRoles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 42px;
  align-content: flex-start;
}

.nurseDropRoleChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid var(--assignment-accent-soft, rgba(255, 255, 255, .12));
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .16)), var(--assignment-accent-bg, rgba(0, 94, 184, .07)));
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  cursor: grab;
}

.nurseDropRoleIcon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--assignment-accent, var(--primary));
}

.nurseDropRoleIcon svg {
  width: 17px;
  height: 17px;
}

.nurseDropRoleLabel {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.nurseDropRoleChip button {
  border: none;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  min-height: 22px;
  width: 22px;
  border-radius: 999px;
}

.nurseDropRoleChip button svg {
  width: 13px;
  height: 13px;
}

.nurseDropRoleHint {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.nurseRoleBoard {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.nurseAssignmentBoard .nurseRoleSection {
  min-width: 0;
  align-self: stretch;
}

.nurseAssignmentBoard .nurseRoleMain {
  min-height: 420px;
  overflow: hidden;
}

.nurseAssignmentBoard .nurseRoleGrid {
  padding: 9px;
  grid-template-columns: 1fr;
  max-height: calc(100vh - 310px);
  overflow: auto;
}

.nurseAssignmentBoard .nurseRoleCards {
  grid-template-columns: 1fr;
}

.nurseAssignmentBoard .nurseRoleGroup {
  border-radius: 12px;
}

.nurseAssignmentBoard .nurseRoleGroupHeader {
  padding: 6px 8px;
}

.nurseAssignmentBoard .nurseRoleCards {
  padding: 6px;
  gap: 5px;
}

.nurseAssignmentBoard .nurseRoleCard {
  min-height: 0;
  padding: 8px 9px;
  border-radius: 999px;
  display: block;
}

.nurseAssignmentBoard .nurseRoleCardTop {
  align-items: center;
  gap: 8px;
}

.nurseAssignmentBoard .nurseRoleIcon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
}

.nurseAssignmentBoard .nurseRoleIcon svg {
  width: 16px;
  height: 16px;
}

.nurseAssignmentBoard .nurseRoleName {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  font-size: 11.5px;
}

.nurseAssignmentBoard .nurseRoleClear:disabled,
.nurseAssignmentBoard .nurseRoleBody:empty {
  display: none;
}

.nurseRoleGroupDone {
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.nurseRoleBoard.isRosterCollapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.nurseRoleSidebar,
.nurseRoleMain {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
  box-shadow: var(--shadow-sm);
}

.nurseRoleSidebar {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

.nurseRoleSidebarHeader,
.nurseRoleMainHeader {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.nurseRoleSidebarHeader {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nurseRoleSidebarHeaderTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nurseDragSidebarToggle,
.nurseRoleSidebarToggle {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  width: auto;
  transition: background .14s, border-color .14s, color .14s;
}

.nurseDragSidebarToggle:hover,
.nurseRoleSidebarToggle:hover {
  background: rgba(0, 94, 184, .1);
  border-color: rgba(0, 94, 184, .28);
  transform: none;
}

.nurseRoleSidebarMeta {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
}

.nurseRoleHeaderMeta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 94, 184, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
}

.nurseRoleRoster {
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nurseRoleRosterRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--assignment-accent-soft, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    linear-gradient(135deg, var(--assignment-accent-bg, rgba(0, 94, 184, .08)), transparent 72%);
  cursor: grab;
  user-select: none;
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}

.nurseRoleRosterRow:hover {
  border-color: var(--assignment-accent, rgba(0, 94, 184, .3));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014)),
    linear-gradient(135deg, var(--assignment-accent-soft, rgba(0, 94, 184, .18)), transparent 74%);
  box-shadow: 0 10px 18px rgba(3, 10, 22, .18);
}

.nurseRoleRosterRow.isSelected {
  border-color: var(--assignment-accent, rgba(0, 94, 184, .42));
  box-shadow: 0 0 0 3px var(--assignment-accent-bg, rgba(0, 94, 184, .16));
}

.nurseRoleRosterRow.isDragging {
  opacity: .45;
  transform: scale(1.02);
}

.nurseRoleRosterInfo {
  min-width: 0;
  flex: 1;
}

.nurseRoleRosterName {
  font-size: 13px;
  font-weight: 760;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.nurseRoleRosterMetaLine {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.nurseRoleRosterPills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nurseRolePill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--assignment-accent-soft, rgba(0, 94, 184, .16));
  background: var(--assignment-accent-bg, rgba(255, 255, 255, .05));
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
}

.nurseRoleGrid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
}

.nurseRoleGroup {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .012));
  overflow: hidden;
}

.nurseRoleGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--border);
}

.nurseRoleGroupTitle {
  font-size: 11px;
  font-weight: 760;
  color: var(--text);
}

.nurseRoleGroupMeta {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nurseRoleEditBtn {
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  border-radius: 7px;
  padding: 3px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .14s, background .14s, border-color .14s;
  flex-shrink: 0;
  margin-left: auto;
}

.nurseRoleEditBtn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border-color: var(--border);
}

.nurseRoleEditBtn.isActive {
  color: var(--primary, #5b9cf6);
  background: rgba(0, 94, 184, .12);
  border-color: rgba(0, 94, 184, .28);
}

.nurseRoleCollapseBtn {
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .14s, background .14s;
  flex-shrink: 0;
}

.nurseRoleCollapseBtn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

.nurseRoleCollapseBtn svg {
  transition: transform .18s;
}

.nurseRoleGroup.isCollapsed .nurseRoleCollapseBtn svg {
  transform: rotate(-90deg);
}

.nurseRoleGroup.isCollapsed .nurseRoleCards,
.nurseRoleGroup.isCollapsed .nurseRoleGroupActions {
  display: none;
}

.nurseRoleGroupActions {
  padding: 6px 8px 0;
}

.nurseRoleAddForm {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nurseRoleAddInput {
  flex: 1 1 150px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 12px;
}

.nurseRoleAddInput::placeholder {
  color: var(--text-muted);
}

.nurseRoleCards {
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 6px;
}

.nurseRoleGroup.isSingle .nurseRoleCards {
  grid-template-columns: minmax(138px, 1fr);
}

.nurseRoleCard {
  min-width: 0;
  min-height: 82px;
  padding: 8px 9px;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012));
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}

.nurseRoleCard.isClickAssignReady {
  cursor: pointer;
}

.nurseRoleCard.isAssigned {
  border-style: solid;
  border-color: var(--assignment-accent-soft, rgba(255, 255, 255, .14));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .014)),
    linear-gradient(135deg, var(--assignment-accent-bg, rgba(0, 94, 184, .16)), transparent 74%),
    linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .18)), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 20px rgba(3, 10, 22, .12);
}

.nurseRoleCard.isDropHover {
  border-color: rgba(0, 94, 184, .42);
  background: rgba(0, 94, 184, .08);
  box-shadow: 0 0 0 3px rgba(0, 94, 184, .12);
}

.nurseRoleCardTop {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.nurseRoleIcon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--assignment-accent-soft, rgba(0, 94, 184, .18));
  background: var(--assignment-accent-bg, rgba(0, 94, 184, .12));
  color: var(--assignment-accent, var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nurseRoleIcon svg {
  width: 13px;
  height: 13px;
}

.nurseRoleText {
  min-width: 0;
  flex: 1;
}

.nurseRoleName {
  font-size: 12px;
  font-weight: 760;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nurseRoleClear {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  width: auto;
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nurseRoleClear:disabled {
  opacity: .45;
  cursor: default;
}

.nurseRoleBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nurseRoleAssigned {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nurseRoleAssignedChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--assignment-accent-soft, rgba(255, 255, 255, .14));
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .18)), var(--assignment-accent-bg, rgba(0, 94, 184, .08)));
  color: var(--text);
  font-size: 10px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.nurseRoleAssignedMeta {
  font-size: 9px;
  color: var(--text-muted);
}

.nurseRoleBoard.isRosterCollapsed .nurseRoleSidebar {
  min-height: 0;
}

.nurseRoleBoard.isRosterCollapsed .nurseRoleSidebarHeader {
  padding: 12px 10px;
  align-items: center;
}

.nurseRoleBoard.isRosterCollapsed .nurseRoleSidebarHeaderTop {
  flex-direction: column;
  align-items: center;
}

.nurseRoleBoard.isRosterCollapsed .boardPanelKicker {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .16em;
}

.nurseRoleBoard.isRosterCollapsed .nurseRoleSidebarMeta,
.nurseRoleBoard.isRosterCollapsed .nurseRoleRoster {
  display: none;
}

.nurseDragBoard.isSidebarCollapsed .nurseDragSidebar {
  display: none;
}

.nurseDragBoard.isRolePanelCollapsed .nurseRoleSection {
  display: none;
}

.nurseDragBoard.isSidebarCollapsed .nurseDropChip input {
  display: none;
}

.nurseDragBoard.isSidebarCollapsed .nurseDropChip button {
  display: none;
}

.nurseDragBoard.isRolePanelCollapsed .nurseDropRoleChip button,
.nurseDragBoard.isRolePanelCollapsed .nurseChargeClear {
  display: none;
}

.nurseDragBoard.isRolePanelCollapsed .nurseDropRoleChip {
  padding-right: 10px;
}

.nurseDragBoard.isSidebarCollapsed .nurseDragTabs,
.nurseDragBoard.isSidebarCollapsed .nurseDragMeta,
.nurseDragBoard.isSidebarCollapsed .nurseDragList {
  display: none;
}

.nurseRoleEmpty {
  padding: 20px 14px;
  border: 1px dashed var(--border-md);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  line-height: 1.5;
  background: rgba(255, 255, 255, .02);
}

/* Patient hover card */
.patientHoverCard {
  position: fixed;
  z-index: 90;
  width: min(300px, calc(100vw - 20px));
  padding: 12px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  background: rgba(9, 14, 19, .97);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .38);
  color: var(--text);
  pointer-events: none;
}

.patientHoverCard[hidden] {
  display: none;
}

.patientHoverCardTitle {
  font-size: 12px;
  font-weight: 760;
  color: var(--text);
}

.patientHoverCardMeta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.patientHoverCardGrid {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.patientHoverCardItem {
  display: grid;
  gap: 2px;
}

.patientHoverCardLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.patientHoverCardValue {
  font-size: 10px;
  color: var(--text-soft);
  line-height: 1.4;
}

/* --- 17. Dashboard ------------------------------------- */
.dashboardHeader .dashboardHeaderSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 200px;
}

.dashboardPresetBar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.dashboardPresetBtn {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  transition: background .14s, border-color .14s;
}

.dashboardPresetBtn:hover {
  background: rgba(255, 255, 255, .08);
  transform: none;
}

.dashboardPresetBtn.isActive {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  border-color: transparent;
  color: #fff;
}

.dashboardScope,
.trendScope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .5);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboardGrid,
.trendChartGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dashCard {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  box-shadow: var(--shadow-sm);
}

.dashCard.wide {
  grid-column: span 6;
}

.dashCard.hero {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head head" "value meta";
  align-items: end;
  gap: 10px 14px;
  background: linear-gradient(180deg, rgba(28, 45, 75, .96), rgba(15, 22, 38, .99));
  border-color: rgba(92, 143, 214, .22);
}

.dashCard.hero>.dashHead {
  grid-area: head;
  margin-bottom: 0;
}

.dashCard.hero>.dashCountValue {
  grid-area: value;
  align-self: end;
  font-size: 48px;
  line-height: .9;
  letter-spacing: -.05em;
}

.dashCard.hero>.dashCountMeta {
  grid-area: meta;
  align-self: end;
  justify-self: end;
  max-width: 220px;
  text-align: right;
}

.dashHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dashEyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.dashTitle {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--text);
}

.dashHint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.dashCountValue {
  color: var(--text);
  font-size: 42px;
  font-weight: 820;
  letter-spacing: -.04em;
  line-height: 1;
}

.dashCountMeta {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

.dashStatRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashStat {
  flex: 1 1 100px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .38);
}

.dashStatLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.dashStatValue {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--text);
}

.dashQualityRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashQualityBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .3);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dashQualityBadgeValue {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.dashBars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashBarRow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(100px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.dashBarRow.isInteractive {
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
}

.dashBarRow.isInteractive:hover {
  background: rgba(92, 143, 214, .1);
}

.dashBarRow.isInteractive.isActive {
  background: rgba(61, 108, 181, .18);
  box-shadow: inset 0 0 0 1px rgba(92, 143, 214, .2);
}

.dashBarLabel {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashBarTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(76, 101, 137, .3);
}

.dashBarFill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), rgba(141, 215, 255, .9));
  min-width: 2px;
  filter: saturate(1.1);
}

.dashBarValue {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
}

.dashNote {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.dashEmpty {
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border);
  background: rgba(8, 14, 24, .2);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

/* --- 18. Trends ---------------------------------------- */
/* .trendSection — no additional rules needed beyond shared section styles */

.trendHeader .trendHeaderSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 200px;
}

.trendSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.trendSummaryCard {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  box-shadow: var(--shadow-sm);
}

.trendSummaryLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.trendSummaryValue {
  font-size: 24px;
  font-weight: 790;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--text);
}

.trendSummaryMeta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.trendCard {
  grid-column: span 6;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head current" "delta current" "chart chart" "coverage coverage";
  align-items: start;
  gap: 10px 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  box-shadow: var(--shadow-sm);
}

.trendCardHeader {
  grid-area: head;
}

.trendCardTitle {
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--text);
}

.trendCardHint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

.trendCurrent {
  grid-area: current;
  min-width: 100px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.trendCurrentValue {
  font-size: 34px;
  font-weight: 810;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--text);
}

.trendCurrentMeta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.trendDelta {
  grid-area: delta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .3);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: max-content;
}

.trendDelta.isUp {
  color: #d6fbe2;
  border-color: rgba(74, 222, 128, .24);
  background: rgba(22, 101, 52, .2);
}

.trendDelta.isDown {
  color: #ffd5d5;
  border-color: rgba(224, 84, 84, .24);
  background: rgba(120, 30, 30, .2);
}

.trendChartBox {
  grid-area: chart;
  padding: 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, .3);
}

.trendChartSvg {
  display: block;
  width: 100%;
  height: auto;
}

.trendGridLine {
  stroke: rgba(148, 163, 184, .16);
  stroke-width: 1;
}

.trendAxisLine {
  stroke: rgba(148, 163, 184, .28);
  stroke-width: 1.2;
}

.trendSeriesLine {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trendSeriesDot {
  fill: #8fe3d2;
  stroke: #06202a;
  stroke-width: 2;
}

.trendAxisLabel {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding-top: 5px;
  padding-bottom: 5px;
}

text {
  overflow: hidden;
  font-family: "SF Compact Display", sans-serif;
}

.trendValueLabel {
  fill: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.trendCoverage {
  grid-area: coverage;
  font-size: 11px;
  color: var(--text-muted);
}

.trendTableWrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(8, 14, 24, .26);
}

.trendTable {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

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

.trendTable th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

body[data-theme="light"] .trendTable th {
  background: rgba(255, 255, 255, 0.8);
}

.trendTable td {
  color: var(--text-soft);
}

.trendTable tbody tr:last-child td {
  border-bottom: none;
}

.trendTableMeta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* --- 19. Debug / Footer -------------------------------- */
.appFooter {
  margin-top: 14px;
}

.debugPanel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}

.debugPanel summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}

.debugPanel[open] summary {
  border-bottom: 1px solid var(--border);
}

.debugPanel pre {
  margin: 0;
  padding: 10px;
  background: #111827;
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
  font-size: 11px;
}

/* Theme toggle button */
.themeToggleBtn-v3 {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}

/* =========================================================
   20. LIGHT THEME
   ========================================================= */
body[data-theme="light"] {
  --bg: #eaf0f9;
  --surface: #f8fbfe;
  --surface-2: #f1f5fb;
  --surface-3: #e6edf7;
  --border: rgba(0, 94, 184, .14);
  --border-md: rgba(0, 94, 184, .24);
  --text: #101828;
  --text-soft: #475467;
  --text-muted: #6b7b93;
  --accent-bg: rgba(0, 94, 184, .1);
  --accent-bdr: rgba(0, 94, 184, .22);
  --primary-bg: rgba(0, 94, 184, .08);
  --secondary-bg: rgba(71, 84, 103, .08);
  --shadow: 0 18px 36px rgba(27, 59, 102, .1);
  --shadow-sm: 0 8px 16px rgba(27, 59, 102, .08);
  background: linear-gradient(180deg, #eef3fb, #e3ebf7);
  color: var(--text);
}

body[data-theme="light"] .settingsPanel,
body[data-theme="light"] .nurseDragSidebar,
body[data-theme="light"] .nurseDragMain,
body[data-theme="light"] .nurseDropBox,
body[data-theme="light"] .patientHoverCard,
body[data-theme="light"] .legendGroup,
body[data-theme="light"] .teamBoardCard,
body[data-theme="light"] .viewerBar,
body[data-theme="light"] .viewSwitch,
body[data-theme="light"] .reportHeader,
body[data-theme="light"] .assignmentSection,
body[data-theme="light"] .bedBoardSection,
body[data-theme="light"] .teamBoardSection,
body[data-theme="light"] .dashboardSection,
body[data-theme="light"] .trendSection,
body[data-theme="light"] .assignmentCard,
body[data-theme="light"] .bedBoardCard,
body[data-theme="light"] .nurseDragRow,
body[data-theme="light"] .emptyWorkspaceState {
  background: #fff;
  color: var(--text);
}

body[data-theme="light"] .record {
  background: linear-gradient(180deg, #fff, #f4f8ff);
  border-color: rgba(90, 117, 156, .16);
}

body[data-theme="light"] .recordDetails {
  background: linear-gradient(180deg, #f5f9fd, #ecf3fb);
  border-color: rgba(183, 199, 224, .7);
}

body[data-theme="light"] .field {
  background: linear-gradient(180deg, #fff, #f5f9ff);
  border-color: #d5e0ef;
}

body[data-theme="light"] .label {
  color: #52637f;
}

body[data-theme="light"] .value,
body[data-theme="light"] .bedLine1,
body[data-theme="light"] .bedLine2,
body[data-theme="light"] .bedLine3 {
  color: #0b0f17;
}

body[data-theme="light"] .valueEditor {
  background: linear-gradient(180deg, #fff, #f6f9fd);
  border-color: #c9d7e8;
  color: #0b1220;
}

body[data-theme="light"] .headerBadge,
body[data-theme="light"] .themeToggleBtn,
body[data-theme="light"] .viewSwitchBtn.isActive,
body[data-theme="light"] .dashboardPresetBtn.isActive,
body[data-theme="light"] .nurseDragActionBtn {
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body[data-theme="light"] #nurseBoardPage .teamBoardSection,
body[data-theme="light"] .nurseDragSidebar,
body[data-theme="light"] .nurseDragMain {
  background: linear-gradient(180deg, #ffffff, #f7f9ff) !important;
  border-color: rgba(0, 94, 184, .12) !important;
}

body[data-theme="light"] .nurseDragRow {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border-color: rgba(0, 94, 184, .12) !important;
}

body[data-theme="light"] .nurseDragRow:hover,
body[data-theme="light"] .nurseDragRow.isSelected {
  background: rgba(0, 94, 184, .06) !important;
  border-color: rgba(0, 94, 184, .24) !important;
}

body[data-theme="light"] .nurseDragRow.isVacant {
  border-style: dashed;
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
}

body[data-theme="light"] .nurseDropBox {
  background:
    linear-gradient(180deg, #ffffff, #f9fbff),
    linear-gradient(135deg, var(--assignment-accent-bg, rgba(0, 94, 184, .08)), transparent 74%) !important;
  border-color: var(--assignment-accent-soft, rgba(71, 84, 103, .26)) !important;
}

body[data-theme="light"] .nurseDropBox.isDropHover {
  background: rgba(0, 94, 184, .05) !important;
  border-color: rgba(0, 94, 184, .38) !important;
}

body[data-theme="light"] .nurseDropHint,
body[data-theme="light"] .nurseDropRoleHint,
body[data-theme="light"] .nurseDragEmpty,
body[data-theme="light"] .teamBoardEmpty {
  background: #f8faff !important;
  border-color: rgba(71, 84, 103, .22) !important;
}

body[data-theme="light"] .nurseDropChip {
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .14)), var(--assignment-accent-bg, rgba(0, 94, 184, .06))) !important;
  border-color: var(--assignment-accent-soft, rgba(0, 94, 184, .16)) !important;
}

body[data-theme="light"] .nurseDropRoleChip {
  background: linear-gradient(180deg, var(--assignment-accent-soft, rgba(0, 94, 184, .12)), var(--assignment-accent-bg, rgba(0, 94, 184, .05))) !important;
  border-color: var(--assignment-accent-soft, rgba(0, 94, 184, .15)) !important;
}

body[data-theme="light"] .bedBoardExtraAssignments,
body[data-theme="light"] .bedBoardExtraGroup,
body[data-theme="light"] .bedBoardExtraItem,
body[data-theme="light"] .nurseChargeSection,
body[data-theme="light"] .nurseChargeRoster,
body[data-theme="light"] .nurseChargeFunction,
body[data-theme="light"] .nurseRoleGroupDone {
  background: #f8faff !important;
  border-color: rgba(71, 84, 103, .18) !important;
}

body[data-theme="light"] .nurseDragClear {
  color: #475467 !important;
}

body[data-theme="light"] .nurseDragRemaining {
  background: rgba(71, 84, 103, .08) !important;
  border-color: rgba(71, 84, 103, .16) !important;
  color: #475467 !important;
}

body[data-theme="light"] .bedBoardBed {
  background: linear-gradient(180deg, #f5f9ff, #dde9f8);
  border-color: rgba(90, 117, 156, .18);
  color: #254678;
}

body[data-theme="light"] .bedBoardGenderBadge {
  color: #5b7190 !important;
}

body[data-theme="light"] .bedBoardGenderBadge.isMale {
  color: #0f73b7 !important;
}

body[data-theme="light"] .bedBoardGenderBadge.isFemale {
  color: #c14486 !important;
}

body[data-theme="light"] .bedBoardCard {
  background: linear-gradient(180deg, #ffffff, #f6faff) !important;
  border-color: #d6e4f3 !important;
  box-shadow: 0 8px 20px rgba(27, 59, 102, .08) !important;
}

body[data-theme="light"] .bedBoardCard.isOccupied {
  background: linear-gradient(180deg, #ffffff, #eefaf7) !important;
  border-color: #9ad9cb !important;
  box-shadow: inset 0 0 0 1px rgba(28, 124, 102, .08), 0 8px 20px rgba(27, 59, 102, .08) !important;
}

body[data-theme="light"] .bedBoardCard.isBlocked {
  background: linear-gradient(180deg, #ffffff, #fff2f2) !important;
  border-color: #efb5b5 !important;
  box-shadow: inset 0 0 0 1px rgba(186, 51, 51, .08), 0 8px 20px rgba(27, 59, 102, .08) !important;
}

body[data-theme="light"] .bedBoardPatientName {
  color: #0f2747 !important;
}

body[data-theme="light"] .bedBoardSecondary {
  color: #42607e !important;
}

body[data-theme="light"] .bedBoardSecondary.isMuted {
  color: #5f7590 !important;
}

body[data-theme="light"] .bedBoardFooterLabel {
  color: #5b7190 !important;
}

body[data-theme="light"] .bedBoardValueRow {
  background: transparent !important;
  border: none !important;
}

body[data-theme="light"] .bedBoardClinician.isDoctor {
  color: #4f6783 !important;
}

body[data-theme="light"] .bedBoardClinician.isNurse {
  color: #0f2747 !important;
}

body[data-theme="light"] .bedBoardStatus {
  background: #eef4fb !important;
  border-color: #ccdaea !important;
  color: #31506f !important;
}

body[data-theme="light"] .bedBoardStatus.isOccupied {
  color: #0f5f50 !important;
  background: #dff6ef !important;
  border-color: #95d6c7 !important;
}

body[data-theme="light"] .bedBoardStatus.isBlocked {
  color: #9d2525 !important;
  background: #fde7e7 !important;
  border-color: #efb2b2 !important;
}

body[data-theme="light"] .bedBoardStatus.isVacant {
  color: #516b87 !important;
  background: #f4f8fc !important;
  border-color: #d4e0ec !important;
}

body[data-theme="light"] .bedBoardSelect {
  background: #eef3f8 !important;
  color: #0f2747 !important;
  border-color: #c7d7e8 !important;
}

body[data-theme="light"] .bedBoardSelect.isAssigned {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .52) !important;
}

/* =========================================================
   21. PRINT STYLES
   ========================================================= */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  header,
  .settingsRail,
  .settingsPanel,
  .settingsBackdrop,
  .settingsPeekBtn,
  .viewerBar,
  .viewNav,
  .dashboardSection,
  .assignmentSection,
  .teamBoardSection,
  .bedBoardSection,
  .trendSection,
  .appFooter,
  .hint,
  .themeToggleBtn {
    display: none !important;
  }

  .wrap {
    padding: 0;
  }

  .workspaceShell {
    display: block;
  }

  .workspaceContent {
    padding: 0;
  }

  .bannerWorkloadBar {
    display: none !important;
  }

  .record {
    break-after: page;
    page-break-after: always;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff !important;
    border: none;
  }

  .recordDetails {
    display: block !important;
    padding: 0 14px 12px;
    border-top: 1px solid #d1dce8;
    background: #fff !important;
  }

  .field {
    border-color: #ccc;
    background: #fff !important;
    box-shadow: none;
  }

  .label {
    color: #444;
  }

  .value {
    color: #000;
  }

  .bedBanner {
    background: transparent !important;
  }

  .bedBoxTop {
    background: #f5f5f5;
  }
}

/* =========================================================
   22. RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 1100px) {
  .workspaceShell {
    grid-template-columns: minmax(0, 1fr);
  }

  .settingsPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 90vw);
    height: 100vh;
    z-index: 30;
    transform: translateX(104%);
    box-shadow: -16px 0 36px rgba(0, 0, 0, .32);
  }

  .workspaceShell.isSettingsOpen .settingsPanel {
    transform: translateX(0);
    width: min(320px, 90vw);
  }

  .workspaceShell.isSettingsClosed .settingsPanel {
    width: min(320px, 90vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    border-left: 0;
    transform: translateX(104%);
  }

  .settingsBackdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 15, .7);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
    z-index: 29;
  }

  .workspaceShell.isSettingsOpen .settingsBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .workspaceContent {
    order: 1;
  }

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

  .dashCard,
  .dashCard.wide,
  .dashCard.hero,
  .trendCard {
    grid-column: span 1;
  }

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

@media (max-width: 980px) {
  .nurseDragBoard {
    grid-template-columns: 1fr;
  }

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

  .nurseDragBoard.isSidebarCollapsed {
    grid-template-columns: 1fr;
  }

  .nurseRoleBoard.isRosterCollapsed {
    grid-template-columns: 1fr;
  }

  .nurseDragSidebar {
    min-height: 0;
  }

  .nurseRoleSidebar {
    min-height: 0;
  }

  .nurseDragBoard.isSidebarCollapsed .boardPanelKicker,
  .nurseRoleBoard.isRosterCollapsed .boardPanelKicker {
    writing-mode: initial;
    transform: none;
  }

  .nurseDragBoard.isSidebarCollapsed .nurseDragSidebarHeaderTop,
  .nurseRoleBoard.isRosterCollapsed .nurseRoleSidebarHeaderTop {
    flex-direction: row;
    align-items: flex-start;
  }

  .nurseDragBoard.isSidebarCollapsed .nurseDragSidebarHeading {
    flex-direction: row;
    align-items: center;
  }

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

  .wide-2,
  .wide-4 {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .workspaceContent {
    padding: 12px 12px 18px;
  }

  .viewNav {
    flex-direction: column;
    align-items: stretch;
  }

  .viewSwitch {
    width: 100%;
    flex-wrap: wrap;
  }

  .viewSwitchBtn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 11px;
    white-space: normal;
    line-height: 1.15;
  }

  .assignmentHeader,
  .teamBoardHeader {
    flex-direction: column;
    align-items: stretch;
  }

  .assignmentGrid,
  .bedBoardGrid,
  .teamBoardGrid {
    grid-template-columns: 1fr;
  }

  .bedBoardSection,
  .nurseAssignmentBoard,
  .nurseAssignmentBoard.isSidebarCollapsed,
  .nurseAssignmentBoard.isRolePanelCollapsed,
  .nurseAssignmentBoard.isSidebarCollapsed.isRolePanelCollapsed {
    grid-template-columns: 1fr;
  }

  .nurseAssignmentBoard .nurseRoleGrid {
    max-height: none;
  }

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

  .bedBoardExtraAssignments {
    position: static;
  }

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

  .nurseChargeBody {
    justify-content: flex-start;
  }

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

  .nurseRoleCards {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  }

  .assignmentTitle,
  .bedBoardTitle,
  .teamBoardTitle {
    font-size: 16px;
  }

  .dashboardGrid,
  .trendChartGrid {
    grid-template-columns: 1fr;
  }

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

  .trendCard {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "current" "delta" "chart" "coverage";
  }

  .dashCard.hero {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "value" "meta";
  }

  .dashCard.hero>.dashCountMeta {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 520px) {

  .assignmentSection,
  .bedBoardSection,
  .teamBoardSection,
  .dashboardSection,
  .trendSection {
    border-radius: var(--r-lg);
    padding: 12px 13px;
  }

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

  .wide-2,
  .wide-4 {
    grid-column: span 1;
  }

  .viewSwitchBtn {
    flex-basis: 100%;
    min-height: 34px;
  }
}

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {
  --bg: #0b1016;
  --surface: #111921;
  --surface-2: #16212d;
  --surface-3: #1c2a38;
  --border: rgba(148, 163, 184, .14);
  --border-md: rgba(148, 163, 184, .24);
  --text: #ecf4fb;
  --text-soft: #b0c2d4;
  --text-muted: #7a8fa3;
  --accent: #24c6bb;
  --accent-bg: rgba(36, 198, 187, .1);
  --accent-bdr: rgba(36, 198, 187, .28);
  --primary: #5c8fd6;
  --primary-2: #3d6cb5;
  --primary-bg: rgba(92, 143, 214, .12);
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .26);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ── 2. BASE ─────────────────────────────────────────────── */
body {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background:
    radial-gradient(circle at top left, rgba(36, 198, 187, .07), transparent 28%),
    radial-gradient(circle at top right, rgba(92, 143, 214, .06), transparent 26%),
    linear-gradient(180deg, #0d1318, #0b1016);
  color: var(--text);
}

/* ── 3. LAYOUT ───────────────────────────────────────────── */
.workspaceContent {
  padding: 14px 16px 22px !important;
}

/* ── 4. TYPOGRAPHY HIERARCHY ─────────────────────────────── */

/* Kickers / eyebrows — smallest label */
.assignmentKicker,
.dashboardKicker,
.teamBoardKicker,
.boardPanelKicker,
.controlLabel,
.statusEyebrow,
.settingsEyebrow,
.emptyWorkspaceEyebrow,
.assignmentMetaLabel,
.bedBoardLabel,
.bedBoardFooterLabel,
.assignmentSelectLabel,
.nurseDragZone,
.dashEyebrow,
.trendSummaryLabel,
.dashStatLabel,
.dashQualityBadge,
.bedBoardStatus,
.assignmentStatus {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.assignmentKicker,
.dashboardKicker,
.teamBoardKicker,
.boardPanelKicker,
.controlLabel,
.statusEyebrow,
.settingsEyebrow,
.emptyWorkspaceEyebrow,
.assignmentMetaLabel,
.bedBoardFooterLabel,
.assignmentSelectLabel,
.nurseDragZone,
.dashEyebrow,
.trendSummaryLabel,
.dashStatLabel {
  color: var(--text-muted) !important;
}

/* Body / field text */
.value,
.assignmentMetaValue,
.bedBoardValueText,
.nurseDragPrimary,
.nurseDropName,
.nurseDragBed,
.bedBoardValue,
.dashBarLabel,
.trendTable td {
  font-size: 12px !important;
  color: var(--text) !important;
}

/* Muted secondary text */
.assignmentSub,
.teamBoardSub,
.dashboardSub,
.trendCardHint,
.dashHint,
.dashNote,
.controlHelp,
.statusHint,
.settingsIntro,
.switchHint,
.nurseDragSecondary,
.nurseDropCount,
.nurseDragMainMeta,
.bedBoardSecondary,
.viewNavHint,
.assignmentStaffHint,
.fileMetaHint,
.nurseDragAddHint,
.emptyWorkspaceCopy {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* Section sub-headings */
.settingsTitle {
  font-size: 19px !important;
  color: var(--accent) !important;
  letter-spacing: -.02em !important;
}

.reportHeader .title {
  font-size: 17px !important;
  font-weight: 760 !important;
  color: var(--text) !important;
  letter-spacing: -.02em !important;
}

.emptyWorkspaceTitle {
  font-size: 24px !important;
  font-weight: 760 !important;
  color: var(--text) !important;
  letter-spacing: -.03em !important;
}

/* All section page titles — uniform */
.assignmentTitle,
.bedBoardTitle,
.teamBoardTitle,
.dashboardTitle,
.teamBoardTitle {
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}

/* Card-level names */
.assignmentName,
.bedBoardPatientName,
.teamBoardName,
.nurseDragMainTitle {
  font-size: 15px !important;
  font-weight: 760 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
}

.bedBoardPatientName {
  font-size: 16px !important;
}

/* Dashboard numbers */
.dashCountValue {
  font-size: 42px !important;
  font-weight: 820 !important;
  color: var(--text) !important;
  letter-spacing: -.04em !important;
}

.dashStatValue {
  font-size: 18px !important;
  font-weight: 760 !important;
  color: var(--text) !important;
}

.dashTitle {
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--text) !important;
}

.trendCurrentValue {
  font-size: 34px !important;
  font-weight: 810 !important;
  color: var(--text) !important;
  letter-spacing: -.04em !important;
}

.trendSummaryValue {
  font-size: 24px !important;
  font-weight: 790 !important;
  color: var(--text) !important;
}

.trendCardTitle {
  font-size: 15px !important;
  font-weight: 760 !important;
  color: var(--text) !important;
}

.trendCurrentMeta {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* Field labels in white records */
.label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #52637f !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.value {
  font-size: 12px !important;
  color: #0b0f17 !important;
}

/* Report meta */
.reportHeader .meta {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  gap: 5px 12px !important;
}

.meta strong {
  color: var(--text-soft) !important;
}

/* ── 5. SURFACES & BORDERS ───────────────────────────────── */
.reportHeader {
  padding: 10px 14px 18px !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  margin-bottom: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}

.assignmentSection,
.bedBoardSection,
.teamBoardSection,
.dashboardSection,
.trendSection {
  padding: 16px 18px !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 12px !important;
  margin-top: 16px;
}

.assignmentHeader,
.teamBoardHeader,
.dashboardHeader,
.trendHeader {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

.assignmentCard,
.bedBoardCard,
.teamBoardCard {
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)) !important;
}

/* ── Bed Board occupancy card backgrounds — strong, high-contrast ── */
.bedBoardCard.isOccupied {
  background: linear-gradient(160deg, #0b2e28 0%, #0f2024 100%) !important;
  border-color: rgba(36, 198, 187, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(36, 198, 187, .18), var(--shadow-sm) !important;
}

.bedBoardCard.isBlocked {
  background: linear-gradient(160deg, #2e0e0e 0%, #200f0f 100%) !important;
  border-color: rgba(224, 84, 84, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(224, 84, 84, .2), var(--shadow-sm) !important;
}

.bedBoardCard.isVacant {
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-3) 100%) !important;
  border-color: var(--border) !important;
}

.nurseDragSidebar,
.nurseDragMain,
.nurseDropBox,
.legendGroup,
.teamBoardCard,
.patientHoverCard {
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
}

.nurseDragRow {
  padding: 9px 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015)) !important;
}

.dashCard {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)) !important;
  border: 1px solid var(--border) !important;
}

.trendCard,
.trendSummaryCard {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)) !important;
  border: 1px solid var(--border) !important;
}

/* ── 6. VIEW NAV / TABS ──────────────────────────────────── */
.viewSwitch {
  padding: 3px !important;
  gap: 3px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
}

.viewSwitchBtn {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-md) !important;
}

.viewSwitchBtn:hover:not(:disabled) {
  background: var(--primary-bg) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: none !important;
}

.viewSwitchBtn.isActive {
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(61, 108, 181, .28) !important;
}

/* ── 7. VIEWER BAR ───────────────────────────────────────── */
.viewerBar {
  padding: 5px 8px !important;
  gap: 5px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.pill {
  min-height: 22px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  background: rgba(255, 255, 255, .04) !important;
}

/* ── 8. HEADER CONTROLS ──────────────────────────────────── */
.headerBadge {
  min-height: 22px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(61, 108, 181, .26) !important;
}

.themeToggleBtn {
  min-height: 22px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: var(--text-soft) !important;
}

.settingsPeekBtn {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .06) !important;
}

/* ── 9. BEDS / OCCUPANCY ─────────────────────────────────── */
.bedBoardBed {
  min-width: 56px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0 9px !important;
  border-radius: var(--r-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, var(--primary-bg), rgba(61, 108, 181, .05)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.bedBoardStatus,
.assignmentStatus {
  min-height: 22px !important;
  padding: 0 9px !important;
  font-size: 10px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

/* Occupied — bright teal text, visible green bg */
.bedBoardStatus.isOccupied,
.assignmentStatus.isOccupied {
  color: #7fffdc !important;
  background: rgba(16, 120, 100, .55) !important;
  border-color: rgba(36, 198, 187, .55) !important;
}

/* Blocked — bright red text, visible red bg */
.bedBoardStatus.isBlocked,
.assignmentStatus.isBlocked {
  color: #ffb3b3 !important;
  background: rgba(180, 30, 30, .5) !important;
  border-color: rgba(224, 84, 84, .55) !important;
}

/* Vacant — muted but still readable */
.bedBoardStatus.isVacant {
  color: #8fa9c0 !important;
  background: rgba(255, 255, 255, .05) !important;
}

/* ── 10. TEAM BOARD ──────────────────────────────────────── */
.teamBoardBedChip {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important;
  letter-spacing: .02em !important;
}

.teamBoardMeta {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  letter-spacing: .08em !important;
}

/* ── 11. NURSE DRAG BOARD ────────────────────────────────── */
.nurseDragTab {
  min-height: 26px !important;
  font-size: 11px !important;
}

.nurseDragBed {
  font-size: 12px !important;
  color: var(--text) !important;
  font-weight: 760 !important;
}

.nurseDropChip {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3)) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important;
  letter-spacing: .02em !important;
}

.nurseDragActionBtn {
  min-height: 30px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--text) !important;
}

/* ── 12. SETTINGS SIDEBAR ───────────────────────────────── */
.settingsPanel {
  border-left: 1px solid var(--border) !important;
  background: linear-gradient(180deg, var(--surface), #0f1820) !important;
}

.settingsPanelHeader {
  padding: 16px 16px 13px 18px !important;
  border-bottom: 1px solid var(--border) !important;
}

.controlGroup+.controlGroup {
  border-top: 1px solid var(--border) !important;
}

.switchRow {
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}

.switchTitle {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* ── 13. DASHBOARD PRESET BUTTONS ────────────────────────── */
.dashboardPresetBtn {
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--text-muted) !important;
}

.dashboardPresetBtn.isActive {
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── 14. EMPTY STATE ─────────────────────────────────────── */
.emptyWorkspaceState {
  padding: 26px 22px !important;
  border: 1px solid var(--border-md) !important;
  border-radius: var(--r-xl) !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
}

/* ── 15. LIGHT THEME ─────────────────────────────────────── */
body[data-theme="light"] {
  --bg: #eef4fb;
  --surface: #ffffff;
  --surface-2: #f4f8ff;
  --surface-3: #e8f1fd;
  --border: rgba(61, 108, 181, .14);
  --border-md: rgba(61, 108, 181, .24);
  --text: #183858;
  --text-soft: #3d5872;
  --text-muted: #6d87a2;
  background: linear-gradient(180deg, #f0f7ff, #e8f1fb);
  color: var(--text);
}

body[data-theme="light"] .label {
  color: #52637f !important;
}

body[data-theme="light"] .value,
body[data-theme="light"] .bedLine1,
body[data-theme="light"] .bedLine2,
body[data-theme="light"] .bedLine3 {
  color: #0b0f17 !important;
}

body[data-theme="light"] .headerBadge,
body[data-theme="light"] .viewSwitchBtn.isActive,
body[data-theme="light"] .dashboardPresetBtn.isActive,
body[data-theme="light"] .nurseDragActionBtn {
  background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body[data-theme="light"] .assignmentSection,
body[data-theme="light"] .bedBoardSection,
body[data-theme="light"] .teamBoardSection,
body[data-theme="light"] .dashboardSection,
body[data-theme="light"] .trendSection,
body[data-theme="light"] .reportHeader,
body[data-theme="light"] .settingsPanel,
body[data-theme="light"] .viewerBar,
body[data-theme="light"] .viewSwitch,
body[data-theme="light"] .assignmentCard,
body[data-theme="light"] .bedBoardCard,
body[data-theme="light"] .teamBoardCard,
body[data-theme="light"] .nurseDragSidebar,
body[data-theme="light"] .nurseDragMain,
body[data-theme="light"] .nurseDropBox,
body[data-theme="light"] .emptyWorkspaceState {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* --- 16. V4 Clinical Shell Overrides --------------- */
body[data-theme="light"] .workspaceShell {
  grid-template-columns: minmax(0, 1fr) auto;
  background: linear-gradient(180deg, #f7f9fe 0%, #eef3fb 100%);
}

body[data-theme="light"] .workspaceShell.isSettingsOpen {
  grid-template-columns: minmax(0, 1fr) 320px;
}

body[data-theme="light"] .workspaceShell.isSettingsClosed {
  grid-template-columns: minmax(0, 1fr) 0;
}

body[data-theme="light"] .workspaceContent {
  padding: 18px 24px 30px;
}

body[data-theme="light"] .reportHeader {
  padding: 14px 18px;
  border-radius: 18px;
  border-color: rgba(0, 94, 184, .12);
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 24px rgba(27, 59, 102, .08);
}

body[data-theme="light"] .title {
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -.04em;
  color: #163d75;
  margin-bottom: 6px;
}

body[data-theme="light"] .meta {
  gap: 8px 20px;
  font-size: 12px;
  color: #667793;
}

body[data-theme="light"] .viewerBar {
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border-color: rgba(0, 94, 184, .1);
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 20px rgba(27, 59, 102, .06);
}

body[data-theme="light"] .viewNav {
  margin-bottom: 16px;
}

body[data-theme="light"] .viewSwitch {
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  border-color: rgba(0, 94, 184, .1);
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 8px 20px rgba(27, 59, 102, .06);
}

body[data-theme="light"] .viewSwitchBtn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #5a6d88;
}

body[data-theme="light"] .viewSwitchBtn:hover:not(:disabled) {
  background: rgba(0, 94, 184, .08);
  color: #163d75;
}

body[data-theme="light"] .settingsPanel {
  border-left: 1px solid rgba(0, 94, 184, .08);
  background: linear-gradient(180deg, #eef3fc 0%, #e8eef9 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7);
}

body[data-theme="light"] .settingsPanelHeader {
  padding: 22px 20px 16px 20px;
  background: rgba(255, 255, 255, .28);
  border-bottom-color: rgba(0, 94, 184, .08);
}

body[data-theme="light"] .settingsEyebrow {
  color: #6c7fa0;
  letter-spacing: .14em;
}

body[data-theme="light"] .settingsTitle {
  color: #163d75;
  font-size: 26px;
  letter-spacing: -.03em;
}

body[data-theme="light"] .settingsSub {
  color: #6b7b93;
  font-size: 12px;
}

body[data-theme="light"] .controlGroup {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme="light"] .controlGroup+.controlGroup {
  border-top: 1px solid rgba(0, 94, 184, .08) !important;
  margin-top: 0 !important;
}

body[data-theme="light"] .controlsGrid {
  gap: 0;
}

body[data-theme="light"] .controlLabel {
  color: #6b7b93;
  letter-spacing: .12em;
}

body[data-theme="light"] .statusStrip {
  border-top-color: rgba(0, 94, 184, .08);
  background: rgba(255, 255, 255, .4);
}

body[data-theme="light"] .record {
  margin-bottom: 14px;
  border-radius: 20px;
  border-color: rgba(0, 94, 184, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 251, 255, .98));
  box-shadow: 0 14px 28px rgba(27, 59, 102, .08);
}

body[data-theme="light"] .recordDetails {
  padding: 0 16px 16px;
  border-top-color: rgba(0, 94, 184, .08);
  background: linear-gradient(180deg, #f9fbff, #f3f7fd);
}

body[data-theme="light"] .bedBanner {
  padding: 14px 16px;
}

body[data-theme="light"] .bedBannerRow {
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 0;
}

body[data-theme="light"] .bedBoxTop {
  min-height: 74px;
  margin-right: 14px;
  border-right: 0;
  border-radius: 14px;
  color: #005eb8;
  background: linear-gradient(180deg, #edf4ff, #dfeafa);
  box-shadow: inset 0 0 0 1px rgba(0, 94, 184, .08);
}

body[data-theme="light"] .bedInfoTop {
  padding: 0;
  gap: 7px;
}

body[data-theme="light"] .bedLine1 {
  font-size: 17px;
  font-weight: 820;
  text-align: left;
  color: #163d75 !important;
}

body[data-theme="light"] .bedLine2,
body[data-theme="light"] .bedLine3 {
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  color: #50637d !important;
}

body[data-theme="light"] .toggleHint {
  top: 18px;
  right: 18px;
  color: #7f90a8;
}

body[data-theme="light"] .grid {
  gap: 12px;
  margin-top: 12px;
}

body[data-theme="light"] .field {
  border-radius: 14px;
  padding: 10px 12px;
  border-color: rgba(0, 94, 184, .08);
  background: linear-gradient(180deg, #f7faff, #eef4fc);
}

body[data-theme="light"] .label {
  color: #70819b !important;
  letter-spacing: .08em;
}

body[data-theme="light"] .value {
  color: #163d75 !important;
}

body[data-theme="light"] .settingsPeekBtn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border-color: rgba(0, 94, 184, .12);
  background: rgba(255, 255, 255, .86);
  color: #163d75;
}

body[data-theme="light"] .headerVersion {
  color: #70819b !important;
}

@media (min-width: 1100px) {
  body[data-theme="light"] .workspaceContent {
    padding-left: 122px;
  }

  body[data-theme="light"] #viewNav:not([hidden]) {
    position: fixed;
    top: 14px;
    left: 0;
    bottom: 0;
    width: 96px;
    padding: 16px 10px 18px;
    display: grid;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-right: none;
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-image: none;
    background: linear-gradient(180deg, #eef3fb 0%, #e7edf8 100%);
    z-index: 9;
  }

  body[data-theme="light"] #viewNav .viewSwitch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
  }

  body[data-theme="light"] #viewNav .viewSwitchBtn {
    width: 100%;
    min-height: 88px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .45);
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 6px 14px rgba(27, 59, 102, .04);
  }

  body[data-theme="light"] #viewNav .viewSwitchBtn::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }

  body[data-theme="light"] #summaryViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='2'/%3E%3Cpath d='M9 4h6v4H9z'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #bedBoardViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M5 12V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M5 12v4'/%3E%3Cpath d='M19 12v4'/%3E%3Cpath d='M3 16h18'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #nurseBoardViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='3'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 4.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #providerBoardViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h7a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4h-2'/%3E%3Cpath d='M15 6.5V5a2 2 0 0 1 4 0v1.5'/%3E%3Cpath d='M10 14.5v4'/%3E%3Cpath d='M8 18.5h4'/%3E%3Ccircle cx='7' cy='14.5' r='2.5'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #residentBoardViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #dashboardViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M10 19v-8'/%3E%3Cpath d='M16 19v-5'/%3E%3Cpath d='M22 19V9'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #trendsViewBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005eb8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M6 15l4-4 3 3 5-6'/%3E%3Cpath d='M16 8h3v3'/%3E%3C/svg%3E");
  }

  body[data-theme="light"] #viewNav .viewSwitchBtn.isActive {
    background: #ffffff !important;
    border-color: rgba(0, 94, 184, .22) !important;
    color: #005eb8 !important;
    box-shadow: 0 10px 22px rgba(27, 59, 102, .1);
  }

  body[data-theme="light"] #viewNav .viewNavHint {
    display: none !important;
  }

  body[data-theme="light"] .viewPage {
    margin-left: 0;
  }
}

body[data-theme="light"] .reportHeaderTop {
  display: flex;
  align-items: center;
  gap: 18px;
}

body[data-theme="light"] .reportHeaderTop::before {
  content: "HO-Print Pro";
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #005eb8;
  margin-right: 10px;
}

body[data-theme="light"] .reportHeaderMain {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

body[data-theme="light"] .title {
  order: 2;
  flex-basis: 100%;
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 40px;
  line-height: 1;
}

body[data-theme="light"] .meta {
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-theme="light"] .meta div {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(233, 239, 250, .9);
  color: #4e6382;
  font-weight: 700;
}

body[data-theme="light"] .meta div:first-child {
  color: #005eb8;
  box-shadow: inset 0 -3px 0 rgba(0, 94, 184, .9);
  background: rgba(255, 255, 255, .95);
}

body[data-theme="light"] .meta strong {
  display: none;
}

body[data-theme="light"] .reportHeaderControls {
  margin-left: auto;
  gap: 10px;
}

body[data-theme="light"] .themeToggleBtn,
body[data-theme="light"] .settingsPeekBtn {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(233, 239, 250, .9) !important;
  border: 1px solid rgba(0, 94, 184, .08) !important;
  color: #5a6d88 !important;
}

body[data-theme="light"] #summaryPage {
  padding-top: 8px;
}

body[data-theme="light"] #pages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body[data-theme="light"] .recordToggle {
  padding-bottom: 16px;
}

body[data-theme="light"] .bedBannerRow {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0;
}

body[data-theme="light"] .bedBoxTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

body[data-theme="light"] .bedBoxLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4e79b8;
}

body[data-theme="light"] .bedBoxValue {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #005eb8;
}

body[data-theme="light"] .patientHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(120px, .9fr)) auto;
  gap: 16px;
  align-items: center;
}

body[data-theme="light"] .patientHeroBlock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-theme="light"] .patientHeroLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #6c7fa0;
}

body[data-theme="light"] .patientHeroValue {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #193e76;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body[data-theme="light"] .patientHeroNameBlock .patientHeroValue {
  font-size: 18px;
}

body[data-theme="light"] .patientHeroMeta {
  font-size: 11px;
  font-weight: 700;
  color: #607593;
}

body[data-theme="light"] .patientHeroStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

body[data-theme="light"] .patientStatusBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body[data-theme="light"] .patientStatusBadge.isStable {
  background: #dfe8f7;
  color: #506b96;
}

body[data-theme="light"] .patientStatusBadge.isRisk {
  background: #ff5a3d;
  color: #fff;
}

body[data-theme="light"] .patientStatusSub {
  font-size: 11px;
  font-weight: 700;
  color: #7a8ca6;
}

body[data-theme="light"] .toggleHint {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef3fb;
  font-size: 16px;
  font-weight: 900;
}

body[data-theme="light"] .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-theme="light"] .field {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

body[data-theme="light"] .recordNoteField {
  min-height: 220px;
  background: linear-gradient(180deg, #f7faff, #eef3fb);
  border-left: 4px solid #005eb8;
}

body[data-theme="light"] .recordNoteField .valueEditor {
  min-height: 140px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
}

body[data-theme="light"] .recordNurseField {
  min-height: 112px;
  background: linear-gradient(180deg, #f8fbff, #eef3fb);
}

body[data-theme="light"] .recordNurseField .valueEditor {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 700;
}

/* HO-Print v4 final theme harmonization */
:root {
  --ui-font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body[data-theme="light"] {
  --ui-page-gradient: linear-gradient(180deg, #e7eef7 0%, #dbe5f1 100%);
  --ui-rail: #dde7f2;
  --ui-panel: #e6edf6;
  --ui-surface: #f0f5fb;
  --ui-surface-alt: #e7eef7;
  --ui-surface-soft: #dfe8f2;
  --ui-line: rgba(27, 63, 108, .12);
  --ui-line-strong: rgba(27, 95, 155, .2);
  --ui-text: #16365f;
  --ui-text-soft: #516882;
  --ui-text-muted: #70839d;
  --ui-pill: #dfe8f3;
  --ui-pill-text: #536983;
  --ui-toggle: #e6edf6;
  --ui-shadow: 0 16px 32px rgba(27, 59, 102, .08);
  --ui-shadow-sm: 0 8px 18px rgba(27, 59, 102, .06);
  --ui-emphasis: #1b5ea3;
  --ui-emphasis-strong: #154a7f;
  --ui-stable-bg: #d8e4f5;
  --ui-stable-text: #4e678a;
  --ui-risk-bg: #ff5a3d;
  --ui-risk-text: #ffffff;
}

body[data-theme="dark"] {
  --ui-page-gradient:
    radial-gradient(circle at top left, rgba(65, 118, 194, .18), transparent 24%),
    linear-gradient(180deg, #07101a 0%, #0a1320 100%);
  --ui-rail: #0d1826;
  --ui-panel: #0c1623;
  --ui-surface: #0f1b2b;
  --ui-surface-alt: #122235;
  --ui-surface-soft: #16283d;
  --ui-line: rgba(148, 176, 220, .10);
  --ui-line-strong: rgba(125, 167, 227, .22);
  --ui-text: #edf4ff;
  --ui-text-soft: #b4c6df;
  --ui-text-muted: #8094b0;
  --ui-pill: #18283c;
  --ui-pill-text: #a9bddb;
  --ui-toggle: #132338;
  --ui-shadow: 0 20px 40px rgba(0, 0, 0, .30);
  --ui-shadow-sm: 0 12px 28px rgba(0, 0, 0, .22);
  --ui-emphasis: #9fc4ff;
  --ui-emphasis-strong: #dbe8ff;
  --ui-stable-bg: #1a2a40;
  --ui-stable-text: #bdd1ef;
  --ui-risk-bg: #ff775f;
  --ui-risk-text: #ffffff;
}

body[data-theme] {
  background: var(--ui-page-gradient) !important;
  color: var(--ui-text) !important;
}

body[data-theme],
body[data-theme] button,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
  font-family: var(--ui-font) !important;
}

body[data-theme] .wrap,
body[data-theme] .workspaceShell {
  background: transparent !important;
}

body[data-theme] .workspaceShell {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-theme] .workspaceShell.isSettingsOpen {
  grid-template-columns: minmax(0, 1fr) 320px;
}

body[data-theme] .workspaceShell.isSettingsClosed {
  grid-template-columns: minmax(0, 1fr) 0;
}

body[data-theme] .workspaceContent {
  padding: 18px 18px 24px !important;
  position: relative;
  z-index: 1;
}

body[data-theme] .reportHeader,
body[data-theme] .viewerBar,
body[data-theme] .assignmentSection,
body[data-theme] .bedBoardSection,
body[data-theme] .teamBoardSection,
body[data-theme] .dashboardSection,
body[data-theme] .trendSection,
body[data-theme] .emptyWorkspaceState {
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-alt)) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body[data-theme] .reportHeader {
  padding: 18px 22px 22px !important;
  border-radius: 28px 28px 0 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}

body[data-theme] .reportHeader::before {
  content: none !important;
  display: none !important;
}

body[data-theme] .reportHeaderDisplayTitle {
  display: block;
  margin: 0 0 14px;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: .94;
  font-weight: 820;
  letter-spacing: -.055em;
  color: var(--ui-emphasis);
}

body[data-theme] .reportHeaderTop::before {
  content: none !important;
}

body[data-theme] .reportHeaderTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 12px !important;
}

body[data-theme] .reportHeaderMain {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  min-width: 0;
}

body[data-theme] .title {
  order: 2;
  flex-basis: 100%;
  margin: 0 !important;
  font-size: clamp(21px, 2.5vw, 30px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--ui-text) !important;
}

body[data-theme] .reportDataTitle {
  display: none !important;
}

body[data-theme] .meta {
  order: 1;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: var(--ui-pill-text) !important;
}

body[data-theme] .meta div {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: var(--ui-pill) !important;
  color: var(--ui-pill-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--ui-line);
}

body[data-theme] .meta div:first-child {
  color: var(--ui-emphasis) !important;
  background: var(--ui-surface) !important;
  box-shadow:
    inset 0 -3px 0 var(--ui-emphasis),
    inset 0 0 0 1px var(--ui-line);
}

body[data-theme] .meta strong {
  display: none !important;
}

body[data-theme] .reportHeaderControls {
  gap: 8px !important;
  margin-left: auto !important;
  align-self: start !important;
}

body[data-theme] .headerVersion {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

body[data-theme] .themeToggleBtn,
body[data-theme] .settingsPeekBtn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ui-pill) !important;
  box-shadow: inset 0 0 0 1px var(--ui-line) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative;
}

body[data-theme] .themeToggleBtn::before,
body[data-theme] .settingsPeekBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

body[data-theme="light"] .settingsRail {
  border-color: var(--ui-line) !important;
  background: linear-gradient(180deg, rgba(240, 245, 251, .98), rgba(225, 234, 244, .96)) !important;
  box-shadow: 0 8px 20px rgba(27, 59, 102, .08) !important;
}

body[data-theme="light"] .settingsToggleBtn {
  border-color: var(--ui-line) !important;
  background: linear-gradient(180deg, #f5f8fc, #e5edf7) !important;
  color: #1b5ea3 !important;
}

body[data-theme="light"] .settingsToggleBtn::before {
  border-top-color: #1b5ea3 !important;
  border-right-color: #1b5ea3 !important;
}

body[data-theme="light"] .themeToggleBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .themeToggleBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9dcff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
}

body[data-theme="light"] .settingsPeekBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3Cpath d='m11 12-3-3'/%3E%3Cpath d='m8 9 3 3-3 3'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .settingsPeekBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9dcff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3Cpath d='m11 12-3-3'/%3E%3Cpath d='m8 9 3 3-3 3'/%3E%3C/svg%3E");
}

body[data-theme] .viewerBar,
body[data-theme] .viewSwitch {
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .02) !important;
  box-shadow:
    inset 0 0 0 1px var(--ui-line),
    var(--ui-shadow-sm) !important;
}

body[data-theme] .viewerBar {
  gap: 6px !important;
  margin-top: -1px !important;
  margin-bottom: 12px !important;
  padding: 0 16px 10px !important;
  border: 1px solid var(--cp-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 24px 0 !important;
  background: linear-gradient(180deg, var(--cp-panel-soft), var(--cp-rail)) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body[data-theme] .pill {
  border: 0 !important;
  background: var(--ui-pill) !important;
  color: var(--ui-pill-text) !important;
  box-shadow: inset 0 0 0 1px var(--ui-line);
}

body[data-theme] .settingsPanel {
  border-left: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, var(--ui-panel), var(--ui-rail)) !important;
}

body[data-theme] .settingsPanelHeader {
  padding: 18px 18px 14px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

body[data-theme] .settingsEyebrow,
body[data-theme] .controlLabel,
body[data-theme] .label {
  color: var(--ui-text-muted) !important;
}

body[data-theme] .settingsTitle {
  color: var(--ui-text) !important;
  font-size: 22px !important;
  letter-spacing: -.03em !important;
}

body[data-theme] .settingsIntro,
body[data-theme] .switchHint,
body[data-theme] .fileMetaHint,
body[data-theme] .controlHelp,
body[data-theme] .statusHint {
  color: var(--ui-text-muted) !important;
}

body[data-theme] .controls {
  padding: 10px 12px 14px !important;
}

body[data-theme] .controlsGrid {
  gap: 0 !important;
}

body[data-theme] .controlGroup {
  padding: 14px 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme] .controlGroup+.controlGroup {
  margin-top: 0 !important;
  border-top: 1px solid var(--ui-line) !important;
}

body[data-theme] .statusStrip {
  background: transparent !important;
  border-top: 1px solid var(--ui-line) !important;
}

body[data-theme] .searchInput,
body[data-theme] .nurseSelect,
body[data-theme] .assignmentSelect,
body[data-theme] .nurseDragAddInput,
body[data-theme] .nurseRoleAddInput,
body[data-theme] .valueEditor,
body[data-theme] textarea.valueEditor {
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

body[data-theme] .record,
body[data-theme] .field,
body[data-theme] .assignmentCard,
body[data-theme] .bedBoardCard,
body[data-theme] .teamBoardCard,
body[data-theme] .nurseDragSidebar,
body[data-theme] .nurseDragMain,
body[data-theme] .nurseDropBox,
body[data-theme] .nurseDragRow,
body[data-theme] .legendGroup,
body[data-theme] .patientHoverCard,
body[data-theme] .dashCard,
body[data-theme] .trendCard,
body[data-theme] .trendSummaryCard {
  border: 0 !important;
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-alt)) !important;
  box-shadow:
    inset 0 0 0 1px var(--ui-line),
    var(--ui-shadow-sm) !important;
}

body[data-theme] .record {
  margin-bottom: 12px !important;
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--ui-line),
    var(--ui-shadow) !important;
}

body[data-theme] .recordToggle {
  padding-bottom: 12px !important;
}

body[data-theme] .recordDetails {
  padding: 0 14px 14px !important;
  border-top: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, var(--ui-surface-alt), var(--ui-surface-soft)) !important;
}

body[data-theme] .bedBanner {
  padding: 12px 56px 12px 14px !important;
  background: transparent !important;
}

body[data-theme] .bedBannerRow {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

body[data-theme] .bedBoxTop {
  min-height: 68px !important;
  margin-right: 0 !important;
  border-right: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ui-line) !important;
  color: var(--ui-emphasis) !important;
}

body[data-theme] .bedBoxLabel {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ui-text-muted) !important;
}

body[data-theme] .bedBoxValue {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: var(--ui-emphasis) !important;
}

body[data-theme] .bedInfoTop {
  padding: 0 !important;
  gap: 6px !important;
  min-width: 0;
}

body[data-theme] .patientHeroGrid {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(120px, .85fr)) minmax(160px, .95fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
}

body[data-theme] .patientHeroBlock {
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body[data-theme] .patientHeroLabel {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--ui-text-muted) !important;
}

body[data-theme] .patientHeroValue {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

body[data-theme] .patientHeroNameBlock .patientHeroValue {
  font-size: 17px !important;
}

body[data-theme] .patientHeroMeta,
body[data-theme] .patientStatusSub {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ui-text-muted) !important;
}

body[data-theme] .patientHeroStatus {
  display: flex !important;
  align-items: center !important;
  justify-self: end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-right: 2px;
  min-width: 0;
}

body[data-theme] .patientStatusBadge {
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body[data-theme] .patientStatusBadge.isStable {
  background: var(--ui-stable-bg) !important;
  color: var(--ui-stable-text) !important;
}

body[data-theme] .patientStatusBadge.isRisk {
  background: var(--ui-risk-bg) !important;
  color: var(--ui-risk-text) !important;
}

body[data-theme] .toggleHint {
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--ui-toggle) !important;
  color: var(--ui-text-soft) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1px var(--ui-line) !important;
}

body[data-theme] #pages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

body[data-theme] .grid {
  gap: 10px !important;
  margin-top: 10px !important;
}

body[data-theme] .field {
  min-height: 112px;
  padding: 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, var(--ui-surface-soft), var(--ui-surface-alt)) !important;
  box-shadow: inset 0 0 0 1px var(--ui-line) !important;
}

body[data-theme] .value {
  color: var(--ui-text) !important;
}

body[data-theme] .recordNoteField {
  min-height: 220px !important;
  border-left: 4px solid var(--ui-emphasis) !important;
}

body[data-theme] .recordNoteField .valueEditor {
  min-height: 140px !important;
}

body[data-theme] .recordNurseField .valueEditor {
  min-height: 48px !important;
  font-weight: 700 !important;
}

body[data-theme] .teamBoardHeader,
body[data-theme] .assignmentHeader,
body[data-theme] .dashboardHeader,
body[data-theme] .trendHeader {
  border-bottom: 1px solid var(--ui-line) !important;
}

body[data-theme] .assignmentTitle,
body[data-theme] .teamBoardTitle,
body[data-theme] .bedBoardTitle,
body[data-theme] .dashboardTitle,
body[data-theme] .settingsTitle,
body[data-theme] .assignmentName,
body[data-theme] .bedBoardPatientName {
  color: var(--ui-text) !important;
}

body[data-theme] .assignmentSub,
body[data-theme] .teamBoardSub,
body[data-theme] .dashboardSub,
body[data-theme] .teamBoardScope,
body[data-theme] .nurseDragMainMeta,
body[data-theme] .nurseDragRemaining,
body[data-theme] .nurseDragAddHint {
  color: var(--ui-text-muted) !important;
}

@media (min-width: 1100px) {
  body[data-theme] .workspaceContent {
    padding-left: 148px !important;
  }

  body[data-theme] #viewNav:not([hidden]) {
    position: fixed !important;
    top: 14px !important;
    left: 20px !important;
    bottom: 20px !important;
    width: 104px !important;
    padding: 10px !important;
    display: grid !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-image: none !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, var(--ui-rail), var(--ui-panel)) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    z-index: 4 !important;
  }

  body[data-theme] #viewNav .viewSwitch {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-theme] #viewNav .viewSwitchBtn {
    width: 100% !important;
    min-height: 76px !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 18px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ui-text-muted) !important;
  }

  body[data-theme] #viewNav .viewSwitchBtn:hover:not(:disabled) {
    background: var(--ui-surface) !important;
    box-shadow: inset 0 0 0 1px var(--ui-line) !important;
    color: var(--ui-text) !important;
  }

  body[data-theme] #viewNav .viewSwitchBtn.isActive {
    background: var(--ui-surface) !important;
    color: var(--ui-emphasis) !important;
    box-shadow:
      inset 0 0 0 1px var(--ui-line-strong),
      var(--ui-shadow-sm) !important;
  }

  body[data-theme] #viewNav .viewSwitchBtn::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }

  body[data-theme] #viewNav .viewNavHint {
    display: none !important;
  }
}

body[data-theme] #viewNav .viewSwitchBtn::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}

body[data-theme="light"] #viewNav .viewSwitchBtn::before {
  opacity: .76;
}

body[data-theme] #viewNav .viewSwitchBtn:hover:not(:disabled)::before,
body[data-theme] #viewNav .viewSwitchBtn.isActive::before {
  opacity: 1;
  transform: translateY(-1px);
}

body[data-theme="light"] #summaryViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='2'/%3E%3Cpath d='M9 4h6v4H9z'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
}

body[data-theme="light"] #bedBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M5 12V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M5 12v4'/%3E%3Cpath d='M19 12v4'/%3E%3Cpath d='M3 16h18'/%3E%3C/svg%3E");
}

body[data-theme="light"] #nurseBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='3'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 4.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body[data-theme="light"] #providerBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h7a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4h-2'/%3E%3Cpath d='M15 6.5V5a2 2 0 0 1 4 0v1.5'/%3E%3Cpath d='M10 14.5v4'/%3E%3Cpath d='M8 18.5h4'/%3E%3Ccircle cx='7' cy='14.5' r='2.5'/%3E%3C/svg%3E");
}

body[data-theme="light"] #residentBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

body[data-theme="light"] #dashboardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M10 19v-8'/%3E%3Cpath d='M16 19v-5'/%3E%3Cpath d='M22 19V9'/%3E%3C/svg%3E");
}

body[data-theme="light"] #trendsViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5ea3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M6 15l4-4 3 3 5-6'/%3E%3Cpath d='M16 8h3v3'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #summaryViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='2'/%3E%3Cpath d='M9 4h6v4H9z'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #bedBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M5 12V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M5 12v4'/%3E%3Cpath d='M19 12v4'/%3E%3Cpath d='M3 16h18'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #nurseBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='3'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 4.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #providerBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h7a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4h-2'/%3E%3Cpath d='M15 6.5V5a2 2 0 0 1 4 0v1.5'/%3E%3Cpath d='M10 14.5v4'/%3E%3Cpath d='M8 18.5h4'/%3E%3Ccircle cx='7' cy='14.5' r='2.5'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #residentBoardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #dashboardViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M10 19v-8'/%3E%3Cpath d='M16 19v-5'/%3E%3Cpath d='M22 19V9'/%3E%3C/svg%3E");
}

body[data-theme="dark"] #trendsViewBtn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M6 15l4-4 3 3 5-6'/%3E%3Cpath d='M16 8h3v3'/%3E%3C/svg%3E");
}

@media (max-width: 1440px) {
  body[data-theme] .patientHeroGrid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(120px, 1fr)) minmax(160px, 1fr) !important;
  }

  body[data-theme] .patientHeroStatus {
    grid-column: 1 / -1;
    justify-self: start !important;
    padding-right: 0;
  }
}

@media (max-width: 1100px) {
  body[data-theme] .workspaceContent {
    padding-left: 18px !important;
  }

  body[data-theme] .reportHeaderTop {
    grid-template-columns: 1fr !important;
  }

  body[data-theme] .patientHeroGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {

  body[data-theme] .patientHeroGrid,
  body[data-theme] .grid {
    grid-template-columns: 1fr !important;
  }

  body[data-theme] .wide-2,
  body[data-theme] .wide-4 {
    grid-column: span 1 !important;
  }

  body[data-theme] .bedBanner {
    padding-right: 18px !important;
  }

  body[data-theme] .toggleHint {
    position: static !important;
    margin-left: auto;
  }

  body[data-theme] .bedBannerRow {
    grid-template-columns: 1fr !important;
  }

  body[data-theme] .reportHeader,
  body[data-theme] .viewerBar,
  body[data-theme] .assignmentSection,
  body[data-theme] .bedBoardSection,
  body[data-theme] .teamBoardSection,
  body[data-theme] .dashboardSection,
  body[data-theme] .trendSection {
    border-radius: 20px !important;
  }
}

/* --- Clinical Precision / V4 density override ------------------- */
body[data-theme] {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

body[data-theme="light"] {
  --cp-bg: #e4ebf4;
  --cp-panel: #eef3f9;
  --cp-panel-soft: #e3ebf4;
  --cp-rail: #dbe5f0;
  --cp-line: rgba(21, 51, 89, 0.10);
  --cp-line-strong: rgba(27, 95, 155, 0.20);
  --cp-text: #13263f;
  --cp-muted: #52657e;
  --cp-primary: #1b5ea3;
  --cp-primary-soft: #dbe8fb;
  --cp-critical: #d92d20;
  --cp-critical-soft: #fee4e2;
  --cp-watch: #b54708;
  --cp-watch-soft: #fef0c7;
  --cp-stable: #1b5ea3;
  --cp-stable-soft: #dbe8fb;
  --cp-vacant: #067647;
  --cp-vacant-soft: #ecfdf3;
  --cp-blocked: #667085;
  --cp-blocked-soft: #f2f4f7;
  --cp-workload-light: #067647;
  --cp-workload-light-soft: #ecfdf3;
  --cp-workload-moderate: #1b5ea3;
  --cp-workload-moderate-soft: #dbe8fb;
  --cp-workload-heavy: #b54708;
  --cp-workload-heavy-soft: #fef0c7;
  --cp-workload-extreme: #d92d20;
  --cp-workload-extreme-soft: #fee4e2;
  --cp-chip-bg: #e2eaf4;
  --cp-chip-label: #617792;
}

body[data-theme="dark"] {
  --cp-bg: #0b1220;
  --cp-panel: #101828;
  --cp-panel-soft: #162133;
  --cp-rail: #0f1a2b;
  --cp-line: rgba(234, 242, 255, 0.1);
  --cp-line-strong: rgba(159, 196, 255, 0.22);
  --cp-text: #f8fbff;
  --cp-muted: #c5d0e0;
  --cp-primary: #9fc4ff;
  --cp-primary-soft: rgba(159, 196, 255, 0.12);
  --cp-critical: #ff6b5f;
  --cp-critical-soft: rgba(255, 107, 95, 0.14);
  --cp-watch: #f7b267;
  --cp-watch-soft: rgba(247, 178, 103, 0.14);
  --cp-stable: #9fc4ff;
  --cp-stable-soft: rgba(159, 196, 255, 0.14);
  --cp-vacant: #6ad29a;
  --cp-vacant-soft: rgba(106, 210, 154, 0.14);
  --cp-blocked: #98a2b3;
  --cp-blocked-soft: rgba(152, 162, 179, 0.14);
  --cp-workload-light: #6ad29a;
  --cp-workload-light-soft: rgba(106, 210, 154, 0.16);
  --cp-workload-moderate: #9fc4ff;
  --cp-workload-moderate-soft: rgba(159, 196, 255, 0.16);
  --cp-workload-heavy: #f7b267;
  --cp-workload-heavy-soft: rgba(247, 178, 103, 0.18);
  --cp-workload-extreme: #ff6b5f;
  --cp-workload-extreme-soft: rgba(255, 107, 95, 0.18);
  --cp-chip-bg: rgba(159, 196, 255, 0.08);
  --cp-chip-label: #9fb0c7;
}

body[data-theme] {
  background: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

body[data-theme] .workspaceContent {
  max-width: none !important;
  padding: 0 18px 24px 0 !important;
}

body[data-theme] .reportHeader,
body[data-theme] .assignmentSection,
body[data-theme] .bedBoardSection,
body[data-theme] .teamBoardSection,
body[data-theme] .trendSection,
body[data-theme] .emptyWorkspaceState {
  border: 1px solid var(--cp-line) !important;
  border-radius: 18px !important;
  background: var(--cp-panel) !important;
  box-shadow: none !important;
}

body[data-theme] #nurseBoardPage>.teamBoardSection {
  margin-bottom: 0 !important;
  padding: 16px 18px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme] #nurseBoardPage>.teamBoardSection+.teamBoardSection {
  margin-top: 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ui-line) !important;
}

body[data-theme] .dashboardSection {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-theme] .reportHeader {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding: 8px 22px 18px 88px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-line) !important;
  border-radius: 0 0 24px 0 !important;
  background: linear-gradient(180deg, var(--cp-panel), var(--cp-panel-soft)) !important;
  box-shadow: none !important;
}

body[data-theme] .reportHeaderDisplayTitle {
  margin: 0 !important;
  font-size: clamp(28px, 3.3vw, 42px) !important;
}

body[data-theme] .reportHeaderTop {
  grid-template-columns: minmax(0, 3fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-theme] .reportHeader .title,
body[data-theme] .headerVersion,
body[data-theme] .reportHeaderTop,
body[data-theme] #sheetPill,
body[data-theme] #hdrPill,
body[data-theme] #startPill,
body[data-theme] #notesCsvPill,
body[data-theme] #notesFreshnessPill,
body[data-theme] .viewNavHint {
  display: none !important;
}

body[data-theme] .reportHeader .meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

body[data-theme] .reportHeader .meta>div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--cp-line);
  background: var(--cp-panel-soft);
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 700;
}

body[data-theme] .reportHeader .meta strong {
  color: var(--cp-text);
}

body[data-theme] .reportHeaderControls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-theme] .themeToggleBtn,
body[data-theme] .settingsPeekBtn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--cp-line) !important;
  background: var(--cp-panel-soft) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}

body[data-theme] .viewerBar {
  order: -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 6px !important;
}

body[data-theme] .viewerBar .spacer {
  display: none !important;
}

body[data-theme] .pill,
body[data-theme] .viewerBar button.pill {
  border: 1px solid var(--cp-line) !important;
  background: var(--cp-panel-soft) !important;
  color: var(--cp-muted) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-theme] #currentReportPill,
body[data-theme] #patientCountPill,
body[data-theme] #versionPill,
body[data-theme] #filterPill,
body[data-theme] #stationPill,
body[data-theme] #trendPill {
  color: var(--cp-text) !important;
}

body[data-theme] #viewNav:not([hidden]) {
  position: sticky !important;
  top: 12px !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0) !important;
  border-radius: 0 0 14px 14px !important;
  background: unset !important;
  background-color: unset !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  overflow: visible !important;
  transition: none !important;
  z-index: 8 !important;
}

body[data-theme] #viewNav:not([hidden]):hover,
body[data-theme] #viewNav:not([hidden]):focus-within {
  width: 100% !important;
}

body[data-theme] #viewNav:not([hidden])~.viewPage {
  margin-left: 0 !important;
}

body[data-theme] #viewNav .viewSwitch {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-theme] #viewNav .viewSwitchBtn {
  width: 100% !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--cp-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
  white-space: normal !important;
  overflow: visible !important;
}

body[data-theme] #viewNav:not([hidden]):hover .viewSwitchBtn,
body[data-theme] #viewNav:not([hidden]):focus-within .viewSwitchBtn {
  min-height: 48px !important;
  padding: 8px 10px !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--cp-muted) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body[data-theme] #viewNav .viewSwitchBtn:hover:not(:disabled) {
  background: var(--cp-primary-soft) !important;
  border-color: transparent !important;
  color: var(--cp-text) !important;
}

body[data-theme] #viewNav .viewSwitchBtn.isActive {
  background: var(--cp-primary-soft) !important;
  border-color: transparent !important;
  color: var(--cp-primary) !important;
  box-shadow: none !important;
}

@media (min-width: 1100px) {
  body[data-theme] .reportHeader {
    padding-left: 0 !important;
  }
}

body[data-theme] .record {
  border: 1px solid var(--cp-line) !important;
  border-radius: 18px !important;
  background: var(--cp-panel) !important;
  box-shadow: none !important;
  overflow: hidden;
}

body[data-theme] .recordDetails {
  padding: 0 12px 12px !important;
  border-top: 1px solid var(--cp-line) !important;
  background: var(--cp-panel-soft) !important;
}

body[data-theme] .bedBanner {
  padding: 12px 44px 12px 12px !important;
  background: transparent !important;
}

body[data-theme] .bedBannerRow {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

body[data-theme] .bedBoxTop {
  min-height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  border-right: 0 !important;
  border-radius: 14px !important;
  background: var(--cp-panel-soft) !important;
}

body[data-theme] .bedBoxLabel {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #667085 !important;
}

body[data-theme] .bedBoxValue {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--cp-primary) !important;
}

body[data-theme] .bedBoxWorkload {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--cp-primary) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  padding: 0 6px !important;
}

body[data-theme] .bedBoxWorkload.isUnset {
  color: var(--cp-muted) !important;
}

body[data-theme] .bedBoxTop.isWorkloadLight {
  background: var(--cp-workload-light-soft) !important;
}

body[data-theme] .bedBoxTop.isWorkloadModerate {
  background: var(--cp-workload-moderate-soft) !important;
}

body[data-theme] .bedBoxTop.isWorkloadHeavy {
  background: var(--cp-workload-heavy-soft) !important;
}

body[data-theme] .bedBoxTop.isWorkloadExtreme {
  background: var(--cp-workload-extreme-soft) !important;
}

body[data-theme] .bedBoxTop.isWorkloadLight .bedBoxValue,
body[data-theme] .bedBoxTop.isWorkloadLight .bedBoxWorkload {
  color: var(--cp-workload-light) !important;
}

body[data-theme] .bedBoxTop.isWorkloadModerate .bedBoxValue,
body[data-theme] .bedBoxTop.isWorkloadModerate .bedBoxWorkload {
  color: var(--cp-workload-moderate) !important;
}

body[data-theme] .bedBoxTop.isWorkloadHeavy .bedBoxValue,
body[data-theme] .bedBoxTop.isWorkloadHeavy .bedBoxWorkload {
  color: var(--cp-workload-heavy) !important;
}

body[data-theme] .bedBoxTop.isWorkloadExtreme .bedBoxValue,
body[data-theme] .bedBoxTop.isWorkloadExtreme .bedBoxWorkload {
  color: var(--cp-workload-extreme) !important;
}

body[data-theme] .patientHeroGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

body[data-theme] .patientIdentityStack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-theme] .patientHeroValue {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--cp-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-theme] .patientHeroMetaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-muted);
}

body[data-theme] .patientHeroMetaLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #667085;
}

body[data-theme] .patientHeroStatus {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  justify-self: end !important;
  padding-right: 0 !important;
}

body[data-theme] .patientStatusBadge {
  min-height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body[data-theme] .patientStatusBadge.isCritical {
  background: var(--cp-critical-soft) !important;
  color: var(--cp-critical) !important;
  border-color: rgba(217, 45, 32, 0.18) !important;
}

body[data-theme] .patientStatusBadge.isWatch {
  background: var(--cp-watch-soft) !important;
  color: var(--cp-watch) !important;
  border-color: rgba(181, 71, 8, 0.18) !important;
}

body[data-theme] .patientStatusBadge.isStable {
  background: var(--cp-stable-soft) !important;
  color: var(--cp-stable) !important;
  border-color: rgba(0, 94, 184, 0.16) !important;
}

body[data-theme] .patientStatusSub {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--cp-muted) !important;
}

body[data-theme] .recordSecondaryMeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px;
  padding: 12px 0 14px;
  align-items: stretch;
}

body[data-theme] .recordMetaChip {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  background: var(--cp-chip-bg);
  font-size: 11px;
}

body[data-theme] .recordMetaLabel {
  color: var(--cp-chip-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body[data-theme] .recordMetaValue {
  color: var(--cp-text);
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-theme] .recordWorkloadField .valueEditor {
  font-weight: 800 !important;
}

/* ── Banner Workload Bar (sits between banner and details) ── */
body[data-theme] .bannerWorkloadBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 0 0 var(--ui-radius, 8px) var(--ui-radius, 8px);
  background: var(--ui-bg-alt, rgba(255, 255, 255, 0.04));
  border-top: 1px solid var(--ui-line, rgba(255, 255, 255, 0.06));
  margin-top: -1px;
  transition: background .2s, border-color .2s;
}

body[data-theme] .bannerWorkloadLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cp-text-secondary, #8898aa);
  white-space: nowrap;
}

body[data-theme] .bannerWorkloadSelect {
  flex: 1;
  max-width: 200px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--ui-line, rgba(255, 255, 255, 0.1));
  background: transparent;
  color: var(--cp-text, inherit);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

body[data-theme] .bannerWorkloadSelect option {
  background: #1e1e2e;
  color: #e0e0e0;
}

body[data-theme] .bannerWorkloadSelect:focus {
  outline: 2px solid var(--ui-accent, #5b9bf5);
  outline-offset: 1px;
}

/* Self-coloring workload select */
body[data-theme] .bannerWorkloadBar.isWorkloadLight .bannerWorkloadSelect {
  background: var(--cp-workload-light-soft);
  color: var(--cp-workload-light);
  border-color: var(--cp-workload-light);
}

body[data-theme] .bannerWorkloadBar.isWorkloadModerate .bannerWorkloadSelect {
  background: var(--cp-workload-moderate-soft);
  color: var(--cp-workload-moderate);
  border-color: var(--cp-workload-moderate);
}

body[data-theme] .bannerWorkloadBar.isWorkloadHeavy .bannerWorkloadSelect {
  background: var(--cp-workload-heavy-soft);
  color: var(--cp-workload-heavy);
  border-color: var(--cp-workload-heavy);
}

body[data-theme] .bannerWorkloadBar.isWorkloadExtreme .bannerWorkloadSelect {
  background: var(--cp-workload-extreme-soft);
  color: var(--cp-workload-extreme);
  border-color: var(--cp-workload-extreme);
}

body[data-theme] .recordWorkloadField.isWorkloadLight {
  border-color: var(--cp-workload-light-soft) !important;
}

body[data-theme] .recordWorkloadField.isWorkloadModerate {
  border-color: var(--cp-workload-moderate-soft) !important;
}

body[data-theme] .recordWorkloadField.isWorkloadHeavy {
  border-color: var(--cp-workload-heavy-soft) !important;
}

body[data-theme] .recordWorkloadField.isWorkloadExtreme {
  border-color: var(--cp-workload-extreme-soft) !important;
}

body[data-theme] .nurseDragRow.isWorkloadLight {
  box-shadow: inset 4px 0 0 var(--cp-workload-light), inset 0 0 0 1px var(--ui-line), var(--ui-shadow-sm) !important;
}

body[data-theme] .nurseDragRow.isWorkloadModerate {
  box-shadow: inset 4px 0 0 var(--cp-workload-moderate), inset 0 0 0 1px var(--ui-line), var(--ui-shadow-sm) !important;
}

body[data-theme] .nurseDragRow.isWorkloadHeavy {
  box-shadow: inset 4px 0 0 var(--cp-workload-heavy), inset 0 0 0 1px var(--ui-line), var(--ui-shadow-sm) !important;
}

body[data-theme] .nurseDragRow.isWorkloadExtreme {
  box-shadow: inset 4px 0 0 var(--cp-workload-extreme), inset 0 0 0 1px var(--ui-line), var(--ui-shadow-sm) !important;
}

body[data-theme] .nurseDropChipWorkload {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  padding: 0 5px !important;
  margin-left: 6px !important;
  order: 2 !important;
  color: var(--cp-text) !important;
}

body[data-theme] .nurseDropChip button {
  order: 3 !important;
}

body[data-theme] .nurseDropChip.isWorkloadLight {
  box-shadow: inset 0 0 0 1px var(--cp-workload-light-soft), inset 3px 0 0 var(--cp-workload-light) !important;
}

body[data-theme] .nurseDropChip.isWorkloadModerate {
  box-shadow: inset 0 0 0 1px var(--cp-workload-moderate-soft), inset 3px 0 0 var(--cp-workload-moderate) !important;
}

body[data-theme] .nurseDropChip.isWorkloadHeavy {
  box-shadow: inset 0 0 0 1px var(--cp-workload-heavy-soft), inset 3px 0 0 var(--cp-workload-heavy) !important;
}

body[data-theme] .nurseDropChip.isWorkloadExtreme {
  box-shadow: inset 0 0 0 1px var(--cp-workload-extreme-soft), inset 3px 0 0 var(--cp-workload-extreme) !important;
}

body[data-theme] .nurseDropChipWorkload.isWorkloadLight {
  background: var(--cp-workload-light-soft) !important;
  color: var(--cp-workload-light) !important;
}

body[data-theme] .nurseDropChipWorkload.isWorkloadModerate {
  background: var(--cp-workload-moderate-soft) !important;
  color: var(--cp-workload-moderate) !important;
}

body[data-theme] .nurseDropChipWorkload.isWorkloadHeavy {
  background: var(--cp-workload-heavy-soft) !important;
  color: var(--cp-workload-heavy) !important;
}

body[data-theme] .nurseDropChipWorkload.isWorkloadExtreme {
  background: var(--cp-workload-extreme-soft) !important;
  color: var(--cp-workload-extreme) !important;
}

body[data-theme] .field {
  border: 1px solid var(--cp-line) !important;
  min-height: 84px !important;
  padding: 12px 12px 11px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--cp-panel), var(--cp-panel-soft)) !important;
  box-shadow: none !important;
}

body[data-theme] .label {
  color: var(--cp-primary) !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  margin-bottom: 6px !important;
}

body[data-theme] .value {
  color: var(--cp-text) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

body[data-theme] .toggleHint {
  width: 28px !important;
  height: 28px !important;
  top: 12px !important;
  right: 10px !important;
  border: 1px solid var(--cp-line) !important;
  background: var(--cp-panel-soft) !important;
  color: var(--cp-primary) !important;
  box-shadow: none !important;
}

body[data-theme] .dashboardTitle,
body[data-theme] .assignmentTitle,
body[data-theme] .bedBoardTitle,
body[data-theme] .teamBoardTitle {
  color: var(--cp-text) !important;
}

body[data-theme] .dashboardSubHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 2px;
}

body[data-theme] .dashboardScope {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cp-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-theme="light"] .trendScope {
  border: 1px solid #b8c3d3 !important;
  background: #eef3fa !important;
  color: #21476f !important;
}

body[data-theme] .dashboardFilterBar,
body[data-theme] .dashboardFilterChipGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body[data-theme] .dashboardFilterChip,
body[data-theme] .dashFilterClearBtn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--cp-line) !important;
  border-radius: 999px !important;
  background: var(--cp-panel-soft) !important;
  color: var(--cp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body[data-theme] .dashboardFilterChip {
  background: var(--cp-primary-soft) !important;
  color: var(--cp-primary) !important;
  border-color: rgba(0, 94, 184, 0.16) !important;
}

body[data-theme] .dashFilterClearBtn {
  background: transparent !important;
}

body[data-theme] .dashboardGrid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-theme] .dashCard {
  grid-column: span 4;
  padding: 14px 14px 12px !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 18px !important;
  background: var(--cp-panel) !important;
  box-shadow: none !important;
}

body[data-theme] .dashCard.wide {
  grid-column: span 6;
}

body[data-theme] .dashCard.hero {
  grid-column: span 4;
}

body[data-theme] .dashCard.commandMetricCard {
  grid-column: span 3 !important;
  min-height: 176px;
  background: linear-gradient(180deg, var(--cp-panel), var(--cp-panel-soft)) !important;
}

body[data-theme] .dashEyebrow {
  color: var(--cp-primary) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body[data-theme] .dashHint {
  color: var(--cp-muted) !important;
  font-size: 11px !important;
}

body[data-theme] .dashCountValue,
body[data-theme] .commandMetricValue {
  margin-top: 10px;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--cp-text) !important;
}

body[data-theme] .dashCountMeta,
body[data-theme] .commandMetricMeta {
  margin-top: 6px;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--cp-muted) !important;
}

body[data-theme] .dashSegmentMeter {
  display: flex;
  gap: 4px;
  height: 8px;
  margin-top: 14px;
}

body[data-theme] .dashSegment {
  min-width: 12px;
  border-radius: 999px;
  background: #d0d5dd;
}

body[data-theme] .dashSegment.isCritical {
  background: var(--cp-critical);
}

body[data-theme] .dashSegment.isWatch {
  background: #f79009;
}

body[data-theme] .dashSegment.isStable,
body[data-theme] .dashSegment.isOccupied {
  background: var(--cp-primary);
}

body[data-theme] .dashSegment.isVacant {
  background: var(--cp-vacant);
}

body[data-theme] .dashSegment.isBlocked {
  background: var(--cp-blocked);
}

body[data-theme] .dashSegment.isWorkloadLight {
  background: var(--cp-workload-light);
}

body[data-theme] .dashSegment.isWorkloadModerate {
  background: var(--cp-workload-moderate);
}

body[data-theme] .dashSegment.isWorkloadHeavy {
  background: var(--cp-workload-heavy);
}

body[data-theme] .dashSegment.isWorkloadExtreme {
  background: var(--cp-workload-extreme);
}

body[data-theme] .dashSegment.isWorkloadUnset {
  background: #667085;
}

body[data-theme] .dashMiniStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

body[data-theme] .dashMiniStat {
  padding: 8px 9px;
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  background: var(--cp-panel-soft);
}

body[data-theme] .dashMiniStat.isCritical .dashMiniValue {
  color: var(--cp-critical);
}

body[data-theme] .dashMiniStat.isWatch .dashMiniValue {
  color: var(--cp-watch);
}

body[data-theme] .dashMiniStat.isStable .dashMiniValue {
  color: var(--cp-primary);
}

body[data-theme] .dashMiniStat.isWorkloadLight .dashMiniValue {
  color: var(--cp-workload-light);
}

body[data-theme] .dashMiniStat.isWorkloadModerate .dashMiniValue {
  color: var(--cp-workload-moderate);
}

body[data-theme] .dashMiniStat.isWorkloadHeavy .dashMiniValue {
  color: var(--cp-workload-heavy);
}

body[data-theme] .dashMiniStat.isWorkloadExtreme .dashMiniValue {
  color: var(--cp-workload-extreme);
}

body[data-theme] .dashMiniLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #667085;
}

body[data-theme] .dashMiniValue {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cp-text);
}

body[data-theme] .dashBarRow {
  border-radius: 12px !important;
  background: var(--cp-panel-soft) !important;
}

body[data-theme] .dashBarTrack {
  background: rgba(0, 94, 184, 0.08) !important;
}

body[data-theme] .dashBarFill {
  background: linear-gradient(90deg, #005eb8, #3b82c4) !important;
}

body[data-theme] .dashStat,
body[data-theme] .dashMiniStat,
body[data-theme] .dashBarRow {
  box-shadow: none !important;
}

/* Trend cards: strengthen contrast for chart, deltas, and key metrics */
body[data-theme] .trendCardHint,
body[data-theme] .trendCurrentMeta,
body[data-theme] .trendCoverage {
  color: var(--cp-muted) !important;
}

body[data-theme] .trendCurrent {
  border: 1px solid var(--cp-line) !important;
  background: linear-gradient(180deg, var(--cp-panel-soft), var(--cp-rail)) !important;
  box-shadow: none !important;
}

body[data-theme] .trendCurrentValue {
  color: var(--cp-text) !important;
}

body[data-theme] .trendDelta {
  border: 1px solid var(--cp-line) !important;
  background: var(--cp-panel-soft) !important;
  color: var(--cp-primary) !important;
}

body[data-theme] .trendDelta.isUp {
  color: #0f6f3e !important;
  border-color: rgba(6, 118, 71, 0.32) !important;
  background: rgba(6, 118, 71, 0.14) !important;
}

body[data-theme] .trendDelta.isDown {
  color: #a1231a !important;
  border-color: rgba(217, 45, 32, 0.30) !important;
  background: rgba(217, 45, 32, 0.12) !important;
}

body[data-theme] .trendChartBox {
  border: 1px solid var(--cp-line) !important;
  background: linear-gradient(180deg, var(--cp-panel-soft), var(--cp-panel)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body[data-theme] .trendGridLine {
  stroke: rgba(21, 51, 89, 0.18) !important;
}

body[data-theme] .trendAxisLine {
  stroke: rgba(21, 51, 89, 0.28) !important;
}

body[data-theme] .trendSeriesLine {
  stroke: var(--cp-primary) !important;
  stroke-width: 3 !important;
}

body[data-theme] .trendSeriesDot {
  fill: var(--cp-primary) !important;
  stroke: #ffffff !important;
  stroke-width: 2.2 !important;
}

body[data-theme] .trendAxisLabel {
  fill: var(--cp-muted) !important;
}

body[data-theme] .trendValueLabel {
  fill: var(--cp-text) !important;
  font-weight: 800 !important;
}

body[data-theme="dark"] .trendGridLine {
  stroke: rgba(159, 196, 255, 0.18) !important;
}

body[data-theme="dark"] .trendAxisLine {
  stroke: rgba(159, 196, 255, 0.30) !important;
}

body[data-theme="dark"] .trendSeriesDot {
  fill: var(--cp-primary) !important;
  stroke: #0b1220 !important;
}

body[data-theme="dark"] .trendDelta.isUp {
  color: #9fe6bf !important;
  border-color: rgba(106, 210, 154, 0.34) !important;
  background: rgba(106, 210, 154, 0.18) !important;
}

body[data-theme="dark"] .trendDelta.isDown {
  color: #ffb7ac !important;
  border-color: rgba(255, 107, 95, 0.34) !important;
  background: rgba(255, 107, 95, 0.18) !important;
}

body[data-theme="light"] .dashStat {
  border-color: rgba(21, 51, 89, 0.14) !important;
  background: linear-gradient(180deg, #c7d0db, #b8c2cf) !important;
}

body[data-theme="light"] .dashStatLabel {
  color: #5f7692 !important;
}

body[data-theme="light"] .dashStatValue {
  color: #123f73 !important;
}

body[data-theme="light"] .dashQualityBadge {
  border-color: rgba(21, 51, 89, 0.14) !important;
  background: linear-gradient(180deg, #c7d0db, #b8c2cf) !important;
  color: #4f6783 !important;
}

body[data-theme="light"] .dashQualityBadgeValue {
  color: #123f73 !important;
}

body[data-theme="light"] .dashMiniStat {
  border-color: rgba(21, 51, 89, 0.14) !important;
  background: linear-gradient(180deg, #d8e2ee, #cad6e3) !important;
}

body[data-theme="light"] .dashMiniLabel {
  color: #5a6f89 !important;
}

body[data-theme="light"] .dashMiniValue {
  color: #16365f !important;
}

@media (max-width: 1280px) {
  body[data-theme] .dashCard.commandMetricCard {
    grid-column: span 6 !important;
  }
}

@media (max-width: 1100px) {
  body[data-theme] .workspaceContent {
    padding-left: 18px !important;
  }

  body[data-theme] #viewNav:not([hidden]) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 12px !important;
    overflow: visible !important;
  }

  body[data-theme] #viewNav:not([hidden])~.viewPage {
    margin-left: 0 !important;
  }

  body[data-theme] #viewNav .viewSwitch {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 6px !important;
    justify-content: stretch !important;
  }

  body[data-theme] #viewNav .viewSwitchBtn,
  body[data-theme] #viewNav:not([hidden]):hover .viewSwitchBtn,
  body[data-theme] #viewNav:not([hidden]):focus-within .viewSwitchBtn {
    width: 100% !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 4px !important;
    white-space: normal !important;
    flex-direction: row !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--cp-muted) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body[data-theme] .dashboardGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-theme] .dashCard,
  body[data-theme] .dashCard.wide {
    grid-column: span 6 !important;
  }

  body[data-theme] .dashCard.commandMetricCard {
    grid-column: span 3 !important;
  }
}

@media (max-width: 760px) {
  body[data-theme] .reportHeader .meta {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body[data-theme] .patientHeroGrid,
  body[data-theme] .bedBannerRow {
    grid-template-columns: 1fr !important;
  }

  body[data-theme] .patientHeroStatus {
    align-items: flex-start !important;
    justify-self: start !important;
  }

  body[data-theme] .recordSecondaryMeta {
    grid-template-columns: 1fr;
  }

  body[data-theme] .dashboardGrid {
    grid-template-columns: 1fr !important;
  }

  body[data-theme] .dashCard,
  body[data-theme] .dashCard.wide,
  body[data-theme] .dashCard.hero,
  body[data-theme] .dashCard.commandMetricCard {
    grid-column: auto !important;
  }

  body[data-theme] .dashMiniStats {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure multi-column view tabs (avoid tall one-column stack) */
body[data-theme] #viewNav .viewSwitch {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  grid-auto-flow: row;
  gap: 8px !important;
  align-items: start;
}

body[data-theme] #viewNav .viewSwitchBtn {
  width: 100% !important;
  min-width: 0 !important; /* allow grid tracks to shrink */
  white-space: normal !important;
}

/* Remove wasted top padding when the nav rail expands */
body[data-theme] #viewNav:not([hidden]):hover,
body[data-theme] #viewNav:not([hidden]):focus-within {
  padding: 12px !important;
}

/* Compact header/viewer refinements */
body[data-theme] .viewerBar {
  width: 100% !important;
}

body[data-theme] .viewerBar #viewNav:not([hidden]) {
  position: static !important;
  top: auto !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: auto !important;
}

body[data-theme] .viewerBar #viewNav .viewSwitch {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

body[data-theme] .viewerBar #viewNav .viewSwitchBtn,
body[data-theme] .viewerBar #viewNav:not([hidden]):hover .viewSwitchBtn,
body[data-theme] .viewerBar #viewNav:not([hidden]):focus-within .viewSwitchBtn {
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

body[data-theme] .viewerBar #viewNav:not([hidden])~.viewPage {
  margin-left: 0 !important;
}

body[data-theme] .reportHeaderDisplayLine {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

body[data-theme] #currentReportPill.currentReportInline {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--cp-muted) !important;
  opacity: .5 !important;
}

body[data-theme] .pillValueBubble {
  border-color: var(--cp-line) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: var(--cp-text) !important;
}

body[data-theme] .bedBoardSection {
  grid-template-columns: minmax(0, 80%) minmax(190px, 20%) !important;
}

body[data-theme] .bedBoardExtraGroupGrid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

#viewNav > div.viewSwitch,
body[data-theme] #viewNav > div.viewSwitch,
body[data-theme] .viewerBar #viewNav > div.viewSwitch {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  width: 100% !important;
  overflow-x: auto !important;
}

#viewNav > div.viewSwitch > .viewSwitchBtn,
body[data-theme] #viewNav > div.viewSwitch > .viewSwitchBtn,
body[data-theme] .viewerBar #viewNav > div.viewSwitch > .viewSwitchBtn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

.nurseChargeRoster[hidden] {
  display: none !important;
}

.nurseChargeRoster[hidden]+.nurseChargeFunctionGrid {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .viewerBar #viewNav,
  body[data-theme] .viewerBar #viewNav:not([hidden]) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body[data-theme] .viewerBar #viewNav .viewSwitch {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  body[data-theme] .viewerBar #viewNav .viewSwitchBtn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body[data-theme] .bedBoardSection {
    grid-template-columns: 1fr !important;
  }
}