/* ============================================================================
   25g-konstrukcja-w-design.css — KONSTRUKCJA W OKNIE DESIGN: jedno okno, dwie kolumny (DF2, 18.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN/artefakt/Design.html z otwartą konstrukcją (okna_css.txt: .dsg2.na-kon, .dsg-rail, .dsg-dz, .dsg-k, .dsg-kg, .kst-g, .kst).
   Wzór pokazuje TĘ SAMĄ ramkę okna Design: nagłówek „Edytuj Design” zostaje, lewe menu zostaje, a w miejscu zakładek i stopki Design stoi
   konstrukcja — nagłówek (nazwa + „Design A”, plakietki, kosz), dwie kolumny [Wymiary + Zestawienie | Rendery], stopka „Zamknij / Zapisz konstrukcję”.
   W programie konstrukcja jest nadal dymkiem (`.construction-bubble`, ten sam formularz i zapis — okna/konstrukcja.js), ale nie jest już
   osobną kartą nad oknem: dymek przykrywa ciało i stopkę okna Design, a lewą kolumnę zostawia przezroczystą (menu pod spodem działa).
   Wymiary okna przekazuje dymkowi okna/konstrukcja-w-design.js (--dsg-g = dół nagłówka okna, --dsg-d = wysokość stopki, --dsg-s = dół menu).
   Dymek w oknie bez menu (kalkulator kosztów, `.bez-menu`) zostaje kartą na środku — tego pliku nie dotyczy.
   Telefon (≤ 768 px): 9-telefon/16-konstrukcja-w-design.css. Karta konstrukcji w menu: nazwa, plakietka „Sprzedana”, × bez ramki.
   ============================================================================ */

/* === 1. MENU BOCZNE: pojemnik listy przezroczysty dla układu (karta „Design A”, nagłówek „Konstrukcje +” i lista stoją w siatce menu jak dotąd) === */
.design-sidebar-list { display: contents; }
.dsg-mob { display: none; }   /* zwijana karta menu jest tylko na telefonie */

/* === 2. KARTY MENU WG WZORU (.dsg-dz, .dsg-k) ================================================================== */
/* „Design A / status”: nazwa 14/700, status 12 jasny, odstęp 2 px, wysokość z treści (wzór: 58 px) */
.design-construction-sidebar .design-summary-card { gap: 2px; min-height: 0; padding: var(--s-2) var(--s-3); }
.design-construction-sidebar .design-summary-card > span { font-size: var(--t-base); font-weight: var(--w-strong); }
.design-construction-sidebar .design-summary-card > small { color: var(--text-faint); font-size: var(--t-xs); }
.design-construction-sidebar .design-summary-card.active > small { color: var(--text-invert); opacity: .85; }
/* karta konstrukcji: nazwa (do 2 linii) + plakietka · × bez ramki */
.design-construction-sidebar .design-construction-card { display: flex; align-items: center; gap: 2px; min-height: var(--h-control); }
.design-construction-sidebar .design-construction-card-main { display: flex; flex: 1 1 0; align-items: center; min-width: 0; padding: var(--s-1) var(--s-2); }
.design-construction-card-title { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--t-sm); white-space: normal; overflow: visible; }
.dsg-kt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.dsg-kn { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: var(--w-bold); overflow-wrap: anywhere; }
.dsg-kchip { max-width: 100%; overflow: hidden; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: var(--t-xs); font-weight: var(--w-strong); text-overflow: ellipsis; white-space: nowrap; }
/* × (usuń konstrukcję z Design): bez ramki i tła, w kolorze błędu; w zaznaczonej karcie w kolorze tekstu karty (wzór: .ui-ik.us) */
.design-construction-sidebar .design-construction-card-remove { position: static; flex: none; width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--danger); }
.design-construction-sidebar .design-construction-card-remove:hover { background: var(--danger-soft); }
.design-construction-sidebar .design-construction-card-remove .icon { width: 18px; height: 18px; }   /* wzór: .ui-ik .ic = 18 px (runda 3, zmierzone; było 16) */
.design-construction-sidebar .design-construction-card.active .design-construction-card-remove { color: var(--text-invert); }
.design-construction-sidebar .design-construction-card.active .design-construction-card-remove:hover { background: color-mix(in srgb, var(--text-invert) 18%, transparent); }

