/* ============================================================================
   16h-przypisywanie.css — Pulpit → Działy → Design: panel „Do przypisania”, pasek „Niezatwierdzone zmiany Designu”, paski robocze, przeciąganie
   (28.10.2026, js/zadania/przypisywanie-*.js).
   ----------------------------------------------------------------------------
   Szkielet osi i pasków z 15d / 16d (.zo-*, .pd-pasek), podświetlenie wiersza docelowego z 16g (.pp-cel). Tu tylko to, czego tamte nie mają: lista kafelków projektów,
   pasek zmian z „Zatwierdź plan / Odrzuć”, kreskowany pasek roboczy, „kartka” pod kursorem. Tylko tokeny (jasny i ciemny motyw), bez surowych kolorów.
   ============================================================================ */
.pr-obszar { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.zh-cialo > .pr-obszar { margin-bottom: var(--s-4); }   /* na stronie Zadania ciało widoku nie ma odstępu między dziećmi (w Działach daje go .pd-dzialy) */

/* === PASEK „NIEZATWIERDZONE ZMIANY DESIGNU” === */
.pr-zmiany { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-3); border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.pr-zmiany-opis { display: flex; flex: 1 1 200px; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--t-sm); }
.pr-zmiany-opis b { font-weight: var(--w-bold); }
.pr-zmiany-opis small { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.pr-zmiany-info { flex: 2 1 240px; color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-tight); }
.pr-zmiany-akcje { display: flex; flex: none; gap: var(--s-2); margin-left: auto; }

/* === PANEL „DO PRZYPISANIA” === */
.pr-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pr-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); padding: var(--s-1) var(--s-3); }
.pr-zwin { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-control-sm); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.pr-zwin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-licznik { min-width: 22px; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 22px; text-align: center; }
.pr-strzalka { width: 16px; height: 16px; color: var(--text-muted); transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.pr-zwin[aria-expanded="true"] .pr-strzalka { transform: rotate(180deg); }
.pr-podpowiedz { flex: 1 1 240px; min-width: 0; color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-tight); }
.pr-panel.is-zwiniety .pr-glowa { padding-block: 0; }
.pr-pusto { margin: 0; padding: 0 var(--s-1); color: var(--text-muted); font-size: var(--t-xs); }

.pr-lista { display: flex; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-3); overflow-x: auto; scrollbar-width: thin; }
.pr-kafel { position: relative; flex: 0 0 236px; min-width: 0; }
.pr-kafel-glowny { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.pr-kafel-glowny[data-pr-ciagnij="1"] { cursor: grab; }
.pr-kafel-glowny:active { transform: scale(.98); }
.pr-kafel-glowny:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .pr-kafel-glowny:hover { border-color: var(--line-strong); background: var(--surface-3); }
}
.pr-k-numer, .pr-k-nazwa { padding-right: var(--h-control-sm); }   /* miejsce na przycisk „Otwórz Design” w rogu kafelka */
.pr-k-numer { width: 100%; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); text-overflow: ellipsis; white-space: nowrap; }
.pr-k-nazwa { width: 100%; box-sizing: border-box; overflow: hidden; font-size: var(--t-sm); font-weight: var(--w-bold); line-height: var(--lh-tight); text-overflow: ellipsis; white-space: nowrap; }
.pr-k-klient { width: 100%; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.pr-k-meta { display: flex; justify-content: space-between; gap: var(--s-2); width: 100%; margin-top: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); }
.pr-k-stan { color: var(--text); font-weight: var(--w-strong); }
.pr-k-stan.is-stary { color: var(--danger); }
.pr-k-otworz { position: absolute; top: var(--s-1); right: var(--s-1); }

/* Chwycony kafelek / pasek: oryginał blednie, na dotyku po przytrzymaniu „unosi się” (ramka akcentu) zanim ruszy. */
:is(.pr-kafel-glowny, .pr-pasek).is-przeciagany { opacity: .35; }
:is(.pr-kafel-glowny, .pr-pasek).is-uniesiony { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--cien-2); }
:is(.pr-kafel-glowny, .pr-pasek).is-przeciagany.is-uniesiony { outline: 0; box-shadow: none; }
:root:not([data-ui="desktop"]) :is([data-pr-ciagnij], .pr-pasek) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* === PASEK ROBOCZY NA OSI: kreskowany, jak pasek „planowany”, ale z ukośnym wzorem — to brudnopis, nie obowiązujący termin === */
.zo-pasek.pd-pasek.pr-pasek { border-style: dashed; background-color: color-mix(in srgb, var(--hg-ton) 8%, var(--surface)); background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--hg-ton) 16%, transparent) 7px 14px); cursor: grab; }
.zo-pasek.pd-pasek.pr-pasek:hover { background-color: color-mix(in srgb, var(--hg-ton) 18%, var(--surface)); }
.pr-pasek.is-pusty { padding: 0; min-width: 8px; }

/* „Duch” w wierszu docelowym i „kartka” pod kursorem. */
.zo-pasek.pr-duch { border-style: solid; border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.pr-chip { position: fixed; z-index: var(--z-menu-nad-trescia); display: flex; flex-direction: column; gap: 1px; max-width: 320px; padding: var(--s-1) var(--s-2); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--cien-2); color: var(--text); font-size: var(--t-xs); line-height: var(--lh-tight); pointer-events: none; }
.pr-chip b { font-weight: var(--w-bold); }
.pr-chip span { color: var(--text-muted); }
.pr-chip.is-zle { border-color: var(--line-strong); }

/* === DOTYK I TELEFON === */
:root:not([data-ui="desktop"]) :is(.pr-k-numer, .pr-k-nazwa) { padding-right: var(--h-control); }
:root[data-ui="tablet"] .pr-zwin { min-height: var(--h-control); }
:root[data-ui="mobile"] .pr-zwin { min-height: var(--h-control); }
:root[data-ui="mobile"] .pr-kafel { flex-basis: 220px; }
:root[data-ui="mobile"] .pr-zmiany-akcje { width: 100%; margin-left: 0; }
:root[data-ui="mobile"] .pr-zmiany-akcje .button { flex: 1 1 0; }
:root[data-ui="mobile"][data-telefon-poziomo] .pr-podpowiedz { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .pr-zmiany-info { display: none; }
/* Telefon poziomo (okno ~340 px wysokości): pasek zmian w jednym wierszu, bez listy projektów pod tytułem — oś ma dostać resztę wysokości. */
:root[data-ui="mobile"][data-telefon-poziomo] .pr-zmiany { flex-wrap: nowrap; padding-block: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .pr-zmiany-opis small { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .pr-zmiany-akcje { width: auto; margin-left: auto; }
:root[data-ui="mobile"][data-telefon-poziomo] .pr-zmiany-akcje .button { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .pr-strzalka, .pr-kafel-glowny { transition: none; }
}