:root {
  /* ── Legacy aliases (keep existing code working) ── */
  --navy:       #0D1117;
  --coral:      #FF6B35;
  --gold:       #F59E0B;
  --warm:       #F8FFFE;
  --success:    #059669;
  --warning:    #D97706;
  --line:       #E2EEEC;
  --radius:     12px;
  --ink-2:      #374151;

  /* ── Brand ── */
  --teal:           #0EA5A0;
  --teal-light:     #22D3C8;
  --teal-dark:      #0B7A8C;
  --teal-glow:      rgba(14,165,160,0.15);
  --teal-subtle:    rgba(14,165,160,0.08);

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 45%, #38BDF8 100%);
  --gradient-hero:  linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 50%, #38BDF8 100%);
  --gradient-warm:  linear-gradient(135deg, #f8fffe 0%, #f0faf9 100%);
  --gradient-card:  linear-gradient(145deg, #ffffff 0%, #f8fffe 100%);

  /* ── Priority ── */
  --critical:         #DC2626;
  --critical-bg:      #FFF1F1;
  --critical-border:  #FECACA;
  --critical-glow:    rgba(220,38,38,0.12);
  --due-today:        #EA580C;
  --due-today-bg:     #FFF7ED;
  --due-today-border: #FED7AA;
  --overdue:          #D97706;
  --overdue-bg:       #FFFBEB;
  --overdue-border:   #FDE68A;
  --incomplete:       #6B7280;
  --incomplete-bg:    #F9FAFB;
  --incomplete-border:#E5E7EB;
  --on-track:         #059669;
  --on-track-bg:      #ECFDF5;
  --on-track-border:  #A7F3D0;
  --on-track-glow:    rgba(5,150,105,0.12);

  /* ── Surfaces (light) ── */
  --bg-primary:     #FAFFFE;
  --bg-secondary:   #F0FAF9;
  --bg-tertiary:    #E8F5F3;
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-glass:  rgba(255,255,255,0.85);
  --border:         #E2EEEC;
  --border-subtle:  #EEF6F5;

  /* ── Typography ── */
  --ink:            #0D1117;
  --ink-secondary:  #374151;
  --muted:          #6B7280;
  --muted-light:    #9CA3AF;
  --on-teal:        #FFFFFF;

  /* ── Shadows ── */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-teal:    0 4px 20px rgba(14,165,160,0.25);
  --shadow-teal-lg: 0 8px 32px rgba(14,165,160,0.30);

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      0.12s;
  --t-base:      0.20s;
  --t-slow:      0.35s;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg-primary:       #0A0F0E;
  --bg-secondary:     #0F1614;
  --bg-tertiary:      #141C1A;
  --surface:          #1A2422;
  --surface-raised:   #1F2C2A;
  --surface-glass:    rgba(26,36,34,0.90);
  --border:           #2A3A37;
  --border-subtle:    #1F2E2B;
  --line:             #2A3A37;
  --ink:              #F0FAF9;
  --ink-secondary:    #CBD5E1;
  --ink-2:            #CBD5E1;
  --muted:            #94A3B8;
  --muted-light:      #64748B;
  --navy:             #F0FAF9;
  --gradient-card:    linear-gradient(145deg, #1A2422 0%, #1F2C2A 100%);
  --gradient-warm:    linear-gradient(135deg, #0A0F0E 0%, #0F1614 100%);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.50);
  --critical-bg:      rgba(220,38,38,0.12);
  --critical-border:  rgba(220,38,38,0.30);
  --due-today-bg:     rgba(234,88,12,0.12);
  --due-today-border: rgba(234,88,12,0.30);
  --overdue-bg:       rgba(217,119,6,0.12);
  --overdue-border:   rgba(217,119,6,0.30);
  --incomplete-bg:    rgba(107,114,128,0.12);
  --incomplete-border:rgba(107,114,128,0.30);
  --on-track-bg:      rgba(5,150,105,0.12);
  --on-track-border:  rgba(5,150,105,0.30);
}

* { box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg-primary);
  transition: background var(--t-slow), color var(--t-slow);
}
.app-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.brand { font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--teal); letter-spacing: -.3px; }
.brand span { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; }

.nav-btn {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-btn:hover { background: var(--surface); color: var(--ink); }
.nav-btn.active { background: #e8f5f3; color: var(--teal); font-weight: 600; }

/* ── Main canvas ─────────────────────────────────────────── */
.main { padding: 20px; background: #fff; }

/* ── Hero Topbar ─────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: -20px -20px 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand-lockup { display: flex; flex-direction: column; }
.brand-name { font-size: 20px; font-weight: 800; color: var(--teal); letter-spacing: -.3px; }
.brand-tagline { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.header-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hstat-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hstat-chip .hstat-n { font-size: 15px; font-weight: 700; }
.hstat-chip.critical { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.hstat-chip.warning  { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.hstat-chip.success  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.hstat-chip.neutral  { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.header-author { display: flex; flex-direction: column; text-align: right; }
.author-name { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.author-locs { font-size: 11px; color: var(--muted); margin-top: 1px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.top-actions button, .console-row button, .modal-footer button {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.top-actions button:hover { background: var(--teal-dark); }
.top-actions .ghost-action {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.top-actions .ghost-action:hover { background: #e8f5f3; color: var(--teal); }

.critical-ops-ticker {
  margin-bottom: 10px;
  border: 1px solid #fecaca;
  background: linear-gradient(135deg, #7f1d1d 0%, #be123c 42%, #1d4ed8 100%);
  border-radius: 14px;
  padding: 12px;
  color: #fff1f2;
}
.critical-ops-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.critical-ops-head h3 { margin: 0; font-size: 16px; color: #fff; }
.critical-ops-head p { margin: 3px 0 0; font-size: 12px; color: #ffe4e6; }
.critical-ops-time {
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(15,23,42,.3);
  border-radius: 999px;
  padding: 4px 8px;
}
.critical-ops-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 8px;
}
.critical-ops-chip {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(15,23,42,.28);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 5px;
}
.critical-ops-chip span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #ffe4e6; }
.critical-ops-chip strong { font-size: 18px; color: #fff; line-height: 1; }
.critical-ops-chip p { margin: 0; font-size: 11px; color: #ffe4e6; }
.critical-ops-chip button {
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}

.live-command-clock {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
}
.clock-card {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.clock-card.primary {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
}
.clock-card.warning {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff1f2, #ffffff);
}
.clock-card span {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #475569;
}
.clock-card strong {
  font-size: 24px;
  color: #0f172a;
  line-height: 1.05;
}
.clock-card p {
  margin: 0;
  font-size: 12px;
  color: #475569;
}
.clock-card button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}
.clock-card button:hover {
  border-color: var(--teal);
  color: #0f766e;
}

.outcome-snapshot-bar {
  margin-bottom: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.outcome-snapshot-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.outcome-snapshot-head h3 { margin: 0; color: #312e81; font-size: 15px; }
.outcome-snapshot-head p { margin: 3px 0 0; font-size: 12px; color: #4338ca; }
.outcome-snapshot-time {
  font-size: 11px;
  font-weight: 800;
  color: #312e81;
  border: 1px solid #c7d2fe;
  background: #e0e7ff;
  border-radius: 999px;
  padding: 4px 8px;
}
.outcome-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}
.outcome-snapshot-card {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.outcome-snapshot-card strong { font-size: 22px; line-height: 1; color: #0f172a; }
.outcome-snapshot-card span { font-size: 11px; color: #334155; font-weight: 700; }
.outcome-snapshot-card p { margin: 0; font-size: 11px; color: #475569; }
.outcome-snapshot-card button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.outcome-snapshot-card.good { border-color: #86efac; background: #f0fdf4; }
.outcome-snapshot-card.warn { border-color: #fde68a; background: #fffbeb; }
.outcome-snapshot-card.risk { border-color: #fecaca; background: #fff1f2; }

.shift-focus-ribbon {
  margin-bottom: 10px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #0ea5e9 100%);
  border-radius: 14px;
  padding: 12px;
  color: #e0f2fe;
}
.shift-focus-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.shift-focus-head h3 { margin: 0; font-size: 16px; color: #f8fafc; }
.shift-focus-head p { margin: 3px 0 0; font-size: 12px; color: #bae6fd; }
.shift-focus-time {
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(186,230,253,.45);
  background: rgba(15,23,42,.35);
  color: #e0f2fe;
  border-radius: 999px;
  padding: 4px 8px;
}
.shift-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
}
.focus-ribbon-card {
  border: 1px solid rgba(186,230,253,.4);
  border-radius: 10px;
  background: rgba(15,23,42,.35);
  padding: 9px;
  display: grid;
  gap: 6px;
}
.focus-ribbon-card span {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(186,230,253,.5);
  background: rgba(15,23,42,.45);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}
.focus-ribbon-card strong { font-size: 20px; color: #f8fafc; line-height: 1; }
.focus-ribbon-card p { margin: 0; font-size: 12px; color: #bae6fd; }
.focus-ribbon-card button {
  border: 1px solid rgba(186,230,253,.55);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}
.focus-ribbon-card.critical { border-color: rgba(252,165,165,.7); }
.focus-ribbon-card.pending { border-color: rgba(253,224,71,.7); }
.focus-ribbon-card.readiness { border-color: rgba(134,239,172,.7); }

.shift-targets-board {
  margin-bottom: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.shift-targets-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.shift-targets-head h3 { margin: 0; color: #312e81; font-size: 15px; }
.shift-targets-head p { margin: 3px 0 0; font-size: 12px; color: #4338ca; }
.shift-targets-time {
  font-size: 11px;
  font-weight: 800;
  color: #312e81;
  border: 1px solid #c7d2fe;
  background: #e0e7ff;
  border-radius: 999px;
  padding: 4px 8px;
}
.shift-targets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 8px;
}
.shift-target-card {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.shift-target-card.at-risk { border-color: #fecaca; background: #fff1f2; }
.shift-target-label-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}
.shift-target-label-row span {
  font-size: 11px;
  font-weight: 800;
  color: #1e1b4b;
  text-transform: uppercase;
}
.shift-target-card strong {
  font-size: 21px;
  line-height: 1;
  color: #0f172a;
}
.shift-target-card strong small {
  font-size: 12px;
  color: #64748b;
}
.status-pill {
  font-size: 10px;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #166534;
}
.status-pill.at-risk {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}
.target-meter {
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.target-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
}
.shift-target-card.at-risk .target-meter span {
  background: linear-gradient(90deg, #dc2626, #fb7185);
}
.shift-target-card p { margin: 0; font-size: 11px; color: #475569; }
.shift-target-card button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

.intake-velocity-deck {
  margin-bottom: 10px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.intake-velocity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.intake-velocity-head h3 { margin: 0; color: #1e3a8a; font-size: 15px; }
.intake-velocity-head p { margin: 3px 0 0; font-size: 12px; color: #1d4ed8; }
.intake-velocity-pill {
  font-size: 11px;
  font-weight: 800;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  background: #dbeafe;
  border-radius: 999px;
  padding: 4px 8px;
}
.intake-velocity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(165px, 1fr));
  gap: 8px;
}
.velocity-card {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.velocity-card.risk { border-color: #fecaca; background: #fff1f2; }
.velocity-card.steady { border-color: #bfdbfe; background: #f8fbff; }
.velocity-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.velocity-card-head h4 { margin: 0; font-size: 13px; color: #0f172a; }
.velocity-card-head strong { font-size: 13px; color: #1e3a8a; }
.velocity-card p { margin: 0; font-size: 11px; color: #475569; }
.velocity-track {
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.velocity-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
}
.velocity-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.velocity-actions button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}


.ownership-gap-board {
  margin-bottom: 10px;
  border: 1px solid #fbcfe8;
  background: linear-gradient(180deg, #fdf2f8, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.ownership-gap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.ownership-gap-head h3 { margin: 0; color: #831843; font-size: 15px; }
.ownership-gap-head p { margin: 3px 0 0; font-size: 12px; color: #9d174d; }
.ownership-gap-pill {
  font-size: 11px;
  font-weight: 800;
  color: #831843;
  border: 1px solid #f9a8d4;
  background: #fce7f3;
  border-radius: 999px;
  padding: 4px 8px;
}
.ownership-gap-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ownership-gap-kpis span {
  border: 1px solid #f9a8d4;
  background: #fff;
  color: #9d174d;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 9px;
}
.ownership-gap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 8px;
}
.ownership-gap-card {
  border: 1px solid #fbcfe8;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.ownership-gap-card strong { font-size: 13px; color: #500724; }
.ownership-gap-card p { margin: 0; font-size: 11px; color: #6b2043; }
.ownership-gap-card.critical { border-color: #fecaca; background: #fff1f2; }
.ownership-gap-card.warn { border-color: #fde68a; background: #fffbeb; }
.ownership-gap-card.new { border-color: #fbcfe8; background: #fdf2f8; }
.ownership-gap-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ownership-gap-actions button {
  border: 1px solid #f9a8d4;
  border-radius: 8px;
  background: #fff;
  color: #831843;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}
.ownership-gap-empty {
  margin: 0;
  font-size: 12px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px;
}

.rescue-drawer {
  margin-bottom: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.rescue-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.rescue-drawer-head h3 { margin: 0; color: #312e81; font-size: 15px; }
.rescue-drawer-head p { margin: 3px 0 0; font-size: 12px; color: #4338ca; }
.rescue-drawer-head-actions { display: flex; align-items: center; gap: 8px; }
.rescue-drawer-count {
  font-size: 11px;
  font-weight: 800;
  color: #3730a3;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 4px 8px;
}
.rescue-drawer-toggle {
  border: 1px solid #c7d2fe;
  background: #fff;
  color: #312e81;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
}
.rescue-drawer-strip {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 8px;
}
.rescue-drawer-card {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.rescue-rank {
  width: fit-content;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  padding: 3px 8px;
}
.rescue-drawer-card strong { font-size: 13px; color: #0f172a; }
.rescue-drawer-card p { margin: 0; font-size: 11px; color: #475569; }
.rescue-drawer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rescue-drawer-actions button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}
.rescue-drawer-card.critical { border-color: #fecaca; background: #fff1f2; }
.rescue-drawer-card.pending { border-color: #fde68a; background: #fffbeb; }
.rescue-drawer-card.watch { border-color: #bfdbfe; background: #eff6ff; }
.rescue-drawer-empty {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.rescue-command-bar {
  margin-bottom: 10px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.rescue-command-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.rescue-command-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.rescue-command-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.rescue-command-stamp {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.rescue-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 8px;
}
.rescue-lane {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.rescue-lane .lane-label {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}
.rescue-lane strong { color: #0f172a; font-size: 16px; }
.rescue-lane p { margin: 0; font-size: 12px; color: #475569; }
.rescue-lane button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.rescue-lane.critical { border-color: #fecaca; background: #fff1f2; }
.rescue-lane.warn { border-color: #fde68a; background: #fffbeb; }
.rescue-lane.clear { border-color: #bbf7d0; background: #f0fdf4; }
.rescue-lane.pending { border-color: #ddd6fe; background: #f5f3ff; }
.rescue-lane.admits { border-color: #bfdbfe; background: #eff6ff; }

.rescue-sprint {
  margin-bottom: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.rescue-sprint-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.rescue-sprint-head h3 { margin: 0; color: #312e81; font-size: 15px; }
.rescue-sprint-head p { margin: 3px 0 0; font-size: 12px; color: #4338ca; }
.rescue-progress {
  font-size: 12px;
  font-weight: 800;
  color: #1e1b4b;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 4px 10px;
}
.rescue-progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.rescue-progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #22c55e);
}
.rescue-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 8px;
}
.rescue-task {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}
.rescue-task strong { display: block; color: #0f172a; font-size: 12px; }
.rescue-task p { margin: 4px 0 0; font-size: 11px; color: #475569; }
.rescue-task.done { border-color: #86efac; background: #f0fdf4; }
.rescue-task button {
  margin-top: 8px;
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}
.rescue-task.done button {
  border-color: #86efac;
  color: #166534;
  background: #ecfdf5;
}
.rescue-reset-btn {
  margin-top: 8px;
  border: 1px solid #c7d2fe;
  background: #fff;
  color: #3730a3;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.mission-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.pulse-card {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.pulse-card h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
}
.pulse-card p {
  margin: 6px 0;
  font-size: 13px;
  color: #1f2937;
}
.pulse-card strong {
  color: var(--navy);
  font-size: 14px;
}
.pulse-card.triage-alert {
  border-color: #fca5a5;
  background: linear-gradient(180deg, #fff1f2, #fff);
}
.pulse-card.triage-warn {
  border-color: #fcd34d;
  background: linear-gradient(180deg, #fffbeb, #fff);
}
.pulse-card.triage-ok {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4, #fff);
}

.sla-breach-board {
  margin-bottom: 10px;
  border: 1px solid #f4c7c3;
  background: linear-gradient(180deg, #fff7f6, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.sla-breach-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.sla-breach-head h3 { margin: 0; color: #7f1d1d; font-size: 15px; }
.sla-breach-head p { margin: 3px 0 0; font-size: 12px; color: #7c2d12; }
.sla-total, .sla-clear {
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 9px;
}
.sla-total { color: #9f1239; background: #ffe4e6; border: 1px solid #fda4af; }
.sla-clear { color: #166534; background: #f0fdf4; border: 1px solid #86efac; }
.sla-breach-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.sla-lane {
  border: 1px solid #f3d7d4;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}
.sla-lane h4 {
  margin: 0 0 7px;
  font-size: 11px;
  text-transform: uppercase;
  color: #7f1d1d;
}
.sla-risk-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #fee2e2;
  background: #fffafa;
  border-radius: 8px;
  padding: 7px;
  margin-bottom: 6px;
}
.sla-risk-item:last-child { margin-bottom: 0; }
.sla-risk-item strong { color: #7f1d1d; font-size: 13px; }
.sla-risk-item p { margin: 3px 0 0; font-size: 11px; color: #6b7280; }
.sla-risk-item button {
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.sla-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.sla-chip {
  border: 1px solid #fda4af;
  border-radius: 999px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
}
.sla-chip.city {
  border-color: #fdba74;
  background: #fff7ed;
  color: #9a3412;
}
.sla-empty { font-size: 11px; color: #64748b; }

.coordinator-load-radar {
  margin-bottom: 10px;
  border: 1px solid #dbe4f2;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.coord-radar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.coord-radar-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.coord-radar-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.coord-radar-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.coord-radar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}
.coord-radar-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.coord-radar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.coord-radar-top strong { color: #0f172a; font-size: 13px; }
.coord-radar-top span { color: #334155; font-size: 11px; font-weight: 700; }
.coord-radar-card p { margin: 0; font-size: 11px; color: #475569; }
.coord-radar-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.coord-radar-metrics span {
  border: 1px solid #d7dfec;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
}
.coord-radar-card button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.coord-radar-card.high { border-color: #fecaca; background: #fff1f2; }
.coord-radar-card.medium { border-color: #fde68a; background: #fffbeb; }
.coord-radar-card.low { border-color: #bbf7d0; background: #f0fdf4; }

.city-surge-board {
  margin-bottom: 10px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.city-surge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.city-surge-head h3 { margin: 0; color: #0f172a; font-size: 15px; }
.city-surge-head p { margin: 3px 0 0; font-size: 12px; color: #475569; }
.city-surge-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.city-surge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}
.city-surge-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.city-surge-card strong { font-size: 13px; color: #0f172a; }
.city-surge-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.city-surge-badges span {
  border: 1px solid #d7dfec;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
}
.city-surge-card button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.city-surge-card.high { border-color: #fecaca; background: #fff1f2; }
.city-surge-card.medium { border-color: #fde68a; background: #fffbeb; }
.city-surge-card.low { border-color: #bbf7d0; background: #f0fdf4; }
.city-surge-empty {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.live-shift-timeline {
  margin-bottom: 10px;
  border: 1px solid #d7dfec;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.timeline-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.timeline-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.timeline-now {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}
.timeline-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.timeline-chip {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}
.timeline-card strong { font-size: 13px; color: #0f172a; }
.timeline-card p { margin: 0; font-size: 11px; color: #475569; }
.timeline-card button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.timeline-card.critical { border-color: #fecaca; background: #fff1f2; }
.timeline-card.watch { border-color: #fde68a; background: #fffbeb; }
.timeline-card.scheduled { border-color: #bfdbfe; background: #eff6ff; }
.timeline-card.clear { border-color: #bbf7d0; background: #f0fdf4; }

.shift-handoff {
  margin-bottom: 10px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border: 1px solid #d7dfec;
  border-radius: 12px;
  padding: 12px;
}
.shift-handoff-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.shift-handoff-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.shift-handoff-head p { margin: 4px 0 0; font-size: 12px; color: #64748b; }
.handoff-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.shift-handoff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.action-queue-banner {
  margin-bottom: 10px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff1f2, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.action-queue-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.action-queue-head h3 { margin: 0; color: #881337; font-size: 15px; }
.action-queue-head p { margin: 3px 0 0; font-size: 12px; color: #9f1239; }
.action-queue-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.action-kpi {
  border-radius: 999px;
  border: 1px solid #fda4af;
  background: #fff;
  color: #9f1239;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
}
.action-queue-cta {
  border: 1px solid #fb7185;
  background: #be123c;
  color: #fff;
  border-radius: 9px;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.action-queue-cta.safe {
  border-color: #86efac;
  background: #166534;
}

.escalation-cockpit {
  margin-bottom: 10px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.escalation-cockpit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.escalation-cockpit-head h3 { margin: 0; color: #1e3a8a; font-size: 15px; }
.escalation-cockpit-head p { margin: 3px 0 0; font-size: 12px; color: #334155; }
.escalation-cockpit-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.escalation-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
}
.escalation-tile {
  border: 1px solid #d7dfec;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.escalation-tile strong { font-size: 20px; color: #0f172a; line-height: 1; }
.escalation-tile p { margin: 0; font-size: 12px; color: #475569; }
.escalation-tile button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}
.escalation-tile.critical { border-color: #fecaca; background: #fff1f2; }
.escalation-tile.unassigned { border-color: #fde68a; background: #fffbeb; }
.escalation-tile.scheduler { border-color: #bfdbfe; background: #eff6ff; }
.escalation-tile.auto { border-color: #bbf7d0; background: #f0fdf4; }

.live-priority-board {
  margin-bottom: 10px;
  border: 1px solid #dbe4f2;
  background: linear-gradient(180deg, #f8fbff, #fff);
  border-radius: 12px;
  padding: 12px;
}
.live-priority-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.live-priority-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.live-priority-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.live-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
}
.priority-lane {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}
.priority-lane h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  color: #334155;
}
.priority-lane.now { border-color: #fecaca; background: #fff1f2; }
.priority-lane.next { border-color: #fde68a; background: #fffbeb; }
.priority-lane.watch { border-color: #bfdbfe; background: #eff6ff; }
.priority-item {
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  padding: 7px;
  margin-bottom: 6px;
}
.priority-item:last-child { margin-bottom: 0; }
.priority-item strong { font-size: 13px; color: #0f172a; }
.priority-item p { margin: 3px 0 0; font-size: 11px; color: #475569; }
.priority-item button {
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}
.priority-empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.handoff-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.handoff-card h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
}
.handoff-card strong { font-size: 24px; color: var(--navy); line-height: 1; }
.handoff-card button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.handoff-card.critical { border-color: #fecaca; background: #fff1f2; }
.handoff-card.overdue { border-color: #fde68a; background: #fffbeb; }
.handoff-card.admissions { border-color: #bfdbfe; background: #eff6ff; }
.handoff-card.pending { border-color: #ddd6fe; background: #f5f3ff; }

.rapid-recovery-board {
  margin-bottom: 10px;
  border: 1px solid #fdba74;
  background: linear-gradient(180deg, #fff7ed, #fff);
  border-radius: 12px;
  padding: 12px;
}
.rapid-recovery-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.rapid-recovery-head h3 { margin: 0; color: #9a3412; font-size: 15px; }
.rapid-recovery-head p { margin: 3px 0 0; font-size: 12px; color: #9a3412; }
.rapid-recovery-stamp {
  font-size: 12px;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 4px 8px;
}
.rapid-recovery-clear {
  font-size: 12px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 4px 8px;
}
.rapid-recovery-list { display: grid; gap: 8px; }
.rapid-recovery-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #fed7aa;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}
.rapid-recovery-item strong { color: #7c2d12; font-size: 13px; }
.rapid-recovery-item p { margin: 4px 0 0; font-size: 12px; color: #7c2d12; }
.rapid-recovery-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rapid-recovery-actions button {
  border: 1px solid #fdba74;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
}

.conversion-funnel-board {
  margin-bottom: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.conversion-funnel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.conversion-funnel-head h3 { margin: 0; color: #312e81; font-size: 15px; }
.conversion-funnel-head p { margin: 3px 0 0; font-size: 12px; color: #4338ca; }
.conversion-funnel-time {
  font-size: 11px;
  font-weight: 800;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  background: #e0e7ff;
  border-radius: 999px;
  padding: 4px 8px;
}
.conversion-funnel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 8px;
}
.funnel-stage {
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.funnel-stage.origin { border-color: #a5b4fc; background: #eef2ff; }
.funnel-stage-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: #6366f1;
}
.funnel-stage strong { font-size: 22px; line-height: 1; color: #1f2937; }
.funnel-stage p { margin: 0; font-size: 11px; color: #475569; }
.funnel-stage button {
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #f5f3ff;
  color: #312e81;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

.metrics-strip { display: grid; grid-template-columns: repeat(6,minmax(130px,1fr)); gap: 10px; margin-bottom: 14px; }
.metric {
  background: white; border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.metric h4 { margin: 0; font-size: 11px; text-transform: uppercase; color: #64748b; }
.metric p { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: var(--navy); }

.care-gaps-spotlight {
  margin-bottom: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.spotlight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.spotlight-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.spotlight-head p { margin: 0; font-size: 12px; color: #64748b; }
.spotlight-list { display: grid; gap: 8px; }
.spotlight-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}
.spotlight-item strong { color: #7f1d1d; font-size: 13px; }
.spotlight-item p { margin: 4px 0 0; font-size: 12px; color: #475569; }
.spotlight-actions { display: flex; gap: 6px; }
.spotlight-actions button {
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.spotlight-actions button.primary {
  border-color: #f8c8c2;
  background: #fff1f2;
  color: #9f1239;
}
.spotlight-empty {
  margin: 0;
  font-size: 12px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px;
}

.view { display: none; }
.view.active { display: block; }

.pipeline-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.checkbox-inline { font-size: 12px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
.ghost-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.pipeline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.summary-chip {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
}
.summary-chip strong { font-size: 22px; color: var(--navy); line-height: 1; }
.summary-chip span { font-size: 12px; color: #475569; margin-top: 4px; }

.pipeline-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.quick-filter-btn {
  border: 1px solid #d7dfec;
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.quick-filter-btn.active {
  border-color: #4A9B8E;
  background: #e8f7f4;
  color: #0f4f45;
}
.quick-filter-btn.critical.active {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #9f1239;
}

.urgency-radar {
  background: linear-gradient(180deg, #fff7f6, #fff);
  border: 1px solid #f4c7c3;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.urgency-radar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.urgency-radar h4 { margin: 0; font-size: 14px; color: #8b1e1e; }
.urgency-radar small { color: #7c2d12; }
.urgency-list { display: grid; gap: 8px; }
.urgency-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid #f3d7d4;
  border-radius: 10px;
  padding: 8px;
}
.urgency-item strong { color: #7f1d1d; }
.urgency-item p { margin: 3px 0 0; font-size: 12px; color: #475569; }
.urgency-actions { display: flex; gap: 6px; }
.urgency-actions button {
  border: 1px solid #efb9b4;
  background: #fff5f5;
  color: #9f1239;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.urgency-empty {
  margin: 0;
  font-size: 12px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px;
}

.pipeline-workspace {
  display: block;
}
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 8px;
}
.patient-focus-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  display: none;
}
.patient-focus-panel.has-patient {
  display: block;
}
.patient-focus-panel h4 { margin: 0 0 8px; color: var(--navy); }
.patient-focus-panel p { margin: 4px 0; font-size: 12px; color: #334155; }
.focus-empty {
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 10px;
}
.focus-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.focus-actions button {
  border: 1px solid #d3deec;
  background: #f7fafc;
  color: #0f172a;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.focus-actions button.primary {
  background: #e7f6f3;
  border-color: #93d5ca;
  color: #0f4f45;
}
.column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 200px;
  padding: 10px;
}
.column:empty-cards { border: 2px dashed var(--line); }
.column h3 { font-size: 12px; font-weight: 700; margin: 0 0 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
/* Accent border by urgency */
.column[data-badge="red"]    { border-left: 3px solid var(--critical); }
.column[data-badge="yellow"] { border-left: 3px solid var(--warning); }
.column[data-badge="purple"] { border-left: 3px solid #7c3aed; }
.column-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 20px 8px; border: 1px dashed var(--line); border-radius: 8px; }

.badge { font-size: 11px; border-radius: 999px; padding: 2px 8px; font-weight: 700; }
.badge.red    { background: #fef2f2; color: #b91c1c; }
.badge.yellow { background: #fffbeb; color: #92400e; }
.badge.green  { background: #f0fdf4; color: #166534; }
.badge.blue   { background: #eff6ff; color: #1d4ed8; }
.badge.purple { background: #faf5ff; color: #7c3aed; }
.badge.gray   { background: #f9fafb; color: #374151; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  margin-bottom: 4px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}
.card.selectable { cursor: pointer; }
.card:hover { box-shadow: var(--shadow-md); }
.card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(14,165,160,.15);
}
/* Card urgency accents */
.card[data-risk="critical"] { border-left-color: var(--critical); }
.card[data-risk="warning"]  { border-left-color: var(--warning); }
.card[data-risk="stable"]   { border-left-color: var(--success); }

/* Collapsed header row */
.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 6px;
}
.card-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px 2px 2px;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.card-chevron {
  font-size: 15px;
  color: #94a3b8;
  display: inline-block;
}
.card-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact-hint {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Expanded body */
.card-body {
  padding: 0 8px 8px 30px;
  border-top: 1px solid #f1f5f9;
}
.card-collapsed .card-body { display: none; }
.card-expanded  .card-body { display: block; }
.card-expanded .card-chevron { color: var(--teal); }

.card h4 { margin: 0; font-size: 14px; }
.risk-pill {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  letter-spacing: .03em;
}
.risk-critical { background: #fee2e2; color: #991b1b; }
.risk-warning { background: #fef3c7; color: #92400e; }
.risk-stable { background: #dcfce7; color: #166534; }
.card-body p { margin: 4px 0; font-size: 12px; color: #334155; }
.card .danger { color: var(--coral); font-weight: 700; }
.card .actions { display: flex; gap: 6px; margin-top: 8px; }
.card .actions button {
  background: #eef2f8; color: #1f2937; border: 1px solid #d8e0eb; border-radius: 8px; padding: 4px 7px; font-size: 11px;
}

.scheduler-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.view-toggle { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 7px 10px; }
.view-toggle.active { background: var(--navy); color: white; }
.coordinator-load {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.coordinator-load-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.coordinator-load-head h3 { margin: 0; font-size: 14px; color: var(--navy); }
.coordinator-load-head small { color: #64748b; font-size: 11px; }
.coordinator-load-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.capacity-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}
.capacity-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.capacity-top strong { color: #0f172a; font-size: 13px; }
.capacity-top span { color: #475569; font-size: 11px; }
.capacity-bar {
  margin-top: 6px;
  height: 7px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.capacity-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}
.capacity-card p { margin: 6px 0 0; font-size: 11px; color: #475569; }
.capacity-card.busy .capacity-bar i { background: linear-gradient(90deg, #facc15, #f59e0b); }
.capacity-card.overload .capacity-bar i { background: linear-gradient(90deg, #f87171, #dc2626); }
.capacity-card.open { border-color: #cfe8df; }
.admission-readiness-board {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.readiness-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.readiness-head h3 { margin: 0; font-size: 14px; color: var(--navy); }
.readiness-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.readiness-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}
.readiness-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}
.readiness-card.ready { border-color: #86efac; background: #f0fdf4; }
.readiness-card.close { border-color: #fde68a; background: #fffbeb; }
.readiness-card.risk { border-color: #fecaca; background: #fff1f2; }
.readiness-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.readiness-top strong { color: #0f172a; font-size: 13px; }
.readiness-top span { color: #334155; font-size: 11px; font-weight: 700; }
.readiness-card p { margin: 5px 0 0; font-size: 12px; color: #475569; }
.readiness-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.readiness-checks button {
  border: 1px solid #d7dfec;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  cursor: pointer;
}
.readiness-checks button.on {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}
.readiness-empty {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.admission-countdown-rail {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.countdown-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.countdown-head h3 { margin: 0; font-size: 14px; color: var(--navy); }
.countdown-head p { margin: 3px 0 0; font-size: 12px; color: #64748b; }
.countdown-time {
  font-size: 12px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 8px;
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
}
.countdown-card {
  border: 1px solid #dbe4f1;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}
.countdown-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.countdown-top strong { color: #0f172a; font-size: 13px; }
.countdown-top span {
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  padding: 3px 8px;
}
.countdown-card p { margin: 5px 0 0; font-size: 12px; color: #475569; }
.countdown-meta { margin-top: 6px; }
.countdown-meta span {
  font-size: 11px;
  color: #334155;
  font-weight: 700;
}
.countdown-card button {
  margin-top: 8px;
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.countdown-card.critical { border-color: #fecaca; background: #fff1f2; }
.countdown-card.watch { border-color: #fde68a; background: #fffbeb; }
.countdown-card.calm { border-color: #bfdbfe; background: #eff6ff; }
.countdown-card.ready { box-shadow: inset 0 0 0 1px #86efac; }
.countdown-empty {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.scheduler-grid { display: grid; grid-template-columns: 1fr 320px; gap: 10px; }
.calendar-panel, .upcoming-panel, .briefing-grid article, .chart-wrap, .console-wrap {
  background: white; border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.calendar-day, .calendar-week, .calendar-month {
  display: grid; gap: 8px;
}
.time-slot, .day-slot {
  border: 1px dashed #d8e0ea; border-radius: 8px; padding: 8px; min-height: 50px; background: #fbfcfe;
}
.clickable-slot { cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.clickable-slot:hover { background: #f1f8f7; border-color: var(--teal); }
.event-chip { border-radius: 8px; padding: 6px; margin: 4px 0; font-size: 12px; color: #0f172a; }
.coordinator-rudy { background: #dbeafe; }
.coordinator-lucy { background: #dcfce7; }
.coordinator-jhona { background: #ede9fe; }
.coordinator-natalie { background: #fef3c7; }

.briefing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
pre { white-space: pre-wrap; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.console-row { display: grid; grid-template-columns: 1fr 120px; gap: 8px; margin-bottom: 8px; }
.console-row input, .scheduler-controls input, .modal-body input, .modal-body select, .modal-body textarea {
  border: 1px solid #cfd7e4; border-radius: 8px; padding: 8px; width: 100%;
}

.todays-pulse { margin-bottom: 10px; }
.pulse-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.pulse-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbe4f2;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pulse-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pulse-chip-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.pulse-chip-value { font-size: 26px; font-weight: 800; line-height: 1; color: #0f172a; }
.pulse-chip-hint { font-size: 11px; color: #64748b; }
.pulse-chip--red { border-color: #fca5a5; background: linear-gradient(135deg, #fff1f2, #fff); }
.pulse-chip--red .pulse-chip-value { color: #dc2626; }
.pulse-chip--yellow { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fff); }
.pulse-chip--yellow .pulse-chip-value { color: #d97706; }
.pulse-chip--green { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4, #fff); }
.pulse-chip--green .pulse-chip-value { color: #16a34a; }
.pulse-chip--neutral { border-color: #e2e8f0; background: #f8fafc; }

.command-bar-sticky {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 0;
  background: #0f172a;
  border-top: 1px solid #1e3a5f;
  padding: 8px 16px;
  z-index: 40;
}
.command-bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.command-bar-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--teal);
  padding: 0 4px;
  user-select: none;
}
.command-bar-sticky input {
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 8px 12px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 13px;
  width: 100%;
}
.command-bar-sticky input::placeholder { color: #475569; }
.command-bar-sticky input:focus { outline: none; border-color: var(--teal); background: #1e2d42; }
.command-bar-sticky button {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#consoleOutput {
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
  min-height: 0;
  max-height: 48px;
  overflow: hidden;
  white-space: pre-wrap;
}
#consoleOutput:empty { display: none; }
.main { padding-bottom: 80px; }

.modal {
  position: fixed; inset: 0; background: rgba(13,20,35,.45); display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal.hidden { display: none; }
.modal-content {
  width: min(980px, 94vw); max-height: 92vh; overflow: hidden; background: white; border-radius: 14px; border: 1px solid var(--line);
  display: grid; grid-template-rows: auto auto 1fr auto;
}
.modal-content.small { width: min(560px, 94vw); }
.modal-header, .modal-footer { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); border-bottom: none; }
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-header button { border: none; background: transparent; font-size: 18px; cursor: pointer; }
.progress-wrap { height: 6px; background: #eef2f7; }
#intakeProgressBar { height: 6px; background: linear-gradient(90deg,var(--teal),var(--gold)); width: 0%; transition: width 0.3s; }
.modal-body { overflow: auto; padding: 16px 18px; }
.section-card {
  border: none;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  background: #f8f9fa;
  border-top: 3px solid var(--teal);
}
.section-card:nth-child(1) { border-top-color: var(--teal); }
.section-card:nth-child(2) { border-top-color: #3b82f6; }
.section-card:nth-child(3) { border-top-color: #f59e0b; }
.section-card:nth-child(4) { border-top-color: #8b5cf6; }
.section-card:nth-child(5) { border-top-color: #6b7280; }
.section-card h4 {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.note-log { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 80px; font-size: 13px; }
@media (max-width: 480px) {
  .modal-footer button#savePatientBtn { width: 100%; background: var(--teal); color: #fff; border-color: var(--teal); padding: 14px; font-size: 15px; }
  .grid-2 { grid-template-columns: 1fr; }
}

.coordinator-coverage-matrix {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.coverage-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.coverage-head h3 { margin: 0; color: var(--navy); }
.coverage-head p { margin: 4px 0 0; font-size: 12px; color: #475569; }
.coverage-time {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #dbe3f1;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
  color: #334155;
}

.coverage-table-wrap { overflow-x: auto; }
.coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.coverage-table th,
.coverage-table td {
  border-bottom: 1px solid #e6ecf5;
  padding: 8px 6px;
  text-align: center;
}
.coverage-table th:first-child,
.coverage-table td:first-child {
  text-align: left;
}

.coverage-cell {
  min-width: 46px;
  border: 1px solid #dbe3f1;
  border-radius: 8px;
  padding: 5px 8px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}
.coverage-cell.urgency {
  background: #fff7ed;
  border-color: #fed7aa;
}
.coverage-cell:hover {
  border-color: var(--teal);
  background: #eefbf9;
}

.coverage-pressure {
  display: inline-block;
  min-width: 30px;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 800;
  color: #0f172a;
  border: 1px solid #dbe3f1;
  background: #f8fafc;
}
.coverage-pressure.mid {
  background: #fffbeb;
  border-color: #fde68a;
}
.coverage-pressure.high {
  background: #fff1f2;
  border-color: #fecaca;
}

/* Sidebar top layout (shared) */
.sidebar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sidebar-close { display: none; background: transparent; border: none; color: #b8c7e4; font-size: 18px; cursor: pointer; }
.hamburger { display: none; background: transparent; border: none; font-size: 22px; color: var(--navy); cursor: pointer; padding: 0 4px; margin-right: 8px; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 60;
    transition: left 0.22s ease;
    overflow-y: auto;
  }
  .sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  .sidebar-close { display: block; }
  .hamburger { display: inline-block; }
  .command-bar-sticky { left: 0; }
  .critical-ops-strip { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .live-command-clock { grid-template-columns: 1fr; }
  .outcome-snapshot-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .shift-focus-grid { grid-template-columns: 1fr; }
  .shift-targets-grid { grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .intake-velocity-grid { grid-template-columns: repeat(2, minmax(150px,1fr)); }

  .ownership-gap-grid { grid-template-columns: 1fr; }
  .mission-pulse { grid-template-columns: 1fr; }
  .sla-breach-grid { grid-template-columns: 1fr; }
  .coord-radar-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .city-surge-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .timeline-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .shift-handoff-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .rescue-command-grid { grid-template-columns: 1fr; }
  .rescue-drawer-strip { grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .rescue-task-grid { grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .escalation-cockpit-grid { grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .rapid-recovery-item { grid-template-columns: 1fr; }
  .rapid-recovery-actions { justify-content: flex-start; }
  .conversion-funnel-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
  .metrics-strip { grid-template-columns: repeat(2, minmax(120px,1fr)); }
  .pipeline-toolbar { grid-template-columns: 1fr; }
  .pipeline-summary { grid-template-columns: 1fr; }
  .pipeline-workspace { grid-template-columns: 1fr; }
  .patient-focus-panel { position: relative; top: 0; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .coordinator-load-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .readiness-grid { grid-template-columns: 1fr; }
  .countdown-grid { grid-template-columns: 1fr; }
  .scheduler-grid, .briefing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pulse-chips { grid-template-columns: repeat(3, 1fr); }
  .board { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .top-actions { display: flex; gap: 8px; }
  .top-actions button { flex: 1; }
  .pipeline-toolbar { flex-direction: column; gap: 8px; }
  .modal-content { width: 98vw; max-height: 96vh; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .scheduler-controls { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 480px) {
  .pulse-chips { grid-template-columns: 1fr 1fr; }
  .pulse-chip-value { font-size: 20px; }
  .topbar h1 { font-size: 16px; }
  .topbar p { font-size: 11px; }
  #buildStamp { display: none; }
  .main { padding: 10px; padding-bottom: 90px; }
  .move-column-grid { grid-template-columns: 1fr; }

  /* Stack all 2-col grids to 1-col on small phones */
  .critical-ops-strip,
  .outcome-snapshot-grid,
  .coord-radar-grid,
  .city-surge-grid,
  .timeline-grid,
  .shift-handoff-grid,
  .shift-targets-grid,
  .intake-velocity-grid,
  .conversion-funnel-grid,
  .metrics-strip,
  .rescue-drawer-strip,
  .rescue-task-grid,
  .escalation-cockpit-grid { grid-template-columns: 1fr !important; }

  /* Top actions wrap below title */
  .topbar { flex-direction: column; align-items: flex-start; }
  .top-actions { width: 100%; }
  .top-actions button { font-size: 13px; padding: 8px 10px; }

  /* Pipeline board: single col, horizontal scroll */
  .board { grid-template-columns: 1fr; overflow-x: visible; }
  .board-col { min-width: 0; }

  /* Scheduler */
  .scheduler-controls button, .scheduler-controls input { font-size: 13px; }

  /* Modal full-screen */
  .modal-content { width: 100vw; max-height: 100vh; border-radius: 0; margin: 0; }

  /* Patient focus panel */
  .patient-focus-panel { font-size: 13px; }

  /* Command bar placeholder shorter */
  .command-bar-sticky input { font-size: 12px; }
  .command-bar-label { display: none; }
}
.mission-readiness-wall {
  margin-bottom: 10px;
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #ecfeff, #ffffff);
  border-radius: 12px;
  padding: 12px;
}
.readiness-wall-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.readiness-wall-head h3 { margin: 0; color: #065f46; font-size: 15px; }
.readiness-wall-head p { margin: 3px 0 0; font-size: 12px; color: #0f766e; }
.readiness-wall-time {
  font-size: 11px;
  font-weight: 800;
  color: #065f46;
  border: 1px solid #a7f3d0;
  background: #d1fae5;
  border-radius: 999px;
  padding: 4px 8px;
}
.readiness-wall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 8px;
}
.readiness-wall-card {
  border: 1px solid #d1fae5;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.readiness-wall-card.risk { border-color: #fecaca; background: #fff1f2; }
.readiness-wall-card.watch { border-color: #fde68a; background: #fffbeb; }
.readiness-wall-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.readiness-wall-top span { font-size: 11px; font-weight: 800; color: #0f172a; text-transform: uppercase; }
.readiness-wall-top strong { font-size: 22px; line-height: 1; color: #065f46; }
.readiness-wall-meter {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #d1fae5;
}
.readiness-wall-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #14b8a6);
}
.readiness-wall-card.risk .readiness-wall-meter i { background: linear-gradient(90deg, #ef4444, #f97316); }
.readiness-wall-card.watch .readiness-wall-meter i { background: linear-gradient(90deg, #f59e0b, #f97316); }
.readiness-wall-card p { margin: 0; font-size: 11px; color: #334155; }
.readiness-wall-card small { font-size: 11px; color: #64748b; }
.readiness-wall-card button {
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
  color: #115e59;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

.command-hotlist {
  background: linear-gradient(140deg, #f8fbff 0%, #eef6ff 45%, #fdf7ff 100%);
  border: 1px solid #d9e7ff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}
.command-hotlist-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.command-hotlist-head h3 { margin: 0; color: #1e3a8a; font-size: 15px; }
.command-hotlist-head p { margin: 3px 0 0; font-size: 12px; color: #334155; }
.command-hotlist-time {
  font-size: 11px;
  font-weight: 800;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  padding: 4px 8px;
}
.command-hotlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
}
.command-hotlist-card {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #ffffff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.command-hotlist-card.top {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12);
}
.command-hotlist-rank {
  font-size: 11px;
  font-weight: 800;
  color: #4338ca;
}
.command-hotlist-card h4 { margin: 0; font-size: 14px; color: #0f172a; }
.command-hotlist-card p { margin: 0; font-size: 12px; color: #475569; }
.command-hotlist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.command-hotlist-meta span {
  font-size: 10px;
  font-weight: 700;
  color: #3730a3;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.command-hotlist-card button,
.command-hotlist-footer button {
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}
.command-hotlist-empty {
  grid-column: 1 / -1;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px;
}
.command-hotlist-empty h4 { margin: 0 0 4px; font-size: 13px; color: #1e293b; }
.command-hotlist-empty p { margin: 0; font-size: 12px; color: #64748b; }
.command-hotlist-footer {
  margin-top: 8px;
  border-top: 1px solid #dbeafe;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.command-hotlist-footer span {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}
.shift-conversion-tracker {
  margin-bottom: 10px;
  border: 1px solid #a7f3d0;
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 50%, #ffffff 100%);
  border-radius: 12px;
  padding: 12px;
}
.shift-conversion-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.shift-conversion-head h3 { margin: 0; font-size: 15px; color: #065f46; }
.shift-conversion-head p { margin: 3px 0 0; font-size: 12px; color: #0f766e; }
.shift-conversion-pill {
  font-size: 11px;
  font-weight: 800;
  color: #065f46;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ccfbf1;
  padding: 4px 8px;
}
.shift-conversion-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #d1fae5;
  overflow: hidden;
  margin-bottom: 9px;
}
.shift-conversion-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #22c55e);
}
.shift-conversion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
}
.shift-goal-card {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.shift-goal-card.done {
  border-color: #86efac;
  background: #f0fdf4;
}
.shift-goal-card.open {
  border-color: #fed7aa;
  background: #fff7ed;
}
.shift-goal-card span {
  font-size: 11px;
  color: #334155;
  font-weight: 700;
}
.shift-goal-card strong {
  font-size: 21px;
  color: #0f172a;
  line-height: 1;
}
.shift-goal-card p {
  margin: 0;
  font-size: 11px;
  color: #475569;
}
.shift-goal-card button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

.mission-wins-board {
  background: linear-gradient(120deg, rgba(14, 33, 64, 0.94), rgba(13, 18, 33, 0.96));
  border: 1px solid rgba(122, 162, 255, 0.28);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

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

.mission-wins-head h3 {
  margin: 0;
  font-size: 16px;
}

.mission-wins-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.mission-wins-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.mission-wins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.mission-wins-card {
  border-radius: 12px;
  padding: 10px;
  background: rgba(8, 14, 26, 0.65);
  border: 1px solid rgba(122, 162, 255, 0.22);
}

.mission-wins-card span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.mission-wins-card strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.2;
}

.mission-wins-card p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 12px;
  min-height: 32px;
}

.mission-wins-card button {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(122, 162, 255, 0.38);
  background: rgba(35, 64, 122, 0.35);
  color: #f5f8ff;
  font-weight: 600;
  cursor: pointer;
}

.mission-wins-card.good {
  border-color: rgba(71, 193, 128, 0.55);
  background: linear-gradient(180deg, rgba(27, 64, 44, 0.62), rgba(10, 22, 19, 0.7));
}

.mission-wins-card.warn {
  border-color: rgba(255, 194, 77, 0.58);
  background: linear-gradient(180deg, rgba(74, 52, 20, 0.6), rgba(24, 17, 9, 0.72));
}

.mission-wins-card.risk {
  border-color: rgba(255, 102, 133, 0.58);
  background: linear-gradient(180deg, rgba(82, 24, 38, 0.64), rgba(28, 10, 16, 0.75));
}

.mission-wins-card.neutral {
  border-color: rgba(122, 162, 255, 0.44);
}

.move-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.move-column-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.move-column-btn:hover { background: #e2f0ef; border-color: var(--teal); }
.move-column-btn.current { background: #d1fae5; border-color: var(--sage); font-weight: 700; }

/* ── Daily Review ─────────────────────────────────────────────────────────── */
#daily-review { padding: 20px; }

.dr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dr-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.dr-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.dr-automove-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dr-automove-btn:hover { background: #17a89e; }

/* ── Daily Review summary pills ─────────────────────────────────────────────── */
.dr-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.dr-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.dr-pill--critical   { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.dr-pill--due-today  { background: #fff7ed; color: #c2410c; border: 1.5px solid #fdba74; }
.dr-pill--overdue    { background: #fefce8; color: #92400e; border: 1.5px solid #fde68a; }
.dr-pill--incomplete { background: #f5f3ff; color: #5b21b6; border: 1.5px solid #c4b5fd; }
.dr-pill--on-track   { background: #f0fdf4; color: #065f46; border: 1.5px solid #6ee7b7; }

/* ── Daily Review cards ─────────────────────────────────────────────────────── */
.dr-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dr-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.dr-card--critical   { border-left-color: #ef4444; }
.dr-card--due-today  { border-left-color: #f97316; }
.dr-card--overdue    { border-left-color: #eab308; }
.dr-card--incomplete { border-left-color: #8b5cf6; }
.dr-card--on-track   { border-left-color: #10b981; }

.dr-card-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.dr-card-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.dr-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dr-priority-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dr-badge--critical   { background: #fee2e2; color: #b91c1c; }
.dr-badge--due-today  { background: #ffedd5; color: #c2410c; }
.dr-badge--overdue    { background: #fef9c3; color: #a16207; }
.dr-badge--incomplete { background: #ede9fe; color: #5b21b6; }
.dr-badge--on-track   { background: #d1fae5; color: #065f46; }

.dr-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.dr-card-meta {
  font-size: 12px;
  color: var(--muted);
}
.dr-card-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 2px;
}
.dr-card--critical  .dr-card-action { color: #b91c1c; }
.dr-card--due-today .dr-card-action { color: #c2410c; }
.dr-card--overdue   .dr-card-action { color: #92400e; }
.dr-card-nfd {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.dr-card-nfd strong { color: var(--ink); }

/* Right side: days since contact counter */
.dr-card-right {
  flex-shrink: 0;
}
.dr-contact-days {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 64px;
  text-align: center;
}
.dr-days-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.dr-days-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.3;
}
.dr-contact-days.overdue .dr-days-num { color: #ef4444; }
.dr-contact-days.overdue { background: #fef2f2; }

.dr-card-actions {
  display: flex;
  gap: 6px;
}
.dr-btn-log, .dr-btn-move, .dr-btn-edit {
  flex: 1;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  background: #f8fafc;
  transition: background 0.12s;
}
.dr-btn-log { border-color: var(--teal); color: var(--teal); }
.dr-btn-log:hover { background: #e0f5f4; }
.dr-btn-move:hover, .dr-btn-edit:hover { background: #e2e8f0; }

.dr-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.dr-empty p { margin: 6px 0; font-size: 15px; }
.dr-empty strong { color: var(--ink); }

@media (max-width: 768px) {
  .dr-header { flex-direction: column; gap: 10px; }
  .dr-contact-days { min-width: 54px; padding: 8px 10px; }
  .dr-days-num { font-size: 22px; }
}

/* ── Daily Notes panel ─────────────────────────────────────────────────────── */
.dr-notes-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.dr-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.dr-notes-title-wrap { flex: 1; min-width: 0; }
.dr-notes-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.dr-notes-status {
  font-size: 11px;
  color: var(--muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dr-notes-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.dr-load-notes-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.dr-load-notes-btn:active { opacity: .8; }
.dr-refresh-notes-btn {
  background: #f1f5f9;
  color: var(--ink);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dr-refresh-notes-btn:active { background: #e2e8f0; }

.dr-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dr-notes-hint {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 14px 8px;
  margin: 0;
}

/* Note entry cards */
.dr-note-card {
  background: #f8faff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 10px 12px;
}
.dr-note-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.dr-note-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.dr-note-card-phone {
  font-size: 12px;
  color: var(--muted);
}
.dr-note-card-body {
  font-size: 12px;
  color: #4b5563;
  margin: 4px 0 6px;
  line-height: 1.5;
}
.dr-note-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.dr-note-col-badge {
  font-size: 11px;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
}
.dr-note-dates {
  font-size: 11px;
  color: var(--muted);
}
.dr-note-import-btn {
  margin-left: auto;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.dr-note-import-btn:hover:not(:disabled) { background: #dbeafe; }
.dr-note-import-btn.imported {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
  cursor: default;
}

@media (max-width: 480px) {
  .dr-notes-actions { width: 100%; }
  .dr-load-notes-btn, .dr-refresh-notes-btn { flex: 1; text-align: center; }
  .dr-note-import-btn { margin-left: 0; width: 100%; text-align: center; }
  .dr-note-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Toast notifications ─────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  width: min(420px, 92vw);
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: #1e293b;
  border-left: 4px solid #0ea5a0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  pointer-events: all;
  animation: toastIn 0.2s ease;
}
.toast.success  { border-left-color: #059669; }
.toast.info     { border-left-color: #3b82f6; }
.toast.warning  { border-left-color: #d97706; }
.toast.error    { border-left-color: #dc2626; }
.toast-icon     { font-size: 16px; flex-shrink: 0; }
.toast-msg      { flex: 1; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
.toast.removing { animation: toastOut 0.2s ease forwards; }

/* ── Hide command bar in competition edition ─────────────── */
.command-bar-sticky { display: none; }

/* ── Duplicate warning banner ────────────────────────────── */
.dup-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dup-warning strong { color: #78350f; }
.dup-warning-actions { display: flex; gap: 8px; margin-top: 8px; }
.dup-warning-actions button {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #fde68a;
  background: #fff;
  color: #92400e;
}
.dup-warning-actions .dup-confirm { background: #92400e; color: #fff; border-color: #92400e; }

/* ── Priority pill badges (no emoji) ────────────────────── */
.pri-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pri-badge.critical  { background: #fef2f2; color: #b91c1c; }
.pri-badge.due-today { background: #fff7ed; color: #c2410c; }
.pri-badge.overdue   { background: #fefce8; color: #a16207; }
.pri-badge.incomplete{ background: #f9fafb; color: #374151; border: 1px solid #e5e7eb; }
.pri-badge.on-track  { background: #f0fdf4; color: #166534; }

/* ── Topbar responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .header-status { display: none; }
  .header-author { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 768px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .brand-name { font-size: 17px; }
  .top-actions button { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 480px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .top-actions .ghost-action { display: none; }
}

/* ── Section card polish ─────────────────────────────────── */
.section-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

/* ── Main padding adjust ─────────────────────────────────── */
.main { padding-bottom: 32px; }

/* ══════════════════════════════════════════════════════════════════════════════
   HOPE — AI Intelligence Layer
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Pulse Bar ──────────────────────────────────────────────────────────────── */
.hope-pulse-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: #fff;
  padding: 9px 20px;
  margin: -20px -20px 20px; /* match topbar edge-to-edge */
  position: sticky;
  top: 53px; /* below topbar */
  z-index: 29;
  min-height: 38px;
}
.hope-pulse-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hope-pulse-icon {
  color: var(--teal);
  font-size: 13px;
  animation: hope-beat 2.2s ease-in-out infinite;
}
@keyframes hope-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hope-pulse-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--teal);
  text-transform: uppercase;
}
.hope-carousel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.hope-carousel-text {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.28s ease;
}
.hope-fade-out { opacity: 0 !important; }
.hope-fade-in  { opacity: 1; }
.hope-color-red    { color: #fca5a5 !important; }
.hope-color-orange { color: #fdba74 !important; }
.hope-color-yellow { color: #fde68a !important; }
.hope-color-green  { color: #6ee7b7 !important; }
.hope-color-teal   { color: #5eead4 !important; }

.hope-pulse-right { flex-shrink: 0; }
.hope-alert-badge-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  display: flex;
  align-items: center;
}
.hope-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
}
.hope-alert-badge:empty::before { content: '0'; background: #4b5563; }

/* ── HOPE Panel (slide-in drawer) ──────────────────────────────────────────── */
.hope-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -6px 0 32px rgba(0,0,0,0.14);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.hope-panel.open { transform: translateX(0); }

.hope-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,20,35,0.42);
  z-index: 399;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.hope-panel-overlay.visible { opacity: 1; pointer-events: auto; }

.hope-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hope-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.hope-panel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
#hopeScanTime {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.hope-panel-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.hope-panel-close:hover { color: #fff; }

.hope-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hope-panel-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 48px 20px;
  line-height: 1.7;
}

/* ── Alert Cards ────────────────────────────────────────────────────────────── */
.hope-alert {
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  padding: 12px 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.2s;
}
.hope-alert--red    { border-left-color: #ef4444; }
.hope-alert--orange { border-left-color: #f97316; }
.hope-alert--yellow { border-left-color: #eab308; }
.hope-alert--green  { border-left-color: #10b981; background: #f0fdf9; }
.hope-alert--teal   { border-left-color: var(--teal); }
.hope-alert--dismissed { opacity: 0.38; }

.hope-alert-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.hope-alert-priority {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hope-pri--red    { color: #b91c1c; }
.hope-pri--orange { color: #c2410c; }
.hope-pri--yellow { color: #92400e; }
.hope-pri--green  { color: #065f46; }
.hope-pri--teal   { color: var(--teal); }

.hope-alert-dismiss {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.hope-alert-dismiss:hover { color: var(--ink); }

.hope-alert-msg {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.hope-alert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hope-alert-time {
  font-size: 11px;
  color: var(--muted);
}
.hope-alert-action {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--teal);
  color: var(--teal);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.hope-alert-action:hover { background: #e0f5f4; }

/* ── Morning Briefing Modal ─────────────────────────────────────────────────── */
.hope-morning-modal { z-index: 500; }
.hope-morning-content {
  width: min(480px, 94vw);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  grid-template-rows: 1fr; /* override modal-content grid */
}
.hope-morning-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--navy);
  color: #fff;
}
.hope-morning-greeting {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.hope-morning-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.hope-morning-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hope-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 68px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
}
.hope-stat--red    { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.35); }
.hope-stat--orange { background: rgba(249,115,22,0.18); border-color: rgba(249,115,22,0.35); }
.hope-stat--yellow { background: rgba(234,179,8,0.14); border-color: rgba(234,179,8,0.35); }
.hope-stat--teal   { background: rgba(14,165,160,0.18); border-color: rgba(14,165,160,0.35); }
.hope-stat-n {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.hope-stat-l {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
}
.hope-morning-focus {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  border-left: 3px solid var(--teal);
  padding-left: 12px;
}
.hope-morning-focus strong { color: #fff; }
.hope-morning-win {
  margin: 0;
  font-size: 13px;
  color: #6ee7b7;
  border-left: 3px solid #10b981;
  padding-left: 12px;
}
.hope-morning-cta {
  width: 100%;
  padding: 14px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}
.hope-morning-cta:hover { background: var(--teal-dark); }

/* ── Mobile HOPE ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hope-pulse-bar { padding: 8px 12px; top: 56px; margin: -10px -10px 10px; }
  .hope-pulse-label { display: none; }
  .hope-carousel-text { font-size: 11px; }
  .hope-panel {
    width: 100vw;
    height: 78vh;
    top: auto; bottom: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .hope-panel.open { transform: translateY(0); }
  .hope-morning-body { padding: 24px 18px; gap: 12px; }
  .hope-morning-greeting { font-size: 22px; }
  .hope-stat-n { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOPE 100x — Living Co-Worker Feature Styles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Focus Mode nav button highlight ───────────────────────────────────────── */
.nav-btn--focus {
  background: linear-gradient(135deg, var(--teal), #0ea5e9);
  color: #fff !important;
  font-weight: 700;
  margin-bottom: 6px;
}
.nav-btn--focus:hover, .nav-btn--focus.active { background: var(--teal-dark) !important; }

/* ── Focus View ─────────────────────────────────────────────────────────────── */
.focus-view { padding: 0; flex-direction: column; gap: 0; }
.focus-view.active { display: flex; }

.focus-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.focus-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0; }
.focus-subtitle { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.focus-streak { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.focus-streak-badge {
  background: #fff7ed; color: #c2410c; border: 1.5px solid #fdba74;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}
.focus-contacted-badge {
  background: #f0fdf4; color: #065f46; border: 1.5px solid #6ee7b7;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}

/* Zone 1 — NOW */
.focus-zone-1 { padding: 16px 20px; }
.focus-now-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.focus-now--critical   { border-left-color: #ef4444; }
.focus-now--due-today  { border-left-color: #f97316; }
.focus-now--overdue    { border-left-color: #eab308; }
.focus-now--incomplete { border-left-color: #8b5cf6; }
.focus-now--on-track   { border-left-color: #10b981; }

.focus-now-badge {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.focus-now-position { font-size: 11px; color: var(--muted); }
.focus-now-name {
  font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 6px;
}
.focus-now-reason {
  font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px;
}
.focus-now-lastnote {
  font-size: 12px; color: var(--muted); background: #f8f9fa;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.focus-lastnote-label { font-weight: 600; color: var(--ink); }
.focus-now-btns {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.focus-btn {
  flex: 1; min-width: 100px; padding: 13px 10px;
  border-radius: 10px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; text-align: center;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; transition: filter 0.15s;
}
.focus-btn:hover { filter: brightness(0.93); }
.focus-btn--call { background: var(--teal); color: #fff; }
.focus-btn--log  { background: #10b981; color: #fff; }
.focus-btn--next { background: #f1f5f9; color: var(--ink-2); border: 1px solid var(--line); }

.focus-done {
  text-align: center; padding: 30px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.focus-done-icon { font-size: 48px; color: #10b981; }
.focus-done-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.focus-done-sub { font-size: 14px; color: var(--muted); }
.focus-refresh-btn {
  margin-top: 8px; padding: 10px 24px; border-radius: 10px;
  border: 1.5px solid var(--teal); color: var(--teal); background: transparent;
  font-weight: 600; cursor: pointer;
}

/* Zone 2 — Today's List */
.focus-zone-2 { padding: 0 20px 16px; }
.focus-zone-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.focus-zone-count {
  background: var(--surface); padding: 2px 8px;
  border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.focus-list { display: flex; flex-direction: column; gap: 4px; }
.focus-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  transition: opacity 0.3s;
}
.focus-row--done { opacity: 0.45; order: 99; }
.focus-row--current { background: #f0fdf9; border-color: #a7f3d0; }
.focus-row-status { width: 16px; font-size: 13px; color: #10b981; font-weight: 700; flex-shrink: 0; }
.focus-row-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-row-days { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.focus-row-log {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--teal); color: var(--teal);
  background: transparent; font-size: 14px; font-weight: 700; cursor: pointer;
}
.focus-row-log:hover { background: #e0f5f4; }
.focus-row-log.done { border-color: #d1fae5; color: #10b981; background: #f0fdf4; cursor: default; }
.focus-empty-list { color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }

/* Zone 3 — HOPE Picked Up */
.focus-zone-3 {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--navy); color: rgba(255,255,255,0.8);
  font-size: 12px;
  position: sticky; bottom: 0;
}
.focus-hope-text { flex: 1; line-height: 1.4; }
.focus-hope-open {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.focus-hope-open:hover { background: rgba(255,255,255,0.1); }

/* ── One-tap quick log button on pipeline cards ─────────────────────────────── */
.card-quick-log {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  min-height: 32px;
}
.card-quick-log:hover { background: #e0f5f4; }

/* ── Quick Add FAB + Voice FAB ──────────────────────────────────────────────── */
.fab-stack {
  position: fixed;
  bottom: 24px; right: 20px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 100;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
.fab--add   { background: var(--teal); color: #fff; font-size: 28px; line-height: 1; }
.fab--voice { background: var(--navy); color: #fff; position: relative; }
.fab--voice.voice-active { background: #ef4444; animation: voice-pulse-ring 1.5s ease-out infinite; }
@keyframes voice-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  70%  { box-shadow: 0 0 0 18px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ── Quick Add modal ────────────────────────────────────────────────────────── */
.quick-add-content {
  width: min(420px, 96vw);
  border-radius: 16px;
}
.quick-add-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 8px;
}
.quick-add-label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.quick-add-input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 16px; font-family: inherit;
  background: #fff; color: var(--ink);
  box-sizing: border-box;
}
.quick-add-input:focus { outline: none; border-color: var(--teal); }
.quick-add-coord-group {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.qa-coord-btn {
  flex: 1; padding: 10px 8px;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--ink-2);
  min-height: 44px;
}
.qa-coord-btn.active { border-color: var(--teal); background: #e0f5f4; color: var(--teal); }
.quick-add-save-btn {
  width: 100%; padding: 15px;
  background: var(--teal); color: #fff;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  min-height: 52px;
}
.quick-add-save-btn:hover { background: var(--teal-dark); }

/* ── Quick Note Prompt ──────────────────────────────────────────────────────── */
.quick-note-prompt {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  width: min(440px, 94vw);
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-md);
  z-index: 150; opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%) translateY(10px);
}
.quick-note-prompt.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.quick-note-inner { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.quick-note-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.quick-note-label em { color: var(--muted); font-weight: 400; }
.quick-note-field {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 8px; font-size: 14px; font-family: inherit; resize: none;
  box-sizing: border-box;
}
.quick-note-field:focus { outline: none; border-color: var(--teal); }
.quick-note-actions { display: flex; gap: 8px; }
.quick-note-save {
  flex: 1; padding: 10px; background: var(--teal); color: #fff;
  border: none; border-radius: 8px; font-weight: 700; cursor: pointer; min-height: 44px;
}
.quick-note-skip {
  padding: 10px 18px; background: transparent; border: 1px solid var(--line);
  border-radius: 8px; color: var(--muted); cursor: pointer; min-height: 44px;
}

/* ── Where I Left Off banner ────────────────────────────────────────────────── */
.last-session-banner {
  background: var(--navy); color: #fff;
  border-radius: 12px; margin-bottom: 16px; overflow: hidden;
}
.lsb-inner {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lsb-text { flex: 1; min-width: 0; }
.lsb-text strong { display: block; font-size: 14px; margin-bottom: 3px; }
.lsb-text span { font-size: 12px; color: rgba(255,255,255,0.65); }
.lsb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lsb-resume {
  padding: 9px 16px; background: var(--teal); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; min-height: 44px;
}
.lsb-dismiss {
  padding: 9px 14px; background: transparent;
  border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);
  border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; min-height: 44px;
}

/* ── Voice Mode overlay ─────────────────────────────────────────────────────── */
.voice-overlay {
  position: fixed; inset: 0; background: rgba(13,20,35,0.88);
  z-index: 350; display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.voice-overlay.visible { opacity: 1; pointer-events: auto; }
.voice-overlay-inner {
  width: min(500px, 100vw); padding: 28px 24px;
  background: #fff; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow: hidden;
}
.voice-transcript {
  font-size: 16px; color: var(--ink); line-height: 1.5;
  min-height: 48px; background: #f8f9fa; border-radius: 10px;
  padding: 12px 16px; font-style: italic;
}
.voice-log {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.voice-log-item {
  font-size: 13px; color: #065f46; font-weight: 600;
  background: #f0fdf4; border-radius: 6px; padding: 6px 12px;
}
.voice-overlay-stop {
  width: 100%; padding: 14px; background: #ef4444; color: #fff;
  border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
  cursor: pointer; min-height: 52px;
}

/* ── Streak Celebration ─────────────────────────────────────────────────────── */
.streak-celebration {
  position: fixed; inset: 0; background: rgba(13,20,35,0.7);
  z-index: 600; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.streak-celebration.visible { opacity: 1; pointer-events: auto; }
.streak-cel-inner {
  background: var(--navy); color: #fff; border-radius: 20px;
  padding: 40px 32px; text-align: center; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.streak-cel-fire { font-size: 64px; line-height: 1; }
.streak-cel-days { font-size: 32px; font-weight: 800; color: #fde68a; }
.streak-cel-msg { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.streak-cel-close {
  margin-top: 8px; padding: 14px 32px; background: var(--teal); color: #fff;
  border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
  cursor: pointer; min-height: 52px;
}

/* ── End of Day Wrap ────────────────────────────────────────────────────────── */
.eod-modal { z-index: 450; }
.eod-content {
  width: min(460px, 94vw); border-radius: 16px;
  background: transparent; border: none; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  grid-template-rows: 1fr;
}
.eod-body {
  background: var(--navy); color: #fff;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.eod-title { font-size: 20px; font-weight: 800; }
.eod-stats { display: flex; flex-direction: column; gap: 6px; }
.eod-stat { font-size: 14px; padding: 4px 0; }
.eod-stat--green { color: #6ee7b7; }
.eod-stat--yellow { color: #fde68a; }
.eod-tomorrow {
  font-size: 13px; color: rgba(255,255,255,0.75);
  border-left: 3px solid var(--teal); padding-left: 12px; line-height: 1.5;
}
.eod-tomorrow strong { color: #fff; }
.eod-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eod-btn-handle {
  flex: 1; padding: 14px; background: var(--teal); color: #fff;
  border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; min-height: 52px;
}
.eod-btn-done {
  flex: 1; padding: 14px; background: transparent;
  border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);
  border-radius: 10px; font-size: 15px; cursor: pointer; min-height: 52px;
}

/* ── Mobile adjustments for new features ───────────────────────────────────── */
@media (max-width: 480px) {
  .fab-stack { bottom: 16px; right: 14px; }
  .fab { width: 50px; height: 50px; font-size: 20px; }
  .focus-header { padding: 14px; }
  .focus-zone-1 { padding: 12px 14px; }
  .focus-zone-2 { padding: 0 14px 12px; }
  .focus-now-name { font-size: 18px; }
  .focus-btn { font-size: 13px; padding: 12px 8px; }
  .lsb-inner { flex-direction: column; }
  .lsb-actions { width: 100%; }
  .lsb-resume, .lsb-dismiss { flex: 1; }
  .quick-add-save-btn { font-size: 15px; }
}

/* ── Patient Focus Panel — v2 Timeline ───────────────────────────────────────── */
.pfp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 8px;
  color: var(--muted);
}
.pfp-empty-icon { font-size: 28px; opacity: 0.35; }
.pfp-empty-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.pfp-empty-sub { font-size: 12px; line-height: 1.5; }

.pfp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.pfp-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pfp-unpin {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.pfp-unpin:hover { color: var(--ink); }

.pfp-meta-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pfp-col-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border-radius: 20px;
  padding: 2px 8px;
  border: 1px solid var(--line);
}

.pfp-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.pfp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 56px;
}
.pfp-stat-n { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.pfp-stat-n.red { color: #ef4444; }
.pfp-stat-n.orange { color: #f97316; }
.pfp-stat-l { font-size: 10px; color: var(--muted); text-align: center; margin-top: 3px; line-height: 1.3; }

.pfp-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pfp-field { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.pfp-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; flex-shrink: 0; min-width: 72px; }
.pfp-field--notes { align-items: flex-start; }
.pfp-field--notes span { color: var(--ink-2); line-height: 1.45; }
.pfp-phone-link { color: var(--teal); text-decoration: none; font-weight: 600; }
.pfp-phone-link:hover { text-decoration: underline; }

.pfp-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.pfp-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s;
}
.pfp-btn:hover { background: #e8ecf0; }
.pfp-btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.pfp-btn--primary:hover { background: var(--teal-dark); }

.pfp-timeline-section { border-top: 1px solid var(--line); padding-top: 12px; }
.pfp-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pfp-timeline-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pfp-timeline-count { font-size: 11px; color: var(--muted); }

.pfp-add-note-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.pfp-note-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--surface);
}
.pfp-note-input:focus { outline: none; border-color: var(--teal); background: #fff; }
.pfp-note-save {
  padding: 6px 12px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pfp-note-save:hover { background: var(--teal-dark); }

.pfp-timeline { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.pfp-timeline-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 7px 10px;
}
.pfp-entry-stamp { font-size: 10px; color: var(--muted); margin-bottom: 2px; font-weight: 600; }
.pfp-entry-text { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.pfp-timeline-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 0; }

/* ── Mobile polish pass ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-author { display: none; }
  .header-status { display: none; }
  .topbar {
    grid-template-columns: auto 1fr auto;
  }
  .hope-carousel { max-width: 180px; overflow: hidden; }
  .hope-carousel-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fab-stack { bottom: 80px; } /* clear command bar */
  .pfp-stats { flex-wrap: wrap; }
  .pfp-timeline { max-height: 200px; }
}
@media (max-width: 480px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 10px 12px;
  }
  .brand-tagline { display: none; }
  .top-actions { flex-direction: row; gap: 6px; }
  .top-actions button { font-size: 12px; padding: 7px 10px; }
  .hope-pulse-bar { padding: 6px 10px; }
  .hope-carousel { max-width: 140px; }
  .command-bar-inner { gap: 6px; }
  .command-bar-sticky input { font-size: 12px; padding: 7px 8px; }
  .pfp-actions { flex-wrap: wrap; }
  .pfp-btn { min-width: 80px; flex: none; }
}

/* ── Accessibility improvements ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--teal);
  color: #fff;
  padding: 8px 12px;
  z-index: 9999;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   HOPE COMMAND INTERFACE — Chat Bar + Conversational Panel
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Collapsed pill ─────────────────────────────────────────────────────────── */
.hope-chat-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 89;
  pointer-events: none;
  display: flex;
  justify-content: center;
  transition: opacity 0.2s;
}
.hope-chat-bar.panel-open { opacity: 0; pointer-events: none; }

.hope-chat-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.16);
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  min-width: 220px;
  justify-content: center;
  border: 1px solid rgba(14,165,160,0.35);
}
.hope-chat-pill:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.35); transform: translateY(-2px); }
.hope-chat-pill:active { transform: translateY(0); }

.hci-pill-icon {
  color: var(--teal);
  font-size: 16px;
  animation: hope-beat 2.4s ease-in-out infinite;
}
.hci-pill-text { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.hci-pill-hint { font-size: 11px; color: #64748b; }

/* ── Overlay behind panel ───────────────────────────────────────────────────── */
.hope-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,20,35,0.5);
  z-index: 88;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.hope-chat-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── Expanded panel ─────────────────────────────────────────────────────────── */
.hope-chat-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 520px;
  height: 54vh;
  min-height: 340px;
  max-height: 600px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.hope-chat-panel.open { transform: translateX(-50%) translateY(0); }

/* ── Panel header ───────────────────────────────────────────────────────────── */
.hci-panel-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--navy);
  border-radius: 20px 20px 0 0;
}
.hci-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.2px;
}
.hci-panel-title .hope-pulse-icon { color: var(--teal); font-size: 14px; }

.hci-status {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-left: 4px;
  transition: color 0.2s;
}
.hci-status.thinking { color: var(--teal); animation: hope-fade-pulse 0.9s ease-in-out infinite alternate; }

@keyframes hope-fade-pulse { from { opacity: 0.5; } to { opacity: 1; } }

.hci-panel-hdr-actions { display: flex; gap: 6px; align-items: center; }
.hci-key-btn, .hci-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  min-width: 32px;
  min-height: 32px;
}
.hci-key-btn:hover, .hci-close-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ── Message history ────────────────────────────────────────────────────────── */
.hci-history {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.hci-history::-webkit-scrollbar { width: 4px; }
.hci-history::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.hci-msg { display: flex; align-items: flex-end; gap: 7px; }
.hci-msg--alex { flex-direction: row-reverse; }
.hci-msg--hope { flex-direction: row; }

.hci-hope-icon {
  font-size: 13px;
  color: var(--teal);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.hci-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}
.hci-bubble--alex {
  background: var(--teal);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.hci-bubble--hope {
  background: #f1f5f9;
  color: var(--ink);
  border-radius: 16px 16px 16px 4px;
  border-left: 3px solid var(--teal);
}

/* ── Typing indicator ───────────────────────────────────────────────────────── */
.hci-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 16px;
  min-width: 52px;
}
.hci-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.5;
  animation: hci-bounce 1.2s ease-in-out infinite;
}
.hci-typing span:nth-child(2) { animation-delay: 0.2s; }
.hci-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hci-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Confirmation card ──────────────────────────────────────────────────────── */
.hci-confirm-card {
  background: var(--navy);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0;
}
.hci-confirm-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #64748b;
  margin-bottom: 6px;
}
.hci-confirm-action {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 12px;
  line-height: 1.45;
}
.hci-confirm-btns { display: flex; gap: 10px; }
.hci-confirm-yes, .hci-confirm-no {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  min-height: 44px;
  transition: opacity 0.12s;
}
.hci-confirm-yes { background: var(--teal); color: #fff; }
.hci-confirm-yes:hover { background: var(--teal-dark); }
.hci-confirm-no  { background: rgba(255,255,255,0.08); color: #94a3b8; border: 1px solid rgba(255,255,255,0.1); }
.hci-confirm-no:hover { background: rgba(255,255,255,0.14); }

/* ── Smart suggestions ──────────────────────────────────────────────────────── */
.hci-suggestions {
  padding: 0 14px 8px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.hci-suggestion {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  min-height: 36px;
}
.hci-suggestion:hover { background: #e8f5f3; border-color: var(--teal); color: var(--teal); }

/* ── Input row ──────────────────────────────────────────────────────────────── */
.hci-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: #fff;
}
.hci-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s;
  min-height: 44px;
}
.hci-input:focus { outline: none; border-color: var(--teal); background: #fff; }
.hci-input::placeholder { color: var(--muted); }

.hci-mic-btn, .hci-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.1s;
  flex-shrink: 0;
}
.hci-mic-btn { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line); font-size: 16px; }
.hci-mic-btn:hover { background: #e8f5f3; border-color: var(--teal); }
.hci-mic-btn.listening { background: #ef4444; border-color: #ef4444; color: #fff; animation: voice-pulse-ring 1.5s ease-out infinite; }

.hci-send-btn { background: var(--teal); color: #fff; font-size: 18px; font-weight: 700; }
.hci-send-btn:hover { background: var(--teal-dark); transform: scale(1.05); }
.hci-send-btn:active { transform: scale(0.97); }

/* ── Adjust main padding + FABs to clear chat bar ──────────────────────────── */
.main { padding-bottom: 80px; }
.fab-stack { bottom: 80px; right: 20px; }
@media (max-width: 768px) { .fab-stack { bottom: 90px; } }

/* ── Mobile full-width panel ────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .hope-chat-panel {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    height: 58vh;
  }
  .hope-chat-bar {
    left: 0;
    right: 0;
    transform: none;
    padding: 0 16px 14px;
    justify-content: center;
  }
  .hope-chat-pill {
    min-width: 0;
    width: 100%;
    max-width: 360px;
  }
  .hci-bubble { max-width: 88%; }
  .hci-suggestion { font-size: 12px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ✦ VISUAL EXCELLENCE EDITION — Premium UI overrides
   Steps 2-13: Dark mode toggle, header glass, sidebar, background,
   cards, badges, buttons, animations, modals, column headers.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Step 2: Dark mode toggle button ───────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all var(--t-base) var(--ease-out);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); }
.theme-toggle:active { transform: scale(0.95); }

/* ── Step 3: Header glassmorphism + gradient logo ───────────────────────────── */
.topbar {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 0 var(--border-subtle), var(--shadow-sm);
}
.brand-name {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.brand-tagline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* Header status chips — premium pill style */
.hstat-chip {
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 4px 10px;
  transition: transform var(--t-base) var(--ease-spring);
  gap: 5px;
}
.hstat-chip .hstat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
  display: inline-block;
}
.hstat-chip.critical { background: var(--critical-bg) !important; border-color: var(--critical-border) !important; color: var(--critical) !important; }
.hstat-chip.warning  { background: var(--overdue-bg) !important;   border-color: var(--overdue-border) !important;   color: var(--overdue) !important; }
.hstat-chip.success  { background: var(--on-track-bg) !important;  border-color: var(--on-track-border) !important;  color: var(--on-track) !important; }
.hstat-chip.neutral  { background: var(--incomplete-bg) !important;border-color: var(--incomplete-border) !important;color: var(--muted) !important; }
.hstat-chip.count-bump { animation: chip-bump 0.25s var(--ease-spring); }
@keyframes chip-bump { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }

/* ── Step 4: Sidebar premium pill nav ──────────────────────────────────────── */
.sidebar {
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-subtle) !important;
}
.brand { color: var(--teal) !important; }

.nav-btn {
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  transition: all var(--t-base) var(--ease-out) !important;
  position: relative;
}
.nav-btn:hover {
  background: var(--teal-subtle) !important;
  color: var(--teal) !important;
  transform: translateX(2px);
}
.nav-btn.active {
  background: var(--gradient-brand) !important;
  color: var(--on-teal) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-teal);
}
.nav-btn--focus {
  background: transparent !important;
  color: var(--muted) !important;
}
.nav-btn--focus:hover,
.nav-btn--focus.active {
  background: var(--gradient-brand) !important;
  color: var(--on-teal) !important;
}

/* ── Step 5: Background canvas with ambient radial glow ────────────────────── */
.main {
  background: var(--bg-primary) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(14,165,160,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14,165,160,0.04) 0%, transparent 60%) !important;
  background-attachment: fixed;
}
[data-theme="dark"] .main {
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(14,165,160,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14,165,160,0.05) 0%, transparent 60%) !important;
}

/* ── Step 6: Patient cards — lift on hover, priority borders ───────────────── */
.card {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--teal) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) !important;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.card.selectable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--teal-light) !important;
}
.card.selectable:hover::before { opacity: 1; }
.card.selected {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--teal) !important;
}
.card[data-risk="critical"] {
  border-left-color: var(--critical) !important;
  background: var(--critical-bg) !important;
  border-color: var(--critical-border) !important;
}
.card[data-risk="critical"]::before { background: var(--critical); opacity: 1; }
.card[data-risk="critical"].selectable:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px var(--critical-border) !important;
}
.card[data-risk="warning"] {
  border-left-color: var(--due-today) !important;
  background: var(--due-today-bg) !important;
  border-color: var(--due-today-border) !important;
}
.card[data-risk="warning"]::before { background: var(--due-today); opacity: 1; }
.card[data-risk="stable"] {
  border-left-color: var(--on-track) !important;
}
.card[data-risk="stable"]::before { background: var(--on-track); opacity: 0.6; }
.card[data-risk="stable"].selectable:hover {
  box-shadow: var(--shadow-md), 0 0 0 2px var(--on-track-glow) !important;
}
.card-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; color: var(--ink) !important; }
.card-body p { color: var(--ink-secondary) !important; }
.card-body { border-top-color: var(--border-subtle) !important; }

/* Card logged-contact flash */
@keyframes contactLogged {
  0%   { background: var(--on-track-bg); }
  50%  { background: rgba(5,150,105,0.22); }
  100% { background: var(--on-track-bg); }
}
.card--contact-logged { animation: contactLogged 0.45s ease-out; }

/* ── Step 7: Priority badges — jewel pills ─────────────────────────────────── */
.pri-badge, .badge, .risk-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px !important;
  border-radius: var(--radius-full) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
}
.pri-badge::before, .badge::before, .risk-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}
/* Priority-specific jewel colors */
.pri-badge.critical, .risk-critical {
  background: var(--critical-bg) !important;
  color: var(--critical) !important;
  border-color: var(--critical-border) !important;
  animation: badge-pulse 2.2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--critical-glow); }
  50%     { box-shadow: 0 0 0 4px transparent; }
}
.pri-badge.due-today {
  background: var(--due-today-bg) !important;
  color: var(--due-today) !important;
  border-color: var(--due-today-border) !important;
}
.pri-badge.overdue {
  background: var(--overdue-bg) !important;
  color: var(--overdue) !important;
  border-color: var(--overdue-border) !important;
}
.pri-badge.incomplete {
  background: var(--incomplete-bg) !important;
  color: var(--incomplete) !important;
  border-color: var(--incomplete-border) !important;
}
.pri-badge.on-track, .risk-stable {
  background: var(--on-track-bg) !important;
  color: var(--on-track) !important;
  border-color: var(--on-track-border) !important;
}
.badge.red    { background: var(--critical-bg) !important; color: var(--critical) !important; border-color: var(--critical-border) !important; }
.badge.yellow { background: var(--overdue-bg) !important;  color: var(--overdue) !important;  border-color: var(--overdue-border) !important; }
.badge.green  { background: var(--on-track-bg) !important; color: var(--on-track) !important; border-color: var(--on-track-border) !important; }
.risk-warning { background: var(--due-today-bg) !important; color: var(--due-today) !important; border-color: var(--due-today-border) !important; }

/* ── Step 8: Buttons — satisfying press states ─────────────────────────────── */
.top-actions button, .modal-footer button, .console-row button {
  background: var(--gradient-brand) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-teal);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              filter var(--t-fast) !important;
  font-weight: 600 !important;
  -webkit-tap-highlight-color: transparent;
}
.top-actions button:hover, .modal-footer button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-teal-lg) !important;
  background: var(--gradient-brand) !important;
}
.top-actions button:active, .modal-footer button:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: var(--shadow-xs) !important;
  filter: brightness(0.95);
}
.top-actions .ghost-action {
  background: var(--surface) !important;
  color: var(--ink-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}
.top-actions .ghost-action:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}
.top-actions .ghost-action:active { transform: scale(0.97) !important; }

/* Card action buttons */
.card .actions button {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--t-fast) var(--ease-out) !important;
}
.card .actions button:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}
/* Log-contact button gets special green treatment */
.card .actions button[data-action="log"],
.card .actions button[data-log],
.card .actions button.log-btn {
  background: var(--on-track-bg) !important;
  border-color: var(--on-track-border) !important;
  color: var(--on-track) !important;
  font-weight: 700 !important;
}
.card .actions button[data-action="log"]:hover,
.card .actions button.log-btn:hover {
  background: var(--on-track) !important;
  color: white !important;
  box-shadow: 0 4px 12px var(--on-track-glow) !important;
}

/* Floating + button */
.fab--add {
  background: var(--gradient-brand) !important;
  box-shadow: var(--shadow-teal-lg) !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  color: white !important;
  border: none !important;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s !important;
}
.fab--add:hover { transform: scale(1.08) rotate(90deg) !important; }
.fab--add:active { transform: scale(0.95) rotate(90deg) !important; }

/* ── Step 9: Daily Review — stagger-in animation ───────────────────────────── */
@keyframes drCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dr-card { animation: drCardIn 0.25s var(--ease-out) both; }

/* Section dividers between priority tiers */
.dr-tier-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dr-tier-divider::before,
.dr-tier-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.dr-tier-divider.critical  { color: var(--critical); }
.dr-tier-divider.critical::before,
.dr-tier-divider.critical::after  { background: linear-gradient(to right, transparent, var(--critical-border), transparent); }
.dr-tier-divider.warning   { color: var(--due-today); }
.dr-tier-divider.warning::before,
.dr-tier-divider.warning::after   { background: linear-gradient(to right, transparent, var(--due-today-border), transparent); }
.dr-tier-divider.overdue   { color: var(--overdue); }
.dr-tier-divider.overdue::before,
.dr-tier-divider.overdue::after   { background: linear-gradient(to right, transparent, var(--overdue-border), transparent); }
.dr-tier-divider.on-track  { color: var(--on-track); }
.dr-tier-divider.on-track::before,
.dr-tier-divider.on-track::after  { background: linear-gradient(to right, transparent, var(--on-track-border), transparent); }

/* ── Step 10: Micro-interactions ───────────────────────────────────────────── */
/* Tab view transitions */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.active { animation: viewIn 0.20s var(--ease-out); }
.focus-view.active { animation: viewIn 0.20s var(--ease-out); }

/* Toast — pill shape, slide from bottom */
.toast {
  border-radius: var(--radius-full) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 10px 18px !important;
}
.toast.success { background: var(--gradient-brand) !important; }
.toast.info    { background: #1e293b !important; }
.toast.warning { background: var(--overdue) !important; }
.toast.error   { background: var(--critical) !important; }

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

/* Input focus glow */
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus,
.console-row input:focus,
#pipelineSearch:focus,
.hci-input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-glow) !important;
  outline: none !important;
}

/* ── Step 11: Glassmorphism panels ─────────────────────────────────────────── */
/* HOPE intelligence panel */
.hope-panel {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .hope-panel {
  background: rgba(26,36,34,0.92) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* Patient focus panel glass */
.patient-focus-panel {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  border-radius: var(--radius-lg) !important;
}
[data-theme="dark"] .patient-focus-panel {
  background: rgba(26,36,34,0.88) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
/* Modal overlay blur */
.modal:not(.hidden) {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* Modal card spring animation */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  animation: modalIn 0.30s var(--ease-spring);
}
[data-theme="dark"] .modal-content {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
@keyframes modalIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* HOPE chat panel */
.hope-chat-panel {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
[data-theme="dark"] .hope-chat-panel {
  background: rgba(26,36,34,0.94) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.hci-input-row { background: transparent !important; border-top: 1px solid var(--border) !important; }

/* ── Step 12: Pipeline column headers ──────────────────────────────────────── */
.column {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
.column h3 {
  background: var(--gradient-card);
  margin: -10px -10px 10px !important;
  padding: 12px 14px !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  border-bottom: 2px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: var(--ink-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.column[data-badge="red"]    h3 { border-bottom-color: var(--critical) !important; }
.column[data-badge="yellow"] h3 { border-bottom-color: var(--due-today) !important; }
.column[data-badge="purple"] h3 { border-bottom-color: var(--teal) !important; }
/* Count badge on column header (added by JS renderPipeline) */
.col-count-pill {
  background: var(--teal-subtle);
  color: var(--teal-dark);
  border: 1px solid var(--teal-glow);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
}
.column[data-badge="red"]    .col-count-pill { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }

/* ── Step 13: Modal/intake form upgrade ────────────────────────────────────── */
.section-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--teal) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
}
.section-card:nth-child(2) { border-top-color: #3b82f6 !important; }
.section-card:nth-child(3) { border-top-color: var(--due-today) !important; }
.section-card:nth-child(4) { border-top-color: #8b5cf6 !important; }
.section-card:nth-child(5) { border-top-color: var(--muted) !important; }
.modal-body input, .modal-body select, .modal-body textarea {
  background: var(--bg-primary) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
}
.modal-body label { color: var(--ink-secondary); }
.modal-header { background: var(--surface); border-bottom: 1px solid var(--border) !important; }
.modal-footer { background: var(--surface); border-top: 1px solid var(--border) !important; }
.modal-header h2 { color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }

/* ── Dark mode surface adaptations ─────────────────────────────────────────── */
[data-theme="dark"] .column { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .column h3 { background: var(--surface-raised); color: var(--ink-secondary) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .card { background: var(--gradient-card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .card-body { border-top-color: var(--border-subtle) !important; }
[data-theme="dark"] .section-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .modal-body input,
[data-theme="dark"] .modal-body textarea,
[data-theme="dark"] .modal-body select { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--ink) !important; }
[data-theme="dark"] .topbar { background: rgba(10,15,14,0.88) !important; }
[data-theme="dark"] .sidebar { background: var(--bg-secondary) !important; }
[data-theme="dark"] .hope-pulse-bar { background: #0a1210 !important; border-bottom: 1px solid var(--border); }
[data-theme="dark"] .hstat-chip.critical { background: var(--critical-bg) !important; }
[data-theme="dark"] .toast.success { background: var(--gradient-brand) !important; }
[data-theme="dark"] .hci-input-row { background: transparent !important; }
[data-theme="dark"] .hci-input { background: var(--surface-raised) !important; color: var(--ink) !important; border-color: var(--border) !important; }

/* ── Skip link ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--teal); color: white;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 0.2s;
  z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* ── Loading shimmer skeleton ───────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border-subtle) 25%, var(--border) 50%, var(--border-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Count-up number class ──────────────────────────────────────────────────── */
.count-up { display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE — comprehensive component overrides
   Covers every hardcoded white/light background so text is always readable.
   Applied only when [data-theme="dark"] is set on <html>.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Focus Mode ── */
[data-theme="dark"] .focus-now-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .focus-list-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .focus-row--current {
  background: rgba(14,165,160,0.15) !important;
  border-color: rgba(14,165,160,0.35) !important;
}
[data-theme="dark"] .focus-now-lastnote {
  background: var(--bg-tertiary) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .focus-btn--next {
  background: var(--surface-raised) !important;
  color: var(--ink-secondary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .focus-zone-count {
  background: var(--surface-raised) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .focus-title { color: var(--ink) !important; }
[data-theme="dark"] .focus-subtitle { color: var(--muted) !important; }
[data-theme="dark"] .focus-now-name { color: var(--ink) !important; }
[data-theme="dark"] .focus-now-reason { color: var(--ink-secondary) !important; }
[data-theme="dark"] .focus-row-name { color: var(--ink) !important; }
[data-theme="dark"] .focus-done-title { color: var(--ink) !important; }
[data-theme="dark"] .focus-done-sub { color: var(--muted) !important; }
[data-theme="dark"] .focus-lastnote-label { color: var(--ink) !important; }

/* ── Patient cards — full dark treatment ── */
[data-theme="dark"] .card-body p { color: var(--ink-secondary) !important; }
[data-theme="dark"] .card h4 { color: var(--ink) !important; }
[data-theme="dark"] .card-contact-hint { color: var(--muted) !important; }
[data-theme="dark"] .card-chevron { color: var(--muted-light) !important; }
[data-theme="dark"] .card .actions button {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .card .actions button:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}
[data-theme="dark"] .column-empty { color: var(--muted) !important; }

/* ── Patient focus panel (pfp) ── */
[data-theme="dark"] .pfp-name { color: var(--ink) !important; }
[data-theme="dark"] .pfp-stat-n { color: var(--ink) !important; }
[data-theme="dark"] .pfp-stat-l { color: var(--muted) !important; }
[data-theme="dark"] .pfp-field span { color: var(--ink-secondary) !important; }
[data-theme="dark"] .pfp-field-label { color: var(--muted) !important; }
[data-theme="dark"] .pfp-btn {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pfp-btn:hover { background: var(--bg-tertiary) !important; }
[data-theme="dark"] .pfp-col-tag { background: var(--bg-tertiary) !important; color: var(--ink-secondary) !important; border-color: var(--border) !important; }
[data-theme="dark"] .pfp-note-input {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .pfp-timeline-item { border-color: var(--border) !important; color: var(--ink-secondary) !important; }
[data-theme="dark"] .pfp-timeline-title { color: var(--ink-secondary) !important; }
[data-theme="dark"] .pfp-timeline-count { color: var(--muted) !important; }
[data-theme="dark"] .pfp-unpin { color: var(--muted) !important; }

/* ── Daily Review ── */
[data-theme="dark"] .dr-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .dr-card-name { color: var(--ink) !important; }
[data-theme="dark"] .dr-card-meta { color: var(--muted) !important; }
[data-theme="dark"] .dr-card-action { color: var(--ink-secondary) !important; }
[data-theme="dark"] .dr-card-nfd { color: var(--muted) !important; }
[data-theme="dark"] .dr-days-num { color: var(--ink) !important; }
[data-theme="dark"] .dr-days-label { color: var(--muted) !important; }
[data-theme="dark"] .dr-contact-days.overdue .dr-days-num { color: var(--critical) !important; }
[data-theme="dark"] .dr-summary-bar { background: transparent !important; }
[data-theme="dark"] .dr-btn-log,
[data-theme="dark"] .dr-btn-move,
[data-theme="dark"] .dr-btn-edit {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}

/* ── Scheduler ── */
[data-theme="dark"] .capacity-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .capacity-top strong { color: var(--ink) !important; }
[data-theme="dark"] .capacity-top span { color: var(--muted) !important; }
[data-theme="dark"] .capacity-bar { background: var(--bg-tertiary) !important; }
[data-theme="dark"] .coordinator-load {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .coordinator-load-head h3 { color: var(--ink) !important; }
[data-theme="dark"] .coordinator-load-head small { color: var(--muted) !important; }
[data-theme="dark"] .view-toggle {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .view-toggle.active {
  background: var(--teal) !important;
  color: white !important;
  border-color: var(--teal) !important;
}
[data-theme="dark"] .admission-readiness-board { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .calendar-panel { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .upcoming-panel { background: var(--surface) !important; border-color: var(--border) !important; color: var(--ink) !important; }

/* ── Briefing / pre blocks ── */
[data-theme="dark"] pre {
  background: var(--bg-secondary) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #amSummary,
[data-theme="dark"] #pmSummary { color: var(--ink) !important; }
[data-theme="dark"] .briefing-grid article {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .briefing-grid h3 { color: var(--ink) !important; }

/* ── Settings ── */
[data-theme="dark"] #changeLog,
[data-theme="dark"] #missingDataQueue { color: var(--ink) !important; }

/* ── Pipeline toolbar / search ── */
[data-theme="dark"] #pipelineSearch {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] #pipelineSearch::placeholder { color: var(--muted) !important; }
[data-theme="dark"] .pipeline-toolbar label { color: var(--ink-secondary) !important; }
[data-theme="dark"] .ghost-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .ghost-btn:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* ── Pipeline summary chips ── */
[data-theme="dark"] .psummary-chip {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .quick-filter-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .quick-filter-btn.active {
  background: var(--teal-subtle) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* ── Today's pulse / section cards ── */
[data-theme="dark"] .todays-pulse { background: transparent !important; }
[data-theme="dark"] .clock-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .clock-card strong { color: var(--ink) !important; }
[data-theme="dark"] .clock-card span { color: var(--ink-secondary) !important; }
[data-theme="dark"] .clock-card p { color: var(--muted) !important; }
[data-theme="dark"] .clock-card button {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .outcome-snapshot-bar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .outcome-snapshot-head h3 { color: var(--ink) !important; }
[data-theme="dark"] .outcome-snapshot-card {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .outcome-snapshot-card strong { color: var(--ink) !important; }
[data-theme="dark"] .outcome-snapshot-card span { color: var(--ink-secondary) !important; }
[data-theme="dark"] .outcome-snapshot-card p { color: var(--muted) !important; }

/* ── Rescue drawer / sprint tasks ── */
[data-theme="dark"] .rescue-drawer { background: var(--critical-bg) !important; border-color: var(--critical-border) !important; }
[data-theme="dark"] .rescue-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .sprint-task {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}

/* ── Note log / intake form ── */
[data-theme="dark"] .note-log {
  background: var(--bg-tertiary) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .section-card h4 { color: var(--muted) !important; }
[data-theme="dark"] .modal-body label { color: var(--ink-secondary) !important; }
[data-theme="dark"] .dup-warning {
  background: var(--overdue-bg) !important;
  border-color: var(--overdue-border) !important;
  color: var(--overdue) !important;
}
[data-theme="dark"] .progress-wrap { background: var(--bg-tertiary) !important; }

/* ── Reminders ── */
[data-theme="dark"] .list .row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* ── HOPE pulse bar ── */
[data-theme="dark"] .hope-pulse-bar { background: #050A09 !important; }

/* ── Topbar / sidebar catch-all ── */
[data-theme="dark"] .topbar { background: rgba(10,15,14,0.92) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .brand-tagline { color: var(--muted) !important; }
[data-theme="dark"] .hamburger { color: var(--ink) !important; }
[data-theme="dark"] .sidebar-close { color: var(--muted) !important; }
[data-theme="dark"] .brand { color: var(--teal) !important; }
[data-theme="dark"] .brand span { color: var(--muted) !important; }
[data-theme="dark"] .author-name { color: var(--ink-secondary) !important; }
[data-theme="dark"] .author-locs { color: var(--muted) !important; }

/* ── Pin lock modal ── */
[data-theme="dark"] #pinInput {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .modal-body p { color: var(--ink-secondary) !important; }
[data-theme="dark"] .hint { color: var(--muted) !important; }

/* ── HCI / HOPE chat history bubbles ── */
[data-theme="dark"] .hci-history { background: var(--bg-secondary) !important; }
[data-theme="dark"] .hci-suggestions { background: var(--bg-secondary) !important; border-top-color: var(--border) !important; }
[data-theme="dark"] .hci-suggestion {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .hci-suggestion:hover {
  background: var(--teal-subtle) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}
[data-theme="dark"] .hci-panel-hdr { background: var(--surface-raised) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .hci-panel-title { color: var(--ink) !important; }
[data-theme="dark"] .hci-close-btn,
[data-theme="dark"] .hci-key-btn { color: var(--muted) !important; }

/* ── Section headings / generic text ── */
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--ink) !important; }
[data-theme="dark"] p { color: var(--ink-secondary) !important; }
[data-theme="dark"] small,
[data-theme="dark"] .hint { color: var(--muted) !important; }
[data-theme="dark"] .checkbox-inline { color: var(--ink-secondary) !important; }

/* ── Inputs globally ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   VISUAL FIX + PROPER REDESIGN — Phase 1 (Surgical) + Phase 2 (Eye Candy)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 8: Page canvas — #F8FFFE + ambient radial glow ─────────────────── */
body {
  background-color: #F8FFFE !important;
  background-image:
    radial-gradient(ellipse 70% 40% at 10% 0%, rgba(14,165,160,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(14,165,160,0.03) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}
.main { background: transparent !important; }
.sidebar { background: #ffffff !important; }

/* ── FIX 1: Welcome / last-session banner ────────────────────────────────── */
.last-session-banner {
  background: #1a2e2b !important;
  color: #ffffff !important;
}
.lsb-text strong { color: #ffffff !important; }
.lsb-text span   { color: rgba(255,255,255,0.68) !important; }
.lsb-resume {
  background: #ffffff !important;
  color: #0B7A8C !important;
  font-weight: 700 !important;
}
.lsb-resume:hover { background: #f0faf9 !important; }
.lsb-dismiss {
  border-color: rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ── FIX 2: Rescue drawer — white bg, teal accents ──────────────────────── */
.rescue-drawer {
  background: #ffffff !important;
  border-color: var(--on-track-border, #A7F3D0) !important;
}
.rescue-drawer-head h3 { color: var(--teal-dark) !important; }
.rescue-drawer-head p  { color: var(--teal) !important; }
.rescue-drawer-count {
  background: var(--teal) !important;
  color: #ffffff !important;
  border-color: var(--teal-dark) !important;
}
.rescue-drawer-toggle {
  border-color: var(--teal) !important;
  color: var(--teal-dark) !important;
  background: #ffffff !important;
}
.rescue-rank {
  background: var(--teal) !important;
  color: #ffffff !important;
  border-color: var(--teal-dark) !important;
}
.rescue-drawer-card strong { color: var(--ink) !important; }
.rescue-drawer-card p      { color: var(--ink-secondary) !important; }
/* Rescue sprint / command bars — same white treatment */
.rescue-sprint,
.rescue-command-bar {
  background: #ffffff !important;
  border-color: var(--on-track-border, #A7F3D0) !important;
}
.rescue-sprint-head h3,
.rescue-command-head h3 { color: var(--teal-dark) !important; }
.rescue-sprint-head p,
.rescue-command-head p  { color: var(--teal) !important; }
.rescue-progress {
  background: var(--teal-subtle) !important;
  color: var(--teal-dark) !important;
  border-color: var(--on-track-border, #A7F3D0) !important;
}

/* ── FIX 3: Stats bar cards — priority modifier classes ─────────────────── */
.summary-chip {
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) !important;
}
.summary-chip--neutral {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}
.summary-chip--neutral strong { color: var(--ink) !important; }
.summary-chip--neutral span   { color: var(--muted) !important; }

.summary-chip--warning {
  background: var(--overdue-bg) !important;
  border-color: var(--overdue-border) !important;
}
.summary-chip--warning strong { color: var(--overdue) !important; }
.summary-chip--warning span   { color: var(--ink-secondary) !important; }

.summary-chip--critical {
  background: var(--critical-bg) !important;
  border-color: var(--critical-border) !important;
}
.summary-chip--critical strong { color: var(--critical) !important; }
.summary-chip--critical span   { color: var(--ink-secondary) !important; }

/* ── FIX 4: Daily Review cards — priority-tinted backgrounds ────────────── */
.dr-card--critical   { background: var(--critical-bg) !important; }
.dr-card--due-today  { background: var(--due-today-bg) !important; }
.dr-card--overdue    { background: var(--overdue-bg) !important; }
.dr-card--incomplete { background: var(--incomplete-bg) !important; }
.dr-card--on-track   { background: var(--on-track-bg) !important; }

/* Days counter box: white card with priority border */
.dr-contact-days {
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
}
.dr-card--critical  .dr-contact-days { border-color: var(--critical-border) !important; }
.dr-card--due-today .dr-contact-days { border-color: var(--due-today-border) !important; }
.dr-card--overdue   .dr-contact-days { border-color: var(--overdue-border) !important; }
.dr-card--on-track  .dr-contact-days { border-color: var(--on-track-border) !important; }

/* ── FIX 5: Sidebar navigation — gradient active pill ───────────────────── */
.nav-btn {
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast) !important;
}
.nav-btn:hover {
  background: var(--teal-subtle) !important;
  color: var(--teal-dark) !important;
}
.nav-btn.active {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px var(--teal-glow) !important;
}
.nav-btn.active:hover {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%) !important;
}

/* ── FIX 6: HOPE pulse bar — light, teal-tinted ─────────────────────────── */
.hope-pulse-bar {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid rgba(14,165,160,0.15) !important;
  color: var(--ink-secondary) !important;
}
.hope-pulse-icon  { color: var(--teal) !important; }
.hope-pulse-label { color: var(--teal-dark) !important; }
.hope-carousel-text { color: var(--ink-secondary) !important; }
/* Re-map carousel semantic colors for light bg */
.hope-color-red    { color: var(--critical) !important; }
.hope-color-orange { color: var(--due-today) !important; }
.hope-color-yellow { color: #b45309 !important; }
.hope-color-green  { color: var(--on-track) !important; }
.hope-color-teal   { color: var(--teal-dark) !important; }

/* ── FIX 7: Search bar + filter row ─────────────────────────────────────── */
#pipelineSearch {
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
  width: 100% !important;
}
#pipelineSearch:focus {
  outline: none !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-glow) !important;
}
.checkbox-inline { color: var(--ink-secondary) !important; }
.ghost-btn {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--t-fast), color var(--t-fast) !important;
}
.ghost-btn:hover { border-color: var(--teal) !important; color: var(--teal) !important; }

/* ── FIX 9: HOPE chat pill — white glass ────────────────────────────────── */
.hope-chat-pill {
  background: rgba(255,255,255,0.92) !important;
  color: var(--ink) !important;
  border: 1.5px solid rgba(14,165,160,0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 24px rgba(14,165,160,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
}
.hope-chat-pill:hover {
  background: rgba(255,255,255,0.98) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 6px 32px rgba(14,165,160,0.18), 0 2px 8px rgba(0,0,0,0.07) !important;
  transform: translateY(-2px) !important;
}
.hope-chat-pill:active { transform: translateY(0) !important; }
.hci-pill-text { color: var(--ink) !important; }
.hci-pill-hint { color: var(--muted) !important; }

/* ── FIX 10: Topbar — glass + gradient logo ─────────────────────────────── */
.topbar {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(226,238,236,0.80) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 2px 12px rgba(14,165,160,0.05) !important;
}
.brand-name {
  background: var(--gradient-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Ensure author text stays readable against glass topbar */
.author-name { color: var(--ink-secondary) !important; }
.author-locs { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 2 — Eye Candy
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CANDY 1: Stat card hover glow ──────────────────────────────────────── */
.summary-chip {
  cursor: default;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) !important;
}
.summary-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.12) !important;
}
.summary-chip--critical:hover { box-shadow: 0 4px 16px var(--critical-glow) !important; }
.summary-chip--warning:hover  { box-shadow: 0 4px 16px rgba(217,119,6,0.14) !important; }

/* ── CANDY 2: Critical badge pulse ──────────────────────────────────────── */
@keyframes v2-pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); }
  60%       { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}
.dr-badge--critical { animation: v2-pulse-critical 2.2s ease-in-out infinite !important; }
.summary-chip--critical strong { animation: v2-pulse-critical 2.4s ease-in-out infinite !important; }

/* ── CANDY 4: Button press feel ─────────────────────────────────────────── */
button:active:not(:disabled):not(.fab):not(.nav-btn) {
  transform: scale(0.97) !important;
}

/* ── CANDY 8: FAB hover lift ────────────────────────────────────────────── */
.fab {
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) !important;
}
.fab:hover { transform: scale(1.10) translateY(-2px) !important; }
.fab:active { transform: scale(0.96) !important; }

/* ── CANDY 9: Priority badge dot indicators ─────────────────────────────── */
.dr-badge--critical::before,
.dr-badge--due-today::before,
.dr-badge--overdue::before,
.dr-badge--on-track::before {
  content: '●';
  display: inline-block;
  margin-right: 4px;
  font-size: 8px;
  vertical-align: middle;
}
.dr-badge--critical::before  { color: var(--critical); }
.dr-badge--due-today::before { color: var(--due-today); }
.dr-badge--overdue::before   { color: var(--overdue); }
.dr-badge--on-track::before  { color: var(--on-track); }

/* ── CANDY 10: Dark mode — targeted overrides for new elements ──────────── */
/* FIX 1 banner in dark mode */
[data-theme="dark"] .last-session-banner { background: #0E1F1C !important; }
[data-theme="dark"] .lsb-resume {
  background: var(--teal) !important;
  color: #ffffff !important;
}

/* FIX 6 — keep pulse bar dark in dark mode */
[data-theme="dark"] .hope-pulse-bar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .hope-pulse-label { color: var(--teal) !important; }
[data-theme="dark"] .hope-carousel-text { color: var(--ink-secondary) !important; }

/* FIX 9 — chat pill dark */
[data-theme="dark"] .hope-chat-pill {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .hci-pill-text { color: var(--ink) !important; }
[data-theme="dark"] .hci-pill-hint { color: var(--muted) !important; }

/* FIX 10 — topbar glass in dark mode */
[data-theme="dark"] .topbar {
  background: var(--surface-glass) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 0 var(--border-subtle), 0 2px 12px rgba(0,0,0,0.25) !important;
}
[data-theme="dark"] .brand-name {
  background: linear-gradient(135deg, var(--teal-light) 0%, #38BDF8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* FIX 2 — rescue drawer dark */
[data-theme="dark"] .rescue-drawer,
[data-theme="dark"] .rescue-sprint,
[data-theme="dark"] .rescue-command-bar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .rescue-drawer-head h3,
[data-theme="dark"] .rescue-sprint-head h3,
[data-theme="dark"] .rescue-command-head h3 { color: var(--teal-light) !important; }
[data-theme="dark"] .rescue-drawer-card,
[data-theme="dark"] .rescue-lane,
[data-theme="dark"] .rescue-task {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .rescue-drawer-card strong { color: var(--ink) !important; }

/* FIX 4 — DR cards tinted backgrounds in dark mode use CSS vars (auto) */
/* FIX 8 — body background dark */
[data-theme="dark"] body {
  background-color: var(--bg-primary) !important;
  background-image: none !important;
}
[data-theme="dark"] .main { background: transparent !important; }
[data-theme="dark"] .sidebar { background: var(--surface) !important; }

/* FIX 7 — search inputs dark */
[data-theme="dark"] #pipelineSearch {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] #pipelineSearch:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(14,165,160,0.20) !important;
}
[data-theme="dark"] .ghost-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR PREMIUM REDESIGN
   ══════════════════════════════════════════════════════════════════════════════ */

/* Container */
.sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E8F0EF !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.06) !important;
  width: 220px !important;
  padding: 24px 16px !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.app-shell { grid-template-columns: 220px 1fr !important; }

/* Wordmark */
.sidebar-brand {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, #0B7A8C, #38BDF8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 4px;
  margin-bottom: 16px;
  display: block;
  line-height: 1.2;
}

/* Hairline divider */
.sidebar-divider {
  border: none;
  border-bottom: 1px solid #EEF5F4;
  margin-bottom: 16px;
}

/* Close button — visible only on mobile */
.sidebar-close {
  display: none;
  position: absolute;
  top: 20px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: #9AB8B4;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
@media (max-width: 767px) {
  .sidebar-close { display: block; }
}

/* Nav items */
.nav-btn {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  cursor: pointer !important;
  letter-spacing: 0.1px !important;
  transition: all 0.18s cubic-bezier(0.16,1,0.3,1) !important;
  background: transparent !important;
  color: #6B8F8A !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
}
.nav-btn:hover {
  background: #F0FAF9 !important;
  color: #0EA5A0 !important;
  border-left-color: rgba(14,165,160,0.3) !important;
  padding-left: 18px !important;
}
.nav-btn.active {
  background: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 45%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-left-color: transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.30), 0 1px 4px rgba(14,165,160,0.20) !important;
  padding-left: 14px !important;
}
.nav-btn.active:hover {
  background: linear-gradient(135deg, #0B7A8C, #0EA5A0) !important;
  padding-left: 14px !important;
  border-left-color: transparent !important;
}

/* Bottom footer tag */
.sidebar-footer {
  margin-top: auto;
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-footer-ai {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #0EA5A0;
  text-transform: uppercase;
}
.sidebar-footer-tag {
  font-size: 10px;
  font-weight: 400;
  color: #9AB8B4;
}

/* ── Dark mode sidebar ───────────────────────────────────────────────────── */
[data-theme="dark"] .sidebar {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
}
[data-theme="dark"] .sidebar-divider { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .nav-btn { color: var(--muted) !important; }
[data-theme="dark"] .nav-btn:hover {
  background: var(--teal-subtle) !important;
  color: var(--teal-light) !important;
}
[data-theme="dark"] .nav-btn.active {
  background: linear-gradient(135deg, var(--teal), var(--teal-light)) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .sidebar-footer-ai { color: var(--teal) !important; }
[data-theme="dark"] .sidebar-footer-tag { color: var(--muted) !important; }
[data-theme="dark"] .sidebar-close { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   PATIENT SNAPSHOT PANEL — Full redesign (Change 2 + Change 3)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Snapshot header ─────────────────────────────────────────────────────── */
.pfp-snapshot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.pfp-snapshot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #0EA5A0;
  flex-shrink: 0;
}
.pfp-snapshot-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.pfp-snapshot-name {
  font-size: 14px;
  font-weight: 700;
  color: #0D1117;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pfp-snapshot-divider {
  border: none;
  border-bottom: 1px solid #E8F0EF;
  margin: 10px 0 12px;
}

/* ── Completion / missing banners ────────────────────────────────────────── */
.pfp-missing-banner {
  background: #FFF1F1;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #DC2626;
  font-weight: 600;
}
.pfp-complete-banner {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #059669;
  font-weight: 600;
}

/* ── Missing field indicators ────────────────────────────────────────────── */
.field-missing {
  display: inline-block;
  color: #DC2626;
  background: #FFF1F1;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
}
.field-critical-missing {
  display: inline-block;
  color: #DC2626;
  background: #FFF1F1;
  border: 1px solid #FECACA;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.pfp-section-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9AB8B4;
  border-bottom: 1px solid #EEF5F4;
  padding-bottom: 4px;
  margin: 14px 0 8px;
}

/* ── Field grid ──────────────────────────────────────────────────────────── */
.pfp-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.pfp-field-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 4px 8px;
  align-items: start;
}
.pfp-fl {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
  padding-top: 1px;
}
.pfp-fv {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  word-break: break-word;
}
a.pfp-fv, a.pfp-phone-link {
  color: #0EA5A0 !important;
  text-decoration: none;
  font-weight: 600;
}
a.pfp-fv:hover, a.pfp-phone-link:hover { text-decoration: underline; }

/* ── Notes block ─────────────────────────────────────────────────────────── */
.pfp-notes-block {
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
  background: #F8FFFE;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #E2EEEC;
  margin-bottom: 4px;
  word-break: break-word;
  white-space: pre-wrap;
}
.pfp-notes-empty {
  color: #9AB8B4;
  font-style: italic;
}

/* ── Conversation log more link ──────────────────────────────────────────── */
.pfp-log-more {
  font-size: 11px;
  color: #0EA5A0;
  font-weight: 600;
  padding: 6px 0 2px;
  cursor: default;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
[data-theme="dark"] .pfp-snapshot-label { color: var(--teal) !important; }
[data-theme="dark"] .pfp-snapshot-name  { color: var(--ink) !important; }
[data-theme="dark"] .pfp-snapshot-divider { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .pfp-section-header { color: var(--muted) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .pfp-fl  { color: var(--muted) !important; }
[data-theme="dark"] .pfp-fv  { color: var(--ink-secondary) !important; }
[data-theme="dark"] .pfp-notes-block {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--ink-secondary) !important;
}
[data-theme="dark"] .pfp-missing-banner {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.30) !important;
}
[data-theme="dark"] .pfp-complete-banner {
  background: rgba(5,150,105,0.10) !important;
  border-color: rgba(5,150,105,0.30) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   THREE TARGETED FIXES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Daily Review — days-since-contact box ───────────────────────── */

/* Light mode: white box, priority-colored number, priority-colored border */
.dr-contact-days {
  background: #FFFFFF !important;
  border: 2px solid #E2EEEC !important;
}
.dr-days-num  { color: #374151 !important; }
.dr-days-label { color: #6B7280 !important; }

.dr-card--critical  .dr-contact-days { border-color: #DC2626 !important; }
.dr-card--critical  .dr-days-num     { color: #DC2626 !important; }

.dr-card--due-today .dr-contact-days { border-color: #EA580C !important; }
.dr-card--due-today .dr-days-num     { color: #EA580C !important; }

.dr-card--overdue   .dr-contact-days { border-color: #D97706 !important; }
.dr-card--overdue   .dr-days-num     { color: #D97706 !important; }

.dr-card--incomplete .dr-contact-days { border-color: #6B7280 !important; }
.dr-card--incomplete .dr-days-num     { color: #6B7280 !important; }

.dr-card--on-track  .dr-contact-days { border-color: #059669 !important; }
.dr-card--on-track  .dr-days-num     { color: #059669 !important; }

/* Dark mode */
[data-theme="dark"] .dr-contact-days {
  background: #1A2422 !important;
  border-width: 2px !important;
}
[data-theme="dark"] .dr-days-label { color: #6B8F8A !important; }

[data-theme="dark"] .dr-card--critical  .dr-contact-days { border-color: rgba(220,38,38,0.5) !important; }
[data-theme="dark"] .dr-card--critical  .dr-days-num     { color: #F87171 !important; }

[data-theme="dark"] .dr-card--due-today .dr-contact-days { border-color: rgba(234,88,12,0.5) !important; }
[data-theme="dark"] .dr-card--due-today .dr-days-num     { color: #FB923C !important; }

[data-theme="dark"] .dr-card--overdue   .dr-contact-days { border-color: rgba(217,119,6,0.5) !important; }
[data-theme="dark"] .dr-card--overdue   .dr-days-num     { color: #FCD34D !important; }

[data-theme="dark"] .dr-card--incomplete .dr-contact-days { border-color: rgba(107,114,128,0.5) !important; }
[data-theme="dark"] .dr-card--incomplete .dr-days-num     { color: #94A3B8 !important; }

[data-theme="dark"] .dr-card--on-track  .dr-contact-days { border-color: rgba(5,150,105,0.5) !important; }
[data-theme="dark"] .dr-card--on-track  .dr-days-num     { color: #34D399 !important; }

/* ── FIX 2: Scheduler time slots ─────────────────────────────────────────── */

/* Light mode — filled slots */
.time-slot, .day-slot {
  background: #FFFFFF !important;
  border: 1px solid #E8F0EF !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
}
.time-slot strong, .day-slot strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Light mode — empty clickable slots */
.time-slot.clickable-slot:not(:has(.event-chip)),
.day-slot.clickable-slot:not(:has(.event-chip)) {
  background: #F8FFFE !important;
}
.time-slot.clickable-slot:not(:has(.event-chip)) strong,
.day-slot.clickable-slot:not(:has(.event-chip)) strong {
  color: #9CA3AF !important;
}

/* Hover */
.time-slot.clickable-slot:hover,
.day-slot.clickable-slot:hover {
  background: #F0FAF9 !important;
  border-color: var(--teal) !important;
}
.time-slot.clickable-slot:hover strong,
.day-slot.clickable-slot:hover strong {
  color: #0EA5A0 !important;
}

/* Dark mode */
[data-theme="dark"] .time-slot,
[data-theme="dark"] .day-slot {
  background: #1A2422 !important;
  border-color: #1E3330 !important;
}
[data-theme="dark"] .time-slot strong,
[data-theme="dark"] .day-slot strong {
  color: #94A3B8 !important;
}
[data-theme="dark"] .time-slot.clickable-slot:not(:has(.event-chip)),
[data-theme="dark"] .day-slot.clickable-slot:not(:has(.event-chip)) {
  background: #152220 !important;
}
[data-theme="dark"] .time-slot.clickable-slot:not(:has(.event-chip)) strong,
[data-theme="dark"] .day-slot.clickable-slot:not(:has(.event-chip)) strong {
  color: #4A6B66 !important;
}
[data-theme="dark"] .time-slot.clickable-slot:hover,
[data-theme="dark"] .day-slot.clickable-slot:hover {
  background: rgba(14,165,160,0.08) !important;
  border-color: var(--teal) !important;
}
[data-theme="dark"] .time-slot.clickable-slot:hover strong,
[data-theme="dark"] .day-slot.clickable-slot:hover strong {
  color: var(--teal-light) !important;
}

/* ── FIX 3: Focus tab — warm teal-green gradient ─────────────────────────── */

/* Override the old .nav-btn--focus rules */
.nav-btn--focus {
  background: transparent !important;
  color: #6B8F8A !important;
  border-left-color: transparent !important;
}
.nav-btn--focus:hover {
  background: rgba(59,170,90,0.08) !important;
  color: #2A9D6E !important;
  border-left-color: rgba(59,170,90,0.3) !important;
  padding-left: 18px !important;
}
.nav-btn--focus.active {
  background: linear-gradient(135deg, #0EA5A0 0%, #2A9D6E 60%, #3BAA5A 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-left-color: transparent !important;
  padding-left: 14px !important;
  box-shadow: 0 4px 16px rgba(42,157,110,0.35), 0 1px 4px rgba(42,157,110,0.20) !important;
}
.nav-btn--focus.active:hover {
  background: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 60%, #2A9D6E 100%) !important;
  padding-left: 14px !important;
}

[data-theme="dark"] .nav-btn--focus { color: var(--muted) !important; }
[data-theme="dark"] .nav-btn--focus:hover {
  background: rgba(59,170,90,0.10) !important;
  color: #4ADE80 !important;
}
[data-theme="dark"] .nav-btn--focus.active {
  background: linear-gradient(135deg, #0EA5A0 0%, #2A9D6E 60%, #3BAA5A 100%) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR — BLUE ACCENT + HOPE INDICATOR + FOCUS TAB RESET
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Change 3: Sidebar accent → blue ────────────────────────────────────── */

/* Logo wordmark */
.sidebar-brand {
  background: linear-gradient(135deg, #1D4ED8, #3B82F6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Divider */
.sidebar-divider { border-bottom-color: #EEF0FB !important; }

/* Nav items — inactive */
.nav-btn { color: #64748B !important; }

/* Nav items — hover */
.nav-btn:hover {
  background: rgba(37,99,235,0.07) !important;
  color: #2563EB !important;
  border-left-color: rgba(37,99,235,0.25) !important;
}

/* Nav items — active */
.nav-btn.active {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.30), 0 1px 4px rgba(37,99,235,0.20) !important;
  color: #FFFFFF !important;
}
.nav-btn.active:hover {
  background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
}

/* Footer tagline */
.sidebar-footer-ai { color: #2563EB !important; }

/* ── Change 1: Focus tab — standard blue gradient (no special color) ─────── */
.nav-btn--focus {
  background: transparent !important;
  color: #64748B !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  padding-left: 14px !important;
}
.nav-btn--focus:hover {
  background: rgba(37,99,235,0.07) !important;
  color: #2563EB !important;
  border-left-color: rgba(37,99,235,0.25) !important;
  padding-left: 18px !important;
}
.nav-btn--focus.active {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-left-color: transparent !important;
  padding-left: 14px !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.30), 0 1px 4px rgba(37,99,235,0.20) !important;
}
.nav-btn--focus.active:hover {
  background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
  padding-left: 14px !important;
}

/* ── Change 2: HOPE status indicator ────────────────────────────────────── */
.sidebar-hope-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(37,99,235,0.07);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(37,99,235,0.15);
}
.hope-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
  animation: hopePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hopePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(59,130,246,0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(59,130,246,0.08); }
}
.hope-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #2563EB;
}
.hope-status {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 400;
  margin-left: auto;
}

/* ── Dark mode — sidebar blue ────────────────────────────────────────────── */
[data-theme="dark"] .sidebar-brand {
  background: linear-gradient(135deg, #60A5FA, #93C5FD) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="dark"] .nav-btn { color: #94A3B8 !important; }
[data-theme="dark"] .nav-btn:hover {
  background: rgba(59,130,246,0.10) !important;
  color: #93C5FD !important;
  border-left-color: rgba(59,130,246,0.30) !important;
}
[data-theme="dark"] .nav-btn.active {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35) !important;
}
[data-theme="dark"] .sidebar-footer-ai { color: #60A5FA !important; }
[data-theme="dark"] .sidebar-hope-indicator {
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(59,130,246,0.20) !important;
}
[data-theme="dark"] .hope-label { color: #93C5FD !important; }
[data-theme="dark"] .hope-dot { background: #3B82F6 !important; }
[data-theme="dark"] .nav-btn--focus { color: #94A3B8 !important; }
[data-theme="dark"] .nav-btn--focus:hover {
  background: rgba(59,130,246,0.10) !important;
  color: #93C5FD !important;
}
[data-theme="dark"] .nav-btn--focus.active {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOPE CHAT — MOBILE OPTIMISATION
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Base panel: use dynamic viewport height where available ─────────────── */
.hope-chat-panel {
  /* dvh accounts for mobile browser chrome (address bar, keyboard) */
  height: 58dvh !important;
  height: 58vh !important; /* fallback for older browsers */
  min-height: 320px !important;
  max-height: 90dvh !important;
  max-height: 90vh !important;
  /* Give history area room to breathe */
  overflow: visible !important; /* let children scroll, don't clip */
}

/* Keep flex column so header/history/input stack correctly */
.hope-chat-panel.open { display: flex !important; flex-direction: column !important; }

/* History area must fill available space and scroll internally */
.hci-history {
  flex: 1 1 0 !important;
  min-height: 0 !important;       /* critical: prevents flex overflow */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Input row: never shrink, handle notch/home bar */
.hci-input-row {
  flex-shrink: 0 !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

/* ── Bubbles: full wrap, never overflow ─────────────────────────────────── */
.hci-bubble {
  max-width: 85% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  hyphens: auto !important;
}

/* ── Small phones (≤ 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hope-chat-panel {
    height: 72dvh !important;
    height: 72vh !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .hci-bubble {
    max-width: 92% !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* Tighter input row on small screens */
  .hci-input {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    padding: 10px 14px !important;
  }

  .hci-input-row {
    padding: 8px 10px max(12px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  /* Slightly smaller send/mic buttons */
  .hci-mic-btn, .hci-send-btn {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── Medium phones / landscape (481px – 767px) ───────────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
  .hope-chat-panel {
    height: 62dvh !important;
    height: 62vh !important;
  }

  .hci-bubble { max-width: 88% !important; }

  .hci-input { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ── When keyboard is open (viewport shrinks < 500px tall) ──────────────── */
@media (max-height: 500px) {
  .hope-chat-panel {
    height: 85dvh !important;
    height: 85vh !important;
    min-height: 280px !important;
  }
}

/* ── Suggestions strip: scroll horizontally on mobile instead of wrapping ── */
@media (max-width: 767px) {
  .hci-suggestions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    scroll-snap-type: x mandatory !important;
  }
  .hci-suggestion {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  /* Hide scrollbar but keep scroll functionality */
  .hci-suggestions::-webkit-scrollbar { display: none !important; }
}

/* ── Pill (collapsed bar): full-width on mobile ──────────────────────────── */
@media (max-width: 767px) {
  .hope-chat-bar {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding: 0 16px max(14px, env(safe-area-inset-bottom)) !important;
    justify-content: center !important;
  }
  .hope-chat-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR POLISH: CHANGE 1 + CHANGE 2
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Change 1: Sidebar background — frosted sea-glass tint ──────────────── */
.sidebar {
  background: linear-gradient(180deg,
    #F2FBFA 0%,
    #F7FDFC 40%,
    #FAFFFE 100%) !important;
}

/* ── Change 2: HOPE indicator — interactive states ───────────────────────── */
.sidebar-hope-indicator {
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}
.sidebar-hope-indicator:hover {
  background: rgba(14,165,160,0.14) !important;
  border-color: rgba(14,165,160,0.28) !important;
  transform: translateX(2px) !important;
}
.sidebar-hope-indicator:active {
  transform: translateX(1px) scale(0.99) !important;
  background: rgba(14,165,160,0.20) !important;
}

/* Chevron */
.hope-chevron {
  color: rgba(14,165,160,0.4);
  font-size: 14px;
  font-weight: 300;
  margin-left: auto;
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.sidebar-hope-indicator:hover .hope-chevron {
  transform: translateX(2px);
  color: rgba(14,165,160,0.7);
}

/* Dark mode */
[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg,
    #0E1F1E 0%,
    #0F1A19 40%,
    #0A0F0E 100%) !important;
}
[data-theme="dark"] .sidebar-hope-indicator:hover {
  background: rgba(59,130,246,0.14) !important;
  border-color: rgba(59,130,246,0.30) !important;
}
[data-theme="dark"] .hope-chevron { color: rgba(59,130,246,0.4); }
[data-theme="dark"] .sidebar-hope-indicator:hover .hope-chevron {
  color: rgba(59,130,246,0.8);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR — DEFINITIVE DARK REVERT
   Overrides all previous blue/gradient/tinted sidebar rules.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Container */
.sidebar {
  background: #0F1E1C !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.22) !important;
}

/* Wordmark — teal gradient text */
.sidebar-brand {
  background: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 45%, #38BDF8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Divider */
.sidebar-divider { border-bottom-color: rgba(255,255,255,0.08) !important; }

/* Nav items — inactive */
.nav-btn {
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Nav items — hover */
.nav-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.82) !important;
  border-left-color: rgba(14,165,160,0.45) !important;
  padding-left: 18px !important;
}

/* Nav items — active */
.nav-btn.active {
  background: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 45%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-left-color: transparent !important;
  padding-left: 14px !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.32), 0 1px 4px rgba(14,165,160,0.18) !important;
}
.nav-btn.active:hover {
  background: linear-gradient(135deg, #0B7A8C, #0EA5A0) !important;
  padding-left: 14px !important;
}

/* Focus tab — same teal gradient as every other active item */
.nav-btn--focus {
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  padding-left: 14px !important;
}
.nav-btn--focus:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.82) !important;
  border-left-color: rgba(14,165,160,0.45) !important;
  padding-left: 18px !important;
}
.nav-btn--focus.active {
  background: linear-gradient(135deg, #0B7A8C 0%, #0EA5A0 45%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-left-color: transparent !important;
  padding-left: 14px !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.32) !important;
}
.nav-btn--focus.active:hover {
  background: linear-gradient(135deg, #0B7A8C, #0EA5A0) !important;
  padding-left: 14px !important;
}

/* HOPE indicator — dark-themed, interactive, no chevron */
.sidebar-hope-indicator {
  background: rgba(14,165,160,0.12) !important;
  border-color: rgba(14,165,160,0.22) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
.sidebar-hope-indicator:hover {
  background: rgba(14,165,160,0.20) !important;
  border-color: rgba(14,165,160,0.38) !important;
  transform: translateX(2px) !important;
}
.sidebar-hope-indicator:active {
  transform: translateX(1px) scale(0.99) !important;
}
.hope-label { color: #38BDF8 !important; }
.hope-status { color: rgba(255,255,255,0.38) !important; }

/* Hide chevron if it ever appears */
.hope-chevron { display: none !important; }

/* Footer */
.sidebar-footer-ai  { color: #0EA5A0 !important; }
.sidebar-footer-tag { color: rgba(255,255,255,0.28) !important; }
.sidebar-close      { color: rgba(255,255,255,0.35) !important; }

/* Dark mode — identical (sidebar is already dark) */
[data-theme="dark"] .sidebar {
  background: #0A1412 !important;
  border-right-color: rgba(255,255,255,0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DAILY REVIEW — DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Title */
[data-theme="dark"] .dr-title {
  color: #F0FAF9 !important;
  font-weight: 700 !important;
}

/* Subtitle */
[data-theme="dark"] .dr-subtitle {
  color: #94A3B8 !important;
}

/* Daily Notes card container */
[data-theme="dark"] .dr-notes-panel {
  background: #1A2422 !important;
  border: 1px solid #2A3A37 !important;
  border-radius: 12px !important;
}

/* "Daily Notes" label */
[data-theme="dark"] .dr-notes-title {
  color: #94A3B8 !important;
}

/* "No file loaded" / file name status text */
[data-theme="dark"] .dr-notes-status {
  color: #4A6B66 !important;
}

/* Instruction hint text */
[data-theme="dark"] .dr-notes-hint {
  color: #4A6B66 !important;
}

/* Load My Notes button — keep teal gradient, ensure white text */
[data-theme="dark"] .dr-load-notes-btn {
  color: #fff !important;
}

/* Refresh Notes button dark */
[data-theme="dark"] .dr-refresh-notes-btn {
  background: #1E2E2B !important;
  color: #94A3B8 !important;
  border-color: #2A3A37 !important;
}

/* ── Filter chips (summary bar) ────────────────────────────────── */
[data-theme="dark"] .dr-pill--critical {
  background: rgba(220,38,38,0.15) !important;
  border: 1px solid rgba(220,38,38,0.4) !important;
  color: #F87171 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .dr-pill--incomplete {
  background: rgba(107,114,128,0.15) !important;
  border: 1px solid rgba(107,114,128,0.4) !important;
  color: #9CA3AF !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .dr-pill--due-today {
  background: rgba(234,88,12,0.15) !important;
  border: 1px solid rgba(234,88,12,0.4) !important;
  color: #FB923C !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .dr-pill--overdue {
  background: rgba(161,98,7,0.15) !important;
  border: 1px solid rgba(161,98,7,0.4) !important;
  color: #FBBF24 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .dr-pill--on-track {
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.35) !important;
  color: #34D399 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .dr-pill:hover {
  filter: brightness(1.2) !important;
  cursor: pointer !important;
}

/* Section background — ensure it doesn't disappear */
[data-theme="dark"] #daily-review {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   UPGRADE PACK — Bug Fixes, Speed Upgrades, Visual Polish
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── A1: Dark mode scheduler inputs ──────────────────────────────────────── */
[data-theme="dark"] #scheduler input,
[data-theme="dark"] #scheduler select,
[data-theme="dark"] #eventFormContainer input,
[data-theme="dark"] #eventFormContainer select,
[data-theme="dark"] #eventFormContainer textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* ── A2: HOPE Pulse Bar mobile carousel fix ──────────────────────────────── */
@media (max-width: 479px) {
  .hope-carousel {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .hope-carousel-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* ── B1: Log Contact button on pipeline cards ────────────────────────────── */
.log-contact-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--on-track-border, #A7F3D0);
  background: var(--on-track-bg, #ECFDF5);
  color: var(--on-track, #059669);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.log-contact-btn:hover {
  background: var(--on-track, #059669);
  color: #fff;
}
.log-contact-btn.logged {
  background: var(--on-track, #059669);
  color: #fff;
  border-color: var(--on-track, #059669);
}
[data-theme="dark"] .log-contact-btn {
  background: rgba(5,150,105,0.12) !important;
  border-color: rgba(5,150,105,0.30) !important;
  color: #34D399 !important;
}
[data-theme="dark"] .log-contact-btn:hover {
  background: rgba(5,150,105,0.28) !important;
  color: #6EE7B7 !important;
}

/* ── B2: Snooze button on daily review cards ─────────────────────────────── */
.snooze-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.snooze-btn:hover {
  background: #e2e8f0;
  color: #334155;
}
.snooze-btn.snoozed {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}
[data-theme="dark"] .snooze-btn {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .snooze-btn:hover {
  background: var(--bg-tertiary) !important;
  color: var(--ink-secondary) !important;
}

/* ── B3: Criticals Banner ────────────────────────────────────────────────── */
.criticals-banner {
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.criticals-banner--red {
  background: var(--critical-bg, #FFF1F1);
  border: 1px solid var(--critical-border, #FECACA);
  color: var(--critical, #DC2626);
}
.criticals-banner--green {
  background: var(--on-track-bg, #ECFDF5);
  border: 1px solid var(--on-track-border, #A7F3D0);
  color: var(--on-track, #059669);
}
.criticals-banner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.criticals-banner a:hover { opacity: 0.8; }
[data-theme="dark"] .criticals-banner--red {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.35) !important;
  color: #F87171 !important;
}
[data-theme="dark"] .criticals-banner--green {
  background: rgba(5,150,105,0.12) !important;
  border-color: rgba(5,150,105,0.30) !important;
  color: #34D399 !important;
}

/* ── C1: Empty states ────────────────────────────────────────────────────── */
.pipeline-empty-state {
  text-align: center;
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13px;
}
.pipeline-empty-state .empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}
.pipeline-empty-state p { margin: 0; color: var(--muted); }
.daily-review-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
  font-size: 14px;
}
.daily-review-empty p { margin: 4px 0; }
.scheduler-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* ── C2: Nav badges ──────────────────────────────────────────────────────── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  color: inherit;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}
.nav-btn:not(.active) .nav-badge {
  background: var(--teal-subtle, #E8F5F3);
  color: var(--teal-dark, #0B7A8C);
}
.nav-btn.active .nav-badge {
  background: rgba(255,255,255,0.28);
  color: #fff;
}
[data-theme="dark"] .nav-btn:not(.active) .nav-badge {
  background: rgba(14,165,160,0.15) !important;
  color: var(--teal-light, #38BDF8) !important;
}

/* ── C3: Coordinator badge ────────────────────────────────────────────────── */
.coordinator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: uppercase;
}
.coordinator-badge--rudy    { background: #0EA5A0; }
.coordinator-badge--lucy    { background: #3B82F6; }
.coordinator-badge--jhona   { background: #7C3AED; }
.coordinator-badge--natalie { background: #EC4899; }
.coordinator-badge--none    { background: #94A3B8; }

/* ── C4: Days-since date display ─────────────────────────────────────────── */
.days-since-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.days-since-count {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.days-since-date {
  font-size: 9px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 1px;
}

/* ── C5: Card flash / slide-in animations ────────────────────────────────── */
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,0.45); }
  50%  { box-shadow: 0 0 0 6px rgba(5,150,105,0); background: rgba(5,150,105,0.10); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card--flash    { animation: cardFlash 0.6s ease-out; }
.card--slide-in { animation: cardSlideIn 0.35s var(--ease-out, ease-out); }

/* ── Dark mode sidebar text — match main content brightness ─────────────── */
[data-theme="dark"] .nav-btn {
  color: rgba(255,255,255,0.72) !important;
}
[data-theme="dark"] .nav-btn:hover {
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .nav-btn.active {
  color: #ffffff !important;
}
[data-theme="dark"] .nav-btn--focus {
  color: rgba(255,255,255,0.72) !important;
}
[data-theme="dark"] .nav-btn--focus:hover {
  color: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] .sidebar-footer-tag {
  color: rgba(255,255,255,0.45) !important;
}
[data-theme="dark"] .hope-status {
  color: rgba(255,255,255,0.55) !important;
}

/* ══════════════════════════════════════════════════════
   SURGICAL DARK MODE FIXES — 4 targeted patches
   ══════════════════════════════════════════════════════ */

/* FIX 1 — Nav text: kill all blue/teal tint, match main content #E2F0EE */
[data-theme="dark"] .nav-btn {
  color: rgba(226,240,238,0.80) !important;
  background: transparent !important;
}
[data-theme="dark"] .nav-btn:hover {
  color: rgba(226,240,238,0.95) !important;
  background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .nav-btn.active {
  color: #ffffff !important;
}
[data-theme="dark"] .nav-btn--focus {
  color: rgba(226,240,238,0.80) !important;
  background: transparent !important;
}
[data-theme="dark"] .nav-btn--focus:hover {
  color: rgba(226,240,238,0.95) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* FIX 2 — Nav badge overflow: flex layout so badge never pushes text out */
.nav-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.nav-btn .nav-btn-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.nav-badge {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  float: none !important;
}

/* FIX 3 — Scheduler admission countdown rail: dark background */
[data-theme="dark"] .admission-countdown-rail {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .countdown-card {
  background: var(--bg-tertiary) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .countdown-card span,
[data-theme="dark"] .countdown-card p,
[data-theme="dark"] .countdown-card small {
  color: var(--muted) !important;
}
[data-theme="dark"] .countdown-card strong { color: var(--ink) !important; }
[data-theme="dark"] .admission-countdown-rail h3 { color: var(--ink) !important; }
[data-theme="dark"] .admission-countdown-rail p  { color: var(--muted) !important; }
[data-theme="dark"] .sla-empty { color: var(--muted) !important; }
[data-theme="dark"] .coordinator-load-radar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* FIX 4 — Focus tab: kill any white/light backgrounds */
[data-theme="dark"] #focus,
[data-theme="dark"] .focus-view,
[data-theme="dark"] .focus-content {
  background: transparent !important;
}
[data-theme="dark"] .last-session-banner {
  background: #1A2422 !important;
  border: 1px solid #2A3A37 !important;
  color: #E2F0EE !important;
}
[data-theme="dark"] .lsb-text strong { color: #E2F0EE !important; }
[data-theme="dark"] .lsb-text span   { color: rgba(226,240,238,0.65) !important; }
[data-theme="dark"] .focus-header,
[data-theme="dark"] .focus-zone-1,
[data-theme="dark"] .focus-zone-2,
[data-theme="dark"] .focus-zone-3 {
  background: transparent !important;
}
[data-theme="dark"] .focus-queue-card,
[data-theme="dark"] .focus-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* ══════════════════════════════════════════════════════
   FINAL OVERRIDE — sidebar text white-gray + nav fit
   Must be last block in file to win all specificity wars
   ══════════════════════════════════════════════════════ */

/* FIX 1 — Kill every teal/blue shade from nav text in dark mode */
[data-theme="dark"] .nav-btn,
[data-theme="dark"] .nav-btn span,
[data-theme="dark"] .nav-btn .nav-btn-label,
[data-theme="dark"] .nav-label,
[data-theme="dark"] .sidebar nav button,
[data-theme="dark"] .sidebar nav button span {
  color: rgba(226, 240, 238, 0.82) !important;
  -webkit-text-fill-color: rgba(226, 240, 238, 0.82) !important;
}

[data-theme="dark"] .nav-btn:hover,
[data-theme="dark"] .nav-btn:hover span,
[data-theme="dark"] .nav-btn:hover .nav-btn-label {
  color: rgba(226, 240, 238, 0.97) !important;
  -webkit-text-fill-color: rgba(226, 240, 238, 0.97) !important;
}

[data-theme="dark"] .nav-btn.active,
[data-theme="dark"] .nav-btn.active span,
[data-theme="dark"] .nav-btn.active .nav-btn-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Badge and brand wordmark keep their own rendering */
[data-theme="dark"] .nav-btn .nav-badge,
[data-theme="dark"] .nav-btn.active .nav-badge {
  -webkit-text-fill-color: unset !important;
}
[data-theme="dark"] .sidebar-brand {
  -webkit-text-fill-color: transparent !important;
}

/* FIX 2 — Nav tab fits sidebar width: flex with truncating label */
.nav-btn {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.nav-btn .nav-btn-label,
.nav-btn > span:first-child:not(.nav-badge):not(.nav-badge *) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-btn .nav-badge {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  float: none !important;
}

/* ── Daily Review sync button ─────────────────────────────────────────────── */
.dr-sync-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid var(--teal);
  background: transparent;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.dr-sync-btn:hover {
  background: var(--teal-subtle);
}
[data-theme="dark"] .dr-sync-btn {
  background: #1A2A27;
  color: #E2F0EE;
  border-color: var(--teal);
}
[data-theme="dark"] .dr-sync-btn:hover {
  background: rgba(14,165,160,0.15);
}