/* App shell: TopMenu in flow above .clubivate-main-stage.
   Scrollport is .clubivate-main-stage (not .page). Inner page/main/article
   size to content so overflow is not clipped. Coupon/list cards must not
   create stacking contexts that sit above overlays. */

.clubivate-app-shell {
    --clubivate-topmenu-height: 0px;
    --clubivate-footer-height: 0px;
    --clubivate-modal-edge-gap: 10px;
    --clubivate-modal-viewport-height: calc(
        100dvh
        - var(--clubivate-topmenu-height, 0px)
        - var(--clubivate-footer-height, 0px)
        - (2 * var(--clubivate-modal-edge-gap, 10px))
    );
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
}

/* Content column below TopMenu — this is the vertical scrollport.
   Portaled modals/backdrop are viewport-fixed below TopMenu (ui-stack-layer.css). */
.clubivate-main-stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    --clubivate-modal-viewport-height: inherit;
}

/* Standard modal UX: page behind a portaled dialog does not scroll.
   Primary lock is the JS-toggled class on the shell. :has() is secondary
   once the overlay lives as a sibling of the scrollport. */
.clubivate-app-shell.clubivate-modal-open .clubivate-main-stage,
.clubivate-app-shell:has(.ui-backdrop.show):has(.ui-stack-layer--viewport-host) .clubivate-main-stage {
    overflow: hidden;
}

.clubivate-app-shell > nav.navbar,
.clubivate-app-shell > .navbar,
.clubivate-app-shell > nav.top-menu-navbar {
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
}

.clubivate-app-shell > .clubivate-app-shell-footer {
    flex-shrink: 0;
}

/* Page surfaces grow with content. Do not isolate — isolation traps
   position:fixed popups and lets later in-flow cards paint over them. */
.clubivate-page-surface {
    position: relative;
}

.clubivate-main-stage > .page {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    overflow: visible;
}

.page > main,
.clubivate-page-content-fill {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    overflow: visible;
}

/* Scrollable routes: beat Bootstrap flex-grow-1 / overflow-hidden !important
   so the stage — not a nested clipped flex child — is what scrolls. */
.clubivate-main-stage > .page.clubivate-page-scrollable,
.clubivate-main-stage > .page.clubivate-page-scrollable > main,
.clubivate-main-stage > .page.clubivate-page-scrollable .clubivate-page-content-fill {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.clubivate-main-stage > .page.clubivate-page-scrollable .clubivate-page-content-fill > * {
    flex: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* List-fill pages: only .listview-table-scroll scrolls (V+H). Stage stays locked. */
.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host),
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface),
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) {
    overflow-x: hidden;
    overflow-y: hidden;
}

.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) > .page.clubivate-page-scrollable,
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) > .page.clubivate-page-scrollable,
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) > .page.clubivate-page-scrollable,
.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) > .page.clubivate-page-scrollable > main,
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) > .page.clubivate-page-scrollable > main,
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) > .page.clubivate-page-scrollable > main,
.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) .clubivate-page-content-fill,
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) .clubivate-page-content-fill,
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) .clubivate-page-content-fill {
    flex: 1 1 0% !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) .clubivate-page-content-fill > .listview-page-host,
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) .clubivate-page-content-fill > .of-crud-list-surface,
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) .of-crud-list-surface > .listview-page-host,
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) .clubivate-page-content-fill > .edition-sales-page-host,
.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) .clubivate-page-content-fill .d-flex.flex-grow-1.min-h-0:has(.listview-page-host) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host) .clubivate-page-content-fill > *:not(.listview-page-host):not(.of-crud-list-surface):not(.edition-sales-page-host):not(:has(.listview-page-host)),
.clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface) .clubivate-page-content-fill > *:not(.of-crud-list-surface):not(.listview-page-host):not(:has(.listview-page-host)),
.clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) .clubivate-page-content-fill > *:not(.edition-sales-page-host):not(.listview-page-host):not(:has(.listview-page-host)) {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

.listview-page-host {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Modal body and host layout article (pb-4) supply space below pagination. */
.modal-body .listview-container.listview-fill-container .listview-chrome-bottom,
.clubivate-page-content-fill .listview-chrome-bottom {
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    .clubivate-app-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .clubivate-main-stage {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .clubivate-main-stage:has(.clubivate-page-content-fill .listview-page-host),
    .clubivate-main-stage:has(.clubivate-page-content-fill .of-crud-list-surface),
    .clubivate-main-stage:has(.clubivate-page-content-fill .edition-sales-page-host) {
        overflow-y: hidden;
    }

    .clubivate-main-stage > .page.clubivate-page-scrollable .clubivate-page-content-fill.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (min-width: 768px) {
    .clubivate-main-stage > .page.clubivate-page-scrollable:not(:has(.listview-page-host)):not(:has(.of-crud-list-surface)) .clubivate-page-content-fill .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }
}