/* View: Finanse (js/views/finance.js).
   Phone: page head → segmented Salda / Wpłaty / Księgowość → one column per tab.
   Desktop: two columns, figures table + balances | chart + recent payments. No avatars in money rows. */
@layer views {
.fin-tabs { margin: 0 0 4px; }
.fin-acc-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.fin-acc-bar .muted { font-size: var(--fs-caption); }
.fin-acc-bar .btn { flex: none; margin-left: auto; min-height: 44px; }
.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.fin-col { min-width: 0; display: flex; flex-direction: column; }
.fin-col > .card > .empty { flex: 1; }
.fin-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---- balances: name + subject | amount over actions ---- */
.fin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0 10px 12px; border-top: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--hue); }
.fin-list > .fin-row:first-child { border-top: 0; }
.fin-name {
  grid-column: 1; grid-row: 1; display: block; min-height: 44px; line-height: 44px; margin: -11px 0;
  font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-sub { grid-column: 1; grid-row: 2; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-amt { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--fs-lead); }
.fin-acts { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.fin-acts .btn-icon { color: var(--ink-2); }
.fin-extra { display: none; }

/* ---- recent payments: name + date | amount ---- */
.fin-pay { min-height: 56px; color: var(--ink-2); }
.fin-pay > .amt { flex: none; }

/* ---- chart (barChart variant "ink", css/components/figures.css) + its foot ---- */
.chart-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; padding: 12px 14px;
  background: var(--paper-2); border-radius: var(--r-group); border-top: 0;
}
.chart-foot > span { min-width: 0; gap: 4px; justify-content: space-between; }
.chart-foot b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.chart-foot b .amt { white-space: nowrap; }

@media (max-width: 760px) {
  .page-fin .page-sub { display: none; }
  .fin-tabs button { min-height: 44px; }
  .fin-cols[data-tab="balances"] .fin-col-b, .fin-cols[data-tab="payments"] .fin-col-a,
  .fin-cols[data-tab="accounting"] { display: none; }
  .fin-acts .btn-sm { min-height: 44px; }
  .page-fin .section-title .segmented button { min-height: 44px; }
}
@media (max-width: 380px) {
  .chart-foot { padding: 12px; gap: 8px; }
  .chart-foot .kicker { letter-spacing: .05em; }
}
@media (min-width: 761px) {
  .fin-tabs, .fin-acc { display: none; }
  /* one column grid shared by all rows (subgrid) so amounts and facts line up */
  .fin-bal { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(0, max-content) minmax(0, max-content) auto; column-gap: 16px; align-content: start; }
  .fin-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .fin-amt { grid-column: 2; grid-row: 1 / span 2; }
  .fin-extra { display: block; grid-row: 1 / span 2; min-width: 0; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fin-amt + .fin-extra { grid-column: 3; }
  .fin-extra + .fin-extra { grid-column: 4; }
  .fin-acts { grid-column: 5; grid-row: 1 / span 2; gap: 6px; }
}
@media (min-width: 1001px) {
  .fin-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
}
@media (min-width: 1440px) {
  .fin-cols { column-gap: 48px; }
}
@media (min-width: 761px) and (max-width: 1199px) { .fin-extra + .fin-extra { display: none; } }
@media (hover: hover) { .fin-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
}