/* ============================================================================
   25o-design-zgodnosc-z-wzorem.css — okno Design i okno konstrukcji: zestrojenie z AKTUALNYM wzorem (19.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN\artefakt\Design.html (zmierzony na żywo, komputer 1646 × 930 i tablet 1024; wartości z jego arkusza:
   .dsg-tab, .dsg-rh, .dsg-k, .dsg-dz, .ui-st, .ui-seg, .ui-ed-*). Tokeny wzoru → tokeny programu: --linia = --line, --pow = --surface,
   --pow-3 = --surface-3, --tusz-2 = --text-muted, --tusz-3 = --text-faint, --ak = --accent, --r-s = --r-sm, --h-k = --h-control.
   Telefon: css/9-telefon/22-design-zgodnosc-z-wzorem.css. Reguły stoją PO arkuszach 25–25n i wygrywają kolejnością.
   ============================================================================ */

/* --- zakładki Dane / Opis / Prezentacja: linia aktywnej zakładki od 8 do 8 px (wzór: left/right = --s-2), nie na całą szerokość --- */
.dsg-tabs .dsg-tab.active::after { left: var(--s-2); right: var(--s-2); }

/* --- boczne menu: nagłówek „Konstrukcje” cofnięty o 4 px (wzór: padding-left --s-1); karty z PRAWDZIWĄ ramką 1 px (--line) zamiast
   cienia we wnętrzu (ramka była widoczna 1 px od krawędzi) --- */
.design-sidebar-head { padding-left: var(--s-1); }
.design-construction-sidebar :is(.design-summary-card, .design-construction-card) { border-color: var(--line); box-shadow: none; }
.design-construction-sidebar :is(.design-summary-card, .design-construction-card).active { border-color: var(--accent); }
.design-construction-sidebar .design-construction-card.pending { background: var(--surface-2); }

/* --- etykieta pola: odstęp od pola 4 px (wzór: .ui-f gap --s-1; ogólne .field ma 3 px) --- */
:is(.design-editor-modal, .construction-in-design) .field { gap: var(--s-1); }

/* --- dopiski nagłówków paneli i podpisy: pogrubienie bez zmiany koloru (wzór: <b> dziedziczy --tusz-3, waga 700) --- */
.dsg-wer b, .dsg-tp small b, .dsg-os-info > b:first-child { color: inherit; font-weight: var(--w-strong); }
.dsg-os-info b:not(:first-child) { color: inherit; font-weight: inherit; }
.dsg-pod { color: var(--text-faint); }
.dsg-os-info, .pln-leg .dsg-pod { font-size: var(--t-xs); }

/* --- plakietki stanu (wzór .ui-st): ramka 1 px (przezroczysta), róg 12 px — pigułka o 2 px szersza --- */
.dsg-ost { border: 1px solid transparent; border-radius: var(--r); }

/* --- przełączniki (wzór .ui-seg): odstęp 3 px między przyciskami, róg 12 px, cień wybranego = --cien-1 --- */
.modal.design-editor-modal .segmented { gap: 3px; border-radius: var(--r); }
.modal.design-editor-modal .segmented > [aria-pressed="true"] { box-shadow: var(--cien-1); }
.modal.design-editor-modal .dsg-st > [data-dsg-st][aria-pressed="true"] { box-shadow: none; }

/* --- pole „Budżet Design”: wartość zwykłą wagą, „EUR” 700 (wzór: input 400) --- */
#modal-root .dsg-bud-f .currency-field input { font-weight: var(--w-regular); }
/* data (wzór: napis w polu 14 px / 400) */
.dsg-term .pl-data-pole span:not(.icon) { font-weight: var(--w-regular); }

/* --- przyciski-ikony okna Design (zoom osi, kosz pliku): ikona 18 px jak w .ui-ik .ic --- */
.dsg-ik .icon { width: 18px; height: 18px; }
.dsg-pl-g h4 { font-weight: var(--w-strong); }

/* --- „Pliki”: kosz w wierszu pliku 18 px --- */
.dsg-pw .dsg-ik .icon { width: 18px; height: 18px; }

/* ============================================================================
   EDYTOR TEKSTU (opis Design i pełny ekran) — pasek jak we wzorze (.ui-ed-p): ikony 16 px, kreski między grupami,
   „Tekst ⌄” i „Skala ⌄” 13 px z szewronem 14 px, nowe rysunki ikon (lista numerowana, lista kontrolna, wyczyść format, ołówek, osoba).
   ============================================================================ */
