/* ==========================================================================
 mono-avatar.css — Monogramm-Kachel (SSOT)

 Die Identitäts-Kachel für Firmen, Personen und Dokumente: Farb-Monogramm aus
 der namens-abgeleiteten Farbe, darüber optional das backend-quadrierte
 cover-Logo. Bis 2026-07-27 existierte dieselbe DNA dreimal — als
 `fk-card-avatar--firma` (Firmen-/Kontakt-/Vertragskarten), als `fk-liz-avatar`
 (Lizenz-Zeilen) und als `abr-prov-av` (Provisions-Karten), verteilt über zwei
 section-gescopte Stylesheets. Jede Kopie war an ihren Tab gebunden und beim
 nächsten Konsumenten wieder von vorn zu bauen (Repo-Regel R9–R11: 2+ Dateien
 mit derselben Logik → Hidden-Modul/Primitive extrahieren).

 SELF-SCOPED (harte Regel für Module): alle Regeln hängen an der Wurzelklasse
 `.lod-mono`, die das aufrufende JS selbst setzt — NIE an einem Section-/Shell-
 Vorfahren wie `#tab-content-firmen`. Sonst greift die Kachel nur in genau
 dieser Hülle und bricht lautlos bei jeder Wiederverwendung.

 VERWENDUNG
   Firma    <span class="lod-mono lod-mono--firma" style="--lod-mono-color:#2A5F8D">
              <span class="lod-mono-init">LD</span>
              <img class="lod-mono-logo" src="/api/firmen/<id>/logo" alt="">
            </span>
   Person   <span class="lod-mono lod-mono--person">KN</span>
   Dokument <span class="lod-mono lod-mono--doc"><span class="ui-ico">…</span></span>

   Farbe je Datensatz via Custom-Property `--lod-mono-color` (Avatar.colorFor);
   Größe über die Modifier, NICHT per Inline-Style (Layout-Inline ist verboten):
     Default 40px · `--md` 36px · `--sm` 28px
   Ladefehler des Logos: das <img> ausblenden (`hidden`), das Monogramm darunter
   wird wieder sichtbar. `error` bubbelt nicht → capture-Phase am Container.
 ========================================================================== */

.lod-mono {
  --lod-mono-size: 40px;
  flex-shrink: 0;
  position: relative;
  width: var(--lod-mono-size);
  height: var(--lod-mono-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-xs);
}
.lod-mono--md { --lod-mono-size: 36px; font-size: 12px; }
.lod-mono--sm { --lod-mono-size: 28px; font-size: 11px; }
/* Tabellen-Zeilen (LoDDataTable, 44px comfortable): 24px fuellt die Zeile,
   ohne sie zu strecken. */
.lod-mono--xs { --lod-mono-size: 24px; font-size: 10px; }

/* Firma = quadratische Kachel mit Monogramm-Verlauf: heller Lichteinfall oben,
   Kernfarbe, dunklere Kante unten. Dezente Tiefe statt flacher Fläche. */
.lod-mono--firma {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 82%, #fff) 0%,
    var(--lod-mono-color, var(--lod-darkblue)) 52%,
    color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 82%, #000) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(15, 46, 72, 0.18);
}

/* Person = runde Kontakt-Kachel (Initialen, kein Logo). */
.lod-mono--person {
  border-radius: var(--radius-circular);
  background: var(--lod-turquoise-100);
  color: var(--lod-turquoise-900);
}

/* Dokument = bewusst blau-getönte Kachel (read-only-Flächen ohne Logo/Foto) —
   nicht die leere graue Box. */
.lod-mono--doc {
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--lod-darkblue-100) 0%, var(--lod-darkblue-50) 100%);
  color: var(--lod-darkblue-500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(15, 46, 72, 0.10);
}

/* Icon statt Initialen (Firma ohne Namen, Dokument-Kachel). */
.lod-mono--firma .ui-ico img,
.lod-mono--doc .ui-ico img { width: 22px; height: 22px; }
.lod-mono--doc .ui-ico img { opacity: 0.8; }

/* Farb-Monogramm: Initialen auf dem Verlauf. */
.lod-mono-init {
  position: relative;
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: inherit;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(15, 46, 72, 0.25);
}
/* Person/Dokument tragen die Tint-Farbe der Variante, nicht Weiß. */
.lod-mono--person .lod-mono-init,
.lod-mono--doc .lod-mono-init { color: inherit; text-shadow: none; }

/* Logo überdeckt die Monogramm-Kachel. Das Backend passt es auf ein QUADRAT mit
   erkannter Eigen-Randfarbe ein (toSquarePng) → hier randlos in die abgerundete
   Kachel füllen: ein rotes/blaues Kachel-Logo füllt sie in seiner Farbe (kein
   weißer Rahmen), ein Logo auf weißem Grund bleibt weiß. */
.lod-mono-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fallback, falls doch ein transparentes Bild ohne Bg-Bake kommt. */
  background: #fff;
}