/* // www.kokscity.eu
// Date : 03-12-2020
// Version : 1.0
//
//
// 1. containers
// 2. menus
// 3. buttons
// 4. pos of tables (6. Page Pos)
// 5. tables
// 7. Page Items
// 8. losse dingetjes
// 9. Not Used
//
//
// These Colors Only
//
// white #FFFFFF
// black #000000
// SteelBlue #4682B4
// RoyalBlue #4169E1
// DodgerBlue #1E90FF
// ForestGreen #228B22
// LightSlateGrey #20B2AA
// wit MintCream #F5FFFA
// LightSteelBlue #B0C4DE
// wit Ivory #FFFFF0
// wit GhostWhite #F8F8FF
// Gold #FFD700
// CornflowerBlue #6495ED
// red Crimson #DC143C
// MediumSeaGreen #3CB371
// Tomato #FF6347
// 
*/
/*
*{margin:0;}*/

/* Base */
/* Base */
:root{
  --ink:#0e0e0e; --panel:#121212; --line:#2a2a2a; --text:#eaeaea; --muted:#bdbdbd;
  --accent:#c1121f; --accent2:#9d0e19; --ring:#ffffff33;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg,#b8b6b6,#e9dede);
  padding: 18px;
}
.page{ max-width:1200px; margin:0 auto; }
.page-title{
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 800; letter-spacing:.02em;
  margin: 6px 0 14px; color:#ffffff;
  text-shadow: 0 0 20px rgba(193,18,31,.25);
  color:#1784d1;
}

