/* ═══════════════════════════════════════════════════
   PAYMENTS
   ═══════════════════════════════════════════════════ */

/* .task-list-card itself carries no padding — every other page fills it
   with row items (.task-item, .habit-item) that pad themselves. Payments'
   grid/list/sparkline content has no such built-in padding, so it needs
   this explicit body wrapper (see partials/habits_section.html's empty
   state for the same gap on a normally row-based card). */
.payment-card-body {
    padding: 1rem;
}

/* Screen-reader-only utility, matching Bulma's own .is-sr-only — defined
   here too as a safety net since several new payment forms depend on it
   for their <label>s. Harmless to redeclare if Bulma already ships it. */
.is-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Header links (Budgets / Categories / Full log) ── */
.payment-header-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Monthly budget total (Budgets page) ── */
.payment-budget-total-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.payment-budget-total-input {
    flex: 0 1 160px;
    min-width: 120px;
}

.payment-budget-total-currency {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.payment-budget-total-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.6rem 0 0;
}

/* ── Total budgeted summary (sum of all active budgets' effective_limit,
   above the budget list) ── */
.payment-budget-total-summary {
    padding: 0.75rem 0 1rem;
}

.payment-budget-total-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.payment-budget-total-summary-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.payment-budget-total-summary-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-budget-total-summary-value--over {
    color: var(--clear-red);
}

/* .tag-task-count's --text-muted (2.07:1 on --bg-card) carries the budget
   limit/percentage/count on this page — real data, not secondary chrome —
   so it's promoted here, scoped to the budget/category rows only via their
   id prefix (Tags/Areas keep the shared, unmodified .tag-task-count). */
[id^="payment-budget-row-"] .tag-task-count,
[id^="payment-category-row-"] .tag-task-count {
    color: var(--text-secondary);
}

/* ── Nav link ── */
.payment-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.payment-view-all-link:hover {
    text-decoration: underline;
}

.payment-view-all-link .material-icons {
    font-size: 16px;
}

/* ── Month nav ── */
.payment-month-nav {
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.payment-month-label {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 10rem;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s;
}

.payment-month-label:hover {
    color: var(--accent);
}

/* ── Currency tabs (reuses .habit-freq-modes/.freq-mode pill pattern) ── */
.payment-currency-tabs {
    margin: 0 auto 1rem;
    width: fit-content;
}

.payment-currency-tabs a.freq-mode {
    text-decoration: none;
    display: inline-block;
}

/* ── Net/Spent stat, merged into the "Recent payments" card header
   instead of its own headline card (too bulky at the top of the page for
   what's ultimately metadata on the list below it — see plans/payments.md
   Layout C). Reuses .task-list-header's flex row; this block is just the
   right-aligned content, same margin-left: auto convention as
   .task-list-header-count elsewhere in the app. ── */
.payment-list-header {
    flex-wrap: wrap;
}

.payment-list-net-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
}

.payment-list-net-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.payment-list-net-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.payment-list-net-stat-value--positive {
    color: var(--green);
}

/* No income this month — pure spend, not a deficit. */
.payment-list-net-stat-value--expense {
    color: var(--clear-red);
}

