/* ============================================================================
   12i-kartoteki-materialy-lista-wg-wzoru.css — LISTA MATERIAŁÓW wg zaakceptowanego wzoru (19.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN\artefakt\Materialy.html (.kl-pas, .pt-szuk, .tabk, .mt-w, .mt-th, .mt-gw, .mt-nz, .mt-cena, .mt-pf, .mt-in, .mt-au, .ikw2, .stopkap);
   pomiar wartości na żywo: komputer 1646 px, tablet 1024 px. Opis: PROJEKT-OKIEN\WDROZENIE-MATERIALY.md (punkt 1).
   Dotyczy tabeli z klasą `mt-lista` (js/widoki/kartoteki-tabele.js). Tabela HTML zostaje (zdarzenia, sortowanie, Kolumny, zapis w wierszu) —
   wiersz jest siatką o proporcjach kolumn ze wzoru (`--mt-sz` ustawia js/widoki/kartoteki-materialy-lista.js, jak `kt-lista` w 12g).
   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, uw = warn-strong, bl = danger, h-k = h-control.
   Telefon: css/9-telefon/28-kartoteki-materialy-lista-wg-wzoru.css.
   ============================================================================ */

/* --- 1. Ramka strony: pasek na tle strony, lista w karcie, stopka dolną częścią tej samej karty --- */
:root:not([data-ui="mobile"]) #content > .panel:has(> .table-wrap > .mt-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 > .mt-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 > .mt-lista) > [data-catalog-pager-bottom] { margin-top: calc(var(--s-3) * -1); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > [data-catalog-pager-bottom] .catalog-pager { justify-content: flex-start; min-height: 49px; 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 > .mt-lista) > [data-catalog-pager-bottom] .catalog-pager .pager-info { color: inherit; font-size: inherit; }

