/* =============================================================================
   Menu lateral — layout e comportamento
   =============================================================================

   Carregado DEPOIS de sb-admin-2 e de custom.css. Este arquivo é o dono do
   layout do menu; não espalhe regra de sidebar em custom.css nem em <style> no
   blade, que foi como o menu quebrou da primeira vez.

   ⚠️ O BUG QUE ORIGINOU ESTE ARQUIVO, para não voltar:

   O submenu é filho da sidebar. Se a sidebar rola (`overflow:auto`), ela
   RECORTA o submenu flutuante; se não recorta (`overflow:visible`), ela NÃO
   rola. Os dois não convivem. A versão anterior escolheu `overflow:visible`, e
   com 28 itens de topo o que passava da altura da tela ficava inalcançável.

   A saída não é escolher um dos lados: é o submenu não flutuar quando a barra
   está aberta. É assim que o próprio SB Admin 2 foi desenhado — em
   `@media (min-width:768px)` ele define `position:relative` para o `.collapse`
   (acordeão dentro da barra, com chevron que vira) e só usa painel flutuante no
   modo trilho de ícones, que é curto. O `custom.css` tinha copiado a regra do
   trilho SEM o `.toggled`, aplicando o flutuante também com a barra aberta — e
   ainda com `left` calculado para uma largura que a barra não tem mais.

   ⚠️ UM breakpoint só: 768px, o mesmo do vendor. A versão anterior tinha
   `max-width:991px` e `min-width:768px` mexendo nas mesmas propriedades, então
   entre 768 e 991 os dois desenhos valiam ao mesmo tempo e quem decidia era um
   `!important`. Era exatamente a faixa em que o menu aparecia cortado.

   Os dois modos:

     >= 768px   barra fixa à esquerda, que ROLA. Submenu abre dentro dela.
                O botão recolhe para o trilho de ícones, onde o submenu vira
                painel flutuante posicionado por menu.js.

     <  768px   gaveta por cima do conteúdo, em DOIS NÍVEIS: a lista de grupos
                e, ao tocar num, o painel daquele grupo com um "voltar".
                Nada é cortado porque nada precisa caber ao lado de nada.
   ============================================================================= */


/* ============================== comum ====================================== */

/*
 * Item de submenu longo quebra linha em vez de vazar o painel — o vendor usa
 * `white-space: nowrap`, e "Requisição de Material / Desmobilização" não cabe nos
 * 12,6rem do painel.
 *
 * ⚠️ As DUAS classes, sempre: `.collapsing` enquanto abre, `.collapse` depois. Só
 * uma delas faz o texto trocar de quebra no fim da animação.
 */
.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    white-space: normal;
}

/* A barra de rolagem da sidebar é fina e discreta: ela aparece em toda tela com
   menos de ~1100px de altura, e a padrão do Windows come 17px de um menu de
   224px. */
.sidebar-fixed::-webkit-scrollbar {
    width: 6px;
}

.sidebar-fixed::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-fixed::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .25);
    border-radius: 3px;
}

.sidebar-fixed {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}


/* ===================== >= 768px: barra fixa que rola ====================== */

