/* Tmavý vizuální motiv ve stylu F1 (přesunuto do kořenového adresáře) */
:root{
  --bg:#0a0a0a; /* pozadí stránky */
  --surface:#0f0f12; /* povrch obsahu */
  --card:#0f1720; /* pozadí karty */
  --muted:#a6acb3;
  --text:#e6eef3;
  --accent:#d40000; /* červený akcent F1 */
  --progress:#ff7a6a; /* tlumená barva průběhu (ne CTA) */
  --glass: rgba(255,255,255,0.04);
}

html,body{height:100%}
body{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); display:flex; flex-direction:column}
:root{--page-padding:28px}
.container{max-width:1400px;padding-left:var(--page-padding);padding-right:var(--page-padding);margin:0 auto;width:100%}

/* Hlavička / Navigace */
.navbar-f1{background:#ffffff; border-bottom:1px solid rgba(0,0,0,0.06);}
.navbar-f1 .nav-link{color:#222; text-transform:uppercase; font-weight:600; letter-spacing:0.02em}
.navbar-f1 .nav-link:hover{color:var(--accent)}
.navbar-f1 .nav-link.active{color:var(--accent)}
.brand-logo{height:36px;width:auto;background:#fff;padding:6px;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.06)}

/* Hero sekce */
.hero{background:linear-gradient(90deg, rgba(18,18,20,0.7), rgba(10,10,12,0.7)); border-radius:8px; padding:40px; box-shadow:0 20px 50px rgba(0,0,0,0.6);}
.hero h1{font-weight:700; color:var(--text); font-size:2.1rem}
.hero p{color:var(--muted)}
.hero .btn-primary{background:var(--accent); border-color:transparent}
.hero .btn-outline-light{border-color:rgba(255,255,255,0.12); color:var(--text)}

/* Karty */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:0; border-radius:12px; color:var(--text); padding:18px}
.card .card-header{background:transparent;border-bottom:0;color:var(--muted);font-weight:700}
.card .card-body a{color:var(--accent)}
.card-hover{transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s;}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,0.6)}

/* Mřížka karet pro responzivní vícesloupcové rozvržení */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;margin-top:14px}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:18px;align-items:stretch;margin-top:14px}

/* Tablet: 2 sloupce, třetí karta přes celou šířku dole (vyvážené rozvržení) */
@media (max-width:1100px){
  .dashboard-stats{grid-template-columns:repeat(2,1fr)}
  .dashboard-stats > *:nth-child(3){grid-column:1 / -1}
}

/* Mobil: jeden sloupec */
@media (max-width:600px){
  .dashboard-stats{grid-template-columns:1fr}
  .dashboard-stats > *:nth-child(3){grid-column:auto}
}
.card-grid .card{padding:14px}
.small-muted{color:var(--muted);font-size:0.95rem}

/* Tabulky a seznamy */
.table thead th{border-bottom:0;color:var(--muted);font-weight:700}
.table tbody tr{background:transparent;color:var(--text)}
.list-group-item{background:transparent;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--text)}

/* povrch tabulky ve stylu karty pro závody */
.data-table{width:100%;border-collapse:collapse;margin-top:8px}
.data-table thead th{background:rgba(255,255,255,0.02);padding:12px;text-align:left}
.data-table tbody td{padding:12px;border-top:1px solid rgba(255,255,255,0.03)}
.data-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.data-table .muted{color:var(--muted)}

/* Avatary */
.avatar{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.driver-name{display:flex;align-items:center;gap:12px}

/* logo týmu */
.team-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;background:transparent;padding:0}

/* mírně větší logo pro karty */
.card .team-logo{width:80px;height:80px}

/* Karta statistiky (domů) */
.stat-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 30px rgba(0,0,0,0.45);height:100%}
.stat-card > *{min-height:0}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat-left{display:flex;align-items:center;gap:12px}
.stat-icon{width:56px;height:56px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);font-size:1.4rem}

/* pomocník pro malé inline SVG ikony */
.icon-svg{width:18px;height:18px;vertical-align:middle;display:inline-block}
.stat-value{font-size:1.6rem;font-weight:800}
.stat-meta{color:var(--muted);font-size:0.9rem}
.stat-cta{display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700;color:var(--muted);border:1px solid transparent;transition:all .18s ease}
.stat-cta.primary{color:var(--accent);border:1px solid rgba(212,0,0,0.12);background:transparent}
.stat-cta.primary:hover{background:var(--accent);color:#fff}
.stat-link{color:var(--muted);text-decoration:none;font-weight:700}
.stat-link:hover{color:var(--accent)}

@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
}

