/* Väljamaksed ja mõõdikud (#/tooglaud/rahad) — toimetuslik finantsülevaade.
   Ainult disainisüsteemi tokenid: värvi-literaale ega varje siin ei ole. Diagrammi mõõdud tulevad CSS-muutujast --w.
   Andmeviisi reeglid: õhukesed märgid, 4 px ümarad otsad, 2 px pinnavahe segmentide vahel, tekst teksti-tokenites,
   kaks seeriat = legend + otsesildid; kohtspikker (data-tip) igal tulbal/segmendil hoveril ja fookusel. */
.cash.section { padding-block: var(--space-5) var(--space-8); }
.cash [hidden] { display: none !important; }

/* ---------- Päis ---------- */
.cash-header { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
.cash-header .eyebrow { margin: var(--space-3) 0 0; }
.cash-header h1 { margin: 0; font-size: var(--fs-display-2); }
.cash-header__note { margin: var(--space-1) 0 0; max-width: var(--measure); }
.cash-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.cash-crumbs a { color: var(--color-text-soft); }
.cash-flash, .cash [data-cash-error] { margin-bottom: var(--space-5); }

/* ---------- Kohtspikker (hover + klaviatuurifookus) ---------- */
.cash [data-tip] { position: relative; }
.cash [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: var(--z-popover);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; white-space: nowrap;
  color: var(--color-surface); background: var(--color-text);
  border-radius: var(--radius-xs);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cash [data-tip]:hover::after, .cash [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.cash [data-tip]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Hero: suur summa + rahavoog + kolm näitajat ---------- */
.cash-hero {
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
  padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.cash-hero__main { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.cash-hero__label { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-muted); }
.cash-hero__total { margin: 0; font-family: var(--font-editorial); font-synthesis: none; font-weight: 400; font-size: clamp(3rem, 2rem + 4vw, 5.25rem); line-height: 1; letter-spacing: -0.015em; color: var(--color-text); white-space: nowrap; }
.cash-hero__sub { margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--color-text-soft); }
.cash-hero__side { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-content: start; }

.cash-stat { display: grid; gap: 2px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cash-stat > p { margin: 0; }
.cash-stat__label { font-size: var(--fs-sm); color: var(--color-text-soft); }
.cash-stat__value { font-family: var(--font-editorial); font-synthesis: none; font-weight: 400; font-size: var(--fs-display-2); line-height: 1.05; white-space: nowrap; color: var(--color-text); }
.cash-stat__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.cash-stat--accent { border-color: var(--color-primary); background: var(--color-primary-soft); }
.cash-stat--accent .cash-stat__label { color: var(--color-primary-active); font-weight: var(--fw-medium); }

@media (min-width: 1000px) {
  .cash-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-7); padding: var(--space-6); }
  .cash-hero__side { grid-template-columns: minmax(0, 1fr); }
}

/* Rahavoog: 100 % tulp, kaks seeriat (klient = salvei, komisjon = neutraalne), 2 px vahe, 4 px ümarad otsad */
.cash-flow { margin: 0; display: grid; gap: var(--space-3); }
.cash-flow__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.cash-flow__bar { display: flex; gap: 2px; height: 14px; }
.cash-flow__seg { flex: 0 0 auto; width: var(--w, 0%); min-width: 4px; border-radius: 4px; transform-origin: left center; cursor: default; }
.cash-flow__seg--client, .cash-flow__key--client { background: var(--color-primary); }
.cash-flow__seg--commission, .cash-flow__key--commission { background: var(--color-border-input); }
.cash-flow__seg--empty { background: var(--color-bg-alt); }
.cash-flow__seg:hover { filter: brightness(0.92); }
.cash-flow__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.cash-flow__legend li { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: var(--space-2); align-items: center; }
.cash-flow__key { width: 10px; height: 10px; border-radius: 3px; grid-row: span 2; align-self: start; margin-top: 5px; }
.cash-flow__name { color: var(--color-text-soft); }
.cash-flow__val { grid-column: 2; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); }
.cash-flow__pct { grid-column: 2; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- Sektsioonid ---------- */
.cash-section { margin-top: var(--space-7); min-width: 0; }
.cash-section__head { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-strong); }
.cash-section__kicker { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-primary-active); }
.cash-section__head h2 { margin: 0; font-size: var(--fs-display-2); display: flex; align-items: center; gap: var(--space-3); }
.cash-section__head p { margin: 0; max-width: var(--measure); }
.cash-count { min-width: 1.75rem; padding: 2px 8px; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-primary-active); background: var(--color-primary-soft); border-radius: var(--radius-pill); }

