/* OJ Motorsport designsystem — tillämpat på iRacing Stats-dashboarden.
   Tokens (färg/typografi/spacing/effekter) är hämtade rakt av från
   /var/www/oj-design-system/tokens/. Resten av filen är dashboardens egna
   komponenter, byggda i ren CSS (ingen React/JSX) eftersom appen är en
   server-renderad Flask-sida utan JS-byggsteg. */

:root {
  /* ---- OJ Brand Blue ---- */
  --oj-blue-300: #5abce3;
  --oj-blue-400: #3AABDC;
  --oj-blue-500: #2592c2;

  /* ---- OJ Livery Gold ---- */
  --oj-gold-300: #e5b820;
  --oj-gold-400: #C8950F;
  --oj-gold-500: #a0760b;

  /* ---- Neutral scale ---- */
  --oj-neutral-50:  #edf0f4;
  --oj-neutral-200: #aeb6c4;
  --oj-neutral-300: #8491a6;
  --oj-neutral-400: #5c6a7c;
  --oj-neutral-500: #3e4858;
  --oj-neutral-600: #28303e;
  --oj-neutral-700: #1c222e;
  --oj-neutral-800: #131820;
  --oj-neutral-900: #0c1018;
  --oj-neutral-950: #070a0f;

  /* ---- Semantic surfaces/text/border ---- */
  --surface-1: var(--oj-neutral-900);
  --surface-2: var(--oj-neutral-800);
  --surface-3: var(--oj-neutral-700);
  --text-primary:   var(--oj-neutral-50);
  --text-secondary: var(--oj-neutral-300);
  --text-tertiary:  var(--oj-neutral-400);
  --border-subtle:  var(--oj-neutral-800);
  --border-default: var(--oj-neutral-700);

  /* ---- Race status ---- */
  --status-win:    #4ade80;
  --status-podium: var(--oj-gold-400);
  --status-points: var(--oj-blue-400);
  --status-dnf:    #e04f4f;
  --status-dns:    var(--oj-neutral-500);

  /* ---- Fonts ---- */
  --font-display: 'Orbitron', 'Eurostile Extended', 'Bank Gothic', sans-serif;
  --font-ui:      'Rajdhani', 'Barlow', system-ui, sans-serif;
  --font-mono:    'Share Tech Mono', 'JetBrains Mono', monospace;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;

  /* ---- Spacing/radii ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* ---- Effekter ---- */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
  --glow-blue-sm: 0 0 8px rgba(58,171,220,0.35);
  --glow-gold-sm: 0 0 8px rgba(200,149,15,0.4);
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: 200ms var(--ease-default);

  /* ---- Bakåtkompatibla alias ----
     Templates skrevs mot dessa variabelnamn innan rebrandingen.
     Mappas till brand-tokens ovan så att inline-styles i .html-filerna
     inte behöver röras en och en. */
  --bg:      var(--surface-1);
  --panel:   var(--surface-2);
  --panel2:  var(--surface-3);
  --text:    var(--text-primary);
  --muted:   var(--text-secondary);
  --line:    var(--border-default);
  --accent:  var(--oj-blue-400);   /* primär brand-färg, tidigare orange */
  --accent2: var(--oj-gold-400);   /* sekundär highlight, tidigare blå */
  --good:    var(--status-win);
  --bad:     var(--status-dnf);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Bilbilden ligger på body:s eget background — det målas alltid bakom
     elementets innehåll, så ingen extra z-index-logik behövs. Nedtonad
     och kantutfasad i bilden själv (se static/img/car_bg.webp); positionerad
     uppe till höger där den mest syns bakom marginalerna runt huvudinnehållet. */
  background-color: var(--surface-1);
  background-image: url('../img/car_bg.webp');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 1300px auto;
  background-attachment: fixed;
  color: var(--text-primary);
  font: 15px/1.5 var(--font-ui), system-ui, sans-serif;
}

/* ---- Header / brand ---- */
header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.brand-mark { height: 28px; width: 28px; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
}
.brand-app {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--oj-blue-400);
}

nav a {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 16px 4px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: color var(--transition-default);
}
nav a:hover { color: var(--text-primary); }
nav a.active {
  color: var(--text-primary);
  border-bottom-color: var(--oj-blue-400);
  text-shadow: var(--glow-blue-sm);
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

/* Sektionsrubriker — display-font, samma roll som tidigare (uppercase divider)
   men i Orbitron för att matcha "race section header"-känslan i designsystemet. */
h2 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-secondary);
  margin: 28px 0 12px;
  font-weight: 600;
}

