/* =========================================================
   1. ESTILOS GERAIS E CORES DO TEMA
   ========================================================= */
.bg-gradient-primary {
    color: #fff;
    background-color: #c70846 !important;
    background-image: linear-gradient(180deg, #252e49 10%, #252e49 100%) !important;
    background-size: cover;
}

.bg-white {
    /*background-color: #252e49!important;*/
}

footer.sticky-footer {
    padding: 4px 0 !important;
    height: auto !important;
    line-height: 1 !important;
}

footer.sticky-footer .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
}

.bg-barra-topo {
    background-color: #2AC191 !important; 
}

.input-group-text {
    color: #fff !important;
    background-color: transparent !important;
    border: 0px solid #d1d3e2 !important;
}

.custom-select {
    border-top-left-radius: 0.35rem !important;
    border-top-right-radius: 0.35rem !important;
    border-bottom-right-radius: 0.35rem !important;
    border-bottom-left-radius: 0.35rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 0rem !important;
}

/* =========================================================
   2. AJUSTES DO SELECT2 (CAIXA DE BUSCA DE CIDADES)
   ========================================================= */
.input-group > .select2-container--default {
    width: 250px !important;
    flex: 0 0 auto !important;
    max-width: 100%; 
}

.input-group > .select2-container--default .select2-selection--single {
    height: 42px !important; 
    display: flex !important;
    align-items: center !important;
    border: 1px solid #d1d3e2 !important;
    border-radius: 5px !important; 
    padding-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important; 
    color: #495057 !important;   
    font-size: 15px !important;   
    padding-right: 30px;          
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    top: 1px !important;
    right: 5px !important;
}

.input-group-text {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: bold;
    padding-right: 12px;
    font-size: 15px;
}

.select2-container--default .select2-selection--single:focus {
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #858796 !important;
}

/* =========================================================
   3. TROCA DE LOGO (MENU COLLAPSE)
   ========================================================= */
.sidebar .logo-normal { display: block; max-width: 100%; height: auto; }
.sidebar .logo-mini { display: none; }

.sidebar.toggled .logo-normal { display: none !important; }
.sidebar.toggled .logo-mini { 
    display: block !important; 
    width: 40px; 
    height: auto; 
    margin: 0 auto; 
}
.sidebar.toggled .sidebar-brand-icon { transform: none !important; }

/* =========================================================
   DESTAQUE DOS ITENS ATIVOS (TEXTO VERDE, SEM FUNDO)
   ========================================================= */

/* 1. PARA SUBMENUS (Ex: Educação, PPA, Receitas) */
.sidebar .collapse-item.active {
    background-color: transparent !important; /* Remove fundo verde */
    color: #2AC191 !important;            /* Texto Verde */
    font-weight: bold !important;         /* Negrito */
}

/* 2. PARA MENUS PRINCIPAIS (Ex: Imputações, Início, Alertas) */
/* Quando o item pai (LI) ganha a classe 'active', pintamos tudo dentro dele de verde */

/* A. O Link em si */
.sidebar .nav-item.active > .nav-link {
    background-color: transparent !important; /* Garante fundo transparente */
    color: #2AC191 !important;
    font-weight: bold !important;
}

/* B. O Ícone ao lado (Ex: o desenho do cartão em Imputações) */
.sidebar .nav-item.active > .nav-link i {
    color: #2AC191 !important;
}

/* C. O Texto (span) */
.sidebar .nav-item.active > .nav-link span {
    color: #2AC191 !important;
}

/* 3. MANTER A SETINHA DA PASTA BRANCA (Opcional) */
/* Se quiser que a setinha da pasta (Ex: Planejamento) continue cinza/branca mesmo aberta, mantenha isso. 
   Se quiser verde também, pode remover este bloco. */
.sidebar .nav-item.active > .nav-link::after {
    color: rgba(255,255,255,0.5) !important;
}

/* =========================================================
   DESTAQUE NO MENU RECOLHIDO (TOGGLED)
   ========================================================= */

/* Garante que o item ativo dentro do menu flutuante fique VERDE e não branco */
.sidebar.toggled .nav-item .collapse .collapse-item.active {
    color: #2AC191 !important;       /* Força a cor verde */
    background-color: transparent !important;
    font-weight: bold !important;
}

.sidebar.toggled .nav-item .collapse .collapse-item:hover {
    color: #2AC191 !important;
    background-color: #eaecf4 !important;
}

/* =========================================================
   4. RESPONSIVIDADE GERAL
   ========================================================= */
