/* MOTYWY (2026-09-30): jasny „B” domyslnie (granatowy pasek menu, jasna
   tresc), ciemny grafitowy „C” na noc — przelacznik ☀/☾ w menu (nav.php),
   wybor pamieta przegladarka. Kolory sa znaczeniowe: strony uzywaja
   var(--...) zamiast wpisanych na sztywno — wtedy oba motywy dzialaja same. */
:root {
  --bg:        #f1f3f6;
  --card:      #ffffff;
  --card2:     #f5f7fa;
  --hover:     #eef2f7;
  --border:    #d5dbe4;
  --border2:   #e1e6ed;
  --text:      #14213a;
  --muted:     #5a667a;
  --muted2:    #5b6679;   /* kontrast ≥ 5,2 na tle (WCAG AA), 01.10 */
  --faint:     #626d80;   /* ≥ 4,7 */
  --heading:   #13294b;
  --hl:        #8a5a00;
  --gold:      #ffc440;
  --link:      #1f5fbf;
  --accent:    #13294b;
  --accent-txt:#ffffff;
  --accent-soft:#e6ecf5;
  --cta:       #e8a100;
  --cta-txt:   #1a1200;
  --nav-bg:    #13294b;
  --nav-txt:   #c9d4e6;
  --nav-hover: #ffffff;
  --nav-act-bg:#23406f;
  --nav-act:   #ffc440;
  --nav-brd:   #0e1f3a;
  --ok:        #1e7a45;
  --ok-bg:     #e6f4ec;
  --ok-brd:    #a9d8bc;
  --warn:      #8a5a00;
  --warn-bg:   #fff5dc;
  --warn-brd:  #efcf82;
  --err:       #b3261e;
  --err-bg:    #fdecea;
  --err-brd:   #f3b8b3;
  --err-solid: #b3261e;   /* wypelnienia z bialym tekstem: 6,5 */
  --route-solid:#c2188f;  /* 5,5 */
  --info-bg:   #e9f0fb;
  --info-brd:  #b6cbec;
  --route:     #c2188f;
  --input-bg:  #ffffff;
  --input-brd: #c3ccd8;
  --shadow:    0 6px 20px rgba(19,41,75,.14);
  --terrain:   #cdb68c;
  --vio:       #6b3fa0;
  --vio-bg:    #f1eafa;
  --vio-brd:   #cdb5ea;
  --green:     var(--ok-brd);
  --green-bg:  var(--ok-bg);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:        #1b2230;
  --card:      #222b3a;
  --card2:     #1b2230;
  --hover:     #28323f;
  --border:    #2f394b;
  --border2:   #2a3444;
  --text:      #e6ebf2;
  --muted:     #9aa6b8;
  --muted2:    #97a3b5;
  --faint:     #8d99ab;
  --heading:   #ffc440;
  --hl:        #ffc440;
  --link:      #6fb0f5;
  --accent:    #4d9cf0;
  --accent-txt:#0c1624;
  --accent-soft:#1d3350;
  --nav-bg:    #141a25;
  --nav-txt:   #aab6c8;
  --nav-act-bg:#26324a;
  --nav-brd:   #2c3647;
  --ok:        #5cc98a;
  --ok-bg:     #1d3a2b;
  --ok-brd:    #2f6b48;
  --warn:      #f2c14e;
  --warn-bg:   #3a3016;
  --warn-brd:  #6e5a24;
  --err:       #ff7a75;
  --err-bg:    #3a1d22;
  --err-brd:   #6b2a2d;
  --err-solid: #c0392b;   /* 5,4 z bialym */
  --route-solid:#b4208f;  /* 5,9 z bialym */
  --info-bg:   #1d3350;
  --info-brd:  #2f5687;
  --route:     #e04ab8;
  --input-bg:  #1b2230;
  --input-brd: #3a4659;
  --shadow:    0 8px 24px rgba(0,0,0,.35);
  --terrain:   #6b4f2a;
  --vio:       #c792ea;
  --vio-bg:    #21162b;
  --vio-brd:   #5b3f75;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* SZEROKOSC TRESCI. Bylo 1100 px na stale — na monitorze 1920 zostawalo
   ponad 800 px pustego tla po bokach, a strona z tabelami, horyzontami i
   mapa ma co robic z miejscem. min() trzyma margines na szerokich ekranach
   i nie rozjezdza sie na waskich.
   Strony do CZYTANIA nie sa tym objete: .page.narrow zostaje 520 px, a
   karta przyrzadu ma wlasne .karta { max-width: 780px } (przyrzad.php). */
.page { max-width: min(1680px, 94vw); margin: 0 auto; padding: 20px 20px 60px; }
.page.narrow { max-width: 520px; }

h1 { color: var(--heading); font-size: 22px; margin: 20px 0 6px; }
h1 .sub { color: var(--muted); font-size: 13px; font-weight: 400; display:block; margin-top:2px; }

/* ---------- pasek nawigacji ---------- */
.topnav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-brd);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topnav-inner {
  max-width: min(1680px, 94vw);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.topnav-brand { color: var(--gold); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.topnav-links { display: flex; gap: 4px; }
.topnav-links a {
  color: var(--nav-txt);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
}
.topnav-links a:hover { color: var(--nav-hover); background: var(--nav-act-bg); text-decoration: none; }
.topnav-links a.active { color: var(--nav-act); background: var(--nav-act-bg); }
.topnav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nav-hover);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

@media (max-width: 640px) {
  .topnav-toggle { display: block; }
  .topnav-links {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-brd);
    flex-direction: column;
    padding: 8px;
    gap: 2px;
  }
  .topnav-links.open { display: flex; }
  .topnav-links a { padding: 12px 14px; border-radius: 4px; }
  .page { padding: 16px 14px 40px; }
}

