/* Kolory i kroje wspolne dla panelu i strony publicznej (static/strona.css).
   Tlo prawie czarne z chlodnym odcieniem, jeden akcent - niebieski firmy -
   i turkus z logo uzywany wylacznie w gradientach. Powierzchnie roznia sie
   od tla o kilka stopni jasnosci, a granice wyznaczaja cienkie obramowania,
   nie cienie. */
:root {
  color-scheme: dark;
  --tlo: #0a0b0d;
  --tlo-karta: #121418;
  --tlo-uniesione: #181b20;
  --obramowanie: #24282f;
  --obramowanie-mocne: #333843;
  --tekst: #eef0f4;
  --tekst-slaby: #99a1ad;
  --tekst-cichy: #6c737e;
  --akcent: #2f9bff;
  --akcent-jasny: #6db8ff;
  --turkus: #05fbe2;
  --zielony: #3ecf8e;
  --czerwony: #f5565b;
  --zolty: #e3a53a;
  /* Kroje systemowe zamiast pobieranych: strona laduje sie bez dodatkowych
     plikow, a polityka tresci (panel/bezpieczenstwo.py) i tak dopuszcza
     czcionki wylacznie z wlasnego serwera. Windows 11 dostaje Segoe UI
     Variable, macOS - San Francisco. */
  --kroj: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --kroj-naglowkow: "Inter Display", "Segoe UI Variable Display", "Segoe UI", system-ui,
                    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.6 var(--kroj);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--kroj-naglowkow); }
::selection { background: color-mix(in srgb, var(--akcent) 40%, transparent); }
/* Widoczny obrys przy przechodzeniu klawiatura - kliknieciem mysza go nie ma. */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* --- pasek górny --- */
.pasek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  /* Pasek zostaje u gory przy przewijaniu; tresc przeswituje przez niego
     rozmyta. z-index ponizej okien (wyspa zaproszenia, okna dialogowe). */
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--tlo) 80%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--obramowanie);
}
.marka { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tekst); }
.marka img { display: block; flex: 0 0 auto; }
.marka strong { font-size: 16px; }
/* Selektor celuje w span W SRODKU zewnetrznego spana - bez ">" trafialby
   takze w ten opakowujacy i przesuwal cale logo. */
.marka > span > span { color: var(--tekst-slaby); margin-left: 10px; font-size: 13px; }
.pasek-prawa { display: flex; align-items: center; gap: 16px; }
.pasek-prawa .email { color: var(--tekst-slaby); font-size: 13px; }

main { max-width: 900px; margin: 0 auto; padding: 36px 28px 80px; }

h1 { font-size: 30px; margin: 0 0 6px; font-weight: 650; letter-spacing: -.022em; }
h2 { font-size: 17px; margin: 36px 0 12px; color: var(--tekst-slaby); font-weight: 600; letter-spacing: -.01em; }
.podtytul { color: var(--tekst-slaby); margin: 0 0 26px; }
.powrot { color: var(--tekst-slaby); text-decoration: none; font-size: 14px; }
.powrot:hover { color: var(--akcent); }

/* --- przyciski --- */
.przycisk {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--obramowanie-mocne);
  border-radius: 8px;
  background: var(--tlo-uniesione);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: var(--tekst);
  text-decoration: none;
  cursor: pointer;
  /* Ta sama klasa trafia na <a> i na <button>. Przycisk formularza NIE dziedziczy
     kroju ani wysokosci linii ze strony (przegladarka daje mu wlasne), przez co
     "Tak, usun" wychodzil nizszy od stojacego obok linku "Anuluj". */
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  transition: background .15s ease, border-color .15s ease, filter .15s ease;
}
/* Musi stac PRZED wariantami (.glowny, .niebezpieczny): ta sama waga
   selektora, wiec pozniejszy wariant wygrywa i przycisk glowny nie szarzeje
   po najechaniu. */
.przycisk:hover { background: #1f2329; border-color: #434956; }
.przycisk.glowny {
  background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .35);
}
.przycisk.glowny:hover { filter: brightness(1.08); }
button.link {
  background: none; border: none; color: var(--tekst-slaby);
  cursor: pointer; font-size: 14px; padding: 0;
}
button.link:hover { color: var(--akcent); }

/* --- lista dokumentów --- */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista a {
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  background: var(--tlo-karta);
  border: 1px solid var(--obramowanie);
  border-radius: 10px;
  text-decoration: none;
  color: var(--tekst);
}
.lista a:hover { border-color: var(--akcent); }
.lista .nazwa { font-weight: 600; }
.lista .typ { color: var(--tekst-slaby); font-size: 13px; }
.lista .meta { color: var(--tekst-slaby); font-size: 12px; }
.pusto { color: var(--tekst-slaby); font-style: italic; }

.stan-gotowy { color: var(--zielony); }
.stan-w_trakcie { color: var(--zolty); }
.stan-blad { color: var(--czerwony); }

/* --- formularze --- */
label { display: block; margin: 18px 0 6px; font-size: 14px; color: var(--tekst-slaby); }
input[type=text], input[type=email], input[type=tel], input[type=url],
input:not([type]), textarea, select {
  width: 100%;
  padding: 11px 13px;
  background: var(--tlo);
  border: 1px solid var(--obramowanie);
  border-radius: 8px;
  color: var(--tekst);
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
}
form .przycisk { margin-top: 20px; }

/* --- wyszukiwarka typu przedsięwzięcia --- */
/* Lista rozwija sie NAD dalsza trescia strony (jak lista rozwijana), zamiast
   rozpychac uklad przy kazdym kliknieciu w pole. */
