/* ========== CONSISTENT AVATAR ICONS IN ALL THEMES ========== */

/* 1. HEADER AVATAR: Keep Purple Gradient */
.user-avatar-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-icon i,
.user-avatar-icon i.bx,
.user-avatar-icon i.bx-user,
.user-avatar-icon .bx,
.user-avatar-icon .bx-user {
    font-size: 1.5rem;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 2. DROPDOWN AVATAR: Revert to Semi-Transparent White */
.profile-avatar-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-avatar-icon i,
.profile-avatar-icon i.bx,
.profile-avatar-icon i.bx-user,
.profile-avatar-icon .bx,
.profile-avatar-icon .bx-user {
    font-size: 1.75rem;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. OVERRIDES: Ensure these rules stick in all themes */

/* Header Avatar Overrides */
[data-theme="dark"] .user-avatar-icon,
[data-theme="light"] .user-avatar-icon,
html.dark-theme .user-avatar-icon,
html:not(.dark-theme) .user-avatar-icon {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
}

[data-theme="dark"] .user-avatar-icon i,
[data-theme="light"] .user-avatar-icon i,
html.dark-theme .user-avatar-icon i,
html:not(.dark-theme) .user-avatar-icon i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}

/* Dropdown Avatar Overrides */
[data-theme="dark"] .profile-avatar-icon,
[data-theme="light"] .profile-avatar-icon,
html.dark-theme .profile-avatar-icon,
html:not(.dark-theme) .profile-avatar-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .profile-avatar-icon i,
[data-theme="light"] .profile-avatar-icon i,
html.dark-theme .profile-avatar-icon i,
html:not(.dark-theme) .profile-avatar-icon i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}

/* Ensure profile dropdown header specifically has matching avatar style */
.profile-dropdown .profile-header .profile-avatar-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

.profile-dropdown .profile-header .profile-avatar-icon i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}

/* Force white on topbar and navbar context */
.topbar .user-avatar-icon i,
.navbar .user-avatar-icon i,
.user-box .user-avatar-icon i,
header .user-avatar-icon i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}