/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: .83rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  transition: all .15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  border-color: var(--color-neutral);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-tertiary);
  color: #fff;
  border-color: var(--color-tertiary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-tertiary-hover);
  border-color: var(--color-tertiary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-neutral);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.btn-success:hover:not(:disabled) {
  background: var(--green-dark);
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-danger:hover:not(:disabled) {
  background: var(--red-dark);
}

.btn-amber {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--blue-l);
}

/* ── DOSE ACTION TOGGLES (Given / Held / Refused) ───────────────────
   Used by the Log Dose modal and the MAR-History late-entry modal.

   These are TOGGLE buttons, and the selected one must be unmistakable:
   they previously all rendered as solid filled buttons differing only
   by `opacity` (1 vs 0.4), so a stale highlight read as a real
   selection and a caregiver could believe a dose was marked Given when
   nothing was selected at all. Unselected is now OUTLINED and selected
   is SOLID + a check mark, which survives a glance, a low-contrast
   screen, and a colour-blind reader.

   State lives on aria-pressed, so the accessible state and the visual
   state cannot drift — there is no separate .selected class to forget.
   #fff on the solid fill matches .btn-success/.btn-amber/.btn-danger
   directly above; the status tokens are not flipped in dark mode, so
   the same pair works in both themes. */
.dose-act {
  /* Defensive default only — all three variants set their own. */
  --dose-act-color: var(--muted);
  background: var(--surface);
  color: var(--dose-act-color);
  border: 2px solid var(--dose-act-color);
  font-weight: 700;
}

.dose-act-given { --dose-act-color: var(--green); }
.dose-act-held { --dose-act-color: var(--amber); }
.dose-act-refused { --dose-act-color: var(--red); }

.dose-act[aria-pressed="true"] {
  background: var(--dose-act-color);
  color: #fff;
  /* A second, non-colour cue: the selected button is also the only one
     that sits raised. */
  box-shadow: 0 0 0 3px var(--dose-act-color), 0 2px 6px rgba(45, 41, 38, .18);
}

/* The selection tick. A pseudo-element on purpose: it stays out of
   textContent, so the i18n label gate still reads exactly "Given" /
   "Administrado" / "Naibigay". */
.dose-act[aria-pressed="true"]::after {
  content: ' \2713';
  font-weight: 800;
  margin-left: 2px;
}

.dose-act:hover:not(:disabled) {
  background: var(--dose-act-color);
  color: #fff;
}

.dose-act:focus-visible {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 2px;
}

.btn-sm {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 5px;
}

.btn-icon {
  padding: 6px 10px;
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tag-blue {
  background: var(--blue-l);
  color: var(--blue);
}

.tag-green {
  background: var(--green-l);
  color: var(--green);
}

.tag-amber {
  background: var(--amber-l);
  color: var(--amber);
}

.tag-red {
  background: var(--red-l);
  color: var(--red);
}

.tag-purple {
  background: var(--purple-l);
  color: var(--purple);
}

.tag-gray {
  background: #f3f4f6;
  color: var(--muted);
}

.tag-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-wrap {
  height: 7px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.progress-fill.green {
  background: var(--green);
}

.progress-fill.amber {
  background: var(--amber);
}

.progress-fill.red {
  background: var(--red);
}

.progress-fill.blue {
  background: var(--blue);
}

.progress-fill.purple {
  background: var(--purple);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}

tbody tr:nth-child(even) {
  background: #FBFAF8;
}

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

tbody tr:hover td {
  background: var(--bg);
}

/* ============================================================
   FORM INPUTS (general)
   ============================================================ */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--blue);
}

.form-textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

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

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

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

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

.form-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
}

.form-check-row input[type="checkbox"],
.form-check-row input[type="radio"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.18s ease;
}

.modal-box.lg {
  max-width: 720px;
}

.modal-box.xl {
  max-width: 920px;
}

