:root{
  --bg:#111; --panel:#151515; --panel2:#0f0f0f; --text:#eaeaea;
  --line:#222; --accent:#16a34a; --accentSoft:rgba(22,163,74,.35);
}

*{box-sizing:border-box}
/* body{margin:0; font:16px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif; background:#0b0b0b; color:var(--text)} */
.wrap{max-width:1100px; margin:24px auto; padding:0 12px}
h1{margin:0 0 14px}

.table-wrap{background:var(--panel); border:1px solid #1f1f1f; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25)}

.series-table{width:100%; border-collapse:separate; border-spacing:0}
.series-table thead th{
  text-align:left; padding:10px 12px; background:#1b1b1b; border-bottom:1px solid #232323; position:sticky; top:0; z-index:1;
}
.series-table tbody td{padding:10px 12px; border-bottom:1px solid #1f1f1f}
.series-table tbody tr:nth-child(even) td{background:#151515}
.series-table tbody tr:hover td{background:#171717}

.yq-divider td{height:8px; padding:0; background:linear-gradient(90deg,#121212,#1c1c1c,#121212); border:0}

.row-main{cursor:pointer}
.row-main .col-series{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* inline chip when only 1 car */
.series-inline .car-chip{margin-left:.5rem}

/* cars count pill */
.cars-count{
  margin-left:.5rem; padding:.1rem .5rem; border-radius:999px; background:#101010; color:#ddd;
  border:1px solid #2a2a2a; cursor:pointer; font-size:.85rem;
}
.cars-count:hover{border-color:var(--accent)}

/* cars row */
.cars-wrap{background:var(--panel2); padding:10px 12px}
.cars-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 10px}
@media (max-width:1024px){ .cars-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){  .cars-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.car-chip{
  display:block; padding:6px 10px; border-radius:8px; background:#111; color:#fff; border:2px solid transparent;
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.car-chip.last-used{border-color:var(--accent); box-shadow:0 0 0 2px var(--accentSoft) inset}
.car-chip:hover{border-color:var(--accent)}

/* inline results table */
.racelist{width:100%; border-collapse:separate; border-spacing:0; margin-top:10px}
.racelist thead th{background:#1c1c1c; padding:8px 10px; border-bottom:1px solid #252525; position:sticky; top:0}
.racelist td{padding:8px 10px; border-bottom:1px solid #202020}
.racelist td.num{text-align:right}
.racelist td.pos{text-align:center}
.racelist td.datecell{font-variant-numeric:tabular-nums}

/* alt names */
.alts{margin:6px 0 0 18px}
.alts li{margin:2px 0}

/* top5 badges (per-race) */
.t5-inl{display:inline-block; margin-left:.35rem; padding:.05rem .4rem; font-size:.8rem; font-weight:600; line-height:1.1; border-radius:.35rem; border:1px solid transparent; vertical-align:baseline; white-space:nowrap}
.t5-green  { background:#e6f6ec; color:#166534; border-color:#bbebcd }
.t5-blue   { background:#e8f0fe; color:#1e40af; border-color:#c7d2fe }
.t5-amber  { background:#fff7ed; color:#92400e; border-color:#fed7aa }
.t5-red    { background:#fee2e2; color:#991b1b; border-color:#fecaca }
.t5-gray   { background:#f3f4f6; color:#374151; border-color:#e5e7eb }
.t5-purple { background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff }
.t5-muted  { background:#f8fafc; color:#64748b; border-color:#e2e8f0 }

/* little messages */
.inline-msg{padding:8px 10px; background:#101010; border:1px solid #242424; border-radius:6px}
.inline-msg.error{border-color:#b91c1c; color:#fecaca}

/* Season header row */
.series-table .season-head td{
  font-weight: 700;
  letter-spacing: .2px;
  background: #081f7b; /* or whatever fits your palette */
  border-top: 2px solid #3356b5;
  border-bottom: 2px groove #486ed6;
  padding: 8px 12px;
  text-align: center;
}

/* Spacer row between seasons (you said: keep the empty row) */
.series-table .yq-divider td{
  height: 10px;
  background: transparent;
  border: 0;
  padding: 0;
}


.series-table .season-head td,
.series-table .season-head th{
  color:#fff;
  -webkit-text-stroke: 1px rgba(12,42,156,.9); /* subtle blue edge */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Outline style for season header text (Option B) */
.series-table .season-head td,
.series-table .season-head th{
  color:#fff;
  -webkit-text-stroke: 0.8px rgba(12,42,156,.95); /* blue edge on the navy */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);        /* subtle depth */
}

/* Firefox fallback (emulates the outline without -webkit-text-stroke) */
@supports not (-webkit-text-stroke: 1px black) {
  .series-table .season-head td,
  .series-table .season-head th{
    text-shadow:
      0 1px 2px rgba(0,0,0,.35),          /* depth */
      1px 0 0 rgba(12,42,156,.9),         /* outline right */
     -1px 0 0 rgba(12,42,156,.9),         /* outline left  */
      0 1px 0 rgba(12,42,156,.9),         /* outline down  */
      0 -1px 0 rgba(12,42,156,.9);        /* outline up    */
  }
}


.badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:12px;line-height:1.2;margin-left:6px}
.badge-gray{background:#e8e8e8;color:#333}


/* allow track cell to wrap & show the badge */
.c-track,
td[data-label="Track"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:12px; line-height:1.2; margin-top:2px }
.badge-gray { background:#e8e8e8; color:#333 }

.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}
/* iRating dots in Pos kolom */
.pos {
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.pos .pos-text { display: inline-block; min-width: 5.2ch; text-align: center; }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 6px;
  position: relative;
  top: -1px; /* optisch centreren */
  background: #9aa0a6; /* default gray */
  opacity: .9;
}

.dot-up   { background: #1bb55c; }  /* groen */
.dot-down { background: #e53935; }  /* rood  */
.dot-same { background: #9aa0a6; }  /* grijs */