/**
 * SIGMA ELMS - Shared UI Component Styles
 *
 * Admin, teacher, and student pages should borrow common UI from this file.
 * Keep page-specific CSS in admin.css, teacher.css, or student.css.
 */

/* ==========================================================================
   UNIVERSAL ELIMINATION OF BROWSER FOCUS/BLUR BLACK BORDER FLICKER
   Prevents Chromium/WebKit from flashing black outline or border rings
   when clicking, focusing, or clicking outside/blurring elements.
   ========================================================================== */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent !important;
}

*:focus,
*:focus-visible,
*:focus-within {
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
}

input,
select,
textarea,
button,
a,
summary,
[tabindex] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    outline: none !important;
}

input:focus,
input:focus-visible,
input:focus-within,
input:active,
input:not(:focus),
select:focus,
select:focus-visible,
select:focus-within,
select:active,
select:not(:focus),
textarea:focus,
textarea:focus-visible,
textarea:focus-within,
textarea:active,
textarea:not(:focus),
button:focus,
button:focus-visible,
button:focus-within,
button:active,
button:not(:focus),
a:focus,
a:focus-visible,
a:focus-within,
a:active,
a:not(:focus) {
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Full-screen modal backdrops cover both navigation rails and the page header. */
.release-modal-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.release-modal-back {
    display: none;
}

@media (max-width: 768px) {
    #teacher-release-assessments-overlay .release-modal-back {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #111827;
        font-size: 14px !important;
        cursor: pointer;
    }

    #teacher-release-assessments-overlay .release-modal-back:hover {
        background: #f1f3f5;
    }

    #teacher-release-assessments-overlay .release-modal-back:focus-visible {
        outline: 2px solid #15803d;
        outline-offset: 2px;
    }

    #teacher-release-assessments-overlay .release-modal-close {
        display: none !important;
    }

    #teacher-release-assessments-overlay .curriculum-hub-panel > div:last-child {
        justify-content: flex-end !important;
    }
}

.sigma-fullscreen-modal-layer {
    z-index: var(--sigma-modal-layer, 11000) !important;
}

@media (min-width: 769px) {
    #teacher-release-assessments-overlay :is(.release-modal-close, button[onclick="window.closeTeacherReleaseAssessmentsModal?.(false)"]:not(.release-modal-back)) {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 24px !important;
        font-size: 14px !important;
    }

    #released-topic-floating-menu {
        border-radius: 8px !important;
        padding: 4px 0 !important;
    }

    #released-topic-floating-menu > button {
        min-height: 34px;
        padding: 8px 12px !important;
        gap: 10px !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 500 !important;
        white-space: nowrap;
    }

    #released-topic-floating-menu > button > i {
        width: 14px !important;
        font-size: 13px !important;
        flex-shrink: 0;
    }
}

.video-material-description-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 8px;
    margin: 4px 0 0 -8px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: #15803d;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

body .video-material-description:not(.is-expanded) p.material-detail-body-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden !important;
}

.video-material-description-toggle:hover {
    background: #f1f3f5;
}

.video-material-description-toggle:focus-visible {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}

#topics-materials-release-workspace .quiz-storage-filter-chip:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

#teacher-release-assessments-overlay [id^="topic-chevron-"] {
    display: inline-block !important;
    transform-origin: center;
    transition: transform 200ms ease !important;
    line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
    #teacher-release-assessments-overlay [id^="topic-chevron-"] { transition: none !important; }
}

#topics-materials-release-workspace .release-workspace-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#topics-materials-release-workspace .release-workspace-quarter {
    flex-shrink: 0;
    margin: 0;
}

@media (max-width: 768px) {
    #teacher-release-assessments-overlay .overflow-y-auto.flex-1 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #topics-materials-release-workspace #unified-picker-list-container {
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
    }

    #topics-materials-release-workspace input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        flex-shrink: 0;
    }

    #topics-materials-release-workspace .release-workspace-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: visible;
        padding-top: 0 !important;
        padding-bottom: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #topics-materials-release-workspace #unified-picker-filter-chips {
        flex-wrap: nowrap !important;
        flex-shrink: 0;
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    #topics-materials-release-workspace #unified-picker-filter-chips .quiz-storage-filter-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 3px 8px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 14px !important;
    }

    #topics-materials-release-workspace .release-workspace-selection-actions {
        flex-wrap: nowrap;
        align-self: center;
        align-items: center;
        gap: 8px !important;
        margin-left: 0;
        white-space: nowrap;
        font-size: 12px !important;
        line-height: 18px !important;
    }

    #topics-materials-release-workspace .release-workspace-selection-actions button {
        padding: 4px 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
}

/* Universal utility classes */
.hidden {
    display: none !important;
}

/* Universal Dashboard & Panel Card Elevation System */
:root {
    --sigma-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --sigma-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --panel-shadow: var(--sigma-card-shadow);
}

/* Assessments Table Name Yellow Hover & Alignment */
.assessment-title-col {
    padding-left: 54px !important;
}

.assessment-title-btn {
    text-align: left !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    outline: none !important;
    text-decoration: none !important;
}

.assessment-title-text {
    color: #000000 !important;
    transition: color 0.15s ease-in-out !important;
    display: block !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.assessment-title-btn:hover .assessment-title-text,
.assessment-title-btn:focus .assessment-title-text,
.assessment-title-btn:active .assessment-title-text,
.assessment-title-text:hover {
    color: #eab308 !important; /* Bright Yellow Hover */
}

/* Picker icons stay faded, then turn solid black while the pointer is on them. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    width: 22px !important;
    height: 22px !important;
    background-size: 22px 22px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.45 !important;
    filter: none !important;
    background-color: transparent !important;
    transition: none !important;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input::-webkit-calendar-picker-indicator:hover {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

.standard-panel-shadow {
    box-shadow: var(--sigma-card-shadow) !important;
}

/* Center Feed & Panel Shadow Unification */
.main-dashboard-column > div:has(#trigger-announcement-composer),
.announcement-composer-trigger-card,
.sigma-announcement-card,
.sigma-feed-tabs-container {
    box-shadow: var(--sigma-card-shadow) !important;
}

/* Announcement Composer Trigger Button Canonical Styling & Hover Highlight */
.announcement-composer-trigger-card button,
.announcement-composer-trigger-card .announcement-trigger-input-btn,
.announcement-composer-trigger-card #trigger-announcement-composer,
#trigger-announcement-composer,
button[onclick*="openComposerModal"],
button[onclick*="openClassroomComposer"],
button[onclick*="openAdminClassroomComposer"] {
    background-color: #f1f5f9 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.announcement-composer-trigger-card button:hover,
.announcement-composer-trigger-card .announcement-trigger-input-btn:hover,
.announcement-composer-trigger-card #trigger-announcement-composer:hover,
#trigger-announcement-composer:hover,
button[onclick*="openComposerModal"]:hover,
button[onclick*="openClassroomComposer"]:hover,
button[onclick*="openAdminClassroomComposer"]:hover {
    background-color: #e2e8f0 !important;
}

.announcement-composer-trigger-card button:active,
.announcement-composer-trigger-card .announcement-trigger-input-btn:active,
.announcement-composer-trigger-card #trigger-announcement-composer:active,
#trigger-announcement-composer:active,
button[onclick*="openComposerModal"]:active,
button[onclick*="openClassroomComposer"]:active,
button[onclick*="openAdminClassroomComposer"]:active {
    background-color: #cbd5e1 !important;
}

.sigma-announcement-card:hover {
    box-shadow: var(--sigma-card-shadow-hover) !important;
}

/* Universal Strict Cursor System (Cards default, only interactive elements get pointer) */
#dashboard-metrics-container > div,
#sigma-panels-container > div,
.pocket-cards-rail > div,
.home-dashboard-card,
.home-overview-card,
.pocket-card,
[data-id^="metric-"],
[data-id^="sigma-"] {
    cursor: default !important;
    user-select: auto !important;
}

#dashboard-metrics-container > div:active,
#sigma-panels-container > div:active,
.pocket-cards-rail > div:active,
.home-dashboard-card:active,
.home-overview-card:active,
.pocket-card:active,
[data-id^="metric-"]:active,
[data-id^="sigma-"]:active {
    cursor: default !important;
}

/* Interactive elements inside cards exclusively get pointer */
.pocket-card button,
.pocket-card [role="button"],
.pocket-card .btn,
.pocket-card-pin-btn,
.pocket-rail-header__see-all,
.pocket-rail-header__config-btn,
.pocket-rail-more-btn,
.home-dashboard-card button,
.home-dashboard-card [role="button"],
.home-dashboard-assessment-btn,
.home-dashboard-subject-link,
.home-dashboard-more-btn,
.home-dashboard-activity-link,
.home-dashboard-todo-category button,
#btn-ai-gemini,
#btn-ai-groq,
#btn-period-daily,
#btn-period-monthly {
    cursor: pointer !important;
}

/* Universal Institutional Table Header Green (#15803d) */
.bg-\[\#15803d\],
.bg-admin-primary {
    background-color: #15803d !important;
}

.border-\[\#166534\] {
    border-color: #166534 !important;
}

.border-\[\#15803d\] {
    border-color: #15803d !important;
}

.teacher-topic-page-shell table thead,
.teacher-topic-page-shell table thead tr,
.teacher-topic-page-shell table thead th {
    background-color: #15803d !important;
    background: #15803d !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

/* Universal Table Row Height & Zebra Striping Consistency */
#userTableBody tr,
#schoolYearTableBody tr,
#sectionTableBody tr,
#subjectTableBody tr {
    min-height: 58px;
}

#userTableBody td,
#schoolYearTableBody td,
#sectionTableBody td,
#subjectTableBody td {
    vertical-align: middle;
    height: auto;
}

#sectionTableBody td {
    overflow: visible;
}

/* User Accounts Table: Right borderline strictly on Profile/Name column (3rd column) */
#users-view thead th:nth-child(3),
table:has(#userTableBody) thead th:nth-child(3) {
    border-right: 1px solid #137638 !important;
}

#users-view tbody td:nth-child(3),
#userTableBody td:nth-child(3) {
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

tr.bg-slate-50\/60,
tr.bg-slate-50\/60 td {
    background-color: rgba(248, 250, 252, 0.6) !important;
}

/* Universal Table Empty State Styling */
tr[id$="-empty-state"],
tr#user-empty-state,
tr#school-year-empty-state,
tr#section-empty-state,
tr#subject-empty-state {
    background-color: #ffffff !important;
}

tr[id$="-empty-state"] td,
tr#user-empty-state td,
tr#school-year-empty-state td,
tr#section-empty-state td,
tr#subject-empty-state td {
    background-color: #ffffff !important;
    border: none !important;
    min-height: 360px !important;
}

/* Empty states share one type scale, spacing, and alignment */
.sigma-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 0;
    gap: 0;
}

.sigma-empty-icon,
.sigma-empty-state > i,
[id$="-empty"] > i,
[id$="-empty-state"] td > div > i {
    display: block !important;
    font-size: 2.25rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    color: rgba(0, 0, 0, 0.45) !important;
    position: static !important;
}

.sigma-empty-title,
.sigma-empty-state-black-fade .empty-title,
[id$="-empty"] > p,
[id$="-empty-state"] p:not(.sigma-empty-subtitle) {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.sigma-empty-subtitle,
.sigma-empty-state-black-fade .empty-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: rgba(0, 0, 0, 0.45) !important;
    margin: 6px auto 0 !important;
    padding: 0 !important;
    max-width: 28rem !important;
    position: static !important;
}

/* Universal Home / Dashboard Page Default Background for all roles (Admin, Teacher, Student) */
#section-home,
#section-dashboard,
#dashboard-view {
    background-color: var(--admin-bg, #f8fafc) !important;
}

body:has(#section-home:not(.hidden)),
body:has(#section-dashboard:not(.hidden)),
body:has(#dashboard-view:not(.hidden)) {
    background-color: var(--admin-bg, #f8fafc) !important;
}

/* ==========================================================================
   CANONICAL SHARED PAGINATION SYSTEM
   ========================================================================== */
.sigma-pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
}

@media (min-width: 768px) {
    html body #student-submission-action-area#student-submission-action-area span.select-none {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        line-height: 18px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .sigma-pagination-container {
        gap: 0.5rem;
    }
}

.sigma-quarter-short { display: none; }
[data-release-quarter-toggle],
.sigma-grades-page #admin-grades-quarters-wrapper > div {
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    flex-wrap: nowrap !important;
}
@media (min-width: 769px) {
    [data-release-quarter-toggle] button,
    .sigma-grades-page #admin-grades-quarters-wrapper button {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 768px) {
    .sigma-quarter-long { display: none; }
    .sigma-quarter-short { display: inline; }
    .sigma-grades-page #admin-grades-quarters-wrapper > div {
        display: flex !important;
        width: auto !important;
        padding: 3px !important;
        gap: 3px !important;
    }
    .sigma-grades-page #admin-grades-quarters-wrapper button {
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }
}

/* Shared question navigation across author preview, quiz-taking, and review. */
body :is(#preview-question-pills-strip, #uqp-pills-strip, #sigma-quiz-form-modal .border-b.bg-white.z-10) button {
    border-radius: 50% !important;
    aspect-ratio: 1;
    flex-shrink: 0;
    padding: 0 !important;
}

.sigma-pagination-btn {
    width: 2rem !important; /* 32px */
    height: 2rem !important;
    min-width: 2rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    user-select: none !important;
}

@media (min-width: 768px) {
    .sigma-pagination-btn {
        width: 2.25rem !important; /* 36px */
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        font-size: 0.8125rem !important;
    }
}

/* Inactive Page Number Buttons */
.sigma-pagination-btn--number:not(.is-active) {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.sigma-pagination-btn--number:not(.is-active):hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Active Page Number Button */
.sigma-pagination-btn--number.is-active {
    background-color: #15803d !important;
    border: 1px solid #15803d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.25) !important;
    cursor: default !important;
}

/* Navigation / Arrow Buttons (Prev / Next) */
.sigma-pagination-btn--nav:not(.is-disabled):not(:disabled) {
    background-color: transparent !important;
    border: 0 !important;
    color: #000000 !important;
}

.sigma-pagination-btn--nav:not(.is-disabled):not(:disabled):hover {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
}

.sigma-pagination-btn--nav:not(.is-disabled):not(:disabled):hover i {
    color: #000000 !important;
}

/* Disabled Navigation Buttons */
.sigma-pagination-btn--nav.is-disabled,
.sigma-pagination-btn--nav:disabled {
    background-color: transparent !important;
    border: 0 !important;
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.sigma-pagination-btn--nav.is-disabled i,
.sigma-pagination-btn--nav:disabled i {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   CANONICAL SHARED VIDEO PLAYER & THUMBNAIL STYLES
   ========================================================================== */
.video-thumbnail-panel {
    position: relative !important;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.video-thumbnail-panel img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 0 !important;
    opacity: 0.35 !important;
    filter: brightness(0.9) !important;
    pointer-events: none !important;
}

.video-thumbnail-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 208, 0, 0.18) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 5;
}

@media (min-width: 769px) {
    .video-selection-card,
    button.video-selection-card,
    #section-topic-content .video-selection-card,
    #topic-content-main .video-selection-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 0.875rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        position: relative !important;
        z-index: 1 !important;
        padding: 0.875rem !important;
        transition: none !important;
        text-align: left !important;
        cursor: default !important;
    }

    .video-selection-card:hover,
    button.video-selection-card:hover,
    #section-topic-content .video-selection-card:hover,
    #topic-content-main .video-selection-card:hover,
    .video-selection-card:focus-visible,
    button.video-selection-card:focus-visible {
        z-index: 1 !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        background-color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        transform: none !important;
        outline: none !important;
    }

    .video-thumbnail-panel {
        border-radius: 0.625rem !important;
    }
}

.video-selection-card h4,
.topic-videos-list-container .video-selection-card h4 {
    font-weight: 700 !important;
}

.video-thumbnail-panel {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #0b1120 0%, #1e293b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.video-thumbnail-panel::before {
    display: none !important;
    content: none !important;
}

.video-selection-card .video-thumbnail-panel:hover,
.video-selection-card .video-thumbnail-panel:focus-visible {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.video-play-btn {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.video-selection-card .video-thumbnail-panel:hover .video-play-btn,
.video-selection-card .video-thumbnail-panel:focus-visible .video-play-btn {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(21, 128, 61, 0.35) !important;
    transform: scale(1.08) !important;
}

/* When video is playing, completely disable any yellow glow, borders, overlays, or play button */
.video-thumbnail-panel.is-playing,
.video-thumbnail-panel.is-playing:hover,
.video-thumbnail-panel:has(iframe) {
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.video-thumbnail-panel.is-playing::before,
.video-thumbnail-panel.is-playing:hover::before,
.video-thumbnail-panel:has(iframe)::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
    pointer-events: none !important;
}

.video-thumbnail-panel.is-playing .video-play-btn,
.video-thumbnail-panel.is-playing:hover .video-play-btn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.video-badge-bottom-left,
.video-badge-bottom-right,
.video-badge-time {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    left: auto !important;
    top: auto !important;
    z-index: 20 !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2.5px 7px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    pointer-events: none !important;
}

/* Unified Material Panels (White Panel) */
.sigma-black-fade-panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
}

.sigma-black-fade-panel:hover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}


/* Section titles for Attached Document, Grading Rubric, Attached Quiz, Instructions, etc. */
.material-detail-section-title,
.assessment-material-main-card h3,
.assessment-material-detail-view h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    color: #000000 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

@media (max-width: 639.98px) {
    .material-detail-section-title,
    .assessment-material-main-card h3,
    .assessment-material-detail-view h3 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
}

.sigma-file-panel-meta,
.sigma-black-fade-panel .sigma-file-panel-meta,
.sigma-black-fade-panel p.sigma-file-panel-meta,
.sigma-black-fade-panel p.text-black-fade {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

@media (max-width: 639.98px) {
    .sigma-file-panel-meta,
    .sigma-black-fade-panel .sigma-file-panel-meta,
    .sigma-black-fade-panel p.sigma-file-panel-meta,
    .sigma-black-fade-panel p.text-black-fade {
        font-size: 11px !important;
    }
}

.sigma-black-fade-panel .sigma-file-panel-title.cursor-pointer:hover {
    color: #FFD000 !important;
    -webkit-text-fill-color: #FFD000 !important;
}

.sigma-black-fade-panel h4.cursor-pointer:hover,
#student-answer-files-container h4:hover,
#subject-materials-list h4:hover,
.material-card-title:hover {
    color: #FFD000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.sigma-black-fade-panel h4:not(.sigma-file-panel-title),
.sigma-black-fade-panel h4:not(.sigma-file-panel-title):hover,
.sigma-black-fade-panel a,
.sigma-black-fade-panel a:hover,
.material-card-title,
.material-card-title:hover {
    text-decoration: none !important;
    font-weight: 700 !important;
}

.sigma-black-fade-panel h4:not(.sigma-file-panel-title),
[id^="topic-dropdown-"] .sigma-black-fade-panel h4:not(.sigma-file-panel-title),
[id^="subject-topic-panel-"] h4:not(.sigma-file-panel-title) {
    font-weight: 700 !important;
}

/* Topic panels text remains black on hover */
#subject-topics-list .sigma-black-fade-panel:hover h4,
#subject-topics-list .sigma-black-fade-panel:hover h3,
#subject-topics-list .sigma-black-fade-panel:hover p,
#subject-topics-list .sigma-black-fade-panel:hover span {
    color: inherit;
}

#subject-topics-list .sigma-black-fade-panel:hover h4 {
    color: #000000 !important;
}

/* Curriculum View Scope Search Input Placeholder Black Fade */
#curriculum-scope-search-input::placeholder,
input#curriculum-scope-search-input::placeholder {
    color: rgba(0, 0, 0, 0.40) !important;
    opacity: 1 !important;
}

/* Shared Resubmit Action Buttons (Material & Submission details) */
.assessment-primary-action-slot {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 24px !important;
}

html body .assessment-material-main-card .assessment-primary-action-slot #student-assessment-submit-btn {
    width: min(100%, 260px) !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

@media (max-width: 767px) {
    html body #toggle-ai-assistance-card-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 30px !important;
        height: auto !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        gap: 6px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    html body #toggle-ai-assistance-card-btn i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    html body #section-topic-content .topic-score-sticky.is-collapsed .mobile-score-sheet-body > :not(.desktop-grading-header),
    html body #section-topic-content .topic-score-sticky.is-collapsed > :not(.mobile-score-sheet-body) {
        display: none !important;
    }
    html body #section-topic-content .topic-score-sticky.is-collapsed .desktop-grading-header {
        border-bottom: 0 !important;
        cursor: pointer !important;
    }
    html body #section-topic-content .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap,
    html body #section-topic-content .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap .sigma-user-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    html body #section-topic-content .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap .sigma-user-avatar img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }
    html body #section-topic-content .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap .sigma-user-avatar i {
        font-size: 14px !important;
    }
    html body #student-submission-action-area#student-submission-action-area span.select-none {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
        line-height: 16px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }
    html body #student-submit-form-section {
        padding-top: 18px !important;
    }
    html body #student-answer-drop-prompt {
        padding: 24px 16px !important;
        min-height: 156px !important;
    }
    html body #student-submit-form-section .student-submit-actions {
        border-top: 0 !important;
        margin-top: 16px !important;
        padding-top: 0 !important;
        gap: 10px !important;
        align-items: center !important;
    }
    html body #student-submit-form-section .student-submit-actions button {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    html body #student-submit-form-section .student-submit-actions #student-submit-answer-btn {
        flex: 1;
        width: auto !important;
    }
    html body .assessment-material-main-card .assessment-submission-empty,
    html body .assessment-material-main-card .assessment-submission-empty p {
        text-align: center !important;
    }
    html body .assessment-material-main-card .assessment-submission-empty > div:last-child {
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
    }
    html body .assessment-material-main-card .assessment-primary-action-slot {
        margin-top: 16px !important;
    }
    html body .assessment-material-main-card .assessment-primary-action-slot #student-assessment-submit-btn {
        width: 100% !important;
        font-size: 12px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }
}

.assessment-primary-action-slot:empty {
    display: none;
}