@media (max-width: 768px) {
    
    /* MENU FIXO (ESTILO APP)  */
    .sidebar {
        position: fixed !important; 
        top: 0;
        left: 0;
        /* Substituímos o 100vh por 100dvh (Dynamic Viewport Height) para não conflitar com as barras do navegador mobile */
        height: 100% !important;   
        height: 100dvh !important; 
        padding-bottom: 30px !important; /* Dá um respiro extra no final da rolagem */
        z-index: 2000;              
        overflow-y: auto;           
        box-shadow: 4px 0 10px rgba(0,0,0,0.5) !important; 
    }

    /* Força o card da Ouvidoria a aparecer no mobile (o template escondia ele nativamente) */
    .sidebar .sidebar-card {
        display: flex !important;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }

    /* --- INÍCIO DA BARRA SUPERIOR DINÂMICA (FLEXBOX) --- */
    /* Faz o contêiner do menu superior ocupar todo o espaço restante da barra */
    .topbar .navbar-nav {
        flex-grow: 1;
        width: 100%;
    }
    .topbar .navbar-nav .nav-item {
        width: 100%;
    }

    .input-group { 
        width: 100%; 
        flex-wrap: nowrap !important; 
        align-items: center; 
        justify-content: space-between !important; 
        padding-right: 16px !important; /* cria uma barreira que impede a combo de colar no canto direito */
    }

    .input-group-prepend {
        margin-right: auto;
    }
    
    .input-group > .select2-container--default {
        width: 140px !important; /* 140px para compensar a nova margem direita e evitar quebra de linha */
        flex: 0 0 auto !important; 
        min-width: 0 !important;
    }
    
    .logo-mobile-select {
        height: 38px; /* Altura harmônica com a caixa de seleção */
        width: auto;
        max-width: 38vw; /* Impede que a logo invada o select em telas muito finas */
        object-fit: contain;
        margin-right: 25px !important;
    }
    
    .input-group-text {
        padding: 0 !important; /* Zera os espaçamentos internos para não achatar a imagem */
        height: 42px; /* Altura exata da caixa do Select2 */
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center; /* Centraliza a imagem na label */
    }
    /* --- FIM DA BARRA SUPERIOR DINÂMICA --- */
   
    /* Mostra a logo normal completa no mobile e ajusta o tamanho para não vazar o menu */
    .sidebar .logo-normal { 
        display: block !important; 
        width: 85%;
        max-width: 180px; 
        height: auto;
        margin: 0 auto;
    }

    /* Esconde a logo miniatura no mobile */
    .sidebar .logo-mini { 
        display: none !important; 
    }
    
    .sidebar .sidebar-brand-icon {
        transform: none !important;
        text-align: center;
        width: 100%;
        padding: 15px 0; /* Dá um espaço em cima e embaixo para a logo não ficar colada no topo */
    }
}

/* =========================================================
   5. COMPORTAMENTO DOS SUBMENUS
   ========================================================= */

/* --- CENÁRIO A: COMPUTADOR / TABLET (Telas Grandes) --- */
@media (min-width: 768px) {
    .sidebar.toggled .nav-item .collapse {
        position: absolute;
        left: 6.5rem;
        z-index: 999;
        top: 0;
        background-color: transparent !important; 
        border: none !important;
        box-shadow: none !important;
    }

    /* Estilo da CAIXA FLUTUANTE */
    .sidebar.toggled .nav-item .collapse .collapse-inner {
        display: block;
        background-color: #252e49 !important;
        border: 1px solid #4a4e69;
        border-radius: 0.35rem;
        box-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,0.5);
        min-width: 12rem;
        padding: 0.3rem 0 !important;
    }

    /* Estilo dos ITENS (Botões) */
    .sidebar.toggled .nav-item .collapse .collapse-item {
        color: #ffffff !important;
        display: block;
        padding: .5rem 1rem;
        white-space: nowrap;
        font-size: 0.85rem;
        border-radius: 0.35rem; 
        margin: 2px 5px;
        transition: all 0.2s;
    }

    .sidebar.toggled .nav-item .collapse .collapse-item:hover {
        background-color: #2AC191 !important; /* Verde no Hover */
        color: #fff !important;
        text-decoration: none;
    }
    
    .sidebar.toggled .nav-item .collapse .collapse-header {
        color: #b7b9cc !important;
        padding: .5rem 1rem;
        font-size: .85rem;
        font-weight: bold;
    }
}

