/* ==========================================================================
   motyw.css — własny motyw Bootstrapa 5.3 (etap U1, punkt 3 planu UI).

   Ten plik robi trzy rzeczy i nic poza nimi:
     1. wczytuje `Open Sans` z plików lokalnych (`../fonts/`),
     2. przepisuje tokeny z `_tokeny.css` na zmienne Bootstrapa,
     3. domyka to, czego Bootswatch `simplex` z wersji 1.0 nie domyka —
        kontrast tekstu i widoczny stan `:focus`.

   Komponenty własne (pasek, karta, komunikat, stan pusty, okno potwierdzenia)
   mieszkają w `aplikacja.css`. Wartości — wyłącznie w `_tokeny.css`.

   Kolejność wczytania w `layout/baza.html` jest istotna i wygląda tak:
       vendor/bootstrap.min.css → _tokeny.css → motyw.css → aplikacja.css
   ========================================================================== */

/* ==========================================================================
   0. Open Sans z plików lokalnych

   Ta sama czcionka co w wersji 1.0, ale wersja 1.0 ciągnie ją z sieci:
   `application/static/bootstrap.css` ma w 14. linii
   `@import url("https://fonts.googleapis.com/css2?family=Open+Sans...")`.
   Tutaj są to dwa pliki `woff2` w repozytorium — polityka CSP
   `default-src 'self'` (wymóg D7) nie wpuszcza ani arkusza Google Fonts,
   ani serwera `fonts.gstatic.com`.

   Jeden plik na podzbiór, nie jeden na grubość: to czcionka zmienna, więc
   zakres `font-weight: 400 700` obsługuje 400, 600 i 700 z tego samego pliku.
   Podzbiór `latin-ext` jest tym, który niesie ą, ć, ę, ł, ń, ś, ź, ż.
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.7f28d9acd0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin.23145c714161.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Mapowanie tokenów na zmienne Bootstrapa 5.3
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: var(--krok-tekstu);
  --bs-body-line-height: var(--wysokosc-linii);
  --bs-body-color: var(--tekst);
  --bs-body-bg: var(--tlo);
  --bs-secondary-color: var(--tekst-cichy);
  --bs-tertiary-bg: var(--tlo-ciche);
  --bs-border-color: var(--obwodka-dekoracyjna);
  --bs-border-radius: var(--promien);
  --bs-border-radius-sm: var(--promien-maly);

  /* Bootstrap maluje `code` na magentę (`--bs-code-color: #d63384`). W aplikacji
     bez ani jednego elementu w tym kolorze wygląda to jak pomyłka, a dodatkowo
     zlewa się z odnośnikami, które są ciemnoczerwone. Kolor cichy jest
     neutralny i czytelny (6.69:1 na białym). */
  --bs-code-color: var(--tekst-cichy);

  --bs-primary: var(--marka);
  --bs-primary-rgb: 217, 35, 15;
  --bs-danger: var(--blad);
  --bs-success: var(--sukces);

  /* Odnośniki: Bootstrap 5.3 czyta z `a` wyłącznie warianty `*-rgb`, więc
     nadpisanie samego `--bs-link-color` nic nie robi — sprawdzone w przeglądarce
     na prototypach. Obie postacie są tu podane, żeby komponenty czytające jedną
     albo drugą dostały ten sam kolor. */
  --bs-link-color: var(--marka-ciemna);
  --bs-link-color-rgb: 168, 26, 11;
  --bs-link-hover-color: var(--marka-ciemniejsza);
  --bs-link-hover-color-rgb: 125, 19, 8;
  --bs-form-invalid-color: var(--blad);
  --bs-form-invalid-border-color: var(--blad);
  --bs-form-valid-color: var(--sukces);
  --bs-form-valid-border-color: var(--sukces);
}

/* Stopka trzyma się dołu okna także na krótkiej stronie (strony błędów). */
body {
  background-color: var(--tlo);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  padding-block: var(--odstep-4);
}

/* ==========================================================================
   2. Skupienie klawiatury — to, czego Bootswatch `simplex` nie domyka

   Wersja 1.0 zostawia domyślny `box-shadow` Bootstrapa w kolorze marki:
   czerwona poświata na czerwonym pasku jest niewidoczna. Tu pierścień jest
   `outline`, a nie `box-shadow`, więc przeżywa tryb wysokiego kontrastu
   Windows, i ma osobny wariant na tle marki (`aplikacja.css`, sekcja paska).

   Kontrast pierścienia: #1b1f24 na białym 16.56:1, na tle cichym 15.44:1,
   biały na marce 5.00:1 — wszystkie ponad progiem 3:1 z SC 1.4.11.
   ========================================================================== */

