/* Profile image states styling */

/* Image wrapper for profile images */
.profile-image-wrapper {
    position: relative;
    display: inline-block;
}

/* Loading state for profile images */
.profile-image-loading {
    opacity: 0.6;
    filter: blur(2px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Refreshing state animation */
.profile-image-refreshing {
    animation: pulse-opacity 1.5s infinite;
}

@keyframes pulse-opacity {
    0% { opacity: 0.7; }
    50% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* Loading indicator overlay */
.profile-image-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6f42c1;
    z-index: 10;
    opacity: 0.8;
}

/* Success indicator for successfully loaded images */
.profile-image-success {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 15;
}

.profile-image-success.show {
    opacity: 1;
    animation: fade-out 2s forwards 1s;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Force override for any image with error state or fallback */
img.profile-image.fallback-recovery,
img.profile-image.default,
img.fallback, 
.profile-picture-preview.fallback,
.profile-picture-preview.default,
.rounded-circle.fallback,
.rounded-circle.default,
img[onerror],
#profile-preview-image,
.profile-picture-preview {
    background-color: #f8f9fa !important; /* Light gray background */
    border: 1px solid #e9ecef !important;
}

/* Red background override (prevent red background from browser defaults) */
img.profile-image,
.profile-picture-preview,
.rounded-circle[data-filename],
#profile-preview-container img,
.preview-container img,
#profile-preview-image {
    background-color: #f8f9fa !important; /* Light gray background */
}

/* Target by direct attribute to override any other styles */
img[id="profile-preview-image"] {
    background-color: #f8f9fa !important;
}

/* Prevent any red image placeholders */
img:-moz-broken {
    background-color: #f8f9fa !important;
}

/* Firefox broken image styling override */
@-moz-document url-prefix() {
    img:-moz-broken {
        background-color: #f8f9fa !important;
    }
}

/* WebKit broken image styling */
img:not([src]),
img[src=""],
img[src="#"],
img[src="data:,"],
img[src="about:blank"] {
    background-color: #f8f9fa !important;
}

/* Force the placeholder background color */
.preview-container {
    background-color: #f8f9fa !important;
}

/* Direct styling for the specific profile preview container */
#profile-preview-container {
    background-color: #f8f9fa !important;
}

/* Style for specific profile image */
#profile-preview-image {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
}

/* Profile picture containers */
.profile-pic-wrapper,
.preview-container,
.profile-picture-container {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* Default style for profile SVG icon */
.default-profile-picture {
    background-color: #f8f9fa;
    color: #6c757d;
    display: flex;
    justify-content: center;
    align-items: center;
}