/* ============================================================
   RLO TELEMETRY — Dark F1 broadcast theme
   (single source of truth; styles.css is intentionally empty)
   ============================================================ */

:root{
  --bg:#0b0b0f;
  --surface:#15151e;        /* F1 official dark */
  --card:#16161f;
  --card-2:#1d1d28;         /* inputs / elevated */
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.14);
  --text:#f4f4f8;
  --muted:#9aa0ad;
  --red:#e10600;            /* F1 red */
  --red-2:#ff2d20;
  --red-soft:rgba(225,6,0,0.15);
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 12px 32px rgba(0,0,0,0.45);
  --shadow-sm:0 4px 16px rgba(0,0,0,0.32);
}

/* ---------- Page ---------- */
html, body{
  margin:0; padding:0;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(225,6,0,0.12), transparent 60%),
    radial-gradient(900px 520px at -8% -4%, rgba(56,86,168,0.10), transparent 55%),
    linear-gradient(180deg, #0d0d13 0%, #07070b 100%) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.rlo-page{ padding:18px 12px 48px; max-width:1340px; }

a{ color:#ff5a52; text-decoration:none; }
a:hover{ color:#ff8079; }

/* ---------- Top navbar ---------- */
.rlo-navbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:14px;
  padding:12px 22px;
  background:rgba(12,12,17,0.72);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.rlo-navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--red), transparent 42%);
  opacity:.95;
}
.logo-wrap img{
  height:38px; width:38px; object-fit:cover; border-radius:10px;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 0 0 1px rgba(0,0,0,0.4);
}
.rlo-brand{ display:flex; flex-direction:column; line-height:1.04; }
.rlo-title{
  color:#fff; font-weight:800; font-size:20px; letter-spacing:.5px;
  text-transform:uppercase; font-family:"Titillium Web", sans-serif;
}
.rlo-title span{ color:var(--red); }
.rlo-subtitle{ color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.3px; }

