/* Finance — Debits. Master-detail: a slim bill list (left) + the selected bill's
   inline-editable table (left of the detail) and its monthly line chart (right).
   Reuses the .clients two-column layout. Status pills carry meaning by text +
   lightness (never hue alone). */

/* slimmer left column for the bill list; the list is sticky and scrolls
   internally only when it's taller than the viewport */
@media (min-width: 901px) {
  .clients.clients--fin { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); align-items: start; }
  .clients.clients--fin .clients__list-pane { position: sticky; top: var(--sp-6); max-height: calc(100dvh - var(--sp-6) * 2); overflow-y: auto; }
}
.clients.clients--fin .clients__detail-pane { display: flex; flex-direction: column; }
.clients.clients--fin .client-view { flex: 1 1 auto; display: flex; flex-direction: column; }
.clients.clients--fin .client-list { max-height: none; overflow: visible; }

/* Mobile: stack the two panes and let each shrink to the viewport. Without
   min-width:0 the wide records table sets the column's min-content width,
   stretching the whole grid (and the bill list) past the screen edge. The
   table then scrolls inside its own .fin-detail__table wrapper instead. */
@media (max-width: 900px) {
  .clients.clients--fin { grid-template-columns: 1fr; }
  .clients.clients--fin .clients__list-pane,
  .clients.clients--fin .clients__detail-pane,
  .clients.clients--fin .client-view { min-width: 0; }
}
.fin-list-title { flex: 1; align-self: center; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* detail: full-width records table; the chart is a separate floating panel */
.fin-bill__head { margin-bottom: var(--sp-4); }
.fin-billname { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-ink); border: 0; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: var(--r-sm); width: 100%; max-width: 24ch; }
.fin-billname:hover { background: var(--c-surface-2); }
.fin-billname:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; background: var(--c-surface); }
.fin-bill__subrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-1); }
.fin-bill__sub { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* stats line under the title (bold labels + separators) */
.fin-bill__stats { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.6; }
.fin-bill__stats strong { color: var(--c-ink); font-weight: var(--fw-semibold); }
.fin-sep { margin: 0 var(--sp-2); color: var(--c-border-strong); }

/* records pagination */
.fin-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.fin-pager__info { font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.fin-pager .btn-sm[disabled] { opacity: 0.4; pointer-events: none; }

/* header action buttons */
.fin-bill__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.fin-chart-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); white-space: nowrap; }
.fin-chart-toggle:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fin-chart-toggle.is-on { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }
.fin-chart-toggle svg { width: 1rem; height: 1rem; }

/* category notes: a truncated preview under the title + an inline editor */
.fin-note-preview { display: block; max-width: 100%; margin-top: var(--sp-2); text-align: left; font-size: var(--fs-sm); color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-note-preview:hover { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 2px; }
.fin-notes-edit { margin-bottom: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.fin-notes__area { display: block; width: 100%; border: 0; background: transparent; padding: var(--sp-3); font: inherit; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink); resize: vertical; min-height: 5rem; border-radius: var(--r-md); }
.fin-notes__area:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-accent); }

.fin-detail__table { flex: 1 1 auto; overflow-x: auto; }

