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

html {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Global font size adjustments to match dedupe page styling */
body {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Headings */
h1, .text-3xl {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

h2, .text-2xl {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

h3, .text-xl {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

h4, .text-lg {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* Body text */
.text-base, .text-sm {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

.text-xs {
    font-size: 0.625rem !important;
}

/* Override Tailwind's default font sizes */
.text-4xl { font-size: 1.5rem !important; }
.text-5xl { font-size: 1.75rem !important; }
.text-6xl { font-size: 2rem !important; }

/* Card and component text */
.card-title,
.text-lg {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* Form elements */
.form-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Table text */
.table th {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
}

.table td {
    font-size: 0.75rem !important;
}

/* Button text */
.btn-primary,
.btn-secondary {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Navigation text */
.nav-item {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Status badges */
.status-active,
.status-inactive,
.status-pending {
    font-size: 0.625rem !important;
    font-weight: 500 !important;
}

/* Enhanced error message styling */
.errorlist {
    @apply space-y-3;
}

.errorlist li {
    @apply bg-red-50 border-l-4 border-red-400 rounded-lg p-4 text-red-800;
    white-space: pre-line;
    font-weight: 500;
    line-height: 1.6;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, sans-serif;
}

.errorlist li:first-child {
    @apply bg-red-100 border-red-500;
    font-weight: 600;
    font-size: 1rem;
}

/* Specific styling for enrollment form errors */
.bg-red-50 .text-red-700 li {
    @apply bg-red-100 border-l-4 border-red-500 rounded-lg p-4 mb-3;
    white-space: pre-line;
    line-height: 1.6;
    font-weight: 500;
}

.bg-red-50 .text-red-700 li:first-child {
    @apply bg-red-200 border-red-600;
    font-weight: 600;
}

.btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-secondary-100 hover:bg-secondary-200 text-secondary-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.card {
    @apply bg-white rounded-xl shadow-sm border border-secondary-200 p-6;
}

.nav-link {
    @apply text-secondary-600 hover:text-primary-600 font-medium transition-colors duration-200;
}

/* Navigation styles */
.nav-item {
    @apply group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition-colors duration-200;
}

.nav-item-active {
    @apply bg-blue-50 text-blue-700 border-r-2 border-blue-600;
}

.nav-item svg {
    @apply mr-3 flex-shrink-0 h-5 w-5;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Card styles */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

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

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

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}

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

/* Card styles */
.card-header {
    @apply border-b border-secondary-200 pb-4 mb-4;
}

.card-title {
    @apply text-lg font-semibold text-secondary-900;
}

/* Table styles */
.table {
    @apply min-w-full divide-y divide-secondary-200;
}

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

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

/* Status badges */
.status-active {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-inactive {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.status-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

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

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

@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

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

.slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

.scale-in {
    animation: scaleIn 0.4s ease-out;
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Hover animations */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Gradient text animation */
.gradient-text {
    background: linear-gradient(45deg, #0ea5e9, #0284c7, #0369a1);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        @apply hidden;
    }
}