/* ============================================================================
   11-kalkulator.css — CAŁE okno „Kalkulator kosztów projektu"
   ----------------------------------------------------------------------------
   JEDNO okno = DWA kolejne arkusze (K20b, v14 — limit 800 linii): ten (§1–7: ramy — siatka czterech kolumn,
   nagłówek, wersje, zakres, kafle, przełączniki, edytor) i 11-kalkulator-wynik.css (§8–12: księga wyniku,
   pomoc, responsywność), ładowany zaraz po nim — kolejność reguł jak w jednym pliku.

   Dlaczego jeden: wcześniej okno było opisane w DWÓCH plikach (11 ramy + 20
   wnętrze). Ponieważ 20 ładował się później, każda poprawka wpisana do 11 była
   po cichu zbijana przez 20 — i wyglądało to jak „CSS nie działa". Klasy
   `project-cost-*` nie występują już nigdzie indziej; ten plik jest jedynym
   miejscem, w którym się je zmienia.

   Wartości przepisane z monolitu v8. UWAGA na kolejność w monolicie: reguły
   bazowe (l. 9600-10800) są w wielu miejscach nadpisane blokiem „premium"
   (l. 25800-26400) i to TEN blok decyduje o wyglądzie. Przy każdej regule,
   która się tak różni, stoi numer linii źródła.

   Układ okna (desktop ≥1281 px):
     1. .project-cost-step-column     — zakres: profil marż, konstrukcje
     2. .project-cost-category-panel  — kafle kategorii (Transport, Montaż…)
     3. .project-cost-editor-column   — edytor wybranej kategorii (warsztat)
     4. .project-costs-results        — księga wyniku
   ============================================================================ */
/* Trzy role tekstu w tym oknie i barwy stanu „wybrane" — dzięki nim reguły
   niżej nie powtarzają w kółko tych samych color-mix.
   Wartości 1:1 z --pc-font-* monolitu: etykieta 11, wartość 12,5, tytuł 13. */
.project-costs-modal { --pc-etykieta: var(--t-xs); --pc-wartosc: var(--t-control); --pc-naglowek: var(--t-base); --pc-wybrane: color-mix(in srgb, var(--accent) 10%, var(--surface)); --pc-wybrane-linia: color-mix(in srgb, var(--accent) 35%, var(--line)); --pc-pasek: color-mix(in srgb, var(--accent) 28%, var(--line)); }
/* === 1. RAMY OKNA =========================================================
   Okno kosztów jest NAJSZERSZE w aplikacji (monolit: min(1920px, 100%)).
   Bez tego zostaje domyślny 1120 px z 05-komponenty, a wtedy trzy kolumny
   stałe zjadają całą szerokość i środek — miejsce, w którym się PRACUJE —
   ściska się do zera. */
.modal.project-costs-modal { --okno-w: 1920px; line-height: 1.4; }   /* interlinia wzoru (.k-okno) */
/* Druga kolumna to `max-content`, nie sztywne piksele (monolit 25888): kafle
   kategorii biorą dokładnie tyle, ile potrzebują, a cała reszta zostaje dla
   warsztatu. Sztywne 260 px zabierało środkowi 80 px na każdym ekranie. */
/* NAPRAWA 11.08.2026 — trzy deklaracje w tej regule byly MARTWE.
   `.modal > form` (05-komponenty.css:72) ma specyficznosc (0,1,1), a samo
   `.project-costs-form` tylko (0,1,0) — arkusz 05 wygrywal i narzucal:
     padding 24 px zamiast 12  → 24 px szerokosci mniej dla kolumn
     gap 16 px zamiast 12      → kolejne 12 px mniej (trzy przerwy)
     overflow: auto zamiast hidden → cale okno przewijalo sie w poziomie
   Podbijamy selektor do `.modal.project-costs-modal > form.project-costs-form`
   (0,3,2). Ten sam wzorzec obejscia projekt juz stosuje w 19-modale-tresc.css:60
   i 18-prezentacje.css:16 — tu go po prostu zapomniano.
   Druga kolumna: `max-content` → `minmax(200px, 240px)`, zeby szerokosc kafli
   kategorii nie zalezala od najdluzszego podpisu (dzis „Dokumentacja i odbiory")
   i nie zabierala warsztatowi miejsca przy kazdym nowym, dluzszym tekscie.
   Tura 5 (ergonomia 26.09.2026): pierwsza kolumna „Zakres" clamp(380, 26vw, 470) → clamp(280, 20vw, 380).
   Na 1920 była w 70 % pusta (470 px na trzy zwinięte wiersze), a na 1366 edytor sekcji dostawał 334 px
   i Transport przewijał się w bok. Teraz 1366 → edytor 436 px, 1920 → +90 px dla edytora. Podpisy marż
   w tej kolumnie łamią się w dwie linie zamiast ucinać (reguła .project-cost-version-table-label). */
.modal.project-costs-modal > form.project-costs-form { display: grid; grid-template-columns: clamp(280px, 20vw / var(--skala-ui), 380px) minmax(200px, 240px) minmax(0, 1fr) clamp(310px, 18vw / var(--skala-ui), 360px); grid-template-rows: minmax(0, 1fr); gap: var(--s-3); align-items: stretch; height: 100%; overflow: hidden; padding: var(--s-3); background: var(--surface-2); }
.project-costs-form > * { min-width: 0; min-height: 0; }
/* Przewijają się TYLKO dwie kolumny; zakres ma własny scroll w środku. */
.project-cost-scope-panel { overflow: hidden; }
/* Kolumna kroku jest waska (320 px). Kontrolki maja wlasne minimalne szerokosci,
   wiec bez tego wychodza poza krawedz i napisy sie urywaja. */
.project-cost-scope-panel :is(input, select, button, label, .project-cost-client-price-inputs) { min-width: 0; max-width: 100%; }
.project-cost-scope-panel select { padding-right: var(--s-5); text-overflow: ellipsis; }
.project-cost-editor-column, .project-costs-results { overflow-y: auto; }
/* Kolumny są PRZEZROCZYSTYMI pojemnikami (monolit 10152 i 10179) — kartę
   z ramką i tłem robi dopiero `.form-panel` w środku. Malowanie samych kolumn
   dawało ramkę w ramce i zjadało 38 px szerokości w każdej z nich. */
/* Kolumna 1 ma TRZY części: narzędzia profilu, nagłówek, lista konstrukcji.
   Całą wolną wysokość musi dostać LISTA (trzeci wiersz) — przy dwóch wierszach
   brał ją nagłówek i, wyśrodkowany w pionie, wisiał w środku pustej kolumny. */
/* Kolumna kroku ma teraz PIĘĆ sekcji (redesign 12.08.2026): profil kosztów, wersja
   kalkulacji, cena dla klienta, nagłówek zakresu i lista konstrukcji. Cztery pierwsze
   biorą tyle, ile potrzebują; całą resztę wysokości (i przewijanie) dostaje lista. */
.project-cost-scope-panel { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
/* Tura 5: kafle kategorii przewijają się we własnej kolumnie. Przy 1440×900 ostatni kafel („Cena dla klienta"
   z przełącznikami prowizji i rabatu) był ucięty dolną krawędzią okna i nie dało się do niego dojść
   (kolumna 779 px treści w 672 px, formularz ma overflow: hidden). */
.project-cost-category-panel { min-width: 0; overflow-y: auto; }
/* Tytuł „Analiza handlowa" nad wynikiem — drobna etykieta wersalikami.
   Ujednolicenie 11.08.2026 — rozstrzelenie .05em → kanon .04em (w aplikacji
   krążyło .02/.03/.04/.05/.08; .04em ma 19 miejsc i to jest wartość dla roli
   „podpis wersalikami", niezależnie od widoku). */
.project-cost-analysis-title { margin: var(--s-3) 0 var(--s-2); color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-bold); }
/* Nagłówek warsztatu (np. „Produkcja / BOM") to PASEK sekcji, nie etykieta:
   tytuł 13/900, pod nim podpis, kwota z prawej (monolit 10366). Wcześniej
   dzielił regułę z etykietą wyżej i oba teksty robiły się drobne, wersalikowe. */
/* `cursor: default` ZDJĘTY 18.08.2026 (zgłoszenie właściciela: klikalne ma mieć
   rączkę). Ten nagłówek REAGUJE na klik — zwija i rozwija sekcję (natywne
   <details>, nic tego nie blokuje) — a jawny default przykrywał globalną zasadę
   `summary { cursor: pointer }` z 03-kontrolki.css. Przy starym wpisie nie było
   żadnego komentarza „dlaczego", więc to relikt, nie decyzja. */
.project-cost-editor-section > summary.project-cost-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 9px 10px; margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface-3); list-style: none; }
.project-cost-editor-head::-webkit-details-marker { display: none; }
.project-cost-editor-head > span { display: grid; gap: 2px; min-width: 0; }
.project-cost-editor-head strong, .project-cost-editor-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-cost-editor-head strong { font-size: var(--t-base); font-weight: var(--w-black); }
.project-cost-editor-head small { color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-heavy); }
.project-cost-editor-head b { white-space: nowrap; }
/* Stopka okna — grupy od lewej: zakres | profil marż | wersja + „Przelicz projekt”, rozpórka, „Zapisz” | „Generuj prezentację”
   (akcja główna w prawym dolnym rogu). Grupy mają własny flex; odstęp między grupami (--s-3) jest większy niż w grupie. */
