/* ============================================================================
   10b-projekty-lista.css — lista „Projekty” wg zatwierdzonego wyglądu (v15, 02.10.2026)
   ----------------------------------------------------------------------------
   P2: wiersz i nagłówek sortowania. PK1 (b18, 04.10.2026): wysokości jak we wzorze — nazwa stoi w polu wysokości kontrolki
   (36 px, dotyk 44), pod nią klient: wiersz 74 px przy nazwie w jednej linii, 79 px przy dwóch. Renderer: public/js/widoki/projekty-lista.js
   (renderProjectRow, renderProjectsSortHeader), drobne elementy: widoki/projekty-elementy.js.
   Kolumny opisuje JEDNA siatka tabeli (`.project-table`); nagłówek i wiersze ją dziedziczą (subgrid), więc podpis
   zawsze stoi nad swoją daną. Skrajne tory `bok` (4 px + odstęp 12 px) = odsunięcie treści 16 px od krawędzi.
   Szerokość LISTY (kontener `lista-projektow`), nie ekranu, decyduje o liczbie kolumn: lista ≤ 1000 px (karta
   projektu obok, tablet, wąskie okno) ma 5 kolumn — bez normy, osób i akcji (są w karcie projektu).
   Kolory, krój i odstępy — tokeny programu (00-tokens.css), bez nowych progów @media.
   ============================================================================ */
