/* Werkstatt – Gestaltung der Ansichten Chargen und Bestand (Ergänzung zu app.css und ansichten.css; Auftrag L2)

   Farben, Schriften, Rahmen, Radien, Tippfläche und die Maße der Dichte (--zeile, --text-tabelle, --abstand …) kommen aus den Eigenschaften
   in app.css (:root) – hier steht keine Farbe und kein festes Zeilenmaß, und die Akzentfarbe des jeweiligen Bereichs gilt hier von selbst,
   weil nur die Eigenschaften benutzt werden. Der Look ist der der anderen Tabellen: Zeitung, Tinte, Orange als einziger Akzent für das
   Gewählte, Kleinbeschriftungen in Mono-Großbuchstaben, feine Linien statt Karten.
   Rot steht nur als Form der Ampel (Quadrat plus Wort) und als feiner Rand an gesperrten Zeilen; Vorläufiges (Altbestand, Lücken) ist nie
   bunt, sondern gestrichelt. Der harte Schatten gehört dem Gewählten – hier gibt es ihn nicht, außer was ansichten.css schon vorgibt.
   Ruhig: nichts blinkt, nichts springt, keine Übergänge. Am Handy einspaltig, keine waagrechte Seiten-Scrollleiste: Nur der Rahmen einer
   Tabelle scrollt, und zwar in sich. Keine Inline-Stile im JS (die CSP lässt style-src nur 'self' zu): Alles, was gestaltet wird, steht hier. */

/* ── Gemeinsam: Zellen der Chargen ───────────────────────────────────────── */
.mhd-tage { white-space: nowrap; }
.kappe-name { max-width: 13rem; }
.kappe-sorte { max-width: 9rem; }
.kappe-rest { max-width: 14rem; }
.charge-mhd { min-width: 9.5rem; }
/* Der Rest steht linksbündig: Zahl und „unbekannt: …“ wechseln sich in einer Spalte ab, und die Zahl steht so neben der produzierten Menge */
.tabelle td.charge-rest { text-align: left; }
.rest-unbekannt { font-size: var(--text-klein); }
.tabelle td.notion-zelle { width: 4.5rem; padding-top: 0; padding-bottom: 0; text-align: right; }
.tabelle td.charge-name, .tabelle td.posten-hinweis { padding-top: 0; padding-bottom: 0; }
/* Mehrere Teile in einer Zelle (Status und Marke, Hinweis und Altbestand) stehen nebeneinander, nie untereinander */
.zellen-reihe { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .15rem .5rem; vertical-align: middle; }

/* ── Chargen: Werkzeuge ──────────────────────────────────────────────────── */
.auswahl { display: inline-flex; align-items: center; }
.sorte-wahl-feld, .rueckruf-wahl {
  max-width: 100%; min-height: var(--tipp); padding: .15rem .8rem; border: 1px solid var(--tinte); border-radius: var(--r-pill);
  background: var(--papier); color: var(--tinte); font: inherit;
}

/* ── Chargen: die Tabelle, eine Gruppe je Art ────────────────────────────── */
.chargen-tabelle { min-width: 66rem; }
.tabelle th.chargen-gruppe-kopf { padding-top: 0; padding-bottom: 0; background: var(--zeitung); border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte); }
.tabelle tbody.chargen-kopf tr { height: auto; }
.chargen-kopf + .chargen-rumpf > tr:first-child > td { border-top: 0; }
.chargen-gruppe-kopf .gruppe-knopf { align-items: center; padding: 0; }
.gruppe-zusatz { color: var(--grau); font-size: var(--text-klein); font-weight: 400; }
.gruppe-leer > td { padding-top: var(--abstand-s); padding-bottom: var(--abstand-s); }
/* eine gesperrte Charge: ein feiner roter Rand links – das Wort „gesperrt“ steht in der Zeile */
.charge-gesperrt > td:first-child { box-shadow: inset 3px 0 0 var(--ampel-rot); }
.tabelle tr.charge-detail { height: auto; }

