/* ==========================================================================
   okna.css — okna kokpitu zamiast szarych okienek przeglądarki
   (alert/confirm) oraz okno bezczynności. Kod: PH.okno / PH.potwierdz /
   PH.komunikat / PH.toast w auth.js.

   Wygląd 1:1 z prezentacji zatwierdzonej przez właściciela 14.10.2026
   („wszystkie komunikaty musimy zrobić właśnie w ten sposób”).

   DLACZEGO OSOBNY PLIK, A NIE kokpit.css: trzy strony (index, tablica,
   uzytkownicy) kokpit.css nie ładują — mają własne bloki <style>, a dołożenie
   im kokpit.css przestawiłoby ich wygląd. Okna muszą działać na wszystkich
   ośmiu stronach, więc ten arkusz ładuje każda z nich. Jedna kopia zamiast
   czterech.

   Nazwy klas mają przedrostek `okno-`, a warianty `okno--…`. Prezentacja
   używała gołych .blad/.info/.zamknij/.toast — w kokpicie te nazwy są już
   zajęte (kokpit.css: .blad, .info, .zamknij szuflady) i doklejały się do
   okna. Przyciski mają reguły o wyższej wadze niż globalne `button{…}`
   i `button:hover{…}` stron, żeby nie przejmowały ich tła i zaokrągleń.

   Zmienne: tablica.html i uzytkownicy.html nie mają --line-s (mają
   --line-strong), stąd zapasowe wartości w var().
   ========================================================================== */
.okno-tlo,.okno-tlo *,.okno-toast,.okno-toast *{box-sizing:border-box}
.okno-tlo{position:fixed;inset:0;background:rgba(15,36,31,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;
  opacity:0;transition:opacity .18s ease}
.okno-tlo.widac{opacity:1}
.okno-tlo .okno{width:min(100%,460px);max-height:calc(100vh - 32px);overflow-y:auto;margin:0;
  background:var(--paper);color:var(--ink);font-family:var(--ff-b);text-align:left;
  border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.32);padding:26px 26px 22px;position:relative;
  transform:translateY(8px) scale(.98);transition:transform .18s ease;border:0;border-top:4px solid var(--brass)}
.okno-tlo.widac .okno{transform:none}
.okno-tlo .okno--blad,.okno-tlo .okno--usun{border-top-color:#B4472E}
.okno-tlo .okno--info{border-top-color:var(--pine)}
.okno-tlo .okno--ok{border-top-color:#2E7D5B}
.okno-glowa{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.okno-ikona{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#F7EEDC;color:var(--brass-600)}
.okno--blad .okno-ikona,.okno--usun .okno-ikona{background:#F8EAE4;color:#B4472E}
.okno--info .okno-ikona{background:var(--pine-050);color:var(--pine)}
.okno--ok .okno-ikona{background:#E7F2EC;color:#2E7D5B}
.okno-ikona svg{width:22px;height:22px}
.okno-tlo .okno h3{margin:2px 0 0;padding:0 30px 0 0;font-family:var(--ff-d);font-size:19px;font-weight:600;
  line-height:1.25;letter-spacing:normal;color:var(--ink)}
.okno-tlo .okno-tresc{font-size:14.5px;line-height:1.55;color:#3C4A44;white-space:pre-line;overflow-wrap:anywhere}
.okno-tlo .okno-tresc b{color:var(--ink)}
.okno-tlo .okno-szczegol{margin-top:12px;font-family:var(--ff-m);font-size:11.5px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px;overflow-wrap:anywhere}
.okno-tlo .okno-przyciski{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
.okno-tlo .okno-przyciski button{min-height:42px;width:auto;margin:0;padding:0 18px;border-radius:10px;
  font:600 14px var(--ff-b);cursor:pointer;border:1px solid transparent;transition:background .15s}
.okno-tlo .okno-przyciski .okno-btn-glowny{background:var(--brass);color:#fff}
.okno-tlo .okno-przyciski .okno-btn-glowny:hover{background:#A06E27}
.okno-tlo .okno-przyciski .okno-btn-wtorny{background:transparent;color:var(--pine);border-color:var(--line-s,var(--line-strong,#CFD6D2))}
.okno-tlo .okno-przyciski .okno-btn-wtorny:hover{background:var(--pine-050);border-color:var(--brass)}
.okno-tlo .okno-przyciski .okno-btn-usun{background:#B4472E;color:#fff}
.okno-tlo .okno-przyciski .okno-btn-usun:hover{background:#963A25}
.okno-tlo .okno :focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.okno-tlo .okno .okno-zamknij{position:absolute;top:14px;right:14px;width:32px;height:32px;margin:0;padding:0;
  border-radius:8px;border:0;background:transparent;color:var(--muted);font:400 20px/32px var(--ff-b);
  text-align:center;cursor:pointer}
.okno-tlo .okno .okno-zamknij:hover{background:var(--pine-050);color:var(--pine)}

/* odliczanie bezczynności */
.okno-odliczanie{display:flex;align-items:center;gap:18px;margin:6px 0 4px}
.okno-pierscien{position:relative;width:84px;height:84px;flex:none}
.okno-pierscien svg{width:84px;height:84px;transform:rotate(-90deg)}
.okno-pierscien .okno-pierscien-tlo{stroke:var(--line)}
.okno-pierscien .okno-pierscien-pasek{stroke:var(--brass);transition:stroke-dashoffset 1s linear}
.okno-pierscien .okno-czas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-m);font-size:19px;color:var(--ink)}
.okno-odliczanie-opis{font-size:13.5px;color:var(--muted)}

/* toast sukcesu. pointer-events:none — niewidoczny toast (opacity 0) stoi
   dalej w rogu ekranu i bez tego zjadałby kliknięcia w to, co pod nim. */
.okno-toast{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--pine);color:#fff;border-radius:12px;
  padding:13px 16px 13px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 14px 40px rgba(0,0,0,.25);
  font:14px var(--ff-b);transform:translateY(20px);opacity:0;transition:all .2s ease;pointer-events:none}
.okno-toast.widac{transform:none;opacity:1}
.okno-toast-kropka{width:22px;height:22px;flex:none;border-radius:50%;background:#2E7D5B;display:flex;align-items:center;justify-content:center}

/* telefon: okno jako arkusz od dołu */
@media(max-width:560px){
  .okno-tlo{align-items:flex-end;padding:0}
  .okno-tlo .okno{width:100%;max-height:100vh;border-radius:18px 18px 0 0;padding:24px 20px 20px}
  .okno-tlo .okno-przyciski{flex-direction:column-reverse}
  .okno-tlo .okno-przyciski button{width:100%;min-height:48px}
  .okno-toast{left:16px;right:16px;bottom:16px}
}
@media (prefers-reduced-motion: reduce){
  .okno-tlo,.okno-tlo .okno,.okno-toast,.okno-pierscien .okno-pierscien-pasek{transition:none}
}