/*
 * ECEDAIA Fluent visual system.
 *
 * This layer defines the approved appearance for every authenticated role.
 * Density remains in density.css; this file changes surfaces and elevation.
 * The sidebar, notification LEDs and semantic operational states stay intact.
 */

:root {
    --ec-fluent-canvas: #f5f7fa;
    --ec-fluent-surface: #ffffff;
    --ec-fluent-surface-subtle: #f8fafc;
    --ec-fluent-list: #f7fbff;
    --ec-fluent-blue-soft: #dcebff;
    --ec-fluent-blue-medium: #bdd9fa;
    --ec-fluent-mint-soft: #ddf7ee;
    --ec-fluent-cream-soft: #fff3cf;
    --ec-fluent-pink-soft: #fbe7f1;
    --ec-fluent-lavender-soft: #eceaff;
    --ec-fluent-border: #d8e4ef;
    --ec-fluent-border-strong: #afc8de;
    --ec-fluent-brand: #0f6cbd;
    --ec-fluent-brand-hover: #115ea3;
    --ec-fluent-brand-pressed: #0f548c;
    --ec-fluent-text: #17324d;
    --ec-fluent-text-soft: #536b82;
    --ec-fluent-shadow: 0 8px 24px rgba(31, 50, 69, 0.12);

    --ec-flat-surface: var(--ec-fluent-surface);
    --ec-flat-surface-soft: var(--ec-fluent-surface-subtle);
    --ec-flat-surface-warm: var(--ec-fluent-surface);
    --ec-flat-selected: #f3f8fd;
    --ec-flat-selected-blue: #e8f3ff;
    --ec-flat-border: var(--ec-fluent-border);
    --ec-flat-border-strong: var(--ec-fluent-border-strong);
    --ec-flat-border-selected: #6ba6d6;
    --ec-flat-radius: 6px;
    --ec-flat-radius-large: 8px;
    --ec-state-off-bg: #f4f7fa;
    --ec-state-off-border: #cedbe8;
    --ec-state-off-text: #586f84;
    --ec-state-on-bg: var(--ec-fluent-mint-soft);
    --ec-state-on-border: #afdcc9;
    --ec-state-on-text: #176447;
    --ec-state-warning-bg: var(--ec-fluent-cream-soft);
    --ec-state-warning-border: #e5cf91;
    --ec-state-warning-text: #7a5715;
    --ec-state-danger-bg: var(--ec-fluent-pink-soft);
    --ec-state-danger-border: #e8bdcc;
    --ec-state-danger-text: #913448;
}

/* The workspace stays quiet. The navigation rail is deliberately excluded. */
.shell-app .shell-main,
.shell-app .shell-content {
    background: var(--ec-fluent-canvas) !important;
}

/* Opening help releases the navigation column and fills the remaining workspace. */
.shell-app.is-help-open .shell-main,
.shell-app:has(> .shell-help-drawer.is-open) > .shell-main {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 1 1 0 !important;
}

