/*
 * ECEDAIA flat 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-flat-surface: #ffffff;
    --ec-flat-surface-soft: #f7fafc;
    --ec-flat-surface-warm: #fffdf8;
    --ec-flat-selected: #fff9ea;
    --ec-flat-selected-blue: #f2f8fd;
    --ec-flat-border: #d9e7f3;
    --ec-flat-border-strong: #a9c9df;
    --ec-flat-border-selected: #5b9bc4;
    --ec-flat-radius: 6px;
    --ec-flat-radius-large: 8px;
    --ec-state-off-bg: #f3f6f9;
    --ec-state-off-border: #cedbe8;
    --ec-state-off-text: #5b7085;
    --ec-state-on-bg: #e9f6ef;
    --ec-state-on-border: #bddfcf;
    --ec-state-on-text: #246b49;
    --ec-state-warning-bg: #fff5dc;
    --ec-state-warning-border: #eadfb8;
    --ec-state-warning-text: #836118;
    --ec-state-danger-bg: #fff0f1;
    --ec-state-danger-border: #edc4ca;
    --ec-state-danger-text: #9a3440;
}

/* The workspace stays quiet. The navigation rail is deliberately excluded. */
.shell-app .shell-main,
.shell-app .shell-content {
    background: #f3f7fb !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;
}

/* 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(
    .button-primary,
    .super-admin-form__submit,
    .student-life-search__button
) {
    background: #1477aa !important;
    background-image: none !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: #073b63 !important;
}

.shell-app .shell-content .communication-folder-tabs button.is-active b {
    background: #dcecf8 !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: #f3fbf6 !important;
    border-color: #bfe1ce !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: #fff9ec !important;
    border-color: #ead39e !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: #fff5f5 !important;
    border-color: #e9c0c0 !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: #f3f8fd !important;
    border-color: #bed7ea !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: #f1f8fd !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-low {
    background: #f3fbf6 !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-medium {
    background: #fff9ec !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-high {
    background: #fff5f5 !important;
}

.shell-app .shell-content .school-calendar-event-chip.is-critical {
    background: #faf5ff !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: 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: 0 8px 24px rgba(23, 59, 85, 0.12) !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 :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;
    }
}