/* ==========================================================================
   ATOMS / avatar / avatar.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <div class="avatar avatar-md">
       <img src="photo.jpg" alt="John Doe">
     </div>
     Fallback (no image):
     <div class="avatar avatar-md" aria-label="John Doe">
       <span class="avatar-initials">JD</span>
     </div>
     Group:
     <div class="avatar-group">
       <div class="avatar avatar-sm">...</div>
       <div class="avatar avatar-sm">...</div>
     </div>
   ========================================================================== */

.avatar {
  position:         relative;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  border-radius:    var(--radius-full);
  background-color: var(--color-bg-sunken);
  border:           1.5px solid var(--color-border-default);
  overflow:         hidden;
  user-select:      none;

  /* Default size = md */
  width:  var(--size-avatar-md);   /* 40px */
  height: var(--size-avatar-md);
}

.avatar img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  border-radius: var(--radius-full);
}

/* Initials fallback */
.avatar-initials {
  font-size:   var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

/* Sizes */
.avatar-xs   { width: var(--size-avatar-xs);  height: var(--size-avatar-xs);  }  /* 24px */
.avatar-sm   { width: var(--size-avatar-sm);  height: var(--size-avatar-sm);  }  /* 32px */
.avatar-md   { width: var(--size-avatar-md);  height: var(--size-avatar-md);  }  /* 40px */
.avatar-lg   { width: var(--size-avatar-lg);  height: var(--size-avatar-lg);  }  /* 48px */
.avatar-xl   { width: var(--size-avatar-xl);  height: var(--size-avatar-xl);  }  /* 64px */
.avatar-2xl  { width: var(--size-avatar-2xl); height: var(--size-avatar-2xl); }  /* 96px */

.avatar-xs   .avatar-initials { font-size: 8px; }
.avatar-sm   .avatar-initials { font-size: var(--font-size-100); }
.avatar-lg   .avatar-initials { font-size: var(--font-size-300); }
.avatar-xl   .avatar-initials { font-size: var(--font-size-400); }
.avatar-2xl  .avatar-initials { font-size: var(--font-size-600); }

/* Shape */
.avatar-square   { border-radius: var(--radius-lg); }
.avatar-rounded  { border-radius: var(--radius-xl); }

/* Status indicator */
.avatar-wrapper {
  position: relative;
  display:  inline-flex;
}
.avatar-status {
  position:         absolute;
  bottom:           1px;
  right:            1px;
  width:            10px;
  height:           10px;
  border-radius:    var(--radius-full);
  border:           2px solid var(--color-bg-base);
  background-color: var(--color-border-strong);
}
.avatar-status-online  { background-color: var(--color-success); }
.avatar-status-away    { background-color: var(--color-warning); }
.avatar-status-busy    { background-color: var(--color-error); }
.avatar-status-offline { background-color: var(--color-border-strong); }

/* Group — overlapping stack */
.avatar-group {
  display:     inline-flex;
  flex-direction: row-reverse;
}
.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--color-bg-base);
}
.avatar-group .avatar:last-child { margin-left: 0; }