/* card-statement.css
   =====================================================================
   Production-grade styling for the Credit Card Statement review workflow
   (window.balenCardStatementReview). Billy-simple, readable, safe.
   Token-based (css/tokens.css + css/design-tokens.css). Presentation only --
   no accounting logic lives here.
   ===================================================================== */

.csr-screen { max-width: 760px; margin: 0 auto; padding: 4px 2px 40px; }
.csr-screen > h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 8px 0 4px; }

/* ---- cards ---------------------------------------------------------- */
.csr-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: var(--radius-card-lg, 18px);
  padding: 18px 18px 16px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
.csr-card > h3 { font-size: 1.18rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; line-height: 1.3; }

/* ---- status + warning banners (top of the summary) ----------------- */
.csr-status {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--pos-text, #0a7d5a);
  background: var(--accent-soft, #e9f7f1); border: 1px solid var(--accent-border, #bfe6d7);
  border-radius: var(--radius-button, 12px); padding: 10px 12px; margin: 10px 0;
}
.csr-warning {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .92rem; font-weight: 600; color: var(--warn, #9a6a00);
  background: var(--warn-tint, #fff4e0); border: 1px solid #f1d9a8;
  border-radius: var(--radius-button, 12px); padding: 10px 12px; margin: 10px 0 14px;
}
.csr-multicur {
  font-size: .88rem; color: var(--text-secondary); background: var(--info-bg, #eef4fe);
  border: 1px solid #cfe0f7; border-radius: 10px; padding: 8px 11px; margin: 6px 0 12px;
}

/* ---- per-currency block -------------------------------------------- */
.csr-cur-block { border: 1px solid var(--border-subtle, #eef0f3); border-radius: 14px; padding: 12px 12px 8px; margin: 12px 0; background: var(--surface-2, #fafbfc); }
.csr-cur-h {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text, #0a6b54);
  background: var(--accent-soft, #e9f7f1); border-radius: var(--radius-pill, 999px);
  padding: 3px 11px; margin-bottom: 10px;
}

/* ---- the big 4 answers --------------------------------------------- */
.csr-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.csr-answer {
  background: var(--surface, #fff); border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.csr-answer .row-meta { font-size: .76rem; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.csr-answer b { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }

/* ---- sections ------------------------------------------------------ */
.csr-group { border-radius: 12px; padding: 4px 0 2px; margin: 14px 0 4px; }
.csr-h {
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 6px 2px 8px; display: flex; align-items: center; gap: 6px;
}
.csr-recognized .csr-h { color: var(--pos-text, #0a7d5a); }
.csr-needsok    .csr-h { color: var(--warn, #9a6a00); }
.csr-needlook   .csr-h { color: var(--neg-text, #b42318); }
.csr-ignored-sec .csr-h { color: var(--text-tertiary); }

/* summary rows: icon+label | count | amount | note */
.csr-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 10px; padding: 11px 12px; margin: 6px 0; border-radius: 11px;
  background: var(--surface, #fff); border: 1px solid var(--border-subtle, #eef0f3);
  font-size: .96rem;
}
.csr-row > span:first-child { font-weight: 600; color: var(--text-primary); }
.csr-row > span:nth-child(2) { font-weight: 700; color: var(--text-secondary); min-width: 1.6em; text-align: right; }
.csr-row > span:nth-child(3) { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.csr-row .row-meta { grid-column: 1 / -1; font-size: .8rem; color: var(--text-tertiary); margin-top: 1px; }
.csr-row.obj-evidence { border-left: 4px solid var(--pos-text, #0a7d5a); }
.csr-row.obj-payment  { border-left: 4px solid #6b7280; }
.csr-row.obj-stmt-line{ border-left: 4px solid #cbd2da; }
.csr-row.obj-expense  { border-left: 4px solid var(--warn, #c2891a); }

.csr-recon { margin-top: 10px; font-size: .82rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ---- who owes what (recovery panel) -------------------------------- */
.csr-recovery { border: 2px solid var(--accent-border, #bfe6d7); }
.csr-recovery > h3 { color: var(--accent-text, #0a6b54); }
.csr-rec-cur { border-top: 1px dashed var(--border, #e3e6ea); padding-top: 10px; margin-top: 10px; }
.csr-rec-cur:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.csr-rec-curh { font-size: .8rem; font-weight: 800; letter-spacing: .05em; color: var(--accent-text, #0a6b54); margin-bottom: 6px; }
.csr-rec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: .95rem; }
.csr-rec-row b { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.csr-rec-big { font-size: 1.35rem !important; color: var(--accent-text, #0a6b54) !important; }
.csr-rec-breakdown { padding: 4px 0 4px 10px; border-left: 2px solid var(--border-subtle, #eef0f3); margin: 2px 0; }
.csr-rec-sub { font-size: .85rem; color: var(--text-secondary); padding: 2px 0; }

/* ---- line cards (exceptions / review) ------------------------------ */
.obj-stmt-line.csr-exc {
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
  border-left: 4px solid var(--warn, #c2891a); border-radius: 14px;
  padding: 14px 14px 12px; margin: 12px 0;
}
.csr-exc > div:first-child { font-size: 1.05rem; color: var(--text-primary); }
.csr-exc > div:first-child strong { font-weight: 700; }
.csr-exc > div:first-child span[style] { font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.csr-exc .row-meta { font-size: .85rem; color: var(--text-secondary); margin: 4px 0; }

/* BIG, clear action buttons -- never hide important choices in tiny text */
.csr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.csr-actions .btn, .csr-actions .btn-sm {
  width: 100%; min-height: 46px; font-size: .98rem !important; font-weight: 700;
  border-radius: 12px; padding: 10px 12px; white-space: normal; line-height: 1.2;
  border: 1.5px solid var(--border, #d7dbe0); background: var(--surface, #fff);
  color: var(--text-primary); cursor: pointer;
}
.csr-actions .btn:hover, .csr-actions .btn-sm:hover { border-color: var(--accent, #0a7d5a); background: var(--accent-soft, #eefaf5); }
.csr-exc-member { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; color: var(--text-secondary); }
.csr-exc-member select { min-height: 42px; flex: 1 1 140px; border-radius: 10px; border: 1.5px solid var(--border, #d7dbe0); padding: 6px 10px; font-size: .95rem; }

/* ---- review-queue navigation + progress + resolved banner --------- */
.csr-exc-banner { background: var(--pos-soft, #e7f7f0); color: var(--pos-text, #0a7d5a); border: 1px solid var(--pos-border, #bfe6d7); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; font-weight: 600; font-size: .92rem; }
.csr-exc-progress { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 8px; }
.csr-exc-progress b { font-weight: 800; }
.csr-exc-status { font-weight: 600; color: var(--text-tertiary); }
.csr-exc-hints { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border-subtle, #eef0f3); font-size: .82rem; color: var(--text-tertiary); }
.csr-exc-hints b { color: var(--pos-text, #0a7d5a); }
.csr-exc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.csr-exc-nav .btn { min-height: 46px; font-weight: 700; }
.csr-exc-nav .btn[disabled] { opacity: .4; pointer-events: none; }
.csr-exc-nav2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.csr-exc-nav2 .btn { flex: 1 1 140px; min-height: 42px; }
.csr-exc-done { text-align: center; }
.csr-exc-done h3 { color: var(--pos-text, #0a7d5a); margin: 8px 0 4px; }
.csr-exc-done .btn { margin-top: 12px; }

/* ---- confirm new costs (per currency) ------------------------------ */
.csr-confirm-cur { margin: 12px 0; }
.csr-confirm-cur .csr-cur-h { background: var(--warn-tint, #fff4e0); color: var(--warn, #9a6a00); }
.csr-confirm-row {
  border: 1px solid var(--border-subtle, #eef0f3); border-left: 4px solid var(--warn, #c2891a);
  border-radius: 12px; padding: 12px; margin: 8px 0; background: var(--surface, #fff);
}
.csr-confirm-row label { display: block; font-size: 1rem; color: var(--text-primary); cursor: pointer; }
.csr-confirm-row input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.csr-confirm-row span[style] { font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.csr-resp-wrap { margin-top: 10px; font-size: .9rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csr-resp-wrap select.csr-resp { min-height: 44px; flex: 1 1 180px; border-radius: 10px; border: 1.5px solid var(--border, #d7dbe0); padding: 8px 10px; font-size: .98rem; font-weight: 600; }

/* ---- pay / payoff (per currency) ----------------------------------- */
.csr-pay-personal, .csr-pay-partner { border: 1px solid var(--border-subtle, #eef0f3); border-radius: 12px; padding: 12px; margin: 10px 0; background: var(--surface, #fff); }
.csr-pay-personal > .fl, .csr-pay-partner > .fl { display: block; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.csr-pay-cur { border-top: 1px dashed var(--border-subtle, #eef0f3); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csr-pay-cur:first-child { border-top: 0; }
.csr-pay-cur select, .csr-pay-cur input { min-height: 42px; border-radius: 10px; border: 1.5px solid var(--border, #d7dbe0); padding: 6px 10px; font-size: .95rem; }
.csr-recoverable { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.csr-recoverable b { font-size: 1.25rem; color: var(--accent-text, #0a6b54); font-variant-numeric: tabular-nums; }

/* ---- buttons (general, within cards) ------------------------------- */
.csr-card > .btn, .csr-screen > .btn, .csr-done > .btn {
  min-height: var(--btn-h-primary, 48px); font-size: 1rem; font-weight: 700;
  border-radius: 12px; padding: 12px 16px; margin: 10px 6px 0 0; cursor: pointer;
  border: 0; background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823);
}
.csr-card > .btn[disabled], .btn.csr-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.csr-card > .btn.btn-secondary { background: var(--surface, #fff); color: var(--accent-text, #0a6b54); border: 1.5px solid var(--accent-border, #bfe6d7); }
.csr-card > .btn.btn-sm, .csr-done .btn-sm { min-height: 40px; font-size: .92rem; background: var(--surface, #fff); color: var(--text-primary); border: 1.5px solid var(--border, #d7dbe0); }

/* ---- statement list ------------------------------------------------ */
.csr-list-row {
  display: block; padding: 14px 16px; margin: 10px 0; cursor: pointer;
  border: 1px solid var(--border, #e3e6ea); border-radius: 14px; background: var(--surface, #fff);
}
.csr-list-row:hover { border-color: var(--accent, #0a7d5a); box-shadow: 0 1px 6px rgba(10,125,90,.08); }
.csr-list-row strong { font-size: 1.05rem; color: var(--text-primary); }

/* ---- completion ---------------------------------------------------- */
.csr-done { background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); border-radius: 18px; padding: 18px; margin: 14px 0; }
.csr-done-curh { font-size: .8rem; font-weight: 800; color: var(--accent-text, #0a6b54); letter-spacing: .05em; margin: 12px 0 4px; }
.csr-done-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csr-done-grid > div { background: var(--surface-2, #fafbfc); border: 1px solid var(--border-subtle, #eef0f3); border-radius: 11px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--text-tertiary); font-weight: 600; }
.csr-done-grid > div b { font-size: 1.1rem; color: var(--text-primary); font-weight: 700; }

/* ---- intent screen ------------------------------------------------- */
.csr-intent { border: 1px solid var(--border, #e3e6ea); border-radius: 14px; padding: 14px 16px; }
.csr-intent:hover { border-color: var(--accent, #0a7d5a); }
.csr-intent strong { font-size: 1.05rem; color: var(--text-primary); }

/* ---- progress overlay (FAB statement upload) ----------------------- */
.csr-progress-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(16,24,40,.45); backdrop-filter: blur(2px);
}
.csr-progress-box {
  background: var(--surface, #fff); border-radius: 18px; padding: 24px 28px; max-width: 340px; text-align: center;
  box-shadow: 0 8px 40px rgba(16,24,40,.25);
}
.csr-progress-box .csr-spin {
  width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid var(--accent-soft, #d8f0e7); border-top-color: var(--accent, #0a7d5a);
  animation: csr-spin 0.9s linear infinite;
}
@keyframes csr-spin { to { transform: rotate(360deg); } }
.csr-progress-box .csr-progress-msg { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.csr-progress-box .csr-progress-sub { font-size: .85rem; color: var(--text-secondary); margin-top: 6px; }

/* ---- pre-post confirmation modal ----------------------------------- */
.csr-modal-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: rgba(16,24,40,.5); padding: 16px; }
.csr-modal { background: var(--surface, #fff); border-radius: 18px; padding: 20px; max-width: 440px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 8px 40px rgba(16,24,40,.3); }
.csr-modal h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.csr-modal .csr-modal-warn { font-size: .9rem; color: var(--warn, #9a6a00); background: var(--warn-tint, #fff4e0); border: 1px solid #f1d9a8; border-radius: 10px; padding: 9px 11px; margin: 8px 0 12px; }
.csr-modal .csr-modal-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle, #eef0f3); font-size: .96rem; }
.csr-modal .csr-modal-row b { font-variant-numeric: tabular-nums; }
.csr-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.csr-modal-actions .btn { flex: 1; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; border: 0; }
.csr-modal-actions .btn.csr-confirm-yes { background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823); }
.csr-modal-actions .btn.csr-confirm-no { background: var(--surface, #fff); color: var(--text-primary); border: 1.5px solid var(--border, #d7dbe0); }

/* ---- statement-level "amount owed to the bank" card ---------------- */
.csr-bank { border: 2px solid var(--border, #d7dbe0); }
.csr-bank > h3 { color: var(--text-primary); }
.csr-bank .csr-bank-explain { margin: 2px 0 10px; }
.csr-bank-curblock { border-top: 1px dashed var(--border-subtle, #eef0f3); padding: 4px 0; }
.csr-bank-curblock:first-of-type { border-top: 0; }
.csr-bank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 2px; font-size: 1rem; }
.csr-bank-row > span:first-child { font-weight: 600; color: var(--text-secondary); }
.csr-bank-row b { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.csr-bank-sub { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 2px 10px; font-size: .82rem; color: var(--text-tertiary); }
.csr-bank-sub > span:last-child { font-variant-numeric: tabular-nums; }
.csr-bank-lowconf { margin: 4px 0; color: var(--warn, #9a6a00); font-weight: 600; }
.csr-bank-meta { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9rem; }
.csr-bank-meta > span:first-child { color: var(--text-tertiary); }
.csr-bank-status { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle, #eef0f3); }
.csr-bank-status b { color: var(--text-primary); }
.csr-bank .btn { margin-top: 10px; }

/* ---- statement-details edit form (per-currency) -------------------- */
.csr-bank-editcur { border: 1px solid var(--border-subtle, #eef0f3); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--surface-2, #fafbfc); }
.csr-bank-editcur-h { font-size: .8rem; font-weight: 800; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 4px; }
.csr-bank-editcur input { margin-bottom: 6px; }

/* ---- payer selection card (review context only, no accounting) ----- */
.csr-payer { border: 2px solid var(--warn, #e3b341); background: var(--warn-tint, #fffaf0); }
.csr-payer > h3 { color: var(--warn, #9a6a00); }
.csr-payer-opt { display: block; border: 1.5px solid var(--border, #d7dbe0); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); cursor: pointer; }
.csr-payer-opt strong { font-weight: 700; color: var(--text-primary); }
.csr-payer-opt .row-meta { font-size: .85rem; color: var(--text-secondary); margin-top: 2px; }
.csr-payer-opt.csr-payer-on { border-color: var(--accent, #0a7d5a); background: var(--accent-soft, #eefaf5); }
.csr-payer-opt.csr-payer-on strong { color: var(--accent-text, #0a6b54); }

/* ---- preview ("who may owe what after approval") ------------------- */
.csr-preview { border: 2px solid var(--border, #d7dbe0); }
.csr-preview > h3 { color: var(--text-primary); }
.csr-preview .csr-rec-big { color: var(--text-primary) !important; }
.csr-rec-payernote { margin: 6px 0 4px; color: var(--warn, #9a6a00); font-weight: 600; }
.csr-recon-note { margin: 4px 0 2px; font-size: .82rem; color: var(--text-tertiary); }

/* ---- small responsive --------------------------------------------- */
@media (max-width: 460px) {
  .csr-answers, .csr-done-grid { grid-template-columns: 1fr; }
  .csr-actions { grid-template-columns: 1fr; }
}

/* ---- A/P-first model (MIG-350): Q1 A/P + Q2 payment + Q3 line table ---- */
.csr-ap-block { padding: 8px 0; }
.csr-ap-owed { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.csr-ap-status { margin: 6px 0 2px; font-size: .9rem; }
.csr-ap-paid { color: var(--accent-text, #0a6b54); font-weight: 700; }
.csr-ap-open { color: var(--warn-text, #8a5a00); font-weight: 600; }
.csr-ap-action { margin-top: 6px; }
.csr-ap-record, .csr-bp-record { background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823); border: 0; }
.csr-undo { margin-top: 6px; background: var(--surface, #fff); border: 1.5px solid var(--border, #d7dbe0); color: var(--text-secondary); }
.csr-pay-done .csr-ap-paid { display: block; }

/* Q3 line table */
.csr-line-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.csr-line-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.csr-line-table th, .csr-line-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle, #eef0f3); vertical-align: top; }
.csr-line-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); white-space: nowrap; }
.csr-line-table td.csr-amt { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.csr-line-row.csr-line-done { background: var(--accent-soft, #f3faf7); }
.csr-line-result { font-weight: 600; color: var(--accent-text, #0a6b54); }
.csr-line-decide { min-height: 38px; border-radius: 9px; border: 1.5px solid var(--border, #d7dbe0); padding: 5px 8px; max-width: 220px; }
.csr-match { font-size: .82rem; }
.csr-match-high { color: var(--accent-text, #0a6b54); font-weight: 600; }
.csr-match-medium { color: var(--text-secondary); }
.csr-match-low { color: var(--text-tertiary); }

/* ---- A/P-first Phase-1 refinements: payer preview, line cards, match ---- */
.csr-ap-missing { color: var(--warn-text, #8a5a00); font-weight: 600; }
.csr-ap-enter { background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823); border: 0; }

.csr-payer-preview { margin: 10px 0; padding: 12px 14px; border: 1.5px solid var(--accent, #0a7d5a); border-radius: 12px; background: var(--accent-soft, #eefaf5); }
.csr-prev-head { font-size: 1.05rem; }
.csr-prev-noacct { color: var(--accent-text, #0a6b54); font-weight: 600; margin: 4px 0; }
.csr-prev-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.csr-prev-cur { flex: 1 1 220px; border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 10px; padding: 8px 10px; background: var(--surface, #fff); }
.csr-prev-cur-h { font-weight: 700; margin-bottom: 4px; }
.csr-prev-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: .9rem; }
.csr-prev-row b { font-variant-numeric: tabular-nums; }
.csr-prev-strong b { color: var(--accent-text, #0a6b54); font-size: 1.05rem; }
.csr-prev-foot { margin-top: 8px; }

.csr-view-toggle { display: flex; gap: 6px; margin: 6px 0 10px; }
.csr-view-toggle .chip { cursor: pointer; }
.csr-view-toggle .csr-view-on { background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823); border-color: var(--accent, #0a7d5a); }

.csr-lc-list { display: flex; flex-direction: column; gap: 10px; }
.csr-lc { border: 1.5px solid var(--border, #d7dbe0); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); }
.csr-lc-done { background: var(--accent-soft, #f3faf7); }
.csr-lc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.csr-lc-merch { font-size: 1.02rem; }
.csr-lc-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.csr-lc-meta { margin: 2px 0 8px; }
.csr-lc-sec { margin-top: 8px; }
.csr-lc-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 3px; }
.csr-lc .csr-line-decide { width: 100%; max-width: 100%; }

.csr-match { font-size: .85rem; }
.csr-match-merch { font-size: .95rem; }
.csr-usematch { margin-top: 6px; background: var(--accent, #0a7d5a); color: var(--accent-on-strong, #082823); border: 0; }
.csr-match-high .csr-match-merch { color: var(--accent-text, #0a6b54); }

/* ---- accounting-chain checklist + step notes + view links ---- */
.csr-chain { background: var(--surface, #fff); }
.csr-chk-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-subtle, #eef0f3); }
.csr-chk-row:first-of-type { border-top: 0; }
.csr-chk-n { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft, #eefaf5); color: var(--accent-text, #0a6b54); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.csr-chk-lbl { flex: 1; }
.csr-chk-st { white-space: nowrap; font-weight: 600; }
.csr-chk-yes { color: var(--accent-text, #0a6b54); }
.csr-chk-part { color: var(--warn-text, #8a5a00); }
.csr-chk-no { color: var(--text-tertiary); }
.csr-note-info { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--info-soft, #eef4ff); color: var(--info-text, #284b8a); }
.csr-prev-warn { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft, #fff5e6); color: var(--warn-text, #8a5a00); font-weight: 600; }
.csr-view-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.csr-view-links .btn { background: var(--surface, #fff); border: 1.5px solid var(--accent, #0a7d5a); color: var(--accent-text, #0a6b54); }

/* ---- corrected payer preview (full bank reimbursement + separate allocation) ---- */
.csr-prev-alloc { margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2, #f6f8fa); }
.csr-prev-alloc-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 3px; }
.csr-prev-net { border-top: 1px solid var(--border, #d7dbe0); margin-top: 4px; padding-top: 4px; }
.csr-prev-net b { color: var(--accent-text, #0a6b54); }

/* ---- legacy payment-note correction warning ---- */
.csr-legacy-warn { border: 1.5px solid var(--warn, #e0a800); background: var(--warn-soft, #fff8e6); }
.csr-legacy-warn h3 { color: var(--warn-text, #8a5a00); }

/* ---- dark mode: warn/info/legacy readability (non-token light fallbacks do not
   adapt, so bind them here to dark-appropriate, AA-contrast colors) ---- */
[data-theme="dark"] .csr-ap-open,
[data-theme="dark"] .csr-chk-part,
[data-theme="dark"] .csr-ap-missing,
[data-theme="dark"] .csr-prev-warn,
[data-theme="dark"] .csr-legacy-warn h3 { color: #F2C368; }              /* light amber, AA on dark surface */
[data-theme="dark"] .csr-legacy-warn { background: var(--warn-tint, #33260C); border-color: #E0992A; }
[data-theme="dark"] .csr-prev-warn { background: #33260C; }
[data-theme="dark"] .csr-note-info { background: #16263F; color: #CFE0FF; }
[data-theme="dark"] .csr-note-info { border: 1px solid #2C4A80; }
/* line table + cards: ensure body/secondary text uses the adaptive tokens */
[data-theme="dark"] .csr-line-table th { color: var(--text-tertiary); }
[data-theme="dark"] .csr-lc, [data-theme="dark"] .csr-prev-cur { background: var(--surface-2); }

/* ============================================================
   UI POLISH PASS — Call Funds modal + account/statement cards + badges.
   Uses theme tokens so light AND dark both read. (Presentation only.)
   ============================================================ */

/* --- Call Funds modal: clearly selectable allocation-method cards --- */
.csfc-methods { margin: 8px 0 4px; }
.csfc-method {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--border, #d7dbe0); border-radius: 12px;
  background: var(--surface, #fff); padding: 12px 14px; margin: 8px 0; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.csfc-method:hover { border-color: var(--accent-border, #bfe6d7); background: var(--surface-2, #fafbfc); }
.csfc-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.csfc-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--border, #cfd4da); background: var(--surface, #fff);
  color: transparent; font-weight: 800; font-size: 14px; line-height: 19px; text-align: center; margin-top: 1px;
}
.csfc-method-text { flex: 1 1 auto; }
.csfc-method-title { display: block; font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.csfc-method-desc { display: block; color: var(--text-secondary); font-size: .86rem; margin-top: 2px; }
/* SELECTED state — obvious: accent border + tint bg + inset ring + checkmark. */
.csfc-method.csfc-on, .csfc-method:has(.csfc-radio:checked) {
  border-color: var(--accent, #0e9c8e);
  background: var(--accent-tint, #e4f4f1);
  box-shadow: 0 0 0 1.5px var(--accent, #0e9c8e) inset;
}
.csfc-method.csfc-on .csfc-check, .csfc-method:has(.csfc-radio:checked) .csfc-check {
  background: var(--accent, #0e9c8e); border-color: var(--accent, #0e9c8e); color: var(--accent-on, #fff);
}
.csfc-sub { margin: 6px 2px 2px; }
.csfc-sublabel { font-weight: 700; color: var(--text-primary); font-size: .9rem; margin: 6px 0 4px; }
.csfc-manrow { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; gap: 10px; }
.csfc-input, .csfc-select {
  border: 1.5px solid var(--border, #d7dbe0); border-radius: 8px; background: var(--surface, #fff);
  color: var(--text-primary); padding: 8px 10px; font-size: .95rem;
}
.csfc-input { width: 130px; text-align: right; }
.csfc-select { width: 100%; }
.csfc-empty { color: var(--text-secondary); font-size: .88rem; }
/* Preview — prominent, contained. */
.csfc-preview {
  border: 1.5px solid var(--accent-border, #bfe6d7); border-radius: 12px;
  background: var(--accent-soft, var(--surface-2, #f4faf8)); padding: 12px 14px; margin: 12px 0;
}
.csfc-preview-head { font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.csfc-prow { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0; }
.csfc-pname { color: var(--text-primary); }
.csfc-ppct { color: var(--text-tertiary); font-size: .82rem; margin-left: 4px; }
.csfc-pamt { color: var(--text-primary); font-weight: 700; }
.csfc-total { display: flex; justify-content: space-between; font-weight: 800; color: var(--text-primary);
  border-top: 1.5px solid var(--accent-border, #bfe6d7); margin-top: 8px; padding-top: 6px; }
.csfc-note { color: var(--text-secondary); font-size: .9rem; }
.csfc-warn { color: var(--danger, #c0392b); font-size: .86rem; margin-top: 4px; font-weight: 600; }
.csfc-actions { display: flex; gap: 10px; margin-top: 14px; }
.csfc-confirm { flex: 1 1 auto; min-height: 46px; font-weight: 800;
  background: var(--accent, #0e9c8e); color: var(--accent-on, #fff); border: none; border-radius: 12px; }
.csfc-confirm[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.csfc-cancel { min-height: 46px; background: var(--surface, #fff); color: var(--text-secondary);
  border: 1.5px solid var(--border, #d7dbe0); border-radius: 12px; }
[data-theme="dark"] .csfc-method { background: var(--surface, #14201d); }
[data-theme="dark"] .csfc-method.csfc-on, [data-theme="dark"] .csfc-method:has(.csfc-radio:checked) { background: rgba(14,156,142,.20); }
[data-theme="dark"] .csfc-preview { background: rgba(14,156,142,.12); }

/* --- Account + statement list: cleaner, obviously tappable cards --- */
.csr-acct-row, .csr-stmt-row {
  border: 1.5px solid var(--border, #d7dbe0); border-radius: 14px; background: var(--surface, #fff);
  padding: 14px 16px; margin: 10px 0; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.csr-acct-row:hover, .csr-stmt-row:hover { border-color: var(--accent, #0e9c8e); box-shadow: 0 1px 10px rgba(0,0,0,.06); }
.csr-acct-row:active, .csr-stmt-row:active { transform: scale(.997); }
.csr-acct-name, .csr-stmt-title { font-size: 1.08rem; font-weight: 700; color: var(--text-primary); }
.csr-acct-row .row-meta, .csr-stmt-row .row-meta { color: var(--text-secondary); font-size: .9rem; margin-top: 3px; }
.csr-stmt-open { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--accent-text, #0B7A6F); }

/* --- Status badges --- */
.csr-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent; margin-left: 4px; vertical-align: middle; }
.csr-badge-review { background: #FDF0D5; color: #7A5B00; border-color: #F0D89A; }
.csr-badge-paid { background: var(--accent-tint, #E4F4F1); color: var(--accent-text, #0B7A6F); border-color: var(--accent-border, #bfe6d7); }
.csr-badge-called { background: #E7F0FF; color: #1F4E9B; border-color: #C3D8F5; }
.csr-badge-pending { background: #FDECEC; color: #A23B2E; border-color: #F3C7C1; }
.csr-badge-settled { background: #E9EFEC; color: #445A52; border-color: #CFD9D3; }
[data-theme="dark"] .csr-badge-review { background: #33260C; color: #F0C674; border-color: #574318; }
[data-theme="dark"] .csr-badge-paid { background: rgba(14,156,142,.18); color: #2FD0C0; border-color: #2C4A44; }
[data-theme="dark"] .csr-badge-called { background: #16263F; color: #9DBEF0; border-color: #2C4A80; }
[data-theme="dark"] .csr-badge-pending { background: #3A1D1A; color: #F0A79B; border-color: #6A322A; }
[data-theme="dark"] .csr-badge-settled { background: #1C2A26; color: #A9C0B7; border-color: #33453E; }