:focus-visible {
  outline: var(--pierscien-grubosc) solid var(--pierscien);
  outline-offset: var(--pierscien-odstep);
  border-radius: var(--promien-maly);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: none;
  outline: var(--pierscien-grubosc) solid var(--pierscien);
  outline-offset: var(--pierscien-odstep);
}

/* Nie gasimy pierścienia przy kliknięciu myszą — `:focus-visible` robi to sam.
   Pierścienia nie wolno usuwać nigdzie: dodatek 8 z sekcji 7 planu. */

/* Przycisk sekcji zwijanej. Bootstrap gasi tu pierścień WPROST:

       .accordion-button:focus { outline: 0; box-shadow: var(--bs-accordion-btn-focus-box-shadow); }

   i przebija regułę `:focus-visible` wyżej, bo ma wyższą szczegółowość (0,2,0 wobec 0,1,0).
   Poświatę z drugiej deklaracji gasi sekcja 6 tego pliku, ustawiając
   `--bs-accordion-btn-focus-box-shadow: none` — słusznie, bo była to poświata w kolorze marki,
   czyli dokładnie to, czego ten plik się pozbywa. Razem znaczyło to jednak, że przycisk
   zostaje BEZ ŻADNEGO oznaczenia skupienia: `outline` zgaszony przez Bootstrapa, `box-shadow`
   zgaszony przez nas. Reguła `.btn:focus-visible` go nie ratuje — `.accordion-button` nie ma
   klasy `.btn`.

   Znalezione w U7, przejściem klawiaturą po wszystkich ekranach: były to jedyne trzy
   elementy w całej aplikacji bez pierścienia — nagłówki sekcji SUSPECT, PROSPECT i CUSTOMER
   na karcie klienta. Dla osoby chodzącej klawiaturą znaczyło to, że po wejściu na kartę
   skupienie znika z ekranu na trzy przystanki (SC 2.4.7, poziom AA).

   Odstęp jest UJEMNY, w przeciwieństwie do reszty aplikacji: przycisk sekcji zajmuje całą
   szerokość karty, więc pierścień rysowany na zewnątrz wychodziłby poza jej krawędź i przy
   360 px dokładał poziome przewijanie. */
.accordion-button:focus-visible {
  box-shadow: none;
  outline: var(--pierscien-grubosc) solid var(--pierscien);
  outline-offset: calc(-1 * var(--pierscien-odstep));
}

/* ==========================================================================
   3. Formularze

   Obwódka pola jest własna i mocniejsza niż dekoracyjna (4.75:1 zamiast
   1.53:1): po niej poznaje się kontrolkę, więc obejmuje ją SC 1.4.11.
   ========================================================================== */

.form-label {
  font-weight: 600;
  margin-bottom: var(--odstep-1);
}

.form-control,
.form-select {
  border-color: var(--obwodka-pola);
}

.form-control::placeholder {
  color: var(--tekst-cichy);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--tlo-wylaczone);
  color: var(--tekst-cichy);
  border-color: var(--obwodka-pola);
}

/* Walidacja widoczna — luka 4 spisu parytetu. Nie polegamy na samym kolorze:
   przy komunikacie stoi ikona, a pole dostaje grubszą obwódkę. Ikona Bootstrapa
   w tle pola jest wygaszona, bo nachodzi na tekst w polach o krótkiej treści. */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--blad);
  border-width: 2px;
  background-image: none;
  padding-right: 0.75rem;
}

.invalid-feedback {
  color: var(--blad);
  font-size: var(--krok-tekstu-maly);
  font-weight: 600;
}

/* Django wypisuje błędy pola zawsze, a nie po walidacji przeglądarki, więc
   `.invalid-feedback` musi dać się pokazać bez klasy `.was-validated`. */
.invalid-feedback.widoczny {
  display: block;
}

/* ==========================================================================
   4. Przyciski

   Warianty własne zamiast `.btn-primary` i `.btn-outline-secondary`: nazwy
   Bootstrapa niosą znaczenie („primary" to kolor motywu), a tutaj znaczeniem
   jest rola przycisku na ekranie.
   ========================================================================== */

