:root {
  --tlo: #f6f7f8;
  --powierzchnia: #ffffff;
  --tekst: #16202a;
  --tekst-slaby: #626d79;
  --linia: #e3e7eb;
  --linia-mocna: #c5ccd3;
  /* Obrys pól formularza i znaków stanu – co najmniej 3:1 do tła (WCAG 1.4.11). */
  --obrys: #848e98;
  --akcent: #1b64d8;
  --akcent-tlo: #eaf1fe;

  --dostepny-tlo: #e3f6ea;
  --dostepny: #18783f;
  --niedostepny-tlo: #fde8e8;
  --niedostepny: #b42318;
  --na-telefon-tlo: #fff1d6;
  --na-telefon: #9a5b00;

  --weekend-tlo: #fafbfc;
  /* Tekst na wypełnieniu kolorem akcentu lub statusu (przycisk główny, plakietki). */
  --na-kolorze: #fff;

  --promien: 12px;
  --cien: 0 1px 2px rgba(22, 32, 42, 0.05);
  --cien-uniesiony: 0 4px 12px rgba(22, 32, 42, 0.1);

  color-scheme: light;
}

/* Motyw ciemny: atrybut ustawia public/motyw.js (wybór użytkownika albo motyw systemu). */
:root[data-motyw="ciemny"] {
  --tlo: #0f1419;
  --powierzchnia: #171d24;
  --tekst: #e6eaee;
  --tekst-slaby: #94a0ac;
  --linia: #2a323b;
  --linia-mocna: #414b56;
  --obrys: #6b7785;
  --akcent: #6aa6ff;
  --akcent-tlo: #172a47;

  --dostepny-tlo: #12301f;
  --dostepny: #5fd08a;
  --niedostepny-tlo: #3a1a1a;
  --niedostepny: #ff8f85;
  --na-telefon-tlo: #3a2c0f;
  --na-telefon: #f0b54a;

  --weekend-tlo: #131920;
  --na-kolorze: #0f1419;

  --cien: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cien-uniesiony: 0 4px 12px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Pole z fokusem nie może schować się pod przyklejonym paskiem kreatora (WCAG 2.4.11). */
html:has(.kreator-nawigacja:not([hidden])) { scroll-padding-bottom: 120px; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* viewport-fit=cover: w poziomie treść nie wchodzi pod wycięcie ekranu. */
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

h1, h2, p { margin: 0; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }

.marka { line-height: 0; }
/* Logo ma „kroplę” pod literą p, więc obrazek jest wyższy od samego napisu. */
.marka img { height: 34px; width: auto; }
.login-karta .marka img { height: 46px; }
.logo-motyw-ciemny { display: none; }
:root[data-motyw="ciemny"] .logo-motyw-jasny { display: none; }
:root[data-motyw="ciemny"] .logo-motyw-ciemny { display: inline; }

/* --- Przyciski i pola ---------------------------------------------------- */

.przycisk {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--linia);
  border-radius: 8px;
  background: var(--powierzchnia);
  color: var(--tekst);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.przycisk:hover:not(:disabled) { border-color: var(--linia-mocna); background: var(--tlo); }
.przycisk.ikona { padding: 7px 12px; font-size: 18px; line-height: 1; }
.przycisk.maly { padding: 4px 10px; font-size: 13px; }
.przycisk-glowny { background: var(--akcent); border-color: var(--akcent); color: var(--na-kolorze); font-weight: 600; }
.przycisk-glowny:hover:not(:disabled) { filter: brightness(0.94); background: var(--akcent); border-color: var(--akcent); }
.przycisk:disabled { opacity: 0.5; cursor: default; }

.link {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst-slaby);
  text-decoration: underline;
  cursor: pointer;
}
.link:hover { color: var(--tekst); }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

input[type="email"], input[type="password"], input[type="text"], input[type="tel"], input[type="time"],
input[type="date"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--obrys);
  border-radius: 8px;
  background: var(--powierzchnia);
  color: var(--tekst);
}

.blad { color: var(--niedostepny); }

/* --- Logowanie ----------------------------------------------------------- */

body.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login-karta {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}
.login-opis { color: var(--tekst-slaby); margin-bottom: 10px; }
.login-karta label { font-size: 13px; font-weight: 600; margin-top: 6px; }
.login-karta button { margin-top: 14px; padding: 10px; }
.login-karta label.wybor { display: flex; align-items: center; gap: 8px; margin-top: 0; font-weight: 400; color: var(--tekst-slaby); }
.login-karta [hidden] { display: none; }
.login-info { color: var(--dostepny); }
.login-stopka { font-size: 13px; color: var(--tekst-slaby); }
.login-karta > .link { align-self: center; font-size: 14px; }
.motyw-rog { position: fixed; top: 12px; right: 16px; font-size: 13px; }

/* --- Ustawienia, pracownicy, okna ---------------------------------------- */

.karta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 20px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}
.karta h2, .okno h2 { margin: 0; font-size: 17px; font-weight: 650; }
.karta .wskazowka { margin: 0; }
.akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
a.przycisk { text-decoration: none; }
.przycisk-glowny.grozny { background: var(--niedostepny); border-color: var(--niedostepny); }
.przycisk-glowny.grozny:hover:not(:disabled) { background: var(--niedostepny); border-color: var(--niedostepny); }
.link.grozny { color: var(--niedostepny); }
main > .blad, main > .info, main > .ostrzezenie { margin-bottom: 12px; }

