/* Układ strony. Kolory i fonty tylko przez zmienne z motyw.css (rozdz. 14 spec). Używamy wyłącznie
   grubości 400 i 700, bo tylko te odmiany fontów są serwowane. Wspólne elementy (nagłówek z menu,
   karty, przyciski, pola, komunikaty, tabele) mają wygląd z prototypu, `docs/klient/prototyp/
   wspolne.css` (rozdz. 14, „Układ według prototypu”, #233). */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: 400 15px/1.5 var(--font-tekst);
}

h1, h2 {
  font-family: var(--font-naglowki);
  font-weight: 700;
  color: var(--kolor-naglowki);
  line-height: 1.2;
}
/* Długi adres e-mail w nagłówku karty konta łamie się w szerokości ekranu (#199 pkt 4). */
h1 { font-size: 1.6rem; margin: 0 0 .75rem; overflow-wrap: break-word; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
h3 { font-family: var(--font-tekst); font-weight: 700; font-size: 1.05rem; margin: 1rem 0 .4rem; }

a { color: var(--kolor-link); }
a:hover { color: var(--kolor-link-najechany); }

/* Widoczny fokus dla klawiatury (rozdz. 14). */
:focus-visible {
  outline: 3px solid var(--kolor-fokus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link „Przejdź do treści” pojawia się dopiero po wejściu na niego klawiaturą. */
.przeskocz {
  position: absolute;
  left: 8px;
  top: -100px;
  padding: 8px 14px;
  background: var(--kolor-przeskocz-tlo);
  color: var(--kolor-przeskocz-tekst);
  border-radius: 8px;
  z-index: 10;
}
.przeskocz:focus { top: 8px; }

/* Nagłówek: logo, nazwa aplikacji i konto, a po prawej menu (prototyp, szkielet.js). */
.naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 6px 16px;
  background: var(--kolor-powierzchnia);
  border-bottom: 1px solid var(--kolor-linia);
}
.logo-link { display: block; line-height: 0; }
/* Logo w układzie poziomym, 180 px szerokości w obu skórkach: minimum z księgi znaku (D107). Nie
   zmniejszaj. Wysokość wynika z proporcji pliku (ok. 48 px). Plik nie ma marginesów, więc pole
   ochronne z księgi (wysokość liścia w „o”, ok. 15 px przy tej szerokości) daje margines: z górnym
   i dolnym odstępem nagłówka 15 px, a z lewym odstępem nagłówka i odstępem przed kreską nazwy
   co najmniej tyle samo. Widać jeden z dwóch plików, według skórki (motyw.css). */
.logo { display: block; width: 180px; height: auto; margin: 9px 0; }
.logo-kolor { display: var(--logo-kolor); }
.logo-negatyw { display: var(--logo-negatyw); }
.nazwa {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--kolor-linia);
}
.nazwa-aplikacji {
  display: block;
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--kolor-naglowki);
}
.zalogowany {
  display: block;
  font-size: .8rem;
  color: var(--kolor-tekst-drugi);
  overflow-wrap: anywhere;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.menu a {
  padding: 8px 12px;
  border-radius: var(--promien-maly);
  color: var(--kolor-naglowki);
  font-size: .92rem;
  text-decoration: none;
}
.menu a:hover { background: var(--kolor-tlo); color: var(--kolor-naglowki); }
/* Ekran, na którym jest użytkownik, także jego podstrona (aria-current, strona/kontekst.py). */
.menu a[aria-current] { background: var(--kolor-przycisk); color: var(--kolor-przycisk-tekst); }
.menu-odstep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--kolor-linia); }
.wyloguj { margin: 0; }
/* Przycisk „Menu” jest tylko na telefonie. Bez skryptu: details z samym podsumowaniem trzyma stan
   otwarcia, a menu za nim pokazuje albo ukrywa reguła poniżej (#233, komentarz 12335). */
.menu-przycisk { display: none; }
@media (max-width: 760px) {
  /* Odstęp w poziomie to pole ochronne logo (reguła `.logo` wyżej). */
  .naglowek { gap: 8px 15px; }
  .nazwa { padding-left: 12px; }
  .nazwa-aplikacji { font-size: 1rem; }
  .menu-przycisk { display: block; margin-left: auto; }
  .menu-przycisk > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--kolor-przycisk);
    border-radius: var(--promien-maly);
    background: var(--kolor-powierzchnia);
    color: var(--kolor-przycisk);
    font-weight: 700;
    font-size: .92rem;
    list-style: none;
    cursor: pointer;
  }
  .menu-przycisk > summary::-webkit-details-marker { display: none; }
  .menu {
    width: 100%;
    margin-left: 0;
    padding-bottom: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  .menu-przycisk:not([open]) + .menu { display: none; }
  .menu-odstep { width: auto; height: 1px; margin: 4px 0; }
  .menu .wyloguj { padding: 4px 12px; }
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.karta {
  background: var(--kolor-powierzchnia);
  border: 1px solid var(--kolor-linia);
  border-radius: var(--promien-karty);
  padding: 16px;
  box-shadow: var(--cien-karty);
}
.karta + .karta { margin-top: 12px; }
.karta > :first-child { margin-top: 0; }
.karta > :last-child { margin-bottom: 0; }

.drugi { color: var(--kolor-tekst-drugi); }

/* Przyciski (prototyp: `przycisk`, `przycisk drugi`, `przycisk maly`). Działanie jest przyciskiem,
   a odnośnik do strony z formularzem może wyglądać jak przycisk (`a.przycisk`); zwykły odnośnik
   prowadzi w inne miejsce (#233, założenie 4 z komentarza 12302). */
button, .przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--kolor-przycisk);
  border-radius: var(--promien-przycisku);
  background: var(--kolor-przycisk);
  color: var(--kolor-przycisk-tekst);
  font: 700 .95rem/1.2 var(--font-tekst);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .przycisk:hover {
  background: var(--kolor-przycisk-najechany);
  border-color: var(--kolor-przycisk-najechany);
  color: var(--kolor-przycisk-tekst);
}
.przycisk.drugi {
  border-color: var(--kolor-przycisk);
  background: var(--kolor-powierzchnia);
  color: var(--kolor-przycisk);
}
.przycisk.drugi:hover {
  border-color: var(--kolor-przycisk);
  background: var(--kolor-tlo);
  color: var(--kolor-przycisk);
}
.przycisk.maly { min-height: 34px; padding: 6px 10px; font-size: .85rem; }
/* Atrybut `hidden` ukrywa też przycisk, któremu reguła wyżej daje `display` (#345). */
button[hidden], .przycisk[hidden] { display: none; }
/* Działanie, które usuwa (prototyp: `przycisk ostrzezenie`). */
.przycisk.ostrzezenie {
  border-color: var(--kolor-blad-tekst);
  background: var(--kolor-powierzchnia);
  color: var(--kolor-blad-tekst);
}
.przycisk.ostrzezenie:hover {
  border-color: var(--kolor-blad-tekst);
  background: var(--kolor-blad-tlo);
  color: var(--kolor-blad-tekst);
}
/* Rząd przycisków pod treścią karty albo w komórce tabeli (prototyp: `akcje`). */
.akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
/* W komórce tabeli przyciski stoją w jednej linii: kolumna dostaje ich szerokość, więc wiersz
   nie rośnie, a szeroka tabela przewija się w swoim pudełku. */
td > .akcje { flex-wrap: nowrap; gap: 6px 8px; }
td > .akcje:first-child { margin-top: 0; }
.akcje form { margin: 0; }
.drobny { font-size: .85rem; color: var(--kolor-tekst-drugi); }
/* Odnośnik powrotu nad tytułem strony z formularzem albo podstrony Konfiguracji. */
.powrot { margin: 0 0 8px; }
/* Formularz albo karta pod tabelą nie przylega do jej pudełka. */
.tabela-przewijana + .karta { margin-top: 12px; }

/* Stan (prototyp: `status`, `st-gotowe`, `st-brak` i stany egzaminu `st-…`): zawsze symbol
   i tekst, kolor je powtarza. Długi stan zawija się w szerokości ekranu (#233, komentarz 12671
   pkt 7), także w komórce tabeli: na telefonie kolumna stanu karty ucznia z datą rezerwacji
   zmieści się wtedy obok egzaminu (#199 pkt 1). */
