/* =====================================================================
   Olimpia

   UKLAD: menu boczne stale powyzej 900 px, hamburger ponizej.
   Wybor robi CSS na podstawie szerokosci okna, wiec obrot tabletu
   przelacza tryb sam.
   ===================================================================== */

:root{
  --tlo:#0f1115; --panel:#171a21; --panel2:#1d212a; --linia:#262a33;
  --tekst:#e5e7eb; --przyg:#9ca3af; --slaby:#6b7280;
  --akcent:#4ade80; --akcent2:#22c55e;
  --blad:#f87171; --ostrzez:#fbbf24; --info:#60a5fa;
  --r:12px; --r2:8px;
  --menu:230px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--tlo);color:var(--tekst);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
.ukryty{display:none !important}
a{color:var(--akcent);text-decoration:none}

/* =====================================================================
   LOGOWANIE
   ===================================================================== */
body.logowanie{
  display:flex;align-items:center;justify-content:center;padding:24px 16px;
}
.karta{
  width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--linia);border-radius:var(--r);padding:32px 28px;
}
.marka{
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--slaby);margin-bottom:6px;
}
.karta h1{font-size:22px;font-weight:600;margin-bottom:4px}
.podtytul{color:var(--przyg);font-size:14px;margin-bottom:22px}
.karta label{
  display:block;font-size:13px;color:var(--przyg);margin-bottom:7px;
}
.karta input{
  width:100%;padding:13px 14px;background:var(--tlo);
  border:1px solid var(--linia);border-radius:9px;
  color:var(--tekst);font-size:16px;font-family:inherit;
  transition:border-color .15s;
}
.karta input:focus{outline:none;border-color:var(--akcent)}
input.kod{
  text-align:center;letter-spacing:5px;font-size:22px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.karta button{
  width:100%;margin-top:18px;padding:13px;
  background:var(--akcent);color:#08150c;border:0;border-radius:9px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s;
}
.karta button:hover{background:var(--akcent2)}
.wroc{
  text-align:center;color:var(--slaby);font-size:13px;
  margin-top:14px;cursor:pointer;
}
.wroc:hover{color:var(--przyg)}
.msg{
  margin-top:16px;padding:11px 13px;border-radius:var(--r2);
  font-size:13.5px;line-height:1.5;background:var(--panel2);
  color:var(--przyg);min-height:0;
}
.msg:empty{display:none}
.msg.blad{background:rgba(248,113,113,.1);color:var(--blad)}
.msg.ok{background:rgba(74,222,128,.1);color:var(--akcent)}
.stopka{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--linia);
  font-size:12px;color:var(--slaby);line-height:1.5;
}

/* =====================================================================
   PANEL - UKLAD
   ===================================================================== */
body.panel{display:flex;min-height:100vh}

