/* ==========================================================================
   Finance — Transaktionen (Seite finalisiert 2026-08)
   Aus der früheren finance.css ausgezogen (diese wurde 2026-09 ganz aufgelöst;
   ihr Rest → css/pages/settings.css).
   Enthält das Transaktions-Formular (jetzt ein Modal), seine Bucket-Split-
   Zeilen und die Transaktionsliste (Monats-/Tagesgruppen, Filter).
   Seitenübergreifende Finance-Klassen: finance-shared.css. Generische
   Komponenten (tile-picker, .fin-tag, .stat-tile, .fab, .segmented): components.css.
   ========================================================================== */

/* Content-fit sizes for this page — the px is dictated by the longest label /
   value that must not wrap or make the layout jump, not by a rhythm scale.
   Named here so they're adjustable in one place and visible, rather than
   sprinkled as bare numbers through the rules. */
:root {
  --fin-tx-search-min: 120px;    /* search field won't shrink past its icon + a word */
  --fin-tx-amount-col: 100px;    /* right-hand amount column: fits "-1.234,56 €" */
  --fin-tx-title-cap: 420px;     /* payee-name ellipsis cap (desktop) */
  --fin-tx-note-cap: 240px;      /* inline-note ellipsis cap */
  --fin-tx-calendar-w: 220px;    /* month-picker popup width */
  --fin-tx-payee-avatar: 48px;   /* Empfänger/Quelle icon-preview (larger than the catalog default) */
  /* avatar + row gutter — the splits sub-list indents its left border to match */
  --fin-tx-avatar-col: calc(var(--fin-list-avatar) + var(--space-12));
  --fin-tx-acct-tile-mobile-w: 60px; /* Konto tile on phones */
  --fin-tx-acct-tile-mobile-h: 62px;
}

/* ---------- Finance: Transaktion form Betrag hero field ---------- */
/* Same vertical padding as a plain .field-underline input (base rule in
   components.css) so the Betrag and Datum fields in .fin-tx-amount-date-row
   render at the same height side by side. */
.fin-amount-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  border-bottom: var(--bw-strong) solid var(--line-strong);
  padding: var(--space-8) var(--space-10);
}

.fin-amount-input-row:hover,
.fin-amount-input-row:focus-within {
  border-bottom-color: var(--brass);
}

.fin-amount-prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
}

/* The transfer type's prefix is an SVG icon (see updateTxTypeFields() in
   finance-transactions.js) rather than a text glyph — sized to read as the
   same visual weight as the "–"/"+" text glyphs used for expense/income. */
.fin-amount-prefix svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.fin-amount-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  background: none;
  font-size: var(--fs-xl);
  font-weight: 600;
}

.fin-amount-currency {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-xl);
}

/* Betrag/Datum side by side, same field-underline metrics either side so
   both columns render at the same height. */
.fin-tx-amount-date-row {
  align-items: stretch;
}

.fin-tx-amount-date-row .field {
  justify-content: flex-end;
}

/* .fin-field-row-stretch, .fin-suffix-input-row and .fin-suffix moved to
   finance-shared.css (also used by Wunschliste + Einstellungen). */

/* Bigger icon for the Empfänger/Quelle field specifically — the shared
   .article-icon-preview (components.css) stays smaller everywhere else
   (article catalog forms). */
.fin-tx-payee-icon {
  width: var(--fin-tx-payee-avatar);
  height: var(--fin-tx-payee-avatar);
}

/* ---------- Finance: Transaktion form "Erweitert" section ---------- */
.fin-tx-advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: var(--fs-m);
  font-weight: 600;
  padding: var(--space-8) var(--space-2);
  margin: var(--space-4) 0 var(--space-8);
  cursor: pointer;
}

.fin-tx-advanced-toggle:hover {
  color: var(--brass);
}

