.col-12 .card {
    margin-top: 100px !important;
    margin-left: 30px !important;
    margin-bottom: 30px !important;
    margin-right: 30px !important;
}

/* Se você quiser apenas um espaçamento interno maior, use padding: */
.card .card-body {
    padding: 30px; /* Aumenta o padding interno do card */
}



#tabelaUsuarios tbody td {
    vertical-align: middle; /* Centraliza verticalmente o conteúdo de TODAS as células */
}




/* ======================================================= */
/* OTIMIZAÇÕES E ESTILOS DO MENU LATERAL       */
/* ======================================================= */

/* --- 1. Remocao do espaço entre o Logo e o Menu --- */

/* Nota: O #sidebar-menu foi trocado pelo ID do menu principal (#side-menu) para consolidar */
#side-menu, #sidebar-menu {
    padding-top: 0px !important; 
    margin-top: 0px !important; /* Zera o padding e a margem superior do container da lista */
}

#side-menu > li:first-child {
    /* Garante que o primeiro item não tenha margens ou bordas empurrando-o para baixo */
    margin-top: 0px !important; 
    border-top: none !important; 
}


/* --- 2. Tamanho da Fonte, Espaçamento e Transição --- */

#side-menu li a {
    /* Configura o tamanho da fonte do texto (span) */
    font-size: 16px !important; 
    
    /* Configura o espaçamento vertical */
    padding-top: 12px !important; 
    padding-bottom: 12px !important;
    
    /* Adiciona a transição suave para o efeito hover */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- 3. Ajuste do Ícone (Tamanho e Espaçamento Horizontal) --- */

#side-menu li a i {
    font-size: 18px !important;         /* Ícone ligeiramente maior */
    vertical-align: middle !important;  /* Ajuda a alinhar o ícone com o texto */
    margin-right: 15px !important;      /* Espaço entre o ícone e o texto */
}

/* --- 4. Separador Visual (Linha Divisória) --- */

#side-menu > li {
    /* Linha sutil para menus escuros */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Remove a linha do último item */
#side-menu > li:last-child {
    border-bottom: none !important;
}

/* ---------------------------------------------------- */
/* 5. EFEITO HOVER e Estado ATIVO (CORREÇÃO FINAL)      */
/* ---------------------------------------------------- */

/* 🚨 NOVO! Foca no LI ao passar o mouse e aplica o estilo ao link filho direto 🚨 */
#side-menu > li > a  {
    /* Cor de fundo para o HOVER/ATIVO */
    background-color: rgba(255, 255, 255, 0.12) !important; /* Aumentei para 0.12 para ser mais visível */
}
#side-menu > li:hover > a  {
    /* Cor de fundo para o HOVER/ATIVO */
    background-color: rgba(255, 255, 255, 0) !important; /* Aumentei para 0.12 para ser mais visível */
}

/* 🚨 NOVO! Foca no LI ao passar o mouse e garante que o ícone fique branco 🚨 */
#side-menu > li:hover > a i  {
    color: #FFFFFF !important; 
}

/* Mantém a transição suave */
#side-menu li a {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- 6. Submenu (Apenas ajuste de fonte) --- */

/* Ajuste opcional para itens de submenu */
#side-menu ul.sub-menu li a {
     font-size: 15px !important;
}