.assessment-detail-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    gap: 4px;
}
.assessment-material-detail-view .shared-private-comments {
    margin-top: 24px;
    padding-top: 0;
}
.assessment-collapse-btn {
    border-radius: 50% !important;
}
.assessment-material-detail-view .material-detail-back-btn {
    border-radius: 50% !important;
    aspect-ratio: 1;
}
@media (max-width: 767px) {
    html body.mobile-panel-open .topic-score-sticky,
    html body.mobile-account-fullscreen .topic-score-sticky,
    html body.mobile-panel-open #mobile-score-sheet-backdrop,
    html body.mobile-account-fullscreen #mobile-score-sheet-backdrop {
        display: none !important;
    }
    html body #submission-ai-error {
        font-size: 11px !important;
        line-height: 16px !important;
    }
    html body .assessment-material-main-card .material-detail-back-btn {
        margin-top: -3.2px !important;
        align-self: flex-start;
    }
}
.assessment-detail-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 20px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
}
.assessment-detail-tabs button[aria-selected="true"] {
    color: #000;
    font-weight: 600;
    background: #fff;
}
.assessment-detail-tabs button[aria-selected="false"]:hover {
    background-color: #e2e8f0;
    color: rgba(0, 0, 0, 0.45);
}
.assessment-material-detail-view [hidden] {
    display: none !important;
}
.assessment-primary-action-slot > #student-submission-action-area,
.assessment-primary-action-slot > #teacher-submission-action-area {
    width: 100%;
}
.assessment-material-detail-view .sigma-attached-file-panel:has(.sigma-file-panel-title):not(:has(.sigma-quiz-panel)) {
    border-radius: 16px !important;
}
.assessment-material-detail-view .sigma-compact-document-row {
    padding: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    gap: 12px !important;
}
.assessment-primary-action-slot > :is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area) {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.assessment-primary-action-slot[hidden] { display: none !important; }
.assessment-material-detail-view :is(#attached-quiz-resource-section, .assessment-rubric-section) {
    border-top: 0 !important;
}
.assessment-material-detail-view .sigma-compact-document-row .material-panel-icon-group {
    width: 48px !important;
}
.assessment-material-detail-view .sigma-compact-document-row .material-panel-icon-group > div {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
}
.assessment-material-detail-view .sigma-compact-document-row .sigma-file-panel-title {
    font-size: 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    letter-spacing: 0;
}
@media (max-width: 767px) {
    .assessment-detail-tabs {
        gap: 3px;
        padding: 3px;
        border-radius: 10px;
    }
    .assessment-detail-tabs button {
        flex: 0 1 auto;
        position: relative;
        min-width: 0;
        padding: 7px 12px;
        min-height: 36px;
        border-radius: 7px;
        text-align: center;
        font-size: 12px;
        border-bottom: 0;
    }
    .assessment-detail-tabs .assessment-detail-tab-label {
        display: inline-block;
        position: static;
    }
    .assessment-detail-tabs button[aria-selected="true"] .assessment-detail-tab-label::after {
        content: none;
    }
}

.assessment-primary-action-slot .assessment-relocated-primary-action {
    width: min(100%, 320px) !important;
    min-height: 44px;
    justify-content: center;
}

@media (max-width: 768px) {
    .assessment-primary-action-slot {
        margin-top: 14px !important;
    }

    .assessment-primary-action-slot .assessment-relocated-primary-action,
    .assessment-primary-action-slot #student-assessment-submit-btn,
    .assessment-primary-action-slot button,
    .assessment-material-main-card #student-assessment-submit-btn,
    .assessment-material-main-card #student-submit-answer-btn,
    .assessment-material-main-card .assessment-primary-action-slot .sigma-btn {
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 14px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .assessment-primary-action-slot .assessment-relocated-primary-action i,
    .assessment-primary-action-slot #student-assessment-submit-btn i,
    .assessment-primary-action-slot button i,
    .assessment-material-main-card #student-assessment-submit-btn i,
    .assessment-material-main-card #student-submit-answer-btn i,
    .assessment-material-main-card .assessment-primary-action-slot .sigma-btn i {
        font-size: 11px !important;
    }
}

.sigma-resubmit-action-btn {
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

.sigma-resubmit-action-btn--allow {
    color: #15803d !important;
}

.sigma-resubmit-action-btn--allow:hover,
.sigma-resubmit-action-btn--allow:focus,
.sigma-resubmit-action-btn--allow:active {
    color: #166534 !important;
    background: #e5e7eb !important;
    text-decoration: none !important;
}

.sigma-resubmit-action-btn--revoke {
    color: #dc2626 !important;
}

.sigma-resubmit-action-btn--revoke:hover,
.sigma-resubmit-action-btn--revoke:focus,
.sigma-resubmit-action-btn--revoke:active {
    color: #b91c1c !important;
    background: #e5e7eb !important;
    text-decoration: none !important;
}

/* Material & Topic Three Dots Kebab Button */
.mat-kebab-btn {
    color: #000000 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease !important;
}

.mat-kebab-btn i {
    color: #000000 !important;
    transition: color 0.15s ease !important;
}

.mat-kebab-btn:hover,
.mat-kebab-btn:hover i,
.mat-kebab-btn.is-active,
.mat-kebab-btn.is-active i {
    color: #FFD000 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Shared Kebab Dropdown Menu */
.shared-kebab-menu {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    z-index: 100 !important;
}

.shared-kebab-menu button {
    border: none !important;
    outline: none !important;
}

/* Topic Top Bar Right Quick Action Buttons (Green Icon, Balanced Size & Spacing) */
.topic-tab-action-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #15803d !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.topic-tab-action-btn:hover {
    background-color: #f1f5f9 !important;
    color: #15803d !important;
}

.topic-tab-action-btn i {
    font-size: 14px !important;
    color: #15803d !important;
    line-height: 1 !important;
}

/* ==========================================================================
   Shared Dashed Interactive Panels & Buttons (Neutral Default, Yellow on Hover)
   ========================================================================== */
.sigma-dashed-yellow-slot,
.sigma-add-topic-dashed-btn,
.sigma-dashed-dropzone {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border: 2px dashed rgba(0, 0, 0, 0.18) !important;
    color: #000000 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
    transform: none !important;
}

.sigma-dashed-yellow-slot:hover,
.sigma-add-topic-dashed-btn:hover,
.sigma-dashed-dropzone:hover {
    background-color: rgba(255, 208, 0, 0.06) !important;
    border-color: #FFD000 !important;
    transform: none !important;
}

.sigma-add-topic-dashed-btn:hover,
.sigma-add-topic-dashed-btn:hover span,
.sigma-add-topic-dashed-btn:hover i,
.sigma-dashed-yellow-slot:hover,
.sigma-dashed-yellow-slot:hover p,
.sigma-dashed-yellow-slot:hover span,
.sigma-dashed-yellow-slot:hover i,
.sigma-dashed-dropzone:hover,
.sigma-dashed-dropzone:hover p,
.sigma-dashed-dropzone:hover span,
.sigma-dashed-dropzone:hover h4,
.sigma-dashed-dropzone:hover h3,
.sigma-dashed-dropzone:hover label,
.sigma-dashed-dropzone:hover .text-black,
.sigma-dashed-dropzone:hover .text-black-fade {
    color: #b45309 !important;
}

.sigma-dashed-dropzone:hover p.text-xs,
.sigma-dashed-dropzone:hover span.text-xs,
.sigma-dashed-dropzone:hover .text-black-fade {
    color: #d97706 !important;
}

.sigma-dashed-dropzone p,
.sigma-dashed-dropzone span,
.sigma-dashed-dropzone h4,
.sigma-dashed-dropzone h3,
.sigma-dashed-dropzone label {
    transition: color 0.2s ease !important;
}

@media (max-width: 767px) {
    html body .sigma-dashed-dropzone {
        background-color: rgba(255, 208, 0, 0.06) !important;
        border-color: #FFD000 !important;
        color: #b45309 !important;
    }
    html body .sigma-dashed-dropzone :is(p, span, h3, h4, label, .text-black, .text-black-fade) {
        color: #b45309 !important;
    }
    html body .sigma-dashed-dropzone :is(p.text-xs, span.text-xs, .text-black-fade) {
        color: #d97706 !important;
    }
    html body .sigma-dashed-dropzone :is(.sigma-dropzone-icon-box, .sigma-question-upload-icon) {
        background-color: rgba(255, 208, 0, 0.14) !important;
        border-color: #FFD000 !important;
    }
    html body .sigma-dashed-dropzone :is(i, svg) {
        color: #92400e !important;
    }
}

.sigma-question-upload {
    padding: 20px 16px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
}
.sigma-question-upload .sigma-question-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sigma-question-upload-icon i { font-size: 16px; }
.sigma-question-upload-title { font-size: 14px; font-weight: 600; line-height: 20px; margin: 0; }
.sigma-question-upload-meta { font-size: 11px; line-height: 16px; margin: 4px 0 0; }
.sigma-question-file { padding: 14px !important; border-radius: 8px !important; gap: 8px; }
.sigma-question-file > div:first-child { flex: 1; }
.sigma-question-file > div:first-child > div:first-child { width: 48px !important; }
.sigma-question-file [id$="-file-icon-wrap"] { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
.sigma-question-file [id$="-file-icon"] { font-size: 16px !important; }
.sigma-question-file [id$="-file-badge"] { font-size: 9px !important; padding: 2px 5px !important; border-radius: 4px !important; }
.sigma-question-file .sigma-file-panel-title { font-size: 14px !important; line-height: 20px !important; }
.sigma-question-file .sigma-file-panel-meta { font-size: 11px !important; line-height: 16px !important; }
.sigma-question-upload.is-dragging,
.sigma-question-upload:focus-visible {
    background-color: rgba(255, 208, 0, 0.06) !important;
    border-color: #FFD000 !important;
    outline: 2px solid #FFD000;
    outline-offset: 2px;
}

.sigma-dropzone-icon-box {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--black-fade, rgba(0, 0, 0, 0.40)) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.sigma-dropzone-icon-box.sigma-icon-blue,
.sigma-dropzone-icon-box.sigma-icon-indigo,
.sigma-dropzone-icon-box.sigma-icon-amber,
.sigma-dropzone-icon-box.sigma-icon-emerald,
.sigma-dropzone-icon-box i,
.sigma-dropzone-icon-box svg {
    color: var(--black-fade, rgba(0, 0, 0, 0.40)) !important;
}

.sigma-dashed-dropzone:hover .sigma-dropzone-icon-box {
    background-color: #FEF3C7 !important;
    border-color: #FFD000 !important;
    color: #92400e !important;
    transform: scale(1.06) !important;
}

.sigma-dashed-dropzone:hover .sigma-dropzone-icon-box *,
.sigma-dashed-dropzone:hover .sigma-dropzone-icon-box i,
.sigma-dashed-dropzone:hover .sigma-dropzone-icon-box svg,
.sigma-dashed-dropzone:hover > i,
.sigma-dashed-dropzone:hover > svg {
    color: #92400e !important;
}

/* SortableJS Visual Feedback */
.sortable-ghost {
    background-color: #f1f5f9 !important;
    border: 2px dashed #94a3b8 !important;
    border-radius: 1rem !important;
    opacity: 0.45 !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.sortable-ghost * {
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.sortable-drag,
.sortable-fallback {
    display: flex !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.22), 0 10px 15px -5px rgba(0, 0, 0, 0.12) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    cursor: grabbing !important;
    transition: none !important;
    animation: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.sortable-drag *,
.sortable-fallback * {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Prevent text highlight / selection during drag reorder */
#subject-topics-list,
#subject-topics-list *,
.sigma-black-fade-panel,
.sigma-black-fade-panel *,
.sortable-chosen,
.sortable-chosen *,
body.sorting-subject-topics,
body.sorting-subject-topics * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#subject-add-topic-header-btn,
#add-material-trigger {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

#add-material-trigger.is-active {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #000000 !important;
}

#add-material-trigger.is-active i,
#add-material-trigger.is-active span,
#add-material-trigger.is-active * {
    color: #000000 !important;
}


/* Universal FontAwesome Weight Normalization */
.fa-regular,
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* ==========================================================================
   UNIVERSAL INTERACTIVE METRIC CARDS (Shared Liquid Tracker & Spotlight)
   Used across Sections, User Accounts, and Subjects
   ========================================================================== */
@keyframes liquidWander1 {
    0% {
        transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1.1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    20% {
        transform: translate(-50%, -50%) translate(55px, -40px) rotate(72deg) scale(1.35);
        border-radius: 65% 35% 50% 50% / 30% 60% 40% 70%;
    }
    40% {
        transform: translate(-50%, -50%) translate(-50px, 45px) rotate(144deg) scale(1.05);
        border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
    }
    60% {
        transform: translate(-50%, -50%) translate(45px, 35px) rotate(216deg) scale(1.4);
        border-radius: 70% 30% 60% 40% / 50% 70% 30% 50%;
    }
    80% {
        transform: translate(-50%, -50%) translate(-40px, -35px) rotate(288deg) scale(1.15);
        border-radius: 50% 50% 30% 70% / 40% 60% 50% 60%;
    }
    100% {
        transform: translate(-50%, -50%) translate(0px, 0px) rotate(360deg) scale(1.1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
}

@keyframes liquidWander2 {
    0% {
        transform: translate(-50%, -50%) translate(0px, 0px) rotate(360deg) scale(1.3);
        border-radius: 55% 45% 40% 60% / 60% 35% 65% 40%;
    }
    25% {
        transform: translate(-50%, -50%) translate(-55px, -40px) rotate(270deg) scale(1.05);
        border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%;
    }
    50% {
        transform: translate(-50%, -50%) translate(60px, 25px) rotate(180deg) scale(1.38);
        border-radius: 65% 35% 30% 70% / 70% 30% 70% 30%;
    }
    75% {
        transform: translate(-50%, -50%) translate(-30px, 50px) rotate(90deg) scale(1.12);
        border-radius: 35% 65% 55% 45% / 50% 60% 40% 50%;
    }
    100% {
        transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1.3);
        border-radius: 55% 45% 40% 60% / 60% 35% 65% 40%;
    }
}

.sigma-interactive-metric-card,
.sigma-section-metric-card {
    position: relative !important;
    overflow: hidden !important;
    background-color: #edf7ee !important;
    background-image: linear-gradient(145deg, rgba(21, 128, 61, 0.08) 0%, rgba(255, 255, 255, 0.70) 100%) !important;
    border: 1px solid rgba(21, 128, 61, 0.22) !important;
    border-left: 4px solid #15803d !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 24px -4px rgba(21, 128, 61, 0.12) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
}

/* Layer 1: Vibrant fresh green with warm sunlit amber/yellow blend (friendly, organic, visibly green without being dark) */
.sigma-interactive-metric-card::before,
.sigma-section-metric-card::before {
    content: '' !important;
    position: absolute !important;
    top: var(--mouse-y, -999px) !important;
    left: var(--mouse-x, -999px) !important;
    width: 380px !important;
    height: 380px !important;
    background: radial-gradient(circle at 50% 50%,
        rgba(34, 197, 94, 0.65) 0%,     /* Crisp vibrant green core (#22c55e) */
        rgba(74, 222, 128, 0.58) 28%,   /* Bright friendly leaf green (#4ade80) */
        rgba(163, 230, 53, 0.45) 52%,   /* Warm sunlit lime-green bridge (#a3e635) */
        rgba(250, 204, 21, 0.32) 72%,   /* Warm golden yellow glow (#facc15) */
        rgba(255, 255, 255, 0.65) 86%,  /* Clean soft white rim */
        transparent 96%
    ) !important;
    pointer-events: none !important;
    opacity: var(--mouse-opacity, 0) !important;
    filter: blur(22px) !important;
    animation: liquidWander1 7.0s ease-in-out infinite !important;
    transition: opacity 0.35s ease !important;
    z-index: 0 !important;
}

/* Layer 2: Counter-wandering luminous green with warm amber wave */
.sigma-interactive-metric-card::after,
.sigma-section-metric-card::after {
    content: '' !important;
    position: absolute !important;
    top: var(--mouse-y, -999px) !important;
    left: var(--mouse-x, -999px) !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle at 50% 50%,
        rgba(74, 222, 128, 0.68) 0%,    /* Bright energetic spring green (#4ade80) */
        rgba(34, 197, 94, 0.54) 30%,    /* Clear true green body (#22c55e - not dark!) */
        rgba(190, 242, 100, 0.42) 55%,  /* Luminous apple green (#bef264) */
        rgba(234, 179, 8, 0.28) 70%,    /* Warm sunlit amber tone (#eab308) */
        rgba(255, 255, 255, 0.60) 86%,  /* Soft luminous rim */
        transparent 96%
    ) !important;
    pointer-events: none !important;
    opacity: var(--mouse-opacity, 0) !important;
    filter: blur(24px) !important;
    animation: liquidWander2 6.2s ease-in-out infinite !important;
    transition: opacity 0.35s ease !important;
    z-index: 0 !important;
}

.sigma-interactive-metric-card > *,
.sigma-section-metric-card > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Base text styles */
.sigma-interactive-metric-card span,
.sigma-section-metric-card span {
    transition: color 0.15s ease, text-shadow 0.2s ease !important;
}

/* Spotlit text under the tracker - dynamic white text with elegant shade */
.sigma-interactive-metric-card .metric-text-content,
.sigma-section-metric-card .metric-text-content {
    position: relative;
}

/* Duplicate overlay text that gets revealed in white strictly within the tracker area */
.sigma-interactive-metric-card .metric-text-spotlight,
.sigma-section-metric-card .metric-text-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(21, 128, 61, 0.50);
    opacity: var(--mouse-opacity, 0);
    -webkit-mask-image: radial-gradient(circle 160px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, black 55%, transparent 100%);
    mask-image: radial-gradient(circle 160px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, black 55%, transparent 100%);
    transition: opacity 0.25s ease;
    z-index: 2;
}

.sigma-interactive-metric-card .metric-text-spotlight *,
.sigma-section-metric-card .metric-text-spotlight * {
    color: #ffffff !important;
}

.sigma-interactive-metric-card #sy-bar-year,
.sigma-interactive-metric-card #sy-bar-quarter,
.sigma-section-metric-card #sy-bar-year,
.sigma-section-metric-card #sy-bar-quarter {
    color: #0f172a !important;
}

.sigma-interactive-metric-card .metric-text-spotlight #sy-bar-year-spotlight,
.sigma-interactive-metric-card .metric-text-spotlight #sy-bar-quarter-spotlight,
.sigma-interactive-metric-card .metric-text-spotlight #sy-bar-dates-spotlight,
.sigma-interactive-metric-card .metric-text-spotlight #sy-bar-dates-spotlight * {
    color: #ffffff !important;
}

.sigma-interactive-metric-card.flex-1 .metric-text-spotlight {
    -webkit-mask-image: radial-gradient(circle 260px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, black 60%, transparent 100%) !important;
    mask-image: radial-gradient(circle 260px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, black 60%, transparent 100%) !important;
}

.sigma-interactive-metric-card:hover,
.sigma-section-metric-card:hover {
    background-color: #f0fdf4 !important;
    border-color: rgba(34, 197, 94, 0.40) !important;
    border-left-color: #16a34a !important;
    box-shadow: 
        0 12px 28px -4px rgba(0, 0, 0, 0.09),
        0 4px 10px rgba(0, 0, 0, 0.05),
        0 14px 30px -3px rgba(21, 128, 61, 0.22) !important;
    transform: translateY(-3px) !important;
}

.sigma-interactive-metric-card .metric-icon-box,
.sigma-section-metric-card .metric-icon-box {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    overflow: hidden !important;
}

/* Friendly soft radiant aura inside icon box */
.sigma-interactive-metric-card .metric-icon-box::before,
.sigma-section-metric-card .metric-icon-box::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    background: radial-gradient(circle at center, rgba(187, 247, 208, 0.60) 0%, rgba(254, 240, 138, 0.35) 50%, transparent 80%) !important;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

/* Base icon glyph - clean crisp black */
.sigma-interactive-metric-card .metric-icon-box .metric-icon-base,
.sigma-section-metric-card .metric-icon-box .metric-icon-base {
    position: relative !important;
    z-index: 2 !important;
    color: #0f172a !important; /* Bold solid black */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease !important;
}

/* Spotlight white icon - revealed dynamically only when tracking fluid passes by */
.sigma-interactive-metric-card .metric-icon-box .metric-icon-spotlight,
.sigma-section-metric-card .metric-icon-box .metric-icon-spotlight {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px rgba(21, 128, 61, 0.7)) !important;
    opacity: var(--mouse-opacity, 0);
    -webkit-mask-image: radial-gradient(circle 120px at var(--icon-mouse-x, -999px) var(--icon-mouse-y, -999px), black 0%, black 50%, transparent 100%);
    mask-image: radial-gradient(circle 120px at var(--icon-mouse-x, -999px) var(--icon-mouse-y, -999px), black 0%, black 50%, transparent 100%);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    pointer-events: none !important;
}

/* When hovered, clean crisp white box with cheerful mint-gold aura */
.sigma-interactive-metric-card:hover .metric-icon-box,
.sigma-section-metric-card:hover .metric-icon-box {
    background: #ffffff !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    box-shadow: 
        0 6px 16px -2px rgba(34, 197, 94, 0.22),
        0 0 12px 2px rgba(254, 240, 138, 0.35) !important;
}

.sigma-interactive-metric-card:hover .metric-icon-box::before,
.sigma-section-metric-card:hover .metric-icon-box::before {
    opacity: 1 !important;
    transform: rotate(45deg) scale(1.15) !important;
}

.sigma-interactive-metric-card:hover .metric-icon-box .metric-icon-base,
.sigma-interactive-metric-card:hover .metric-icon-box .metric-icon-spotlight,
.sigma-section-metric-card:hover .metric-icon-box .metric-icon-base,
.sigma-section-metric-card:hover .metric-icon-box .metric-icon-spotlight {
    transform: scale(1.15);
}

/* --- CANONICAL SHARED INTERACTIVE SCHOOL YEAR HERO BANNER --- */
.sigma-interactive-sy-banner {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.35) !important;
    box-shadow: 0 10px 25px -5px rgba(21, 128, 61, 0.35), 0 8px 10px -6px rgba(21, 128, 61, 0.25) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.sigma-interactive-sy-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(134, 239, 172, 0.55) !important;
    box-shadow: 0 16px 32px -6px rgba(21, 128, 61, 0.45), 0 0 20px 2px rgba(74, 222, 128, 0.25) !important;
}

/* Layer 1: Radiant emerald & sunlit lime fluid sweep across the banner */
.sigma-interactive-sy-banner::before {
    content: '' !important;
    position: absolute !important;
    top: var(--mouse-y, -999px) !important;
    left: var(--mouse-x, -999px) !important;
    width: 480px !important;
    height: 480px !important;
    background: radial-gradient(circle at 50% 50%,
        rgba(74, 222, 128, 0.65) 0%,     /* Radiant spring green (#4ade80) */
        rgba(163, 230, 53, 0.48) 32%,    /* Sunlit lime (#a3e635) */
        rgba(250, 204, 21, 0.32) 58%,    /* Warm golden amber (#facc15) */
        rgba(255, 255, 255, 0.60) 78%,   /* Luminous aurora rim */
        transparent 95%
    ) !important;
    pointer-events: none !important;
    opacity: var(--mouse-opacity, 0) !important;
    filter: blur(28px) !important;
    animation: liquidWander1 7.0s ease-in-out infinite !important;
    transition: opacity 0.35s ease !important;
    z-index: 0 !important;
}

/* Layer 2: Counter-wandering rich emerald & warm amber aurora wave */
.sigma-interactive-sy-banner::after {
    content: '' !important;
    position: absolute !important;
    top: var(--mouse-y, -999px) !important;
    left: var(--mouse-x, -999px) !important;
    width: 440px !important;
    height: 440px !important;
    background: radial-gradient(circle at 50% 50%,
        rgba(34, 197, 94, 0.70) 0%,     /* Vivid deep leaf green (#22c55e) */
        rgba(74, 222, 128, 0.52) 34%,   /* Fresh lively green (#4ade80) */
        rgba(234, 179, 8, 0.28) 64%,    /* Warm sunlit amber (#eab308) */
        rgba(255, 255, 255, 0.55) 84%,  /* Soft luminous rim */
        transparent 96%
    ) !important;
    pointer-events: none !important;
    opacity: var(--mouse-opacity, 0) !important;
    filter: blur(30px) !important;
    animation: liquidWander2 6.2s ease-in-out infinite !important;
    transition: opacity 0.35s ease !important;
    z-index: 0 !important;
}

.sigma-interactive-sy-banner > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Backlit text glow under the fluid tracker */
.sigma-interactive-sy-banner:hover #sy-bar-year,
.sigma-interactive-sy-banner:hover #sy-bar-quarter {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.40), 0 0 24px rgba(134, 239, 172, 0.70);
    transition: text-shadow 0.3s ease;
}

/* --- CANONICAL SHARED GRADEBOOK SELECTION & INTERACTION SYSTEM --- */
.gb-row-selected td:not(.gb-empty-cell),
#gradebook-outer-spreadsheet .gb-row-selected td:not(.gb-empty-cell),
#gradebook-spreadsheet .gb-col-selected,
#gradebook-outer-spreadsheet .gb-col-selected,
.gb-row-selected .gb-student-cell,
#gradebook-outer-spreadsheet .gb-row-selected .gb-student-cell {
    background-color: #fefce8 !important; /* Soft Yellow Tint */
}

/* When selected, only the student name turns pure yellow */
.gradebook-student-name {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.25;
}

.gb-row-selected .gradebook-student-name,
#gradebook-outer-spreadsheet .gb-row-selected .gradebook-student-name {
    color: #FFD000 !important; /* ICC Pure Yellow */
}

.gradebook-student-id,
.gb-student-cell .gradebook-student-id,
.gb-student-cell p:last-child,
#gradebook-spreadsheet .gradebook-student-id,
#admin-gradebook-spreadsheet .gradebook-student-id,
#gradebook-outer-spreadsheet .gradebook-student-id,
.gb-row-selected .gradebook-student-id,
#gradebook-outer-spreadsheet .gb-row-selected .gradebook-student-id {
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   CANONICAL SHARED GRADEBOOK TABLE SPECIFICATION (Admin & Teacher Portals)
   ========================================================================== */
#gradebook-spreadsheet,
#gradebook-outer-spreadsheet,
#admin-gradebook-spreadsheet {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border: none !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#gradebook-spreadsheet th,
#gradebook-spreadsheet td,
#gradebook-spreadsheet tr,
#gradebook-spreadsheet p,
#gradebook-spreadsheet span,
#gradebook-spreadsheet div,
#gradebook-outer-spreadsheet th,
#gradebook-outer-spreadsheet td,
#gradebook-outer-spreadsheet tr,
#gradebook-outer-spreadsheet p,
#gradebook-outer-spreadsheet span,
#gradebook-outer-spreadsheet div,
#admin-gradebook-spreadsheet th,
#admin-gradebook-spreadsheet td,
#admin-gradebook-spreadsheet tr,
#admin-gradebook-spreadsheet p,
#admin-gradebook-spreadsheet span,
#admin-gradebook-spreadsheet div {
    box-sizing: border-box !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#gradebook-spreadsheet ::selection,
#gradebook-outer-spreadsheet ::selection,
#admin-gradebook-spreadsheet ::selection {
    background: transparent !important;
    color: inherit !important;
}

#gradebook-spreadsheet input,
#gradebook-outer-spreadsheet input,
#admin-gradebook-spreadsheet input {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

#gradebook-spreadsheet thead th,
#gradebook-outer-spreadsheet thead th,
#admin-gradebook-spreadsheet thead th {
    background-color: #15803d !important;
    border-right: 1px solid #137638 !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 0 !important;
    color: #ffffff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    cursor: default !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

#gradebook-spreadsheet thead th:last-child,
#gradebook-outer-spreadsheet thead th:last-child,
#admin-gradebook-spreadsheet thead th:last-child {
    border-right: none !important;
}

#gradebook-spreadsheet thead th button,
#admin-gradebook-spreadsheet thead th button,
#gradebook-spreadsheet thead th .cursor-pointer,
#admin-gradebook-spreadsheet thead th .cursor-pointer,
#gradebook-spreadsheet thead th button *,
#admin-gradebook-spreadsheet thead th button *,
#gradebook-spreadsheet thead th .cursor-pointer *,
#admin-gradebook-spreadsheet thead th .cursor-pointer * {
    cursor: pointer !important;
}

#gradebook-spreadsheet thead th:first-child,
#gradebook-spreadsheet tbody td.gb-student-cell,
#gradebook-spreadsheet tbody td:first-child,
#admin-gradebook-spreadsheet thead th:first-child,
#admin-gradebook-spreadsheet tbody td.gb-student-cell,
#admin-gradebook-spreadsheet tbody td:first-child {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    box-sizing: border-box !important;
    border-left: none !important;
    position: sticky !important;
    left: 0 !important;
    background-color: #ffffff !important;
    cursor: default !important;
}