.project-table { display: grid; grid-template-columns: [bok-l] 4px [nr] 92px [nazwa] minmax(0, 1fr) [norma] 56px [etap] minmax(112px, max-content) [status] minmax(104px, max-content) [kwota] minmax(120px, max-content) [osoby] minmax(88px, max-content) [akcje] max-content [bok-p] 4px; column-gap: var(--s-3); align-content: start; min-width: 0; overflow-x: clip; background: var(--surface); }
.project-table.bez-kwot { grid-template-columns: [bok-l] 4px [nr] 92px [nazwa] minmax(0, 1fr) [norma] 56px [etap] minmax(112px, max-content) [status] minmax(104px, max-content) [osoby] minmax(88px, max-content) [akcje] max-content [bok-p] 4px; }
.project-table.bez-kwot .prow-kwota { display: none; }
.project-table > * { grid-column: 1 / -1; }
/* --- Wiersz --- */
.pl-wiersz { display: grid; grid-template-columns: subgrid; align-items: center; min-height: 60px; padding-block: var(--s-2); border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background var(--szybko); }
.pl-wiersz:not(.pl-naglowek):hover { background: var(--surface-2); }
.pl-wiersz[aria-selected="true"], .pl-wiersz[aria-selected="true"]:hover { background: var(--accent-soft); }
.pl-wiersz:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-nr { grid-column: nr; color: var(--accent-strong); font-size: var(--t-sm); font-weight: var(--w-heavy); white-space: nowrap; }
/* Nazwa: pole wysokości kontrolki (wzór: .lnk), tekst w pionie na środku; druga linia nazwy powiększa pole. */
.pl-nazwa { grid-column: nazwa; display: grid; grid-template-rows: minmax(var(--h-control), auto) auto; align-items: center; min-width: 0; }
.pl-nazwa > b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--t-md); font-weight: var(--w-bold); line-height: 1.3; }
.pl-nazwa > small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-faint); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.pl-norma { grid-column: norma; justify-self: start; }
.pl-norma > span { display: inline-block; padding: 2px var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pl-etap { grid-column: etap; }
.pl-status { grid-column: status; }
.pl-osoby { grid-column: osoby; justify-self: start; }
/* Osoby (wzór: .osw): kółka 24 px z obwódką 2 px w kolorze tła, jedno obok drugiego (pole 28 px, odstęp 2 px) — bez nachodzenia. */
.pl-osoby .inline-actions, .pl-osoby .avatar-stack { gap: 2px; }
.pl-osoby .avatar { margin: 2px; box-shadow: 0 0 0 2px var(--surface); font-weight: var(--w-strong); }
.pl-osoby .avatar-stack .avatar + .avatar { margin-left: 2px; }
.pl-akcje { grid-column: akcje; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
/* Ikona działania w wierszu — kwadrat wysokości kontrolki z ramką (wzór: .ikw2). Jedna reguła dla Projektów i Klientów (.kl-ikona). */
.pl-akcje .icon-button, .kl-ikona { position: relative; display: grid; place-items: center; width: var(--h-control); height: var(--h-control); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); }
.pl-akcje .icon-button:hover, .kl-ikona:hover { background: var(--surface-2); color: var(--text); }
.pl-akcje .icon-button > .icon, .kl-ikona > .icon { width: 16px; height: 16px; }
/* Ton przycisku z napisu (ui/tony-przyciskow.js) dawał koszowi szare tło — we wzorze kosz jak ołówek: białe tło z ramką, czerwona ikona. */
.pl-akcje .icon-button:is(.danger, [data-btn-tone]), .kl-ikona[data-btn-tone] { border-color: var(--line); background: var(--surface); }
.pl-akcje .icon-button:is(.danger, [data-btn-tone]):hover, .kl-ikona[data-btn-tone]:hover { background: var(--surface-2); }
.pl-akcje .icon-button.danger, .kl-ikona.kl-usun, .kl-ikona.kl-usun[data-btn-tone] { color: var(--danger); }
/* Licznik na ikonie (czat, zadania) — w rogu kwadratu, w kolorze akcentu (wzór: .licz2). */
.pl-akcje .icon-button .notification-count { top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: var(--w-strong); }
.pl-akcje .pl-usun { margin-left: var(--s-1); }
/* Etap — pigułka z kropką, tło 13 % koloru etapu (ton z .tone-*, 05-komponenty.css). */
.pl-etap-pig { display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ton, var(--text-muted)) 13%, var(--surface)); color: var(--ton-tekst, var(--text-muted)); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pl-etap-pig > i, .pl-stan > i { flex: none; border-radius: 50%; background: var(--ton, var(--text-muted)); }
.pl-etap-pig > i { width: 7px; height: 7px; }
/* Status — kropka i tekst („W toku” niebieskie: --status-wtoku). */
.pl-stan { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ton-tekst, var(--text-muted)); font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; }
.pl-stan > i { width: 8px; height: 8px; }
/* --- Nagłówek (przyklejony) — przyciski sortowania wspólne z kartotekami (.cat-th, ▲ ▼ ⇅). --- */
.pl-naglowek { position: sticky; top: calc(var(--margines-roboczy-y) * -1); z-index: 2; min-height: 40px; padding-block: 0; border-bottom-color: var(--line); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: var(--lh-base); cursor: default; }
.pl-naglowek > :nth-child(1) { grid-column: nr; }
.pl-naglowek > :nth-child(2) { grid-column: nazwa; }
.pl-naglowek > :nth-child(4) { grid-column: etap; }
.pl-naglowek > :nth-child(5) { grid-column: status; }
.pl-naglowek .prow-kwota { align-items: flex-end; }
.pl-naglowek .cat-th { min-height: var(--h-control); margin-inline: calc(var(--s-1) * -1); padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; line-height: var(--lh-base); cursor: pointer; }
/* PZ7: strzałka sortowania w kolorze podpisu kolumny, jak we wzorze (wspólna reguła kartotek daje jej 45 % krycia — na tle nagłówka 1,9 : 1). */
.pl-naglowek .cat-sort-ind { opacity: 1; }
.pl-naglowek .cat-th.is-sorted { color: var(--accent-strong); }
.pl-naglowek .cat-th:hover { background: var(--btn-2-hover); }
.pl-naglowek .cat-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (max-width: 1180px) {
  .pl-naglowek { top: calc(var(--s-4) * -1); }
}
:root[data-ui="tablet"] .pl-wiersz:not(.pl-naglowek) { min-height: 72px; }
/* --- Węższa lista (karta projektu obok, tablet, wąskie okno): 5 kolumn — numer | nazwa | etap | status | kwota. --- */
@container lista-projektow (width <= 1000px) {
  /* Skrajne tory 8 px + odstęp 8 px = treść 16 px od krawędzi, jak w szerokiej liście (było 12 px). */
  .project-table { grid-template-columns: [bok-l] var(--s-2) [nr] 88px [nazwa] minmax(0, 1fr) [etap] minmax(108px, max-content) [status] minmax(96px, max-content) [kwota] minmax(112px, max-content) [bok-p] var(--s-2); column-gap: var(--s-2); }
  .project-table.bez-kwot { grid-template-columns: [bok-l] var(--s-2) [nr] 88px [nazwa] minmax(0, 1fr) [etap] minmax(108px, max-content) [status] minmax(96px, max-content) [bok-p] var(--s-2); }
  .project-table :is(.pl-norma, .pl-osoby, .pl-akcje) { display: none; }
}
/* ============================================================================
   P3: PASEK NAD LISTĄ — szukaj · filtry (menu) · Eksportuj · Przelicz · Co jeśli · ⋮ · Nowy projekt. Jedna wysokość
   (--h-control). Szeroka lista: jeden rząd; ≤ 1100 px filtry schodzą pod spód; ≤ 900 px trzy przyciski zastępuje ⋮.
   Renderer: widoki/projekty-pasek.js, kliknięcia: zdarzenia/projekty-pasek.js.
   ============================================================================ */
