/* ═══════════════════════════════════════════════════════════════════════════
   EKRANY APLIKACJI (wizard, taksonomia, CBAM, dostawcy, VSME, produkty…).
   Przepisane 28.07.2026 na ten sam język wizualny co strony publiczne
   (brand.css): ta sama paleta, promienie, cienie i skala typograficzna.

   ZASADA PRZEPISANIA: zachowane WSZYSTKIE nazwy klas i cała mechanika układu
   (display/grid-template/flex), zmieniona wyłącznie warstwa wizualna. Żaden
   ekran nie wymagał zmiany HTML — dzięki temu 15 widoków podniosło się naraz,
   bez ryzyka rozjazdu między nimi.

   KOLOR ZNACZY TO SAMO WSZĘDZIE (zasada sprzed przepisania, zachowana):
   granat = akcja/marka, zielony = komplet i zgodność, bursztyn = wymaga uwagi,
   czerwony = luka albo błąd. Kolor idzie ZA STANEM, nigdy za dekoracją.

   SKORUPA JEST NEUTRALNA (decyzja właściciela 03.08.2026). Tło strony, powierzchnie
   kart, linie i cienie są czystą szarością — zero domieszki niebieskiego i zielonego.
   To NIE jest zmiana systemu znaczeń, a jego wzmocnienie: dopóki skorupa miała chłodny,
   niebieskawy odcień, granat akcji stał na tle spokrewnionym z sobą i mniej się wybijał.
   Na neutralnym grafitcie granat i zieleń są wyraźniejsze, a kolor pojawia się wyłącznie
   tam, gdzie coś znaczy.

   ROZWAŻONE I ODRZUCONE: uczynienie zieleni kolorem WIODĄCYM aplikacji. Zderzyłoby się
   z regułą wyżej — zielony przycisk „Zapisz" i zielona plakietka „komplet" znaczyłyby to
   samo, a rozdzielanie ich dwoma odcieniami zieleni to proszenie się o pomyłkę. Skorupa
   neutralna daje ten sam efekt („aplikacja wygląda inaczej niż strony publiczne") bez
   psucia znaczeń.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  --uk-marka: #22598f;   /* akcja, elementy interaktywne */
  --uk-marka-c: #1a4570; /* stan wciśnięty/hover */
  --uk-marka-t: #e8eff7; /* tło podpowiedzi */
  --uk-ok: #147a59;
  --uk-ok-t: #e3f4ed;
  --uk-uwaga: #b45309;
  --uk-uwaga-t: #fdf4e7;
  --uk-blad: #a83232;
  --uk-blad-t: #fdeceb;

  /* ── SKORUPA: neutralny grafit (decyzja właściciela 03.08) ────────────────────────────
     Do 03.08 skorupa miała chłodny, niebieskawy odcień (tło #f6f9fc, linie #e2e9f0, cienie
     granatowe). Problem: konkurowała z granatem akcji — przycisk „Zapisz" stał na tle
     spokrewnionym z nim odcieniem, więc mniej się wybijał.
     Teraz skorupa jest BEZBARWNA (czysta szarość, zero domieszki niebieskiego ani zielonego),
     a kolor pojawia się WYŁĄCZNIE tam, gdzie coś znaczy. Ten sam zamysł co reguła niżej:
     kolor idzie za stanem. Neutralne tło jest po to, żeby stan było widać. */
  --uk-tekst: #14171a;    /* niemal czerń, bez domieszki */
  --uk-tekst-2: #545a60;
  /* Etykiety .muted były pod AA (#7d8b9a = 3,48:1 na bieli). Dobrane tak, żeby przechodziły AA
     na OBU powierzchniach, bo .muted stoi i na białej karcie, i wprost na tle strony:
     4,99:1 na #ffffff i 4,58:1 na #f4f5f6. Zmierzone, nie oszacowane. */
  --uk-tekst-3: #6b7076;
  --uk-tlo: #f4f5f6;      /* tło strony — neutralna szarość, żeby karty „wychodziły" */
  --uk-pow: #ffffff;      /* powierzchnia karty */
  --uk-linia: #e4e6e8;
  --uk-linia-2: #eeeff1;  /* delikatniejsza, do wierszy tabel */

  --uk-r: 10px;
  --uk-r-s: 8px;
  /* Cienie neutralne (grafit), nie granatowe — inaczej biała karta ma sinawą obwódkę. */
  --uk-cien: 0 1px 2px rgba(18,20,23,.06);
  --uk-cien-2: 0 2px 6px rgba(18,20,23,.07), 0 8px 24px rgba(18,20,23,.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --uk-marka: #4f8fcc; --uk-marka-c: #6ba3da; --uk-marka-t: #16283a;
    --uk-ok: #3fbc93; --uk-ok-t: #10261f;
    --uk-uwaga: #d99a4a; --uk-uwaga-t: #2a2113;
    --uk-blad: #e07a76; --uk-blad-t: #2c1817;
    /* Skorupa ciemna: czerń i grafit, bez domieszki niebieskiego (było #101820 / #16202b).
       Granat akcji i zieleń kompletu zostają nietknięte i na neutralnym tle są WYRAŹNIEJSZE. */
    --uk-tekst: #eceef0; --uk-tekst-2: #adb2b8; --uk-tekst-3: #868b91;
    --uk-tlo: #131416; --uk-pow: #1b1d20; --uk-linia: #2d3034; --uk-linia-2: #23262a;
    --uk-cien: 0 1px 2px rgba(0,0,0,.4);
    --uk-cien-2: 0 2px 6px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
  }
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  line-height: 1.6;
  color: var(--uk-tekst);
  background: var(--uk-tlo);
  -webkit-font-smoothing: antialiased;
}

