.viz-root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --series-1:       #2a78d6;  /* blue - primary action */
  --series-3:       #1baf7a;  /* aqua */
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-critical:#d03b3b;
  --status-info:    #2f6fed;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --series-1:       #3987e5;
    --series-3:       #199e70;
    --status-good:    #0ca30c;
    --status-warning: #fab219;
    --status-critical:#e66767;
    --status-info:    #5b93f5;
  }
}

/* Manual theme choice (Settings > Appearance - Matt's Aug 24 2026
   request): data-theme="dark" on <html> forces this palette regardless of
   the system setting; data-theme="light" forces light (the media block
   above already excludes it); no attribute = follow the system. */
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page-plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255,255,255,0.10);
  --series-1:       #3987e5;
  --series-3:       #199e70;
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-critical:#e66767;
  --status-info:    #5b93f5;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 12px;
}
.app-title h1 { margin: 0; font-size: 22px; font-weight: 700; }
/* The practice logo (navy + gold on transparent): sits on a light chip in dark mode so it stays legible */
.app-logo { display: block; height: 46px; width: auto; }
.auth-logo { height: 64px; margin: 0 auto 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-logo { background: #f7f6f2; border-radius: 8px; padding: 4px 10px; }
}
:root[data-theme="dark"] .app-logo { background: #f7f6f2; border-radius: 8px; padding: 4px 10px; }
.subtitle { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }

.btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s ease;
}
.btn:hover { filter: brightness(0.96); }
.btn-primary { background: var(--series-1); color: #fff; border-color: transparent; }
.btn-secondary { background: var(--surface-1); color: var(--text-primary); }
.btn-good { background: var(--status-good); color: #fff; border-color: transparent; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.tiles {
  display: flex; gap: 14px;
  padding: 4px 28px 18px;
  flex-wrap: wrap;
}
.tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 140px;
}
.tile .tile-value {
  font-size: 26px; font-weight: 700;
  font-variant-numeric: proportional-nums;
}
.tile .tile-label {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.tile.status-good .tile-value { color: var(--status-good); }
.tile.status-warning .tile-value { color: var(--status-warning); }
.tile.status-info .tile-value { color: var(--status-info); }
.tile.status-critical .tile-value { color: var(--status-critical); }
.tile.status-orange .tile-value { color: #f28c28; }
.tile.status-purple .tile-value { color: #a86bd6; }
.tile.status-teal .tile-value { color: #2aa7a0; }
.tile.status-darkblue .tile-value { color: #3450c8; }

/* Missing-address alert next to the invoice number (Invoice View) -
   shown only on mailing-relevant statuses; see missingAddressIcon(). */
.addr-warn { color: var(--status-warning); cursor: help; font-size: 13px; }

/* Tiles are quick filters (Matt's Aug 23 2026 request) - clicking one
   shows those rows in the table; the active one wears a ring. */
.tile.clickable { cursor: pointer; transition: border-color 0.1s, transform 0.05s; user-select: none; }
.tile.clickable:hover { border-color: var(--series-1); }
.tile.clickable:active { transform: scale(0.98); }
.tile.tile-active { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1); }

.view-tabs {
  display: flex; gap: 4px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
}
.view-tab {
  border: none; background: none;
  color: var(--text-secondary);
  padding: 10px 16px 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.view-tab:hover { color: var(--text-primary); }
.view-tab.active { color: var(--series-1); border-bottom-color: var(--series-1); }
.view-hint {
  margin: 10px 28px 0; padding: 0;
  color: var(--text-secondary); font-size: 12px; max-width: 900px;
}

.filter-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 28px 14px;
  flex-wrap: wrap;
}
.filter-bar select, .filter-bar input[type=search] {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
}
.filter-bar input[type=search] { min-width: 220px; }
.filter-bar .date-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); white-space: nowrap;
}
.filter-bar .date-filter input[type=date] {
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
}
.date-clear { white-space: nowrap; }
.spacer { flex: 1; }
.bulk-actions { display: flex; align-items: center; gap: 8px; }
.bulk-actions span { font-size: 12px; color: var(--text-secondary); }
.hidden { display: none !important; }

.table-wrap { padding: 0 28px 32px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface-1); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--gridline);
  position: sticky; top: 0; background: var(--surface-1);
}
/* white-space: nowrap keeps a dollar amount on one line - the old bug was
   a negative sign wrapping onto its own line above the number. */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-secondary); }
