shopadmin/ShopAdmin/Components/Pages/NavShelf.razor.css

/* --- 1. The Flyout Side Panel --- */
.nav-shelf-panel {
    position: fixed;
    top: var(--header-height);
    right: -300px;
    width: 300px;
    height: calc(100vh - var(--header-height));
    background-color: var(--shelf-bg);
    border-left: 1px solid rgba(144, 224, 239, 0.15);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    /* MODIFIED: Reduce padding-bottom so items don't clip raw against the bottom line window frame */
    padding: 2rem 1.5rem 1rem 1.5rem;
    box-sizing: border-box;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
}

    .nav-shelf-panel.shelf-open {
        right: 0; /* Animate into viewport */
    }

/* --- 2. The Floating Mechanical Grip Handle --- */
.shelf-grip {
    position: fixed;
    top: calc(var(--header-height) + 24px);
    right: 0;
    width: 44px;
    height: 44px;
    background-color: var(--shelf-bg);
    border: 1px solid var(--border-mid-opacity);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--payoff-color);
    cursor: pointer;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

    /* Moves out dynamically alongside the shelf edge when open */
    .shelf-grip.grip-open {
        right: 300px;
        background-color: var(--shelf-bg);
        border-color: var(--border-low-opacity);
    }

    .shelf-grip:hover {
        background-color: #112930;
        color: var(--text-white);
    }

.grip-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3. Panel Internal Layout & Links --- */
.shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(144, 224, 239, 0.1);
    flex-shrink: 0; /* CRITICAL: Prevents the header text from squishing up on small screens */
}

    .shelf-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-white);
        margin: 0;
    }

.environment-badge {
    font-size: 0.65rem;
    font-family: monospace;
    font-weight: bold;
    padding: 2px 6px;
    background: rgba(0, 150, 199, 0.15);
    border: 1px solid rgba(0, 150, 199, 0.4);
    color: var(--payoff-color);
    border-radius: 4px;
}

.shelf-navigation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* NEW RULES: Absorb all available viewport height and isolate scrolling bounds */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Optional: Adds smooth mobile elastic touch responses on iOS devices */
    -webkit-overflow-scrolling: touch;
    /* Clean up spacing so bottom-most links have breathing room when fully scrolled down */
    padding-bottom: 2rem;
}

/* Deep selection matching Blazor's active class matching system */
::deep .shelf-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    ::deep .shelf-link:hover {
        background-color: rgba(0, 150, 199, 0.08);
        color: var(--text-white);
    }

    ::deep .shelf-link.active {
        background-color: var(--brand-blue);
        color: var(--text-white);
        font-weight: 600;
    }

.link-icon {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.icon-warn {
    color: var(--payoff-color);
}

.shelf-divider {
    height: 1px;
    background: rgba(144, 224, 239, 0.1);
    margin: 1rem 0;
}

/* --- 4. Content Blur/Backdrop Overlay --- */
.shelf-backdrop {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--header-height));
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(0px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

    .shelf-backdrop.backdrop-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        backdrop-filter: blur(3px);
    }