/* * Manifest kompilowany do application.css (Propshaft). * Kolory/typografia pochodzą z tokenów semantycznych zdefiniowanych w nostos_tokens.css * (linkowany w layoutcie przed tym plikiem). Używamy WYŁĄCZNIE tokenów semantycznych * (--bg, --text, --primary...), żeby motyw jasny/ciemny działał bez zmian w tym pliku. */ * { box-sizing: border-box; } /* Elementy rysowane przez system operacyjny — rozwinięta lista opcji, paski przewijania, zaznaczenie tekstu — nie biorą kolorów z tokenów, tylko z `color-scheme`. Bez tej deklaracji przeglądarka zakłada tryb jasny, więc w trybie ciemnym rozwinięta lista filtrów była białą płachtą obok pól w kolorach motywu. Wartość idzie za atrybutem `data-theme`, tym samym, którym sterują tokeny — także w trybie systemowym, bo skrypt motywu i tak ustawia wtedy `data-theme` na wyliczony tryb. */ :root, [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--font-ui); color: var(--text); background: var(--bg); } .test-deployment-banner { padding: var(--space-2) var(--space-4); color: var(--info-fg); background: var(--info-bg); font-size: var(--text-sm); text-align: center; } /* === Warstwa bazowa odnośnika === Wspólna podstawa dla każdego , także tego bez własnej klasy (lista użytkowników, historia operacji, adres e-mail na wniosku). Bez niej link renderuje się domyślnym niebieskim przeglądarki spoza palety — w trybie ciemnym praktycznie niewidocznym. Selektor typu (specyficzność 0,0,1) celowo — reguły komponentów niżej w tym pliku nadpisują go bez dodatkowych zabiegów. Wyjątek: link ostylowany jako przycisk (a.button) jest z warstwy bazowej wyłączony, żeby stan :hover nie przemalował mu tekstu wbrew wariantowi .button--*. */ a:where(:not(.button)) { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:where(:not(.button)):hover { color: var(--primary-hover); text-decoration-thickness: 2px; } a:where(:not(.button)):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } /* Warianty, które świadomie zdejmują podkreślenie warstwy bazowej. Podkreślenie zostaje tam, gdzie link stoi w zdaniu i musi być rozpoznawalny bez koloru (WCAG 1.4.1). Elementy poniżej mają własny nośnik: pigułkę, podkreślenie stanu aktywnego albo pozycję w kolumnie akcji. */ .page__logo, .page__nav-link, .queue-scopes__link, .data-table__action, .pagination__link, .type-choice__item, .button { text-decoration: none; } .page { display: flex; flex-direction: column; min-height: 100vh; } /* Bez justify-content: space-between — do prawej krawędzi elementy odsuwa margin-left: auto (.page__utilities na szerokim ekranie, .page__menu-toggle na wąskim). Przy space-between wolne miejsce trafiało między logo a wskaźnik modułu w wierszu, z którego konto i motyw zeszły do drugiego wiersza — wskaźnik odskakiwał wtedy od logo (#8307). Auto-margines rozdziela grupy tak samo, gdy mieszczą się w jednym wierszu, a przy zawinięciu zostawia grupę logo–wskaźnik przy lewej krawędzi. */ .page__header { --header-pad-block: var(--space-3); --header-pad-inline: var(--space-6); --header-row-gap: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); row-gap: var(--header-row-gap); padding: var(--header-pad-block) var(--header-pad-inline); background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); } .page__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .page__logo-img { display: block; height: 30px; width: auto; } .page__menu-toggle { display: none; } .page__menu { display: contents; } /* Theme-aware swap: data-theme na jest zawsze light|dark (nigdy system), ustawiane synchronicznie przed paintem — swap logo nie miga. */ .page__logo-img--dark { display: none; } [data-theme="dark"] .page__logo-img--light { display: none; } [data-theme="dark"] .page__logo-img--dark { display: block; } /* === Poziom 1: wskaźnik modułu w pasku górnym (#8303) === */ /* Stoi tuż przy logo, oddzielony pionową kreską — odpowiada na pytanie „w którym module pracuję". Przy jednym module jest etykietą, nie przyciskiem, więc nie wchodzi do kolejności fokusu. */ .page__module { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; margin: 0; padding-left: var(--space-4); border-left: 1px solid var(--border); } .page__module-label { font: 700 var(--text-caption)/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .page__module-name { font: 700 var(--text-sm)/1.2 var(--font-brand); color: var(--primary); } /* === Poziom 2: pas z ekranami bieżącego modułu (#8303) === */ /* Ostatni rząd nagłówka na całą jego szerokość: baza flex obejmuje szerokość obszaru treści i oba poziome odstępy nagłówka, a ujemne marginesy przesuwają pas na jego krawędzie. Pas stoi w normalnym przepływie — nie przykleja się przy przewijaniu. Dolnego odstępu nagłówka pas nie odejmuje ujemnym marginesem — zamiast tego nagłówek z pasem w środku w ogóle go nie ma (reguła :has niżej). Ujemny margines trzeba by trzymać w zgodzie z drugą zmienną, a przy większych odstępach przestawał działać: gdy wypełnienie i odstęp wierszy przekraczały wysokość pasa, jego wysokość z marginesami wychodziła ujemna, przeglądarka przycinała wiersz do zera i zostawała szczelina. Bez dolnego wypełnienia nagłówka pas przylega do jego krawędzi przy każdej wartości (#8312). Nawigacja zawija pozycje do kolejnego wiersza — bez tego poniżej ~520 px linki kurczą się i łamią wewnątrz etykiety („Ocena / przewoźnika"), a podkreślenie pozycji aktywnej obejmuje wtedy tylko drugą linię. Ta sama poprawka co w .page__utilities (#8227). Ujemny margines jest tylko po bokach. Ten u góry znosił odstęp wierszy nagłówka, przez co ikonki pierwszego wiersza dotykały górnej krawędzi pasa; bez niego zostaje między nimi pełny odstęp wiersza (#8320). */ .page__nav { flex: 0 0 calc(100% + var(--header-pad-inline) + var(--header-pad-inline)); display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: var(--space-4); row-gap: var(--space-2); margin: 0 calc(-1 * var(--header-pad-inline)); padding: var(--space-1) var(--header-pad-inline); background: var(--surface-alt); border-top: 1px solid var(--border); } /* Pas sam wnosi swoje wypełnienie, więc dolne wypełnienie nagłówka jest tu zbędne — a zerowane tylko wtedy, gdy pas w nagłówku jest (bez modułu nagłówek zostaje symetryczny). */ .page__header:has(.page__nav) { padding-bottom: 0; } .page__nav-link { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; white-space: nowrap; padding: var(--space-1) 0; border-bottom: 2px solid transparent; } .page__nav-link:hover, .page__nav-link:focus-visible { color: var(--text); } .page__nav-link[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); } .page__utilities { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-4); margin-left: auto; } /* === Blok konta zalogowanego użytkownika (nagłówek) === */ .page__account { position: relative; flex: 0 0 auto; } /* button_to renderuje
wokół przycisku — to on jest dzieckiem flexa. */ .page__account form { margin: 0; } .page__account-name { display: flex; align-items: center; gap: var(--space-2); max-width: 24ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); font-size: var(--text-sm); font-weight: 700; cursor: pointer; } .page__account-name::after { content: ""; width: 0.45rem; height: 0.45rem; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); } .page__account[open] .page__account-name::after { transform: translateY(0.1rem) rotate(225deg); } .page__account-name::marker { content: ""; } .page__account-name::-webkit-details-marker { display: none; } .page__account-name:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; } .page__account-menu { position: absolute; z-index: 10; top: calc(100% + var(--space-3)); right: 0; display: flex; min-width: 13rem; flex-direction: column; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-2); } .page__account-link { display: flex; width: 100%; min-height: 40px; align-items: center; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); color: var(--text); background: transparent; font: 600 var(--text-sm)/var(--lh-body) var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; } .page__account-link:hover, .page__account-link:focus-visible, .page__account-link[aria-current="page"] { background: var(--surface-alt); color: var(--primary); } .page__account-logout { color: var(--text-muted); } .page__account-logout:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .page__account-menu form { display: block; width: 100%; } .page__account-menu form:not(:first-child) { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--border); } .page__account-menu .page__account-logout { font-size: var(--text-sm); } .page__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); text-align: center; } .page__lead { margin: 0; color: var(--text-muted); } .page__footer { padding: var(--space-4) var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* === Przełącznik trybu graficznego (jasny / ciemny / systemowy) === */ .theme-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-pill); } /* Przycisk mieści samą ikonę, więc jest kwadratowy — bez padding-u dobranego do długości etykiety. 32 px to najmniejszy cel, który nie rozpycha paska nagłówka; na wąskim ekranie rośnie do 44 px (dalej w tym arkuszu). */ .theme-switcher__option { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; margin: 0; padding: 0; color: var(--text-muted); background: transparent; border-radius: var(--radius-pill); cursor: pointer; } .theme-switcher__icon { display: block; width: 18px; height: 18px; } .theme-switcher__option:hover { color: var(--text); } .theme-switcher__option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .theme-switcher__option.is-active { color: var(--on-primary); background: var(--primary); } .onboarding { width: min(100% - (2 * var(--space-6)), 1280px); margin: 0 auto; padding: var(--space-10) 0 var(--space-16); } .onboarding--wide { width: calc(100% - (2 * var(--space-8))); } .page__flash { width: min(100% - (2 * var(--space-6)), 920px); margin: var(--space-6) auto 0; } .page:has(.onboarding--wide) .page__flash { width: calc(100% - (2 * var(--space-8))); } /* Wariant dla ekranów uwierzytelniania (logowanie) — wąska, wyśrodkowana kolumna; formularz ma dwa pola, więc szerokość onboardingu (1280px) byłaby tu za duża. */ .onboarding--auth { width: min(100% - (2 * var(--space-6)), 420px); padding-top: var(--space-16); } .onboarding--auth .onboarding__heading { text-align: center; margin-bottom: var(--space-6); } /* Sam przycisk „Zaloguj się" nie potrzebuje własnej karty pod kartą formularza. */ .onboarding--auth .onboarding-form__actions { padding: 0; background: transparent; border: 0; box-shadow: none; } .onboarding__heading { margin-bottom: var(--space-8); } .onboarding__eyebrow { margin: 0 0 var(--space-2); color: var(--primary); font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Link w eyebrow („Wszystkie wnioski" na widoku wniosku, „Historia ACE" na ekranie firmy z ACE) ma zachować typografię eyebrow — wersaliki w kolorze marki, nie wtrącony link w zdaniu. */ .onboarding__eyebrow a { color: inherit; } .onboarding__eyebrow a:hover { color: var(--primary-hover); } /* Wiersz nad nazwą firmy (#10424): wejście wstecz po lewej, odnośnik do historii ACE po prawej. Odnośnik trzyma prawą krawędź także wtedy, gdy stoi w wierszu sam — analityk wraca do kolejki pozycją w nawigacji modułu, więc wejścia wstecz na tym ekranie nie ma (#10818). */ .onboarding__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); } /* Odnośnik bierze kolor, podkreślenie oraz stany `:hover` i `:focus-visible` z warstwy bazowej — bez kafelka, ikony, tła i ramki. Rozmiar to stopień skali pisma, na którym stoją pozostałe pozycje pomocnicze nagłówka: eyebrow obok i numer wniosku w wierszu pod spodem. */ .onboarding__history-link { margin: 0 0 var(--space-2) auto; font-size: var(--text-sm); font-weight: 700; } /* Nagłówek bywa jednym słowem szerszym od całej treści: nazwa firmy z rejestru („ODPOWIEDZIALNOŚCIĄ" ma w tym rozmiarze 333 px, a treść na oknie 320 px - 288 px), nazwa pliku importu ACE, nazwa kolumny. Bez zgody na łamanie w środku wyrazu wychodził poza ekran i strona dawała się przewijać w bok (#10823). `anywhere` łamie dopiero wtedy, gdy słowo nie mieści się w linii, więc krótkie nagłówki pozostałych ekranów wyglądają tak samo jak dotąd. Ten sam mechanizm mają wartości z rejestrów w `.detail-list dd`. */ .onboarding__title { margin: 0; font-family: var(--font-brand); font-size: var(--text-display); line-height: var(--lh-display); overflow-wrap: anywhere; } /* Drugi wiersz nagłówka wniosku (#10420): NIP, numer wniosku, status i data złożenia stoją w jednej linii pod nazwą firmy. Pozycje rozdziela sam odstęp — każda mówi, czym jest, a badge ma własne tło, więc kropki i kreski byłyby ozdobnikiem. Wyrównanie do środka, nie do linii bazowej: inaczej pigułka badge'a siada nierówno wobec tekstu. Gdy linia się nie mieści, całe pozycje schodzą niżej w niezmienionej kolejności — osobna reguła dla wąskiego ekranu nie jest potrzebna. Malejąca skala i drugorzędny kolor pokazują kolejność ważności pozycji. Rozmiary i kolory idą z tokenów, które oba motywy mają własne — osobne reguły dla motywu ciemnego nie są do niczego potrzebne. */ .onboarding__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; } /* Pozycja łamie się co najwyżej między pozycjami, nigdy w swoim środku. */ .onboarding__meta > * { white-space: nowrap; } .onboarding__nip { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 600; } .onboarding__application-number { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-sm); } .onboarding__submitted { color: var(--text-muted); } /* Badge w nagłówku wniosku jest o dwa stopnie skali większy od tego na kolejce wniosków i w kartach — sąsiedni stopień (13 px) różniłby się o piksel. Reguła celuje wyłącznie w ten wiersz, wspólna `.badge` zostaje bez zmian. `white-space: normal` znosi dla samego badge'a zakaz łamania z reguły `.onboarding__meta > *`: najdłuższy status ma w tym rozmiarze 329 px, więc na telefonie nie mieści się w treści i bez łamania wypychał stronę w bok (#10817). Progu nie potrzeba — dopóki status mieści się w linii, tekst się nie łamie i badge wygląda tak samo jak dotąd. */ .onboarding__meta .badge { font-size: var(--text-body); white-space: normal; } .onboarding__lead { margin: var(--space-2) 0 0; color: var(--text-muted); } .onboarding-form, .application-details { display: grid; } /* Kafelek siatki ma domyślnie `min-width: auto`, więc nie zwęża się poniżej najwęższego możliwego układu swojej zawartości. Szeroka tabela rozpychałaby wtedy całą stronę mimo własnego regionu przewijania `.data-table-scroll`. */ .application-details > * { min-width: 0; } /* Odstęp między kartami sekcji jest własnością samej karty, nie kontenera — dzięki temu nowy widok składający karty nie musi powielać `gap` we własnej klasie układu i nie zaczyna od sklejonych kart. Sąsiad `*` obejmuje też pasek akcji formularza, który wizualnie jest taką samą kartą — a gdy formularz jest w środku karty i pasek nie sąsiaduje z kartą, ten sam odstęp daje mu własna reguła `.onboarding-form__actions`. */ .form-section + * { margin-top: var(--space-6); } .form-section { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .form-section__heading { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-6); } .form-section__heading h2 { margin: 0; font-family: var(--font-brand); font-size: var(--text-h2); line-height: var(--lh-h2); } .form-section__heading p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-sm); } .form-section__number { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; color: var(--on-primary); background: var(--primary); border-radius: var(--radius-pill); font-weight: 700; } /* Część formularza wewnątrz karty sekcji (#9676) — ten sam nagłówek co w formularzu składania wniosku, bez drugiej ramki karty. Części oddziela linia, a nie odstęp między kartami. */ .form-subsection + .form-subsection { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); } .form-subsection .form-section__heading h3 { margin: 0; font-family: var(--font-brand); font-size: var(--text-h3); line-height: var(--lh-h3); } /* Nagłówek bloku wewnątrz karty „Dane wniosku i decyzja” (#10422). Karta łączy podsumowanie, wynik, notatki i formularz decyzji, więc ich nagłówki schodzą o stopień niżej od nagłówka karty i biorą krój oraz rozmiar ze skali — tak samo jak nagłówek części formularza wyżej. Odstęp od poprzedniego bloku daje sam nagłówek: bloki nie mają własnego kontenera, który by je rozsunął. */ .form-section__block-title { margin: var(--space-6) 0 var(--space-4); font-family: var(--font-brand); font-size: var(--text-h3); line-height: var(--lh-h3); } /* Zwijanie sekcji na ekranie szczegółów wniosku (#9135). Karta ze stanem jest elementem
, a jej nagłówek — , więc przełączanie z klawiatury działa bez własnego kodu. Odstęp wewnętrzny przenosi się z karty na nagłówek i treść: dzięki temu cel kliknięcia obejmuje całą szerokość karty, a nie sam tekst nagłówka. */ .form-section--collapsible { padding: 0; } .section-toggle__summary { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); cursor: pointer; list-style: none; } .section-toggle__summary::marker { content: ""; } .section-toggle__summary::-webkit-details-marker { display: none; } .section-toggle__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .form-section__title, .section-toggle__title { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-brand); font-size: var(--text-h2); line-height: var(--lh-h2); } /* Nagłówek karty niezwijanej stoi bezpośrednio nad treścią i sam musi dać odstęp. W karcie zwijanej ten sam odstęp wychodzi z `padding` nagłówka- przełącznika, więc do wspólnej reguły wyżej marginesu dopisać się nie da — rozepchnąłby cel kliknięcia. Element idący po nagłówku (lista danych, siatka pól, komunikat błędu) własnego górnego marginesu nie ma, a tyle samo odstępu ma nagłówek karty formularza (`.form-section__heading`). */ .form-section__title { margin-bottom: var(--space-6); } /* Strzałka stanu — ta sama, co przy menu konta. */ .section-toggle__title::before, .krs-history__summary::before, .ace-case__summary::before, .inactive-relation__summary::before { content: ""; width: 0.45rem; height: 0.45rem; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.1rem) rotate(-45deg); } .section-toggle[open] .section-toggle__title::before, .krs-history[open] .krs-history__summary::before, .ace-case[open] .ace-case__summary::before, .inactive-relation[open] .inactive-relation__summary::before { transform: translateY(-0.15rem) rotate(45deg); } .section-toggle__meta, .source-tabs__panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--text-sm); } .section-toggle__body { padding: 0 var(--space-6) var(--space-6); } /* Kotwica `sekcja-` prowadzi na górę karty — nagłówek nie może się skleić z krawędzią okna. */ .form-section[id] { scroll-margin-top: var(--space-6); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; } /* Górna granica szerokości listy rozwijanej (#10226). Pas ma sześć pól i przy typowych szerokościach ekranu zawija — bez tej granicy pole, które zostało samo w zawiniętym rzędzie, rozciągałoby się na całą szerokość karty i stało obok pól o połowę węższych. Granica jest szersza niż pole w pełnym rzędzie (~188 px), więc rzędu bez zawinięcia nie zmienia. */ .filter-bar .form-field { flex: 1 1 180px; max-width: 280px; } /* Pole szukania granicy nie ma — to ono zbiera wolne miejsce w rzędzie. */ .filter-bar .form-field--search { flex: 2 1 320px; max-width: none; } .filter-bar__actions { display: flex; flex: 0 0 auto; gap: var(--space-3); } .filter-bar__hint { margin-top: var(--space-2); } .form-field { min-width: 0; margin: 0; padding: 0; border: 0; } .form-field--wide { grid-column: 1 / -1; } .form-field--spaced { margin-top: var(--space-6); } /* Pole NIP-u ze sprawdzeniem numeru (#9621): kontroler skryptu obejmuje pole i obszar komunikatu, ale sam nie jest kratką formularza — `display: contents` zostawia oba elementy bezpośrednio w gridzie sekcji. Dzięki temu ostrzeżenie o aktywnym wniosku zajmuje całą szerokość kratki, a samo pole zostaje przy szerokości jednej kolumny. */ .nip-field { display: contents; } /* Obszar komunikatu stoi wiersz niżej niż pole, więc odsuwałaby go od niego przerwa między wierszami gridu (`gap` w `.form-grid`). Ujemny odstęp sprowadza komunikat z powrotem pod pole — na tę samą odległość co podpowiedź. */ .nip-field__result { grid-column: 1 / -1; min-width: 0; margin-top: calc(var(--space-1) - var(--space-5)); } /* Sugerowany limit floty (#10843) stoi pod obydwoma polami z liczbą pojazdów, więc zajmuje cały wiersz kratki sekcji. Odstęp pod komunikatem daje już przerwa między wierszami kratki, a dalej własny odstęp listy numerów rejestracyjnych — dlatego komunikat nie dokłada swojego. */ .fleet-limit { grid-column: 1 / -1; min-width: 0; } .fleet-limit .form-alert { margin-bottom: 0; } .form-field label, .form-field legend, .repeatable legend { display: block; margin-bottom: var(--space-2); color: var(--text); font-size: var(--text-sm); font-weight: 700; } .form-field input:not([type="radio"], [type="checkbox"]), .form-field textarea, .form-field select, .repeatable input:not([type="checkbox"]) { width: 100%; min-height: 44px; padding: var(--space-3); color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; } .form-field textarea { resize: vertical; } /* === Zleceniodawca: kraj i numer jako jedno pole złożone (#11040) === Kraj wraz z numerem identyfikuje zleceniodawcę, więc trzy kontrolki stoją jako jedna kratka o wspólnej ramce. Pole zajmuje jedną komórkę pozycji i żadna z list powtarzalnych nie zmienia liczby kolumn. Miejsce oddaje najpierw kolumna kraju, a nie kolumna numeru: to numer jest daną, którą analityk czyta i porównuje, a kraj wybiera się z listy podpowiedzi i po zapisie i tak wraca jako pełna pozycja. Stąd `minmax(0, 12rem)` przy kraju i próg `8rem` przy numerze — w szerokiej komórce (listy zleceniodawców, karta decyzji od ~1200 px) wychodzi z tego dokładnie ten sam układ co przy sztywnych 12rem, a w wąskiej komórce karty decyzji przy 1024 px numer dostaje 128 px zamiast 26 px, które zostawały mu, gdy kraj brał swoje maksimum. */ .contractor-id { display: grid; grid-template-columns: minmax(0, 12rem) 3.5rem minmax(8rem, 1fr); min-width: 0; } /* Etykiety pola złożonego to same nazwy dla czytnika ekranu, więc nie niosą odstępu spod etykiet formularza. Bez wyzerowania odstępu kratka jest o 8 px wyższa niż pojedyncze pole obok i w karcie decyzji `legend` stoi wyżej niż etykieta kwoty — czyli dokładnie to rozjechanie, którego zabrania #9781. */ .contractor-id > label { min-width: 0; margin: 0; } /* Ujemny margines nakłada ramki na siebie, więc na styku widać 1 px, nie 2. Pełne ramki zostają, aby pole z błędem miało obramowanie z każdej strony. */ .contractor-id .contractor-id__country, .contractor-id .contractor-id__prefix { margin-right: -1px; } .contractor-id .contractor-id__country input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .contractor-id .contractor-id__prefix input { border-radius: 0; text-align: center; background: var(--surface-alt); } .contractor-id .contractor-id__number input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* Fokus i obramowanie błędu muszą być widoczne nad ramką sąsiedniego pola. */ .contractor-id input:focus, .contractor-id input[aria-invalid="true"] { position: relative; z-index: 1; } /* Lista rozwijana ma wygląd pola tekstowego (reguła wyżej) i zachowuje własną strzałkę przeglądarki — dlatego celowo BEZ `appearance: none`. Strzałka rysowana przez przeglądarkę bierze kolor z `color`, więc podąża za motywem bez wstawiania własnej grafiki w tle. Rozwinięta lista opcji jest rysowana przez system operacyjny i nie da się jej ostylować z arkusza — kolory bierze z `color-scheme` ustawionego przy motywach na początku tego pliku. */ .form-field select { cursor: pointer; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus, .repeatable input:not([type="checkbox"]):focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; } .form-field__hint { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-caption); } /* Wybór wielokrotny jako przełączane przyciski (#8496). W odróżnieniu od segmented-control (jedna opcja z kilku) przyciski nie stoją w jednym pasku, tylko osobno — widać, że opcje się nie wykluczają. Pole wyboru zostaje w kodzie: niesie stan dla czytnika ekranu i wysyła wartość, a rysuje je etykieta. Selektory podają typ pola (`input[type="checkbox"]`), żeby mieć tę samą wagę co reguła pól tekstowych wyżej (`.form-field input:not([type="radio"])`) i wygrać z nią późniejszą pozycją w pliku — bez tego ukryte pole wyboru dostaje rozmiar pola tekstowego. */ .toggle-group { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); } .toggle-group__option input[type="checkbox"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } .toggle-group__option label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: var(--space-2) var(--space-4); color: var(--text); background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; } .toggle-group__option label:hover { border-color: var(--primary); } /* Stan pola przenosi się na etykietę przez `:has()` na całej opcji, a nie przez sąsiedztwo pola i etykiety (`+ label`). Po odrzuconej wysyłce Rails opakowuje osobno pole i osobno etykietę w `div.field_with_errors`, więc przestają być sąsiadami i zaznaczony przycisk wyglądałby jak niezaznaczony (#8496). */ .toggle-group__option:has(input[type="checkbox"]:checked) label { color: var(--on-primary); background: var(--primary); border-color: var(--primary); } .toggle-group__option:has(input[type="checkbox"]:focus-visible) label { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Pole z niepoprawną wartością (#8486). Jedna reguła dla obu sytuacji: pola odrzuconego przy wysyłce wniosku i pola sprawdzonego w trakcie wypełniania — w obu na polu stoi znacznik `aria-invalid`. Obwódka bierze kolor ostrzegawczy, a jej pozorną grubość podnosi cień wewnętrzny, żeby zawartość pola nie drgnęła (zmiana samej grubości obwódki przesunęłaby ją o piksel). Sam kolor niczego nie przesądza — pod polem stoi komunikat. Wyróżnienie zostaje też na polu wypełnianym w danej chwili — inaczej informacja o błędnym numerze znikałaby dokładnie wtedy, kiedy użytkownik go poprawia. Decyduje o tym kolejność w pliku, nie szczegółowość: reguła `:focus` wyżej chowa obwódkę na rzecz obramowania zaznaczenia (`border-color: transparent`) i ma dokładnie tę samą szczegółowość (0,2,1), więc ta reguła wygrywa tylko dlatego, że stoi po niej. Przeniesienie `:focus` poniżej tego miejsca skasuje wyróżnienie na polu z zaznaczeniem. Reguła obejmuje wszystkie rodzaje pól używane w formularzach wniosków, także pozycje list powtarzalnych (#8853). Listy rozwijanej tu nie ma: żadne miejsce w kodzie nie ustawia jej znacznika `aria-invalid`, więc wpis dla `select` byłby regułą bez zastosowania. `:is()` bierze szczegółowość swojego najmocniejszego składnika — tu są to nazwy znaczników — więc pierwszy wiersz dalej ma szczegółowość (0,2,1) i dalej decyduje o nim kolejność w pliku. */ .form-field :is(input, textarea)[aria-invalid="true"], .repeatable__item input[aria-invalid="true"] { border-color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-fg); } /* Grupa opcji z błędem (#8502) — te same wartości co pole wyżej. Pole wyboru w grupie jest ukryte (1×1 px), więc wyróżnienie niesie etykieta-przycisk, a nie samo pole. Warunek „żadna opcja niezaznaczona” zdejmuje wyróżnienie od razu po zaznaczeniu opcji, bez ponownego wysyłania wniosku, i nie pozwala mu wejść na przycisk zaznaczony (ten ma tło koloru wiodącego). */ .form-field[aria-invalid="true"]:not(:has(.toggle-group input[type="checkbox"]:checked)) .toggle-group__option label { border-color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-fg); } /* Pole wyboru rysowane przez przeglądarkę, w rozmiarze kontrolki (#9779). Wcześniej łapała je reguła pól tekstowych wyżej i rozciągała do szerokości i wysokości pola tekstowego — stąd wielki kwadrat w sekcji relacji decyzji. Blok stoi PO regułach `aria-invalid` wyżej: reguła błędu poniżej ma tę samą szczegółowość (0,2,1) co `.repeatable__item input[aria-invalid="true"]`, więc wygrywa wyłącznie kolejnością w pliku. Pola ukryte w `.toggle-group__option` mają szczegółowość wyższą i zostają ukryte. */ input[type="checkbox"] { inline-size: 20px; block-size: 20px; flex: none; min-height: 0; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; } input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Wyróżnienie błędnej wartości obwódką, nie obramowaniem: pole wyboru rysuje przeglądarka, więc `border` ani cienia wewnętrznego na nim nie widać. Zerowanie cienia zdejmuje wartość odziedziczoną z reguły `aria-invalid` dla pozycji list powtarzalnych. */ input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--danger-fg); outline-offset: 2px; box-shadow: none; } /* Komunikat o niepoprawnym numerze pokazywany pod polem jeszcze przed wysłaniem wniosku (#8471). */ .form-field__error { margin: var(--space-1) 0 0; color: var(--danger-fg); font-size: var(--text-caption); } /* Akapit stoi w drzewie na stałe, żeby czytnik ekranu ogłaszał komunikat pojawiający się w trakcie wypełniania (#9009). Bez treści nie ma czego pokazywać, a jego odstęp rozpychałby pole. */ .form-field__error:empty { display: none; } /* Lista plików wybranych do wysłania (#9009) — bez punktorów i wcięcia, tak samo jak pozostałe listy w interfejsie. */ .documents-picker__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; } .documents-picker__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); } .documents-picker__item + .documents-picker__item { margin-top: var(--space-1); } .segmented-control { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); } .segmented-control input { position: absolute; opacity: 0; pointer-events: none; } .segmented-control label { margin: 0; padding: var(--space-2) var(--space-4); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; } .segmented-control input:checked + label { color: var(--on-primary); background: var(--primary); } .segmented-control input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .input-suffix { display: flex; align-items: stretch; } .input-suffix input { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; } .input-suffix span { display: grid; min-width: 48px; place-items: center; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .repeatable { margin: var(--space-6) 0 0; padding: 0; border: 0; } .repeatable__items { display: grid; gap: var(--space-2); margin: var(--space-3) 0; } .repeatable__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); } /* Pozycja z dwoma polami — NIP zleceniodawcy i oczekiwany limit w relacji z nim (#9760). */ .repeatable__item--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } /* Pozycja rozstrzygnięcia relacji ze zleceniodawcą (#9761). Pola stoją w dwóch wierszach: pierwszy to NIP, kwota, odmowa i przycisk usuwania, drugi to sam obecny limit z kartoteki pod NIP-em. Wcześniej limit siedział w kratce NIP-u i podnosił ją ponad resztę wiersza, więc etykieta „Przyznany limit w relacji” stała niżej niż „NIP zleceniodawcy” (#9781). Wiersz z polami wyrównujemy do dołu, żeby pola tekstowe, pole wyboru i przycisk stały w jednej linii. */ .decision-relation { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: end; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .decision-relation__nip { grid-area: 1 / 1; } /* Kratka kraju i numeru (#11040) stoi w komórce obok zwykłego pola z widoczną etykietą, a obie komórki muszą mieć równą wysokość — inaczej `legend` i etykieta kwoty stają na różnych wysokościach, czyli wraca rozjechanie z #9781. Zwykłe pole to `label` obejmujący napis i kontrolkę, z odstępem POD spodem; tutaj napis niesie `legend`, więc ten sam odstęp przenosimy spod legendy pod kratkę. Suma jest wtedy identyczna: napis + kontrolka + odstęp. */ .decision-relation__nip legend { margin-bottom: 0; } .decision-relation__nip .contractor-id { margin-bottom: var(--space-2); } .decision-relation__limit { grid-area: 1 / 2; } .decision-relation__refusal { display: flex; grid-area: 1 / 3; align-items: center; gap: var(--space-2); min-height: 42px; } .decision-relation__remove { grid-area: 1 / 4; } .decision-relation__current-limit { grid-area: 2 / 1; } .button { min-height: 42px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer; } .button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .button--primary { color: var(--on-primary); background: var(--primary); } .button--primary:hover { background: var(--primary-hover); } .button--secondary { color: var(--primary); background: var(--primary-subtle); border-color: var(--border); } /* --quiet stoi na tokenach ostrzegawczych i jest zarezerwowany dla akcji destrukcyjnych („Usuń", „Zablokuj konto", „Odbierz rolę"). */ .button--quiet { color: var(--danger-fg); background: transparent; } .button--quiet:hover { background: var(--danger-bg); } /* Neutralny przycisk drugoplanowy — dla akcji, które nie są destrukcyjne i nie mają być najmocniejszym elementem w swoim otoczeniu („Wyloguj”). */ .button--ghost { color: var(--text-muted); background: transparent; } .button--ghost:hover { color: var(--text); background: var(--surface-alt); } .empty-fields__toggle { display: inline-grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; font: 400 var(--text-sm)/1 var(--font-sans); cursor: pointer; } .empty-fields__toggle[hidden] { display: none; } .empty-fields__toggle:hover { color: var(--text); background: var(--surface-alt); } .empty-fields__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .empty-fields__heading { display: flex; align-items: center; gap: var(--space-2); } .empty-fields__heading .ceidg-earlier__heading { margin-bottom: 0; } .empty-fields__toggle--panel { float: right; } .onboarding-form__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } /* Pasek akcji z jednym przyciskiem — rozciągamy go na pełną szerokość zamiast zostawiać przyklejony do lewej krawędzi przez space-between. */ .onboarding-form__actions--single .button { width: 100%; } .onboarding-form__actions p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); } .form-alert { margin: 0 0 var(--space-6); padding: var(--space-4); border-radius: var(--radius-md); } .form-alert--success { color: var(--success-fg); background: var(--success-bg); } .form-alert--error { color: var(--danger-fg); background: var(--danger-bg); } /* Podsumowanie błędów, na które po odrzuconym zapisie trafia fokus (#10539). Odstęp od górnej krawędzi okna trzyma sam element, a nie reguła `:focus` — przewinięcie nie musi iść w parze z fokusem, a wtedy odstęp z reguły stanu by nie zadziałał. Ta sama własność na elemencie co przy kartach sekcji (`.form-section[id]` wyżej). */ .form-alert--error[data-error-summary-target] { scroll-margin-top: var(--space-6); } .form-alert--error[data-error-summary-target]:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Komunikat czysto informacyjny — nic nie blokuje, więc odróżnia się kolorem od ostrzeżenia i błędu (#8964). */ .form-alert--info { color: var(--info-fg); background: var(--info-bg); } .form-alert__title { margin: 0; font-weight: 700; } .form-alert .data-table-scroll { margin-top: var(--space-2); } .form-alert ul { margin: var(--space-2) 0 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* Karta decyzji ma najwęższą kolumnę kraju w aplikacji: dwie stałe kolumny akcji zostawiają polu 64 px przy 981 px i 87 px przy 1024 px, a pozycja listy `Grecja (GR)` potrzebuje 114 px — najdłuższe nazwy państw nie mieszczą się w żadnej szerokości układu wielokolumnowego (#11054). Dlatego po wyborze stoi w polu sam kod ISO państwa; pełna nazwa zostaje na liście podczas wyboru i w nazwie kontrolki dla czytnika ekranu. Wartości pola nie da się skrócić z arkusza, więc podmienia ją kontroler „contractor-id” — tutaj stoi wyłącznie próg, pod tą samą nazwą, którą czyta kontroler. Próg jest dopełnieniem progu układu jednokolumnowego (#11053): do 980 px karta stoi w jednej kolumnie i pokazuje pełną nazwę z kodem, od 981 px wraca układ wielokolumnowy i sam kod. Zmiana jednego progu bez drugiego zostawia szerokość, w której karta nie ma ani jednego, ani drugiego. */ @media (min-width: 981px) { .decision-relation .contractor-id { --contractor-country-display: code; } } /* Karta decyzji ma dwie stałe kolumny akcji, dlatego jej pola tracą miejsce wcześniej niż w pozostałych formularzach (#11053). Do 980 px korzysta z tego samego układu jednokolumnowego co na wąskim ekranie; od 981 px zachowuje układ wielokolumnowy zatwierdzony dla szerokości 1024 i 1280 px. */ @media (max-width: 980px) { .onboarding-form--decision .form-grid, .onboarding-form--decision .decision-relation { grid-template-columns: 1fr; } .onboarding-form--decision .decision-relation__nip, .onboarding-form--decision .decision-relation__limit, .onboarding-form--decision .decision-relation__refusal, .onboarding-form--decision .decision-relation__remove, .onboarding-form--decision .decision-relation__current-limit { grid-area: auto; } } @media (max-width: 680px) { .onboarding { width: min(100% - (2 * var(--space-4)), 1280px); padding-top: var(--space-8); } .onboarding--wide { width: calc(100% - (2 * var(--space-4))); } .page:has(.onboarding--wide) .page__flash { width: calc(100% - (2 * var(--space-4))); } .onboarding--auth { width: min(100% - (2 * var(--space-4)), 420px); padding-top: var(--space-8); } .page__account-name { max-width: 16ch; } .form-section { padding: var(--space-5) var(--space-4); } /* Karta zwijana odstęp wewnętrzny ma na nagłówku i treści, nie na sobie — inaczej cel kliknięcia nie sięgałby krawędzi karty (#9135). Na wąskim ekranie nazwa sekcji staje nad skrótem wyniku, a stan i liczba pozycji zawijają się pod nią. */ .form-section--collapsible { padding: 0; } .section-toggle__summary { flex-direction: column; align-items: flex-start; padding: var(--space-4); } .section-toggle__body { padding: 0 var(--space-4) var(--space-5); } .form-grid { grid-template-columns: 1fr; } .form-field--wide { grid-column: auto; } .repeatable__item, .onboarding-form__actions { align-items: stretch; } /* Na wąskim ekranie pola pary stają jedno pod drugim (#9760). */ .repeatable__item--pair { grid-template-columns: 1fr; } /* Na wąskim ekranie kraj, symbol i numer stają jeden pod drugim i wracają do własnych zaokrągleń. Pozycja pola złożonego też ma jedną kolumnę. */ .contractor-id { grid-template-columns: 1fr; gap: var(--space-2); } .contractor-id .contractor-id__country, .contractor-id .contractor-id__prefix { margin-right: 0; } .contractor-id .contractor-id__country input, .contractor-id .contractor-id__prefix input, .contractor-id .contractor-id__number input { border-radius: var(--radius-sm); } .repeatable__item:has(.contractor-id) { grid-template-columns: 1fr; } .onboarding-form__actions { flex-direction: column; } .onboarding-form__actions .button { width: 100%; } } @media (max-width: 640px) { /* Na wąskim ekranie odnośnik schodzi pod wejście wstecz, do lewej krawędzi — pełna szerokość wypycha go do własnego wiersza, zanim wiersz zdąży się zrobić ciasny (#10424). */ .onboarding__history-link { width: 100%; margin-left: 0; } .filter-bar { display: grid; grid-template-columns: 1fr; } /* Jedna kolumna — pola idą na pełną szerokość, więc granica szerokości listy rozwijanej z pasa filtrów (#10226) tu nie obowiązuje: zostawiałaby listy węższe od pola szukania stojącego nad nimi. */ .filter-bar .form-field { max-width: none; } .filter-bar__actions { display: grid; width: 100%; } .filter-bar__actions .button { width: 100%; } .page__header { --header-pad-inline: var(--space-4); gap: var(--space-3); } /* W panelu mobilnym pas nie jest osobnym pasem przy dolnej krawędzi, tylko sekcją listy — dolne wypełnienie nagłówka wraca. */ .page__header:has(.page__nav) { padding-bottom: var(--header-pad-block); } .page__menu-toggle { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-left: auto; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); font: 700 var(--text-sm)/1 var(--font-ui); cursor: pointer; } .page__menu-toggle:hover { background: var(--surface-alt); } .page__menu-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .page__menu { display: flex; width: 100%; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); } /* Z JavaScriptem panel jest zamknięty już przy pierwszym renderze. Bez JavaScriptu klasa .js nie powstaje, więc nawigacja pozostaje dostępna. Jawna reguła dla hidden jest potrzebna, bo display: flex nadpisuje domyślne ukrycie elementu przez przeglądarkę. */ .page__menu[hidden], .js .page__menu-toggle[aria-expanded="false"] + .page__menu { display: none; } /* Oba poziomy wchodzą w panel: nazwa modułu na górze, ekrany modułu jako osobna sekcja panelu (#8303). Pas pod nagłówkiem nie istnieje osobno — jego pozycje są pozycjami panelu. Sekcje panelu idą w kolejności z dokumentu (moduł → konto i motyw → ekrany): żadna z nich nie przestawia się przez `order`, więc tabulator prowadzi dokładnie tak, jak widać na ekranie (#8312). */ .page__module { padding: 0 var(--space-3); border-left: 0; } .page__nav { flex: 0 1 auto; width: 100%; min-height: 0; flex-direction: column; align-items: stretch; gap: var(--space-1); margin: 0; padding-top: var(--space-3); padding-inline: 0; padding-bottom: 0; background: transparent; } .page__nav-link { display: flex; min-height: 44px; align-items: center; width: 100%; padding: var(--space-2) var(--space-3); border-bottom: 2px solid transparent; overflow-wrap: normal; word-break: normal; } .page__nav-link[aria-current="page"] { background: var(--surface-alt); } .page__utilities { width: 100%; flex-direction: column; align-items: stretch; margin-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--border); } .page__account { width: 100%; } .page__account-name { min-width: 0; max-width: none; min-height: 44px; justify-content: space-between; padding: var(--space-2) var(--space-3); } .page__account-menu { position: static; min-width: 0; margin-top: var(--space-1); padding: var(--space-1) 0 0 var(--space-3); border: 0; border-radius: 0; background: transparent; box-shadow: none; } .page__account-link { min-height: 44px; } .theme-switcher { align-self: flex-start; max-width: 100%; } /* Ten sam cel dotykowy co pozycje panelu mobilnego (#8278). */ .theme-switcher__option { width: 44px; height: 44px; } } /* === Kolejka analityka i szczegóły wniosku === */ .queue-scopes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .queue-scopes__link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); } .queue-scopes__link:hover, .queue-scopes__link:focus-visible { color: var(--text); border-color: var(--border-strong); } .queue-scopes__link[aria-current="page"] { color: var(--on-primary); background: var(--primary); border-color: var(--primary); } .queue-scopes__count { font-variant-numeric: tabular-nums; opacity: 0.8; } /* Historia wersji zamyka blok jednej reguły biznesowej. Odstęp jest własnością historii, a nie kontenera — dzięki temu ostatnia historia na ekranie nie dokłada pustego miejsca przed stopką. */ .rule-history + * { margin-top: var(--space-8); } /* Reguła biznesowa jest zwijaną kartą (#9204): formularz i historia stoją w środku karty, więc pasek akcji nie jest tu osobną kartą — wystarczy odstęp. Historia potrzebuje własnego odstępu od formularza, bo nic jej nie poprzedza na poziomie kontenera. */ .rule-form__actions { margin-top: var(--space-6); } .section-toggle__body .rule-history { margin-top: var(--space-8); } .data-table-scroll { position: relative; width: 100%; min-width: 0; overflow-x: auto; } .data-table-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); } .data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); } .data-table thead th { background: var(--surface-alt); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; } .data-table tbody tr { transition: background-color 120ms ease; } .data-table tbody tr:hover { background: var(--surface-alt); } .data-table tbody tr.data-table__row--new-supplement, .data-table tbody tr.data-table__row--new-supplement:hover { color: var(--danger-fg); background: var(--danger-bg); box-shadow: inset 3px 0 0 var(--danger-fg), inset -1px 0 0 var(--danger-fg), inset 0 1px 0 var(--danger-fg), inset 0 -1px 0 var(--danger-fg); } .new-supplement-label { display: block; margin-bottom: var(--space-1); color: var(--danger-fg); font-size: var(--text-caption); font-weight: 700; white-space: nowrap; } .data-table__activity-kind { display: block; margin-top: var(--space-1); font-size: var(--text-caption); font-weight: 600; } .data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; } .data-table .data-table__cell--numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table thead .data-table__cell--numeric { white-space: normal; } .data-table__action { color: var(--primary); font-weight: 600; } .data-table__action:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 2px; } .data-table__action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } /* Wybór rodzaju wniosku na ekranie „Nowe zgłoszenie" (#8345). Kafelki w jednej kolumnie — rodzajów jest kilka, a każdy niesie zdanie opisu, więc siatka dwukolumnowa tylko skracałaby wiersze tekstu. */ .type-choice { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .type-choice__item { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-6); color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .type-choice__item:hover { border-color: var(--primary); } .type-choice__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .type-choice__label { font-family: var(--font-brand); font-size: var(--text-h2); line-height: var(--lh-h2); } .type-choice__item:hover .type-choice__label { color: var(--primary-hover); } .type-choice__description { color: var(--text-muted); font-size: var(--text-sm); } .badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 600; } .badge--info { color: var(--text); background: var(--surface-alt); } .badge--warning { color: var(--warning-fg); background: var(--warning-bg); } .badge--success { color: var(--success-fg); background: var(--success-bg); } /* Etykieta stanu, który wstrzymuje decyzję — dziś kwestionowana pozycja zadłużenia w KRD (#9013). Ta sama para tokenów, co komunikat o błędzie. */ .badge--danger { color: var(--danger-fg); background: var(--danger-bg); } .badge--alert { color: var(--alert-fg); background: var(--alert-bg); } .empty-state { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); } /* Nawigacja stron listy (shared/_pagination). Krok o jedną stronę w każdą stronę — bez numerów stron, bo lista jest posortowana malejąco po dacie i skok do konkretnej strony nic nie mówi o jej zawartości. */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); } .pagination__link { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); color: var(--primary); font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .pagination__link:not(.pagination__link--disabled):hover { color: var(--primary-hover); background: var(--surface-alt); } .pagination__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Krawędź listy — zamiast znikającego przycisku zostaje nieaktywny ślad, żeby przy zmianie strony pozostałe elementy nie przeskakiwały. */ .pagination__link--disabled { color: var(--text-muted); background: var(--surface-alt); cursor: default; } [data-theme="dark"] .pagination__link--disabled { color: var(--text-subtle); background: var(--surface); } .pagination__status { margin: 0; color: var(--text-muted); font-size: var(--text-sm); } .detail-list { margin: 0; } .detail-list__row { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .detail-list__row:last-child { border-bottom: 0; } .detail-list dt { color: var(--text-muted); font-size: var(--text-sm); } .detail-list dd { margin: 0; overflow-wrap: anywhere; } /* Wiersz opisu z kilkoma wartościami (skład zarządu, prokurenci, wspólnicy) — bez punktorów, żeby lista czytała się tak samo jak pojedyncza wartość. */ .detail-list dd ul { margin: 0; padding: 0; list-style: none; } .detail-list dd li + li { margin-top: var(--space-1); } .application-decision-summary__comparison { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); } .application-decision-summary__comparison > span { display: grid; gap: var(--space-1); } /* Etykieta relacji ma własną klasę: to podpis pozycji na liście relacji, a nie podpis kwoty wniosku, choć wygląda tak samo. */ .application-decision-summary__label, .application-decision-summary__relation-label { color: var(--text-muted); font-size: var(--text-sm); } .application-decision-summary__relations { display: grid; gap: var(--space-3); } .application-decision-summary__relations > li { display: grid; gap: var(--space-2); } /* Wynik weryfikacji w górnej karcie (#10421). Klientka prosiła o rozmiar porównywalny z nagłówkami sekcji, więc wynik stoi na stopniu `--text-h2` — dokładnie tam, gdzie `.form-section__title`. Krój markowy, waga 700 i kolor marki odróżniają go od wartości w listach danych pod spodem. Lewa krawędź akcentowa i tło marki wyróżniają pole, ale znaczenia nie niosą: mówi je sam tekst, więc wynik czyta się tak samo w obu motywach i bez rozpoznawania barw. Pole stoi w tym samym miejscu także wtedy, gdy decyzji jeszcze nie ma — wtedy niesie komunikat o jej braku. */ .decision-outcome { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--primary-subtle); color: var(--primary); font: 700 var(--text-h2)/var(--lh-h2) var(--font-brand); } /* Relacja bez pokrycia w danych wniosku (#10496). Zwinięty wiersz pokazuje sam NIP z etykietą „Nieaktywna”, rozstrzygnięcie decyzji odsłania rozwinięcie. Wyciszony kolor odróżnia ją od relacji z bieżącego wniosku; etykieta niesie znaczenie tekstem, więc sam kolor nie jest nośnikiem informacji. */ .inactive-relation { color: var(--text-muted); } .inactive-relation__summary { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); border-radius: var(--radius-lg); cursor: pointer; list-style: none; } /* Wbudowany trójkąt przeglądarki znika przy `display: flex` — strzałkę rysuje ta sama reguła, co przy nagłówkach sekcji (#9138). */ .inactive-relation__summary::marker { content: ""; } .inactive-relation__summary::-webkit-details-marker { display: none; } .inactive-relation__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .inactive-relation__title { font-weight: 600; } .inactive-relation__body { display: grid; gap: var(--space-2); padding-top: var(--space-2); } .inactive-relation__reason { margin: 0; font-size: var(--text-sm); } /* Historia zmian z KRS zaczyna zwinięta — bywa dłuższa niż cała reszta ekranu. */ .krs-history { margin-top: var(--space-6); } .krs-history__summary { display: flex; min-height: 44px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-alt); font-weight: 600; cursor: pointer; list-style: none; } /* Wbudowany trójkąt przeglądarki znika przy `display: flex` — strzałkę rysuje ta sama reguła, co przy nagłówkach sekcji (#9138). */ .krs-history__summary::marker { content: ""; } .krs-history__summary::-webkit-details-marker { display: none; } .krs-history__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .krs-history[open] .krs-history__summary { margin-bottom: var(--space-4); } /* Dane rejestrowe pobrane wcześniejszym sprawdzeniem — osobny blok z własną datą, żeby nie czytały się jak wynik sprawdzenia tego wniosku (#8588). */ .ceidg-earlier { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); } .ceidg-earlier__heading { margin: 0 0 var(--space-2); font-size: var(--text-h3); } .ceidg-note { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-sm); } .ceidg-earlier .ceidg-note { margin-top: 0; margin-bottom: var(--space-4); } /* Wyjaśnienie przy jednym wierszu opisu, a nie przy całej sekcji (#9163) — odstęp sekcyjny odsuwałby je od wartości, której dotyczy, aż pod kreskę oddzielającą kolejny wiersz. */ .detail-list dd .ceidg-note { margin-top: var(--space-2); } /* Wyjaśnienie stanu sekcji, gdy zamiast danych jest ich brak (#9013). */ .form-section__note { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-sm); } /* Zakładki źródeł na ekranie wniosku (#10423) — cztery sprawdzenia w jednej karcie zamiast rozwijanych sekcji jedna pod drugą. */ .source-tabs__summary { margin-block: 0 var(--space-4); color: var(--text-muted); } .source-tabs__list { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; } /* Nazwa źródła stoi nad znacznikiem jego stanu, nie obok niego (#10777). Obok siebie każda zakładka zajmowała sumę obu szerokości, więc pasek dziesięciu zakładek nie mieścił się nawet na szerokim ekranie. Jeden pod drugim o szerokości zakładki decyduje szerszy z nich, a nie ich suma. Nazwy zakładek bez znacznika (Historia ACE, Pozostałe wnioski) zostają w jednym wierszu z nazwami pozostałych — stąd wyrównanie do góry, nie do środka. */ .source-tabs__tab { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-1); min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--text); font: inherit; white-space: nowrap; cursor: pointer; } .source-tabs__tab[aria-selected="true"] { border-bottom-color: var(--primary); background: var(--surface-alt); color: var(--primary); font-weight: 700; } .source-tabs__tab:focus-visible, .source-tabs__panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .source-tabs__panel { padding-block-start: var(--space-5); } .source-tabs__panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); } /* Tytuł zakładki jest o poziom niżej od tytułu karty „Sprawdzenia i historia firmy”, więc nosi znacznik h3 — rozmiar zostaje ten z makiety. */ .source-tabs__panel-heading h3 { margin: 0; font-family: var(--font-brand); font-size: var(--text-h2); line-height: var(--lh-h2); } .ceidg-partner-tabs { margin-block-start: var(--space-5); } .ceidg-partner-tabs__heading { margin: 0 0 var(--space-3); font-family: var(--font-brand); font-size: var(--text-h3); } .ceidg-partner-tabs__panel { padding-block-start: var(--space-4); } /* Wielkości, na których analityk podejmuje decyzję — zadłużenie i liczba wierzycieli bez pozycji PZU i kwestionowanych (#9013). Wyróżnia je zapis wartości w tym samym wierszu opisu, bez osobnego komponentu. */ .detail-list__row--decision dd { font-size: var(--text-h3); font-weight: 600; } /* Kwoty zadłużenia analityk czyta jako pierwsze, więc obie są wytłuszczone, a decyzyjna dodatkowo na czerwono (#9283). Czerwień bierze się z tokenu stanu, żeby w motywie ciemnym pozostała czytelna. Liczby wierzycieli zostają w kolorze tekstu — czerwień ma wyróżniać jedną wartość, nie połowę podsumowania. */ .detail-list__row--amount dd { font-weight: 600; } .detail-list__row--amount.detail-list__row--decision dd { color: var(--danger-fg); } /* Wartość ostateczna wiersza — dziś limit przyznany w podsumowaniu wniosku (#10844). Sąsiednie kwoty mówią, o co wnioskowano i co było możliwe, więc ta jedna jest wytłuszczona i zielona; reszta zostaje w kolorze tekstu, żeby wyróżnienie miało co wyróżniać. Zieleń bierze się z tokenu stanu, tak samo jak czerwień kwoty decyzyjnej wyżej — dzięki temu trzyma próg kontrastu w obu motywach. */ .detail-list__row--final dd { color: var(--success-fg); font-weight: 600; } /* Nagłówek listy w panelu źródła: mówi, co pokazuje stojąca pod nim tabela. Panel REGON ma dwie tabele jedna pod drugą, więc bez nagłówków rozróżniał je dopiero wiersz z nazwami kolumn (#11032). Wspólna reguła, bo obie listy są tym samym elementem układu — odstęp nad nagłówkiem odcina ją od tego, co stoi wyżej. */ .krd-list__heading, .gus-bir-list__heading { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-h3); } /* Dane kontrahenta z Transcards (#10869). Firma ma tam tyle kont, ile ma oddziałów, a każde niesie własne liczby ocen, więc panel pokazuje blok na konto. Kreska między blokami mówi, gdzie kończy się jedno konto, a zaczyna drugie — przy jednym koncie nie ma jej w ogóle. */ .tg-account + .tg-account { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-top: 1px solid var(--border); } .tg-account__title { margin: 0 0 var(--space-3); font-size: var(--text-h3); } /* „Informacje” i „Dane z pliku” — dwie części bloku konta z układu na zrzucie klientki. Są podpisem części, nie tytułem danych, więc stoją stopień niżej od nazwy konta. */ .tg-account__subtitle { margin: var(--space-5) 0 var(--space-2); color: var(--text-muted); font-size: var(--text-body); } .tg-account__title + .tg-account__subtitle { margin-block-start: 0; } /* Historia weryfikacji przeniesiona z ACE (#9638). Jedna sprawa to zwijany wiersz: nagłówek pokazuje datę, decyzję, kwotę ostateczną i kto weryfikował, a rozwinięcie — pozostałe dane sprawy i notatki dostępne dla konta, które ją ogląda (#10845). Zwijaniem zajmuje się natywny `
`, tak jak przy historii zmian rejestru KRS, więc obsługa z klawiatury działa bez własnego kodu. */ .ace-history { margin: var(--space-4) 0 0; padding: 0; list-style: none; } .ace-history li + li { margin-top: var(--space-2); } .ace-case__summary { display: flex; min-height: 44px; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-alt); cursor: pointer; list-style: none; } /* Trójkąt przeglądarki znika przy `display: flex` — strzałkę rysuje ta sama reguła, co przy nagłówkach sekcji. */ .ace-case__summary::marker { content: ""; } .ace-case__summary::-webkit-details-marker { display: none; } .ace-case__summary::before { align-self: center; } .ace-case__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .ace-case__date, .ace-case__decision { font-weight: 600; } /* Reszta nagłówka opisuje pozycję, więc ustępuje pierwszeństwa dacie, decyzji i kwocie — i jako ostatnia dobija do prawej krawędzi. */ .ace-case__meta { margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); } .ace-case__body { padding: var(--space-4) var(--space-4) 0; } @media (max-width: 680px) { .data-table thead { display: none; } .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; } .data-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .data-table td { border-bottom: 0; padding: var(--space-1) var(--space-4); text-align: left; } .data-table .data-table__cell--numeric { text-align: left; } .data-table td[data-label]::before { display: block; color: var(--text-muted); content: attr(data-label); font-size: var(--text-sm); font-weight: 600; } /* Na wąskim ekranie nagłówek pozycji ACE łamie się na kilka linii — opis zostaje wtedy przy lewej krawędzi, zamiast wisieć samotnie przy prawej. */ .ace-case__meta { margin-left: 0; } .detail-list__row { grid-template-columns: 1fr; gap: var(--space-1); } /* Na wąskim ekranie trzy elementy w rzędzie się nie mieszczą: informacja o stronie idzie nad przyciski, przyciski dzielą szerokość po połowie. */ .pagination { flex-wrap: wrap; gap: var(--space-2); } .pagination__status { order: -1; width: 100%; text-align: center; } .pagination__link { flex: 1 1 0; justify-content: center; } }