.table-grid-page-shell {
    width: 100%;
    max-width: 1600px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    margin: 0 auto;
    padding: 0;
}

.table-grid-page-host {
    --table-grid-page-scroll-max: calc(100vh - 200px);
    padding: 0;
    overflow: visible;
    margin-top: 0;
    container-type: inline-size;
    container-name: table-grid-page;

    & > .row {
        min-height: 0;
    }

    & .page-header-section {
        padding: 20px 24px;
    }

    & .row.mt-0 {
        margin: 0;
        margin-top: 0 !important;
    }

    & [data-action-menu-layout] {
        display: contents;
    }

    & .filters-row {
        padding: 0;
        margin: 0 0 1rem 0;
        overflow: visible;

        > div {
            flex: 1;
            min-width: 0;
            align-items: center;
            gap: 1rem;
            row-gap: 1rem;
            overflow: visible;
        }

        .btn-group {
            position: static;
            overflow: visible;
        }

        .sliding-filter-label {
            display: none;
        }

        > div .sliding-filter-group {
            margin: 0;
        }
    }

    & .filters-row:has(+ .filters-secondary-row:has([data-action-menu])),
    & .filters-row:has(+ .filters-secondary-row:has(.pledges-filters-active-strip:not([hidden]))) {
        margin-bottom: 0.5rem;
    }

    & .filters-row-actions {
        display: none;
        margin-left: auto;
        flex: 0 0 auto;
        align-items: center;
    }

    & .filters-secondary-row {
        display: none;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin: 0 0 0.5rem;
        min-height: 0;
        overflow: visible;

        .pledges-filters-active-strip {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        .filters-secondary-row__actions {
            flex: 0 0 auto;
            align-items: center;
        }
    }

    & .filters-secondary-row:has([data-action-menu]) {
        min-height: 40px;
    }

    @media (min-width: 768px) {
        & .filters-row-actions,
        & .filters-secondary-row__actions {
            display: flex;
        }

        & .filters-secondary-row:has([data-action-menu]),
        & .filters-secondary-row:has(.pledges-filters-active-strip:not([hidden])) {
            display: flex;
        }
    }

    @media (max-width: 767.98px) {
        & .filters-secondary-row:has(.pledges-filters-active-strip:not([hidden])) {
            display: flex;
            min-height: 0;
            margin: 0 16px 0.5rem;
        }
    }

    & .table-card {
        width: 100%;
        padding: 1px;
        margin: 0;
        border: 1px solid var(--accent);
        border-radius: 10px;
        box-shadow: 0 2px 4px var(--shadow-light);
        overflow: visible;
    }

    & .table-card .table-scroll-wrapper {
        border-radius: 9px;
        overflow: auto;
        background: var(--field-bg);

        &:has(.data-grid-scroll-region) {
            overflow: hidden;

            @media (min-width: 769px) {
                min-height: var(--table-grid-page-scroll-max);
            }
        }
    }

    & .table-card.data-table-card {
        background: var(--field-bg);
    }

    & #managerContentCol {
        display: flex;
        flex-direction: column;

        > .table-card {
            flex: 0 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .table-scroll-wrapper {
            flex: 0 1 auto;
            min-height: 0;
        }

        .table-scroll-wrapper:has(.data-grid-scroll-region) {
            flex: 1 1 auto;

            @media (min-width: 769px) {
                min-height: var(--table-grid-page-scroll-max);
            }
        }
    }

    @media (min-width: 768px) {
        & .filters-row > div {
            gap: 1.5rem;
            row-gap: 1rem;
        }
    }
}

#managerSidebarCol {
    box-sizing: border-box;
}

:is(#managerSidebarCol.sidebar-collapsed ~ #managerContentCol, #sidebar-toggle:checked ~ #managerContentCol) {
    padding-left: 24px;

    .filters-row {
        padding-left: max(1.875rem, calc(12px + 36px + 0.625rem));
        padding-right: 30px;
    }

    .data-grid-detail-cell {
        width: 100%;
        max-width: 100%;
    }

    .data-grid-detail-row {
        width: 100%;
    }

    .table-scroll-wrapper {
        width: 100%;
    }

    .data-table-card {
        width: 100%;
    }
}

@media (min-width: 768px) {
    :is(#managerSidebarCol.sidebar-collapsed ~ #managerContentCol, #sidebar-toggle:checked ~ #managerContentCol) .filters-row {
        padding-left: max(1.875rem, calc(3rem + 36px + 0.625rem));
    }
}

#managerContentCol {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;

    .filters-row,
    .filters-secondary-row {
        flex-shrink: 0;
    }

    .data-table-card {
        container-type: inline-size;
        container-name: table-card;
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .table-scroll-wrapper {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

.page-header-section {
    background: transparent;
    border-radius: 0;
    padding: 20px 24px;
    box-shadow: none;
    border-bottom: none;
    margin-bottom: 0;
}

.page-header-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    font-family: var(--font-sans);
    letter-spacing: -0.5px;
}

.page-header-info {
    display: flex;
    align-items: center;
}

.total-outstanding {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-sans);
}

.table-card:not(.data-table-card) {
    background: transparent;
    border-radius: 0;
    padding: 1rem;
    box-shadow: none;
}

.table-scroll-wrapper {
    position: relative;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    padding-left: 0;
}

.table-scroll-wrapper:not(:has(.data-grid-scroll-region)) {
    > :first-child {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--field-bg);

        > * > * {
            background: var(--field-bg);
        }
    }
}

@media (min-width: 768px) {
    :is(body.manager-pledges-full-page, body.manager-members-full-page, body.manager-transactions-full-page, body.manager-member-profile-full-page) {
        background-image: none !important;
        background-color: color-mix(in srgb, var(--accent) 10%, var(--color-light) 90%);

        & #mgr_index_paging {
            margin-left: 0;
            margin-right: 0;
            padding-left: 3rem;
            padding-right: 3rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;

            & .main_start_no_bottom {
                padding-left: 0;
                padding-right: 0;
            }
        }
    }

    :is(body.manager-pledges-full-page, body.manager-members-full-page, body.manager-transactions-full-page) {
        & .manager-shell__main {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        & .manager-shell__main > .container-fluid,
        & > .container-fluid {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        & #mgr_index_paging {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        & .main_start_no_bottom {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        & .table-grid-page-shell {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        & .table-grid-page-host,
        & .pledges-content-container {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        & .table-grid-page-shell > .row,
        & .table-grid-page-host > .row {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
        }

        & #managerContentCol {
            height: 100%;
            min-height: 0;
            padding-bottom: 12px;
        }

        & #managerContentCol > .table-card,
        & #managerContentCol .data-table-card {
            flex: 1 1 auto;
            min-height: 0;
        }

        & #managerContentCol .table-scroll-wrapper,
        & #managerContentCol .table-scroll-wrapper:has(.data-grid-scroll-region) {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
        }

        & #managerSidebarCol {
            display: flex !important;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            padding-bottom: 12px;
            box-sizing: border-box;
        }

        & #managerSidebarCol > :is(.pledges-sidebar-stack, .members-sidebar-stack) {
            display: flex;
            flex-direction: column;
            flex: 0 1 auto;
            min-height: 0;
            max-height: 100%;
            overflow-y: auto;
            width: 100%;
        }

        & #managerSidebarCol > :is(.pledges-sidebar-stack, .members-sidebar-stack) > .sidebar-container {
            flex: 0 0 auto;
            height: auto;
            min-height: 0;
            max-height: min(-moz-fit-content, 100%);
            max-height: min(fit-content, 100%);
        }
    }
}