@media (max-width:900px){
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
}

@media (max-width:600px){
  .stat-card{padding:12px}
  .stat-icon{width:48px;height:48px}
  .stat-value{font-size:1.3rem}
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
}

/* Pódium (domů) */
.podium{display:flex;gap:20px;align-items:flex-end;justify-content:center}
.podium .podium-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;align-items:center;min-width:120px}
.podium .pos-1{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,0.6)}
.podium .pos-2{transform:translateY(6px)}
.podium .pos-3{transform:translateY(12px)}
.podium .podium-rank{font-size:0.85rem;color:var(--muted);margin-bottom:8px}
.podium .podium-name{font-weight:800;margin-top:6px}
.podium .podium-team{color:var(--muted);font-size:0.9rem}

/* Mřížka pódia (týmy/jezdci): zvýraznění top 3 */
.podium-grid{display:flex;gap:18px;align-items:flex-end;justify-content:center;margin-bottom:18px}
.podium-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;min-width:160px}
.podium-card .team-logo{width:88px;height:88px}
.pos-1{transform:translateY(-18px);box-shadow:0 30px 60px rgba(0,0,0,0.6)}
.pos-2{transform:translateY(8px)}
.pos-3{transform:translateY(12px)}
.rank-badge{padding:6px 10px;border-radius:10px;font-weight:800;margin-bottom:8px;background:rgba(255,255,255,0.06)}
.pos-1 .rank-badge{background:linear-gradient(180deg,#ffd700,#e6b800);color:#111}
.pos-2 .rank-badge{background:linear-gradient(180deg,#c0c0c0,#9e9e9e);color:#111}
.pos-3 .rank-badge{background:linear-gradient(180deg,#b87333,#9a551a);color:#111}

/* Hodnocení týmů */
.team-rank-badge{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:8px;font-weight:800;color:var(--text)}

/* Zvýraznění top 3 karet (jemné, moderní) */
.card.highlight-top{border:1px solid rgba(212,0,0,0.35)}
.card.highlight-top:hover{box-shadow:0 36px 70px rgba(212,0,0,0.25)}

/* Zlaté / Stříbrné / Bronzové akcenty pro top 3 */
.card.highlight-gold{border:1px solid rgba(255,215,0,0.6);box-shadow:0 24px 50px rgba(255,215,0,0.15)}
.card.highlight-gold .team-rank-badge{background:linear-gradient(180deg,#ffd700,#e6b800);color:#111}
.card.highlight-silver{border:1px solid rgba(192,192,192,0.6);box-shadow:0 24px 50px rgba(192,192,192,0.15)}
.card.highlight-silver .team-rank-badge{background:linear-gradient(180deg,#c0c0c0,#9e9e9e);color:#111}
.card.highlight-bronze{border:1px solid rgba(184,115,51,0.6);box-shadow:0 24px 50px rgba(184,115,51,0.15)}
.card.highlight-bronze .team-rank-badge{background:linear-gradient(180deg,#b87333,#9a551a);color:#111}

/* Vylepšení karty závodu */
.race-card{position:relative}
.race-card .date-badge{display:inline-block;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.06);font-weight:800}
.race-card .status-upcoming{background:var(--accent);color:#fff}
.race-card .status-past{background:rgba(255,255,255,0.06);color:#ddd}

/* pruh nadcházejících událostí pod navigací */
.upcoming-strip{background:var(--card);border-bottom:1px solid rgba(255,255,255,0.02)}
.upcoming-strip .upcoming-link{background:transparent;color:var(--accent);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:8px}
.upcoming-strip .upcoming-link:hover{text-decoration:underline}

/* kompaktní/prázdný pruh nadcházejících událostí */
.upcoming-strip.empty{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.upcoming-strip.empty .container{padding:6px 0}
.upcoming-strip.empty .small-muted{color:var(--muted)}
.upcoming-strip.empty .upcoming-link{color:var(--muted);font-weight:700}


/* úpravy typografie */
.display-6{font-size:2rem;color:var(--text)}
h2{color:var(--text)}

/* zápatí */
footer{background:#060606;color:var(--muted);}

/* malé nástroje */
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* zajistit, aby se main roztáhl */
main{flex:1;padding-top:22px;padding-bottom:22px}

@media (max-width:767px){
  .hero h1{font-size:1.5rem}
}

/* volitelný obrázek pozadí hero sekce */
.hero.hero-image{background-size:cover;background-position:center;position:relative}
.hero.hero-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));border-radius:8px}
.hero > *{position:relative;z-index:2}

/* odpočet */
.countdown{display:flex;gap:12px;align-items:center}
.countdown .unit{background:rgba(255,255,255,0.03);padding:10px 14px;border-radius:8px;text-align:center}
.countdown .unit .num{font-weight:800;font-size:1.2rem}

/* odznak týmu */
.team-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700;color:#fff;font-size:.8rem}

/* vylepšené tabulky */
.table tbody tr:hover{background:rgba(255,255,255,0.02)}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,0.01)}
.table td, .table th{vertical-align:middle}

/* malý stín navigace při posouvání */
.navbar-shadow{box-shadow:0 6px 24px rgba(0,0,0,0.12)}

/* malý nástroj pro ikony */
.muted-icon{color:var(--muted);font-size:0.95rem}

/* Modální okno (jednoduché, znovupoužitelné) */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,10,0.6);display:flex;align-items:center;justify-content:center;z-index:1300}
.modal-panel{background:var(--surface);border-radius:12px;max-width:880px;width:calc(100% - 32px);padding:20px;box-shadow:0 30px 80px rgba(0,0,0,0.7);color:var(--text)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-close{background:transparent;border:0;color:var(--muted);font-weight:800;font-size:1.1rem;cursor:pointer;padding:6px 10px;border-radius:8px}
.modal-close:hover{background:rgba(255,255,255,0.02);color:var(--text)}
.modal-body{margin-top:12px}

@media (max-width:600px){
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
  .podium{gap:10px}
  .podium .podium-item{min-width:100px;padding:10px}
  .card{padding:12px}
  .card .team-logo{width:64px;height:64px}
  .avatar{width:64px;height:64px}
}

/* velikost avatara na pódiu (umožnit konzistentní, mírně menší avatary) */
.podium .avatar, .podium .podium-item .avatar, .podium-avatar{width:64px;height:64px;border-radius:12px}

/* jednoduchý hero banner použitý na domovské stránce */
.hero-banner{background:var(--card);border-radius:12px;padding:12px 18px 48px 18px;margin-bottom:24px}

/* zajistit, aby pódium sedělo pohodlně pod hero sekcí */
.podium-large{margin-top:12px}
/* přidat prostor pod pódiem na domovské stránce, aby se ho karty nedotýkaly */
.podium-large{margin-bottom:32px}
.hero-banner .hero-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0}
.hero-banner .hero-left{display:flex;gap:18px;align-items:center}
.hero-banner .hero-block{display:flex;flex-direction:column}
.hero-banner .hero-meta{font-size:0.9rem;color:var(--muted)}
.hero-banner .hero-title{font-weight:800;font-size:1.05rem}
.hero-banner .stat-cta{padding:8px 14px;border-radius:10px}

/* další závod v hero sekci */
.hero-next-race{margin-top:10px}
.hero-next-race .small-muted{font-size:0.9rem}
#hero-countdown{font-family:monospace;font-variant-numeric:tabular-nums}

/* větší varianta pódia pro domovskou stránku */
.podium-large{display:flex;gap:28px;align-items:flex-end;justify-content:center}
.podium-large .podium-item{min-width:180px;padding:20px;border-radius:14px}
.podium-large .podium-item .podium-name{font-size:1.15rem;font-weight:800}
.podium-large .podium-item .podium-team{font-size:0.95rem;color:var(--muted)}
.podium-large .podium-points{font-size:1.0rem;font-weight:700;color:rgba(255,255,255,0.95);margin-top:8px}
.podium-large .podium-item .podium-team{font-size:0.9rem;color:var(--muted);margin-top:6px}
.podium-large .podium-rank{font-size:0.95rem;color:var(--muted);margin-bottom:10px}
.podium-large .podium-avatar{width:96px;height:96px;border-radius:14px;font-size:1.6rem}
.podium-large .pos-1{transform:translateY(-18px)}
.podium-large .pos-2{transform:translateY(8px)}
.podium-large .pos-3{transform:translateY(18px)}
/* zvýraznit #1 na pódiu domovské stránky */
.podium-large .pos-1{box-shadow:0 40px 90px rgba(255,215,0,0.06);border:1px solid rgba(255,215,0,0.12)}

/* progress bar použitý v bočním panelu */
.progress-wrap{height:8px;background:rgba(255,255,255,0.04);border-radius:6px;overflow:hidden;margin-top:6px}
.progress-bar{height:100%;background:var(--progress);border-radius:6px;transition:width .5s ease}

/* dvousloupcové rozvržení domovské stránky */
.home-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;margin-top:6px}
.home-main{min-width:0}
.home-side{min-width:260px}

@media (max-width:1000px){
  .home-layout{grid-template-columns:1fr;}
  .home-side{order:2}
  .home-main{order:1}
  .podium-large .podium-avatar{width:96px;height:96px}
}

/* Vylepšení čitelnosti a UI filtrů */
/* Větší základní písmo a volnější řádkování pro čitelnost */
body{font-size:16px;line-height:1.48}

/* Mírně silnější povrch karty a jemný okraj pro oddělení */
.card{background:var(--surface);border:1px solid rgba(255,255,255,0.04);padding:20px}
.card .card-header{font-size:0.98rem;color:var(--muted);letter-spacing:0.01em}

/* Styly vstupů pro vyhledávání / filtrování použité na stránkách jezdců/týmů */
.search-input,.filter-input{width:100%;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:var(--text);font-size:0.98rem;outline:none;transition:box-shadow .18s ease,border-color .12s}
.search-input::placeholder,.filter-input::placeholder{color:rgba(230,238,243,0.48)}
.search-input:focus,.filter-input:focus{box-shadow:0 8px 30px rgba(0,0,0,0.55);border-color:rgba(212,0,0,0.36);background:rgba(255,255,255,0.02)}

/* Vynutit čitelné selecty a options na Windows/Chrome/Edge, kde může být vyskakovací okno světlé */
select.search-input,select.filter-input{background:var(--surface);color:var(--text);-webkit-appearance:none;appearance:none}
select.search-input option,select.filter-input option{background:var(--surface);color:var(--text)}
select.filter-input:focus,select.search-input:focus{background:var(--surface)}
/* záloha pro platformy, které respektují pseudo-elementy pro selecty */
select.filter-input::-ms-expand{display:none}
/* Zajistit vyšší kontrast placeholderu */
.search-input::placeholder{color:rgba(230,238,243,0.36)}

/* Lišta filtrů / čipy */
.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.filter-chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted);font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .14s ease}
.filter-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,0.045)}
.filter-chip.active{background:var(--accent);color:#fff;border-color:rgba(212,0,0,0.18);box-shadow:0 8px 26px rgba(212,0,0,0.08)}

/* Stav bez výsledků */
.no-results{padding:18px;text-align:center;color:var(--muted);background:rgba(255,255,255,0.015);border-radius:8px;margin-top:8px}

/* Mírně silnější kontrast hlavičky tabulky pro čitelnost */
.data-table thead th{background:rgba(255,255,255,0.03);color:var(--text);font-weight:700}

/* zviditelnit tlumený text pro tělo textu */
.muted{color:#98a0a6}

/* Zvětšit mezery v položkách seznamu, aby se předešlo vizuálnímu nepořádku */
.list-group-item{padding:14px 12px}

/* --- VYLEPŠENÍ PRO MOBILY (Pod 768px) --- */
@media (max-width: 768px) {
  /* Zmenšení okrajů stránky pro maximální využití prostoru na malém displeji */
  :root {
    --page-padding: 16px;
  }

  /* Zajištění, aby široké tabulky neprotékaly mimo obrazovku (lze je posouvat do stran) */
  .data-table, .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Filtry (vyhledávání, řazení) se naskládají pod sebe pro snadnější dotykové ovládání */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar > *, .filter-bar > label {
    width: 100%;
  }
  .filter-bar button {
    margin-left: 0 !important;
    margin-top: 8px;
  }

  /* Přeskládání hlavního pódia pod sebe (vítěz nahoře, pomocí flex order) */
  .podium-large { flex-direction: column; align-items: center; gap: 16px; }
  .podium-large .podium-item { width: 100%; max-width: 320px; }
  .podium-large .pos-1 { transform: translateY(0); order: 1; box-shadow: 0 10px 30px rgba(255,215,0,0.1); }
  .podium-large .pos-2 { transform: translateY(0); order: 2; }
  .podium-large .pos-3 { transform: translateY(0); order: 3; }
  
  /* Zarovnání domovského hero banneru */
  .hero-banner .hero-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-banner .hero-left { flex-direction: column; align-items: center; text-align: center; }
}
