body {
    background-color: #f4f6f9;
}

.mobile-topbar {
    background-color: #1f2937;
}

/* Bootstrap's .offcanvas-lg forces background-color:transparent!important at
   the lg+ breakpoint (so the offcanvas can sit inline without an overlay
   look) - it beats a plain rule here, so this needs !important too or the
   sidebar goes transparent (showing the page background) on desktop. */
.sidebar {
    background-color: #1f2937 !important;
}

/* Below the lg breakpoint the sidebar is a true Bootstrap offcanvas (its own
   fixed/full-height styling applies). At lg+ it becomes a normal flex child
   sitting next to <main> - without this it would stretch to match main's
   height (flexbox default) and push the logout button off past the visible
   viewport on any page taller than one screen. Sticky + its own scroll keeps
   it pinned to the viewport and internally scrollable if it ever overflows. */
@media (min-width: 992px) {
    .sidebar.offcanvas-lg {
        width: 240px;
        flex-shrink: 0;
        position: sticky !important;
        top: 0;
        height: 100vh !important;
        overflow-y: auto;
    }
}

.sidebar .nav-link.active {
    background-color: #0d6efd;
}

/* A flex item's default min-width is `auto`, which lets a wide table inside
   it force the whole page to overflow horizontally even with a
   .table-responsive wrapper. This lets it shrink to the flex row instead. */
.main-content {
    min-width: 0;
}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f6f9;
    padding: 1rem;
}