/* Zapisy.pro – PWA instruktora (mobile-first, samodzielny styl) */
/* Kolory i krój ze wspólnych tokenów (assets/shared/zp-tokens.css, ładowane przed tym plikiem).
   Nazwy lokalne zostają jako aliasy, więc tryb ciemny ([data-zp-theme="dark"]) działa w całym pliku. */
:root {
    --navy: var(--zp-navy); --navy-2: var(--zp-navy-mid);
    --accent: var(--zp-accent); --accent-ink: var(--zp-accent-ink); --accent-soft: var(--zp-accent-soft);
    --warning: var(--zp-warning); --warning-soft: var(--zp-yellow-soft);
    --bg: var(--zp-bg); --surface: var(--zp-surface); --surface-2: var(--zp-surface-2);
    --border: var(--zp-border); --text: var(--zp-text); --text-2: var(--zp-text-2); --muted: var(--zp-text-m);
    --green: var(--zp-green); --green-soft: var(--zp-green-soft);
    --red: var(--zp-red); --red-soft: var(--zp-red-soft);
    --blue: var(--zp-blue); --blue-soft: var(--zp-blue-soft);
    --gray: var(--zp-gray); --gray-soft: var(--zp-gray-soft);
    --r: var(--zp-r-md); --r-sm: var(--zp-r); --r-xs: 8px;
    --sh: var(--zp-sh-sm); --sh-lg: var(--zp-sh-lg);
}
[data-zp-theme="dark"] { color-scheme: dark; }
:root { --ink: var(--zp-navy); }
[data-zp-theme="dark"] { --ink: var(--zp-text); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Ikony SVG (zamiast emoji) – dziedziczą kolor przez currentColor, wyrównane do tekstu */
.zp-ic { display: inline-block; vertical-align: -.18em; flex: none; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg); color: var(--text);
    font-family: var(--zp-font);
    font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.zp-muted { color: var(--muted); }
.zp-center { padding: 40px 20px; text-align: center; color: var(--muted); }
.zp-error { background: var(--red-soft); color: var(--red); padding: 11px 13px; border-radius: var(--r-sm); margin: 10px 0; font-size: 14px; font-weight: 500; }
/* Czerwony/niebieski/zielony tokenu na ciemnych tłach ma 2,3–3:1 — tekst rozjaśniony w stronę bieli (jak .zp-pl--ok/err). */
[data-zp-theme="dark"] .zp-error { color: color-mix(in srgb, var(--red) 45%, #fff); }

/* Empty / Skeleton / Boot */
.zp-empty { text-align: center; color: var(--muted); padding: 44px 20px; }
.zp-empty__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--text-2); opacity: .45; }
.zp-skel-wrap { padding-top: 4px; }
.zp-skel { height: 84px; border-radius: var(--r); margin-bottom: 10px;
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 37%, var(--border) 63%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }
.zp-boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 22px;
    background: linear-gradient(160deg, var(--navy), var(--navy-2)); }
.zp-boot__logo { width: 200px; max-width: 64vw; opacity: .95; }
.zp-spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

/* Shell */
.zp-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.zp-topbar {
    position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top));
}
.zp-topbar__brand { display: inline-flex; align-items: center; }
.zp-logo-sm { height: 26px; width: auto; }
/* Zwykłe (granatowe) logo szkoły bez wariantu na ciemne tło — malowane na biało. Jasny wariant idzie bez filtra. */
.zp-logo--mono { filter: brightness(0) invert(1); }
.zp-userchip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1);
    border: none; color: #fff; border-radius: 100px; padding: 4px 10px 4px 4px; cursor: pointer; font-size: 13px; max-width: 60vw;
    min-height: 44px; }
.zp-userchip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.zp-userchip__out { opacity: .8; font-size: 15px; }
.zp-main { flex: 1; padding: 14px 14px 84px; }
/* Pasek braku sieci — przyklejony tuż pod .zp-topbar (ta sama stała co .zp-dh, patrz komentarz przy .zp-dh).
   Stała wysokość 36px (tekst w jednej linii) — o tyle przesuwa się .zp-dh, gdy pasek jest widoczny. */
