/* Keep the resource area the same width before and after cards arrive. */
#dashboardSection:has(.resource-list-page.active) {
    width: 100%;
    min-width: 0;
}

.main-wrapper:has(.resource-list-page.active) {
    width: calc(100% - 300px);
}

/* Only the three resource pages with a visible spinner fill the free height. */
.main-wrapper:has(.resource-list-page.active .loading-state > .spinner) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.content-area:has(.resource-list-page.active .loading-state > .spinner),
.resource-list-page.active:has(.loading-state > .spinner) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.resource-list-page.active:has(.loading-state > .spinner) > .page-content-grid {
    flex: 1;
    align-items: stretch;
}

.resource-list-page.active:has(.loading-state > .spinner) > .page-content-grid > .main-column {
    display: flex;
    flex-direction: column;
}

.resource-list-page .shared-accounts-grid:has(> .loading-state > .spinner) {
    flex: 1;
}

.resource-list-page .shared-accounts-grid > .loading-state:has(> .spinner) {
    grid-column: 1 / -1;
    min-height: 200px;
    padding: 24px 0;
}

@media (max-width: 1200px) {
    .resource-list-page.active:has(.loading-state > .spinner) > .page-content-grid {
        grid-template-rows: 1fr auto;
    }
}

@media (max-width: 1024px) {
    .main-wrapper:has(.resource-list-page.active) {
        width: 100%;
    }
}