.status {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 700;
}
/* Link w tekście stanu (F7) ma kolor tekstu znacznika i podkreślenie: turkus linku ma na tle
   zarezerwowanego kontrast 4,35:1, poniżej 4,5:1. Od zwykłego tekstu odróżnia go więc tylko
   podkreślenie (WCAG 1.4.1). Bez osobnego `:hover`: ten selektor stoi po `a:hover` i ma tę samą
   specyficzność, więc obowiązuje także przy najechaniu (#277). */
.status a { color: inherit; }
.st-gotowe, .st-zdany { background: var(--kolor-gotowe-tlo); color: var(--kolor-gotowe-tekst); }
.st-brak, .st-brak-wyniku, .st-do-uzupelnienia {
  background: var(--kolor-uwaga-tlo);
  color: var(--kolor-uwaga-tekst);
  border: 1px dashed var(--kolor-uwaga-ramka);
}
.st-zarezerwowany { background: var(--kolor-zarezerwowany-tlo); color: var(--kolor-zarezerwowany-tekst); }
.st-do-zapisania {
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  border: 1px dashed var(--kolor-do-zapisania-ramka);
}
.st-propozycja {
  background: var(--kolor-powierzchnia);
  color: var(--kolor-zarezerwowany-tekst);
  border: 1px dashed var(--kolor-propozycja-ramka);
}
.st-niezdany { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.st-odwolany {
  background: var(--kolor-powierzchnia);
  color: var(--kolor-blad-tekst);
  border: 1px dashed var(--kolor-blad-tekst);
}
.st-nieobecnosc { background: var(--kolor-uwaga-tlo); color: var(--kolor-uwaga-tekst); }
.st-zwolnienie { background: var(--kolor-neutralny-tlo); color: var(--kolor-tekst); }
.st-nie-dotyczy {
  background: repeating-linear-gradient(45deg, var(--kolor-neutralny-tlo) 0 4px,
    var(--kolor-neutralny-pasek) 4px 8px);
  color: var(--kolor-tekst);
}

/* Formularze w całej aplikacji (pierwszy: filtry dziennika, #57). */
.filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.pole { display: flex; flex-direction: column; gap: 4px; }
.pole label { font-weight: 700; }
.pole input:not([type="checkbox"]):not([type="radio"]), .pole select, .pole textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  font: inherit;
  /* Ramka jest jedyną granicą pola na białej karcie: kontrast co najmniej 3:1 (WCAG 1.4.11),
     więc ciemniejsza niż w prototypie. */
  border: 1px solid var(--kolor-tekst-drugi);
  border-radius: var(--promien-maly);
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
}
.pole [aria-invalid="true"] {
  border-color: var(--kolor-blad-tekst);
  box-shadow: 0 0 0 1px var(--kolor-blad-tekst);
}
.przyciski { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.bledy { font-weight: 700; color: var(--kolor-blad-tekst); }
.bledy ul { margin: 0; padding-left: 1.2em; }

/* Tabela przewija się w poziomie we własnym pudełku, więc strona na telefonie nie. Pudełko ma
   ramkę jak w prototypie (`tabela-owijka`). */
.tabela-przewijana {
  overflow-x: auto;
  border: 1px solid var(--kolor-linia);
  border-radius: 12px;
  background: var(--kolor-powierzchnia);
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--kolor-powierzchnia);
}
.tabela caption { text-align: left; padding: 0 0 8px; color: var(--kolor-tekst-drugi); }
.tabela-przewijana .tabela caption { padding: 10px 10px 8px; }
.tabela th, .tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kolor-linia);
  text-align: left;
  vertical-align: top;
}
.tabela thead th { color: var(--kolor-naglowki); font-size: .88rem; }
.tabela-przewijana thead th { background: var(--kolor-tlo); }
.tabela-przewijana tbody tr:last-child > * { border-bottom: 0; }
.bez-lamania { white-space: nowrap; }
/* Tekst tylko dla czytników ekranu, np. nazwa egzaminu przy „Zmień” w każdym wierszu. */
.wizualnie-ukryte {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Zmiana wymagania na karcie ucznia (#199 pkt 1): pola i działania wiersza po rozwinięciu
   „Zmień”, więc zwinięty wiersz ma jedną linię. Fokus „Zmień” pokazuje reguła :focus-visible.
   `position: relative` trzyma ukrytą nazwę egzaminu w pudełku tabeli: bez tego tekst
   z `position: absolute` wychodzi poza przewijane pudełko i poszerza stronę na telefonie. */
.zmiana-wiersza > summary {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  border: 1px solid var(--kolor-link);
  border-radius: 8px;
  color: var(--kolor-link);
  white-space: nowrap;
  cursor: pointer;
}
.zmiana-wiersza > summary:hover { color: var(--kolor-link-najechany); border-color: var(--kolor-link-najechany); }
.zmiana-wiersza[open] > summary { background: var(--kolor-link); color: var(--kolor-powierzchnia); }
/* Stała szerokość rozwiniętego panelu, a pola jedno pod drugim: rozwinięcie jednego wiersza nie
   ściska pozostałych kolumn, więc inne wiersze się nie zawijają. */
.zmiana-wiersza[open] { width: 12rem; }
.zmiana-wiersza form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}
.zmiana-wiersza label { font-weight: 700; }
.zmiana-wiersza select { max-width: 100%; }
.zmiana-wiersza select, .zmiana-wiersza input {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--kolor-tekst-drugi);
  border-radius: 8px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
}
.zmiana-wiersza input { width: 6rem; }
.zmiany { margin: 0; padding-left: 1.1em; }

.stronicowanie { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }

/* Podgląd poczty (#58): wiadomość jako karta z nagłówkami i treścią w zwykłym tekście. */
.wiadomosc { margin-bottom: 16px; }
.wiadomosc h2 { font-size: 1.15rem; margin: 0 0 8px; }
.naglowki-wiadomosci {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0 0 12px;
}
.naglowki-wiadomosci dt { font-weight: 700; }
.naglowki-wiadomosci dd { margin: 0; overflow-wrap: anywhere; }
/* Na wąskim ekranie etykieta stoi nad wartością: kolumna etykiet `max-content` z długą etykietą
   parametru wypychała wartości poza ekran telefonu, a wartości łamały się co kilka liter
   (#199 pkt 4). */
@media (max-width: 40em) {
  .naglowki-wiadomosci { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .naglowki-wiadomosci dd + dt { margin-top: 8px; }
}
/* Treść ma podziały linii wiadomości, a długi link z tokenem łamie się w szerokości ekranu. */
.tresc-wiadomosci {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--kolor-linia);
  padding-top: 12px;
}

