/* ============================================================================
   9-telefon/4b-projekty-pasek-i-karta.css — TELEFON: pasek listy Projekty, arkusz „Filtry”, karta projektu (v15 P9)
   ----------------------------------------------------------------------------
   Część domu telefonu (zasady: 9-telefon/1-podstawa.css). Nowe klasy v15 w osobnym pliku (4-projekty-zadania-czat.css
   ma zapadkę rozmiaru). Arkusz rysuje tylko telefon (widoki/projekty-pasek.js → arkuszFiltrowProjektowHtml).
   ============================================================================ */
/* v15 P9: pasek na telefonie — szukajka · „Filtry (n)” (arkusz od dołu) · ⋮ (Eksportuj, Przelicz, Co jeśli) · „+” Nowy projekt (wzór od 19.10.2026; wygląd: 9-telefon/29). */
:root[data-ui="mobile"] .pl-pasek { flex-wrap: nowrap; }
:root[data-ui="mobile"] :is(.pl-filtry, .pl-pasek-szerokie) { display: none; }
:root[data-ui="mobile"] .pl-pasek .pl-filtry-telefon { display: inline-flex; flex: none; gap: var(--s-2); padding: 0 var(--s-4); font-size: var(--t-sm); }
/* PK1 (b18): ⋮ paska jak przycisk wzoru (promień 12 px); lista: karty z promieniem 12 px co 8 px, nazwa krojem tytułów, kwota 16 / 600. */
:root[data-ui="mobile"] .project-cards { gap: var(--s-2); }
:root[data-ui="mobile"] .project-main-grid > .pl-pasek { margin-bottom: var(--s-2); }
:root[data-ui="mobile"] .mkarta { gap: var(--s-1); border-radius: var(--r); }
:root[data-ui="mobile"] .mkarta-nazwa { font-family: var(--font-tytul); }
/* PK8 (b18): telefon pionowo dokładnie jak wzór (.v2 przy liście do 760 px) — bez linii klienta, nazwa w jednej linii z wielokropkiem
   (pełna nazwa i klient są na karcie projektu po stuknięciu). Telefon poziomo: karty w dwóch kolumnach zostają z klientem. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .mkarta-klient { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .mkarta-nazwa { display: block; overflow: hidden; line-height: var(--lh-base); text-overflow: ellipsis; white-space: nowrap; }
/* PZ2 (b20): telefon POZIOMO = wzór „Telefon ↔” — lista jako TABELA w białej ramie (5 kolumn jak na tablecie: kontener
   lista-projektow ≤ 1000 px w 4-widoki/10b-projekty-lista.css), wiersz 72 px; w pasku „Nowy projekt” z napisem. */
:root[data-ui="mobile"][data-telefon-poziomo] .pl-pasek .pl-nowy { display: inline-flex; padding: 0 var(--s-4); font-size: var(--t-sm); }
:root[data-ui="mobile"][data-telefon-poziomo] .pl-wiersz:not(.pl-naglowek) { min-height: 72px; }
/* PZ8: długa notka pod ceną (z obiegiem wyceny) zawija się — na dotyku nie ma dymka z pełnym napisem (tablet: 4-widoki/10-projekty.css). */
:root[data-ui="mobile"] .prow-kwota > span:is(.prow-obieg-wyceny, [data-obieg-wyceny-licznik]) { overflow: visible; white-space: normal; line-height: 1.3; }
/* Lupa i podpowiedź pola szukania listy Projektów w kolorze i wadze wzoru także na telefonie (ogólna reguła etykiet telefonu daje
   ciemniejszy kolor i wagę 500). Reszta drobiazgów paska i nagłówka (PZ4 → PZ7) mieszka w 4-widoki/10b-projekty-lista.css. */
