/* planliste.css — DIE Produktionsplan-Liste, eine Definition für zwei Oberflächen
   (v2.236, SM 31.08.2026: „im klaren, cleanen apple stil einen Listenmäßigen
   produktionsplan" + „die planerische ansicht davon sollte genau das gleiche layout
   haben im leitstand"). Markup kommt aus /ui/planliste.js; geladen von
   /produktionsplan/ und vom Leitstand. Alles unter .plan-liste gescopet, damit sich
   nichts mit den Wirts-Stylesheets beißt. Farben aus /ui/tokens.css. */

.plan-liste { display: flex; flex-direction: column; gap: 1.15rem;
  max-width: 880px; margin: 0 auto; }

.plan-liste .takt-satz { margin: 0; color: var(--text-gedimmt); font-size: 0.9rem; }
.plan-liste .takt-satz b { color: var(--hk-dunkelblau); font-variant-numeric: tabular-nums; }

/* Je Maschine: schlanke Kopfzeile, darunter EINE weiße Karte mit Zeilen. */
.plan-liste .m-block { display: flex; flex-direction: column; gap: 0.3rem; }
.plan-liste .m-kopf { display: flex; align-items: baseline; gap: 0.55rem; padding: 0 0.2rem; }
.plan-liste .m-name { font-size: 1.05rem; font-weight: 800;
  letter-spacing: var(--titel-spationierung); }
.plan-liste .m-kopf .mcode { margin-left: auto; font-size: 0.78rem;
  color: var(--text-gedimmt); text-align: right; }