.modal-box.xxl {
  max-width: 1100px;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.modal-close:hover {
  background: var(--bg);
}

/* Icon close button for JS-built modals (e.g. Send-for-Signature).
   32x32 hit box, concentric with the 16px Lucide icon. Hover shifts
   muted -> text plus a subtle surface, matching .modal-close's hover. */
.icon-close {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
  background: none;
  /* Visible resting box so the hit area reads as a real button; the
     whole 32x32 (incl. border+padding) is clickable — the svg below
     is pointer-events:none so the button owns every click. */
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Lucide injects the icon as an <svg> asynchronously; force it to
   follow the button's color (this overrides any hardcoded stroke the
   library emits) and let the button own the hover so the state
   registers both immediately and after the icon loads. */
.icon-close svg {
  stroke: currentColor;
  pointer-events: none;
}

.icon-close:hover {
  background: var(--border);
  color: var(--text);
}

.modal-body {
  padding: 22px;
}

.modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: sticky;
  bottom: 0;
  background: var(--white);
}

/* ============================================================
   RESIDENT SELECTOR BAR (form pages + operations pages)
   ============================================================ */
.res-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.res-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.res-bar-select {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  min-width: 210px;
  cursor: pointer;
}

.res-bar-select:focus {
  outline: none;
  border-color: var(--blue);
}

.res-bar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 17px;
}

