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

/* Custom Components */
@layer components {
    /* Cards */
    .card {
        @apply bg-white rounded-lg shadow-sm border border-gray-200;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
    }

    .card-body {
        @apply p-6;
    }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
    }

    .btn-secondary {
        @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
    }

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

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

    .btn-warning {
        @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
    }

    .btn-outline {
        @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500;
    }

    /* Forms */
    .form-group {
        @apply mb-6;
    }

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

    .form-input {
        @apply block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors duration-200;
    }

    .form-select {
        @apply block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors duration-200;
    }

    .form-textarea {
        @apply block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors duration-200 resize-vertical;
    }

    .form-checkbox {
        @apply rounded border-gray-300 text-blue-600 focus:ring-blue-500 transition-colors duration-200;
    }

    /* Tables */
    .table-container {
        @apply overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5 rounded-lg;
    }

    .table {
        @apply min-w-full divide-y divide-gray-200;
    }

    .table-header {
        @apply bg-gray-50;
    }

    .table-header-cell {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }

    .table-body {
        @apply bg-white divide-y divide-gray-200;
    }

    .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }

    /* Stats Cards */
    .stat-card {
        @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
    }

    .stat-card-icon {
        @apply p-3 rounded-lg;
    }

    .stat-card-number {
        @apply text-2xl font-semibold text-gray-900;
    }

    .stat-card-label {
        @apply text-sm font-medium text-gray-600;
    }

    /* Badges */
    .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-danger {
        @apply bg-red-100 text-red-800;
    }

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

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

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

    /* Alerts */
    .alert {
        @apply rounded-lg p-4 mb-4;
    }

    .alert-success {
        @apply bg-green-50 text-green-800 border border-green-200;
    }

    .alert-error {
        @apply bg-red-50 text-red-800 border border-red-200;
    }

    .alert-warning {
        @apply bg-yellow-50 text-yellow-800 border border-yellow-200;
    }

    .alert-info {
        @apply bg-blue-50 text-blue-800 border border-blue-200;
    }

    /* Loading States */
    .loading {
        @apply opacity-50 pointer-events-none;
    }

    .spinner {
        @apply animate-spin rounded-full h-4 w-4 border-b-2 border-current;
    }

    /* Modal */
    .modal-overlay {
        @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 transition-opacity duration-300;
    }

    .modal-container {
        @apply relative top-20 mx-auto p-4 border w-full max-w-md shadow-lg rounded-lg bg-white transform transition-all duration-300;
    }

    /* Navigation */
    .nav-link {
        @apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200;
    }

    .nav-link-active {
        @apply bg-blue-100 text-blue-700;
    }

    .nav-link-inactive {
        @apply text-gray-600 hover:bg-gray-100 hover:text-gray-900;
    }
}

/* Custom Utilities */
@layer utilities {
    .text-shadow {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .hover-lift {
        transition:
            transform 0.2s ease-in-out,
            box-shadow 0.2s ease-in-out;
    }

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow:
            0 10px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dark-mode-card {
        @apply bg-gray-800 border-gray-700 text-white;
    }

    .dark-mode-input {
        @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
    }
}

.bg-warning {
    background-color: #ffc107 !important;
}