/* Baustein liste: Listenansicht (Bedienkonzept, Pilot Maschinen, Bauplan
   1.3). Besitzer: WP11. Die Grundvorlage bindet die Datei nach dem
   globalen Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben
   als Token mit Rueckfall; eine Regel fuer die Telefonbreite (560px).

   Zwei Makros wohnen hier: liste.html (Kopf der Liste mit Kacheln,
   Suche, Filtern, Trefferzahl) und scan.html (Scan-Maske; der Baustein
   scan hat keine eigene Stylesheet-Datei).

   Farben der Kacheln wie die Zustandspillen: rot und gesperrt rot mit
   Zeichen, gelb mit Uhr und DUNKLER Schrift (Kontrast ueber 4,5 zu 1),
   grau mit Strich. Eine Null ist neutral. Keine Ockerschrift.

   Ausrollen bis zur Begehung (Bauplan 3A, A1d): Arbeitsvorrat (Klasse
   neutral, E1) mit Zahl in Navy, ohne Zeichen; die Leiste "Vorige Seite /
   Naechste Seite" unter der Tabelle (E16).

   Ausrollen Abschnitt C (C1b; R-C1, A14): die Klasse liste-karten, eine
   Karte je Zeile am Telefon, und die Regel nur-telefon (QC1), beide unten. */

/* --- Kopf der Liste ------------------------------------------------------ */

.liste-karte > .liste-kopfzeile:not(:last-child) { margin-bottom: 12px; }

