/* =========================
   ZMIENNE / MOTYW
========================= */
:root {
  --ruch-main:   #0050b5;
  --ruch-accent: #00337a;
  --widzew-main: #c00000;
  --widzew-accent:#900000;
  --wisla-main:  #0062b1;
  --wisla-accent:#003b6f;

  /* aktywny motyw (domyślnie Ruch; nadpisują body.*) */
  --theme-main:   var(--ruch-main);
  --theme-accent: var(--ruch-accent);

  --white: #fff;
  --gray-bg: #eef4fb;
  --text: #222;
  --muted: #184e91;

  --card-shadow: 0 4px 16px #0001;
  --radius: 14px;
  --nav-radius: 8px;
  --main-font: 'Segoe UI', Arial, sans-serif;
}

/* Przełączanie klubów = tylko zmiana zmiennych */
body.ruch  { --theme-main: var(--ruch-main);   --theme-accent: var(--ruch-accent); }
body.widzew{ --theme-main: var(--widzew-main); --theme-accent: var(--widzew-accent); }
body.wisla { --theme-main: var(--wisla-main);  --theme-accent: var(--wisla-accent); }

/* =========================
   LAYOUT / BODY
========================= */
html, body { min-height:100vh; height:100%; margin:0; padding:0; }
body{
  font-family:var(--main-font);
  background:var(--gray-bg);
  display:flex; flex-direction:column;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  width:100%;
  color:var(--white);
  background:var(--theme-main);
  padding:10px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-sizing:border-box; z-index:10;
}
.nav-left{ display:flex; gap:18px; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.navbar a{
  color:var(--white);
  font-weight:700;
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--nav-radius);
  transition:background .2s, filter .2s;
  display:block;
  line-height:1.1;
}
.navbar a.active,
.navbar a:hover{ background:var(--theme-accent); }

