/**
 * unternehmen.css — nur Unternehmen-Spezifika (v0.1.0)
 *
 * Alle generischen Listen-Patterns (Layout, Hover, Empty, Loading,
 * Load-More, Pillen-Geometrie, Sortier-Indikatoren, Save-Animation,
 * Delete-Button, Two-Line-Cell, Plain-Text-Cell, Action-Cell) kommen aus:
 *  - _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - _shared/functions/inline-editing/idf-inline-edit.css
 *  - _shared/blocks/forms/idf-forms.css (Modal-Form-Felder)
 *  - _shared/blocks/color-picker (.idf-color-picker — Styles in idf-core.css)
 *
 * Hier bleiben ausschließlich:
 *  - Spaltenbreiten (.un-grid)
 *  - Cell-Anker (.un-cell-* für Inline-Edit-hostSel + Responsive-Hide)
 *  - Typ-/Status-Pillen-Farben (Unternehmen-Domäne)
 *  - Logo-Block im Modal (Basics-Split-Wrapper kommt aus Shared, #198)
 *  - Responsive
 */

/* ================================================================ */
/* Grid: Spaltenbreiten                                              */
/* ================================================================ */
/* Spalten: Logo · Name (1fr) · Typ · Ort · Telefon · E-Mail · Status ·
   Löschen. Konvention `aufgaben/`: EINE 1fr-Spalte (Name) nimmt den
   Restplatz, alle anderen sind fix. */

.un-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--un-cols,
    52px                /* Logo — quadratischer Avatar, füllt Row-Höhe */
    minmax(200px, 1fr)  /* Name (name + Kurzname/Rechtsform-Sub) — wächst */
    220px               /* Typ (mehrere Pillen — Mehrfach-Einordnung) */
    160px               /* Ort */
    160px               /* Telefon */
    280px               /* E-Mail */
    130px               /* Status (Pille) */
    44px                /* Löschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Sticky-Header verlässlich ÜBER den Zeilen halten (analog akteure) — die
   prominenten Logo-Avatare würden sonst beim Scrollen über den Header
   laufen. */
#un-thead { z-index: 2; }

/* Logo-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; Klassenname
   dort `bild` statt `logo`); nur die 52px-Spaltenbreite bleibt im .un-grid. */

/* 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 .un-grid > div.is-editing {
  overflow: visible;
}

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

/* ================================================================ */
/* Typ-Pille — Color-Modifier pro `typ`                              */
/* ================================================================ */
/* Typ-Zelle hält ggf. mehrere Pillen (Mehrfach-Einordnung) — nebeneinander,
   bei Bedarf umbrechen statt clippen. */
.un-cell-typ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Geometrie + Typografie aus shared `.idf-pill-tag` (13 px UPPERCASE,
   getöntes BG mit Brand-Textfarbe). Markup:
   <span class="idf-pill-tag un-typ-pill" data-typ="kunde">…</span>. */
.un-typ-pill[data-typ="kunde"]        { background: var(--tint-primary);  color: var(--primary, #c8134b); }
.un-typ-pill[data-typ="interessent"]  { background: var(--tint-orange); color: var(--orange, #e8710a); }
.un-typ-pill[data-typ="lieferant"]    { background: color-mix(in srgb, var(--yellow-text, #b58600) 12%, transparent); color: var(--yellow-text, #b58600); }
.un-typ-pill[data-typ="partner"]      { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.un-typ-pill[data-typ="institution"]  { background: color-mix(in srgb, var(--indigo, #4f46e5) 12%, transparent); color: var(--indigo, #4f46e5); }
.un-typ-pill[data-typ="wettbewerber"] { background: var(--tint-neutral);      color: var(--ink, #111); }
.un-typ-pill[data-typ="sonstiges"]    { background: var(--tint-neutral);      color: var(--mid, #555); }

/* ================================================================ */
/* Status-Pille — Color-Modifier pro `unternehmen_status`            */
/* ================================================================ */
.un-status-pill[data-status="aktiv"]      { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.un-status-pill[data-status="inaktiv"]    { background: var(--tint-neutral);      color: var(--mid, #555); }
.un-status-pill[data-status="archiviert"] { background: var(--tint-primary);  color: var(--primary, #c8134b); }

/* ================================================================ */
/* Typ-Mehrfachfilter — optisch an die Geschwister-Filter angleichen */
/* ================================================================ */
/* Im Leerzustand Label + Chip-Zeile ausblenden, sodass nur der Picker
   („— alle Typen —") sichtbar ist, genau wie bei Rechtsform/Status. */
#un-filter-typ .ms-empty { display: none; }
#un-filter-typ .ms-chips { min-height: 0; }
#un-filter-typ .ms-chips:not(:has(.ms-chip)) { display: none; }

/* ================================================================ */
/* Modal-Tab Stammdaten — Form-Grid + Logo                           */
/* ================================================================ */
/* Der 2-Spalten-Layout-Wrapper (Felder links, Logo rechts) kommt jetzt
   aus dem Shared-Baustein `.idf-basics-split(-fields)`
   (_shared/functions/detail-modal/idf-standard-artefakt.css, Audit L4/#198).
   Die uebrigen Tabs (Adresse/Rechnung/Social) nutzen direkt `.idf-form`.
   Hier bleiben nur die Logo-Block-Zustaende bis zur
   createImageField-Migration (#225). */

/* Rechte Spalte: Logo-Block — Preview oben (quadratisch), Aktionen darunter. */
.un-basics-bild {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.un-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;
}
.un-basics-bild-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Logos: ganz zeigen statt beschneiden */
  display: block;
}
.un-basics-bild-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--soft, #ae9586);
  font-size: var(--font-sm, 0.8125rem);
}
.un-basics-bild-empty i { font-size: 40px; opacity: 0.6; }
.un-basics-bild-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.8125rem);
}
.un-basics-bild-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Rechnung-Tab: read-only externe Verknüpfung als abgesetzter Block. */
.un-extern-block {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e5e5e5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 12px);
}
.un-extern-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.8125rem);
}

/* ================================================================ */
/* Responsive (≤ 1100px) — schmale Spalten ausblenden                */
/* ================================================================ */
@media (max-width: 1100px) {
  .un-grid {
    grid-template-columns:
      52px             /* Logo */
      minmax(0, 1fr)  /* Name */
      220px            /* Typ (mehrere Pillen) */
      130px            /* Status */
      44px;            /* Löschen */
  }
  .un-cell-ort,
  .un-cell-telefon,
  .un-cell-email,
  /* zugehörige Tabellenkopf-Spalten ebenfalls ausblenden, damit Kopf und
     Zeilen ausgerichtet bleiben */
  #un-thead .un-grid > [data-sort="ort"],
  #un-thead .un-grid > [data-sort="telefon"],
  #un-thead .un-grid > [data-sort="email"] {
    display: none;
  }
  /* 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; }
}