/* ── Dashboard panel bottom cards ────────────────────────── */
.a1 { background: linear-gradient(135deg,#9C6E32,#b5854a); }
.a2 { background: linear-gradient(135deg,#407496,#5a8fae); }
.a3 { background: linear-gradient(135deg,#8C7356,#a48b6a); }
.a4 { background: linear-gradient(135deg,#6b7d6a,#849a82); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.panel-head a { font-size: .78rem; font-weight: 600; color: var(--color-tertiary); text-decoration: none; }
.panel-head a:hover { color: var(--color-tertiary-hover); }

.rrow {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .13s;
}
.rrow:last-child { border-bottom: 0; }
.rrow:hover { background: var(--bg); }
.rrow .who { flex: 1; min-width: 0; }
.rrow .who .nm { font-weight: 600; font-size: .9rem; }
.rrow .who .meta { font-size: .76rem; color: var(--muted); margin-top: 1px; }

.pill {
  font-size: .7rem; font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  letter-spacing: .01em;
  white-space: nowrap;
}
.pill.code { background: var(--steel-soft); color: var(--color-tertiary); }
.pill.dnr  { background: var(--red-l);      color: var(--red); }

.prow { padding: 15px 20px; border-bottom: 1px solid var(--border); }
.prow:last-child { border-bottom: 0; }
.prow .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.prow .top .nm  { font-weight: 600; font-size: .88rem; }
.prow .top .cnt { font-size: .78rem; color: var(--muted); font-weight: 600; }
.prow .top .cnt b { color: var(--text); }
.track { height: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.fill  { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--green), #3ca361); transition: width .6s ease; }
.fill.zero { background: var(--border-strong); }

/* ============================================================
   SEARCH / FILTER BARS
   ============================================================ */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 220px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: var(--blue);
}

.filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filter-btn {
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.15s;
}

.filter-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.filter-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  white-space: nowrap;
}

.tab:hover:not(.active) {
  color: var(--text);
}

.tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ============================================================
   MAR (Medication Administration Record)
   ============================================================ */
.mar-medication-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.mar-med-header {
  padding: 12px 16px;
  background: #fafaf8;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.mar-med-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.mar-med-meta {
  font-size: 12px;
  color: var(--muted);
}

.mar-grid-wrap {
  overflow-x: auto;
  padding: 6px 8px 10px;
}

.mar-table {
  border-collapse: collapse;
  min-width: 740px;
}

.mar-table th {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 2px;
  text-align: center;
  border: 1px solid var(--border);
  min-width: 30px;
  background: var(--bg);
  text-transform: none;
  letter-spacing: 0;
}

.mar-table td {
  padding: 2px;
  border: 1px solid var(--border);
  text-align: center;
  background: var(--white);
}

.mar-table .shift-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 10px;
  text-align: left;
  background: var(--bg);
  white-space: nowrap;
}

.mar-cell {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  transition: all 0.1s;
  margin: 1px;
}

.mar-cell:hover:not(.future) {
  opacity: 0.8;
  transform: scale(1.08);
}

.mar-cell.given {
  background: var(--green-m);
  color: var(--green-dark);
}

.mar-cell.held {
  background: var(--amber-m);
  color: var(--amber-dark);
}

.mar-cell.refused {
  background: var(--red-m);
  color: var(--red-dark);
}

.mar-cell.future {
  background: #f1f0ee;
  color: #c9c5bf;
  cursor: default;
}

.mar-cell.empty {
  background: #f9f8f6;
}

.mar-cell.empty:hover {
  background: var(--blue-l);
  color: var(--blue);
}

/* Late-entry correction (Title 22) — permanently marked with a purple
   corner L. Uses ::before so it can coexist with the unsynced ::after */
.mar-cell.late {
  position: relative;
}

.mar-cell.late::before {
  content: 'L';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dose saved locally but NOT confirmed on the server — tap retries */
.mar-cell.unsynced {
  outline: 2px dashed var(--red);
  outline-offset: -2px;
  position: relative;
}

.mar-cell.unsynced::after {
  content: '!';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
}

/* PRN badge */
.prn-badge {
  background: var(--purple-l);
  color: var(--purple);
}

/* Controlled substance banner */
.controlled-banner {
  background: var(--amber-l);
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   BILLING
   ============================================================ */
.billing-view-switcher {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

/* Running balance row colors */
.balance-positive {
  color: var(--green);
  font-weight: 600;
}

.balance-negative {
  color: var(--red);
  font-weight: 600;
}

/* Invoice modal */
.invoice-header {
  border-bottom: 2px solid var(--text);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.invoice-table th {
  background: var(--bg);
}

/* ============================================================
   RESIDENT RIGHTS
   ============================================================ */
.right-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.right-row:last-child {
  border-bottom: none;
}

.right-row:hover {
  background: var(--bg);
}

.right-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.right-check.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.right-text {
  font-size: 13px;
  line-height: 1.5;
}

.right-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}

/* ============================================================
   FORM CHECKLIST
   ============================================================ */
.checklist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.checklist-row:last-child {
  border-bottom: none;
}

.checklist-row:hover {
  background: var(--bg);
}

.checklist-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.checklist-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.checklist-code {
  font-size: 11px;
  color: var(--muted);
}

/* ============================================================
   AI SCANNER
   ============================================================ */
.upload-zone {
  border: 2px dashed var(--blue);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  background: var(--blue-l);
  transition: all 0.2s;
}

.upload-zone:hover {
  background: var(--blue-m);
  border-color: var(--blue-dark);
}

.upload-zone.dragover {
  border-color: #2563eb;
  background: #e8f0fe;
}

.upload-icon {
  font-size: 52px;
  margin-bottom: 14px;
}

.scan-progress-wrap {
  padding: 20px 0 10px;
}

.scan-status {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.scan-progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.scan-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.extracted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.extracted-card {
  background: var(--green-l);
  border: 1px solid #bbf7d0;
  border-radius: 9px;
  padding: 11px 14px;
}

.extracted-card-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green-dark);
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.extracted-card-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* ============================================================
   STATE FORM DOCUMENT STYLES
   ============================================================ */
.state-form-doc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.sfd-header {
  padding: 14px 20px;
  border-bottom: 2px solid #555;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.sfd-agency {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.6;
  max-width: 320px;
}

.sfd-title-block {
  text-align: right;
}

.sfd-title-block h2 {
  font-size: 14px;
  font-weight: 700;
}

.sfd-form-number {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.sfd-form-date {
  font-size: 10px;
  color: var(--muted);
}

.sfd-section {
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}

.sfd-section:last-of-type {
  border-bottom: none;
}

.sfd-section-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--bg);
  color: var(--muted);
  padding: 2px 8px;
  border-left: 3px solid var(--blue);
  margin-bottom: 9px;
}

/* Field grid (bordered cells) */
.field-grid {
  display: grid;
  border: 1px solid #ccc;
  margin-bottom: 8px;
}

.field-cell {
  padding: 5px 9px 7px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  min-height: 40px;
}

.field-cell:last-child {
  border-right: none;
}

.field-cell-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: 0.4px;
}

/* Read-only rendered value inside a document field cell. Matches the
   metrics of `.field-cell input` below so converting a fill-in form to
   a read-only document (Theft & Loss, H&S Code 1569) does not shift
   the layout. See js/features/readonly-forms.js. */
.field-cell .ro-value {
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  line-height: 1.4;
  min-height: 18px;
}

/* A blank line on a read-only document for someone to write on by hand
   (title/relationship, date). Deliberately NOT .sig-line: that one is
   a clickable in-app signature target. */
.ro-blank {
  border-bottom: 1px solid #333;
  min-height: 34px;
  margin-top: 6px;
}

.field-cell input,
.field-cell select,
.field-cell textarea {
  border: none;
  outline: none;
  width: 100%;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  line-height: 1.4;
}

.field-cell textarea {
  min-height: 48px;
  resize: vertical;
}

/* Signature row at bottom of forms */
.sfd-sig-row {
  display: grid;
  gap: 20px;
  padding: 14px 20px;
  border-top: 2px solid #555;
}

.sfd-sig-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.sfd-sig-row-2 {
  grid-template-columns: 1fr 1fr;
}

.sig-field {
  border-top: 1px solid #333;
  padding-top: 4px;
  margin-top: 28px;
  font-size: 10px;
  color: var(--muted);
}

.sig-field input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
}

.sfd-disclaimer {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  padding: 7px 20px;
  border-top: 1px solid var(--border);
}

/* AI fill highlight on field cells */
.field-cell.ai-filled,
.field-cell.ai-filled input,
.field-cell.ai-filled select,
.field-cell.ai-filled textarea {
  background: var(--green-m) !important;
  transition: background 10s ease;
}

.field-cell.ai-fill-fade {
  background: transparent;
}

/* ============================================================
   POLST-SPECIFIC
   ============================================================ */
.polst-danger-banner {
  background: #fff5f5;
  border: 2px solid var(--red);
  border-radius: 9px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red-dark);
}

.polst-section {
  border: 2px solid var(--text);
  border-radius: 7px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.polst-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.radio-option input[type="radio"] {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

/* ============================================================
   UTILITY
   ============================================================ */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

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

.text-small {
  font-size: 12px;
}

.text-xs {
  font-size: 11px;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-6 {
  gap: 6px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.ml-auto {
  margin-left: auto;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 14px;
}

/* Info row (label: value pairs) */
.info-row {
  display: flex;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 6px;
}

.info-row .info-label {
  font-weight: 600;
  min-width: 140px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Resident card in forms */
.resident-info-card {
  background: var(--blue-l);
  border: 1px solid var(--blue-m);
  border-radius: 9px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Body diagram SVG styles */
.body-diagram-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 16px 0;
}

.body-diagram-panel {
  text-align: center;
}

.body-diagram-panel h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.body-svg {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  cursor: crosshair;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

/* Body diagram / skin assessment (js/features/bodymap.js) —
   3-card layout: context bar → assessment card → diagram card →
   marker list. Tokens only; ochre appears once (Save Assessment). */
.bm-context-bar {
  flex-wrap: wrap;
  row-gap: 8px;
}

.bm-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.bm-more {
  position: relative;
  margin-left: auto;
}

.bm-more summary {
  list-style: none;
  cursor: pointer;
}

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

.bm-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  z-index: 50;
  min-width: 190px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.bm-card {
  margin-bottom: 16px;
}

.bm-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.bm-card-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.bm-counts {
  font-size: 12px;
  color: var(--color-neutral);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.bm-hint {
  font-size: 12px;
  color: var(--color-neutral);
}

.bm-fields {
  display: grid;
  grid-template-columns: 170px 1fr 220px;
  gap: 12px;
}

.bm-seg {
  display: flex;
  gap: 6px;
}

.bm-seg-btn {
  position: relative;
}

.bm-seg-btn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bm-seg-btn span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-neutral);
  cursor: pointer;
  user-select: none;
}

.bm-seg-btn input:checked + span {
  border-color: var(--color-tertiary);
  color: var(--color-tertiary);
  background: var(--steel-soft);
  font-weight: 600;
}

.bm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.bm-legend-chip {
  font-size: 11px;
  color: var(--color-neutral);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2px 8px;
  white-space: nowrap;
}

.bm-legend-chip b {
  color: var(--color-tertiary);
}

.bm-diagram-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.bm-healed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-neutral);
  cursor: pointer;
  margin-left: auto;
}

/* SVG marker badges */
.bm-marker {
  cursor: pointer;
}

.bm-marker circle {
  fill: var(--color-tertiary);
  stroke: var(--color-bg);
  stroke-width: 1.2;
}

.bm-marker text {
  fill: var(--color-bg);
  font-size: 7px;
  font-weight: 700;
  font-family: inherit;
  pointer-events: none;
}

.bm-marker text.bm-letter-sm {
  font-size: 5.5px;
}

.bm-marker.healed circle {
  fill: var(--color-neutral);
  opacity: 0.55;
}

.bm-marker.unsynced circle {
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-dasharray: 2 1.5;
}

.bm-chip {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding: 3px 5px;
  border-radius: 50%;
  background: var(--color-tertiary);
  color: var(--color-bg);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.bm-chip.healed {
  background: var(--color-neutral);
  opacity: 0.6;
}

/* Marker list rows */
.bm-mrow {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.bm-mrow:last-child {
  border-bottom: none;
}

.bm-mrow-main {
  flex: 1;
  min-width: 0;
}

.bm-mrow-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.bm-mrow-meta {
  font-size: 11px;
  color: var(--color-neutral);
  margin-top: 2px;
}

.bm-mrow-note {
  font-size: 12px;
  color: var(--color-text);
  margin-top: 4px;
  white-space: pre-wrap;
}

.bm-mrow.healed .bm-mrow-title,
.bm-mrow.healed .bm-mrow-note {
  color: var(--color-neutral);
}

.bm-mrow-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bm-retry {
  border: 1px dashed var(--red);
  color: var(--red);
  background: transparent;
  font-weight: 700;
}

/* Marker modal: tappable type chips + stage pills */
.bm-chipgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bm-typechip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  cursor: pointer;
  font-family: inherit;
}

.bm-typechip b {
  color: var(--color-tertiary);
  font-size: 13px;
}

.bm-typechip span {
  font-size: 10px;
  color: var(--color-neutral);
}

.bm-typechip.active {
  border-color: var(--color-tertiary);
  background: var(--steel-soft);
}

.bm-typechip.active span {
  color: var(--color-tertiary);
  font-weight: 600;
}

.bm-stagepills {
  display: flex;
  gap: 6px;
}

.bm-stagepill {
  min-width: 38px;
  padding: 6px 0;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 12px;
  color: var(--color-neutral);
  font-family: inherit;
}

.bm-stagepill.active {
  border-color: var(--color-tertiary);
  color: var(--color-tertiary);
  background: var(--steel-soft);
  font-weight: 700;
}

.bm-chipgrid.disabled,
.bm-stagepills.disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Marker photos */
.bm-photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.bm-photo-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.bm-photo-wrap {
  position: relative;
}

.bm-photo-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  color: var(--color-bg);
  border: none;
  font-size: 10px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
}

/* Printable signature row + footnote */
.bm-sig-row {
  display: flex;
  gap: 32px;
  margin: 24px 8px 8px;
}

.bm-sig-field {
  flex: 1;
  max-width: 320px;
}

.bm-sig-field input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--color-text);
  background: transparent;
  padding: 4px 2px;
  font-size: 13px;
  margin-bottom: 3px;
  outline: none;
  font-family: inherit;
}

.bm-sig-field span {
  font-size: 10px;
  color: var(--color-neutral);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bm-footnote {
  font-size: 11px;
  color: var(--color-neutral);
  margin: 8px 8px 24px;
}

/* Mark legend */
.mark-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  margin: 10px 0;
}

.mark-legend-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
}

/* Weight / narrative table cells */
.log-table input,
.log-table select,
.log-table textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  padding: 4px 6px;
}

.log-table textarea {
  min-height: 40px;
  resize: vertical;
}

.log-table td {
  padding: 4px;
  vertical-align: top;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

  #header,
  #sidebar,
  .res-bar,
  .res-bar-actions,
  .billing-view-switcher,
  .filter-row,
  .search-bar,
  .tabs,
  .page-header .btn,
  .modal-overlay,
  .controlled-banner,
  /* Upload prompts are screen-only controls. "Click to upload hospital
     discharge summary" and "Click to Upload Photos" were printing onto
     Discharge Papers and Body Pictures — both are resident records that
     get handed over, so an instruction to tap a web page has no business
     on the paper. The .sfd-section wrapping each one also carries
     .no-print in app.html, or an empty bordered box would print in its
     place. */
  .upload-zone,
  /* The conventional opt-out. The PDF/clone export paths already strip
     .no-print; window.print() did not honour it, so the same element
     could vanish from a saved PDF yet appear on a direct print. */
  .no-print {
    display: none !important;
  }

  #content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .state-form-doc {
    border: none;
    box-shadow: none;
    max-width: 100%;
  }

  .pg {
    display: none !important;
  }

  .pg.active {
    display: block !important;
  }

  @page {
    margin: 0.75in;
  }
}

/* ── TOAST ── */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a18;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 9999;
  /* Row layout so the severity icon (added by showToast when the
     message is a "⚠ …" failure) sits beside the text instead of
     wrapping above it. Harmless for icon-less toasts. */
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
}

#toast.show {
  opacity: 1;
}

/* Failure toasts: amber icon on the same dark chip. The TEXT stays
   white — a whole amber message reads as decoration, while the icon
   alone reads as severity. */
#toast .toast-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--amber);
}