:root {
  --ikona-ed-lista-numer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h10M10 12h10M10 18h10'/%3E%3Cpath d='M4 5l1.5-1v4M3.8 11.2c.3-.7 1.9-.7 1.9.4 0 .9-1.9 1.6-1.9 2.6h2.2M3.8 17.2h1.6c.8 0 .8 1.1 0 1.1.9 0 .9 1.2 0 1.2H3.8'/%3E%3C/svg%3E");
  --ikona-ed-lista-kontrolna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E");
  --ikona-ed-bez-formatu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14M12 5v6M8 19h8M4 4l16 16'/%3E%3C/svg%3E");
  --ikona-ed-olowek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 7.2a1.9 1.9 0 0 0 0-2.7l-.9-.9a1.9 1.9 0 0 0-2.7 0L4.2 16.2a1.9 1.9 0 0 0-.5.8l-1.1 3.6a.5.5 0 0 0 .6.6l3.6-1.1a1.9 1.9 0 0 0 .8-.5z'/%3E%3Cpath d='m15 5.6 3.4 3.4'/%3E%3C/svg%3E");
  --ikona-ed-osoba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.4 7-5.4s6.2 1.8 7 5.4'/%3E%3C/svg%3E");
  --strzalka-ed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465063' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --strzalka-ed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bccb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.icon-ed-lista-numer { mask-image: var(--ikona-ed-lista-numer); -webkit-mask-image: var(--ikona-ed-lista-numer); }
.icon-ed-lista-kontrolna { mask-image: var(--ikona-ed-lista-kontrolna); -webkit-mask-image: var(--ikona-ed-lista-kontrolna); }
.icon-ed-bez-formatu { mask-image: var(--ikona-ed-bez-formatu); -webkit-mask-image: var(--ikona-ed-bez-formatu); }
.icon-ed-olowek { mask-image: var(--ikona-ed-olowek); -webkit-mask-image: var(--ikona-ed-olowek); }
.icon-ed-osoba { mask-image: var(--ikona-ed-osoba); -webkit-mask-image: var(--ikona-ed-osoba); }

:is(.dsg-opis-ed, .rich-expand-panel) .rich-toolbar .icon { width: 16px; height: 16px; }
:is(.dsg-opis-ed, .rich-expand-panel) .rich-toolbar > .rich-sep { display: block; flex: none; align-self: stretch; width: 1px; height: auto; margin: var(--s-1); background: var(--line); }
/* „Tekst ⌄” / „Skala ⌄”: napis 13 px, wewnętrzny odstęp 8 px, szewron 14 px 8 px od prawej krawędzi (wzór .ui-ed-l) */
#modal-root .dsg-opis-ed .rich-toolbar select, :root:not([data-ui="mobile"]) #modal-root .dsg-opis-ed .rich-toolbar select, .rich-expand-panel .rich-toolbar select { box-sizing: border-box; width: 66.4px; min-width: 0; padding: 0 calc(var(--s-2) + 14px + var(--s-1)) 0 var(--s-2); border-radius: var(--r-sm); background-image: var(--strzalka-ed); background-position: right var(--s-2) center; background-size: 14px 14px; font-size: var(--t-sm); font-weight: var(--w-regular); }
#modal-root .dsg-opis-ed .rich-toolbar select:hover, .rich-expand-panel .rich-toolbar select:hover { background-color: var(--surface-3); }

/* ============================================================================
   IKONY WZORU W OKNACH DESIGN / KONSTRUKCJA / BOM / EDYTOR: rysunki i kreska 1,8 px z zestawu IK wzoru (program ma Lucide, kreska 2 px, inne ścieżki
   kosza i ptaszka). Tylko wewnątrz tych okien; reszta programu bez zmian. Nazwy klas zostają, zmienia się maska.
   ============================================================================ */
:root {
  --wz-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --wz-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --wz-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --wz-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --wz-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --wz-kosz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
  --wz-kalendarz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E");
  --wz-pobierz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --wz-odswiez: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6'/%3E%3C/svg%3E");
  --wz-obraz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Cpath d='M20 15l-5-5L5 20'/%3E%3C/svg%3E");
  --wz-olowek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E");
  --wz-plik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
  --wz-prawo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --wz-uwaga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E");
  --wz-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='12' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='18' r='1' fill='black'/%3E%3C/svg%3E");
}
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-close { mask-image: var(--wz-x); -webkit-mask-image: var(--wz-x); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-plus { mask-image: var(--wz-plus); -webkit-mask-image: var(--wz-plus); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-check { mask-image: var(--wz-check); -webkit-mask-image: var(--wz-check); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-minus { mask-image: var(--wz-minus); -webkit-mask-image: var(--wz-minus); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-chevron-down { mask-image: var(--wz-chev); -webkit-mask-image: var(--wz-chev); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-trash { mask-image: var(--wz-kosz); -webkit-mask-image: var(--wz-kosz); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-calendar { mask-image: var(--wz-kalendarz); -webkit-mask-image: var(--wz-kalendarz); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-download { mask-image: var(--wz-pobierz); -webkit-mask-image: var(--wz-pobierz); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-refresh { mask-image: var(--wz-odswiez); -webkit-mask-image: var(--wz-odswiez); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-image { mask-image: var(--wz-obraz); -webkit-mask-image: var(--wz-obraz); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-pencil { mask-image: var(--wz-olowek); -webkit-mask-image: var(--wz-olowek); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-doc { mask-image: var(--wz-plik); -webkit-mask-image: var(--wz-plik); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-chevron-right { mask-image: var(--wz-prawo); -webkit-mask-image: var(--wz-prawo); }
:is(.design-editor-modal, .construction-modal, .construction-in-design, .calculation-modal, .bom-comment-modal, .rich-expand-panel) .icon-alert-triangle { mask-image: var(--wz-uwaga); -webkit-mask-image: var(--wz-uwaga); }
.icon-ed-lista { mask-image: var(--wz-lista); -webkit-mask-image: var(--wz-lista); }

/* --- chip „+” (dodaj projektanta): ikona 16 px (wzór: .ui-zav.dod svg) --- */
.dsg-zav.dod .icon { width: 16px; height: 16px; }

/* --- okno konstrukcji: pole „Dodaj rendery” z tekstem do lewej (wzór: button ma text-align:left), kosz na kafelku renderu 18 px --- */
#modal-root .kst-zd, #modal-root .kst-zd small { text-align: left; }
#modal-root .kst-rendery .construction-presentation-item > .icon-button .icon { width: 18px; height: 18px; }
/* pełny ekran edytora: listy „Tekst” / „Skala” bez ramki i tła, napis przyciszony (jak w oknie Design) */
.rich-expand-panel .rich-toolbar select { height: var(--h-control); border-color: transparent; background-color: transparent; color: var(--text-muted); }