/* chevronDown icon: points right when collapsed, rotates down when expanded. */
.fin-tx-advanced-toggle-icon {
  display: inline-flex;
  transform: rotate(-90deg);
  transition: transform var(--t-med) ease;
}

.fin-tx-advanced-toggle-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.fin-tx-advanced-toggle.is-expanded .fin-tx-advanced-toggle-icon {
  transform: rotate(0deg);
}

/* ---------- Finance: Transaktionen page ---------- */
/* The figure tiles above the list use the shared .stat-tile-row (components.css). */

/* Room at the bottom so the floating "add" button never covers the last row
   or the "Weitere Monate anzeigen" control. */
#page-finance-transactions {
  padding-bottom: var(--space-48);
}

/* The form now lives in a modal (.fin-tx-modal), so the page is just the
   list card, full width. It flows with the page (no nested scroll); only its
   search/filter header stays put via position:sticky. */
.fin-tx-list-card {
  border: none;
  min-width: 0;
}

/* The form modal is a normal-width .modal (components.css, 450px). It can get
   tall (type + accounts + amount/date + payee + splits + Erweitert) — the
   .overlay handles that scroll now, so the modal box itself stays overflow:
   visible and its tooltips aren't clipped. */

/* Search/filter controls stay in view while #finTxList's rows scroll past
   underneath — own background+z-index so scrolled-past rows don't show
   through underneath it. */
.fin-tx-list-header {
  position: sticky;
  top: var(--topbar-h);
  padding-top: var(--space-16);
  z-index: 2;
  background: var(--panel);
  padding-bottom: var(--space-12);
}

/* Must come AFTER the unconditional rule above: equal specificity, so the
   later rule wins regardless of the media query — defining it earlier
   silently let the sticky rule win at narrow widths too, leaving the header
   pinned over the list while scrolling on mobile. */
/* 960px, not the app's 720px: the sticky header has to unstick as soon as the
   list content gets dense, before the phone layout kicks in. CSS media queries
   can't read var() — breakpoints stay as raw px by necessity. */
@media (max-width: 960px) {
  .fin-tx-list-header {
    position: static;
  }
}

/* One split entry: a drag handle in a left gutter, then bucket picker + Anteil
   on a row with the note below. Each split is a bordered `--panel-alt` card —
   the same container as a product card in the "Neuen Artikel anlegen" modal.
   The remove "×" is absolutely positioned in the top-right corner, so keep
   room for it on the right.
   The markup is built by js/components/bucket-splits.js and is shared by the
   Transaktion modal and the Einstellungen > Vorlagen form — these .fin-split-*
   rules style both. */
.fin-split-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-10);
  /* right pad = clearance for the absolutely-positioned remove "×" */
  padding: var(--space-12) calc(var(--space-10) + var(--hit) + var(--space-4)) var(--space-12) var(--space-12);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-alt);
}

.fin-split-row + .fin-split-row {
  margin-top: var(--space-12);
}

.fin-split-row.is-dragging {
  opacity: var(--dragging-opacity);
}

/* Left-gutter grip — extends the shared .drag-handle (components.css). Hidden
   while a single row is the only row (nothing to reorder). Compact + vertically
   centred rather than stretched to the row height, or its ::after tooltip
   would anchor to the tall row's top edge, far from the pointer. */
.fin-split-drag {
  flex: 0 0 auto;
  align-self: center;
  width: var(--icon-xl);
  padding: var(--space-8) 0;
  border-radius: var(--radius);
}

.fin-split-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.fin-split-row-main {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.fin-split-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.fin-split-field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.fin-split-field-bucket {
  flex: 2;
}

.fin-split-field-amount {
  flex: 1;
}

.fin-split-field-full {
  width: 100%;
}

.fin-split-amount,
.fin-split-note {
  background: none;
  border: none;
  border-bottom: var(--bw-strong) solid var(--line-strong);
  border-radius: 0;
  padding: 0 var(--space-2);
  height: var(--field-h);
  font-size: var(--fs-l);
  width: 100%;
  min-width: 0;
}

.fin-split-note:hover,
.fin-split-note:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

/* Anteil field: input + fixed "€" suffix sharing one underline (same
   pattern as .fin-suffix-input-row elsewhere), so the currency is always
   visible instead of disappearing along with the placeholder once a value
   is typed. The border moves here from .fin-split-amount itself — the
   input inside this wrapper is unstyled/border-none, see below. */
.fin-split-amount-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: var(--bw-strong) solid var(--line-strong);
}

