/* ============================================
   VeloCity Warenwirtschaft — Grundraster

   Eine Arbeitsoberflaeche darf voll sein. Sie wird acht Stunden am Tag
   benutzt, nicht acht Sekunden - Information je Bildschirm zaehlt mehr
   als Weissraum. Deshalb kleinere Grade und engere Zeilen als auf der
   Website, aber dieselben Farben: wer zwischen beiden wechselt, soll
   nicht das Produkt wechseln.
   ============================================ */

:root {
  --marine:      #061841;
  --rot:         #f00038;
  --grund:       #f7f8fa;
  --flaeche:     #ffffff;
  --linie:       #d8dce4;
  --text:        #1c2333;
  --text-leise:  #5a6478;
  --gut:         #1d7a44;
  --warnung:     #b8860b;
  /* --warnung selbst faellt auf weissem Grund auf 3.25:1 - unter der
     verlangten Untergrenze von 4.5:1. Fuer Fliesstext (Statuszeile,
     Fehlermeldungen) gilt deshalb dieser abgedunkelte Ton, 5.3:1 auf
     Weiss; --warnung bleibt fuer Flaechen wie Rahmen oder Hintergrund. */
  --warnung-text: #8a6508;
  --schlecht:    #c0301c;
  --zeile:       28px;
  --schrift:     14px;
  --nav-breite:  200px;
  --kopf-hoehe:  48px;
  --fuss-hoehe:  32px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: var(--schrift);
  color: var(--text);
  background: var(--grund);
  overflow: hidden;   /* die Seite als Ganzes scrollt nie */
}

/* Ohne diese Regel gewinnt jede eigene display-Angabe (.vollbild,
   #zustand-arbeit) gegen das hidden-Attribut: Autorenregeln schlagen
   die UA-Regel "[hidden] { display: none }" unabhaengig von der
   Spezifitaet. Ohne den Vorrang hier waeren nie "genau einer sichtbar",
   sondern alle vier Zustaende gleichzeitig da - nur uebereinander
   gestapelt und darum meist unbemerkt. */
[hidden] {
  display: none !important;
}

/* Sichtbarer Tastaturfokus. Ohne ihn ist die versprochene
   Tastaturbedienung eine Behauptung. */
:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
}

button {
  font: inherit;
  cursor: pointer;
}

/* ===== Vollbildzustaende: Laden, Anmeldung, Kein Zugang ===== */

.vollbild {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 8px;
}

#zustand-laden {
  color: var(--text-leise);
}

/* Wird gesetzt, wenn seiteAufbauen() den Wurf von meineRollen() faengt.
   Es gibt keinen fuenften Zustand dafuer: der Ladezustand ist der
   einzige, der in diesem Fall noch sichtbar ist, und wird umgewidmet. */
#zustand-laden.fehler-anzeige {
  color: var(--schlecht);
  max-width: 480px;
  /* Ohne margin:auto blieb der Text linksbuendig am Rand statt zentriert
     stehen - derselbe Effekt wie bei .anmeldung in Aufgabe 1 (siehe
     dortiger Kommentar): max-width schrumpft die Box, zentriert sie aber
     nicht von selbst. Im Browser reproduziert: mit der ersten Fassung
     dieser Regel (nur max-width) landete die Fehlermeldung am linken
     Bildschirmrand statt in der Mitte, wo "Einen Moment …" zuvor stand. */
  margin: 0 auto;
}

.vollbild h1 {
  color: var(--marine);
  margin: 0 0 16px;
  font-size: 22px;
}

.vollbild p {
  max-width: 480px;
  color: var(--text-leise);
  line-height: 1.5;
}

.vollbild p a {
  color: var(--marine);
}

.anmeldung {
  width: 100%;
  max-width: 320px;
  /* .vollbild zentriert nur die eigenen Kinder, nicht sich selbst: ohne
     margin:auto bliebe das Formular an der 320px breiten linken Kante
     stehen, egal wie breit das Fenster ist. */
  margin: 0 auto;
}

.anmeldung label {
  align-self: flex-start;
  font-weight: 600;
  color: var(--text-leise);
  margin-top: 4px;
}

.anmeldung input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
}

.anmeldung button[type="submit"] {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: var(--marine);
  color: var(--flaeche);
  font-weight: 600;
}

.anmeldung button[type="submit"]:hover {
  background: #0a2560;
}

.fehler {
  color: var(--schlecht);
  min-height: 1.2em;
  margin: 4px 0 0;
}

/* Gemeinsames Aussehen fuer die Abmelden-Knoepfe der beiden
   Hinweiszustaende (kein Mitarbeiter / Mitarbeiter ohne Rolle) - in
   beiden ist er der einzige Ausweg. */