#gradebook-spreadsheet thead th:first-child,
#admin-gradebook-spreadsheet thead th:first-child {
    z-index: 40 !important;
    background-color: #15803d !important;
    border-right: 1px solid #137638 !important;
}

#gradebook-spreadsheet tbody td.gb-student-cell,
#gradebook-spreadsheet tbody td:first-child,
#admin-gradebook-spreadsheet tbody td.gb-student-cell,
#admin-gradebook-spreadsheet tbody td:first-child {
    z-index: 10 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#gradebook-spreadsheet thead th.gb-col-divider,
#gradebook-outer-spreadsheet thead th.gb-col-divider,
#admin-gradebook-spreadsheet thead th.gb-col-divider {
    border-right: 1px solid #137638 !important;
}

#gradebook-spreadsheet tbody td,
#admin-gradebook-spreadsheet tbody td {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: default !important;
    transition: background-color 0.15s ease !important;
    box-sizing: border-box !important;
}

#gradebook-spreadsheet tbody td.gb-col-divider,
#gradebook-outer-spreadsheet tbody td.gb-col-divider,
#admin-gradebook-spreadsheet tbody td.gb-col-divider {
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#gradebook-spreadsheet tbody tr,
#admin-gradebook-spreadsheet tbody tr {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: default !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

#gradebook-spreadsheet thead tr,
#admin-gradebook-spreadsheet thead tr {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
}

#gradebook-spreadsheet tbody td.gb-student-cell,
#admin-gradebook-spreadsheet tbody td.gb-student-cell {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
}

#gradebook-spreadsheet tbody tr:hover,
#admin-gradebook-spreadsheet tbody tr:hover {
    background-color: transparent !important;
}

/* Single 1-Cell Box Grey Highlight on Hover */
#gradebook-spreadsheet tbody td:hover,
#admin-gradebook-spreadsheet tbody td:hover {
    background-color: #f1f5f9 !important;
}

#gradebook-spreadsheet tbody td.gb-summary-green,
#admin-gradebook-spreadsheet tbody td.gb-summary-green,
#teacher-grades-modal-tbody td.gb-summary-green,
#admin-grades-modal-tbody td.gb-summary-green,
.teacher-grade-row td.gb-summary-green {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

#gradebook-spreadsheet tbody tr:hover td.gb-summary-green,
#admin-gradebook-spreadsheet tbody tr:hover td.gb-summary-green,
#gradebook-spreadsheet tbody td.gb-summary-green:hover,
#admin-gradebook-spreadsheet tbody td.gb-summary-green:hover,
#teacher-grades-modal-tbody tr:hover td.gb-summary-green,
#admin-grades-modal-tbody tr:hover td.gb-summary-green,
.teacher-grade-row:hover td.gb-summary-green,
#teacher-grades-modal-tbody td.gb-summary-green:hover,
#admin-grades-modal-tbody td.gb-summary-green:hover,
.teacher-grade-row td.gb-summary-green:hover {
    background-color: rgba(16, 185, 129, 0.16) !important;
}

/* Classroom Grades Modal Student Profile Icon */
#admin-grades-modal-tbody .classroom-grades-avatar-wrap,
#teacher-grades-modal-tbody .classroom-grades-avatar-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#admin-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar,
#teacher-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 9999px !important;
}

#admin-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar i,
#teacher-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar i {
    font-size: 13px !important;
}

@media (max-width: 480px) {
    #admin-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar,
    #teacher-grades-modal-tbody .classroom-grades-avatar-wrap .sigma-user-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

#gradebook-spreadsheet tbody td.gb-summary-yellow,
#admin-gradebook-spreadsheet tbody td.gb-summary-yellow {
    background-color: rgba(254, 240, 138, 0.35) !important;
}

#gradebook-spreadsheet tbody td.gb-summary-yellow:hover,
#admin-gradebook-spreadsheet tbody td.gb-summary-yellow:hover {
    background-color: rgba(254, 240, 138, 0.55) !important;
}

#gradebook-spreadsheet tbody td.gb-student-cell:hover,
#admin-gradebook-spreadsheet tbody td.gb-student-cell:hover {
    background-color: #f8fafc !important;
}

/* Neutralize all hovers, borders, and footer lines for Empty State in Gradebook */
#gradebook-spreadsheet tr.empty-state-row,
#gradebook-spreadsheet tr.empty-state-row:hover,
#gradebook-spreadsheet tr.empty-state-row td,
#gradebook-spreadsheet tr.empty-state-row td:hover,
#admin-gradebook-spreadsheet tr.empty-state-row,
#admin-gradebook-spreadsheet tr.empty-state-row:hover,
#admin-gradebook-spreadsheet tr.empty-state-row td,
#admin-gradebook-spreadsheet tr.empty-state-row td:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Canonical Gradebook Table: Unclickable Institutional View (cursor: default) */
#gradebook-spreadsheet tbody td.gb-student-cell,
#admin-gradebook-spreadsheet tbody td.gb-student-cell,
#gradebook-spreadsheet tbody td:first-child,
#admin-gradebook-spreadsheet tbody td:first-child,
.gb-student-cell,
.gb-student-cell * {
    cursor: default !important;
}

#gradebook-spreadsheet tbody td,
#admin-gradebook-spreadsheet tbody td {
    cursor: default !important;
}

#gradebook-spreadsheet input[type="number"],
#gradebook-outer-spreadsheet input[type="number"] {
    cursor: text !important;
}

#gradebook-spreadsheet button,
#gradebook-outer-spreadsheet button,
#gradebook-spreadsheet a,
#gradebook-outer-spreadsheet a {
    cursor: pointer !important;
}

#gradebook-spreadsheet-container:active:not(:has(td:first-child:hover)),
#gradebook-outer-spreadsheet-container:active:not(:has(td:first-child:hover)),
body.gradebook-is-dragging,
body.gradebook-is-dragging * {
    cursor: grabbing !important;
}

/* Universal Gradebook Dash & Placeholder (Black Fade) */
.gradebook-dash,
span.gradebook-dash,
#gradebook-spreadsheet .gradebook-dash,
#gradebook-outer-spreadsheet .gradebook-dash,
#admin-gradebook-spreadsheet .gradebook-dash,
#gradebook-spreadsheet td:has(.gradebook-dash),
#gradebook-outer-spreadsheet td:has(.gradebook-dash),
#admin-gradebook-spreadsheet td:has(.gradebook-dash),
.gb-data-cell .gradebook-dash,
td:has(.gradebook-dash) {
    color: rgba(0, 0, 0, 0.40) !important;
    font-weight: 500 !important;
}

#gradebook-spreadsheet input::placeholder,
#gradebook-outer-spreadsheet input::placeholder,
#admin-gradebook-spreadsheet input::placeholder {
    color: rgba(0, 0, 0, 0.40) !important;
    font-weight: 500 !important;
    opacity: 1;
}

/* Gradebook Sort & Nav Header Buttons (Highlight on Hover) */
.gradebook-sort-btn,
.gradebook-nav-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gradebook-sort-btn:hover,
.gradebook-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.gradebook-sort-btn:focus,
.gradebook-sort-btn:focus-visible,
.gradebook-sort-btn:active,
.gradebook-nav-btn:focus,
.gradebook-nav-btn:focus-visible,
.gradebook-nav-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.gradebook-sort-btn.active,
.gradebook-sort-btn[data-popover-open="true"] {
    background-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Gradebook Round Back Button (Highlight on Hover Only, No Animations) */
.gradebook-back-btn {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background-color: transparent !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    user-select: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.gradebook-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
}

.gradebook-back-btn:active {
    background-color: rgba(255, 255, 255, 0.40) !important;
    color: #ffffff !important;
}

.gradebook-back-btn i {
    color: #ffffff !important;
    font-size: 10px !important;
    pointer-events: none;
    transform: none !important;
}

/* ═══ Gradebook Assessment Columns Thin Pagination & Fixed Layout ═══ */
.gb-thin-nav-col {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.gb-thin-nav-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: transparent;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.gb-thin-nav-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.38) !important;
}