.shell-app .shell-content :where(
    .shell-card,
    .workspace-shell__panel,
    .workspace-launcher-card,
    .workspace-collection,
    .workspace-registry__row,
    .workspace-block,
    .super-admin-banner,
    .super-admin-kpi,
    .super-admin-panel,
    .super-admin-action,
    .super-admin-item,
    .super-admin-check-card,
    .super-admin-image-preview,
    .super-admin-search-results,
    .super-admin-search-results__selected,
    .super-admin-search-results__item,
    .school-schedule-summary-card,
    .school-schedule-toolbar-card,
    .school-schedule-matrix-card,
    .school-schedule-conflicts-card,
    .school-schedule-vigilance-card,
    .school-schedule-summary-chip,
    .school-schedule-entry,
    .school-schedule-empty,
    .school-schedule-conflict,
    .school-vigilance-row,
    .portal-metric,
    .portal-panel,
    .portal-student-card,
    .portal-list__row,
    .portal-student-row,
    .student-life-search__panel,
    .student-life-result,
    .student-life-detail,
    .student-life-profile,
    .student-life-tab-card,
    .student-life-block,
    .student-photo-capture,
    .student-photo-capture__filename,
    .attendance-kpi-card,
    .attendance-card,
    .attendance-student,
    .attendance-correction-workspace,
    .attendance-correction-workspace__item,
    .attendance-pae-window,
    .attendance-side-item,
    .teacher-academic-editor,
    .teacher-academic-activity-row,
    .teacher-academic-editor__summary,
    .teacher-note-detail,
    .teacher-planner-head,
    .teacher-planner-panel,
    .teacher-planner-form,
    .teacher-planner-feedback,
    .teacher-planner-form__assistant,
    .teacher-planner-text-card,
    .teacher-planner-ai-panel,
    .teacher-planner-ai-card,
    .teacher-planner-section,
    .teacher-planner-reference-picker,
    .teacher-planner-reference-option,
    .teacher-planner-week,
    .teacher-planner-dba-item,
    .teacher-planner-component-card,
    .teacher-planner-usage-row,
    .teacher-support-item,
    .teacher-report-analysis-card,
    .teacher-report-analysis-field,
    .teacher-report-workflow__step,
    .teacher-analytics-panel,
    .teacher-analytics-card,
    .teacher-analytics-insights article,
    .teacher-analytics-risk,
    .teacher-coordination-alert-board,
    .teacher-coordination-dossier-hero,
    .teacher-coordination-filter-head,
    .teacher-coordination-filter-advanced,
    .teacher-coordination-executive__card,
    .teacher-coordination-report-hub__card,
    .teacher-coordination-priority-item,
    .teacher-coordination-next-action,
    .teacher-coordination-alert-item,
    .teacher-observer-student-quick,
    .teacher-observer-student-card,
    .teacher-observer-radiography__head,
    .teacher-observer-radiography-card,
    .teacher-observer-detail-hero,
    .teacher-observer-detail-card,
    .teacher-observer-section,
    .teacher-observer-ai-field,
    .teacher-observer-action-field,
    .teacher-observer-log-field,
    .teacher-observer-timeline__item,
    .teacher-observer-detail-list__item,
    .teacher-observer-detail-signature,
    .teacher-observer-detail-evidence,
    .teacher-observer-ai-status,
    .teacher-observer-toggle,
    .teacher-observer-stored-signature,
    .teacher-observer-evidence-item,
    .teacher-observer-signature-card,
    .teacher-observer-package-case,
    .teacher-observer-package-commitment,
    .teacher-written-tests-resource,
    .teacher-written-tests-file,
    .teacher-written-tests-checklist,
    .teacher-written-tests-checklist__item,
    .teacher-written-tests-question,
    .teacher-written-tests-ai,
    .teacher-written-tests-response-card,
    .teacher-written-tests-ai-analysis,
    .teacher-written-tests-context-media,
    .teacher-written-tests-context-media__item,
    .teacher-written-tests-toggle,
    .teacher-written-tests-option__answer,
    .teacher-written-tests-option-read div,
    .teacher-written-tests-capture-item,
    .teacher-written-tests-answer-choice,
    .teacher-curricular-resources,
    .teacher-curricular-resources__item,
    .teacher-maturity-panel,
    .teacher-maturity-card,
    .teacher-operational-control,
    .teacher-operational-metric,
    .teacher-operational-section,
    .teacher-operational-table__row,
    .teacher-lms-classroom,
    .teacher-lms-metric,
    .teacher-lms-workflow__card,
    .teacher-lms-action-card,
    .teacher-lms-form,
    .teacher-lms-form__checks label,
    .teacher-lms-seat,
    .teacher-lms-linked-activity,
    .teacher-lms-activity,
    .teacher-lms-material,
    .teacher-lms-submission,
    .communication-hero,
    .communication-metric,
    .communication-panel,
    .communication-notice,
    .communication-recipient-grid,
    .communication-choice-list,
    .communication-choice,
    .communication-upload,
    .communication-thread,
    .communication-detail,
    .communication-message,
    .communication-reply,
    .school-calendar-hero,
    .school-calendar-toolbar,
    .school-calendar-grid,
    .school-calendar-day,
    .school-calendar-modal__dialog,
    .school-calendar-form,
    .school-calendar-event-detail,
    .school-calendar-empty,
    .school-calendar-range-tools,
    .school-pae-overview,
    .school-pae-overview__metric,
    .school-pae-overview__closure,
    .school-pae-overview__period,
    .school-pae-overview__table-card,
    .school-pae-overview__missing-card,
    .pae-operator__head,
    .pae-operator__selection,
    .pae-operator__capture,
    .pae-reservation__window,
    .pae-reservation__accountability,
    .pae-reservation-row,
    .pae-operator-student,
    .school-setup-guide-strip,
    .school-setup-guide-modal__hero,
    .school-setup-guide-modal__next,
    .school-setup-guide-step
) {
    background: var(--ec-flat-surface) !important;
    background-image: none !important;
    border-color: var(--ec-flat-border) !important;
    border-radius: var(--ec-flat-radius) !important;
    box-shadow: none !important;
}