.liste-kacheln {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 12px;
}
.liste-kachel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--border, #e2e7ee);
  border-left: 4px solid var(--border, #e2e7ee);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  color: var(--navy, #1F4570); font-weight: 600; text-decoration: none;
  line-height: 1.2;
}
.liste-kachel:hover { background: var(--grau-hell, #f4f6f9);
  color: var(--navy, #1F4570); }
.liste-kachel:focus-visible { outline: 2px solid var(--navy-mid, #305186);
  outline-offset: 2px; }
.liste-kachel .symbol { width: 18px; height: 18px; flex: none; }
.liste-kachel-zahl { font-size: 1.35rem; font-weight: 800; }

.liste-kachel-rot, .liste-kachel-sperre {
  border-left-color: var(--rot, #b3261e); }
.liste-kachel-rot .liste-kachel-zahl, .liste-kachel-rot .symbol,
.liste-kachel-sperre .liste-kachel-zahl, .liste-kachel-sperre .symbol {
  color: var(--rot, #b3261e); }
.liste-kachel-sperre { background: #fdf0ef; }
.liste-kachel-gelb { border-left-color: var(--gold, #D4A648);
  background: #fdf7e7; }
.liste-kachel-gelb .liste-kachel-zahl,
.liste-kachel-gelb .symbol { color: #4a3800; }
.liste-kachel-grau { border-left-color: #8a99a8; }
.liste-kachel-grau .liste-kachel-zahl,
.liste-kachel-grau .symbol { color: var(--muted, #5f7183); }
.liste-kachel-neutral { border-left-color: var(--navy-mid, #305186); }
.liste-kachel-neutral .liste-kachel-zahl { color: var(--navy, #1F4570); }
.liste-kachel-null .liste-kachel-zahl { color: var(--muted, #5f7183); }
.liste-kachel-aktiv {
  box-shadow: inset 0 0 0 2px var(--navy-mid, #305186);
  border-color: var(--navy-mid, #305186);
}

/* Filterzeile: links Suche und Filter, rechts Treffer und Aufheben. */
.liste-kopfzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border, #e2e7ee);
}
.liste-filter-aktiv {
  padding: 10px 12px;
  background: var(--grau-hell, #f4f6f9);
  border: 1px solid var(--grau, #e2e7ee); border-radius: 8px;
}
.liste-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  flex: 1 1 420px; min-width: 0; margin: 0;
}
.liste-filter label { margin: 0; }
.liste-suche {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 260px; min-width: 0;
}
.liste-suche input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto;
  padding: 8px 12px; font-size: 1rem;
  border: 1px solid var(--grau, #e2e7ee); border-radius: 6px;
  background: var(--surface, #ffffff);
}
.liste-suchen { display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; }
.liste-suchen .symbol { width: 16px; height: 16px; }
.liste-filter-paar select {
  width: auto; max-width: 260px;
  padding: 8px 10px; font-size: 0.95rem;
  border: 1px solid var(--grau, #e2e7ee); border-radius: 6px;
  background: var(--surface, #ffffff);
}
.liste-chip-fest {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--navy, #1F4570); color: #ffffff;
  font-size: 0.9rem; font-weight: 600;
}
.liste-rechts {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto;
}
.liste-treffer {
  color: var(--muted, #5f7183); font-weight: 600; white-space: nowrap;
}
.liste-aufheben { white-space: nowrap; }

/* Leere Liste: ein Satz und ein schlichter Knopf. */
.liste-leer {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 18px 0 6px;
}
.liste-leer-satz { margin: 0; color: var(--text, #1c2733); }

/* Blaettern ab 50 Treffern: links zurueck, Mitte der Stand, rechts vor.
   Ein gesperrter Knopf bleibt stehen (die Leiste springt nicht), sieht
   aber nicht klickbar aus. */
.liste-blaettern {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--border, #e2e7ee);
}
.liste-blaettern-knopf { white-space: nowrap; }
.liste-blaettern-aus {
  color: var(--muted, #5f7183); border-color: var(--border, #e2e7ee);
  background: transparent; cursor: default; pointer-events: none;
}
.liste-blaettern-stand {
  color: var(--muted, #5f7183); font-weight: 600; text-align: center;
}

/* --- Scan-Maske ---------------------------------------------------------- */

.scan-form { margin: 0; }
.scan-form label { margin-top: 0; }
.scan-zeile {
  display: flex; align-items: center; gap: 8px; max-width: 520px;
}
.scan-feld { flex: 1 1 auto; min-width: 0; font-size: 1.1rem;
  letter-spacing: 0.02em; }
.scan-feld-fehler { border-color: var(--rot, #b3261e);
  box-shadow: 0 0 0 1px var(--rot, #b3261e); }
.scan-fehler {
  margin: 6px 0 0; color: var(--rot, #b3261e); font-weight: 600;
}
.scan-hinweis { margin: 10px 0 0; max-width: 640px; }
.scan-kamera {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border, #e2e7ee);
}
.scan-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.scan-knoepfe .symbol { width: 18px; height: 18px; }
/* hidden gilt in der Maske auch gegen die globalen display-Regeln von
   .knopf-schlicht (inline-flex) und .scan-bild (block): "Kamera
   stoppen" und der Sucher erscheinen erst, wenn die Kamera laeuft. */
.scan-maske [hidden] { display: none; }

/* --- Telefon ------------------------------------------------------------- */

@media (max-width: 560px) {
  .liste-kacheln { gap: 8px; }
  /* Jede Kachel so breit wie ihr Wort: kurze stehen zu zweit, eine mit
     langem Wort ("Betriebsanleitung fehlt") bekommt die Zeile; erst wenn
     auch die nicht reicht, bricht das Wort statt ueber den Rand. */
  .liste-kachel { flex: 1 1 auto; min-width: 0;
    padding: 8px 10px; hyphens: auto; overflow-wrap: anywhere; }
  .liste-kopfzeile { align-items: stretch; }
  /* nowrap: in einer umbrechenden Spalte waere die Zeile so breit wie das
     breiteste Feld (Suche mit Knopf), und alles liefe ueber den Rand. */
  .liste-filter { flex-basis: 100%; flex-direction: column;
    flex-wrap: nowrap; align-items: stretch; }
  .liste-suche { flex-basis: auto; }
  .liste-filter .filter-paar { min-width: 0; }
  .liste-filter .filter-paar select { flex: 1 1 auto; min-width: 0; }
  .liste-filter-paar { display: flex; justify-content: space-between;
    width: 100%; }
  .liste-filter-paar select { flex: 1 1 auto; max-width: 70%; }
  .liste-chip-fest { align-self: flex-start; }
  .liste-rechts { width: 100%; margin-left: 0;
    justify-content: space-between; }
  /* Der Stand ueber die volle Breite, darunter die beiden Knoepfe. */
  .liste-blaettern-stand { order: -1; flex-basis: 100%; }
  .liste-blaettern-knopf { flex: 1 1 0; justify-content: center; }
  .scan-zeile { flex-wrap: wrap; }
  .scan-zeile .scan-feld { flex-basis: 100%; }
  .scan-zeile .knopf-schlicht { width: 100%; }

  /* Liste als Karten (<table class="liste liste-karten">; R-C1, A14,
     verallgemeinert aus zeitachse.css): die Tabelle bleibt im Quelltext, eine
     Karte je Zeile statt seitlich schieben. Spalte 1 und 2 stehen
     nebeneinander (Eintrag, Zustand), ab Spalte 3 je eine Zeile ueber die
     volle Breite, davor der Spaltenname aus data-spalte an der Zelle; ohne
     das Merkmal steht die Zelle ohne Namen (etwa ein Knopf). Der
     Tabellenkopf bleibt fuer den Vorleser. Auch fuer Checkliste und
     Auflagen: eine lange Frage in Spalte 1 nimmt ihre eigene Zeile. */
  .liste.liste-karten > thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .liste.liste-karten, .liste.liste-karten > tbody { display: block;
    width: 100%; }
  .liste.liste-karten > tbody > tr { display: flex; flex-wrap: wrap;
    align-items: center; gap: 4px 10px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--border, #e2e7ee); border-radius: 8px;
    background: var(--surface, #ffffff); }
  .liste.liste-karten > tbody > tr > td,
  .liste.liste-karten > tbody > tr > th { display: block; padding: 0;
    border-bottom: none; min-width: 0; overflow-wrap: anywhere;
    white-space: normal; }
  .liste.liste-karten > tbody > tr > :nth-child(n+3) { flex: 1 1 100%; }
  .liste.liste-karten > tbody > tr > :nth-child(n+3)[data-spalte]::before {
    content: attr(data-spalte) ": ";
    color: var(--muted, #5f7183); font-weight: 600;
  }
  .liste.liste-karten > tbody > tr > td:empty { display: none; }
}

/* --- Nur am Telefon (QC1) -------------------------------------------------- */

/* Ein Element, das nur auf Telefonbreite erscheint (der Knopf "+ LMRA
   durchfuehren" oben auf dem Dashboard); Tablet und PC sehen es nicht.
   Ausgeblendet wird oberhalb der Telefonbreite, damit am Telefon die eigene
   display-Regel des Elements gilt (inline-flex eines Knopfs). Wer es sehen
   darf, entscheidet der Aktionshelfer, nicht diese Regel. */
@media (min-width: 561px) {
  .nur-telefon { display: none !important; }
}

/* --- Druck: Bedienelemente nicht aufs Papier ------------------------------ */

@media print {
  .liste-kacheln, .liste-filter, .liste-aufheben, .liste-blaettern,
  .scan-maske, .nur-telefon { display: none !important; }
  .liste-filter-aktiv { background: none; border: none; padding: 0; }
}