/* Navigation Menu Dropdown - Force to Top with Maximum Z-Index */
#user-dropdown {
    position: fixed !important;
    z-index: 2147483647 !important; /* Maximum z-index value */
    right: 20px !important;
    top: 60px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure the main navigation dropdown container has proper z-index */
#user-menu-container {
    position: relative !important;
    z-index: 2147483647 !important; /* Maximum z-index value */
}

/* Target the actual dropdown menu with x-show directive */
div[x-show="open"][style*="position: fixed"] {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Ensure dropdown content is visible */
#user-dropdown a {
    position: relative !important;
    z-index: 2147483647 !important; /* Maximum z-index value */
}

/* Force Quick Add Task and other common page elements to lower z-index */
.bg-white:not([x-show="open"]), .bg-gray-800:not([x-show="open"]), .rounded-md:not([x-show="open"]), .shadow-lg:not([x-show="open"]), .border:not([x-show="open"]) {
    z-index: 1 !important;
}

/* Specifically target common overlapping elements but not the dropdown */
.fixed:not(#user-dropdown):not([x-show="open"]), 
.absolute:not(#user-dropdown):not([x-show="open"]), 
.relative:not(#user-menu-container) {
    z-index: auto !important;
}

/* Ensure dropdown menu itself always stays on top */
#user-dropdown,
#user-dropdown.fixed,
div[x-show="open"][x-transition],
[x-show="open"] div.bg-white,
[x-show="open"] div.bg-gray-800 {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Specifically target Quick Add Task modal to ensure it's below dropdown */
#quick-add-modal,
.quick-task-modal,
.modal-backdrop {
    z-index: 40 !important;
}

/* Ensure My Toolbox and dashboard elements stay below dropdown */
.dashboard-widget,
.toolbox-card,
.task-card {
    z-index: 10 !important;
}

.dark .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

.dropdown-menu a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in-out !important;
}

.dark .dropdown-menu a {
    color: #d1d5db !important;
}

.dropdown-menu a:hover {
    background-color: #f3f4f6 !important;
}

.dark .dropdown-menu a:hover {
    background-color: #374151 !important;
}

.dropdown-menu hr {
    margin: 0.25rem 0 !important;
    border-color: #e5e7eb !important;
}

.dark .dropdown-menu hr {
    border-color: #4b5563 !important;
}

/* Override any conflicting styles */
.dropdown-menu-container * {
    z-index: inherit !important;
}

/* Fix background content visibility when dropdown is open */
.dropdown-menu-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(2px);
}

/* Hide background content when menu is open */
[x-show="open"] ~ * {
    filter: blur(1px);
    opacity: 0.3;
    transition: all 0.2s ease;
}

/* Ensure dropdown content itself isn't blurred */
#user-dropdown * {
    filter: none !important;
    opacity: 1 !important;
}