:root {
    --ea-navy: #0A1628;
    --ea-navy-2: #0F2040;
    --ea-teal: #0E9A8C;
    --ea-teal-2: #0BBFAE;
    --ea-coral: #FF5A3C;
    --ea-coral-2: #FF7A5A;
    --ea-gold: #F4B942;
    --ea-indigo: #4F6EF7;
    --ea-soft: #F2F7FF;

    --ea-grad-hero: linear-gradient(135deg, var(--ea-navy) 0%, #0F2A4A 50%, #0E3A3A 100%);
    --ea-grad-accent: linear-gradient(135deg, var(--ea-teal) 0%, var(--ea-indigo) 100%);
    --ea-grad-coral: linear-gradient(135deg, var(--ea-coral) 0%, var(--ea-gold) 100%);
    --ea-grad-page: linear-gradient(180deg, #F2F7FF 0%, #EAFAF8 100%);
}

/* Default (no explicit app-level preference yet) follows the OS setting... */
@media (prefers-color-scheme: dark) {
    :root {
        --ea-grad-page: linear-gradient(180deg, #0A1628 0%, #0B1D33 100%);
    }
}

/* ...but once MainLayout's dark-mode toggle sets one of these on the root element,
   it always wins over the OS preference, so the page background never disagrees
   with the MudBlazor palette the user actually chose. */
.ea-theme-light {
    --ea-grad-page: linear-gradient(180deg, #F2F7FF 0%, #EAFAF8 100%);
}

.ea-theme-dark {
    --ea-grad-page: linear-gradient(180deg, #0A1628 0%, #0B1D33 100%);
}

html, body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Modern animated splash screen shown while the WASM bundle boots. Blazor replaces
   #app's content wholesale once the app renders, so this markup only ever exists
   for that initial window - no cleanup needed on the Blazor side. */
.ea-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ea-grad-hero);
    background-size: 200% 200%;
    animation: ea-gradient-shift 10s ease infinite;
}

@keyframes ea-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ea-splash-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: ea-float 12s ease-in-out infinite;
}

.ea-splash-blob-1 {
    width: 320px;
    height: 320px;
    background: var(--ea-teal);
    top: -80px;
    left: -80px;
}

.ea-splash-blob-2 {
    width: 380px;
    height: 380px;
    background: var(--ea-coral);
    bottom: -120px;
    right: -100px;
    animation-delay: -4s;
}

.ea-splash-blob-3 {
    width: 260px;
    height: 260px;
    background: var(--ea-gold);
    bottom: 10%;
    left: 8%;
    animation-delay: -8s;
}

@keyframes ea-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.08); }
}

.ea-splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
}

.ea-splash-logo {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ea-splash-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ea-teal), var(--ea-indigo), var(--ea-coral), var(--ea-gold), var(--ea-teal));
    animation: ea-spin 1.4s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}

@keyframes ea-spin {
    to { transform: rotate(360deg); }
}

.ea-splash-mark {
    position: relative;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--ea-soft);
}

.ea-splash-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.01em;
}

.ea-splash-text {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ea-soft);
    opacity: 0.85;
}

.ea-dots span {
    animation: ea-dot-fade 1.4s infinite;
    opacity: 0;
}

.ea-dots span:nth-child(1) { animation-delay: 0s; }
.ea-dots span:nth-child(2) { animation-delay: 0.2s; }
.ea-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ea-dot-fade {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@media (max-width: 480px) {
    .ea-splash-logo { width: 72px; height: 72px; }
    .ea-splash-title { font-size: 1.25rem; }
    .ea-splash-blob-1, .ea-splash-blob-2, .ea-splash-blob-3 { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
    .ea-splash, .ea-splash-blob, .ea-splash-ring, .ea-dots span {
        animation: none;
    }
}

/* Full-screen centered spinner shown briefly while JwtAuthenticationStateProvider
   resolves the stored token (AuthorizeRouteView's <Authorizing> fragment). */
.ea-auth-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* App-wide modern touches, applied after MudBlazor's own stylesheet loads */
.mud-layout {
    background: var(--ea-grad-page);
}

.mud-paper {
    border-radius: 16px;
}

.ea-appbar-gradient {
    background: var(--ea-grad-hero) !important;
    backdrop-filter: blur(8px);
}

.ea-auth-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
}

    .ea-auth-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: var(--ea-grad-accent);
    }

