/**
 * lebensmittel.css - nur Lebensmittel-Spezifika (v0.1.0).
 *
 * Alle generischen Muster kommen aus dem Shared-Set:
 *  - Listen-Layout, Hover, Empty, Loading, Load-More, Pillen-Geometrie,
 *    Sortier-Indikatoren, Save-Animation, Delete-Button, Two-Line-Cell,
 *    Avatar-Cell, Action-Cell, Karten-Modus (unter 600 px):
 *    _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - Inline-Edit-Affordance: _shared/functions/inline-editing/idf-inline-edit.css
 *  - Modal-Formfelder:       _shared/blocks/forms/idf-forms.css
 *  - Firmen-Karten:          _shared/blocks/hub-card/
 *  - Unterlagen-Reiter:      _shared/functions/file-attachment/
 *  - Bild-Block im Modal:    _shared/functions/detail-modal/ (.idf-basics-split)
 *
 * Hier bleiben ausschliesslich:
 *  - Spaltenbreiten (.lm-grid)
 *  - Cell-Anker (.lm-cell-* fuer Inline-Edit-hostSel und Responsive)
 *  - Semantik-Farben der Status-, Relevanz- und Saison-Pille
 *  - Dashboard-Hinweiszeile
 *  - Responsive
 */

/* ================================================================ */
/* Dashboard                                                         */
/* ================================================================ */

/* Seitlicher Rand kommt aus der Shared-Klasse .idf-list-inset (im Markup),
   damit er derselbe ist wie bei den Listen-Kindern und auf schmalen Schirmen
   von allein mitwandert. Hier nur die vertikalen Abstaende. */
/* HIER STAND .lm-dash-hint, der Absatz „Wähle ein Unternehmen, um …" ueber
   den Karten. Raus mit Issue 1085: erklaerender Text gehoert nicht ueber die
   Daten, und der Tooltip der Karte sagt es jetzt an der Stelle, an der man
   fragt. Seitlicher Rand kam aus der Shared-Klasse .idf-list-inset. */

.lm-dash-grid {
  padding-top: var(--space-4, 16px);
  padding-bottom: var(--space-10, 40px);
}

/* ================================================================ */
/* Produktliste: Spaltenbreiten                                      */
/* ================================================================ */
/* Spalten: Bild · Name+Verkehrsbezeichnung · Marke · Kategorie ·
   Fuellmenge · Relevanz · Saison · Status · Loeschen. */

.lm-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--lm-cols,
    52px                /* Produktbild - quadratisch, fuellt die Zeilenhoehe */
    minmax(240px, 1fr)  /* Name (+ Verkehrsbezeichnung als Sub-Line) - waechst */
    160px               /* Marke (Logo + Name) */
    150px               /* Kategorie */
    120px               /* Fuellmenge (Zahl + Einheit) */
    70px                /* Nutri-Score */
    60px                /* Allergene */
    140px               /* Sortimentsrelevanz */
    150px               /* Saison */
    140px               /* Status */
    44px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Pen + Inhalt mit einheitlichem Abstand, wenn die Zelle selbst Host ist. */
.idf-list-rows .idf-list-row .lm-grid .idf-inline-edit-host {
  gap: 8px;
}

/* Editierende Zelle darf aufmachen, damit Comboboxen nicht clippen. */
.idf-list-rows .idf-list-row .lm-grid > div.is-editing {
  overflow: visible;
}

/* ================================================================ */
/* Spalten der Zutaten-Liste (zutaten.php, R1 aus #654)              */
/* Zutat · Wissenschaftlicher Name · Herkunft · Bio · Ersatz · Löschen */

.lm-zut-grid {
  display: grid;
  grid-template-columns: var(--lm-zut-cols,
    minmax(200px, 1fr)  /* Zutat, wie sie deklariert wird - waechst */
    150px               /* Art (Zutat, Zusatzstoff, Aroma, Farbstoff) */
    220px               /* Wissenschaftlicher Name */
    160px               /* Herkunftsland */
    150px               /* Bio-Status */
    180px               /* Ersatzzutat */
    44px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}

.idf-list-rows .idf-list-row .lm-zut-grid .idf-inline-edit-host {
  gap: 8px;
}

.idf-list-rows .idf-list-row .lm-zut-grid > div.is-editing {
  overflow: visible;
}

/* Der wissenschaftliche Name ist eine Nebenauskunft und steht kursiv - so
   heisst er in jeder Zutatenliste und auf jedem Etikett. */
.lm-zut-wiss {
  font-style: italic;
  color: var(--mid, #555);
}

/* Die Farben der Bio-Pille stehen weiter unten im Abschnitt „Bio-Pille im
   Zutaten-Reiter" - sie gelten fuer beide Orte, die Katalog-Liste nutzt
   dieselbe Klasse. Hier bewusst kein zweiter Satz Farben. */

/* Ersatz-Zelle der Katalog-Liste: der Rang steht als kleine Marke hinter dem
   Namen, die Zahl der weiteren Ersaetze dahinter. Beides still - der Name
   ist die Auskunft, alles andere qualifiziert sie nur. */
.lm-zut-ersatz-rang,
.lm-zut-ersatz-rest {
  font-size: var(--font-sm, 0.875rem);
  color: var(--mid, #555);
}
.lm-zut-ersatz-rang {
  font-weight: var(--weight-medium, 500);
}

/* ================================================================ */
/* Status-Pille                                                      */
/* ================================================================ */
/* Geometrie kommt aus `.idf-pill-tag`; hier nur die Semantik-Farben.
   Tints, weil es Pillen sind - Flaechen naehmen --wash-*.

   Die Reihenfolge ist der Lebenszyklus: Idee und Entwicklung sind noch nicht
   im Markt (still), Aktiv ist der Normalfall (gruen), Auslaufend ist die
   einzige Zeile, die eine Handlung verlangt (orange), Archiv ist vorbei. */

.lm-status-pill[data-status="idee"] {
  background: var(--tint-neutral);
  color: var(--mid, #555);
}
.lm-status-pill[data-status="entwicklung"] {
  background: var(--tint-indigo);
  color: var(--indigo, #4f46e5);
}
.lm-status-pill[data-status="aktiv"] {
  background: var(--tint-confirm);
  color: var(--confirm, #0c998e);
}
.lm-status-pill[data-status="auslaufend"] {
  background: var(--tint-orange);
  color: var(--orange-text, #b45309);
}
.lm-status-pill[data-status="archiv"] {
  background: var(--tint-neutral);
  color: var(--soft, #999);
}

/* ================================================================ */
/* Sortimentsrelevanz-Pille                                          */
/* ================================================================ */
/* Kern traegt die Markenfarbe: es ist das, wovon die Firma lebt. Der Rest
   staffelt sich davon weg, Rand bleibt bewusst still. */

.lm-relevanz-pill[data-relevanz="kern"] {
  background: var(--tint-primary);
  color: var(--primary, #c8134b);
}
.lm-relevanz-pill[data-relevanz="rand"] {
  background: var(--tint-neutral);
  color: var(--mid, #555);
}
.lm-relevanz-pill[data-relevanz="saison"] {
  background: var(--tint-indigo);
  color: var(--indigo, #4f46e5);
}
.lm-relevanz-pill[data-relevanz="aktion"] {
  background: var(--tint-orange);
  color: var(--orange-text, #b45309);
}
.lm-relevanz-pill[data-relevanz="test"] {
  background: var(--tint-yellow);
  color: var(--yellow-text, #b58600);
}

/* ================================================================ */
/* Saison-Pille                                                      */
/* ================================================================ */
/* Steht nur am Saisonartikel und sagt WANN (Anlass oder Kalenderwochen).
   Dieselbe Farbe wie die Relevanz „Saison", weil es dieselbe Aussage ist. */

.lm-saison-pill {
  background: var(--tint-indigo);
  color: var(--indigo, #4f46e5);
}

/* ================================================================ */
/* Nutri-Score-Pille                                                 */
/* ================================================================ */
/* Die Skala ist die des offiziellen Logos: A dunkelgruen bis E rot. Anders
   als bei den uebrigen Pillen sind das KEINE Tints, sondern Vollflaechen mit
   weisser Schrift - der Nutri-Score ist ein Zeichen, das man wiedererkennt,
   und eine blasse Fassung davon liest niemand als Nutri-Score. Deshalb auch
   die feste Breite: fuenf Buchstaben, eine Spalte, kein Springen. */

.lm-nutri-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--white, #fff);
  font-weight: var(--weight-bold, 700);
  background: var(--soft, #999);
}
.lm-nutri-pill[data-nutri="a"] { background: #038141; }
.lm-nutri-pill[data-nutri="b"] { background: #85bb2f; }
.lm-nutri-pill[data-nutri="c"] { background: #fecb02; color: var(--dark, #222); }
.lm-nutri-pill[data-nutri="d"] { background: #ee8100; }
.lm-nutri-pill[data-nutri="e"] { background: #e63e11; }

/* ================================================================ */
/* Allergen-Zelle der Liste                                          */
/* ================================================================ */
/* Drei Zustaende, drei Aussagen: enthaelt welche (Zahl), geprueft und frei
   (Haken), noch nicht geprueft (Fragezeichen). Der dritte Zustand ist der
   Grund fuer die Zelle - "keine Allergene" und "niemand hat hingesehen"
   duerfen nicht gleich aussehen. */

.lm-allergen-marke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm, 0.875rem);
  line-height: 1;
}
.lm-allergen-marke.is-enthalten { color: var(--orange-text, #b45309); }
.lm-allergen-marke.is-frei      { color: var(--confirm, #0c998e); }
.lm-allergen-marke.is-ungeprueft { color: var(--soft, #999); }

/* ================================================================ */
/* Art des Stoffes (#654)                                            */
/* ================================================================ */
/* Ein Rezept ist EINE Liste ueber alle Arten. Die Pille sagt, welcher
   Sorte eine Zeile angehoert - und bleibt still, weil die Art die Zeile
   beschreibt und nicht bewertet. „Zutat" ist der Normalfall und traegt in
   der Rezept-Zeile gar keine Pille. */

.lm-art-pille {
  background: var(--tint-neutral);
  color: var(--mid, #555);
}
.lm-art-pille[data-art="zusatzstoff"] {
  background: var(--tint-indigo);
  color: var(--indigo, #4f46e5);
}
.lm-art-pille[data-art="aroma"],
.lm-art-pille[data-art="farbstoff"],
.lm-art-pille[data-art="verarbeitungshilfsstoff"] {
  background: var(--tint-accent);
  color: var(--accent, #167ea0);
}

/* Rezept-Zeile: Anteil, Art, Herkunft, Bio, Lieferant nebeneinander. */
.lm-rezept-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.lm-anteil {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-variant-numeric: tabular-nums;
}
.lm-rezept-herkunft {
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.875rem);
}

/* ================================================================ */
/* Ersatz-Reiter der Zutat (#665)                                    */
/* ================================================================ */
/* Geometrie der Pille kommt aus `.idf-pill-tag`, die Zeilen-Meta-Spalte
   aus dem Standard-Artefakt (`.idf-sa-relation-meta`). Hier nur die
   Semantik: A ist die erste Wahl und darf das zeigen, B und C sind
   Ausweichwege und bleiben neutral. */

.lm-ersatz-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.lm-rang-pille {
  cursor: pointer;
  background: var(--tint-neutral);
  color: var(--mid, #555);
}
.lm-rang-pille[data-rang="A"] {
  background: var(--tint-confirm);
  color: var(--confirm, #0c998e);
}
/* Ohne Rang: als offene Aufforderung lesbar, nicht als gesetzter Zustand. */
.lm-rang-pille.is-offen {
  background: transparent;
  border: 1px dashed var(--line, #e5e5e5);
  color: var(--soft, #999);
}
.lm-rang-pille:hover {
  filter: brightness(0.96);
}

.lm-ersatz-hinweis {
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.875rem);
}

/* ================================================================ */
/* Bio-Pille: Zutaten-Reiter am Produkt UND Zutaten-Katalog           */
/* ================================================================ */
/* Eine Farbgebung fuer beide Orte - es ist derselbe Zustand derselben
   Zutat. Konventionell bleibt neutral: es ist der Normalfall und darf
   nicht wie ein Befund aussehen. */

.lm-bio-pill[data-bio="bio"] {
  background: var(--tint-green);
  color: var(--green-text, #1f7a3f);
}
.lm-bio-pill[data-bio="umstellung"] {
  background: var(--tint-yellow);
  color: var(--yellow-text, #b58600);
}
.lm-bio-pill[data-bio="konventionell"] {
  background: var(--tint-neutral);
  color: var(--mid, #555);
}

/* Erstlieferant in der Zutaten-Zeile: steht hinter den uebrigen Meta-Werten
   und bleibt still - er ist Zusatzauskunft, nicht der Inhalt der Zeile. */
.lm-zutat-lieferant {
  margin-left: 8px;
  color: var(--mid, #555);
  white-space: nowrap;
}
.lm-zutat-lieferant i { margin-right: 4px; opacity: 0.7; }

/* ================================================================ */
/* Modal: Block-Titel und Nährwert-Tabelle                           */
/* ================================================================ */
/* Der Naehrwerte-Reiter traegt vier Feldgruppen (Rezeptur, Naehrwerte,
   Zusatzstoffe, Ernaehrung). Ohne Zwischenueberschrift waere das eine Wand
   aus 30 Feldern. Geometrie und Farbe kommen aus den Tokens; die Klasse
   setzt nur Abstand und Gewicht. */

.lm-block-titel {
  margin-top: var(--space-4, 16px);
  padding-bottom: var(--space-1, 4px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  color: var(--mid, #555);
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-bold, 700);
}
.lm-block-titel:first-child { margin-top: 0; }

/* Gerechnete Werte je Portion. Bewusst eine Tabelle: drei Spalten mit
   Zahlen, die man untereinander liest. */
.lm-naehrwert-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm, 0.875rem);
}
.lm-naehrwert-tabelle th,
.lm-naehrwert-tabelle td {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  text-align: left;
}
.lm-naehrwert-tabelle thead th {
  color: var(--mid, #555);
  font-weight: var(--weight-medium, 500);
}
.lm-naehrwert-tabelle tbody th {
  font-weight: var(--weight-regular, 400);
}
.lm-naehrwert-tabelle td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Die 14 Allergen-Pillen als Reihe. Der Baustein bringt die Pillen-Geometrie
   mit (.idf-flag-group), hier nur der Umbruch: vierzehn Pillen brauchen
   mehrere Zeilen, und ohne row-gap kleben sie aneinander. */
.lm-allergen-gruppe {
  flex-wrap: wrap;
  row-gap: var(--space-2, 8px);
}

/* Der Prüf-Hinweis über den Pillen wird gelb, solange nichts geprüft ist.
   Flaeche, also --wash-*, nicht --tint-* (das gehoert den Pillen). Eigene
   Modul-Klasse statt eines Modifiers auf `.idf-hint`: der Baustein gehoert
   allen Modulen, ein `.is-warn` daran waere eine stille Erweiterung seiner
   API. */
.lm-allergen-status.is-warn {
  background: var(--wash-yellow, #fffaee);
}

/* ================================================================ */
/* Modal: Produktbild-Block                                          */
/* ================================================================ */
/* Der Split-Wrapper und die Feldspalten kommen aus dem Standard-Artefakt
   (.idf-basics-split / .idf-basics-split-fields). Hier nur der Abstand
   ueber dem Bild, damit es mit der ersten Feldzeile fluchtet. */

.lm-bild-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  min-width: 0;
}

/* ================================================================ */
/* Responsive                                                        */
/* ================================================================ */
/* Kanon-Breakpoints: 1100 (enger Desktop), 720 (Tablet), 600 (Karten-Modus,
   kommt aus Shared). Ausgeblendet wird immer Kopfzelle UND Zeilenzelle, und
   mit !important: die Shared-Zellenregel
   `.idf-list-rows .idf-list-row .idf-list-grid > div` ist spezifischer als
   ein Modul-Selektor und liesse die Zelle sonst stehen (RESPONSIVE-PLAN). */

@media (max-width: 1100px) {
  /* col-resize im Schmal-Layout inaktiv (das Modul-Grid gewinnt hier):
     Griffe weg, Scroll-Modus neutralisieren, damit nichts verrutscht. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* Enger Desktop: schmale Spalten weg. Die (min-width: 601px)-Klammer ist
   Pflicht (Muster verbrauchsmaterial T12/#571): ohne sie fehlten Kategorie und
   Relevanz per display:none auch auf der Handy-Karte - dort entscheiden die
   data-m-Rollen des Zeilen-Renderers.

   Das Grid steht hier bewusst OHNE var(--lm-cols): die gespeicherte
   Nutzer-Breite haette neun Spuren, sichtbar sind nur noch sieben. */
@media (max-width: 1100px) and (min-width: 601px) {
  .lm-grid {
    grid-template-columns:
      52px                /* Produktbild */
      minmax(200px, 1fr)  /* Name */
      140px               /* Marke */
      110px               /* Fuellmenge */
      66px                /* Nutri-Score */
      56px                /* Allergene */
      140px               /* Saison */
      130px               /* Status */
      44px;               /* Loeschen */
  }

  /* Kategorie und Relevanz sind Einordnung, nicht Kernauskunft: sie fallen
     zuerst. Nutri-Score und Allergene bleiben - sie sind bei einem
     Lebensmittel die Auskunft, wegen der man die Liste aufmacht.
     !important noetig: die Shared-Body-Cell-Regel
     `.idf-list-rows .idf-list-row .idf-list-grid > div` setzt display:flex
     mit hoeherer Spezifitaet als jeder Modul-Selektor. */
  .lm-cell-kategorie,
  .lm-cell-relevanz {
    display: none !important;
  }
}