/* Kafle strony kasa: skalowanie zawartości do rozmiaru i kształtu kafla (kontenerowe jednostki cq*, flex/grid wypełniający kafel).
   Układ: kafel (.tile-b) jest kontenerem rozmiaru; skala czcionki idzie z cqw/cqh, a nie z powiększania przez tilefit.js (tu zoom ≤ 1 —
   silnik zostaje tylko do zmniejszania i „+N więcej” dla list). Telefon/tablet: kafle płyną w naturalnej wysokości, więc reguły zależne od
   wysokości są w bloku „desktop”. */

/* ---------- wspólne (także telefon) ---------- */
[data-tile="wplywycel"] .kc { display: flex; flex-direction: column; gap: 6px; }
[data-tile="wplywycel"] .kc-plot { position: relative; height: 150px; margin-top: 16px; }
[data-tile="wplywycel"] .kc-cols,
[data-tile="wplywycel"] .kc-ax { display: grid; grid-template-columns: repeat(var(--kn, 12), minmax(0, 1fr)); gap: 3px; }
[data-tile="wplywycel"] .kc-cols { position: absolute; inset: 0; }
[data-tile="wplywycel"] .kc-col { position: relative; }
[data-tile="wplywycel"] .kc-col i { position: absolute; left: 0; right: 0; border-radius: 3px; min-height: 2px; }
[data-tile="wplywycel"] .kc-col.pos i { background: var(--green); opacity: .75; }
[data-tile="wplywycel"] .kc-col.neg i { background: var(--red); opacity: .9; }
[data-tile="wplywycel"] .kc-col.now i { opacity: 1; }
[data-tile="wplywycel"] .kc-zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--muted); opacity: .7; pointer-events: none; }
[data-tile="wplywycel"] .kc-zero span { position: absolute; left: 0; bottom: 2px; font: 10px var(--mono); color: var(--muted); }
[data-tile="wplywycel"] .kc-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; flex: none; }
[data-tile="wplywycel"] .kc-seg button { padding: .3em .8em; font-size: 12px; }
[data-tile="wplywycel"] .kc-goal { position: absolute; left: 0; right: 0; border-top: 1.2px dashed var(--red); pointer-events: none; }
[data-tile="wplywycel"] .kc-goal span { position: absolute; right: 0; bottom: 2px; font: 10px var(--mono); color: var(--muted); white-space: nowrap; }
[data-tile="wplywycel"] .kc-ax span { font: 10px var(--mono); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
[data-tile="wplywycel"] .kc-ax em { font-style: normal; }
:is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar .bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
:is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar .bar i { display: block; height: 100%; border-radius: inherit; }
:is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- desktop ---------- */
:root:not(.is-phone):not(.is-tablet) {
  /* skala czcionki z rozmiaru kafla; zoom silnika tylko zmniejsza (nigdy nie powiększa); ogon list chowa się jako „+N więcej” */
  :is([data-tile="kpi"], [data-tile="wplywycel"], [data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"], [data-tile="wgklienta"], [data-tile="wgkategorii"]) .tile-b > * { zoom: min(var(--tf-z, 1), 1); }
  :is([data-tile="kpi"], [data-tile="wplywycel"]) .mc { font-size: clamp(12px, min(2.8cqw, 4.4cqh), 22px); }
  /* treść listowa (.kasa-fit, --rows = liczba wierszy): czcionka rośnie, gdy pozycji mało, i maleje, gdy dużo; wiersze rozciągają się na resztę */
  .kasa-fit { flex: 1 1 auto; display: flex; flex-direction: column; font-size: clamp(12px, min(3.6cqw, calc(100cqh / (var(--rows, 6) * var(--rh, 3.2) + 3))), 26px); }
  [data-tile="dozaplaty"] .kasa-fit { --rh: 4.6; }
  :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .kasa-fit { --rh: 3.4; font-size: clamp(12px, min(5.5cqw, calc(100cqh / (var(--rows, 6) * var(--rh) + 1))), 26px); }
  :is([data-tile="kpi"], [data-tile="wplywycel"], [data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"], [data-tile="wgklienta"], [data-tile="wgkategorii"]) .mc-body { display: flex; flex-direction: column; min-height: 0; }

  /* --- kpi: siatka liczników wypełniająca kafel (4 w rzędzie / 2×2 / 1 kolumna zależnie od proporcji) --- */
  [data-tile="kpi"] .mc-body { padding-top: 12px; }
  [data-tile="kpi"] .kasa-kpis { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
  [data-tile="kpi"] .kasa-kpis > div { container: kcell / size; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .2em; padding: 3cqh 2px; min-width: 0; text-align: left; border: 0; }   /* bez ramek i pionowych kresek (app.css daje border-left); liczba i podpis do lewej */
  [data-tile="kpi"] .kasa-kpis .mono { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, min(7.5cqw, 14cqh), 14px); letter-spacing: .06em; }
  [data-tile="kpi"] .kasa-kpis b { white-space: nowrap; line-height: 1.05; font-size: clamp(14px, min(calc(88cqw / (var(--n, 6) * .62)), 48cqh), 72px); }
  [data-tile="kpi"] .kasa-kpis small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; font-size: clamp(9px, min(6.5cqw, 11cqh), 14px); }
  @container kcell (max-height: 124px) { [data-tile="kpi"] .kasa-kpis small { -webkit-line-clamp: 1; } }
  @container kcell (max-height: 76px) { [data-tile="kpi"] .kasa-kpis small { display: none; } }
  @container (min-aspect-ratio: 4/1) { [data-tile="kpi"] .kasa-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @container (max-aspect-ratio: 17/20) { [data-tile="kpi"] .kasa-kpis { grid-template-columns: minmax(0, 1fr); } }

  /* --- wpływy vs cel: wykres wypełnia kafel, komentarz pod spodem --- */
  [data-tile="wplywycel"] .mc-body { gap: .6em; }
  [data-tile="wplywycel"] .kc { flex: 1 1 0; min-height: 44px; gap: .35em; }
  [data-tile="wplywycel"] .kc-plot { flex: 1; height: auto; min-height: 0; margin-top: 1.2em; }
  [data-tile="wplywycel"] .kc-cols, [data-tile="wplywycel"] .kc-ax { gap: clamp(2px, .8cqw, 10px); }
  [data-tile="wplywycel"] .kc-goal span, [data-tile="wplywycel"] .kc-ax span { font-size: clamp(8px, .66em, 12px); }
  @container (max-width: 560px) { [data-tile="wplywycel"] .kc-ax em { display: none; } }

  /* --- listy (księga, wpływy, wydatki, koszty stałe, do zapłaty, wg klienta/kategorii): wiersze rozciągają się na wolne miejsce --- */
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"]) .list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-height: none; overflow: visible; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"]) .list .item { flex: 1 1 auto; max-height: 5.2em; min-width: 0; padding: .35em .3em; gap: .7em; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"]) .item .who { flex: 1 1 0; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"]) .item .who :is(b, small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"]) .item .who small { font-size: .8em; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"]) .item > .mono { font-size: .75em; flex: none; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"]) .item > b { white-space: nowrap; flex: none; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"]) .row-del { width: 1.7em; height: 1.7em; font-size: 1.3em; margin-left: -.3em; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"], [data-tile="dozaplaty"], [data-tile="wgklienta"], [data-tile="wgkategorii"]) .empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; padding: .5em; font-size: 1.15em; line-height: 1.35; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"]) .kasa-foot { flex: none; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: .6em; margin: .3em 0 0; padding-top: .5em; border-top: 1px solid var(--line); }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"], [data-tile="stale"]) .kasa-foot .btn { font-size: .9em; padding: .3em .8em; white-space: nowrap; }
  :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"]) .kasa-note { flex: none; font-size: .75em; }
  :is([data-tile="stale"], [data-tile="dozaplaty"]) .item .btn.sm { font-size: .85em; padding: .3em .7em; flex: none; white-space: nowrap; }
  [data-tile="stale"] .kasa-off { flex: none; margin-top: .4em; }

  /* koszty stałe: przełącznik w rozmiarze systemowym z app.css (51×31, nie skaluje się z kaflem); skaluje się tekst */
  [data-tile="stale"] .item label { display: inline-flex; align-items: center; gap: .4em; flex: none; font-size: .75em; }
  [data-tile="stale"] .item .amt { white-space: nowrap; flex: none; font-size: .95em; }
  [data-tile="stale"] .item .amt small { font-size: .8em; }
  @container (max-width: 440px) {
    [data-tile="stale"] .sub-lbl { display: none; }
    [data-tile="stale"] .item .btn.sm[data-sub-edit] { font-size: 0; width: 1.9em; height: 1.9em; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
    [data-tile="stale"] .item .btn.sm[data-sub-edit]::before { content: "✎"; font-size: 14px; }
  }
  @container (max-width: 400px) {
    :is([data-tile="ksiega"], [data-tile="wplywy"], [data-tile="wydatki"]) .list .item { gap: .5em; }
  }
  [data-tile="dozaplaty"] .list .item { max-height: 8em; }
  @container (max-width: 480px) {
    [data-tile="dozaplaty"] .list .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .25em; max-height: none; }
    [data-tile="dozaplaty"] .list .item .btn { grid-column: 1 / -1; }
  }

  /* wg klienta / wg kategorii: paski wypełniają kafel */
  :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbars { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .3em; }
  :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar { flex: 1 1 auto; max-height: 6em; min-height: 1.8em; font-size: 1em; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; gap: .8em; align-items: center; }
  :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar .bar { height: .7em; }
  :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar b { white-space: nowrap; }
  @container (max-width: 340px) {
    :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar { grid-template-columns: minmax(0, 1fr) auto; gap: .15em .8em; align-content: center; }
    :is([data-tile="wgklienta"], [data-tile="wgkategorii"]) .hbar .bar { grid-column: 1 / -1; grid-row: 2; }
  }
}

