/* ==========================================================================
   TH NOIR EDITORIAL DESIGN SYSTEM - LAYOUT: DASHBOARD (layout_dashboard.css)
   Die Layout-Dateien layout_*.css laden hintereinander (Reihenfolge in index.html zählt).
   Volle Responsivität: Mobile (375px) bis Ultra-Wide (2560px)
   ========================================================================== */

/* ==========================================================================
   1. GRID SYSTEM & RESPONSIVITÄT (GLOBAL & DASHBOARD)
   ========================================================================== */

.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6);
  transition: max-width 0.3s ease;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: var(--space-7);
  align-items: start;
  width: 100%;
}

/* Dashboard-Raster: Handy eine Spalte in Markup-Reihenfolge (Rennen, Boxenfunk,
   Setup zuerst), Tablet zwei, ab 1200px (mit Seitenleiste) drei Spalten.
   Flaechen so gepaart, dass aehnlich hohe Karten nebeneinander stehen; der
   Smoke-Test „Dashboard-Raster“ misst die groesste Luecke. */
.dashboard-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .dashboard-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "rennen setup"
      "rennen aufgaben"
      "boxenfunk fahrzeug"
      "saison fahrer";
    gap: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .dashboard-raster {
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "rennen setup saison"
      "rennen boxenfunk saison"
      "aufgaben boxenfunk fahrzeug"
      "fahrer fahrer fahrzeug";
  }
}

@media (min-width: 768px) {
  .dashboard-raster__rennen { grid-area: rennen; }
  .dashboard-raster__boxenfunk { grid-area: boxenfunk; }
  .dashboard-raster__setup { grid-area: setup; }
  .dashboard-raster__aufgaben { grid-area: aufgaben; }
  .dashboard-raster__fahrer { grid-area: fahrer; }
  .dashboard-raster__fahrzeug { grid-area: fahrzeug; }
  .dashboard-raster__saison { grid-area: saison; }
}

/* --- Dashboard: Editorial Typography & Layout --- */
.screen-title {
  margin-bottom: var(--space-2);
}

.section-title {
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-ink-black);
  padding-bottom: var(--space-2);
}

.section-title--compact {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
}

.section-desc {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.section-desc--sm {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.dashboard-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.advisor-attribution {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-advisor-bubble {
  margin-top: var(--space-4);
}

/* Week action CTA card */
.dashboard-week-action {
  border-color: var(--color-accent);
  border-left: 4px solid var(--color-accent);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background:
    linear-gradient(135deg, var(--week-plan-tint) 0%, transparent 55%),
    var(--color-midnight-card);
  box-shadow:
    inset 3px 0 0 var(--week-plan-accent-shadow),
    var(--comic-shadow);
}

.setup-card[hidden] { display: none; }
.setup-auto { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; margin: var(--space-3) 0 var(--space-2); cursor: pointer; }
.setup-sliders { display: flex; flex-direction: column; gap: 0.35rem; }
.setup-slider { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--space-2); font-size: 0.8rem; color: var(--color-text-muted); }
.setup-slider output { font-weight: 700; color: var(--color-accent); font-family: var(--font-mono); }
.setup-slider input[type="range"] { grid-column: 1 / -1; width: 100%; padding: 0; }
.setup-slider input[type="range"]:disabled { opacity: 0.45; }
/* Trainingslaeufe (#141): Feedback je Lauf als Text unter den Reglern. */
.setup-feedback { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.setup-feedback span { color: var(--color-text-muted); }
#qualifyingTable tr.player-team-row td { color: var(--color-accent); font-weight: 700; }
/* Hinweis zur Angriffsrunde (#142) in eigener Zeile, damit die Fahrerspalte nicht breiter wird. */
#qualifyingTable .quali-runde { display: block; white-space: normal; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
/* Breiter als die 600px-Grundbreite, damit alle fuenf Spalten passen (#133);
   mobil entfaellt die Team-Spalte (eigene Zeile bleibt farbig markiert), die
   Zellen ruecken enger und Namen duerfen umbrechen. */
#qualifyingModal .modal-content { max-width: 720px; }
/* Zwei Schritte (#142): Wahl, dann Startaufstellung; Knoepfe und Bereiche per hidden. */
#qualifyingModal [hidden] { display: none; }
@media (max-width: 767px) {
  #qualifyingModal .modal-content { padding: var(--space-4); }
  #qualifyingTable { width: 100%; font-size: var(--text-sm); }
  #qualifyingTable :is(th, td) { padding: var(--space-2); }
  #qualifyingTable :is(th, td):nth-child(3) { display: none; }
}

.dashboard-week-cta {
  width: 100%;
  font-size: 1.1rem;
  padding: var(--space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-headline);
  border-width: 2px;
}

.dashboard-week-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent-fill) 45%, transparent);
}

