@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

/* CSS Variables for Theming */
:root {
    /* Light theme colors */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    --color-success-50: #f0fdf4;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;

    --color-warning-50: #fffbeb;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;

    --color-error-50: #fef2f2;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;

    /* Background and surface colors */
    --bg-primary: var(--color-gray-50);
    --bg-secondary: white;
    --bg-tertiary: var(--color-gray-100);
    --bg-hover: var(--color-gray-50);

    /* Text colors */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: white;

    /* Border colors */
    --border-primary: var(--color-gray-200);
    --border-secondary: var(--color-gray-300);
    --border-hover: var(--color-gray-400);
}

/* Dark theme */
.dark {
    --color-primary-50: #1e3a8a;
    --color-primary-100: #1e40af;
    --color-primary-200: #1d4ed8;
    --color-primary-300: #2563eb;
    --color-primary-400: #3b82f6;
    --color-primary-500: #60a5fa;
    --color-primary-600: #93c5fd;
    --color-primary-700: #bfdbfe;
    --color-primary-800: #dbeafe;
    --color-primary-900: #eff6ff;

    --color-gray-50: #111827;
    --color-gray-100: #1f2937;
    --color-gray-200: #374151;
    --color-gray-300: #4b5563;
    --color-gray-400: #6b7280;
    --color-gray-500: #9ca3af;
    --color-gray-600: #d1d5db;
    --color-gray-700: #e5e7eb;
    --color-gray-800: #f3f4f6;
    --color-gray-900: #f9fafb;

    --color-success-50: #14532d;
    --color-success-500: #16a34a;
    --color-success-600: #22c55e;

    --color-warning-50: #451a03;
    --color-warning-500: #d97706;
    --color-warning-600: #f59e0b;

    --color-error-50: #450a0a;
    --color-error-500: #dc2626;
    --color-error-600: #ef4444;

    --bg-primary: var(--color-gray-900);
    --bg-secondary: var(--color-gray-800);
    --bg-tertiary: var(--color-gray-700);
    --bg-hover: var(--color-gray-800);

    --text-primary: var(--color-gray-100);
    --text-secondary: var(--color-gray-400);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: var(--color-gray-900);

    --border-primary: var(--color-gray-700);
    --border-secondary: var(--color-gray-600);
    --border-hover: var(--color-gray-500);
}

/* Custom components */
@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }

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

    .btn-secondary {
        @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600;
    }

    .btn-ghost {
        @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800;
    }

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

    .card {
        @apply bg-secondary rounded-xl shadow-soft border border-border-primary p-6 transition-shadow duration-200 hover:shadow-medium;
    }

    .input {
        @apply w-full px-3 py-2 border border-border-secondary rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200 bg-secondary text-text-primary placeholder-text-tertiary;
    }

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

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

    .status-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .status-success {
        @apply bg-success-50 text-success-600 dark:bg-success-900 dark:text-success-400;
    }

    .status-warning {
        @apply bg-warning-50 text-warning-600 dark:bg-warning-900 dark:text-warning-400;
    }

    .status-error {
        @apply bg-error-50 text-error-600 dark:bg-error-900 dark:text-error-400;
    }

    .status-info {
        @apply bg-primary-50 text-primary-600 dark:bg-primary-900 dark:text-primary-400;
    }

    .progress-bar {
        @apply w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700;
    }

    .progress-fill {
        @apply bg-primary-500 h-2 rounded-full transition-all duration-300;
    }

    .sidebar {
        @apply fixed inset-y-0 left-0 z-50 w-64 bg-secondary border-r border-border-primary transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0;
    }

    .sidebar-overlay {
        @apply fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden;
    }

    .nav-item {
        @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors duration-200 mx-2;
    }

    .nav-item-active {
        @apply bg-primary-50 text-primary-700 border-r-2 border-primary-500 dark:bg-primary-900 dark:text-primary-300;
    }

    .nav-item-inactive {
        @apply text-text-secondary hover:text-text-primary hover:bg-bg-hover;
    }

    .table {
        @apply min-w-full divide-y divide-border-primary;
    }

    .table-header {
        @apply bg-tertiary;
    }

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

    .table-body {
        @apply bg-secondary divide-y divide-border-primary;
    }

    .table-body td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-text-primary;
    }

    .modal-overlay {
        @apply fixed inset-0 z-50 overflow-y-auto;
    }

    .modal-backdrop {
        @apply flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0;
    }

    .modal-content {
        @apply inline-block align-bottom bg-secondary rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
    }

    .toast {
        @apply fixed bottom-4 right-4 z-50 max-w-sm w-full bg-secondary border border-border-primary rounded-lg shadow-medium p-4;
    }

    .toast-success {
        @apply border-success-500 bg-success-50 dark:bg-success-900;
    }

    .toast-error {
        @apply border-error-500 bg-error-50 dark:bg-error-900;
    }

    .toast-warning {
        @apply border-warning-500 bg-warning-50 dark:bg-warning-900;
    }
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}