th.sort-active { color: var(--text-primary); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--gridline); font-size: 13px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--page-plane); }
.col-check { width: 34px; }
.empty-state { text-align: center; color: var(--text-muted); padding: 30px !important; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pill-subbatch { background: var(--gridline); color: var(--text-secondary); }

/* Status is computed automatically from Crystal's own Ins/Pat Balance on
   every Invoice Report import (see matching.compute_status) - this select
   is a manual-override escape hatch, not the primary way status changes.
   Picking a value here is a temporary stopgap: the next Invoice Report
   import that touches this claim recomputes and overwrites it. */
.status-select {
  display: inline-flex; align-items: center;
  border: none; border-radius: 999px; padding: 4px 22px 4px 11px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: right 8px center; background-size: 8px;
}
/* Status colors mirror Matt's balance-sheet color key (Aug 23 2026):
   TEAL   working         - filed, waiting on insurance
   YELLOW patient_balance - patient owes, needs an invoice
   ORANGE pb_first_sent   - 1st invoice sent
   RED    pb_second_sent  - 2nd invoice sent + alert in EHR
   PURPLE pb_employee     - staff balance
   BLUE   patient_refund  - practice owes the patient
   GREEN  complete        - manually done; removed by the next report upload */
.status-select.working {
  background-color: rgba(42,167,160,0.16); color: #2aa7a0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%232aa7a0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.complete {
  background-color: rgba(12,163,12,0.14); color: var(--status-good);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%230ca30c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.posted {
  background-color: rgba(12,163,12,0.14); color: var(--status-good);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%230ca30c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.patient_refund {
  background-color: rgba(47,111,237,0.14); color: var(--status-info);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%232f6fed' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.patient_balance {
  background-color: rgba(250,178,25,0.18); color: var(--status-warning);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fab219' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.pb_first_sent {
  background-color: rgba(242,140,40,0.18); color: #f28c28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23f28c28' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.pb_second_sent {
  background-color: rgba(208,59,59,0.14); color: var(--status-critical);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23d03b3b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.pb_employee {
  background-color: rgba(155,89,208,0.18); color: #a86bd6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a86bd6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.status-select.needs_refund_check {
  background-color: rgba(38,58,155,0.18); color: #3450c8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%233450c8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

.status-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.status-pill.working { background: rgba(42,167,160,0.16); color: #2aa7a0; }
.status-pill.complete { background: rgba(12,163,12,0.14); color: var(--status-good); }
.status-pill.posted { background: rgba(12,163,12,0.14); color: var(--status-good); }
.status-pill.patient_refund { background: rgba(47,111,237,0.14); color: var(--status-info); }
.status-pill.patient_balance { background: rgba(250,178,25,0.18); color: var(--status-warning); }
.status-pill.pb_first_sent { background: rgba(242,140,40,0.18); color: #f28c28; }
.status-pill.pb_second_sent { background: rgba(208,59,59,0.14); color: var(--status-critical); }
.status-pill.pb_employee { background: rgba(155,89,208,0.18); color: #a86bd6; }
/* Needs Refund Check (Matt's Aug 25 2026): DARK blue, deliberately deeper
   than Patient Refund's --status-info blue so the two read differently at
   a glance. #3450c8 holds up on both light and dark surfaces. */
.status-pill.needs_refund_check { background: rgba(38,58,155,0.18); color: #3450c8; }

.file-links { display: flex; gap: 6px; }
.file-link {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; text-decoration: none;
}
.file-link:hover { color: var(--series-1); border-color: var(--series-1); }
.file-link.disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.notes-input {
  width: 140px; border: 1px solid transparent; background: transparent; color: var(--text-primary);
  font-size: 12px; padding: 4px 6px; border-radius: 6px;
}
.notes-input:hover, .notes-input:focus { border-color: var(--border); background: var(--surface-1); }

/* The InstaMed fetch's running per-chunk log - full trail, not just the
   latest status line, so a skipped range can never hide. */
.fetch-log {
  max-height: 150px; overflow-y: auto;
  background: var(--surface-2, rgba(0,0,0,0.2));
  border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 10px; margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; white-space: pre-wrap;
  color: var(--text-secondary);
}

/* Eligibility Settings > Batch log (Matt, Oct 5 2026) - history of past
   batch runs, each expandable to its own sign-in log (same look as the
   live .fetch-log above). */
.elig-batch-history { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.elig-batch-row { border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; }
.elig-batch-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.elig-batch-when { color: var(--text-muted); white-space: nowrap; }
.elig-batch-label { font-weight: 700; }
.elig-batch-by { color: var(--text-muted); }
.elig-batch-prog { margin-left: auto; }
.elig-batch-status { color: var(--text-muted); }
.elig-batch-stopped { color: #b42318; font-weight: 600; }
.elig-batch-viewlog { margin-left: 4px; }
.elig-batch-copylog { margin-left: 4px; }
.elig-batch-history-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.elig-batch-copyall-msg { font-size: 12px; color: var(--text-muted); }
.elig-batch-log {
  max-height: 220px; overflow-y: auto;
  background: var(--surface-2, rgba(0,0,0,0.2));
  border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 10px; margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; white-space: pre-wrap;
  color: var(--text-secondary);
}

/* Invoice View's Notes button - the dot version means a note exists. */
/* Invoice View's matched payments (Nov 3 2026): a row with a matched
   payment is clickable and rolls a detail panel down under itself. */
tbody tr.has-pay { cursor: pointer; }
tbody tr.pay-open { background: var(--page-plane); }
tbody tr.pay-open td { border-bottom: none; }
.pay-toggle { white-space: nowrap; }
.pay-toggle.checked { color: #1e6b36; border-color: #b7e1c1; background: #e6f4ea; font-weight: 600; }
.pay-toggle.checked:hover { color: #1e6b36; border-color: #1e6b36; }
.pay-caret { font-size: 10px; margin-left: 2px; }
tr.pay-detail > td { padding: 0 12px 12px 46px !important; background: var(--page-plane); }
tr.pay-detail:hover { background: transparent; }
.pay-panel { display: flex; flex-direction: column; gap: 8px; }
.pay-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 6px;
}
.pay-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-payer { font-weight: 700; color: var(--text-primary); }
.pay-name { color: var(--text-secondary); }
.pay-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.pay-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.pay-badge.ok { background: #e6f4ea; color: #1e6b36; border-color: #b7e1c1; }
.pay-badge.warn { background: #f6bcbc; color: #7a1f1f; border-color: #e18787; }
.pay-badge.quiet { background: var(--gridline); color: var(--text-secondary); }
.pay-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.pay-figs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.pay-fig { white-space: nowrap; color: var(--text-primary); }
.pay-k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 5px; }
.pay-sub { color: var(--text-muted); font-size: 11px; }
.pay-summary { font-size: 12px; color: var(--text-secondary); }
.pay-foot { font-size: 11px; color: var(--text-muted); }
.pay-more { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

.notes-btn { white-space: nowrap; }
.notes-btn.has-notes { color: var(--series-1); border-color: var(--series-1); font-weight: 600; }

#notesModal textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px; border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 13px; line-height: 1.5; font-family: inherit;
  resize: vertical;
}

.muted { color: var(--text-muted); }
.btn-xs { padding: 3px 8px; font-size: 11px; }

/* Payments View's manual Mark as Posted tracker - deliberately distinct
   styling from .status-pill's colors (working/posted/etc) so the two
   "posted" concepts never look like the same thing at a glance. */
.posted-pill.posted { background: rgba(12,163,12,0.14); color: var(--status-good); }
.posted-pill.not-posted { background: var(--gridline); color: var(--text-secondary); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,11,11,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal {
  background: var(--surface-1); border-radius: 12px; padding: 26px 28px;
  width: 420px; max-width: 92vw;
  border: 1px solid var(--border);
  /* Settings grew tall enough (payer codes + folders + appearance +
     users + audit) to push its buttons off a smaller screen - scroll
     inside the modal instead. */
  max-height: 88vh; overflow-y: auto;
}
.modal h2 { margin: 0 0 6px; font-size: 17px; }
.modal-hint { margin: 0 0 16px; color: var(--text-secondary); font-size: 12px; }
.modal label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 12px;
}
.modal label select, .modal label input {
  display: block; width: 100%; margin-top: 5px;
  padding: 9px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--page-plane); color: var(--text-primary); font-size: 13px;
}
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* A modal with a "Back" action plus several forward actions (e.g. the
   InstaMed fetch modal) - Back stays pinned to the left via margin-right:
   auto, the rest cluster to the right, and everything wraps onto its own
   row if the modal isn't wide enough rather than the whole row jumbling
   together (Matt's Aug 21 2026 screenshot: 5 buttons crammed into a
   420px-wide .modal-actions with no room to breathe). */
.modal-actions-split .modal-back { margin-right: auto; }
.modal-error {
  background: rgba(208,59,59,0.1); color: var(--status-critical);
  padding: 10px 12px; border-radius: 7px; font-size: 12px; margin-bottom: 12px;
}
.modal-warnings {
  background: rgba(250,178,25,0.14); color: #a86a00;
  padding: 10px 12px; border-radius: 7px; font-size: 12px; margin-bottom: 12px;
}

.header-actions { display: flex; gap: 10px; }

.input-with-button { display: flex; gap: 8px; align-items: center; }
.input-with-button input { flex: 1; margin-top: 5px; }
.input-with-button .btn { margin-top: 5px; white-space: nowrap; flex-shrink: 0; }

.modal-wide { width: 640px; max-width: 94vw; max-height: 85vh; overflow-y: auto; }

/* Settings got its own wider size (Matt's Aug 24 2026 "make the settings
   pop up menu larger so things settle correctly") - the payer codes sit
   in a 2-up grid so the modal is roomy without being a tower. */
.modal-settings { width: 600px; max-width: 94vw; }
.settings-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }

.table-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; }
.table-scroll table { border: none; border-radius: 0; }
.table-scroll thead th { position: sticky; top: 0; }

/* The EOB popup's line-item table has 9 columns (DOS/Code/Mod/Charge/Paid/
   Patient Amt/Write-Off/Adjustments/Remarks) - wider than the other
   modal-wide tables need, so it gets its own width plus a minimum table
   width that forces the horizontal scrollbar above rather than letting
   Adjustments and Remarks get crushed illegibly. */
#eobModal .modal { width: 1200px; max-width: 96vw; max-height: 92vh; }   /* ~30% wider (Matt, Oct 23 2026) - glasses orders run long */
#eob-table { width: 100%; }
/* EOB popup (Matt, Oct 22 2026): bigger, with the posted figures up top. */
.modal-eob { max-height: 92vh; }
.modal-eob .table-scroll { max-height: calc(92vh - 300px); min-height: 200px; }
.eob-tiles { display: flex; gap: 14px; margin: 6px 0 10px; flex-wrap: wrap; }
.eob-tile { flex: 1 1 180px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--page-plane); }
.eob-tile-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.eob-tile-val { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.eob-tile.neg .eob-tile-val { color: var(--status-critical); }
.eob-match { margin: 8px 0 2px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; }
.eob-match-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eob-match table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.eob-match th, .eob-match td { padding: 3px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.eob-match td.num, .eob-match th.num { text-align: right; white-space: nowrap; }
.eob-match tr.dim td { color: var(--text-muted); }
.eob-match .eob-match-sub { font-weight: 700; margin: 8px 0 2px; }
.eob-boxes { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.eob-box { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 150px; background: var(--page-plane); }
.eob-box span { display: block; font-size: 11px; color: var(--text-secondary); }
.eob-box b { font-size: 16px; }
.eob-match td.eob-tick, .eob-match th.eob-tick { width: 44px; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.eob-match td.eob-tick input { margin: 0; vertical-align: middle; }
/* Per-line verdict glyphs in the invoice table's "Remit line" column (Oct 23 2026) */
.eob-st { display: inline-block; width: 1.1em; text-align: center; font-weight: 700; }
.eob-st-ok { color: #1a7f37; }
.eob-st-bad { color: #c62828; }
.eob-st-warn { color: #b58100; }
.eob-st-dim { color: var(--text-muted); }
.eob-match tr.dim td .eob-st-ok { color: #1a7f37; }
.eob-st-text { color: var(--text-primary); }
.eob-remit-line { white-space: normal; }
.eob-box-refund, .eob-box-owes { border-color: #c7942f; background: rgba(199, 148, 47, 0.10); }
.eob-box-owes b { color: #8a5f12; }
.eob-box-refund b { color: #8a5f12; }
.eob-match ul { margin: 4px 0 0 16px; padding: 0; color: var(--text-secondary); }
.eob-collapsed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; }
.eob-collapsed-title { font-weight: 700; }
.eob-collapsed select { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); }
.eob-small { font-size: 12px; color: var(--text-secondary); margin: 0 0 4px; }

/* Extra room for the InstaMed fetch modal's 5 footer actions - see
   .modal-actions-split above. */
#instamedModal .modal { width: 520px; }

#rec-summary, #addr-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }

/* Import Address Report: the still-missing list can run long (dozens of
   patient-balance invoices early on) - cap it so Done stays reachable. */
#addr-unmatched-wrap .table-scroll { max-height: 320px; overflow-y: auto; }
.rec-stat {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px;
}
.rec-stat b { display: block; font-size: 18px; }
.rec-stat.good { color: var(--status-good); }
.rec-stat.warn { color: #a86a00; }
.rec-stat.muted { color: var(--text-muted); }

#rec-other-details { margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
#rec-other-details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.rec-other-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--gridline); }

.staleness-list { list-style: none; margin: 0 0 16px; padding: 0; }
.staleness-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--gridline);
}
.staleness-list li:last-child { border-bottom: none; }
.staleness-name { font-weight: 600; font-size: 13px; }
.staleness-age { font-size: 12px; color: var(--text-secondary); }
.staleness-age.stale { color: #a86a00; font-weight: 600; }
.staleness-age.never { color: var(--status-critical); font-weight: 600; }

.modal-choice { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.modal-choice .btn { width: 100%; text-align: center; padding: 12px 14px; }
.modal-choice-desc { font-size: 11px; color: var(--text-muted); margin: -6px 0 4px; }

.last-payment-panel {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
  font-size: 12px; color: var(--text-secondary); margin: 0 0 14px;
}
.last-payment-panel b { color: var(--text-primary); }

.claim-type-select {
  border: 1px solid var(--border); background: var(--gridline); color: var(--text-secondary);
  border-radius: 999px; padding: 3px 7px; font-size: 11px; font-weight: 600;
  cursor: pointer; max-width: 190px;
}
.claim-type-select:hover, .claim-type-select:focus { border-color: var(--series-1); color: var(--text-primary); }

/* EOB popup styled like the Superior remittance view (Matt's Sep 2026
   request) - clean rows, right-aligned money, red negatives, muted
   adjustments, a bold Claim-totals row. */
#eob-table td, #eob-table th { font-size: 13px; padding: 5px 8px; vertical-align: top; }
#eob-table th { color: var(--text-secondary); font-weight: 600; }
#eob-table td.num, #eob-table th.num { text-align: right; white-space: nowrap; }
#eob-table td.num.neg { color: var(--status-critical); }
#eob-table td.eob-adj { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
#eob-table td.eob-adj span[title] { cursor: help; }
#eob-table tbody tr.eob-negative td { background: rgba(250,178,25,0.14); }
/* Totals pinned to the bottom of the scroll panel - stays visible while the
   line rows scroll (Matt's Sep 2026 request). Needs an opaque background so
   scrolled rows don't show through, same idea as the sticky header. */
#eob-table tfoot tr.eob-tot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-1);
  font-weight: 700; border-top: 2px solid var(--border);
}

#gen-links.file-links { margin-top: 4px; }
#gen-links .file-link { padding: 6px 12px; font-size: 12px; }
.gen-warn {
  background: #fef3d6; border: 1px solid #e2b23c; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; color: #6b4e00; font-size: 13px;
}
/* the green version: a payment that's already posted on its invoice -
   nothing to do (Matt, Nov 3 2026) */
.gen-ok {
  background: #e6f4ea; border: 1px solid #b7e1c1; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; color: #1e6b36; font-size: 13px;
}
.eob-box-now { border-color: #b7e1c1; background: #e6f4ea; }
/* an information banner (a Medicare-shaped Superior claim) */
.gen-info {
  background: #e8f0fb; border: 1px solid #a9c4ec; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; color: #1e3f73; font-size: 13px;
}
.eob-box-now b { color: #1e6b36; }

/* ------------------------------------------------------------------ */
/* Recent Files side panel                                             */
/* ------------------------------------------------------------------ */

.app-layout { display: flex; align-items: flex-start; gap: 0; }
.main-content { flex: 1; min-width: 0; }

.files-modal { width: min(560px, 92vw); max-height: 85vh; display: flex; flex-direction: column; }
.files-modal .files-panel-list { max-height: 60vh; }

.files-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.files-panel-header h2 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.files-panel-clear { flex-shrink: 0; }

/* Remits View toolbar - same look as the other views' filter bars
   (Matt's Aug 25 2026 request): identical padding/radius/border on the
   date and search inputs. */
.remits-toolbar { display: flex; gap: 10px; padding: 12px; align-items: center; flex-wrap: wrap; }
.remits-toolbar input[type=search] {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-size: 13px;
  flex: 1; min-width: 220px; max-width: 340px;
}
.remits-toolbar .date-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); white-space: nowrap;
}
.remits-toolbar .date-filter input[type=date] {
  padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-size: 13px;
}
.remits-tiles { padding-bottom: 4px; }
.remit-file-sub { font-size: 11.5px; color: var(--text-secondary); }
/* Prominent remit-date column (Matt's Sep 2026 request) - the date is the
   row's identity now that the filename subtext is gone. */
.remit-date-main { font-weight: 600; font-size: 14px; }
/* "Invoices last updated ..." line under the Invoice View tiles. */
.invoice-updated-msg { padding: 0 12px 8px; font-size: 12.5px; color: var(--text-secondary); }
.invoice-updated-msg.stale { color: var(--status-warning, #b07708); font-weight: 600; }
.invoice-updated-msg:empty { display: none; }

/* One-time agent token reveal in Settings */
.agent-token-reveal { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; }
.agent-token-reveal code { word-break: break-all; }

/* Live remote-browser view inside the fetch modals */
.remote-view { margin: 10px 0; }
.remote-view-wrap {
  overflow: auto; max-height: 72vh;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.remote-view-img {
  display: block; width: 100%;
  cursor: pointer; outline: none;
}
.remote-view-wrap:focus-within { box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.35); }
.remote-zoom { float: right; display: inline-flex; gap: 6px; align-items: center; }

/* Portal Logins vault rows in Settings */
.portal-cred { margin: 8px 0 12px; }
.portal-cred-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.portal-cred-status { color: var(--text-secondary); font-size: 12px; }
.portal-cred .input-with-button input { min-width: 0; }
.remote-zoom-label { font-size: 12px; color: var(--text-secondary); min-width: 38px; text-align: center; }
/* When the live portal view is up, the modal goes MEDIUM (Matt's Aug 25
   2026, after Fill Login made hand-typing rare: "we can make the window
   medium size LOL"). Zoom buttons still enlarge the view when a human
   does need to read/click something. The width is ALSO set inline by
   the viewer JS, so a cached stylesheet can't fight it. */
.modal.remote-wide { width: 1000px; max-width: 94vw; max-height: 94vh; }
.modal.remote-wide .remote-view-wrap { max-height: 62vh; }
.files-panel-toggle {
  border: 1px solid var(--border); background: var(--page-plane); color: var(--text-secondary);
  border-radius: 6px; width: 24px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer;
  flex-shrink: 0;
}
.files-panel-toggle:hover { color: var(--series-1); border-color: var(--series-1); }

.files-panel-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }

.files-panel-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }

.file-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: var(--page-plane);
}
.file-card-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
  color: var(--text-muted); margin-bottom: 2px;
}
.file-card-label { font-size: 12px; font-weight: 600; margin-bottom: 2px; word-break: break-word; }
.file-card-time { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
.file-card-actions { display: flex; gap: 6px; }
.file-card-actions .file-link { flex: 1; text-align: center; }
.file-card.missing { opacity: 0.5; }
.file-card.missing .file-card-label::after { content: " (moved or deleted)"; font-weight: 400; color: var(--status-critical); }

.file-card-actions .file-link.copied { color: var(--status-good); border-color: var(--status-good); }

/* Merge Payments (Matt's Aug 23 2026 request) - small pill next to the
   patient name on a row that combines several payment events into one
   merged EOB/835. Purely informational; Unmerge lives in the bulk bar. */
.merged-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--series-1); border: 1px solid var(--series-1); background: transparent;
  vertical-align: 1px;
}

/* =====================================================================
   Insurance multi-select filter (Matt's Aug 23 2026 request) - a button
   that opens a checkbox menu, so several insurances filter at once.
   ===================================================================== */
.multi-filter { position: relative; }
.multi-filter-btn {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.multi-filter-btn.filter-active { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1); }
.multi-filter-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(11,11,11,0.18);
  display: flex; flex-direction: column; gap: 2px;
}
.multi-filter-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
  user-select: none;
}
.multi-filter-item:hover { background: var(--page-plane); }
.multi-filter-clear {
  margin-top: 4px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--page-plane);
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
}
.multi-filter-clear:hover { color: var(--text-primary); }

/* =====================================================================
   Payments View color coding (Matt's Aug 23 2026 scheme):
   Posted green, Unposted white, then per-Claim-Type pastels -
   1 Exams light green / 2 CL light yellow / 3 Glasses & CBs light blue /
   4 Complex orange / 5 Action Needed red. Shared by the tiles and each
   row's Claim Type dropdown. Fixed light backgrounds with dark text in
   both themes, so a category is the same color everywhere.
   ===================================================================== */
/* Payments tiles restyled to match the Invoice View look (Matt's Aug 24
   2026 request): the NUMBER carries the category color, the tile itself
   stays neutral. Shades picked dark enough to read on the light plane
   (and they read fine on dark surfaces too). */
.tile.cat-posted   .tile-value { color: #1e9e50; }
.tile.cat-unposted .tile-value { color: var(--text-primary); }
.tile.cat-exams    .tile-value { color: #3cab63; }
.tile.cat-cl       .tile-value { color: #c99a06; }
.tile.cat-cb       .tile-value { color: #3f7fd6; }
.tile.cat-complex  .tile-value { color: #ef8c1f; }
.tile.cat-action   .tile-value { color: #d9534f; }

/* Row-level: the Claim Type dropdown wears its category's tint. */
select.claim-type-select.cat-exams   { background: #ddf3dd; color: #0b0b0b; border-color: #a4d8a4; }
select.claim-type-select.cat-cl      { background: #fdf3c4; color: #0b0b0b; border-color: #e4d288; }
select.claim-type-select.cat-cb      { background: #d8e9fa; color: #0b0b0b; border-color: #a3c6ec; }
select.claim-type-select.cat-complex { background: #fbd6a4; color: #0b0b0b; border-color: #eba95a; }
select.claim-type-select.cat-action  { background: #f6bcbc; color: #0b0b0b; border-color: #e18787; }

/* Posted pill stays green; Not Posted goes white (Matt's color key). */
.posted-pill.not-posted { background: #ffffff; color: #52514e; border: 1px solid #c9c8c0; }

.modal-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* =====================================================================
   Auth gate (multi-user deployment, Matt's Aug 24 2026 request) - the
   full-screen login/setup/2FA screens, the user chip, and the Settings
   modal's user-management + audit sections.
   ===================================================================== */
.auth-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--page-plane);
  display: flex; align-items: center; justify-content: center;
}
.auth-card {
  width: 380px; max-width: 92vw;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 30px;
  box-shadow: 0 12px 40px rgba(11,11,11,0.15);
}
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-card h2 { margin: 10px 0 4px; font-size: 15px; }
.auth-card label { display: block; font-size: 12px; color: var(--text-secondary); margin: 10px 0 2px; }
.auth-card input[type=text], .auth-card input[type=password] {
  width: 100%; padding: 9px 10px; margin-top: 3px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--page-plane); color: var(--text-primary); font-size: 14px;
}
.auth-card .btn { width: 100%; margin-top: 14px; }
.auth-message { min-height: 18px; color: var(--status-critical); font-size: 12px; margin: 4px 0 0; }
.auth-remember { display: flex !important; align-items: center; gap: 7px; font-size: 12px !important; }
.auth-remember input { width: auto !important; margin: 0 !important; }
.auth-qr { display: flex; justify-content: center; margin: 10px 0; }
.auth-qr svg { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
#auth-secret { font-size: 11px; word-break: break-all; }

.user-chip { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 0 4px; }

.users-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
}
.user-row > span:last-child { display: flex; gap: 6px; flex-shrink: 0; }
.audit-list {
  max-height: 220px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 7px; padding: 8px; font-size: 11px; margin-top: 6px;
}
.audit-row { padding: 2px 0; border-bottom: 1px solid var(--gridline); }
.audit-row:last-child { border-bottom: none; }
.audit-ts { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* A/R aging row (Invoice View) - slightly more compact than the status
   tiles above it, dollars as the headline like a real aging report. */
.aging-tiles { padding-top: 0; }
.aging-tiles .tile { padding: 10px 16px; min-width: 150px; }
.elig-unreadable { margin: 6px 0 4px; padding: 8px 12px; border: 1px solid var(--status-warning); border-radius: 8px; background: #fff8e6; font-size: 13px; }
.elig-unreadable h4 { margin: 0 0 4px; font-size: 13px; }
.elig-unreadable ul { margin: 0; padding-left: 18px; }
.elig-unreadable .dismiss { float: right; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-muted); }
.elig-tiles { display: block; padding: 4px 0 10px; }
.elig-tile-row { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(5, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.elig-tiles .tile { padding: 8px 12px; min-width: 0; }
.elig-tiles .tile-head { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elig-tiles .tile-value { font-size: 22px; }
.elig-tiles .tile-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.elig-tiles .tile-sub .ok { color: var(--status-good); font-weight: 600; }
.elig-tiles .tile-sub .bad { color: var(--status-critical); font-weight: 600; }
.elig-tiles .tile-sub .warn { color: var(--status-warning, #b36b00); font-weight: 600; }
.elig-tiles .tile-sub .muted { color: var(--text-muted); }
@media (max-width: 1100px) { .elig-tile-row { grid-template-columns: repeat(3, minmax(120px, 1fr)); } }
.aging-tiles .tile-value { font-size: 20px; }
/* A/R report download button sits at the far right of the aging row. */
.ar-report-btn { margin-left: auto; align-self: center; white-space: nowrap; }

/* "Review deposit info" pill on Remits View rows (Matt's Aug 25 2026):
   set at import when the file's own math didn't reconcile. */
.remit-flag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: rgba(250,178,25,0.18); color: var(--status-warning);
}
.remit-posted-btn.posted-pill { cursor: pointer; border: none; }

/* Remits bulk bar (Matt's Aug 27 2026 request): shown while any remit
   row is checked. */
.remits-bulk { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
#remitsBulkCount { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Refile-reroute NEW pill (Matt's Aug 27 2026 request): a fetched
   payment auto-flagged Action Needed by patient-name match. */
.new-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: #2ea05a; color: #fff; cursor: pointer; vertical-align: 1px;
}
.new-pill:hover { background: #257f48; }

/* Standalone Action Needed flag toggle (Matt's Sep 24 2026 request) -
   sits next to the Claim Type dropdown. "on" reuses the old 5th
   category's red (cat-action); "off" is a plain small outline button so
   an unflagged row doesn't draw the eye. */
.ok-pill { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #e6f4ea; color: #1e6b36; border: 1px solid #b7e1c1; }
#eob-ok.btn-ok-on { background: #e6f4ea; color: #1e6b36; border-color: #b7e1c1; }
.action-flag-pill {
  display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; vertical-align: middle;
}
.action-flag-pill.on { background: #f6bcbc; color: #7a1f1f; border-color: #e18787; }
.action-flag-pill.on:hover { background: #f2a5a5; }
.action-flag-pill.off {
  background: transparent; color: var(--text-muted); border-color: var(--border);
}
.action-flag-pill.off:hover { border-color: var(--text-muted); color: var(--text-secondary); }
.action-flag-pill:disabled { opacity: 0.6; cursor: default; }

/* Nightly auto-fetch (Matt's Aug 26 2026 request): the health pill in
   the Payments View "last payment received" line, and the status lines
   under each Settings toggle. */
.af-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: rgba(120,130,150,0.15); color: var(--muted, #667);
}
.af-pill.af-ok { background: rgba(46,160,90,0.15); color: var(--status-good, #2ea05a); }
.af-pill.af-bad { background: rgba(250,178,25,0.20); color: var(--status-warning, #b07708); cursor: help; }
.af-status { display: block; font-size: 12px; color: var(--muted, #667); margin: 2px 0 0 2px; }
.af-status.af-ok { color: var(--status-good, #2ea05a); }
.af-status.af-bad { color: var(--status-warning, #b07708); cursor: help; }
.autofetch-row .auth-remember { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Eligibility view (manual insurance checks) ------------------- */
.elig-toolbar-hint { color: var(--text-secondary); font-size: 12px; }
/* Run Eligibility Check scope picker (Matt, Oct 7 2026). */
.elig-scope-choices { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; font-size: 14px; }
.elig-scope-choices label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.elig-scope-choices input[type=date] { padding: 4px 6px; font-size: 13px; }
.elig-scope-choices .muted { font-size: 12px; }
.elig-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 4px 0 10px; }
.elig-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.elig-form input { padding: 8px 10px; font-size: 14px; }
.elig-holder { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 4px; margin: 2px 0 10px; }
.elig-holder legend { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 0 6px; }
.elig-holder-choice { display: flex; gap: 18px; margin-bottom: 4px; }
.elig-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.elig-radio input { margin: 0; }
.elig-radio .muted { font-size: 11px; }
#elig-holder-fields { margin-top: 8px; }
#elig-holder-fields .modal-hint { grid-column: 1 / -1; margin: 0 0 4px; }
.elig-payers-label { margin: 12px 0 6px; }
.elig-payers { display: flex; flex-wrap: wrap; gap: 10px; }
.elig-payers .btn { flex: 1 1 auto; min-width: 120px; }
.elig-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.elig-pending { background: var(--warn-bg, #fff4e5); color: var(--warn-text, #915907); }
.elig-done { background: var(--ok-bg, #e6f4ea); color: var(--ok-text, #1a7f37); }
.elig-checked { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.elig-form select { padding: 8px 10px; font-size: 14px; }
.elig-fetching { background: #e5efff; color: #1257a6; }
.elig-error { background: #fde8e8; color: #b42318; }
.elig-actions { white-space: nowrap; text-align: right; }
.elig-actions .btn { margin-left: 4px; }
.elig-fetch-status { color: var(--text-secondary); font-size: 12px; min-height: 16px; margin: 6px 0; }
.elig-search { padding: 6px 10px; font-size: 13px; min-width: 240px; }
.elig-check-col { width: 34px; text-align: center; }

/* ---- 4-column payer grid cells (EyeMed / VSP / Superior / Spectera) ---- */
.elig-payer-col { text-align: center; }
/* Per-column Fetch button (Matt, Oct 5 2026: "each column has its own fetch
   button") - sits right under the payer label in the header cell. */
.elig-col-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.elig-col-fetch { white-space: nowrap; }
.elig-cell { text-align: center; font-size: 12px; white-space: nowrap; }
.elig-cell-yes { background: var(--ok-bg, #e6f4ea); }
.elig-cell-yes .elig-pdf {
  color: var(--ok-text, #1a7f37); font-weight: 700; text-decoration: none;
}
.elig-cell-yes .elig-pdf:hover { text-decoration: underline; }
/* Per-service badges above the PDF link (Matt, Oct 2026): E ✓ CLE ✓ L ✓
   CL ✓ F ✗ - green for available, red for not (tooltip has the date). */
.elig-svc { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; margin-bottom: 2px; }
.elig-svc-badge {
  display: inline-block; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 700;
  line-height: 16px; letter-spacing: .2px; white-space: nowrap;
}
.elig-svc-yes { background: #cde9d5; color: #1a7f37; }
.elig-svc-no { background: #f8d2d2; color: #b42318; }
.elig-cell-yes .elig-svc + .elig-pdf { font-weight: 600; font-size: 11px; }
.elig-cell-no { background: #fde8e8; color: #b42318; font-weight: 700; font-size: 15px; }
.elig-cell-notelig { background: #fef3d6; color: #92500a; font-weight: 700; font-size: 12px; }
.elig-cell-fetching { color: #1257a6; }
.elig-cell-queued { color: #6b5b00; background: #fff8dc; font-style: italic; }
.elig-cell-err { color: #b42318; font-weight: 600; cursor: help; }
/* Yellow "connection lost" banner - a payer's portal needs a manual sign-in;
   fetch-all skips it until then (mirrors the remit auto-fetch failure look). */
.elig-conn-banner {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 9px 13px;
  background: rgba(250,178,25,0.15);
  border: 1px solid #e2b23c; border-radius: 8px;
  color: #92500a; font-size: 13px; line-height: 1.4;
}
.elig-conn-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--status-warning, #fab219);
  box-shadow: 0 0 0 3px rgba(250,178,25,0.25);
}
/* Schedule-upload note under a patient's name (e.g. "under father's insurance"),
   and the toolbar upload status message. */
.elig-note {
  margin-top: 2px; font-size: 12px; color: var(--text-muted);
  max-width: 320px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: help;
}
.elig-upload-msg { font-size: 13px; color: var(--text-muted); align-self: center; }
.elig-pull { display: inline-flex; align-items: center; gap: 6px; }
.elig-pull-to { font-size: 12px; color: var(--text-muted); }
.elig-upload-msg.err { color: #b42318; }
.elig-acct {
  font-size: 11px; color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; cursor: help; white-space: nowrap;
}
/* Date-of-service filter bar (All / Day / Week) above the eligibility grid. */
.elig-datebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 12px 10px; }
.elig-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.elig-mode-btn {
  border: none; border-right: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  padding: 6px 13px; font-size: 13px; cursor: pointer;
}
.elig-mode-btn:last-child { border-right: none; }
.elig-mode-btn.active { background: var(--series-1); color: #fff; font-weight: 600; }
.elig-date-input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--surface-1); color: var(--text-primary);
}
.elig-nav { min-width: 32px; text-align: center; }
.elig-range-label { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.elig-cell-pending, .elig-cell-soon, .elig-cell-none { color: var(--text-muted); }
/* Per-cell re-check ↻ (finished cells) and the error "! retry" link. */
.elig-recheck {
  border: none; background: none; cursor: pointer; padding: 0 4px;
  color: var(--text-muted); font-size: 18px; line-height: 1; vertical-align: middle;
}
.elig-recheck:hover { color: var(--text-primary, #111); }
.elig-cell-link {
  border: none; background: none; cursor: pointer; padding: 0;
  color: #b42318; font-weight: 600; font-size: 12px;
}
.elig-cell-link:hover { text-decoration: underline; }
/* "Call patient" flag + row emphasis when a patient is a member nowhere. */
.elig-call {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #fde8e8; color: #b42318; font-size: 10px; font-weight: 700;
  vertical-align: middle; text-transform: uppercase; letter-spacing: .02em;
}
.elig-row-call > td:first-child { box-shadow: inset 3px 0 0 #b42318; }
.elig-row-busy { opacity: .92; }
/* Insurance confirmed (Matt, Oct 6 2026): the tick column, the green row,
   and the one cell that replaces the payer columns once ticked. */
.elig-confirm-col { text-align: center; width: 64px; }
.elig-confirm-col input { width: 16px; height: 16px; accent-color: #1f6b3a; cursor: pointer; }
th.elig-confirm-col { cursor: pointer; user-select: none; }
.elig-confirm-selfpay { display: block; margin: 2px auto 0; padding: 0; border: 0; background: none; color: #1f6b3a; font-size: 10px; cursor: pointer; text-decoration: underline dotted; }
.elig-confirm-selfpay:hover { text-decoration: underline; }
.elig-row-confirmed > td { background: #f1faf3; }
.elig-row-confirmed > td:first-child { box-shadow: inset 3px 0 0 #1f6b3a; }
.elig-cell-confirmed { background: #e6f4ea !important; text-align: left; vertical-align: middle; }
.elig-confirmed-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 1px 0; }
.elig-confirmed-line + .elig-confirmed-line { border-top: 1px dashed #b7dfc3; }
.elig-confirmed-payer { font-weight: 700; color: #1f6b3a; min-width: 58px; font-size: 11.5px; }
.elig-confirmed-line .elig-svc { margin: 0; }
.elig-confirmed-line .elig-pdf { color: #1f6b3a; font-weight: 600; font-size: 11px; }
.elig-confirmed-line .elig-pdf:hover { text-decoration: underline; }
/* A day whose every patient is confirmed - the tile goes green */
.elig-tiles .tile.tile-ready { background: #f1faf3; border-color: #b7dfc3; }
/* Cancelled / moved appointment the pull FLAGGED instead of deleting (only
   when too many vanished at once - the partial-read circuit breaker; a
   normal cancel/reschedule is deleted outright, Matt, Oct 2026) - greyed,
   with the reason in red under the appointment type. */
.elig-row-dead > td { opacity: .55; }
.elig-row-dead > td:first-child { box-shadow: inset 3px 0 0 #9ca3af; text-decoration: line-through; }
.elig-row-dead .elig-appt-sub { color: #b42318; font-weight: 600; opacity: 1; }

/* =====================================================================
   Clinic Schedule (Doctor Coverage) - Matt's Sep 2026 view, restyled to
   the app. Per-doctor accent colors; everything else uses app tokens.
   ===================================================================== */
:root {
  --dr-marshall: #2a78d6;
  --dr-hixson:   #b0791a;
  --dr-chism:    #7a4fa0;
  --dr-douglas:  #c0506a;
}
:root[data-theme="dark"],
:root:where(:not([data-theme="light"])) {
  --dr-marshall: #5aa0ec;
  --dr-hixson:   #d6a24a;
  --dr-chism:    #b085d6;
  --dr-douglas:  #e08497;
}
.dr-marshall { color: var(--dr-marshall); }
.dr-hixson { color: var(--dr-hixson); }
.dr-chism { color: var(--dr-chism); }
.dr-douglas { color: var(--dr-douglas); }

#clinicSection { padding: 4px 28px 40px; }
.clinic-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.clinic-monthnav { display: flex; align-items: center; gap: 10px; }
.clinic-monthnav h2 { margin: 0; font-size: 18px; font-weight: 700; min-width: 9ch; }
.clinic-standard { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin: 8px 0 14px; max-width: 90ch; }
.clinic-standard b { font-weight: 700; }

.clinic-capacity-panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.clinic-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); max-width: 70ch; }
.clinic-capacity-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.clinic-cap-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; }
.clinic-cap-field input { width: 80px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--page-plane); color: var(--text-primary); font: inherit; font-weight: 700; }

.clinic-summary { padding: 0 0 6px; }
.clinic-stat { min-width: 150px; }
.clinic-stat.accent { border-left: 3px solid var(--series-1); }
.clinic-sub { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }
.clinic-drcard { min-width: 190px; border-top: 3px solid var(--dr-x, var(--border)); display: flex; flex-direction: column; gap: 3px; }
.clinic-drcard.dr-marshall { --dr-x: var(--dr-marshall); }
.clinic-drcard.dr-hixson { --dr-x: var(--dr-hixson); }
.clinic-drcard.dr-chism { --dr-x: var(--dr-chism); }
.clinic-drcard.dr-douglas { --dr-x: var(--dr-douglas); }
.clinic-drname { font-size: 13px; font-weight: 700; color: var(--dr-x); margin-bottom: 3px; }
.clinic-drrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-secondary); }
.clinic-drrow b { font-weight: 700; color: var(--text-primary); }
.clinic-drrow.sub { font-size: 11px; color: var(--text-muted); }
.clinic-drrow.sub b { color: var(--text-secondary); font-weight: 600; }

.clinic-legend { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 14px; max-width: 100ch; }

.clinic-weekhead, .clinic-grid { display: grid; grid-template-columns: 1.15fr repeat(5, 1fr); gap: 6px; }
.clinic-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clinic-lock-info { font-size: 11px; color: var(--text-muted); }
.clinic-fill { align-self: flex-end; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); text-align: right; line-height: 1.2; white-space: nowrap; }
.clinic-fill .pct { font-size: 12px; }
.clinic-fill.empty { color: var(--text-muted); font-weight: 600; }
.clinic-fill.hot .pct { color: var(--status-good); }
.clinic-fill.low .pct { color: var(--status-critical); }
.clinic-cell .clinic-chips { margin-bottom: 0; }
.clinic-full-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 8px; background: #dbeafe; color: #1e40af; margin-left: 4px; vertical-align: middle; }
.clinic-full-badge.live { background: #fef3c7; color: #92400e; }
.clinic-full-wk { text-align: center; font-size: 10px; color: var(--text-muted); }
.clinic-weekhead { margin-bottom: 6px; }
.clinic-weekhead div { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.clinic-weekhead .clinic-fullhead { color: var(--series-1); }

.clinic-cell { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-height: 92px; display: flex; flex-direction: column; gap: 6px; }
.clinic-cell.out { background: transparent; border-color: transparent; }
.clinic-cell.today { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1) inset; }
.clinic-cell.touched { box-shadow: 0 0 0 1px var(--baseline) inset; }
.clinic-cell.touched.today { box-shadow: 0 0 0 1px var(--series-1) inset; }
.clinic-cell.closed { background: var(--page-plane); border-left: 3px solid var(--text-muted); }
.clinic-daynum { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.clinic-cell.today .clinic-daynum { color: var(--series-1); }
.clinic-cell.closed .clinic-daynum { opacity: .55; }
.clinic-closed { margin-top: auto; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 0; }

.clinic-daytoggle { position: absolute; top: 4px; right: 4px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; background: var(--page-plane); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: .35; transition: opacity .12s; }
.clinic-cell.touched .clinic-daytoggle { opacity: 1; }
.clinic-daytoggle:hover { opacity: 1; border-color: var(--series-1); color: var(--series-1); }
.clinic-daytoggle[data-daystate="closed"] { opacity: 1; background: var(--text-muted); border-color: var(--text-muted); color: var(--surface-1); }
.clinic-bonus { position: absolute; top: 4px; right: 25px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; background: var(--page-plane); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: .35; transition: opacity .12s; }
.clinic-bonus:hover { opacity: 1; border-color: var(--status-warning); color: var(--status-warning); }
.clinic-bonus[data-on="true"] { opacity: 1; background: var(--status-warning); border-color: var(--status-warning); color: #fff; }

.clinic-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: auto; }
.clinic-chip { --dr-x: var(--text-muted); border: 1.5px solid var(--dr-x); border-radius: 6px; background: transparent; color: var(--dr-x); font-size: 11px; font-weight: 800; line-height: 1; height: 21px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.clinic-chip.dr-marshall { --dr-x: var(--dr-marshall); }
.clinic-chip.dr-hixson { --dr-x: var(--dr-hixson); }
.clinic-chip.dr-chism { --dr-x: var(--dr-chism); }
.clinic-chip.dr-douglas { --dr-x: var(--dr-douglas); }
.clinic-chip[data-state="full"] { background: var(--dr-x); color: #fff; }
.clinic-chip[data-state="half"] { background: var(--dr-x); color: #fff; opacity: .55; }
.clinic-chip[data-state="off"] { background: transparent; color: var(--dr-x); opacity: .7; }

.clinic-cell.fullness { background: var(--page-plane); }
.clinic-full-lbl { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 700; }
.clinic-full-input { width: 100%; text-align: center; font: inherit; font-weight: 700; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 3px 2px; }
.clinic-full-pct { text-align: center; font-size: 15px; font-weight: 800; margin-top: auto; }
.clinic-full-pct.empty { color: var(--text-muted); }
.clinic-full-sub { text-align: center; font-size: 10px; color: var(--text-muted); }

@media (max-width: 560px) {
  #clinicSection { padding: 4px 12px 32px; }
  .clinic-cell { min-height: 78px; padding: 5px; }
  .clinic-chip { height: 19px; font-size: 10px; }
  .clinic-weekhead div { font-size: 9.5px; }
}

/* Weekend cells are closed by default (Matt's Sep 2026) - styled quieter than
   an explicit holiday/weather closure, and their corner toggle opens the day
   for a one-off Saturday clinic. */
.clinic-cell.weekend { background: var(--page-plane); border-left: 1px solid var(--border); }
.clinic-cell.weekend .clinic-closed { color: var(--text-muted); opacity: .65; font-weight: 600; }
.clinic-daytoggle[data-daystate="weekend-closed"] { opacity: .4; font-weight: 700; }
.clinic-daytoggle[data-daystate="weekend-closed"]:hover { opacity: 1; border-color: var(--series-1); color: var(--series-1); }

/* =====================================================================
   Clinic Metrics (Practice Pulse) - Matt's Sep 2026 KPI dashboard folded
   into the app. Card grid with sparklines + delta vs trailing 6-mo avg.
   Uses app tokens throughout; up=good green, down=warning amber, flat=muted.
   ===================================================================== */
#metricsSection { padding: 4px 28px 40px; }
.metrics-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.metrics-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.metrics-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; max-width: 78ch; }
.metrics-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metrics-uploadmsg { margin: 6px 0 0; font-size: 12.5px; color: var(--status-good); font-weight: 600; }
.metrics-uploadmsg.err { color: var(--status-critical); }

.metrics-controls { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.metrics-ctrlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metrics-ctrllabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.metrics-ctrlnone { font-size: 12.5px; color: var(--text-muted); }
.metrics-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.metrics-seg-btn {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 13px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.metrics-seg-btn.small { padding: 6px 11px; font-size: 12.5px; }
.metrics-seg-btn:hover { border-color: var(--series-1); color: var(--text-primary); }
.metrics-seg-btn.active { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.metrics-note {
  font-size: 12.5px; color: var(--text-secondary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 13px; line-height: 1.5; max-width: 80ch;
}

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 13px; margin-top: 16px; }
.metrics-empty { grid-column: 1 / -1; }
.mcard {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 9px; min-width: 0;
}
.mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mcard-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-secondary); }
.mcard-sub { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
.mcard-badge {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, transparent);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.mcard-value { display: flex; align-items: baseline; gap: 6px; }
.mcard-num { font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
.mcard-unit { font-size: 12px; color: var(--text-muted); }
.mcard-delta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mcard-delta .marrow { font-size: 10px; }
.mcard-delta.up { color: var(--status-good); }
.mcard-delta.down { color: var(--status-warning); }
.mcard-delta.flat { color: var(--text-muted); }
.mcard-delta .mvs { font-weight: 400; color: var(--text-muted); }
.mcard-avg { font-size: 11.5px; color: var(--text-muted); margin-top: -3px; }
.mcard-spark { margin-top: 2px; }
.mspark { width: 100%; height: 34px; display: block; }
.mspark-line { stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mspark-line.up { stroke: var(--status-good); }
.mspark-line.down { stroke: var(--status-warning); }
.mspark-line.flat { stroke: var(--text-muted); }
.mspark-avgline { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 2 2; }
.mspark-dot.up { fill: var(--status-good); }
.mspark-dot.down { fill: var(--status-warning); }
.mspark-dot.flat { fill: var(--text-muted); }
.mspark-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.metrics-footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.metrics-footer b { color: var(--text-secondary); font-weight: 600; }

@media (max-width: 560px) {
  #metricsSection { padding: 4px 12px 32px; }
  .metrics-num { font-size: 22px; }
}

/* Posting Audit modal (Matt's Sep 2026): per-remit-date share of payments
   that look posted vs still open on the invoice sheet. Low % = payments
   that were probably never posted into Crystal - the ones to chase. */
.posting-audit-controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 10px;
}
.posting-audit-payer {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}
.posting-audit-payer select {
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); font-size: 13px;
}
.posting-audit-summary { font-size: 12px; }
.posting-audit-table { width: 100%; }
.posting-audit-table td.num, .posting-audit-table th.num { text-align: right; }
.audit-pct {
  display: inline-block; min-width: 46px; text-align: center;
  padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: 12px;
}
.audit-pct.audit-good { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 14%, transparent); }
.audit-pct.audit-warn { color: var(--status-warning); background: color-mix(in srgb, var(--status-warning) 16%, transparent); }
.audit-pct.audit-bad { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 16%, transparent); }

/* Row counter in the claims filter bar (Matt's Sep 2026 request): "37 invoices"
   for whatever the current filters show. */
.claims-row-count {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; padding: 0 4px;
}

/* Calendar-period tile row under the aging row in Invoice View (Matt's Sep
   2026 request): seven fixed spans, slightly tighter than the aging tiles so
   they fit on one line at normal widths and wrap cleanly when they don't. */
.period-tiles { flex-wrap: wrap; }
.period-tiles .tile { min-width: 132px; }

/* Crystal PM API block in Settings (Matt's Sep 2026): test/preview buttons,
   a status line, and a scrollable payload sample for learning report shapes. */
.crystal-actions { flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.crystal-status { min-height: 1.2em; word-break: break-word; }
.crystal-status.crystal-bad { color: var(--status-critical); }
.crystal-preview {
  max-height: 320px; overflow: auto; margin: 6px 0 0;
  padding: 10px 12px; border-radius: 6px; font-size: 11.5px; line-height: 1.4;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.crystal-patient-input { width: 120px; }
/* Invoice View "last updated" line doubles as the Crystal sync progress line. */
.invoice-updated-msg.syncing { color: var(--series-1); font-weight: 600; }
/* Sync from Crystal modal (simplified Oct 2 2026: one-step Sync now, a
   plain progress bar while it runs, Advanced/Nightly schedule tucked
   behind disclosures instead of always-on developer detail). */
.crystal-sync-progress { width: 100%; height: 8px; margin: 4px 0 10px; accent-color: var(--series-1); }
.crystal-sync-scroll { max-height: 46vh; }
tr.cs-remove td { color: var(--text-muted); }
/* Trace patient (Settings): per-invoice line detail vs Crystal's figures. */
.crystal-trace { margin-top: 8px; max-height: 60vh; overflow: auto; font-size: 12px; }
.trace-recon { padding: 8px 10px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--border); margin-bottom: 8px; line-height: 1.5; }
.trace-recon.trace-good { border-color: var(--status-good); }
.trace-recon.trace-bad { border-color: var(--status-critical); }
.trace-inv { margin: 8px 0; }
.trace-inv-head { padding: 4px 0; }
.trace-sub { color: var(--text-secondary); font-size: 11px; }
.trace-table { width: 100%; font-size: 11px; }
.trace-table td.num, .trace-table th.num { text-align: right; white-space: nowrap; }
tr.trace-payment td { color: var(--series-1); }
.trace-raw pre { font-size: 11px; max-height: 240px; overflow: auto; }
/* Crystal API modal (Matt's Sep 17 2026): two logins + environment picker. */
.crystal-h3 { font-size: 13px; margin: 14px 0 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.crystal-env { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; }
.crystal-env-label { color: var(--text-secondary); }
.crystal-env-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.crystal-env-sub { color: var(--text-muted); font-size: 11px; }
.crystal-env-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--gridline); color: var(--text-secondary); }
.crystal-env-badge.crystal-env-real { background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }

/* Crystal trace: voided lines are shown but excluded from every balance */
.trace-table tr.trace-void td { color: #b42318; text-decoration: line-through; opacity: .8; }
.trace-table tr.trace-void td b { text-decoration: none; }
.trace-tag { font-size: 10px; background: #e6f4ea; color: #1e7b34; border-radius: 3px; padding: 0 4px; margin-left: 4px; text-decoration: none; }
.crystal-probe-input { min-width: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.cs-bad { color: #b42318; }
.cs-mismatch { margin: 6px 0 10px; }
.cs-mismatch summary { cursor: pointer; font-weight: 600; color: #b42318; }
.crystal-verify { margin: 8px 0; }
.crystal-verify summary { cursor: pointer; font-weight: 600; }
.crystal-verify h4 { margin: 10px 0 4px; font-size: 13px; }
.crystal-nightly-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0; }
.crystal-nightly-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.crystal-nightly-row select { padding: 3px 6px; font-size: 13px; }
.crystal-nightly-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #eee; color: #666; vertical-align: middle; }
.crystal-nightly-badge.on { background: #dcfce7; color: #166534; }
.trace-table tr.cs-bad-row td { background: #fff1f0; }

/* TriZetto batch settings (Settings, admins) */
.tz-batch label { display: flex; flex-direction: column; font-size: 12px; gap: 3px; }
.tz-payers-label { display: block; font-size: 12px; margin: 8px 0 6px; }
.tz-payers-label textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: inherit; }
.tz-payer-list { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; margin-top: 6px; font-size: 12px; background: var(--surface-1); }
.tz-payer-list label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.tz-payer-list .tz-id { font-family: ui-monospace, Menlo, monospace; color: var(--text-muted); min-width: 52px; }
.tz-payer-list .tz-flag { font-size: 10px; padding: 0 5px; border-radius: 8px; background: #dcfce7; color: #166534; }
.tz-payer-list .tz-flag.enroll { background: #fee2e2; color: #991b1b; }
.tz-payer-list .tz-flag.enrolled { background: #dbeafe; color: #1e40af; }
.tz-payer-list .tz-flag.ok { background: #dcfce7; color: #166534; }
.tz-payer-list .tz-flag.bad { background: #fef3c7; color: #92400e; }
.tz-payer-list .tz-flag.muted { background: #f1f5f9; color: var(--text-muted); }
.tz-picker .input-with-button { flex-wrap: wrap; row-gap: 6px; }
.tz-payer-list .tz-states { color: var(--text-muted); margin-left: auto; }

/* Eligibility: appointment column + search in the date bar (Sep 18 2026) */
.elig-appt { max-width: 190px; }
.elig-appt-type { font-weight: 600; font-size: 12.5px; }
.elig-appt-sub { font-size: 11px; color: var(--text-muted); }
.elig-datebar .elig-search { margin-left: 4px; min-width: 180px; }
.elig-ins { max-width: 200px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elig-ins-primary { font-weight: 600; }
.elig-ins-more { font-size: 10.5px; border: 1px solid var(--border); border-radius: 8px; padding: 0 5px; }
.elig-ins-row { line-height: 1.25; margin-bottom: 2px; }
.elig-ins-row .elig-ins-id { display: block; padding-left: 18px; }
.elig-ins-row.inactive { opacity: .55; text-decoration: line-through; }
.elig-ins-slot { display: inline-block; min-width: 14px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 7px; background: var(--page-plane); border: 1px solid var(--border); color: var(--text-secondary); }
.elig-ins-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-secondary); }
.tz-carriers { max-height: 160px; }
.tz-carrier.unmapped { cursor: pointer; }

.clinic-exam-types { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.clinic-exam-types input { min-width: 260px; }

.tz-step { margin: 10px 0 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--page-plane); }
.tz-step-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.tz-step .modal-hint { margin: 2px 0 6px; }
.tz-advanced { margin: 10px 0; }
.tz-advanced > summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.tz-advanced[open] > summary { margin-bottom: 6px; }

.elig-guarantor { font-size: 11px; color: var(--text-secondary); opacity: .8; margin-top: 1px; }
.elig-guarantor-rel { font-style: italic; }

.crystal-pull-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.crystal-pull { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--page-plane); }
.crystal-pull-name { font-weight: 700; font-size: 13px; }
.crystal-pull-what { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); }
.crystal-pull-params { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; }
.crystal-pull-params label { display: inline-flex; align-items: center; gap: 4px; }
.crystal-pull-params input[type=text], .crystal-pull-params input[type=number] { width: 110px; }
.crystal-pull-params input.wide { width: 320px; }
.crystal-pull-endpoint { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-secondary); }

.crystal-pull-bar { align-items: center; }
.crystal-pull-bar .crystal-status { flex: 1; margin: 0; }
.crystal-pull.running { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1) inset; }

.posting-audit-table tr.audit-clickable { cursor: pointer; }
.posting-audit-table tr.audit-clickable:hover td { background: var(--page-plane); }
.audit-caret { display: inline-block; width: 12px; color: var(--text-muted); transition: transform .12s; }
.posting-audit-table tr.open .audit-caret { transform: rotate(90deg); }
.posting-audit-table tr.audit-detail > td { background: var(--page-plane); padding: 8px 12px 10px 24px; }
.audit-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit-detail-table th { text-align: left; font-size: 11px; color: var(--text-secondary); padding: 2px 8px 4px 0; border-bottom: 1px solid var(--border); }
.audit-detail-table td { padding: 4px 8px 4px 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.audit-detail-foot { font-size: 11px; margin-top: 6px; }

.minor-icon { display: inline-block; position: relative; font-size: 13px; line-height: 1; cursor: help; margin-left: 2px; vertical-align: -1px; }
/* instant tooltip (the native title waits about a second) */
.minor-icon[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--text-primary); color: var(--surface-1); font-size: 12px; font-weight: 500; line-height: 1.3;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap; z-index: 30; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.minor-icon[data-tip]:hover::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text-primary); z-index: 30; pointer-events: none;
}

.crystal-refund input.crystal-amt { width: 80px; }
.crystal-refund input.wide { width: 260px; }
.crystal-refund-out { margin-top: 8px; font-size: 12px; }
.crystal-refund-out table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 11.5px; }
.crystal-refund-out th, .crystal-refund-out td { border-bottom: 1px solid var(--border); padding: 3px 6px; text-align: left; vertical-align: top; }
.crystal-refund-out th { font-size: 10.5px; color: var(--text-secondary); }
.crystal-refund-out tr.void td { opacity: .5; text-decoration: line-through; }
.crystal-refund-out tr.new td { background: color-mix(in srgb, var(--status-good) 12%, transparent); font-weight: 600; }
.crystal-refund-out pre { background: var(--page-plane); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 11px; overflow: auto; max-height: 260px; }
.crystal-refund-out .ok { color: var(--status-good); font-weight: 700; } .crystal-refund-out .bad { color: var(--status-critical); font-weight: 700; }

.refund-checks-table td, .refund-checks-table th { font-size: 12px; vertical-align: top; }
.refund-checks-table th.chk, .refund-checks-table td.chk { width: 28px; text-align: center; }
.refund-checks-table select { max-width: 320px; font-size: 12px; }
.refund-checks-table tr.skipped td { opacity: .5; }
.refund-checks-table .how { font-size: 10.5px; color: var(--text-secondary); display: block; }
.refund-checks-table .ok { color: var(--status-good); font-weight: 700; } .refund-checks-table .bad { color: var(--status-critical); font-weight: 700; }

.audit-note { font-size: 10.5px; font-style: italic; color: var(--text-secondary); border-left: 2px solid var(--border); padding-left: 6px; margin-top: 2px; white-space: pre-wrap; }

/* Crystal posts ledger (Settings > Crystal API, and the refund-checks window) */
.crystal-posts-list { margin-top: 8px; font-size: 12px; max-height: 320px; overflow: auto; }
.crystal-posts-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.crystal-posts-table th, .crystal-posts-table td { border-bottom: 1px solid var(--border); padding: 3px 6px; text-align: left; vertical-align: top; }
.crystal-posts-table th { font-size: 10.5px; color: var(--text-secondary); position: sticky; top: 0; background: var(--page-plane); }
.crystal-posts-table td.num, .crystal-posts-table th.num { text-align: right; }
.crystal-posts-table .ok { color: var(--status-good); font-weight: 700; }
.crystal-posts-table .bad { color: var(--status-critical); font-weight: 700; }
.crystal-posts-table .err { white-space: pre-wrap; word-break: break-word; }
.crystal-posts-table tr.bad-row td { background: color-mix(in srgb, var(--status-critical) 8%, transparent); }
.post-detail { margin-top: 4px; font-size: 11px; }
.post-detail summary { cursor: pointer; color: var(--text-secondary); }
.post-detail pre { background: var(--page-plane); border: 1px solid var(--border); border-radius: 6px; padding: 6px; font-size: 10.5px; overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word; }
.crystal-result-head { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; }
.crystal-diag { margin-top: 10px; }
.crystal-diag > summary { color: var(--text-secondary); }
.autofetch-log { max-height: 320px; overflow: auto; font-size: 11px; background: var(--page-plane); border: 1px solid var(--border); border-radius: 6px; padding: 8px; white-space: pre-wrap; word-break: break-word; }
.stedi-carriers { display: grid; gap: 8px; margin: 6px 0; }
.stedi-carrier { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.stedi-carrier-to { margin: 3px 0 6px; }
.stedi-results { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.elig-raw { font-family: ui-monospace, monospace; font-size: 10px; color: var(--text-secondary); text-decoration: none; margin-left: 4px; border: 1px solid var(--border); border-radius: 4px; padding: 0 3px; }
.elig-raw:hover { color: var(--text); border-color: var(--text-secondary); }

/* Eligibility Settings window (Sep 22 2026) - tabs share the date-bar look */
.es-tabs { margin: 4px 0 12px; }
.es-tab-btn {
  border: none; border-right: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  padding: 6px 13px; font-size: 13px; cursor: pointer;
}
.es-tab-btn:last-child { border-right: none; }
.es-tab-btn.active { background: var(--series-1); color: #fff; font-weight: 600; }
.es-tab textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.es-tab .settings-codes label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; margin: 4px 0; }

/* Stedi cell Fetch all left out (bills per check) - muted, reason on hover */
.elig-cell-notsent { color: var(--text-muted); font-size: 12px; }
.elig-cell-notsent .elig-recheck { opacity: .7; }

/* Dual vision coverage badge (Sep 23 2026) - same shape as the call flag, blue */
.elig-dual {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #dbeafe; color: #1e40af; font-size: 10px; font-weight: 700;
  vertical-align: middle; text-transform: uppercase; letter-spacing: .02em;
}

/* Payer ID mapping table (Sep 23 2026) */
.stedi-map-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stedi-map-table th, .stedi-map-table td { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; vertical-align: top; }
.stedi-map-table th { font-size: 10.5px; color: var(--text-secondary); }
.stedi-map-table tr.unmapped td:first-child { font-weight: 600; }
.stedi-map-actions { white-space: nowrap; }
.stedi-search-row td { background: var(--page-plane); }
.stedi-results { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
#eligSettingsModal .modal { width: 860px; }

/* Eligibility: rolling 3-week block (Sep 23 2026, narrowed Oct 5 2026) */
.elig-block-label { font-size: 12px; margin-left: 6px; }
.elig-table-foot { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border); }
.elig-table-foot .muted { font-size: 12px; }
.elig-ins-list { display: grid; gap: 1px; font-size: 12px; }
.elig-ins-slot { color: var(--text-muted); font-size: 10.5px; margin-right: 4px; }
.elig-ins-list .inactive { opacity: .55; text-decoration: line-through; }
/* Self-pay confirmed in Crystal - a real answer, not "none on file" */
.elig-ins-selfpay { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px; color: #1f6b3a; background: #e6f4ea; border: 1px solid #b7dfc3; }

/* --- Background jobs strip + toasts (Matt, Oct 7 2026: fetches run in the
   background; a status tile on every view; the popup is the troubleshoot
   / fix-logins window). ---------------------------------------------- */
.job-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 28px 10px; }
.job-strip.hidden { display: none; }
.job-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 600px;
  padding: 6px 10px 6px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; font-weight: 600;
  cursor: pointer; line-height: 1.2; text-align: left;
}
.job-chip:hover { filter: brightness(0.96); }
.job-chip .job-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.job-chip .job-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A running chip keeps its whole line - "30 of 200, about 2 min left" is the
   point of it (Matt, Oct 8 2026: the time remaining was cut off). */
.job-chip.job-running .job-text, .job-chip.job-login .job-text { overflow: visible; text-overflow: clip; }
.job-chip.job-running, .job-chip.job-login { max-width: none; }
.job-chip .job-sub { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.job-chip .job-x { border: 0; background: none; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 0 0 2px; cursor: pointer; }
.job-chip .job-x:hover { color: var(--text-primary); }
.job-chip.job-running .job-dot { background: var(--status-info); animation: jobPulse 1.2s ease-in-out infinite; }
.job-chip.job-login { border-color: var(--status-warning); }
.job-chip.job-login .job-dot { background: var(--status-warning); animation: jobPulse 1.2s ease-in-out infinite; }
.job-chip.job-done .job-dot { background: var(--status-good); }
.job-chip.job-failed { border-color: var(--status-critical); }
.job-chip.job-failed .job-dot { background: var(--status-critical); }
.job-chip.job-stopped .job-dot { background: var(--text-muted); }
@keyframes jobPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.job-bar { width: 54px; height: 6px; border-radius: 3px; background: var(--gridline); overflow: hidden; flex: none; }
.job-bar > i { display: block; height: 100%; background: var(--status-info); border-radius: 3px; }

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; max-width: 380px; }
.toast {
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
  border-left: 4px solid var(--status-info); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18); font-size: 13px; cursor: pointer;
  animation: toastIn 0.18s ease-out;
}
.toast b { display: block; margin-bottom: 2px; }
.toast.toast-good { border-left-color: var(--status-good); }
.toast.toast-warn { border-left-color: var(--status-warning); }
.toast.toast-bad { border-left-color: var(--status-critical); }
.toast.toast-out { opacity: 0; transition: opacity 0.4s; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.metrics-handoff { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); }

.elig-appt-doc { font-size: 11px; color: var(--series-1); font-weight: 600; margin-top: 2px; }
.es-subhead { margin: 18px 0 4px; font-size: 14px; }
.elig-med-badge { background: #dde9f8; color: #1f4e78; }

/* Ticked-patient actions above the grid (Oct 7 2026); Reset alone at the far right. */
.elig-selected-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0 12px 10px; }
.elig-selected-bar .muted { font-size: 12px; flex: 1; min-width: 200px; }
.elig-selected-bar .elig-reset-btn { margin-left: auto; }

/* Edit patient > Insurance (Matt, Oct 8 2026): carrier + member ID per plan */
.elig-plan-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.elig-plan-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.elig-plan-row.elig-plan-removed { opacity: 0.45; }
.elig-phone { font-size: 11.5px; margin-top: 1px; }

/* Eligibility row Notes button (Matt, Oct 8 2026) - same look as the Invoice / Payments views */
.elig-actions .notes-btn { margin-right: 4px; }
.notes-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.modal-narrow { max-width: 520px; }

/* Vision Plan Catalog (Matt, Oct 13 2026) */
.catalog .metrics-bar { padding: 0 28px; }
.catalog .catalog-chips { padding: 0 28px 10px; }
.catalog-note { width: 100%; min-width: 140px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; background: var(--surface-1); color: var(--text-primary); }
.catalog-code { font-size: 11px; color: var(--text-secondary, #666); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; white-space: nowrap; }
.catalog-range { border-bottom: 1px dotted var(--text-secondary, #888); cursor: help; }
.catalog-network { border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px; font-size: 12px; background: var(--surface-1); color: var(--text-primary); }
.catalog-varies { font-size: 10px; font-weight: 700; color: #92500a; background: #fef3d6; border-radius: 8px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
#catalogSearch { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 220px; background: var(--surface-1); color: var(--text-primary); }

/* Exams per month (Matt, Oct 14 2026) */
.exams-panel { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.exams-panel .metrics-bar { padding: 0 28px; }
.exams-total td { border-top: 2px solid var(--border); font-weight: 600; }
/* EOB popup, Oct 23 2026: the invoice-matched section sits ABOVE the payment table; this titles the table */
.eob-payment-title { font-weight: 700; margin: 14px 0 4px; }
.eob-payment-title .muted { font-weight: 400; font-size: 12px; }
/* EOB popup: the 835 line table + notes fold under "Troubleshooting" (Oct 23 2026) */
.eob-patient-summary { margin: 8px 0 2px; padding: 6px 10px; border-left: 3px solid #c7942f; background: rgba(199, 148, 47, 0.08); font-weight: 600; }
.eob-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.eob-top h2 { margin: 0; }
.eob-actions-top { margin-top: 0; }
.eob-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.eob-trouble { margin: 10px 0 4px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.eob-trouble > summary { cursor: pointer; font-weight: 700; }
.eob-trouble > summary .muted { font-weight: 400; font-size: 12px; }
.eob-trouble[open] > summary { margin-bottom: 4px; }
.es-advanced { margin: 6px 0; }
.es-advanced > summary { cursor: pointer; }
.es-lookup { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* Payments toolbar: the old raw-remit generator folded away (Nov 6 2026) */
.bulk-trouble { display: inline-block; position: relative; }
.bulk-trouble > summary { list-style: none; cursor: pointer; }
.bulk-trouble > summary::-webkit-details-marker { display: none; }
.bulk-trouble-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--surface-1, #fff); border: 1px solid var(--border, #d0d4da); border-radius: 8px; padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); white-space: nowrap; }

/* Unused Benefits Campaign (Nov 6 2026) */
.campaign .catalog-chips { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.campaign-job { font-size: 12px; }
.campaign-settings { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 28px 10px; font-size: 13px; }
.campaign-settings input[type=number] { width: 70px; }
.campaign-runs { padding: 10px 28px 20px; font-size: 12px; }
.campaign-runs table { margin-top: 6px; }
.campaign tr.dim { opacity: .55; }