/* =============================================================================
   Ski- und Snowboardservice: Fortschrittsanzeige, Express-Kennzeichen,
   Auskunftskarten fuer die Theke.

   Ergaenzt app.css, ersetzt nichts. Es stehen ausschliesslich Variablen aus
   app.css in den Farbangaben - Hell- und Dunkelmodus kommen dadurch von selbst
   mit, ohne dass diese Datei ein zweites Farbschema fuehren muss.

   Farbpaare werden so benutzt, wie app.css sie vorsieht:
     Flaeche --gruen  traegt Schrift --auf-gruen
     Flaeche --blau   traegt Schrift --auf-blau
     Flaeche --gelb   traegt Schrift --auf-gelb
   Eine Flaeche mit einer Schriftfarbe aus einem anderen Paar zu mischen,
   unterschreitet den Kontrast - deshalb kommt das hier nirgends vor.
   ============================================================================= */

/* --- Fortschritt ueber die Statusstufen ------------------------------------
   Ersetzt das Textfeld: der Stand ist eine Position auf einem Weg, nicht ein
   Wort. Erledigte Stufen sind gefuellt, die laufende ist hervorgehoben, die
   kommenden bleiben flach. Auf schmalen Geraeten rollt die Leiste seitlich,
   statt umzubrechen - der Weg soll ein Weg bleiben. */

.ablauf {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 4px 2px 2px;
  margin: 0;
  list-style: none;
}

.ablauf-stufe {
  flex: 1 1 0;
  min-width: 104px;
  position: relative;
  text-align: center;
  padding: 0 4px;
}

/* Verbindungslinie: sie gehoert zur Stufe links davon, damit sie mitfaerbt,
   sobald diese erledigt ist. */
.ablauf-stufe::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--linie);
}
.ablauf-stufe:first-child::before { display: none; }
.ablauf-stufe.ist-erledigt::before,
.ablauf-stufe.ist-aktuell::before { background: var(--gruen); }

.ablauf-punkt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--schrift-hell);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.ablauf-punkt .sym { width: 16px; height: 16px; color: inherit; vertical-align: 0; }

.ablauf-stufe.ist-erledigt .ablauf-punkt {
  background: var(--gruen);
  border-color: var(--gruen-dunkel);
  color: var(--auf-gruen);
}
.ablauf-stufe.ist-aktuell .ablauf-punkt {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--auf-blau);
  box-shadow: 0 0 0 4px var(--hinweis-flaeche);
}

.ablauf-titel {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--schrift-hell);
  line-height: 1.3;
  white-space: normal;
}
.ablauf-stufe.ist-erledigt .ablauf-titel { color: var(--schrift); }
.ablauf-stufe.ist-aktuell .ablauf-titel  { color: var(--schrift); font-weight: 700; }

.ablauf-zeit {
  display: block;
  font-size: 11px;
  color: var(--schrift-hell);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
}

/* Kompaktform fuer Listenzeilen: nur die Punkte, ohne Beschriftung. */
.ablauf-klein { gap: 0; padding: 0; }
.ablauf-klein .ablauf-stufe { min-width: 0; flex: 0 0 20px; padding: 0; }
.ablauf-klein .ablauf-punkt { width: 12px; height: 12px; border-width: 1.5px; font-size: 0; }
.ablauf-klein .ablauf-stufe::before { top: 5px; height: 2px; }
.ablauf-klein .ablauf-titel, .ablauf-klein .ablauf-zeit { display: none; }
.ablauf-klein .ablauf-stufe.ist-aktuell .ablauf-punkt { box-shadow: none; }

/* --- Nebenstaende ----------------------------------------------------------
   wartet_auf_teile und storniert stehen nicht auf der Leiter. Sie bekommen
   einen Streifen darueber, damit niemand den Fortschritt falsch liest. */

.nebenstand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}
.nebenstand .sym { color: inherit; }
.nebenstand-warte  { background: var(--hinweis-flaeche); color: var(--hinweis-schrift); }
.nebenstand-storno { background: var(--fehler-flaeche);  color: var(--fehler-schrift); }

/* --- Express ---------------------------------------------------------------
   Kennzeichen, kein Stand. Es sitzt am Auftrag und faellt in jeder Liste auf,
   ohne die Statusfarben zu stoeren. */

