/* StudentIDCardWASM global SaaS workspace, page-style and loader fix
   Keep this as a global stylesheet. MudBlazor/Syncfusion child markup does not reliably receive
   Razor CSS isolation attributes, so the layout/sidebar/grid/page shell styles must be global. */

:root {
    --idc-primary: #2563eb;
    --idc-primary-600: #1d4ed8;
    --idc-primary-700: #1e40af;
    --idc-primary-dark: #1e3a8a;
    --idc-success: #16a34a;
    --idc-warning: #f59e0b;
    --idc-danger: #ef4444;
    --idc-ink: #0f172a;
    --idc-muted: #64748b;
    --idc-line: #e2e8f0;
    --idc-soft-line: #eef2f7;
    --idc-panel: #ffffff;
    --idc-body: #f5f7fb;
    --idc-sidebar: #eef3f9;
    --idc-sidebar-2: #e8eef6;
    --idc-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.08);
    --idc-shadow-md: 0 18px 42px rgba(15, 23, 42, 0.12);
    --idc-radius-lg: 24px;
    --idc-radius-md: 18px;
    --idc-appbar-height: 64px;
    --idc-drawer-width: 232px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--idc-body);
    color: var(--idc-ink);
    overflow-x: hidden;
    font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif;
}

body {
    font-size: 15px;
    line-height: 1.45;
}

a {
    color: var(--idc-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   MudBlazor layout corrections
   ------------------------------------------------------------------------- */

.app-shell-bg,
.admin-layout,
.teacher-layout {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 6%, rgba(37, 99, 235, 0.08), transparent 26%),
        radial-gradient(circle at 90% 12%, rgba(14, 165, 233, 0.06), transparent 28%),
        var(--idc-body) !important;
}

.admin-appbar.mud-appbar,
.teacher-appbar.mud-appbar {
    height: var(--idc-appbar-height) !important;
    min-height: var(--idc-appbar-height) !important;
    background: linear-gradient(90deg, #1e3a8a 0%, #234aa6 54%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    z-index: 1205 !important;
}

.admin-appbar .mud-icon-button,
.teacher-appbar .mud-icon-button {
    color: #ffffff !important;
}

.admin-appbar-icon,
.teacher-appbar-icon {
    margin-left: 4px !important;
}

.admin-title,
.teacher-title {
    margin-left: 8px !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
}

.admin-user-menu .mud-button-root,
.teacher-user-menu .mud-button-root {
    min-height: 44px !important;
    padding-inline: 16px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.18) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 22px rgba(15, 23, 42, 0.12) !important;
}

.admin-user-menu .mud-button-label,
.teacher-user-menu .mud-button-label {
    font-weight: 800 !important;
    letter-spacing: .01em !important;
}

.admin-drawer.mud-drawer,
.teacher-drawer.mud-drawer {
    width: var(--idc-drawer-width) !important;
    min-width: var(--idc-drawer-width) !important;
    max-width: var(--idc-drawer-width) !important;
    background: #eef3f9 !important;
    color: #172033 !important;
    border-right: 1px solid rgba(37, 99, 235, 0.12) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, 0.13) !important;
    overflow: hidden !important;
    z-index: 1200 !important;
}

.admin-drawer .mud-drawer-content,
.teacher-drawer .mud-drawer-content {
    width: var(--idc-drawer-width) !important;
    max-width: var(--idc-drawer-width) !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.10), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f9 48%, #e8eef6 100%) !important;
}

.admin-drawer-header.mud-drawer-header,
.teacher-drawer-header.mud-drawer-header {
    height: 82px !important;
    min-height: 82px !important;
    padding: 14px 15px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.10) !important;
    background: rgba(255,255,255,0.72) !important;
    overflow: hidden !important;
}

.admin-brand-row,
.teacher-brand-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.admin-brand-mark,
.teacher-brand-mark,
.admin-drawer img.admin-brand-mark,
.teacher-drawer img.teacher-brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    padding: 4px !important;
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.12) !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.12) !important;
}

.admin-brand-text,
.teacher-brand-text {
    min-width: 0 !important;
    overflow: hidden !important;
}

