/* ---------------------------------------------------------------
   Casa - Alegria Home Care
   Colours and type taken from alegriahc.com, so the tool your team
   uses all day looks like the company it belongs to. Navy for
   structure, teal for the working parts, gold reserved for the one
   action that matters on a screen.
   --------------------------------------------------------------- */
:root {
  /* Brand, sampled from the website */
  --navy:#1e3a5f;        /* headings, header bar, primary buttons */
  --navy-dark:#15293f;
  --navy-soft:#2c4f7c;
  --teal:#4a90a4;        /* secondary emphasis, links, active state */
  --teal-dark:#3a7286;
  --teal-bg:#eaf2f5;
  --gold:#d4a044;        /* one call to action per screen, never more */
  --gold-dark:#b9862f;
  --gold-bg:#fbf3e3;

  /* Neutrals - the site's grey ramp */
  --ink:#111827;
  --ink-2:#374151;
  --sub:#6b7280;
  --sub-2:#9ca3af;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --bg:#f7f7f6;
  --bg-2:#f3f4f6;
  --card:#ffffff;

  /* Status colours. Kept muted: on a board of two hundred rows,
     saturated colour stops meaning anything. */
  --slate:#4a90a4;   --slate-bg:#eaf2f5;
  --green:#15803d;   --green-bg:#e9f5ec;
  --amber:#b45309;   --amber-bg:#fdf3e6;
  --red:#b91c1c;     --red-bg:#fdeaea;
  --indigo:#4338ca;  --indigo-bg:#edecfb;
  --rose:#be185d;    --rose-bg:#fbeaf1;
  --violet:#7e22ce;  --violet-bg:#f3e9fb;
  --emerald:#15803d; --emerald-bg:#e7f5eb;
  --sky:#0369a1;     --sky-bg:#e6f2fa;
  --warn:#b45309;    --warn-bg:#fdf3e6;

  --radius:10px;
  --radius-sm:7px;
  /* Shadows this soft read as depth rather than decoration. */
  --shadow-1:0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.04);
  --shadow-2:0 4px 12px rgba(17,24,39,.07), 0 1px 3px rgba(17,24,39,.05);
  --shadow-3:0 12px 32px rgba(17,24,39,.12);

  /* Playfair for names and page titles, Inter for everything else -
     the pairing the website uses. Both have real fallbacks: an
     intake screen must not wait on a font server to be legible. */
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  /* A flat, quiet ground. The old page had a gold wash behind it,
     which fought with every card sitting on top. */
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .caseFileName, .brandWord { font-family: var(--font-display); }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 100px;
  transition: padding-top .15s ease;
}

/* Persistent reminders — small stacked cards floating in the dead space on
   the right edge of the screen, visible on every tab, until each is marked
   complete. Completing one only clears the reminder — it never touches the
   underlying case's done status. */
/* Sits below the tab nav row (not over the header/tabs) so it never blocks
   switching tabs — that took priority over being visible the instant the
   page loads. */
#reminderBar {
  position: fixed; top: 170px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 10px; width: 190px;
}
/* Overdue follow-ups — fixed like the to-do reminders above, so they follow
   scroll and show on every tab, just offset lower so they stack below the
   to-do reminders instead of covering them. */
#followupReminderBar {
  position: fixed; top: 290px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 10px; width: 190px;
}
.reminder-item {
  background: var(--gold); color: #2a2110; padding: 12px 14px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); font-size: 13px;
}
.reminder-item .reminder-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
/* Brief confirmation shown in place of the card right after snoozing —
   without it, the card silently vanishing looks identical to a permanent
   dismiss instead of "back in 30 minutes". */
