/*
 * Mega-menu da barra do admin (app/Views/partials/sidebar.php).
 *
 * A seção que tem subseções abre um painel com uma coluna por subseção:
 *   div.mega-dropdown-menu > div.row > div.menu-mega-coluna > h6.menu-mega-titulo + ul.nav-sm
 * `.menu-mega-2col` marca o painel com no máximo 2 colunas (mais estreito).
 *
 * As subseções fluem em colunas CSS (column-count), não em linhas de grid:
 * uma subseção curta (Vacinas, 1 item) não força a altura da linha inteira e
 * a última subseção não sobra sozinha numa 3ª linha. Resultado: o painel de
 * Configurações (9 subseções, ~45 itens) cabe sem rolagem interna a 1366x768.
 *
 * Só variáveis --vz-*: serve igual no claro e no escuro (data-layout-mode).
 * O título usa --vz-heading-color (e não um cinza "secundário"): é a cor que
 * o tema já ajusta nos dois modos e mantém contraste AA com texto pequeno.
 * Fundo e sombra do painel vêm do .menu-dropdown do app.css; aqui só tamanho,
 * rolagem e separadores.
 */

/* Título da coluna */
.menu-mega-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 1rem 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vz-heading-color);
}

.menu-mega-titulo i {
    font-size: 1rem;
}

/* A lista da coluna alinha com o título, sem o recuo do .nav-sm do tema. */
.mega-dropdown-menu .menu-mega-coluna .nav-sm {
    padding-left: 0;
}

/* Itens mais densos dentro do mega-menu (37px -> ~32px): muitos itens numa tela de notebook.
   O tema declara `.navbar-menu .navbar-nav .nav-sm .nav-link { padding: 0.55rem 1.5rem !important }`
   (app.css:832), então só outro !important passa; o padding lateral continua o do tema. */
[data-layout=horizontal] .navbar-menu .navbar-nav .mega-dropdown-menu .menu-mega-coluna .nav-sm .nav-link {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Cada subseção é um bloco indivisível dentro das colunas CSS. */
.mega-dropdown-menu .row > .menu-mega-coluna {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    flex: none;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding-bottom: 0.5rem;
    vertical-align: top;
}

/* Desktop: painel largo, subseções fluindo em colunas, rolagem própria só se ainda assim não couber. */
@media (min-width: 1025px) {
    [data-layout=horizontal] .mega-dropdown-menu {
        width: min(48rem, calc(100vw - 2rem));
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    [data-layout=horizontal] .mega-dropdown-menu > .row {
        display: block;
        column-count: 3;
        column-gap: 0;
        column-rule: 1px solid var(--vz-border-color);
    }

    [data-layout=horizontal] .mega-dropdown-menu.menu-mega-2col {
        width: min(32rem, calc(100vw - 2rem));
    }

    [data-layout=horizontal] .mega-dropdown-menu.menu-mega-2col > .row {
        column-count: 2;
    }

    /* Uma coluna só ocupa o painel inteiro. */
    [data-layout=horizontal] .mega-dropdown-menu.menu-mega-2col > .row:has(> .menu-mega-coluna:only-child) {
        column-count: 1;
    }
}

/* Notebook (1280px) em diante: 4 colunas, o painel de Configurações fica com ~500px de altura. */
@media (min-width: 1280px) {
    [data-layout=horizontal] .mega-dropdown-menu:not(.menu-mega-2col) {
        width: min(60rem, calc(100vw - 2rem));
    }

    [data-layout=horizontal] .mega-dropdown-menu:not(.menu-mega-2col) > .row {
        column-count: 4;
    }
}

/* Drawer (até 1024px): colunas empilhadas, sem separador lateral (a borda só existe no desktop). */
@media (max-width: 1024px) {
    /* O tema (app.css, `.menu .navbar-menu`) limita o painel a 360px e o deixa a 70px do topo;
       com 8 itens de topo o último ficava fora da caixa, debaixo do overlay, sem clique.
       Aqui o drawer de topbar_responsive_fix.css volta a ser de altura inteira. */
    html[data-layout="horizontal"] body.menu .navbar-menu {
        top: 0;
        bottom: 0;
        height: 100vh;
        max-height: none;
        overflow-y: auto;
    }

    [data-layout=horizontal] .mega-dropdown-menu {
        width: 100%;
    }

    .mega-dropdown-menu > .row {
        display: block;
        column-count: 1;
    }

    .menu-mega-coluna + .menu-mega-coluna {
        margin-top: 0.5rem;
    }
}