/* ── Pomiń do treści (wzorzec GOV.UK) ─────────────────────────────────────
   Przed treścią stoi pasek modułów i (na ekranach wizarda) pasek kroków + narzędzi — bez tego
   użytkownik klawiatury/czytnika ekranu musi przejść przez wszystkie linki za KAŻDYM razem, zanim
   dotrze do treści. Niewidoczny, dopóki nie dostanie fokusu tabulacją — wtedy wskakuje na wierzch. */
.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; overflow: visible;
  z-index: 100; padding: .7rem 1.1rem; border-radius: var(--uk-r-s); font-weight: 600;
  background: var(--uk-marka); color: #fff; box-shadow: var(--uk-cien-2);
}
/* Cel skoku i cel fokusu po zmianie kroku (`#step`, patrz core.js `focusStepStart`) muszą dać się
   realnie sfokusować — element bez tabindex="-1" nie przyjmie fokusu programowo ani przez skip-link,
   przeglądarka po prostu przewinie stronę, nie przeniesie fokusu. Obwódka tym samym językiem co
   pola i przyciski, żeby użytkownik klawiatury widział, że fokus faktycznie się przeniósł. */
#app:focus, #step:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-marka) 25%, transparent); border-radius: var(--uk-r-s); }
h1 { font-size: 1.55rem; margin: 0 0 .3rem; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 1.2rem; margin-top: 2.2rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin-bottom: .4rem; }
.sub { color: var(--uk-tekst-2); margin-top: 0; font-size: .93rem; }
a { color: var(--uk-marka); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Formularze ─────────────────────────────────────────────────────────── */
label { display: block; font-size: .82rem; font-weight: 600; margin: .9rem 0 .3rem; color: var(--uk-tekst-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], textarea, select {
  width: 100%; box-sizing: border-box; padding: .58rem .7rem;
  border: 1px solid var(--uk-linia); border-radius: var(--uk-r-s);
  font: inherit; background: var(--uk-pow); color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--uk-marka);
  /* Obwódka skupienia jest WYRAŹNA celowo: przy 1156 polach użytkownik musi bez wahania
     wiedzieć, w którym stoi. Delikatna poświata czytelniejsza niż domyślna ramka przeglądarki. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-marka) 18%, transparent);
}
input:disabled, textarea:disabled, select:disabled { background: var(--uk-linia-2); opacity: .7; cursor: not-allowed; }
textarea { min-height: 4.5rem; resize: vertical; }

button {
  font: inherit; font-weight: 600; padding: .55rem 1.1rem; border-radius: var(--uk-r-s);
  border: 1px solid var(--uk-marka); background: var(--uk-marka); color: #fff; cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}
button:hover:not(:disabled) { background: var(--uk-marka-c); border-color: var(--uk-marka-c); box-shadow: var(--uk-cien-2); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-marka) 30%, transparent); }
button.secondary { background: var(--uk-pow); color: var(--uk-marka); border-color: var(--uk-linia); }
button.secondary:hover:not(:disabled) { background: var(--uk-marka-t); border-color: var(--uk-marka); }
button:disabled { opacity: .45; cursor: not-allowed; }

.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ── Moduły uzupełniające (nagłówek wizarda) ────────────────────────────── */
/* Odsyłacze do osobnych ekranów. Nie są krokami, więc nie dostają strzałek — tylko spokojny,
   poziomy pasek. Wcześniej wisiały w akapicie rozdzielone kropkami i czytały się jak spis treści. */
.moduly { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .9rem 0 1.6rem; padding: .55rem .75rem; background: var(--uk-pow);
  border: 1px solid var(--uk-linia); border-radius: var(--uk-r); box-shadow: var(--uk-cien); }
.moduly-tytul { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--uk-tekst-3); margin-right: .3rem; }
.moduly a { font-size: .84rem; font-weight: 500; color: var(--uk-tekst-2);
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--uk-linia); }
.moduly a:hover { text-decoration: none; background: var(--uk-marka-t); color: var(--uk-marka); border-color: var(--uk-marka); }

