/* ==========================================
   NAV + DROPDOWNY
   ========================================== */
nav{
  display:flex;
  gap:18px;
  background:#000;
  color:#fff;
  padding:10px 20px;
  position:relative;
  font-family:sans-serif;
}
.nav-item{ position:relative; cursor:pointer; }
.nav-main{ display:flex; align-items:center; gap:5px; }
.arrow{ font-size:.7em; transition:transform .2s ease; }

.constructor-img{
  width:180px;
}

#lang-menu{
  z-index: 5000;
}
.dropdown{
  position:absolute; top:100%; left:0;
  background:#111; border:1px solid color-mix(in srgb, var(--team-primary) 55%, #900);
  display:none; flex-direction:column;
  min-width:180px; z-index:1000;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.dropdown a{ padding:8px 15px; color:#fff; text-decoration:none; display:block; font-size:.9em; }
.dropdown a:hover{ background:color-mix(in srgb, var(--team-primary) 74%, #111); }

.dropdown-item{ padding:8px 14px; cursor:pointer; color:#ddd; }
.dropdown-item:hover{ background:var(--accent); color:#fff; }
.dropdown-item.selected{ font-weight:700; color:var(--accent); }
.dropdown-item.active-season{ font-weight:700; }

.lang-switch{ position:relative; margin-left:auto; }
.lang-switch button{
  background:transparent; border:1px solid red; color:#fff;
  padding:5px 10px; cursor:pointer; border-radius:5px;
}
.lang-switch ul{
  list-style:none; margin:0; padding:5px 0;
  position:absolute; top:40px; right:0;
  background:#111; border:1px solid red; border-radius:5px;
  display:none; min-width:120px;
}
.lang-switch ul li{ padding:8px 10px; cursor:pointer; }
.lang-switch ul li:hover{ background:red; }
.lang-switch.open ul{ display:block; animation:fadeIn .2s ease-in-out; z-index:1000; }

.brightness50Proc{ filter:brightness(50%); }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:translateY(0)} }

/* ==========================================
   GLOBAL
   ========================================== */
:root{
  --bg:#0d0d0d; --panel:#141414; --muted:#0f0f0f; --accent:#e10600;
  --card:#1a1a1a; --editTypesGP:#757c36; --editTypesSprint:#2d0363; --addTypesSprint:#6363e5;
  --team-primary:var(--accent); --team-secondary:#fff; --team-dark:#111;
}
*{ box-sizing:border-box }
body{
  margin:0; background:var(--bg); color:#fff;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial;
}

/* ==========================================
   HEADER
   ========================================== */
header{
  padding:22px 34px; background:#0b0b0b; border-bottom:3px solid var(--accent);
  display:flex; align-items:center; justify-content:space-between;
}
header.has-team-accent{
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--team-primary) 22%, transparent), transparent 34%),
    #0b0b0b;
  border-bottom-color:color-mix(in srgb, var(--team-primary) 68%, var(--accent));
}
header > nav{
  gap:12px;
  padding:9px 14px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--team-primary) 7%, rgba(255,255,255,.025)) 0%,
      rgba(255,255,255,.018) 48%,
      rgba(0,0,0,.08) 100%);
  border:1px solid color-mix(in srgb, var(--team-primary) 15%, rgba(255,255,255,.07));
  border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 28px rgba(0,0,0,.12);
}
header > nav .nav-main{
  padding:6px 8px;
  border-radius:8px;
  transition:background-color .18s ease, color .18s ease;
}
header > nav .nav-item:hover .nav-main,
header > nav .nav-item.open .nav-main{
  background:color-mix(in srgb, var(--team-primary) 12%, rgba(255,255,255,.035));
}
.logo{ display:flex; gap:0; align-items:center; flex:0 0 auto; }
.logo svg{ height:44px; width:auto; display:block; }
.logo .title{ font-family:'Orbitron',sans-serif; color:var(--accent); letter-spacing:2px; font-weight:700; font-size:22px; white-space:nowrap; }

