/* ============================================================================
   12g-kartoteki-wzor-lista.css — LISTA KARTOTEKI wg wzoru (PROJEKT-OKIEN/artefakt/Kartoteki.html: .kr-pas, .kr-tab, .kr-w, .ui-st, .kr-ikw).
   ----------------------------------------------------------------------------
   Dotyczy kartotek renderowanych tabelą z klasą `kt-lista` (js/widoki/kartoteki-wzor-lista.js): Atrakcje, Transport (4 zakładki),
   kategorie, Praca / Usługi, Odpady, Certyfikacja, Ekipy, Konstrukcje, Profile marż, Wynajem, Dojazd… Wiersz tabeli jest siatką
   o proporcjach kolumn ze wzoru (`--kt-sz`), więc układ jest ten sam co we wzorze mimo tabeli HTML.
   Tokeny wzoru → programu: pow = surface, pow-2 = surface-2, pow-3 = surface-3, linia = line, linia-2 = line-soft, ramka = line-strong,
   tusz = text, tusz-2 = text-muted, tusz-3 = text-faint, ak = accent, ak-tlo = accent-soft, bl = danger, ok = ok, ok-tlo = ok-soft,
   t-1..t-3 = t-xs / t-sm / t-base, h-k = h-control. Telefon: css/9-telefon/24c-kartoteki-wzor-lista.css.
   ============================================================================ */

/* --- 1. Ramka strony: pasek na tle strony, tabela w karcie, stopka dolną częścią tej samej karty (jak Klienci) --- */
:root:not([data-ui="mobile"]) #content > .panel:has(> .table-wrap > .kt-lista) { gap: var(--s-3); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root:not([data-ui="mobile"]) #content > .panel:has(> .table-wrap > .kt-lista) > .table-wrap { flex: 0 1 auto; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > [data-catalog-pager-bottom] { margin-top: calc(var(--s-3) * -1); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > [data-catalog-pager-bottom] .catalog-pager { justify-content: flex-start; min-height: 48px; padding: var(--s-2) var(--s-4); gap: var(--s-3); border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-sm); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > [data-catalog-pager-bottom] .catalog-pager .pager-info { color: inherit; font-size: inherit; }

/* --- 2. Pasek: Szukaj · (odstęp) · Kolumny · Eksportuj · Dodaj (wzór .kr-pas) --- */
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar { align-items: center; justify-content: flex-start; gap: var(--s-2); margin-top: calc(var(--s-2) * -1); padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--line); background: transparent; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .catalog-filter-group { flex: 1 1 220px; max-width: 460px; }
/* Odstęp między szukajką a akcjami to osobny element rosnący (wzór .kr-sp): szukajka i odstęp dzielą wolne miejsce po równo. */
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar::after { content: ""; order: 1; flex: 1 1 0; min-width: 0; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .inline-actions { order: 2; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar [data-kolumny-licznik]:empty, .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .catalog-col-tools:empty { display: none; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .button.primary { border-color: var(--accent); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .inline-actions { flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
/* Szukajka bez etykiety „Szukaj”: pole z ikoną, 36 px, ramka --line-strong, promień 8 (wzór .kr-szuk). Etykieta zostaje dla czytników ekranu. */
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) .catalog-search-field { flex: 1 1 220px; max-width: 460px; min-width: 0; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) .catalog-search-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) .catalog-search-field .search { display: flex; align-items: center; height: var(--h-control); padding: 0 var(--s-3); gap: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-faint); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) .catalog-search-field .search > .icon { position: static; width: 16px; height: 16px; flex: none; transform: none; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) .catalog-search-field .search > input { flex: 1; width: auto; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--t-base); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .button { height: var(--h-control); padding: 0 var(--s-4); gap: var(--s-2); border-radius: var(--r); font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .kt-lista) > .catalog-toolbar .button .icon { width: 16px; height: 16px; flex: none; }

/* --- 3. Tabela jako siatka: nagłówek + wiersze o proporcjach `--kt-sz` --- */
:root:not([data-ui="mobile"]) .catalog-table.kt-lista { display: block; width: 100%; min-width: 0; border: 0; font-size: var(--t-sm); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista :is(thead, tbody) { display: block; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista :is(thead, tbody) > tr { display: grid; grid-template-columns: var(--kt-sz); gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista thead { position: sticky; top: 0; z-index: 2; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista thead > tr { 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); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista thead th { position: static; display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody > tr { min-height: 52px; background: transparent; color: var(--text-muted); cursor: pointer; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody > tr:hover { background: var(--surface-2); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista :is(th, td).kolumna-schowana { display: none; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody td strong { color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody td > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista[data-kt-katalog="installation-crews"] tbody td > div:not(.tiny) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody td span.tiny { display: inline; color: var(--text-faint); font-size: var(--t-sm); }
:root:not([data-ui="mobile"]) .catalog-table.kt-lista tbody td > .tiny { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--text-faint); font-size: var(--t-sm); line-height: 1.35; }

/* --- 4. Pigułka stanu (wzór .ui-st: 26 px, kropka 7 px, tło 14 % koloru) --- */
.kt-stan { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; height: 26px; padding: 0 var(--s-2); overflow: hidden; border: 1px solid transparent; border-radius: var(--r); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.kt-stan > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kt-stan.got { background: var(--ok-soft); color: var(--ok); }

/* --- 5. Akcje: dwa przyciski ikon (wzór .kr-ikw: 36 px, ramka --line, promień 8, kosz w kolorze błędu) --- */
:root:not([data-ui="mobile"]) .catalog-table.kt-lista td > .inline-actions { display: flex; justify-content: flex-end; gap: var(--s-1); }
.kt-ikona { display: grid; flex: none; place-items: center; width: var(--h-control); height: var(--h-control); padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.kt-ikona:hover { background: var(--surface-2); }
.kt-ikona.us { color: var(--danger); }
.kt-ikona .icon { width: 16px; height: 16px; }
.kt-ikona:disabled { opacity: .45; cursor: not-allowed; }