/* Desktop Menu Dropdown Support */
@media (min-width: 1200px) {
    /* Base structure for menu items with submenu */
    /* :has(> .second_level_child) {
        position: relative !important;
        margin-left: 15px;
    } */
    /* This rule ensures that dropdown menus can display their absolutely positioned children (flyouts)
       without clipping them. Applies to all levels of dropdown menus in the desktop view. */
    .desktop-menu .dropdown-menu:hover{
        overflow: visible !important;
    }
    
    /* Submenu items that have sub-submenus */
    .dropdown-menu .dropdown {
        position: relative !important;
    }
    
    /* Position the sub-submenu to the right by default */
    .dropdown-menu .dropdown > .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin: 0 !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        background-color: #fff;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
        transform: translateX(10px);
        pointer-events: none;
        z-index: 1001;
        height: 0 !important; /* Force height to 0 when hidden */
        overflow: hidden !important; /* Hide content when not displayed */
        display: block !important; /* Always use block display for transition */
        clip: rect(0, 0, 0, 0) !important; /* Hide content visually */
    }
    
    /* Special class for dropdowns that should open to the left */
    .dropdown-menu .dropdown.dropdown-left > .dropdown-menu {
        left: auto !important;
        right: 100% !important;
        transform: translateX(-10px);
    }
    
    /* Adjust transform for hover state when opening to the left */
    .dropdown-menu .dropdown.dropdown-left:hover > .dropdown-menu {
        transform: translateX(0);
    }
    
    /* Auto-switching direction based on position in viewport */
    @media (min-width: 1200px) {
        /* Apply left-opening to last items in dropdown menus */
        .dropdown-menu .dropdown:nth-last-child(-n+2) > .dropdown-menu,
        .navbar-nav > li:nth-last-child(-n+1) .dropdown > .dropdown-menu {
            left: auto !important;
            right: 100% !important;
            transform: translateX(-10px);
        }
        
        /* Ensure proper transform on hover for these left-opening menus */
        .dropdown-menu .dropdown:nth-last-child(-n+2):hover > .dropdown-menu,
        .navbar-nav > li:nth-last-child(-n+1) .dropdown:hover > .dropdown-menu {
            transform: translateX(0);
        }
    }
    
    /* Show sub-submenu on hover */
    .dropdown-menu .dropdown:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        height: auto !important; /* Restore height when visible */
        overflow: visible !important; /* Show content and allow flyouts */
        clip: auto !important; /* Show content visually */
    }
    
    /* Style dropdown items with children to use flexbox for proper arrow positioning */
    .dropdown-menu .dropdown > .dropdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    /* Add right arrow to submenu items that have children */
    .dropdown-menu .dropdown > .dropdown-item::after {
        content: "";
        display: block;
        flex-shrink: 0; /* Prevent arrow from shrinking */
        border-top: 0.3em solid transparent;
        border-right: 0;
        border-bottom: 0.3em solid transparent;
        border-left: 0.3em solid;
        margin-left: 0.8em; /* Space between text and arrow */
        transition: transform 0.3s ease;
    }
    
    /* Rotate arrow when dropdown item or its children are hovered */
    .dropdown-menu .dropdown:hover > .dropdown-item::after {
        transform: rotate(180deg);
    }
    
    /* Style sub-submenu items */
    .dropdown-menu .dropdown-menu .dropdown-item {
        padding: 4px 8px;
        white-space: nowrap;
    }
    
    /* Ensure all nested submenus have proper display style */
    .dropdown-menu .dropdown-menu {
        display: block !important;
        min-width: 10rem;
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    /* Apply hover effect to dropdown items */
    .dropdown-menu .dropdown-item:hover {
        background-color: #f8f9fa;
    }
}