/*
 * Hardcoded, role-wide hero standard.
 * Loaded after page-specific head blocks so all admin/teacher/student heroes
 * keep one consistent size, spacing, and visual treatment.
 */

:root {
    --app-hero-hard-gradient: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    --app-hero-hard-radius: 20px;
    --app-hero-hard-padding: 1rem 1.2rem;
    --app-hero-hard-margin-bottom: 0.9rem;
    --app-hero-hard-border: rgba(255, 255, 255, 0.16);
    --app-hero-hard-shadow: 0 20px 40px -26px rgba(37, 99, 235, 0.56);
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
),
.admin-content-shell .exam-container > .exam-header,
.teacher-content-shell .exam-container > .exam-header {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    margin: 0 0 var(--app-hero-hard-margin-bottom) !important;
    padding: var(--app-hero-hard-padding) !important;
    border: 1px solid var(--app-hero-hard-border) !important;
    border-radius: 0 0 var(--app-hero-hard-radius) var(--app-hero-hard-radius) !important;
    background: var(--app-hero-hard-gradient) !important;
    box-shadow: var(--app-hero-hard-shadow) !important;
    color: #fff !important;
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
)::before,
.admin-content-shell .exam-container > .exam-header::before,
.teacher-content-shell .exam-container > .exam-header::before {
    content: "" !important;
    position: absolute !important;
    inset: -35% -20% auto auto !important;
    width: 22rem !important;
    height: 22rem !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
)::after,
.admin-content-shell .exam-container > .exam-header::after,
.teacher-content-shell .exam-container > .exam-header::after {
    content: "" !important;
    position: absolute !important;
    inset: auto auto -45% -10% !important;
    width: 17rem !important;
    height: 17rem !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
) > *,
.admin-content-shell .exam-container > .exam-header > *,
.teacher-content-shell .exam-container > .exam-header > * {
    position: relative;
    z-index: 1;
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
) :is(h1, h2),
.admin-content-shell .exam-container > .exam-header :is(h1, h2),
.teacher-content-shell .exam-container > .exam-header :is(h1, h2) {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.9rem !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
}

.app-content-shell :is(
    .student-welcome-header,
    .welcome-header,
    .registration-hero,
    .assignment-header,
    .assign-header,
    .hero-section,
    .session-header,
    .create-header,
    .move-header,
    .move-hero,
    .students-hero,
    .subjects-hero,
    .subjects-header,
    .header-section,
    .edit-header,
    .edit-user-header,
    .class-edit-hero,
    .page-header,
    .results-header,
    .teacher-hero,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero,
    .users-page-header
) p,
.admin-content-shell .exam-container > .exam-header p,
.teacher-content-shell .exam-container > .exam-header p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Additional hero containers that are not part of the base shared list. */
.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
) {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    margin: 0 0 var(--app-hero-hard-margin-bottom) !important;
    padding: var(--app-hero-hard-padding) !important;
    border: 1px solid var(--app-hero-hard-border) !important;
    border-radius: 0 0 var(--app-hero-hard-radius) var(--app-hero-hard-radius) !important;
    background: var(--app-hero-hard-gradient) !important;
    box-shadow: var(--app-hero-hard-shadow) !important;
    color: #fff !important;
}

.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
)::before {
    content: "" !important;
    position: absolute !important;
    inset: -35% -20% auto auto !important;
    width: 22rem !important;
    height: 22rem !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
)::after {
    content: "" !important;
    position: absolute !important;
    inset: auto auto -45% -10% !important;
    width: 17rem !important;
    height: 17rem !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
) > * {
    position: relative;
    z-index: 1;
}

.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
) :is(h1, h2) {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.9rem !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
}

.app-content-shell :is(
    .assign-questions-hero,
    .mastery-hero
) p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Keep hero content rows tidy across pages. */
.app-content-shell :is(
    .assignment-header-meta,
    .create-header-stats,
    .students-hero-meta,
    .question-bank-hero-meta,
    .assign-questions-hero-meta,
    .mastery-chip-row,
    .assign-header-stats,
    .upload-header-meta,
    .edit-header-meta,
    .move-hero-stats,
    .teacher-hero-meta,
    .exams-hero-strip,
    .hero-actions,
    .question-edit-hero-actions,
    .question-bank-hero-actions,
    .question-bank-context-row
) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

.app-content-shell .question-bank-context-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    padding: 0.34rem 0.64rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.app-content-shell :is(
    .assign-questions-hero-pill,
    .mastery-chip
) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    padding: 0.34rem 0.64rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.app-content-shell :is(
    .question-bank-hero-meta,
    .assign-questions-hero-meta,
    .mastery-chip-row,
    .question-bank-context-row
) {
    margin-top: 0.75rem !important;
}

