/**
 * verbrauchsmaterial.css — nur Verbrauchsmaterial-Spezifika (v0.1.0,
 * erweiterter Klon der Zubehör-App).
 *
 * Alle generischen Listen-Patterns kommen aus dem Shared-Set:
 *  - Listen-Layout, Hover, Empty, Loading, Load-More, Status-Pille-Geometrie,
 *    Sortier-Indikatoren, Save-Animation, Drag/Done/Delete-Buttons, Toggle-
 *    Button, Two-Line-Cell, Avatar-Cell, Plain-Text-Cell,
 *    Action-Cell (Icon-Button-only):  _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - Inline-Edit-Affordance:           _shared/functions/inline-editing/idf-inline-edit.css
 *  - Modal-Form-Felder (idf-form):     _shared/blocks/forms/idf-forms.css
 *
 * Hier bleiben ausschließlich Verbrauchsmaterial-Spezifika:
 *  - Spaltenbreiten (.vm-grid) — analog Zubehör, rechte Spalte ist MHD
 *    statt naechste_pruefung.
 *  - Cell-Layout-Anker (.vm-cell-* für Inline-Edit-hostSel + Responsive-Hide)
 *  - Color-Modifier für is-unterbestand (Bestand-Cell) und MHD-Cell
 *    (is-abgelaufen / is-heute / is-bald)
 *  - Sicherheits- + Gefahrstoff-Sub-Grids im Modal
 *  - Responsive
 * Unterlagen-Tab-CSS kommt seit #137 aus
 * _shared/functions/file-attachment/idf-file-attachment.css.
 */

/* ================================================================ */
/* Grid: Spaltenbreiten                                              */
/* ================================================================ */
/* Spalten: Bild · Name+Kurzbeschreibung · Marke · Bereich · Standort ·
   Lagerort · Regal-Nr · Bestand+Mindest · MHD+Tage · Löschen. */

.vm-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--vm-cols,
    52px                /* Produktbild — quadratisch, füllt Row-Höhe */
    minmax(220px, 1fr)  /* Name (+ Kurzbeschreibung als Sub-Line) — wächst */
    180px               /* Marke (Logo + Name) */
    220px               /* Bereich */
    170px               /* Standort (Enum-Label aus lagerort.standort) — User-Wunsch breiter (war 130) */
    140px               /* Lagerort — User-Wunsch kleiner (war 180) */
    110px               /* Regal-Nr */
    130px               /* Bestand (bestand + min N) */
    130px               /* MHD (Datum + Tage-Sub-Line) — User-Wunsch kleiner (war 170) */
    44px                /* Löschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Produktbild-Cell - 1. Spalte, quadratisch (52 x 52 px). Kommt jetzt
   komplett aus dem Shared-Baustein `.idf-cell-bild*`
   (_shared/primitives/cells/idf-bild-cell.css, Audit L4/#198);
   nur die 52px-Spaltenbreite bleibt hier im .vm-grid. */

/* Pen + Inhalt mit einheitlichem Abstand, falls die Cell direkt Host ist. */
.idf-list-rows .idf-list-row .vm-grid .idf-inline-edit-host {
  gap: 8px;
}

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

/* ================================================================ */
/* „Bestand"-Cell — Two-Line (bestand + min N)                       */
/* ================================================================ */
/* Layout-Geometrie liefert das shared `.idf-list-cell-two-line`. Hier
   nur Modul-spezifische Color-Modifier: bei Unterbestand
   (bestand < mindestbestand) wird die Zahl rot + bold. */
