/*
|--------------------------------------------------------------------------
| Estrutura da página (casco): menu lateral, barra do topo, rodapé
|--------------------------------------------------------------------------
|
| Vale para TODAS as telas (migradas ou não): é o que o layout
| Template_padrao_novo desenha em volta do conteúdo.
|
|   nav.ds.ds-sidebar        marca + menu (módulo › seção › página)
|   main.ds-main
|     header.ds.ds-topbar    breadcrumb | ambiente, links, preferências, conta
|     .ds-main__conteudo     a tela
|     footer.ds.ds-footer
|
| O menu é sempre escuro e expandido (no celular vira barra com botão).
| A página atual tem aria-current="page": texto branco + traço da marca
| sobre a linha-guia. É o único ponto de cor do menu.
|
*/

/*
|--------------------------------------------------------------------------
| Menu lateral
|--------------------------------------------------------------------------
*/

.ds-sidebar.navbar-vertical {
    padding: 0;

    border: 0;

    background: var(--ds-color-nav-bg);

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

    scrollbar-color: rgba(255, 255, 255, .16) transparent;
    scrollbar-width: thin;
}

.ds-sidebar > .container-fluid {
    align-items: stretch;

    padding: 0;
}

.ds-sidebar__marca {
    display: flex;
    align-items: center;

    min-height: var(--ds-header-height);
    /* esquerda = padding do menu (--ds-space-3) + padding do link (10px): a flor alinha com os ícones dos módulos */
    padding: 0 var(--ds-space-5) 0 calc(var(--ds-space-3) + 10px);

    text-decoration: none;
}

.ds-sidebar__marca:focus-visible {
    outline: 2px solid var(--ds-pink-400);
    outline-offset: -4px;
}

.ds-sidebar .ds-sidebar__menu {
    padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-8);

    transition: padding var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds-sidebar__toggle {
    display: none;
}

/* Alça no rebordo da barra lateral: recolhe/expande (só desktop; no celular já tem o botão do topo) */
.ds-sidebar__alca {
    display: none;
}

@media (min-width: 992px) {
    .ds-sidebar__alca {
        /*
         * Fixa na tela (não dentro da barra lateral): a barra e o topo do
         * conteúdo já disputam z-index entre si (1000 x 1020, do tema
         * antigo) e cada um cria seu próprio contexto de empilhamento —
         * de dentro da barra, a alça nunca venceria essa disputa, não
         * importa o z-index que ela tivesse. Por isso "left" repete os
         * dois números do tema (16.25rem/4.125rem) em vez de "right"
         * relativo à barra, e anda junto na mesma transição.
         */
        position: fixed;
        top: 20px;
        left: calc(16.25rem - 13px);
        z-index: var(--ds-z-popover);

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 26px;
        height: 26px;

        border: 2px solid var(--ds-color-nav-bg);
        border-radius: var(--ds-radius-full);

        background: var(--ds-color-brand);

        color: var(--ds-graphite-0);

        font-size: 13px;

        box-shadow: var(--ds-shadow-floating);

        transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
            left var(--ds-duration-normal) var(--ds-ease-standard);
    }

    [data-sidebar-behaviour="condensed"] .ds-sidebar__alca {
        left: calc(4.125rem - 13px);
    }

    .ds-sidebar__alca:hover {
        background: var(--ds-pink-600);
    }

    .ds-sidebar__alca:focus-visible {
        outline: 2px solid var(--ds-pink-400);
        outline-offset: 2px;
    }

    .ds-sidebar__alca i {
        transition: transform var(--ds-duration-normal) var(--ds-ease-standard);
    }

    [data-sidebar-behaviour="condensed"] .ds-sidebar__alca i {
        transform: rotate(180deg);
    }
}

/*
|--------------------------------------------------------------------------
| Menu recolhido (desktop)
|--------------------------------------------------------------------------
|
| html[data-sidebar-behaviour="condensed"]: o tema antigo já resolve a
| largura, a posição (fora do fluxo) e a margem do <main> — regras dele,
| por seletor genérico (.navbar-vertical, ~main). Aqui só o que é do
| Design System: esconder o texto no nível do módulo, centralizar o ícone
| e mostrar as seções/páginas num flyout ao passar o mouse ou focar.
|
*/

