/**
 * Premium Avatar Design System
 * -------------------------------------------------
 * Implements high-contrast, multi-layered borders
 * and shadow effects to ensure avatars look premium
 * on any background.
 */

/* Baseline Premium Styles */
.avatar-premium {
  position: relative;
  background-color: var(--bs-body-bg);
  border: 2px solid #fff; /* Light mode default */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -2px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 5;
}

/* Dark Mode Appearance Upgrade */
[data-bs-theme='dark'] .avatar-premium {
  border-color: #1c1d22; /* Sleek dark-mode compatible border color */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 
    0 2px 4px -2px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.avatar-premium:hover {
  transform: scale(1.02);
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Circular - for Navbar and Lists */
.avatar-premium-circle {
  border-radius: 50% !important;
}

/* Square - for Profiles (User & Mentor) */
.avatar-premium-square {
  border-radius: 8px !important; /* Premium soft square look */
}

/* Specific Fix for Profile Header Layout */
.user-profile-img.avatar-premium-square {
  z-index: 10 !important;
  position: relative;
}

/* Ensure the banner is definitely behind the profile info */
.user-profile-header-banner {
  z-index: 1;
  position: relative;
}

.user-profile-header {
  position: relative;
  z-index: 2;
}

/* Fix for Live Status Indicator (Online Dot) */
.avatar-online::after {
  z-index: 10 !important;
  border: 1.5px solid var(--bs-body-bg) !important; /* Thinner, cleaner border */
  width: 11px !important;
  height: 11px !important;
  right: 1px !important;
  bottom: 2px !important;
}

/* Specific adjustment for navbar premium circle to prevent dot clipping */
.nav-item .avatar-premium-circle {
  z-index: 5;
}