/* Modern Gradebook Styles */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --background: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom Form Controls */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 40px;
    appearance: none;
}

/* Navigation Tabs */
.nav-tab {
    @apply py-2 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors duration-200;
}

.nav-tab.active {
    @apply border-blue-500 text-blue-600;
}

/* Reports Sub-tabs */
.reports-sub-tab {
    @apply py-3 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors duration-200 flex items-center;
}

.reports-sub-tab.active {
    @apply border-indigo-500 text-indigo-600;
}

.reports-sub-content {
    @apply block;
}

.reports-sub-content.hidden {
    @apply hidden;
}

/* Page break utilities for report cards */
.page-break-inside-avoid {
    page-break-inside: avoid;
}

.page-break-before {
    page-break-before: always;
}

/* All reports scrollable container */
#allReportCards {
    max-height: 80vh;
    overflow-y: auto;
}

/* Report card styling for all reports view */
#allReportCards .bg-white {
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

#allReportCards .bg-white:last-child {
    margin-bottom: 0;
}

/* Tab Panels */
.tab-panel {
    @apply hidden;
}

.tab-panel.active {
    @apply block;
}

/* Cards */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-body {
    @apply p-6;
}

/* Buttons */
.btn {
    @apply inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

/* Warning / amber — Tailwind v2 CDN has no amber-* utilities; use for JS-rendered buttons */
.btn-warning {
    background-color: #d97706 !important;
    border: 1px solid #b45309 !important;
    color: #ffffff !important;
}
.btn-warning:hover {
    background-color: #b45309 !important;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Tables */
.table {
    @apply w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.table-hover tbody tr:hover {
    @apply bg-gray-100;
}

/* Grade Entry Table */
.grade-table {
    @apply w-full border-collapse;
}

.grade-table th {
    @apply bg-gray-50 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
}

.grade-table td {
    @apply px-4 py-3 border-b border-gray-200;
}

.grade-input {
    @apply w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.grade-input:focus {
    @apply shadow-sm;
}

/* Progress Bars */
.progress {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar {
    @apply h-2 rounded-full transition-all duration-300;
}

.progress-bar-blue {
    @apply bg-blue-600;
}

.progress-bar-green {
    @apply bg-green-600;
}

.progress-bar-yellow {
    @apply bg-yellow-600;
}

.progress-bar-red {
    @apply bg-red-600;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-blue {
    @apply bg-blue-100 text-blue-800;
}

.badge-green {
    @apply bg-green-100 text-green-800;
}

.badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-red {
    @apply bg-red-100 text-red-800;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.scale-in {
    animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* Loading States */
.loading {
    @apply opacity-50 pointer-events-none;
}

.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Toast Notifications */
.toast {
    @apply max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
}

.toast-success {
    @apply border-l-4 border-green-400;
}

.toast-error {
    @apply border-l-4 border-red-400;
}

.toast-warning {
    @apply border-l-4 border-yellow-400;
}

.toast-info {
    @apply border-l-4 border-blue-400;
}

/* Modal — legacy utility classes (kept for compatibility) */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
    z-index: 9000;
}

.modal {
    @apply fixed inset-0 overflow-hidden;
    z-index: 9000;
}

.modal-content {
    @apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;
}

.modal-panel {
    @apply relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg;
    max-height: calc(100vh - 2rem);
}

/*
 * ==========================================================================
 * Gradebook Global Modal System
 * Tailwind v2 does NOT support arbitrary values (h-[90vh], w-[80vw], z-[60]).
 * Every [id$="Modal"] overlay gets viewport-bound sizing and internal scroll.
 * ==========================================================================
 */

body.gb-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* --- Overlay normalization: center, pad, block page scroll-through --- */
[id$="Modal"].fixed.inset-0,
[id$="Modal"][style*="position: fixed"],
[id$="Modal"][style*="position:fixed"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    z-index: 9000;
}

/* Intentional full-viewport grading shells (not centered cards) */
#chemPracticeSheetGradingModal.fixed.inset-0,
#documentAwareGradingModal.fixed.inset-0,
#chemPracticeSheetGradingModal[style*="position: fixed"],
#documentAwareGradingModal[style*="position: fixed"],
#rubricGradingModal.fullscreen.fixed.inset-0 {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}

/* --- Z-index stacking (nested modals above their parent) --- */
#histogramBinModal,
#chemPracticePrintWorksheetViewerModal { z-index: 9050 !important; }
#editPersonModal { z-index: 9060 !important; }
#editCategoryModal,
#addCategoryModal { z-index: 9070 !important; }
#overrideBlockedModal { z-index: 9090 !important; }
#rubricModal { z-index: 9500 !important; }
#copyRubricModal { z-index: 9600 !important; }
#startSecondSubmissionModal { z-index: 9750 !important; }
#addBlankDocumentConfirmModal { z-index: 9760 !important; }
#docSeedPickerModal { z-index: 9770 !important; }
#jsonImportModal,
#jsonExportModal { z-index: 9800 !important; }
#chemPracticeSheetGradingModal,
#documentAwareGradingModal { z-index: 9900 !important; }

/* --- Panel shell: first direct child of overlay (default card) --- */
[id$="Modal"].fixed.inset-0 > div:first-child,
[id$="Modal"][style*="position: fixed"] > div:first-child,
[id$="Modal"][style*="position:fixed"] > div:first-child {
    position: relative !important;
    top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: calc(100vh - 2rem) !important;
    min-height: 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Fullscreen inner panels fill viewport */
#chemPracticeSheetGradingModal > div:first-child,
#documentAwareGradingModal > div:first-child {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Wide grading / report panels */
#manualGradesModal > div:first-child,
#practiceHomeworkModal > div:first-child,
#quizzerGradesModal > div:first-child,
#assignmentReportModal > div:first-child,
#studentModal > div:first-child,
#directoryTesterModal > div:first-child,
#managePeopleModal > div:first-child,
#rubricModal > div:first-child,
#documentViewerModal > div:first-child,
#enhancedRubricModal > div:first-child,
#rubricManualEntryModal > div:first-child {
    width: min(96vw, 80rem) !important;
    max-width: 96vw !important;
    height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Medium panels */
#chemPracticePrintWorksheetModal > div:first-child,
#chemPracticePrintWorksheetViewerModal > div:first-child,
#addCourseModal > div:first-child,
#curriculumModal > div:first-child {
    width: min(95vw, 48rem) !important;
    max-width: 95vw !important;
    height: calc(100vh - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#curriculumModal > div:first-child {
    width: min(95vw, 62.5rem) !important;
    height: calc(100vh - 2rem) !important;
}

/* Form / create-edit assignment panels (inline styles already good; reinforce) */
#createAssignmentModal > div:first-child,
#editAssignmentModal > div:first-child,
#addAssignmentModal > div:first-child {
    width: min(90vw, 56rem) !important;
    max-width: min(90vw, 56rem) !important;
    max-height: calc(100vh - 2rem) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Compact confirm / entry dialogs */
#deleteAssignmentModal > div:first-child,
#outOfChangeModal > div:first-child,
#manualEntryModal > div:first-child,
#overrideBlockedModal > div:first-child,
#startSecondSubmissionModal > div:first-child,
#addBlankDocumentConfirmModal > div:first-child,
#docSeedPickerModal > div:first-child {
    width: min(92vw, 28rem) !important;
    max-width: 92vw !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}

#histogramBinModal > div:first-child {
    width: min(90vw, 42rem) !important;
    max-width: 90vw !important;
    height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#copyRubricModal > div:first-child {
    width: min(92vw, 71.875rem) !important;
    max-width: 92vw !important;
    height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#enhancedRubricModal > div:first-child,
#rubricManualEntryModal > div:first-child {
    width: min(96vw, 72rem) !important;
}

#jsonImportModal > div:first-child,
#jsonExportModal > div:first-child {
    width: min(92vw, 42.5rem) !important;
    max-width: 92vw !important;
    max-height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Legacy top-offset modals (Add Student, Paste List, weights, etc.) */
#addStudentModal > div:first-child,
#pasteClassListModal > div:first-child,
#deleteStudentModal > div:first-child,
#strandWeightsModal > div:first-child,
#categoryWeightsModal > div:first-child,
#curriculumExpectationsModal > div:first-child {
    width: min(92vw, 56rem) !important;
    max-width: 92vw !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#curriculumExpectationsModal > div:first-child {
    width: min(92vw, 72rem) !important;
}

/* Toasts remain visible above open modals (e.g. save confirmations) */
#toastContainer {
    z-index: 99500 !important;
    pointer-events: none;
}

#toastContainer .toast {
    pointer-events: auto;
}

#editPersonModal > div:first-child,
#editCategoryModal > div:first-child,
#addCategoryModal > div:first-child {
    width: min(92vw, 24rem) !important;
    max-width: 92vw !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}

/* --- Flex scroll chain: header/footer pinned, body scrolls --- */
[id$="Modal"] .flex-shrink-0 {
    flex-shrink: 0;
}

[id$="Modal"] .flex-1.min-h-0,
[id$="Modal"] .flex-1.overflow-hidden,
[id$="Modal"] .rubric-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

[id$="Modal"] .flex-1.overflow-auto,
[id$="Modal"] .flex-1.overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

[id$="Modal"] .flex-1 > .overflow-y-auto,
[id$="Modal"] .flex-1 > .h-full.overflow-y-auto,
[id$="Modal"] .flex-1 > .overflow-auto,
[id$="Modal"] .rubric-modal-scroll,
[id$="Modal"] .gb-modal-scroll,
[id$="Modal"] [style*="overflow-y: auto"],
[id$="Modal"] [style*="overflow-y:auto"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Create/edit assignment scrollable middle (inline flex body) */
#createAssignmentModal > div:first-child > .bg-gray-50,
#editAssignmentModal > div:first-child > .bg-gray-50,
#addAssignmentModal > div:first-child > .p-6,
#addAssignmentModal > div:first-child > div[style*="overflow-y: auto"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Manual grades: drop broken 80vh calc; scroll inside flex body */
#manualGradesModal .flex-1.bg-gray-50 > div,
#practiceHomeworkModal .flex-1.bg-gray-50 > div,
#quizzerGradesModal .flex-1.bg-gray-50 > div {
    height: 100% !important;
    max-height: none !important;
    overflow: auto !important;
}

/* Student modal content area */
#studentModal #studentModalPanel {
    display: flex !important;
    flex-direction: column !important;
}

#studentModal .student-modal-body-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#studentModal #studentModalContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#studentModal #studentModalContent.student-grades-tab-content {
    overflow-x: auto !important;
}