.plan-liste .m-kopf .status-punkt { align-self: center; }
.plan-liste .status-punkt { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.plan-liste .status-punkt.laeuft { background: var(--gruen); box-shadow: 0 0 8px rgba(46,158,91,0.6); }
.plan-liste .status-punkt.einrichten { background: #e0a800; box-shadow: 0 0 8px rgba(224,168,0,0.6); }
.plan-liste .status-punkt.wartet { background: var(--rand-stark); }
.plan-liste .m-karte { background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(18, 60, 100, 0.05), 0 10px 24px -12px rgba(18, 60, 100, 0.14); }
.plan-liste .m-block.hand-gesetzt .m-name { color: var(--hk-blau, #1275bb); }
.plan-liste .m-block.hand-gesetzt .m-karte { border-color: #cfe4f4; }

/* Eine Zeile = ein Arbeitsgang: links was, rechts die Zahl, daneben der Mensch. */
.plan-liste .gang-zeile { display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 1rem; border-top: 1px solid var(--rand); }
.plan-liste .m-karte > :first-child { border-top: none; }
.plan-liste .gz-haupt { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: 0.15rem; }
.plan-liste .gz-titel { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.plan-liste .gz-titel .produkt { font-size: 1.05rem; font-weight: 700;
  color: var(--hk-dunkelblau); }
.plan-liste .gz-sub { font-size: 0.85rem; color: var(--text-gedimmt); }
.plan-liste .gz-sub .zn { font-family: Consolas, monospace; background: var(--flaeche-hell);
  padding: 0.05rem 0.4rem; border-radius: 6px; margin-left: 0.4rem; font-size: 0.82rem; }
.plan-liste .gz-zahl { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 0.05rem; min-width: 5.5rem; text-align: right; }
.plan-liste .gz-zahl b { font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: var(--hk-dunkelblau); }
.plan-liste .gz-zahl small { font-size: 0.72rem; color: var(--text-gedimmt); max-width: 11rem; }
.plan-liste .gz-zahl.ungeplant small { font-style: italic; }
/* v2.245: Das Los steht unter der Tagesmenge — leiser, aber lesbar. Es beantwortet
   die zweite Frage jedes Werkers: „und wie lange geht das noch?" */
.plan-liste .gz-zahl .gz-los { font-size: 0.68rem; opacity: 0.75; }
.plan-liste .gz-lage { font-size: 0.78rem; font-weight: 700; }
.plan-liste .gz-lage.ok { color: var(--gruen-text, #237a45); }
.plan-liste .gz-lage.warn { color: var(--gelb-text, #96690a); }
.plan-liste .gz-lage.rot { color: var(--rot-text, #c0392b); }

/* Der Werker: schmaler Knopf, 44 px hoch — der häufigste Handgriff (G2.12). */
.plan-liste .gz-werker { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 0.15rem; width: auto; min-width: 3.6rem; min-height: 44px;
  padding: 0.25rem 0.4rem; text-align: center; font: inherit; color: inherit;
  background: transparent; border: 1px dashed transparent; border-radius: 8px; }
.plan-liste button.gz-werker { cursor: pointer; }
.plan-liste button.gz-werker:hover { border-color: var(--rand-stark); background: var(--flaeche-hell); }
.plan-liste button.gz-werker:focus-visible { outline: 2px solid var(--hk-blau); outline-offset: 2px; }
.plan-liste .gz-werker .avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--hk-dunkelblau); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.85rem; font-weight: 800; }
.plan-liste .gz-werker .avatar.leer { background: transparent;
  border: 2px dashed var(--rot-text, #c0392b); color: var(--rot-text, #c0392b); }
.plan-liste .gzw-name { font-size: 0.72rem; font-weight: 600; max-width: 5.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-liste .gzw-name.rot { color: var(--rot-text, #c0392b); font-weight: 700; }
.plan-liste .gz-werker.abwesend { flex-direction: row; color: var(--gelb-text, #96690a);
  font-weight: 700; font-size: 0.78rem; }

/* Kleinteile der Zeile. */
.plan-liste .auftrag-nr { font-weight: 800; font-size: 0.85rem; color: #fff;
  background: var(--hk-dunkelblau); padding: 0.1rem 0.55rem; border-radius: 999px;
  letter-spacing: 0.02em; }
.plan-liste .stift { margin-left: auto; border: 1px solid var(--rand-stark);
  background: var(--flaeche-hell); color: var(--hk-dunkelblau); border-radius: 10px;
  width: 2rem; height: 2rem; cursor: pointer; font-size: 1rem; font-family: inherit; }
.plan-liste .stift:active { transform: scale(0.94); }
.plan-liste .hk-chip { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.plan-liste .hk-rueckstand { background: #fde8e6; color: #a3342b; }
.plan-liste .hk-hand { background: #e6f0fb; color: var(--hk-blau, #1275bb); }
.plan-liste .hk-vor { background: #fff3cd; color: #8a6d00; }
.plan-liste .hk-ungeplant { background: #eceff1; color: #4a5560; }
.plan-liste .hinweis-box { background: var(--gelb-flaeche); border-left: 3px solid var(--gelb);
  padding: 0.45rem 0.7rem; border-radius: 8px; font-size: 0.82rem; }
.plan-liste .abwesend-text { color: var(--gelb-text, #96690a); font-weight: 700; }

/* G3.3: Fertigtermin und Terminlage — dieselbe Zahl wie an der Tafel. */
.plan-liste .termin-zeile { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0.6rem; font-size: 0.82rem; }
.plan-liste .termin-zeile.offen { color: var(--text-gedimmt); font-style: italic; }
.plan-liste .termin-zeile .lt { color: var(--text-gedimmt); }
.plan-liste .termin-zeile .tl { padding: 0 0.35rem; border-radius: 5px; font-weight: 600;
  white-space: nowrap; }
.plan-liste .termin-zeile .tl.t-gruen { background: rgba(46, 158, 91, 0.20); color: var(--gruen-text, #1c7a41); }
.plan-liste .termin-zeile .tl.t-gelb  { background: rgba(217, 154, 0, 0.22); color: var(--gelb-text, #8a6200); }
.plan-liste .termin-zeile .tl.t-rot   { background: rgba(200, 60, 55, 0.24); color: var(--rot-text, #a52a25); }

/* Schrittkette hinter dem Aufklapper — „Schritt 4 von 8" bleibt in der Zeile. */
.plan-liste .kette-falte summary { font-size: 0.78rem; color: var(--text-gedimmt);
  cursor: pointer; padding: 0.15rem 0; }
.plan-liste .kette { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.3rem 0 0.1rem; }
.plan-liste .schritt { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem;
  padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--flaeche-hell);
  color: var(--text-gedimmt); border: 1px solid transparent; }
.plan-liste .schritt .pkt { width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
  font-weight: 800; background: var(--rand-stark); color: #fff; flex: none; }
.plan-liste .schritt.erledigt { color: var(--gruen); }
.plan-liste .schritt.erledigt .pkt { background: var(--gruen); }
.plan-liste .schritt.aktiv { background: linear-gradient(135deg, var(--hk-blau), var(--hk-dunkelblau));
  color: #fff; border-color: transparent; box-shadow: var(--schatten-blau); font-weight: 700; }
.plan-liste .schritt.aktiv .pkt { background: rgba(255,255,255,0.28); }
.plan-liste .schritt .mtag { font-size: 0.66rem; opacity: 0.8; margin-left: 0.15rem; }

/* Spuren: gleichrangige Zeilen mit SPUR-Etikett (v2.232/v2.236). */
.plan-liste .spuren-reihe { display: contents; }
.plan-liste .spur-zeile { background: var(--flaeche-hell, #f6fafd); }
.plan-liste .spur-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--hk-blau, #1275bb); }
.plan-liste .spur-warn { font-weight: 700; color: var(--rot-text, #c0392b); }

/* Nebenzeilen (Handplanung, Hand & Büro, Zusatzaufgaben): leise Listenzeilen. */
.plan-liste .neben-zeile { padding: 0.55rem 1rem; font-size: 0.88rem;
  border-top: 1px solid var(--rand); }
.plan-liste .neben-zeile b { color: var(--hk-dunkelblau); }
.plan-liste .danach-info { color: var(--text-gedimmt); font-size: 0.8rem; }

/* Warteschlange zugeklappt — Anzahl + der Nächste stehen in der Zusammenfassung. */
.plan-liste .danach-falte { border-top: 1px solid var(--rand); }
.plan-liste .danach-falte summary { padding: 0.55rem 1rem; font-size: 0.8rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-gedimmt); cursor: pointer; display: flex; gap: 0.5rem;
  align-items: baseline; flex-wrap: wrap; }
.plan-liste .danach-falte summary .danach-info { text-transform: none; letter-spacing: 0;
  font-weight: 500; }
.plan-liste .danach-falte .danach-zeile { padding: 0.25rem 1rem; font-size: 0.86rem; }
.plan-liste .danach-falte .danach-zeile b { color: var(--hk-dunkelblau); }
.plan-liste .danach-falte[open] { padding-bottom: 0.5rem; }

/* Handy: Zahl + Werker rutschen unter den Text, nichts schiebt waagerecht. */
@media (max-width: 560px) {
  .plan-liste .gang-zeile { flex-wrap: wrap; }
  .plan-liste .gz-haupt { flex: 1 1 100%; }
  .plan-liste .gz-zahl { align-items: flex-start; text-align: left; }
  .plan-liste .gz-werker { margin-left: auto; flex-direction: row; }

  /* v2.245 — HALLEN-DICHTE am Handy (SM 01.09.: „Weniger scrollen").
     GEMESSEN: In der Planer-Dichte stapelten sich Text, Zahl und Werker zu drei
     vollbreiten Blöcken — 223 px je Arbeitsgang, bei sieben Gängen 2.129 px Liste.
     Kompakt legt sie in ein 2x2-Raster: links Text über beide Zeilen, rechts oben die
     Stückzahl, rechts unten der Mensch. Dieselben Bausteine, ein Drittel der Höhe. */
  .plan-liste .m-kompakt .gang-zeile { display: grid;
    /* Beide Spalten minmax(0,…): ohne das darf keine von beiden unter ihre
       Inhaltsbreite schrumpfen — gemessen schob der Werkerknopf („⚠ Zakaria nicht
       eingeteilt", 250 px) sich quer über den Teilenamen. */
    /* 7rem für die Zahlspalte, gemessen: die App hat am Handy 308 px Inhaltsbreite
       (rechts liegt die 4,2-rem-Gasse für die schwebenden Knöpfe). Mit 9,5 rem blieben
       dem Teilenamen 118 px — „Mahlgehä…". Mit 7 rem sind es 158 px, und „Mahlgehäuse"
       steht ganz da. Die Zahlspalte trägt dafür kürzere Beschriftungen (siehe .gz-los). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
    align-items: center; column-gap: 0.7rem; row-gap: 0.1rem; padding: 0.6rem 0.85rem; }
  .plan-liste .m-kompakt .gz-haupt { grid-column: 1; grid-row: 1 / span 2; flex: none;
    min-width: 0; }
  .plan-liste .m-kompakt .gz-zahl { grid-column: 2; grid-row: 1;
    align-items: flex-end; text-align: right; min-width: 0; }
  .plan-liste .m-kompakt .gz-zahl small { max-width: 100%; font-size: 0.66rem;
    line-height: 1.25; }
  .plan-liste .m-kompakt .gz-werker { grid-column: 2; grid-row: 2; margin-left: 0;
    justify-content: flex-end; padding: 0.2rem 0.35rem; min-width: 0;
    max-width: 100%; overflow: hidden; white-space: nowrap; }
  /* Der Name darf schrumpfen, die Stückzahl nicht — sie ist der Grund für die Zeile. */
  .plan-liste .m-kompakt .gz-werker .gzw-name { max-width: 5.5rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  /* Je EINE Zeile für Titel und Unterzeile. Gemessen brachen beide auf zwei Zeilen um,
     sobald die Stückzahl rechts ihre Spalte bekam — 136 px allein für den Text. Der
     Teilename steht vorn und bleibt lesbar; was hinten abgeschnitten wird (Kunde,
     Aufspannung), steht im Sheet, das ein Tipp entfernt ist. */
  .plan-liste .m-kompakt .gz-titel { flex-wrap: nowrap; min-width: 0; gap: 0.35rem; }
  .plan-liste .m-kompakt .gz-titel .produkt { flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plan-liste .m-kompakt .gz-titel .auftrag-nr { flex: none; }
  /* Die Herkunft ist eine Planerfrage („warum steht die Zeile hier?"). In der Halle
     kostet sie nur Breite — und „vom Chef gesetzt" steht ohnehin schon als Überschrift
     über dem Block „✋ Von Hand gesetzt". */
  .plan-liste .m-kompakt .gz-titel .hk-chip { display: none; }
  .plan-liste .m-kompakt .gz-sub { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
}