/* ============================================================================
   13-lista-rozwijana-wiele.css — lista rozwijana z wyborem wielu pozycji (osoby; 29.10.2026)
   Komponent: js/okna/lista-rozwijana-wiele.js. TEN SAM panel, arkusz i pozycje co lista jednokrotna (03-kontrolki.css, 12-lista-rozwijana-dotyk.css) —
   tu tylko to, co dochodzi: pole wyboru (ptaszek) w pozycji, nagłówek z samym „Szukaj…” w panelu na komputerze, stopka z licznikiem i „Gotowe”.
   Wysokości i odstępy z tokenów (--h-control, --s-*); pismo pozycji 14 px (--t-base), podpis roli --t-xs.
   ============================================================================ */
.combo-wiele { display: block; }
/* Panel wielokrotny: stały nagłówek (szukaj) i stopka, przewija się tylko lista pozycji. */
.combo-wiele.is-open .combo-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.combo-wiele .combo-opcje { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2); }
.combo-wiele .combo-opcje:focus { outline: none; }

/* Komputer: w nagłówku tylko pole „Szukaj…” (uchwyt, tytuł i ✕ należą do arkusza); lista ≤ 8 pozycji — bez nagłówka. */
.combo-wiele:not(.combo-arkusz) .combo-naglowek { flex: none; padding: var(--s-2) var(--s-2) 0; }
.combo-wiele:not(.combo-arkusz) :is(.combo-uchwyt, .combo-naglowek-wiersz) { display: none; }
.combo-wiele.is-open:not(.combo-arkusz):not(.combo-bez-szukania) .combo-naglowek { display: block; }
.combo-bez-szukania .combo-szukaj { display: none; }
.combo-bez-szukania:not(.combo-arkusz) .combo-naglowek { display: none; }
:root .combo-wiele:not(.combo-arkusz) .combo-szukaj > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input).combo-szukaj-pole { height: var(--h-control); }
/* Arkusz bez pola „Szukaj…” (krótka lista): sam uchwyt i tytuł. */
.combo-bez-szukania.combo-arkusz .combo-naglowek { padding-bottom: var(--s-1); }

/* Pozycja: [pole wyboru] [awatar] nazwa …… rola. Pole wyboru to prawdziwy <input> (zostaje w formularzu), schowany; widać ptaszek. */
.combo-option-wiele { position: relative; gap: var(--s-2); padding-block: var(--s-1); font-size: var(--t-base); }
.combo-option-wiele > .combo-wiele-wybor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combo-ptak { display: grid; flex: none; place-items: center; width: calc(var(--s-4) + var(--s-1) / 2); height: calc(var(--s-4) + var(--s-1) / 2); border: 1px solid var(--pole-ramka); border-radius: var(--s-1); background: var(--pole-tlo); color: var(--on-accent); }
.combo-ptak .icon { width: var(--s-3); height: var(--s-3); opacity: 0; }
.combo-option-wiele.is-selected { color: var(--text); font-weight: var(--w-regular); }
.combo-option-wiele.is-selected .combo-ptak { border-color: var(--accent); background: var(--accent); }
.combo-option-wiele.is-selected .combo-ptak .icon { opacity: 1; }
.combo-option-wiele.is-selected:not(.is-active) { background: var(--accent-soft); }
.combo-wiele-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-medium); }
.combo-wiele-podpis { flex: 0 1 auto; max-width: 42%; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
/* Pozycja stała (np. osoba, której nie da się odznaczyć): zaznaczona i przygaszona, bez ręki. */
.combo-option-wiele.is-disabled { cursor: default; opacity: .6; }
.combo-wiele[data-zablokowana] > .combo-input { cursor: not-allowed; }

/* Stopka panelu: licznik po lewej, „Gotowe” po prawej (na dotyku nad paskiem bezpieczeństwa — pad. robi panel arkusza). */
.combo-stopka { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.combo-licznik { color: var(--text-muted); font-size: var(--t-sm); }
/* Telefon poziomo (mało wysokości): stopka niższa — lista dostaje więcej miejsca nad klawiaturą ekranową. */
:root[data-ui="mobile"][data-telefon-poziomo] .combo-stopka { padding-block: var(--s-1); }