/* W1: stopka okna kosztów jak każda stopka okna — tło okna i włosowa kreska (05-komponenty §3). */
.project-cost-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); row-gap: var(--s-2); min-height: 44px; padding: 7px 10px; border-top: 1px solid var(--kreska-wlos); background: var(--okno-tlo); }
/* Odstęp MIĘDZY grupami (--s-3) jest większy niż wewnątrz grupy (--s-2) — to on
   robi „grupy", nie kreski. Selektor musi być dwuklasowy: `.modal > footer`
   (05-komponenty.css:55) ma specyficzność (0,1,1) i bije `.project-cost-footer`
   (0,1,0), więc gap z reguły wyżej i tak nigdy nie dochodził do skutku (zmierzone:
   8 px z arkusza 05). Wygrywamy specyficznością (0,2,0), bez `!important`.
   Uwaga dla następnego: z tego samego powodu padding i tło stopki bierze arkusz 05. */
/* Tura 5: `justify-content: flex-start` — `.modal > footer` (05-komponenty) dosuwa wiersze do PRAWEJ; gdy stopka
   łamie się na dwa–trzy wiersze (1024–1440 px), pierwszy wiersz wisiał z prawej nad pustką. Teraz wiersze
   zaczynają się od lewej, a rozpórka i tak dosuwa „Zapisz” / „Generuj prezentację” do prawej krawędzi. */
.modal > .project-cost-footer { justify-content: flex-start; gap: var(--s-3); }
/* BŁĄD (W2, 27.09.2026, sędzia zrzutów): stopka łamała się w przypadkowym miejscu — na 1440 „Zapisz” odjeżdżał w lewo
   od „Generuj prezentację”, a kreska zostawała sama na końcu albo początku rzędu. Teraz łamie się tylko CAŁYMI grupami,
   w stałych miejscach zależnych od szerokości okna (kontener okno-kosztow, tylko komputer i tablet — telefon ma własną stopkę):
   ≥ 1700 jeden rząd · 1400–1699 [zakres | profil | wersja] / [Zapisz | Generuj] · 1120–1399 [zakres | profil] /
   [wersja … Zapisz | Generuj] · < 1120 trzy rzędy. W miejscu łamania kreska albo rozpórka staje się „końcem rzędu”
   (0 px wysokości, 100 % szerokości), więc kreska jest tylko między elementami w jednym rzędzie. Progi z pomiaru PL i EN. */
:root:not([data-ui="mobile"]) .modal.project-costs-modal { container: okno-kosztow / inline-size; }
@container okno-kosztow (width > 0px) {
  /* POPR2-x02: grupa prezentacji stoi PRZED „Zapisz” — to ona odpycha obie grupy do prawej, „Zapisz” przylega do niej. */
  .modal > .project-cost-footer > .project-cost-footer-group:has(.project-cost-presentation-button) { margin-left: auto; }
  .modal > .project-cost-footer > .project-cost-footer-group:has([data-project-cost-submit="save"]) { margin-left: 0; }
}
@container okno-kosztow (width < 1700px) { .modal > .project-cost-footer { row-gap: calc(var(--s-3) / 2); } }
@container okno-kosztow (1400px <= width < 1700px) { .modal > .project-cost-footer > .project-cost-footer-spacer { flex: 0 0 100%; height: 0; margin: 0; } }
@container okno-kosztow (width < 1400px) { .modal > .project-cost-footer > .project-cost-profile-tools + .project-cost-footer-sep { flex: 0 0 100%; height: 0; margin: 0; background: none; } }
@container okno-kosztow (width < 1120px) { .modal > .project-cost-footer > .project-cost-footer-spacer { flex: 0 0 100%; height: 0; margin: 0; } }
/* Ujednolicenie 11.08.2026 — gap 7px → --s-2, jak wszystkie paski akcji. */
.project-cost-footer-group { display: flex; align-items: center; gap: var(--s-2); }
/* Tura 5: grupa „Generuj prezentację” zawsze przy PRAWEJ krawędzi — także gdy stopka złamie się tak, że stoi
   sama w ostatnim wierszu (tablet 1024 px). Akcja główna ma stałe miejsce: prawy dolny róg. */
.project-cost-footer-group:has(.project-cost-presentation-button) { margin-left: auto; }
.project-cost-footer-scope { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-heavy); }
.project-cost-footer-spacer { flex: 1 1 auto; min-width: var(--s-2); }
.project-cost-footer-sep { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 2px var(--s-1); background: var(--line); }
/* Tura 5: wyszarzone „Generuj prezentację" mówi napisem, czemu jest wyszarzone (dymek na dotyku nie działa).
   Pomarańczowy = uwaga, nie błąd. */
.pcost-prezentacja-powod { color: var(--warn-strong); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pcost-prezentacja-powod[hidden] { display: none; }
/* PASEK CENY (tura 5, ergonomia) — między treścią okna a stopką, na każdym ekranie w tym samym miejscu:
   z prawej „Cena dla klienta" (największa liczba okna), obok „Zysk" z marżą; z lewej — tylko gdy są —
   pozycje bez ceny (jedyny czerwony element paska). Jeden wiersz; na wąskim ekranie łamie się całymi
   kwotami, nie w środku liczby. */
.project-cost-price-bar { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--s-1) var(--s-5); min-height: 40px; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); background: var(--surface); }
/* Napis o pozycjach bez ceny ustępuje miejsca kwotom: łamie się w swojej części paska, zamiast spychać kwoty
   do drugiego wiersza (tablet 1024 px). */
