/* ================================================================
   sidebar.css  –  GateAccessPro layout & sidebar styles
   Place this file in:  wwwroot/css/sidebar.css
   ================================================================ */
/* ── Print: hide sidebar & navbar toggle ──────────────────────── */
@media print {
    /* Force entire page to a clean block flow —
       position:sticky and position:fixed confuse mobile print engines
       and result in blank pages */
    html, body {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .sidebar,
    #menu-toggle-top,
    nav.navbar{
        display: none !important;
    }

    #wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }
    /* Main content fills full printable width */
    .flex-grow-1 {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Bootstrap container reset */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Prevent elements being clipped at page breaks */
    * {
        overflow: visible !important;
        float: none !important;
        position: static !important;
    }
   
}

body {
    overflow-x: hidden;
}

/* ── Sidebar base ─────────────────────────────────────────────── */
.sidebar {
    width: 260px;
    height: 100vh; /* always exactly the viewport height */
    position: sticky; /* sticks to top as page scrolls */
    top: 0;
    background-color: #212529;
    transition: all 0.3s ease;
    flex-shrink: 0;
    overflow-y: auto; /* sidebar scrolls independently */
    overflow-x: hidden;
}

    .sidebar .nav-link {
        color: #adb5bd;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #fff;
            background-color: #495057;
            border-radius: 5px;
        }

/* ── Submenu ──────────────────────────────────────────────────── */
.submenu {
    padding-left: 1rem;
}

.sidebar .submenu .nav-link {
    font-size: 0.9rem;
    color: #ced4da;
}

    .sidebar .submenu .nav-link:hover {
        background-color: rgba(255, 193, 7, 0.25);
        color: #fff;
    }

    .sidebar .submenu .nav-link.active {
        background-color: rgba(255, 193, 7, 0.5);
        color: #212529;
        border-radius: 5px;
    }

/* ── Wrapper & main content ───────────────────────────────────── */
#wrapper {
    display: flex !important;
    width: 100%;
    min-height: 100vh;
}

.flex-grow-1 {
    flex-grow: 1;
    min-width: 0; /* prevents flex child overflow */
}

/* ── DESKTOP (>=769px) ────────────────────────────────────────── */
@media (min-width: 769px) {

    /* Sidebar visible — push content right */
    #wrapper:not(.toggled) .sidebar {
        margin-left: 0;
    }

    /* Sidebar hidden — slide off-screen */
    #wrapper.toggled .sidebar {
        margin-left: -260px;
    }

    /* Navbar toggle only appears when sidebar is hidden */
    #menu-toggle-top {
        display: none;
    }

    #wrapper.toggled #menu-toggle-top {
        display: inline-block;
    }
}

/* ── MOBILE (<=768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Sidebar overlays content — does not shrink the page */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1050;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    /* Hidden state: slide off-screen to the left */
    #wrapper.toggled .sidebar {
        transform: translateX(-260px);
    }

    /* Dark overlay behind open sidebar.
       pointer-events: none ensures the overlay never blocks
       clicks on the navbar toggle button or page content.
       Tap-to-close is handled in JS on the sidebar element itself. */
    #wrapper:not(.toggled)::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
        pointer-events: none;
    }

    /* Navbar toggle always visible on mobile */
    #menu-toggle-top {
        display: inline-block !important;
    }
}