/* Transaction overview shares the portfolio's quiet surfaces and theme tokens. */
.transaction-overview {
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  margin-inline: auto;
  padding-block: 4px 24px;
  color: var(--text);
}

.transaction-overview :is(button, select, input) {
  touch-action: manipulation;
  scroll-margin-block: 90px calc(150px + var(--safe-bottom));
}

.transaction-overview :is(button, select):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.account-filter { min-width: 0; overscroll-behavior-inline: contain; padding-block: 4px; }
.account-chip, .transaction-header-actions .text-button { position: relative; }
.account-chip::before, .transaction-header-actions .text-button::before { content: ''; position: absolute; inset: -4px 0; }
.account-chip > span { min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip:focus-visible { outline-offset: -2px; }

.account-chip svg { width: 17px; height: 17px; flex: none; }
.account-chip small { color: inherit; font-size: 10px; }
.transaction-overview > .expense-page-head { align-items: center; margin-bottom: 18px; }
.transaction-overview > .expense-page-head > button { display: inline-flex; align-items: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; }
.transaction-overview > .expense-page-head > button svg { width: 18px; height: 18px; }
.transaction-overview .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.transaction-overview .text-button svg { width: 18px; height: 18px; flex: none; }
.transaction-add-account { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 22px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; text-align: start; }
.transaction-add-account > svg { width: 19px; height: 19px; flex: none; color: var(--text-2); }
.transaction-add-account > svg:last-child { margin-inline-start: auto; width: 16px; }
.transaction-add-account small { margin-inline-start: 5px; color: var(--text-2); font-size: 10px; }

.transaction-hero {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
}
.transaction-hero > :is(small, span, p) {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.8;
}
.transaction-hero > strong {
  max-width: 100%;
  font-size: clamp(28px, 6.6vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.transaction-hero > strong small { margin-inline-start: 6px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.transaction-hero .positive { color: var(--positive); }
.transaction-hero .negative { color: var(--negative); }

.transaction-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.transaction-metrics > :is(article, div) { display: grid; gap: 6px; min-width: 0; }
.transaction-metrics small { color: var(--text-2); font-size: 11px; line-height: 1.7; }
.transaction-metrics :is(b, strong) { font-size: 16px; line-height: 1.6; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.transaction-metrics .inflow :is(b, strong), .transaction-metrics .positive { color: var(--positive); }
.transaction-metrics .outflow :is(b, strong), .transaction-metrics .negative { color: var(--negative); }
.transaction-metrics :is(.spend, .transaction-spend, .transaction-spent, article:has(.negative)) :is(b, strong) { font-size: 16px; line-height: 1.6; font-weight: 600; }
.transaction-metrics :is(.spend, .transaction-spend, .transaction-spent, article:has(.negative)) small { color: var(--text-2); font-size: 11px; font-weight: 400; }
.transaction-metrics :is(.income, .transaction-income, article:has(.positive)) { align-content: center; }
.transaction-metrics :is(.spend, .transaction-spend, .transaction-spent, article:has(.negative)) { order: -1; }

.transaction-chart {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
}
.transaction-chart > svg, .transaction-chart-svg {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 100%;
  height: 230px;
  overflow: visible;
  color: var(--primary);
  direction: ltr;
}
.transaction-chart svg text { fill: var(--text-2); font: 10px YekanBakh, Tahoma, sans-serif; }
.transaction-chart .chart-grid { stroke: var(--border); }
.transaction-chart .chart-line { stroke: var(--primary); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.transaction-chart .chart-point { fill: var(--primary); stroke: var(--surface); }
.transaction-chart-labels {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: 7px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.6;
  direction: ltr;
}
.transaction-chart-labels span { overflow-wrap: anywhere; }
.transaction-chart-labels small { font: inherit; }
.transaction-chart-section > .expense-section-head { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.transaction-chart-section > .expense-section-head h2 { font-size: 13px; }
.transaction-chart-section .expense-view-switch button { min-width: 44px; min-height: 44px; }
.transaction-chart-section { margin-top: 8px; min-width: 0; }
.transaction-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.transaction-chart-head h2 { margin: 0; font-size: 13px; line-height: 1.8; }
.transaction-chart-legend, .transaction-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; color: var(--text-2); font-size: 10px; line-height: 1.7; }
.transaction-chart-legend > span, .transaction-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.transaction-chart-legend i, .transaction-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--primary); flex: none; }
.transaction-chart-legend :is(.spend, .expense, .withdrawal) i, .transaction-legend :is(.spend, .expense, .withdrawal) i { background: var(--negative); }
.transaction-chart-legend { grid-column: 1; grid-row: 1; gap: 6px 14px; margin-bottom: 8px; }
.transaction-chart-legend-item { flex-wrap: wrap; gap: 5px; }
.transaction-chart-legend-item b { font-size: 10px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.transaction-chart-legend-item.expense .transaction-chart-swatch { height: 0; border-bottom: 2px dashed var(--negative); background: transparent !important; }
.transaction-chart-legend-item.expense i { height: 0; border-bottom: 2px dashed var(--negative); background: transparent !important; }
.transaction-chart-scale { position: relative; grid-column: 1; grid-row: 2; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; justify-self: end; align-self: stretch; max-width: 45%; padding: 17px 7px; pointer-events: none; color: var(--text-2); font-size: 9px; }
.transaction-chart-scale small { padding: 1px 4px; border-radius: 4px; background: var(--canvas); font: inherit; font-variant-numeric: tabular-nums; }
.transaction-chart-scale small:first-child { transform: translateY(-50%); }
.transaction-chart-scale small:last-child { transform: translateY(50%); }
.transaction-chart .transaction-balance-line { stroke: var(--primary); }
.transaction-chart .transaction-spend-line, .transaction-chart .transaction-expense-line { stroke: var(--negative); }
.transaction-overview .expense-month-nav button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.transaction-overview .expense-month-nav svg { width: 18px; height: 18px; flex: none; }
.transaction-chart-note, .transaction-chart-empty {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.9;
}
.transaction-chart-note { grid-column: 1; grid-row: 4; }
.transaction-chart-empty { display: grid; place-content: center; min-height: 96px; text-align: center; border-bottom: 1px solid var(--border); }
.transaction-chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin: 15px 0 22px;
}
.transaction-chart-controls :is(button, select) {
  flex: 1 1 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.transaction-chart-controls select { flex: 1 1 76px; max-width: 120px; border-color: var(--border); background: var(--surface); text-align: start; }
.transaction-chart-controls :is(.selected, [aria-pressed="true"], [aria-selected="true"]) { background: var(--surface-subtle); color: var(--text); font-weight: 700; }
.transaction-chart-controls button:active { background: var(--surface-subtle); }
.transaction-periods {
  padding-block: 6px;
}
.transaction-periods button { position: relative; }
.transaction-periods button::before { content: ''; position: absolute; inset: -6px 0; }
.transaction-periods button:focus-visible { outline-offset: -2px; }
.transaction-current-balance { font-size: 11px !important; }
.transaction-current-balance b { font-weight: 500; }
.transaction-chart-readout { grid-column: 1; grid-row: 4; font-size: 11px; color: var(--text-2); line-height: 1.8; min-height: 24px; }
.transaction-chart-readout[hidden] { display: none; }
.transaction-chart > .chart-labels { grid-column: 1; grid-row: 3; }
.transaction-metrics { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.transaction-header-actions { display: flex; align-items: center; gap: 8px; }
.transaction-header-actions .text-button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 9px; font-size: 11px; }
.transaction-hero [data-expense-stats] { cursor: pointer; }
.transaction-chart-section > .expense-month-nav { margin-top: 6px; margin-bottom: 0; }
.transaction-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.transaction-mode-switch button {
  min-height: 44px;
  min-width: 70px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
}
.transaction-mode-switch :is(.selected, [aria-pressed="true"]) { background: var(--surface-subtle); color: var(--text); font-weight: 600; }

.transaction-budget {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.transaction-budget header, .transaction-budget > :is(div, span):first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.transaction-budget > .expense-section-head { margin: 0; }
.transaction-budget .expense-budget-meta { margin-top: 0; flex-wrap: wrap; gap: 6px 12px; line-height: 1.8; }
.transaction-budget :is(b, h2, h3) { margin: 0; color: var(--text); font-size: 13px; line-height: 1.7; }
.transaction-budget .expense-budget-meta b { font-size: 12px; font-weight: 600; }
.transaction-budget :is(p, small) { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.9; }
.transaction-budget strong { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.transaction-budget button {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
}
.transaction-budget .expense-progress { margin: 0; width: 100%; }

.transaction-shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0 0 28px;
}
.transaction-shortcuts button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}
.transaction-shortcuts button > svg { width: 24px; height: 24px; flex: none; color: var(--text-2); }
.transaction-shortcuts button > svg:last-child { width: 18px; height: 18px; margin-inline-start: auto; }
.transaction-shortcuts button > span { display: grid; min-width: 0; flex: 1; gap: 3px; }
.transaction-shortcuts button b { font-size: 12px; font-weight: 600; line-height: 1.7; }
.transaction-shortcuts button small { color: var(--text-2); font-size: 10px; line-height: 1.8; }
.transaction-shortcuts button:active { background: var(--surface-subtle); }
.transaction-shortcuts button:disabled { cursor: default; opacity: .5; }
.transaction-shortcuts button:only-child { flex-direction: row; min-height: 48px; grid-column: 1 / -1; }

.transaction-list { min-width: 0; }
.transaction-list > header, .transaction-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.transaction-list :is(h2, h3) { margin: 0; font-size: 15px; line-height: 1.8; }
.transaction-list > header small { color: var(--text-2); font-size: 11px; }
.transaction-search { display: block; width: 100%; min-width: 0; min-height: 44px; margin: 0 0 12px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.transaction-day { min-width: 0; margin: 20px 0 0; }
.transaction-day > :is(header, h3, h4) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 0 10px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 11px; line-height: 1.7; font-weight: 500; }
.transaction-day > header :is(b, strong, small, span) { font: inherit; }
.transaction-day .transaction-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
  font: inherit;
}
.transaction-day button.transaction-row:active { background: var(--surface-subtle); }
.transaction-day .transaction-row > svg:last-child { width: 16px; height: 16px; color: var(--text-2); }
.transaction-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-subtle); color: var(--text-2); }
.transaction-icon svg { width: 21px; height: 21px; }
.transaction-row.inflow .transaction-icon { color: var(--positive); background: var(--positive-soft); }
.transaction-row.outflow .transaction-icon { color: var(--negative); background: var(--negative-soft); }
.transaction-row.transfer .transaction-icon { color: var(--primary); }
.transaction-title { display: grid; gap: 4px; min-width: 0; }
.transaction-title :is(b, strong) { min-width: 0; color: var(--text); font-size: 12px; line-height: 1.65; font-weight: 600; overflow-wrap: anywhere; }
.transaction-title :is(small, span) { min-width: 0; color: var(--text-2); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.transaction-amount { display: grid; justify-items: end; gap: 4px; max-width: 155px; text-align: end; font-variant-numeric: tabular-nums; }
.transaction-amount :is(b, strong) { max-width: 100%; font-size: 13px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
.transaction-amount :is(small, span) { color: var(--text-2); font-size: 10px; line-height: 1.7; }
.transaction-row.inflow .transaction-amount :is(b, strong) { color: var(--positive); }
.transaction-row.outflow .transaction-amount :is(b, strong) { color: var(--text); }
.transaction-row.transfer .transaction-amount :is(b, strong) { color: var(--primary); }
.transaction-empty { padding: 30px 14px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-2); font-size: 12px; line-height: 1.9; text-align: center; }
.transaction-empty :is(h2, h3, b) { color: var(--text); }
.transaction-list [data-transaction-more] { display: block; width: 100%; min-height: 44px; margin: 18px 0 0; padding: 11px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }

.transaction-account-help { margin: 10px 0 18px; color: var(--text-2); font-size: 11px; line-height: 1.9; }
.transaction-default-option { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px 0; color: var(--text); font-size: 12px; line-height: 1.8; cursor: pointer; }
.transaction-default-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); }
.finance-card:has(:is([data-finance-reconcile], [data-finance-delete-card])) { flex-wrap: wrap; gap: 10px; }
.finance-card:has(:is([data-finance-reconcile], [data-finance-delete-card])) > div { flex: 1 1 150px; min-width: 0; }
.finance-card:has(:is([data-finance-reconcile], [data-finance-delete-card])) :is(b, strong) { overflow-wrap: anywhere; }
.finance-card button:is([data-finance-account], [data-finance-reconcile], [data-finance-delete-card]) { min-width: 44px; min-height: 44px; }
.transaction-type-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 12px; background: var(--surface-subtle); }
.transaction-type-tabs button { min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; }
.transaction-type-tabs :is(.selected, [aria-pressed="true"]) { background: var(--surface); color: var(--text); font-weight: 600; }

