/*||||||||||| MAIN MENU |||||||||||||||*/
/* Mobile-first: collapsed menu by default, toggler visible, overlay only used on small screens */
/* Updated to use nx-theme.css variables */

/* Main container becomes a column flex that fills viewport height */
.nx-mainmenu {
    --nx-mainmenu-width: var(--nx-main-menu-width, 14rem);
    --nx-mainmenu-closed-width: 0rem;
    display: flex;
    flex-direction: column;
    height: 100vh; /* fill viewport */
    min-height: 0; /* allow inner flex children to shrink properly */
    width: var(--nx-mainmenu-closed-width);
    box-sizing: border-box;
    background: var(--nx-secondary-bg);
    border-right: var(--nx-border-width) solid var(--nx-border-color);
    transition: width 200ms ease-in-out, border-color 200ms;
    overflow: visible;
    z-index: 20;
    font-family: var(--nx-font);
}

    /* Expanded state (used on small screens when open) */
    .nx-mainmenu.open {
        width: var(--nx-mainmenu-width);
    }

/* Content wrapper is a column flex; it grows to fill available space */
.nx-mainmenu-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* take remainder */
    min-height: 0; /* required so children can scroll correctly */
    overflow: hidden;
}

/* Header and footer should size to their content only */
.nx-mainmenu .nx-mainmenu-header,
.nx-mainmenu .nx-mainmenu-footer {
    flex: 0 0 auto; /* do not grow; size to content */
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: var(--nx-space);
    padding-bottom: var(--nx-space);
}

/* Scrollable area fills remaining space inside the content wrapper */
.nx-mainmenu .nx-scrollable {
    display: none; /* hidden by default on small (collapsed) state */
    padding: var(--nx-space-small);
    flex: 1 1 auto; /* grow to fill remaining space */
    min-height: 0; /* critical for flexbox scrolling */
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* Toggler (visible on small screens only) */
.nx-mainmenu-toggle {
    appearance: none;
    cursor: pointer;
    width: 40px;
    height: 30px;
    top: var(--nx-space-small);
    right: -45px;
    border-radius: var(--nx-border-radius);
    display: inline-block;
    box-sizing: border-box;
    z-index: 1110;
    visibility: hidden; /* hide on big screen */
    position: absolute;
    background: inherit;
    border-style: none;
    box-shadow: none;
    border-right-style: none;
  

    background: var(--nx-tertiary-bg);
}

/* Scrollable area (hidden by default; revealed when .open on small screens) */
.nx-mainmenu .nx-scrollable {
    display: none;
    padding: var(--nx-space-small);
    flex: 1;
}

.nx-mainmenu.open .nx-scrollable {
    display: block;
    overflow-y: auto;
}

/* Overlay (default hidden). On small screens overlay covers viewport when menu is open. */
.nx-mainmenu .nx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--nx-dim-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    left: var(--nx-mainmenu-width);
    transition: opacity 160ms ease;
    opacity: 1;
}





/* overlay visible only when .open */
.nx-mainmenu.open .nx-overlay {
    display: block;
}