.stan-2fa { font-weight: 600; color: var(--tekst-slaby); }
.stan-2fa.wlaczona { color: var(--dostepny); }
.konfiguracja { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linia); }
.konfiguracja ol { margin: 0; padding-left: 20px; }
.qr { width: 200px; max-width: 100%; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: auto; }
.konfiguracja code, .kody { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.konfiguracja code { color: var(--tekst); overflow-wrap: anywhere; }
#kod { width: 120px; letter-spacing: 0.1em; }
#prowizja { width: 90px; }
.kody { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 16px; margin: 0; padding: 14px 16px; list-style: none; background: var(--tlo); border-radius: 8px; }

.ustawienie { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ustawienie .wskazowka { margin-top: 2px; }
.ustawienie .przelacznik { flex: none; }
.przelacznik:disabled { opacity: 0.5; cursor: default; }

/* position: ukryty nagłówek kolumny akcji (.tylko-czytnik) zostaje w przewijanej ramce – inaczej
   na telefonie wystaje poza ekran i poszerza całą stronę. */
.tabela-ramka { position: relative; overflow-x: auto; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 14px; text-align: left; white-space: nowrap; }
.tabela th { font-size: 13px; font-weight: 600; color: var(--tekst-slaby); border-bottom: 1px solid var(--linia); }
.tabela tbody tr + tr td { border-top: 1px solid var(--linia); }
.tabela td:last-child { text-align: right; }
.tabela tr.wylaczone td { color: var(--tekst-slaby); }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.okno {
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 24px;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--powierzchnia);
  color: var(--tekst);
  box-shadow: var(--cien-uniesiony);
}
.okno::backdrop { background: rgba(22, 32, 42, 0.45); }
.okno form { display: flex; flex-direction: column; gap: 12px; }
.okno label, .formularz label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.okno label.wybor, .formularz label.wybor { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; }
.okno label input:not([type="checkbox"]), .okno label select, .okno label textarea,
.formularz label input:not([type="checkbox"]), .formularz label textarea { font-size: 15px; font-weight: 400; }
.okno textarea, .formularz textarea { resize: vertical; }
.pola { display: flex; flex-direction: column; gap: 12px; }
.pola:empty { display: none; }
.okno.szerokie { max-width: 640px; }
.pola-obok { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pola-obok input { min-width: 0; }
/* Bez tego etykieta nie zwęzi się poniżej domyślnej szerokości pola i na telefonie rozpycha okno. */
.pola-obok > * { min-width: 0; }
.okno [aria-invalid="true"], .formularz [aria-invalid="true"] { border-color: var(--niedostepny); }
/* W długich formularzach przyciski zostają przyklejone do dolnej krawędzi okna. */
.okno.szerokie .okno-przyciski { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px; background: var(--powierzchnia); border-top: 1px solid var(--linia); }

/* Sekcje formularzy zgłoszeń i zleceń oraz gotowe opcje (public/gotowe.js). */
.sekcja { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--linia); }
.sekcja legend { float: left; width: 100%; padding: 0; font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.05em; }
.sekcja .wskazowka { margin: 0; }
.grupa { display: flex; flex-direction: column; gap: 6px; }
.grupa-tytul { font-size: 13px; font-weight: 600; }
.zetony { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zetony-odstep { width: 6px; }
.zeton {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--powierzchnia);
  color: var(--tekst);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.zeton small { font-size: 12px; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; }
.zeton:hover:not(:disabled) { border-color: var(--linia-mocna); }
.zeton:disabled { opacity: 0.4; cursor: default; }
.zeton[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--akcent); }
.zeton[aria-pressed="true"] small { color: inherit; }
.zeton-grupa { display: inline-flex; align-items: center; gap: 4px; }
.zeton-krok { justify-content: center; min-width: 30px; padding: 5px 0; }
.zeton-ile { min-width: 24px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
input.zeton-ile { width: 68px; min-width: 0; padding: 5px 6px; }
.zeton-jedn { font-size: 13px; color: var(--tekst-slaby); }
/* Cennik: sekcje zwijane; sekcja z zaznaczoną pozycją wyróżnia tytuł także po zwinięciu. */
.cennik-sekcja summary { padding: 4px 0; font-size: 13px; color: var(--tekst-slaby); cursor: pointer; }
.cennik-sekcja[open] summary { margin-bottom: 4px; }
.cennik-sekcja:has(.zeton[aria-pressed="true"]) summary { color: var(--akcent); font-weight: 600; }
.wlasna-pozycja { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 6px; }
.wlasna-pozycja input { min-width: 0; padding: 6px 10px; font-size: 14px; }
.korekta-pozycja { display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px auto; align-items: center; gap: 6px; }
.korekta-pozycja input { min-width: 0; padding: 6px 10px; font-size: 14px; }
.szablon textarea { min-height: 96px; }
.wiadomosc-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.zetony:empty { display: none; }
.podpowiedz, .ostrzezenie { padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.podpowiedz { background: var(--akcent-tlo); color: var(--akcent); }
.podpowiedz .link { color: inherit; font-weight: 600; }
.ostrzezenie { background: var(--na-telefon-tlo); color: var(--na-telefon); }

/* Wybór technika: wiersz na osobę, z jej dyspozycyjnością w wybranym terminie. */
.technicy { display: flex; flex-direction: column; gap: 4px; }
.okno label.technik-wybor { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 8px; font-size: 15px; font-weight: 400; cursor: pointer; }
.technik-wybor:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
.technik-wybor:has(input:disabled) { cursor: default; }
.technik-wybor:has(input:disabled) .technik-nazwa { color: var(--tekst-slaby); }
.technik-wybor.zablokowany:has(input:checked) { border-color: var(--niedostepny); background: var(--niedostepny-tlo); }
.technik-stan { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kolor); }
.technik-stan::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kolor); }
.technik-stan.s-dostepny { --kolor: var(--dostepny); }
.technik-stan.s-niedostepny { --kolor: var(--niedostepny); }
.technik-stan.s-na_telefon { --kolor: var(--na-telefon); }
.technik-stan.s-brak { --kolor: var(--tekst-slaby); }
.technik-zlecen { margin-left: auto; font-size: 13px; color: var(--tekst-slaby); }
/* Termin w formularzach zleceń: kalendarz miesiąca z godzinami zleceń i plan wybranego dnia. */
.kt { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--tlo); }
.kt-gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt-tytul { font-size: 14px; font-weight: 650; }
.kt-tydzien, .kt-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kt-tydzien span { font-size: 11px; font-weight: 600; color: var(--tekst-slaby); text-align: center; }
.kt-siatka { transition: opacity 0.15s; }
.kt.laduje .kt-siatka { opacity: 0.5; transition-delay: 0.12s; }
.kt-dz {
  font: inherit; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px;
  min-width: 0; min-height: 64px; padding: 5px; border: 1px solid var(--linia); border-radius: 8px;
  background: var(--powierzchnia); color: var(--tekst); text-align: left; cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.kt-dz.weekend { background: var(--weekend-tlo); }
.kt-dz:hover:not(:disabled) { border-color: var(--linia-mocna); }
.kt-dz:disabled { opacity: 0.4; cursor: default; }
.kt-dz[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); box-shadow: 0 0 0 1px var(--akcent); }
.kt-dz-gora { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.kt-nr { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 999px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kt-dz.dzisiaj .kt-nr { background: var(--akcent); color: var(--na-kolorze); }
.kt-godziny { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-g { display: block; padding: 0 4px; border-radius: 4px; background: var(--akcent-tlo); color: var(--akcent); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-g.nieprzypisane { background: var(--na-telefon-tlo); color: var(--na-telefon); }
.kt-g.kolizja { background: var(--niedostepny-tlo); color: var(--niedostepny); }
.kt-legenda .kt-g { display: inline-block; }
.kt-legenda > span { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.kt-wiecej { font-size: 11px; color: var(--tekst-slaby); }
.kt-kropka { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kolor); }
.kt-kropka.s-dostepny { --kolor: var(--dostepny); }
.kt-kropka.s-niedostepny { --kolor: var(--niedostepny); }
.kt-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 0; font-size: 11px; color: var(--tekst-slaby); }

.kt-plan { display: flex; flex-direction: column; gap: 10px; }
.kt-plan:empty { display: none; }
.kt-plan .wskazowka { margin: 0; }
.kt-plan-gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.kt-obsada { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kt-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.kt-lista li { display: flex; align-items: baseline; gap: 12px; padding: 7px 10px; font-size: 14px; }
.kt-lista li + li { border-top: 1px solid var(--linia); }
.kt-lista li.kolizja { background: var(--niedostepny-tlo); }
.kt-lista-godz { flex: none; min-width: 40px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kt-lista-opis { display: flex; flex-direction: column; min-width: 0; }
.kt-lista-opis span { overflow-wrap: anywhere; }
.kt-lista-opis small { font-size: 12px; color: var(--tekst-slaby); }
.kt-brak { color: var(--na-telefon) !important; font-weight: 600; }
.technik-zlecen .kolizja { color: var(--niedostepny); }

/* Kreator w oknie (nowe zlecenie, przyjęcie zgłoszenia) – te same kroki co na stronie realizacji. */
.okno .kreator-kroki ol { margin: 0 0 4px; }
.okno .kreator-nazwa { display: inline; }
.okno .kreator-krok:not([aria-current="step"]) .kreator-nazwa { color: var(--tekst-slaby); font-weight: 500; }
.kreator-strona:focus { outline: none; }
.kreator-stopka { flex-wrap: wrap; align-items: center; }
.kreator-podsumowanie { flex: 1 1 220px; min-width: 0; margin-right: auto; font-size: 13px; color: var(--tekst-slaby); overflow-wrap: anywhere; }
.kreator-podsumowanie:empty { display: none; }
.technik-ostrzezenie.blokada { background: var(--niedostepny-tlo); color: var(--niedostepny); }

.zgloszenie-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.zgloszenie-naglowek .wskazowka { margin: 0; }
.znacznik { padding: 2px 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); font-size: 12px; font-weight: 600; vertical-align: middle; }
.znacznik.szary { background: var(--tlo); color: var(--tekst-slaby); }
.znacznik.ostrzezenie { background: var(--na-telefon-tlo); color: var(--na-telefon); }
.znacznik.dobry { background: var(--dostepny-tlo); color: var(--dostepny); }
.znacznik.zly { background: var(--niedostepny-tlo); color: var(--niedostepny); }
.zgloszenie-wiadomosc:empty, .zgloszenie-dane:empty { display: none; }
.naglowek .akcje { gap: 12px; }
.zgloszenie-dane { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.zgloszenie-dane dt { color: var(--tekst-slaby); }
.zgloszenie-dane dd { margin: 0; overflow-wrap: anywhere; }
.zgloszenie-dane a, .tabela a { color: inherit; }
.zgloszenie-wiadomosc { padding: 10px 12px; border-radius: 8px; background: var(--tlo); white-space: pre-wrap; overflow-wrap: anywhere; }
.okno-opis { color: var(--tekst-slaby); }
.okno-dodatkowe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linia); font-size: 14px; }
.okno-przyciski { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* --- Układ panelu -------------------------------------------------------- */

.uklad { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.panel-boczny {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px;
  background: var(--powierzchnia);
  border-right: 1px solid var(--linia);
}
.panel-boczny nav { display: flex; flex-direction: column; gap: 2px; }
.panel-boczny nav a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--tekst);
  text-decoration: none;
}
.panel-boczny nav a:hover { background: var(--tlo); }
.panel-boczny nav a.aktywny { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }

/* Rozwijana grupa: przycisk wygląda jak pozycja menu, podmenu jest wcięte. */
.nav-grupa, .nav-podmenu { display: flex; flex-direction: column; gap: 2px; }
.nav-przelacznik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-przelacznik:hover { background: var(--tlo); }
.nav-przelacznik::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 3px;
  border: solid var(--tekst-slaby);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.nav-przelacznik[aria-expanded="true"]::after { margin-bottom: -3px; transform: rotate(-135deg); }
.nav-podmenu { margin-left: 14px; padding-left: 6px; border-left: 1px solid var(--linia); }

/* Sekcje menu: mały nagłówek i odstęp od poprzedniej grupy zamiast jednej długiej listy. */
.nav-sekcja { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.nav-naglowek {
  padding: 0 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}
.konto { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.konto span { font-weight: 600; }

main { padding: 28px 32px; max-width: 980px; width: 100%; }

.naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.podglad { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-slaby); }

/* Wybór poziomu, z którego właściciel ogląda panel: w prawym górnym rogu treści. Podczas
   podglądu niższego poziomu jest wyróżniony, żeby nie dało się go przeoczyć. */
.podglad-poziomu { width: fit-content; margin: -12px 0 10px auto; padding: 4px 4px 4px 12px; border-radius: 10px; }
.podglad-poziomu select { padding: 5px 8px; }
.podglad-poziomu.aktywny { background: var(--na-telefon-tlo); color: var(--na-telefon); font-weight: 600; }

.pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; min-height: 36px; }
.miesiac-nav { display: flex; align-items: center; gap: 8px; }
.miesiac-nav h2, .miesiac-nav h3 { margin: 0; font-size: 18px; font-weight: 650; min-width: 160px; text-align: center; letter-spacing: -0.01em; }

/* Stan zapisu z kolorowym znacznikiem i cofnięciem ostatniego zaznaczenia. */
.stan { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stan-zapisu { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tekst-slaby); }
.stan-zapisu:empty { display: none; }
.stan-zapisu::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--linia-mocna); }
.stan-zapisu.ok::before { background: var(--dostepny); }
.stan-zapisu.trwa::before { background: var(--na-telefon); animation: puls 0.7s ease-in-out infinite alternate; }
.stan-zapisu.blad { color: var(--niedostepny); }
.stan-zapisu.blad::before { background: var(--niedostepny); }
@keyframes puls { to { opacity: 0.3; } }

.pedzle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
.pedzle legend, .pedzle .legenda { float: left; margin-right: 8px; padding: 0; font-size: 13px; color: var(--tekst-slaby); }
.pedzel { cursor: pointer; }
.pedzel strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.pedzel input { position: absolute; opacity: 0; pointer-events: none; }
.pedzel span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--powierzchnia);
  font-size: 14px;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.pedzel span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kolor); }
