/* ============================================================
   Dashboard scroll containment — load LAST
   Mobile: natural page scroll.
   Fold / tablet / desktop: page scrolls to footer; sidebar + content panels scroll internally.
   ============================================================ */

:root {
    --tophat-compact-nav-height: 5.65rem;
    --tophat-standard-nav-height: 4rem;
    --tophat-dashboard-panel-max-height: calc(100vh - var(--tophat-compact-nav-height) - 2rem);
    --tophat-dashboard-env-banner-buffer: 0.75rem;
}

/* Dashboard pages: navy canvas (no white band under fixed nav) */
html.tophat-dashboard-layout-active,
body.tophat-dashboard-layout-active,
html:has(.spa-page.active .dashboard-layout),
body:has(.spa-page.active .dashboard-layout) {
    background-color: #0A1628 !important;
}

body.tophat-dashboard-layout-active,
body:has(.spa-page.active .dashboard-layout) {
    padding-top: 0 !important;
    box-sizing: border-box;
}

body.tophat-dashboard-layout-active > main,
body:has(.spa-page.active .dashboard-layout) > main {
    background-color: #0A1628 !important;
    box-sizing: border-box;
}

/* Nav clearance lives on the navy section, not white body padding */
body.tophat-dashboard-layout-active .spa-page.active.page-section,
.spa-page.active.page-section:has(.dashboard-layout) {
    padding-top: var(--tophat-standard-nav-height) !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    background-color: #0A1628 !important;
    box-sizing: border-box;
}

body.tophat-compact-desktop-nav.tophat-dashboard-layout-active .spa-page.active.page-section,
body.tophat-compact-desktop-nav .spa-page.active.page-section:has(.dashboard-layout) {
    padding-top: var(--tophat-compact-nav-height) !important;
}

body.tophat-dashboard-layout-active .spa-page.active:has(.dashboard-layout),
.spa-page.active:has(.dashboard-layout) {
    height: auto;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}

.dashboard-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}

.dashboard-sidebar {
    position: static;
    flex-shrink: 0;
}

