/* ============================================================================
   25c-konstrukcja-okno.css — OKNO KONSTRUKCJI wg wzoru wyglądu v99 (M6, GUI, 18.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN/artefakt/okna_css.txt — sekcje B3, B5, B9, B13 (klasy .kst-*, .mp-*) i patche b3/b5/b9/b13.
   Okno ma dwa wcielenia o tym samym środku `.construction-editor-grid`:
     · samodzielne okno (`.modal.construction-popup`) — z Planów, z drzewa projektu, z kalkulatora,
     · dymek w oknie Design (`.construction-bubble`).
   Układ: dwie równe kolumny (Wymiary + Zestawienie | Rendery); jedna kolumna na telefonie pionowo.
   Telefon (`:root[data-ui="mobile"]`) i tablet dotykowy — tylko to, co się różni — w 9-telefon/12-konstrukcja-okno.css.
   Wymiary, odstępy i kolory — tokeny (te same wartości co we wzorze: --s-*, --r*, --line, --text-*, --accent …).
   Skórka okna = jak w reszcie programu (szare okno, białe grupy bez ramek — 19-modale-tresc §0); ten plik jej nie zmienia.
   ============================================================================ */

/* === 1. OKNO — skórka jak w reszcie programu (szare okno W1, białe grupy bez ramek); tu tylko układ nagłówka ==== */
/* Skórkę (tło okna, ramki, kreski nagłówka i stopki, położenie przy dolnej krawędzi) daje 05-komponenty + 19-modale-tresc §0 —
   decyzja właściciela 18.10.2026: okno Konstrukcja ma wyglądać jak pozostałe okna, nie jak biała skórka wzoru. */
#modal-root .modal.construction-modal.construction-popup { --okno-w: 1180px; }
/* GUI-DESIGN-FIX1 (18.10.2026) — okno wg wzoru (komputer i tablet): dolna krawędź przy dole ekranu, 24 px od góry (wysokość ekranu − 24: 876 przy 900), górne rogi 16 px, dolne 0;
   szerokość min(1180 px, ekran − 24 px) (tablet 1000 px). Telefon = pełny ekran (2-okna.css). */
/* Położenie i wysokość (obie postaci: samodzielne okno i w Design) — wspólna zasada dużych okien: 20-okna-polozenie.css. Szerokość 1180 px (tablet: ekran − 24 px, to liczy sama rama). */
/* Dymek w oknie Design = to samo okno w kartce: szare tło jak `.modal` (--okno-tlo), nagłówek bez kreski, stopka z cienką kreską —
   dzięki temu białe grupy (Wymiary, Zestawienie, Rendery) odcinają się od tła, a nie zlewają z białym dymkiem. */
#modal-root .construction-bubble { background: var(--okno-tlo); }
#modal-root .construction-bubble > header { border-bottom: 0; background: transparent; }
#modal-root .construction-bubble > .construction-bubble-footer { border-top: 1px solid var(--kreska-wlos); background: transparent; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); }
#modal-root :is(.modal.construction-popup > header h2, .construction-bubble-title strong) {
  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 :is(.modal.construction-popup > header p, .construction-bubble-title small) { margin: 2px 0 0; color: var(--text-faint); font-size: var(--t-sm); }
#modal-root .construction-bubble-title { gap: 0; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header > :is(.kst-tytul, .construction-bubble-title) { flex: 1 1 0; min-width: 0; }
/* Kolejność w nagłówku: tytuł · ? · plakietki i kosz · × (pomoc dokłada okno-podstawa tuż przed ×). */
#modal-root :is(.modal.construction-popup, .construction-bubble) > header .modal-help-btn { order: 1; margin-left: auto; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header .kst-hs { order: 2; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header > :is([data-action="close-modal"], [data-action="close-construction-bubble"]) { order: 3; margin-left: 0; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header > .kst-hs:first-of-type { margin-left: auto; }
/* Treść: jedno przewijanie (formularz), nic nie przycina paneli. */
#modal-root .modal.construction-popup > form { display: block; padding: 0; overflow: auto; }
#modal-root .construction-bubble > form { display: block; overflow: auto; }
/* Obszar roboczy bez stałej wysokości także w dymku — inaczej siatka dostawała wysokość okna, dwa wiersze po połowie
   i karta „Rendery” nachodziła na „Zestawienie materiałów” (telefon, wąski ekran). */
