/* ============================================================================
   16c-pulpit-firma.css — Pulpit: zakładki Firma / Moja sprzedaż i Prezentacje (v15 b4 PU5; b8 PW1–PW3, 03.10.2026)
   ----------------------------------------------------------------------------
   Dom klas pf-* (bloki Firmy, także panele „Mojego pulpitu”) i pz-* (Prezentacje). Wzór: scratchpad/pulpit/pulpit_czesc.txt
   (.pf, .pd-k, .pf-w, .pf-tr, .pf-lej, .pf-tm, .pf-tw, .pd-tab, .pd-v). Szerokość pyta kontener „pulpit” (16b-pulpit.css,
   .pd-widok). Próg wzoru 1180 px liczony był z szerokości przewijanej treści RAZEM z jej marginesem (2 × 32 px), kontener
   „pulpit” mierzy treść bez marginesu — stąd 1116 px. Telefon: 9-telefon/8-moj-pulpit.css. Tylko tokeny.
   ============================================================================ */

/* === 1. UKŁAD: bloki w dwóch kolumnach (PU5, widoki/pulpit-firma.js) ====================================== */
.pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--s-4); min-width: 0; }
.pf > .pf-cala, .pf > .pf-zakres { grid-column: 1 / -1; }
.pf-kolumna { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pf-kolumna > .pf-blok:last-child { flex: 1; }
@container pulpit (max-width: 1116px) {
  .pf > :is(.pf-blok-terminy, .pf-kolumna) { grid-column: 1 / -1; }
}

/* === 2. BLOK i WIERSZE LICZB (wzór .pd-k, .pf-w) — także panele „Mojego pulpitu” =========================== */
.pf-blok { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pf-blok-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
.pf-blok-glowa h3 { margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); }
.pf-blok-glowa small { color: var(--text-faint); font-size: var(--t-xs); }
.pf-wiersze { margin: 0; }
.pf-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); min-height: 56px; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line-soft); }
.pf-wiersz:first-child { border-top: 0; }
.pf-wiersz dt { min-width: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); }
.pf-wiersz dt small { display: block; margin-top: 2px; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
.pf-wiersz dd { margin: 0; font-size: var(--t-md); font-weight: var(--w-strong); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-wiersz dd.is-ok { color: var(--ok-strong); }
.pf-pusto { margin: 0; padding: var(--s-3) var(--s-4); color: var(--text-muted); font-size: var(--t-sm); }
.pf-wiecej { margin: 0; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: var(--t-xs); }
/* „Tylko Twoje projekty” nad blokami handlowca. */
.pf-zakres { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r); background: var(--accent-soft); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); }
.pf-zakres .icon { flex: none; width: 16px; height: 16px; color: var(--accent-strong); }

/* === 3. TREND — oferty i sprzedane w miesiącach, słupki obok siebie (wzór .pf-tr) =========================== */
.pf-legenda { display: inline-flex; gap: var(--s-3); margin-left: auto; color: var(--text-muted); font-size: var(--t-xs); }
.pf-legenda i { display: inline-block; width: 10px; height: 10px; margin-right: var(--s-1); border-radius: 2px; vertical-align: -1px; }
.pf-trend { display: grid; flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: var(--s-1); min-height: 200px; padding: var(--s-4) var(--s-4) var(--s-3); }
.pf-trend-kol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1); height: 100%; min-width: 0; }
.pf-trend-slupki { display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; }
.pf-trend-slupki i { display: block; width: 38%; max-width: 14px; border-radius: 3px 3px 0 0; }
:is(.pf-trend-slupki, .pf-legenda) i.is-oferty { background: var(--tone-plans); }
:is(.pf-trend-slupki, .pf-legenda) i.is-sprzedane { background: var(--ok-strong); }
.pf-trend-kol small { color: var(--text-faint); font-size: var(--t-xs); }
.pf-trend-kol.is-biezacy small { color: var(--text); font-weight: var(--w-strong); }