@media (min-width: 992px) {
    /*
     * A largura da barra (nav) e a margem do conteúdo (main) são do tema
     * antigo (mesma propriedade nos dois estados: max-width / margin-left).
     * Só falta o "transition" — os valores continuam por conta dele.
     */
    .ds-sidebar.navbar-vertical,
    .ds-main {
        transition: max-width var(--ds-duration-normal) var(--ds-ease-standard),
            margin-left var(--ds-duration-normal) var(--ds-ease-standard);
    }

    .ds-sidebar__marca {
        justify-content: center;
        padding: 0 var(--ds-space-2);

        transition: padding var(--ds-duration-normal) var(--ds-ease-standard);
    }

    /*
     * Nome da marca e texto do módulo: encolhem e somem juntos com a barra
     * (max-width + opacity animam; "position: absolute" não). O nome some
     * da tela, mas o link continua com aria-label — sempre lido.
     */
    .ds-brand__nome,
    .ds-nav__module > .ds-nav__link .ds-nav__text,
    .ds-nav__module > .ds-nav__link .ds-nav__caret {
        max-width: 220px;

        opacity: 1;

        transition: max-width var(--ds-duration-normal) var(--ds-ease-standard),
            opacity var(--ds-duration-fast) var(--ds-ease-standard);
    }

    /*
     * "nowrap"/"overflow" só aqui: expandido, o nome do módulo pode quebrar
     * em 2 linhas (Planejamento Estratégico, Campanhas de Premiação...).
     */
    [data-sidebar-behaviour="condensed"] .ds-brand__nome,
    [data-sidebar-behaviour="condensed"] .ds-nav__module > .ds-nav__link .ds-nav__text,
    [data-sidebar-behaviour="condensed"] .ds-nav__module > .ds-nav__link .ds-nav__caret {
        overflow: hidden;

        max-width: 0;

        white-space: nowrap;
        opacity: 0;
    }

    [data-sidebar-behaviour="condensed"] .ds-sidebar__menu {
        padding: var(--ds-space-2);
    }

    [data-sidebar-behaviour="condensed"] .ds-nav__module {
        position: relative;
    }

    [data-sidebar-behaviour="condensed"] .ds-nav__module > .ds-nav__link {
        justify-content: center;

        padding: var(--ds-space-2);
    }

    /* Flyout: sobre o mouse ou com foco dentro, as seções do módulo aparecem soltas ao lado do ícone */
    [data-sidebar-behaviour="condensed"] .ds-nav__module > .collapse {
        display: none;
    }

    [data-sidebar-behaviour="condensed"] .ds-nav__module:hover > .collapse,
    [data-sidebar-behaviour="condensed"] .ds-nav__module:focus-within > .collapse {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: var(--ds-z-popover);

        display: block;
        width: 220px;
        margin-left: var(--ds-space-2);
        padding: var(--ds-space-2);

        border: var(--ds-border-width) solid var(--ds-graphite-700);
        border-radius: var(--ds-radius-lg);

        background: var(--ds-color-nav-bg);

        box-shadow: var(--ds-shadow-floating);
    }

    [data-sidebar-behaviour="condensed"] .ds-nav__module:hover > .ds-nav__link,
    [data-sidebar-behaviour="condensed"] .ds-nav__module:focus-within > .ds-nav__link {
        background: var(--ds-color-nav-hover);
    }
}

/* Lista de módulos */

.ds-nav,
.ds-nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.ds-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;

    width: 100%;
}