/* ── Chargen: die Einzelheiten ───────────────────────────────────────────── */
/* Die kleinen Überschriften der Einzelheiten sind Ebene 3 (unter „Alle Chargen“), sehen aber aus wie die kleine graue Mono-Zeile (wie h4) */
h3.einzel-titel { margin: 0 0 .25rem; color: var(--grau); font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* Die Einzelheiten stehen in der Breite des Fensters, nicht in der der ganzen Tabelle: Am Handy scrollt die Tabelle seitlich, und die
   Einzelheiten bleiben dabei im Bild (sie kleben am linken Rand des scrollenden Rahmens). Wo die Tabelle in die Breite passt, gilt 100 %. */
.charge-inhalt { position: sticky; left: 0; box-sizing: border-box; max-width: 100%; width: calc(100vw - 2 * var(--rand) - 2 * var(--abstand) - 2px); }
.charge-oben, .kette-bereich { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); margin: 0 0 var(--abstand); }
.charge-oben .einzel-liste { align-content: start; }
.charge-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand); }

/* Die Bilanz als kleine Rechnung: Zeichen und Name links, die Zahl rechts; die Summe unter einem Strich */
.charge-rechnung { min-width: 0; }
.rechnung { display: grid; max-width: 30rem; margin: 0 0 var(--abstand-s); }
.rechnung-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand); padding: .1rem 0; border-top: 1px solid var(--zeitung-d); }
.rechnung-zeile dt { min-width: 0; overflow-wrap: anywhere; }
.rechnung-zeile dd { flex: none; margin: 0; text-align: right; }
.rechnung-start { border-top: 0; font-weight: 600; }
.rechnung-zeichen { display: inline-block; width: 1.2rem; color: var(--grau); }
.rechnung-summe { border-top: 2px solid var(--tinte); font-weight: 600; }
.rechnung-hinweise { margin: 0; padding-left: 1.1rem; }

/* Die Kette: eine eingerückte Liste mit feiner Linie links, keine Zeichnung */
.kette-abschnitt { min-width: 0; }
.kette { margin: 0; padding: 0; list-style: none; }
.kette .kette { margin-left: .9rem; padding-left: .6rem; border-left: 1px solid var(--zeitung-d); }
.kette-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; padding: .05rem 0; }
.kette-art { flex: none; min-width: 5.2rem; color: var(--grau); font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kette-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.kette-zusatz { font-size: var(--text-klein); }
.kette-kunden { min-width: 0; overflow-wrap: anywhere; }
.kette-lieferung .kette-art { color: var(--tinte); }

/* Lücken: ein Zettel mit gestricheltem Rand je Satz (hier fehlt etwas, und der Satz sagt, was) */
.charge-luecken { margin: 0 0 var(--abstand); }
.charge-luecken-liste { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.charge-luecke {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--abstand);
  padding: .1rem var(--abstand-s); border: 1px dashed var(--tinte); border-radius: var(--r-s); background: var(--papier); font-size: var(--text-klein);
}
.charge-luecke-text { min-width: 0; overflow-wrap: anywhere; }

/* ── Chargen: die Rückruf-Übung über der Tabelle ─────────────────────────── */
.rueckruf { margin: 0 0 var(--abstand); }
.rueckruf .abschnitt-kopf { align-items: center; }
.rueckruf-stand { margin: 0; }
.rueckruf-feld { padding: var(--abstand-s) var(--abstand); border: 1px solid var(--tinte); border-radius: var(--r-s); background: var(--papier); }
.rueckruf-feld > p:first-child { margin: 0 0 var(--abstand-s); }
.rueckruf-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand); margin: 0 0 var(--abstand-s); }
.rueckruf-werkzeuge label { font-weight: 600; }
/* Die Überschrift nimmt den Fokus auf (tabindex -1); den Ring zeigt, wie überall, nur :focus-visible aus app.css – wer mit der Tastatur kommt, sieht ihn */
.rueckruf-titel { margin: var(--abstand) 0 .1rem; }
.rueckruf-fazit { margin: 0 0 var(--abstand-s); }
.rueckruf-zahlen { margin: 0 0 var(--abstand-s); }
.rueckruf-tabelle { min-width: 52rem; }
.rueckruf-ergebnis .tabelle-rahmen { margin-top: var(--abstand-s); }
.rueckruf-kunde { white-space: nowrap; }

