/* GrandMa Fin — visual refresh 1.0 (Макс, 21.10: «акуратніше, менш кутасто, без зміни функцій»).
   Loaded last, CSS only: markup and behaviour stay untouched, removing the <link> rolls the look back.
   Principles:
   - softer geometry: 10–18px radii, pill thumbs instead of inset underlines;
   - numbers in Geist with tabular figures instead of JetBrains Mono;
   - meta text in sentence case; small caps only for short labels (column heads, groups, KPI names);
   - filled quiet surfaces instead of hard outlines on every control. Tokens stay grandma.click. */

:root {
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px;
  --num: var(--sans);
  --ctl-bg: color-mix(in srgb, var(--bg-elevated) 70%, var(--bg-surface));
  --ctl-bg-hover: var(--bg-elevated);
  --hairline: color-mix(in srgb, var(--border-subtle) 80%, transparent);
  --thumb: var(--bg-overlay);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .035);
}
html[data-theme="light"] {
  --ctl-bg: #F1EEE8;
  --ctl-bg-hover: #E9E5DD;
  --thumb: #FFFDF9;
  --lift: 0 1px 2px rgba(30, 24, 16, .06);
}

/* ── Type: numbers and meta ── */
.mono, .total-num, .kpi-num, .savings-big, .tip b, .split-summary, .badge-transit, .value, .date {
  font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.meta {
  font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 12.5px; line-height: 18px; color: var(--text-tertiary); }
.ledger .meta, .events-page .meta { font-size: calc(var(--fs-meta) + 1px); }
/* Short labels keep a quiet small-caps voice — in Geist, not mono. */
.kpi > .meta:first-child, .total-head > .meta, .acc-group-title, .tx-table th, .cal-wd, .combo-group, .ss-group,
.vtable th, .msg-body .md-label, .savings-label {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary); }
.badge-transit { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.cents { font-size: .82em; opacity: .85; }  /* як у base.css (20.10): блідіші копійки не читались */

/* ── Shell ── */
.topbar { min-height: 64px; border-bottom-color: var(--hairline); }
.nav { gap: 4px; }
.nav-item { height: 38px; padding: 0 14px; border-radius: var(--radius-full); }
.nav-item.is-active { background: var(--ctl-bg); box-shadow: var(--lift); color: var(--text-primary); }
.nav-item.is-active .icon { color: var(--accent-ink); }
.fx-chip, .dc-chip { height: 38px; border-radius: var(--radius-full); background: var(--ctl-bg); border-color: transparent; }
.fx-chip:hover, .dc-chip:hover, .dc-chip:focus-within { background: var(--ctl-bg-hover); border-color: transparent; }
.dc-chip { min-width: 38px; padding: 0 12px; font-size: 14px; }
.topbar .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-full); }
.page-footer { border-top-color: var(--hairline); }