@media (min-width:769px){
  header > nav .nav-item,
  header > nav .nav-quick,
  header > nav .lang-switch{ flex:0 0 auto; }
  header > nav .lang-switch button{ white-space:nowrap; }
}

nav a{ color:#ddd; text-decoration:none; font-weight:500; }
nav a:hover{ color:var(--accent) }

/* ==========================================
   MAIN
   ========================================== */
main{
  padding:28px;
  display:grid; grid-template-columns:2fr 1fr; gap:22px;
}
.card{
  background:var(--card); padding:18px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--team-primary) 13%, transparent);
  box-shadow:0 6px 20px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--team-primary) 14%, transparent);
}
h2{ margin:0 0 12px; font-size:18px; border-left:4px solid var(--accent); padding-left:10px; }
h2{ border-left-color:color-mix(in srgb, var(--team-primary) 72%, var(--accent)); }

table{ width:100%; border-collapse:collapse; font-size:14px; }
table th,table td{ padding:8px; border-bottom:1px solid #222; text-align:left; }

/* DODATKI */
.points{ display:flex; gap:12px; margin-top:10px; }
.points-box{
  background:#0f0f0f; padding:12px; border-radius:10px; flex:1;
  display:flex; align-items:center; gap:10px;
}
.points-box svg{ width:28px; height:28px; flex:0 0 28px; fill:var(--accent); }
.circuitFlag img{ cursor:pointer; transition:all 1s ease; }
.circuitFlag img:hover{ transition:all .6s; transform:scale(1.2); }
.results-link{ color:var(--accent); font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.results-link:hover{ color:#fff; }

/* ==========================================
   TABLET ≤900px
   ========================================== */
@media (max-width:900px){
  main{ grid-template-columns:1fr; }
  header{ padding:14px; }
  .logo .title{ font-size:18px; }

}

/* ==========================================
   DESKTOP ≥769px – dropdown otwierany tylko przy .open
   ========================================== */
@media (min-width:769px){
  header > nav{ overflow:visible !important; position:relative; z-index:20; }
  .nav-item .dropdown{ position:absolute; top:100%; left:0; z-index:2000; display:none; }
  .nav-item.open .dropdown{ display:flex; flex-direction:column; }
}

/* ==========================================
   MOBILE ≤768px (scalone)
   ========================================== */
@media (max-width:768px){

  /* — Header = 3 rzędy: [logo] + [userbar] + [nav] — */
  header{
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; padding-left:0; padding-right:0;
    width:100%; max-width:100%; box-sizing:border-box;
  }

  /* Rząd 1: logo – pełna szerokość */
  header .logo{
    order:1 !important; flex:1 0 100% !important;
    width:100% !important; max-width:100% !important; padding:12px !important;
  }

  /* Rząd 2: userbar – pełna szerokość */
  header .userbar{
    order:2; flex:1 0 100%; width:100%; max-width:100%;
    padding-left:0; padding-right:0;
  }
  header .userbar-inner{
    width:100% !important; max-width:none !important; margin:0 !important;
    padding:0 12px; gap:10px; flex-wrap:wrap; box-sizing:border-box;
  }

  /* Rząd 3: nav – pełna szerokość + zawijanie */
  header > nav{
    order:3; flex:1 0 100%; width:100%; max-width:100%; margin:0;
    display:flex; flex-wrap:wrap; gap:10px 14px; padding:0 12px;
    box-sizing:border-box; overflow:visible; position:relative; z-index:20;
  }
  header > nav .nav-item{ flex:0 1 auto; white-space:nowrap; font-size:14px; }
  header > nav .lang-switch{ margin-left:auto; }

  /* Dropdown jako overlay – ukryty domyślnie, przewijalny */
  .nav-item .dropdown{
    position:absolute; top:calc(100% + 6px); left:0; right:auto;
    max-height:min(60vh,360px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:9999;
    display:block !important; visibility:hidden; opacity:0; pointer-events:none;
    transform:translateY(4px); transition:opacity .15s, transform .15s, visibility 0s linear .15s;
  }
  .nav-item.open .dropdown{ visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }

  /* Bezpieczne „zamykanie” overflow + responsywne media */
  main > *, header > *, nav > *, .card, .race-card, .standings-widget,
  .userbar, .userbar-inner, .driver-list, .standings-widget .sw-table,
  .race-grid, .right-bottom, .achievementsBar{ min-width:0 !important; max-width:100% !important; }
  img, svg, canvas, video, iframe{ max-width:100%; height:auto !important; }

  /* Karty mogą przewijać w poziomie, layout się nie rozpycha */
  .card, .race-card, .standings-widget, .points, .points-grid{ overflow-x:auto; }

  /* Main = 1 kolumna */
  main{ grid-template-columns:1fr !important; padding:0 12px; max-width:100%; }

  /* „Nadchodzące GP” – flaga + mapa toru obok siebie */
  .right-bottom{
    display:flex !important; flex-wrap:nowrap !important;
    gap:12px; align-items:center; justify-content:center;
  }
  .right-bottom > .country-flag,
  .right-bottom > .track-map,
  .right-bottom > img,
  .right-bottom > svg,
  .right-bottom > canvas{
    flex:1 1 0 !important; max-width:calc(50% - 6px) !important; min-width:0 !important;
    height:auto !important; width:auto !important; object-fit:contain !important; display:block;
  }
  .right-bottom > .country-flag,
  .right-bottom > img[alt*="flag" i]{ max-height:110px; }
  .right-bottom > .track-map,
  .right-bottom > img[alt*="map" i]{ max-height:130px; }

  /* „Twoje typowanie” – 1 kolumna */
  .driver-list{
    display:grid !important; grid-template-columns:1fr !important;
    grid-auto-flow:row; column-gap:0; row-gap:10px !important; max-width:100%;
  }
  .driver-list > *{
    grid-column:1/-1 !important; width:100% !important; max-width:100% !important;
    min-width:0 !important; flex:1 1 100% !important;
  }
  .driver-list .driver{ padding:10px; }

  /* Najlepsza stajnia (constructor pick) */
  .driver .name-container{ min-width:0; }
  .driver .name, .driver .team-name{ white-space:normal; overflow:visible; text-overflow:clip; }
  .driver.constructor-pick{ display:flex !important; align-items:center; gap:10px; min-height:56px; }
  .driver.constructor-pick .car,
  .driver.constructor-pick img.car,
  .driver.constructor-pick [class*="car"]{
    height:62px !important; width:auto !important; max-width:120px !important;
    object-fit:contain !important; flex:0 0 auto !important;
  }
  .driver.constructor-pick .name-container,
  .driver.constructor-pick .team-name,
  .driver.constructor-pick .name,
  .driver.constructor-pick .team,
  .driver.constructor-pick .constructor,
  .driver.constructor-pick .constructor-name,
  .driver.constructor-pick [class*="name"]{ flex:1 1 auto !important; min-width:0 !important; }
  .driver.constructor-pick .flag{ width:28px !important; max-height:50px !important; object-fit:cover; margin-left:auto; flex:0 0 auto; }
}

/* ==========================================
   ULTRA WĄSKIE ≤380px
   ========================================== */
@media (max-width:380px){
  header .logo .title{ display:none; }
}

/* ==========================================
   MOBILE TABELKI: widok „kompaktowy”
   (card.standings-card & card.last-gp-card)
   Widoczne kolumny: P | Login | Punkty | c-flags
   ========================================== */
@media (max-width:768px){

  /* Reset: ukryj wszystko */
  .standings-card table th, .standings-card table td,
  .last-gp-card table    th, .last-gp-card table    td{
    display:none !important;
  }

  /* 1) P = pierwsza kolumna / .c-pos */
  .standings-card table thead th:first-child,
  .standings-card table tbody td:first-child,
  .standings-card table thead th.c-pos,
  .standings-card table tbody td.c-pos,
  .last-gp-card   table thead th:first-child,
  .last-gp-card   table tbody td:first-child,
  .last-gp-card   table thead th.c-pos,
  .last-gp-card   table tbody td.c-pos{
    display:table-cell !important;
    width:2.6em !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /* 2) Login = druga kolumna / .c-user */
  .standings-card table thead th:nth-child(2),
  .standings-card table tbody td:nth-child(2),
  .standings-card table thead th.c-user,
  .standings-card table tbody td.c-user,
  .last-gp-card   table thead th:nth-child(2),
  .last-gp-card   table tbody td:nth-child(2),
  .last-gp-card   table thead th.c-user,
  .last-gp-card   table tbody td.c-user{
    display:table-cell !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* 3) PUNKTY – preferuj realną kolumnę z klasą/atrybutem (.c-pts/.c-points/[data-col="points"] lub .c-sum) */
  .standings-card table thead th.c-pts,
  .standings-card table tbody td.c-pts,
  .standings-card table thead th.c-points,
  .standings-card table tbody td.c-points,
  .standings-card table thead th[data-col="points"],
  .standings-card table tbody td[data-col="points"],
  .standings-card table thead th.c-sum,
  .standings-card table tbody td.c-sum,
  .last-gp-card   table thead th.c-pts,
  .last-gp-card   table tbody td.c-pts,
  .last-gp-card   table thead th.c-points,
  .last-gp-card   table tbody td.c-points,
  .last-gp-card   table thead th[data-col="points"],
  .last-gp-card   table tbody td[data-col="points"],
  .last-gp-card   table thead th.c-sum,
  .last-gp-card   table tbody td.c-sum{
    display:table-cell !important;
    width:4.6em !important;
    text-align:right !important;
    white-space:nowrap !important;
  }

  /* 3b) Fallback: tylko gdy NIE ma żadnej komórki z punktami – pokaż 3. kolumnę jako „Punkty” */
  .standings-card table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum))
                     thead th:nth-child(3),
  .standings-card table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum))
                     tbody td:nth-child(3),
  .last-gp-card   table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum))
                     thead th:nth-child(3),
  .last-gp-card   table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum))
                     tbody td:nth-child(3){
    display:table-cell !important;
    width:4.6em !important;
    text-align:right !important;
    white-space:nowrap !important;
  }

  /* 4) .c-flags — pokaż zawsze (power-play/juz typował itp.) */
  .standings-card table thead th.c-flags,
  .standings-card table tbody td.c-flags,
  .last-gp-card   table thead th.c-flags,
  .last-gp-card   table tbody td.c-flags{
    display:table-cell !important;
    width:3em !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /* 5) Schowaj pozostałe (pozycja/bonus itd. – poza pierwszą kolumną z „P”) */
  .standings-card table thead th.position,
  .standings-card table tbody td.position,
  .standings-card table thead th.pos:not(:first-child),
  .standings-card table tbody td.pos:not(:first-child),
  .standings-card table thead th[data-col="position"]:not(:first-child),
  .standings-card table tbody td[data-col="position"]:not(:first-child),
  .standings-card table thead th.c-bonus,
  .standings-card table tbody td.c-bonus,
  .standings-card table thead th[data-col="bonus"],
  .standings-card table tbody td[data-col="bonus"],
  .last-gp-card   table thead th.position,
  .last-gp-card   table tbody td.position,
  .last-gp-card   table thead th.pos:not(:first-child),
  .last-gp-card   table tbody td.pos:not(:first-child),
  .last-gp-card   table thead th[data-col="position"]:not(:first-child),
  .last-gp-card   table tbody td[data-col="position"]:not(:first-child),
  .last-gp-card   table thead th.c-bonus,
  .last-gp-card   table tbody td.c-bonus,
  .last-gp-card   table thead th[data-col="bonus"],
  .last-gp-card   table tbody td[data-col="bonus"]{
    display:none !important;
  }

  /* 6) Nagłówek „Punkty” – podpisz dokładnie tę kolumnę, która trzyma punkty */
  .standings-card table thead th.c-pts,
  .standings-card table thead th.c-points,
  .standings-card table thead th[data-col="points"],
  .standings-card table thead th.c-sum,
  .last-gp-card   table thead th.c-pts,
  .last-gp-card   table thead th.c-points,
  .last-gp-card   table thead th[data-col="points"],
  .last-gp-card   table thead th.c-sum{
    position:relative; font-size:0 !important; color:inherit !important;
  }
  .standings-card table thead th.c-pts::after,
  .standings-card table thead th.c-points::after,
  .standings-card table thead th[data-col="points"]::after,
  .standings-card table thead th.c-sum::after,
  .last-gp-card   table thead th.c-pts::after,
  .last-gp-card   table thead th.c-points::after,
  .last-gp-card   table thead th[data-col="points"]::after,
  .last-gp-card   table thead th.c-sum::after{
    content:"Punkty"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:8px; font-size:14px; line-height:1; white-space:nowrap;
  }

  /* Fallback – gdy nie ma klas, podpisz 3. kolumnę */
  .standings-card table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum)) thead th:nth-child(3),
  .last-gp-card   table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum)) thead th:nth-child(3){
    position:relative; font-size:0 !important; color:inherit !important;
  }
  .standings-card table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum)) thead th:nth-child(3)::after,
  .last-gp-card   table:not(:has(td.c-pts, td.c-points, td[data-col="points"], td.c-sum)) thead th:nth-child(3)::after{
    content:"Punkty"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:8px; font-size:14px; line-height:1; white-space:nowrap;
  }

  /* ciaśniejsze pady */
  .standings-card table th, .standings-card table td,
  .last-gp-card   table th, .last-gp-card   table td{
    padding:6px 8px !important; vertical-align:middle;
  }
}