.wyszukiwarka-typow { position: relative; }
.rozwijana-typow {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  padding: 4px;
  background: var(--tlo);
  border: 1px solid var(--obramowanie);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.lista-typow { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.rozwijana-typow .brak-typow { margin: 8px 10px; }
.lista-typow li { border-radius: 6px; }
.lista-typow li a { display: block; padding: 8px 11px; color: inherit; text-decoration: none; }
.lista-typow li[hidden] { display: none; }
.lista-typow li.aktywna { background: var(--tlo-karta); color: var(--akcent); }
.brak-typow { color: var(--tekst-slaby); font-style: italic; margin: 10px 2px 0; }

/* --- komunikaty --- */
.komunikaty { max-width: 900px; margin: 20px auto -12px; padding: 0 28px; }
.komunikat {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 10px;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
}
.komunikat.error { border-color: var(--czerwony); }
.komunikat {
  display: flex; align-items: center; gap: 12px; overflow: hidden;
  transition: transform .4s ease, opacity .4s ease, height .4s ease,
              margin .4s ease, padding .4s ease, border-width .4s ease;
}
.komunikat-tresc { flex: 1; }
.komunikat-zamknij {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--tekst-slaby); font-size: 22px; line-height: 1;
  padding: 0 6px 2px; border-radius: 6px;
}
.komunikat-zamknij:hover {
  color: var(--tekst); background: color-mix(in srgb, var(--tekst) 10%, transparent);
}
/* Wyjezdza w gore i jednoczesnie zwija wysokosc, zeby tresc pod spodem
   podjechala plynnie, a nie skoczyla po usunieciu elementu.
   !important przebija wysokosc ustawiona w stylu elementu tuz przed animacja. */
.komunikat.komunikat-znika {
  transform: translateY(-140%); opacity: 0;
  height: 0 !important; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
  border-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .komunikat { transition: opacity .2s ease, height .2s ease; }
  .komunikat.komunikat-znika { transform: none; }
}
.komunikat.success { border-color: var(--zielony); }

/* --- pozostale ekrany allauth (zarzadzanie adresami, wylogowanie) ---
   Te strony maja normalny pasek panelu, bo uzytkownik jest juz zalogowany. */
.waskie { max-width: 440px; margin: 24px auto; }
.waskie h1 { font-size: 24px; }
.waskie a { color: var(--akcent); }
.waskie ul { list-style: none; padding: 0; }
.waskie .helptext { color: var(--tekst-slaby); font-size: 14px; }
.waskie button, .waskie input[type=submit] {
  margin-top: 18px; padding: 11px 20px;
  background: var(--akcent); border: 1px solid var(--akcent);
  border-radius: 8px; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.waskie button.link { background: none; border: none; color: var(--tekst-slaby); padding: 0; font-weight: 400; }

/* --- ekrany wejsciowe: logowanie, kod z maila, rejestracja --- */
body.wejscie {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
/* Poswiata w tle - jedyny element dekoracyjny; pointer-events none, zeby
   nigdy nie przechwycila kliknięcia w formularz pod spodem. */
.wejscie-tlo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 50% -8%, color-mix(in srgb, var(--akcent) 20%, transparent), transparent 70%),
    radial-gradient(560px 380px at 88% 108%, color-mix(in srgb, var(--zielony) 11%, transparent), transparent 70%);
}
.wejscie-srodek {
  position: relative; z-index: 1;
  width: 100%; max-width: 428px;
  margin: 0; padding: 0;
}

.wejscie-marka {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; color: var(--tekst);
  margin-bottom: 28px; justify-content: center;
}
/* Logo stoi samo, bez kwadratu w tle - ma wlasny ksztalt i kolor,
   a ramka tylko by z nim konkurowala. */
.wejscie-znak { display: block; width: 44px; height: 44px; flex: 0 0 44px; }
.wejscie-marka strong { display: block; font-size: 17px; letter-spacing: -.01em; }
.wejscie-marka em {
  display: block; font-style: normal;
  color: var(--tekst-slaby); font-size: 12.5px; margin-top: 1px;
}

.karta-wejscia {
  background: var(--tlo-karta);
  border: 1px solid var(--obramowanie);
  border-radius: 18px;
  padding: 34px 32px 30px;
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, .75);
}
.karta-wejscia h1 {
  font-size: 25px; letter-spacing: -.02em; margin: 0 0 8px; text-align: center;
}
.wejscie-opis {
  color: var(--tekst-slaby); font-size: 14px; line-height: 1.55;
  margin: 0 0 26px; text-align: center;
}
.wejscie-opis strong { color: var(--tekst); font-weight: 600; }

.wejscie-ikona {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; margin: 0 auto 18px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--akcent) 26%, transparent);
}

.karta-wejscia form { margin: 0; }
.karta-wejscia .pole { margin-bottom: 0; }
.karta-wejscia input[type=email], .karta-wejscia input[type=text] { width: 100%; }

/* Kod przepisywany z maila - duze znaki i odstepy, zeby latwo bylo
   sprawdzic wzrokiem, czy przepisalo sie poprawnie. */
input.pole-kod {
  text-align: center; font-size: 24px; font-weight: 600;
  letter-spacing: .18em; text-indent: .18em; padding: 15px 13px;
  text-transform: uppercase;
}
input.pole-kod::placeholder { letter-spacing: .12em; font-size: 18px; }

.przycisk.szeroki { width: 100%; text-align: center; }
.karta-wejscia .przycisk.glowny { margin-top: 22px; padding: 12px 20px; }

.rozdzielnik {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 18px; color: var(--tekst-slaby); font-size: 12.5px;
}
.rozdzielnik::before, .rozdzielnik::after {
  content: ""; flex: 1; height: 1px; background: var(--obramowanie);
}

.przycisk.dostawca {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; font-weight: 500;
}
.przycisk.dostawca:hover { border-color: var(--tekst-slaby); }

.wejscie-akcje {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 20px;
}
.wejscie-akcje .powrot, .wejscie-akcje .link { font-size: 13.5px; }

.wejscie-dopisek {
  margin: 22px 0 0; text-align: center;
  color: var(--tekst-slaby); font-size: 13.5px;
}
.wejscie-dopisek a, .karta-wejscia a { color: var(--akcent); }

.wejscie-stopka {
  margin: 22px 0 0; text-align: center; line-height: 1.55;
  color: var(--tekst-slaby); font-size: 12.5px;
}
.wejscie-srodek .komunikaty { max-width: none; margin: 0; padding: 0; }
.wejscie-srodek .komunikat { margin-bottom: 16px; }