.pl-pasek { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); min-width: 0; }
.pl-szukaj { display: flex; flex: 1 1 220px; align-items: center; gap: var(--s-2); min-width: 0; height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); color: var(--text-faint); font-weight: var(--w-regular); cursor: text; }
.pl-szukaj .icon { flex: none; width: 16px; height: 16px; }
.pl-pasek .pl-szukaj input, .kl-pasek .kl-szukaj input, .pz-glowa .pz-szukaj input { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: var(--t-base); }
.pl-pasek .pl-szukaj input { text-overflow: ellipsis; }
.pl-szukaj:focus-within, .pl-filtr-przycisk:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
.pl-filtry { display: flex; flex: none; gap: var(--s-2); }
.pl-filtr { position: relative; min-width: 0; }
.pl-filtr-przycisk { display: inline-flex; align-items: center; gap: var(--s-1); width: 100%; min-width: 0; height: var(--h-control); padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); color: var(--text-faint); font: inherit; font-size: var(--t-sm); white-space: nowrap; cursor: pointer; }
.pl-filtr-przycisk > b { margin-right: var(--s-1); overflow: hidden; color: var(--text); font-weight: var(--w-bold); text-overflow: ellipsis; }
.pl-filtr-przycisk > .icon { flex: none; width: 14px; height: 14px; margin-left: auto; }
.pl-filtr-przycisk:hover { background: var(--surface-2); }
.pl-filtr-przycisk.is-aktywny { border-color: var(--accent); background: var(--accent-soft); }
.pl-filtr-przycisk.is-aktywny > b { color: var(--accent-strong); }
.pl-filtr-przycisk[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.pl-filtr-menu { position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: var(--z-menu-nad-trescia); display: grid; min-width: 210px; max-width: 300px; padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--cien-2); }
.pl-filtr-menu[hidden] { display: none; }
.pl-filtr-menu.do-lewej { right: 0; left: auto; }
.pl-filtr-tytul { padding: var(--s-1) var(--s-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pl-filtr-menu > button { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--h-control); padding: 0 var(--s-3) 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--t-base); text-align: left; cursor: pointer; }
.pl-filtr-menu > button:hover, .pl-filtr-menu > button:focus-visible { background: var(--surface-2); outline: 0; }
.pl-filtr-menu > button[aria-checked="true"] { font-weight: var(--w-bold); }
.pl-filtr-znak { flex: none; width: 16px; height: 16px; color: var(--accent-strong); visibility: hidden; }
.pl-filtr-menu > button[aria-checked="true"] > .pl-filtr-znak { visibility: visible; }
.pl-kropka { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ton, var(--text-muted)); }
.pl-pasek-akcje { display: flex; flex: none; align-items: center; gap: var(--s-2); margin-left: auto; }
.pl-pasek-szerokie { display: contents; }
.pl-pasek .button { height: var(--h-control); font-size: var(--t-sm); white-space: nowrap; }
.pl-pasek .toolbar-menu-telefon > summary { display: grid; place-items: center; width: var(--h-control); height: var(--h-control); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-lg); font-weight: var(--w-strong); }
.pl-pasek .toolbar-menu-telefon .row-menu-panel .button { width: 100%; justify-content: flex-start; }
.pl-pasek:has(.pl-pasek-szerokie .toolbar-przycisk-z-napisem) { padding-bottom: calc(1px + var(--t-xs) * 1.2 + var(--s-1)); }
.pl-filtry-telefon { display: none; }
/* Rama listy jak we wzorze (.tabp): promień 12 px, bez cienia. */
.pl-ramka { align-content: start; border-radius: var(--r); box-shadow: none; }
/* Odstęp strony u góry jak we wzorze: 24 px na szerokim ekranie (obszar treści ma 16 px); karta obok listy sięga 16 px od dołu. */
@media (min-width: 1181px) {
  :root:not([data-ui="mobile"]) .pl-uklad { padding-top: var(--s-2); }
  :root:not([data-ui="mobile"]) .pl-uklad.z-karta { box-sizing: border-box; height: calc(100% + var(--s-4)); margin-bottom: calc(var(--s-4) * -1); }
}
@container lista-projektow (width <= 1100px) {
  .pl-pasek { flex-wrap: wrap; }
  .pl-filtry { flex: 1 1 100%; order: 3; }
}
@container lista-projektow (width <= 900px) {
  .pl-pasek-szerokie { display: none; }
  .pl-pasek .toolbar-menu-telefon { display: block; }
  .pl-pasek:has(.pl-pasek-szerokie .toolbar-przycisk-z-napisem) { padding-bottom: 0; }
}
@container lista-projektow (width <= 520px) {
  .pl-filtry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}