/* ============================================================================ 9-telefon/1-podstawa.css — TELEFON: PODSTAWA (zmienne, dotyk, pasek górny, zakładki, pola, przyciski) ---------------------------------------------------------------------------- Dom telefonu (K18, v14, 26.09.2026): dawne arkusze 30-aplikacja-mobilna.css (układ „jak aplikacja”, 13.09) i 31-telefon-wzorzec.css (wygląd według wzorca zatwierdzonego przez właściciela 13.09: https://claude.ai/code/artifact/eb074e29-96bd-4106-a42e-6dc5139cb55e) złączone w jeden katalog i pogrupowane tematami. Selektor, który stał w obu arkuszach, ma teraz JEDNĄ regułę z wartościami, które wygrywały — wygląd bez zmian. Projekt i uzasadnienie: DOKUMENTACJA/PROJEKT-TRYB-MOBILNY.md. Kolejność plików (index.html, cały katalog ładuje się OSTATNI): 1-podstawa → 2-okna → 3-kalkulator → 4-projekty-zadania-czat → 5-kartoteki-zamowienia → 6-pulpit-harmonogram-ustawienia. ZASADY · Działa WYŁĄCZNIE w trybie :root[data-ui="mobile"] (responsive.js: szerokość ≤ 820 px albo telefon obrócony poziomo — FRO-29). Komputer i tablet nie widzą z tego katalogu ani jednej reguły — wyjątek: ekran projektu (DEC-06) jest też stroną projektu na komputerze (:root[data-ui="desktop"] .mprojekt-etapy, plik 4-projekty-zadania-czat.css); układ w dwie kolumny i wymiary komputera są w 10-projekty.css. · Nadpisuje wcześniejsze arkusze kolejnością i wagą atrybutu trybu, bez `!important`. · Kolory, czcionka, ikony, promienie — z tokenów. Liczby, których w tokenach nie ma (wymiary dotykowe, bezpieczne obszary), stoją w bloku zmiennych niżej. · Nic nie jest chowane bez drugiej drogi: przeniesione akcje są w arkuszu „Więcej”, w dolnych zakładkach albo pod przyciskiem „Filtry”. WZORZEC WYGLĄDU · tło ekranu --tlo-telefonu, na nim BIAŁE GRUPY (promień 16) bez ramek i bez kart w kartach; · pola wypełnione szarym tłem, bez ramki; etykieta 13 px nad polem; · jedna niebieska akcja (system przycisków 03-kontrolki), wszystko inne szare, czerwień = usuwanie; · zwykła pisownia — żadnych wersalików z rozstrzeleniem; · status = kropka + słowo; etap = kropka w kolorze etapu; · 16 px od krawędzi, wiersz ≥ 56 px, przycisk w stopce 50 px. ============================================================================ */ /* ============================ 1. ZMIENNE I TOKENY ========================= */ :root[data-ui="mobile"] { /* Cele dotyku 44 px (wzór: --h-k 44 px na dotyku). RM6 (v15 b14, 04.10.2026): telefon NIE ma już własnej skali pisma ani promieni — wzór wyglądu ma jedną skalę (12 / 13 / 14 / 16 / 19 / 22 / 28 / 36) na wszystkich urządzeniach, więc obowiązują wartości z 00-tokens.css. Odstęp strony jak we wzorze: 16 px góra, 12 px boki. */ --h-control: 44px; --h-control-sm: 44px; --margines-roboczy-x: var(--s-3); --margines-roboczy-y: var(--s-4); /* Zmienne aplikacji mobilnej */ --app-bar-h: 56px; --zakladki-h: 64px; /* dolny pasek 64 px (przyciski 56 px + 8 px zapasu); 20.10.2026: było 78 px — za wysoki na telefonie */ --bezpieczny-dol: env(safe-area-inset-bottom, 0px); --bezpieczna-gora: env(safe-area-inset-top, 0px); --pole-dotyk: 16px; /* iOS nie powiększa strony przy polach ≥ 16 px */ --fab: 56px; --krzywa-arkusz: cubic-bezier(0.32, 0.72, 0, 1); --krzywa-wyjscie: cubic-bezier(0.23, 1, 0.32, 1); --czas-arkusz: 260ms; --czas-nacisk: 140ms; /* Wzorzec wyglądu (13.09): wiersz listy, przycisk w stopce. Promień grupy (--grupa-r), pole (--pole-tlo, --pole-ramka — POPR3-pola), kreska włosowa (--kreska-wlos) i róg arkusza (--arkusz-r) są od W1 (27.09) wspólne dla komputera i telefonu — stoją w 00-tokens.css („SKÓRKA OKNA”). */ --wiersz-h: 56px; --stopka-btn-h: 50px; } /* Wysokość dolnego paska liczona dla wszystkich warstw, które go omijają (treść, dymki, blokada zapisu) — ta sama nazwa co w 04-uklad.css. */ :root[data-ui="mobile"] .app-shell, :root[data-ui="mobile"] .app-busy, :root[data-ui="mobile"] .toast-root { --tabbar-h: calc(var(--zakladki-h) + var(--bezpieczny-dol)); } /* RM6: telefon POZIOMO nie ma dolnego paska (szyna ikon z lewej, jak tablet we wzorze) — nic nie omija paska; górny pasek ma tam 60 px jak na tablecie. */ :root[data-ui="mobile"][data-telefon-poziomo] :is(.app-shell, .app-busy, .toast-root) { --tabbar-h: 0px; } :root[data-ui="mobile"][data-telefon-poziomo] { --app-bar-h: var(--topbar-h); --margines-roboczy-x: var(--s-5); } /* G5: mała pigułka ładowania stoi NAD dolnym paskiem zakładek, nigdy na nim. */ :root[data-ui="mobile"] .app-busy { --busy-dol: var(--tabbar-h); } /* G4: znacznik zapisów bez internetu w pasku — na telefonie krótko (opis w okienku po stuknięciu). POPR2-n25: bez internetu „Offline · 1” bez ikony odświeżania — napis mówi więcej, a tytuł ekranu mieści się w jednej linii. */ :root[data-ui="mobile"] .kolejka-offline-dlugo { display: none; } :root[data-ui="mobile"] [data-kolejka-offline].is-offline .icon { display: none; } :root[data-ui="mobile"] .topbar-title:has([data-kolejka-offline]:not([hidden])) h1 { font-size: var(--t-lg); } /* z napisem „Offline · 1” tytuł w jednej linii */ :root[data-ui="mobile"] .kolejka-offline-krotko { display: inline; } :root[data-ui="mobile"] .maps-download-badge { height: var(--h-control); } /* D2-12: „Cofnij” w dymku po usunięciu to cel dotyku — na telefonie pełna wysokość kontrolki (44 px), nie 40. */ :root[data-ui="mobile"] .toast .toast-akcja { min-height: var(--h-control); } /* ============================ 2. PODSTAWA DOTYKU, TŁO I TYPOGRAFIA ======== */ :root[data-ui="mobile"] body { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } :root[data-ui="mobile"] :is(button, a, summary, [role="button"], label, input, select, textarea) { touch-action: manipulation; } /* Pola nie mniejsze niż 16 px — inaczej iOS przybliża stronę przy każdym wejściu w pole. */ :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, [contenteditable="true"]) { font-size: var(--pole-dotyk); } /* Podświetlenie „hover" nie przykleja się po stuknięciu; przycisk główny i „usuń” zostają przy swoim kolorze (`inherit` robił z nich niewidzialne przyciski, 18.10.2026). */ @media (hover: none) { :root[data-ui="mobile"] :is(.button:not(.primary, .danger), .icon-button, .ghost-button, .nav-item):hover { background: inherit; } } :root[data-ui="mobile"] body, :root[data-ui="mobile"] .app-shell, :root[data-ui="mobile"] .workspace, :root[data-ui="mobile"] .content { background: var(--tlo-telefonu); } /* Zwykła pisownia wszędzie — wersaliki z rozstrzeleniem („MATERIAŁ Z BOM”, „DLA KOGO”) to był główny powód, dla którego ekrany wyglądały jak różne aplikacje. Tekst wpisany wersalikami zostaje wersalikami. */ :root[data-ui="mobile"] body * { text-transform: none; letter-spacing: normal; } :root[data-ui="mobile"] :is(h1, h2, h3) { text-wrap: balance; } /* ============================ 3. PASEK GÓRNY ============================== */ /* RM6 (v15 b14, 04.10.2026) — jak we wzorze: biały pasek 56 px z kreską, tytuł ekranu krojem tytułów (19/700 — reguła wspólna w 04-uklad.css), po prawej TYLKO powiadomienia i wiadomości (ikony 44 × 44 z licznikiem). Szukanie, pomoc, motyw, język, konto i „Podgląd konta” są w arkuszu „Więcej”; Zadania — w dolnym pasku. W trakcie podglądu konta w pasku stoi pigułka „Podgląd: …” (trzeba widzieć, czyimi oczami się patrzy). Telefon POZIOMO: pasek jak na tablecie (lupa, zadania, powiadomienia, wiadomości, awatar) — reguły w 04-uklad.css. */ :root[data-ui="mobile"] .topbar { flex-wrap: nowrap; gap: var(--s-2); height: calc(var(--app-bar-h) + var(--bezpieczna-gora)); min-height: 0; padding: var(--bezpieczna-gora) var(--s-1) 0 var(--s-4); } :root[data-ui="mobile"][data-telefon-poziomo] .topbar { padding-inline: var(--s-5); } :root[data-ui="mobile"] .mobile-menu-button { display: none; } :root[data-ui="mobile"] .topbar-title { flex: 1 1 auto; min-width: 0; } :root[data-ui="mobile"] .top-actions { flex: 0 0 auto; overflow: visible; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) .top-actions > :is(.szukaj-pole, .top-pomoc, .tasks-button, .user-chip) { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] .top-actions > .top-pomoc, :root[data-ui="mobile"][data-telefon-poziomo] .top-actions .user-chip-trigger > strong, :root[data-ui="mobile"][data-telefon-poziomo] .szukaj-pole :is(.szukaj-pole-napis, kbd) { display: none; } :root[data-ui="mobile"][data-telefon-poziomo] .szukaj-pole { justify-content: center; width: var(--h-control); padding: 0; } :root[data-ui="mobile"][data-telefon-poziomo] .szukaj-pole .icon { width: 20px; height: 20px; } :root[data-ui="mobile"] .top-actions .view-as-label { max-width: 120px; } /* ============================ 4. DOLNY PASEK ============================== */ /* RM6 — jak we wzorze: 78 px, biały, kreska u góry; pozycje 56 px (ikona 24 px, podpis 12/600 szary, aktywna w akcencie), pośrodku duży przycisk „Skanuj QR” 58 × 58 wystający ponad pasek, licznik przy „Zadania” w akcencie z obwódką. Układ (flex, tylko telefon pionowo): 04-uklad.css. Podpis zostaje czytelny od 360 px szerokości. */ :root[data-ui="mobile"]:not([data-telefon-poziomo]) .mobile-tabbar { display: flex; height: calc(var(--tabbar-h) + var(--bezpieczny-dol)); padding: 0 var(--s-1) calc(var(--s-1) + var(--bezpieczny-dol)); } :root[data-ui="mobile"] .tabbar-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: auto; height: 56px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); } :root[data-ui="mobile"] .tabbar-item.active { background: transparent; box-shadow: none; color: var(--accent-strong); } :root[data-ui="mobile"] .tabbar-ikona { position: relative; display: grid; place-items: center; height: 24px; } :root[data-ui="mobile"] .tabbar-item .icon { width: 24px; height: 24px; color: currentColor; opacity: 1; } :root[data-ui="mobile"] .tabbar-item .notification-count { top: -6px; right: auto; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 var(--s-1); border: 2px solid var(--surface); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 1; box-shadow: none; } /* `display` licznika i pozycji bije atrybut [hidden] — bez tego zero rysowało puste kółko (zmierzone 13.09). */ :root[data-ui="mobile"] .tabbar-item .notification-count[hidden], :root[data-ui="mobile"] .tabbar-item[hidden] { display: none; } :root[data-ui="mobile"] .tabbar-item:active .tabbar-ikona { transform: scale(.94); } /* 23.10.2026 (przegląd telefonu, poziomo): szyna ikon mieści 8 z ~14 pozycji (reszta — Materiały, Bloki, Kartoteki, Raporty, Ustawienia — pod przewijaniem), a nic o tym nie mówiło. Cienie przewijania: cień u dołu (i u góry) szyny znika, gdy lista dojedzie do krawędzi (`background-attachment: local`). */ :root[data-ui="mobile"][data-telefon-poziomo] .sidebar .nav { background: linear-gradient(var(--menu-tlo) 30%, transparent) top / 100% var(--s-5) no-repeat local, linear-gradient(transparent, var(--menu-tlo) 70%) bottom / 100% var(--s-5) no-repeat local, linear-gradient(color-mix(in srgb, var(--text) 24%, transparent), transparent) top / 100% var(--s-3) no-repeat scroll, linear-gradient(transparent, color-mix(in srgb, var(--text) 24%, transparent)) bottom / 100% var(--s-3) no-repeat scroll; } /* Awatar w pasku poziomo: przycisk miał 32 px szerokości (cel dotyku 29 pt) — szerokość jak wysokość kontrolki. */ :root[data-ui="mobile"][data-telefon-poziomo] .top-actions .user-chip-trigger { justify-content: center; min-width: var(--h-control); } /* Edytory tekstu (opis zadania, notatka, szczegóły) są polami do pisania jak input — też 17,8 px, inaczej iPhone przybliża stronę przy każdym kliknięciu (miały 14 px). */ :root[data-ui="mobile"][data-skala-dotyk] .rich-editable { font-size: var(--t-pole-dotyk); } /* ============================ 5. ARKUSZ „WIĘCEJ” ========================== */ /* Menu boczne na telefonie (arkusz od dołu) — układ i wygląd w jednym domu menu bocznego: 04-uklad.css (K10, v14). */ /* ============================ 6. TREŚĆ, ZWIJANE FILTRY, „+” =============== */ :root[data-ui="mobile"] .content { padding: var(--margines-roboczy-y) var(--margines-roboczy-x) calc(var(--tabbar-h) + var(--bezpieczny-dol) + var(--fab) + var(--s-5)); } /* Zwijane filtry: widać wyszukiwarkę i przycisk „Filtry"; reszta pasków narzędzi rozwija się pod nim (moduł public/js/ui/aplikacja-mobilna.js dokłada przycisk). */ :root[data-ui="mobile"] [data-mobilne-filtry]:not(.is-filtry-otwarte) > :not(.search-field):not(.catalog-filter-group):not(.mobilne-filtry-przelacznik):not(.toolbar-menu-telefon) { display: none; } :root[data-ui="mobile"] [data-mobilne-filtry]:not(.is-filtry-otwarte) .catalog-filter-group > .field:not(.search-field) { display: none; } :root[data-ui="mobile"] [data-mobilne-filtry] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); } :root[data-ui="mobile"] [data-mobilne-filtry] > .search-field, :root[data-ui="mobile"] [data-mobilne-filtry] > .catalog-filter-group { flex: 1 1 0; min-width: 0; } :root[data-ui="mobile"] [data-mobilne-filtry] .search-field > label { display: none; } :root[data-ui="mobile"] .mobilne-filtry-przelacznik[data-aktywne]:not([data-aktywne="0"])::after { content: attr(data-aktywne); display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: var(--s-1); padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--accent-strong); color: var(--text-invert); font-size: var(--t-xs); } :root[data-ui="mobile"] .is-filtry-otwarte > .field:not(.search-field), :root[data-ui="mobile"] .is-filtry-otwarte > .button, :root[data-ui="mobile"] .is-filtry-otwarte > .spacer, :root[data-ui="mobile"] .is-filtry-otwarte > .toolbar-akcje, :root[data-ui="mobile"] .is-filtry-otwarte > .toolbar-akcje > .button { flex: 1 1 100%; } /* Pływający przycisk głównej akcji ekranu (Nowy projekt, Nowe zadanie, Dodaj…). */ .mobile-fab { display: none; } :root[data-ui="mobile"] .mobile-fab:not([hidden]) { position: fixed; right: var(--s-4); bottom: calc(var(--tabbar-h) + var(--bezpieczny-dol) + var(--s-4)); z-index: var(--z-tabbar); display: grid; place-items: center; width: var(--fab); height: var(--fab); border: 0; border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 65%, transparent); transition: transform var(--czas-nacisk) var(--krzywa-wyjscie); } :root[data-ui="mobile"] .mobile-fab .icon { width: 26px; height: 26px; } :root[data-ui="mobile"] .mobile-fab:active { transform: scale(.94); } /* ERG6-06: przy przewijaniu listy w dół „+" ustępuje miejsca treści, w górę — wraca. */ :root[data-ui="mobile"] .mobile-fab { transition: opacity var(--szybko) ease, transform var(--szybko) ease; } :root[data-ui="mobile"] .mobile-fab.is-schowany { opacity: 0; transform: translateY(var(--s-4)) scale(.8); pointer-events: none; } :root[data-ui="mobile"] body.modal-open .mobile-fab, :root[data-ui="mobile"] .mobile-menu-open .mobile-fab { display: none; } /* ============================ 7. GRUPY ZAMIAST RAMEK ====================== */ /* Wszystko, co było kartą z ramką i cieniem, staje się białą grupą na szarym tle. Karta w karcie (np. kafel metryki w panelu) traci ramkę i tło — zostaje zwykłą treścią grupy. */ :root[data-ui="mobile"] #content > .panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; } :root[data-ui="mobile"] :is(.panel, .form-panel, .dash-panel, .dash-card, .material-editor-panel, .work-service-editor-panel, .transport-editor-panel, .block-editor-panel, .supplier-editor-panel, .crew-editor-panel, .project-card-stack, .fg, .calculation-command-panel, .validation-panel, .design-core-panel, .design-description-panel, .design-attachment-panel, .construction-bom-panel, .construction-presentation-panel, .construction-dimensions-panel, .zn-tree, .zn-detail, .todo-tree, .settings-accordion, .settings-section, .orders-dashboard, .ords2-firm, .party-card, .work-service-side-card, .block-side-section, .material-side-card, .supplier-side-card, .offer-filter-panel, .offer-row, .dash-table-wrap) { border-color: transparent; border-radius: var(--grupa-r); background: var(--surface); box-shadow: none; } :root[data-ui="mobile"] :is(.panel, .form-panel, .material-editor-panel, .work-service-editor-panel, .transport-editor-panel, .block-editor-panel) :is(.material-metric-card, .project-field-card, .form-panel, .panel, .card) { border-color: transparent; background: transparent; box-shadow: none; } /* Nagłówki grup: zwykła pisownia, bez kreski pod spodem, podpis drobnym szarym. */ :root[data-ui="mobile"] :is(.material-panel-head, .form-panel-head, .project-panel-head, .panel > header) { border-bottom: 0; padding-bottom: 0; } :root[data-ui="mobile"] :is(.material-panel-head, .form-panel-head, .panel > header) :is(h2, h3, strong) { font-size: var(--t-md); font-weight: 600; color: var(--text); } :root[data-ui="mobile"] :is(.material-panel-head, .form-panel-head, .panel > header) > span { color: var(--text-muted); font-size: var(--t-sm); font-weight: 400; } :root[data-ui="mobile"] :is(.block-side-title, .calc-command-label, .design-sidebar-head, .dash-card-label, .transport-group-label) { color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; } /* ============================ 8. POLA ===================================== */ :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input) { min-height: 46px; padding-inline: 14px; border: 1px solid var(--pole-ramka); border-radius: var(--r); background-color: var(--pole-tlo); box-shadow: none; color: var(--text); } :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input):focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* ERG5-03: puste pole wymagane zostaje CZERWONE także na telefonie. Reguła pól wyżej (przezroczysta ramka, waga 0,7,1) biła czerwień z 27-wspolne (0,3,1) — po trzech mrygnięciach pole wracało do szarego i nie było widać, co poprawić. */ :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input).field-required-missing { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); } /* Lista rozwijana: strzałka stoi w prawym paddingu (03-kontrolki). `padding-inline` wyżej zjadał to miejsce i tekst wchodził pod strzałkę („Tekst⌄", „Skala⌄"). Drugi :is() podnosi wagę ponad regułę wyżej (0,7,1). */ :root[data-ui="mobile"] :is(select, input.combo-input):is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input) { padding-right: 38px; background-position: right 12px center; } /* BŁĄD (W1, 27.09): ta reguła nie działała nigdy — waga (0,4,1) przegrywała z regułą pól wyżej (0,7,1), więc pole „Numer projektu (auto)” wyglądało jak zwykłe pole do wpisania. Teraz ta sama waga co pola + [readonly]; napis pełnym kolorem, jak na komputerze (03-kontrolki: „to informacja, nie wyłączona kontrolka”). */ :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([data-combo-input]):not(.combo-input):not(.asel-input), textarea)[readonly] { border-color: var(--pole-ramka-zablokowane); background-color: var(--pole-tlo-zablokowane); box-shadow: none; color: var(--text); cursor: not-allowed; } /* Tura 5 (czytelność): podpowiedź w polu tym samym kolorem co na komputerze (03-kontrolki: --text-faint, ≥ 4,6 : 1). Półprzezroczysty szary dawał 2,9–3,3 : 1 w polach „Szukaj" na telefonie. */ /* BŁĄD (W1, zgłoszenie b14): wyłączone pole na telefonie wyglądało jak zwykłe — reguła pól wyżej (0,7,1) biła `:disabled` z 03-kontrolki. Teraz jak na komputerze w oknie: przygaszone tło, bez obrysu, szary napis. */ :root[data-ui="mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input):disabled { border-color: var(--pole-ramka-zablokowane); background-color: var(--pole-tlo-zablokowane); box-shadow: none; color: var(--pole-napis-zablokowane); cursor: not-allowed; } :root[data-ui="mobile"] ::placeholder { color: var(--text-faint); } /* Etykiety pól czytelne z odległości ręki (na komputerze 10 px wersalik). */ :root[data-ui="mobile"] label:not(.upload-button, .rich-image-button, .button), :root[data-ui="mobile"] .field > label, :root[data-ui="mobile"] .project-field-card > span { color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; } :root[data-ui="mobile"] .field { gap: 6px; } :root[data-ui="mobile"] :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--accent); } :root[data-ui="mobile"] .rich-editor { border: 1px solid var(--pole-ramka); border-radius: var(--r); background: var(--pole-tlo); box-shadow: none; overflow: hidden; } /* ============================ 9. PRZYCISKI (wymiary telefonu) I STATUSY ==== */ :root[data-ui="mobile"] :is(.button, .ghost-button, .upload-button) { min-height: 40px; padding-inline: 14px; border-radius: var(--r); font-size: var(--t-base); font-weight: 600; } /* RM6: przycisk-ikona na telefonie jak we wzorze — 44 × 44 px (cel dotyku), promień 8. */ :root[data-ui="mobile"] .icon-button { width: var(--h-control); height: var(--h-control); border-radius: var(--r-sm); } :root[data-ui="mobile"] .status-pill:not(.solid) { gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--t-sm); font-weight: 600; } :root[data-ui="mobile"] .status-pill:not(.solid)::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ton, var(--text-muted)); } :root[data-ui="mobile"] :is(.pill, .tag, .transport-mode-badge, .project-type-badge, .catalog-filter-chip) { border-color: transparent; background: var(--btn-2); color: var(--text); font-weight: 500; } /* ============================ 10. WYSZUKIWARKA I FILTRY =================== */ :root[data-ui="mobile"] #content :is(.toolbar, .catalog-toolbar) { padding: var(--s-2) 0 var(--s-3); background: transparent; border: 0; } :root[data-ui="mobile"] #content .search-field input { min-height: var(--h-control); background-color: var(--pole-tlo); box-shadow: none; } /* POPR3-pola: szukajka = zwykłe pole (było szare wypełnienie) */ :root[data-ui="mobile"] .mobilne-filtry-przelacznik { flex: 0 0 auto; min-height: var(--h-control); height: var(--h-control); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); font-size: var(--t-base); font-weight: 500; } /* W2 (27.09.2026): rozwinięte „Filtry” w akcencie jak inne wybrane elementy (zaznaczony wiersz, temat notatek) — były czarne, jedyny czarny przycisk w programie. Jasny akcent, nie pełny: pełny niebieski ma tylko akcja główna. */ :root[data-ui="mobile"] .mobilne-filtry-przelacznik[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); } /* ============================ 11. SEGMENTY I PRZEŁĄCZNIKI WIDOKÓW ========= */ /* E3 (27.09.2026): każdy przycisk segmentu na telefonie ma wysokość celu dotyku --h-control (44 px), a nie 34 px. Ta sama liczba w domach segmentów, które mają własne reguły: Harmonogram/Zadania (niżej), zakładki okna kosztów (3-kalkulator), Zamówienia (5-kartoteki-zamowienia), Pulpit (6-pulpit…), Wiadomości (2-okna). */ :root[data-ui="mobile"] :is(.segmented, .pcost-zakladki-mobilne, .zn-sub .views, .timeline-tabs, .ords2-rail-views) { padding: 3px; gap: 0; border: 0; border-radius: var(--r); background: color-mix(in srgb, var(--text) 8%, var(--tlo-telefonu)); } :root[data-ui="mobile"] :is(.segmented, .ords2-rail-views) > :is(button, .button, a) { min-height: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-size: var(--t-base); font-weight: 600; box-shadow: none; } :root[data-ui="mobile"] :is(.segmented, .ords2-rail-views) > :is(.active, .on, [aria-pressed="true"], [aria-selected="true"]) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); } /* Skan 13.09: zakładki etapów Timeline zawijały się w 2 rzędy, a „Moje zadania / Zlecone przeze mnie / Gotowe" łamały napisy w 2 linie. Jak zakładki w aplikacjach: jeden rząd przewijany w bok, bez łamania. */ :root[data-ui="mobile"] :is(.timeline-tabs, .zn-sub .views) { flex-wrap: nowrap; width: auto; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } :root[data-ui="mobile"] :is(.timeline-tabs, .zn-sub .views)::-webkit-scrollbar { display: none; } :root[data-ui="mobile"] :is(.timeline-tabs > .timeline-tab, .zn-sub .views > .view) { flex: none; white-space: nowrap; } :root[data-ui="mobile"] .zn-sub { min-width: 0; } :root[data-ui="mobile"] .zn-sub .views { flex: 1 1 auto; } :root[data-ui="mobile"] .zn-sub .views .view, /* Zakładki Harmonogramu: rosną do pełnej szerokości i mieszczą się w jednym wierszu od 360 px (ergonomia 26.09, E1: „Gwarancja” stała ucięta za krawędzią); napis i odstęp rosną z szerokością ekranu. Na węższym ekranie wiersz przewija się palcem, a wybrana zakładka jest na widoku. Ta sama waga (0,5,0) co wspólna reguła z .zn-sub wyżej (`flex: none`) — wygrywa kolejnością, więc stoi PO niej. */ :root[data-ui="mobile"] .timeline-workspace .timeline-tabs > .timeline-tab { flex: 1 0 auto; min-height: var(--h-control); padding: 0 clamp(3px, 1.2vw, 8px); border: 0; border-radius: var(--r-sm); background: transparent; font-size: clamp(var(--t-xs), 3.4vw, var(--t-base)); } :root[data-ui="mobile"] :is(.zn-sub .views .view.on, .timeline-tabs > .timeline-tab.active) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); } /* ============================ 12. POJEMNIK WIDOKU, SZUKAJKI, POLA DODATKOWE ==== */ /* Lista projektów, pulpit i inne widoki siedzą w .main-grid (biała karta z ramką) — na telefonie karty mają stać osobno na szarym tle, więc pojemnik znika. */ :root[data-ui="mobile"] #content .main-grid { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* Szukajka: ikona lupy stoi w polu — tekst zaczyna się za nią. */ :root[data-ui="mobile"] :is(.search-field, .search) > .icon { left: 14px; width: 18px; height: 18px; color: var(--text-muted); } /* Selektor pola musi być co najmniej tak mocny jak ogólna reguła pól z sekcji 8 „Pola” (0,7,1), inaczej padding-inline ją nadpisuje. */ :root[data-ui="mobile"] :is(.search-field, .search) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { padding-left: 42px; } /* Szukajki typu „ikona + pole w ramce" (zadania, timeline, zamówienia — lista projektów): jedno wypełnione pole, bez ramki w ramce. b56: ramka 46 px = samo pole 44 px do stuknięcia (było 42/40 px), jak pozostałe pola telefonu (8. POLA). */ :root[data-ui="mobile"] :is(.tree-search, .timeline-search, .ords2-rail-search) { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; min-height: 46px; padding: 0 12px; border: 1px solid var(--pole-ramka); border-radius: var(--r); background: var(--pole-tlo); box-shadow: none; color: var(--text-muted); } :root[data-ui="mobile"] :is(.tree-search, .timeline-search, .ords2-rail-search) > .icon { position: static; flex: none; width: 18px; height: 18px; transform: none; color: var(--text-muted); } :root[data-ui="mobile"] :is(.tree-search, .timeline-search, .ords2-rail-search) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { flex: 1 1 auto; width: auto; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* Polskie pole daty (tura 4) w oknach telefonu: wyściółka jak pozostałe pola (14 px). */ :root[data-ui="mobile"] .pl-data-pole { padding-inline: 14px; } :root[data-ui="mobile"] .pl-data-pole:disabled { border-color: var(--pole-ramka-zablokowane); background-color: var(--pole-tlo-zablokowane); box-shadow: none; color: var(--pole-napis-zablokowane); } :root[data-ui="mobile"] .asel-trigger { min-height: 46px; border: 1px solid var(--pole-ramka); border-radius: var(--r); background: var(--pole-tlo); box-shadow: none; } :root[data-ui="mobile"] .asel-trigger input.asel-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { align-self: stretch; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } :root[data-ui="mobile"] .asel-pop { border: 0; border-radius: var(--r-lg); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--text) 30%, transparent); } :root[data-ui="mobile"] .asel-row { min-height: 48px; } /* ============================ 13. EDYTOR TEKSTU =========================== */ /* Pasek formatowania (14 narzędzi) zawijał się na telefonie w 3 rzędy i zjadał ~300 px nad polem wiadomości. Wszystkie narzędzia zostają — w jednym rzędzie przewijanym w bok, z wygaszeniem przy prawej krawędzi jako sygnałem „jest więcej". */ :root[data-ui="mobile"] .rich-toolbar { flex-wrap: nowrap; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--kreska-wlos); background: transparent; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); contain: inline-size; } :root[data-ui="mobile"] .rich-toolbar::-webkit-scrollbar { display: none; } :root[data-ui="mobile"] .rich-toolbar > * { flex: none; } /* Rząd bez zawijania ma min-content = suma narzędzi (~700 px); bez tego rozpychał każdy tor `1fr` nad sobą. */ :root[data-ui="mobile"] :is(.rich-editor, [data-rich-editor], .rich-toolbar) { min-width: 0; max-width: 100%; } /* Pasek edytora tekstu (opis zadania, czat, notatki): narzędzia bez ramek i bez szarych pól — jak pasek formatowania w aplikacjach pocztowych. Listy „Tekst" / „Skala" i przycisk obrazka wyglądały jak osobne pola. */ :root[data-ui="mobile"] .rich-toolbar :is(button, .rich-image-button, .rich-attach-button) { min-width: 36px; height: 36px; border: 0; border-radius: var(--r); background: transparent; box-shadow: none; } :root[data-ui="mobile"] .rich-toolbar :is(select, input.combo-input):is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input) { width: auto; min-height: 36px; height: 36px; padding-left: 8px; padding-right: 30px; border: 0; border-radius: var(--r); background-color: transparent; background-position: right 6px center; box-shadow: none; font-size: var(--t-base); } /* POPR3-pola: lista w pasku edytora wyłączona (podgląd karty, edytor tylko do czytania) — tło pola zablokowanego, nie przezroczyste; inaczej wyglądała jak czynna. :disabled podbija wagę ponad regułę wyżej. */ :root[data-ui="mobile"] .rich-toolbar :is(select, input.combo-input):is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input):disabled { background-color: var(--pole-tlo-zablokowane); cursor: not-allowed; } /* ============================ 14. PRZYCISK POMOCY, POLE KWOTY, STOS AWATARÓW ==== */ /* Przycisk pomocy „?" w treści (Ustawienia, Zamówienia): mały szary krążek zamiast dużego koła z obwódką. E3 (27.09.2026): cel dotyku 44 px (--h-control), widoczny krążek dalej 30 px — tło tylko pod treścią (7 px wyściółki). */ :root[data-ui="mobile"] #content .help-button { display: inline-grid; place-items: center; width: var(--h-control); min-width: var(--h-control); height: var(--h-control); min-height: var(--h-control); margin: -7px -7px -7px -1px; padding: 7px; border: 0; border-radius: 50%; background: var(--btn-2) content-box; box-shadow: none; color: var(--accent); font-size: var(--t-base); font-weight: 700; line-height: 1; vertical-align: middle; } /* Pole kwoty z walutą („580 0 EUR"): dopisek waluty na tle pola, a liczba kończy się przed nim. Ogólna reguła pól telefonu (padding-inline 14 px) zjadała miejsce zarezerwowane na walutę. */ :root[data-ui="mobile"] .currency-field:not(.has-currency-select) input[data-currency-input]:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])) { padding-right: 52px; } :root[data-ui="mobile"] .currency-field > span { right: 14px; padding-left: 4px; background: transparent; } /* Stos awatarów (uczestnicy wątku, zespół projektu): w wąskim wierszu flex ściskał awatary, więc kolejny zasłaniał prawie cały poprzedni („B( AR"). Awatar nie kurczy się; nachodzą tylko o stałe 8 px. */ :root[data-ui="mobile"] .avatar-stack { flex: none; } :root[data-ui="mobile"] .avatar-stack > .avatar { flex: none; } /* 21.10.2026: przy skali dotyku (data-skala-dotyk = 0,9) pola mają 17,8 px, czyli 16 px na ekranie — iPhone nie przybliża strony po kliknięciu w pole. Atrybut powtórzony, żeby reguła wygrywała z regułami pól poszczególnych ekranów (bez !important). */ :root:is([data-ui="mobile"], [data-ui="tablet"])[data-skala-dotyk][data-skala-dotyk][data-skala-dotyk] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) { font-size: var(--t-pole-dotyk); }