/* ============================================================================
   9-telefon/9-harmonogram-gantt.css — Harmonogram (Gantt, Kalendarz, Obciążenie) na telefonie (tor A, 27.09.2026)
   Komputer: 4-widoki/27-harmonogram-gantt.css. Wszystko pod :root[data-ui="mobile"].
   Gantt przewija się palcem w poziomie, kolumna nazw (168 px, numer i nazwa) zostaje przypięta z lewej.
   Przełącznik widoków i zestawy na całą szerokość, przyciski 44 px; filtry dwa w wierszu.
   ============================================================================ */
:root[data-ui="mobile"] .hg-przelacznik .views { width: 100%; }
:root[data-ui="mobile"] .hg-przelacznik .view { flex: 1; min-height: 44px; padding: 0 var(--s-1); }
:root[data-ui="mobile"] .hg-narzedzia { gap: var(--s-2); }
:root[data-ui="mobile"] .hg-zestawy { width: 100%; height: auto; }
:root[data-ui="mobile"] .hg-narzedzia .segmented button { min-height: 44px; }
:root[data-ui="mobile"] .hg-skala { margin-left: 0; }
:root[data-ui="mobile"] .hg-filtry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"] .hg-filtry .hg-szukaj { grid-column: 1 / -1; max-width: none; height: 46px; }   /* b56: pole 44 px (było 42) */
:root[data-ui="mobile"] .hg-pole { min-width: 0; }
:root[data-ui="mobile"] .hg-pole select { height: 44px; }
:root[data-ui="mobile"] .hg-nazwa-tekst small, :root[data-ui="mobile"] .hg-nazwa-etap small { display: none; }
:root[data-ui="mobile"] .hg-w-etap .hg-nazwa { padding-left: var(--s-5); }
:root[data-ui="mobile"] .hg-rozwin { width: 36px; height: 44px; }
:root[data-ui="mobile"] .hg-nazwa-tekst { min-height: 44px; display: flex; flex-direction: column; justify-content: center; white-space: normal; font-size: var(--t-sm); }
/* POPR-n26: nazwa projektu pod numerem (dotąd na telefonie był sam numer — nie wiadomo, który to projekt). */
:root[data-ui="mobile"] .hg-nazwa-tekst strong { white-space: nowrap; }
:root[data-ui="mobile"] .hg-nazwa-tekst span { display: block; overflow: hidden; font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] .hg-filtry-zwin > summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; }
:root[data-ui="mobile"] .hg-filtry-zwin[open] > summary { margin-bottom: var(--s-2); }
:root[data-ui="mobile"] .hg-zestawy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"] .hg-w-zadanie .hg-nazwa { padding-left: var(--s-6); }
:root[data-ui="mobile"] .hg-nazwa-zadanie small { display: none; }
:root[data-ui="mobile"] .hg-skupienie { width: 36px; height: 44px; }
:root[data-ui="mobile"] .hg-skupienie-pasek .button { min-height: 44px; }
:root[data-ui="mobile"] .hg-przelacznik-krytycznej { min-height: 44px; }
:root[data-ui="mobile"] .hg-obc-tabela { grid-template-columns: 116px repeat(var(--hg-obc-kolumny), 60px); }
:root[data-ui="mobile"] .hg-obc-tytul { order: -1; flex-basis: 100%; font-size: var(--t-md); }
:root[data-ui="mobile"] .hg-obc-pasek .segmented > button, :root[data-ui="mobile"] .hg-obc-hala input { min-height: 44px; }
:root[data-ui="mobile"] .hg-pdf-jezyk select { height: 44px; }
/* A12: na telefonie strzałki i „Dzisiaj” w pierwszym rzędzie, skala i „− N +” razem w drugim; cele 44 px; przy liczbie sama cyfra (jednostkę mówi skala). */
:root[data-ui="mobile"] .os-zakres { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
:root[data-ui="mobile"] .os-zakres-nawigacja { grid-column: 1 / -1; }
:root[data-ui="mobile"] .os-zakres .segmented { height: 44px; }
:root[data-ui="mobile"] .os-zakres .segmented button { flex: 1 1 0; padding: 0 var(--s-1); }
:root[data-ui="mobile"] .os-zakres-liczba button { flex: 0 0 44px; width: 44px; }
:root[data-ui="mobile"] .os-zakres-licznik { min-width: 3ch; padding: 0 var(--s-1); }
:root[data-ui="mobile"] .os-zakres-jednostka { display: none; }
/* Timeline na telefonie: sterowanie zakresem na całą szerokość (w miejscu dawnych „← Dzisiaj →” i „Tydzień / Miesiąc”),
   „Mój / Wszystko” pod nim na całą szerokość. Strzałki jak dotąd 48 px po bokach „Dzisiaj”. Skala drobniejszym pismem —
   cztery nazwy i „− 2 +” mieszczą się w jednym rzędzie 358 px. */
:root[data-ui="mobile"] .timeline-controls > .os-zakres, :root[data-ui="mobile"] .timeline-controls > .os-zakres ~ .timeline-scope-switch { grid-column: 1 / -1; }
:root[data-ui="mobile"] .os-zakres-nawigacja { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; }
:root[data-ui="mobile"] .os-zakres-skala button { font-size: var(--t-xs); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .os-zakres { display: inline-flex; flex-wrap: nowrap; width: auto; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .os-zakres-nawigacja { display: flex; }
:root[data-ui="mobile"] .hg-obc .hg-obc-szczegoly { bottom: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }   /* POPR-n40: szczegóły komórki z własnym tłem; odstęp od dolnego paska daje dolny margines treści (.content) */

/* === DEC-03: TIMELINE NA TELEFONIE — PIONOWA LISTA DNI (harmonogram/agenda-telefonu.js) ================================
   Nad listą trzy rzędy: przełącznik widoków, okres (Dziś · Tydzień · Miesiąc · + miesiąc) z „Filtry (N)” i liczniki-skróty.
   Pod spodem dni po kolei, w każdym karty projektów (nagłówek = projekt, wiersz = krok: kropka etapu, co, etap · kto, termin).
   Cele ≥ 44 px, tekst ≥ 12 px. Poziomo (844×390): pasek górny programu schowany, sterowanie w przyklejonej kolumnie po lewej,
   lista dni na całą wysokość ekranu. */
:root[data-ui="mobile"] .ag-workspace { gap: var(--s-1); }
:root[data-ui="mobile"] .ag-bok, :root[data-ui="mobile"] .ag-gora { display: flex; flex-direction: column; gap: var(--s-2); }
:root[data-ui="mobile"] .ag-okres { display: flex; flex: 1 1 auto; min-width: 0; height: 44px; }
:root[data-ui="mobile"] .ag-okres > button { flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; padding: 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-strong); white-space: nowrap; }
:root[data-ui="mobile"] .ag-okres > .ag-plus { color: var(--accent-strong); }
:root[data-ui="mobile"] .ag-okres > .ag-plus:disabled { color: var(--text-muted); }
:root[data-ui="mobile"] .ag-rzad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }
:root[data-ui="mobile"] .ag-liczniki { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
:root[data-ui="mobile"] .ag-skrot { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--cien-1); }
:root[data-ui="mobile"] .ag-skrot b { font-weight: var(--w-bold); }
:root[data-ui="mobile"] .ag-skrot.is-spozniony { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
:root[data-ui="mobile"] .ag-skrot:disabled { background: transparent; color: var(--text-muted); box-shadow: none; }
:root[data-ui="mobile"] .ag-filtry { display: flex; flex: 0 0 auto; flex-direction: column; }
:root[data-ui="mobile"] .ag-filtry[open] { flex-basis: 100%; }
:root[data-ui="mobile"] .ag-filtry > summary { gap: var(--s-1); min-height: 44px; padding: 0 var(--s-3); }
:root[data-ui="mobile"] .ag-filtry[open] > summary { align-self: flex-end; }
:root[data-ui="mobile"] .ag-licznik-filtrow { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] .ag-filtry-pola { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
:root[data-ui="mobile"] .ag-filtry-pola :is(.ag-zakres, .ag-zakonczone, .ag-wyczysc) { grid-column: 1 / -1; }
:root[data-ui="mobile"] .ag-zakres .segmented { display: flex; height: 44px; }
:root[data-ui="mobile"] .ag-zakres .segmented button { flex: 1 1 0; min-height: 0; }
:root[data-ui="mobile"] .ag-zakonczone { display: flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--t-base); }
:root[data-ui="mobile"] .ag-zakonczone input { width: 20px; height: 20px; }
:root[data-ui="mobile"] .ag-wyczysc { justify-content: center; min-height: 44px; }
:root[data-ui="mobile"] .ag-zakres-napis { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] .ag-lista { display: flex; flex-direction: column; gap: var(--s-5); }
:root[data-ui="mobile"] .ag-dzien { display: flex; flex-direction: column; gap: var(--s-2); scroll-margin-top: calc(var(--app-bar-h) + var(--s-2)); }
:root[data-ui="mobile"] .ag-dzien-tytul { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; color: var(--text); font-size: var(--t-md); font-weight: var(--w-bold); white-space: nowrap; }
:root[data-ui="mobile"] .ag-kiedy { font-size: var(--t-lg); line-height: 1; }
:root[data-ui="mobile"] .ag-dzien-nazwa { color: var(--text-muted); font-weight: var(--w-medium); }
:root[data-ui="mobile"] .ag-kiedy + .ag-dzien-nazwa { font-size: var(--t-sm); }
:root[data-ui="mobile"] .ag-dzien-data { color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] .ag-dzien-tytul .ag-licznik { align-self: center; min-width: 24px; margin-left: auto; padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: var(--t-xs); text-align: center; font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] .ag-po-terminie .ag-kiedy { color: var(--danger); }
:root[data-ui="mobile"] .ag-dzien.is-pusty { flex-direction: row; align-items: baseline; gap: var(--s-3); }
:root[data-ui="mobile"] .ag-dzien.is-pusty .ag-dzien-tytul { font-size: var(--t-base); }
:root[data-ui="mobile"] .ag-pusty-dzien { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }

:root[data-ui="mobile"] .ag-karta { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
:root[data-ui="mobile"] .ag-karta-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-4); border: 0; background: transparent; color: var(--text); text-align: left; }
:root[data-ui="mobile"] .ag-karta-glowa strong { font-size: var(--t-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-ui="mobile"] .ag-karta-nazwa { flex: 1 1 14ch; min-width: 0; font-size: var(--t-base); overflow-wrap: anywhere; }
:root[data-ui="mobile"] .ag-karta-glowa small { flex-basis: 100%; color: var(--text-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
:root[data-ui="mobile"] .ag-wiersz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-4); border: 0; border-top: 1px solid var(--kreska-wlos); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
:root[data-ui="mobile"] .ag-wiersz .hg-kropka { width: 12px; height: 12px; margin: 0; }
:root[data-ui="mobile"] .ag-wiersz-tresc { display: flex; flex-direction: column; min-width: 0; }
:root[data-ui="mobile"] .ag-wiersz-tytul { font-size: var(--t-base); font-weight: var(--w-medium); overflow-wrap: anywhere; }
:root[data-ui="mobile"] .ag-wiersz-tresc small { color: var(--text-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
:root[data-ui="mobile"] .ag-wiersz-data { color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-ui="mobile"] .ag-wiersz.is-spozniony .ag-wiersz-data { color: var(--danger); }
:root[data-ui="mobile"] .ag-wiersz.is-zrobiony .ag-wiersz-tytul { color: var(--text-muted); text-decoration: line-through; }
:root[data-ui="mobile"] :is(.ag-wiersz, .ag-karta-glowa, .ag-skrot, .ag-okres > button) { transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color var(--szybko); }
:root[data-ui="mobile"] :is(.ag-wiersz, .ag-karta-glowa):active { background: var(--surface-2); }
:root[data-ui="mobile"] :is(.ag-skrot, .ag-okres > button):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { :root[data-ui="mobile"] :is(.ag-wiersz, .ag-karta-glowa, .ag-skrot, .ag-okres > button) { transition: none; } :root[data-ui="mobile"] :is(.ag-skrot, .ag-okres > button):active { transform: none; } }
:root[data-ui="mobile"] .ag-wiecej { justify-content: center; gap: var(--s-1); min-height: 44px; }
:root[data-ui="mobile"] .ag-wiecej-liczba { color: var(--text-muted); }
:root[data-ui="mobile"] .ag-dol { display: flex; flex-wrap: wrap; gap: var(--s-2); }
:root[data-ui="mobile"] .ag-dol > .button { flex: 1 1 140px; justify-content: center; min-height: 44px; }
:root[data-ui="mobile"] .ag-pusto { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-4); color: var(--text-muted); text-align: center; }
:root[data-ui="mobile"] .ag-dodatek > summary { justify-content: center; min-height: 44px; list-style: none; }
:root[data-ui="mobile"] .ag-dodatek[open] > summary { margin-bottom: var(--s-3); }

/* Poziomo: bez paska górnego programu (tytuł, dzwonek) — ok. 56 px więcej; sterowanie w kolumnie po lewej, przyklejone przy
   przewijaniu, a lista dni po prawej na całą wysokość (ok. 3 karty zamiast pół wiersza siatki). */
:root[data-ui="mobile"][data-telefon-poziomo]:has(.ag-workspace) .topbar { display: none; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: var(--s-4); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-bok { position: sticky; top: 0; max-height: calc(100dvh - var(--tabbar-h, 64px) - var(--s-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-bok .ag-okres { flex-basis: 100%; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-bok .ag-filtry:not([open]) { flex: 1 1 100%; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-bok .ag-filtry > summary { justify-content: center; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-bok .ag-filtry-pola { grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-lista { gap: var(--s-4); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-wiersz { min-height: 44px; padding-block: var(--s-1); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-karta-glowa { padding-block: var(--s-1); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-karta-glowa small { flex: 0 1 auto; margin-left: auto; text-align: right; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .ag-dzien { scroll-margin-top: var(--s-2); }