/* ===== SELLER HEADER PROFILE MENU - SHARED STYLES ===== */
/* Include this in all seller pages for consistent header styling */

/* User Profile Menu */
.dropdown-wrapper { 
    position: relative; 
}

.seller-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--seller-primary-light, #EDE9FE);
    cursor: pointer;
    transition: all 0.2s ease;
}

.seller-user-menu:hover {
    background: var(--seller-primary, #7C3AED);
}

.seller-user-menu:hover .seller-user-info strong {
    color: var(--white, #fff);
}

.seller-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white, #fff);
    color: var(--seller-primary, #7C3AED);
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    overflow: hidden;
}

.seller-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seller-user-info strong { 
    font-size: 0.85rem; 
    color: var(--slate-900, #0F172A); 
    display: block;
    transition: color 0.2s ease;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-user-info span { 
    font-size: 0.75rem; 
    color: var(--slate-500, #64748B); 
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white, #fff);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--slate-200, #E2E8F0);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 8px 0;
    display: none;
    z-index: 1000;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown.show { 
    display: block; 
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--slate-700, #334155);
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.user-dropdown a i {
    width: 18px;
    text-align: center;
    color: var(--slate-500, #64748B);
}

.user-dropdown a:hover { 
    background: var(--slate-50, #F8FAFC);
    color: var(--seller-primary, #7C3AED);
}

.user-dropdown a:hover i {
    color: var(--seller-primary, #7C3AED);
}

.user-dropdown hr { 
    border: none; 
    border-top: 1px solid var(--slate-100, #F1F5F9); 
    margin: 6px 0; 
}

.user-dropdown .logout { 
    color: var(--danger, #EF4444); 
}

.user-dropdown .logout i { 
    color: var(--danger, #EF4444); 
}

.user-dropdown .logout:hover {
    background: #FEE2E2;
    color: var(--danger, #EF4444);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .seller-user-menu {
        padding: 4px 8px 4px 4px;
    }
    
    .seller-user-info {
        display: none;
    }
    
    .seller-user-avatar {
        width: 36px;
        height: 36px;
    }
}

/* User dropdown toggle function - add to page scripts */
/*
function toggleUserDropdown() {
    const dropdown = document.getElementById('userDropdown');
    dropdown.classList.toggle('show');
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const dropdown = document.getElementById('userDropdown');
    const userMenu = document.querySelector('.seller-user-menu');
    if (dropdown && !dropdown.contains(e.target) && !userMenu.contains(e.target)) {
        dropdown.classList.remove('show');
    }
});

function handleLogout(event) {
    event.preventDefault();
    if (typeof firebase !== 'undefined' && firebase.auth) {
        firebase.auth().signOut().then(() => {
            window.location.href = '/seller-login.html';
        }).catch(console.error);
    }
}
*/