/* 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; }
a.kto: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; }
}