.student-grades-tab-wrap .student-grades-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
}

.student-grade-row.student-grade-has-override .student-grade-score-display {
    border-color: rgba(245, 158, 11, 0.6);
    background-color: rgba(254, 243, 199, 0.5);
}

.student-grade-comment-field:not([style*="width: 220px"]) {
    text-overflow: ellipsis;
}

.student-grade-comments-col .student-grade-comment-wrap[data-expanded="true"] {
    position: relative;
    z-index: 5;
}

/* Dropdown Menu */
.dropdown {
    @apply relative;
}

.dropdown-menu {
    @apply absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer;
}

/* Grade Color Coding */
.grade-a {
    @apply text-green-700 bg-green-50 border-green-200;
}

.grade-b {
    @apply text-blue-700 bg-blue-50 border-blue-200;
}

.grade-c {
    @apply text-yellow-700 bg-yellow-50 border-yellow-200;
}

.grade-d {
    @apply text-orange-700 bg-orange-50 border-orange-200;
}

.grade-f {
    @apply text-red-700 bg-red-50 border-red-200;
}

.grade-missing {
    @apply text-gray-500 bg-gray-50 border-gray-200;
}

/* Student Grid */
.student-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
}

.student-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow duration-200;
}

.student-avatar {
    @apply h-12 w-12 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white font-semibold text-lg;
}