/* --- CENÁRIO B: CELULAR --- */
@media (max-width: 767.98px) {
    
    /* 1. Aumentar a largura da Sidebar no Mobile */
    /* Isso dá mais espaço para textos longos como "Restos a Pagar" não cortarem */
    .sidebar {
        width: 60vw !important; /* Ocupa 60% da largura da tela */
        max-width: 350px !important; /* Mas não deixa ficar gigante em tablets */
    }

    /* 2. FORÇAR O SUBMENU A FICAR NA FLUXO (RELATIVO) */
    .sidebar .nav-item .collapse,
    .sidebar.toggled .nav-item .collapse {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        height: auto !important; /* Garante que cresça o quanto precisar */
    }

    /* 3. CAIXA PRETA DO SUBMENU */
    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar.toggled .nav-item .collapse .collapse-inner {
        background-color: rgba(0, 0, 0, 0.3) !important; /* Fundo escuro transparente */
        border: none !important;
        border-radius: 0 !important; /* REMOVE CANTOS ARREDONDADOS */
        padding: 5px 0 !important;
        box-shadow: none !important;          
        margin: 0 !important; 
        display: block !important;
        width: 100% !important;
    }

    /* 4. ITENS DO SUBMENU (LINKS) */
    .sidebar .nav-item .collapse .collapse-item,
    .sidebar.toggled .nav-item .collapse .collapse-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 12px 15px 12px 40px !important; /* Mais espaço para o dedo clicar */
        white-space: normal !important; /* Deixa o texto quebrar para a linha de baixo se for longo */
        line-height: 1.2 !important;    /* Ajusta altura da linha */
        border-radius: 0 !important;    /* Remove cantos arredondados */
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 5. DESTAQUE AO CLICAR */
    .sidebar .nav-item .collapse .collapse-item:hover, 
    .sidebar .nav-item .collapse .collapse-item:active,
    .sidebar .nav-item .collapse .collapse-item.active {
        background-color: rgba(42, 193, 145, 0.2) !important; /* Verde transparente */
        color: #fff !important;
        text-decoration: none;
    }

    /* 6. ESTADO OCULTO (FECHADO) */
    .sidebar.toggled {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: none !important; /* Garante que não ocupe espaço e suma */
    }

    /* 7. AJUSTE DO BOTÃO DE MENU (MOBILE) */
    #sidebarToggleTop {
        color: #ffffff !important; /* Deixa as barrinhas brancas */
        margin-right: 6px !important; /* Reduz a margem padrão para puxar a logo para a esquerda */        
    }

    #sidebarToggleTop:hover,
    #sidebarToggleTop:focus {
        color: #f8f9fa !important; /* Um branco levemente acinzentado ao clicar/passar o dedo */
        text-decoration: none;
    }
}

/* =========================================================
   6. ALINHAMENTO DOS ITENS DO MENU NO MOBILE 
   ========================================================= */
@media (max-width: 767.98px) {
    
    /* 1. Transforma os botões em linha (Flexbox) e ocupa 100% da largura */
    .sidebar .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 20px !important;
    }

    /* 2. Coloca o texto do lado do ícone e aumenta o tamanho da fonte */
    .sidebar .nav-item .nav-link span {
        display: inline !important;
        font-size: 1rem !important;
        margin-left: 15px !important; 
    }

    /* 3. Joga a setinha de abrir/fechar o submenu lá para o canto direito */
    .sidebar .nav-item .nav-link::after {
        margin-left: auto !important;
    }

    /* 4. Alinha os pequenos títulos (Ex: FINANÇAS) e reduz o espaçamento ao redor deles */
    .sidebar-heading {
        text-align: left !important;
        padding-left: 20px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        font-size: 0.75rem !important;
    }

    /* 5. Compacta as linhas horizontais divisórias (hr) */
    .sidebar hr.sidebar-divider {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
}

/* =========================================================
   7. ALINHAMENTO ABSOLUTO DOS MENUS NO DESKTOP
   ========================================================= */
@media (min-width: 768px) {
    .sidebar:not(.toggled) .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        padding-left: 1rem !important; /* Trava a margem esquerda exata para TODOS os botões */
    }
    
    .sidebar:not(.toggled) .nav-item .nav-link i {
        margin-right: 0.5rem !important; /* Espaço uniforme entre o ícone e o texto */
    }
    
    .sidebar:not(.toggled) .nav-item .nav-link span {
        margin-left: 0 !important;
    }
    
    .sidebar:not(.toggled) .nav-item .nav-link::after {
        margin-left: auto !important; 
    }
}