/* ============================================================
   Bereich „HRC Dash" — Idle-Racer-Tabelle
   Marc, 01.09.2026: alle Wertungen nebeneinander in EINER Tabelle,
   „schön animiert, 3D". Acht Wertungen = acht Spalten.
   ============================================================ */

/* --- Woher die Zahlen kommen ------------------------------- */
.idle-quelle {
  margin: 0 0 14px; padding: 9px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}
.idle-quelle b { color: var(--text); }
/* Der Rueckfall faellt bewusst auf — eine Zahl von vorhin ist etwas anderes
   als eine von jetzt, und der Leser soll das nicht suchen muessen. */
.idle-quelle--alt { border-color: var(--gt4); color: var(--text); }

/* --- Die Tabelle -------------------------------------------
   `perspective` sitzt auf der Huelle, nicht auf der Tabelle: nur so hat jede
   Zeile ihren eigenen Fluchtpunkt und hebt sich beim Ueberfahren wirklich
   heraus, statt dass die ganze Platte kippt. */
.idle-tab-huelle {
  overflow-x: auto; overflow-y: hidden; perspective: 1400px;
  padding: 6px 2px 10px; margin: 0 -2px;
}
.idle-tab {
  min-width: 1040px; transform-style: preserve-3d;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(8, 10, 18, 0.45); backdrop-filter: blur(8px); overflow: hidden;
}

/* Platz | Fahrer | acht Wertungen. `--spalten` kommt aus dem JS, damit eine
   neunte Wertung keine CSS-Aenderung braucht. */
.idle-kopfzeile, .idle-r {
  display: grid;
  grid-template-columns: 62px minmax(140px, 1.4fr) repeat(var(--spalten, 8), minmax(96px, 1fr));
  align-items: center; gap: 10px; padding: 0 16px;
}

.idle-kopfzeile {
  height: 52px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  position: relative; z-index: 2;
}
.idle-h {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; user-select: none;
  background: none; border: 0; padding: 0; text-align: left;
}
.idle-h.num { justify-self: end; text-align: right; }
.idle-h.sortable { cursor: var(--cur-pointer); transition: color 0.15s, text-shadow 0.15s; }
.idle-h.sortable:hover { color: var(--cyan); }
.idle-h.sortable:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Die sortierte Spalte glimmt — bei acht Spalten muss auf einen Blick klar
   sein, wonach der Platz links vergeben wurde. */
.idle-h.sorted { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); }
.idle-h .arrow { font-size: 9px; opacity: 0.9; }
.idle-h i { font-style: normal; }

/* --- Zeilen ------------------------------------------------- */
.idle-koerper { position: relative; transform-style: preserve-3d; }
.idle-r {
  height: 54px; border-bottom: 1px solid var(--line); position: relative;
  transform-style: preserve-3d;
  transition: transform 0.22s ease-out, background 0.18s, box-shadow 0.22s;
}
.idle-r:last-child { border-bottom: 0; }
/* Die Zeile kommt beim Ueberfahren nach vorn statt nur die Farbe zu wechseln —
   das ist die ganze „3D"-Idee: Tiefe durch Bewegung, nicht durch Schatten. */
.idle-r:hover {
  background: var(--card-hover); z-index: 3;
  transform: translateZ(26px) scale(1.004);
  box-shadow: 0 14px 34px -16px rgba(0, 229, 255, 0.5), inset 22px 0 30px -26px var(--cyan);
}
.idle-r--p1 { --rowc: var(--gt4); }
.idle-r--p2, .idle-r--p3 { --rowc: var(--cyan); }
.idle-r--p1, .idle-r--p2, .idle-r--p3 { border-left: 3px solid var(--rowc); }
.idle-r--p1:hover { box-shadow: 0 14px 34px -16px rgba(255, 176, 32, 0.55); }