#toast.toast-warn {
  border-left: 3px solid var(--amber);
  padding-left: 21px;          /* 24 - 3, so the text does not shift */
}

/* ── ELECTRONIC SIGNATURES ────────────────────────────────────── */
.sig-line {
  border-bottom: 2px solid #1a1a18;
  min-height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  position: relative;
  border-radius: 4px 4px 0 0;
  transition: background .15s;
  margin-top: 6px;
}
.sig-line:hover { background: #f0f7ff; }
.sig-line:hover::after {
  content: '✍  Click to sign';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--color-tertiary);
  font-style: italic;
  pointer-events: none;
}
.sig-line.signed { background: #f0fff4; }
.sig-line.signed img { height: 34px; max-width: 100%; object-fit: contain; }
.sig-typed { font-family: 'Brush Script MT','Segoe Script',cursive; font-size: 22px; color: #1a1a18; line-height: 1; }

/* Signature Modal */
.sig-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.sig-modal-overlay.open { display: flex; }
.sig-modal {
  background: white;
  border-radius: 12px;
  width: 540px;
  max-width: 96vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  overflow: hidden;
}
.sig-modal-hdr {
  padding: 14px 20px;
  background: #1a1a18;
  color: white;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sig-modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
}
.sig-tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
  user-select: none;
}
.sig-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.sig-modal-body { padding: 20px; }
.sig-canvas-wrap {
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fafaf9;
  cursor: crosshair;
  position: relative;
  overflow: hidden;
}
.sig-canvas-wrap canvas { display: block; touch-action: none; width: 100%; height: 150px; }
.sig-canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
  font-style: italic;
  white-space: nowrap;
}
.sig-type-field {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 26px;
  font-family: 'Brush Script MT','Segoe Script',cursive;
  color: #1a1a18;
  background: #fafaf9;
  outline: none;
  transition: border-color .15s;
}
.sig-type-field:focus { border-color: var(--color-primary); }
.sig-font-opt {
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  transition: border-color .15s;
}
.sig-font-opt.active { border-color: var(--color-primary); }
.sig-modal-ftr {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.scl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.scl-row:last-child { margin-bottom: 0; }
.scl-row.done { background: #f0fdf4; border-color: #86efac; }
.scl-check { flex-shrink: 0; margin-top: 1px; width: 16px; height: 16px; cursor: pointer; }
.scl-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 180px; }
.scl-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.scl-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 14px;
}
.wt-item{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--color-border);font-size:14px;cursor:pointer;color:var(--color-text);line-height:1.4}
.wt-item input[type=checkbox]{accent-color:var(--color-primary);margin-top:2px;flex-shrink:0;width:15px;height:15px}
.wt-item:last-child{border-bottom:none}
.wt-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-secondary);margin:14px 0 2px;padding-bottom:4px;border-bottom:2px solid var(--color-border)}
.wt-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:11px;font-weight:700;flex-shrink:0;margin-right:8px}
.wt-section-title{font-size:15px;font-weight:700;color:var(--color-text);margin-bottom:14px;display:flex;align-items:center}
.wt-note{font-size:12px;color:var(--color-secondary);margin:-8px 0 10px;font-style:italic}