/* Formularze kont (#59): pola jedno pod drugim, w wąskiej karcie. */
.formularz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 28rem;
}
/* Edycja tekstu (#62): szersze pole, a podgląd pokazuje akapity tak jak w wiadomości. */
.formularz.szeroki { max-width: 48rem; }
/* Formularz z tabelami na całą szerokość treści, np. podgląd importu (#233). */
.formularz.pelny { max-width: none; }
.formularz.pelny h2 { margin: 8px 0 0; }
/* Pola obok siebie, ile się zmieści (prototyp: `pola`). */
.pola-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.pola-siatka > * { min-width: 0; }
/* Podsumowanie podglądu: liczby w jednym rzędzie, ile się zmieści. */
.podsumowanie { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.pole textarea { resize: vertical; }
.formularz p { margin: 0; }
.formularz .przyciski { display: flex; flex-wrap: wrap; }
.pomoc { margin: 0; color: var(--kolor-tekst-drugi); font-size: .9rem; }

/* Pola wyboru (#60): grupa w ramce z legendą, pojedyncze pole z etykietą obok. */
fieldset.pole { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.pole legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
fieldset.pole label { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.pole.wybor { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Opis pojedynczego pola wyboru w osobnym wierszu, pod polem i etykietą (#211). */
.pole.wybor .pomoc { flex-basis: 100%; }
.pole input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; }
/* Działania na koncie (#60): każdy przycisk z opisem pod nim. */
.akcja { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }

/* Komunikaty (prototyp: `komunikat info`, `ok`, `uwaga`, `blad`). Komunikaty po działaniu dostają
   rodzaj z poziomu wiadomości Django (MESSAGE_TAGS w ustawieniach). Bez rodzaju: informacja. */
.komunikaty { margin-bottom: 16px; }
.komunikat {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--kolor-info-ramka);
  border-radius: var(--promien-maly);
  background: var(--kolor-info-tlo);
}
.komunikaty .komunikat { margin: 0 0 8px; }
.komunikat > :first-child { margin-top: 0; }
.komunikat > :last-child { margin-bottom: 0; }
.komunikat.ok { border-left-color: var(--kolor-ok-ramka); background: var(--kolor-ok-tlo); }
.komunikat.uwaga {
  border-left-color: var(--kolor-uwaga-ramka);
  background: var(--kolor-uwaga-tlo);
  color: var(--kolor-uwaga-tekst);
}
.komunikat.blad {
  border-left-color: var(--kolor-blad-tekst);
  background: var(--kolor-blad-tlo);
  color: var(--kolor-blad-tekst);
}

/* Panel konta rodziny (prototyp: `rodzic.html`, #113, #233): wąska kolumna także na laptopie,
   bo ekran jest projektowany na telefon. Uczniowie konta to kafelki obok siebie, a wybrany ma
   kolor przycisku. Bez skryptu wybór ucznia jest odnośnikiem do jego strony. */
.waski { max-width: 520px; margin: 0 auto; }
.przelacznik {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.przelacznik li { display: flex; flex: 1 1 140px; min-width: 0; }
.przelacznik a {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--kolor-tekst-drugi);
  border-radius: 12px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.przelacznik a:hover { border-color: var(--kolor-naglowki); color: var(--kolor-naglowki); }
.przelacznik a[aria-current="page"] {
  border-color: var(--kolor-przycisk);
  background: var(--kolor-przycisk);
  color: var(--kolor-przycisk-tekst);
}
.postep-ucznia h2 { margin: 0 0 4px; }
.postep-ucznia .drobny { margin: 0; }
.postep-ucznia .liczba {
  margin: 8px 0 0;
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--kolor-naglowki);
}
.postep-ucznia .postep-pasek { margin: 8px 0; }
.egzaminy { margin: 12px 0 0; padding: 0; list-style: none; }
.egzamin h3 { margin: 0 0 4px; font-family: var(--font-tekst); font-size: 1.05rem; color: var(--kolor-naglowki); }
.egzamin h3::first-letter { text-transform: uppercase; }
/* Klasa `wariant` jak w prototypie rodzica; zwykły tekst w linii, a nie rząd przycisków wariantu
   ze strony przedmiotów. */
.egzamin h3 .wariant {
  display: inline;
  margin: 0;
  font-weight: 400;
  font-size: .92rem;
  color: var(--kolor-tekst-drugi);
}
.egzamin p { margin: 6px 0 0; }
/* Nowa rezerwacja rodziny (prototyp `rodzic.html`: `kartaHtml`, `renderWybor`,
   `renderFormularz`; P6, #271). */
.egzamin.wyrozniona { border-color: var(--kolor-ok-ramka); box-shadow: 0 0 0 3px var(--kolor-ok-tlo); }
.egzamin .typ {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--kolor-zarezerwowany-tlo);
  color: var(--kolor-zarezerwowany-tekst);
  font-size: .76rem;
  font-weight: 600;
}
.szczegoly { list-style: none; margin: 10px 0 0; padding: 0; font-size: .92rem; }
.szczegoly li { padding: 2px 0; }
.et { color: var(--kolor-tekst-drugi); }
.adresy { overflow-wrap: anywhere; }
.rezerwacja .kto { margin: 0 0 12px; font-weight: 600; }
.rezerwacja .dzien h2 { margin: 18px 0 8px; font-family: var(--font-tekst); font-size: 1rem; }
.godziny { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.termin {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--kolor-tekst-drugi);
  border-radius: 12px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
  text-decoration: none;
}
.termin:hover { border-color: var(--kolor-link); background: var(--kolor-zarezerwowany-tlo); }
.t-godz { min-width: 3.2em; font-weight: 700; font-size: 1.25rem; color: var(--kolor-naglowki); }
.t-opis { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.t-kto { color: var(--kolor-tekst-drugi); }
.awaryjny {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--kolor-uwaga-ramka);
  border-radius: 6px;
  background: var(--kolor-uwaga-tlo);
  color: var(--kolor-uwaga-tekst);
  font-size: .76rem;
  font-weight: 600;
  vertical-align: middle;
}
.wybrany {
  padding: 12px 14px;
  border: 1px solid var(--kolor-linia);
  border-radius: 12px;
  background: var(--kolor-powierzchnia);
  overflow-wrap: anywhere;
}
.wybrany div + div { margin-top: 2px; }
.wybrany .duzy { font-weight: 700; font-size: 1.05rem; color: var(--kolor-naglowki); }
.rezerwacja .pole { margin: 14px 0 6px; }
.rezerwacja input[type="time"] { max-width: 12rem; font-size: 16px; }
.podsumowanie {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--kolor-linia);
  border-radius: 14px;
  background: var(--kolor-powierzchnia);
  overflow-wrap: anywhere;
}
.podsumowanie h2 { margin: 0 0 8px; font-size: 1.05rem; }
.podsumowanie p { margin: 4px 0; }
.podsumowanie .oplata { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kolor-linia); font-size: .9rem; }

/* Przycisk przy wierszu tabeli, np. „wszystkie klasy” na stronie uprawnień (#109): drugorzędny
   wobec „Zapisz”, a wciśnięty, gdy wiersz jest zaznaczony w całości. */
.przycisk-wiersza {
  min-height: 34px;
  padding: 3px 10px;
  font-weight: 400;
  white-space: nowrap;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-link);
  border: 1px solid var(--kolor-link);
}
.przycisk-wiersza:hover { background: var(--kolor-powierzchnia); color: var(--kolor-link-najechany); border-color: var(--kolor-link-najechany); }
.przycisk-wiersza[aria-pressed="true"] { background: var(--kolor-link); color: var(--kolor-powierzchnia); }
/* „Zapisz” nad tabelą uprawnień nie przylega do jej podpisu. */
.przyciski + .tabela-przewijana { margin-top: 12px; }
.przycisk-wiersza[aria-pressed="true"]:hover { background: var(--kolor-link-najechany); color: var(--kolor-powierzchnia); }

/* Konfiguracja (prototyp: `konfiguracja.html`, #233): tytuł z postępem, spis sekcji ze stanem po
   lewej i karty sekcji po prawej. Na węższym ekranie spis stoi nad sekcjami. Bez skryptu, więc
   spis nie podświetla sekcji przy przewijaniu. */
.tytul-strony {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
}
.tytul-strony h1 { margin: 0 0 4px; }
.tytul-strony p { margin: 0; max-width: 760px; }
.postep { flex: 0 1 300px; min-width: 0; }
.postep-tekst { margin: 0; font-weight: 700; color: var(--kolor-naglowki); }
/* Pasek powtarza liczbę z tekstu nad nim, więc czytniki ekranu go pomijają (aria-hidden). */
.postep-pasek {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 6px;
  border: 0;
  border-radius: 4px;
  background: var(--kolor-postep-tlo);
  appearance: none;
  overflow: hidden;
}
.postep-pasek::-webkit-progress-bar { background: var(--kolor-postep-tlo); border-radius: 4px; }
.postep-pasek::-webkit-progress-value { background: var(--kolor-postep); border-radius: 4px; }
.postep-pasek::-moz-progress-bar { background: var(--kolor-postep); border-radius: 4px; }

.uklad {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.uklad > .karta + .karta, .uklad > * + * { margin-top: 0; }
.spis {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 12px 10px;
}
.spis-tytul { font-family: var(--font-tekst); font-size: .95rem; margin: 2px 8px 8px; }
.spis ol { list-style: none; margin: 0; padding: 0; }
.spis li + li { margin-top: 2px; }
/* `position: relative` trzyma ukryty numer w pudełku przewijanego spisu (#199 pkt 4). */
.spis a {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--kolor-tekst);
  text-decoration: none;
}
.spis a:hover { background: var(--kolor-tlo); color: var(--kolor-tekst); }
.spis .s-tytul { display: block; font-weight: 700; color: var(--kolor-naglowki); line-height: 1.3; }
.spis .s-stan { display: block; margin-top: 2px; font-size: .8rem; font-weight: 700; line-height: 1.3; }
.stan-ok { color: var(--kolor-gotowe-tekst); }
.stan-brak { color: var(--kolor-uwaga-tekst); }
.spis-dodatkowy { display: block; margin: 8px 8px 2px; font-weight: 700; }

.nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kolor-przycisk);
  color: var(--kolor-przycisk-tekst);
  font: 700 .85rem var(--font-tekst);
}
.nr.gotowa { background: var(--kolor-gotowe-znak); }

.sekcje { min-width: 0; }
.sekcje > .karta + .karta { margin-top: 16px; }
.sekcja { scroll-margin-top: 12px; }
.sekcja-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.sekcja-glowa h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.2rem; }
/* Komunikat z brakami w bloku szkoły, np. nauczyciele bez uprawnień i egzaminy bez nauczyciela. */
.braki ul { margin: 4px 0 0; padding-left: 20px; }
.braki li { margin: 3px 0; }
.dwie-kolumny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.dwie-kolumny > * { min-width: 0; }
.dwie-kolumny h3 { margin-top: 12px; }
/* Pozycje wyróżnione na liście, np. języki oferowane w roku (prototyp: `jezyki-lista`). */
.wyroznione {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.wyroznione li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--kolor-wyroznienie-ramka);
  border-radius: 999px;
  background: var(--kolor-wyroznienie-tlo);
  color: var(--kolor-wyroznienie-tekst);
  font-weight: 700;
  font-size: .9rem;
}
/* Długa lista zwinięta pod „Pokaż…” (prototyp: `details.wiecej`). */
details.wiecej { margin-top: 10px; }
details.wiecej > summary { cursor: pointer; color: var(--kolor-link); font-weight: 700; }
details.wiecej > summary:hover { color: var(--kolor-link-najechany); }
.sekcja .tabela-przewijana { margin-top: 12px; }
.pozycja-jezykow { margin: 8px 0 0; font-weight: 700; }
/* Karty obok siebie (na telefonie jedna pod drugą). */
.dwie-kolumny.karty { gap: 12px 16px; margin-top: 12px; align-items: start; }
.dwie-kolumny.karty > .karta { margin-top: 0; }
/* Ukryty dopisek przycisku (np. nazwa klasy) zostaje w pudełku przewijanej tabeli (#199 pkt 4). */
.tabela-przewijana .przycisk { position: relative; }
/* Wariant przedmiotu z przyciskami w jednej linii, jeśli się mieści. */
.wariant { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
/* Formularze sekcji obok siebie, np. dodanie sali i wyłączenia sali (prototyp: `formularze`,
   #211). */
.formularze {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}
.formularze > .formularz {
  max-width: none;
  min-width: 0;
  background: var(--kolor-tlo);
  border: 1px solid var(--kolor-linia);
  border-radius: 12px;
  padding: 12px 14px 14px;
}
.formularze h3 { margin: 0; }
/* Wyłączenia sali w komórce tabeli (prototyp: `lista-wyl`), każde z przyciskiem usunięcia. */
.lista-wyl { list-style: none; margin: 0; padding: 0; }
.lista-wyl li + li { margin-top: 6px; }
.lista-wyl form { display: inline; }
/* Liczby w kafelkach (prototyp: `kafelki`). Kafelek braku ma przerywaną ramkę i znak „!”. */
.kafelki { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.kafelki li {
  min-width: 150px;
  padding: 8px 14px;
  border: 1px solid var(--kolor-linia);
  border-radius: 12px;
  background: var(--kolor-powierzchnia);
}
.kafelki .k-liczba {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--kolor-naglowki);
}
.kafelki .k-nazwa { display: block; font-size: .82rem; font-weight: 700; color: var(--kolor-tekst-drugi); }
.kafelki li.uwaga-k { border: 1px dashed var(--kolor-uwaga-ramka); background: var(--kolor-uwaga-tlo); }
.kafelki li.uwaga-k .k-liczba, .kafelki li.uwaga-k .k-nazwa { color: var(--kolor-uwaga-tekst); }
.kafelki a { display: block; text-decoration: none; }
.kafelki a .k-nazwa { text-decoration: underline; }

@media (max-width: 960px) {
  .uklad { grid-template-columns: minmax(0, 1fr); }
  .spis { position: static; max-height: none; }
}
@media (min-width: 560px) and (max-width: 960px) {
  .spis ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .spis li + li { margin-top: 0; }
}
@media (max-width: 760px) {
  .dwie-kolumny, .formularze { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kafelki li { flex: 1 1 140px; min-width: 0; }
}

/* Przypisanie przedmiotu (prototyp: `jezyki.html`, #233): filtry, panel z krokami i lista.
   W kodzie strony panel stoi za filtrami, bo w formularzu pierwszy jest przycisk „Pokaż” (Enter
   stosuje filtry), a przed listą, więc wariant wybiera się przed zaznaczeniem uczniów (komentarz
   12671 pkt 9). Na laptopie panel stoi po prawej, obok filtrów i listy. */
.przypisanie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "filtry panel" "lista panel";
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.przypisanie > .karta + .karta { margin-top: 0; }
.filtry-przypisania { grid-area: filtry; }
.lista-przypisania { grid-area: lista; }
.filtry-przypisania > * + *, .lista-przypisania > * + * { margin-top: 12px; }
.przypisanie .przyciski { display: flex; }
.panel-przypisania { grid-area: panel; position: sticky; top: 12px; }
.panel-przypisania h2 { margin-top: 0; }
.krok { margin: 14px 0 6px; font-weight: 700; color: var(--kolor-naglowki); }
.krok + .pole, .krok + p { margin-top: 0; }
/* Karta z brakiem do uzupełnienia (prototyp: lewa ramka w kolorze ostrzeżenia). */
.karta-uwaga { border-left: 5px solid var(--kolor-uwaga-ramka); }
/* Lista wierszy z działaniami po prawej, np. języki oferowane w roku. */
.wiersze { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--kolor-linia); border-radius: 12px; }
.wiersze > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 12px;
}
.wiersze > li + li { border-top: 1px solid var(--kolor-linia); }
.wiersze .akcje { margin-top: 0; }
@media (max-width: 960px) {
  .przypisanie {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "filtry" "panel" "lista";
  }
  .panel-przypisania { position: static; }
}

/* Przypisanie języka (#351, prototyp `jezyki.html`): licznik uczniów bez języka i języki roku
   u góry, a pod nimi panel „Przypisanie” obok listy z filtrami. Na węższym ekranie wszystko
   w jednej kolumnie, panel przed listą. `minmax(0, 1fr)`, bo szeroka tabela rozpychałaby kolumnę
   i strona przewijałaby się w bok na telefonie. */
.gora-przypisania, .uklad-przypisania { display: grid; gap: 16px; align-items: start; }
.gora-przypisania { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.uklad-przypisania { grid-template-columns: 320px minmax(0, 1fr); margin-top: 16px; }
.gora-przypisania > .karta, .uklad-przypisania > .karta { margin-top: 0; }
.gora-przypisania h2, .uklad-przypisania h2 { margin-top: 0; }
.panel-jezyka { position: sticky; top: 12px; }
.lista-jezyka > * + * { margin-top: 12px; }
.przypisanie-jezyka .przyciski { display: flex; }
.licznik-jezyka h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.licznik-jezyka .liczba { font-size: 2rem; line-height: 1; }
.lista-osob { margin: 6px 0 0; padding: 0; list-style: none; }
.lista-osob li { padding: 3px 0; border-bottom: 1px dashed var(--kolor-linia); }
.lista-osob li:last-child { border-bottom: 0; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 14px;
  border: 1px solid var(--kolor-wyroznienie-ramka);
  border-radius: 999px;
  background: var(--kolor-wyroznienie-tlo);
  color: var(--kolor-wyroznienie-tekst);
  font-weight: 700;
}
.chip-liczba { color: var(--kolor-tekst-drugi); font-size: .85rem; font-weight: 400; }
.wybor-opcji { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.wybor-opcji .opcja { display: flex; min-height: 44px; margin: 0 0 6px; font-size: .95rem; }
.wybor-opcji .opcja:has(input:checked) { border-color: var(--kolor-link); background: var(--kolor-zarezerwowany-tlo); }
.przypisanie-jezyka .przycisk[aria-pressed="true"] { background: var(--kolor-przycisk); color: var(--kolor-przycisk-tekst); }
@media (max-width: 960px) {
  .gora-przypisania, .uklad-przypisania { grid-template-columns: minmax(0, 1fr); }
  .panel-jezyka { position: static; }
}

/* Treść z panelem bocznym, np. edycja tekstu ze zmiennymi obok (#233). */
.uklad-boczny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.uklad-boczny > .karta, .glowna > .karta + .karta, .glowna > * + * { margin-top: 0; }
.glowna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.glowna > .formularz.szeroki { max-width: none; }
@media (max-width: 960px) {
  .uklad-boczny { grid-template-columns: minmax(0, 1fr); }
}

/* Panel nauczyciela (prototyp `nauczyciel.html`, #212): profil, skróty do sekcji, formularz
   z podglądem i karty zgłoszeń. */
/* Uprawnienia z długą nazwą przedmiotu zawijają się na telefonie (#216). */
.panel-nauczyciela .profil p { margin: 2px 0; overflow-wrap: anywhere; }
.panel-nauczyciela h1 { margin: 2px 0 4px; }
.panel-nauczyciela .sekcja { scroll-margin-top: 8px; }
.panel-nauczyciela > .karta { margin-top: 16px; }
.panel-nauczyciela form { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.panel-nauczyciela form > * { margin: 0; }
.skroty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 12px 0 0; }
.skroty a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.25;
  text-decoration: none;
}
.skroty a:hover { border-color: var(--kolor-naglowki); }
.licz {
  min-width: 1.8em;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--kolor-tlo);
  font-size: .8rem;
  text-align: center;
}
/* Dni zgłoszenia (prototyp `nauczyciel.html`, lista dat; #345): numer pola, data i „Usuń”, a w
   drugiej linii godziny tego dnia (D102, #361). „Od” i „Do” stoją nad polami w dwóch kolumnach,
   jak w sekcji „Godziny” prototypu (`.dwie`), więc przy 390 px pole godziny mieści też zegar
   12-godzinny („01:15 PM”) bez przewijania w bok (#394). */
#lista-dat { display: grid; gap: 14px; margin: 0 0 8px; }
.wiersz-daty { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.godziny-dnia {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  position: relative;
}
.godziny-dnia > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
fieldset.pole .wiersz-daty label { font-size: .88rem; color: var(--kolor-tekst-drugi); }
.usun {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-blad-tekst);
  font-size: 1.3rem;
  line-height: 1;
}
.usun:hover { border-color: var(--kolor-blad-tekst); background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
/* Rodzaj zgłoszenia (prototyp `nauczyciel.html`, `.wybory.dwa`) przełącza sekcje bez skryptu:
   „Co tydzień” chowa dni, „Jeden lub kilka dni” chowa sekcje cyklu. Przeglądarka bez `:has`
   pokazuje obie, a serwer bierze pola wybranego rodzaju (#212). */
#f-zglos:has(#rodzaj-cykl:checked) #dni,
#f-zglos:has(#rodzaj-dni:checked) .tylko-cykl { display: none; }
.wybory-rodzaju { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wybor-rodzaju { position: relative; min-width: 0; }
.wybor-rodzaju input {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: var(--kolor-link);
}
/* Z przedrostkiem panelu, bo `fieldset.pole label` wyśrodkowuje etykiety i zdejmuje pogrubienie. */
.panel-nauczyciela .wybor-rodzaju label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px 8px 40px;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.wybor-rodzaju .opis { font-weight: 400; font-size: .8rem; color: var(--kolor-tekst-drugi); }
.wybor-rodzaju input:checked + label { border-color: var(--kolor-naglowki); box-shadow: inset 0 0 0 1px var(--kolor-naglowki); }
.wybor-rodzaju input:focus-visible + label { outline: 3px solid var(--kolor-fokus); outline-offset: 2px; }
/* Dzień tygodnia cyklu jako pięć kafelków (prototyp `.kafelki.piec`): pole ukryte wizualnie,
   a stan pokazuje kafelek kolorem i znakiem „✓”. */
.dni-tygodnia-pole { min-width: 0; margin: 0; padding: 0; border: 0; }
.dni-tygodnia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.kafelek { position: relative; min-width: 0; }
.kafelek input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.panel-nauczyciela .kafelek label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  margin: 0;
  padding: 6px 2px;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.kafelek label:hover { border-color: var(--kolor-naglowki); }
.kafelek .znak { display: none; }
.kafelek input:checked + label { border-color: var(--kolor-przycisk); background: var(--kolor-przycisk); color: var(--kolor-przycisk-tekst); }
.kafelek input:checked + label .znak { display: inline; }
.kafelek input:focus-visible + label { outline: 3px solid var(--kolor-fokus); outline-offset: 2px; }
.kafelek input[aria-invalid="true"] + label,
.wybor-rodzaju input[aria-invalid="true"] + label { border: 2px solid var(--kolor-blad-tekst); }
/* Granice zakresu i godziny cyklu w dwóch kolumnach, etykieta nad polem (prototyp `.dwie`). */
.panel-nauczyciela .dwie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.panel-nauczyciela .dwie > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zakres-dat { margin-top: 12px; }
.pominiete { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.wybory-pominietych { display: grid; gap: 6px; }
.wybory-pominietych .opcja { display: flex; min-height: 44px; font-weight: 500; }
.wybory-pominietych .opcja:has(input:checked) { border-color: var(--kolor-naglowki); background: var(--kolor-zarezerwowany-tlo); }
.opcjonalne { font-weight: 400; color: var(--kolor-tekst-drugi); font-size: .88rem; }
.podglad {
  padding: 12px;
  border: 1px solid var(--kolor-linia);
  border-radius: 12px;
  background: var(--kolor-tlo);
}
.podglad h3 { margin: 0 0 4px; font-size: 1rem; color: var(--kolor-naglowki); }
.podglad p { margin: 4px 0; }
.podglad-licznik { font-weight: 700; }
.wspolne .etykieta { margin: 8px 0 4px; font-size: .82rem; font-weight: 700; color: var(--kolor-tekst-drugi); }
.podglad-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.podglad-lista > li {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-powierzchnia);
}
.p-data { font-weight: 700; }
.p-godz { color: var(--kolor-tekst-drugi); white-space: nowrap; }
/* Ostrzeżenia: symbol, poziom słownie i kolor (prototyp `htmlOstrzezen`). */
.ostrz { list-style: none; display: grid; gap: 4px; margin: 6px 0 0; padding: 0; }
.ostrz li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.35;
  /* Tekst z bazy, np. nazwa sali w kolizji, zawija się na telefonie (#216). `anywhere`, bo tylko
     ono zmniejsza najmniejszą szerokość elementu flex. */
  overflow-wrap: anywhere;
}
.o-sym { flex: 0 0 auto; min-width: 1em; text-align: center; font-weight: 700; }
.o-poziom { font-weight: 700; }
.o-blad { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.o-uwaga { background: var(--kolor-uwaga-tlo); color: var(--kolor-uwaga-tekst); }
.o-info { background: var(--kolor-info-tlo); color: var(--kolor-zarezerwowany-tekst); }
.lista-zgloszen { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-zgloszen > .karta + .karta { margin-top: 12px; }
.zgl-status { margin: 0; }
.zgl h3 { margin: 8px 0 2px; color: var(--kolor-naglowki); }
.zgl .zakres { margin: 0; }
.zgl details { margin-top: 8px; font-size: .92rem; }
.zgl summary { cursor: pointer; color: var(--kolor-link); font-weight: 700; }
dl.szczeg { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; font-size: .92rem; }
dl.szczeg dt { color: var(--kolor-tekst-drugi); }
dl.szczeg dd { margin: 0; overflow-wrap: anywhere; }
/* Godziny każdego dnia na karcie zgłoszenia, gdy dni mają różne (D102, #361). */
.godziny-dni { list-style: none; margin: 0; padding: 0; }
@media (max-width: 359px) {
  dl.szczeg { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.szczeg dd { margin-bottom: 4px; }
}
/* Stany zgłoszenia (prototyp: `st-oczekuje`, `st-rozpatrzone`, `st-wycofane`). */
.st-czeka {
  background: var(--kolor-uwaga-tlo);
  color: var(--kolor-uwaga-tekst);
  border: 1px dashed var(--kolor-uwaga-ramka);
}
.st-rozpatrzone { background: var(--kolor-zarezerwowany-tlo); color: var(--kolor-zarezerwowany-tekst); }
.st-wycofane { background: var(--kolor-neutralny-tlo); color: var(--kolor-tekst); }
/* Karta wskazana w adresie, np. z linku w e-mailu E3a (prototyp: `wyrozniona`). */
.karta-zgl:target { border-color: var(--kolor-ok-ramka); box-shadow: 0 0 0 3px var(--kolor-gotowe-tlo); }
.kto { font-weight: 700; }

/* Okno dialogowe, np. potwierdzenie wycofania zgłoszenia (prototyp `wspolne.css`). */
dialog {
  width: calc(100% - 32px);
  max-width: 560px;
  padding: 0;
  border: none;
  border-radius: 14px;
  box-shadow: var(--cien-okna);
  /* Tło z motywu, a nie domyślne przeglądarki, które w ciemnej skórce jest inne niż karty. */
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
}
dialog::backdrop { background: var(--kolor-zaslona); }
dialog .tresc { padding: 20px; }
dialog .tresc h2 { margin-top: 0; }
dialog .stopka { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 20px; }

/* Ekran Terminy (prototyp `terminy.html`, #212): zakładki jako odnośniki i karty zgłoszeń. */
.zakladki {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0;
  border-bottom: 2px solid var(--kolor-linia);
}
.zakladki a {
  margin-bottom: -2px;
  padding: 10px 18px 9px;
  min-height: 44px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  color: var(--kolor-naglowki);
  font-weight: 700;
  text-decoration: none;
}
.zakladki a:hover { background: var(--kolor-powierzchnia); }
.zakladki a[aria-current="page"] {
  border-color: var(--kolor-linia);
  border-bottom: 2px solid var(--kolor-powierzchnia);
  background: var(--kolor-powierzchnia);
  box-shadow: inset 0 3px 0 var(--kolor-info-ramka);
}
.licz-zakl { font-variant-numeric: tabular-nums; }
.karta-zgl + .karta-zgl { margin-top: 16px; }
.zgl-gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.zgl-gora h3 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-naglowki);
  color: var(--kolor-naglowki);
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.zgl-gora p { margin: 0; }
dl.zgl-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 10px 0 0; font-size: .9rem; }
dl.zgl-info dt { color: var(--kolor-tekst-drugi); }
dl.zgl-info dd { margin: 0; overflow-wrap: anywhere; }
.uwagi {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--kolor-info-ramka);
  border-radius: 0 8px 8px 0;
  background: var(--kolor-tlo);
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.et { color: var(--kolor-tekst-drugi); }
.karta-zgl .tabela-przewijana { margin-top: 12px; }
@media (max-width: 480px) {
  dl.zgl-info { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.zgl-info dd { margin-bottom: 4px; }
}

/* Rozpatrzenie zgłoszenia (prototyp `terminy.html`, #214): wiersz terminu z godzinami, salą,
   ostrzeżeniami i decyzją, pod nim „dla kogo”, a na telefonie każdy wiersz jako karta. Ukryte
   podpisy pól mają `position: absolute`, więc pudełko tabeli ma `position: relative`, żeby nie
   poszerzały strony. */
.karta-zgl .tabela-przewijana { position: relative; }
.tabela-terminow { font-size: .9rem; }
.tabela-terminow thead th { font-size: .82rem; }
.tabela-terminow .k-termin { width: 150px; font-weight: 700; color: var(--kolor-tekst); }
.k-termin .t-data { display: block; }
.k-termin .drobny { display: block; margin-top: 2px; font-weight: 400; }
.tabela-terminow .k-godz { width: 205px; }
.tabela-terminow .k-dec { width: 215px; }
.godz-pola { display: flex; gap: 6px; }
.pole-m { display: flex; flex-direction: column; }
.tabela-terminow label { margin: 0 0 2px; font-size: .78rem; font-weight: 700; color: var(--kolor-tekst-drugi); }
.tabela-terminow input[type="time"] { width: 6.6rem; min-height: 36px; padding: 5px 6px; }
.tabela-terminow select { max-width: 100%; min-height: 36px; padding: 5px 6px; }
/* Pola wiersza mają kolory i ramkę pól formularzy z motywu, a nie domyślne przeglądarki, które
   w ciemnej skórce są szare (D106). Font zostaje domyślny pola, bo pole godziny ma stałą szerokość,
   a większy font mógłby obciąć zegar 12-godzinny, jak w panelu nauczyciela (#394). */
.tabela-terminow input[type="time"], .tabela-terminow select, .tabela-terminow .powod input {
  border: 1px solid var(--kolor-tekst-drugi);
  border-radius: var(--promien-maly);
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
}
.tabela-terminow .et-sala { display: block; margin-top: 8px; }
.tabela-terminow .k-godz .przycisk { margin-top: 8px; }
.poj { margin: 4px 0 0; font-size: .78rem; color: var(--kolor-tekst-drugi); }
.poj:empty { display: none; }
.miejsce { margin: 4px 0 0; font-size: .8rem; font-weight: 700; color: var(--kolor-tekst); }
.miejsce:empty { display: none; }
.k-dec fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.radia { display: flex; flex-wrap: wrap; gap: 6px; }
.opcja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--kolor-linia);
  border-radius: 8px;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-tekst);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.tabela-terminow .opcja { margin: 0; font-size: .88rem; color: var(--kolor-tekst); }
.opcja input { width: 16px; height: 16px; margin: 0; accent-color: var(--kolor-link); }
.opcja:has(input:focus-visible) { outline: 3px solid var(--kolor-fokus); outline-offset: 1px; }
.opcja-tak:has(input:checked) { border-color: var(--kolor-ok-ramka); background: var(--kolor-ok-tlo); }
.opcja-nie:has(input:checked) { border-color: var(--kolor-blad-tekst); background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.powod { margin-top: 6px; }
.tabela-terminow .powod input { width: 100%; min-height: 36px; padding: 5px 8px; }
.powod .pomoc { margin-top: 2px; font-size: .78rem; }
.nie-mozna { margin: 6px 0 0; font-size: .82rem; font-weight: 700; color: var(--kolor-blad-tekst); }
.k-dec .blad { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--kolor-blad-tekst); }
.k-dec .blad p { margin: 0; }
.k-dec .blad:empty { display: none; }
.tabela-terminow input[aria-invalid="true"] { border: 2px solid var(--kolor-blad-tekst); }
/* Pasek z lewej przy błędzie twardym i przy błędzie zapisu, a nie tło: tekst pomocniczy na tle
   błędu nie ma kontrastu 4,5:1. */
tr.r-twarde > .k-termin, tr.r-twarde.r-dk > td, tr.r-blad > .k-termin, tr.r-blad.r-dk > td {
  box-shadow: inset 4px 0 0 var(--kolor-blad-tekst);
}
tr.r-odrzuc > * { background: var(--kolor-tlo); }
.tabela-terminow tr.r-glowny:not(.r-odrzuc) > * { padding-bottom: 4px; border-bottom: 0; }
.tabela-terminow tbody tr.r-dk > td { padding-top: 2px; }
.etyk-m { display: none; }
.bez-ostrz { margin: 0; font-size: .84rem; font-weight: 700; color: var(--kolor-gotowe-tekst); }
.dla-kogo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 26px;
  padding: 8px 10px;
  border: 1px solid var(--kolor-linia);
  border-radius: 10px;
  background: var(--kolor-tlo);
}
.dk-tytul {
  flex: 1 0 100%;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--kolor-tekst-drugi);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dla-kogo fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dla-kogo legend { margin: 0 0 3px; padding: 0; font-size: .78rem; font-weight: 700; color: var(--kolor-tekst-drugi); }