.fin-split-amount-row:hover,
.fin-split-amount-row:focus-within {
  border-bottom-color: var(--brass);
}

.fin-split-amount-row .fin-split-amount {
  border-bottom: none;
  height: var(--control-h);
}

/* ---------- Finance: bucket-pill trigger + category-grouped popover (Transaktion form) ---------- */
/* Same look as the Empfänger field (.article-name-row inside .field,
   components.css): borderless row, underline, icon + text — instead of its
   own pill/dashed-box design. Explicit height (matching .fin-split-amount's
   own explicit height exactly, not just matching padding/font-size) so the
   two fields render at the same height side by side regardless of
   <button> vs <input> line-height differences or whether an icon is shown. */
.fin-bucket-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  width: 100%;
  height: var(--field-h);
  padding: 0 var(--space-2);
  border: none;
  border-bottom: var(--bw-strong) solid var(--line-strong);
  border-radius: 0;
  background: none;
  color: var(--ink-dim);
  font-size: var(--fs-l);
  cursor: pointer;
  text-align: left;
}

.fin-bucket-trigger:hover,
.fin-bucket-trigger:focus {
  outline: none;
  border-bottom-color: var(--brass);
  color: var(--ink);
}

.fin-bucket-trigger.chosen {
  color: var(--ink);
  font-weight: 600;
}

.fin-bucket-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--tag-color, var(--ink-dim));
}

.fin-bucket-trigger-icon:empty {
  display: none;
}

.fin-bucket-trigger-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.fin-bucket-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bucket-picker popover now uses the shared .searchable-popover* classes — see components.css. */

/* Bare "×" — box + hover come from the shared `.icon-btn-bare` group
   (components.css); only the corner position + the text-glyph size live here. */
.fin-split-remove {
  position: absolute;
  top: var(--space-10);
  right: var(--space-10);
  font-size: var(--fs-xl);
  line-height: 1;
}

/* Add-button and the "X € noch zu verteilen" summary share one row —
   action on the left, running total pinned right via the row's own
   space-between, instead of two separate full-width lines stacked on top
   of each other. */
.fin-split-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  margin-top: var(--space-4);
}

/* Look comes from the shared `.btn-text-action` group (components.css) —
   it also cancels the `.btn-ghost` box this element still carries in markup. */

.fin-split-summary {
  font-size: var(--fs-m);
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

.fin-split-summary.neutral {
  color: var(--muted);
}

.fin-split-summary.ok {
  color: var(--good);
}

.fin-split-summary.warn {
  color: var(--coral);
}

/* ---------- Finance: Transaktionen list header (title, then search+filters) ---------- */
.fin-tx-list-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Search + Konten + Filtern/Steuer/Kalender all share this one row,
   wrapping onto a second line only once the width actually runs out —
   rather than a fixed "search alone, filters always below" split. */
.fin-tx-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.fin-tx-search {
  flex: 1 1 var(--fin-tx-search-min);
  min-width: var(--fin-tx-search-min);
}

/* Underline only, no full border/box — matches the form fields' own
   .field-underline look instead of the standalone search field's default
   pill/box style used elsewhere in the app. */
.fin-tx-search .search-field-input {
  border: var(--bw) solid transparent;
  border-bottom: var(--bw-strong) solid var(--line-strong);
  border-radius: 0;
  background: none;
  /* clearance for the search icon (left: --space-4, --icon-md wide) */
  padding-left: calc(var(--space-4) + var(--icon-md) + var(--space-10));
}

.fin-tx-search .search-field-input:focus {
  border-bottom-color: var(--brass);
}

.fin-tx-search .search-field-icon {
  left: var(--space-4);
}

.fin-tx-account-filter {
  gap: var(--space-4);
}

/* Icon-only at every width (no name label) — a compact row of colored
   account tiles next to the other filter controls, not a labeled picker. */
.fin-tx-account-filter .tile-picker-item {
  flex-direction: row;
  min-width: 0;
  min-height: var(--control-h);
  padding: 0 var(--space-8);
}

.fin-tx-account-filter .tile-picker-item span {
  display: none;
}

.fin-tx-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 0 0 auto;
  white-space: nowrap;
  height: var(--control-h);
  padding: 0 var(--space-10);
  border-radius: var(--radius);
}

