/* ══════════════════════════════════════════════════════════════
   LEADERBOARD (rider table) — all leaderboard styles live here
   ══════════════════════════════════════════════════════════════ */

/* ── Table base ─────────────────────────────────────────────── */
.rider-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed; /* JS sets flex-col widths; fav stays locked at 26px */
}

.rider-table thead tr {
  background: oklch(89% 0.010 220);
}

.rider-table th {
  position: sticky;
  top: 0;
  background: oklch(89% 0.010 220);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 10px var(--space-sm);
  text-align: left;
  border-bottom: 2px solid var(--color-border-strong);
  white-space: nowrap;
}

.rider-table td {
  padding: 5px var(--space-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.rider-table tbody tr:hover td { filter: brightness(0.96); }

/* ── Fav column — permanently fixed, never resizes ─────────── */
.rt-col--fav {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  text-align: center;
  padding: 0 !important;
  position: relative; /* contains the settings button */
}

.rider-table th.rt-col--fav { background: oklch(89% 0.010 220); }
.rider-table td.rt-col--fav { background: oklch(93.5% 0.006 220); }

/* ── Column widths ───────────────────────────────────────────── */
/* Flex columns: JS sets explicit px widths; min-width is a safety floor */
.rt-col--name    { min-width: 70px; }
.rt-col--team    { min-width: 50px; }
.rt-col--speed   { min-width: 90px; }
.rt-col--mileage { min-width: 95px; }
.rt-col--last    { min-width: 75px; }
/* Fixed columns: always this exact width, JS never touches them */
.rt-col--moving  { width: 55px; min-width: 55px; }
.rt-col--online  { width: 55px; min-width: 55px; }

/* ── Per-column tints ───────────────────────────────────────── */
.rider-table th.rt-col--name,
.rider-table td.rt-col--name    { background: oklch(97% 0.002 220); }
.rider-table th.rt-col--name    { background: oklch(90% 0.005 220); }

.rider-table th.rt-col--team,
.rider-table td.rt-col--team    { background: oklch(95% 0.014 250); }
.rider-table th.rt-col--team    { background: oklch(88% 0.016 250); }

.rider-table th.rt-col--speed,
.rider-table td.rt-col--speed   { background: oklch(95.5% 0.010 145); }
.rider-table th.rt-col--speed   { background: oklch(88.5% 0.014 145); }

.rider-table th.rt-col--mileage,
.rider-table td.rt-col--mileage { background: oklch(95.5% 0.006 220); }
.rider-table th.rt-col--mileage { background: oklch(88.5% 0.010 220); }

.rider-table th.rt-col--last,
.rider-table td.rt-col--last    { background: oklch(95.5% 0.010 40); }
.rider-table th.rt-col--last    { background: oklch(88.5% 0.014 40); }

.rider-table th.rt-col--moving,
.rider-table td.rt-col--moving  { background: oklch(95.5% 0.008 145); }
.rider-table th.rt-col--moving  { background: oklch(88.5% 0.012 145); }

.rider-table th.rt-col--online,
.rider-table td.rt-col--online  { background: oklch(95.5% 0.006 220); }
.rider-table th.rt-col--online  { background: oklch(88.5% 0.010 220); }

/* ── Moving / Online — centered icon columns ────────────────── */
.rider-table th.rt-col--moving,
.rider-table th.rt-col--online  { text-align: center; padding: 0 !important; }
.rider-table td.rt-col--moving,
.rider-table td.rt-col--online  { text-align: center; padding: 0 !important; }

/* ── Cell text styles ───────────────────────────────────────── */
.rider-table td.rt-col--name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.rider-table td.rt-col--team {
  color: var(--color-text-secondary);
  font-size: 11px;
}

.rider-table td.rt-col--speed,
.rider-table td.rt-col--mileage,
.rider-table td.rt-col--last {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.rider-table th.rt-col--speed,
.rider-table th.rt-col--mileage,
.rider-table th.rt-col--last { text-align: center; }

/* ── No-signal row ──────────────────────────────────────────── */
.rider-table tr.rt-row--no-signal td {
  opacity: 0.55;
  font-style: italic;
}

/* ── Fav button (star) in td cells ─────────────────────────── */
.rt-fav-btn {
  width: 100%;
  height: 100%;
  min-height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: oklch(72% 0.008 220);
  padding: 3px 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, transform 0.12s;
}

.rt-fav-btn:hover { color: var(--color-orange); transform: scale(1.25); }
.rt-fav-btn--active { color: var(--color-orange); }

/* ── Favourite rows — higher specificity wins over column tints ── */
.rider-table tbody .rt-row--fav td {
  background: oklch(97% 0.022 40);
}

.rider-table tbody .rt-row--fav td.rt-col--name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.rider-table tbody .rt-row--fav td.rt-col--speed,
.rider-table tbody .rt-row--fav td.rt-col--mileage,
.rider-table tbody .rt-row--fav td.rt-col--last {
  color: var(--color-text-secondary);
}

/* ── Status dots ────────────────────────────────────────────── */
@keyframes rt-dot-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(58% 0.20 145 / 0.45); }
  65%  { box-shadow: 0 0 0 4px oklch(58% 0.20 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(58% 0.20 145 / 0); }
}

.rt-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(80% 0.004 220);
  vertical-align: middle;
}

.rt-status-dot--on {
  background: oklch(58% 0.20 145);
  animation: rt-dot-pulse 2.4s ease-out infinite;
}

.rt-status-dot--stale {
  background: oklch(72% 0.14 65);
}

/* ── Hide team column when event has no teams ───────────────── */
.rider-table--no-teams .rt-col--team { display: none; }

/* ── Column visibility (toggled by JS adding class to <table>) ── */
.rider-table.rt-hide--team    .rt-col--team    { display: none; }
.rider-table.rt-hide--speed   .rt-col--speed   { display: none; }
.rider-table.rt-hide--mileage .rt-col--mileage { display: none; }
.rider-table.rt-hide--last    .rt-col--last    { display: none; }
.rider-table.rt-hide--moving  .rt-col--moving  { display: none; }
.rider-table.rt-hide--online  .rt-col--online  { display: none; }

/* ── Settings button (lives inside fav th) ──────────────────── */
.col-settings-btn {
  width: 100%;
  height: 100%;
  min-height: 28px;
  border: none;
  background: transparent;
  color: oklch(64% 0.010 220);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}

.col-settings-btn:hover,
.col-settings-btn--open {
  color: var(--color-orange);
  background: oklch(87% 0.014 250);
}

/* ── Column settings panel (position: fixed, placed via JS) ─── */
.col-settings-panel {
  position: fixed;
  z-index: 200;
  min-width: 186px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-text-primary) 12%, transparent);
  overflow: hidden;
}

