/**
 * Tailwind CSS - Main Stylesheet
 * Using CDN + custom extensions
 */

@import url('https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/tailwind.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Global styles */
body {
    @apply bg-gray-50 text-gray-900;
}

/* Links */
a {
    @apply transition-colors duration-200;
}

a:hover {
    @apply text-blue-600;
}

/* Buttons */
.btn {
    @apply inline-block px-6 py-2 rounded-lg font-medium transition-all duration-200;
}

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

.btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300;
}

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

.btn-icon {
    @apply inline-flex items-center justify-center;
}

/* Cards */
.card {
    @apply bg-white rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-200;
}

.card-hover {
    @apply hover:translate-y-[-4px];
}

/* Container with max-width */
.container-fluid {
    @apply px-4 sm:px-6 lg:px-8;
}

/* Responsive typography */
h1 {
    @apply text-3xl sm:text-4xl lg:text-5xl font-bold;
}

h2 {
    @apply text-2xl sm:text-3xl lg:text-4xl font-bold;
}

h3 {
    @apply text-xl sm:text-2xl lg:text-3xl font-semibold;
}

h4 {
    @apply text-lg sm:text-xl font-semibold;
}

p {
    @apply leading-relaxed text-gray-700;
}

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

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

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    @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;
}

textarea {
    @apply resize-none;
}

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

@keyframes slideUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

/* Utility classes */
.text-muted {
    @apply text-gray-600;
}

.text-dark {
    @apply text-gray-900;
}

.text-light {
    @apply text-gray-500;
}

.bg-gradient {
    background: linear-gradient(135deg, #1e3a5f 0%, #2980b9 100%);
}

/* Loading spinner */
.spinner {
    @apply inline-block h-4 w-4 border-4 border-blue-600 border-r-transparent rounded-full animate-spin;
}

/* Divider */
.divider {
    @apply border-t border-gray-200;
}

/* Truncate text */
.truncate-2 {
    @apply line-clamp-2;
}

.truncate-3 {
    @apply line-clamp-3;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}