.fin-tx-filter-btn-icon {
  display: flex;
  align-items: center;
}

.fin-tx-filter-btn-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Active state shared app-wide — see components.css "SHARED HOVER STATES". */

.fin-tx-calendar-btn,
.fin-tx-tax-filter-btn {
  flex: 0 0 auto;
  width: var(--control-w);
  height: var(--control-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius);
  /* --ink-dim, not --ink — matches .fin-tx-filter-btn (.btn-ghost) right
     next to these two, so all three filter-row icons start at the same
     resting color (all three already match on hover/active, see "SHARED
     HOVER STATES" in components.css). */
  color: var(--ink-dim);
  cursor: pointer;
}

.fin-tx-calendar-btn svg,
.fin-tx-tax-filter-btn svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Hover/active state shared app-wide — see components.css "SHARED HOVER STATES". */

.fin-tx-calendar-popup {
  position: fixed;
  z-index: 60;
  width: var(--fin-tx-calendar-w);
  background: var(--panel);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-popover);
  padding: var(--space-12);
}

/* Month+year picker (no day grid — see buildCalendarPopover() in finance-transactions.js) */
.fin-tx-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.fin-tx-month-cell {
  padding: var(--space-10) var(--space-4);
  border-radius: var(--radius);
  border: var(--bw) solid transparent;
  background: var(--panel-alt);
  color: var(--ink-dim);
  font-size: var(--fs-m);
  text-transform: capitalize;
  cursor: pointer;
}

/* Hover state shared app-wide — see components.css "SHARED HOVER STATES". */

.fin-tx-month-cell.today {
  font-weight: 700;
  color: var(--ink);
}

.fin-tx-month-cell.active {
  background: var(--brass);
  color: var(--on-accent);
}

/* "Clear" row shown above the calendar for optional date fields (e.g. a
   bucket's Zieldatum) — see openDatePicker()'s emptyOption in date-picker.js. */
.mini-cal-empty-option {
  padding: var(--space-6) var(--space-10);
  margin-bottom: var(--space-6);
  border-radius: var(--radius);
  font-size: var(--fs-m);
  cursor: pointer;
}

.mini-cal-empty-option:hover,
.mini-cal-empty-option.active {
  background: var(--brass-soft);
}

.fin-tx-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.fin-tx-active-filters:empty {
  display: none;
}

.fin-tx-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-10);
  border-radius: var(--radius);
  background: var(--brass-soft);
  color: var(--brass);
  font-size: var(--fs-s);
  font-family: var(--font-mono);
}

.fin-tx-filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.fin-tx-filter-chip button svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.fin-tx-month-divider {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-10);
  font-size: var(--fs-l);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  padding: var(--space-16) var(--space-4) var(--space-8);
  border-bottom: var(--bw-accent) solid var(--brass);
  margin-bottom: var(--space-4);
}

/* Right side of the divider: Einnahmen/Ausgaben (each always shown, even at
   0,00€) plus a neutral "Saldo" net total — three figures instead of just
   the one net total, so a month's shape (a lot of both vs. barely any
   income) is visible before opening a single row. */