.admin-brand-name,
.teacher-brand-name {
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-brand-sub,
.teacher-brand-sub {
    margin-top: 3px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #2563eb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-nav,
.teacher-nav {
    padding: 10px 10px 24px !important;
}

.admin-nav .mud-nav-link,
.admin-nav .mud-nav-group .mud-nav-link,
.teacher-nav .mud-nav-link,
.teacher-nav .mud-nav-group .mud-nav-link {
    min-height: 42px !important;
    margin: 4px 0 !important;
    padding: 0 11px !important;
    border-radius: 14px !important;
    color: #233044 !important;
    font-weight: 760 !important;
    letter-spacing: 0.003em !important;
    overflow: hidden !important;
}

.admin-nav .mud-nav-link .mud-nav-link-text,
.admin-nav .mud-nav-group .mud-nav-link .mud-nav-link-text,
.teacher-nav .mud-nav-link .mud-nav-link-text,
.teacher-nav .mud-nav-group .mud-nav-link .mud-nav-link-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-nav .mud-nav-link .mud-icon-root,
.admin-nav .mud-nav-group .mud-nav-link .mud-icon-root,
.admin-nav .mud-nav-group .mud-nav-group-icon,
.teacher-nav .mud-nav-link .mud-icon-root,
.teacher-nav .mud-nav-group .mud-nav-link .mud-icon-root,
.teacher-nav .mud-nav-group .mud-nav-group-icon {
    color: #2563eb !important;
    opacity: 0.98 !important;
}

.admin-nav .mud-nav-link:hover,
.admin-nav .mud-nav-group > .mud-nav-link:hover,
.teacher-nav .mud-nav-link:hover,
.teacher-nav .mud-nav-group > .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
}

.admin-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.teacher-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 4px 0 0 #2563eb, 0 12px 24px rgba(37, 99, 235, 0.10) !important;
}

.admin-nav .mud-nav-group .mud-collapse-container,
.teacher-nav .mud-nav-group .mud-collapse-container {
    padding-left: 0 !important;
}

.admin-nav .mud-nav-group .mud-nav-link:not(:first-child),
.teacher-nav .mud-nav-group .mud-nav-link:not(:first-child) {
    margin-left: 8px !important;
    width: calc(100% - 8px) !important;
    min-height: 38px !important;
    font-size: 0.90rem !important;
    color: #334155 !important;
}

.admin-main.mud-main-content,
.teacher-main.mud-main-content {
    min-height: 100vh !important;
    background: transparent !important;
    padding-top: var(--idc-appbar-height) !important;
    overflow-x: hidden !important;
}

.admin-container.mud-container,
.teacher-container.mud-container {
    padding: 24px 28px 38px !important;
    max-width: 100% !important;
}

.admin-surface,
.teacher-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - var(--idc-appbar-height) - 56px) !important;
}

/* -------------------------------------------------------------------------
   General utility classes used by the migrated Hybrid pages
   ------------------------------------------------------------------------- */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -8px;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
    padding-inline: 8px;
}

.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.text-muted { color: var(--idc-muted) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* -------------------------------------------------------------------------
   SaaS page shell used by School/Staff/Student/Bulk Upload/Export/Admin pages
   ------------------------------------------------------------------------- */

.module-shell {
    width: 100%;
    padding: 2px 0 24px;
    color: var(--idc-ink);
}

.module-shell > .e-breadcrumb,
.module-shell .e-breadcrumb {
    margin-bottom: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 0.88rem !important;
}

.module-shell .e-breadcrumb .e-breadcrumb-text,
.module-shell .e-breadcrumb a {
    color: #475569 !important;
    font-weight: 600 !important;
}

.module-shell .e-breadcrumb a {
    color: var(--idc-primary) !important;
}

.module-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    margin-bottom: 18px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .25), transparent 28%),
        radial-gradient(circle at 92% 24%, rgba(125, 211, 252, .20), transparent 26%),
        linear-gradient(135deg, #1e3a8a 0%, #2563eb 54%, #0ea5e9 100%);
    box-shadow: 0 22px 54px rgba(37, 99, 235, 0.20);
}