.reminder-snoozed-confirm { font-weight: 700; font-size: 12.5px; line-height: 1.35; text-align: center; padding: 6px 0; }
.reminder-item .reminder-case { font-weight: 800; font-size: 13px; line-height: 1.25; }
.reminder-item .reminder-text { font-weight: 500; font-size: 12.5px; line-height: 1.3; margin-bottom: 10px; }
.reminder-item .reminder-clock {
  flex: none; border: none; background: rgba(0,0,0,0.12); color: inherit; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reminder-item .reminder-clock:hover { background: rgba(0,0,0,0.22); }
.reminder-item .reminder-clock svg { width: 15px; height: 15px; flex-shrink: 0; }
.reminder-item .reminder-complete {
  width: 100%; border: none; background: rgba(0,0,0,0.12); color: inherit; font-weight: 700;
  padding: 6px 0; border-radius: 7px; cursor: pointer; font-size: 12px;
}
.reminder-item .reminder-complete:hover { background: rgba(0,0,0,0.2); }
.reminder-item button {
  border: none; background: rgba(0,0,0,0.12); color: inherit; font-weight: 700;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; flex: none;
}
.reminder-item button:hover { background: rgba(0,0,0,0.2); }
/* To-do reminders linked to a case — color-coded by the case's MCO (blue) vs
   state (orange) status, same as everywhere else in the app. Overdue
   follow-ups use the identical card, just always red, to stand out as the
   urgent one. All three share the same light icon-button treatment, since
   all three sit on a saturated color with white text. */
.reminder-item.reminder-mco { background: #2563eb; color: #fff; }
.reminder-item.reminder-state { background: #c2650b; color: #fff; }
.reminder-item.reminder-followup { background: #dc2626; color: #fff; }
.reminder-item.reminder-mco .reminder-clock, .reminder-item.reminder-state .reminder-clock,
.reminder-item.reminder-followup .reminder-clock { background: rgba(255,255,255,0.22); }
.reminder-item.reminder-mco .reminder-clock:hover, .reminder-item.reminder-state .reminder-clock:hover,
.reminder-item.reminder-followup .reminder-clock:hover { background: rgba(255,255,255,0.34); }
/* Follow-up cards get a second icon button up top — × cancels the follow-up
   without completing the case, unlike the check mark below. */
.reminder-top-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.reminder-fu-close {
  flex: none; border: none; background: rgba(255,255,255,0.22); color: inherit; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.reminder-fu-close:hover { background: rgba(255,255,255,0.34); }
.reminder-x {
  flex: none; border: none; background: rgba(0,0,0,0.12); color: inherit; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.reminder-x:hover { background: rgba(0,0,0,0.22); }
.reminder-fu-actions { display: flex; align-items: center; gap: 6px; }
.reminder-fu-btn {
  flex: 1; border: none; background: rgba(255,255,255,0.22); color: #fff; font-weight: 700;
  font-size: 12px; padding: 7px 0; border-radius: 7px; cursor: pointer;
}
.reminder-fu-btn:hover:not(:disabled) { background: rgba(255,255,255,0.34); }
.reminder-fu-btn:disabled { opacity: .55; cursor: default; }
.reminder-fu-check {
  flex: none; width: 30px; height: 28px; border: none; border-radius: 7px; cursor: pointer;
  background: #16a34a; color: #fff; font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.reminder-fu-check:hover { background: #128a3e; }

header {
  position: relative;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 18px 22px 14px;
  border-radius: 18px;
  background: linear-gradient(120deg, #5a8ba6 0%, #3f6d87 55%, #1c3a5a 100%);
}
/* Faint oversized heart watermark bleeding off the top-left corner — same
   mark as the logo, just huge and low-opacity so it reads as texture. */
header::before {
  content: "";
  position: absolute; left: -60px; top: -80px; width: 260px; height: 260px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 22 C 42 8, 20 8, 12 24 C 4 40, 12 56, 50 88 C 88 56, 96 40, 88 24 C 80 8, 58 8, 50 22 Z" fill="none" stroke="%23c9a05c" stroke-width="1.6"/></svg>') no-repeat center / contain;
  opacity: 0.28;
  pointer-events: none;
}

.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.brandLogo { height: 34px; width: auto; }

h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; color: var(--navy); font-weight: 600; font-family: Georgia, "Times New Roman", serif; }
h2 { margin-top: 0; color: var(--navy); }

/* Scoped to the header. As a bare `nav` selector this also caught the
   lead page's section rail and laid it out as a squeezed horizontal
   row - a global element selector reaching into a component built
   months later. */
header nav { position: relative; z-index: 1; display: flex; gap: 6px; overflow-x: auto; }

.tabBtn {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.tabBtn.active { background: var(--bg); color: var(--navy); border-color: var(--bg); box-shadow: inset 0 -3px 0 var(--gold); }

.subNav { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
.subTabBtn {
  background: var(--card); border: 1px solid var(--line); color: var(--navy);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.subTabBtn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

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

.subtitle { color: var(--sub); font-size: 13px; margin-top: -8px; }

/* Progress bar */
.progress-shell {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; margin: 20px 0; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.progress-count { font-size: 20px; font-weight: 700; }
.progress-count span { color: var(--sub); font-weight: 500; font-size: 13px; }
.progress-pct { font-size: 14px; color: var(--sub); font-weight: 600; }
.bar-track { height: 10px; background: var(--line); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--navy), var(--gold)); border-radius: 8px; transition: width .35s ease; }

/* Follow-up tray */
.tray { background: var(--warn-bg); border: 1px solid #f3ddb0; border-radius: 16px; padding: 6px; margin-bottom: 20px; display: none; }
.tray.show { display: block; }
.tray-head { padding: 10px 14px 6px; font-size: 13px; font-weight: 700; color: var(--warn); }
.tray-item { background: #fff; border-radius: 12px; padding: 12px 13px; margin: 5px; position: relative; }
.tray-remove {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: transparent; color: #dc2626; font-size: 15px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.tray-remove:hover { background: #fdeaea; }
.tray-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.tray-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tray-name { font-weight: 700; font-size: 14px; white-space: nowrap; }
.tray-time { font-size: 12px; color: var(--sub); white-space: nowrap; background: var(--bg); padding: 2px 8px; border-radius: 999px; }
.tray-note {
  flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 13px;
  font-family: inherit; min-width: 0; background: var(--bg);
}
.tray-actions { display: flex; gap: 6px; }
.tray-btn {
  border: none; font-size: 12.5px; font-weight: 700; padding: 8px 0; border-radius: 9px; cursor: pointer; flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tray-btn.cw { background: var(--indigo-bg); color: var(--indigo); }
.tray-btn.case { background: var(--teal-bg); color: var(--teal); }
.tray-btn.email { background: var(--gold-bg); color: var(--gold); }
.tray-btn.done { background: var(--emerald-bg); color: var(--emerald); }
.tray-btn:hover { filter: brightness(0.95); }
.tray-btn.need-number { background: #efece5; color: var(--sub); }

/* Add case form (still used by To-Do's "+ Add task") */
.addCaseDetails { margin-bottom: 16px; }
.addCaseDetails summary, .addBtn {
  cursor: pointer; font-weight: 700; font-size: 13px; color: #fff; background: var(--navy);
  display: inline-block; padding: 9px 16px; border-radius: 8px; list-style: none; border: none;
}
.addCaseDetails summary::-webkit-details-marker { display: none; }
.addCaseDetails summary:hover, .addBtn:hover { background: var(--navy-dark); }
.addCaseDetails[open] summary { border-radius: 8px 8px 0 0; }
.addBtn { margin-bottom: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 8px;
}
.row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.row input[type="text"], .row input[type="tel"], .row input[type="url"], .row input[type="datetime-local"], .row input[type="date"], .row input[type="time"], .row textarea {
  flex: 1; min-width: 140px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit;
}
.row textarea { resize: vertical; }
.card button[type="submit"] {
  background: var(--navy); color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.card button[type="submit"]:hover { background: var(--navy-dark); }

/* Sections */
.section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.section-head { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.section-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.section-count { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.section-head-right { display: flex; align-items: center; gap: 8px; }
.edit-section-btn {
  border: none; background: transparent; color: var(--sub); cursor: pointer; font-size: 14px;
  width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.edit-section-btn:hover { background: var(--bg); }
.edit-section-btn.on { background: var(--gold-bg); color: var(--gold); }

ul { list-style: none; margin: 0; padding: 6px; }
li { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 10px; transition: background .15s ease; }
/* At-a-glance payer stripe: MCO (Molina/UHC/Meridian) blue, State/MDHHS gold */
li.payer-mco { border-left: 4px solid var(--slate); }
li.payer-state { border-left: 4px solid var(--gold); }
li:has(.edit-field) { flex-wrap: wrap; }
li:hover { background: var(--bg); }

.row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #cfccc5; flex: none; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: all .15s ease; }
li.done .box svg { opacity: 1; transform: scale(1); }
.name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li.done .name { color: var(--sub); text-decoration: line-through; text-decoration-color: #cfccc5; }
.item-notes { font-size: 12px; color: var(--sub); }

.iconBtn2 { flex: none; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--sub); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.iconBtn2:hover { background: var(--line); }
/* Bigger variant for the E-Sign document row actions — same icons, just
   more comfortable to tap/click, laid out horizontally (eye, pencil, x). */
.iconBtn2Lg { width: 40px; height: 40px; font-size: 20px; border: 1px solid var(--line); }
.iconBtn2Lg.danger { font-size: 24px; }

.fileLinkBtn {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: var(--gold-bg); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fileLinkBtn:hover:not(:disabled) { background: #f0e2c4; }
.fileLinkBtn:disabled { opacity: .3; cursor: default; }

.notesBtn {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: var(--line); color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.notesBtn:hover { filter: brightness(0.95); }
.notesBtn.has-notes { background: var(--slate-bg); color: var(--slate); }
.addNoteBtn { border: none; background: transparent; color: var(--sub); cursor: pointer; font-size: 12px; padding: 0 2px; vertical-align: middle; }
.addNoteBtn:hover { color: var(--ink); }

/* Sticky notes panel — a floating panel, not a modal: no backdrop, doesn't
   close on outside click, stays open while working within the Dashboard tab. */
#notesPanel {
  display: none; position: fixed; bottom: 24px; right: 24px; z-index: 600;
  width: 320px; max-height: 60vh; background: #fff; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22); border: 1px solid var(--line);
  flex-direction: column; overflow: hidden;
}
#notesPanel.show { display: flex; }
.notesPanelHeader {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: var(--slate-bg); flex: none;
}
#notesPanelTitle { font-weight: 700; font-size: 14px; color: var(--ink); }
#notesPanelAddToggleBtn { border: none; background: transparent; font-size: 15px; line-height: 1; color: var(--slate); cursor: pointer; padding: 0 6px; }
#notesPanelAddToggleBtn:hover { color: var(--navy); }
#notesPanelCloseBtn { border: none; background: transparent; font-size: 18px; line-height: 1; color: var(--sub); cursor: pointer; padding: 0 4px; }
#notesPanelCloseBtn:hover { color: var(--ink); }
#notesPanelAddRow { display: none; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
#notesPanelAddRow.show { display: block; }
#notesPanelAddInput {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px;
  font-family: inherit; resize: none; height: 32px; transition: height .15s ease; margin-bottom: 6px; overflow: hidden;
}
#notesPanelAddInput:focus { height: 60px; overflow: auto; }
#notesPanelAddBtn { width: 100%; border: none; background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 0; border-radius: 8px; cursor: pointer; }
#notesPanelAddBtn:hover { background: var(--navy-dark); }
#notesPanelBody { padding: 12px 14px; overflow-y: auto; }
.noteEntry { padding: 8px 0; border-bottom: 1px solid var(--line); }
.noteEntry:last-child { border-bottom: none; }
.noteEntryMeta { font-size: 11px; color: var(--sub); font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; }
.noteEntryText { font-size: 13px; color: var(--ink); white-space: pre-wrap; }
.noteDeleteBtn { border: none; background: transparent; color: var(--sub); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.noteDeleteBtn:hover { color: var(--rose); }

.fillInflowcareBtn {
  display: block; margin: 4px 0 10px; border: 1px solid var(--line); background: var(--card);
  color: var(--navy); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
}
.fillInflowcareBtn:hover { background: var(--bg); }

.settingsBtn {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10); color: #fff; font-size: 17px; cursor: pointer;
}
.settingsBtn:hover { background: rgba(255,255,255,0.2); }
#editOrderBtn { margin-left: auto; }

.settings-link {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--navy); font-weight: 700; font-size: 14px; padding: 4px 0; cursor: pointer;
}
.settings-link:hover { text-decoration: underline; }
.settings-divider { height: 1px; background: #000; margin: 10px 0 14px; }

/* Section order modal */
#sectionOrderBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#sectionOrderBackdrop.show { display: flex; }
#sectionOrderModal { background: #fff; border-radius: 16px; padding: 20px; width: 380px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
#sectionOrderModal .nm-sub { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
#sectionOrderList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.orderRow { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.orderRowName { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.orderMoveBtn { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 11px; }
.orderMoveBtn:hover:not(:disabled) { background: var(--line); }
.orderMoveBtn:disabled { opacity: .3; cursor: default; }

.row-call-btn {
  flex: none; border: none; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  white-space: nowrap;
}
.row-call-btn.cw { background: var(--indigo-bg); color: var(--indigo); }
.row-call-btn.case { background: var(--teal-bg); color: var(--teal); }
.row-call-btn.payer { background: var(--amber-bg); color: var(--amber); }

/* Case status tags: fixed order DSNP -> Payer -> Spend Down -> County */
.caseTags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.caseTag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; white-space: nowrap; }
.caseTag.dsnp { background: var(--indigo-bg); color: var(--indigo); }
.caseTag.payer { background: var(--slate-bg); color: var(--slate); }
.caseTag.spenddown { background: var(--amber-bg); color: var(--amber); }
.caseTag.county { background: var(--teal-bg); color: var(--teal); }
.row-call-btn:disabled { background: var(--line); color: var(--sub); cursor: default; opacity: .6; }
.row-call-btn:hover:not(:disabled) { filter: brightness(0.95); }

.exit-case-btn {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--rose-bg); color: var(--rose);
  font-size: 14px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.exit-case-btn:hover { filter: brightness(0.95); }

.edit-field {
  flex: 1; min-width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-family: inherit;
}

.empty { color: var(--sub); font-size: 13px; padding: 10px 14px; }

/* Global snooze popover */
#globalPopover, .popoverBox {
  display: none; position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 10px; z-index: 500; width: 230px;
}
#globalPopover.show, .popoverBox.show { display: block; }
.popover-label { font-size: 11px; color: var(--sub); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.quick-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.quick-btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 600; padding: 7px 0; border-radius: 8px; cursor: pointer; flex: 1; min-width: 44px; text-align: center; }
.quick-btn:hover { background: #e9e6df; }
.custom-row { display: flex; gap: 6px; }
.custom-row input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size: 13px; font-family: inherit; }
.custom-row button { border: none; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.popover-note {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px;
  font-family: inherit; resize: none; height: 32px; transition: height .15s ease; margin-bottom: 8px; overflow: hidden;
}
.popover-note:focus { height: 64px; overflow: auto; }
.clear-snooze-btn { width: 100%; border: none; background: var(--rose-bg); color: var(--rose); font-size: 12px; font-weight: 700; padding: 7px 0; border-radius: 8px; cursor: pointer; }
.clear-snooze-btn:hover { filter: brightness(0.95); }

/* Call options modal */
#callOptBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#callOptBackdrop.show { display: flex; }
#callOptModal { background: #fff; border-radius: 16px; padding: 18px; width: 300px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.nm-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.co-big-row { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 14px; }
.co-big { flex: 1; font-size: 20px; font-weight: 700; text-align: center; background: var(--bg); border-radius: 10px; padding: 10px; letter-spacing: .02em; }
.co-copy-icon { flex: none; width: 60px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.co-copy-icon:hover { background: #e9e6df; }
.co-call-btn { display: block; width: 100%; background: #15803d; color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit; margin-bottom: 8px; }
.co-call-btn:hover { background: #0f6b30; }
.co-call-btn:disabled { background: var(--line); color: var(--sub); cursor: default; }
.co-status { font-size: 12px; color: var(--sub); text-align: center; margin: -2px 0 8px; min-height: 15px; }
.co-status.error { color: #b00020; }
.co-status.ok { color: #0a7d2c; }
.nm-cancel { width: 100%; border: none; background: var(--bg); color: var(--sub); border-radius: 9px; padding: 9px 0; font-weight: 700; font-size: 13px; cursor: pointer; }
#coCaregiverSection { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#coEmailSection { display: none; margin-top: 8px; }
.co-email-btn {
  display: block; width: 100%; background: var(--emerald-bg); color: var(--emerald); border: none;
  border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.co-email-btn:hover { background: #d8efdf; }
#coCgLabel { font-size: 15px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0 0 2px; text-align: center; }
#coCgNumber { font-size: 14px; color: var(--sub); text-align: center; margin: 0 0 8px; }
#coCgCallBtn { margin-bottom: 8px; }
#coCgRelationship { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--ink); }

/* Email compose modal */
#emailComposeBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#emailComposeBackdrop.show { display: flex; }
#emailComposeModal { background: #fff; border-radius: 16px; padding: 20px; width: 460px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
#emailComposeModal .nm-sub { font-size: 12px; color: var(--sub); margin-bottom: 4px; }

/* ASW visit modal */
#changePasswordBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#changePasswordBackdrop.show { display: flex; }
#changePasswordModal { background: #fff; border-radius: 16px; padding: 20px; width: 320px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
#changePasswordModal .nm-sub { font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.cpInput { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; margin-bottom: 12px; font-family: inherit; }

#aswVisitBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#aswVisitBackdrop.show { display: flex; }
#aswVisitModal { background: #fff; border-radius: 16px; padding: 20px; width: 420px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
#aswVisitModal .nm-sub { font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.asw-visit-line { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }

/* Admitted billing modal */
.backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
.backdrop.show { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 20px; width: 360px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.modal label { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin: 10px 0 4px; }
.modal input, .modal select { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.modal label.checkboxRow, .caseFile label.checkboxRow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 14px; }
.modal label.checkboxRow input, .caseFile label.checkboxRow input { width: auto; }

/* Case file (All Cases -> click a name) — a full-screen overlay so it's
   never buried below a long case list at some scroll position the user has
   to go hunting for; empty div collapses to nothing when closed. */
#allCasesDetail:not(:empty) {
  position: fixed; inset: 0; z-index: 500; background: rgba(20,30,40,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
#allCasesDetail .caseFile { width: 100%; max-width: 640px; margin-top: 0 !important; box-shadow: 0 24px 60px -12px rgba(10,20,35,0.4); }
/* Lead/caregiver detail pops up the same way the case file does, instead of
   just rendering inline at the bottom of whatever list was scrolled to. */
#leadsDetail:not(:empty) {
  position: fixed; inset: 0; z-index: 500; background: rgba(20,30,40,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
#leadsDetail .caseFile { width: 100%; max-width: 640px; margin-top: 0 !important; box-shadow: 0 24px 60px -12px rgba(10,20,35,0.4); }
.caseFile h4 {
  margin: 24px 0 10px; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--tab-color, var(--navy)); font-family: Georgia, "Times New Roman", serif;
  border-bottom: 2px solid var(--tab-color, var(--line)); padding-bottom: 8px;
}
.caseFile h4:first-child { margin-top: 4px; }
.caseFile label:not(.checkboxRow) { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin: 10px 0 4px; }
.caseFile .row select, .caseFile .row input[type="number"] {
  flex: 1; min-width: 140px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit;
}
.caseFileHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.caseFileName { font-size: 20px; font-weight: 700; color: var(--navy); font-family: Georgia, "Times New Roman", serif; }
.caseFileSub { font-size: 12px; color: var(--sub); margin-top: 2px; }
.caseFileHeadActions { display: flex; align-items: center; gap: 6px; flex: none; }
#acStatus { font-size: 13px; color: var(--sub); }
.fieldHint { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--sub); font-size: 11px; }

/* Notes table, styled after Inflowcare's own notes list: numbered rows,
   the note text as the main event, author/timestamp secondary and off to
   the side — not run together on one cramped line. */
.notesTable { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.notesTableRow { display: flex; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.notesTableRow:last-child { border-bottom: none; }
.notesTableRow:nth-child(odd) { background: var(--bg); }
.notesTableNum { flex: none; width: 20px; color: var(--sub); font-size: 12px; font-weight: 700; padding-top: 1px; }
.notesTableText { flex: 1; font-size: 14px; color: #232323; line-height: 1.4; }
.notesTableMeta { flex: none; text-align: right; font-size: 11px; color: var(--sub); line-height: 1.4; white-space: nowrap; }
.viewAllNotesBtn {
  display: block; margin-top: 8px; background: var(--slate-bg); color: var(--slate); border: none;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.viewAllNotesBtn:hover { filter: brightness(0.95); }
#acSaveBtn, #acAddNoteBtn {
  background: var(--navy); color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
#acSaveBtn:hover, #acAddNoteBtn:hover { background: var(--navy-dark); }
.modal button.secondary, button.secondary { background: var(--card); color: var(--sub); border: 1px solid var(--line); }
.modal button.danger { background: #fff; color: #dc2626; border: 1px solid #dc2626; margin-right: auto; }
.modal button.danger:hover { background: #fef2f2; }

/* Statistics tab */
.statTilesRow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.statTile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; min-width: 160px; flex: 1; background: var(--card); }
.statLabel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; color: var(--sub); }
.statValue { font-size: 24px; font-weight: 700; color: var(--ink); }
/* Money figures: black label, green value (money's color) — only the
   number itself is colored, not the whole tile. Case counts: gold/navy
   brand accents. Averages: plain black-and-white, deliberately unaccented. */
.statTile.money { background: #fff; border-color: var(--green); }
.statTile.money .statLabel { color: #111; }
.statTile.money .statValue { color: var(--green); }
.statTile.count { background: var(--gold-bg); border-color: var(--gold); }
.statTile.count .statLabel { color: var(--navy); }
.statTile.count .statValue {
  background: linear-gradient(100deg, #a67c00 0%, #fff3b0 25%, #ffd700 50%, #fff3b0 75%, #a67c00 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldShine 3.5s linear infinite;
}
@keyframes goldShine { to { background-position: -220% center; } }
.statTile.average { background: #fff; border-color: #333; }
.statTile.average .statLabel { color: #555; }
.statTile.average .statValue { color: #111; }
.statTilesRow.hero { margin-bottom: 4px; }
.statTile.big { padding: 22px 26px; min-width: 220px; }
.statTile.big .statLabel { font-size: 13px; }
.statTile.big .statValue { font-size: 40px; }

.statBreakdownScroll { overflow-x: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; }
.statBreakdownTable { width: 100%; min-width: 700px; border-collapse: collapse; background: var(--card); }
.statBreakdownTable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--sub); padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.statBreakdownTable td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.statBreakdownTable tr:last-child td { border-bottom: none; }
.statBreakdownTable .stickyCol { position: sticky; left: 0; background: var(--card); box-shadow: 1px 0 0 var(--line); font-weight: 600; }
.statBreakdownTable th.stickyCol { background: var(--bg); z-index: 1; }
.statEditBtn { border: none; background: none; font-size: 15px; cursor: pointer; color: var(--sub); }
.statEditBtn:hover { color: var(--navy); }

/* Calendar tab — real month grid */
.monthCalHeader { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.monthCalHeader h2 { margin: 0; min-width: 200px; text-align: center; }
.monthCalNavBtn { border: 1px solid var(--line); background: var(--card); color: var(--navy); width: 34px; height: 34px; border-radius: 8px; font-size: 18px; cursor: pointer; }
.monthCalNavBtn:hover { background: var(--bg); }
.monthCalTodayBtn { border: 1px solid var(--line); background: var(--card); color: var(--navy); font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 8px; cursor: pointer; margin-left: auto; }
.monthCalTodayBtn:hover { background: var(--bg); }
.calLegend { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; }
.calLegendItem { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sub); }
.calLegendDot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.calLegendDot.asw { background: var(--gold); }
.calLegendDot.callback { background: #2563eb; }
.calLegendDot.todo { background: var(--teal); }
.monthCalWeekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.monthCalWeekdays div { text-align: center; font-size: 12px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
.monthCalGrid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(90px, auto); gap: 6px; margin-bottom: 24px; }
.monthCalDay { background: var(--card); border-radius: 10px; padding: 6px; border: 1px solid var(--line); overflow: hidden; }
.monthCalDay.outside { background: transparent; border-color: transparent; }
.monthCalDay.today { border-color: var(--navy); border-width: 2px; }
.monthCalDayNum { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.monthCalDay.outside .monthCalDayNum { color: var(--sub); opacity: .4; }
.monthCalEvent {
  font-size: 10.5px; font-weight: 600; padding: 2px 5px; border-radius: 5px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.monthCalEvent.asw { background: var(--gold-bg); color: var(--gold); }
.monthCalEvent.callback { background: #dbeafe; color: #2563eb; }
.monthCalEvent.todo { background: var(--teal-bg); color: var(--teal); }
/* Completing an ASW visit's reminder dims it here — calendar-only, doesn't
   touch the case or the visit itself anywhere else. */
.monthCalEvent.event-done { font-weight: 500; opacity: .55; }
.monthCalDay:not(.outside) { cursor: pointer; }
.monthCalDay:not(.outside):hover { box-shadow: 0 0 0 2px var(--navy) inset; }

/* Scrollable list of every scheduled ASW visit, below the month grid */
.aswVisitsList { max-height: 320px; overflow-y: auto; padding: 6px; gap: 0; }
.aswVisitItem {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  border-left: 4px solid var(--gold);
}
.aswVisitItem:hover { background: var(--bg); }
.aswVisitItem.past { opacity: .5; }
.aswVisitItem.event-done { opacity: .55; }
.aswVisitItem.event-done .aswVisitName { font-weight: 500; }
.aswVisitDate {
  flex: none; width: 64px; font-size: 12px; font-weight: 700; color: var(--gold); line-height: 1.25;
}
.aswVisitBody { flex: 1; min-width: 0; }
.aswVisitName { font-weight: 700; font-size: 14px; color: var(--ink); }
.aswVisitTime { font-size: 12px; color: var(--sub); }

/* Day detail modal */
#dayDetailBackdrop { display: none; position: fixed; inset: 0; background: rgba(28,58,90,0.45); backdrop-filter: blur(2px); z-index: 200; align-items: center; justify-content: center; }
#dayDetailBackdrop.show { display: flex; }
#dayDetailModal { background: var(--card); border-radius: 18px; padding: 0; width: 400px; max-width: 92vw; max-height: 80vh; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.28); display: flex; flex-direction: column; }
.dayDetailHeader {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 16px 18px; background: var(--slate-bg); border-bottom: 1px solid var(--line);
}
#dayDetailTitle { font-weight: 700; font-size: 16px; color: var(--navy); }
.dayDetailHeaderBtns { display: flex; align-items: center; gap: 4px; }
#dayDetailAddBtn, #dayDetailCloseBtn {
  border: none; background: transparent; line-height: 1; color: var(--sub);
  cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
#dayDetailAddBtn { font-size: 18px; font-weight: 700; }
#dayDetailCloseBtn { font-size: 20px; }
#dayDetailAddBtn:hover, #dayDetailCloseBtn:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
#dayDetailBody { padding: 14px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#dayDetailBody .empty { padding: 20px 4px; text-align: center; }
.dayDetailEvent {
  display: flex; gap: 12px; align-items: center; background: var(--bg);
  border-left: 4px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.dayDetailEvent.asw { border-left-color: var(--gold); }
.dayDetailEvent.callback { border-left-color: #2563eb; }
.dayDetailEvent.todo { border-left-color: var(--teal); }
.dayDetailEvent.event-done { opacity: .55; }
.dayDetailEvent.event-done .dayDetailLabel { font-weight: 500; }
.dayDetailType {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  flex: none; width: 70px; line-height: 1.25;
}
.dayDetailType.asw { color: var(--gold); }
.dayDetailType.callback { color: #2563eb; }
.dayDetailType.todo { color: var(--teal); }
.dayDetailBody2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dayDetailLabel { font-size: 14px; color: var(--ink); font-weight: 700; }
.dayDetailTime { font-size: 12px; color: var(--sub); font-weight: 600; margin-top: 2px; }

.list { display: flex; flex-direction: column; gap: 10px; }
.cal-item { background: var(--card); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; gap: 10px; border-left: 4px solid var(--line); }
.cal-item.overdue { border-left-color: #dc2626; }
.cal-item.soon { border-left-color: #d97706; }

/* Directory tab */
.dirFilterRow { display: flex; gap: 8px; margin-bottom: 12px; }
.dirSearch {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  font-family: inherit;
}
.dirFilter {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: var(--card); color: var(--navy); font-weight: 600; cursor: pointer;
}
/* Directory is a real phone book — up to ~100 entries — so it renders as
   one bordered table-like block with thin row dividers, not a card per
   person. Overrides .list's flex/gap via ID specificity. */
#directoryList, #allCasesList, #caregiverList, #proximityResults { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.proximityCutoff { padding: 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); background: var(--bg); text-align: center; border-bottom: 1px solid var(--line); }
.addressInputWrap { position: relative; flex: 1; min-width: 0; }
.addressInputWrap .dirSearch { width: 100%; }
.addressSuggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto;
}
.addressSuggestion { padding: 10px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.addressSuggestion:last-child { border-bottom: none; }
.addressSuggestion:hover { background: var(--bg); }
.dir-item .coordTag { flex: 0 0 90px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-item { padding: 9px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.dir-item:last-child { border-bottom: none; }
/* Leads list specifically — bigger name, more breathing room per row, a
   clearly visible divider between entries (the default 1px var(--line) was
   too faint to tell where one lead ends and the next starts), and all 4
   columns (name, phone, county, intake coordinator) spread evenly across
   the full row width instead of bunching up on the left with dead space
   on the right. */
#leadsList .dir-item { padding: 18px 20px; border-bottom: 2px solid var(--line); }
#leadsList .dir-item .info { gap: 16px; }
#leadsList .dir-item .name, #leadsList .dir-item .phone,
#leadsList .dir-item .note, #leadsList .dir-item .coordTag {
  flex: 1 1 0; max-width: none; white-space: normal; text-align: left;
}
#leadsList .dir-item .name { font-size: 16px; font-weight: 700; }
#leadsList .dir-item .phone, #leadsList .dir-item .note, #leadsList .dir-item .coordTag { font-size: 14px; }
/* Payer-color dot, sitting between County and Intake Coordinator — blue for
   an MCO payer, orange for State/MDHHS, same colors used everywhere else. */
.payerDot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dir-item:hover { background: var(--bg); }
.dir-item .info { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; }
.dir-item .name { flex: 1 1 110px; min-width: 50px; max-width: 130px; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-item .phone { flex: 0 1 100px; min-width: 60px; max-width: 100px; font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Email (or, in the Caregiver directory, the linked case names) is the one
   thing Benji copy-pastes out of this row, so it's allowed to wrap onto a
   second line rather than being cut off with an ellipsis like everything
   else here. */
.dir-item .email { flex: 4 1 160px; min-width: 60px; font-size: 13px; color: var(--sub); word-break: break-word; }
.dir-item .note { flex: 1 1 90px; min-width: 50px; max-width: 140px; font-size: 12px; color: var(--gold); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.iconBtn2.danger { color: #dc2626; font-size: 20px; }
.iconBtn2.danger:hover { background: #fef2f2; }
.leadTypeTag { display: inline-block; background: var(--indigo-bg); color: var(--indigo); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; }
/* Overdue follow-ups get the loud treatment — solid red, white text, and a
   pulsing glow so an overdue lead actually stands out in the list instead
   of blending in like every other tag. */
.leadTypeTag.overdueTag { background: #dc2626; color: #fff; animation: overduePulse 1.4s ease-in-out infinite; }
@keyframes overduePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.7); }
  50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* Referrals/Leads switch, top-right of the Dashboard tab */
.viewSwitch {
  display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 3px; margin-bottom: 14px; float: right;
}
.viewSwitchBtn {
  background: transparent; border: none; padding: 7px 16px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--sub);
}
.viewSwitchBtn.active { background: var(--navy); color: #fff; }
#dashboardReferralsView, #dashboardLeadsView { clear: both; }

/* Horizontal single-select button row (Experience, CHAMPS) inside the
   Caregiver Needs Lead popup — click to select, click again to clear. */
.segmentedRow { display: flex; gap: 4px; margin-bottom: 4px; }
.segmentBtn {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 2px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--sub); line-height: 1.3;
}
.segmentBtn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* "+ Add Caregiver" needs to read as clearly clickable next to the solid
   "+ Add Lead" button, not washed out like a disabled control. */
#addCaregiverBtn { background: var(--sky); color: #fff; border: 1px solid var(--sky); font-weight: 700; padding: 7px 12px; font-size: 13px; }
#addCaregiverBtn:hover { filter: brightness(0.95); }
#addLeadBtn { background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a; font-weight: 700; padding: 7px 12px; font-size: 13px; }
#addLeadBtn:hover { filter: brightness(1.3); }
#addReferralBtnInCases { background: var(--navy); color: #fff; border: 1px solid var(--navy); font-weight: 700; padding: 7px 12px; font-size: 13px; }
#addReferralBtnInCases:hover { background: var(--navy-dark); }

/* Caregiver Needs Lead popup — same modal look as the billing popup */
.caregiverLeadBackdrop {
  position: fixed; inset: 0; z-index: 700; background: rgba(20,30,40,0.45);
  display: flex; align-items: center; justify-content: center;
}
.caregiverLeadBackdrop .modal {
  background: #fff; border-radius: 16px; padding: 28px; width: 320px;
  box-shadow: 0 24px 60px -12px rgba(10,20,35,0.4);
}
.caregiverLeadBackdrop button:not(.secondary) {
  background: var(--navy); color: #fff; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.caregiverLeadBackdrop button:not(.secondary):hover { background: var(--navy-dark); }
/* Segmented Experience/CHAMPS buttons need to override the blanket navy
   button style above — same specificity, so this must come after it. */
.caregiverLeadBackdrop button.segmentBtn { background: var(--bg); color: var(--sub); border: 1px solid var(--line); }
.caregiverLeadBackdrop button.segmentBtn:hover { background: var(--line); }
.caregiverLeadBackdrop button.segmentBtn.active { background: var(--navy); color: #fff; }
.allCasesSectionSelect { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-family: inherit; background: var(--card); color: var(--navy); max-width: 180px; }

/* Lead/Referral detail tabs — each tab carries its own accent color so the
   sections are visually distinct at a glance instead of one long white
   scroll (colors set inline per-button via --tab-color/--tab-bg). */
.ldTabBar { display: flex; flex-wrap: nowrap; gap: 4px; margin: 14px 0 10px; overflow-x: auto; padding-bottom: 2px; }
.ldTabBtn {
  background: var(--tab-bg); color: var(--tab-color); border: 1px solid var(--tab-color);
  padding: 5px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; opacity: 0.75; white-space: nowrap; flex: none;
}
.ldTabBtn:hover { opacity: 1; }
.ldTabBtn.active { background: var(--tab-color); color: #fff; opacity: 1; }

/* Case File's own Services/Patient top switcher — deliberately bolder/
   bigger/darker than the small colored ldTabBtn pills above; Benji asked
   for this to read as an obvious, thick, boxed control, not a subtle pill. */
.cfTopTabBtn {
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  padding: 10px 22px; border-radius: 10px; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.cfTopTabBtn:hover { background: var(--bg); }
.cfTopTabBtn.active { background: var(--navy); color: #fff; }

/* Patient tab's link back to E-Sign — same bold boxed shape as .cfTopTabBtn's
   active state, always-on (not a toggle), so it reads as dark/solid, not
   the pale .secondary style. */
.cfBackBtn {
  background: var(--navy); color: #fff; border: 2px solid var(--navy);
  padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.cfBackBtn:hover { background: var(--navy-dark); }
.ldTabPanel { border-top: 1px solid var(--line); padding-top: 4px; }
.ldFieldWrap { flex: 1; min-width: 140px; }
.ldFieldWrap input, .ldFieldWrap select, .ldFieldWrap textarea {
  width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: var(--bg);
}
.ldFieldWrap input:focus, .ldFieldWrap select:focus, .ldFieldWrap textarea:focus { background: #fff; border-color: var(--tab-color, var(--navy)); }
#ldAddFullCaregiverLink { font-size: 12px; font-weight: 700; color: var(--rose); text-decoration: none; }
#ldAddFullCaregiverLink:hover { text-decoration: underline; }
.ldClearBtn {
  flex: none; height: 38px; padding: 0 14px; background: #fff; color: #dc2626; border: 1px solid #dc2626;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ldClearBtn:hover { background: #fef2f2; }
.ldSaveBtn {
  background: var(--navy); color: #fff; border: none; padding: 10px 22px; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.ldSaveBtn:hover { background: var(--navy-dark); }
.ldSaveBtn:disabled { opacity: 0.6; cursor: default; }
#ldSaveConfirm.ldSaveConfirmOk { color: var(--green); font-weight: 700; }
#ldSaveConfirm.ldSaveConfirmErr { color: #dc2626; font-weight: 700; }
/* Fixed-length number fields (Medicaid number, SSN) — red while the digit
   count is wrong, green once it lands on a valid length. The focus outline
   is set to match too, so there's no mismatched ring color while typing. */
.ldNumInvalid { border-color: #dc2626 !important; background: #fef2f2; }
.ldNumInvalid:focus { outline: 2px solid #dc2626; border-color: #dc2626; }
.ldNumValid { border-color: #16a34a !important; background: #f0fdf4; }
.ldNumValid:focus { outline: 2px solid #16a34a; border-color: #16a34a; }

/* Celebration overlay */
#celebrationOverlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center;
  background: rgba(30, 58, 92, 0.45);
  overflow: hidden;
}
#celebrationOverlay.show { display: flex; }
.celebration-card {
  background: #fff; border-radius: 20px; padding: 36px 40px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 380px; position: relative; z-index: 2;
  animation: celebrationPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes celebrationPop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.celebration-emoji { font-size: 52px; margin-bottom: 6px; }
.celebration-title { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.celebration-msg { font-size: 14px; color: var(--sub); margin-bottom: 18px; }
.celebration-close {
  border: none; background: var(--navy); color: #fff; font-weight: 700; padding: 10px 22px;
  border-radius: 9px; cursor: pointer; font-size: 14px;
}
.celebration-close:hover { background: var(--navy-dark); }
.confetti-piece {
  position: absolute; top: -20px; width: 10px; height: 16px; opacity: 0.9;
  animation-name: confettiFall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(720deg); }
}

/* To-do tab */
.todo-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.todo-item.done .text { text-decoration: line-through; color: var(--sub); }
.todo-item .text { flex: 1; padding-top: 2px; }
.todo-item .todo-when { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 3px; }
.todo-item .todo-actions { display: flex; gap: 4px; flex: none; }
.iconBtn { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.iconBtn:hover { background: #e9e6df; }

/* Login / onboarding gate (auth-gate.js) */
.authStage {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 82% 8%, rgba(201,160,92,0.20), transparent 46%),
    linear-gradient(155deg, #5f93ab 0%, #4a7d99 42%, #1c3a5a 100%);
}
.authStage::before {
  content: "";
  position: absolute; right: -140px; bottom: -160px; width: 560px; height: 560px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 22 C 42 8, 20 8, 12 24 C 4 40, 12 56, 50 88 C 88 56, 96 40, 88 24 C 80 8, 58 8, 50 22 Z" fill="none" stroke="%23c9a05c" stroke-width="1.4"/></svg>') no-repeat center / contain;
  opacity: 0.30; transform: rotate(-8deg);
}
.authMiniHeart { position: absolute; z-index: 0; opacity: 0.85; }
.authMiniHeart svg { width: 100%; height: auto; display: block; }
.authCard {
  position: relative; z-index: 1; background: #fff; border-radius: 18px; padding: 36px 34px 30px;
  width: 320px; box-sizing: border-box;
  box-shadow: 0 24px 60px -12px rgba(10, 20, 35, 0.45), 0 2px 6px rgba(0,0,0,0.06);
}
.authLoading { position: relative; z-index: 1; color: #fff; font-size: 14px; background: rgba(0,0,0,0.15); padding: 10px 18px; border-radius: 10px; }
.authLogo { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.authLogo img { width: 100%; max-width: 240px; height: auto; display: block; }
.authCard label { display: block; font-size: 12px; color: var(--sub); font-weight: 600; margin: 14px 0 5px; }
.authCard input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; font-family: inherit; background: #fbfaf8;
}
.authCard input:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.authCard button[type="submit"] {
  width: 100%; margin-top: 20px; background: var(--navy); color: #fff; border: none; padding: 12px;
  border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: 0.2px;
}
.authCard button[type="submit"]:hover { background: var(--navy-dark); }
.authError { color: #b00020; font-size: 12px; margin-top: 12px; }

/* Team-wide additions */
.ownerBadge { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600;
  background: rgba(20,60,90,0.08); color: var(--navy, #1f3a5a); vertical-align: middle; }
.ownerFilter { margin-left:auto; padding:4px 8px; border-radius:8px; border:1px solid rgba(0,0,0,0.15); font-size:12px; background:#fff; }

/* Masked SSN field with audited reveal */
.ssnField { display:flex; align-items:center; gap:6px; }
.ssnField input { flex:1; min-width:0; }
.ssnRevealBtn { flex:none; border:1px solid rgba(0,0,0,0.15); background:#fff; border-radius:6px;
  padding:4px 7px; cursor:pointer; font-size:13px; line-height:1; }
.ssnRevealBtn:hover { background:#f4f4f5; }
.ssnRevealBtn:disabled { opacity:0.5; cursor:default; }

/* Team management (admin) */
#teamBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#teamBackdrop.show { display: flex; }
#teamModal { background: #fff; border-radius: 14px; padding: 22px; width: min(560px, 92vw); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
#teamList { margin: 12px 0 4px; }
.teamRow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.07); flex-wrap: wrap; }
.teamRow:last-child { border-bottom: none; }
.teamRowMain { flex: 1; min-width: 160px; }
.teamRowName { font-weight: 650; }
.teamRowName .you { font-weight: 500; color: #6b7280; font-size: 12px; margin-left: 6px; }
.teamRowEmail { font-size: 12px; color: #6b7280; }
.teamRow.inactive .teamRowName, .teamRow.inactive .teamRowEmail { opacity: 0.5; text-decoration: line-through; }
.teamRoleSelect { padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); font-size: 12px; background: #fff; }
.teamBtn { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); background: #fff; cursor: pointer; font-size: 12px; }
.teamBtn:hover { background: #f4f4f5; }
.teamBtn.danger { color: #b91c1c; border-color: rgba(185,28,28,0.3); }
.teamBtn.danger:hover { background: #fef2f2; }
.teamAddGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.teamAddGrid input, .teamAddGrid select { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); font-size: 13px; min-width: 0; }
.teamAddGrid select { grid-column: 1 / -1; }
@media (max-width: 560px) { .teamAddGrid { grid-template-columns: 1fr; } }

/* ============================================================
   Phones and small tablets.
   Israel's ask: the office/admin team should be able to use this
   from a phone. The desktop layout leans on wide multi-column
   rows and a six-across tab bar, both of which collapse into
   unreadable slivers below roughly 700px, so those are the two
   things reworked here.
   ============================================================ */
@media (max-width: 700px) {

  /* The page gutter eats a third of a phone screen otherwise. */
  .wrap { padding: 12px 12px 80px; }

  /* Six equal tab buttons at 390px gives each ~55px, so every label
     truncates into the next. Let them size to their text and scroll
     the bar sideways instead — the standard phone pattern, and it
     keeps every tab reachable. */
  nav { -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  nav::-webkit-scrollbar { display: none; }
  .tabBtn { flex: 0 0 auto; padding: 9px 13px; font-size: 13.5px; }

  /* Search box and its action buttons: stack rather than squeeze. */
  .dirFilterRow { flex-wrap: wrap; }
  .dirFilterRow .dirSearch { flex: 1 1 100%; }
  .dirFilterRow button { flex: 1 1 auto; }

  /* The main list rows are a desktop table pretending to be flex:
     name / phone / county / owner across one line. On a phone that
     leaves each column ~60px and every value ellipsised to nothing.
     Stack them into a card: name on its own line, the rest beneath. */
  .dir-item .info { flex-wrap: wrap; gap: 4px 10px; }
  .dir-item .name,
  #leadsList .dir-item .name {
    flex: 1 1 100%; max-width: none; white-space: normal; font-size: 15px;
  }
  .dir-item .phone, .dir-item .note, .dir-item .coordTag,
  #leadsList .dir-item .phone, #leadsList .dir-item .note, #leadsList .dir-item .coordTag {
    flex: 0 0 auto; max-width: none; text-align: left; font-size: 12.5px;
  }
  .dir-item .email { flex: 1 1 100%; }
  #leadsList .dir-item { padding: 12px 14px; }

  /* Same treatment for the Dashboard's own case rows. */
  #sections li { flex-wrap: wrap; row-gap: 8px; }
  #sections li .item-notes { flex: 1 1 100%; }

  /* Section-edit mode puts a dozen inputs on one line. Two columns
     is the most that stays tappable. */
  .edit-field { flex: 1 1 45% !important; min-width: 0; font-size: 13px; }

  /* Modals: the fixed widths overflow a phone. */
  #teamModal, #sectionOrderModal, #changePasswordModal, #aswVisitModal,
  #notesPanel, .caseFile {
    width: min(94vw, 560px) !important; max-width: 94vw;
  }
  #teamModal { padding: 16px; }
  .teamRow { gap: 6px; }
  .teamRowMain { flex: 1 1 100%; }

  /* The owner filter sits at the end of a wrapping tab row; on a
     phone give it its own full-width line so it stays tappable. */
  .ownerFilter { margin-left: 0; flex: 1 1 100%; }

  /* The floating reminder cards are positioned into desktop dead
     space that doesn't exist on a phone — they cover the content. */
  #reminderBar, #followupReminderBar { position: static; width: auto; margin: 0 0 10px; }

  /* Tables (Stats breakdown) can't stack sensibly, so let them
     scroll horizontally inside their own box rather than stretching
     the whole page sideways. */
  .statsTable, .card table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Stat tiles: two up instead of six across. */
  .statTile { flex: 1 1 45% !important; min-width: 0; }

  /* iOS zooms the whole page in when a focused input's text is under
     16px. Every text input here is 13px, so typing anywhere would
     jump the layout. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 430px) {
  /* The view switch floats right and collides with the heading. */
  .viewSwitch { float: none; display: flex; width: 100%; margin-bottom: 10px; }
  .viewSwitchBtn { flex: 1; }
  .edit-field { flex: 1 1 100% !important; }
}
.teamDetails { flex: 1 1 100%; background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-top: 6px; }
.teamDetailsNote { font-size: 11.5px; color: var(--sub); margin-bottom: 8px; }
.teamDetails .teamAddGrid { margin: 0 0 8px; }

/* Activity (audit) log */
#auditBackdrop, #inboundBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; }
#auditBackdrop.show, #inboundBackdrop.show { display: flex; }
#inboundBackdrop #auditModal { max-width: 900px; }
#auditModal { background: #fff; border-radius: 14px; padding: 22px; width: min(760px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
.auditFilters { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.auditFilters select { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); font-size: 13px; background: #fff; }
#auditList { overflow-y: auto; flex: 1; min-height: 120px; border-top: 1px solid var(--line); }
.auditRow { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 13px; align-items: baseline; }
.auditWhen { flex: 0 0 132px; color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.auditWho { flex: 0 0 120px; font-weight: 650; }
.auditWhat { flex: 1; min-width: 0; }
.auditRow.sensitive .auditWhat { color: #b45309; font-weight: 600; }
.auditRow.bad .auditWhat { color: #b91c1c; }
@media (max-width: 700px) {
  .auditRow { flex-wrap: wrap; gap: 2px 8px; }
  .auditWhen, .auditWho { flex: 0 0 auto; }
  .auditWhat { flex: 1 1 100%; }
}

/* ============================================================
   Board layout — Leads, Referrals, Clients, Analytics.
   Mirrors the shape the team already knows from InflowCare:
   a page head, a row of KPI cards, view tabs carrying live
   counts, a filter bar, then the table.
   ============================================================ */

.pageHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.crumb { font-size: 12px; color: var(--sub); margin-bottom: 2px; }
.pageTitle { margin: 0; font-size: 24px; color: var(--navy); }
.pageActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stampNote { font-size: 12px; color: var(--sub); }

.btnPrimary {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 650;
  cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap;
}
.btnPrimary:hover { background: var(--navy-dark, #16293f); }
.btnPrimary.alt { background: #fff; color: var(--navy); }
.btnPrimary.alt:hover { background: var(--bg); }

/* KPI cards. The coloured left edge is the whole point: a glance
   should say "that orange one is the pile that needs work". */
.kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpiCard {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--slate, #64748b);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: box-shadow .12s ease, transform .12s ease;
}
.kpiCard:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); transform: translateY(-1px); }
.kpiCard.good { border-left-color: #16a34a; }
.kpiCard.info { border-left-color: #2563eb; }
.kpiCard.warn { border-left-color: #ea580c; }
.kpiCard.bad  { border-left-color: #dc2626; }
.kpiCard .kpiLabel { font-size: 11.5px; color: var(--sub); font-weight: 600; line-height: 1.25; }
.kpiCard .kpiValue { font-size: 24px; font-weight: 700; color: var(--navy); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpiCard.warn .kpiValue { color: #c2410c; }
.kpiCard.bad .kpiValue  { color: #b91c1c; }

/* View tabs with counts. */
.boardTabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.boardTab {
  background: var(--card); border: 1px solid var(--line); color: var(--navy);
  padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.boardTab:hover { background: var(--bg); }
.boardTab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.boardTab .tabCount {
  background: rgba(0,0,0,0.07); border-radius: 20px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.boardTab.active .tabCount { background: rgba(255,255,255,0.22); }

.boardFilters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.boardSearch { flex: 1 1 240px; min-width: 0; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; }
.boardFilter { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; background: #fff; }
.boardCheck { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); }

/* Table. */
.boardTableWrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.boardTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.boardTable thead th {
  background: var(--navy); color: #fff; text-align: left; padding: 10px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.boardTable thead th.sortable { cursor: pointer; user-select: none; }
.boardTable thead th.sortable:hover { background: var(--navy-dark, #16293f); }
.boardTable tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: top; }
.boardTable tbody tr:last-child td { border-bottom: none; }
.boardTable tbody tr:hover { background: var(--bg); }
.boardTable tbody tr { cursor: pointer; }
.boardTable .idCell { color: #2563eb; font-weight: 650; white-space: nowrap; }
.boardTable .muted { color: var(--sub); }
.boardTable .nameCell { font-weight: 650; color: var(--navy); }
.boardTable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boardEmpty { padding: 28px; text-align: center; color: var(--sub); font-size: 13px; }
.boardFoot { padding: 9px 12px; font-size: 12px; color: var(--sub); border-top: 1px solid var(--line); background: var(--bg); }

/* Lead source renders as type over detail, the way the team reads it. */
.srcType { font-weight: 650; color: var(--navy); font-size: 12.5px; }
.srcDetail { color: var(--sub); font-size: 12px; }

/* Tag pills and star ratings. */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 650;
  background: rgba(20,60,90,0.08); color: var(--navy); margin: 1px 3px 1px 0; white-space: nowrap; }
.pill.dsnp { background: #ede9fe; color: #6d28d9; }
.pill.spend { background: #fef3c7; color: #92400e; }
.pill.overdue { background: #dc2626; color: #fff; }
.pill.county { background: #e0f2fe; color: #075985; }
.stars { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: rgba(0,0,0,0.15); }

/* Analytics. */
.anGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.anCard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.anCard .anLabel { font-size: 11.5px; color: var(--sub); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.anCard .anValue { font-size: 27px; font-weight: 700; color: var(--navy); margin-top: 4px; font-variant-numeric: tabular-nums; }
.anCard .anSub { font-size: 12px; color: var(--sub); margin-top: 3px; }
.anCard.money .anValue { color: #15803d; }
.anCard.warn .anValue { color: #c2410c; }
.anSection { margin: 22px 0 10px; }
.anSection h3 { margin: 0 0 3px; font-size: 16px; color: var(--navy); }
.anSection .anNote { font-size: 12px; color: var(--sub); }
.anChart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; overflow-x: auto; }
.anTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.anTable th { text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--sub); border-bottom: 2px solid var(--line); white-space: nowrap; }
.anTable td { padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.anTable td.num, .anTable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.anTable tbody tr:hover { background: var(--bg); }
.anTable tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.issueRow { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 13px; }
.issueRow .who { flex: 0 0 170px; font-weight: 650; color: var(--navy); }
.issueRow .what { flex: 1; }
.issueRow.critical .what { color: #b91c1c; }
.sevPill { display:inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.sevPill.critical { background: #fee2e2; color: #b91c1c; }
.sevPill.cleanup { background: #e0f2fe; color: #075985; }

/* Worklist cards on the Dashboard. */
.workGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.workCard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.workCard > h3 { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--navy);
  border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.workCard > h3 .n { font-size: 12px; background: rgba(0,0,0,0.07); border-radius: 20px; padding: 1px 9px; }
.workCard.urgent > h3 { background: #fff7ed; color: #c2410c; }
.workCard.urgent > h3 .n { background: #fed7aa; color: #9a3412; }
.workList { max-height: 340px; overflow-y: auto; }
.workItem { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(0,0,0,0.05);
  cursor: pointer; font-size: 13px; align-items: baseline; }
.workItem:last-child { border-bottom: none; }
.workItem:hover { background: var(--bg); }
.workItem .wName { flex: 1; font-weight: 650; color: var(--navy); min-width: 0; }
.workItem .wMeta { color: var(--sub); font-size: 12px; white-space: nowrap; }
.workItem .wMeta.late { color: #b91c1c; font-weight: 650; }

@media (max-width: 700px) {
  .kpiRow { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .kpiCard .kpiValue { font-size: 20px; }
  .boardTable thead { display: none; }
  .boardTable tbody td { display: block; padding: 3px 12px; border: none; }
  .boardTable tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .boardTable tbody td.num { text-align: left; }
  .boardTable tbody td[data-label]::before {
    content: attr(data-label) ": "; font-size: 11px; color: var(--sub); font-weight: 600;
  }
  .boardTable tbody td.nameCell::before { content: none; }
  .workItem { flex-wrap: wrap; }
}
/* A phone number split across two lines is unreadable at a glance. */
.boardTable td[data-label="Phone"] { white-space: nowrap; }

/* ---- Services on a case ------------------------------------------
   A patient can be admitted to several services at once. The cards are
   the row of them; the checklist below belongs to whichever is open. */
.svcHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
/* The generic form rules stretch any select to fill its row, which turned
   the add-service picker into a full-width bar next to a squashed button. */
.svcHead select { width: auto; min-width: 170px; flex: none; margin: 0; }
.svcHead .row { flex: none; }
.svcCards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.svcCard {
  flex: none; width: 200px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  padding: 10px 12px; font: inherit;
}
.svcCard:hover { border-color: #94a3b8; }
.svcCard.active { border-color: var(--navy, #1e3a5f); box-shadow: 0 0 0 1px var(--navy, #1e3a5f); }
.svcCardName { font-weight: 600; }
.svcCardStatus { font-size: 12px; color: #64748b; margin-top: 2px; }
.svcCardPct { font-size: 11px; color: #64748b; margin-top: 4px; }
.svcBar { height: 5px; border-radius: 3px; background: #e2e8f0; margin-top: 8px; overflow: hidden; }
.svcBarFill { height: 100%; background: #15803d; transition: width .2s; }

.svcDetail {
  border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 18px; background: #fff;
}
.svcSteps { list-style: none; margin: 10px 0 0; padding: 0; }
.svcStep {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid #f1f5f9;
}
.svcStep:first-child { border-top: 0; }
.svcStep .svcStepMain, .caseFile .svcStep label.svcStepMain {
  display: flex; align-items: center; gap: 8px;
  flex: none; width: 240px; margin: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: inherit;
}
.svcStep.done .svcStepLabel { color: #15803d; font-weight: 600; }
.svcStepDetail { flex: 1; min-width: 180px; }

/* On a phone the checklist stacks: label over its note, rather than a
   230px column squeezing the input down to nothing. */
@media (max-width: 640px) {
  .svcCard { width: 100%; }
  .svcStep { align-items: flex-start; flex-direction: column; gap: 4px; }
  .svcStepMain { width: auto; }
  .svcStepDetail { width: 100%; }
}


/* The live indicator. Deliberately small: it should reassure at a
   glance and never compete with the data. Grey means the stream is
   down and the board is falling back to a slower refresh. */
#liveDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8; display: inline-block;
  align-self: center; margin-left: 6px; flex: none;
  transition: background .3s;
}
#liveDot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* ===================================================================
   The lead page
   ===================================================================
   Modelled on InflowCare, because the intake team already know where
   things are there. Full page rather than the panel this used to be:
   a lead has forty fields and a bubble made people scroll a small box
   inside a big screen.

   Four parts, top to bottom and left to right:
     1. a bar with the name, the status, and prev/next through the list
     2. a strip of the facts you check before doing anything
     3. a rail of sections, so the page is navigable without scrolling
     4. main column of fields, and a right column for who owns it,
        when to call back, and what happened last time.
   =================================================================== */

.leadPage {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---- 1. Header ---- */
.lpBar {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.lpBack {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--sub); font: inherit; font-weight: 500;
}
.lpBack:hover { background: var(--bg-2); color: var(--ink); }
.lpTitle { min-width: 0; flex: 1; }
.lpName {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--navy);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lpMeta { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* Moving between leads without going back to the list is the single
   biggest time saver on this screen: a coordinator works a queue, not
   one record. */
.lpNav { display: flex; align-items: center; gap: 4px; flex: none; }
.lpNavBtn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.lpNavBtn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.lpNavBtn:disabled { opacity: .35; cursor: default; }
.lpNavCount { font-size: 12px; color: var(--sub); padding: 0 6px; white-space: nowrap; }

.lpActions { display: flex; align-items: center; gap: 8px; flex: none; }
.lpSaved { font-size: 12px; color: var(--green); min-width: 54px; }

/* ---- 2. Facts strip ---- */
/* The things you glance at before deciding what to do. Editable where
   editing them is the decision (status), read-only where they are
   simply true (created via, when). */
.lpStrip {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 0 28px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.lpFact { min-width: 110px; padding: 2px 0; }
.lpFactLabel {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sub-2);
}
.lpFactValue { font-size: 13px; color: var(--ink); font-weight: 500; margin-top: 2px; }
.lpFact select {
  font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 3px 8px; margin-top: 1px; background: var(--card); color: var(--ink);
  max-width: 230px;
}

/* ---- 3 + 4. Body ---- */
.lpBody { flex: 1; display: flex; min-height: 0; }

.lpRail {
  display: block;
  flex: none; width: 190px;
  border-right: 1px solid var(--line);
  background: var(--card);
  padding: 14px 10px; overflow-y: auto;
}
.lpRailBtn {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 2px;
}
.lpRailBtn:hover { background: var(--bg-2); }
.lpRailBtn.active { background: var(--teal-bg); color: var(--navy); font-weight: 600; }

.lpMain { flex: 1; overflow-y: auto; padding: 20px 24px 60px; min-width: 0; }
.lpSide {
  flex: none; width: 300px;
  border-left: 1px solid var(--line);
  background: var(--card);
  overflow-y: auto; padding: 16px;
}

/* ---- Field cards ---- */
.lpCard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
  overflow: hidden;
}
.lpCardHead {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--navy);
}
.lpCardBody { padding: 16px 18px; }

/* Two columns of label-over-field, which is what makes InflowCare's
   record readable: the eye runs down one column instead of hunting
   across a wall of inputs. Collapses to one column when narrow. */
.lpGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.lpGrid .lpWide { grid-column: 1 / -1; }
.lpField label,
.lpCardBody label:not(.checkboxRow) {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--sub); margin: 0 0 4px;
  text-transform: none;
}
.lpCardBody input[type="text"],
.lpCardBody input[type="email"],
.lpCardBody input[type="date"],
.lpCardBody input[type="number"],
.lpCardBody select,
.lpCardBody textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 0;
  transition: border-color .12s, box-shadow .12s;
}
.lpCardBody input:focus, .lpCardBody select:focus, .lpCardBody textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(74,144,164,.15);
}
/* A field that has been filled in should look different from an empty
   one at a glance, so a half-finished lead is obvious without reading
   every box. */
.lpCardBody input:placeholder-shown { background: #fcfcfb; }
.lpCardBody .checkboxRow {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); font-weight: 400; margin: 0;
}
.lpCardBody .checkboxRow input { width: auto; }

/* ---- Right column ---- */
.lpPanel { margin-bottom: 18px; }
.lpPanelHead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy);
  margin-bottom: 8px;
}
.lpPanel .lpField { margin-bottom: 10px; }
.lpNote {
  border-left: 2px solid var(--teal);
  padding: 6px 0 6px 10px; margin-bottom: 10px;
  font-size: 13px; color: var(--ink-2);
}
.lpNoteMeta { font-size: 11px; color: var(--sub-2); margin-top: 3px; }

/* ---- Buttons ---- */
.btnGold, .btnNavy, .btnGhost {
  font: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm); padding: 8px 14px;
  cursor: pointer; border: 1px solid transparent;
}
.btnGold { background: var(--gold); color: #3b2a08; }
.btnGold:hover { background: var(--gold-dark); color: #fff; }
.btnNavy { background: var(--navy); color: #fff; }
.btnNavy:hover { background: var(--navy-dark); }
.btnGhost { background: var(--card); color: var(--ink-2); border-color: var(--line-2); }
.btnGhost:hover { border-color: var(--teal); color: var(--teal); }

/* ---- Status chips ---- */
.lpChip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  background: var(--bg-2); color: var(--ink-2);
}
.lpChip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lpChip.good  { background: var(--green-bg); color: var(--green); }
.lpChip.warn  { background: var(--amber-bg); color: var(--amber); }
.lpChip.bad   { background: var(--red-bg);   color: var(--red); }
.lpChip.info  { background: var(--teal-bg);  color: var(--teal-dark); }

/* ---- Narrow screens ----
   The rail becomes a scrolling row of chips and the side column drops
   under the fields, so the same page works on a phone in a car park. */
@media (max-width: 1100px) {
  .lpSide { display: none; }
  .lpSide.mobileShown { display: block; width: 100%; border-left: 0; }
}
@media (max-width: 780px) {
  .lpBody { flex-direction: column; overflow-y: auto; }
  .lpRail {
    width: auto; display: flex; gap: 6px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px;
  }
  .lpRailBtn { white-space: nowrap; width: auto; padding: 6px 12px; }
  .lpMain { overflow: visible; padding: 14px; }
  .lpGrid { grid-template-columns: 1fr; }
  /* On a phone the four things in the bar cannot share one line: the
     name was being squeezed to a single letter with its own text
     wrapping underneath. Two rows - identity, then controls. */
  .lpBar {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "back title" "nav actions";
    gap: 8px 10px; padding: 10px 14px; align-items: center;
  }
  .lpBack { grid-area: back; padding: 4px 6px; }
  .lpTitle { grid-area: title; }
  .lpNav { grid-area: nav; }
  .lpActions { grid-area: actions; justify-content: flex-end; }
  .lpName { font-size: 17px; }
  .lpMeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lpStrip { gap: 0 18px; padding: 10px 14px; }
}

/* The existing field generators emit `.row` + `.ldFieldWrap`, and they
   are reused verbatim inside the new cards rather than rewritten -
   forty fields is forty chances to drop one. This makes those rows lay
   out as the two-column grid the card wants, without touching the
   markup that produces them. */
.lpCardBody .row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 22px; margin: 0 0 14px; align-items: end;
}
.lpCardBody .row:last-child { margin-bottom: 0; }
.lpCardBody .ldFieldWrap { min-width: 0; }
.lpCardBody .ldFieldWrap input,
.lpCardBody .ldFieldWrap select { width: 100%; }
.lpCardBody .row > input,
.lpCardBody .row > textarea,
.lpCardBody .row > select { width: 100%; min-width: 0; }
/* A checkbox pair should sit on one line, not take half the grid each. */
.lpCardBody .row:has(> .checkboxRow) { display: flex; flex-wrap: wrap; gap: 18px; }
/* h4 headings inside a card duplicate the card's own title. */
.lpCardBody > h4:first-child { display: none; }
.lpCardBody > h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sub);
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
}
@media (max-width: 780px) {
  .lpCardBody .row { grid-template-columns: 1fr; }
}

/* ===================================================================
   Board refinements
   ===================================================================
   Same three problems on every board: the page was narrower than the
   data, the summary cards took a third of the screen before you saw a
   single row, and the status column was plain text so nothing stood
   out. InflowCare gets all three right and this follows it.
   =================================================================== */

/* A lead table has nine columns. 1100px was making it wrap. */
.wrap { max-width: 1520px; padding: 20px 28px 90px; }

/* A white bar, like alegriahc.com's own. This changed from solid navy
   for a plain reason: the Casa wordmark is navy, so on a navy header it
   is invisible - and recolouring someone's logo to fit the chrome is the
   wrong way round. The chrome moves. */
header {
  background: #fff;
  border-radius: 12px;
  padding: 12px 20px 0;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
}
/* The watermark heart was drawn for a dark bar; on white it is grubby. */
header::before { display: none; }
header nav { gap: 4px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.tabBtn {
  /* Left-aligned, sized to their words. Stretching six tabs across
     1500px put "Directory" a screen-width away from "Dashboard" for no
     reason - underline tabs read as a group only when they sit together. */
  flex: 0 0 auto;
  background: transparent; border: 0; border-radius: 0;
  color: var(--sub); font-weight: 500; font-size: 13.5px;
  padding: 9px 16px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabBtn:hover { background: transparent; color: var(--navy); }
.tabBtn.active {
  background: transparent; color: var(--navy); font-weight: 700;
  border-bottom-color: var(--gold);
  box-shadow: none;
}

/* The logo is a button, so it has to look pressable without looking like
   a form control - no border, no fill, just a lift on hover. */
.brand { margin-bottom: 0; align-items: center; }
.brandBtn {
  display: flex; align-items: center; padding: 2px 6px; margin-left: -6px;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s, transform .12s;
}
.brandBtn:hover { background: var(--bg-2); }
.brandBtn:active { transform: translateY(1px); }
.brandBtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.brandLogo { height: 40px; width: auto; display: block; }

/* The two icon buttons were white-on-navy; on a white bar they need the
   opposite treatment. */
.settingsBtn {
  border-color: var(--line); background: #fff; color: var(--sub);
}
.settingsBtn:hover { background: var(--bg-2); color: var(--navy); }

@media (max-width: 640px) {
  .brandLogo { height: 28px; }
}

/* One row that scrolls, rather than eight cards wrapping onto three.
   The numbers are a glance, not the point of the screen. */
.kpiRow {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 14px;
}
.kpiCard {
  flex: 1 0 auto; min-width: 132px;
  border-left-width: 3px; padding: 9px 12px;
  box-shadow: none; border-radius: var(--radius-sm);
}
.kpiCard:hover { box-shadow: var(--shadow-1); transform: none; border-color: var(--line-2); }
.kpiCard .kpiLabel { font-size: 11px; letter-spacing: .01em; }
.kpiCard .kpiValue { font-size: 21px; }

/* View tabs on one scrolling line, as InflowCare has them - eleven
   sub-statuses wrapped onto two rows pushed the table below the fold. */
.boardTabs {
  flex-wrap: nowrap; overflow-x: auto; gap: 4px;
  padding-bottom: 6px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.boardTab {
  border: 0; background: transparent; color: var(--sub);
  font-weight: 500; padding: 7px 12px; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -7px;
}
.boardTab:hover { background: transparent; color: var(--navy); }
.boardTab.active {
  background: transparent; color: var(--navy); font-weight: 700;
  border-bottom-color: var(--gold);
}
.boardTab .tabCount { background: var(--bg-2); color: var(--sub); }
.boardTab.active .tabCount { background: var(--gold-bg); color: var(--gold-dark); }

/* ---- The table ---- */
.boardTable { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.boardTable thead th {
  background: var(--bg-2); color: var(--sub);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.boardTable tbody td {
  padding: 11px 14px; font-size: 13.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.boardTable tbody tr { transition: background .1s; }
.boardTable tbody tr:hover { background: var(--teal-bg); cursor: pointer; }
.boardTable .nameCell { font-weight: 600; color: var(--navy); }
.boardTable tbody tr:last-child td { border-bottom: 0; }

/* Status as a chip. On two hundred rows, a word in the same grey as
   everything else is invisible; a chip is findable by shape. */
.stChip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 20px;
  background: var(--bg-2); color: var(--ink-2);
}
.stChip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.stChip.good { background: var(--green-bg); color: var(--green); }
.stChip.warn { background: var(--amber-bg); color: var(--amber); }
.stChip.bad  { background: var(--red-bg);   color: var(--red); }
.stChip.info { background: var(--teal-bg);  color: var(--teal-dark); }

/* The page's single gold action. */
.pageHead .btnPrimary, #lbAddBtn, #rbAddBtn, #homeAddLeadBtn {
  background: var(--gold); color: #3b2a08; border: 0;
  font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px;
}
.pageHead .btnPrimary:hover, #lbAddBtn:hover, #rbAddBtn:hover, #homeAddLeadBtn:hover {
  background: var(--gold-dark); color: #fff;
}
.pageHead h2, .pageTitle { font-family: var(--font-display); color: var(--navy); }

.boardFoot { font-size: 12px; color: var(--sub-2); padding: 10px 2px; }

@media (max-width: 780px) {
  .wrap { padding: 14px 12px 80px; }
}