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

/* Custom components */
@layer components {
    /* Button variants */
    .btn {
        @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500;
    }
    
    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-500 transition-colors duration-200 shadow-md;
    }
    
    .btn-secondary {
        @apply bg-gray-700 text-white hover:bg-gray-600 transition-colors duration-200;
    }
    
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700;
    }
    
    /* Card styles */
    .card {
        @apply bg-gray-800 rounded-lg shadow-lg overflow-hidden;
    }
    
    .card-header {
        @apply px-6 py-4 border-b border-gray-700;
    }
    
    .card-body {
        @apply p-6;
    }
    
    .card-footer {
        @apply px-6 py-4 border-t border-gray-700;
    }
    
    /* Form elements */
    .form-input {
        @apply mt-1 block w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md shadow-sm text-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }
    
    .form-select {
        @apply mt-1 block w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md shadow-sm text-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }
    
    .form-checkbox {
        @apply h-4 w-4 text-blue-600 bg-gray-800 border-gray-700 rounded focus:ring-blue-500;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-300;
    }
    
    /* Chart container */
    .chart-container {
        @apply bg-gray-800 rounded-lg shadow-lg p-4 h-80;
    }
    
    /* Dashboard sections */
    .dashboard-section {
        @apply mb-8;
    }
    
    .dashboard-header {
        @apply flex justify-between items-center mb-4;
    }
    
    /* File upload styles */
    .dropzone {
        @apply border-2 border-dashed border-gray-600 rounded-lg p-6 text-center cursor-pointer transition-colors duration-200;
    }
    .card, .chart-container {
        @apply bg-gray-900 rounded-2xl shadow-xl border border-gray-800 transition-all duration-200;
    }
    .form-input, .form-select {
        @apply bg-gray-900 border-gray-700 text-gray-200 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
    }
}

/* Custom utilities */
@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .max-h-90vh {
        max-height: 90vh;
    }
}