.col-settings-panel[hidden] { display: none; }

.col-settings-header {
  padding: 8px var(--space-md) 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.col-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px var(--space-md);
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  gap: var(--space-md);
  transition: background 0.12s, color 0.12s;
}

.col-settings-row:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.col-settings-label { flex: 1; text-align: left; }

/* Toggle pill — same pattern as map settings */
.col-settings-toggle {
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: oklch(82% 0.006 220);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s;
}

.col-settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  transition: transform 0.18s;
}

.col-settings-row--on .col-settings-toggle {
  background: var(--color-live);
}

.col-settings-row--on .col-settings-toggle::after {
  transform: translateX(12px);
}

/* Restore Default button at panel bottom */
.col-settings-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px var(--space-md);
  border: none;
  border-top: 1px solid var(--color-border);
  background: transparent;
  font-size: 11px;
  font-family: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.col-settings-reset-btn:hover {
  background: var(--color-bg-muted);
  color: var(--color-orange);
}

/* ── Sortable column headers ────────────────────────────────── */
.rider-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.rider-table th[data-sort]:hover {
  color: var(--color-text-primary);
  filter: brightness(0.96);
}

.rider-table th[data-sort]::after {
  content: ' ⇅';
  font-size: 9px;
  opacity: 0.3;
  letter-spacing: 0;
}

.rider-table th[data-sort][data-sort-dir="asc"]::after  { content: ' ▲'; opacity: 0.75; }
.rider-table th[data-sort][data-sort-dir="desc"]::after { content: ' ▼'; opacity: 0.75; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rider-table          { font-size: 11px; }
  .rider-table th       { font-size: 10px; padding: 8px var(--space-xs); }
  .rider-table td       { padding: 4px var(--space-xs); }
  .rt-col--moving       { width: 40px; min-width: 40px; }
  .rt-col--online       { width: 40px; min-width: 40px; }
  .rt-col--speed        { min-width: 64px; }
  .rt-col--mileage      { min-width: 72px; }
  .rt-col--last         { min-width: 56px; }
}