/* =================== Top Menu (all items, wraps, top layer) =================== */
:root {
    --menu-top-z: 50000;
}

/* Sticky bar that holds the menu (no scrolling here) */
.menu-rail {
    position: sticky;
    top: 0;
    z-index: var(--menu-top-z);
    /*background: #2a2c30;*/
    padding: 6px 8px;
    margin: 6px 0 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    overflow: visible; /* important: no clipping */
    white-space: normal; /* allow wrapping to multiple rows */
}

/* The menu itself: allow wrapping & no clipping */
#menu.k-menu {
    background: transparent;
    border: 0;
    overflow: visible; /* submenus can overflow the bar */
    white-space: normal; /* remove any nowrap from earlier versions */
}

/* Top-level items as “pills”, with row/column spacing when they wrap */
#menu > .k-item {
    margin: 4px 6px 0 0;
}

    #menu > .k-item:last-child {
        margin-right: 0;
    }

#menu .k-item > .k-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    /*color: #e6e6e6;*/
    font-weight: 600;
}

    #menu .k-item > .k-link:hover {
        /*background: #3a3d42;
        color: #fff;*/
    }

    #menu .k-item.k-state-active > .k-link,
    #menu .k-item > .k-link.k-selected {
        /*background: #14b8a6;*/
        /*color: #081019;*/
    }

/* Icons/images */
#menu .k-image, #menu .k-icon {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    opacity: .9;
}

/* Submenus (popups) on a high layer so they never sit behind content */
.k-animation-container {
    overflow: visible !important;
    z-index: calc(var(--menu-top-z) + 10) !important;
}

    .k-animation-container .k-group {
        margin-top: 6px;
        min-width: 220px;
        /*background: #2f3136;*/
        border: 1px solid #3a3d42;
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }

/* Keyboard focus */
#menu .k-link:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 10px;
}

/* Clean up any legacy styles from earlier iterations */
.menu-rail::before, .menu-rail::after,
.menu-scroll-btn {
    display: none !important;
}

/* ===== Compact menu density (paste AFTER your current rules) ===== */
:root {
    --menu-pad-y: 4px; /* vertical padding per item */
    --menu-pad-x: 10px; /* horizontal padding per item */
    --menu-gap-x: 6px; /* space between items in a row */
    --menu-gap-y: 4px; /* space between wrapped rows */
    --menu-radius: 8px; /* pill radius */
    --menu-font-size: 13px; /* item text size */
    --menu-icon-size: 16px; /* icon size */
    --menu-line-height: 1.2; /* tighter line height */
}

/* Use gaps for layout, not margins (tighter & consistent) */
#menu.k-menu {
    display: flex; /* allows row/column gaps */
    flex-wrap: wrap; /* keep your current wrapping */
    gap: var(--menu-gap-y) var(--menu-gap-x);
    white-space: normal; /* wrap to multiple rows (as you have now) */
    overflow: visible;
}

/* Remove old margins now that we use gap */
#menu > .k-item {
    margin: 0 !important;
}

/* Smaller pills */
#menu .k-item > .k-link {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* was 8px */
    padding: var(--menu-pad-y) var(--menu-pad-x);
    border-radius: var(--menu-radius);
    font-size: var(--menu-font-size);
    line-height: var(--menu-line-height);
    min-height: 32px; /* keeps it clickable without feeling huge */
}

/* Smaller icons */
#menu .k-image, #menu .k-icon {
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    margin-right: 4px; /* was 2–6; feels balanced at 4 when compact */
    opacity: .9;
}

/* Submenu popup container stays above everything */
.k-animation-container {
    overflow: visible !important;
    z-index: calc(var(--menu-top-z) + 10) !important;
}

    /* Tighter submenu panel + rows */
    .k-animation-container .k-group {
        margin-top: 4px; /* was 6px */
        min-width: 190px; /* was 220px */
        border: 1px solid #3a3d42;
        border-radius: 10px; /* was 12px */
        padding: 4px; /* was 6px */
        box-shadow: 0 8px 22px rgba(0,0,0,.28);
    }

        .k-animation-container .k-group .k-item > .k-link {
            color: inherit;
            opacity: 1;
            padding: 6px 8px; /* was ~8–10px */
            font-size: 13px;
            line-height: 1.25;
            min-height: 28px;
        }