/* ===== Lucide icons =====
   Geometry is vendored (js/icons/lucide-icons.js) and rendered by
   js/features/icons.js — no CDN. Stroke 2.25 is deliberately heavier
   than Lucide's default 2: these screens are used on small tablets in
   bright rooms, and the thin default reads as grey mush at 14-16px.
   Colour always comes from currentColor, so icons follow their text in
   light and dark mode without a per-icon rule. */
.lucide {
  width: 16px; height: 16px;
  stroke-width: 2.25;
  vertical-align: -3px;
  display: inline-block;
  flex-shrink: 0;
}
.nav-icon .lucide,
.nav-link .lucide { width: 16px; height: 16px; }
.btn .lucide { width: 14px; height: 14px; margin-right: 4px; }
.empty-state-icon .lucide { width: 40px; height: 40px; stroke-width: 1.5; color: var(--muted); }

/* ── Edit-member modal footer ─────────────────────────────────────
   Two centered rows under a divider: a quiet destructive row
   (Reset Password / Remove User, btn-sm), then the standard
   Cancel / Save row. Buttons in a row share equal widths so the
   footer reads as a uniform grid; stacks to full-width buttons
   on phones (rule in mobile.css). */
.em-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-footer-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.em-footer-row .btn {
  flex: 1 1 0;
  max-width: 200px;
}

