/* Custom CSS for CollegeConnect Platform */

/* Font Family */
.font-inter {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out;
}

/* Custom Utilities */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Navigation Styles */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300;
}

.nav-link-active {
    @apply text-blue-600 bg-blue-50;
}

/* Counter Animation */
.counter {
    transition: all 0.5s ease-out;
}

/* Hover Effects */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Loading Animation */
.loading-spinner {
    @apply animate-spin rounded-full border-b-2 border-current;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .mobile-menu-open {
        @apply block;
    }
    
    .mobile-menu-closed {
        @apply hidden;
    }
}

/* Focus Styles for Accessibility */
.focus-visible\:ring-2:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #3b82f6;
}

/* Custom Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-300 resize-none;
}

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

/* Badge Styles */
.badge {
    @apply inline-flex items-center 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;
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

/* Alert Styles */
.alert {
    @apply p-4 rounded-lg border-l-4 mb-4;
}

.alert-success {
    @apply bg-green-50 border-green-400 text-green-800;
}

.alert-error {
    @apply bg-red-50 border-red-400 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-400 text-blue-800;
}

/* Table Styles */
.table {
    @apply w-full text-left border-collapse;
}

.table th {
    @apply bg-gray-50 border-b border-gray-200 px-4 py-3 text-sm font-semibold text-gray-900;
}

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

.table tr:hover {
    @apply bg-gray-50;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-full-width {
        width: 100% !important;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}