/* Fix user dropdown positioning on smaller screens */

/* Ensure header controls don't overflow */
.header-controls {
    position: relative !important;
    z-index: 1000 !important;
}

/* Fix dropdown positioning for responsive design */
.user-dropdown {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    right: 0 !important;
    min-width: 220px !important;
    max-width: calc(100vw - 2rem) !important; /* Prevent overflow on small screens */
}

/* For very small screens, adjust dropdown position */
@media (max-width: 768px) {
    .user-dropdown {
        right: -1rem !important; /* Slight negative margin to align with edge */
        left: auto !important;
        transform-origin: top right !important;
    }
    
    /* If dropdown would overflow, flip it to the left */
    .header-controls:last-child .user-dropdown {
        right: 0 !important;
        margin-right: 0.5rem !important;
    }
}

/* For extremely small screens, make dropdown full width */
@media (max-width: 480px) {
    .user-dropdown {
        position: fixed !important;
        top: 70px !important; /* Below header */
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: calc(100% - 1rem) !important;
        min-width: unset !important;
        max-width: unset !important;
        transform: none !important;
    }
    
    .user-dropdown.active {
        transform: none !important;
    }
}

/* Ensure dropdown is always visible when active */
.user-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fix dropdown items to be clickable */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure proper stacking context */
.app-container {
    position: relative;
    z-index: 1;
}

.header {
    position: relative;
    z-index: 100;
}

/* Debug helper - uncomment to see dropdown bounds */
/*
.user-dropdown {
    border: 2px solid red !important;
}
.header-controls {
    border: 2px solid blue !important;
}
*/