/* Table */
.table-wrap{ overflow:auto; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
table.results{
  width:100%; border-collapse:separate; border-spacing:0;
  background: linear-gradient(180deg,#1a1a1a,#141414);
  border:1px solid #ffffff18; border-radius:12px; overflow:hidden;
}
.results thead th{
  position:sticky; top:0; z-index:1;
  background: linear-gradient(180deg,#1f1f1f,#191919);
  color:#b3f7dc; letter-spacing:.06em; font-weight:700;
  text-align:left; padding:12px 14px; border-bottom:1px solid #ffffff12;
  white-space:nowrap;
}
.results tbody td{
  padding:10px 14px; border-bottom:1px solid #ffffff0e; color:#e9e9e9;
}
.results tbody tr:nth-child(even) td{ background:#ffffff04; }
.results tbody tr:hover td{ background:#ffffff0c; }

/* Responsive labels */
@media (max-width: 760px){
  .results thead{ display:none; }
  .results, .results tbody, .results tr, .results td{ display:block; width:100%; }
  .results tr{ border-bottom:1px solid #ffffff12; }
  .results td{ display:flex; justify-content:space-between; gap:1rem; }
  .results td::before{
    content: attr(data-label);
    color: var(--muted); font-weight:600; letter-spacing:.04em;
  }
}

/* Poster */
.poster{ margin:18px 0; text-align:center; }
.poster img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }

/* Utility */
.error{ background:#3a0f14; border:1px solid #c1121f66; color:#ffd7dc;
  padding:12px 14px; border-radius:10px; }

/* Big, modern, “racing” title */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .page-title{
    font-family: "Orbitron", system-ui, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: .04em;
    margin: 6px 0 12px;
    color: trasparent;
    background: linear-gradient(90deg,#ffffff,#ffe9e9 35%,#ffffff 70%);
    -webkit-background-clip: text;
            background-clip: text;
    text-shadow: 0 0 22px rgba(193,18,31,.18);
    position: relative;
  }
  .page-title::after{
    content:"";
    display:block;
    height: 4px;
    margin-top: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent,#c1121f), var(--accent2,#9d0e19), var(--accent,#c1121f));
    background-size: 200% 100%;
    animation: titleflow 1.25s linear infinite;
    box-shadow: 0 6px 18px rgba(193,18,31,.28);
  }
  @keyframes titleflow { to { background-position: 200% 0; } }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-title::after{ animation: none !important; }
}

.page{
  padding-bottom: max(56px, env(safe-area-inset-bottom, 0px) + 24px);
}
.racelist,
.grid-others{ margin-bottom: 12px; }


.t5{
  display:inline-block;
  margin-top:.15rem;
  padding:.1rem .45rem;
  font-size:.85rem;          /* smaller than track text */
  font-weight:600;
  line-height:1.1;
  border-radius:.4rem;
  border:1px solid transparent;
  white-space:nowrap;
}

/* palette */
.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; }

.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}

/* kleine optionele tuning voor de rij */
.results td .t5 { display:inline-block; vertical-align:top; }


/* ========== Badge Tokens (Top5Helper) ========== */
:root {
  --badge-bg: rgba(255,255,255,0.06);
  --badge-fg: #e8e8e8;
  --badge-br: 999px;
  --badge-py: 0.15rem;
  --badge-px: 0.5rem;
  --badge-fs: 0.78rem;
  --badge-gap: 0.35rem;

  /* palette tuned for dark backgrounds */
  --b-green:  #2ecc71;  /* success */
  --b-blue:   #3498db;  /* podium */
  --b-gold:   #f1c40f;  /* winner */
  --b-teal:   #1abc9c;  /* rain/night base */
  --b-indigo: #8e44ad;  /* rain podium */
  --b-cyan:   #00bcd4;  /* rain t5 */
  --b-gray:   #7f8c8d;  /* neutral/no */
  --b-red:    #e74c3c;  /* crash/dsq */
  --b-dark:   #2c3e50;  /* dq/vrf */
}

/* Wrapper voor meerdere badges op één regel */
.t5 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--badge-gap);
  vertical-align: middle;
}

/* Basis-badge */
.badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: var(--badge-br);
  padding: var(--badge-py) var(--badge-px);
  font-size: var(--badge-fs);
  font-weight: 600;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* Kleurvarianten (border voor extra contrast) */
.badge-green  { background: color-mix(in oklab, var(--b-green) 22%, #111 78%);  border-color: color-mix(in oklab, var(--b-green), #000 65%);  color: #eaffe9; }
.badge-blue   { background: color-mix(in oklab, var(--b-blue)  22%, #111 78%);  border-color: color-mix(in oklab, var(--b-blue),  #000 65%);  color: #eaf5ff; }
.badge-gold   { background: color-mix(in oklab, var(--b-gold)  28%, #111 72%);  border-color: color-mix(in oklab, var(--b-gold),  #000 60%);  color: #fff9da; }
.badge-teal   { background: color-mix(in oklab, var(--b-teal)  22%, #111 78%);  border-color: color-mix(in oklab, var(--b-teal),  #000 65%);  color: #eafffb; }
.badge-indigo { background: color-mix(in oklab, var(--b-indigo)22%, #111 78%);  border-color: color-mix(in oklab, var(--b-indigo),#000 65%);  color: #f3eaff; }
.badge-cyan   { background: color-mix(in oklab, var(--b-cyan)  22%, #111 78%);  border-color: color-mix(in oklab, var(--b-cyan),  #000 65%);  color: #eaffff; }
.badge-gray   { background: color-mix(in oklab, var(--b-gray)  18%, #111 82%);  border-color: color-mix(in oklab, var(--b-gray),  #000 70%);  color: #f0f3f4; }
.badge-red    { background: color-mix(in oklab, var(--b-red)   22%, #111 78%);  border-color: color-mix(in oklab, var(--b-red),   #000 65%);  color: #ffecec; }
.badge-dark   { background: color-mix(in oklab, var(--b-dark)  22%, #111 78%);  border-color: color-mix(in oklab, var(--b-dark),  #000 65%);  color: #e8eef2; }

/* Hover/focus voor muis/keyboard */
.badge:focus-visible {
  outline: 2px solid #fff3;
  outline-offset: 2px;
}
.badge:hover {
  filter: brightness(1.06);
}

/* ========== iRating “dots” (series_proto.php) ========== */
.dot {
  --dot-size: 0.5rem;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 999px;
  display: inline-block;
  margin: 0 0.35rem;
  border: 1px solid #00000055;
  box-shadow: 0 0 0 1px #00000022 inset;
  vertical-align: middle;
}
.dot-up   { background: #27ae60; box-shadow: 0 0 0 1px #00000022 inset, 0 0 4px #27ae6044; }
.dot-down { background: #c0392b; box-shadow: 0 0 0 1px #00000022 inset, 0 0 4px #c0392b44; }
.dot-same { background: #7f8c8d; box-shadow: 0 0 0 1px #00000022 inset; }

/* Positie-tekst met lichte spacing t.o.v. dots */
.pos-text { padding: 0 0.1rem; }