/* ============================================
   PRODUCTION OPTIMIZED CSS - LMS Platform
   Consolidated and minified for performance
   ============================================ */

/* CSS Variables */
:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:217 91% 60%;--primary-foreground:0 0% 100%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:142 71% 45%;--accent-foreground:0 0% 100%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:217 91% 60%;--chart-1:217 91% 60%;--chart-2:142 71% 45%;--chart-3:38 92% 50%;--chart-4:280 65% 60%;--chart-5:340 75% 55%;--radius:0.5rem;--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-secondary:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);--gradient-success:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);--gradient-warning:linear-gradient(135deg,#fa709a 0%,#fee140 100%);--gradient-card:linear-gradient(135deg,#ffffff 0%,#f9fafb 100%);--shadow-sm:0 2px 4px rgba(0,0,0,0.05);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-lg:0 10px 30px rgba(0,0,0,0.15);--shadow-xl:0 20px 50px rgba(0,0,0,0.2);--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--transition-fast:0.15s ease;--transition-base:0.3s ease;--transition-slow:0.5s ease}

/* Dark mode */
.dark{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--card:222.2 84% 4.9%;--card-foreground:210 40% 98%;--popover:222.2 84% 4.9%;--popover-foreground:210 40% 98%;--primary:217 91% 60%;--primary-foreground:222.2 47.4% 11.2%;--secondary:217.2 32.6% 17.5%;--secondary-foreground:210 40% 98%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--accent:142 71% 45%;--accent-foreground:210 40% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:210 40% 98%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:224.3 76.3% 48%;--chart-1:220 70% 50%;--chart-2:160 60% 45%;--chart-3:30 80% 55%;--chart-4:280 65% 60%;--chart-5:340 75% 55%}

/* Base styles */
*{border-color:hsl(var(--border));transition:color .2s,background-color .2s,border-color .2s,transform .2s,opacity .2s,box-shadow .2s}
body{background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem}

/* Font sizes */
html{font-size:16px}
h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-6xl{font-size:3.75rem}.text-7xl{font-size:4.5rem}

/* Container */
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}

/* Layout utilities */
.flex{display:flex}.grid{display:grid}.hidden{display:none}
@media (min-width:768px){.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}
.text-center{text-align:center}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.min-h-screen{min-height:100vh}

/* Images */
img{max-width:100%;height:auto;display:block;object-fit:cover;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:bicubic}
.course-card img,.course-thumbnail,img.course-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:.5rem;background-color:hsl(var(--muted))}
.profile-image,.avatar,img.avatar,img.profile-pic,.user-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;aspect-ratio:1/1}
.hero-image,.banner-image{width:100%;height:auto;object-fit:cover;object-position:center}
.card img:not(.icon):not(svg),.border.rounded-lg img:not(.icon):not(svg){max-width:100%;height:auto;object-fit:cover}
img.logo,.logo img,.site-logo{object-fit:contain;height:auto;max-height:100%}
.thumbnail-container{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;background-color:hsl(var(--muted));border-radius:.5rem}
.thumbnail-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.aspect-video{aspect-ratio:16/9}.aspect-square{aspect-ratio:1/1}.aspect-4-3{aspect-ratio:4/3}
.object-cover{object-fit:cover}.object-contain{object-fit:contain}.object-fill{object-fit:fill}
.object-center{object-position:center}.object-top{object-position:top}
.preserve-aspect{width:100%;height:auto}.full-width-image{width:100%;height:auto;display:block}

/* Cards */
.enhanced-card{background:white;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,0.05);transition:all var(--transition-base);animation:fadeIn .4s ease}
.enhanced-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.enhanced-card-header{padding:1.5rem;border-bottom:1px solid rgba(0,0,0,0.08);background:linear-gradient(to right,#f9fafb,#ffffff);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.enhanced-card-body{padding:1.5rem}
.card-hover-effect{transition:all .3s cubic-bezier(.4,0,.2,1)}.card-hover-effect:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.15)}

/* Buttons */
.btn-enhanced{position:relative;overflow:hidden;transition:all var(--transition-base);font-weight:600;border-radius:var(--radius-md);padding:.75rem 1.5rem;box-shadow:var(--shadow-sm)}
.btn-enhanced::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn-enhanced:hover::before{width:300px;height:300px}
.btn-primary-enhanced{background:var(--gradient-primary);color:white;border:none}
.btn-primary-enhanced:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary-enhanced{background:white;color:#667eea;border:2px solid #667eea}
.btn-secondary-enhanced:hover{background:#667eea;color:white;transform:translateY(-2px)}

/* Forms */
.form-input-enhanced{width:100%;padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:var(--radius-md);font-size:.9375rem;transition:all var(--transition-fast);background:white}
.form-input-enhanced:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1);transform:translateY(-1px)}
.form-input-enhanced:hover:not(:disabled){border-color:#d1d5db}
.form-group-enhanced{margin-bottom:1.5rem}
.form-group-enhanced label{display:block;margin-bottom:.5rem;font-weight:600;color:hsl(var(--foreground))}
.form-group-enhanced input,.form-group-enhanced textarea,.form-group-enhanced select{width:100%;padding:.75rem;border:2px solid hsl(var(--border));border-radius:.5rem;background:hsl(var(--background));color:hsl(var(--foreground));transition:all .2s ease}
.form-group-enhanced input:focus,.form-group-enhanced textarea:focus,.form-group-enhanced select:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 3px rgba(59,130,246,0.1);outline:none}
.input-success{border-color:var(--success-color)!important}.input-error{border-color:var(--error-color)!important}
.input-error:focus{box-shadow:0 0 0 3px rgba(239,68,68,0.1)!important}

