/* ============================================
   Brand tokens (E20-3594)
   ------------------------------------------------------------------
   This grid used to hardcode Tailwind blues, so a Cobb-red (or any other)
   client theme still rendered a blue Grading Center. These map onto the
   per-client brand variables the app already publishes on :root - see
   less/incite/statuses.less for the default scale and less/themes/<client>
   for the per-client overrides. The literals are the myIncite blue, kept as
   the fallback for anything that does not define the scale.

   Left alone on purpose, because they carry meaning rather than brand:
   status colors (complete / missing / late / in progress), the heatmap
   scale, file-type icons, and the assistant accent surfaces.

   Each alpha token declares a literal first and the color-mix second, so an
   engine without color-mix keeps the previous rendering instead of dropping
   the declaration entirely.
   ============================================ */
:root {
    --cg-brand: #0074c5;
    --cg-brand: var(--primary, #0074c5);

    --cg-brand-hover: #005a99;
    --cg-brand-hover: color-mix(in srgb, var(--cg-brand) 82%, #000);

    --cg-brand-active: #004b80;
    --cg-brand-active: color-mix(in srgb, var(--cg-brand) 68%, #000);

    --cg-brand-light: #4d9ed6;
    --cg-brand-light: var(--primary-L30, #4d9ed6);

    --cg-brand-border: #99c7e8;
    --cg-brand-border: var(--primary-L60, #99c7e8);

    --cg-brand-soft-2: #cce3f3;
    --cg-brand-soft-2: var(--primary-L80, #cce3f3);

    --cg-brand-soft: #e6f1f9;
    --cg-brand-soft: var(--primary-L90, #e6f1f9);

    --cg-brand-a06: rgba(0, 116, 197, .06);
    --cg-brand-a06: color-mix(in srgb, var(--cg-brand) 6%, transparent);
    --cg-brand-a08: rgba(0, 116, 197, .08);
    --cg-brand-a08: color-mix(in srgb, var(--cg-brand) 8%, transparent);
    --cg-brand-a10: rgba(0, 116, 197, .10);
    --cg-brand-a10: color-mix(in srgb, var(--cg-brand) 10%, transparent);
    --cg-brand-a15: rgba(0, 116, 197, .15);
    --cg-brand-a15: color-mix(in srgb, var(--cg-brand) 15%, transparent);
    --cg-brand-a16: rgba(0, 116, 197, .16);
    --cg-brand-a16: color-mix(in srgb, var(--cg-brand) 16%, transparent);
    --cg-brand-a20: rgba(0, 116, 197, .20);
    --cg-brand-a20: color-mix(in srgb, var(--cg-brand) 20%, transparent);
    --cg-brand-a25: rgba(0, 116, 197, .25);
    --cg-brand-a25: color-mix(in srgb, var(--cg-brand) 25%, transparent);
    --cg-brand-a30: rgba(0, 116, 197, .30);
    --cg-brand-a30: color-mix(in srgb, var(--cg-brand) 30%, transparent);
    --cg-brand-a35: rgba(0, 116, 197, .35);
    --cg-brand-a35: color-mix(in srgb, var(--cg-brand) 35%, transparent);
    --cg-brand-a40: rgba(0, 116, 197, .40);
    --cg-brand-a40: color-mix(in srgb, var(--cg-brand) 40%, transparent);
    --cg-brand-a50: rgba(0, 116, 197, .50);
    --cg-brand-a50: color-mix(in srgb, var(--cg-brand) 50%, transparent);
    --cg-brand-a65: rgba(0, 116, 197, .65);
    --cg-brand-a65: color-mix(in srgb, var(--cg-brand) 65%, transparent);
}

/* ============================================
   Grading Stream - Modern Grading Center
   ============================================ */

.grading-stream {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.grading-stream--loading {
    justify-content: center;
    align-items: center;
}

/* ============================================
   Loading State
   ============================================ */

.grading-stream__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: #64748b;
}

.grading-stream__loading-spinner {
    margin-bottom: 16px;
    color: var(--cg-brand);
}

.grading-stream__loading-text {
    font-size: 14px;
}

/* ============================================
   Error State
   ============================================ */

.grading-stream__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

.grading-stream__error-icon {
    margin-bottom: 16px;
}

.grading-stream__error-message {
    margin-bottom: 24px;
    color: #64748b;
    font-size: 14px;
    max-width: 400px;
}

/* ============================================
   Content Container
   ============================================ */

.grading-stream__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ============================================
   Toolbar
   ============================================ */

.grading-stream__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 16px 0;
    padding: 10px 14px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    gap: 12px;
    flex-wrap: wrap;
}

.grading-stream__toolbar-left,
.grading-stream__toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grading-stream__toolbar-divider {
    width: 1px;
    height: 22px;
    background-color: #e2e8f0;
}

.grading-stream__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.grading-stream__btn:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.grading-stream__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================
   Filters
   ============================================ */

.grading-stream__filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grading-stream__filter-label {
    font-size: 10px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    white-space: nowrap;
}

.grading-stream__filter-select {
    min-width: 140px;
    max-width: 190px;
    height: 32px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: border-color 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms cubic-bezier(.16, 1, .3, 1);
}

.grading-stream__filter-select:hover {
    border-color: #cbd5e1;
}

.grading-stream__filter-select:focus {
    border-color: var(--cg-brand);
    outline: none;
    box-shadow: 0 0 0 2px var(--cg-brand-a15);
}

/* ============================================
   View Toggle
   ============================================ */

/* ============================================
   Connection Status
   ============================================ */

.grading-stream__connection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 16px;
    background-color: #fee2e2;
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
}

.grading-stream__connection--connected {
    background-color: #dcfce7;
    color: #16a34a;
}

.grading-stream__connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.grading-stream__connection--connected .grading-stream__connection-dot {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   Quick Filters
   ============================================ */

.grading-stream__quick-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.grading-stream__quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
}

.grading-stream__quick-filter:hover {
    filter: brightness(0.96);
    border-color: currentColor;
}

/* Semantic colour per chip (E20-3594).
   One formula for all six: at rest a readable tint with the hue carried by the
   TEXT as well as the icon; when active the tint deepens and a 1px border in
   the same hue appears. Previously every chip shared the same slate text at
   rest, so only the small icon distinguished them, and Review and Late both
   resolved to the identical amber active state.
   Six distinct hues: amber / red / violet / green / blue / slate. These are
   status colours, so they stay fixed rather than following the client brand. */
.grading-stream__quick-filter--review {
    background-color: #fef3c7;
    color: #92400e;
}

.grading-stream__quick-filter--review.grading-stream__quick-filter--active {
    background-color: #fde68a;
    border-color: #b45309;
    color: #78350f;
}

.grading-stream__quick-filter--missing {
    background-color: #fee2e2;
    color: #b91c1c;
}

.grading-stream__quick-filter--missing.grading-stream__quick-filter--active {
    background-color: #fecaca;
    border-color: #dc2626;
    color: #991b1b;
}

/* Violet, matching the late dot and the late score cell in the grid. */
.grading-stream__quick-filter--late {
    background-color: #ede9fe;
    color: #6d28d9;
}

.grading-stream__quick-filter--late.grading-stream__quick-filter--active {
    background-color: #ddd6fe;
    border-color: #7c3aed;
    color: #5b21b6;
}

.grading-stream__quick-filter--complete {
    background-color: #dcfce7;
    color: #15803d;
}

.grading-stream__quick-filter--complete.grading-stream__quick-filter--active {
    background-color: #bbf7d0;
    border-color: #16a34a;
    color: #14532d;
}

.grading-stream__quick-filter--inProgress {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.grading-stream__quick-filter--inProgress.grading-stream__quick-filter--active {
    background-color: #bfdbfe;
    border-color: #2563eb;
    color: #1e3a8a;
}

.grading-stream__quick-filter--notStarted {
    background-color: #f1f5f9;
    color: #475569;
}

.grading-stream__quick-filter--notStarted.grading-stream__quick-filter--active {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}

.grading-stream__quick-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.grading-stream__quick-filter-dot--attention {
    background-color: #f59e0b;
}

.grading-stream__quick-filter-dot--missing {
    background-color: #ef4444;
}

.grading-stream__quick-filter-dot--late {
    background-color: #7c3aed;
}

.grading-stream__quick-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.75);
    color: inherit;
    font-weight: 700;
    font-size: 10px;
}

.grading-stream__quick-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: none;
    border: none;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: color 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.grading-stream__quick-filter-clear:hover {
    color: var(--cg-brand);
    background-color: var(--cg-brand-a08);
}

/* ============================================
   Batch Progress Bar (Axol AI runs + Assign All)
   ============================================ */

.grading-stream__batch-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: var(--cg-brand-a08);
    border-bottom: 1px solid #e2e8f0;
}

.grading-stream__batch-progress-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cg-brand);
    white-space: nowrap;
}

.grading-stream__batch-progress-failed {
    color: #721c24;
}

.grading-stream__batch-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: var(--cg-brand-a15);
    overflow: hidden;
}