.payment-list-net-stat-breakdown {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.payment-list-net-stat-in {
    color: var(--green);
}

.payment-list-net-stat-out {
    color: var(--clear-red);
}

/* ── Tabbed Insights card (Budgets / Categories / Trend) — CSS-only radio
   tabs, no JS. Only one panel shows at a time; the radios are hidden but
   focusable/clickable via their <label>s, siblings of .payment-insights-
   header and .payment-insights-panel so the :checked ~ sibling selectors
   below can reach both the active label's highlight and the active panel.
   See plans/payments.md Layout C: this replaces three stacked cards
   (Budgets/Categories/Trend), which pushed "Recent payments" — the thing
   users actually read every visit — further down the page. ── */
.payment-insights-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-insights-header {
    flex-wrap: wrap;
}

.payment-insights-nav {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    margin-left: auto;
}

.payment-insights-nav label {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.payment-insights-nav label:hover {
    color: var(--accent);
}

.payment-insights-nav label + label {
    border-left: 1px solid var(--border-color);
}

#tab-budgets:checked ~ .payment-insights-header .payment-insights-nav label[for="tab-budgets"],
#tab-categories:checked ~ .payment-insights-header .payment-insights-nav label[for="tab-categories"],
#tab-trend:checked ~ .payment-insights-header .payment-insights-nav label[for="tab-trend"],
#tab-total:checked ~ .payment-insights-header .payment-insights-nav label[for="tab-total"] {
    color: #fff;
    background: var(--accent);
}

/* [data-insights-panel] on the selector (not just .payment-insights-panel)
   deliberately out-specifies .payment-category-list/.payment-trend below —
   those panels double as their own content-layout box (flex column/row),
   so without the extra attribute bump here, a same-specificity, later-in-
   file rule like .payment-trend{display:flex} would win the cascade by
   source order alone and stay visible under every tab. */
.payment-insights-panel[data-insights-panel] {
    display: none;
}

#tab-budgets:checked ~ .payment-insights-panel[data-insights-panel="budgets"],
#tab-total:checked ~ .payment-insights-panel[data-insights-panel="total"] {
    display: block;
}

/* flex, not block — these panels are also their own .payment-category-list/
   .payment-trend flex container; block would collapse that layout. */
#tab-categories:checked ~ .payment-insights-panel[data-insights-panel="categories"],
#tab-trend:checked ~ .payment-insights-panel[data-insights-panel="trend"] {
    display: flex;
}

/* ── Total tab (cross-currency, converted) — sync_alt icon + ≈ prefix mark
   every converted figure instead of a palette colour: blue/green/amber/
   red/purple/teal are already owned by budgets/categories/status
   elsewhere on this page, so reusing one here would falsely tie a
   conversion to an unrelated budget/category. The native-currency panels
   (Budgets/Categories) carry no such marker — their plainness is what
   signals "this figure is exact". ── */