/* Category Sub-tabs */
.category-sub-tab {
    @apply px-4 py-2 text-sm font-medium rounded-md transition-colors;
}

.category-sub-tab.active {
    @apply bg-white text-gray-900 shadow-sm;
}

.category-sub-tab:not(.active) {
    @apply text-gray-600 hover:text-gray-900;
}

.category-sub-content {
    @apply block;
}

/* Assignment Grid */
.assignment-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

.assignment-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200;
}

/* Assignment Grid Scrolling */
#assignmentsGrid {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#assignmentsGrid::-webkit-scrollbar {
    width: 8px;
}

#assignmentsGrid::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#assignmentsGrid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#assignmentsGrid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Category Pills */
.category-pill {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.category-culminating {
    @apply bg-purple-100 text-purple-800;
}

.category-regular {
    @apply bg-blue-100 text-blue-800;
}

/* Responsive Design */
@media (max-width: 640px) {
    .grade-table {
        @apply text-xs;
    }
    
    .grade-table th,
    .grade-table td {
        @apply px-2 py-2;
    }
    
    .card-body {
        @apply p-4;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here */
}

/* Print styles */
@media print {
    .no-print {
        @apply hidden;
    }
    
    .print-only {
        @apply block;
    }
}

/* Focus states for accessibility */
*:focus {
    @apply outline-none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
}

/* Assignment Grades Modal - Sticky Headers */
#manualGradesContent table thead.sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9fafb;
}

/* Assignment Grades Modal - Full Cell Input Styling */
#manualGradesContent input[type="number"] {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    padding: 0.75rem 0.5rem;
    margin: 0;
    border-radius: 0;
    min-height: 2.5rem;
    /* Hide spinner arrows */
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Hide spinner arrows for WebKit browsers (Chrome, Safari, Edge) */
#manualGradesContent input[type="number"]::-webkit-outer-spin-button,
#manualGradesContent input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#manualGradesContent input[type="number"]:focus {
    background-color: #eff6ff;
    outline: none;
}

