﻿/* ==========================================================================
   Glass UI — NavMenu (scoped by .glass-nav wrapper)
   ========================================================================== */

:root[data-ui="glass"] .glass-nav {
    position: relative;
    padding: 8px 6px;
    margin: 4px;
    border-radius: var(--radius-2);
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

    :root[data-ui="glass"] .glass-nav::before {
        content: "";
        position: absolute;
        inset: -1px;
        pointer-events: none;
        border-radius: var(--radius-2);
        background: radial-gradient(800px 240px at 20% 0%, var(--nav-sheen), transparent 60%);
        opacity: 0.75;
    }

    :root[data-ui="glass"] .glass-nav .mud-navmenu {
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        padding: 6px 4px;
    }

    :root[data-ui="glass"] .glass-nav .mud-divider {
        margin: 10px 8px !important;
        opacity: 1 !important;
        border-color: transparent !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent, var(--nav-border), transparent) !important;
    }

    :root[data-ui="glass"] .glass-nav .mud-nav-link {
        position: relative;
        border-radius: var(--radius-1) !important;
        margin: 4px 6px !important;
        padding: 9px 8px 9px 6px !important;
        min-height: 42px;
        color: var(--nav-item) !important;
        transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
    }

        :root[data-ui="glass"] .glass-nav .mud-nav-link .mud-nav-link-text {
            font-weight: 750 !important;
            letter-spacing: -0.01em !important;
        }

        :root[data-ui="glass"] .glass-nav .mud-nav-link .mud-icon-root,
        :root[data-ui="glass"] .glass-nav .mud-nav-link svg,
        :root[data-ui="glass"] .glass-nav .mud-nav-link .material-symbols-outlined,
        :root[data-ui="glass"] .glass-nav .mud-nav-link .fas {
            color: var(--nav-item-muted) !important;
            transition: color 120ms ease, transform 120ms ease;
        }

        :root[data-ui="glass"] .glass-nav .mud-nav-link:hover {
            background: var(--nav-hover-bg) !important;
            box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08) !important;
            transform: translateY(-1px);
        }

        :root[data-ui="glass"] .glass-nav .mud-nav-link.mud-nav-link-active {
            background: var(--nav-active-bg) !important;
            border: 1px solid var(--nav-active-border) !important;
            box-shadow: 0 18px 50px color-mix(in srgb, var(--accent-primary), transparent 86%) !important;
        }

            :root[data-ui="glass"] .glass-nav .mud-nav-link.mud-nav-link-active::before {
                content: "";
                position: absolute;
                left: 2px;
                top: 8px;
                bottom: 8px;
                width: 3px;
                border-radius: 999px;
                background: linear-gradient(180deg, var(--accent-primary), var(--accent-info));
                box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-primary), transparent 82%);
            }

            :root[data-ui="glass"] .glass-nav .mud-nav-link.mud-nav-link-active .mud-nav-link-text {
                font-weight: 850 !important;
            }

    :root[data-ui="glass"] .glass-nav .mud-nav-group {
        margin: 6px 6px !important;
        border-radius: 16px !important;
        overflow: hidden;
        border: 1px solid var(--nav-border);
        background: var(--nav-group-bg);
    }

        :root[data-ui="glass"] .glass-nav .mud-nav-group > .mud-nav-link {
            margin: 0 !important;
            border-radius: 0 !important;
            padding: 10px 10px !important;
            background: transparent !important;
            box-shadow: none !important;
            transform: none !important;
        }

            :root[data-ui="glass"] .glass-nav .mud-nav-group > .mud-nav-link:hover {
                background: var(--nav-hover-bg) !important;
            }

        :root[data-ui="glass"] .glass-nav .mud-nav-group .mud-navmenu {
            padding: 6px 0 8px 0 !important;
            background: var(--nav-group-inner);
            border-top: 1px solid var(--nav-border);
            max-height: none;
            overflow: visible;
        }

            :root[data-ui="glass"] .glass-nav .mud-nav-group .mud-navmenu .mud-nav-link {
                margin: 4px 6px !important;
                padding-left: 4px !important;
            }

.glass-nav, .glass-nav .mud-navmenu {
    overflow-x: hidden;
}

:root[data-ui="glass"] .glass-nav-bottom {
    margin-top: 8px;
    padding-top: 8px;
}