.ds-nav__link {
    position: relative;

    display: flex;
    align-items: center;
    gap: var(--ds-space-3);

    width: 100%;
    min-height: 36px;
    padding: var(--ds-space-2) 10px;

    border-radius: var(--ds-radius-md);

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

    font: 500 14px/20px var(--ds-font);
    text-decoration: none;

    transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
        color var(--ds-duration-fast) var(--ds-ease-standard),
        padding var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds .ds-nav__link:hover,
.ds-nav__link:hover {
    background: var(--ds-color-nav-hover);

    color: var(--ds-color-nav-text-active);

    text-decoration: none;
}

.ds-nav__link:focus-visible {
    outline: 2px solid var(--ds-pink-400);
    outline-offset: -2px;
}

.ds-nav__icon {
    flex: 0 0 auto;

    font-size: 18px;
}

.ds-nav__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-nav__caret {
    flex: 0 0 auto;

    font-size: 12px;

    opacity: .6;

    transition: transform var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-nav__link[aria-expanded="true"] > .ds-nav__caret {
    transform: rotate(180deg);
}

/* Módulo aberto: nome em branco; se contém a página atual, o ícone ganha a marca */
.ds-nav__link--module[aria-expanded="true"] {
    color: var(--ds-color-nav-text-active);
}

.ds-nav__link--module.is-open > .ds-nav__icon {
    color: var(--ds-color-nav-indicator);
}

/* Seções (Cadastros, Lançamentos…): alinhadas ao texto do módulo */
.ds-nav__sections {
    padding: 2px 0 var(--ds-space-2);
}

.ds-nav__link--section {
    min-height: 32px;
    padding: 6px 10px 6px 40px;

    color: var(--ds-graphite-400);

    font: 500 13px/18px var(--ds-font);
}

.ds-nav__link--section[aria-expanded="true"] {
    color: var(--ds-graphite-200);
}

/* Páginas: sobre uma linha-guia vertical */
.ds-nav__items {
    position: relative;

    padding: 2px 0 var(--ds-space-1);
}

.ds-nav__items::before {
    content: "";

    position: absolute;
    top: 4px;
    bottom: 8px;
    left: 45px;

    width: 1px;

    background: rgba(255, 255, 255, .1);
}

.ds-nav__link--item {
    min-height: 32px;
    padding: 6px 10px 6px 56px;

    font: 400 13px/18px var(--ds-font);
}

/* Página atual (servidor: aria-current; clique anterior: .active) */
.ds-nav__link--item[aria-current="page"],
.ds-nav__link--item.active {
    background: rgba(255, 255, 255, .07);

    color: var(--ds-color-nav-text-active);

    font-weight: 500;
}

.ds-nav__link--item[aria-current="page"]::before,
.ds-nav__link--item.active::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 44px;

    width: 3px;
    height: 16px;

    border-radius: 2px;

    background: var(--ds-color-nav-indicator);

    transform: translateY(-50%);
}

/* Página ainda sem tela */
.ds-nav__link.is-disabled {
    color: var(--ds-graphite-500);

    cursor: not-allowed;
}

.ds .ds-nav__link.is-disabled:hover {
    background: transparent;

    color: var(--ds-graphite-500);
}

.ds-nav__soon {
    flex: 0 0 auto;

    padding: 0 6px;

    border: 1px solid var(--ds-graphite-700);
    border-radius: var(--ds-radius-full);

    color: var(--ds-graphite-400);

    font: 500 11px/16px var(--ds-font);
}

/* Celular e tablet: sem recolher (o menu já vira barra); esconde o botão da barra do topo */
@media (max-width: 991.98px) {
    .ds-topbar__recolher {
        display: none;
    }
}

/* Celular e tablet: barra no topo com botão que abre o menu */
@media (max-width: 991.98px) {
    .ds-sidebar.navbar-vertical {
        position: sticky;
        top: 0;
        /* acima do .ds-topbar (também sticky top:0): sem isso os dois brigam pelo topo ao rolar */
        z-index: var(--ds-z-drawer);
    }

    .ds-sidebar > .container-fluid {
        flex-wrap: wrap;
        align-items: center;
    }

    .ds-sidebar__marca {
        min-height: 56px;
        padding: 0 var(--ds-space-4);
    }

    .ds-sidebar__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        margin-right: var(--ds-space-2);
        margin-left: auto;

        border: 0;
        border-radius: var(--ds-radius-md);

        background: transparent;

        color: var(--ds-color-nav-text-active);

        font-size: 22px;
    }

    .ds-sidebar__toggle:hover {
        background: var(--ds-color-nav-hover);
    }

    .ds-sidebar__toggle:focus-visible {
        outline: 2px solid var(--ds-pink-400);
    }

    /*
     * Painel cheio, por cima do conteúdo (não em fluxo): sem isso, ao abrir
     * o menu e rolar a página, o topo fixo do conteúdo (.ds-topbar, também
     * sticky) soe por cima do menu aberto no meio da rolagem.
     */
    .ds-sidebar__menu {
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--ds-z-drawer);

        flex-basis: auto;

        max-height: none;
        overflow-y: auto;

        background: var(--ds-color-nav-bg);
    }

    .ds-sidebar__menu:not(.show) {
        display: none;
    }

    /* Com o menu aberto, só ele rola: sem isso o fundo (conteúdo) rola junto e some atrás do menu */
    body.ds-menu-aberto {
        overflow: hidden;
    }
}