.pcost-pasek-bez-ceny, .pcost-pasek-minimum { flex: 1 1 160px; min-width: 0; margin-right: auto; color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* DECYZJA 2: dwa napisy obok siebie (bez ceny + poniżej minimum) — tylko pierwszy odpycha kwoty w prawo. */
.pcost-pasek-bez-ceny + .pcost-pasek-minimum { margin-right: 0; }
/* POPR-n22: ostrzeżenia paska ceny — komputer: w pasku jak dotąd; tablet i telefon: zwinięte do czerwonego „N uwag”. */
.pcost-pasek-uwagi { display: contents; }
.pcost-pasek-uwagi-przycisk { display: none; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .pcost-pasek-uwagi-przycisk { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--h-control); margin-right: auto; padding: 0 var(--s-3); border: 0; border-radius: var(--r); background: var(--danger-soft); color: var(--danger); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .project-cost-price-bar:not(.is-uwagi-otwarte) > .pcost-pasek-uwagi { display: none; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .project-cost-price-bar.is-uwagi-otwarte > .pcost-pasek-uwagi { display: flex; flex: 1 1 100%; flex-direction: column; gap: var(--s-1); order: -1; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .project-cost-price-bar.is-uwagi-otwarte > .pcost-pasek-uwagi > * { flex: 0 0 auto; margin: 0; }
:root[data-ui="mobile"] .pcost-pasek-uwagi-przycisk { flex: 1 1 100%; min-height: 36px; }   /* telefon: „N uwag” własnym rzędem, Zysk i Cena pod nim jak dotąd */
/* POPR-n22: tablet — stopka jak na telefonie: „Opcje”, „Zapisz” i „Generuj prezentację” w jednym rzędzie; zakres, profil marż,
   wersje i „Przelicz projekt” po stuknięciu „Opcje” (przycisk dokłada ui/aplikacja-mobilna.js). */
:root[data-ui="tablet"] #modal-root .modal > .project-cost-footer[data-mobilna-stopka]:not(.is-opcje-otwarte) > :not(.pcost-opcje-przelacznik):not(.project-cost-footer-group) { display: none; }
.pcost-pasek-kwota { display: inline-flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
.pcost-pasek-kwota > small { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-pasek-kwota > strong { color: var(--text); font-size: var(--t-md); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.pcost-pasek-kwota > em { color: var(--text-muted); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-medium); }
.pcost-pasek-zysk > strong { color: var(--zysk); }
.pcost-pasek-zysk.is-strata > strong { color: var(--danger); }
.pcost-pasek-cena > strong { font-size: var(--t-lg); }
/* „Rozbicie i VAT” — tylko do 1280 px (próg niżej), gdzie wyniki stoją pod edytorem, a nie w kolumnie obok. */
.pcost-pasek-szczegoly { display: none; align-self: center; }
/* === 2. NAGŁÓWEK OKNA =====================================================
   Pasek projektu jak w kartotece Projekty: numer i nazwa z lewej, sumy z prawej. */
.project-cost-head-bar { flex-wrap: nowrap; gap: var(--s-5); padding: var(--s-2) var(--s-4); }
/* v15 b19 (ZN4, wzór .k-gl): nagłówek 56 px z kreską, numer w akcencie 28 px, nazwa tytułowym krojem 16 px, wersja jako znaczek 26 px,
   przyciski-ikony z promieniem 8. Selektor z .modal — ogólny nagłówek okna (05-komponenty) ma większy odstęp i pismo. */
.modal.project-costs-modal > header.project-cost-head-bar { gap: var(--s-2); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.modal.project-costs-modal > header.project-cost-head-bar h2.pcost-head-name { font-family: var(--font-tytul); font-size: var(--t-md); line-height: 1.2; }
.modal.project-costs-modal > header.project-cost-head-bar :is(.icon-button, .modal-help-btn) { border-radius: var(--r-sm); }
.modal.project-costs-modal > header.project-cost-head-bar .icon-button > .icon { width: 18px; height: 18px; }   /* wzór: „×” wyraźny, ok. 13 px rysunku */
.modal.project-costs-modal > header.project-cost-head-bar .modal-help-btn { color: var(--text-muted); font-size: var(--t-md); }   /* wzór: ikona pomocy ciemna, 16 px */
.pcost-head-identity { display: flex; flex: 0 1 auto; align-items: center; gap: var(--s-2); min-width: 0; }
.pcost-head-number { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-strong); white-space: nowrap; }
.pcost-head-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
/* 34ch: długa nazwa ma się uciąć, a nie zepchnąć sum poza ekran.
   16 px = `--t-logo`, jedyny taki stopień w skali (ten sam co nazwa firmy w menu). */
.pcost-head-name { max-width: 34ch; overflow: hidden; font-size: var(--t-logo); text-overflow: ellipsis; white-space: nowrap; }
.pcost-head-client { max-width: 34ch; overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
/* ZK1 (wzór .k-zn): norma, wersja i „etap · stan” to znaczki-pigułki 26 px; etap i stan w JEDNYM znaczku — kropka w kolorze etapu, „Design · W toku”. */
.pcost-head-standard, .pcost-head-pills { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); height: 26px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pcost-head-pills:empty { display: none; }
.modal .pcost-head-pills > .status-pill:not(.solid) { gap: var(--s-2); color: inherit; font-size: inherit; font-weight: inherit; }
.modal .pcost-head-pills > .status-pill:not(.solid)::before { width: 7px; height: 7px; }
.modal .pcost-head-pills > .status-pill:not(.solid) + .status-pill::before { content: "·"; width: auto; height: auto; border-radius: 0; background: none; }
@media (max-width: 1180px) {
  .pcost-head-standard, .pcost-head-pills { display: none; }
  /* ZK2 (wzór .k-gl do 1180 px): niższy nagłówek — 50 px, odstępy 4 / 8 / 4 / 12. */
  .modal.project-costs-modal > header.project-cost-head-bar { min-height: 50px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); }
}
/* Jednostka ceny w nagłówku — pigułka przy normie („Design C”, „Oferta B”, „Niezapisany zestaw”). */
.pcost-head-version { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pcost-head-znaczki { display: contents; }   /* plakietki nagłówka (norma, jednostka ceny) odświeża kalkOdswiezStopke */
.pcost-head-version.is-zestaw { background: var(--warn-soft); color: var(--warn-strong); }   /* wzór .k-zn.wer.zest: „Niezapisany zestaw” / „Brak zakresu” */
/* Reguły `.pcost-head-totals` USUNIĘTE 12.08.2026 razem z kwotami w nagłówku
   (polecenie użytkownika „miałeś nie pokazywać cen w nagłówku"). Grupa akcji po
   prawej odsuwa się teraz sama — `.project-cost-head-actions` ma `margin-left: auto`. */
/* „nieprzeliczone" = liczby w oknie są SPRZED zmiany w formularzu. */
.pcost-head-stale { padding: 0 var(--s-2); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
/* DC16c — PAS BLOKADY sprzedanego projektu: pod nagłówkiem okna, nad kaflami i listą; ton ostrzeżenia (jak
   .project-cost-cena-zamrozona-info), ikona kłódki, tekst i — dla osoby z prawem — przycisk „Cofnij sprzedaż”. */
.modal.project-costs-modal > .pcost-blokada { display: flex; flex: none; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid color-mix(in srgb, var(--warn-strong) 35%, transparent); background: color-mix(in srgb, var(--warn-strong) 12%, var(--surface)); color: var(--text); font-size: var(--t-sm); line-height: 1.35; }
.pcost-blokada > .icon { flex: none; width: 18px; height: 18px; color: var(--warn-strong); }
.pcost-blokada > p { flex: 1 1 auto; min-width: 0; margin: 0; }
.pcost-blokada > p > strong { color: var(--warn-strong); font-weight: var(--w-heavy); }
.pcost-blokada > p > small { display: inline-block; margin-left: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }
.pcost-blokada > .button { flex: none; }
/* Wyłączone pola sprzedanego projektu przepuszczają klik do etykiety / rodzica — komunikat z powodem (kalkKlikWZablokowane). */
.modal.project-costs-modal form[data-blokada-sprzedazy="1"] :is(input, select, textarea):disabled { pointer-events: none; }
.modal.project-costs-modal form[data-blokada-sprzedazy="1"] label:has(:disabled) { cursor: not-allowed; }
/* Grupa „znacznik + zamknij"; bez niej oba elementy stają jeden pod drugim.
   `margin-left: auto` dosuwa ją do prawej krawędzi — wcześniej robił to pasek kwot,
   usunięty 12.08.2026; bez tego krzyżyk przykleiłby się do statusów. */
.project-cost-head-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
/* ZIELEŃ ZDJĘTA 12.08.2026 — polecenie użytkownika: „dlaczego Generuj prezentację
   w oknie kalkulatora jest zielone, a nie niebieskie".
   W systemie kolorów ZIELONY znaczy JEDNO: ten przycisk ZAPISUJE. Generowanie
   prezentacji niczego nie zapisuje, więc zieleń tu tylko myliła — tym bardziej że
   obok stoi zielony „Zapisz". Przycisk zostaje zwykły; akcją główną okna jest zapis. */
/* === 3. TABELE PORÓWNAWCZE (wspólne: Rozliczenie projektu, Historia ceny, „Co jeśli”, prowizja i rabat w konstrukcjach) =========== */
.cost-version-compare-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.cost-version-compare-table th, .cost-version-compare-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
/* Nagłówek zostaje przy przewijaniu — tło musi być jawne (border-collapse). */
.cost-version-compare-table thead th { position: sticky; top: 0; background: var(--surface); vertical-align: top; } /* E2: „Wersja A” i „Wersja B” w jednej linii, także gdy tylko jedna ma nazwę */
/* Pierwsza kolumna to nazwa pozycji, nie liczba. */
.cost-version-compare-table th[scope="row"] { color: var(--text-muted); font-weight: var(--w-medium); text-align: left; }
/* Najtańsza wersja zielona, najdroższa czerwona — to cała informacja. */
.cost-compare-tag { padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-bold); }
.cost-compare-tag.is-low { background: var(--ok-soft); color: var(--ok-strong); }
.cost-compare-tag.is-high { background: var(--danger-soft); color: var(--danger); }
.cost-version-compare-table tr.cost-compare-total > * { border-top: 2px solid var(--line-strong); font-size: var(--t-md); }
/* === 4. KOLUMNA 1 — ZAKRES: profil marż, drzewo Design, konstrukcje ======= */
/* PROFIL I WERSJA STOJĄ W STOPCE (17.08.2026), więc układ jest POZIOMY: podpis obok
   kontrolek, nie nad nimi. Wcześniej był to blok w wąskiej kolumnie (podpis w osobnym
   wierszu) — w pasku na całą szerokość okna taki układ robiłby stopkę dwa razy wyższą. */
.project-cost-profile-tools { display: flex; align-items: center; gap: var(--s-2); }
.project-cost-profile-tools > span { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.project-cost-profile-controls { display: flex; align-items: center; gap: var(--s-1); }
/* JEDNA SZEROKOŚĆ OBU LIST W STOPCE (17.08.2026). Profil miał 130–240 px, wersja 220–320 px
   — stały obok siebie i wyglądały jak dwa różne elementy. Teraz jedna reguła na oba paski,
   więc nie da się ich znowu rozjechać. Guziki nie łamią etykiet: inaczej „Zapisz wersję"
   rozpada się na dwa wiersze i pasek rośnie. */
.project-cost-footer :is(.project-cost-profile-controls > select, .combo) { flex: 0 1 220px; min-width: 150px; max-width: 260px; }
.project-cost-profile-controls > .button { white-space: nowrap; }
.project-cost-scope-body { min-height: 0; overflow: auto; }
.project-cost-construction-list { display: grid; gap: var(--s-2); }
.project-cost-section-label { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* Design = zwijana gałąź, konstrukcje siedzą w środku. */
.project-cost-design-tree { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.project-cost-design-tree > summary { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: var(--h-control); padding: var(--s-1) var(--s-2); list-style: none; cursor: pointer; user-select: none; }
.project-cost-design-tree > summary::-webkit-details-marker { display: none; }
.project-cost-design-tree > summary strong { min-width: 0; overflow: hidden; font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
/* Licznik „3/7" na końcu gałęzi. */
.project-cost-design-tree > summary span:last-child { padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.project-cost-design-children { display: grid; gap: var(--s-1); padding: var(--s-2); border-top: 1px solid var(--line); }
/* Karta konstrukcji = szary kafel z paskiem stanu po lewej (jak etap projektu).
   Zaznaczona do wyceny: pasek i tło na akcencie. Ramka się NIE zmienia, żeby
   lista nie „skakała" przy klikaniu. */
.project-cost-construction-card { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); transition: background var(--szybko) ease; }
.project-cost-construction-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 4px; background: var(--pc-pasek); }
.project-cost-construction-card:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.project-cost-construction-card:has([data-cost-construction]:checked) { background: var(--pc-wybrane); }
.project-cost-construction-card:has([data-cost-construction]:checked)::before { background: var(--accent); }
/* Cały wiersz jest etykietą checkboxa (klik = zaznacz), więc sam checkbox jest
   schowany — dla czytnika ekranu zostaje dostępny. */
/* Tura 5: druga kolumna (32 px na ikonę „›") zniknęła — przycisk „Marże" stoi w wierszu podpisu profilu. */
.project-cost-construction { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s-2); padding: var(--s-2); font-size: var(--t-base); cursor: pointer; }
.project-cost-construction input[data-cost-construction] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.project-cost-construction-info { min-width: 0; }
.project-cost-construction-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 var(--s-1); min-width: 0; padding-right: calc(11ch + 2 * var(--s-3)); } /* tura 5: miejsce na „Zestawienie” w rogu — nazwa kończy się przed przyciskiem, nie pod nim */
/* E2 (27.09): ikona systemu | nazwa, a „w. A” pod nazwą. Nazwa konstrukcji ŁAMIE SIĘ, zamiast ucinać — w kolumnie zakresu (1440: ~115 px na nazwę) z „Main Play Area”
   zostawało „Main Pla…”, a z „w. A” samo „w…”; na telefonie „Tag Master Are…”. Nazwa to jedyny podpis karty. */
.project-cost-construction-title strong, .project-cost-construction-name { min-width: 0; overflow-wrap: break-word; font-size: var(--t-base); font-weight: var(--w-bold); }
/* Nazwa jest przyciskiem (otwiera konstrukcję), ale ma wyglądać jak nazwa. */
.project-cost-construction-name { padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.project-cost-construction-name:hover { color: var(--accent-strong); text-decoration: underline; }
.project-cost-construction-title em { grid-column: 2; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.project-cost-construction-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); margin-top: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); }
/* E2 (27.09): „2017,72 kg / 5,89 m3” to najdłuższa miara — w pół karty samo „m3” spadało do nowej linii; dostaje cały wiersz. */
.project-cost-construction-metrics > small:first-child { grid-column: 1 / -1; }
.project-cost-construction-profile { display: block; margin-top: var(--s-2); }
/* Podpis „Profil marż" z lewej, przycisk „Marże ▾" z prawej — w jednym wierszu nad listą profilu. */
.project-cost-construction-profile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1); }
.project-cost-construction-profile select { width: 100%; }
/* Lista profilu + „Zapisz jako profil" w jednym wierszu: lista bierze resztę
   miejsca, przycisk tyle, ile potrzebuje. Marże ustawia się PER KONSTRUKCJA,
   więc guzik stoi przy tej konkretnej liście, nie w nagłówku okna. */
.project-cost-profile-row { display: flex; align-items: center; gap: var(--s-1); }
.project-cost-profile-row > select { flex: 1; min-width: 0; width: auto; }
.project-cost-profile-row > .button { flex: none; white-space: nowrap; }
/* Przycisk „Marże ▾" (tura 5 — wcześniej sama ikona „›" bez podpisu). Wysokość kontrolki w wierszu,
   napis i strzałka w kolorze akcentu: widać, że to się rozwija. */
.project-cost-construction-toggle { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); height: var(--h-control-sm); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--accent-strong); font-size: var(--t-xs); font-weight: var(--w-bold); cursor: pointer; }
.project-cost-construction-toggle:hover { background: var(--surface-2); }
.project-cost-construction-mini { padding: 0 var(--s-2) var(--s-2); border-top: 1px solid var(--line); }
/* Ręczne marże wersji: dwie kolumny „podpis + pole", % dopisane w polu. */
.project-cost-version-mini-panel { min-width: 0; padding-top: var(--s-2); }
.project-cost-version-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
/* Tura 5: `align-content: end` — gdy podpis w jednej komórce łamie się w dwie linie, pola obu komórek
   wiersza i tak stoją na jednej wysokości. */
.project-cost-version-table-row { display: grid; align-content: end; gap: var(--s-1); min-width: 0; }
/* Wartości zmierzone z renderu v8, nie przepisane z reguły bazowej (10 px/850) —
   tę bije późniejsza reguła i podpis wychodzi ostatecznie 13 px/600 w kolorze tekstu.
   Tura 5: podpis ŁAMIE SIĘ zamiast ucinać („Koszty pośrednie mater…", „Marża produktów handl…"). */
.project-cost-version-table-label { min-width: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); line-height: 1.15; overflow-wrap: anywhere; }
.project-cost-version-table-value { position: relative; display: block; min-width: 0; }
.project-cost-version-table-value input[type="number"] { width: 100%; padding-right: var(--s-5); text-align: right; font-variant-numeric: tabular-nums; }
.project-cost-version-table-value::after { content: "%"; position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--t-xs); pointer-events: none; }
/* MARŻA = pole liczbowe + suwak pod nim (redesign 12.08.2026). Jedna wartość, dwie
   kontrolki: pole do wpisania dokładnej liczby, suwak do szybkiego ustawiania.
   Znak „%" (::after) trzyma się POLA, nie środka komórki — stąd przeliczony `top`. */
.project-cost-margin-cell { display: grid; gap: 3px; }
.project-cost-margin-cell::after { top: calc(var(--h-control) / 2); }
/* Liczba nie może wejść pod znak „%": pole ma 10 px odstępu z reguły bazowej, a przy
   trzycyfrowej marży cyfry dotykały procenta. Odstęp powiększony do 20 px. */
.modal .project-cost-version-table-value.project-cost-margin-cell > input[type="number"] { padding-right: 20px; }
/* Selektor MUSI być trójczłonowy: reguła bazowa kontrolek (03-kontrolki.css:97,
   `input:not([type="checkbox"]):not([type="radio"])`) ma specyficzność 0-2-1 i sama
   klasa (0-1-0) z nią przegrywa — suwak dostawał min-height 32 px i wyglądał jak pole.
   Reguły bazowej NIE ruszamy: te same style noszą inne suwaki w aplikacji
   (mapy populacji, grubość pisaka w szkicowniku) i zmiana tam ruszyłaby ich wygląd. */
/* Wygląd suwaków marży NIE jest tu opisany — jest jeden dla całej aplikacji
   w 03-kontrolki.css (`input[type="range"]`). Tutaj zostaje wyłącznie układ. */
.project-cost-margin-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* === 5. KOLUMNA 2 — KAFLE KATEGORII =======================================
   Slot = kafel kategorii plus jej przełącznik marży. Aktywna zakładka dostaje
   pasek akcentu po lewej — ten sam język co zaznaczona konstrukcja.
   Geometria 1:1 z monolitem 25922 i 26081 (kafel jest ZWARTY: 2px 4px). */
.project-cost-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); align-items: start; gap: var(--s-2); }
.project-cost-category-slot { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); min-width: 0; overflow: hidden; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.project-cost-category-slot:has(.project-cost-category-card.is-active) { border-color: var(--pc-wybrane-linia); background: var(--pc-wybrane); }
.project-cost-category-slot:has(.project-cost-category-card.is-active)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 4px; background: var(--accent); }
.project-cost-category-card { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; justify-content: flex-start; gap: var(--s-2); width: 100%; min-width: 0; padding: 2px var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: var(--w-bold); text-align: left; cursor: pointer; transition: border-color var(--szybko), background var(--szybko); }
.project-cost-category-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.project-cost-category-card.is-active { border-color: var(--accent-strong); background: var(--accent-soft); }
.project-cost-category-card .icon { color: var(--text-muted); }
.project-cost-category-card.is-active .icon { color: var(--accent-strong); }
.project-cost-category-copy { display: grid; min-width: 0; }
.project-cost-category-copy strong, .project-cost-category-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-cost-category-copy strong { font-size: var(--t-base); font-weight: var(--w-black); line-height: 1.15; }
/* Podpis pod nazwą kategorii („Dostawa i logistyka"). Tura 5: było surowe 9,5 px — najmniejszy tekst
   programu to 12 px (token --t-xs, 00-tokens.css). */
