/* Cockpit - Startseite der Leitstelle (src/views/cockpit.js).
 *
 * Nur fuer index.html, geladen nach components.css. Alle Regeln tragen das
 * Praefix .cockpit-; Farben kommen ausschliesslich aus tokens.css (und im
 * Kunden-Erscheinungsbild aus mandant-vhv.css), hier steht kein fester Wert.
 *
 * Signalgelb (--konflikt-signal) steht in dieser Datei an genau zwei
 * Selektoren: .cockpit-konflikt-band und .cockpit-tagesleiste-ueberschneidung.
 * Es ist nie Text, nie Flaeche unter Text, nie Fokus, und liegt immer
 * zwischen zwei Kanten in --konflikt-kante.
 *
 * Kontraste (gerechnet im Browser am 15.09.2026, limou/VHV x hell/dunkel,
 * gegen die naechste deckende Flaeche; Zahlen im Abschlussbericht des
 * Umbaus G1): Zeilen- und Kacheltexte stehen in --schrift-stark/-normal/
 * -leise auf --flaeche-karte, Streifentexte auf ihrer eigenen Flaeche.
 */

/* ---------------------------------------------------------------- Wurzel
 * Der Rahmen der Seite haelt die Vorgaben fuer die Tagesleiste. Gesetzt
 * werden sie von cockpit.js je Leiste (--fenster-von/-bis) und je Streifen
 * (--start/--ende) als Minuten seit Mitternacht; die Vorgaben hier sorgen
 * dafuer, dass jede calc()-Rechnung auch dann gilt, wenn ein Wert fehlt -
 * der Streifen liegt dann am linken Rand statt die Regel zu verwerfen. */
.cockpit {
  --fenster-von: 360;  /* 06:00 */
  --fenster-bis: 1320; /* 22:00 */
  --start: 360;
  --ende: 360;
}

/* ------------------------------------------------------------- Kacheln */

.cockpit-reihe { align-items: stretch; }
/* Kacheln einer Reihe gleich hoch, der Fuss sitzt unten. Die Kacheln der
   ersten Reihe stecken in einem Huellen-div (Minutentakt tauscht nur den
   Inhalt), die der zweiten stehen direkt im Raster. */
.cockpit-reihe > div:not(.karte) { display: flex; flex-direction: column; min-width: 0; }
.cockpit-reihe > div:not(.karte) > .karte,
.cockpit-reihe > .karte { flex: 1; }

.cockpit-kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cockpit-kachel-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5) var(--raum-2);
}

.cockpit-kachel-titel {
  font-size: var(--grad-3);
  font-weight: var(--gewicht-abschnitt);
  color: var(--schrift-stark);
}

/* Die Zahl ist die Kennzahl der Kachel (wie .kennzahl-wert). Der Ton faerbt
   nur sie: gefahr, warnung (Braun, kein Gelb) und gut wie in components.css. */
.cockpit-kachel-zahl {
  font-family: var(--schriftfamilie-zahl);
  font-size: var(--grad-7);
  font-weight: var(--fett-halb);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--schrift-stark);
  white-space: nowrap;
}
.cockpit-kachel-einheit {
  font-size: var(--grad-1);
  font-weight: var(--fett-normal);
  letter-spacing: 0;
  color: var(--schrift-leise);
  margin-left: var(--raum-2);
}
.cockpit-kachel-gefahr .cockpit-kachel-zahl { color: var(--gefahr-schrift); }
.cockpit-kachel-warnung .cockpit-kachel-zahl { color: var(--warn-schrift); }
.cockpit-kachel-gut .cockpit-kachel-zahl { color: var(--gut-schrift); }

.cockpit-kachel-koerper {
  flex: 1;
  padding: 0 var(--raum-5) var(--raum-4);
  min-width: 0;
}

.cockpit-kachel-fuss { font-size: var(--grad-2); flex-wrap: wrap; row-gap: var(--raum-2); }
.cockpit-kachel-fuss .verweis { white-space: nowrap; }

