/**
 * kleidung.css - nur Kleidung-Spezifika (v0.1.0).
 *
 * Alle generischen Muster kommen aus dem Shared-Set:
 *  - Listen-Layout, Hover, Empty, Loading, Load-More, Pillen-Geometrie,
 *    Sortier-Indikatoren, Save-Animation, Delete-Button, Toggle-Button,
 *    Two-Line-Cell, Avatar-Cell, Action-Cell:
 *    _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - Inline-Edit-Affordance: _shared/functions/inline-editing/idf-inline-edit.css
 *  - Modal-Formfelder:       _shared/blocks/forms/idf-forms.css
 *  - Firmen-Karten:          _shared/blocks/hub-card/
 *  - Unterlagen-Reiter:      _shared/functions/file-attachment/
 *
 * Hier bleiben ausschliesslich:
 *  - Spaltenbreiten (.kl-grid, .kl-ueb-grid, .kl-ueb-tab-grid, .kl-inv-grid)
 *  - Cell-Anker (.kl-cell-* fuer Inline-Edit-hostSel und Responsive)
 *  - Farb-Modifier fuer Unterbestand und die Status-Pille
 *  - Dashboard-Hinweiszeile
 *  - Modal-Sub-Grids
 *  - Responsive
 */

/* ================================================================ */
/* Dashboard                                                         */
/* ================================================================ */

/* HIER STAND .kl-dash-hint, der Absatz „Wähle ein Unternehmen, um …" ueber
   den Karten. Raus mit Issue 1085: erklaerender Text gehoert nicht ueber die
   Daten, und der Tooltip der Karte sagt es jetzt an der Stelle, an der man
   fragt. Seitlicher Rand kam aus der Shared-Klasse .idf-list-inset. */

.kl-dash-grid {
  padding-top: var(--space-4, 16px);
  padding-bottom: var(--space-10, 40px);
}

/* ================================================================ */
/* Bestandsliste: Spaltenbreiten                                     */
/* ================================================================ */
/* Spalten: Bild · Name+Kurzbeschreibung · Marke · Kategorie · Groesse ·
   Farbe · Lagerort · Regal-Nr · Bestand+min · Im Umlauf · Lieferant · Status ·
   Loeschen. */

.kl-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--kl-cols,
    52px                /* Produktbild - quadratisch, fuellt die Zeilenhoehe */
    minmax(220px, 1fr)  /* Name (+ Kurzbeschreibung als Sub-Line) - waechst */
    160px               /* Marke (Logo + Name) */
    140px               /* Kategorie */
    90px                /* Groesse */
    120px               /* Farbe */
    140px               /* Lagerort */
    110px               /* Regal-Nr */
    120px               /* Bestand (+ min N) */
    110px               /* Im Umlauf (offene Uebergaben) */
    130px               /* Lieferant (Bestand beim Rang-A-Lieferanten + Stand, Issue 1072) */
    150px               /* Status */
    44px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Pen + Inhalt mit einheitlichem Abstand, wenn die Zelle selbst Host ist. */
.idf-list-rows .idf-list-row .kl-grid .idf-inline-edit-host {
  gap: 8px;
}

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

/* ================================================================ */
/* Varianten-Reiter im Modell-Fenster: Spaltenliste (Issue 1083)     */
/* ================================================================ */
/* Kopf und Breiten setzt der Baustein (tab.columns). Hier nur die
   Text-Zellen: linksbuendig wie Text in jeder Liste, die Nummer in
   Tabellenziffern. Zahlen kommen aus der Wert-Zelle des Bausteins und
   stehen rechts; die rote Bestandszahl faerbt der Baustein lieferant-preise. */