.module-hero::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.module-hero-left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.module-hero-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.module-hero-mud-icon,
.module-hero-icon .mud-icon-root {
    color: #ffffff !important;
    font-size: 34px !important;
}

.module-hero-title-wrap {
    min-width: 0;
}

.module-hero-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.0vw, 2rem);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.module-hero-subtitle {
    max-width: 850px;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 520;
}

.module-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.module-soft-btn,
.module-primary-btn,
.module-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 850;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    white-space: nowrap;
}

.module-soft-btn {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .25);
}

.module-primary-btn {
    color: #1e3a8a;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}

.module-outline-btn {
    color: var(--idc-primary);
    background: #ffffff;
    border-color: rgba(37, 99, 235, .30);
}

.module-soft-btn:hover,
.module-primary-btn:hover,
.module-outline-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
    text-decoration: none;
}

.module-soft-btn:disabled,
.module-primary-btn:disabled,
.module-outline-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.module-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.module-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 110px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, .90);
    box-shadow: var(--idc-shadow-sm);
}

.module-summary-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .20);
}

.module-summary-card:nth-child(2) .module-summary-icon {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 14px 28px rgba(22, 163, 74, .16);
}

.module-summary-card:nth-child(3) .module-summary-icon {
    background: linear-gradient(135deg, #f97316, #f59e0b);
    box-shadow: 0 14px 28px rgba(245, 158, 11, .16);
}

.module-summary-card:nth-child(4) .module-summary-icon {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 14px 28px rgba(99, 102, 241, .16);
}

.module-summary-meta {
    min-width: 0;
}

.module-summary-label {
    color: var(--idc-muted);
    font-size: .84rem;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.module-summary-value {
    margin-top: 3px;
    color: var(--idc-ink);
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    line-height: 1.05;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-panel {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, .90);
    box-shadow: var(--idc-shadow-sm);
}

.module-panel + .module-panel,
.module-panel.mb-3 {
    margin-bottom: 18px !important;
}

.module-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--idc-soft-line);
}

.module-panel-title {
    margin: 0;
    color: var(--idc-ink);
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.012em;
}

.module-panel-subtitle {
    margin-top: 5px;
    color: var(--idc-muted);
    font-size: .91rem;
    font-weight: 520;
}

.module-panel-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.module-empty-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-weight: 780;
    font-size: .87rem;
}

.module-empty-note .e-icons {
    color: #f59e0b;
}

.school-filter-note-success {
    color: #166534;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.school-filter-note-success .e-icons {
    color: #16a34a;
}

.enterprise-form-pad {
    padding: 18px 20px 20px;
}

.module-grid-wrap {
    padding: 0 20px 20px;
}

/* Dialog/form grid used across pages */
.dialog-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.dialog-col-12 { grid-column: span 12; }
.dialog-col-9 { grid-column: span 9; }
.dialog-col-8 { grid-column: span 8; }
.dialog-col-6 { grid-column: span 6; }
.dialog-col-4 { grid-column: span 4; }
.dialog-col-3 { grid-column: span 3; }

.dialog-section-title {
    margin: 4px 0 12px;
    color: var(--idc-primary-dark);
    font-size: .82rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dialog-header-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

.dialog-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.enterprise-dialog .e-dlg-header-content {
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--idc-soft-line) !important;
}

.enterprise-dialog .e-dlg-content {
    padding: 20px 22px !important;
}

.enterprise-dialog .e-footer-content {
    padding: 14px 22px 18px !important;
    border-top: 1px solid var(--idc-soft-line) !important;
}

/* -------------------------------------------------------------------------
   Syncfusion grid / toolbar styling
   ------------------------------------------------------------------------- */

.enterprise-grid.e-grid,
.e-grid.enterprise-grid {
    border: 1px solid var(--idc-line) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif !important;
}

.enterprise-grid .e-toolbar {
    min-height: 54px !important;
    padding: 8px 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid var(--idc-line) !important;
}

.enterprise-grid .e-toolbar .e-toolbar-items {
    align-items: center !important;
}

.enterprise-grid .e-toolbar .e-tbar-btn,
.enterprise-grid .e-toolbar .e-btn {
    min-height: 36px !important;
    border-radius: 12px !important;
    color: #334155 !important;
    font-weight: 760 !important;
}