/* === 2b. STOPKA OKNA DESIGN: „Generuj prezentację” — ikona + napis (wzór: .dsg-gp), na wierzchu na każdym urządzeniu =========== */
.design-footer-presentation-button .icon { flex: none; width: 16px; height: 16px; }
.design-footer-presentation-button .dsg-gp-m { display: none; }   /* krótki napis „Prezentacja” — tylko telefon (9-telefon/16) */

/* === 3. DYMEK = ZAWARTOŚĆ OKNA DESIGN (komputer i tablet; szersze niż 980 px) =================================== */
@media (min-width: 981px) {
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) {
    inset: var(--dsg-g, 0px) 0 0 0; width: auto; transform: none;
    grid-template-columns: var(--bok-design) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; pointer-events: none;   /* lewa kolumna przezroczysta: menu pod spodem działa */
  }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > * { pointer-events: auto; }
  /* nagłówek konstrukcji: nazwa + „Design A” po lewej, plakietki i kosz po prawej, pod spodem kreska (wzór: .kst-g) */
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header { position: relative; grid-column: 2; grid-row: 1; padding: var(--s-2) var(--s-4) var(--s-3) var(--s-2); background: var(--okno-tlo); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header::after { content: ""; position: absolute; right: var(--s-4); bottom: 0; left: var(--s-2); height: 1px; background: var(--line); }
  /* „?” i × dymka są zbędne: okno ma własne (× okna zamyka najpierw konstrukcję), a „Zamknij” stoi w stopce */
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header :is(.modal-help-btn, [data-action="close-construction-bubble"]) { display: none; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs { margin-left: auto; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > form { grid-column: 2; grid-row: 2; padding: 0 var(--s-4) var(--s-3) var(--s-2); background: var(--okno-tlo); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding: var(--s-3) 0 0; }
  /* stopka na całą szerokość okna, przykrywa stopkę Design (ta sama wysokość) */
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > .construction-bubble-footer { grid-column: 1 / -1; grid-row: 3; align-items: center; min-height: var(--dsg-d, 0px); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--kreska-wlos); background: var(--okno-tlo); }
  /* przy otwartej konstrukcji przełącznik statusu Design chowa się (wzór: nagłówek okna ma tylko tytuł, „?” i ×) — miejsce zostaje, nic nie przeskakuje */
  :root:not([data-ui="mobile"]) .modal.design-editor-modal:has(> .construction-bubble:not(.bez-menu)) > header > .dsg-st { visibility: hidden; }
}

/* === 4. WĄSKIE OKNO BEZ TRYBU TELEFONU (≤ 980 px): menu ląduje nad treścią, dymek zaczyna się pod nim =============== */
@media (max-width: 980px) {
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) {
    inset: var(--dsg-s, 0px) 0 0 0; width: auto; transform: none;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0; border-radius: 0; background: var(--okno-tlo); box-shadow: none; overflow: hidden;
  }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header { position: relative; padding: var(--s-2) var(--s-4) var(--s-3); background: var(--okno-tlo); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header :is(.modal-help-btn, [data-action="close-construction-bubble"]) { display: none; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs { margin-left: auto; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > form { padding: 0 var(--s-4) var(--s-3); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding: var(--s-3) 0 0; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > .construction-bubble-footer { min-height: var(--dsg-d, 0px); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--kreska-wlos); background: var(--okno-tlo); }
}

/* === 5. DROBNE WYRÓWNANIA DO WZORU (pomiar program ↔ Design.html, DF2) ============================================ */
/* tytuł konstrukcji: 19 px, interlinia 1,2 (wzór .kst-gt h3: 22,8 px), podpis „Design A” 12 px — nagłówek 55 px zamiast 68 */
#modal-root .construction-bubble:not(.bez-menu) .construction-bubble-title strong { line-height: 1.2; }
#modal-root .construction-bubble:not(.bez-menu) .construction-bubble-title small { margin-top: 2px; font-size: var(--t-xs); }
/* nagłówek „Konstrukcje +” w menu: 13 px / 700 (wzór: .dsg-rh b) */
.design-construction-sidebar .design-sidebar-head > span { font-size: var(--t-sm); font-weight: var(--w-strong); }
/* „Więcej ⋯” w stopce Design (tablet, telefon) pojawia się tylko, gdy jest co w nim pokazać — dziś jedynie „Kopiuj link” (widoczny po wygenerowaniu prezentacji) */
#modal-root .modal.design-editor-modal > footer .stopka-wiecej:not(:has(.stopka-wiecej-panel > :not([hidden]))) { display: none; }