.zp-offline { position: sticky; top: calc(max(6px, env(safe-area-inset-top)) + 50px); z-index: 25; display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 12px; background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--warning); font-size: 13px; font-weight: 700; }
.zp-offline .zp-ic { color: var(--warning); }
.zp-offline__tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Baner instalacji (A2HS) */
.zp-install-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 13px; }
.zp-install-banner__ic { color: var(--ink); flex: none; display: inline-flex; }
.zp-install-banner__tx { flex: 1; min-width: 0; line-height: 1.35; }
.zp-install-banner__x { background: none; border: none; color: var(--muted); cursor: pointer;
    padding: 4px; line-height: 0; flex: none; border-radius: 6px; width: 44px; height: 44px; }
.zp-install-banner__x:active { background: var(--surface-2); }
/* Baner nowej wersji: pod .zp-topbar (i paskiem braku sieci), NIE przyklejony — przewija się z treścią,
   więc nie zasłania górnego paska i nie zmienia przesunięć .zp-offline / .zp-dh. */
.zp-update-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; position: relative;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-bottom: 1px solid var(--border); }
.zp-update-banner__tx { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.zp-chip-btn2 { flex: none; border: 1px solid var(--navy); background: var(--navy); color: #fff; border-radius: 100px;
    min-height: 44px; padding: 0 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.zp-chip-btn2:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-icon-btn { background: transparent; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 6px 8px; line-height: 1;
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Avatar */
.zp-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
    border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; letter-spacing: .5px; }

/* Dolna nawigacja */
.zp-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border); display: flex; padding-bottom: env(safe-area-inset-bottom); }
.zp-bottomnav button { flex: 1; background: none; border: none; cursor: pointer; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px; color: var(--muted); min-height: 56px; }
.zp-bottomnav__ic { line-height: 0; opacity: .8; transition: opacity .15s, transform .15s; }
.zp-bottomnav__lb { font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.zp-bottomnav button { min-width: 0; }
.zp-bottomnav button.is-active { color: var(--ink); }
.zp-bottomnav button.is-active .zp-bottomnav__ic { opacity: 1; transform: translateY(-1px); }
.zp-bottomnav button:focus-visible { outline: none; box-shadow: inset var(--zp-focus); border-radius: 8px; }
.zp-bottomnav button.is-active::before { content: ''; position: absolute; top: 0; width: 30px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--accent); }