.btn-marka {
  --bs-btn-color: var(--tekst-na-marce);
  --bs-btn-bg: var(--marka);
  --bs-btn-border-color: var(--marka);
  --bs-btn-hover-color: var(--tekst-na-marce);
  --bs-btn-hover-bg: var(--marka-ciemna);
  --bs-btn-hover-border-color: var(--marka-ciemna);
  --bs-btn-active-color: var(--tekst-na-marce);
  --bs-btn-active-bg: var(--marka-ciemniejsza);
  --bs-btn-active-border-color: var(--marka-ciemniejsza);
  --bs-btn-disabled-color: var(--tekst-na-marce);
  --bs-btn-disabled-bg: var(--marka);
  --bs-btn-disabled-border-color: var(--marka);
  --bs-btn-disabled-opacity: 0.75;
  font-weight: 600;
}

.btn-obrys {
  --bs-btn-color: var(--tekst);
  --bs-btn-bg: var(--tlo);
  --bs-btn-border-color: var(--obwodka-pola);
  --bs-btn-hover-color: var(--tekst);
  --bs-btn-hover-bg: var(--tlo-ciche);
  --bs-btn-hover-border-color: var(--tekst);
  --bs-btn-active-color: var(--tekst);
  --bs-btn-active-bg: var(--tlo-wylaczone);
  --bs-btn-active-border-color: var(--tekst);
}

/* Przycisk operacji nieodwracalnej — używa go wyłącznie okno potwierdzenia. */
.btn-usun {
  --bs-btn-color: var(--tekst-na-marce);
  --bs-btn-bg: var(--blad);
  --bs-btn-border-color: var(--blad);
  --bs-btn-hover-color: var(--tekst-na-marce);
  --bs-btn-hover-bg: var(--blad-najechany);
  --bs-btn-hover-border-color: var(--blad-najechany);
  --bs-btn-active-color: var(--tekst-na-marce);
  --bs-btn-active-bg: var(--blad-wcisniety);
  --bs-btn-active-border-color: var(--blad-wcisniety);
  font-weight: 600;
}

/* Stan „zapisuję" — dodatek 7 z sekcji 7 planu, obsługiwany przez
   `js/formularze.js`. Szerokość przycisku nie skacze, bo zamieniane są dwa
   napisy wewnątrz tego samego przycisku, a nie sam przycisk. */
.btn[aria-busy="true"] {
  cursor: progress;
}

.btn .stan-zapisu {
  display: none;
  align-items: center;
  gap: var(--odstep-2);
}

.btn[aria-busy="true"] .stan-zapisu {
  display: inline-flex;
}

.btn[aria-busy="true"] .etykieta-przycisku {
  display: none;
}

/* ==========================================================================
   5. Akordeon

   Bootstrap 5.3 maluje otwartą sekcję akordeonu NIEBIESKO i wpisuje ten
   niebieski także w ikonę strzałki (osobny obrazek `data:`). W aplikacji,
   która nie ma ani jednego niebieskiego elementu, wygląda to jak obca
   wtyczka — dlatego nadpisujemy oba obrazki i oba kolory. Adresy `data:`
   mieszczą się w dyrektywie `img-src 'self' data:` (D7).

   Kolor `%231b1f24` jest w adresie `data:` wpisany wprost i inaczej być nie może:
   adres `data:` nie widzi zmiennych CSS. To ta sama wartość co token `--tekst`
   i przy zmianie tokenu trzeba ją poprawić tutaj ręcznie — jedyne takie miejsce
   w całym motywie.

   Akordeon wchodzi na ekrany dopiero w U5 (trzy zwijane sekcje karty
   klienta); nadpisania są tu, bo należą do motywu, a nie do ekranu.
   ========================================================================== */

.accordion {
  --bs-accordion-bg: var(--tlo);
  --bs-accordion-border-color: var(--obwodka-dekoracyjna);
  --bs-accordion-border-radius: var(--promien);
  --bs-accordion-btn-color: var(--tekst);
  --bs-accordion-color: var(--tekst);
  --bs-accordion-active-color: var(--tekst);
  --bs-accordion-active-bg: var(--marka-tlo);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b1f24'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b1f24'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
  font-weight: 600;
}