.fin-tx-month-stats {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}

.fin-tx-month-total {
  font-weight: 700;
  white-space: nowrap;
}

.fin-tx-month-total.positive {
  color: var(--good);
}

.fin-tx-month-total.negative {
  color: var(--coral);
}

/* Saldo net total — deliberately not .positive/.negative-colored like the
   Einnahmen/Ausgaben figures either side of it: it's a wrap-up, not a
   signed figure to react to, so it stays the divider's own neutral ink
   tone rather than inheriting the divider row's brass. */
.fin-tx-month-net {
  color: var(--ink);
  white-space: nowrap;
}

.fin-tx-month-net-label {
  color: var(--ink-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-right: var(--space-4);
}

/* Day-group header — a full-width button that collapses/expands the day's
   rows (js/pages/finance/finance-transactions.js buildTxDayGroup). */
.fin-tx-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-24) var(--space-4) var(--space-6);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-m);
  color: var(--ink-dim);
  text-transform: uppercase;
  text-align: left;
}

.fin-tx-day-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform var(--t-med) ease;
}

.fin-tx-day-chevron svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.fin-tx-day.is-collapsed .fin-tx-day-chevron {
  transform: rotate(-90deg);
}

.fin-tx-day.is-collapsed .fin-tx-day-body {
  display: none;
}

/* Flat list, not a card per transaction — only a bottom line separates
   rows, no per-row box/border. */
.fin-tx-group {
  border-bottom: var(--bw) solid var(--line);
}

.fin-tx-group:last-child {
  border-bottom: none;
}

.fin-tx-load-more {
  display: block;
  width: 100%;
  margin-top: var(--space-8);
  padding: var(--space-10);
  background: none;
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-size: var(--fs-m);
  cursor: pointer;
  text-align: center;
}

/* Hover state shared app-wide — see components.css "SHARED HOVER STATES". */

.fin-tx-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
}

/* Circular avatar within the Transaktionen list specifically — other lists
   reusing .fin-list-row-icon (Verwaltung, Übersicht) keep their rounded-square look. */
.fin-tx-row .fin-list-row-icon {
  border-radius: var(--radius);
}

/* Only the avatar and the name/accounts open the edit modal — they get the
   pointer + a subtle hover cue; the rest of the row is inert. */
.fin-tx-row-edit {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

b.fin-tx-row-edit:hover,
.fin-tx-transfer-accounts.fin-tx-row-edit:hover {
  color: var(--brass);
}

.fin-list-row-icon.fin-tx-row-edit:hover {
  filter: brightness(1.08);
}

/* Edit/Löschen: icon-only, no button outline — the flat-list row (no card
   border of its own, see .fin-tx-group) reads cleaner without every action
   button adding its own box around it. */
.fin-tx-row .fin-row-btn {
  border: none;
}

/* Left border marks this block as a sub-list of the row above it (its
   splits), same idea as an indented reply thread. margin-left (not just a
   bigger padding-left) is what actually moves the line itself in from the
   group's edge to sit under the avatar column instead of flush against it.
   The border stops short of the group's own bottom line on purpose — a
   short padding-bottom (where the border still runs) plus an unbordered
   margin-bottom below it, instead of one border spanning the full height,
   so the two lines read as distinct, not as one continuous frame. */
.fin-tx-splits-detail {
  margin-left: var(--fin-tx-avatar-col);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-16) var(--space-4) var(--space-16);
  border-left: var(--bw-accent) solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fin-tx-split-line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-s);
  color: var(--ink-dim);
}

/* Both Transaktionen tag contexts (the single row-title tag and these
   multi-split lines) drop .fin-tag's border for a flatter, denser look —
   the "- " prefix baked into the label (see coloredTag() call sites in
   finance-transactions.js) carries the "this is a tag" cue instead. */