/* --- kroki formularza --- */
.krok {
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 12px; padding: 22px 24px; margin-bottom: 16px;
}
.krok-naglowek { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.krok-naglowek h2 { margin: 0; font-size: 18px; color: var(--tekst); }
.krok-naglowek .podtytul { margin: 2px 0 0; }
.numer {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--akcent); color: #fff; font-weight: 700;
  display: grid; place-items: center;
}

/* --- wybór dokumentów (krok pierwszy i strona zlecenia) --- */
.wybor-dokumentow { display: grid; gap: 10px; margin: 14px 0 4px; }
.wybor-dokumentow .dokument {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--obramowanie); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; margin: 0;
}
.wybor-dokumentow .dokument:hover { border-color: var(--akcent); }
/* Zaznaczony dokument ma byc widoczny jednym spojrzeniem - bez tego roznica
   miedzy "wybrane" a "niewybrane" to sam kwadracik pola wyboru. */
.wybor-dokumentow .dokument:has(input:checked) { border-color: var(--akcent); }
.wybor-dokumentow .dokument:has(input:disabled) { opacity: .75; cursor: default; }
.wybor-dokumentow input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--akcent); }
.wybor-dokumentow .dokument > span { display: grid; gap: 3px; }
.wybor-dokumentow .wskazowka { margin: 0; }

/* --- pola formularza --- */
.pole { margin-bottom: 20px; }
.pole label { margin-top: 0; color: var(--tekst); font-weight: 500; }
.pole-puste label::after { content: " •"; color: var(--zolty); }
.wskazowka { color: var(--tekst-slaby); font-size: 13px; margin: 6px 0 0; }
textarea { resize: vertical; min-height: 90px; }
.pole .jednostka { color: var(--tekst-slaby); font-weight: 400; }

/* --- tabela wierszy w formularzu (np. grupy zwierząt w raporcie ROOŚ) --- */
.tabela-przewijanie { overflow-x: auto; }
.tabela-wierszy { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabela-wierszy th {
  text-align: left; font-size: 12.5px; font-weight: 500; color: var(--tekst-slaby);
  padding: 0 6px 6px; vertical-align: bottom;
}
.tabela-wierszy td { padding: 3px; vertical-align: top; }
.tabela-wierszy td:last-child { width: 28px; text-align: center; }
.tabela-wierszy input, .tabela-wierszy select { width: 100%; min-width: 70px; margin: 0; }
.tabela-wierszy td:first-child select { min-width: 200px; }
.tabela-pola .dodaj-wiersz { margin-top: 8px; }
button.link.usun-wiersz { color: var(--tekst-slaby); font-size: 20px; line-height: 1; padding: 6px 4px; }
button.link.usun-wiersz:hover { color: var(--czerwony); }

/* --- pasek postępu --- */
.postep { margin: 22px 0 28px; }
.postep-pasek {
  height: 6px; background: var(--tlo-karta); border-radius: 3px;
  overflow: hidden; margin-bottom: 8px; border: 1px solid var(--obramowanie);
}
.postep-pasek div { height: 100%; background: var(--akcent); }
.postep span { color: var(--tekst-slaby); font-size: 13px; }

/* --- usuwanie rozpoczętego dokumentu --- */
.lista .wiersz-z-akcja { position: relative; }
/* Kosz LEZY NA kafelku, ktory caly jest odnosnikiem do edycji. Bez wyniesienia
   go ponad (z-index) klikniecie w kosz otwieraloby dokument zamiast usuwania. */
.lista .usun-wiersz {
  /* Wyrownanie OPTYCZNE, nie geometryczne. Srodek wiersza z nazwa i odznaka
     stanu wypada ~30,6px od gory kafelka. Przy top 15px srodek kosza pokrywal
     sie z nim co do piksela, a mimo to kosz wygladal na za nisko - ciezar
     ikony lezy na dole (szeroki korpus, u gory tylko cienka pokrywka).
     Przy top 12px wygladal na za wysoko. 13,5px to srodek miedzy obiema
     ocenami: kosz jest geometrycznie ~1px wyzej niz odznaka. */
  position: absolute; top: 13.5px; right: 12px; z-index: 1;
  /* padding i gap zerujemy wprost: kosz jest linkiem, wiec przejmowal odstep
     16px 18px z ".lista a" - kwadrat rozrastal sie do 38x34, a ikonka
     lądowała w prawym dolnym rogu zamiast na srodku. */
  padding: 0; gap: 0;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; color: var(--tekst-slaby);
  border: 1px solid transparent; text-decoration: none;
}
.lista .usun-wiersz:hover {
  color: var(--czerwony);
  border-color: color-mix(in srgb, var(--czerwony) 45%, transparent);
  background: color-mix(in srgb, var(--czerwony) 12%, transparent);
}
/* Miejsce na kosz, zeby dluga nazwa nie wchodzila pod niego. */
.lista .wiersz-z-akcja > a:first-child { padding-right: 56px; }

.rezygnacja { color: var(--tekst-slaby); font-size: 13.5px; margin: 26px 0 0; }
.rezygnacja a { color: var(--tekst-slaby); }
.rezygnacja a:hover { color: var(--czerwony); }

.potwierdzenie { max-width: 470px; margin: 20px auto; text-align: center; }
.potwierdzenie-ikona {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 15px; margin-bottom: 18px; color: var(--czerwony);
  background: color-mix(in srgb, var(--czerwony) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--czerwony) 26%, transparent);
}
.potwierdzenie h1 { font-size: 25px; margin-bottom: 14px; }
.potwierdzenie .podtytul { line-height: 1.7; margin-bottom: 20px; }
.potwierdzenie .podtytul strong { color: var(--tekst); font-size: 16px; }
.ostrzezenie {
  background: color-mix(in srgb, var(--czerwony) 9%, var(--tlo-karta));
  border: 1px solid color-mix(in srgb, var(--czerwony) 32%, transparent);
  border-radius: 10px; padding: 13px 16px; margin: 0 0 26px; font-size: 14px;
}
.potwierdzenie-akcje {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.potwierdzenie-akcje form { margin: 0; }
.potwierdzenie-akcje .przycisk { margin-top: 0; }
.przycisk.niebezpieczny {
  background: var(--czerwony); border-color: var(--czerwony);
  color: #fff; font-weight: 600;
}
.przycisk.niebezpieczny:hover { filter: brightness(1.08); }

/* --- ścieżka powrotu (okruszki) --- */
.okruszki {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 28px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 13px; color: var(--tekst-slaby);
}
.okruszki a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tekst-slaby); text-decoration: none;
  padding: 4px 9px; margin: 0 -3px;
  border-radius: 7px; border: 1px solid transparent;
}
.okruszki a:hover {
  color: var(--akcent);
  border-color: var(--obramowanie);
  background: var(--tlo-karta);
}
.okruszki [aria-current=page] { color: var(--tekst); font-weight: 600; padding: 4px 6px; }
.okruszki-strzalka { color: var(--obramowanie); }

