/* ============================================================================
   9-telefon/5-kartoteki-zamowienia.css — TELEFON: KARTOTEKI, UŻYTKOWNICY, ZAMÓWIENIA
   ----------------------------------------------------------------------------
   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. KARTOTEKI — WIERSZ JAKO KARTA ============ */
/* Skan 13.09: rekord był tabelą „etykieta | wartość" z kreską pod każdym wierszem — materiał zajmował cały
   ekran (12 wierszy). Karta aplikacji: tytuł na całą szerokość, pozostałe pola w dwóch kolumnach
   (podpis nad wartością), ⋮ i gwiazdka w prawym górnym rogu, przyciski w dolnym rzędzie. Role komórek
   oznacza public/js/ui/aplikacja-mobilna.js (data-karta). Każda komórka zostaje — zmienia się tylko układ. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; min-height: var(--wiersz-h); margin: 0; padding: 11px 36px 11px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-sm); line-height: 1.35; text-align: left; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-empty] { display: none; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td:is([data-karta="tytul"], [data-karta="szeroka"], [data-karta="akcje"]) { grid-column: 1 / -1; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td:is([data-karta="tytul"], [data-karta="akcje"], [data-karta="menu"], [data-karta="znacznik"])::before { content: none; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="akcje"] .button { min-height: 36px; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="menu"] .row-menu > summary { width: var(--h-control); height: var(--h-control); font-size: var(--t-lg); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:not(:has(td[data-karta="menu"])) td[data-karta="znacznik"] { right: var(--s-2); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td:is([data-karta="znacznik"], [data-karta="menu"]) { overflow: visible; }
/* Pola stanu mają na telefonie 44 px — ramka `.stock-edit` (28 px) ucinała im dolną krawędź. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) .stock-edit { height: auto; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:hover { background: transparent; }
/* Pasek kartoteki: szukajka rozciąga się, „Filtry" obok (12-kartoteki ustawiało kolumnę — szukajka lądowała
   w połowie szerokości po prawej, a „Filtry" w osobnym rzędzie). */
:root[data-ui="mobile"] #content .catalog-toolbar[data-mobilne-filtry] { flex-direction: row; flex-wrap: wrap; align-items: center; }
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-search-field { flex: 1 1 auto; max-width: none; }
:root[data-ui="mobile"] .catalog-filter-chip-x { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-control); min-height: var(--h-control); flex-shrink: 0; }
/* Grupa filtrów z przełącznikiem (Użytkownicy: Osoby | Uprawnienia) — przełącznik w osobnym rzędzie na całą
   szerokość; inaczej szukajka wypadała pod przyciskiem „Filtry". */
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group { flex-wrap: wrap; }
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group > .segmented { flex: 1 1 100%; }
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group > .segmented > * { flex: 1 1 0; }
/* Role komórek i rozwijanie: public/js/ui/aplikacja-mobilna.js §6. Zwinięty wiersz = tytuł, podtytuł, kwota i strzałka;
   rozwinięty = pozostałe pola w dwóch kolumnach + przyciski. Tabela to jedna biała grupa z włosowymi kreskami.
   Strona przewija się cała — tabela nie ma już własnego okienka przewijania (skan: ucięte wiersze i stopka). */
