/**
 * zubehoer.css — nur Zubehör-Spezifika (v0.1.0, Klon der werkzeuge-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 Zubehör-Spezifika:
 *  - Spaltenbreiten (.zb-grid) — anders als Werkzeuge: keine Status-Spalte,
 *    aber eine Bestand-Spalte mit Two-Line-Anzeige (Ist + min).
 *  - Cell-Layout-Anker (.zb-cell-* für Inline-Edit-hostSel + Responsive-Hide)
 *  - Color-Modifier für is-unterbestand (Bestand-Cell) und Prüf-Cell
 *  - Sicherheits-Sektion + Checkbox-Row im Modal
 *  - Responsive
 * Unterlagen-Tab-CSS kommt seit #137 aus
 * _shared/functions/file-attachment/idf-file-attachment.css.
 */

/* ================================================================ */
/* Grid: Spaltenbreiten                                              */
/* ================================================================ */
/* Spalten: Bild · Name+Spezifikation · Marke · Bereich · Standort ·
   Lagerort · Regal-Nr · Bestand+Mindest · Nächste Prüfung · Löschen. */

.zb-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--zb-cols,
    52px                /* Produktbild — quadratisch, füllt Row-Höhe */
    minmax(220px, 1fr)  /* Name (+ Spezifikation 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 */
    180px               /* Zeichen (ISO-7010-Piktogramm-Strip, max. 5 Thumbs) */
    130px               /* Bestand (anzahl + min N) */
    140px               /* Nächste Prüfung (Datum + Sub-Line) — User-Wunsch kleiner (war 170) */
    44px                /* Löschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Zeichen-Cell — Strip aus _shared/zeichen-strip. overflow:visible für
   Tooltips an den Thumbs. */
.zb-cell-zeichen {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
}

/* 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 .zb-grid. */

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

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

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

/* ================================================================ */
/* „Nächste Prüfung"-Cell — Two-Line (Datum + Tage-Subline)         */
/* ================================================================ */
.zb-cell-pruef.is-ueberfaellig .idf-list-cell-two-line-text {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-bold, 700);
}
.zb-cell-pruef.is-heute .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
  font-weight: var(--weight-bold, 700);
}
.zb-cell-pruef.is-bald .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
}
.zb-cell-pruef.is-ueberfaellig .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). */
.zb-basics-bild {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zb-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;
}
.zb-basics-bild-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zb-basics-bild-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--soft, #ae9586);
  font-size: var(--font-sm, 0.8125rem);
}
.zb-basics-bild-empty i { font-size: 40px; opacity: 0.6; }
.zb-basics-bild-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.8125rem);
}
.zb-basics-bild-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================================================================ */
/* Modal-Tab Sicherheit                                              */
/* ================================================================ */
.idf-form .zb-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
.idf-form .zb-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. */
.zb-sicherheit-details {
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

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

/* ================================================================ */
/* Responsive (≤ 1100px) — Spalten ausblenden                        */
/* ================================================================ */
@media (max-width: 1100px) {
  .zb-grid {
    grid-template-columns:
      minmax(0, 1fr)  /* Name */
      130px            /* Marke */
      120px            /* Bestand */
      120px            /* Prüfung */
      44px;            /* Löschen */
  }
  /* Bild-Zelle ueber den .zb-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). */
  .zb-grid > .idf-cell-bild,
  .zb-grid > .idf-cell-bild-head,
  .zb-cell-bereich,
  .zb-cell-standort,
  .zb-cell-lagerort,
  .zb-cell-regal-nr,
  .zb-cell-zeichen {
    display: none !important;
  }
  .zb-sicherheit-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; }
}