/* Custom CSS for SDemy */

/* Dark mode initialization */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

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

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

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

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white px-4 py-2 rounded-lg font-medium transition-colors;
}

.btn-outline {
    @apply border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg font-medium transition-colors;
}

.btn-dark {
    @apply bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg font-medium transition-colors dark:bg-gray-700 dark:hover:bg-gray-600;
}

/* Form styles removed - using native Tailwind classes */

/* Card styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700;
}

/* Course card styles */
.course-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-all duration-300;
}

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

/* Enhanced course card for better accessibility */
.course-card-enhanced {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border-2 border-gray-200 dark:border-gray-600 overflow-hidden transition-all duration-300;
    min-height: 420px;
}

.course-card-enhanced:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-color: #3b82f6;
}

.course-card-enhanced:focus-within {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Course watch button styles */
.course-watch-btn {
    @apply inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl;
    min-height: 48px;
    font-size: 1rem;
}

.course-watch-btn:focus {
    outline: 3px solid #10b981;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.course-watch-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

/* Course card content improvements */
.course-card-content {
    @apply p-6;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-title-enhanced {
    @apply text-xl font-bold text-gray-900 dark:text-white mb-3 line-height-tight;
    min-height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-description-enhanced {
    @apply text-gray-600 dark:text-gray-400 mb-4 text-enhanced;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Video player container */
.video-container {
    @apply relative w-full bg-black rounded-lg overflow-hidden;
    aspect-ratio: 16/9;
}

.video-player {
    width: 100%;
    height: 100%;
}

/* Responsive video container */
@media (max-width: 1023px) {
    .video-container {
        aspect-ratio: 16/9;
        height: auto !important;
    }
    
    .video-player {
        height: 100% !important;
    }
}

/* Watch page responsive improvements */
.watch-sidebar {
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 1023px) {
    .watch-sidebar.hidden {
        transform: translateX(100%);
    }
    
    .watch-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(0);
    }
}

/* Mobile video info improvements */
@media (max-width: 768px) {
    .video-info-tags {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .video-info-tags > span {
        display: inline-block;
    }
}

/* Improved mobile navigation */
.mobile-nav-button {
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
    .video-list-item {
        padding: 1rem !important;
        min-height: 80px;
    }
    
    .video-list-item h3 {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .complete-button {
        min-height: 48px;
        font-size: 1rem;
    }
}

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800;
}

.alert-error {
    @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800;
}

.alert-warning {
    @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800;
}

.alert-info {
    @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

/* Quiz styles */
.quiz-option {
    @apply p-3 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}

.quiz-option.selected {
    @apply bg-blue-50 dark:bg-blue-900 border-blue-300 dark:border-blue-600;
}

.quiz-option.correct {
    @apply bg-green-50 dark:bg-green-900 border-green-300 dark:border-green-600;
}

.quiz-option.incorrect {
    @apply bg-red-50 dark:bg-red-900 border-red-300 dark:border-red-600;
}

/* Line clamp utility */
.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;
}

/* Mobile responsive improvements for watch page */
@media (max-width: 1023px) {
    /* Ensure video player takes full width on mobile */
    .video-container {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        aspect-ratio: 16/9;
    }
    
    /* Mobile sidebar overlay */
    #sidebar.fixed {
        background-color: rgba(31, 41, 55, 0.98);
        backdrop-filter: blur(8px);
    }
    
    /* Better mobile video info layout */
    .mobile-video-info {
        padding: 1rem;
        background: linear-gradient(to bottom, rgba(31, 41, 55, 0.9), rgba(31, 41, 55, 1));
    }
    
    /* Improved mobile video list */
    .mobile-video-list .video-item {
        padding: 1rem;
        border-bottom: 1px solid rgba(75, 85, 99, 0.5);
    }
    
    /* Touch-friendly buttons */
    .mobile-complete-btn {
        min-height: 48px;
        font-size: 1rem;
        font-weight: 600;
    }
}

/* Desktop specific styles */
@media (min-width: 1024px) {
    .video-container {
        height: auto;
        max-height: 70vh;
        aspect-ratio: 16/9;
    }
    
    /* Desktop watch page layout */
    .watch-desktop-layout {
        max-width: 1200px;
        margin: 0 auto;
        background: white;
        min-height: auto;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        padding: 2rem;
    }
    
    .dark .watch-desktop-layout {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    }
    
    /* Desktop video info section */
    .desktop-video-info {
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    
    /* Desktop course content */
    .desktop-course-content {
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        margin-top: 2rem;
    }
    
    /* Desktop video list improvements */
    .desktop-video-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1rem;
    }
    
    /* Desktop video item */
    .desktop-video-item {
        background: rgba(55, 65, 81, 0.5);
        border: 1px solid rgba(75, 85, 99, 0.3);
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .desktop-video-item:hover {
        background: rgba(55, 65, 81, 0.8);
        border-color: rgba(59, 130, 246, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

.progress-fill {
    @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .course-card {
        @apply mx-2;
    }
    
    .card {
        @apply mx-2 rounded-lg;
    }
}

/* Accessibility Enhancements for Visually Impaired Users */

/* High contrast focus indicators */
*:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Enhanced radio button visibility */
input[type="radio"] {
    transform: scale(1.2);
    accent-color: #3b82f6;
}

input[type="radio"]:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

/* Enhanced button hover and focus states */
button:hover, button:focus {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Screen reader only content */
.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;
}

/* Enhanced quiz option styles for accessibility */
.quiz-option-enhanced {
    border-width: 3px !important;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.quiz-option-enhanced:hover {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    transform: scale(1.02);
}

.quiz-option-enhanced:focus-within {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Enhanced text readability */
.text-enhanced {
    line-height: 1.8 !important;
    letter-spacing: 0.025em !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: #000 !important;
    }
    
    .bg-white {
        background-color: #fff !important;
        color: #000 !important;
    }
    
    .bg-gray-800 {
        background-color: #000 !important;
        color: #fff !important;
    }
    
    button {
        border: 2px solid #000 !important;
    }
}

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

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}