/* ============================================================================ RESPONSIVE.CSS — jeden spójny system responsywny CLOUDE. Ładowany OSTATNI (po styles.css + theme-premium.css) → wygrywa kolejnością. ZASADA NADRZĘDNA: DESKTOP NIETKNIĘTY. Cały layout mobilny/tabletowy żyje pod :root[data-ui="mobile"] / [data-ui="tablet"] (atrybut ustawia responsive.js). Reguł „mobilnych" NIE wyzwala surowy @media — dzięki temu wąskie okno PC NIE przeskakuje w tryb mobilny, tylko cały interfejs się skaluje przez --ui-scale (patrz sekcja 0). Tokeny z kartoteki „Styl CSS" nietknięte (zmieniamy głównie layout, nie zmienne :root). ============================================================================ */ /* ============================================================================ 0. SKALOWANIE INTERFEJSU NA MAŁYM PC Tylko tryb desktop. responsive.js liczy --ui-scale = max(0.72, szer/1180) gdy okno < 1180px; powyżej = 1 (normalny monitor = 1:1, zero zmian). zoom na skaluje też modale/toasty (są dziećmi body). ============================================================================ */ :root[data-ui="desktop"] body { zoom: var(--ui-scale, 1); } /* --- Scroll DOKUMENTU na telefonie (żeby przeglądarka chowała pasek URL) --- Domyślnie `html,body{height:100%}` + wewnętrzne kontenery 100dvh/overflow:hidden sprawiają, że scrolluje się element wewnętrzny, a nie root → pasek URL nie znika. Na telefonie uwalniamy wysokość roota, by scrollował się DOKUMENT. */ :root[data-ui="mobile"] html, :root[data-ui="mobile"] body { height: auto; min-height: 100%; } :root[data-ui="mobile"] .app-shell { min-height: 100dvh; } :root[data-ui="mobile"] .workspace, :root[data-ui="mobile"] .content, :root[data-ui="mobile"] .content.timeline-content { height: auto; min-height: 0; overflow: visible; } /* ============================================================================ 1. SHELL: szuflada z lewej + dolny pasek (wspólne: telefon + tablet) ============================================================================ */ /* Siatka app-shell: jedna kolumna (sidebar staje się wysuwaną szufladą poza flow, więc rezerwowana kolumna 238px musi zniknąć — inaczej zostaje pusty pas z lewej). */ :root[data-ui="mobile"] .app-shell, :root[data-ui="tablet"] .app-shell { grid-template-columns: minmax(0, 1fr); } /* Sidebar → szuflada wysuwana z lewej. Reużywa istniejącej klasy body.mobile-menu-open (przełącznik w 10-events.js: toggleMobileMenu / closeMobileMenu). */ :root[data-ui="mobile"] .sidebar, :root[data-ui="tablet"] .sidebar { position: fixed; top: 0; left: 0; right: auto; bottom: 0; z-index: 1300; width: min(86vw, 320px); max-width: 320px; height: 100%; max-height: none; border-right: 1px solid var(--line); border-bottom: 0; background: var(--surface); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.34); opacity: 1; pointer-events: none; transform: translateX(-100%); transition: transform 0.22s ease; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } :root[data-ui="mobile"] body.mobile-menu-open .sidebar, :root[data-ui="tablet"] body.mobile-menu-open .sidebar { pointer-events: auto; transform: translateX(0); } /* Przyciemnienie tła pod otwartą szufladą (pełny ekran, pod szufladą). */ :root[data-ui="mobile"] body.mobile-menu-open::before, :root[data-ui="tablet"] body.mobile-menu-open::before { content: ""; position: fixed; inset: 0; z-index: 1290; background: rgba(15, 23, 42, 0.42); } /* Brand w szufladzie. */ :root[data-ui="mobile"] .brand, :root[data-ui="tablet"] .brand { position: sticky; top: 0; z-index: 2; min-height: 52px; background: var(--surface); } /* Nawigacja w szufladzie = pionowa lista wygodnych wierszy (kasuje stary układ kafelków 4-kolumnowych z @media max-width:780px). */ :root[data-ui="mobile"] .sidebar .nav, :root[data-ui="tablet"] .sidebar .nav { display: flex; flex-direction: column; grid-template-columns: none; gap: 2px; max-height: none; padding: 8px; overflow: visible; } :root[data-ui="mobile"] .sidebar .nav-item, :root[data-ui="tablet"] .sidebar .nav-item, :root[data-ui="mobile"] .nav-catalog-group > summary, :root[data-ui="tablet"] .nav-catalog-group > summary { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 46px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #1f2a44; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; } :root[data-ui="mobile"] .sidebar .nav-item .icon, :root[data-ui="tablet"] .sidebar .nav-item .icon, :root[data-ui="mobile"] .nav-catalog-group > summary .icon, :root[data-ui="tablet"] .nav-catalog-group > summary .icon { width: 20px; height: 20px; flex: 0 0 auto; } /* Etykiety pozycji: jedna linia z ellipsis (kasuje line-clamp z trybu kafelków). */ :root[data-ui="mobile"] .sidebar .nav-item > span:not(.icon), :root[data-ui="tablet"] .sidebar .nav-item > span:not(.icon) { display: inline; -webkit-line-clamp: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-ui="mobile"] .sidebar .nav-item.active, :root[data-ui="tablet"] .sidebar .nav-item.active { background: var(--accent-soft); color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); } /* Grupa „Kartoteki" jako rozwijana lista pionowa (nie siatka 4-kol). */ :root[data-ui="mobile"] .nav-catalog-list, :root[data-ui="tablet"] .nav-catalog-list { display: flex; flex-direction: column; grid-template-columns: none; gap: 2px; margin-top: 2px; padding-left: 6px; } :root[data-ui="mobile"] .nav-catalog-list .nav-item, :root[data-ui="tablet"] .nav-catalog-list .nav-item { height: 44px; min-height: 44px; font-size: 13px; } /* W szufladzie pokazujemy też Pomoc/Tryb ciemny (mobile-only-nav-action). */ :root[data-ui="mobile"] .sidebar .mobile-only-nav-action, :root[data-ui="tablet"] .sidebar .mobile-only-nav-action { display: flex; } :root[data-ui="mobile"] .collapse-button, :root[data-ui="tablet"] .collapse-button { display: none; } /* ---- Topbar kompaktowy + hamburger -------------------------------------- */ :root[data-ui="mobile"] .icon-button.mobile-menu-button, :root[data-ui="tablet"] .icon-button.mobile-menu-button { display: inline-grid; flex: 0 0 auto; } :root[data-ui="mobile"] .topbar { min-height: 52px; padding: 6px 10px; gap: 8px; } :root[data-ui="mobile"] .topbar-title h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-ui="mobile"] .top-actions { gap: 4px; } /* Pomoc i tryb ciemny mają swoje pozycje w szufladzie → w topbarze chowamy je, zostaje koperta (wiadomości) i awatar. */ :root[data-ui="mobile"] .top-actions [data-action="help"], :root[data-ui="mobile"] .top-actions .ghost-button.theme-toggle, :root[data-ui="mobile"] .top-actions .user-chip span:first-child + * { display: none; } :root[data-ui="mobile"] .user-chip { padding: 4px 8px; font-size: 0; } :root[data-ui="mobile"] .user-chip span { font-size: 12px; } /* ---- Dolny pasek (mobile tabbar) ---------------------------------------- */ .mobile-tabbar { display: none; } :root[data-ui="mobile"] .mobile-tabbar, :root[data-ui="tablet"] .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 14px rgba(16, 24, 40, 0.1); } .mobile-tabbar .tabbar-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: auto; min-width: 0; min-height: 44px; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.1; cursor: pointer; } /* Aktywny kafelek dziedziczy .nav-item.active (tło + lewy pasek) — neutralizujemy. */ .mobile-tabbar .tabbar-item.active { background: transparent; box-shadow: none; } /* Pasek niewidoczny na ekranie logowania. */ .app-shell.is-login .mobile-tabbar { display: none !important; } .mobile-tabbar .tabbar-item .icon { width: 22px; height: 22px; } .mobile-tabbar .tabbar-item > span:not(.icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-tabbar .tabbar-item.active { color: var(--accent); } /* „Więcej" podświetlone gdy szuflada otwarta. */ body.mobile-menu-open .mobile-tabbar .tabbar-item[data-action="toggle-mobile-menu"] { color: var(--accent); } /* ---- Treść: zapas miejsca na dolny pasek -------------------------------- */ :root[data-ui="mobile"] .content, :root[data-ui="tablet"] .content { padding: 10px 10px calc(72px + env(safe-area-inset-bottom, 0px)); } /* Widok Projektów (pełnoekranowa siatka tree) płynie naturalnie na mobile — karty zamiast tabeli 1380px, scroll body zamiast wewnętrznego. */ :root[data-ui="mobile"] .content:has(.project-main-grid), :root[data-ui="tablet"] .content:has(.project-main-grid) { display: block; height: auto; min-height: 0; overflow: visible; } :root[data-ui="mobile"] .project-main-grid, :root[data-ui="tablet"] .project-main-grid { height: auto; } :root[data-ui="mobile"] .content:has(.project-main-grid) .tree-wrap, :root[data-ui="tablet"] .content:has(.project-main-grid) .tree-wrap { height: auto; max-height: none; overflow: visible; } /* ============================================================================ 2. TABELE → KARTY (telefon). Tablet: tabele zostają, ale w poziomym scrollu (ma na to miejsce). data-label stempluje responsive.js (czyta ). tree-table wykluczona (Projekty mają własne karty w zz-projects-cards.js). ============================================================================ */ /* Tablet: ciężkie tabele przewijalne w poziomie, nagłówek przyklejony. */ :root[data-ui="tablet"] .table-wrap, :root[data-ui="tablet"] .orders-material-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Telefon: render kart. */ :root[data-ui="mobile"] .catalog-table, :root[data-ui="mobile"] .orders-flat-table, :root[data-ui="mobile"] .orders-materials-table, :root[data-ui="mobile"] .orders-material-table, :root[data-ui="mobile"] .materials-stock-table { display: block; width: 100%; min-width: 0; border: 0; } :root[data-ui="mobile"] .catalog-table thead, :root[data-ui="mobile"] .orders-flat-table thead, :root[data-ui="mobile"] .orders-materials-table thead, :root[data-ui="mobile"] .orders-material-table thead, :root[data-ui="mobile"] .materials-stock-table thead { display: none; } :root[data-ui="mobile"] .catalog-table tbody, :root[data-ui="mobile"] .orders-flat-table tbody, :root[data-ui="mobile"] .orders-materials-table tbody, :root[data-ui="mobile"] .orders-material-table tbody, :root[data-ui="mobile"] .materials-stock-table tbody { display: block; } :root[data-ui="mobile"] .catalog-table tbody tr, :root[data-ui="mobile"] .orders-flat-table tbody tr, :root[data-ui="mobile"] .orders-materials-table tbody tr, :root[data-ui="mobile"] .orders-material-table tbody tr, :root[data-ui="mobile"] .materials-stock-table tbody tr { display: block; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } :root[data-ui="mobile"] .catalog-table tbody td, :root[data-ui="mobile"] .orders-flat-table tbody td, :root[data-ui="mobile"] .orders-materials-table tbody td, :root[data-ui="mobile"] .orders-material-table tbody td, :root[data-ui="mobile"] .materials-stock-table tbody td { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; width: auto; min-height: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); white-space: normal; text-align: right; } :root[data-ui="mobile"] .catalog-table tbody td:last-child, :root[data-ui="mobile"] .orders-flat-table tbody td:last-child, :root[data-ui="mobile"] .orders-materials-table tbody td:last-child, :root[data-ui="mobile"] .orders-material-table tbody td:last-child, :root[data-ui="mobile"] .materials-stock-table tbody td:last-child { border-bottom: 0; } /* Etykieta kolumny (z data-label) po lewej, wartość po prawej. */ :root[data-ui="mobile"] .catalog-table tbody td::before, :root[data-ui="mobile"] .orders-flat-table tbody td::before, :root[data-ui="mobile"] .orders-materials-table tbody td::before, :root[data-ui="mobile"] .orders-material-table tbody td::before, :root[data-ui="mobile"] .materials-stock-table tbody td::before { content: attr(data-label); flex: 0 0 auto; max-width: 46%; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; text-align: left; white-space: normal; } /* Komórki bez nagłówka (np. akcje, checkbox) — bez etykiety, pełna szerokość. */ :root[data-ui="mobile"] .catalog-table tbody td[data-label=""], :root[data-ui="mobile"] .orders-flat-table tbody td[data-label=""], :root[data-ui="mobile"] .orders-materials-table tbody td[data-label=""], :root[data-ui="mobile"] .materials-stock-table tbody td[data-label=""], :root[data-ui="mobile"] .catalog-table tbody td:not([data-label]), :root[data-ui="mobile"] .orders-flat-table tbody td:not([data-label]), :root[data-ui="mobile"] .orders-materials-table tbody td:not([data-label]), :root[data-ui="mobile"] .materials-stock-table tbody td:not([data-label]) { justify-content: flex-end; text-align: right; } :root[data-ui="mobile"] .catalog-table tbody td[data-label=""]::before, :root[data-ui="mobile"] .orders-flat-table tbody td[data-label=""]::before, :root[data-ui="mobile"] .orders-materials-table tbody td[data-label=""]::before, :root[data-ui="mobile"] .materials-stock-table tbody td[data-label=""]::before, :root[data-ui="mobile"] .catalog-table tbody td:not([data-label])::before, :root[data-ui="mobile"] .orders-flat-table tbody td:not([data-label])::before, :root[data-ui="mobile"] .orders-materials-table tbody td:not([data-label])::before, :root[data-ui="mobile"] .materials-stock-table tbody td:not([data-label])::before { content: none; } /* Akcje w karcie — przyciski mają oddychać i być klikalne. */ :root[data-ui="mobile"] .catalog-table tbody td .inline-actions, :root[data-ui="mobile"] .orders-flat-table tbody td .inline-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } :root[data-ui="mobile"] .catalog-table tbody td .button.mini, :root[data-ui="mobile"] .catalog-table tbody td .primary-button.mini, :root[data-ui="mobile"] .orders-flat-table tbody td .button.mini { min-height: 34px; } /* ============================================================================ 3. FORMULARZE / KONTROLKI DOTYKOWE (telefon) ============================================================================ */ /* Wielokolumnowe siatki formularzy → 1 kolumna. !important bo wiele reguł .modal.catalog-modal ... ma własne kolumny; trzymane wyłącznie w trybie mobile. */ :root[data-ui="mobile"] .form-grid, :root[data-ui="mobile"] .modal .form-grid, :root[data-ui="mobile"] .user-form-grid, :root[data-ui="mobile"] .material-card-form, :root[data-ui="mobile"] .crew-data-grid, :root[data-ui="mobile"] .planning-project-grid { grid-template-columns: minmax(0, 1fr) !important; } /* Pola na pełną szerokość. */ :root[data-ui="mobile"] .field { min-width: 0; } /* Inputy: 16px = brak auto-zoomu na iOS; wyższe = wygodny dotyk. !important bo theme-premium.css wymusza .modal input { font-size:12.5px !important }. Trzymane wyłącznie pod [data-ui="mobile"] → desktop nietknięty. */ :root[data-ui="mobile"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root[data-ui="mobile"] select, :root[data-ui="mobile"] textarea, :root[data-ui="mobile"] .modal input:not([type="checkbox"]):not([type="radio"]), :root[data-ui="mobile"] .modal select, :root[data-ui="mobile"] .modal textarea { font-size: 16px !important; min-height: 42px !important; } :root[data-ui="mobile"] textarea, :root[data-ui="mobile"] .modal textarea { min-height: 84px !important; } /* Główne przyciski akcji wygodne pod kciuk (mini/ikonowe zostają drobne). */ :root[data-ui="mobile"] .button:not(.mini), :root[data-ui="mobile"] .primary-button:not(.mini), :root[data-ui="mobile"] .ghost-button:not(.mini), :root[data-ui="mobile"] .danger-button:not(.mini), :root[data-ui="mobile"] .upload-button:not(.mini) { min-height: 42px; } /* ============================================================================ 4. MODALE → PEŁNOEKRANOWE ARKUSZE (telefon) / DUŻE Z MARGINESEM (tablet) Nie dotyczy małych popupów appConfirm/appPrompt (.app-confirm-overlay) — te mają osobny system i tu ich nie ruszamy (sekcja 5). ============================================================================ */ :root[data-ui="mobile"] .modal-backdrop { place-items: stretch !important; padding: 0 !important; } :root[data-ui="mobile"] .modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; display: flex; flex-direction: column; overflow: hidden; } /* Wewnętrzny formularz przewija się, nagłówek/stopka przyklejone. */ :root[data-ui="mobile"] .modal > form, :root[data-ui="mobile"] .modal > .modal-form, :root[data-ui="mobile"] .modal > .calculation-shell, :root[data-ui="mobile"] .modal > .presentation-options-form { flex: 1 1 auto; min-height: 0; overflow: auto; } :root[data-ui="mobile"] .modal > header { position: sticky; top: 0; z-index: 6; background: var(--surface); } :root[data-ui="mobile"] .modal > footer { position: sticky; bottom: 0; z-index: 6; background: var(--surface); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); } /* Tablet: modale duże, ale z marginesem i zaokrągleniem. */ :root[data-ui="tablet"] .modal-backdrop { place-items: center; padding: 14px; } :root[data-ui="tablet"] .modal { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; max-height: calc(100dvh - 28px) !important; } :root[data-ui="tablet"] .modal.full-height { height: calc(100dvh - 28px) !important; } /* ============================================================================ 5. POPUPY appConfirm / appPrompt — mieszczą się na wąskim ekranie. ============================================================================ */ :root[data-ui="mobile"] .app-confirm, :root[data-ui="tablet"] .app-confirm { width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); } :root[data-ui="mobile"] .app-confirm-actions { flex-direction: column-reverse; gap: 8px; } :root[data-ui="mobile"] .app-confirm-actions .button, :root[data-ui="mobile"] .app-confirm-actions .primary-button, :root[data-ui="mobile"] .app-confirm-actions .danger-button { width: 100%; min-height: 44px; } /* ============================================================================ 6. TOOLBARY / FILTRY (telefon) — zawijają, pola rosną. ============================================================================ */ :root[data-ui="mobile"] .toolbar, :root[data-ui="mobile"] .toolbar-row { flex-wrap: wrap; gap: 8px; padding: 8px; } :root[data-ui="mobile"] .toolbar .field { flex: 1 1 100%; min-width: 0; } :root[data-ui="mobile"] .toolbar .spacer { display: none; } /* ============================================================================ 7. WIDOKI SZCZEGÓLNE ============================================================================ */ /* Hub wiadomości / wątki: 2 panele (lista 300px + rozmowa) → stos pionowy. Lista wątków na górze z własnym scrollem, rozmowa pod spodem. */ :root[data-ui="mobile"] .message-hub { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } :root[data-ui="mobile"] .message-hub-sidebar { border-right: 0; border-bottom: 1px solid var(--line-strong); max-height: 40vh; overflow-y: auto; } /* Timeline (gantt): toolbary już zawijają; zapewniamy płynne przewijanie kanwy palcem w poziomie i pełną szerokość. Głęboki redesign osi czasu — osobno. */ :root[data-ui="mobile"] .timeline-controls { margin-left: 0; width: 100%; } :root[data-ui="mobile"] .timeline-canvas, :root[data-ui="mobile"] .timeline-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Dashboard: karty KPI same się przelewają (auto-fit minmax 180px), panele zwijają się ≤1023px — bez dodatkowych reguł. Wymuszamy tylko brak ściskania. */ :root[data-ui="mobile"] .dash-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* ============================================================================ 8. WNĘTRZA CIĘŻKICH MODALI-EDYTORÓW Design, Konstrukcja, Oferta, Plany/Produkcja, Gwarancja, Projekt, Kalkulacja/BOM. Modale są pełnoekranowe (sekcja 4), ale ich WEWNĘTRZNE wielokolumnowe siatki i sidebary o stałej szerokości przepełniają telefon. Składamy je do 1 kolumny. !important bo desktop ma bardzo specyficzne selektory + istniejące @media 1180px. Wszystko pod [data-ui] → DESKTOP NIETKNIĘTY. ============================================================================ */ /* --- Siatki wielokolumnowe → 1 kolumna (telefon + tablet) --- */ :root[data-ui="mobile"] .design-workspace, :root[data-ui="tablet"] .design-workspace, :root[data-ui="mobile"] .design-editor-body, :root[data-ui="mobile"] .design-main-layout, :root[data-ui="tablet"] .design-main-layout, :root[data-ui="mobile"] .design-main-stack, :root[data-ui="mobile"] .design-bottom-grid, :root[data-ui="tablet"] .design-bottom-grid, :root[data-ui="mobile"] .design-data-layout, :root[data-ui="tablet"] .design-data-layout, :root[data-ui="mobile"] .design-compact-grid, :root[data-ui="mobile"] .construction-editor-grid, :root[data-ui="tablet"] .construction-editor-grid, :root[data-ui="mobile"] .construction-version-grid, :root[data-ui="tablet"] .construction-version-grid, :root[data-ui="mobile"] .construction-context-grid, :root[data-ui="mobile"] .construction-main-stack, :root[data-ui="mobile"] .construction-side-stack, :root[data-ui="mobile"] .offer-search-layout, :root[data-ui="tablet"] .offer-search-layout, :root[data-ui="mobile"] .planning-editor-layout, :root[data-ui="tablet"] .planning-editor-layout, :root[data-ui="mobile"] .planning-bottom-row, :root[data-ui="tablet"] .planning-bottom-row, :root[data-ui="mobile"] .planning-construction-panel, :root[data-ui="tablet"] .planning-construction-panel, :root[data-ui="mobile"] .planning-side-grid, :root[data-ui="mobile"] .project-editor-shell, :root[data-ui="mobile"] .project-editor-shell-no-chat, :root[data-ui="mobile"] .warranty-editor-shell, :root[data-ui="mobile"] .project-address-row, :root[data-ui="mobile"] .calc-context-row, :root[data-ui="mobile"] .calculation-command-grid, :root[data-ui="tablet"] .calculation-command-grid, :root[data-ui="mobile"] .calculation-margin-grid, :root[data-ui="mobile"] .mapping-grid { grid-template-columns: minmax(0, 1fr) !important; } /* Wymiary (szer./wys./gł.) → 2 kolumny zamiast 4 (zmieszczą się parami). */ :root[data-ui="mobile"] .construction-dimensions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* --- Materiał / Blok / Dostawcy / Ekipy / Transport / Konsultacje / Koszty --- Kolejne wewnętrzne siatki i sidebary edytorów → 1 kolumna na telefonie/tablecie. */ :root[data-ui="mobile"] .material-editor-form, :root[data-ui="tablet"] .material-editor-form, :root[data-ui="mobile"] .material-card-form, :root[data-ui="tablet"] .material-card-form, :root[data-ui="mobile"] .material-billing-grid, :root[data-ui="mobile"] .material-flow-grid, :root[data-ui="mobile"] .material-basic-grid, :root[data-ui="mobile"] .material-title-grid, :root[data-ui="mobile"] .material-meta-grid, :root[data-ui="mobile"] .material-price-grid, :root[data-ui="mobile"] .material-weight-grid, :root[data-ui="mobile"] .price-line-grid, :root[data-ui="mobile"] .block-editor-form, :root[data-ui="tablet"] .block-editor-form, :root[data-ui="mobile"] .block-two-field-grid, :root[data-ui="mobile"] .transport-metrics-grid, :root[data-ui="mobile"] .modal.supplier-modal > form#catalog-form, :root[data-ui="tablet"] .modal.supplier-modal > form#catalog-form, :root[data-ui="mobile"] .modal.crew-modal > form#catalog-form, :root[data-ui="tablet"] .modal.crew-modal > form#catalog-form, :root[data-ui="mobile"] .modal.transport-modal > form#catalog-form, :root[data-ui="tablet"] .modal.transport-modal > form#catalog-form, :root[data-ui="mobile"] .crew-data-grid, :root[data-ui="mobile"] .transport-form-grid, :root[data-ui="mobile"] .transport-dimensions-row, :root[data-ui="mobile"] .planning-construction-head, :root[data-ui="mobile"] .planning-construction-row, :root[data-ui="mobile"] .planning-construction-meta, :root[data-ui="mobile"] .design-data-grid, :root[data-ui="tablet"] .design-data-grid, :root[data-ui="mobile"] .project-costs-calculator-grid, :root[data-ui="tablet"] .project-costs-calculator-grid, :root[data-ui="mobile"] .project-cost-scopes-list { grid-template-columns: minmax(0, 1fr) !important; } /* --- KOSZTY (kalkulator) + PROJEKT (nowy/edytuj): reguła ZBIORCZA --- Te okna mają DZIESIĄTKI wewnętrznych siatek (część łapią stare @media, część nie). Zamiast wyliczać każdą — w obrębie tych okien składamy WSZYSTKIE siatki *-grid / *-row do jednej kolumny (łapie też przyszłe). Gated [data-ui] → desktop nietknięty. */ :root[data-ui="mobile"] .modal.project-costs-modal [class*="-grid"], :root[data-ui="mobile"] .modal.project-costs-modal [class*="-row"], :root[data-ui="mobile"] .modal.project-costs-modal .project-costs-calculator-layout, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-editor-stack, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-tab-workbench, :root[data-ui="mobile"] .modal.project-modal [class*="-grid"], :root[data-ui="mobile"] .modal.project-modal [class*="-row"], :root[data-ui="tablet"] .modal.project-costs-modal .project-costs-calculator-layout, :root[data-ui="tablet"] .modal.project-costs-modal [class*="-grid"] { grid-template-columns: minmax(0, 1fr) !important; } /* Panele/sekcje kosztów o stałej/min szerokości → pełna szerokość, bez wewn. scrolla. */ :root[data-ui="mobile"] .project-cost-scope-panel, :root[data-ui="mobile"] .project-cost-center-panel, :root[data-ui="mobile"] .project-cost-tab-side, :root[data-ui="mobile"] .project-cost-transport-advice-panel, :root[data-ui="mobile"] .project-cost-construction-list { min-width: 0 !important; max-width: none !important; max-height: none !important; } /* Sidebary edytorów Materiał/Blok → góra, pełna szerokość. */ :root[data-ui="mobile"] .material-editor-side, :root[data-ui="tablet"] .material-editor-side, :root[data-ui="mobile"] .block-editor-side, :root[data-ui="tablet"] .block-editor-side { width: auto !important; max-width: none !important; min-width: 0 !important; border-right: 0; } /* Gęste tabele liczbowe w modalach (komponenty bloku, stawki ekip, transport) → przewijanie palcem w poziomie zamiast łamania (karty byłyby nieczytelne). */ :root[data-ui="mobile"] .component-table, :root[data-ui="mobile"] .crew-rates-table, :root[data-ui="mobile"] .transport-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* --- Układy flex (form + czat obok) → stos pionowy --- */ :root[data-ui="mobile"] .planning-shell, :root[data-ui="tablet"] .planning-shell { flex-direction: column !important; } :root[data-ui="mobile"] .planning-chat-column, :root[data-ui="tablet"] .planning-chat-column { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 320px; } /* --- Sidebary o stałej szerokości → góra, pełna szerokość, ograniczona wysokość --- */ :root[data-ui="mobile"] .design-construction-sidebar, :root[data-ui="tablet"] .design-construction-sidebar { width: auto !important; max-width: none !important; max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); } :root[data-ui="mobile"] .planning-side-column, :root[data-ui="mobile"] .design-attachment-panel, :root[data-ui="mobile"] .construction-side-stack, :root[data-ui="mobile"] .design-main-stack > .form-panel, :root[data-ui="mobile"] .offer-section, :root[data-ui="mobile"] .offer-filter-panel { min-width: 0 !important; width: auto !important; } /* --- Editor body/grids: niech płyną pionowo (scroll z formularza modalu) --- */ :root[data-ui="mobile"] .design-editor-body, :root[data-ui="mobile"] .design-workspace, :root[data-ui="mobile"] .construction-editor-grid, :root[data-ui="mobile"] .planning-editor-layout, :root[data-ui="mobile"] .calculation-shell, :root[data-ui="mobile"] .project-editor-shell { overflow: visible !important; min-height: 0; } /* Listy/panele z własnym max-height — pozwól im oddychać na telefonie. */ :root[data-ui="mobile"] .offer-list, :root[data-ui="mobile"] .validation-result-pane, :root[data-ui="mobile"] .construction-bom-quick-list, :root[data-ui="mobile"] .planning-construction-items { max-height: none !important; } /* Tabele w modalach (BOM, walidacja, ekipy) — przewijalne palcem w poziomie, bo to gęste siatki liczbowe trudne do zwinięcia w karty. */ :root[data-ui="mobile"] .validation-result-pane, :root[data-ui="mobile"] .bom-validation-table-wrap, :root[data-ui="mobile"] .crew-rates-panel .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================================ 8b. EDYTOR DESIGN / KONSTRUKCJI — SPŁASZCZENIE (krytyczne!) Na desktopie to łańcuch boxów `height:100%; overflow:hidden; grid-rows:minmax(0,1fr)` z wewnętrznymi panelami przewijanymi — na telefonie TNIE najważniejsze opcje (picker typu konstrukcji, lista konstrukcji, BOM, załączniki). Tu rozbijamy cały łańcuch: wszystko płynie pionowo, FORMULARZ = jedyny scroll, picker typu = arkusz. ============================================================================ */ /* Formularz edytora = jedyny kontener przewijany (reszta płynie). */ :root[data-ui="mobile"] .modal.design-modal .design-editor-shell, :root[data-ui="mobile"] .modal.construction-modal .construction-editor-form, :root[data-ui="mobile"] .modal.construction-modal .design-editor-shell { display: block !important; height: auto !important; min-height: 0 !important; grid-template-rows: none !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Wszystkie WEWNĘTRZNE kontenery układu edytora → płyną (bez stałej wysokości, bez przycinania, bez wewnętrznego scrolla). */ :root[data-ui="mobile"] .modal.design-modal .design-workspace, :root[data-ui="mobile"] .modal.design-modal .design-editor-body, :root[data-ui="mobile"] .modal.design-modal .design-main-layout, :root[data-ui="mobile"] .modal.design-modal .design-main-stack, :root[data-ui="mobile"] .modal.design-modal .design-construction-sidebar, :root[data-ui="mobile"] .modal.construction-modal .design-workspace, :root[data-ui="mobile"] .modal.construction-modal .design-construction-sidebar, :root[data-ui="mobile"] .modal.construction-modal .construction-editor-grid, :root[data-ui="mobile"] .modal.construction-modal .construction-main-stack, :root[data-ui="mobile"] .modal.construction-modal .construction-side-stack { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; grid-template-rows: none !important; grid-template-columns: none !important; } /* Panele i listy w edytorze — odsłaniamy CAŁĄ zawartość (koniec stałych wysokości). */ :root[data-ui="mobile"] .modal.design-modal .form-panel, :root[data-ui="mobile"] .modal.construction-modal .form-panel, :root[data-ui="mobile"] .modal.design-modal .design-construction-card-list, :root[data-ui="mobile"] .modal.construction-modal .design-construction-card-list, :root[data-ui="mobile"] .modal.design-modal .attachment-list, :root[data-ui="mobile"] .modal.construction-modal .attachment-list, :root[data-ui="mobile"] .modal.construction-modal .construction-bom-quick-list { max-height: none !important; height: auto !important; overflow: visible !important; } /* Wszystkie wielokolumnowe siatki edytora → 1 kolumna (np. design-compact-grid 4-kol). */ :root[data-ui="mobile"] .modal.design-modal [class*="-grid"], :root[data-ui="mobile"] .modal.design-modal [class*="-row"], :root[data-ui="mobile"] .modal.construction-modal [class*="-grid"], :root[data-ui="mobile"] .modal.construction-modal [class*="-row"] { grid-template-columns: minmax(0, 1fr) !important; } /* Picker TYPU konstrukcji (najważniejsza opcja!) = arkusz przyklejony do dołu ekranu, zamiast absolutnego popovera, który ucinał się/uciekał poza ekran. */ :root[data-ui="mobile"] .design-type-popover:not([hidden]) { position: fixed !important; left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; max-width: none !important; max-height: 72vh !important; overflow: auto !important; z-index: 12050 !important; } :root[data-ui="mobile"] .design-type-options { max-height: 55vh !important; } /* ============================================================================ 8c. SPŁASZCZENIE POZOSTAŁYCH CIĘŻKICH EDYTORÓW Audyt wykazał ten SAM łańcuch `overflow:hidden`+`height:100%`/`minmax(0,1fr)` w oknach: Kalkulacja, Koszty, Oferta, Plany/Produkcja, Konstrukcja, Ekipy — tnie treść. (1) BODY modalu = jedyny scroller. (2) Wewnętrzne kontenery układu PŁYNĄ (nie tną). ============================================================================ */ /* (1) Body każdego edytora = jedyny kontener przewijany pionowo. */ :root[data-ui="mobile"] .modal.calculation-modal > .calculation-shell, :root[data-ui="mobile"] .modal.offer-modal > .offer-builder, :root[data-ui="mobile"] .modal.planning-modal > .planning-shell, :root[data-ui="mobile"] .modal.project-costs-modal > .project-costs-form, :root[data-ui="mobile"] .modal.project-modal > .project-editor-shell { height: auto !important; max-height: none !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } /* (2) Wewnętrzne kontenery układu wszystkich edytorów → płyną, NIE tną treści. */ :root[data-ui="mobile"] .modal.calculation-modal .calculation-workspace, :root[data-ui="mobile"] .modal.calculation-modal .calculation-sidebar, :root[data-ui="mobile"] .modal.calculation-modal .validation-step, :root[data-ui="mobile"] .modal.calculation-modal .validation-result-pane, :root[data-ui="mobile"] .modal.calculation-modal .calculation-command-panel, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-scope-panel, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-center-panel, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-transport-advice-panel, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-editor-stack, :root[data-ui="mobile"] .modal.project-costs-modal .project-cost-scope-body, :root[data-ui="mobile"] .modal.offer-modal .offer-section, :root[data-ui="mobile"] .modal.offer-modal .offer-selected-panel, :root[data-ui="mobile"] .modal.offer-modal .offer-results-panel, :root[data-ui="mobile"] .modal.offer-modal .offer-row-main, :root[data-ui="mobile"] .modal.planning-modal .planning-editor-layout, :root[data-ui="mobile"] .modal.planning-modal .planning-side-column, :root[data-ui="mobile"] .modal.planning-modal .planning-main-column, :root[data-ui="mobile"] .modal.planning-modal .planning-panel, :root[data-ui="mobile"] .modal.planning-modal .planning-notes-panel, :root[data-ui="mobile"] .modal.planning-modal .planning-notes-area, :root[data-ui="mobile"] .modal.planning-modal .planning-construction-list-panel, :root[data-ui="mobile"] .modal.construction-modal .construction-bom-panel, :root[data-ui="mobile"] .modal.construction-modal .construction-presentation-panel, :root[data-ui="mobile"] .modal.construction-modal .construction-side-stack, :root[data-ui="mobile"] .modal.crew-modal .crew-editor-side, :root[data-ui="mobile"] .modal.crew-modal .crew-editor-main { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } /* ============================================================================ 9. WIDOKI GŁÓWNE (nie-modalne) Katalogi, Ustawienia, Dashboard (+ śledzenie prezentacji), Kalkulacje. ============================================================================ */ /* Siatki widoków → 1 kolumna na telefonie. */ :root[data-ui="mobile"] .catalog-grid, :root[data-ui="mobile"] .settings-form-grid, :root[data-ui="mobile"] .metrics-grid { grid-template-columns: minmax(0, 1fr) !important; } /* Dashboard: karty KPI 2 w rzędzie (czytelne), panele 1 kol. */ :root[data-ui="mobile"] .dash-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; } :root[data-ui="mobile"] .dash-card-value { font-size: 18px; } :root[data-ui="mobile"] .dash-panels { grid-template-columns: minmax(0, 1fr) !important; } /* Dashboard: nagłówek śledzenia prezentacji (tytuł + szukajka + licznik) → pion. */ :root[data-ui="mobile"] .dash-presentations-head { flex-direction: column; align-items: stretch; gap: 8px; } :root[data-ui="mobile"] .dash-presentations-search { max-width: none; } /* Dashboard: gęste tabele (Top 10, prezentacje, sesje) mają wiele kolumn z rozwijanymi wierszami (colspan) — karty by je zepsuły, więc PRZEWIJANIE palcem. */ :root[data-ui="mobile"] .dash-table-wrap, :root[data-ui="mobile"] .dash-presentations-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Kalkulacje — lista (12 kolumn) → karty „etykieta: wartość" jak kartoteki. Tabela dostaje klasę calc-list-table w renderCalculations; data-label stempluje responsive.js. Własna klasa (nie .catalog-table) — desktop nietknięty. */ :root[data-ui="mobile"] .calc-list-table { display: block; width: 100%; min-width: 0; border: 0; } :root[data-ui="mobile"] .calc-list-table thead { display: none; } :root[data-ui="mobile"] .calc-list-table tbody, :root[data-ui="mobile"] .calc-list-table tbody tr, :root[data-ui="mobile"] .calc-list-table tbody td { display: block; } :root[data-ui="mobile"] .calc-list-table tbody tr { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } :root[data-ui="mobile"] .calc-list-table tbody td { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); white-space: normal; text-align: right; } :root[data-ui="mobile"] .calc-list-table tbody td:last-child { border-bottom: 0; } :root[data-ui="mobile"] .calc-list-table tbody td::before { content: attr(data-label); flex: 0 0 auto; max-width: 46%; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: left; white-space: normal; } /* ============================================================================ 10. OŚ CZASU (Timeline / gantt) Zakładki checklist/konsultacje już są 1-kolumnowe. Gantt: pasek narzędzi w pion, wąska przyklejona kolumna etykiet (szerokość ustawia timelineGridStyle wg data-ui), reszta dni przewijana palcem. .timeline ma overflow:auto → jest scrollerem poziomym. ============================================================================ */ :root[data-ui="mobile"] .timeline-toolbar { flex-direction: column; align-items: stretch; gap: 8px; } :root[data-ui="mobile"] .timeline-search { flex: 1 1 auto; width: 100%; max-width: none; } :root[data-ui="mobile"] .timeline-controls { margin-left: 0; flex-wrap: wrap; justify-content: space-between; gap: 8px; } :root[data-ui="mobile"] .timeline-tabs { flex-wrap: wrap; } :root[data-ui="mobile"] .timeline { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* W wąskiej etykiecie (126px) zostaje numer+nazwa; pasek postępu/status chowamy. */ :root[data-ui="mobile"] .timeline-row-meta { display: none; } :root[data-ui="mobile"] .timeline-label { padding: 6px 8px; overflow: hidden; } /* Długa nazwa nie wystaje poza wąską (126px) etykietę. */ :root[data-ui="mobile"] .timeline-label-text strong, :root[data-ui="mobile"] .timeline-label-text small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Checklisty (Moje zadania/Gwarancja) i konsultacje — pełna szerokość, 1 kolumna. */ :root[data-ui="mobile"] .checklist { max-width: none; } :root[data-ui="mobile"] .consult-grid { grid-template-columns: minmax(0, 1fr) !important; } /* ============================================================================ 11. CZAT (hub wiadomości + panel czatu projektu) Hub: stos — lista u góry (≤40vh, sekcja 7), rozmowa wypełnia resztę (1fr), composer przyklejony u dołu. Pasek wątków (rail) ukryty na telefonie. ============================================================================ */ :root[data-ui="mobile"] .message-hub-thread { min-height: 0; } :root[data-ui="mobile"] .project-chat-panel { min-height: 0; } :root[data-ui="mobile"] .project-chat-history { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Composer u dołu panelu (jest ostatnim wierszem gridu .project-chat-panel — bez sticky, bo to rozciągało przycisk Wyślij). Tylko zapas miejsca na safe-area. */ :root[data-ui="mobile"] .project-chat-compose { background: var(--surface); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } /* Wiersz z przyciskiem Wyślij — bez rozciągania na całą wysokość. */ :root[data-ui="mobile"] .project-chat-compose-row { align-items: center; } /* Boczny pasek wątków obok rozmowy (172px) — za wąsko na telefonie, chowamy. */ :root[data-ui="mobile"] .chat-thread-rail { display: none !important; } :root[data-ui="mobile"] .project-chat-panel.has-thread-rail .project-chat-main { flex: 1 1 auto; min-width: 0; } /* Mniejsze pole pisania (więcej miejsca na rozmowę) + szersze bąbelki. */ :root[data-ui="mobile"] .chat-rich-editor .rich-editable { min-height: 56px; } :root[data-ui="mobile"] .chat-bubble { max-width: 88%; } /* Modale wątków (utwórz / osoby) — lista pełnej szerokości. */ :root[data-ui="mobile"] .thread-people-list { max-height: 50vh; } /* ============================================================================ 12. RÓŻNE: brak poziomego scrolla strony. ============================================================================ */ :root[data-ui="mobile"], :root[data-ui="mobile"] body, :root[data-ui="tablet"] body { overflow-x: hidden; }