.menu{
  width:var(--menu);flex-shrink:0;background:var(--panel);
  border-right:1px solid var(--linia);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.menu-gora{padding:20px 18px;border-bottom:1px solid var(--linia)}
.menu-gora .marka{margin-bottom:2px}
.menu-kto{font-size:14px;font-weight:600}
.menu-rola{font-size:12px;color:var(--slaby)}

.menu nav{padding:10px 0;flex:1}
.menu a{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;color:var(--przyg);font-size:14.5px;
  border-left:2px solid transparent;cursor:pointer;
  transition:background .12s,color .12s;
}
.menu a:hover{background:var(--panel2);color:var(--tekst)}
.menu a.on{
  background:var(--panel2);color:var(--akcent);
  border-left-color:var(--akcent);font-weight:500;
}
.menu-dol{padding:14px 18px;border-top:1px solid var(--linia)}
.menu-dol button{
  width:100%;padding:9px;background:var(--panel2);color:var(--przyg);
  border:1px solid var(--linia);border-radius:var(--r2);
  font-size:13px;font-family:inherit;cursor:pointer;
}
.menu-dol button:hover{background:var(--linia);color:var(--tekst)}

.tresc{flex:1;min-width:0;padding:24px 28px 60px}
.naglowek{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.naglowek h1{font-size:21px;font-weight:600;flex:1}
.hamburger{
  display:none;width:38px;height:38px;background:var(--panel);
  border:1px solid var(--linia);border-radius:var(--r2);
  color:var(--tekst);font-size:18px;cursor:pointer;
}
.przelacznik{
  padding:7px 12px;background:var(--panel);border:1px solid var(--linia);
  border-radius:var(--r2);color:var(--slaby);font-size:12px;
  font-family:inherit;cursor:pointer;
}
.przelacznik:hover{color:var(--tekst)}

.zaslona{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;
}

/* --- tryb waski: hamburger --- */
@media(max-width:900px){
  .menu{
    position:fixed;left:0;top:0;z-index:50;
    transform:translateX(-100%);transition:transform .22s ease;
  }
  .menu.otwarte{transform:translateX(0)}
  .hamburger{display:block}
  .tresc{padding:18px 16px 60px}
  .zaslona.on{display:block}
}
/* --- wymuszony tryb waski na szerokim ekranie --- */
body.waski .menu{
  position:fixed;left:0;top:0;z-index:50;
  transform:translateX(-100%);transition:transform .22s ease;
}
body.waski .menu.otwarte{transform:translateX(0)}
body.waski .hamburger{display:block}
body.waski .zaslona.on{display:block}

/* =====================================================================
   KAFELKI I TABELE
   ===================================================================== */
.kafelki{
  display:grid;gap:12px;margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.kafel{
  background:var(--panel);border:1px solid var(--linia);
  border-radius:var(--r);padding:16px 18px;
}
.kafel .etykieta{
  font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--slaby);margin-bottom:6px;
}
.kafel .liczba{font-size:24px;font-weight:600;line-height:1.2}
.kafel .dopisek{font-size:12.5px;color:var(--przyg);margin-top:4px}
.kafel.ok .liczba{color:var(--akcent)}
.kafel.uwaga .liczba{color:var(--ostrzez)}
.kafel.zle .liczba{color:var(--blad)}

.sekcja{
  background:var(--panel);border:1px solid var(--linia);
  border-radius:var(--r);margin-bottom:20px;overflow:hidden;
}
.sekcja-gora{
  padding:15px 18px;border-bottom:1px solid var(--linia);
  display:flex;align-items:center;gap:12px;
}
.sekcja-gora h2{font-size:15.5px;font-weight:600;flex:1}
.sekcja-tresc{padding:18px}
.sekcja-tresc.bez{padding:0}

.tabela-owijka{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:11px 14px;font-weight:500;font-size:11.5px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--slaby);
  border-bottom:1px solid var(--linia);white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--linia)}