/* ---------- Väljamaksed: kaardid avatariga ---------- */
.cash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cash-group { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease); }
.cash-group:hover { border-color: var(--color-border-input); border-left-color: var(--color-primary); }
.cash-group__head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.cash-group__who { flex: 1 1 180px; min-width: 0; }
.cash-group__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0; }
.cash-group__head p { margin: 0; }
.cash-group__sum { display: grid; text-align: right; }
.cash-group__amount { font-family: var(--font-editorial); font-synthesis: none; font-weight: 400; font-size: var(--fs-3xl); line-height: 1.05; color: var(--color-text); }
.cash-group__fee { font-size: var(--fs-xs); color: var(--color-text-muted); }
.cash-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--color-primary-active); background: var(--color-primary-soft); border: 1px solid var(--color-primary-soft-2); }
.cash-avatar--sm { width: 26px; height: 26px; font-size: 0.6875rem; }
.cash-who { display: inline-flex; align-items: center; gap: var(--space-2); }
.cash-paid { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--fw-semibold); }
.cash-paid::before { content: "✓"; color: var(--color-primary); font-weight: var(--fw-semibold); }
.cash-details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-soft); padding: var(--space-1) 0; }
.cash-details[open] > summary { margin-bottom: var(--space-2); }
.cash .table caption { font-size: var(--fs-sm); }
.cash .table th[scope="row"] { font-weight: var(--fw-medium); }
.cash .table td.num, .cash .table th.num, .cash .table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-table .table td { white-space: nowrap; }
.cash-table .table td.small { white-space: normal; min-width: calc(10ch + 2 * var(--space-4)); }