/* Ścieżka przejmuje rolę powrotu, więc główny nagłówek nie odsuwa się już
   od góry tak mocno jak na stronach bez niej. */
.okruszki + main { padding-top: 18px; }

/* --- ikona powrotu na stronę główną --- */
.domek {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--tekst-slaby); border: 1px solid transparent;
}
.domek:hover { color: var(--akcent); border-color: var(--obramowanie); }

/* --- rozdroże (strona główna) --- */
.rozdroze { position: relative; text-align: center; padding: 36px 0 0; }
/* Poswiata i siatka jak na stronie publicznej - panel i strona maja wygladac
   jak jedna calosc. Warstwa nie wychodzi poza szerokosc tresci (left/right 0),
   wiec na telefonie nie dodaje przewijania w bok. */
.rozdroze::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: -60px; height: 460px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 20%, rgba(47, 155, 255, .16), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px) center top / 56px 56px,
    linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px) center top / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 25%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 25%, #000 25%, transparent 75%);
}
.rozdroze-ikona {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 18px; margin-bottom: 22px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--akcent) 28%, transparent);
}
.rozdroze h1 { font-size: 36px; letter-spacing: -.03em; margin: 0 0 8px; }
.rozdroze > .podtytul { margin: 0 0 26px; font-size: 15px; }
/* Najczestsza czynnosc w panelu - jednym kliknieciem, bez szukania kafelka. */
.przycisk.rozdroze-akcja {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 44px;
}

.kafelki {
  display: grid; gap: 20px; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

/* Cały kafelek jest odnośnikiem - większy cel kliknięcia niż sam przycisk
   i nie trzeba celować w tekst. */
.kafelek {
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 16px; padding: 28px 26px 24px;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--tekst);
  transition: border-color .15s, transform .15s, background .15s;
}
.kafelek:hover {
  border-color: color-mix(in srgb, var(--akcent) 55%, var(--obramowanie));
  background: color-mix(in srgb, var(--akcent) 5%, var(--tlo-karta));
  transform: translateY(-2px);
}
.kafelek-ikona {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 13px; margin-bottom: 18px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 13%, transparent);
}
.kafelek h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.kafelek p { color: var(--tekst-slaby); margin: 0 0 22px; font-size: 14px; line-height: 1.5; }
.kafelek-akcja {
  margin-top: auto; color: var(--akcent); font-weight: 600; font-size: 14px;
  display: inline-flex; gap: 7px; align-items: center;
}
.kafelek:hover .kafelek-akcja span { transform: translateX(3px); }
.kafelek-akcja span { transition: transform .15s; }

/* --- wpis listy bez odnośnika (pracownicy) --- */
.lista .wpis {
  display: grid; gap: 3px; padding: 16px 18px;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 10px;
}

/* --- autozapis formularza zlecenia --- */
.autozapis { color: var(--tekst-slaby); font-size: 13px; }

/* --- pusty stan --- */
.pusto-blok {
  text-align: center; max-width: 460px; margin: 34px auto 0;
  padding: 40px 30px 36px;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 16px;
}
.pusto-ikona {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 15px; margin-bottom: 18px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--akcent) 26%, transparent);
}
.pusto-blok h2 { margin: 0 0 8px; font-size: 18px; color: var(--tekst); }
.pusto-blok p {
  color: var(--tekst-slaby); font-size: 14px; line-height: 1.6; margin: 0 0 22px;
}
.pusto-blok .przycisk { margin-top: 0; }

/* Krotka nota, gdy pusta jest tylko JEDNA z sekcji - druga niesie tresc,
   wiec duzy blok bylby tu halasem. */
.pusto-linia {
  color: var(--tekst-slaby); font-size: 14px; margin: 0;
  padding: 16px 18px; border: 1px dashed var(--obramowanie); border-radius: 10px;
}

