/* ListView FillContainer — viewport-locked shell; TopMenu in flow above .page (flex column). */

.clubivate-app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 100vw;
    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 > .page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

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

/* Viewport-locked list pages: constrain width; wide tables scroll inside listview-table-scroll. */
.clubivate-app-shell > .page:not(.clubivate-page-scrollable) {
    overflow-x: hidden;
}

.clubivate-app-shell > .page:not(.clubivate-page-scrollable) .clubivate-page-content-fill {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page > main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.clubivate-page-content-fill {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Page chrome above the list stays fixed size; list host absorbs remaining height. */
.clubivate-page-content-fill > *:not(.listview-page-host):not(.of-crud-list-surface) {
    flex-shrink: 0;
}

.clubivate-page-content-fill .listview-page-host {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

/* DefinitionDriven CrudListSurface wraps listview-page-host in a section — flex-fill the section. */
.clubivate-page-content-fill > .of-crud-list-surface {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.of-crud-list-surface > .listview-page-host {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Edition sales: filters/tabs above list; inner listview-page-host flex-fills this shell. */
.clubivate-page-content-fill .edition-sales-page-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.listview-page-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

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

/* Non-list pages: allow scrolling in the content area below the header.
   Club hierarchy and signup wizard are tall/wide workspace pages — not ListView fill hosts. */
.clubivate-app-shell > .page.clubivate-page-scrollable {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.clubivate-app-shell > .page.clubivate-page-scrollable > main,
.clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill {
    overflow-x: hidden;
    overflow-y: visible;
    flex: none;
    min-height: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Scrollable pages: direct children must shrink to viewport — never flex-shrink: 0 + intrinsic min-width. */
.clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill > * {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile: fit viewport width — no horizontal scroll or clipped cards/lists. */
@media (max-width: 767.98px) {
    .clubivate-app-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .clubivate-app-shell > .page.clubivate-page-scrollable {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .clubivate-app-shell > .page.clubivate-page-scrollable > main,
    .clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill {
        overflow-x: hidden;
    }

    /* px-4 + inner container padding is too wide on narrow phones */
    .clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Desktop: keep scrollable pages at viewport width; wide tables scroll inside .table-responsive. */
@media (min-width: 768px) {
    .clubivate-app-shell > .page.clubivate-page-scrollable > main,
    .clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    .clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .clubivate-app-shell > .page.clubivate-page-scrollable .clubivate-page-content-fill .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }
}