.rlo-actions{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.rlo-action{
  font-weight:700; font-size:12.5px; letter-spacing:.3px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,0.04); color:var(--text);
  transition:transform .12s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  white-space:nowrap;
}
.rlo-action:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.28); color:#fff; }
.rlo-bmc{ background:linear-gradient(180deg,#ffe14d,#ffd000); color:#1a1a1a; border-color:#e9c200; }
.rlo-bmc:hover{ filter:brightness(1.04); color:#1a1a1a; }
.rlo-ig{ background:linear-gradient(135deg,#feda75,#d62976 46%,#962fbf 80%,#4f5bd5); color:#fff; border:none; }
.rlo-ig:hover{ color:#fff; }

/* ---------- Filter bar ---------- */
.rlo-filter{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:16px 18px;
  margin:8px 0 16px;
}
label, .rlo-filter label{
  color:var(--muted) !important; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;
}
#year-warning{ color:#ffb3ae !important; }

/* ---------- Tabs (segmented pill bar) ---------- */
.rlo-tabs-parent{ margin:8px 0 16px; }
.rlo-tabs{
  border-bottom:none !important; background:rgba(255,255,255,0.04) !important;
  display:inline-flex !important; gap:4px; flex-wrap:wrap;
  padding:5px; border-radius:999px; border:1px solid var(--border);
}
.rlo-tab{
  border:none !important; background:transparent !important; color:var(--muted) !important;
  border-radius:999px !important; padding:9px 18px !important;
  font-weight:700 !important; letter-spacing:.4px; text-transform:uppercase; font-size:12.5px;
  transition:all .15s ease;
}
.rlo-tab:hover{ color:#fff !important; background:rgba(255,255,255,0.05) !important; }
.rlo-tab--selected{
  background:linear-gradient(180deg, var(--red-2), var(--red)) !important;
  color:#fff !important; box-shadow:0 6px 18px rgba(225,6,0,0.35);
}

/* ---------- Cards ---------- */
.box{
  background:linear-gradient(180deg, var(--card) 0%, #121219 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 16px 8px;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease;
  height:100%;
}
.box:hover{ border-color:var(--border-strong); }
.box h5{
  font-weight:700; letter-spacing:.3px; color:#fff; margin:0;
  font-family:"Titillium Web", sans-serif;
  border-left:3px solid var(--red); padding-left:10px;
}

/* ---------- Section helpers (standings / telemetry) ---------- */
.rlo-section-title{
  color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  margin:6px 0 14px; border-left:4px solid var(--red); padding-left:12px; font-size:20px;
}
.rlo-note{
  color:var(--muted); font-size:13px; line-height:1.5;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-left:3px solid var(--red); border-radius:10px;
  padding:11px 14px; margin:0 0 16px;
}

/* ---------- Tables (standings / results) ---------- */
.rlo-table{ color:var(--text) !important; margin:0; }
.rlo-table thead th{
  color:var(--muted) !important; text-transform:uppercase; font-size:11px; letter-spacing:.6px;
  border-bottom:1px solid var(--border-strong) !important; border-top:none !important;
  background:transparent !important; font-weight:700; padding:.7rem .75rem;
}
.rlo-table td{
  border-color:var(--border) !important; vertical-align:middle; color:var(--text) !important;
  background:transparent !important; padding:.6rem .75rem;
}
.rlo-table tbody tr{ transition:background .12s ease; }
.rlo-table tbody tr:hover td{ background:rgba(255,255,255,0.04) !important; }
.rlo-pos{ font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
.rlo-team-bar{ display:inline-block; width:4px; height:18px; border-radius:2px; margin-right:10px; vertical-align:middle; }
.rlo-mono{ font-family:"Roboto Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.rlo-pts{ font-weight:800; color:#fff; }

/* ---------- dcc.Dropdown (react-select) dark restyle ---------- */
.Select, .Select div, .Select span, .Select input{ font-family:"Titillium Web", sans-serif; }
.Select-control{
  background:var(--card-2) !important; border:1px solid var(--border-strong) !important;
  border-radius:var(--radius-sm) !important; color:var(--text) !important;
  min-height:42px; box-shadow:none !important;
}
.Select.is-focused:not(.is-open) > .Select-control{
  border-color:var(--red) !important; box-shadow:0 0 0 3px var(--red-soft) !important;
}
.Select--single > .Select-control .Select-value, .Select-placeholder{ line-height:40px !important; }
.Select-placeholder{ color:var(--muted) !important; }
.Select-value-label{ color:var(--text) !important; }
.Select-input > input{ color:var(--text) !important; }
.Select-menu-outer{
  background:var(--card-2) !important; border:1px solid var(--border-strong) !important;
  border-radius:var(--radius-sm) !important; margin-top:6px;
  box-shadow:var(--shadow) !important; overflow:hidden; z-index:1200;
}
.Select-option{ background:var(--card-2) !important; color:var(--text) !important; }
.Select-option.is-focused{ background:var(--red-soft) !important; color:#fff !important; }
.Select-option.is-selected{ background:rgba(225,6,0,0.28) !important; color:#fff !important; }
.Select-noresults{ background:var(--card-2) !important; color:var(--muted) !important; }
.Select-arrow{ border-color:var(--muted) transparent transparent !important; }
.is-open .Select-arrow{ border-color:transparent transparent var(--muted) !important; }
.Select-clear-zone, .Select-clear{ color:var(--muted) !important; }
/* multi-select chips */
.Select--multi .Select-value{
  background:rgba(225,6,0,0.16) !important; border:1px solid rgba(225,6,0,0.5) !important;
  color:#fff !important; border-radius:8px !important; margin:3px 4px 0 0;
}
.Select--multi .Select-value-icon{
  border-right:1px solid rgba(225,6,0,0.45) !important; color:#fff !important;
}
.Select--multi .Select-value-icon:hover{ background:rgba(225,6,0,0.35) !important; color:#fff !important; }

/* ---------- Buttons (CSV etc.) ---------- */
.btn-outline-secondary{ color:var(--muted) !important; border-color:var(--border-strong) !important; }
.btn-outline-secondary:hover{ background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.btn{ border-radius:9px !important; font-weight:700; letter-spacing:.3px; }

/* ---------- Plotly containers ---------- */
.js-plotly-plot, .plotly, .dash-graph{ border-radius:12px; background:transparent !important; }
.dash-graph .svg-container, .main-svg{ background:transparent !important; }
._dash-loading{ color:var(--muted) !important; }

/* ---------- Scrollbars ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.22); }

/* ---------- Home / hero ---------- */
.rlo-hero{ padding:20px 4px 12px; }
.rlo-hero-title{
  font-weight:900; font-size:34px; letter-spacing:1px; text-transform:uppercase; line-height:1;
  background:linear-gradient(90deg,#ffffff 0%, #ff5a52 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rlo-hero-sub{ color:var(--muted); font-size:15px; margin-top:6px; }
.rlo-kicker{ color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; margin-bottom:10px; }
.rlo-next-event{ font-weight:800; font-size:22px; color:#fff; line-height:1.1; }
.rlo-next-sub{ color:var(--muted); font-size:13px; margin-top:3px; }
.rlo-next-when{ color:var(--muted); font-size:12px; margin-top:8px; }
.rlo-cd{ font-family:"Roboto Mono", ui-monospace, monospace; font-weight:700; font-size:30px;
  color:var(--red-2); margin-top:12px; letter-spacing:1px; }

/* leaders / podium rows */
.rlo-leader{ display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border); }
.rlo-leader:last-child{ border-bottom:none; }
.rlo-leader-rank{ width:28px; text-align:center; font-weight:800; color:var(--muted); font-size:15px; }
.rlo-leader-name{ font-weight:700; color:#fff; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.rlo-leader-sub{ color:var(--muted); font-size:11px; }
.rlo-leader-pts{ font-weight:800; color:#fff; font-family:"Roboto Mono", ui-monospace, monospace; }

/* live banner */
.rlo-live-banner{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); font-weight:700; color:var(--text); }
.rlo-live-banner.live{ background:rgba(225,6,0,0.14); border-color:rgba(225,6,0,0.5); }
.rlo-live-dot{ color:var(--red-2); font-weight:800; letter-spacing:.5px; white-space:nowrap; }
.rlo-live-dot.off{ color:var(--muted); }
.rlo-live-banner.live .rlo-live-dot{ animation:rlopulse 1.2s infinite; }
@keyframes rlopulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .rlo-title{ font-size:17px; }
  .rlo-subtitle{ display:none; }
  .rlo-action{ padding:8px 12px; font-size:11.5px; }
  .rlo-navbar{ padding:10px 14px; gap:10px; }
  .rlo-tab{ padding:8px 13px !important; font-size:11.5px; }
}