/* ============================================================================
   9-telefon/35-przewijanie-dokumentu.css — TELEFON: PRZEWIJA SIĘ STRONA (DOKUMENT), NIE WNĘTRZE RAMY
   ----------------------------------------------------------------------------
   Po co (20.10.2026, zgłoszenie właściciela: „adres przeglądarki się nie chowa”): przeglądarka telefonu chowa pasek adresu
   TYLKO wtedy, gdy przewija się cały dokument. Rama programu miała stałą wysokość ekranu (.app-shell: 100dvh, overflow hidden)
   i przewijała wnętrze (.content) — pasek adresu stał na ekranie cały czas.
   Teraz na telefonie (pion i poziom) ramka nie ma stałej wysokości: wysokość bierze z treści (minimum jedno okno), a przewija
   się dokument. Górny pasek jest przyklejony (sticky, 04-uklad.css), dolny pasek zakładek jest przypięty (fixed, 04-uklad.css),
   w poziomie szyna ikon jest przyklejona do lewej krawędzi okna.
   ZASADY
   · Tylko :root[data-ui="mobile"]. Komputer i tablet nie widzą z tego pliku ani jednej reguły (ramka z przewijaną treścią zostaje).
   · Bez `!important`. Wartości z tokenów (--skala-ui, --topbar-h, --app-bar-h, --bezpieczna-gora).
   · Poziomo strona dalej nie ucieka: `overflow-x: clip` ucina nadmiar (jak dawne `hidden`), ale NIE robi z elementu kontenera
     przewijania — więc `position: sticky` w treści kleji się do okna, a nie do nieruchomego pudełka.
   · Okna (modale) są `position: fixed` na całą wysokość i przewijają się same (2-okna.css); gdy któreś jest otwarte (albo arkusz
     „Więcej”), strona pod spodem jest zablokowana (niżej, §3).
   · Widoki z własnym wewnętrznym przewijaniem (Gantt, tablica, kalendarz, tabele w poziomie, lejek, listy w arkuszach) —
     bez zmian: ten plik nie rusza ich kontenerów.
   Kod, który dotąd zakładał, że przewija się #content (zapamiętanie miejsca na liście, „od góry”): public/js/ui/przewijanie-dokumentu.js.
   ============================================================================ */

/* ============================ 0. ZMIENNE ================================== */
/* Wysokość górnego paska (przyklejonego do okna). Elementy przyklejone w treści (`top: 0` było „u góry treści”, czyli tuż pod
   paskiem) kleją się teraz do górnej krawędzi OKNA — dostają tę wartość jako przesunięcie (§4). Pion: 56 px + wycięcie
   ekranu, poziomo: 60 px (--app-bar-h ustawia 1-podstawa.css). */
:root[data-ui="mobile"] { --gora-lepka: calc(var(--app-bar-h) + var(--bezpieczna-gora)); }

/* ============================ 1. RAMA BEZ STAŁEJ WYSOKOŚCI ================ */
/* `html, body { height: 100% }` (01-reset.css) liczyło dokument jako dokładnie jedno okno — treść wystawała poza body. */
:root[data-ui="mobile"] { height: auto; }
:root[data-ui="mobile"] body { height: auto; min-height: calc(100dvh / var(--skala-ui)); }
:root[data-ui="mobile"] .app-shell { height: auto; min-height: calc(100dvh / var(--skala-ui)); overflow-x: clip; overflow-y: visible; }
:root[data-ui="mobile"] .workspace { min-height: 0; }
/* Treść rośnie z zawartością (flex: 1 0 auto = wypełnia okno, gdy krótka, i nie ściska się, gdy długa). */
:root[data-ui="mobile"] .content { flex: 1 0 auto; min-height: 0; overflow-x: clip; overflow-y: visible; }