/* ============================================================
   MED DOSE-SLOT PICKER (js/features/med-slots.js)
   Presentation layer only — tokens throughout, dark-mode safe.
   ============================================================ */
.modal-section {
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.modal-section.first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.modal-section-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.slot-summary {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}

.slot-summary b {
  color: var(--text);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.slot-tile {
  position: relative;
  text-align: left;
  padding: 8px 10px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.slot-tile:hover {
  border-color: var(--border-strong);
}

.slot-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--steel-soft);
}

.slot-tile .slot-time {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.slot-tile.on {
  border-color: var(--color-tertiary);
  background: var(--steel-soft);
}

.slot-tile.add {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}

.slot-tile.add:hover {
  color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  background: var(--steel-soft);
}

.slot-tile .slot-x {
  position: absolute;
  top: 4px;
  right: 6px;
  padding: 0 3px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  border-radius: 4px;
}

.slot-tile .slot-x:hover {
  color: var(--red);
  background: var(--red-l);
}

.slot-custom-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.slot-custom-editor .form-input {
  flex: 1 1 140px;
  width: auto;
}

.slot-locked-note {
  font-size: 12px;
  color: var(--amber-dark);
  background: var(--amber-soft);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
}

.slot-locked-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.slot-locked-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--steel-soft);
  color: var(--color-tertiary);
  border: 1px solid var(--border);
}