/* Focus ring stays neat when items are smaller */
#menu .k-link:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: var(--menu-radius);
}

/* ===== Ultra-compact menu density (paste AFTER your current styles) ===== */
:root {
    --menu-pad-y: 3px; /* was 4 */
    --menu-pad-x: 8px; /* was 10 */
    --menu-gap-x: 4px; /* was 6 */
    --menu-gap-y: 3px; /* was 4 */
    --menu-radius: 6px; /* was 8 */
    --menu-font-size: 12.5px; /* was 13 */
    --menu-icon-size: 14px; /* was 16 */
    --menu-line-height: 1.15; /* was 1.2 */
}

/* Use flex + gap for tighter, even spacing (works with wrapping) */
#menu.k-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--menu-gap-y) var(--menu-gap-x);
    white-space: normal;
    overflow: visible;
}

/* Remove old margins now that gap controls spacing */
#menu > .k-item {
    margin: 0 !important;
}

#menu .k-item > .k-link {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* was 6–8 */
    padding: var(--menu-pad-y) var(--menu-pad-x);
    border-radius: var(--menu-radius);
    font-size: var(--menu-font-size);
    line-height: var(--menu-line-height);
    min-height: 28px; /* compact but still clickable */
}

#menu .k-image, #menu .k-icon {
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    margin-right: 3px; /* was 4–6 */
    opacity: .9;
}

/* Submenu panel tighter too */
.k-animation-container .k-group {
    margin-top: 3px; /* was 6/4 */
    min-width: 176px; /* was 190–220 */
    border-radius: 8px; /* was 10–12 */
    padding: 3px; /* was 4–6 */
    box-shadow: 0 6px 18px rgba(0,0,0,.26);
}

    .k-animation-container .k-group .k-item > .k-link {
        color: #1f2937; /* darker text for better contrast */
        opacity: 1;
        font-weight: 600; /* optional — makes submenu text slightly bolder like categories */
        padding: 6px 8px; /* preserve existing spacing */
        font-size: 13px;
        line-height: 1.25;
        min-height: 28px;
    }

/* Focus ring still clean on smaller pills */
#menu .k-link:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: var(--menu-radius);
}

/* Optional: make the whole rail a touch tighter vertically */
.menu-rail {
    padding: 4px 6px;
}


/* Container that centers the secondary menu */
.menu-center {
    display: flex;
    justify-content: center; /* center horizontally */
    width: 100%;
    box-sizing: border-box;
    /* allow the centered menu to wrap naturally within this centered area */
}

    /* Keep #menu itself using its existing flex-wrapping layout */
    .menu-center > #menu.k-menu {
        display: inline-flex; /* shrink to content width so justify-content:center is effective */
        flex-wrap: wrap;
        gap: var(--menu-gap-y, 4px) var(--menu-gap-x, 6px);
        white-space: normal;
        /* keep overflow visible for submenus */
        overflow: visible;
        /* ensure it doesn't stretch to full width */
        max-width: 100%;
    }

/* Small responsive tweak: on very narrow screens make the menu full width */
@media (max-width: 520px) {
    .menu-center > #menu.k-menu {
        display: flex; /* reflow to full-width row(s) */
        width: 100%;
        justify-content: center;
    }
}

/* Emphasize main system modules in the top selector without setting colors */
/*#topMenu .k-item.main-module > .k-link {
    font-weight: 700;*/ /* bolder text */
    /*transform: translateY(-1px) scale(1.03);
    transition: transform 150ms ease, box-shadow 180ms ease;
    border-radius: 2px;
    border: 1px solid currentColor;*/ /* uses current color, no explicit colors */
    /*box-shadow: 0 6px 18px currentColor;*/ /* subtle glow that follows currentColor */
/*}*/

    /* Slightly stronger effect on hover/focus for affordance */
    /*#topMenu .k-item.main-module > .k-link:hover,
    #topMenu .k-item.main-module > .k-link:focus-visible {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 10px 28px currentColor;
        outline: none;*/ /* keep the focus ring if needed; keyboard focus still visible via :focus-visible rules elsewhere */
    /*}*/

/* Optional: very small badge feel using a subtle outline via currentColor on focused/selected state */
/*#topMenu .k-item.main-module.k-state-active > .k-link,
#topMenu .k-item.main-module.top-selected > .k-link {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 22px currentColor;
}*/