/* Login */
.zp-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: linear-gradient(160deg, var(--navy), var(--navy-2)); }
.zp-login__card { background: var(--surface); border-radius: 18px; box-shadow: var(--sh-lg); padding: 30px 24px; width: 100%; max-width: 390px; }
.zp-login__brand { text-align: center; margin-bottom: 22px; }
.zp-logo { width: 190px; max-width: 72%; height: auto; }
/* Karta logowania: jasna w motywie jasnym (zwykłe logo), ciemna w ciemnym (wariant na ciemne tło). */
.zp-logo--na-ciemnym { display: none; }
[data-zp-theme="dark"] .zp-logo--na-jasnym { display: none; }
[data-zp-theme="dark"] .zp-logo--na-ciemnym { display: inline-block; }
.zp-login__sub { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.zp-login__form { display: flex; flex-direction: column; gap: 16px; }
.zp-login__form .zp-error { margin: 0; }
.zp-pole { display: flex; flex-direction: column; gap: 6px; }
.zp-pole label { margin: 0; }
.zp-pole input { min-height: 48px; font-size: 16px; }
.zp-haslo { position: relative; display: flex; }
.zp-haslo input { flex: 1; padding-right: 84px; }
/* Cel dotykowy 72×44 mieści się w polu 48px (po 2px odstępu góra/dół). */
.zp-haslo__pokaz { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 72px; border: none; border-radius: var(--r-xs);
    background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-haslo__pokaz:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-login__reset { align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink); font-weight: 600; text-decoration: underline; }
.zp-login__reset:focus-visible { outline: none; box-shadow: var(--zp-focus); border-radius: var(--r-xs); }

/* Pola */
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
/* Bez tego <small> dziedziczy domyślne 83% z 13px rodzica (<label>) = ~10.8px — poniżej progu 12px. */
.zp-lbl-hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.zp-lbl-count { display: inline-block; min-width: 18px; text-align: center; background: var(--navy); color: #fff;
    border-radius: 100px; font-size: 12px; font-weight: 700; padding: 1px 6px; margin-left: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=email], select, textarea {
    width: 100%; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: 16px; color: var(--text); background: var(--surface); font-family: inherit; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: var(--zp-focus); }
input:disabled { background: var(--surface-2); color: var(--muted); }

/* Przyciski */
.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 15px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
.zp-btn:active { transform: scale(.98); }
.zp-btn--primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.zp-btn--block { display: flex; width: 100%; }
.zp-btn--lg { padding: 14px; font-size: 16px; border-radius: 12px; }
.zp-btn:disabled { opacity: .55; }
/* Granat (#1d1c57) na ciemnej powierzchni ma ~1,1:1 — wypełnienia przechodzą na jaśniejszy granat
   (biały tekst nadal ~10,9:1). */
[data-zp-theme="dark"] .zp-btn--primary, [data-zp-theme="dark"] .zp-chip-btn, [data-zp-theme="dark"] .zp-chip.is-on,
[data-zp-theme="dark"] .zp-chip-btn2, [data-zp-theme="dark"] .zp-lbl-count { background: var(--zp-navy-light); border-color: var(--zp-navy-light); }

/* Pasek dnia / tygodnia (hero) */
.zp-dayhero { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh); padding: 8px 10px; margin-bottom: 14px; }
.zp-dayhero__c { flex: 1; text-align: center; min-width: 0; }
.zp-dayhero__date { font-weight: 700; font-size: 15px; color: var(--ink); }
.zp-dayhero__sum { font-size: 12px; color: var(--muted); margin-top: 1px; }
.zp-nav-btn { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.zp-nav-btn:active { background: var(--zp-gray-soft); }
.zp-chip-btn { flex: none; border: 1px solid var(--navy); background: var(--navy); color: #fff;
    border-radius: 100px; min-height: 44px; padding: 0 16px; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Karta lekcji (Dziś) */
.zp-lcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--acc);
    border-radius: var(--r); box-shadow: var(--sh); margin-bottom: 11px; overflow: hidden; animation: pop .18s ease; }
.zp-lcard--now { border-color: var(--green); border-left-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 18%, transparent), var(--sh); }
.zp-lcard__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 13px; cursor: pointer; }
.zp-lcard__time { display: flex; flex-direction: column; align-items: center; min-width: 50px; line-height: 1.1; }
.zp-lcard__time strong { font-size: 19px; color: var(--ink); }
.zp-lcard__time small { font-size: 12px; color: var(--muted); }
.zp-lcard__main { flex: 1; min-width: 0; }
.zp-lcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zp-lcard__type { font-weight: 600; font-size: 13px; color: var(--text-2); }
/* Typ zajęć „Egzamin" to informacja, nie wezwanie do działania — niebieski, nie pomarańcz
   (pomarańcz = wyłącznie „wymaga działania"). var(--blue) ma za mało kontrastu na ciemnym
   tle (ok. 2,4:1), więc w trybie ciemnym rozjaśniamy w stronę bieli (ok. 7,7:1). */
