/* ============================================================================ 9-telefon/2-okna.css — TELEFON: OKNA (arkusze pełnoekranowe, potwierdzenia, tabele w oknach, Design, Wiadomości) ---------------------------------------------------------------------------- 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. OKNA = ARKUSZE PEŁNOEKRANOWE ============= */ /* Waga #modal-root bije wszystkie rozmiary okien z arkuszy 05/11/19 (tam same klasy), więc jedna reguła obejmuje każde okno, także dopisane w przyszłości. */ :root[data-ui="mobile"] #modal-root .modal-backdrop { place-items: stretch; padding: 0; backdrop-filter: none; } /* Tło okna, brak ramki: wspólna skórka okna (05-komponenty §3, W1). Tu tylko wymóg ekranu — cały ekran, bez rogu i cienia. */ :root[data-ui="mobile"] #modal-root .modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; } /* Tura 4 (26.09): arkusz wjeżdża od dołu, ale jest od początku NIEPRZEZROCZYSTY. Było też rozjaśnianie (opacity 0 → 1): przez ułamek sekundy — dłużej, gdy telefon rysował ciężkie okno, np. Zadania projektu — przez okno prześwitywała lista pod spodem i napisy nachodziły na siebie. */ @supports (transition-behavior: allow-discrete) { :root[data-ui="mobile"] #modal-root .modal-backdrop:not(.is-suspended) > .modal { transition: transform var(--czas-arkusz) var(--krzywa-arkusz); } @starting-style { :root[data-ui="mobile"] #modal-root .modal-backdrop:not(.is-suspended) > .modal { transform: translateY(24px); } } } /* Nagłówek: jeden rząd, tytuł może zejść do 2 linii, „?” i „×” 44 px (wygląd: 05-komponenty §3, W1). */ :root[data-ui="mobile"] #modal-root .modal > header { min-height: calc(var(--app-bar-h) + var(--bezpieczna-gora)); padding: calc(var(--bezpieczna-gora) + var(--s-2)) var(--s-2) var(--s-2) var(--s-4); gap: var(--s-2); } :root[data-ui="mobile"] #modal-root .modal > header :is(h2, h3) { font-size: var(--t-md); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 23.10.2026 (przegląd telefonu): tytuły okien miały trzy różne wyglądy — 34 okna pismem Onest 16/600, 39 pismem tytułów (Bricolage) 16/600, 4 okna z wzoru Bricolage 19/600. Jeden wygląd: pismo tytułów, 19 px pionowo (jak wzór), 16 px poziomo (nagłówek ma tam jeden wiersz). Reguły okien z wzoru (z nazwą okna) zostają. */ :root[data-ui="mobile"] #modal-root .modal > header :is(h2, h3) { font-family: var(--font-tytul); letter-spacing: var(--ls-tytul); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal > header h2 { font-size: var(--t-lg); } :root[data-ui="mobile"] #modal-root .modal > header p { margin-top: 2px; font-size: var(--t-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Nagłówek z przyciskami tekstowymi (Zadania projektu: „Czas pracy”, „Szablon…”): tytuł zajmuje pierwszy rząd razem z „?” i „×”, a przyciski tekstowe schodzą do drugiego rzędu (bez tego tytuł ściskał się do jednej litery: „Z”). Przycisk „Wróć” zostaje przed tytułem. */ :root[data-ui="mobile"] #modal-root .modal > header:has(> .button:not(.modal-back-button)) { flex-wrap: wrap; } :root[data-ui="mobile"] #modal-root .modal > header:has(> .button:not(.modal-back-button)) > :not(.button, .icon-button, .modal-help-btn) { flex: 1 1 calc(100% - 2 * var(--h-control) - 3 * var(--s-2)); min-width: 8em; } :root[data-ui="mobile"] #modal-root .modal > header:has(> .button:not(.modal-back-button)) > :is(.icon-button, .modal-help-btn) { order: 1; } :root[data-ui="mobile"] #modal-root .modal > header:has(> .button:not(.modal-back-button)) > .button:not(.modal-back-button) { order: 2; } :root[data-ui="mobile"] #modal-root .modal > header .icon-button, :root[data-ui="mobile"] #modal-root .modal > header .modal-help-btn { width: var(--h-control); height: var(--h-control); flex: none; } :root[data-ui="mobile"] #modal-root .modal > form { align-content: start; grid-auto-rows: max-content; padding: var(--s-4); gap: var(--s-4); } /* `align-content: start` (skan 13.09): siatka formularza w oknie na cały ekran rozciągała wiersze na całą wysokość — w „Zapisz wersję" etykieta stała 250 px nad polem, a pole miało 330 px wysokości. `grid-auto-rows: max-content` (POPR-n05, 28.09): wiersz „auto” zaczyna od minimum elementu, a element z własnym przewijaniem (.table-wrap, lista z overflow) ma minimum 0 — gdy formularz był dłuższy niż ekran, taka lista kurczyła się do 0 px (Przyjmij dostawę: „Przyjmuję teraz” 0 px, Zamów: 75 px). Teraz każdy blok ma swoją pełną wysokość, a przewija się cały formularz. */ /* Tabelki kwot w oknie projektu (cena klienta, fee, rabat): etykieta łamie się w swojej kolumnie zamiast rozpychać tabelę — kwoty były ucięte na prawej krawędzi. */ :root[data-ui="mobile"] .cost-version-compare-table :is(th, td) { padding: var(--s-2) var(--s-1); } :root[data-ui="mobile"] .cost-version-compare-table th[scope="row"] { white-space: normal; } /* Stopka w strefie kciuka: przyciski dzielą szerokość, główna akcja po prawej (tło i kreska: 05-komponenty §3, W1). */ :root[data-ui="mobile"] #modal-root .modal > footer { flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--bezpieczny-dol)); box-shadow: none; } :root[data-ui="mobile"] #modal-root .modal > footer > .button, :root[data-ui="mobile"] #modal-root .modal > footer > button { flex: 1 1 auto; min-width: 0; min-height: 48px; height: auto; white-space: normal; line-height: 1.2; } :root[data-ui="mobile"] #modal-root .modal > footer > :is(div, span):not(.spacer) { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--s-2); } :root[data-ui="mobile"] #modal-root .modal > footer > :is(div, span) > .button { flex: 1 1 auto; min-width: 0; min-height: 48px; height: auto; white-space: normal; line-height: 1.2; } /* Skan 13.09: przy `flex: 1 1 0` trzy przyciski („Anuluj / Zapisz zmiany / Generuj prezentację") dostawały po ~110 px i napisy wychodziły poza przyciski. Podstawa = szerokość napisu: co się nie mieści, schodzi do drugiego rzędu i zajmuje go całego. */ :root[data-ui="mobile"] #modal-root .modal > footer .spacer { display: none; } /* Szare tło, białe grupy, przezroczyste powłoki i kolumny edytorów: wspólna skórka okna (19-modale-tresc §0, W1). Na wąskim ekranie kolumny edytorów stoją jedna pod drugą — bez własnych wcięć (grupy 16 px od krawędzi). */ :root[data-ui="mobile"] #modal-root :is(.block-editor-side, .material-editor-side, .supplier-editor-side, .work-service-editor-side, .transport-editor-side, .crew-editor-side, .block-editor-main, .material-editor-main, .supplier-editor-main, .work-service-editor-main, .transport-editor-main, .crew-editor-main, .design-construction-sidebar, .offer-section, .offer-selected-panel, .offer-results-panel) { padding-inline: 0; } /* Okno projektu: biała grupa pól 16 px od krawędzi (jak każda grupa), pola 28 px od krawędzi — jak przed W1. */ :root[data-ui="mobile"] #modal-root .project-card-form { padding: var(--s-4); } /* 24.10.2026 (przegląd telefonu v2): małe przyciski w oknie projektu („Klient”, „Sprawdź populację”) miały 40 px (globalny .button telefonu) — cel dotyku 44 px. */ :root[data-ui="mobile"] #modal-root .project-card-form .button.mini { min-height: var(--h-control); } :root[data-ui="mobile"] #modal-root .modal > footer :is(.button, .ghost-button, .primary-button, .danger-button, button) { min-height: var(--stopka-btn-h); font-size: var(--t-md); } /* POPR2-n22 (28.09.2026): TELEFON POZIOMO (844×390) — na treść okna zostawało 100–140 px (Design: nagłówek 60, stopka 75, wcięcia formularza 32). Nagłówek i stopka zwinięte do jednego wąskiego rzędu: tytuł w jednej linii bez podtytułu, przyciski 44 px (cel dotyku) zamiast 50, mniejsze wcięcia. Dotyczy każdego okna na telefonie poziomo — także Kosztów i Oferty. */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal { --stopka-btn-h: 44px; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > header { align-items: center; min-height: 0; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); } /* poziomo nagłówek ma jeden wiersz: tytuł na wysokości „×” (okna z wzoru miały flex-start — tytuł stał 10 px nad krzyżykiem) */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > header :is(h2, h3) { -webkit-line-clamp: 1; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > header p { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > form { padding-block: var(--s-2); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > footer { padding-block: var(--s-2) calc(var(--s-2) + var(--bezpieczny-dol)); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal > footer :is(.button, .ghost-button, .primary-button, .danger-button, button) { min-height: var(--stopka-btn-h); height: var(--stopka-btn-h); font-size: var(--t-base); } /* ============================ 2. POTWIERDZENIA ============================ */ /* Potwierdzenia = arkusz od dołu, przyciski na całą szerokość. */ :root[data-ui="mobile"] .app-confirm-overlay { place-items: end stretch; padding: 0; } :root[data-ui="mobile"] .app-confirm { width: 100%; max-width: none; border-radius: var(--arkusz-r) var(--arkusz-r) 0 0; padding-bottom: var(--bezpieczny-dol); } @supports (transition-behavior: allow-discrete) { :root[data-ui="mobile"] .app-confirm { transition: transform var(--czas-arkusz) var(--krzywa-arkusz); } @starting-style { :root[data-ui="mobile"] .app-confirm { transform: translateY(100%); } } } :root[data-ui="mobile"] .app-confirm :is(.app-confirm-actions, footer) { flex-wrap: wrap; gap: var(--s-2); } :root[data-ui="mobile"] .app-confirm :is(.app-confirm-actions, footer) > :is(.button, .danger-button, .primary-button, button) { flex: 1 1 0; min-width: 0; height: var(--stopka-btn-h); border-radius: var(--okno-przycisk-r); font-size: var(--t-md); } :root[data-ui="mobile"] .app-confirm-body { padding: var(--s-5) var(--s-5) var(--s-2); } :root[data-ui="mobile"] .app-confirm-actions { padding: var(--s-3) var(--s-4) var(--s-4); } :root[data-ui="mobile"] .app-confirm-title { font-size: var(--t-lg); } /* ============================ 3. TABELE W OKNACH ========================== */ /* Skan 13.09: „Składniki kosztu" bloku (6 kolumn) i „Formy rozliczenia" ekipy na 390 px — listy materiałów miały ~110 px i pokazywały samą strzałkę, pole ilości 27 px, a w ekipach widać było tylko kolumnę nazw. Wiersz = karta: wybór (pierwsza komórka) na całą szerokość, pod nim pola z podpisami i kosz na końcu. */ :root[data-ui="mobile"] #modal-root .component-table { display: block; width: 100%; min-width: 0; } :root[data-ui="mobile"] #modal-root .component-table thead { display: none; } :root[data-ui="mobile"] #modal-root .component-table :is(tbody, tfoot) { display: block; } :root[data-ui="mobile"] #modal-root .component-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } /* width/height: auto — komputerowe `td:nth-child(2) { width: 80px }` i `.compact-data-table td { height: 28px }` robiły z komórek sztywne pudełka, z których pola wychodziły na sąsiednie komórki i na następną kartę. */ :root[data-ui="mobile"] #modal-root .component-table tbody td { display: block; width: auto; height: auto; min-width: 0; padding: 0; border: 0; font-size: var(--t-sm); text-align: left; } :root[data-ui="mobile"] #modal-root .component-table tbody td:first-child { grid-column: 1 / -1; } :root[data-ui="mobile"] #modal-root .component-table tbody td:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; } :root[data-ui="mobile"] #modal-root .component-table tbody td :is(input:not([type="checkbox"]), select, .combo) { width: 100%; min-width: 0; height: var(--h-control); } :root[data-ui="mobile"] #modal-root .component-table .component-mode-toggle { justify-self: start; min-height: var(--h-control); margin-block: calc((var(--h-control) - 1em * var(--lh-base)) / -2); } :root[data-ui="mobile"] #modal-root .measure-line .measure-auto { min-height: var(--h-control); margin-block: calc((var(--h-control) - 1em * var(--lh-base)) / -2); } :root[data-ui="mobile"] #modal-root .modal :is(.project-population-rings, .co-jesli-suwak) input[type="range"]:not([type="checkbox"]):not([type="radio"]) { height: var(--h-control); } /* suwaki: pole dotyku 44 px (było 12) */ :root[data-ui="mobile"] #modal-root .component-table .component-mode-toggle input { width: 20px; height: 20px; } :root[data-ui="mobile"] #modal-root .component-table tbody td:last-child { align-self: end; } /* Formy rozliczenia: dwie listy (jednostka, waluta) w ćwiartkach karty pokazywały pojedyncze litery („n", „E"). Nazwa + kosz w pierwszym rzędzie, pod nimi pola 2 × 2 na pół szerokości. */ :root[data-ui="mobile"] #modal-root .crew-rates-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } :root[data-ui="mobile"] #modal-root .crew-rates-table tbody td:first-child { grid-column: 1 / 3; } :root[data-ui="mobile"] #modal-root .crew-rates-table tbody td:last-child { grid-column: 3; grid-row: 1; } :root[data-ui="mobile"] #modal-root .crew-rates-table tbody td:is(:nth-child(2), :nth-child(4)) { grid-column: 1; } :root[data-ui="mobile"] #modal-root .crew-rates-table tbody td:is(:nth-child(3), :nth-child(5)) { grid-column: 2; } :root[data-ui="mobile"] #modal-root .component-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-2); border-radius: var(--r); background: var(--surface-2); font-weight: var(--w-bold); } :root[data-ui="mobile"] #modal-root .component-table tfoot td { width: auto; height: auto; padding: 0; border: 0; } :root[data-ui="mobile"] #modal-root .component-table tfoot td:empty { display: none; } :root[data-ui="mobile"] #modal-root .block-component-panel .table-wrap, :root[data-ui="mobile"] #modal-root .crew-rates-table { overflow: visible; } /* Okno BOM: tabela sprawdzenia (7+ kolumn o szerokościach w stylu inline) — nagłówki skracały się do 1–3 liter. ERG6-04: pozycja = JEDNA linijka: ilość | kod bloku | status | notatka (była karta ~150 px z pustymi polami A/B/C, 276 pozycji = bardzo długie przewijanie). Puste wymiary znikają, wypełnione stoją pod kodem z podpisem. Przyciski błędu (Ignoruj / Dodaj do Bloków) — w drugiej linijce pod błędną pozycją. Pusta tabela (0 pozycji) nie zostawia samego paska nagłówków. */ /* M6 (18.10.2026): tabela sprawdzenia na telefonie — przeniesiona do 13-zestawienie-okno.css (wzór v99). */ :root[data-ui="mobile"] #modal-root .modal > header:has(> h2 + small) { flex-wrap: wrap; row-gap: 2px; } :root[data-ui="mobile"] #modal-root .modal > header:has(> h2 + small) > h2 { flex: 1 1 0; min-width: 0; } :root[data-ui="mobile"] #modal-root .modal > header > h2 + small { order: 5; flex: 1 1 100%; color: var(--text-muted); } /* Kategorie bloków — tabela trybów liczenia ładunku (3 kolumny ściśnięte do ~100 px, zdania łamane co słowo): każdy tryb to blok — nazwa, pod nią „jak liczy" i „co wypełniasz" na całą szerokość. */ :root[data-ui="mobile"] #modal-root .transport-mode-table, :root[data-ui="mobile"] #modal-root .transport-mode-table tbody { display: block; } :root[data-ui="mobile"] #modal-root .transport-mode-table thead { display: none; } :root[data-ui="mobile"] #modal-root .transport-mode-table tr { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--akt-tlo, transparent); } :root[data-ui="mobile"] #modal-root .transport-mode-table td { padding: 0; border: 0; background: transparent; box-shadow: none; white-space: normal; } :root[data-ui="mobile"] #modal-root .transport-mode-table td:nth-child(3) { color: var(--text-muted); font-size: var(--t-sm); } :root[data-ui="mobile"] #modal-root .transport-mode-table td:nth-child(3)::before { content: "Wypełniasz: "; } /* Tabele kartoteki wewnątrz okien (z polami do wpisania): wiersz = karta z trzema polami obok siebie i koszem; ogólna reguła kart kartotek ucinała pola na prawej krawędzi. */ :root[data-ui="mobile"] #modal-root .catalog-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: var(--s-2); padding: var(--s-2); } :root[data-ui="mobile"] #modal-root .catalog-table tbody td { display: block; min-width: 0; padding: 0; overflow: visible; } :root[data-ui="mobile"] #modal-root .catalog-table tbody td::before { display: block; margin-bottom: 2px; font-size: var(--t-xs); white-space: nowrap; } :root[data-ui="mobile"] #modal-root .catalog-table tbody td input { width: 100%; min-width: 0; } :root[data-ui="mobile"] #modal-root .modal .table-wrap { max-height: none; } /* Nowy wątek — lista osób miała sufit 50vh z własnym przewijaniem, a pod nią pół pustego ekranu. */ :root[data-ui="mobile"] #modal-root .thread-people-list { max-height: none; overflow: visible; } :root[data-ui="mobile"] #modal-root .thread-people-option { min-height: var(--h-control); } /* ============================ 4. DESIGN / KONSTRUKCJA — WYMIARY (menu konstrukcji: 9-telefon/16-konstrukcja-w-design.css) ==== */ /* Menu konstrukcji telefonu (zwijana karta „Design A · Konstrukcje: N”, wzór v99) — DF2, 18.10.2026: dawny rząd chipów przewijany w bok zastąpiony kartą; reguły w 16-konstrukcja-w-design.css, markup: public/js/okna/design.js renderDesignConstructionSidebar. */ /* Wymiary: cztery krótkie liczby po dwie w rzędzie; kolumna edytora bez dodatkowego wcięcia (stała 28 px od krawędzi zamiast 16). */ :root[data-ui="mobile"] #modal-root .construction-editor-grid { padding-inline: 0; } :root[data-ui="mobile"] #modal-root .construction-dimensions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root[data-ui="mobile"] #modal-root .construction-dimensions-grid > .field { min-width: 0; } :root[data-ui="mobile"] #modal-root .construction-dimensions-grid > .field > input { width: 100%; min-width: 0; } /* Kolumna edytora Design bez dodatkowego wcięcia — grupy stoją 16 px od krawędzi jak chipy nad nimi. */ :root[data-ui="mobile"] #modal-root :is(.design-workspace, .design-editor-body, .design-main-layout) { padding-inline: 0; } /* ============================ 5. GWARANCJA ================================ */ /* Okno „Gwarancja": formularz miał własne przewijanie (316 px), czat pod nim 292 px, z czego historia wiadomości dostawała 28 px (resztę zjadało pole pisania). Teraz formularz i czat stoją jeden pod drugim w pełnej wysokości, przewija się całe okno; historia ma rozsądną wysokość i zaczyna od najnowszych. */ /* ============================ 6. WIADOMOŚCI — LISTA → ROZMOWA ============= */ /* Skan 13.09: na telefonie i tablecie hub pokazywał naraz listę (30 % wysokości) i rozmowę pod nią — żadna z nich nie miała miejsca. Jak w komunikatorze: najpierw lista, stuknięcie w rozmowę otwiera ją na cały ekran, „‹ Wiadomości" wraca. Przełącza public/js/ui/aplikacja-mobilna.js (data-mobilny-widok). */ :root[data-ui="mobile"] #modal-root .message-hub[data-mobilny-widok] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } :root[data-ui="mobile"] #modal-root .message-hub[data-mobilny-widok="lista"] > .message-hub-thread, :root[data-ui="mobile"] #modal-root .message-hub[data-mobilny-widok="rozmowa"] > .message-hub-sidebar { display: none; } :root[data-ui="mobile"] #modal-root .message-hub[data-mobilny-widok="lista"] > .message-hub-sidebar { border-bottom: 0; } :root[data-ui="mobile"] #modal-root .message-hub[data-mobilny-widok="rozmowa"] > .message-hub-thread { grid-row: 1 / -1; } :root[data-ui="mobile"] #modal-root .message-hub-thread > .project-chat-panel { height: 100%; } :root[data-ui="mobile"] .mh-wstecz { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; align-self: flex-start; min-height: var(--h-control); padding: 0 var(--s-3) 0 var(--s-2); border: 0; background: transparent; color: var(--accent-strong); font-size: var(--t-base); font-weight: var(--w-bold); } /* v15-b6 CZ8 (wzór): „‹” stoi w wierszu nagłówka rozmowy, z lewej od tytułu (dawniej osobny rząd „‹ Wiadomości” nad rozmową); na telefonie pionowo sama strzałka 44×44, poziomo „‹ Wiadomości”. */ :root[data-ui="mobile"] #modal-root .message-hub-thread { position: relative; } /* ZK7c (wzór .cz-rg, .cz-wstecz): nagłówek rozmowy 68 px (był 56), strzałka 12 px od góry, jej rysunek przy lewej krawędzi przycisku; tytuł zaczyna się 56 px od lewej, „N os.” kończy 8 px od prawej; kreska pod nagłówkiem jak we wzorze, podpis „Wiadomości: N” zwykłym pismem. */ :root[data-ui="mobile"] #modal-root .message-hub-thread > .mh-wstecz { position: absolute; top: var(--s-3); left: var(--s-1); z-index: 2; min-width: 44px; height: 44px; justify-content: flex-start; padding: 0 var(--s-2) 0 var(--s-1); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .message-hub-thread > .mh-wstecz .mh-wstecz-napis { display: none; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .message-hub-thread .project-chat-title { min-height: 68px; padding: var(--s-1) var(--s-2) var(--s-1) 56px; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .message-hub-thread .project-chat-people { padding: var(--s-1) var(--s-2) var(--s-1) 0; } :root[data-ui="mobile"] #modal-root .message-hub-thread :is(.project-chat-title, .project-chat-people) { border-bottom-color: var(--line); } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-title span:last-child { font-weight: var(--w-regular); } :root[data-ui="mobile"] #modal-root .message-hub-thread :is(.mh-nowa-glowa, .message-hub-placeholder) { padding-top: 56px; } :root[data-ui="mobile"] .mh-wstecz .icon { width: 20px; height: 20px; } :root:not([data-ui="mobile"]) .mh-wstecz { display: none; } /* Markup: public/js/czat/centrum-wiadomosci.js (renderMessageHubBody i listy). Lista → rozmowa przełącza public/js/ui/aplikacja-mobilna.js §5. Wzorzec: przełącznik Aktywność / Projekty / Osoby / Szukaj jak segment, filtry jako chipy (aktywny ciemny), szukajka wypełniona, rozmowy jako wiersze w białej grupie. Nagłówek „Aktywność / Projekty…" nad listą powtarzał nazwę zaznaczonego segmentu — na telefonie zostaje sam podpis pod nim. */ :root[data-ui="mobile"] #modal-root .message-hub { background: var(--tlo-telefonu); } /* v15-b6 CZ1: zakładki Wszystkie · Projekty · Osoby (segment okna, 05-komponenty) — na telefonie 44 px, na całą szerokość. */ :root[data-ui="mobile"] #modal-root .mh-glowa { gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2); } :root[data-ui="mobile"] #modal-root .mh-zakladki.segmented { gap: 3px; background: var(--surface-3); } :root[data-ui="mobile"] #modal-root .mh-zakladki > button { min-height: 44px; padding: 0 var(--s-1); font-size: var(--t-sm); } /* ZK7c: odstęp boczny 4 px jak wzór na dotyku */ :root[data-ui="mobile"] #modal-root .mh-wskazowka { padding: 0; font-size: var(--t-xs); } :root[data-ui="mobile"] #modal-root .message-hub-sidebar { border: 0; background: transparent; } :root[data-ui="mobile"] #modal-root .mh-head { padding: 10px 20px 8px; } :root[data-ui="mobile"] #modal-root .mh-head h3 { display: none; } /* W panelu „Do kogo piszesz?” tytuł zostaje (nad listą osób jest tylko „‹ Wiadomości”). */ :root[data-ui="mobile"] #modal-root .mh-nowa-glowa h3 { display: block; font-size: var(--t-lg); } :root[data-ui="mobile"] #modal-root .mh-sub { font-size: var(--t-sm); } /* b55: szukajka nie może się ściskać w kolumnie okna (długa lista osób zgniatała ją do 23 px, pole do 21 px); ZK3: ramka 44 px i promień 8 jak we wzorze czatu (.cz-szuk input). */ :root[data-ui="mobile"] #modal-root .mh-search { flex: none; height: 44px; margin: 0 16px 10px; border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); } /* POPR3-pola: szukajka = zwykłe pole; ZK7c: odstępy i lupa 16 px z 17-czat.css (wzór) */ :root[data-ui="mobile"] #modal-root .mh-glowa .mh-search { margin: 0; } :root[data-ui="mobile"] #modal-root .mh-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { min-height: 0; height: calc(100% + 2px); margin-block: -1px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* ZK4: pole 44 px — zachodzi na kreski ramki */ /* ZK3: podpowiedź „Szukaj: projekt, osoba, treść wiadomości” mieści się w całości jak we wzorze (14 px); przy wpisywaniu wraca 16 px, żeby iPhone nie powiększał strony (ten sam sposób co lista zakresu osi w 7-zadania-tablica-kalendarz.css). */ :root[data-ui="mobile"] #modal-root .mh-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(:focus) { font-size: var(--t-base); } /* Lista: biała grupa, wiersze ≥ 58 px bez kresek (wzór 03.10.2026). */ /* ZK7c (wzór .cz-lista): grupa sięga do dolnego paska (flex 1, bez odstępu pod spodem) — dotąd miała wysokość treści i 12 px odstępu. */ :root[data-ui="mobile"] #modal-root .message-hub-list { flex: 1 1 auto; margin: 0 var(--s-3); padding: 0 var(--s-1) var(--s-2); border-radius: var(--r); background: var(--surface); } :root[data-ui="mobile"] #modal-root .message-hub-conv-meta .avatar-stack .avatar + .avatar { margin-left: -4px; } :root[data-ui="mobile"] #modal-root .message-hub-conv-meta .avatar { --avatar-d: 26px; box-shadow: 0 0 0 2px var(--surface); } :root[data-ui="mobile"] #modal-root .message-hub-list:has(> .message-hub-empty:only-child) { background: transparent; } :root[data-ui="mobile"] #modal-root .hub-act-sect { padding: var(--s-3) var(--s-2) var(--s-1); font-size: var(--t-xs); } :root[data-ui="mobile"] #modal-root .hub-act-row { min-height: 60px; padding: var(--s-2); } /* ZK7c — ROZMOWA na stronie „Czat i wiadomości” jak wzór (.cz-rz, .cz-hist, .cz-m, .cz-pisz, .cz-ed; telefon: @container ≤ 640 px): białe tło rozmowy i obszaru pisania, historia z odstępem 12 px, wiadomość do 88 % szerokości (z awatarem — także własnym), nadawca 13 px, dymek z odstępem 8/12 px; edytor: promień 12, pasek narzędzi z odstępami 4 px (zawija się po „Aa” jak we wzorze, „pełny ekran” przy prawej krawędzi), pole 72 px (dwie linie), pod edytorem 16 px. */ :root[data-ui="mobile"] #modal-root .message-hub-thread :is(.project-chat-panel, .project-chat-compose) { background: var(--surface); } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-history { gap: var(--s-3); padding: var(--s-3); background: var(--surface-2); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .message-hub-thread .chat-message { max-width: 88%; } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-message.own > .avatar { display: inline-grid; } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-bubble { max-width: none; padding: var(--s-2) var(--s-3); } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-sender { font-size: var(--t-sm); } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-people .avatar-stack .avatar { box-shadow: none; } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-people .avatar-stack .avatar + .avatar { margin-left: -6px; } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-compose { padding: var(--s-2) var(--s-3) var(--s-4); border-top-color: var(--line); } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-public-note { gap: var(--s-2); padding: 0; line-height: 1.4; } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-public-note .icon { width: 15px; height: 15px; color: var(--text-faint); } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-compose .rich-editor { border-radius: var(--r); box-shadow: none; } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-compose .rich-editor:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-rich-editor .rich-toolbar { flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); overflow: visible; border-bottom-color: var(--line-soft); -webkit-mask-image: none; mask-image: none; } :root[data-ui="mobile"] #modal-root .message-hub-thread .chat-rich-editor .rich-toolbar :is(button, .rich-image-button, .rich-attach-button) { min-width: 44px; height: 44px; } :root[data-ui="mobile"] #modal-root .message-hub-thread .project-chat-compose .rich-editable { min-height: 72px; padding-block: var(--s-2); padding-left: var(--s-3); } :root[data-ui="mobile"] #modal-root .hub-act-nazwa { font-size: var(--t-base); } :root[data-ui="mobile"] #modal-root .hub-act-prev { font-size: var(--t-sm); } :root[data-ui="mobile"] #modal-root .hub-act-top time { font-size: var(--t-xs); } :root[data-ui="mobile"] #modal-root .message-hub-badge { min-width: 20px; height: 20px; background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); } :root[data-ui="mobile"] #modal-root .hub-act-sect .message-hub-badge { min-width: 18px; height: 18px; } /* ZK7c: licznik sekcji 18 px jak wzór (nagłówek sekcji 34 px, był 36) */ :root[data-ui="mobile"] #modal-root .message-hub-contact { min-height: 60px; padding: var(--s-2); } /* ZK7c: awatar 12 px od krawędzi karty jak we „Wszystkich” (wzór .cz-w) */ :root[data-ui="mobile"] #modal-root .message-hub-conversation { padding: 10px 12px 10px 4px; } :root[data-ui="mobile"] #modal-root .message-hub-tree-row { grid-template-columns: 44px minmax(0, 1fr); } :root[data-ui="mobile"] #modal-root .message-hub-tree-row > .message-hub-twisty { width: 44px; height: 44px; margin-top: 0; } :root[data-ui="mobile"] #modal-root .message-hub-conv-top strong { font-size: var(--t-base); } /* POPR-n15: na telefonie numer w pierwszej linii, pełna nazwa projektu w drugiej (bez ucinania — na dotyku nie ma dymka). */ :root[data-ui="mobile"] #modal-root .message-hub-conv-top strong { white-space: normal; } :root[data-ui="mobile"] #modal-root .message-hub-conv-top .mh-proj-nr { display: block; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; } :root[data-ui="mobile"] #modal-root .message-hub-conv-top .mh-proj-nazwa { display: block; } :root[data-ui="mobile"] #modal-root .message-hub-list > .message-hub-pokaz-wszystkie { min-height: 48px; margin: 8px 0 4px; } /* ZK7c (wzór .ramka.telp): telefon poziomo — cała strona biała, lista na całą szerokość (bez osobnej karty), szukajka, zakładki i podpis w jednym rzędzie 70 px NAD listą; przewija się sama lista (dotąd szara strona, lista w białej karcie 744 px, a głowa przewijała się razem z listą). */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub { background: var(--surface); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-list { margin: 0; padding: 0 var(--s-2) var(--s-3); border-radius: 0; background: transparent; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub[data-mobilny-widok="lista"] .mh-head { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .mh-glowa { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .mh-glowa .mh-search { flex: 0 0 225px; } /* szerokość pola ze wzoru; resztę rzędu biorą zakładki */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .mh-zakladki { flex: 1 1 380px; width: auto; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .mh-wskazowka { flex: none; padding: 0; } /* v15-b6 CZ9 (wzór, telefon poziomo): zwarty nagłówek rozmowy z „‹ Wiadomości”, bez zdania „Widzą i dostają…” — historia ma miejsce. ZK7c: nagłówek 53 px (strzałka 44 + 2 × 4 + kreska; był 56–57), tytuł 12 px za „‹ Wiadomości”, „N os.” 12 px od prawej; historia z odstępami 8/16 px; pole pisania: 4/12/8 px dookoła, pole 44 px z 8 px nad sobą (edytor 107 px, był 99). */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .project-chat-title { min-height: calc(var(--h-control) + var(--s-2) + 1px); padding: var(--s-1) var(--s-3) var(--s-1) 133px; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .project-chat-people { padding: var(--s-1) var(--s-3) var(--s-1) 0; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread > .mh-wstecz { top: var(--s-1); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .chat-public-note { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .project-chat-history { padding: var(--s-2) var(--s-4); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .project-chat-compose { padding: var(--s-1) calc(var(--s-3) + var(--s-2)) var(--s-2) var(--s-3); } /* z prawej 20 px jak we wzorze (edytor 736 px) */ :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .message-hub-thread .project-chat-compose .rich-editable { min-height: 44px; margin-top: var(--s-2); } :root[data-ui="mobile"] #modal-root .message-hub-thread-children { margin: 0 0 8px 44px; } :root[data-ui="mobile"] #modal-root .message-hub-thread-child { min-height: 48px; } :root[data-ui="mobile"] #modal-root .message-hub-add-thread { min-height: 44px; } :root[data-ui="mobile"] #modal-root .message-hub-empty { min-height: 240px; } /* ============================ 7. RUCH OGRANICZONY ========================= */ @media (prefers-reduced-motion: reduce) { :root[data-ui="mobile"] #modal-root .modal, :root[data-ui="mobile"] .app-confirm { transition: opacity 120ms linear; } :root[data-ui="mobile"] #modal-root .modal { transform: none; } } /* Tor E (E0): montażyści w oknie „Plan produkcji” — wiersz wyboru osoby na dotyk ≥ 44 px. */ :root[data-ui="mobile"] .montaz-ekipa-osoba { min-height: 44px; } /* Tor E (E6): „Produkcja i montaż” na telefonie — karty na całą szerokość, pasek filtrów w kolumnie, przyciski ≥ 44 px. */ :root[data-ui="mobile"] .zgloszenia-lista { grid-template-columns: minmax(0, 1fr); } :root[data-ui="mobile"] .hala-pasek { display: grid; grid-template-columns: minmax(0, 1fr); } :root[data-ui="mobile"] .hala-pasek > .button.primary { margin-left: 0; min-height: 44px; } :root[data-ui="mobile"] .hala-pasek .segmented { display: flex; } :root[data-ui="mobile"] .hala-pasek .segmented button { flex: 1 1 0; min-height: 44px; } :root[data-ui="mobile"] .montaz-sekcje { grid-template-columns: minmax(0, 1fr); } :root[data-ui="mobile"] .montaz-usterka-znacznik { width: 44px; height: 44px; } :root[data-ui="mobile"] .hala-pasek select { min-height: 44px; } :root[data-ui="mobile"] .montaz-dziennik-osoba { grid-template-columns: minmax(0, 1fr) auto; } :root[data-ui="mobile"] .montaz-dziennik-osoba > :first-child { grid-column: 1 / -1; min-height: 44px; } :root[data-ui="mobile"] .montaz-plan-pliki a { min-height: 44px; } :root[data-ui="mobile"] .montaz-protokol-akcje .button { flex: 1 1 100%; min-height: 44px; } /* DECYZJA 12: przyciski protokołu — pełna szerokość, cel 44 px */ :root[data-ui="mobile"] .karta-konstrukcja > summary { min-height: 44px; align-items: center; } /* C4, C6 (27.09.2026): okna „Historia ceny” i „Rozliczenie projektu” — tabele jako karty (etykieta kolumny z data-label). */ :root[data-ui="mobile"] :is(.historia-ceny-tabela, .rozliczenie-tabela) thead { display: none; } :root[data-ui="mobile"] :is(.historia-ceny-tabela, .rozliczenie-tabela) tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } :root[data-ui="mobile"] :is(.historia-ceny-tabela, .rozliczenie-tabela) tbody :is(td, th) { display: block; padding: 0; border: 0; text-align: left; white-space: normal; } :root[data-ui="mobile"] :is(.historia-ceny-tabela, .rozliczenie-tabela) tbody td::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: var(--t-xs); } :root[data-ui="mobile"] .historia-ceny-tabela .historia-ceny-przyczyna, :root[data-ui="mobile"] .rozliczenie-tabela tbody :is(th[scope="row"], td:last-child) { grid-column: 1 / -1; min-width: 0; } :root[data-ui="mobile"] .rozliczenie-tabela td input { width: 100%; min-height: 44px; } /* POPR-n25: „Dziś trwa” na telefonie — zwięźle: numer i dzień montażu, dwa w rzędzie (pełna nazwa wybranego stoi niżej, w wyborze projektu), żeby treść montażu nie spadała pod połowę ekranu. */ :root[data-ui="mobile"] .montaz-dzis-trwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } :root[data-ui="mobile"] .montaz-dzis-trwa-napis { grid-column: 1 / -1; } :root[data-ui="mobile"] .montaz-dzis-projekt { max-width: none; } :root[data-ui="mobile"] .montaz-dzis-projekt span { display: none; } :root[data-ui="mobile"] .montaz-dziennik-osoba :is(.montaz-dziennik-byl, .montaz-dziennik-nocleg) { min-height: 44px; } /* POPR-n30: kratki dziennika — cel 44 px */ /* POPR-n43: zgłoszenia na telefonie — zwięzłe karty (projekt i opis w jednej linii, bez stopki z autorem; szczegóły w oknie), szukajka na całą szerokość, filtry projektu i pilności obok siebie. */ :root[data-ui="mobile"] .zgloszenia-szukaj-pasek { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } :root[data-ui="mobile"] .zgloszenia-szukaj-pasek > .zgloszenia-szukaj { max-width: none; height: 44px; } :root[data-ui="mobile"] .zgloszenia-filtry-przycisk { min-height: 44px; } :root[data-ui="mobile"] .zgloszenia-filtry { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } :root[data-ui="mobile"] .zgloszenia-filtry > :is(select, .combo) { min-width: 0; } :root[data-ui="mobile"] .zgloszenia-filtry > :is(select[data-e-zgl-stan], .combo:has([data-e-zgl-stan])) { grid-column: 1 / -1; } :root[data-ui="mobile"] .hala-pasek > [data-action="e-zgl-nowe"] { display: none; } :root[data-ui="mobile"] .zgloszenia-lista { gap: var(--s-2); } :root[data-ui="mobile"] .zgloszenie-karta { gap: 2px; padding: var(--s-2) var(--s-3); } :root[data-ui="mobile"] .zgloszenie-projekt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-ui="mobile"] .zgloszenie-opis { -webkit-line-clamp: 1; } :root[data-ui="mobile"] .zgloszenie-stopka { display: none; } /* ============================ 7. KALKULATOR I CZAT JAKO STRONY (v15 b19, ZK2) ============= */ /* Jak we wzorze: górny pasek z tytułem zostaje, pionowo zostaje też dolny pasek; strona wypełnia obszar między nimi (bez karty, bez odstępów). Poziomo: szyna ikon z lewej, górny pasek 60 px — Kalkulator w karcie jak na tablecie, Czat na całą szerokość. Reszta: 4-widoki/28-okna-w-ramie.css. */ :root[data-ui="mobile"] #modal-root { --strona-gora: calc(var(--app-bar-h) + var(--bezpieczna-gora)); --strona-lewo: 0px; --strona-dol: calc(var(--zakladki-h) + var(--bezpieczny-dol)); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root { --strona-lewo: var(--sidebar-w-waski); --strona-dol: 0px; } :root[data-ui="mobile"] #modal-root .modal-backdrop:has(> :is(.project-costs-modal, .message-hub-modal)) { padding: 0; } :root[data-ui="mobile"] #modal-root .modal-backdrop > :is(.modal.project-costs-modal, .modal.message-hub-modal) { height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; } /* Nagłówek strony nie stoi już pod wycięciem ekranu (nad nim jest górny pasek), a stopka nie nad paskiem systemu. */ :root[data-ui="mobile"] #modal-root .modal.project-costs-modal > header { min-height: 0; padding-top: var(--s-2); } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.project-costs-modal > .project-cost-price-bar { --bezpieczny-dol: 0px; } /* Arkusz „Wynik” stoi we wzorze NAD całym ekranem (zasłania górny i dolny pasek) — strona wchodzi wtedy na warstwę okien. */ :root[data-ui="mobile"] #modal-root .modal-backdrop:has(> .project-costs-modal > .pcost-v15[data-wynik="1"]) { z-index: var(--z-okno); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal-backdrop:has(> .project-costs-modal) { padding: var(--s-2) var(--s-3); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal-backdrop > .modal.project-costs-modal { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--cien-1); } :root[data-ui="mobile"][data-telefon-poziomo] #modal-root .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); } /* wzór .k-gl do 1180 px */