.dashboard-standings-table {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

/* Driver mini stat cards */
.dashboard-driver-card {
  padding: var(--space-4);
  border-width: 2px;
}

.dashboard-driver-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dashboard-driver-name {
  font-family: var(--font-headline);
}

.dashboard-driver-stats {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: var(--space-3);
}

.mini-stat__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.mini-stat__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.mini-stat__value {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--color-accent);
}

.mini-stat__bar {
  height: 6px;
  background: rgba(2, 2, 3, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

.mini-stat__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.35s ease;
}

.mini-stat__fill--pace {
  background: linear-gradient(90deg, var(--color-accent-fill) 0%, var(--color-accent) 100%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-fill) 35%, transparent);
}

.mini-stat__fill--experience {
  background: linear-gradient(90deg, #5a6a7a 0%, #c0c8d4 100%);
  box-shadow: 0 0 6px rgba(192, 200, 212, 0.25);
}

/* Car performance gauge bars */
.perf-gauge {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.35rem var(--space-3);
  align-items: center;
}

.perf-gauge__header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.perf-gauge__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.perf-gauge__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-align: right;
}

.perf-gauge__track {
  position: relative;
  height: 10px;
  background: rgba(2, 2, 3, 0.6);
  border: 1.5px solid var(--color-ink-black);
  border-radius: 999px;
  overflow: visible;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}

.perf-gauge__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}

.perf-gauge--gold .perf-gauge__fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-fill) 35%, transparent) 0%, var(--color-accent-fill) 85%, var(--color-accent) 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-fill) 35%, transparent);
}

.perf-gauge--blue .perf-gauge__fill {
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.35) 0%, var(--color-comic-blue) 85%, #a8d8f0 100%);
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.35);
}

.perf-gauge__needle {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 14px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.perf-gauge__value {
  font-size: 0.85rem;
  font-weight: 800;
  font-family: monospace;
  min-width: 2rem;
  text-align: right;
  color: var(--color-accent);
}

.perf-gauge--blue .perf-gauge__value {
  color: var(--color-comic-blue-text);
}

/* Standings position badges */
.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.15rem 0.45rem;
  font-size: var(--text-xs);
  font-weight: 800;
  font-family: var(--font-headline);
  letter-spacing: 0.04em;
  border-radius: 4px;
  border: 1.5px solid var(--color-ink-black);
  background: var(--color-midnight);
  color: var(--color-text-muted);
}