/* Keep Question Bank hero rows visually grouped together. */
.app-content-shell .question-bank-context-row {
    margin-top: 0.44rem !important;
}

.app-content-shell .question-bank-hero-meta {
    margin-top: 0.3rem !important;
    gap: 0.48rem !important;
}

.app-content-shell .question-bank-subtitle {
    margin-top: 0.22rem !important;
    line-height: 1.34 !important;
}

.app-content-shell :is(
    .question-bank-subtitle,
    .assign-questions-subtitle
) {
    margin: 0.35rem 0 0 !important;
    max-width: 56rem !important;
}

/* Question bank hero content fitting */
.app-content-shell .question-bank-hero-shell {
    display: block !important;
}

.app-content-shell .question-bank-hero-main {
    display: block !important;
}

.app-content-shell .question-bank-hero {
    --question-bank-content-indent: calc(2.45rem + 0.72rem);
}

.app-content-shell .question-bank-hero-shell :is(
    .question-bank-context-row,
    .question-bank-hero-meta
) {
    justify-content: flex-start !important;
    margin-left: var(--question-bank-content-indent) !important;
}

.app-content-shell .question-bank-hero-side {
    margin-top: 0.42rem !important;
    margin-left: var(--question-bank-content-indent) !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

.app-content-shell .question-bank-hero-actions {
    justify-content: flex-start !important;
}

.app-content-shell .question-bank-hero-side-title,
.app-content-shell .question-bank-hero-side-note {
    display: none !important;
}

.app-content-shell .question-bank-hero-actions > :is(a, button) {
    width: auto !important;
    min-height: auto !important;
    padding: 0.42rem 0.72rem !important;
    border-radius: 0.66rem !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
}

.app-content-shell .question-bank-icon {
    width: 2.45rem !important;
    height: 2.45rem !important;
    border-radius: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.app-content-shell .question-bank-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.72rem !important;
}

.app-content-shell .assign-questions-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.72rem !important;
}

.app-content-shell .assign-questions-icon {
    width: 2.45rem !important;
    height: 2.45rem !important;
    border-radius: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.app-content-shell .assign-questions-hero-inner {
    display: block !important;
    gap: 0 !important;
}

@media (max-width: 768px) {
    .app-content-shell :is(
        .student-welcome-header,
        .welcome-header,
        .registration-hero,
        .assignment-header,
        .assign-header,
        .hero-section,
        .session-header,
        .create-header,
        .move-header,
        .move-hero,
        .students-hero,
        .subjects-hero,
        .subjects-header,
        .header-section,
        .edit-header,
        .edit-user-header,
        .class-edit-hero,
        .page-header,
        .results-header,
        .teacher-hero,
        .exam-view-hero,
        .exams-hero,
        .exams-header,
        .question-create-hero,
        .question-edit-hero,
        .question-bank-hero,
        .upload-header,
        .profile-hero,
        .notification-header,
        .notification-hero,
        .users-page-header
    ),
    .admin-content-shell .exam-container > .exam-header,
    .teacher-content-shell .exam-container > .exam-header,
    .app-content-shell :is(
        .assign-questions-hero,
        .mastery-hero
    ) {
        padding: 0.85rem 0.95rem !important;
        border-radius: 0 0 16px 16px !important;
    }

    .app-content-shell :is(
        .student-welcome-header,
        .welcome-header,
        .registration-hero,
        .assignment-header,
        .assign-header,
        .hero-section,
        .session-header,
        .create-header,
        .move-header,
        .move-hero,
        .students-hero,
        .subjects-hero,
        .subjects-header,
        .header-section,
        .edit-header,
        .edit-user-header,
        .class-edit-hero,
        .page-header,
        .results-header,
        .teacher-hero,
        .exam-view-hero,
        .exams-hero,
        .exams-header,
        .question-create-hero,
        .question-edit-hero,
        .question-bank-hero,
        .upload-header,
        .profile-hero,
        .notification-header,
        .notification-hero,
        .users-page-header
    ) :is(h1, h2),
    .admin-content-shell .exam-container > .exam-header :is(h1, h2),
    .teacher-content-shell .exam-container > .exam-header :is(h1, h2),
    .app-content-shell :is(
        .assign-questions-hero,
        .mastery-hero
    ) :is(h1, h2) {
        font-size: 1.3rem !important;
    }

    .app-content-shell .question-bank-hero-actions > :is(a, button) {
        font-size: 0.74rem !important;
    }

    .app-content-shell .question-bank-hero-shell :is(
        .question-bank-context-row,
        .question-bank-hero-meta
    ),
    .app-content-shell .question-bank-hero-side {
        margin-left: 0 !important;
    }
}