.cockpit-zwischentitel {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
}

/* ------------------------------------------------------------- Zeilen */

.cockpit-zeilen { display: flex; flex-direction: column; }
.cockpit-zeilen > * + * { border-top: 1px solid var(--linie-leise); }

.cockpit-zeile {
  display: grid;
  grid-template-columns: minmax(52px, max-content) minmax(0, 1fr);
  column-gap: var(--raum-3);
  row-gap: var(--raum-1);
  align-items: start;
  padding: var(--raum-2) 0;
  min-width: 0;
}

/* Zeit oder Kennzeichen links; Abzeichen und Knopf stehen unter dem Text,
   damit die Kachel auch mit vier Spalten lesbar bleibt. */
.cockpit-zeile-links {
  grid-column: 1;
  padding-top: 2px;
  font-family: var(--schriftfamilie-fest);
  font-variant-numeric: tabular-nums;
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}

.cockpit-zeile-text { grid-column: 2; min-width: 0; }

.cockpit-zeile-haupt {
  display: block;
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.cockpit-zeile-verweis { color: var(--schrift-stark); }
a.cockpit-zeile-verweis:hover { color: var(--schrift-akzent); }

.cockpit-zeile-unter {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-zeile-rechts {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  min-width: 0;
}
/* Ein Knopf der Initiative traegt Fahrer- und Fahrzeugnamen; in einer
   Kachel darf er umbrechen statt aus ihr herauszulaufen. */
.cockpit-zeile-rechts .knopf,
.cockpit-konflikt-aktionen .knopf {
  max-width: 100%;
  height: auto;
  min-height: 27px;
  padding-top: var(--raum-1);
  padding-bottom: var(--raum-1);
  white-space: normal;
  text-align: left;
}

.cockpit-rest { padding-top: var(--raum-2); }

/* ------------------------------------------------------------ Konflikte
 * Konfliktband: 12 px Signalgelb zwischen zwei 2 px Kanten in Tinte.
 * Gelb misst gegen Papier nur 1.73:1 und steht deshalb nie allein; die
 * Kante liegt in beiden Themen in --konflikt-kante (Tinte gegen Gelb 9.40:1).
 * Im Kunden-Erscheinungsbild ist --konflikt-signal die Gefahrlinie. */
.cockpit-konflikt-band {
  height: 12px;
  background: var(--konflikt-signal);
  border-top: 2px solid var(--konflikt-kante);
  border-bottom: 2px solid var(--konflikt-kante);
  border-radius: var(--rund-1);
}

/* Die Kachel mit Konflikten bekommt die Konfliktlinie als Rahmen - Tinte,
   kein Signalgelb: Gelb bleibt dem Band und der Ueberschneidung vorbehalten. */
.cockpit-kachel-mit-konflikt {
  border-color: var(--konflikt-linie);
}

.cockpit-konflikt-kasten {
  background: var(--konflikt-flaeche);
  border: 1px solid var(--konflikt-linie);
  border-radius: var(--rund-2);
  padding: var(--raum-3) var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  min-width: 0;
}
.cockpit-konflikt-oberzeile {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--konflikt-schrift);
}
.cockpit-konflikt-fahrt {
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.cockpit-konflikt-liste {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--grad-2);
  color: var(--schrift-normal);
}
.cockpit-konflikt-liste li + li { margin-top: 2px; }
.cockpit-konflikt-aktionen {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  padding-top: var(--raum-1);
}

/* ------------------------------------------------------------ Tagesbeginn
 * Das Band der Uebersicht als <details>: der Kopf ist die summary. Ohne
 * Skript steht es offen. */
.cockpit-tagesbeginn-kopf {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  flex-wrap: wrap;
  padding: var(--raum-4) var(--raum-5);
  min-height: 48px;
}
.cockpit-tagesbeginn-kopf::-webkit-details-marker { display: none; }
.cockpit-tagesbeginn-kopf::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  align-self: center;
  border-right: 2px solid var(--schrift-leise);
  border-bottom: 2px solid var(--schrift-leise);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
.cockpit-tagesbeginn[open] > .cockpit-tagesbeginn-kopf::before { transform: rotate(45deg); }
.cockpit-tagesbeginn[open] > .cockpit-tagesbeginn-kopf { border-bottom: 1px solid var(--linie); }
.cockpit-tagesbeginn-kopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* ------------------------------------------------------------ Tagesleiste
 * Streifen und Linien liegen absolut in der Spur. Position und Breite
 * rechnen aus Minuten: --start, --ende am Element, --fenster-von,
 * --fenster-bis an .cockpit-leiste. */
.cockpit-leiste {
  --cockpit-leiste-name: 140px;
  /* 48px: Platz fuer zwei Zeilen im Streifen (Uhrzeit, Ziel). */
  --cockpit-leiste-hoehe: 48px;
  overflow: hidden;
}

.cockpit-leiste-zeile {
  display: grid;
  grid-template-columns: var(--cockpit-leiste-name) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--linie-leise);
}
.cockpit-leiste-zeile:first-child { border-top: none; }