/* ── AI DISCLAIMER (js/features/ai-disclaimer.js) ───────────────────
   Review-time line on AI surfaces. On form pages it lives INSIDE
   .res-bar, which every print/PDF path strips — never printed. */
.ai-disclaimer {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border: 1px dashed var(--amber);
  border-radius: 7px;
  padding: 6px 10px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.res-bar .ai-disclaimer {
  margin: 0;
  flex-basis: 100%;
}

/* ── MED COUNT CHIP (js/features/med-list.js) ─────────────────── */
.med-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--steel-soft);
  color: var(--color-tertiary);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
}

.med-chip:hover {
  border-color: var(--color-tertiary);
}

.med-chip .lucide {
  width: 14px;
  height: 14px;
}

/* ═══ DISCHARGED-ACCESS TOGGLE + BADGE ═══════════════════════════════
   js/features/discharged-access.js — "Show discharged" report toggles
   on the MAR / Vitals / individual Billing res-bars, plus the
   "Discharged [date]" pill marking a discharged resident's info bar.
   Tokens only (dark-mode safe). */

/* Type-to-filter resident search next to each selector — narrows the
   dropdown options live (sdSearchInput). --white/--text/--border all
   flip in dark mode. */
.sd-search {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  width: 160px;
  min-width: 0;
  font-family: inherit;
}

