/* sidebar/sidebar.css */

/* Estilos para o contêiner da sidebar (onde o HTML será carregado) */
#sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    min-width: 250px;
    height: 100vh;
    overflow-y: auto; /* Permite rolagem se o conteúdo for muito longo */
    background-color: #343a40;
    color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Inclui padding e borda na largura/altura */
    z-index: 1000;
}

/* Estilos para a Sidebar (o div que contém a navegação) */
.sidebar {
    width: 100%; /* Ocupa 100% da largura do seu contêiner pai (#sidebar-container) */
    padding: 15px;
}

/* Estilos para links de navegação (usado tanto para itens de menu quanto para cabeçalhos de collapse) */
.sidebar .nav-link {
    color: white;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    text-decoration: none;
    display: flex; /* Usado para alinhar texto e ícone */
    align-items: center;
	gap: 8px;
	transition: background-color 0.3s ease;
}

/* Estilo de hover para todos os links de navegação */
.sidebar .nav-link:hover {
    background-color: #495057;
}

/* Estilo para o link de navegação ou cabeçalho de collapse ATIVO (da página atual) */
.sidebar .nav-link.active {
    background-color: #0d6efd; /* Exemplo: cor primária do Bootstrap */
    color: white;
}

/* Estilo para os cabeçalhos dos collapses (os links que abrem/fecham submenus) */
.sidebar-header-bootstrap {
    cursor: pointer;
    font-weight: bold;
    position: relative; /* Necessário para o posicionamento do ícone, se for absoluta */
    /* O Bootstrap's .nav-link já aplica 'display: flex', 'justify-content: space-between' */
}

/* Estilo para o ícone de expandir/recolher */
.expand-icon-bootstrap {
    transition: transform 0.3s ease; /* Suaviza a rotação do ícone */
    margin-left: auto; /* Empurra o ícone para a direita */
}

/* Estilos para os DIVs de colapso (os submenus) */
.collapse {
    background-color: #2c3034; /* Fundo ligeiramente mais escuro para submenus */
    /* A transição e o overflow são gerenciados pelo Bootstrap automaticamente com a classe 'collapse' */
    /* As classes ps-4 e ps-5 no HTML controlam o padding-left (indentação) */
}

/* Estilo para submenus aninhados (um .collapse dentro de outro .collapse) */
.collapse .collapse {
    background-color: #25292c; /* Tom ainda mais escuro para o submenu aninhado */
}