/* ══════════════════════════════════════════════════════════════
   LEADERBOARD — the control description sheet.

   An orienteering control description is a ruled table of tiny
   symbols: no fill, no tint, no zebra. Rank and state are read
   off marks, not off colour. This is that sheet, holding riders.
   ══════════════════════════════════════════════════════════════ */

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

.rider-table thead tr { background: var(--indigo); }

/* A printed table head: solid ink, knocked-out type. It anchors a long
   scroll far better than a hairline rule did. */
.rider-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--indigo);
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--wd-data);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ground);
  padding: 10px var(--space-sm);
  text-align: left;
  border-bottom: none;
  border-right: 1px solid #3C4A66;
  white-space: nowrap;
}

.rider-table th:last-child { border-right: none; }

.rider-table th[data-sort]:hover { color: var(--ground); background: #2A3A5C; }
.rider-table th[data-sort]::after { background: #6E747A; }

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

.rider-table td:last-child { border-right: none; }

.rider-table tbody tr { transition: background 0.1s linear; }
.rider-table tbody tr:hover td { background: var(--ground-2); }

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

/* ── Column widths ───────────────────────────────────────────── */
/* Flex columns: JS reads min-width via getComputedStyle and enforces it,
   so table-layout:fixed never squashes a column below these values. */
/* Floors, not preferences: below these the column stops being information.
   recalcColWidths() reads them and never squeezes past them, so a narrow
   sidebar scrolls horizontally rather than rendering "Volks…" everywhere. */
.rt-col--name     { min-width: 104px; }
.rt-col--team     { min-width: 88px;  }
/* Fixed columns: always this exact width, JS never touches them */
.rt-col--bib      { width: 46px; min-width: 46px; max-width: 46px; }
.rt-col--speed    { width: 84px; min-width: 84px; max-width: 84px; }
.rt-col--distance { width: 85px; min-width: 85px; max-width: 85px; }
.rt-col--last     { width: 80px; min-width: 80px; max-width: 80px; }
.rt-col--moving   { width: 57px; min-width: 57px; max-width: 57px; }
.rt-col--online   { width: 57px; min-width: 57px; max-width: 57px; }

/* ── Cell text ──────────────────────────────────────────────── */
/* Bib is the control number: it is the sheet's own index. */
.rider-table td.rt-col--bib {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rider-table th.rt-col--bib { text-align: center; }

.rider-table td.rt-col--name {
  font-weight: 600;
  font-stretch: var(--wd-ui);
  color: var(--ink);
}

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

.rider-table td.rt-col--speed,
.rider-table td.rt-col--distance,
.rider-table td.rt-col--last {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

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

/* ── Moving / Online — centred mark columns ─────────────────── */
.rider-table th.rt-col--moving,
.rider-table th.rt-col--online  { text-align: center; padding-left: 0; padding-right: 0; }
.rider-table td.rt-col--moving,
.rider-table td.rt-col--online  { text-align: center; padding-left: 0; padding-right: 0; }

/* ══════════════════════════════════════════════════════════════
   THE CONTROL CIRCLE — favourite marker and signature interaction.

   Starring a rider draws an ISOM control circle around them, the
   same ring the map then draws at their position. Unstarred it is
   a faint ring waiting to be inked.
   ══════════════════════════════════════════════════════════════ */
.rt-fav-btn {
  width: 100%;
  height: 100%;
  min-height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-fav-btn svg { display: block; overflow: visible; }

.rt-fav-btn circle {
  fill: none;
  stroke: var(--rule-mid);
  stroke-width: 1.6;
  transition: stroke 0.14s var(--ease-draw), stroke-width 0.14s var(--ease-draw);
}

.rt-fav-btn:hover circle { stroke: var(--flame-edge); stroke-width: 2.2; }

.rt-fav-btn--active circle { stroke: var(--flame); stroke-width: 2.4; }
.rt-fav-btn--active:hover circle { stroke: var(--flame-ink); }

/* ── Favourite rows — inked, not tinted ─────────────────────── */
.rider-table tbody .rt-row--fav td { background: var(--flame-wash); }
.rider-table tbody .rt-row--fav:hover td { background: #FBDCEB; }
.rider-table tbody .rt-row--fav td.rt-col--name { color: var(--ink); font-weight: 700; }
.rider-table tbody .rt-row--fav td.rt-col--bib  { color: var(--flame-ink); }

/* ══════════════════════════════════════════════════════════════
   STATE MARKS — every state is a shape AND a colour AND a label.
   Greyscale-readable and colour-blind safe by construction:
     online   solid disc
     stale    half disc
     offline  hollow ring
   ══════════════════════════════════════════════════════════════ */
@keyframes rt-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(232 67 43 / 0.40); }
  70%  { box-shadow: 0 0 0 5px rgb(232 67 43 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(232 67 43 / 0); }
}

.rt-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  /* base = offline: a hollow ring */
  background: transparent;
  border: 1.6px solid var(--state-offline);
}

/* online: solid disc, live-pulsing */
.rt-status-dot--on {
  background: var(--state-live);
  border-color: var(--state-live);
  animation: rt-live-pulse 2.6s var(--ease-draw) infinite;
}

/* stale: half disc — a different shape, not just a different hue */
.rt-status-dot--stale {
  border-color: var(--state-stale);
  background: linear-gradient(90deg, var(--state-stale) 0 50%, transparent 50% 100%);
  animation: none;
}

/* ── A value that actually moved, flashed once ──────────────
   The board repaints on a timer; without this a changed distance
   looked exactly like an unchanged one. render-leaderboard.js adds
   the class only when the text really differs from last tick. */
@keyframes rt-cell-changed {
  0%   { background: var(--flame); color: #fff; }
  100% { background: transparent; color: var(--ink-2); }
}

.rt-cell--changed { animation: rt-cell-changed 1.1s var(--ease-draw); }

/* Rows animate between positions via FLIP (transform), so they must not be
   clipped by their own overflow while sliding. */
.rider-table tbody tr { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .rt-cell--changed { animation: none; }
}

/* ── 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--bib     .rt-col--bib     { display: none; }
.rider-table.rt-hide--speed   .rt-col--speed   { display: none; }
.rider-table.rt-hide--distance .rt-col--distance { 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 the control-circle th) ───── */
.col-settings-btn {
  width: 100%;
  height: 100%;
  min-height: 28px;
  border: none;
  background: transparent;
  color: #8B94A6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.14s, background 0.14s;
}

.col-settings-btn:hover,
.col-settings-btn--open {
  color: var(--ground);
  background: #2A3A5C;
}

/* ══════════════════════════════════════════════════════════════
   PANELS — the map's legend box: ruled, square, floating clear
   of the sheet only where it must sit above the map.
   ══════════════════════════════════════════════════════════════ */
.col-settings-panel {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  background: var(--ground);
  border: 1px solid var(--ink);
  box-shadow: 0 3px 14px rgb(20 23 26 / 0.13);
  overflow: hidden;
}

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

.col-settings-header {
  padding: 9px var(--space-md) 7px;
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--wd-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
}

.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(--rule);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-2);
  cursor: pointer;
  gap: var(--space-md);
  transition: background 0.12s, color 0.12s;
}

.col-settings-row:first-of-type { border-top: none; }
.col-settings-row[hidden] { display: none; }

.col-settings-row:hover {
  background: var(--ground-2);
  color: var(--ink);
}

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

/* Toggle — a square switch, because this world has no pills */
.col-settings-toggle,
.map-settings__row-toggle {
  width: 26px;
  height: 14px;
  background: transparent;
  border: 1.5px solid var(--rule-mid);
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.18s var(--ease-draw), background 0.18s var(--ease-draw);
}

.col-settings-toggle::after,
.map-settings__row-toggle::after {
  content: '';
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 8px;
  height: 8px;
  background: var(--rule-mid);
  transition: transform 0.18s var(--ease-draw), background 0.18s var(--ease-draw);
}

.col-settings-row--on .col-settings-toggle,
.map-settings__row--on .map-settings__row-toggle { border-color: var(--flame); }

.col-settings-row--on .col-settings-toggle::after,
.map-settings__row--on .map-settings__row-toggle::after {
  background: var(--flame);
  transform: translateX(11px);
}

/* Restore Default button at panel bottom */
.col-settings-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px var(--space-md);
  border: none;
  border-top: 1px solid var(--ink);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--wd-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.col-settings-reset-btn:hover {
  background: var(--flame-wash);
  color: var(--flame-ink);
}

/* ── Sortable column headers — drawn marks, not glyphs ─────── */
.rider-table th[data-sort],
.team-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.rider-table th[data-sort]:hover,
.team-table th[data-sort]:hover { color: var(--ink); background: var(--ground-2); }

.rider-table th[data-sort]::after,
.team-table th[data-sort]::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 5px;
  margin-left: 5px;
  vertical-align: middle;
  background: var(--rule-mid);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: background 0.12s;
}

.rider-table th[data-sort][data-sort-dir="asc"]::after,
.team-table th[data-sort][data-sort-dir="asc"]::after { background: var(--flame); }

.rider-table th[data-sort][data-sort-dir="desc"]::after,
.team-table th[data-sort][data-sort-dir="desc"]::after {
  background: var(--flame);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD TYPE TABS (Participants / Teams)
   ══════════════════════════════════════════════════════════════ */
.lb-type-bar {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}

.lb-type-bar[hidden] { display: none; }

.lb-type-btn {
  flex: 1;
  height: 34px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--wd-data);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.14s var(--ease-draw), border-color 0.14s var(--ease-draw);
}

.lb-type-btn + .lb-type-btn { border-left: 1px solid var(--rule); }

.lb-type-btn:hover { color: var(--ink); }

.lb-type-btn--active {
  color: var(--ink);
  border-bottom-color: var(--flame);
}

/* ══════════════════════════════════════════════════════════════
   TEAM LEADERBOARD
   ══════════════════════════════════════════════════════════════ */
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-stretch: var(--wd-data);
  table-layout: fixed;
  background: var(--ground);
}

.team-table thead tr { background: var(--indigo); }

.team-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--indigo);
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--wd-data);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ground);
  padding: 10px var(--space-sm);
  text-align: left;
  border-bottom: none;
  border-right: 1px solid #3C4A66;
  white-space: nowrap;
}

