/* ============================================================================ 9-telefon/3-kalkulator.css — TELEFON: OKNO KOSZTÓW (zakładki Zakres / Koszty / Wynik, stopka, pasek ceny) ---------------------------------------------------------------------------- Część domu telefonu (K18, v14, 26.09.2026) — zasady i kolejność plików: 9-telefon/1-podstawa.css. Działa wyłącznie przy :root[data-ui="mobile"]. ============================================================================ */ /* ============================ 1. UKŁAD OKNA KOSZTÓW ======================= */ /* Skan 13.09: reguła z progu 1280 px ma wagę .modal.project-costs-modal > form… i na telefonie zostawiała DWIE kolumny (druga wystawała za prawą krawędź), a stopka z sześcioma kontrolkami zajmowała pół ekranu. Na telefonie: jedna kolumna, trzy zakładki (Zakres / Koszty / Wynik — wstawia je public/js/ui/aplikacja-mobilna.js), stopka: „Zapisz" + „Opcje" rozwijające resztę. */ :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > form.project-costs-form { display: flex; flex-direction: column; gap: var(--s-3); height: auto; min-height: 0; padding: var(--s-3); overflow-y: auto; } :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > form.project-costs-form > * { width: 100%; min-width: 0; max-height: none; } :root[data-ui="mobile"] .pcost-zakladki-mobilne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); flex: none; margin: 0 var(--s-3) var(--s-2); padding: var(--s-1); border-radius: var(--r-pill); background: var(--surface-2); } :root[data-ui="mobile"] .pcost-zakladki-mobilne > button { height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-size: var(--t-base); font-weight: var(--w-bold); } :root[data-ui="mobile"] .pcost-zakladki-mobilne > button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); } :root[data-ui="mobile"] form.project-costs-form[data-mobilna-zakladka] > :is(.project-cost-scope-panel, .project-cost-category-panel, .project-cost-editor-column, .project-costs-results) { display: none; } :root[data-ui="mobile"] form.project-costs-form[data-mobilna-zakladka="zakres"] > .project-cost-scope-panel, :root[data-ui="mobile"] form.project-costs-form[data-mobilna-zakladka="koszty"] > .project-cost-category-panel, :root[data-ui="mobile"] form.project-costs-form[data-mobilna-zakladka="wynik"] > .project-costs-results { display: block; } :root[data-ui="mobile"] .project-cost-category-grid { grid-template-columns: minmax(0, 1fr); } /* Zakładka „Wynik": przyklejony blok VAT / RAZEM (na komputerze stoi u dołu kolumny) zasłaniał na telefonie Zysk, Cenę netto i Cenę dla klienta. Tu stoi w zwykłym przepływie, pod podsumowaniem. */ :root[data-ui="mobile"] form.project-costs-form .project-cost-invoice-total { position: static; display: flex; flex-direction: column; } /* Stopka zwinięta: sama grupa z „Zapisz" i przełącznik opcji. */ :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer { gap: var(--s-2); } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer[data-mobilna-stopka]:not(.is-opcje-otwarte) > :not(.pcost-opcje-przelacznik):not(.pcost-grupa-zapisz) { display: none; } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer[data-mobilna-stopka] > .pcost-opcje-przelacznik { flex: 0 0 auto; min-width: 84px; height: 48px; } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer[data-mobilna-stopka] > .pcost-grupa-zapisz { flex: 1 1 0; } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer[data-mobilna-stopka] > .pcost-grupa-zapisz > .button { flex: 1 1 auto; height: 48px; } /* POPR2-n22: telefon poziomo — stopka kosztów jak każda stopka okna poziomo: przyciski 44 px, mniejsze wcięcia (2-okna.css). */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > .project-cost-footer[data-mobilna-stopka] > .pcost-opcje-przelacznik, :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > .project-cost-footer[data-mobilna-stopka] > .pcost-grupa-zapisz > .button { height: 44px; min-height: 44px; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > .project-cost-footer { padding-block: var(--s-2) calc(var(--s-2) + var(--bezpieczny-dol)); } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer.is-opcje-otwarte { max-height: 70dvh; overflow-y: auto; box-shadow: var(--cien-3); } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer.is-opcje-otwarte > :is(.project-cost-profile-tools, .project-cost-footer-group) { flex: 1 1 100%; } /* Rozwinięte opcje wchodzą NAD dolny rząd — „Zwiń" i „Zapisz" zostają pod kciukiem tam, gdzie były. */ :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer.is-opcje-otwarte > :is(.pcost-opcje-przelacznik, .pcost-grupa-zapisz) { order: 10; } :root[data-ui="mobile"] #modal-root .modal > .project-cost-footer.is-opcje-otwarte > .pcost-grupa-zapisz.project-cost-footer-group { flex: 1 1 0; } /* Wiersz konstrukcji w „Produkcja / BOM": na wąskim ekranie flex-wrap zrzucał strzałkę do osobnej linii, a kwotę raz pod nazwę, raz obok. Siatka: strzałka | nazwa, kwota zawsze pod nazwą. */ :root[data-ui="mobile"] .project-cost-bom-detail-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; column-gap: var(--s-2); row-gap: 2px; padding: var(--s-2) 0; } :root[data-ui="mobile"] .project-cost-bom-detail-row::before { grid-column: 1; grid-row: 1; margin-top: 3px; } :root[data-ui="mobile"] .project-cost-bom-detail-row > span { grid-column: 2; font-size: var(--t-base); line-height: 1.3; } :root[data-ui="mobile"] .project-cost-bom-detail-row > strong { grid-column: 2; margin-left: 0; font-size: var(--t-sm); } /* Pasek ceny (tura 5, ergonomia): w zakładkach „Zakres" i „Koszty" stoi nad stopką — zmieniając marżę widać cenę dla klienta i zysk. W „Wynik" niepotrzebny (tam na górze duże „Razem"), a przy otwartych „Opcjach" ustępuje miejsca arkuszowi. W pionie: podpis nad kwotą, zysk z lewej, cena z prawej. */ :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > form.project-costs-form[data-mobilna-zakladka="wynik"] ~ .project-cost-price-bar, :root[data-ui="mobile"] #modal-root .modal.project-costs-modal:has(> .project-cost-footer.is-opcje-otwarte) > .project-cost-price-bar { display: none; } :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > .project-cost-price-bar:not(.pcost-pasek) { justify-content: space-between; gap: 2px var(--s-3); padding: var(--s-2) var(--s-4); } :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-bez-ceny, :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-minimum { flex: 1 1 100%; } :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-kwota { flex-direction: column; align-items: flex-start; gap: 0; } :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-cena { align-items: flex-end; } :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-kwota > em { display: none; } /* Na telefonie wyniki są w zakładce „Wynik” — przycisk „Rozbicie i VAT” z paska niepotrzebny. */ :root[data-ui="mobile"] .project-cost-price-bar > .pcost-pasek-szczegoly { display: none; } /* Telefon poziomo (390 px wysokości): pasek w jednym wierszu — podpis obok kwoty, jak na komputerze. */ :root[data-ui="mobile"]:where([data-telefon-poziomo]) .project-cost-price-bar > .pcost-pasek-kwota { flex-direction: row; align-items: baseline; gap: var(--s-2); } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .project-cost-price-bar > .pcost-pasek-bez-ceny, :root[data-ui="mobile"]:where([data-telefon-poziomo]) .project-cost-price-bar > .pcost-pasek-minimum { flex: 0 1 auto; } /* Tura 5: arkusz „Opcje" był wyższy niż ekran, a „Zwiń", „Zapisz" i „Generuj prezentację" stały na jego końcu — poza ekranem. W poziomie te trzy przyciski stoją w JEDNYM wierszu przyklejonym do dołu arkusza; profil, wersja i „Przelicz projekt" przewijają się nad nimi. Cień w kolorze tła zakrywa przerwy między przyklejonymi przyciskami, żeby przewijana treść nie prześwitywała. */ :root[data-ui="mobile"]:where([data-telefon-poziomo]) #modal-root .modal > .project-cost-footer.is-opcje-otwarte > :is(.pcost-opcje-przelacznik, .pcost-grupa-zapisz, .project-cost-footer-group:has(.project-cost-presentation-button)) { position: sticky; bottom: 0; z-index: 1; order: 10; box-shadow: 0 0 0 var(--s-2) var(--tlo-telefonu, var(--surface)); } :root[data-ui="mobile"]:where([data-telefon-poziomo]) #modal-root .modal > .project-cost-footer.is-opcje-otwarte > :is(.pcost-grupa-zapisz, .project-cost-footer-group:has(.project-cost-presentation-button)) { background: var(--tlo-telefonu, var(--surface)); } :root[data-ui="mobile"]:where([data-telefon-poziomo]) #modal-root .modal > .project-cost-footer.is-opcje-otwarte > .project-cost-footer-group:has(.project-cost-presentation-button) { flex: 0 1 auto; flex-wrap: nowrap; } /* ============================ 2. ZAKŁADKA „WYNIK” ========================= */ /* Wzorzec: zakładka „Wynik" zaczyna się od jednej dużej liczby. Kolejność w panelu (tylko telefon): Razem (z VAT i budżetem) → Podsumowanie (koszt, zysk, cena) → Konstrukcje i Koszty projektu. „Razem" było pełnym niebieskim paskiem, który wyglądał jak drugi przycisk obok „Zapisz" — teraz to liczba w białej grupie. Kwoty kosztów w nagłówkach grup w kolorze tekstu (czerwień zostaje dla usuwania). */ :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: transparent; } :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel > .project-cost-invoice-total { order: -3; padding: 14px 16px; border: 0; border-radius: var(--grupa-r); background: var(--surface); } :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel > .project-cost-analysis-title { order: -2; margin: 6px 4px 0; padding: 0; border: 0; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; } :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel > .project-cost-kpi-cards { order: -1; padding: 6px 16px; border-radius: var(--grupa-r); background: var(--surface); } /* DECYZJA 1/1b: „Cena zamrożona przy sprzedaży…” / „Projekt sprzedany w całości…” zaraz pod „Podsumowanie”, nad kafelkami — bez tego (order 0) spadała na sam dół zakładki „Wynik”, pod listę konstrukcji, i nie było jej widać. */ :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel > .project-cost-cena-zamrozona-info { order: -2; margin: 0; } /* „Razem”: wygląd (duża liczba, szary podpis) ma już komputer (4-widoki/11-kalkulator-wynik.css) — telefon dokłada tylko miejsce na górze grupy, kreskę pod spodem i swoją skalę pisma. */ :root[data-ui="mobile"] form.project-costs-form .project-cost-total-result { order: -1; margin: 0 0 8px; padding: 0 0 10px; border-bottom: 1px solid var(--kreska-wlos); } :root[data-ui="mobile"] form.project-costs-form .project-cost-total-result > span { font-size: var(--t-sm); font-weight: 500; } :root[data-ui="mobile"] form.project-costs-form .project-cost-total-result > strong { font-size: var(--t-2xl); font-weight: 700; line-height: inherit; } :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel :is(.project-cost-result-head, .project-cost-summary-head) strong { color: var(--text); } :root[data-ui="mobile"] form.project-costs-form .project-cost-summary-panel > .project-cost-results-compact { display: grid; gap: 10px; } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block { padding: 4px 16px 10px; border: 0; border-radius: var(--grupa-r); background: var(--surface); } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block > summary.project-cost-result-section-title { align-items: center; min-height: 48px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--t-md); font-weight: 600; } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block > summary b, :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block > summary b .money, :root[data-ui="mobile"] form.project-costs-form .project-cost-result-subtotal :is(span, strong, strong .money) { color: var(--text); } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-subtotal { border-color: var(--kreska-wlos); } :root[data-ui="mobile"] form.project-costs-form .project-cost-kpi.project-cost-kpi-cost strong { color: var(--text); } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block:not([open]) { padding-bottom: 4px; } :root[data-ui="mobile"] form.project-costs-form .project-cost-result-block[open] > summary.project-cost-result-section-title { margin-bottom: 4px; border-bottom: 1px solid var(--kreska-wlos); } /* ============================ 3. ZAKŁADKA „KOSZTY” — KWOTA KATEGORII ====== */ /* Zakładka „Koszty" w oknie kosztów: karta kategorii pokazuje kwotę (tablet i telefon — na komputerze kwoty stoją w kolumnie wyników obok). Znak „%" przy stawce wchodził na cyfry — pole zostawia mu miejsce. */ :root[data-ui="mobile"] .project-cost-category-card > .project-cost-category-kwota { display: block; grid-column: 2; min-width: 0; font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; } /* v15 K5: przełącznik „Prowizja handlowca: tak/nie” w rozwinięciu konstrukcji — cel dotyku 44 px na telefonie (cały wiersz z napisem). */ :root[data-ui="mobile"] .project-costs-modal [data-prowizja-konstrukcji] .project-cost-category-margin-switch.pcost-w-cenie { min-height: 44px; align-items: center; } /* ============================ 4. PANELE EDYTORA — WYMIARY WZORU (v15 b19, ZK7) ====== */ /* Kanon telefonu (1-podstawa §8) daje etykiecie 13/500 i odstęp 6 px, polu tylko do odczytu szare wypełnienie, liście 38 px na strzałkę. We wzorze panele kosztów mają na telefonie te same wymiary co na tablecie: etykieta 12/600 szara, 4 px nad polem (pole + etykieta = 65 px). */ :root[data-ui="mobile"] .project-cost-editor-column .field { gap: var(--s-1); } :root[data-ui="mobile"] .project-cost-editor-column .field > label { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); } /* Przełączniki z napisem („Powrót”, „Podróż Powrotna ×2”) i AUTO / MANUAL: pismo wzoru 13/400 w kolorze tekstu (etykieta telefonu dawała 13/500 szare). */ :root[data-ui="mobile"] .project-cost-editor-column .project-cost-vat-switch, :root[data-ui="mobile"] .project-cost-route-row > .project-cost-route-quantity-switch { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); } /* Nazwa odcinka (wzór .k-odc): przerywana ramka na jasnoszarym tle, pismo 13 px — także na telefonie. */ :root[data-ui="mobile"] #modal-root .project-cost-editor-column :is([data-route-name], [data-crew-travel-name], [data-cert-travel-name]) { border-style: dashed; border-color: var(--line-strong); background-color: var(--surface-2); color: var(--text); font-size: var(--t-sm); } /* Pole tylko do odczytu i liczba aut z automatu: jasnoszare jak we wzorze; „Koszt ręczny” przy automacie: białe, przygaszone (przygaszenie daje 11-kalkulator.css). */ :root[data-ui="mobile"] #modal-root .project-cost-editor-column :is(.field > input[readonly], input[data-route-quantity][readonly]):not([data-currency-input]) { border-color: var(--pole-ramka); background-color: var(--surface-2); color: var(--text-muted); } :root[data-ui="mobile"] #modal-root .project-cost-editor-column .currency-field.is-readonly input[data-currency-input] { border-color: var(--pole-ramka); background-color: var(--pole-tlo); } /* Lista waluty 66 px: strzałka 4 px od krawędzi, napis od 8 px — inaczej „EUR” się nie mieści. */ :root[data-ui="mobile"] #modal-root .project-cost-editor-column .currency-field input.combo-input { padding-inline: var(--s-2) calc(var(--s-1) + var(--s-4)); background-position: right var(--s-1) center; }