/* Enhanced Profile Icons for Skribrie Dashboard */

/* Base Avatar Style */
.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  overflow: hidden;
}

/* Larger Avatar */
.profile-avatar.large {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

/* Small Avatar */
.profile-avatar.small {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 6px;
}

/* Avatar Patterns */
.profile-avatar::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background-size: cover;
  z-index: 0;
}

/* Pattern 1 - Diagonal Lines */
.profile-avatar.pattern-1::before {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 10px 10px;
}

/* Pattern 2 - Dots */
.profile-avatar.pattern-2::before {
  background-image: radial-gradient(rgba(255,255,255,0.2) 2px, transparent 2px);
  background-size: 10px 10px;
}

/* Pattern 3 - Zigzag */
.profile-avatar.pattern-3::before {
  background-image: linear-gradient(-45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 10px 10px;
}

/* Pattern 4 - Waves */
.profile-avatar.pattern-4::before {
  background-image: repeating-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,0.1) 3px, rgba(255,255,255,0.2) 4px, rgba(255,255,255,0.1) 5px);
  background-size: 20px 20px;
}

/* Pattern 5 - Crosshatch */
.profile-avatar.pattern-5::before {
  background-image: 
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Avatar Colors - Gradient Backgrounds */
.profile-avatar.rajesh-kumar {
  background: linear-gradient(135deg, #00c9c0, #008f89);
}

.profile-avatar.ananya-sharma {
  background: linear-gradient(135deg, #ff5a3d, #e54632);
}

.profile-avatar.rahul-mehta {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.profile-avatar.priya-desai {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.profile-avatar.vikram-patel {
  background: linear-gradient(135deg, #03a9f4, #0288d1);
}

.profile-avatar.neha-gupta {
  background: linear-gradient(135deg, #ffc107, #ff9800);
}

.profile-avatar.aishwarya-reddy {
  background: linear-gradient(135deg, #e91e63, #c2185b);
}

.profile-avatar.deepak-verma {
  background: linear-gradient(135deg, #3f51b5, #303f9f);
}

.profile-avatar.anjali-mishra {
  background: linear-gradient(135deg, #009688, #00796b);
}

.profile-avatar.ravi-malhotra {
  background: linear-gradient(135deg, #673ab7, #512da8);
}

.profile-avatar.kavita-mehra {
  background: linear-gradient(135deg, #f44336, #d32f2f);
}

.profile-avatar.sanjay-kapoor {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}

.profile-avatar.pooja-singh {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

.profile-avatar.aryan-joshi {
  background: linear-gradient(135deg, #795548, #5d4037);
}

.profile-avatar.nisha-patel {
  background: linear-gradient(135deg, #607d8b, #455a64);
}

/* Online Status Indicator */
.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid white;
}

.status-online {
  background-color: #4caf50;
}

.status-offline {
  background-color: #9e9e9e;
}

.status-busy {
  background-color: #f44336;
}

.status-away {
  background-color: #ff9800;
}

/* Avatar with border */
.profile-avatar.with-border {
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Avatar Hover Effects */
.profile-avatar.hover-effect {
  transition: all 0.3s ease;
}

.profile-avatar.hover-effect:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Circular Avatar Option */
.profile-avatar.circular {
  border-radius: 50%;
}

/* Avatar with notification badge */
.profile-avatar.with-badge {
  position: relative;
}

.profile-avatar.with-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f44336;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid white;
}

/* Admin Badge */
.admin-badge {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}