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

* {
    @apply transition-colors duration-200;
}

/* Custom styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800;
}

.btn-primary-outline {
    @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-50;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

.btn-sm {
    @apply px-2 py-1 text-sm;
}

.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.input-error {
    @apply border-red-500 focus:ring-red-500;
}

.label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.alert {
    @apply px-4 py-3 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-800 border border-green-400;
}

.alert-error {
    @apply bg-red-100 text-red-800 border border-red-400;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-400;
}

.alert-info {
    @apply bg-blue-100 text-blue-800 border border-blue-400;
}

.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-medium;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.table {
    @apply w-full border-collapse;
}

.table thead {
    @apply bg-gray-100;
}

.table th {
    @apply px-6 py-3 text-left text-sm font-semibold text-gray-700 border-b;
}

.table td {
    @apply px-6 py-3 border-b text-sm text-gray-700;
}

.table tbody tr:hover {
    @apply bg-gray-50;
}