/*
|--------------------------------------------------------------------------
| Área principal e barra do topo
|--------------------------------------------------------------------------
*/

.ds-main {
    background: var(--ds-color-bg);
}

/* O tema pintava uma faixa de fundo atrás do conteúdo */
.ds-main::before {
    display: none;
}

.ds-main__conteudo:focus {
    outline: none;
}

.ds-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ds-z-sticky);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);

    min-height: var(--ds-header-height);
    margin-bottom: var(--ds-space-6);
    padding: 0 var(--ds-page-gutter);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);

    background: var(--ds-color-surface);
}

.ds-topbar__crumbs {
    min-width: 0;
}

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

    margin-left: auto;
}

.ds-topbar__sep {
    width: 1px;
    height: 24px;
    margin: 0 var(--ds-space-2);

    background: var(--ds-color-border);
}

/* Ambiente (só na Home): o próprio status abre o detalhe */
.ds-topbar__env {
    margin-right: var(--ds-space-2);

    border: 0;

    cursor: pointer;
}

.ds-topbar__env-dados {
    margin: 0;
    padding: 0 var(--ds-space-2) var(--ds-space-2);
}

/* Conta: avatar + nome */
.ds-topbar__conta {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);

    height: 40px;
    padding: 0 var(--ds-space-2) 0 var(--ds-space-1);

    border: 0;
    border-radius: var(--ds-radius-full);

    background: transparent;

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

    font: var(--ds-text-label);

    cursor: pointer;
}

.ds-topbar__conta:hover,
.ds-topbar__conta[aria-expanded="true"] {
    background: var(--ds-color-surface-hover);
}

.ds-topbar__conta:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 2px;
}

.ds-topbar__conta .ph-caret-down {
    color: var(--ds-color-text-muted);

    font-size: 12px;
}

.ds-topbar__menu-conta {
    min-width: 240px;
}

.ds-topbar__perfil {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);

    padding: var(--ds-space-2);
}

.ds-topbar__perfil .ds-avatar {
    width: 36px;
    height: 36px;

    font-size: 14px;
}

.ds-topbar__perfil-nome {
    margin: 0;

    font: var(--ds-text-heading);
}

.ds-topbar__perfil-papel {
    margin: 0;

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

    font: var(--ds-text-caption);
}

.ds-menu__externo {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .ds-topbar {
        margin-bottom: var(--ds-space-4);
    }

    .ds-topbar__crumbs {
        display: none;
    }

    .ds-topbar__conta-nome {
        display: none;
    }
}

/* Preferências (painel lateral) */
.ds-preferencia {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);

    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
}

.ds-preferencia .ds-segmented {
    align-self: flex-start;
}

/*
|--------------------------------------------------------------------------
| Rodapé, carregando e atalho de teclado
|--------------------------------------------------------------------------
*/

.ds-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ds-space-2);

    margin-top: auto;
    padding: var(--ds-space-6) var(--ds-page-gutter);

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

    font: var(--ds-text-caption);
}

/* mostrarSpinner() / esconderSpinner(): display controlado pelo script */
.ds-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-toast);

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);

    background: var(--ds-color-backdrop);

    color: var(--ds-graphite-0);

    font: 500 14px/20px var(--ds-font);
}

.ds-loading-overlay p {
    margin: 0;
}

.ds-loading-overlay .ds-spinner {
    border-color: rgba(255, 255, 255, .3);
    border-top-color: var(--ds-graphite-0);
}

.ds-skip-link {
    position: absolute;
    top: var(--ds-space-3);
    left: -9999px;
    z-index: var(--ds-z-toast);

    padding: var(--ds-space-2) var(--ds-space-3);

    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);

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

    font: var(--ds-text-label);

    box-shadow: var(--ds-shadow-floating);
}

.ds-skip-link:focus {
    left: var(--ds-space-3);
}

/* Overlay ligado por classe (.show) em vez de style.display */
.ds-loading-overlay--toggle {
    display: none;
}

.ds-loading-overlay--toggle.show {
    display: flex;
}