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

@media (min-width: 768px) {
    html,
    body {
        height: 100%;
    }

    body.atx-auth-shell-active {
        overflow: hidden;
    }

    body.atx-auth-shell-active .atx-authenticated-root {
        height: 100%;
        overflow: hidden;
    }

    /* Root layout row beneath the fixed top navbar */
    .layout-shell {
        height: calc(100vh - var(--atx-fixed-header-height));
        overflow: hidden;
    }

    .atx-app-shell {
        height: calc(100vh - var(--atx-fixed-header-height));
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    /* Sidebar is separated from the page scroller */
    .layout-sidebar {
        height: 100%;
        position: sticky;
        top: var(--atx-fixed-header-height);
        overflow: hidden;
        box-shadow: 8px 0 18px rgba(15, 23, 42, 0.04);
        z-index: 2;
    }

    .atx-side-panel {
        flex: 0 0 auto;
        height: 100%;
    }

    .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 stays inside the sidebar instead of moving with content scroll */
    .layout-sidebar-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Main content area scrolls independently from sidebar */
    .layout-content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-width: 0;
    }

    .atx-main-panel {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
    }

    /* Data Management pages already sit below the fixed top navbar and workspace bar.
       Keep the document from becoming a second vertical scroller while preserving
       the single content/sidebar scroll areas inside the available viewport. */
    body.data-management-page {
        overflow: hidden;
    }

    body.data-management-page .layout-shell,
    body.data-management-page .layout-sidebar,
    body.data-management-page .layout-content {
        height: calc(100vh - var(--atx-fixed-header-height));
    }

    body.data-management-page .layout-sidebar {
        top: var(--atx-fixed-header-height);
    }

    /* ==================================================================
       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;
    }

    #mainNavbar .dropdown-menu {
        overflow: visible;
    }
}