/* ---------- Mõõdikurühmad ---------- */
.cash-groups { display: grid; gap: var(--space-4); }
.cash-metric-group { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cash-metric-group__title { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-family: var(--font-editorial); font-synthesis: none; font-weight: 400; font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.cash-metric-group__no { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); color: var(--color-primary-active); }
.cash .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-3); }
.cash-kpi { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.cash-kpi .kpi__label { font-size: var(--fs-sm); color: var(--color-text-soft); }
.cash-kpi .kpi__value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 1.1; }
.cash-kpi__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.cash-kpi--na { background: transparent; border-style: dashed; }
.cash-kpi--na .kpi__value { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.cash-kpi--negative .kpi__value { color: var(--color-danger); }
.cash-meter { display: block; height: 6px; border-radius: 4px; background: var(--color-bg-alt); overflow: hidden; }
.cash-meter > span { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; background: var(--color-primary); transform-origin: left center; }

/* ---------- Tulpdiagramm (üks seeria) ---------- */
.cash-chart { margin: 0; padding: var(--space-4); background: var(--color-surface-muted); border-radius: var(--radius-md); min-width: 0; }
.cash-chart__title { display: grid; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-soft); margin-bottom: var(--space-3); }
.cash-chart__note { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.cash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cash-bars__row { display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr) minmax(2.5rem, max-content); gap: var(--space-3); align-items: center; padding: var(--space-1) var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-sm); font-size: var(--fs-sm); transition: background-color var(--dur-fast) var(--ease); }
.cash-bars__row:hover { background: var(--color-bg-alt); }
.cash-bars__label { color: var(--color-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-bars__track { height: 10px; }
.cash-bars__bar { display: block; height: 100%; width: var(--w, 0%); min-width: 4px; border-radius: 4px; background: var(--color-primary); transform-origin: left center; }
.cash-bars__bar.is-zero { min-width: 2px; background: var(--color-border-strong); }
.cash-chart--muted .cash-bars__bar { background: var(--color-border-input); }
.cash-bars__value { text-align: right; color: var(--color-text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Finantsmudel ---------- */
.cash-model { display: grid; gap: var(--space-4); }
.cash-model .cash-section__head { margin-bottom: 0; }
.cash-model__charts { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cash-model__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.cash-model__foot { margin: 0; max-width: var(--measure); }
.cash-model .table thead th { white-space: normal; vertical-align: bottom; }

/* Veerudiagramm: üks seeria, väärtus tulba kohal, nullist alates, x-sildid joone all */
.cash-cols-chart { margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cash-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cash-cols__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); border-radius: var(--radius-sm); cursor: default; }
.cash-cols__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; }
.cash-cols__track { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-1); width: 100%; height: 200px; border-bottom: 1px solid var(--color-border-strong); }
.cash-cols__bar { display: block; flex: 0 0 auto; width: min(64px, 70%); height: calc(var(--w, 0%) * 0.82); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--color-primary); transform-origin: bottom center; }
.cash-cols-chart--muted .cash-cols__bar { background: var(--color-border-input); }
.cash-cols__item:hover .cash-cols__bar { filter: brightness(0.92); }
.cash-cols__label { padding-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Demoandmed ---------- */
.cash-reset { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); }
.cash-reset h2 { font-size: var(--fs-md); margin: 0; }
.cash-reset p { margin: 0; }

/* ---------- Liikumine (ainult .has-motion: app.js lisab selle, kui vähendatud liikumist ei eelistata) ---------- */
.has-motion .cash-flow__seg, .has-motion .cash-meter > span, .has-motion .cash-bars__bar { transform: scaleX(0); transition: transform 900ms var(--ease) 150ms; }
.has-motion .cash-cols__bar { transform: scaleY(0); transition: transform 900ms var(--ease) 150ms; }
.has-motion .is-visible .cash-flow__seg, .has-motion .is-visible .cash-meter > span, .has-motion .is-visible .cash-bars__bar,
.has-motion .is-visible.cash-cols-chart .cash-cols__bar { transform: none; }
.has-motion .cash-flow__seg + .cash-flow__seg { transition-delay: 350ms; }
.has-motion .cash-bars__row:nth-child(2) .cash-bars__bar, .has-motion .cash-cols__item:nth-child(2) .cash-cols__bar { transition-delay: 230ms; }
.has-motion .cash-bars__row:nth-child(3) .cash-bars__bar, .has-motion .cash-cols__item:nth-child(3) .cash-cols__bar { transition-delay: 310ms; }
.has-motion .cash-bars__row:nth-child(4) .cash-bars__bar { transition-delay: 390ms; }
.has-motion .cash-bars__row:nth-child(5) .cash-bars__bar { transition-delay: 470ms; }
.has-motion .cash-bars__row:nth-child(6) .cash-bars__bar { transition-delay: 550ms; }
.has-motion .cash-bars__row:nth-child(7) .cash-bars__bar { transition-delay: 630ms; }
.has-motion .cash-bars__row:nth-child(8) .cash-bars__bar { transition-delay: 710ms; }
.has-motion .cash-hero__side .cash-stat:nth-child(2) { transition-delay: 90ms; }
.has-motion .cash-hero__side .cash-stat:nth-child(3) { transition-delay: 180ms; }

/* ---------- Mobiil ---------- */
@media (max-width: 599px) {
  .cash-hero { padding: var(--space-4); }
  .cash-hero__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-hero__side .cash-stat:first-child { grid-column: 1 / -1; }
  .cash-stat { padding: var(--space-3); }
  .cash-stat__value { font-size: var(--fs-3xl); }
  .cash-flow__legend { gap: var(--space-2) var(--space-5); }
  .cash-metric-group { padding: var(--space-4); }
  .cash .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cash-group { padding: var(--space-3) var(--space-4); }
  .cash-group__sum { text-align: left; }
  .cash-group__head .btn { width: 100%; }
  .cash .table th, .cash .table td { padding: var(--space-2) var(--space-3); }
  .cash-bars__row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) max-content; gap: var(--space-2); }
  .cash-cols { gap: var(--space-2); }
  .cash-cols__track { height: 160px; }
  .cash-cols__value { font-size: var(--fs-xs); }
  .cash [data-tip]::after { white-space: normal; width: max-content; max-width: 220px; }
}

/* ---------- Glamuur ja sügavus ---------- */
.cash-stat, .cash-group, .cash-metric-group, .cash-cols-chart { box-shadow: var(--shadow-card); }

/* ---------- Desktopi tihedus: tegevus ja ajalugu kõrvuti, mõõdikugrupid kahes veerus ---------- */
@media (min-width: 1200px) {
  .cash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
  .cash > * { grid-column: 1 / -1; }
  .cash > .cash-section[aria-labelledby="cash-h-pending"] { grid-column: 1; }
  .cash > .cash-section[aria-labelledby="cash-h-history"] { grid-column: 2; }
  .cash-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .cash-groups > .cash-metric-group:last-child { grid-column: 1 / -1; }
}