{% extends "base.html" %}

{% block title %}Review Grading Results - Anzar{% endblock %}

{% block content %}
<div x-data="gradeReviewV2()" class="page-container">

    <!-- ========================================================================= -->
    <!-- PAGE HEADER -->
    <!-- ========================================================================= -->

    <div class="review-header-card">
        <div class="review-header-content">
            <div class="review-header-text">
                <h1 class="review-title">
                    <i class="ph-check-square"></i>
                    Grading Results Review
                </h1>
                <p class="review-subtitle">Review and edit grades before uploading to Canvas</p>
            </div>
            <div class="review-header-actions">
                <button @click="backToGradingHub()" class="review-btn review-btn-back">
                    <i class="ph-arrow-left"></i>
                    <span x-text="contentType === 'assignment' ? 'Back to Agent Setup' : 'Back to Grading Hub'"></span>
                </button>
                <button x-show="source !== 'offline'" @click="navigateToUpload()" class="review-btn review-btn-upload"
                        :disabled="getOverallStatus().gradedCount === 0"
                        :title="getOverallStatus().gradedCount === 0 ? 'Nothing to upload yet: no graded answers found' : ''">
                    <i class="ph-upload"></i>
                    <span>Upload to Canvas</span>
                </button>
                <button x-show="source === 'offline'" @click="exportOfflineGrades()" class="review-btn review-btn-upload">
                    <i class="ph-download"></i>
                    <span>Export Grades</span>
                </button>
            </div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- STATISTICS DASHBOARD -->
    <!-- ========================================================================= -->

    <div x-show="statistics" class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="ph-users"></i></div>
            <div class="stat-content">
                <div class="stat-label">Total Students</div>
                <div class="stat-value" x-text="statistics?.total_students || 0"></div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="ph-list-bullets"></i></div>
            <div class="stat-content">
                <div class="stat-label">Questions</div>
                <div class="stat-value" x-text="statistics?.total_questions || 0"></div>
            </div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- SKIPPED SUBMISSIONS WARNING -->
    <!-- ========================================================================= -->

    <div x-show="skippedStudents.length > 0" x-cloak class="card"
         style="border-left: 4px solid #f59e0b;">
        <div class="card-body" style="padding: 1rem 1.5rem;">
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
                <div style="display: flex; align-items: center; gap: 0.6rem; font-weight: 600;">
                    <i class="ph-warning-circle" style="color: #f59e0b;"></i>
                    <span x-text="skippedStudents.length + (skippedStudents.length === 1 ? ' submission was' : ' submissions were') + ' skipped during parsing and were NOT graded'"></span>
                </div>
                <button type="button" @click="showSkippedDetails = !showSkippedDetails"
                        style="background: transparent; border: none; color: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; white-space: nowrap;">
                    <span x-text="showSkippedDetails ? 'Hide details' : 'Show details'"></span>
                </button>
            </div>
            <div x-show="showSkippedDetails" x-cloak style="margin-top: 0.75rem;">
                <template x-for="(sk, si) in skippedStudents" :key="'skip' + si">
                    <div style="padding: 0.5rem 0; border-top: 1px solid rgba(150,150,150,0.25); font-size: 0.85rem;">
                        <span style="font-weight: 600;" x-text="sk.student_name"></span>
                        <span style="opacity: 0.7;" x-text="' (ID ' + sk.student_id + ')'"></span>
                        <span x-show="sk.source" x-cloak style="opacity: 0.7;"
                              x-text="' — ' + sk.source"></span>
                        <div style="opacity: 0.85;" x-text="sk.error"></div>
                    </div>
                </template>
                <p style="margin-top: 0.75rem; font-size: 0.8rem; opacity: 0.8;">
                    These students submitted files that could not be read. Grade them manually or check their submission folders.
                </p>
            </div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- VIEW TOGGLE & FILTERS -->
    <!-- ========================================================================= -->

    <div class="card">
        <div class="card-body" style="padding: 1.5rem;">
            <!-- View Mode Toggle -->
            <div class="segmented-control" style="margin-bottom: 1.5rem;">
                <button class="segmented-control-btn"
                        :class="{ 'active': viewMode === 'by-student' }"
                        @click="viewMode = 'by-student'; backToList()">
                    <i class="ph-user"></i> <span>By Student</span>
                </button>
                <button class="segmented-control-btn"
                        :class="{ 'active': viewMode === 'by-question' }"
                        @click="viewMode = 'by-question'; backToList()">
                    <i class="ph-list-bullets"></i> <span>By Question</span>
                </button>
            </div>

            <!-- Filters -->
            <div class="filters-row">
                <div class="search-box">
                    <i class="ph-magnifying-glass"></i>
                    <input type="text"
                           x-model="searchQuery"
                           placeholder="Search students..."
                           class="search-input">
                </div>
                <select x-model="scoreFilter" class="filter-select">
                    <option value="all">All Scores</option>
                    <option value="high">High (90-100%)</option>
                    <option value="medium">Medium (70-89%)</option>
                    <option value="low">Low (< 70%)</option>
                </select>
                <button x-show="needsReviewCount > 0" x-cloak
                        @click="needsReviewOnly = !needsReviewOnly"
                        class="review-filter-btn" :class="{ 'active': needsReviewOnly }">
                    <i class="ph-flag"></i>
                    <span>Needs review (<span x-text="needsReviewCount"></span>)</span>
                </button>
            </div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- LOADING STATE -->
    <!-- ========================================================================= -->

    <div x-show="loading" class="card">
        <div class="card-body" style="text-align: center; padding: 3rem;">
            <div class="spinner"></div>
            <p style="margin-top: 1rem; color: var(--text-secondary);">Loading results...</p>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- BY STUDENT VIEW - LIST -->
    <!-- ========================================================================= -->

    <div x-show="!loading && viewMode === 'by-student' && currentView === 'list'" class="card">
        <div class="card-header">
            <h3 class="card-title">Students</h3>
            <div class="card-subtitle" x-text="'Showing ' + filteredStudents.length + ' of ' + allStudents.length + ' students'"></div>
        </div>
        <div class="card-body">
            <template x-for="student in filteredStudents" :key="student.student_id">
                <div class="list-item" @click="showStudentDetail(student.student_id)">
                    <div class="list-item-info">
                        <div class="list-item-title" x-text="student.student_name"></div>
                        <div class="list-item-subtitle" x-text="getStudentSummary(student.student_id)"></div>
                    </div>
                    <div class="list-item-actions">
                        <span x-show="studentNeedsReview(student.student_id)" x-cloak class="low-confidence-chip"
                              title="At least one grade for this student came from a weakly-parsed AI response">
                            <i class="ph-flag"></i> review
                        </span>
                        <span class="student-total-grade"
                              :class="getStudentGradeClass(student.student_id)"
                              x-text="getStudentTotalGradeBadge(student.student_id)">
                        </span>
                        <i class="ph-caret-right"></i>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- BY QUESTION VIEW - LIST -->
    <!-- ========================================================================= -->

    <div x-show="!loading && viewMode === 'by-question' && currentView === 'list'" class="card">
        <div class="card-header">
            <h3 class="card-title">Questions</h3>
            <div class="card-subtitle">Click on a question to view student grades</div>
        </div>
        <div class="card-body">
            <template x-for="(question, index) in questions" :key="question.id">
                <div class="list-item" @click="showQuestionDetail(question.id)">
                    <div class="list-item-info">
                        <div class="list-item-title-container">
                            <span x-html="'Q' + (index + 1) + ': ' + prepareQuestion(truncate(question.text, 120))"></span>
                            <template x-if="question.text && question.text.length > 120">
                                <button @click.stop="showFullQuestion(question.text)" class="btn-link">
                                    Show More
                                </button>
                            </template>
                        </div>
                        <div class="list-item-subtitle" x-text="getQuestionStatus(question.id).totalCount + ' students'"></div>
                    </div>
                    <div class="list-item-actions">
                        <span class="status-badge"
                              :class="'status-' + getQuestionStatus(question.id).status"
                              x-text="getQuestionStatus(question.id).statusText"></span>
                        <i class="ph-caret-right"></i>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- STUDENT DETAIL VIEW -->
    <!-- ========================================================================= -->

    <div x-show="!loading && viewMode === 'by-student' && currentView === 'detail'" class="card">
        <div class="card-header">
            <button @click="backToList()" class="btn btn-outline">
                <i class="ph-arrow-left"></i> Back to Students
            </button>
            <div class="student-detail-header">
                <h3 class="card-title" x-text="currentStudentName"></h3>
                <span class="total-grade-badge"
                      :class="getStudentGradeClass(currentStudent)"
                      x-text="getStudentTotalGradeBadge(currentStudent)"
                      x-show="getStudentTotalGradeBadge(currentStudent)">
                </span>
                <button x-show="contentType === 'assignment'"
                        @click="openFileViewer(currentStudent, currentStudentName)"
                        class="btn btn-sm btn-outline"
                        style="margin-left: auto;">
                    <i class="ph-folder-open"></i> View Submission Files
                </button>
            </div>
        </div>
        <div class="card-body">

            <!-- Questions for this student -->
            <template x-for="(result, index) in currentStudentResults" :key="index">
                <div class="grade-item" :class="{ 'editing': isEditing(result.student_id, result.question_id) }">

                    <!-- VIEW MODE -->
                    <div x-show="!isEditing(result.student_id, result.question_id)" class="grade-view">
                        <div class="grade-question-title-container">
                            <span x-html="'Q' + (index + 1) + ': ' + prepareQuestion(truncate(result.question_text, 120))"></span>
                            <template x-if="result.question_text && result.question_text.length > 120">
                                <button @click.stop="showFullQuestion(result.question_text)" class="btn-link">Show More</button>
                            </template>
                        </div>

                        <div x-show="!isFileBased" class="grade-answer">
                            <strong>Answer:</strong>
                            <div class="answer-body">
                                <span x-html="prepareAnswer(isAnswerExpanded(result.student_id, result.question_id) ? result.student_answer : truncate(result.student_answer, 200))"></span>
                            </div>
                            <template x-if="result.student_answer && result.student_answer.length > 200">
                                <button @click.stop="toggleAnswer(result.student_id, result.question_id)" class="btn-link">
                                    <span x-text="isAnswerExpanded(result.student_id, result.question_id) ? 'Show Less' : 'Show More'"></span>
                                </button>
                            </template>
                        </div>

                        <div class="grade-display-container">
                            <div class="grade-badge" :class="getGradeClass(result.grade, result.max_points)">
                                <i class="ph-trophy"></i>
                                <span x-text="result.grade + '/' + result.max_points"></span>
                            </div>
                            <span x-show="isLowConfidence(result.confidence)" x-cloak class="low-confidence-chip"
                                  title="The AI response for this grade was only partially parseable - double-check the points">
                                <i class="ph-flag"></i> check
                            </span>
                        </div>

                        <div x-show="result.feedback" class="grade-feedback" x-text="result.feedback"></div>

                        <button @click="startEdit(result.student_id, result.question_id)" class="btn btn-sm btn-primary">
                            <i class="ph-pencil"></i> Edit
                        </button>
                    </div>

                    <!-- EDIT MODE -->
                    <div x-show="isEditing(result.student_id, result.question_id)" class="grade-edit" x-data>
                        <template x-if="editData">
                            <div>
                                <div class="grade-question-title-container">
                                    <span x-html="'Q' + (index + 1) + ': ' + prepareQuestion(truncate(editData.question_text, 120))"></span>
                                    <template x-if="editData.question_text && editData.question_text.length > 120">
                                        <button @click.stop="showFullQuestion(editData.question_text)" class="btn-link">Show More</button>
                                    </template>
                                </div>

                                <div x-show="!isFileBased" class="edit-section">
                                    <div class="edit-section-title"><i class="ph-student"></i> Student Answer</div>
                                    <div class="edit-section-content" x-html="prepareAnswer(editData.student_answer)"></div>
                                </div>

                                <div class="form-group">
                                    <label>Points Earned</label>
                                    <div class="points-input-group">
                                        <input type="number"
                                               x-model.number="editData.grade"
                                               class="form-control"
                                               min="0"
                                               :max="editData.max_points"
                                               step="0.5">
                                        <span>/ <span x-text="editData.max_points"></span> points</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-label-with-action">
                                        <label>Feedback</label>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button @click="toggleRawMode()"
                                                    class="btn btn-sm btn-outline"
                                                    :title="editRawMode ? 'Switch to block view' : 'Switch to raw text'">
                                                <i :class="editRawMode ? 'ph-squares-four' : 'ph-text-aa'"></i>
                                                <span x-text="editRawMode ? 'Blocks' : 'Raw'"></span>
                                            </button>
                                            <button @click="toggleAiOptions()" class="btn btn-sm btn-outline ai-btn">
                                                <i class="ph-robot"></i> Refine
                                            </button>
                                        </div>
                                    </div>

                                    <!-- BLOCK EDITOR MODE -->
                                    <template x-if="editBlocks && !editRawMode">
                                        <div class="block-editor">
                                            <template x-for="section in ['strengths', 'weaknesses', 'suggestions']" :key="section">
                                                <div class="block-section">
                                                    <div class="block-section-header">
                                                        <i :class="getBlockSectionIcon(section)" :style="'color:' + getBlockSectionColor(section)"></i>
                                                        <span class="block-section-title" x-text="getBlockSectionLabel(section)"></span>
                                                        <span class="block-section-count" x-text="(editBlocks?.[section] || []).filter(b => b.enabled).length + '/' + (editBlocks?.[section] || []).length"></span>
                                                    </div>
                                                    <div class="block-section-items">
                                                        <template x-for="(block, bIndex) in (editBlocks?.[section] || [])" :key="block.id">
                                                            <div class="block-item" :class="{ 'block-disabled': !block.enabled }">
                                                                <label class="block-checkbox" @click.stop="toggleBlock(section, bIndex)">
                                                                    <i :class="block.enabled ? 'ph-check-square' : 'ph-square'" :style="'color:' + (block.enabled ? getBlockSectionColor(section) : 'var(--text-tertiary)')"></i>
                                                                </label>
                                                                <div class="block-content" x-show="!block.editing">
                                                                    <span class="block-text" x-text="block.text"></span>
                                                                    <div class="block-actions">
                                                                        <button @click.stop="startBlockEdit(section, bIndex)" class="block-action-btn" title="Edit">
                                                                            <i class="ph-pencil-simple"></i>
                                                                        </button>
                                                                        <button @click.stop="removeBlock(section, bIndex)" class="block-action-btn block-action-delete" title="Remove">
                                                                            <i class="ph-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="block-edit-inline" x-show="block.editing">
                                                                    <textarea class="block-edit-textarea"
                                                                              :data-section="section"
                                                                              :data-id="block.id"
                                                                              x-model="block.text"
                                                                              @blur="finishBlockEdit(section, bIndex)"
                                                                              @keydown.enter.prevent="finishBlockEdit(section, bIndex)"
                                                                              @keydown.escape="finishBlockEdit(section, bIndex)"
                                                                              rows="2"></textarea>
                                                                </div>
                                                            </div>
                                                        </template>
                                                        <button @click="addBlock(section)" class="block-add-btn">
                                                            <i class="ph-plus"></i> Add
                                                        </button>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                    <!-- UNSTRUCTURED FEEDBACK: Convert prompt -->
                                    <template x-if="!editBlocks && !editRawMode">
                                        <div class="block-convert-prompt">
                                            <div class="block-convert-info">
                                                <i class="ph-info"></i>
                                                <span>This feedback is unstructured. Convert it to editable blocks or switch to raw text mode.</span>
                                            </div>
                                            <div class="block-convert-actions">
                                                <button @click="structurizeFeedback()"
                                                        class="btn btn-sm btn-primary"
                                                        :disabled="editBlocksLoading">
                                                    <i :class="editBlocksLoading ? 'ph-spinner' : 'ph-magic-wand'"></i>
                                                    <span x-text="editBlocksLoading ? 'Converting...' : 'Convert with AI'"></span>
                                                </button>
                                                <button @click="editRawMode = true" class="btn btn-sm btn-outline">
                                                    <i class="ph-text-aa"></i> Edit as Text
                                                </button>
                                            </div>
                                            <div class="block-convert-preview">
                                                <pre class="block-preview-text" x-text="editData.feedback"></pre>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- RAW TEXT MODE -->
                                    <template x-if="editRawMode">
                                        <div>
                                            <textarea x-model="editData.feedback"
                                                      class="form-control auto-resize-textarea"
                                                      placeholder="Enter feedback for the student..."></textarea>
                                        </div>
                                    </template>

                                    <!-- AI Preset Buttons -->
                                    <div x-show="showAiOptions" x-transition class="ai-presets">
                                        <template x-for="preset in aiPresets" :key="preset.label">
                                            <button @click="applyPreset(preset)"
                                                    class="btn btn-sm btn-outline preset-btn"
                                                    :disabled="!editData?.feedback?.trim() || refining">
                                                <span x-text="preset.label"></span>
                                            </button>
                                        </template>
                                    </div>

                                    <!-- Custom AI Input -->
                                    <div x-show="showCustomInput" x-transition class="custom-ai-input">
                                        <input type="text"
                                               x-model="refinementPrompt"
                                               class="form-control"
                                               placeholder="Describe how to refine the feedback..."
                                               @keyup.enter="refineWithAi()">
                                        <button @click="refineWithAi()"
                                                class="btn btn-sm btn-primary"
                                                :disabled="!refinementPrompt?.trim() || refining">
                                            <i class="ph-arrow-right"></i>
                                            <span x-text="refining ? 'Refining...' : 'Apply'"></span>
                                        </button>
                                    </div>
                                </div>

                                <div class="edit-actions">
                                    <button @click="cancelEdit()" class="btn btn-outline">
                                        <i class="ph-x"></i> Cancel
                                    </button>
                                    <button @click="saveEdit()" class="btn btn-primary">
                                        <i class="ph-check"></i> Save Changes
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- QUESTION DETAIL VIEW -->
    <!-- ========================================================================= -->

    <div x-show="!loading && viewMode === 'by-question' && currentView === 'detail'" class="card">
        <div class="card-header">
            <button @click="backToList()" class="btn btn-outline">
                <i class="ph-arrow-left"></i> Back to Questions
            </button>
            <template x-if="currentQuestion">
                <div class="card-title-container">
                    <h3 class="card-title" x-html="prepareQuestion(truncate(currentQuestion.text, 120))"></h3>
                    <template x-if="currentQuestion.text && currentQuestion.text.length > 120">
                        <button @click="showFullQuestion(currentQuestion.text)" class="btn-link">Show More</button>
                    </template>
                </div>
            </template>
        </div>
        <div class="card-body">

            <!-- Students for this question -->
            <template x-for="(result, index) in currentQuestionResults" :key="index">
                <div class="grade-item" :class="{ 'editing': isEditing(result.student_id, currentQuestion.id) }">

                    <!-- VIEW MODE -->
                    <div x-show="!isEditing(result.student_id, currentQuestion.id)" class="grade-view">
                        <div class="grade-student-name">
                            <span x-text="result.student_name"></span>
                            <span x-show="result.edited" class="edited-badge">
                                <i class="ph-check-circle"></i> Saved
                            </span>
                        </div>

                        <div class="grade-answer">
                            <strong>Answer:</strong>
                            <div class="answer-body">
                                <span x-html="prepareAnswer(isAnswerExpanded(result.student_id, currentQuestion.id) ? result.student_answer : truncate(result.student_answer, 150))"></span>
                            </div>
                            <template x-if="result.student_answer && result.student_answer.length > 150">
                                <button @click.stop="toggleAnswer(result.student_id, currentQuestion.id)" class="btn-link">
                                    <span x-text="isAnswerExpanded(result.student_id, currentQuestion.id) ? 'Show Less' : 'Show More'"></span>
                                </button>
                            </template>
                        </div>

                        <div class="grade-display-container">
                            <div class="grade-badge" :class="getGradeClass(result.grade, currentQuestion.points_possible)">
                                <i class="ph-trophy"></i>
                                <span x-text="result.grade + '/' + currentQuestion.points_possible"></span>
                            </div>
                            <span x-show="isLowConfidence(result.confidence)" x-cloak class="low-confidence-chip"
                                  title="The AI response for this grade was only partially parseable - double-check the points">
                                <i class="ph-flag"></i> check
                            </span>
                        </div>

                        <div x-show="result.feedback" class="grade-feedback" x-text="result.feedback"></div>

                        <button @click="startEdit(result.student_id, currentQuestion.id)" class="btn btn-sm btn-primary">
                            <i class="ph-pencil"></i> Edit
                        </button>
                    </div>

                    <!-- EDIT MODE -->
                    <div x-show="isEditing(result.student_id, currentQuestion.id)" class="grade-edit" x-data>
                        <template x-if="editData">
                            <div>
                                <div class="grade-student-name" style="margin-bottom: 1rem;">
                                    <strong x-text="editData.student_name"></strong>
                                </div>

                                <div class="edit-section">
                                    <div class="edit-section-title"><i class="ph-student"></i> Student Answer</div>
                                    <div class="edit-section-content" x-html="prepareAnswer(editData.student_answer)"></div>
                                </div>

                                <div class="form-group">
                                    <label>Points Earned</label>
                                    <div class="points-input-group">
                                        <input type="number"
                                               x-model.number="editData.grade"
                                               class="form-control"
                                               min="0"
                                               :max="editData.max_points"
                                               step="0.5">
                                        <span>/ <span x-text="editData.max_points"></span> points</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-label-with-action">
                                        <label>Feedback</label>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button @click="toggleRawMode()"
                                                    class="btn btn-sm btn-outline"
                                                    :title="editRawMode ? 'Switch to block view' : 'Switch to raw text'">
                                                <i :class="editRawMode ? 'ph-squares-four' : 'ph-text-aa'"></i>
                                                <span x-text="editRawMode ? 'Blocks' : 'Raw'"></span>
                                            </button>
                                            <button @click="toggleAiOptions()" class="btn btn-sm btn-outline ai-btn">
                                                <i class="ph-robot"></i> Refine
                                            </button>
                                        </div>
                                    </div>

                                    <!-- BLOCK EDITOR MODE -->
                                    <template x-if="editBlocks && !editRawMode">
                                        <div class="block-editor">
                                            <template x-for="section in ['strengths', 'weaknesses', 'suggestions']" :key="section">
                                                <div class="block-section">
                                                    <div class="block-section-header">
                                                        <i :class="getBlockSectionIcon(section)" :style="'color:' + getBlockSectionColor(section)"></i>
                                                        <span class="block-section-title" x-text="getBlockSectionLabel(section)"></span>
                                                        <span class="block-section-count" x-text="(editBlocks?.[section] || []).filter(b => b.enabled).length + '/' + (editBlocks?.[section] || []).length"></span>
                                                    </div>
                                                    <div class="block-section-items">
                                                        <template x-for="(block, bIndex) in (editBlocks?.[section] || [])" :key="block.id">
                                                            <div class="block-item" :class="{ 'block-disabled': !block.enabled }">
                                                                <label class="block-checkbox" @click.stop="toggleBlock(section, bIndex)">
                                                                    <i :class="block.enabled ? 'ph-check-square' : 'ph-square'" :style="'color:' + (block.enabled ? getBlockSectionColor(section) : 'var(--text-tertiary)')"></i>
                                                                </label>
                                                                <div class="block-content" x-show="!block.editing">
                                                                    <span class="block-text" x-text="block.text"></span>
                                                                    <div class="block-actions">
                                                                        <button @click.stop="startBlockEdit(section, bIndex)" class="block-action-btn" title="Edit">
                                                                            <i class="ph-pencil-simple"></i>
                                                                        </button>
                                                                        <button @click.stop="removeBlock(section, bIndex)" class="block-action-btn block-action-delete" title="Remove">
                                                                            <i class="ph-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="block-edit-inline" x-show="block.editing">
                                                                    <textarea class="block-edit-textarea"
                                                                              :data-section="section"
                                                                              :data-id="block.id"
                                                                              x-model="block.text"
                                                                              @blur="finishBlockEdit(section, bIndex)"
                                                                              @keydown.enter.prevent="finishBlockEdit(section, bIndex)"
                                                                              @keydown.escape="finishBlockEdit(section, bIndex)"
                                                                              rows="2"></textarea>
                                                                </div>
                                                            </div>
                                                        </template>
                                                        <button @click="addBlock(section)" class="block-add-btn">
                                                            <i class="ph-plus"></i> Add
                                                        </button>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                    <!-- UNSTRUCTURED FEEDBACK: Convert prompt -->
                                    <template x-if="!editBlocks && !editRawMode">
                                        <div class="block-convert-prompt">
                                            <div class="block-convert-info">
                                                <i class="ph-info"></i>
                                                <span>This feedback is unstructured. Convert it to editable blocks or switch to raw text mode.</span>
                                            </div>
                                            <div class="block-convert-actions">
                                                <button @click="structurizeFeedback()"
                                                        class="btn btn-sm btn-primary"
                                                        :disabled="editBlocksLoading">
                                                    <i :class="editBlocksLoading ? 'ph-spinner' : 'ph-magic-wand'"></i>
                                                    <span x-text="editBlocksLoading ? 'Converting...' : 'Convert with AI'"></span>
                                                </button>
                                                <button @click="editRawMode = true" class="btn btn-sm btn-outline">
                                                    <i class="ph-text-aa"></i> Edit as Text
                                                </button>
                                            </div>
                                            <div class="block-convert-preview">
                                                <pre class="block-preview-text" x-text="editData.feedback"></pre>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- RAW TEXT MODE -->
                                    <template x-if="editRawMode">
                                        <div>
                                            <textarea x-model="editData.feedback"
                                                      class="form-control auto-resize-textarea"
                                                      placeholder="Enter feedback for the student..."></textarea>
                                        </div>
                                    </template>

                                    <!-- AI Preset Buttons -->
                                    <div x-show="showAiOptions" x-transition class="ai-presets">
                                        <template x-for="preset in aiPresets" :key="preset.label">
                                            <button @click="applyPreset(preset)"
                                                    class="btn btn-sm btn-outline preset-btn"
                                                    :disabled="!editData?.feedback?.trim() || refining">
                                                <span x-text="preset.label"></span>
                                            </button>
                                        </template>
                                    </div>

                                    <!-- Custom AI Input -->
                                    <div x-show="showCustomInput" x-transition class="custom-ai-input">
                                        <input type="text"
                                               x-model="refinementPrompt"
                                               class="form-control"
                                               placeholder="Describe how to refine the feedback..."
                                               @keyup.enter="refineWithAi()">
                                        <button @click="refineWithAi()"
                                                class="btn btn-sm btn-primary"
                                                :disabled="!refinementPrompt?.trim() || refining">
                                            <i class="ph-arrow-right"></i>
                                            <span x-text="refining ? 'Refining...' : 'Apply'"></span>
                                        </button>
                                    </div>
                                </div>

                                <div class="edit-actions">
                                    <button @click="cancelEdit()" class="btn btn-outline">
                                        <i class="ph-x"></i> Cancel
                                    </button>
                                    <button @click="saveEdit()" class="btn btn-primary">
                                        <i class="ph-check"></i> Save Changes
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
            </template>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- FILE VIEWER MODAL -->
    <!-- ========================================================================= -->

    <div x-show="fileViewerOpen"
         x-cloak
         @keydown.escape.window="closeFileViewer()"
         class="file-viewer-backdrop"
         x-transition.opacity>
        <div @click.stop class="file-viewer-modal" x-transition.scale.90>
            <!-- Header -->
            <div class="file-viewer-header">
                <h3 class="modal-title">
                    <i class="ph-folder-open"></i>
                    <span x-text="fileViewerStudentName + ' - Submission Files'"></span>
                </h3>
                <button @click="closeFileViewer()" class="modal-close">
                    <i class="ph-x"></i>
                </button>
            </div>

            <!-- Body: sidebar + content -->
            <div class="file-viewer-body">
                <!-- File list sidebar -->
                <div class="file-list-sidebar">
                    <div class="file-list-header">Files</div>
                    <template x-if="fileViewerFiles.length === 0 && !fileViewerLoading">
                        <div style="padding: 1rem; color: var(--text-tertiary); font-size: 0.875rem;">
                            No files found
                        </div>
                    </template>
                    <template x-for="file in fileViewerFiles" :key="file.name">
                        <div class="file-list-item"
                             :class="{ 'active': fileViewerActiveFile?.name === file.name }"
                             @click="viewFile(file)">
                            <i :class="getFileIcon(file.type)"></i>
                            <div class="file-list-item-info">
                                <div class="file-list-item-name" x-text="file.name"></div>
                                <div class="file-list-item-size" x-text="file.size_human"></div>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Content area -->
                <div class="file-content-area">
                    <template x-if="fileViewerLoading">
                        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                            <div class="spinner"></div>
                        </div>
                    </template>
                    <template x-if="!fileViewerLoading && !fileViewerActiveFile">
                        <div class="file-viewer-unsupported">
                            <i class="ph-cursor-click" style="font-size: 3rem; margin-bottom: 1rem; color: var(--text-tertiary);"></i>
                            <p>Select a file from the sidebar to view it</p>
                        </div>
                    </template>
                    <template x-if="!fileViewerLoading && fileViewerActiveFile">
                        <div x-html="fileViewerContent" style="height: 100%;"></div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- BUILT-IN MODAL -->
    <!-- ========================================================================= -->

    <div x-show="modalOpen"
         :class="{ 'active': modalOpen }"
         @click="closeModal()"
         class="modal-backdrop"
         x-transition.opacity>
        <div @click.stop class="modal modal-dialog" x-transition.scale.80>
            <div class="modal-header">
                <h3 class="modal-title" x-text="modalTitle"></h3>
                <button @click="closeModal()" class="modal-close">
                    <i class="ph-x"></i>
                </button>
            </div>
            <div class="modal-body" x-html="modalContent"></div>
        </div>
    </div>

    <!-- ========================================================================= -->
    <!-- CANVAS PUSH PREVIEW (two-stage upload: nothing is written until Push) -->
    <!-- ========================================================================= -->

    <div x-show="pushOpen" x-cloak
         :class="{ 'active': pushOpen }"
         @click="closePushPreview()"
         class="modal-backdrop"
         style="z-index:1200"
         x-transition.opacity>
        <div @click.stop class="modal" style="max-width:760px" x-transition.scale.80>
            <div class="modal-header">
                <h3 class="modal-title">
                    <i class="ph-upload-simple" style="color:var(--color-primary)"></i>
                    Push grades to Canvas
                </h3>
                <button @click="closePushPreview()" class="modal-close">
                    <i class="ph-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <!-- Loading -->
                <div x-show="pushLoading" style="text-align:center; padding:2rem">
                    <i class="ph-circle-notch ph-spin" style="font-size:1.5rem; color:var(--color-primary)"></i>
                    <p style="margin-top:.75rem; color:var(--text-secondary)">
                        Reading current Canvas grades and comparing with yours…</p>
                </div>

                <!-- Error -->
                <div x-show="!pushLoading && pushError" style="color:#dc2626; padding:.5rem 0">
                    <i class="ph-warning-circle"></i> <span x-text="pushError"></span>
                </div>

                <!-- Success after the live write -->
                <div x-show="!pushLoading && !pushError && pushResult"
                     style="color:#16a34a; padding:.5rem 0">
                    <i class="ph-check-circle"></i> <span x-text="pushResult"></span>
                </div>

                <!-- Preview -->
                <template x-if="!pushLoading && pushData && !pushResult">
                    <div>
                        <p style="margin:0 0 .75rem; color:var(--text-secondary); font-size:.875rem">
                            Target: <strong x-text="pushData.target.name"></strong>
                            <template x-if="pushData.target.points_possible">
                                <span> · max <span x-text="pushData.target.points_possible"></span> pts</span>
                            </template>
                            <template x-if="pushData.target.quiz_ungraded">
                                <span> · ungraded quiz: sent as manual score adjustments</span>
                            </template>
                        </p>
                        <p x-show="pushData.will_create_rubric"
                           style="margin:0 0 .75rem; font-size:.8125rem; color:#d97706">
                            <i class="ph-info"></i> No rubric exists on Canvas yet - the push will create a basic one.
                        </p>
                        <div style="display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem">
                            <span style="font-size:.8125rem; padding:.25rem .625rem; border-radius:999px; background:#fef3c7; color:#92400e">
                                <span x-text="pushData.summary.updates"></span> update<span x-show="pushData.summary.updates !== 1">s</span>
                            </span>
                            <span style="font-size:.8125rem; padding:.25rem .625rem; border-radius:999px; background:#dcfce7; color:#166534">
                                <span x-text="pushData.summary.new"></span> new
                            </span>
                            <span style="font-size:.8125rem; padding:.25rem .625rem; border-radius:999px; background:#f1f5f9; color:#475569">
                                <span x-text="pushData.summary.unchanged"></span> unchanged
                            </span>
                            <span x-show="pushData.summary.missing > 0"
                                  style="font-size:.8125rem; padding:.25rem .625rem; border-radius:999px; background:#fee2e2; color:#991b1b">
                                <span x-text="pushData.summary.missing"></span> missing on Canvas
                            </span>
                            <span x-show="pushData.summary.refused > 0"
                                  style="font-size:.8125rem; padding:.25rem .625rem; border-radius:999px; background:#fee2e2; color:#991b1b"
                                  title="CSV totals fall short of the Canvas maximum: those students' rows are missing, and a partial total is not scaled to the full maximum">
                                <span x-text="pushData.summary.refused"></span> refused (rows missing)
                            </span>
                        </div>
                        <div style="max-height:340px; overflow-y:auto; border:1px solid var(--border-color); border-radius:var(--radius-md)">
                            <table style="width:100%; border-collapse:collapse; font-size:.875rem">
                                <thead>
                                    <tr style="text-align:left; color:var(--text-secondary); background:var(--bg-secondary)">
                                        <th style="padding:.5rem .75rem; font-weight:600">Student</th>
                                        <th style="padding:.5rem .75rem; font-weight:600; text-align:right">Current</th>
                                        <th style="padding:.5rem .75rem; font-weight:600; text-align:right">New</th>
                                        <th style="padding:.5rem .75rem; font-weight:600; text-align:right">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="row in pushData.rows" :key="row.student_id">
                                        <tr style="border-top:1px solid var(--border-color)">
                                            <td style="padding:.5rem .75rem">
                                                <span x-text="row.student_name"></span>
                                                <span style="color:var(--text-secondary); font-size:.75rem">
                                                    (ID <span x-text="row.student_id"></span>)</span>
                                            </td>
                                            <td style="padding:.5rem .75rem; text-align:right" x-text="fmtGrade(row.current_score)"></td>
                                            <td style="padding:.5rem .75rem; text-align:right; font-weight:600" x-text="fmtGrade(row.new_score)"></td>
                                            <td style="padding:.5rem .75rem; text-align:right">
                                                <span :style="`color:${pushStatusColor(row.status)}`"
                                                      :title="row.note || ''"
                                                      x-text="pushStatusText(row.status)"></span>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </template>

                <div style="display:flex; justify-content:space-between; align-items:center; margin-top:1.25rem">
                    <button @click="openRubricPage()" x-show="pushData && !pushResult"
                            style="background:none; border:none; color:var(--color-primary); cursor:pointer; font-size:.8125rem">
                        Adjust rubric first…
                    </button>
                    <span></span>
                    <div style="display:flex; gap:.5rem">
                        <button @click="closePushPreview()" class="btn-outline"
                                x-text="pushResult ? 'Done' : 'Cancel'">Cancel</button>
                        <button @click="pushGradesNow()" class="btn-primary"
                                x-show="pushData && !pushResult"
                                :disabled="pushLoading || pushRunning || pushEffective === 0">
                            <i class="ph-upload-simple" x-show="!pushRunning"></i>
                            <i class="ph-circle-notch ph-spin" x-show="pushRunning"></i>
                            <span x-show="pushRunning">Pushing…</span>
                            <span x-show="!pushRunning">Push <span x-text="pushEffective"></span> grade<span x-show="pushEffective !== 1">s</span></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_css %}
