/**
 * Custom Mobile Menu Responsive Styles
 * Specifically target screen widths less than 992px (mobile/tablet breakpoint)
 */

@media (max-width: 991.98px) {
    /* 0. Make the mobile drawer scrollable */
    #kt_header_navs {
        overflow-y: auto !important;
        max-height: 100vh !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 1. Reset the wrapper container */
    ul.header-tabs.menu-nav {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: none !important;
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        list-style: none !important;
        list-style-type: none !important;
    }
    
    /* Ensure no bullets on all list items and sublists */
    ul.header-tabs.menu-nav,
    ul.header-tabs.menu-nav ul,
    ul.header-tabs.menu-nav li {
        list-style: none !important;
        list-style-type: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }
    
    /* 2. Style the top-level menu list items */
    ul.header-tabs.menu-nav > li.menu-item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
        position: relative !important;
    }
    
    /* 3. Style links/toggles */
    ul.header-tabs.menu-nav li.menu-item > a.menu-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 18px !important;
        color: #464E5F !important; /* Slate grey text */
        background-color: #f6f8fb !important; /* Soft premium background */
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        transition: all 0.25s ease-in-out !important;
        border: 1px solid #ebedf3 !important;
    }
    
    ul.header-tabs.menu-nav li.menu-item > a.menu-link:hover {
        background-color: #eef2f7 !important;
        color: #1b283f !important;
        border-color: #d1d5db !important;
    }
    
    /* Active styling */
    ul.header-tabs.menu-nav li.menu-item.menu-item-active > a.menu-link {
        background-color: #e6f4f0 !important; /* Light soft teal background */
        color: #006341 !important; /* LMAN primary green/teal text */
        border-color: #cce8e0 !important;
        box-shadow: 0 2px 4px rgba(0, 99, 65, 0.05) !important;
    }
    
    /* Expandable parent styling */
    ul.header-tabs.menu-nav li.menu-item-submenu > a.menu-link {
        cursor: pointer !important;
    }
    
    /* Arrow styling and animation */
    ul.header-tabs.menu-nav li.menu-item > a.menu-link i.menu-arrow {
        transition: transform 0.3s ease !important;
        font-size: 0.8rem !important;
        color: #a1a5b7 !important;
        margin-left: auto !important;
        display: inline-block !important;
    }
    
    /* Rotate arrow when open */
    ul.header-tabs.menu-nav li.menu-item.menu-item-open > a.menu-link i.menu-arrow {
        transform: rotate(90deg) !important;
        color: #006341 !important;
    }
    
    /* 4. Submenu dropdown wrapper formatting */
    ul.header-tabs.menu-nav li.menu-item-submenu > div.menu-submenu {
        display: none; /* Controlled by JS toggle slide */
        position: static !important;
        float: none !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 4px 0 4px 16px !important;
        margin: 6px 0 6px 12px !important;
        border-left: 2px solid #e4e6ef !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: auto !important;
    }
    
    /* Open submenu */
    ul.header-tabs.menu-nav li.menu-item-submenu.menu-item-open > div.menu-submenu {
        display: block;
    }
    
    /* Submenu list items */
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }
    
    /* Submenu links */
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        color: #5e6278 !important;
        background-color: transparent !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        font-size: 13.5px !important;
        border: none !important;
        transition: all 0.25s ease !important;
    }
    
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link:hover {
        background-color: #f3f6f9 !important;
        color: #006341 !important;
    }
    
    /* Active submenu link */
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item.menu-item-active > a.menu-link {
        background-color: #f1f3f6 !important;
        color: #006341 !important;
        font-weight: 600 !important;
    }
    
    /* Svg/icon inside submenu links */
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link .svg-icon {
        margin-right: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link .svg-icon svg {
        width: 15px !important;
        height: 15px !important;
    }
    
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link .svg-icon svg path,
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item > a.menu-link .svg-icon svg rect {
        fill: #7e8299 !important;
        transition: fill 0.2s ease !important;
    }
    
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item:hover > a.menu-link .svg-icon svg path,
    ul.header-tabs.menu-nav div.menu-submenu ul.menu-subnav > li.menu-item.menu-item-active > a.menu-link .svg-icon svg path {
        fill: #006341 !important;
    }
}

/**
 * Custom Desktop Navigation Submenu Scrollable Styles
 * Specifically target desktop screens (min-width: 992px)
 */
@media (min-width: 992px) {
    .header-menu .menu-nav > .menu-item .menu-submenu,
    .header-menu .menu-nav > .menu-item.menu-item-submenu > .menu-submenu,
    div.menu-submenu.menu-submenu-classic {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Modern scrollbar styling for desktop submenu dropdowns */
    .header-menu .menu-nav > .menu-item .menu-submenu::-webkit-scrollbar,
    div.menu-submenu.menu-submenu-classic::-webkit-scrollbar {
        width: 6px;
    }

    .header-menu .menu-nav > .menu-item .menu-submenu::-webkit-scrollbar-track,
    div.menu-submenu.menu-submenu-classic::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .header-menu .menu-nav > .menu-item .menu-submenu::-webkit-scrollbar-thumb,
    div.menu-submenu.menu-submenu-classic::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .header-menu .menu-nav > .menu-item .menu-submenu::-webkit-scrollbar-thumb:hover,
    div.menu-submenu.menu-submenu-classic::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}