<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="version" content="113.1.9-FIX-CORS-ORIGIN-1784556670">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#4f46e5">
    <link rel="apple-touch-icon" href="/icon-192.svg">
    
    <!-- ✅ VERSION 113.1.9 - BUILD: 2026-07-20 - FIX CORS ORIGIN -->
    <!-- ✅ CACHE BUSTING: Force fresh content -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <title>JLearn v113.21 - Educational Platform</title>
    <link rel="stylesheet" href="css/styles.css?v=113.21&cb=1784556670">
    <link rel="stylesheet" href="css/modern-enhancements.css?v=113.21&cb=1784556670">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <!-- SheetJS for Excel import/export -->
    <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    
    <style>
        /* Mobile-friendly improvements */
        body {
            padding-bottom: 0 !important; /* No padding needed for non-sticky footer */
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
        }
        
        /* Enhanced Teacher Dashboard Sidebar */
        .dashboard-sidebar {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            border-right: 1px solid #e2e8f0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
        }
        
        .sidebar-menu {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
        }
        
        .sidebar-menu .menu-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            border-radius: 10px;
            color: #475569;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .sidebar-menu .menu-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, rgba(79,70,229,0.1) 0%, transparent 100%);
            transition: width 0.3s ease;
        }
        
        .sidebar-menu .menu-item:hover {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            color: #4f46e5;
            transform: translateX(5px);
            border-left: 3px solid #4f46e5;
        }
        
        .sidebar-menu .menu-item:hover::before {
            width: 100%;
        }
        
        .sidebar-menu .menu-item i {
            font-size: 1.25rem;
            width: 24px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .sidebar-menu .menu-item:hover i {
            transform: scale(1.15);
        }
        
        .sidebar-menu .menu-item.active {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            color: white;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(79,70,229,0.4), inset 0 1px 3px rgba(255,255,255,0.3);
            border: 2px solid #6366f1;
            transform: translateX(5px);
        }
        
        .sidebar-menu .menu-item.active i {
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
            transform: scale(1.1);
        }
        
        .sidebar-menu .menu-item.active::after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: #ffd700;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255,215,0,0.8);
            animation: pulse 2s infinite;
        }
        
        /* Enhanced mobile modal improvements */
        @media (max-width: 768px) {
            /* Modal overlay mobile fixes */
            .modal-overlay {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                background-color: rgba(0, 0, 0, 0.5) !important;
                display: none !important;
                z-index: 999 !important;
                -webkit-overflow-scrolling: touch !important;
            }
            
            .modal-overlay.active {
                display: block !important;
            }
            
            /* Ensure modal overlay doesn't interfere when not active */
            .modal-overlay:not(.active) {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            
            /* Modal positioning and sizing */
            .modal {
                position: fixed !important;
                top: 10px !important;
                left: 10px !important;
                right: 10px !important;
                bottom: 10px !important;
                width: calc(100vw - 20px) !important;
                height: calc(100vh - 20px) !important;
                max-height: calc(100vh - 20px) !important;
                max-width: calc(100vw - 20px) !important;
                margin: 0 !important;
                border-radius: 12px !important;
                overflow: hidden !important;
                display: none !important;
                flex-direction: column !important;
                z-index: 1000 !important;
                transform: none !important;
            }
            
            .modal.active {
                display: flex !important;
            }
            
            /* Ensure modals don't interfere when not active */
            .modal:not(.active) {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            
            .modal-content {
                flex: 1 !important;
                overflow-y: auto !important;
                padding: 15px !important;
                margin: 0 !important;
                max-height: none !important;
            }
            
            .modal-header {
                flex-shrink: 0 !important;
                padding: 15px !important;
                border-bottom: 1px solid var(--border-color) !important;
                background: var(--bg-color) !important;
            }
            
            .modal-header h3 {
                font-size: 1.1rem !important;
                margin: 0 !important;
            }
            
            /* Form elements mobile optimization */
            .form-group {
                margin-bottom: 15px !important;
            }
            
            .form-group label {
                font-size: 0.9rem !important;
                margin-bottom: 5px !important;
            }
            
            .form-group input,
            .form-group select,
            .form-group textarea {
                font-size: 16px !important; /* Prevents zoom on iOS */
                padding: 12px !important;
                border-radius: 8px !important;
            }
            
            /* Button improvements */
            .btn {
                padding: 12px 16px !important;
                font-size: 0.9rem !important;
                border-radius: 8px !important;
                min-height: 44px !important; /* Touch-friendly */
            }
            
            .btn-block {
                width: 100% !important;
                margin-bottom: 10px !important;
            }
            
            /* Back button positioning */
            .back-button {
                position: fixed !important;
                top: 20px !important;
                right: 20px !important;
                left: auto !important;
                z-index: 1001 !important;
                padding: 10px 15px !important;
                border-radius: 25px !important;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
            }
            
            /* Dashboard sections mobile optimization */
            .dashboard-section {
                padding: 15px !important;
                margin-bottom: 20px !important;
            }
            
            .section-header {
                flex-direction: column !important;
                gap: 15px !important;
                align-items: stretch !important;
            }
            
            .section-header h2 {
                font-size: 1.3rem !important;
                margin-bottom: 0 !important;
            }
            
            /* Table improvements */
            .table-container {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                border-radius: 8px !important;
                margin: 0 -15px !important;
                padding: 0 15px !important;
            }
            
            .data-table {
                font-size: 0.85rem !important;
                min-width: 600px !important;
            }
            
            .data-table th,
            .data-table td {
                padding: 10px 8px !important;
                white-space: nowrap !important;
            }
            
            /* Navigation improvements */
            .nav-tabs {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                white-space: nowrap !important;
                padding-bottom: 5px !important;
            }
            
            .nav-tabs .tab-button {
                min-width: 120px !important;
                padding: 12px 16px !important;
                font-size: 0.9rem !important;
            }
            
            /* Card improvements */
            .lesson-card,
            .student-card {
                margin-bottom: 15px !important;
                border-radius: 12px !important;
                padding: 15px !important;
            }
            
            /* Assessment page improvements */
            .assessment-container {
                padding: 15px !important;
            }
            
            .question-container {
                margin-bottom: 20px !important;
                padding: 15px !important;
                border-radius: 12px !important;
            }
            
            /* Video player mobile optimization */
            .video-wrapper {
                border-radius: 12px !important;
                overflow: hidden !important;
            }
            
            /* Document viewer mobile optimization */
            .document-fullscreen-modal {
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                border-radius: 0 !important;
            }
        }
        
        /* Tablet optimization */
        @media (min-width: 769px) and (max-width: 1024px) {
            .modal {
                max-width: 90vw !important;
                max-height: 90vh !important;
                margin: 5vh auto !important;
            }
            
            .dashboard-section {
                padding: 20px !important;
            }
            
            .section-header {
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: center !important;
            }
        }
        
        /* Fullscreen video minimize button */
        .fullscreen-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: none;
        }
        
        .minimize-btn {
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .minimize-btn:hover {
            background: rgba(0,0,0,0.9);
        }
        
        /* Footer improvements - NOT sticky */
        #site-footer {
            position: relative !important; /* Changed from fixed */
            bottom: auto !important;
            margin-top: 40px !important;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 12px;
            font-weight: 600;
            z-index: 1000;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            border-top: 2px solid rgba(255,255,255,0.2);
        }
        
        /* Responsive footer */
        @media (max-width: 768px) {
            #site-footer {
                padding: 12px 10px !important;
                font-size: 11px !important;
            }
            
            #site-footer span {
                font-size: 11px !important;
            }
        }
        
        /* Prevent any blocking elements on mobile */
        @media (max-width: 768px) {
            /* Ensure no elements block the viewport */
            body {
                overflow-x: hidden !important;
                position: relative !important;
            }
            
            /* Fix any potential z-index issues */
            .page {
                position: relative !important;
                z-index: 1 !important;
            }
            
            /* Ensure proper stacking context */
            .navbar {
                z-index: 100 !important;
            }
            
            .back-button {
                z-index: 101 !important;
            }
            
            .modal-overlay {
                z-index: 999 !important;
            }
            
            .modal {
                z-index: 1000 !important;
            }
            
            .fullscreen-controls {
                z-index: 10000 !important;
            }
            
            /* Assessment Instructions Modal - Mobile Specific */
            #assessment-instructions-modal {
                top: 5% !important;
                left: 5% !important;
                right: 5% !important;
                bottom: 5% !important;
                width: 90vw !important;
                height: 90vh !important;
                max-height: 90vh !important;
                max-width: 90vw !important;
                overflow: hidden !important;
            }
            
            #assessment-instructions-modal .modal-body {
                flex: 1 !important;
                overflow-y: auto !important;
                padding: 10px !important;
                max-height: calc(90vh - 120px) !important; /* Account for header and footer */
            }
            
            #assessment-instructions-modal .instructions-content {
                max-height: none !important;
                overflow-y: visible !important;
            }
            
            #assessment-instructions-modal .instruction-item {
                margin-bottom: 8px !important;
                padding: 8px !important;
                font-size: 0.8rem !important;
                background: rgba(79, 70, 229, 0.05) !important;
                border-radius: 6px !important;
                border-left: 3px solid var(--primary-color) !important;
            }
            
            #assessment-instructions-modal .instruction-item i {
                font-size: 0.9rem !important;
                margin-right: 6px !important;
                color: var(--primary-color) !important;
            }
            
            #assessment-instructions-modal .instruction-item strong {
                font-size: 0.85rem !important;
                display: inline !important;
                margin-bottom: 0 !important;
            }
            
            #assessment-instructions-modal .instruction-item p {
                margin: 3px 0 0 0 !important;
                font-size: 0.8rem !important;
                line-height: 1.2 !important;
            }
            
            #assessment-instructions-modal .instruction-item ul {
                margin: 3px 0 0 12px !important;
                padding: 0 !important;
            }
            
            #assessment-instructions-modal .instruction-item li {
                font-size: 0.75rem !important;
                margin-bottom: 2px !important;
                line-height: 1.2 !important;
            }
            
            #assessment-instructions-modal .instructions-warning {
                padding: 8px !important;
                margin: 8px 0 !important;
                font-size: 0.75rem !important;
                border-radius: 6px !important;
                background: rgba(79, 70, 229, 0.1) !important;
                border: 1px solid var(--primary-color) !important;
            }
            
            #assessment-instructions-modal .modal-actions {
                padding: 12px 8px !important;
                background: transparent !important;
                display: flex !important;
                gap: 8px !important;
                position: relative !important;
                margin-top: 1rem !important;
            }
            
            #assessment-instructions-modal .modal-actions .btn {
                flex: 1 !important;
                padding: 10px 6px !important;
                font-size: 0.8rem !important;
                min-height: 40px !important;
                border-radius: 6px !important;
            }
        }
        
        /* ========================================
           TEACHER DASHBOARD MOBILE OPTIMIZATION
           ======================================== */
        @media (max-width: 768px) {
            /* Dashboard Container */
            .dashboard-container {
                padding: 0 !important;
                margin: 0 !important;
            }
            
            .dashboard-container .container {
                padding: 0 !important;
                margin: 0 !important;
                max-width: 100% !important;
            }
            
            /* Sidebar Mobile - Horizontal Scroll - Enhanced */
            .dashboard-sidebar {
                position: sticky !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: auto !important;
                background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
                border-right: none !important;
                border-bottom: 3px solid #e2e8f0 !important;
                z-index: 99 !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            
            .sidebar-menu {
                display: flex !important;
                flex-direction: row !important;
                gap: 0.5rem !important;
                padding: 0.75rem !important;
                white-space: nowrap !important;
                min-width: min-content !important;
            }
            
            .sidebar-menu .menu-item {
                flex: 0 0 auto !important;
                width: auto !important;
                min-width: 100px !important;
                padding: 12px 16px !important;
                font-size: 0.8rem !important;
                font-weight: 600 !important;
                border-radius: 10px !important;
                border: 2px solid transparent !important;
                text-align: center !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 5px !important;
                background: white !important;
                color: #475569 !important;
                box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
                transition: all 0.3s ease !important;
            }
            
            .sidebar-menu .menu-item:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 4px 12px rgba(79,70,229,0.2) !important;
                border-color: #4f46e5 !important;
                color: #4f46e5 !important;
            }
            
            .sidebar-menu .menu-item:last-child {
                margin-right: 0.75rem !important;
            }
            
            .sidebar-menu .menu-item i {
                font-size: 1.3rem !important;
                margin-right: 0 !important;
                margin-bottom: 3px !important;
                transition: transform 0.3s ease !important;
            }
            
            .sidebar-menu .menu-item:hover i {
                transform: scale(1.15) !important;
            }
            
            .sidebar-menu .menu-item.active {
                background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
                color: white !important;
                border: 2px solid #6366f1 !important;
                box-shadow: 0 4px 15px rgba(79,70,229,0.5), inset 0 1px 3px rgba(255,255,255,0.3) !important;
                position: relative !important;
            }
            
            .sidebar-menu .menu-item.active i {
                filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) !important;
                transform: scale(1.1) !important;
            }
            
            .sidebar-menu .menu-item.active::after {
                content: '' !important;
                position: absolute !important;
                bottom: -3px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: 40px !important;
                height: 3px !important;
                background: #ffd700 !important;
                border-radius: 3px 3px 0 0 !important;
                box-shadow: 0 0 10px rgba(255,215,0,0.8) !important;
            }
            
            /* Dashboard Content */
            .dashboard-content {
                width: 100% !important;
                padding: 15px !important;
                margin: 0 !important;
            }
            
            /* Stats Grid - Mobile Optimized */
            .stats-grid {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
                margin-bottom: 20px !important;
            }
            
            .stat-card {
                padding: 15px !important;
                border-radius: 12px !important;
                background: var(--bg-secondary) !important;
                border: 1px solid var(--border-color) !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                min-height: 100px !important;
            }
            
            .stat-card i {
                font-size: 1.8rem !important;
                margin-bottom: 10px !important;
                color: var(--primary-color) !important;
            }
            
            .stat-info h3 {
                font-size: 1.5rem !important;
                margin: 5px 0 !important;
                font-weight: 700 !important;
            }
            
            .stat-info p {
                font-size: 0.75rem !important;
                margin: 0 !important;
                color: var(--text-secondary) !important;
                text-transform: uppercase !important;
                letter-spacing: 0.5px !important;
            }
            
            /* Section Headers - Mobile */
            .section-header {
                display: flex !important;
                flex-direction: column !important;
                gap: 12px !important;
                margin-bottom: 20px !important;
                padding: 0 !important;
            }
            
            .section-header h2 {
                font-size: 1.4rem !important;
                margin: 0 !important;
                font-weight: 700 !important;
            }
            
            .section-header > div {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
            }
            
            .section-header .btn {
                flex: 1 1 calc(50% - 4px) !important;
                min-width: 140px !important;
                padding: 12px 10px !important;
                font-size: 0.85rem !important;
                white-space: nowrap !important;
            }
            
            .section-header .btn i {
                font-size: 0.9rem !important;
                margin-right: 5px !important;
            }
            
            /* Search Input - Mobile */
            #student-search-input,
            #lesson-search-input {
                font-size: 16px !important;
                padding: 12px 15px !important;
                border-radius: 10px !important;
                border: 2px solid var(--border-color) !important;
            }
            
            /* Table Container - Horizontal AND Vertical Scroll */
            .table-container {
                overflow-x: auto !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                margin: 0 -15px 20px -15px !important;
                padding: 0 !important;
                border-radius: 0 !important;
                background: var(--bg-color) !important;
                max-height: 70vh !important;
                position: relative !important;
            }
            
            .data-table {
                font-size: 0.75rem !important;
                min-width: 100% !important;
                width: 100% !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
                background: white !important;
            }
            
            .data-table thead {
                background: linear-gradient(135deg, var(--primary-color), #6366f1) !important;
                color: white !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 10 !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            }
            
            .data-table th {
                padding: 10px 6px !important;
                font-size: 0.7rem !important;
                font-weight: 700 !important;
                text-transform: uppercase !important;
                letter-spacing: 0.3px !important;
                white-space: nowrap !important;
                border-bottom: none !important;
                text-align: left !important;
                color: white !important;
            }
            
            .data-table td {
                padding: 8px 6px !important;
                font-size: 0.75rem !important;
                white-space: nowrap !important;
                border-bottom: 1px solid #f0f0f0 !important;
                vertical-align: middle !important;
                line-height: 1.3 !important;
            }
            
            .data-table tbody tr {
                transition: all 0.2s ease !important;
                background: white !important;
            }
            
            /* Regular rows (NOT group headers) */
            .data-table tbody tr:not(.group-header):nth-child(even) {
                background: #fafafa !important;
            }
            
            .data-table tbody tr:not(.group-header):hover {
                background-color: #f0f7ff !important;
                transform: scale(1.01) !important;
                box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1) !important;
            }
            
            .data-table tbody tr:not(.group-header):active {
                background-color: #e0edff !important;
            }
            
            /* Force group headers to ALWAYS have purple background */
            .data-table tbody tr.group-header,
            tbody tr.group-header,
            tr.group-header {
                background: linear-gradient(135deg, #667eea, #764ba2) !important;
            }
            
            /* Table Action Buttons - Compact */
            .data-table .btn {
                padding: 6px 10px !important;
                font-size: 0.7rem !important;
                min-height: 32px !important;
                white-space: nowrap !important;
                border-radius: 6px !important;
                font-weight: 600 !important;
                display: inline-flex !important;
                align-items: center !important;
                gap: 4px !important;
            }
            
            .data-table .btn i {
                font-size: 0.75rem !important;
                margin: 0 !important;
            }
            
            /* Compact button text on mobile */
            .data-table .btn-sm {
                padding: 5px 8px !important;
                font-size: 0.65rem !important;
                min-height: 28px !important;
            }
            
            /* Time remaining badge */
            .data-table .time-remaining {
                font-size: 0.7rem !important;
                padding: 4px 8px !important;
                border-radius: 4px !important;
                font-weight: 700 !important;
                display: inline-block !important;
                white-space: nowrap !important;
            }
            
            /* Score display */
            .data-table .score-display {
                font-weight: 700 !important;
                font-size: 0.8rem !important;
                color: var(--primary-color) !important;
            }
            
            /* Status badges */
            .data-table .status-badge {
                padding: 3px 8px !important;
                border-radius: 4px !important;
                font-size: 0.65rem !important;
                font-weight: 700 !important;
                text-transform: uppercase !important;
                display: inline-block !important;
            }
            
            /* Student/Lesson names - truncate if too long */
            .data-table .truncate-text {
                max-width: 150px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }
            
            /* Group Headers - Lesson/Section Grouping - Apply to ALL tables */
            .group-header,
            .data-table .group-header,
            table .group-header,
            tbody .group-header {
                background: linear-gradient(135deg, #667eea, #764ba2) !important;
                color: white !important;
                font-weight: 700 !important;
                font-size: 0.85rem !important;
                padding: 12px 10px !important;
                cursor: pointer !important;
                user-select: none !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 8 !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
                transition: all 0.3s ease !important;
            }
            
            .group-header:hover,
            .data-table .group-header:hover,
            table .group-header:hover {
                background: linear-gradient(135deg, #5568d3, #6941a5) !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 3px 6px rgba(0,0,0,0.2) !important;
            }
            
            .group-header:active,
            .data-table .group-header:active,
            table .group-header:active {
                transform: translateY(0) !important;
            }
            
            .group-header td,
            .data-table .group-header td,
            table .group-header td {
                color: white !important;
                font-weight: 700 !important;
                padding: 12px 10px !important;
                border-bottom: 2px solid rgba(255,255,255,0.3) !important;
                background: transparent !important;
            }
            
            .group-header i,
            .data-table .group-header i,
            table .group-header i {
                margin-right: 8px !important;
                font-size: 0.9rem !important;
                transition: transform 0.3s ease !important;
                color: white !important;
            }
            
            .group-header.collapsed i,
            .data-table .group-header.collapsed i {
                transform: rotate(-90deg) !important;
            }
            
            /* Group header text visibility - ALL selectors */
            .group-header .group-title,
            .data-table .group-header .group-title,
            table .group-header .group-title {
                font-size: 0.85rem !important;
                font-weight: 700 !important;
                color: white !important;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
                letter-spacing: 0.3px !important;
            }
            
            .group-header .student-count,
            .data-table .group-header .student-count,
            table .group-header .student-count {
                font-size: 0.75rem !important;
                opacity: 0.9 !important;
                margin-left: 8px !important;
                background: rgba(255,255,255,0.2) !important;
                padding: 2px 8px !important;
                border-radius: 12px !important;
                display: inline-block !important;
                color: white !important;
            }
            
            /* Lesson Cards - Mobile Grid */
            .lessons-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 15px !important;
                padding: 0 !important;
            }
            
            .lesson-card {
                padding: 15px !important;
                border-radius: 12px !important;
                background: var(--bg-secondary) !important;
                border: 1px solid var(--border-color) !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
            }
            
            .lesson-card h3 {
                font-size: 1.1rem !important;
                margin-bottom: 10px !important;
            }
            
            .lesson-card p {
                font-size: 0.85rem !important;
                margin: 5px 0 !important;
            }
            
            .lesson-card .btn {
                width: 100% !important;
                margin-top: 10px !important;
                padding: 10px !important;
                font-size: 0.85rem !important;
            }
            
            /* Tab Navigation - Mobile */
            .nav-tabs {
                display: flex !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                gap: 5px !important;
                padding: 10px 0 !important;
                margin-bottom: 20px !important;
                border-bottom: 2px solid var(--border-color) !important;
            }
            
            .nav-tabs .tab-button {
                flex: 0 0 auto !important;
                min-width: 100px !important;
                padding: 10px 15px !important;
                font-size: 0.85rem !important;
                border-radius: 8px 8px 0 0 !important;
                white-space: nowrap !important;
                background: var(--bg-secondary) !important;
                border: 1px solid var(--border-color) !important;
                border-bottom: none !important;
            }
            
            .nav-tabs .tab-button.active {
                background: var(--primary-color) !important;
                color: white !important;
                border-color: var(--primary-color) !important;
            }
            
            /* Empty State Messages */
            .empty-state {
                text-align: center !important;
                padding: 40px 20px !important;
                color: var(--text-secondary) !important;
            }
            
            .empty-state i {
                font-size: 3rem !important;
                margin-bottom: 15px !important;
                opacity: 0.5 !important;
            }
            
            .empty-state p {
                font-size: 0.9rem !important;
                margin: 10px 0 !important;
            }
            
            /* Timer Display - Mobile */
            .time-remaining {
                font-size: 0.85rem !important;
                font-weight: 700 !important;
                padding: 5px 10px !important;
                border-radius: 6px !important;
                background: var(--bg-secondary) !important;
                display: inline-block !important;
            }
            
            /* Progress Indicators */
            .progress-bar {
                height: 8px !important;
                border-radius: 4px !important;
                background: var(--bg-secondary) !important;
                overflow: hidden !important;
                margin: 10px 0 !important;
            }
            
            .progress-fill {
                height: 100% !important;
                background: linear-gradient(90deg, var(--primary-color), #6366f1) !important;
                transition: width 0.3s ease !important;
            }
            
            /* Mobile Menu Toggle (if needed) */
            .mobile-menu-toggle {
                display: none !important;
                position: fixed !important;
                bottom: 20px !important;
                right: 20px !important;
                width: 56px !important;
                height: 56px !important;
                border-radius: 50% !important;
                background: var(--primary-color) !important;
                color: white !important;
                border: none !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
                z-index: 98 !important;
                font-size: 1.5rem !important;
            }
            
            /* Responsive Typography */
            h1 {
                font-size: 1.8rem !important;
            }
            
            h2 {
                font-size: 1.4rem !important;
            }
            
            h3 {
                font-size: 1.2rem !important;
            }
            
            h4 {
                font-size: 1rem !important;
            }
            
            /* Spacing Utilities */
            .mb-mobile {
                margin-bottom: 15px !important;
            }
            
            .mt-mobile {
                margin-top: 15px !important;
            }
            
            .p-mobile {
                padding: 15px !important;
            }
        }
            
        /* ========================================
           EXTRA SMALL MOBILE (≤400px)
           ======================================== */
        @media (max-width: 400px) {
            .hero h1 {
                font-size: 1.5rem !important;
            }
            
            .hero p {
                font-size: 0.9rem !important;
            }
            
            .hero-buttons button {
                font-size: 0.85rem !important;
                padding: 0.6rem 1rem !important;
            }
            
            /* Sidebar Menu - Extra Small */
            .sidebar-menu {
                padding: 0.5rem !important;
                gap: 0.4rem !important;
                min-width: 100% !important;
            }
            
            .sidebar-menu .menu-item {
                min-width: 90px !important;
                padding: 10px 12px !important;
                font-size: 0.7rem !important;
            }
            
            .sidebar-menu .menu-item i {
                font-size: 1.1rem !important;
            }
            
            /* Section Headers - Extra Small Mobile */
            .data-table th {
                padding: 8px 4px !important;
                font-size: 0.65rem !important;
            }
            
            .data-table td {
                padding: 6px 4px !important;
                font-size: 0.7rem !important;
            }
            
            .data-table .btn {
                padding: 5px 8px !important;
                font-size: 0.65rem !important;
                min-height: 30px !important;
            }
            
            .data-table .time-remaining {
                font-size: 0.65rem !important;
                padding: 3px 6px !important;
            }
            
            /* Adjust max-height for small screens */
            .table-container {
                max-height: 60vh !important;
            }
            
            /* Group headers on small screens - ALL selectors */
            .group-header,
            .data-table .group-header,
            table .group-header {
                font-size: 0.75rem !important;
                padding: 10px 8px !important;
            }
            
            .group-header .group-title,
            .data-table .group-header .group-title,
            table .group-header .group-title {
                font-size: 0.75rem !important;
            }
            
            .group-header .student-count,
            .data-table .group-header .student-count,
            table .group-header .student-count {
                font-size: 0.65rem !important;
                padding: 2px 6px !important;
            }
            
            .group-header i,
            .data-table .group-header i,
            table .group-header i {
                font-size: 0.8rem !important;
                margin-right: 6px !important;
            }
        }
        
        /* Small Mobile Devices (< 480px) */
        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr !important;
            }
            
            .stat-card {
                padding: 20px !important;
            }
            
            .section-header .btn {
                flex: 1 1 100% !important;
                min-width: 100% !important;
            }
            
            .sidebar-menu .menu-item {
                min-width: 100px !important;
                padding: 12px 15px !important;
                font-size: 0.75rem !important;
            }
            
            .sidebar-menu .menu-item i {
                font-size: 1rem !important;
            }
            
            /* Extra compact tables for small screens */
            .data-table th {
                padding: 8px 4px !important;
                font-size: 0.65rem !important;
            }
            
            .data-table td {
                padding: 6px 4px !important;
                font-size: 0.7rem !important;
            }
            
            .data-table .btn {
                padding: 5px 8px !important;
                font-size: 0.65rem !important;
                min-height: 30px !important;
            }
            
            .data-table .time-remaining {
                font-size: 0.65rem !important;
                padding: 3px 6px !important;
            }
            
            /* Adjust max-height for small screens */
            .table-container {
                max-height: 60vh !important;
            }
            
            /* Group headers on small screens - ALL selectors */
            .group-header,
            .data-table .group-header,
            table .group-header {
                font-size: 0.75rem !important;
                padding: 10px 8px !important;
            }
            
            .group-header .group-title,
            .data-table .group-header .group-title,
            table .group-header .group-title {
                font-size: 0.75rem !important;
            }
            
            .group-header .student-count,
            .data-table .group-header .student-count,
            table .group-header .student-count {
                font-size: 0.65rem !important;
                padding: 2px 6px !important;
            }
            
            .group-header i,
            .data-table .group-header i,
            table .group-header i {
                font-size: 0.8rem !important;
                margin-right: 6px !important;
            }
        }
        
        /* Landscape orientation - more vertical space */
        @media (max-width: 768px) and (orientation: landscape) {
            .table-container {
                max-height: 50vh !important;
            }
        }
        
        /* Portrait orientation - standard height */
        @media (max-width: 768px) and (orientation: portrait) {
            .table-container {
                max-height: 65vh !important;
            }
        }
        
        /* Extra improvements for table readability */
        @media (max-width: 768px) {
            /* Add subtle borders for better separation */
            .data-table {
                border: 1px solid #e0e0e0 !important;
            }
            
            /* Make first column (usually name/LRN) sticky on horizontal scroll */
            .data-table th:first-child,
            .data-table td:first-child {
                position: sticky !important;
                left: 0 !important;
                background: inherit !important;
                z-index: 5 !important;
                box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
            }
            
            .data-table thead th:first-child {
                z-index: 15 !important;
                background: linear-gradient(135deg, var(--primary-color), #6366f1) !important;
            }
            
            /* Regular rows first column */
            .data-table tbody tr:not(.group-header):nth-child(even) td:first-child {
                background: #fafafa !important;
            }
            
            .data-table tbody tr:not(.group-header):hover td:first-child {
                background-color: #f0f7ff !important;
            }
            
            /* Group header first column - keep purple */
            .data-table tbody tr.group-header td:first-child,
            tbody tr.group-header td:first-child {
                background: transparent !important;
                box-shadow: none !important;
            }
            
            /* Horizontal scroll indicator shadow (right edge) */
            .table-container::after {
                content: '' !important;
                position: absolute !important;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 20px !important;
                background: linear-gradient(to left, rgba(0,0,0,0.1), transparent) !important;
                pointer-events: none !important;
                opacity: 0.5 !important;
                z-index: 2 !important;
            }
            
            /* Vertical scroll indicator shadow (bottom edge) */
            .table-container::before {
                content: '' !important;
                position: sticky !important;
                display: block !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 20px !important;
                background: linear-gradient(to top, rgba(0,0,0,0.1), transparent) !important;
                pointer-events: none !important;
                opacity: 0.5 !important;
                z-index: 2 !important;
                margin-top: -20px !important;
            }
            
            /* Custom scrollbar styling for better UX */
            .table-container::-webkit-scrollbar {
                width: 8px !important;
                height: 8px !important;
            }
            
            .table-container::-webkit-scrollbar-track {
                background: #f1f1f1 !important;
                border-radius: 4px !important;
            }
            
            .table-container::-webkit-scrollbar-thumb {
                background: var(--primary-color) !important;
                border-radius: 4px !important;
            }
            
            .table-container::-webkit-scrollbar-thumb:hover {
                background: #6366f1 !important;
            }
            
            /* Scroll hint text */
            .table-scroll-hint {
                text-align: center !important;
                padding: 8px !important;
                font-size: 0.7rem !important;
                color: var(--text-secondary) !important;
                background: var(--bg-secondary) !important;
                border-radius: 6px !important;
                margin-bottom: 10px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 5px !important;
            }
            
            .table-scroll-hint i {
                font-size: 0.8rem !important;
                animation: bounce 2s infinite !important;
            }
            
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-3px); }
            }
            
            @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes pulse-red {
            0%, 100% {
                box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
            }
            50% {
                box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
                transform: scale(1.01);
            }
        }
        
        /* Notification Slide Animations */
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }
        
        /* Enhanced Mobile Responsiveness for Account Modal */
        @media (max-width: 768px) {
            #account-modal .modal-content {
                max-width: 100% !important;
                max-height: 100vh !important;
                margin: 0 !important;
                border-radius: 0 !important;
            }
            
            #account-modal .modal-content > div:first-child {
                padding: 1.5rem 1.25rem !important;
            }
            
            #account-modal .modal-content > div:first-child h3 {
                font-size: 1.4rem !important;
            }
            
            #account-modal .modal-content > div:nth-child(2) {
                padding: 1.25rem !important;
                max-height: calc(100vh - 100px) !important;
            }
            
            #account-modal .modal-content div[style*="grid"] {
                grid-template-columns: 1fr !important;
            }
            
            #account-modal .modal-content button {
                width: 100% !important;
                margin: 0.5rem 0 !important;
            }
            
            #account-modal .modal-content [style*="flex"] {
                flex-direction: column !important;
            }
            
        }
        
        @media (max-width: 480px) {
            #account-modal .modal-content > div:first-child {
                padding: 1.25rem 1rem !important;
            }
            
            #account-modal .modal-content > div:first-child h3 {
                font-size: 1.2rem !important;
            }
            
            #account-modal .modal-content > div:nth-child(2) {
                padding: 1rem !important;
            }
            
            #account-modal .modal-content h4 {
                font-size: 1.05rem !important;
            }
        }
        
        /* Student Warning Banner Mobile Responsiveness */
        @media (max-width: 768px) {
            #student-warning-banner {
                padding: 1rem !important;
            }
            
            #student-warning-banner > div {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            
            #student-warning-banner button {
                width: 100% !important;
                margin-top: 0.75rem !important;
            }
            
            #student-warning-banner strong {
                font-size: 1rem !important;
            }
        }
        
        /* Improve button groups in tables */
        .data-table td > .btn-group {
                display: flex !important;
                gap: 4px !important;
                flex-wrap: nowrap !important;
            }
            
            /* Better spacing for action columns */
            .data-table th:last-child,
            .data-table td:last-child {
                padding-right: 10px !important;
                text-align: center !important;
            }
            
            /* Highlight important data */
            .data-table .highlight {
                font-weight: 700 !important;
                color: var(--primary-color) !important;
            }
            
            /* Add loading state */
            .data-table.loading {
                opacity: 0.6 !important;
                pointer-events: none !important;
            }
            
            /* Empty table message */
            .data-table tbody tr.empty-row td {
                text-align: center !important;
                padding: 40px 20px !important;
                color: var(--text-secondary) !important;
                font-style: italic !important;
            }
        }
        
        /* ========================================
           LESSON PLAN PREVIEW STYLING
           ======================================== */
        .lesson-plan-content {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.8;
            color: #2c3e50;
            background: white;
            padding: 0;
        }
        
        .lesson-plan-content h1 {
            color: #2c3e50;
            font-size: 2rem;
            font-weight: 700;
            margin: 2rem 0 1rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 3px solid var(--primary-color);
        }
        
        .lesson-plan-content h2 {
            color: var(--primary-color);
            font-size: 1.6rem;
            font-weight: 700;
            margin: 1.8rem 0 1rem 0;
            padding-left: 1rem;
            border-left: 4px solid var(--primary-color);
        }
        
        .lesson-plan-content h3 {
            color: #34495e;
            font-size: 1.3rem;
            font-weight: 600;
            margin: 1.5rem 0 0.8rem 0;
        }
        
        .lesson-plan-content h4 {
            color: #555;
            font-size: 1.1rem;
            font-weight: 600;
            margin: 1.2rem 0 0.6rem 0;
        }
        
        .lesson-plan-content p {
            margin: 0.8rem 0;
            text-align: justify;
        }
        
        .lesson-plan-content strong {
            color: #2c3e50;
            font-weight: 600;
        }
        
        .lesson-plan-content ul, .lesson-plan-content ol {
            margin: 1rem 0;
            padding-left: 2rem;
        }
        
        .lesson-plan-content li {
            margin: 0.5rem 0;
            line-height: 1.6;
        }
        
        .lesson-plan-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .lesson-plan-content table th {
            background: linear-gradient(135deg, var(--primary-color), #6366f1);
            color: white;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            border: 1px solid #dee2e6;
        }
        
        .lesson-plan-content table td {
            padding: 0.75rem 1rem;
            border: 1px solid #dee2e6;
            background: white;
        }
        
        .lesson-plan-content table tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .lesson-plan-content table tr:hover {
            background: #e9ecef;
            transition: background 0.2s;
        }
        
        .lesson-plan-content div[style*="border"] {
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 8px;
            background: #f8f9fa;
        }
        
        .lesson-plan-content hr {
            border: none;
            height: 2px;
            background: linear-gradient(to right, transparent, var(--primary-color), transparent);
            margin: 2rem 0;
        }
        
        /* Print-friendly styling */
        @media print {
            .lesson-plan-content {
                background: white;
                padding: 0;
                font-size: 12pt;
            }
            
            .lesson-plan-content h1 {
                font-size: 18pt;
                page-break-after: avoid;
            }
            
            .lesson-plan-content h2 {
                font-size: 16pt;
                page-break-after: avoid;
            }
            
            .lesson-plan-content table {
                page-break-inside: avoid;
            }
        }
        
        /* ========================================
           ASSESSMENT PAGE MOBILE OPTIMIZATION
           ======================================== */
        
        @media (max-width: 768px) {
            /* Mobile Sticky Bar - Timer & Violation Container */
            #mobile-sticky-bar {
                position: sticky !important;
                top: 60px !important;
                left: 0 !important;
                right: 0 !important;
                background: transparent !important;
                padding: 0.75rem 1rem !important;
                z-index: 999 !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 0.5rem !important;
            }
            
            /* HIDE ALL ORIGINAL TIMERS ON MOBILE - Prevent duplicates */
            .assessment-section .quiz-timer,
            .assessment-header .quiz-timer,
            #sticky-timer {
                display: none !important;
            }
            
            /* ═══════════════════════════════════════════════════════
               CONNECTION STATUS - Very Small on Mobile
               ═══════════════════════════════════════════════════════ */
            #connection-status-indicator {
                top: 5px !important;
                padding: 4px 10px !important;
                font-size: 0.65rem !important;
                border-radius: 12px !important;
                gap: 4px !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
            }
            
            #connection-status-indicator i {
                font-size: 0.7rem !important;
            }
            
            #connection-status-text {
                font-size: 0.65rem !important;
                font-weight: 600 !important;
            }
            
            /* ═══════════════════════════════════════════════════════
               TIMER BUBBLE - Simple & Clean
               ═══════════════════════════════════════════════════════ */
            #mobile-sticky-timer,
            #mobile-sticky-bar .quiz-timer {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                padding: 10px 16px !important;
                background: #3b82f6 !important;
                color: #ffffff !important;
                border-radius: 20px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
                border: none !important;
                height: auto !important;
                min-width: auto !important;
                width: auto !important;
                position: static !important;
                margin: 0 !important;
            }
            
            #mobile-sticky-timer i {
                font-size: 15px !important;
                color: #ffffff !important;
            }
            
            /* ═══════════════════════════════════════════════════════
               VIOLATION BUBBLE - Simple & Clean (IDENTICAL SIZE)
               ═══════════════════════════════════════════════════════ */
            #mobile-sticky-bar #violation-counter-main {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: #ef4444 !important;
                border-radius: 20px !important;
                box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
                border: none !important;
                position: static !important;
                margin: 0 !important;
                cursor: pointer !important;
            }
            
            /* Collapsed state - IDENTICAL to timer */
            #mobile-sticky-bar #violation-counter-collapsed {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                padding: 10px 16px !important;
                color: #ffffff !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                height: auto !important;
                min-width: auto !important;
                width: auto !important;
            }
            
            #mobile-sticky-bar #violation-counter-collapsed i {
                font-size: 15px !important;
                color: #ffffff !important;
            }
            
            /* Expanded state - Shows violation list */
            #mobile-sticky-bar #violation-counter-content {
                padding: 12px 14px !important;
                font-size: 13px !important;
                font-weight: 500 !important;
                color: #ffffff !important;
                display: none !important;
                max-width: 280px !important;
            }
            
            #mobile-sticky-bar #violation-counter-content i {
                font-size: 14px !important;
                color: #ffffff !important;
            }
            
            /* Assessment Section Container */
            .assessment-section {
                padding: 1rem !important;
                margin: 0 !important;
            }
            
            /* Assessment Header - Back to normal */
            .assessment-header {
                display: flex !important;
                flex-direction: column !important;
                gap: 1rem !important;
                padding: 1.25rem !important;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 12px !important;
                margin-bottom: 1.5rem !important;
            }
            
            .assessment-header h3 {
                font-size: 1.25rem !important;
                margin: 0 !important;
                color: white !important;
                text-align: center !important;
            }
            
            .quiz-timer i {
                font-size: 1.2rem !important;
                animation: pulse 2s infinite !important;
            }
            
            /* Quiz Questions Container */
            #quiz-questions {
                display: flex !important;
                flex-direction: column !important;
                gap: 1.5rem !important;
            }
            
            /* Individual Question Card */
            .quiz-question {
                background: white !important;
                border-radius: 12px !important;
                padding: 1.25rem !important;
                box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
                border: 2px solid #f0f0f0 !important;
            }
            
            .quiz-question h4 {
                font-size: 1rem !important;
                line-height: 1.5 !important;
                margin-bottom: 1rem !important;
                color: #2d3748 !important;
                padding: 0.75rem !important;
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
                border-radius: 8px !important;
                border-left: 4px solid #667eea !important;
            }
            
            /* Question Number Badge */
            .quiz-question h4::before {
                content: "Q" !important;
                display: inline-block !important;
                background: #667eea !important;
                color: white !important;
                padding: 0.25rem 0.5rem !important;
                border-radius: 6px !important;
                font-size: 0.75rem !important;
                margin-right: 0.5rem !important;
                font-weight: 700 !important;
            }
            
            /* Answer Options */
            .quiz-question .form-group {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .quiz-question label {
                display: flex !important;
                align-items: flex-start !important;
                padding: 1rem !important;
                margin: 0.5rem 0 !important;
                background: #f8f9fa !important;
                border: 2px solid #e9ecef !important;
                border-radius: 10px !important;
                cursor: pointer !important;
                transition: all 0.3s ease !important;
                font-size: 0.95rem !important;
                line-height: 1.6 !important;
                min-height: 44px !important; /* Touch-friendly */
                gap: 0.75rem !important;
            }
            
            .quiz-question label:active {
                transform: scale(0.98) !important;
            }
            
            .quiz-question input[type="radio"],
            .quiz-question input[type="checkbox"] {
                min-width: 20px !important;
                min-height: 20px !important;
                margin: 0 !important;
                flex-shrink: 0 !important;
                cursor: pointer !important;
            }
            
            .quiz-question label:hover {
                background: #e8eaf6 !important;
                border-color: #667eea !important;
                box-shadow: 0 2px 8px rgba(102,126,234,0.2) !important;
            }
            
            .quiz-question input[type="radio"]:checked + label,
            .quiz-question label:has(input[type="radio"]:checked),
            .quiz-question label:has(input[type="checkbox"]:checked) {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
                color: white !important;
                border-color: #667eea !important;
                font-weight: 600 !important;
                box-shadow: 0 4px 12px rgba(102,126,234,0.3) !important;
            }
            
            /* Quiz Navigation */
            #quiz-navigation {
                display: flex !important;
                flex-direction: column !important;
                gap: 0.75rem !important;
                margin-top: 2rem !important;
                padding: 1rem !important;
                background: #f8f9fa !important;
                border-radius: 12px !important;
            }
            
            /* Page Indicator */
            #page-indicator {
                order: -1 !important; /* Move to top */
                text-align: center !important;
                padding: 0.75rem !important;
                background: white !important;
                border-radius: 8px !important;
                font-weight: 700 !important;
                font-size: 1rem !important;
                color: #667eea !important;
                box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
            }
            
            /* Navigation Buttons Row */
            #quiz-navigation > button,
            #quiz-navigation > div:has(button) {
                width: 100% !important;
                flex: none !important;
            }
            
            /* Previous and Next Buttons */
            #prev-page-btn,
            #next-page-btn {
                width: 100% !important;
                min-height: 48px !important; /* Touch-friendly */
                font-size: 1rem !important;
                font-weight: 600 !important;
                border-radius: 10px !important;
                padding: 0.875rem 1.5rem !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 0.5rem !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
                transition: all 0.3s ease !important;
            }
            
            #prev-page-btn:active,
            #next-page-btn:active,
            #submit-quiz-btn:active {
                transform: scale(0.97) !important;
            }
            
            /* Submit Button */
            #submit-quiz-btn {
                width: 100% !important;
                min-height: 52px !important;
                font-size: 1.1rem !important;
                font-weight: 700 !important;
                border-radius: 12px !important;
                padding: 1rem 1.5rem !important;
                background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
                box-shadow: 0 4px 12px rgba(72,187,120,0.3) !important;
                margin-top: 0.5rem !important;
            }
            
            /* Results Section - Mobile Optimized */
            .results-section {
                padding: 1rem !important;
            }
            
            .results-card {
                padding: 2rem 1.5rem !important;
                border-radius: 16px !important;
                text-align: center !important;
            }
            
            .results-icon {
                margin-bottom: 1.5rem !important;
            }
            
            .results-icon i {
                font-size: 3.5rem !important;
            }
            
            .results-card h3 {
                font-size: 1.5rem !important;
                margin-bottom: 1.5rem !important;
            }
            
            .score-display {
                margin: 2rem 0 !important;
            }
            
            .score-circle {
                width: 150px !important;
                height: 150px !important;
                margin: 0 auto 1rem !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                border-radius: 50% !important;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
                box-shadow: 0 8px 24px rgba(102,126,234,0.3) !important;
            }
            
            .score-circle span {
                font-size: 2.5rem !important;
                font-weight: 700 !important;
                color: white !important;
            }
            
            #score-text {
                font-size: 1.1rem !important;
                margin: 0.5rem 0 !important;
            }
            
            /* Results Details */
            .results-details {
                margin: 2rem 0 !important;
                text-align: left !important;
            }
            
            .results-details .result-item {
                padding: 1rem !important;
                margin: 0.75rem 0 !important;
                background: #f8f9fa !important;
                border-radius: 10px !important;
                border-left: 4px solid #e9ecef !important;
            }
            
            .results-details .result-item.correct {
                background: #f0fdf4 !important;
                border-left-color: #48bb78 !important;
            }
            
            .results-details .result-item.incorrect {
                background: #fef2f2 !important;
                border-left-color: #f56565 !important;
            }
            
            .results-card .btn {
                width: 100% !important;
                min-height: 50px !important;
                font-size: 1.1rem !important;
                margin-top: 1.5rem !important;
                border-radius: 12px !important;
            }
        }
        
        /* Small Mobile Devices (<= 480px) */
        @media (max-width: 480px) {
            /* Violation Counter - Match Timer at Small Size */
            #violation-counter-main {
                top: 130px !important;
                right: 8px !important;
            }
            
            #violation-counter-content {
                padding: 0.625rem 1rem !important;
                font-size: 1rem !important;
                font-weight: 700 !important;
            }
            
            #violation-counter-content i {
                font-size: 1.1rem !important;
            }
            
            #violation-counter-collapsed {
                padding: 0.625rem !important;
                font-size: 1rem !important;
            }
            
            .assessment-section {
                padding: 0.75rem !important;
            }
            
            .assessment-header {
                padding: 1rem !important;
                gap: 0.75rem !important;
            }
            
            .assessment-header h3 {
                font-size: 1.1rem !important;
            }
            
            .quiz-timer {
                padding: 0.625rem 1rem !important;
                font-size: 1rem !important;
            }
            
            .quiz-question {
                padding: 1rem !important;
            }
            
            .quiz-question h4 {
                font-size: 0.95rem !important;
                padding: 0.625rem !important;
            }
            
            .quiz-question label {
                padding: 0.875rem !important;
                font-size: 0.9rem !important;
                gap: 0.625rem !important;
            }
            
            #prev-page-btn,
            #next-page-btn {
                min-height: 44px !important;
                font-size: 0.95rem !important;
                padding: 0.75rem 1.25rem !important;
            }
            
            #submit-quiz-btn {
                min-height: 48px !important;
                font-size: 1rem !important;
            }
            
            .score-circle {
                width: 130px !important;
                height: 130px !important;
            }
            
            .score-circle span {
                font-size: 2rem !important;
            }
        }
        
        /* Landscape Orientation - Assessment */
        @media (max-width: 768px) and (orientation: landscape) {
            /* Violation Counter - Landscape Position */
            #violation-counter-main {
                top: 80px !important; /* Higher up in landscape */
                right: 10px !important;
            }
            
            .assessment-header {
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: center !important;
            }
            
            .assessment-header h3 {
                text-align: left !important;
            }
            
            .quiz-timer {
                margin: 0 !important;
            }
            
            #quiz-navigation {
                flex-direction: row !important;
                flex-wrap: wrap !important;
            }
            
            #page-indicator {
                order: 0 !important;
                flex: 1 1 100% !important;
                margin-bottom: 0.5rem !important;
            }
            
            #prev-page-btn,
            #next-page-btn {
                flex: 1 !important;
            }
            
            #submit-quiz-btn {
                flex: 1 1 100% !important;
            }
        }
        
        /* Extra Small Devices (<= 400px) */
        @media (max-width: 400px) {
            .quiz-question h4 {
                font-size: 0.875rem !important;
            }
            
            .quiz-question label {
                font-size: 0.85rem !important;
                padding: 0.75rem !important;
            }
            
            .quiz-timer {
                font-size: 0.95rem !important;
                padding: 0.5rem 0.875rem !important;
            }
        }
        
    </style>
    
    <script>
        // Ensure no modals are blocking on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Force close any active modals on page load
            const modalOverlay = document.getElementById('modal-overlay');
            if (modalOverlay) {
                modalOverlay.classList.remove('active');
            }
            
            // Close all modals
            document.querySelectorAll('.modal').forEach(modal => {
                modal.classList.remove('active');
            });
            
            // Ensure proper mobile viewport
            if (window.innerWidth <= 768) {
                document.body.style.overflowX = 'hidden';
                console.log('📱 Mobile view initialized - all modals cleared');
            }
        });
        
        // Handle orientation changes
        window.addEventListener('orientationchange', function() {
            setTimeout(function() {
                // Recalculate viewport on orientation change
                if (window.innerWidth <= 768) {
                    document.body.style.overflowX = 'hidden';
                }
            }, 100);
        });
    </script>

    <!-- Onboarding Tour Styles -->
    <style>
        /* Tour highlight effect */
        .tour-highlight {
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 20px rgba(79, 70, 229, 0.8) !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
        }

        /* Tour tooltip container */
        .tour-tooltip {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            min-width: 300px;
            animation: tooltipFadeIn 0.3s ease;
        }

        @keyframes tooltipFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .tour-tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .tour-progress {
            font-size: 0.85rem;
            color: #6b7280;
            font-weight: 600;
        }

        .tour-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: #9ca3af;
            cursor: pointer;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }

        .tour-close:hover {
            color: #ef4444;
        }

        .tour-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin: 0 0 10px 0;
        }

        .tour-description {
            font-size: 1rem;
            color: #4b5563;
            line-height: 1.6;
            margin: 0 0 20px 0;
        }

        .tour-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .tour-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .tour-btn-primary {
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
            color: white;
        }

        .tour-btn-primary:hover {
            background: linear-gradient(135deg, #4338ca 0%, #312e81 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
        }

        .tour-btn-secondary {
            background: #e5e7eb;
            color: #374151;
        }

        .tour-btn-secondary:hover {
            background: #d1d5db;
        }

        .tour-btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .tour-btn-success:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        /* Help button in dashboard */
        .tour-help-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
            color: white;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9997;
            transition: all 0.3s;
        }

        .tour-help-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(79, 70, 229, 0.6);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .tour-tooltip {
                max-width: 90vw;
                min-width: 280px;
            }

            .tour-help-btn {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
                bottom: 15px;
                right: 15px;
            }
        }

        /* Badge notification animations */
        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        /* Badges display modal */
        .badges-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            z-index: 10001;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .badge-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            border-radius: 10px;
            margin-bottom: 10px;
            transition: transform 0.2s;
        }

        .badge-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .badge-icon {
            font-size: 2.5rem;
        }

        .badge-info h4 {
            margin: 0 0 5px 0;
            font-size: 1.1rem;
            color: #1f2937;
        }

        .badge-info p {
            margin: 0;
            font-size: 0.85rem;
            color: #6b7280;
        }
    </style>

    <!-- Onboarding Tour Script -->
    <script src="js/onboarding-tour.js"></script>