.payment-total-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.payment-total-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.payment-total-figures {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.payment-total-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.payment-total-value--positive {
    color: var(--green);
}

.payment-total-breakdown {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.payment-total-in {
    color: var(--green);
}

.payment-total-out {
    color: var(--clear-red);
}

.payment-total-disclosure {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

.payment-total-loading,
.payment-total-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* The Total tab is the only place on this page that shows a budget-card
   grid and a category-row list back to back in one panel — everywhere
   else they're on separate tabs, so this seam never has to read as
   deliberate. Without a label + divider between them, a boxed card grid
   butting straight into a bare row list looks like a rendering bug
   rather than two distinct breakdowns (see plans/payments.md's Total tab
   fix-up). Mirrors .goal-panel-section-label's icon + uppercase-label
   shape (goals.css) rather than importing it, matching this page's own
   convention of parallel, feature-scoped classes over cross-feature ones
   (see .payment-budget-card's colour-border comment above). */
.payment-total-section-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.payment-total-section-label .material-icons {
    font-size: 13px;
}

/* ── Budget cards ── */
.payment-budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.payment-budget-grid .project-card {
    padding: 0.85rem 1rem;
}

/* ── Budget card colour identity — same left-border-by-colour pattern as
   .goal-panel--{color} (goals.css), so a budget's colour (already used for
   its dot/badge everywhere else — tags.css, payment_budget_row.html) is
   also legible at a glance on the dashboard, not just in row lists.
   +2px over .project-card's own 1px left border to keep the health-colour
   convention (3px) without double-counting the base border width. */
.payment-budget-card {
    border-left: 3px solid var(--border-color);
    padding-left: calc(1rem - 2px);
}

.payment-budget-card--blue   { border-left-color: var(--accent); }
.payment-budget-card--green  { border-left-color: var(--green); }
.payment-budget-card--amber  { border-left-color: var(--amber); }
.payment-budget-card--red    { border-left-color: #e05c6e; }
.payment-budget-card--purple { border-left-color: var(--purple); }
.payment-budget-card--teal   { border-left-color: #4db6ac; }

/* Preserve the colour identity on hover — .project-card:hover otherwise
   resets all four border sides to --accent (goals.css documents the same
   override need for .goal-panel--{color}:hover). */
.payment-budget-card--blue:hover   { border-left-color: var(--accent); }
.payment-budget-card--green:hover  { border-left-color: var(--green); }
.payment-budget-card--amber:hover  { border-left-color: var(--amber); }
.payment-budget-card--red:hover    { border-left-color: #e05c6e; }
.payment-budget-card--purple:hover { border-left-color: var(--purple); }
.payment-budget-card--teal:hover   { border-left-color: #4db6ac; }

/* Over-limit signals urgency via background tint + the "Over limit" text
   badge in the card header — not by overriding the colour identity border.
   A budget keeps its own --{color} border-left-color (set above) so it
   reads as the same colour everywhere on the page (this card, the
   allocation bar, the legend), even when over limit. No border-color rule
   needed here at all now, so the :hover state also falls through to each
   colour's own :hover rule above without any extra override. */
.payment-budget-card--over-limit {
    background: color-mix(in srgb, var(--clear-red) 6%, var(--bg-card));
}

.payment-budget-card .project-card-header {
    justify-content: space-between;
}

/* Override .project-progress-text's --text-muted (2.07:1 on --bg-card,
   below WCAG AA at this size) scoped to payments only — the spent/limit
   figure here is the card's primary data, not secondary chrome, and
   Goals/Projects must stay visually unchanged (see plans/payments.md's
   own verification step). */
.payment-budget-card .project-progress-text {
    color: var(--text-secondary);
}

/* Over-limit fill swap — same reuse-red-past-a-threshold logic as
   task-deadline-badge--overdue. */
.project-progress-fill--over-limit {
    background: var(--clear-red);
}

/* Income-budget counterpart to --over-limit above: reaching/passing an
   income target is good news, not a warning, so the fill goes green
   instead of red once is_over_limit flips to "goal reached" for an
   income-direction budget. */
.project-progress-fill--income-goal-met {
    background: var(--green);
}

/* Small inline marker so an income budget's direction is never signalled
   by colour alone (same WCAG 1.4.1 reasoning as .payment-row-amount--income
   below) — paired with the "received"/"to go"/"Goal reached" copy that
   changes alongside it. Only ever rendered for income-direction budgets. */
.payment-budget-direction-icon {
    font-size: 15px;
    color: var(--green);
    flex-shrink: 0;
}

/* Shared icon+text wrapper for the income marker — used both in the budget
   list row (inside .tag-task-count) and the dashboard card's name (inside
   .project-card-name). Plain inline content (icon glyph next to a text
   node, no shared container) leaves the Material Icon's glyph box sitting
   low against the text's baseline; inline-flex + align-items:center fixes
   that regardless of which parent it's nested in. */
.payment-budget-direction-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Remaining (Limit − Spent) readout — a second, quieter line under the
   spent/limit figure rather than appended inline: budget cards sit in an
   auto-fill grid as narrow as 220px (.payment-budget-grid), and the
   spent/limit text is already nowrap, so tacking more text onto that line
   would starve .project-progress-bar's flex-basis on long currency values.
   Same font-size as .project-progress-text to stay legible, but a lighter
   weight to read as supporting detail, not a second primary figure. */
.payment-budget-remaining {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Over-limit reuses --clear-red so the amount reads as urgent at a glance,
   consistent with the fill bar and "Over limit" badge on the same card. */
.payment-budget-remaining--over {
    color: var(--clear-red);
    font-weight: 500;
}

/* Income counterpart to --over above — reusing --green so a met income
   target reads as a milestone, consistent with the fill bar and "Goal
   reached" badge on the same card. */
.payment-budget-remaining--income-goal-met {
    color: var(--green);
    font-weight: 500;
}

/* ── Allocation bar ── */
.payment-allocation-bar {
    display: flex;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.9rem;
}

.payment-allocation-segment {
    height: 100%;
}

.payment-allocation-segment--blue   { background: var(--accent); }
.payment-allocation-segment--green  { background: var(--green); }
.payment-allocation-segment--amber  { background: var(--amber); }
.payment-allocation-segment--red    { background: #e05c6e; }
.payment-allocation-segment--purple { background: var(--purple); }
.payment-allocation-segment--teal   { background: #4db6ac; }

.payment-allocation-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-top: 0.5rem;
}

.payment-allocation-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.payment-allocation-warning {
    font-size: 0.75rem;
    color: var(--amber);
    margin-top: 0.4rem;
}

/* ── Category breakdown ── */
.payment-category-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.payment-category-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.payment-category-row .task-tag-badge {
    flex-shrink: 0;
    min-width: 90px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-category-bar {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.payment-category-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.payment-category-total {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── 12-month trend (CSS-only sparkline) ── */
.payment-trend {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 90px;
    padding-top: 0.5rem;
}

.payment-trend-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    height: 100%;
}

.payment-trend-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
}

.payment-trend-bar {
    flex: 1;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.payment-trend-bar--expense {
    background: var(--clear-red);
}

.payment-trend-bar--income {
    background: var(--green);
}

.payment-trend-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ── Payment row (dashboard preview list) — borrows .reminder-item's
   flex/padding grammar via the shared .task-item base. ── */
.payment-row-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 3.2rem;
}

.payment-row-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.payment-row-reminder-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.payment-row-reminder-badge-icon {
    font-size: 0.85em;
    line-height: 1;
}

.payment-row-amount {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
}

/* Direction is always color + glyph, never color alone (WCAG 1.4.1):
   income is --green with a "+" prefix, expense is --clear-red with a
   "-" prefix, both applied in the template. */
.payment-row-amount--income {
    color: var(--green);
}

.payment-row-amount--expense {
    color: var(--clear-red);
}

/* Transfers move money between your own spaces — neither gain nor loss. */
.payment-row-amount--transfer {
    color: var(--text-secondary);
}

.payment-transfer-icon {
    font-size: 16px;
    vertical-align: middle;
    color: var(--accent);
    flex-shrink: 0;
}

/* ── Field pickers (budget/category/bank) — same search-or-create
   component as the task tag picker (tag_picker.html and friends), just
   parameterized per field; see payment_field_picker*.html. The trigger
   button reuses area-badge/task-tag-badge/payment-row-reminder-badge
   as-is for its "has a value" look (border/background/padding/font-size
   all already come from those), so this only resets the browser button
   chrome those classes don't already override. ── */
.payment-field-picker-btn {
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
}

/* Quick-add extras row: center everything vertically. The budget/category
   pickers keep their natural badge size (same area-badge / task-tag-badge
   look as .payment-row's meta line — category smaller than budget), so no
   forced height here. */
.payment-create-extras {
    align-items: center;
    gap: 0.75rem;
}

/* <button>s default to a tighter line-height than the <span> badges in the
   row, so match it to keep pickers the same height as row badges. */
.payment-field-picker-btn {
    line-height: 1.5;
}

.payment-field-picker-btn:hover {
    filter: brightness(1.15);
}

/* ── Payment row edit form ── */
.payment-edit-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.payment-amount-input {
    min-width: 100px;
    max-width: 130px;
}

/* Hide the native number spinner everywhere this class is used (payments
   quick-create/edit forms and the narrower reminder-row override below) —
   Chrome/Safari render it as an opaque light box that has no themed
   equivalent and overlaps the value at every width this class appears at.
   Up/down arrow keys still step the value with the stepper hidden; only the
   visible control is removed. */
.payment-amount-input::-webkit-outer-spin-button,
.payment-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.payment-amount-input {
    -moz-appearance: textfield;
}

.payment-currency-input {
    min-width: 70px;
    max-width: 80px;
    text-transform: uppercase;
}

.payment-direction-input {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 110px;
}

/* ── Amount + currency, visually joined as one field on the quick-create
   form only — the row edit form (.payment-edit-form above) keeps them as
   separate pills, consistent with its other auto-saving fields. ── */
.payment-amount-field-group {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.payment-amount-field-group:focus-within {
    border-color: var(--accent);
}

.payment-amount-field-group input {
    border: none;
    border-radius: 0;
}

.payment-amount-field-group .payment-amount-input {
    width: 100px;
    min-width: 0;
    max-width: none;
}

.payment-amount-field-group .payment-currency-input {
    width: 56px;
    min-width: 0;
    max-width: none;
    text-align: center;
    border-left: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.payment-budget-limit-input,
.payment-budget-percentage-input {
    min-width: 120px;
    max-width: 160px;
}

/* ── Reminder edit: auto-log-payment fields ── */
.payment-autolog-field {
    align-items: center;
}

.payment-autolog-field .habit-form-label {
    flex-basis: 100%;
}

.payment-autolog-budget-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Full payment log table — deliberate, scoped deviation from this
   app's card/row convention (see plans/payments.md). Not a precedent for
   Goals/Projects/Tasks, which stay card/row. ── */
.payment-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.payment-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-filter-field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* A bounded, independently-scrolling container (not just overflow-x) so
   the sticky header actually sticks to *this* scrollport instead of a
   page box that never scrolls internally, and so min-width below has
   somewhere to overflow into on narrow viewports. */
.payment-table-scroll {
    overflow: auto;
    max-height: calc(100vh - 14rem);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.payment-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.payment-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.payment-table-actions-col {
    white-space: nowrap;
    text-align: right;
}

.payment-table-actions-col .icon-btn {
    padding: 4px;
}

.payment-table tbody tr {
    transition: background 0.15s;
}

.payment-table tbody tr:hover {
    background: var(--accent-glow);
}

.payment-table tbody td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.payment-table tbody tr:last-child td {
    border-bottom: none;
}

.payment-table-amount-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Quick payment form (Today page snackbar CTA) ── */
.payment-quick-form-card {
    margin-top: 0.75rem;
}

.payment-table-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsive: quick-add rows ──
   .habit-create-row (habits.css) is flex-wrap: nowrap, sized for its
   original 3-item habit row (emoji trigger + name + button). Payments reuse
   it with an extra amount/currency pair, which no longer fits alongside the
   title on narrow screens — wrap it instead of letting inputs get crushed
   or the row overflow horizontally. */
@media (max-width: 600px) {
    .payment-create-row {
        flex-wrap: wrap;
    }

    .payment-create-row .habit-name-input {
        flex-basis: 100%;
    }

    /* Collapse the reminder badge to icon-only — the name text is the
       first thing to give way once title + budget + category badges are
       already competing for a narrow row; the icon alone (plus the title
       attribute) still answers "is this linked". */
    .payment-row-reminder-badge {
        padding: 0.1rem 0.4rem;
    }

    .payment-row-reminder-badge-name {
        display: none;
    }
}

/* ── Responsive: merged headers ──
   Both the "Recent payments" net stat and the Insights tab nav ride
   margin-left: auto next to a title in a flex row (task-list-header) — at
   this width that crowds the title, so drop each to its own line instead
   of letting text truncate or the pill nav wrap mid-control. */
@media (max-width: 560px) {
    .payment-list-header,
    .payment-insights-header {
        align-items: flex-start;
    }

    .payment-list-net-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        margin-left: 0;
        flex-basis: 100%;
    }

    .payment-insights-nav {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* ── Shared expense toggle + badge ──
   Toggle reuses the checkbox/radio-driven pill grammar already established
   by .tasks-toggle-btn (tasks_filter.css) — border pill that fills solid on
   check — rather than a raw checkbox, so it reads as a toggle control at a
   glance inside this already-dense edit row instead of being mistaken for
   a stray form field. The input stays in the DOM as .is-sr-only (not
   display:none, unlike .tasks-toggle-btn/.tasks-tag-pill) so it keeps
   native keyboard focus + Space-to-toggle — those two pills lose tab
   reachability under display:none, which a raw <input type=checkbox> here
   didn't previously have a11y-wise, so this doesn't regress it. */
.payment-shared-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.payment-shared-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--text-primary);
}

.payment-shared-toggle:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.payment-shared-toggle:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.payment-shared-toggle-icon {
    font-size: 15px;
    color: var(--text-muted);
    transition: color 0.15s;
}

.payment-shared-toggle:has(input:checked) .payment-shared-toggle-icon {
    color: #fff;
}

.payment-shared-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.payment-shared-badge .material-icons {
    font-size: 14px;
    color: var(--accent);
}