/* ──────────────────────────────────────────────────────────────────────────
   Care Review — documented-service audit screen
   The handoff's design tokens + component styling, scoped under .care-review so
   the bespoke audit color vocabulary never leaks into the rest of the MudBlazor
   app. Dynamic values (resident colors, timeline %s) stay inline in the markup;
   structure + static styling live here. Fonts (Manrope / JetBrains Mono) are
   loaded globally in App.razor.
   ────────────────────────────────────────────────────────────────────────── */

.care-review {
  /* surfaces & ink (warm neutral) */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --ink-1: #1b1a17;
  --ink-2: #5b5953;
  --ink-3: #8a8881;
  --ink-4: #c8c5be;
  --line: #e9e6df;
  --line-2: #efece5;

  /* brand */
  --accent: #2f7a3a;
  --accent-soft: #e6f0e3;
  --accent-ink: #1f4e2a;

  /* status palette (the core vocabulary) */
  --c-live-bg: #e0ecff; --c-live-fg: #0a3d8a; --c-live-bd: #b9d1f5;
  --c-warn-bg: #fbeed0; --c-warn-fg: #7a4a06; --c-warn-bd: #efd58a;
  --c-conf-bg: #f9dfde; --c-conf-fg: #8a1b1a; --c-conf-bd: #ebbab8;

  /* coverage gap (the only red outside of conflict) */
  --gap-fg: #d6443c;
  --gap-bg-1: rgba(214, 68, 60, 0.08);
  --gap-bg-2: rgba(214, 68, 60, 0.14);

  --r-3: 6px; --r-4: 7px; --r-5: 8px; --r-6: 10px;
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  font-family: var(--font-ui);
  color: var(--ink-1);
}

.care-review .cr-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.care-review button { font-family: var(--font-ui); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.care-review .cr-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.care-review .cr-eyebrow { font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.care-review .cr-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.care-review .cr-subtitle { font-size: 13px; color: var(--ink-2); margin-top: 6px; }

/* ── Date nav + stats ─────────────────────────────────────────────────────── */
.care-review .cr-datestats { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.care-review .cr-datenav { display: flex; align-items: center; gap: 8px; }
.care-review .cr-datebtn { height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--r-4);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-1); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; }
.care-review .cr-datebtn:hover { background: var(--surface-2); }
.care-review .cr-datepill { display: flex; align-items: center; gap: 9px; padding: 0 16px; height: 38px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4);
  font-size: 14px; font-weight: 700; min-width: 168px; justify-content: center; }
/* Native date input styled to match the schedule-visit picker — visible calendar
   indicator (so a click reliably opens the picker), design tokens, tabular nums. */
.care-review .cr-datepick {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); color: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 0 12px; height: 38px; min-width: 200px;
  font: 700 14px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.care-review .cr-datepick:hover { border-color: var(--ink-4); }
.care-review .cr-datepick:focus, .care-review .cr-datepick:focus-within {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,122,58,0.16);
}
.care-review .cr-datepick::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
.care-review .cr-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.care-review .cr-stat-label { font-size: 9.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; }
.care-review .cr-stat-value { font-size: 21px; font-weight: 700; line-height: 1.1; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.care-review .cr-stat-unit { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* ── Triage bar ───────────────────────────────────────────────────────────── */
.care-review .cr-triage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-6); margin-bottom: 16px; }
.care-review .cr-triage-alert { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
.care-review .cr-triage-icon { width: 26px; height: 26px; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--c-warn-bg); color: var(--c-warn-fg); }
.care-review .cr-vrule { width: 1px; height: 22px; background: var(--line); }

/* ── Chips ────────────────────────────────────────────────────────────────── */
.care-review .cr-chipset { display: flex; gap: 7px; flex-wrap: wrap; }
.care-review .cr-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1;
  white-space: nowrap; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  transition: background .12s, border-color .12s, color .12s; }
.care-review .cr-chip:hover { border-color: var(--ink-4); }
.care-review .cr-chip-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-1); }
.care-review .cr-chip-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.care-review .cr-chip-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.care-review .cr-chip-ini { font-weight: 700; font-family: var(--font-mono); font-size: 11px; }

/* ── Problems-only toggle ─────────────────────────────────────────────────── */
.care-review .cr-toggle-wrap { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.care-review .cr-toggle-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.care-review .cr-switch { position: relative; width: 38px; height: 22px; border-radius: 999px;
  border: 0; cursor: pointer; background: var(--ink-4); transition: background .15s; }
.care-review .cr-switch.on { background: var(--accent); }
.care-review .cr-switch .cr-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.care-review .cr-switch.on .cr-knob { left: 18px; }

/* ── Segmented view toggle ────────────────────────────────────────────────── */
.care-review .cr-controls { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.care-review .cr-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-5); padding: 3px; gap: 3px; }
.care-review .cr-seg-btn { cursor: pointer; border: 0; border-radius: var(--r-3); padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; background: transparent; color: var(--ink-3);
  transition: background .12s, color .12s; }