/* floating chart panel — draggable + resizable overlay on desktop, inline on mobile */
.fin-chart-panel { display: flex; flex-direction: column; width: min(460px, 92vw); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); box-shadow: 0 18px 48px -16px rgba(20, 21, 26, 0.32); overflow: hidden; }
.fin-chart-panel[hidden] { display: none; }
.fin-chart-panel__bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.fin-chart-panel__grip { display: inline-flex; color: var(--c-ink-faint); }
.fin-chart-panel__grip svg { width: 1.1rem; height: 1.1rem; }
.fin-chart-panel__title { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chart-panel__close { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.fin-chart-panel__close:hover { background: var(--c-surface); color: var(--c-ink); }
.fin-chart-panel__close svg { width: 1rem; height: 1rem; }
.fin-chart-panel .fin-chart-scroll { flex: 1 1 auto; min-height: 0; padding: var(--sp-3) var(--sp-2); overflow-x: auto; overflow-y: hidden; }

@media (min-width: 901px) {
  .fin-chart-panel { position: fixed; top: 104px; right: 24px; z-index: 30; height: 360px; resize: both; min-width: 320px; min-height: 220px; max-width: 92vw; max-height: 88vh; }
  .fin-chart-panel__bar { cursor: grab; touch-action: none; user-select: none; }
  .fin-chart-panel__bar:active { cursor: grabbing; }
}
@media (max-width: 900px) {
  .fin-chart-panel { position: relative; width: 100%; margin-bottom: var(--sp-4); left: auto !important; top: auto !important; right: auto !important; }
}

/* entries table (inline-editable) */
.fin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fin-table th { padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); white-space: nowrap; }
.fin-c-status { white-space: nowrap; }
.fin-c-status .pill { white-space: nowrap; }
.fin-table td { padding: 2px var(--sp-1); border-top: 1px solid var(--c-border); vertical-align: middle; }
.fin-table .num { text-align: right; }
.fin-table tfoot td { border-top: 2px solid var(--c-border-strong); font-weight: var(--fw-semibold); color: var(--c-ink-soft); padding: var(--sp-2); white-space: nowrap; }
.fin-amt { font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fin-row__act { text-align: right; white-space: nowrap; width: 1px; }
.fin-row__act button { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.fin-row__act button:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fin-row__act svg { width: 1rem; height: 1rem; }

/* borderless inline inputs — read like a table, edit on click */
.fin-in { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--c-ink); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); }
.fin-in:hover { background: var(--c-surface-2); }
.fin-in:focus-visible { outline: none; border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-accent); }
.fin-in--date { min-width: 8.5rem; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.fin-in--amt { min-width: 4.5rem; }
.fin-in--notes { min-width: 3rem; }

/* date shown as compact text; becomes a picker on click */
.fin-datecell { display: inline-flex; align-items: center; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-datecell:hover { background: var(--c-surface-2); }
.fin-datecell:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.fin-datecell__empty { color: var(--c-ink-faint); }
.fin-in--amt { text-align: right; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fin-in--notes { color: var(--c-ink-soft); }

.fin-addline { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-md); }
.fin-addline:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fin-addline svg { width: 1rem; height: 1rem; }

/* status pills */
.pill--deb-paid { background: var(--c-surface-2); color: var(--c-ink-faint); }
.pill--deb-upcoming { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }
.pill--deb-overdue { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* monthly line chart — white, horizontally scrollable inside its panel */
.fin-chart-scroll { overflow-x: auto; background: var(--c-surface); }
/* The cash-flow SVG stretches to fill the card width (preserveAspectRatio="none"
   + fixed height keeps the axis text at its real size). currentColor drives the
   "all debits" / "net" ink line, so it stays visible in dark mode. */
.fin-chart { display: block; width: 100%; max-width: none; }
.fin-cf { color: var(--c-ink); }
.fin-chart-empty { padding: var(--sp-6) 0; color: var(--c-ink-faint); font-size: var(--fs-sm); }
.fin-chart__grid { stroke: var(--c-border); stroke-width: 1; }
.fin-chart__axis { fill: var(--c-ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.fin-chart__axis--yr { font-weight: 600; }
.fin-chart__line { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fin-chart__dot { fill: var(--c-accent); }
.fin-chart__dot--future { fill: var(--c-surface); stroke: var(--c-accent); stroke-width: 2; }
.fin-chart__now { stroke: var(--c-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.fin-chart__nowlbl { fill: var(--c-ink-faint); font-size: 9px; }

/* ============================================================
   Finance — Credits (receivables). Reuses the Debits/.clients--fin
   layout; adds a top summary, a two-section list (Invoices + Categories),
   a per-currency chart selector, and read-only invoice rows.
   ============================================================ */

/* summary — minimal: a totals bar (per-currency chips) + a grid of small cards */
.cr-summary { margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.cr-summary__bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-3); }
.cr-summary__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.cr-summary__flag { text-transform: none; letter-spacing: 0; color: var(--c-ink); font-weight: var(--fw-semibold); }
.cr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-left: auto; }
.cr-chip { display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.cr-chip__amt { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cr-chip__brl { font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.cr-chip__empty { color: var(--c-ink-faint); font-size: var(--fs-sm); }
.cr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); }
.cr-card { display: flex; flex-direction: column; gap: 2px; min-height: 82px; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.cr-card.is-overdue { border-color: var(--c-border-strong); box-shadow: inset 3px 0 0 var(--c-ink); }
.cr-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-card__sub { font-size: var(--fs-xs); color: var(--c-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em; }
.cr-card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.cr-card__when { font-size: var(--fs-xs); color: var(--c-ink-soft); white-space: nowrap; }
.cr-card.is-overdue .cr-card__when { color: var(--c-ink); font-weight: var(--fw-semibold); }
.cr-card__amt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* two-section list (Invoices + Categories) */
.cr-list-section + .cr-list-section { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }

/* read-only invoice detail */
.fin-billname--ro { display: inline-flex; align-items: center; gap: var(--sp-3); width: auto; max-width: none; }
.fin-billname--ro:hover { background: transparent; }
.cr-invtag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); padding: 1px var(--sp-2); font-weight: var(--fw-semibold); }
.fin-datecell--ro { display: inline-flex; align-items: center; padding: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.cr-inv-link { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-accent-ink); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.cr-inv-link:hover { text-decoration: underline; }
.cr-inv-link svg { width: 0.85rem; height: 0.85rem; }

/* per-currency chart selector */
.fin-cur-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) 0; }
.fin-cur-tab { padding: 1px var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.fin-cur-tab:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fin-cur-tab.is-on { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }

/* status pills (text + lightness, never hue alone) */
.pill--cr-received { background: var(--c-surface-2); color: var(--c-ink-faint); }
.pill--cr-upcoming { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }
.pill--cr-overdue { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ---- archive + delete (Debits & Credits) ---- */
/* archived list rows read in a lighter grey */
.client-row.is-archived .client-row__name { color: var(--c-ink-faint); font-weight: var(--fw-medium); }
.client-row.is-archived .client-row__meta { color: var(--c-ink-faint); opacity: 0.85; }

/* "View archived" accordion in the list pane */
.fin-archived { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.fin-archived__toggle { display: inline-flex; align-items: center; gap: var(--sp-1); width: 100%; padding: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); }
.fin-archived__toggle:hover { background: var(--c-surface-2); color: var(--c-ink); }
.fin-archived__toggle svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.fin-archived.is-open .fin-archived__toggle svg { transform: rotate(90deg); }

/* delete action — meaning carried by the label, the icon and the confirm dialog */
.fin-chart-toggle--danger:hover { background: #fdeceb; color: #b42318; border-color: transparent; }

/* ============================================================
   Finance — Cards (styled tiles + vault modals)
   ============================================================ */
.cards-page { position: relative; }
.cards-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
/* fixed-width cards that wrap; shrink only on screens narrower than one card */
.card-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.cc { position: relative; display: flex; flex-direction: column; flex: 0 1 440px; max-width: 100%; aspect-ratio: 1.586; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--cc-bg); color: var(--cc-ink); box-shadow: var(--shadow-md); overflow: hidden; }
.cc::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 130% at 100% 0, rgba(255,255,255,.16), transparent 45%); pointer-events: none; }
.cc.is-archived { opacity: 0.55; }
.cc > * { position: relative; z-index: 1; }
.cc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.cc__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.cc__badges { flex: 0 0 auto; display: flex; gap: var(--sp-1); }
.cc__badge { padding: 1px var(--sp-2); border: 1px solid var(--cc-soft); border-radius: var(--r-full); font-size: 10px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--cc-ink); white-space: nowrap; }
.cc__num { margin-top: auto; text-align: left; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.15rem; letter-spacing: 0.05em; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.cc__num.is-rev { letter-spacing: 0.08em; }
.cc__num:hover { text-decoration: underline; }
.cc__row { display: flex; align-items: flex-start; gap: var(--sp-4); margin-top: var(--sp-3); }
.cc__field { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 0 0 auto; }
.cc__field--name { flex: 1 1 auto; min-width: 0; }
.cc__field--name .cc__val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cc__lbl { font-size: 9px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--cc-soft); }
.cc__val { text-align: left; font-size: var(--fs-sm); color: var(--cc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc__val:hover { text-decoration: underline; }
.cc__actions { display: flex; gap: 2px; margin-top: var(--sp-3); }
.cc__act { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); color: var(--cc-ink); }
.cc__act:hover { background: rgba(127,127,127,0.28); }
.cc__act svg { width: 1rem; height: 1rem; }

/* modals */
.cc-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 21, 26, 0.45); }
.cc-modal { position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; padding: var(--sp-5); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.cc-modal--sm { width: min(420px, 94vw); }
.cc-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.cc-modal__head h2 { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-xl); }
.cc-modal__head h2 svg { width: 1.1rem; height: 1.1rem; color: var(--c-ink-soft); }
.cc-modal__x { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.cc-modal__x:hover { background: var(--c-surface-2); color: var(--c-ink); }
.cc-modal__x svg { width: 1.1rem; height: 1.1rem; }

.cc-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.cc-form .field__hint { font-style: normal; font-weight: var(--fw-regular); color: var(--c-ink-faint); font-size: var(--fs-xs); }
.cc-form__note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.cc-form__note svg { flex: 0 0 auto; width: 0.9rem; height: 0.9rem; }
.cc-form__err { color: #b42318; font-size: var(--fs-sm); }
.cc-form__actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.cc-brands { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cc-brand { display: flex; align-items: center; gap: var(--sp-2); }
.cc-brand__swatch { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.cc-brand__name { flex: 1; min-width: 0; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; background: var(--c-surface); }
.cc-brand__color { flex: 0 0 auto; width: 2.4rem; height: 2rem; padding: 2px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); }
.cc-brand__hex { width: 8ch; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }

.cc-toast { position: fixed; bottom: var(--sp-6); left: 50%; z-index: 45; padding: var(--sp-2) var(--sp-4); background: var(--c-ink); color: #fff; border-radius: var(--r-full); font-size: var(--fs-sm); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(0.75rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cc-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Bank accounts ---- */
.bank-view__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bank-view__head .fin-billname { flex: 1; }
.bank-grid { margin-bottom: var(--sp-5); }
.bank-notes { display: flex; flex-direction: column; gap: var(--sp-1); }
.bank-notes > span { font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: var(--fw-medium); }

/* keep icons inside modal buttons small (fixes oversized "Add brand") */
.cc-modal .btn-primary svg, .cc-modal .btn-ghost svg { width: 1rem; height: 1rem; vertical-align: -2px; }
.cc-form__actions .btn-ghost, .cc-form__actions .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ---- Signatures (recurring subscriptions) ---- */
.sig-seg { display: flex; gap: var(--sp-1); padding: 3px; margin-bottom: var(--sp-2); background: var(--c-surface-2); border-radius: var(--r-md); }
.sig-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); white-space: nowrap; }
.sig-seg__btn svg { width: 1rem; height: 1rem; }
.sig-seg__btn:hover { color: var(--c-ink); }
.sig-seg__btn.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(20,21,26,0.08); }

.sig-ovrow { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); text-align: left; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.sig-ovrow:hover { border-color: var(--c-border-strong); }
.sig-ovrow.is-active { border-color: transparent; background: var(--c-accent-wash); }
.sig-ovrow__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.sig-ovrow.is-active .sig-ovrow__title { color: var(--c-accent-ink); }
.sig-ovrow__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); }

.sig-group { margin-bottom: var(--sp-2); }
.sig-group__head { display: block; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.client-row.is-muted .client-row__name { color: var(--c-ink-soft); }
.client-row.is-muted .client-row__meta { opacity: 0.9; }

.pill--sig-active { background: var(--c-accent-wash); color: var(--c-accent-ink); border-color: transparent; }
.pill--sig-inactive { background: var(--c-surface-2); color: var(--c-ink-faint); }

.sig-fields { margin-bottom: var(--sp-4); }
.sig-fields .field select { width: 100%; padding: var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; background: var(--c-surface); color: var(--c-ink); }
.sig-notes { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.sig-notes > span { font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: var(--fw-medium); }

.sig-price__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sig-price__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.sig-price__table { width: 100%; }
.sig-price__table .fin-in--date { min-width: 9rem; }
.sig-price__empty { padding: var(--sp-3); color: var(--c-ink-faint); font-size: var(--fs-sm); text-align: center; }

/* inline price chart: override the floating/fixed positioning used on Debits */
.fin-chart-panel.fin-chart-panel--inline { position: relative; width: 100%; height: auto; margin-bottom: var(--sp-3); resize: none; box-shadow: none; }
.fin-chart-panel--inline .fin-chart-scroll { padding: var(--sp-3); }

.sig-catsubs { display: flex; flex-direction: column; gap: var(--sp-1); }
.sig-catsub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); text-align: left; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.sig-catsub:hover { border-color: var(--c-border-strong); }
.sig-catsub__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); }
.sig-catsub__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sig-per { font-size: var(--fs-xs); color: var(--c-ink-faint); font-weight: var(--fw-medium); }
.sig-ov-total { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.sig-ov-total__item { display: flex; flex-direction: column; gap: 2px; }
.sig-ov-total__lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.sig-ov-total__val { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.sig-ov-h { margin: var(--sp-5) 0 var(--sp-3); }
.sig-ov-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---- Overview dashboard ---- */
.fin-ov { display: flex; flex-direction: column; gap: var(--sp-5); }
.fin-ov__per { font-size: var(--fs-xs); color: var(--c-ink-faint); font-weight: var(--fw-medium); }
.fin-ov__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-faint); line-height: 1.5; }

/* KPI tiles */
.fin-ov__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.fin-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: inset 3px 0 0 var(--c-border-strong); }
.fin-kpi--out { box-shadow: inset 3px 0 0 var(--c-ink); }
.fin-kpi--in { box-shadow: inset 3px 0 0 var(--c-accent); }
.fin-kpi--pos { box-shadow: inset 3px 0 0 var(--c-accent); }
.fin-kpi--neg { box-shadow: inset 3px 0 0 var(--c-ink); background: var(--c-surface-2); }
.fin-kpi--warn { box-shadow: inset 3px 0 0 var(--c-ink); }
.fin-kpi__lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.fin-kpi__val { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.fin-kpi__extra { font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* sections */
.fin-ovsec { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.fin-ovsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fin-ovsec__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.fin-ovsec__link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: var(--fw-medium); }
.fin-ovsec__link:hover { color: var(--c-accent-ink); }
.fin-ovsec__link svg { width: 0.9rem; height: 0.9rem; }

.fin-ov__status { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.fin-ov__status .cr-cards { grid-template-columns: 1fr; }
.fin-ov__status .cr-card__sub { min-height: 0; }

/* cash-flow chart */
.fin-cf { max-width: none; }
.fin-cf__in { fill: var(--c-accent); }
.fin-cf__out { fill: var(--c-ink); }
.fin-cf__net { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-dasharray: 5 4; }
.fin-cf__netdot { fill: var(--c-surface); stroke: var(--c-ink); stroke-width: 1.5; }
.fin-cf__zero { stroke: var(--c-border-strong); stroke-width: 1; }
.fin-cf__nowband { fill: var(--c-accent-wash); opacity: 0.5; }
.fin-cf__legend { display: flex; gap: var(--sp-4); }
.fin-cf__key { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.fin-cf__sw { width: 0.85rem; height: 0.85rem; border-radius: 3px; }
.fin-cf__sw--in { background: var(--c-accent); }
.fin-cf__sw--out { background: var(--c-ink); }
.fin-cf__sw--net { height: 0; border-top: 2px dashed var(--c-ink); border-radius: 0; }

/* month-over-month */
.fin-mom { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.fin-mom__now { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fin-mom__lbl { font-size: var(--fs-xs); color: var(--c-ink-faint); font-weight: var(--fw-normal); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.fin-mom__delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.fin-mom__delta svg { width: 0.9rem; height: 0.9rem; }
.fin-mom__delta--up { color: var(--c-ink); }
.fin-mom__delta--down { color: var(--c-accent-ink); }
.fin-mom__delta--flat { color: var(--c-ink-faint); }
.fin-mom__avg { font-size: var(--fs-sm); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }

/* two-column lower area */
.fin-ov__two { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .fin-ov__two { grid-template-columns: 1fr minmax(300px, 360px); align-items: start; } }
.fin-ov__stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* attention list */
.fin-att { display: flex; flex-direction: column; gap: var(--sp-1); }
.fin-att__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.fin-att__row--alert { box-shadow: inset 3px 0 0 var(--c-ink); }
.fin-att__row--ok { color: var(--c-ink-soft); }
.fin-att__ico { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--c-ink-soft); }
.fin-att__ico svg { width: 1.1rem; height: 1.1rem; }
.fin-att__txt { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-ink); }
.fin-att__amt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* per-card recurring */
.fin-cardlist { display: flex; flex-direction: column; gap: var(--sp-1); }
.fin-cardrow { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); }
.fin-cardrow__dot { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: var(--r-full); background: var(--c-border-strong); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.fin-cardrow__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); }
.fin-cardrow__sub { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.fin-cardrow__amt { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fin-cardrow--muted .fin-cardrow__name { color: var(--c-ink-soft); }
.fin-ov__chips { margin-left: 0; }

/* ---- Overview master chart (configurable) ---- */
.fin-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--c-surface-2); border-radius: var(--r-md); }
.fin-seg__btn { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); white-space: nowrap; }
.fin-seg__btn:hover { color: var(--c-ink); }
.fin-seg__btn.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(20,21,26,0.1); }

.fin-ms__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.fin-ms__series { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.fin-ms__chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); white-space: nowrap; }
.fin-ms__chip:hover { color: var(--c-ink); border-color: var(--c-ink-faint); }
.fin-ms__chip.is-on { color: var(--c-ink); border-color: transparent; background: var(--c-surface-2); }
.fin-ms__sw { width: 0.8rem; height: 0.8rem; border-radius: 3px; opacity: 0.35; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.fin-ms__chip.is-on .fin-ms__sw { opacity: 1; }
.fin-ms__catwrap { display: flex; flex-direction: column; gap: var(--sp-2); flex-basis: 100%; margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); }
.fin-ms__chipgroup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fin-ms__chiplbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); margin-right: var(--sp-1); }
.fin-ms__none { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.fin-ms__scroll { overflow-x: auto; overflow-y: hidden; }

/* fullscreen */
.fin-ms.is-full { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; overflow: auto; box-shadow: none; }
.fin-ms.is-full .fin-ms__scroll { min-height: 60vh; }

/* ---- Overview: chart + attention row (2fr / 1fr) and recurring-card wall ---- */
.fin-ov__mid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 1000px) { .fin-ov__mid { grid-template-columns: 2fr 1fr; align-items: start; } }
.fin-ov__side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fin-ov__mid .fin-ms { min-width: 0; }