#zustand-kein-mitarbeiter button,
#zustand-ohne-rolle button {
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
}

/* ===== Arbeitszustand: Kopfleiste fest, Navigation links fest,
   darunter Liste und Maske nebeneinander, Statuszeile unten fest ===== */

#zustand-arbeit {
  display: grid;
  grid-template-columns: var(--nav-breite) 1fr;
  grid-template-rows: var(--kopf-hoehe) 1fr var(--fuss-hoehe);
  grid-template-areas: "kopf kopf" "nav arbeit" "fuss fuss";
  height: 100vh;
}

#kopfleiste {
  grid-area: kopf;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--marine);
  color: var(--flaeche);
}

#kopfleiste .wortmarke {
  font-weight: 600;
  letter-spacing: 0.02em;
}

#kopfleiste .wortmarke b {
  color: var(--rot);
}

#feld-suche {
  flex: 1;
  max-width: 320px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
}

#benutzer-anzeige {
  color: #c9d2e8;
  font-size: 12px;
}

#kopfleiste #knopf-abmelden {
  padding: 5px 12px;
  border: 1px solid #ffffff55;
  border-radius: 4px;
  background: transparent;
  color: var(--flaeche);
}

#kopfleiste #knopf-abmelden:hover {
  background: #ffffff22;
}

#navigation {
  grid-area: nav;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Ein Eintrag je erlaubtem Bereich - rahmen.js erzeugt sie, hier nur
   das Aussehen. Nicht erlaubte Bereiche stehen erst gar nicht im DOM,
   deshalb reicht reines Styling der vorhandenen Knoepfe. */
#navigation button {
  text-align: left;
  padding: 12px 16px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: var(--schrift);
}

#navigation button:hover {
  background: var(--grund);
}

#navigation button[aria-current="page"] {
  border-left-color: var(--rot);
  background: var(--grund);
  color: var(--marine);
  font-weight: 600;
}

#arbeitsbereich {
  grid-area: arbeit;
  display: flex;
  min-height: 0;   /* Kinder duerfen kleiner als ihr Inhalt sein und selbst scrollen */
  background: var(--grund);
}

#arbeitsliste {
  flex: 1 1 55%;
  overflow-y: auto;
  border-right: 1px solid var(--linie);
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
}

/* ===== Unterreiter: zwei Listen in einem Bereich (zeigeUnterreiter) ===== */

#reiterleiste {
  display: flex;
  border-bottom: 1px solid var(--linie);
  flex: 0 0 auto;
}

#reiterleiste .reiter {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-leise);
  font-size: var(--schrift);
}

#reiterleiste .reiter:hover {
  color: var(--text);
}

#reiterleiste .reiter.aktiv {
  color: var(--marine);
  border-bottom-color: var(--rot);
  font-weight: 600;
}

/* ===== Werkzeugleiste: Aktionen vor der Liste, z. B. "Neu anlegen" =====
   Baustein zeigeWerkzeugleiste() in wawi/rahmen.js - urspruenglich in
   Flotte und Stationen je einzeln erfunden, dann zusammengelegt, weil
   beide Bearbeiter unabhaengig dasselbe gebaut hatten (siehe Kommentar
   dort). Die Klasse liegt hier, weil dieselbe Leiste bei jedem
   Arbeitsbereich wiederkehrt, der sie benutzt. */

.werkzeugleiste {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
}

/* ===== Arbeitstabelle (zeigeListe) ===== */

#listenkoerper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.arbeitstabelle {
  width: 100%;
  border-collapse: collapse;
}

.arbeitstabelle thead {
  position: sticky;
  top: 0;
  background: var(--flaeche);
}

.arbeitstabelle th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}

.arbeitstabelle td {
  padding: 6px 12px;
  height: var(--zeile);
  border-bottom: 1px solid var(--linie);
}

.arbeitstabelle tbody tr {
  cursor: pointer;
}

.arbeitstabelle tbody tr:hover {
  background: var(--grund);
}

.arbeitstabelle tbody tr.ausgewaehlt {
  background: #eef1fb;
}

/* Farbe traegt Bedeutung, nicht Dekoration: Status-Zellen wie "defekt"
   nutzen diese Klassen ueber die spalten-klasse von zeigeListe, nicht
   umgekehrt eingefaerbte Reihen fuer alles. */
.arbeitstabelle td.schlecht { color: var(--schlecht); font-weight: 600; }
.arbeitstabelle td.warnung  { color: var(--warnung-text); font-weight: 600; }
.arbeitstabelle td.gut      { color: var(--gut); font-weight: 600; }
/* Ausgemustert: sichtbar, aber bewusst zurueckgenommen statt betont -
   das Rad ist erledigt, keine Auffaelligkeit, die Aufmerksamkeit
   verlangt. Diese Klasse fehlte hier, obwohl statusKlasse() in
   flotte.js sie von Anfang an zurueckgibt. */
