/* ============================================================================
   25d-zestawienie-okno.css — OKNO „ZESTAWIENIE MATERIAŁÓW / SPRAWDZENIE ZESTAWIENIA” wg wzoru v99 (M6, GUI, 18.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN/artefakt/okna_css.txt — B13 i dalsze (.kst-imp, .kst-zs, .kst-zt, .kst-zr). Okno programu to
   `.modal.calculation-modal` (js/okna/zestawienie-bom-okno.js + zestawienie-bom-sprawdzanie.js). Dwie ramki:
     1. „Plik zestawienia” — CSV · rozpoznane kolumny (dwie sekcje obok siebie),
     2. „Sprawdzenie zestawienia” — status, liczniki-filtry, tabela pozycji.
   Tabela zostaje prawdziwą `<table>` (wiersze `tr[data-bom-validation-row]`, kolumny jak dawniej), ale rysuje się siatką
   (jak `.kst-zr` we wzorze). Telefon: 9-telefon/13-zestawienie-okno.css. Tokeny jak w oknie konstrukcji (25c).
   ============================================================================ */

/* === 1. OKNO — skórka jak w reszcie programu (szare okno W1, białe grupy bez ramek); tu tylko układ nagłówka ==== */
/* Decyzja właściciela 18.10.2026: bez białej skórki wzoru (tło okna, kreski nagłówka i stopki, przyklejenie do dołu). */
#modal-root .modal.calculation-modal { --okno-w: 1180px; }
#modal-root .modal.calculation-modal > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); }
#modal-root .modal.calculation-modal > header > .calc-header-tytul { flex: 1 1 0; min-width: 0; }
#modal-root .modal.calculation-modal > header h2 { margin: 0; font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: 1.45; letter-spacing: var(--ls-tytul); }
#modal-root .modal.calculation-modal > header .calc-header-context { margin: 2px 0 0; color: var(--text-faint); font-size: var(--t-sm); }
#modal-root .modal.calculation-modal > header > .icon-button:last-child { margin-left: 0; }
#modal-root .modal.calculation-modal > .modal-form { display: block; padding: var(--s-3) var(--s-4); overflow: auto; }
#modal-root .modal.calculation-modal .calculation-shell { display: block; }
#modal-root .modal.calculation-modal .calculation-workspace { display: flex; flex-direction: column; gap: var(--s-4); }
#modal-root .modal.calculation-modal > footer { gap: var(--s-2); padding: var(--s-2) var(--s-4); }
#modal-root .modal.calculation-modal > footer .button { min-width: 0; }
.kst-n-krotki { display: none; }

/* === 2. RAMKA 1: plik zestawienia ======================================================================== */
/* Obie ramki to białe grupy bez obrysu (W1); `.calc-step` z 24-bom-katalogi ma własną ramkę — tu ją zdejmujemy, żeby ramka 2 nie różniła się od ramki 1. */
#modal-root .modal.calculation-modal :is(.calculation-command-panel, .calc-step) { gap: var(--s-2); padding: var(--s-3); border: 0; border-radius: var(--grupa-r); }
.kst-imp-t { display: none; }
#modal-root .kst-imp-g { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: start; gap: var(--s-4); }
#modal-root .kst-imp-s { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; }
#modal-root .kst-imp-s .kst-et { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
#modal-root .kst-imp-s > small, #modal-root .kst-imp-s > p { margin: 0; color: var(--text-faint); font-size: var(--t-xs); line-height: 1.45; overflow-wrap: anywhere; }
#modal-root .kst-imp-s .upload-button { max-width: 100%; height: var(--h-control); padding: 0 var(--s-3); border-color: transparent; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); font-size: var(--t-control); font-weight: var(--w-bold); white-space: nowrap; }
#modal-root .kst-imp-s .upload-button:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
#modal-root .kst-imp-s .upload-button.is-disabled { opacity: .5; cursor: not-allowed; }
.kst-st.is-bl { background: var(--brak-bom-soft); color: var(--brak-bom); }   /* 19.10.2026: nierozpoznane pozycje BOM = pomarańcz (braki), czerwień zostaje dla kosztu */
/* Rozpoznane kolumny: plakietki jedna pod drugą/zawijane */
.kst-kol { display: flex; flex-wrap: wrap; gap: var(--s-1); }
#modal-root .kst-kol > .kst-st { height: 26px; }

/* === 3. RAMKA 2: sprawdzenie — nagłówek, status, liczniki, napis o pozycjach ===================================== */
#modal-root .validation-step { display: flex; flex-direction: column; gap: var(--s-2); height: auto; overflow: visible; min-height: 0; }
#modal-root .validation-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
#modal-root .validation-title-row h3 { margin: 0 0 var(--s-2); font-size: var(--t-base); font-weight: var(--w-strong); }
#modal-root .validation-title-row p { margin: 0 0 var(--s-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
#modal-root .validation-result-pane { display: flex; flex-direction: column; gap: var(--s-2); overflow: visible; }
#modal-root .validation-result-pane > .empty { margin: 0; color: var(--text-faint); font-size: var(--t-sm); }
#modal-root .validation-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); margin: 0; }
#modal-root .validation-head > p { margin: 0; font-size: var(--t-sm); justify-self: auto; text-align: left; white-space: normal; }
#modal-root .validation-head > p:last-child { color: var(--text-faint); font-size: var(--t-sm); }
#modal-root .validation-head .ok-text { color: var(--ok); }
#modal-root .validation-head .error-text { color: var(--brak-bom); }
#modal-root .validation-head .validation-stats { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-self: auto; }
#modal-root .validation-head .validation-stats > * { display: inline-flex; align-items: center; height: var(--h-control); min-height: 0; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r); background: var(--tlo, var(--surface-3)); box-shadow: none; color: var(--ton, var(--text-muted)); font-size: var(--t-xs); font-weight: var(--w-bold); }
#modal-root .validation-head .validation-stats button { cursor: pointer; }
#modal-root .validation-head .validation-stats button:hover, #modal-root .validation-head .validation-stats button[aria-pressed="true"] { border-color: currentColor; box-shadow: none; }
#modal-root .validation-head .validation-stats .is-error { --tlo: var(--brak-bom-soft); --ton: var(--brak-bom); }
#modal-root .validation-head .validation-stats .is-ok { --tlo: var(--ok-soft); --ton: var(--ok); }
#modal-root .validation-head .validation-stats .is-warning { --tlo: var(--warn-soft); --ton: var(--warn-strong); }

