/* ============================================================
   layout.css — Estrutura de layout do site (core, sem tema)
   Define a grade .site-wrapper (topbar/sidebar-left/main/sidebar-right)
   configurável via site_settings (Layout tab do admin).

   REFATORADO: usa 3 data-attributes independentes no #siteWrapper —
     data-show-top="1|0"   data-show-left="1|0"   data-show-right="1|0"
   em vez de uma única string composta data-layout="top_left_main_right".
   Isso elimina o bug de combinações não mapeadas (ex: left_main_right).

   Arquitetura "app-shell": a página ocupa 100vh sem scroll global.
   Header/paginação/footer têm altura fixa; só o miolo (.site-main e
   sidebars) rola internamente. O CSS reage às 8 combinações possíveis
   de forma semântica — nenhuma string precisa ser mantida ou parseada.
   ============================================================ */

:root {
    --layout-gap: 1.5rem;
    --content-padding: 1.5rem;
    --sidebar-left-width: 260px;
    --sidebar-right-width: 260px;
    --topbar-height: 60px;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* tudo deve caber na viewport; não há rolagem global */
}

/* Header, paginação e footer são fixos em altura, fora do grid do site-wrapper */
.header-logo-area,
.pagination-area,
body > footer {
    flex: 0 0 auto;
}

/* .site-wrapper preenche todo o espaço restante */
.site-wrapper {
    flex: 1 1 auto;
    min-height: 0; /* essencial: sem isso o flex item não deixa o conteúdo interno rolar */
    display: grid;
    align-items: stretch;
    /*
       O mesmo espaçamento é usado nas bordas e entre as regiões.
       Assim as sidebars não ficam coladas à viewport e a distância
       horizontal entre regiões é igual à distância vertical.
    */
    gap: var(--layout-gap);
    padding: var(--layout-gap);
    /* Default: apenas main, sem sidebars nem topbar */
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "main";
}

/* ============================================================
   Visibilidade das regiões opcionais.
   Quando data-show-X é "0" (ou ausente), oculta o elemento E não
   aloca coluna/linha no grid — o main preenche todo o espaço.
   ============================================================ */

.site-wrapper:not([data-show-top="1"])   > .site-topbar       { display: none; }
.site-wrapper:not([data-show-left="1"])  > .site-sidebar-left  { display: none; }
.site-wrapper:not([data-show-right="1"]) > .site-sidebar-right { display: none; }

/* ============================================================
   8 combinações grid — do menos específico para o mais específico.
   Ordem importa: seletores compostos têm especificidade maior e
   devem vir depois dos simples para não causar conflitos.
   ============================================================ */

/* 1. Default (nenhum ativo) — já definido no .site-wrapper base acima */

/* 2. Apenas top */
.site-wrapper[data-show-top="1"] {
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "main";
}

/* 3. Apenas left */
.site-wrapper[data-show-left="1"] {
    grid-template-rows: 1fr;
    grid-template-columns: var(--sidebar-left-width) 1fr;
    grid-template-areas: "sidebar-left main";
}

/* 4. Apenas right */
.site-wrapper[data-show-right="1"] {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr var(--sidebar-right-width);
    grid-template-areas: "main sidebar-right";
}

/* 5. Left + right (sem top) — BUG CORRIGIDO: esse caso não existia antes */
.site-wrapper[data-show-left="1"][data-show-right="1"] {
    grid-template-rows: 1fr;
    grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
    grid-template-areas: "sidebar-left main sidebar-right";
}

/* 6. Top + left */
.site-wrapper[data-show-top="1"][data-show-left="1"] {
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-columns: var(--sidebar-left-width) 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar-left main";
}

/* 7. Top + right */
.site-wrapper[data-show-top="1"][data-show-right="1"] {
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-columns: 1fr var(--sidebar-right-width);
    grid-template-areas:
        "topbar topbar"
        "main sidebar-right";
}

/* 8. Top + left + right */
.site-wrapper[data-show-top="1"][data-show-left="1"][data-show-right="1"] {
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
    grid-template-areas:
        "topbar topbar topbar"
        "sidebar-left main sidebar-right";
}

