/* ==========================================================================
   Oss.Menu.Blazor — Glassmorphic Theme
   Active only when data-tsd-theme="glassmorphic" is set on <html> or <body>.
   No-op without the attribute. Loaded alongside oss-menu-variables.css.
   ========================================================================== */

[data-tsd-theme="glassmorphic"] {
    /* Sidebar: fully transparent — items float over the page background */
    --tsd-menu-sidebar-width: 280px;
    --tsd-menu-sidebar-compressed-width: 68px;
    --tsd-menu-sidebar-bg: transparent;
    --tsd-menu-sidebar-nav-bg: transparent;
    --tsd-menu-sidebar-text: rgba(255, 255, 255, 0.9);

    /* Header bar: subtle frosted glass */
    --tsd-menu-header-bg: rgba(255, 255, 255, 0.06);
    --tsd-menu-header-text: rgba(255, 255, 255, 0.95);
    --tsd-menu-header-border: rgba(255, 255, 255, 0.08);
    --tsd-menu-header-btn-text: rgba(255, 255, 255, 0.7);

    /* Horizontal navbar: frosted glass panel */
    --tsd-menu-horizontal-bg: rgba(255, 255, 255, 0.05);

    /* Items: individual floating glass cards */
    --tsd-menu-item-bg: rgba(255, 255, 255, 0.05);
    --tsd-menu-item-border: 1px solid rgba(255, 255, 255, 0.08);
    --tsd-menu-item-backdrop: blur(12px) saturate(150%);
    --tsd-menu-item-text: rgba(255, 255, 255, 0.85);
    --tsd-menu-item-icon-text: rgba(255, 255, 255, 0.45);
    --tsd-menu-item-hover-bg: rgba(255, 255, 255, 0.1);
    --tsd-menu-item-active-bg: rgba(var(--bs-primary-rgb, 124, 92, 252), 0.25);
    --tsd-menu-item-active-text: #ffffff;
    --tsd-menu-item-show-bg: rgba(255, 255, 255, 0.12);
    --tsd-menu-item-show-text: #ffffff;
    --tsd-menu-item-radius: 12px;
    --tsd-menu-item-height: 2.75rem;
    --tsd-menu-item-gap: 0.5rem;

    /* Active indicator: accent glow */
    --tsd-menu-active-indicator-width: 3px;
    --tsd-menu-active-indicator-color: var(--bs-primary, #7c5cfc);

    /* Surfaces: frosted glass blur for panels */
    --tsd-menu-surface-backdrop: blur(16px) saturate(180%);

    /* Dropdowns / flyouts: glass panels */
    --tsd-menu-dropdown-bg: rgba(30, 30, 40, 0.88);
    --tsd-menu-dropdown-border: 1px solid rgba(255, 255, 255, 0.15);
    --tsd-menu-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                                inset 0 0 0 0.5px rgba(255, 255, 255, 0.05);
    --tsd-menu-submenu-hover-bg: rgba(255, 255, 255, 0.08);
    --tsd-menu-submenu-hover-text: #ffffff;
    --tsd-menu-submenu-active-bg: rgba(var(--bs-primary-rgb, 124, 92, 252), 0.2);
    --tsd-menu-submenu-active-text: #ffffff;

    /* Navbar toggler */
    --tsd-menu-navbar-toggler-bg: rgba(255, 255, 255, 0.06);

    /* Transitions: elegant, slightly slower */
    --tsd-menu-transition-duration: 0.3s;
    --tsd-menu-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --tsd-menu-font-size: 0.875rem;
}

/* ---------- Light theme: white frosted glass on colorful gradient ---------- */

[data-tsd-theme="glassmorphic"][data-bs-theme="light"] {
    --tsd-menu-sidebar-bg: transparent;
    --tsd-menu-sidebar-nav-bg: transparent;
    --tsd-menu-sidebar-text: #1a1a2e;

    --tsd-menu-header-bg: rgba(255, 255, 255, 0.45);
    --tsd-menu-header-text: #1a1a2e;
    --tsd-menu-header-border: rgba(255, 255, 255, 0.35);
    --tsd-menu-header-btn-text: #1a1a2e;

    --tsd-menu-horizontal-bg: rgba(255, 255, 255, 0.35);

    --tsd-menu-item-bg: rgba(255, 255, 255, 0.35);
    --tsd-menu-item-border: 1px solid rgba(255, 255, 255, 0.45);
    --tsd-menu-item-text: #1a1a2e;
    --tsd-menu-item-icon-text: rgba(26, 26, 46, 0.5);
    --tsd-menu-item-hover-bg: rgba(255, 255, 255, 0.55);
    --tsd-menu-item-active-bg: rgba(var(--bs-primary-rgb, 124, 92, 252), 0.25);
    --tsd-menu-item-active-text: var(--bs-primary-text-emphasis, #4c1d95);
    --tsd-menu-item-show-bg: rgba(255, 255, 255, 0.5);
    --tsd-menu-item-show-text: #1a1a2e;

    --tsd-menu-active-indicator-color: var(--bs-primary, #7c5cfc);

    --tsd-menu-dropdown-bg: rgba(240, 240, 245, 0.88);
    --tsd-menu-dropdown-border: 1px solid rgba(255, 255, 255, 0.6);
    --tsd-menu-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                                inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
    --tsd-menu-submenu-hover-bg: rgba(255, 255, 255, 0.45);
    --tsd-menu-submenu-hover-text: #1a1a2e;
    --tsd-menu-submenu-active-bg: rgba(var(--bs-primary-rgb, 124, 92, 252), 0.18);
    --tsd-menu-submenu-active-text: var(--bs-primary-text-emphasis, #4c1d95);

    --tsd-menu-navbar-toggler-bg: rgba(0, 0, 0, 0.08);
}

/* ---------- Dropdown glass depth (gradient overlay for glass look) --------- */

[data-tsd-theme="glassmorphic"] .oss-menu__submenu.dropdown-menu,
[data-tsd-theme="glassmorphic"] .oss-menu__flyout {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 50%
    ) var(--tsd-menu-dropdown-bg);
}

[data-tsd-theme="glassmorphic"][data-bs-theme="light"] .oss-menu__submenu.dropdown-menu,
[data-tsd-theme="glassmorphic"][data-bs-theme="light"] .oss-menu__flyout {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        transparent 50%
    ) var(--tsd-menu-dropdown-bg);
}

/* ---------- Mobile offcanvas: own glass panel (not inherited from navbar) -- */

[data-tsd-theme="glassmorphic"] .oss-menu .offcanvas-start.showing,
[data-tsd-theme="glassmorphic"] .oss-menu .offcanvas-start.show:not(.hiding) {
    background-color: rgba(15, 12, 41, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3),
                inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

[data-tsd-theme="glassmorphic"][data-bs-theme="light"] .oss-menu .offcanvas-start.showing,
[data-tsd-theme="glassmorphic"][data-bs-theme="light"] .oss-menu .offcanvas-start.show:not(.hiding) {
    background-color: rgba(255, 255, 255, 0.45);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1),
                inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Page background utility — apply class "oss-glass-page" to <body> or
   your main layout container for the gradient + floating orb effect.
   ========================================================================== */

.oss-glass-page {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    min-height: 100vh;
}

.oss-glass-page::before,
.oss-glass-page::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.oss-glass-page::before {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 92, 252, 0.25) 0%, transparent 70%);
    top: -10%;
    left: -5%;
    animation: oss-glass-orb 20s ease-in-out infinite;
}

.oss-glass-page::after {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
    bottom: -15%;
    right: -10%;
    animation: oss-glass-orb 25s ease-in-out infinite reverse;
}

@keyframes oss-glass-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.05); }
    66%      { transform: translate(-20px, 20px) scale(0.95); }
}

/* Light theme: pastel gradient + softer orbs */
[data-bs-theme="light"] .oss-glass-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

[data-bs-theme="light"] .oss-glass-page::before {
    background: radial-gradient(circle, rgba(102, 126, 234, 0.35) 0%, transparent 70%);
}

[data-bs-theme="light"] .oss-glass-page::after {
    background: radial-gradient(circle, rgba(240, 147, 251, 0.3) 0%, transparent 70%);
}