.cockpit-leiste-name {
  padding: var(--raum-2) var(--raum-4);
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
  border-right: 1px solid var(--linie);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: var(--cockpit-leiste-hoehe);
}
.cockpit-leiste-skala .cockpit-leiste-name {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-weight: var(--fett-normal);
}

.cockpit-leiste-spur {
  position: relative;
  min-height: var(--cockpit-leiste-hoehe);
  overflow: hidden;
  background: var(--flaeche-karte);
}
.cockpit-leiste-skala .cockpit-leiste-spur {
  min-height: 28px;
  background: var(--flaeche-vertieft);
}

.cockpit-streifen,
.cockpit-tagesleiste-ueberschneidung,
.cockpit-jetzt-linie,
.cockpit-leiste-marke {
  position: absolute;
  left: calc((var(--start) - var(--fenster-von)) / (var(--fenster-bis) - var(--fenster-von)) * 100%);
}
.cockpit-streifen,
.cockpit-tagesleiste-ueberschneidung {
  width: calc((var(--ende) - var(--start)) / (var(--fenster-bis) - var(--fenster-von)) * 100%);
}

.cockpit-leiste-marke {
  top: 6px;
  transform: translateX(-50%);
  font-family: var(--schriftfamilie-fest);
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  white-space: nowrap;
}
.cockpit-leiste-marke::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  height: 6px;
  border-left: 1px solid var(--linie-stark);
}

/* Streifen: Text auf eigener Flaeche. Geplant und disponiert tragen
   Tinte auf heller Flaeche, unterwegs die Akzentflaeche mit Akzentschrift
   (limou hell Weiss auf Petrol 7.83, dunkel Tinte auf Petrol hell 8.73),
   abgeschlossen die gruene Flaeche mit Tinte. Der Rand markiert Anfang und
   Ende der Fahrt und traegt deshalb die Schriftfarbe des Status (Grenze
   3:1 gegen die Spur), nicht die leise Kartenlinie. */
.cockpit-streifen {
  top: 5px;
  bottom: 5px;
  min-width: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* Innenrand an den Zeilen, nicht am Streifen: nur so kann ein schmaler
     Streifen ihn ueber die Containerabfrage unten abgeben. */
  padding: 0 2px;
  line-height: 1.15;
  border-radius: var(--rund-1);
  border: 1px solid var(--schrift-leise);
  background: var(--flaeche-still);
  color: var(--schrift-stark);
  font-size: var(--grad-1);
  font-weight: var(--fett-mittel);
  text-decoration: none;
  overflow: hidden;
}
.cockpit-streifen:hover { text-decoration: none; border-width: 2px; }
/* Streifen ueber der Jetzt-Linie: sonst zerschnitt die Linie den Text
   der laufenden Fahrt ("10:05" in zwei Haelften, 22.09.2026). */
