/* Shared role layout loaded after page-level styles for admin, teacher, and student. */
:root {
    --role-sidebar-width: 280px;
    --role-sidebar-width-compact: 248px;
    --role-page-bg: #f3f4f6;
    --role-content-gutter: clamp(0.08rem, 0.3vw, 0.24rem);
    --role-content-bottom: 0.75rem;
    --role-section-gap: clamp(0.45rem, 0.85vw, 0.75rem);
    --role-card-padding: clamp(0.6rem, 1vw, 0.85rem);
    --role-hero-padding: clamp(1.05rem, 1.55vw, 1.25rem);
    --role-hero-edge-bleed: clamp(0.26rem, 0.6vw, 0.5rem);
    --role-hero-min-height: 140px;
    --role-hero-title-size: clamp(1.85rem, 2.7vw, 2.35rem);
    --role-hero-copy-size: 1rem;
    --role-hero-kicker-size: 0.72rem;
    --role-card-radius: 16px;
    --role-hero-radius: 24px;
    --role-hero-gradient: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    --role-shadow-soft: 0 18px 36px -28px rgba(15, 23, 42, 0.36);
}

body.admin-body,
body.teacher-body,
body.student-body {
    overflow-x: hidden;
    background: var(--role-page-bg);
}

.admin-wrapper {
    display: flex !important;
    min-height: 100vh !important;
    width: 100%;
    background: var(--role-page-bg) !important;
}

.admin-sidebar {
    width: var(--role-sidebar-width) !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 50 !important;
    overflow-y: auto !important;
}

.admin-main {
    flex: 1 1 auto !important;
    width: calc(100% - var(--role-sidebar-width)) !important;
    max-width: calc(100% - var(--role-sidebar-width)) !important;
    margin-left: var(--role-sidebar-width) !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background: var(--role-page-bg) !important;
}

.admin-main > *,
.app-content-shell > * {
    max-width: 100%;
    min-width: 0;
}

.app-content-shell,
.admin-main > .flash-stack {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: var(--role-content-gutter) !important;
}

.app-content-shell {
    padding-top: 0 !important;
    padding-bottom: var(--role-content-bottom) !important;
}

.admin-main > .flash-stack {
    padding-top: 0.15rem !important;
}

