/**
 * idf-alternativen - Styles fuer den Reiter „Alternativen" (Issue 2298).
 * Eine Klapp-Liste: Zeilen, Pillen und die Karte am Handy kommen aus
 * functions/list-view/grid-css, Zuklappen und Block aus blocks/klapp-liste,
 * die Felder aus blocks/form-cell. Hier stehen nur der Rahmen des Reiters
 * und das Raster der Kopfzeile.
 */

.idf-al-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.idf-al-empty-msg {
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-75);
  font-style: italic;
}

/* Vor dem Namen steht die Status-Pille: der Block rueckt bis unter den
   Namen ein (Schalter 44 + Pille 44), wie die Varianten der Leistungen. */
.idf-al-klapp { --idf-klapp-einzug: 88px; }

/* „Als Werkzeug übernehmen“ (Issue 2299) unter den Feldern des Blocks. */
.idf-al-uebernahme {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-2);
}

/* Spalten der Kopfzeile: Schalter, Status, Produkt, Passung, Preis,
   Produktseite, Loeschen.
   Gemessen am 30.10.2026 mit Figtree 16 px: die Passung ist eine Kurz-Pille
   mit zwei bis drei Ziffern (36 px) plus 24 px Innenabstand, die Spalte hat
   72 px. „1.234,56 €" braucht 74 px Text plus 24 px Innenabstand, die
   Spalte hat 116 px wie die Betraege der Lieferanten. Die Produktseite
   steht als Domain mit Symbol, „bosch-professional.com" braucht 170 px plus
   24, die Spalte hat 190 px. Das Produkt nimmt den Rest. */
.idf-al-grid {
  display: grid;
  grid-template-columns: 44px 44px minmax(160px, 1fr) 72px 116px 190px 44px;
  grid-template-areas: "schalter status produkt passung preis link loeschen";
}
/* Kopf und Zeilen haben dieselben Kinder in derselben Folge, deshalb
   reicht die Stelle als Bezug. */
.idf-al-grid > :nth-child(1) { grid-area: schalter; }
.idf-al-grid > :nth-child(2) { grid-area: status; }
.idf-al-grid > :nth-child(3) { grid-area: produkt; }
.idf-al-grid > :nth-child(4) { grid-area: passung; }
.idf-al-grid > :nth-child(5) { grid-area: preis; }
.idf-al-grid > :nth-child(6) { grid-area: link; }
.idf-al-grid > :nth-child(7) { grid-area: loeschen; }

/* Schmale Liste: Passung, Preis und Produktseite stehen in einer zweiten
   Zeile unter dem Produkt, Kopf und Zeilen gleich.
   Die Grenze: „Bosch Professional GBH 18V-22 Akku-Bohrhammer mit SDS plus"
   bricht zweizeilig um; damit eine Zeile davon mindestens 260 px Text hat,
   mit Stift, Abstand und Rand 316 px. Dazu die festen Spalten (44 + 44 +
   72 + 116 + 190 + 44 = 510). Raender hat die Zeile im Fenster keine
   (functions/detail-modal, Issue 2094): 316 + 510 = 826.
   Im Kartenmodus (Seite unter 600 px) gilt die Karte der Listen. */
@container klapp-liste (width < 826px) {
  .idf-al-grid {
    grid-template-columns: 44px 44px 72px minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas:
      "schalter status produkt produkt produkt loeschen"
      ".        .      passung preis   link    .";
  }
}

/* Am Finger dieselben zwei Zeilen, auch in breiter Liste: der Stift steht
   dort immer da, 44 px breit im Fluss der Zelle (functions/inline-editing),
   und naehme dem Preis in der festen Spalte den Platz (Muster
   domain/lieferant-preise). */
html[data-input-mode="touch"] .idf-al-grid {
  grid-template-columns: 44px 44px 72px minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas:
    "schalter status produkt produkt produkt loeschen"
    ".        .      passung preis   link    .";
}