.team-table th:last-child { border-right: none; }
.team-table th[data-sort]:hover { color: var(--ground); background: #2A3A5C; }

.team-table td {
  padding: 7px var(--space-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.team-table td:last-child { border-right: none; }
.team-table tbody tr:hover td { background: var(--ground-2); }

/* ── Column widths ───────────────────────────────────────────── */
.tt-col--pos      { width: 70px; min-width: 70px; text-align: center; }
.tt-col--name     { min-width: 80px; }
.tt-col--distance { width: 110px; min-width: 100px; text-align: right; }
/* Wide enough for the longest translation too (DE "Gesammelter Betrag" needs ~129px) */
.tt-col--money    { width: 135px; min-width: 100px; text-align: right; }

.team-table td.tt-col--pos {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

.team-table td.tt-col--name { font-weight: 600; font-stretch: var(--wd-ui); color: var(--ink); }

.team-table td.tt-col--distance,
.team-table td.tt-col--money { text-align: right; font-variant-numeric: tabular-nums; }

.team-table th.tt-col--distance,
.team-table th.tt-col--money { text-align: right; }

/* ── The leader carries the finish symbol: a double circle ──── */
.team-table tbody tr:first-child td.tt-col--pos {
  position: relative;
  color: var(--flame-ink);
}

.team-table tbody tr:first-child td.tt-col--pos::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--flame);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3.5px var(--ground), inset 0 0 0 5px var(--flame);
  pointer-events: none;
}

/* ── Total row ────────────────────────────────────────────────── */
.tt-row--total td {
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-weight: 700;
  color: var(--ink);
}
.tt-row--total:hover td { background: var(--ground) !important; }

/* ── Empty state ────────────────────────────────────────────── */
.tt-empty,
.rt-empty {
  text-align: center;
  color: var(--ink-3);
  padding: var(--space-2xl) var(--space-md) !important;
  max-width: none !important;
  font-size: 12px;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* lb-type-bar is desktop-only: the 3-way mobile tab bar (Participants /
     Teams / Elevation, see components/sidebar.css) does that switching on mobile. */
  .lb-type-bar { display: none; }

  .rider-table          { font-size: 11px; }
  .rider-table th       { font-size: 9px; padding: 8px var(--space-xs); letter-spacing: 0.08em; }
  .rider-table td       { padding: 6px var(--space-xs); }
  .rt-col--fav          { width: 26px; min-width: 26px; max-width: 26px; }
  .rt-col--bib          { width: 36px; min-width: 36px; max-width: 36px; }
  .rt-col--moving       { width: 40px; min-width: 40px; }
  .rt-col--online       { width: 40px; min-width: 40px; }
  .rt-col--speed        { min-width: 76px; }
  .rt-col--distance      { min-width: 72px; }
  .rt-col--last         { min-width: 56px; }

  .team-table    { font-size: 11px; }
  .team-table th { font-size: 9px; padding: 8px var(--space-xs); }
  .team-table td { padding: 6px var(--space-xs); }
  .tt-col--distance { width: 85px; min-width: 80px; }
  .tt-col--money    { width: 112px; min-width: 80px; }
}