/* ═══════════════════════════════════════════════════════════
   Finance presentation (AP / AR) — Version A
   Summary band + split list/detail + party band. Presentation only:
   every figure is supplied by the canonical AP/AR read models.
   AP = teal band, AR = indigo band. Status colours are shared.
═══════════════════════════════════════════════════════════ */

.fin {
  --fin-ink: var(--text, #101828);
  --fin-ink-2: #344054;
  --fin-muted: #667085;
  --fin-faint: #98a2b3;
  --fin-surface: #ffffff;
  --fin-surface-2: #f7f8fa;
  --fin-hover: #f3f5f8;
  --fin-sel: #eef0ff;
  --fin-line: #e4e7ec;
  --fin-line-strong: #d0d5dd;
  --fin-brand: var(--brand, #4f46e5);
  --fin-brand-text: #4338ca;
  /* Module accent for tabs and action buttons: AP teal (AR indigo below) */
  --fin-accent: #0e7c86; --fin-accent-ink: #0a5d64; --fin-accent-soft: #e4f5f6; --fin-accent-line: #a7dade; --fin-accent-hover: #d2eef0;

  --fin-late: #b42318;  --fin-late-soft: #fef3f2;
  --fin-soon: #b54708;  --fin-soon-soft: #fffaeb;
  --fin-ok: #067647;    --fin-ok-soft: #ecfdf3;
  --fin-review: #8a5a00; --fin-review-soft: #fff6e0;

  --fin-a0: #9db4c8; --fin-a1: #f2c14e; --fin-a2: #ec9341; --fin-a3: #dd5f33; --fin-a4: #b42318; --fin-anone: #c7ccd4;

  /* AP (default) */
  --fin-band-a: #0c3a43; --fin-band-b: #114a55; --fin-band-3: #0f424c;
  --fin-bar: #5ec4c9; --fin-bar-hot: #7ff3f7;
  --fin-band-ink: #e3eff1; --fin-band-dim: #8fb3b8;
  --fin-band-line: rgba(255,255,255,.12); --fin-band-sel: rgba(255,255,255,.09);
  --fin-fig-late: #ffb4ab; --fin-fig-review: #ffd88a; --fin-fig-ok: #9be7bd;

  --fin-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--fin-font);
  font-variant-numeric: tabular-nums;
  color: var(--fin-ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.fin--ar {
  --fin-band-a: #1e1f4f; --fin-band-b: #2c2e72; --fin-band-3: #25275f;
  --fin-bar: #a5b4fc; --fin-bar-hot: #c7d2fe;
  --fin-band-ink: #e6e8ff; --fin-band-dim: #a3a8d6;
  --fin-accent: #4f46e5; --fin-accent-ink: #3730a3; --fin-accent-soft: #eef0ff; --fin-accent-line: #c5c8f8; --fin-accent-hover: #e0e3ff;
}
.fin *, .fin *::before, .fin *::after { box-sizing: border-box; }
.fin h2, .fin h3, .fin h4 { margin: 0; text-wrap: balance; }
.fin button, .fin input, .fin select, .fin textarea, .fin .btn, .fin h1, .fin h2, .fin h3, .fin h4 { font-family: var(--fin-font); }
.fin .fin-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin .fin-ref { font-family: inherit; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.fin .fin-muted { color: var(--fin-muted); }
.fin .fin-strong { font-weight: 600; color: var(--fin-ink); }
.fin .fin-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fin :focus-visible { outline: 2px solid var(--fin-brand); outline-offset: 2px; border-radius: 6px; }

.fin-app { background: var(--fin-surface); border: 1px solid var(--fin-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.06); }

/* ── Summary band ─────────────────────────────────────────── */
.fin-band { background: linear-gradient(180deg, var(--fin-band-a) 0%, var(--fin-band-b) 100%); color: var(--fin-band-ink); }
.fin-band__in { padding: 22px 24px 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 24px 44px; }
.fin-band__title { font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.fin-band__sub { font-size: 12.5px; color: var(--fin-band-dim); margin-top: 2px; }
.fin-band__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fin-figs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.fin-figs--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fin-fig { all: unset; box-sizing: border-box; display: block; min-width: 0; border-radius: 8px; padding: 6px 8px; margin: -6px -8px; }
button.fin-fig { cursor: pointer; }
button.fin-fig:hover, .fin-fig[aria-pressed="true"] { background: var(--fin-band-sel); }
.fin-fig[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
button.fin-fig:focus-visible { outline: 2px solid #fff; }
.fin-fig__label { display: block; font-size: 12px; color: var(--fin-band-dim); }
.fin-fig__value { display: block; font-size: 25px; font-weight: 600; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-fig__value--late { color: var(--fin-fig-late); }
.fin-fig__value--review { color: var(--fin-fig-review); }
.fin-fig__value--ok { color: var(--fin-fig-ok); }
.fin-fig__sub { display: block; font-size: 12px; color: var(--fin-band-dim); }
.fin-band__note { font-size: 11.5px; color: var(--fin-band-dim); margin-top: 14px; }
.fin-filterline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 24px; background: var(--fin-band-3); color: var(--fin-band-ink); font-size: 12.5px; border-top: 1px solid var(--fin-band-line); }
.fin-filterline button { all: unset; cursor: pointer; color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Band charts are SVG; text and marks take band colours */
.fin-chart__hd { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--fin-band-dim); margin-bottom: 8px; flex-wrap: wrap; }
.fin-chart__hd b { color: #fff; font-weight: 600; }
.fin-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fin svg.fin-agebar { height: 10px; overflow: hidden; border-radius: 3px; }
.fin svg.fin-agebar--lg { height: 14px; }
.fin svg.fin-mini { width: 64px; height: 4px; overflow: hidden; }
.fin-figs--4 .fin-fig__value { font-size: 22px; }
.fin-chart .fin-svg-grid { stroke: rgba(255,255,255,.12); stroke-dasharray: 3 3; }
.fin-chart .fin-svg-axis { stroke: rgba(255,255,255,.22); }
.fin-chart .fin-svg-bar { fill: var(--fin-bar); }
.fin-chart .fin-svg-bar--late { fill: var(--fin-fig-late); }
.fin-chart .fin-svg-bar--pay { fill: var(--fin-fig-ok); }
.fin-chart .fin-svg-bar--zero { fill: rgba(255,255,255,.18); }
.fin-chart .fin-svg-val { fill: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.fin-chart .fin-svg-lbl { fill: var(--fin-band-dim); font-size: 11px; }
.fin-chart g.fin-svg-col { cursor: pointer; }
.fin-chart g.fin-svg-col:focus-visible { outline: none; }
.fin-chart g.fin-svg-col:focus-visible .fin-svg-bar, .fin-chart g.fin-svg-col[aria-pressed="true"] .fin-svg-bar { fill: var(--fin-bar-hot); stroke: #fff; stroke-width: 2; }
.fin-chart g.fin-svg-col:hover .fin-svg-bar { filter: brightness(1.15); }
.fin-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--fin-band-dim); }
.fin-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.fin-legend b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Aging distribution bar (SVG) */
.fin-agebar { display: block; width: 100%; height: 10px; }
.fin-agebar--lg { height: 14px; }
.fin-seg-b0 { fill: var(--fin-a0); } .fin-seg-b1 { fill: var(--fin-a1); } .fin-seg-b2 { fill: var(--fin-a2); }
.fin-seg-b3 { fill: var(--fin-a3); } .fin-seg-b4 { fill: var(--fin-a4); } .fin-seg-none { fill: var(--fin-anone); }
.fin-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.fin-sw-b0 { background: var(--fin-a0); } .fin-sw-b1 { background: var(--fin-a1); } .fin-sw-b2 { background: var(--fin-a2); }
.fin-sw-bar { background: var(--fin-bar); } .fin-sw-pay { background: var(--fin-fig-ok); }
.fin-sw-b3 { background: var(--fin-a3); } .fin-sw-b4 { background: var(--fin-a4); } .fin-sw-none { background: var(--fin-anone); }
.fin-agelg { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.fin-agelg > div { min-width: 0; }
.fin-agelg span { display: flex; align-items: center; font-size: 12px; color: var(--fin-band-dim); }
.fin-agelg b { display: block; font-size: 15px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-agelg small { font-size: 11.5px; color: var(--fin-band-dim); }
.fin-match { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; color: var(--fin-fig-ok); background: rgba(155,231,189,.1); border: 1px solid rgba(155,231,189,.3); }
.fin-match--bad { color: var(--fin-fig-late); background: rgba(255,180,171,.1); border-color: rgba(255,180,171,.35); }

/* ── Split view ───────────────────────────────────────────── */
.fin-split { display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); min-height: 640px; }
.fin-list { border-right: 1px solid var(--fin-line); display: flex; flex-direction: column; min-width: 0; background: var(--fin-surface); }
.fin-list__hd { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--fin-line); }
.fin-list__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-input { width: 100%; height: 34px; border: 1px solid var(--fin-line-strong); border-radius: 8px; background: var(--fin-surface); padding: 0 12px; font: inherit; font-size: 13px; color: var(--fin-ink); }
.fin-select { border: 0; background: none; font: inherit; font-size: 12px; color: var(--fin-ink-2); font-weight: 500; }
.fin-sort { font-size: 12px; color: var(--fin-muted); display: flex; align-items: center; gap: 4px; }
.fin-seg { display: inline-flex; flex-wrap: wrap; background: var(--fin-surface-2); border: 1px solid var(--fin-line); border-radius: 8px; padding: 2px; }
.fin-seg button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--fin-muted); white-space: nowrap; cursor: pointer; }
.fin-seg button[aria-pressed="true"] { background: var(--fin-surface); color: var(--fin-ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.fin-list__items { overflow-y: auto; max-height: 900px; }
.fin-grp { font-size: 11px; font-weight: 600; color: var(--fin-muted); letter-spacing: .06em; text-transform: uppercase; padding: 14px 16px 6px; display: flex; justify-content: space-between; gap: 8px; }
.fin-grp span { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-weight: 500; }
.fin-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 0 12px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 16px; align-items: center; position: relative; cursor: pointer; font: inherit; color: inherit; }
.fin-item:hover { background: var(--fin-hover); }
.fin-item[aria-selected="true"] { background: var(--fin-sel); }
.fin-item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fin-brand); }
.fin-item__name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fin-item__state { font-size: 12px; display: block; margin-top: 1px; }
.fin-item__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fin-item__amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-item__amt--muted { font-weight: 500; color: var(--fin-muted); }
.fin-item__amt--unverified { color: var(--fin-review); }
.fin-item__tag { display: block; font-size: 11px; color: var(--fin-muted); text-align: right; margin-top: 1px; }
.fin-mini { display: block; width: 64px; height: 4px; }
.fin-empty { padding: 20px 16px; margin: 0; color: var(--fin-muted); }
.fin-t-late { color: var(--fin-late); } .fin-t-soon { color: var(--fin-soon); } .fin-t-ok { color: var(--fin-ok); } .fin-t-review { color: var(--fin-review); }

.fin-av { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .02em; flex: none; }
.fin-av--lg { width: 46px; height: 46px; border-radius: 11px; font-size: 16px; }
.fin-av--xl { width: 54px; height: 54px; border-radius: 13px; font-size: 18px; }
.fin-av-c0 { background: #dff3f4; color: #0c5a63; } .fin-av-c1 { background: #e8e7ff; color: #3f37c9; } .fin-av-c2 { background: #fdf0d8; color: #8a5300; }
.fin-av-c3 { background: #fde7ec; color: #a3264a; } .fin-av-c4 { background: #e6f4ea; color: #1c6b3a; } .fin-av-c5 { background: #eceff3; color: #3b4656; }

.fin-detail { background: var(--fin-surface-2); min-width: 0; display: flex; flex-direction: column; }
.fin-dh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 18px 24px; background: var(--fin-surface); border-bottom: 1px solid var(--fin-line); }
.fin-dh__id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.fin-dh__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fin-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; color: var(--fin-muted); margin-top: 2px; align-items: center; }
.fin-tag { font-size: 11px; font-weight: 500; color: var(--fin-muted); border: 1px solid var(--fin-line-strong); border-radius: 4px; padding: 0 5px; line-height: 17px; white-space: nowrap; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-body { padding: 18px 24px 0; display: grid; gap: 16px; align-content: start; flex: 1; }
.fin-spacer { height: 18px; }

/* party band (repeats the summary band for the selected party) */
.fin-pband { background: linear-gradient(180deg, var(--fin-band-a) 0%, var(--fin-band-b) 100%); color: var(--fin-band-ink); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 18px 32px; }
.fin-pband .fin-figs { margin-top: 0; gap: 14px; align-content: start; }
.fin-pband .fin-fig__value { font-size: 19px; }
.fin-pband--unverified { grid-template-columns: minmax(0,1fr); }
.fin-pband--unverified .fin-figs { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fin-pband__age { grid-column: 1 / -1; display: grid; gap: 6px; }

/* ── Panels, tables, pills ─────────────────────────────────── */
.fin-panel { background: var(--fin-surface); border: 1px solid var(--fin-line); border-radius: 12px; overflow: hidden; }
.fin-panel__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fin-line); flex-wrap: wrap; }
.fin-panel__hd h4 { font-size: 14px; font-weight: 600; }
.fin-panel__hd .fin-muted { font-size: 12.5px; }
.fin-panel__foot { padding: 11px 16px; border-top: 1px dashed var(--fin-line-strong); font-size: 12.5px; color: var(--fin-muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th { font-size: 12px; font-weight: 500; color: var(--fin-muted); text-align: left; padding: 8px 14px; background: var(--fin-surface-2); border-bottom: 1px solid var(--fin-line); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.fin-table td { padding: 11px 14px; border-bottom: 1px solid var(--fin-line); white-space: nowrap; color: var(--fin-ink-2); vertical-align: middle; }
.fin-table tr:last-child td { border-bottom: 0; }
.fin-table .fin-r { text-align: right; }
.fin-table tbody tr:hover td { background: var(--fin-hover); }
.fin-table tr.is-selected td { background: var(--fin-sel); }
.fin-table tr.is-highlight td:first-child { box-shadow: inset 3px 0 0 var(--fin-bar); }
.fin-table tfoot td { background: var(--fin-surface-2); font-weight: 600; color: var(--fin-ink); border-top: 1px solid var(--fin-line-strong); }
.fin-table input[type=checkbox] { accent-color: var(--fin-brand); width: 15px; height: 15px; margin: 0; }
.fin-zero { color: var(--fin-faint); }
.fin-heat { display: block; padding: 7px 10px; border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fin-ink); font-weight: 500; }
.fin-heat-b0.fin-heat-l1 { background: #eef3f7; } .fin-heat-b0.fin-heat-l2 { background: #dfe8f0; } .fin-heat-b0.fin-heat-l3 { background: #cddbe7; } .fin-heat-b0.fin-heat-l4 { background: #b9ccdc; }
.fin-heat-b1.fin-heat-l1 { background: #fdf6e3; } .fin-heat-b1.fin-heat-l2 { background: #fbedc8; } .fin-heat-b1.fin-heat-l3 { background: #f8e2a6; } .fin-heat-b1.fin-heat-l4 { background: #f5d684; }
.fin-heat-b2.fin-heat-l1 { background: #fdefe2; } .fin-heat-b2.fin-heat-l2 { background: #fbdfc5; } .fin-heat-b2.fin-heat-l3 { background: #f8cca3; } .fin-heat-b2.fin-heat-l4 { background: #f4b67e; }
.fin-heat-b3.fin-heat-l1 { background: #fbe7df; } .fin-heat-b3.fin-heat-l2 { background: #f7cfbf; } .fin-heat-b3.fin-heat-l3 { background: #f2b39b; } .fin-heat-b3.fin-heat-l4 { background: #ec9676; }
.fin-heat-b4.fin-heat-l1 { background: #f9e0dd; } .fin-heat-b4.fin-heat-l2 { background: #f1c0ba; } .fin-heat-b4.fin-heat-l3 { background: #e89c94; } .fin-heat-b4.fin-heat-l4 { background: #dd776d; }
.fin-heat-none.fin-heat-l1, .fin-heat-none.fin-heat-l2, .fin-heat-none.fin-heat-l3, .fin-heat-none.fin-heat-l4 { background: #eceef1; }

.fin-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.fin-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fin-pill--late { color: var(--fin-late); background: var(--fin-late-soft); }
.fin-pill--soon { color: var(--fin-soon); background: var(--fin-soon-soft); }
.fin-pill--ok { color: var(--fin-ok); background: var(--fin-ok-soft); }
.fin-pill--review { color: var(--fin-review); background: var(--fin-review-soft); }
.fin-pill--plain { color: var(--fin-muted); background: var(--fin-surface-2); }

.fin-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--fin-line-strong); background: var(--fin-surface); font: inherit; font-weight: 500; font-size: 13px; color: var(--fin-ink-2); white-space: nowrap; cursor: pointer; }
.fin-btn:hover { background: var(--fin-hover); }
.fin-btn--primary { background: var(--fin-accent); border-color: var(--fin-accent); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.fin-btn--primary:hover { background: var(--fin-accent); filter: brightness(1.08); }
.fin-btn--tint { background: var(--fin-accent-soft); border-color: var(--fin-accent-line); color: var(--fin-accent-ink); font-weight: 600; }
.fin-btn--tint:hover { background: var(--fin-accent-hover); }
.fin-btn .fin-ico { font-size: 12.5px; color: currentColor; }
.fin-btn .fin-ico-pdf { color: #d92d20; }
.fin-btn .fin-ico-xls { color: #107c41; }
.fin-btn--primary .fin-ico { color: #fff; }
.fin-band .fin-btn--primary { background: #fff; border-color: #fff; color: var(--fin-accent-ink); }
.fin-band .fin-btn--primary .fin-ico { color: var(--fin-accent); }
.fin-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.fin-btn--onband { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; font-weight: 600; }
.fin-btn--onband:hover { background: rgba(255,255,255,.22); }
.fin-btn--onband .fin-ico-pdf { color: #ffb4ab; } .fin-btn--onband .fin-ico-xls { color: #9be7bd; }
.fin-btn:disabled { opacity: .5; cursor: not-allowed; }
.fin-link { all: unset; cursor: pointer; color: var(--fin-brand-text); font-weight: 500; }
.fin-link:hover { text-decoration: underline; }
.fin-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; background: var(--fin-review-soft); color: var(--fin-ink-2); font-size: 13px; border: 1px solid rgba(138,90,0,.2); }

.fin-legend--below { margin-top: 6px; }
.fin .fin-sort, .fin .fin-field label, .fin label { text-transform: none; letter-spacing: 0; }
.fin-table td.fin-cell-wrap { white-space: normal; min-width: 130px; }
.fin-table td.fin-cell-wrap .fin-pill { margin: 1px 0; }
.fin-detail .fin-table th, .fin-detail .fin-table td { padding-left: 11px; padding-right: 11px; }
.fin-item__text { min-width: 0; }
.fin-subnote { font-size: 12px; color: var(--fin-muted); white-space: normal; max-width: 280px; }
.fin-col-check { width: 38px; }
.fin-notice__list { margin: 4px 0 0; padding-left: 18px; }
.fin-notice__sub { margin-top: 4px; color: var(--fin-muted); }

details.fin-listfold { border-top: 1px solid var(--fin-line); padding: 10px 16px 14px; }
details.fin-listfold summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--fin-ink-2); padding: 4px 0; }
.fin-checks { display: grid; gap: 4px; margin: 8px 0 10px; max-height: 220px; overflow-y: auto; }
.fin-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fin-ink-2); cursor: pointer; }
.fin-checks input { accent-color: var(--fin-brand); width: 15px; height: 15px; margin: 0; }

/* ── Selection dock ───────────────────────────────────────── */
.fin-dock { position: sticky; bottom: 12px; margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; background: #101828; color: #fff; border-radius: 12px; padding: 10px 12px 10px 18px; box-shadow: 0 16px 40px rgba(16,24,40,.22); z-index: 5; }
.fin-dock__s { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.fin-dock__s span { color: #98a2b3; }
.fin-dock__s b { font-size: 16px; font-variant-numeric: tabular-nums; color: #fff; }
.fin-dock .fin-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* ── 360 ──────────────────────────────────────────────────── */
.fin-hero { padding: 22px 24px 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 22px 40px; }
.fin-hero__id { display: flex; gap: 16px; align-items: center; }
.fin-hero__name { font-size: 23px; font-weight: 600; color: #fff; }
.fin-hero .fin-meta { color: var(--fin-band-dim); }
.fin-hero .fin-tag { color: var(--fin-band-ink); border-color: rgba(255,255,255,.3); }
.fin-content { padding: 18px 24px 24px; display: grid; gap: 16px; background: var(--fin-surface-2); }
.fin-two { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.fin-tabs { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fin-line); overflow-x: auto; background: var(--fin-surface-2); }
.fin-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--fin-line-strong); background: var(--fin-surface); padding: 7px 13px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 13px; color: var(--fin-ink-2); white-space: nowrap; cursor: pointer; }
.fin-tabs button .fin-ico { color: var(--fin-accent); font-size: 12.5px; }
.fin-tabs button:hover { background: var(--fin-accent-soft); border-color: var(--fin-accent-line); color: var(--fin-accent-ink); }
.fin-tabs button[aria-selected="true"] { background: var(--fin-accent); border-color: var(--fin-accent); color: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.16); }
.fin-tabs button[aria-selected="true"] .fin-ico { color: #fff; }
.fin-tabs .fin-count { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--fin-accent-soft); color: var(--fin-accent-ink); font-size: 11.5px; font-weight: 700; text-align: center; }
.fin-tabs button[aria-selected="true"] .fin-count { background: rgba(255,255,255,.24); color: #fff; }
.fin-side { display: grid; gap: 16px; }
.fin-kv { padding: 6px 16px 12px; }
.fin-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fin-line); font-size: 13px; }
.fin-kv > div:last-child { border-bottom: 0; }
.fin-kv span { color: var(--fin-muted); }
.fin-kv b { font-weight: 500; color: var(--fin-ink); text-align: right; overflow-wrap: anywhere; }
.fin-note { padding: 12px 16px; font-size: 13px; color: var(--fin-ink-2); white-space: pre-wrap; }

/* ── Payment / receipt window ─────────────────────────────── */
.fin-mband { background: linear-gradient(180deg, var(--fin-band-a) 0%, var(--fin-band-b) 100%); color: var(--fin-band-ink); padding: 18px 22px; border-radius: 12px 12px 0 0; }
.fin-mband__who { display: flex; gap: 22px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.fin-mband .fin-figs { margin-top: 0; display: flex; gap: 26px; flex-wrap: wrap; }
.fin-mband .fin-fig__value { font-size: 17px; }
.fin-mbody { padding: 18px 22px; display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.fin-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.fin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fin-field label { font-size: 12.5px; font-weight: 500; color: var(--fin-ink-2); }
.fin-field .fin-input, .fin-field select.fin-input { height: 38px; }
.fin-field .fin-input--amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-hint { font-size: 11.5px; color: var(--fin-muted); }
.fin-step { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fin-step h4 { font-size: 13.5px; font-weight: 600; }
.fin-alloc { border: 1px solid var(--fin-line); border-radius: 10px; overflow: hidden; }
.fin-alloc input.fin-apply { width: 120px; height: 32px; border: 1px solid var(--fin-line-strong); border-radius: 6px; text-align: right; padding: 0 8px; font: inherit; font-variant-numeric: tabular-nums; }
.fin-mft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--fin-line); background: var(--fin-surface-2); }
.fin-tally { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12.5px; color: var(--fin-muted); }
.fin-tally b { display: block; font-size: 16px; color: var(--fin-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.fin-tally .is-warn b { color: var(--fin-soon); } .fin-tally .is-bad b { color: var(--fin-late); }
.fin-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-radio label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fin-line-strong); border-radius: 8px; padding: 9px 12px; font-size: 13px; cursor: pointer; }
.fin-radio input { width: auto; margin: 0; flex: none; }
.fin-radio label:has(input:checked) { border-color: var(--fin-brand); background: var(--fin-sel); }
details.fin-fold { border: 1px solid var(--fin-line); border-radius: 10px; padding: 10px 14px; }
details.fin-fold summary { cursor: pointer; font-weight: 500; font-size: 13px; color: var(--fin-ink-2); }

/* Payment / receipt window inside the ERP modal shell */
.modal.fin-paymodal .mb { padding: 0; }
.modal.fin-paymodal .mf { padding: 0; display: block; }
.fin-pay .fin-mband { border-radius: 0; }
.fin-mband__id { display: flex; gap: 12px; align-items: center; min-width: 0; margin-right: auto; }
.fin-mband__name { font-size: 17px; font-weight: 600; color: #fff; }
.fin-mband__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fin-band-dim); margin-top: 3px; }
.fin-mband .fin-tag { color: var(--fin-band-ink); border-color: rgba(255,255,255,.3); }
.fin-pay .fin-notice { display: block; }
.fin-notice--warn { background: var(--fin-soon-soft); border-color: rgba(180,83,9,.25); }
#fin-pay-warn { display: grid; gap: 8px; }
#fin-pay-warn:empty { display: none; }
.fin-step__btns, .fin-mft__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-alloc .fin-table { margin: 0; }
.fin-alloc th.fin-w-chk { width: 38px; }
.fin-alloc tr.is-pre td { background: var(--fin-sel); }
.fin-sub { font-size: 11.5px; color: var(--fin-muted); margin-top: 2px; white-space: normal; }
.fin-empty-cell { text-align: center; color: var(--fin-muted); padding: 22px 12px; }
.fin-field--wide { grid-column: span 2; }
.fin-dedwrap .fin-fgrid { margin-top: 12px; }
.fin-fold__note { font-size: 12px; margin: 8px 0 0; }
.fin-mft--modal { border-radius: 0 0 12px 12px; }
.fin-mft .btn[data-pay-save][aria-disabled="true"] { opacity: .55; }

/* Statement preview (the document itself is a jsPDF file) */
.fin-stmtview { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.fin-stmtview__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fin-stmtview__bar [data-stmt-classic] { margin-left: auto; }
.fin-stmtview .fin-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--fin-ink-2); cursor: pointer; }
.fin-stmtview .fin-seg button[aria-pressed="true"] { background: var(--fin-surface); color: var(--fin-brand); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.fin-stmtview .fin-seg button:disabled { opacity: .5; cursor: not-allowed; }
.fin-stmtview__paper { flex: 1 1 auto; min-height: 70vh; border: 1px solid var(--fin-line); border-radius: 10px; overflow: hidden; background: #fff; }
.fin-stmtview__paper iframe { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; }

/* ── Statement document primitives ────────────────────────── */
.fin-stmt { background: #fff; color: #111827; font-family: var(--fin-font, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif); font-size: 11px; line-height: 1.45; }
.fin-stmt__strip { height: 8px; background: #0c3a43; }
.fin-stmt--ar .fin-stmt__strip { background: #2c2e72; }
.fin-stmt__in { padding: 0 44px 20px; }
.fin-stmt__hd { display: flex; justify-content: space-between; gap: 24px; padding-top: 30px; }
.fin-stmt__wm { font-weight: 700; letter-spacing: .24em; font-size: 15px; color: #0c3a43; }
.fin-stmt--ar .fin-stmt__wm { color: #2c2e72; }
.fin-stmt__addr { color: #6b7280; margin-top: 8px; font-size: 10.5px; }
.fin-stmt__title { font-size: 19px; font-weight: 600; text-align: right; }
.fin-stmt__meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 8px 0 0; font-size: 10.5px; justify-content: end; }
.fin-stmt__meta dt { color: #6b7280; } .fin-stmt__meta dd { margin: 0; text-align: right; }
.fin-stmt__lbl { font-size: 9px; font-weight: 600; color: #6b7280; letter-spacing: .08em; text-transform: uppercase; }
.fin-stmt__rule { height: 1px; background: #e5e7eb; margin: 18px 0 14px; }
.fin-stmt__mid { display: grid; grid-template-columns: 1fr 250px; gap: 24px; }
.fin-stmt__to { font-size: 14px; font-weight: 600; margin-top: 3px; }
.fin-stmt__sum { border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden; }
.fin-stmt__sum div { display: flex; justify-content: space-between; padding: 6px 12px; }
.fin-stmt__sum div + div { border-top: 1px solid #e5e7eb; }
.fin-stmt__sum .is-total { background: #0c3a43; color: #fff; font-weight: 700; font-size: 12.5px; }
.fin-stmt--ar .fin-stmt__sum .is-total { background: #2c2e72; }
.fin-stmt__age { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #e5e7eb; border-radius: 4px; margin-top: 18px; overflow: hidden; }
.fin-stmt__age div { padding: 7px 8px; text-align: right; }
.fin-stmt__age div + div { border-left: 1px solid #e5e7eb; }
.fin-stmt__age span { display: block; font-size: 8.5px; color: #6b7280; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.fin-stmt__age b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-stmt__age .is-hot b { color: #b42318; }
.fin-stmt__age .is-all { background: #f5f6f8; }
table.fin-stmt__tbl { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 10.5px; }
.fin-stmt__tbl th { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; text-align: left; padding: 7px 5px; border-bottom: 1px solid #111827; white-space: nowrap; }
.fin-stmt__tbl td { padding: 6px 5px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-stmt__tbl .fin-r { text-align: right; }
.fin-stmt__tbl tr { page-break-inside: avoid; break-inside: avoid; }
.fin-stmt__tbl thead { display: table-header-group; }
.fin-stmt__tbl tfoot td { font-weight: 700; border-top: 1px solid #111827; border-bottom: 0; }
.fin-stmt__dim { color: #9ca3af; }
.fin-stmt__pay { color: #067647; font-weight: 600; }
.fin-stmt__note { margin-top: 14px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 10.5px; color: #92400e; }
.fin-stmt__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 10px; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 9.5px; }
.fin-stmt__bill { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.fin-stmt__billhd { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(2,minmax(0,1fr)) auto minmax(0,1fr); gap: 10px; align-items: center; padding: 9px 12px; background: #f5f6f8; }
.fin-stmt__billhd .fin-stmt__lbl { display: block; }
.fin-stmt__billrows div { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 10px; padding: 5px 12px; border-top: 1px solid #e5e7eb; font-variant-numeric: tabular-nums; }
.fin-st { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.fin-st--late { background: #fde8e6; color: #b42318; } .fin-st--soon { background: #fef0d9; color: #93400a; } .fin-st--ok { background: #e3f6ea; color: #067647; } .fin-st--none { background: #eceef1; color: #4b5563; }
.fin-stmtbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fin-line); background: var(--fin-surface); }
.fin-stmtbed { background: #e3e6ea; padding: 22px 16px; overflow-x: auto; }
.fin-stmtbed .fin-stmt { max-width: 820px; min-width: 640px; margin: 0 auto; box-shadow: 0 2px 14px rgba(0,0,0,.12); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fin-pband { grid-template-columns: 1fr; }
  .fin-two { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .fin-band__in, .fin-hero { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .fin-split { grid-template-columns: 1fr; }
  .fin-list { border-right: 0; border-bottom: 1px solid var(--fin-line); }
  .fin-list__items { max-height: 360px; }
}
@media (max-width: 640px) {
  .fin-band__in, .fin-hero { padding: 16px; }
  .fin-figs, .fin-figs--4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .fin-fig__value, .fin-figs--4 .fin-fig__value { font-size: 18px; }
  .fin-scroll > .fin-table { min-width: 640px; }
  .fin-agelg { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fin-dh, .fin-body, .fin-content { padding-left: 14px; padding-right: 14px; }
  .fin-fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fin-mband, .fin-mbody { padding-left: 14px; padding-right: 14px; }
  .fin-mft--modal { padding: 10px 14px; gap: 8px; }
  .fin-mft--modal .fin-tally { gap: 6px 14px; font-size: 11.5px; }
  .fin-mft--modal .fin-tally b { font-size: 14px; }
  .fin-mband .fin-figs { gap: 10px 18px; }
  .fin-filterline { padding: 8px 16px; }
  .fin-dock { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fin * { transition: none !important; animation: none !important; } }
@media print {
  .fin-stmtbar { display: none !important; }
  .fin-stmtbed { background: #fff; padding: 0; }
  .fin-stmtbed .fin-stmt { box-shadow: none; min-width: 0; max-width: none; }
}