/* Gradebook Page Styling */
.gradebook-subtitle {
    color: var(--text-muted) !important;
}

/* Admin Center sub-nav pills */
.admin-shell-pill {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

.admin-shell-pill:hover {
    color: var(--text-main);
}

.admin-shell-pill-active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-color: transparent;
}

/* Results Table (gradebook grid) skeleton moved to assets/06_gradebook.css
   (DS-04 rev 3, WP4) - the grid gained rails and 3-level bands, so its rules
   are consolidated in one place instead of split across two files. */

.results-grader-cell-input {
    width: 60px !important;
    max-width: 60px !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    color: #f8fafc !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    height: 25px !important;
    border-radius: 4px !important;
    text-align: center !important;
}

.bulk-actions-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.bulk-actions-bar > * {
    min-width: 0;
}

/* Premium Modal Styling */
.modal-content {
    background: var(--bg-color) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    border-bottom: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.modal-footer {
    border-top: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.modal-title {
    color: var(--accent-secondary) !important;
    font-weight: 700 !important;
}

/* Widen help / FAQ / how-to modals for readability, plus the calendar's own
   content modals (Sync & Export, Add/Edit Event), the gradebook structure
   editor, and the unified student detail modal, so they all share one width
   instead of drifting apart. Keyed on the shared id convention (every help
   modal ends in -faq-modal or -howto-modal) plus explicit ids for the rest,
   so this stays centralized and does not affect confirmation modals
   (e.g. confirm-delete-event-modal, calendar-regen-confirm-modal), which keep
   Bootstrap's default width on purpose - only content-editor/viewer modals
   opt in.
   dbc.Modal puts its id on the .modal-dialog div itself, not on the outer
   .modal wrapper -- so this must be a compound selector, never a descendant
   one. The 500px floor matters: 60vw drops below Bootstrap's own 500px
   default under ~833px viewport, so without it the modal would shrink here
   instead of grow. Phones keep Bootstrap's responsive width. */
@media (min-width: 768px) {
    .modal-dialog[id$="-faq-modal"],
    .modal-dialog[id$="-howto-modal"],
    .modal-dialog#calendar-sync-modal,
    .modal-dialog#event-modal,
    .modal-dialog#modal-edit-structure,
    .modal-dialog#modal-student-performance {
        max-width: max(60vw, 500px);
    }
}

.form-check-label {
    color: var(--text-main) !important;
    font-size: 0.85rem;
}

/* Dashboard Specific Styles */
.upload-glass {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed var(--glass-border) !important;
    border-radius: 15px !important;
    background: var(--glass-bg) !important;
    color: var(--text-main) !important;
}
.upload-glass > div {
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.textarea-glass {
    width: 100%;
    min-height: 120px;
    color: var(--text-main) !important;
    resize: vertical;
}

.textarea-prominent {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #f8fafc !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.dash-table-glass {
    background: transparent !important;
}

.dash-table-glass .dash-header {
    background-color: var(--glass-bg) !important;
    color: var(--accent-primary) !important;
    font-weight: bold !important;
    border: 1px solid var(--glass-border) !important;
}

.dash-table-glass .dash-cell {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 12px !important;
    text-align: left !important;
} 

/* Glassmorphism Textarea */
.textarea-glass {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.textarea-glass:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3) !important;
    outline: none !important;
}

/* Glow spark animation for the AI essay corrector button */
.btn-ai-sparkle {
    position: relative;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(26, 54, 93, 0.15));
    transition: all 0.2s ease-in-out;
}

.btn-ai-sparkle:hover {
    transform: scale(1.05);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.nav-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 8px 12px;
}

/* --- Paywall: locked / withheld AI grading results --- */
.paywall-locked {
    position: relative;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.paywall-teaser {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    filter: blur(7px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.paywall-teaser-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.paywall-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(2px);
}

/* ===================================================================
   Dashboard (v3) widget primitives — all token-based, no literal hex
   =================================================================== */

/* KPI cards */
.kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}
.kpi-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.kpi-card.active { border-color: var(--accent-primary); }
.kpi-label {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted); font-weight: 700;
}
.kpi-value { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--text-main); }
.kpi-delta { font-size: 0.65rem; color: var(--text-muted); }

/* Timeline (schedule) dots */
.dash-timeline-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-primary); margin-top: 5px; flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--glass-bg);
}
.dash-timeline-dot.alt { background: var(--accent-secondary); }

