/* Importa as classes de utilitários do Tailwind para poder usá-las no CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos personalizados da aplicação */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Efeito de clique nos botões (mantido) */
button:active, .nav-link:active {
    transform: scale(0.95);
}

/* Componentes personalizados usando @apply do Tailwind */
@layer components {
    /* Links da barra de navegação lateral */
    .nav-link {
        @apply flex items-center px-4 py-3 text-slate-300 rounded-md text-sm font-medium;
        @apply transition-all duration-200;
    }
    .nav-link:hover {
        @apply bg-slate-700 text-white;
    }
    .nav-link.active {
        @apply bg-blue-500 text-white shadow-md;
    }

    /* Estilos base para botões */
    .btn {
        @apply flex items-center justify-center px-4 py-2 text-sm font-semibold text-white rounded-md shadow-sm;
        @apply transition-all duration-200;
    }
    .btn-primary {
        @apply bg-blue-500 hover:bg-blue-600;
    }
    .btn-secondary {
        @apply bg-slate-500 hover:bg-slate-600;
    }
    .btn-success {
        @apply bg-green-500 hover:bg-green-600;
    }
    .btn-danger {
        @apply bg-red-500 hover:bg-red-600;
    }

    /* Estilos para tabelas */
    .table-header {
        @apply px-6 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider;
    }

    /* Estilos para Modals */
    .modal-backdrop {
        @apply fixed inset-0 z-50 hidden items-center justify-center p-4;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .modal-content {
        @apply bg-white rounded-lg shadow-xl w-full flex flex-col max-h-[90vh];
    }
    .modal-header {
        @apply p-4 border-b border-slate-200 flex justify-between items-center;
    }
    .modal-header h3 {
        @apply text-lg font-semibold text-slate-800;
    }
    .close-modal-btn {
        @apply text-slate-400 hover:text-slate-800 text-2xl leading-none font-bold;
    }

    /* Estilos para inputs e labels */
    .label {
        @apply block text-sm font-medium text-slate-600;
    }
    .input {
        @apply mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm;
        @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }
}

/* Estilo para a barra de rolagem (opcional, mas adiciona polimento) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #a8a8a8;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #888;
}