/* ============================================================================
   10-projekty.css — widok listy projektów
   ----------------------------------------------------------------------------
   v15 (02.10.2026): wiersz listy (.pl-wiersz), nagłówek, pasek i menu filtrów mieszkają w 10b-projekty-lista.css,
   karta projektu i oś etapów w 10c-projekty-karta.css. Tu zostaje kwota „razem” w wierszu (.prow-kwota), etapy
   w kaflu, strona projektu (do P6) i okno „Dla klienta”.
   ============================================================================ */
/* SZEROKOŚĆ LISTY jako punkt odniesienia (K09, v14): karta listy na komputerze jest kontenerem `lista-projektow`.
   Układ wiersza (jedna linia / dwie linie) i szerokość kwot (cqi) zależą od szerokości LISTY, a nie ekranu — ta sama
   lista przy menu rozwiniętym, zwiniętym i przy pasku ikon ma ten sam układ, jeśli ma tę samą szerokość.
   (Do 26.09 próg 1400 px ekranu był policzony dla menu 208 px: 1366 px ze zwiniętym menu, gdzie lista ma
   1274 px, dostawało wąski układ, a 1440 px z rozwiniętym menu — 1166 px — szeroki, ze ściśniętą nazwą.)
   Kontener nie przejmuje elementów `position: fixed` (menu „Dodaj etap” liczy pozycję od ekranu) — sprawdzone. */
/* v15: kolumna listy (pasek + rama listy) = kontener `lista-projektow`; pasek i rama to dwa osobne bloki jeden pod drugim. */
.project-main-grid { display: grid; gap: var(--s-3); align-content: start; min-width: 0; container: lista-projektow / inline-size; }
/* --- Kafel projektu --- */
.project-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--cien-1); overflow: hidden; transition: border-color var(--szybko), box-shadow var(--szybko); }
.project-tile:hover { border-color: var(--line-strong); box-shadow: var(--cien-2); }
/* --- Kwota „razem” (POPR2-n11): liczba do prawej, pod nią krótka notka („18 pozycji bez ceny”, obieg wyceny).
   PZ8 (v15 b20): krótka notka „N pozycji bez ceny” stoi w całości w jednej linii jak we wzorze (.cena-k .bez) — kolumna kwoty
   dopasowuje się do niej (było: ucięta „18 pozycji bez ce…” w kolumnie 112 px na tablecie i telefonie poziomo, gdzie nie ma dymka).
   Dłuższa notka (z obiegiem wyceny) nie poszerza kolumny (`contain: inline-size`): na komputerze ucina się wielokropkiem, pełny
   napis w dymku; na dotyku, gdzie dymka nie ma, zawija się do kolejnej linii. Rozbicie kwoty: dymek kwoty i karta projektu. --- */
.prow-kwota { grid-column: kwota; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* PK1 (b18): kwota jak we wzorze (.cena-k) — 16 px / 600, waluta 12 px szara. */
.prow-kwota > b { font-size: var(--t-md); font-weight: var(--w-bold); white-space: nowrap; }
.prow-kwota > b .kwota-waluta { color: var(--text-faint); font-size: var(--t-xs); }
.prow-kwota > span { white-space: nowrap; }
.prow-kwota > span:is(.prow-obieg-wyceny, [data-obieg-wyceny-licznik]) { contain: inline-size; width: 100%; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="tablet"] .prow-kwota > span:is(.prow-obieg-wyceny, [data-obieg-wyceny-licznik]) { overflow: visible; white-space: normal; line-height: 1.3; }
/* Napis zamiast kwoty — dwa stany wyceny ze słownika (DOKUMENTACJA/SLOWNIK-NAZW.md §1): „brak wyceny” (nic nie
   policzone, POPR-n12) i „wycena w przygotowaniu” (policzone, czeka na zatwierdzenie i zwolnienie — DECYZJA 3), także
   prowizja „nie ustawiona”. POPR2-n12: JEDEN wygląd dla wszystkich — informacja, nie kwota i nie ostrzeżenie (szary,
   zwykła waga); do dziś „w przygotowaniu” był pomarańczowy i pogrubiony, a „brak wyceny” szary — obok siebie na liście
   wyglądały jak dwie różne rzeczy. Napis może zawinąć się w dwie linie w wąskiej kolumnie. */
.prow-kwota b:is(.kwota-w-przygotowaniu, .kwota-brak) { white-space: normal; font-size: var(--t-sm); font-weight: var(--w-regular); line-height: 1.3; color: var(--text-faint); }
/* „18 pozycji bez ceny” (KAL-14) i „2 zestawienia do zatwierdzenia” (DECYZJA 3) pod kwotą — zwykłe litery,
   kolor błędu / „w drodze”. */
.prow-obieg-wyceny, .prow-bez-ceny { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--warn-strong); }
.prow-bez-ceny { color: var(--danger); }
/* --- Rozwinięte etapy --- */
/* UKŁAD ELASTYCZNY, NIE SIATKA — 1:1 z v8 (`.project-row .tile-stage-list`).
   Siatka `repeat(auto-fit, minmax(240px, 1fr))` rozciągała POJEDYNCZY etap
   na całą szerokość karty: zmierzone 1562.8 px zamiast maksymalnych 360 px.
   Przy jednym albo dwóch etapach — czyli w większości projektów — kafelek
   wyglądał jak pusty pas przez cały ekran. v8 daje `flex: 1 1 258px`
   z widełkami 258-360 px, więc kafelki rosną tylko do rozsądnej szerokości,
   a nadmiar zawijają do kolejnego rzędu. Odstęp 6 px, też jak w v8. */