#modal-root :is(.modal.construction-popup, .construction-bubble) .construction-workspace { display: block; height: auto; overflow: visible; }
#modal-root :is(.modal.construction-popup, .construction-bubble) .construction-editor-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--s-3);
  height: auto; min-height: 100%; padding: var(--s-3) var(--s-4); overflow: visible;
}
#modal-root :is(.modal.construction-popup, .construction-bubble) :is(.construction-main-stack, .construction-side-stack) {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; min-height: 0; overflow: visible;
}
#modal-root :is(.modal.construction-popup, .construction-bubble) .construction-side-stack > .construction-presentation-panel { flex: 1 1 auto; }
#modal-root :is(.modal.construction-popup > footer, .construction-bubble-footer) { gap: var(--s-2); padding: var(--s-2) var(--s-4); }

/* === 2. NAGŁÓWEK: plakietki stanu i kosz (wzór: .kst-hs, .ui-st, .ui-ik.us) ==================================== */
.kst-hs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.kst-st { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); 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); white-space: nowrap; }
.kst-st > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kst-st.is-ok { background: var(--ok-soft); color: var(--ok); }
.kst-st.is-uw { background: var(--warn-soft); color: var(--warn-strong); }
.kst-st.is-inf { background: color-mix(in srgb, var(--etap-design) 14%, var(--surface)); color: var(--etap-design); }
#modal-root .kst-usun, #modal-root .kst-plik .icon-button.danger { border-color: transparent; background: transparent; color: var(--danger); }
#modal-root .kst-usun:hover, #modal-root .kst-plik .icon-button.danger:hover { background: var(--surface-3); }
#modal-root .kst-usun { padding: 1px 6px; border: 0; border-radius: var(--r-sm); font-weight: var(--w-regular); }   /* wzór: .ui-ik.us — róg 8 px, krój zwykły, bez ramki */

/* === 3. PANELE: odstęp 8 między rzędami; tło i obrys daje skórka W1 (biała grupa bez ramki, 19-modale-tresc §0) ====== */
#modal-root .construction-editor-grid .form-panel { display: flex; flex-direction: column; flex: 0 0 auto; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r); }   /* róg 12 px jak we wzorze (skórka W1 daje 16 px) */
#modal-root .construction-editor-grid .form-panel-head { flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: 0; border: 0; }
#modal-root .construction-editor-grid .kst-rhead { justify-content: flex-start; }
#modal-root .construction-editor-grid .form-panel-head h3 { margin: 0; color: var(--text); font-family: var(--font); font-size: var(--t-base); font-weight: var(--w-strong); line-height: 1.45; }
#modal-root .construction-editor-grid .form-panel-head > span { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
/* Wymiary: etykieta nad polem, dwa pola w rzędzie (wzór B9). */
#modal-root .construction-editor-grid .construction-dimensions-grid { gap: var(--s-2) var(--s-3); align-items: start; }
#modal-root .construction-editor-grid .construction-dimensions-grid .field { display: flex; flex-direction: column; gap: var(--s-1); }
#modal-root .construction-editor-grid .construction-dimensions-grid label { margin: 0; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.45; }
#modal-root .construction-editor-grid .construction-dimensions-grid input { height: var(--h-control); padding: 0 var(--s-2); border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); font-size: var(--t-base); }

