/* Hamburger menu for the portal layout.
   Desktop (>= 992px): the hamburger toggles the left menu between expanded (170px) and collapsed (60px icons).
   Phone/tablet (< 992px): the left menu is hidden and slides in over the page; tap outside to close. */

.menu-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 4px 8px; margin-right: .75rem;
    font-size: 26px; line-height: 1; color: #113456; cursor: pointer;
}
.menu-toggle-btn:hover { color: #2D82FF; }
.mobile-menu-backdrop { display: none; }

@media (max-width: 991.98px) {
    #maindiv .main-menu,
    #maindiv .main-menu.expanded,
    #maindiv .main-menu.collapsed {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 240px !important; min-height: 100vh;
        z-index: 1045; overflow-y: auto;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    body.mobile-menu-open #maindiv .main-menu { transform: none; }
    /* always show labels in the slide-in menu, even if desktop was collapsed */
    #maindiv .main-menu .menu-text { display: inline !important; }

    #maindiv .main-content,
    #maindiv .main-content.expanded,
    #maindiv .main-content.collapsed { width: 100% !important; }

    body.mobile-menu-open .mobile-menu-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, .4);
    }

    .top-nav { padding: 12px 1rem !important; gap: .5rem; }
    .top-nav .header-search-form { flex: 1 1 auto; min-width: 0; }
    .top-nav .header-search-form .dx-textbox { width: 100% !important; }
    .top-nav .header-search-form .hint,
    .top-nav .hello-text { display: none; }
    #maindiv .container-fluid.main { padding-left: 1rem !important; padding-right: 1rem !important; }
}