/* Krok 660 — drogowskaz ścieżki: ten sam pasek, ale moduły niosą stan danych, a JEDEN
   (pierwszy wymagany bez danych) jest wyróżniony jako „teraz idź tam". Moduły spoza ścieżki
   NIE znikają — zwijają się w <details> „Pozostałe moduły". */
.moduly a.mod-dane { border-color: var(--uk-ok, #2e9e5b); }
.moduly a.mod-dane::before { content: "● "; color: var(--uk-ok, #2e9e5b); }
.moduly a.mod-pusty::before { content: "○ "; color: var(--uk-tekst-3); }
.moduly a.mod-teraz { background: var(--uk-marka); color: #fff; border-color: var(--uk-marka); font-weight: 700; }
.moduly a.mod-teraz:hover { background: var(--uk-marka); color: #fff; }
.moduly a.mod-teraz::after { content: " ← teraz idź tam"; font-weight: 400; font-size: .78rem; }
.moduly details { display: inline-block; }
.moduly details summary { font-size: .8rem; color: var(--uk-tekst-3); cursor: pointer;
  padding: .3rem .5rem; list-style: none; }
.moduly details summary:hover { color: var(--uk-marka); }
.moduly details[open] summary { margin-right: .4rem; }
.moduly .mod-liczba { font-size: .74rem; color: inherit; opacity: .75; }

/* ── Kroki raportu — pasek strzałek ─────────────────────────────────────── */
/* Sekwencja Wstęp → 1…5 rysowana jako zazębiające się strzałki: kierunek i pozycja widoczne
   bez czytania numerów. Kształt robi clip-path, więc przyciski NIE mają ramek (ramka nie da się
   przyciąć) — stan niosą wyłącznie tło i kolor tekstu.
   Ujemny margines wsuwa każdy kolejny w wycięcie poprzedniego; pierwszy nie ma wcięcia z lewej. */
.kroki { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 .5rem; }
.kroki .krok {
  --wcięcie: 13px;
  position: relative; border: none; border-radius: 0; font-weight: 600; font-size: .84rem;
  padding: .6rem 1.05rem .6rem calc(1.05rem + var(--wcięcie));
  margin-left: calc(-1 * var(--wcięcie)); background: var(--uk-linia-2); color: var(--uk-tekst-2);
  clip-path: polygon(0 0, calc(100% - var(--wcięcie)) 0, 100% 50%,
                     calc(100% - var(--wcięcie)) 100%, 0 100%, var(--wcięcie) 50%);
  transition: background .15s ease, color .15s ease;
}
.kroki .krok:first-child {
  margin-left: 0; padding-left: 1.05rem; border-radius: var(--uk-r-s) 0 0 var(--uk-r-s);
  clip-path: polygon(0 0, calc(100% - var(--wcięcie)) 0, 100% 50%, calc(100% - var(--wcięcie)) 100%, 0 100%);
}
.kroki .krok:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--wcięcie) 50%);
  border-radius: 0 var(--uk-r-s) var(--uk-r-s) 0; padding-right: 1.2rem;
}
.kroki .krok:hover:not(:disabled) { background: var(--uk-marka-t); color: var(--uk-marka); box-shadow: none; }
/* Krok już przebyty — zielony, bo w całej aplikacji zielony znaczy „za nami / komplet". */
.kroki .krok.zrobiony { background: var(--uk-ok-t); color: var(--uk-ok); }
.kroki .krok.aktywny { background: var(--uk-marka); color: #fff; }
.kroki .krok:disabled { background: var(--uk-linia-2); color: var(--uk-tekst-3); opacity: .55; cursor: not-allowed; }
.kroki .krok:focus-visible { outline: 2px solid var(--uk-marka); outline-offset: -2px; }

/* Narzędzia — NIE kroki, więc świadomie inny kształt: zwykłe pigułki bez strzałek.
   Wchodzi się tu wtedy, kiedy trzeba, nie „po piątym kroku". */
.narzedzia { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.5rem;
  padding-top: .6rem; border-top: 1px solid var(--uk-linia); }
.narzedzia button {
  background: transparent; color: var(--uk-tekst-2); border: 1px solid transparent;
  border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; font-weight: 500;
}
.narzedzia button:hover:not(:disabled) { background: var(--uk-marka-t); color: var(--uk-marka); box-shadow: none; }
.narzedzia button.active { background: var(--uk-marka-t); color: var(--uk-marka); border-color: color-mix(in srgb, var(--uk-marka) 35%, transparent); font-weight: 700; }

@media (max-width: 700px) {
  /* Na wąskim ekranie strzałki łamią się do pionu — wtedy wcięcia tylko szkodzą. */
  .kroki { flex-direction: column; gap: .25rem; }
  .kroki .krok, .kroki .krok:first-child, .kroki .krok:last-child {
    clip-path: none; margin-left: 0; padding-left: 1rem; border-radius: var(--uk-r-s);
    border-left: 3px solid var(--uk-linia);
  }
  .kroki .krok.aktywny { border-left-color: var(--uk-marka-c); }
  .kroki .krok.zrobiony { border-left-color: var(--uk-ok); }
}

/* ── Zakładki (pozostałe ekrany) ────────────────────────────────────────── */
.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--uk-linia); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tabs button {
  background: transparent; color: var(--uk-tekst-2); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: .65rem .95rem; font-weight: 500;
}
.tabs button:hover:not(:disabled) { background: var(--uk-marka-t); color: var(--uk-marka); box-shadow: none; }
.tabs button.active { border-bottom-color: var(--uk-marka); color: var(--uk-marka); font-weight: 700; }

/* ── Karty i bannery ────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--uk-linia); border-radius: var(--uk-r); padding: 1.15rem 1.3rem;
  margin: 1rem 0; background: var(--uk-pow); box-shadow: var(--uk-cien);
}
.banner {
  padding: .8rem 1.05rem; border-radius: var(--uk-r); border: 1px solid var(--uk-linia);
  border-left-width: 3px; margin: 1rem 0; font-size: .92rem; background: var(--uk-pow);
}
.banner.ok { border-color: var(--uk-linia); border-left-color: var(--uk-ok); background: var(--uk-ok-t); }
.banner.warn { border-color: var(--uk-linia); border-left-color: var(--uk-uwaga); background: var(--uk-uwaga-t); }
.banner.err { border-color: var(--uk-linia); border-left-color: var(--uk-blad); background: var(--uk-blad-t); }

/* ── Znaczniki (pill) — kolor za stanem, nie za ozdobą ──────────────────── */
.pill {
  display: inline-block; padding: .12rem .58rem; border-radius: 999px; font-size: .76rem;
  font-weight: 600; border: 1px solid var(--uk-linia); color: var(--uk-tekst-2); background: var(--uk-pow);
}
.pill.required { border-color: color-mix(in srgb, var(--uk-uwaga) 45%, transparent); color: var(--uk-uwaga); background: var(--uk-uwaga-t); }
/* „opcjonalne" ma być wyraźnie stonowane wobec „wymagane" — to informacja, że pracy tu NIE trzeba. */
.pill.optional { border-color: var(--uk-linia); color: var(--uk-tekst-3); }
/* „interpretacja" to NIE wolny wybór — przepis każe rozważyć. Stąd kolor bliższy uwadze niż „opcjonalne". */
.pill.judgement { border-color: color-mix(in srgb, var(--uk-marka) 45%, transparent); color: var(--uk-marka); background: var(--uk-marka-t); }
.optional-basis { border-left: 3px solid var(--uk-linia); padding-left: .6rem; margin: .35rem 0 0; color: var(--uk-tekst-2); }
.optional-basis.judgement-basis { border-left-color: var(--uk-marka); }
.pill.gap { border-color: color-mix(in srgb, var(--uk-blad) 45%, transparent); color: var(--uk-blad); background: var(--uk-blad-t); }
/* Stany przeglądu 15 kategorii Zakresu 3 (krok 40) — te same kolory co bannery, żeby „zielone",
   „pomarańczowe" i „czerwone" znaczyły w całej aplikacji to samo. */
.pill.ok { border-color: color-mix(in srgb, var(--uk-ok) 45%, transparent); color: var(--uk-ok); background: var(--uk-ok-t); }
.pill.warn { border-color: color-mix(in srgb, var(--uk-uwaga) 45%, transparent); color: var(--uk-uwaga); background: var(--uk-uwaga-t); }
.pill.err { border-color: color-mix(in srgb, var(--uk-blad) 45%, transparent); color: var(--uk-blad); background: var(--uk-blad-t); }

/* ── Tabele ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--uk-linia-2); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--uk-tekst-3);
  font-weight: 700; border-bottom: 1px solid var(--uk-linia); }

.muted { color: var(--uk-tekst-3); font-size: .85rem; }
/* Krok 225 — wiersz „etykieta ↔ wartość" i chip tematu istotnego */
.line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--uk-linia-2); font-size: .92rem; }
.tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--uk-linia); font-size: .8rem; color: var(--uk-tekst-2); background: var(--uk-pow); }
.field-inline { display: flex; gap: .5rem; align-items: center; }
.section-title { margin-top: 1.9rem; padding-top: .7rem; border-top: 1px solid var(--uk-linia); }