/* === 4. ZESTAWIENIE: rząd przycisków, plik, liczniki, odczyty, atrakcje, obieg (wzór B13) ======================= */
#modal-root .construction-bom-actions.kst-bom-akcje { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.kst-akc2 { display: flex; gap: var(--s-2); }
.kst-akc2 > .kst-popraw-miejsce { display: contents; }
#modal-root .kst-akc2 :is(.upload-button, .kst-sprawdz, .kst-popraw) { flex: 1 1 0; min-width: 0; justify-content: center; height: var(--h-control); padding: 0 var(--s-2); border-radius: var(--r); font-size: var(--t-control); font-weight: var(--w-bold); }
#modal-root .kst-akc2 .upload-button { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
#modal-root .kst-akc2 .upload-button:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
#modal-root .kst-akc2 .upload-button.is-disabled { opacity: .5; cursor: not-allowed; }
#modal-root .kst-akc2 .kst-sprawdz { border-color: var(--pole-ramka); background: var(--surface); color: var(--text); }
#modal-root .kst-akc2 .kst-sprawdz:hover { background: var(--surface-2); }
#modal-root .kst-akc2 .kst-popraw { border-color: var(--danger-ramka); background: var(--surface); color: var(--danger); }
#modal-root .kst-akc2 .kst-popraw:hover { background: var(--danger-soft); }
.kst-hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
/* Plik: ikona w kafelku 36, nazwa i „data · autor”, kosz po prawej. */
.kst-plik { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.kst-pik { display: grid; place-items: center; flex: none; width: var(--h-control); height: var(--h-control); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); }
.kst-pi { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; font-size: var(--t-sm); }
.kst-pi .bom-plik-nazwa { overflow: hidden; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.kst-pi .bom-plik-data { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kst-plik.bez-pliku .kst-pi { color: var(--text-faint); font-size: var(--t-xs); }
/* Liczniki sprawdzenia (plakietki 26 px) i napis „Pozycji w zestawieniu” */
#modal-root .construction-bom-quick-check { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-2) 0 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
#modal-root .construction-bom-quick-check .validation-stats { justify-self: auto; gap: var(--s-1); }
#modal-root .construction-bom-quick-check .validation-stats > * { display: inline-flex; align-items: center; height: 26px; min-height: 0; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r); background: var(--tlo, var(--surface-3)); color: var(--ton, var(--text-muted)); font-size: var(--t-xs); font-weight: var(--w-bold); }
#modal-root .construction-bom-quick-check .validation-stats .is-error { --tlo: var(--danger-soft); --ton: var(--danger); }
#modal-root .construction-bom-quick-check .validation-stats .is-ok { --tlo: var(--ok-soft); --ton: var(--ok); }
#modal-root .construction-bom-quick-check .validation-stats .is-warning { --tlo: var(--warn-soft); --ton: var(--warn-strong); }
#modal-root .construction-bom-quick-check > p { margin: 0; color: var(--text-faint); font-size: var(--t-sm); line-height: 1.45; }
#modal-root .construction-bom-quick-check .construction-bom-quick-empty { padding: 0; border: 0; background: transparent; font-weight: var(--w-regular); }
/* Odczyty: Materiał z zestawienia | Pojemność */
.kst-odcz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); margin: 0; }
.kst-odcz > div { min-width: 0; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); }
.kst-odcz dt { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); }
.kst-odcz dd { margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
/* Atrakcje: lista w dwóch kolumnach z kropką */
.kst-atr { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); }
.kst-et { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.kst-atr ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--s-4); }
.kst-atr li { position: relative; break-inside: avoid; padding-left: var(--s-3); font-size: var(--t-sm); font-weight: var(--w-bold); line-height: 1.7; }
.kst-atr li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); }
.kst-atr > p { margin: 0; color: var(--text-faint); font-size: var(--t-xs); }
/* Obieg wyceny: pole w kolorze stanu (zwolniona — zieleń, czeka — bursztyn, zatwierdzone — szary) */
#modal-root .construction-obieg-wyceny { --tlo: var(--ok-soft); --ton: var(--ok); --napis-bok: var(--ok); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r); background: var(--tlo); color: var(--ton); font-size: var(--t-sm); line-height: 1.45; }
#modal-root .construction-obieg-wyceny.is-do-zatwierdzenia { --tlo: var(--warn-soft); --ton: var(--warn-strong); }
#modal-root .construction-obieg-wyceny.is-zatwierdzone { --tlo: var(--surface-2); --ton: var(--text-muted); }
#modal-root .construction-obieg-wyceny::before, #modal-root .construction-obieg-wyceny-tekst > p:first-child::before { content: none; }
#modal-root .construction-obieg-wyceny-tekst { flex: 1 1 220px; min-width: 0; }
#modal-root .construction-obieg-wyceny-tekst > p { margin: 0; color: inherit; font-size: var(--t-sm); }
#modal-root .construction-obieg-wyceny-tekst > p + p { margin-top: var(--s-1); }
#modal-root .construction-obieg-wyceny-tekst > p:not(:first-child) { color: var(--text-muted); }
#modal-root .construction-obieg-wyceny .inline-actions { flex-wrap: wrap; gap: var(--s-2); }

