@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        font-family: 'Inter', sans-serif;
        @apply bg-gray-50 text-gray-800;
    }
}

@layer components {
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
    }
    
    .btn-secondary {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
    }
    
    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-sm p-6;
    }
    
    .input-field {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors duration-200;
    }
    
    .table-container {
        @apply overflow-x-auto rounded-lg shadow-sm;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table th {
        @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-800;
    }
    
    .table tr:nth-child(even) {
        @apply bg-gray-50;
    }
    
    .table tr:hover {
        @apply bg-blue-50;
    }
    
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-success {
        @apply bg-green-100 text-green-800;
    }
    
    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }
    
    .badge-danger {
        @apply bg-red-100 text-red-800;
    }
    
    .badge-info {
        @apply bg-blue-100 text-blue-800;
    }
}

/* Animation classes */
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 300ms;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 300ms;
}

.slide-in-right {
    animation: slideInRight 0.3s forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}