#manualGradesContent input[type="number"].bg-yellow-100 {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
}

/* Ensure table cells have proper height for full-cell editing */
#manualGradesContent td.relative {
    padding: 0;
    position: relative;
    min-height: 2.5rem;
}

#manualGradesContent td.relative input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Student Modal Scrolling - General */
#studentModalContent {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#studentModalContent::-webkit-scrollbar {
    width: 8px;
}

#studentModalContent::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#studentModalContent::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#studentModalContent::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 
 * ⚠️  STUDENT MODAL SCROLLING - WORKING CONFIGURATION ⚠️
 * 
 * These settings have been carefully tuned to provide consistent behavior
 * across all tabs while maintaining proper scrolling. The modal is set to
 * 90vh height with content constrained to calc(90vh - 200px) to account
 * for header and tabs.
 * 
 * CHANGING THESE SETTINGS CAN BREAK THE MODAL SCROLLING BEHAVIOR.
 * Test thoroughly if modifications are needed.
 */

/* Report Card Tab Specific Scrolling */
#studentModalContent.report-card-content {
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
}
.gb-report-canvas-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 12px;
}

.gb-report-canvas-page {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
}

.gb-report-canvas-page canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* All tabs: flex child scrolls inside viewport-bound shell */
#studentModalContent {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Rubric Grading Modal Enhancements */

/*
 * Windowed + fullscreen share one flex/scroll chain so the rubric table scrolls inside the modal
 * (Tailwind CDN v2 does not ship w-[80vw]/h-[80vh], so the shell must be sized in CSS).
 */
#rubricGradingModal.rubric-modal-overlay {
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

#rubricGradingModal .rubric-modal-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

#rubricGradingModal:not(.fullscreen) .rubric-modal-shell {
    width: min(96vw, 80rem);
    max-width: 96vw;
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
}

#rubricGradingModal .rubric-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#rubricGradingModal .rubric-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#rubricGradingModal .rubric-modal-scroll-inner {
    min-height: min-content;
}

#rubricGradingModal .rubric-table-surface {
    display: block;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

/*
 * Rubric modal "fullscreen" — layout only (same markup as windowed).
 * Old rules used table-layout:fixed + tiny column widths, so the Comments column absorbed the viewport;
 * they also forced tbody td { background: white !important }, which broke heat-map tints until users toggled.
 */
#rubricGradingModal.fullscreen.rubric-modal-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

#rubricGradingModal.fullscreen .rubric-modal-shell {
    flex: 1 1 auto;
    width: 100%;
    height: 100vh;
    max-width: none;
    max-height: none;
    min-height: 0;
    min-width: 0;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

#rubricGradingModal.fullscreen .rubric-comments-col-head,
#rubricGradingModal.fullscreen .rubric-comment-td {
    width: clamp(200px, 24vw, 360px);
    max-width: clamp(200px, 24vw, 360px);
    box-sizing: border-box;
    vertical-align: top;
}

#rubricGradingModal.fullscreen .rubric-comment-td:not([data-expanded="true"]) textarea.rubric-row-comment-field:not(:focus):not(.rubric-comment-editing) {
    max-width: min(12rem, 100%);
}

#rubricGradingModal.fullscreen .rubric-comment-td textarea.rubric-row-comment-field:focus,
#rubricGradingModal.fullscreen .rubric-comment-td[data-expanded="true"] textarea.rubric-row-comment-field,
#rubricGradingModal.fullscreen .rubric-comment-td textarea.rubric-row-comment-field.rubric-comment-editing {
    max-width: 100%;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table .grade-cell input.grade-input {
    min-width: 2.75rem;
}

#rubricGradingModal.fullscreen .grade-a {
    color: #15803d !important;
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

#rubricGradingModal.fullscreen .grade-b {
    color: #1d4ed8 !important;
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}

#rubricGradingModal.fullscreen .grade-c {
    color: #a16207 !important;
    background-color: #fefce8 !important;
    border-color: #fde68a !important;
}

#rubricGradingModal.fullscreen .grade-d {
    color: #c2410c !important;
    background-color: #fff7ed !important;
    border-color: #fed7aa !important;
}

#rubricGradingModal.fullscreen .grade-f {
    color: #b91c1c !important;
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

