/* ============================================================================
   PAYMENTS.CSS — scoped styles for js/payments.js (Money section).
   Only what shared classes (.tab-*, .btn, .page-header-bar) don't cover:
   status banner, toolbar + chips, sections, queue tables, review input.
   ============================================================================ */

.pay-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

.pay-status { margin: 12px 0; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; }
.pay-status-ok    { background: rgba(34,197,94,.12); color: var(--success, #16a34a); }
.pay-status-warn  { background: rgba(245,158,11,.14); color: #b45309; }
.pay-status-error { background: rgba(239,68,68,.12); color: var(--danger, #dc2626); }

.pay-loading, .pay-error { padding: 16px 0; color: var(--text-muted); font-size: 14px; }
.pay-error { color: var(--danger, #dc2626); }

/* Toolbar: chips on the left, actions on the right */
.pay-toolbar { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; }
.pay-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-toolbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pay-autopilot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; border: 1px solid var(--border,#e2e8f0); border-radius: var(--r-md,8px); }
.pay-autopilot input { cursor: pointer; }

.pay-batchbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.pay-selall { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pay-ck { width: 28px; text-align: center; }
.pay-ck input { cursor: pointer; }

.pay-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pay-chip-pending { background: rgba(99,102,241,.16); color: #4338ca; }
.pay-section-dup { border-left: 3px solid var(--danger,#dc2626); padding-left: 12px; }
.pay-chip-confirm { background: rgba(59,130,246,.14); color: #1d4ed8; }
.pay-chip-review  { background: rgba(245,158,11,.16); color: #b45309; }
.pay-chip-failed  { background: rgba(239,68,68,.14); color: var(--danger, #dc2626); }
.pay-chip-muted   { background: var(--surface-alt, #f1f5f9); color: var(--text-muted); }

/* Sections */
.pay-section { margin: 20px 0; }
.pay-section h2 { font-size: 15px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.pay-count { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-alt, #f1f5f9); border-radius: 999px; padding: 1px 8px; }
.pay-hint { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); max-width: 760px; line-height: 1.5; }
.pay-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }
.pay-section-empty h2 { color: var(--text-muted); }
.pay-section-recent { opacity: .9; }

/* Queue tables */
.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid var(--border, #e2e8f0); }
.pay-table td { padding: 8px 10px; border-bottom: 1px solid var(--border, #eef2f6); vertical-align: middle; }
.pay-table-muted td { color: var(--text-muted); }

.pay-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-inv { font-weight: 600; }
.pay-ref { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.pay-why { color: var(--text-muted); max-width: 320px; }

.pay-actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.pay-inv-input { width: 96px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--border, #cbd5e1); border-radius: var(--r-sm, 6px); }

.pay-placeholder { margin-top: 24px; }

/* Checks tab — manual entry form */
.pay-check-form { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin-top: 4px; }
.pay-check-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pay-check-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pay-check-fld input { font-weight: 400; }
.pay-check-wide { flex: 1; min-width: 240px; }
.pay-check-wide input { width: 100%; }
.pay-check-ctx { font-size: 13px; color: var(--text-muted); padding-bottom: 6px; }
.pay-check-actions { margin-top: 4px; }

/* Check-scan upload */
.pay-upload { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
#chk-upresults { margin-top: 10px; }

/* Virtual terminal — Pay.js card entry box */
.pay-card-box { border: 1px solid var(--border, #cbd5e1); border-radius: var(--r-sm, 6px); padding: 10px 12px; min-height: 44px; background: var(--surface, #fff); font-weight: 400; }
.pay-card-box iframe { width: 100% !important; border: 0; }

/* Doc-type toggle + estimate line picker (terminal + check-scan review) */
.pay-doctype { display: inline-flex; gap: 16px; font-size: 13px; font-weight: 600; }
.pay-doctype label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pay-lines { border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 8px); padding: 8px 10px; max-width: 620px; margin: 4px 0; }
.pay-lines-head { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.pay-line { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: var(--r-sm, 6px); cursor: pointer; }
.pay-line:hover { background: var(--surface-alt, #f8fafc); }
.pay-line-desc { flex: 1; font-size: 13px; }
.pay-line-desc em { color: var(--text-muted); font-style: normal; font-size: 12px; }
.pay-line-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pay-line-match { background: rgba(34,197,94,.12); border-radius: var(--r-sm, 6px); }

/* Clickable queue rows */
.pay-row { cursor: pointer; }
.pay-row:hover { background: var(--surface-alt, #f8fafc); }

/* ── Row-detail overlay (drawer) ─────────────────────────────────────────── */
.pay-overlay { position: fixed; inset: 0; z-index: 1000; }
.pay-ov-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.38); }
.pay-ov-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: var(--surface, #fff); box-shadow: -8px 0 32px rgba(0,0,0,.18);
  padding: 20px 22px; overflow-y: auto; box-sizing: border-box;
}
.pay-ov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pay-ov-head h2 { margin: 0; font-size: 18px; }
.pay-ov-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.pay-ov-meta { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.pay-ov-reason { font-size: 13px; color: #b45309; background: rgba(245,158,11,.1); border-radius: var(--r-sm,6px); padding: 8px 10px; margin: 8px 0; }
.pay-ov-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 8px; }

.pay-ov-ctx { display: flex; flex-direction: column; gap: 8px; }
.pay-ov-card { border: 1px solid var(--border,#e2e8f0); border-radius: var(--r-md,8px); padding: 10px 12px; }
.pay-ov-card-bad { color: var(--danger,#dc2626); border-style: dashed; }
.pay-ov-card-warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.06); }
.pay-ov-card-note { font-size: 12px; margin-top: 6px; color: #b45309; }
.pay-ov-card-top { display: flex; align-items: center; gap: 8px; }
.pay-ov-bal { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-ov-card-name { font-size: 13px; font-weight: 600; margin-top: 2px; }
.pay-ov-card-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pay-ov-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.pay-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.pay-badge-open { background: rgba(59,130,246,.14); color: #1d4ed8; }
.pay-badge-closed { background: rgba(100,116,139,.16); color: #475569; }
.pay-badge-warn { background: rgba(245,158,11,.16); color: #b45309; }

.pay-alloc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-alloc-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px; }
.pay-alloc-table td { padding: 4px 6px; }
.pay-alloc-table .pay-inv-input { width: 110px; }
.pay-alloc-amt { width: 100px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--border,#cbd5e1); border-radius: var(--r-sm,6px); text-align: right; }
.pay-alloc-live { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pay-alloc-bad { color: var(--danger,#dc2626); }

.pay-alloc-bar { margin: 10px 0; padding: 8px 12px; border-radius: var(--r-sm,6px); font-size: 13px; font-weight: 600; }
.pay-alloc-ok { background: rgba(34,197,94,.14); color: var(--success,#16a34a); }
.pay-alloc-warn { background: rgba(245,158,11,.14); color: #b45309; }
.pay-alloc-tools { display: flex; gap: 8px; }

.pay-ov-actions { display: flex; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border,#e2e8f0); }
.pay-ov-actions .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ── Multi-check batch review (Checks → Post a batch of checks) ───────────── */
.chkb-summary { margin: 12px 0; padding: 8px 12px; border-radius: var(--r-sm,6px); background: var(--bg-subtle,#f1f5f9); font-size: 13px; }
.chkb-summary .pay-why { margin-top: 4px; font-weight: 400; }
.chkb-card { margin: 10px 0; border: 1px solid var(--border,#e2e8f0); border-radius: var(--r-md,8px); overflow: hidden; }
.chkb-card-ok { border-left: 3px solid var(--success,#16a34a); }
.chkb-card-warn { border-left: 3px solid #f59e0b; }
.chkb-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-subtle,#f8fafc); font-size: 13px; flex-wrap: wrap; }
.chkb-card-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chkb-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chkb-lines th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 5px 12px; }
.chkb-lines td { padding: 5px 12px; border-top: 1px solid var(--border,#eef2f7); vertical-align: top; }
.chkb-lines .pay-amt { text-align: right; font-variant-numeric: tabular-nums; }
.chkb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 5px; vertical-align: middle; }
.chkb-dot-green { background: #16a34a; }
.chkb-dot-yellow { background: #f59e0b; }
.chkb-dot-red { background: #dc2626; }
.chkb-actions { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; flex-wrap: wrap; }

/* Deposit-amount-first (Checks → Deposit checks): step-1 header + step-3 QuickBooks box */
.chk-deposit-head { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 4px; }
.chkd-qb { margin-top: 14px; }
.chkd-qb-box { border: 1px solid var(--border,#e2e8f0); border-radius: var(--r-md,8px); padding: 12px 14px; background: var(--bg-subtle,#f8fafc); }
.chkd-qb-box h3 { margin: 0 0 6px; font-size: 14px; }
.chkd-qb-hot { border-color: var(--success,#16a34a); box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
.chkd-qb-actions { display: flex; gap: 10px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.chkd-plan { margin-top: 8px; font-size: 13px; }
.chkd-plan .pay-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }

/* Batch post: busy overlay (grays out + spinner while posting; blocks interaction) */
.chkb-busy { position: relative; pointer-events: none; }
.chkb-busy::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.62); z-index: 5; border-radius: var(--r-md,8px); }
.chkb-busy::after { content: attr(data-busy); position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; color: #1f2937; padding: 0 20px; text-align: center; }
@media (prefers-color-scheme: dark) { .chkb-busy::before { background: rgba(17,24,39,.62); } .chkb-busy::after { color: #e5e7eb; } }

/* Checks sub-tabs (Post / Open / Failed / History) */
.chk-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border,#e2e8f0); margin: 4px 0 18px; flex-wrap: wrap; }
.chk-subtab { background: none; border: none; padding: 9px 15px; font-size: 14px; color: var(--text-muted,#64748b); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.chk-subtab:hover { color: var(--text,#1f2937); }
.chk-subtab-active { color: #3b5bdb; border-bottom-color: #3b5bdb; font-weight: 600; }
.chk-subtab .pay-count { margin-left: 4px; }
.chk-tabpanel[hidden] { display: none; }

/* Bill-intake-style drag/drop upload zone (Checks) */
.pay-dz { border: 2px dashed var(--border,#cbd5e1); border-radius: var(--r-md,8px); padding: 22px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface-alt,#fafafa); font-size: 14px; color: var(--text-muted,#666); margin: 6px 0; }
.pay-dz:hover, .pay-dz.pay-dz-over { border-color: #3b5bdb; background: #f5f7ff; }
.pay-dz-browse { color: #3b5bdb; text-decoration: underline; font-weight: 500; }
@media (prefers-color-scheme: dark) { .pay-dz:hover, .pay-dz.pay-dz-over { background: rgba(59,91,219,.12); } }

/* ============================================================================
   Summary tiles + filter (queue tabs) + shared "look" polish. Additive — every
   existing button/section keeps working; tiles only toggle section visibility.
   Uses theme tokens (--surface/--text/--border) so it adapts light & dark.
   ============================================================================ */
.pay-wrap {
  --pc-need: #c26a12; --pc-confirm: #2f5fc7; --pc-danger: #d64545;
  --pc-done: #4f8a39; --pc-wait: #1f8296; --pc-mute: var(--text-muted, #64748b);
  --pc-handled: #6b52c2;
}

/* clickable summary tiles */
.pay-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 8px; }
.pay-tile {
  text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 12px); padding: 12px 14px 13px; position: relative; overflow: hidden;
  transition: transform .1s ease, opacity .15s ease, box-shadow .12s ease;
}
.pay-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, var(--pc-mute)); }
.pay-tile:hover { transform: translateY(-2px); }
.pay-tile:focus-visible { outline: 2px solid var(--tc, var(--accent)); outline-offset: 2px; }
.pay-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tc); }
.pay-tile .pt-lab { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tc, var(--text-muted)); }
.pay-tile .pt-big { font-size: 26px; font-weight: 800; line-height: 1.05; margin: 5px 0 1px; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }
.pay-tile .pt-amt { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pt-need { --tc: var(--pc-need); } .pt-wait { --tc: var(--pc-wait); }
.pt-done { --tc: var(--pc-done); } .pt-mute { --tc: var(--pc-mute); }
.pt-handled { --tc: var(--pc-handled); }
.pt-danger { --tc: var(--pc-danger); }
/* Checks tab: tiles act as sub-tab navigation (one always active) — ring the active one, no dimming.
   Four tiles — the deposit slip moved out to its own Checking tab. */
.pay-tiles-checks { margin-bottom: 18px; }

@media (max-width: 720px) { .pay-tiles-checks { grid-template-columns: repeat(2, 1fr); } }
/* when a filter is active, dim the non-selected tiles */
.pay-filtering .pay-tile:not([aria-pressed="true"]) { opacity: .45; }

/* filter status bar */
.pay-filterbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; font-size: 13px; color: var(--text-muted); }
.pay-filterbar b { color: var(--text, #0f172a); font-weight: 700; }
.pay-filter-clear { font: inherit; font-weight: 700; font-size: 12px; color: var(--text); background: var(--surface-alt, #f1f5f9); border: 1px solid var(--border, #e2e8f0); padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.pay-filter-clear:hover { border-color: var(--pc-need); color: var(--pc-need); }
.pay-filter-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* shared polish — applies to every tab that uses .pay-section */
.pay-section h2 { letter-spacing: -.01em; }
.pay-chip { display: inline-flex; align-items: center; gap: 6px; }
.pay-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pay-chip-muted::before { opacity: .5; }

@media (max-width: 720px) { .pay-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pay-tile { transition: none; } .pay-tile:hover { transform: none; } }

/* Flyout: full USAePay charge detail grid */
.pay-ov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; margin: 6px 0 14px; }
.pay-ovg-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--border, #eef2f6); min-width: 0; }
.pay-ovg-item span { color: var(--text-muted); white-space: nowrap; }
.pay-ovg-item b { color: var(--text, #0f172a); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pay-ov-grid { grid-template-columns: 1fr; } }
.pay-ov-mismatch { color: var(--danger, #dc2626); font-weight: 600; }
.pay-ov-fixinv { display: flex; gap: 8px; align-items: center; margin: 2px 0 6px; }
.pay-ov-fixinv .pay-inv-input { width: 140px; }

/* Card action row + full-screen invoice PDF viewer */
/* Match verdict banner (invoice ↔ payment agreement) at the top of the flyout */
.pay-ov-match { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; border-radius: var(--r-sm,6px); padding: 9px 12px; margin: 8px 0 4px; }
.pay-ov-match-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: #fff; flex: 0 0 auto; }
.pay-ov-match-good { color: #166534; background: rgb(22 163 74 / 12%); }
.pay-ov-match-good .pay-ov-match-icon { background: var(--success, #16a34a); }
.pay-ov-match-bad  { color: #b91c1c; background: rgb(239 68 68 / 12%); }
.pay-ov-match-bad .pay-ov-match-icon { background: var(--danger, #dc2626); }
.pay-ov-match-warn { color: #b45309; background: rgb(245 158 11 / 14%); }
.pay-ov-match-warn .pay-ov-match-icon { background: #f59e0b; }

/* Two-pane flyout: actual invoice PDF on the left, payment detail on the right (Bill-Intake style) */
.pay-ov-drawer.pay-ov-drawer-split { width: min(1240px, 97vw); padding: 0; display: flex; align-items: stretch; }
.pay-ov-pdf { flex: 1 1 58%; min-width: 0; display: flex; background: var(--surface-alt, #f1f5f9); border-right: 1px solid var(--border, #e2e8f0); }
.pay-ov-pdf .pay-pdf-frame { width: 100%; height: 100%; border: 0; display: block; }
.pay-ov-pdf-empty { margin: auto; padding: 24px; max-width: 340px; text-align: center; font-size: 13px; color: var(--text-muted); }
.pay-ov-pdf-loading { margin: auto; }
.pay-ov-content { flex: 1 1 42%; min-width: 340px; max-width: 560px; overflow-y: auto; padding: 20px 22px; box-sizing: border-box; }
@media (max-width: 900px) {
  .pay-ov-drawer.pay-ov-drawer-split { flex-direction: column; width: 100vw; }
  .pay-ov-pdf { flex: 0 0 42vh; border-right: 0; border-bottom: 1px solid var(--border, #e2e8f0); }
  .pay-ov-content { max-width: none; min-width: 0; flex: 1 1 auto; }
}

/* ============================================================================
   Checking tab (Money > Payments > Checking) — js/check-deposit.js
   Direct port of the approved mockup (artifact ecaa4297). Self-contained and
   cd-* namespaced: it inherits the app theme tokens but styles its own
   buttons/tables so it renders exactly as the mockup did.
   ============================================================================ */

.cd-sec { margin: 22px 0; }
.cd-h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cd-hint { font-size: 12px; color: var(--text-muted); max-width: 800px; margin: 0 0 12px; }
.cd-note { font-size: 11.5px; color: var(--text-muted); }
.cd-loading { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.cd-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 6px); padding: 16px;
}
.cd-ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.cd-num { font-variant-numeric: tabular-nums; }
.cd-a { text-align: right; }
.cd-ok { color: var(--pc-done); }
.cd-bad { color: var(--pc-danger); }
.cd-warn { color: var(--pc-need); }

/* status pill */
.cd-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(47, 95, 199, .14); color: var(--pc-confirm);
}
.cd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cd-pill-deposited { background: rgba(79, 138, 57, .15); color: var(--pc-done); }
.cd-pill-posted    { background: rgba(107, 82, 194, .15); color: var(--pc-handled); }
.cd-pill-void      { background: rgba(214, 69, 69, .14); color: var(--pc-danger); }

.cd-locked {
  margin-bottom: 12px; padding: 9px 13px; border-radius: var(--r-md, 6px);
  background: rgba(107, 82, 194, .12); color: var(--pc-handled);
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* .cd-locked/.cd-ac/.cd-toast set an explicit display, which outranks the UA
   [hidden] rule — these keep el.hidden = true actually hiding them. */
.cd-locked[hidden], .cd-ac[hidden], .cd-toast[hidden] { display: none !important; }

/* header fields */
.cd-head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 12px 14px; align-items: end; margin-bottom: 18px;
}
.cd-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-fld > span {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.cd-fld input {
  font: inherit; font-size: 13px; width: 100%; min-width: 0; padding: 6px 9px;
  color: var(--text); background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-sm, 4px);
}
.cd-fld input:focus-visible { outline: 2px solid var(--pc-confirm); outline-offset: 1px; }

/* the grid */
.cd-gridwrap { overflow-x: auto; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 6px); }
.cd-grid { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 68rem; }
.cd-grid th {
  text-align: left; font-weight: 600; color: var(--text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; padding: 7px 9px; white-space: nowrap;
  background: var(--surface-alt, #f1f5f9); border-bottom: 1px solid var(--border, #e2e8f0);
}
.cd-grid td { padding: 4px 6px; border-bottom: 1px solid var(--border, #eef2f6); vertical-align: middle; }
.cd-grid tr.cd-row:hover td { background: rgba(47, 95, 199, .03); }
/* Cells read as fields at rest — an empty grid has to look typed-into, not
   like static text. (The mockup used transparent-until-hover; on a real empty
   slip that made every box invisible.) */
.cd-grid input, .cd-grid select {
  font: inherit; font-size: 13px; width: 100%; min-width: 0; padding: 5px 7px;
  color: var(--text); background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-sm, 4px);
}
.cd-grid input::placeholder { color: var(--text-muted); opacity: .75; }
.cd-grid input:hover, .cd-grid select:hover { border-color: var(--border-strong, #cbd5e1); }
.cd-grid input:focus, .cd-grid select:focus {
  border-color: var(--pc-confirm); outline: none;
  box-shadow: 0 0 0 2px rgba(47, 95, 199, .16);
}
.cd-grid input:read-only {
  background: var(--surface-alt, #f1f5f9); border-color: transparent; color: var(--text-secondary);
}
.cd-grid select { cursor: pointer; }
/* the row hover tint must not wash out the fields sitting on top of it */
.cd-grid tr.cd-row:hover input, .cd-grid tr.cd-row:hover select { background: var(--surface, #fff); }
.cd-grid tr.cd-row:hover input:read-only { background: var(--surface-alt, #f1f5f9); }
.cd-c-no {
  width: 2.6rem; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted); text-align: right; padding-right: 8px;
}
.cd-c-amt input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cd-col-type { width: 7rem; } .cd-col-check { width: 6.4rem; } .cd-col-amt { width: 7.4rem; }
.cd-col-inv { width: 7.6rem; } .cd-col-psv { width: 15rem; }
.cd-col-state { width: 10rem; } .cd-col-x { width: 2.4rem; }
.cd-payer { position: relative; min-width: 11rem; }
.cd-empty { text-align: center; padding: 24px 10px; color: var(--text-muted); font-style: italic; }

/* payer autocomplete */
.cd-ac {
  position: absolute; z-index: 30; top: calc(100% - 2px); left: 4px; right: 4px;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: var(--r-sm, 4px); box-shadow: var(--shadow-md);
  max-height: 180px; overflow-y: auto; padding: 3px;
}
.cd-ac button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  background: none; border: 0; color: var(--text); cursor: pointer; padding: 5px 8px; border-radius: 3px;
}
.cd-ac button:hover, .cd-ac button.cd-on { background: var(--surface-alt, #f1f5f9); }
.cd-ac-sub { font-size: 11px; color: var(--text-muted); }
/* payer that came straight off the PrintSmith invoice */
.cd-payer.cd-frompsv input { border-color: rgba(79, 138, 57, .55); }
.cd-frompsv-tag {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc-done); pointer-events: none; background: var(--surface, #fff); padding-left: 4px;
}

/* live PrintSmith column */
.cd-psv { font-size: 11.5px; line-height: 1.35; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cd-psv .cd-who { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-psv .cd-sub { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cd-psv-bad .cd-who, .cd-psv-bad .cd-sub { color: var(--pc-danger); }
.cd-psv-warn .cd-sub { color: var(--pc-need); font-weight: 600; }
.cd-psv-idle { color: var(--text-muted); font-style: italic; }
.cd-psv-loading { color: var(--pc-wait); }
.cd-psv-loading .cd-who::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px;
  border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cd-spin .7s linear infinite;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-fill {
  align-self: flex-start; font: inherit; font-size: 11px; font-weight: 700;
  background: none; border: 0; color: var(--pc-confirm); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; padding: 1px 0;
}

/* applied-state chip + split toggle */
.cd-state {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.cd-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cd-state-full { background: rgba(79, 138, 57, .14); color: var(--pc-done); }
.cd-state-part { background: rgba(194, 106, 18, .15); color: var(--pc-need); }
.cd-state-none { background: rgba(100, 116, 139, .14); color: var(--pc-mute); }
.cd-state-over { background: rgba(214, 69, 69, .14); color: var(--pc-danger); }
.cd-split {
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: none; border: 1px solid var(--border-strong, #cbd5e1);
  color: var(--text-secondary); padding: 3px 8px; border-radius: 999px; margin-left: 6px;
}
.cd-split:hover { border-color: var(--pc-confirm); color: var(--pc-confirm); }
.cd-split[aria-expanded="true"] { border-color: var(--pc-confirm); color: var(--pc-confirm); background: rgba(47, 95, 199, .08); }
.cd-x {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--text-muted);
  font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 3px;
}
.cd-x:hover { color: var(--danger, #dc2626); background: rgba(220, 38, 38, .08); }
.cd-x:disabled { opacity: .4; cursor: not-allowed; }

/* split editor */
.cd-allocrow > td { background: var(--surface-alt, #f7f8fa); padding: 0; }
.cd-allocbox { padding: 10px 14px 12px 3.2rem; display: flex; flex-direction: column; gap: 7px; }
.cd-allochead {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.cd-allocline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-alloclbl { font-size: 11px; color: var(--text-muted); width: 4rem; }
.cd-allocline input.cd-alloc-inv {
  width: 8rem; font: inherit; font-size: 13px; padding: 5px 7px; color: var(--text);
  border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-sm, 4px); background: var(--surface, #fff);
}
.cd-allocline input.cd-alloc-amt {
  width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 13px; padding: 5px 7px; color: var(--text);
  border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-sm, 4px); background: var(--surface, #fff);
}
.cd-allocline .cd-psv { flex-direction: row; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cd-allocfoot { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cd-allocleft { font-weight: 700; font-variant-numeric: tabular-nums; }

/* buttons */
.cd-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-strong, #cbd5e1); background: var(--surface, #fff); color: var(--text);
}
.cd-btn:hover { border-color: var(--text-muted); }
.cd-btn-primary { background: var(--text); color: var(--surface, #fff); border-color: var(--text); }
.cd-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cd-btn-go { background: var(--pc-done); border-color: var(--pc-done); color: #fff; }
.cd-btn-go:hover { filter: brightness(1.08); }
.cd-btn-sm { font-size: 12px; padding: 5px 11px; }
.cd-btn:disabled { opacity: .4; cursor: not-allowed; }
.cd-btn:disabled:hover { border-color: var(--border-strong, #cbd5e1); background: var(--surface, #fff); color: var(--text); }
.cd-link {
  background: none; border: 0; font: inherit; font-size: 12px; color: var(--pc-confirm);
  cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.cd-btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* add bar + paste */
.cd-addbar { padding: 10px 0 2px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cd-addline {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--pc-confirm); background: none; border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: var(--r-sm, 4px); padding: 8px 15px; cursor: pointer;
}
.cd-addline:hover { border-color: var(--pc-confirm); background: rgba(47, 95, 199, .06); }
.cd-addline:disabled { opacity: .4; cursor: not-allowed; }
.cd-plus { font-size: 16px; line-height: 1; }
.cd-paste { margin-top: 12px; border-top: 1px dashed var(--border, #e2e8f0); padding-top: 10px; }
.cd-paste summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--pc-confirm);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.cd-paste summary::-webkit-details-marker { display: none; }
.cd-paste summary::before { content: "+"; font-family: var(--font-mono); }
.cd-paste[open] summary::before { content: "\2212"; }
.cd-pastebody { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 44rem; }
.cd-pastebody textarea {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; resize: vertical; width: 100%;
  padding: 8px 10px; color: var(--text); background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-sm, 4px);
}

/* totals rail */
.cd-rail {
  position: sticky; bottom: 0; z-index: 20; margin-top: 14px;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: var(--r-md, 6px); box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  display: flex; flex-wrap: wrap; align-items: stretch;
}
.cd-rc {
  padding: 9px 15px; display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid var(--border, #eef2f6); min-width: 6.6rem;
}
.cd-rc:last-child { border-right: 0; }
.cd-rc .cd-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cd-rc .cd-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-grand { background: var(--surface-alt, #f1f5f9); }
.cd-grand .cd-v { font-size: 21px; }
.cd-bal {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 15px;
  min-width: 14rem; font-weight: 700; font-size: 13.5px;
}
.cd-bal .cd-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.cd-bal.cd-idle { color: var(--text-muted); font-weight: 500; }
.cd-bal.cd-ok { color: var(--pc-done); }
.cd-bal.cd-off { color: var(--pc-danger); }
.cd-bal small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.cd-servernote {
  font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0;
  display: flex; align-items: baseline; gap: 6px;
}
.cd-servernote code {
  font-family: var(--font-mono); font-size: 11px; padding: 0 4px; border-radius: 3px;
  background: var(--surface-alt, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
}

.cd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.cd-spacer { flex: 1; }

.cd-toast {
  margin-top: 12px; padding: 9px 13px; border-radius: var(--r-md, 6px);
  font-size: 13px; font-weight: 600;
  background: rgba(79, 138, 57, .12); color: var(--pc-done);
}
.cd-toast-warn { background: rgba(194, 106, 18, .14); color: var(--pc-need); }
.cd-toast-bad  { background: rgba(214, 69, 69, .13); color: var(--pc-danger); }

/* post panel */
.cd-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 14px; }
.cd-post {
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 6px); padding: 14px 15px;
  display: flex; flex-direction: column; gap: 9px; background: var(--surface, #fff);
}
.cd-post h3 { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.cd-dest {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
.cd-dest-psv { background: rgba(31, 130, 150, .14); color: var(--pc-wait); }
.cd-dest-qb  { background: rgba(107, 82, 194, .14); color: var(--pc-handled); }
.cd-shape { font-size: 12.5px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.cd-shape b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-blocker { font-size: 12px; font-weight: 600; color: var(--pc-need); min-height: 1em; }
.cd-blocker.cd-clear { color: var(--pc-done); }
.cd-flagnote { font-size: 11.5px; color: var(--text-muted); }
.cd-dryrow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.cd-dryrow input { width: auto; }
.cd-result { margin-top: 14px; font-size: 12.5px; color: var(--text-secondary); }
.cd-resulttable, .cd-histtable { min-width: 44rem; }
.cd-resulttable td, .cd-histtable td { padding: 7px 9px; }

@media (max-width: 900px) { .cd-grid { min-width: 60rem; } }
@media (prefers-reduced-motion: reduce) { .cd-psv-loading .cd-who::after { animation: none; } }

/* print: the slip itself, nothing else */
@media print {
  .cd-noprint, .cd-actions, .cd-addbar, .cd-paste, .cd-x, .cd-split,
  .cd-col-x, .cd-col-psv, .cd-locked, .cd-toast, .cd-servernote, .cd-allocrow { display: none !important; }
  .cd-rail { position: static; box-shadow: none; }
  .cd-card { border: 0; padding: 0; }
  .cd-gridwrap { border: 0; overflow: visible; }
  .cd-grid { min-width: 0; }
  .cd-grid input, .cd-grid select { border: 0; padding: 2px 0; background: none; }
}

/* Flyout PDF pane can now stack two documents (invoice + the customer's ACH remittance). Scroll the
   pane; each document gets a tall frame. Labels separate them. */
.pay-ov-pdf { flex-direction: column; overflow-y: auto; }
.pay-ov-pdf .pay-pdf-frame { height: 80vh; min-height: 420px; }
#pay-ov-remit:not(:empty) { border-top: 2px solid var(--border, #e2e8f0); }
.pay-ov-pdf-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px 4px; background: var(--surface, #fff); position: sticky; top: 0; z-index: 1; }