/* Operational lists use one calm blue surface throughout the platform. */
.shell-app .shell-content :where(
    .workspace-registry__row,
    .super-admin-search-results__item,
    .school-vigilance-row,
    .portal-list__row,
    .portal-student-row,
    .student-life-result,
    .attendance-correction-workspace__item,
    .teacher-operational-table__row,
    .teacher-coordination-priority-item,
    .teacher-coordination-alert-item,
    .teacher-observer-detail-list__item,
    .teacher-observer-evidence-item,
    .teacher-observer-package-case,
    .teacher-observer-package-commitment,
    .communication-message,
    .school-schedule-entry,
    .pae-reservation-row,
    .pae-operator-student
) {
    background: var(--ec-fluent-list) !important;
}

/* Primary containers get the slightly larger radius used by the reference. */
.shell-app .shell-content :where(
    .workspace-shell__panel,
    .super-admin-panel,
    .portal-panel,
    .student-life-detail,
    .student-life-profile,
    .attendance-card,
    .teacher-academic-editor,
    .teacher-planner-form,
    .teacher-coordination-alert-board,
    .teacher-observer-detail-card,
    .teacher-written-tests-checklist,
    .teacher-lms-form,
    .communication-hero,
    .communication-panel,
    .school-calendar-hero,
    .school-calendar-grid,
    .school-pae-overview,
    .pae-operator__head,
    .pae-operator__selection,
    .pae-operator__capture
) {
    border-radius: var(--ec-flat-radius-large) !important;
}

/* Shell wrappers are layout, not decorative cards. */
.shell-app .shell-content :where(
    .workspace-shell,
    .teacher-academic-shell,
    .teacher-planner-shell,
    .teacher-support-shell,
    .teacher-coordination-shell,
    .teacher-written-tests-shell,
    .communication-shell,
    .portal-shell
) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Module headings are separators, not oversized presentation cards. */
.shell-app .shell-content .shell-hero {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ec-flat-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.shell-app .shell-content .student-life-search {
    background: var(--ec-flat-surface) !important;
    background-image: none !important;
    border: 1px solid var(--ec-flat-border) !important;
    border-radius: var(--ec-flat-radius-large) !important;
    box-shadow: none !important;
}

/* Flat controls retain their established command colors and focus rings. */
.shell-app .shell-content :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .super-admin-form__control,
    .teacher-note-input,
    .button-primary,
    .button-secondary,
    .session-tool-button,
    .super-admin-item__action,
    .super-admin-form__submit,
    .workspace-switcher__tab,
    .workspace-collection__pager button,
    .communication-folder-tabs button
) {
    border-radius: var(--ec-flat-radius) !important;
    box-shadow: none;
}

.shell-app .shell-content :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .super-admin-form__control,
    .teacher-note-input
) {
    background: var(--ec-fluent-surface) !important;
    border-color: var(--ec-fluent-border-strong) !important;
    color: var(--ec-fluent-text) !important;
}

.shell-app .shell-content :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .super-admin-form__control,
    .teacher-note-input
):focus {
    background: var(--ec-fluent-surface) !important;
    border-color: var(--ec-fluent-brand) !important;
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.16) !important;
    outline: none;
}

.shell-app .shell-content :where(
    .button-primary,
    .super-admin-form__submit,
    .student-life-search__button
) {
    background: var(--ec-fluent-brand) !important;
    background-image: none !important;
}

.shell-app .shell-content :where(
    .button-primary,
    .super-admin-form__submit,
    .student-life-search__button
):hover {
    background: var(--ec-fluent-brand-hover) !important;
}