.gb-thin-nav-btn:disabled,
.gb-thin-nav-btn[disabled],
.gb-thin-nav-btn.disabled {
    opacity: 0.20 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.gb-thin-nav-btn i {
    font-size: 9px !important;
    color: #ffffff !important;
    pointer-events: none;
}

.gradebook-task-header-cell {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.gradebook-task-cell {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.gradebook-task-title {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer !important;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.gradebook-task-title:hover {
    color: #FFD000 !important;
    text-decoration: none !important;
}

/* ═══ Option 1: Gradebook Active Crosshair Row & Student Cell Highlight ═══ */
#admin-gradebook-spreadsheet tbody tr.gb-row-active,
#gradebook-spreadsheet tbody tr.gb-row-active,
#gradebook-outer-spreadsheet tbody tr.gb-row-active {
    /* No green background tint */
}

#admin-gradebook-spreadsheet tbody tr.gb-row-active td.gb-student-cell,
#admin-gradebook-spreadsheet tbody tr.gb-row-active td:first-child,
#gradebook-spreadsheet tbody tr.gb-row-active td.gb-student-cell,
#gradebook-spreadsheet tbody tr.gb-row-active td:first-child {
    /* No green tint or border */
}

#admin-gradebook-spreadsheet thead th.gb-col-active,
#gradebook-spreadsheet thead th.gb-col-active {
    box-shadow: inset 0 -3.5px 0 #FFD000 !important;
}

.gb-floating-context-badge {
    display: none !important;
}

@keyframes gbBadgeFade {
    from { opacity: 0; transform: translate(-50%, -80%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

.gb-floating-unsubmitted-badge {
    position: absolute;
    z-index: 10001;
    pointer-events: none;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #ef4444;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: gbUnsubmittedBadgePop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gb-floating-unsubmitted-badge::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0f172a;
    border-right: 1px solid #ef4444;
    border-bottom: 1px solid #ef4444;
}

@keyframes gbUnsubmittedBadgePop {
    from { opacity: 0; transform: translate(-50%, -80%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

.gb-cell-unsubmitted-shake {
    animation: gbShakeCell 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px #ef4444 !important;
}

.gb-cell-unsubmitted-active {
    box-shadow: inset 0 0 0 1px #ef4444 !important;
}

@keyframes gbShakeCell {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Compact Total Score & Percentage Columns */
.gb-col-compact {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    box-sizing: border-box !important;
    padding: 6px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#admin-gradebook-action-buttons.hidden {
    display: none !important;
}

/* Gradebook Sort Popover Menu */
.gradebook-sort-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    z-index: 100;
    min-width: 260px;
    max-width: 300px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    padding: 6px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: #1e293b !important;
    animation: gbSortPopAnim 0.15s ease-out;
}

@keyframes gbSortPopAnim {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gradebook-sort-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #000000 !important;
    cursor: pointer !important;
    background: transparent;
    border: none;
    text-align: left;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.gradebook-sort-option:hover {
    background-color: #f1f5f9 !important;
}

.gradebook-sort-option.active {
    background-color: #e7f5ec !important;
    color: #000000 !important;
}

.gradebook-sort-option.active:hover {
    background-color: #d5eddf !important;
}

@media (max-width: 767px) {
    .gradebook-sort-popover {
        width: 220px;
        min-width: 0;
        max-width: calc(100vw - 20px);
        padding: 4px !important;
        border-radius: 8px !important;
        overflow-y: auto;
    }

    .gradebook-sort-popover > div:first-child {
        padding: 6px !important;
    }

    .gradebook-sort-popover > div:first-child p:first-child,
    .gradebook-sort-option p:first-child {
        font-size: 10px !important;
        line-height: 14px !important;
        letter-spacing: 0 !important;
    }

    .gradebook-sort-popover > div:first-child p:last-child,
    .gradebook-sort-option p:last-child {
        font-size: 9px !important;
        line-height: 12px !important;
    }

    .gradebook-sort-option {
        min-height: 34px;
        gap: 6px;
        padding: 5px 6px;
        border-radius: 6px;
    }

    .gradebook-sort-option > div:first-child {
        width: 20px !important;
        height: 20px !important;
    }

    .gradebook-sort-option i {
        font-size: 10px !important;
    }
}

/* Score Panel Animated Progress Bar */
@keyframes scoreProgressAnim {
    0% {
        width: 0%;
    }
    100% {
        width: var(--score-pct, 0%);
    }
}

.score-progress-track {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

.score-progress-fill {
    animation: scoreProgressAnim 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: width;
}

/* Universal Curriculum Hub Overlay & Panel */
.curriculum-hub-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 11000 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem !important;
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.curriculum-hub-overlay.hidden {
    display: none !important;
}

.curriculum-hub-overlay--visible {
    opacity: 1 !important;
}

.curriculum-hub-panel {
    background: #ffffff !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
    width: 100% !important;
    max-width: 820px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: scale(0.97) translateY(8px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.curriculum-hub-overlay--visible .curriculum-hub-panel {
    transform: scale(1) translateY(0) !important;
}

/* Keep quiz and task details on the same neutral surfaces at every viewport. */
#teacher-topic-schedule-overlay #teacher-schedule-modal-body {
    background-color: #ffffff !important;
}

#teacher-topic-schedule-overlay #teacher-schedule-modal-body .release-context-strip {
    background-color: #f7f7f7 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px !important;
    row-gap: 8px !important;
}

#teacher-topic-schedule-overlay .release-context-strip > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.4;
}

#teacher-topic-schedule-overlay .release-context-strip > span::before {
    content: none !important;
}

#teacher-topic-schedule-overlay .release-context-strip > span > span {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body .release-context-strip {
        column-gap: 12px !important;
        row-gap: 6px !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > div:has(> span.truncate) {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > div:has(> span.truncate) > span:first-child {
        flex: 0 0 auto;
        white-space: nowrap;
        line-height: 1.5;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > div > span.truncate {
        flex: 1 1 0%;
        min-width: 0;
        white-space: normal !important;
        line-height: 1.5;
    }
}

#teacher-topic-schedule-overlay #teacher-grading-configuration-card {
    background-color: #fafafa !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

#teacher-grading-configuration-card .bg-slate-100\/70.cursor-not-allowed {
    background-color: #f3f4f6 !important;
}

.curriculum-hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 2.25rem 1.25rem;
    min-height: 220px;
    height: 100%;
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
    user-select: none;
    font-family: 'Inter', sans-serif !important;
}

.curriculum-hub-card:hover {
    border-color: #FFD000 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
}

.curriculum-hub-card:active,
.curriculum-hub-card.selected,
.curriculum-hub-card.active {
    border-color: #FFD000 !important;
    background-color: #fffdf0 !important;
    transform: translateY(0);
}

.curriculum-hub-icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.curriculum-hub-card h3 {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.375rem;
    line-height: 1.3;
    transition: all 0.18s ease;
}

.curriculum-hub-card.compact-card h3,
.curriculum-hub-card[class*="min-h-[160px]"] h3 {
    min-height: 1.5rem;
}

.curriculum-hub-card .curriculum-hub-icon-wrap,
.curriculum-hub-card .curriculum-hub-icon-wrap i {
    transition: all 0.18s ease;
}

.curriculum-hub-card:hover .curriculum-hub-icon-wrap {
    background: #fffbeb !important;
    border-color: #FFD000 !important;
}

.curriculum-hub-card:hover .curriculum-hub-icon-wrap i {
    color: #0f172a !important;
}

.curriculum-hub-card:hover h3 {
    color: #FFD000 !important;
}

.curriculum-hub-card p {
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.6)) !important;
    text-align: center;
    margin: 0;
}

/* Universal Enforced Fixed Dimensions for Release & Creator Panels */
.curriculum-release-panel-fixed {
    width: 100% !important;
    max-width: 860px !important;
    height: min(740px, calc(100vh - 40px)) !important;
    min-height: min(740px, calc(100vh - 40px)) !important;
    max-height: calc(100vh - 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@media (min-width: 640px) {
    #ai-generator-modal,
    #import-questions-modal {
        padding: 1rem !important;
    }
    #ai-generator-modal .curriculum-release-panel-fixed,
    #import-questions-modal .curriculum-release-panel-fixed {
        border-radius: 1.5rem !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        max-width: 860px !important;
        height: min(740px, calc(100vh - 40px)) !important;
        min-height: min(740px, calc(100vh - 40px)) !important;
        max-height: calc(100vh - 40px) !important;
    }
}

@media (max-width: 639px) {
    #ai-generator-modal,
    #import-questions-modal,
    #teacher-release-assessments-overlay,
    #teacher-topics-materials-picker-overlay,
    #teacher-assessments-picker-overlay,
    #teacher-release-learning-materials-overlay,
    #teacher-release-topics-overlay,
    #teacher-release-category-overlay,
    #teacher-topic-picker-overlay,
    #teacher-learning-picker-overlay {
        padding: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    #ai-generator-modal .curriculum-release-panel-fixed,
    #import-questions-modal .curriculum-release-panel-fixed,
    #teacher-release-assessments-overlay .curriculum-release-panel-fixed,
    #teacher-release-assessments-overlay .curriculum-hub-panel,
    #teacher-topics-materials-picker-overlay .curriculum-release-panel-fixed,
    #teacher-topics-materials-picker-overlay .curriculum-hub-panel,
    #teacher-topics-materials-picker-overlay .curriculum-picker-panel-fixed,
    #teacher-assessments-picker-overlay .curriculum-release-panel-fixed,
    #teacher-assessments-picker-overlay .curriculum-hub-panel,
    #teacher-assessments-picker-overlay .curriculum-picker-panel-fixed,
    #teacher-release-learning-materials-overlay .curriculum-release-panel-fixed,
    #teacher-release-learning-materials-overlay .curriculum-hub-panel,
    #teacher-release-topics-overlay .curriculum-release-panel-fixed,
    #teacher-release-topics-overlay .curriculum-hub-panel,
    #teacher-release-category-overlay .curriculum-release-panel-fixed,
    #teacher-release-category-overlay .curriculum-hub-panel,
    #teacher-topic-picker-overlay .curriculum-release-panel-fixed,
    #teacher-topic-picker-overlay .curriculum-hub-panel,
    #teacher-learning-picker-overlay .curriculum-release-panel-fixed,
    #teacher-learning-picker-overlay .curriculum-hub-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* AI Material Search Input Hint & Black Fade Styling */
#ai-material-search-input::placeholder,
.placeholder-black-fade::placeholder {
    color: rgba(0, 0, 0, 0.40) !important;
    opacity: 1 !important;
}

.text-black-fade {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* ═══ Universal Header Title Switcher (Analytics | Gradebooks) ══════════════ */
.sigma-header-tab-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sigma-header-tab-btn {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.5rem !important; /* 24px - exact parity with text-2xl */
    line-height: 2rem !important; /* 32px - exact parity with h1 text-2xl */
    font-weight: 700 !important; /* bold */
    letter-spacing: -0.025em !important; /* tracking-tight */
    padding: 2px 10px !important;
    margin: -2px -10px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* First button offset so text starts at exact 40px left mark (matching px-10) */
.sigma-header-tab-group > .sigma-header-tab-btn:first-child {
    margin-left: -10px !important;
}

/* Active State: Pure Solid Black text */
.sigma-header-tab-btn--active {
    color: #000000 !important;
    background-color: transparent !important;
    cursor: default !important;
}

.sigma-header-tab-btn--active:hover {
    color: #000000 !important;
    background-color: transparent !important;
}

/* Inactive State: Black fade text */
.sigma-header-tab-btn--inactive {
    color: rgba(0, 0, 0, 0.30) !important;
    background-color: transparent !important;
    cursor: pointer !important;
}

/* Inactive Hover: Subtle grey highlight ONLY, strictly NO black hover text */
.sigma-header-tab-btn--inactive:hover {
    background-color: #f1f5f9 !important; /* slate-100 grey highlight */
    color: rgba(0, 0, 0, 0.30) !important; /* Text remains black fade - NO black text hover */
}

/* Guaranteed Vertical Division Line */
.sigma-header-tab-divider {
    display: inline-block !important;
    width: 2px !important;
    min-width: 2px !important;
    max-width: 2px !important;
    height: 20px !important;
    background-color: rgba(0, 0, 0, 0.22) !important; /* black fade */
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 6px !important;
    border-radius: 1px !important;
}

/* ==========================================================================
   Shared Analytics & Performance Trend Components (Shared by Student, Teacher, Admin)
   ========================================================================== */
.shared-grades-top-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.15fr);gap:24px;align-items:stretch}
html body .shared-grades-top-panels > .gwa-card{grid-column:auto;min-height:154px;box-sizing:border-box;padding:32px!important;border-radius:32px!important;justify-content:center;min-width:0}
html body .shared-grades-top-panels > .student-grades-insights-card{grid-column:auto;min-height:154px;box-sizing:border-box;padding:24px!important;border-radius:32px!important;gap:16px}
@media(max-width:767px){
 html body .shared-grades-top-panels{grid-template-columns:minmax(0,1fr);gap:24px}
 html body .shared-grades-top-panels > .gwa-card{margin:0 16px!important;min-height:110px;padding:20px!important;border-radius:16px!important}
 html body .shared-grades-top-panels .gwa-value{font-size:32px!important;line-height:40px!important;margin-top:12px!important}
 html body .shared-grades-top-panels > .student-grades-insights-card{width:100%!important;min-height:0;border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important;padding:20px 16px!important}
 html body .shared-grades-top-panels > .student-grades-insights-card > div:last-child{border-radius:0!important}
 html body .shared-grades-top-panels p{font-size:12px!important;line-height:18px!important}
 html body .teacher-grades-analytics > .shared-grades-top-panels{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
}
.sigma-ai-shared-heading{display:flex;align-items:center;gap:8px;color:#000;font-size:14px;font-weight:700;line-height:20px;margin-bottom:10px}
.sigma-ai-panel{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;padding:20px!important;box-shadow:0 1px 3px rgba(0,0,0,0.03)!important;font-family:Inter,sans-serif}
.sigma-ai-panel .sigma-ai-shared-heading{margin:0 0 12px;min-height:28px;flex-wrap:nowrap}
.sigma-grading-notification-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,0.45);backdrop-filter:blur(3px)}
.sigma-grading-notification-dialog{width:100%;max-width:520px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:20px!important;color:#000;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.04);margin:auto}
.sigma-grading-notification-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;flex-shrink:0}
.sigma-grading-notification-dialog>header [data-close]{display:none!important}
.sigma-grading-notification-dialog h3{margin:0;font-size:16px;font-weight:700;color:#0f172a;letter-spacing:-0.01em}
.sigma-grading-notification-dialog h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#0f172a;line-height:1.35;overflow-wrap:anywhere}
.sigma-grading-notification-content{padding:22px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sigma-grading-notification-content p{overflow-wrap:anywhere}
.sigma-grading-notification-content .text-black-fade{font-size:13px;color:rgba(0,0,0,0.45);margin:0}
.sigma-grading-notification-content > p:not(.text-black-fade):not(.sigma-grading-notification-empty){margin:0 0 16px 0;font-size:13.5px;color:#0f172a}
.sigma-grading-notification-score{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e2e8f0;margin:12px 0 14px;font-size:14px;font-weight:500;color:#0f172a}
.sigma-grading-notification-score strong,.sigma-grading-notification-score .sigma-grading-score-display{display:inline-flex;align-items:baseline;gap:2px;font-size:18px;font-weight:700}
.sigma-grading-notification-score .sigma-score-earned{color:#15803d;font-size:20px;font-weight:800}
.sigma-grading-notification-score :is(.sigma-score-divider,.sigma-score-max){color:#000000;font-size:14.5px;font-weight:500}
.sigma-grading-score-label{font-weight:700;color:#000}
.sigma-grading-notification-score .sigma-score-unavailable{color:rgba(0,0,0,.45);font-size:14px;font-weight:500}
.sigma-grading-score-display{flex-wrap:wrap;justify-content:flex-end;min-width:0}
.sigma-grading-notification-content .sigma-ai-panel{margin-top:0}
.sigma-grading-notification-content .sigma-grading-notification-empty{color:rgba(0,0,0,.45)!important;margin:0;line-height:1.5;font-size:13px;font-weight:500}
.sigma-ai-panel-body{background:#ecfdf5!important;border:1px solid #bbf7d0!important;border-radius:12px!important;padding:14px 16px!important;color:#000;font-size:13.5px;line-height:1.6;margin:0;display:block!important;min-height:46px;text-align:left;overflow-wrap:break-word;word-break:break-word}
.sigma-ai-panel-body p{margin:0;color:inherit;overflow-wrap:anywhere}
.sigma-ai-panel-body strong,:is([data-subject-grade-insight],[data-ai-insight-body]) strong{font-weight:700!important;color:#000!important;margin-right:4px!important;display:inline!important}
.sigma-ai-panel [data-insight-empty="true"],.sigma-ai-empty{color:rgba(0,0,0,.45)!important}
.sigma-ai-entry+.sigma-ai-entry{border-top:1px solid #bbf7d0;margin-top:12px;padding-top:12px}
.sigma-ai-entry-title{display:flex;align-items:center;gap:10px;color:#15803d;font-size:13px;line-height:20px;font-weight:700}
.sigma-ai-entry-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.sigma-ai-entry p{padding-left:30px;color:#000}

/* Modal Footer */
.sigma-grading-notification-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-top:1px solid #e2e8f0;background:#ffffff;flex-shrink:0}

/* Mobile Responsive Scaling */
@media(max-width:767px){
  .sigma-grading-notification-overlay{padding:12px}
  .sigma-grading-notification-dialog{border-radius:16px!important;max-width:100%;max-height:calc(100dvh - 24px)}
  .sigma-grading-notification-dialog>header{padding:14px 18px}
  .sigma-grading-notification-dialog h3{font-size:14.5px!important}
  .sigma-grading-notification-content{padding:16px 18px}
  .sigma-grading-notification-dialog h4{font-size:14.5px!important;line-height:1.35}
  .sigma-grading-notification-content .text-black-fade{font-size:12px!important}
  .sigma-grading-notification-score{padding:9px 0;margin:9px 0 11px;font-size:13px!important}
  .sigma-grading-notification-score .sigma-score-earned{font-size:17px!important}
  .sigma-grading-notification-score :is(.sigma-score-divider,.sigma-score-max){font-size:13px!important}
  .sigma-grading-notification-content > p:not(.text-black-fade):not(.sigma-grading-notification-empty){margin:0 0 12px 0;font-size:13px!important}
  .sigma-ai-panel{padding:12px 14px!important;border-radius:12px!important}
  .sigma-ai-panel .sigma-ai-shared-heading{margin:0 0 8px;font-size:12px!important;gap:6px;min-height:22px}
  .sigma-ai-shared-icon{width:22px!important;height:22px!important;border-radius:6px!important;font-size:10px!important}
  .sigma-ai-panel-body{padding:10px 12px!important;font-size:12px!important;border-radius:9px!important;min-height:38px;line-height:1.45}
  .sigma-grading-notification-empty{font-size:12px!important}
  .sigma-grading-notification-dialog>footer{padding:12px 18px;gap:8px}
  .sigma-grading-notification-dialog>footer button.sigma-btn-white{flex:0 0 auto;min-width:76px}
  .sigma-grading-notification-dialog>footer button.sigma-btn-primary{flex:1}
}
@media(max-width:360px){
  .sigma-grading-notification-dialog>footer button{padding:0 10px!important;font-size:12px!important}
}
.sigma-ai-shared-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:#ffd000;color:#000;font-size:12px}
/* Standalone AI actions are yellow; lightning inside yellow badges is black. */
.fa-bolt{color:#ffd000!important;-webkit-text-fill-color:#ffd000!important}
header .fa-bolt{color:inherit!important;-webkit-text-fill-color:currentColor!important}
#sidebar .nav-link:not(.active) :is(i, i.fa-bolt){color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
#sidebar .nav-link.active :is(i, i.fa-bolt){color:#ffd000!important;-webkit-text-fill-color:#ffd000!important}
:is(.sigma-ai-shared-icon,[class*="bg-[#FFD000]"],[class*="bg-[#ffd000]"],[class*="bg-yellow-"]) .fa-bolt{color:#000!important;-webkit-text-fill-color:#000!important}
@media(max-width:767px){.sigma-ai-shared-heading{font-size:12px;line-height:18px}.sigma-ai-shared-icon{width:24px;height:24px;flex-basis:24px;font-size:11px}}
.gwa-card {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    color: white !important;
    position: relative !important;
    overflow: hidden !important;
}

.gwa-card::before {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    right: -10% !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.gwa-value {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.subject-performance-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 220px;
}

.subject-performance-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}

.grade-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: auto;
    padding: 4px 0;
}

/* Boxed text fields: flat yellow border when selected. Underline fields stay black. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.sigma-subject-input):not(.sigma-form-input):not(.sigma-underline-input):not(.sigma-underline-field):not(.border-b):not(.border-b-2):not(.input-error):focus,
select:not(.sigma-subject-select):not(.sigma-form-select):not(.sigma-underline-select):not(.border-b):not(.border-b-2):not(.input-error):focus,
textarea:not(.sigma-one-border-textarea):not(.sigma-underline-field):not(.sigma-underline-item-textarea):not(.sigma-comment-textarea):not(#sigma-dialog-comment-input):not(.border-b):not(.border-b-2):not(.input-error):focus {
    border-color: #FFD000 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

#teacher-schedule-timelimit-input {
    color: #000 !important;
    -webkit-text-fill-color: #000;
    caret-color: #000;
}

#teacher-schedule-timelimit-input::placeholder {
    color: rgba(0, 0, 0, 0.45);
    opacity: 1;
}

#teacher-schedule-timelimit-input::-webkit-inner-spin-button,
#teacher-schedule-timelimit-input::-webkit-outer-spin-button,
#teacher-schedule-max-attempts::-webkit-inner-spin-button,
#teacher-schedule-max-attempts::-webkit-outer-spin-button {
    opacity: 1 !important;
    display: inline-block !important;
    -webkit-appearance: inner-spin-button !important;
    cursor: pointer !important;
}

#teacher-schedule-timelimit-input:disabled {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    cursor: not-allowed !important;
}

#teacher-schedule-timelimit-shell.is-locked {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

#teacher-schedule-timelimit-shell.is-locked #teacher-timelimit-unit {
    color: #94a3b8 !important;
}

#teacher-schedule-timelimit-shell.is-locked #teacher-schedule-timelimit-input::-webkit-inner-spin-button,
#teacher-schedule-timelimit-shell.is-locked #teacher-schedule-timelimit-input::-webkit-outer-spin-button {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
}

/* ═══ Universal No-Scrollbar utility ═══ */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ═══ Canonical Shared Top Header Tab Bar Component ═══ */
.canonical-tabs-bar {
    display: block !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    height: 48px !important;
    min-height: 48px !important;
}

.canonical-tabs-bar nav {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    min-width: 0;
    overflow-x: auto;
}

.canonical-tab-btn {
    flex-shrink: 0;
    position: relative !important;
    height: 100% !important;
    padding: 0 0.875rem !important;
    border-radius: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3.5px solid transparent !important;
    cursor: pointer !important;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    line-height: 1.25rem !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.canonical-tab-btn::after,
.canonical-tabs-bar *::after {
    display: none !important;
    content: none !important;
}

.canonical-tab-btn i {
    font-size: 12.5px !important;
    flex-shrink: 0 !important;
    color: #000000 !important;
    transition: color 0.15s ease !important;
}

.canonical-tab-btn span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
}

.canonical-tab-btn:not(.active):hover {
    color: #000000 !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    border-bottom-color: transparent !important;
}

.canonical-tab-btn.active {
    color: #15803d !important;
    background: transparent !important;
    font-weight: 600 !important;
    border-bottom: 3.5px solid #15803d !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.canonical-tab-btn.active i {
    color: #15803d !important;
}

.canonical-tab-btn.active span {
    color: #15803d !important;
    font-weight: 600 !important;
}

.canonical-back-btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.canonical-back-btn span {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.canonical-back-btn i {
    font-size: 11px !important;
}
.grading-scale-label-break{display:none}
html body .sigma-quarter-dropdown{position:relative;display:inline-block;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;color:#000;font-size:14px;font-family:Inter,sans-serif}
html body .sigma-quarter-dropdown summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;min-height:38px;box-sizing:border-box;list-style:none;cursor:pointer;white-space:nowrap}
html body .sigma-quarter-dropdown summary::-webkit-details-marker{display:none}
html body .sigma-quarter-dropdown summary i{font-size:10px}
html body .sigma-quarter-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:180px;max-width:calc(100vw - 32px);padding:4px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:10060;box-sizing:border-box}
html body .sigma-quarter-dropdown-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;min-height:40px;border:0;background:#fff;color:#000;border-radius:4px;font:inherit;white-space:nowrap;cursor:pointer}
html body .sigma-quarter-dropdown-menu button:hover{background:#f1f5f9}
html body .sigma-quarter-dropdown-menu button[aria-pressed="true"]{background:#e7f6ec;color:#15803d}
html body .sigma-quarter-dropdown summary:is(:hover,:focus-visible){
    background:#f1f5f9;
    border-radius:11px!important;
}
html body .sigma-quarter-dropdown-menu button:not([aria-pressed="true"]):is(:hover,:focus-visible){
    background:#f1f5f9!important;
}
html body .sigma-quarter-dropdown-menu button[aria-pressed="true"]:is(:hover,:focus-visible){
    background:#e7f6ec!important;
    color:#15803d!important;
    cursor:default;
}
html body .sigma-quarter-dropdown{
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    letter-spacing:0;
    min-width:150px;
}
html body .sigma-quarter-dropdown summary{height:44px!important;min-height:44px!important;padding:0 16px!important;font-size:14px!important;font-weight:600!important;box-sizing:border-box!important}
html body .sigma-quarter-dropdown-menu{
    width:calc(100% + 2px);
    min-width:0;
    left:-1px;
    border-radius:12px;
}
html body .sigma-quarter-dropdown-menu button{
    font-size:14px;
    font-weight:600;
    line-height:20px;
    border-radius:8px;
    padding:10px 8px;
}

@media (max-width: 767px) {
    html body .sigma-grades-page #admin-grades-quarters-wrapper .sigma-quarter-dropdown-menu button,
    html body .sigma-quarter-dropdown-menu button {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        border-radius: 8px !important;
        flex: none !important;
    }
}
html body :is(#subject-topics-quarter-pills,#subject-materials-quarter-pills):has(.sigma-quarter-dropdown){background:transparent!important;padding:0!important;overflow:visible!important}
html body .sigma-quarter-dropdown{
    --quarter-control-width:150px;
    --quarter-control-height:46px;
    --quarter-control-font:14px;
    box-sizing:border-box!important;
    width:var(--quarter-control-width)!important;
    min-width:var(--quarter-control-width)!important;
    height:var(--quarter-control-height)!important;
    flex:0 0 var(--quarter-control-width)!important;
}
html body .sigma-quarter-dropdown summary{
    height:calc(var(--quarter-control-height) - 2px)!important;
    min-height:calc(var(--quarter-control-height) - 2px)!important;
    padding:0 12px!important;
    font-size:var(--quarter-control-font)!important;
    font-weight:600!important;
    line-height:20px!important;
}
@media(max-width:767px){
    html body .sigma-quarter-dropdown{
        --quarter-control-width:140px;
        --quarter-control-height:36px;
        --quarter-control-font:12px;
    }
}
html body :is(#subject-topic-scope-container,#subject-material-scope-container) > button,
html body :is(#subject-add-topic-header-btn,#subject-content-reorder-btn,#subject-content-add-topic-btn,#add-material-trigger){
    height:46px!important;min-height:46px!important;max-height:46px!important;
    padding:0 16px!important;border-radius:12px!important;
    font-size:14px!important;font-weight:600!important;line-height:20px!important;
    box-sizing:border-box!important;gap:8px!important;
}
html body :is(#subject-topic-scope-container,#subject-material-scope-container) > button span,
html body :is(#subject-add-topic-header-btn,#subject-content-reorder-btn,#subject-content-add-topic-btn,#add-material-trigger) span{
    font-size:14px!important;font-weight:600!important;line-height:20px!important;
}
@media(max-width:767px){
    html body :is(#subject-topic-scope-container,#subject-material-scope-container) > button,
    html body :is(#subject-add-topic-header-btn,#subject-content-reorder-btn,#subject-content-add-topic-btn,#add-material-trigger){height:36px!important;min-height:36px!important;max-height:36px!important;padding:0 10px!important;font-size:12px!important}
    html body :is(#subject-topic-scope-container,#subject-material-scope-container) > button span,
    html body :is(#subject-add-topic-header-btn,#subject-content-reorder-btn,#subject-content-add-topic-btn,#add-material-trigger) span{font-size:12px!important}
}
@media(max-width:767px){html body .sigma-quarter-dropdown{font-size:12px;width:140px!important;min-width:140px!important;height:36px!important}html body .sigma-quarter-dropdown summary{height:34px!important;min-height:34px!important;padding:0 10px!important;font-size:12px!important}html body .sigma-quarter-dropdown-menu button{min-height:40px;font-size:12px}}
html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-subject-section-dropdown-wrapper{
    display:none!important;
}
html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-shared-navbar{
    padding-top:20px!important;
    padding-bottom:20px!important;
}
@media(min-width:768px){
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-shared-navbar{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto auto;
        align-items:center;
        column-gap:16px!important;
        padding-bottom:10px!important;
    }
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-shared-navbar > div:first-child,
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-gradebook-action-buttons{
        display:contents!important;
    }
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) .gb-status-key{
        grid-column:1!important;grid-row:1!important;align-self:end;justify-self:start!important;margin-left:0!important;margin-right:auto!important;margin-bottom:4px;
    }
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-quarters-wrapper{grid-column:2!important;grid-row:1!important}
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #grades-submit-export{grid-column:3!important;grid-row:1!important}
}
@media(max-width:767px){
    html body #section-grades .sigma-grades-page:has(.classroom-gradebook-navigation) #admin-grades-shared-navbar{
        padding-top:16px!important;
        padding-bottom:16px!important;
    }
}
/* Closed off-screen mobile sheets must not cast shadows onto the page. */
html body .mobile-sigma-sheet:not(.open),
html body .mobile-pull-up-panel:not(.open){
    box-shadow:none!important;
}
@media(min-width:768px){
    html body :is(.mobile-sigma-sheet,.mobile-pull-up-panel):not(.open){
        visibility:hidden!important;
        pointer-events:none!important;
    }
}
@media(max-width:767px){
    html body :is(#classes-detail-tabs:has(#tab-btn-gradebook), #student-classroom-tabs-wrapper) {
        border-top:1px solid #e2e8f0!important;
        box-shadow:0 -2px 8px rgba(0,0,0,.06)!important;
        background:#fff!important;
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper) .teacher-section-tab > i,
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) > i{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:20px!important;
        height:20px!important;
        min-height:20px!important;
        flex:0 0 20px!important;
        font-size:16px!important;
        line-height:20px!important;
        margin:0!important;
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper) .teacher-section-tab,
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn){
        justify-content:flex-start!important;
        padding-top:10px!important;
        padding-bottom:4px!important;
        gap:4px!important;
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper) .teacher-section-tab > span,
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) > span{
        display:block!important;
        font-size:10px!important;
        font-weight:500!important;
        line-height:12px!important;
        letter-spacing:0!important;
        text-align:center!important;
        margin:0!important;
        height:24px!important;
        white-space:normal!important;
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper) :is(#classroom-quick-settings-btn, #student-room-menu-btn) {
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        width:48px!important;
        height:60px!important;
        padding:0!important;
        gap:5px!important;
        border-radius:0!important;
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper):has(:is(#classroom-quick-settings-btn, #student-room-menu-btn)) :is(#classroom-quick-settings-btn, #student-room-menu-btn) > i {
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:20px!important;
        height:20px!important;
        font-size:16px!important;
        line-height:20px!important;
        margin:0!important;
        transform:rotate(90deg);
    }
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper) :is(#classroom-quick-settings-btn, #student-room-menu-btn)::after {
        content:'More';
        margin:0!important;
        font-size:10px!important;
        font-weight:500!important;
        line-height:14px!important;
    }
}
@media(max-width:767px){
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) > div{
        width:100%!important;min-width:0!important;gap:0!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) > div > .canonical-back-btn{flex:0 0 20%!important}
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) > div > nav{
        flex:0 0 80%!important;min-width:0!important;gap:0!important;overflow:visible!important;
    }
    html body #section-topic-content .canonical-tabs-bar [data-canonical-tab="grading-scale"] > span{
        height:28px!important;font-size:10px!important;line-height:12px!important;text-align:center;
    }
    html body #section-topic-content .canonical-tabs-bar [data-canonical-tab="grading-scale"] .grading-scale-label-break{display:block!important;height:0!important}
}
html body #topic-content-main > div:has(#handout-list),
html body #topic-content-main > div:has(#assessment-list){
    padding-top:0!important;
    margin-top:0!important;
}
html body #section-topic-content {
    --topic-panel-radius:22px;
}
html body #section-topic-content :is(.topic-progress-card, .sigma-attached-file-panel, .video-thumbnail-panel) {
    border-radius:var(--topic-panel-radius)!important;
}
html body #section-topic-content :is(#handout-list, #assessment-list) > .sigma-black-fade-panel {
    border-radius:var(--topic-panel-radius, 22px)!important;
}
html body #section-topic-content #topic-content-main :is(#handout-list, #assessment-list) :is(.assessment-card-panel, .sigma-black-fade-panel) {
    border-radius:var(--topic-panel-radius, 22px)!important;
}
html body #section-topic-content #assessment-list .assessment-facts-panel {
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
}
html body #section-topic-content #assessment-list .assessment-facts-panel table {
    border-radius:0!important;
    border:0!important;
}
html body #section-topic-content #assessment-list .assessment-facts-panel tbody td {
    border-bottom:1px solid rgba(0, 0, 0, 0.08)!important;
}
html body #section-topic-content #assessment-list .assessment-facts-panel tbody td.fact-group-divider {
    border-right:1px solid rgba(0, 0, 0, 0.08)!important;
}
@media (max-width:767px){
    html body #section-topic-content #topic-content-main #assessment-list .assessment-card-panel .assessment-facts-panel {
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
        border-left:0!important;
        border-right:0!important;
        border-radius:0!important;
        box-sizing:border-box;
    }
}
@media (min-width:768px){
    html body #topic-content-main > div:has(#handout-list),
    html body #topic-content-main > div:has(#assessment-list){padding-left:0!important;padding-right:0!important}
    html body #topic-content-main :is(#handout-list,#assessment-list){margin-top:0!important;padding-top:0!important}
    html body .teacher-topic-page-grid:has([id="handout-list"]),
    html body .teacher-topic-page-grid:has([id="assessment-list"]){align-items:start!important}
}
@media (max-width:767px){
    html body #topic-content-main > div:has(#handout-list),
    html body #topic-content-main > div:has(#assessment-list){padding-left:0!important;padding-right:0!important}
    html body #section-topic-content {--topic-panel-radius:20px}
    html body #section-topic-content #topic-content-main:has(.topic-video-player-view),
    html body #section-topic-content #topic-content-main .topic-video-player-view,
    html body #section-topic-content #topic-content-main .topic-video-player-panel {
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
        border-radius:0!important;
    }
    html body #section-topic-content #topic-content-main .topic-video-player-view .video-cinema-player,
    html body #section-topic-content #topic-content-main .video-cinema-player > :is(iframe,video) {
        width:100%!important;
        max-width:100%!important;
        border-radius:0!important;
        border:0!important;
        box-shadow:none!important;
    }
    html body #section-topic-content #topic-content-main:has(:is(#handout-list,#assessment-list)) {
        padding-left:0!important;
        padding-right:0!important;
        box-sizing:border-box;
    }
    html body #section-topic-content :is(#handout-list,#assessment-list) {
        --topic-panel-radius:0px;
        display:flex!important;
        flex-direction:column!important;
        gap:0!important;
        width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }
    html body #section-topic-content #topic-content-main :is(#handout-list,#assessment-list) > * {
        margin-top:0!important;
        margin-bottom:0!important;
    }
    html body #section-topic-content #topic-content-main :is(#handout-list,#assessment-list) > :is(.assessment-card-panel,.sigma-black-fade-panel),
    html body #section-topic-content #topic-content-main #assessment-list > :is(.student-assessment-list-item,.teacher-assessment-list-item) > .assessment-card-panel {
        width:100%!important;
        max-width:100%!important;
        border-radius:0!important;
        box-shadow:none!important;
        border:0!important;
        border-bottom:1px solid rgba(0,0,0,.12)!important;
        margin:0!important;
        padding:12px 16px!important;
    }
}
@media (min-width:768px){
    html body .classroom-detail-shell > .classroom-detail-tabs,
    html body #classroom-detail-view > .classroom-detail-tabs,
    html body .topic-page-tabs-header:has([data-canonical-tab="videos"]){
        position:sticky!important;
        top:var(--shell-offset,106px)!important;
        z-index:80!important;
        background:#fff!important;
    }
    html body .topic-page-tabs-header:has([data-canonical-tab="videos"]){
        padding-top:20px!important;
        height:auto!important;
        min-height:68px!important;
        box-sizing:border-box!important;
    }
    html body #topic-content-header:has([data-canonical-tab="videos"]){
        position:static!important;
    }
    html body #section-topic-content:has([data-canonical-tab="videos"]) #topic-right-section{
        top:calc(var(--shell-offset,106px) + 88px)!important;
        max-height:calc(100dvh - var(--shell-offset,106px) - 104px)!important;
    }
    html body #topic-content-header .canonical-tabs-bar:has([data-canonical-tab="videos"]){margin-top:0!important}
    html body .classroom-room-container:has(.classroom-detail-tabs),
    html body .classroom-detail-shell:has(.classroom-detail-tabs){overflow:visible!important}
}
html body .canonical-tabs-bar,
html body .classroom-detail-tabs{border-bottom-color:rgba(0,0,0,0.08)!important}
html body .canonical-tabs-bar .w-px,
html body .room-quarter-switch__rule{background:rgba(0,0,0,0.08)!important}
html body .canonical-tabs-bar .canonical-back-btn + div,
html body .classroom-detail-tabs .room-quarter-switch .room-quarter-switch__rule{
    background-color:rgba(0,0,0,0.08)!important;
    border-color:rgba(0,0,0,0.08)!important;
}
html body .canonical-tabs-bar .canonical-back-btn:has(.fa-book){
    width:auto!important;
    min-width:max-content!important;
    height:32px!important;
    padding:0 10px!important;
    gap:6px!important;
    border-radius:6px!important;
    letter-spacing:0!important;
    cursor:pointer!important;
}
html body .canonical-tabs-bar .canonical-back-btn:has(.fa-book):is(:hover,:focus-visible){
    background:#f1f5f9!important;
    border-radius:6px!important;
}
html body .canonical-tabs-bar .canonical-back-btn:has(.fa-book) :is(i,span){
    display:inline-block!important;
    color:#000!important;
}
@media (min-width:768px){
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]){
        margin-top:20px!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]),
    html body .classroom-detail-tabs{
        height:48px!important;
        min-height:48px!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tab-btn,
    html body .classroom-detail-tabs .teacher-section-tab{
        height:100%!important;
        padding-top:0!important;
        padding-bottom:0!important;
        align-items:center!important;
        line-height:20px!important;
        border-bottom-width:3.5px!important;
        box-sizing:border-box!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tab-btn span{
        font-size:14px!important;
        line-height:20px!important;
    }
    html body .canonical-tabs-bar .canonical-back-btn:has(.fa-book){
        height:100%!important;
        align-self:stretch;
        margin:0!important;
        padding:0 16px!important;
        border-radius:0!important;
    }
    html body .canonical-tabs-bar .canonical-back-btn:has(.fa-book):is(:hover,:focus-visible){
        border-radius:8px!important;
    }
}
@media (max-width:767px){
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn){
        display:flex!important;flex-direction:column!important;
        justify-content:center!important;align-items:center!important;
        height:60px!important;padding:8px 2px!important;gap:4px!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) i{
        display:flex!important;align-items:center!important;justify-content:center!important;
        width:20px!important;height:20px!important;min-height:20px!important;
        font-size:16px!important;line-height:20px!important;margin:0!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) span{
        height:14px!important;line-height:14px!important;font-size:10px!important;
        font-weight:500!important;margin:0!important;letter-spacing:0!important;
    }
    html body #section-topic-content .topic-page-tabs-header:has([data-canonical-tab="videos"]),
    html body #section-topic-content #topic-content-header:has([data-canonical-tab="videos"]){
        height:0!important;min-height:0!important;
        margin:0!important;padding:0!important;overflow:visible!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]){
        height:calc(60px + env(safe-area-inset-bottom,0px))!important;
        min-height:60px!important;
        margin:0!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) nav button span{
        font-size:10px!important;line-height:14px!important;font-weight:500!important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) nav button{
        height:60px!important;min-height:60px!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]){
        position:fixed!important;
        inset:auto 0 0!important;
        width:100%!important;
        height:calc(60px + env(safe-area-inset-bottom,0px))!important;
        padding:0 6px env(safe-area-inset-bottom,0px)!important;
        background:#fff!important;
        border-top:1px solid #e2e8f0!important;
        border-bottom:0!important;
        z-index:200!important;
        box-shadow:0 -2px 8px rgba(0,0,0,.06);
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tabs-scroll > div{
        width:100%!important;min-width:0!important;gap:0!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tabs-scroll > div > div.w-px{display:none!important}
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tabs-scroll nav{flex:3;min-width:0;gap:0!important}
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn){
        flex:1 1 0!important;
        width:auto!important;min-width:0!important;
        height:60px!important;margin:0!important;padding:8px 3px!important;
        display:flex!important;flex-direction:column!important;gap:5px!important;
        justify-content:center!important;align-items:center!important;
        border-bottom:0!important;border-radius:0!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn)::after{display:none!important}
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) span{
        display:block!important;font-size:10px!important;line-height:14px!important;font-weight:500!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn,.canonical-back-btn) i{
        font-size:16px!important;margin:0!important;
    }
    html body .canonical-tabs-bar:has([data-canonical-tab="videos"]) .canonical-tabs-right{width:36px!important}
    html body #section-topic-content:has([data-canonical-tab="videos"]) #topic-content-main{
        padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    }
    html body #section-topic-content:has([data-canonical-tab="videos"]) #topic-right-section:has(.topic-score-sticky){
        bottom:calc(60px + env(safe-area-inset-bottom,0px))!important;
    }
}

/* ═══ Standard Action Buttons in Shared Modals & Panels ═══ */
.sigma-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.sigma-btn.hidden,
.sigma-btn[hidden],
button.sigma-btn.hidden,
[class*="sigma-btn"].hidden,
.sigma-modal-footer.hidden,
.sigma-modal-footer[hidden],
.sigma-modal-footer .hidden {
    display: none !important;
}

@media (min-width: 640px) {
    .sigma-btn {
        font-size: 14px !important;
    }
}

.sigma-modal-footer {
    padding: 12px 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
    background-color: #ffffff !important;
    gap: 10px !important;
}

@media (min-width: 640px) {
    .sigma-modal-footer {
        padding: 20px 32px !important;
    }
}