.cockpit-leiste-spur .cockpit-streifen { z-index: 2; }
.cockpit-streifen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; z-index: 2; }
.cockpit-streifen-zeit,
.cockpit-streifen-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cockpit-streifen-zeit,
.cockpit-streifen-text { padding: 0 6px; }
.cockpit-streifen-zeit { font-weight: var(--fett-halb); font-variant-numeric: tabular-nums; }
.cockpit-streifen-text { font-weight: var(--fett-normal); }

/* Anfahrt (23.09.2026): blasser Vorlauf ab dem Losfahr-Zeitpunkt bis zur
   Abholzeit. Kein Text, schmaler als der Streifen, schraffiert in der
   starken Linie; die linke Kante in --schrift-leise haelt 3:1 gegen die Spur
   wie der Rand des Streifens. Die Angabe steht im title und im Streifen. */
.cockpit-streifen-anfahrt {
  position: absolute;
  left: calc((var(--start) - var(--fenster-von)) / (var(--fenster-bis) - var(--fenster-von)) * 100%);
  width: calc((var(--ende) - var(--start)) / (var(--fenster-bis) - var(--fenster-von)) * 100%);
  top: 14px;
  bottom: 14px;
  box-sizing: border-box;
  border-left: 2px solid var(--schrift-leise);
  background: repeating-linear-gradient(135deg, var(--linie-stark) 0 2px, transparent 2px 6px);
  z-index: 1;
}

/* Plantafel und "Jetzt zu tun" (23.09.2026): untereinander, ab 1760px
   nebeneinander (zwei Drittel zu einem Drittel). Bei 1440px war die Tafel
   daneben zu schmal: Streifen um 13:00 zeigten die Uhrzeit zweizeilig. */
.cockpit-mitte { display: flex; flex-direction: column; gap: var(--raum-6); min-width: 0; }
.cockpit-mitte > * { min-width: 0; }
@media (min-width: 1760px) {
  .cockpit-mitte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  /* In der schmalen Spalte: Titel und Verweis in einer Zeile, die
     Beschreibung darunter - sonst brach "Jetzt zu tun" zweizeilig um. */
  .cockpit-mitte .abschnitt-kopf { flex-wrap: wrap; row-gap: var(--raum-1); }
  .cockpit-mitte .abschnitt-titel { white-space: nowrap; }
  .cockpit-mitte > :last-child .abschnitt-kopf > .klein { order: 3; flex-basis: 100%; }
}

/* Schmale Streifen (kurze Fahrt, weites Fenster): der Rand innen schrumpft,
   die Uhrzeit wird nicht mit "..." gekuerzt und das Ziel faellt weg, statt
   als "Ne..." dazustehen. Gemessen wird an der Breite des Streifens selbst. */