.opcje-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.opcja.mala, .tabela-terminow .opcja.mala { min-height: 32px; padding: 3px 9px; font-size: .84rem; }
.opcja.mala:has(input:checked) { border-color: var(--kolor-propozycja-ramka); background: var(--kolor-zarezerwowany-tlo); }
/* Bez własnego `display`, więc atrybut `hidden` (strona bez skryptu) ukrywa przyciski. */
.kl-przyciski { margin-left: 6px; }
.kl-przyciski .link-przycisk + .link-przycisk { margin-left: 10px; }
.link-przycisk {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--kolor-link);
  font: 700 .82rem var(--font-tekst);
  text-align: left;
  text-decoration: underline;
}
.link-przycisk:hover { border: 0; background: none; color: var(--kolor-link-najechany); }
.zgl-dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kolor-linia);
}
/* Działania zbiorcze nad tabelą i podsumowanie decyzji pod nią (prototyp: `pasek-zbiorczy`,
   `wspolny-powod`, `podsum-dec`, #214). Pole wspólnego powodu ma `display: flex`, więc atrybut
   `hidden` potrzebuje własnej reguły. */
.pasek-zbiorczy { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 14px 0 8px; }
.wspolny-powod { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-left: auto; }
.wspolny-powod[hidden] { display: none; }
.wspolny-powod label { width: 100%; margin: 0 0 2px; font-size: .8rem; font-weight: 700; color: var(--kolor-tekst-drugi); }
.wspolny-powod input { width: 250px; max-width: 100%; min-height: 34px; padding: 5px 8px; }
.wspolny-powod input[aria-invalid="true"] { border: 2px solid var(--kolor-blad-tekst); }
.wspolny-powod .pomoc, .wspolny-powod .blad { flex-basis: 100%; font-size: .78rem; }
.wspolny-powod .blad { font-size: .85rem; font-weight: 700; color: var(--kolor-blad-tekst); }
.wspolny-powod .blad p { margin: 0; }
.wspolny-powod .blad:empty { display: none; }
@media (max-width: 820px) {
  .wspolny-powod { margin-left: 0; }
}
.podsum-dec { flex: 1 1 280px; margin: 0; font-size: .9rem; }
/* Karta w trakcie działania zbiorczego: „Zatwierdź decyzje” wyłączone do podmiany karty. */
.karta-zgl[aria-busy="true"] { cursor: progress; }
.karta-zgl .przycisk:disabled { opacity: .55; cursor: not-allowed; }
.tekst-blad { font-weight: 700; color: var(--kolor-blad-tekst); }
.bledy-karty { flex-basis: 100%; }
.bledy-karty:empty { display: none; }
.bledy-karty:focus { outline: none; }
.bledy-karty .komunikat { margin: 0; }
.bledy-karty ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 820px) {
  .tabela-terminow thead { display: none; }
  .tabela-terminow, .tabela-terminow tbody, .tabela-terminow tr, .tabela-terminow th, .tabela-terminow td {
    display: block;
    width: auto !important;
  }
  .tabela-terminow tr { margin: 0 0 10px; padding: 4px 0; border: 1px solid var(--kolor-linia); border-radius: 10px; }
  .tabela-terminow tr[hidden] { display: none; }
  .tabela-terminow tbody tr > * { padding: 6px 12px; border-bottom: 0; }
  .tabela-terminow tr.r-glowny:not(.r-odrzuc) { margin-bottom: 0; border-bottom: 0; border-radius: 10px 10px 0 0; }
  .tabela-terminow tr.r-dk { border-top: 0; border-radius: 0 0 10px 10px; }
  .etyk-m {
    display: block;
    margin-bottom: 2px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--kolor-tekst-drugi);
    text-transform: uppercase;
    letter-spacing: .03em;
  }
}
/* Rozpatrzone dziś i wcześniej (prototyp: `karta-rozp`, `wczesniej`). */
.naglowek-rozp { margin: 24px 0 8px; font-size: 1.15rem; }
.karta-rozp + .karta-rozp { margin-top: 12px; }
.karta-rozp h3 { margin: 0; font-family: var(--font-naglowki); color: var(--kolor-naglowki); font-size: 1.05rem; overflow-wrap: anywhere; }
.karta-rozp p { margin: 4px 0; }
.karta-rozp .tabela-przewijana { margin-top: 6px; font-size: .86rem; }
.dec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.dec-tak { background: var(--kolor-gotowe-tlo); color: var(--kolor-gotowe-tekst); }
.dec-nie { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.wczesniej { margin-top: 16px; }
.wczesniej summary { color: var(--kolor-link); font-weight: 700; cursor: pointer; }
.wczesniej ul { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; overflow-wrap: anywhere; }

/* Dodanie bezpośrednie i opublikowane terminy (prototyp `terminy.html`, #215): formularz w siatce
   z podglądem w ramce przerywanej, tabela terminów po dniach ze źródłem i konfliktem do obsługi. */
.siatka-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; margin-top: 12px; }
.godz-f { display: flex; gap: 10px; }
.godz-f > .pole { flex: 1 1 0; min-width: 0; }
.pole-dk { margin-top: 14px; }
/* Poza tabelą „dla kogo” nie ma przewijanego pudełka, więc długa nazwa egzaminu się zawija. */
.pole-dk .dla-kogo fieldset { max-width: 100%; }
.pole-dk .dla-kogo legend { overflow-wrap: anywhere; }
.pole-sala { max-width: 320px; margin-top: 14px; }
.podglad-f { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--kolor-linia); border-radius: 12px; background: var(--kolor-tlo); }
.podglad-f h3 { margin: 0 0 6px; font-size: .95rem; color: var(--kolor-naglowki); }
.podsum-terminu { margin: 0 0 8px; overflow-wrap: anywhere; }
#d-bledy { margin-top: 12px; }
/* Opis terminu na stronie potwierdzenia odwołania ma nazwy sali, nauczyciela i przedmiotów. */
.potwierdzenie-terminu { overflow-wrap: anywhere; }
.pasek-stanu { margin: 6px 0; font-size: .86rem; color: var(--kolor-tekst-drugi); }
.pasek-stanu strong { color: var(--kolor-tekst); }
/* Na telefonie tabela przewija się w swoim pudełku, zamiast ściskać „dla kogo” do kilku liter. */
.bloki { min-width: 720px; font-size: .87rem; }
.bloki tr.w-dzien th { background: var(--kolor-tlo); color: var(--kolor-naglowki); font-size: .9rem; }
.bloki .k-godz-b { font-weight: 700; color: var(--kolor-tekst); }
.bloki .akcje { margin-top: 6px; }
.powody { margin: 4px 0 0; padding-left: 18px; font-size: .8rem; font-weight: 400; }
tr.r-konflikt > th { box-shadow: inset 4px 0 0 var(--kolor-blad-tekst); }
.zrodlo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.zr-zgl { background: var(--kolor-zarezerwowany-tlo); color: var(--kolor-zarezerwowany-tekst); border-color: var(--kolor-propozycja-ramka); }
.zr-sekr { background: var(--kolor-powierzchnia); color: var(--kolor-naglowki); border-color: var(--kolor-linia); }
.st-konflikt {
  background: var(--kolor-powierzchnia);
  color: var(--kolor-blad-tekst);
  border: 1px dashed var(--kolor-blad-tekst);
}