.tile-stage-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.tile-stage-list > .tile-stage-item { flex: 1 1 258px; min-width: 258px; max-width: 360px; }
.tile-stage-item { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* Kolorowy pasek etapu. JS ustawia zmienną `--stage` na rodzicu
   (public/js/widoki/projekty-lista.js: style="--stage:${color}"), NIE `--ton`.
   Przez czytanie złej nazwy wszystkie paski etapów były szare. */
/* Ujednolicenie 11.08.2026 — pasek akcentu z tokenu --s-1 (ta sama szerokość
   co wszystkie pozostałe paski w aplikacji; wartość bez zmian: 4 px). */
.tile-stage-accent { flex: 0 0 var(--s-1); background: var(--stage, var(--line-strong)); }
.tile-stage-main { flex: 1; min-width: 0; padding: var(--s-2) var(--s-3); }
/* Etapy w karcie projektu (komputer): klikalne wiersze reagują na kursor (na telefonie nie ma najechania). */
:root:not([data-ui="mobile"]) .mprojekt-etapy :is(.tile-stage-main[data-stage-expand], .tile-design-head, .tile-constr-open) { cursor: pointer; }
:root:not([data-ui="mobile"]) .mprojekt-etapy .tile-design-count { letter-spacing: normal; text-transform: none; }
:root:not([data-ui="mobile"]) .mprojekt-etapy :is(.tile-stage-row:hover .tile-stage-name, .tile-design-head:hover .tile-design-label, .tile-constr-open:hover .tile-constr-name) { color: var(--accent-strong); }
/* --- Projekt z aktywną gwarancją — subtelne wyróżnienie --- */
/* Kropka w kolorze Gwarancji przed numerem projektu (wiersz listy i wizytówka) — ten sam spokojny znak co w kaflach Pulpitu
   po W2 (02ea1ff). Był gruby kolorowy pasek z lewej krawędzi kafla (W2/E1, 27.09). */
.pl-wiersz.is-warranty-active .pl-nr::before, .mkarta.is-warranty-active .mkarta-nr::before { content: ""; display: inline-block; width: var(--s-2); height: var(--s-2); margin-right: var(--s-2); border-radius: var(--r-pill); background: var(--etap-gwarancja); vertical-align: .08em; }
/* --- Rama listy i karty projektów (z dawnego 28, K17) --- */
/* POPR-n11: overflow „clip” zamiast „hidden” (tu i w .project-table) — przycina tak samo, ale nie robi z ramki
   osobnego pojemnika przewijania, więc pasek nagłówków listy (position: sticky) zostaje u góry przy przewijaniu. */
.main-grid { display: grid; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--s-3); align-items: start; padding: 2px; }
.empty-cards { grid-column: 1 / -1; padding: var(--s-7); color: var(--text-muted); text-align: center; }
:where(:root[data-ui="mobile"]) .project-cards { grid-template-columns: minmax(0, 1fr); }
/* „Pokaż kolejne 50” pod listą (każdy tryb). */
.project-main-grid .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.projekty-kolejne { min-width: 180px; }
/* POPR-n11: strona projektu — znak, że pełne dane (etapy, konstrukcje) jeszcze się wczytują. */
.mprojekt-wczytuje { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); margin-bottom: var(--s-2); padding: 0 var(--s-4); border-radius: var(--r); background: var(--surface); color: var(--text-muted); font-size: var(--t-sm); }
.mprojekt-wczytuje-kolko { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: mprojekt-obrot .8s linear infinite; }
@keyframes mprojekt-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mprojekt-wczytuje-kolko { animation-duration: 2.4s; } }