/* Kartoteki z tabelą (12-kartoteki.css, „koniec podwójnego paska”): na komputerze łańcuch od .workspace w dół jest zamknięty
   (wysokość okna, overflow hidden), żeby przewijała się tylko tabela. Na telefonie tabela jest listą kart bez własnej wysokości,
   więc łańcuch ma rosnąć z treścią i przewijać się ma dokument. Waga selektorów wyższa niż w 12-kartoteki.css (ID w :has). */
:root[data-ui="mobile"] .workspace:has(> #content > .panel > .table-wrap) { height: auto; overflow: visible; }
:root[data-ui="mobile"] #content:has(> .panel > .table-wrap) { flex: 1 0 auto; overflow-x: clip; overflow-y: visible; }
:root[data-ui="mobile"] #content > .panel:has(> .table-wrap) { flex: 1 0 auto; overflow: visible; }

/* ============================ 2. TELEFON POZIOMO: SZYNA IKON PRZY LEWEJ KRAWĘDZI ========= */
/* Szyna (menu boczne) zajmowała całą wysokość ramki i sama przewijała listę. Przy rosnącej ramce stoi przyklejona do góry
   okna i ma wysokość jednego okna — lista pozycji przewija się w niej, jak dotąd. */
:root[data-ui="mobile"][data-telefon-poziomo] .sidebar { position: sticky; top: 0; align-self: start; height: calc(100dvh / var(--skala-ui)); }

/* ============================ 3. PRZEWIJANIE DO ELEMENTU ================== */
/* scrollIntoView / fokus / „nearest”: element nie ląduje pod górnym paskiem ani pod dolnymi zakładkami (dawniej robiła to
   krawędź .content, która kończyła się pod paskiem). Pion: zakładki 78 px + wycięcie; poziomo zakładek nie ma. */
:root[data-ui="mobile"] { scroll-padding-top: calc(var(--gora-lepka) + var(--s-2)); scroll-padding-bottom: calc(var(--zakladki-h) + var(--bezpieczny-dol) + var(--s-2)); }
:root[data-ui="mobile"][data-telefon-poziomo] { scroll-padding-bottom: var(--s-2); }

/* ============================ 4. ELEMENTY PRZYKLEJONE W TREŚCI ============ */
/* Kleiły się do górnej krawędzi przewijanej treści (tuż pod paskiem) — teraz do krawędzi okna, więc dostają wysokość paska. */
:root[data-ui="mobile"] .zr-bar { top: var(--gora-lepka); }
:root[data-ui="mobile"] .note-editor2-actions { bottom: var(--tabbar-h); }   /* dawniej: dół przewijanej treści, który kończył się nad zakładkami (dopełnienie .content) */
:root[data-ui="mobile"][data-telefon-poziomo] .ag-bok { top: var(--gora-lepka); max-height: calc(100dvh - var(--gora-lepka) - var(--s-4)); }

/* --- Zamówienia, telefon POZIOMO: pasek (zakładki + filtry + akcje) liczył szerokość z treści i był o ~75 px szerszy od okna — dawniej
   dało się go dosunąć w bok, teraz nadmiar jest ucinany (§1), więc rząd akcji nie może wystawać. Zakładki stoją w pierwszym
   rzędzie, filtry i akcje w drugim; wygląd elementów bez zmian. --- */
:root[data-ui="mobile"][data-telefon-poziomo] .zr-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zak zak" "fil akc"; }

/* ============================ 5. BLOKADA STRONY POD OTWARTYM OKNEM ======== */
/* Okno (body.modal-open) i arkusz „Więcej” (body.mobile-menu-open) przykrywają ekran; ruch palca w nich nie może przewijać
   strony pod spodem. Pozycja przewinięcia zostaje (po zamknięciu okna wracamy w to samo miejsce). */
:root[data-ui="mobile"]:has(body:is(.modal-open, .mobile-menu-open)) { overflow: hidden; }
:root[data-ui="mobile"] #modal-root .modal-backdrop { overscroll-behavior: contain; }