/* ============================================================================ 25-design-plany.css — OKNO DESIGN, OKNO KONSTRUKCJI, OKNO PLANOWANIA ---------------------------------------------------------------------------- Trzy okna jednej ścieżki pracy: Design (co projektujemy) → konstrukcja (dane techniczne) → Plany (kto i kiedy rysuje). Design i konstrukcja dzielą TEN SAM bok z listą konstrukcji (`renderDesignConstructionSidebar`), dlatego jest tu jeden komplet reguł, a nie dwa. Czego TU NIE MA (świadomie — leży gdzie indziej): • rama okna, `.form-panel`, siatki pól, załączniki → 19-modale-tresc.css (stamtąd też: `.planning-editor-layout`, `.planning-side/main-column`, `.construction-editor-grid`, `.context-tab`, `.attachment-*`) • silnik osi czasu (dni, weekendy, kafelki, uchwyty) → 14-timeline.css Podglądy w oknach NOSZĄ klasę `.timeline`, więc dziedziczą całość; tutaj zostają wyłącznie RÓŻNICE: niższy nagłówek, wyższe kafelki, brak chwytu. • materiały prezentacyjne, rendery, 360/3DVista → 18-prezentacje.css Czego NIE USTAWIAMY, bo robi to JS inline: szerokość kolumny dni i siatkę podglądu (`designPreviewGridStyle` — 188 px nazwa, 36 px dzień), wysokość wiersza oraz `top` kafelka (pasy co 56 px w Design, co 38 px w Planach). ============================================================================ */ /* === 1. OKNO DESIGN — powłoka i przestrzeń robocza ========================== Formularz okna Design jako JEDYNY z okien roboczych nie jest wyliczony w 19-modale-tresc (§`.modal.X > form`), więc dostawałby padding i scroll ze zwykłego `.modal > form`. Oddajemy mu całą wysokość — przewijają się dopiero kolumny w środku. */ .modal > .design-editor-shell { display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; overflow: hidden; padding: 0; } /* Bok z konstrukcjami + reszta. `no-sidebar` = konstrukcja bez Design. Przygaszone tło niesie tu robotę: białe panele mają się na czym odciąć (to samo w oknie konstrukcji, które używa tej samej przestrzeni roboczej). */ .design-workspace { display: grid; grid-template-columns: var(--bok-design) minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; background: var(--surface-2); } .design-workspace.no-sidebar { grid-template-columns: minmax(0, 1fr); } /* M4 (18.10.2026): ciało okna to jedna kolumna z zakładkami (25c-design-okno.css) — przewija się samo, zakładka „Opis i pliki” rozciąga edytor. */ .design-editor-body { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: var(--s-2) var(--s-3); } /* === 2. BOK: LISTA KONSTRUKCJI DESIGN ====================================== `position: relative` jest nośne — na nim wisi rozwijana lista typów (§3). */ .design-construction-sidebar { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--s-2); min-width: 0; min-height: 0; overflow: hidden; padding: var(--s-2); border-right: 1px solid var(--line); background: var(--surface); } .design-sidebar-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--h-control-sm); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); } /* „+" jest zielony (dodaj), po otwarciu obraca się w czerwony „×" (zamknij) — jeden przycisk, dwa znaczenia. public/js/ui/tony-przyciskow.js celowo go pomija. */ /* 13.09.2026 (system przycisków): „+" to akcja dodania — akcent; otwarty „×" to zwykłe zamknięcie — szary. */ .icon-button.design-sidebar-plus { border-color: transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); } /* runda 3: jak „×” na karcie — bez tła, szara ikona 16 px, róg 8 (wzór .ui-ik) */ .icon-button.design-sidebar-plus:hover { border-color: transparent; background: var(--btn-2); } .icon-button.design-sidebar-plus.is-open { border-color: transparent; background: transparent; color: var(--text-muted); } .design-sidebar-plus .icon { width: 18px; height: 18px; transition: transform var(--wolno); } /* wzór: .ui-ik .ic = 18 px (zmierzone na żywo) */ .design-sidebar-plus.is-open .icon { transform: rotate(45deg); } /* Karta „Dane Design" i karty konstrukcji to ten sam kafelek — różni je tylko zawartość, więc i wygląd musi być jeden. Aktywna = pasek na akcencie. */ /* W1d: karta konstrukcji jak chip telefonu — biała, bez ramki, włosowy obrys; WYBRANA = akcent (decyzja W1-3). */ .design-summary-card, .design-construction-card { position: relative; display: grid; min-width: 0; border: 1px solid transparent; border-radius: var(--pole-r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); color: var(--text); text-align: left; } .design-summary-card { gap: var(--s-1); min-height: var(--topbar-h); padding: var(--s-2) var(--s-3); cursor: pointer; } .design-summary-card:disabled { cursor: default; } .design-summary-card > span, .design-construction-card-title { overflow: hidden; font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; } .design-summary-card > small { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; } .design-summary-card.active, .design-construction-card.active { border-color: transparent; background: var(--accent); box-shadow: none; color: var(--text-invert); } .design-summary-card.active > small, .design-construction-card.active :is(.design-construction-card-main, .design-construction-card-hint) { color: var(--text-invert); } .design-construction-card-list { display: grid; align-content: start; gap: var(--s-2); min-height: 0; overflow: auto; } .design-construction-card-main { display: grid; align-content: center; gap: var(--s-1); min-width: 0; padding: var(--s-2); border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .design-construction-card-main:disabled { cursor: default; } /* E2 (27.09): `align-content: center` — na tablecie przycisk ma 40 px, a nazwa stała u góry obok wyśrodkowanego „×”. */ /* Konstrukcja dodana w oknie, ale jeszcze nie zapisana na serwerze: przerywana ramka + podpis „niezapisana". Wcześniej .pending nie miało żadnego stylu, więc karta wyglądała identycznie jak zapisana — a klik nic nie robił. */ .design-construction-card.pending { border-style: dashed; } .design-construction-card-hint { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; } /* Krzyżyk w rogu karty — mały, ale z powiększonym polem trafienia na dotyku. */ .design-construction-card-remove { position: absolute; top: var(--s-1); right: var(--s-1); display: grid; place-items: center; width: var(--s-5); height: var(--s-5); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); cursor: pointer; } .design-construction-card-remove:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, var(--surface)); } /* === 3. WYBÓR TYPU KONSTRUKCJI — lista rozwijana =========================== Nakładka, nie kolejny wiersz boku: dopisanie jej do siatki rozpychało listę kart. Kotwicą jest bok (§2) albo pasek zakładek (`.design-tabs-shell`). */ .design-type-popover { position: absolute; z-index: var(--z-menu-lokalne); top: calc(var(--h-control) + var(--s-3)); right: var(--s-2); left: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); max-height: calc(100% - var(--s-7)); overflow: hidden; padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--cien-2); } .design-type-popover[hidden] { display: none; } /* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */ .design-picker-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); flex: 0 0 auto; } .design-type-options { display: grid; align-content: start; gap: var(--s-1); flex: 0 1 auto; min-height: 0; overflow: auto; } .design-type-option { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--h-row); padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-weight: var(--w-bold); line-height: var(--lh-tight); text-align: left; cursor: pointer; } .design-type-option small { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); } .design-type-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-strong); } /* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */ /* === 4. PANELE OKNA DESIGN ================================================= */ /* M4 (18.10.2026): panele „Dane Design”, „Zespół i harmonogram”, „Opis i pliki”, „Prezentacja” mają własny arkusz — 25c-design-okno.css (dawne reguły siatki 3 pól, bloku przydziału z polami wyboru, dwóch kolumn opis | załączniki — usunięte razem z tym układem). */ /* Stopka panelu „Dane Design” (tylko Termin dla handlowca): informacja, nie pola do wypełnienia. */ .design-readonly-line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); } .design-readonly-line > span { display: inline-flex; align-items: baseline; gap: var(--s-1); } .design-readonly-line em { color: var(--text-muted); font-size: var(--t-2xs); font-style: normal; font-weight: var(--w-heavy); } .design-readonly-line strong { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); } /* Stan zgłoszenia w stopce „Dane Design" — jedna linijka zamiast harmonogramu. */ .design-stan-zgloszenia strong { color: var(--accent-strong); } /* ZIELEŃ ZDJĘTA Z „Generuj prezentację" — 12.08.2026, polecenie użytkownika: „dlaczego Generuj prezentację w oknie kalkulatora jest zielone, a nie niebieskie". W systemie kolorów ZIELONY znaczy JEDNO: ten przycisk zapisuje. Generowanie prezentacji niczego nie zapisuje, więc zieleń tylko myliła. Gotowość i tak widać: dopóki nie ma renderów, przycisk jest wyszarzony i nieklikalny. Zostaje niebieski z `.button.primary` — jak każda akcja główna okna. */ /* === 5. PODGLĄD OSI CZASU W OKNIE ========================================== M4 (18.10.2026): oś projektantów w oknie Design to ta sama oś co w Planach (.pos-*, 25b-plany-okno.css; rysuje ją okna/plany-os.js), z nawigacją i legendą z 25c-design-okno.css. Dawna siatka .timeline z kafelkiem podglądu (.design-preview-*), numerowane krótkie prace (.task-nr) i lista dni telefonu (.design-agenda-*) zostały usunięte razem z kodem, który je rysował. */ /* === 6. OKNO PLANOWANIA ==================================================== Formularz NIE jest tu bezpośrednim dzieckiem okna (owija go `.planning-shell` z czatem etapu obok), więc reguły `.modal > form` go nie obejmują — całą przestrzeń i przewijanie rozdaje powłoka. */ /* E2 (27.09): wiersze głównej kolumny według treści. Przy wiersze „auto” w kolumnie niższej niż treść (1280×800) harmonogram dostawał 273 px zamiast 357 i jego szare kolumny weekendów rysowały się na nagłówkach „Konstrukcje do planowania” i „Uwagi”. Teraz kolumna przewija się, a nic na siebie nie nachodzi. */ /* Panele głównej kolumny same się nie przewijają — robi to ich zawartość. */ /* Macierz „konstrukcja | inżynier | BOM techniczny". To ARKUSZ, nie lista kart: wiersze rozdziela kreska, żeby dało się je czytać wzrokiem w dół kolumny. 19-modale-tresc.css nadaje `.planning-construction-row` wygląd klikalnej karty — jedyne żywe użycie tej klasy jest właśnie tutaj, więc kartę zdejmujemy. */ /* Nagłówek zostaje na wierzchu przy przewijaniu macierzy. */ /* E2 (27.09): w oknie „Edytuj plany” na 1440 panel ma ~290 px, a trzy kolumny potrzebowały 430 — zestawienie wychodziło poza ramkę („Zestawie…”, „BOM_PO…”). W wąskim panelu zestawienie schodzi pod nazwę, na całą szerokość wiersza. */ @container konstrukcje-planow (width < 560px) { } /* === 7. INŻYNIER PRZY KONSTRUKCJI ========================================== Kolumna ma 56 px, więc zamiast rozwijanej listy jest kółko z inicjałami; właściwy