/* ===================================
   USER DROPDOWN - XidmətTap.az
   Navbar istifadəçi dropdown menyu
   =================================== */

/* User dropdown link */
#userDropdown {
    font-weight: 500;
    color: #333 !important;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#userDropdown:hover {
    background: rgba(26, 26, 26, 0.1);
    color: #1a1a1a !important;
}

#userDropdown i {
    font-size: 1.2rem;
    color: #1a1a1a;
}

/* Dropdown menu styling */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
    min-width: 220px;
    animation: dropdownFadeIn 0.3s ease;
}

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

/* Dropdown items */
.dropdown-item {
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.dropdown-item i {
    font-size: 16px;
    width: 20px;
}

.dropdown-item:hover {
    background: rgba(26, 26, 26, 0.1);
    color: #1a1a1a;
    transform: translateX(4px);
}

.dropdown-item:active {
    background: rgba(26, 26, 26, 0.2);
}

/* Logout button - special styling */
.dropdown-item.text-danger {
    color: #dc3545 !important;
}

.dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #c82333 !important;
}

.dropdown-item.text-danger i {
    color: #dc3545;
}

/* Dropdown divider */
.dropdown-divider {
    margin: 8px 0;
    opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 991px) {
    #userDropdown {
        padding: 8px 0;
    }

    .dropdown-menu {
        border: 1px solid #e0e0e0;
        box-shadow: none;
        margin-top: 4px;
    }

    .dropdown-item {
        padding: 12px 16px;
    }
}

/* Dark mode support */
[data-theme="dark"] #userDropdown {
    color: #e0e0e0 !important;
}

[data-theme="dark"] #userDropdown:hover {
    background: rgba(26, 26, 26, 0.2);
    color: #1a1a1a !important;
}

[data-theme="dark"] .dropdown-menu {
    background: #2d2d2d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item {
    color: #e0e0e0;
}

[data-theme="dark"] .dropdown-item:hover {
    background: rgba(26, 26, 26, 0.2);
    color: #1a1a1a;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #404040;
}

[data-theme="dark"] .dropdown-item.text-danger {
    color: #ff6b6b !important;
}

[data-theme="dark"] .dropdown-item.text-danger:hover {
    background: rgba(255, 107, 107, 0.2);
    color: #ff5252 !important;
}

/* Login button styling */
.nav-link[href="/Account/Login"] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link[href="/Account/Login"]:hover {
    color: #1a1a1a !important;
}

.nav-link[href="/Account/Login"] i {
    font-size: 1.1rem;
}

/* User avatar circle animation */
#userDropdown i.bi-person-circle {
    animation: userIconPulse 3s ease-in-out infinite;
}

@keyframes userIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Dropdown open indicator */
.dropdown-toggle::after {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Badge for notifications (future feature) */
.user-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #1a1a1a;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* Smooth transitions */
.dropdown-menu,
.dropdown-item,
#userDropdown {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}