.grading-stream__batch-progress-fill {
    height: 100%;
    border-radius: 3px;
    background-color: var(--cg-brand);
    transition: width 180ms cubic-bezier(.16, 1, .3, 1);
}

/* ============================================
   Load More (item 3 - large-roster batching)
   ============================================ */

.grading-stream__load-more {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.grading-stream__load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.grading-stream__load-more-btn:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* ============================================
   Grid Container
   ============================================ */

.grading-stream__grid-container {
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

/* E20-3601: .grading-stream__grid-container--hidden removed. The rule set height:0 but
   overflow:visible, so the grid kept painting outside its zero-height box, on top of
   the card view — which is what made the page look like a mix of both and stopped
   submissions opening. The card view is gone, so nothing needs to hide the grid. */

.grading-stream-grid-wrapper {
    height: 100%;
    width: 100%;
}

.grading-stream-grid-wrapper .ag-theme-alpine {
    height: 100%;
    width: 100%;
}

/* ============================================
   Card Container
   ============================================ */

/* ============================================
   Empty State
   ============================================ */

.grading-stream__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.grading-stream__empty-icon {
    margin-bottom: 16px;
}

.grading-stream__empty-message {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ============================================
   Bulk Actions Bar
   ============================================ */

.grading-stream-bulk-actions {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.grading-stream-bulk-actions__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background-color: #1e293b;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.grading-stream-bulk-actions__count {
    font-size: 14px;
    font-weight: 600;
    padding-right: 12px;
    border-right: 1px solid #475569;
}

.grading-stream-bulk-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--cg-brand);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.grading-stream-bulk-actions__btn:hover {
    background-color: var(--cg-brand-hover);
}

.grading-stream-bulk-actions__btn--secondary {
    background-color: #475569;
}

.grading-stream-bulk-actions__btn--secondary:hover {
    background-color: #334155;
}

.grading-stream-bulk-actions__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    margin-left: 4px;
}

.grading-stream-bulk-actions__close:hover {
    background-color: #334155;
    color: #ffffff;
}

/* ============================================
   Grid View Styles
   ============================================ */

.grading-stream-grid {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.grading-stream-grid .ag-header {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.grading-stream-grid .ag-header-cell {
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.grading-stream-grid .ag-row {
    border-bottom: 1px solid #f1f5f9;
}

.grading-stream-grid .ag-row:hover {
    background-color: #f8fafc;
}

.grading-stream-grid .ag-row-selected {
    background-color: var(--cg-brand-soft) !important;
}

.grading-stream-grid .ag-cell {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
}

/* ============================================
   Student Cell
   ============================================ */

.grading-stream-student-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    width: 100%;
}

.grading-stream-student-cell__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--cg-brand);
}

.grading-stream-student-cell__info {
    flex: 1;
    min-width: 0;
}

.grading-stream-student-cell__name {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grading-stream-student-cell__id {
    font-size: 12px;
    color: #64748b;
}

.grading-stream-student-cell__average {
    text-align: right;
}

.grading-stream-student-cell__average-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.grading-stream-student-cell__average-label {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
}

/* ============================================
   Score Cell
   ============================================ */

.grading-stream-score-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
}

.grading-stream-score-cell__value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.grading-stream-score-cell__points {
    font-size: 11px;
    color: #64748b;
}

.grading-stream-score-cell__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.grading-stream-score-cell__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.grading-stream-score-cell__dot--success {
    background-color: #10b981;
}

.grading-stream-score-cell__dot--attention {
    background-color: #f59e0b;
}

.grading-stream-score-cell__dot--missing {
    background-color: #ef4444;
}

.grading-stream-score-cell__dot--progress {
    background-color: #94a3b8;
}

.grading-stream-score-cell--missing .grading-stream-score-cell__status {
    color: #dc2626;
}

.grading-stream-score-cell--attention .grading-stream-score-cell__status {
    color: #d97706;
}

.grading-stream-score-cell__late {
    font-size: 10px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    margin-top: 2px;
}

.grading-stream-score-cell__dash {
    color: #cbd5e1;
    font-size: 18px;
}

/* AI-graded identity dot - small marker in the top-right of a score cell
   for results that came from Axol AI grading (click to review). */
.grading-stream-score-cell {
    position: relative;
}

.grading-stream-score-cell__ai-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dc2626;
    cursor: pointer;
}

