/* ============================================================================ 11-kalkulator-wynik.css — okno „Kalkulator kosztów projektu”, część 2 z 2 ---------------------------------------------------------------------------- Ciąg dalszy 11-kalkulator.css (ładowany ZARAZ po nim — ta sama kolejność reguł co w jednym pliku): 8. księga wyniku (kolumna 4), 9. pomoc „Jak liczone są koszty”, 10. znaczek rozwijania, 11. okno „Kalkulacja” i pola wspólne, 12. responsywność (progi 1280 / 980 / telefon) i reszta. Podział z K20b (v14): jeden plik miał 1090 linii, limit dla arkusza to 800. ============================================================================ */ /* === 8. KOLUMNA 4 — KSIĘGA WYNIKU ========================================= JEDEN system wierszy dla całej kolumny (monolit 26108): etykieta wyszarzona z lewej, kwota tabularna z prawej, oba w JEDNYM rzędzie siatki. KPI NIE jest tu kafelkiem z wielką liczbą — reguła bazowa 9720 tak mówi, ale blok premium ją nadpisuje i to on decyduje o wyglądzie v8. */ .project-costs-results { display: grid; align-content: start; gap: var(--s-3); line-height: 1.28; } .project-costs-results .form-panel-head { margin-bottom: var(--s-1); } .project-costs-results .form-panel-head h3 { color: var(--text); font-size: var(--t-base); font-weight: var(--w-heavy); } .project-cost-summary-panel { position: relative; display: grid; align-content: start; gap: var(--s-2); } .project-cost-results-compact { display: grid; } .project-cost-result-block { padding: var(--s-2); margin-bottom: var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); } .project-cost-result-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1); font-size: var(--t-xs); font-weight: var(--w-bold); } .project-cost-result-section-title > strong { font-size: var(--pc-wartosc); font-variant-numeric: tabular-nums; text-transform: none; white-space: nowrap; } /* Trzy rodzaje wierszy, jeden wygląd. */ /* ⛔ NIE DOKŁADAĆ TU `.project-cost-result-card > summary` — poprawka 13.08.2026. Ta wspólna reguła narzucała DWIE kratki (nazwa · kwota), a nagłówek karty ma TRZY (strzałka · nazwa · kwota) i jest mniej specyficzny, więc przegrywał. Skutkiem był trzeci element wpadający do kratki obok strzałki i strzałka NA napisie. */ .project-cost-project-line, .project-cost-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); min-height: 0; padding: var(--s-1) 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; list-style: none; cursor: default; } .project-cost-result-card > summary { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); min-height: 0; padding: var(--s-1) 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; list-style: none; cursor: pointer; } /* ⛔ NIE DOKŁADAĆ TU `.project-cost-result-card > summary > span` — poprawka 13.08.2026. Ta wspólna reguła wpychała KAŻDY span nagłówka karty do kratki nr 1, czyli STRZAŁKĘ i NAZWĘ w to samo miejsce — strzałka rysowała się NA napisie („Main Play Area"). Nagłówek karty ma trzy kratki: strzałka · nazwa · kwota — ustawione osobno poniżej. */ .project-cost-project-line > span, .project-cost-kpi > span { grid-column: 1; grid-row: 1; color: var(--text-muted); font-size: var(--pc-etykieta); font-weight: var(--w-bold); letter-spacing: 0; line-height: 1.3; text-transform: none; } .project-cost-result-card > summary > span.project-cost-tree-chevron { grid-column: 1; grid-row: 1; } .project-cost-result-card > summary > span.project-cost-expand-name { grid-column: 2; grid-row: 1; color: var(--text-muted); font-size: var(--pc-etykieta); font-weight: var(--w-bold); line-height: 1.3; } .project-cost-project-line > strong, .project-cost-kpi > strong { grid-column: 2; grid-row: 1; color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; line-height: 1.3; text-align: right; white-space: nowrap; } .project-cost-result-card > summary > strong { grid-column: 3; grid-row: 1; color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; line-height: 1.3; text-align: right; white-space: nowrap; } /* Podpisy pod wierszami ukryte — dzięki temu wszystkie wiersze mają tę samą wysokość i kolumna czyta się jak rachunek. */ .project-cost-project-line > small, .project-cost-kpi > small { display: none; } /* POPR-n17: wyjątek — pod „Cena netto” i „Cena dla klienta” podpis zostaje: mówi, czym się różnią (prowizja i rabat). */ .project-cost-kpi-sum > small { display: block; grid-column: 1 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.3; } /* Cena brutto jest już na dole jako „Razem" — w KPI byłaby powtórzeniem. */ .project-cost-kpi:has(> strong[data-project-cost-gross-total]) { display: none; } /* Kolor niesie znaczenie: zysk zielony (--zysk), koszt czerwony (--koszt), brak BOM pomarańczowy (--brak-bom) — decyzja właściciela 19.10.2026; tokeny: 1-podstawa/04b-tokeny-koszt-zysk-brak.css, reguły kosztu: 11l-kalkulator-kolory-koszt-zysk.css. */ .project-cost-kpi.project-cost-kpi-cost > strong { color: var(--koszt); } .project-cost-kpi.positive > strong { color: var(--zysk); } /* Wiersz sumujący KPI — jedyny oddzielony kreską i cięższy. */ .project-cost-kpi-sum { margin-top: 1px; padding-top: var(--s-1); border-top: 1px solid var(--line-strong); } .project-cost-kpi-sum > span, .project-cost-kpi-sum > strong { color: var(--text); font-weight: var(--w-heavy); } .project-cost-kpi-cards { display: grid; gap: var(--s-1); } /* Wiersz pozycji jest rozwijalny: nagłówek plus rozbicie na koszt i zysk. */ .project-cost-expand-head { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; gap: 0 var(--s-1); padding: var(--s-1) 0; list-style: none; cursor: pointer; } .project-cost-expand-head::-webkit-details-marker { display: none; } .project-cost-expand-head > .project-cost-tree-chevron { grid-row: 1; align-self: center; } /* Nazwa konstrukcji zawija się do DWÓCH linii zamiast ucinać się po jednej („Tag Master Arena / Design…” przy 1366–1440 px, prawa kolumna Konstrukcje) — dopiero dłuższa kończy się wielokropkiem w drugiej linii. Kwota stoi przy pierwszej linii (align-items: baseline nagłówka). */ .project-cost-expand-name { display: -webkit-box; grid-column: 2; grid-row: 1; overflow: hidden; font-size: var(--pc-etykieta); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .project-cost-expand-head > strong { grid-column: 3; grid-row: 1; font-size: var(--pc-wartosc); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .project-cost-expand-pct { grid-column: 2 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--t-xs); } .project-cost-bez-zestawienia { display: block; color: var(--brak-bom); font-weight: var(--w-bold); } /* POPR-n17: konstrukcja z ceną 0 bez zestawienia */ /* Tura 5 (ergonomia): kwota konstrukcji z pozycjami bez ceny jest w tym oknie NEUTRALNA (czerwień = błąd, a sama kwota błędem nie jest). Czerwony jest napis „N pozycji bez ceny" przy tej konstrukcji (projectCostNotkaBezCeny), pod „Razem" i w pasku ceny. Poza oknem kosztów reguła z arkusza 27 bez zmian. */ .project-costs-modal .money.money-bom-error { color: inherit; } .pcost-bez-ceny-notka { color: var(--brak-bom); font-weight: var(--w-bold); } small.pcost-bez-ceny-notka { display: block; font-size: var(--pc-etykieta); } /* Rozbicie widoczne dopiero po rozwinięciu; wcięcie zamiast ramki. */ .project-cost-expand-row:not([open]) .project-cost-result-detail { display: none; } .project-cost-result-detail { display: grid; padding: 0 0 var(--s-1) var(--s-5); } .project-cost-result-detail > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-2); } .project-cost-result-detail span { color: var(--text-muted); font-size: var(--pc-etykieta); } .project-cost-result-detail strong { font-size: var(--pc-etykieta); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Zysk zawsze zielony, koszt zawsze czerwony — w całym oknie tak samo (19.10.2026). */ .project-cost-detail-cost > span { color: var(--text-muted); } .project-cost-detail-cost > strong { color: var(--koszt); } .project-cost-detail-margin > span, .project-cost-detail-margin > strong { color: var(--zysk); } .project-cost-detail-subtotal { margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--line); } .project-cost-detail-subtotal > span, .project-cost-detail-subtotal > strong { font-weight: var(--w-bold); } /* Karta konstrukcji i kosztu w wyniku ROZWIJA SIĘ — przywrócone 13.08.2026. Było tu `pointer-events: none` (nie dało się kliknąć) i `display: none` na rozbiciu niezależnie od tego, czy karta jest otwarta. Efekt: strzałka się przekręcała, a koszt i zysk nie pokazywały się wcale. Ukrywaniem przy zamkniętej karcie zajmuje się reguła `.project-cost-expand-row:not([open])` wyżej — ta para była zbędna i psuła. */ .project-cost-result-card { display: block; min-width: 0; border: 0; } .project-cost-result-card > summary { justify-content: space-between; cursor: pointer; } .project-cost-result-card > summary::-webkit-details-marker { display: none; } /* Suma sekcji = jedyna linia, która zamyka blok. */ .project-cost-result-subtotal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--line-strong); } .project-cost-result-subtotal > span { color: var(--text-muted); font-size: var(--pc-etykieta); font-weight: var(--w-medium); } .project-cost-result-subtotal > strong { color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* „Brak aktywnych kosztów" to KAFELEK, nie goły tekst (monolit 10568) — inaczej pusta sekcja wygląda na niedokończoną. */ .project-cost-result-empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: var(--h-tab); overflow: hidden; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text-muted); font-size: var(--pc-etykieta); text-overflow: ellipsis; white-space: nowrap; } /* Rachunek końcowy na dole kolumny wyników. Do tury 5 był przyklejony (sticky) do dołu kolumny, żeby kwota była zawsze na oczach — ale na 1366/1440 px wiersze Podsumowania chowały się pod nim w połowie („Zysk”, „Prowizja handlowca” ucięte kreską VAT). Kwotę i zysk zawsze na oczach trzyma teraz pasek ceny nad stopką, więc blok stoi w zwykłym przepływie, pod Podsumowaniem (tak jak od tury 4 na telefonie). */ .project-cost-invoice-total { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-2); margin-top: 10px; border-top: 2px solid var(--line-strong); background: var(--surface); } .project-cost-summary-vat { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 2px; border: 0; } .project-cost-vat-rate { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; } .project-cost-vat-rate > span { margin: 0; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } /* 64 px dotyczy POLA LICZBOWEGO (stawka VAT, success fee) — nigdy suwaka, który w tym samym wierszu idzie na całą szerokość pod spodem. */ .project-cost-vat-rate > input:not([type="range"]) { width: 64px; text-align: right; font-variant-numeric: tabular-nums; } .project-cost-vat-rate > small { font-size: var(--t-xs); } /* Wiersz VAT jest przez JS oznaczany `.is-hidden`, ale w v8 i tak WIDAĆ go zawsze (monolit 26005 bije `.is-hidden` szczegółowością). Dlatego selektor musi być dwuczłonowy — inaczej wygrywa `.is-hidden` z arkusza 27. */ .project-costs-results .vat-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-2); padding: 2px; } .project-costs-results .vat-line > span { grid-column: 1; color: var(--text-muted); font-size: var(--pc-etykieta); } .project-costs-results .vat-line > strong { grid-column: 2; font-size: var(--pc-wartosc); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; text-align: right; } /* Kwota brutto powtarza to, co pokazuje wiersz „Razem" — dopisek zbędny. */ .project-costs-results .vat-line > small { display: none; } /* CENA DLA KLIENTA — blok sterowania w kolumnie wyników (fee / rabat / budżet / powód). Wejścia dziedziczą wygląd .project-cost-vat-rate (etykieta uppercase + wąski input), wiersze kwot mają rytm .vat-line, ale NEUTRALNE kolory (czerwień jest zarezerwowana dla „Suma"); wiersz końcowy dostaje pełny kolor tekstu i grubszą kreskę jak .project-cost-invoice-total. Zero nowych kolorów i wymiarów poza tokenami. */ /* MIEJSCE: lewa kolumna, pod PROFILEM KOSZTÓW i WERSJĄ KALKULACJI (redesign 12.08.2026). Trzy sekcje sterowania czytają się jak lista kroków: czym liczę → którą wersję → ile dokładam globalnie. Wąska kolumna (320 px), więc pola idą jedno pod drugim. */ .project-cost-profile-title { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } /* align-content: start jest KONIECZNE: kolumna kroku to grid o pełnej wysokości, więc bez tego wiersze bloku rozciągają się na całą wolną przestrzeń (jedna linijka tekstu potrafiła zająć 52 px) i zakres BOM ląduje pod ekranem. */ /* ZWIJANA (details) — inaczej trzy sekcje nad listą konstrukcji zjadały całą kolumnę i przy 1280×720 lista miała wysokość 0 px, czyli nie dało się wybrać konstrukcji. Zamknięta pokazuje to, co najważniejsze: cenę końcową. Rozwija się na kliknięcie. */ /* OD 13.08.2026 blok siedzi w kolumnie edytora (kafel „Cena dla klienta"), a nie w wąskiej kolumnie 1 — nie ma już własnej kreski ani wcięć rodem z tamtej kolumny. Zwykły blok panelu: pola, wiersze kwot, przycisk zapisu. */ /* Podpis zamiast przycisku „Zapisz cenę" — fee i rabat zapisują się same. */ .project-cost-client-price-hint { color: var(--text-faint); font-size: var(--t-xs); } /* Wiersz pola: etykieta | (suwak) | liczba | jednostka. Bez suwaka pierwsza kolumna bierze wolne miejsce, z suwakiem oddaje mu resztę — jeden rytm w obu przypadkach. */ /* Wąska kolumna: etykieta i kwota MUSZĄ zostać w jednym wierszu, inaczej blok pęcznieje i spycha zakres BOM pod ekran. Stąd nowrap + skrócone etykiety. */ /* Kolumna wyników miała 828 px treści przy oknie 720 px — zawsze przewijanie. „Konstrukcje" i „Koszty projektu" są teraz zwijane (details): rozwinięte pokazują pozycje, zwinięte tylko nagłówek. Zawsze widoczne zostaje to, po co się tu patrzy: Podsumowanie, VAT i Razem. Strzałka po prawej mówi, że sekcja się otwiera. */ summary.project-cost-result-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); cursor: pointer; list-style: none; } summary.project-cost-result-section-title::-webkit-details-marker { display: none; } /* Suma stoi w nagłówku, więc widać ją TAKŻE po zwinięciu — sekcja zwinięta ma dawać liczbę do analizy, nie samą nazwę. Kwota po prawej, przed strzałką. */ summary.project-cost-result-section-title > b { margin-left: auto; color: var(--text); font-size: var(--pc-wartosc); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Strzałka jako chevron Lucide (13.09.2026) — znaki ▾/▴ stały obok prawdziwych chevronów „>" wierszy. */ summary.project-cost-result-section-title::after { content: ""; flex: none; width: 14px; height: 14px; margin-left: var(--s-1); background-color: var(--text-muted); -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--szybko) ease; } details.project-cost-result-block[open] > summary.project-cost-result-section-title::after { transform: rotate(180deg); } /* Wynik końcowy — jedyny element, który ma prawo krzyczeć: DUŻA LICZBA w białej grupie, jak na telefonie (W2, 27.09.2026, decyzja z rekomendacji). Był pełnym niebieskim paskiem, który wyglądał jak drugi przycisk obok „Zapisz”. Podpis mały i szary, kwota w kolorze tekstu (dopisek o wadze i dniach montażu — jak dotąd ukryty na obu). Telefon dokłada tylko swoją skalę liczby i miejsce w zakładce „Wynik” (9-telefon/3-kalkulator.css). */ .project-cost-total-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-2) 0 0; color: var(--text); } .project-cost-total-result > span { color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-medium); } .project-cost-total-result > strong { color: var(--text); font-size: var(--t-xl); font-weight: var(--w-heavy); letter-spacing: -.02em; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; } .project-cost-total-result > small { display: none; } /* BUDŻET POD „RAZEM" (13.08.2026, żądanie właściciela) — jedno spojrzenie ma dać odpowiedź „mieścimy się czy nie". Zielono = mieści się, czerwono = przekroczony. */ .project-cost-budget-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); margin-top: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--r); } .project-cost-budget-line > span { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } /* POPR2-n22b: „Pozycje bez ceny” — na telefonie było 11 px (--t-2xs), teraz 12 px; na komputerze 13 px jak treść okna */ .project-cost-budget-line > strong { font-size: var(--t-sm); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .project-cost-budget-line > small { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: var(--w-bold); } .project-cost-budget-line.is-ok { background: var(--ok-soft); } .project-cost-budget-line.is-ok > strong, .project-cost-budget-line.is-ok > small { color: var(--ok-strong); } .project-cost-budget-line.is-over { background: var(--danger-soft); } .project-cost-budget-line.is-over > strong, .project-cost-budget-line.is-over > small { color: var(--danger); } /* === 9. POMOC „Jak liczone są koszty" ===================================== Znak zapytania NIE JEST już tutaj: od 12.08.2026 stoi obok krzyżyka w nagłówku i dokłada go globalnie `dodajPrzyciskPomocy` (styl `.modal-help-btn` w arkuszu wspólnym). Zostaje samo objaśnienie, które ten przycisk pokazuje. */ .project-cost-help-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; } /* Z tokenu, nie surowa czerń — inaczej w trybie ciemnym przyciemniałoby to, co i tak jest ciemne. */ .project-cost-help-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--zaslona-kolor) 45%, transparent); } .project-cost-help-panel { position: relative; max-width: 560px; max-height: 80%; overflow: auto; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-3); } .project-cost-help-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); } .project-cost-help-head > strong { font-size: var(--t-md); font-weight: var(--w-bold); } /* Rozmiary 1:1 z monolitem 26286-26294. */ .project-cost-help-body { padding: 14px 18px 18px; overflow-y: auto; } .project-cost-help-intro { margin: 0 0 var(--s-2); color: var(--text-muted); font-size: var(--t-sm); line-height: 1.45; } .project-cost-help-group { margin: 14px 0 var(--s-1); color: var(--text); font-size: var(--t-2xs); font-weight: var(--w-heavy); } /* Dwie kolumny w proporcji 1 : 1,5 — nazwa pozycji i jej wyjaśnienie. */ .project-cost-help-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: baseline; gap: var(--s-3); padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .project-cost-help-pos { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-width: 0; } .project-cost-help-pos > b { color: var(--text); font-size: var(--t-control); font-weight: var(--w-strong); } .project-cost-help-pos > i { color: var(--text); font-style: normal; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .project-cost-help-note { color: var(--text-muted); font-size: var(--t-sm); line-height: 1.4; } /* „~10%" = wartość zaokrąglona; tooltip pokazuje dokładną. */ .project-cost-pct-approx { cursor: help; } /* === 10. ZNACZEK ROZWIJANIA ============================================== JEDEN znaczek na całe okno (drzewo, konstrukcja, wiersz wyniku): maska SVG na currentColor. Zamknięty = strzałka w prawo, otwarty = w dół. Bez transition na transform — animacja na ::before potrafi go zablokować. */ .project-cost-tree-chevron, .project-cost-construction-toggle-icon { display: inline-grid; place-items: center; } .project-cost-tree-chevron::before, .project-cost-construction-toggle-icon::before, .project-cost-bom-detail-row::before, .project-cost-transport-advice-head::before { content: ""; width: 15px; height: 15px; flex: none; order: -1; transform: rotate(-90deg); background-color: currentColor; color: var(--text-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center / 15px 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center / 15px 15px no-repeat; } .project-cost-design-tree[open] .project-cost-tree-chevron::before, .project-cost-expand-row[open] .project-cost-tree-chevron::before, .project-cost-bom-construction-block[open] > .project-cost-bom-detail-row::before, .project-cost-transport-advice-panel[open] > .project-cost-transport-advice-head::before { transform: rotate(0deg); } /* Przycisk „Marże” (tura 5) to lista rozwijana, nie gałąź drzewa: zamknięty ▾, otwarty ▴. */ .project-cost-construction-toggle .project-cost-construction-toggle-icon::before { transform: none; color: currentColor; } .project-cost-construction-toggle[aria-expanded="true"] .project-cost-construction-toggle-icon::before { transform: rotate(180deg); } /* === 11. OKNO „KALKULACJA" i pola wspólne ================================= Osobne okno spod guzika kalkulatora przy konstrukcji (import BOM). Tu tylko rozmiar i pasek tytułu — wnętrze należy do arkuszy 24 i 27. */ .modal.calculation-modal { --okno-w: 1720px; } .modal.calculation-modal > header > h2 { font-size: var(--t-md); } /* Zamknięcie na koniec paska — to zwykły .icon-button, nie .modal-close. */ .modal.calculation-modal > header > .icon-button { margin-left: auto; } /* Pole kwoty — używane w całej aplikacji: kwota do prawej, a kod waluty albo siedzi w polu jako nakładka (), albo jest osobną listą ( w oknie zamienia się w .combo, więc drugą kolumnę zajmuje wtedy .combo — dlatego szerokość siedzi na SIATCE, nie na polu. */ .currency-field.has-currency-select { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: var(--s-1); } .currency-field.has-currency-select input[data-currency-input] { padding-right: var(--s-3); } /* Kwota liczona automatem: pole zostaje WIDOCZNE, tylko wyszarzone. */ .currency-field.is-readonly input[data-currency-input] { border-color: var(--pole-ramka-zablokowane); background: var(--pole-tlo-zablokowane); color: var(--pole-napis-zablokowane); cursor: not-allowed; } /* Znaczek waluty na polu wyszarzonym stoi na tym samym szarym tle (POPR3-pola). */ .currency-field.is-readonly > span { background: var(--pole-tlo-zablokowane); } /* Trzy kafle „podpis + wartość" nad BOM konstrukcji (suma, pojemność, atrakcje). */ .readout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } .readout-grid > div { display: grid; gap: var(--s-1); min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); } .readout-grid span { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } .readout-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Profil marż w oknie kalkulacji: lista i dwa guziki pod nią. */ .margin-profile-panel { display: grid; gap: var(--s-2); } .margin-profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); } /* ============================================================================ 12. RESPONSYWNOŚĆ — progi 1280 / 980 / telefon (:root[data-ui="mobile"]) K12 (v14): 1280 i 1859,98 to WYJĄTKI od kanonu 600/820/980/1180 — okno kosztów ma szerokość ekranu − 40 px, więc to progi samego okna (4 → 3 kolumny, wąski edytor trasy). Przestawienie na 1180 zmieniłoby wygląd przy 1181–1280 px (sprawdzone przy 1280/1281 i 1859/1860). Opis kanonu: 00-tokens.css. ============================================================================ */ /* Laptop: cztery kolumny się nie mieszczą — zakres i warsztat obok siebie, wynik przez całą szerokość pod spodem. Panel boczny edytora schodzi pod treść. */ @media (max-width: 1280px) { /* `grid-template-rows: auto` przy `height: 100%` i `overflow: hidden` na formularzu dawało zapaść: wynik (auto, ~525 px treści) zabierał całą wysokość okna, a wiersz z zakresem i warsztatem dostawał 0 px — panele znikały, nie dało się wybrać konstrukcji (zmierzone przy 1280×720). Pierwszy wiersz ma mieć gwarantowane minimum, a całe okno przewijać się pionowo, gdy treść nie mieści się na ekranie. */ /* Selektor MUSI być tak samo mocny jak reguła bazowa (.modal.project-costs-modal > form.project-costs-form, linia ~49) — inaczej wygrywa ona i wraca zapaść. */ /* TURA 5 (ergonomia 26.09.2026): na 1280×800 i tablecie 1024×768 zakres i kafle stały w pierwszym wierszu, a edytor sekcji (np. Transport) i wyniki dostawały po ~50–90 px wysokości — w edytorze nie dało się pracować, a Zysku i Ceny dla klienta nie było widać wcale. Teraz jak na komputerze, tylko bez czwartej kolumny: zakres | kafle (pionowo, jak na 1440) | edytor — pierwszy wiersz ma DOKŁADNIE wysokość okna (100 %), każda kolumna przewija się w sobie. Wyniki (rozbicie, VAT, prowizja, rabat) są pod spodem — okno przewija się do nich (przycisk „Rozbicie i VAT” w pasku ceny); drugi wiersz `max-content` — przy `auto` dostawał 0 px, bo pierwszy wiersz zabiera całą wysokość formularza. Cenę dla klienta i zysk pokazuje cały czas pasek ceny nad stopką. */ .modal.project-costs-modal > form.project-costs-form { grid-template-columns: minmax(240px, 300px) minmax(190px, 220px) minmax(0, 1fr); grid-template-rows: 100% max-content; height: auto; max-height: none; overflow-y: auto; } .project-costs-results { grid-column: 1 / -1; } .pcost-pasek-szczegoly { display: inline-flex; } /* Wyniki pod edytorem mają całą szerokość okna — w jednej kolumnie podpis i kwota stały 1100 px od siebie. Dwie kolumny: z lewej konstrukcje i koszty projektu, z prawej Podsumowanie, VAT i Razem. */ .project-cost-summary-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } .project-cost-summary-panel > .project-cost-results-compact { grid-column: 1; grid-row: 1 / span 3; align-self: start; } .project-cost-summary-panel > :not(.project-cost-results-compact) { grid-column: 2; } } /* Tablet: jedna kolumna, okno przewija się w całości; nagłówek łamie się na dwa poziomy, sumy idą pod spód. */ @media (max-width: 980px) { /* Tura 5: selektor tak mocny jak w progu 1280 — wcześniej przegrywał z nim (0,1,0 wobec 0,3,2) i przy 821–980 px zostawał układ dwukolumnowy; teraz naprawdę jedna kolumna, wiersze według treści (max-content — przy `auto` wiersze ściskały się do wysokości okna i sekcje nachodziły na siebie). */ .modal.project-costs-modal > form.project-costs-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; overflow: auto; } .project-cost-scope-panel, .project-cost-category-panel, .project-cost-editor-column, .project-costs-results { overflow: visible; } .project-cost-summary-panel { grid-template-columns: minmax(0, 1fr); } .project-cost-summary-panel > * { grid-column: auto; grid-row: auto; } /* E2 (27.09): próg 1280 ustawia liście konstrukcji `align-self: start` (w siatce = pionowo). Na telefonie panel jest kolumną flex, gdzie `start` znaczy „w poziomie według treści” — lista „Konstrukcje” w zakładce Wynik miała pół szerokości (768) albo kończyła się 25 px przed kwotami powyżej (390). Tu wraca do pełnej szerokości. */ .project-cost-summary-panel > .project-cost-results-compact { align-self: stretch; } .project-cost-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-cost-head-bar { flex-wrap: wrap; gap: var(--s-2); } .pcost-head-standard { display: none; } } /* Telefon: każdy wiersz staje się listą pól, nagłówki kolumn tracą sens. Panel edytora wjeżdża pod kafel kategorii, którego dotknięto. */ :where(:root[data-ui="mobile"]) .project-costs-form { gap: var(--s-2); padding: var(--s-2); } :where(:root[data-ui="mobile"]) .project-cost-version-table, :where(:root[data-ui="mobile"]) .project-cost-construction-metrics { grid-template-columns: minmax(0, 1fr); } :where(:root[data-ui="mobile"]) .project-cost-mobile-panel-slot.has-active-panel { display: block; } /* Na telefonie stopka łamie się między GRUPAMI, a gdy i to nie starcza — w środku grupy. Na desktopie obie zostają w jednym rzędzie (`nowrap` jest wartością domyślną, nikt jej tu nie nadpisuje). */ :where(:root[data-ui="mobile"]) .project-cost-footer, :where(:root[data-ui="mobile"]) .project-cost-footer-group { flex-wrap: wrap; } /* #61, 13.09.2026 (test ścieżek na telefonie): stopka dostaje z `.modal > footer` wyrównanie do PRAWEJ, a „Profil kosztów" (373 px) sam się nie łamał — przy 390 px wystawał w LEWO poza okno, gdzie nie da się przewinąć. Na telefonie: od lewej, grupy łamią się w środku, listy biorą dostępną szerokość, kreski i rozpórka znikają. */ :where(:root[data-ui="mobile"]) .modal > .project-cost-footer { justify-content: flex-start; } :where(:root[data-ui="mobile"]) .project-cost-profile-tools, :where(:root[data-ui="mobile"]) .project-cost-profile-controls { flex-wrap: wrap; min-width: 0; max-width: 100%; } :where(:root[data-ui="mobile"]) .project-cost-footer :is(.project-cost-profile-controls > select, .combo) { flex: 1 1 140px; min-width: 0; max-width: 100%; } :where(:root[data-ui="mobile"]) .project-cost-footer-sep, :where(:root[data-ui="mobile"]) .project-cost-footer-spacer { display: none; } /* TABLET DOTYKOWY (tura 5, ergonomia 26.09.2026) — tryb :root[data-ui="tablet"] (ekran dotykowy szerszy niż 820 px, np. tablet w poziomie; próg bez zmian, ustawia go responsive.js). Na komputerze okno jest gęste celowo (kontrolki 27/32 px, podpisy 9–11 px), ale palcem 42 z 48 celów było mniejszych niż 40 px, a teksty schodziły do 9,5 px. Tylko w tym oknie: te same tokeny z większymi wartościami — każda kontrolka 40 px, najmniejszy tekst 12 px — plus kilka miejsc, które mają wymiar wpisany na sztywno. */ /* RM7 (v15 b14): bez własnych liczb — kontrolki biorą 44 px z tokenów tabletu (wzór: --h-k 44 px na dotyku), pismo ze skali wzoru. */ :root[data-ui="tablet"] .modal.project-costs-modal { --t-control: var(--t-sm); } :root[data-ui="tablet"] .project-costs-modal :is(.project-cost-category-card, .project-cost-result-card > summary, summary.project-cost-result-section-title, .project-cost-bom-detail-row, .project-cost-construction-name, .checkbox-line, .project-cost-category-margin-switch, .project-cost-vat-rate) { min-height: 40px; } :root[data-ui="tablet"] .project-costs-modal :is(.project-cost-construction-name, .project-cost-category-margin-switch.pcost-w-cenie) { display: inline-flex; align-items: center; } :root[data-ui="tablet"] .modal .project-cost-category-margin .project-cost-category-margin-input > input { height: 40px; } /* Suwak: pasek zostaje cienki, rośnie tylko pole chwytu. */ :root[data-ui="tablet"] .modal.project-costs-modal input[type="range"]:not([type="checkbox"]):not([type="radio"]) { height: 40px; } :root[data-ui="tablet"] .project-costs-modal .modal-help-btn { width: 40px; height: 40px; } :root[data-ui="tablet"] .project-costs-modal .project-cost-bom-button { min-height: 40px; } /* =========================================================================== PANEL „CENA DLA KLIENTA" — układ wzoru (v15 b19 ZK1; wzór .k-cpola, .k-cwiersze, .k-cnotka, .k-chint): dwa pola obok siebie (Rabat % z suwakiem | Rabat kwotą), wiersze kwot w ramce z wyróżnionym wierszem końcowym, pod nimi tabela „Prowizja w konstrukcjach”, czerwona notka o pozycjach bez ceny, podpowiedzi i przyciski analiz. =========================================================================== */ .project-cost-client-price-panel .project-cost-subpanel { padding: 0; border: 0; background: transparent; } .project-cost-client-price, .project-cost-client-price > [data-client-price-rows] { display: flex; flex-direction: column; gap: var(--s-3); } .project-cost-client-price-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); } .project-cost-client-price-inputs > label { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; } .project-cost-client-price-inputs > label > span { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); } .modal .project-cost-client-price-inputs > label > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { width: 100%; height: var(--h-control); min-height: 0; padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--t-base); font-weight: var(--w-strong); text-align: right; font-variant-numeric: tabular-nums; } .project-cost-client-price-inputs > label:not(:has(input[type="range"])) > input { grid-column: 1 / 3; } .project-cost-client-price-inputs > label > small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); } .project-cost-client-price-inputs > label > input[type="range"].project-cost-margin-slider { width: 100%; min-width: 0; } .pcost-cena-wiersze { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); } .project-cost-client-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); font-size: var(--t-base); line-height: 1.4; } .project-cost-client-price-row + .project-cost-client-price-row { border-top: 1px solid var(--line-soft); } .project-cost-client-price-row > span { min-width: 0; color: var(--text-muted); } .project-cost-client-price-row > strong { color: var(--text); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .project-cost-client-price-row.is-final { background: var(--accent-soft); } .project-cost-client-price-row.is-final > span { color: var(--text); font-weight: var(--w-strong); } .project-cost-client-price-row.is-final > strong { color: var(--accent-strong); font-family: var(--font-tytul); font-size: var(--t-lg); } .project-cost-client-price-row em { margin-left: var(--s-1); font-size: var(--t-xs); font-style: normal; } .project-cost-client-price [data-pozycje-bez-ceny] { display: block; color: var(--brak-bom); font-size: var(--t-sm); font-weight: var(--w-bold); } /* Tabela „Prowizja w konstrukcjach” w panelu (wzór: sekcja z tabelą Konstrukcja | Stawka | Prowizja). */ .project-cost-client-price table[data-prowizja-konstrukcji-tabela] { display: block; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--t-sm); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] > caption { display: block; margin-bottom: var(--s-2); color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); text-align: left; } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] > :is(thead, tbody) { display: block; border: 1px solid var(--line-soft); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] > thead { border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] > tbody { border-radius: 0 0 var(--r-sm) var(--r-sm); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] tr { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; align-items: center; gap: var(--s-2); padding: var(--s-2); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] thead tr { padding: var(--s-1) var(--s-2); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] tbody tr + tr { border-top: 1px solid var(--line-soft); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] :is(th, td) { position: static; padding: 0; border: 0; background: transparent; font-size: var(--t-sm); font-weight: var(--w-regular); text-align: left; white-space: normal; } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] thead th { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] tbody th { color: var(--text); font-weight: var(--w-bold); } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] td { text-align: right; font-variant-numeric: tabular-nums; } .project-cost-client-price table[data-prowizja-konstrukcji-tabela] td:last-child { color: var(--warn-strong); font-weight: var(--w-strong); } /* KWOTY KONSTRUKCJI pod marżami (12.08.2026) — przeniesione z okna „Kalkulacja", gdzie stały obok zdublowanych pól marż. Tu są wyłącznie do czytania: płaska lista etykieta → kwota, bez ramek i kart, żeby nie konkurowała z suwakami. */ .project-cost-version-kwoty { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* tura 5: w wąskiej kolumnie Koszt i Zysk jeden pod drugim, kwota się nie łamie */ gap: var(--s-1); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); } .project-cost-version-kafel { display: grid; gap: 1px; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); } .project-cost-version-kafel > span { color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-bold); } .project-cost-version-kafel > strong { color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; } .project-cost-version-kafel.is-profit > strong { color: var(--zysk); } .project-cost-version-kwota { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-2); } .project-cost-version-kwota > span { overflow: hidden; color: var(--text); font-size: var(--t-xs); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; } .project-cost-version-kwota > strong { color: var(--text); font-size: var(--t-base); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; } .project-cost-version-kwota.is-final { margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--line-strong); } /* Notka w oknie BOM po wyprowadzeniu stamtąd marż i kwot. */ .calculation-margins-moved { padding: var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text-muted); font-size: var(--t-xs); } /* Przycisk BOM w rogu konstrukcji — napis, nie ikona (12.08.2026). Pozycja ta sama co dawniej ikona; szerokość z treści, żeby nie ucinał napisu. */ .project-cost-bom-button { position: absolute; top: 6px; right: 6px; z-index: 3; min-height: 24px; padding: 2px var(--s-3); font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .06em; } /* Ostrzeżenie „kategoria wyłączona — liczby poglądowe" (13.08.2026). Panele montażu i przejazdu pokazują dni, noclegi i koszt hotelu także przy wyłączonej kategorii — bez tego napisu handlowiec mógł wysłać ofertę przekonany, że montaż jest w cenie. */ .project-cost-poza-wycena { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); padding: var(--s-2); border: 1px solid var(--warn-strong); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn-strong) 10%, transparent); color: var(--warn-strong); font-size: var(--pc-etykieta); } .project-cost-poza-wycena .icon { flex: 0 0 auto; background-color: var(--warn-strong); } /* DECYZJA 1 (26.09.2026): „Cena zamrożona przy sprzedaży…” — ten sam spokojny pas ostrzeżenia co wyżej, w kolumnie wyników (informacja o cenie wg kartoteki) i w panelu marż sprzedanej konstrukcji. */ .project-cost-cena-zamrozona-info, .project-cost-cena-zamrozona-notka { margin: 0 0 var(--s-2); padding: var(--s-2); border: 1px solid var(--warn-strong); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn-strong) 10%, transparent); color: var(--warn-strong); font-size: var(--pc-etykieta); line-height: var(--lh-tight); } .project-cost-cena-zamrozona-info strong { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Ostrzeżenie „ekipa nie ma stawki za tę jednostkę" w rozpisce montażu (13.08.2026). Wiersz i cena zostają — od tych godzin zależą dni i noclegi — ale musi być widać, że policzono stawką z innej jednostki. */ .project-cost-rate-row.is-rate-missing > td { background: var(--danger-soft); } /* POPR-n45: tło zamiast czerwonej kreski z lewej */ .project-cost-rate-alert { display: block; margin-top: 2px; color: var(--danger); font-size: var(--pc-etykieta); line-height: 1.3; white-space: normal; } /* Podpis źródła metrów montażu (przegląd 26.09). ZK7 (wzór .k-tbn small): stoi W TEJ SAMEJ linii co stawka („1,55 m / os. / h · m = metry montażu…”), tym samym szarym pismem — bez własnego wyglądu; klasa zostaje jako znacznik dymka. */ /* Kratka „Można piętrować" — dziś tylko informacja, nie wchodzi do wyceny (13.08.2026). */ .checkbox-line.is-informacyjne { align-items: flex-start; color: var(--text-muted); } .pole-informacyjne { display: block; width: 100%; margin-top: 2px; color: var(--text-muted); font-size: var(--pc-etykieta); font-style: italic; line-height: 1.3; white-space: normal; } /* --- Okno odcinka trasy (z dawnego 28, K17) --- */ .route-segment-popup { --okno-w: 470px; } .route-segment-popup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); } .route-segment-popup-head h2 { margin: 0; font-size: var(--t-md); font-weight: var(--w-bold); } .route-segment-popup-body { display: grid; gap: var(--s-3); padding: var(--s-4); } .route-segment-popup-addresses { display: grid; gap: var(--s-3); } .route-segment-popup-km { display: flex; align-items: center; gap: var(--s-3); } .route-segment-popup-km[hidden] { display: none; } .route-segment-popup-km-val { font-size: var(--t-md); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; } @media (max-width: 980px) { .project-cost-center-panel { overflow: visible; } } :where(:root[data-ui="mobile"]) .project-cost-calculator-head h2 { max-width: calc(100vw / var(--skala-ui) - 82px); overflow: hidden; font-size: var(--t-md); text-overflow: ellipsis; white-space: nowrap; }