:root[data-ui="mobile"] .pl-pasek .pl-szukaj { color: var(--text-faint); font-weight: var(--w-regular); }
/* Pod listą 24 px jak we wzorze: obszar treści telefonu zostawia na dole miejsce na pływające „+” (--fab), którego tu nie ma. */
:root[data-ui="mobile"][data-telefon-poziomo] .pl-uklad { margin-bottom: calc(var(--fab) * -1); }
:root[data-ui="mobile"][data-telefon-poziomo] #content .is-table-mode > .pl-ramka { overflow: clip; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
:root[data-ui="mobile"] .mkarta-kwota { font-weight: var(--w-bold); line-height: var(--lh-base); }
:root[data-ui="mobile"] .mkarta-kwota small { line-height: var(--lh-base); }
/* Numer jak .v2-nr wzoru: zwykłe cyfry, w pionie na środku pierwszego wiersza karty. */
:root[data-ui="mobile"] .mkarta-gora { align-items: center; }
:root[data-ui="mobile"] .mkarta-nr { line-height: var(--lh-base); font-variant-numeric: normal; }
/* Odstęp strony u góry 12 px jak we wzorze telefonu (obszar treści ma 16 px): lista i karta projektu 4 px wyżej. */
:root[data-ui="mobile"] :is(.pl-uklad, .pk-strona) { margin-top: calc(var(--s-1) * -1); }
:root[data-ui="mobile"] .mkarta-kwota .kwota-waluta { color: var(--text-faint); font-size: var(--t-xs); }
:root[data-ui="mobile"] .pl-pasek .toolbar-menu-telefon { display: block; }
.pl-arkusz-zaslona { position: fixed; inset: 0; z-index: calc(var(--z-szuflada) - 2); background: color-mix(in srgb, var(--zaslona-kolor) 45%, transparent); }
.pl-arkusz { position: fixed; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-szuflada) - 1); display: flex; flex-direction: column; gap: var(--s-3); max-height: calc(100dvh - var(--s-2)); padding: var(--s-2) var(--s-4) 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: var(--cien-3); outline: 0; }
.pl-arkusz::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.pl-arkusz-glowa { display: flex; align-items: center; justify-content: space-between; }
/* v15 b10: ✕ arkusza „Filtry” (Projekty, Zadania, Klienci) — cel dotyku 44 px. */
:root[data-ui="mobile"] .pl-arkusz-glowa > .icon-button { width: 44px; height: 44px; }
.pl-arkusz-glowa h2 { margin: 0; font-size: var(--t-lg); font-weight: var(--w-bold); }
.pl-arkusz-etykieta { display: block; margin-bottom: var(--s-2); color: var(--text-muted); font-size: var(--t-sm); font-weight: 700; }
.pl-arkusz-opcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pl-arkusz-opcje > button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-base); font-weight: 600; white-space: nowrap; }
.pl-arkusz-opcje > button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--surface); }
.pl-arkusz-stopka { position: sticky; bottom: 0; display: flex; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); border-top: 1px solid var(--line); background: var(--surface); }
.pl-arkusz-stopka .button { flex: 1; min-height: 48px; }
/* Karta projektu jako osobny ekran (v15 b12, wzór „okno Projekt”): układ z 4-widoki/10c i 10d (zależy od szerokości karty);
   tu tylko pole szukania w liście wersji Designu — ogólna reguła pól telefonu (1-podstawa.css) ma wysoką wagę. */
/* PK0c (b18): karta projektu na telefonie = jedna karta jak .panp.strona wzoru — przewija się cała treść, „‹ Projekty” w nagłówku
   jako odnośnik (44 px), bez sterowania oknem. */
:root[data-ui="mobile"] .pk-strona { overflow: visible; border-radius: var(--r); }
:root[data-ui="mobile"] .pk-strona .pk-cialo { overflow: visible; }
:root[data-ui="mobile"] .pk-strona .pk-wstecz { gap: var(--s-2); height: 44px; margin-bottom: var(--s-1); padding: 0; border: 0; background: none; font-size: var(--t-md); }
:root[data-ui="mobile"] .pk-wersje .pk-wersje-gl input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { min-height: 44px; margin-top: var(--s-1); border-radius: var(--r); }
:root[data-ui="mobile"] .pk-wersje.niski .pk-wersje-gl input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { margin-top: 0; }
/* Szukajka listy: ramka jest na całym polu z ikoną (.pl-szukaj), samo pole bez własnej ramki i tła (ogólna reguła pól
   telefonu w 1-podstawa.css ma wysoką wagę — stąd długi selektor). Czcionka 16 px zostaje (bez powiększania na iOS). */
:root[data-ui="mobile"] :is(.pl-pasek .pl-szukaj, .kl-pasek .kl-szukaj, .pz-glowa .pz-szukaj) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-ui="mobile"] .pl-szukaj { height: var(--h-control); }
.pl-arkusz-stopka .button { gap: .3em; }