/* === 4. TABELA POZYCJI jako siatka (wzór: .kst-zt, .kst-zr) ====================================================== */
#modal-root .kst-zt-opak, #modal-root .validation-result-pane .table-wrap { max-height: none; overflow: visible; }
#modal-root table.kst-zt, #modal-root table.kst-zt :is(thead, tbody) { display: block; width: 100%; table-layout: auto; }
#modal-root table.kst-zt { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); border-collapse: separate; }
#modal-root table.kst-zt tr {
  --kst-kol: 56px minmax(0, 1fr) repeat(var(--kst-p, 3), 76px) 112px var(--kst-ak, 36px);
  display: grid; grid-template-columns: var(--kst-kol); align-items: center; gap: var(--s-3); min-height: var(--h-control); padding: var(--s-1) var(--s-3);
  border-top: 1px solid var(--line-soft); background: transparent; font-size: var(--t-sm);
}
#modal-root table.kst-zt thead tr { position: sticky; top: calc(var(--s-3) * -1); z-index: 2; border-top: 0; background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
#modal-root table.kst-zt tbody tr:first-child { border-top: 0; }
#modal-root table.kst-zt tbody tr.is-error { background: color-mix(in srgb, var(--brak-bom) 6%, var(--surface)); }
#modal-root table.kst-zt tbody tr[data-bom-validation-row]:hover { background: var(--surface-2); }
#modal-root table.kst-zt :is(th, td) { display: block; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; font-weight: inherit; text-align: left; line-height: 1.45; }
#modal-root table.kst-zt th { position: static; white-space: nowrap; }
#modal-root table.kst-zt :is(.kst-c-il, .kst-c-p) { text-align: center; }
#modal-root table.kst-zt td.kst-c-il { font-variant-numeric: tabular-nums; }
#modal-root table.kst-zt :is(td.kst-zpw) { display: contents; }
#modal-root table.kst-zt .kst-zp { min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
/* Pozycja: kod bloku jako odnośnik do kartoteki; przy błędzie — kod i powód pod nim */
#modal-root table.kst-zt td.kst-c-poz { display: flex; flex-direction: column; }
#modal-root table.kst-zt .bom-block-name-button { display: block; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: var(--w-bold); text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
#modal-root table.kst-zt .bom-block-name-button:hover { color: var(--accent); text-decoration-color: var(--accent); }
#modal-root table.kst-zt td.kst-c-poz > strong { display: block; overflow: hidden; font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
#modal-root table.kst-zt .bom-blad-powod { display: block; overflow: visible; font-size: var(--t-xs); font-weight: var(--w-regular); white-space: normal; text-overflow: clip; color: var(--brak-bom); }
/* Status: plakietka z kropką */
#modal-root table.kst-zt .kst-st { gap: var(--s-2); padding: 0 var(--s-2); border: 1px solid transparent; }
.kst-st.is-error { background: var(--brak-bom-soft); color: var(--brak-bom); }
.kst-st.is-warning { background: var(--warn-soft); color: var(--warn-strong); }
/* Akcje: notatka (ikona), „Ignoruj”, „Dodaj do Bloków” */
#modal-root table.kst-zt td.kst-c-ak { text-align: right; }
#modal-root table.kst-zt .bom-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-1); }
#modal-root table.kst-zt .bom-row-actions .icon-button { width: var(--h-control); height: var(--h-control); border-color: transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); }
#modal-root table.kst-zt .bom-row-actions .icon-button:hover { background: var(--surface-3); }
#modal-root table.kst-zt .bom-row-actions .icon-button.has-comment { background: transparent; color: var(--accent); }
#modal-root table.kst-zt .bom-row-actions .button { height: var(--h-control); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-control); font-weight: var(--w-bold); white-space: nowrap; }
#modal-root table.kst-zt .bom-row-actions .bom-add-block { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
#modal-root table.kst-zt .bom-row-actions .bom-add-block:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }

/* === 5. TABLET — ramka 1 w dwóch równych kolumnach, mniejsze kolumny liczbowe ================================== */
:root[data-ui="tablet"] #modal-root .kst-imp-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root[data-ui="tablet"] #modal-root table.kst-zt tr { --kst-kol: 48px minmax(0, 1fr) repeat(var(--kst-p, 3), 60px) 96px var(--kst-ak, 36px); gap: var(--s-2); }
#modal-root table.kst-zt.ma-akcje { --kst-ak: 320px; }
#modal-root table.kst-zt th.kst-c-ak { text-align: right; }
#modal-root .modal.calculation-modal > footer .button { padding: 0 var(--s-3); }
/* Tablet: nagłówki wymiarów (60 px) zawijają się zamiast na siebie nachodzić */
:root[data-ui="tablet"] #modal-root table.kst-zt th.kst-c-p { white-space: normal; line-height: 1.2; }