/* =====================================================
   KoksCity – iRacing (My Cars + Car detail)
   Cleaned & tuned by ChatGPT (optie A + verbeteringen)
   ===================================================== */

/* ---------- Layout wrappers ---------- */
.cars-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:12px;
}

.section-title{
  margin:10px 0 8px;
  font-weight:600;
  color:#314b79;
}
#startmainpart .section-title:first-of-type{ margin-top:4px; }
.section-title .count{ color:#5c2727; font-weight:600; margin-left:.35rem; }

#startmainpart{ transition:opacity .18s ease; }
#startmainpart.fade-out{ opacity:.35; }

/* ---------- Cards / lists ---------- */
.top3-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
@media (max-width:780px){
  .top3-row{ grid-template-columns:1fr; }
}

.top3-card,.car-card{
  border:1px solid #1972a5ff;
  border-radius:10px;
  padding:12px;
  background:#0f528dff;
  color:#fff;
}
.top3-card h3,.car-card h3{ margin:0 0 6px; font-size:1.05rem; }
.statline{ font-size:.92rem; opacity:.95; }
.car-card{ cursor:pointer; transition:transform .08s ease; }
.car-card:hover{ transform:translateY(-2px); }
.car-card .meta{ font-size:.9rem; opacity:.85; }

.grid-others{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}
.grid-others + .section-title{ margin-top:14px; }

/* kleine badges (wins/podiums) */
.small-pill{
  display:inline-block; padding:2px 6px; border-radius:6px;
  background:#111; margin-right:6px; font-size:.85rem;
}
.small-pill.win{ background:#0a7d1c; }
.small-pill.podium{ background:#1f5fbf; }

/* Link-styling voor auto-namen in cards */
.car-link{
  color:#fff; text-decoration:none; font-weight:700;
}
.car-link:visited{ color:#fff; }
.car-card:hover .car-link,.car-link:hover{
  color:#FFD700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px;
}
.car-link:focus-visible{ outline:2px solid #FFD700; outline-offset:3px; border-radius:6px; }

/* ---------- Tabellen (compact) ---------- */
.racelist{ width:100%; border-collapse:collapse; }
.racelist thead th{
  text-align:left; padding:10px 12px; background:#1f1f1f; border-bottom:1px solid #ffffff18;
}
.racelist td{ padding:10px 12px; border-bottom:1px solid #ffffff10; }
.racelist tr:nth-child(even) td{ background:#ffffff06; }
.racelist .empty{ text-align:center; opacity:.85; }

.racelist.compact{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}
.racelist.compact thead th{
  background:#1e1e1f; color:#2ed410; text-align:left;
  padding:8px 10px; border-bottom:1px solid #ffffff22;
}
.racelist.compact tbody td{
  padding:6px 10px; border-bottom:1px solid #ffffff12; color:#314b79;
}
.racelist.compact tbody tr:nth-child(even) td{ background:#ffffff07; }
.racelist.compact tbody tr:hover td{ background:#ffffff12; }

.racelist.compact td.num,
.racelist.compact .c-pos,
.racelist.compact .c-laps,
.racelist.compact .c-int,
.racelist.compact .c-fl,
.racelist.compact .c-av{ text-align:right; }

.racelist.compact .c-date{ width:25ch; }
.racelist.compact .c-track{ width:34%; }
.racelist.compact .c-series{ width:30%; }
.racelist.compact .c-pos{ width:8ch; }
.racelist.compact .c-laps{ width:9ch; }
.racelist.compact .c-int,
.racelist.compact .c-fl,
.racelist.compact .c-av{ width:11ch; }

.racelist.compact td:nth-child(2),
.racelist.compact td:nth-child(3){
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Stats grid + kaarten ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:2fr 2fr 1fr;
  gap:12px;
  margin:10px 0 16px;
}
@media (max-width:980px){ .stats-grid{ grid-template-columns:1fr; } }

.stat-card{
  background:#0f528dff;
  border:1px solid #1972a5ff;
  border-radius:12px;
  padding:12px;
  color:#fff;
}
.stat-card.center{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:210px; }
.card-title{ margin:0 0 8px; font-weight:700; font-size:1.05rem; }

.pill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:8px;
}
.pill{
  background:#143b66; border:1px solid #275f95; border-radius:10px;
  padding:8px; display:flex; align-items:center; justify-content:space-between; opacity:.6;
}
.pill.has{ opacity:1; }
.pill-pos{ font-weight:700; }
.pill-cnt{ font-variant-numeric:tabular-nums; font-weight:700; }

.big-number{
  font-size:clamp(28px,5.5vw,48px);
  line-height:1; font-weight:800; color:#ffd700; margin:6px 0 4px;
}

/* mini tables + FL tables in kaarten */
.mini-table,.fl-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.mini-table thead th,.fl-table thead th{
  text-align:left; background:#1f1f1f; color:#2ed410; padding:8px 10px; border-bottom:1px solid #ffffff22;
}
.mini-table td,.fl-table td{ padding:6px 10px; border-bottom:1px solid #ffffff12; color:#e6f2ff; }
.mini-table .num,.fl-table .num{ text-align:right; }
.mini-table .empty,.fl-table .empty{ text-align:center; opacity:.85; }

/* Best FL sectie strakker/blauwer */
.fl-table{
  background:#0f528dff;
  border:1px solid #1972a5ff;
  border-radius:12px;
  overflow:hidden;
}
.fl-table td{ color:#ffffff; }
.fl-table tbody tr:nth-child(even) td{ background:#0e4a7e; }
.fl-table tbody tr:hover td{ background:#11538e; }
.section-h3{ color:#e6f2ff; }

.fl-table .c-track{ width:40%; }   /* was 44% */
.fl-table .c-fl{    width:14%; }
.fl-table .c-laps{  width:12%; }   /* nieuw in jouw versie */
.fl-table .c-meta{  width:34%; }

/* ---------- Track link (inline details) ---------- */
.trk-link{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:#ffd700; text-decoration:none; position:relative;
}
.trk-link::after{
  content:"▾"; position:absolute; right:0; top:0; opacity:.7; transition:transform .15s ease;
}
.trk-inline-row[style*="display:"] ~ tr .trk-link::after{ transform:rotate(180deg); }
.trk-link:focus-visible{ outline:2px solid #ffd700; outline-offset:2px; border-radius:6px; }

/* fun eerste letter (per track/car tint) */
.trk-name::first-letter{
  color:hsl(var(--init-h,45) 80% 60%);
  font-size:1.12em; font-weight:700; letter-spacing:.02em; transition:transform .12s ease;
}
.trk-link:hover .trk-name::first-letter{ transform:translateY(-1px); }

/* ---------- Hero (car detail) ---------- */
.car-hero{
  display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;
  position:relative; isolation:isolate; min-height:34vh; border-radius:16px; overflow:hidden;
  background:rgba(0,0,0,.06);
}
.car-hero__img{
  width:420px; max-width:100%; border-radius:10px; border:1px solid #222; display:block;
}
.car-hero__title{
  margin:.1rem 0 .2rem; font-size:clamp(20px,3.2vw,28px); color:cornflowerblue;
}
.car-hero__sub{ margin:.1rem 0; opacity:.85; color:rgb(4,140,147); }
@media (max-width:700px){ .car-hero{ flex-direction:column; } }

/* ---------- Video banner (optie A – sticky strook) ---------- */
.carpage{ position:relative; }
.car-bg{
  position:sticky;
  top:0;
  height:clamp(200px, 26vh, 360px);   /* suggestie: voorspelbare hoogte */
  z-index:0;
  overflow:hidden;
  border-radius:0 0 16px 16px;
}
.car-bg__video{
  width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  filter:brightness(.9) saturate(.95);
  pointer-events:none; /* puur decoratief */
}
.car-bg__shade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.20) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.70) 100%);
}

/* Content overlapt subtiel over de banner */
.car-body{
  position:relative; z-index:1;
  margin-top:-9vh; padding-top:12vh;
}

/* Extra leesbaarheid boven video-achtergrond */
.car-body .stat-card,
.car-body .mini-table,
.car-body .fl-table{
  background:rgba(16,22,30,.72);
}

/* Optionele debug badge voor bestandsnaam (kan je weglaten) */
.car-bg__badge{
  position:absolute; right:8px; top:8px;
  padding:4px 8px; border-radius:8px;
  background:rgba(0,0,0,.45); color:#fff; font-size:.8rem;
  pointer-events:none; user-select:none;
}

/* Mobile tuning voor banner & hero */
@media (max-width:720px){
  .car-body{ margin-top:-7vh; padding-top:10vh; }
  .car-hero{ min-height:28vh; }
}

/* Respect accessiblity: reduce motion */
@media (prefers-reduced-motion:reduce){
  .car-bg__video{ display:none; }
  .car-hero__img{ opacity:1; }
}

/* ---------- Series pagina / sorteerbare tabellen ---------- */
.seriecars-wrap{ max-width:1100px; margin:0 auto; padding:12px; }
.seriecars-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.seriecars-back{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background:#ffffff12; border:1px solid #ffffff24; color:#fff; text-decoration:none; font-weight:600;
}
.seriecars-back:hover{ background:#ffffff18; }

.seriecars-hero{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.seriecars-hero img{ width:260px; max-width:100%; border-radius:10px; border:1px solid #222; display:block; }
@media (max-width:700px){ .seriecars-hero{ flex-direction:column; } }

.seriecars-card{
  background:#0f528dff; border:1px solid #1972a5ff; border-radius:12px; padding:12px; color:#fff; margin:12px 0;
}
.seriecars-card h3{ margin:0 0 8px; font-size:1.05rem; }
.seriecars-meta{ font-size:.92rem; opacity:.9; margin-bottom:8px; }

.seriecars-table{
  width:100%; border-collapse:collapse; font-size:.95rem; border-radius:10px; overflow:hidden;
}
.seriecars-table thead th{
  text-align:left; background:#1f1f1f; color:#2ed410; padding:8px 10px; border-bottom:1px solid #ffffff22;
}
.seriecars-table td{ padding:6px 10px; border-bottom:1px solid #ffffff12; color:#e6f2ff; }
.seriecars-table td.num{ text-align:right; }
.seriecars-table tbody tr:nth-child(even) td{ background:#0e4a7e; }
.seriecars-table tbody tr:hover td{ background:#11538e; }

/* totals chips binnen series-card */
.seriecars-totals{
  display:flex; gap:10px; margin:6px 0 10px; width:100%; justify-content:center; flex-wrap:wrap;
}
.seriecars-totals .tot{
  background:#143b66; border:1px solid #275f95; border-radius:10px; padding:8px 12px; min-width:140px; text-align:center; color:#fff;
}
.seriecars-totals .tot span{ display:block; font-size:.85rem; opacity:.9; margin-bottom:2px; }
.seriecars-totals .tot strong{ display:block; font-size:1.15rem; font-variant-numeric:tabular-nums; }

/* sorteerbare headers */
.seriecars-table th.sortable{ cursor:pointer; white-space:nowrap; user-select:none; position:relative; }
.seriecars-table th.sortable::after{ content:" ↕"; opacity:.5; font-size:.9em; }
.seriecars-table th.sortable[data-sort="asc"]::after{ content:" ↑"; opacity:.85; }
.seriecars-table th.sortable[data-sort="desc"]::after{ content:" ↓"; opacity:.85; }
.seriecars-table th.sortable[data-sort]{ color:#FFD700; }

/* ---------- Kleur-badges (reserve) ---------- */
.badge{ display:inline-block; padding:2px 6px; border-radius:999px; font-size:12px; line-height:1.2; margin:1px 3px; white-space:nowrap; }
.badge-gray{ background:#e8e8e8; color:#333; }
.badge-green{ background:#d7f3df; color:#0b5a2a; }
.badge-blue{ background:#d8e7ff; color:#083c74; }
.badge-gold{ background:#f8e7a1; color:#5a4100; }
.badge-teal{ background:#d6f0f0; color:#0d4d4d; }
.badge-indigo{ background:#e0e4ff; color:#2b3172; }
.badge-cyan{ background:#d7f7ff; color:#0a4b58; }
.badge-orange{ background:#ffe2c4; color:#7a3d00; }
.badge-red{ background:#ffd7d7; color:#7a0d0d; }
.badge-dark{ background:#d9d9de; color:#1f1f29; }


/* --- tighten banner height --- */
.car-bg{
  height: clamp(160px, 20vh, 280px);
}

/* --- smaller overlap so the big grey slab disappears --- */
.car-body{
  margin-top: -6vh;
  padding-top: 8vh;
}

/* --- compact hero: grid instead of flex, no forced min-height --- */
.car-hero{
  display: grid;
  grid-template-columns: 420px 1fr;   /* image left, text right */
  align-items: center;
  gap: 18px;
  padding: 16px;
  min-height: auto;                   /* remove tall empty space */
  background: rgba(0,0,0,.06);
  border-radius: 16px;
  overflow: hidden;
}

/* image scales to the column */
.car-hero__img{
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
  border: 1px solid #222;
}

/* fine-tune title/sub */
.car-hero__title{ margin: .1rem 0 .2rem; font-size: clamp(20px, 2.6vw, 28px); }
.car-hero__sub{   margin: .1rem 0; opacity: .85; }

/* responsive: stack on smaller screens */
@media (max-width: 900px){
  .car-hero{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .car-hero__img{
    max-width: 560px;      /* allow bigger on narrow but tall screens */
    justify-self: start;
  }
}

/* optional: subtle card look for readability over video */
.car-body .stat-card,
.car-body .mini-table,
.car-body .fl-table{
  background: rgba(16,22,30,.72);
  backdrop-filter: blur(2px);
}