.dashboard-content {
    flex: 1;
    min-height: 0;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Fold / tablet / desktop: row layout, panel scroll, page scroll to footer
   ============================================================ */
@media (min-width: 1024px),
       (min-width: 660px),
       (orientation: portrait) and (min-width: 480px) and (min-height: 650px) and (max-width: 1023px) {
    html.tophat-dashboard-layout-active,
    html:has(.spa-page.active .dashboard-layout),
    body.tophat-dashboard-layout-active,
    body:has(.spa-page.active .dashboard-layout) {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.tophat-dashboard-layout-active > main,
    body:has(.spa-page.active .dashboard-layout) > main {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active:has(.dashboard-layout),
    .spa-page.active:has(.dashboard-layout) {
        --dashboard-viewport-inset-top: 0;
        --dashboard-viewport-inset-bottom: 1.5rem;
        height: auto !important;
        min-height: calc(100vh - var(--tophat-standard-nav-height));
        overflow: visible !important;
        padding-bottom: var(--dashboard-viewport-inset-bottom, 1.5rem) !important;
    }

    body.tophat-compact-desktop-nav.tophat-dashboard-layout-active .spa-page.active:has(.dashboard-layout),
    body.tophat-compact-desktop-nav .spa-page.active:has(.dashboard-layout) {
        min-height: calc(100vh - var(--tophat-compact-nav-height));
    }

    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout,
    .spa-page.active .dashboard-layout {
        flex-direction: row !important;
        align-items: flex-start !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 1rem !important;
        padding-bottom: 1.25rem;
        gap: 1.25rem !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .dashboard-sidebar,
    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .members-sidebar,
    .spa-page.active .dashboard-layout .dashboard-sidebar,
    .spa-page.active .dashboard-layout .members-sidebar {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        align-self: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
        max-height: var(--tophat-dashboard-panel-max-height) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .dashboard-sidebar > nav,
    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .members-sidebar > nav,
    .spa-page.active .dashboard-layout .dashboard-sidebar > nav,
    .spa-page.active .dashboard-layout .members-sidebar > nav {
        overflow-y: visible !important;
        max-height: none !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout > .dashboard-content,
    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout > .members-content.dashboard-content,
    body.tophat-dashboard-layout-active .spa-page.active .members-content.dashboard-content,
    .spa-page.active .dashboard-layout > .dashboard-content,
    .spa-page.active .dashboard-layout > .members-content.dashboard-content,
    .spa-page.active .members-content.dashboard-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
        max-height: var(--tophat-dashboard-panel-max-height) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-sizing: border-box;
    }
}

/* Full desktop (>1024px): slightly larger bottom inset */
@media (min-width: 1025px) {
    body.tophat-dashboard-layout-active .spa-page.active:has(.dashboard-layout),
    .spa-page.active:has(.dashboard-layout) {
        --dashboard-viewport-inset-bottom: 3rem;
        padding-bottom: 3rem !important;
    }
}

/* Full desktop + env/sync banner: clear fixed nav + banner on dashboard sidebar/content */
@media (min-width: 1024px) {
    body.tophat-env-banner-active.tophat-dashboard-layout-active,
    body.tophat-env-banner-active:has(.spa-page.active .dashboard-layout) {
        --tophat-dashboard-panel-max-height: calc(
            100vh - var(--tophat-standard-nav-height) - var(--tophat-env-banner-height) - 2.5rem
        );
    }

    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active.page-section:has(.dashboard-layout),
    body.tophat-env-banner-active .spa-page.active.page-section:has(.dashboard-layout) {
        padding-top: calc(
            var(--tophat-standard-nav-height) + var(--tophat-env-banner-height) + var(--tophat-dashboard-env-banner-buffer)
        ) !important;
    }

    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active .dashboard-layout,
    body.tophat-env-banner-active .spa-page.active .dashboard-layout {
        padding-top: 1.5rem !important;
    }

    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .dashboard-sidebar,
    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active .dashboard-layout .members-sidebar,
    body.tophat-env-banner-active .spa-page.active .dashboard-layout .dashboard-sidebar,
    body.tophat-env-banner-active .spa-page.active .dashboard-layout .members-sidebar {
        padding-top: 1.25rem !important;
    }

    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active .dashboard-layout > .dashboard-content,
    body.tophat-env-banner-active.tophat-dashboard-layout-active .spa-page.active .dashboard-layout > .members-content.dashboard-content,
    body.tophat-env-banner-active .spa-page.active .dashboard-layout > .dashboard-content,
    body.tophat-env-banner-active .spa-page.active .dashboard-layout > .members-content.dashboard-content {
        padding-top: 1.25rem !important;
    }
}

/* ============================================================
   Mobile (≤519px): sticky dashboard picker + natural page scroll
   ============================================================ */
@media (max-width: 519px) {
    :root {
        --dashboard-mobile-bar-height: 3.55rem;
        --dashboard-mobile-nav-offset: calc(4rem + env(safe-area-inset-top, 0px));
        --dashboard-mobile-sticky-height: var(--dashboard-mobile-bar-height);
    }

    body.tophat-dashboard-layout-active,
    body:has(.spa-page.active .dashboard-layout) {
        padding-top: var(--dashboard-mobile-nav-offset) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active.page-section:has(.dashboard-layout),
    .spa-page.active.page-section:has(.dashboard-layout) {
        padding-top: 0 !important;
    }

    html.tophat-dashboard-layout-active,
    html:has(.spa-page.active .dashboard-layout),
    body.tophat-dashboard-layout-active,
    body:has(.spa-page.active .dashboard-layout) {
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.tophat-dashboard-layout-active > main,
    body:has(.spa-page.active .dashboard-layout) > main {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active:has(.dashboard-layout),
    .spa-page.active:has(.dashboard-layout) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .spa-page.page-section:has(.dashboard-layout) {
        padding-bottom: 0.75rem !important;
    }

    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout,
    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout.max-w-6xl,
    body.tophat-dashboard-layout-active .spa-page.active .dashboard-layout.max-w-\[1200px\],
    .spa-page.active .dashboard-layout,
    .spa-page.active .dashboard-layout.max-w-6xl,
    .spa-page.active .dashboard-layout.max-w-\[1200px\] {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .dashboard-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #dashboard-mobile-nav.dashboard-mobile-sticky {
        position: fixed;
        top: var(--dashboard-mobile-nav-offset);
        left: 0;
        right: 0;
        width: 100%;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: var(--dashboard-mobile-bar-height);
        padding: 0.65rem 1rem;
        background: #0A1628;
        border-bottom: 1px solid rgba(201, 168, 76, 0.4);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
    }

    #dashboard-mobile-nav .dashboard-mobile-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #dashboard-mobile-nav.dashboard-mobile-sticky.hidden {
        display: none !important;
    }

    .dashboard-mobile-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.1rem;
        line-height: 1.2;
        color: #ffffff;
        margin: 0;
        min-width: 0;
    }

    body.dashboard-mobile-nav-active .spa-page.active:has(.dashboard-layout) {
        padding-top: 0 !important;
    }

    body.dashboard-mobile-nav-active .spa-page.active .dashboard-layout {
        padding-top: calc(var(--dashboard-mobile-bar-height) + 0.35rem);
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    body.dashboard-mobile-nav-active .spa-page.active .members-sidebar,
    body.dashboard-mobile-nav-active .spa-page.active .dashboard-sidebar,
    body.dashboard-mobile-nav-active .spa-page.active .dashboard-sidebar.members-sidebar {
        display: none !important;
    }

    body.dashboard-mobile-nav-active .dashboard-return-btn {
        display: none !important;
    }

    .dashboard-sidebar,
    .dashboard-layout .dashboard-sidebar,
    .dashboard-layout .dashboard-sidebar.members-sidebar,
    .spa-page.active .dashboard-layout .dashboard-sidebar,
    .spa-page.active .dashboard-layout .dashboard-sidebar.members-sidebar,
    .spa-page.active .members-sidebar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        width: 100% !important;
        margin-left: 0 !important;
        z-index: auto !important;
    }

    .dashboard-sidebar > nav,
    .members-sidebar > nav {
        overflow-y: visible !important;
        max-height: none !important;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-content,
    .dashboard-layout > .dashboard-content,
    .dashboard-layout > .members-content.dashboard-content,
    .spa-page.active .dashboard-layout > .dashboard-content,
    .spa-page.active .dashboard-layout > .members-content.dashboard-content,
    .spa-page.active .members-content {
        overflow-y: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-left: 0 !important;
        padding: 1rem !important;
        scroll-margin-top: 0;
    }

    body.dashboard-mobile-nav-active .spa-page.active .members-content,
    body.dashboard-mobile-nav-active .spa-page.active .dashboard-content {
        scroll-margin-top: calc(var(--dashboard-mobile-nav-offset) + var(--dashboard-mobile-bar-height) + 0.35rem);
    }

    #page-members-multitask-profile .members-content {
        scroll-margin-top: calc(var(--dashboard-mobile-nav-offset) + var(--dashboard-mobile-bar-height) + 0.35rem);
    }
}