/* ═══════════════════════════════════════════════════════════════════════════
   UNSERE EIGENEN ERGÄNZUNGEN

   Das meiste Aussehen kommt von AdminLTE (wird in index.html geladen). Hier
   steht nur, was DAZUKOMMT oder anders sein soll.

   REGEL FÜR DIESE DATEI: So wenig wie möglich. Je mehr hier steht, desto eher
   läuft die Seite vom Vorbild weg — und desto mehr muss man von Hand
   nachziehen, wenn AdminLTE einmal aktualisiert wird.

   FARBEN NICHT AUSSCHREIBEN. Benutze die Namen, die Bootstrap schon hat:
       var(--bs-success)   grün    var(--bs-danger)    rot
       var(--bs-warning)   gelb    var(--bs-secondary) grau
       var(--bs-primary)   blau    var(--bs-body-color) Textfarbe
   Dann stimmt die Seite auch im dunklen Modus, ohne dass du etwas tust.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Die Schriftart der Beispielseite ───────────────────────────────────── */
body {
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ── Die Schrittliste in einer Fortschritts-Karte ───────────────────────────
   Aufbau je Zeile:   [Symbol] Beschriftung ........... [Marke]
   Das `list-group-item` kommt von Bootstrap, hier nur die Feinheiten.       */

.schritt-liste .list-group-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .25rem;
    border-color: var(--bs-border-color-translucent);
}

/* Das Symbol vorn (Lastwagen, Schraubenschlüssel, …) */
.schritt-liste .schritt-symbol {
    width: 1.4rem;
    flex: 0 0 1.4rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Die Beschriftung nimmt den ganzen freien Platz — dadurch rutscht die
   Marke automatisch nach rechts. */
.schritt-liste .schritt-name { flex: 1 1 auto; min-width: 0; }

/* Ein langer Schrittname soll die Karte nicht auseinanderdrücken. */
.schritt-liste .schritt-name { overflow-wrap: anywhere; }


/* ── „Alle Felder anzeigen" — die Liste im Kartenfuss ────────────────────── */

.feldliste {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;   /* Name | Wert */
    gap: .15rem .7rem;
    margin: 0;
}
.feldliste dt { font-weight: 600; color: var(--bs-secondary-color); }
.feldliste dd { margin: 0; overflow-wrap: anywhere; }

/* Der Klapp-Pfeil von <details> soll wie ein Knopf wirken. */
details > summary { cursor: pointer; }
details > summary:hover { background: var(--bs-tertiary-bg); }


/* ── Das Klapp-Menü für den Token etwas breiter ─────────────────────────── */
.zugang-menue { min-width: 22rem; }


/* ── DER WICHTIGSTE TEIL: „wir wissen es noch nicht" ───────────────────────
   Solange keine Daten da sind, steht in den Kästen ein Strich („–").

   WARUM KEIN „0": Eine Null ist eine Aussage. „Null Aufträge" heisst, wir
   haben nachgesehen und nichts gefunden. Solange wir NICHT nachgesehen haben,
   wäre das gelogen — und man würde es nie merken.
   Der Strich ist deshalb gestrichelt unterstrichen: eine Stelle, an der eine
   Zahl stehen WIRD. Fahre mit der Maus darüber, dann steht der Grund da.     */

.noch-nichts {
    border-bottom: 2px dashed var(--bs-secondary-color);
    cursor: help;
    color: var(--bs-secondary-color);
}


/* ── Drucken ────────────────────────────────────────────────────────────────
   Wer die Seite ausdruckt, braucht keine Seitenleiste und keine Knöpfe.      */
@media print {
    .app-sidebar, .app-header, .app-footer,
    .card-tools, #feld-suche, #knopf-neuladen { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .card { break-inside: avoid; border: 1px solid #999; }
}