/* Kolumna „Zapotrzebowanie” obok zakładek ekranu Terminy (prototyp `terminy.html`, #66): treść
   ekranu na całą szerokość okna, a od 1200 px kolumna z prawej, przyklejona przy przewijaniu;
   węższy ekran ma ją pod zakładką i odnośnik do niej na górze. */
main.szeroki { max-width: none; }
.do-zap { display: inline-block; margin-top: 10px; font-size: .88rem; }
.uklad-terminy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.glowna-terminy { min-width: 0; }
@media (min-width: 1200px) {
  .uklad-terminy { grid-template-columns: minmax(0, 1fr) 410px; }
  .boczna { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 2px; }
  .do-zap { display: none; }
}
@media (min-width: 1600px) { .uklad-terminy { grid-template-columns: minmax(0, 1fr) 470px; } }
.boczna .karta { padding: 14px; }
.boczna h2 { margin: 0 0 4px; font-size: 1.15rem; }
.boczna .karta > p { margin: 0 0 6px; }
/* Przełącznik i filtr pokazuje skrypt, więc bez niego atrybut `hidden` ukrywa je mimo `display`. */
.przelacz-szkole[hidden], .zap-filtr[hidden] { display: none; }
.przelacz-szkole { display: inline-flex; margin: 6px 0; border: 1px solid var(--kolor-linia); border-radius: var(--promien-przycisku); overflow: hidden; }
.przelacz-szkole button {
  min-height: 38px;
  padding: 6px 18px;
  border: 0;
  border-radius: 0;
  background: var(--kolor-powierzchnia);
  color: var(--kolor-naglowki);
  font: 700 .9rem var(--font-tekst);
}
.przelacz-szkole button + button { border-left: 1px solid var(--kolor-linia); }
.przelacz-szkole button[aria-pressed="true"] { background: var(--kolor-przycisk); color: var(--kolor-przycisk-tekst); }
/* Obrys fokusu do środka przycisku, bo pudełko przełącznika przycina to, co wystaje. */
.przelacz-szkole button:focus-visible { outline-offset: -5px; }
/* Obrys w aktywnym przycisku leży na jego tle, a kolor fokusu ma na nim w obu skórkach kontrast
   poniżej 3:1 (rozdz. 14, WCAG 1.4.11), więc ma kolor tekstu przycisku (#66). */
