/**
 * 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 Overflow & Submenu Styles (Clean & Professional)
 * Specifically target desktop screens (min-width: 992px)
 */
@media (min-width: 992px) {
    /* 1. Header Top Container Layout - Fluid dynamic width */
    .header-top .container,
    .header-top .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: visible !important;
    }

    /* 2. Left side wrapper (Logo + Menu) flex configuration with reserved space for topbar user */
    .header-top .d-none.d-lg-flex {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 220px) !important;
        overflow: visible !important;
    }

    /* 3. Logo link margin & shrinking prevention */
    .header-top .d-none.d-lg-flex > a {
        margin-right: 0.75rem !important; /* ~12px margin */
        flex-shrink: 0 !important;
    }

    /* 4. Tab content & header menu wrapper - overflow visible to prevent any scrollbars on header */
    .header-top .tab-content,
    .header-top #kt_header_tab_1,
    .header-top #kt_header_menu {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 5. Menu Navigation List */
    .header-top .header-menu .menu-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Prevent menu items from shrinking or truncating text */
    .header-top .header-menu .menu-nav > .menu-item {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        position: relative !important;
    }

    /* Compact Desktop Menu Link padding & crisp font size */
    .header-top .header-menu .menu-nav > .menu-item > .menu-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    @media (min-width: 1400px) {
        .header-top .header-menu .menu-nav > .menu-item > .menu-link {
            padding-left: 8px !important;
            padding-right: 8px !important;
            font-size: 0.85rem !important;
        }
    }

    /* Topbar user fixed on far right with reserved area */
    .header-top #topbarUser {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* 6. Floating Submenu Dropdowns - Max height locked to screen & internal scrollbar */
    .header-menu .menu-nav > .menu-item > .menu-submenu,
    .header-menu .menu-nav > .menu-item.menu-item-submenu > .menu-submenu {
        position: absolute !important;
        z-index: 1000 !important;
        top: 100% !important;
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
        background: #ffffff !important;
    }

    /* Modern internal scrollbar styling ONLY inside the submenu dropdown box */
    .header-menu .menu-nav > .menu-item .menu-submenu::-webkit-scrollbar,
    div.menu-submenu.menu-submenu-classic::-webkit-scrollbar {
        width: 5px !important;
    }

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

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

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