/* 
 * Ademy - Nigerian Secondary Education Platform
 * Custom CSS styles to complement Tailwind CSS
 * Constitutional compliance: Clean, accessible design
 */

/* Typography and text utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* Custom scrollbars for better UX */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Loading animations */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.loading-pulse {
    animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Progress bars with smooth animations */
.progress-bar {
    transition: width 0.5s ease-in-out;
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease-in-out;
}

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

/* Nigerian flag colors for accent elements */
.nigeria-green {
    background-color: #008751;
}

.nigeria-green-light {
    background-color: #00a859;
}

.text-nigeria-green {
    color: #008751;
}

/* Focus styles for accessibility */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

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

.form-input:invalid {
    @apply border-red-300 focus:border-red-500 focus:ring-red-500;
}

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

.form-error {
    @apply mt-1 text-sm text-red-600;
}

/* Button variations */
.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-200 hover:bg-gray-300 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

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

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

/* HTMX loading states */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Disabled state for forms during submission */
.htmx-request input,
.htmx-request button,
.htmx-request select,
.htmx-request textarea {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Notification styles */
.notification {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-lg shadow-lg border-l-4 p-4;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    @apply border-green-500;
}

.notification.error {
    @apply border-red-500;
}

.notification.warning {
    @apply border-yellow-500;
}

.notification.info {
    @apply border-blue-500;
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
    .mobile-padding {
        @apply px-4;
    }
    
    .mobile-text {
        @apply text-sm;
    }
    
    /* Ensure touch targets are at least 44px */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Print styles for study materials */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-break-avoid {
        page-break-inside: avoid;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-900;
    }
    
    .btn-primary {
        @apply border-2 border-blue-900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .card {
        @apply bg-gray-800 border-gray-700;
    }
    
    .dark-mode .form-input {
        @apply bg-gray-800 border-gray-600 text-white;
    }
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

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

/* Quiz/Assessment specific styles */
.question-card {
    @apply bg-white rounded-lg shadow-md p-6 mb-6 border-l-4 border-blue-500;
}

.option-card {
    @apply border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-200;
}

.option-card:hover {
    @apply bg-blue-50 border-blue-300;
}

.option-card.selected {
    @apply bg-blue-100 border-blue-500;
}

.option-card.correct {
    @apply bg-green-100 border-green-500;
}

.option-card.incorrect {
    @apply bg-red-100 border-red-500;
}

/* Progress indicators */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dasharray 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Subject icons styling */
.subject-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-2xl mb-3 mx-auto;
}

.subject-math {
    @apply bg-blue-100 text-blue-600;
}

.subject-english {
    @apply bg-green-100 text-green-600;
}

.subject-science {
    @apply bg-purple-100 text-purple-600;
}

.subject-social {
    @apply bg-orange-100 text-orange-600;
}

/* Exam type badges */
.exam-waec {
    @apply bg-green-100 text-green-800;
}

.exam-neco {
    @apply bg-blue-100 text-blue-800;
}

.exam-jamb {
    @apply bg-purple-100 text-purple-800;
}

/* Performance indicators */
.performance-excellent {
    @apply text-green-600;
}

.performance-good {
    @apply text-blue-600;
}

.performance-fair {
    @apply text-yellow-600;
}

.performance-poor {
    @apply text-red-600;
}