/* Proxapp — jeden arkusz na całą aplikację.
   Paleta zgodna z protokołem, żeby ekran i wydruk wyglądały jak jedna rzecz. */

:root {
  color-scheme: light dark;

  --tlo: #f4f6f8;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f7f9fa;
  --tekst: #15202b;
  --tekst-slaby: #5b6775;
  --linia: #d7dee5;
  --linia-slaba: #e9edf1;
  --akcent: #124559;
  --akcent-tlo: #eef3f5;
  --akcent-tekst: #ffffff;
  --blad: #a4262c;
  --blad-tlo: #fdf3f4;
  --ok: #1d6f42;
  --ok-tlo: #eff7f2;

  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --promien: 6px;
  --cien: 0 1px 2px rgba(10, 20, 30, .06), 0 6px 18px rgba(10, 20, 30, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #11161b;
    --powierzchnia: #1a2129;
    --powierzchnia-2: #202932;
    --tekst: #e6ebf0;
    --tekst-slaby: #9aa7b4;
    --linia: #2d3845;
    --linia-slaba: #232c35;
    --akcent: #5aa7c4;
    --akcent-tlo: #1b2b34;
    --akcent-tekst: #0b1116;
    --blad: #e8787e;
    --blad-tlo: #2a1b1d;
    --ok: #6bc795;
    --ok-tlo: #16271e;
    --cien: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Górny pasek ---------- */

.pasek {
  background: var(--powierzchnia);
  border-bottom: 1px solid var(--linia);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pasek-srodek {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  flex-wrap: wrap;
}

.znak { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.znak img { height: 26px; width: auto; display: block; }
.znak span {
  font-weight: 600; letter-spacing: .02em; color: var(--tekst);
}

.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.menu a {
  padding: 7px 11px;
  border-radius: var(--promien);
  color: var(--tekst-slaby);
  font-weight: 500;
  white-space: nowrap;
}
.menu a:hover { background: var(--powierzchnia-2); color: var(--tekst); text-decoration: none; }
.menu a.teraz { background: var(--akcent-tlo); color: var(--akcent); }

.pasek-konto { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pasek-konto .kto { color: var(--tekst-slaby); font-size: 13px; }

/* ---------- Treść ---------- */

main { max-width: 1180px; margin: 0 auto; padding: 28px 16px 64px; }

h1 { font-size: 23px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
.podtytul { color: var(--tekst-slaby); margin: 0 0 24px; }

.karta {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 20px;
}
.karta + .karta { margin-top: 16px; }

.waska { max-width: 420px; margin: 56px auto; }
.waska .karta { box-shadow: var(--cien); padding: 26px; }
.waska h1 { margin-bottom: 18px; }

/* ---------- Formularze ---------- */

.pole { margin-bottom: 15px; }
.pole label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.pole .wskazowka { font-size: 12px; color: var(--tekst-slaby); margin-top: 5px; }

/* Wyliczanka typów pomijała pola bez atrybutu `type` — a domyślnie jest to
   zwykły tekst. Takie pola dostawały ramkę domyślną przeglądarki, szerszą
   od swojego miejsca, i nachodziły na sąsiadów. Dlatego teraz odwrotnie:
   stylujemy każde pole poza tymi, które mają własny wygląd. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--powierzchnia);
  color: var(--tekst);
  font-family: inherit;
  font-size: 15px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akcent);
  outline-offset: -1px;
  border-color: var(--akcent);
}
textarea { resize: vertical; min-height: 92px; }

.ptaszek { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.ptaszek input { width: auto; margin: 0; }
.ptaszek label { margin: 0; font-weight: 400; }

button, .przycisk {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--akcent);
  border-radius: var(--promien);
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
button:hover, .przycisk:hover { filter: brightness(1.12); text-decoration: none; }
.przycisk-cichy, button.cichy {
  background: transparent;
  color: var(--tekst-slaby);
  border-color: var(--linia);
}
.przycisk-cichy:hover, button.cichy:hover { background: var(--powierzchnia-2); color: var(--tekst); filter: none; }
button.groznie { background: transparent; color: var(--blad); border-color: var(--linia); }
button.groznie:hover { background: var(--blad-tlo); filter: none; }

/* ---------- Komunikaty ---------- */

.komunikat {
  padding: 11px 14px;
  border-radius: var(--promien);
  border: 1px solid;
  margin-bottom: 18px;
  font-size: 14px;
}
.komunikat.blad { background: var(--blad-tlo); border-color: var(--blad); color: var(--blad); }
.komunikat.ok { background: var(--ok-tlo); border-color: var(--ok); color: var(--ok); }
.komunikat ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Tabele ---------- */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-slaby);
  font-weight: 600;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--linia);
}
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linia-slaba); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.liczba, th.liczba { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 13.5px; }

.pusto { color: var(--tekst-slaby); padding: 28px 0; text-align: center; }

/* ---------- Etykiety ---------- */

.etykieta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.etykieta.szary { background: #e7ebef; color: #4a5560; }
.etykieta.niebieski { background: #e4eef6; color: #1c5680; }
.etykieta.zielony { background: #e4f3ea; color: #1d6f42; }
.etykieta.pomaranczowy { background: #fcefdf; color: #9a5b12; }
.etykieta.fioletowy { background: #eee9f7; color: #5a3f9e; }
.etykieta.ciemnozielony { background: #dceee3; color: #14512f; }
.etykieta.czerwony { background: #fbe6e7; color: #a4262c; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .etykieta.szary { background: #2b343d; color: #b4bec8; }
  :root:not([data-theme="light"]) .etykieta.niebieski { background: #1c3444; color: #8fc4e2; }
  :root:not([data-theme="light"]) .etykieta.zielony { background: #1a3328; color: #85d2a5; }
  :root:not([data-theme="light"]) .etykieta.pomaranczowy { background: #3a2c18; color: #e8b273; }
  :root:not([data-theme="light"]) .etykieta.fioletowy { background: #2b2440; color: #b9a5e6; }
  :root:not([data-theme="light"]) .etykieta.ciemnozielony { background: #16301f; color: #7cc79b; }
  :root:not([data-theme="light"]) .etykieta.czerwony { background: #3a2023; color: #e8878d; }
}

.nieaktywny { opacity: .5; }

/* ---------- Ekran zgłoszenia ---------- */

.naglowek-zgloszenia {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.naglowek-zgloszenia h1 { margin: 2px 0 0; }

/* Treść szeroko, panele z boku. Wszystko na jednym ekranie, bez zakładek —
   to jest cała różnica wobec Jiry. */
.dwie-kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.dwie-kolumny h2:first-child { margin-top: 0; }

table.dane th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--tekst-slaby);
  border-bottom: none;
  padding: 5px 14px 5px 0;
  white-space: nowrap;
  vertical-align: top;
  width: 1%;
}
table.dane td { border-bottom: none; padding: 5px 0; }

.wpis { padding: 12px 0; border-top: 1px solid var(--linia-slaba); }
.wpis:first-of-type { border-top: none; }
.wpis-glowa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  font-size: 13px;
}
.wpis-glowa .mono { color: var(--tekst-slaby); font-size: 12.5px; }
.wpis.zdarzenie { color: var(--tekst-slaby); font-size: 14px; }

/* ---------- Zdjęcia i pliki ---------- */

.galeria { display: flex; flex-wrap: wrap; gap: 12px; }
.plik { width: 150px; }
.plik img {
  width: 150px; height: 110px; object-fit: cover;
  border: 1px solid var(--linia); border-radius: var(--promien); display: block;
}
.plik .dokument {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 150px; height: 110px; padding: 8px;
  border: 1px solid var(--linia); border-radius: var(--promien);
  background: var(--powierzchnia-2); font-size: 12.5px; word-break: break-word;
}
.plik .opis { font-size: 12px; color: var(--tekst-slaby); margin-top: 4px; }

tfoot td { border-top: 1px solid var(--linia); border-bottom: none; }

/* ---------- Strona główna: kolejki ---------- */

.dwie-kolumny-rowne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kolejka { padding: 16px 18px; }
.kolejka + .kolejka { margin-top: 12px; }
.kolejka-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kolejka-glowa h3 { font-size: 15px; font-weight: 600; margin: 0; }
.kolejka-glowa .licznik {
  font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--akcent);
}
.kolejka-opis { font-size: 12.5px; color: var(--tekst-slaby); margin-top: 1px; }
.kolejka.pusta { opacity: .62; }
.kolejka.pusta .licznik { color: var(--tekst-slaby); }
.kolejka .nic { font-size: 13px; color: var(--tekst-slaby); padding: 10px 0 2px; }

.kolejka-lista { margin-top: 10px; }
.kolejka-lista td { padding: 7px 10px 7px 0; font-size: 14px; }
.kolejka-lista td.nr { width: 1%; white-space: nowrap; font-size: 12.5px; vertical-align: top; }
.kolejka-lista .gdzie { font-size: 12px; color: var(--tekst-slaby); }
.kolejka-lista .dni { font-size: 12.5px; color: var(--tekst-slaby); white-space: nowrap; }
.kolejka-lista .dni.dawno { color: var(--blad); font-weight: 500; }

/* ---------- Przegląd ---------- */

.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.kafelek {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 14px 16px;
}
.kafelek.alarm { border-color: var(--blad); }
.kafelek.uwaga { border-color: var(--akcent); }
.liczba-duza {
  font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  line-height: 1.1; color: var(--tekst);
}
.kafelek.alarm .liczba-duza { color: var(--blad); }
.etykieta-kafelka { font-size: 13px; font-weight: 500; margin-top: 4px; }
.kafelek .dopisek { font-size: 11.5px; color: var(--tekst-slaby); margin-top: 1px; }

/* Kafelek bywa odnośnikiem do przefiltrowanej listy. */
a.kafelek { display: block; color: inherit; }
a.kafelek:hover { text-decoration: none; border-color: var(--akcent); }
a.kafelek:hover .liczba-duza { color: var(--akcent); }

/* Powód, dla którego pozycja wisi na stronie głównej. */
.powod {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; white-space: nowrap;
  background: var(--powierzchnia-2); color: var(--tekst-slaby);
  border: 1px solid var(--linia);
}
.powod.po-terminie { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad); }
.powod.do-zafakturowania { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent); }
.powod.nieprzypisane { background: #fcefdf; color: #874f0d; border-color: #e0b878; }
.powod.brak-protokołu { background: #fdf4dc; color: #7a5a06; border-color: #ddc47a; }
.powod.protokół-bez-podpisu { background: #eee9f7; color: #4e3590; border-color: #c0afe4; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .powod.nieprzypisane { background: #3a2c18; color: #e8b273; border-color: #6a4f26; }
  :root:not([data-theme="light"]) .powod.brak-protokołu { background: #352d12; color: #ddc47a; border-color: #5d4f1e; }
  :root:not([data-theme="light"]) .powod.protokół-bez-podpisu { background: #2b2440; color: #b9a5e6; border-color: #483c67; }
}

.gdzie { font-size: 12px; color: var(--tekst-slaby); }
.dni { font-size: 13px; color: var(--tekst-slaby); white-space: nowrap; }
.dni.dawno { color: var(--blad); font-weight: 500; }

/* ---------- Status jako lista rozwijana ----------
   Kolor niesie znaczenie także tam, gdzie status da się zmienić. Te same
   barwy co etykiety, żeby jedno i to samo nie wyglądało w aplikacji dwojako. */

select.status-wybor {
  font-weight: 500;
  border-width: 1px;
  border-style: solid;
}
td select.status-wybor { width: auto; min-width: 158px; padding: 5px 9px; font-size: 13px; }

select.status-wybor.szary { background: #e7ebef; color: #3f4a55; border-color: #c9d2da; }
select.status-wybor.niebieski { background: #e4eef6; color: #184a70; border-color: #b9d4e8; }
select.status-wybor.zielony { background: #e4f3ea; color: #175c37; border-color: #b4dcc4; }
select.status-wybor.pomaranczowy { background: #fcefdf; color: #874f0d; border-color: #eccfa6; }
select.status-wybor.fioletowy { background: #eee9f7; color: #4e3590; border-color: #cdc0ea; }
select.status-wybor.ciemnozielony { background: #dceee3; color: #10452a; border-color: #a9d2bb; }
select.status-wybor.czerwony { background: #fbe6e7; color: #8f2026; border-color: #eebfc2; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.status-wybor.szary { background: #2b343d; color: #b4bec8; border-color: #3a4652; }
  :root:not([data-theme="light"]) select.status-wybor.niebieski { background: #1c3444; color: #8fc4e2; border-color: #2a4a60; }
  :root:not([data-theme="light"]) select.status-wybor.zielony { background: #1a3328; color: #85d2a5; border-color: #274a38; }
  :root:not([data-theme="light"]) select.status-wybor.pomaranczowy { background: #3a2c18; color: #e8b273; border-color: #543f22; }
  :root:not([data-theme="light"]) select.status-wybor.fioletowy { background: #2b2440; color: #b9a5e6; border-color: #3d3459; }
  :root:not([data-theme="light"]) select.status-wybor.ciemnozielony { background: #16301f; color: #7cc79b; border-color: #22452e; }
  :root:not([data-theme="light"]) select.status-wybor.czerwony { background: #3a2023; color: #e8878d; border-color: #552f34; }
}

/* Rozwinięta lista: każdy status w swojej barwie, nie tylko ten wybrany.
   Przy przestawianiu statusu wybiera się wtedy kolor, nie pozycję na liście. */

option.opcja-szary { background: #e7ebef; color: #3f4a55; }
option.opcja-niebieski { background: #e4eef6; color: #184a70; }
option.opcja-zielony { background: #e4f3ea; color: #175c37; }
option.opcja-pomaranczowy { background: #fcefdf; color: #874f0d; }
option.opcja-fioletowy { background: #eee9f7; color: #4e3590; }
option.opcja-ciemnozielony { background: #dceee3; color: #10452a; }
option.opcja-czerwony { background: #fbe6e7; color: #8f2026; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) option.opcja-szary { background: #2b343d; color: #b4bec8; }
  :root:not([data-theme="light"]) option.opcja-niebieski { background: #1c3444; color: #8fc4e2; }
  :root:not([data-theme="light"]) option.opcja-zielony { background: #1a3328; color: #85d2a5; }
  :root:not([data-theme="light"]) option.opcja-pomaranczowy { background: #3a2c18; color: #e8b273; }
  :root:not([data-theme="light"]) option.opcja-fioletowy { background: #2b2440; color: #b9a5e6; }
  :root:not([data-theme="light"]) option.opcja-ciemnozielony { background: #16301f; color: #7cc79b; }
  :root:not([data-theme="light"]) option.opcja-czerwony { background: #3a2023; color: #e8878d; }
}

/* ---------- Pasek statusu na wierszu ----------
   Etykieta mówi, w jakim stanie jest zgłoszenie, ale żeby to odczytać, trzeba
   dojechać wzrokiem do jej kolumny. Pasek przy numerze daje stan całego wiersza
   od razu, więc po kolumnie zgłoszeń da się przebiec samym kolorem. */

tr.pasek > td:first-child {
  box-shadow: inset 3px 0 0 var(--pasek);
  padding-left: 13px;
}

.pasek.szary { --pasek: #8c98a4; }
.pasek.niebieski { --pasek: #2f7fb8; }
.pasek.zielony { --pasek: #2f9e5e; }
.pasek.pomaranczowy { --pasek: #d98324; }
.pasek.fioletowy { --pasek: #7a5bd0; }
.pasek.ciemnozielony { --pasek: #1d7a4a; }
.pasek.czerwony { --pasek: #cf4049; }

/* Po terminie bije kolor statusu — to jest ta informacja, która musi zaboleć. */
tr.pasek.po-terminie > td:first-child { box-shadow: inset 3px 0 0 var(--blad); }

/* ---------- Przegląd: rozkład pracy ---------- */

.rozklad { display: flex; flex-direction: column; gap: 2px; }
.rozklad-wiersz {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  padding: 7px 8px;
  border-radius: var(--promien);
  color: inherit;
}
.rozklad-wiersz:hover { background: var(--powierzchnia-2); text-decoration: none; }
.rozklad-nazwa { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rozklad-pasek { height: 10px; background: var(--linia-slaba); border-radius: 999px; overflow: hidden; }
.rozklad-pasek .wypelnienie { display: block; height: 100%; border-radius: 999px; }
.rozklad-ile { text-align: right; font-size: 15px; }

.kropka { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kropka.szary, .wypelnienie.szary { background: #8d99a5; }
.kropka.niebieski, .wypelnienie.niebieski { background: #3a7fae; }
.kropka.zielony, .wypelnienie.zielony { background: #2e9159; }
.kropka.pomaranczowy, .wypelnienie.pomaranczowy { background: #d08a2c; }
.kropka.fioletowy, .wypelnienie.fioletowy { background: #7a5fc4; }
.kropka.ciemnozielony, .wypelnienie.ciemnozielony { background: #1d6f42; }
.kropka.czerwony, .wypelnienie.czerwony { background: #b5363d; }

/* ---------- Przegląd: grupy po statusie ---------- */

.grupa { padding: 14px 18px; }
.grupa + .grupa { margin-top: 10px; }
.grupa-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.grupa-ile { color: var(--tekst-slaby); font-size: 14px; }
.grupa table td { padding: 7px 12px 7px 0; font-size: 14px; }
.grupa td.nr { width: 1%; white-space: nowrap; font-size: 12.5px; vertical-align: top; }
.po-terminie { color: var(--blad); font-weight: 500; }

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

/* ---------- Grupy pól w formularzach ---------- */

/* Wcięcie zamiast ramki: zagnieżdżone karty robiły pudełko w pudełku. */
.podgrupa {
  border-left: 2px solid var(--linia);
  padding-left: 14px;
  margin: 0 0 15px 2px;
}
.pole.bez-marginesu { margin-bottom: 0; }

/* Rząd pól obok siebie — zamiast powtarzanych stylów w szablonach. */
/* Podgląd skanu podpisu. Białe tło niezależnie od motywu, bo tak samo
   wyjdzie na protokole — ciemny motyw nie może pokazywać czegoś innego,
   niż zobaczy klient na papierze. */

.podglad-podpisu {
  background: #fff;
  border: 1px solid var(--ramka);
  border-radius: 6px;
  padding: 10px 14px;
  display: inline-block;
}
.podglad-podpisu img { display: block; max-height: 90px; max-width: 100%; }

a.kto { color: inherit; text-decoration: none; }

/* Poczekalnia: propozycja wyróżniona, żeby główna akcja była pierwszą rzeczą na oku. */
.karta.propozycja { border-left: 3px solid var(--akcent); }
.ramka-poczekalni { margin-bottom: 16px; border-left: 3px solid var(--akcent); }
.ramka-poczekalni h3 a { color: inherit; text-decoration: none; }
.lista-wskazowek { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }

/* Podgląd podpisu w tej samej skali i układzie co na protokole (kratka ok. 85 mm). */
.podglad-protokolu {
  background: #fff; color: #15202b; border: 1px solid var(--ramka);
  border-radius: 6px; padding: 18px 20px; display: inline-block; max-width: 100%;
}
.podpis-podglad { width: 85mm; max-width: 100%; }
.podpis-podglad img { display: block; max-height: 30pt; max-width: 70%; margin: 0 auto -30pt; }
.podpis-podglad .linia { border-bottom: 1px solid #15202b; height: 30pt; }
.podpis-podglad .kto { font-size: 7.6pt; color: #5b6775; margin-top: 3pt; text-align: center; }
a.kto:hover { text-decoration: underline; }

button.usun-plik {
  background: none; border: none; padding: 2px 0; margin-top: 2px;
  color: var(--blad); font-size: 12px; cursor: pointer;
}
button.usun-plik:hover { text-decoration: underline; }

/* ---------- Usuwanie trwałe ----------
   Zwinięte i trzymane z dala od reszty, bo to nie jest czynność z codziennej
   obsługi zgłoszenia. Czerwień dopiero po rozwinięciu — zamknięty szczegół
   ma nie straszyć na każdej stronie. */

.usuwanie { margin-top: 24px; border-color: var(--blad); }
.usuwanie summary { cursor: pointer; font-weight: 500; color: var(--blad); }
.usuwanie > .wskazowka { margin: 10px 0 14px; }
.usuwanie input { max-width: 280px; }

.wskazowka { font-size: 12px; color: var(--tekst-slaby); }

button.grozny {
  background: var(--blad);
  border-color: var(--blad);
  color: #fff;
}
button.grozny:hover { filter: brightness(1.08); }

.rzad { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rzad .pole { margin: 0; }
.rzad .pole.rosnie { flex: 1; min-width: 180px; }
.rzad .pole.waski { width: 110px; }
.rzad .pole.sredni { width: 160px; }

/* Formularz dopisujący wiersz pod tabelą — oddzielony linią, nie ramką.
   Kreska pojawia się tylko wtedy, gdy jest nad czym ją rysować; w pustej
   karcie wisiałaby sama u góry. */
table + .dopisz,
.galeria + .dopisz {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linia-slaba);
}

.komentarz { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--linia-slaba); }
.komentarz .pole:last-of-type { margin-bottom: 12px; }

/* Pole pliku bez podwójnej ramki wokół przycisku przeglądania. */
input[type=file] {
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--linia);
  border-radius: var(--promien);
  background: var(--powierzchnia-2);
  color: var(--tekst-slaby);
  font-family: inherit;
  font-size: 14px;
}
input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 5px 11px;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--powierzchnia);
  color: var(--tekst);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--powierzchnia-2); }

/* Przyciski obok siebie nie mogą się stykać ani nachodzić. */
button + button, button + .przycisk, .przycisk + button, .przycisk + .przycisk { margin-left: 8px; }
form + form { display: inline-block; }
td form { display: inline-block; }
td form + form { margin-left: 6px; }

tr.podrzedny td { color: var(--tekst-slaby); }
.wciecie { padding-left: 18px; }

.legenda { display: flex; gap: 16px; font-size: 12.5px; color: var(--tekst-slaby); margin-bottom: 10px; }
.probka { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.probka.nowe, .slupek.nowe { background: var(--akcent); }
.probka.zamkniete, .slupek.zamkniete { background: #8fbdd0; }

.wykres { display: flex; gap: 6px; align-items: flex-end; height: 150px; }
.miesiac { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.slupki { flex: 1; display: flex; gap: 2px; align-items: flex-end; width: 100%; justify-content: center; }
.slupek { width: 42%; min-height: 1px; border-radius: 2px 2px 0 0; }
.podpis-miesiaca { font-size: 10.5px; color: var(--tekst-slaby); margin-top: 5px; }

@media (max-width: 900px) {
  .dwie-kolumny-rowne { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .dwie-kolumny { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Na wąskim ekranie pasek łamie się na dwa rzędy: znak i konto na górze,
     menu pod spodem jako przewijany poziomo pasek. Zawijanie pozycji menu
     jedna pod drugą zjadało pół ekranu telefonu. */
  .pasek-srodek { padding: 8px 16px; gap: 8px 12px; min-height: 0; }
  .znak { order: 1; }
  .pasek-konto { order: 2; margin-left: auto; }
  .menu {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 2px;
  }
  .menu::-webkit-scrollbar { display: none; }

  main { padding: 20px 16px 56px; }
  .waska { margin: 24px auto; }

  /* Tabele z wieloma kolumnami nie mieszczą się — niech jeżdżą w poziomie
     zamiast rozpychać całą stronę. */
  .karta { overflow-x: auto; }
}

/* Przełącznik widoków (przyciski obok siebie). */
.przelacznik { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }


/* =====================================================================
   Odświeżenie wyglądu (listopad 2026)
   Jedna warstwa na końcu arkusza: nadpisuje zmienne i wygląd elementów,
   nie zmienia układu. Łatwo ją poprawić albo zdjąć w całości.
   ===================================================================== */

:root {
  --tlo: #f2f5f8;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f6f8fb;
  --linia: #dfe5ec;
  --linia-slaba: #ebeff4;
  --promien: 10px;
  --promien-maly: 8px;
  --cien: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 10px rgba(16, 24, 40, .04);
  --cien-duzy: 0 18px 40px rgba(16, 24, 40, .16), 0 3px 8px rgba(16, 24, 40, .06);
  --pierscien: 0 0 0 3px rgba(18, 69, 89, .16);
  --ruch: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #0f1418;
    --powierzchnia: #171e25;
    --powierzchnia-2: #1d252e;
    --linia: #283340;
    --linia-slaba: #212a34;
    --cien: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .22);
    --cien-duzy: 0 18px 44px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .3);
    --pierscien: 0 0 0 3px rgba(90, 167, 196, .25);
  }
}

body {
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(18, 69, 89, .07), transparent 62%),
    radial-gradient(900px 480px at -10% 110%, rgba(42, 157, 143, .05), transparent 60%),
    var(--tlo);
  background-attachment: fixed;
}

/* ---------- Pasek: przezroczysty, z rozmyciem pod spodem ---------- */

.pasek {
  background: color-mix(in srgb, var(--powierzchnia) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--linia-slaba);
}

.menu a {
  border-radius: var(--promien-maly);
  transition: background .15s, color .15s, box-shadow .2s;
}
.menu a.teraz {
  background: var(--akcent);
  color: var(--akcent-tekst);
  box-shadow: 0 2px 10px rgba(18, 69, 89, .22);
}

.plakietka {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--blad); color: #fff;
  font: 600 11px/1 var(--font); vertical-align: 1px;
}
.plakietka[hidden] { display: none; }

/* ---------- Treść ---------- */

h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { letter-spacing: -.01em; }

.karta {
  border-color: var(--linia-slaba);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}

/* Łagodne wejście treści po załadowaniu strony, kolejno od góry. */
@keyframes wejscie {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
main > * { animation: wejscie .45s var(--ruch) both; }
main > *:nth-child(2) { animation-delay: .03s; }
main > *:nth-child(3) { animation-delay: .06s; }
main > *:nth-child(4) { animation-delay: .09s; }
main > *:nth-child(5) { animation-delay: .12s; }
main > *:nth-child(6) { animation-delay: .15s; }
main > *:nth-child(n+7) { animation-delay: .18s; }

.kafelek {
  border-color: var(--linia-slaba);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  transition: transform .2s var(--ruch), box-shadow .2s, border-color .2s;
}
a.kafelek:hover { transform: translateY(-2px); box-shadow: var(--cien-duzy); }

/* ---------- Przyciski ---------- */

button, .przycisk {
  border-radius: var(--promien-maly);
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--akcent) 86%, #fff) 0%, var(--akcent) 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .12s var(--ruch), box-shadow .18s, background .18s, color .18s;
}
button:hover, .przycisk:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18, 69, 89, .24);
}
button:active, .przycisk:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, .14); }

.przycisk-cichy, button.cichy {
  background: var(--powierzchnia);
  color: var(--tekst);
  border-color: var(--linia);
  box-shadow: none;
}
.przycisk-cichy:hover, button.cichy:hover {
  background: var(--powierzchnia-2);
  transform: none;
  box-shadow: none;
}
button.groznie { background: transparent; border-color: var(--linia); box-shadow: none; }
button.groznie:hover { transform: none; box-shadow: none; }
button.grozny { background: var(--blad); }
button.usun-plik, button.usun-plik:hover { background: none; box-shadow: none; transform: none; }

button.maly, .przycisk.maly { padding: 5px 11px; font-size: 13px; }

/* ---------- Pola ---------- */

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
  border-radius: var(--promien-maly);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: var(--pierscien);
}
input[type=checkbox] { accent-color: var(--akcent); width: 16px; height: 16px; }

/* ---------- Tabele, etykiety, komunikaty ---------- */

th { color: var(--tekst-slaby); font-weight: 600; letter-spacing: .07em; }
table:not(.dane) tbody tr > td { transition: background .12s; }
table:not(.dane) tbody tr:hover > td { background: var(--powierzchnia-2); }

.etykieta { border-radius: 999px; font-weight: 500; }

.komunikat {
  border-radius: var(--promien);
  border-left-width: 4px;
  animation: wejscie .35s var(--ruch) both;
}

.waska .karta { box-shadow: var(--cien-duzy); border-radius: 14px; }

/* ---------- Okienko maili na stronie głównej ---------- */

.mail-okno {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 370px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 14px;
}

.mail-panel {
  width: 100%;
  background: var(--powierzchnia);
  border: 1px solid var(--linia-slaba);
  border-radius: 16px;
  box-shadow: var(--cien-duzy);
  overflow: hidden;
  transform-origin: bottom right;
  animation: okno-wjazd .5s var(--ruch) both .15s;
}

@keyframes okno-wjazd {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.mail-glowa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--akcent), color-mix(in srgb, var(--akcent) 65%, #2a9d8f));
  color: var(--akcent-tekst);
}
.mail-tytul { color: inherit; font-weight: 600; letter-spacing: .01em; }
.mail-tytul:hover { text-decoration: none; opacity: .9; }
.mail-glowa .plakietka { background: rgba(255, 255, 255, .92); color: var(--akcent); }

button.mail-zwin {
  background: rgba(255, 255, 255, .14); border: none; box-shadow: none;
  color: inherit; padding: 5px; border-radius: 8px; line-height: 0;
}
button.mail-zwin:hover { background: rgba(255, 255, 255, .26); transform: none; box-shadow: none; }

.mail-lista { max-height: min(60vh, 460px); overflow-y: auto; }

.mail-poz {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linia-slaba);
  transition: opacity .3s var(--ruch), transform .3s var(--ruch), background .15s;
}
.mail-poz:hover { background: var(--powierzchnia-2); }
.mail-poz.pracuje { opacity: .55; pointer-events: none; }
.mail-poz.znika { opacity: 0; transform: translateX(28px); }

.mail-temat {
  display: block; color: var(--tekst); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-od {
  color: var(--tekst-slaby); font-size: 12.5px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-akcje { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mail-akcje .odstep { flex: 1; }
.mail-akcje form { margin: 0; }
.mail-blad { color: var(--blad); font-size: 12.5px; margin-top: 6px; }
.mail-pusto { padding: 24px 14px; text-align: center; color: var(--tekst-slaby); }
.mail-pusto[hidden] { display: none; }
.mail-wiecej {
  display: block; padding: 10px 14px; text-align: center; font-size: 13px;
  border-top: 1px solid var(--linia-slaba);
}

button.mail-pigulka { display: none; }
.mail-okno.zwiniete .mail-panel { display: none; }
.mail-okno.zwiniete button.mail-pigulka {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--cien-duzy);
  animation: okno-wjazd .4s var(--ruch) both;
}
.mail-pigulka .plakietka { background: #fff; color: var(--akcent); }
.mail-pigulka .plakietka:not([hidden]) { animation: puls 2.6s ease-in-out infinite; }

@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

@media (max-width: 600px) {
  .mail-okno { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* Kto ma w systemie wyłączone animacje, dostaje ten sam wygląd bez ruchu. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Mniej miejsca na pasek i okienko na niskich ekranach laptopów. */
.pasek-srodek { max-width: 1280px; gap: 18px; }
.menu a { padding: 7px 10px; font-size: 14.5px; }
.mail-lista { max-height: min(42vh, 380px); }


/* =====================================================================
   Premium — jasny i ciemny motyw oraz telefony
   ===================================================================== */

:root {
  --tlo: #f3f6f9;
  --linia: #e1e6ed;
  --linia-slaba: #ecf0f4;
  --promien: 12px;
  --cien:
    0 1px 1px rgba(16, 24, 40, .03),
    0 2px 6px rgba(16, 24, 40, .035),
    0 10px 28px rgba(16, 24, 40, .045);
  --cien-duzy:
    0 2px 6px rgba(16, 24, 40, .06),
    0 24px 56px rgba(16, 24, 40, .18);
  --przycisk-od: #1d6684;
  --przycisk-do: #113f52;
  --blask: rgba(18, 69, 89, .28);
  --liczba-od: #15202b;
  --liczba-do: #1d6684;
}

::selection { background: rgba(29, 102, 132, .22); }

body { -webkit-tap-highlight-color: transparent; }

/* ---------- Nagłówek strony z przyciskiem ---------- */

.naglowek-strony {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.naglowek-strony h1 { margin: 0; }
.naglowek-strony .podtytul { margin: 4px 0 0; }

h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }

/* ---------- Karty i kafelki ---------- */

.karta { border-radius: var(--promien); }

.kafelek { border-radius: var(--promien); padding: 16px 18px; }
.kafelek .liczba-duza {
  font-size: 30px;
  background: linear-gradient(135deg, var(--liczba-od), var(--liczba-do));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kafelek.alarm .liczba-duza { background: none; color: var(--blad); }
.etykieta-kafelka { color: var(--tekst-slaby); letter-spacing: .01em; }

/* ---------- Przyciski i menu ---------- */

button, .przycisk {
  background: linear-gradient(180deg, var(--przycisk-od), var(--przycisk-do));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .16), inset 0 1px 0 rgba(255, 255, 255, .16);
}
button:hover, .przycisk:hover { box-shadow: 0 8px 22px var(--blask), inset 0 1px 0 rgba(255, 255, 255, .16); }

.menu a.teraz {
  background: linear-gradient(180deg, var(--przycisk-od), var(--przycisk-do));
  box-shadow: 0 4px 14px var(--blask), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Cichy i groźny wariant bez gradientu — muszą stać wyżej w kolejności niż ogólny przycisk. */
.przycisk-cichy, button.cichy {
  background: var(--powierzchnia);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.przycisk-cichy:hover, button.cichy:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
button.groznie, button.groznie:hover { background: transparent; box-shadow: none; }
button.grozny { background: linear-gradient(180deg, #c03b42, #a4262c); }
button.usun-plik, button.usun-plik:hover,
button.mail-zwin, button.mail-zwin:hover { box-shadow: none; }

/* ---------- Pola i przewijanie ---------- */

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea { background: var(--powierzchnia); }

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tekst-slaby) 40%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tekst-slaby) 35%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}

/* Podgląd stopki — biały jak w programie pocztowym, w obu motywach. */
.podglad-maila {
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--linia); border-radius: 10px; padding: 14px 18px;
}

/* ---------- Okienko maili ---------- */

.mail-panel { border-radius: 18px; }
.mail-glowa { background: linear-gradient(135deg, #1d6684 0%, #124559 55%, #1f7a72 100%); }

/* =====================================================================
   Ciemny motyw premium
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #0b1015;
    --powierzchnia: #121a21;
    --powierzchnia-2: #18222b;
    --linia: rgba(255, 255, 255, .09);
    --linia-slaba: rgba(255, 255, 255, .06);
    --tekst: #e9eef3;
    --tekst-slaby: #93a2b1;
    --akcent: #6fc6de;
    --akcent-tlo: rgba(111, 198, 222, .1);
    --akcent-tekst: #04212b;
    --cien: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35);
    --cien-duzy: inset 0 1px 0 rgba(255, 255, 255, .05), 0 28px 64px rgba(0, 0, 0, .6);
    --pierscien: 0 0 0 3px rgba(111, 198, 222, .22);
    --przycisk-od: #93dbee;
    --przycisk-do: #55b2ce;
    --blask: rgba(111, 198, 222, .3);
    --liczba-od: #f1f5f8;
    --liczba-do: #6fc6de;
  }

  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(1200px 620px at 92% -12%, rgba(111, 198, 222, .13), transparent 62%),
      radial-gradient(900px 520px at -12% 112%, rgba(99, 102, 241, .09), transparent 60%),
      var(--tlo);
    background-attachment: fixed;
  }

  :root:not([data-theme="light"]) ::selection { background: rgba(111, 198, 222, .3); }

  :root:not([data-theme="light"]) .pasek {
    background: rgba(11, 16, 21, .62);
    border-bottom-color: rgba(255, 255, 255, .06);
  }

  :root:not([data-theme="light"]) .karta,
  :root:not([data-theme="light"]) .kafelek {
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)), var(--powierzchnia);
    border-color: rgba(255, 255, 255, .07);
  }
  :root:not([data-theme="light"]) a.kafelek:hover { border-color: rgba(111, 198, 222, .35); }

  :root:not([data-theme="light"]) button,
  :root:not([data-theme="light"]) .przycisk { color: var(--akcent-tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
  :root:not([data-theme="light"]) .przycisk-cichy,
  :root:not([data-theme="light"]) button.cichy {
    background: rgba(255, 255, 255, .04); color: var(--tekst);
    border-color: rgba(255, 255, 255, .1); box-shadow: none;
  }
  :root:not([data-theme="light"]) .przycisk-cichy:hover,
  :root:not([data-theme="light"]) button.cichy:hover { background: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) button.groznie { color: var(--blad); background: transparent; box-shadow: none; }
  :root:not([data-theme="light"]) button.grozny { color: #fff; }
  :root:not([data-theme="light"]) button.usun-plik,
  :root:not([data-theme="light"]) button.mail-zwin { box-shadow: none; }
  :root:not([data-theme="light"]) button.mail-zwin { color: #fff; }

  :root:not([data-theme="light"]) .menu a:hover { background: rgba(255, 255, 255, .05); }

  :root:not([data-theme="light"]) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .1);
  }

  :root:not([data-theme="light"]) table:not(.dane) tbody tr:hover > td { background: rgba(255, 255, 255, .03); }

  :root:not([data-theme="light"]) .mail-panel {
    background: rgba(18, 26, 33, .92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .08);
  }
  :root:not([data-theme="light"]) .mail-glowa {
    background: linear-gradient(135deg, #1a4f63 0%, #123947 50%, #213c64 100%);
    color: #eaf6fa;
  }
  :root:not([data-theme="light"]) .mail-glowa .plakietka { background: #6fc6de; color: #04212b; }
  :root:not([data-theme="light"]) .mail-okno.zwiniete button.mail-pigulka { box-shadow: 0 10px 30px rgba(111, 198, 222, .22), 0 2px 6px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .mail-pigulka .plakietka { background: #04212b; color: #93dbee; }
}

/* =====================================================================
   Telefony
   ===================================================================== */

@media (max-width: 600px) {
  h1 { font-size: 23px; }
  h2 { font-size: 16px; margin-top: 26px; }

  main { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
  .pasek-srodek { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

  .karta { padding: 16px; border-radius: 14px; }
  .kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kafelek { padding: 14px; }
  .kafelek .liczba-duza { font-size: 26px; }

  .naglowek-strony { align-items: stretch; margin-bottom: 18px; }
  .naglowek-strony .przycisk { width: 100%; text-align: center; padding: 12px 16px; }

  button, .przycisk { min-height: 42px; }
  button.maly, .przycisk.maly { min-height: 36px; }
  .menu a { padding: 9px 12px; }

  .pasek-konto .kto { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 16 px w polach, inaczej iPhone powiększa stronę przy każdym kliknięciu w pole. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
  select, textarea { font-size: 16px; padding: 11px 12px; }

  .mail-okno {
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .mail-okno.zwiniete { left: auto; }
  .mail-panel { border-radius: 20px; }
  .mail-lista { max-height: 52vh; }
}

/* Logo ma białe tło — w ciemnym motywie celowy, zaokrąglony żeton zamiast białego prostokąta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .znak img {
    background: #fff; border-radius: 7px; padding: 3px 6px; height: 30px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

/* ---------- Wymagania hasła: odhaczane przy wpisywaniu ---------- */

.wymagania-hasla { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.wymagania-hasla li { color: var(--tekst-slaby); padding-left: 20px; position: relative; transition: color .15s; }
.wymagania-hasla li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid currentColor; transition: background .15s, border-color .15s;
}
.wymagania-hasla li.spelnione { color: var(--ok); }
.wymagania-hasla li.spelnione::before { background: var(--ok); border-color: var(--ok); }
.blad-pola { display: block; color: var(--blad); font-size: 13px; margin-top: 6px; }

/* ---------- Ułożenie podpisu: suwaki pod podglądem ---------- */

.podglad-protokolu { padding: 44px 28px 18px; }
.podpis-podglad img { transform-origin: 50% 100%; }

.suwaki { display: grid; gap: 12px; margin-top: 16px; max-width: 420px; }
.suwak { display: grid; gap: 4px; font-size: 13px; font-weight: 500; }
.suwak span { display: flex; justify-content: space-between; }
.suwak output { font-family: var(--font-mono); color: var(--tekst-slaby); font-weight: 400; }
.suwak input[type=range] { width: 100%; accent-color: var(--akcent); }