@media (hover: hover) {
  .account-chip:not(.selected):hover, .transaction-shortcuts button:not(:disabled):hover,
  .transaction-budget button:hover, .transaction-list [data-transaction-more]:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
  button.transaction-row:hover { background: var(--surface-subtle); }
}
@media (min-width: 721px) {
  .transaction-overview { padding-top: 8px; }
  .transaction-hero > strong { font-size: 40px; }
  .transaction-chart > svg, .transaction-chart-svg { height: 230px; }
  .transaction-chart-scale { padding-block: 21px; }
  .transaction-chart-controls { justify-content: center; gap: 8px; }
  .transaction-chart-controls button { flex: 0 1 78px; }
  .transaction-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .transaction-shortcuts button { min-height: 68px; flex-direction: row; padding-inline: 14px; gap: 10px; font-size: 12px; }
  .transaction-row { grid-template-columns: 44px minmax(0, 1fr) auto 16px; min-height: 80px; gap: 14px; }
  .transaction-icon { width: 44px; height: 44px; }
  .transaction-title :is(b, strong), .transaction-amount :is(b, strong) { font-size: 14px; }
}
@media (max-width: 380px) {
  .transaction-shortcuts { gap: 6px; }
  .transaction-shortcuts button { font-size: 10px; padding-inline: 12px; }
  .transaction-row { grid-template-columns: 36px minmax(0, 1fr) auto 14px; gap: 8px; }
  .transaction-icon { width: 36px; height: 36px; border-radius: 10px; }
  .transaction-amount { max-width: 135px; }
  .transaction-amount :is(b, strong) { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .transaction-overview *, .transaction-overview *::before, .transaction-overview *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.transaction-card-heading { display:flex; align-items:center; gap:8px; min-width:0; }
.transaction-card-selector.portfolio-filter { display:flex; align-items:center; gap:8px; border-radius:999px; min-height:40px; max-width:240px; padding:9px 14px; font-size:12px; background:var(--surface); border:1px solid var(--border); color:var(--text); }
.transaction-card-selector span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.transaction-card-selector svg { width:16px; height:16px; flex-shrink:0; }
.transaction-card-settings { display:grid; place-items:center; width:40px; height:40px; padding:9px; border:0; background:transparent; color:var(--text-2); }
.transaction-card-settings svg { width:20px; height:20px; }
.transaction-split-button { display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); padding:9px 12px; min-height:40px; font-size:12px; }
.transaction-split-button svg { width:18px; height:18px; }
.transaction-remaining-balance { font-size:11px !important; }
.transaction-remaining-balance b { font-weight:500; }
.transaction-card-choices { display:grid; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.transaction-card-choice { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:16px; min-height:56px; border:0; border-bottom:1px solid var(--border); background:var(--surface); color:var(--text); text-align:right; font-size:14px; }
.transaction-card-choice:last-child { border-bottom:0; }
.transaction-card-choice[data-picker-add] { justify-content:flex-start; }
.transaction-stats-link { display:inline-flex; align-items:center; justify-self:start; gap:4px; padding:6px 0; background:transparent; border:0; color:var(--text-2); font-size:11px; }
.transaction-stats-link svg { width:14px; height:14px; }
.finance-monthly-form .field > :is(input,select) { width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); font:inherit; font-size:14px; }
.transaction-card-choice span { display:grid; gap:4px; }
.transaction-card-choice small { color:var(--text-2); font-size:11px; }
.transaction-card-choice svg { width:20px; height:20px; }
.transaction-card-choice[aria-pressed="true"] { color:var(--primary); background:var(--surface-subtle); }
@media(max-width:380px) { .transaction-card-selector.portfolio-filter { max-width:210px; padding-inline:10px; font-size:11px; } .transaction-card-heading { gap:2px; } .transaction-split-button { padding-inline:9px; } }