/**
 * lieferanten.css — nur Lieferanten-Spezifika (v0.1.0, #548 T1)
 *
 * Alle generischen Listen-Patterns (Layout, Hover, Empty, Loading,
 * Load-More, Pillen-Geometrie, Sortier-Indikatoren, Save-Animation,
 * Delete-Button, Two-Line-Cell, Plain-Text-Cell, Zahlen-Cell, Action-Cell)
 * kommen aus:
 *  - _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - _shared/functions/inline-editing/idf-inline-edit.css
 *  - _shared/primitives/cells/idf-bild-cell.css (.idf-cell-bild*)
 *
 * Das Detail-Modal dieser Seite ist das Unternehmen-Modal; dessen Styles
 * kommen aus unternehmen/unternehmen.css (index.php lädt sie mit). Hier
 * steht davon nichts.
 *
 * Hier bleiben ausschließlich:
 *  - Spaltenbreiten (.lf-grid)
 *  - Cell-Anker (.lf-cell-* für Inline-Edit-hostSel + Responsive-Hide)
 *  - Kategorie-/Status-Pillen-Farben (Lieferanten-Domäne)
 *  - Responsive
 */

/* ================================================================ */
/* Grid: Spaltenbreiten                                              */
/* ================================================================ */
/* Spalten: Logo · Name (1fr) · Kategorien · Ansprechpartner · Lieferfrist ·
   Ort · Telefon · Status · Entfernen. Konvention: EINE 1fr-Spalte (Name)
   nimmt den Restplatz, alle anderen sind fix.

   „Ansprechpartner" zeigt seit #569 die verknüpften Akteure aus der Junction
   `akteure_unternehmen`, nicht mehr das gelöschte Freitext-Feld. Die Zelle
   wird nach dem Render gefüllt (zweiter Request), ist also beim ersten
   Zeichnen leer. */

.lf-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--lf-cols,
    52px                /* Logo — quadratischer Avatar, füllt Row-Höhe */
    minmax(200px, 1fr)  /* Name (name + Kurzname-Sub) — wächst */
    200px               /* Kategorien (mehrere Pillen) */
    180px               /* Ansprechpartner (Akteure der Firma) */
    130px               /* Lieferfrist (Tage) */
    160px               /* Ort */
    160px               /* Telefon */
    130px               /* Status (Pille) */
    44px                /* Entfernen */
  );
  align-items: stretch;
  gap: 0;
}

/* Enum-Cells dürfen während des Edits aufmachen, damit ein Combobox-Popup
   nicht abgeschnitten wird (is-editing setzt der Cell-Dispatcher). */
.idf-list-rows .idf-list-row .lf-grid > div.is-editing {
  overflow: visible;
}

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

/* ================================================================ */
/* Kategorie-Pillen                                                  */
/* ================================================================ */
/* `lieferant_kategorie` ist eine freie Tag-Liste (Verpackung, Rohstoffe,
   ...) ohne feste Werteliste — also auch ohne Farb-Semantik. Alle Pillen
   neutral; eine Farbe je Tag wäre eine Bedeutung, die es nicht gibt.
   Mehrere Pillen brechen um statt zu clippen. */
.lf-cell-kat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.lf-kat-pill { background: var(--tint-neutral); color: var(--mid, #555); }

/* ================================================================ */
/* Ansprechpartner-Zelle — verknüpfte Akteure (#569)                 */
/* ================================================================ */
/* Erster Name als Knopf (öffnet das Akteur-Modal), dahinter der Zähler für
   die weiteren. Der Knopf trägt bewusst keine Button-Optik: er steht in
   einer Textspalte und soll wie ein Link lesen, nicht wie eine Aktion.
   Interaktiv MUSS es trotzdem ein <button> sein - der Öffnen-Guard von
   IDF.listRowOpen lässt Buttons durch, ein <span> würde zusätzlich das
   Lieferanten-Modal aufziehen. */
.lf-cell-personen { min-width: 0; }

.lf-personen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lf-person {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink, #111);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lf-person:hover { color: var(--primary, #c8134b); text-decoration: underline; }

/* Zähler der weiteren Personen. Zurückgenommen: er ist eine Mengenangabe,
   keine Kategorie - deshalb neutral und ohne Pillen-Geometrie. */
.lf-person-mehr {
  flex: none;
  color: var(--soft, #999999);
  font-size: var(--font-xs2);
  font-variant-numeric: tabular-nums;
}

/* ================================================================ */
/* Status-Pille — Color-Modifier pro `lieferanten_status`            */
/* ================================================================ */
/* Drei Werte (unternehmen-modal.js LIEFERANTEN_STATUS_OPTIONS). „Aktiv" ist
   der Normalfall und trägt die Bestätigungsfarbe wie überall im System,
   „Potentiell" die Interessenten-Farbe (dieselbe Rolle wie beim Unternehmen-
   Typ), „Inaktiv" tritt neutral zurück. */
.lf-status-pill[data-status="aktiv"]      { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.lf-status-pill[data-status="potentiell"] { background: var(--tint-orange);  color: var(--orange, #e8710a); }
.lf-status-pill[data-status="inaktiv"]    { background: var(--tint-neutral); color: var(--mid, #555); }

/* ================================================================ */
/* Responsive - Kanon 1100/600                                       */
/* ================================================================ */
@media (max-width: 1100px) {
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/überläuft. Gilt
     bewusst auch unter 600 (Karten-Modus) weiter. */
  .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, es bleiben Logo · Name · Kategorien ·
   Status · Entfernen (fünf sichtbare Zellen, fünf Grid-Spuren).
   Die (min-width: 601px)-Klammer ist Pflicht: ohne sie fehlten
   Ansprechpartner, Lieferfrist, Ort und Telefon per display:none auch auf
   der Handy-Karte — dort entscheiden die data-m-Rollen (alle vier =
   beschriftete Meta, die Ansprechpartner-Rolle setzt das JS beim Füllen).

   Spezifität: die Shared-Basisregel `.idf-list-rows .idf-list-row
   .idf-list-grid > div { display: flex }` liegt bei (0,3,1) — ein nacktes
   `.lf-cell-ort { display: none }` (0,1,0) verlöre dagegen, die Zellen
   flössen als zweite Grid-Zeile weiter mit. Darum Zeilen-Scope; die
   Kopf-Zellen laufen über ihr data-sort-Attribut (ID-Scope). */
@media (max-width: 1100px) and (min-width: 601px) {
  .lf-grid {
    grid-template-columns:
      52px             /* Logo */
      minmax(0, 1fr)   /* Name */
      200px            /* Kategorien */
      130px            /* Status */
      44px;            /* Entfernen */
  }
  .idf-list-rows .idf-list-row .lf-grid > .lf-cell-personen,
  .idf-list-rows .idf-list-row .lf-grid > .lf-cell-frist,
  .idf-list-rows .idf-list-row .lf-grid > .lf-cell-ort,
  .idf-list-rows .idf-list-row .lf-grid > .lf-cell-telefon,
  #lf-thead .lf-grid > .lf-head-personen,
  #lf-thead .lf-grid > [data-sort="lieferfrist"],
  #lf-thead .lf-grid > [data-sort="ort"],
  #lf-thead .lf-grid > [data-sort="telefon"] {
    display: none;
  }
}