@media (max-width: 768px){
  /* standings-card */
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(3))  thead th:nth-child(3),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(4))  thead th:nth-child(4),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(5))  thead th:nth-child(5),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(6))  thead th:nth-child(6),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(7))  thead th:nth-child(7),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(8))  thead th:nth-child(8),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(9))  thead th:nth-child(9),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(10)) thead th:nth-child(10),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(11)) thead th:nth-child(11),
  .standings-card table:has(tbody tr:first-child td.c-sum:nth-child(12)) thead th:nth-child(12),

  /* last-gp-card */
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(3))  thead th:nth-child(3),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(4))  thead th:nth-child(4),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(5))  thead th:nth-child(5),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(6))  thead th:nth-child(6),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(7))  thead th:nth-child(7),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(8))  thead th:nth-child(8),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(9))  thead th:nth-child(9),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(10)) thead th:nth-child(10),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(11)) thead th:nth-child(11),
  .last-gp-card   table:has(tbody tr:first-child td.c-sum:nth-child(12)) thead th:nth-child(12){
    display: table-cell !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}


.adminNav{
  position:absolute;
  right:0;
  top:50px;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #111418;
  border: 1px solid #e10600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}

.admin-btn i {
  font-size: 13px;
  color: #e10600;
}

.admin-btn:hover {
  background: #460196;
  color: #fff;
}

.admin-btn:hover i {
  color: #fff;
}

.admin-btn:active {
  transform: scale(0.96);
}

.nav-quick{
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  width:42px;
  border:1px solid rgba(255,0,0,.35);
  border-radius:8px;
  margin-left:10px;
  text-decoration:none;
}

.nav-quick i{
  font-size:16px;
}