<style>
/* ========================================================================= */
/* STATISTICS */
/* ========================================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.stat-icon {
    font-size: 2rem;
    color: var(--color-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

/* ========================================================================= */
/* VIEW TOGGLE */
/* ========================================================================= */

.segmented-control {
    display: flex;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.segmented-control-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.segmented-control-btn:hover:not(.active) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.segmented-control-btn.active {
    background: var(--bg-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* ========================================================================= */
/* FILTERS */
/* ========================================================================= */

.filters-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 1rem;
    color: var(--text-tertiary);
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 150px;
}

/* ========================================================================= */
/* LIST ITEMS */
/* ========================================================================= */

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-primary);
}

.list-item:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}

.list-item-info {
    flex: 1;
}

.list-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.list-item-title-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.list-item-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.list-item-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.status-graded {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.status-partial {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.status-ungraded {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* ========================================================================= */
/* GRADE ITEMS */
/* ========================================================================= */

.grade-item {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    background: var(--bg-primary);
    transition: all 0.3s;
}

.grade-item.editing {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.grade-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.grade-question-title-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--text-primary);
}

.grade-student-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grade-answer {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Expanded answers scroll inside a viewport-sized box instead of growing
   the card: measured on 2026-10-30, one proof rendered 1,688px tall and
   pushed the grade badge 1,700px below the answer start, while the card's
   overflow-x: hidden silently clipped wide formulas by up to 188px. The
   Show More/Less button and the grade controls live outside this box, so
   they stay reachable no matter how long the answer is. */
.answer-body {
    max-height: 45vh;
    overflow: auto;
    overflow-wrap: anywhere;
    margin-top: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.answer-body img {
    max-width: 100%;
    height: auto;
}

.grade-display-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    border: 2px solid;
}

.grade-badge.grade-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border-color: var(--color-success);
}

.grade-badge.grade-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.grade-badge.grade-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.grade-feedback {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    font-style: italic;
    line-height: 1.6;
    white-space: pre-line;
    /* long LLM feedback used to push the Edit button off the page */
    max-height: 16rem;
    overflow: auto;
    overflow-wrap: anywhere;
}

.edited-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ========================================================================= */
/* EDIT MODE */
/* ========================================================================= */

.grade-edit {
    padding-top: 1rem;
}

.edit-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.edit-section-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-section-content {
    color: var(--text-secondary);
    line-height: 1.6;
    /* the reference answer must not outgrow the edit form: it scrolls.
       Newlines arrive as <br> from prepareAnswer, so whitespace is left
       to normal (pre-wrap would also honour source newlines inside
       rendered HTML answers and double the spacing) */
    white-space: normal;
    max-height: 32vh;
    overflow: auto;
    overflow-wrap: anywhere;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-label-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-label-with-action label {
    margin-bottom: 0;
}

.ai-btn {
    gap: 0.25rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.auto-resize-textarea {
    min-height: 120px;
    resize: none;
    font-family: inherit;
    line-height: 1.6;
}

.points-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.points-input-group .form-control {
    width: 100px;
}

.edit-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ========================================================================= */
/* AI REFINEMENT */
/* ========================================================================= */

.ai-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--bg-secondary), rgba(59, 130, 246, 0.05));
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.preset-btn {
    white-space: nowrap;
    transition: all 0.2s;
}

.preset-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: white;
    transform: translateY(-1px);
}

.preset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-ai-input {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.custom-ai-input .form-control {
    flex: 1;
}

/* ========================================================================= */
/* MODAL */
/* ========================================================================= */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal-dialog {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow: auto;
    flex: 1;
}

/* Full-question reader content: wide equations and long unbreakable runs
   scroll inside the 90vh dialog instead of straining it. */
.modal-body .prose {
    overflow-wrap: anywhere;
}

/* ========================================================================= */
/* UTILITIES */
/* ========================================================================= */

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.813rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-link:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}

.prose {
    line-height: 1.7;
    color: var(--text-primary);
}

.prose p {
    margin-bottom: 1em;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1em 0;
}

/* ========================================================================= */
/* BLOCK EDITOR */
/* ========================================================================= */

.block-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.block-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.875rem;
}