/* Nyckeltalskort (Stat-komponentens dashboard-variant) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
}
.card .label {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.card .value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text-primary);
}
.card .sub { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }

/* ---- Tabeller ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-default); }
th {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
}
tr:hover td { background: var(--surface-3); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--font-mono); }
/* Tunn lodrät linje som markerar var en kolumngrupp börjar (t.ex. kval-kolumnerna). */
td.sep, th.sep { border-left: 2px solid var(--border-default); }
.pos1 { color: var(--oj-gold-400); font-weight: 700; }
.pos3 { color: var(--status-win); font-weight: 600; }
.pos { color: var(--text-primary); }
.pos.bad { color: var(--status-dnf); }
.delta-up { color: var(--status-win); }
.delta-down { color: var(--status-dnf); }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.chart-wrap { position: relative; height: 360px; }
/* Chart.js sätter canvasens storlek via JS (responsive:true), men den
   handritade canvasen på Fördelning-sidan har ingen sådan logik — utan
   denna regel behåller den sin inneboende standardstorlek (300x150) och
   syns bara som en liten ruta i hörnet av chart-wrap. */
.chart-wrap canvas { display: block; width: 100%; height: 100%; }

/* ---- Filter / flikar ----
   Tabs styled efter Button "secondary" (inaktiv) / "primary" (aktiv) varianterna. */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
select, input[type=text] {
  background: var(--surface-3);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  font: 14px var(--font-ui);
}
.tabs a {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-default);
}
.tabs a:hover { color: var(--text-primary); border-color: var(--oj-blue-300); }
.tabs a.active {
  color: #ffffff;
  background: var(--oj-blue-400);
  border-color: var(--oj-blue-400);
  font-weight: 700;
  box-shadow: var(--glow-blue-sm);
}
.muted { color: var(--text-secondary); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- Knapp (filterformulärets "Filtrera"-knapp) ----
   Motsvarar Button variant="primary" size="md". */
.btn-primary {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: 0.8rem;
  background: var(--oj-blue-400);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 0 20px;
  height: 38px;
  cursor: pointer;
  transition: all var(--transition-default);
}
.btn-primary:hover { background: var(--oj-blue-300); box-shadow: var(--glow-blue-sm); }
.btn-primary:active { background: var(--oj-blue-500); }

/* ---- Badge (resultat-placeringar) ----
   Mapping enligt designsystemet: P1=gold, P2=silver, P3=bronze,
   P4–P10=points(blue), P11+=default, plus status win/dnf/dns. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge-gold    { background: #C8950F; color: var(--oj-neutral-950); box-shadow: var(--glow-gold-sm); }
.badge-silver  { background: #8c9aaa; color: var(--oj-neutral-950); }
.badge-bronze  { background: #9b6e38; color: #ffffff; }
.badge-points  { background: var(--oj-blue-400); color: #ffffff; }
.badge-default { background: var(--surface-3); color: var(--text-primary); }
.badge-win     { background: #2c9e5a; color: #ffffff; }
.badge-dnf     { background: #c0392b; color: #ffffff; }
.badge-dns     { background: var(--oj-neutral-500); color: var(--text-secondary); }

/* ---- Tag (kategori-chip, om den används i framtida vyer) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.tag-blue { background: rgba(58,171,220,0.12); color: var(--oj-blue-400); border-color: rgba(58,171,220,0.3); }
.tag-gold { background: rgba(200,149,15,0.12); color: var(--oj-gold-400); border-color: rgba(200,149,15,0.3); }
.tag-green { background: rgba(44,158,90,0.1); color: var(--status-win); border-color: rgba(74,222,128,0.3); }
.tag-red { background: rgba(192,57,43,0.1); color: #e05252; border-color: rgba(224,82,82,0.3); }

/* ---- Percentilstapel + tier-remsa (Fördelning-sidan) ---- */
.pct-bar-bg {
  height: 10px;
  background: var(--surface-1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 10px;
}
.pct-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--oj-blue-500), var(--oj-blue-400));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow, 350ms ease);
}
.tier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.tier-box {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid transparent;
}
.tier-box.current {
  border-color: var(--oj-blue-400);
  background: rgba(58,171,220,0.1);
  box-shadow: var(--glow-blue-sm);
}
.tier-box .tier-name {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.tier-box.current .tier-name { color: var(--oj-blue-400); }
.tier-box .tier-range { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
.tier-box .tier-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 700; margin-top: 4px; color: var(--text-secondary); }
.tier-box.current .tier-pct { color: var(--oj-blue-400); }
@media (max-width: 700px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }