/* =============================================================
   idf-wertliste.css - Shared Wertliste (v0.2.0, #629 / #640)

   Zeile = Name, Menge, Einheit, Löschen - im Listen-Muster und NICHT als
   Formularzeile (#640). Geometrie und Farben kommen aus den Tokens; Text-
   Zelle, Zahlen-Ausrichtung, Stift und Löschen-Pille aus den Shared-
   Bausteinen (list-view/grid-css, functions/inline-editing). Hier steht
   nur das Raster und die Trennlinie.
   ============================================================= */

.wl-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.wl-rows {
  display: flex;
  flex-direction: column;
}

/* Name wächst, Menge ist schmal und rechtsbündig, Einheit steht als
   stiller Text dahinter, Löschen schließt die Zeile ab. Feste Spuren,
   damit Mengen und Einheiten aller Zeilen untereinander stehen.

   Trennlinie statt Abstand: das ist das Listen-Muster (.idf-list-row),
   und eine Wertliste liest sich mit zehn Vitaminen sonst wie ein Stapel
   loser Kärtchen. Die letzte Zeile bekommt keine, sonst steht ein Strich
   ohne Zeile darunter. */
.wl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 44px 28px;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-1, 4px);
  border-bottom: 1px solid var(--ink-10);
  transition: background 120ms ease;
}

.wl-row:last-child { border-bottom: 0; }

/* Zeilen-Hover wie in jeder Listen- und Modal-Liste - er sagt, dass die
   Zeile Bedienelemente trägt (Stift, Löschen), die erst beim Hover
   auftauchen. */
.wl-row:hover { background: var(--ink-4); }

/* Ohne Menge (reine Auswahl-Liste, z.B. Zusatzstoffe): Name und Löschen. */
.wl-row.is-ohne-menge {
  grid-template-columns: minmax(0, 1fr) 28px;
}

/* Zelle = Flex-Zeile, damit `.idf-list-cell-text` (flex: 1 1 auto) und der
   Stift nebeneinander sitzen und der Text ellipst statt zu überlaufen -
   dieselbe Rolle wie `.idf-list-grid > div` in der Listen-Engine. */
.wl-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Rechtsbündig und Tabellenziffern liefert `.idf-list-cell-num` (grid-css),
   den Stift und seinen Rechtsschub `.idf-inline-edit-btn`. Er steht hier im
   Fluss hinter dem Wert und nicht darüber: das Schweben ist eine Regel der
   Listen-Engine, und in dieser Zeile wäre es auch falsch, weil rechts vom
   Wert die Einheit folgt. Deshalb steht hier nichts. */

.wl-cell-einheit {
  color: var(--ink-75);
  font-size: var(--font-sm, 0.875rem);
}

.wl-cell-action {
  justify-content: flex-end;
}

/* Die Löschen-Pille steht hier NICHT in einer `.idf-list-row`, wo
   grid-css sie bis zum Zeilen-Hover ausblendet. Sie behält deshalb ihren
   Default (0.4 sichtbar, 1.0 beim Hover) - sonst sähe die Zeile aus, als
   ginge nichts mehr weg. */

.wl-empty {
  color: var(--ink-50);
  font-size: var(--font-sm, 0.875rem);
  font-style: italic;
  padding: var(--space-2, 8px) var(--space-1, 4px);
}

/* Handy: Menge und Einheit rutschen unter den Namen, sonst bleiben für
   den Namen 120 px. Die Plätze stehen explizit da - mit Auto-Platzierung
   landet die Löschen-Pille in der zweiten Zeile.

   `.is-ohne-menge` bekommt seine Spuren hier NOCH EINMAL: die Regel oben
   liegt auf derselben Spezifität, und im Media-Query gewinnt sonst die
   Vier-Spalten-Fassung für eine Zeile, die nur zwei Zellen hat. */
@media (max-width: 600px) {
  .wl-row {
    grid-template-columns: minmax(0, 1fr) 44px 28px;
    row-gap: var(--space-1, 4px);
  }
  .wl-row .wl-cell-name    { grid-area: 1 / 1 / 2 / 3; }
  .wl-row .wl-cell-action  { grid-area: 1 / 3 / 2 / 4; }
  .wl-row .wl-cell-menge   { grid-area: 2 / 1 / 3 / 2; justify-content: flex-start; }
  .wl-row .wl-cell-einheit { grid-area: 2 / 2 / 3 / 4; }

  .wl-row.is-ohne-menge {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .wl-row.is-ohne-menge .wl-cell-name   { grid-area: 1 / 1 / 2 / 2; }
  .wl-row.is-ohne-menge .wl-cell-action { grid-area: 1 / 2 / 2 / 3; }
}