/* --- naglowek sekcji z licznikiem --- */
.sekcja-listy { margin-top: 34px; }
.sekcja-naglowek { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sekcja-naglowek h2 { margin: 0; }
.licznik {
  background: var(--obramowanie); color: var(--tekst-slaby);
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}

/* --- wiersz listy dokumentów --- */
.wpis-gora { display: flex; align-items: center; gap: 10px; }
.wpis-gora .nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pasek postepu przy szkicu - sam procent w tekscie ginie, kreska pokazuje
   od razu, ktory dokument jest bliski konca. */
.postep-maly {
  display: block; height: 4px; border-radius: 2px; margin: 8px 0 2px;
  background: var(--tlo); overflow: hidden;
}
.postep-maly span { display: block; height: 100%; background: var(--akcent); }

.odznaka.mala.stan-gotowy {
  background: color-mix(in srgb, var(--zielony) 20%, transparent); color: var(--zielony);
}
.odznaka.mala.stan-w_trakcie {
  background: color-mix(in srgb, var(--zolty) 20%, transparent); color: var(--zolty);
}
.odznaka.mala.stan-blad {
  background: color-mix(in srgb, var(--czerwony) 20%, transparent); color: var(--czerwony);
}

/* --- lista plików --- */
.naglowek-z-akcja {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 10px;
}
.wpis.plik { display: flex; align-items: center; gap: 15px; }
.plik-ikona {
  display: grid; place-items: center; flex: 0 0 40px; height: 40px;
  border-radius: 10px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
}
/* min-width:0 pozwala dlugiej nazwie sie skrocic zamiast rozpychac wiersz
   i spychac przycisk poza kafelek. */
.plik-tresc { flex: 1; min-width: 0; display: grid; gap: 3px; }
.plik-tresc .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpis.plik .przycisk { flex: 0 0 auto; margin-top: 0; }
.zmiana-nazwy { display: flex; gap: 8px; margin: 0; }
.zmiana-nazwy input { min-width: 260px; }
.zmiana-nazwy .stan-zapisu { align-self: center; color: var(--tekst-slaby); font-size: 13px; }
/* Kosz przy gotowym dokumencie. Inaczej niz przy niedokonczonych dokumentach:
   tam kafelek jest odnosnikiem i kosz lezy NA nim, tutaj wiersz jest ukladem
   poziomym, wiec kosz stoi w nim normalnie, jako kolejny element. */
.wpis.plik .usun-plik {
  /* padding i gap zerujemy wprost - ta sama pulapka co przy ".usun-wiersz":
     kosz jest linkiem wewnatrz ".lista", wiec przejmowal odstep 16px 18px.
     Kwadrat rozrastal sie do 38x34, a ikonka ladowala 8,5px ponizej srodka. */
  padding: 0; gap: 0;
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; color: var(--tekst-slaby);
  border: 1px solid transparent; text-decoration: none;
}
.wpis.plik .usun-plik:hover {
  color: var(--czerwony);
  border-color: color-mix(in srgb, var(--czerwony) 45%, transparent);
  background: color-mix(in srgb, var(--czerwony) 12%, transparent);
}
.zmiana-nazwy .przycisk { margin-top: 0; padding: 8px 14px; }

/* --- płatności --- */
/* Atrybut hidden przegrywa z display ustawionym klasa (np. .przycisk), wiec
   bez tej reguly ukryty przycisk "Zaplac" byl widoczny, zanim klient wybral
   sposob platnosci. Ograniczone do platnosci, zeby nie zmieniac reszty stron. */
.okno-platnosci [hidden], .metoda-platnosci [hidden] { display: none !important; }
.okno-platnosci {
  max-width: 520px; width: calc(100% - 40px);
  max-height: calc(100vh - 60px); overflow-x: hidden; overflow-y: auto;
  padding: 28px 30px 26px; border-radius: 16px;
  background: var(--tlo-karta); color: var(--tekst);
  border: 1px solid var(--obramowanie);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .8);
}
.okno-platnosci::backdrop { background: rgba(3, 6, 10, .72); }
.okno-platnosci h2 { margin: 0 0 16px; font-size: 19px; color: var(--tekst); }
.okno-platnosci p { color: var(--tekst-slaby); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.okno-platnosci p strong { color: var(--tekst); }
.rachunek { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 14px; }
.rachunek td, .rachunek th { padding: 9px 0; border-bottom: 1px solid var(--obramowanie); text-align: left; }
.rachunek th { font-size: 15px; color: var(--tekst); border-bottom: none; padding-top: 12px; }
.rachunek .do-prawej { text-align: right; white-space: nowrap; padding-left: 16px; }
.sposoby-platnosci { display: grid; gap: 10px; margin: 18px 0 4px; }
.sposob {
  display: grid; gap: 3px; text-align: left; width: 100%;
  padding: 14px 16px; border-radius: 10px; cursor: pointer;
  background: var(--tlo); color: var(--tekst); border: 1px solid var(--obramowanie);
  font: inherit; text-decoration: none;
}
.sposob:hover { border-color: var(--akcent); }
.sposob .wskazowka { margin: 0; }
.formularz-platnosci { margin: 18px 0 6px; }
.komunikat-platnosci { color: var(--tekst-slaby); font-size: 14px; margin: 12px 0 0; }
.komunikat-platnosci.blad { color: var(--czerwony); }
.wskazowka.bezpieczenstwo { margin-top: 16px; font-size: 12px; }

.metoda-platnosci .zapisana-karta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 16px; margin: 6px 0 10px;
  border: 1px solid var(--obramowanie); border-radius: 10px;
}
.metoda-platnosci .zapisana-karta form { margin: 0; }
.metoda-platnosci .zapisana-karta .przycisk { margin-top: 0; }
.metoda-platnosci .zapisana-karta .wskazowka { display: block; margin: 2px 0 0; }
.dodawanie-karty { margin-top: 18px; }
.dodawanie-karty .zgoda {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px;
  color: var(--tekst); font-size: 14px; line-height: 1.5;
}
.dodawanie-karty .zgoda input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--akcent); }
/* Zgoda w oknie platnosci - bez niej przyciski zaplaty zostaja wylaczone. */
.okno-platnosci .zgoda-rozpoczecie {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
  padding: 12px 14px; border: 1px solid var(--obramowanie); border-radius: 10px;
  color: var(--tekst); font-size: 13.5px; line-height: 1.55; cursor: pointer;
}
.okno-platnosci .zgoda-rozpoczecie input {
  width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--akcent);
}
.okno-platnosci .przycisk[disabled], .okno-platnosci .sposob[disabled] {
  opacity: .5; cursor: not-allowed;
}
.dodawanie-karty .przycisk { margin-top: 12px; }
.oczekujace-platnosci { margin-top: 26px; }
.oczekujace-platnosci h3 { margin: 0 0 6px; font-size: 16px; }
.oczekujace-platnosci ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.oczekujace-platnosci li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--obramowanie); border-radius: 10px;
}
.oczekujace-platnosci li > span:first-child { flex: 1; min-width: 200px; display: grid; }
.oczekujace-platnosci .kwota { font-weight: 600; white-space: nowrap; }
.oczekujace-platnosci .przycisk { margin-top: 0; }