/* Toggle switches */
.toggle-switch-enhanced{position:relative;display:inline-block;width:60px;height:32px}
.toggle-switch-enhanced input{opacity:0;width:0;height:0}
.toggle-slider-enhanced{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#cbd5e0 0%,#94a3b8 100%);transition:var(--transition-base);border-radius:32px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.toggle-slider-enhanced:before{position:absolute;content:"";height:24px;width:24px;left:4px;bottom:4px;background:linear-gradient(135deg,#ffffff 0%,#f1f5f9 100%);transition:var(--transition-base);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.toggle-switch-enhanced input:checked+.toggle-slider-enhanced{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.toggle-switch-enhanced input:checked+.toggle-slider-enhanced:before{transform:translateX(28px)}

/* Alerts */
.alert-enhanced{padding:1rem 1.25rem;border-radius:var(--radius-md);margin-bottom:1.5rem;display:none;animation:slideDown .3s ease;box-shadow:var(--shadow-sm)}
.alert-enhanced.show{display:block}
.alert-success-enhanced{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border:2px solid #10b981;color:#065f46;box-shadow:0 2px 8px rgba(16,185,129,0.2)}
.alert-error-enhanced{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border:2px solid #ef4444;color:#991b1b;box-shadow:0 2px 8px rgba(239,68,68,0.2)}
.alert-info-enhanced{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border:2px solid #3b82f6;color:#1e40af;box-shadow:0 2px 8px rgba(59,130,246,0.2)}

/* Badges */
.badge-enhanced{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;box-shadow:var(--shadow-sm)}
.badge-primary{background:var(--gradient-primary);color:white}.badge-success{background:var(--gradient-success);color:white}
.status-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;animation:scaleIn .3s ease-out}
.status-badge.active{background:rgba(16,185,129,0.1);color:#10b981;border:1px solid rgba(16,185,129,0.3)}
.status-badge.blocked{background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.3)}
.status-badge.deactivated{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.3)}
.level-badge{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:9999px;font-size:.875rem;font-weight:600;animation:scaleIn .3s ease-out}
.level-badge.advanced{background:rgba(16,185,129,0.15);color:#059669;border:1px solid rgba(16,185,129,0.3)}
.level-badge.intermediate{background:rgba(59,130,246,0.15);color:#2563eb;border:1px solid rgba(59,130,246,0.3)}
.level-badge.beginner{background:rgba(245,158,11,0.15);color:#d97706;border:1px solid rgba(245,158,11,0.3)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-slideDown{animation:slideDown .3s ease-out}.loading-shimmer{background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.1) 100%);background-size:1000px 100%;animation:shimmer 2s infinite}
.skeleton{background:linear-gradient(90deg,rgba(0,0,0,0.06) 0%,rgba(0,0,0,0.12) 50%,rgba(0,0,0,0.06) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:.5rem}
.badge-pulse{animation:pulse 2s infinite}.badge-bounce{animation:bounce 1s infinite}

/* Interactive elements */
.interactive-element{cursor:pointer;user-select:none;transition:all .2s ease}
.interactive-element:hover{transform:scale(1.05)}.interactive-element:active{transform:scale(.95)}
.hover-lift{transition:all var(--transition-base)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.hover-glow{transition:all var(--transition-base)}.hover-glow:hover{box-shadow:0 0 20px rgba(102,126,234,0.4)}
.ripple-effect{position:relative;overflow:hidden}
.ripple-effect::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.5);transform:translate(-50%,-50%);transition:width .6s,height .6s}
.ripple-effect:active::after{width:300px;height:300px}

/* Headers */
.gradient-header{background:var(--gradient-primary);border-radius:var(--radius-xl);padding:2rem;color:white;margin-bottom:2rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.gradient-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);pointer-events:none}
.section-title-enhanced{font-size:1.375rem;font-weight:700;margin-top:2.5rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:3px solid #e5e7eb;color:#1f2937;display:flex;align-items:center;gap:.75rem}
.section-title-enhanced:first-child{margin-top:0}
.section-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--gradient-primary);color:white;box-shadow:var(--shadow-sm)}

/* Resources */
.resource-item-enhanced{display:flex;align-items:center;gap:1rem;padding:1rem;background:white;border:2px solid #e5e7eb;border-radius:var(--radius-md);transition:all var(--transition-base);animation:fadeIn .3s ease}
.resource-item-enhanced:hover{border-color:#667eea;box-shadow:var(--shadow-md);transform:translateX(4px)}
.resource-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(102,126,234,0.1) 0%,rgba(118,75,162,0.1) 100%);color:#667eea;flex-shrink:0}

/* Progress bars */
.progress-bar-enhanced{height:8px;background:rgba(0,0,0,0.1);border-radius:9999px;overflow:hidden;position:relative}
.progress-bar-enhanced::after{content:'';position:absolute;top:0;left:0;height:100%;width:var(--progress-width,0%);background:var(--gradient-primary);border-radius:9999px;transition:width .6s cubic-bezier(.4,0,.2,1);animation:pulse 2s infinite}

/* Navigation */
nav a{position:relative;transition:all .3s ease}
nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));transition:width .3s ease}
nav a:hover::after,nav a.active::after{width:100%}

/* Tables */
table{border-collapse:collapse;width:100%}
table th{background:hsl(var(--primary-hue),var(--primary-saturation),95%);font-weight:600;text-align:left;padding:.75rem 1rem;border-bottom:2px solid hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}
table td{padding:.75rem 1rem;border-bottom:1px solid rgba(0,0,0,0.1)}
table tr:hover{background:rgba(0,0,0,0.02);transition:background .2s ease}

/* Charts */
.chart-container{position:relative;padding:1.5rem;background:white;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin:1rem 0}
.chart-title{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:hsl(var(--foreground))}

/* Modals */
.modal-backdrop{background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}
.modal-content{animation:scaleIn .3s ease-out;box-shadow:0 20px 60px rgba(0,0,0,0.3)}

/* Notifications */
.notification-slide-in{animation:slideDown .3s ease-out}.notification-slide-out{animation:slideOutUp .3s ease-in forwards}
@keyframes slideOutUp{to{opacity:0;transform:translateY(-100%)}}
.notification-item{padding:1rem;border-bottom:1px solid rgba(0,0,0,0.1);transition:background .2s ease}
.notification-item:hover{background:rgba(0,0,0,0.02)}
.notification-item.unread{background:rgba(59,130,246,0.05);border-left:3px solid hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}

/* Dropdown */
.dropdown-enhanced{animation:slideDown .2s ease-out;box-shadow:0 10px 40px rgba(0,0,0,0.15);backdrop-filter:blur(10px)}

/* Glass effect */
.glass-effect{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 8px 32px rgba(0,0,0,0.1)}

/* Gradient text */
.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:10px;transition:background .3s}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}

