/*
 * Profile Dropdown Consistency Styles
 * High specificity overrides to ensure consistent profile dropdown across all pages
 */

/* Force consistent profile dropdown styling with highest specificity */
.user-profile.dropdown .dropdown-menu.dropdown-menu-end,
.header-right .user-profile.dropdown .dropdown-menu.dropdown-menu-end,
div .user-profile.dropdown .dropdown-menu.dropdown-menu-end {
    /* Override all competing styles with !important */
    min-width: 280px !important;
    max-width: 320px !important;

    /* Consistent positioning */
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

    /* Consistent spacing and appearance */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 0 !important;

    /* Consistent styling */
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    background: white !important;

    /* Z-index to ensure it appears above other content */
    z-index: 1050 !important;

    /* Smooth animations */
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.2s ease !important;
}

/* Ensure dropdown items have consistent styling */
.user-profile.dropdown .dropdown-menu .dropdown-header {
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 0.75rem 1rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-bottom: none !important;
    background: transparent !important;
}

.user-profile.dropdown .dropdown-menu .dropdown-item-text {
    padding: 0.25rem 1rem 0.75rem !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.875rem !important;
}

.user-profile.dropdown .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.user-profile.dropdown .dropdown-menu .dropdown-item:hover,
.user-profile.dropdown .dropdown-menu .dropdown-item:focus {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

.user-profile.dropdown .dropdown-menu .dropdown-divider {
    margin: 0.5rem 0 !important;
    border-color: #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
}

/* User avatar consistency */
.user-profile .user-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    color: #374151 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.user-profile .user-avatar:hover {
    background: #d1d5db !important;
    color: #374151 !important;
}

/* User role consistency */
.user-profile .user-role {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* Prevent any page-specific overrides from interfering */
body .user-profile.dropdown .dropdown-menu.dropdown-menu-end {
    /* Force consistent positioning regardless of page */
    position: absolute !important;
    inset: auto 0 auto auto !important;
    margin: 0 !important;
    transform: translate(0, calc(100% + 8px)) !important;
}

/* Special handling for small screens */
@media (max-width: 768px) {
    .user-profile.dropdown .dropdown-menu.dropdown-menu-end {
        min-width: 250px !important;
        max-width: 280px !important;
        right: 10px !important;
    }
}

/* Ensure dropdown shows when active */
.user-profile.dropdown .dropdown-menu.show,
.user-profile.dropdown.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}