/* ==========================================================================
   Oss.Menu.Blazor — BEM CSS
   Uses --tsd-menu-* variables from oss-menu-variables.css
   ========================================================================== */

/* ---------- Vertical sidebar ---------- */

.oss-menu--vertical {
    flex-shrink: 0;
    background-color: var(--tsd-menu-sidebar-bg, #484D4B);
    transition: width var(--tsd-menu-transition-duration, 0.25s) var(--tsd-menu-transition-easing, ease-in-out);
}

.oss-menu__header {
    min-height: var(--top-row-height);
    max-height: var(--top-row-height);
    height: 3rem;
    background-color: var(--tsd-menu-header-bg, #252827);
    color: var(--tsd-menu-header-text, #d7d7d7);
    -webkit-backdrop-filter: var(--tsd-menu-surface-backdrop, none);
    backdrop-filter: var(--tsd-menu-surface-backdrop, none);
}

.oss-menu__header .btn {
    color: var(--tsd-menu-header-btn-text, #d7d7d7);
}

.oss-menu__nav {
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    background-color: var(--tsd-menu-sidebar-nav-bg, #2a2e33);
}

.oss-menu__nav .offcanvas-body,
.oss-menu__nav nav {
    min-width: 0;
}

.oss-menu__nav nav {
    gap: var(--tsd-menu-item-gap, 0.25rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.oss-menu .navbar-toggler {
    background-color: var(--tsd-menu-navbar-toggler-bg, rgba(255, 255, 255, 0.1));
}

.oss-menu--vertical .navbar-brand {
    font-size: 1.1rem;
}

/* Sidebar: desktop responsive */
@media (min-width: 768px) {
    .oss-menu--vertical {
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .oss-menu--vertical:not(.oss-menu--compressed) {
        width: var(--tsd-menu-sidebar-width, 250px);
    }

    .oss-menu--compressed {
        width: var(--tsd-menu-sidebar-compressed-width, 64px);
        overflow-x: clip;
    }

    .oss-menu--compressed .oss-menu__header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
    }

    .oss-menu--compressed .oss-menu__nav nav {
        margin-top: 0.5rem;
    }

    .oss-menu--compressed .oss-menu__item {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }

    .oss-menu--compressed .oss-menu__item-link {
        justify-content: center;
        align-items: center;
        width: calc(var(--tsd-menu-sidebar-compressed-width, 64px) - 1rem);
        height: calc(var(--tsd-menu-sidebar-compressed-width, 64px) - 1rem);
        padding: 0 !important;
        min-height: unset;
    }
}

/* Collapse mode (non-offcanvas): constrain to sidebar width */
.oss-menu--vertical .navbar-collapse {
    min-width: 0;
    overflow: hidden;
}

.oss-menu--vertical .navbar-collapse > div {
    min-width: 0;
    width: 100%;
}

/* Mobile: override compressed mode — show full layout */
@media (max-width: 767.98px) {
    .oss-menu--vertical {
        width: auto !important;
    }

    .oss-menu--compressed .oss-menu__item-link {
        justify-content: flex-start !important;
        padding: .5rem 1rem !important;
    }
}

/* ---------- Horizontal navbar ---------- */

.oss-menu--horizontal {
    background-color: var(--tsd-menu-horizontal-bg, var(--tsd-menu-sidebar-nav-bg, #2a2e33));
    -webkit-backdrop-filter: var(--tsd-menu-surface-backdrop, none);
    backdrop-filter: var(--tsd-menu-surface-backdrop, none);
    z-index: 1080;
}

/* When offcanvas is open, disable backdrop-filter on parent —
   backdrop-filter creates a containing block that traps position:fixed children */
.oss-menu--horizontal:has(.offcanvas-start.show),
.oss-menu--horizontal:has(.offcanvas-start.showing) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.oss-menu--horizontal .nav-link {
    color: var(--tsd-menu-sidebar-text, #d7d7d7);
}

/* ---------- Item container ---------- */

.oss-menu__item {
    font-size: var(--tsd-menu-font-size, 0.875rem);
    padding-bottom: var(--tsd-menu-item-gap, 0.25rem);
    position: relative;
    min-width: 0;
}

/* Empty groups hidden via CSS */
.oss-menu__item:has(> .oss-menu__submenu:empty) {
    display: none;
}

/* ---------- Item link (shared for all types) ---------- */

.oss-menu__item-link {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-height: var(--tsd-menu-item-height, 2.75rem);
    min-width: 0;
    padding: .5rem 1rem !important;
    border-radius: var(--tsd-menu-item-radius, 6px);
    transition: background-color var(--tsd-menu-transition-duration, 0.25s) var(--tsd-menu-transition-easing, ease-in-out),
                color var(--tsd-menu-transition-duration, 0.25s) var(--tsd-menu-transition-easing, ease-in-out);
    overflow: hidden;
    text-decoration: none;
    color: var(--tsd-menu-item-text, #c0c4c8);
    cursor: pointer;
    background-color: var(--tsd-menu-item-bg, transparent);
    border: var(--tsd-menu-item-border, none);
    -webkit-backdrop-filter: var(--tsd-menu-item-backdrop, none);
    backdrop-filter: var(--tsd-menu-item-backdrop, none);
}

.oss-menu__item-link:hover {
    background-color: var(--tsd-menu-item-hover-bg, rgba(255, 255, 255, 0.1));
}

.oss-menu__item-link.active {
    background-color: var(--tsd-menu-item-active-bg, rgba(255, 255, 255, 0.25));
    color: var(--tsd-menu-item-active-text, #ffffff) !important;
    border-left: var(--tsd-menu-active-indicator-width, 3px) solid var(--tsd-menu-active-indicator-color, #ffffff);
}

.oss-menu__item-link--expanded,
.oss-menu__item-link.show {
    background-color: var(--tsd-menu-item-show-bg, rgba(255, 255, 255, 0.25));
    color: var(--tsd-menu-item-show-text, #ffffff) !important;
}

/* ---------- Icon & text ---------- */

.oss-menu__item-icon {
    text-align: center;
    width: 1.25em;
    flex-shrink: 0;
}

.oss-menu__item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.oss-menu__item-text > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Chevron (accordion toggle) ---------- */

.oss-menu__chevron {
    transition: transform var(--tsd-menu-transition-duration, 0.25s) var(--tsd-menu-transition-easing, ease-in-out);
    flex-shrink: 0;
}

.oss-menu__chevron--expanded {
    transform: rotate(180deg);
}

/* ---------- Submenu (inline accordion / horizontal dropdown) ---------- */

.oss-menu__submenu {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    margin-bottom: .5rem;
}

/* Vertical accordion submenu: tree-line left border */
.oss-menu__submenu:not(.dropdown-menu) {
    margin-left: 0.5rem;
    margin-right: 0;
    margin-top: 0.25rem;
    border-left: 1px solid var(--tsd-menu-header-border, #3a3f44);
}

.oss-menu__submenu:not(.dropdown-menu) > .oss-menu__item {
    padding-bottom: 0.125rem;
    padding-right: 0;
}

.oss-menu__submenu:not(.dropdown-menu) .oss-menu__item-link {
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
}

/* Horizontal dropdown-menu: use theme colors */
.oss-menu__submenu.dropdown-menu {
    background-color: var(--tsd-menu-dropdown-bg, #37373d);
    border: var(--tsd-menu-dropdown-border, 1px solid #615f63);
    box-shadow: var(--tsd-menu-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.3));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    -webkit-backdrop-filter: var(--tsd-menu-surface-backdrop, none);
    backdrop-filter: var(--tsd-menu-surface-backdrop, none);
}

/* Lateral padding on dropdown items */
.oss-menu__submenu > .oss-menu__item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Submenu & flyout: hover/active overrides (distinct from top-level items) */
.oss-menu__submenu .oss-menu__item-link:hover,
.oss-menu__flyout .oss-menu__item-link:hover {
    background-color: var(--tsd-menu-submenu-hover-bg, rgba(255, 255, 255, 0.1));
    color: var(--tsd-menu-submenu-hover-text, #ffffff);
}

.oss-menu__submenu .oss-menu__item-link.active,
.oss-menu__flyout .oss-menu__item-link.active {
    background-color: var(--tsd-menu-submenu-active-bg, rgba(255, 255, 255, 0.25));
    color: var(--tsd-menu-submenu-active-text, #ffffff) !important;
}

/* ---------- Flyout (compressed sidebar popup) ---------- */

.oss-menu__flyout {
    background-color: var(--tsd-menu-dropdown-bg, #37373d);
    border: var(--tsd-menu-dropdown-border, 1px solid #615f63);
    box-shadow: var(--tsd-menu-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.3));
    border-radius: var(--tsd-menu-item-radius, 6px);
    min-width: 200px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
    -webkit-backdrop-filter: var(--tsd-menu-surface-backdrop, none);
    backdrop-filter: var(--tsd-menu-surface-backdrop, none);
}

.oss-menu__flyout .oss-menu__item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0;
}

.oss-menu__flyout .oss-menu__item-link {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem !important;
}

.oss-menu__flyout-header {
    padding: 0.25rem 1rem 0.5rem;
    color: var(--tsd-menu-item-icon-text, #8b929a);
    font-size: var(--tsd-menu-font-size, 0.875rem);
    font-weight: 600;
    border-bottom: 1px solid var(--tsd-menu-header-border, #3a3f44);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--tsd-menu-dropdown-bg, #37373d);
}

/* ---------- Separator ---------- */

.oss-menu__separator {
    margin: 0.25rem 1rem;
    border-color: var(--tsd-menu-header-border, #3a3f44);
    opacity: 0.5;
}

/* ---------- Section header ---------- */

.oss-menu__section-header {
    padding: 0.5rem 1rem 0.25rem;
    color: var(--tsd-menu-item-icon-text, #8b929a);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Mobile offcanvas drawer ---------- */

.oss-menu .offcanvas-start {
    background-color: var(--tsd-menu-sidebar-nav-bg, #2a2e33);
    color: var(--tsd-menu-sidebar-text, #d7d7d7);
}

.oss-menu .offcanvas-header {
    border-bottom: 1px solid var(--tsd-menu-header-border, #3a3f44);
    min-height: var(--top-row-height);
}

.oss-menu .offcanvas-title {
    font-weight: 600;
}

/* Mobile vertical nav inside horizontal offcanvas */
.oss-menu--horizontal .offcanvas-body > nav {
    gap: var(--tsd-menu-item-gap, 0.25rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Desktop: offcanvas fills sidebar height, no surface glass on vertical (items have their own) */
@media (min-width: 768px) {
    .oss-menu--vertical .offcanvas-md {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .oss-menu--vertical .offcanvas-md .offcanvas-body {
        flex-grow: 1;
    }
}

/* ---------- Search box ---------- */

.oss-menu__search-box {
    min-width: 0;
}

/* ---------- Breadcrumb (search results) ---------- */

.oss-menu__breadcrumb {
    font-size: 0.8em;
    opacity: 0.7;
    color: var(--tsd-menu-breadcrumb-color, inherit);
}

.oss-menu__breadcrumb a {
    margin: 0;
    color: inherit;
}