/**
 * Georg Motorsport – Meisterschaftstabelle
 * Uebernimmt die Farb-/Typografie-Tokens des Themes (assets/css/main.css).
 * Faellt auf sinnvolle Defaults zurueck, falls das Theme gewechselt wird.
 */

.gms-standings {
  --_bg: var(--gms-black-2, #151922);
  --_panel: var(--gms-panel, #14181f);
  --_fg: var(--gms-white, #F4F6F8);
  --_muted: var(--gms-muted, #9aa6b2);
  --_cyan: var(--gms-cyan, #00B7C9);
  --_red: var(--gms-red, #D62222);
  --_line: var(--gms-line-2, rgba(244, 246, 248, .18));
  --_shadow: var(--gms-shadow, 0 22px 80px rgba(0, 0, 0, .45));
  --_font-head: var(--gms-font-head, 'Saira Condensed', 'Arial Narrow', Impact, sans-serif);
  --_font-body: var(--gms-font-body, 'Saira', Inter, 'Segoe UI', Arial, sans-serif);

  max-width: 100%;
  margin: 2.5rem 0;
  padding: 1.75rem;
  background: var(--_bg);
  border: 1px solid var(--_line);
  border-radius: 14px;
  box-shadow: var(--_shadow);
  color: var(--_fg);
  font-family: var(--_font-body);
  overflow-x: hidden;
}

.gms-standings__meta {
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--_line);
  padding-bottom: 1rem;
}

.gms-standings__title {
  margin: 0 0 .25rem;
  font-family: var(--_font-head);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 1.4rem;
  color: var(--_fg);
}

.gms-standings__subline {
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  color: var(--_cyan);
  font-weight: 600;
  font-size: .95rem;
}

.gms-standings__checked {
  margin: 0 0 .35rem;
  color: var(--_muted);
  font-size: .8rem;
}

.gms-standings__source {
  margin: 0;
  font-size: .85rem;
}

.gms-standings__source a {
  color: var(--_cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gms-standings__source a:focus-visible,
.gms-standings__tab:focus-visible {
  outline: 2px solid var(--_cyan);
  outline-offset: 2px;
}

.gms-standings__tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.gms-standings__tab {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--_line);
  color: var(--_muted);
  font-family: var(--_font-head);
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.gms-standings__tab.is-active {
  color: var(--_bg);
  background: var(--_cyan);
  border-color: var(--_cyan);
}

.gms-standings__panel {
  display: none;
}

.gms-standings__panel.is-active {
  display: block;
}

/* Ohne JavaScript sind bei view="both" beide Panels sichtbar (js-Klasse hebt das per Skript auf). */
.gms-standings:not(.gms-js) .gms-standings__panel {
  display: block;
}

.gms-standings__empty {
  color: var(--_muted);
  font-style: italic;
}

.gms-standings__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.gms-standings__table thead th {
  position: sticky;
  top: 0;
  background: var(--_panel);
  color: var(--_muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: var(--_font-head);
  font-weight: 600;
  font-size: .8rem;
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 2px solid var(--_line);
}

.gms-standings__table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--_line);
  vertical-align: middle;
}

.gms-standings__table tbody tr:hover {
  background: rgba(244, 246, 248, .04);
}

.gms-standings__col-pos {
  width: 3.5rem;
  font-family: var(--_font-head);
  font-weight: 700;
  color: var(--_cyan);
  text-align: center;
}

.gms-standings__col-points {
  width: 5.5rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gms-standings__table tr.is-georg {
  background: rgba(0, 183, 201, .12);
  box-shadow: inset 3px 0 0 var(--_cyan);
}

.gms-standings__table tr.is-georg .gms-standings__col-pos {
  color: var(--_red);
}

.gms-standings__badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--_cyan);
  color: var(--_bg);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* Mobil: kompakte Kartenansicht statt horizontalem Scrollen. */
@media (max-width: 640px) {
  .gms-standings {
    padding: 1.1rem;
  }

  .gms-standings__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .gms-standings__table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .gms-standings__table,
  .gms-standings__table tbody,
  .gms-standings__table tr {
    display: block;
    width: 100%;
  }

  .gms-standings__table tr {
    margin-bottom: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--_line);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    column-gap: .5rem;
  }

  .gms-standings__table td {
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    padding: .15rem 0;
  }

  .gms-standings__table td:nth-child(2) {
    grid-column: 2;
  }

  .gms-standings__badge {
    display: block;
    margin: .25rem 0 0;
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gms-standings__tab {
    transition: none;
  }
}