.project-cost-category-copy small { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-heavy); line-height: 1.1; white-space: normal; }   /* POPR2-x04: podpis 13 px łamie się w drugą linię zamiast ucinać („Prowizja handlowca i rabat” na tablecie) */
/* Kwota kategorii na karcie — tylko tablet/telefon, zakładka „Koszty" (31-telefon-wzorzec.css §26). Na komputerze
   kwoty są w kolumnie wyników obok, karta zostaje bez zmian. */
.project-cost-category-kwota { display: none; }
.project-cost-custom-count { font-size: var(--t-xs); font-weight: var(--w-bold); }
/* KAFEL „CENA DLA KLIENTA" (13.08.2026) NIE MA WŁASNEGO WYGLĄDU. Używa dokładnie
   tych samych klas co pozostałe kafle (`project-cost-category-margin` +
   `project-cost-category-margin-switch` + `project-cost-custom-count`), więc
   przełączniki są identyczne jak przy Transporcie czy Montażu. ⛔ Nie dopisywać tu
   własnych pastylek ani siatek — pierwsza wersja z 13.08 miała własne i wyszła koślawo. */
/* Marża kategorii = wiersz „przełącznik ← → pole", bez własnej ramki (26037).
   Pusty placeholder ma ZNIKAĆ (25924); zostawiony w układzie rozpychał
   kolumnę o 200 px, bo jest tak szeroki jak realny wiersz marży. */