/* === 5. RENDERY (wzór: .mp-zw, .mp-zt, .mp-zd) ================================================================= */
#modal-root .construction-presentation-panel { flex: 1 1 auto; align-self: stretch; }
#modal-root .kst-rhead { align-items: center; min-height: var(--h-control); }
/* Nagłówek panelu „Rendery”: tytuł, licznik plików i „Usuń wszystkie” (od dwóch plików — wzór) */
.kst-rendery .kst-usun-wszystkie:disabled { display: none; }
#modal-root .kst-rhead [data-prez-licz] { margin-left: auto; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
#modal-root .kst-rhead .kst-usun-wszystkie { height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--danger-ramka); border-radius: var(--r); background: var(--surface); color: var(--danger); font-size: var(--t-control); font-weight: var(--w-bold); }
#modal-root .kst-rhead .kst-usun-wszystkie:hover { background: var(--danger-soft); }
.kst-rendery .presentation-tab-panel.is-active { gap: var(--s-2); min-height: 0; }
.kst-rendery .construction-presentation-upload { display: block; }
/* Pole „Dodaj rendery”: przerywana ramka, plus i napis w jednej linii, podpowiedź pod spodem */
#modal-root .kst-zd { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-3); width: 100%; min-height: calc(var(--h-control) + var(--s-5)); height: auto; padding: var(--s-3) var(--s-4); border: 1px dashed var(--pole-ramka); border-radius: var(--r-sm); background: transparent; color: var(--accent); text-align: center; cursor: pointer; }
#modal-root .kst-zd:hover { border-color: var(--accent); background: var(--accent-soft); }
#modal-root .kst-zd .icon { width: 20px; height: 20px; }
#modal-root .kst-zd { font-weight: var(--w-regular); }   /* wzór: pole „Dodaj rendery” 400 (waga 600 dziedziczył z przycisku) */
#modal-root .kst-zd b { font-size: var(--t-control); font-weight: var(--w-strong); }
#modal-root .kst-zd small { max-width: 60ch; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); }
.kst-rendery .presentation-tab-note { margin: 0; font-size: var(--t-xs); }
/* Kafelki renderów: miniatura 16:10, nazwa i rozmiar pod spodem, kosz w rogu; pierwszy = „Główny” */
#modal-root .kst-rendery .construction-presentation-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s-2); overflow: visible; }
#modal-root .kst-rendery .construction-presentation-item { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
#modal-root .kst-rendery .construction-presentation-item.is-glowny { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#modal-root .kst-rendery .construction-presentation-preview { position: relative; display: block; }
#modal-root .kst-rendery .construction-presentation-thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; border: 0; border-radius: 0; background: var(--surface-3); color: var(--text-faint); object-fit: cover; }
#modal-root .kst-rendery .construction-presentation-meta { gap: 0; padding: var(--s-1) var(--s-2) var(--s-2); }
#modal-root .kst-rendery .construction-presentation-meta strong { font-size: var(--t-sm); font-weight: var(--w-bold); }
#modal-root .kst-rendery .construction-presentation-meta small { color: var(--text-faint); font-size: var(--t-xs); }
#modal-root .kst-rendery .construction-presentation-item > .icon-button.danger { top: var(--s-1); right: var(--s-1); border: 0; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--cien-1); color: var(--danger); font-weight: var(--w-regular); }   /* wzór: kosz kafelka 36 px, róg 8, bez ramki */
.kst-gl { position: absolute; left: var(--s-1); top: var(--s-1); display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-strong); }
/* === 6. DROBNE WYRÓWNANIA DO WZORU (pomiar program ↔ artefakt, pc 1646) ======================================== */
#modal-root .construction-editor-grid .construction-dimensions-grid input { font-weight: var(--w-regular); }
#modal-root .kst-rendery .construction-presentation-preview { display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); }
#modal-root .kst-rendery .construction-presentation-meta { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); }
/* „?” (pomoc okna) — kwadrat 36 px jak ikony nagłówka we wzorze */
#modal-root :is(.modal.construction-popup, .construction-bubble) > header .modal-help-btn { width: var(--h-control); height: var(--h-control); padding: 0; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--t-md); font-weight: var(--w-regular); }
/* Wąskie okno (tablet, dymek): trzy przyciski nie mieszczą się w rzędzie — ostatni schodzi niżej zamiast nakładać się na sąsiada */
.kst-akc2 { flex-wrap: wrap; }
#modal-root .kst-akc2 :is(.upload-button, .kst-sprawdz, .kst-popraw) { min-width: max-content; white-space: nowrap; }
#modal-root .kst-zd, #modal-root .kst-zd small { white-space: normal; }
#modal-root :is(.modal.construction-popup > footer, .construction-bubble-footer) .button { padding: 0 var(--s-3); }
/* Pusta lista renderów nie dopisuje własnego zdania pod przerywanym polem „Dodaj rendery” (wzór v99) */
.kst-rendery [data-presentation-list="render"] > .construction-presentation-empty { display: none; }
#modal-root :is(.modal.construction-popup, .construction-bubble) > header .icon-button[data-action="close-construction-bubble"] { border-color: transparent; background: transparent; color: var(--text); }
#modal-root .construction-bubble > header .icon-button[data-action="close-construction-bubble"]:hover { background: var(--btn-2); }
#modal-root .kst-akc2 .kst-popraw { gap: var(--s-1); }
/* tablet: przyciski zestawienia zwarte jak we wzorze (13 px, odstęp 4 px) */
:root[data-ui="tablet"] #modal-root .kst-akc2 :is(.upload-button, .kst-sprawdz, .kst-popraw) { padding: 0 var(--s-1); font-size: var(--t-sm); }