/* Activity feed icons */
.dash-activity-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; flex-shrink: 0;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--accent-primary);
}
.dash-activity-icon.warn    { color: #fbbf24; }
.dash-activity-icon.danger  { color: #f87171; }
.dash-activity-icon.success { color: var(--accent-primary); }
.dash-activity-icon.info    { color: var(--accent-secondary); }

/* Attention flag rows */
.dash-flag-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--glass-border);
}
.dash-flag-row:last-child { border-bottom: none; }
.dash-flag-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--accent-primary);
}

/* Batch monitor rows */
.dash-batch-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; font-size: 0.8rem;
    border-bottom: 1px solid var(--glass-border);
}
.dash-batch-row:last-child { border-bottom: none; }

/* Dashboard widget bodies: the same scroll box as the gradebook grid's
   .results-scroll-container (border, radius, background), plus the inner
   left/right gutter that class deliberately omits - the gradebook grid's own
   cells own their padding, so adding it there would double it up. Every
   dashboard widget's rows (.dash-batch-row / .dash-flag-row, vertical padding
   only) were sitting flush against this box's border without it. */
.dash-widget-body {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--table-container-bg);
    padding: 0 12px;
}

/* "New" chip on widget headers */
.dash-chip-new {
    display: inline-flex; align-items: center;
    font-size: 0.6rem; font-weight: 700; padding: 2px 7px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--glass-bg); border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}

/* Inline spinner (CSS-only) for in-progress batch jobs.
   Note: must NOT be named ".dash-spinner" — Dash's own dcc.Loading
   spinners all carry a base "dash-spinner" class, so that name would
   bleed this 12px bordered circle onto every page-level loader. */
.cg-inline-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--accent-secondary);
    border-radius: 50%;
    animation: dash-spin 1s linear infinite;
    vertical-align: middle;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* Usage gauge sparkline bars */
.dash-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.dash-spark-bar {
    flex: 1; border-radius: 2px 2px 0 0;
    background: var(--accent-primary); opacity: 0.55;
    min-height: 2px;
}
.dash-spark-bar.today { opacity: 1; }
.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   AI Batch Grader — Panel-based layout
   ═══════════════════════════════════════════════════════════ */

.grader-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--footer-height) - 12px);
    overflow: hidden;
}

.grader-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg);
    position: relative;
    z-index: 10;
}

.grader-field-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.grader-context-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    position: relative;
    z-index: 30;
}
.grader-context-card > div {
    flex: 1 1 180px;
    min-width: 180px;
}

.grader-rubric-strip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    z-index: 20;
}
.grader-rubric-strip .textarea-glass {
    flex: 1;
    resize: none !important;
}

.grader-left-panel {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--glass-border);
    padding: 10px;
    gap: 6px;
    position: relative;
    z-index: 5;
}
.grader-left-panel .upload-glass {
    height: 72px;
    min-height: 72px;
    border-radius: 10px !important;
}

/* File list */
.grader-file-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
}
.grader-file-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.72rem;
    transition: background 0.1s;
}
.grader-file-row:hover {
    background: var(--glass-bg);
}
.grader-file-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}
.grader-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.1s;
}
.grader-file-remove:hover {
    color: #dc2626;
}
.grader-mini-dropdown {
    flex-shrink: 0;
    max-width: 100px;
}
.grader-mini-dropdown .Select-control {
    height: 22px !important;
    min-height: 22px !important;
}
.grader-mini-dropdown .Select-value-label,
.grader-mini-dropdown .Select-placeholder {
    font-size: 0.65rem !important;
    line-height: 20px !important;
}
.grader-mini-dropdown .Select-input > input {
    font-size: 0.65rem !important;
}

.grader-editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px 14px;
    min-width: 0;
}