/* --- 2. Pasek (wzór .kl-pas): rząd 1 — szukaj · Filtry · Dodaj materiał; rząd 2 — Kolumny … Importuj z Excela · Eksportuj · Dostawca --- */
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar { display: flex; flex-wrap: wrap; 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: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .inline-actions { display: contents; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar > .catalog-filter-group { order: 1; flex: 1 1 220px; min-width: 0; max-width: none; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .catalog-col-tools { order: 2; display: flex; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button.primary { order: 3; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .kolumny-przycisk { order: 5; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar [data-action="dec-kartoteka-import"] { order: 6; margin-left: auto; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar [data-action="dec-kartoteka-eksport"] { order: 7; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar [data-action="new-catalog"][data-catalog="suppliers"] { order: 8; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button { height: var(--h-control); min-height: 0; padding: 0 var(--s-3); gap: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button:hover { background: var(--surface-2); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button.primary:hover { background: var(--accent-hover); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button.is-active, :root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) > .catalog-toolbar .button .icon { width: 16px; height: 16px; flex: none; }
/* Szukajka bez etykiety „Szukaj” (czytniki ekranu ją dalej czytają): pole 36 px z ikoną (wzór .pt-szuk) */
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-lista) .catalog-search-field { min-width: 0; max-width: none; }
:root:not([data-ui="mobile"]) .panel:has(> .table-wrap > .mt-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 > .mt-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 > .mt-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 > .mt-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 > .mt-lista) .catalog-search-field .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- 3. Lista jako siatka: nagłówek + wiersze o proporcjach `--mt-sz` (wzór .tabk) --- */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista { --mt-wst: 108px; --mt-wdni: 60px; display: block; width: 100%; min-width: var(--mt-min, 0); border: 0; background: var(--surface); font-size: var(--t-sm); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista :is(thead, tbody) { display: block; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista :is(thead, tbody) > tr { display: grid; grid-template-columns: var(--mt-sz); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead { position: sticky; top: 0; z-index: 2; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead > tr { min-height: 44px; padding-block: 0; align-items: stretch; border-bottom-color: var(--line); background: var(--surface-3); color: var(--text-muted); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th { position: static; display: flex; align-items: center; gap: var(--s-1); min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); text-align: left; white-space: nowrap; cursor: pointer; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th .cat-th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th .cat-sort-ind { position: static; flex: none; margin: 0; color: var(--text-faint); font-size: var(--t-xs); font-style: normal; opacity: .7; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th:hover { color: var(--text); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th:is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--accent); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .cat-sort-ind { color: var(--accent); opacity: 1; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th:is([data-kol="price"], [data-kol="stockQty"], [data-kol="stockMin"], [data-kol="deliveryDays"]) { justify-content: flex-end; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody > tr { min-height: 68px; background: transparent; color: var(--text-muted); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody > tr:nth-child(even) { background: var(--surface-2); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody > tr:is(:hover, :nth-child(even):hover) { background: var(--surface-3); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista :is(th, td).kolumna-schowana { display: none; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td { display: block; position: static; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td:is(.material-cell, .prio-cell, .stock-cell, .material-menu-cell) { overflow: visible; }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody tr.catalog-empty-row { display: block; padding: var(--s-5) var(--s-4); text-align: center; color: var(--text-faint); }
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody tr.catalog-empty-row td { display: block; }

/* gwiazdka priorytetu (wzór .mt-gw): 32 px, kontur szary, priorytet = pełna, bursztynowa */
:root:not([data-ui="mobile"]) .mt-lista .prio-cell { overflow: visible; }
:root:not([data-ui="mobile"]) .mt-lista .prio-check { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--line-strong); cursor: pointer; }
:root:not([data-ui="mobile"]) .mt-lista .prio-check:hover { background: var(--surface-3); color: var(--text-faint); }
:root:not([data-ui="mobile"]) .mt-lista .prio-check:has(input:checked) { color: var(--warn-strong); }
:root:not([data-ui="mobile"]) .mt-lista .prio-check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }
:root:not([data-ui="mobile"]) .mt-lista .prio-star { display: grid; place-items: center; width: 18px; height: 18px; color: inherit; font-size: var(--t-base); transition: none; }
:root:not([data-ui="mobile"]) .mt-lista .prio-check:hover .prio-star, :root:not([data-ui="mobile"]) .mt-lista .prio-check input:checked + .prio-star { color: inherit; }
:root:not([data-ui="mobile"]) .mt-lista .prio-star .icon { width: 18px; height: 18px; }
:root:not([data-ui="mobile"]) .mt-lista .prio-check input:checked + .prio-star .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }

/* komórka Materiał: nazwa 14 px / 600 (do 2 wierszy), pod nią „KOD · Lokalizacja” 13 px; strzałka rozwijania kolorów, znaczek certyfikatu */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.material-cell { display: flex; flex-direction: column; min-width: 0; }
:root:not([data-ui="mobile"]) .mt-lista .material-name-line { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
:root:not([data-ui="mobile"]) .mt-lista .material-name-line > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); line-height: 1.3; white-space: normal; }
:root:not([data-ui="mobile"]) .mt-lista .material-meta-line { overflow: hidden; color: var(--text-faint); font-size: var(--t-sm); line-height: var(--lh-base); text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .material-stan-karta { display: none; }
:root:not([data-ui="mobile"]) .mt-lista .material-expand-caret-btn { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: calc(var(--s-1) * -1); border-radius: var(--r-sm); cursor: pointer; }
:root:not([data-ui="mobile"]) .mt-lista .material-expand-caret-btn:hover { background: var(--surface-3); }
:root:not([data-ui="mobile"]) .mt-lista .material-cert-badge { display: inline-grid; place-items: center; flex: none; background: none; color: var(--ok); }
:root:not([data-ui="mobile"]) .mt-lista .material-cert-badge .icon { width: 15px; height: 15px; }
:root:not([data-ui="mobile"]) .mt-lista .material-supplier-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cena (wzór .mt-cena): kwota 14 px / 700, „EUR / 1 m²” 12 px lżej, pod spodem opakowanie i masa 12 px */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.price-cell { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .price-cell .mt-cena-w { color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .price-cell .mt-cena-w small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
:root:not([data-ui="mobile"]) .mt-lista .price-cell > .tiny { color: var(--text-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pola stanu w wierszu (wzór .mt-pf / .mt-in / .mt-jm): liczba czyta się jak tekst, ramka pojawia się przy najechaniu i wpisywaniu */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.stock-cell { display: flex; align-items: center; justify-content: flex-end; min-width: 0; text-align: right; }
:root:not([data-ui="mobile"]) .mt-lista .stock-edit { display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; height: 32px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; cursor: text; transition: background .12s, border-color .12s; }
:root:not([data-ui="mobile"]) .mt-lista tbody > tr:hover .stock-edit { border-color: var(--line); background: var(--surface-2); }
:root:not([data-ui="mobile"]) .mt-lista .stock-edit:hover { border-color: var(--line-strong); background: var(--surface); }
:root:not([data-ui="mobile"]) .mt-lista .stock-edit:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
:root:not([data-ui="mobile"]) .mt-lista .stock-edit .stock-unit { flex: none; min-width: 30px; padding-right: var(--s-2); color: var(--text-faint); font-size: var(--t-xs); text-align: left; white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .stock-inline-input { flex: 0 1 auto; width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0 var(--s-1) 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: var(--t-base); font-weight: var(--w-bold); text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
:root:not([data-ui="mobile"]) .mt-lista .stock-inline-input:focus { outline: none; box-shadow: none; }
:root:not([data-ui="mobile"]) .mt-lista .stock-inline-input::-webkit-inner-spin-button, :root:not([data-ui="mobile"]) .mt-lista .stock-inline-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
:root:not([data-ui="mobile"]) .mt-lista .stock-inline-input.stock-negative, :root:not([data-ui="mobile"]) .mt-lista .stock-color-sum.stock-negative { color: var(--danger); }
:root:not([data-ui="mobile"]) .mt-lista .stock-color-sum { display: inline-flex; align-items: baseline; gap: var(--s-1); padding-right: var(--s-1); color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .stock-color-sum .stock-unit { min-width: 30px; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }

/* „Dni”: sama liczba (jednostka jest w nagłówku kolumny) */
:root:not([data-ui="mobile"]) .mt-lista .delivery-cell .stock-unit { display: none; }

/* ostatnia zmiana (wzór .mt-au): data 12 px, autor 12 px lżej */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.audit-cell { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
:root:not([data-ui="mobile"]) .mt-lista .audit-cell .audit-dates { color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .audit-cell .audit-users { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }

/* menu ⋮ wiersza (wzór .ikw2): przycisk 36 px z ramką, róg 8 */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.material-menu-cell { display: flex; justify-content: flex-end; width: auto; padding: 0; }
:root:not([data-ui="mobile"]) .mt-lista .row-menu > summary { 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); }
:root:not([data-ui="mobile"]) .mt-lista .row-menu > summary .icon { width: 16px; height: 16px; }
:root:not([data-ui="mobile"]) .mt-lista .row-menu[open] > summary, :root:not([data-ui="mobile"]) .mt-lista .row-menu > summary:hover { background: var(--surface-2); color: var(--text); }

/* wiersze kolorów pod materiałem (wzór .mt-w.kol): tło jak parzysty wiersz, nazwa z kropką */
:root:not([data-ui="mobile"]) .mt-lista tbody > tr.material-color-subrow { min-height: 48px; background: var(--surface-2); }
:root:not([data-ui="mobile"]) .mt-lista tbody > tr.material-color-subrow:hover { background: var(--surface-2); }
:root:not([data-ui="mobile"]) .mt-lista tbody > tr.material-color-subrow[hidden] { display: none; }
:root:not([data-ui="mobile"]) .mt-lista .material-color-subname { display: flex; align-items: center; gap: var(--s-2); padding-left: var(--s-5); overflow: hidden; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-medium); text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ui="mobile"]) .mt-lista .material-color-subname::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }

/* --- 4. Tablet (wzór @container app ≤ 1180): cele dotyku 44 px, ramki pól stałe --- */
:root[data-ui="tablet"] .catalog-table.mt-lista tbody > tr { min-height: 76px; }
:root[data-ui="tablet"] .catalog-table.mt-lista thead > tr { min-height: 45px; }
:root[data-ui="tablet"] .mt-lista .stock-edit { height: 44px; border-color: var(--line-strong); background: var(--surface); }
:root[data-ui="tablet"] .mt-lista .prio-check, :root[data-ui="tablet"] .mt-lista .material-expand-caret-btn { width: 44px; height: 44px; }
:root[data-ui="tablet"] .mt-lista .row-menu > summary { width: 44px; height: 44px; }

/* „Zmiana” schodzi pierwsza na wąskim ekranie (wzór: kolumna tylko na komputerze) — jak w 12-kartoteki.css, ale mocniej niż siatka wiersza */
@media (max-width: 1180px) {
  :root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th.audit-head, :root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.audit-cell { display: none; }
}

/* kolumna schowana przez „Kolumny” wypada z siatki (stoi na końcu, żeby wygrać z regułami komórek powyżej) */
:root:not([data-ui="mobile"]) .catalog-table.mt-lista thead th.kolumna-schowana.kolumna-schowana, :root:not([data-ui="mobile"]) .catalog-table.mt-lista tbody td.kolumna-schowana.kolumna-schowana { display: none; }

/* pole w komórce wypełnia ramkę (12-kartoteki.css ustawia mu szerokość wg liczby znaków — tu szerokość daje kolumna siatki) */
:root:not([data-ui="mobile"]) .mt-lista .stock-edit > .stock-inline-input, :root:not([data-ui="mobile"]) .materials-stock-table.mt-lista .delivery-cell .stock-edit > .delivery-inline-input { flex: 0 1 auto; width: 100%; min-width: 0; }

/* tablet (wzór @container app ≤ 1180): pola Stan / Minimum 116 px, Dni 68 px */
@media (max-width: 1180px) {
  :root:not([data-ui="mobile"]) .catalog-table.mt-lista { --mt-wst: 116px; --mt-wdni: 68px; }
}