/* ============================================================================
   13-zestawienie-okno.css — OKNO „ZESTAWIENIE MATERIAŁÓW / SPRAWDZENIE” na telefonie (M6, GUI, 18.10.2026)
   ----------------------------------------------------------------------------
   Układ podstawowy (komputer, tablet): 4-widoki/25d-zestawienie-okno.css. Tu to, czym różni się telefon, wg wzoru v99
   (okna_css.txt: .ramka.tel / .ramka.telp, B17, B26, B27):
     · ramka „Plik zestawienia” jest ZWIJANA (domyślnie zwinięta: nazwa pliku w jednym wierszu),
       żeby lista sprawdzenia była od razu widoczna;
     · pozycja = KARTA: ilość × | kod | status, pod spodem wymiary jako plakietki (A 1066), pod nimi akcje;
       pozycja bez przycisków (OK, Uwaga) jest zwarta — ilość | kod | status | notatka w jednym wierszu;
     · telefon POZIOMO: pozycja w jednym wierszu (ilość | kod | wymiary | status | akcje), bez podtytułu okna;
     · stopka: trzy przyciski w rzędzie ze skróconymi napisami (Odśwież · Sprawdź · Zapisz).
   Wagę ponad ogólne reguły okien telefonu (9-telefon/2-okna.css) daje `:root[data-ui="mobile"] #modal-root`.
   ============================================================================ */

/* Okno stoi na całym ekranie — ramę (100dvh, bez zaokrągleń) ustawia 2-okna.css, tak jak w pozostałych oknach. */

/* === Nagłówek: tytuł w dwóch wierszach, podtytuł w jednym (z wielokropkiem) ===================================== */
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > header { align-items: center; }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > header h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--t-md); }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > header .calc-header-context { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > .modal-form { padding: var(--s-3) var(--s-4); }

/* === Ramka 1: zwijana ============================================================================================ */
:root[data-ui="mobile"] #modal-root .kst-imp-t { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--h-control); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:root[data-ui="mobile"] #modal-root .kst-imp-t > span:first-child { display: flex; flex-direction: column; min-width: 0; }
:root[data-ui="mobile"] #modal-root .kst-imp-t b { font-size: var(--t-base); font-weight: var(--w-strong); }
:root[data-ui="mobile"] #modal-root .kst-imp-t small { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #modal-root .kst-imp-t > .icon { flex: none; width: 16px; height: 16px; color: var(--text-faint); transition: transform .15s ease-out; }
:root[data-ui="mobile"] #modal-root .kst-imp-t[aria-expanded="true"] > .icon { transform: rotate(180deg); }
:root[data-ui="mobile"] #modal-root .kst-imp.zw .kst-imp-g { display: none; }
:root[data-ui="mobile"] #modal-root .kst-imp-g { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
:root[data-ui="mobile"] #modal-root .kst-imp-s .upload-button { width: 100%; }

/* === Stopka: trzy przyciski w jednym rzędzie ===================================================================== */
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > footer { flex-wrap: nowrap; gap: var(--s-2); padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--bezpieczny-dol, 0px)); }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > footer > .button { flex: 1 1 0; min-width: 0; min-height: var(--h-control); height: var(--h-control); padding: 0 var(--s-2); font-size: var(--t-control); white-space: nowrap; }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > footer .kst-n-pelny { display: none; }
:root[data-ui="mobile"] #modal-root .modal.calculation-modal > footer .kst-n-krotki { display: inline; }