.idle-z { min-width: 0; font-size: 13.5px; color: var(--text); }
.idle-z.num {
  justify-self: end; text-align: right; position: relative;
  padding: 6px 8px; border-radius: 5px; overflow: hidden; width: 100%;
}
.idle-z b { position: relative; z-index: 2; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Der Balken liegt HINTER der Zahl — bei acht Spalten ist daneben kein Platz,
   und als Fuellung gibt er der Zeile Struktur ohne eigene Spalte. */
.idle-fuell {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.05), rgba(0, 229, 255, 0.22));
  border-right: 1px solid rgba(0, 229, 255, 0.35);
}
.idle-r--p1 .idle-fuell {
  background: linear-gradient(90deg, rgba(255, 176, 32, 0.06), rgba(255, 176, 32, 0.26));
  border-right-color: rgba(255, 176, 32, 0.4);
}

.idle-z--platz {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 15px;
}
.idle-r--p1 .idle-z--platz, .idle-r--p2 .idle-z--platz, .idle-r--p3 .idle-z--platz { font-size: 18px; }
/* „geteilt" steht an JEDER Zeile eines geteilten Platzes — sonst sieht die
   Nummerierung nach einem Fehler aus. */
.idle-z--platz em {
  font-style: normal; font-size: 8.5px; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.55; margin-top: 1px;
}
.idle-z--name {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idle-r:hover .idle-z--name { color: var(--rowc, var(--cyan)); }

/* --- Hinweise ----------------------------------------------- */
.idle-tipp, .idle-fuss { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.idle-tipp { margin: 10px 0 0; }
.idle-fuss { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.idle-fuss b { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .idle-r { transition: background 0.18s; }
  .idle-r:hover { transform: none; }
}
@media (max-width: 900px) {
  /* Am Handy bleibt die Tabelle breit und wird gewischt — Spalten wegzulassen
     hiesse, genau die Uebersicht zu nehmen, um die es Marc ging. Die Hebung
     entfaellt, sie stoert beim Wischen. */
  .idle-r:hover { transform: none; box-shadow: none; }
  .idle-tipp::before { content: '↔ '; }
}

/* --- Podest der ersten drei (Marc, 01.09.2026) --------------
   Wechselt mit der Sortierung mit: wonach sortiert wird, dafuer steht es.
   Bei Gleichstand koennen es mehr als drei Karten sein — dann ist das die
   Aussage, nicht ein Fehler. */
.idle-podest {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.idle-pod {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 14px; border-radius: var(--radius);
  background: var(--card-strong); border: 1px solid var(--line);
  border-top: 3px solid var(--pc, var(--cyan)); position: relative;
  transition: transform 0.2s ease-out, box-shadow 0.2s;
}
.idle-pod[data-profil] { cursor: var(--cur-pointer); }
.idle-pod[data-profil]:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px var(--pc, var(--cyan)); }
.idle-pod--1 { --pc: var(--gt4); }
.idle-pod--2 { --pc: var(--cyan); }
.idle-pod--3 { --pc: var(--gte); }
.idle-pod__m { font-size: 22px; line-height: 1; }
.idle-pod__n { font-weight: 700; font-size: 15px; color: var(--text); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idle-pod__w { font-size: 21px; font-weight: 800; color: var(--pc, var(--cyan));
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.idle-pod__l { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.avatar--gross { width: 56px; height: 56px; font-size: 18px; }

/* Fahrerzelle in der Tabelle */
.idle-z.driver-cell { gap: 9px; }
.idle-z--klick { cursor: var(--cur-pointer); }
.idle-z--klick:hover .driver-cell__name { color: var(--rowc, var(--cyan)); }
.idle-z .driver-cell__name { font-size: 14px; font-weight: 600; }
/* Nicht zugeordnet: bewusst zurueckhaltend statt fehlerhaft aussehend. */
.avatar--fremd { display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-1); border: 1px dashed var(--line); color: var(--text-faint); }
.idle-fremd { color: var(--text-dim); font-weight: 500; }