<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>InQlok - Login</title>
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/auth.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <!-- Theme Switcher Button (Top Right) -->
            <button class="theme-toggle-btn" id="themeToggle" title="Wissel tussen licht en donker thema">
                <i class="fas fa-moon" id="themeIcon"></i>
            </button>

            <img src="images/InQlokLogoBannerPNG.png%3Fv=20250627" alt="InQlok" class="logo logo-dark" id="loginLogo">
            <img src="images/InQlokLogoBannerPNG-black.png%3Fv=20250627" alt="InQlok" class="logo logo-light">
            
            <!-- Login Form -->
            <form id="loginForm">
                <div class="form-group">
                    <label for="email">E-mailadres</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope input-icon"></i>
                        <input type="email" id="email" class="login-input" required placeholder="naam@bedrijf.nl">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password">Wachtwoord</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" id="password" class="login-input" required placeholder="••••••••">
                    </div>
                </div>
                <div class="buttons">
                    <button type="submit" class="login-btn btn-orange">
                        <i class="fas fa-sign-in-alt"></i>
                        Inloggen
                    </button>
                    <button type="button" class="login-btn btn-blue" id="scanQrBtn">
                        <i class="fas fa-qrcode"></i>
                        QR Scannen
                    </button>
                </div>
            </form>
            
            <!-- Password Reset Form (hidden by default) -->
            <form id="resetPasswordForm" style="display: none;" action="javascript:void(0);">
                <div class="form-group">
                    <label for="resetEmail">E-mailadres</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope input-icon"></i>
                        <input type="email" id="resetEmail" class="login-input" required placeholder="naam@bedrijf.nl">
                    </div>
                </div>
                <div class="buttons">
                    <button type="submit" class="login-btn btn-orange" id="resetPasswordBtn">
                        <i class="fas fa-paper-plane"></i>
                        Verstuur Reset Link
                    </button>
                    <button type="button" class="login-btn btn-secondary" id="backToLoginBtn">
                        <i class="fas fa-arrow-left"></i>
                        Terug naar Login
                    </button>
                </div>
            </form>
            
            <!-- Status message within the card -->
            <div id="status" class="status" style="display: none;"></div>
            <div id="resetStatus" class="status" style="display: none;"></div>
            
            <a href="index.html#" id="forgotPasswordLink" class="forgot-password">Wachtwoord vergeten?</a>
            
            <!-- Inline Password Reset Handler -->
            <script type="module">
                import { auth } from './js/firebase-config.js';
                import { sendPasswordResetEmail } from 'https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js';
                
                // Wait for DOM to be fully ready
                setTimeout(() => {
                    const btn = document.getElementById('resetPasswordBtn');
                    const form = document.getElementById('resetPasswordForm');
                    
                    // Prevent form submission
                    if (form) {
                        form.addEventListener('submit', (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            return false;
                        });
                    }
                    
                    if (btn) {
                        btn.addEventListener('click', async (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            
                            const email = document.getElementById('resetEmail').value.trim();
                            const statusDiv = document.getElementById('resetStatus');
                            
                            if (!email) {
                                statusDiv.innerHTML = '<i class="fas fa-exclamation-circle"></i> Voer een email adres in.';
                                statusDiv.className = 'status status-error';
                                statusDiv.style.display = 'block';
                                return;
                            }
                            
                            // Validate email format
                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                            if (!emailRegex.test(email)) {
                                statusDiv.innerHTML = '<i class="fas fa-exclamation-circle"></i> Ongeldig email adres.';
                                statusDiv.className = 'status status-error';
                                statusDiv.style.display = 'block';
                                return;
                            }
                            
                            btn.disabled = true;
                            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Versturen...';
                            
                            try {
                                await sendPasswordResetEmail(auth, email);
                                
                                statusDiv.innerHTML = `
                                    <div style="text-align: left;">
                                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                                            <i class="fas fa-check-circle" style="font-size: 1.2rem;"></i>
                                            <strong>Wachtwoord reset link verstuurd!</strong>
                                        </div>
                                        <div style="font-size: 0.9rem; line-height: 1.6;">
                                            <p style="margin: 0 0 0.5rem 0;">📧 <strong>Verzonden naar:</strong> ${email}</p>
                                            <p style="margin: 0 0 0.5rem 0;">📬 <strong>Van:</strong> noreply@inqlok.firebaseapp.com</p>
                                            <p style="margin: 0 0 0.5rem 0;">⏱️ <strong>Geldigheid:</strong> 1 uur</p>
                                            <p style="margin: 0.75rem 0 0 0; padding-top: 0.75rem; border-top: 1px solid rgba(16, 185, 129, 0.3);">💡 <em>Check ook je spam/ongewenste mail folder!</em></p>
                                        </div>
                                    </div>
                                `;
                                statusDiv.className = 'status status-success';
                                statusDiv.style.display = 'block';
                                
                                // Update button to success state
                                btn.innerHTML = '<i class="fas fa-check"></i> Verstuurd!';
                                btn.style.opacity = '1';
                                
                                // Clear email field
                                document.getElementById('resetEmail').value = '';
                                
                            } catch (error) {
                                let errorMessage = 'Er ging iets mis. Probeer het opnieuw.';
                                
                                if (error.code === 'auth/user-not-found') {
                                    errorMessage = 'Geen account gevonden met dit email adres.';
                                } else if (error.code === 'auth/invalid-email') {
                                    errorMessage = 'Ongeldig email adres.';
                                } else if (error.code === 'auth/too-many-requests') {
                                    errorMessage = 'Te veel pogingen. Wacht 5 minuten en probeer opnieuw.';
                                } else if (error.code === 'auth/network-request-failed') {
                                    errorMessage = 'Netwerkfout. Controleer je internetverbinding.';
                                }
                                
                                statusDiv.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + errorMessage;
                                statusDiv.className = 'status status-error';
                                statusDiv.style.display = 'block';
                                btn.disabled = false;
                                btn.innerHTML = '<i class="fas fa-paper-plane"></i> Verstuur Reset Link';
                            }
                        });
                    }
                }, 500);
            </script>
            
            <!-- Powered by Elentrixx -->
            <div style="margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
                <span style="font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.5px;">Powered by</span>
                <img src="images/PwdByElentrixx.png" alt="Powered by Elentrixx" style="height: 28px; width: auto; opacity: 0.85; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));">
            </div>
        </div>
    </div>

    <!-- Email Verification Required Modal -->
    <div id="verificationModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                                        background: rgba(0, 0, 0, 0.85); z-index: 10000; 
                                        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                                        align-items: center; justify-content: center; padding: 1rem; overflow-y: auto;">
        <div style="background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); 
                    border: 3px solid #FF6E00; border-radius: 20px; padding: 1.5rem 1rem; 
                    max-width: 600px; width: 95%; box-shadow: 0 20px 60px rgba(255, 110, 0, 0.5);
                    position: relative; animation: modalSlideIn 0.4s ease-out; margin: auto;">
            
            <!-- Close Button -->
            <button onclick="window.closeVerificationModal()" 
                    style="position: absolute; top: 1rem; right: 1rem; background: transparent; 
                           border: 2px solid #FAB972; color: #FAB972; width: 40px; height: 40px; 
                           border-radius: 50%; cursor: pointer; font-size: 1.2rem; 
                           transition: all 0.3s ease; display: flex; align-items: center; 
                           justify-content: center;">
                <i class="fas fa-times"></i>
            </button>
            
            <div style="text-align: center;">
                <div style="margin-bottom: 1.5rem;">
                    <img src="images/InQlokLogoBannerPNG.png" alt="InQlok Logo" style="max-width: 150px; height: auto;">
                </div>
                
                <div style="background: linear-gradient(135deg, #FF6E00 0%, #E55A00 100%); 
                            color: white; width: 80px; height: 80px; border-radius: 50%; 
                            display: flex; align-items: center; justify-content: center; 
                            margin: 0 auto 1.5rem; font-size: 2.5rem;
                            box-shadow: 0 10px 40px rgba(255, 110, 0, 0.5);
                            animation: warningPulse 2s ease-in-out infinite;">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                
                <h2 style="color: #FFFFFF; margin-bottom: 0.75rem; font-size: 1.4rem; font-weight: 700;">
                    ⚠️ Email Verificatie Vereist
                </h2>
                
                <p style="color: #FED8B1; font-size: 1rem; margin-bottom: 1.25rem; line-height: 1.5;">
                    Je moet je email verifiëren voordat je kunt inloggen.
                </p>
                
                <div style="background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%); 
                            border: 2px solid #FF6E00; border-radius: 12px; padding: 1rem; 
                            margin-bottom: 1.25rem; box-shadow: 0 4px 12px rgba(255, 110, 0, 0.3);">
                    <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
                        <div style="background: linear-gradient(135deg, #FF6E00, #E55A00); color: white; 
                                    width: 36px; height: 36px; border-radius: 50%; display: flex; 
                                    align-items: center; justify-content: center; flex-shrink: 0;
                                    box-shadow: 0 2px 8px rgba(255, 110, 0, 0.4);">
                            <i class="fas fa-envelope" style="font-size: 1rem;"></i>
                        </div>
                        <strong id="modalEmail" style="color: #FAB972; font-size: 0.95rem; word-break: break-all;"></strong>
                    </div>
                </div>
                
                <div style="background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%); 
                            border: 2px solid #29B6F6; border-radius: 12px; padding: 1rem; 
                            margin-bottom: 1.25rem; box-shadow: 0 4px 12px rgba(41, 182, 246, 0.2);">
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem; text-align: left;">
                        <i class="fas fa-info-circle" style="color: #29B6F6; font-size: 1.4rem; flex-shrink: 0; margin-top: 0.2rem;"></i>
                        <div>
                            <h4 style="color: #FFFFFF; margin: 0 0 0.4rem 0; font-size: 1rem; font-weight: 700;">
                                Verificatie Email Verzonden
                            </h4>
                            <p style="color: #FED8B1; margin: 0 0 0.4rem 0; line-height: 1.5; font-size: 0.9rem;">
                                Check je inbox voor een email van <strong style="color: #FAB972;">noreply@inqlok.nl</strong>
                            </p>
                            <p style="color: #FED8B1; margin: 0; font-size: 0.85rem; line-height: 1.5;">
                                Kijk ook in je <strong style="color: #FAB972;">spam/ongewenste mail</strong> folder!
                            </p>
                        </div>
                    </div>
                </div>
                
                <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem;">
                    <button onclick="window.location.reload()" 
                            style="width: 100%; padding: 0.875rem 1.5rem; font-size: 1rem; font-weight: 600;
                                   background: linear-gradient(135deg, #FF6E00 0%, #E55A00 100%); 
                                   border: none; color: white; border-radius: 12px; cursor: pointer; 
                                   transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 110, 0, 0.4);">
                        <i class="fas fa-sync-alt" style="margin-right: 0.5rem;"></i>
                        Ik Heb Geverifieerd
                    </button>
                    
                    <button onclick="window.closeVerificationModal()" 
                            style="width: 100%; padding: 0.875rem 1.5rem; font-size: 0.95rem; font-weight: 600;
                                   background: transparent; border: 2px solid #29B6F6; color: #29B6F6; 
                                   border-radius: 12px; cursor: pointer; transition: all 0.3s ease;">
                        <i class="fas fa-arrow-left" style="margin-right: 0.5rem;"></i>
                        Sluiten
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes warningPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(255, 110, 0, 0.5); }
            50% { transform: scale(1.05); box-shadow: 0 15px 50px rgba(255, 110, 0, 0.7); }
        }
        
        #verificationModal button:hover {
            transform: translateY(-2px);
        }
        
        button[onclick*="reload"]:hover {
            background: linear-gradient(135deg, #FF8533 0%, #FF6E00 100%) !important;
            box-shadow: 0 6px 25px rgba(255, 110, 0, 0.6) !important;
        }
        
        button[onclick*="closeVerificationModal"]:hover {
            background: rgba(41, 182, 246, 0.15) !important;
            border-color: #29B6F6 !important;
            color: #60A5FA !important;
            box-shadow: 0 4px 15px rgba(41, 182, 246, 0.3);
        }

        /* Mobile responsive fixes */
        @media (max-width: 768px) {
            #verificationModal > div {
                padding: 1.25rem 0.875rem !important;
                width: 92% !important;
                max-height: 95vh;
                overflow-y: auto;
            }
            
            #verificationModal h2 {
                font-size: 1.25rem !important;
            }
            
            #verificationModal p {
                font-size: 0.9rem !important;
            }
            
            #verificationModal button {
                padding: 0.75rem 1rem !important;
                font-size: 0.9rem !important;
            }
        }

        @media (max-width: 480px) {
            #verificationModal > div {
                padding: 1rem 0.75rem !important;
                width: 95% !important;
            }
            
            #verificationModal img[alt="InQlok Logo"] {
                max-width: 120px !important;
            }
            
            #verificationModal h2 {
                font-size: 1.1rem !important;
            }
            
            #verificationModal > div > div:first-child > div:nth-child(2) {
                width: 60px !important;
                height: 60px !important;
                font-size: 2rem !important;
            }
        }

        /* Modal Back Button Styling */
        .modal-back-button {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .modal-back-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            color: rgba(255, 255, 255, 0.9) !important;
            transform: translateY(-2px);
        }

        .modal-back-button:active {
            transform: translateY(0);
        }

        /* Status Message Styling */
        .status {
            padding: 1rem 1.25rem;
            border-radius: 12px;
            margin-top: 1rem;
            font-size: 0.95rem;
            font-weight: 500;
            text-align: center;
            display: block;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .status i {
            font-size: 1.1rem;
        }

        .status strong {
            font-size: 1.05rem;
        }

        .status p {
            margin: 0;
            line-height: 1.6;
        }

        .status-success {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%);
            color: #10b981;
            border: 2px solid #10b981;
        }

        .status-error {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.15) 100%);
            color: #ef4444;
            border: 2px solid #ef4444;
        }

        .status-info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
            color: #3b82f6;
            border: 2px solid #3b82f6;
        }

        .status-warning {
            background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
            color: #fb923c;
            border: 2px solid #fb923c;
        }

        /* Dark theme status colors */
        [data-theme="dark"] .status-success {
            color: #34d399;
            border-color: #34d399;
        }

        [data-theme="dark"] .status-error {
            color: #f87171;
            border-color: #f87171;
        }

        [data-theme="dark"] .status-info {
            color: #60a5fa;
            border-color: #60a5fa;
        }

        [data-theme="dark"] .status-warning {
            color: #fbbf24;
            border-color: #fbbf24;
        }

        /* Forgot Password Modal Responsive */
        @media (max-width: 768px) {
            #forgotPasswordModal {
                padding: 0.75rem !important;
            }
            #forgotPasswordModal > div {
                padding: 1.75rem 1.25rem !important;
                width: 90% !important;
                max-height: 92vh !important;
                border-width: 2px !important;
            }
            #forgotPasswordModal h2 {
                font-size: 1.35rem !important;
                margin-bottom: 0.625rem !important;
            }
            #forgotPasswordModal p {
                font-size: 0.9rem !important;
                margin-bottom: 1.25rem !important;
            }
            #forgotPasswordModal > div > div > div:first-child {
                width: 70px !important;
                height: 70px !important;
                font-size: 2rem !important;
                margin-bottom: 1.25rem !important;
            }
            #forgotPasswordModal button[onclick*="closeForgotPasswordModal"]:not(.modal-back-button) {
                width: 36px !important;
                height: 36px !important;
                font-size: 1.1rem !important;
            }
            
            #forgotPasswordModal .modal-back-button {
                padding: 0.625rem 1.25rem !important;
                font-size: 0.9rem !important;
            }
        }

        @media (max-width: 480px) {
            #forgotPasswordModal {
                padding: 0.5rem !important;
            }
            #forgotPasswordModal > div {
                width: 96% !important;
                padding: 1.5rem 1rem !important;
                max-height: 94vh !important;
            }
            #forgotPasswordModal h2 {
                font-size: 1.15rem !important;
                margin-bottom: 0.5rem !important;
            }
            #forgotPasswordModal p {
                font-size: 0.85rem !important;
                margin-bottom: 1rem !important;
                line-height: 1.4 !important;
            }
            #forgotPasswordModal > div > div > div:first-child {
                width: 60px !important;
                height: 60px !important;
                font-size: 1.8rem !important;
                margin-bottom: 1rem !important;
            }
            #forgotPasswordModal label {
                font-size: 0.85rem !important;
                margin-bottom: 0.4rem !important;
            }
            #forgotPasswordModal input {
                padding: 0.75rem 0.75rem !important;
                font-size: 0.95rem !important;
            }
            #forgotPasswordModal button[type="submit"] {
                padding: 0.75rem 1.25rem !important;
                font-size: 0.95rem !important;
            }
        }
    </style>

    <!-- No more modal needed -->

    <script>
        // Global function to show verification required modal
        window.showVerificationRequired = function(email) {
            const modal = document.getElementById('verificationModal');
            const emailElement = document.getElementById('modalEmail');
            
            if (modal && emailElement) {
                emailElement.textContent = email;
                modal.style.display = 'flex';
            }
        };
        
        // Global function to close verification modal
        window.closeVerificationModal = function() {
            const modal = document.getElementById('verificationModal');
            if (modal) {
                modal.style.display = 'none';
            }
        };

        // Toggle between login and password reset forms
        document.addEventListener('DOMContentLoaded', () => {
            const loginForm = document.getElementById('loginForm');
            const resetForm = document.getElementById('resetPasswordForm');
            const forgotLink = document.getElementById('forgotPasswordLink');
            const backToLoginBtn = document.getElementById('backToLoginBtn');
            const statusDiv = document.getElementById('status');
            const resetStatusDiv = document.getElementById('resetStatus');

            // Check for password reset success/error in URL
            const urlParams = new URLSearchParams(window.location.search);
            const mode = urlParams.get('mode');
            const oobCode = urlParams.get('oobCode');
            
            if (mode === 'resetPassword' && oobCode) {
                // User came back from clicking reset link in email
                statusDiv.innerHTML = `
                    <div style="text-align: left;">
                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                            <i class="fas fa-info-circle" style="font-size: 1.2rem;"></i>
                            <strong>Wachtwoord Reset Gedetecteerd</strong>
                        </div>
                        <p style="margin: 0; font-size: 0.9rem; line-height: 1.6;">
                            Je wordt automatisch doorgestuurd naar de wachtwoord reset pagina van Firebase...
                        </p>
                    </div>
                `;
                statusDiv.className = 'status status-info';
                statusDiv.style.display = 'block';
            } else if (urlParams.get('reset') === 'success') {
                // Show success message if coming back after reset
                statusDiv.innerHTML = `
                    <div style="text-align: left;">
                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                            <i class="fas fa-check-circle" style="font-size: 1.2rem;"></i>
                            <strong>Wachtwoord Succesvol Gereset!</strong>
                        </div>
                        <p style="margin: 0; font-size: 0.9rem; line-height: 1.6;">
                            Je kunt nu inloggen met je nieuwe wachtwoord.
                        </p>
                    </div>
                `;
                statusDiv.className = 'status status-success';
                statusDiv.style.display = 'block';
                
                // Remove the parameter from URL
                window.history.replaceState({}, document.title, window.location.pathname);
            }

            // Show password reset form
            forgotLink?.addEventListener('click', (e) => {
                e.preventDefault();
                loginForm.style.display = 'none';
                resetForm.style.display = 'block';
                forgotLink.style.display = 'none';
                statusDiv.style.display = 'none';
                resetStatusDiv.style.display = 'none';
                document.getElementById('resetEmail').value = '';
                document.getElementById('resetEmail').focus();
            });

            // Show login form
            backToLoginBtn?.addEventListener('click', () => {
                resetForm.style.display = 'none';
                loginForm.style.display = 'block';
                forgotLink.style.display = 'block';
                statusDiv.style.display = 'none';
                resetStatusDiv.style.display = 'none';
            });
        });

        // ==========================================
        // THEME SWITCHER FUNCTIONALITY
        // ==========================================
        
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = document.getElementById('themeIcon');
        const loginLogo = document.getElementById('loginLogo');
        const body = document.body;
        
        // Get saved theme or default to dark
        let currentTheme = localStorage.getItem('login-theme') || 'dark';
        
        // Apply initial theme
        applyTheme(currentTheme);
        
        function applyTheme(theme) {
            if (theme === 'light') {
                body.setAttribute('data-theme', 'light');
                themeIcon.className = 'fas fa-sun';
                // Use dark logo for light theme
                if (loginLogo) {
                    loginLogo.src = 'images/InQlokLogoBannerPNG-dark.png?v=20250627';
                }
            } else {
                body.setAttribute('data-theme', 'dark');
                themeIcon.className = 'fas fa-moon';
                // Use regular logo for dark theme
                if (loginLogo) {
                    loginLogo.src = 'images/InQlokLogoBannerPNG.png?v=20250627';
                }
            }
            currentTheme = theme;
            localStorage.setItem('login-theme', theme);
        }
        
        // Theme toggle click handler
        if (themeToggle) {
            themeToggle.addEventListener('click', () => {
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                applyTheme(newTheme);
                
                // Add a little animation
                themeToggle.style.transform = 'rotate(360deg) scale(1.2)';
                setTimeout(() => {
                    themeToggle.style.transform = '';
                }, 300);
            });
        }
    </script>

    <script type="module" src="js/firebase-config.js"></script>
    <script type="module" src="js/auth.js"></script>
</body>
</html>