.care-review .cr-seg-btn.on { background: var(--surface); color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ── Filter rows ──────────────────────────────────────────────────────────── */
.care-review .cr-filterrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.care-review .cr-filterlabel { font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Display tweaks ───────────────────────────────────────────────────────── */
.care-review .cr-tweaks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.care-review .cr-tweak { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.care-review .cr-miniseg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: 2px; gap: 2px; }
.care-review .cr-miniseg-btn { cursor: pointer; border: 0; border-radius: var(--r-3); padding: 4px 10px;
  font-size: 11.5px; font-weight: 600; background: transparent; color: var(--ink-3); white-space: nowrap; }
.care-review .cr-miniseg-btn.on { background: var(--surface); color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ── Shared card / table shell ────────────────────────────────────────────── */
.care-review .cr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-6); overflow: hidden; }
.care-review .cr-scroll { max-height: 70vh; overflow: auto; }
.care-review .cr-empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ── Grid view (15-min rows × resident columns) ───────────────────────────── */
.care-review .cr-grid-head, .care-review .cr-grid-row { display: grid; }
.care-review .cr-grid-head { background: var(--surface-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; }
.care-review .cr-headcell { padding: 8px 10px; font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.care-review .cr-grid-time { border-right: 1px solid var(--line); padding: 0 10px; display: flex;
  align-items: center; justify-content: flex-end; }
.care-review .cr-grid-rail { border-right: 1px solid var(--line); position: relative; display: flex;
  align-items: center; padding: 0 8px; overflow: hidden; }
.care-review .cr-grid-cell { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: flex; position: relative; }
.care-review .cr-cell-inner { flex: 1; min-width: 0; border-radius: 4px; display: flex; align-items: center;
  gap: 3px; overflow: hidden; cursor: pointer; transition: opacity .15s, box-shadow .15s; }
.care-review .cr-cell-task { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; letter-spacing: -0.005em; }
.care-review .cr-cell-empty { width: 100%; border: 0; background: transparent; cursor: pointer; }
.care-review .cr-cell-empty:hover { background: rgba(0,0,0,0.03); }
.care-review .cr-away-tag { flex: 0 0 auto; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--c-conf-fg); }
.care-review .cr-row-divider { display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-2); color: var(--ink-3); }
.care-review .cr-row-divider .cr-rule { flex: 1; border-top: 1px dashed var(--line); height: 0; }

/* ── Hours view (1 row/hour × 4 quarters) ─────────────────────────────────── */
.care-review .cr-q { display: grid; grid-template-columns: repeat(4, 1fr); }
.care-review .cr-q-cell { border-radius: 4px; display: flex; align-items: center; gap: 3px;
  overflow: hidden; cursor: pointer; min-width: 0; margin: 2px; transition: opacity .15s, box-shadow .15s; }

/* ── Lane views (Care + Exceptions) ───────────────────────────────────────── */
.care-review .cr-lanes { --lane-gutter: 200px; }
.care-review .cr-lane-head, .care-review .cr-lane { display: grid; grid-template-columns: var(--lane-gutter) 1fr; }
.care-review .cr-lane-head { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.care-review .cr-lane-headlabel { border-right: 1px solid var(--line); padding: 8px 16px; display: flex;
  align-items: center; font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.care-review .cr-ruler { position: relative; height: 30px; }
.care-review .cr-tick { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
.care-review .cr-tick-mark { position: absolute; top: 0; height: 6px; width: 1px; background: var(--line); }
.care-review .cr-tick-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  color: var(--ink-3); padding-top: 6px; white-space: nowrap; }
.care-review .cr-lane { border-bottom: 1px solid var(--line-2); }
.care-review .cr-lane:last-child { border-bottom: 0; }
.care-review .cr-lane-gutter { display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-right: 1px solid var(--line); min-width: 0; }
.care-review .cr-lane-label { font-size: 13px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.care-review .cr-lane-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.care-review .cr-track { position: relative; }
.care-review .cr-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); opacity: 0.7; }
.care-review .cr-block { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 5px;
  overflow: hidden; cursor: pointer; display: flex; align-items: center; padding: 0 6px; min-width: 0;
  transition: opacity .15s, transform .15s, box-shadow .15s; }
.care-review .cr-block-task { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; letter-spacing: -0.005em; }
.care-review .cr-mark { position: absolute; top: 50%; cursor: pointer; transition: opacity .15s, transform .15s; }
.care-review .cr-drift { position: absolute; top: 26%; height: 1px; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.care-review .cr-avatar { border-radius: 999px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-weight: 700; letter-spacing: 0.01em; border: 1px solid rgba(0,0,0,0.04); }

/* ── Legend ───────────────────────────────────────────────────────────────── */
.care-review .cr-legend { display: flex; align-items: center; gap: 16px; margin: 12px 2px 22px;
  font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.care-review .cr-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.care-review .cr-legend-sw { width: 16px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* ── Review queue ─────────────────────────────────────────────────────────── */
.care-review .cr-queue-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 12px; }
.care-review .cr-queue-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.care-review .cr-queue-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.care-review .cr-feed-row { position: relative; cursor: pointer; padding: 14px 16px 14px 18px;
  background: var(--surface); border-bottom: 1px solid var(--line-2); transition: background .12s; }
.care-review .cr-feed-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.care-review .cr-feed-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.care-review .cr-feed-at { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  font-weight: 600; margin-left: 8px; }
.care-review .cr-feed-title { font-size: 14px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em;
  line-height: 1.3; margin: 4px 0; }
.care-review .cr-feed-detail { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.care-review .cr-feed-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.care-review .cr-feed-cg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 600; color: var(--ink-2); }
.care-review .cr-feed-actions { display: flex; gap: 8px; margin-top: 12px; }
.care-review .cr-feed-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 11px; border-radius: var(--r-4);
  white-space: nowrap; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  transition: background .12s, color .12s, border-color .12s; }
.care-review .cr-state-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.care-review .cr-ontarget { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface-2); }
.care-review .cr-ontarget-icon { width: 24px; height: 24px; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.care-review .cr-ontarget-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.care-review .cr-ontarget-actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.care-review .cr-feed-btn.cr-btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Needs-review day cards (House Dashboard) ────────────────────────────────
   One card per calendar day so "this day needs review" reads as a single unit
   instead of a row per finding. Cards flow left-to-right and use the desktop's
   horizontal space; align-items:flex-start keeps a 1-finding day from being
   stretched to match a 12-finding day alongside it. */
.care-review .cr-day-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.care-review .cr-day-card { flex: 1 1 260px; max-width: 360px; display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-8); text-decoration: none; color: inherit;
  overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.care-review .cr-day-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.care-review .cr-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.care-review .cr-day-date { font-size: 13.5px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.care-review .cr-day-count { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
/* The "Review day" pill exists only to make the whole-card link obvious — the card
   itself is the click target, this is just the affordance. */
.care-review .cr-day-goto { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; transition: gap .15s; }
.care-review .cr-day-card:hover .cr-day-goto { gap: 6px; }
.care-review .cr-day-body { display: flex; flex-direction: column; max-height: 236px; overflow-y: auto; }
.care-review .cr-day-finding { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.4; }
.care-review .cr-day-finding:last-child { border-bottom: none; }
.care-review .cr-day-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; margin-top: 5px; }
.care-review .cr-day-finding-type { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; }
.care-review .cr-day-finding-title { display: block; color: var(--ink-1); font-weight: 600; }

.care-review .cr-day-disclosure { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.care-review .cr-day-disclosure:hover { background: var(--surface-2); border-color: var(--ink-4); }
.care-review .cr-day-disclosure.open .cr-disclosure-chev { transform: rotate(90deg); }

/* ── Merged billing footer: "show all entries" disclosure + per-entry table ─── */
.care-review .cr-disclosure { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 16px;
  background: var(--surface); border: none; border-top: 1px solid var(--line-2); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background .12s; }
.care-review .cr-disclosure:hover { background: var(--surface-2); }
.care-review .cr-disclosure-chev { display: inline-flex; transition: transform .15s; }
.care-review .cr-disclosure.open .cr-disclosure-chev { transform: rotate(90deg); }
.care-review .cr-billing-scroll { overflow-x: auto; border-top: 1px solid var(--line-2); }
.care-review .cr-billing-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.care-review .cr-billing-table th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--surface-2); }
.care-review .cr-billing-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-1); vertical-align: middle; }
.care-review .cr-billing-table tr:last-child td { border-bottom: none; }
.care-review .cr-billing-table .cr-num { text-align: right; font-variant-numeric: tabular-nums; }
.care-review .cr-seg-inline { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden; }
.care-review .cr-seg-inline button { border: none; background: var(--surface); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; cursor: pointer; line-height: 1;
  border-right: 1px solid var(--line); transition: background .12s, color .12s; }
.care-review .cr-seg-inline button:last-child { border-right: none; }
.care-review .cr-seg-inline button:hover { background: var(--surface-2); }
.care-review .cr-seg-inline button.on-approve { background: var(--accent); color: #fff; }
.care-review .cr-seg-inline button.on-pending { background: var(--ink-3); color: #fff; }
.care-review .cr-seg-inline button.on-exclude { background: var(--c-warn-fg); color: #fff; }