/* Kafel kategorii: JEDEN wiersz — ON/OFF, suwak narzutu, pole z liczbą. Suwak pod
   spodem (pierwsza wersja z 12.08) podnosił kafel z 90 do 120 px, przez co pięć
   kategorii nie mieściło się w kolumnie. Suwak bierze wolne miejsce w wierszu. */
/* Kafel ma ~140 px szerokości: ON/OFF + suwak + liczba w JEDNYM rzędzie zostawiały
   suwakowi 24 px, czyli nic. Suwak idzie więc w drugi rząd, na całą szerokość kafla,
   i jest niski (10 px) — kafel rośnie o ~12 px, a suwak wreszcie da się chwycić. */
.project-cost-category-margin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-1) var(--s-2); min-height: 0; padding: 0; border: 0; background: transparent; font-size: var(--t-xs); }
/* Selektor z atrybutem [type] jest KONIECZNY — reguła bazowa pól
   (input:not([type="checkbox"]):not([type="radio"]), 03-kontrolki.css) ma 0-2-1
   i bije samą klasę, przez co suwak dostawał 32 px wysokości pola i rozpychał kafel. */
.project-cost-category-margin > input[type="range"].project-cost-margin-slider { order: 3; grid-column: 1 / -1; } /* tylko układ — wygląd suwaka jest wspólny */
/* Tura 5 (ergonomia): trzy wiersze zamiast dwóch — „[przełącznik] Liczyć w cenie: tak", pod nim
   „Marża ····· 25 %", pod nim suwak. Wcześniej pod przełącznikiem było samo „WŁ." w 9 px, a znaczenie
   („Wył." wyrzuca z ceny cały koszt kategorii) tylko w dymku. Kafel rośnie o ~14 px; kolumna kafli
   przewija się sama (reguła .project-cost-category-panel). */
.project-cost-category-margin > .project-cost-category-margin-input { order: 2; grid-column: 1 / -1; }
.project-cost-category-margin.is-disabled > .project-cost-margin-slider { opacity: .45; }
/* Etykieta z procentem NIE jest dopisywana od nowa — wzorzec pola ze znakiem „%"
   istnieje niżej (.project-cost-category-margin-input: position:relative + ::after
   z prawej krawędzi). Dublujące reguły z 12.08 (własny ::after, flex, sztywne
   szerokości) usunięte: łamały tamten mechanizm i „%" spadał pod liczbę. */
.project-cost-category-margin.is-placeholder { display: none; }
/* Pole procentu: „%" jest STAŁYM sufiksem rysowanym na polu (monolit 25798),
   a nie osobnym napisem obok — dzięki temu wpisana liczba zawsze stoi przy
   znaku i pole mieści „123,34%". Napis obok zostaje tylko dla czytnika ekranu. */
.project-cost-category-margin-input { position: relative; display: flex; align-items: center; gap: var(--s-1); min-width: 58px; margin: 0; }
.project-cost-category-margin-input > span { display: none; }
/* Tura 4 (26.09.2026): podpis „marża” przed liczbą — sam „0 %” pod suwakiem nie mówił, czego dotyczy. */
.project-cost-category-margin-caption { flex: none; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); }
/* Pole siedzi NA kaflu, więc nie ma własnej ramki ani tła (monolit 26038) —
   inaczej w kaflu kategorii pojawia się druga kratka w kratce. */
.modal .project-cost-category-margin .project-cost-category-margin-input > input { width: 100%; min-width: 0; height: 24px; min-height: 0; padding: 3px var(--s-5) 3px 6px; border: 0; background: transparent; box-shadow: none; text-align: right; font-variant-numeric: tabular-nums; }
/* POPR3-pola: marża ZABLOKOWANA (projekt sprzedany — cena zablokowana, powód w dymku z koszty-4-panele) nie może wyglądać
   jak czynna liczba na kaflu — szare tło pola zablokowanego i kursor not-allowed. */
.modal .project-cost-category-margin .project-cost-category-margin-input > input:disabled { border-radius: var(--okno-pole-r, var(--r)); background: var(--pole-tlo-zablokowane); color: var(--pole-napis-zablokowane); cursor: not-allowed; }
.project-cost-category-margin-input::after { content: "%"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); pointer-events: none; }
/* Strzałki pól liczbowych w tym oknie tylko przeszkadzają (monolit 25823). */
.project-costs-modal input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.project-costs-modal input[type="number"]::-webkit-outer-spin-button, .project-costs-modal input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Panel edytora wsuwany pod kafel — tylko na wąskim ekranie (patrz §11). */
.project-cost-mobile-panel-slot { display: none; }
/* === 6. PRZEŁĄCZNIKI ON/OFF (marża kategorii, VAT, powrót, pozycje) =======
   Jeden mechanizm: ukryty checkbox i „suwak" rysowany na <span>. DC16b: JEDEN rozmiar
   i wygląd w całym Kalkulatorze — tokeny --przel-* (tor 34×20, gałka 16, biała). */
.project-cost-category-margin-switch, .project-cost-vat-switch, .project-cost-custom-switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; cursor: pointer; }
/* Przełącznik marży: suwak, a pod nim malutki podpis (monolit 10254 + 25794).
   Kolumna 28px trzyma podpis wąsko — bez tego napis rozpycha całą kolumnę. */
.project-cost-category-margin-switch { display: inline-grid; grid-template-columns: 28px; justify-items: center; gap: 2px; color: var(--text-muted); font-size: var(--t-3xs); font-weight: var(--w-black); line-height: 1; }
/* Tura 5: przełącznik kafla kategorii i „Pozycji dodatkowych" — napis „Liczyć w cenie: tak/nie" OBOK
   suwaka, zwykłymi literami, na całą szerokość kafla. Pozostałe przełączniki (prowizja i rabat
   w kaflu „Cena dla klienta", AUTO/MANUAL aut) zostają z krótkim podpisem pod suwakiem. */
.project-cost-category-margin-switch.pcost-w-cenie { display: inline-flex; grid-column: 1 / -1; justify-self: start; gap: var(--s-2); color: var(--text); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.2; letter-spacing: 0; text-transform: none; }
.project-cost-category-margin-switch.pcost-w-cenie em { color: inherit; font-size: inherit; }
.project-cost-category-margin.is-disabled .project-cost-category-margin-switch.pcost-w-cenie { color: var(--text-muted); }
.project-cost-category-margin-switch input, .project-cost-vat-switch input[type="checkbox"], .project-cost-custom-switch > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.project-cost-category-margin-switch > span, .project-cost-vat-slider, .project-cost-custom-slider { position: relative; flex: none; width: var(--przel-szer); height: var(--przel-wys); border-radius: var(--r); background: var(--line-strong); transition: background var(--szybko) ease; }
.project-cost-category-margin-switch > span::after, .project-cost-vat-slider::after, .project-cost-custom-slider::after { content: ""; position: absolute; top: var(--przel-odstep); left: var(--przel-odstep); box-sizing: border-box; width: var(--przel-galka); height: var(--przel-galka); border: 0; border-radius: var(--r-pill); background: var(--galka); box-shadow: 0 1px 2px color-mix(in srgb, var(--zaslona-kolor) 30%, transparent); transition: transform var(--szybko) ease; }
.project-cost-category-margin-switch input:checked + span, .project-cost-vat-switch input:checked + .project-cost-vat-slider, .project-cost-custom-switch > input:checked + .project-cost-custom-slider { background: var(--ok); }
.project-cost-category-margin-switch input:checked + span::after, .project-cost-vat-switch input:checked + .project-cost-vat-slider::after, .project-cost-custom-switch > input:checked + .project-cost-custom-slider::after { transform: translateX(var(--przel-skok)); }
/* Przełącznik wyłączony (np. projekt sprzedany) — przygaszony, kursor „nie wolno”; powód w dymku i w pasie blokady. */
:is(.project-cost-category-margin-switch, .project-cost-vat-switch, .project-cost-custom-switch):has(input:disabled) { cursor: not-allowed; opacity: .55; }
:is(.project-cost-category-margin-switch, .project-cost-vat-switch, .project-cost-custom-switch):has(input:focus-visible) > :is(span, .project-cost-vat-slider, .project-cost-custom-slider) { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-cost-category-margin-switch em, .project-cost-vat-switch em { color: var(--text-muted); font-size: var(--t-xs); font-style: normal; }
.project-cost-vat-switch > strong { font-size: var(--t-xs); font-weight: var(--w-bold); }
/* === 7. KOLUMNA 3 — EDYTOR KATEGORII ===================================== */
/* Warsztat: treść plus ewentualny panel boczny (podpowiedź transportu). */
.project-cost-editor-stack { display: grid; gap: var(--s-3); min-width: 0; min-height: 0; overflow: visible; }
.project-cost-editor-stack.is-tabbed [data-project-cost-editor-panel] { display: none; }
.project-cost-editor-stack.is-tabbed .is-active-tab { display: grid; min-width: 0; min-height: 0; overflow: auto; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.project-cost-editor-section { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); overflow: visible; background: var(--surface-2); }
/* Warsztat = nagłówek kroku plus przewijana treść pod nim. */
/* NAPRAWA 11.08.2026 — dol zakladki byl UCIETY i nieosiagalny.
   <main> nosi obie klasy: .project-cost-center-panel i .project-cost-editor-column.
   Obie reguly maja (0,1,0), ale ta jest PÓZNIEJ w pliku, wiec jej SKROT
   `overflow: hidden` zerowal `overflow-y: auto` z reguly .project-cost-editor-column
   — kolumna edytora nie mogla sie przewijac.
   v8 robi odwrotnie: styles.css:26566 wymusza tam `overflow-y: auto`.
   Rozbijamy skrot na sama os X: `overflow-y` z tamtej reguly przezywa,
   bez !important i bez podbijania specyficznosci. */
.project-cost-center-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); min-width: 0; min-height: 0; overflow-x: hidden; }
/* W1: nagłówek okna kosztów na tle okna, jak każdy nagłówek okna (05-komponenty §3). */
.project-cost-calculator-head { min-height: 44px; background: transparent; }
.project-cost-step-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--s-2); margin-right: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* v15 b19 (ZK1): WNĘTRZA PANELI KOSZTÓW 1:1 ZE WZOREM (scratchpad/pulpit/Kalkulator.html, kalk_czesc.txt). Słownik wzór → program:
   .k-sk (sekcja w ramce) = .project-cost-subpanel | -fieldset | -route-grid | -mode-row | -rate-summary | -collapsible | -transport-advice-panel;
   .k-sk > header (tytuł 14/700, podpis 12 pod nim, przyciski z prawej) = .project-cost-subhead | -fieldset-head | -route-toolbar | summary;
   .k-pola (pola w rzędzie, min. 180 px) = .project-cost-address-grid | -assembly-controls | -hotel-top | -crew-address-row | -mode-row;
   .k-tb (tabela: szary nagłówek kolumn + wiersze z kreską) = nagłówek kolumn (…-head) i zaraz po nim lista wierszy;
   .k-wy2 (kafelki wyników) = .project-cost-mini-result-grid; .k-flow (przepływ ceny) = .pcost-przeplyw (11c). */