.ea-auth-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ea-grad-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}

/* ---------- Left navigation drawer ---------- */

.ea-drawer {
    background: linear-gradient(180deg, var(--ea-navy) 0%, var(--ea-navy-2) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ea-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    min-height: unset !important;
    flex: none;
}

.ea-drawer-logo {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ea-grad-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(14, 154, 140, 0.35);
}

.ea-drawer-logo .mud-icon-root {
    width: 18px;
    height: 18px;
}

.ea-drawer-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ea-drawer-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
    /* mud-divider-fullwidth sets width:100%, so adding horizontal margin on top
       of that (rather than shrinking the width) pushed the element past the
       drawer's right edge and caused the horizontal scrollbar. */
    width: calc(100% - 32px) !important;
    margin: 0 16px 8px !important;
    /* MudBlazor's base .mud-divider rule sets flex: 1 0 auto (meant for toolbar
       separators). Inside the drawer's flex-column layout that makes the <hr>
       stretch to consume all remaining height, pushing the nav menu far down. */
    flex: none !important;
    flex-grow: 0 !important;
}

/* Nav items: muted slate by default, brighten on hover, solid accent pill when active */
.ea-nav-menu {
    padding: 0 10px 16px;
    overflow-x: hidden;
}

.ea-nav-menu .mud-nav-link {
    border-radius: 8px;
    margin-bottom: 1px;
    padding: 6px 10px;
    min-height: unset;
    color: #9FB3C8 !important;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ea-nav-menu .mud-nav-link-icon {
    color: #6C86A3 !important;
    transition: color 0.15s ease;
}

.ea-nav-menu .mud-nav-link-icon .mud-icon-root {
    width: 18px;
    height: 18px;
}

.ea-nav-menu .mud-nav-link-text {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ea-nav-menu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--ea-soft) !important;
}

.ea-nav-menu .mud-nav-link:hover .mud-nav-link-icon {
    color: var(--ea-teal-2) !important;
}

.ea-nav-menu .mud-nav-link.active {
    background: var(--ea-grad-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 110, 247, 0.35);
}

.ea-nav-menu .mud-nav-link.active .mud-nav-link-icon {
    color: #ffffff !important;
}

.ea-nav-menu .mud-nav-link-expand-icon {
    color: #6C86A3 !important;
}

.ea-nav-menu .mud-nav-link-expand-icon .mud-icon-root {
    width: 16px;
    height: 16px;
}

/* Group headers: each top-level section (Academic Setup, People, Exams & Marks, Insight,
   Settings) gets its own accent color via ea-accent-1..5 (set from NavMenu.razor's Class param,
   reusing the same accent system/colors as the Insight report cards for a consistent feel across
   the app), rather than one uniform gold. Only one group is ever expanded at a time (accordion
   behavior driven by NavMenu.razor's _expandedGroup) - ea-nav-group-open marks that one so its
   header gets a tinted background, distinguishing "currently open" from the other, quieter,
   collapsed headers at a glance. */
.ea-nav-menu .mud-nav-group {
    margin-bottom: 2px;
}

