/* Budget page styles. Scope everything under .page-budget.
   The category popover and the settings modal render into #overlay-root,
   outside the page, so they use the .budget-pop-* / .budget-modal-* prefixes. */

.page-budget {
  /* Name ~38% | Budget | Actual | Remaining, shared by every row and header. */
  --bud-cols: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr));
  --bud-card-x: var(--space-2);
  --bud-row-x: var(--space-4);
  --bud-whisper: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ── layout: ~70% table column, ~30% sticky summary ───────────────────── */
.page-budget .bud-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--space-6); align-items: start;
}
.page-budget .bud-main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.page-budget .bud-section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ── shared row grid ──────────────────────────────────────────────────── */
.page-budget .bud-row,
.page-budget .bud-sec-head {
  display: grid; grid-template-columns: var(--bud-cols);
  column-gap: var(--space-4); align-items: center;
}
.page-budget .bud-row { padding: var(--space-2) var(--bud-row-x); border-radius: var(--radius-md); }
.page-budget .bud-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.page-budget .bud-num { justify-self: end; text-align: right; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-budget .bud-bar { grid-column: 2 / -1; margin-top: var(--space-2); }
.page-budget .bud-bar .progress { height: 4px; }
.page-budget .bud-row-group .bud-bar .progress { height: 6px; }

.page-budget .bud-rem-text.is-pos { color: var(--positive); }
.page-budget .bud-rem-text.is-neg { color: var(--negative); }

/* collapse chevrons */
.page-budget .bud-chev {
  width: 30px; height: 30px; flex: none; margin-left: calc(-1 * var(--space-2));
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.page-budget .bud-chev:hover { background: var(--hover); color: var(--color-text); }
.page-budget .bud-chev:active { background: var(--press); }
.page-budget .bud-chev svg,
.page-budget .bud-fc-toggle svg { transition: transform 0.15s ease; }
.page-budget .bud-chev[aria-expanded='false'] svg,
.page-budget .bud-fc-toggle[aria-expanded='false'] svg { transform: rotate(-90deg); }

/* ── section header (Income / Expenses) ───────────────────────────────── */
.page-budget .bud-sec-head { padding: 0 calc(var(--bud-card-x) + var(--bud-row-x)); }
.page-budget .bud-sec-title { font-size: 24px; margin: 0; }
.page-budget .bud-col {
  justify-self: end; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ── group cards ──────────────────────────────────────────────────────── */
.page-budget .bud-group { padding: var(--bud-card-x); gap: calc(var(--space-1) / 2); }
.page-budget .bud-row-group { padding-block: var(--space-3) var(--space-3); }
.page-budget .bud-group-title { font-size: 19px; margin: 0; }
.page-budget .bud-row-group .bud-num { font-size: 16px; font-weight: 700; }

.page-budget .bud-row-cat { font-size: 14px; cursor: pointer; }
.page-budget .bud-row-cat:hover { background: var(--hover); }
/* the whole row opens the history popover, so the whole row presses (not while pressing into the input) */
.page-budget .bud-row-cat:active:not(:has(.bud-input:active)) { background: var(--press); }
.page-budget .bud-row-cat.is-unbudgeted { background: var(--inset); }
.page-budget .bud-row-cat.is-unbudgeted:hover { background: color-mix(in srgb, var(--color-text) 4%, var(--inset)); }
.page-budget .bud-row-cat.is-over .bud-actual { color: var(--negative); font-weight: 600; }

.page-budget .bud-cat-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%;
  padding: calc(var(--space-1) / 2) var(--space-1); margin-left: calc(-1 * var(--space-1));
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; color: var(--color-text); text-align: left;
}
.page-budget .bud-cat-btn:hover .bud-cat-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.page-budget .bud-cat-btn .cat-emoji { font-size: 16px; }
.page-budget .bud-cat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.page-budget .bud-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-budget .bud-sub { font-size: 12px; color: var(--muted); }

/* inline budget input: the design-system pill input, cream on the sand card */
.page-budget .bud-input {
  width: 116px; max-width: 100%; min-height: 32px; padding: var(--space-1) var(--space-3);
  text-align: right; font-size: 14px; font-variant-numeric: tabular-nums;
  background: var(--color-bg); cursor: text;
}
.page-budget .bud-input:active { background: var(--color-neutral-100); }
.page-budget .bud-input::placeholder { color: var(--muted); }
.page-budget .is-unbudgeted .bud-input { background: transparent; color: var(--muted); }

/* remaining pill */
.page-budget .bud-pill {
  display: inline-flex; align-items: center; padding: calc(var(--space-1) * 0.75) var(--space-3); border-radius: 999px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.page-budget .bud-pill.is-pos { background: var(--color-accent-2-100); color: var(--positive); }
.page-budget .bud-pill.is-neg { background: var(--color-accent-100); color: var(--negative); }

/* "Show N unbudgeted" footer */
.page-budget .bud-unb {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-1) calc(var(--bud-row-x) - var(--space-2)); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 13px; color: var(--muted);
}
.page-budget .bud-unb:hover { background: var(--hover); color: var(--color-text); }
.page-budget .bud-unb:active { background: var(--press); }
.page-budget .bud-none { margin: 0; padding: var(--space-2) var(--bud-row-x) var(--space-3); font-size: 13px; font-style: italic; color: var(--muted); }

/* section totals */
.page-budget .bud-total { padding: var(--bud-card-x); }
.page-budget .bud-row-total { padding-block: var(--space-3); }
.page-budget .bud-total-title { font-size: 18px; margin: 0; }
.page-budget .bud-row-total .bud-num { font-size: 16px; font-weight: 700; }

/* Left to Budget footer bar: solid sage when >= 0, terracotta when negative */
.page-budget .bud-left { padding: var(--bud-card-x); border-radius: 999px; color: var(--color-bg); }
.page-budget .bud-left.is-pos { background: var(--color-accent-2-700); }
.page-budget .bud-left.is-neg { background: var(--color-accent-700); }
.page-budget .bud-left .bud-row { padding-block: var(--space-3); }
.page-budget .bud-left-name { flex-direction: column; align-items: flex-start; gap: 0; }
.page-budget .bud-left-title { font-size: 20px; margin: 0; }
.page-budget .bud-left-sub { font-size: 12px; color: color-mix(in srgb, var(--color-bg) 82%, transparent); }
.page-budget .bud-left-amt { grid-column: 2 / -1; font-size: 24px; font-weight: 700; }

/* ── summary panel ────────────────────────────────────────────────────── */
.page-budget .bud-aside { min-width: 0; }
.page-budget .bud-summary { padding: var(--space-4); gap: var(--space-4); }

.page-budget .bud-hero {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-1) / 2); text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-lg);
}
.page-budget .bud-hero.is-pos { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.page-budget .bud-hero.is-neg { background: var(--color-accent-100); color: var(--color-accent-800); }
.page-budget .bud-hero-amt { font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.page-budget .bud-hero-label { display: inline-flex; align-items: center; gap: calc(var(--space-1) / 2); font-size: 14px; font-weight: 600; }
.page-budget .bud-hero-note { margin: var(--space-1) 0 0; font-size: 12px; }
.page-budget .bud-info {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: help;
}
.page-budget .bud-info:hover { background: var(--hover); }
.page-budget .bud-info:active { background: var(--press); }

.page-budget .bud-tabs { display: flex; }
.page-budget .bud-tabs .seg-opt { flex: 1; justify-content: center; }
.page-budget .bud-tabs .seg-opt:not(:has(input:checked)):active { background: var(--press); }

.page-budget .bud-blocks { display: flex; flex-direction: column; gap: var(--space-4); }
.page-budget .bud-blocks .empty { padding: var(--space-4) var(--space-2); }
.page-budget .bud-blocks-label {
  margin-top: var(--space-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.page-budget .bud-block { display: flex; flex-direction: column; gap: var(--space-2); }
.page-budget .bud-block-top,
.page-budget .bud-block-bottom {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.page-budget .bud-block-name { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: 14px; font-weight: 600; }
.page-budget .bud-block-budget { color: var(--muted); white-space: nowrap; }
.page-budget .bud-block-actual { font-weight: 700; white-space: nowrap; }
.page-budget .bud-block-rem { font-weight: 600; white-space: nowrap; }
.page-budget .bud-block-rem.is-pos { color: var(--positive); }
.page-budget .bud-block-rem.is-neg { color: var(--negative); }

.page-budget .bud-pace { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 12px; color: var(--muted); }
.page-budget .bud-pace-tick { width: 2px; height: 12px; flex: none; margin-inline: var(--space-1); border-radius: 999px; background: var(--color-text); }

/* ── forecast grid ────────────────────────────────────────────────────── */
.page-budget .bud-fc { padding: var(--space-4) var(--space-4) var(--space-3); gap: var(--space-3); }
.page-budget .bud-fc-note { margin: 0 0 0 var(--space-2); font-size: 13px; color: var(--muted); max-width: 70ch; }
.page-budget .bud-fc-scroll { overflow-x: auto; border-radius: var(--radius-md); }
.page-budget .bud-fc-table { min-width: 1000px; font-size: 13px; }
.page-budget .bud-fc-table th,
.page-budget .bud-fc-table td { white-space: nowrap; }
.page-budget .bud-fc-table thead th { border-bottom-color: var(--bud-whisper); }
.page-budget .bud-fc-table tbody th { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; color: var(--color-text); }
.page-budget .bud-fc-name {
  position: sticky; left: 0; z-index: 1; min-width: 196px; text-align: left;
  background: var(--color-surface);
}
.page-budget .bud-fc-table tbody tr:hover .bud-fc-name { background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface)); }
.page-budget .bud-fc-cell { text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.page-budget .bud-fc-table th.bud-fc-cell { text-align: right; }
.page-budget .bud-fc-th-sub { display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
.page-budget .bud-fc-act { display: block; font-weight: 600; }
.page-budget .bud-fc-act.is-neg { color: var(--negative); }
.page-budget .bud-fc-act.is-pos { color: var(--positive); }
.page-budget .bud-fc-bud { display: block; font-size: 11px; color: var(--muted); }
.page-budget .bud-fc-table .is-current { background: var(--inset); }
.page-budget .bud-fc-table thead .is-current { color: var(--color-text); font-weight: 700; }
.page-budget .bud-fc-table td.is-plan .bud-fc-act { color: var(--muted); font-weight: 400; }

.page-budget .bud-fc-sec th,
.page-budget .bud-fc-sec td { border-bottom: 0; padding-top: var(--space-6); }
.page-budget .bud-fc-table tbody:first-of-type .bud-fc-sec th,
.page-budget .bud-fc-table tbody:first-of-type .bud-fc-sec td { padding-top: var(--space-3); }
.page-budget .bud-fc-sec-title { font-size: 20px; margin: 0; }
.page-budget .bud-fc-sec:hover,
.page-budget .bud-fc-table tbody .bud-fc-sec:hover { background: none; }
.page-budget .bud-fc-sec:hover .bud-fc-name { background: var(--color-surface); }

.page-budget .bud-fc-toggle {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-left: calc(-1 * var(--space-2));
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--color-text);
}
.page-budget .bud-fc-toggle svg { color: var(--muted); }
.page-budget .bud-fc-toggle:hover { background: var(--hover); }
.page-budget .bud-fc-toggle:active { background: var(--press); }
.page-budget .bud-fc-group .bud-fc-act { font-weight: 700; }
.page-budget .bud-fc-table tbody .bud-fc-cat th { padding-left: calc(var(--space-2) + var(--space-6)); }
.page-budget .bud-fc-cat .cat-emoji { margin-right: var(--space-1); }
.page-budget .bud-fc-table tbody .bud-fc-total th { font-weight: 700; }
.page-budget .bud-fc-total .bud-fc-act { font-weight: 700; }
.page-budget .bud-fc-table tbody .bud-fc-left th { font-weight: 700; font-size: 14px; }
.page-budget .bud-fc-left th,
.page-budget .bud-fc-left td { border-bottom: 0; padding-top: var(--space-3); }
.page-budget .bud-fc-left .bud-fc-act { font-weight: 700; font-size: 14px; }

/* ── responsive: stack the summary above the table ────────────────────── */
@media (min-width: 1181px) {
  .page-budget .bud-summary { max-height: calc(100vh - var(--space-8) * 2 - var(--space-6) * 2); overflow-y: auto; }
}
@media (max-width: 1180px) {
  .page-budget .bud-layout { grid-template-columns: minmax(0, 1fr); }
  .page-budget .bud-aside { order: -1; }
  .page-budget .bud-summary {
    display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start; column-gap: var(--space-6); row-gap: var(--space-3);
  }
  .page-budget .bud-hero { grid-row: span 3; }
  .page-budget .bud-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
  .page-budget .bud-blocks-label { grid-column: 1 / -1; margin-top: 0; }
  .page-budget .bud-blocks .empty { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-budget { --bud-cols: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); --bud-row-x: var(--space-2); }
  .page-budget .bud-row, .page-budget .bud-sec-head { column-gap: var(--space-2); }
  .page-budget .bud-summary, .page-budget .bud-blocks { grid-template-columns: minmax(0, 1fr); }
  .page-budget .bud-hero { grid-row: auto; }
  .page-budget .bud-input { width: 100%; padding-inline: var(--space-2); }
  .page-budget .bud-left { border-radius: var(--radius-lg); }
}

/* ── category history popover (#overlay-root) ─────────────────────────── */
.budget-pop { display: flex; flex-direction: column; gap: var(--space-3); }
.budget-pop-head { display: flex; align-items: center; gap: var(--space-3); }
.budget-pop-emoji {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; background: var(--color-surface);
}
.budget-pop-heading { min-width: 0; }
.budget-pop-title { font-size: 19px; margin: 0; }
.budget-pop-meta { font-size: 12px; color: var(--muted); }
.budget-pop-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.budget-pop-stat { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.budget-pop-stat-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-pop-stat-l { font-size: 12px; color: var(--muted); }
.budget-pop-label { margin-top: var(--space-1); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.budget-pop-chart { min-height: 132px; }
.budget-pop .chart-legend { justify-content: flex-start; margin-top: calc(-1 * var(--space-1)); }
.budget-pop .chart-hit { cursor: default; }
.budget-pop-ref { stroke: var(--color-neutral-800); stroke-width: 2; stroke-linecap: round; }
.budget-pop-ref-halo { stroke: var(--color-bg); stroke-width: 5; stroke-linecap: round; }
.budget-pop-empty { margin: 0; font-size: 13px; color: var(--muted); }
.budget-pop-txs { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); margin-inline: calc(-1 * var(--space-2)); }
.budget-pop-tx {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 13px; text-align: left;
}
.budget-pop-tx:hover { background: var(--hover); }
.budget-pop-tx:active { background: var(--press); }
.budget-pop-tx-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.budget-pop-tx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-pop-tx-date { font-size: 11px; color: var(--muted); }
.budget-pop-link { align-self: flex-start; }

/* ── budget settings modal (#overlay-root) ────────────────────────────── */
.budget-modal-section { display: flex; flex-direction: column; gap: var(--space-2); }
.budget-modal-section + .budget-modal-section { margin-top: var(--space-6); }
.budget-modal-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.budget-modal-options { display: flex; flex-direction: column; gap: var(--space-2); }
.budget-modal-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md); cursor: pointer;
}
.budget-modal-option:hover { background: var(--hover); }
.budget-modal-option:active { background: var(--press); }
.budget-modal-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.budget-modal-option.is-disabled { opacity: 0.55; cursor: not-allowed; }
.budget-modal-option.is-disabled:hover, .budget-modal-option.is-disabled:active { background: none; }
.budget-modal-option .radio { margin-top: calc(var(--space-1) / 2); }
.budget-modal-option-text { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.budget-modal-option-title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.budget-modal-option-body { font-size: 13px; color: var(--muted); }
.budget-modal-kinds { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.budget-modal-kind { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); font-size: 13px; }
.budget-modal-kind dt { font-weight: 600; }
.budget-modal-kind dd { margin: 0; }
.budget-modal-eg { display: block; color: var(--muted); }
.budget-modal-note { margin: 0; font-size: 13px; }
.budget-modal-more {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg);
}
.budget-modal-more-title { font-weight: 600; font-size: 14px; }
.budget-modal-more-body { font-size: 13px; color: var(--muted); }
.budget-modal-more .btn { flex: none; }