.project-cost-step-body, .project-cost-tab-workbench, .project-cost-tab-main, .project-cost-tab-side, .project-cost-fieldsets { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.project-cost-editor-section > .pcost-przeplyw { margin-top: var(--s-3); }
.project-cost-editor-section > .pcost-przeplyw[hidden] { display: none; }
@media (max-width: 1180px) {   /* ZK7 (wzór .k-ed do 1180 px): sekcje i przepływ ceny co 8 px — było 12 */
  .project-cost-step-body, .project-cost-tab-workbench, .project-cost-tab-main, .project-cost-tab-side, .project-cost-fieldsets { gap: var(--s-2); }
  .project-cost-editor-section > .pcost-przeplyw { margin-top: var(--s-2); }
}
/* --- sekcja --- */
:is(.project-cost-subpanel, .project-cost-fieldset, .project-cost-route-grid, .project-cost-rate-summary) { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
/* ZK7 (wzór .k-sk > header, align-items: center): tytuł z podpisem to ZWARTY blok na środku wysokości przycisku — wiersze 2 i 3 siatki,
   wolne miejsce biorą po równo wiersze 1 i 4 (sam tytuł obok przycisku 36 px stoi 8 px od góry, obok 44 px — 12 px). */
:is(.project-cost-subhead, .project-cost-fieldset-head, .project-cost-rate-summary-head) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; align-items: center; column-gap: var(--s-3); }
:is(.project-cost-subhead, .project-cost-fieldset-head, .project-cost-rate-summary-head) > strong { grid-row: 2; }
:is(.project-cost-subhead, .project-cost-fieldset-head, .project-cost-rate-summary-head) > span { grid-row: 3; }
.project-cost-route-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.project-cost-route-toolbar > strong { flex: 1 1 auto; }
.project-cost-route-grid > .project-cost-route-toolbar { row-gap: var(--s-3); }   /* wzór: przyciski zawinięte pod tytuł stoją 12 px niżej (telefon) */
.project-cost-route-grid > .project-cost-route-toolbar > strong { flex-basis: 160px; }
:is(.project-cost-subhead, .project-cost-fieldset-head, .project-cost-route-toolbar, .project-cost-rate-summary-head, .project-cost-collapsible > summary, .project-cost-transport-advice-head) strong { grid-column: 1; color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); line-height: 1.4; }
:is(.project-cost-subhead, .project-cost-fieldset-head, .project-cost-rate-summary-head) > span, .project-cost-collapsible > summary > span, .project-cost-transport-advice-head small { display: block; grid-column: 1; min-width: 0; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.4; font-variant-numeric: tabular-nums; }
:is(.project-cost-subhead, .project-cost-route-toolbar) > :is(.button, .project-cost-toolbar-actions) { grid-column: 2; grid-row: 1 / -1; }
.project-cost-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.project-cost-editor-column .button.mini { height: var(--h-control); padding: 0 var(--s-4); font-weight: var(--w-regular); }
/* --- pola --- */
.project-cost-editor-column :is(.project-cost-mode-row, .project-cost-address-grid, .project-cost-assembly-controls, .project-cost-hotel-top, .project-cost-crew-address-row) { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; gap: var(--s-2) var(--s-3); min-width: 0; }
.project-cost-editor-column .project-cost-mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.project-cost-mode-row > .project-cost-mode-head { grid-column: 1 / -1; }
.project-cost-editor-column :is(.project-cost-assembly-split, .project-cost-assembly-mode-line, .project-cost-crew-grid) { display: contents; }
.project-cost-editor-column .field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
/* ZK7: `.modal` w selektorze etykiety — ogólna etykieta okna (19-modale-tresc, `.modal .field > label`) dawała tu 12/500 w kolorze tekstu zamiast 12/600 szarej ze wzoru (.k-pl). */
.modal .project-cost-editor-column .field > label, .pcost-pole-etykieta, .project-cost-limit-card > span { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.4; }
/* ZK7 (wzór: pola `font: inherit` = 400): także pola tekstowe, liczbowe i kwoty w sekcjach i wierszach tabel — było 500 (pole okna) i 600 (kwota). */
.modal.project-costs-modal .project-cost-editor-column :is(select, input.combo-input, :is(.field, .project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) input:not([type="checkbox"]):not([type="radio"])) { font-weight: var(--w-regular); }
.project-cost-editor-column .field :is(.combo, .currency-field) { max-width: none; }
/* ZK7 — pole kwoty z walutą jak we wzorze (.k-kw2 + .k-wal): lista waluty 66 px (było 92 / 76), strzałka 4 px od krawędzi, żeby „EUR” się mieściło. */
.project-cost-editor-column .currency-field.has-currency-select { grid-template-columns: minmax(0, 1fr) 66px; }
.modal.project-costs-modal .project-cost-editor-column .currency-field input.combo-input:not([type="checkbox"]):not([type="radio"]) { padding-inline: var(--s-2) calc(var(--s-1) + var(--s-4)); background-position: right var(--s-1) center; }
/* „Koszt ręczny” przy liczeniu automatycznym (wzór: pole wyłączone = białe, przygaszone do połowy, z szarym „0”; lista waluty tak samo przygaszona).
   Pole zostaje tylko do odczytu jak dotąd (koszty-2-transport.js) — tu sam wygląd; szare wypełnienie pola zablokowanego zdjęte. */