/* ---------- tabele responsywne ---------- */
/* Wiersz nad tabela, ktory mowi, co wlasnie widac, i pozwala to zmienic.
   Stoi miedzy podsumowaniem a tabela, zeby nikt nie szukal brakujacych
   zapisow — one nie znikly, tylko sa schowane. */
.filtr { color: var(--muted2); font-size: 12px; margin: 10px 0 2px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border2); vertical-align: middle; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: var(--hover); }

/* ---------- karty / pola ---------- */
.card { background: var(--card); border: 1px solid var(--border2); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.empty { color: var(--faint); padding: 40px 0; text-align: center; }

.summary { display: flex; gap: 24px; background: var(--card); border: 1px solid var(--border2); border-radius: 8px; padding: 14px 20px; margin-top: 16px; flex-wrap: wrap; }
.summary div { min-width: 100px; }
.summary .label { color: var(--muted2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.summary .value { color: var(--hl); font-size: 20px; font-weight: 600; }

.msg { background: var(--ok-bg); border: 1px solid var(--ok-brd); color: var(--text); padding: 12px; border-radius: 6px; margin-bottom: 16px; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-brd); color: var(--warn); padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }

/* ---------- formularze ---------- */
label.field { display: block; margin: 14px 0; font-size: 15px; }
label.field .hint { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0 26px; }
input[type=checkbox] { margin-right: 8px; }
select {
  background: var(--input-bg); color: var(--text); border: 1px solid var(--input-brd);
  border-radius: 4px; padding: 6px;
}
button.primary {
  background: var(--cta); color: var(--cta-txt); border: none; border-radius: 6px;
  padding: 10px 22px; font-weight: 600; cursor: pointer; font-size: 15px; margin-top: 20px;
}

/* Czytelne nazwy lotow (patrz nazwy.php) — nazwa duzo, opis mniej, nazwa
   pliku najmniej. Plik zostaje widoczny, bo to on jest kluczem w bazie i
   na urzadzeniu, a tez jedyne miejsce z godzina z zegara Pi. */
.nazwa-lotu  { font-weight: 600; font-size: 15px; }
.nazwa-opis  { color: var(--muted, #9a9a9a); font-size: 12px; margin-top: 2px; }
.nazwa-plik  { color: var(--faint); font-size: 11px; margin-top: 1px;
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Loty maja odrozniac sie od kolowan i prob naziemnych. Na liscie 26
   zapisow lotow jest szesc — bez wyroznienia gina miedzy wpisami z
   hangaru, a to wlasnie one sa tym, co warto pokazac. */
tr.wiersz-lot td:first-child { color: var(--hl); font-weight: 600; }
tr.wiersz-lot .nazwa-lotu    { color: var(--text); }
tr.wiersz-kolowanie .nazwa-lotu,
tr.wiersz-naziemny .nazwa-lotu { color: var(--muted); font-weight: 500; }
tr.wiersz-kolowanie td,
tr.wiersz-naziemny  td { color: var(--muted2); }
/* Liczby w kolumnach wyrownane do tej samej szerokosci cyfry — inaczej
   kolumna "Predkosc" skacze w poziomie od wiersza do wiersza. */
td { font-variant-numeric: tabular-nums; }

/* Zwiniety blok opisu metod na stronie lotu. */
details.metody > summary {
  cursor: pointer; color: var(--muted); font-size: 13px;
  list-style: none; padding: 2px 0;
}
details.metody > summary::-webkit-details-marker { display: none; }
details.metody > summary::before { content: "▸ "; color: var(--hl); }
details.metody[open] > summary::before { content: "▾ "; }
details.metody > summary:hover { color: var(--text); }
details.metody[open] > summary { margin-bottom: 12px; color: var(--hl); }

/* TELEFON — wieksze napisy na pozostalych stronach (2026-10-02); pola 16 px,
   bo iOS przy mniejszych sam przybliza strone po dotknieciu pola */
@media screen and (max-width: 640px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px !important; }
  th { font-size: 13px; } td { font-size: 15px; }
  h1 .sub, .filtr, .nazwa-opis, label.field .hint { font-size: 14px; }
  .nazwa-lotu { font-size: 16px; } .nazwa-plik { font-size: 12.5px; }
  .summary .label { font-size: 12.5px; } .warn { font-size: 15px; }
  th, th.num { font-size: 13px !important; } .male, .zrodlo, .metar-tytul { font-size: 13.5px !important; }
  dd sub, sub { font-size: 13px; } .uwaga-lotu, .metar-surowy, .metar-uwaga { font-size: 14px !important; }
  .nazwa-plik, .metar-wiek, .summary .label, .label { font-size: 13px !important; }
  .znak, .meta code, .loty .tyt { font-size: 13px !important; }
}