</head>
<body>
    <!-- Global Loading Screen -->
    <div id="global-loader" class="global-loader">
        <div class="loader-spinner"></div>
        <div class="loader-text">Loading JLearn...</div>
    </div>

    <!-- Landing Page -->
    <div id="landing-page" class="page active">
        <nav class="navbar">
            <div class="container">
                <div class="nav-brand">
                    <i class="fas fa-graduation-cap"></i>
                    <span>JLearn</span>
                </div>
                <div class="nav-links">
                    <button class="theme-toggle" id="theme-toggle">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
            </div>
        </nav>

        <div class="hero">
            <div class="container">
                <div class="hero-content">
                    <h1>Welcome to JLearn</h1>
                    <p>Interactive Learning Platform for Students and Teachers</p>
                    <div class="hero-buttons">
                        <button class="btn btn-primary" onclick="showStudentLogin()">
                            <i class="fas fa-user-graduate"></i> Student Portal
                        </button>
                        <button class="btn btn-secondary" onclick="showTeacherLogin()">
                            <i class="fas fa-chalkboard-teacher"></i> Teacher Dashboard
                        </button>
                    </div>
                    <div id="pwa-install-btn" style="display:none; margin-top:1rem;">
                        <button class="btn btn-success" style="width:100%; padding:12px 20px; font-size:1rem; font-weight:600;">
                            <i class="fas fa-download"></i> Install JLearn App
                        </button>
                    </div>
                    <div id="ios-pwa-hint" style="display:none; margin-top:1rem; background:#f0f9ff; border:1px solid #0ea5e9; border-radius:8px; padding:12px; font-size:0.9rem; color:#0369a1;">
                        <i class="fas fa-info-circle"></i> <strong>Install on iPhone/iPad:</strong> Tap <i class="fas fa-share-square"></i> Share button, then "Add to Home Screen"
                    </div>
                </div>
                <div class="hero-illustration">
                    <i class="fas fa-book-reader"></i>
                </div>
            </div>
        </div>

        <!-- Platform Features Section -->
        <div class="platform-features-section" style="padding: 4rem 2rem; background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);">
            <div style="max-width: 1200px; margin: 0 auto;">
                <!-- Section Header -->
                <div style="text-align: center; margin-bottom: 3rem;">
                    <h2 style="font-size: 2.5rem; color: #1e293b; margin-bottom: 1rem; font-weight: 700;">
                        <i class="fas fa-star" style="color: #fbbf24; margin-right: 0.5rem;"></i>
                        Platform Features
                    </h2>
                    <p style="color: #64748b; font-size: 1.1rem; max-width: 700px; margin: 0 auto;">
                        Comprehensive tools designed for modern education—supporting all learning modalities
                    </p>
                </div>

                <!-- Learning Modalities Banner -->
                <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 2rem; border-radius: 16px; margin-bottom: 3rem; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);">
                    <h3 style="color: white; text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 700;">
                        🎓 Supports All Learning Modalities
                    </h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                        <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);">
                            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
                                <i class="fas fa-video" style="color: #fbbf24; font-size: 1.75rem;"></i>
                                <h4 style="color: white; margin: 0; font-weight: 700;">Synchronous Learning</h4>
                            </div>
                            <p style="color: rgba(255,255,255,0.9); margin: 0; font-size: 0.95rem; line-height: 1.6;">
                                Live classes, scheduled exams, real-time monitoring and interaction
                            </p>
                        </div>
                        <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);">
                            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
                                <i class="fas fa-clock" style="color: #fbbf24; font-size: 1.75rem;"></i>
                                <h4 style="color: white; margin: 0; font-weight: 700;">Asynchronous Learning</h4>
                            </div>
                            <p style="color: rgba(255,255,255,0.9); margin: 0; font-size: 0.95rem; line-height: 1.6;">
                                Self-paced lessons, flexible schedules, anytime access
                            </p>
                        </div>
                        <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);">
                            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
                                <i class="fas fa-layer-group" style="color: #fbbf24; font-size: 1.75rem;"></i>
                                <h4 style="color: white; margin: 0; font-weight: 700;">Blended Learning</h4>
                            </div>
                            <p style="color: rgba(255,255,255,0.9); margin: 0; font-size: 0.95rem; line-height: 1.6;">
                                Best of both online and traditional classroom approaches
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Features Grid -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem;">
                                        <!-- Flexible Online Exams -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #10b981;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-calendar-check" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Flexible Online Exams</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Schedule assessments with customizable dates and time limits, perfect for both synchronous (live) and asynchronous (anytime) testing.
                        </p>
                    </div>

                    <!-- Anti-Cheat System -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #ef4444;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-shield-alt" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Anti-Cheat System</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Advanced monitoring features including tab-switching detection, full-screen enforcement, and randomized question orders to ensure exam integrity.
                        </p>
                    </div>

                    <!-- Item Analysis -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #f59e0b;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-chart-bar" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Item Analysis</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Comprehensive statistical analysis of test results with difficulty index, discrimination index, and distractor analysis to improve assessment quality.
                        </p>
                    </div>

                    <!-- Video Lessons -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #ec4899;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-play-circle" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Video Lessons</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Engage students with educational videos featuring controlled playback, ideal for asynchronous learning and remote instruction.
                        </p>
                    </div>

                    <!-- Student Assessments -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #06b6d4;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-clipboard-check" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Student Assessments</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Deliver timed quizzes and tests with instant feedback, supporting both synchronous classroom use and asynchronous self-study.
                        </p>
                    </div>

                    <!-- Progress Tracking -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #6366f1;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-chart-line" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Progress Tracking</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Monitor individual and class-wide learning progress with detailed performance analytics and score reports across all learning modalities.
                        </p>
                    </div>

                    <!-- Secure Access -->
                    <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s; border-top: 4px solid #14b8a6;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
                            <i class="fas fa-lock" style="color: white; font-size: 1.75rem;"></i>
                        </div>
                        <h3 style="color: #1e293b; font-size: 1.3rem; margin-bottom: 0.75rem; font-weight: 700;">Secure Access</h3>
                        <p style="color: #64748b; line-height: 1.7; margin: 0; font-size: 0.95rem;">
                            Username-based authentication system ensuring safe and organized access for all students in online, in-person, or blended settings.
                        </p>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- Student Login Page -->
    <div id="student-login-page" class="page">
        <nav class="navbar">
            <div class="container">
                <div class="nav-brand" onclick="showLanding()">
                    <i class="fas fa-graduation-cap"></i>
                    <span>JLearn</span>
                </div>
                <button class="btn btn-text" onclick="showLanding()">
                    <i class="fas fa-arrow-left"></i> Back
                </button>
            </div>
        </nav>

        <div class="login-container">
            <div class="login-card">
                <div class="login-header">
                    <i class="fas fa-user-graduate"></i>
                    <h2>Student Portal</h2>
                    <p>Enter your classroom code and username to access lessons</p>
                </div>
                <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px;">
                    <div style="display: flex; align-items: start; gap: 0.5rem;">
                        <i class="fas fa-info-circle" style="color: #856404; font-size: 1.2rem; margin-top: 2px;"></i>
                        <div style="color: #856404;">
                            <strong>Notice:</strong> Your username is provided by your teacher. If you don't have a username yet, please contact your teacher.
                        </div>
                    </div>
                </div>
                <form id="student-login-form" onsubmit="studentLogin(event)">
                    <div class="form-group">
                        <label for="classroom-code">
                            <i class="fas fa-key"></i> Classroom Code
                        </label>
                        <input type="text" id="classroom-code" required placeholder="Enter unique classroom code">
                    </div>
                    <div class="form-group">
                        <label for="student-lrn">
                            <i class="fas fa-user"></i> Username
                        </label>
                        <input type="text" id="student-lrn" required placeholder="Enter your username">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-sign-in-alt"></i> Enter Classroom
                    </button>
                </form>
                
                
                <div id="student-login-error" class="error-message" role="alert" aria-live="polite"></div>
            </div>
        </div>
    </div>

    <!-- Student Lesson Page -->
    <div id="student-lesson-page" class="page">
        <nav class="navbar">
            <div class="container">
                <div class="nav-brand">
                    <i class="fas fa-graduation-cap"></i>
                    <span>JLearn</span>
                </div>
                <div class="nav-info">
                    <span id="student-name-display"></span>
                    <button class="btn btn-text" onclick="studentLogout()">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </button>
                </div>
            </div>
        </nav>

        <div class="lesson-container">
            <div class="container">
                <div class="lesson-header">
                    <h2 id="lesson-title"></h2>
                    <div class="lesson-progress">
                        <span id="lesson-status">Watching Video...</span>
                    </div>
                </div>

                <!-- Enhanced Video Section -->
                <div class="video-section" id="video-section">
                    <div class="section-title">
                        <i class="fas fa-play-circle"></i>
                        <h3>Lesson Video</h3>
                    </div>
                    
                    <div class="video-card">
                        <div class="video-wrapper" id="video-wrapper">
                            <video id="lesson-video" controls controlsList="nodownload" oncontextmenu="return false;" style="display: none;">
                                <source src="" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <div id="youtube-player-container" style="display: none;">
                                <div id="youtube-player"></div>
                            </div>
                            <div class="video-overlay" id="video-overlay">
                                <i class="fas fa-lock"></i>
                                <p>Video controls are restricted</p>
                            </div>
                        </div>
                        
                        <!-- Fullscreen Controls (shown when in fullscreen) -->
                        <div class="fullscreen-controls" id="fullscreen-controls">
                            <button class="minimize-btn" onclick="exitFullscreen()" title="Exit Fullscreen">
                                <i class="fas fa-compress"></i> Minimize
                            </button>
                        </div>
                        
                        <!-- Mobile Auto-Rotate Notice -->
                        <div id="mobile-rotate-notice" class="mobile-rotate-notice" style="display: none;">
                            <i class="fas fa-mobile-alt"></i>
                            <span>💡 <strong>Tip:</strong> Turn on auto-rotate and rotate your phone to landscape for a bigger screen!</span>
                        </div>
                        
                        <!-- Fullscreen Button (Outside Video Player) -->
                        <button id="fullscreen-btn" class="fullscreen-btn-external" onclick="toggleFullscreen()" title="Fullscreen">
                            <i class="fas fa-expand"></i> <span>Fullscreen</span>
                        </button>
                        
                        <div class="video-info-card">
                            <div class="info-content">
                                <i class="fas fa-info-circle"></i>
                                <p>Please watch the entire video to proceed</p>
                            </div>
                            <div class="video-progress-bar">
                                <div class="video-progress-fill" id="video-progress-fill"></div>
                            </div>
                            <div class="video-time-display">
                                <i class="fas fa-clock"></i>
                                <span id="video-time">0:00 / 0:00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Additional Materials Section -->
                <div class="materials-section" id="materials-section" style="display: none;">
                    <div class="section-title">
                        <i class="fas fa-folder-open"></i>
                        <h3>Additional Learning Materials</h3>
                    </div>
                    <p class="section-description">Review these materials to enhance your understanding of the lesson</p>
                    <div id="materials-list" class="materials-grid">
                        <!-- Materials will be loaded here -->
                    </div>
                </div>

                <!-- Video Complete Actions -->
                <div class="video-complete-section" id="video-complete-section" style="display: none;">
                    <div class="completion-card">
                        <div class="completion-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h3>🎉 Video Complete!</h3>
                        <p>Great job! You've finished watching the lesson video.</p>
                        <p>You can now take the assessment or watch the video again.</p>
                        <div class="completion-actions">
                            <button class="btn btn-primary btn-large" onclick="showAssessmentInstructions()">
                                <i class="fas fa-clipboard-check"></i> Take Assessment
                            </button>
                            <button class="btn btn-secondary btn-large" onclick="watchVideoAgain()">
                                <i class="fas fa-redo"></i> Watch Again
                            </button>
                        </div>
                    </div>
                </div>

                <div class="assessment-section" id="assessment-section" style="display: none;">
                    <div class="assessment-header" style="position: relative;">
                        <h3>Assessment Quiz</h3>
                        <div class="quiz-timer" id="sticky-timer">
                            <i class="fas fa-clock"></i>
                            <span id="timer-display">00:00</span>
                        </div>
                    </div>
                    <form id="quiz-form">
                        <div id="quiz-questions"></div>
                        
                        <!-- Page Navigation -->
                        <div id="quiz-navigation" style="display: flex; gap: 1rem; margin-top: 2rem; align-items: center;">
                            <button type="button" id="prev-page-btn" class="btn btn-secondary" onclick="previousQuizPage()" style="flex: 1;">
                                <i class="fas fa-arrow-left"></i> Previous
                            </button>
                            <div id="page-indicator" style="text-align: center; color: var(--text-color); font-weight: bold;">
                                Page <span id="current-page-num">1</span> of <span id="total-pages-num">1</span>
                            </div>
                            <button type="button" id="next-page-btn" class="btn btn-primary" onclick="nextQuizPage()" style="flex: 1;">
                                Next <i class="fas fa-arrow-right"></i>
                            </button>
                            <button type="submit" id="submit-quiz-btn" class="btn btn-success btn-block" style="display: none;">
                                <i class="fas fa-paper-plane"></i> Submit Assessment
                            </button>
                        </div>
                    </form>
                </div>

                <div class="results-section" id="results-section" style="display: none;">
                    <div class="results-card">
                        <div class="results-icon">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <h3>Assessment Complete!</h3>
                        <div class="score-display">
                            <div class="score-circle">
                                <span id="score-percentage">0%</span>
                            </div>
                            <p id="score-text">0 out of 0 correct</p>
                        </div>
                        <div class="results-details" id="results-details"></div>
                        <button class="btn btn-primary" onclick="studentLogout()">
                            <i class="fas fa-home"></i> Back to Home
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Teacher Login Page -->
    <div id="teacher-login-page" class="page">
        <nav class="navbar">
            <div class="container">
                <div class="nav-brand" onclick="showLanding()">
                    <i class="fas fa-graduation-cap"></i>
                    <span>JLearn</span>
                </div>
                <button class="btn btn-text" onclick="showLanding()">
                    <i class="fas fa-arrow-left"></i> Back
                </button>
            </div>
        </nav>

        <div class="login-container">
            <div class="login-card">
                <div class="login-header">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h2>Teacher Login</h2>
                    <p>Access your teaching dashboard</p>
                    <small style="color: var(--text-secondary); margin-top: 0.5rem; display: block;">
                        New to JLearn? Create your account below 👇
                    </small>
                </div>
                <form id="teacher-login-form" onsubmit="teacherLogin(event)">
                    <div class="form-group">
                        <label for="teacher-username">
                            <i class="fas fa-envelope"></i> Email Address
                        </label>
                        <input type="email" id="teacher-username" required placeholder="Enter your email">
                    </div>
                    <div class="form-group">
                        <label for="teacher-password">
                            <i class="fas fa-lock"></i> Password
                        </label>
                        <input type="password" id="teacher-password" required placeholder="Enter password">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-sign-in-alt"></i> Login
                    </button>
                </form>
                <div id="teacher-login-error" class="error-message"></div>
                <div class="login-footer">
                    <p><a href="#" onclick="showForgotPassword(); return false;">🔑 Forgot Password?</a></p>
                    <p><a href="#" onclick="showTeacherRegister(); return false;">👤 Create Account</a></p>
                    <p><a href="#" onclick="showResendVerification(); return false;">📧 Resend Verification Email</a></p>
                </div>
            </div>

            <!-- Teacher Registration Card -->
            <div class="login-card" id="teacher-register-card" style="display: none;">
                <div class="login-header">
                    <i class="fas fa-user-plus"></i>
                    <h2>Create Teacher Account</h2>
                    <p>Register to access the teaching portal</p>
                </div>
                
                <!-- Email Verification Notice -->
                <div style="background-color: #e3f2fd; border-left: 4px solid #2196F3; padding: 12px 16px; margin-bottom: 20px; border-radius: 4px;">
                    <div style="display: flex; align-items: start; gap: 10px;">
                        <i class="fas fa-info-circle" style="color: #2196F3; margin-top: 2px; font-size: 18px;"></i>
                        <div style="flex: 1;">
                            <p style="margin: 0; color: #1565C0; font-size: 14px; line-height: 1.5;">
                                <strong>Email Verification Required</strong><br>
                                After clicking "Create Account", a verification link will be sent to your email address. Click the link in the email to verify your account before logging in.
                            </p>
                        </div>
                    </div>
                </div>
                
                <form id="teacher-register-form" onsubmit="teacherRegister(event)">
                    <div class="form-group">
                        <label for="register-email">
                            <i class="fas fa-envelope"></i> Email Address (Username)
                        </label>
                        <input type="email" id="register-email" required placeholder="your.email@example.com">
                        <small style="color: #666; font-size: 0.85rem;">This will be your username</small>
                    </div>
                    
                    <div class="form-row" style="display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0.5rem;">
                        <div class="form-group">
                            <label for="register-firstname">
                                <i class="fas fa-user"></i> First Name
                            </label>
                            <input type="text" id="register-firstname" required placeholder="First name">
                        </div>
                        <div class="form-group">
                            <label for="register-mi">
                                M.I.
                            </label>
                            <input type="text" id="register-mi" placeholder="M.I." maxlength="2" style="text-transform: uppercase;">
                        </div>
                        <div class="form-group">
                            <label for="register-lastname">
                                Last Name
                            </label>
                            <input type="text" id="register-lastname" required placeholder="Last name">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="register-school">
                            <i class="fas fa-school"></i> Name of School
                        </label>
                        <input type="text" id="register-school" required placeholder="Enter school name">
                    </div>
                    
                    <div class="form-group">
                        <label for="register-school-type">
                            <i class="fas fa-building"></i> School Type
                        </label>
                        <select id="register-school-type" required style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; background-color: var(--bg-color); color: var(--text-color);">
                            <option value="">Select school type</option>
                            <option value="Public">Public</option>
                            <option value="Private">Private</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="register-password">
                            <i class="fas fa-lock"></i> Password
                        </label>
                        <input type="password" id="register-password" required placeholder="Choose a password" minlength="6">
                        <small style="color: #666; font-size: 0.85rem;">At least 6 characters</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="register-confirm-password">
                            <i class="fas fa-lock"></i> Confirm Password
                        </label>
                        <input type="password" id="register-confirm-password" required placeholder="Confirm your password">
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-user-plus"></i> Create Account
                    </button>
                </form>
                <div id="teacher-register-error" class="error-message"></div>
                <div id="teacher-register-success" class="success-message" style="display: none;"></div>
                <div class="login-footer">
                    <p>Already have an account? <a href="#" onclick="showTeacherLoginForm(); return false;" style="color: var(--primary-color); font-weight: 600;">Login</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Teacher Dashboard Page -->
    <div id="teacher-dashboard-page" class="page">
        <nav class="navbar">
            <div class="container">
                <!-- Mobile Hamburger Menu Button -->
                <button class="mobile-menu-toggle" id="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle Menu">
                    <i class="fas fa-bars"></i>
                </button>
                
                <div class="nav-brand">
                    <i class="fas fa-graduation-cap"></i>
                    <span>JLearn</span>
                </div>
                <div class="nav-info">
                    <span id="teacher-name-display"></span>
                    <button class="btn btn-text" onclick="teacherLogout()">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </button>
                </div>
            </div>
        </nav>

        <!-- Mobile Menu Overlay -->
        <div class="mobile-menu-overlay" id="mobile-menu-overlay" onclick="toggleMobileMenu()"></div>

        <div class="dashboard-container">
            <div class="container">
                <div class="dashboard-sidebar" id="dashboard-sidebar">
                    <div class="sidebar-menu">
                        <button class="menu-item active" onclick="console.log('Overview clicked'); showDashboardSection('overview'); closeMobileMenu(); return false;" ontouchstart="console.log('Overview touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-chart-pie" style="pointer-events: none;"></i> Overview
                        </button>
                        <button class="menu-item" onclick="console.log('Students clicked'); showDashboardSection('students'); closeMobileMenu(); return false;" ontouchstart="console.log('Students touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-users" style="pointer-events: none;"></i> Students
                        </button>
                        <button class="menu-item" onclick="console.log('Lessons clicked'); showDashboardSection('lessons'); closeMobileMenu(); return false;" ontouchstart="console.log('Lessons touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-book" style="pointer-events: none;"></i> Lessons
                        </button>
                        <button class="menu-item" onclick="console.log('Progress clicked'); showDashboardSection('in-progress'); closeMobileMenu(); return false;" ontouchstart="console.log('Progress touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-hourglass-half" style="pointer-events: none;"></i> In Progress
                        </button>
                        <button class="menu-item" onclick="console.log('Results clicked'); showDashboardSection('results'); closeMobileMenu(); return false;" ontouchstart="console.log('Results touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-chart-bar" style="pointer-events: none;"></i> Results
                        </button>
                        <button class="menu-item" onclick="console.log('Item Analysis clicked'); showDashboardSection('item-analysis'); closeMobileMenu(); return false;" ontouchstart="console.log('Item Analysis touched');" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-chart-line" style="pointer-events: none;"></i> Item Analysis
                        </button>
                        <button class="menu-item" onclick="console.log('Account clicked'); openAccountModal(); return false;" ontouchstart="console.log('Account touched'); event.stopPropagation();" style="pointer-events: auto !important; z-index: 9999 !important; position: relative !important;">
                            <i class="fas fa-user-circle" style="pointer-events: none;"></i> Account
                        </button>
                    </div>
                </div>

                <div class="dashboard-content" id="teacher-dashboard">
                    <!-- Tour Help Button -->
                    <button class="tour-help-btn" onclick="showTourMenu()" title="Need help? Start a guided tour!" style="display: none;">
                        <i class="fas fa-question"></i>
                    </button>
                    
                    <!-- AI Assistant Button -->
                    <button class="ai-assistant-btn" onclick="toggleAIChat()" title="Ask JLearn AI Assistant">
                        <i class="fas fa-robot"></i>
                    </button>
                    
                    <!-- AI Chat Modal -->
                    <div id="ai-chat-modal" class="ai-chat-modal">
                        <div class="ai-chat-header">
                            <div class="ai-chat-title">
                                <i class="fas fa-robot"></i>
                                <span>JLearn AI Assistant</span>
                            </div>
                            <button class="ai-chat-close" onclick="toggleAIChat()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="ai-chat-messages" id="ai-chat-messages">
                            <div class="ai-message ai-message-assistant">
                                <div class="ai-message-content">
                                    <p>Hello! I'm your JLearn AI Assistant. I can help you with:</p>
                                    <ul>
                                        <li>Creating lessons step by step</li>
                                        <li>Adding and managing students</li>
                                        <li>Understanding all website features</li>
                                        <li>Troubleshooting issues</li>
                                        <li>Best practices for assessments</li>
                                    </ul>
                                    <p>What would you like to know?</p>
                                </div>
                            </div>
                        </div>
                        <div class="ai-chat-input-area">
                            <div class="ai-chat-input-wrapper">
                                <input type="text" id="ai-chat-input" placeholder="Ask me anything about JLearn... (try: 'add 5 students', 'export results', 'create lesson about Photosynthesis')" 
                                       onkeypress="if(event.key === 'Enter') sendAIMessage()">
                                <button class="ai-send-btn" onclick="sendAIMessage()">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                                <button class="ai-voice-btn" onclick="toggleVoiceInput()" title="Voice input">
                                    <i class="fas fa-microphone"></i>
                                </button>
                            </div>
                            <div class="ai-quick-actions">
                                <button class="ai-quick-action" onclick="quickAction('analyze lessons')">📊 Analyze Lessons</button>
                                <button class="ai-quick-action" onclick="quickAction('student insights')">👥 Student Insights</button>
                                <button class="ai-quick-action" onclick="quickAction('generate questions')">❓ Generate Questions</button>
                                <button class="ai-quick-action" onclick="quickAction('troubleshoot')">🔧 Troubleshoot</button>
                                <button class="ai-quick-action" onclick="quickAction('help')">❓ Help</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Overview Section -->
                    <div id="overview-section" class="dashboard-section active">
                        <h2>Dashboard Overview</h2>
                        
                        <div class="stats-grid">
                            <div class="stat-card">
                                <i class="fas fa-users"></i>
                                <div class="stat-info">
                                    <h3 id="total-students">0</h3>
                                    <p>Total Students</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <i class="fas fa-book"></i>
                                <div class="stat-info">
                                    <h3 id="total-lessons">0</h3>
                                    <p>Active Lessons</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <i class="fas fa-hourglass-half"></i>
                                <div class="stat-info">
                                    <h3 id="total-in-progress">0</h3>
                                    <p>In Progress</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <i class="fas fa-chart-bar"></i>
                                <div class="stat-info">
                                    <h3 id="total-results">0</h3>
                                    <p>Results</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <i class="fas fa-chart-line"></i>
                                <div class="stat-info">
                                    <h3 id="average-score">0%</h3>
                                    <p>Average Score</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Students Section -->
                    <div id="students-section" class="dashboard-section">
                        <div class="section-header">
                            <h2>Student Management</h2>
                            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                                <button class="btn btn-primary" onclick="showAddStudentModal()">
                                    <i class="fas fa-plus"></i> Add Student
                                </button>
                                <button class="btn btn-success" onclick="downloadStudentTemplate()">
                                    <i class="fas fa-download"></i> Download Template
                                </button>
                                <button class="btn btn-info" onclick="document.getElementById('import-excel-input').click()">
                                    <i class="fas fa-file-import"></i> Import Excel
                                </button>
                                <input type="file" id="import-excel-input" accept=".xlsx,.xls" style="display: none;" onchange="importStudentsFromExcel(event)">
                                <button class="btn btn-secondary" onclick="exportStudentsToExcel()">
                                    <i class="fas fa-file-export"></i> Export Excel
                                </button>
                            </div>
                        </div>
                        <!-- Search Bar -->
                        <div class="search-container" style="padding: 1rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 1rem;">
                            <input type="text" id="student-search-input" placeholder="🔍 Search by username, name, grade, or section..." 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem;"
                                   oninput="filterStudents(this.value)">
                        </div>
                        <!-- Warning banner will be inserted here by JavaScript -->
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Name</th>
                                        <th>Grade Level</th>
                                        <th>Section</th>
                                        <th>Email</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="students-table-body">
                                    <tr>
                                        <td colspan="6" class="empty-state">No students added yet</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Lessons Section -->
                    <div id="lessons-section" class="dashboard-section">
                        <div class="section-header">
                            <h2>Lesson Management</h2>
                            <button class="btn btn-primary" onclick="showAddLessonModal()">
                                <i class="fas fa-plus"></i> Create Lesson
                            </button>
                        </div>
                        <div id="lessons-grid" class="lessons-grid">
                            <div class="empty-state-card">
                                <i class="fas fa-book"></i>
                                <p>No lessons created yet</p>
                            </div>
                        </div>
                    </div>

                    <!-- In Progress Section -->
                    <div id="in-progress-section" class="dashboard-section">
                        <div class="section-header">
                            <h2>Students In Progress</h2>
                            <button class="btn btn-secondary" onclick="refreshInProgressTable()">
                                <i class="fas fa-sync"></i> Refresh
                            </button>
                        </div>
                        <!-- Search Bar -->
                        <div style="padding: 1rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 1rem;">
                            <input type="text" id="progress-search-input" placeholder="🔍 Search by username, name, or lesson..." 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem;"
                                   oninput="filterProgress(this.value)">
                        </div>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Name</th>
                                        <th>Lesson</th>
                                        <th>Time Remaining</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="in-progress-table-body">
                                    <tr>
                                        <td colspan="5" class="empty-state">No students currently taking assessments</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Results Section -->
                    <div id="results-section-teacher" class="dashboard-section">
                        <div class="section-header">
                            <h2>Student Results</h2>
                            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                                <button class="btn btn-success" onclick="exportResultsToExcelMultiTab()">
                                    <i class="fas fa-file-excel"></i> Export Excel (By Lesson & Section)
                                </button>
                                <button class="btn btn-success" onclick="exportResults()">
                                    <i class="fas fa-file-download"></i> Export JSON (Complete)
                                </button>
                                <button class="btn btn-secondary" onclick="exportResultsCSV()">
                                    <i class="fas fa-file-csv"></i> Export CSV (Summary)
                                </button>
                                <button class="btn btn-info" onclick="document.getElementById('import-results-input').click()">
                                    <i class="fas fa-file-upload"></i> Import Results
                                </button>
                                <input type="file" id="import-results-input" accept=".json" style="display: none;" onchange="importResults(event)">
                            </div>
                        </div>
                        <!-- Search Bar -->
                        <div style="padding: 1rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 1rem;">
                            <input type="text" id="results-search-input" placeholder="🔍 Search by username, name, lesson, or score..." 
                                   style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem;"
                                   oninput="filterResults(this.value)">
                        </div>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Name</th>
                                        <th>Lesson</th>
                                        <th>Score</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="results-table-body">
                                    <tr>
                                        <td colspan="6" class="empty-state">No results available</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Item Analysis Section -->
                    <div id="item-analysis-section" class="dashboard-section">
                        <div class="section-header">
                            <h2><i class="fas fa-chart-line"></i> Item Analysis (DepEd Standard)</h2>
                            <button class="btn btn-primary" onclick="refreshItemAnalysis()">
                                <i class="fas fa-sync"></i> Refresh Analysis
                            </button>
                        </div>

                        <!-- Filter Controls -->
                        <div style="background: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
                                <div>
                                    <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Select Lesson:</label>
                                    <select id="ia-lesson-filter" onchange="filterItemAnalysis()" style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.95rem;">
                                        <option value="">All Lessons</option>
                                    </select>
                                </div>
                                <div>
                                    <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Select Section:</label>
                                    <select id="ia-section-filter" onchange="filterItemAnalysis()" style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.95rem;">
                                        <option value="">All Sections</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-success" onclick="exportItemAnalysisReport()" style="margin-right: 0.5rem;">
                                <i class="fas fa-file-excel"></i> Export Report
                            </button>
                            <button class="btn btn-info" onclick="showItemAnalysisGuide()">
                                <i class="fas fa-question-circle"></i> How to Interpret
                            </button>
                        </div>

                        <!-- Summary Cards -->
                        <div id="ia-summary-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                            <!-- Summary cards will be populated by JavaScript -->
                        </div>

                        <!-- Analysis Content -->
                        <div id="ia-content" style="background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                            <p style="text-align: center; color: #6b7280; padding: 3rem;">Select a lesson to view item analysis</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Account Information Modal - Professional Design -->
    <div id="account-modal" class="modal">
        <div class="modal-content" style="max-width: 1400px; max-height: 90vh; overflow: hidden; border-radius: 12px; padding: 0; background: #ffffff; box-shadow: 0 20px 60px rgba(0,0,0,0.25);">
            <!-- Clean Modal Header -->
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1.5rem 2rem; color: white; position: relative; overflow: hidden;">
                <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.08); border-radius: 50%; filter: blur(40px);"></div>
                <div style="position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.3);">
                            <i class="fas fa-user-circle" style="font-size: 1.75rem; color: white;"></i>
                        </div>
                        <div>
                            <h3 id="account-name-header" style="margin: 0 0 0.2rem 0; font-size: 1.3rem; color: white; font-weight: 700; letter-spacing: -0.3px;">Loading...</h3>
                            <p id="account-email-header" style="margin: 0; color: rgba(255,255,255,0.85); font-size: 0.8rem;">Loading...</p>
                        </div>
                    </div>
                    <button onclick="closeAccountModal()" style="background: rgba(255,255,255,0.15); border: none; color: white; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; backdrop-filter: blur(10px);" onmouseover="this.style.background='rgba(255,255,255,0.25)'" onmouseout="this.style.background='rgba(255,255,255,0.15)'">
                        <i class="fas fa-times" style="font-size: 1rem;"></i>
                    </button>
                </div>
            </div>
            
            <!-- Scrollable Modal Body -->
            <div style="overflow-y: auto; max-height: calc(90vh - 100px); padding: 1.5rem 2rem; background: #f8f9fa;">
                        <!-- Personal Details Card -->
                        <div style="background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.25rem; border: 1px solid #e5e7eb;">
                            <h4 style="margin: 0 0 1.25rem 0; font-size: 1rem; color: #1f2937; display: flex; align-items: center; gap: 0.5rem; font-weight: 700; padding-bottom: 0.75rem; border-bottom: 2px solid #f3f4f6;">
                                <i class="fas fa-id-card" style="color: #667eea; font-size: 0.95rem;"></i> Personal Information
                            </h4>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                                <div style="background: #f9fafb; padding: 1rem; border-radius: 8px; border-left: 3px solid #667eea;">
                                    <label style="display: block; font-weight: 600; color: #667eea; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;">First Name</label>
                                    <p id="account-firstname" style="margin: 0; font-size: 0.95rem; color: #1f2937; font-weight: 600;">N/A</p>
                                </div>
                                <div style="background: #f9fafb; padding: 1rem; border-radius: 8px; border-left: 3px solid #667eea;">
                                    <label style="display: block; font-weight: 600; color: #667eea; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;">M.I.</label>
                                    <p id="account-middleinitial" style="margin: 0; font-size: 0.95rem; color: #1f2937; font-weight: 600;">N/A</p>
                                </div>
                                <div style="background: #f9fafb; padding: 1rem; border-radius: 8px; border-left: 3px solid #667eea;">
                                    <label style="display: block; font-weight: 600; color: #667eea; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;">Last Name</label>
                                    <p id="account-lastname" style="margin: 0; font-size: 0.95rem; color: #1f2937; font-weight: 600;">N/A</p>
                                </div>
                                <div style="background: #f0fdf4; padding: 1rem; border-radius: 8px; border-left: 3px solid #10b981;">
                                    <label style="display: block; font-weight: 600; color: #10b981; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;">Email Address</label>
                                    <p id="account-email" style="margin: 0; font-size: 0.9rem; color: #1f2937; font-weight: 600; word-break: break-word;">N/A</p>
                                </div>
                            </div>
                            <div style="margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap;">
                                <button class="btn btn-primary" onclick="showEditAccountModal()" style="flex: 1; min-width: 130px; padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 600;">
                                    <i class="fas fa-edit"></i> Edit Profile
                                </button>
                                <button class="btn btn-secondary" onclick="showChangePasswordModal()" style="flex: 1; min-width: 130px; padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 600;">
                                    <i class="fas fa-lock"></i> Change Password
                                </button>
                            </div>
                        </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div id="modal-overlay" class="modal-overlay"></div>

    <!-- Lesson Plan Preview Modal -->
    <div id="lesson-plan-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 1200px; max-height: 95vh; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 10001; overflow: hidden;">
        <div style="background: white; border-radius: 20px; display: flex; flex-direction: column; height: 100%; max-height: 95vh;">
            <!-- Header with Close Button -->
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 2rem; border-bottom: 2px solid #f0f0f0; flex-shrink: 0;">
                <div>
                    <h3 style="margin: 0; font-size: 1.8rem; color: #2c3e50; display: flex; align-items: center; gap: 0.75rem;">
                        <i class="fas fa-file-alt" style="color: #667eea;"></i> Generated Lesson Plan
                    </h3>
                </div>
                <div style="display: flex; gap: 0.75rem; align-items: center;">
                    <button onclick="LessonPlanner.copyPlan()" style="padding: 0.65rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                    <button onclick="LessonPlanner.downloadPDF()" style="padding: 0.65rem 1.25rem; background: #e74c3c; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                        <i class="fas fa-file-pdf"></i> PDF
                    </button>
                    <button onclick="LessonPlanner.downloadWord()" style="padding: 0.65rem 1.25rem; background: #2980b9; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(41, 128, 185, 0.3);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                        <i class="fas fa-file-word"></i> Word
                    </button>
                    <button onclick="closeLessonPlanModal()" style="padding: 0.65rem 1rem; background: #e74c3c; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1.2rem; transition: all 0.3s; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3); margin-left: 1rem;" onmouseover="this.style.background='#c0392b'" onmouseout="this.style.background='#e74c3c'">
                        <i class="fas fa-times"></i> Close
                    </button>
                </div>
            </div>
            
            <!-- Scrollable Content Area -->
            <div style="flex: 1; overflow-y: auto; padding: 3rem;">
                <div id="lesson-plan-modal-content" style="min-height: 400px;">
                    <div style="text-align: center; padding: 100px 20px; color: #999;">
                        <i class="fas fa-file-alt" style="font-size: 80px; opacity: 0.2; margin-bottom: 25px; display: block;"></i>
                        <p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 10px;">No Lesson Plan Generated Yet</p>
                        <p style="font-size: 0.95rem; opacity: 0.8;">Generate a lesson plan to see it here</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Student Modal -->
    <div id="add-student-modal" class="modal">
        <div class="modal-header">
            <h3>Add Student</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="add-student-form" onsubmit="addStudent(event)">
            <div class="form-group">
                <label for="student-lrn-input"><i class="fas fa-user"></i> Username</label>
                <input type="text" id="student-lrn-input" placeholder="e.g., jdoe2025, student001" required>
                <small>This will be used by the student to login</small>
            </div>
            <div class="form-group">
                <label for="student-name-input">Full Name</label>
                <input type="text" id="student-name-input" required>
            </div>
            <div class="form-group">
                <label for="student-grade-input"><i class="fas fa-graduation-cap"></i> Grade Level</label>
                <select id="student-grade-input" required>
                    <option value="">Select Grade Level</option>
                    <option value="Grade 1">Grade 1</option>
                    <option value="Grade 2">Grade 2</option>
                    <option value="Grade 3">Grade 3</option>
                    <option value="Grade 4">Grade 4</option>
                    <option value="Grade 5">Grade 5</option>
                    <option value="Grade 6">Grade 6</option>
                    <option value="Grade 7">Grade 7</option>
                    <option value="Grade 8">Grade 8</option>
                    <option value="Grade 9">Grade 9</option>
                    <option value="Grade 10">Grade 10</option>
                    <option value="Grade 11">Grade 11</option>
                    <option value="Grade 12">Grade 12</option>
                </select>
            </div>
            <div class="form-group">
                <label for="student-section-input"><i class="fas fa-users"></i> Section</label>
                <input type="text" id="student-section-input" placeholder="e.g., A, B, Einstein, Newton" required>
                <small>Enter the section name or letter</small>
            </div>
            <div class="form-group">
                <label for="student-email-input">Email (Optional)</label>
                <input type="email" id="student-email-input">
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-text" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Student</button>
            </div>
        </form>
    </div>

    <!-- Add Lesson Modal -->
    <div id="add-lesson-modal" class="modal modal-large">
        <div class="modal-header">
            <h3>Create New Lesson</h3>
            <div style="display: flex; gap: 0.5rem; align-items: center;">
                <button type="button" class="btn btn-info btn-sm" onclick="document.getElementById('import-lesson-input').click()">
                    <i class="fas fa-file-import"></i> Import Lesson
                </button>
                <input type="file" id="import-lesson-input" accept=".json" style="display: none;" onchange="importLesson(event)">
                <button class="modal-close" onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <form id="add-lesson-form" onsubmit="addLesson(event)">
            <div class="form-group">
                <label for="lesson-title-input">Lesson Title</label>
                <input type="text" id="lesson-title-input" required>
            </div>
            <div class="form-group">
                <label for="lesson-subject-input"><i class="fas fa-book"></i> Subject</label>
                <input type="text" id="lesson-subject-input" placeholder="e.g., Mathematics, Science, English" required>
                <small>Enter the subject or topic of this lesson</small>
            </div>
            <div class="form-group">
                <label for="lesson-code-input">Unique Classroom Code</label>
                <input type="text" id="lesson-code-input" required>
                <small>Students will use this code to access the lesson</small>
            </div>
            <div class="form-group">
                <label><i class="fas fa-calendar-alt"></i> Lesson Duration</label>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label for="lesson-start-date" style="font-size: 0.9rem; font-weight: 500;">Start Date & Time</label>
                        <input type="datetime-local" id="lesson-start-date" required style="width: 100%; padding: 0.75rem; border: 2px solid var(--border-color); border-radius: var(--radius); font-size: 1rem;">
                    </div>
                    <div>
                        <label for="lesson-end-date" style="font-size: 0.9rem; font-weight: 500;">End Date & Time</label>
                        <input type="datetime-local" id="lesson-end-date" required style="width: 100%; padding: 0.75rem; border: 2px solid var(--border-color); border-radius: var(--radius); font-size: 1rem;">
                    </div>
                </div>
                <small>Set when the lesson will be available for students</small>
            </div>
            <!-- Video Source Section (Optional) - MULTIPLE VIDEOS -->
            <div class="form-group">
                <label><i class="fas fa-video"></i> Videos (Optional - Add Multiple)</label>
                <small style="display: block; margin-bottom: 10px; color: #666;">Add multiple videos - students can navigate between them using left/right arrows</small>
                <div id="videos-container" style="display: flex; flex-direction: column; gap: 1rem;">
                    <!-- Videos will be added here -->
                </div>
                <button type="button" class="btn btn-secondary" onclick="addVideoField()" style="margin-top: 10px;">
                    <i class="fas fa-plus"></i> Add Video
                </button>
            </div>
            
            
            <!-- Documents Section (Optional) -->
            <div class="form-group">
                <label><i class="fas fa-file-alt"></i> Learning Materials & Documents (Optional)</label>
                <small style="display: block; margin-bottom: 10px; color: #666;">Add PDFs, Word documents, PowerPoint presentations, Excel files, or other learning materials</small>
                <div id="documents-container" style="display: flex; flex-direction: column; gap: 1rem;">
                    <!-- Documents will be added here -->
                </div>
                <button type="button" class="btn btn-secondary" onclick="addDocumentField()" style="margin-top: 10px;">
                    <i class="fas fa-plus"></i> Add Document/File
                </button>
            </div>
            
            <div class="form-group">
                <label for="quiz-timer-input">Quiz Timer (minutes)</label>
                <input type="number" id="quiz-timer-input" required min="1" value="10">
            </div>
            
            <!-- Assessment Pages -->
            <div class="form-group">
                <label><i class="fas fa-clipboard-list"></i> Assessment Questions</label>
                <div class="assessment-pages-header">
                    <div class="pages-tabs" id="pages-tabs">
                        <button type="button" class="page-tab active" data-page="1" onclick="switchPage(1)">
                            <i class="fas fa-file"></i> Page 1
                        </button>
                    </div>
                    <button type="button" class="btn btn-sm btn-success" onclick="addNewPage()">
                        <i class="fas fa-plus"></i> Add Page
                    </button>
                </div>
            </div>

            <!-- Page Container -->
            <div id="assessment-pages-container">
                <!-- Page 1 -->
                <div class="assessment-page active" data-page="1">
                    <div class="page-header">
                        <h4><i class="fas fa-file-alt"></i> Page 1 Assessment</h4>
                        <button type="button" class="btn btn-sm btn-danger" onclick="removePage(1)" style="display: none;">
                            <i class="fas fa-trash"></i> Remove Page
                        </button>
                    </div>
                    
                    <!-- Assessment Type Dropdown for Page 1 -->
                    <div class="form-group">
                        <label for="assessment-type-1"><i class="fas fa-list"></i> Select Assessment Type for This Page</label>
                        <select id="assessment-type-1" class="form-control" onchange="switchAssessmentType(1)" required>
                            <option value="multiple-choice">Multiple Choice</option>
                            <option value="matching">Matching Type</option>
                            <option value="identification">Identification</option>
                            <option value="fill-blanks">Fill in the Blanks</option>
                            <option value="enumeration">Enumeration</option>
                            <option value="essay">Essay</option>
                        </select>
                        <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
                            <i class="fas fa-info-circle"></i> All questions on this page will be of the selected type
                        </small>
                    </div>

            <!-- Multiple Choice Tab -->
            <div id="multiple-choice-tab-1" class="assessment-tab-content active">
                <div class="form-group">
                    <label for="quiz-questions-input">Multiple Choice Questions</label>
                    <textarea id="quiz-questions-input" rows="12" placeholder="📝 REQUIRED FORMAT - Copy this example:

Q: What do we call artworks created using computer software?
A) Traditional art
B) Digital art [correct]
C) Folk art
D) Classical art

Q: What is 2 + 2?
A) 3
B) 4 [correct]
C) 5
D) 6

Q: What is the capital of the Philippines?
A) Cebu
B) Davao
C) Manila [correct]
D) Baguio"></textarea>
                <div class="format-guide">
                    <strong>📋 Format Rules:</strong>
                    <ul>
                        <li><strong>Q:</strong> starts each question (required)</li>
                        <li><strong>A)</strong> <strong>B)</strong> <strong>C)</strong> <strong>D)</strong> for choices (letter + closing parenthesis)</li>
                        <li><strong>[correct]</strong> marks the right answer (required for one option)</li>
                        <li>Leave blank lines between questions (optional but recommended)</li>
                    </ul>
                </div>
                <div id="questions-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                    <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                    <div id="preview-content-1"></div>
                </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewQuestionsForPage(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('multiple-choice')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>

            <!-- Matching Type Tab -->
            <div id="matching-tab-1" class="assessment-tab-content">
                <div class="form-group">
                    <label for="matching-questions-input-1">Matching Type Questions</label>
                    <textarea id="matching-questions-input-1" rows="12" placeholder="📝 SIMPLE FORMAT - Just copy and paste:

MATCH: Match the following terms with their correct descriptions

LEFT:
1. HTML
2. CSS
3. JavaScript
4. Python

RIGHT:
A. Styling language
B. Markup language
C. Programming language for web interactivity
D. General-purpose programming language

ANSWERS:
1-B
2-A
3-C
4-D

NOTE: LEFT items can use ANY numbers (1-4, 26-30, etc.)
ANSWERS must match the LEFT item numbers
Supports all dash types: - – —"></textarea>
                    <div class="format-guide">
                        <strong>📋 Format Rules:</strong>
                        <ul>
                            <li><strong>MATCH:</strong> starts the question with instructions</li>
                            <li><strong>LEFT:</strong> items with numbers (1., 26., Q11., etc.) - one per line</li>
                            <li><strong>RIGHT:</strong> lettered options (A., B., C., D., etc.)</li>
                            <li><strong>ANSWERS:</strong> matches using LEFT numbers (1-B, 26-C, etc.)</li>
                            <li>🔢 <strong>FLEXIBLE NUMBERING:</strong> LEFT items can use ANY numbers (1-4, 26-30, Q11-Q14, etc.)</li>
                            <li>🔗 <strong>IMPORTANT:</strong> ANSWERS must use the SAME numbers as your LEFT items</li>
                            <li>➖ <strong>DASH SUPPORT:</strong> Use any dash type: hyphen (-), en-dash (–), or em-dash (—)</li>
                            <li>⚡ <strong>CONTINUOUS NUMBERING:</strong> In the quiz, items are numbered continuously regardless of your input numbers</li>
                            <li>📝 <strong>Answer boxes:</strong> Students see numbered boxes for each LEFT item</li>
                            <li>✅ <strong>Scoring:</strong> Each match is worth 1 point (4 LEFT items = 4 points total)</li>
                            <li>Each section must be on separate lines</li>
                        </ul>
                    </div>
                    <div id="matching-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                        <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                        <div id="matching-preview-content-1"></div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewMatching(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('matching')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>

            <!-- Identification Tab -->
            <div id="identification-tab-1" class="assessment-tab-content">
                <div class="form-group">
                    <label for="identification-questions-input-1">Identification Questions</label>
                    <textarea id="identification-questions-input-1" rows="12" placeholder="📝 REQUIRED FORMAT - Copy this example:

ID: What is the capital city of the Philippines?
ANSWER: MANILA

ID: Who is known as the father of computers?
ANSWER: CHARLES BABBAGE

ID: What does HTML stand for?
ANSWER: HYPERTEXT MARKUP LANGUAGE"></textarea>
                    <div class="format-guide">
                        <strong>📋 Format Rules:</strong>
                        <ul>
                            <li><strong>ID:</strong> starts each identification question</li>
                            <li><strong>ANSWER:</strong> provides the correct answer in UPPERCASE</li>
                            <li>✅ <strong>All answers MUST be in UPPERCASE letters</strong></li>
                            <li>✅ Students will type answers in UPPERCASE</li>
                            <li>Leave blank lines between questions (optional)</li>
                            <li>Answers are checked case-insensitively</li>
                        </ul>
                    </div>
                    <div id="identification-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                        <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                        <div id="identification-preview-content-1"></div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewIdentification(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('identification')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>

            <!-- Fill in the Blanks Tab -->
            <div id="fill-blanks-tab-1" class="assessment-tab-content">
                <div class="form-group">
                    <label for="fill-blanks-questions-input-1">Fill in the Blanks Questions</label>
                    <textarea id="fill-blanks-questions-input-1" rows="12" placeholder="📝 REQUIRED FORMAT - Copy this example:

FILL: The _____ is the largest ocean on Earth.
ANSWER: PACIFIC OCEAN

FILL: The process of plants making food using sunlight is called _____.
ANSWER: PHOTOSYNTHESIS

FILL: The capital of France is _____.
ANSWER: PARIS"></textarea>
                    <div class="format-guide">
                        <strong>📋 Format Rules:</strong>
                        <ul>
                            <li><strong>FILL:</strong> starts each question</li>
                            <li>Use <strong>_____</strong> (5 underscores) to mark the blank</li>
                            <li><strong>ANSWER:</strong> provides the correct answer in UPPERCASE</li>
                            <li>✅ <strong>All answers MUST be in UPPERCASE letters</strong></li>
                            <li>✅ Students will type answers in UPPERCASE</li>
                            <li>Leave blank lines between questions (optional)</li>
                        </ul>
                    </div>
                    <div id="fill-blanks-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                        <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                        <div id="fill-blanks-preview-content-1"></div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewFillBlanks(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('fill-blanks')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>

            <!-- Enumeration Tab -->
            <div id="enumeration-tab-1" class="assessment-tab-content">
                <div class="form-group">
                    <label for="enumeration-questions-input-1">Enumeration Questions</label>
                    <textarea id="enumeration-questions-input-1" rows="12" placeholder="📝 SIMPLE FORMAT - Just copy and paste:

ENUM: List 3 primary colors
ANSWERS:
- RED
- BLUE
- YELLOW

ENUM: Name 4 seasons of the year
ANSWERS:
- SPRING
- SUMMER
- FALL
- WINTER"></textarea>
                    <div class="format-guide">
                        <strong>📋 Format Rules (FLEXIBLE):</strong>
                        <ul>
                            <li><strong>ENUM:</strong> starts each question (required)</li>
                            <li><strong>ANSWERS:</strong> starts the answers section (required)</li>
                            <li>Each answer can use: <strong>- Item</strong> or <strong>• Item</strong> or <strong>* Item</strong> or <strong>1. Item</strong></li>
                            <li>✅ <strong>All answers MUST be in UPPERCASE letters</strong></li>
                            <li>✅ Students will type answers in UPPERCASE</li>
                            <li>✅ Works with or without spaces after dash</li>
                            <li>✅ Case-insensitive (ENUM: or enum: both work)</li>
                            <li>✅ Order doesn't matter for grading</li>
                        </ul>
                        <div style="margin-top: 0.5rem; padding: 0.75rem; background: var(--success-color); color: white; border-radius: 4px; font-size: 0.9rem;">
                            💡 <strong>Tip:</strong> Write all answers in UPPERCASE! Students will type in UPPERCASE too.
                        </div>
                    </div>
                    <div id="enumeration-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                        <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                        <div id="enumeration-preview-content-1"></div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewEnumeration(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('enumeration')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>

            <!-- Essay Tab -->
            <div id="essay-tab-1" class="assessment-tab-content">
                <div class="form-group">
                    <label for="essay-questions-input-1">Essay Questions</label>
                    <textarea id="essay-questions-input-1" rows="12" placeholder="📝 REQUIRED FORMAT - Copy this example:

ESSAY: Explain the importance of education in society. (Minimum 100 words)
POINTS: 10

ESSAY: Discuss the impact of technology on modern communication. (Minimum 150 words)
POINTS: 15

ESSAY: What are your career goals and how do you plan to achieve them? (Minimum 200 words)
POINTS: 20"></textarea>
                    <div class="format-guide">
                        <strong>📋 Format Rules:</strong>
                        <ul>
                            <li><strong>ESSAY:</strong> starts each essay question</li>
                            <li>Include word count requirement in parentheses</li>
                            <li><strong>POINTS:</strong> specifies maximum points for the essay</li>
                            <li>Essays require manual grading by teacher</li>
                            <li>Leave blank lines between questions (optional)</li>
                        </ul>
                    </div>
                    <div class="instructions-warning" style="margin-top: 1rem;">
                        <i class="fas fa-info-circle"></i>
                        <strong>Note:</strong> Essay questions require manual grading. Students will submit their answers, and you'll need to review and assign scores in the results section.
                    </div>
                    <div id="essay-preview-1" style="display: none; margin-top: 1rem; padding: 1rem; background-color: var(--bg-color); border-radius: var(--radius); border: 2px solid var(--primary-color);">
                        <h4 style="color: var(--primary-color); margin-bottom: 1rem;">📋 Preview - How Students Will See:</h4>
                        <div id="essay-preview-content-1"></div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="button" class="btn btn-secondary" onclick="previewEssay(1)" style="flex: 1;">
                            <i class="fas fa-eye"></i> Preview Questions
                        </button>
                        <button type="button" class="btn btn-success" onclick="copySampleFormat('essay')" style="flex: 1;">
                            <i class="fas fa-copy"></i> Copy Sample Format
                        </button>
                    </div>
                </div>
            </div>
                </div>
                <!-- End of Page 1 -->
            </div>
            <!-- End of Pages Container -->

            <div class="modal-actions">
                <button type="button" class="btn btn-text" onclick="closeModal()">Cancel</button>
                <button type="button" class="btn btn-secondary" onclick="saveLessonAsDraft(event)">
                    <i class="fas fa-save"></i> Save as Draft
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-check-circle"></i> Publish Lesson
                </button>
            </div>
        </form>
    </div>

    <!-- Assessment Instructions Modal -->
    <div id="assessment-instructions-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-info-circle"></i> Assessment Instructions</h3>
            <button class="modal-close" onclick="closeAssessmentInstructions()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="instructions-content">
                <div class="instruction-item">
                    <i class="fas fa-clock"></i>
                    <div>
                        <strong>Time Limit:</strong>
                        <p>You have <span id="quiz-time-display" style="color: var(--primary-color); font-weight: 700;">10</span> minutes to complete the assessment.</p>
                    </div>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-question-circle"></i>
                    <div>
                        <strong>Number of Questions:</strong>
                        <p><span id="quiz-questions-count" style="color: var(--primary-color); font-weight: 700;">0</span> questions</p>
                    </div>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-layer-group"></i>
                    <div>
                        <strong>Assessment Pages:</strong>
                        <p><span id="quiz-pages-count" style="color: var(--primary-color); font-weight: 700;">1</span> page(s)</p>
                    </div>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-list"></i>
                    <div>
                        <strong>Question Types:</strong>
                        <p id="quiz-types-display" style="color: var(--primary-color); font-weight: 700;">Multiple Choice</p>
                    </div>
                </div>
                <div class="instruction-item">
                    <i class="fas fa-exclamation-triangle"></i>
                    <div>
                        <strong>⚠️ IMPORTANT:</strong>
                        <ul style="color: #dc2626; font-weight: 500;">
                            <li>Timer starts immediately and cannot be paused</li>
                            <li>Unanswered questions will be marked WRONG</li>
                            <li>Auto-submits when time runs out</li>
                        </ul>
                    </div>
                </div>
                
                <!-- 🚨 ANTI-CHEAT VIOLATIONS WARNING -->
                <div class="instruction-item" style="
                    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); 
                    border: 3px solid #dc2626 !important; 
                    border-left: 5px solid #dc2626 !important;
                    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
                    animation: pulse-red 2s infinite;
                ">
                    <i class="fas fa-shield-alt" style="color: #dc2626; font-size: 1.2rem;"></i>
                    <div>
                        <strong style="color: #991b1b; font-size: 1.1rem;">
                            🚨 ANTI-CHEAT SYSTEM - STRICTLY ENFORCED
                        </strong>
                        <p style="color: #991b1b; font-weight: 600; margin: 8px 0;">
                            The following actions will count as VIOLATIONS (Maximum: 5):
                        </p>
                        <ul style="color: #b91c1c; font-weight: 600; margin: 8px 0; line-height: 1.8;">
                            <li><i class="fas fa-ban" style="color: #dc2626;"></i> <strong>Switching tabs or windows</strong> - Stay on assessment page only</li>
                            <li><i class="fas fa-ban" style="color: #dc2626;"></i> <strong>Taking screenshots</strong> - All screenshot attempts are detected</li>
                            <li><i class="fas fa-ban" style="color: #dc2626;"></i> <strong>Copy/Paste actions</strong> - Right-click and copy disabled</li>
                            <li><i class="fas fa-ban" style="color: #dc2626;"></i> <strong>Page reload/refresh</strong> - Do NOT reload during assessment</li>
                        </ul>
                        <div style="
                            background: #7f1d1d; 
                            color: white; 
                            padding: 12px; 
                            border-radius: 8px; 
                            margin-top: 12px;
                            font-weight: 700;
                            text-align: center;
                        ">
                            ⚠️ REACHING 5 VIOLATIONS = AUTOMATIC SUBMISSION ⚠️
                        </div>
                        <p style="color: #991b1b; font-weight: 600; margin: 8px 0 0 0; font-size: 0.9rem;">
                            <i class="fas fa-exclamation-circle"></i> Your assessment will be automatically submitted if you reach 5 violations!
                        </p>
                    </div>
                </div>
                
                <!-- 👁️ TEACHER MONITORING NOTICE -->
                <div class="instruction-item" style="
                    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
                    border: 2px solid #3b82f6 !important; 
                    border-left: 4px solid #3b82f6 !important;
                ">
                    <i class="fas fa-eye" style="color: #2563eb; font-size: 1.1rem;"></i>
                    <div>
                        <strong style="color: #1e40af; font-size: 1rem;">
                            👁️ Teacher Monitoring
                        </strong>
                        <p style="color: #1e3a8a; font-weight: 500; margin: 6px 0 0 0; font-size: 0.9rem;">
                            <i class="fas fa-info-circle"></i> Your teacher can monitor your assessment actions and progress in real-time.
                        </p>
                    </div>
                </div>
            </div>
            <div class="instructions-warning">
                <i class="fas fa-info-circle"></i>
                <strong>Ready to begin?</strong> Click "Start Assessment" to proceed. Click "Not Now" if you want to review the video again.
            </div>
            
            <!-- Buttons moved inside modal-body to force scrolling -->
            <div class="modal-actions" style="position: relative; margin-top: 1.5rem;">
                <button type="button" class="btn btn-text" onclick="closeAssessmentInstructions()">
                    <i class="fas fa-times"></i> Not Now
                </button>
                <button type="button" class="btn btn-primary" onclick="startAssessment()">
                    <i class="fas fa-play"></i> Start Assessment
                </button>
            </div>
        </div>
    </div>

    <!-- View Results Modal -->
    <div id="view-results-modal" class="modal">
        <div class="modal-header">
            <h3>Assessment Details</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="result-details-content" class="result-details-content">
            <!-- Content will be populated dynamically -->
        </div>
    </div>

    <!-- Forgot Password Modal -->
    <div id="forgot-password-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-key"></i> Reset Password</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="forgot-password-form" onsubmit="sendPasswordReset(event)">
            <div class="form-group">
                <label for="reset-email">
                    <i class="fas fa-envelope"></i> Email Address
                </label>
                <input type="email" id="reset-email" required placeholder="Enter your email">
                <small>We'll send you a password reset link</small>
            </div>
            <button type="submit" class="btn btn-primary btn-block">
                <i class="fas fa-paper-plane"></i> Send Reset Link
            </button>
        </form>
        <div id="forgot-password-error" class="error-message"></div>
        <div id="forgot-password-success" class="success-message" style="display: none;"></div>
    </div>

    <!-- Resend Verification Modal -->
    <div id="resend-verification-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-envelope-open-text"></i> Resend Verification Email</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="resend-verification-form" onsubmit="resendVerificationEmail(event)">
            <div class="form-group">
                <label for="resend-email">
                    <i class="fas fa-envelope"></i> Email Address
                </label>
                <input type="email" id="resend-email" required placeholder="Enter your email">
                <small>We'll send you a new verification link</small>
            </div>
            <button type="submit" class="btn btn-primary btn-block">
                <i class="fas fa-paper-plane"></i> Resend Verification Email
            </button>
        </form>
        <div id="resend-verification-error" class="error-message"></div>
        <div id="resend-verification-success" class="success-message" style="display: none;"></div>
    </div>

    <!-- Update Password Modal (After clicking reset link) -->
    <div id="update-password-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-lock"></i> Set New Password</h3>
            <button class="modal-close" onclick="closeUpdatePasswordModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="update-password-form" onsubmit="updatePassword(event)">
            <div class="form-group">
                <label for="new-password">
                    <i class="fas fa-lock"></i> New Password
                </label>
                <input type="password" id="new-password" required placeholder="Enter new password" minlength="6">
                <small>Minimum 6 characters</small>
            </div>
            <div class="form-group">
                <label for="confirm-new-password">
                    <i class="fas fa-lock"></i> Confirm New Password
                </label>
                <input type="password" id="confirm-new-password" required placeholder="Confirm new password" minlength="6">
            </div>
            <button type="submit" class="btn btn-primary btn-block">
                <i class="fas fa-check"></i> Update Password
            </button>
        </form>
        <div id="update-password-error" class="error-message"></div>
        <div id="update-password-success" class="success-message" style="display: none;"></div>
    </div>

    <!-- Edit Account Modal -->
    <div id="edit-account-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-user-edit"></i> Edit Account Information</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-content">
            <form id="edit-account-form" onsubmit="updateAccountInfo(event)">
                <div class="form-group">
                    <label for="edit-first-name">First Name *</label>
                    <input type="text" id="edit-first-name" required>
                </div>
                <div class="form-group">
                    <label for="edit-middle-initial">Middle Initial</label>
                    <input type="text" id="edit-middle-initial" maxlength="1">
                </div>
                <div class="form-group">
                    <label for="edit-last-name">Last Name *</label>
                    <input type="text" id="edit-last-name" required>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Change Password Modal -->
    <div id="change-password-modal" class="modal">
        <div class="modal-header">
            <h3><i class="fas fa-key"></i> Change Password</h3>
            <button class="modal-close" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-content">
            <form id="change-password-form" onsubmit="changePassword(event)">
                <div class="form-group">
                    <label for="current-password">Current Password *</label>
                    <input type="password" id="current-password" required>
                </div>
                <div class="form-group">
                    <label for="new-password">New Password *</label>
                    <input type="password" id="new-password" required minlength="6">
                    <small style="color: var(--text-secondary);">Minimum 6 characters</small>
                </div>
                <div class="form-group">
                    <label for="confirm-password">Confirm New Password *</label>
                    <input type="password" id="confirm-password" required minlength="6">
                </div>
                <div id="change-password-error" class="error-message" style="display: none;"></div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check"></i> Change Password
                    </button>
                </div>
            </form>
        </div>
    </div>


    <!-- Footer -->

    <footer id="site-footer" style="
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
        padding: 8px 15px;
        font-size: 12px;
        font-weight: 600;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        border-top: 2px solid rgba(255,255,255,0.2);
    ">
        <span style="
            background: linear-gradient(45deg, #FFD700, #FFA500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            font-weight: 700;
        ">
            ⚡ POWERED BY: Junrel R. Sapanta A.K.A Sir J ⚡
        </span>
    </footer>

    <!-- External Libraries for PDF/Word Export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    
    <!-- ✅ Error Reporter - Global Error Capture System -->
    <script src="js/error-reporter.js?v=113.1.9&cb=1784556670"></script>
    
    <!-- ✅ Scripts - Version 113.1.9 - FIX CORS ORIGIN -->
    <script src="js/supabase-config.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/supabase-auth.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/supabase-d1-sync.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/enhanced-teacher-login.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/api-client.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/app.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/account.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/excel-import-export.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/excel-results-export.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/item-analysis.js?v=113.1.9&cb=1784556670"></script>
    <script src="js/demo-lesson.js?v=113.1.9&cb=1784556670"></script>

    <!-- Connection Lost Overlay -->
    <div id="connection-lost-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100000; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem;">
        <div style="text-align: center; color: white; max-width: 400px; padding: 2rem;">
            <div style="margin-bottom: 1.5rem;">
                <i class="fas fa-wifi" style="font-size: 3.5rem; color: #ff4444; animation: pulse-wifi 1.5s infinite;"></i>
            </div>
            <h2 style="font-size: 1.5rem; margin-bottom: 0.75rem; font-weight: 700;">Connection Lost</h2>
            <p style="font-size: 1rem; opacity: 0.9; margin-bottom: 1.5rem; line-height: 1.5;">
                Your internet connection has been lost. Your assessment progress is saved.<br>
                Please wait while we try to reconnect...
            </p>
            <div style="display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
                <div class="conn-spinner" style="width: 32px; height: 32px; border: 4px solid rgba(255,255,255,0.2); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite;"></div>
                <span style="font-size: 0.9rem; opacity: 0.8;">Reconnecting...</span>
            </div>
            <p style="font-size: 0.8rem; opacity: 0.6; margin-top: 1.5rem;">
                Do not close this page. Your answers are safe.
            </p>
        </div>
    </div>
    <style>
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse-wifi { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }
    </style>
</body>
</html>