@media (min-width: 769px) {
    #attendance-export-modal .attendance-export-exit-btn {
        display: flex !important;
        position: fixed !important;
        top: 2.5rem !important;
        right: 2.5rem !important;
        width: 3rem !important;
        height: 3rem !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 9999px !important;
        background-color: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 12001 !important;
    }

    #attendance-export-modal .attendance-export-exit-btn:hover {
        background-color: #e2e8f0 !important;
    }

    #attendance-export-modal .attendance-export-exit-btn > i {
        color: inherit !important;
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    #attendance-export-modal .attendance-export-mobile-return-btn {
        display: none !important;
    }

    #attendance-export-modal .sigma-modal-header-top {
        justify-content: flex-start !important;
    }

    #attendance-export-modal .sigma-modal-body {
        padding-bottom: 32px !important;
    }

    #attendance-export-modal .attendance-export-cancel-btn {
        display: none !important;
    }

    #attendance-export-modal .sigma-modal-footer {
        justify-content: flex-end !important;
    }
}

/* Modal header descriptions are omitted; body instructions stay visible. */
.sigma-modal-header p,
[id$="-modal-header"] p,
#section-modal-header-container p,
.modal-header-subtitle,
.sigma-modal-subtitle,
:is(.sigma-modal-panel, .curriculum-hub-panel, .curriculum-release-panel-fixed) > :is(header, .border-b):has(h1, h2, h3) :is(h1, h2, h3) ~ :is(p, .text-black-fade),
:is(.sigma-modal-panel, .curriculum-hub-panel, .curriculum-release-panel-fixed) > [id$="-view"] > :is(header, .border-b):has(h1, h2, h3) :is(h1, h2, h3) ~ :is(p, .text-black-fade),
:is([role="dialog"], [id*="modal"], [id*="overlay"]) > div > .border-b:has(h1, h2, h3) :is(h1, h2, h3) ~ :is(p, .text-black-fade),
#ai-generator-main-view > .border-b :is(h1, h2, h3) ~ p {
    display: none !important;
}

.sigma-modal-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

@media (min-width: 640px) {
    .sigma-modal-btn {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 22px !important;
        font-size: 13.5px !important;
        border-radius: 12px !important;
    }
}

.sigma-mobile-only {
    display: inline !important;
}
.sigma-desktop-only {
    display: none !important;
}
@media (min-width: 640px) {
    .sigma-mobile-only {
        display: none !important;
    }
    .sigma-desktop-only {
        display: inline !important;
    }
}

.sigma-btn-md {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
}

.sigma-btn-white {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sigma-btn-white:hover:not(:disabled) {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: #000000 !important;
}

.sigma-btn-primary {
    background-color: #15803d !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.sigma-btn-primary:hover:not(:disabled) {
    background-color: #166534 !important;
    color: #ffffff !important;
}
.sigma-btn:active:not(:disabled) {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   PICKER & SCHEDULE MODAL BACK BUTTON RESPONSIVE BEHAVIOR (DESKTOP & MOBILE)
   Desktop: Header chevron is hidden, footer has text Back button on FAR LEFT,
            primary action button on FAR RIGHT.
   Mobile: Header has chevron, footer Back button is hidden, primary button on right.
   ========================================================================== */
.picker-header-back-btn {
    display: flex;
}
.picker-footer-back-btn {
    display: none;
}
@media (min-width: 640px) {
    .picker-header-back-btn {
        display: none !important;
    }
    .picker-footer-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        order: 1 !important;
    }
    .teacher-schedule-modal-footer,
    #teacher-topic-schedule-overlay .curriculum-hub-panel > div:last-child,
    #teacher-topic-schedule-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-topics-materials-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-assessments-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-learning-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-topic-picker-overlay .curriculum-release-panel-fixed > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #teacher-topic-schedule-overlay #teacher-save-schedule-btn,
    #teacher-topic-schedule-overlay #teacher-set-grading-btn,
    #teacher-topic-schedule-overlay #teacher-students-done-btn,
    #teacher-topic-schedule-overlay .sigma-btn-primary,
    #teacher-topics-materials-picker-overlay #topics-materials-picker-submit-btn,
    #teacher-topics-materials-picker-overlay .sigma-btn-primary,
    #teacher-assessments-picker-overlay #assessments-picker-submit-btn,
    #teacher-assessments-picker-overlay .sigma-btn-primary,
    #teacher-learning-picker-overlay #learning-picker-submit-btn,
    #teacher-learning-picker-overlay .sigma-btn-primary,
    #teacher-topic-picker-overlay #topic-picker-submit-btn,
    #teacher-topic-picker-overlay .sigma-btn-primary,
    .picker-footer-back-btn ~ .sigma-btn-primary,
    .picker-footer-back-btn ~ button:last-child {
        display: inline-flex !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        order: 2 !important;
    }
}
@media (max-width: 639.98px) {
    .picker-footer-back-btn {
        display: none !important;
    }
    .teacher-schedule-modal-footer {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
    .teacher-schedule-modal-footer .sigma-btn-primary,
    #teacher-topic-schedule-overlay #teacher-save-schedule-btn,
    #teacher-topic-schedule-overlay #teacher-set-grading-btn,
    #teacher-topic-schedule-overlay #teacher-students-done-btn {
        margin-left: auto !important;
    }
}

/* ==========================================================================
   Universal Selected Yellow Border (#FFD000) for All Description Boxes
   ========================================================================== */
.sigma-composer-editor-box:focus-within,
.sigma-composer-body .sigma-composer-editor-box:focus-within,
.sigma-composer-editor-box.focused,
.sigma-composer-textarea:not(:disabled):not([readonly]):focus,
#sigma-composer-input-body:not(:disabled):not([readonly]):focus,
#topic-editor-desc-input:not(:disabled):not([readonly]):focus,
#topic-edit-desc:not(:disabled):not([readonly]):focus,
#mat-editor-desc:not(:disabled):not([readonly]):focus,
#teacher-mat-editor-desc:not(:disabled):not([readonly]):focus,
#edit-subject-desc:not(:disabled):not([readonly]):focus,
#save-quiz-desc-input:not(:disabled):not([readonly]):focus,
#edit-bio-description:not(:disabled):not([readonly]):focus,
#edit-user-bio-description:not(:disabled):not([readonly]):focus,
#edit-profile-vision:not(:disabled):not([readonly]):focus,
#edit-profile-mission:not(:disabled):not([readonly]):focus,
textarea[id*="desc"]:not(:disabled):not([readonly]):focus,
textarea[name*="desc"]:not(:disabled):not([readonly]):focus,
textarea[placeholder*="desc" i]:not(:disabled):not([readonly]):focus,
textarea[placeholder*="instruction" i]:not(:disabled):not([readonly]):focus,
textarea[placeholder*="detail" i]:not(:disabled):not([readonly]):focus,
.sigma-textarea:not(:disabled):not([readonly]):focus,
.sigma-form-textarea:not(:disabled):not([readonly]):focus {
    border: 1px solid #FFD000 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Locked & disabled textareas / inputs: stay in muted neutral state on click / focus */
textarea:disabled,
textarea[readonly],
textarea:disabled:focus,
textarea[readonly]:focus,
textarea:disabled:hover,
textarea[readonly]:hover,
textarea:disabled:active,
textarea[readonly]:active,
input:disabled,
input[readonly],
input:disabled:focus,
input[readonly]:focus,
input:disabled:hover,
input[readonly]:hover,
input:disabled:active,
input[readonly]:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Universal locked container protection */
div.cursor-not-allowed:focus-within,
div.cursor-not-allowed:hover,
div.cursor-not-allowed:active,
div.cursor-not-allowed:focus,
:is(div, input, textarea).bg-slate-100\/70:focus-within,
:is(div, input, textarea).bg-slate-100\/70:hover,
:is(div, input, textarea).bg-slate-100\/70:active,
:is(div, input, textarea).bg-slate-100\/70:focus {
    background-color: rgba(241, 245, 249, 0.7) !important;
    border-color: #e2e8f0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Universal 1-Border (Underline) Text Fields Selected Yellow (#FFD000)
   ========================================================================== */
.sigma-subject-input:focus,
.sigma-subject-select:focus,
.sigma-form-input:focus,
.sigma-form-select:focus,
.sigma-underline-input:focus,
.sigma-underline-select:focus,
.sigma-one-border-textarea:focus,
.sigma-underline-field:focus,
input[class*="border-b"]:focus,
select[class*="border-b"]:focus,
textarea[class*="border-b"]:focus,
input[class*="sigma-underline"]:focus,
select[class*="sigma-underline"]:focus,
textarea[class*="sigma-underline"]:focus,
.border-b-2:focus,
.border-b:focus:not(.desktop-grading-header),
.focus\:border-black:focus {
    border-bottom-color: #FFD000 !important;
}

/* ─── Manage Topics & Materials Green Dropdown Button & Menu ──────────────── */
html body .shared-manage-curriculum-menu button > div {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
html body .shared-manage-curriculum-menu i,
html body .manage-curriculum-dropdown-btn i {
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
}
.manage-curriculum-dropdown-container {
    width: auto !important;
    max-width: fit-content !important;
    display: inline-flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    html body .manage-curriculum-dropdown-btn {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 24px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }
    html body .manage-curriculum-dropdown-btn span {
        font-size: 14px !important;
        letter-spacing: 0 !important;
    }
}
.manage-curriculum-dropdown-btn {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background-color: #15803d !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.manage-curriculum-dropdown-btn:hover {
    background-color: #166534 !important;
}

.manage-curriculum-dropdown-btn:active {
    background-color: #14532d !important;
}

.manage-curriculum-dropdown-btn span,
.manage-curriculum-dropdown-btn i {
    color: #ffffff !important;
}

/* Animated Spin Icon: + morphs and spins into v (chevron) */
.manage-dropdown-icon-spin-box {
    position: relative !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

.manage-dropdown-icon-spin-box .manage-icon-plus,
.manage-dropdown-icon-spin-box .manage-icon-chevron {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    line-height: 1 !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
}

/* Default state: Plus icon is visible, Chevron is hidden and pre-rotated */
.manage-dropdown-icon-spin-box .manage-icon-plus {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

.manage-dropdown-icon-spin-box .manage-icon-chevron {
    opacity: 0 !important;
    transform: rotate(-180deg) scale(0.5) !important;
}

/* Open state: Plus spins and fades out, Chevron spins in and fades in */
.manage-curriculum-dropdown-container.is-open .manage-dropdown-icon-spin-box .manage-icon-plus,
.manage-curriculum-dropdown-btn.is-open .manage-dropdown-icon-spin-box .manage-icon-plus,
.grades-submit-export-btn[aria-expanded="true"] .manage-icon-plus {
    opacity: 0 !important;
    transform: rotate(180deg) scale(0.5) !important;
}

.manage-curriculum-dropdown-container.is-open .manage-dropdown-icon-spin-box .manage-icon-chevron,
.manage-curriculum-dropdown-btn.is-open .manage-dropdown-icon-spin-box .manage-icon-chevron,
.grades-submit-export-btn[aria-expanded="true"] .manage-icon-chevron {
    opacity: 1 !important;
    transform: rotate(180deg) scale(1) !important;
}

.grades-submit-export-btn .manage-dropdown-icon-spin-box i,
.manage-curriculum-dropdown-btn .manage-dropdown-icon-spin-box i {
    font-size: 12px !important;
}
@media (prefers-reduced-motion: reduce) {
    .manage-dropdown-icon-spin-box i { transition: none !important; }
}

.shared-manage-curriculum-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    z-index: 100 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.shared-manage-curriculum-menu button {
    background-color: transparent !important;
    color: #0f172a !important;
    transition: background-color 0.12s ease !important;
}

.shared-manage-curriculum-menu button:hover {
    background-color: #f1f5f9 !important;
}
html body .manage-curriculum-dropdown-container > .shared-manage-curriculum-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
@media (min-width: 768px) {
    html body .shared-manage-curriculum-menu button {
        min-height: 46px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    html body .shared-manage-curriculum-menu button span {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
    }
    html body .shared-manage-curriculum-menu button i {
        font-size: 14px !important;
    }
}

.teacher-topic-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}
html body .teacher-topic-toolbar .room-quarter-switch{height:auto!important;margin-left:12px!important}
html body .teacher-topic-toolbar .room-quarter-switch__btn,
html body .teacher-gradebook-quarter-select{
    width:auto!important;min-width:140px!important;height:38px!important;
    padding:0 12px!important;gap:8px!important;
    border:1px solid rgba(0,0,0,.12)!important;border-radius:6px!important;
    background:#fff!important;color:#000!important;font-size:13px!important;cursor:pointer!important;
}
@media(max-width:767px){
    html body #room-topics-mount :is(.teacher-topic-toolbar, .student-topic-toolbar){
        padding-left:16px!important;
        padding-right:16px!important;
        box-sizing:border-box;
    }
}

.teacher-topic-page-full {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

.teacher-topic-page-full .teacher-topic-main-shell,
.teacher-topic-page-full .teacher-topic-list {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.teacher-topic-page-full .teacher-topic-card,
.teacher-topic-page-full .topic-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile Only: Scaled Down Material Icons & Badges in Topic Dropdowns */
@media (max-width: 768px) {
    [id^="topic-dropdown-"] .sigma-black-fade-panel {
        padding: 7px 9px !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }

    [id^="topic-dropdown-"] .sigma-black-fade-panel h4:not(.sigma-file-panel-title) {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    [id^="topic-dropdown-"] .mat-card-left,
    [id^="topic-dropdown-"] .sigma-black-fade-panel > div:first-child {
        gap: 8px !important;
    }

    [id^="topic-dropdown-"] .mat-icon-col,
    [id^="topic-dropdown-"] .sigma-black-fade-panel > div:first-child > div:first-child {
        width: 60px !important;
        min-width: 60px !important;
        gap: 4px !important;
    }

    [id^="topic-dropdown-"] .mat-icon-box,
    [id^="topic-dropdown-"] .sigma-black-fade-panel > div:first-child > div:first-child > div:first-child {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 8px !important;
    }

    [id^="topic-dropdown-"] .mat-icon-box i,
    [id^="topic-dropdown-"] .sigma-black-fade-panel > div:first-child > div:first-child > div:first-child i {
        font-size: 22px !important;
    }

    [id^="topic-dropdown-"] .mat-type-badge,
    [id^="topic-dropdown-"] .sigma-black-fade-panel > div:first-child > div:first-child > span {
        font-size: 12px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        line-height: 16px !important;
    }

    [id^="topic-dropdown-"] .sigma-black-fade-panel .bg-black\/5,
    [id^="topic-dropdown-"] .sigma-black-fade-panel .bg-slate-100,
    [id^="topic-dropdown-"] .sigma-black-fade-panel .bg-amber-50 {
        font-size: 8.5px !important;
        padding: 1px 4px !important;
        border-radius: 4px !important;
    }

    [id^="topic-dropdown-"] .sigma-black-fade-panel .text-black-fade {
        font-size: 9.5px !important;
    }

    [id^="topic-dropdown-"] .sigma-black-fade-panel .text-black-fade i {
        font-size: 8.5px !important;
    }
}

/* Final shared file-title scale for teacher + student material pages.
   Keep this after generic topic-card rules so file panels do not inherit list-card sizing. */
body .sigma-file-panel-title,
body .sigma-black-fade-panel .sigma-file-panel-title,
body .sigma-black-fade-panel h4.sigma-file-panel-title,
body .sigma-black-fade-panel p.sigma-file-panel-title,
body .material-detail-attached-file .sigma-file-panel-title,
body #student-submitted-answer-section .sigma-file-panel-title,
body #subject-material-detail-view .sigma-file-panel-title,
body .assessment-material-main-card .sigma-file-panel-title,
body #topic-content-main .sigma-file-panel-title,
body #topic-content-main .sigma-black-fade-panel .sigma-file-panel-title,
body #topic-content-main .sigma-black-fade-panel h4.sigma-file-panel-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Attached-file cards are informational; only the filename opens the resource. */
html body .sigma-file-panel-title,
html body #student-answer-files-container h4 {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
html body #student-answer-files-container .sigma-black-fade-panel > button {
    flex-shrink: 0 !important;
    position: static !important;
}
body .sigma-attached-file-panel {
    cursor: default !important;
    border-radius: 16px !important;
}

body .sigma-attached-file-panel:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transform: none !important;
}

body .sigma-attached-file-panel .sigma-file-panel-title--clickable:hover,
body .sigma-attached-file-panel .sigma-file-panel-title--clickable:focus-visible,
body :is(#topic-content-main, #subject-material-detail-view, #student-submitted-answer-section) .sigma-attached-file-panel .sigma-file-panel-title--clickable:hover,
body :is(#topic-content-main, #subject-material-detail-view, #student-submitted-answer-section) .sigma-attached-file-panel .sigma-file-panel-title--clickable:focus-visible {
    color: #FFD000 !important;
    -webkit-text-fill-color: #FFD000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

body .sigma-attached-file-panel .sigma-file-panel-title--clickable:focus-visible {
    outline: 2px solid #15803d;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    body .sigma-file-panel-title,
    body .sigma-black-fade-panel .sigma-file-panel-title,
    body .sigma-black-fade-panel h4.sigma-file-panel-title,
    body .sigma-black-fade-panel p.sigma-file-panel-title,
    body .material-detail-attached-file .sigma-file-panel-title,
    body #student-submitted-answer-section .sigma-file-panel-title,
    body #subject-material-detail-view .sigma-file-panel-title,
    body .assessment-material-main-card .sigma-file-panel-title,
    body #topic-content-main .sigma-file-panel-title,
    body #topic-content-main .sigma-black-fade-panel .sigma-file-panel-title,
    body #topic-content-main .sigma-black-fade-panel h4.sigma-file-panel-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
}

/* ─── Quiz Storage Header Actions (Desktop: Standard Normal Button Sizing) ─── */
@media (min-width: 769px) {
    #quiz-storage-header-actions:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #quiz-storage-header-actions.hidden {
        display: none !important;
    }

    #quiz-storage-header-actions button {
        height: 40px !important;
        min-height: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    #quiz-storage-header-actions button i {
        font-size: 13px !important;
    }
}

/* Quiz Storage Search Box Focus: Yellow border with no glow */
#storage-picker-search-container:focus-within,
#library-modal-search-container:focus-within {
    border-color: #FFD000 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Quiz Storage & Library Search Button Desktop Sizing */
@media (min-width: 768px) {
    #storage-picker-search-btn,
    #library-modal-search-btn {
        height: 34px !important;
        min-height: 34px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        margin-left: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }
}

/* ─── Topic Cover & Design Templates Options Button & Menu ──────────── */
@media (min-width: 769px) {
    #topic-image-picker-modal > div > div:first-child h3 {
        font-size: 18px !important;
        line-height: 26px !important;
        letter-spacing: 0;
    }

    #topic-image-picker-modal > div > div:first-child .sigma-btn,
    #topic-image-picker-modal > div > div:last-child .sigma-btn {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 22px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        border-radius: 12px !important;
    }
}

.topic-template-card {
    position: relative !important;
    overflow: visible !important;
}

.topic-template-card img {
    border-radius: 12px !important;
    overflow: hidden !important;
    object-fit: cover !important;
}

.topic-template-card.menu-open,
.topic-template-card:has(.topic-options-menu:not(.hidden)) {
    z-index: 10080 !important;
    overflow: visible !important;
}

.topic-options-trigger,
button.topic-options-trigger {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 9999px !important;
    background-color: rgba(0, 0, 0, 0.60) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20) !important;
    z-index: 25 !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.topic-options-trigger:hover,
button.topic-options-trigger:hover {
    background-color: rgba(0, 0, 0, 0.85) !important;
    transform: scale(1.05) !important;
}

.topic-options-trigger i,
button.topic-options-trigger i {
    font-size: 11px !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.topic-options-menu {
    position: absolute !important;
    top: 38px !important;
    right: 8px !important;
    min-width: 185px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.20), 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    z-index: 10090 !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.topic-options-menu.hidden {
    display: none !important;
}

/* AI Generator Borrow View Header Back Button: mobile-only, hidden on desktop */
@media (min-width: 640px) {
    #ai-borrow-header-back-btn {
        display: none !important;
    }
}
@media (max-width: 639px) {
    #ai-borrow-header-back-btn {
        display: flex !important;
    }
}

/* ==========================================================================
   Bottom-Left Release Toast Notifications
   ========================================================================== */
.sigma-release-toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: calc(100vw - 48px);
    pointer-events: none;
    font-family: 'Inter', sans-serif !important;
}

.sigma-release-toast-panel {
    pointer-events: auto;
    background: #15803d;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #166534;
    padding: 12px 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    animation: sigmaReleaseToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    box-sizing: border-box;
}

.sigma-release-toast-panel:hover {
    filter: none !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.sigma-release-toast-panel:active {
    transform: scale(0.98);
}

.sigma-release-toast-panel.is-unreleased {
    background: #b45309;
    border-color: #92400e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.sigma-release-toast-panel.hide {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
    pointer-events: none;
}

@keyframes sigmaReleaseToastSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sigma-release-toast-content {
    flex: 1;
    min-width: 0;
}

.sigma-release-toast-panel > div:first-child:not(.sigma-release-toast-content) {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
    font-size: 11px !important;
}

.sigma-release-toast-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

@media (max-width: 767px) {
    .sigma-release-toast-container {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: auto;
        max-width: 340px;
        gap: 8px;
    }

    .sigma-release-toast-panel {
        min-height: 40px;
        padding: 10px 12px;
        gap: 8px;
    }

    .sigma-release-toast-panel > div:first-child:not(.sigma-release-toast-content) {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px;
        font-size: 10px !important;
    }

    .sigma-release-toast-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   COLLAPSIBLE DESCRIPTION (EXPAND & COLLAPSE)
   ========================================================================== */
.sigma-collapsible-desc-text {
    color: #000000 !important;
    font-weight: 400 !important;
}

.sigma-collapsible-desc-text.is-collapsed {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sigma-collapsible-desc-text.is-expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
}

.sigma-collapsible-desc-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.15s ease, opacity 0.15s ease !important;
}

.sigma-collapsible-desc-toggle:hover {
    color: #334155 !important;
    opacity: 0.85 !important;
}

.sigma-collapsible-desc-toggle i {
    font-size: 9px !important;
    margin-top: 1px !important;
}

/* ==========================================================================
   Unified Release Status Badges (Matches .topic-card__badge on desktop & mobile)
   ========================================================================== */
.release-state-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    padding: 0.18rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Remove dot and icons from release badges to save space */
.release-state-badge .badge-dot,
.release-state-badge i {
    display: none !important;
}

/* Released (Emerald - same color scheme as .topic-card__badge) */
.release-state-badge.release-state-released {
    background-color: rgba(21, 128, 61, 0.08) !important;
    color: #15803d !important;
    border: 1px solid rgba(21, 128, 61, 0.18) !important;
}

/* Draft / Unreleased (Amber color as requested) */
.release-state-badge.release-state-draft,
.release-state-badge.release-state-unreleased {
    background-color: rgba(217, 119, 6, 0.08) !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
}

/* Scheduled (Blue / Sky) */
.release-state-badge.release-state-scheduled {
    background-color: rgba(2, 132, 199, 0.08) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(2, 132, 199, 0.22) !important;
}

/* Hidden (Rose) */
.release-state-badge.release-state-hidden {
    background-color: rgba(225, 29, 72, 0.08) !important;
    color: #be123c !important;
    border: 1px solid rgba(225, 29, 72, 0.22) !important;
}

/* Mobile: Scaled down to match .topic-card__badge on mobile */
@media (max-width: 768px) {
    .release-state-badge {
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        padding: 2px 7px !important;
        border-radius: 9999px !important;
    }
}

/* Comment Description Box & Input Pill */
.notif-batch-loading {
    padding: 16px;
    text-align: center;
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45));
    font-size: 12px;
}

@media (min-width: 1025px) {
    body #sigma-post-dialog-modal {
        width: min(720px, calc(100vw - 40px)) !important;
        max-width: 720px !important;
        height: 90dvh !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body #sigma-post-dialog-modal .sigma-post-dialog-header,
    body #sigma-post-dialog-modal .sigma-post-dialog-footer {
        flex: 0 0 auto !important;
    }
    body #sigma-post-dialog-modal .sigma-post-dialog-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-color: transparent transparent !important;
    }
    body #sigma-post-dialog-modal .sigma-post-dialog-body:hover,
    body #sigma-post-dialog-modal .sigma-post-dialog-body:focus-within {
        scrollbar-color: #cbd5e1 transparent !important;
    }
    body #sigma-post-dialog-modal .sigma-post-dialog-body::-webkit-scrollbar-thumb,
    body #sigma-post-dialog-modal .sigma-post-dialog-body::-webkit-scrollbar-button {
        background: transparent !important;
        color: transparent !important;
    }
    body #sigma-post-dialog-modal .sigma-post-dialog-body:hover::-webkit-scrollbar-thumb,
    body #sigma-post-dialog-modal .sigma-post-dialog-body:focus-within::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
    }
}

