        </div> <!-- Closes .main-content-wrapper from header.php -->
        <!-- Footer -->
        <!-- Bootstrap JS Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Custom JS for sidebar toggle, etc. (if needed on specific pages) -->
        <script>
document.addEventListener('DOMContentLoaded', function() {
    const sidebarToggle = document.getElementById('sidebarToggle');
    const appSidebar = document.getElementById('appSidebar'); 
    const mainContentWrapper = document.getElementById('mainContentWrapper');

    // Check if sidebar elements exist on the current page
    if (sidebarToggle && appSidebar && mainContentWrapper) {
        console.log("Sidebar elements found. Initializing toggle logic.");

        // Function to set initial state (HIDE sidebar on load always)
        function setInitialSidebarState() {
            appSidebar.classList.remove('sidebar-open');
            mainContentWrapper.classList.remove('sidebar-open-margin');
            appSidebar.style.display = "none"; // ensure hidden
            console.log("Sidebar hidden on page load.");
        }

        // Set initial state on load
        setInitialSidebarState();

        // Sidebar toggle functionality on button click
        sidebarToggle.addEventListener('click', function() {
            console.log("Sidebar toggle button clicked.");
            appSidebar.classList.toggle('sidebar-open');
            mainContentWrapper.classList.toggle('sidebar-open-margin');

            if (appSidebar.classList.contains('sidebar-open')) {
                console.log("Sidebar is now OPEN.");
                appSidebar.style.display = "block";
            } else {
                console.log("Sidebar is now CLOSED.");
                appSidebar.style.display = "none";
            }
        });
    } else {
        console.log("Sidebar elements not found on this page. Skipping toggle logic initialization.");
    }
});

// Custom alert function to replace window.alert
function alert(message) {
    const alertBox = document.createElement('div');
    alertBox.className = 'alert alert-info alert-dismissible fade show fixed-top mx-auto mt-3 w-75 rounded-pill text-center';
    alertBox.style.zIndex = '9999';
    alertBox.setAttribute('role', 'alert');
    alertBox.innerHTML = `
        <strong>Info:</strong> ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    document.body.appendChild(alertBox);
    setTimeout(() => {
        bootstrap.Alert.getInstance(alertBox)?.close();
    }, 5000); // Auto-close after 5 seconds
}
</script>

    </body>
</html>