/* CSS para integração do menu dinâmico */

/* CORREÇÃO DO LAYOUT - Problema do carousel indo para baixo do menu */
/* Garantir que o main-wrapper mantenha o layout flex correto */
.main-wrapper {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    flex-direction: row !important;
}

/* Garantir que a sidebar esquerda mantenha sua posição FIXA */
.left-side-bar {
    position: fixed !important;
    top: 113px !important;
    left: 0 !important;
    width: 280px !important;
    height: calc(100vh - 113px) !important;
    z-index: 10 !important;
    border-right: 0.5px solid var(--white-10) !important;
    transform: translate(0%) !important;
    flex-shrink: 0 !important;
    background-color: var(--black) !important;
    overflow-y: auto !important;
    
    /* Esconder scrollbar mas manter funcionalidade */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Esconder scrollbar no Webkit (Chrome, Safari, Edge) */
.left-side-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Garantir que o conteúdo principal ocupe o espaço restante AO LADO do menu */
.main-content {
    width: calc(100% - 280px) !important;
    position: relative !important;
    overflow: hidden !important;
    flex: 1 !important;
    display: block !important;
    margin-left: 280px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Garantir que o carousel e outros elementos fiquem na posição correta */
.main-content .container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.main_banner-wrapper {
    z-index: 1 !important;
    display: block !important;
    position: relative !important;
    margin-top: 0 !important;
    width: 100% !important;
}

/* CORREÇÃO ESPECÍFICA PARA MOBILE - Menu lateral deve sumir completamente */
@media (max-width: 991px) {
    .left-side-bar {
        transform: translate(-100%) !important;
        width: 280px !important;
        z-index: 99999 !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Garantir que o container principal não tenha margem residual */
    .container,
    .container-fluid {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Garantir que o main-wrapper não tenha margem residual */
    .main-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Garantir que o body não tenha overflow horizontal */
    body {
        overflow-x: hidden !important;
    }
}

/* CORREÇÃO ESPECÍFICA PARA MOBILE PEQUENO */
@media (max-width: 767px) {
    .left-side-bar {
        width: 100vw !important;
        max-width: 320px !important;
    }
    
    /* Garantir que o menu mobile ocupe toda a altura da tela */
    .left-side-bar {
        height: 100vh !important;
        top: 0 !important;
    }
}

/* CORREÇÃO ESPECÍFICA PARA MOBILE MUITO PEQUENO */
@media (max-width: 480px) {
    .left-side-bar {
        width: 100vw !important;
        max-width: none !important;
    }
}

/* ANIMAÇÕES SUAVES PARA O MENU MOBILE */
.left-side-bar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* GARANTIR QUE O MENU MOBILE TENHA PRIORIDADE ALTA */
@media (max-width: 991px) {
    .left-side-bar {
        z-index: 99999 !important;
    }
    
    /* Garantir que o menu mobile não interfira com outros elementos */
    .left-side-bar * {
        z-index: inherit !important;
    }
}

/* CORREÇÃO PARA O PROBLEMA DO ESPAÇO RESIDUAL */
@media (max-width: 991px) {
    /* Garantir que o body não tenha overflow horizontal */
    body {
        overflow-x: hidden !important;
    }
    
    /* Garantir que o container principal não tenha margem residual */
    .container-fluid,
    .container {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Garantir que o main-wrapper não tenha margem residual */
    .main-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* CORREÇÃO ESPECÍFICA PARA O APP-USER */
.app-user .left-side-bar {
    background-color: var(--black) !important;
}

.app-user .main-content {
    background-color: var(--black) !important;
}

/* GARANTIR QUE O MENU MOBILE TENHA FUNDO ESCURO */
@media (max-width: 991px) {
    .app-user .left-side-bar {
        background-color: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* ===== CORREÇÕES ESPECÍFICAS PARA O CONTAINER-MEDIUM ===== */
/* Garantir que o container-medium não cause problemas de layout */
.container-medium {
    position: relative !important;
    z-index: 2 !important;
    max-width: 97% !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* CORREÇÕES ESPECÍFICAS PARA O CAROUSEL BOOTSTRAP */
/* Garantir que o carousel mantenha o layout correto */
.carousel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
}

.carousel-inner {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
}

.carousel-item {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    height: auto !important;
}

.carousel-item.active {
    display: block !important;
}

.carousel-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* ===== CORREÇÕES ESPECÍFICAS PARA APP-USER ===== */
/* Garantir que o app-user tenha o mesmo comportamento */
.app-user .main-wrapper {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    flex-direction: row !important;
}

.app-user .left-side-bar {
    position: fixed !important;
    top: 113px !important;
    left: 0 !important;
    width: 280px !important;
    height: calc(100vh - 113px) !important;
    z-index: 10 !important;
    border-right: 0.5px solid var(--white-10) !important;
    transform: translate(0%) !important;
    flex-shrink: 0 !important;
    background-color: var(--black) !important;
    overflow-y: auto !important;
     margin-top: -7px !important;
    /* Esconder scrollbar mas manter funcionalidade */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

.app-user .left-side-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.app-user .main-content {
    width: calc(100% - 280px) !important;
    position: relative !important;
    overflow: hidden !important;
    flex: 1 !important;
    display: block !important;
    margin-left: 280px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.app-user .main-content .container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.app-user .main_banner-wrapper {
    z-index: 1 !important;
    display: block !important;
    position: relative !important;
    margin-top: 0 !important;
    width: 100% !important;
}

.app-user .container-medium {
    position: relative !important;
    z-index: 2 !important;
    max-width: 97% !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.app-user .carousel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
}

.app-user .carousel-inner {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
}

.app-user .carousel-item {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    height: auto !important;
}

.app-user .carousel-item.active {
    display: block !important;
}

.app-user .carousel-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* ===== CORREÇÕES PARA MOBILE ===== */
/* Garantir que o menu lateral suma completamente no mobile */
@media screen and (max-width: 991px) {
    .left-side-bar,
    .app-user .left-side-bar {
        transform: translate(-100%) !important;
        width: 80% !important;
        max-width: 80% !important;
        z-index: 99999 !important;
        background-color: #170001 !important;
        margin-top: 0 !important;
        top: 0 !important;
        height: 100% !important;
    }
    
    .main-content,
    .app-user .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .main-wrapper,
    .app-user .main-wrapper {
        flex-direction: column !important;
    }
    
    /* Garantir que o espaço do menu não seja ocupado */
    .left-side-bar_page-padding {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
    }
    
    .left-side_sticky-wrapper {
        width: 400px !important;
        overflow: scroll !important;
    }
}

@media screen and (max-width: 767px) {
    .left-side-bar,
    .app-user .left-side-bar {
        width: 100vw !important;
        max-width: none !important;
        margin-top: 7.5rem !important;
        top: 0 !important;
        z-index: 9999 !important;
    }
    
    .left-side-bar_page-padding {
        padding-bottom: 80px !important;
        position: relative !important;
    }
    
    .left-side_sticky-wrapper {
        width: 100% !important;
        overflow: auto !important;
    }
}

@media screen and (max-width: 479px) {
    .left-side-bar,
    .app-user .left-side-bar {
        width: 100vw !important;
        max-width: none !important;
        margin-top: 7.5rem !important;
        top: 0 !important;
        z-index: 9999 !important;
    }
}

/* ===== ESTRUTURA DO MENU ===== */
.left-side-bar_navigation-wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.left-side-bar_page-padding {
    height: 100% !important;
    max-width: 280px !important;
    min-height: 100vh !important;
    min-width: 250px !important;
    background-color: var(--black) !important;
    position: relative !important;
}

/* Garantir que todos os elementos internos ocupem 100% da largura */
.left-side-bar_page-padding * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.eng-sublinks-nav .menu-dinamico {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
    width: 100% !important;
    overflow-y: auto !important;
    
    /* Esconder scrollbar do menu dinâmico */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Esconder scrollbar do menu dinâmico no Webkit */
.eng-sublinks-nav .menu-dinamico::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.eng-sublinks-nav .menu-item,
.eng-sublinks-nav .menu-topico-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: white !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* REMOVIDO: transition e hover effects */
}

.eng-sublinks-nav .menu-item:last-child {
    border-bottom: none !important;
}

.eng-sublinks-nav .menu-topico-header {
    justify-content: space-between !important;
    font-weight: bold !important;
    /* Background será aplicado via PHP do banco de dados */
}

.eng-sublinks-nav .menu-icon {
    width: 20px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.eng-sublinks-nav .menu-icon i {
    font-size: 1.2em !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

.eng-sublinks-nav .menu-text {
    flex: 1 !important;
    font-size: 14px !important;
}

.eng-sublinks-nav .menu-topico-itens {
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.eng-sublinks-nav .menu-subitem {
    padding: 8px 20px 8px 40px !important;
    margin: 0 !important;
    font-size: 13px !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.eng-sublinks-nav .menu-topico {
    border-bottom: 0.4px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.eng-sublinks-nav .menu-topico:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.eng-sublinks-nav .menu-topico-header {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.eng-sublinks-nav .menu-toggle {
    font-size: 12px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    /* REMOVIDO: transition */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    position: relative !important;
    z-index: 11 !important;
}

/* Garantir que os tópicos sejam clicáveis */
.eng-sublinks-nav .menu-topico {
    position: relative !important;
    z-index: 5 !important;
}

.eng-sublinks-nav .menu-topico-itens {
    position: relative !important;
    z-index: 1 !important;
}

/* Permitir que o JavaScript controle a visibilidade */
.eng-sublinks-nav .menu-topico-itens[style*="display: none"] {
    display: none !important;
}

.eng-sublinks-nav .menu-topico-itens[style*="display: block"] {
    display: block !important;
}

/* Estilos específicos para o tema do site */
.eng-sublinks-nav .menu-dinamico {
    font-family: 'Poppins', sans-serif !important;
}

.eng-sublinks-nav .menu-item,
.eng-sublinks-nav .menu-topico-header {
    font-weight: 200 !important;
}

.eng-sublinks-nav .menu-topico-header {
    font-weight: 600 !important;
    /* Cor será aplicada via PHP do banco de dados */
}

/* Estilo para tópicos vazios */
.eng-sublinks-nav .menu-topico:empty {
    display: none !important;
}

/* Melhorias para acessibilidade */
.eng-sublinks-nav .menu-item:focus,
.eng-sublinks-nav .menu-topico-header:focus {
    outline: 2px solid currentColor !important;
    outline-offset: -2px !important;
}

/* Estilo para links externos */
.eng-sublinks-nav .menu-item[href^="http"]::after {
    margin-left: 5px !important;
    font-size: 10px !important;
    opacity: 0.7 !important;
}