@media (min-width: 769px) {
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta > div:first-child,
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta .sigma-user-avatar,
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta .sigma-card-author-avatar-img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex: 0 0 38px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta {
        align-items: center !important;
        gap: 12px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta > div:first-child {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta > div:first-child .sigma-user-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
    }
    body .sigma-card-author-meta .sigma-user-avatar,
    body .sigma-card-author-meta .sigma-card-author-avatar-img,
    body .sigma-card-author-meta > div:first-child {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex-shrink: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        column-gap: 6px !important;
        align-items: center !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-meta > div:first-child {
        flex: 0 0 34px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-text-col {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: auto !important;
    }
    body .sigma-card-author-meta .sigma-user-avatar i {
        font-size: 14px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-text-col {
        gap: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-text-col .sigma-card-author-subrow {
        margin-top: 0 !important;
        align-items: center !important;
        column-gap: 6px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) .sigma-card-author-role-subtitle {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 18px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card) .sigma-card-header-row {
        position: relative !important;
    }
    body :is(.sigma-announcement-card, .announcement-card) .sigma-card-author-fullname {
        height: 22px !important;
        min-height: 22px !important;
        line-height: 22px !important;
        align-items: center !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card) .sigma-card-header-right {
        top: 0 !important;
        height: 22px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card) .sigma-card-header-right :is(.sigma-card-timestamp-text, .sigma-card-options-wrapper, .sigma-card-options-btn) {
        height: 22px !important;
        min-height: 22px !important;
        line-height: 22px !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) :is(.sigma-card-like-btn, .sigma-card-comment-btn) {
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 9px !important;
        gap: 4px !important;
        font-size: 10px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) :is(.sigma-card-like-btn, .sigma-card-comment-btn) span {
        font-size: 10px !important;
    }
    body :is(.sigma-announcement-card, .announcement-card, #sigma-post-dialog-modal) :is(.sigma-card-like-btn, .sigma-card-comment-btn) i {
        font-size: 10px !important;
        width: 10px !important;
    }
    body .sigma-announcement-card .sigma-card-timestamp-text,
    body .announcement-card .sigma-card-timestamp-text,
    body #sigma-post-dialog-modal .sigma-card-timestamp-text {
        font-size: 10px !important;
        line-height: 14px !important;
    }
    body .sigma-announcement-card .sigma-card-options-btn,
    body .sigma-announcement-card .sigma-card-options-btn i,
    body .announcement-card .sigma-card-options-btn,
    body .announcement-card .sigma-card-options-btn i {
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    }
}

body .sigma-card-author-fullname,
body .sigma-card-author-fullname span,
body .sigma-card-author-text-col .sigma-card-audience-badge,
body .sigma-card-author-text-col .sigma-card-audience-badge .sigma-card-badge-label-text,
body .sigma-card-author-text-col .sigma-card-audience-badge .sigma-badge-sec-name,
body .sigma-card-author-text-col .sigma-card-audience-badge .sigma-badge-subj-name {
    color: #000000 !important;
}
body .sigma-card-author-role-subtitle,
body .sigma-card-timestamp-text {
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
}
@media (hover: none), (pointer: coarse) {
    body .sigma-comment-delete-btn {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        min-width: 44px;
        min-height: 44px;
    }
}

html body .sigma-card-like-btn:not(.liked):is(:hover, :focus-visible, :active),
html body .sigma-card-comment-btn:is(:hover, :focus-visible, :active) {
    background: #eeeeee !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
}
html body .sigma-card-like-btn:not(.liked):is(:hover, :focus-visible, :active) :is(i, span),
html body .sigma-card-comment-btn:is(:hover, :focus-visible, :active) :is(i, span) {
    color: inherit !important;
}

#sigma-post-dialog-modal .sigma-card-audience-badge,
#sigma-post-dialog-modal .sigma-card-audience-badge span {
    color: #000000 !important;
}
#sigma-post-dialog-modal .sigma-comment-bubble .rounded-full {
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    pointer-events: none;
    cursor: default;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

body .sigma-card-post-title,
body .sigma-card-post-body,
body :is(.sigma-announcement-card, .announcement-card) .sigma-card-post-title,
body :is(.sigma-announcement-card, .announcement-card) .sigma-card-post-body,
body :is(.sigma-announcement-card, .announcement-card) .sigma-card-post-body p,
.shared-private-comments p.whitespace-pre-wrap {
    color: #000000 !important;
}

.sigma-comment-input-pill {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 6px 12px 6px 16px !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
}

.sigma-comment-input-pill:focus-within {
    background: #ffffff !important;
    border-color: #FFD000 !important;
    box-shadow: none !important;
}

.sigma-comment-textarea,
textarea.sigma-comment-textarea,
textarea#sigma-dialog-comment-input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    resize: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #0f172a !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.sigma-comment-textarea::placeholder,
textarea#sigma-dialog-comment-input::placeholder {
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
}

.sigma-comment-composer-row {
    align-items: flex-start !important;
}
.sigma-comment-composer-avatar {
    margin-top: 6px;
    flex: 0 0 auto;
}
.sigma-announcement-comment-composer {
    align-items: flex-end !important;
}
.sigma-announcement-comment-composer .sigma-comment-composer-avatar {
    margin-top: 0;
    margin-bottom: 6px;
}
.sigma-announcement-comment-composer .sigma-comment-input-pill {
    align-items: flex-end !important;
}
.sigma-comment-send-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #047857;
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease;
}
.sigma-comment-send-btn:hover {
    background: #f1f5f9;
    transform: scale(1.1);
}
.sigma-comment-send-btn:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
    .sigma-comment-send-btn { transition: none; }
}

/* Scaled down material label badges across all material views */
.material-detail-type-badge,
.material-detail-badge,
span.material-detail-type-badge,
span.material-detail-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 1.5px 6.5px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: capitalize !important;
    box-sizing: border-box !important;
}

.material-detail-type-badge i,
.material-detail-badge i {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.material-detail-back-btn,
button.material-detail-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: #000000 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.material-detail-back-btn:hover {
    background-color: #f1f5f9 !important;
}

.material-detail-back-btn:active {
    background-color: #e2e8f0 !important;
}

@media (min-width: 640px) {
    .material-detail-back-btn,
    button.material-detail-back-btn {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin-left: -4px !important;
        margin-top: 2px !important;
    }

    .material-detail-back-btn i.fa-arrow-left,
    .material-detail-back-btn i[class*="fa-arrow"] {
        display: inline-block !important;
        font-size: 15px !important;
        color: #000000 !important;
    }

    .material-detail-back-btn i.fa-chevron-left,
    .material-detail-back-btn i[class*="fa-chevron"] {
        display: none !important;
    }
}

@media (max-width: 639.98px) {
    .material-detail-back-btn,
    button.material-detail-back-btn {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin-left: -4px !important;
        margin-top: 1px !important;
    }

    .material-detail-back-btn i.fa-chevron-left,
    .material-detail-back-btn i[class*="fa-chevron"] {
        display: inline-block !important;
        font-size: 13.5px !important;
        color: #000000 !important;
    }

    .material-detail-back-btn i.fa-arrow-left,
    .material-detail-back-btn i[class*="fa-arrow"] {
        display: none !important;
    }
}

/* Scaled down SIGMA AI Assistance toggle button and icon */
#toggle-ai-assistance-card-btn {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2.5px 9px !important;
    border-radius: 7px !important;
    line-height: 1.25 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
}

#toggle-ai-assistance-card-btn i,
#toggle-ai-card-btn-icon {
    font-size: 9.5px !important;
    line-height: 1 !important;
}

@media (max-width: 639.98px) {
    #toggle-ai-assistance-card-btn {
        font-size: 10px !important;
        padding: 2px 7.5px !important;
        border-radius: 6px !important;
    }

    #toggle-ai-assistance-card-btn i,
    #toggle-ai-card-btn-icon {
        font-size: 9px !important;
    }
}

/* SIGMA AI Assistance Panel: Full Width & No Radius */
#teacher-ai-assistance-panel,
#student-ai-assistance-panel,
.sigma-ai-assistance-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    #teacher-ai-assistance-panel,
    #student-ai-assistance-panel,
    .sigma-ai-assistance-panel {
        border-radius: 16px !important;
    }

    /* Desktop AI controls share a deliberate, readable control scale. */
    #toggle-ai-assistance-card-btn {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        line-height: 1 !important;
    }

    #toggle-ai-assistance-card-btn i,
    #toggle-ai-card-btn-icon {
        font-size: 11px !important;
    }

    .ai-header-score-area > div,
    #ai-review-action-btn {
        min-height: 32px !important;
        box-sizing: border-box !important;
    }

    .ai-header-score-area > div {
        padding: 0 12px !important;
        border-radius: 8px !important;
        gap: 5px !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .ai-header-score-area span:first-child,
    .ai-header-score-area span:last-child,
    #ai-review-action-btn {
        font-size: 12px !important;
    }

    #ai-review-action-btn {
        padding: 0 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        line-height: 1 !important;
    }

    #ai-review-action-btn i {
        font-size: 11px !important;
    }

    .ai-panel-header-grid {
        align-items: center !important;
    }

    .ai-header-score-area,
    .ai-header-btn-area {
        align-self: center !important;
        height: 32px !important;
    }
}

@media (max-width: 768px) {
    #teacher-ai-assistance-panel,
    #student-ai-assistance-panel,
    .sigma-ai-assistance-panel {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
}

/* ═══ SIGMA AI Assistance Header Layout & Scaled Controls ═══ */
@media (max-width: 767px) {
    html body #section-topic-content #topic-content-main #sigma-ai-feedback-panel {
        order: 5 !important;
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
        margin: 0 14px 20px !important;
        border-radius: 20px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    html body #section-topic-content #topic-content-main .assessment-material-detail-view > :is(#teacher-ai-assistance-panel, #sigma-ai-feedback-panel) {
        width: calc(100% - 28px) !important;
        margin: 0 14px 20px !important;
        border-radius: 20px !important;
        padding: 16px !important;
    }
    .sigma-ai-criteria-count {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-bottom: 8px !important;
    }
}

html body :is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area):has(> span > .fa-clock-rotate-left) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

html body :is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area) > span:has(> .fa-clock-rotate-left) {
    order: -1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 30px !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    white-space: normal !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    html body #student-submission-action-area:has(> span > .fa-clock-rotate-left) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
    html body #student-submission-action-area#student-submission-action-area > span:has(> .fa-clock-rotate-left),
    html body #student-submission-action-area#student-submission-action-area > div > span {
        min-height: 28px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }
    .canonical-tabs-bar button[title="Back to Topics"] {
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        flex: 0 0 36px !important;
    }
    html body :is(#teacher-submission-action-area, #admin-submission-action-area):has(> span > .fa-clock-rotate-left) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }
    html body :is(#teacher-submission-action-area, #admin-submission-action-area) > span:has(> .fa-clock-rotate-left) {
        order: 0;
    }
}

@media (max-width: 767px) {
    html body #student-submission-action-area:has(> span > .fa-clock-rotate-left) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    html body #student-submission-action-area#student-submission-action-area > span:has(> .fa-clock-rotate-left),
    html body #student-submission-action-area#student-submission-action-area > div > span {
        min-height: 24px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
        line-height: 14px !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }
    html body #student-submission-action-area > span > .fa-clock-rotate-left {
        font-size: 9px !important;
    }
    html body :is(#teacher-submission-action-area, #admin-submission-action-area):has(> span > .fa-clock-rotate-left) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    html body :is(#teacher-submission-action-area, #admin-submission-action-area) > span:has(> .fa-clock-rotate-left) {
        order: 0;
        min-height: 26px !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        font-size: 9px !important;
        line-height: 14px !important;
    }
    html body :is(#teacher-submission-action-area, #admin-submission-action-area) button {
        font-size: 10px !important;
        padding: 4px 0 !important;
    }
}

html body #student-submission-action-area > div > span {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 30px !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    white-space: normal !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ai-panel-header-grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "title badge"
        "btn btn" !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    align-items: center !important;
}

.ai-panel-header-grid:not(:has(.ai-header-score-area)) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "title" !important;
}

@media (min-width: 640px) {
    .ai-panel-header-grid {
        grid-template-columns: 1fr auto auto !important;
        grid-template-areas:
            "title badge btn" !important;
        row-gap: 6px !important;
        column-gap: 10px !important;
    }
}
.topic-score-sticky button.teacher-view-gradebook-btn,
[id$="-class-panel-card"] button.teacher-view-gradebook-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    white-space: normal !important;
}

.teacher-view-gradebook-btn span {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: inherit !important;
}

.teacher-view-gradebook-btn i {
    flex-shrink: 0;
    color: inherit !important;
}

.teacher-view-gradebook-btn:focus-visible {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    #section-topic-content .topic-score-sticky .grading-student-avatar-wrap .sigma-user-avatar {
        background-color: #f1f5f9 !important;
        color: #94a3b8 !important;
    }

    #section-topic-content .topic-score-sticky .grading-student-avatar-wrap .sigma-user-avatar i {
        color: #94a3b8 !important;
    }
}

@media (min-width: 768px) {
    .topic-score-sticky button.teacher-save-grade-btn,
    .topic-score-sticky button.teacher-view-gradebook-btn,
    [id$="-class-panel-card"] button.teacher-save-grade-btn,
    [id$="-class-panel-card"] button.teacher-view-gradebook-btn {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 768px) {
    :is(#section-grades, #school-grades-view) .sigma-grades-page,
    :is(#section-grades, #school-grades-view) #admin-grades-gradebook-view,
    :is(#section-grades, #school-grades-view) #admin-gradebook-workspace-content,
    :is(#section-grades, #school-grades-view) #admin-gradebook-workspace-content > div {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :is(#section-grades, #school-grades-view) #admin-grades-gradebook-view,
    :is(#section-grades, #school-grades-view) #admin-gradebook-workspace-content {
        overflow: visible !important;
    }

    #detail-section-attendance,
    #detail-section-attendance > div,
    #detail-section-attendance .attendance-monthly-card,
    #detail-section-attendance .attendance-grid-container {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :is(#section-grades, #school-grades-view):has(#admin-grades-gradebook-view:not(.hidden)),
    #detail-section-attendance:not(.hidden) {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    html:has(#admin-grades-gradebook-view:not(.hidden)),
    html:has(#detail-section-attendance:not(.hidden)) {
        scroll-padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

.mobile-grade-minimize-btn,
.mobile-grade-maximize-btn {
    display: none !important;
}

@media (max-width: 768px) {
    :is(.assessment-grading-details-card, .assessment-submission-details-card) .space-y-1\.5 > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) fit-content(55%);
        align-items: center !important;
        column-gap: 12px !important;
        line-height: 16px !important;
    }

    :is(.assessment-grading-details-card, .assessment-submission-details-card) .space-y-1\.5 > div > span:first-child {
        display: grid !important;
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: center !important;
        gap: 8px !important;
        min-width: 0;
    }

    :is(.assessment-grading-details-card, .assessment-submission-details-card) .space-y-1\.5 > div > :last-child {
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    :is(.assessment-grading-details-card, .assessment-submission-details-card) .space-y-1\.5 > div > span:first-child > i,
    :is(.assessment-grading-details-card, .assessment-submission-details-card) p > i {
        width: 16px !important;
        min-width: 16px !important;
        line-height: 16px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    :is(.assessment-grading-details-card, .assessment-submission-details-card) p {
        align-items: center !important;
        gap: 8px !important;
        line-height: 16px !important;
    }

    #section-topic-content .mobile-grade-header-actions {
        flex-direction: row-reverse;
        align-items: center !important;
        gap: 4px !important;
    }

    #section-topic-content .topic-score-sticky .desktop-grading-header .mobile-grade-header-actions > button {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 28px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #section-topic-content .topic-score-sticky:not(.is-minimized) .desktop-grading-header .mobile-grade-maximize-btn {
        display: none !important;
    }

    #section-topic-content .topic-score-sticky .desktop-grading-header .mobile-grade-minimize-btn,
    #section-topic-content .topic-score-sticky.is-minimized .desktop-grading-header .mobile-grade-maximize-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 32px !important;
        padding: 0 !important;
        margin-left: 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        background: transparent !important;
        border: none !important;
        color: #15803d !important;
        cursor: pointer;
    }

    #section-topic-content .mobile-grade-minimize-btn:hover,
    #section-topic-content .mobile-grade-minimize-btn:focus-visible {
        color: #166534 !important;
        text-decoration: none;
    }

    #section-topic-content .topic-score-sticky .desktop-grading-toggle-btn {
        display: inline-flex !important;
    }

    #section-topic-content .topic-score-sticky.is-minimized .mobile-score-sheet-body > :not(.desktop-grading-header),
    #section-topic-content .topic-score-sticky.is-minimized > :not(.mobile-score-sheet-body),
    #section-topic-content .topic-score-sticky.is-minimized .desktop-grading-toggle-btn {
        display: none !important;
    }

    #section-topic-content .topic-score-sticky.is-minimized .desktop-grading-header {
        border: none !important;
        padding-bottom: 0 !important;
        cursor: pointer !important;
    }
}
body p.material-detail-body-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #000 !important;
    margin: 0 !important;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    body button.sigma-btn[onclick*="openStudentQuizReviewPlayer"] {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        line-height: 16px !important;
        max-width: 100%;
    }

    body button.sigma-btn[onclick*="openStudentQuizReviewPlayer"] span {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    body button.sigma-btn[onclick*="openStudentQuizReviewPlayer"] i {
        font-size: 11px !important;
    }

    body p.material-detail-body-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere;
    }

    body .topic-page-tabs-header nav button,
    body .topic-page-tabs-header nav button span,
    body #topic-content-header nav button,
    body #topic-content-header nav button span,
    body #topic-main-header nav button,
    body #topic-main-header nav button span {
        font-size: 12px !important;
    }

    body .topic-page-tabs-header .canonical-tabs-bar,
    body #topic-content-header .canonical-tabs-bar,
    body #topic-main-header .canonical-tabs-bar,
    body .topic-page-tabs-header > div,
    body #topic-content-header > div,
    body #topic-main-header > div {
        height: 44px !important;
        min-height: 44px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body .topic-page-tabs-header nav,
    body #topic-content-header nav,
    body #topic-main-header nav {
        gap: 4px !important;
    }

    body .topic-page-tabs-header nav button,
    body #topic-content-header nav button,
    body #topic-main-header nav button {
        padding: 0 8px !important;
        line-height: 18px !important;
        border-bottom-width: 3px !important;
    }
}

/* Keep the submission rail scrollbar at normal desktop thickness. */
@media (min-width: 768px) {
    body #section-topic-content #topic-right-section.teacher-topic-progress-rail,
    body #section-topic-content #topic-right-section {
        scrollbar-width: auto !important;
        scrollbar-color: transparent transparent !important;
    }

    body #section-topic-content #topic-right-section.teacher-topic-progress-rail:hover,
    body #section-topic-content #topic-right-section:hover {
        scrollbar-color: rgba(0, 0, 0, .18) transparent !important;
    }

    body #section-topic-content #topic-right-section::-webkit-scrollbar {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
    }

    body #section-topic-content #topic-right-section::-webkit-scrollbar-track {
        background: transparent !important;
    }

    body #section-topic-content #topic-right-section.teacher-topic-progress-rail::-webkit-scrollbar-thumb,
    body #section-topic-content #topic-right-section::-webkit-scrollbar-thumb {
        background: transparent !important;
        border: 3px solid transparent !important;
        background-clip: padding-box !important;
        border-radius: 8px !important;
    }

    body #section-topic-content #topic-right-section.teacher-topic-progress-rail:hover::-webkit-scrollbar-thumb,
    body #section-topic-content #topic-right-section:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .18) !important;
    }

    body #section-topic-content #topic-right-section.teacher-topic-progress-rail::-webkit-scrollbar-thumb:hover,
    body #section-topic-content #topic-right-section::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .32) !important;
    }
}

/* Shared material icons: portal lists and the admin/teacher editor. */
.material-panel-icon-group {
    width: 60px !important;
    min-width: 60px !important;
    gap: 4px !important;
}

.material-panel-icon-group > div,
.material-panel-play-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
}

.material-panel-icon-group > div {
    border-radius: 8px !important;
}

.material-panel-icon-group > div > i {
    font-size: 22px !important;
}

.material-panel-icon-group > span,
.material-detail-type-badge {
    box-sizing: border-box !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    padding: 2px 0 !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.material-panel-icon-group > span {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.material-detail-type-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
}

.material-detail-type-badge > i {
    font-size: 10px !important;
}
/* Initial feed reveal matches the login skeleton without covering surrounding controls. */
html body .assessment-material-detail-view .shared-private-comments {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 24px;
    padding-top: 20px !important;
}
html body .shared-private-comments #submission-comments-list-container:not(:has(*)) {
    display: none;
}
html body .shared-private-comments-heading ~ div {
    margin-top: 16px !important;
}
html body .shared-private-comments-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}
html body .shared-private-comments button[id^="submission-add-comment-toggle-btn-"],
html body .shared-private-comments .record-add-comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px !important;
    min-height: 25px !important;
    width: auto !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-sizing: border-box;
    background: #f7f7f7 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 500 !important;
}
html body .shared-private-comments button[id^="submission-add-comment-toggle-btn-"] i,
html body .shared-private-comments .record-add-comment i {
    font-size: 11px !important;
    width: 12px;
    line-height: 1;
    color: inherit !important;
}
html body .shared-private-comments button[id^="submission-add-comment-toggle-btn-"]:hover,
html body .shared-private-comments .record-add-comment:hover {
    background: #eeeeee !important;
    color: rgba(0, 0, 0, 0.45) !important;
}
html body .shared-private-comments-heading > i {
    color: #15803d !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    flex: 0 0 20px;
    line-height: 1;
}
html body .shared-private-comments-heading > h3 {
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 15px !important;
    letter-spacing: 0 !important;
}
html body .shared-private-comments-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 24px;
    height: 24px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 7px !important;
    line-height: 1 !important;
}

.sigma-insight-link {
    color: #15803d !important;
    text-decoration: none !important;
    text-underline-offset: 3px;
}
.sigma-insight-link:focus-visible { text-decoration: underline !important; }
@media (hover: hover) and (pointer: fine) {
    .sigma-insight-link:hover { text-decoration: underline !important; }
}

.sigma-feed-initial-loading {
    position: relative !important;
    overflow: hidden !important;
    min-height: 120px;
    background: #e2e8f0 !important;
    border-radius: 20px !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.sigma-feed-initial-loading > * {
    visibility: hidden !important;
}
.sigma-feed-initial-loading::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    inset: 0 auto 0 -38% !important;
    width: 38% !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%) !important;
    animation: sigma-sweep-band 1.2s linear infinite !important;
    will-change: transform !important;
}
@keyframes sigma-sweep-band {
    from { transform: translateX(0%); }
    to { transform: translateX(365%); }
}
@keyframes sigma-feed-sweep {
    from { transform: translateX(0%); }
    to { transform: translateX(365%); }
}
.sigma-batch-placeholder {
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
    width: 100%;
    margin: 8px 0;
    border-radius: 16px !important;
}
.sigma-batch-placeholder--post { height: 220px; border-radius: 16px !important; }
.sigma-batch-placeholder--notification { height: 80px; border-radius: 12px !important; }
.sigma-batch-placeholder::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    inset: 0 auto 0 -38% !important;
    width: 38% !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%) !important;
    animation: sigma-sweep-band 1.2s linear infinite !important;
    will-change: transform !important;
}
body .notif-batch-loading { display: block; padding: 0; }

/* Dynamic Rendering Loading Surface */
.sigma-rendering-loading,
[data-sigma-rendering="true"] {
    position: relative !important;
    overflow: hidden !important;
    color: transparent !important;
    background: #e2e8f0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    min-height: 48px;
    border-radius: 20px !important;
}
.sigma-rendering-loading > *,
[data-sigma-rendering="true"] > * {
    visibility: hidden !important;
}
.sigma-rendering-loading::after,
[data-sigma-rendering="true"]::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -38% !important;
    width: 38% !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%) !important;
    animation: sigma-sweep-band 1.2s linear infinite !important;
    will-change: transform !important;
}
.sigma-rendering-loading--hero { border-radius: 24px !important; }
.sigma-rendering-loading--card { border-radius: 20px !important; }
.sigma-rendering-loading--panel { border-radius: 16px !important; }
.sigma-rendering-loading--pill { border-radius: 9999px !important; }
.sigma-rendering-loading--circle { border-radius: 50% !important; }

@media (max-width: 768px) {
    .sigma-feed-initial-loading { border-radius: 16px !important; }
    .sigma-batch-placeholder { border-radius: 12px !important; }
    .sigma-batch-placeholder--post { border-radius: 12px !important; }
    .sigma-rendering-loading, [data-sigma-rendering="true"] { border-radius: 16px !important; }
    .sigma-rendering-loading--hero { border-radius: 20px !important; }
    .sigma-rendering-loading--card { border-radius: 16px !important; }
    .sigma-rendering-loading--panel { border-radius: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sigma-feed-initial-loading::after,
    .sigma-batch-placeholder::after,
    .sigma-rendering-loading::after,
    [data-sigma-rendering="true"]::after {
        animation: none !important;
    }
}
/* Private threads share the open comment layout, without message cards. */
.shared-private-comments .sigma-private-comment-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.shared-private-comments .sigma-private-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.shared-private-comments .sigma-private-comment-row > .sigma-private-comment-content {
    flex: 0 1 auto;
    max-width: calc(85% - 48px);
}
.shared-private-comments .sigma-private-comment-message {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    overflow-wrap: anywhere;
}
.shared-private-comments .sigma-private-comment-content > div:last-child:not(:has(button)):not(.sigma-private-comment-message) {
    display: none;
}
.shared-private-comments .sigma-private-comment-message > div:first-child {
    flex-wrap: wrap;
}
.shared-private-comments .sigma-private-comment-role {
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45));
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 700;
}
.shared-private-comments .sigma-private-comment-time {
    color: #999;
    font-size: 10px;
    line-height: 14px;
    margin-bottom: 6px;
}