/* FB badge */
.navbar a.fb{
  display:inline-flex; align-items:center; gap:8px;
  background:#1877F2; color:#fff; padding:6px 12px; border-radius:999px;
  font-weight:600; text-decoration:none;
}
.navbar a.fb:hover{ filter:brightness(1.06); }
.navbar a.fb svg{ width:16px; height:16px; fill:#fff; display:block; }

/* Fallback – gdy ktoś nie używa .nav-right */
.navbar > a.fb{ margin-left:auto; }
.navbar a.logout{ margin-left:0; }

/* =========================
   NAGŁÓWKI
========================= */
h1,h2,h3,h4,h5{
  text-align:center; color:var(--muted);
  margin:0 0 15px 0; font-weight:800; letter-spacing:.5px;
}
h2{ font-size:25px; }
h3{ font-size:21px; }

/* =========================
   KONTENERY / KARTY
========================= */
.main-container,.centered-container{
  max-width:900px; width:100%;
  margin:40px auto 0; background:#fff;
  border-radius:var(--radius); box-shadow:var(--card-shadow);
  padding:32px 24px 28px; text-align:center; min-width:320px; flex:1 0 auto;
}
.centered-container{ max-width:550px; }

.card{ background:#fff; border-radius:13px; box-shadow:0 2px 12px #0050b525; }
.card > .card-body{ padding:16px; }

/* =========================
   SEKCJA WYJAZDY – PODSUMOWANIE
========================= */
.moje-wyjazdy-header,.wyjazdy-header{
  text-align:center; margin:34px auto 15px; font-size:1.18em; font-weight:600;
  color:var(--muted); display:flex; justify-content:center; align-items:flex-end;
  gap:14px; flex-wrap:wrap; letter-spacing:.5px;
}
.wyjazdy-count{ font-size:2.2em; font-weight:900; color:var(--theme-main); margin:0 7px 0 3px; line-height:1; }
.wyjazdy-km{ font-size:2em; font-weight:900; color:#208724; margin:0 2px 0 5px; line-height:1; }
.wyjazdy-label{ font-size:1em; color:var(--muted); }

/* =========================
   TABELE
========================= */
.table-holder{ width:100%; overflow-x:auto; margin:0 auto; display:flex; justify-content:center; }
.table-holder table{
  border-collapse:collapse; margin:0 0 24px;
  background:#fff; border-radius:13px; overflow:hidden;
  box-shadow:0 2px 12px #0050b525;
  font-size:15.5px; width:auto; min-width:420px; max-width:860px; table-layout:auto;
}
.table-holder th,.table-holder td{
  padding:9px 13px; border:1px solid #dde2ec; text-align:center; white-space:nowrap;
}
.table-holder th{
  background:var(--theme-main); color:#fff; font-weight:700; font-size:16px;
}
.table-holder tr:nth-child(even){ background:#f5f8fc; }
.table-holder tr:hover{ background:#e1e6ff44; }

/* =========================
   WYBÓR DRUŻYNY
========================= */
.teams-choose{ display:flex; justify-content:center; gap:34px; margin-bottom:30px; flex-wrap:wrap; }
.team-logo-choose{ height:68px; margin-bottom:6px; transition:transform .12s; cursor:pointer; }
.team-logo-choose:hover{ transform:scale(1.08) rotate(-3deg); }
.team-name{ display:block; margin-top:5px; font-weight:bold; font-size:16px; color:var(--text); }

/* =========================
   PRZYCISKI
========================= */
.button{
  padding:10px 32px; background:var(--theme-main); color:#fff; font-weight:600;
  border-radius:9px; border:none; font-size:17px; cursor:pointer;
  box-shadow:0 4px 14px #184e9131; margin-top:10px; text-decoration:none;
  transition:background .13s, filter .13s;
  display:inline-block;
}
.button:hover{ background:var(--theme-accent); }

/* =========================
   TEKST KART
========================= */
.card-text{ font-size:15px; color:#2a2e33; margin:18px 0 4px; }

/* =========================
   PAGINACJA
========================= */
.pagination{
  margin:18px 0 8px; text-align:center; display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
}
.pagination a,.pagination span{
  padding:7px 16px; color:var(--theme-main); font-weight:700; text-decoration:none;
  border-radius:8px; border:1px solid color-mix(in srgb, var(--theme-main) 20%, transparent);
  background:#f7fafd; transition:background .13s, color .13s;
  font-size:1.04em; margin:0 2px; cursor:pointer; display:inline-block;
}
.pagination .active{ background:var(--theme-main); color:#fff; pointer-events:none; }
.pagination a:hover:not(.active){ background:var(--theme-accent); color:#fff; }

/* =========================
   STOPKA
========================= */
.footer{
  margin-top:auto; width:100%; background:var(--theme-main); color:#fff; text-align:center;
  padding:17px 0 13px; font-size:1.08em; border-top:2px solid var(--theme-accent);
  box-shadow:0 -2px 10px #00337a11; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.footer > div{ width:100%; max-width:700px; margin:0 auto; }
.footer a{ color:#fff; text-decoration:underline; font-weight:600; }
.footer a:hover{ color:#ffd700; }

/* =========================
   TOP WYJAZDY – KARTY
========================= */
.topwyjazdy-row{
  display:flex; gap:32px; justify-content:center; align-items:flex-start; margin:0 auto; flex-wrap:wrap;
}
.topwyjazdy-col{
  background:#fff; border-radius:16px; box-shadow:0 4px 18px #0050b522;
  padding:16px 10px; min-width:340px; max-width:360px; width:100%; margin-bottom:30px;
  display:flex; flex-direction:column; align-items:center;
}
.topwyjazdy-club{
  font-size:1.18em; font-weight:800; text-align:center; letter-spacing:.5px; margin-bottom:9px;
}
.topwyjazdy-col table{ width:100%; min-width:300px; max-width:350px; table-layout:fixed; }
.topwyjazdy-col th,.topwyjazdy-col td{ padding:7px 5px; font-size:14px; word-break:break-word; text-align:center; }
.topwyjazdy-col th{ font-size:15px; }
.topwyjazdy-col th:nth-child(1), .topwyjazdy-col td:nth-child(1){ width:25px; max-width:30px; }
.topwyjazdy-col th:nth-child(2), .topwyjazdy-col td:nth-child(2){ width:70px; max-width:75px; }
.topwyjazdy-col th:nth-child(4), .topwyjazdy-col td:nth-child(4),
.topwyjazdy-col th:nth-child(5), .topwyjazdy-col td:nth-child(5){ width:48px; max-width:60px; }

/* =========================
   RESPONSYWNOŚĆ
========================= */
@media (max-width:1000px){
  .main-container{ max-width:99vw; padding:17px 2vw; }
}
@media (max-width:900px){
  .table-holder table{ max-width:99vw; min-width:340px; font-size:15px; }
  .table-holder th,.table-holder td{ padding:8px 6px; font-size:14.3px; }
  .moje-wyjazdy-header,.wyjazdy-header{ font-size:1em; gap:7px; }
  .wyjazdy-count,.wyjazdy-km{ font-size:1.25em; }
}
@media (max-width:800px){
  .navbar{ gap:8px; font-size:15px; }
  .navbar a{ padding:6px 10px; }
  .main-container{ margin:20px 1vw; min-width:unset; }
  .team-logo-choose{ height:48px; }
  .teams-choose{ gap:16px; }
  table{ font-size:15px; }
}
@media (max-width:700px){
  .wyjazdy-header,.moje-wyjazdy-header{ font-size:1em; gap:7px; }
  .wyjazdy-count,.wyjazdy-km{ font-size:1.3em; }
}
@media (max-width:500px){
  .table-holder table{ max-width:100vw; min-width:290px; font-size:13.7px; }
  .table-holder th,.table-holder td{ padding:7px 4px; font-size:13px; }
  .main-container{ padding:10px 1vw; }
  .teams-choose{ flex-direction:column; gap:12px; }
  .footer > div{ max-width:98vw; }
}

/* Legacy: gdy menu jest w <ul class="menu"><li><a>… */
.navbar .menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.navbar .menu>li{display:block}
.navbar .menu a{padding:8px 14px;border-radius:var(--nav-radius)}

/* ====== NAV: hamburger ====== */
.nav-toggle{
  display:none; border:0; background:transparent; color:#fff; font-size:22px;
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
.nav-toggle:focus{ outline:2px solid #fff5; }

.desktop-only{ display:inline-flex; }
.mobile-only{ display:none; }

@media (max-width: 820px){
  .nav-toggle{ display:inline-block; }
  .nav-left{
    position:fixed; left:0; right:0; top:56px; /* wysokość paska */
    background:var(--theme-main);
    flex-direction:column; gap:8px; padding:12px 16px;
    transform:translateY(-120%); transition:transform .2s ease-out;
    box-shadow:0 10px 20px #0003;
    z-index: 50;
  }
  .nav-left.open{ transform:translateY(0); }
  .nav-right .fb, .nav-right .donate{ display:none; }       /* ukryj w prawym rogu */
  .mobile-only{ display:inline-flex; } .desktop-only{ display:none; }
  .navbar{ position:sticky; top:0; }
}

/* ====== Formy – wygodne na tel. (bez zoomu i z pełną szerokością) ====== */
@media (max-width: 640px){
  .main-container{ text-align:left; }
  .main-container form input,
  .main-container form select,
  .main-container form textarea{
    width:100% !important; max-width:100% !important; box-sizing:border-box;
    font-size:16px; /* iOS nie będzie zoomował */
  }
  .button{ width:100%; text-align:center; }
}

/* ====== Tabele – lepsze na małym ekranie ====== */
@media (max-width: 640px){
  .table-holder table{ min-width: 100%; width: 100%; font-size:14px; }
  .table-holder th, .table-holder td{ white-space: normal; padding:8px 8px; }
  .table-holder thead th{ position: sticky; top: 56px; z-index: 1; } /* nagłówek trzyma się na górze */
}

/* drobne – FB/Donate wyglądają dobrze także w menu mobilnym */
.navbar a.donate{
  display:inline-flex;align-items:center;gap:8px;
  background:#f59e0b;color:#111;padding:6px 12px;border-radius:999px;
  font-weight:700;text-decoration:none;line-height:1
}
.navbar a.donate:hover{filter:brightness(0.95)}

/* hamburger / mobile menu */
.nav-toggle{display:none;border:0;background:transparent;color:#fff;font-size:22px;padding:6px 8px;border-radius:8px;cursor:pointer}
.nav-toggle:focus{outline:2px solid #fff5}
.desktop-only{display:inline-flex}
.mobile-only{display:none}

@media (max-width:820px){
  .nav-toggle{display:inline-block}
  .nav-left{
    position:fixed; left:0; right:0; top:56px;
    background:var(--theme-main);
    flex-direction:column; gap:8px; padding:12px 16px;
    transform:translateY(-120%); transition:transform .2s ease-out;
    box-shadow:0 10px 20px #0003; z-index:50;
  }
  .nav-left.open{transform:translateY(0)}
  .nav-right .fb, .nav-right .donate{display:none}
  .mobile-only{display:inline-flex}
  .desktop-only{display:none}
  .navbar{position:sticky; top:0}
}


/* ==== NAV MOBILE – pewny off-canvas ==== */
@media (max-width:820px){
  .navbar{position:sticky; top:0; z-index:1000}

  /* zamknięte: schowane, nie łapie klików */
  .nav-left{
    position:fixed; left:0; right:0; top:56px;
    max-height:calc(100vh - 56px);
    overflow:auto;
    background:var(--theme-main);
    flex-direction:column; gap:8px; padding:12px 16px;
    transform:translateY(-120%);
    transition:transform .2s ease-out;
    box-shadow:0 10px 20px #0003;
    z-index:1050;
    pointer-events:none;
  }
  /* otwarte: zjeżdża i działa */
  .nav-left.open{
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav-toggle{display:inline-block}
  .nav-right .fb, .nav-right .donate{display:none}
  .mobile-only{display:inline-flex}
  .desktop-only{display:none}

  /* blokada scrolla tła gdy menu otwarte */
  body.menu-open{overflow:hidden}
}

/* De-dupe: wymuś widoczność odpowiednich pozycji */
.navbar .mobile-only { display: none !important; }
.navbar .desktop-only { display: inline-flex !important; }

@media (max-width: 820px){
  .navbar .mobile-only { display: inline-flex !important; }
  .navbar .desktop-only { display: none !important; }
}

.cf-turnstile{ margin:10px 0 6px; }
@media (max-width:640px){
  input, select, textarea { font-size:16px; } /* bez zoomu na iOS */
}