/* ======================================================================
   ATX Solutions - Desktop Layout
   Desktop layout utilities for sticky sidebar and independent scroll
   ====================================================================== */

@media (min-width: 768px) {
    /* Root layout row beneath the fixed top navbar */
    .layout-shell {
        height: calc(100vh - 56px);
    }

    /* Sidebar becomes independently scrollable */
    .layout-sidebar {
        height: calc(100vh - 56px);
        position: sticky;
        top: 56px;
        overflow: hidden;
    }

    .layout-sidebar-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Header stays pinned at the top of the sidebar */
    .layout-sidebar-header {
        flex: 0 0 auto;
        background: #fff;
        /* ensures header stays above scroller when overlapping */
        z-index: 1;
        border-bottom: 1px solid rgba(0, 0, 0, 0.075);
        padding-bottom: 0.5rem;
    }

    /* Nav area scrolls if it exceeds viewport */
    .layout-sidebar-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Main content area scrolls independently from sidebar */
    .layout-content {
        height: calc(100vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ==================================================================
       Desktop sidebar collapse/expand
       ================================================================== */

    #desktopSidebar,
    #desktopMainContent {
        transition: width 160ms ease, flex-basis 160ms ease;
    }

    body.desktop-sidebar-collapsed #desktopSidebar {
        width: 48px !important;
        flex: 0 0 48px !important;
        border-right: 0 !important;
        overflow: hidden;
    }

    body.desktop-sidebar-collapsed #desktopSidebar .layout-sidebar-inner {
        padding: 0.5rem !important;
    }

    body.desktop-sidebar-collapsed #desktopSidebar .layout-sidebar-header {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        justify-content: flex-end;
    }

    body.desktop-sidebar-collapsed #desktopSidebar .layout-sidebar-header h6 {
        display: none;
    }

    body.desktop-sidebar-collapsed #desktopSidebar .layout-sidebar-header .btn-group {
        display: none;
    }

    body.desktop-sidebar-collapsed #desktopSidebar .layout-sidebar-nav {
        display: none;
    }

    body.desktop-sidebar-collapsed #desktopMainContent {
        width: calc(100% - 48px) !important;
        flex: 0 0 calc(100% - 48px) !important;
        max-width: calc(100% - 48px) !important;
    }

    /* ==================================================================
       Desktop top menu (navbar) responsiveness
       ================================================================== */

    /* Prevent wide desktop menus from overflowing/clipping; allow horizontal scroll. */
    #mainNavbar > .navbar-nav.me-auto {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #mainNavbar > .navbar-nav.me-auto > .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Make large dropdowns usable on smaller desktop heights. */
    #mainNavbar .dropdown-menu {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}