.enterprise-grid .e-toolbar .e-tbar-btn:hover,
.enterprise-grid .e-toolbar .e-btn:hover {
    color: var(--idc-primary) !important;
    background: #eff6ff !important;
}

.enterprise-grid .e-search-wrapper,
.enterprise-grid .e-input-group.e-search {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.enterprise-grid .e-gridheader {
    border-top: 0 !important;
    border-bottom: 1px solid var(--idc-line) !important;
}

.enterprise-grid .e-headercell {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    font-weight: 900 !important;
    height: 44px !important;
}

.enterprise-grid .e-headertext {
    font-weight: 900 !important;
}

.enterprise-grid .e-rowcell {
    border-color: #edf2f7 !important;
    color: #1f2937 !important;
    font-size: .93rem !important;
    height: 46px !important;
}

.enterprise-grid .e-row:hover .e-rowcell {
    background: #f8fbff !important;
}

.enterprise-grid .e-altrow .e-rowcell {
    background: #fcfdff !important;
}

.enterprise-grid .e-pager {
    border-top: 1px solid var(--idc-line) !important;
    background: #ffffff !important;
}

.grid-action-bar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.grid-action-btn {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    color: var(--idc-primary);
    background: #eff6ff;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.grid-action-btn:hover {
    transform: translateY(-1px);
    background: #dbeafe;
    border-color: #bfdbfe;
}

.grid-action-btn.delete {
    color: #dc2626;
    background: #fff1f2;
    border-color: #fecdd3;
}

.grid-action-btn.delete:hover {
    background: #ffe4e6;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .015em;
}

.status-pill.active {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.status-pill.inactive {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

/* Syncfusion inputs */
.enterprise-combo,
.school-ddl-wrap .e-control-wrapper,
.e-input-group,
.e-float-input,
.e-float-input.e-control-wrapper,
.e-input-group.e-control-wrapper {
    border-radius: 13px !important;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.e-float-input:not(.e-success):not(.e-warning):not(.e-error),
.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #cbd5e1 !important;
}

.e-input-group input.e-input,
.e-float-input input.e-input,
.e-input-group textarea.e-input,
.e-float-input textarea.e-input {
    min-height: 38px !important;
}

/* -------------------------------------------------------------------------
   Dashboard and Mud panel refinements
   ------------------------------------------------------------------------- */

.dashboard-shell {
    padding: 0 !important;
    color: var(--idc-ink) !important;
}

.dashboard-header {
    padding: 8px 0 4px !important;
}

.dashboard-panel,
.kpi-card,
.module-panel,
.module-summary-card {
    will-change: transform;
}

.dashboard-panel {
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    box-shadow: var(--idc-shadow-sm) !important;
}

.kpi-card {
    border-radius: 24px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
}

/* -------------------------------------------------------------------------
   Full-screen spinner/loader corrections
   ------------------------------------------------------------------------- */

.layout-loading-shell,
.global-spinner-overlay,
#CircularSpnnerOverlay:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(37, 99, 235, 0.18), transparent 32%),
        radial-gradient(circle at 84% 72%, rgba(16, 185, 129, 0.13), transparent 34%),
        rgba(248, 250, 252, 0.84) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

#CircularSpnnerOverlay[hidden],
.spinner-hidden,
.global-spinner-overlay.spinner-hidden {
    display: none !important;
}

.layout-loading-card,
.global-spinner-box,
#CircularSpnnerOverlay:not([hidden]) .CircularDiv,
#CircularSpnnerOverlay:not([hidden]) .global-spinner-box {
    width: min(420px, calc(100vw - 40px)) !important;
    min-height: 188px !important;
    padding: 34px 28px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 28px 84px rgba(15, 23, 42, 0.20) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#CircularSpnnerOverlay:not([hidden]) .CircularDiv::after {
    content: "Please wait...";
    margin-top: 18px;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.global-spinner-title,
.layout-loading-title {
    margin-top: 18px;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.global-spinner-subtitle,
.layout-loading-subtitle {
    margin-top: 5px;
    font-size: .86rem;
    font-weight: 650;
    color: #64748b;
}

.layout-loading-shell .e-spinner-pane,
.global-spinner-overlay .e-spinner-pane,
#CircularSpnnerOverlay:not([hidden]) .e-spinner-pane {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    background: transparent !important;
}

/* -------------------------------------------------------------------------
   Responsive corrections
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .module-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    :root {
        --idc-drawer-width: 268px;
    }

    .admin-container.mud-container,
    .teacher-container.mud-container {
        padding: 20px 16px 28px !important;
    }

    .module-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .module-hero-actions {
        justify-content: flex-start;
    }

    .dialog-col-6,
    .dialog-col-4,
    .dialog-col-3,
    .dialog-col-8,
    .dialog-col-9 {
        grid-column: span 12;
    }

    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-9,
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .module-summary-grid {
        grid-template-columns: 1fr;
    }

    .module-hero,
    .module-panel-header,
    .module-grid-wrap,
    .enterprise-form-pad {
        padding-left: 16px;
        padding-right: 16px;
    }

    .module-hero-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 16px;
    }

    .module-hero-mud-icon,
    .module-hero-icon .mud-icon-root {
        font-size: 28px !important;
    }

    .admin-title,
    .teacher-title {
        font-size: .98rem !important;
    }

    .admin-user-menu .mud-button-label,
    .teacher-user-menu .mud-button-label {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
   FINAL OVERRIDES: lighter theme-aligned sidebar + guaranteed page styling
   These overrides intentionally appear at the end so they win over older
   migrated Hybrid CSS and MudBlazor generated markup.
   ------------------------------------------------------------------------- */

:root {
    --idc-primary: #2563eb;
    --idc-primary-600: #1d4ed8;
    --idc-primary-700: #1e40af;
    --idc-accent: #0ea5e9;
    --idc-ink: #0f172a;
    --idc-muted: #64748b;
    --idc-line: #e2e8f0;
    --idc-soft-line: #edf2f7;
    --idc-panel: #ffffff;
    --idc-body: #f6f8fc;
    --idc-sidebar: #f8fbff;
    --idc-sidebar-2: #eef5ff;
    --idc-sidebar-text: #172554;
    --idc-sidebar-muted: #64748b;
    --idc-sidebar-hover: #eaf2ff;
    --idc-sidebar-active: #dbeafe;
    --idc-sidebar-active-border: #2563eb;
    --idc-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.08);
    --idc-shadow-md: 0 18px 42px rgba(15, 23, 42, 0.12);
    --idc-radius-lg: 24px;
    --idc-radius-md: 18px;
    --idc-appbar-height: 64px;
    --idc-drawer-width: 232px;
}

html, body {
    background: var(--idc-body) !important;
}

/* Make hidden overlays truly disappear even when old page markup uses hidden="true" */
[hidden],
.spinner-hidden,
#CircularSpnnerOverlay[hidden],
.global-spinner-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Main workspace */
.app-shell-bg,
.admin-layout,
.teacher-layout {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 12% 6%, rgba(37, 99, 235, 0.08), transparent 26%),
        radial-gradient(circle at 90% 12%, rgba(14, 165, 233, 0.06), transparent 28%),
        var(--idc-body) !important;
}

.admin-appbar.mud-appbar,
.teacher-appbar.mud-appbar {
    height: var(--idc-appbar-height) !important;
    min-height: var(--idc-appbar-height) !important;
    background: linear-gradient(90deg, #1e40af 0%, #2563eb 58%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.20) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 1205 !important;
}

.admin-appbar .mud-icon-button,
.teacher-appbar .mud-icon-button,
.admin-title,
.teacher-title {
    color: #ffffff !important;
}

.admin-title,
.teacher-title {
    margin-left: 8px !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}

.admin-user-menu .mud-button-root,
.teacher-user-menu .mud-button-root {
    min-height: 42px !important;
    padding-inline: 15px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 22px rgba(15, 23, 42, 0.12) !important;
}

/* Light, theme-aligned sidebar */
.admin-drawer.mud-drawer,
.teacher-drawer.mud-drawer {
    width: var(--idc-drawer-width) !important;
    min-width: var(--idc-drawer-width) !important;
    max-width: var(--idc-drawer-width) !important;
    background: #eef3f9 !important;
    color: #172033 !important;
    border-right: 1px solid rgba(37, 99, 235, 0.12) !important;
    box-shadow: 12px 0 34px rgba(15, 23, 42, 0.13) !important;
    overflow: hidden !important;
    z-index: 1200 !important;
}

.admin-drawer .mud-drawer-content,
.teacher-drawer .mud-drawer-content {
    width: var(--idc-drawer-width) !important;
    max-width: var(--idc-drawer-width) !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.10), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f9 48%, #e8eef6 100%) !important;
}

.admin-drawer-header.mud-drawer-header,
.teacher-drawer-header.mud-drawer-header {
    height: 82px !important;
    min-height: 82px !important;
    padding: 14px 15px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.10) !important;
    background: rgba(255,255,255,0.72) !important;
    overflow: hidden !important;
}

