/* css/sidebar.css (VERSÃO AJUSTADA E OTIMIZADA) */

/* --- ESTILOS BASE (DESKTOP) --- */
.sidebar {
    /* VISUAL */
    background-color: #FFFFFF;
    border-right: 1px solid #E5E7EB; /* Borda lateral cinza clara */

    /* POSICIONAMENTO E TAMANHO */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    padding: 20px;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;

    /* ▼▼▼ AJUSTE PRINCIPAL APLICADO AQUI ▼▼▼ */
    overflow-y: auto; /* Permite a rolagem vertical quando o conteúdo for maior que a tela */
    scroll-behavior: smooth; /* Opcional: torna a rolagem (com clique) mais suave */
}

.sidebar-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E5E7EB;
}

/* Cabeçalhos de Seção (INDICADORES, LANÇAMENTOS) */
.sidebar .nav-header {
    color: #1E3A8A;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 12px 20px 8px;
    margin-top: 10px;
}

.sidebar .nav-header i {
    color: #1E3A8A;
}

/* Links da Sidebar (Dashboard, Transações) */
.sidebar .nav-link {
    color: #1E3A8A;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

.sidebar .nav-link i {
    color: #1E3A8A;
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Efeito ao passar o mouse e link ativo */
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: #EFF6FF; /* Fundo azul bem claro para contraste */
}

/* Empurra o conteúdo principal para o lado no desktop */
.main-content {
    margin-left: 250px;
}

/* --- AJUSTES PARA TELAS MENORES (MOBILE) --- */
@media (max-width: 991.98px) {
    .sidebar {
        z-index: 1045;
        transform: translateX(-100%);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        width: 240px; /* Largura reduzida para mobile */
    }

    .sidebar.mobile-active {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }
}

/* 
   NOTA: A segunda regra @media foi combinada com a primeira para evitar redundância.
   As regras para mobile agora estão agrupadas em um único bloco.
*/