/* ---------- Expenses ---------- */
.expenses-page { display: flex; flex-direction: column; gap: 14px; }
.expenses-page .page__header h1 .icon { vertical-align: -0.12em; }

/* Entering one: amount and title in a row, the details under it. */
.expenses-add { padding: 14px 16px; }
.expense-form { display: flex; flex-direction: column; gap: 10px; }
.expense-form__main { display: flex; gap: 8px; align-items: stretch; }
.expense-form__amount { position: relative; flex: 0 0 8.5rem; }
.expense-form__amount input { width: 100%; padding-right: 1.8rem; font-size: var(--text-lg); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.expense-form__amount span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.expense-form__title { flex: 1 1 auto; min-width: 0; }
.expense-form__title input { width: 100%; height: 100%; }
.expense-form__main .primary-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.expense-form__details { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.expense-form__field { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--ink-muted); min-width: 8rem; flex: 1 1 8rem; }
.expense-form__field select, .expense-form__field input { width: 100%; }
.expense-form__receipt { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; flex: 0 0 auto; }
.expense-form__receipt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.expense-form__hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.expense-form__hint .icon { color: var(--accent); }
.expense-form__note input { width: 100%; }
.expense-form--compact .expense-form__details { flex-wrap: nowrap; }

/* The month: arrows and its name. */
.expenses-month { display: flex; align-items: center; justify-content: center; gap: 12px; }
.expenses-month h2 { margin: 0; min-width: 10rem; text-align: center; font-size: 1.15rem; }
.expenses-summary .stat strong { font-variant-numeric: tabular-nums; }

/* What Shani noticed. */
.expenses-insights { padding: 14px 16px; }
.expenses-insights .hub-section__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.expenses-insights .hub-section__title .icon { color: var(--accent); }
.expenses-insights ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.expenses-insight { display: flex; align-items: center; gap: 10px; line-height: 1.45; }
.expenses-insight > .icon { flex: 0 0 auto; color: var(--accent); }
.expenses-insight > span { flex: 1 1 auto; }
.expenses-insight button { flex: 0 0 auto; }
.expenses-insight.is-budget-over > .icon, .expenses-insight.is-budget-heading > .icon { color: var(--danger); }
.expenses-insight.is-less > .icon { color: #2f9e62; }

/* Bars: name, bar, amount (budgets and categories). */
.expenses-budgets, .expenses-categories, .expenses-list { padding: 14px 16px; }
.expenses-bars { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.expenses-bars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.expenses-bars__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.25; justify-content: flex-start; text-align: left; color: var(--ink); }
.expenses-bars__name .icon { flex: 0 0 auto; }
.expenses-bars__name.is-active { color: var(--accent); }
.expenses-bars__bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.expenses-bars__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.expenses-bars__bar > .expenses-bars__pace { background: color-mix(in srgb, var(--accent) 30%, transparent); z-index: 0; }
.expenses-bars__bar > span:first-child { z-index: 1; }
.expenses-bars strong { font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.expenses-bars li.is-near .expenses-bars__bar > span:first-child { background: #e0a030; }
.expenses-bars li.is-over .expenses-bars__bar > span:first-child { background: var(--danger); }
.expenses-bars li.is-over strong { color: var(--danger); }

.expenses-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }

/* The entries, by day. */
.expenses-list .hub-section__title { display: flex; align-items: center; gap: 8px; }
.expenses-list ul { margin: 0; padding: 0; list-style: none; }
.expenses-list__day { display: flex; justify-content: space-between; margin: 12px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.expenses-list__day:first-of-type { margin-top: 4px; }
.expense-row { border-top: 1px solid var(--line); }
.expense-row:first-child { border-top: 0; }
.expense-row.is-editing { padding: 10px 0; }
.expense-row__open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.expense-row__open:hover { background: var(--surface-2); }
.expense-row__icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent); }
.expense-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.expense-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.expense-row__meta { font-size: 0.78rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-row__meta .icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.expense-row__amount { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.expense-row__edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.expense-row__edit a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.expense-row__delete:hover { color: var(--danger); border-color: var(--danger); }

/* Fixed costs. */
.recurring { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.recurring .hub-section__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; width: 100%; }
.recurring__sum { font-size: var(--text-sm); font-weight: 400; color: var(--ink-muted); }
.recurring__list { margin: 0; padding: 0; list-style: none; width: 100%; }
.recurring__item { border-top: 1px solid var(--line); }
.recurring__item:first-child { border-top: 0; }
.recurring__item.is-paused { opacity: 0.6; }
.recurring-form { width: 100%; padding: 10px 0; }

/* Budgets. */
.expense-budgets { padding: 14px 16px; }
.expense-budgets__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.expense-budgets__list li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 7.5rem; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.expense-budgets__list li:first-child { border-top: 0; }
.expense-budgets__now { font-size: var(--text-sm); color: var(--ink-muted); }
.expense-budgets__limit { position: relative; }
.expense-budgets__limit input { width: 100%; padding-right: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.expense-budgets__limit span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }

/* Shopping mode: the trip as an expense. */
.shop__expense { padding: 14px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shop__expense .expense-form { width: 100%; }
.shop__expense h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.shop__expense p { margin: 0; }

/* Statistics: money amounts need room. */
.stats-rows--money li { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 5.5rem; }
.stats-rows--money strong { text-align: right; font-variant-numeric: tabular-nums; }
.stats-years { margin-bottom: 12px; }

@media (max-width: 720px) {
    .expenses-columns { grid-template-columns: minmax(0, 1fr); }
    .expense-form__main { flex-wrap: wrap; }
    .expense-form__amount { flex: 1 1 7rem; }
    .expense-form__title { flex: 1 1 100%; order: 3; }
    .expense-form__title input { height: auto; }
    .expense-form__field { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .expense-form--compact .expense-form__details { flex-wrap: wrap; }
    .expenses-bars li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; gap: 8px; }
    .expense-budgets__list li { grid-template-columns: minmax(0, 1fr) 6.5rem; }
    .expense-budgets__now { grid-column: 1; grid-row: 2; font-size: 0.78rem; }
    .expense-budgets__limit { grid-column: 2; grid-row: 1 / span 2; }
    .stats-rows--money li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 4.8rem; }
    .expenses-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .expenses-insight > .icon { margin-top: 0.2em; }
    .expenses-insight button { grid-column: 2; justify-self: start; }
    .expenses-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .expenses-summary .stat { padding: 12px; }
    .expenses-summary .stat strong { font-size: 1.25rem; }
}