/* ── Controls ── */
.btn { height: 38px; padding: 0 16px; border-radius: var(--radius-md); font-weight: 500; }
.btn-secondary { background: var(--ctl-bg); border-color: transparent; box-shadow: var(--lift); }
.btn-secondary:hover { background: var(--ctl-bg-hover); border-color: transparent; }
.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 14px -6px var(--accent); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-destructive { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: transparent; }
.btn-block, .btn-tall { border-radius: var(--radius-md); }
.btn-mini { border-radius: var(--radius-sm); }
.input { border-radius: var(--radius-md); background: var(--ctl-bg); border-color: transparent; box-shadow: var(--lift); }
.input:hover { border-color: var(--border-default); }
.input:focus { border-color: var(--accent); background: var(--bg-base); box-shadow: 0 0 0 3px var(--accent-glow); }
html[data-theme="light"] .input:focus { background: #FFFDF9; }
.input::placeholder { color: var(--text-tertiary); opacity: .8; }
select.input { background-image: none; padding-right: 36px; }
select.input { background: var(--ctl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
html[data-theme="light"] select.input { background-color: var(--ctl-bg); }
.filters .input, .filters .btn { height: 40px; }
.check input, .found-row input, .pick-table td.pick input { border-radius: 6px; }

/* Segmented switches: a soft raised thumb instead of an inset magenta underline. */
.cur-switch, .scope-switch, .kind-switch {
  background: var(--ctl-bg); border: 0; padding: 3px; border-radius: var(--radius-full); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
html[data-theme="light"] .cur-switch, html[data-theme="light"] .scope-switch, html[data-theme="light"] .kind-switch { box-shadow: inset 0 1px 2px rgba(30, 24, 16, .08); }
.cur-btn, .scope, .kind-switch span { border-radius: var(--radius-full); }
.cur-btn { min-width: 30px; padding: 3px 8px; }
.cur-btn.is-active, .scope.is-active, .kind-switch input:checked + span {
  background: var(--thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), var(--lift); color: var(--text-primary); }
html[data-theme="light"] .cur-btn.is-active, html[data-theme="light"] .scope.is-active, html[data-theme="light"] .kind-switch input:checked + span {
  box-shadow: 0 1px 3px rgba(30, 24, 16, .14); }
.scope { padding: 8px 4px; }
.kind-switch span { padding: 9px 8px; }
.kind-switch input[value=income]:checked + span { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); color: var(--c-income); }
.kind-switch input[value=expense]:checked + span { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); color: var(--c-expense); }
.kind-switch input[value=transfer]:checked + span { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); color: var(--info); }
.tab { border-radius: var(--radius-full); border-color: transparent; background: var(--ctl-bg); }
.tab.is-active { box-shadow: none; background: var(--accent-muted); border-color: transparent; }
.chip { border-radius: var(--radius-full); border-color: transparent; background: var(--ctl-bg); }
.chip.is-active { background: var(--accent-muted); border-color: transparent; color: var(--text-primary); }
.badge, .badge-status { border-radius: var(--radius-full); }
.badge-status { padding: 3px 10px; border: 0; background: var(--ctl-bg); font-size: 12px; }
.st-paid { background: color-mix(in srgb, var(--success) 13%, transparent); }
.st-partial { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.st-unpaid { background: color-mix(in srgb, var(--danger) 13%, transparent); }
.st-no_client { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.badge-transit { border: 0; background: var(--ctl-bg); border-radius: var(--radius-full); padding: 1px 8px; }

/* ── Surfaces ── */
.card, .accounts, .table-wrap, .kpi, .chart-card, .cal-grid, .event-card, .plans-due, .empty, .sort-row, .receipt-busy-card {
  border-radius: var(--radius-lg); border-color: var(--hairline); box-shadow: var(--lift); }
.accounts { border-radius: var(--radius-xl); padding: 18px 12px; }
.savings-card { border-radius: var(--radius-xl); }
.kpi { padding: 14px 16px; gap: 4px; }
.kpi-num { font-size: clamp(18px, 0.5vw + 13px, 26px); font-weight: 650; letter-spacing: -0.025em; }
.total-num { font-size: clamp(26px, 0.7vw + 18px, 36px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; }
.savings-big { font-weight: 650; letter-spacing: -0.03em; }
.event-cost { letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-title { font-weight: 650; letter-spacing: -0.03em; }
.payments-title .page-title { line-height: 1.1; }
.payments-title .meta, .page-head > .meta, .page-head-main > .meta { margin-top: 4px; font-size: 13.5px; line-height: 20px; color: var(--text-secondary); }
.margin-note, .notice { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ── Accounts panel ── */
.acc { padding: 8px 8px; border-left: 0; border-radius: var(--radius-sm); }
.acc.is-active { background: var(--ctl-bg); box-shadow: inset 2px 0 0 var(--accent); }
.acc-bal { font-family: var(--num); font-variant-numeric: tabular-nums; }
.acc-group-title { padding: 10px 8px 4px; font-size: 10.5px; }
.cur-list { border-top-color: var(--hairline); }
.cur-more > summary { color: var(--text-tertiary); }

/* ── Ledger table ── */
.table-wrap { overflow: clip; }
@supports not (overflow: clip) { .table-wrap { overflow: hidden; } }
.tx-table th { padding: 12px 16px 10px; border-bottom-color: var(--hairline); background: var(--bg-surface); font-size: 10.5px; }
.tx-table td { padding: 12px 16px; border-bottom-color: var(--hairline); }
@media (hover: hover) { .tx-table tbody tr:hover td { background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); } }
.tx-amount .mono { font-weight: 600; font-size: 1.02em; }
.tx-amount .meta, .tx-acc .meta { font-variant-numeric: tabular-nums; }
.tx-date > span:first-child { font-weight: 500; }
.tx-table td > .meta { margin-top: 2px; }
.tx.is-plan td { background: color-mix(in srgb, var(--info) 6%, transparent); }

/* ── Dialogs ── */
.tx-dialog, .confirm-dialog, .fx-dialog { border-radius: var(--radius-xl); border-color: var(--border-default);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .7), var(--lift); }
.tx-dialog::backdrop, .confirm-dialog::backdrop, .fx-dialog::backdrop { background: rgba(5, 5, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Kind tint: a soft glow at the top edge instead of the muddy full-height gradient. */
.tx-dialog { background: radial-gradient(120% 220px at 50% -40px, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%), var(--bg-surface);
  border-color: var(--border-default); }
.tx-dialog[data-kind] { border-color: color-mix(in srgb, var(--tint) 22%, var(--border-default)); }
.tx-form { padding: 24px 24px 22px; gap: 18px; }
.tx-title { font-weight: 650; letter-spacing: -0.03em; }
.tx-dialog .input { background: var(--ctl-bg); }
.tx-dialog .input:focus { background: var(--bg-base); }
html[data-theme="light"] .tx-dialog .input:focus { background: #FFFDF9; }
.tx-foot .btn-primary { height: 50px; border-radius: var(--radius-md); font-weight: 600; letter-spacing: -0.01em; }
.tx-dialog[data-kind=expense] .btn-primary { background: color-mix(in srgb, var(--c-expense) 86%, #000); box-shadow: 0 6px 20px -8px var(--c-expense); }
.tx-dialog[data-kind=income] .btn-primary { background: color-mix(in srgb, var(--c-income) 84%, #000); box-shadow: 0 6px 20px -8px var(--c-income); }
.tx-dialog[data-kind=transfer] .btn-primary { background: color-mix(in srgb, var(--info) 62%, #000); box-shadow: 0 6px 20px -8px var(--info); }
.tx-more > summary { color: var(--text-secondary); }
.combo-list, .ss-list, .acc-menu { border-radius: var(--radius-md); padding: 6px; border-color: var(--border-default);
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .6); }
.combo-opt, .ss-opt, .acc-menu-item { border-radius: var(--radius-sm); }
.combo-opt:not(.is-child) { font-weight: 500; }
.split-box { border-radius: var(--radius-md); border-color: var(--hairline); background: var(--ctl-bg); }
.ui-choice { border-radius: var(--radius-md); background: var(--ctl-bg); border-color: transparent; }
.fx-result { background: var(--ctl-bg); }

/* ── Calendar ── */
.cal-grid { overflow: hidden; }
.cal-row + .cal-row, .cal-day { border-color: var(--hairline); }
.cal-wd { padding: 12px 14px 8px; font-size: 10.5px; }
.cal-day { padding: 10px 12px; }
.cal-num { font-size: calc(var(--fs) - 1px); font-weight: 500; color: var(--text-secondary); }
.cal-day.has-moves .cal-num { color: var(--text-primary); font-weight: 600; }
.cal-day.is-today { box-shadow: none; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.cal-day.is-today .cal-num { background: var(--accent); color: #fff; font-weight: 600; }
.cal-day.is-future { background: transparent; }
.cal-day.is-future .cal-bal { opacity: .8; }
.cal-bal { font-family: var(--num); font-variant-numeric: tabular-nums; }
.cal-day.is-out { opacity: .3; }

/* ── Report ── */
.chart .axis { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.chart .grid { stroke: var(--hairline); }
.chart .bar-income, .chart .bar-expense, .chart .bar-transit { rx: 3px; ry: 3px; }
.rank-bar, .budget, .share-bar, .savings-scale { border-radius: var(--radius-full); background: var(--ctl-bg); }
.rank-bar i, .budget-bar, .share-bar i, .savings-fill { border-radius: var(--radius-full); }
.tip { border-radius: var(--radius-md); }
.savings-card { border-color: color-mix(in srgb, var(--c-income) 20%, var(--hairline)); }
.advice { border-radius: var(--radius-md); }
.event-card:hover { transform: translateY(-2px); border-color: var(--border-default); }

/* ── Advisor ── */
.msg-body { border-radius: 18px; }
.msg-user .msg-body { border-bottom-right-radius: 6px; }
.msg-assistant .msg-body { border-bottom-left-radius: 6px; border-color: var(--hairline); }
.chat-item { border-left: 0; border-radius: var(--radius-md); }
.chat-item.is-active { background: var(--ctl-bg); box-shadow: inset 2px 0 0 var(--accent); }
.chat-form textarea.input { border-radius: var(--radius-lg); }
.chat-form .btn { border-radius: var(--radius-lg); }

/* ── Floating & toasts ── */
.fab-main { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .6), 0 6px 18px -6px var(--accent); }
.fab-item { border-color: var(--border-default); }
.bulk-bar { border-radius: var(--radius-xl); }
.bulk-count { border-radius: var(--radius-full); }
.undo-toast { border-radius: var(--radius-lg); }
.receipt-busy-card { border-radius: var(--radius-xl); }

/* ── Settings ── */
.settings .row { padding: 12px 8px; margin: 0 -8px; border-radius: var(--radius-sm); border-top-color: var(--hairline); }
.settings .row:hover { background: var(--ctl-bg); }
.settings .row .meta { font-variant-numeric: tabular-nums; }

/* ── Phone ── */
@media (max-width: 760px) {
  .topbar { min-height: 60px; border-bottom-color: var(--hairline); }
  .fx-chip, .dc-chip, .topbar .btn-icon { height: 40px; }
  .topbar .btn-icon { width: 40px; }
  /* Bottom nav: the active item gets a soft pill behind its icon. */
  .nav { padding: 6px 4px calc(4px + env(safe-area-inset-bottom)); border-top-color: var(--hairline); }
  .nav-item { height: 54px; padding: 0 2px; gap: 4px; border-radius: var(--radius-md); font-size: 10.5px; font-weight: 500; white-space: nowrap; min-width: 0; }
  .nav-item > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-item .icon { width: 40px; height: 28px; padding: 4px 10px; border-radius: var(--radius-full); box-sizing: border-box;
    transition: background .2s var(--ease-out); }
  .nav-item.is-active { background: transparent; box-shadow: none; color: var(--text-primary); }
  .nav-item.is-active .icon { background: var(--accent-muted); color: var(--accent-ink); }
  .accounts { border-radius: var(--radius-xl); }
}
@media (max-width: 640px) {
  .card { padding: 16px; }
  .add-actions .btn { height: 44px; }
  .tx-table tbody tr { border-bottom-color: var(--hairline); padding-left: 16px; padding-right: 16px; }
  .tx-table tbody tr > td:nth-child(5) { font-weight: 600; letter-spacing: -0.01em; }
  .tx-table .tx-amount .mono { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
  .tx-dialog { border-radius: 0; }
  .kpi { padding: 12px 14px; }
}

/* ── 0.42.1: краї після перших відгуків (Макс, 21.10) ── */
/* Date column: a fixed width so «21 жовт 2026» never clips on 13–15" laptops (with or without the pick box). */
.tx-table .c-date, .is-selecting .tx-table .c-date { width: calc(7.4em + 56px); }
.tx-table .c-acc { width: 19%; }
/* Dialog footer: room between «Зберегти» and the secondary actions, a tighter glow that does not spill onto them. */
.tx-foot { row-gap: 14px; padding-top: 4px; }
.tx-foot-edit { gap: 10px; }
.tx-dialog[data-kind] .tx-foot .btn-primary { box-shadow: 0 6px 16px -10px var(--tint); }
.tx-head .btn-icon, .fx-body .tx-head .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); }
/* Accounts panel tools: separated from the last account, aligned with the rows. */
.panel-tools { margin-top: 10px; padding: 12px 0 0; border-top: 1px solid var(--hairline); }
.panel-tools .btn-sm { height: 34px; padding: 0 10px; border-radius: var(--radius-sm); }
.panel-tools .meta { padding: 0 8px; }
.tx-head .btn-icon:focus-visible { box-shadow: none; background: var(--ctl-bg); }
.panel-tools ~ .acc-hidden-toggle, .accounts .acc-hidden-toggle { padding: 0 8px; }

/* 0.42.4: the sticky accounts panel sits below the sticky topbar and fits the screen —
   before, it stuck 16px from the top (under the 64px topbar) and its bottom, with «Показати приховані», was off-screen. */
@media (min-width: 961px) {
  .accounts { top: 80px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); padding-bottom: 40px; scroll-padding-bottom: 40px; }
}

/* 0.42.5: hidden accounts stay quieter than active ones, but their balance must read (Макс, 21.10: «дуже погано видно баланс»).
   Before: row opacity .55 × tertiary 12px × dimmed cents. Now the name is secondary, the sub-line 13px secondary, the balance primary. */
.acc-hidden-row .acc.is-hidden { opacity: 1; }
.acc-hidden-row .acc-name { color: var(--text-secondary); }
.acc-hidden-sub { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.acc-hidden-sub .acc-bal { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.acc-hidden-sub .acc-bal.neg { color: var(--danger); }
.acc.is-hidden { opacity: .72; }