/* =========================================================
   UKŁAD — KLASY, KTÓRE ZASTĄPIŁY STYLE WPISANE W KODZIE

   Napisane 2026-10-05. Prośba Oskara: „sprawdź wszystkie pliki pod
   względem CSS, przenieś to do nowego motywu i nadaj im kształt taki,
   aby był jednolity".

   Powstaje razem z `narzedzia/przenies-styl.js`, które przepisało
   427 atrybutów `style="…"` w 82 plikach na te klasy.

   =========================================================
   CZEMU OSOBNY PLIK, A NIE MOTYW
   =========================================================

   Te klasy muszą działać W OBU WYGLĄDACH.

   Gdyby `.o-4` istniało tylko w motywie, powrót do starego wyglądu
   zabrałby wszystkie odstępy: stary arkusz nie wie nic o tych
   klasach, a atrybut `style`, który je dotąd dawał, już nie istnieje.
   Stary wygląd rozsypałby się od zmiany, która miała go nie dotyczyć
   — a możliwość powrotu była wyraźnym warunkiem Oskara.

   Dlatego ten plik wczytuje się zawsze i stoi NAD motywem. Motyw może
   te wartości zacieśnić (i robi to przy zagęszczaniu), ale nie musi.

   =========================================================
   SKALA: SIEDEM WARTOŚCI STAŁO SIĘ TRZEMA
   =========================================================

   `margin-top` stał w kodzie 343 razy, w siedmiu wartościach: 6, 8,
   10, 12, 14, 16 i 18 px. Siedem liczb na jedno pojęcie — i żadna
   z nich z niczego nie wynikała.

   Zostały trzy stopnie. Osiemnaście zeszło do szesnastu, nie wzrosło
   do dwudziestu czterech: Oskar prosił o bardziej kompaktowy wygląd,
   a dwa piksele różnicy przy odstępie są niewidoczne — osiem już nie.

   =========================================================
   NAZWY MÓWIĄ, CO TO JEST, NIE JAK WYGLĄDA
   =========================================================

   `.na-prawo` to wyjątek od tej zasady i jedyny — bo przy liczbie
   „do prawej" JEST tym, co to znaczy.

   Pozostałe nazywają rzecz: `.rzad` to rząd elementów, `.wymagane`
   to oznaczenie pola wymaganego, `.jak-tekst` to przycisk, który ma
   wyglądać jak tekst. Nazwa `.czerwony-12px` zestarzałaby się przy
   pierwszej zmianie koloru albo rozmiaru.
========================================================= */

/* =========================================================
   SKALA — ZMIENNE, KTÓRE MUSZĄ DZIAŁAĆ W OBU WYGLĄDACH

   Dopisane 2026-10-05 po audycie. Audyt wykazał, że cztery kryteria
   odbioru z planu nie były spełnione, mimo że odhaczyłem je jako
   zrobione: w kodzie stron zostało 47 rozmiarów czcionki i 142
   odstępy wpisane liczbą.

   Narzędzie `narzedzia/przenies-styl.js` zamienia te liczby na
   `var(--o-3)` i `var(--font-sm)`. Zmienne muszą więc być
   zdefiniowane TUTAJ, a nie tylko w motywie — inaczej po powrocie
   do starego wyglądu te deklaracje byłyby nieprawidłowe i odstępy
   zniknęłyby zupełnie.

   Motyw redefiniuje te same nazwy pod `[data-motyw="nowy"]`
   i wygrywa, bo jego selektor jest bardziej szczegółowy.

   =========================================================
   CO TO ZMIENIA W STARYM WYGLĄDZIE
   =========================================================

   Niewiele, ale uczciwie: wartości są snapowane do skali, więc
   w starym wyglądzie tekst 11,5 px staje się 11 px, a odstęp 18 px
   — 16 px. Przesunięcia są najwyżej dwupikselowe i dotyczą miejsc,
   w których te liczby i tak były wybrane bez powodu.

   `assets/css/styles.css` pozostaje nietknięty (warunek Z1) — zmienia
   się tylko to, co dotąd stało w atrybucie `style` przy elemencie.
========================================================= */