.express-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--gelb);
  color: var(--auf-gelb);
  border: 1px solid var(--gelb-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  vertical-align: 1px;
}
.express-marke .sym { width: 13px; height: 13px; color: inherit; vertical-align: -.15em; }

/* Zeilen mit Express in Listen: ein Streifen links. Zusaetzlich zur Marke -
   Farbe allein darf nicht der einzige Traeger der Information sein. */
table.liste tbody tr.ist-express > td:first-child {
  box-shadow: inset 3px 0 0 var(--gelb);
}

.express-hinweis {
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gelb);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--schrift);
}
.express-hinweis strong { font-variant-numeric: tabular-nums; }

/* --- Auskunftskarten der Theke ---------------------------------------------
   Ein Kunde steht davor und fragt nach seinem Ski. Deshalb Karten statt
   Tabellenzeilen: Geraet, Service, Stand, seit wann und Termin stehen
   untereinander und sind aus zwei Metern lesbar. */

.service-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 14px;
}

.service-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 14px 16px 12px;
  box-shadow: var(--schatten);
}
.service-karte.ist-express { border-left: 4px solid var(--gelb); }
.service-karte.ist-fertig  { border-left: 4px solid var(--gruen); }

.service-kopf {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.service-kopf .nummer {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}
.service-kopf .kunde { font-weight: 600; }
.service-kopf .rechts { margin-left: auto; font-size: 12px; color: var(--schrift-hell); }

.service-geraet {
  font-size: 13px;
  color: var(--schrift);
  margin: 0 0 2px;
}
.service-geraet .paket { color: var(--gruen-text); font-weight: 600; }
.service-zusatz { font-size: 12px; color: var(--schrift-hell); margin: 0 0 10px; }

.service-fuss {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linie-hell);
  font-size: 12.5px;
}
.service-fuss dt {
  color: var(--schrift-hell);
  font-size: 11px;
  text-transform: none;
  margin: 0;
}
.service-fuss dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.service-fuss .paar { display: flex; flex-direction: column; gap: 1px; }
.service-fuss .btn { margin-left: auto; }

.service-meldung {
  margin-top: 9px;
  padding: 7px 10px;
  background: var(--flaeche-alt);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--schrift);
}
.service-meldung .quelle { color: var(--schrift-hell); font-size: 11px; display: block; }

.ist-ueberfaellig { color: var(--rot-text); font-weight: 700; }

/* --- Verlauf der Rueckmeldungen -------------------------------------------- */

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linie-hell);
  font-size: 13px;
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf .wann { color: var(--schrift-hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verlauf .was { font-weight: 600; }
.verlauf .wer { color: var(--schrift-hell); font-weight: 400; }
.verlauf .notiz { grid-column: 2; color: var(--schrift); font-weight: 400; }

/* --- Stufenwahl in der Werkstatt ------------------------------------------- */

.stufenwahl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stufenwahl .btn { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .service-karten { grid-template-columns: 1fr; }
  .ablauf-stufe { min-width: 88px; }
  .verlauf li { grid-template-columns: 1fr; }
  .verlauf .notiz { grid-column: 1; }
}

/* Im Druck traegt die Leiste Form statt Farbe: Hintergruende drucken viele
   Browser ohnehin nicht mit. Erledigte Stufen bekommen daher einen kraeftigen
   Rand, die laufende zusaetzlich einen zweiten Ring. Farbangaben stehen hier
   bewusst keine - `currentColor` uebernimmt, was der Text ohnehin hat. */
@media print {
  .ablauf-punkt {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    box-shadow: none;
  }
  .ablauf-stufe.ist-erledigt .ablauf-punkt { border-width: 3px; }
  .ablauf-stufe.ist-aktuell  .ablauf-punkt { border-width: 3px; outline: 1px solid currentColor; outline-offset: 2px; }
  .ablauf-stufe::before, .ablauf-stufe.ist-erledigt::before,
  .ablauf-stufe.ist-aktuell::before { background: currentColor; }
  .ablauf-stufe.ist-offen::before { opacity: .3; }
  .express-marke { border-width: 2px; background: transparent; color: inherit; }
}