/* OSK Expert — ciemny motyw, ta sama paleta co aplikacja desktopowa */
:root{
  --bg:#161b22; --card:#1f262f; --card-hi:#262f3a; --line:#333d4b;
  --text:#e3e8ef; --muted:#93a0b1;
  --accent:#5b8bd8; --accent-dark:#3f6cb4;
  --ok:#2f5d3f; --warn:#6b5520; --bad:#7a3b2c; --busy:#8a5a2b;
  --text-ok:#8fd0a3; --text-bad:#e8837f; --text-warn:#e8b563;
  --radius:8px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1220px;margin:0 auto;padding:18px 16px 40px}
h1{font-size:1.5rem;margin:0 0 .3rem}
h2{font-size:1.12rem;margin:0 0 .6rem;color:var(--accent)}
h3{font-size:1rem;margin:1.2rem 0 .4rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--card-hi);padding:.1rem .4rem;border-radius:4px}

/* nagłówek */
.top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:.6rem 1rem}
.brand{font-weight:600;font-size:1.05rem;color:var(--text)}
.top nav{display:flex;gap:.35rem;flex-wrap:wrap;flex:1}
.top nav a{padding:.35rem .7rem;border-radius:6px;color:var(--muted)}
.top nav a:hover{background:var(--card-hi);color:var(--text);text-decoration:none}
.who{display:flex;align-items:center;gap:.6rem}

