/* static/css/sidebar_fix.css */

/* Estilo para os itens da barra lateral */
.sidebar-nav-item {
    display: flex !important; /* Garante que seja um flex container */
    align-items: center !important; /* Alinha verticalmente */
    padding-left: 0.5rem !important; /* Espaço entre a borda esquerda e o ícone */
    padding-right: 0.625rem !important; /* Espaço à direita */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.5rem !important; /* Espaço entre o ícone e o texto */
    text-decoration: none !important; /* Remover sublinhado */
    color: var(--cor-sidebar-texto-app) !important; /* Cor do texto */
    width: 100% !important; /* Garante que o item ocupe toda a largura disponível */
    
    /* Efeito 3D Permanente */
    border-bottom: 3px solid rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 4px !important; /* Espaçamento entre botões */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease-in-out !important;
}

.sidebar-nav-item:hover {
    border-bottom: 3px solid rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-nav-item:active {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    transform: translateY(2px) !important;
    box-shadow: none !important;
}

/* Estilo para o ícone dentro do item da barra lateral */
.sidebar-nav-item .sidebar-nav-icon {
    margin-right: 0 !important; /* Garante que não há margem extra no ícone */
    flex-shrink: 0 !important; /* Impede que o ícone encolha */
}

/* Estilo para o texto dentro do item da barra lateral */
.sidebar-nav-item .sidebar-nav-text {
    white-space: nowrap !important; /* Impede que o texto quebre linha */
    overflow: hidden !important; /* Esconde o texto se for muito longo */
    text-overflow: ellipsis !important; /* Adiciona reticências se o texto for cortado */
    display: block !important; /* Garante que o texto seja visível por padrão */
}

/* Ajustes para quando a barra lateral está fechada */
/* Esta classe precisa ser aplicada ao .sidebar-nav-item quando a barra lateral estiver fechada */
.sidebar-nav-item.sidebar-closed .sidebar-nav-text {
    display: none !important; /* Esconde o texto quando a barra lateral está fechada */
}

/* Para garantir que os itens da barra lateral fiquem um abaixo do outro */
nav.flex-1.p-3.space-y-1\.5.text-sm.overflow-y-auto.min-h-0 {
    display: flex !important;
    flex-direction: column !important;
}