/**
 * idf-avatar - eine Person oder Firma als kleine Pille (Issue 1571).
 *
 * Logik: idf-avatar.js. Die Form ist die Kurz-Pille `.idf-pill-kurz` aus
 * functions/list-view/grid-css (seit Issue 1592 dort, damit die Priorität
 * dieselbe traegt): 28 px hoch, leicht abgerundete Ecken, keine runden
 * Formen. Die Farben kommen aus den Rollen von blocks/pill-colors
 * (`idf-pill-farbe-neutral`, fertig `idf-pill-farbe-green`), hier wird keine
 * Farbe gemischt. Hier steht nur, was ein Bild braucht.
 *
 * Laedt NACH grid-css und pill-colors: Fotos und Logos tragen keine Rolle,
 * ihre Flaeche steht hier.
 */

.idf-avatar {
  overflow: hidden;
}

/* Bild: Foto und Logo sind gleich gebaut und fuellen die Pille ganz (Issue
   1929). Beide sind so gross wie die Kuerzel-Pille daneben, 28 x 28 px, und
   tragen ihre runden Ecken. Der Unterschied ist nur der Zuschnitt: ein Foto
   fuellt die Flaeche (cover), ein Logo steht ganz darin (contain).

   Kein Rand, keine eigene Flaeche. Das Logo stand bis shared v1.661.0 mit
   2 px Luft auf einer weissen Flaeche mit Haarlinie; in der Liste las sich
   das als Rahmen, in dem das Logo kleiner steht als die Person daneben.
   Joerg, 12.10.2026: „in den Listen ist der Avatar vom Unternehmen optisch
   kleiner als der vom Akteur. Das liegt scheinbar an einem Rahmen am
   Unternehmen." Kurz (v1.660.0) trug auch das Foto diesen Rahmen. */
.idf-avatar.is-foto,
.idf-avatar.is-logo {
  width: 28px;
  padding: 0;
}
.idf-avatar img {
  display: block;
  width: 100%;
  height: 100%;
}
.idf-avatar.is-foto img {
  object-fit: cover;
}
.idf-avatar.is-logo img {
  object-fit: contain;
}

/* Eingepasst (`opts.eingepasst`, Issue 1922): die einzelne Pille am Reiter
   und im Kopf eines Fensters. Dort steht sie neben Symbolen von 20 px, und
   ein Bild, das die 28 px ganz fuellt, wirkt daneben zu gross (Joerg,
   12.10.2026: „die Logogroesse wirkt harmonischer als die Team-Groesse").
   Das Bild steht deshalb mit 2 px Luft in der Pille, 24 x 24 px mit eckigen
   Kanten. Das Logo behaelt dort seine weisse Flaeche mit Haarlinie: auf dem
   grauen Grund der Reiter-Spalte ist sie kaum zu sehen und haelt ein Logo
   mit durchsichtigem Grund lesbar. So hat Joerg das Fenster abgenommen. */
.idf-avatar.is-eingepasst.is-foto,
.idf-avatar.is-eingepasst.is-logo {
  padding: 2px;
}
.idf-avatar.is-eingepasst.is-logo {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ink-10);
}

/* Die Hauptperson (etwa der Verantwortliche): ein Rahmen in unserem Rot,
   2 px breit wie der gruene Ring fuer „fertig" (Joerg, 12.10.2026: „2px ist
   besser"). Als Outline, weil sie dann auch ueber einem Foto liegt und
   nichts verschiebt. Bis shared v1.661.0 dunkelgrau und 1 px. */
.idf-avatar.is-haupt {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* Fertig mit Foto: das Gruen als Kontur, die Flaeche ist ja das Bild. */
.idf-avatar.is-foto.is-fertig {
  outline: 2px solid var(--confirm);
  outline-offset: -2px;
}

/* Die Pille als Link auf ihren Datensatz (Issue 1747): der Klick oeffnet
   das Fenster der Person oder Firma. Die Huelle traegt keine eigene Optik,
   sie schrumpft am Desktop nicht (dieselbe Begruendung wie bei
   .idf-avatar-mit-name unten). Beim Ueberfahren dunkelt die Pille ab wie
   die Status-Pille vorn in der Zeile; als Filter, weil eine Flaeche ueber
   einem Foto oder Logo nicht zu sehen waere. */
.idf-avatar-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: none;
}
.idf-avatar-link:hover .idf-avatar {
  filter: brightness(0.95);
}
.idf-avatar-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Mehrere Pillen nebeneinander, eng. */
.idf-avatar-reihe {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* Der Name neben der Pille (Issue 1640, abschaltbar mit opts.mitName).
   Am Desktop steht die Pille allein, der Name im Tooltip. Auf der
   Handy-Karte gibt es keinen Tooltip, dort steht er als Text daneben. Die
   Grenze ist die der Karte (600 px, functions/list-view/grid-css), nicht
   die Eingabe: die Tabelle hat für den Namen keinen Platz, die Karte schon,
   die Meta-Zeile ist dort voll breit. Schrift und Farbe erbt er von der
   Zelle.

   Am Desktop schrumpft die Hülle nicht: in einer schmalen Spalte beschnitt
   sie sonst die Pillen der Reihe (gemessen 14 statt 28 px). Die Reihe läuft
   dann über wie vorher die nackten Pillen. */
.idf-avatar-mit-name {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}
.idf-avatar-name {
  display: none;
}
/* Auf der Karte: dieselbe Abfrage wie der Kartenmodus in grid-css
   (Container `idf-seite`, Issue 2053). */
@container idf-seite (max-width: 600px) {
  /* Auf der Karte darf sie schrumpfen, damit ein langer Name mit „…“
     abschneidet; die Pille behält ihre 28 px (`flex: none` der Kurz-Pille). */
  .idf-list-rows .idf-list-row .idf-avatar-link,
  .idf-list-rows .idf-list-row .idf-avatar-mit-name {
    flex: 0 1 auto;
    min-width: 0;
  }
  .idf-list-rows .idf-list-row .idf-avatar-name {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Mehrere Personen mit Namen passen nicht in eine Zeile: die Reihe bricht
     um und hält Abstand zwischen den Paaren aus Pille und Name. */
  .idf-list-rows .idf-list-row .idf-avatar-reihe.is-mit-name {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }
}