.pedzel.s-dostepny { --kolor: var(--dostepny); --kolor-tlo: var(--dostepny-tlo); }
.pedzel.s-niedostepny { --kolor: var(--niedostepny); --kolor-tlo: var(--niedostepny-tlo); }
.pedzel.s-na_telefon { --kolor: var(--na-telefon); --kolor-tlo: var(--na-telefon-tlo); }
.pedzel.s-brak { --kolor: var(--tekst-slaby); --kolor-tlo: var(--tlo); }
.pedzel.s-brak span::before { background: none; box-shadow: inset 0 0 0 2px var(--linia-mocna); }
label.pedzel:hover span { border-color: var(--linia-mocna); }
/* Wybrany status przyjmuje swój kolor - ten sam, którym zamalują się kafelki. */
.pedzel input:checked + span {
  border-color: var(--kolor);
  background: var(--kolor-tlo);
  color: var(--kolor);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--kolor);
}
.pedzel.s-brak input:checked + span { color: var(--tekst); }
.pedzel input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
/* Liczniki miesiąca: te same pigułki, ale jako legenda, nie przyciski. */
div.pedzel { cursor: default; }
div.pedzel span { border-color: transparent; background: var(--kolor-tlo); }

.udzial { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--tlo); }
.udzial span { flex: 0 0 0; min-width: 0; transition: flex-grow 0.2s; }
.udzial .s-dostepny { background: var(--dostepny); }
.udzial .s-niedostepny { background: var(--niedostepny); }
.udzial .s-na_telefon { background: var(--na-telefon); }
.udzial .s-brak { background: var(--linia); }

.wskazowka { margin: 12px 0 0; font-size: 13px; color: var(--tekst-slaby); }
.wskazowka strong { color: var(--tekst); font-weight: 650; }
.tylko-dotyk { display: none; }

.info {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--akcent-tlo);
  color: var(--akcent);
  font-size: 14px;
  font-weight: 550;
}

.edycja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}
.edycja .wskazowka { margin: 0; }
.widoki { display: grid; }
.widok { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.widok.nieaktywny { visibility: hidden; }

/* Przełącznik trybu: suwak z etykietami po bokach; aktywna etykieta jest ciemna. */
.tryb { display: flex; align-items: center; gap: 10px; }
.tryb-etykieta {
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst-slaby);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.tryb-etykieta:hover { color: var(--tekst); }
.tryb:not(:has(:checked)) .tryb-podglad { color: var(--tekst); }
.tryb:has(:checked) .tryb-oznaczanie { color: var(--akcent); }

.przelacznik {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 1px solid var(--obrys);
  border-radius: 999px;
  background: var(--linia);
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s;
}
.przelacznik::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 32, 42, 0.25);
  transition: transform 0.18s;
}
.przelacznik:hover { border-color: var(--tekst-slaby); }
.przelacznik:checked { background: var(--akcent); border-color: var(--akcent); }
.przelacznik:checked::before { transform: translateX(18px); }

/* --- Popup godzin -------------------------------------------------------- */

.popup {
  position: absolute;
  z-index: 10;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: 0 12px 32px rgba(22, 32, 42, 0.18);
  font-size: 14px;
  animation: popup-wejscie 0.14s ease-out;
}
@keyframes popup-wejscie { from { opacity: 0; transform: translateY(-4px); } }
.popup-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.popup-tytul { font-weight: 650; }
.zamknij {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tekst-slaby);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.zamknij:hover { background: var(--tlo); color: var(--tekst); }

.zmiany { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zmiana { cursor: pointer; }
.zmiana input { position: absolute; opacity: 0; pointer-events: none; }
.zmiana span {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linia);
  border-radius: 8px;
  line-height: 1.3;
  transition: background-color 0.12s, border-color 0.12s;
}
.zmiana strong { font-weight: 600; }
.zmiana small { font-size: 12px; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; }
.zmiana:hover span { border-color: var(--linia-mocna); }
.zmiana input:checked + span { border-color: var(--dostepny); background: var(--dostepny-tlo); box-shadow: inset 0 0 0 1px var(--dostepny); }
.zmiana input:checked + span strong, .zmiana input:checked + span small { color: var(--dostepny); }
.zmiana input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }

.zakres { display: flex; gap: 8px; }
.zakres label { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--tekst-slaby); }
.zakres input[type="time"] { flex: 1; min-width: 0; padding: 5px 8px; }
.popup .wskazowka { margin: -4px 0 0; }
.popup .blad { font-size: 13px; }
.godziny-dnia .krotko { display: none; }

/* --- Kalendarz ----------------------------------------------------------- */

.kalendarz {
  margin-top: 14px;
  padding: 14px;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  user-select: none;
  container: kalendarz / inline-size;
}
.dni-tygodnia, .siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dni-tygodnia { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--tekst-slaby); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
.dni-tygodnia span:nth-child(n+6) { color: var(--linia-mocna); }

/* Podczas wczytywania miesiąca siatka przygasa (z opóźnieniem, żeby nie migała). */
.siatka { transition: opacity 0.15s; }
.siatka.laduje { opacity: 0.45; transition-delay: 0.12s; }
.siatka[data-pedzel="dostepny"] { --pedzel: var(--dostepny); }
.siatka[data-pedzel="niedostepny"] { --pedzel: var(--niedostepny); }
.siatka[data-pedzel="na_telefon"] { --pedzel: var(--na-telefon); }
.siatka[data-pedzel="brak"] { --pedzel: var(--tekst-slaby); }

