/* Cloud IT Learning Platform - Custom Styles */

/* Base */
* { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Line Clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Smooth transitions */
a, button, input, select, textarea { transition: all 0.2s ease; }

/* Focus styles */
input:focus, select:focus, textarea:focus { 
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); 
}

/* Video player responsive */
.aspect-video { aspect-ratio: 16/9; }
video { background: #000; }

/* Loading skeleton */
.skeleton { 
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Progress ring animation */
@keyframes progress-fill { from { stroke-dashoffset: 283; } }

/* Print styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { font-size: 12pt; }
}

/* Responsive helpers */
@media (max-width: 640px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
}

/* Alpine.js collapse transition */
[x-collapse] { overflow: hidden; }