/* ---- Base / spacing for fixed-top navbar ---- */
:root {
    --nav-h: 56px;
}
/* match your navbar height */
html {
    scroll-padding-top: var(--nav-h);
}

body {
    margin: 0;
    padding-top: var(--nav-h);
}




/* Base sidebar look */
.sidebar {
    width: 260px;
    min-height: calc(100vh - 56px); /* adjust if your header height differs */
    background: var(--bs-body-bg);
}

/* Mobile off-canvas behavior */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 56px; /* same as header height */
        left: 0;
        height: calc(100vh - 56px);
        z-index: 1045; /* above content, below modal */
        transform: translateX(-100%);
        transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 1040;
        display: none;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }
}












.main-content {
    padding: 1rem;
}

/* ≥ md: show sidebar, push content */
@media (min-width: 768px) {
    .sidebar {
        display: block !important;
    }

    .main-content {
        margin-left: 250px;
    }
}

/* < md: hide sidebar (use offcanvas) */
@media (max-width: 767.98px) {
    .sidebar {
        display: none;
    }
}

/* ---- Mobile-friendly buttons ---- */
.btn-touch {
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    border-radius: .9rem;
    min-height: 44px;
}

/* Keep navbar elevated */
.navbar.fixed-top {
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* iOS safe area padding */
@supports(padding:max(0px)) {
    body {
        padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
    }
}