.admin-brand-row,
.teacher-brand-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.admin-brand-mark,
.teacher-brand-mark,
.admin-drawer img.admin-brand-mark,
.teacher-drawer img.teacher-brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    padding: 4px !important;
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.12) !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.12) !important;
}

.admin-brand-text,
.teacher-brand-text {
    min-width: 0 !important;
    overflow: hidden !important;
}

.admin-brand-name,
.teacher-brand-name {
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-brand-sub,
.teacher-brand-sub {
    margin-top: 3px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #2563eb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-nav,
.teacher-nav {
    padding: 10px 10px 24px !important;
}

.admin-nav .mud-nav-link,
.admin-nav .mud-nav-group .mud-nav-link,
.teacher-nav .mud-nav-link,
.teacher-nav .mud-nav-group .mud-nav-link {
    min-height: 42px !important;
    margin: 4px 0 !important;
    padding: 0 11px !important;
    border-radius: 14px !important;
    color: #233044 !important;
    font-weight: 760 !important;
    letter-spacing: 0.003em !important;
    overflow: hidden !important;
}

.admin-nav .mud-nav-link .mud-nav-link-text,
.admin-nav .mud-nav-group .mud-nav-link .mud-nav-link-text,
.teacher-nav .mud-nav-link .mud-nav-link-text,
.teacher-nav .mud-nav-group .mud-nav-link .mud-nav-link-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-nav .mud-nav-link .mud-icon-root,
.admin-nav .mud-nav-group .mud-nav-link .mud-icon-root,
.admin-nav .mud-nav-group .mud-nav-group-icon,
.teacher-nav .mud-nav-link .mud-icon-root,
.teacher-nav .mud-nav-group .mud-nav-link .mud-icon-root,
.teacher-nav .mud-nav-group .mud-nav-group-icon {
    color: #2563eb !important;
    opacity: 0.98 !important;
}

.admin-nav .mud-nav-link:hover,
.admin-nav .mud-nav-group > .mud-nav-link:hover,
.teacher-nav .mud-nav-link:hover,
.teacher-nav .mud-nav-group > .mud-nav-link:hover {
    background: var(--idc-sidebar-hover) !important;
    color: #1e40af !important;
    transform: translateX(1px) !important;
}

.admin-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.teacher-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 4px 0 0 #2563eb, 0 12px 24px rgba(37, 99, 235, 0.10) !important;
}

.admin-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root,
.teacher-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: #1d4ed8 !important;
}