#rubricGradingModal.fullscreen .percentage {
    font-weight: 500 !important;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table input.grade-a {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table input.grade-b {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table input.grade-c {
    background-color: #fefce8 !important;
    color: #a16207 !important;
    border-color: #fde68a !important;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table input.grade-d {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}

#rubricGradingModal.fullscreen #rubricGradesTable > table input.grade-f {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}
/* Override grade active: grey out rubric cells in that row */
#rubricGradingModal tr.rubric-row-has-override td.grade-cell {
    opacity: 0.55;
    background-color: #f3f4f6 !important;
    pointer-events: none;
}
#rubricGradingModal tr.rubric-row-has-override td.grade-cell input {
    pointer-events: none;
    cursor: not-allowed;
}

/* Enhanced rubric: grey out criterion table when override is set */
#enhancedRubricModal.rubric-override-active .enhanced-question-row td,
#enhancedRubricModal.rubric-override-active .enhanced-question-row input {
    opacity: 0.55;
    background-color: #f3f4f6 !important;
    pointer-events: none;
    cursor: not-allowed;
}

/* Fullscreen button icon toggle */
#toggleFullscreen.fullscreen-active i::before {
    content: "\f066" !important; /* fas fa-compress */
}

#toggleFullscreen:not(.fullscreen-active) i::before {
    content: "\f065" !important; /* fas fa-expand */
}

/*
 * Rubric table: predictable stacking + zero-gap sticky band (Student + Overall only).
 * Column widths (--rubric-ge-*-w) MUST match cumulative `left` offsets for those two columns.
 */
#rubricGradesTable {
    isolation: isolate;
    --highlighted-column: -1;
    --rubric-ge-student-w: 128px;
    --rubric-ge-overall-w: 108px;
}

/* border-collapse + border-spacing creates visible gutters between sticky cells; separate + 0 keeps edges flush */
#rubricGradesTable table.rubric-grade-entry-main {
    border-collapse: separate;
    border-spacing: 0;
    width: max(100%, max-content);
}

#rubricGradesTable thead th {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

#rubricGradesTable th.sticky,
#rubricGradesTable td.sticky {
    position: sticky !important;
}

/* ─── Sticky-left band (2 columns): Student above Overall ─── */
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-student-col {
    z-index: 61 !important;
}
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-overall-col {
    z-index: 60 !important;
}

#rubricGradingModal #rubricGradesTable tbody td.rubric-ge-student-col {
    z-index: 36 !important;
}
#rubricGradingModal #rubricGradesTable tbody td.rubric-ge-overall-col {
    z-index: 35 !important;
}

/* Positions + fixed widths (non-modal table still benefits if modal CSS not applied) */
#rubricGradesTable thead th.rubric-ge-student-col,
#rubricGradesTable tbody td.rubric-ge-student-col {
    left: 0 !important;
    box-sizing: border-box !important;
    width: var(--rubric-ge-student-w) !important;
    min-width: var(--rubric-ge-student-w) !important;
    max-width: var(--rubric-ge-student-w) !important;
}

#rubricGradesTable thead th.rubric-ge-overall-col,
#rubricGradesTable tbody td.rubric-ge-overall-col {
    left: var(--rubric-ge-student-w) !important;
    box-sizing: border-box !important;
    width: var(--rubric-ge-overall-w) !important;
    min-width: var(--rubric-ge-overall-w) !important;
    max-width: var(--rubric-ge-overall-w) !important;
}

/* Header chrome */
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-student-col,
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-overall-col {
    background-color: #f9fafb !important;
}

#rubricGradingModal #rubricGradesTable thead th.rubric-ge-override-col {
    background-color: #fffbeb !important;
}

#rubricGradingModal #rubricGradesTable tbody tr:not([id^="stats-"]) td:nth-child(7),
#rubricGradingModal #rubricGradesTable tbody tr[id^="stats-"] td:nth-child(7) {
    border-left: 3px solid #bfdbfe;
}

#rubricGradingModal #rubricGradesTable thead th.rubric-ge-late-meta-col,
#rubricGradingModal #rubricGradesTable tbody td.rubric-ge-late-meta-col {
    border-right: 3px solid #1d4ed8;
}

#rubricGradesTable thead th.rubric-ge-override-col,
#rubricGradesTable tbody td.rubric-ge-override-col {
    box-sizing: border-box !important;
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    max-width: 3.5rem !important;
}

#rubricGradesTable thead th.rubric-ge-weight-col,
#rubricGradesTable tbody td.rubric-ge-weight-col {
    box-sizing: border-box !important;
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    max-width: 3.5rem !important;
}

/* Mark status toggle buttons (Received / Exempt) — small and subtle */
.mark-status-col {
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    max-width: 1.75rem !important;
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.mark-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #9ca3af;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.mark-status-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #6b7280;
}