/* === Ramka 2: pozycje jako karty ================================================================================= */
:root[data-ui="mobile"] #modal-root table.kst-zt { margin: 0; }
:root[data-ui="mobile"] #modal-root table.kst-zt:has(tbody:empty) { display: none; }
:root[data-ui="mobile"] #modal-root table.kst-zt thead { display: none; }
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr {
  grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "q n s" ". p p" "a a a";
  gap: var(--s-1) var(--s-2); min-height: 0; margin: 0; padding: var(--s-3) var(--s-2); border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
}
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:first-child { border-top: 0; }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-il { grid-area: q; align-self: start; font-weight: var(--w-bold); }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-il::after { content: "×"; margin-left: 1px; color: var(--text-faint); font-weight: var(--w-medium); }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-poz { grid-area: n; }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-st { grid-area: s; align-self: start; }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-zpw { display: flex; flex-wrap: wrap; grid-area: p; gap: var(--s-1); }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-zpw:not(:has(.kst-zp:not(:empty))) { display: none; }
:root[data-ui="mobile"] #modal-root table.kst-zt .kst-zp { display: none; }
:root[data-ui="mobile"] #modal-root table.kst-zt .kst-zp:not(:empty) { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-xs); text-align: left; }
:root[data-ui="mobile"] #modal-root table.kst-zt .kst-zp:not(:empty)::before { content: attr(data-e); color: var(--text-faint); font-weight: var(--w-strong); }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-ak { grid-area: a; text-align: left; }
:root[data-ui="mobile"] #modal-root table.kst-zt .bom-row-actions { flex-wrap: nowrap; justify-content: stretch; gap: var(--s-2); margin-top: var(--s-1); }
:root[data-ui="mobile"] #modal-root table.kst-zt .bom-row-actions .button { flex: 1 1 0; min-width: 0; height: auto; min-height: var(--h-control); padding: var(--s-1) var(--s-2); font-size: var(--t-sm); line-height: 1.15; white-space: normal; }
:root[data-ui="mobile"] #modal-root table.kst-zt td.kst-c-poz > strong, :root[data-ui="mobile"] #modal-root table.kst-zt .bom-block-name-button { overflow: visible; white-space: normal; word-break: break-all; }
/* Pozycja bez przycisków — jeden zwarty wiersz: ilość | kod | status | notatka; wymiary pod kodem */
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "q n s a" ". p p p"; padding: var(--s-2); }
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) .bom-row-actions { margin-top: 0; align-self: start; }
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) td.kst-c-ak { align-self: center; }
/* 23.10.2026 (przegląd telefonu): w pozycji bez przycisków ilość i status stały przy górnej krawędzi (align-self: start), a kod i ikona notatki pośrodku —
   cztery elementy jednego wiersza na trzech różnych wysokościach (różnica ~9 px). Wszystkie na środku. */
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) :is(td.kst-c-il, td.kst-c-st, td.kst-c-poz) { align-self: center; }
:root[data-ui="mobile"] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) td.kst-zpw:not(:has(.kst-zp:not(:empty))) { display: none; }

/* === Telefon POZIOMO: pozycja w jednym wierszu, bez podtytułu ==================================================== */
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.calculation-modal > header p { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.calculation-modal > header h2 { -webkit-line-clamp: 1; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.calculation-modal > header { padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .kst-imp-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt tbody tr,
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt tbody tr:not(:has(.bom-row-actions .button)) {
  grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) auto auto; grid-template-areas: "q n p s a"; align-items: center; padding: var(--s-2);
}
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt td.kst-zpw { flex-wrap: nowrap; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt td.kst-zpw:not(:has(.kst-zp:not(:empty))) { display: flex; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt :is(td.kst-c-il, td.kst-c-st, td.kst-c-ak) { align-self: center; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt .bom-row-actions { justify-content: flex-end; margin-top: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root table.kst-zt .bom-row-actions .button { flex: 0 0 auto; }
/* 23.10.2026 (przegląd telefonu): kod bloku w pozycji zestawienia to przycisk-link o wysokości jednej linii (19 px = 17 pt) — łatwo go minąć palcem.
   Pole dotyku 44 px (wiersz i tak ma ≥ 54 px); tekst zostaje po lewej, długi kod zawija się jak dotąd. */
:root[data-ui="mobile"] #modal-root table.kst-zt .bom-block-name-button { display: inline-flex; align-items: center; min-height: var(--h-control); text-align: left; }