.ea-nav-menu .mud-nav-group > .mud-nav-link {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    padding: 8px 10px;
    background: transparent !important;
    box-shadow: none;
    opacity: 0.85;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ea-nav-menu .mud-nav-group > .mud-nav-link:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.ea-nav-menu .mud-nav-group.ea-nav-group-open > .mud-nav-link {
    opacity: 1;
}

.ea-nav-menu .mud-nav-group .mud-nav-link-expand-icon {
    transition: transform 0.2s ease;
}

.ea-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link {
    margin-left: 4px;
    font-size: 0.8rem;
}

.ea-nav-menu .mud-nav-group.ea-accent-1 > .mud-nav-link,
.ea-nav-menu .mud-nav-group.ea-accent-1 > .mud-nav-link .mud-nav-link-icon,
.ea-nav-menu .mud-nav-group.ea-accent-1 > .mud-nav-link .mud-nav-link-expand-icon { color: var(--ea-teal) !important; }
.ea-nav-menu .mud-nav-group.ea-accent-1.ea-nav-group-open > .mud-nav-link { background: color-mix(in srgb, var(--ea-teal) 16%, transparent) !important; }

.ea-nav-menu .mud-nav-group.ea-accent-2 > .mud-nav-link,
.ea-nav-menu .mud-nav-group.ea-accent-2 > .mud-nav-link .mud-nav-link-icon,
.ea-nav-menu .mud-nav-group.ea-accent-2 > .mud-nav-link .mud-nav-link-expand-icon { color: var(--ea-indigo) !important; }
.ea-nav-menu .mud-nav-group.ea-accent-2.ea-nav-group-open > .mud-nav-link { background: color-mix(in srgb, var(--ea-indigo) 16%, transparent) !important; }

.ea-nav-menu .mud-nav-group.ea-accent-3 > .mud-nav-link,
.ea-nav-menu .mud-nav-group.ea-accent-3 > .mud-nav-link .mud-nav-link-icon,
.ea-nav-menu .mud-nav-group.ea-accent-3 > .mud-nav-link .mud-nav-link-expand-icon { color: var(--ea-coral) !important; }
.ea-nav-menu .mud-nav-group.ea-accent-3.ea-nav-group-open > .mud-nav-link { background: color-mix(in srgb, var(--ea-coral) 16%, transparent) !important; }

.ea-nav-menu .mud-nav-group.ea-accent-4 > .mud-nav-link,
.ea-nav-menu .mud-nav-group.ea-accent-4 > .mud-nav-link .mud-nav-link-icon,
.ea-nav-menu .mud-nav-group.ea-accent-4 > .mud-nav-link .mud-nav-link-expand-icon { color: var(--ea-gold) !important; }
.ea-nav-menu .mud-nav-group.ea-accent-4.ea-nav-group-open > .mud-nav-link { background: color-mix(in srgb, var(--ea-gold) 18%, transparent) !important; }

.ea-nav-menu .mud-nav-group.ea-accent-5 > .mud-nav-link,
.ea-nav-menu .mud-nav-group.ea-accent-5 > .mud-nav-link .mud-nav-link-icon,
.ea-nav-menu .mud-nav-group.ea-accent-5 > .mud-nav-link .mud-nav-link-expand-icon { color: var(--ea-teal-2) !important; }
.ea-nav-menu .mud-nav-group.ea-accent-5.ea-nav-group-open > .mud-nav-link { background: color-mix(in srgb, var(--ea-teal-2) 16%, transparent) !important; }

@media (max-width: 599.98px) {
    .ea-drawer-header {
        padding: 12px 14px 8px;
    }

    .ea-nav-menu {
        padding: 0 8px 16px;
    }
}

/* ---------- Dialogs (create/edit forms, confirmations) ---------- */

.mud-dialog {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 22, 40, 0.25) !important;
}

.mud-dialog-title {
    display: flex;
    align-items: center;
    padding: 20px 28px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--ea-navy) 0%, var(--ea-navy-2) 100%);
    color: #ffffff !important;
}

.mud-dialog-title .mud-typography {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mud-dialog-title .mud-icon-button {
    color: rgba(255, 255, 255, 0.85) !important;
}

.mud-dialog-content {
    padding: 28px !important;
}

.mud-dialog-actions {
    padding: 16px 28px 24px !important;
    gap: 8px;
}

.mud-dialog-actions .mud-button-root {
    border-radius: 10px;
    text-transform: none;
    font-weight: 600;
    padding: 6px 20px;
}

.mud-dialog-content .mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px;
}