.arbeitstabelle td.leise    { color: var(--text-leise); }
/* Rechtsbuendig fuer Zahlenspalten (Aufgabe 8, Auswertungen): eine Tabelle
   ohne Diagrammbibliothek lebt davon, dass Zahlen bei gleicher Grosse
   untereinanderstehen - linksbuendig zerreisst jede Spalte in Ziffern
   unterschiedlicher Breite und macht das Ueberfliegen einer Monatsreihe
   muehsam. font-variant-numeric haelt zusaetzlich jede Ziffer gleich breit
   (tabellarische statt proportionale Ziffern), sonst verschieben sich die
   Kommastellen selbst bei rechtsbuendigem Text noch minimal. Kombinierbar
   mit schlecht/warnung/gut: zeigeListe setzt beide Klassennamen als EINEN
   String ("zahl warnung"), CSS wendet beide Regeln an.  */
.arbeitstabelle td.zahl     { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Leermaske (zeigeLeermaske) ===== */

.leermaske {
  margin: auto;
  max-width: 360px;
  padding: 32px;
  text-align: center;
}

.leermaske h2 {
  color: var(--marine);
  margin: 0 0 8px;
  font-size: 16px;
}

.leermaske p {
  color: var(--text-leise);
  line-height: 1.5;
  margin: 0 0 16px;
}

#detailmaske {
  flex: 1 1 45%;
  overflow-y: auto;
  padding: 16px;
}

#detailmaske h2 {
  color: var(--marine);
  margin: 0 0 16px;
  font-size: 16px;
}

/* ===== Detailformular (zeigeMaske) ===== */

.formularzeile {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.formularzeile label {
  font-weight: 600;
  color: var(--text-leise);
  margin-bottom: 4px;
  font-size: 12px;
}

.formularzeile input,
.formularzeile select,
.formularzeile textarea {
  padding: 6px 8px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
}

.formularzeile input[readonly],
.formularzeile select:disabled,
.formularzeile textarea[readonly] {
  background: var(--grund);
  color: var(--text-leise);
}

.formularzeile textarea {
  min-height: 4.5em;
  resize: vertical;
}

/* ===== Knopfleisten: gemeinsam fuer Detailmaske, Leermaske, Dialoge ===== */

.knopfleiste {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

.knopf-haupt,
.knopf-neben,
.knopf-gefaehrlich {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
}

.knopf-haupt {
  background: var(--marine);
  color: var(--flaeche);
}

.knopf-haupt:hover {
  background: #0a2560;
}

.knopf-neben {
  background: var(--flaeche);
  border-color: var(--linie);
  color: var(--text);
}

.knopf-neben:hover {
  background: var(--grund);
}

/* Rot ist ein defektes Rad, nicht ein Knopf - aber hier ist Rot
   fachlich richtig: die Aktion ist tatsaechlich gefaehrlich
   (Ausmusterung, Sperrung, Anonymisierung), keine Dekoration. */
.knopf-gefaehrlich {
  background: var(--flaeche);
  border-color: var(--schlecht);
  color: var(--schlecht);
}

.knopf-gefaehrlich:hover {
  background: var(--schlecht);
  color: var(--flaeche);
}

.knopf-haupt:disabled,
.knopf-neben:disabled,
.knopf-gefaehrlich:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ===== Dialoge (bestaetige, frageNachGrund) =====

   <dialog>.showModal() liefert Fokusfalle und Escape-Verhalten von sich
   aus (siehe Kommentar in rahmen.js) - hier nur das Aussehen, keine
   Interaktionslogik. */

.velocity-dialog {
  min-width: 320px;
  max-width: 420px;
  padding: 20px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(6, 24, 65, 0.25);
}

.velocity-dialog::backdrop {
  background: rgba(6, 24, 65, 0.45);
}

.velocity-dialog h2 {
  color: var(--marine);
  margin: 0 0 12px;
  font-size: 16px;
}

.velocity-dialog p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.velocity-dialog label {
  display: block;
  font-weight: 600;
  color: var(--text-leise);
  margin-bottom: 4px;
  font-size: 12px;
}

.velocity-dialog input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  margin-bottom: 4px;
}

#statuszeile {
  grid-area: fuss;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
}

/* Farbe traegt Bedeutung, nicht Dekoration. Die Klassen setzt melde()
   aus rahmen.js; die Farben selbst gehoeren aber ins Grundraster. */
#statuszeile.gut      { color: var(--gut); }
#statuszeile.warnung   { color: var(--warnung-text); }
#statuszeile.schlecht  { color: var(--schlecht); }