/*
 * Corrige o corte de itens no menu superior (topbar) e organiza a navegacao.
 *
 * O bloco de ícones do topbar (#topbar-icons-cluster) não tinha flex-wrap
 * nem overflow próprio. Em telas estreitas, os últimos itens (idioma,
 * usuário) ficavam INVISÍVEIS porque dashboard_select_fix.css força
 * overflow-x:hidden!important em html/body/#layout-wrapper (fix de outro
 * problema, não mexer nele aqui). A correção contém o overflow
 * LOCALMENTE dentro do topbar, dando ao cluster de ícones um scroll
 * horizontal próprio em vez de deixar o conteúdo ser cortado pela regra
 * global.
 *
 * O menu horizontal usa drawer lateral apenas em telas menores; no desktop,
 * a navegacao continua como faixa e as acoes ficam alinhadas a direita.
 */
#page-topbar,
#page-topbar .navbar-header {
    overflow: visible;
}

#topbar-icons-cluster {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#topbar-icons-cluster::-webkit-scrollbar {
    display: none;
}

/* Cada item do cluster preserva seu tamanho -- se não couber, o cluster
   rola em vez de espremer/cortar os ícones */
#topbar-icons-cluster > * {
    flex-shrink: 0;
}

@media (min-width: 1025px) {
    #topbar-icons-cluster {
        flex: 0 0 auto;
        margin-left: auto;
        overflow-x: visible;
    }
}

/* Banner de dias restantes: continua visível no mobile (decisão de
   produto), só fica mais compacto -- o texto "dias restantes"/"Contratar"
   já some via d-none d-md-inline no HTML (topbar.php); aqui só reduzimos
   o padding para caber melhor ao lado do cluster de ícones. */
@media (max-width: 767.98px) {
    #page-topbar .navbar-header > .d-flex.ms-auto .alert {
        padding: 0.25rem 0.4rem !important;
    }

    #page-topbar .navbar-header > .d-flex.ms-auto .alert .btn {
        padding: 0.25rem 0.4rem !important;
    }
}

/* O menu horizontal usa um drawer lateral em qualquer tamanho de tela. */
html[data-layout="horizontal"] .topnav-hamburger {
    visibility: visible;
}

html[data-layout="horizontal"] .navbar-menu {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    z-index: 1004;
    width: min(86vw, 320px);
    max-height: none;
    height: 100vh;
    padding: 0;
    overflow-y: auto;
    background: var(--vz-topnav-bg);
    box-shadow: -8px 0 24px rgba(15, 34, 58, 0.18);
    transform: translateX(105%);
    transition: transform 0.25s ease;
}

html[data-layout="horizontal"] body.menu {
    overflow: hidden;
}

html[data-layout="horizontal"] body.menu .navbar-menu {
    transform: translateX(0);
}

html[data-layout="horizontal"] .navbar-menu .container-fluid {
    min-height: 100%;
    padding: 0 0 1.25rem;
}

html[data-layout="horizontal"] .navbar-menu .navbar-nav {
    flex-direction: column;
    padding-top: 4.5rem;
}

html[data-layout="horizontal"] body.menu .vertical-overlay {
    display: block;
    z-index: 1003;
}

html[data-layout="horizontal"] .menu-dropdown {
    position: relative;
    min-width: 100%;
    box-shadow: none;
    padding-left: 28px;
    left: 0;
    animation: none;
}

/* Em telas pequenas, preserva o respiro lateral do painel. */
@media (max-width: 1024px) {
    html[data-layout="horizontal"] body.menu {
        overflow: hidden;
    }

    #topbar-icons-cluster {
        overflow: visible;
        justify-content: flex-end;
    }

    #topbar-icons-cluster > .dropdown > .dropdown-menu.show,
    #topbar-icons-cluster > .topbar-user > .dropdown-menu.show {
        position: fixed !important;
        top: 70px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 1100;
        transform: none !important;
    }

    html[data-layout="horizontal"] .navbar-menu {
        width: min(86vw, 300px);
    }
}

/* Restaura a navegacao horizontal no desktop. */
@media (min-width: 1025px) {
    html[data-layout="horizontal"] .topnav-hamburger {
        visibility: hidden;
    }

    html[data-layout="horizontal"] .navbar-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 0 calc(1.5rem / 2);
        overflow: visible;
        box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
        transform: none;
        transition: none;
    }

    html[data-layout="horizontal"] .navbar-menu .container-fluid {
        min-height: 0;
        padding: 0;
    }

    html[data-layout="horizontal"] .navbar-menu .navbar-nav {
        flex-direction: row;
        padding-top: 0;
    }

    html[data-layout="horizontal"] .menu-dropdown {
        position: absolute;
        min-width: 12rem;
        box-shadow: 0 0 5px rgba(15, 34, 58, 0.15);
        padding-left: 0;
        animation: none;
    }
}