/* --- karta pracownika --- */
.kafle-statystyk {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* Kafelek statystyki na tej stronie stoi w siatce, wiec nie narzuca sobie
   szerokosci ani marginesu - robi to siatka. */
.kafle-statystyk .kafelek.statystyka { max-width: none; margin: 0; }
.kafle-statystyk .kafelek.statystyka strong { font-size: 24px; }
.kafle-statystyk .wskazowka { margin-top: 6px; }
/* Odznaka domyslnie jest niebieska z bialym napisem, wiec sam kolor liter
   by tu nie wystarczyl - trzeba przestawic takze tlo. */
.odznaka.obecny {
  background: color-mix(in srgb, var(--zielony) 20%, transparent); color: var(--zielony);
}
.odznaka.nieobecny { background: var(--obramowanie); color: var(--tekst-slaby); }

/* Wykres dokumentow dzien po dniu. Slupki sa elementami, nie obrazkiem:
   skaluja sie z szerokoscia strony i nie wymagaja zadnej biblioteki. */
.wykres {
  display: flex; align-items: flex-end; gap: 3px;
  height: 160px; margin-top: 18px;
  padding-bottom: 18px; /* miejsce na numery dni pod slupkami */
}
.wykres .slupek {
  flex: 1 1 0; height: 100%; position: relative;
  display: flex; align-items: flex-end; min-width: 0;
}
.wykres .slupek > span {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: var(--akcent); min-height: 2px;
}
/* Dzien bez dokumentow ma zostac widoczny jako kreska podstawy - inaczej
   w wykresie robia sie dziury i nie widac, ze doba w ogole byla. */
.wykres .slupek.pusty > span { background: var(--obramowanie); }
.wykres .slupek.dzis > span { background: var(--zielony); }
.wykres .slupek i {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 11px; color: var(--tekst-slaby);
}

/* --- zarządzanie pracownikami --- */
.odznaka {
  background: var(--akcent); color: #fff; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.odznaka.mala { background: var(--obramowanie); color: var(--tekst-slaby); font-size: 12px; padding: 4px 10px; }
.kafelek.statystyka { display: block; margin-bottom: 20px; max-width: 340px; }
.kafelek.statystyka strong { font-size: 30px; display: block; margin-top: 4px; }
.dodawanie { display: flex; gap: 10px; margin: 16px 0; }
.dodawanie input { flex: 1; }
.dodawanie .przycisk { margin-top: 0; white-space: nowrap; }
.tabela { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tabela th {
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tekst-slaby);
  padding: 10px 12px; border-bottom: 1px solid var(--obramowanie);
}
.tabela td { padding: 14px 12px; border-bottom: 1px solid var(--obramowanie); vertical-align: middle; }
.tabela .nazwa { display: block; }
.tabela a.nazwa, .tabela a.adres { color: var(--tekst); text-decoration: none; }
.tabela a.nazwa:hover, .tabela a.adres:hover { color: var(--akcent); text-decoration: underline; }
.tabela a.nazwa { font-weight: 600; }
.tabela .meta { display: block; color: var(--tekst-slaby); font-size: 12px; }
.tabela .do-prawej { text-align: right; }
.tabela form { display: inline; margin: 0; }
.tabela tr.oczekujace .nazwa { color: var(--tekst-slaby); }
button.link.usun { color: var(--czerwony); font-size: 20px; line-height: 1; }
button.link.usun:hover { color: #ff8a80; }

/* --- sekcja wysyłki --- */
.krok.wysylka {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.krok.wysylka h2 { margin: 0 0 4px; }
.krok.wysylka .podtytul { margin: 0; }
.krok.wysylka form { margin: 0; }
.krok.wysylka .przycisk { margin-top: 0; white-space: nowrap; }
.przycisk[disabled] { opacity: .45; cursor: not-allowed; }

/* --- okno ostrzezenia (usuniecie danych firmy) --- */
.okno-ostrzezenia {
  max-width: 460px; width: calc(100% - 40px);
  /* Przegladarka daje oknu overflow:auto, przez co potrafi pokazac paski
     przewijania mimo braku nadmiaru tresci. W poziomie nie ma czego przewijac
     nigdy, w pionie tylko przy bardzo niskim oknie. */
  max-height: calc(100vh - 60px); overflow-x: hidden; overflow-y: auto;
  padding: 28px 30px 26px; border-radius: 16px;
  background: var(--tlo-karta); color: var(--tekst);
  border: 1px solid color-mix(in srgb, var(--czerwony) 45%, transparent);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .8);
}
.okno-ostrzezenia::backdrop { background: rgba(3, 6, 10, .72); }
.okno-ostrzezenia h2 { margin: 0 0 10px; font-size: 19px; color: var(--czerwony); }
.okno-ostrzezenia p {
  color: var(--tekst-slaby); font-size: 14px; line-height: 1.6; margin: 0 0 20px;
}
.okno-ostrzezenia p strong { color: var(--tekst); }
.okno-ostrzezenia label { margin: 0 0 8px; color: var(--tekst); }
.okno-ostrzezenia label strong { color: var(--czerwony); }
.okno-akcje { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.okno-akcje .przycisk { margin-top: 0; }
/* Okno pokazane bez skryptu (serwer odrzucil wysylke) stoi w tresci strony,
   wiec potrzebuje wlasnego odstepu - modal dostaje go od przegladarki. */
.okno-ostrzezenia[open]:not(:modal) { margin: 24px auto; }

/* --- przelacznik rodzaju konta na stronie danych --- */
.wybor-rodzaju {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rodzaj {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  padding: 16px 18px; cursor: pointer;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 12px;
}
.rodzaj:hover { border-color: var(--tekst-slaby); }
.rodzaj.wybrany {
  border-color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 8%, var(--tlo-karta));
}
.rodzaj input { width: auto; margin: 2px 0 0; accent-color: var(--akcent); flex: 0 0 auto; }
.rodzaj strong { display: block; font-size: 15px; color: var(--tekst); }
.rodzaj em {
  display: block; font-style: normal; margin-top: 3px;
  color: var(--tekst-slaby); font-size: 13px; line-height: 1.45;
}

.akcje-formularza { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.akcje-formularza .przycisk { margin-top: 0; }
.pominiecie { font-size: 14px; }

/* --- kafelek jako przycisk wyboru (rodzaj konta) --- */
button.kafelek {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
}
button.kafelek h2 { color: var(--tekst); }
form.kafelki { margin: 0; }

/* --- błędy walidacji formularza --- */
.pole-blad input, .pole-blad textarea { border-color: var(--czerwony); }
.wskazowka.blad { color: var(--czerwony); }

/* --- pole tylko do odczytu (adres e-mail konta) --- */
input[disabled] {
  opacity: .6; cursor: not-allowed;
  background: color-mix(in srgb, var(--obramowanie) 25%, var(--tlo));
}
a.email { text-decoration: none; }
a.email:hover { color: var(--akcent); }

/* --- okno zaproszenia do firmy (nie do obejscia) --- */
.wyspa-tlo {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(3, 6, 10, .78); backdrop-filter: blur(3px);
}
.wyspa {
  width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 16px; padding: 30px 30px 26px;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .8);
}
.wyspa-ikona {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; margin-bottom: 16px; color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--akcent) 26%, transparent);
}
.wyspa h2 { margin: 0 0 12px; font-size: 20px; color: var(--tekst); }
.wyspa p { color: var(--tekst-slaby); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.wyspa p strong { color: var(--tekst); }
.wyspa .wyspa-szczegol { font-size: 13px; }
.wyspa .wyspa-uwaga {
  font-size: 13px; padding: 10px 12px; border-radius: 8px;
  background: var(--tlo); border: 1px solid var(--obramowanie);
}
.wyspa-akcje { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.wyspa-akcje form { margin: 0; }
.wyspa-akcje .przycisk { margin-top: 0; }
/* Strona pod oknem nie przewija sie - okno ma byc jedynym, na czym mozna dzialac. */
html.wyspa-otwarta { overflow: hidden; }

/* --- jedyny kafelek rodzaju konta (pracownik firmy) i wyjscie z firmy --- */
.rodzaj.jedyny { cursor: default; }
.rodzaj.jedyny:hover { border-color: var(--akcent); }
.wyjscie-z-firmy { margin-top: 28px; }
.usuniecie-konta { margin-top: 28px; }
.przycisk.niebezpieczny-obrys {
  background: transparent; color: var(--czerwony);
  border-color: color-mix(in srgb, var(--czerwony) 55%, transparent);
}
.przycisk.niebezpieczny-obrys:hover {
  background: color-mix(in srgb, var(--czerwony) 12%, transparent);
}

/* --- uzupelnianie formularza z materialow --- */
.materialy .materialy-ikona {
  background: color-mix(in srgb, var(--akcent) 16%, transparent); color: var(--akcent);
}
.strefa-plikow {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 22px 16px; margin: 16px 0 4px; cursor: pointer;
  border: 1px dashed var(--obramowanie); border-radius: 12px;
  background: var(--tlo); color: var(--tekst);
}
.strefa-plikow:hover, .strefa-plikow.nad {
  border-color: var(--akcent); background: color-mix(in srgb, var(--akcent) 6%, var(--tlo));
}
/* Pole wyboru pliku rozciagniete na cala strefe - przeciagniecie plikow na nia
   dziala natywnie w przegladarce, bez wlasnej obslugi upuszczania. */
.strefa-plikow input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.strefa-plikow span { color: var(--tekst-slaby); font-size: 13px; }
.strefa-plikow .strefa-wybrane { color: var(--akcent); }
.materialy-dodawanie { margin: 0; }
.materialy-dodawanie textarea { min-height: 96px; }
.materialy-dodawanie .przycisk { margin-top: 12px; }
.materialy-lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.materialy-lista li {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--obramowanie); border-radius: 10px; background: var(--tlo);
}
.material-nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.materialy-lista form { margin: 0; }
button.link.usun-material { color: var(--tekst-slaby); font-size: 20px; line-height: 1; padding: 0 4px; }
button.link.usun-material:hover { color: var(--czerwony); }
.materialy-uruchom { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 0; }
.materialy-uruchom .przycisk { margin-top: 0; }
.materialy-stan { color: var(--tekst-slaby); font-size: 13.5px; }
.materialy-stan.blad { color: var(--czerwony); }
.materialy-sprzeczne {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--zolty) 45%, transparent);
  background: color-mix(in srgb, var(--zolty) 8%, var(--tlo-karta));
}
.materialy-sprzeczne ul { margin: 6px 0 0; padding-left: 18px; color: var(--tekst-slaby); }
.materialy-prywatnosc { margin-top: 16px; }
.z-materialow {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
  font-size: 11.5px; font-weight: 600; cursor: help;
  color: var(--akcent); background: color-mix(in srgb, var(--akcent) 14%, transparent);
}
.z-materialow.do-sprawdzenia {
  color: var(--zolty); background: color-mix(in srgb, var(--zolty) 16%, transparent);
}

/* --- poprawianie fragmentu dokumentu --- */
/* Tytul po lewej, pobranie najnowszej wersji po prawej - na telefonie pod spodem. */
.poprawianie-naglowek {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.poprawianie-naglowek .podtytul { margin: 0; }
.poprawianie-naglowek .podtytul strong { color: var(--tekst); }
.poprawianie-naglowek .przycisk { margin-top: 4px; }

/* Instrukcja w trzech krokach obok siebie, na telefonie jeden pod drugim. */
.poprawka-kroki {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.poprawka-kroki li {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
}
.poprawka-kroki strong { display: block; font-size: 14px; margin-bottom: 2px; }
.poprawka-kroki div > span { color: var(--tekst-slaby); font-size: 13px; line-height: 1.5; }
.poprawka-krok-nr {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  color: var(--akcent-jasny);
  background: color-mix(in srgb, var(--akcent) 16%, transparent);
}

.sekcja-naglowek .dokument-wskazowka { color: var(--tekst-cichy); font-size: 13px; margin-left: auto; }

.lista .poprawka {
  display: grid; gap: 12px; padding: 16px 18px;
  background: var(--tlo-karta); border: 1px solid var(--obramowanie);
  border-radius: 12px;
}
.poprawka-naglowek { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; }
.poprawka-miejsce { display: grid; gap: 1px; min-width: 0; }
.poprawka-miejsce strong { font-size: 15px; }
.lista .poprawka-miejsce .meta {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px;
}
/* Stan jako plakietka - na nia klient patrzy, czekajac na wynik. Bez klasy
   stanu to poprawka w toku: zolta, z pulsujaca kropka. */
.poprawka-stan {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--zolty); background: color-mix(in srgb, var(--zolty) 14%, transparent);
}
.poprawka-stan::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.poprawka-stan:not(.stan-gotowy):not(.stan-blad)::before { animation: poprawka-puls 1.4s ease-in-out infinite; }
.poprawka-stan.stan-gotowy { color: var(--zielony); background: color-mix(in srgb, var(--zielony) 14%, transparent); }
.poprawka-stan.stan-blad { color: var(--czerwony); background: color-mix(in srgb, var(--czerwony) 14%, transparent); }
@keyframes poprawka-puls { 50% { opacity: .3; } }

.poprawka-etykieta {
  display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-cichy);
}
.poprawka-uwaga {
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--akcent) 7%, var(--tlo-karta));
  border-left: 3px solid var(--akcent);
}
.poprawka-uwaga .poprawka-etykieta { color: var(--akcent-jasny); }
.poprawka-uwaga p { margin: 0; }
/* Bylo i Jest obok siebie - roznice widac jednym spojrzeniem. Dopoki wyniku
   nie ma, fragment zajmuje cala szerokosc. */