.sd-search:focus {
  outline: none;
  border-color: var(--blue);
}

.sd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.sd-toggle input {
  margin: 0;
  accent-color: var(--color-tertiary);
}

.sd-badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--amber);
  border-radius: var(--radius-pill);
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* ═══ ON-DEMAND TRANSLATE BUTTON (translate-button.js) ═══
   Injected at runtime next to each translating surface's Save
   button; tokens only (dark-mode safe). */
.tb-btn {
  margin-right: 8px;
}
.tb-btn-block {
  display: inline-block;
  margin-top: 8px;
  margin-right: 0;
}

/* ── LOCKED MONTHLY-RATE NOTE ───────────────────────────────────────
   Shown next to #ar-rate / #er-rate for roles without
   canViewResidentRates (admin manages residents but is not a billing
   role). The field used to be display:none, which left an empty input
   the save path still read and stored as a deliberate $0 — see
   rateFieldEditable() in js/features/residents.js. Showing a disabled
   field plus this note is the honest version. */
.rate-locked-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

input.form-input:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

/* ── "RATE NOT SET" BADGE ────────────────────────────────────────────
   Owner/co_owner only (rateNotSetHTML, js/utils/dates.js) — it is a
   call to action, so a role that cannot set a rate never sees it.
   Amber rather than red: a missing rate is unfinished setup, not an
   error. Sized as a small inline control, not a tag, because it is
   tappable and jumps to Billing Setup for that resident. */
.rate-unset-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-l);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.6;
}

.rate-unset-badge:hover { background: var(--amber-m); }

.rate-unset-badge:focus-visible {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 2px;
}

/* ── DATE INPUT VALIDATION (js/features/date-input-commit.js) ────────
   A date field that was left holding something that is not a real date
   — most often a half-typed year — is outlined and says what is wrong,
   and nothing is saved. Hex, not a token, for the same reason the
   status hues are literal elsewhere: this red has to read the same in
   both themes. */
.form-input.dc-bad,
input[type="date"].dc-bad {
  border-color: #E24B4A;
  outline: 2px solid #E24B4A;
  outline-offset: -2px;
}
.dc-msg {
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #A32D2D;
}