/* ============================================================================
   15c-zadania-strona.css — strona „Zadania” (v15 b7, 03.10.2026; wzór zatwierdzony: scratchpad/pulpit/Zadania.html)
   ----------------------------------------------------------------------------
   Nagłówek: rząd 1 = widoki (pigułki na wspólnym tle — ta sama reguła co przełącznik w 15-zadania.css) i „+ Nowe zadanie”;
   rząd 2 = szukaj · Pokaż · Etap · Termin · Priorytet · Zapisane … Sortuj — przyciski-menu w stylu filtrów Projektów
   (.pl-filtr-przycisk, .pl-filtr-menu — dom klasy: 10b-projekty-lista.css; tu tylko układ na tej stronie).
   Węższy ekran (≤ 1180 px, tablet): szukaj · Filtry (arkusz .pl-arkusz) · Sortuj. Telefon: 9-telefon/7-zadania-tablica-kalendarz.css.
   Kolory etapów: atrybut data-etap (konsultacje, design, plany, produkcja, gwarancja, bez) → --hg-ton (27-harmonogram-gantt.css).
   ============================================================================ */
.content:has(.zh-strona) { overflow-x: hidden; }
/* v15 b19 (ZN1): odstęp strony i szerokość jak we wzorze — boki 32 px na komputerze (do 1180 px zostają 24 px ramy), treść do 1320 px na środku. */
@media (min-width: 1181px) { .content:has(.zh-strona) { --margines-roboczy-x: var(--s-6); } }
.zh-strona { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: var(--strona-max, 1320px); min-width: 0; margin-inline: auto; }
.zh-gora { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.zh-r1, .zh-r2 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.zh-odstep { flex: 1 1 0; min-width: 0; }
.zh-nowe { flex: none; }
.zh-nowe .icon { width: 16px; height: 16px; }

/* Rząd 2: szukajka i przyciski-menu filtrów (jak Projekty). */
.zh-r2 .zh-szukaj { flex: 0 1 260px; min-width: 150px; }
.zh-szukaj { position: relative; color: var(--text-faint); }
.zh-strona .zh-szukaj input:not([type="checkbox"]) { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: var(--t-base); }
.zh-szukaj-x { flex: none; margin-right: calc(-1 * var(--s-2)); }
.zh-filtry, .zh-opcje { display: flex; flex: none; align-items: center; gap: var(--s-2); }
/* Gdy rząd filtrów się nie mieści (Gantt przy 1440 px: Sortuj + „Rozwiń”), opcje schodzą do drugiej linii z prawej — jak we wzorze; nic nie wychodzi poza ekran. */
.zh-r2 { align-items: flex-start; }
.zh-opcje { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.zh-filtr .pl-filtr-przycisk { width: auto; color: var(--text-faint); }
.zh-filtr .pl-filtr-przycisk > .icon:last-child { margin-left: 0; }   /* wzór: 8 px między wartością a strzałką (odstęp 4 + margines wartości 4) */
.zh-filtr .pl-filtr-przycisk > .icon:first-child { width: 15px; height: 15px; margin-left: 0; color: var(--text-faint); }
.zh-sortuj .pl-filtr-przycisk > span:not(.icon) { color: var(--text-faint); }
.zh-filtry-przycisk { display: none; flex: none; width: auto; color: var(--text-faint); }
/* „Filtry” (tablet) jak we wzorze (.zh-fb-tab, wersja v14: napis to zwykły tekst 600, nie pigułka): ikona 16 px z odstępem 4 px, napis w kolorze tekstu
   (przy aktywnych filtrach w kolorze akcentu), obok pigułka z liczbą aktywnych filtrów (12 px / 700). */
.zh-filtry-przycisk > .icon { flex: none; width: 16px; height: 16px; margin-left: var(--s-1); }
.zh-filtry-przycisk > b { font-size: inherit; font-weight: var(--w-bold); color: var(--text); }
.zh-filtry-przycisk.is-aktywny > b { color: var(--accent); }
.zh-filtry-ile { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--text-invert); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-strong); }
.zh-kropka { --ton: var(--hg-ton); }
.zh-kropka[data-etap="bez"] { --ton: var(--text); }   /* „Bez etapu” wyraźnie inny niż szare Konsultacje (zh2_v4) */
.zh-menu-liczba { margin-left: auto; padding-left: var(--s-3); color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.zh-menu-kreska { margin: var(--s-1) 0; border: 0; border-top: 1px solid var(--line); }
.pl-filtr-menu > button > .icon:not(.pl-filtr-znak) { flex: none; width: 15px; height: 15px; color: var(--text-muted); }

/* Elementy tylko telefonu (9-telefon/7-zadania-tablica-kalendarz.css je pokazuje). */
.zh-widok-menu, .zh-szukaj-telefon, .zh-szukaj-otworz, .zh-filtry-telefon { display: none; }

/* Arkusz „Filtry”: własny zapisany filtr ma obok krzyżyk „Usuń”. */
.pl-arkusz-opcje .zh-zapisany-usun { width: 44px; padding: 0; justify-content: center; }
.pl-arkusz-opcje .zh-zapisany-usun .icon, .pl-arkusz-opcje > button > .icon { width: 14px; height: 14px; }

/* Węższa treść: szukaj · Filtry · Sortuj (wszystkie filtry w arkuszu). */
@media (max-width: 1180px) {
  .zh-filtry { display: none; }
  .zh-filtry-przycisk { display: inline-flex; }
  .zh-r2 .zh-szukaj { flex: 1 1 200px; }
  .zh-r1 .view { padding: 0 var(--s-2); }
  .zh-sortuj .pl-filtr-przycisk > span:not(.icon) { display: none; }   /* wzór: na węższym ekranie sam wybór („Termin”), bez „Sortuj:” */
}
:root[data-ui="tablet"] .zh-filtry { display: none; }
:root[data-ui="tablet"] .zh-filtry-przycisk { display: inline-flex; }
:root[data-ui="tablet"] .zh-r2 .zh-szukaj { flex: 1 1 200px; }   /* wzór: podstawa 200 px */
:root[data-ui="tablet"] .zh-r1 .view { padding: 0 var(--s-2); }
:root[data-ui="tablet"] .zh-sortuj .pl-filtr-przycisk > span:not(.icon) { display: none; }
:root[data-ui="tablet"] :is(.zh-r1 .view, .zh-r2 .pl-filtr-przycisk, .zh-r2 .zh-szukaj, .zh-nowe) { min-height: 44px; }

/* === LISTA (ZH4) — grupy wg terminu albo projektu, wiersze z kółkiem / ikoną rodzaju, szczegół obok po kliknięciu. ===
   Kontenery .zn-two / .zn-tree / .zn-detail zostają (telefon: lista albo szczegół — ui/aplikacja-mobilna.js). */
.zl-dwa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; flex: none; }
.zl-dwa.is-sama { grid-template-columns: minmax(0, 1fr); }
.zl-dwa.is-sama .zl-szczegol { display: none; }
.zl-lista { overflow: visible; border-radius: var(--r); box-shadow: none; }
.zl-lista .zn-tree-body { overflow: visible; padding: 0; }
.zl-szczegol { position: sticky; top: var(--s-3); max-height: calc(100dvh / var(--skala-ui) - var(--topbar-h) - var(--s-6)); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
.zl-szczegol-gora { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-2); }
.zl-wroc { gap: var(--s-1); }
.zl-wroc .icon { width: 15px; height: 15px; }
.zl-grupa { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--h-control); padding: 0 var(--s-3) 0 var(--s-2); border: 0; border-top: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: var(--t-sm); font-weight: var(--w-regular); text-align: left; cursor: pointer; }
.zl-lista .zn-tree-body > .zl-grupa:first-child { border-top: 0; border-radius: var(--r) var(--r) 0 0; }
.zl-grupa:hover { background: var(--surface-3); }
.zl-grupa > .chev { width: 14px; height: 14px; color: var(--text-faint); }
.zl-grupa-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-grupa-n b { color: var(--accent); font-weight: var(--w-strong); }
.zl-grupa.is-po .zl-grupa-n { color: var(--danger); font-weight: var(--w-strong); }
.zl-grupa.is-dzis .zl-grupa-n { color: var(--accent); font-weight: var(--w-strong); }
.zl-licznik { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.zl-w { display: grid; grid-template-columns: 24px var(--h-control) minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-1); min-height: 52px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); border-top: 1px solid var(--line-soft); background: var(--surface); cursor: pointer; }
.zl-w:hover { background: var(--surface-2); }
.zl-w.is-sel { background: var(--accent-soft); }
.zl-w:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zl-w.is-kontekst .zl-tytul { color: var(--text-muted); }
.zl-car { display: grid; place-items: center; width: 24px; }
.zl-car-przycisk { display: grid; place-items: center; width: 24px; height: var(--h-control); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); cursor: pointer; }
.zl-car-przycisk:hover { background: var(--surface-3); color: var(--text); }
.zl-w > .todo-dot, .zl-w > .todo-odhacz { justify-self: center; }
.zl-w > .todo-dot { width: 10px; height: 10px; }
/* Odhaczanie jak we wzorze: pole kliknięcia = wysokość kontrolki (36 px, dotyk 44 px), w środku kółko 20 px; zrobione — pełne zielone. */
.zl-w > .todo-odhacz { width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; }
.zl-w > .todo-odhacz::before { content: ""; grid-area: 1 / 1; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; }
.zl-w > .todo-odhacz > .icon { grid-area: 1 / 1; width: 12px; height: 12px; }
.zl-w > .todo-odhacz:hover::before { border-color: var(--ok); }
.zl-w > .todo-odhacz.is-done::before { border-color: var(--ok); background: var(--ok); }
.zl-ikona { display: grid; place-items: center; justify-self: center; width: 24px; height: 24px; color: var(--text-faint); }
.zl-ikona .icon { width: 15px; height: 15px; }
.zl-ikona.is-over { color: var(--danger); }
.zl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-1) 0; }
.zl-t > b { display: flex; align-items: flex-start; gap: var(--s-1); min-width: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); }
.zl-tytul { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-w.is-gotowe .zl-tytul { color: var(--text-muted); text-decoration: line-through; }
.zl-m { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); color: var(--text-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.zl-m > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.zl-m .icon { width: 13px; height: 13px; }
.zl-nr { color: var(--text-muted); font-weight: var(--w-strong); }
.zl-etap { height: 20px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--hg-ton) 14%, transparent); color: color-mix(in srgb, var(--hg-ton) 80%, var(--text)); font-weight: var(--w-strong); }
.zl-rodzaj { font-weight: var(--w-bold); }
.zl-termin.is-po { color: var(--danger); font-weight: var(--w-strong); }
.zl-p { display: flex; align-items: center; gap: var(--s-1); }
.zl-w .zl-plus { width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); }
.zl-w .zl-plus:hover { background: var(--surface-3); color: var(--accent); }
.zl-plus { opacity: 0; }
.zl-w:hover .zl-plus, .zl-w.is-sel .zl-plus, .zl-plus:focus-visible { opacity: 1; }
.zl-dzieci { margin-left: calc(24px + var(--s-3)); border-left: 1px solid var(--line); }
/* Dotyk (tablet): kolumna strzałki znika, gdy wiersz nie ma podzadań (wzór: --zd-c); pola 44 px daje --h-control. */
:root[data-ui="tablet"] .zl-plus { opacity: 1; }
:root[data-ui="tablet"] .zl-w { --zl-c: 0px; grid-template-columns: var(--zl-c) var(--h-control) minmax(0, 1fr) auto; min-height: 56px; padding-left: var(--s-2); }
:root[data-ui="tablet"] .zl-w:has(> .zl-car > .zl-car-przycisk) { --zl-c: var(--h-control); padding-left: 0; }
:root[data-ui="tablet"] .zl-car { width: var(--zl-c); overflow: hidden; }
:root[data-ui="tablet"] .zl-car-przycisk { width: var(--h-control); }
@media (max-width: 1180px) { .zl-dwa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
/* Okno zadania nad widokiem: ten sam szczegół, bez ramki listy. */
.zh-okno-zadania .todo-detail { padding: 0; border: 0; box-shadow: none; }
/* Okna Zadań przewijają się w środku (nagłówek i „Zamknij” zostają): treść dłuższa niż okno była ucinana razem ze stopką.
   W oknie opis nie rozciąga się na resztę wysokości (na Liście tak) — inaczej edytor zgniatał się do paska narzędzi. */
.modal-form:is(.zh-okno-zadania, .zh-nowe-okno, .zb-okno) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-form.zh-okno-zadania { display: block; }
.zh-okno-zadania :is(.todo-detail, .todo-block-main, .todo-desc-form) { flex: none; min-height: auto; }
.zh-okno-zadania .rich-editor { flex: none; min-height: 180px; }

/* === ZH7: odpowiedź dla zlecającego w szczególe zadania, okno „Nowe zadanie” (formularz Listy w oknie). === */
.todo-odp { display: flex; flex: none; flex-direction: column; gap: var(--s-2); }
.todo-odp-tekst { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.todo-odp-tekst small { display: block; margin-top: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); }
.todo-odp-form { display: flex; align-items: flex-start; gap: var(--s-2); }
.todo-odp-form textarea { flex: 1; min-width: 0; min-height: 44px; resize: vertical; }
.zh-nowe-okno .zn-form { padding: 14px; border: 0; border-radius: var(--grupa-r); background: var(--surface); box-shadow: none; }   /* jedna biała grupa na tle okna — jak „Edytuj projekt” i „Nowy materiał” (19-modale-tresc.css) */
/* Okno jest duże (wzór „l”): opis rośnie do dołu okna zamiast zostawiać pustą połowę (przyciski stoją w stopce okna). */
.modal-form.zh-nowe-okno { display: flex; flex-direction: column; }
.zh-nowe-okno .zn-form { display: flex; flex-direction: column; flex: 1 0 auto; }
.zh-nowe-okno .zn-form .rich-editor { flex: 1 0 auto; }   /* rośnie do dołu okna, ale nie zapada się poniżej paska i pola (telefon, tablet) */
.zh-nowe-okno .zn-form-sub { display: none; }   /* „Nowe zadanie” stoi już w tytule okna */
/* Tablet: na stronie Zadań i w jej oknach cel dla palca co najmniej 44 px (polecenie b7). Kanon tabletu (03-kontrolki) daje
   40 px przez --h-control-sm — tu podnosimy próg tylko w obrębie Zadań, reszta programu bez zmian. */
:root[data-ui="tablet"] :is(.zh-strona, .modal.zh-okno-zadania-modal, .modal.zb-okno-modal, .modal.zh-nowe-okno-modal, .modal.zt-przenies-okno) { --h-control-sm: 44px; }