.app-content-shell > :is(
    .dashboard-container,
    .student-dashboard-container,
    .teacher-admin-page,
    .profile-page,
    .manage-users-page,
    .students-page,
    .registration-shell,
    .exams-page,
    .exams-container,
    .class-subjects-shell,
    .assign-page-shell,
    .create-page-shell,
    .session-page-shell,
    .class-edit-shell,
    .edit-user-page,
    .notification-page,
    .subjects-page,
    .exam-view-page,
    .question-create-page,
    .question-edit-page,
    .upload-container,
    .move-shell,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .container
) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.app-content-shell > :is(.dashboard-container, .student-dashboard-container) {
    min-height: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

.app-content-shell > .dashboard-container > :is(.welcome-header, .student-welcome-header):first-child {
    margin-top: 0 !important;
}

.app-content-shell > .create-page-shell,
.app-content-shell > .create-page-shell > .create-container {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-content-shell > .create-page-shell::before,
.app-content-shell > .create-page-shell::after {
    display: none !important;
}

.app-content-shell :is(
    .welcome-header,
    .student-welcome-header,
    .teacher-hero,
    .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,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero
) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    min-height: var(--role-hero-min-height) !important;
    box-sizing: border-box !important;
    margin: calc(var(--role-hero-edge-bleed) * -1) calc(var(--role-hero-edge-bleed) * -1) var(--role-section-gap) !important;
    padding: var(--role-hero-padding) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 0 var(--role-hero-radius) var(--role-hero-radius) !important;
    background: var(--role-hero-gradient) !important;
    box-shadow: 0 22px 44px -24px rgba(37, 99, 235, 0.55) !important;
    color: #fff !important;
}

.app-content-shell :is(
    .welcome-header,
    .student-welcome-header,
    .teacher-hero,
    .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,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero
) :is(h1, h2) {
    color: #fff !important;
    font-size: var(--role-hero-title-size) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.app-content-shell :is(
    .welcome-header,
    .student-welcome-header,
    .teacher-hero,
    .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,
    .exam-view-hero,
    .exams-hero,
    .exams-header,
    .question-create-hero,
    .question-edit-hero,
    .question-bank-hero,
    .upload-header,
    .profile-hero,
    .notification-header,
    .notification-hero
) p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: var(--role-hero-copy-size) !important;
    line-height: 1.45 !important;
    margin: 0.55rem 0 0 !important;
}

.app-content-shell :is(
    .create-kicker,
    .welcome-kicker,
    .assignment-kicker,
    .hero-kicker,
    .page-kicker,
    .upload-kicker,
    .question-bank-kicker,
    .profile-kicker
) {
    margin: 0 0 0.65rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #bfdbfe !important;
    font-size: var(--role-hero-kicker-size) !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

.app-content-shell :is(
    .welcome-content,
    .welcome-row,
    .create-hero-grid,
    .hero-content,
    .header-content,
    .page-header-content,
    .assignment-header-content,
    .question-bank-hero-content,
    .upload-header-content,
    .exams-hero-content
) {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.app-content-shell :is(
    .hero-actions,
    .question-edit-hero-actions,
    .create-hero-side,
    .hero-support,
    .assignment-header-meta,
    .create-header-stats,
    .students-hero-meta,
    .question-bank-hero-meta,
    .assign-header-stats,
    .upload-header-meta,
    .edit-header-meta,
    .move-hero-stats,
    .teacher-hero-meta,
    .exams-hero-strip
) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin: 0 !important;
}

.app-content-shell :is(
    .dashboard-card,
    .stat-card,
    .quick-actions-card,
    .chart-card,
    .section-card,
    .form-card,
    .table-container,
    .results-table-container,
    .profile-card,
    .subjects-stat-card,
    .exams-stat-card,
    .students-stat-card,
    .exam-list-panel,
    .assign-panel,
    .submit-panel,
    .info-box,
    .question-form-card,
    .upload-card,
    .action-card,
    .subject-card,
    .exam-card,
    .result-card
) {
    border-radius: var(--role-card-radius) !important;
    padding: var(--role-card-padding) !important;
}

.app-content-shell :is(
    .stats-grid,
    .quick-actions-grid,
    .actions-grid,
    .charts-grid,
    .section-grid,
    .quick-links,
    .academic-profile,
    .dashboard-stack,
    .section-stack,
    .subjects-grid,
    .exams-grid,
    .students-grid,
    .form-grid
) {
    gap: var(--role-section-gap) !important;
}

.app-content-shell :is(
    .stats-grid,
    .quick-actions-grid,
    .actions-grid,
    .charts-grid,
    .section-grid,
    .quick-links,
    .academic-profile,
    .dashboard-stack,
    .section-card,
    .quick-actions-card,
    .chart-card,
    .table-container,
    .results-table-container,
    .form-card,
    .profile-card
) {
    margin-top: 0 !important;
    margin-bottom: var(--role-section-gap) !important;
}

.app-content-shell > *:first-child,
.app-content-shell > :is(.dashboard-container, .student-dashboard-container) > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.app-content-shell :is(.section-header, .section-body, .card-body, .form-body, .panel-body) {
    padding: var(--role-card-padding) !important;
}

.app-content-shell :is(
    .create-form-layout,
    .create-main-column,
    .create-side-column
) {
    gap: var(--role-section-gap) !important;
}

.app-content-shell :is(.form-section, .create-side-card, .submit-panel) {
    margin-bottom: 0 !important;
    padding: var(--role-card-padding) !important;
}

.app-content-shell :is(.form-header, .form-body) {
    padding: var(--role-card-padding) !important;
}

@media (max-width: 1280px) {
    :root {
        --role-sidebar-width: var(--role-sidebar-width-compact);
    }
}

@media (max-width: 1100px) {
    .admin-sidebar {
        width: min(84vw, 300px) !important;
        transform: translateX(-100%);
        will-change: transform;
        transition: transform 0.2s ease-out;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-bottom: 5.5rem;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        right: 1rem !important;
        bottom: 1rem !important;
        width: 52px !important;
        height: 52px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --role-content-gutter: 0.1rem;
        --role-content-bottom: 0.6rem;
        --role-section-gap: 0.5rem;
        --role-card-padding: 0.62rem;
        --role-hero-padding: 0.85rem;
        --role-hero-edge-bleed: 0.24rem;
        --role-hero-min-height: 118px;
        --role-hero-title-size: clamp(1.45rem, 6vw, 1.85rem);
        --role-hero-copy-size: 0.9rem;
    }

    .app-content-shell :is(
        .welcome-header,
        .student-welcome-header,
        .teacher-hero,
        .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,
        .exam-view-hero,
        .exams-hero,
        .exams-header,
        .question-create-hero,
        .question-edit-hero,
        .question-bank-hero,
        .upload-header,
        .profile-hero,
        .notification-header,
        .notification-hero
    ) {
        border-radius: 0 0 16px 16px !important;
        padding: var(--role-hero-padding) !important;
    }

    .app-content-shell :is(
        .welcome-content,
        .welcome-row,
        .create-hero-grid,
        .hero-content,
        .header-content,
        .page-header-content,
        .assignment-header-content,
        .question-bank-hero-content,
        .upload-header-content,
        .exams-hero-content
    ) {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .app-content-shell :is(
        .hero-actions,
        .question-edit-hero-actions,
        .create-hero-side,
        .hero-support,
        .assignment-header-meta,
        .create-header-stats,
        .students-hero-meta,
        .question-bank-hero-meta,
        .assign-header-stats,
        .upload-header-meta,
        .edit-header-meta,
        .move-hero-stats,
        .teacher-hero-meta,
        .exams-hero-strip
    ) {
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    :root {
        --role-content-gutter: 0.05rem;
        --role-section-gap: 0.45rem;
        --role-card-padding: 0.55rem;
        --role-hero-padding: 0.75rem;
        --role-hero-edge-bleed: 0.18rem;
        --role-hero-min-height: 110px;
        --role-hero-title-size: 1.38rem;
        --role-hero-copy-size: 0.85rem;
    }
}

/* Final role-wide hero pass: catches legacy page headers without touching card headers. */
.app-content-shell .users-page-header,
.admin-content-shell .exam-container > .exam-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    min-height: var(--role-hero-min-height) !important;
    box-sizing: border-box !important;
    margin: 0 0 var(--role-section-gap) !important;
    padding: var(--role-hero-padding) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 0 var(--role-hero-radius) var(--role-hero-radius) !important;
    background: var(--role-hero-gradient) !important;
    box-shadow: 0 22px 44px -24px rgba(37, 99, 235, 0.55) !important;
    color: #fff !important;
}

.app-content-shell .users-page-header :is(h1, h2),
.admin-content-shell .exam-container > .exam-header :is(h1, h2) {
    color: #fff !important;
    font-size: var(--role-hero-title-size) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.app-content-shell .users-page-header p,
.admin-content-shell .exam-container > .exam-header p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: var(--role-hero-copy-size) !important;
    line-height: 1.45 !important;
    margin: 0.55rem 0 0 !important;
}

.app-content-shell .exams-hero > .exams-header {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-content-shell .exams-hero > .exams-header::before,
.app-content-shell .exams-hero > .exams-header::after {
    display: none !important;
}

@media (max-width: 768px) {
    .app-content-shell .users-page-header,
    .admin-content-shell .exam-container > .exam-header {
        border-radius: 0 0 16px 16px !important;
        padding: var(--role-hero-padding) !important;
    }
}

body.exam-mode-body .admin-sidebar,
body.exam-mode-body .menu-toggle {
    display: none !important;
}

body.exam-mode-body .admin-wrapper {
    display: block !important;
}

body.exam-mode-body .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
}

body.exam-mode-body .app-content-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.exam-mode-body .app-content-shell > .exam-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}