.dzien {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 86px;
  padding: 8px 9px;
  border: 1px solid var(--linia);
  border-radius: 10px;
  background: var(--powierzchnia);
  color: var(--tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.dzien.weekend { background: var(--weekend-tlo); }
.dzien .numer {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin: -3px 0 0 -4px;
  padding: 0 5px;
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.dzien.weekend .numer { color: var(--tekst-slaby); }
.dzien .opis { display: flex; flex-direction: column; max-width: 100%; line-height: 1.25; }
.dzien .etykieta { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dzien .godziny-dnia { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.85; }

.dzien.s-dostepny { background: var(--dostepny-tlo); border-color: transparent; color: var(--dostepny); }
.dzien.s-niedostepny { background: var(--niedostepny-tlo); border-color: transparent; color: var(--niedostepny); }
.dzien.s-na_telefon { background: var(--na-telefon-tlo); border-color: transparent; color: var(--na-telefon); }
.dzien:not(.s-brak) .numer { color: inherit; }

/* Dziś: numer dnia w wypełnionym kółku - nie koliduje z kolorem statusu. */
.dzien.dzisiaj .numer { background: var(--akcent); color: var(--na-kolorze); }
.dzien:disabled { cursor: default; }
.dzien.miniony { opacity: 0.45; }

/* Tryb edycji: kafelek pod kursorem zapowiada kolor, którym zostanie zamalowany. */
@media (hover: hover) {
  .dzien:hover:not(:disabled) {
    border-color: var(--pedzel, var(--linia-mocna));
    box-shadow: 0 0 0 1px var(--pedzel, var(--linia-mocna)), var(--cien-uniesiony);
    transform: translateY(-1px);
  }
}
.dzien:active:not(:disabled) { transform: scale(0.97); }

/* Liczba zleceń technika w dniu kalendarza dyspozycyjności. */
.dzien { position: relative; }
.plakietka {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--akcent);
  color: var(--na-kolorze);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plakietka.kolizja { background: var(--niedostepny); }

/* --- Kalendarz zleceń ---------------------------------------------------- */

.legenda-wpisow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wpis {
  display: block;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--akcent-tlo);
  color: var(--akcent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpis b { display: block; font-weight: 650; }
/* Godzina zawsze w całości, miejscowość pod nią – skracana, gdy się nie mieści. */
.wpis-miejsce { display: block; font-size: 11px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpis.uwaga { background: var(--na-telefon-tlo); color: var(--na-telefon); }
.wpis.ukonczone { background: var(--tlo); color: var(--tekst-slaby); }

.dzien.dz { justify-content: flex-start; align-items: stretch; gap: 6px; min-height: 104px; }
.dz-gora { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.dz-dostepnosc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: var(--tekst-slaby); white-space: nowrap; }
.dz-dostepnosc::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kolor); }
.dz-dostepnosc span { overflow: hidden; text-overflow: ellipsis; }
.dz-dostepnosc.s-dostepny { --kolor: var(--dostepny); }
.dz-dostepnosc.s-niedostepny { --kolor: var(--niedostepny); }
.dz-dostepnosc.s-na_telefon { --kolor: var(--na-telefon); }
.dz-wpisy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-wiecej { font-size: 11px; color: var(--tekst-slaby); }
.dzien[aria-pressed="true"] { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }

.kalendarz + .wskazowka { margin-top: 8px; }
.dzien-szczegoly { margin-top: 16px; }
.pozycje { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pozycje:empty { display: none; }
.pozycje li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.pozycje li + li { border-top: 1px solid var(--linia); }
.pozycja-godzina { font-weight: 650; font-variant-numeric: tabular-nums; }
.pozycja-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pozycja-opis strong { font-weight: 600; }
.pozycja-opis small { font-size: 13px; color: var(--tekst-slaby); }
.info a { color: inherit; }

/* --- Mój dzień i realizacja zlecenia --------------------------------------- */

.powrot { display: inline-block; margin-bottom: 4px; font-size: 13px; color: var(--tekst-slaby); text-decoration: none; }
.powrot:hover { color: var(--tekst); }
.formularz { display: flex; flex-direction: column; gap: 12px; }

.nadtytul { font-size: 12px; font-weight: 650; color: var(--akcent); text-transform: uppercase; letter-spacing: 0.05em; }
.naglowek-opis { margin-top: 2px; font-size: 14px; color: var(--tekst-slaby); overflow-wrap: anywhere; }
.naglowek-opis:empty { display: none; }
/* Główna akcja ekranu: na całą szerokość, wygodna pod kciuk. */
.przycisk.duzy { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 16px; font-size: 16px; font-weight: 600; text-align: center; }

.postep-dnia { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--tekst-slaby); white-space: nowrap; }
/* Pasek rysujemy sami – systemowy <progress> każda przeglądarka (i motyw) koloruje po swojemu. */
.postep-dnia progress { flex: 1; min-width: 0; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: var(--linia); color: var(--dostepny); appearance: none; -webkit-appearance: none; }
.postep-dnia progress::-webkit-progress-bar { background: var(--linia); }
.postep-dnia progress::-webkit-progress-value { border-radius: 999px; background: var(--dostepny); transition: width 0.2s; }
.postep-dnia progress::-moz-progress-bar { border-radius: 999px; background: var(--dostepny); }

/* Oś dnia: wizyty po kolei, połączone linią; punkt pokazuje, czy wizyta jest zrobiona. */
.os-dnia { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.os-dnia > li { position: relative; padding-left: 26px; }
.os-dnia > li::before { content: ""; position: absolute; z-index: 1; left: 2px; top: 22px; width: 12px; height: 12px; border: 2px solid var(--obrys); border-radius: 50%; background: var(--tlo); }
.os-dnia > li::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -32px; width: 2px; background: var(--linia); }
.os-dnia > li:last-child::after { display: none; }
.os-dnia > li.gotowy::before { border-color: var(--dostepny); background: var(--dostepny); }
.os-dnia > li.gotowy::after { background: var(--dostepny); }
.os-dnia > li.teraz::before { border-color: var(--akcent); background: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-tlo); }
.os-dnia .karta { margin-bottom: 0; }
.wizyta.teraz { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent), var(--cien-uniesiony); }
.wizyta-zwarta { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); color: inherit; text-decoration: none; transition: border-color 0.12s; }
.wizyta-zwarta:hover { border-color: var(--linia-mocna); }
.wizyta-zwarta .pozycja-godzina { flex: none; min-width: 44px; }
.wizyta-zwarta .pozycja-opis { flex: 1; }
.wizyta-zwarta .znacznik { flex: none; }
.wizyta-strzalka { flex: none; font-size: 20px; line-height: 1; color: var(--tekst-slaby); }
.os-dnia > li.gotowy .wizyta-zwarta strong, .os-dnia > li.gotowy .pozycja-godzina { color: var(--tekst-slaby); }

.wizyta-gora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wizyta-godzina { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wizyta-klient { font-size: 17px; font-weight: 650; }
.wizyta-cena { margin-left: auto; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; }

/* Postęp wizyty: kolejne kroki, wykonane w kolorze „dostępny”. */
.kroki { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kroki li { padding: 3px 10px; border-radius: 999px; background: var(--tlo); color: var(--tekst-slaby); font-size: 12px; font-weight: 600; }
.kroki li.gotowy { background: var(--dostepny-tlo); color: var(--dostepny); }
.kroki li.gotowy::before { content: "✓ "; }
.kroki li.biezacy { background: var(--akcent-tlo); color: var(--akcent); box-shadow: inset 0 0 0 1px var(--akcent); }

/* Kreator wizyty na stronie zlecenia: pasek kroków u góry, jeden krok na ekranie,
   „Wstecz” i „Dalej” przyklejone do dołu. Nazwę widać tylko przy bieżącym kroku. */
.kreator-kroki ol { display: flex; align-items: center; margin: 0 0 14px; padding: 0; list-style: none; }
.kreator-kroki li { flex: 1; display: flex; align-items: center; min-width: 0; }
.kreator-kroki li:first-child { flex: none; }
.kreator-kroki li + li::before { content: ""; flex: 1; min-width: 4px; height: 2px; background: var(--linia); }
.kreator-kroki li.gotowy + li::before { background: var(--dostepny); }
.kreator-krok { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px; border: 0; border-radius: 999px; background: none; color: var(--tekst); font: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.kreator-znak { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--obrys); border-radius: 50%; background: var(--powierzchnia); color: var(--tekst-slaby); font-size: 13px; font-variant-numeric: tabular-nums; transition: border-color 0.12s, background-color 0.12s; }
.kreator-krok:hover .kreator-znak { border-color: var(--tekst-slaby); }
.kreator-kroki li.gotowy .kreator-znak { border-color: var(--dostepny); background: var(--dostepny); color: var(--na-kolorze); }
.kreator-krok[aria-current="step"] .kreator-znak { border-color: var(--akcent); color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-tlo); }
.kreator-kroki li.gotowy .kreator-krok[aria-current="step"] .kreator-znak { border-color: var(--dostepny); color: var(--na-kolorze); box-shadow: 0 0 0 3px var(--dostepny-tlo); }
.kreator-krok:not([aria-current="step"]) .kreator-nazwa { display: none; }
.karta h2:focus { outline: none; }
.kreator-nawigacja { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--tlo); border-top: 1px solid var(--linia); }
.kreator-nawigacja .wskazowka { flex-basis: 100%; margin: 0; }
.kreator-nawigacja .przycisk { min-height: 44px; }
.kreator-dalej { margin-left: auto; }
.karta.sukces { border-color: var(--dostepny); background: var(--dostepny-tlo); }
.karta.sukces h2 { color: var(--dostepny); }

.zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.zdjecia:empty { display: none; }
.zdjecie { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--tlo); }
.zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zdjecie .zamknij { position: absolute; top: 4px; right: 4px; margin: 0; background: var(--powierzchnia); color: var(--tekst); box-shadow: var(--cien); }
.zdjecie .zamknij:hover { background: var(--niedostepny-tlo); color: var(--niedostepny); }
/* Zdjęcie zapisane w telefonie, jeszcze niewysłane (public/kolejka-zdjec.js). */
.zdjecie.czeka img { opacity: 0.55; }
.zdjecie-stan { position: absolute; inset: auto 0 0 0; padding: 3px 6px; background: var(--na-telefon-tlo); color: var(--na-telefon); font-size: 11px; font-weight: 650; text-align: center; }

