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

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

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #1e293b;
    --light: #f1f5f9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* Glassmorphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-white {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button Styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300 inline-flex items-center justify-center gap-2;
}

.btn-primary {
    @apply bg-gradient-to-r from-indigo-500 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-700 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-gradient-to-r from-pink-500 to-rose-500 text-white hover:from-pink-600 hover:to-rose-600 shadow-lg hover:shadow-xl;
}

.btn-success {
    @apply bg-gradient-to-r from-emerald-500 to-teal-600 text-white hover:from-emerald-600 hover:to-teal-700 shadow-lg hover:shadow-xl;
}

.btn-danger {
    @apply bg-gradient-to-r from-red-500 to-pink-600 text-white hover:from-red-600 hover:to-pink-700 shadow-lg hover:shadow-xl;
}

.btn-outline {
    @apply border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white;
}

/* Card Styles */
.card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl;
}

.card-glass {
    @apply glass rounded-xl overflow-hidden transition-all duration-300 hover:shadow-2xl;
}

/* Input Styles */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:outline-none transition-all duration-300;
}

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

/* Sidebar */
.sidebar {
    @apply fixed left-0 top-0 h-full w-64 glass-white shadow-2xl z-40 transform transition-transform duration-300;
}

.sidebar-link {
    @apply flex items-center gap-3 px-6 py-3 text-gray-700 hover:bg-gradient-to-r hover:from-indigo-500 hover:to-purple-600 hover:text-white transition-all duration-300;
}

.sidebar-link.active {
    @apply bg-gradient-to-r from-indigo-500 to-purple-600 text-white;
}

/* Stats Card */
.stat-card {
    @apply bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 border-l-4;
}

.stat-card-primary {
    @apply border-indigo-500;
}

.stat-card-success {
    @apply border-emerald-500;
}

.stat-card-warning {
    @apply border-amber-500;
}

.stat-card-danger {
    @apply border-red-500;
}

/* Table */
.table {
    @apply w-full bg-white rounded-xl shadow-lg overflow-hidden;
}

.table thead {
    @apply bg-gradient-to-r from-indigo-500 to-purple-600 text-white;
}

.table th {
    @apply px-6 py-4 text-left font-semibold text-sm uppercase tracking-wider;
}

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

.table tbody tr {
    @apply hover:bg-indigo-50 transition-colors duration-200;
}

/* Badge */
.badge {
    @apply px-3 py-1 rounded-full text-xs font-semibold inline-block;
}

.badge-primary {
    @apply bg-indigo-100 text-indigo-700;
}

.badge-success {
    @apply bg-emerald-100 text-emerald-700;
}

.badge-warning {
    @apply bg-amber-100 text-amber-700;
}

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

/* Modal */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50 backdrop-blur-sm;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

/* Toast Notification */
.toast {
    @apply fixed top-4 right-4 z-50 max-w-md;
}

.toast-success {
    @apply bg-emerald-500 text-white px-6 py-4 rounded-lg shadow-xl flex items-center gap-3;
}

.toast-error {
    @apply bg-red-500 text-white px-6 py-4 rounded-lg shadow-xl flex items-center gap-3;
}

/* Calendar Customization */
.fc {
    @apply bg-white rounded-xl shadow-lg p-4;
}

.fc-button {
    @apply bg-gradient-to-r from-indigo-500 to-purple-600 border-0 hover:from-indigo-600 hover:to-purple-700;
}

.fc-event {
    @apply cursor-pointer rounded-lg;
}

/* Loading Spinner */
.spinner {
    @apply border-4 border-gray-200 border-t-indigo-500 rounded-full w-12 h-12 animate-spin;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5568d3 0%, #663d8a 100%);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    }
    
    .glass-white {
        background: rgba(30, 41, 59, 0.95);
    }
    
    .card {
        @apply bg-slate-800 text-white;
    }
}