.modal.project-costs-modal .project-cost-editor-column .currency-field.is-readonly input[data-currency-input]:not([type="checkbox"]):not([type="radio"]) { border-color: var(--pole-ramka); background: var(--pole-tlo); color: var(--text); opacity: .5; }
.project-cost-editor-column .currency-field.is-readonly > :is(.combo, select) { opacity: .5; }
/* Pole tylko do odczytu w sekcji i liczba aut dobrana automatem (wzór `.k-pole input[readonly]`): jasnoszare tło, przygaszony napis. */
.modal.project-costs-modal .project-cost-editor-column :is(.field > input[readonly], input[data-route-quantity][readonly]):not([data-currency-input]):not([type="checkbox"]):not([type="radio"]) { border-color: var(--pole-ramka); background: var(--surface-2); color: var(--text-muted); }
.modal.project-costs-modal .project-cost-editor-column :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) { height: var(--h-control); min-height: 0; padding-block: 0; border-radius: var(--r-sm); }
.modal.project-costs-modal .project-cost-editor-column input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.combo-input) { padding-inline: var(--s-2); }
.project-cost-manual-inline .currency-field { width: 100%; }
.modal .project-cost-editor-column .field > input[type="number"]:not([type="checkbox"]):not([type="radio"]) { text-align: right; font-variant-numeric: tabular-nums; }   /* wzór: pola liczb do prawej */
/* „Tryb”: kratka z napisem (wzór .k-chk) i „Maks ekipy” jako sama wartość (wzór .k-ro). */
.project-cost-mode-field > .project-cost-mode-check { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); padding: 0; }
.project-cost-mode-check strong { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); }
.project-cost-limit-card { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.project-cost-limit-card > strong { display: flex; align-items: center; min-height: var(--h-control); color: var(--text); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
/* Kratka wyboru jak we wzorze (.chk2): 22 px, zaokrąglona, zaznaczona = akcent z białym znakiem. */
.modal .pcost-v15 .project-cost-mode-check > input[type="checkbox"] { position: relative; flex: none; appearance: none; width: 22px; min-width: 0; height: 22px; min-height: 0; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.pcost-v15 .project-cost-mode-check > input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.pcost-v15 .project-cost-mode-check > input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 2px; background: var(--on-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcost-v15 .project-cost-mode-check > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcost-v15 .project-cost-mode-check > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
/* --- tabela: nagłówek kolumn + wiersze --- */
:is(.project-cost-route-head, .project-cost-line-head, .project-cost-crew-travel-head, .project-cost-custom-head-row, .project-cost-load-compact-head) { display: grid; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border: 1px solid var(--line-soft); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.4; }
/* Lista wierszy stoi zaraz pod nagłówkiem kolumn (ujemny margines zdejmuje odstęp sekcji) — razem to jedna ramka tabeli. */
:is(.project-cost-route-scroll, .project-cost-crew-travel-scroll, [data-certification-rows], [data-waste-rows], [data-rental-rows], .project-cost-custom-list, .project-cost-load-compact-list) { display: flex; flex-direction: column; min-width: 0; margin-top: calc(-1 * var(--s-2)); border: 1px solid var(--line-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); }
:is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row, .project-cost-load-compact-row) { display: grid; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2); border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
:is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row, .project-cost-load-compact-row):first-child { border-top: 0; }
.project-cost-route-head, .project-cost-route-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 84px 72px 84px var(--pcost-kosz, 40px); }
.project-cost-return-head, .project-cost-return-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 72px 72px 110px; }
.project-cost-crew-travel-head, .project-cost-crew-travel-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 148px 150px var(--pcost-kosz, 40px); }
.project-cost-line-head, .project-cost-line-row { grid-template-columns: minmax(0, 1fr) 84px 84px var(--pcost-kosz, 40px); }
.project-cost-custom-head-row, .project-cost-custom-row { grid-template-columns: 48px minmax(0, 1fr) 150px 84px var(--pcost-kosz, 40px); }
.project-cost-load-compact-head, .project-cost-load-compact-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px 90px; }
/* Pusta lista: nagłówek kolumn zostaje, pod nim napis „Brak pozycji…” w ramce tabeli (wzór .k-tbp). */
.project-cost-pusta-lista { margin: calc(-1 * var(--s-2)) 0 0; padding: var(--s-3); border: 1px solid var(--line-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--text-faint); font-size: var(--t-sm); text-align: center; }
:is([data-certification-rows], [data-waste-rows], [data-rental-rows], [data-custom-positions], [data-crew-travel-rows], [data-cert-travel-rows]):has(> *) + .project-cost-pusta-lista { display: none; }
:is([data-certification-rows], [data-waste-rows], [data-rental-rows], [data-custom-positions], [data-crew-travel-rows], [data-cert-travel-rows]):not(:has(> *)) { display: none; }
/* Pola w wierszu: pełna szerokość kolumny, liczby do prawej. */
.project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) :is(input:not([type="checkbox"]):not([type="hidden"]), select, .combo) { width: 100%; min-width: 0; }
.modal .project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) input:is([type="number"], [inputmode="decimal"]):not([type="checkbox"]):not([type="radio"]) { padding-inline: var(--s-2); text-align: right; font-variant-numeric: tabular-nums; }
/* Nazwa odcinka (wzór .k-odc): pole z przerywaną ramką na szarym tle. */
.modal .project-cost-editor-column :is([data-route-name], [data-crew-travel-name], [data-cert-travel-name]):not([type="checkbox"]):not([type="radio"]) { padding: 0 var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); box-shadow: none; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); text-overflow: ellipsis; }
.modal .project-cost-editor-column [data-route-name]:not([type="checkbox"]):not([type="radio"]) { cursor: pointer; }
/* „Km” i „Pojazdy” to dwie kolumny tabeli (podpisy niesie nagłówek); przy przejeździe ekipy oba pola dzielą kolumnę „Km / ilość”. */
.project-cost-route-numbers { display: contents; }
.project-cost-crew-travel-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); min-width: 0; }
.pcost-kom, .project-cost-route-numbers label, .project-cost-crew-travel-numbers label, .project-cost-crew-travel-manual-block { display: block; min-width: 0; margin: 0; }
.pcost-kom-etykieta, .project-cost-route-numbers label span, .project-cost-crew-travel-numbers label span, .project-cost-crew-travel-manual-block > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* AUTO / MANUAL liczby aut (KOS-19) — przycisk jak we wzorze (.k-am): zielony AUTO, bursztynowy MANUAL; kratka zostaje nośnikiem. */
/* ZK7: `.modal` w selektorze — ogólna etykieta okna (19-modale-tresc) dawała przyciskowi szary napis 12/500; wzór .k-am: 13/400 w kolorze tekstu. */
.modal .project-cost-route-row > .project-cost-route-quantity-switch { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); line-height: 1; cursor: pointer; }
.project-cost-route-row > .project-cost-route-quantity-switch > span { display: none; }
.project-cost-route-row > .project-cost-route-quantity-switch > em { color: inherit; font-size: inherit; font-weight: inherit; }
.modal .project-cost-route-row > .project-cost-route-quantity-switch:has(input:not(:checked)) { border-color: var(--warn-strong); color: var(--warn-strong); }
.project-cost-route-row > .project-cost-route-quantity-switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-cost-route-row > .project-cost-route-quantity-switch:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Kosz wiersza (wzór .x): 36 px, bez tła; czerwony dopiero pod kursorem. */
.project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > .icon-button.danger { justify-self: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); }
.project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > .icon-button.danger:hover { background: var(--danger-soft); color: var(--danger); }
.project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > .icon-button.danger .icon { width: 16px; height: 16px; }
/* Rozpisanie kosztu odcinka pod wierszem (wzór .k-tbo); brak km — czerwone. */
.project-cost-route-calc { grid-column: 1 / -1; margin: 0; color: var(--text-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; line-height: 1.4; }
.project-cost-route-calc:empty { display: none; }
.project-cost-route-calc.is-brak { color: var(--danger); font-weight: var(--w-bold); }
/* Transport powrotny: przy wyłączonym „Powrót” zamiast tabeli zdanie (pola zostają w formularzu). */
.project-cost-return-row .pcost-kom-kwota { font-weight: var(--w-strong); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.project-cost-return-off { display: none; margin: 0; border: 0; }
.project-cost-return-transport-panel:has(input[type="checkbox"][name="returnTransportEnabled"]:not(:checked)) > .project-cost-return-off { display: block; }
.project-cost-return-transport-panel:has(input[type="checkbox"][name="returnTransportEnabled"]:not(:checked)) > :is(.project-cost-return-head, .project-cost-route-scroll) { display: none; }
.project-cost-cert-travel-info { color: var(--text-faint); font-size: var(--t-xs); line-height: 1.4; }
.project-cost-cert-travel-active-note { color: var(--danger); font-weight: var(--w-medium); }
.project-cost-cert-travel-active-note[hidden] { display: none; }
/* --- sekcja zwijana (Zakwaterowanie, Przejazd, Dojazd certyfikatora): wygląd sekcji, przełącznik w prawym rogu nagłówka --- */
.project-cost-collapsible { position: relative; display: block; min-width: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.project-cost-collapsible > summary { display: grid; align-content: center; min-height: 0; padding: 0; list-style: none; cursor: pointer; }
.project-cost-collapsible > summary::-webkit-details-marker { display: none; }
.project-cost-collapsible[open] > summary { margin-bottom: var(--s-2); }
/* ZK7: przełącznik stoi w wierszu tytułu przy każdej szerokości (wzór 1024 i 390: tytuł zawija się obok niego); 176 px = przełącznik 164 + odstęp 12. */
.project-cost-collapsible:has(.project-cost-roundtrip-switch) > summary { min-height: 32px; padding-right: 176px; }
.project-cost-collapsible-body { display: flex; flex-direction: column; gap: var(--s-2); padding: 0; }
.project-cost-collapsible .project-cost-roundtrip-switch { position: absolute; top: var(--s-3); right: var(--s-3); }
.project-cost-collapsible .project-cost-route-toolbar strong { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* Przełącznik z napisem w sekcji (wzór .k-csw): „Powrót”, „Podróż Powrotna ×2”. */
.modal .project-cost-editor-column .project-cost-vat-switch { gap: var(--s-2); min-height: 32px; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); }
.project-cost-editor-column .project-cost-vat-switch > :is(strong, em) { color: inherit; font-size: inherit; font-style: normal; font-weight: inherit; }
.project-cost-editor-column .project-cost-roundtrip-switch > em { margin-left: calc(-1 * var(--s-1)); }   /* „Podróż Powrotna ×2” — odstęp przed „×2” jak spacja we wzorze */
.project-cost-roundtrip-tag { color: var(--text-faint); font-size: var(--t-xs); font-style: normal; }
/* --- stawki ekipy: tabela Pozycja | Ilość | Koszt (wzór .k-tb, kolumny 1fr 110 120) --- */
.project-cost-rate-table { display: block; width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.project-cost-rate-table :is(thead, tbody) { display: block; }
.project-cost-rate-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px; align-items: center; gap: var(--s-2); padding: var(--s-2); border-top: 1px solid var(--line-soft); }
.project-cost-rate-table thead tr { padding: var(--s-1) var(--s-2); border-top: 0; background: var(--surface-2); }
.project-cost-rate-table :is(th, td) { min-width: 0; padding: 0; border: 0; font-size: var(--t-sm); text-align: left; }
.project-cost-rate-table th { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.4; }
.project-cost-rate-table :is(th, td):nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* DC12: nagłówki „Ilość” i „Koszt” nad swoimi kwotami (do prawej) */
.project-cost-rate-table td:nth-child(3) { font-weight: var(--w-strong); }
.project-cost-rate-table td > small { display: block; color: var(--text-faint); font-size: var(--t-xs); }
.rate-name { display: block; font-weight: var(--w-bold); }
.project-cost-rate-table td.project-cost-rate-empty { grid-column: 1 / -1; color: var(--text-faint); text-align: center; }
/* --- pozycje dodatkowe: przełącznik | nazwa | koszt + waluta | narzut + % | kosz --- */
.project-cost-custom-switch { display: grid; place-items: center; width: 44px; height: 36px; }
.project-cost-custom-price, .project-cost-custom-margin { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.project-cost-custom-price > small, .project-cost-custom-margin > small { flex: none; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.modal.project-costs-modal .project-cost-editor-column .project-cost-custom-row .project-cost-custom-margin > input:not([type="checkbox"]):not([type="radio"]) { font-weight: var(--w-strong); }
/* BOM konstrukcji = lista wierszy, nie kafle (monolit 25966: w kolumnie
   edytora te pojemniki są PŁASKIE — bez tła, ramki i wcięcia). */
.project-cost-bom-detail-list, .project-cost-bom-construction-block, .project-cost-bom-steel-summary, .project-cost-bom-steel-rule { display: block; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.project-cost-bom-construction-block { margin-bottom: var(--s-4); }
/* Siatka strzałka | nazwa | kwota (skan 13.09.2026): przy flex-wrap długa nazwa („…/ Trampoline Park Area")
   spadała do nowej linii WYRÓWNANA DO PRAWEJ, a kwota pod nią — co drugi wiersz wyglądał inaczej. Nazwa
   zawsze od lewej (łamie się w swojej kolumnie), kwota zawsze w prawej kolumnie w pierwszej linii. */
.project-cost-bom-detail-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-2); padding: 6px var(--s-1) 5px; margin-bottom: var(--s-1); border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; background: transparent; list-style: none; cursor: pointer; }
.project-cost-bom-detail-row::-webkit-details-marker { display: none; }
.project-cost-bom-detail-row > span { color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-strong); text-align: left; }
.project-cost-bom-detail-row::before { align-self: start; margin-top: 3px; }
.project-cost-bom-detail-row > strong { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-cost-bom-steel-rule-grid { display: flex; flex-direction: column; gap: 0; }
/* Ujednolicenie 11.08.2026 — .08em → kanon .04em; to była DWUKROTNOŚĆ
   rozstrzelenia reszty podpisów wersalikowych w aplikacji. */
.project-cost-bom-steel-rule-head { padding: 0; margin: var(--s-3) 0 var(--s-1); background: transparent; font-size: var(--t-2xs); font-weight: var(--w-bold); }
.project-cost-bom-steel-rule-tile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-width: 0; min-height: 0; padding: var(--s-1) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.project-cost-bom-steel-rule-tile > span { color: var(--text-muted); font-size: var(--pc-etykieta); font-weight: var(--w-bold); letter-spacing: 0; text-transform: none; }
.project-cost-bom-steel-rule-tile > strong { color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* DECK i NETTING mają jedną metrykę — nazwa kategorii jest etykietą wiersza. */
.project-cost-bom-steel-rule-tile.is-rule-line > span { color: var(--text); font-weight: var(--w-medium); }
.project-cost-bom-steel-rule.is-single { margin-top: var(--s-1); }
/* --- Ładunek i dobór transportu (wzór .k-skz): zwijana sekcja — strzałka, tytuł i podpis; w środku kafelki ładunku i tabela doboru --- */
.project-cost-transport-advice-panel { display: block; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.project-cost-transport-advice-head { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-3); list-style: none; cursor: pointer; }
.project-cost-transport-advice-head::-webkit-details-marker { display: none; }
.project-cost-transport-advice-panel > .project-cost-collapsible-body { gap: var(--s-2); padding: 0 var(--s-3) var(--s-3); }
.project-cost-load-compact-row > :is(strong, span, b) { min-width: 0; color: var(--text); font-weight: var(--w-regular); }
.project-cost-load-compact-empty { padding: var(--s-3); color: var(--text-faint); font-size: var(--t-sm); text-align: center; }
.project-cost-load-metric { color: var(--text); }
.project-cost-load-metric.danger { color: var(--brak-bom); }
/* Wyjaśnienie „skąd ta ładowność" przy starym systemie liczenia. */
/* --- kafelki wyników (wzór .k-wy2): podpis nad liczbą, szare tło, w rzędzie ile się zmieści (min. 130 px) --- */
.project-cost-mini-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-1); }
/* ZK7: sześć kafelków (program dokłada „Dodatkowe h instalacji”, wzór ma pięć) — przy 1440 px „Dodatkowe h instalacji” i „Razem zakwaterowanie”
   łamały się w dwie linie, a liczby stały na różnych wysokościach. Szerszy kafelek (150 px mieści najdłuższy podpis): pięć w rzędzie + jeden pod spodem. */
.project-cost-mini-result-grid:has(> :nth-child(6)) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.project-cost-mini-result-grid > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); }
.project-cost-mini-result-grid span { color: var(--text-faint); font-size: var(--t-xs); line-height: 1.4; }
.project-cost-mini-result-grid strong { font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; line-height: 1.4; }
/* --- WĄSKI EDYTOR (telefon, telefon poziomo; wzór @container ked ≤ 600 px): tabele bez nagłówka kolumn — pola po dwa w rzędzie z podpisem nad polem,
   pierwsza komórka na całą szerokość, kosz w prawym górnym rogu wiersza; pola sekcji jedno pod drugim. --- */
@container ked (max-width: 600px) {
  :is(.project-cost-route-head, .project-cost-line-head, .project-cost-crew-travel-head, .project-cost-custom-head-row, .project-cost-load-compact-head), .project-cost-rate-table thead { display: none; }
  :is(.project-cost-route-scroll, .project-cost-crew-travel-scroll, [data-certification-rows], [data-waste-rows], [data-rental-rows], .project-cost-custom-list, .project-cost-load-compact-list), .project-cost-pusta-lista { margin-top: 0; border-radius: var(--r-sm); }
  :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row, .project-cost-load-compact-row) { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row, .project-cost-load-compact-row) > :first-child { grid-column: 1 / -1; }
  :is(.project-cost-route-row:not(.project-cost-return-row), .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > :first-child { padding-right: 48px; }
  .project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > .icon-button.danger { position: absolute; top: var(--s-2); right: var(--s-2); }
  .pcost-kom-etykieta, .project-cost-route-numbers label span, .project-cost-crew-travel-numbers label span, .project-cost-crew-travel-manual-block > span { position: static; display: block; width: auto; height: auto; margin-bottom: 2px; overflow: visible; clip-path: none; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: normal; }
  .project-cost-return-row .pcost-kom-kwota { text-align: left; }
  .project-cost-rate-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-cost-rate-table td:first-child { grid-column: 1 / -1; }
  .project-cost-rate-table td:nth-child(2) { text-align: left; }
  .project-cost-editor-column :is(.project-cost-mode-row, .project-cost-address-grid, .project-cost-assembly-controls, .project-cost-hotel-top, .project-cost-crew-address-row) { grid-template-columns: minmax(0, 1fr); }
}
/* --- DOTYK (tablet, telefon; wzór ≤ 1180 px): cele co najmniej 44 px --- */
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-editor-column { --pcost-kosz: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-editor-column :is(.project-cost-route-row, .project-cost-crew-travel-row, .project-cost-line-row, .project-cost-custom-row) > .icon-button.danger { width: 44px; height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-costs-modal .project-cost-route-row > .project-cost-route-quantity-switch, :root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-editor-column .project-cost-vat-switch, :root:is([data-ui="tablet"], [data-ui="mobile"]) .project-costs-modal .project-cost-mode-field > .project-cost-mode-check { min-width: 44px; min-height: 44px; }   /* ZK7: z .project-costs-modal — reguła tabletu (11-kalkulator-wynik, 40 px) była mocniejsza */
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-custom-switch { height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) #modal-root .project-cost-transport-advice-head { min-height: 56px; }   /* ZK7: #modal-root — na tablecie wygrywała ogólna wysokość „summary” (03-kontrolki) i nagłówek miał 52 px */
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-collapsible > summary { min-height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-editor-column .button.mini { padding: 0 var(--s-4); font-size: var(--t-sm); font-weight: var(--w-regular); }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .project-cost-client-price > .analizy-ceny-przyciski > .button { padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--w-regular); }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-v15 .project-cost-mode-check > input[type="checkbox"]::before { content: ""; position: absolute; inset: -11px; }