.help {
  background: var(--uk-marka-t); border: 1px solid color-mix(in srgb, var(--uk-marka) 22%, transparent);
  border-radius: var(--uk-r); padding: .8rem 1.05rem; margin: 0 0 1rem; font-size: .88rem;
}
.help p { margin: .3rem 0; }
.help b { color: var(--uk-marka); }
.hint { font-size: .79rem; color: var(--uk-tekst-3); margin: .35rem 0 .75rem; }
details.scoring { margin-top: .6rem; border-top: 1px solid var(--uk-linia); padding-top: .55rem; }
details.scoring summary { cursor: pointer; font-size: .85rem; color: var(--uk-tekst-2); border-radius: var(--uk-r-s); }
details.scoring summary:hover { color: var(--uk-marka); }
details.scoring summary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-marka) 30%, transparent); }
details.scoring select { margin-bottom: .5rem; }
.suggestion { font-style: italic; color: var(--uk-tekst-2); }
/* Pole wartości datapointu (krok 4): opisowe rośnie z treścią (autogrow w wizard.js),
   startuje kompaktowo; kolumna nie może być zgnieciona przez długie etykiety. */
textarea.value-input { min-height: 2.6rem; overflow: hidden; }
.value-input { min-width: 14rem; }

/* ── Paski postępu ──────────────────────────────────────────────────────── */
/* Pod nagłówkiem każdego działu + zbiorczy panel właściciela. Komplet = zielony. */
.progress { height: 8px; border: none; border-radius: 999px; overflow: hidden;
  background: var(--uk-linia); min-width: 6rem; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--uk-marka);
  transition: width .35s ease; }