.vm-cell-bestand.is-unterbestand .idf-list-cell-two-line-text {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-bold, 700);
}
.vm-cell-bestand.is-unterbestand .idf-list-cell-two-line-sub {
  color: var(--primary, #c8134b);
}

/* ================================================================ */
/* „MHD"-Cell — Two-Line (Datum + Tage-Subline)                      */
/* ================================================================ */
/* Abgelaufen (Datum < heute) — rot + bold, Subline rot.
   Heute (Datum == heute) — gelb + bold.
   Bald (≤ 30 Tage) — gelb. */
.vm-cell-mhd.is-abgelaufen .idf-list-cell-two-line-text {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-bold, 700);
}
.vm-cell-mhd.is-heute .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
  font-weight: var(--weight-bold, 700);
}
.vm-cell-mhd.is-bald .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
}
.vm-cell-mhd.is-abgelaufen .idf-list-cell-two-line-sub {
  color: var(--primary, #c8134b);
}

/* Delete-Cell-Layout (.idf-list-cell-action) kommt aus shared. */

/* ================================================================ */
/* Modal-Tab Stammdaten — 2-Spalten-Layout (Daten links, Bild rechts) */
/* ================================================================ */
/* Der 2-Spalten-Layout-Wrapper (Formular links, Bild rechts) kommt jetzt
   aus dem Shared-Baustein `.idf-basics-split(-fields)`
   (_shared/functions/detail-modal/idf-standard-artefakt.css, Audit L4/#198).
   Hier bleiben nur die Bild-Block-Zustaende bis zur
   createImageField-Migration (#225). */
.vm-basics-bild {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vm-basics-bild-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg, #fafafa);
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-basics-bild-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vm-basics-bild-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--soft, #ae9586);
  font-size: var(--font-sm, 0.8125rem);
}
.vm-basics-bild-empty i { font-size: 40px; opacity: 0.6; }
.vm-basics-bild-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.8125rem);
}
.vm-basics-bild-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================================================================ */
/* Modal-Tab Sicherheit + Gefahrstoff                                 */
/* ================================================================ */
.idf-form .vm-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
.idf-form .vm-checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* `display: grid` + `grid-column: 1 / -1` kommen aus shared
   `.idf-form-subgrid` (das Markup setzt beide Klassen). Hier nur
   Modul-spezifische Grid-Spalten + Visueller-Trenner. */
.vm-sicherheit-details,
.vm-gefahrstoff-details {
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

/* ================================================================ */
/* Modal-Tab Zeichen — Styles leben jetzt in                          */
/* `_shared/domain/zeichen-picker/idf-zeichen-picker.css` (.idf-zp-*).      */
/* Hier nichts mehr — Modul-Klassen entfallen.                       */
/* ================================================================ */

/* Modal-Tab Lieferanten — Zeilen-Editor kommt jetzt aus
   _shared/domain/lieferant-preise/idf-lieferant-preise.css (O2M-Junction
   verbrauchsmaterial_lieferant_preise); .vm-lieferanten (3-Slot-Form) entfaellt. */

/* Modal-Tab: Unterlagen — kommt jetzt aus
   _shared/functions/file-attachment/idf-file-attachment.css (#137). */

/* ================================================================ */
/* Responsive (≤ 1100px) — Spalten ausblenden                        */
/* ================================================================ */
@media (max-width: 1100px) {
  .vm-grid {
    grid-template-columns:
      minmax(0, 1fr)  /* Name */
      130px            /* Marke */
      120px            /* Bestand */
      120px            /* MHD */
      44px;            /* Löschen */
  }
  /* Bild-Zelle ueber den .vm-grid-Scope ausblenden (Shared-Klasse
     .idf-cell-bild, cross-geladene Module nicht mittreffen).
     !important noetig: die Shared-Body-/Head-Cell-Regeln setzen
     display:flex mit hoeherer Spezifitaet (Repo-Muster wie
     .dl-cell-akteure/.pl-cell-akteure). */
  .vm-grid > .idf-cell-bild,
  .vm-grid > .idf-cell-bild-head,
  .vm-cell-bereich,
  .vm-cell-standort,
  .vm-cell-lagerort,
  .vm-cell-regal-nr {
    display: none !important;
  }
  .vm-sicherheit-details,
  .vm-gefahrstoff-details {
    grid-template-columns: 1fr;
  }
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/ueberlaeuft. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* ================================================================ */
/* Modal-Tab: Bestand (Gelagert / Reserviert / Bestellt / Verfügbar) */
/* ================================================================ */
.vm-bestand-hint,
.vm-bestand-empty {
  color: var(--mid, #555);
}
.vm-bestand-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.vm-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--neutral-bg, #f0f1f3);
}
.vm-kpi-accent {
  border-color: var(--confirm, #0c998e);
  /* 8 % statt Token-Stärke 12 % (KPI-Fläche, kein Pillen-Tint) — §7.12-color-mix. */
  background: color-mix(in srgb, var(--confirm) 8%, transparent);
}
.vm-kpi-label {
  font-size: 13px;
  color: var(--mid, #555);
}
.vm-kpi-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #111);
}
.vm-bestand-h {
  margin: 14px 0 6px;
  font-size: 14px;
  color: var(--ink, #111);
}
.vm-bestand-group { margin-bottom: 10px; }
.vm-bestand-group-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--ink, #111);
  padding: 4px 0;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.vm-bestand-sum { color: var(--confirm, #0c998e); }
.vm-bestand-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 3px 12px;
  color: var(--ink, #111);
}
@media (max-width: 720px) {
  .vm-bestand-kpis { grid-template-columns: repeat(2, 1fr); }
}