/* single row that scrolls horizontally (never wraps): each tile is sized so
   ~5.5 fit the visible width, so a large set stays a scrollable strip rather
   than a giant multi-row grid */
.fin-rc-grid { display: flex; gap: var(--sp-4); overflow-x: auto; overflow-y: hidden; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; }
.fin-rc { flex: 0 0 calc((100% - 4.5 * var(--sp-4)) / 5.5); min-width: 212px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 172px; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--rc-bg); color: var(--rc-ink); box-shadow: 0 10px 26px -14px rgba(20, 21, 26, 0.45); }
.fin-rc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fin-rc__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-rc__badge { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 2px var(--sp-2); border: 1px solid var(--rc-soft); border-radius: var(--r-full); color: var(--rc-soft); white-space: nowrap; }
.fin-rc__total { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fin-rc__per { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--rc-soft); margin-left: 3px; }
.fin-rc__svcs { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: var(--sp-2); border-top: 1px solid var(--rc-soft); }
.fin-rc__svc { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.fin-rc__svcname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-rc__svcamt { flex: 0 0 auto; color: var(--rc-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-rc--unassigned { background: var(--c-surface); color: var(--c-ink); border: 2px dashed var(--c-border-strong); box-shadow: none; --rc-soft: var(--c-ink-faint); }