html body .shared-private-comments #submission-comments-list-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding: 2px 6px 2px 0;
}
html body .shared-private-comments #submission-comments-list-container:focus-visible {
    outline: 2px solid #15803d !important;
    outline-offset: 3px !important;
}
@media (max-width: 767px) {
    html body .shared-private-comments #submission-comments-list-container {
        max-height: min(320px, 45dvh);
    }
    html body .shared-private-comments .sigma-private-comment-row {
        gap: 8px;
        margin-bottom: 12px;
    }
    html body .shared-private-comments .sigma-private-comment-message > div:first-child > span:first-child,
    html body .shared-private-comments .sigma-private-comment-message > p {
        font-size: 12px !important;
        line-height: 18px !important;
    }
    html body .shared-private-comments .sigma-private-comment-role {
        font-size: 9px;
        padding: 2px 5px;
    }
    html body .shared-private-comments .sigma-private-comment-content > div:last-child > button {
        font-size: 11px !important;
        min-width: 32px;
        min-height: 32px;
        padding: 4px 6px !important;
    }
    html body .shared-private-comments [id^="submission-add-comment-toggle-btn-"] {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-height: 32px;
        gap: 6px !important;
        border-radius: 999px !important;
    }
    html body .shared-private-comments [id^="submission-add-comment-toggle-btn-"] i {
        font-size: 11px !important;
    }
    html body .shared-private-comments .sigma-comment-send-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    html body .shared-private-comments .sigma-comment-textarea,
    html body .shared-private-comments .sigma-comment-textarea::placeholder {
        font-size: 12px !important;
        line-height: 18px !important;
    }
}
@media (max-width: 768px) {
    html body .assessment-material-detail-view .assessment-material-details-grid,
    html body #section-topic-content #topic-content-main .assessment-material-details-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 14px 20px !important;
        box-sizing: border-box !important;
        gap: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    html body .assessment-material-detail-view :is(#teacher-ai-assistance-panel, #student-ai-assistance-panel, .sigma-ai-assistance-panel) {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
        margin: 0 14px 20px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 639px) {
    #teacher-rubric-status-content > div:has(#teacher-rubric-file-label) {
        flex-direction: column;
        align-items: stretch;
        gap: 6px !important;
        padding: 10px !important;
    }

    #teacher-rubric-status-content > div > div:has(#teacher-rubric-file-label) {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    #teacher-rubric-status-content #teacher-rubric-file-label {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.5;
        min-width: 0;
    }

    #teacher-rubric-status-content #teacher-rubric-file-label + span {
        grid-column: 2;
        justify-self: start;
        font-size: 9px !important;
        line-height: 12px !important;
        padding: 2px 6px !important;
        gap: 3px !important;
    }
    #teacher-rubric-status-content #teacher-rubric-file-label + span i {
        font-size: 8px !important;
    }

    #teacher-rubric-status-content > div > div:has(button) {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px !important;
        margin: 0 !important;
    }

    #teacher-rubric-status-content button {
        min-height: 32px;
        padding: 4px 6px !important;
    }
}

@media (min-width: 768px) and (hover: hover) {
    #teacher-rubric-status-content button {
        padding: 6px 8px;
        border-radius: 6px;
        transition: background-color 0.15s ease;
    }
    #teacher-rubric-status-content button:not(.sigma-rubric-upload):hover {
        background-color: #f1f5f9 !important;
    }
    #teacher-rubric-status-content button[onclick*="teacher-rubric-file-input"]:not(.sigma-rubric-upload):hover {
        color: #047857 !important;
    }
    #teacher-rubric-status-content button[onclick*="removeTeacherUploadedRubric"]:hover {
        color: #000 !important;
    }
}

.assessment-private-comments-panel {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
}

html body .sigma-hidden-status-icon {
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
html body div:has(> p):has(> div > .sigma-hidden-status-icon) {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
}
html body div:has(> .sigma-hidden-status-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .topic-group-block > div:first-child,
    .topic-group-block .release-item-row {
        transition: background-color 0.15s ease;
    }
    .topic-group-block > div:first-child:hover,
    .topic-group-block .release-item-row:hover {
        background-color: #f0f4f8 !important;
    }
}

.assessment-private-comments-panel .sigma-private-comment-row .sigma-private-comment-content {
    max-width: calc(100% - 48px);
    flex: 1;
}

html body .assessment-private-comments-panel .sigma-private-comment-row {
    margin-bottom: 16px !important;
}
html body .assessment-private-comments-panel .sigma-private-comment-message > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: start;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}
html body .assessment-private-comments-panel .sigma-private-comment-role {
    white-space: nowrap;
    justify-self: start;
}
html body .assessment-private-comments-panel .sigma-comment-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0 !important;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45));
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
html body .assessment-private-comments-panel .sigma-comment-delete-btn:hover {
    background: #f1f5f9;
    color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45));
}
html body .assessment-private-comments-panel .sigma-comment-delete-btn:active {
    background: #e2e8f0;
}
html body .assessment-private-comments-panel .sigma-comment-delete-btn,
html body .assessment-private-comments-panel .sigma-comment-delete-btn i {
    color: rgba(0, 0, 0, 0.45) !important;
}
html body .assessment-private-comments-panel .sigma-private-comment-time {
    margin-top: 2px;
    margin-bottom: 4px;
}
html body .shared-private-comments .sigma-private-comment-content {
    min-width: 0;
}
html body .shared-private-comments .sigma-private-comment-message > div:first-child > span:first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 18px !important;
    letter-spacing: 0;
}
html body .shared-private-comments .sigma-private-comment-message > p {
    margin: 0 !important;
    line-height: 20px !important;
    overflow-wrap: anywhere;
}
html body .shared-private-comments .sigma-private-comment-time {
    line-height: 16px !important;
    font-size: 11px !important;
}
html body .shared-private-comments-heading > h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .assessment-private-comments-panel .sigma-comment-composer-row {
    align-items: center !important;
    padding-top: 0 !important;
    margin-top: 12px !important;
    gap: 8px;
}
html body .assessment-private-comments-panel .sigma-comment-composer-avatar {
    margin-top: 0;
}
html body .assessment-private-comments-panel .sigma-comment-input-pill {
    align-items: center !important;
    min-height: 40px !important;
    padding: 4px 10px 4px 12px !important;
    border-radius: 20px !important;
}

@media (max-width: 767px) {
    .assessment-material-detail-view > .assessment-private-comments-panel,
    #topic-content-main > .assessment-private-comments-panel {
        order: 999 !important;
        width: calc(100% - 28px);
        margin: 0 14px 20px;
        padding: 16px;
        border-radius: 20px;
    }
    html body #section-topic-content #topic-content-main > .assessment-private-comments-panel {
        margin-top: 20px !important;
    }
}
html body .topic-student-cover .topic-student-cover__row > .sigma-user-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

html body #section-topic-content .topic-score-sticky .desktop-grading-header,
html body #section-topic-content .topic-score-sticky .desktop-grading-header:is(:focus, :focus-visible, :focus-within, :active, :hover) {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

html body #teacher-ai-assistance-panel .ai-header-title-area {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
}

html body #teacher-grading-status-trigger-btn:disabled,
html body #teacher-grading-status-trigger-btn:disabled:is(:hover, :active, :focus) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: none !important;
}

html body .score-draft-flag {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    box-sizing: border-box;
}

html body .assessment-closed-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #dce7df;
    border-radius: 8px;
    background: #f4faf6;
    padding: 16px;
    margin: 20px 0;
}
html body .assessment-closed-notice-icon {
    flex: 0 0 20px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #15803d;
}
html body .assessment-closed-notice-content {
    min-width: 0;
}
html body .assessment-closed-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-top: 12px;
}
html body .assessment-closed-badge-row button {
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
html body .assessment-closed-badge-row button:hover,
html body .assessment-closed-badge-row button:focus-visible {
    background: #f1f5f9 !important;
}
html body .assessment-closed-badge,
html body #student-submission-action-area#student-submission-action-area .assessment-closed-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f1f5f9;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px !important;
    line-height: 16px !important;
    box-sizing: border-box;
}
html body .assessment-closed-badge > span {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
}
html body .assessment-closed-badge > i {
    font-size: 11px !important;
    flex-shrink: 0 !important;
}
@media (max-width: 767px) {
    html body .assessment-closed-badge,
    html body #student-submission-action-area#student-submission-action-area .assessment-closed-badge {
        min-height: 28px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
}
html body .assessment-closed-notice h4 {
    margin: 0 0 6px !important;
    color: #15803d !important;
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 700;
}
html body .assessment-closed-notice p {
    color: #000 !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
@media (max-width: 767px) {
    html body .assessment-closed-notice {
        padding: 12px;
        gap: 8px;
        margin: 16px 0;
    }
    html body .assessment-closed-notice-icon {
        flex-basis: 16px;
        font-size: 14px;
        line-height: 20px;
    }
    html body .assessment-closed-notice h4 {
        font-size: 12px !important;
        line-height: 20px !important;
        margin-bottom: 4px !important;
    }
    html body .assessment-closed-notice p {
        font-size: 12px !important;
        line-height: 18px !important;
    }
}

html body #sigma-universal-ask-card.sigma-universal-ask-card--grading {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    padding: 24px !important;
}
html body .sigma-universal-ask-card--grading #sigma-ask-title {
    font-size: 18px !important;
    line-height: 26px !important;
}
html body .sigma-universal-ask-card--grading #sigma-ask-desc {
    font-size: 14px !important;
    line-height: 22px !important;
}
html body .sigma-universal-ask-card--grading #sigma-ask-actions button {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}
@media (min-width: 768px) {
    html body .sigma-universal-ask-card--grading #sigma-ask-actions {
        grid-template-columns: minmax(110px, 1fr) minmax(250px, 1.6fr) !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }
    html body .sigma-universal-ask-card--grading #sigma-ask-actions button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 16px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }
}
@media (max-width: 767px) {
    html body #sigma-universal-ask-card.sigma-universal-ask-card--grading {
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
        padding: 18px !important;
    }
    html body .sigma-universal-ask-card--grading #sigma-ask-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }
    html body .sigma-universal-ask-card--grading #sigma-ask-desc {
        font-size: 12px !important;
        line-height: 18px !important;
    }
    html body .sigma-universal-ask-card--grading #sigma-ask-actions button {
        min-height: 40px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        padding: 8px !important;
    }
}

html body .assessment-submission-details-card :is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area) {
    border-top: 0 !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
}
#section-grades.dynamic-section.hidden,
#section-topic-content.dynamic-section.hidden {
    display: none !important;
}

.submission-work-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 12px;
}
.submission-work-toolbar > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.submission-work-toolbar h3 { margin: 0 !important; }
.submission-attempt-selector-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    flex-shrink: 0;
}
.submission-attempt-selector-row label { margin: 0; white-space: nowrap; }
html body .room-quarter-switch__btn{width:32px;min-width:32px;height:32px;justify-content:center;padding:0!important}
html body .room-quarter-switch__btn i{font-size:11px!important;transform:none!important}
html body .room-quarter-switch__btn[aria-expanded="true"] i{transform:rotate(180deg)!important}
html body #tab-btn-topics:has(+ .room-quarter-switch:not([hidden])){
    padding-right:6px!important;
}
html body #tab-btn-topics + .room-quarter-switch:not([hidden]){
    margin-left:-4px;
}
html body #tab-btn-topics.active + .room-quarter-switch:not([hidden]) .room-quarter-switch__btn i{
    color:#15803d!important;
}
@media (max-width:768px){
    html body .room-quarter-switch__btn i{font-size:8px!important}
    html body #tab-btn-topics:has(+ .room-quarter-switch:not([hidden])){
        justify-content:flex-end!important;
        padding-right:4px!important;
    }
    html body #tab-btn-topics + .room-quarter-switch:not([hidden]) .room-quarter-switch__btn{
        width:24px!important;
        min-width:24px!important;
    }
}
@media (min-width:769px){
    html body #tab-btn-topics + .room-quarter-switch:not([hidden]){margin-left:-8px}
}
@media (min-width:769px){
    html body .room-quarter-menu{
        width:180px!important;
        min-width:180px!important;
        padding:5px!important;
        border-radius:8px!important;
    }
    html body .room-quarter-menu__item{
        min-height:40px!important;
        padding:10px 12px!important;
        font-size:14px!important;
        line-height:20px!important;
        box-sizing:border-box;
        border-radius:6px!important;
    }
}
html body .desktop-grading-header{border-bottom:0!important;cursor:pointer!important;border-radius:0}
@media (min-width:769px){
    html body .topic-progress-card.topic-score-sticky:has(.desktop-grading-header){
        border-radius:22px!important;
        overflow:hidden!important;
    }
    html body .topic-score-sticky .desktop-grading-header{
        width:calc(100% + 40px)!important;
        margin:-20px -20px 0!important;
        padding:20px 20px 8px!important;
        box-sizing:border-box;
        overflow:hidden;
    }
    html body #section-topic-content .topic-score-sticky .desktop-grading-header,
    html body .topic-score-sticky .desktop-grading-header:is(:hover,:focus-visible){
        border-radius:21px 21px 0 0!important;
        clip-path:inset(0 round 21px 21px 0 0);
    }
}
@media (max-width:768px){
    html body .topic-score-sticky .desktop-grading-header{
        width:calc(100% + 24px)!important;
        margin:-9px -12px 0!important;
        padding:9px 12px 3px!important;
        box-sizing:border-box;
        border-radius:0!important;
    }
}
html body .topic-score-sticky .desktop-grading-header,
html body #section-topic-content .topic-score-sticky .desktop-grading-header:is(:hover,:focus-visible,:active){
    background:transparent!important;
}
html body .desktop-grading-header .topic-progress-title,
html body .desktop-grading-header .mobile-grade-header-actions{pointer-events:none}
.submission-attempt-select-wrap{position:relative;display:inline-flex;max-width:100%;min-width:0}
html body .submission-attempt-select-wrap .submission-attempt-select{appearance:none!important;-webkit-appearance:none!important;background-image:none!important;padding-right:34px!important;cursor:pointer!important;box-sizing:border-box;line-height:20px}
.submission-attempt-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:#000;pointer-events:none}
.submission-work-toolbar{flex-wrap:wrap}
.submission-attempt-selector-row{max-width:100%;min-width:0}
.submission-attempt-select {
    max-width: 100%;
    min-width: 0;
    height: 38px;
    padding: 6px 30px 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #000;
    font-size: 14px;
}
@media (max-width: 767px) {
    .submission-attempt-selector-row { gap: 8px; font-size: 12px; }
    .submission-work-toolbar { gap: 10px; }
    .submission-work-toolbar .submission-attempt-selector-row { margin-left: auto; }
    .submission-work-toolbar .submission-attempt-select {
        width: 164px;
        height: 32px !important;
        padding: 4px 24px 4px 8px !important;
        font-size: 12px !important;
    }
}
@media (max-width: 767px) {
    .assessment-material-details-grid > .assessment-mobile-score-panel-slot { order: 0; }
    .assessment-material-details-grid > .assessment-submission-details-card { order: 1; }
    .assessment-material-details-grid > .assessment-grading-details-card { order: 2; }
}

html body .assessment-submission-details-card #submission-details-graded-row {
    border-bottom: 0 !important;
}
html body .assessment-submission-details-card :is(#teacher-submission-action-area, #admin-submission-action-area) > div:has(> .sigma-resubmit-action-btn) {
    margin-left: auto !important;
    order: 1;
    justify-content: flex-end;
}
html body .assessment-submission-details-card:has(:is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area):not([hidden]) :is(button, span)) #submission-details-graded-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html body .assessment-submission-details-card :is(#student-submission-action-area, #teacher-submission-action-area, #admin-submission-action-area):not(:has(button, span)) {
    display: none !important;
}
html body #teacher-ai-assistance-panel .ai-header-title-area > span {
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: center !important;
}
html body #teacher-ai-assistance-panel .ai-header-title-area > h3 {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    align-self: center !important;
}

@media (max-width: 767px) {
    html body #teacher-ai-assistance-panel .ai-panel-header-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "title title" "badge btn" !important;
        gap: 12px 8px !important;
    }
    html body #teacher-ai-assistance-panel .ai-header-title-area > h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        font-size: 16px !important;
    }
    html body #teacher-ai-assistance-panel :is(.ai-header-score-area, .ai-header-btn-area) {
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    html body #teacher-ai-assistance-panel .ai-header-score-area > div {
        padding: 4px 6px !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }
    html body #teacher-ai-assistance-panel .ai-header-score-area span,
    html body #teacher-ai-assistance-panel #ai-review-action-btn {
        font-size: 9px !important;
        line-height: 14px !important;
    }
    html body #teacher-ai-assistance-panel #ai-review-action-btn {
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }
}

html body .topic-student-cover .topic-student-cover__row > .sigma-user-avatar i {
    font-size: 15px !important;
}

html body .topic-student-cover .topic-student-cover__row > .sigma-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    html body .topic-student-cover .topic-student-cover__row > .sigma-user-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
    }
    html body .topic-student-cover .topic-student-cover__row > .sigma-user-avatar i {
        font-size: 14px !important;
    }
}

#add-material-dropdown > div {
    color: #000000 !important;
    text-transform: none !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}
#add-material-dropdown button span:first-child {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
#add-material-dropdown button span:last-child {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.sigma-toggle-switch.material-rubric-toggle {
    pointer-events: auto !important;
}
.material-rubric-toggle input:focus-visible + .sigma-toggle-slider {
    outline: 2px solid #15803d;
    outline-offset: 3px;
}
@media (min-width: 769px) {
    #subject-edit-overlay #add-material-dropdown {
        width: 280px !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 12px !important;
        padding: 5px !important;
    }
    #subject-edit-overlay #add-material-dropdown button {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        gap: 10px !important;
    }
    #subject-edit-overlay #add-material-dropdown button > div:first-child {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
    }
    #subject-edit-overlay #add-material-dropdown button > div:first-child i { font-size: 14px !important; }
    #subject-edit-overlay #add-material-dropdown button span:first-child {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    #subject-edit-overlay #add-material-dropdown button span:last-child {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
}
.sigma-rubric-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 104px;
    padding: 20px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sigma-rubric-upload i { font-size: 20px !important; }
div:has(> .sigma-rubric-upload) { width: 100%; }
.flex:has(> div > .sigma-rubric-upload) { flex-wrap: wrap; }
@media (max-width: 768px) {
    .sigma-dashed-dropzone.sigma-rubric-upload {
        background-color: rgba(255, 208, 0, 0.06) !important;
        border-color: #FFD000 !important;
    }
}
.flex:has(> div > .sigma-rubric-upload) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.flex:has(> div > .sigma-rubric-upload) > div:first-child {
    background: transparent;
    padding-bottom: 2px;
}
.flex:has(> div > .sigma-rubric-upload) > div:first-child > i { display: none; }
.flex:has(> div > .sigma-rubric-upload) > div:first-child :is(div, p) { color: #111111 !important; }
.sigma-rubric-upload { min-height: 140px; gap: 6px; }
.sigma-rubric-upload-icon {
    width: 44px; height: 44px; border: 1px solid #dce4ed; border-radius: 12px;
    background: #ffffff; color: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.sigma-rubric-upload-meta { font-size: 12px; line-height: 1.4; font-weight: 400; color: rgba(0, 0, 0, 0.45); }
.sigma-rubric-upload:hover .sigma-rubric-upload-icon { background: #fff3c4; border-color: #FFD000; color: #92400e; }
.sigma-rubric-upload:hover :is(.sigma-rubric-upload-title, .sigma-rubric-upload-meta) { color: #e87500; }
@media (max-width: 768px) {
    .sigma-rubric-upload .sigma-rubric-upload-icon { background: #fff3c4; border-color: #FFD000; color: #92400e; }
    .sigma-rubric-upload :is(.sigma-rubric-upload-title, .sigma-rubric-upload-meta) { color: #e87500; }
}
html body button.sigma-dashed-dropzone.sigma-rubric-upload {
    border-radius: 16px !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
}
html body button.sigma-dashed-dropzone.sigma-rubric-upload:hover,
html body button.sigma-dashed-dropzone.sigma-rubric-upload:focus-visible {
    background-color: #fffcef !important;
    border-color: #FFD000 !important;
}
@media (max-width: 768px) {
    html body button.sigma-dashed-dropzone.sigma-rubric-upload {
        background-color: #fffcef !important;
        border-color: #FFD000 !important;
    }
}
.flex:has(> div > .sigma-rubric-upload) > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
}
.flex:has(> div > .sigma-rubric-upload) > div:first-child > div {
    width: 100%;
    min-width: 0;
}
@media (min-width: 769px) {
    html body .sigma-rubric-upload:not(:hover):not(:focus-visible) :is(.sigma-rubric-upload-icon, .sigma-rubric-upload-icon i, .sigma-rubric-upload-meta) {
        color: rgba(0, 0, 0, 0.45) !important;
    }
    html body .sigma-rubric-upload:not(:hover):not(:focus-visible) .sigma-rubric-upload-title {
        color: #000000 !important;
    }
}
html body :is([data-subject-grade-insight],[data-ai-insight-body]) {color:#000!important}
html body :is([data-subject-grade-insight],[data-ai-insight-body])[data-insight-empty="true"],
html body .sigma-ai-feedback-empty #sigma-ai-feedback-status {color:rgba(0,0,0,.45)!important}
html body .sigma-quarter-dropdown > summary .fa-chevron-down {transition:transform .15s ease}
html body .sigma-quarter-dropdown[open] > summary .fa-chevron-down {transform:rotate(180deg)!important}
html body .sigma-quarter-dropdown:not([open]) > summary .fa-chevron-down {transform:rotate(0deg)!important}
.sigma-quarter-mobile-label{display:none}
@media(max-width:767px){
 html body .sigma-quarter-full-label{display:none}
 html body .sigma-quarter-mobile-label{display:inline}
 html body .sigma-quarter-dropdown{width:84px!important;min-width:84px!important;height:36px!important;background:#fff!important;box-shadow:none!important}
 html body .sigma-quarter-dropdown summary{height:34px!important;min-height:34px!important;border-radius:inherit;background:transparent;}
 html body div:has(> .sigma-quarter-dropdown):is(.bg-slate-100,.p-1){background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:visible!important}
}
@media(hover:none){html body .sigma-quarter-dropdown summary:hover{background:transparent!important}}
html body :is(#subject-topics-quarter-pills,#subject-materials-quarter-pills) {
    background:transparent!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
}
@media(max-width:767px){
    html body .sigma-quarter-dropdown,
    html body .room-quarter-switch__btn {
        width:84px!important;
        min-width:84px!important;
        max-width:84px!important;
    }
    html body .sigma-quarter-dropdown .sigma-quarter-dropdown-menu {
        width:84px!important;
        min-width:84px!important;
        max-width:84px!important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   RESOURCES VIEW: HEADER TOOLBAR, SEARCH BAR & VIEW TOGGLE
   ══════════════════════════════════════════════════════════════════════ */
.resources-header-toolbar {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 16px 20px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.resources-search-box {
    position: relative;
    width: 420px;
    max-width: 100%;
}
.resources-search-box input {
    width: 100%;
    height: 46px;
    padding-left: 16px;
    padding-right: 42px;
    background-color: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.resources-search-box input:focus {
    outline: none;
    border-color: #15803d;
    background-color: #ffffff;
}
.resources-search-box .resources-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #000000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.resources-search-box .resources-search-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.resources-search-box .resources-search-btn:active {
    transform: translateY(-50%) scale(0.92);
}
.resources-search-box .resources-search-btn svg {
    color: #000000 !important;
    stroke: #000000 !important;
    width: 16px;
    height: 16px;
}
.resources-view-toggle-group {
    height: 46px;
    padding: 4px;
    background-color: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    gap: 2px;
}
.resources-view-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
}
.resources-view-toggle-btn.is-active {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: default;
    pointer-events: none;
}
.resources-view-toggle-btn.is-active svg {
    color: #000000 !important;
    stroke: #000000 !important;
}
.resources-view-toggle-btn:not(.is-active) {
    color: rgba(0, 0, 0, 0.45) !important;
    cursor: pointer;
}
.resources-view-toggle-btn:not(.is-active) svg {
    color: rgba(0, 0, 0, 0.45) !important;
    stroke: rgba(0, 0, 0, 0.45) !important;
    transition: color 0.15s ease, stroke 0.15s ease;
}
.resources-view-toggle-btn:not(.is-active):hover {
    background-color: rgba(226, 232, 240, 0.8) !important;
    color: #000000 !important;
}
.resources-view-toggle-btn:not(.is-active):hover svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* White trigger, neutral hover, and green selected menu option. */
#btn-resource-sy-toggle {
    background-color: #fff !important;
    border-color: #e2e8f0 !important;
    color: #000 !important;
}

#btn-resource-sy-toggle:is(:hover,:focus-visible,[aria-expanded="true"]) {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: #000 !important;
}

#resource-sy-dropdown .btn-select-sy {
    background: #fff !important;
}
#resource-sy-dropdown .btn-select-sy:is(:hover,:focus-visible) {
    background: #f1f5f9 !important;
}
#resource-sy-dropdown .btn-select-sy[aria-pressed="true"],
#resource-sy-dropdown .btn-select-sy[aria-pressed="true"]:hover {
    background: #dcfce7 !important;
}

/* ==========================================================================
   STANDARDIZED ACTION DROPDOWN & THREE DOTS (MATCHES USER ACCOUNTS)
   ========================================================================== */
.action-dropdown-container {
    position: relative;
    display: inline-block;
}

.action-dots-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #000;
    transition: all 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 18px;
}

.action-dots-btn:hover,
.action-dots-btn.active {
    color: #FFD000 !important;
    background-color: transparent !important;
}

.action-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    min-width: 195px;
    width: max-content;
    max-width: 240px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: 6px;
    display: none;
    transform-origin: top right;
}

.action-dropdown-menu.show {
    display: block;
    animation: action-slide-up 0.2s ease-out;
}

.action-dropdown-menu.dropup:not([style*="fixed"]) {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    transform-origin: bottom right !important;
}

.action-dropdown-menu.dropup.show {
    animation: action-slide-down 0.2s ease-out;
}

.action-dropdown-menu[style*="fixed"] {
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform-origin: top right;
}

.action-dropdown-menu[style*="fixed"].dropup {
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform-origin: bottom right !important;
}

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

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

.action-dropdown-item {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    color: #000000 !important;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer;
}

.action-dropdown-item i,
.action-dropdown-item span {
    color: #000000 !important;
}

.action-dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
}

.action-dropdown-item:hover i,
.action-dropdown-item:hover span {
    color: #000000 !important;
}

/* Resources View: Hover Underline for Author & Resource Name (Matches Audit Logs) */
.btn-filter-author:hover span,
.btn-filter-author:hover .author-name-text,
.btn-preview-resource:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
}