/* karty i układ */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:14px}
.card.warn{border-color:var(--text-warn)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.stack{display:flex;flex-direction:column}
.centre{display:flex;justify-content:center;padding-top:6vh}
.narrow{width:min(420px,94vw)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;text-align:center;color:var(--muted);font-size:.85rem}
.tile .n{display:block;font-size:1.5rem;font-weight:600;color:var(--text)}

/* formularze */
label{display:block;margin:.5rem 0;font-size:.9rem;color:var(--muted)}
input,select,textarea{width:100%;margin-top:.2rem;padding:.45rem .6rem;
  background:var(--card-hi);color:var(--text);
  border:1px solid var(--line);border-radius:6px;font:inherit}
input:focus,select:focus{outline:none;border-color:var(--accent)}
input[type=checkbox]{width:auto;margin:0}
.row{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.row label{margin:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.4rem 1rem;align-items:end}
.form-grid button{grid-column:1/-1;justify-self:start}
.tickline{display:flex;align-items:center;gap:.45rem;color:var(--text)}
fieldset.cats{border:1px solid var(--line);border-radius:6px;padding:.5rem .8rem}
fieldset.cats legend{color:var(--muted);font-size:.85rem;padding:0 .3rem}
.inline{display:inline-flex;gap:.3rem;align-items:center;margin:0}

/* przyciski */
.btn{display:inline-block;background:var(--card-hi);color:var(--text);
  border:1px solid var(--line);border-radius:6px;padding:.42rem .9rem;
  font:inherit;cursor:pointer}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn.accent{background:var(--accent-dark);border-color:var(--accent-dark);
  color:#fff;font-weight:600}
.btn.accent:hover{background:var(--accent)}
.btn.small{padding:.22rem .55rem;font-size:.82rem}
.btn.wide{width:100%;margin-top:.6rem}
.btn:disabled{opacity:.55;cursor:default}

/* tabele */
table{width:100%;border-collapse:collapse;font-size:.9rem}
.list th{background:var(--card-hi);color:var(--accent);text-align:left;
  padding:.45rem .55rem;border-bottom:1px solid var(--line);white-space:nowrap}
.list td{padding:.38rem .55rem;border-bottom:1px solid #2c3540;vertical-align:middle}
.list tr:hover td{background:#232b35}
.past td,.hidden-row td{color:var(--muted)}
.ok-row td{background:var(--ok)}
.bad-row td{background:var(--bad)}

/* siatka dyspozycyjności */
/* Siatka dyspozycyjności.
   Kolor zaznaczenia siedzi na <span> wewnątrz etykiety, a nie na <td>, bo
   klasę <td> ustawia serwer i po kliknięciu nic by się nie zmieniło — pole
   przełączało się „w ciszy” i wyglądało na nieklikalne. */
.gridwrap{overflow-x:auto;padding-bottom:.4rem}
.grid{border-collapse:collapse;margin-bottom:.8rem}
.grid th{background:var(--card-hi);color:var(--accent);padding:.3rem .35rem;
  font-size:.8rem;border:1px solid var(--line)}
.grid td{border:1px solid #2c3540;text-align:center;padding:0;height:28px;width:64px}
.grid th.hour{color:var(--muted);font-weight:400;white-space:nowrap}
.grid td.busy{background:var(--busy);font-size:.75rem;color:#fff}
.tick{display:block;margin:0;cursor:pointer;height:28px;position:relative}
.tick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tick span{position:absolute;inset:2px;border-radius:4px;
  border:1px solid transparent;background:transparent;transition:background .08s}
.tick:hover span{background:#2c3540}
.tick input:checked+span{background:var(--ok);border-color:var(--ok)}
.tick input:checked+span::after{content:"";position:absolute;inset:0;
  background:no-repeat center/9px 9px}
.tick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}

/* pasek zapisu — zawsze pod ręką, także przy długiej siatce */
.savebar{position:sticky;bottom:0;background:var(--card);padding:.6rem 0 .2rem;
  border-top:1px solid var(--line);display:flex;gap:.6rem;align-items:center;
  flex-wrap:wrap}
.gridtools{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}

/* komunikaty */
.flash{padding:.55rem .8rem;border-radius:6px;margin:0 0 .8rem}
.flash.ok{background:var(--ok);color:#eaf6ee}
.flash.bad{background:var(--bad);color:#fdeceb}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}
.hours{background:var(--card-hi);border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem .7rem;margin:.6rem 0 0}
details summary{cursor:pointer;color:var(--accent);margin-bottom:.5rem}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:1.4rem}

@media (max-width:720px){
  .grid td{width:auto}
  .top nav{width:100%;order:3}
}

/* ---------------------------------------------------------------------------
   Telefon. Kursant i instruktor korzystają z aplikacji głównie z telefonu,
   biuro z komputera — więc pod telefon dopasowujemy panel osoby, a nie tabele
   administratora.

   Zmierzone na 375 px przed poprawką: siatka miała 388 px przy 310 px miejsca
   (niedziela wypadała poza ekran i nikt jej nie widział), pole do kliknięcia
   28 px wysokości, a przyklejony pasek zapisu zasłaniał 84 px treści.
   --------------------------------------------------------------------------- */
@media (max-width:480px){
  body{padding:0}
  main{padding:10px}
  .card{padding:12px 10px;border-radius:10px}
  h1{font-size:1.35rem}

  /* Cała siatka ma się zmieścić bez przewijania w bok — na telefonie nikt
     nie odkryje, że tabelę da się przesunąć palcem. */
  .gridwrap{overflow-x:visible}
  .grid{width:100%;table-layout:fixed}
  .grid th{font-size:.6rem;padding:.25rem .05rem;line-height:1.15}
  .grid th.hour{font-size:.62rem;width:2.6rem;padding:0 .15rem}
  .grid td{width:auto;height:44px}          /* palec potrzebuje ~44 px */
  .tick{height:44px}
  .grid td.busy{font-size:.55rem;padding:0}

  /* Pasek zapisu w jednej linii, żeby nie zjadał 84 px ekranu. */
  .savebar{padding:.5rem 0;gap:.5rem;flex-wrap:nowrap}
  .savebar .btn{flex:1 1 auto}
  .savebar .muted{font-size:.75rem;white-space:nowrap}
  .gridtools .btn{flex:1 1 auto;text-align:center}

  /* iOS przybliża stronę przy wejściu w pole mniejsze niż 16 px. */
  input,select,textarea{font-size:16px}
  .btn{padding:.5rem .8rem}

  /* Tabele z jazdami: bez ściskania kolumn do jednego znaku. */
  .list{font-size:.82rem}
  .list th,.list td{padding:.35rem .3rem}
  .list td b{white-space:nowrap}      /* „WX 12345" nie łamie się na dwie linie */
  .cols{gap:10px}
}