/* Brief highlight flash applied to a student's row/cell when an Axol batch
   result lands for them (see vm.isRowFlashing in the controller). Fades over
   ~1.5s to match the timeout that removes the flag. */
.grading-stream-row--ai-flash,
.grading-stream-card--ai-flash {
    background-color: rgba(220, 38, 38, 0.08);
    transition: background-color 1.5s ease;
}

/* ============================================
   Card View Styles
   ============================================ */

.grading-stream-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.grading-stream-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.grading-stream-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.grading-stream-card--selected {
    border-color: var(--cg-brand);
    box-shadow: 0 0 0 2px var(--cg-brand-a20);
}

.grading-stream-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.grading-stream-card__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--cg-brand);
}

.grading-stream-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
    overflow: hidden;
}

.grading-stream-card__avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.grading-stream-card__info {
    flex: 1;
    min-width: 0;
}

.grading-stream-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grading-stream-card__id {
    font-size: 12px;
    color: #64748b;
}

.grading-stream-card__average {
    text-align: right;
}

.grading-stream-card__average-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.grading-stream-card__average-label {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
}

.grading-stream-card__body {
    padding: 12px 16px;
}

.grading-stream-card__assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.grading-stream-card__assignment:last-child {
    border-bottom: none;
}

.grading-stream-card__assignment:hover {
    background-color: #f8fafc;
    margin: 0 -16px;
    padding: 8px 16px;
}