.zp-lcard__type--exam { color: var(--blue); font-weight: 700; }
[data-zp-theme="dark"] .zp-lcard__type--exam { color: color-mix(in srgb, var(--blue) 45%, #fff); }
.zp-now { font-size: 12px; font-weight: 800; letter-spacing: .4px; padding: 2px 8px; border-radius: 100px; }
.zp-now--now { background: var(--green); color: #fff; }
.zp-now--soon { background: var(--accent-soft); color: var(--accent-ink); }
.zp-lcard__who { display: flex; align-items: center; gap: 7px; margin-top: 0; margin-bottom: 3px; font-size: 16px; font-weight: 700; }
.zp-lcard__who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nagłówek karty: kursant + plakietka stanu. Imię i nazwisko ma pierwszeństwo — gdy razem z plakietką
   się nie mieszczą (np. „Odwołane po terminie”), plakietka schodzi do własnej linii pod nazwiskiem,
   zamiast ściskać kolumnę nazwiska do kilku liter. */
.zp-lcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 8px; row-gap: 4px; margin-bottom: 3px; }
.zp-lcard__head .zp-lcard__who { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.zp-lcard__head > .zp-pl { flex: 0 0 auto; }
.zp-lcard__head > .zp-pl:only-child { margin-left: auto; }
.zp-grp { flex: 0 0 auto; padding: 1px 7px; border-radius: 100px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
.zp-part { margin-top: 4px; }
.zp-part--multi { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 12px; background: var(--blue-soft); }
.zp-part__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zp-part__name { font-weight: 700; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-part__call { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 100px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
/* Licznik godzin praktycznych — pełny zapis pod nazwiskiem (karta „Dziś") i w wierszu
   tygodnia. Tekst może się zawinąć: karta na liście dnia ma na to miejsce, a ucięcie
   wielokropkiem kasowałoby najważniejszą część („… z 30 h kursu"). */
.zp-lcard__hrs { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px;
    font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.zp-lcard__hrs > .zp-ic { color: var(--muted); }
.zp-hrs { font-variant-numeric: tabular-nums; }
.zp-lcard__meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.zp-lcard__branch { display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--ink); }
.zp-lcard__acts { display: flex; gap: 1px; border-top: 1px solid var(--border); background: var(--surface-2); }
.zp-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 11px 6px; font-size: 13px; font-weight: 600; color: var(--text-2); background: transparent; border: none; cursor: pointer; text-decoration: none; min-height: 44px; }
.zp-act:active { background: var(--zp-gray-soft); }
.zp-act--cta { color: var(--ink); font-weight: 800; }

/* Plakietki stanu — pomarańcz WYŁĄCZNIE dla „wymaga działania" */
.zp-pl { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Token --zp-warning (#b26a00) z białym tekstem ma tylko ~4,2:1 — tło przyciemnione do ~5,2:1. */
.zp-pl--warn    { background: color-mix(in srgb, var(--warning) 88%, #000); color: #fff; }
.zp-pl--now     { background: var(--green); color: #fff; }
.zp-pl--ok      { background: var(--green-soft); color: var(--green); }
.zp-pl--err     { background: var(--red-soft); color: var(--red); }
.zp-pl--info    { background: var(--blue-soft); color: var(--blue); }
.zp-pl--neutral { background: var(--gray-soft); color: var(--text-2); }
[data-zp-theme="dark"] .zp-pl--ok  { color: color-mix(in srgb, var(--green) 40%, #fff); }
[data-zp-theme="dark"] .zp-pl--err { color: color-mix(in srgb, var(--red) 40%, #fff); }
/* Pasek boczny kart i wierszy wg stanu */
.zp-stan--przyszle { --acc: var(--zp-border-s); }
.zp-stan--trwa { --acc: var(--green); }
.zp-stan--do_potwierdzenia { --acc: var(--warning); }
.zp-stan--zamkniete { --acc: var(--green); }
.zp-stan--nieobecnosc { --acc: var(--red); }
.zp-stan--odwolane { --acc: var(--gray); }
/* Kategoria kursu: podpis zamiast samej kropki */
.zp-kat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1.5px solid var(--kat, var(--border)); border-radius: 100px; font-size: 12px; font-weight: 700; color: var(--text); }
.zp-kat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kat, var(--muted)); }
/* Segmenty statusu i typów blokad — kolor przez klasę, nie inline */
.zp-st--planned { --c: var(--blue); } .zp-st--completed { --c: var(--green); } .zp-st--cancelled { --c: var(--gray); }
.zp-st--no_show { --c: var(--red); } .zp-st--late_cancel { --c: var(--red); } .zp-st--passed { --c: var(--green); } .zp-st--failed { --c: var(--red); }
.zp-st--motyw { --c: var(--navy); }
[data-zp-theme="dark"] .zp-st--motyw { --c: var(--zp-navy-light); }
.zp-av--vacation { --c: var(--blue); } .zp-av--unavailable { --c: var(--gray); } .zp-av--sick { --c: var(--red); } .zp-av--service { --c: var(--gray); } .zp-av--other { --c: var(--gray); }
.zp-icon-btn--danger { color: var(--red); }

/* Harmonogram */
.zp-daygroup { margin-bottom: 6px; }
/* top = wysokość .zp-topbar: padding-top bezpieczny dla notcha (max(6px, safe-area)) + 44px (min-height
   .zp-userchip, zawsze najwyższe dziecko paska) + 6px padding-bottom. Stałe 50px = 44+6 — jeśli zmieni się
   min-height userchipa lub pionowy padding topbara, zmień też tę stałą (i tę samą w .zp-offline).
   Gdy widać pasek braku sieci (.zp-shell.is-offline), nagłówek dnia schodzi o jego 36px.
   Tło strony (--bg, także w trybie ciemnym) zasłania przewijane pod spodem karty; odstępy są w paddingu,
   żeby tło sięgało do górnego paska bez szczeliny (razem te same 16px nad i 8px pod tekstem co wcześniej). */
.zp-dh { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 13px;
    margin: 10px 0 2px; padding: 6px 2px; background: var(--bg); position: sticky; top: calc(max(6px, env(safe-area-inset-top)) + 50px); z-index: 5; }
.zp-shell.is-offline .zp-dh { top: calc(max(6px, env(safe-area-inset-top)) + 86px); }
.zp-dh.is-today { color: var(--accent-ink); }
.zp-dh::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.zp-dh__count { order: 3; flex: none; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    border-radius: 100px; font-size: 12px; padding: 1px 8px; }
.zp-srow { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--acc); border-radius: var(--r-sm); box-shadow: var(--sh); padding: 0; margin-bottom: 8px; }
.zp-srow__btn { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 56px; padding: 10px 12px; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.zp-srow__btn:active { background: var(--zp-gray-soft); }
.zp-srow__btn:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-srow__akcje { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 67px; }
.zp-srow__akcje .zp-act { flex: none; padding: 8px 14px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface-2); }
.zp-srow__time { font-weight: 800; color: var(--ink); min-width: 44px; }
.zp-srow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zp-srow__main strong { font-size: 14px; }
.zp-srow__main small { color: var(--muted); font-size: 12.5px; }

/* Kursanci */
.zp-listhead { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; margin: 2px 2px 12px; }
.zp-scard { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh); padding: 13px; margin-bottom: 10px; cursor: pointer; animation: pop .18s ease; }
.zp-scard:active { background: var(--surface-2); }
.zp-scard__body { flex: 1; min-width: 0; }
.zp-scard__name { font-weight: 700; font-size: 15px; }
.zp-scard__next { font-size: 12px; color: var(--text-2); margin: 2px 0 8px; }
.zp-scard__bars { display: flex; gap: 14px; }
.zp-chev { color: var(--muted); font-size: 24px; flex: none; }

/* Pasek postępu */
.zp-prog { flex: 1; min-width: 0; }
.zp-prog__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.zp-prog__head span:first-child { font-weight: 600; color: var(--text-2); }
.zp-prog__track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; overflow: hidden; }
.zp-prog__fill { display: block; height: 100%; background: var(--navy); border-radius: 100px; transition: width .3s; }
.zp-prog__fill.is-full { background: var(--green); }
/* Granatowe wypełnienie na ciemnym torze jest niewidoczne — cyjan (wypełnienie, bez tekstu na nim). */
[data-zp-theme="dark"] .zp-prog__fill:not(.is-full) { background: var(--accent); }

/* Bottom sheet / modal */
.zp-sheet-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--zp-navy) 55%, transparent); z-index: 60; display: flex; align-items: flex-end; }
.zp-sheet { background: var(--surface); width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0;
    display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: sheetup .24s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.zp-sheet__grip { width: 40px; height: 4px; border-radius: 100px; background: var(--zp-border-s); margin: 8px auto 0; flex: none; }
.zp-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); }
.zp-sheet__head strong { font-size: 16px; color: var(--ink); }
.zp-sheet__body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zp-sheet__foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.zp-meta { color: var(--muted); font-size: 13px; }
.zp-hint { background: var(--blue-soft); color: var(--blue); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin: 12px 0; }
[data-zp-theme="dark"] .zp-hint { color: color-mix(in srgb, var(--blue) 45%, #fff); }
.zp-sec { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; margin: 22px 0 10px; }

.zp-num2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Status – segmentowane przyciski */
.zp-seg { display: flex; flex-wrap: wrap; gap: 7px; }
.zp-seg__btn { flex: 1 1 calc(50% - 4px); padding: 11px 8px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; min-height: 44px; }
.zp-seg__btn.is-active { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.zp-seg__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Manewry – chipy */
.zp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-chip { padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 100px; background: var(--surface);
    font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.zp-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.zp-chip:active { transform: scale(.96); }

/* Oceny */
.zp-stars { display: flex; gap: 6px; }
.zp-star { background: none; border: none; color: var(--zp-border-s); cursor: pointer; padding: 2px; line-height: 0; border-radius: 6px;
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.zp-star.on { color: #f5b301; }
.zp-star:focus-visible { outline: none; box-shadow: var(--zp-focus); }

/* Egzaminy – przełącznik */
.zp-exam { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
/* Cel dotyku to cała etykieta (klik gdziekolwiek na .zp-switch przełącza input) — min-height na label/wierszu,
   NIE na ukrytym inpucie (patrz niżej: 1x1px, celowo niewidoczny, ale fokusowalny). */
.zp-switch { display: flex; align-items: center; gap: 11px; cursor: pointer; flex: 1; margin: 0; font-weight: 600; color: var(--text); min-height: 44px; }
/* Input ukryty wizualnie, ale FOKUSOWALNY (klawiatura/czytniki) — nie display:none */
.zp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.zp-switch input:focus-visible + .zp-switch__track { box-shadow: var(--zp-focus); }
.zp-switch__track { position: relative; width: 42px; height: 25px; border-radius: 100px; background: var(--zp-border-s); flex: none; transition: background .2s; }
.zp-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.zp-switch input:checked + .zp-switch__track { background: var(--green); }
.zp-switch input:checked + .zp-switch__track::after { transform: translateX(17px); }
.zp-switch__lb { font-size: 14px; }
.zp-exam input[type=date] { width: 150px; flex: none; }

/* Ustawienia – przełączniki typów powiadomień + akcje */
.zp-switch--row { justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.zp-switch--row .zp-switch__lb { flex: 1; }
.zp-switch--row.is-disabled { opacity: .5; }
.zp-set-list { margin: 2px 0; }
.zp-set-list .zp-switch--row:last-child { border-bottom: none; }
.zp-set-actions { display: flex; gap: 8px; margin-top: 14px; }
.zp-set-actions .zp-btn { flex: 1; }
.zp-set-ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green);
    border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; margin: 12px 0 0; }
[data-zp-theme="dark"] .zp-set-ok { color: color-mix(in srgb, var(--green) 45%, #fff); }
.zp-hint--row { display: flex; align-items: flex-start; gap: 8px; }

/* Tablet / desktop */
@media (min-width: 620px) {
    .zp-main { max-width: 720px; margin: 0 auto; }
    .zp-sheet { max-width: 600px; margin: 0 auto; border-radius: 20px; }
    .zp-sheet-overlay { align-items: center; padding: 20px; }
}

/* A11y: widoczny focus dla klawiatury */
.zp-btn:focus-visible, .zp-act:focus-visible, .zp-chip:focus-visible, .zp-seg__btn:focus-visible,
.zp-nav-btn:focus-visible, .zp-chip-btn:focus-visible, .zp-icon-btn:focus-visible,
.zp-ico-btn:focus-visible, .zp-userchip:focus-visible,
.zp-install-banner__x:focus-visible {
    outline: none; box-shadow: var(--zp-focus);
}
/* .zp-scard/.zp-lcard__row żyją tu, nie w regule wyżej — ta sama specyficzność, więc duplikat tam
   byłby martwym kodem (ta reguła, będąc niżej w pliku, i tak by wygrała). */
.zp-scard:focus-visible, .zp-lcard__row:focus-visible, .zp-srow__btn:focus-visible { outline: none; box-shadow: var(--zp-focus); }

/* A11y: szanuj preferencję ograniczonego ruchu */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}
/* Komunikaty (toast) nad dolnym paskiem */
.zp-toasty { position: fixed; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.zp-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 16px; border-radius: var(--r-sm); background: var(--zp-text); color: var(--surface); box-shadow: var(--sh-lg); font-size: 14px; font-weight: 600; }
[data-zp-theme="dark"] .zp-toast { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.zp-toast--blad { background: var(--red); color: #fff; }
.zp-toast__tx { flex: 1; }
.zp-toast__btn { min-height: 44px; min-width: 44px; padding: 0 14px; border: none; border-radius: var(--r-xs); background: transparent; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.zp-toast__btn:focus-visible { outline: none; box-shadow: var(--zp-focus); }

/* Pasek tygodnia */
.zp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: -6px 0 14px; }
.zp-week__d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; }
.zp-week__d.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-zp-theme="dark"] .zp-week__d.is-active { background: var(--zp-navy-light); border-color: var(--zp-navy-light); }
.zp-week__d[aria-current="date"]:not(.is-active) { border-color: var(--accent); }
.zp-week__dn { font-size: 12px; font-weight: 600; }
.zp-week__nr { font-size: 16px; font-weight: 800; }
.zp-week__kr { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.zp-week__kr--on { background: var(--muted); }
.zp-week__kr--warn { background: var(--warning); }
.zp-week__d:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-chip-btn:disabled { opacity: .45; cursor: default; }
.zp-act--ok { color: var(--green); font-weight: 800; }
.zp-act--err { color: var(--red); font-weight: 800; }
[data-zp-theme="dark"] .zp-act--ok { color: color-mix(in srgb, var(--green) 45%, #fff); }
[data-zp-theme="dark"] .zp-act--err { color: color-mix(in srgb, var(--red) 45%, #fff); }
/* Przeciągnij, aby odświeżyć */
.zp-pull { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 600; }

/* Zaległości (etap 3) */
.zp-bottomnav__badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: color-mix(in srgb, var(--warning) 88%, #000); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.zp-zaleg { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 14px; padding: 10px 14px; border: 1.5px solid var(--warning); border-radius: var(--r); background: var(--warning-soft); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.zp-zaleg__ic { color: var(--warning); display: inline-flex; }
.zp-zaleg__tx { flex: 1; display: flex; flex-direction: column; }
.zp-zaleg__tx small { font-size: 13px; color: var(--text-2); }
.zp-zaleg:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-pasek-wstecz { display: flex; align-items: center; gap: 4px; margin: -4px 0 10px; }
.zp-pasek-wstecz__t { margin: 0; font-size: 18px; color: var(--ink); }
.zp-ic--wstecz { transform: rotate(180deg); }
/* Okno zajęć: nagłówek z datą, obecność z „Inne”, zwijane manewry, stopka z „Zapisz i następne” */
.zp-okno__glowa { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.zp-okno__kiedy { font-size: 15px; font-weight: 800; color: var(--ink); }
.zp-okno__typ { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.zp-okno__kto { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.zp-seg__btn--duzy { min-height: 56px; font-size: 15px; }
.zp-obecnosc { display: flex; flex-direction: column; gap: 8px; }
.zp-obecnosc__inne, .zp-manewry__przelacz { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 0 4px; border: none; background: none; color: var(--text-2); font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-manewry__przelacz { margin-top: 10px; }
.zp-obecnosc__inne:focus-visible, .zp-manewry__przelacz:focus-visible { outline: none; box-shadow: var(--zp-focus); border-radius: var(--r-xs); }
.zp-ic--w-dol { transform: rotate(90deg); } .zp-ic--w-gore { transform: rotate(-90deg); }
.zp-chip--byl { border-style: dashed; }
.zp-chip--byl::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.zp-okno__stopka--dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zp-error--akcja { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zp-error--akcja .zp-btn { flex: none; }

/* Kursanci: wyszukiwarka, filtry, karta */
.zp-szukaj { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 0 10px; padding: 0 6px 0 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); }
.zp-szukaj:focus-within { box-shadow: var(--zp-focus); }
.zp-szukaj input { flex: 1; min-width: 0; min-height: 44px; border: none; background: transparent; color: var(--text); font-size: 16px; outline: none; }
.zp-szukaj input::-webkit-search-cancel-button { display: none; }
.zp-filtry { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; }
.zp-filtr { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-filtr.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-zp-theme="dark"] .zp-filtr.is-active { background: var(--zp-navy-light); border-color: var(--zp-navy-light); }
.zp-filtr__n { min-width: 22px; padding: 0 6px; border-radius: 100px; background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 20px; text-align: center; }
.zp-filtr.is-active .zp-filtr__n { background: rgba(255, 255, 255, .2); color: #fff; }
.zp-filtr:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-kcard { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.zp-kcard:active { background: var(--surface-2); }
.zp-kcard:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-kcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zp-kcard__name { font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.zp-kcard__line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.zp-kcard__uwaga { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.zp-kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }
/* Profil kursanta */
.zp-wstecz { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 2px; border: none; background: none; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.zp-wstecz:focus-visible { outline: none; box-shadow: var(--zp-focus); border-radius: var(--r-xs); }
.zp-profil__glowa { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.zp-profil__id { min-width: 0; }
.zp-profil__id h1 { margin: 0 0 2px; font-size: 20px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.zp-profil__linia { font-size: 14px; color: var(--text-2); }
.zp-profil__kontakt { display: flex; gap: 8px; margin: 0 0 16px; }
.zp-profil__kontakt .zp-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.zp-profil__sekcja { margin: 0 0 18px; }
.zp-profil__sekcja h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.zp-profil__godziny { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.zp-profil__edytuj { margin: 0 0 18px; }
.zp-egz { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
.zp-wiersz { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 10px 12px 10px 14px; border: 1px solid var(--border); border-left-width: 4px; border-left-color: var(--acc, var(--border)); border-radius: var(--r-sm); background: var(--surface); }
.zp-wiersz[role="button"] { cursor: pointer; min-height: 44px; }
.zp-wiersz[role="button"]:active { background: var(--surface-2); }
.zp-wiersz[role="button"]:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-wiersz__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zp-wiersz__kiedy { font-size: 14px; font-weight: 700; color: var(--ink); }
.zp-wiersz__typ { font-size: 13px; color: var(--text-2); }
.zp-wiersz__linia { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--text-2); }
.zp-wiersz .zp-act { flex: none; align-self: flex-start; margin-top: 4px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-2); }
/* Więcej */
.zp-wiecej__kto { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.zp-wiecej__kto strong { display: block; font-size: 17px; color: var(--ink); }
.zp-wiecej__kto small { font-size: 13px; color: var(--text-2); }
.zp-menu { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; margin: 0 0 16px; }
.zp-menu__w { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; cursor: pointer; }
.zp-menu__w:last-child { border-bottom: none; }
.zp-menu__w:focus-visible { outline: none; box-shadow: inset var(--zp-focus); }
.zp-menu__ic { display: inline-flex; color: var(--ink); }
.zp-menu__tx { flex: 1; display: flex; flex-direction: column; }
.zp-menu__tx strong { font-size: 15px; }
.zp-menu__tx small { font-size: 13px; color: var(--text-2); }
.zp-ekran__t { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.zp-ekran__opis { margin: 0 0 12px; font-size: 14px; }
/* Dostępność */
.zp-blokada { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--c, var(--border)); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.zp-blokada:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-blokada__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.zp-blokada small { font-size: 13px; color: var(--text-2); }
.zp-blokada__podsum { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--ink); }
.zp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.zp-check input { width: 20px; height: 20px; }
.zp-btn--danger { color: var(--red); border-color: var(--red); }
[data-zp-theme="dark"] .zp-btn--danger { color: color-mix(in srgb, var(--red) 45%, #fff); border-color: color-mix(in srgb, var(--red) 45%, #fff); }