/* ---------- koszty stałe: czytelny tekst przy małej wysokości (lista przewijana, font od 14 px) i układ siatki na wąskim kaflu/telefonie ---------- */
:root:not(.is-phone):not(.is-tablet) [data-tile="stale"] .kasa-fit { font-size: clamp(14px, min(3.2cqw, 5.2cqh), 22px); }
:root:not(.is-phone):not(.is-tablet) [data-tile="stale"] .kasa-fit { min-height: 0; overflow-y: auto; }   /* przewija się treść kafla (lista + stopka), nie cały kafel */
:root:not(.is-phone):not(.is-tablet) [data-tile="stale"] .kasa-fit > .list { justify-content: flex-start; overflow: visible; min-height: auto; flex: 1 0 auto; }
:root:not(.is-phone):not(.is-tablet) [data-tile="stale"] .kasa-fit > .list .item { flex: 1 0 auto; min-height: 2.6em; }
[data-tile="stale"] .item .who { min-width: 6em; }
.is-phone [data-tile="stale"] .kasa-fit, .is-tablet [data-tile="stale"] .kasa-fit { font-size: 15px; }
.is-phone [data-tile="stale"] .list .item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "who who who del" "amt sw edit ."; align-items: center; gap: .35em .7em; padding: .6em .2em; max-height: none; }
.is-phone [data-tile="stale"] .item .who { grid-area: who; min-width: 0; }
.is-phone [data-tile="stale"] .item .amt { grid-area: amt; }
.is-phone [data-tile="stale"] .item > label { grid-area: sw; }
.is-phone [data-tile="stale"] .item > .btn[data-sub-edit] { grid-area: edit; }
.is-phone [data-tile="stale"] .item > .row-del { grid-area: del; opacity: 1; transform: none; }
.is-phone [data-tile="stale"] .sub-lbl { display: none; }

/* wykres Wpływy vs cel przy małej wysokości: komentarz Jamala znika, zostają przełączniki, słupki i oś */
@container (max-height: 170px) {
  :root:not(.is-phone):not(.is-tablet) [data-tile="wplywycel"] .kc-seg button { padding: .15em .6em; }
  :root:not(.is-phone):not(.is-tablet) [data-tile="wplywycel"] .kc-plot { margin-top: .4em; }
  :root:not(.is-phone):not(.is-tablet) [data-tile="wplywycel"] .kc { min-height: 24px; }
  :root:not(.is-phone):not(.is-tablet) [data-tile="wplywycel"] .mc-body { gap: .3em; }
}

/* oś wykresu na telefonie: tylko skrót miesiąca/dnia (rok się nie mieści) */
.is-phone [data-tile="wplywycel"] .kc-ax em { display: none; }
.is-phone [data-tile="wplywycel"] .kc-ax span { font-size: 9px; letter-spacing: -.02em; }