:root {
  /*
    Napis na przycisku w kolorze akcentu (niebieskim) — biały w OBU
    trybach. Zmienna, bo generator trybu jasnego zamienia literalną
    biel tekstu na kolor tekstu (ciemny) i napis znikałby na niebieskim
    (punkt 3, 2026-10-12).
  */
  --tekst-na-akcencie: #ffffff;

  --o-1: 4px;
  --o-2: 8px;
  --o-3: 12px;
  --o-4: 16px;
  --o-5: 24px;
  --o-6: 32px;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-lg: 15px;
  --font-xl: 19px;
  --font-2xl: 24px;

  /*
    KOLOR AKCENTU — BRAKUJĄCA ZMIENNA, NIE NOWY POMYSŁ.

    Dopisane 2026-10-12. `--accent` było używane w pięciu miejscach
    i NIE BYŁO ZDEFINIOWANE NIGDZIE — ani tutaj, ani w motywie, ani
    w `admin.css`, ani z JavaScriptu.

    Skutki widać było w module retencji:

        .ret-panel { border-top:3px solid var(--accent) }

    Niezdefiniowana zmienna unieważnia CAŁY skrót, więc ten
    trzypikselowy pasek u góry panelu nie rysował się wcale.

        .ret-karta.is-wybrana { border-color:var(--accent) }

    Tutaj unieważniona jest jedna właściwość, więc `border-color`
    wracało do wartości początkowej `currentColor` — zaznaczona
    karta brała kolor tekstu i nie odcinała się od niezaznaczonych.

    ŻE MA TO BYĆ KOLOR MARKI, WIDAĆ Z WARTOŚCI ZAPASOWYCH, które
    ktoś dopisał w dwóch innych miejscach:

        styles.css:9868        var(--accent, #8b5cf6)   = --brand starego
        motyw-marka.css:314    var(--accent, #3B9FE0)   = --brand nowego

    Czyli w obu wyglądach akcent miał być tym, czym jest `--brand`.
    Dlatego tu stoi odwołanie, a nie wpisany kolor: `--brand`
    rozwiązuje się w chwili użycia, więc stary wygląd dostaje swój
    fiolet, a nowy swój błękit — bez powtarzania wartości.

    Miejsce jest TO SAMO z tego samego powodu co odstępy wyżej:
    moduł retencji działa w obu wyglądach, więc zmienna nie może
    istnieć tylko w motywie.
  */
  --accent: var(--brand);
}

/* =========================================================
   ODSTĘP U GÓRY
========================================================= */

.o-1 { margin-top: var(--o-1); }
.o-2 { margin-top: var(--o-2); }
.o-3 { margin-top: var(--o-3); }
.o-4 { margin-top: var(--o-4); }
.o-5 { margin-top: var(--o-5); }
.o-6 { margin-top: var(--o-6); }

.bez-odstepu { margin: 0; }

/* =========================================================
   RZĄD ELEMENTÓW

   Najczęstszy układ w panelu: kilka rzeczy obok siebie, zawijane na
   wąskim ekranie. Stał w kodzie 23 razy, w trzech kolejnościach tych
   samych właściwości.

   `flex-wrap` jest tu obowiązkowe, nie opcjonalne: bez zawijania
   rząd przycisków przy 1024 px wychodzi za krawędź ekranu i zmusza
   całą stronę do przewijania w poziomie (zasada Z4).
========================================================= */

.rzad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rzad-srodek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* =========================================================
   WYRÓWNANIE
========================================================= */