.shell-app .shell-content :where(
    .button-primary,
    .super-admin-form__submit,
    .student-life-search__button
):active {
    background: var(--ec-fluent-brand-pressed) !important;
}

.shell-app .shell-content :where(
    .shell-card,
    .workspace-launcher-card,
    .workspace-registry__row,
    .super-admin-item,
    .portal-metric,
    .portal-student-card,
    .student-life-result,
    .student-life-tab-card,
    .teacher-lms-classroom,
    .teacher-lms-metric.is-actionable,
    .teacher-lms-workflow__card,
    .teacher-lms-action-card,
    .teacher-coordination-priority-item,
    .teacher-coordination-alert-item,
    .pae-reservation-row,
    .pae-operator-student
):hover {
    border-color: var(--ec-flat-border-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Lighter type hierarchy, including styles loaded later by role modules. */
.shell-app .shell-content :where(
    .teacher-lms-metric span,
    .teacher-lms-workflow__card span,
    .teacher-lms-workflow__card small,
    .teacher-lms-action-card span,
    .teacher-lms-action-card small,
    .teacher-lms-students-preview span,
    .teacher-lms-source-chip,
    .teacher-lms-resource-chips a,
    .communication-notice span,
    .communication-folder-tabs button,
    .communication-field,
    .communication-choice-list p,
    .school-calendar-event-chip small
) {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Selected navigation stays visible without heavy gradients. */
.shell-app .shell-content .workspace-switcher__tab.is-active,
.shell-app .shell-content .teacher-lms-classroom.is-active,
.shell-app .shell-content .teacher-lms-workflow__card.is-active,
.shell-app .shell-content .communication-folder-tabs button.is-active {
    background: var(--ec-flat-selected-blue) !important;
    background-image: none !important;
    border-color: var(--ec-flat-border-selected) !important;
    box-shadow: none !important;
    color: var(--ec-fluent-text) !important;
}

.shell-app .shell-content .communication-folder-tabs button.is-active b {
    background: var(--ec-fluent-blue-soft) !important;
}

/* Preserve meaning with restrained semantic surfaces. */
.shell-app .shell-content :where(
    .shell-card.is-ok,
    .super-admin-banner.is-ok,
    .communication-notice.is-ok,
    .school-pae-overview__metric.is-ok,
    .school-pae-overview__closure.is-closed
) {
    background: var(--ec-fluent-mint-soft) !important;
    border-color: #afdcc9 !important;
}

.shell-app .shell-content :where(
    .shell-card.is-warm,
    .super-admin-banner.is-warm,
    .communication-notice.is-warning,
    .school-pae-overview__metric.is-warm,
    .school-pae-overview__closure.is-open
) {
    background: var(--ec-fluent-cream-soft) !important;
    border-color: #e5cf91 !important;
}

.shell-app .shell-content :where(
    .shell-card.is-danger,
    .super-admin-banner.is-danger,
    .communication-notice.is-danger,
    .school-pae-overview__metric.is-danger-soft
) {
    background: var(--ec-fluent-pink-soft) !important;
    border-color: #e8bdcc !important;
}

.shell-app .shell-content :where(
    .shell-card.is-primary,
    .shell-card.is-focus,
    .communication-notice.is-info,
    .school-pae-overview__metric.is-focus
) {
    background: var(--ec-flat-selected-blue) !important;
    border-color: var(--ec-fluent-blue-medium) !important;
}

/* Student records establish the exact visual reference for every role. */
.shell-app .shell-content .student-life-detail {
    gap: 0.55rem !important;
    padding: 0.55rem !important;
}

.shell-app .shell-content .student-life-profile {
    background: var(--ec-flat-surface-warm) !important;
    gap: 0.65rem !important;
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    padding: 0.55rem 0.65rem !important;
}

.shell-app .shell-content .student-life-profile__photo-button img {
    height: 60px !important;
    width: 60px !important;
}

.shell-app .shell-content .student-life-profile h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.shell-app .shell-content .student-life-profile p {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin: 0.14rem 0 0.28rem !important;
}

.shell-app .shell-content .student-life-kpis {
    display: none !important;
}

.shell-app .shell-content .student-life-tab-list {
    gap: 0.35rem !important;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)) !important;
}

.shell-app .shell-content .student-life-tab-card {
    gap: 0.04rem !important;
    min-height: 44px !important;
    padding: 0.35rem 0.48rem !important;
}

.shell-app .shell-content .student-life-tab-card span,
.shell-app .shell-content .student-life-block__head span {
    display: none !important;
}

.shell-app .shell-content .student-life-tab-card strong {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.shell-app .shell-content .student-life-tab-card small {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(1):checked ~ .student-life-tab-list label:nth-child(1),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(2):checked ~ .student-life-tab-list label:nth-child(2),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(3):checked ~ .student-life-tab-list label:nth-child(3),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(4):checked ~ .student-life-tab-list label:nth-child(4),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(5):checked ~ .student-life-tab-list label:nth-child(5),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(6):checked ~ .student-life-tab-list label:nth-child(6),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(7):checked ~ .student-life-tab-list label:nth-child(7),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(8):checked ~ .student-life-tab-list label:nth-child(8),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(9):checked ~ .student-life-tab-list label:nth-child(9),
.shell-app .shell-content .student-life-detail-tabs input:nth-of-type(10):checked ~ .student-life-tab-list label:nth-child(10) {
    background: var(--ec-flat-selected) !important;
    border-color: var(--ec-flat-border-selected) !important;
    box-shadow: none !important;
}

.shell-app .shell-content .student-life-block {
    padding: 0.62rem 0.72rem !important;
}

/* Calendar remains readable while losing decorative gradients. */
.shell-app .shell-content .school-calendar-hero__stats span,
.shell-app .shell-content .school-calendar-day,
.shell-app .shell-content .school-calendar-event-chip {
    background: var(--ec-flat-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.shell-app .shell-content .school-calendar-day.is-selected {
    background: var(--ec-flat-selected) !important;
    border-color: var(--ec-flat-border-selected) !important;
}

.shell-app .shell-content .school-calendar-day.is-today {
    background: var(--ec-flat-selected-blue) !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-low {
    background: var(--ec-fluent-mint-soft) !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-medium {
    background: var(--ec-fluent-cream-soft) !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-high {
    background: var(--ec-fluent-pink-soft) !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-critical {
    background: var(--ec-fluent-lavender-soft) !important;
}

/* PAE selection must remain unmistakable for touch operation. */
.shell-app .shell-content .pae-reservation-row.is-selected,
.shell-app .shell-content .pae-operator-student.is-selected {
    background: var(--ec-flat-selected) !important;
    border-color: #dfb44f !important;
    box-shadow: none !important;
}

/* Dialog surfaces follow the same restrained language without losing focus. */
:where(
    .app-dialog-shell__dialog,
    .teacher-note-modal__dialog,
    .attendance-photo-modal__dialog,
    .pae-operator-camera__dialog
) {
    background: rgba(255, 255, 255, 0.98) !important;
    background-image: none !important;
    border: 1px solid var(--ec-flat-border) !important;
    border-radius: var(--ec-flat-radius-large) !important;
    box-shadow: var(--ec-fluent-shadow) !important;
}

.app-dialog-shell__backdrop {
    background: rgba(20, 31, 43, 0.38) !important;
}

.shell-help-drawer {
    background: rgba(248, 251, 255, 0.98) !important;
    border-color: var(--ec-fluent-border) !important;
    box-shadow: -8px 0 24px rgba(31, 50, 69, 0.10) !important;
}

/* Standalone PAE and transport use the same appearance as the main shell. */
.pae-shell :where(
    .hero,
    .panel,
    .student,
    .summary-card,
    .camera-wrap,
    .status
),
.transport-shell :where(
    .hero,
    .panel,
    .student,
    .status-card,
    .camera-wrap,
    .status
) {
    background: var(--ec-flat-surface) !important;
    background-image: none !important;
    border-color: var(--ec-flat-border) !important;
    border-radius: var(--ec-flat-radius) !important;
    box-shadow: none !important;
}

.pae-shell,
.transport-shell {
    background: var(--ec-fluent-canvas) !important;
    color: var(--ec-fluent-text) !important;
}

.pae-shell :where(input, select, textarea),
.transport-shell :where(input, select, textarea) {
    background: var(--ec-fluent-surface) !important;
    border-color: var(--ec-fluent-border-strong) !important;
    color: var(--ec-fluent-text) !important;
}

.pae-shell :where(button, input, select, textarea),
.transport-shell :where(button, input, select, textarea) {
    border-radius: var(--ec-flat-radius) !important;
    box-shadow: none;
}

/* Stateful choices reuse PAE semantics: neutral, confirmed, warning and blocked. */
.shell-app .shell-content .ec-state-choice {
    background-image: none !important;
    box-shadow: none !important;
}

.shell-app .shell-content .ec-state-choice.is-state-off {
    background: var(--ec-state-off-bg) !important;
    border-color: var(--ec-state-off-border) !important;
    color: var(--ec-state-off-text) !important;
}

.shell-app .shell-content .ec-state-choice.is-state-on {
    background: var(--ec-state-on-bg) !important;
    border-color: var(--ec-state-on-border) !important;
    color: var(--ec-state-on-text) !important;
}

.shell-app .shell-content .ec-state-choice.is-state-warning {
    background: var(--ec-state-warning-bg) !important;
    border-color: var(--ec-state-warning-border) !important;
    color: var(--ec-state-warning-text) !important;
}

.shell-app .shell-content .ec-state-choice.is-state-danger {
    background: var(--ec-state-danger-bg) !important;
    border-color: var(--ec-state-danger-border) !important;
    color: var(--ec-state-danger-text) !important;
}

.shell-app .shell-content .ec-state-choice:disabled,
.shell-app .shell-content .ec-state-choice.is-disabled {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
}

@media (max-width: 720px) {
    .shell-app .shell-content .student-life-profile {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    .shell-app .shell-content .student-life-profile__actions {
        grid-column: 1 / -1;
    }

    .shell-app .shell-content .student-life-profile__photo-button img {
        height: 52px !important;
        width: 52px !important;
    }
}

/*
 * Document evaluator: this workflow needs more vertical rhythm than the
 * platform's compact operational density. Keep the exception scoped to this
 * module so no other teacher workspace changes size.
 */
.shell-app .shell-content .teacher-document-evaluator .workspace-shell {
    display: grid;
    gap: 0.95rem !important;
}

.shell-app .shell-content .teacher-document-evaluator .workspace-shell__panel {
    display: grid;
    gap: 0.68rem !important;
    padding: 0.9rem 0.95rem !important;
}

.shell-app .shell-content .teacher-document-evaluator form,
.shell-app .shell-content .teacher-document-evaluator .teacher-support-field {
    display: grid;
    gap: 0.42rem !important;
    min-width: 0;
}

.shell-app .shell-content .teacher-document-evaluator .teacher-support-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    align-items: end;
    gap: 0.78rem 0.9rem !important;
    margin: 0.18rem 0 0.28rem;
}

.shell-app .shell-content .teacher-document-evaluator .teacher-support-field > span {
    line-height: 1.25;
}

.shell-app .shell-content .teacher-document-evaluator :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    .teacher-support-toolbar > .btn
) {
    box-sizing: border-box;
    min-height: 40px !important;
}

.shell-app .shell-content .teacher-document-evaluator .teacher-support-toolbar > .btn {
    align-self: end;
    width: 100%;
    padding: 0.58rem 0.82rem;
    white-space: normal;
}

.shell-app .shell-content .teacher-document-evaluator .teacher-support-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.62rem;
    margin-top: 0.12rem;
}

.shell-app .shell-content .teacher-document-evaluator .teacher-support-actions > :where(.btn, a) {
    min-height: 40px;
}

@media (max-width: 720px) {
    .shell-app .shell-content .teacher-document-evaluator .workspace-shell {
        gap: 0.78rem !important;
    }

    .shell-app .shell-content .teacher-document-evaluator .workspace-shell__panel {
        gap: 0.58rem !important;
        padding: 0.78rem !important;
    }

    .shell-app .shell-content .teacher-document-evaluator .teacher-support-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .shell-app .shell-content .teacher-document-evaluator .teacher-support-actions,
    .shell-app .shell-content .teacher-document-evaluator .teacher-support-actions > :where(.btn, a) {
        width: 100%;
    }
}