/* avatar.css — Avatar-Basisregel + Sizing in Picker-Panels + Slot/Presence-Indikator.
 Slot-/Presence-Block aus base.css extrahiert.

 Markup wird durchgaengig via
 Avatar.html() aus [web/js/components/badges/avatar.js] erzeugt. Sizing
 und Hintergrundfarbe kommen als Inline-Styles vom Modul; .avatar-Klasse
 liefert nur Layout (border-radius, flex, color). Die Klassen
 .avatar-img/.avatar-initial/.avatar-color-0..7 sind weg.
 ========================================================================== */

.avatar-slot { display: inline-flex; flex-shrink: 0; position: relative; }

/* Presence-Indikator (Teams-Style Punkt rechts unten) */
.avatar-presence {
  position: absolute; bottom: -1px; right: -1px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--color-surface);
  box-sizing: content-box;
}
.avatar-presence--available { background: var(--presence-available); }
.avatar-presence--busy { background: var(--presence-busy); }
.avatar-presence--dnd { background: var(--presence-busy); }
.avatar-presence--away { background: var(--presence-away); }
.avatar-presence--brb { background: var(--presence-away); }
.avatar-presence--offline { background: var(--color-text-muted); }
.avatar-presence--unknown { display: none; }
/* Groessenvarianten: md (36px) und lg (48px) — groesserer Punkt. Slots tragen
   data-avatar-size, gesetzt vom Aufrufer beim Konstruieren des .avatar-slot. */
.avatar-slot[data-avatar-size="md"] .avatar-presence { width: 9px; height: 9px; bottom: 0; right: 0; border-width: 2px; }
.avatar-slot[data-avatar-size="lg"] .avatar-presence { width: 10px; height: 10px; bottom: 0; right: 0; border-width: 2px; }


/* ──────────────────────────────────────────────────────────────────────
 * Avatar-Basisregel — gilt fuer alle .avatar-Inline-Renderer in v2.
 * Mehrere Module (team-editor, checklist, card-footer, team-member-selector, …)
 * rendern einfach <span class="avatar" style="background:…">Initialen</span>,
 * ohne weitere Klasse. Ohne diese Basis-Regel waren die Felder "nur Quadrate":
 * kein border-radius, keine Zentrierung, keine weisse Schrift.
 * ────────────────────────────────────────────────────────────────────── */
.app-scope .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--lod-gray-400);
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  /* aus app.css uebernommen (waren parallel definiert
 und wurden durch Cascade-Position immer aktiv). border + box-shadow
 beibehalten, damit das Erscheinungsbild nach app.css-Loeschung
 unveraendert bleibt. */
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--lod-gray-200);
}
.app-scope .avatar.empty {
  /* aktueller Render-Zustand vor app.css-Loeschung war:
 - background: var(--lod-gray-200) (aus avatar.css; app.css's `#fff` durch Cascade ueberschrieben)
 - color: var(--lod-gray-500) (in beiden gleich)
 - border: 2px dashed var(--lod-gray-300) (aus app.css; avatar.css setzte nichts → blieb aktiv)
 - box-shadow: none (aus app.css; avatar.css setzte nichts → blieb aktiv)
 Ergebnis hier nach Loeschung der app.css unveraendert. */
  background: var(--lod-gray-200);
  color: var(--lod-gray-500);
  border: 2px dashed var(--lod-gray-300);
  box-shadow: none;
}
/* Person-Icon-Platzhalter im LEEREN Avatar dimmen — NICHT echte Profilfotos
   (.avatar.avatar--image > img). Vorher: '.app-scope .avatar img' war zu breit
   und hat alle Microsoft-Graph-Fotos auf 55% Opazitaet + 60% Groesse reduziert. */
.app-scope .avatar.empty img { width: 60%; height: 60%; opacity: 0.55; }

/* Popover-Panels werden an document.body appended und liegen damit ausserhalb
   .app-scope. Die gleiche Avatar-Basis muss dort per Klassen-Whitelist gelten. */
.app-person-picker-panel .avatar,
.app-popover-menu .avatar,
.app-board-switcher-panel .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--lod-gray-400);
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.app-person-picker-panel .avatar.empty,
.app-popover-menu .avatar.empty,
.app-board-switcher-panel .avatar.empty {
  background: var(--lod-gray-200);
  color: var(--lod-gray-500);
}
/* Wie oben: nur leerer Avatar-Platzhalter wird gedimmt, echte Fotos nicht. */
.app-person-picker-panel .avatar.empty img,
.app-popover-menu .avatar.empty img,
.app-board-switcher-panel .avatar.empty img {
  width: 60%; height: 60%; opacity: 0.55;
}

/* M365-Photos kommen als Avatar.html({ imageUrl }) via avatar-cache.js.
 In Popovers + Team-Editor-Panels Slot-Wrapper rund + gleiche Groesse wie
 Initial-Avatar (22px = 'sm'). kein .avatar-img
 mehr, das Avatar-Modul rendert <span class="avatar avatar--image"><img></span>. */
.app-person-picker-panel .avatar-slot,
.app-popover-menu .avatar-slot,
.app-board-switcher-panel .avatar-slot,
.app-team-editor-add-panel .avatar-slot,
.app-team-editor-member-panel .avatar-slot,
.app-checklist-assignee-panel .avatar-slot,
.mention-dropdown .avatar-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
/* Avatar-Sizing fuer Picker-Panels und app-scope kommt jetzt vom Avatar-Modul
 (Inline-Style). Die Aufrufer in checklist.js, team-editor.js, person-picker.js
 passen 'sm' (22px) — Avatar.html() rendert das passend. sind die alten .avatar-img/.avatar-initial-Overrides hier
 redundant geworden und entfernt. */