.przelacz-szkole button[aria-pressed="true"]:focus-visible { outline-color: var(--kolor-przycisk-tekst); }
.zap-filtr { display: flex; align-items: flex-start; gap: 7px; min-height: 30px; margin: 4px 0; }
.zap-filtr input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; }
.zap-filtr label { margin: 0; font-size: .86rem; font-weight: 500; }
.zap-podsum { margin: 6px 0; font-size: .85rem; }
.zap { font-size: .84rem; }
.zap th, .zap td { padding: 5px 6px; }
.zap thead th { font-size: .78rem; vertical-align: bottom; }
.zap .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zap tr.zap-p > * { border-top: 2px solid var(--kolor-linia); background: var(--kolor-tlo); }
.zap tr.zap-p th { font-weight: 700; color: var(--kolor-naglowki); overflow-wrap: anywhere; }
.zap tr.zap-k th { padding-left: 18px; font-weight: 500; color: var(--kolor-tekst); overflow-wrap: anywhere; }
.zap th .drobny { display: block; font-weight: 400; color: var(--kolor-tekst-drugi); }
.zap-dodaj { display: inline-block; margin-top: 2px; font-size: .82rem; }
.stan-zap { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sz-brak { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.sz-malo { background: var(--kolor-uwaga-tlo); color: var(--kolor-uwaga-tekst); }
.sz-ok { background: var(--kolor-gotowe-tlo); color: var(--kolor-gotowe-tekst); }
.zap-objasnienie { margin-top: 10px; }
.zap-objasnienie p { margin: 0 0 6px; }
/* „Z zapotrzebowania” pod „dla kogo” w wierszu przyjmowania terminu (prototyp `htmlDlaKogo`). */
.dk-zap { flex: 1 0 100%; margin: 2px 0 0; font-size: .84rem; overflow-wrap: anywhere; }
@media print {
  .do-zap, .przelacz-szkole, .zap-filtr { display: none !important; }
  .boczna { position: static; max-height: none; overflow: visible; }
}

/* Panel nauczyciela, rozstrzygnięcie i „Moja dostępność” (prototyp `nauczyciel.html`, #216). */
.o-kolizja { background: var(--kolor-powierzchnia); color: var(--kolor-blad-tekst); border: 1px dashed var(--kolor-blad-tekst); }
.zgl h4 { margin: 10px 0 2px; color: var(--kolor-naglowki); }
.zgl h4 + .drobny { margin: 0 0 4px; }
ul.decyzje { list-style: none; margin: 4px 0 0; padding: 0; font-size: .92rem; }
.decyzje li { padding: 6px 0; border-top: 1px solid var(--kolor-linia); overflow-wrap: anywhere; }
.decyzje li:first-child { padding-top: 2px; border-top: 0; }
.dec-data { display: block; font-weight: 700; }
.dec-kto { display: block; margin-top: 2px; color: var(--kolor-tekst-drugi); }
.st-przyjety { background: var(--kolor-gotowe-tlo); color: var(--kolor-gotowe-tekst); }
.st-odrzucony { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }
.lista-terminow { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-terminow > .karta + .karta { margin-top: 8px; }
.blok { padding: 10px 12px; overflow-wrap: anywhere; }
.blok p { margin: 1px 0; }
.b-data { font-weight: 700; }
.znacznik { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: .74rem; font-weight: 700; }
.zn-dzis { background: var(--kolor-naglowki); color: var(--kolor-powierzchnia); }
.zn-zrodlo { background: var(--kolor-zarezerwowany-tlo); color: var(--kolor-zarezerwowany-tekst); }
/* „Moje egzaminy” i licznik rezerwacji na karcie terminu (prototyp `nauczyciel.html`, P6, #271). */
.b-rez { font-weight: 600; }
.dzien-egzaminow h3 { margin: 14px 0 6px; font-size: 1rem; color: var(--kolor-naglowki); }
.egz-nauczyciela { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.egz-godz .duza { display: block; font-weight: 700; font-size: 1.25rem; color: var(--kolor-naglowki); line-height: 1.15; }
.egz-godz .drobny { display: block; line-height: 1.3; }
.egz-opis div { margin: 1px 0; }
.egz-uczen { font-weight: 700; }
.zn-minal { background: var(--kolor-uwaga-tlo); color: var(--kolor-uwaga-tekst); }
/* Dzień po terminie zdania klasy (prototyp `nauczyciel.html`, `zn-awaryjny`; #271/14287 pkt 11). */
.zn-awaryjny {
  border: 1px dashed var(--kolor-uwaga-ramka);
  background: var(--kolor-uwaga-tlo);
  color: var(--kolor-uwaga-tekst);
  font-weight: 600;
}

/* Zestawienie SP i LO (prototyp `macierz.html`, rozdz. 10D, pokaz P8, #273): macierz
   w przewijanym pudełku z własną wysokością, bo stały nagłówek działa tylko w przewijanym
   przodku, ze stałym pierwszym wierszem nagłówka i stałą kolumną ucznia. Każda komórka ma
   `position: relative`, więc ukryty tekst zostaje w pudełku i nie poszerza strony na telefonie
   (#199 pkt 4). */
/* `scroll-padding`: komórka, na którą wchodzi fokus, przewija się spod stałego nagłówka i stałej
   kolumny ucznia (jej szerokość z odstępami), więc fokus jest widoczny (rozdz. 14, prototyp).
   Tam, gdzie to nie wystarcza, komórkę odsłania `uczniowie/js/zestawienie.js` (#331). */
.macierz-pudelko {
  overflow: auto;
  max-height: calc(100vh - 96px);
  scroll-padding: 4.5rem 0 0 13rem;
}
.tabela.macierz {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
}
.tabela.macierz th, .tabela.macierz td {
  position: relative;
  padding: 3px 4px;
  text-align: center;
  vertical-align: middle;
}
.tabela.macierz thead tr:first-child > * { position: sticky; top: 0; z-index: 3; }
.tabela.macierz .k-uczen {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 12rem;
  min-width: 12rem;
  max-width: 12rem;
  padding-left: 10px;
  text-align: left;
  background: var(--kolor-powierzchnia);
  box-shadow: inset -1px 0 0 var(--kolor-linia);
}
/* Narożnik nad stałymi nagłówkami przedmiotów, więc po przewinięciu w bok nie chowa się pod nimi.
   Selektor ma `tr:first-child`, żeby wygrał z `z-index` całego stałego wiersza (#331 pkt 2). */
.tabela.macierz thead tr:first-child > .k-uczen { z-index: 4; background: var(--kolor-tlo); }
.macierz tbody .k-uczen { font-weight: 400; }
.macierz .imie { font-weight: 700; overflow-wrap: anywhere; }
.macierz .kl, .macierz .pod { display: block; font-size: .75rem; font-weight: 500; color: var(--kolor-tekst-drugi); }
.macierz .k-postep { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Szerokość jak w prototypie (128–150 px): dłuższa etykieta się zawija, więc komórka z fokusem
   mieści się obok stałej kolumny ucznia także przy 390 px (#331 pkt 3). */
.macierz .k-stan { min-width: 8rem; max-width: 9.375rem; text-align: left; }
.macierz .kol { min-width: 4.5rem; max-width: 7rem; }
.macierz thead .kol { font-size: .78rem; line-height: 1.2; }
.macierz .r2-etykieta { text-align: right; font-weight: 600; color: var(--kolor-tekst-drugi); }
.macierz .licz { color: var(--kolor-tekst-drugi); font-variant-numeric: tabular-nums; }
.macierz .licz.niezero { color: var(--kolor-naglowki); font-weight: 700; }
.kom { position: relative; display: block; border-radius: 6px; text-decoration: none; }
.kom > .status {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  padding: 0 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kom-stan > .status { justify-content: flex-start; white-space: normal; text-align: left; }
.kom-stan + .kom-stan { margin-top: 3px; }
a.kom:hover > .status { box-shadow: 0 0 0 2px var(--kolor-link); }
/* Komórka z fokusem nad sąsiednimi, żeby obrys fokusu nie chował się pod nimi (prototyp). */
a.kom:focus-visible { z-index: 1; }
.kom.wyrozniona > .status { box-shadow: 0 0 0 3px var(--kolor-ok-ramka); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; padding: 0; list-style: none; }