/* ============================================================================
   16d-pulpit-dzialy.css — Pulpit → zakładka „Działy” (28.10.2026, widoki/pulpit-dzialy.js, pulpit-dzialy-przeciaganie.js)
   ----------------------------------------------------------------------------
   Szkielet z Pulpitu (16b-pulpit.css: .pd-glowa, .pd-zakladki, .pm-filtr), widoki z Zadań (15*-zadania-*.css: .zo-*, .zg-*, lista, tablica, kalendarz).
   Tu tylko to, czego Zadania nie mają: paski Timeline z numerem projektu i statusem, uchwyty przeciągania, status fazy w Gantcie, sortowanie kolumny.
   Tylko tokeny (jasny i ciemny motyw), bez nowych ramek — komponenty niosą własne.
   ============================================================================ */
.pd-dzialy { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pd-dzialy-filtry { flex-wrap: wrap; align-items: center; }
.pd-dzialy-prawo { flex-wrap: wrap; }

/* === TIMELINE: PASEK DWULINIOWY (nazwa / numer projektu · co to jest · status) === */
.zo-pasek.pd-pasek { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: 40px; padding: 0 var(--s-2); }
.pd-pasek .t { flex: none; width: 100%; font-size: var(--t-sm); font-weight: var(--w-bold); line-height: 1.2; }
.pd-pasek .p { flex: none; width: 100%; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pd-pasek.is-pusty { padding: 0; min-width: 8px; }
/* Napis obok wąskiego paska — ta sama treść, żeby nic nie było „bez nazwy”. */
.pd-poza { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 40px; overflow: hidden; pointer-events: none; }
.pd-poza b { overflow: hidden; font-size: var(--t-sm); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pd-poza small { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

/* Status: kolor jest dodatkiem, status jest zawsze też słowem. Planowany = kreskowana ramka. */
.pd-pasek.st-done { --hg-ton: var(--status-gotowy); }
.pd-pasek.st-late { --hg-ton: var(--danger); }
.pd-pasek.st-planned { --hg-ton: var(--status-oczekuje); border-style: dashed; }
.pd-pasek.st-active { --hg-ton: var(--status-wtoku); }

/* === GANTT DZIAŁU: kolumna projektu bez ucięcia numeru, wyższe wiersze i fazy, status fazy === */
.pd-dzialy .zg-w-projekt { min-height: 56px; }
.pd-dzialy .zg-projekt-1 > b { flex: none; }
.pd-dzialy .zg-faza { height: 26px; margin-top: -13px; font-size: var(--t-sm); line-height: 26px; }
.pd-dzialy .zg-faza.st-done { opacity: 1; background: var(--status-gotowy); color: var(--on-accent); }
.pd-dzialy .zg-faza.st-late { background: var(--danger); color: var(--on-accent); }
.pd-dzialy .zg-faza.st-planned { box-sizing: border-box; border: 1px dashed var(--status-oczekuje); background: color-mix(in srgb, var(--status-oczekuje) 16%, var(--surface)); color: var(--text); }
.pd-dzialy .zg-faza.st-active { background: var(--status-wtoku); color: var(--on-accent); }

/* === SORTOWANIE W NAGŁÓWKU KOLUMNY === */
.zo-rog:has(.pd-sortowanie) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.pd-sortowanie { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.pd-sort { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 28px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); cursor: pointer; }
.pd-sort:hover { background: var(--surface-3); color: var(--text); }
.pd-sort.is-aktywny { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.pd-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-sort .icon { width: 14px; height: 14px; }
.pd-kier.is-rosnaco { transform: rotate(180deg); }

/* === DOTYK I TELEFON === */
:root[data-ui="tablet"] .pd-sort, :root[data-ui="mobile"] .pd-sort { min-height: 44px; padding: 0 var(--s-3); }
:root[data-ui="mobile"] .pm-filtry.pd-dzialy-filtry { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
:root[data-ui="mobile"] .pd-dzialy-filtry .pm-filtry-lewo, :root[data-ui="mobile"] .pd-dzialy-prawo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s-3) * -1); padding-inline: var(--s-3); }
:root[data-ui="mobile"] .pd-dzialy-filtry .pm-filtr { flex: none; }
:root[data-ui="mobile"] .pd-dzialy-prawo { margin-left: 0; }
:root[data-ui="mobile"] .pd-dzialy-prawo .pm-kreska { display: none; }
:root[data-ui="mobile"] .pd-zakladki:has(.pd-zakladka:nth-child(4)) .pd-zakladka { flex: 1 1 auto; padding: 0 var(--s-2); font-size: var(--t-xs); white-space: nowrap; }

/* === TELEFON POZIOMO (28.10.2026): okno ma ~340 px wysokości — powitanie znika (zostają zakładki Pulpitu), dział i widok w jednym rzędzie, oś czasu dostaje resztę wysokości === */
:root[data-ui="mobile"][data-telefon-poziomo] .pd-glowa:has(+ .pd-dzialy) { justify-content: flex-end; padding-bottom: var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-glowa:has(+ .pd-dzialy) .pd-witaj { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .pm-filtry.pd-dzialy-filtry { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--s-3); }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-filtry .pm-filtry-lewo { flex: 0 1 auto; min-width: 0; margin-inline: 0; padding-inline: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-prawo { flex: none; margin-inline: 0 0; margin-left: auto; padding-inline: 0; overflow: visible; }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-prawo .pm-kreska { display: block; }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-filtry { gap: var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-filtry :is(.pm-filtry-lewo, .pd-dzialy-prawo) { gap: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-filtry .pm-filtr { min-height: 40px; padding-inline: var(--s-3); font-size: var(--t-xs); }
/* Rząd działów węższy niż jego treść: zanik na prawym brzegu zamiast twardego ucięcia przycisku. */
:root[data-ui="mobile"][data-telefon-poziomo] .pd-dzialy-filtry .pm-filtry-lewo { mask-image: linear-gradient(to right, currentColor calc(100% - var(--s-4)), transparent); }