.block-section-title {
    color: var(--text-primary);
}

.block-section-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.block-section-items {
    padding: 0.5rem;
}

.block-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.block-item:hover {
    background: var(--bg-hover);
}

.block-item.block-disabled {
    opacity: 0.5;
}

.block-item.block-disabled .block-text {
    text-decoration: line-through;
}

.block-checkbox {
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.125rem;
    padding-top: 0.125rem;
}

.block-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.block-text {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.block-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.block-item:hover .block-actions {
    opacity: 1;
}

.block-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 0.875rem;
    transition: all 0.15s;
}

.block-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--color-primary);
}

.block-action-delete:hover {
    color: var(--color-danger);
}

.block-edit-inline {
    flex: 1;
}

.block-edit-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.block-add-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin-top: 0.25rem;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}

.block-add-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

/* Convert prompt for unstructured feedback */
.block-convert-prompt {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.block-convert-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
    font-size: 0.875rem;
    font-weight: 500;
}

.block-convert-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.block-convert-preview {
    max-height: 200px;
    overflow-y: auto;
}

.block-preview-text {
    margin: 0;
    padding: 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-secondary);
    font-family: inherit;
}

/* ========================================================================= */
/* STUDENT TOTAL GRADE BADGES */
/* ========================================================================= */

.student-total-grade {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    border: 2px solid;
}