/* Footer */
footer{background:linear-gradient(135deg,hsl(220,90%,15%) 0%,hsl(240,80%,20%) 100%);color:rgba(255,255,255,0.9);transition:all .3s ease}
footer a{color:rgba(255,255,255,0.8);transition:color .2s ease}
footer a:hover{color:rgba(255,255,255,1);text-decoration:underline}
footer .footer-section{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.1)}

/* Sections */
.section-spacing{padding:3rem 0}@media (min-width:768px){.section-spacing{padding:5rem 0}}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.1),transparent);margin:3rem 0}
.section-divider-light{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);margin:2rem 0}

/* Links */
a:not(.btn):not(.button){transition:color .2s ease,opacity .2s ease}
a:not(.btn):not(.button):hover{opacity:.8}

/* Focus */
*:focus-visible{outline:2px solid hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));outline-offset:2px;border-radius:4px}

/* Spinner */
.spinner{border:3px solid rgba(0,0,0,0.1);border-top-color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));border-radius:50%;width:40px;height:40px;animation:spin .8s linear infinite}

/* RTL */
[dir="rtl"]{direction:rtl}[dir="ltr"]{direction:ltr}

/* Responsive */
@media (max-width:768px){h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}.gradient-header{padding:1.5rem}.enhanced-card-body{padding:1rem}.section-title-enhanced{font-size:1.25rem}.enhanced-card{margin-bottom:1rem}.btn-primary-enhanced{width:100%;padding:1rem}.course-card img,.course-thumbnail{aspect-ratio:16/9}.profile-image,.avatar{aspect-ratio:1/1}}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){img{image-rendering:auto}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.no-print{display:none!important}}

/* Dark mode support */
.dark .enhanced-card{background:#1f2937;border-color:#374151}.dark .enhanced-card-header{background:linear-gradient(to right,#111827,#1f2937);border-color:#374151}.dark .form-input-enhanced{background:#111827;border-color:#374151;color:#f9fafb}.dark .resource-item-enhanced{background:#1f2937;border-color:#374151}.dark .section-title-enhanced{color:#f9fafb;border-color:#374151}

/* Image loading */
img[loading="lazy"]{background:linear-gradient(90deg,hsl(var(--muted)) 25%,hsl(var(--muted)/.5) 50%,hsl(var(--muted)) 75%);background-size:200% 100%;animation:imageLoading 1.5s ease-in-out infinite}
@keyframes imageLoading{0%{background-position:200% 0}100%{background-position:-200% 0}}
img::before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(var(--muted))}
img[alt]::after{content:attr(alt);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;color:hsl(var(--muted-foreground));text-align:center}