/* ========================================
   GLASSMORPHISM CLASSES - DARK MODE SUPPORT
   Version 520 - Solution Ultime Dark Mode
   ======================================== */

/* MODAL OVERLAYS */
html:not(.dark) .glass-modal-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

html.dark .glass-modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

/* MODAL CONTENT */
html:not(.dark) .glass-modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(8, 145, 178, 0.2) !important;
}

html.dark .glass-modal-content {
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(6, 182, 212, 0.4) !important;
}

/* GLASS BOXES - INFO (TURQUOISE) */
html:not(.dark) .glass-box-info {
    background: rgba(236, 254, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(165, 243, 252, 0.5) !important;
}

html.dark .glass-box-info {
    background: rgba(30, 41, 59, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(6, 182, 212, 0.5) !important;
}

/* GLASS BOXES - WARNING (YELLOW) */
html:not(.dark) .glass-box-warning {
    background: rgba(254, 243, 199, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(253, 224, 71, 0.5) !important;
}

html.dark .glass-box-warning {
    background: rgba(51, 65, 85, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(253, 224, 71, 0.5) !important;
}

/* GLASS BOXES - SUCCESS (GREEN) */
html:not(.dark) .glass-box-success {
    background: rgba(220, 252, 231, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(134, 239, 172, 0.5) !important;
}

html.dark .glass-box-success {
    background: rgba(30, 41, 59, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(134, 239, 172, 0.5) !important;
}

/* GLASS NAVIGATION */
html:not(.dark) .glass-nav {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4) !important;
}

html.dark .glass-nav {
    background: rgba(30, 41, 59, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.6) !important;
}

/* GLASS CARDS */
html:not(.dark) .glass-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.4) !important;
}

html.dark .glass-card {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(100, 116, 139, 0.6) !important;
}

/* GLASS BUTTONS - PRIMARY (TURQUOISE) */
html:not(.dark) .glass-btn-primary {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.85), rgba(6, 182, 212, 0.75)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.dark .glass-btn-primary {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.85), rgba(6, 182, 212, 0.75)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* GLASS BUTTONS - SECONDARY (WHITE) */
html:not(.dark) .glass-btn-secondary {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: #1A3263 !important;
    border: 2px solid rgba(8, 145, 178, 0.6) !important;
}

html.dark .glass-btn-secondary {
    background: rgba(51, 65, 85, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: #a5f3fc !important;
    border: 2px solid rgba(6, 182, 212, 0.8) !important;
}

html:not(.dark) .glass-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

html.dark .glass-btn-secondary:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(6, 182, 212, 0.9) !important;
}

/* QUIZ MODAL CONTAINER */
html:not(.dark) .quiz-modal-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(8, 145, 178, 0.2) !important;
}

html.dark .quiz-modal-container {
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(6, 182, 212, 0.4) !important;
}

/* GLASS INFO BOXES - ROLE SPECIFIC */

/* ELEVE - TURQUOISE */
html:not(.dark) .glass-info-eleve {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.15), rgba(6, 182, 212, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(165, 243, 252, 0.5) !important;
}

html.dark .glass-info-eleve {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(6, 182, 212, 0.4) !important;
}

/* PARENT - BLUE */
html:not(.dark) .glass-info-parent {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(147, 197, 253, 0.5) !important;
}

html.dark .glass-info-parent {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
}

/* TEACHER - ORANGE */
html:not(.dark) .glass-info-teacher {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(254, 215, 170, 0.5) !important;
}

html.dark .glass-info-teacher {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(249, 115, 22, 0.4) !important;
}