.cockpit-streifen { container-type: inline-size; }
@container (max-width: 44px) {
  .cockpit-streifen-zeit { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
  .cockpit-streifen-doppelpunkt { display: none; }
}
@container (max-width: 64px) {
  .cockpit-streifen-zeit { text-overflow: clip; padding: 0; text-align: center; font-size: var(--grad-0); }
  .cockpit-streifen-text { display: none; }
}
/* Angefragt: noch kein Fahrer, kein Wagen zugesagt. Die gestrichelte Kante
   sagt das ohne Farbe - die Flaeche bleibt die stille Flaeche der Spur. */
.cockpit-streifen-geplant {
  border-style: dashed;
}
.cockpit-streifen-disponiert {
  background: var(--info-flaeche);
  border-color: var(--info-schrift);
}
.cockpit-streifen-unterwegs {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
}
.cockpit-streifen-abgeschlossen {
  background: var(--gut-flaeche);
  border-color: var(--gut-schrift);
}

/* Ueberschneidung zweier Fahrten desselben Fahrers: Signalgelb zwischen zwei
   Kanten, oben in der Spur ueber den Streifen. Zweite und letzte Stelle mit
   --konflikt-signal am Arbeitsplatz. */
.cockpit-tagesleiste-ueberschneidung {
  top: 0;
  height: 10px;
  box-sizing: border-box;
  background: var(--konflikt-signal);
  border-top: 2px solid var(--konflikt-kante);
  border-bottom: 2px solid var(--konflikt-kante);
  /* ueber den Streifen (z-index 2) und der Jetzt-Linie */
  z-index: 3;
  pointer-events: none;
}

/* Jetzt-Linie: 2 px in --linie-stark ueber die volle Hoehe der Spur. In der
   Skala steht die Uhrzeit daneben. */
.cockpit-jetzt-linie {
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid var(--schrift-stark);
  z-index: 1;
  pointer-events: none;
}
.cockpit-jetzt-text {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px var(--raum-2);
  border-radius: var(--rund-1);
  background: var(--schrift-stark);
  color: var(--flaeche-karte);
  font-family: var(--schriftfamilie-fest);
  font-size: var(--grad-0);
  font-weight: var(--fett-mittel);
  white-space: nowrap;
}
/* Steht die Linie im rechten Fuenftel, haengt das Schild links an ihr. */
.cockpit-jetzt-linie-rechts .cockpit-jetzt-text { left: auto; right: 4px; }

.cockpit-leiste-fuss {
  margin: 0;
  padding: var(--raum-2) var(--raum-4);
  border-top: 1px solid var(--linie-leise);
}

/* ------------------------------------------------------------ Einrichtung */

.cockpit-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cockpit-schritt {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-3) 0;
  flex-wrap: wrap;
}
.cockpit-schritt + .cockpit-schritt { border-top: 1px solid var(--linie-leise); }
.cockpit-schritt-nummer {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--rund-voll);
  border: 1px solid var(--linie-stark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schriftfamilie-zahl);
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}
.cockpit-schritt-erledigt .cockpit-schritt-nummer {
  background: var(--gut-flaeche);
  border-color: var(--gut-linie);
  color: var(--gut-schrift);
}
.cockpit-schritt-text { flex: 1; min-width: 160px; }
.cockpit-schritt-titel {
  font-size: var(--grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.cockpit-schritt-erledigt .cockpit-schritt-titel { color: var(--schrift-leise); }

/* ------------------------------------------------------------ Schmal
 * Unter 640 px stehen die Kacheln untereinander (layout.css .raster-*), die
 * Zeilen brechen den Knopf unter den Text, die Tagesleiste zeigt das
 * kurze Fenster (cockpit.js) mit schmaler Namensspalte. */
@media (max-width: 640px) {
  .cockpit-kachel-kopf { padding: var(--raum-3) var(--raum-4) var(--raum-1); }
  .cockpit-kachel-koerper { padding: 0 var(--raum-4) var(--raum-3); }
  .cockpit-zeile-rechts .knopf { min-height: 44px; height: auto; }
  .cockpit-hauptaktion { min-height: 44px; height: auto; }
  .cockpit-kachel-fuss .knopf { min-height: 44px; height: auto; }
  .cockpit-konflikt-aktionen .knopf { min-height: 44px; height: auto; }
  .cockpit-leiste { --cockpit-leiste-name: 84px; }
  .cockpit-leiste-name { padding: var(--raum-2); font-size: var(--grad-1); }
  .cockpit-schritt .knopf { min-height: 44px; height: auto; }
}

/* "Jetzt zu tun" zuoberst (24.09.2026): ab 1000px zwei Karten nebeneinander,
   damit zwei Entscheidungen auf einen Blick stehen. Die Karten selbst sind
   ui.vorschlagKarte (.vorschlag), sie bleiben, wie sie sind. */
@media (min-width: 1000px) {
  .cockpit-zutun .stapel-eng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
  .cockpit-zutun .stapel-eng > .klein { grid-column: 1 / -1; }
}