/*
  Liczby do prawej — i cyfrą o stałej szerokości.

  Przy kolumnie kwot to nie ozdoba: wyrównane do lewej „1 234,00"
  i „98,00" nie dają się porównać wzrokiem, a panel rozliczeń jest
  do porównywania kwot. `tabular-nums` sprawia, że cyfry stoją
  w pionie jedna pod drugą.
*/
.na-prawo {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.na-srodek { text-align: center; }

/* =========================================================
   WYŚWIETLANIE
========================================================= */

.blok { display: block; }

.pelna-szerokosc { width: 100%; }

/*
  Przewijanie w poziomie U SIEBIE, nie całą stroną (zasada Z4).
  Szeroka tabela ma się przewijać w swojej ramce — strona nigdy.
*/
.przewin-poziomo {
  overflow-x: auto;
}

/* =========================================================
   ZDJĘCIE WYPEŁNIAJĄCE KAFELEK

   Dwanaście razy ten sam zestaw czterech właściwości, w czterech
   modułach (flota, szkody, sklep, dokumenty).
========================================================= */

.obraz-wypelnia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   TEKST
========================================================= */

.tekst-przygaszony {
  color: var(--muted, #8f9bb7);
}

/*
  OZNACZENIE POLA WYMAGANEGO.

  Stało w kodzie jako `color:#dc2626` — czerwień wpisana na sztywno.
  To nie była ozdoba: ta gwiazdka jest JEDYNYM znakiem, że pole jest
  wymagane. Kolor wpisany na sztywno nie reaguje na tryb jasny,
  a `#dc2626` na jasnym tle ma kontrast 3,9:1 — poniżej progu
  czytelności (4,5:1).

  Teraz bierze kolor ze zmiennej, która w obu trybach jest dobrana,
  i dostaje grubość: przy jednym znaku kolor sam nie wystarcza
  osobom, które go nie rozróżniają.
*/
.wymagane {
  color: var(--danger, #ff6b6b);
  font-weight: 800;
}

/*
  Nagłówek grupy pól w formularzu — pięć razy ten sam zestaw pięciu
  właściwości.
*/
.naglowek-grupy {
  margin: 16px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted, #8f9bb7);
}

/* =========================================================
   PRZYCISK, KTÓRY MA WYGLĄDAĆ JAK TEKST

   Lupka, krzyżyk w nagłówku, nazwa do kliknięcia. Musi być
   przyciskiem (klawiatura, czytnik ekranu), a nie ma wyglądać
   jak przycisk.
========================================================= */

.jak-tekst {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.bez-ramki {
  border: 0;
  padding: 0;
}

/* =========================================================
   PRZYCISK-WIERSZ

   Cały wiersz listy, który da się kliknąć. Musi być przyciskiem
   (klawiatura, czytnik ekranu), ale wygląda jak pozycja listy —
   nie jak przycisk.

   Wyciągnięte z `investors-core.js` 2026-10-05: był tam ostatnim
   przyciskiem w panelu z rozmiarem wpisanym w atrybucie `style`,
   a zasada Z3 mówi „trzy rozmiary przycisków i żadnych innych".
   Ten nie jest czwartym rozmiarem przycisku — jest innym rodzajem
   elementu i dlatego ma własną nazwę.
========================================================= */

.przycisk-wiersz {
  padding: var(--o-3);
  margin-bottom: var(--o-2);
  text-align: left;
}

/* =========================================================
   POLE KOMENTARZA W PODGLĄDZIE ROZLICZENIA — PUNKT 8.3

   Oskar: „powiększamy pole do wpisania komentarza. Pole komentarza
   powinno zajmować praktycznie całą szerokość popupu".

   Wysokość z `min-height`, a nie tylko z `rows`: `rows` ustala
   wysokość startową, ale człowiek może je zmniejszyć myszką do
   jednego wiersza i tak zostanie przy następnym otwarciu. Dolna
   granica pilnuje, żeby pole nie zrobiło się paskiem.
========================================================= */

.komentarz-rozliczenia {
  min-height: 160px;
  resize: vertical;
}

/* =========================================================
   PASEK POWROTU — PUNKT 14.4

   Stoi na samej górze karty kierowcy, nad szybkim menu: po wejściu
   z rozliczenia to jest pierwsza rzecz, której człowiek szuka.

   BEZ PRZEDROSTKA MOTYWU — jak szybkie menu i kropka statusu.
   Powrót do rozliczenia nie zależy od tego, jaki wygląd ktoś wybrał;
   po przełączeniu na stary wygląd nadal trzeba mieć czym wrócić.
========================================================= */

.pasek-powrotu {
  margin-bottom: var(--o-3);
}

/* =========================================================
   POWIADOMIENIA W APLIKACJI KIEROWCY — PUNKT 4.13b

   Dwie reguły, bo tylko dwie rzeczy są tu naprawdę nowe. Wiersz
   powiadomienia używa `.driver-app-doc` — tego samego kształtu co
   dokument do podpisu — a data i autor `.driver-app-hint`.

   BEZ PRZEDROSTKA MOTYWU, jak szybkie menu i pasek powrotu:
   powiadomienia muszą być czytelne także po powrocie do starego
   wyglądu.
========================================================= */

/*
  TREŚĆ Z ZACHOWANIEM ZŁAMAŃ WIERSZA.

  Ktoś napisał tę wiadomość w polu wielowierszowym. Zlanie w jeden
  akapit zamieniłoby listę rzeczy do zrobienia w ścianę tekstu —
  a to jedyna treść na tym ekranie.
*/
.driver-app-tresc {
  white-space: pre-wrap;
  line-height: 1.5;
}

/*
  NIEPRZECZYTANE — RAMKA, NIE TYLKO KOLOR.

  Obok kropki stoi grubsza, wyraźniejsza krawędź. Sam kolor nie
  wystarcza osobom, które go nie rozróżniają, a to jedyny znak,
  że czegoś jeszcze nie przeczytano.
*/
.driver-app-doc.nieprzeczytane {
  border-color: var(--brand, #3b82f6);
  border-width: 2px;
}

.driver-app-doc.nieprzeczytane strong {
  font-weight: 800;
}

/*
  TREŚĆ WIADOMOŚCI W TABELI NA KARCIE KIEROWCY — PUNKT 4.13f

  Złamania wiersza zachowane, bo to treść, która POSZŁA do kierowcy
  — zlanie jej w jeden akapit zmieniłoby dokument. Szerokość
  ograniczona, żeby jedna długa wiadomość nie rozepchała tabeli na
  cały ekran i nie zmusiła strony do przewijania w poziomie
  (zasada Z4).
*/
.komentarz-wiadomosci {
  display: block;
  max-width: 460px;
  white-space: pre-wrap;
}

/* =========================================================
   KARTA, KTÓRA JEST PRZYCISKIEM

   Dopisane 2026-10-05 po audycie. Ten sam zestaw pięciu
   właściwości stał w atrybucie `style` trzy razy: przy sprawie
   w aplikacji kierowcy, przy rozliczeniu i przy pozycji inwestora.

   To NIE jest czwarty rozmiar przycisku (zasada Z3 mówi o trzech
   rozmiarach i żadnym więcej). To inny rodzaj elementu: cały kafelek
   da się kliknąć. Musi być przyciskiem — klawiatura, czytnik ekranu
   — ale wygląda jak karta, nie jak przycisk, więc nie dziedziczy
   niczego z `.btn`.

   `font: inherit` jest tu obowiązkowe, nie kosmetyczne: przeglądarka
   nadaje przyciskom własną czcionkę systemową, mniejszą od tekstu
   strony. Bez tego kafelek-przycisk miałby inny tekst niż kafelek
   obok niego, który przyciskiem nie jest.
========================================================= */

.karta-klikalna {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* =========================================================
   PODPOWIEDŹ NA EKRANIE LOGOWANIA — ODZYSKIWANIE HASŁA

   Dopisane 2026-10-11. Zdanie wyjaśniające pod nagłówkiem: „link
   działa godzinę i tylko raz", „ta droga wymaga kodu od
   administratora".

   NIE `.auth-message`: tamten jest na odpowiedź serwera i ma stany
   (błąd, sukces, czekanie). To jest stały tekst ekranu i gdyby
   dzielił klasę z komunikatem, pierwsza odpowiedź serwera
   nadpisałaby mu klasy.

   W `uklad.css`, nie w motywie: ekran logowania musi być czytelny
   także po powrocie do starego wyglądu — a `styles.css` zostaje
   nietknięty (zasada Z1).
========================================================= */

.auth-hint {
  margin: 0 0 var(--o-3);
  font-size: var(--font-sm);
  line-height: 1.45;
  color: var(--muted, #8f9bb7);
}

/* =========================================================
   SYSTEMY ROZLICZEŃ — SIEDEM KSZTAŁTÓW, KTÓRE STAŁY W KODZIE

   Dopisane 2026-10-12. Oskar: „wszystkie wyglądy przenieś do CSS,
   tak aby nie trzeba było szukać".

   Te same siedem zestawów właściwości stało w atrybutach `style`
   w KAŻDYM module systemów rozliczeń — a od dzisiaj jest ich cztery
   (taxi, kurierzy, faktury, prowizje). Czyli dwadzieścia osiem
   kopii tego samego.

   To nie tylko niechlujstwo. Nowy system powstaje z wzorca
   narzędziem, więc każdy inline-styl rozmnaża się razem z nim —
   i zmiana wyglądu kafelka z logo znaczyłaby dwadzieścia osiem
   edycji w czterech katalogach.

   `rgba(15,23,42,.06)` zamieniłem na `var(--soft)`: wpisana na
   sztywno jasna plama na CIEMNYM panelu jest niewidoczna, a to
   dokładnie ten błąd, który audyt 5 października znalazł
   w trzech miejscach.
========================================================= */

/*
  KAFELEK Z LOGO SYSTEMU. Dwa rozmiary, bo dwa miejsca: lista
  systemów (mały) i karta otwartego systemu (duży).
*/
.logo-systemu,
.logo-systemu-duze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--soft, rgba(15, 23, 42, .06));

  /*
    Ramka, bo logo bywa białe na białym (FreeNow): w trybie jasnym
    kafelek znikał w karcie — „biała ikonka na białym tle" (Oskar,
    2026-10-13).
  */
  box-sizing: border-box;
  border: 1px solid var(--line, rgba(15, 23, 42, .14));

  /*
    `flex:0 0 auto` jest tu obowiązkowe, nie ozdobne: kafelek stoi
    w rzędzie obok nazwy systemu, a bez tego kurczy się do zera,
    gdy nazwa jest długa.
  */
  flex: 0 0 auto;
}

.logo-systemu {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.logo-systemu-duze {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

/* Kafelek bez obrazka — pokazuje pierwszą literę nazwy. */
.logo-systemu-litera {
  color: var(--muted, #8f9bb7);
  font-weight: 700;
}

/*
  RZĄD LUŹNIEJSZY niż `.rzad-srodek`: odstęp o jeden stopień
  większy, bo stoi w nim kafelek z logo i nazwa, a nie dwa
  przyciski.
*/
.rzad-luzny {
  display: flex;
  align-items: center;
  gap: var(--o-3);
}

/*
  RZĄD WYRÓWNANY DO GÓRY. Przy dwóch elementach różnej wysokości
  (kafelek i blok tekstu) wyrównanie do środka odsuwa tekst od
  jego własnego nagłówka.
*/
.rzad-gora {
  display: flex;
  align-items: flex-start;
  gap: var(--o-2);
}

/* Rząd przycisków pod sekcją. */
.rzad-przyciskow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  margin-top: var(--o-3);
}

/*
  SCHOWANY.

  Nie `hidden` — atrybut `hidden` przegrywa z `display:flex`
  i `display:grid`, a te bloki bywają jednym i drugim. Klasa
  wygrywa, bo ma wyższą szczegółowość niż sam znacznik.
*/
.schowany {
  display: none;
}

/*
  DWIE KLASY Z MODULU PRZEJAZDOW.

  `.napis-xl` stalo jako `font-size:var(--font-xl)` przy znaku „+"
  dodawania kolumny wyliczanej — duzy ZNAK, nie duzy tekst.
  `.odstep-z-lewej` odsuwa znacznik od pola obok.
*/
.napis-xl {
  font-size: var(--font-xl);
}

.odstep-z-lewej {
  margin-left: var(--o-2);
}

/* =========================================================
   USTAWIENIA — KSZTALTY, KTORE STALY W ATRYBUTACH

   Dopisane 2026-10-12. Oskar: „przeanalizuj kazdy modul i kazda
   zakladke, tak aby wyglad systemu byl spojny… wszystkie wyglady
   przenies do CSS, tak aby nie trzeba bylo szukac".

   W Ustawieniach stalo 29 atrybutow `style` w 26 roznych kształtach
   — czyli prawie kazdy byl jednorazowy. To najgorszy rodzaj: nie da
   sie ich zmienic w jednym miejscu, bo kazdy jest gdzie indziej,
   a razem decyduja o tym, czy ekrany wygladaja na jeden system.

   =========================================================
   ODSTEP POD ELEMENTEM
   =========================================================

   `.o-N` daje odstep U GORY. Tu brakowalo odwrotnosci — i dlatego
   w kodzie stalo `margin-bottom:var(--o-2)` wpisane recznie.

   Nazwa `.pod-N`, nie `.mb-N`: w tym projekcie nazwy mowia, co to
   jest, a nie jaka wlasciwosc CSS ustawiaja.
========================================================= */

.pod-1 { margin-bottom: var(--o-1); }
.pod-2 { margin-bottom: var(--o-2); }
.pod-3 { margin-bottom: var(--o-3); }
.pod-4 { margin-bottom: var(--o-4); }

/* Element, ktory NIE ma odstepu pod soba, choc jego rodzaj zwykle ma. */
.bez-odstepu-pod { margin-bottom: 0; }

/* =========================================================
   ROZMIAR TEKSTU — DWIE NAZWY, KTORYCH BRAKOWALO
========================================================= */

.napis-sm { font-size: var(--font-sm); }
.napis-2xl { font-size: var(--font-2xl); }

/* =========================================================
   CZCIONKA O STALEJ SZEROKOSCI

   Do kluczy API i innych ciagow, ktore czlowiek PORZEDUJE wzrokiem
   znak po znaku. Przy czcionce proporcjonalnej „l" i „1" wygladaja
   tak samo, a przy kluczu dostepu to roznica miedzy dzialaniem
   i niedzialaniem.
========================================================= */

.czcionka-stala {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================================================
   PRZYGASZONY ELEMENT

   `opacity` zamiast koloru, bo dotyczy calego bloku razem
   z obrazkiem w srodku — a koloru nie da sie odziedziczyc do
   obrazka.
========================================================= */

.przygaszony { opacity: .55; }

/* =========================================================
   RZEDY — DWA KSZTALTY, KTORYCH NIE BYLO
========================================================= */

/*
  Rzad W LINII TEKSTU: `inline-flex`, nie `flex`. Stoi w zdaniu,
  a nie jako osobny blok — `flex` zlamalby zdanie w tym miejscu.
*/
.rzad-w-linii {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
}

/*
  Kolumna wyrownana DO PRAWEJ. W pasku bocznym zasad rozliczen
  stoja pod soba liczby — a liczby porownuje sie wzrokiem tylko
  wtedy, gdy ich prawe krawedzie sa w jednej linii.
*/
.kolumna-prawo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--o-1);
}

/* =========================================================
   WYROWNANIE DO LEWEJ

   Potrzebne, bo `.btn` i komorki tabel maja wyrownanie do srodka,
   a przycisk z dluga nazwa czyta sie tylko od lewej.
========================================================= */

.na-lewo { text-align: left; }

/* =========================================================
   WCIECIE POD ELEMENTEM NADRZEDNYM

   Komunikat sprawdzenia stoi POD polem, do ktorego sie odnosi,
   i jest wciety — zeby bylo widac, ze dotyczy tego pola, a nie
   calej sekcji.
========================================================= */

.wciecie-pod {
  margin: var(--o-2) 0 0 var(--o-4);
}

/* =========================================================
   KAFELEK Z OBRAZKIEM — ROZMIAR Z DANYCH

   Trzy rozmiary wpisane recznie w trzech miejscach (34, 44 px
   i wyliczany). Kształt jest ten sam, wiec klasa trzyma kształt,
   a rozmiar zostaje tam, gdzie go znaja: w `style`, bo pochodzi
   z danych.

   To jest ten sam podzial, co przy odstepach poza skala: klasa na
   to, co stale, atrybut na to, co wyliczane — i wtedy atrybut
   zawiera JEDNA wlasciwosc, a nie siedem.
========================================================= */

.kafelek-obrazka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--soft, rgba(15, 23, 42, .06));
  flex: 0 0 auto;
}

/*
  ZNACZNIK, KTORY DA SIE KLIKNAC.

  `<summary>` w rozwijanym bloku `<details>` NIE ma domyslnie
  wskaznika rece — przegladarka pokazuje nad nim kursor tekstowy,
  czyli dokladnie to, co mowi „tego nie da sie kliknac".
*/
.do-klikniecia { cursor: pointer; }

/* =========================================================
   ZDJĘCIA DOKUMENTÓW KIEROWCY (2026-10-12, punkt L2)
   Karta: miniatury do podglądu. Edycja: miniatury z usuwaniem
   i „Dodaj zdjęcie". Kolory z motywu — działa w obu wyglądach.
========================================================= */

.dok-zdjecia{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.dok-zdjecie{
  position:relative;
  width:72px;
  height:72px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--card);
}

.dok-zdjecie a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.dok-zdjecie img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.dok-zdjecie-pdf{
  font-size:12px;
  color:var(--muted);
}

.dok-zdjecie-usun{
  position:absolute;
  top:3px;
  right:3px;
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:12px;
  line-height:22px;
  cursor:pointer;
}

.dok-zdjecie-dodaj{
  display:inline-flex;
  align-items:center;
  height:72px;
  padding:0 14px;
  border:1px dashed var(--line2, var(--line));
  border-radius:10px;
  color:var(--text);
  font-size:13px;
  cursor:pointer;
}

.dok-zdjecia-edycja{
  margin-top:18px;
}

.dok-zdjecia-edycja h4{
  margin:0 0 4px;
}

.dok-zdjecia-wiersz{
  display:grid;
  grid-template-columns:minmax(140px, 200px) 1fr;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-top:1px solid var(--line);
}

@media (max-width:600px){
  .dok-zdjecia-wiersz{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FAKTURY: „DODAJ DO FOLDERU" (2026-10-12, punkt L4)
========================================================= */

.faktura-do-folderu{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
}

.faktura-do-folderu-rodzaj{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.faktura-do-folderu label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.akcje-w-wierszu{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/*
  DOKUMENTACJA INTEGRACJI (2026-10-13) — tekst do czytania: wygodna
  interlinia i szerokość wiersza, listy z odstępem.
*/
.dokumentacja-integracji p,
.dokumentacja-integracji li {
  line-height: 1.6;
  max-width: 90ch;
}

.dokumentacja-integracji li + li {
  margin-top: var(--o-1, 4px);
}

/*
  SIATKA PÓL WYBORU (X7, 2026-10-13) — lista „pokaż / ukryj" w dwóch
  albo trzech kolumnach zamiast słupka jednego pod drugim.
*/
.siatka-wyborow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--o-2) var(--o-4);
}

.siatka-wyborow > label {
  margin: 0;
  cursor: pointer;
}

/* Formularz w trzech kolumnach (krótkie pola liczbowe), na telefonie jedna. */
.form-grid.trzy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .form-grid.trzy {
    grid-template-columns: 1fr;
  }
}