/* 
 * Centralized Dropdown Styles
 * Used by _Layout.cshtml and BalanceApp.cshtml
 * Last Updated: 2024
 */

/* Dropdown Container */
.dropdown-container {
    position: relative;
    z-index: 10001 !important; /* Higher than dropdown menu to ensure proper stacking */
    overflow: visible !important; /* Allow dropdown to overflow container */
}

/* Dropdown Menu Base Styles */
.dropdown-menu {
    position: fixed !important;
    z-index: 99999 !important;
    display: none !important;
    width: 200px !important; /* Fixed width for consistency */
    min-width: 200px !important;
    max-width: 200px !important; /* Prevent expansion */
    padding: 0;
    margin: 0;
    background-color: #000 !important;
    border: 1px solid #333 !important;
    border-radius: 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important; /* Include border in width calculation */
}

/* Dropdown Menu When Shown */
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning when shown */
}

/* Force dropdown to be visible when shown - high specificity to override Bootstrap */
.custom-navbar .dropdown-container:hover .dropdown-menu,
.custom-navbar .dropdown-container .dropdown-menu.show,
.custom-navbar .dropdown-menu.show,
.dropdown-container:hover .dropdown-menu,
.dropdown-container .dropdown-menu.show,
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning when shown */
    pointer-events: auto !important;
}

/* Additional override to ensure visibility - highest specificity */
.custom-navbar .navbar-nav .dropdown-container .dropdown-menu.show,
.custom-navbar .navbar-nav .dropdown-container:hover .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning when shown */
    pointer-events: auto !important;
}

/* Override Bootstrap's dropdown-menu styles with higher specificity */
.custom-navbar .dropdown-menu,
.navbar .dropdown-menu,
.dropdown-container .dropdown-menu {
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning */
    width: 200px !important; /* Fixed width for consistency */
    min-width: 200px !important;
    max-width: 200px !important; /* Prevent expansion */
    box-sizing: border-box !important;
}

/* CRITICAL: Force dropdown to be visible - override ALL possible conflicting rules */
.custom-navbar .navbar-nav .nav-item.dropdown-container .dropdown-menu.show,
.custom-navbar .navbar-nav .nav-item.dropdown-container:hover .dropdown-menu,
.custom-navbar .navbar-nav .dropdown-container .dropdown-menu.show,
.custom-navbar .navbar-nav .dropdown-container:hover .dropdown-menu,
.navbar .navbar-nav .nav-item.dropdown-container .dropdown-menu.show,
.navbar .navbar-nav .nav-item.dropdown-container:hover .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning - position set by JavaScript */
    pointer-events: auto !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Ensure no pseudo-elements are covering the dropdown */
.custom-navbar .dropdown-menu::before,
.custom-navbar .dropdown-menu::after {
    display: none !important;
}

/* Dropdown Items */
.dropdown-item {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 16px 20px !important;
    clear: both;
    font-weight: 400 !important;
    color: #fff !important;
    text-align: inherit;
    text-decoration: none !important;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: 0 !important;
    transition: background-color 0.15s ease !important;
    font-size: 14px !important; /* Base font size - overridden by media queries below */
    box-sizing: border-box !important; /* Include padding in width calculation */
    overflow: hidden; /* Prevent content from breaking layout */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
}

.dropdown-item:active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dropdown-item.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.dropdown-container:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Override Bootstrap's CSS variable for z-index */
.custom-navbar .dropdown-menu,
.navbar .dropdown-menu {
    --bs-dropdown-zindex: 99999 !important;
}

/* Ensure main content doesn't cover dropdown */
main#main-content {
    z-index: 1 !important;
    position: relative !important;
}

.main-content-wrapper {
    z-index: 1 !important;
    position: relative !important;
}

/* Ensure header doesn't clip dropdown */
header {
    z-index: 10000 !important; /* Higher than main content */
    position: relative !important;
    overflow: visible !important; /* Allow dropdown to overflow */
    isolation: isolate !important; /* Create new stacking context */
}

/* Ensure navbar doesn't clip dropdown */
.custom-navbar {
    overflow: visible !important; /* Allow dropdowns to overflow navbar - CRITICAL */
}

.custom-navbar .container-fluid {
    overflow: visible !important; /* Allow dropdowns to overflow - CRITICAL */
}

/* Ensure navbar-nav doesn't clip dropdowns */
.custom-navbar .navbar-nav {
    overflow: visible !important;
}

/* Responsive font sizing for dropdown items based on screen size - Higher specificity */
@media (max-width: 768px) {
    .dropdown-menu .dropdown-item,
    .custom-navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu .dropdown-item,
    .dropdown-container .dropdown-menu .dropdown-item {
        font-size: 11px !important; /* Smaller font for mobile */
        padding: 12px 14px !important; /* Reduced padding */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .dropdown-menu .dropdown-item,
    .custom-navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu .dropdown-item,
    .dropdown-container .dropdown-menu .dropdown-item {
        font-size: 12px !important; /* Smaller font for tablets */
        padding: 14px 16px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .dropdown-menu .dropdown-item,
    .custom-navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu .dropdown-item,
    .dropdown-container .dropdown-menu .dropdown-item {
        font-size: 13px !important; /* Medium font for smaller laptops */
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .dropdown-menu .dropdown-item,
    .custom-navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu .dropdown-item,
    .dropdown-container .dropdown-menu .dropdown-item {
        font-size: 14px !important; /* Standard font for larger laptops/desktops */
    }
}

@media (min-width: 1921px) {
    .dropdown-menu .dropdown-item,
    .custom-navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu .dropdown-item,
    .dropdown-container .dropdown-menu .dropdown-item {
        font-size: 15px !important; /* Slightly larger for 4K and larger displays */
    }
}