.admin-nav .mud-nav-group .mud-collapse-container,
.teacher-nav .mud-nav-group .mud-collapse-container {
    padding-left: 0 !important;
}

.admin-nav .mud-nav-group .mud-nav-link:not(:first-child),
.teacher-nav .mud-nav-group .mud-nav-link:not(:first-child) {
    margin-left: 8px !important;
    width: calc(100% - 8px) !important;
    min-height: 38px !important;
    font-size: 0.90rem !important;
    color: #334155 !important;
}

.admin-main.mud-main-content,
.teacher-main.mud-main-content {
    min-height: 100vh !important;
    background: transparent !important;
    padding-top: var(--idc-appbar-height) !important;
    overflow-x: hidden !important;
}

.admin-container.mud-container,
.teacher-container.mud-container {
    padding: 24px 28px 38px !important;
    max-width: 100% !important;
}

.admin-surface,
.teacher-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - var(--idc-appbar-height) - 56px) !important;
}

/* Page-shell polish. These rules handle School, Staff, Student, Admin User, Export, Upload, and ID-card pages. */
.module-shell {
    width: 100% !important;
    padding: 0 0 26px !important;
    color: var(--idc-ink) !important;
}

.module-shell .module-hero {
    margin-top: 4px !important;
}

.module-hero,
.module-summary-card,
.module-panel,
.login-card,
.e-grid.enterprise-grid,
.module-grid-wrap {
    transform: translateZ(0);
}