.poprawka-porownanie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poprawka-porownanie:has(> .poprawka-wynik[hidden]) { grid-template-columns: 1fr; }
.poprawka-bylo {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--obramowanie); background: var(--tlo);
}
.poprawka-fragment { margin: 0; font-size: 14px; color: var(--tekst-slaby); }
.poprawka-wynik {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--zielony) 40%, transparent);
  background: color-mix(in srgb, var(--zielony) 7%, var(--tlo-karta));
}
/* Atrybut hidden przegrywa z display z klasy - ta sama pulapka co przy
   przyciskach platnosci. Bez tego gotowa ramka widac by bylo od razu. */
.poprawka-wynik[hidden], .pasek-poprawki[hidden] { display: none; }
.poprawka-wynik-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.poprawka-wynik-naglowek .poprawka-etykieta { margin: 0; color: var(--zielony); }
.poprawka-wynik-tresc { margin: 0; font-size: 14px; white-space: pre-wrap; }
.poprawka-wynik-naglowek .przycisk.maly { padding: 1px 10px; font-size: 12px; }
.poprawka-blad, .poprawka-problem { margin: 0; font-size: 14px; }
.przycisk.maly { margin-top: 0; padding: 5px 12px; font-size: 13px; }
/* Pobranie wersji sprzed poprawki i cofniecie - obok siebie, zawijane na telefonie. */
.poprawka-akcje {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--obramowanie);
}
.poprawka-akcje form { margin: 0; }
.przycisk.cichy-niebezpieczny { color: var(--czerwony); }
.przycisk.cichy-niebezpieczny:hover { border-color: color-mix(in srgb, var(--czerwony) 50%, transparent); }