.mark-status-btn.mark-status-received.active {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.mark-status-btn.mark-status-exempt.active {
    background: #fef3c7;
    border-color: #d97706;
    color: #b45309;
}

.grade-cell.mark-status-received-cell {
    background-color: #eff6ff !important;
}

.grade-cell.mark-status-exempt-cell {
    background-color: #fffbeb !important;
}

.grade-input.mark-status-display {
    font-weight: 700;
    text-align: center;
    color: #1d4ed8;
    letter-spacing: 0.02em;
}

.grade-cell.mark-status-exempt-cell .grade-input.mark-status-display {
    color: #b45309;
}

#manualGradesModal .mark-status-btn,
#quizzerGradesModal .mark-status-btn,
#enhancedRubricModal .mark-status-btn,
#manualEntryModal .mark-status-btn {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
}

/* Split grading modals — R/E must be readable (not 1.25rem micro-buttons) */
#submissionBoxGradingModal .mark-status-btn,
#documentAwareGradingModal .mark-status-btn,
#docAwareGradeContent .mark-status-btn,
#sbSubmissionPreview .mark-status-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-width: 2px;
    background: #ffffff;
    color: #374151;
    border-color: #6b7280;
}

#submissionBoxGradingModal .mark-status-btn:hover,
#documentAwareGradingModal .mark-status-btn:hover,
#docAwareGradeContent .mark-status-btn:hover {
    background: #f3f4f6;
    border-color: #374151;
}

/* ==========================================================================
   gb-btn — explicit colors for JS-generated UI (do not rely on amber/slate in TW2)
   ========================================================================== */
.gb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    background-color: #4b5563;
    transition: background-color 0.15s, border-color 0.15s;
}

.gb-btn:hover {
    filter: brightness(0.92);
}

.gb-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
}

.gb-btn-warning {
    background-color: #d97706;
    border-color: #b45309;
    color: #ffffff;
}

.gb-btn-teal {
    background-color: #0d9488;
    border-color: #0f766e;
    color: #ffffff;
}

.gb-btn-indigo {
    background-color: #4f46e5;
    border-color: #4338ca;
    color: #ffffff;
}

.gb-btn-gray {
    background-color: #4b5563;
    border-color: #374151;
    color: #ffffff;
}

.gb-submission-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.gb-submission-badge--submitted {
    background-color: #dcfce7;
    color: #166534;
}

.gb-submission-badge--draft {
    background-color: #fef3c7;
    color: #92400e;
}

.gb-submission-badge--empty {
    background-color: #f3f4f6;
    color: #4b5563;
}

#editSubmissionBoxTeacherTools .gb-btn,
#sbSubmissionPreview .gb-btn,
#docAwareSubmissionPreview .gb-btn {
    margin-top: 0.5rem;
}

/* Submission box — teacher assignment modal */
.sb-panel {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.sb-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sb-panel-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.sb-panel-subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    max-width: 36rem;
    line-height: 1.45;
}

.sb-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
}

.sb-toggle-input {
    width: 1rem;
    height: 1rem;
    accent-color: #0d9488;
}

.sb-lock-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #78350f;
    line-height: 1.45;
}

.sb-lock-banner i {
    margin-top: 0.15rem;
    color: #b45309;
}

.sb-panel-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sb-section {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.125rem;
    background: #f8fafc;
}

.sb-section--message {
    background: #ffffff;
}

.sb-section--presets {
    background: #f0fdfa;
    border-color: #99f6e4;
}

.sb-section--files {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.sb-section--links {
    border-color: #ddd6fe;
    background: #f5f3ff;
}

.sb-section--locked {
    opacity: 0.85;
}

.sb-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.sb-section-title--inline {
    margin: 0;
}

.sb-section-hint {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.sb-section-head {
    margin-bottom: 0.5rem;
}

.sb-section-body--off {
    opacity: 0.45;
    pointer-events: none;
}

.sb-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.sb-form-grid--3 {
    grid-template-columns: 1fr 8rem 9rem;
}

.sb-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.sb-input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
}

.sb-input--narrow {
    max-width: 6rem;
}

.sb-input:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgb(13 148 136 / 0.15);
}

.sb-input:disabled,
.sb-toggle-input:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.sb-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #334155;
    cursor: pointer;
}

.sb-check-row--section {
    font-size: 0.875rem;
}

.sb-field--check {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.25rem;
}

.sb-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sb-preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f766e;
    background: #ffffff;
    border: 1px solid #5eead4;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.sb-preset-chip:hover {
    background: #ccfbf1;
    border-color: #0d9488;
}

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

.sb-extra-note {
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.625rem 0.875rem;
    background: #f1f5f9;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
}

.sb-teacher-tools {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Body rows — opaque backing over scrolling heat-map */
#rubricGradingModal #rubricGradesTable tbody tr:not([id^="stats-"]) td.rubric-ge-student-col,
#rubricGradingModal #rubricGradesTable tbody tr:not([id^="stats-"]) td.rubric-ge-overall-col {
    background-color: #ffffff !important;
}