/*
   No modo quadrado, o grid deve caber na menor dimensão disponível do painel.
   Assim os cards continuam 1:1 sem comprimir a última linha e sem criar
   rolagem interna.
*/
.site-wrapper[data-card-format="square"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
}

.site-wrapper[data-card-format="square"][data-show-top="1"] {
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

/* ---- Regiões ---- */

.site-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    padding: 0 var(--content-padding);
    gap: var(--layout-gap);
    overflow: hidden;
}

.site-sidebar-left {
    grid-area: sidebar-left;
    overflow: hidden;
    min-height: 0;
}

.site-sidebar-right {
    grid-area: sidebar-right;
    overflow: hidden;
    min-height: 0;
}

.site-main {
    grid-area: main;
    /*
       O grid de cards precisa ocupar toda a área entre as sidebars.
       O padding aqui criava um recuo extra em relação às bordas das
       sidebars; o espaçamento externo já é controlado pelo .site-wrapper.
    */
    padding: 0;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* ============================================================
   Colapso de sidebar (estreitar, não ocultar) — sistema independente
   da visibilidade. Mantém coexistência com layout-behavior.js.
   ============================================================ */

.site-wrapper[data-sidebar-left-collapsed="1"][data-show-left="1"] {
    grid-template-columns: 0 1fr;
}

.site-wrapper[data-sidebar-left-collapsed="1"][data-show-left="1"][data-show-right="1"] {
    grid-template-columns: 0 1fr var(--sidebar-right-width);
}

.site-wrapper[data-sidebar-left-collapsed="1"][data-show-left="1"] > .site-sidebar-left {
    overflow: hidden;
    width: 0;
}

/* ============================================================
   Responsivo: abaixo de 992px, sidebars empilham sobre o main.
   ============================================================ */

@media (max-width: 991.98px) {
    /* Com left (com ou sem right) */
    .site-wrapper[data-show-left="1"],
    .site-wrapper[data-show-top="1"][data-show-left="1"],
    .site-wrapper[data-show-left="1"][data-show-right="1"],
    .site-wrapper[data-show-top="1"][data-show-left="1"][data-show-right="1"] {
        grid-template-columns: 1fr;
    }

    .site-wrapper[data-show-left="1"] {
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar-left"
            "main";
    }

    .site-wrapper[data-show-top="1"][data-show-left="1"] {
        grid-template-rows: var(--topbar-height) auto 1fr;
        grid-template-areas:
            "topbar"
            "sidebar-left"
            "main";
    }

    .site-wrapper[data-show-left="1"][data-show-right="1"] {
        grid-template-columns: 1fr var(--sidebar-right-width);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar-left sidebar-left"
            "main sidebar-right";
    }

    .site-wrapper[data-show-top="1"][data-show-left="1"][data-show-right="1"] {
        grid-template-columns: 1fr var(--sidebar-right-width);
        grid-template-rows: var(--topbar-height) auto 1fr;
        grid-template-areas:
            "topbar topbar"
            "sidebar-left sidebar-left"
            "main sidebar-right";
    }

    .site-sidebar-left {
        max-height: 40vh;
    }
}

@media (max-width: 767.98px) {
    /* Com right — empilha abaixo do main */
    .site-wrapper[data-show-right="1"],
    .site-wrapper[data-show-top="1"][data-show-right="1"],
    .site-wrapper[data-show-left="1"][data-show-right="1"],
    .site-wrapper[data-show-top="1"][data-show-left="1"][data-show-right="1"] {
        grid-template-columns: 1fr;
    }

    .site-wrapper[data-show-right="1"] {
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "main"
            "sidebar-right";
    }

    .site-wrapper[data-show-top="1"][data-show-right="1"] {
        grid-template-rows: var(--topbar-height) 1fr auto;
        grid-template-areas:
            "topbar"
            "main"
            "sidebar-right";
    }

    .site-wrapper[data-show-left="1"][data-show-right="1"] {
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "sidebar-left"
            "main"
            "sidebar-right";
    }

    .site-wrapper[data-show-top="1"][data-show-left="1"][data-show-right="1"] {
        grid-template-rows: var(--topbar-height) auto 1fr auto;
        grid-template-areas:
            "topbar"
            "sidebar-left"
            "main"
            "sidebar-right";
    }

    .site-sidebar-right {
        max-height: 40vh;
    }
}