.grading-stream-card__assignment-name {
    font-size: 13px;
    color: #475569;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.grading-stream-card__assignment-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.grading-stream-card__assignment-score--complete {
    color: #10b981;
}

.grading-stream-card__assignment-score--attention {
    color: #f59e0b;
}

.grading-stream-card__assignment-score--missing {
    color: #ef4444;
}

.grading-stream-card__assignment-score--progress {
    color: var(--cg-brand);
}

.grading-stream-card__assignment-score--assigned {
    color: #94a3b8;
}

.grading-stream-card__assignment-score--retry {
    color: #ca8a04;
}

.grading-stream-card__assignment-score--empty {
    color: #cbd5e1;
    font-size: 16px;
}

.grading-stream-card__assignment-score--late {
    color: #ca8a04;
}

.grading-stream-card__assignment:hover .grading-stream-card__assignment-score--empty {
    color: var(--cg-brand);
}

/* Card view progress bars */
.grading-stream-card__bar {
    position: relative;
    width: 80px;
    height: 18px;
    background: #f1f5f9;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

.grading-stream-card__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 9px;
    transition: width 0.3s ease;
}

.grading-stream-card__bar-fill--high { background: linear-gradient(90deg, #22c55e, #16a34a); }
.grading-stream-card__bar-fill--mid { background: linear-gradient(90deg, #f59e0b, #d97706); }
.grading-stream-card__bar-fill--low { background: linear-gradient(90deg, #fb923c, #ea580c); }
.grading-stream-card__bar-fill--danger { background: linear-gradient(90deg, #ef4444, #dc2626); }

.grading-stream-card__bar-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1;
}

/* ============================================
   Score Popover
   ============================================ */

.grading-stream-popover {
    position: absolute;
    z-index: 1100;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 16px;
    min-width: 200px;
}

.grading-stream-popover__title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.grading-stream-popover__input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.grading-stream-popover__input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
}

.grading-stream-popover__input:focus {
    border-color: var(--cg-brand);
    outline: none;
    box-shadow: 0 0 0 2px var(--cg-brand-a10);
}

.grading-stream-popover__suffix {
    font-size: 14px;
    color: #64748b;
}

.grading-stream-popover__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.grading-stream-popover__btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.grading-stream-popover__btn--primary {
    background-color: var(--cg-brand);
    border: none;
    color: #ffffff;
}

.grading-stream-popover__btn--primary:hover {
    background-color: var(--cg-brand-hover);
}

.grading-stream-popover__btn--secondary {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.grading-stream-popover__btn--secondary:hover {
    background-color: #f8fafc;
}

/* ============================================
   Inline Editor
   ============================================ */

.grading-stream-inline-editor {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.grading-stream-inline-editor__input {
    width: 60px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--cg-brand);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.grading-stream-inline-editor__input:focus {
    outline: none;
}

.grading-stream-inline-editor__suffix {
    font-size: 13px;
    color: #64748b;
}

/* ============================================
   Header Renderer
   ============================================ */

.grading-stream-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 8px 0;
}

.grading-stream-header__name {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.grading-stream-header__type-icon {
    margin-top: 4px;
    opacity: 0.7;
}

/* Column header stats: submitted count / class average / empty state */
.grading-stream-header__stats {
    font-size: 11px;
    margin-top: 2px;
}

.grading-stream-header__stats--avg {
    color: #475569;
    font-weight: 600;
}

.grading-stream-header__stats--submitted {
    color: var(--cg-brand-hover);
}

.grading-stream-header__stats--empty {
    color: #94a3b8;
    font-style: italic;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .grading-stream__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 12px 12px 0;
    }

    .grading-stream__toolbar-left,
    .grading-stream__toolbar-right {
        justify-content: space-between;
    }

    .grading-stream__filter {
        flex: 1;
    }

    .grading-stream__filter-select {
        max-width: none;
        width: 100%;
    }

    .grading-stream__quick-filters {
        padding: 8px 12px;
    }

    .grading-stream__quick-filter {
        padding: 4px 10px;
        font-size: 11px;
    }

    .grading-stream-bulk-actions__bar {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 90vw;
    }
}

/* Display options popover */
.grading-stream__display { position: relative; }
.grading-stream__btn--active { border-color: var(--cg-brand); color: var(--cg-brand); background: var(--cg-brand-a06); }
.grading-stream__display-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cg-brand); }
.grading-stream__display-backdrop { position: fixed; inset: 0; z-index: 1049; }
.grading-stream__display-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; width: 240px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.grading-stream__display-row { display: flex; flex-direction: column; gap: 3px; }
.grading-stream__display-row .grading-stream__filter-select { width: 100%; }


/* ============================================
   Classic / New Grading Center toggle (E20-3594)
   Lives here rather than inline in a template because the toggle now renders at
   BOTH the classroom-level and the course-level Grading Center, and this
   stylesheet is linked globally from index.html.
   ============================================ */
.gc-seg-wrap{display:flex;justify-content:center;align-items:center;flex:0 0 auto;padding:6px 0 10px;}
.gc-seg{display:inline-flex;align-items:center;gap:3px;padding:4px;background:#fff;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.gc-seg__btn{display:inline-flex;align-items:center;gap:7px;padding:7px 20px;border:none;border-radius:18px;background:transparent;color:#94a3b8;font-size:13px;font-weight:600;cursor:pointer;line-height:1;transition:all .18s cubic-bezier(.16,1,.3,1);white-space:nowrap;}
.gc-seg__btn:hover{color:#475569;background:#f8fafc;}
.gc-seg__btn--active{background:var(--cg-brand);color:#fff;box-shadow:0 2px 6px var(--cg-brand-a35);}
.gc-seg__btn--active:hover{background:var(--cg-brand);color:#fff;}
/* E20-3594: the active "New" pill used to borrow the assistant's palette (the
   Axol red, and the blue/purple/amber assistant gradient for everyone else).
   It is a version switch, not an AI tool, so it now takes the client brand
   like the Classic pill does. */
.gc-seg__icon{width:22px;height:22px;object-fit:contain;opacity:.75;transition:all .18s ease;}
.gc-seg__btn--active .gc-seg__icon{opacity:1;}

/* E20-3594: display rows stack label-over-control; a checkbox row reads better
   side by side, with the box on the right edge. */
.grading-stream__display-row--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.grading-stream__display-check {
    margin: 0 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--cg-brand);
    cursor: pointer;
}

/* ============================================
   Display panel (E20-3594)
   ============================================
   Was a flat stack of label-over-select rows with two checkboxes pushed to the
   right edge and no hierarchy. Now grouped by what each setting acts on
   (Columns / Rows / Cells), with real toggle switches instead of native
   checkboxes and a Reset that appears only when something is off-default. */

.grading-stream__display-panel {
    width: 264px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.gsd__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}

.gsd__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .01em;
}

.gsd__title i { font-size: 11px; color: var(--cg-brand); }

.gsd__reset {
    border: none;
    background: none;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cg-brand);
    cursor: pointer;
}

.gsd__reset:hover { background: var(--cg-brand-a08); }

.gsd__group {
    padding: 11px 14px 13px;
    border-bottom: 1px solid #f1f5f9;
}

.gsd__group--last { border-bottom: none; }

.gsd__group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gsd__group-label i { font-size: 10px; }

/* Label wraps the control, so the whole row is a click target. */
.gsd__field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
    cursor: pointer;
}

.gsd__field:last-child { margin-bottom: 0; }

.gsd__field-label {
    flex: 0 0 74px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.gsd__select {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 26px 0 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background-color: #fff;
    /* Chevron drawn inline so the control does not depend on a sprite. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.gsd__select:hover { border-color: var(--cg-brand-border); }

.gsd__select:focus {
    outline: none;
    border-color: var(--cg-brand);
    box-shadow: 0 0 0 3px var(--cg-brand-a15);
}

.gsd__switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 6px 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    transition: background 140ms ease;
}

.gsd__switch-row:hover { background: #f8fafc; }

.gsd__switch-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.gsd__switch-text small {
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}

.gsd__switch {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 19px;
    border-radius: 10px;
    background: #cbd5e1;
    transition: background 160ms cubic-bezier(.16, 1, .3, 1);
}

.gsd__switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .28);
    transition: transform 160ms cubic-bezier(.16, 1, .3, 1);
}

.gsd__switch--on { background: var(--cg-brand); }
.gsd__switch--on i { transform: translateX(15px); }