/* Sidebar Avatar Image Fallback CSS */
.sidebar .user-img {
    position: relative;
    background: linear-gradient(135deg, #4ade80 0%, #84cc16 35%, #a3a3a3 70%, #8b5a3c 100%);
    background-size: cover;
    background-position: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
}

.sidebar .user-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(74, 222, 128, 0.8) 0%,     /* Greenish */
        rgba(132, 204, 22, 0.8) 35%,    /* Lime */
        rgba(163, 163, 163, 0.6) 70%,   /* Gray transition */
        rgba(139, 90, 60, 0.8) 100%     /* Brown */
    );
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.sidebar .user-img img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* When image fails to load or is missing */
.sidebar .user-img img[src=""],
.sidebar .user-img img:not([src]),
.sidebar .user-img img[src*="default_avatar.png"] {
    opacity: 0;
}

.sidebar .user-img img[src=""]:hover,
.sidebar .user-img img:not([src]):hover,
.sidebar .user-img img[src*="default_avatar.png"]:hover {
    opacity: 0;
}

/* Show fallback background when image is missing/default */
.sidebar .user-img:has(img[src=""]) .user-img::before,
.sidebar .user-img:has(img:not([src])) .user-img::before,
.sidebar .user-img:has(img[src*="default_avatar.png"]) .user-img::before {
    opacity: 1;
}

/* Alternative approach using JavaScript class toggle */
.sidebar .user-img img.image-error {
    opacity: 0;
}

.sidebar .user-img.show-fallback::before {
    opacity: 1;
}

/* Add a subtle pattern overlay for more visual interest */
.sidebar .user-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.sidebar .user-img.show-fallback::after {
    opacity: 1;
}

/* Fallback for browsers that don't support CSS gradients */
.sidebar .user-img {
    background-color: #84cc16; /* Fallback to lime color */
}

/* User icon fallback - shows a user silhouette when no image */
.sidebar .user-img.show-fallback::before {
    content: '\f007'; /* FontAwesome user icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    z-index: 3;
    opacity: 1;
}