/* ============================================
   Avatars — circular image or initials fallback
   Sizes: xs(22px) sm(24px) md(30px) lg(36px) xl(44px) xxl(56px)
   ============================================ */

/* Base avatar image */
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Base avatar initials (fallback) */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gray-20);
  color: var(--color-text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}

/* Size: xs — 22px (team members, people table, idea tooltips) */
.avatar--xs,
.avatar--xs.avatar-img,
.avatar--xs.avatar-initials {
  width: 22px;
  height: 22px;
}

.avatar-initials.avatar--xs {
  font-size: 9px;
}

/* Size: sm — 24px (person search dropdown) */
.avatar--sm,
.avatar--sm.avatar-img,
.avatar--sm.avatar-initials {
  width: 24px;
  height: 24px;
}

.avatar-initials.avatar--sm {
  font-size: 9px;
  background: var(--color-gray-10);
  border: 1px solid var(--color-gray-30);
}

/* Size: md — 30px (person avatar shared partial) */
.avatar--md,
.avatar--md.avatar-img,
.avatar--md.avatar-initials {
  width: 30px;
  height: 30px;
}

.avatar-img.avatar--md {
  vertical-align: middle;
}

.avatar-initials.avatar--md {
  font-size: 11px;
  background: var(--color-gray-10);
  border: 1.5px solid var(--color-gray-30);
  vertical-align: middle;
}

/* Size: lg — 36px (org node, team card lead) */
.avatar--lg,
.avatar--lg.avatar-img,
.avatar--lg.avatar-initials {
  width: 36px;
  height: 36px;
}

.avatar-initials.avatar--lg {
  font-size: 13px;
}

/* Size: xl — 44px (edit modal) */
.avatar--xl,
.avatar--xl.avatar-img,
.avatar--xl.avatar-initials {
  width: 44px;
  height: 44px;
}

.avatar-initials.avatar--xl {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Size: xxl — 56px (employee edit page) */
.avatar--xxl,
.avatar--xxl.avatar-img,
.avatar--xxl.avatar-initials {
  width: 56px;
  height: 56px;
}

.avatar-initials.avatar--xxl {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Centered (for org node) */
.avatar-img.avatar--center,
.avatar-initials.avatar--center {
  align-self: center;
}

/* Unfilled state (dashed border, muted) */
.avatar-initials.unfilled {
  background: var(--color-gray-10);
  border: 2px dashed var(--color-gray-40);
  color: var(--color-gray-40);
  font-size: 16px;
  font-weight: 400;
}

/* Vacant state (team card lead empty) */
.avatar-initials.vacant {
  border: 1px dashed var(--color-gray-40);
  background: transparent;
  color: var(--color-gray-40);
  font-size: 16px;
}

/* Open position state */
.avatar-open {
  background: var(--color-warning-bg) !important;
  color: #9a6700 !important;
  font-style: italic;
}

/* Placeholder member state */
.avatar-initials.placeholder {
  background: var(--color-gray-10);
  color: var(--color-gray-40);
  border: 1px dashed var(--color-gray-30);
  font-size: 7px;
}

/* Unfilled member (warning) */
.avatar-initials.unfilled-member {
  background: var(--color-warning-bg);
  color: #9a6700;
  border: 1px dashed var(--color-warning);
}

/* Avatar in people-table (xs with different border) */
.avatar-initials.avatar--xs.table-style {
  background: var(--color-gray-10);
  border: 1.5px solid var(--color-gray-20);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Avatar hover container */
.avatar-hover {
  position: relative;
  cursor: default;
  display: inline-block;
}

/* Inline avatar wrapper */
.avatar-inline {
  display: inline-flex;
  align-items: center;
}

/* Avatar group (overlapping) */
.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar-hover {
  margin-left: -6px;
  transition: transform 0.12s;
}

.avatar-group .avatar-hover:first-child {
  margin-left: 0;
}

.avatar-group .avatar-hover:hover {
  transform: scale(1.15);
  z-index: 10;
}

.avatar-group .avatar-img,
.avatar-group .avatar-initials {
  border: 2px solid var(--color-surface);
  box-sizing: content-box;
}