/* Student header inside editor */
.grader-student-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.grader-student-header .student-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
}
.grader-student-header .student-file {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Score + feedback strip */
.grader-sf-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.grader-score-cell {
    padding: 10px 16px;
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    flex-shrink: 0;
    background: var(--glass-bg);
}
.grader-score-val {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.grader-score-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.grader-score-edit {
    font-size: 0.75rem;
    color: var(--accent-primary);
    cursor: pointer;
    margin-top: 5px;
    border: none;
    background: none;
    font-family: inherit;
}
.grader-score-edit:hover { text-decoration: underline; }
.grader-feedback-cell {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.grader-feedback-cell label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.grader-feedback-cell textarea {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 0.85rem;
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.55;
    min-height: 48px;
}

/* Pipeline strip */
.grader-pipeline-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 10px;
    background: var(--glass-bg);
    border-radius: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.grader-pipeline-step {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    white-space: nowrap;
}
.grader-pipeline-step + .grader-pipeline-step::before {
    content: '\203A';
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 8px;
}
.grader-pipeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.grader-pipeline-dot.done    { background: var(--accent-primary); }
.grader-pipeline-dot.running { background: #fbbf24; animation: dash-spin 1s linear infinite; }
.grader-pipeline-dot.pending { background: var(--glass-border); opacity: 0.5; }
.grader-pipeline-dot.failed  { background: #dc2626; }
.grader-pipeline-text.done    { color: var(--accent-primary); font-weight: 600; }
.grader-pipeline-text.running { color: #d97706; font-weight: 600; }
.grader-pipeline-text.pending { color: var(--text-muted); }
.grader-pipeline-text.failed  { color: #dc2626; font-weight: 600; }

/* Diff columns */
.grader-diff-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: calc(100vh - 780px);
    min-height: 200px;
    margin-bottom: 8px;
    overflow: hidden;
    resize: vertical;
}
.grader-diff-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    min-width: 0;
    min-height: 0;
}
.grader-diff-body textarea {
    height: 100% !important;
    min-height: 100% !important;
}
.grader-diff-col-header {
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--glass-bg);
}
.grader-diff-col.corrected .grader-diff-col-header {
    background: rgba(16, 185, 129, 0.06);
    color: var(--accent-primary);
}
.grader-diff-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.d-err {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border-radius: 3px;
    padding: 0 3px;
    text-decoration: line-through;
}
.d-fix {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 600;
}

/* Corrections chips bar */
.grader-corrections-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 10px;
    background: var(--glass-bg);
    border-radius: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
}
.grader-correction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid var(--glass-border);
    background: transparent;
}
.grader-correction-chip .corr-err {
    color: #dc2626;
    text-decoration: line-through;
}
.grader-correction-chip .corr-arr { color: var(--text-muted); }
.grader-correction-chip .corr-fix {
    color: #059669;
    font-weight: 600;
}
.grader-correction-chip .corr-why {
    color: var(--text-muted);
    border-left: 1px solid var(--glass-border);
    margin-left: 4px;
    padding-left: 6px;
    font-size: 0.68rem;
}

/* Action bar - sits directly under the score/feedback strip, not pinned to the
   bottom of the panel. Skip/Re-grade/Save are grouped together (not spread
   across the bar) so Save sits right next to Re-grade. */
.grader-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--glass-border);
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* Pipeline step cards */
.pipeline-step-card {
    width: 350px;
    min-width: 350px;
}

/* Queue group labels */
.grader-queue-group-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 2px 4px;
    margin-top: 6px;
    border-bottom: 1px solid var(--glass-border);
}
.grader-queue-group-label:first-child { margin-top: 0; }

.grader-queue-scroll {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

/* Responsive: stack on tablet */
@media (max-width: 991.98px) {
    .grader-page {
        height: auto;
        overflow: visible;
    }
    .grader-shell {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .grader-left-panel {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        max-height: none;
        overflow-y: visible;
    }
    .grader-diff-columns {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 300px;
    }
    .grader-diff-col {
        min-height: 250px;
    }
    .grader-queue-scroll {
        min-height: 200px;
        max-height: 40vh;
        flex: none;
    }
    .grader-context-card {
        flex-wrap: wrap;
    }
    .grader-sf-strip {
        flex-direction: column;
    }
    .grader-score-cell {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        min-width: auto;
        flex-direction: row;
        gap: 12px;
        padding: 8px 12px;
    }
    .grader-corrections-bar {
        max-height: 160px;
    }
    .grader-rubric-strip {
        flex-direction: column;
    }
    .grader-rubric-strip > div {
        flex: none !important;
        width: 100%;
    }
}

/* Dashboard Alerts threshold inputs (My Account > Preferences & Data): keep them
   compact so a 1-3 digit threshold value does not render in an oversized field. */
.alert-threshold-input {
    max-width: 110px;
    font-size: 0.85rem;
}