/* Paleta akcentów zaczerpnięta z trenerifizjo.pl (runda 12, część 11, na
   prośbę Piotra): granatowe tło marki, turkus jako główny akcent (przyciski,
   linki, nagłówki), pomarańcz jako akcent uzupełniający (podkreślenie aktywnej
   zakładki — echo pomarańczowego "Zadzwoń" ze strony). Układ bez zmian —
   zmieniamy tylko kolory zmiennych, więc akcenty w całym panelu przełączają
   się automatycznie. --navy to teraz brandowy turkus (na tyle głęboki, żeby
   biały tekst na przyciskach i turkusowe linki na białym miały czytelny
   kontrast); --navy-dark to granat marki (topbar, nagłówki). */
:root{
  --navy:#137a6c; --navy-dark:#16242f; --teal-hover:#0e5f54; --brand-orange:#ef8324;
  --bg:#f4f6f9; --card:#ffffff;
  --text:#1f2530; --muted:#5b6472; --border:#e2e6ec;
  --green:#2e7d4f; --amber:#b8860b; --red:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--navy)}
header.topbar{background:var(--navy-dark);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
header.topbar .brand{font-weight:700;font-size:18px}
header.topbar a{color:#fff;text-decoration:none;font-size:14px;opacity:.9}
header.topbar a:hover{opacity:1;text-decoration:underline}
header.topbar .who{font-size:13px;white-space:nowrap}
/* UWAGA: `nav.navlinks` NIE ISTNIEJE od 28.07.2026 — menu modułów przeniesione do
   przybornika (pasek boczny na komputerze, dolny na telefonie). Topbar admina
   został sam znak firmowy + zalogowany użytkownik, czyli tyle samo co w portalu. */
main{max-width:1000px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:18px}
.card h2{margin-top:0;font-size:16px;color:var(--navy-dark)}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.stat .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.stat .value{font-size:26px;font-weight:700;color:var(--navy-dark);margin-top:2px}
/* Jednolity, przejrzysty styl WSZYSTKICH tabel (runda 12, część 13, na prośbę
   Piotra — "ten sam czytelny styl w całej platformie"). Wyraźny pasek nagłówka,
   oddzielone wiersze, delikatne podświetlenie pod kursorem, komfortowe odstępy. */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;background:#f4f7f8;border-bottom:2px solid var(--border)}
tr:last-child td{border-bottom:none}
tbody tr:hover td, table tr:hover td{background:#f8fbfc}
/* Liczby/kwoty wyrównane do prawej dla czytelności kolumn (opt-in klasą). */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}

/* Tabele na wąskich ekranach (telefon): zamiast łamać tekst w komórkach w
   nieczytelną kaszę (np. imię i nazwisko klienta rozjeżdżające się na kilka
   linii), tabela przewija się poziomo w całości — treść w komórkach zostaje
   w jednej linii i da się ją swobodnie przeczytać, przesuwając palcem. */
@media(max-width:700px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  main{padding:12px}
  .card{padding:14px}
  form.inline{gap:10px}
  form.inline > div{min-width:0}
  form.inline input,form.inline select,form.inline textarea{max-width:100%}
  /* Nawigacja z 6 zakładkami nie mieści się w jednej linii na telefonie —
     zamiast obcinać ostatnie linki (np. "Konfiguracje"), dajemy jej WŁASNY
     pełnoszerokościowy wiersz (topbar dalej się zawija: marka, potem "kto
     jest zalogowany", potem cała nawigacja pod spodem) i pozwalamy jej
     przewijać się poziomo w razie potrzeby, tak samo jak tabelom wyżej. */
}
/* Tabele "kartowe" na telefonie (runda 12, część 9, na prośbę Piotra —
   dotychczasowe poziome przewijanie tabel na wąskim ekranie jest niewygodne w
   terenie). Zamiast przewijania: każdy WIERSZ staje się osobną "kartą" z
   etykietami przed każdą wartością (etykieta = tekst z data-label na <td>,
   ustawiany z PHP obok każdej komórki — patrz admin/rejestr.php i
   admin/grafik.php, jedyne dwie tabele przebudowane w tej rundzie na prośbę
   Piotra, reszta zostaje na poziomym przewijaniu jak dotąd). Klasa jest
   OPT-IN (`.tabela-mobilne-karty`), więc nie rusza żadnej innej tabeli w
   panelu — mniejszy, bezpieczniejszy zakres zmiany niż przebudowa wszystkiego
   naraz. Wiersz nagłówka dostaje osobną klasę `.wiersz-naglowka` i jest
   chowany (etykiety już są przy każdej komórce, więc się nie dubluje) — BEZ
   polegania na <thead>, bo tabele w tym projekcie go nie używają (goły <tr>
   z <th> na górze), a przeglądarka i tak nie owija takiego wiersza w
   niejawny <thead>. */
@media(max-width:700px){
  /* Etykieta NAD wartością (nie obok) — układ blokowy zamiast flex
     space-between. Poprzednia wersja (część 9/10) używała flex z etykietą po
     lewej i wartością po prawej; przy komórkach z kilkoma elementami naraz (np.
     nazwa ćwiczenia + plakietka "brak hasła bazowego", albo kilka plakietek
     wariantów) flex rozpychał je w poziomie i karta wychodziła poza szerokość
     ekranu ("rozklekotany" widok zgłoszony przez Piotra). Układ blokowy:
     etykieta w osobnej linijce, pod nią wartość, która swobodnie się zawija —
     nic nie wychodzi poza kontener, niezależnie od zawartości komórki. */
  table.tabela-mobilne-karty{display:block;width:100%;max-width:100%;overflow-x:hidden;white-space:normal}
  table.tabela-mobilne-karty tr.wiersz-naglowka{display:none}
  table.tabela-mobilne-karty tr{display:block;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:4px 14px;background:#fff}
  table.tabela-mobilne-karty tr:hover{background:#fff}
  table.tabela-mobilne-karty td{display:block;width:auto;max-width:100%;text-align:left;border:none;border-bottom:1px solid var(--border);padding:7px 0;overflow-wrap:break-word;word-break:break-word}
  table.tabela-mobilne-karty tr td:last-child{border-bottom:none}
  table.tabela-mobilne-karty td[data-label]::before{content:attr(data-label);display:block;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:2px}
  /* Puste komórki (np. checkbox zaznaczenia przy nie-zaplanowanym terminie albo
     puste pole danych) chowamy w całości — bez pustych wierszy w karcie. */
  table.tabela-mobilne-karty td:empty{display:none}

  /* ZAGĘSZCZENIE karty (2026-07-23, na prośbę Piotra — "pozbądź się pustej
     przestrzeni w Grafiku i innych sekcjach, na telefonie wiecznie scrolluję;
     można przecież łamać kolumny"). Krótkie pola danych układają się w DWIE
     kolumny zamiast jednej długiej listy → karta jest ~2× niższa i znika większość
     pionowego przewijania. Komórki z kontrolkami (formularz zmiany statusu, linki
     do Rejestru, selecty/inputy, textarea) oraz oznaczone .td-szeroka dostają
     pełną szerokość karty, żeby się nie ściskały. Nagłówkowy checkbox zaznaczenia
     też idzie na całą szerokość (jak pasek zaznaczenia karty).
     Całość pod @supports selector(:has(*)) — starsze przeglądarki (bez :has)
     zostają przy bezpiecznym, działającym układzie jednokolumnowym powyżej. */
  @supports selector(:has(*)){
    table.tabela-mobilne-karty tr{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:2px;padding:8px 14px}
    table.tabela-mobilne-karty td{border-bottom:none;padding:6px 0}
    table.tabela-mobilne-karty td:has(form),
    table.tabela-mobilne-karty td:has(button),
    table.tabela-mobilne-karty td:has(a),
    table.tabela-mobilne-karty td:has(select),
    table.tabela-mobilne-karty td:has(textarea),
    table.tabela-mobilne-karty td:has(input:not([type=checkbox])),
    table.tabela-mobilne-karty td:first-child:has(input[type=checkbox]),
    table.tabela-mobilne-karty td.td-szeroka{grid-column:1 / -1}
  }
}
/* Zwijane objaśnienia "?" (runda 12, część 10, na prośbę Piotra — instrukcje
   nie mają zajmować miejsca w trakcie pracy z bazą; skrypt w admin/_nav.php
   owija każdy element z klasą .pomoc w rozwijane <details> z ikonką pytajnika,
   domyślnie zwinięte). */
details.pomoc-box{margin:6px 0}
details.pomoc-box>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--navy);font-size:12px;font-weight:600;user-select:none}
details.pomoc-box>summary::-webkit-details-marker{display:none}
details.pomoc-box>summary::marker{content:""}
details.pomoc-box .pomoc-znak{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;line-height:1;flex-shrink:0}
details.pomoc-box[open]>summary{margin-bottom:2px}

/* Sortowanie kolumn (runda 12, część 12, na prośbę Piotra) — nagłówki tabel z
   klasą .sortowalna są klikalne; strzałka pokazuje aktywną kolumnę i kierunek.
   Skrypt sortujący jest w admin/_nav.php (wspólny dla całego panelu). */
table.sortowalna th{cursor:pointer;user-select:none;white-space:nowrap}
table.sortowalna th:hover{color:var(--navy)}
table.sortowalna th[data-sort]{color:var(--navy)}
table.sortowalna th[data-sort="asc"]::after{content:" ▲";font-size:9px}
table.sortowalna th[data-sort="desc"]::after{content:" ▼";font-size:9px}

/* Kaskadowa historia wyników Rejestru (runda 12, część 12; PRZEPROJEKTOWANA
   część 13 — Piotr: "wszystko się zlewa"). Klient → sesja → ćwiczenia. Każde
   ćwiczenie = wyraźna KARTA (ramka + akcent), każda seria = osobny kafelek,
   żeby poszczególne informacje były od siebie czytelnie oddzielone. */
details.rej-klient{border:1px solid var(--border);border-radius:10px;margin-bottom:12px;background:#fff;overflow:hidden}
details.rej-klient>summary{padding:12px 14px;cursor:pointer;list-style:none;user-select:none;background:#f4f7f8}
details.rej-klient[open]>summary{border-bottom:1px solid var(--border)}
details.rej-klient>summary::-webkit-details-marker{display:none}
details.rej-klient>summary::before{content:"▸";color:var(--navy);display:inline-block;width:16px}
details.rej-klient[open]>summary::before{content:"▾"}
.rej-klient-nazwa{font-weight:700;color:var(--navy-dark);font-size:15px}
.rej-meta{font-size:12px}
/* Plakietka prowadzącego przy sesji (runda 12, część 13). */
.rej-prow{background:#eaf1ff;color:var(--navy);font-size:11px;font-weight:600}

/* ===== PRZYBORNIK TRENERA (28.07.2026) =====
   Dwa układy z jednego HTML-a, przełączane wyłącznie CSS-em:
   - od 901 px: przyklejony pasek BOCZNY (moduły + narzędzia + paleta),
   - do 900 px: pasek DOLNY z czterema ikonami pod kciukiem (wybór Piotra) —
     na sali panel obsługuje się jedną ręką, więc skróty muszą być na DOLE ekranu.
   Odsunięcie treści robimy paddingiem na <body>, nie marginesem na <main> —
   dzięki temu żadna z 16 stron panelu nie wymagała zmiany w swoim HTML-u. */
:root{ --przybornik-szer:212px; --pasek-dolny-wys:60px; }

.ikony-sprite{display:none}
.ikona{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.7;
       stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* Podpis dla czytników ekranu przy akcjach pokazywanych samą ikoną. Ikona bez
   nazwy jest dla nich niewidoczna, więc słowo zostaje w kodzie — tylko poza
   ekranem. `clip-path` zamiast `display:none`, bo ukryty w ten sposób tekst
   przestałby być czytany. */
.tylko-czytnik{position:absolute;width:1px;height:1px;overflow:hidden;
               clip-path:inset(50%);white-space:nowrap}
/* Akcje ikonowe w tabelach — jednakowy cel dotyku i wyraźny stan najechania.
   Kasowanie na czerwono dopiero pod kursorem: kolor ma ostrzegać w momencie
   sięgania po przycisk, a nie krzyczeć z każdego wiersza listy. */
.akcja-ikona{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
             border-radius:7px;color:var(--muted);text-decoration:none;margin:0;padding:0;
             background:transparent;border:none;cursor:pointer}
.akcja-ikona:hover{background:#eef5f4;color:var(--navy)}
.akcja-ikona.akcja-usun:hover{background:#fdecea;color:var(--red)}
.akcja-ikona .ikona{width:17px;height:17px;flex:0 0 17px}
/* Akcja GŁÓWNA wiersza zostaje z podpisem — ikona bez słowa jest dobra dla
   powtarzalnych „edytuj/usuń", ale wejście w treść musi się nazywać. */
.akcja-glowna{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
              background:#eef5f4;color:var(--navy);text-decoration:none;font-size:12.5px;font-weight:600}
.akcja-glowna:hover{background:var(--navy);color:#fff}
.akcja-glowna .ikona{width:15px;height:15px;flex:0 0 15px}
/* Rząd akcji w kaskadzie: równe odstępy zamiast doklejanych marginesów. */
.rej-cw-akcje{display:inline-flex;align-items:center;gap:2px}

/* ===== GRAFIK: WIDOK TYGODNIA Z KOLUMNAMI PROWADZĄCYCH (29.07.2026) =====
   Wiersz = dzień, kolumna = osoba prowadząca. Na telefonie kolumny nie mają prawa
   stanąć obok siebie (przy trzech prowadzących wychodzi ~120 px na kolumnę), więc
   pokazujemy JEDNĄ naraz, przełączaną chipami — wybór Piotra. */
.widok-przelacznik{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:8px;
                   overflow:hidden;margin-bottom:14px}
.widok-przelacznik a{padding:7px 14px;font-size:13px;font-weight:600;color:var(--navy-dark);
                     text-decoration:none;background:#fff;border-left:1px solid var(--border)}
.widok-przelacznik a:first-child{border-left:none}
.widok-przelacznik a:hover{background:#f4f7f8}
.widok-przelacznik a.aktywny{background:var(--navy);color:#fff}

.grafik-pasek{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.grafik-nawigacja{display:inline-flex;gap:4px}
.grafik-nawigacja a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;
                    padding:0 10px;border:1px solid var(--border);border-radius:7px;background:#fff;
                    color:var(--navy-dark);text-decoration:none;font-size:13px;font-weight:600}
.grafik-nawigacja a:hover{border-color:var(--navy);color:var(--navy)}
.grafik-zakres{color:var(--navy-dark);font-size:15px}

.grafik-siatka{display:grid;grid-template-columns:118px repeat(var(--grafik-kolumn), minmax(0, 1fr));
               gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.grafik-naglowek{background:#f4f7f8;padding:9px 10px;font-size:12px;font-weight:700;color:var(--navy-dark);
                 text-transform:uppercase;letter-spacing:.02em}
.grafik-naglowek.grafik-bez-prow{color:var(--amber)}
.grafik-dzien{background:#fafbfc;padding:9px 10px;display:flex;flex-direction:column;gap:1px;position:relative}
.grafik-dzien-nazwa{font-weight:700;font-size:12.5px;color:var(--navy-dark)}
.grafik-dzien-data{font-size:11px;color:var(--muted)}
.grafik-dodaj{position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:6px;
              display:flex;align-items:center;justify-content:center;text-decoration:none;
              color:var(--muted);font-weight:700;line-height:1}
.grafik-dodaj:hover{background:var(--navy);color:#fff}
.grafik-komorka{background:#fff;padding:6px;display:flex;flex-direction:column;gap:5px;min-height:52px}
.grafik-dzien.grafik-dzis,.grafik-komorka.grafik-dzis{background:#f2f9f8}

.grafik-termin{border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:7px;
               padding:6px 8px;font-size:12.5px;background:#fff}
.grafik-termin.status-odwolana{border-left-color:var(--red);opacity:.65}
.grafik-termin.status-odbyta{border-left-color:var(--green)}
.grafik-termin-glowa{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.grafik-termin-osoby{margin-top:2px;overflow-wrap:anywhere}
.grafik-termin-typ,.grafik-termin-uwagi{font-size:11px;overflow-wrap:anywhere}
.grafik-termin-akcje{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px}
.grafik-termin-akcje .akcja-ikona{width:24px;height:24px}
.grafik-termin-akcje .akcja-ikona .ikona{width:14px;height:14px;flex:0 0 14px}

.grafik-przelacznik{display:none}
@media(max-width:900px){
  /* Jedna kolumna na ekran + chipy wyboru. `data-widoczny` na kontenerze mówi,
     która kolumna zostaje; pusty = wszystkie (wtedy siatka i tak schodzi do
     jednej kolumny na dzień, ułożonej pionowo). */
  .grafik-przelacznik{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .grafik-przelacznik button{margin:0;padding:6px 12px;border:1px solid var(--border);border-radius:999px;
                             background:#fff;color:var(--navy-dark);font-size:12.5px;font-weight:600;cursor:pointer}
  .grafik-przelacznik button.aktywny{background:var(--navy);border-color:var(--navy);color:#fff}
  .grafik-siatka{grid-template-columns:96px repeat(var(--grafik-kolumn), minmax(120px, 1fr));
                 overflow-x:auto}
}
/* Ukrywanie kolumny robi JS klasą `.kolumna-ukryta`, NIE selektorem CSS: nazwa
   prowadzącego to dowolny tekst wpisany przez trenera, więc nie da się jej
   zapisać w regule „pokaż wszystko oprócz tej jednej". Klasa działa na każdej
   szerokości — zawężenie do jednej osoby bywa wygodne też na komputerze. */
.grafik-siatka .kolumna-ukryta{display:none}

.przybornik{display:none}
.pasek-dolny{display:none}

@media(min-width:901px){
  body{padding-left:var(--przybornik-szer)}
  .przybornik{display:flex;flex-direction:column;gap:14px;position:fixed;left:0;top:0;bottom:0;
              width:var(--przybornik-szer);z-index:80;background:var(--navy-dark);
              padding:14px 10px;overflow-y:auto}
  .przybornik-moduly{display:flex;flex-direction:column;gap:2px}
  .przybornik-moduly a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
                       color:#dfe6ea;text-decoration:none;font-size:14px;line-height:1.2}
  .przybornik-moduly a:hover{background:rgba(255,255,255,.09);color:#fff}
  .przybornik-moduly a.aktywny{background:var(--navy);color:#fff;font-weight:600}
  .przybornik-naglowek{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
                       color:#8ba0ad;padding:0 11px;margin-bottom:5px}
  .przybornik-narzedzia{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
  .przybornik-narzedzie{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 11px;
                        border:none;border-radius:9px;background:transparent;color:#dfe6ea;
                        font-size:14px;cursor:pointer;text-align:left}
  .przybornik-narzedzie:hover{background:rgba(255,255,255,.09);color:#fff}
  .przybornik-czas{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
  .paleta-otworz{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:9px 10px;
                 border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.06);
                 color:#c8d4db;font-size:12.5px;cursor:pointer;text-align:left}
  .paleta-otworz:hover{background:rgba(255,255,255,.12);color:#fff}
  .paleta-otworz span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .paleta-otworz kbd{font-size:10px;border:1px solid rgba(255,255,255,.25);border-radius:4px;
                     padding:1px 4px;opacity:.75}
  /* Topbar stracił menu (poszło na bok), więc nie ma już powodu, żeby był
     przyklejony — zwalnia miejsce, a nawigacja i tak jest zawsze widoczna. */
  header.topbar-szczuply{position:static}
}

@media(max-width:900px){
  body{padding-bottom:calc(var(--pasek-dolny-wys) + env(safe-area-inset-bottom, 0px))}
  .pasek-dolny{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
               z-index:80;background:var(--navy-dark);
               padding-bottom:env(safe-area-inset-bottom, 0px);
               box-shadow:0 -2px 10px rgba(0,0,0,.18)}
  .pasek-dolny a,.pasek-dolny button{display:flex;flex-direction:column;align-items:center;justify-content:center;
                                     gap:3px;margin:0;border:none;background:transparent;color:#b9c7d0;
                                     text-decoration:none;font-size:10.5px;padding:8px 2px;
                                     min-height:var(--pasek-dolny-wys);cursor:pointer}
  .pasek-dolny a.aktywny{color:#fff}
  .pasek-dolny a.aktywny .ikona{stroke:var(--brand-orange)}
  .pasek-dolny .ikona{width:22px;height:22px;flex:0 0 22px}
}

/* PALETA POLECEŃ — jedno pole na klientów i akcje naraz. */
.paleta[hidden]{display:none}
.paleta{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
        padding:8vh 14px 14px}
.paleta-tlo{position:absolute;inset:0;background:rgba(15,26,34,.55)}
.paleta-okno{position:relative;width:min(620px,100%);background:#fff;border-radius:14px;
             box-shadow:0 18px 50px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column;
             max-height:min(560px,80vh)}
.paleta-pole{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border);
             color:var(--muted)}
.paleta-pole input{flex:1;border:none;outline:none;font-size:16px;color:var(--text);padding:0;background:none}
.paleta-wyniki{overflow-y:auto;padding:6px}
.paleta-pozycja{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 11px;border:none;
                border-radius:9px;background:transparent;color:var(--text);font-size:14px;cursor:pointer;
                text-align:left}
.paleta-pozycja:hover,.paleta-pozycja.zaznaczona{background:#eef5f4}
.paleta-pozycja .ikona{color:var(--navy)}
.paleta-etyk{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paleta-opis{font-size:11.5px;white-space:nowrap}
.paleta-pusto{padding:16px 12px;margin:0;font-size:13px}
.paleta-stopka{border-top:1px solid var(--border);padding:7px 14px;font-size:11px}
body.paleta-otwarta{overflow:hidden}

/* OKNO PODGLĄDU (29.07.2026) — krok bez opuszczania strony, na której pracujesz.
   Wyłącznie do CZYTANIA i przechodzenia dalej; zapisy idą zwykłym POST-em.
   Na telefonie okno dosuwa się do dołu ekranu (bliżej kciuka) i jest szersze —
   modal wyśrodkowany w pionie na 375 px marnuje miejsce i ląduje pod palcem. */
.okno[hidden]{display:none}
.okno{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:16px}
.okno-tlo{position:absolute;inset:0;background:rgba(15,26,34,.55)}
.okno-panel{position:relative;width:min(460px,100%);background:#fff;border-radius:14px;
            box-shadow:0 18px 50px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column;
            max-height:min(560px,85vh)}
.okno-glowa{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
            color:var(--navy-dark);font-size:15px}
.okno-glowa strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okno-tresc{padding:6px 14px 10px;overflow-y:auto}
.okno-wiersz{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #f0f3f6;font-size:13.5px}
.okno-wiersz:last-child{border-bottom:none}
.okno-etyk{flex:0 0 42%;color:var(--muted);font-size:12.5px}
.okno-wart{flex:1;color:var(--text);overflow-wrap:anywhere}
.okno-wiersz.okno-uwaga .okno-wart{color:#7a5b00;font-weight:600}
.okno-wiersz.okno-uwaga{background:#fff8f1;margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:6px}
.okno-akcje{display:flex;flex-wrap:wrap;gap:8px;padding:11px 14px;border-top:1px solid var(--border);background:#fafbfc}
.okno-akcja{display:inline-block;padding:8px 13px;border-radius:8px;border:1px solid var(--border);
            background:#fff;color:var(--navy-dark);text-decoration:none;font-size:13px;font-weight:600}
.okno-akcja:hover{border-color:var(--navy);color:var(--navy)}
.okno-akcja.glowna{background:var(--navy);border-color:var(--navy);color:#fff}
.okno-akcja.glowna:hover{background:var(--teal-hover);color:#fff}
body.okno-otwarte{overflow:hidden}
@media(max-width:700px){
  .okno{align-items:flex-end;padding:0}
  .okno-panel{width:100%;max-height:82vh;border-radius:14px 14px 0 0}
  /* Okno jest NAD paskiem dolnym (z-index 210 vs 80), więc pasek go nie przetnie,
     ale treść musi mieć zapas, żeby ostatnia akcja nie siedziała pod kciukiem. */
  .okno-akcje{padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px))}
}

/* ===== MINUTNIK — DWA WARIANTY, ŚWIADOMIE ROZDZIELONE (29.07.2026) =====
   PANEL ADMINA (.minutnik-dok): wysuwany z paska. Pływający przycisk USUNIĘTY —
   odkąd minutnik jest w przyborniku i na pasku dolnym, kula w rogu tylko dublowała
   wejście i zasłaniała treść. Panel wychodzi OD DOŁU na telefonie (kciuk jest już
   przy pasku) i przy pasku bocznym na komputerze.
   PORTAL KLIENTA (.minutnik-plywajacy): zostaje FAB-em, bo portal nie ma żadnego
   paska, z którego dałoby się minutnik wywołać. Style obu wariantów są rozdzielone,
   żeby zmiana w panelu nie ruszyła portalu. */
.minutnik-dok[hidden]{display:none}
.minutnik-dok{position:fixed;z-index:150;background:#fff;border:1px solid var(--border);
              border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.20);padding:12px 14px}
.minutnik-glowa{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.minutnik-dok .minutnik-naglowek{flex:1;margin-bottom:0}
.minutnik-czas{font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;color:var(--navy)}
.przybornik-narzedzie.aktywny{background:rgba(255,255,255,.14);color:#fff}
@media(min-width:901px){
  .minutnik-dok{left:calc(var(--przybornik-szer) + 10px);bottom:14px;width:270px}
}
@media(max-width:900px){
  .minutnik-dok{left:8px;right:8px;bottom:calc(var(--pasek-dolny-wys) + 8px + env(safe-area-inset-bottom, 0px))}
  .pasek-dolny button.aktywny{color:#fff}
  .pasek-dolny button.aktywny .ikona{stroke:var(--brand-orange)}
}

/* Pływający minutnik — TYLKO portal klienta. Zwinięty = okrągły przycisk (FAB)
   z aktualnym czasem; kliknięcie rozwija panel z presetami nad przyciskiem. */
.minutnik-plywajacy{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.minutnik-fab{order:2;width:auto;min-width:74px;height:56px;border-radius:28px;padding:0 20px;background:var(--navy);color:#fff;border:none;box-shadow:0 4px 14px rgba(0,0,0,.22);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;display:flex;align-items:center;justify-content:center}
.minutnik-fab:hover{background:var(--teal-hover)}
.minutnik-panel{order:1;display:none;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.16);padding:12px 14px;max-width:min(92vw,260px)}
.minutnik-plywajacy.otwarty .minutnik-panel{display:block}

/* Wspólne dla obu wariantów. */
.minutnik-naglowek{font-weight:700;color:var(--navy-dark);font-size:13px;margin-bottom:8px}
.minutnik-przyciski{display:flex;flex-wrap:wrap;gap:6px}
.minutnik-przyciski button{margin:0}
@media(max-width:700px){
  .minutnik-plywajacy{right:12px;bottom:12px}
  .minutnik-fab{height:52px;min-width:66px;font-size:18px}
}
@media print{.minutnik-plywajacy,.minutnik-dok{display:none}}
.rej-sesje{padding:8px 12px 12px}
details.rej-sesja{border:1px solid var(--border);border-radius:8px;margin-top:9px;background:#fbfcfd}
details.rej-sesja:first-child{margin-top:0}
details.rej-sesja>summary{padding:9px 12px;cursor:pointer;list-style:none;user-select:none}
details.rej-sesja[open]>summary{border-bottom:1px solid var(--border)}
details.rej-sesja>summary::-webkit-details-marker{display:none}
details.rej-sesja>summary::before{content:"▸";color:var(--muted);display:inline-block;width:15px}
details.rej-sesja[open]>summary::before{content:"▾"}
.rej-cwiczenia{padding:11px 12px 12px}
.rej-cwiczenie{background:#fff;border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:8px;padding:9px 11px;margin-bottom:9px}
.rej-cwiczenie:last-child{margin-bottom:0}
.rej-cw-glowa{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.rej-cw-nazwa{font-weight:700;color:var(--navy-dark);font-size:14.5px;margin-right:2px}
.rej-cw-akcje{margin-left:auto;font-size:13px;white-space:nowrap}
.rej-cw-serie{margin-top:8px}
.rej-cw-uwagi{margin-top:8px;font-size:12.5px;color:var(--muted);background:#f6f8f9;border-radius:6px;padding:5px 9px}
/* Lista serii — każda seria OSOBNYM kafelkiem, wyraźnie oddzielona (wcześniej
   zlewały się w jedną linię z separatorem "·"). */
.serie-lista{display:flex;flex-wrap:wrap;gap:6px}
.seria-chip{display:inline-flex;align-items:center;gap:6px;background:#f4f6f8;border:1px solid var(--border);border-radius:8px;padding:3px 8px 3px 3px;font-size:13px}
.seria-nr{background:var(--navy);color:#fff;font-weight:700;font-size:11px;border-radius:6px;padding:3px 7px;line-height:1}
.seria-val{font-weight:600;color:var(--navy-dark);white-space:nowrap}
.seria-ciezar{color:var(--navy);font-weight:700;margin-left:5px}
.seria-sep{display:none}
/* Uwaga do serii — wyraźna plakietka (na wzór "wariantów", żeby rzucała się w
   oczy; wcześniej uwagi serii w ogóle nie były pokazywane w historii). */
.seria-uwaga{display:inline-block;background:#fff2cc;color:#7a5b00;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}
/* Czas przerwy po serii (runda 12+, na prośbę Piotra) — dyskretna, „meta”
   plakietka z ikoną pauzy; neutralna, żeby nie konkurowała z żółtą uwagą serii. */
.seria-przerwa{display:inline-block;background:#eef2f5;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;white-space:nowrap}

/* ===== DZIENNIK PŁATNOŚCI (przebudowa 26.07.2026) =====================
   Układ księgowy: nagłówek dnia, pod nim pozycje rozliczeniowe, a pod każdą
   pozycją jej dopiski (dopłaty/zwroty/korekty) wcięte i wyszarzone. Cel: żeby
   dzień, klient i rodzaj były widoczne od razu, a hierarchia wpisów czytelna
   bez wczytywania się w kwoty. */
.dziennik-platnosci td{vertical-align:top}
.dziennik-platnosci .dzien-naglowek td{
  background:var(--navy-dark);color:#fff;padding:6px 10px;font-size:13px;letter-spacing:.02em}
.dziennik-platnosci .dzien-naglowek .muted{color:#b9c6d1}
.dziennik-platnosci .pozycja-glowna td{border-top:2px solid var(--border);padding-top:9px}

/* RODZAJ WPISU WIDOCZNY OD RAZU (29.07.2026, punkt 1: „płatności wyglądają na
   skomplikowane"). Kolorowa krawędź z lewej + ikona kierunku przy rodzaju usługi:
   w dół = pieniądze przyszły, w górę = oddaliśmy, w bok = poprawka zapisu.
   Kolor NIE jest jedynym nośnikiem — ikona i podpis w `title` niosą to samo,
   więc odczyt nie zależy od rozróżniania barw. */
.dziennik-platnosci .pozycja-glowna td:first-child{border-left:3px solid transparent}
.dziennik-platnosci .rodzaj-wplata  td:first-child{border-left-color:var(--navy)}
.dziennik-platnosci .rodzaj-zwrot   td:first-child{border-left-color:var(--red)}
.dziennik-platnosci .rodzaj-korekta td:first-child{border-left-color:var(--amber)}
.pl-rodzaj{display:inline-flex;align-items:center;gap:6px}
.pl-rodzaj .ikona{width:17px;height:17px;flex:0 0 17px}
.rodzaj-wplata  .pl-rodzaj .ikona{color:var(--navy)}
.rodzaj-zwrot   .pl-rodzaj .ikona{color:var(--red)}
.rodzaj-korekta .pl-rodzaj .ikona{color:var(--amber)}
/* Drobne informacje (forma zapłaty, paragon) w jednej linii zamiast osobnych
   akapitów — to one najbardziej rozpychały wiersz w pionie. */
.pl-drobne{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:11px;margin-top:3px}
/* Paragon WYSTAWIONY to stan normalny — wystarczy dyskretna ikona. Pełna plakietka
   przy każdym wierszu robiła z potwierdzenia szum; widoczny zostaje WYJĄTEK. */
.pl-paragon-ok{color:var(--green);display:inline-flex}
.pl-paragon-ok .ikona{width:15px;height:15px;flex:0 0 15px}
/* Dopisek wcięty i lżejszy — na pierwszy rzut oka widać, że to nie osobne
   zdarzenie, tylko domknięcie rozliczenia pozycji wyżej. */
.dziennik-platnosci .pozycja-dopisek td{background:#f7f9fb;font-size:13px;padding-top:4px;padding-bottom:4px}
.dziennik-platnosci .pozycja-dopisek td:first-child{padding-left:22px}
/* Sesje pokryte pozycją — chipy pod wierszem rozliczenia, żeby od razu było widać,
   ZA CO konkretnie klient zapłacił (a nie tylko „ile"). */
.dziennik-platnosci .pozycja-sesje td{padding-top:2px;padding-bottom:2px;font-size:12px}
.sesja-chip{display:inline-flex;align-items:center;gap:4px;background:#eef4f2;color:var(--navy-dark);
  border:1px solid #cfe0da;border-radius:999px;padding:1px 4px 1px 9px;font-size:12px;margin:2px 4px 2px 0}
.sesja-chip .link-btn{color:var(--muted);font-size:13px;line-height:1;padding:0 4px}
.dziennik-platnosci .pozycja-dopisz td{padding-top:2px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.dziennik-platnosci .pozycja-dopisz summary{font-size:12px;cursor:pointer}
/* Kwoty do prawej — na desktopie. Wyrównanie trzyma KLASA, nie styl inline, bo
   w widoku mobilnym musi je dać się nadpisać (patrz niżej). */
.dziennik-platnosci .kom-kwota{text-align:right}

/* Formularz edycji rozwinięty przy wierszu (zamiast skoku na szczyt strony). */
.dziennik-platnosci .pozycja-edycja td{background:#f4f8fb;border-left:3px solid var(--navy);padding:12px 14px}

/* Pasek „masz niezapisany wpis" (ochrona przed przypadkowym wyjściem). */
.szkic-pasek{border-color:#c99a2e;background:#fffdf6;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px;margin-bottom:12px}
@media(max-width:700px){
  .szkic-pasek{position:sticky;top:0;z-index:5}
  .szkic-pasek button{flex:1 1 auto}
}

/* ===== DZIENNIK PŁATNOŚCI NA TELEFONIE (26.07.2026) ======================
   Uniwersalny mechanizm kart (.tabela-mobilne-karty) robi z każdej z 7 komórek
   osobny blok z wielkim nagłówkiem. Zmierzone skutki: JEDNA płatność zajmowała
   358–421 px, a dopisek 210–227 px — prawie tyle co pozycja główna, choć niesie
   ułamek informacji. Trzy płatności = 3210 px, czyli cztery ekrany przewijania.
   Dlatego dziennik dostaje własny, zwarty układ zamiast układu generycznego. */
@media (max-width:700px){
  .dziennik-platnosci .pozycja-dopisek td:first-child{padding-left:0}
  .dziennik-platnosci .pozycja-glowna td{border-top:none}

  /* --- POZYCJA ROZLICZENIOWA --- */
  .dziennik-platnosci tr.pozycja-glowna{padding:10px 13px}
  .dziennik-platnosci .pozycja-glowna td{border-bottom:none;padding:2px 0}
  /* Nagłówki znikają tam, gdzie treść mówi sama za siebie: data to widocznie data,
     nazwisko to klient, plakietka statusu to status. Zostają TYLKO przy kwotach,
     bo „180,00" obok „130,00" bez podpisu jest nie do odróżnienia. */
  .dziennik-platnosci .kom-data::before,
  .dziennik-platnosci .kom-klient::before,
  .dziennik-platnosci .kom-rodzaj::before,
  .dziennik-platnosci .kom-status::before,
  .dziennik-platnosci .kom-akcje::before,
  .dziennik-platnosci .kom-opis::before{display:none}
  .dziennik-platnosci .kom-data{font-size:12px;color:var(--muted)}
  .dziennik-platnosci .kom-data div{display:inline;margin-left:6px}
  .dziennik-platnosci .kom-klient{font-size:16px}
  /* Należność i Wpłacono obok siebie — dwie liczby, jedna linia zamiast dwóch bloków. */
  .dziennik-platnosci .kom-kwota{display:inline-block;width:49%;text-align:left;padding-top:6px}
  .dziennik-platnosci .kom-kwota::before{display:inline;margin:0 4px 0 0;font-size:10px}
  .dziennik-platnosci .kom-status{padding-top:4px}
  .dziennik-platnosci .kom-akcje{padding-top:4px}
  .dziennik-platnosci .pozycja-glowna .kom-data{padding:0}
  .dziennik-platnosci .pozycja-glowna .kom-klient{padding:2px 0 0}
  /* Komórki, które na telefonie nie niosą nic (myślnik w kolumnie „Należność"
     przy dopisku) — w układzie kart to byłby pusty blok z nagłówkiem. */
  .dziennik-platnosci .kom-pusta{display:none}

  /* Rodzaj usługi, opis, forma i paragon — jednym ciągiem zamiast czterech linii. */
  .dziennik-platnosci .kom-rodzaj>div{display:inline;margin-right:7px}

  /* --- DOPISEK: jedna zwarta linijka, nie druga karta ---
     Wizualnie podrzędny wobec pozycji: wcięty, przerywana ramka, mniejszy tekst.
     UWAGA: `display:block` na wierszu jest tu KONIECZNE. Karty są siatką (grid),
     a w siatce przeglądarka zamienia `inline-block` elementów potomnych na `block`
     — komórki i tak układałyby się jedna pod drugą, mimo ustawienia. */
  .dziennik-platnosci tr.pozycja-dopisek{
    display:block;padding:6px 12px;margin:-4px 0 8px 14px;background:#f7f9fb;
    border-style:dashed;border-color:#d7dfe6}
  .dziennik-platnosci .pozycja-dopisek td{
    display:inline-block;width:auto;max-width:100%;border:none;
    padding:1px 9px 1px 0;font-size:12.5px}
  .dziennik-platnosci .pozycja-dopisek td::before{display:none}
  .dziennik-platnosci .pozycja-dopisek .kom-akcje{
    padding-top:0;border-top:none;margin-top:0;float:right}

  /* --- NAGŁÓWEK DNIA I FORMULARZE --- */
  .dziennik-platnosci tr.dzien-naglowek{padding:0;margin-bottom:6px;border:none}
  .dziennik-platnosci .dzien-naglowek td{padding:7px 12px;border-radius:8px}
  .dziennik-platnosci tr.pozycja-dopisz,
  .dziennik-platnosci tr.pozycja-sesje{
    display:block;border:none;background:transparent;padding:0 4px;margin:-6px 0 12px}
  .dziennik-platnosci .pozycja-dopisz td,
  .dziennik-platnosci .pozycja-sesje td{border:none;padding:2px 0}

  /* Rozmieszczenie w siatce karty. Reguła ogólna daje pełną szerokość każdej
     komórce zawierającej link/formularz — przez co „Należność" (bez linku)
     lądowała w jednej linii siatki z wysokim opisem usługi i rozciągała się do
     jego wysokości: 150 px na wyświetlenie jednej kwoty. Ustawiamy wprost:
     wszystko na całą szerokość, PARĄ idą tylko dwie kwoty. */
  @supports selector(:has(*)){
    .dziennik-platnosci .pozycja-glowna .kom-data,
    .dziennik-platnosci .pozycja-glowna .kom-klient,
    .dziennik-platnosci .pozycja-glowna .kom-rodzaj,
    .dziennik-platnosci .pozycja-glowna .kom-rodzaj{grid-column:1 / -1}
    /* Kwoty parami, a pod nimi status i akcje też parą — dwie linie zamiast czterech. */
    .dziennik-platnosci .pozycja-glowna .kom-kwota,
    .dziennik-platnosci .pozycja-glowna .kom-status,
    .dziennik-platnosci .pozycja-glowna .kom-akcje{grid-column:auto;width:auto}
    .dziennik-platnosci .pozycja-glowna .kom-akcje{text-align:right}
  }
}

.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:#e9ecf2;color:var(--muted)}
.tag.ok{background:#e4f3ea;color:var(--green)}
.tag.warn{background:#fdf1dc;color:var(--amber)}
.tag.bad{background:#fbe6e4;color:var(--red)}

/* Plakietki wariantów ćwiczeń (runda 12) — zawsze ikona + tekst razem, żeby
   było czytelne niezależnie od tego, czy ktoś od razu rozpoznaje symbol. */
.wariant-plakietka{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;background:#eef1f6;color:var(--navy-dark);font-size:12px;font-weight:600;margin:2px 4px 2px 0}
.wariant-plakietka svg{flex-shrink:0}
.wariant-grupa{margin-top:8px}
.wariant-grupa .grupa-etykieta{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;display:block}
.wariant-checkboxy{display:flex;flex-wrap:wrap;gap:8px}
.wariant-checkbox-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;border:1px solid var(--border);border-radius:999px;font-size:13px;cursor:pointer;background:#fff}
.wariant-checkbox-item input{width:auto;margin:0}
.wariant-checkbox-item:has(input:checked){background:#eef1f6;border-color:var(--navy)}

/* Grupowanie katalogu ćwiczeń po haśle bazowym (runda 12, poprawka) — komórka
   z hasłem bazowym rozciąga się (rowspan) na wszystkie wiersze tej samej
   "rodziny", więc pokazuje się RAZ, a nie osobno przy każdym wierszu. */
.katalog-grupa-etykieta{vertical-align:top;font-weight:600;background:#fafbfd}
.katalog-grupa-granica td{border-top:2px solid var(--border)}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input,select,textarea{padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit}
button{background:var(--navy);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer}
button:hover{background:var(--teal-hover)}
button.secondary{background:#fff;color:var(--navy);border:1px solid var(--navy)}
/* Przycisk "usuń" wyglądający jak zwykły link tekstowy (runda 12, część 7) — do
   spójności z odnośnikami "edytuj" przy wierszach tabel, ale w kolorze ostrzegawczym. */
button.link-btn{background:none;border:none;color:var(--red);padding:0;font-size:13px;text-decoration:underline;cursor:pointer}
button.link-btn:hover{background:none;color:#8a1c17}
form.usun-inline{display:inline}
.login-box{max-width:360px;margin:80px auto;background:#fff;border:1px solid var(--border);border-radius:10px;padding:28px}
.login-box h1{font-size:20px;margin-top:0;color:var(--navy-dark)}
.error{background:#fbe6e4;color:var(--red);padding:8px 12px;border-radius:6px;font-size:14px;margin-bottom:12px}
.muted{color:var(--muted);font-size:13px}
.client-list a{text-decoration:none;color:var(--text)}
.client-list tr:hover{background:#f8fafc;cursor:pointer}

/* ===== Pewność zapisu (28.07.2026) — pasek postępu przy wysyłaniu formularza =====
   Na samej górze okna, POWYŻEJ wszystkiego (także sticky topbara), bo ma być widoczny
   również wtedy, gdy klikniętý przycisk zjechał poza ekran przy przewijaniu. */
.pasek-zapisu{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:rgba(19,122,108,.18);overflow:hidden}
.pasek-zapisu::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:var(--navy);animation:pasek-zapisu-sunie 1.1s ease-in-out infinite}
@keyframes pasek-zapisu-sunie{0%{left:-40%}100%{left:100%}}
/* Szanuj ustawienie „ogranicz animacje" w systemie — wtedy sam, statyczny pasek. */
@media(prefers-reduced-motion:reduce){
  .pasek-zapisu::after{animation:none;width:100%;left:0;opacity:.6}
}
button:disabled,input[type=submit]:disabled{opacity:.65;cursor:progress}

/* ===== Postępy (progress tracking, #7) — flat scatter + przełącznik + kafelki ===== */
.postepy{margin-top:4px}
.postepy-pasek{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.postepy-wybor{display:flex;flex-direction:column;gap:3px;min-width:220px;flex:1}
.postepy-etyk{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.postepy-cwiczenie{width:100%}
.postepy-miary{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.postepy-miary button{margin:0;border:none;border-radius:0;background:#fff;color:var(--navy-dark);font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;border-left:1px solid var(--border)}
.postepy-miary button:first-child{border-left:none}
.postepy-miary button:hover{background:#f4f7f8}
.postepy-miary button.aktywna{background:var(--navy);color:#fff}
.postepy-tytul-wykresu{font-weight:700;color:var(--navy-dark);font-size:14px;margin:2px 0 6px}
.postepy-wykres{position:relative;min-height:210px;width:100%}
.postepy-svg{display:block}
.postepy-legenda{margin-top:6px;font-size:12px}
.postepy-tip{position:absolute;z-index:10;pointer-events:none;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);padding:7px 10px;font-size:12px;color:var(--text);white-space:nowrap}
.postepy-tip-data{font-weight:700;color:var(--navy-dark);margin-bottom:3px}
.postepy-tip div{line-height:1.5}
.postepy-kafelki{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.postepy-kafelek{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer;min-width:150px;text-align:left}
.postepy-kafelek:hover{border-color:var(--navy);background:#f8fbfc}
.postepy-kafelek.aktywny{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#f2f9f8}
.postepy-k-nazwa{font-weight:600;font-size:12.5px;color:var(--navy-dark);line-height:1.25;overflow-wrap:anywhere}
.postepy-k-spark{line-height:0;margin:1px 0}
.postepy-k-ost{font-size:11px;color:var(--muted);font-weight:600}
/* Kafelki ogólnego postępu (27.07.2026) — trzy liczby nad wykresem. Celowo NIE są
   klikalne: to odczyt, nie przełącznik, więc nie mogą wyglądać jak .postepy-kafelek. */
.postepy-kpi{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.postepy-kpi-kafel{display:flex;flex-direction:column;gap:1px;background:#f7fafb;border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:10px;padding:8px 12px;min-width:150px;flex:1;cursor:help}
.postepy-kpi-kafel.ostrzega{border-left-color:var(--brand-orange);background:#fff8f1}
.postepy-kpi-etyk{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.postepy-kpi-wart{font-size:21px;font-weight:700;color:var(--navy-dark);line-height:1.15}
.postepy-kpi-pod{font-size:11.5px;color:var(--muted)}
.postepy-kpi-stopka{width:100%;margin:2px 0 0;font-size:11.5px}
@media(max-width:700px){
  .postepy-miary button{padding:6px 10px;font-size:12px}
  .postepy-kafelek{flex:1;min-width:calc(50% - 4px)}
  .postepy-kpi-kafel{min-width:calc(50% - 4px)}
  .postepy-kpi-wart{font-size:18px}
}

/* ===== Sticky nawigacja sekcji (#3) — wspólna: portal klienta + karta klienta w panelu admina (includes/sekcja_nav.php) ===== */
html{scroll-behavior:smooth}
.sekcja-nav{position:sticky;top:0;z-index:60;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--navy-dark);padding:8px 14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sekcja-nav::-webkit-scrollbar{height:0}
.sekcja-nav a{white-space:nowrap;color:#fff;opacity:.72;text-decoration:none;font-size:13px;font-weight:600;padding:5px 13px;border-radius:999px;transition:opacity .15s,background .15s}
.sekcja-nav a:hover{opacity:1;background:rgba(255,255,255,.12)}
.sekcja-nav a.aktywna{opacity:1;background:var(--navy)}
main [id^="sekcja-"]{scroll-margin-top:60px}
@media(max-width:700px){.sekcja-nav{padding:7px 10px;gap:5px}.sekcja-nav a{padding:5px 11px;font-size:12.5px}}
/* Topbar NIE JEST już przyklejony nigdzie (zmiana 28.07.2026). Wcześniej lepił się
   w panelu admina, bo niósł menu modułów i inaczej trzeba było scrollować na samą
   górę, żeby zmienić stronę. Menu jest teraz w przyborniku — widocznym przez cały
   czas — więc przyklejony topbar tylko zjadałby ekran. Skutek uboczny, ZAMIERZONY:
   pozycjaPaska() w includes/sekcja_nav.php liczy wysokość przyklejonego topbara i
   od teraz dostaje zero, czyli pasek sekcji siada na top:0 — tak samo jak zawsze
   działał w portalu. Nie ma już dwóch przyklejonych pasków do rozsuwania. */

/* --- Zbiórka dyspozycyjności (12.08.2026) ---------------------------------
   Formularz klienta jest jedyną stroną BEZ logowania i jedyną, którą ogląda
   ktoś, kto nie zna panelu — dlatego ma własne, bardzo proste style, a nie
   pożyczone z tabel admina. */
.dyspo-strona main { max-width: 640px; }
.dyspo-uwaga {
  border-left: 4px solid var(--brand-orange);
  padding: 8px 12px; background: #fff8f1; border-radius: 4px;
}
/* Dzień = nagłówek + siatka kafelków godzin. Przebudowa 12.08.2026: poprzednia
   wersja miała trzy razy „od–do–preferencja" na dzień, czyli 21 list rozwijanych
   na tydzień. Klient wie z marszu, kiedy może — ma to dotknąć, nie wyklikać. */
.dyspo-dzien { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; padding: 8px 10px; }
.dyspo-dzien-glowa {
  display: flex; gap: 10px; justify-content: space-between;
  align-items: baseline; flex-wrap: wrap; margin-bottom: 6px;
}
.dyspo-dzien-nazwa { font-weight: 600; }
.dyspo-dzien-opis  { color: var(--muted); font-size: 14px; }
.dyspo-pref { font-size: 13px; color: var(--muted); display: flex; gap: 5px; align-items: center; }

.godz-siatka { display: flex; flex-wrap: wrap; gap: 5px; }

/* Pole ukryte przez clip-path, a NIE display:none — inaczej wypadłoby z obsługi
   klawiaturą i z czytników ekranu (ta sama zasada co przy .tylko-czytnik). */
.godz-pole {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.godz-kafel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 6px;      /* cel pod kciuk */
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--navy-dark); cursor: pointer;
  font-size: 15px; user-select: none;
}
.godz-pole:checked + .godz-kafel {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600;
}
.godz-pole:focus-visible + .godz-kafel { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* Kanały wysyłki. Kolor NIE jest jedynym nośnikiem — każdy przycisk ma nazwę,
   tak samo jak ikony akcji w Płatnościach. */
.dyspo-kanaly { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kanal {
  display: inline-block; padding: 5px 10px; border-radius: 4px; font-size: 13px;
  text-decoration: none; border: 1px solid var(--border); background: #fff;
  color: var(--navy-dark); cursor: pointer; line-height: 1.3;
}
.kanal:hover { border-color: var(--navy); }
.kanal-wa   { border-color: #25d366; color: #0b7a3e; }
.kanal-sms  { border-color: var(--muted); }
.kanal-mail { border-color: var(--navy); color: var(--navy); }

/* Link awaryjny — gdy klient siedzi na kanale, którego nie obsługujemy. */
.dyspo-link {
  width: 100%; min-width: 180px; font-size: 11px;
  background: #f7f9fb; border: 1px solid var(--border); border-radius: 4px;
}

/* Układanie grafiku z dyspozycyjności. */
.dyspo-wpis { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dyspo-zajety { color: var(--muted); }
.stan-ok    { color: var(--navy); font-weight: 600; }
.stan-uwaga { color: var(--brand-orange); font-weight: 600; }

/* --- Podgląd ćwiczeń na liście Konfiguracji (12.08.2026) -------------------
   Zgłoszenie Piotra: „musi być dostępny podgląd zaszytych ćwiczeń BEZ
   KONIECZNOŚCI wchodzenia w daną konfigurację".

   PIERWSZA WERSJA SIEDZIAŁA W KOMÓRCE „Kod" I SIĘ ROZJECHAŁA — ta kolumna ma
   kilkanaście procent szerokości tabeli, więc każda nazwa ćwiczenia łamała się
   na cztery linie. Podgląd dostaje więc osobny wiersz na pełną szerokość,
   a treść renderuje ta sama kaskada co Rejestr. */
.kf-wiersz-podgladu > td {
  border-top: 0; padding-top: 0; padding-bottom: 10px;
  background: #fbfcfd;
}
.kf-podglad > summary {
  cursor: pointer; list-style: none; display: inline-flex; gap: 8px;
  align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  padding: 3px 0;
}
.kf-podglad > summary::-webkit-details-marker { display: none; }
.kf-podglad > summary::before { content: '▸'; font-size: 11px; line-height: 1; }
.kf-podglad[open] > summary::before { content: '▾'; }
.kf-podglad > summary .muted { font-weight: 400; }
.kf-podglad .rej-cwiczenia { margin-top: 8px; }

/* Ciąg superserii — kreska po lewej. Było wpisane stylem przy każdym wierszu
   w trzech plikach; wspólny renderer daje jedną klasę i jedno miejsce zmiany. */
.rej-cw-ciag { border-left: 3px solid var(--navy); margin-left: 10px; }

/* Na telefonie tabela staje się kartami — wiersz podglądu ma być domknięciem
   karty rodzica, a nie osobną kartą wiszącą pod nią. */
@media (max-width: 700px) {
  .tabela-mobilne-karty .kf-wiersz-podgladu { margin-top: -10px; }
  .kf-wiersz-podgladu > td { padding-left: 10px; padding-right: 10px; }
}