.student-total-grade.grade-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border-color: var(--color-success);
}

.student-total-grade.grade-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.student-total-grade.grade-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.student-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.total-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 700;
    border: 2px solid;
}

.total-grade-badge.grade-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border-color: var(--color-success);
}

.total-grade-badge.grade-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.total-grade-badge.grade-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* ========================================================================= */
/* FILE VIEWER MODAL */
/* ========================================================================= */

.file-viewer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

[x-cloak] {
    display: none !important;
}

.file-viewer-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.file-viewer-header .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-viewer-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.file-list-sidebar {
    width: 250px;
    min-width: 250px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    background: var(--bg-secondary);
}

.file-list-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.file-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid transparent;
}

.file-list-item:hover {
    background: var(--bg-hover);
}

.file-list-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--color-primary);
    color: var(--color-primary);
}

.file-list-item i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.file-list-item-info {
    min-width: 0;
    flex: 1;
}

.file-list-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-list-item-size {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.file-content-area {
    flex: 1;
    overflow: auto;
    position: relative;
}

.file-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.file-viewer-text {
    margin: 0;
    padding: 1.5rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: auto;
}

.file-viewer-docx-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.file-viewer-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary);
}

/* ========================================================================= */
/* HEADER STYLING */
/* ========================================================================= */