#rubricGradingModal #rubricGradesTable tbody tr:not([id^="stats-"]) td.rubric-ge-override-col {
    background-color: #fffbeb;
}

/* Stats footer — gray chrome for sticky pair only */
#rubricGradingModal #rubricGradesTable tbody tr[id^="stats-"] td.rubric-ge-student-col,
#rubricGradingModal #rubricGradesTable tbody tr[id^="stats-"] td.rubric-ge-overall-col {
    background-color: #e5e7eb !important;
}

#rubricGradingModal #rubricGradesTable tbody tr[id^="stats-"] td.rubric-ge-override-col {
    background-color: #e5e7eb !important;
}

/* Soft seam after Overall (last frozen column) */
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-overall-col,
#rubricGradingModal #rubricGradesTable tbody td.rubric-ge-overall-col {
    box-shadow: 6px 0 12px -4px rgba(15, 23, 42, 0.14);
}

/* Question headers: capped width + a few wrapped lines (not unbounded wrapping) */
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-question-head {
    max-width: 5.5rem;
    vertical-align: bottom;
    border-left: 3px solid #bfdbfe;
}

#rubricGradingModal #rubricGradesTable thead th.rubric-ge-question-head .rubric-q-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
}

#rubricGradingModal #rubricGradesTable thead th.rubric-ge-question-head .rubric-q-meta {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section total columns — clear vertical rhythm */
#rubricGradingModal #rubricGradesTable thead th.rubric-ge-section-total-head {
    max-width: 7rem;
    vertical-align: bottom;
    border-left: 3px solid #1d4ed8;
    border-right: 3px solid #1d4ed8;
}

#rubricGradingModal #rubricGradesTable thead th.rubric-ge-section-total-head .rubric-section-total-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.15;
}

#rubricGradingModal #rubricGradesTable tbody td.rubric-ge-section-total-cell {
    border-left: 3px solid #60a5fa;
    border-right: 3px solid #60a5fa;
}

#rubricGradingModal #rubricGradesTable tbody tr[id^="stats-"] td.rubric-ge-section-total-cell {
    border-left: 3px solid #60a5fa;
    border-right: 3px solid #60a5fa;
}

/* Raised focus ring on scrolling cells only — keep below sticky stack (see z-index above) */
#rubricGradesTable tbody td:focus-within:not(.sticky) {
    position: relative;
    z-index: 5;
}

/* Subtle highlighting for focused cells */
#rubricGradesTable tbody tr:hover {
    background-color: #f8fafc;
}

#rubricGradesTable tbody tr:focus-within {
    background-color: #eff6ff;
}

/* Excel-like row highlighting for rubric navigation */
#rubricGradesTable tbody tr.rubric-current-row {
    background-color: #dbeafe !important;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Highlight the specific cell being edited */
#rubricGradesTable tbody td:focus-within {
    background-color: #dbeafe !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Highlight the row header (student name) when any cell in that row is focused */
#rubricGradesTable tbody tr:focus-within td:first-child {
    background-color: #eff6ff !important;
    border-right: 2px solid #3b82f6 !important;
}

/* Highlight the column header when any cell in that column is focused */
#rubricGradesTable thead th:has(+ * td:focus-within),
#rubricGradesTable thead th:has(~ * td:focus-within) {
    background-color: #eff6ff !important;
    border-bottom: 2px solid #3b82f6 !important;
}

#rubricGradesTable tbody tr:focus-within td:nth-child(1) { --highlighted-column: 1; }
#rubricGradesTable tbody tr:focus-within td:nth-child(2) { --highlighted-column: 2; }
#rubricGradesTable tbody tr:focus-within td:nth-child(3) { --highlighted-column: 3; }
#rubricGradesTable tbody tr:focus-within td:nth-child(4) { --highlighted-column: 4; }
#rubricGradesTable tbody tr:focus-within td:nth-child(5) { --highlighted-column: 5; }
#rubricGradesTable tbody tr:focus-within td:nth-child(6) { --highlighted-column: 6; }
#rubricGradesTable tbody tr:focus-within td:nth-child(7) { --highlighted-column: 7; }
#rubricGradesTable tbody tr:focus-within td:nth-child(8) { --highlighted-column: 8; }
#rubricGradesTable tbody tr:focus-within td:nth-child(9) { --highlighted-column: 9; }
#rubricGradesTable tbody tr:focus-within td:nth-child(10) { --highlighted-column: 10; }
#rubricGradesTable tbody tr:focus-within td:nth-child(11) { --highlighted-column: 11; }
#rubricGradesTable tbody tr:focus-within td:nth-child(12) { --highlighted-column: 12; }
#rubricGradesTable tbody tr:focus-within td:nth-child(13) { --highlighted-column: 13; }
#rubricGradesTable tbody tr:focus-within td:nth-child(14) { --highlighted-column: 14; }
#rubricGradesTable tbody tr:focus-within td:nth-child(15) { --highlighted-column: 15; }
#rubricGradesTable tbody tr:focus-within td:nth-child(16) { --highlighted-column: 16; }
#rubricGradesTable tbody tr:focus-within td:nth-child(17) { --highlighted-column: 17; }
#rubricGradesTable tbody tr:focus-within td:nth-child(18) { --highlighted-column: 18; }
#rubricGradesTable tbody tr:focus-within td:nth-child(19) { --highlighted-column: 19; }
#rubricGradesTable tbody tr:focus-within td:nth-child(20) { --highlighted-column: 20; }

