/*
|--------------------------------------------------------------------------
| Fundamentos — layout de página
|--------------------------------------------------------------------------
|
| Estrutura padrão de qualquer tela:
|
|   .ds.ds-page
|     .ds-page-header   (voltar, título, descrição, ações, abas)
|     conteúdo          (painéis, tabela, formulário)
|
| Breakpoints oficiais (iguais aos do Bootstrap, para conviver com o grid):
|   sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
|
*/

.ds-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-section-gap);

    width: 100%;
    max-width: var(--ds-page-max-width);
    margin: 0 auto;
    padding: var(--ds-space-2) 0 var(--ds-space-10);
}

/*
|--------------------------------------------------------------------------
| Cabeçalho da página
|--------------------------------------------------------------------------
*/

.ds-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-space-3) var(--ds-space-6);
}

.ds-page-header__main {
    min-width: 0;
}

.ds-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);

    margin-bottom: var(--ds-space-1-5);

    font: var(--ds-text-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.ds-page-header__back {
    color: var(--ds-color-text-secondary);
}

.ds-page-header__back:hover {
    color: var(--ds-color-text);
}

.ds-page-header__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-1-5) var(--ds-space-3);

    font: var(--ds-text-page-title);
    letter-spacing: var(--ds-text-page-title-tracking);
}

.ds-page-header__description {
    max-width: 72ch;
    margin-top: var(--ds-space-1);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);
}

.ds-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}

/* Abas logo abaixo do cabeçalho: sub-navegação da tela */
.ds-page-header + .ds-tabs {
    margin-top: calc(var(--ds-section-gap) * -0.5);
}

/*
|--------------------------------------------------------------------------
| Primitivas de composição
|--------------------------------------------------------------------------
*/

/* Pilha vertical */
.ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.ds-stack--sm { gap: var(--ds-space-2); }
.ds-stack--lg { gap: var(--ds-section-gap); }

/* Itens em linha que quebram */
.ds-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-cluster--end {
    justify-content: flex-end;
}

.ds-cluster--between {
    justify-content: space-between;
}

/* Conteúdo principal + coluna lateral (detalhes) */
.ds-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--ds-section-gap);
}

.ds-split > * {
    display: flex;
    flex-direction: column;
    gap: var(--ds-section-gap);

    min-width: 0;
}

/* Divisória */
.ds-divider {
    height: 0;
    margin: 0;

    border: 0;
    border-top: var(--ds-border-width) solid var(--ds-color-border);

    opacity: 1;
}

@media (max-width: 1199.98px) {
    .ds-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ds-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ds-page-header__actions > * {
        flex: 1 1 auto;
    }
}