/* ============================================================
   Sticky Sidebar Nav — Coverage + D2U
   
   Plain CSS, no compiler. Targets both .svip-coverage and .svip-d2u
   - Desktop: nav-container sticks inside full-height aside
   - Mobile: IntersectionObserver toggles fixed positioning
   ============================================================ */

/* ============================================================
   GLOBAL — overflow fix for sticky
   ============================================================ */
.svip-coverage,
.svip-coverage > section,
.svip-coverage > section > .container,
.svip-coverage .check-status-container,
.svip-d2u,
.svip-d2u > section,
.svip-d2u > section > .container,
.svip-d2u .check-status-container {
    overflow: visible !important;
}

/* ============================================================
   DESKTOP (>= 768px) — sticky nav inside full-height aside
   ============================================================ */
/* Desktop sticky — entire aside sticks (nav + sidebar wells).
   align-self: flex-start prevents the aside from stretching to row height,
   while sticky range spans the full row (content column) height. */
@media (min-width: 768px) {
    .svip-coverage .left-sidebar,
    .svip-d2u .left-sidebar {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
    }
}

/* Hide toggle button on desktop */
@media (min-width: 768px) {
    .svip-coverage .mobile-nav-toggle,
    .svip-d2u .mobile-nav-toggle {
        display: none !important;
    }
}

/* ============================================================
   MOBILE (< 768px) — fixed toggle bar via JS class
   ============================================================ */
@media (max-width: 767.98px) {

    /* --- Force sidebar visible --- */
    .svip-coverage .left-sidebar,
    .svip-d2u .left-sidebar {
        display: block !important;
    }

        .svip-coverage .left-sidebar .sidebar-nav-container,
        .svip-coverage .left-sidebar .coverage-sidebar,
        .svip-d2u .left-sidebar .sidebar-nav-container,
        .svip-d2u .left-sidebar .coverage-sidebar {
            display: block !important;
        }

        /* --- Default state: nav sits in flow --- */
        .svip-coverage .left-sidebar .sidebar-nav-container,
        .svip-d2u .left-sidebar .sidebar-nav-container {
            position: static;
            top: auto;
            z-index: 1020;
            background: rgba(255, 255, 255, 0.92);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border-radius: 0;
            margin-left: -0.75rem;
            margin-right: -0.75rem;
            padding: 0;
        }

    /* --- JS adds this class when sentinel leaves viewport --- */
    .svip-coverage .sidebar-nav-container.is-fixed,
    .svip-d2u .sidebar-nav-container.is-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Spacer inserted by JS — prevents content jump when switching to fixed */
    .svip-coverage .mobile-nav-spacer,
    .svip-d2u .mobile-nav-spacer {
        display: none;
    }

        .svip-coverage .mobile-nav-spacer.is-active,
        .svip-d2u .mobile-nav-spacer.is-active {
            display: block;
        }

    /* --- Section progress bar --- */
    .svip-coverage .mobile-nav-progress,
    .svip-d2u .mobile-nav-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: var(--bs-primary, #0d6efd);
        border-radius: 0 2px 2px 0;
        transition: width 60ms linear;
        pointer-events: none;
    }

    /* --- Hide the "Explore Coverage" / "Health Hub" header block --- */
    .svip-coverage .sidebar-nav-container > .p-3.border-bottom,
    .svip-d2u .sidebar-nav-container > .p-3.border-bottom {
        display: none !important;
    }

    /* --- Toggle button --- */
    .svip-coverage .mobile-nav-toggle,
    .svip-d2u .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1.2rem 1rem;
        border: none;
        background: transparent;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--bs-body-color, #212529);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .svip-coverage .mobile-nav-toggle:focus-visible,
        .svip-d2u .mobile-nav-toggle:focus-visible {
            outline: 2px solid var(--bs-primary, #0d6efd);
            outline-offset: -2px;
        }

        /* Chevron icon */
        .svip-coverage .mobile-nav-toggle .nav-toggle-icon,
        .svip-d2u .mobile-nav-toggle .nav-toggle-icon {
            display: inline-flex;
            width: 20px;
            height: 20px;
            transition: transform 0.25s ease;
        }

        .svip-coverage .mobile-nav-toggle[aria-expanded="true"] .nav-toggle-icon,
        .svip-d2u .mobile-nav-toggle[aria-expanded="true"] .nav-toggle-icon {
            transform: rotate(180deg);
        }

    /* --- Dropdown list floats over content --- */
    .svip-coverage .sidebar-nav.nav.flex-column,
    .svip-d2u .sidebar-nav.nav.flex-column {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column !important;
        padding: 0.25rem 0.5rem 0.5rem;
        gap: 0;
        max-height: 60vh;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 8px 8px;
    }

    /* Hide nav list when closed */
    .svip-coverage .sidebar-nav.mobile-nav-closed,
    .svip-d2u .sidebar-nav.mobile-nav-closed {
        display: none !important;
    }

    /* --- Link styling inside dropdown --- */
    .svip-coverage .sidebar-nav .sidebar-link,
    .svip-d2u .sidebar-nav .sidebar-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        color: var(--bs-body-color, #212529);
    }

        .svip-coverage .sidebar-nav .sidebar-link:hover,
        .svip-coverage .sidebar-nav .sidebar-link:focus,
        .svip-d2u .sidebar-nav .sidebar-link:hover,
        .svip-d2u .sidebar-nav .sidebar-link:focus {
            background: rgba(0, 0, 0, 0.04);
        }

        .svip-coverage .sidebar-nav .sidebar-link.active,
        .svip-d2u .sidebar-nav .sidebar-link.active {
            background-color: var(--bs-primary, #0d6efd);
            color: #fff;
        }

    /* --- Loading placeholders --- */
    .svip-coverage .sidebar-nav .placeholder-glow .placeholder,
    .svip-d2u .sidebar-nav .placeholder-glow .placeholder {
        height: 38px !important;
        border-radius: 8px !important;
    }
}

/* ============================================================
   Dark mode support
   ============================================================ */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .svip-coverage .left-sidebar .sidebar-nav-container,
    [data-bs-theme="dark"] .svip-d2u .left-sidebar .sidebar-nav-container {
        background: rgba(33, 37, 41, 0.92);
    }

    [data-bs-theme="dark"] .svip-coverage .sidebar-nav-container.is-fixed,
    [data-bs-theme="dark"] .svip-d2u .sidebar-nav-container.is-fixed {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    [data-bs-theme="dark"] .svip-coverage .sidebar-nav.nav.flex-column,
    [data-bs-theme="dark"] .svip-d2u .sidebar-nav.nav.flex-column {
        background: rgba(33, 37, 41, 0.95);
    }

    [data-bs-theme="dark"] .svip-coverage .sidebar-nav .sidebar-link:hover,
    [data-bs-theme="dark"] .svip-coverage .sidebar-nav .sidebar-link:focus,
    [data-bs-theme="dark"] .svip-d2u .sidebar-nav .sidebar-link:hover,
    [data-bs-theme="dark"] .svip-d2u .sidebar-nav .sidebar-link:focus {
        background: rgba(255, 255, 255, 0.06);
    }
}