/* Smooth transitions for all highlighting effects */
#rubricGradesTable th,
#rubricGradesTable td {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Course Card Drag and Drop Styles */
.course-card {
    transition: all 0.3s ease;
    user-select: none;
}

.course-card:hover {
    cursor: pointer;
}

.course-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg) scale(0.95);
    z-index: 1000;
    pointer-events: none;
}

/* Drop insertion indicators */
.course-card.drop-before::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    width: 4px;
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    z-index: 10;
}

.course-card.drop-after::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 4px;
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    z-index: 10;
}

/* Re-enable pointer events for interactive elements */
.course-card .bg-blue-600,
.course-card .drag-handle {
    pointer-events: auto;
}

/* Add a visible drag handle */
.course-card .drag-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.course-card:hover .drag-handle {
    opacity: 1;
}

.course-card .drag-handle:hover {
    background: rgba(59, 130, 246, 0.2);
    cursor: grab;
}

.course-card .drag-handle:active {
    cursor: grabbing;
}

.course-card .drag-handle::before {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h16M4 16h16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Statistics rows styling */
#rubricGradingModal #rubricGradesTable tr[id^="stats-"] {
    background-color: #f9fafb !important;
    border-top: 2px solid #d1d5db !important;
}

#rubricGradingModal #rubricGradesTable tr[id^="stats-"] td:first-child {
    background-color: #e5e7eb !important;
    font-weight: bold !important;
    color: #374151 !important;
    border-right: 1px solid #d1d5db !important;
}

#rubricGradingModal #rubricGradesTable tr[id^="stats-"] td:nth-child(2) {
    background-color: #e5e7eb !important;
    border-right: 1px solid #d1d5db !important;
}

#rubricGradingModal #rubricGradesTable tr[id^="stats-"] td {
    background-color: #f9fafb !important;
    color: #374151 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding: 4px 2px !important;
}

/* Fullscreen statistics rows styling */
#rubricGradingModal.fullscreen #rubricGradesTable tr[id^="stats-"] td {
    font-size: 10px !important;
    padding: 2px 1px !important;
}

/* Rubric Designer: ensure +a/b button is visible in Actions column */
#rubricModal #rubricTableBody td:last-child {
    min-width: 100px;
    white-space: nowrap;
}
#rubricModal #rubricTableBody td:last-child .flex {
    flex-wrap: nowrap;
}

/* Bulk rubric modal — compact row comments (widen on focus / expand / when text exists) */
#rubricGradingModal .rubric-comment-td textarea.rubric-row-comment-field {
    resize: none;
    transition: max-width 0.15s ease, width 0.15s ease, min-height 0.12s ease;
}
#rubricGradingModal .rubric-comment-td:not([data-expanded="true"]) textarea.rubric-row-comment-field:not(:focus) {
    width: 2rem;
    min-width: 2rem;
    max-width: 4.5rem;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    max-height: 1.75rem !important;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.25rem;
}
#rubricGradingModal .rubric-comment-td:not([data-expanded="true"]) textarea.rubric-row-comment-field:not(:focus).rubric-comment-has-text {
    max-width: 7.5rem;
    width: 7.5rem;
}
#rubricGradingModal .rubric-comment-td[data-expanded="true"] textarea.rubric-row-comment-field,
#rubricGradingModal .rubric-comment-td textarea.rubric-row-comment-field:focus,
#rubricGradingModal .rubric-comment-td textarea.rubric-row-comment-field.rubric-comment-editing {
    width: 100%;
    max-width: 20rem;
    min-width: 10rem;
    white-space: pre-wrap;
    overflow-y: auto;
    min-height: 3.5rem !important;
    max-height: 10rem !important;
    height: auto !important;
}

/* Canonical curriculum strand labels (truncated with expand) */
.gb-strand-label-wrap {
    max-width: 100%;
}
.gb-strand-label.truncate {
    display: inline-block;
    max-width: min(100%, 20rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.gb-strand-expand {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}