/* === 4. LEJEK — pigułka etapu | pasek | liczba (wzór .pf-lej) ============================================= */
.pf-lejek { display: flex; flex-direction: column; padding: var(--s-2) var(--s-2) var(--s-3); }
.pf-lejek-w { display: grid; grid-template-columns: 132px minmax(0, 1fr) 40px; align-items: center; gap: var(--s-3); min-height: var(--h-tab); padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.pf-lejek-w:hover { background: var(--surface-2); }
.pf-lejek-w b { text-align: right; font-variant-numeric: tabular-nums; }
.pf-tor { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.pf-tor i { display: block; height: 100%; border-radius: var(--r-pill); }

/* === 5. TERMINY i WYCENY — wiersze projektu (wzór .pf-tm, .pf-tw) ========================================== */
.pf-terminy + .pf-terminy { border-top: 1px solid var(--line); }
.pf-terminy h4 { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4) var(--s-1); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-strong); line-height: var(--lh-base); }
.pf-terminy h4.is-po { color: var(--danger); }
.pf-terminy h4 small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pf-tw { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-1) var(--s-4); border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.pf-tw:hover { background: var(--surface-2); }
.pf-tw.is-wycena { grid-template-columns: minmax(0, 1fr) auto; }
.pf-tw-nazwa { display: -webkit-box; min-width: 0; overflow: hidden; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pf-tw-nazwa b { color: var(--accent-strong); font-weight: var(--w-strong); }
.pf-tw-data { color: var(--text-muted); font-weight: var(--w-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-tw-data.is-po { color: var(--danger); }
.pf-rodzaj { justify-self: start; padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.pf-rodzaj.is-po { background: var(--danger-soft); color: var(--danger); }
.pf-rodzaj.is-wkrotce { background: var(--warn-soft); color: var(--warn-strong); }
/* Tablet: wiersz projektu ≥ 44 px także przy jednej linii (ogólna reguła tabletu daje przyciskom min. 40 px i wygrywa
   szczegółowością z min-height — tor siatki 35 px + odstępy 2 × 4 px + kreska 1 px = 44 px jak we wzorze). */
:root[data-ui="tablet"] .pf-tw { grid-auto-rows: minmax(35px, auto); }
.pf-flagi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }
.pf-flaga { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-strong); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }

/* === 6. TABELE — Obciążenie zespołu, Najwięksi klienci, 10 projektów (wzór .pd-tab) ======================= */
.pf-tabela-wrap { overflow-x: auto; }
.pf-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pf-tabela th { padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; white-space: nowrap; }
.pf-tabela td { padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pf-tabela tbody tr:last-child td { border-bottom: 0; }
.pf-tabela tbody tr:hover { background: var(--surface-2); }
.pf-tabela .is-liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-tabela td small { display: block; color: var(--text-faint); font-size: var(--t-xs); }

/* === 7. PREZENTACJE — jedna karta, wersje pogrupowane po projektach (PW3, widoki/pulpit-prezentacje.js; wzór .pd-pn, .pd-v) ===
   Wiersz: strzałka | Wersja | Otwarcia | Ostatnio | Akceptacja | Sesje | ROI | PDF | Średni czas. Węższa treść: bez Sesji, ROI, PDF. */
.pz-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
.pz-glowa h3 { margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); }
.pz-glowa small { color: var(--text-faint); font-size: var(--t-xs); }
.pz-szukaj { flex: 1 1 280px; max-width: 420px; }
.pz-szukaj input { text-overflow: ellipsis; }
.pz-w { display: grid; grid-template-columns: var(--h-tab) minmax(0, 1.3fr) repeat(7, minmax(0, .7fr)); align-items: center; gap: var(--s-2); width: 100%; min-height: 48px; padding: 0 var(--s-4) 0 var(--s-2); border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.pz-w:hover { background: var(--surface-2); }
/* Tablet: ogólna reguła tabletu (min. 40 px) wygrywa z min-height — wysokość wiersza przez tor siatki (47 px + kreska 1 px = 48 px jak we wzorze). */
:root[data-ui="tablet"] .pz-w:not(.pz-nazwy) { grid-auto-rows: minmax(47px, auto); }
.pz-w[aria-expanded="true"] { background: var(--accent-soft); }
.pz-w > .icon { justify-self: center; width: 14px; height: 14px; color: var(--text-faint); transition: transform var(--szybko) ease; }
.pz-w[aria-expanded="true"] > .icon { transform: rotate(90deg); }
.pz-w > span { min-width: 0; }
.pz-w .is-liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pz-wersja b { font-weight: var(--w-strong); }
.pz-wersja small { margin-left: var(--s-1); color: var(--text-faint); font-size: var(--t-xs); }
.pz-w.pz-nazwy { min-height: 36px; border-top: 0; background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); cursor: default; }
.pz-akceptacja { color: var(--ok-strong); font-weight: var(--w-strong); }
.pz-grupa { border-top: 1px solid var(--line); }
.pz-grupa-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4) 0; font-size: var(--t-sm); }
.pz-grupa-glowa b { font-weight: var(--w-bold); }
.pz-grupa-glowa > span { color: var(--text-faint); }
.pz-numer { display: inline-flex; align-items: center; height: var(--h-tab); padding: 0; border: 0; background: transparent; color: var(--accent-strong); font: inherit; font-weight: var(--w-strong); cursor: pointer; }
button.pz-numer:hover { text-decoration: underline; }
.pz-szczegoly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-5); padding: var(--s-3) var(--s-4) var(--s-4) calc(var(--s-4) + var(--h-tab)); border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.pz-szczegoly h5 { margin: 0 0 var(--s-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.pz-szczegoly .pf-pusto { padding: 0; }
.pz-szczegoly .pf-tabela td small { display: block; }
.pz-szczegoly .pf-tabela td:is(:first-child, :nth-child(4)) { white-space: nowrap; }
.pz-sekcja { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; align-items: center; gap: var(--s-2); min-height: 28px; font-size: var(--t-sm); }
.pz-sekcja b { text-align: right; font-variant-numeric: tabular-nums; }
.pz-sekcja .pf-tor { height: 8px; }
.pz-sekcja .pf-tor i { border-radius: 0; background: var(--accent); }
@container pulpit (max-width: 1116px) {
  .pz-w { grid-template-columns: var(--h-tab) minmax(0, 1.3fr) repeat(4, minmax(0, .7fr)); }
  .pz-w :is(.pz-k-ses, .pz-k-roi, .pz-k-pdf) { display: none; }
  .pz-szczegoly { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}