.kl-var-zelle {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kl-var-nummer { font-variant-numeric: tabular-nums; }

/* ================================================================ */
/* "Bestand"-Zelle - Two-Line (bestand + min N)                      */
/* ================================================================ */
/* Geometrie liefert das Shared `.idf-list-cell-two-line`. Hier nur der
   Farb-Modifier: unter dem Mindestbestand wird die Zahl rot und fett. */

.kl-cell-bestand.is-unterbestand .idf-list-cell-two-line-text {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-bold, 700);
}
.kl-cell-bestand.is-unterbestand .idf-list-cell-two-line-sub {
  color: var(--primary, #c8134b);
}

/* ================================================================ */
/* Farbpunkt vor dem Farbnamen                                       */
/* ================================================================ */
/* Der Hex-Wert kommt aus den Stammdaten (Farbe, ersatzweise Farbgruppe) und
   steht deshalb als Inline-Style an der Zelle - hier nur die Geometrie.
   Der helle Rahmen haelt Weiß auf weissem Grund sichtbar. */

.kl-farb-punkt {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line, #e5e5e5);
  margin-right: 6px;
  vertical-align: baseline;
}

/* ================================================================ */
/* Status-Pille                                                      */
/* ================================================================ */
/* Geometrie kommt aus `.idf-pill-tag`; hier nur die Semantik-Farben.
   Tints, weil es Pillen sind - Flaechen naehmen --wash-*. */

.kl-status-pill[data-status="verfuegbar"] {
  background: var(--tint-confirm);
  color: var(--confirm, #0c998e);
}
.kl-status-pill[data-status="nachbestellen"] {
  background: var(--tint-orange);
  color: var(--orange-text, #b45309);
}
.kl-status-pill[data-status="nicht_verfuegbar"] {
  background: var(--tint-primary);
  color: var(--primary, #c8134b);
}
.kl-status-pill[data-status="ausgemustert"] {
  background: var(--tint-neutral);
  color: var(--mid, #555);
}

/* ================================================================ */
/* Modelle-Liste: Spaltenbreiten                                     */
/* ================================================================ */
/* Spalten: Bild · Name+Serie · Marke · Kategorie · Schnitt · Hersteller-Nr ·
   Material · Varianten · Zertifikate · Loeschen. */

.kl-mod-grid {
  display: grid;
  grid-template-columns: var(--kl-mod-cols,
    52px                /* Titelbild */
    minmax(240px, 1fr)  /* Name (+ Serie als Sub-Line) - waechst */
    160px               /* Marke (Logo + Name) */
    130px               /* Kategorie */
    110px               /* Schnitt */
    130px               /* Hersteller-Nr */
    220px               /* Material */
    100px               /* Varianten (Zahl) */
    100px               /* Zertifikate (Zahl) */
    44px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}

.idf-list-rows .idf-list-row .kl-mod-grid .idf-inline-edit-host { gap: 8px; }
.idf-list-rows .idf-list-row .kl-mod-grid > div.is-editing { overflow: visible; }

/* Firmeneigenes Modell (#595): nur der Farb-Modifier, Geometrie und
   Typografie kommen aus dem shared .idf-pill-tag. Kuehler Akzent, weil die
   Pille eine Einordnung ist und kein Problem - Rot wuerde nach Warnung
   aussehen. Am gemeinsamen Modell steht keine Pille, das ist der Normalfall. */
.kl-mod-eigen-pill {
  flex: 0 0 auto;
  background: var(--tint-accent);
  color: var(--accent, #167ea0);
}

/* ================================================================ */
/* Uebergaben-Liste                                                  */
/* ================================================================ */
/* Spalten: Artikel · Groesse · Akteur · Menge · Ausgegeben · Zurueck ·
   Zustand · Loeschen. */

.kl-ueb-grid {
  display: grid;
  grid-template-columns: var(--kl-ueb-cols,
    minmax(200px, 1fr)  /* Artikel */
    90px                /* Groesse */
    minmax(160px, 1fr)  /* Akteur */
    90px                /* Menge */
    130px               /* Ausgegeben am */
    130px               /* Zurueck am */
    130px               /* Zustand */
    44px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}

.idf-list-rows .idf-list-row .kl-ueb-grid .idf-inline-edit-host { gap: 8px; }
.idf-list-rows .idf-list-row .kl-ueb-grid > div.is-editing { overflow: visible; }

/* Offene Uebergabe (kein Rueckgabedatum): die Zeile ist der Normalfall,
   deshalb kein Dauer-Gruen. Nur das leere Datum bekommt einen Hinweis. */
.kl-cell-zurueck.is-offen .idf-list-cell-text {
  color: var(--accent, #167ea0);
}

/* ================================================================ */
/* Bestands-Fenster: Reiter Uebergaben                               */
/*                                                                   */
/* Seit Issue 1066 ist der Reiter eine LISTE: Kopf mit Zaehler und    */
/* Knopf, darunter Tabellenkopf und Zeilen. Bis dahin standen die     */
/* Werte als nackte Spans nebeneinander - ohne Spaltenraster las      */
/* sich die Zeile als Fliesstext.                                    */
/*                                                                   */
/* Zeilen-Geometrie, Kopfzeile, Hover und Trash-Pille kommen aus dem  */
/* Listen-Baustein (.idf-list-thead / .idf-list-rows /               */
/* .idf-list-row / .idf-list-grid). Hier stehen nur die              */
/* Spaltenbreiten und der Kopf darueber. Muster: der Bundles-Reiter   */
/* im Leistungen-Fenster.                                            */
/* ================================================================ */

.kl-ueb-tab {
  display: flex;
  flex-direction: column;
  /* Der Gutter der Listen-Bausteine ist fuer die volle Seitenbreite gedacht;
     im Fenster bringt der Modal-Body sein Padding schon mit. Die 32 px
     obendrauf haetten Kopf und Zeilen nach innen geschoben und die
     Loesch-Pille vom rechten Rand weg. */
  --idf-list-gutter: var(--space-2);
  --idf-list-gutter-end: var(--space-2);
}

/* Zaehler links, primaere Aktion rechts - dieselbe Ordnung wie in der
   Leiste einer Listen-Seite. */
.kl-ueb-tab-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* Der Zaehler links im Reiter-Kopf. Bewusst NICHT .idf-list-stats: die Klasse
   gehoert der Stats-Zeile einer Listen-SEITE und bringt deren Trennlinie und
   Flaeche mit, die im Fenster als weisser Fleck neben dem Knopf stehen. Hier
   ist es nur eine gedaempfte Zeile. */
.kl-ueb-tab-anzahl {
  font-size: var(--font-sm);
  color: var(--mid);
}

/* Akteur · Menge · Ausgegeben · Zurueck · Zustand · Loeschen.
   Die Zurueck-Spalte haelt im offenen Fall einen Knopf statt eines Datums,
   deshalb ist sie breiter als die Ausgabe-Spalte. */
.kl-ueb-tab-grid {
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr)  /* Akteur */
    80px                /* Menge */
    120px               /* Ausgegeben am */
    140px               /* Zurueck */
    120px               /* Zustand */
    44px;               /* Loeschen */
}

/* ================================================================ */
/* Modal: Bestands-Rechnung als KPI-Zeile im Kopf des ersten Reiters */
/*                                                                   */
/* Seit Issue 1066 steht die Rechnung ueber den Feldern, die sie      */
/* speisen, und nicht mehr in einem eigenen Reiter daneben.           */
/* ================================================================ */

/* Der ganze Kopf hat Abstand zu den Feldern darunter; zwischen Kacheln und
   Erklaersatz reicht der kleine Schritt - die beiden gehoeren zusammen. */
.kl-bestand-kopf {
  margin-bottom: var(--space-5);
}

.kl-bestand-hinweis {
  margin: 0;
  font-size: var(--font-xs2);
  color: var(--mid);
}

.kl-bestand-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-2);
}

.kl-bestand-kachel {
  flex: 1 1 140px;
  padding: var(--space-3, 12px);
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 8px);
  background: var(--white, #fff);
}

.kl-bestand-kachel-label {
  display: block;
  font-size: var(--font-xs, 0.75rem);
  color: var(--mid, #555);
  margin-bottom: 2px;
}

.kl-bestand-kachel-wert {
  display: block;
  font-size: var(--font-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
  font-variant-numeric: tabular-nums;
}

/* Zweite Zeile in einer Kachel, z. B. „Stand 07.09.2026, 13:51" unter dem
   Lieferantenbestand (Issue 1072). Meta-Groesse, weil es eine Meta-Zeile ist. */
.kl-bestand-kachel-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--font-xs2);
  color: var(--mid);
}

.kl-bestand-kachel.is-verfuegbar .kl-bestand-kachel-wert { color: var(--confirm, #0c998e); }
.kl-bestand-kachel.is-negativ   .kl-bestand-kachel-wert { color: var(--primary, #c8134b); }

/* ================================================================ */
/* Responsive (<= 1100px) - Spalten ausblenden                       */
/* ================================================================ */

@media (max-width: 1100px) {
  .kl-grid {
    /* Spuren zaehlen nach den SICHTBAREN Zellen. */
    grid-template-columns:
      minmax(0, 1fr)  /* Name */
      130px           /* Marke */
      90px            /* Groesse */
      110px           /* Bestand */
      44px;           /* Loeschen */
  }

  /* Bild-Zelle ueber den .kl-grid-Scope ausblenden (Shared-Klasse
     .idf-cell-bild, cross-geladene Module nicht mittreffen). !important ist
     noetig, weil die Shared-Regeln display:flex mit hoeherer Spezifitaet
     setzen. */
  .kl-grid > .idf-cell-bild,
  .kl-grid > .idf-cell-bild-head,
  .kl-cell-kategorie,
  .kl-cell-farbe,
  .kl-cell-lagerort,
  .kl-cell-regal-nr,
  .kl-cell-umlauf,
  .kl-cell-lieferant,
  .kl-cell-status {
    display: none !important;
  }

  .kl-mod-grid {
    grid-template-columns:
      minmax(0, 1fr)  /* Name */
      130px           /* Marke */
      90px            /* Varianten */
      44px;           /* Loeschen */
  }
  .kl-mod-grid > .idf-cell-bild,
  .kl-mod-grid > .idf-cell-bild-head,
  .kl-mod-cell-kategorie,
  .kl-mod-cell-schnitt,
  .kl-mod-cell-hnr,
  .kl-mod-cell-material,
  .kl-mod-cell-zertifikate {
    display: none !important;
  }

  .kl-ueb-grid {
    grid-template-columns:
      minmax(0, 1fr)  /* Artikel */
      minmax(0, 1fr)  /* Akteur */
      120px           /* Ausgegeben */
      44px;           /* Loeschen */
  }
  .kl-cell-ueb-groesse,
  .kl-cell-menge,
  .kl-cell-zurueck,
  .kl-cell-zustand {
    display: none !important;
  }

  /* Fenster-Reiter „Uebergaben": der Zustand weicht zuerst, er ist Zusatz.
     Wer/Wann/Zurueck tragen die Zeile. Die Akteur-Spalte behaelt ihre
     Mindestbreite, damit sie nicht auf 0 faellt, sobald die festen Spalten
     zusammen breiter sind als das Fenster. */
  .kl-ueb-tab-grid {
    grid-template-columns:
      minmax(90px, 1fr)  /* Akteur */
      70px               /* Menge */
      110px              /* Ausgegeben am */
      130px              /* Zurueck */
      44px;              /* Loeschen */
  }
  .kl-ueb-tab-zustand {
    display: none !important;
  }

  /* col-resize im Schmal-Layout inaktiv (das Modul-Grid gewinnt hier). */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}