/* ── Zahlen in der Kennzahlenleiste: eine kurze Liste mit Name und Zahl (Chargen je Art in der Werkbank, der Bestand je Art) ── */
.zahlen-liste { display: flex; flex-wrap: wrap; gap: .2rem var(--abstand-l); margin: 0; padding: 0; list-style: none; }
.zahlen-eintrag { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.zahlen-name { color: var(--grau); font: 600 .68rem/1 var(--mono); letter-spacing: .1em; }
.zahlen-wert { font-size: var(--text-tabelle); font-weight: 600; }

/* ── Bestand ─────────────────────────────────────────────────────────────── */
.bestand-stichtag { margin: 0; }
.bestand-hinweis { margin: 0 0 var(--abstand); }
.bestand-liste { flex-direction: column; gap: .15rem; }
.kennzahlen-bestand .kennzahl-name { display: flex; align-items: center; min-height: 1.3rem; }
.bestand-eintrag { flex-wrap: wrap; }
.bestand-tabelle { min-width: 52rem; }
.bestand-sorte-gruppe > tr:first-child > * { border-top: 1px solid var(--zeitung-d); }
.bestand-sorte-gruppe:first-of-type > tr:first-child > * { border-top: 0; }
.bestand-gesamt > tr:first-child > * { border-top: 1px solid var(--tinte); }
.bestand-gesamt { font-weight: 600; }
.bestand-gesamt .sorte-name { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.tabelle th.bestand-sorte {
  position: sticky; left: 0; z-index: 1; min-width: 5rem; background: var(--papier); border-right: 1px solid var(--zeitung-d); vertical-align: middle; font-weight: 400;
}
.tabelle th.bestand-art { font-weight: 500; }
/* Am Handy bleiben von der Sorte Foto und Kürzel; der Name steht für Vorleser da (wie .nur-leser) und ab 40rem für alle */
.sorte-name-breit {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bestand-sorte .sorte-name { font-family: var(--schrift); font-size: var(--text-tabelle); font-weight: 600; letter-spacing: 0; text-transform: none; }
.posten-tabelle { min-width: 66rem; }
.posten-tabelle .sorte-titel { flex-wrap: nowrap; }
/* Der Hinweis (Grund, Marke, Altbestand) darf umbrechen: Die Marke rutscht unter den Text, statt die Tabelle über den Rand der Seite zu
   schieben – wo der Platz reicht (ab etwa 1366 px), stehen alle nebeneinander */
.posten-hinweis .zellen-reihe { flex-wrap: wrap; }
.posten-hinweis .kappe-rest { max-width: 12rem; }
.tabelle th.posten-gruppe-kopf {
  padding-top: .3rem; padding-bottom: .3rem; background: var(--zeitung); border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte);
  font-weight: 600; text-align: left; white-space: nowrap;
}
.tabelle tbody.posten-gruppe tr.posten-kopf { height: auto; }
.posten-gruppe-kopf .gruppe-name { margin-right: .4rem; }
.posten-gruppe-kopf .gruppe-anzahl { margin-right: .6rem; color: var(--grau); font-size: var(--text-klein); font-weight: 400; }
.posten-zeile.ist-gesperrt > td:first-child, .posten-abgelaufen .posten-zeile > td:first-child { box-shadow: inset 3px 0 0 var(--ampel-rot); }

/* ── Werkbank: die Kennzahlen von Phase 3 in derselben Leiste, eine zweite Reihe ── */
.kennzahlen-phase3 .kennzahl:last-child { grid-column: 1 / -1; border-right: 0; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .rueckruf-wahl { min-width: 22rem; }
  .sorte-name-breit { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; }
  .tabelle th.bestand-sorte { min-width: 11rem; }
}
@media (min-width: 56rem) {
  .charge-oben, .kette-bereich { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 62rem) {
  .kennzahlen-bestand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kennzahlen-phase3 .kennzahl:nth-child(-n+4) { border-bottom: 1px solid var(--zeitung-d); }
  .kennzahlen-phase3 .kennzahl:nth-child(4) { border-right: 0; }
  .kennzahlen-phase3 .kennzahl:last-child { grid-column: span 2; }
}
/* Mit der Maus: die Kette etwas enger, die Rechnung ohne Polster */
@media (pointer: fine) {
  .kette .kette { margin-left: .7rem; }
  .rechnung-zeile { padding: 0; }
}
/* Ab 80rem passt jede Tabelle in die Breite */
@media (min-width: 80rem) {
  .chargen-tabelle, .rueckruf-tabelle, .bestand-tabelle, .posten-tabelle { min-width: 0; }
  /* Die Einzelheiten füllen die Zelle: Die Breite des Fensters (100vw) enthält die Bildlaufleiste und würde die Tabelle über den Rand schieben */
  .charge-inhalt { position: static; width: auto; }
}

/* ── Fahrplan: ein Ziel, das es noch nicht gibt (die Station), steht als ruhiger Text statt als Link ── */
.luecke-spaeter { white-space: nowrap; }