.fin-tx-row-title .fin-tag,
.fin-tx-split-line .fin-tag {
  border: none;
}

.fin-tx-split-note {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-tx-split-amount {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  text-align: right;
}

.fin-tx-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fin-tx-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.fin-tx-row-title b {
  max-width: var(--fin-tx-title-cap);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Steuer marker: icon only, no .fin-tag bubble/label — the tooltip carries
   the "Für die Steuer relevant" text instead. Muted/gray, not accent-brass
   — it's a small metadata flag, not something that should compete visually
   with the actual category tag next to it. */
.fin-tx-tax-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--muted);
}

.fin-tx-tax-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Umbuchung: both accounts shown with their own icon + color, name and
   all — a transfer has no payee, so this takes the row title's slot
   instead. Wrapped as one flex row so "From → To" always stays together,
   even where .fin-tx-row-title itself stacks its children vertically
   (mobile). */
.fin-tx-transfer-accounts {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.fin-tx-transfer-account {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-l);
  font-weight: 600;
  color: var(--acc-color, var(--ink));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fin-tx-transfer-account svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

.fin-tx-transfer-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
}

.fin-tx-transfer-arrow svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.fin-tx-note {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--fin-tx-note-cap);
  font-size: var(--fs-m);
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Amount + the account's icon (no name) as one unit trailing it — wrapped
   together so both can be repositioned as a pair on mobile (see the grid
   layout below) instead of being two independent flex children. */
.fin-tx-amount-account-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.fin-tx-account-icon {
  display: flex;
  align-items: center;
  color: var(--acc-color, var(--muted));
}

.fin-tx-account-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.fin-tx-receipt {
  flex: 0 0 auto;
  display: flex;
  color: var(--ink-dim);
}

.fin-tx-receipt svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.fin-tx-receipt:hover {
  color: var(--brass);
}

.fin-tx-amount {
  flex: 0 0 var(--fin-tx-amount-col);
  text-align: right;
  font-weight: 600;
  font-family: var(--font-mono);
}

.fin-tx-amount.expense {
  color: var(--coral);
}

.fin-tx-amount.income {
  color: var(--good);
}

.fin-tx-amount.transfer {
  color: var(--muted);
}

/* ---------- Finance: Transaktionen page — mobile ---------- */
/* Same breakpoint the rest of the app switches to a phone layout at
   (dashboard week grid, sidebar icon rail) — the list header already drops
   its sticky behaviour at the wider 960px breakpoint above; these are the
   additional narrow-viewport tweaks specific to this page's dense content
   (the Transaktion form is a modal, so it needs nothing here). */