tr:last-child td{border-bottom:0}
tbody tr{cursor:default}
tbody tr.klik{cursor:pointer}
tbody tr.klik:hover{background:var(--panel2)}
td.liczba,th.liczba{text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
td.male{font-size:12.5px;color:var(--przyg)}

.znacznik{
  display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
}
.zn-ok{background:rgba(74,222,128,.12);color:var(--akcent)}
.zn-uwaga{background:rgba(251,191,36,.12);color:var(--ostrzez)}
.zn-zle{background:rgba(248,113,113,.12);color:var(--blad)}
.zn-info{background:rgba(96,165,250,.12);color:var(--info)}
.zn-szary{background:var(--panel2);color:var(--przyg)}

.plus{color:var(--akcent)}
.minus{color:var(--blad)}

.pusto{padding:34px 18px;text-align:center;color:var(--slaby);font-size:14px}
.laduje{padding:34px 18px;text-align:center;color:var(--slaby);font-size:14px}

/* =====================================================================
   FORMULARZE W PANELU
   ===================================================================== */
.pola{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pole label{display:block;font-size:12.5px;color:var(--przyg);margin-bottom:6px}
.pole input,.pole select,.pole textarea{
  width:100%;padding:10px 12px;background:var(--tlo);
  border:1px solid var(--linia);border-radius:var(--r2);
  color:var(--tekst);font-size:14.5px;font-family:inherit;
}
.pole input:focus,.pole select:focus{outline:none;border-color:var(--akcent)}
.przyciski{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.przyciski button{
  padding:10px 18px;background:var(--akcent);color:#08150c;border:0;
  border-radius:var(--r2);font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;
}
.przyciski button:hover{background:var(--akcent2)}
.przyciski button.drugi{
  background:var(--panel2);color:var(--tekst);border:1px solid var(--linia);
}
.przyciski button.drugi:hover{background:var(--linia)}
.przyciski button.zle{background:var(--blad);color:#1a0808}

pre.tekst{
  background:var(--tlo);border:1px solid var(--linia);border-radius:var(--r2);
  padding:15px;overflow-x:auto;font-size:13px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;color:var(--przyg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  max-height:520px;overflow-y:auto;
}
.linijka-tv{
  background:var(--tlo);border:1px solid var(--linia);border-radius:var(--r2);
  padding:11px 13px;font-family:ui-monospace,monospace;font-size:12.5px;
  word-break:break-all;color:var(--akcent);cursor:pointer;
}
.linijka-tv:hover{border-color:var(--akcent)}

/* =====================================================================
   OKNO DIALOGOWE
   ===================================================================== */
.okno{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.7);padding:20px;
  align-items:center;justify-content:center;overflow-y:auto;
}
.okno.on{display:flex}
.okno-tresc{
  background:var(--panel);border:1px solid var(--linia);
  border-radius:var(--r);padding:24px;width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;
}
.okno-gora{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.okno-gora h2{font-size:17px;font-weight:600;flex:1}
.okno-zamknij{
  background:none;border:0;color:var(--slaby);font-size:22px;
  cursor:pointer;line-height:1;padding:0 4px;
}
.okno-zamknij:hover{color:var(--tekst)}
.okno-szeroki .okno-tresc{max-width:920px}

/* =====================================================================
   ORIENTACJA POZIOMA NA MALYM EKRANIE

   Telefon w poziomie ma malo wysokosci, ale duzo szerokosci. Menu boczne
   zabieraloby polowe ekranu, wiec zostaje hamburger - za to tabele
   dostaja wiecej miejsca i mniej sie zawijaja.
   ===================================================================== */
@media (max-height:520px) and (orientation:landscape){
  .menu{
    position:fixed;left:0;top:0;z-index:50;
    transform:translateX(-100%);transition:transform .22s ease;
    width:200px;
  }
  .menu.otwarte{transform:translateX(0)}
  .hamburger{display:block}
  .zaslona.on{display:block}

  .tresc{padding:12px 14px 40px}
  .naglowek{margin-bottom:14px}
  .naglowek h1{font-size:17px}

  /* Wiecej kolumn w rzedzie - jest szerokosc, nie ma wysokosci */
  .kafelki{
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:8px;margin-bottom:14px;
  }
  .kafel{padding:10px 12px}
  .kafel .liczba{font-size:18px}
  .kafel .etykieta{font-size:10.5px;margin-bottom:3px}
  .kafel .dopisek{font-size:11.5px}

  .sekcja{margin-bottom:12px}
  .sekcja-gora{padding:10px 14px}
  .sekcja-gora h2{font-size:14px}
  .sekcja-tresc{padding:12px 14px}

  th{padding:7px 10px;font-size:10.5px}
  td{padding:7px 10px;font-size:12.5px}

  .okno{padding:10px}
  .okno-tresc{max-height:94vh;padding:16px}
  pre.tekst{max-height:60vh;font-size:12px}
}

/* Bardzo niski ekran - telefon w poziomie trzymany blisko */
@media (max-height:400px) and (orientation:landscape){
  .kafelki{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .kafel .liczba{font-size:16px}
  .tresc{padding:8px 12px 30px}
}

/* =====================================================================
   PRZEWODNIK - Jak to dziala

   Tekst do czytania, nie do skanowania wzrokiem. Szerszy odstep miedzy
   wierszami i ograniczona szerokosc kolumny - przy pelnej szerokosci
   ekranu oko gubi poczatek nastepnej linii.
   ===================================================================== */
.opis-tresc{
  font-size:14.5px;line-height:1.75;color:var(--przyg);
  max-width:70ch;
}
.opis-tresc p{margin-bottom:14px}
.opis-tresc p:last-child{margin-bottom:0}
.opis-tresc strong{color:var(--tekst);font-weight:600}
.opis-tresc ul{color:var(--przyg)}
.opis-tresc table{font-size:13.5px}
.opis-tresc table td{padding:7px 10px;border-bottom:1px solid var(--linia)}
.opis-tresc .male{font-size:13px;color:var(--slaby)}

/* Ikona sekcji nie moze sciskac tytulu przy waskim ekranie */
.sekcja-gora span{flex-shrink:0}