/* ================================================
   FINAL LAYOUT FIX - Authoritative Layout Structure
   ================================================ */

/* 1. Page Container - Side-by-Side Flex Layout */
.page {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* 2. Sidebar - Fixed Width, Full Height */
.navbar-vertical {
    width: 260px !important;
    /* Fixed width */
    min-width: 260px !important;
    max-width: 260px !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
    position: sticky !important;
    /* Stays visible while scrolling content */
    top: 0 !important;
    left: 0 !important;
    z-index: 1020 !important;
    /* Higher than header content */
    overflow-y: auto !important;
    margin: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. Page Wrapper - Takes Remaining Space */
.page-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    /* Prevents flex items from overflowing */
    margin-left: 0 !important;
    /* No margin needed, flex handles it */
    position: relative !important;
}

/* 4. Header - Inside Page Wrapper */
.exam-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1010 !important;
    /* Lower than sidebar menu, high enough for content */
    width: 100% !important;
    margin: 0 !important;
}

/* 5. Page Content */
.page-body {
    flex: 1 !important;
    padding: 1.5rem !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

.container-xl {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* 6. Tablet & Mobile Responsive (< 992px) */
@media (max-width: 991.98px) {
    .page {
        flex-direction: column !important;
        /* Stack vertically */
    }

    /* Fixed Header on Mobile */
    .exam-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Padding for page top so content doesn't hide behind fixed header */
    .page-wrapper {
        padding-top: 60px !important;
    }

    /* Sidebar Hidden by Default */
    .navbar-vertical {
        position: fixed !important;
        top: 0 !important;
        left: -270px !important;
        /* Hide off-screen */
        width: 260px !important;
        max-width: 260px !important;
        min-width: 260px !important;
        z-index: 1050 !important;
        /* Topmost */
        transition: left 0.3s ease-in-out !important;
        height: 100vh !important;
    }

    /* Show Sidebar Class */
    .navbar-vertical.show {
        left: 0 !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) !important;
    }

    /* Overlay when sidebar is open */
    .navbar-vertical.show+.page-wrapper::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    .mobile-menu-toggle {
        display: block !important;
    }
}

/* 7. Desktop (> 992px) */
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}