.mud-dialog-content .mud-form > .mud-input-control,
.mud-dialog-content .mud-form > div > .mud-input-control {
    margin-bottom: 4px;
}

/* ---------- Buttons (app-wide): modern shape + hover motion ---------- */

.mud-button-root {
    border-radius: 10px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                background-color 0.15s ease,
                color 0.15s ease;
}

.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-icon-button:hover {
    transform: translateY(-1px);
}

.mud-button-root.mud-button-filled:active {
    transform: translateY(0);
}

.mud-fab {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.mud-fab:hover {
    transform: translateY(-2px) scale(1.03);
}

.mud-icon-button {
    border-radius: 10px;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
}

.mud-icon-button:hover {
    transform: scale(1.1);
}

/* ---------- Data grids / list tables: compact modern rows, fluid + responsive ---------- */

.ea-data-grid {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.ea-data-grid .mud-table-container {
    overflow-x: auto;
}

/* !important: MudBlazor's responsive Dense-mode rule (e.g. .mud-xs-table.mud-table-dense
   .mud-table-cell) stacks two classes on one element, giving it higher specificity than a
   plain two-class descendant selector — a flat override here would silently lose. */
.ea-data-grid .mud-table-cell {
    padding: 4px 16px !important;
    font-size: 0.85rem;
    line-height: 1.3;
    transition: background-color 0.15s ease;
}

.ea-data-grid .mud-table-cell .mud-chip {
    margin: 0;
    height: 22px;
    font-size: 0.7rem;
    padding: 0 10px;
}

.ea-data-grid .mud-table-cell .mud-icon-button {
    padding: 4px;
}

.ea-data-grid .mud-table-cell .mud-icon-button .mud-icon-root {
    font-size: 1.05rem;
}

.ea-data-grid .mud-table-head .mud-table-cell {
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.ea-data-grid .mud-table-row {
    transition: background-color 0.15s ease;
}

.ea-data-grid .mud-table-row:hover {
    background-color: var(--mud-palette-table-hover);
}

.ea-data-grid .mud-table-row .mud-chip {
    transition: transform 0.15s ease;
}

.ea-data-grid .mud-table-row:hover .mud-chip {
    transform: scale(1.04);
}

/* Single, professional loading indicator (MudDataGrid's own top bar only —
   no duplicate full-row progress bar). Slightly taller than the 2px default
   and coloured with the brand accent gradient for a more polished feel. */
.ea-data-grid .mud-table-loading .mud-progress-linear {
    height: 3px !important;
    border-radius: 0;
}

.ea-data-grid .mud-table-loading .mud-progress-linear-bar {
    background-image: linear-gradient(90deg, var(--ea-teal) 0%, var(--ea-indigo) 100%);
}

@media (max-width: 599.98px) {
    .ea-data-grid .mud-table-cell {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .ea-data-grid .mud-table-head .mud-table-cell {
        padding: 8px 10px;
        font-size: 0.7rem;
    }
}

/* Plain-HTML mark-entry input used in place of MudNumericField inside large marks-entry
   grids. A full MudNumericField per cell is expensive to mount in bulk (JS interop setup per
   component) and visibly slows down rendering a class of 30-40+ students; this is a much
   lighter drop-in replacement styled to match MudBlazor's outlined inputs closely enough. */
.ea-mark-input {
    width: 100%;
    max-width: 90px;
    padding: 6px 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--mud-palette-text-primary, inherit);
    background-color: transparent;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(255, 255, 255, 0.3));
    border-radius: 6px;
    transition: border-color 0.15s ease;
}

.ea-mark-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #594ae2);
    border-width: 2px;
    padding: 5px 7px;
}

.ea-mark-input:disabled {
    opacity: 0.5;
    background-color: var(--mud-palette-action-disabled-background, rgba(255, 255, 255, 0.05));
}

.ea-mark-input-invalid {
    border-color: var(--mud-palette-error, #f44336);
    border-width: 2px;
    padding: 5px 7px;
    background-color: rgba(244, 67, 54, 0.08);
}

.ea-mark-input-invalid:focus {
    border-color: var(--mud-palette-error, #f44336);
}

/* ---------- Class Results: colorful, modern result sheet ---------- */
/* Light-background / matching-dark-text pairs, shared conceptually with the PDF/Excel
   report generator (ReportGenerator.cs) so the on-screen grid and the exported files read
   as the same design, just rendered in three different technologies. */
:root {
    --ea-band-a-bg: #E1F7EA;   --ea-band-a-text: #146C43;
    --ea-band-b-bg: #E4EAFC;   --ea-band-b-text: #33409E;
    --ea-band-c-bg: #FFF3D6;   --ea-band-c-text: #8A6414;
    --ea-band-s-bg: #FFE8D9;   --ea-band-s-text: #B14A16;
    --ea-band-w-bg: #FCE1DE;   --ea-band-w-text: #B02E22;
    --ea-band-ab-bg: #EDF0F3;  --ea-band-ab-text: #55606E;
    --ea-results-header-bg: #E8ECFB;
    --ea-results-header-text: #2A3374;
    --ea-results-stripe-bg: #F7F9FC;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ea-results-stripe-bg: rgba(255, 255, 255, 0.03);
    }
}

.ea-theme-dark {
    --ea-results-stripe-bg: rgba(255, 255, 255, 0.03);
}

.ea-results-grid {
    border: 1px solid var(--ea-results-header-bg);
}

.ea-results-grid thead th {
    background: var(--ea-results-header-bg) !important;
    color: var(--ea-results-header-text) !important;
    border: 1px solid rgba(42, 51, 116, 0.15) !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ea-results-grid tbody tr td,
.ea-results-grid tfoot tr td {
    border: 1px solid rgba(42, 51, 116, 0.08) !important;
}

.ea-results-grid tbody tr:nth-of-type(even) {
    background-color: var(--ea-results-stripe-bg);
}

.ea-results-grid .ea-band-a  { background: var(--ea-band-a-bg)  !important; color: var(--ea-band-a-text)  !important; }
.ea-results-grid .ea-band-b  { background: var(--ea-band-b-bg)  !important; color: var(--ea-band-b-text)  !important; }
.ea-results-grid .ea-band-c  { background: var(--ea-band-c-bg)  !important; color: var(--ea-band-c-text)  !important; }
.ea-results-grid .ea-band-s  { background: var(--ea-band-s-bg)  !important; color: var(--ea-band-s-text)  !important; }
.ea-results-grid .ea-band-w  { background: var(--ea-band-w-bg)  !important; color: var(--ea-band-w-text)  !important; }
.ea-results-grid .ea-band-ab { background: var(--ea-band-ab-bg) !important; color: var(--ea-band-ab-text) !important; }

.ea-results-grid .ea-band-row td:first-of-type {
    font-weight: 700;
}

.ea-band-legend {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ea-band-legend.ea-band-a  { background: var(--ea-band-a-bg);  color: var(--ea-band-a-text); }
.ea-band-legend.ea-band-b  { background: var(--ea-band-b-bg);  color: var(--ea-band-b-text); }
.ea-band-legend.ea-band-c  { background: var(--ea-band-c-bg);  color: var(--ea-band-c-text); }
.ea-band-legend.ea-band-s  { background: var(--ea-band-s-bg);  color: var(--ea-band-s-text); }
.ea-band-legend.ea-band-w  { background: var(--ea-band-w-bg);  color: var(--ea-band-w-text); }
.ea-band-legend.ea-band-ab { background: var(--ea-band-ab-bg); color: var(--ea-band-ab-text); }

/* Column header text runs bottom-to-top (matching the PDF/Excel exports), freeing up horizontal
   space so every subject column can stay small and uniform - "Name" is the one header that
   stays horizontal, since it's read directly rather than scanned as a label. */
.ea-results-grid thead th.ea-vertical-header {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
    height: 130px;
    padding: 8px 4px !important;
    font-size: 0.68rem;
}

/* Every subject column is the same small, fixed width - just enough to show a 3-digit mark
   ("100") or "AB" clearly, regardless of how long the subject's name is. */
.ea-results-grid th.ea-subject-col,
.ea-results-grid td.ea-subject-col {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.ea-results-remarks-input {
    width: 100%;
    max-width: 160px;
}

@media (max-width: 599.98px) {
    .ea-results-remarks-input {
        max-width: 110px;
    }
}

/* ---------- Insight report catalog ---------- */
/* Built on native CSS Grid rather than MudGrid/MudItem: a direct child of a CSS grid container
   has its outer display "blockified" per spec regardless of its own display type, so MudTooltip's
   normally shrink-to-content wrapper is forced to fill its grid cell automatically - no !important
   width overrides needed (an earlier MudGrid-based version needed exactly that hack). Card height
   is still fixed explicitly, since grid row-stretch alone doesn't guarantee two different rows end
   up the same height when their content naturally differs.

   Section accents reuse the app's existing brand palette (--ea-teal / --ea-indigo / --ea-coral /
   --ea-gold, plus their -2 variants) so each persona's block reads as visually distinct without
   introducing new colors - cycles every 6 sections via ea-accent-1..6. */

.ea-insight-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.ea-insight-header-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ea-grad-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(14, 154, 140, 0.3);
}

.ea-insight-title {
    font-weight: 700;
}

.ea-insight-subtitle {
    color: var(--mud-palette-text-secondary);
}

.ea-insight-section {
    margin-bottom: 30px;
}

.ea-insight-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ea-insight-section-bar {
    width: 5px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ea-insight-section-title {
    font-weight: 700;
}

.ea-insight-section-count {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
}

.ea-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
}

.ea-insight-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 104px;
    padding: 12px 8px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ea-insight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(10, 22, 40, 0.14);
    border-color: var(--ea-teal);
}

.ea-insight-card.is-unavailable {
    opacity: 0.72;
}

.ea-insight-card.is-unavailable:hover {
    opacity: 0.95;
}

.ea-insight-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ea-insight-icon .mud-icon-root {
    width: 20px;
    height: 20px;
}

.ea-insight-card-label {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ea-insight-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--mud-palette-action-disabled-background, rgba(0, 0, 0, 0.08));
    color: var(--mud-palette-text-secondary);
}

.ea-accent-1.ea-insight-section-bar { background: var(--ea-teal); }
.ea-accent-2.ea-insight-section-bar { background: var(--ea-indigo); }
.ea-accent-3.ea-insight-section-bar { background: var(--ea-coral); }
.ea-accent-4.ea-insight-section-bar { background: var(--ea-gold); }
.ea-accent-5.ea-insight-section-bar { background: var(--ea-teal-2); }
.ea-accent-6.ea-insight-section-bar { background: var(--ea-coral-2); }

.ea-accent-1.ea-insight-icon { background: color-mix(in srgb, var(--ea-teal) 16%, transparent); color: var(--ea-teal); }
.ea-accent-2.ea-insight-icon { background: color-mix(in srgb, var(--ea-indigo) 16%, transparent); color: var(--ea-indigo); }
.ea-accent-3.ea-insight-icon { background: color-mix(in srgb, var(--ea-coral) 16%, transparent); color: var(--ea-coral); }
.ea-accent-4.ea-insight-icon { background: color-mix(in srgb, var(--ea-gold) 20%, transparent); color: #9A6B0E; }
.ea-accent-5.ea-insight-icon { background: color-mix(in srgb, var(--ea-teal-2) 16%, transparent); color: var(--ea-teal-2); }
.ea-accent-6.ea-insight-icon { background: color-mix(in srgb, var(--ea-coral-2) 16%, transparent); color: var(--ea-coral-2); }

@media (max-width: 599.98px) {
    .ea-insight-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 8px;
    }

    .ea-insight-card {
        height: 92px;
        padding: 10px 6px;
    }
}