@media (min-width: 768px) {

    /*
     * 17rem, e o `!important` aqui é para vencer o do VENDOR
     * (`sb-admin-2.css`: `.sidebar { width: 14rem !important }`) — não é uma regra
     * nossa brigando com outra nossa, que era o problema antigo.
     *
     * A largura importa mais do que parece: com 14rem, "Controle de apontamento"
     * não cabe numa linha e o item quebra, empurrando a seta para baixo. Foi o que
     * aconteceu quando as medidas antigas saíram de `custom.css` junto com as
     * regras quebradas.
     */
    .sidebar {
        width: 17rem !important;
        z-index: 99;
    }

    /*
     * ⚠️ `overflow-y: auto` é o conserto do "a sidebar fica incompleta".
     *
     * Só é possível porque, com a barra aberta, o submenu não flutua mais — não
     * há o que recortar. Se algum dia alguém voltar a fazer o submenu flutuar
     * aqui, vai ter de tirar esta rolagem junto, e o menu volta a truncar.
     *
     * ⚠️ E a largura acompanha a da barra (17rem), nunca menos. Antes este
     * container tinha 12rem enquanto os itens tinham 14rem: eles simplesmente
     * VAZAVAM, e ninguém via porque o `overflow` era `visible`. Com a rolagem
     * ligada, vazar vira corte horizontal.
     */
    .sidebar-fixed {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 17rem;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    /*
     * O item compacto — as medidas que o menu tinha antes.
     *
     * `padding: .5rem .7rem` (o vendor usa `.7rem` nos quatro lados, que deixa a
     * lista alta demais para 28 itens) e `width: 14rem` dentro de uma barra de
     * 17rem, que é a faixa escura que sobra à direita da seta.
     */
    .sidebar .nav-item .nav-link {
        padding: .5rem .7rem;
        width: 14rem;
    }

    /*
     * O logo ocupa 12rem à esquerda, não a barra inteira.
     *
     * É a geometria que o menu tinha: o `.sidebar-fixed` media 12rem (e os itens,
     * 14rem, vazavam dele — ver acima). Agora que o container acompanha a barra,
     * sem esta linha o logo passaria a ser centralizado em 17rem e andaria ~2,5rem
     * para a direita em relação ao que se via antes.
     */
    .sidebar-fixed .logo-sidebar {
        flex: none;
        width: 12rem;
    }

    /*
     * ⚠️ O submenu ocupa a MESMA coluna do item, não a largura do container.
     *
     * O vendor lhe dá `margin: 0 1rem`, o que numa barra de 14rem (a dele) fecha
     * certo. Na nossa, de 17rem, o cartão branco ficava ~1rem mais largo do que
     * onde TODO item termina — ele estourava para fora da coluna do menu, que era
     * o efeito de cartão vazando pela direita.
     *
     * O `calc()` deixa a relação explícita em vez de um número mágico: a largura
     * do item (14rem) menos o padding lateral dele (.7rem de cada lado). Assim o
     * cartão nasce alinhado ao texto do item e recua o mesmo tanto dos dois lados.
     */
    .sidebar .nav-item .collapse,
    .sidebar .nav-item .collapsing {
        width: calc(14rem - 1.4rem);
        margin: 0 0 .5rem .7rem;
    }

    /*
     * Os grupos formam UM painel, não uma pilha.
     *
     * O vendor põe `margin: 0 0 1rem 0` em cada `.collapse-inner` — desenhado para
     * o cartão flutuante, que tem um grupo só. Inline, "Obras" tem OITO grupos, e
     * a margem virava oito blocos brancos separados por faixas escuras. Sem ela,
     * o `padding: .5rem 0` de cada bloco já dá o respiro, e o `collapse-header`
     * (o rótulo cinza maiúsculo) faz o papel de separador.
     */
    /*
     * ⚠️ O ESPAÇAMENTO DO PAINEL É O DO VENDOR. Não aperte.
     *
     * Já tentei: `margin: 0` no `.collapse-inner`, régua de 1px entre grupos e
     * padding menor no cabeçalho e no item. Ficou ruim — e ainda produziu um
     * defeito pior, descrito abaixo.
     *
     * ⚠️ E se um dia for mexer, mexa nas DUAS classes.
     *
     * No Bootstrap 4 o elemento tem `.collapsing` ENQUANTO abre e `.collapse.show`
     * DEPOIS — nunca as duas. Toda regra do vendor para este painel é escrita para
     * o par (`.collapse .collapse-inner, .collapsing .collapse-inner`) por isso.
     * Sobrescrever só `.collapse` faz o painel abrir com um espaçamento e **saltar
     * para outro** ao fim da animação: durante a transição valem as regras do
     * vendor, no fim valem as suas. O sintoma é exatamente "abre com a distância
     * certa e depois encolhe", e não parece bug de CSS — parece a animação.
     */

    /*
     * Trilho de ícones (botão de recolher).
     *
     * Ele também rola: são 28 itens, e mesmo com o rótulo miúdo a lista passa da
     * altura da tela. Por isso o painel flutuante do trilho é `position: fixed` e
     * quem o posiciona é o menu.js — dentro de um container que rola, `absolute`
     * seria recortado (o mesmo beco de sempre).
     */
    .sidebar.toggled {
        width: 6.5rem;
        overflow: visible;
    }

    .sidebar.toggled .sidebar-fixed {
        width: 6.5rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /*
     * O logo no trilho.
     *
     * ⚠️ `!important` porque os valores estão INLINE no blade
     * (`<div style="height:150px">` e `<img style="margin-top:80px; width: 12rem">`),
     * e estilo inline ganha de qualquer folha. Numa barra de 6.5rem, uma imagem de
     * 12rem não cabe: o `overflow-x: hidden` do container corta a marca no meio —
     * era o "Engen…" espremido.
     *
     * Quem fazia isso antes era o `mounted()` do `Bar.vue`, na mão
     * (`$('.sidebar-brand img').css('width','100%')`), e o estado só se acertava
     * ao clicar no botão — abrir a página já recolhida deixava o logo estourado.
     * Em CSS ele vale do primeiro quadro.
     */
    .sidebar.toggled .sidebar-fixed .logo-sidebar {
        width: 6.5rem;
        height: auto !important;
        padding: .75rem .5rem;
    }

    /* O `.sidebar-brand` do vendor tem `height: 4.375rem` FIXO com `padding: 1.5rem`.
       No modo expandido isso não incomoda (o logo transborda para dentro do bloco
       de 150px e é o visual aprovado), mas aqui a caixa precisa acompanhar a
       imagem, senão ela vaza 5px por cima do primeiro item do menu. */
    .sidebar.toggled .sidebar-fixed .sidebar-brand {
        height: auto;
        padding: 0;
    }

    .sidebar.toggled .sidebar-fixed .logo-sidebar img {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .sidebar.toggled .nav-item .collapse {
        position: fixed;
        /* Flutuando, a largura é a do conteúdo — não a da coluna do item. */
        width: auto;
        margin: 0;
        left: auto;
        top: auto;
        z-index: 1040;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sidebar.toggled .nav-item .collapse .collapse-inner {
        box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .3);
        border-radius: .35rem;
        min-width: 12rem;
    }

    /* No trilho o rótulo é miúdo e cabe numa linha só: "Controle de apontamento"
       em 6.5rem quebraria em quatro. Reticências em vez de quebra. */
    .sidebar.toggled .nav-item .nav-link {
        text-align: center;
        padding: .15rem 1rem;
        width: 6.5rem;
    }

    .sidebar.toggled .nav-item .nav-link span {
        font-size: .65rem;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A gaveta e o cabeçalho dela não existem neste modo. */
    .menu-fundo,
    .menu-cabecalho,
    .menu-voltar {
        display: none !important;
    }
}


/* ======================== < 768px: gaveta ================================= */

@media (max-width: 767.98px) {

    /*
     * A barra sai do fluxo e vira gaveta POR CIMA do conteúdo.
     *
     * Antes ela era um trilho de ícones permanente de 9.5rem — num celular de
     * 360px isso é 40% da tela gasto num menu que ninguém consegue ler. O botão
     * de abrir/fechar sempre existiu (`#sidebarToggleTop`, na topbar que o Vue
     * renderiza), mas o que ele fazia era alternar entre trilho e barra cheia:
     * nos dois estados a barra continuava ocupando a tela.
     */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 17rem;
        max-width: 85vw;
        min-height: 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .25s ease;
        will-change: transform;
    }

    .sidebar.menu-aberta {
        transform: none;
    }

    .sidebar-fixed {
        position: static;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* O logo vira um cabeçalho de 3.5rem: 150px de logo numa gaveta de celular é
       um terço da altura gasto antes do primeiro item. */
    .sidebar-fixed .logo-sidebar {
        height: auto !important;
        flex: none;
        padding: .75rem 1rem;
    }

    /* Mesmo motivo do trilho: a altura fixa do `.sidebar-brand` não comporta a
       imagem, e aqui ela vazaria por cima do primeiro item da gaveta. */
    .sidebar-fixed .sidebar-brand {
        height: auto;
        padding: 0;
    }

    .sidebar-fixed .logo-sidebar img {
        margin-top: 0 !important;
        width: 8rem !important;
    }

    /* O botão de recolher para trilho não faz sentido na gaveta. */
    .sidebar-fixed > .text-center.d-none,
    .sidebar-fixed > hr.sidebar-divider {
        display: none !important;
    }

    /* ---- o trilho de dois níveis ---- */

    /*
     * Dois painéis lado a lado num trilho de 200%, que desliza. É o que dá a
     * sensação de "entrar" no grupo em vez de a lista pular de conteúdo.
     */
    .menu-trilho {
        flex: 1 1 auto;
        display: flex;
        width: 200%;
        min-height: 0;
        transition: transform .25s ease;
    }

    .sidebar.menu-nivel-2 .menu-trilho {
        transform: translateX(-50%);
    }

    .menu-painel {
        width: 50%;
        flex: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* O cartão branco não encosta nas bordas da gaveta. `box-sizing: border-box`
       (padrão do Bootstrap) mantém o painel nos 50% do trilho. */
    .menu-painel-2 {
        padding: .5rem .75rem;
    }

    /* O nível 1 é a lista que já existe no blade; o nível 2 recebe o `.collapse`
       do grupo aberto, emprestado pelo menu.js e devolvido no "voltar". */
    .menu-painel > ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Na gaveta o item ocupa a largura toda e é alvo de dedo, não de mouse. */
    .sidebar .nav-item .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: .85rem 1rem;
    }

    .sidebar .nav-item .nav-link i {
        width: 1.5rem;
        margin-right: .35rem;
        text-align: center;
    }

    .sidebar .nav-item .nav-link span {
        font-size: .9rem;
        display: inline;
    }

    /* O chevron indica "entra num nível", então aponta para a direita sempre —
       na gaveta ele nunca vira para baixo, porque nada abre no lugar. */
    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after,
    .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        float: right;
        border: 0;
        opacity: .6;
    }

    /*
     * ⚠️ Escopado no painel 2, nunca em `.menu-painel`.
     *
     * Os submenus que ainda não foram abertos continuam dentro do `<li>` deles, no
     * painel 1 — e `.menu-painel .collapse` casaria com eles também. Bastaria um
     * `.show` herdado (a pessoa abre um grupo no desktop e estreita a janela) para
     * `display: block !important` escancarar todos os submenus dentro da lista.
     */
    .menu-painel-1 .collapse,
    .menu-painel-1 .collapsing {
        display: none !important;
    }

    /*
     * No nível 2 o painel é o conteúdo da gaveta: sem posicionamento, sem cartão
     * flutuante, sem `max-height` de 200px (que era o que fazia o submenu ganhar
     * uma segunda barra de rolagem dentro da primeira).
     */
    .menu-painel-2 .collapse,
    .menu-painel-2 .collapsing {
        position: static !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        left: auto;
        top: auto;
        transition: none !important;
    }

    /*
     * ⚠️ A ESPECIFICIDADE tem de alcançar a do vendor — `.nav-item` no seletor.
     *
     * Com o envoltório repondo o `.nav-item` no caminho (ver menu.js), as regras do
     * SB Admin 2 voltaram a casar aqui, e elas são `.sidebar .nav-item .collapse
     * .collapse-inner …` = (0,5,0). Escrito como `.menu-painel-2 .collapse-item`
     * (0,2,0), o que está abaixo **não vale nada** — e não dá erro: o item fica com
     * o padding de mouse do vendor e com `white-space: nowrap`, então rótulo longo
     * vaza o cartão em vez de quebrar linha. Conferido por cálculo de
     * especificidade, não no olho.
     *
     * `border-radius` e `box-shadow` não entram aqui: a classe `rounded` do blade é
     * `!important` e venceria, e o cartão arredondado é o que se quer na gaveta.
     */
    .sidebar .menu-painel-2 .nav-item .collapse .collapse-inner {
        max-height: none;
        overflow: visible;
        margin: 0 0 .5rem;
    }

    /* Alvo de dedo: o `.5rem` do vendor é medida de mouse. */
    .sidebar .menu-painel-2 .nav-item .collapse .collapse-inner .collapse-item {
        padding: .8rem 1rem;
    }

    /* ---- cabeçalho da gaveta ---- */

    .menu-cabecalho {
        flex: none;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        color: #fff;
    }

    .menu-cabecalho .menu-titulo {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
        font-weight: 700;
    }

    .menu-cabecalho button {
        flex: none;
        background: transparent;
        border: 0;
        color: #fff;
        opacity: .85;
        /* 44px: alvo de toque de verdade, não ícone de 14px. */
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .35rem;
        font-size: 1.1rem;
    }

    .menu-cabecalho button:hover,
    .menu-cabecalho button:focus {
        background: rgba(255, 255, 255, .12);
        opacity: 1;
    }

    /* O "voltar" só existe no nível 2. */
    .menu-voltar {
        display: none;
    }

    .sidebar.menu-nivel-2 .menu-voltar {
        display: block;
    }

    /* ---- o botão que abre a gaveta ---- */

    /*
     * ⚠️ Ele NÃO é criado aqui: é o `#sidebarToggleTop` da `.navbar.topbar` que o
     * `Bar.vue` (o `<notificacoes>`) renderiza — o bloco `<!-- Topbar -->` do blade
     * está vazio porque a barra migrou para o Vue. Só ganha alvo de toque decente;
     * o `d-md-none` dele já o esconde acima de 768px, no mesmo breakpoint daqui.
     */
    .topbar #sidebarToggleTop {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.15rem;
    }

    /* ---- fundo escuro ---- */

    .menu-fundo {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .menu-fundo.ativo {
        opacity: 1;
        visibility: visible;
    }

    /* Com a gaveta aberta, o corpo não rola atrás dela. */
    body.menu-travado {
        overflow: hidden;
    }
}