:root[data-ui="mobile"] #content:has(> .panel > .table-wrap) { display: block; overflow-y: auto; }
:root[data-ui="mobile"] #content > .panel:has(> .table-wrap) { display: block; overflow: visible; }
:root[data-ui="mobile"] #content > .panel > .table-wrap { overflow: visible; max-height: none; }
:root[data-ui="mobile"] #content [data-catalog-table-wrap] .catalog-table:not(.uzy-master) tbody { display: block; overflow: hidden; border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr + tr { border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:active:not(:has(:active:is(input, button, select, summary))) { background: var(--surface-2); }
/* Strzałka wiersza: w dół zwinięty, w górę rozwinięty. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-karta-gotowa]::after { content: ""; position: absolute; top: 20px; right: 14px; width: 16px; height: 16px; background: var(--text-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-mrozwin]::after { transform: rotate(180deg); }
/* Zwinięty: widać tylko tytuł, podtytuł i kwotę. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-karta-gotowa]:not([data-mrozwin]) > td:not([data-karta="tytul"], [data-karta="podtytul"], [data-karta="wartosc"]) { display: none; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="tytul"] { order: -3; padding-right: 0; font-size: var(--t-md); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="tytul"] strong { font-weight: 600; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="tytul"] :is(.tiny, small, .muted) { color: var(--text-muted); font-size: var(--t-sm); }
/* Zwinięty wiersz: każda linia w jednej linii z wielokropkiem (kody typu „FIXING-ANCHOR-W-FAZ-S-M10X95" łamały się na trzy). */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:not([data-mrozwin]) > td[data-karta="tytul"] > *,
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:not([data-mrozwin]) > td[data-karta="tytul"] .material-name-line > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:not([data-mrozwin]) > td[data-karta="tytul"] .material-name-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* ERG6-06: lampka kompletności bloku w jednej linii z kodem (stała nad kodem i nachodziła na pierwszą literę). */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td.block-code-cell[data-karta="tytul"] { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td.block-code-cell[data-karta="tytul"] > .block-health-dot { display: inline-block; flex: none; margin-right: 0; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td.block-code-cell[data-karta="tytul"] > strong { min-width: 0; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="podtytul"] { order: -2; grid-column: 1 / -1; margin-top: -9px; overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td:is([data-karta="podtytul"], [data-karta="wartosc"])::before { content: none; }
/* Kwota po prawej, w linii tytułu — tytuł robi jej miejsce. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="wartosc"] { position: absolute; top: 11px; right: 36px; max-width: 42%; font-size: var(--t-base); text-align: right; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="wartosc"] strong { font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="wartosc"] :is(.tiny, small) { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }   /* ERG6-06: rozbicie ceny nie łamie się na nazwę bloku */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:has(> td[data-karta="wartosc"]) > td:is([data-karta="tytul"], [data-karta="podtytul"]) { padding-right: 46%; }
/* Rozwinięty: kwota zostaje u góry, pola pod spodem, przyciski w ostatnim rzędzie, ⋮ i gwiazdka obok przycisków. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-mrozwin] { padding-bottom: 14px; cursor: default; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-mrozwin] > td:not([data-karta]) { font-size: var(--t-base); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr[data-mrozwin] > td::before { color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="znacznik"] { position: static; top: var(--s-2); right: calc(var(--h-control) + var(--s-2)); order: 97; grid-column: 1; display: flex; place-items: initial; align-items: center; width: auto; height: 40px; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="menu"] { position: static; top: var(--s-2); right: var(--s-2); order: 98; grid-column: 2; justify-self: end; width: auto; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="akcje"] { order: 99; padding-top: 10px; border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="akcje"] .inline-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-content: flex-end; gap: 10px; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="akcje"] :is(.button, button) { justify-content: center; min-height: 44px; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr:not([data-mrozwin]) + tr { border-top: 1px solid var(--kreska-wlos); }
/* Materiał priorytetowy: gwiazdka przy nazwie także w zwiniętym wierszu. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr.material-priority-row > td[data-karta="tytul"] strong::after { content: " ★"; color: var(--warn); }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) .catalog-empty-row > td { grid-column: 1 / -1; padding: 28px 16px; color: var(--text-muted); text-align: center; }
/* E3: pusty wynik Materiałów/Bloków był kartą z podpisem „★” i ucinał zdanie w połowie („Brak wpisów dla …”). */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody tr.catalog-empty-row { padding: 0; cursor: default; }
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) .catalog-empty-row > td::before { content: none; }
/* Stopka listy: licznik i strzałki stron zawijają się zamiast wychodzić za ekran. */
:root[data-ui="mobile"] #content .catalog-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 4px 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] #content .catalog-pager .pager-nav { display: flex; gap: 8px; }
:root[data-ui="mobile"] #content .catalog-pager .pager-arrow { width: 44px; height: 40px; border-radius: var(--r); background: var(--surface); font-size: var(--t-lg); }

/* ============================ 2. KLIENCI I DOSTAWCY ======================= */
/* Klienci i dostawcy: wizytówka zwinięta do wiersza (awatar, nazwa, osoba, strzałka); stuknięcie rozwija dane
   i przyciski. Litery alfabetu jako nagłówki sekcji, wizytówki jednej litery tworzą jedną białą grupę. */
:root[data-ui="mobile"] #content .party-cards { display: block; padding: 0; border: 0; background: transparent; }
:root[data-ui="mobile"] #content .party-litera { display: block; margin: 0; padding: 16px 4px 6px; border: 0; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }
:root[data-ui="mobile"] #content .party-litera::after { content: none; display: none; }
:root[data-ui="mobile"] #content .party-card { position: relative; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; cursor: pointer; }
:root[data-ui="mobile"] #content .party-litera + .party-card { border-top-left-radius: var(--grupa-r); border-top-right-radius: var(--grupa-r); }
:root[data-ui="mobile"] #content .party-card:is(:last-child, :has(+ .party-litera)) { border-bottom-left-radius: var(--grupa-r); border-bottom-right-radius: var(--grupa-r); }
:root[data-ui="mobile"] #content .party-card + .party-card::before { content: ""; position: absolute; top: 0; right: 0; left: 64px; height: 1px; background: var(--kreska-wlos); }
:root[data-ui="mobile"] #content .party-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 16px; }
:root[data-ui="mobile"] #content .party-head::after { content: ""; width: 16px; height: 16px; background: var(--text-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
:root[data-ui="mobile"] #content .party-avatar { width: 36px; height: 36px; font-size: var(--t-sm); }
:root[data-ui="mobile"] #content .party-title { display: grid; min-width: 0; }
:root[data-ui="mobile"] #content .party-title strong { overflow: hidden; font-size: var(--t-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #content .party-person { overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #content .party-card:not([data-mrozwin]) :is(.party-body, .party-act, .party-more, .party-contacts) { display: none; }
:root[data-ui="mobile"] #content .party-card[data-mrozwin] { cursor: default; }
/* Rozwinięta: przyciski pod nazwą (siedzą w nagłówku wizytówki), dane kontaktowe pod spodem. */
:root[data-ui="mobile"] #content .party-card[data-mrozwin] .party-head > .party-avatar { grid-column: 1; grid-row: 1; }
:root[data-ui="mobile"] #content .party-card[data-mrozwin] .party-head > .party-title { grid-column: 2; grid-row: 1; }
:root[data-ui="mobile"] #content .party-card[data-mrozwin] .party-head::after { grid-column: 3; grid-row: 1; transform: rotate(180deg); }
:root[data-ui="mobile"] #content .party-body { display: grid; gap: 8px; padding: 0 16px 12px 64px; }
:root[data-ui="mobile"] #content .party-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: var(--t-base); }
:root[data-ui="mobile"] #content .party-lbl { color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] #content .party-more { width: auto; margin: 0 16px 0 64px; padding: 10px 0; border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] #content .party-contacts { padding: 0 16px 12px 64px; }
:root[data-ui="mobile"] #content .party-card[data-mrozwin] .party-act { display: block; grid-column: 2 / -1; grid-row: 2; padding: 2px 0 0; }
:root[data-ui="mobile"] #content .party-act .inline-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
:root[data-ui="mobile"] #content .party-act :is(.button, button) { justify-content: center; min-height: 44px; }
/* KLIENCI — telefon (v15 b10, zatwierdzony wzór „Klienci”): pasek Szukaj · Filtry · ⋮ · +, osobne wizytówki z polem logo
   (zwinięte: logo, nazwa, osoba, strzałka; rozwinięte: „Edytuj” / „Usuń” z napisami, dane, dodatkowe kontakty). */
:root[data-ui="mobile"] .kl-pasek { flex-wrap: nowrap; }
:root[data-ui="mobile"] .kl-pasek .kl-szukaj { flex: 1 1 auto; max-width: none; }
:root[data-ui="mobile"] .kl-pasek :is(.kl-filtry, .kl-odstep, .kl-uklad) { display: none; }
:root[data-ui="mobile"] .kl-pasek .kl-filtry-telefon { display: inline-flex; padding: 0 var(--s-3); }
:root[data-ui="mobile"] .kl-pasek .kl-dodaj { display: grid; place-items: center; width: var(--h-control); padding: 0; }
:root[data-ui="mobile"] .kl-pasek .kl-dodaj > span:not(.icon) { display: none; }
:root[data-ui="mobile"] .klienci-panel > .table-wrap { overflow: visible; }
:root[data-ui="mobile"] .kl-karty { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
:root[data-ui="mobile"] .kl-karty-litera { display: block; padding: var(--s-2) var(--s-1) 0; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); }
:root[data-ui="mobile"] .kl-karta { box-shadow: none; cursor: pointer; }
:root[data-ui="mobile"] .kl-karta[data-mrozwin] { cursor: default; }
:root[data-ui="mobile"] .kl-karta-glowa { align-items: center; padding: var(--s-3); }
:root[data-ui="mobile"] .kl-karta-ikony { display: none; }
:root[data-ui="mobile"] .kl-karta-strzalka { display: block; flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--szybko); }
:root[data-ui="mobile"] .kl-karta[data-mrozwin] .kl-karta-strzalka { transform: rotate(180deg); }
:root[data-ui="mobile"] .kl-karta:not([data-mrozwin]) :is(.kl-karta-przyciski, .kl-karta-dane, .kl-karta-wiecej, .kl-karta-kontakty) { display: none; }
:root[data-ui="mobile"] .kl-karta[data-mrozwin] .kl-karta-przyciski { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); }
:root[data-ui="mobile"] .kl-karta-przyciski > .button { flex: 1; justify-content: center; min-height: 44px; }
:root[data-ui="mobile"] .kl-karta-wiersz { align-items: center; min-height: 44px; }
:root[data-ui="mobile"] .kl-karta-dane .klienci-kontakt, :root[data-ui="mobile"] .kl-karta-kontakty .klienci-kontakt { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.3; }
:root[data-ui="mobile"] .kl-karta-wiecej { min-height: 44px; }
:root[data-ui="mobile"] .klienci-panel > [data-catalog-pager-bottom] .catalog-pager { padding: var(--s-2) var(--s-1) 0; border: 0; border-radius: 0; background: transparent; }
/* Okno klienta na telefonie: wizytówka wyśrodkowana, logo w jednej kolumnie (podgląd jasny pod ciemnym). */
:root[data-ui="mobile"] .kl-wizytowka-logo .kl-logo { max-width: 160px; height: 72px; }
:root[data-ui="mobile"] .kl-wizytowka-dane { flex-direction: row; gap: var(--s-5); }
:root[data-ui="mobile"] :is(.kl-logo-uklad, .kl-logo-podglady) { grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"] .kl-logo-tlo { height: 88px; }
:root[data-ui="mobile"] .kl-logo-przyciski > .button { min-height: 44px; }
/* Pasek z przełącznikiem Osoby | Uprawnienia: przełącznik na całą szerokość, pod nim szukajka i „Filtry" w jednym rzędzie. */
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group:has(> .segmented) { display: contents; }
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group:has(> .segmented) > .segmented { flex: 1 1 100%; }
:root[data-ui="mobile"] #content .catalog-toolbar .catalog-filter-group:has(> .segmented) > .search-field { flex: 1 1 0; min-width: 0; }

/* ============================ 3. UŻYTKOWNICY — DRZEWO JAKO KARTY ========== */
/* Skan 13.09: nagłówki kolumn macierzy uprawnień zamieniały się w 5 pustych wierszy pod każdym działem
   („Status", „Które projekty widzi"…), a „+" i kosz wisiały osobno. Na telefonie: dział / funkcja / osoba to
   karty bez ramki i bez kolorowego paska z boku (kolor działu niesie kropka — próbnik barw); akcje w prawym górnym rogu; cztery listy funkcji jedna pod drugą (E3: w dwóch kolumnach się ucinały)
   z podpisem nad listą (podpis = nagłówek kolumny, stempel responsive.js); puste komórki znikają. */
:root[data-ui="mobile"] #content .uzy-master tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-1); padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: none; }
:root[data-ui="mobile"] #content .uzy-master tbody tr.uzy-grupa { margin-top: var(--s-3); background: var(--surface); }
:root[data-ui="mobile"] #content .uzy-master tbody tr.rg-rola { margin-left: var(--s-2); }
:root[data-ui="mobile"] #content .uzy-master tbody tr.rg-osoba { margin-left: var(--s-4); }
:root[data-ui="mobile"] #content .uzy-master tbody td { display: block; min-width: 0; padding: 0; border: 0; background: transparent; }
:root[data-ui="mobile"] #content .uzy-master tbody td::before { content: none; }
:root[data-ui="mobile"] #content .uzy-master tbody td:empty { display: none; }
/* ERG5-11: wiersz nagłówka kolumn w dziale jest dla tabeli na komputerze — na telefonie każde pole ma własny podpis. */
:root[data-ui="mobile"] #content .uzy-master tbody tr.rg-naglowek { display: none; }
:root[data-ui="mobile"] #content .uzy-master tbody td:is(.rg-kto, .rg-pasmo, .rg-pusto, .rg-stan) { grid-column: 1 / -1; }
:root[data-ui="mobile"] #content .uzy-master tbody td.rg-kto { padding-right: 100px; }
:root[data-ui="mobile"] #content .uzy-master tbody td.rg-akcja { position: absolute; top: 7px; right: 8px; display: flex; gap: 4px; padding: 0; }
:root[data-ui="mobile"] #content .uzy-master tbody td.rg-akcja .icon-button { width: 44px; height: 44px; border-radius: var(--r); } /* E3: 38 → 44 px (dotyk). */
:root[data-ui="mobile"] #content .uzy-master tbody td.rg-lista::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"] #content .uzy-master .rg-kto small { white-space: normal; }
:root[data-ui="mobile"] #content .uzy-master .rg-pasmo-tresc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } /* E3 (27.09.2026): jedna lista w wierszu — w dwóch kolumnach (155 px) wartości ucinały się („wszystkie pr…”, „koszty zaku…”). */
:root[data-ui="mobile"] #content .uzy-master .rg-pasmo-tresc .rg-pole { flex: none; width: auto; min-width: 0; }
:root[data-ui="mobile"] #content .uzy-master .rg-pasmo-tresc .rg-pole > small { white-space: normal; }
/* DECYZJA 3b: rozwinięta lista funkcji dodatkowych (z opisem „dokłada: …”) na całą szerokość karty osoby. */
:root[data-ui="mobile"] #content .uzy-master .rg-pasmo-tresc .rg-pole.rg-funkcje-dodatkowe:has(> details[open]) { grid-column: 1 / -1; width: auto; }
:root[data-ui="mobile"] #content .uzy-master .dept-color { --dept-d: 26px; flex: none; box-sizing: content-box; width: var(--dept-d); height: var(--dept-d); padding: calc((var(--h-control) - var(--dept-d)) / 2); border: 0; margin: calc((var(--h-control) - var(--dept-d)) / -2); margin-right: calc(var(--s-1) + (var(--h-control) - var(--dept-d)) / -2); } :root[data-ui="mobile"] #content .uzy-master .dept-color::-webkit-color-swatch { border: 1px solid var(--line-strong); border-radius: 50%; } /* E3: obwódka na samej kropce (ciemna kropka działu znikała na ciemnym tle); pole dotyku 44 px, kropka nadal 26 px. */
/* Macierz uprawnień (zakładka Uprawnienia): nagłówek grupy („Wgląd w ceny i koszty”, „Projekty i praca”) to komórka
   <th>, a karta wiersza (sekcja 1 tego pliku) rozkłada komórki w dwóch kolumnach — nagłówek dostawał pół karty (140 px przy 390)
   i łamał się po jednym słowie. Teraz na całą szerokość karty; licznik schodzi pod tytuł, gdy się nie mieści. */
:root[data-ui="mobile"] #content .mu-tabela tbody tr.mu-grupa > th { grid-column: 1 / -1; }
:root[data-ui="mobile"] #content .mu-tabela .mu-grupa-tresc { flex-wrap: wrap; row-gap: 2px; }
/* E3 (27.09.2026): nagłówek grupy = pasek na całą szerokość (nie szare pudełko w karcie); nazwa uprawnienia na całą
   szerokość karty (była przyklejoną komórką z ramką na pół karty); po rozwinięciu każda funkcja to linia „nazwa … kratka”
   w jednej kolumnie, w kolejności działów jak na komputerze (słupek 44 px ucinał podpisy do „Admin…”, „Dyrek…”). */
:root[data-ui="mobile"] #content .mu-tabela tbody tr.mu-grupa { min-height: 0; padding: 0; cursor: default; }
:root[data-ui="mobile"] #content .mu-tabela tbody tr.mu-grupa > th { border: 0; }
:root[data-ui="mobile"] #content .mu-tabela tbody tr.mu-wiersz > th.mu-nazwa { grid-column: 1 / -1; position: static; padding: 0; border: 0; background: transparent; box-shadow: none; }
:root[data-ui="mobile"] #content .mu-tabela tbody td.mu-tak { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: auto; min-height: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); }
:root[data-ui="mobile"] #content .mu-tabela tbody td.mu-tak::before { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text); font-size: var(--t-sm); }
:root[data-ui="mobile"] #content .mu-tabela tbody td.mu-dzial-kom::before { font-weight: var(--w-bold); }
:root[data-ui="mobile"] #content .mu-tabela tbody td.mu-tak > * { flex: none; }
/* Użytkownicy: dział jako wiersz — kropka koloru (próbnik barw 26 px), nazwa jak zwykły tekst do stuknięcia i edycji
   (pole bez ramki; ramka pojawia się dopiero przy pisaniu), „+" i kosz w prawym górnym rogu bez nachodzenia na nazwę. */
:root[data-ui="mobile"] #content .uzy-master .rg-kto-dzial .rg-poziom { display: flex; align-items: center; gap: 8px; min-width: 0; }
:root[data-ui="mobile"] #content .uzy-master .rg-kto-dzial .rg-etykieta { display: grid; flex: 1 1 auto; min-width: 0; }
:root[data-ui="mobile"] #content .uzy-master input.uzy-grupa-nazwa:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; font-size: var(--t-md); font-weight: 600; }
:root[data-ui="mobile"] #content .uzy-master input.uzy-grupa-nazwa:focus { background: var(--pole-tlo); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-ui="mobile"] #content .uzy-master .uzy-rozwin { flex: none; width: 44px; height: 44px; margin: 0 -8px 0 -10px; border: 0; background: transparent; } /* E3: strzałka działu 28 → 44 px celu dotyku; ujemny margines trzyma kropkę i nazwę w tym samym miejscu. */

/* ============================ 4. ZAMÓWIENIA =============================== */
/* DEC-02 (b47, 28.09.2026): dawny układ telefonu (lista źródeł → arkusz firm z „‹ Zamówienia”, .ords2-*, .orders-head2) usunięty
   razem z widokiem — Zamówienia na telefonie to zakładki i karty: sekcja „ZAKŁADKI ZAMÓWIEŃ” na końcu pliku. */
/* Zamówienia → Materiały: tabela 9 kolumn była szersza niż ekran (ucięte „Zamówione", „108 (108 w dro").
   Wiersz = pozycja listy: materiał i dostawca na całą szerokość, pod spodem liczby w trzech kolumnach z podpisami
   (podpisy = nagłówki kolumn, stempel responsive.js). Wszystkie kolumny zostają. Gwiazdka / ostrzeżenie przy nazwie. */
:root[data-ui="mobile"] .orders-material-table-wrap { overflow: visible; border: 0; background: transparent; }
:root[data-ui="mobile"] .orders-material-table { display: block; width: 100%; min-width: 0; table-layout: auto; }
:root[data-ui="mobile"] .orders-material-table thead { display: none; }
:root[data-ui="mobile"] .orders-material-table tbody { display: block; overflow: hidden; border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] .orders-material-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 16px; border: 0; background: transparent; }
:root[data-ui="mobile"] .orders-material-table tbody tr + tr { border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] .orders-material-table tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-base); text-align: left; white-space: normal; }
:root[data-ui="mobile"] .orders-material-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 1px; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] .orders-material-table tbody td.material-cell { grid-column: 1 / -1; order: -1; padding-right: 28px; font-size: var(--t-base); }
:root[data-ui="mobile"] .orders-material-table tbody td.material-cell::before { content: none; }
:root[data-ui="mobile"] .orders-material-table tbody td.material-cell .tiny { color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] .orders-material-table tbody td.prio-cell { position: absolute; top: 12px; right: 14px; }
:root[data-ui="mobile"] .orders-material-table tbody td.prio-cell::before { content: none; }
:root[data-ui="mobile"] .orders-material-table tbody td.prio-cell:empty { display: none; }
:root[data-ui="mobile"] .ords2-head-mat .ords2-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* KONTA KLIENTÓW (F8c): jedna kolumna — osoba, stan, zakres i przyciski pod sobą; link i „Kopiuj” pod sobą. */
:root[data-ui="mobile"] .konto-klienta-wiersz { grid-template-areas: "osoba" "stan" "zakres" "akcje"; grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"] .konto-klienta-stan { justify-self: start; }
:root[data-ui="mobile"] .konto-klienta-akcje { justify-content: flex-start; }
:root[data-ui="mobile"] .konto-klienta-akcje .button { min-height: 44px; }
:root[data-ui="mobile"] .konta-klienta-formularz { grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"] .konta-klienta-link-pole { flex-direction: column; }
:root[data-ui="mobile"] .konta-klienta-formularz .segmented { display: flex; width: 100%; }
:root[data-ui="mobile"] .konta-klienta-formularz .segmented > button { flex: 1 1 0; min-height: 44px; white-space: normal; }
/* PRZEKAŻ KLIENTÓW (F8d): „Od” i „Do” pod sobą. */
:root[data-ui="mobile"] .przekazanie-osoby { grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"] .konta-klienta-widocznosc { grid-template-columns: minmax(0, 1fr); }
/* ZAMÓWIENIA (od 19.10.2026 rejestr pozycji): wygląd telefonu w 5b-zamowienia-rejestr.css. Tu zostały tylko reguły okna „Zamów u dostawcy”. */
:root[data-ui="mobile"] .zam-zam-naglowek { display: none; }
:root[data-ui="mobile"] .zam-zam-linia { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co ile" "termin termin"; row-gap: var(--s-2); }
:root[data-ui="mobile"] .zam-zam-co { grid-area: co; }
:root[data-ui="mobile"] .zam-zam-ile { grid-area: ile; font-size: var(--t-md); }
:root[data-ui="mobile"] .zam-zam-termin { grid-area: termin; }
/* PK5 (b18): okno klienta na telefonie — cele dotyku 44 px (było: przyciski edytora notatek 36 px, kosz kontaktu 40 px). */
:root[data-ui="mobile"] .client-editor-form .supplier-contact-remove { width: 44px; height: 44px; }
:root[data-ui="mobile"] .client-editor-form .rich-toolbar :is(button, .rich-image-button) { min-width: 44px; height: 44px; }
:root[data-ui="mobile"] #modal-root .client-editor-form .rich-toolbar select { height: 44px; min-height: 44px; }
/* PK8 (b18): Klienci na telefonie — odstęp strony u góry 12 px jak we wzorze (obszar treści ma 16 px). */
:root[data-ui="mobile"] .klienci-panel { margin-top: calc(var(--s-1) * -1); }
:root[data-ui="mobile"] .klienci-panel > .table-wrap { margin-top: var(--s-3); }
/* 23.10.2026 (przegląd telefonu): podtytuł wiersza w liście Bloków (nazwa, np. „ARCH-BRIDGE-USD-ROOF-NET”) był ucinany w pół litery bez wielokropka —
   `.material-name-line` jest tu blokiem -webkit-box z `text-overflow: clip`. Zwykły blok z wielokropkiem, jak pozostałe linie wiersza. */
:root[data-ui="mobile"] #content .catalog-table:not(.uzy-master) tbody td[data-karta="podtytul"] > .material-name-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Strzałki stronicowania listy: 44 × 40 px — pole dotyku do 44 px dokłada ::after, wygląd bez zmian (przegląd telefonu 23.10.2026). */
:root[data-ui="mobile"] .pager-arrow { position: relative; }
:root[data-ui="mobile"] .pager-arrow::after { content: ""; position: absolute; inset: -2px 0; }