@media (max-width: 720px) {

  /* Transaktionstyp (Ausgabe/Einnahme/Umbuchung): icon only, label hidden —
     the three tiles need less width to stay comfortably tappable. */
  #finTxTypePicker .segmented-item span {
    display: none;
  }

  /* Konto-Auswahl: smaller tiles than the desktop 76×80px (the small
     .tile-picker-sm variant used by the list's account filter is
     untouched — it's already compact). */
  .tile-picker-account:not(.tile-picker-sm) {
    min-width: 0;
    width: var(--fin-tx-acct-tile-mobile-w);
    height: var(--fin-tx-acct-tile-mobile-h);
    padding: var(--space-6) var(--space-4);
    gap: var(--space-4);
  }

  .tile-picker-account:not(.tile-picker-sm) svg {
    width: var(--icon-xl);
    height: var(--icon-xl);
  }

  .tile-picker-account:not(.tile-picker-sm) span {
    font-size: var(--fs-2xs);
  }

  /* Bucket (icon + potentially long name) and Anteil side by side get too
     cramped on a phone — stack them instead, full width each. */
  .fin-split-row-main {
    flex-direction: column;
    gap: var(--space-10);
  }

  .fin-split-field-bucket,
  .fin-split-field-amount {
    flex: none;
    width: 100%;
  }

  /* Two-line row instead of the desktop one-liner: Empfänger alone on its
     own line, then Bucket-Tag (left) and Betrag+Konto-Icon (right) on the
     line below — the Löschen button is dropped, no room for it on a phone
     (editing still works: tap the name or avatar, see renderTxList()).
     .fin-tx-row itself becomes the grid; .fin-tx-row-main and
     .fin-tx-row-title unwrap via display:contents so their children
     (title text, tag) become directly placeable grid items without the
     JS that builds them needing to know or care which breakpoint it's in
     — same markup serves the desktop flex layout above and this grid. */
  .fin-tx-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar title  title"
      "avatar tag    amount";
    align-items: center;
    column-gap: var(--space-8);
    row-gap: var(--space-4);
    padding: var(--space-10);
  }

  .fin-tx-row .fin-list-row-icon {
    grid-area: avatar;
    width: var(--fin-list-avatar-mobile);
    height: var(--fin-list-avatar-mobile);
  }

  .fin-tx-row-main,
  .fin-tx-row-title {
    display: contents;
  }

  .fin-tx-row-title b,
  .fin-tx-transfer-accounts {
    grid-area: title;
  }

  .fin-tx-row-title .fin-tag {
    grid-area: tag;
    justify-self: start;
    max-width: 100%;
  }

  .fin-tx-amount-account-wrap {
    grid-area: amount;
    justify-self: end;
  }

  .fin-tx-amount {
    font-size: var(--fs-m);
  }

  /* No grid-area of their own — an unassigned grid child would otherwise
     land in a stray implicit row/column and break the 2-row layout above.
     Scoped to .fin-tx-row so it doesn't also hide the edit/delete/drag
     controls on the Einstellungen > Finanzen admin lists (they share the
     .fin-list-row-actions class but stay a flex row on mobile). */
  .fin-tx-row .fin-list-row-actions,
  .fin-tx-receipt {
    display: none;
  }

  /* Re-aligns the left border under the smaller mobile avatar (avatar + gap;
     the row's own padding-left sits outside the margin). */
  .fin-tx-splits-detail {
    margin-left: calc(var(--fin-list-avatar-mobile) + var(--space-8));
    padding: 0 var(--space-10) var(--space-4) var(--space-10);
  }

  .fin-tx-list-header {
    gap: var(--space-6);
  }

  /* "Filtern" the text label doesn't fit next to Steuer/Kalender at this
     width — icon-only here (icon already shown on desktop too), full
     label+icon together only where there's room. */
  .fin-tx-filter-btn-label {
    display: none;
  }

  /* All 3 stats side by side (baseline-aligned, like desktop) don't fit a
     phone width without wrapping mid-figure — stack them instead, each its
     own right-aligned line under the month name. */
  .fin-tx-month-divider {
    align-items: flex-start;
  }

  .fin-tx-month-stats {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }

  /* The fixed --fin-tx-title-cap (see the base rule) would just overflow a
     narrow grid track — cap to the track's own width instead. */
  .fin-tx-row-title b {
    max-width: 100%;
  }

  .fin-tx-note,
  .fin-tx-tax-icon {
    display: none;
  }

  /* A transfer's "Von → Auf" pair is what was actually unreadable on
     mobile — two account names plus an arrow icon squeezed onto one line
     with no room to shrink. Let each account name flex/shrink and
     ellipsize independently instead of overflowing past the row. */
  .fin-tx-transfer-account {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  /* Same declutter as the row-level Notiz above — dropped on mobile rather
     than fighting the compact Kategorie-Tag + Betrag pair for space. */
  .fin-tx-split-note {
    display: none;
  }
}

/* Übersicht-Regeln nach finance-overview.css ausgezogen; die geteilte
   Fortschrittsbalken-Klasse .fin-btbl-goal-bar(-wrap) nach finance-shared.css.
   .fin-status-ok / .fin-status-open ersatzlos entfernt (toter Code). */