/* Tresc dokumentu do zaznaczania - jak kartka: kolumna o szerokosci wydruku
   i wyzsze wiersze, bo tu trzeba czytac uwaznie. Odstep na dole robi miejsce
   paskowi poprawki, ktory stoi nad trescia. */
.dokument-tekst {
  padding: 40px 48px 200px; border-radius: 12px;
  background: linear-gradient(180deg, var(--tlo-uniesione), var(--tlo-karta) 320px);
  border: 1px solid var(--obramowanie);
  line-height: 1.75;
}
.dok-rozdzial {
  font-size: 15px; text-transform: uppercase; letter-spacing: .05em;
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--obramowanie);
}
.dok-rozdzial:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.dok-podrozdzial { font-size: 15px; margin: 26px 0 8px; color: var(--akcent-jasny); }
/* Lekkie podswietlenie akapitu pod kursorem podpowiada, ze tresc sie zaznacza. */
.dok-akapit {
  margin: 0 -10px 12px; padding: 2px 10px; max-width: calc(74ch + 20px);
  color: var(--tekst); border-radius: 6px; transition: background .15s ease;
}
.dok-akapit:hover { background: rgba(255, 255, 255, .025); }
.dokument-tekst ::selection { background: color-mix(in srgb, var(--akcent) 45%, transparent); }

/* Pasek z formularzem poprawki - karta nad dolna krawedzia okna, zeby
   zaznaczenie i pole uwagi byly widoczne naraz, bez przewijania w gore. */
.pasek-poprawki {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
  max-width: 940px; margin: 0 auto; padding: 16px 20px;
  background: color-mix(in srgb, var(--tlo-uniesione) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--obramowanie-mocne); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  animation: pasek-wjazd .18s ease-out;
}
@keyframes pasek-wjazd { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .pasek-poprawki, .poprawka-stan::before { animation: none !important; }
}
.pasek-poprawki-srodek { display: flex; gap: 18px; align-items: flex-end; }
.pasek-poprawki-cytat { flex: 1 1 40%; min-width: 0; }
.pasek-poprawki-miejsce { color: var(--akcent-jasny); }
.pasek-poprawki-cytat blockquote {
  margin: 4px 0 0; padding-left: 12px; font-size: 13.5px; color: var(--tekst-slaby);
  border-left: 2px solid var(--akcent);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pasek-poprawki-ostrzezenie { margin: 6px 0 0; font-size: 13px; }
.pasek-poprawki-uwaga { flex: 1 1 45%; display: grid; gap: 5px; margin: 0; font-size: 13.5px; }
.pasek-poprawki-uwaga textarea { width: 100%; resize: vertical; }
.pasek-poprawki-akcje { display: flex; gap: 10px; flex: 0 0 auto; }
.pasek-poprawki-akcje .przycisk { margin-top: 0; }

@media (max-width: 760px) {
  .poprawka-kroki, .poprawka-porownanie { grid-template-columns: 1fr; }
  .sekcja-naglowek .dokument-wskazowka { display: none; }
  .pasek-poprawki { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; }
  .pasek-poprawki-srodek { flex-wrap: wrap; gap: 10px; }
  .pasek-poprawki-cytat, .pasek-poprawki-uwaga { flex: 1 1 100%; }
  /* Na waskim ekranie pelny tytul rozdzialu zajmowalby w pasku trzy wiersze
     i spychal pole uwagi pod krawedz okna. */
  .pasek-poprawki-miejsce {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dokument-tekst { padding: 20px 18px 240px; }
}

/* Fragment zaznaczony do poprawki - widoczny takze po kliknieciu w pole uwagi. */
::highlight(poprawka) {
  background-color: #1f5f99;
  color: #ffffff;
}