.progress.done > span { background: var(--uk-ok); }
.progress-row { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr auto;
  gap: .75rem; align-items: center; margin: .45rem 0; font-size: .88rem; }
.progress-num { color: var(--uk-tekst-3); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.section-progress { grid-template-columns: 2fr auto; margin: -.35rem 0 .75rem; max-width: 28rem; }

/* Ślad po zapisie — patrz /save-state.js. Stan bierze się z danych, nie z licznika czasu, więc
   przeżywa odświeżenie strony. Zielony = karta domknięta, bursztyn = zapisana, ale niepełna,
   czerwony = zapis SIĘ NIE UDAŁ (komunikat zostaje, dopóki nie uda się zapisać). */
.save-badge { font-size: .76rem; font-weight: 600; margin-left: .5rem; white-space: nowrap; }
.save-badge.ok { color: var(--uk-ok); }
.save-badge.partial { color: var(--uk-uwaga); }
.save-badge.err { color: var(--uk-blad); }

/* Pole zapisane: widoczne, ale zamknięte. Kreskowana ramka odróżnia „zamknięte, bo zapisane"
   od „wyłączone, bo niedostępne" (blokada szkoleniowa używa disabled + opacity). */
.saved-locked { background: var(--uk-ok-t); border-style: dashed; border-color: color-mix(in srgb, var(--uk-ok) 35%, transparent); }
button.is-edit { background: transparent; color: var(--uk-tekst-2); border: 1px solid var(--uk-linia); font-weight: 500; }
button.is-edit:hover:not(:disabled) { background: var(--uk-marka-t); color: var(--uk-marka); border-color: var(--uk-marka); }

/* ── Dashboard postępu CSRD (krok 191) ──────────────────────────────────── */
/* Widok zarządczy właściciela: pierścień, KPI, oś pięciu kroków, kafle działów. Każdy element
   = prawdziwa liczba z /api/dashboard, nic ozdobnego. Reużywa .progress i .pill.*. */
.dash191-top { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; margin: 1rem 0; }
.dash191-ring-box { display: flex; align-items: center; gap: 1.1rem; border: 1px solid var(--uk-linia);
  border-radius: var(--uk-r); padding: 1.1rem 1.3rem; min-width: 15rem; background: var(--uk-pow); box-shadow: var(--uk-cien); }
.dash191-ring { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(var(--uk-marka) 0 var(--p, 0%), var(--uk-linia) var(--p, 0%) 100%); }
.dash191-ring > span { width: 62px; height: 62px; border-radius: 50%; background: var(--uk-pow); display: grid;
  place-items: center; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dash191-ring-box .big { font-size: 1.05rem; font-weight: 600; }
.dash191-kpi { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }
.dash191-kpi .box { border: 1px solid var(--uk-linia); border-radius: var(--uk-r); padding: .8rem 1rem;
  background: var(--uk-pow); box-shadow: var(--uk-cien); }
.dash191-kpi .n { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dash191-kpi .l { font-size: .76rem; color: var(--uk-tekst-3); margin-top: .3rem; }
.dash191-kpi .box.alarm .n { color: var(--uk-blad); } .dash191-kpi .box.warn .n { color: var(--uk-uwaga); } .dash191-kpi .box.ok .n { color: var(--uk-ok); }
.dash191-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
@media (max-width: 40rem) { .dash191-steps { grid-template-columns: 1fr 1fr; } }
.dash191-step { display: flex; flex-direction: column; gap: .4rem; }
.dash191-step .hd { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; }
.dash191-step .k { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; color: #fff; flex-shrink: 0; background: var(--uk-tekst-3); }
.dash191-step.done .k { background: var(--uk-ok); } .dash191-step.active .k { background: var(--uk-marka); }
.dash191-step .st { font-size: .74rem; color: var(--uk-tekst-3); }
.dash191-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.dash191-card { border: 1px solid var(--uk-linia); border-radius: var(--uk-r); padding: .95rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem; background: var(--uk-pow); box-shadow: var(--uk-cien); }
.dash191-card.po { border-left: 3px solid var(--uk-blad); }
.dash191-card .glowa { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.dash191-card .dz { font-weight: 700; font-size: .95rem; }
.dash191-card .osoba { font-size: .8rem; color: var(--uk-tekst-3); }
.dash191-card .pod { display: flex; justify-content: space-between; font-size: .78rem; color: var(--uk-tekst-3); }

/* ── Formularze blokowe + kontener wykresu (iteracja 2 redesignu) ───────────────────────────── */
/* Dotąd te reguły żyły w bloku <style> WYŁĄCZNIE w cele.html — jedynym ekranie aplikacji
   z własnym stylem. Skutek uboczny naprawiony przy okazji: dostawcy.js też renderuje
   .field-block, ale ten ekran arkusza nie ładował — formularz alokacji stał nieostylowany. */
.field-block { margin-bottom: 1.1rem; max-width: 30rem; }
.field-block label { display: block; font-weight: 600; margin-bottom: .2rem; }
.field-block input { width: 100%; padding: .35rem .5rem; box-sizing: border-box; }
#chart-box { overflow-x: auto; margin: .75rem 0; }
#chart-box svg { display: block; }

/* ── KROK 651: kafelki stanu konta w panelu operatora ────────────────────────────────────────
   Powód: ekran firmy renderował SZEŚĆ tabel zawsze, także pustych („brak oceny DMA"). Konto bez
   danych wyglądało tak samo obszernie jak konto z pracą, tylko nic nie mówiło. Kafelek niesie tę
   samą informację w jednej linijce i daje się przeczytać z odległości.

   Kolor: zielony = JEST TREŚĆ, nie „dobrze". Świeże konto ma być szare, nie czerwone — brak
   danych na koncie założonym wczoraj to stan normalny. Czerwień zostaje dla rzeczy wymagających
   reakcji, żeby nie spowszedniała (ta sama zasada co przy wagach w dzienniku operacji). */
.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem;
  margin: 1rem 0 1.4rem;
}
.kafel {
  background: var(--uk-pow);
  border: 1px solid var(--uk-linia);
  border-left: 4px solid var(--uk-linia);
  border-radius: var(--uk-r-s);
  padding: .8rem .95rem;
  box-shadow: var(--uk-cien);
}
.kafel .k-etykieta {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--uk-tekst-3); font-weight: 600;
}
.kafel .k-liczba { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin: .15rem 0 .1rem; }
.kafel .k-slowo  { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: .3rem 0 .1rem; }
.kafel .k-pod    { font-size: .8rem; color: var(--uk-tekst-2); line-height: 1.35; }

/* Wypełnione — jedyny stan „na zielono". */
.kafel.pelny { border-left-color: var(--uk-ok); background: var(--uk-ok-t); }
.kafel.pelny .k-liczba, .kafel.pelny .k-slowo { color: var(--uk-ok); }
/* Pusto — celowo BEZ koloru: to nie jest błąd, tylko brak danych. */
.kafel.pusty .k-liczba, .kafel.pusty .k-slowo { color: var(--uk-tekst-3); }
.kafel.uwaga { border-left-color: var(--uk-uwaga); background: var(--uk-uwaga-t); }
.kafel.uwaga .k-liczba, .kafel.uwaga .k-slowo { color: var(--uk-uwaga); }
.kafel.blad  { border-left-color: var(--uk-blad); background: var(--uk-blad-t); }
.kafel.blad .k-liczba, .kafel.blad .k-slowo { color: var(--uk-blad); }

/* Sekcja szczegółowa: składana, domyślnie zamknięta przy dużych zbiorach. Nagłówek zachowuje się
   jak przycisk (kursor, focus), bo nim jest — GOV.UK „Details”. */
.zwijka { border-top: 1px solid var(--uk-linia); margin-top: .4rem; }
.zwijka > summary {
  cursor: pointer; padding: .7rem .2rem; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.zwijka > summary::-webkit-details-marker { display: none; }
.zwijka > summary::before { content: "▸"; color: var(--uk-tekst-3); font-size: .9em; }
.zwijka[open] > summary::before { content: "▾"; }
.zwijka > summary:focus-visible { outline: 3px solid var(--uk-marka); outline-offset: 2px; }
.zwijka > summary .licznik { color: var(--uk-tekst-3); font-weight: 400; font-size: .9rem; }
.zwijka > div { padding: 0 .2rem .9rem; }

/* Pole z błędem walidacji — obwódka w tym samym kolorze co banner .err, żeby użytkownik
   powiązał komunikat z konkretnym polem, a nie tylko przeczytał go na górze formularza. */
.pole-blad { border-color: var(--uk-blad) !important; box-shadow: 0 0 0 3px var(--uk-blad-t); }

/* Deska „co dalej" (krok 700) — stoi nad zakładkami na każdym ekranie wizardu, więc ma czytać się
   jako pasek orientacyjny, nie jako kolejna karta z treścią: ciaśniejsza i z akcentem marki. */
.card.deska { padding: .75rem 1rem; border-left: 4px solid var(--uk-marka); }