.module-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.module-grid-wrap {
    padding: 0 !important;
    background: #ffffff !important;
}

.module-grid-wrap > div {
    min-height: 420px !important;
}

.e-grid.enterprise-grid,
.enterprise-grid.e-grid {
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
}

/* Global full-screen loader used by layouts and old pages */
.layout-loading-shell,
.global-spinner-overlay,
#CircularSpnnerOverlay:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.layout-loading-card,
.global-spinner-box,
.CircularDiv {
    min-width: 250px !important;
    max-width: 360px !important;
    padding: 26px 28px !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--idc-ink) !important;
}

.layout-loading-title,
.global-spinner-title {
    font-weight: 900 !important;
    color: var(--idc-ink) !important;
}

.layout-loading-subtitle,
.global-spinner-subtitle {
    color: var(--idc-muted) !important;
    font-size: .9rem !important;
    text-align: center !important;
}

@media (max-width: 1200px) {
    .module-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 960px) {
    :root {
        --idc-drawer-width: 268px;
    }

    .admin-container.mud-container,
    .teacher-container.mud-container {
        padding: 18px 14px 30px !important;
    }

    .module-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }

    .module-hero-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .module-summary-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Compact, theme-aligned sidebar accent and page-style fallback */
.sidebar-accent-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    padding: 0 14px 10px !important;
}

.sidebar-accent-strip span {
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #93c5fd, #2563eb) !important;
    opacity: .72 !important;
}

.sidebar-accent-strip span:nth-child(2) {
    background: linear-gradient(90deg, #bae6fd, #38bdf8) !important;
}

.sidebar-accent-strip span:nth-child(3) {
    background: linear-gradient(90deg, #dbeafe, #60a5fa) !important;
}

/* Hard fallback for pages migrated from Hybrid when global app CSS is cached. */
.module-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
}

.module-hero {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 22px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #eef6ff 100%) !important;
    border: 1px solid rgba(37, 99, 235, .10) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.module-hero-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.module-hero-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    color: #2563eb !important;
    background: #eaf2ff !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12) !important;
}

.module-hero-title {
    margin: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.module-hero-subtitle {
    margin-top: 3px !important;
    color: #475569 !important;
    font-weight: 500 !important;
}

.module-hero-actions,
.module-panel-tools,
.module-panel-header,
.module-grid-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.module-primary-btn,
.module-soft-btn {
    min-height: 40px !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.module-primary-btn {
    border: 0 !important;
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, .22) !important;
}

.module-soft-btn {
    border: 1px solid rgba(37, 99, 235, .26) !important;
    background: #ffffff !important;
    color: #1d4ed8 !important;
}

.module-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.module-summary-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, .10) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

.module-summary-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    color: #2563eb !important;
    background: #eaf2ff !important;
}

.module-summary-label {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
}

.module-summary-value {
    margin-top: 2px !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.module-panel {
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, .10) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
}

.module-panel-header {
    justify-content: space-between !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.module-panel-title {
    margin: 0 !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.module-panel-subtitle {
    margin-top: 2px !important;
    color: #64748b !important;
}

.module-grid-wrap {
    padding: 14px !important;
}

.enterprise-grid.e-grid {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

@media (max-width: 1200px) {
    .module-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
    .module-hero { align-items: flex-start !important; flex-direction: column !important; }
    .module-summary-grid { grid-template-columns: 1fr !important; }
}