/* Wybór pojazdu — Marka → Model → Rok. Wygląd przeniesiony 1:1 z poprzedniej wersji na select2: złoto #C4A677, wysokość 44 px, zaokrąglenie 10 px, obwódka 2 px. ⚠️ Poprzedni arkusz miał `!important` w każdej regule, bo walczył z domyślnym stylem biblioteki. Bez biblioteki nie ma z czym walczyć — dlatego tu nie ma ani jednego. */ /* ⛔ PALETA MUSI STAĆ NA OBU KORZENIACH. Zmienne CSS dziedziczą się po drzewie DOM, a panel z listą mieszka w `` — czyli POZA `.dyn-cat`. Zadeklarowana tylko na module zmienna po prostu tam nie istnieje: `background: var(--dc-zloto)` staje się nieprawidłowe i spada do `transparent`, a `color:#fff` (literał) zostaje. Objaw był taki: wybrana pozycja listy — biały tekst na białym tle. */ /* ⛔ MODUŁ NIE MOŻE MIEĆ WYMUSZONEJ SZEROKOŚCI. `.dyn-cat` jest elementem elastycznym w `.grid-item` Journala, więc domyślnie dopasowuje się do treści — i TYLKO dlatego ustawienie „Horizontal Align" z opcji kolumny ma co przesuwać. Nadanie mu `width:100%` (próbowałem, żeby zadziałało zapytanie kontenerowe) rozdymało moduł z 625 do 1360 px i wyrównanie przestawało działać: element wypełniający kolumnę nie ma jak być w niej wyrównany. ⛔ ALE SZEROKOŚCI NIE MOŻNA TEŻ ZOSTAWIĆ ZAWIJANIU. To błędne koło: szerokość modułu wynika z tego, ile pól zmieściło się w rzędzie, a to — z szerokości modułu. Zmierzone: moduł ustalał się na 625 px, pola rozciągały się do sufitu 280 px i trzecie zawijało do drugiego rzędu, choć miejsca w kolumnie było 1360 px. Dlatego szerokość podajemy WPROST, wyliczoną z liczby pól (`--dc-pol` wstawia szablon). `max-width: 100%` zostawia zawijanie tam, gdzie kolumna jest wąska. ⚠️ 250 px, a nie 208 px liczone z najdłuższej DZISIEJSZEJ etykiety. Katalog rośnie, nazwy modeli bywają długie (`NINJA 1000SX | ZX1002` to 21 znaków), a w kolumnie jest 1360 px miejsca — nie ma powodu ciąć w obrys tego, co akurat mamy w bazie. */ .dyn-cat { width: calc(var(--dc-pol, 3) * 250px + (var(--dc-pol, 3) - 1) * 10px); max-width: 100%; } .dyn-cat, .dyn-cat-panel { --dc-zloto: #C4A677; --dc-obwodka: #e0e0e0; --dc-tekst: #333; --dc-zastepnik: #999; } .dyn-cat-tytul { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--dc-tekst); } .dyn-cat-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } /* ⚠️ Pola dopasowują się DO TREŚCI, do 250 px — tak jak w pierwowzorze (`display:inline-block; max-width:250px`). Wymuszenie równej szerokości wygląda porządniej na papierze, ale „1993" zajmuje wtedy tyle co „CB1000F HORNET" i cztery pola przestają się mieścić w rzędzie (zmierzone: kontener ma 471 px). `position:relative` zostaje dla nakładki wskaźnika ładowania. */ /* ⚠️ SZEROKOŚĆ BAZOWA 208 px NIE JEST Z SUFITU. Tyle zajmuje najdłuższa etykieta („--- Select a Model ---" to 160 px tekstu plus wcięcia). Trzy pola po tyle dają 644 px i to jest naturalna szerokość całego modułu tam, gdzie jest miejsce. Gdy miejsca brakuje — kafel „Models Guide" ma 340 px — pola zawijają się same, bez zapytań o szerokość. Równe szerokości bierze się stąd, że wszystkie mają tę samą bazę i ten sam współczynnik rozciągania. `position:relative` zostaje dla nakładki wskaźnika ładowania. */ /* ⚠️ Bez sufitu szerokości. Odkąd moduł ma szerokość podaną wprost, w rzędzie i tak wychodzi 208 px na pole, a przy zawinięciu pole ma WYPEŁNIĆ kolumnę — sufit zostawiał wtedy 16 px pustego z prawej. */ .dyn-cat-pole { position: relative; flex: 1 1 250px; min-width: 0; } /* Natywna lista zostaje w przepływie (nadaje polu wysokość i niesie stan formularza), ale szerokość rozdziela już flex — patrz reguła wyżej. Przycisk leży na niej. */ /* ⛔ Natywna lista ZOSTAJE w drzewie (niesie stan, działa bez skryptu), ale schodzi z oczu. `display:none` byłby tu błędem: pole bez układu bywa pomijane przy przywracaniu stanu formularza i przy autouzupełnianiu. */ /* ---- lista PRZED wzbogaceniem przez skrypt ---- ⛔ TA REGUŁA ISTNIEJE, BO STAN NIEWZBOGACONY TEŻ MUSI MIEĆ WYGLĄD. Natywny `