.pos-badge--p1 {
  background: linear-gradient(135deg, #f4d03f 0%, #d4a54a 55%, #a67c00 100%);
  color: #1a1200;
  border-color: #a67c00;
  box-shadow: 0 0 10px rgba(212, 165, 74, 0.45);
}

.pos-badge--p2 {
  background: linear-gradient(135deg, #eef1f5 0%, #b8bec8 55%, #8a919c 100%);
  color: #1a1d22;
  border-color: #8a919c;
  box-shadow: 0 0 8px rgba(184, 190, 200, 0.35);
}

.pos-badge--p3 {
  background: linear-gradient(135deg, #e8a86a 0%, #c4722a 55%, #8b4513 100%);
  color: #1a0f05;
  border-color: #8b4513;
  box-shadow: 0 0 8px rgba(196, 114, 42, 0.35);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-2);
}

/* --- Responsive Breakpoints (Mobile 375px bis Ultra-Wide 2560px) --- */

/* Mobile (ab 375px bis 767px) */
@media (max-width: 767px) {
  .app-container {
    padding: var(--space-3);
    gap: var(--space-4);
  }
  
  header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  
  .brand h1 {
    font-size: 1.6rem;
    text-align: center;
  }
  
  header div[style*="display: flex"] {
    justify-content: space-between;
    width: 100%;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  
  .kpi-card {
    padding: var(--space-3);
  }
  
  .kpi-card span.kpi-val {
    font-size: var(--text-xl);
  }

  /* Schmale Kacheln: Text bricht um, statt Trend und Rennen abzuschneiden. */
  .kpi-card span.kpi-val--event,
  .kpi-sub {
    white-space: normal;
  }

  .kpi-icon {
    width: var(--space-8);
    height: var(--space-8);
    font-size: var(--text-base);
  }
}

/* Tablet (768px bis 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-6);
  }
  
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Large Desktop (1024px bis 1599px) */
@media (min-width: 1024px) and (max-width: 1599px) {
  .dashboard-grid {
    grid-template-columns: 2fr 1.05fr;
    gap: var(--space-7);
  }
  
  .kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ultra-Wide Desktop (1600px bis 2560px) */
@media (min-width: 1600px) {
  .app-container {
    max-width: 1750px;
  }
  
  .dashboard-grid {
    grid-template-columns: 2.2fr 0.95fr;
    gap: var(--space-9);
  }
  
  .kpi-row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
  
  .kpi-card {
    padding: var(--space-5);
  }
}

/* Super Ultra-Wide (ab 2000px) */
@media (min-width: 2000px) {
  .app-container {
    max-width: 2100px;
  }
  
  .dashboard-grid {
    grid-template-columns: 2.4fr 0.9fr;
    gap: var(--space-10);
  }
}

/* Seitenleiste ab Desktop-Breite: .menu-tabs links über die volle Höhe, Kopf,
   Kacheln, Inhalt und Fuß rechts. Gleicher Breakpoint wie die Navigation in
   main.css; ab 1200px bleibt rechts mindestens so viel Platz wie bisher bei
   1024px. Im Rennen gilt das alte Layout, das Rennen behält die volle Breite. */
@media (min-width: 1200px) {
  .app-container:not(.app-container--rennen) {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-6);
    max-width: none;
    margin: 0;
    padding: 0 var(--space-6) 0 0;
  }

  .app-container:not(.app-container--rennen) > :not(.menu-tabs) {
    grid-column: 2;
  }

  .app-container:not(.app-container--rennen) > .app-header {
    margin-top: var(--space-6);
  }
}



/* Wochenplan: Auswahl und Start bleiben in derselben Karte. */
.dashboard-card-label {
  font-size: var(--text-xs);
  letter-spacing: var(--type-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0;
}
.dashboard-week-event { font-family: var(--font-headline); font-size: var(--text-2xl); line-height: var(--text-2xl-lh); font-weight: var(--type-weight-headline); margin: 0; }
.dashboard-week-meta { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.dashboard-week-action .section-desc { margin-bottom: 0; }
.dashboard-week-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dashboard-week-links .glass-button, .dashboard-card-link { padding: var(--space-2) var(--space-4); }
.dashboard-card-link { margin-top: var(--space-4); }

/* Eckdaten (naechstes Rennen) und Saisonbilanz als Kennzahlen-Reihe */
.dashboard-race-facts, .dashboard-season-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
  gap: var(--space-2);
  margin: 0;
}
.dashboard-season-stats { margin-bottom: var(--space-5); }
.dashboard-race-facts > div, .dashboard-season-stats > div {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--space-2);
  background: var(--surface-inset);
}
.dashboard-race-facts dt, .dashboard-season-stats dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--type-letter-spacing-caps);
  color: var(--color-text-muted);
}
.dashboard-race-facts dd, .dashboard-season-stats dd {
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  font-weight: 700;
}
.dashboard-season-trend__text { margin: 0 0 var(--space-2); }
.dashboard-season-trend__chart {
  height: var(--dashboard-trend-height);
  margin-bottom: var(--space-5);
}

/* Fahrerkader: Karten nebeneinander, sobald Platz ist */
.dashboard-drivers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}

/* Laufende Aufgaben */
.dashboard-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dashboard-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent-fill);
  background: var(--surface-inset);
  border-radius: var(--space-1);
}
.dashboard-task__titel { grid-column: 1 / -1; font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.dashboard-task__frist { grid-row: 2; grid-column: 2; font-size: var(--text-sm); color: var(--color-accent-text); white-space: nowrap; }
.dashboard-task__praemie { grid-row: 2; grid-column: 1; font-size: var(--text-sm); color: var(--color-comic-green-text); }
.dashboard-task--leer { display: block; border-left-color: var(--surface-card-border); color: var(--color-text-muted); }
.dashboard-training { padding: var(--space-3); border: 1.5px dashed var(--color-accent); border-radius: var(--comic-border-radius); background: var(--color-halftone-gray); }
.dashboard-training-title { display: block; font-family: var(--font-headline); font-weight: 700; color: var(--color-accent-text); margin-bottom: var(--space-2); }
.dashboard-training p { font-size: var(--text-sm); margin-bottom: var(--space-3); }
.dashboard-training-select { width: 100%; font-size: var(--text-sm); padding: var(--space-2); }
#trainingEffectBadge { font-size: var(--text-sm); font-weight: 700; min-height: var(--space-4); margin-top: var(--space-2); }
.dashboard-driver-badges { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }