/*
 * Dark Mode Styles for GLC AIMS - ULTRA COMPLETE VERSION
 */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(30, 58, 138, 0.5);
}

.dark-mode-toggle i {
    position: absolute;
    font-size: 1.4rem;
    color: white;
    transition: all 0.3s ease;
}

.dark-mode-toggle .fa-moon {
    opacity: 1;
}

.dark-mode-toggle .fa-sun {
    opacity: 0;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
html.dark-mode {
    --primary-blue: #60a5fa;
    --light-blue: #93c5fd;
    --accent-yellow: #fbbf24;
    --light-yellow: rgba(251, 191, 36, 0.15);
    --dark-blue: #3b82f6;
    --text-dark: #f3f4f6;
    --text-light: #d1d5db;
    --white: #1f2937;
    --light-gray: #374151;
    --border-gray: #4b5563;
    --success: #34d399;
    --gradient-blue: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
}

/* Base Dark Mode */
html.dark-mode body {
    background: #0f172a !important;
    color: #d1d5db !important;
}

/* ============================================
   HEADER
   ============================================ */
html.dark-mode .header {
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-bottom: 1px solid #374151 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .header[style] {
    background: rgba(17, 24, 39, 0.98) !important;
}

html.dark-mode .logo span {
    color: #ffffff !important;
}

html.dark-mode .nav-link {
    color: #ffffff !important;
}

html.dark-mode .nav-link:hover {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #fbbf24 !important;
}

html.dark-mode .login-btn {
    background: #fbbf24 !important;
    color: #111827 !important;
}

html.dark-mode .login-btn:hover {
    background: #f59e0b !important;
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6) !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
html.dark-mode .hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
}

html.dark-mode .hero::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(96,165,250,0.15)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') !important;
    opacity: 0.5 !important;
}

html.dark-mode .hero h1 {
    /* color: #fcd34d !important;
    text-shadow: 0 0 30px rgba(252, 211, 77, 0.5) !important; */
}

html.dark-mode .hero .motto {
    /* color: #fbbf24 !important;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important; */
}

html.dark-mode .hero .subtitle {
    color: #e0e7ff !important;
}

html.dark-mode .hero-logo {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(251, 191, 36, 0.3)) !important;
}

html.dark-mode .cta-btn.primary {
    background: #fbbf24 !important;
    color: #111827 !important;
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4) !important;
}

html.dark-mode .cta-btn.primary:hover {
    background: #f59e0b !important;
    box-shadow: 0 12px 35px rgba(251, 191, 36, 0.6) !important;
}

html.dark-mode .cta-btn.secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

html.dark-mode .cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   MISSION & VISION SECTION
   ============================================ */
html.dark-mode .mission-vision,
html.dark-mode #about {
    background: linear-gradient(135deg, #111827 0%, #1e293b 50%, #111827 100%) !important;
}

html.dark-mode .section-overlay {
    display: none !important;
}

/* Badge */
html.dark-mode .mv-section-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .mv-section-subtitle {
    color: #d1d5db !important;
}

/* Mission Vision Box */
html.dark-mode .mv-box-wrapper {
    background: #1f2937 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .mv-box-top-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #fbbf24 50%, #3b82f6 100%) !important;
}

html.dark-mode .mv-box-corner-tl,
html.dark-mode .mv-box-corner-br {
    border-color: #fbbf24 !important;
}

html.dark-mode .mv-main-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .mv-icon-badge {
    background: #fbbf24 !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5) !important;
}

html.dark-mode .mv-main-title {
    color: #60a5fa !important;
}

html.dark-mode .mv-title-underline {
    background: #fbbf24 !important;
}

/* Mission Points */
html.dark-mode .mission-point,
html.dark-mode .mission-point-1,
html.dark-mode .mission-point-2,
html.dark-mode .mission-point-3,
html.dark-mode .mission-point-4 {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .mission-point-1 {
    border-left-color: #60a5fa !important;
}

html.dark-mode .mission-point-2 {
    border-left-color: #fbbf24 !important;
}

html.dark-mode .mission-point-3 {
    border-left-color: #34d399 !important;
}

html.dark-mode .mission-point-4 {
    border-left-color: #ec4899 !important;
}

html.dark-mode .mission-point-icon-1 {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .mission-point-icon-2 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
}

html.dark-mode .mission-point-icon-3 {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4) !important;
}

html.dark-mode .mission-point-icon-4 {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
}

html.dark-mode .mission-point-title {
    color: #60a5fa !important;
}

html.dark-mode .mission-point-text {
    color: #d1d5db !important;
}

/* Quote Box */
html.dark-mode .mv-quote-box {
    background: rgba(251, 191, 36, 0.15) !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2) !important;
}

html.dark-mode .mv-quote-text {
    color: #fbbf24 !important;
}

html.dark-mode .mv-bottom-section {
    border-top-color: #4b5563 !important;
}

/* ============================================
   SECTION TITLES (GLOBAL)
   ============================================ */
html.dark-mode .section-title {
    color: #60a5fa !important;
}

html.dark-mode .section-title::after {
    background: #fbbf24 !important;
}

/* ============================================
   EDUCATIONAL PHILOSOPHY SECTION
   ============================================ */
html.dark-mode #philosophy {
    background: #0f172a !important;
}

html.dark-mode .mv-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .mv-card::before {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
}

html.dark-mode .mv-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}

html.dark-mode .mv-card h3 {
    color: #60a5fa !important;
}

html.dark-mode .mv-card p,
html.dark-mode .mv-card li {
    color: #d1d5db !important;
}

/* Methodology Section */
html.dark-mode .methodology-wrapper {
    background: #1f2937 !important;
    border-left-color: #fbbf24 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .methodology-title {
    color: #60a5fa !important;
}

html.dark-mode .methodology-card {
    background: #374151 !important;
    border-left-color: #60a5fa !important;
}

html.dark-mode .methodology-card-title {
    color: #60a5fa !important;
}

html.dark-mode .methodology-card-text {
    color: #d1d5db !important;
}

/* ============================================
   HISTORY SECTION
   ============================================ */
html.dark-mode .history-section,
html.dark-mode #history {
    background: #0f172a !important;
}

html.dark-mode .timeline-content {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .timeline-year {
    color: #fbbf24 !important;
}

html.dark-mode .timeline-content h4 {
    color: #60a5fa !important;
}

html.dark-mode .timeline-content p {
    color: #d1d5db !important;
}

html.dark-mode .timeline-dot {
    background: #fbbf24 !important;
    border-color: #1f2937 !important;
    box-shadow: 0 0 0 4px #3b82f6 !important;
}

html.dark-mode .history-timeline::before {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
}

/* ============================================
   NETWORK SECTION
   ============================================ */
html.dark-mode #network {
    background: #111827 !important;
}

html.dark-mode .network-card {
    background: #1f2937 !important;
    border-top-color: #3b82f6 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .network-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
}

html.dark-mode .training-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

html.dark-mode .network-card-title {
    color: #60a5fa !important;
}

html.dark-mode .network-card-text {
    color: #d1d5db !important;
}

html.dark-mode .network-school-item {
    background: #374151 !important;
    border-left-color: #fbbf24 !important;
}

html.dark-mode .network-school-item.international {
    border-left-color: #34d399 !important;
}

html.dark-mode .network-school-title {
    color: #60a5fa !important;
}

html.dark-mode .network-school-subtitle {
    color: #d1d5db !important;
}

html.dark-mode .training-card {
    background: #1f2937 !important;
    border-top-color: #fbbf24 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .training-list {
    background: #374151 !important;
}

html.dark-mode .training-list li {
    color: #d1d5db !important;
}

/* ============================================
   VIDEO & FACEBOOK SECTIONS
   ============================================ */
html.dark-mode #promo-video {
    background: #0f172a !important;
}

html.dark-mode #facebook-page {
    background: #111827 !important;
}

html.dark-mode .fb-card {
    background: #1f2937 !important;
    border-top-color: #fbbf24 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .fb-card-title {
    color: #60a5fa !important;
}

html.dark-mode .fb-card-description {
    color: #d1d5db !important;
}

html.dark-mode .fb-cover-image {
    border-color: #374151 !important;
}

/* ============================================
   GALLERY SECTION
   ============================================ */
html.dark-mode #gallery {
    background: #0f172a !important;
}

html.dark-mode .gallery-card {
    background: #1f2937 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .gallery-card-title {
    color: #60a5fa !important;
}

html.dark-mode .gallery-card-text {
    color: #d1d5db !important;
}

/* ============================================
   PROGRAMS SECTION
   ============================================ */
html.dark-mode #programs {
    background: #111827 !important;
}

html.dark-mode .program-card {
    background: #1f2937 !important;
    border-top-color: #fbbf24 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .program-card-content {
    background: #1f2937 !important;
}

html.dark-mode .program-card h4 {
    color: #60a5fa !important;
}

html.dark-mode .program-card p {
    color: #d1d5db !important;
}

/* ============================================
   FEATURES SECTION
   ============================================ */
html.dark-mode .features {
    background: #0f172a !important;
}

html.dark-mode .feature-item {
    background: #1f2937 !important;
    border-left-color: #fbbf24 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .feature-icon {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #111827 !important;
}

html.dark-mode .feature-item h3 {
    color: #60a5fa !important;
}

html.dark-mode .feature-item p {
    color: #d1d5db !important;
}

/* ============================================
   CTA SECTION
   ============================================ */
html.dark-mode .cta-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
}

html.dark-mode .cta-section h2 {
    color: #fcd34d !important;
}

html.dark-mode .cta-section p {
    color: #e0e7ff !important;
}

/* ============================================
   FOOTER
   ============================================ */
html.dark-mode .footer {
    background: #0f172a !important;
    color: #d1d5db !important;
}

html.dark-mode .footer-content {
    border-top: 1px solid #374151 !important;
}

html.dark-mode .footer-section h3 {
    color: #fbbf24 !important;
}

html.dark-mode .footer-section p,
html.dark-mode .footer-section li,
html.dark-mode .footer-section a {
    color: #d1d5db !important;
}

html.dark-mode .footer-section a:hover {
    color: #fbbf24 !important;
}

html.dark-mode .footer-bottom {
    border-top: 1px solid #374151 !important;
    color: #9ca3af !important;
}

html.dark-mode .footer-bottom p {
    color: #9ca3af !important;
}

html.dark-mode .footer-bottom a {
    color: #fbbf24 !important;
}

html.dark-mode .footer-bottom a:hover {
    color: #f59e0b !important;
}

/* ============================================
   DARK MODE TOGGLE
   ============================================ */
html.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border-color: #fbbf24 !important;
}

html.dark-mode .dark-mode-toggle i {
    color: #111827 !important;
}

html.dark-mode .dark-mode-toggle .fa-moon {
    opacity: 0;
}

html.dark-mode .dark-mode-toggle .fa-sun {
    opacity: 1;
}

/* ============================================
   MOBILE MENU
   ============================================ */
html.dark-mode .nav-links {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}

html.dark-mode .mobile-menu-overlay.active {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ============================================
   FORMS
   ============================================ */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    color: #f3f4f6 !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #60a5fa !important;
    outline: none !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
html.dark-mode ::-webkit-scrollbar {
    width: 12px;
    background: #111827;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 6px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ============================================
   LOGIN PAGE DARK MODE FIXES
   ============================================ */

/* Login Page Body Background */
html.dark-mode body {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 50%, #1e40af 100%) !important;
}

/* Back to Home Button */
html.dark-mode .back-to-home {
    background: rgba(251, 191, 36, 0.2) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
    backdrop-filter: blur(10px) !important;
}

html.dark-mode .back-to-home:hover {
    background: rgba(251, 191, 36, 0.3) !important;
    color: #fcd34d !important;
    border-color: #fbbf24 !important;
}

/* College Info Section */
html.dark-mode .college-info h1 {
    /* color: #fcd34d !important;
    text-shadow: 2px 2px 12px rgba(252, 211, 77, 0.6) !important; */
}

html.dark-mode .college-info p {
    /* color: #fbbf24 !important;
    text-shadow: 1px 1px 8px rgba(251, 191, 36, 0.5) !important; */
}

/* Login Card */
html.dark-mode .login-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Logo Section */
html.dark-mode .logo-text {
    color: #60a5fa !important;
}

html.dark-mode .logo-subtitle {
    color: #9ca3af !important;
}

html.dark-mode .logo-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4) !important;
}

/* Form Labels */
html.dark-mode .form-label {
    color: #f3f4f6 !important;
}

/* Form Inputs */
html.dark-mode .form-input {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark-mode .form-input:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
    background: #374151 !important;
}

html.dark-mode .form-input::placeholder {
    color: #6b7280 !important;
}

/* Form Icons */
html.dark-mode .form-icon {
    color: #9ca3af !important;
}

html.dark-mode .form-input:focus + .form-icon {
    color: #fbbf24 !important;
}

/* Password Toggle */
html.dark-mode .password-toggle {
    color: #9ca3af !important;
}

html.dark-mode .password-toggle:hover {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Login Button */
html.dark-mode .btn-login {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #111827 !important;
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4) !important;
}

html.dark-mode .btn-login:hover {
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Secondary Button */
html.dark-mode .btn-secondary {
    background: #374151 !important;
    color: #f3f4f6 !important;
    border: 2px solid #4b5563 !important;
}

html.dark-mode .btn-secondary:hover {
    background: #4b5563 !important;
    border-color: #60a5fa !important;
}

/* OTP Input */
html.dark-mode .otp-input {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #f3f4f6 !important;
}

/* Back Link */
html.dark-mode .back-link {
    color: #60a5fa !important;
}

html.dark-mode .back-link:hover {
    color: #93c5fd !important;
}

/* Forgot Password Link */
html.dark-mode .forgot-password a {
    color: #60a5fa !important;
}

html.dark-mode .forgot-password a:hover {
    color: #93c5fd !important;
}

/* Alert Messages */
html.dark-mode .alert {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .alert-error {
    border-left-color: #ef4444 !important;
    background: linear-gradient(135deg, #7f1d1d 0%, #1f2937 100%) !important;
    color: #fca5a5 !important;
}

html.dark-mode .alert-success {
    border-left-color: #34d399 !important;
    background: linear-gradient(135deg, #064e3b 0%, #1f2937 100%) !important;
    color: #6ee7b7 !important;
}

html.dark-mode .alert-warning {
    border-left-color: #fbbf24 !important;
    background: linear-gradient(135deg, #78350f 0%, #1f2937 100%) !important;
    color: #fcd34d !important;
}

/* Loading Spinner */
html.dark-mode .loading {
    border: 3px solid rgba(251, 191, 36, 0.3) !important;
    border-top-color: #fbbf24 !important;
}

/* reCAPTCHA Container */
html.dark-mode .captcha-container {
    opacity: 1 !important;
}

/* Small Text */
html.dark-mode small {
    color: #9ca3af !important;
}

html.dark-mode small strong {
    color: #fbbf24 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dark-mode-toggle {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }
    
    .dark-mode-toggle i {
        font-size: 1.2rem;
    }
}

/* ============================================
   FORGOT PASSWORD PAGE DARK MODE
   ============================================ */

/* Forgot Password Body */
html.dark-mode body {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 50%, #1e40af 100%) !important;
}

/* College Info Section */
html.dark-mode .college-info h1 {
    color: #fcd34d !important;
    text-shadow: 2px 2px 12px rgba(252, 211, 77, 0.6) !important;
}

html.dark-mode .college-info p {
    color: #fbbf24 !important;
    text-shadow: 1px 1px 8px rgba(251, 191, 36, 0.5) !important;
}

/* Forgot Password Card */
html.dark-mode .forgot-card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Logo Section */
html.dark-mode .logo-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .logo-text {
    color: #60a5fa !important;
}

html.dark-mode .logo-subtitle {
    color: #9ca3af !important;
}

/* Form Elements */
html.dark-mode .form-label {
    color: #f3f4f6 !important;
}

html.dark-mode .form-input {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark-mode .form-input:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
    background: #374151 !important;
}

html.dark-mode .form-input::placeholder {
    color: #6b7280 !important;
}

html.dark-mode .form-icon {
    color: #9ca3af !important;
}

html.dark-mode .form-input:focus + .form-icon {
    color: #fbbf24 !important;
}

/* Buttons */
html.dark-mode .btn-submit {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #111827 !important;
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4) !important;
}

html.dark-mode .btn-submit:hover:not(:disabled) {
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.6) !important;
}

/* Back Link */
html.dark-mode .back-link {
    color: #60a5fa !important;
}

html.dark-mode .back-link:hover {
    color: #93c5fd !important;
}

/* Step Indicator */
html.dark-mode .step {
    background: #374151 !important;
    color: #9ca3af !important;
}

html.dark-mode .step.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

html.dark-mode .step.completed {
    background: #34d399 !important;
    color: #ffffff !important;
}

html.dark-mode .step::after {
    background: #4b5563 !important;
}

html.dark-mode .step.completed::after {
    background: #34d399 !important;
}

/* Password Requirements */
html.dark-mode .password-requirements {
    color: #9ca3af !important;
}

html.dark-mode .password-requirements strong {
    color: #f3f4f6 !important;
}

/* Success Message */
html.dark-mode .success-message h2 {
    color: #34d399 !important;
}

html.dark-mode .success-message p {
    color: #d1d5db !important;
}

html.dark-mode .success-icon {
    background: #34d399 !important;
}

/* Small Text */
html.dark-mode small {
    color: #9ca3af !important;
}

html.dark-mode small strong {
    color: #fbbf24 !important;
}


/* ============================================
   ENROLLMENT PAGE DARK MODE
   ============================================ */

/* Main Body */
html.dark-mode body {
    background: #0f172a !important;
    color: #d1d5db !important;
}

/* Header */
html.dark-mode .header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .header-content .logo {
    color: #fbbf24 !important;
}

html.dark-mode .back-btn {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .back-btn:hover {
    background: rgba(251, 191, 36, 0.2) !important;
    border-color: #fbbf24 !important;
}

/* Enrollment Header */
html.dark-mode .enrollment-header {
    background: #1f2937 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .enrollment-header h1 {
    color: #60a5fa !important;
}

html.dark-mode .enrollment-header p {
    color: #9ca3af !important;
}

html.dark-mode .enrollment-header .icon {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
}

/* Form Container */
html.dark-mode .form-container {
    background: #1f2937 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .form-container::before {
    background: linear-gradient(135deg, #3b82f6 0%, #fbbf24 50%, #3b82f6 100%) !important;
}

/* Progress Bar */
html.dark-mode .progress-bar {
    background: #374151 !important;
}

html.dark-mode .progress-fill {
    background: linear-gradient(90deg, #3b82f6 0%, #fbbf24 100%) !important;
}

/* Form Steps */
html.dark-mode .step {
    background: #374151 !important;
    color: #9ca3af !important;
}

html.dark-mode .step.active {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    color: #ffffff !important;
}

html.dark-mode .step.completed {
    background: #34d399 !important;
    color: #ffffff !important;
}

/* Section Titles */
html.dark-mode .section-title {
    color: #60a5fa !important;
}

/* Form Elements */
html.dark-mode label {
    color: #f3f4f6 !important;
}

html.dark-mode .required {
    color: #ef4444 !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
    background: #374151 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #6b7280 !important;
}

html.dark-mode input.error,
html.dark-mode select.error,
html.dark-mode textarea.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* File Upload */
html.dark-mode .file-upload {
    background: #374151 !important;
    border: 2px dashed #4b5563 !important;
}

html.dark-mode .file-upload:hover {
    border-color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

html.dark-mode .file-upload-icon {
    color: #fbbf24 !important;
}

html.dark-mode .file-upload-text {
    color: #d1d5db !important;
}

html.dark-mode .file-upload-text small {
    color: #9ca3af !important;
}

/* Navigation Buttons */
html.dark-mode .nav-btn.prev {
    background: #374151 !important;
    color: #f3f4f6 !important;
    border: 2px solid #4b5563 !important;
}

html.dark-mode .nav-btn.prev:hover:not(:disabled) {
    background: #4b5563 !important;
}

html.dark-mode .nav-btn.next {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #111827 !important;
}

html.dark-mode .nav-btn.next:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5) !important;
}

html.dark-mode .nav-btn.submit {
    background: #34d399 !important;
    color: #ffffff !important;
}

html.dark-mode .nav-btn.submit:hover {
    background: #059669 !important;
}

html.dark-mode .nav-btn:disabled {
    opacity: 0.5 !important;
}

/* Info Cards */
html.dark-mode .info-card {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .info-card h3 {
    color: #fbbf24 !important;
}

html.dark-mode .info-card p,
html.dark-mode .info-card li {
    color: #d1d5db !important;
}

html.dark-mode .info-card ul li::before {
    color: #34d399 !important;
}

/* Error Messages */
html.dark-mode .error-message {
    color: #fca5a5 !important;
}

/* Success Message */
html.dark-mode .success-message h2 {
    color: #34d399 !important;
}

html.dark-mode .success-message p {
    color: #d1d5db !important;
}

html.dark-mode .success-icon {
    background: #34d399 !important;
}

/* Form Navigation */
html.dark-mode .form-navigation {
    border-top: 1px solid #4b5563 !important;
}

/* Agreement Page Specific */
html.dark-mode .agreement-box {
    background: #1f2937 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .agreement-content {
    background: #374151 !important;
    border-left-color: #fbbf24 !important;
}

html.dark-mode .agreement-content h3 {
    color: #60a5fa !important;
}

html.dark-mode .agreement-content p,
html.dark-mode .agreement-content li {
    color: #d1d5db !important;
}

html.dark-mode .checkbox-container label {
    color: #f3f4f6 !important;
}

html.dark-mode .btn-primary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #111827 !important;
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5) !important;
}

html.dark-mode .btn-secondary {
    background: #374151 !important;
    color: #f3f4f6 !important;
    border: 2px solid #4b5563 !important;
}

html.dark-mode .btn-secondary:hover {
    background: #4b5563 !important;
}

/* CAPTCHA Container */
html.dark-mode .captcha-container {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
}

html.dark-mode .captcha-container label {
    color: #f3f4f6 !important;
}

html.dark-mode .captcha-error {
    color: #fca5a5 !important;
}

/* Success Container (Enrollment Success Page) */
html.dark-mode .success-container {
    background: #1f2937 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .success-container::before {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
}

html.dark-mode .countdown-card {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 2px solid #3b82f6 !important;
    color: #60a5fa !important;
}

html.dark-mode .countdown-number {
    color: #fbbf24 !important;
}

/* Alert System for Enrollment */
html.dark-mode .alert {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .alert-error {
    border-left-color: #ef4444 !important;
    background: linear-gradient(135deg, #7f1d1d 0%, #1f2937 100%) !important;
    color: #fca5a5 !important;
}

html.dark-mode .alert-success {
    border-left-color: #34d399 !important;
    background: linear-gradient(135deg, #064e3b 0%, #1f2937 100%) !important;
    color: #6ee7b7 !important;
}

html.dark-mode .alert-warning {
    border-left-color: #fbbf24 !important;
    background: linear-gradient(135deg, #78350f 0%, #1f2937 100%) !important;
    color: #fcd34d !important;
}

/* Loading Spinner */
html.dark-mode .loading {
    border: 3px solid rgba(251, 191, 36, 0.3) !important;
    border-top-color: #fbbf24 !important;
}

/* Responsive Mobile Adjustments */
@media (max-width: 768px) {
    html.dark-mode .form-container {
        padding: 2rem 1.5rem !important;
    }
    
    html.dark-mode .enrollment-header {
        padding: 2rem 1.5rem !important;
    }
    
}
/* FACULTY PAGE DARK MODE FIXES */
html.dark-mode .faculty-container,
html.dark-mode .faculty-card,
html.dark-mode .faculty-box,
html.dark-mode .grade-table,
html.dark-mode .submission-form {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark-mode .grade-table th {
    background: #111827 !important;
    color: #fbbf24 !important;
}

html.dark-mode .grade-table td {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}