.sigma-ai-feedback-empty {
    width: 100%;
    min-height: 140px;
    box-sizing: border-box;
}
.sigma-ai-feedback-empty #sigma-ai-feedback-status {
    width: 100%;
    max-width: none;
    text-align: center;
}
@media (max-width: 480px) {
    html body #teacher-ai-assistance-panel .ai-panel-header-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "title" "badge" "btn" !important;
    }
    html body #teacher-ai-assistance-panel :is(.ai-header-score-area span, #ai-review-action-btn) {
        font-size: 11px !important;
    }
    html body #teacher-ai-assistance-panel #ai-review-action-btn { min-height: 36px; }
}
.sigma-rubric-summary { min-width: 0; overflow-wrap: anywhere; }

/* Calendar reminder details: readable sizing and aligned actions. */
html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder {
    width: 100%; max-width: 560px !important; padding: 32px !important;
    max-height: calc(100dvh - 32px); overflow-y: auto; color: #000;
}
html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-title {font-size: 24px !important; line-height: 1.35; margin-top: 16px; color: #000 !important;}
html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-desc {font-size: 17px !important; line-height: 1.65; margin-top: 12px; padding: 0; color: #000 !important;}
html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-actions {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px !important;}
html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-actions button {height: auto !important; min-height: 48px; padding: 12px 16px; font-size: 16px !important; color: #000 !important; display: flex; align-items: center; justify-content: center;}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-proceed-btn {background: #15803d !important; color: #fff !important; border-color: transparent !important;}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-proceed-btn:hover {background: #166534 !important;}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-cancel-btn {background: #fff !important; color: #000 !important; border: 1.5px solid #e2e8f0 !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-cancel-btn:hover {background: #e2e8f0 !important;}
@media (min-width: 481px) {
    html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-actions {display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 12px !important;}
    html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder #sigma-ask-actions button {flex: 0 0 auto !important; width: auto !important; min-width: 100px; max-width: none !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 24px !important; font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap !important;}
}
@media (max-width: 480px) {
    html body #sigma-universal-ask-card.sigma-universal-ask-card--quarter-reminder {padding: 24px !important;}
    html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-title {font-size: 21px !important;}
    html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-desc {font-size: 16px !important;}
    html body .sigma-universal-ask-card--quarter-reminder #sigma-ask-actions {grid-template-columns: 1fr;}
}

/* Keep SIGMA's shared Font Awesome glyph visible inside admin badges. */
:is(.sigma-ai-badge, .sigma-ai-message__icon, .ai-log-sigma-icon) > i.fa-bolt {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
:is(.sigma-ai-badge, .sigma-ai-message__icon, .ai-log-sigma-icon) > i.fa-bolt::before {
    content: "\f0e7";
}

/* Canonical original SIGMA glyph: protect it from global bolt/font overrides. */
html body #sigmaAiPanel :is(.sigma-ai-badge,.sigma-ai-message__icon) > i.fa-bolt,
html body .ai-log-sigma-icon > i.fa-bolt{
    display:inline-block!important;
    font-family:"Font Awesome 6 Free"!important;
    font-weight:900!important;
    font-style:normal!important;
    font-variant:normal!important;
    line-height:1!important;
    color:#000!important;
    -webkit-text-fill-color:#000!important;
    background:transparent!important;
    mask:none!important;
    -webkit-mask:none!important;
    width:auto!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
}
html body #sigmaAiPanel :is(.sigma-ai-badge,.sigma-ai-message__icon) > i.fa-bolt::before,
html body .ai-log-sigma-icon > i.fa-bolt::before{
    content:"\f0e7"!important;
    display:inline-block!important;
    font-family:"Font Awesome 6 Free"!important;
    font-weight:900!important;
    font-style:normal!important;
    line-height:1!important;
    color:#000!important;
    -webkit-text-fill-color:#000!important;
}
html body #sigmaAiPanel .sigma-ai-badge > i.fa-bolt{font-size:13px!important}
html body #sigmaAiPanel .sigma-ai-message__icon > i.fa-bolt{font-size:11px!important}

/* Attendance Student Profile Avatar - Exact Match to User Accounts Table (32px x 32px circle, never oval) */
html body .attendance-month-table .student-name-col :is(.attendance-student-avatar, .sigma-user-avatar, [class*="sigma-user-avatar"]):not(img),
html body .attendance-student-avatar:not(img) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    background-color: #e2e8f0 !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
}

html body .attendance-month-table .student-name-col img:is(.attendance-student-avatar, .sigma-user-avatar, [class*="sigma-user-avatar"], .rounded-full),
html body img.attendance-student-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    display: inline-block !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-sizing: border-box !important;
}

html body .attendance-month-table .student-name-col :is(.attendance-student-avatar, .sigma-user-avatar, [class*="sigma-user-avatar"]) > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    display: block !important;
    border: none !important;
    box-sizing: border-box !important;
}

html body .attendance-month-table .student-name-col :is(.attendance-student-avatar, .sigma-user-avatar, [class*="sigma-user-avatar"]) i,
html body .attendance-student-avatar i {
    font-size: 12px !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Keep missing-grade marks consistent across both mobile grade views. */
.attendance-roster-inline{display:none}
html body .attendance-numbered-table .attendance-roster-number{position:sticky!important;left:0!important;width:40px!important;min-width:40px!important;max-width:40px!important;text-align:center!important;padding:0 6px!important;border-right:1px solid rgba(0,0,0,.08)!important;font:400 12px/18px Inter,sans-serif;z-index:25;background:#fff;color:#000000}
html body .attendance-numbered-table th.attendance-roster-number{background:#15803d;color:#fff;z-index:45}
@media(min-width:769px){
 html body .attendance-numbered-table .student-name-col{left:40px!important}
 html body .attendance-numbered-table :is(.attendance-summary-th--p,.attendance-summary-td--p){left:310px!important}
 html body .attendance-numbered-table :is(.attendance-summary-th--a,.attendance-summary-td--a){left:374px!important}
 html body .attendance-numbered-table :is(.attendance-summary-th--l,.attendance-summary-td--l){left:438px!important}
}
@media(max-width:768px){
 html body .attendance-numbered-table .attendance-roster-number{display:none!important}
 html body table.attendance-month-table.attendance-numbered-table .student-name-col .attendance-roster-inline{display:inline!important;color:#000000;font-weight:400}
 html body table.attendance-month-table.attendance-numbered-table .student-name-col .attendance-student-avatar{display:none!important}
 html body .attendance-numbered-table .attendance-student-name{white-space:normal!important;overflow-wrap:anywhere;line-height:16px!important}
 html body .attendance-numbered-table .student-name-col > div{white-space:normal!important}
}
html body table :is(thead, thead tr, thead th) {
    border-bottom: 0 !important;
}

/* Mobile GWA and Class Average share a flush, centered presentation. */
@media (max-width: 767px) {
    html:has(:is(.student-assessment-breakdown, .student-topic-performance).is-open),
    body:has(:is(.student-assessment-breakdown, .student-topic-performance).is-open) {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body :is(.student-assessment-breakdown, .student-topic-performance).is-open {
        overscroll-behavior: contain;
    }

    html body :is(.student-assessment-breakdown-surface, .student-topic-performance-surface) {
        border-radius: 0 !important;
        overscroll-behavior: contain;
    }

    html body #section-grades #grades-layout {
        padding-top: 0 !important;
    }

    html body #section-grades #grades-layout .shared-grades-top-panels {
        gap: 0 !important;
        margin-top: 0 !important;
    }

    html body #section-grades .shared-grades-top-panels > .gwa-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html body #section-grades .shared-grades-top-panels > .gwa-card > div {
        width: 100%;
        text-align: center !important;
    }
}

/* Shared horizontal mobile assessment summaries across all portals. */
@media (max-width: 768px) {
    html body #assessment-list .assessment-facts-panel .assessment-desktop-facts-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body #assessment-list .assessment-facts-panel .assessment-mobile-facts-panel {
        display: none !important;
    }

    html body #assessment-list .assessment-facts-panel table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    html body #assessment-list .assessment-facts-panel :is(th, td) {
        width: 25% !important;
        padding: 10px 4px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box;
    }

    html body #assessment-list .assessment-facts-panel thead th {
        font-size: 11px !important;
        line-height: 16px !important;
        border-bottom: 0 !important;
    }

    html body #assessment-list .assessment-facts-panel tbody td,
    html body #assessment-list .assessment-facts-panel tbody td :is(div, span) {
        font-size: 12px !important;
        line-height: 16px !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: 100%;
    }

    html body #assessment-list .assessment-facts-panel tbody td .flex > span + span {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    /* Quiz summaries retain their fifth column without widening the table. */
    html body #assessment-list .assessment-facts-panel table:has(thead th:nth-child(5)) :is(th, td) {
        width: 20% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    html body #assessment-list .assessment-facts-panel table:has(thead th:nth-child(5)) thead th {
        font-size: 10px !important;
    }
}
@media (max-width: 767px) {
    html body .student-grade-card dd.student-grade-missing,
    html body .teacher-quarter-grade-table.teacher-mobile-grade-cards .teacher-quarter-grade-empty {
        color: rgba(0, 0, 0, .45) !important;
        font-family: Inter, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
    }
}

/* Desktop material headings match the topic card title typography. */
@media(min-width:769px){
 html body :is(#topic-content-main,#subject-materials-list,#subject-material-detail-view,.assessment-material-main-card) :is(.sigma-file-panel-title,.material-card-title){font-size:1.25rem!important;font-weight:700!important;line-height:1.3!important}
}
#attendance-record-dialog{width:min(760px,calc(100% - 32px));max-height:85dvh;padding:0;border:1px solid #e2e8f0;border-radius:16px;color:#000;background:#fff;font-family:Inter,sans-serif}
#attendance-record-dialog::backdrop{background:rgba(0,0,0,.45)}
#attendance-record-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid #e2e8f0}
#attendance-record-dialog h2{margin:0;font-size:20px;font-weight:700}
#attendance-record-dialog p{margin:6px 0 0;font-size:12px}
#attendance-record-dialog .attendance-record-table{overflow:auto}
#attendance-record-dialog table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
#attendance-record-dialog th{background:#15803d;color:#fff;padding:14px 16px}
#attendance-record-dialog td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.08)}
#attendance-record-dialog .attendance-record-person{display:flex;align-items:center;gap:12px}
#attendance-record-dialog .attendance-record-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#f1f5f9;color:#94a3b8;overflow:hidden}
#attendance-record-dialog .attendance-record-avatar :is(img,.sigma-user-avatar){width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%;object-fit:cover}
body:has(#attendance-record-dialog[open]){overflow:hidden}
@media(max-width:767px){#attendance-record-dialog .attendance-record-avatar{display:none}}
html body :is(.attendance-action-btn--view,.attendance-action-btn--edit){background:#15803d!important;border-color:#15803d!important;color:#fff!important}
html body :is(.attendance-action-btn--view,.attendance-action-btn--edit) span{color:#fff!important}
html body :is(.attendance-action-btn--view,.attendance-action-btn--edit):hover{background:#166534!important;border-color:#166534!important;color:#fff!important}
html body #attendance-record-dialog :is(th,td):first-child{width:64px;min-width:64px;text-align:center!important;vertical-align:middle;padding-left:12px;padding-right:12px;font-variant-numeric:tabular-nums}
#attendance-record-dialog .attendance-record-quarter-short{display:none}
@media(max-width:767px){#attendance-record-dialog .attendance-record-quarter-full{display:none}#attendance-record-dialog .attendance-record-quarter-short{display:inline}}
/* Attendance record columns: compact number, readable names, aligned status. */
html body #attendance-record-dialog table{table-layout:fixed}
html body #attendance-record-dialog :is(th,td):first-child{width:52px;min-width:52px;box-sizing:border-box}
html body #attendance-record-dialog th:nth-child(2){width:60%;text-align:center!important}
html body #attendance-record-dialog td:nth-child(2){text-align:left!important;overflow-wrap:anywhere}
html body #attendance-record-dialog :is(th,td):nth-child(3){text-align:center!important;vertical-align:middle}
html body #attendance-record-dialog .attendance-record-person{min-width:0}
html body #attendance-record-dialog .attendance-record-person>span:last-child{min-width:0;overflow-wrap:anywhere}
#attendance-record-dialog .attendance-record-close-icon{display:none}
@media(max-width:767px){
 html body #attendance-record-dialog>header>div{min-width:0;flex:1}
 html body #attendance-record-dialog h2{font-size:16px!important;line-height:22px!important}
 html body #attendance-record-dialog p{font-size:11px!important;line-height:17px!important;margin-top:4px}
 html body #attendance-record-dialog [data-close]{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;flex:0 0 30px;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#000!important}
 html body #attendance-record-dialog .attendance-record-close-label{display:none!important}
 html body #attendance-record-dialog .attendance-record-close-icon{display:inline-block!important;font-size:14px!important;line-height:1!important;color:#000!important}
 html body #attendance-record-dialog table{font-size:12px!important}
 html body #attendance-record-dialog :is(th,td),
 html body #attendance-record-dialog .attendance-record-person,
 html body #attendance-record-dialog .attendance-record-person>span:last-child{font-size:12px!important;line-height:18px!important}
}

/* Quarter dropdowns retain readable full names on phones. */
@media(max-width:767px){
 html body .sigma-quarter-dropdown .sigma-quarter-full-label{display:inline!important}
 html body .sigma-quarter-dropdown .sigma-quarter-mobile-label{display:none!important}
 html body .sigma-quarter-dropdown{width:150px!important;min-width:150px!important;max-width:100%!important;flex:0 0 150px!important}
 html body .sigma-quarter-dropdown .sigma-quarter-dropdown-menu{width:150px!important;min-width:150px!important;max-width:150px!important}
 html body #grades-layout .student-grade-bars .student-shared-quarter,
 html body #student-classroom-grades-modal-overlay .student-shared-quarter{width:150px!important;min-width:150px!important;max-width:150px!important;flex:0 0 150px!important}
 html body #student-classroom-grades-modal-overlay .student-shared-quarter .sigma-quarter-dropdown-menu{width:150px!important;min-width:150px!important;max-width:150px!important}
}
/* Editing and release lists share the release panel's text hierarchy. */
html body #subject-edit-overlay #subject-topics-list h4,
html body #subject-edit-overlay #subject-materials-list h4,
html body :is(#teacher-release-topics-overlay,#teacher-release-learning-materials-overlay,#teacher-release-assessments-overlay) h4{font-family:Inter,sans-serif!important;font-size:14px!important;font-weight:400!important;line-height:21px!important;letter-spacing:normal!important}
html body #subject-edit-overlay .subject-quarter-context-label{font-family:Inter,sans-serif!important;font-size:14px!important;font-weight:600!important;line-height:20px!important;color:#000!important}
@media(max-width:767px){
 html body #subject-edit-overlay #subject-topics-list h4,
 html body #subject-edit-overlay #subject-materials-list h4,
 html body :is(#teacher-release-topics-overlay,#teacher-release-learning-materials-overlay,#teacher-release-assessments-overlay) h4{font-size:12px!important;font-weight:400!important;line-height:18px!important}
 html body #subject-edit-overlay .subject-quarter-context-label{font-size:12px!important;line-height:18px!important;font-weight:600!important}
}html body :is(#teacher-release-topics-overlay,#teacher-release-learning-materials-overlay,#teacher-release-assessments-overlay) .subject-quarter-context-label{font:600 14px/20px Inter,sans-serif!important;color:#000;background:transparent}
@media(max-width:767px){html body :is(#teacher-release-topics-overlay,#teacher-release-learning-materials-overlay,#teacher-release-assessments-overlay) .subject-quarter-context-label{font-size:12px!important;line-height:18px!important}}

/* Shared report table colors across portals. */
html body :is(.student-report-grades-table, .teacher-grades-modal-table, .admin-grades-modal-table) tbody tr:hover > td:not(.gb-summary-green),
html body :is(#teacher-grades-modal-tbody, #admin-grades-modal-tbody) tr:hover > td:not(.gb-summary-green) {
 background-color:#f1f5f9!important;
}
html body :is(.student-report-grades-table, .teacher-grades-modal-table, .admin-grades-modal-table) tbody td.gb-summary-green,
html body :is(#teacher-grades-modal-tbody, #admin-grades-modal-tbody) td.gb-summary-green {
 background-color:rgba(16,185,129,.08)!important;
}
html body :is(.student-report-grades-table, .teacher-grades-modal-table, .admin-grades-modal-table) tbody tr:hover > td.gb-summary-green,
html body :is(#teacher-grades-modal-tbody, #admin-grades-modal-tbody) tr:hover > td.gb-summary-green {
 background-color:rgba(16,185,129,.16)!important;
}

/* Semester totals use the same fill and hover across grade tables. */
html body :is(.student-grade-card,.record-mobile-grade-card) dl>div:last-child dd,
html body :is(.teacher-quarter-grade-table,.student-grades-summary-table,.record-main table[data-quarter-count]) tbody tr>td:last-child:not([colspan]) {
 background-color:rgba(16,185,129,.08)!important;
}
html body :is(.student-grade-card,.record-mobile-grade-card):hover dl>div:last-child dd,
html body :is(.teacher-quarter-grade-table,.student-grades-summary-table,.record-main table[data-quarter-count]) tbody tr:hover>td:last-child:not([colspan]) {
 background-color:rgba(16,185,129,.16)!important;
}

/* One-touch matching: only answer tiles capture gestures; surrounding rows still scroll. */
.sigma-quiz-matching-bank [draggable="true"],
.sigma-quiz-matching-rows [draggable="true"] {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
}
.sigma-quiz-matching-rows [draggable="true"]:active { cursor: grabbing; }

/* Matching bank tiles and filled slots share desktop drag cursors. */
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) [draggable="true"],
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) [draggable="true"] :is(span,i,div) {
    cursor: grab !important;
}
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) [draggable="true"]:active,
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) [draggable="true"]:active :is(span,i,div),
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) .sigma-quiz-choice-dragging,
html body :is(.sigma-quiz-matching-bank,.sigma-quiz-matching-rows) .sigma-quiz-choice-dragging :is(span,i,div) {
    cursor: grabbing !important;
}
html body .sigma-quiz-matching-rows [draggable="true"] button,
html body .sigma-quiz-matching-rows [draggable="true"] button * {
    cursor: pointer !important;
}

.quiz-submission-review-actions { display: flex; justify-content: flex-end; margin-top: 14px; width: 100%; }
@media (max-width: 639px) {
    .quiz-submission-review-actions > button { width: 100%; justify-content: center; }
}

html body .sigma-attached-file-panel.sigma-quiz-panel-static,
html body .sigma-attached-file-panel.sigma-quiz-panel-static:hover {
    background-color: #fff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02) !important;
    transform: none !important;
    cursor: default !important;
    transition: none !important;
}
html body .sigma-quiz-panel-static .sigma-file-panel-title,
html body .sigma-quiz-panel-static .sigma-file-panel-title:hover {
    color: #000 !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* External quiz actions follow the common desktop and mobile text-button sizes. */
html body .quiz-submission-review-actions > button.sigma-btn {
    width: auto;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    justify-content: center;
}
@media (max-width: 768px) {
    html body .quiz-submission-review-actions > button.sigma-btn {
        width: 100%;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
    }
}

/* Exit Quiz uses the regular text actions and readable black description. */
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-desc {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-actions button {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-cancel-btn {
    background: #fff !important;
    color: #000 !important;
    border: 1.5px solid #e2e8f0 !important;
}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-cancel-btn:hover {
    background: #e2e8f0 !important;
}
@media (max-width: 768px) {
    html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-actions button {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
    }
}

/* Keep legacy dialog ID rules from overriding the standard primary action. */
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-proceed-btn.sigma-btn-primary {
    background: #15803d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    font-family: 'Inter', sans-serif !important;
}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-proceed-btn.sigma-btn-primary:hover:not(:disabled) {
    background: #166534 !important;
}
html body #sigma-universal-ask-card.sigma-universal-ask-card--quiz-exit #sigma-ask-proceed-btn.sigma-btn-primary:active:not(:disabled) {
    background: #14532d !important;
}

/* Digital quiz totals are calculated from the reviewed question scores. */
html body input.gb-open-score-counter[data-calculated-quiz="1"] {
    appearance: textfield;
    -moz-appearance: textfield;
    cursor: default !important;
    caret-color: transparent;
}
html body input.gb-open-score-counter[data-calculated-quiz="1"]::-webkit-inner-spin-button,
html body input.gb-open-score-counter[data-calculated-quiz="1"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* The cell owns the status tint; the inline editor must not add a second rectangle. */
html body :is(#admin-gradebook-spreadsheet,#gradebook-spreadsheet,#gradebook-outer-spreadsheet) td .gb-open-score-editor,
html body :is(#admin-gradebook-spreadsheet,#gradebook-spreadsheet,#gradebook-outer-spreadsheet) td .gb-open-score-editor:is(:hover,:focus-within),
html body :is(#admin-gradebook-spreadsheet,#gradebook-spreadsheet,#gradebook-outer-spreadsheet) td .gb-open-status-row {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
}

/* Enumeration rows provide the fill and border, including hover and typing states. */
html body :is(#student-preview-modal,#sigma-quiz-form-modal,#universal-quiz-preview-modal) input.sigma-quiz-enumeration-input,
html body :is(#student-preview-modal,#sigma-quiz-form-modal,#universal-quiz-preview-modal) input.sigma-quiz-enumeration-input:is(:hover,:focus,:active) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Quiz response fields: white on hover, a plain yellow border while typing. */
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) :is(input[type="text"][placeholder="Type your answer here..."], textarea):not(:disabled):not([readonly]) {
    background-color: rgba(248, 250, 252, 0.6) !important;
    box-shadow: none !important;
    outline: none !important;
}
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) :is(input[type="text"][placeholder="Type your answer here..."], textarea):not(:disabled):not([readonly]):is(:hover, :focus) {
    background-color: #fff !important;
}
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) :is(input[type="text"][placeholder="Type your answer here..."], textarea):not(:disabled):not([readonly]):focus {
    border-color: #FFD000 !important;
    box-shadow: none !important;
    outline: none !important;
}
/* The entire enumeration row changes fill, keeping its inner input transparent. */
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) div:has(> input.sigma-quiz-enumeration-input:not(:disabled):not([readonly])) {
    box-shadow: none !important;
    outline: none !important;
}
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) div:has(> input.sigma-quiz-enumeration-input:not(:disabled):not([readonly])):is(:hover, :focus-within) {
    background-color: #fff !important;
}
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) div:has(> input.sigma-quiz-enumeration-input:not(:disabled):not([readonly])):focus-within {
    border-color: #FFD000 !important;
}
html body :is(#student-preview-modal, #sigma-quiz-form-modal, #universal-quiz-preview-modal) .sigma-quiz-matching-rows [ondragover].border-black {
    box-shadow: none !important;
}

/* Ten numbered pages per group. Keep navigation reachable on narrow tables. */
.sigma-group-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:6px; min-width:0; max-width:100%; box-sizing:border-box; }
.sigma-group-pagination > .sigma-pagination-btn { flex:0 0 auto; }
.sigma-pagination-numbers { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding:3px; }
.sigma-pagination-numbers > .sigma-pagination-btn { flex:0 0 auto; }
.sigma-group-pagination .sigma-pagination-btn:focus-visible { outline:2px solid #15803d !important; outline-offset:1px; }
.sigma-log-page-controls, .sigma-directory-page-controls { min-width:0; max-width:100%; }
@media (max-width:600px) {
    .sigma-group-pagination, .sigma-pagination-numbers { gap:3px; }
    .sigma-group-pagination { width:100%; }
    .sigma-directory-page-controls { width:100%; }
}

.sigma-table-list-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px; background:#fff; }
.sigma-table-list-pagination[hidden] { display:none !important; }
.sigma-table-list-count { color:rgba(0,0,0,.45); font:400 12px/1.5 Inter,Arial,sans-serif; }
.sigma-table-list-controls { min-width:0; max-width:100%; }
table[data-sigma-paginate] { scroll-margin-top:140px; }
table[data-sigma-paginate] tbody tr[hidden] { display:none !important; }
@media (max-width:600px) {
    .sigma-table-list-pagination { justify-content:center; }
    .sigma-table-list-count { width:100%; text-align:center; }
    .sigma-table-list-controls { width:100%; }
}
@media print {
    .sigma-table-list-pagination { display:none !important; }
    table[data-sigma-paginate] tbody tr[hidden] { display:table-row !important; }
}

.record-mobile-grade-card[hidden] { display:none !important; }