.review-header-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

.review-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.review-header-text {
    flex: 1;
}

.review-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-title i {
    color: var(--color-primary);
}

.review-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.review-header-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.review-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid;
    white-space: nowrap;
}

.review-btn i {
    font-size: 1.25rem;
}

.review-btn-back {
    background: white;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.review-btn-back:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.review-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-btn-upload {
    background: linear-gradient(135deg, var(--color-success), #059669);
    color: white;
    border-color: var(--color-success);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.review-btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.review-btn-export {
    background: white;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.review-btn-export:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ========================================================================= */
/* RESPONSIVE */
/* ========================================================================= */

@media (max-width: 1024px) {
    .review-header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .review-header-actions {
        flex-direction: column;
    }

    .review-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .list-item,
    .grade-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .list-item-actions {
        justify-content: space-between;
    }

    .page-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .page-actions .btn {
        width: 100%;
    }

    .ai-presets {
        flex-direction: column;
    }

    .preset-btn {
        width: 100%;
    }

    .filters-row {
        flex-direction: column;
    }

    .filter-select {
        width: 100%;
    }

    /* File viewer responsive */
    .file-viewer-modal {
        width: 98vw;
        height: 90vh;
    }

    .file-viewer-body {
        flex-direction: column;
    }

    .file-list-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .student-detail-header {
        flex-wrap: wrap;
    }
}

/* Low-confidence flags (F2): grades whose AI response parsed only weakly */
.low-confidence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.4);
    white-space: nowrap;
}

.review-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    color: #d97706;
    background: transparent;
    border: 1px solid rgba(217, 119, 6, 0.45);
}

.review-filter-btn.active {
    color: #fff;
    background: #d97706;
    border-color: #d97706;
}
</style>
{% endblock %}

{% block scripts %}
<script src="/frontend/static/vendor/pdfjs/pdf.min.js"></script>
<script>
if (typeof pdfjsLib !== 'undefined') {
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/frontend/static/vendor/pdfjs/pdf.worker.min.js';
}
</script>
<script src="/frontend/static/js/grade_review_v2.js"></script>
{% endblock %}