/* Dokumenty do podpisu: pole podpisu zawsze jak kartka – białe, z granatowym atramentem. */
.podpis { display: block; width: 100%; max-width: 640px; height: 200px; border: 1px dashed var(--obrys); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.wybor-dlugi { align-items: flex-start !important; line-height: 1.4; }
.wybor-dlugi input { flex: none; margin-top: 3px; }
.dokument-okno h3 { margin: 6px 0 0; font-size: 14px; font-weight: 650; }
.dokument-okno p { margin: 0; }
.dokument-zaznaczone { padding-left: 22px; text-indent: -22px; }
.dokument-zaznaczone::before { content: "☑"; display: inline-block; width: 22px; text-indent: 0; }

.dosprzedaz { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dosprzedaz:empty { display: none; }
.dosprzedaz li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.dosprzedaz li + li { border-top: 1px solid var(--linia); }
.dosprzedaz .zeton-grupa { margin-left: auto; }
.dosprzedaz-kwota { min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Statystyki ------------------------------------------------------------ */

.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 16px; }
.kafel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.kafel dt { font-size: 13px; color: var(--tekst-slaby); }
.kafel dd { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kafel small { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--tekst-slaby); }

/* Słupki przychodu: dwanaście miesięcy, okres wybrany w kolorze akcentu, reszta przygaszona. */
.slupki, .slupki-os { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.slupki { height: 190px; border-bottom: 1px solid var(--linia-mocna); }
.slupek { display: grid; grid-template-rows: 18px minmax(0, 1fr); min-width: 0; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.slupek-wartosc { font-size: 11px; color: var(--tekst-slaby); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.slupek-tor { display: flex; align-items: flex-end; justify-content: center; }
.slupek i { display: block; width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; background: var(--tekst-slaby); opacity: 0.35; transition: opacity 0.12s; }
.slupek.w-okresie i { background: var(--akcent); opacity: 1; }
.slupek:hover i, .slupek:focus-visible i { opacity: 0.7; }
.slupek.w-okresie:hover i, .slupek.w-okresie:focus-visible i { opacity: 0.85; }
.slupki-os { margin-top: -6px; font-size: 11px; color: var(--tekst-slaby); text-align: center; }
.karta .wskazowka[role="status"] { min-height: 19px; }
.udzial-pasek { display: inline-block; width: 90px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--tlo); vertical-align: middle; }
.udzial-pasek i { display: block; height: 100%; border-radius: 999px; background: var(--akcent); }

/* --- Cold calling i klienci ------------------------------------------------ */

/* Pasek nad listą: widoki z licznikami, branża, wyszukiwanie. */
.filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.filtry .zetony { flex: 1 1 auto; }
.filtry input[type="search"] { flex: 1 1 220px; min-width: 0; padding: 7px 11px; }
.zeton b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tekst-slaby); }
.zeton[aria-pressed="true"] b { color: inherit; }
main > .info { margin-bottom: 14px; }
.info .link { color: inherit; font-weight: 600; }

/* Komórka z nazwą: może się zawijać, pod spodem drobny opis. */
.tabela td.glowna { white-space: normal; min-width: 220px; overflow-wrap: anywhere; }
.tabela td.glowna strong { font-weight: 600; }
.tabela td small { display: block; font-size: 12px; color: var(--tekst-slaby); }
.tabela td .znacznik + small { margin-top: 3px; }
.tabela td small.pilne { color: var(--niedostepny); font-weight: 600; }
.tabela td.liczba { font-variant-numeric: tabular-nums; }
.tabela + .wskazowka, .tabela-ramka + .wskazowka { margin-top: 8px; }

/* Okno pracy z leadem: po lewej numer i skrypt, po prawej wynik rozmowy i historia. */
.okno.rozmowa { max-width: 1040px; }
.rozmowa-naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rozmowa-naglowek h2 { overflow-wrap: anywhere; }
.rozmowa-naglowek .zetony { margin-top: 6px; }
.rozmowa-uklad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rozmowa-kolumna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rozmowa .sekcja:first-child { padding-top: 0; border-top: 0; }
.telefon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.telefon a { color: var(--akcent); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-decoration: none; }
.telefon a:hover { text-decoration: underline; }

.skrypt { display: flex; flex-direction: column; gap: 10px; }
.skrypt h3 { margin: 4px 0 -4px; font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.05em; }
.skrypt p { margin: 0; }
.skrypt ol, .skrypt ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; }
/* To, co mówi się na głos. */
.kwestia { margin: 0; padding: 10px 12px; border-left: 3px solid var(--akcent); border-radius: 0 8px 8px 0; background: var(--tlo); white-space: pre-wrap; overflow-wrap: anywhere; }
.skrypt details { border: 1px solid var(--linia); border-radius: 8px; }
.skrypt summary { padding: 8px 12px; font-weight: 600; cursor: pointer; }
.skrypt details[open] summary { border-bottom: 1px solid var(--linia); }
.skrypt details > :not(summary) { margin: 10px 12px; }
.skrypt details > ul { margin-left: 12px; font-size: 14px; }
.skrypt details .kwestia { margin: 10px 12px; }

.historia { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.historia:empty { display: none; }
.historia li { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.historia li + li { border-top: 1px solid var(--linia); }
.historia-gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.historia small { font-size: 12px; color: var(--tekst-slaby); }
.historia p { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.historia a, .sekcja p > a { color: inherit; }
.historia .historia-kwota { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Podsumowanie importu: liczby i powody pominięcia. */
.podsumowanie { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--tlo); list-style: none; font-size: 14px; }
.podsumowanie strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.okno input[type="file"] { font: inherit; font-size: 14px; }

/* --- Zespół na mapie ------------------------------------------------------ */

.zespol-data { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tekst-slaby); }
.zespol-uklad { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.zespol-technicy { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zespol-technik {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--linia); border-radius: 10px;
  background: var(--powierzchnia); color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.zespol-technik:hover { border-color: var(--linia-mocna); }
.zespol-technik[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent-tlo); box-shadow: inset 0 0 0 1px var(--akcent); }
.zespol-opis { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zespol-opis small { color: var(--tekst-slaby); font-size: 13px; }
.zespol-zlecenia { font-size: 12px; font-weight: 600; color: var(--tekst-slaby); white-space: nowrap; }
.zespol-kropka { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--obrys); }
.stan-teraz .zespol-kropka { background: var(--dostepny); box-shadow: 0 0 0 3px var(--dostepny-tlo); }
.stan-niedawno .zespol-kropka { background: var(--na-telefon); }

.mapa {
  position: relative; height: min(68vh, 640px); min-height: 320px; overflow: hidden;
  border-radius: 10px; background: var(--tlo); touch-action: none; user-select: none; cursor: grab;
}
.mapa.przesuwanie { cursor: grabbing; }
.mapa-kafle img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; opacity: 0; transition: opacity 0.2s; }
.mapa-kafle img.wczytany { opacity: 1; }
:root[data-motyw="ciemny"] .mapa-kafle { filter: brightness(0.75) contrast(1.1) saturate(0.8); }
.mapa-trasa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-linia { fill: none; stroke: var(--akcent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.mapa-start { fill: var(--powierzchnia); stroke: var(--akcent); stroke-width: 3; }
.mapa-znacznik {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: -18px 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer;
}
.mapa-pinezka {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--powierzchnia); background: var(--obrys); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: var(--cien-uniesiony);
}
.mapa-znacznik.stan-teraz .mapa-pinezka { background: var(--akcent); }
.mapa-znacznik.stan-niedawno .mapa-pinezka { background: var(--na-telefon); }
.mapa-podpis { padding: 1px 6px; border-radius: 6px; background: var(--powierzchnia); color: var(--tekst); font-size: 12px; font-weight: 600; box-shadow: var(--cien); }
.mapa-przyciski { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapa-przyciski .przycisk { width: 36px; box-shadow: var(--cien); }
.mapa-autorzy { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 6px; background: var(--powierzchnia); font-size: 11px; color: var(--tekst-slaby); opacity: 0.9; }
.mapa-autorzy a { color: inherit; }

@media (max-width: 860px) {
  .zespol-uklad { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .rozmowa-uklad { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Komputer (≥ 1024 px) -------------------------------------------------
   Treść jest wyśrodkowana w miejscu obok panelu bocznego, zamiast trzymać się jego krawędzi.
   Strony z tabelą, kalendarzem, kaflami albo mapą dostają szeroki układ; pozostałe (ustawienia,
   mój dzień, ściąga, checklisty) – węższą kolumnę, wygodną do czytania. */
@media (min-width: 1024px) {
  .uklad { grid-template-columns: 252px minmax(0, 1fr); }

  main { max-width: 1000px; margin-inline: auto; padding: 36px 40px 56px; }
  main:has(.tabela-ramka, .kalendarz, .kafle, .zespol-uklad, .filtry, .karty-siatka) { max-width: 1480px; }
  main:has(.sc-pasek) { max-width: 1080px; }

  h1 { font-size: 26px; }
  .naglowek { margin-bottom: 26px; }

  /* Panel boczny: pozycje z ikonami, podmenu wcięte pod ikoną grupy. */
  .panel-boczny { gap: 20px; padding: 24px 14px 16px; }
  .marka { padding: 0 10px 2px; }
  .panel-boczny nav, .nav-sekcja { gap: 1px; }

  /* Wybór poziomu (właściciel) i konto na dole panelu. */
  .panel-boczny .podglad-poziomu {
    width: auto;
    margin: auto 0 -10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    font-size: 12px;
  }
  .panel-boczny .podglad-poziomu select { width: 100%; }
  .podglad-poziomu + .konto { margin-top: 0; }
  .konto {
    display: grid;
    grid-template-columns: 36px auto 1fr;
    align-items: center;
    gap: 1px 10px;
    padding: 10px;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--tlo);
  }
  .konto::before {
    content: attr(data-inicjaly);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--akcent-tlo);
    color: var(--akcent);
    font-size: 13px;
    font-weight: 700;
  }
  .konto span { grid-column: 2 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .konto .link { justify-self: start; font-size: 13px; text-decoration: none; }
  .konto .link:hover { text-decoration: underline; }

  /* Tabele: wyższe wiersze, podświetlenie wiersza pod kursorem, linki bez podkreślenia. */
  .tabela th, .tabela td { padding: 12px 16px; }
  .tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--weekend-tlo); }
  .tabela tbody tr:hover td { background: var(--weekend-tlo); }
  .tabela td a { font-weight: 600; text-decoration: none; }
  .tabela td a:hover { color: var(--akcent); text-decoration: underline; }

  .kafle { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .kafel { padding: 16px 18px; }
  .kafel dd { font-size: 24px; }

  /* Zgłoszenia: karty w kilku kolumnach. */
  .karty-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); align-items: start; gap: 16px; }
  .karty-siatka > .karta { margin: 0; }
}

/* Pozycje menu z ikonami: panel boczny na komputerze i arkusz menu na telefonie. */
@media (min-width: 1024px), (max-width: 599px) {
  .panel-boczny nav a, .nav-przelacznik { display: flex; align-items: center; gap: 11px; padding: 8px 10px; font-size: 14.5px; }
  .nav-przelacznik { justify-content: flex-start; }
  .nav-przelacznik::after { margin: 0 3px 3px auto; }
  .panel-boczny nav a::before, .nav-przelacznik::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
    opacity: 0.7;
  }
  .panel-boczny nav a.aktywny::before { opacity: 1; }
  .nav-podmenu { margin-left: 19px; padding-left: 10px; }
  .nav-podmenu a::before { display: none; }
  .panel-boczny nav a[href="/moj-dzien"] { --ikona: url("/ikony/menu/moj-dzien.svg"); }
  .panel-boczny nav a[href="/profil"] { --ikona: url("/ikony/menu/profil.svg"); }
  .panel-boczny nav a[href="/sciaga"] { --ikona: url("/ikony/menu/sciaga.svg"); }
  .panel-boczny nav a[href="/checklisty"] { --ikona: url("/ikony/menu/checklisty.svg"); }
  .panel-boczny nav a[href="/zgloszenia"] { --ikona: url("/ikony/menu/zgloszenia.svg"); }
  .panel-boczny nav a[href="/zlecenia"] { --ikona: url("/ikony/menu/zlecenia.svg"); }
  .panel-boczny nav a[href="/klienci"] { --ikona: url("/ikony/menu/klienci.svg"); }
  .panel-boczny nav a[href="/cold-calling"] { --ikona: url("/ikony/menu/cold-calling.svg"); }
  .panel-boczny nav a[href="/statystyki"] { --ikona: url("/ikony/menu/statystyki.svg"); }
  .panel-boczny nav a[href="/zespol"] { --ikona: url("/ikony/menu/zespol.svg"); }
  .panel-boczny nav a[href="/pracownicy"] { --ikona: url("/ikony/menu/pracownicy.svg"); }
  .panel-boczny nav a[href="/ustawienia"] { --ikona: url("/ikony/menu/ustawienia.svg"); }
  .nav-przelacznik { --ikona: url("/ikony/menu/kalendarz.svg"); }
}

/* Niski ekran laptopa: ciaśniejsze menu, żeby konto mieściło się bez przewijania panelu. */
@media (min-width: 1024px) and (max-height: 960px) {
  .panel-boczny { gap: 14px; padding-top: 18px; }
  .panel-boczny nav a, .nav-przelacznik { padding-top: 6px; padding-bottom: 6px; }
  .nav-sekcja { margin-top: 10px; }
  .nav-naglowek { padding-bottom: 2px; }
  .panel-boczny .podglad-poziomu { padding-top: 4px; padding-bottom: 4px; }
}

/* Szeroki ekran: kalendarz po lewej, szczegóły dnia (albo panel trybu edycji) po prawej,
   przyklejone przy przewijaniu. Węższe okna zostają przy układzie jeden pod drugim. */
@media (min-width: 1360px) {
  .obok { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 0 24px; }
  .obok > * { grid-column: 1; grid-row: 1; min-width: 0; }
  .obok > .obok-boczna {
    grid-column: 2;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    margin-top: 14px;
    overflow-y: auto;
  }
  .obok-boczna .dzien-szczegoly { margin-top: 0; }
  /* Obsada dnia w wąskiej kolumnie: technik pod technikiem, liczba zleceń przy prawej krawędzi. */
  .obok-boczna .pedzle.obsada { display: grid; grid-template-columns: minmax(0, 1fr); }
  .obok-boczna .pedzle.obsada .legenda { float: none; margin: 0; }
  .obok-boczna div.pedzel span { display: flex; }
  .obok-boczna div.pedzel strong { margin-left: auto; padding-left: 8px; white-space: nowrap; }
  /* Panel dyspozycyjności: liczniki i statusy w równej siatce dwa na dwa. */
  .edycja.obok-boczna .pedzle { display: grid; grid-template-columns: 1fr 1fr; }
  .edycja.obok-boczna .pedzle legend, .edycja.obok-boczna .pedzle .legenda { grid-column: 1 / -1; float: none; margin: 0 0 2px; }
  .edycja.obok-boczna .pedzel span { display: flex; }
}

/* --- Responsywność -------------------------------------------------------
   Trzy układy wg szerokości okna:
     komputer  >= 1024px  panel boczny po lewej (style bazowe powyżej)
     tablet    600-1023px panel boczny jako pasek u góry
     telefon   <  600px   pasek w dwóch rzędach, popup godzin jako arkusz u dołu
   Gęstość kafelków kalendarza zależy od szerokości samego kalendarza
   (@container), a rozmiary celów dotykowych od rodzaju wskaźnika (pointer). */

/* Kafelki: wersja zwarta, gdy pełne etykiety i godziny się nie mieszczą. */
@container kalendarz (max-width: 640px) {
  .dni-tygodnia, .siatka { gap: 4px; }
  .dzien { min-height: 68px; padding: 7px; border-radius: 8px; }
  .dzien .etykieta { display: none; }
  .dzien .godziny-dnia { font-weight: 650; white-space: normal; overflow-wrap: anywhere; opacity: 1; }
  .godziny-dnia .pelne { display: none; }
  .godziny-dnia .krotko { display: inline; }
  .plakietka { top: 5px; right: 5px; padding: 1px 6px; }
  .plakietka-opis { display: none; }
  /* Kalendarz zleceń: we wpisach zostają same godziny, przy dyspozycyjności sama kropka. */
  .dzien.dz { min-height: 68px; gap: 4px; }
  .dz-dostepnosc span, .wpis-miejsce, .dz-wiecej-opis { display: none; }
  .wpis { padding: 1px 3px; font-size: 11px; text-align: center; }
}
@container kalendarz (max-width: 420px) {
  .wpis { padding: 0 1px; font-size: 10px; }
  .dzien { min-height: 58px; padding: 6px 4px; }
  .dzien .numer { min-width: 22px; height: 22px; margin: -2px 0 0 -1px; padding: 0 3px; font-size: 13px; }
  .dzien .godziny-dnia { font-size: 10px; }
}

/* Ekrany dotykowe: większe cele i pola bez automatycznego powiększania w iOS. */
@media (pointer: coarse) {
  .przycisk, .link { min-height: 44px; }
  .przycisk.ikona { min-width: 44px; }
  .panel-boczny nav a, .nav-przelacznik { padding: 11px 12px; }
  .pedzel span { min-height: 44px; padding: 6px 14px; }
  .zeton { min-height: 40px; align-items: center; }
  .zeton-krok { min-width: 40px; }
  .skrypt summary { padding: 12px; }
  input[type="search"] { min-height: 44px; font-size: 16px; }
  .okno label.technik-wybor { min-height: 44px; }
  .tryb-etykieta { display: inline-flex; align-items: center; min-height: 44px; }
  input[type="email"], input[type="password"], input[type="time"], input[type="date"], input[type="number"], select { min-height: 44px; font-size: 16px; }
  .popup { width: 300px; }
  .zmiana span { min-height: 52px; justify-content: center; }
  .zamknij { width: 44px; height: 44px; margin: -10px -10px -10px 0; font-size: 24px; }
  .zdjecie .zamknij { width: 36px; height: 36px; margin: 0; }
  .kreator-krok { padding: 6px; }
  .wybor-dlugi input { width: 22px; height: 22px; margin-top: 0; }
}
@media (hover: none) and (pointer: coarse) {
  .tylko-mysz { display: none; }
  .tylko-dotyk { display: inline; }
}

/* Tablet i telefon */
@media (max-width: 1023px) {
  .uklad { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  main { padding: 24px; margin-inline: auto; }
}

/* Tablet: panel boczny jako pasek u góry */
@media (min-width: 600px) and (max-width: 1023px) {
  .panel-boczny { flex-direction: row; align-items: center; gap: 8px 20px; padding: 10px 24px; border-right: 0; border-bottom: 1px solid var(--linia); }
  .panel-boczny nav { flex: 1 1 auto; flex-direction: row; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .panel-boczny nav a, .nav-przelacznik { white-space: nowrap; }
  /* W poziomym pasku podmenu rozwija się w bok, tuż za swoim przyciskiem. */
  .nav-grupa, .nav-podmenu { flex-direction: row; flex: none; align-items: center; }
  .nav-podmenu { margin-left: 0; }
  /* W pasku sekcje oddziela pionowa kreska, nagłówki zajmowałyby za dużo miejsca. */
  .nav-sekcja { flex-direction: row; flex: none; align-items: center; margin: 0 0 0 6px; padding-left: 6px; border-left: 1px solid var(--linia); }
  .nav-naglowek { display: none; }
  .panel-boczny { position: static; height: auto; overflow: visible; }
  /* Gdy brakuje miejsca, najpierw skraca się nazwa konta, dopiero potem nawigacja. */
  .konto { margin: 0; flex-direction: row; align-items: center; gap: 12px; min-width: 0; flex-shrink: 20; }
  .konto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .konto .link { flex-shrink: 0; }
  /* Wybór poziomu (właściciel) dostaje w pasku własny rząd pod nawigacją. */
  .panel-boczny:has(.podglad-poziomu) { flex-wrap: wrap; }
  .panel-boczny .podglad-poziomu { order: 4; flex-basis: 100%; justify-content: flex-end; margin: 0; }
  /* Przy zawijaniu nawigacja nie może wypchnąć konta do drugiego rzędu. */
  .panel-boczny:has(.podglad-poziomu) nav { flex-basis: 0; }
}

/* Elementy tylko dla telefonu (tworzy je public/nav.js). */
.pasek-gorny, .pasek-dolny, .menu-naglowek, .menu-tlo { display: none; }

/* Telefon */
@media (max-width: 599px) {
  h1 { font-size: 21px; }

  /* Miejsce na dolny pasek kart. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .uklad { display: block; min-height: 0; }

  /* Górny pasek: logo i inicjały konta. Przewija się razem ze stroną, żeby nie zabierać miejsca. */
  .pasek-gorny {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: var(--powierzchnia);
    border-bottom: 1px solid var(--linia);
  }
  .pasek-gorny .marka img { height: 30px; }
  .pasek-gorny-konto {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--akcent-tlo);
    color: var(--akcent);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .pasek-gorny-konto:empty::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("/ikony/menu/profil.svg") center / contain no-repeat;
    mask: url("/ikony/menu/profil.svg") center / contain no-repeat;
  }

  /* Dolny pasek kart (wzorem nawigacji aplikacji mobilnych): ikona w pigułce i krótka nazwa. */
  .pasek-dolny {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: var(--powierzchnia);
    border-top: 1px solid var(--linia);
    box-shadow: 0 -2px 10px rgba(22, 32, 42, 0.05);
  }
  .dolny-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--tekst-slaby);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .dolny-nazwa { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dolny-ikona { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color 0.15s; }
  .dolny-ikona::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
  }
  .dolny-wiecej .dolny-ikona {
    --ikona: url("/ikony/menu/wiecej.svg");
  }
  .dolny-link[aria-current="page"], .dolny-link.aktywna, .dolny-link[aria-expanded="true"] { color: var(--akcent); }
  .dolny-link[aria-current="page"] .dolny-ikona, .dolny-link.aktywna .dolny-ikona, .dolny-link[aria-expanded="true"] .dolny-ikona { background: var(--akcent-tlo); }
  .dolny-link:active .dolny-ikona { background: var(--linia); }
  .dolny-link:focus-visible { outline: none; }
  .dolny-link:focus-visible .dolny-ikona { outline: 2px solid var(--akcent); outline-offset: 2px; }

  /* Pasek kart znika, gdy jest w drodze: przy pisaniu (klawiatura) i w kreatorze wizyty,
     który ma własne przyciski „Wstecz” / „Dalej” przy dolnej krawędzi. */
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea):focus) .pasek-dolny,
  html:has(.kreator-nawigacja:not([hidden])) .pasek-dolny { display: none; }
  html:has(.kreator-nawigacja:not([hidden])) body { padding-bottom: 0; }

  /* Pełne menu: panel boczny wysuwa się od dołu jako arkusz. */
  .panel-boczny {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 31;
    height: auto;
    max-height: min(88dvh, 88vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 14px;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(22, 32, 42, 0.25);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
  }
  html.menu-otwarte .panel-boczny { transform: none; visibility: visible; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  html.menu-otwarte { overflow: hidden; }
  .menu-tlo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(22, 32, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  html.menu-otwarte .menu-tlo { opacity: 1; pointer-events: auto; }

  .menu-naglowek {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -16px;
    padding: 18px 16px 8px;
    background: var(--powierzchnia);
    font-size: 17px;
    touch-action: none;
  }
  .menu-uchwyt { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--linia-mocna); }
  .panel-boczny > .marka { display: none; }
  /* Konto na górze arkusza, pod nim wybór poziomu (właściciel), potem menu. */
  .menu-naglowek { order: 0; }
  .konto { order: 1; }
  .panel-boczny .podglad-poziomu { order: 2; }
  .panel-boczny nav { order: 3; }

  .konto {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--tlo);
  }
  .konto::before {
    content: attr(data-inicjaly);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--akcent-tlo);
    color: var(--akcent);
    font-size: 15px;
    font-weight: 700;
  }
  .konto span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .konto .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; text-decoration: none; color: var(--akcent); font-weight: 600; }
  .konto #wyloguj { color: var(--niedostepny); }
  .panel-boczny .podglad-poziomu { justify-content: space-between; width: auto; margin: 0; padding: 8px 8px 8px 12px; }
  .panel-boczny .podglad-poziomu select { flex: 0 1 60%; }

  .panel-boczny nav { gap: 2px; }
  .nav-sekcja { margin-top: 12px; }
  .panel-boczny nav a, .nav-przelacznik { min-height: 48px; padding: 10px 12px; font-size: 16px; }

  /* Tabele jako karty (etykiety kolumn wstawia public/nav.js). */
  .tabela-ramka { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela tbody { display: flex; flex-direction: column; gap: 10px; }
  .tabela tr { padding: 12px 14px; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
  .tabela tr.wiersz-klikalny { cursor: pointer; }
  /* Tabela w karcie: wiersze jako płaskie pola, bez ramki w ramce. */
  .karta .tabela tr { background: var(--tlo); border-color: transparent; }
  .tabela tr.wiersz-klikalny:active { background: var(--tlo); }
  .tabela tbody tr + tr td { border-top: 0; }
  .tabela td, .tabela td:last-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 12px; padding: 4px 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .tabela td::before { content: attr(data-etykieta); color: var(--tekst-slaby); font-size: 13px; line-height: 1.6; }
  .tabela td:first-child { display: block; padding: 0 0 6px; font-size: 16px; font-weight: 650; }
  .tabela td:first-child::before, .tabela td[data-etykieta=""]::before { content: none; }
  .tabela td.glowna { min-width: 0; }
  .tabela td.glowna small, .tabela td:first-child small { font-weight: 400; }
  .tabela td[data-etykieta=""]:not(:first-child) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linia); }
  .tabela td[data-etykieta=""]:empty { display: none; }
  .tabela td:not(:first-child) > * { grid-column: 2; }
  .tabela td small:empty { display: none; }
  /* Komórka bez wartości („–”) nic nie mówi w karcie – pomijamy ją. */
  .tabela td.pusta:not(:first-child) { display: none; }
  .tabela td a { font-weight: 600; text-decoration: none; }
  .tabela td a[href^="tel:"], .tabela td a[href^="mailto:"] { color: var(--akcent); }
  .menu-naglowek .zamknij { width: 40px; height: 40px; margin: -6px -4px -6px 0; border-radius: 50%; background: var(--tlo); }
  .tabela tr.wylaczone { opacity: 0.75; }

  /* Pola formularzy: 16 px, żeby iOS nie powiększał strony przy wpisywaniu. */
  input[type="email"], input[type="password"], input[type="text"], input[type="tel"], input[type="time"],
  input[type="date"], input[type="number"], input[type="search"], input[type="url"], textarea, select { font-size: 16px; }
  .okno label input:not([type="checkbox"]), .okno label select, .okno label textarea,
  .formularz label input:not([type="checkbox"]), .formularz label textarea { font-size: 16px; }

  /* Nagłówek strony: akcje pod tytułem, przyciski na całą szerokość. */
  .naglowek .akcje { width: 100%; }
  .naglowek .akcje > .przycisk { flex: 1 1 auto; justify-content: center; }
  .podglad-poziomu:not(.panel-boczny *) { margin: -4px 0 12px; width: 100%; justify-content: space-between; }

  /* Krótkie okna jako arkusz u dołu ekranu – przyciski w zasięgu kciuka. */
  .okno:not(.szerokie, .rozmowa) {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    animation: arkusz-wejscie 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .okno:not(.szerokie, .rozmowa) .okno-przyciski .przycisk { flex: 1; }
  .okno.rozmowa { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .popup { z-index: 40; }
  /* Powrót do listy: w przeglądarce kiosku to jedyna droga wstecz, więc pełnowymiarowy cel dotyku. */
  .powrot { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -10px 0 0; padding-right: 12px; font-size: 15px; font-weight: 600; color: var(--akcent); }

  .pedzle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pedzle legend, .pedzle .legenda { float: none; margin: 0 0 6px; }
  .pedzle .legenda { grid-column: 1 / -1; margin: 0; }
  .pedzle.obsada { grid-template-columns: 1fr; }
  .pedzel span { display: flex; }
  div.pedzel span { justify-content: flex-start; }
  div.pedzel strong { margin-left: auto; }
  main { padding: 16px; }
  .naglowek { margin-bottom: 16px; }
  .podglad { width: 100%; }
  .podglad select { flex: 1; min-width: 0; }
  .edycja { padding: 12px; }
  .kalendarz { padding: 8px; }
  .miesiac-nav { width: 100%; }
  .miesiac-nav h2, .miesiac-nav h3 { min-width: 0; flex: 1; }
  .stan { width: 100%; justify-content: space-between; }
  .kreator-dalej { flex: 1; }
  .okno .kreator-krok:not([aria-current="step"]) .kreator-nazwa { display: none; }
  .kt { padding: 8px; }
  .kt-dz { min-height: 52px; padding: 3px 2px; }
  .kt-g { padding: 0 2px; font-size: 10px; line-height: 14px; text-align: center; }
  .kreator-podsumowanie { flex-basis: 100%; }
  /* Główna akcja kreatora na całą szerokość, pod nią Anuluj i Wstecz. */
  .okno.szerokie .kreator-stopka .przycisk-glowny { order: 1; flex-basis: 100%; }
  .okno.szerokie .kreator-stopka .przycisk:not(.przycisk-glowny) { order: 2; }
  /* Sześć kroków mieści się tylko jako same znaki – nazwę kroku pokazuje nagłówek pod paskiem. */
  .kreator-nazwa { display: none; }

  .popup {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    gap: 14px;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(22, 32, 42, 0.18);
    font-size: 16px;
    animation-name: arkusz-wejscie;
  }
  .zakres { gap: 16px; }

  /* Długie formularze (zgłoszenie, zlecenie) zajmują cały ekran; przyciski zostają u dołu. */
  .okno.szerokie { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 16px; border: 0; border-radius: 0; }
  .okno.szerokie form { min-height: 100%; }
  .okno.szerokie .okno-przyciski { bottom: -16px; margin: auto -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .okno.szerokie .okno-przyciski .przycisk { flex: 1; justify-content: center; }

  /* Cennik jako lista: pozycja na całą szerokość, cena po prawej, ilość w wierszu pod spodem. */
  .zetony > .zeton-grupa { display: flex; flex-wrap: wrap; width: 100%; }
  .zetony > .zeton-grupa > .zeton:first-child, .cennik-sekcja .zetony > .zeton { flex: 1 1 100%; justify-content: space-between; gap: 12px; border-radius: 10px; text-align: left; }
  .zetony > .zeton-grupa > .zeton:first-child small, .cennik-sekcja .zetony > .zeton small { flex: none; }
  .cennik-sekcja .zetony > .zeton { width: 100%; }
  .cennik-sekcja summary { padding: 10px 0; font-size: 14px; }
}
@keyframes arkusz-wejscie { from { transform: translateY(100%); } }

/* --- Checklisty ----------------------------------------------------------- */
.checklista-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.checklista-naglowek h2 { margin-right: auto; }
.checklista-postep { font-variant-numeric: tabular-nums; }
.checklista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklista-pozycja label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 8px 10px; border: 1px solid var(--linia); border-radius: var(--promien); }
.checklista-pozycja input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.checklista-tresc { display: flex; flex-direction: column; gap: 2px; }
.checklista-tytul { font-weight: 600; font-size: 14px; }
.checklista-opis { font-size: 13px; color: var(--tekst-slaby); line-height: 1.45; }
.checklista-pozycja.zrobione label { border-color: var(--dostepny); background: var(--dostepny-tlo); }
.checklista-pozycja.zrobione .checklista-tytul { text-decoration: line-through; color: var(--tekst-slaby); }
.strefa-zasada { display: block; margin-top: 2px; color: var(--tekst-slaby); }

/* --- Ściąga techniczna ---------------------------------------------------- */
/* Pasek szukania i działów przykleja się u góry – na telefonie zawsze pod kciukiem. */
.sc-pasek {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  margin: -8px -10px 6px; padding: 8px 10px 10px;
  background: var(--tlo);
  border-bottom: 1px solid transparent;
}
.sc-szukaj { position: relative; display: flex; align-items: center; }
.sc-szukaj svg { position: absolute; left: 13px; width: 18px; height: 18px; fill: none; stroke: var(--tekst-slaby); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.sc-szukaj input { width: 100%; padding: 11px 44px 11px 40px; font-size: 16px; border-radius: 10px; border-color: var(--linia-mocna); }
.sc-szukaj input:focus { border-color: var(--akcent); outline: none; box-shadow: 0 0 0 3px var(--akcent-tlo); }
.sc-szukaj kbd { position: absolute; right: 12px; padding: 1px 7px; border: 1px solid var(--linia-mocna); border-radius: 5px; font-family: inherit; font-size: 12px; color: var(--tekst-slaby); pointer-events: none; }
.sc-szukaj input:focus ~ kbd, .sc-szukaj input:not(:placeholder-shown) ~ kbd { display: none; }
.sc-zakladki { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-zakladki .zeton { padding: 6px 13px; }
.sc-szukanie .sc-zakladki .zeton:not(:disabled) { border-color: var(--linia-mocna); }

/* Nagłówek działu / liczba wyników + „Rozwiń wszystko”. */
.sc-dzial-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin: 10px 0 14px; }
.sc-dzial-naglowek h2 { margin: 0; font-size: 20px; font-weight: 650; }
.sc-dzial-opis { margin: 2px 0 0; font-size: 14px; color: var(--tekst-slaby); }
.sc-licznik { margin: 0; font-size: 14px; color: var(--tekst-slaby); }
.sc-rozwin { flex: none; font-size: 13px; text-decoration: none; color: var(--akcent); }
.sc-rozwin:hover { text-decoration: underline; color: var(--akcent); }

.sc-grupy { display: flex; flex-direction: column; gap: 22px; }
.sc-grupa { display: flex; flex-direction: column; gap: 8px; }
.sc-grupa-tytul { margin: 0; font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.05em; }
.sc-grupa-opis { margin: -4px 0 2px; font-size: 13px; color: var(--tekst-slaby); }
.sc-lista { display: flex; flex-direction: column; gap: 6px; }
.sc-wyniki-dzial { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 130px; }
.sc-wyniki-tytul { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17px; font-weight: 650; }
.sc-wyniki-tytul small { font-size: 13px; font-weight: 500; color: var(--tekst-slaby); }

/* Wpis: zwijany wiersz. Zwinięty – tytuł, znaczniki i jedna linijka podglądu. */
.sc-wpis { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); transition: border-color 0.12s; }
.sc-wpis[open] { border-color: var(--linia-mocna); box-shadow: var(--cien); }
.sc-wpis > summary { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: var(--promien); }
.sc-wpis > summary::-webkit-details-marker { display: none; }
.sc-wpis > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 6px 4px 0 auto;
  border-right: 2px solid var(--tekst-slaby); border-bottom: 2px solid var(--tekst-slaby);
  transform: rotate(45deg); transition: transform 0.15s;
}
.sc-wpis[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.sc-wpis[open] > summary { padding-bottom: 6px; }
.sc-glowa { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.sc-tytul { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 650; line-height: 1.35; }
.sc-tytul small { font-size: 13px; font-weight: 500; color: var(--tekst-slaby); }
.sc-nr { display: inline-grid; place-items: center; align-self: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--tlo); color: var(--tekst-slaby); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sc-probka { flex: none; align-self: center; width: 26px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.sc-znaczniki { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-podglad { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.4; color: var(--tekst-slaby); }
.sc-wpis[open] .sc-podglad { display: none; }
.znacznik.ph-kwas { background: var(--na-telefon-tlo); color: var(--na-telefon); }
.znacznik.ph-obojetne { background: var(--dostepny-tlo); color: var(--dostepny); }
.znacznik.ph-zasada { background: var(--akcent-tlo); color: var(--akcent); }

/* Treść rozwiniętego wpisu. */
.sc-tresc { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 16px; font-size: 15px; line-height: 1.5; }
.sc-tresc p { margin: 0; overflow-wrap: anywhere; }
.sc-etykieta { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-kroki { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.sc-kroki li { position: relative; padding-left: 34px; counter-increment: krok; }
.sc-kroki li::before {
  content: counter(krok); position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--akcent-tlo); color: var(--akcent); font-size: 13px; font-weight: 700;
}
.sc-kroki strong { display: block; font-weight: 650; }
.sc-punkty { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding-left: 20px; }
.sc-punkty li::marker { color: var(--akcent); }
.sc-tabela-suma tbody tr:last-child > * { font-weight: 650; border-top: 2px solid var(--linia-mocna); }
.sc-ramka { padding: 10px 12px; border-left: 3px solid var(--kolor); border-radius: 8px; background: var(--kolor-tlo); }
.sc-ramka .sc-etykieta { color: var(--kolor); }
.sc-uwaga { --kolor: var(--niedostepny); --kolor-tlo: var(--niedostepny-tlo); }
.sc-akcja { --kolor: var(--akcent); --kolor-tlo: var(--akcent-tlo); }
.sc-mowisz { --kolor: var(--tekst-slaby); --kolor-tlo: var(--tlo); }
.sc-mowisz p { font-style: italic; }
.sc-dawki { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0; }
.sc-dawki div { padding: 9px 12px; border: 1px solid var(--linia); border-radius: 8px; background: var(--tlo); }
.sc-dawki dt { font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-dawki dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-jesli { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-jesli li { padding: 10px 12px; border: 1px solid var(--linia); border-radius: 8px; }
.sc-warunek { font-size: 14px; color: var(--tekst-slaby); }
.sc-tresc .sc-wniosek { margin-top: 4px; font-weight: 600; }
.sc-wniosek::before { content: "→ "; color: var(--akcent); }
.sc-tabela-ramka { overflow-x: auto; }
.sc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sc-tabela th, .sc-tabela td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linia); }
.sc-tabela thead th { font-size: 12px; font-weight: 650; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-tabela tbody th { font-weight: 600; }
.sc-tabela tbody tr:last-child > * { border-bottom: 0; }
.sc-tresc-glowna mark { padding: 0 1px; border-radius: 3px; background: #ffe58a; color: inherit; }
:root[data-motyw="ciemny"] .sc-tresc-glowna mark { background: #6b5813; }
.sc-pusto { padding: 28px 16px; text-align: center; }
.sc-pusto p { margin: 0 0 4px; }

@media (hover: hover) {
  .sc-wpis > summary:hover .sc-tytul { color: var(--akcent); }
}

/* Telefon: działy w jednym przewijanym rzędzie, większe pola dotyku. */
@media (max-width: 599px) {
  .sc-pasek { margin: -16px -12px 4px; padding: 10px 12px; border-bottom-color: var(--linia); }
  .sc-szukaj kbd { display: none; }
  .sc-zakladki { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .sc-zakladki::-webkit-scrollbar { display: none; }
  .sc-zakladki .zeton { flex: none; padding: 8px 14px; }
  .sc-dzial-naglowek { margin-top: 6px; }
  .sc-wpis > summary { padding: 14px 12px; }
  .sc-tresc { padding: 2px 12px 14px; }
  .sc-tabela { font-size: 13px; }
  .sc-tabela th, .sc-tabela td { padding: 7px 6px; }
}