/**
 * idf-chargen - Reiter „Chargen“ im Material-Fenster (apps-v2 #2482).
 * Zeilen, Pillen und Karte kommen aus functions/list-view/grid-css,
 * Zuklappen und Block aus blocks/klapp-liste. Hier stehen nur das Raster
 * der Kopfzeile und die Farbe des MHD.
 */

/* Spalten: Schalter, Aufgebraucht, Charge, MHD, Menge, Eingang, Etikett,
   Loeschen. MHD zweizeilig wie in der Material-Liste („31.08.2026“ und
   „123 Tage abgelaufen“ brauchen 128 px mit Rand, die Spalte hat 150 px).
   Menge „1.250,5“ 54 px plus Rand, 100 px. Eingang ein Datum, 116 px wie
   die Datumsspalten der Klapp-Listen. Die Charge nimmt den Rest. */
.idf-chargen-grid {
  display: grid;
  grid-template-columns: 44px 44px minmax(120px, 1fr) 150px 100px 116px 44px 44px;
}

/* Schmale Liste: MHD, Menge und Eingang in einer zweiten Zeile unter der
   Charge. Feste Spalten 44 + 44 + 150 + 100 + 116 + 44 + 44 = 542, dazu
   120 fuer die Charge: unter 662 px stuende sie gekuerzt da. */
@container klapp-liste (width < 662px) {
  .idf-chargen-grid {
    grid-template-columns: 44px 44px repeat(3, minmax(0, 1fr)) 44px 44px;
    grid-template-areas:
      "schalter weg charge charge charge etikett loeschen"
      ".        .   mhd    menge  eingang .       .";
  }
  .idf-chargen-grid > :nth-child(1) { grid-area: schalter; }
  .idf-chargen-grid > :nth-child(2) { grid-area: weg; }
  .idf-chargen-grid > :nth-child(3) { grid-area: charge; }
  .idf-chargen-grid > :nth-child(4) { grid-area: mhd; }
  .idf-chargen-grid > :nth-child(5) { grid-area: menge; }
  .idf-chargen-grid > :nth-child(6) { grid-area: eingang; }
  .idf-chargen-grid > :nth-child(7) { grid-area: etikett; }
  .idf-chargen-grid > :nth-child(8) { grid-area: loeschen; }
}

/* Der Block rueckt bis unter die Charge ein: davor Schalter und Pille. */
.idf-chargen-klapp { --idf-klapp-einzug: 88px; }

/* MHD wie in der Material-Liste: abgelaufen rot und fett, heute orange
   und fett, in den naechsten 30 Tagen orange. */
.idf-chargen-cell-mhd.is-abgelaufen .idf-list-cell-two-line-text,
.idf-chargen-cell-mhd.is-abgelaufen .idf-list-cell-two-line-sub { color: var(--primary); }
.idf-chargen-cell-mhd.is-abgelaufen .idf-list-cell-two-line-text,
.idf-chargen-cell-mhd.is-heute .idf-list-cell-two-line-text { font-weight: var(--weight-bold, 700); }
.idf-chargen-cell-mhd.is-heute .idf-list-cell-two-line-text,
.idf-chargen-cell-mhd.is-bald .idf-list-cell-two-line-text { color: var(--orange); }