/**
 * Estilos customizados para submenus (dropdowns) dentro da barra lateral.
 * Sobrescreve as classes padrões do Bootstrap 5 para melhorar a UX visual.
 */

/* ========================================================= */
/* 1. CONTAINER DO SUBMENU (o box que aparece) */
/* ========================================================= */

/* Assumimos que a sua sidebar tem a classe .app-sidebar ou similar */
.app-sidebar .dropdown-menu {
    /* Fundo Azul Escuro */
    background-color: #1F3A66; 
    /* Remove bordas e sombras padrão para integrar melhor */
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* Garante que o menu é renderizado sobre outros elementos */
    z-index: 1050; 
}

/* ========================================================= */
/* 2. ITENS DO SUBMENU (links) */
/* ========================================================= */

.app-sidebar .dropdown-item {
    /* Texto Branco */
    color: #FFFFFF; 
    /* Garante que o item ocupe a largura completa */
    width: 100%;
    /* Alinha o texto \u00e0 esquerda, se necess\u00e1rio */
    text-align: left;
    /* Evita fundo transparente se for passado um argumento incorreto */
    background-color: transparent; 
}

/* ========================================================= */
/* 3. EFEITO HOVER E FOCO (Destaque) */
/* ========================================================= */

.app-sidebar .dropdown-item:hover,
.app-sidebar .dropdown-item:focus {
    /* Fundo Azul Primário (inverte a cor de fundo com um destaque claro) */
    background-color: #3B82F6; 
    /* Mantém o texto branco */
    color: #FFFFFF; 
}

/* ========================================================= */
/* 4. SEPARADOR (Se houver) */
/* ========================================================= */

.app-sidebar .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Linha divis\u00f3ria clara */
}