/* =========================================================
   STUDENT PORTAL / AUTH THEME CSS
   File: wwwroot/css/student-portal.css

   Scope:
   - .student-theme = authenticated Student Portal pages
   - .auth-theme    = Login / Forgot Password / Auth pages

   Color only as much as possible.
   Layout structure remains based on existing site/admin shared classes.
   ========================================================= */


/* =========================================================
   BASE THEME SCOPE
   ========================================================= */

body.student-theme,
body.auth-theme {
    background: var(--theme-bg, #f8fafc);
    color: var(--theme-text, #1f2937);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.student-theme *,
.auth-theme * {
    box-sizing: border-box;
}


/* =========================================================
   SHARED STUDENT PORTAL SHELL
   ========================================================= */

.student-theme .app-shell {
    background: var(--theme-bg, #f8fafc);
}

.student-theme .content-area {
    background: var(--theme-bg, #f8fafc);
}

.student-theme .page-body {
    background: var(--theme-bg, #f8fafc);
}

.student-theme .sidebar {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .topbar {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .page-eyebrow {
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .topbar h1 {
    color: var(--theme-text, #1f2937);
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

.student-theme .brand-wrap {
    color: var(--theme-text, #1f2937);
}

.student-theme .brand-mark,
.student-theme .logo-mark {
    background: var(--theme-primary-soft, #fff7ed);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .brand-title {
    color: var(--theme-text, #1f2937);
}

.student-theme .brand-subtitle {
    color: var(--theme-primary-dark, #ea580c);
}


/* =========================================================
   SIDEBAR NAVIGATION
   ========================================================= */

.student-theme .nav-menu {
    color: var(--theme-text, #1f2937);
}

.student-theme .nav-item {
    color: var(--theme-muted, #6b7280);
}

    .student-theme .nav-item:hover {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
    }

    .student-theme .nav-item.active {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
    }

.student-theme .nav-icon {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary, #f97316);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .nav-item:hover .nav-icon {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .nav-item.active .nav-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

.student-theme .sidebar-note {
    background: var(--theme-primary-soft, #fff7ed);
    border-color: var(--theme-border, #e5e7eb);
}

    .student-theme .sidebar-note strong {
        color: var(--theme-primary-dark, #ea580c);
    }

    .student-theme .sidebar-note span {
        color: var(--theme-muted, #6b7280);
    }


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.student-theme .mobile-menu {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    color: var(--theme-primary-dark, #ea580c);
}

    .student-theme .mobile-menu:hover {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
    }


/* =========================================================
   TOPBAR ACCOUNT CHIP
   ========================================================= */

.student-theme .account-menu-wrap {
    position: relative;
}

.student-theme .account-menu-trigger.student-chip {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    color: var(--theme-text, #1f2937);
}

    .student-theme .account-menu-trigger.student-chip:hover {
        background: var(--theme-primary-soft, #fff7ed);
        border-color: color-mix( in srgb, var(--theme-primary, #f97316) 35%, var(--theme-border, #e5e7eb) );
    }

.student-theme .account-menu-trigger .avatar {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .account-menu-trigger:hover .avatar {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
}

.student-theme .student-chip-text strong {
    color: var(--theme-text, #1f2937);
}

.student-theme .student-chip-text span {
    color: var(--theme-muted, #6b7280);
}

.student-theme .account-menu-chevron {
    color: var(--theme-primary-dark, #ea580c);
}


/* =========================================================
   ACCOUNT DROPDOWN
   ========================================================= */

.student-theme .account-menu {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
}

.student-theme .account-menu-header {
    background: radial-gradient( circle at top right, color-mix(in srgb, var(--theme-primary, #f97316) 14%, transparent), transparent 38% ), var(--theme-primary-soft, #fff7ed);
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 32%, var(--theme-border, #e5e7eb) );
}

.student-theme .account-menu-avatar {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
}

.student-theme .account-menu-header strong {
    color: var(--theme-text, #1f2937);
}

.student-theme .account-menu-header span {
    color: var(--theme-muted, #6b7280);
}

.student-theme .account-menu a,
.student-theme .account-menu form button {
    color: var(--theme-text, #1f2937);
}

    .student-theme .account-menu a:hover,
    .student-theme .account-menu form button:hover {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
    }

    .student-theme .account-menu a i,
    .student-theme .account-menu form button i {
        color: var(--theme-primary-dark, #ea580c);
    }

    .student-theme .account-menu a:hover i,
    .student-theme .account-menu form button:hover i {
        color: var(--theme-primary-dark, #ea580c);
    }


/* =========================================================
   COMMON CARDS / PANELS
   ========================================================= */

.student-theme .panel-card,
.student-theme .hero-card,
.student-theme .kpi-card,
.student-theme .profile-card,
.student-theme .info-card,
.student-theme .form-card,
.student-theme .table-card,
.student-theme .content-card,
.student-theme .summary-card {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

    .student-theme .panel-header h1,
    .student-theme .panel-header h2,
    .student-theme .panel-header h3,
    .student-theme .hero-card h1,
    .student-theme .hero-card h2,
    .student-theme .hero-card h3,
    .student-theme .kpi-card strong,
    .student-theme .profile-card strong,
    .student-theme .info-card strong {
        color: var(--theme-text, #1f2937);
    }

    .student-theme .panel-header p,
    .student-theme .hero-card p,
    .student-theme .kpi-card span,
    .student-theme .profile-card span,
    .student-theme .info-card span,
    .student-theme .muted,
    .student-theme .text-muted {
        color: var(--theme-muted, #6b7280);
    }

.student-theme .page-eyebrow.light {
    color: var(--theme-primary-text, #ffffff);
}


/* =========================================================
   HERO / DASHBOARD
   ========================================================= */

.student-theme .hero-card {
    background: radial-gradient( circle at top right, color-mix(in srgb, var(--theme-primary, #f97316) 20%, transparent), transparent 38% ), linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
}

    .student-theme .hero-card h1,
    .student-theme .hero-card h2,
    .student-theme .hero-card h3,
    .student-theme .hero-card p,
    .student-theme .hero-card span {
        color: var(--theme-primary-text, #ffffff);
    }

.student-theme .hero-badge {
    background: color-mix(in srgb, var(--theme-surface, #ffffff) 20%, transparent);
    color: var(--theme-primary-text, #ffffff);
    border-color: color-mix(in srgb, var(--theme-surface, #ffffff) 32%, transparent);
}

.student-theme .kpi-card:hover {
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 35%, var(--theme-border, #e5e7eb) );
}

.student-theme .kpi-icon,
.student-theme .metric-icon {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .kpi-card:hover .kpi-icon,
.student-theme .metric-card:hover .metric-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
}


/* =========================================================
   TABLES
   ========================================================= */

.student-theme .data-table,
.student-theme table {
    color: var(--theme-text, #1f2937);
}

    .student-theme .data-table thead th {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
        border-color: var(--theme-border, #e5e7eb);
    }

    .student-theme .data-table tbody td {
        border-color: var(--theme-border, #e5e7eb);
        color: var(--theme-text, #1f2937);
    }

    .student-theme .data-table tbody tr:hover {
        background-color: var(--theme-primary-soft, #fff7ed);
    }

        .student-theme .data-table tbody tr:hover td {
            background-color: transparent;
        }

            .student-theme .data-table tbody tr:hover td strong {
                color: var(--theme-primary-dark, #ea580c);
            }

            .student-theme .data-table tbody tr:hover td span {
                color: var(--theme-muted, #6b7280);
            }


/* =========================================================
   FORMS
   ========================================================= */

.student-theme label,
.auth-theme label {
    color: var(--theme-text, #1f2937);
}

.student-theme input,
.student-theme select,
.student-theme textarea,
.auth-theme input,
.auth-theme select,
.auth-theme textarea {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    color: var(--theme-text, #1f2937);
}

    .student-theme input:focus,
    .student-theme select:focus,
    .student-theme textarea:focus,
    .auth-theme input:focus,
    .auth-theme select:focus,
    .auth-theme textarea:focus {
        border-color: var(--theme-primary, #f97316);
        box-shadow: 0 0 0 4px var(--theme-primary-soft, #fff7ed);
        outline: none;
    }

    .student-theme input::placeholder,
    .student-theme textarea::placeholder,
    .auth-theme input::placeholder,
    .auth-theme textarea::placeholder {
        color: color-mix(in srgb, var(--theme-muted, #6b7280) 70%, white);
    }

    .student-theme input[type="checkbox"],
    .student-theme input[type="radio"],
    .auth-theme input[type="checkbox"],
    .auth-theme input[type="radio"] {
        accent-color: var(--theme-primary, #f97316);
    }

.student-theme .field-error,
.auth-theme .field-error {
    color: #dc2626;
}

.student-theme .validation-box,
.auth-theme .validation-box {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.student-theme .success-box,
.auth-theme .success-box {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.student-theme .btn.btn-primary,
.student-theme .btn-primary,
.student-theme button.btn-primary,
.student-theme .primary,
.auth-theme .btn.btn-primary,
.auth-theme .btn-primary,
.auth-theme button.btn-primary {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
    border-color: transparent;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

    .student-theme .btn.btn-primary:hover,
    .student-theme .btn-primary:hover,
    .student-theme button.btn-primary:hover,
    .student-theme .primary:hover,
    .auth-theme .btn.btn-primary:hover,
    .auth-theme .btn-primary:hover,
    .auth-theme button.btn-primary:hover {
        background: linear-gradient( 135deg, var(--theme-primary-dark, #ea580c), var(--theme-primary, #f97316) );
        color: var(--theme-primary-text, #ffffff);
    }

.student-theme .btn.btn-ghost,
.student-theme .btn-ghost,
.auth-theme .btn.btn-ghost,
.auth-theme .btn-ghost {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}

    .student-theme .btn.btn-ghost:hover,
    .student-theme .btn-ghost:hover,
    .auth-theme .btn.btn-ghost:hover,
    .auth-theme .btn-ghost:hover {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
        border-color: color-mix( in srgb, var(--theme-primary, #f97316) 35%, var(--theme-border, #e5e7eb) );
    }


/* =========================================================
   STATUS BADGES / PILLS
   ========================================================= */

.student-theme .badge,
.student-theme .status-badge,
.student-theme .pill,
.student-theme .tag {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}


/* =========================================================
   LOGIN / AUTH PAGE
   ========================================================= */

.auth-theme .login-page-simple {
    min-height: 100vh;
    background: radial-gradient( circle at top left, color-mix(in srgb, var(--theme-primary, #f97316) 13%, transparent), transparent 34% ), radial-gradient( circle at bottom right, color-mix(in srgb, var(--theme-primary, #f97316) 12%, transparent), transparent 38% ), var(--theme-bg, #f8fafc);
}

.auth-theme .login-card-simple {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

.auth-theme .login-brand-simple {
    background: var(--theme-primary-soft, #fff7ed);
    border-color: var(--theme-border, #e5e7eb);
}

.auth-theme .login-heading-simple h2 {
    color: var(--theme-text, #1f2937);
}

.auth-theme .login-heading-simple p {
    color: var(--theme-muted, #6b7280);
}

.auth-theme .login-form-simple {
    color: var(--theme-text, #1f2937);
}

.auth-theme .form-group-simple label {
    color: var(--theme-text, #1f2937);
}

.auth-theme .form-group-simple input {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    color: var(--theme-text, #1f2937);
}

    .auth-theme .form-group-simple input:focus {
        border-color: var(--theme-primary, #f97316);
        box-shadow: 0 0 0 4px var(--theme-primary-soft, #fff7ed);
    }

.auth-theme .password-wrap-simple {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
}

    .auth-theme .password-wrap-simple:focus-within {
        border-color: var(--theme-primary, #f97316);
        box-shadow: 0 0 0 4px var(--theme-primary-soft, #fff7ed);
    }

    .auth-theme .password-wrap-simple input {
        border-color: transparent;
        box-shadow: none;
    }

        .auth-theme .password-wrap-simple input:focus {
            box-shadow: none;
        }

.auth-theme .password-toggle-simple {
    color: var(--theme-primary-dark, #ea580c);
}

    .auth-theme .password-toggle-simple:hover {
        background: var(--theme-primary-soft, #fff7ed);
        color: var(--theme-primary-dark, #ea580c);
    }

    .auth-theme .password-toggle-simple svg {
        color: currentColor;
    }

    .auth-theme .password-toggle-simple .eye-closed {
        display: none;
    }

    .auth-theme .password-toggle-simple.showing .eye-open {
        display: none;
    }

    .auth-theme .password-toggle-simple.showing .eye-closed {
        display: block;
    }

.auth-theme .remember-simple {
    color: var(--theme-muted, #6b7280);
}

    .auth-theme .remember-simple span {
        color: var(--theme-muted, #6b7280);
    }

    .auth-theme .remember-simple input {
        accent-color: var(--theme-primary, #f97316);
    }

.auth-theme .btn-login-simple {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
    border-color: transparent;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

    .auth-theme .btn-login-simple:hover {
        background: linear-gradient( 135deg, var(--theme-primary-dark, #ea580c), var(--theme-primary, #f97316) );
        color: var(--theme-primary-text, #ffffff);
    }

    .auth-theme .btn-login-simple.is-loading {
        opacity: 0.86;
    }

.auth-theme .btn-loader {
    border-color: color-mix( in srgb, var(--theme-primary-text, #ffffff) 35%, transparent );
    border-top-color: var(--theme-primary-text, #ffffff);
}

.auth-theme .login-extra-link a {
    color: var(--theme-primary-dark, #ea580c);
}

    .auth-theme .login-extra-link a:hover {
        color: var(--theme-primary, #f97316);
    }

.auth-theme .powered-by-wrap span {
    color: var(--theme-muted, #6b7280);
}

.auth-theme .powered-by-link {
    color: var(--theme-primary-dark, #ea580c);
}


/* =========================================================
   LOGIN LOADING PANEL
   ========================================================= */

.auth-theme .login-loading-panel {
    background: color-mix( in srgb, var(--theme-text, #0f172a) 52%, transparent );
}

.auth-theme .loading-card {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

.auth-theme .loading-logo-wrap {
    background: var(--theme-primary-soft, #fff7ed);
    border-color: var(--theme-border, #e5e7eb);
}

.auth-theme .loading-spinner {
    border-color: var(--theme-primary-soft, #fff7ed);
    border-top-color: var(--theme-primary, #f97316);
}

.auth-theme .loading-card h3 {
    color: var(--theme-text, #1f2937);
}

.auth-theme .loading-card p {
    color: var(--theme-muted, #6b7280);
}


/* =========================================================
   SESSION TIMEOUT OVERLAY
   ========================================================= */

.student-theme .session-timeout-overlay,
.auth-theme .session-timeout-overlay {
    background: color-mix( in srgb, var(--theme-text, #0f172a) 52%, transparent );
}

.student-theme .session-timeout-card,
.auth-theme .session-timeout-card {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

.student-theme .session-timeout-icon-wrap,
.auth-theme .session-timeout-icon-wrap {
    background: var(--theme-primary-soft, #fff7ed);
}

.student-theme .session-timeout-icon,
.auth-theme .session-timeout-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
}

.student-theme .session-timeout-pulse,
.auth-theme .session-timeout-pulse {
    background: color-mix( in srgb, var(--theme-primary, #f97316) 22%, transparent );
}

.student-theme .session-timeout-card > span,
.auth-theme .session-timeout-card > span {
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .session-timeout-card h3,
.auth-theme .session-timeout-card h3 {
    color: var(--theme-text, #1f2937);
}

.student-theme .session-timeout-card p,
.auth-theme .session-timeout-card p {
    color: var(--theme-muted, #6b7280);
}

.student-theme .session-timeout-countdown,
.auth-theme .session-timeout-countdown {
    background: var(--theme-primary-soft, #fff7ed);
    border-color: var(--theme-border, #e5e7eb);
}

    .student-theme .session-timeout-countdown strong,
    .auth-theme .session-timeout-countdown strong {
        color: var(--theme-primary-dark, #ea580c);
    }

    .student-theme .session-timeout-countdown span,
    .auth-theme .session-timeout-countdown span {
        color: var(--theme-muted, #6b7280);
    }

.student-theme .session-timeout-btn.primary,
.auth-theme .session-timeout-btn.primary {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    color: var(--theme-primary-text, #ffffff);
    border-color: transparent;
}

.student-theme .session-timeout-btn.ghost,
.auth-theme .session-timeout-btn.ghost {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}

    .student-theme .session-timeout-btn.ghost:hover,
    .auth-theme .session-timeout-btn.ghost:hover {
        background: var(--theme-primary-soft, #fff7ed);
    }


/* =========================================================
   SECURE LOGOUT OVERLAY
   ========================================================= */

.student-theme .secure-logout-overlay,
.auth-theme .secure-logout-overlay {
    background: color-mix( in srgb, var(--theme-text, #0f172a) 52%, transparent );
}

.student-theme .secure-logout-card,
.auth-theme .secure-logout-card {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-border, #e5e7eb);
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10));
}

.student-theme .secure-logout-icon-wrap,
.auth-theme .secure-logout-icon-wrap {
    background: var(--theme-primary-soft, #fff7ed);
}

.student-theme .secure-logout-spinner,
.auth-theme .secure-logout-spinner {
    border-color: var(--theme-primary-soft, #fff7ed);
    border-top-color: var(--theme-primary, #f97316);
}

/*.student-theme .secure-logout-icon,
.auth-theme .secure-logout-icon {
    color: var(--theme-primary-dark, #ea580c);
}*/

.student-theme .secure-logout-card > span,
.auth-theme .secure-logout-card > span {
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .secure-logout-card h3,
.auth-theme .secure-logout-card h3 {
    color: var(--theme-text, #1f2937);
}

.student-theme .secure-logout-card p,
.auth-theme .secure-logout-card p,
.student-theme .secure-logout-status,
.auth-theme .secure-logout-status {
    color: var(--theme-muted, #6b7280);
}

.student-theme .secure-logout-progress,
.auth-theme .secure-logout-progress {
    background: var(--theme-primary-soft, #fff7ed);
}

    .student-theme .secure-logout-progress div,
    .student-theme #secureLogoutProgressBar,
    .auth-theme .secure-logout-progress div,
    .auth-theme #secureLogoutProgressBar {
        background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) );
    }


/* =========================================================
   STUDENT SPECIFIC PAGE COMMONS
   ========================================================= */

.student-theme .student-photo,
.student-theme .student-avatar,
.student-theme .profile-avatar,
.student-theme .student-initial,
.student-theme .initials-badge {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .verified-badge,
.student-theme .profile-verified {
    background: var(--theme-primary-soft, #fff7ed);
    color: var(--theme-primary-dark, #ea580c);
    border-color: var(--theme-border, #e5e7eb);
}

.student-theme .amount,
.student-theme .money,
.student-theme .balance-amount,
.student-theme .total-amount {
    color: var(--theme-primary-dark, #ea580c);
}

.student-theme .link,
.student-theme a:not(.nav-item):not(.btn):not(.student-chip):not(.account-menu-trigger) {
    color: var(--theme-primary-dark, #ea580c);
}

    .student-theme a:not(.nav-item):not(.btn):not(.student-chip):not(.account-menu-trigger):hover {
        color: var(--theme-primary, #f97316);
    }


/* =========================================================
   PRINT SAFE
   ========================================================= */

@media print {
    body.student-theme,
    body.auth-theme {
        background: #ffffff !important;
        color: #111827 !important;
    }

    .student-theme .sidebar,
    .student-theme .topbar,
    .student-theme .account-menu,
    .student-theme .session-timeout-overlay,
    .student-theme .secure-logout-overlay,
    .auth-theme .session-timeout-overlay,
    .auth-theme .secure-logout-overlay {
        display: none !important;
    }

    .student-theme .content-area,
    .student-theme .page-body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .student-theme .panel-card,
    .student-theme .hero-card,
    .student-theme .kpi-card,
    .student-theme .profile-card,
    .student-theme .info-card {
        box-shadow: none !important;
        border-color: #e5e7eb !important;
    }
}


/* =========================================================
   RESPONSIVE HELPERS
   ========================================================= */

@media (max-width: 900px) {
    .student-theme .account-menu {
        right: 0;
    }
}

@media (max-width: 640px) {
    .auth-theme .login-page-simple {
        padding: 18px;
    }

    .auth-theme .login-card-simple {
        width: 100%;
    }
}


/*LOGIN PAGE BACKGROUND - CLEAN*/
.auth-theme .login-page-simple {
    min-height: 100vh;
    background: var(--theme-bg, #f8fafc) !important;
}

/*LOGIN LOGO AREA - CLEAN*/
.auth-theme .login-brand-simple {
    background: transparent !important;
    border-color: transparent !important;
}



/* =========================================================
   STUDENT PORTAL SIDEBAR - DARK ADMIN-LIKE STYLE
   Matches Admin sidebar look, but follows selected theme accent
   ========================================================= */

body.student-theme .sidebar {
    background: #111827 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 18px 0 45px rgba(15, 23, 42, 0.18) !important;
}

/* Brand area */
body.student-theme .brand-wrap {
    background: transparent !important;
}

body.student-theme .brand-title {
    color: #ffffff !important;
}

body.student-theme .brand-subtitle {
    color: #cbd5e1 !important;
}

body.student-theme .brand-mark,
body.student-theme .logo-mark {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 16px 34px color-mix( in srgb, var(--theme-primary, #f97316) 26%, transparent ) !important;
}

/* Menu text */
body.student-theme .nav-item {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-color: transparent !important;
}

    body.student-theme .nav-item i {
        color: var(--theme-primary, #f97316) !important;
    }

/* Icon box */
body.student-theme .nav-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--theme-primary, #f97316) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover */
body.student-theme .nav-item:hover {
    background: color-mix( in srgb, var(--theme-primary, #f97316) 18%, transparent ) !important;
    color: #ffffff !important;
}

    body.student-theme .nav-item:hover .nav-icon {
        background: color-mix( in srgb, var(--theme-primary, #f97316) 24%, transparent ) !important;
        color: var(--theme-primary, #f97316) !important;
    }

/* Active menu */
body.student-theme .nav-item.active {
    background: color-mix( in srgb, var(--theme-primary, #f97316) 22%, transparent ) !important;
    color: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--theme-primary, #f97316) !important;
}

    body.student-theme .nav-item.active .nav-icon {
        background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
        color: var(--theme-primary-text, #ffffff) !important;
        border-color: transparent !important;
        box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
    }

    body.student-theme .nav-item.active i {
        color: var(--theme-primary-text, #ffffff) !important;
    }

/* Sidebar note */
body.student-theme .sidebar-note {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

    body.student-theme .sidebar-note strong {
        color: #ffffff !important;
    }

    body.student-theme .sidebar-note span {
        color: #cbd5e1 !important;
    }

/* Scrollbar */
body.student-theme .sidebar::-webkit-scrollbar {
    width: 6px;
}

body.student-theme .sidebar::-webkit-scrollbar-thumb {
    background: color-mix( in srgb, var(--theme-primary, #f97316) 55%, rgba(255, 255, 255, 0.28) ) !important;
    border-radius: 20px;
}

body.student-theme .sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}



/* =========================================================
   STUDENT DASHBOARD THEME SUPPORT
   Dashboard.cshtml

   Notes:
   - KPI cards are display-only, so no hover effect.
   - Portal module action cards are clickable, so hover remains.
   - Remarks/status pill color stays original from site.css.
   ========================================================= */

/* SVG icons */
body.student-theme .student-dashboard-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

body.student-theme .student-dashboard-kpi-icon svg,
body.student-theme .student-dashboard-action-icon svg,
body.student-theme .student-dashboard-action-card em svg {
    width: 22px;
    height: 22px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    body.student-theme .student-dashboard-kpi-icon svg *,
    body.student-theme .student-dashboard-action-icon svg *,
    body.student-theme .student-dashboard-action-card em svg * {
        fill: none !important;
        stroke: currentColor !important;
    }

/* Hero */
body.student-theme .student-dashboard-hero {
    background: radial-gradient( circle at top right, color-mix(in srgb, var(--theme-primary-text, #ffffff) 18%, transparent), transparent 36% ), linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
}

    body.student-theme .student-dashboard-hero h2,
    body.student-theme .student-dashboard-hero p,
    body.student-theme .student-dashboard-hero .page-eyebrow {
        color: var(--theme-primary-text, #ffffff) !important;
    }

body.student-theme .student-dashboard-status-card {
    background: color-mix(in srgb, var(--theme-surface, #ffffff) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-surface, #ffffff) 30%, transparent) !important;
}

    body.student-theme .student-dashboard-status-card span,
    body.student-theme .student-dashboard-status-card strong,
    body.student-theme .student-dashboard-status-card small {
        color: var(--theme-primary-text, #ffffff) !important;
    }

/* Student photo */
body.student-theme .student-dashboard-photo {
    background: var(--theme-surface, #ffffff) !important;
    border-color: color-mix(in srgb, var(--theme-surface, #ffffff) 40%, transparent) !important;
}

body.student-theme .student-dashboard-photo-initials {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
}

/* Snapshot */
body.student-theme .student-dashboard-snapshot {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

    body.student-theme .student-dashboard-snapshot span {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    body.student-theme .student-dashboard-snapshot strong {
        color: var(--theme-text, #1f2937) !important;
    }

    body.student-theme .student-dashboard-snapshot em {
        background: var(--theme-primary-soft, #fff7ed) !important;
        color: var(--theme-primary-dark, #ea580c) !important;
        border-color: var(--theme-border, #e5e7eb) !important;
    }

/* KPI cards - no hover because these are not clickable */
body.student-theme .student-dashboard-kpi-card {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
    transform: none !important;
    cursor: default !important;
}

    body.student-theme .student-dashboard-kpi-card:hover {
        background: var(--theme-surface, #ffffff) !important;
        border-color: var(--theme-border, #e5e7eb) !important;
        box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
        transform: none !important;
    }

body.student-theme .student-dashboard-kpi-icon {
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-dashboard-kpi-card:hover .student-dashboard-kpi-icon {
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.student-theme .student-dashboard-kpi-card span,
body.student-theme .student-dashboard-kpi-card small {
    color: var(--theme-muted, #6b7280) !important;
}

body.student-theme .student-dashboard-kpi-card strong {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-dashboard-kpi-card.warning strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-dashboard-kpi-card.success strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Portal modules */
body.student-theme .student-dashboard-module-section {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-dashboard-section-title span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-dashboard-section-title strong {
    color: var(--theme-text, #1f2937) !important;
}

/* Clickable action cards - hover remains */
body.student-theme .student-dashboard-action-card {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    color: var(--theme-text, #1f2937) !important;
}

    body.student-theme .student-dashboard-action-card:hover {
        background: var(--theme-primary-soft, #fff7ed) !important;
        border-color: color-mix( in srgb, var(--theme-primary, #f97316) 35%, var(--theme-border, #e5e7eb) ) !important;
    }

body.student-theme .student-dashboard-action-icon {
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-dashboard-action-card:hover .student-dashboard-action-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
}

body.student-theme .student-dashboard-action-card strong {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-dashboard-action-card small {
    color: var(--theme-muted, #6b7280) !important;
}

body.student-theme .student-dashboard-action-card em {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Record cards */
body.student-theme .student-dashboard-record-card {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

    body.student-theme .student-dashboard-record-card .panel-header h3 {
        color: var(--theme-text, #1f2937) !important;
    }

    body.student-theme .student-dashboard-record-card .panel-header p {
        color: var(--theme-muted, #6b7280) !important;
    }

    body.student-theme .student-dashboard-record-card .panel-header a {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

        body.student-theme .student-dashboard-record-card .panel-header a:hover {
            color: var(--theme-primary, #f97316) !important;
        }

    /* Tables */
    body.student-theme .student-dashboard-record-card .data-table thead th {
        background: var(--theme-primary-soft, #fff7ed) !important;
        color: var(--theme-primary-dark, #ea580c) !important;
        border-color: var(--theme-border, #e5e7eb) !important;
    }

    body.student-theme .student-dashboard-record-card .data-table tbody td {
        border-color: var(--theme-border, #e5e7eb) !important;
    }

    body.student-theme .student-dashboard-record-card .data-table tbody tr:hover {
        background-color: var(--theme-primary-soft, #fff7ed) !important;
    }

        body.student-theme .student-dashboard-record-card .data-table tbody tr:hover td {
            background-color: transparent !important;
        }

            body.student-theme .student-dashboard-record-card .data-table tbody tr:hover td strong {
                color: var(--theme-primary-dark, #ea580c) !important;
            }

            body.student-theme .student-dashboard-record-card .data-table tbody tr:hover td span:not(.status-pill) {
                color: var(--theme-muted, #6b7280) !important;
            }

/* Empty states */
body.student-theme .empty-mini {
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

/*
   IMPORTANT:
   Do not theme .status-pill.success here.
   Remarks color should stay original from site.css.
*/


/* =========================================================
   STUDENT MY ASSESSMENT LABEL THEME SUPPORT
   MyAssessment.cshtml

   Only labels / section titles follow theme.
   Amounts, status pills, payment status colors, tables, and other
   existing colors remain as-is.
   ========================================================= */

/* Main hero small label: Student Assessment */
body.student-theme .view-assessment-page .view-assessment-title > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Hero title name / My Assessment # */
body.student-theme .view-assessment-page .view-assessment-title h3 {
    color: var(--theme-text, #1f2937) !important;
}

/* Hero paragraph */
body.student-theme .view-assessment-page .view-assessment-title p {
    color: var(--theme-muted, #6b7280) !important;
}

/* Status labels: Assessment Status, Payment Status */
body.student-theme .view-assessment-page .view-assessment-status > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Keep status value color as-is as much as possible */
body.student-theme .view-assessment-page .view-assessment-status > strong {
    color: inherit;
}

/* Student Actions label */
body.student-theme .view-assessment-page .view-assessment-actions-card > div > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Student Actions title */
body.student-theme .view-assessment-page .view-assessment-actions-card > div > strong {
    color: var(--theme-text, #1f2937) !important;
}

/* Student Actions description */
body.student-theme .view-assessment-page .view-assessment-actions-card > div > p {
    color: var(--theme-muted, #6b7280) !important;
}

/* Fieldset section labels:
   Assessment Status & History
   Student Assessment Summary
   Fee Breakdown
   Payment Schedule
   Student Credit / Excess
   Student Credit Applied
*/
body.student-theme .view-assessment-page .admin-fieldset .fieldset-title > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Assessment status/history inner labels:
   Status, Assessment ID, Previous Assessment, Superseded By, etc.
*/
body.student-theme .view-assessment-page .assessment-status-panel > div > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Student summary label: Student */
body.student-theme .view-assessment-page .assessment-student-main > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Student name */
body.student-theme .view-assessment-page .assessment-student-main > strong {
    color: var(--theme-text, #1f2937) !important;
}

/* Student number */
body.student-theme .view-assessment-page .assessment-student-main > small {
    color: var(--theme-muted, #6b7280) !important;
}

/* Summary grid labels:
   School Year, Level, Payment Mode, Scholarship, Assessed Date, Assessed By
*/
body.student-theme .view-assessment-page .assessment-info-grid > div > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Summary grid values */
body.student-theme .view-assessment-page .assessment-info-grid > div > strong {
    color: var(--theme-text, #1f2937) !important;
}

/* Amount card labels:
   Gross Amount, Total Discount, Net Assessment, Total Paid, Balance, etc.
*/
body.student-theme .view-assessment-page .view-assessment-amount-card > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Amount card descriptions only */
body.student-theme .view-assessment-page .view-assessment-amount-card > small {
    color: var(--theme-muted, #6b7280) !important;
}

/* Payment Progress label */
body.student-theme .view-assessment-page .view-assessment-progress-header span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

/* Payment Progress text */
body.student-theme .view-assessment-page .view-assessment-progress-header strong {
    color: var(--theme-text, #1f2937) !important;
}

/* Payment percent badge */
body.student-theme .view-assessment-page .view-assessment-progress-header em {
    color: var(--theme-primary-dark, #ea580c) !important;
    background: var(--theme-primary-soft, #fff7ed) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

/* Payment progress bar only */
body.student-theme .view-assessment-page .view-assessment-progress-track {
    background: var(--theme-primary-soft, #fff7ed) !important;
}

    body.student-theme .view-assessment-page .view-assessment-progress-track > div {
        background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    }

/* Important:
   Do NOT override these so their original colors stay:
   - .status-pill
   - .status-pill.success
   - .status-pill.warning
   - .status-pill.neutral
   - .assessment-status-text.success
   - .assessment-status-text.danger
   - .assessment-status-text.neutral
   - .view-assessment-status.success
   - .view-assessment-status.warning
   - .view-assessment-status.danger
   - .view-assessment-status.neutral
*/





















/* =========================================================
   STUDENT PROFILE THEME SUPPORT
   Profile.cshtml

   Goal:
   - Labels / section titles follow selected theme.
   - Dark/gradient areas use white text for readability.
   - Status pills, remarks, and original table status colors remain as-is.
   ========================================================= */


/* =========================================================
   1. PROFILE HERO
   Student Profile / Name / Student No / Completion
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-view-hero {
    background: radial-gradient( circle at top right, color-mix(in srgb, var(--theme-primary, #f97316) 10%, transparent), transparent 38% ), color-mix( in srgb, var(--theme-primary-soft, #fff7ed) 45%, var(--theme-surface, #ffffff) ) !important;
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 34%, var(--theme-border, #e5e7eb) ) !important;
}

body.student-theme .student-profile-view-page .student-profile-view-main > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .student-profile-view-main > h3 {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-profile-view-page .student-profile-view-main > p {
    color: var(--theme-muted, #6b7280) !important;
}

body.student-theme .student-profile-view-page .student-profile-view-photo {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

body.student-theme .student-profile-view-page .student-profile-view-initials {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
}

/* Profile Completion card */
body.student-theme .student-profile-view-page .student-profile-view-status {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

    body.student-theme .student-profile-view-page .student-profile-view-status > span {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    body.student-theme .student-profile-view-page .student-profile-view-status > strong {
        color: var(--theme-text, #1f2937) !important;
    }

    body.student-theme .student-profile-view-page .student-profile-view-status > small {
        color: var(--theme-muted, #6b7280) !important;
    }


/* =========================================================
   2. HERO BADGES
   Keep badge style readable, but theme the icon/accent.
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-view-badge {
    border-color: var(--theme-border, #e5e7eb) !important;
}

    body.student-theme .student-profile-view-page .student-profile-view-badge i {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    /* Do not force status badge text colors too much */
    body.student-theme .student-profile-view-page .student-profile-view-badge.success,
    body.student-theme .student-profile-view-page .student-profile-view-badge.neutral {
        color: inherit;
    }


/* =========================================================
   3. CONFIDENTIAL FORM CARD
   Confidential Form / Student Personal Information Form
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-confidential-card {
    background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-primary, #f97316) 9%, transparent), color-mix(in srgb, var(--theme-primary-soft, #fff7ed) 75%, white) ) !important;
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 30%, var(--theme-border, #e5e7eb) ) !important;
}

body.student-theme .student-profile-view-page .student-profile-confidential-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

    body.student-theme .student-profile-view-page .student-profile-confidential-icon i {
        color: var(--theme-primary-text, #ffffff) !important;
    }

body.student-theme .student-profile-view-page .student-profile-confidential-left span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .student-profile-confidential-left h3 {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-profile-view-page .student-profile-confidential-left p {
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   4. PROFILE COMPLETION SCORE
   Student Record Health / Ring / Progress
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-score-card {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

body.student-theme .student-profile-view-page .profile-score-copy > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .profile-score-copy > h3 {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-profile-view-page .profile-score-copy > p {
    color: var(--theme-muted, #6b7280) !important;
}

body.student-theme .student-profile-view-page .profile-score-ring {
    background: conic-gradient( var(--theme-primary, #f97316) calc(var(--score, 0) * 1%), var(--theme-primary-soft, #fff7ed) 0 ) !important;
}

    body.student-theme .student-profile-view-page .profile-score-ring strong {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    body.student-theme .student-profile-view-page .profile-score-ring span {
        color: var(--theme-muted, #6b7280) !important;
    }

body.student-theme .student-profile-view-page .profile-score-progress {
    background: var(--theme-primary-soft, #fff7ed) !important;
}

    body.student-theme .student-profile-view-page .profile-score-progress > div {
        background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    }

body.student-theme .student-profile-view-page .profile-score-meta strong {
    color: var(--theme-text, #1f2937) !important;
}

body.student-theme .student-profile-view-page .profile-score-meta span {
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   5. FIELDSET TITLES
   Basic Information
   Enrollment & Contact Information
   Family Information
   Educational Background
   ========================================================= */

body.student-theme .student-profile-view-page .admin-fieldset {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

    body.student-theme .student-profile-view-page .admin-fieldset .fieldset-title > span {
        color: var(--theme-primary-dark, #ea580c) !important;
    }


/* =========================================================
   6. READONLY ITEMS
   Student No. / LRN / Gender / Birthdate / etc.
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-readonly-item > span {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .student-profile-readonly-item > strong {
    color: var(--theme-text, #1f2937) !important;
}


/* =========================================================
   7. SUB CARDS
   School Information / Contact Information
   ========================================================= */

body.student-theme .student-profile-view-page .info-sub-card {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-profile-view-page .sub-card-header strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .sub-card-header p {
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   8. CONTACT REMARKS CARD
   Keep label themed, text readable.
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-contact-note {
    background: var(--theme-primary-soft, #fff7ed) !important;
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 28%, var(--theme-border, #e5e7eb) ) !important;
}

    body.student-theme .student-profile-view-page .student-profile-contact-note > strong {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    body.student-theme .student-profile-view-page .student-profile-contact-note > span {
        color: var(--theme-muted, #6b7280) !important;
    }


/* =========================================================
   9. SECTION HEADERS
   Family Members / Guardian Details
   Previous School Information
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-section-header strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .student-profile-section-header p {
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   10. TABLES
   Keep status pills as-is.
   ========================================================= */

body.student-theme .student-profile-view-page .family-table-wrap .data-table thead th {
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-profile-view-page .family-table-wrap .data-table tbody td {
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-profile-view-page .family-table-wrap .data-table tbody tr:hover {
    background: var(--theme-primary-soft, #fff7ed) !important;
}

    body.student-theme .student-profile-view-page .family-table-wrap .data-table tbody tr:hover td {
        background: transparent !important;
    }

        body.student-theme .student-profile-view-page .family-table-wrap .data-table tbody tr:hover td strong {
            color: var(--theme-primary-dark, #ea580c) !important;
        }

        body.student-theme .student-profile-view-page .family-table-wrap .data-table tbody tr:hover td span:not(.status-pill) {
            color: var(--theme-muted, #6b7280) !important;
        }


/* =========================================================
   11. FOOTER NOTE
   Need to update your profile?
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-note {
    background: color-mix( in srgb, var(--theme-primary-soft, #fff7ed) 60%, var(--theme-surface, #ffffff) ) !important;
    border-color: color-mix( in srgb, var(--theme-primary, #f97316) 28%, var(--theme-border, #e5e7eb) ) !important;
}

    body.student-theme .student-profile-view-page .student-profile-note strong {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    body.student-theme .student-profile-view-page .student-profile-note span {
        color: var(--theme-muted, #6b7280) !important;
    }


/* =========================================================
   12. EMPTY PROFILE
   ========================================================= */

body.student-theme .student-profile-view-page .student-profile-empty {
    background: var(--theme-primary-soft, #fff7ed) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
}

body.student-theme .student-profile-view-page .student-profile-empty-icon {
    background: linear-gradient( 135deg, var(--theme-primary, #f97316), var(--theme-primary-dark, #ea580c) ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
}

body.student-theme .student-profile-view-page .student-profile-empty strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}

body.student-theme .student-profile-view-page .student-profile-empty span {
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   13. DARK / GRADIENT AUTO-WHITE FIX
   For future dark/gradient profile cards.
   ========================================================= */

body.student-theme .student-profile-view-page .theme-dark,
body.student-theme .student-profile-view-page .theme-gradient {
    color: var(--theme-primary-text, #ffffff) !important;
}

    body.student-theme .student-profile-view-page .theme-dark span,
    body.student-theme .student-profile-view-page .theme-dark strong,
    body.student-theme .student-profile-view-page .theme-dark small,
    body.student-theme .student-profile-view-page .theme-dark p,
    body.student-theme .student-profile-view-page .theme-dark h2,
    body.student-theme .student-profile-view-page .theme-dark h3,
    body.student-theme .student-profile-view-page .theme-gradient span,
    body.student-theme .student-profile-view-page .theme-gradient strong,
    body.student-theme .student-profile-view-page .theme-gradient small,
    body.student-theme .student-profile-view-page .theme-gradient p,
    body.student-theme .student-profile-view-page .theme-gradient h2,
    body.student-theme .student-profile-view-page .theme-gradient h3 {
        color: var(--theme-primary-text, #ffffff) !important;
    }


/* =========================================================
   14. DO NOT TOUCH ORIGINAL STATUS COLORS
   Keep these from site.css.
   ========================================================= */

/*
   Do not theme these:
   - .status-pill
   - .status-pill.success
   - .status-pill.neutral
   - .status-pill.warning
   - .student-profile-view-badge.success
   - .student-profile-view-badge.neutral
*/


/* =========================================================
   STUDENT PROFILE BADGE READABILITY FIX
   Keeps badges readable on any theme
   ========================================================= */

/* Base badge readable */
body.student-theme .student-profile-view-page .student-profile-view-badge {
    background: var(--theme-surface, #ffffff) !important;
    border-color: var(--theme-border, #e5e7eb) !important;
    color: var(--theme-text, #1f2937) !important;
}

    /* Icon follows theme */
    body.student-theme .student-profile-view-page .student-profile-view-badge i {
        color: var(--theme-primary-dark, #ea580c) !important;
    }

    /* Success badge like Enrolled */
    body.student-theme .student-profile-view-page .student-profile-view-badge.success {
        background: #dcfce7 !important;
        border-color: #bbf7d0 !important;
        color: #166534 !important;
    }

        /* Success icon readable */
        body.student-theme .student-profile-view-page .student-profile-view-badge.success i {
            color: #16a34a !important;
        }

    /* Neutral badges like Grade / Section */
    body.student-theme .student-profile-view-page .student-profile-view-badge.neutral {
        background: #ffffff !important;
        border-color: var(--theme-border, #e5e7eb) !important;
        color: var(--theme-text, #1f2937) !important;
    }

        /* Neutral badge icon theme color */
        body.student-theme .student-profile-view-page .student-profile-view-badge.neutral i {
            color: var(--theme-primary-dark, #ea580c) !important;
        }

    /* Make Bootstrap icon actual glyph follow color */
    body.student-theme .student-profile-view-page .student-profile-view-badge i::before {
        color: currentColor !important;
    }




/* =========================================================
   STUDENT DASHBOARD HERO - BLENDED THEME STYLE
   Softer, premium, readable on any selected theme
   ========================================================= */

body.student-theme .student-dashboard-hero {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient( circle at 88% 76%, color-mix(in srgb, var(--theme-primary-text, #ffffff) 14%, transparent), transparent 24% ), radial-gradient( circle at 18% 18%, color-mix(in srgb, var(--theme-primary-text, #ffffff) 12%, transparent), transparent 30% ), linear-gradient( 135deg, var(--theme-primary-dark, #ea580c) 0%, var(--theme-primary, #f97316) 42%, color-mix( in srgb, var(--theme-primary, #f97316) 82%, var(--theme-secondary, #168cf9) ) 100% ) !important;
    color: var(--theme-primary-text, #ffffff) !important;
    border-color: color-mix( in srgb, var(--theme-primary-text, #ffffff) 16%, transparent ) !important;
    box-shadow: var(--theme-shadow, 0 18px 45px rgba(249, 115, 22, 0.10)) !important;
}

    /* Soft overlay para hindi flat ang kulay */
    body.student-theme .student-dashboard-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 90deg, color-mix(in srgb, #000000 8%, transparent), transparent 42%, color-mix(in srgb, #ffffff 8%, transparent) );
        opacity: 0.55;
    }

    /* Decorative soft circle sa right side */
    body.student-theme .student-dashboard-hero::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -90px;
        width: 310px;
        height: 310px;
        border-radius: 999px;
        pointer-events: none;
        border: 1px solid color-mix( in srgb, var(--theme-primary-text, #ffffff) 18%, transparent );
        background: color-mix( in srgb, var(--theme-primary-text, #ffffff) 8%, transparent );
    }

    /* Keep hero contents above overlay */
    body.student-theme .student-dashboard-hero > * {
        position: relative;
        z-index: 1;
    }

    /* Hero text readable */
    body.student-theme .student-dashboard-hero h2,
    body.student-theme .student-dashboard-hero p,
    body.student-theme .student-dashboard-hero .page-eyebrow {
        color: var(--theme-primary-text, #ffffff) !important;
    }

    body.student-theme .student-dashboard-hero .page-eyebrow {
        opacity: 0.92;
    }

    body.student-theme .student-dashboard-hero p {
        opacity: 0.94;
    }

/* Student photo border blends with hero */
body.student-theme .student-dashboard-photo {
    background: color-mix( in srgb, var(--theme-surface, #ffffff) 92%, transparent ) !important;
    border-color: color-mix( in srgb, var(--theme-primary-text, #ffffff) 70%, transparent ) !important;
    box-shadow: 0 18px 38px color-mix(in srgb, #000000 18%, transparent), 0 0 0 4px color-mix(in srgb, var(--theme-primary-text, #ffffff) 18%, transparent) !important;
}

/* Enrollment status glass card */
body.student-theme .student-dashboard-status-card {
    background: color-mix( in srgb, var(--theme-primary-text, #ffffff) 18%, transparent ) !important;
    border-color: color-mix( in srgb, var(--theme-primary-text, #ffffff) 32%, transparent ) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-primary-text, #ffffff) 22%, transparent), 0 18px 34px color-mix(in srgb, #000000 10%, transparent) !important;
    backdrop-filter: blur(10px);
}

    body.student-theme .student-dashboard-status-card span,
    body.student-theme .student-dashboard-status-card strong,
    body.student-theme .student-dashboard-status-card small {
        color: var(--theme-primary-text, #ffffff) !important;
    }

    body.student-theme .student-dashboard-status-card span,
    body.student-theme .student-dashboard-status-card small {
        opacity: 0.92;
    }


/* =========================================================
   STUDENT SIDEBAR SUBMENU - CLEAN VERSION
   Remove left line and side dot
   ========================================================= */

body.student-theme .nav-group {
    position: relative !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

    body.student-theme .nav-group .nav-item {
        margin-block: 4px !important;
    }

        body.student-theme .nav-group .nav-item::before {
            content: none !important;
            display: none !important;
        }



.survey-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--theme-primary);
    border-radius: 999px;
    background: #ffffff;
    color: var(--theme-primary-dark) !important;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .survey-filter i {
        color: inherit !important;
    }

    .survey-filter:hover {
        border-color: var(--theme-primary-dark);
        background: var(--theme-primary-soft);
        color: var(--theme-primary-dark) !important;
        transform: translateY(-1px);
    }

    .survey-filter.active,
    .survey-filter.active:hover,
    .survey-filter.active:focus {
        border-color: var(--theme-primary);
        background: var(--theme-primary);
        color: #ffffff !important;
    }

        .survey-filter.active i,
        .survey-filter.active:hover i,
        .survey-filter.active:focus i {
            color: #ffffff !important;
        }


.survey-action-button {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--theme-primary);
    border-radius: 13px;
    background: var(--theme-primary);
    color: #ffffff !important;
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

    .survey-action-button i {
        color: #ffffff !important;
    }

    .survey-action-button:hover,
    .survey-action-button:focus {
        color: #ffffff !important;
        filter: brightness(0.92);
        transform: translateY(-1px);
    }

        .survey-action-button:hover i,
        .survey-action-button:focus i {
            color: #ffffff !important;
        }


/* ============================================================
   STUDENT PORTAL - MY LIBRARY
   Append this section to the existing student-portal.css.
   ============================================================ */

/* ============================================================
   STUDENT PORTAL - MY LIBRARY
   ============================================================ */

.student-library-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.student-library-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    background: radial-gradient( circle at 92% 0%, color-mix( in srgb, var(--theme-primary) 12%, transparent), transparent 38%), var(--theme-surface);
    box-shadow: var(--theme-shadow);
}


.student-library-eyebrow,
.student-library-panel-header span,
.student-library-account-main span,
.student-library-account-meta span,
.student-library-kpi span,
.student-library-empty-account > div > span {
    display: block;
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.student-library-hero h2 {
    margin: 5px 0 6px;
    color: var(--theme-text);
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -0.025em;
}


.student-library-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.55;
}


.student-library-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}


    .student-library-btn.primary {
        background: var(--theme-primary);
        color: var(--theme-primary-text);
    }


    .student-library-btn.outline {
        border-color: var(--theme-border);
        background: var(--theme-surface);
        color: var(--theme-text);
    }


.student-library-empty-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    background: var(--theme-surface);
}


.student-library-empty-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 25px;
}


.student-library-empty-account h3 {
    margin: 5px 0 6px;
    font-size: 18px;
    font-weight: 800;
}


.student-library-empty-account p {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.55;
}


.student-library-student-summary {
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat( 3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}


    .student-library-student-summary > div {
        padding: 12px 14px;
        border: 1px solid var(--theme-border);
        border-radius: 10px;
        background: var(--theme-bg);
    }


    .student-library-student-summary span,
    .student-library-student-summary strong {
        display: block;
    }


    .student-library-student-summary span {
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 750;
    }


    .student-library-student-summary strong {
        margin-top: 3px;
        color: var(--theme-text);
        font-size: 13px;
        font-weight: 800;
    }


.student-library-account-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
}


.student-library-account-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.student-library-account-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 20px;
}


.student-library-account-main strong,
.student-library-account-main small {
    display: block;
}


.student-library-account-main strong {
    margin-top: 2px;
    color: var(--theme-text);
    font-size: 15px;
    font-weight: 850;
}


.student-library-account-main small {
    margin-top: 3px;
    color: var(--theme-muted);
    font-size: 11px;
}


.student-library-account-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}


    .student-library-account-meta > div {
        min-width: 130px;
    }


    .student-library-account-meta strong {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        font-weight: 800;
    }


.student-library-account-status.active {
    color: #137a4b;
}


.student-library-account-status.restricted {
    color: #aa3d3d;
}


.student-library-kpi-grid {
    display: grid;
    grid-template-columns: repeat( 4, minmax(0, 1fr));
    gap: 12px;
}


.student-library-kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
}


    .student-library-kpi.attention {
        border-color: color-mix( in srgb, #dc2626 35%, var(--theme-border));
        background: color-mix( in srgb, #fef2f2 65%, var(--theme-surface));
    }


.student-library-kpi-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 18px;
}


.student-library-kpi strong,
.student-library-kpi small {
    display: block;
}


.student-library-kpi strong {
    margin-top: 2px;
    color: var(--theme-text);
    font-size: 20px;
    font-weight: 900;
}


.student-library-kpi small {
    margin-top: 1px;
    color: var(--theme-muted);
    font-size: 10px;
}


.student-library-panel {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
}


.student-library-panel-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--theme-border);
}


    .student-library-panel-header h3 {
        margin: 3px 0 0;
        color: var(--theme-text);
        font-size: 16px;
        font-weight: 800;
    }


.student-library-count {
    min-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 12px;
    font-weight: 850;
}


.student-library-borrow-list {
    display: flex;
    flex-direction: column;
}


.student-library-borrow-item {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(110px, auto) minmax(110px, auto) minmax(150px, auto);
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--theme-border);
}


    .student-library-borrow-item:last-child {
        border-bottom: 0;
    }


    .student-library-borrow-item.overdue {
        background: color-mix( in srgb, #fef2f2 48%, var(--theme-surface));
    }


.student-library-book-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
}


.student-library-book-main {
    min-width: 0;
}


    .student-library-book-main strong,
    .student-library-book-main span,
    .student-library-book-main small {
        display: block;
    }


    .student-library-book-main strong {
        font-size: 13px;
        font-weight: 800;
    }


    .student-library-book-main span,
    .student-library-book-main small {
        margin-top: 2px;
        color: var(--theme-muted);
        font-size: 10px;
    }


.student-library-borrow-date span,
.student-library-borrow-date strong {
    display: block;
}


.student-library-borrow-date span {
    color: var(--theme-muted);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}


.student-library-borrow-date strong {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
}


.student-library-borrow-status {
    text-align: right;
}


    .student-library-borrow-status small {
        display: block;
        margin-top: 4px;
        color: var(--theme-muted);
        font-size: 9px;
    }


.student-library-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}


    .student-library-pill.success {
        background: #ecfdf3;
        color: #137a4b;
    }


    .student-library-pill.danger {
        background: #fef2f2;
        color: #b42318;
    }


    .student-library-pill.neutral {
        background: var(--theme-bg);
        color: var(--theme-muted);
    }


.student-library-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 18px 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.45;
}


    .student-library-info-note.warning {
        background: #fff8e8;
        color: #8a5a08;
    }


.student-library-two-column {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr));
    gap: 20px;
}


.student-library-simple-list {
    display: flex;
    flex-direction: column;
}


    .student-library-simple-list article {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px 18px;
        border-bottom: 1px solid var(--theme-border);
    }


        .student-library-simple-list article:last-child {
            border-bottom: 0;
        }


    .student-library-simple-list strong,
    .student-library-simple-list span,
    .student-library-simple-list small {
        display: block;
    }


    .student-library-simple-list strong {
        font-size: 12px;
        font-weight: 800;
    }


    .student-library-simple-list span {
        margin-top: 2px;
        color: var(--theme-muted);
        font-size: 10px;
    }


.student-library-list-side {
    flex: 0 0 auto;
    text-align: right;
}


    .student-library-list-side small {
        margin-top: 4px;
        color: var(--theme-muted);
        font-size: 9px;
    }


.student-library-money {
    color: var(--theme-primary);
}


.student-library-empty-small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    padding: 18px;
    color: var(--theme-muted);
    font-size: 11px;
}


    .student-library-empty-small i {
        color: var(--theme-primary);
        font-size: 17px;
    }


.student-library-table-wrap {
    overflow-x: auto;
}


.student-library-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}


    .student-library-table th,
    .student-library-table td {
        padding: 11px 13px;
        border-bottom: 1px solid var(--theme-border);
        text-align: left;
    }


    .student-library-table th {
        background: var(--theme-bg);
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }


    .student-library-table td {
        color: var(--theme-text);
        font-size: 11px;
    }


    .student-library-table tbody tr:last-child td {
        border-bottom: 0;
    }


    .student-library-table td strong,
    .student-library-table td span {
        display: block;
    }


    .student-library-table td strong {
        font-size: 11px;
        font-weight: 800;
    }


    .student-library-table td span:not(.student-library-pill) {
        margin-top: 2px;
        color: var(--theme-muted);
        font-size: 9px;
    }


@media (max-width: 1100px) {

    .student-library-kpi-grid {
        grid-template-columns: repeat( 2, minmax(0, 1fr));
    }


    .student-library-borrow-item {
        grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto);
    }


    .student-library-borrow-date {
        display: none;
    }
}


@media (max-width: 820px) {

    .student-library-hero,
    .student-library-account-strip {
        align-items: flex-start;
        flex-direction: column;
    }


    .student-library-account-meta {
        width: 100%;
        justify-content: space-between;
    }


    .student-library-two-column {
        grid-template-columns: 1fr;
    }


    .student-library-student-summary {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

    .student-library-hero {
        padding: 20px;
    }


        .student-library-hero h2 {
            font-size: 22px;
        }


    .student-library-btn {
        width: 100%;
    }


    .student-library-kpi-grid {
        grid-template-columns: 1fr;
    }


    .student-library-account-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }


    .student-library-borrow-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }


    .student-library-borrow-status {
        grid-column: 1 / -1;
        text-align: left;
    }


    .student-library-simple-list article {
        align-items: flex-start;
        flex-direction: column;
    }


    .student-library-list-side {
        text-align: left;
    }
}
/* =========================================================
   MY LIBRARY - PRIMARY BUTTON TEXT COLOR FIX
   ========================================================= */

body.student-theme a.student-library-btn.primary,
body.student-theme a.student-library-btn.primary:visited,
body.student-theme a.student-library-btn.primary:hover,
body.student-theme a.student-library-btn.primary:focus,
body.student-theme a.student-library-btn.primary:active {
    background: var(--theme-primary, #f97316) !important;
    color: var(--theme-primary-text, #ffffff) !important;
    text-decoration: none !important;
}

    body.student-theme a.student-library-btn.primary i,
    body.student-theme a.student-library-btn.primary i::before {
        color: var(--theme-primary-text, #ffffff) !important;
    }





/* ============================================================
   STUDENT PORTAL - MY CLEARANCE
   ============================================================ */

.student-clearance-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--theme-text);
}


/* ============================================================
   HEADING
   ============================================================ */

.student-clearance-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

    .student-clearance-heading > div:first-child {
        min-width: 0;
    }

.student-clearance-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--theme-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.student-clearance-heading h2 {
    margin: 0;
    color: var(--theme-text);
    font-size: 20px;
    font-weight: 800;
}

.student-clearance-heading p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--theme-muted);
    font-size: 14px;
    line-height: 1.55;
}


/* ============================================================
   PERIOD SELECTOR
   ============================================================ */

.student-clearance-period-form {
    min-width: 280px;
}

    .student-clearance-period-form label {
        display: block;
        margin-bottom: 6px;
        color: var(--theme-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .student-clearance-period-form select {
        width: 100%;
        min-height: 42px;
        padding: 0 36px 0 12px;
        border: 1px solid var(--theme-border);
        border-radius: 10px;
        background: var(--theme-surface);
        color: var(--theme-text);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        outline: none;
    }

        .student-clearance-period-form select:focus {
            border-color: var(--theme-primary);
            box-shadow: 0 0 0 3px var(--theme-primary-soft);
        }


/* ============================================================
   EMPTY STATE
   ============================================================ */

.student-clearance-empty {
    padding: 60px 24px;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
    text-align: center;
}

.student-clearance-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 26px;
}

.student-clearance-empty h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.student-clearance-empty p {
    max-width: 560px;
    margin: 8px auto 0;
    color: var(--theme-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   HERO
   ============================================================ */

.student-clearance-hero {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

.student-clearance-hero-main {
    padding: 22px;
}

.student-clearance-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.student-clearance-period-label {
    display: block;
    margin-bottom: 5px;
    color: var(--theme-primary);
    font-size: 12px;
    font-weight: 800;
}

.student-clearance-hero-top h3 {
    margin: 0;
    color: var(--theme-text);
    font-size: 20px;
    font-weight: 800;
}

.student-clearance-hero-top p {
    margin: 5px 0 0;
    color: var(--theme-muted);
    font-size: 13px;
    font-weight: 600;
}


/* ============================================================
   OVERALL STATUS
   ============================================================ */

.student-clearance-overall-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    padding: 12px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
}

    .student-clearance-overall-status > i {
        font-size: 22px;
    }

    .student-clearance-overall-status span {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        opacity: .76;
    }

    .student-clearance-overall-status strong {
        display: block;
        font-size: 14px;
        font-weight: 800;
    }

    .student-clearance-overall-status.cleared {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .student-clearance-overall-status.on-hold {
        border-color: #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .student-clearance-overall-status.pending {
        border-color: #fde68a;
        background: #fffbeb;
        color: #a16207;
    }

    .student-clearance-overall-status.not-started,
    .student-clearance-overall-status.not-required {
        background: #f8fafc;
        color: #64748b;
    }


/* ============================================================
   PERIOD META
   ============================================================ */

.student-clearance-period-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--theme-border);
}

    .student-clearance-period-meta > div,
    .student-clearance-period-detail-grid > div {
        min-width: 0;
    }

    .student-clearance-period-meta span,
    .student-clearance-period-detail-grid span {
        display: block;
        margin-bottom: 4px;
        color: var(--theme-muted);
        font-size: 11px;
        font-weight: 700;
    }

    .student-clearance-period-meta strong,
    .student-clearance-period-detail-grid strong {
        display: block;
        overflow: hidden;
        color: var(--theme-text);
        font-size: 13px;
        font-weight: 800;
        text-overflow: ellipsis;
    }

.student-clearance-period-status {
    display: inline-flex !important;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px !important;
}

    .student-clearance-period-status.open {
        background: #dcfce7;
        color: #15803d;
    }

    .student-clearance-period-status.closed {
        background: #e2e8f0;
        color: #475569;
    }

    .student-clearance-period-status.archived {
        background: #f1f5f9;
        color: #64748b;
    }

.student-clearance-purpose {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    background: var(--theme-primary-soft);
}

    .student-clearance-purpose span {
        display: block;
        margin-bottom: 4px;
        color: var(--theme-primary);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .student-clearance-purpose p {
        margin: 0;
        color: var(--theme-text);
        font-size: 13px;
        line-height: 1.55;
    }


/* ============================================================
   KPI
   ============================================================ */

.student-clearance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.student-clearance-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
}

.student-clearance-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
    font-size: 18px;
}

.student-clearance-kpi.success .student-clearance-kpi-icon {
    background: #f0fdf4;
    color: #15803d;
}

.student-clearance-kpi.warning .student-clearance-kpi-icon {
    background: #fffbeb;
    color: #a16207;
}

.student-clearance-kpi.danger .student-clearance-kpi-icon {
    background: #fef2f2;
    color: #b91c1c;
}

.student-clearance-kpi span {
    display: block;
    margin-bottom: 2px;
    color: var(--theme-muted);
    font-size: 11px;
    font-weight: 700;
}

.student-clearance-kpi strong {
    color: var(--theme-text);
    font-size: 20px;
    font-weight: 900;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.student-clearance-progress-card {
    padding: 18px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
}

.student-clearance-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .student-clearance-progress-heading span {
        display: block;
        margin-bottom: 3px;
        color: var(--theme-muted);
        font-size: 11px;
        font-weight: 700;
    }

    .student-clearance-progress-heading strong {
        font-size: 13px;
        font-weight: 800;
    }

    .student-clearance-progress-heading em {
        color: var(--theme-primary);
        font-size: 17px;
        font-style: normal;
        font-weight: 900;
    }

.student-clearance-progress-track {
    overflow: hidden;
    height: 9px;
    margin-top: 12px;
    border-radius: 999px;
    background: #e2e8f0;
}

    .student-clearance-progress-track > div {
        height: 100%;
        border-radius: inherit;
        background: var(--theme-primary);
        transition: width .25s ease;
    }

.student-clearance-progress-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--theme-muted);
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   ATTENTION
   ============================================================ */

.student-clearance-attention-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.student-clearance-attention-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 18px;
}

.student-clearance-attention-card span {
    display: block;
    color: #991b1b;
    font-size: 11px;
    font-weight: 800;
}

.student-clearance-attention-card strong {
    display: block;
    margin-top: 2px;
    color: #7f1d1d;
    font-size: 14px;
    font-weight: 800;
}

.student-clearance-attention-card p {
    margin: 3px 0 0;
    color: #991b1b;
    font-size: 12px;
}

.student-clearance-attention-amount {
    min-width: 130px;
    text-align: right;
}

    .student-clearance-attention-amount strong {
        font-size: 17px;
    }


/* ============================================================
   SECTION
   ============================================================ */

.student-clearance-section {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
}

.student-clearance-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--theme-border);
}

    .student-clearance-section-heading > div > span {
        display: block;
        margin-bottom: 2px;
        color: var(--theme-primary);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .student-clearance-section-heading h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

    .student-clearance-section-heading p {
        margin: 4px 0 0;
        color: var(--theme-muted);
        font-size: 12px;
    }

    .student-clearance-section-heading > em {
        color: var(--theme-muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
    }


/* ============================================================
   OFFICE GRID
   ============================================================ */

.student-clearance-office-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.student-clearance-office-card {
    padding: 16px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
}

.student-clearance-office-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.student-clearance-office-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.student-clearance-office-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--theme-primary-soft);
    color: var(--theme-primary);
}

.student-clearance-office-identity strong {
    display: block;
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 800;
}

.student-clearance-office-identity span {
    display: block;
    margin-top: 2px;
    color: var(--theme-muted);
    font-size: 11px;
    font-weight: 600;
}


/* ============================================================
   STATUS PILL
   ============================================================ */

.student-clearance-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

    .student-clearance-status-pill.cleared {
        background: #dcfce7;
        color: #15803d;
    }

    .student-clearance-status-pill.on-hold {
        background: #fee2e2;
        color: #b91c1c;
    }

    .student-clearance-status-pill.pending {
        background: #fef3c7;
        color: #a16207;
    }

    .student-clearance-status-pill.not-started {
        background: #f1f5f9;
        color: #64748b;
    }

    .student-clearance-status-pill.not-required {
        background: #e2e8f0;
        color: #475569;
    }


/* ============================================================
   OFFICE CONTENT
   ============================================================ */

.student-clearance-office-description {
    margin: 12px 0 0;
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 1.5;
}

.student-clearance-office-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
}

    .student-clearance-office-alert > i {
        margin-top: 1px;
    }

    .student-clearance-office-alert strong {
        display: block;
        font-size: 11px;
        font-weight: 800;
    }

    .student-clearance-office-alert span {
        display: block;
        margin-top: 2px;
        font-size: 11px;
    }

.student-clearance-office-remarks {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
}

    .student-clearance-office-remarks span {
        display: block;
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .student-clearance-office-remarks p {
        margin: 3px 0 0;
        color: var(--theme-text);
        font-size: 12px;
        line-height: 1.5;
    }

.student-clearance-office-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border);
}

    .student-clearance-office-footer span {
        display: block;
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .student-clearance-office-footer strong {
        display: block;
        margin-top: 2px;
        color: var(--theme-text);
        font-size: 11px;
        font-weight: 700;
    }


/* ============================================================
   ACCOUNTABILITY
   ============================================================ */

.student-clearance-accountability-list {
    display: flex;
    flex-direction: column;
}

.student-clearance-accountability-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--theme-border);
}

    .student-clearance-accountability-item:last-child {
        border-bottom: 0;
    }

.student-clearance-accountability-office {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .student-clearance-accountability-office > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--theme-primary-soft);
        color: var(--theme-primary);
    }

    .student-clearance-accountability-office span,
    .student-clearance-accountability-amount span {
        display: block;
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 700;
    }

    .student-clearance-accountability-office strong {
        display: block;
        margin-top: 1px;
        font-size: 12px;
        font-weight: 800;
    }

.student-clearance-accountability-main > strong {
    display: block;
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.student-clearance-accountability-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

    .student-clearance-accountability-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--theme-muted);
        font-size: 10px;
        font-weight: 600;
    }

.student-clearance-accountability-amount {
    min-width: 110px;
    text-align: right;
}

    .student-clearance-accountability-amount strong {
        display: block;
        margin-top: 2px;
        color: #b91c1c;
        font-size: 14px;
        font-weight: 900;
    }


/* ============================================================
   GOOD / EMPTY STATES
   ============================================================ */

.student-clearance-good-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
}

    .student-clearance-good-state > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f0fdf4;
        color: #15803d;
        font-size: 18px;
    }

    .student-clearance-good-state strong,
    .student-clearance-section-empty strong {
        display: block;
        font-size: 13px;
        font-weight: 800;
    }

    .student-clearance-good-state span,
    .student-clearance-section-empty span {
        display: block;
        margin-top: 3px;
        color: var(--theme-muted);
        font-size: 12px;
    }

.student-clearance-section-empty {
    padding: 32px 18px;
    color: var(--theme-muted);
    text-align: center;
}

    .student-clearance-section-empty > i {
        display: block;
        margin-bottom: 8px;
        color: var(--theme-primary);
        font-size: 24px;
    }


/* ============================================================
   PERIOD DETAILS
   ============================================================ */

.student-clearance-period-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}


/* ============================================================
   READ ONLY
   ============================================================ */

.student-clearance-readonly-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: #f8fafc;
}

    .student-clearance-readonly-note > i {
        margin-top: 1px;
        color: var(--theme-primary);
    }

    .student-clearance-readonly-note strong {
        display: block;
        color: var(--theme-text);
        font-size: 12px;
        font-weight: 800;
    }

    .student-clearance-readonly-note span {
        display: block;
        margin-top: 3px;
        color: var(--theme-muted);
        font-size: 11px;
        line-height: 1.55;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .student-clearance-period-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-clearance-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 860px) {

    .student-clearance-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .student-clearance-period-form {
        min-width: 0;
    }

    .student-clearance-office-grid {
        grid-template-columns: 1fr;
    }

    .student-clearance-accountability-item {
        grid-template-columns: 1fr;
    }

    .student-clearance-accountability-amount {
        text-align: left;
    }
}


@media (max-width: 640px) {

    .student-clearance-hero-top {
        flex-direction: column;
    }

    .student-clearance-overall-status {
        width: 100%;
        box-sizing: border-box;
    }

    .student-clearance-period-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-clearance-kpi-grid {
        grid-template-columns: 1fr;
    }

    .student-clearance-period-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-clearance-attention-card {
        grid-template-columns: auto 1fr;
    }

    .student-clearance-attention-amount {
        grid-column: 2;
        text-align: left;
    }

    .student-clearance-office-header {
        flex-direction: column;
    }

    .student-clearance-office-footer {
        flex-direction: column;
    }
}


@media (max-width: 420px) {

    .student-clearance-period-meta,
    .student-clearance-period-detail-grid {
        grid-template-columns: 1fr;
    }
}





/* =========================================================
   STUDENT DASHBOARD - COMPACT INSTITUTIONAL DESIGN
   2026-09-14

   Goal:
   - Smaller / cleaner header
   - Compact student hero
   - Less decorative / less template-like
   - Professional SIS appearance
   - Preserve dynamic theme colors
   ========================================================= */


/* =========================================================
   STUDENT PORTAL TOP HEADER
   ========================================================= */

body.student-theme .topbar {
    min-height: 72px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

    body.student-theme .topbar .page-eyebrow {
        margin-bottom: 2px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
    }

    body.student-theme .topbar h1 {
        margin: 0 !important;
        font-size: 23px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }


/* =========================================================
   DASHBOARD PAGE
   ========================================================= */

body.student-theme .student-dashboard-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}


/* =========================================================
   COMPACT STUDENT HERO
   ========================================================= */

body.student-theme .student-dashboard-hero {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    gap: 24px !important;
    padding: 22px 26px !important;
    border: 1px solid color-mix( in srgb, var(--theme-primary-dark, #ea580c) 22%, transparent ) !important;
    border-radius: 16px !important;
    background: linear-gradient( 110deg, var(--theme-primary-dark, #ea580c) 0%, var(--theme-primary, #f97316) 100% ) !important;
    box-shadow: 0 6px 18px color-mix( in srgb, var(--theme-primary, #f97316) 14%, transparent ) !important;
    overflow: hidden !important;
}


    /*
   Remove large decorative circles / overlays.
   These were one of the main reasons the dashboard
   looked like a generic generated template.
*/
    body.student-theme .student-dashboard-hero::before,
    body.student-theme .student-dashboard-hero::after {
        content: none !important;
        display: none !important;
    }


/* =========================================================
   HERO STUDENT PROFILE
   ========================================================= */

body.student-theme .student-dashboard-hero-profile {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 16px !important;
}


body.student-theme .student-dashboard-photo {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    padding: 3px !important;
    border: 2px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden !important;
}


    body.student-theme .student-dashboard-photo img,
    body.student-theme .student-dashboard-photo-initials {
        width: 100% !important;
        height: 100% !important;
        border-radius: 11px !important;
    }


    body.student-theme .student-dashboard-photo img {
        display: block;
        object-fit: cover;
    }


body.student-theme .student-dashboard-photo-initials {
    place-items: center !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}


/* =========================================================
   HERO TEXT
   ========================================================= */

body.student-theme .student-dashboard-hero-copy {
    min-width: 0 !important;
}


    body.student-theme
    .student-dashboard-hero-copy
    .page-eyebrow {
        margin-bottom: 4px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        opacity: 0.88 !important;
    }


    body.student-theme
    .student-dashboard-hero-copy h2 {
        margin: 0 !important;
        max-width: 850px !important;
        font-size: clamp(20px, 2vw, 26px) !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -0.025em !important;
        color: #ffffff !important;
    }


    body.student-theme
    .student-dashboard-hero-copy p {
        margin: 5px 0 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 650 !important;
        color: rgba(255, 255, 255, 0.90) !important;
    }


/* =========================================================
   ENROLLMENT STATUS
   ========================================================= */

body.student-theme .student-dashboard-status-card {
    min-width: 180px !important;
    padding: 12px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}


    body.student-theme
    .student-dashboard-status-card span {
        display: block !important;
        margin-bottom: 2px !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.82) !important;
    }


    body.student-theme
    .student-dashboard-status-card strong {
        display: block !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }


    body.student-theme
    .student-dashboard-status-card small {
        display: block !important;
        margin-top: 3px !important;
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }


/* =========================================================
   STUDENT OVERVIEW HEADING
   Former large snapshot card
   ========================================================= */

body.student-theme .student-dashboard-snapshot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 3px 2px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


    body.student-theme
    .student-dashboard-snapshot > div > span {
        display: block !important;
        margin-bottom: 2px !important;
        color: var(--theme-primary-dark, #ea580c) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
    }


    body.student-theme
    .student-dashboard-snapshot > div > strong {
        display: block !important;
        color: var(--theme-text, #1f2937) !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }


    body.student-theme
    .student-dashboard-snapshot em {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 30px !important;
        padding: 5px 10px !important;
        border: 1px solid var(--theme-border, #e5e7eb) !important;
        border-radius: 8px !important;
        background: var(--theme-surface, #ffffff) !important;
        color: var(--theme-primary-dark, #ea580c) !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-style: normal !important;
        font-weight: 800 !important;
    }


/* =========================================================
   KPI GRID
   ========================================================= */

body.student-theme .student-dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}


/* Remove decorative blobs */
body.student-theme
.student-dashboard-kpi-card::before,
body.student-theme
.student-dashboard-kpi-card::after {
    content: none !important;
    display: none !important;
}


body.student-theme .student-dashboard-kpi-card {
    min-height: 138px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 18px !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: 13px !important;
    background: var(--theme-surface, #ffffff) !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045) !important;
}


body.student-theme
.student-dashboard-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    margin-bottom: 13px !important;
    border-radius: 9px !important;
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
}


    body.student-theme
    .student-dashboard-kpi-icon svg {
        width: 19px !important;
        height: 19px !important;
    }


body.student-theme
.student-dashboard-kpi-card > span {
    margin-bottom: 3px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    color: var(--theme-muted, #6b7280) !important;
}


body.student-theme
.student-dashboard-kpi-card > strong {
    margin: 0 !important;
    font-size: clamp(20px, 1.7vw, 24px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--theme-text, #1f2937) !important;
}


body.student-theme
.student-dashboard-kpi-card.warning > strong {
    color: var(--theme-primary-dark, #ea580c) !important;
}


body.student-theme
.student-dashboard-kpi-card > small {
    margin-top: auto !important;
    padding-top: 6px !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    color: var(--theme-muted, #6b7280) !important;
}


/* =========================================================
   PORTAL MODULE TITLE
   ========================================================= */

body.student-theme
.student-dashboard-module-section {
    margin-top: 1px !important;
}


body.student-theme
.student-dashboard-section-title {
    margin-bottom: 10px !important;
}


    body.student-theme
    .student-dashboard-section-title span {
        display: block !important;
        margin-bottom: 2px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
    }


    body.student-theme
    .student-dashboard-section-title strong {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }


/* =========================================================
   PORTAL ACTION CARDS
   ========================================================= */

body.student-theme
.student-dashboard-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}


body.student-theme
.student-dashboard-action-card::before,
body.student-theme
.student-dashboard-action-card::after {
    content: none !important;
    display: none !important;
}


body.student-theme
.student-dashboard-action-card {
    min-height: 92px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 15px !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: 12px !important;
    background: var(--theme-surface, #ffffff) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    text-decoration: none !important;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
}


    body.student-theme
    .student-dashboard-action-card:hover {
        transform: translateY(-1px) !important;
        background: var(--theme-primary-soft, #fff7ed) !important;
        border-color: color-mix( in srgb, var(--theme-primary, #f97316) 32%, var(--theme-border, #e5e7eb) ) !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
    }


body.student-theme
.student-dashboard-action-icon {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
}


    body.student-theme
    .student-dashboard-action-icon svg {
        width: 19px !important;
        height: 19px !important;
    }


body.student-theme
.student-dashboard-action-card strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}


body.student-theme
.student-dashboard-action-card small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}


body.student-theme
.student-dashboard-action-card em {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: 8px !important;
    background: var(--theme-surface, #ffffff) !important;
    font-style: normal !important;
}


    body.student-theme
    .student-dashboard-action-card em svg {
        width: 15px !important;
        height: 15px !important;
    }


/* =========================================================
   RECENT RECORDS
   ========================================================= */

body.student-theme
.student-dashboard-records {
    gap: 14px !important;
}


body.student-theme
.student-dashboard-record-card {
    overflow: hidden !important;
    border: 1px solid var(--theme-border, #e5e7eb) !important;
    border-radius: 13px !important;
    background: var(--theme-surface, #ffffff) !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04) !important;
}


    body.student-theme
    .student-dashboard-record-card
    .panel-header {
        padding: 15px 16px !important;
    }


        body.student-theme
        .student-dashboard-record-card
        .panel-header h3 {
            margin: 0 !important;
            font-size: 14px !important;
            font-weight: 800 !important;
        }


        body.student-theme
        .student-dashboard-record-card
        .panel-header p {
            margin: 3px 0 0 !important;
            font-size: 10px !important;
        }


        body.student-theme
        .student-dashboard-record-card
        .panel-header a {
            font-size: 10px !important;
            font-weight: 800 !important;
        }


    body.student-theme
    .student-dashboard-record-card
    .data-table thead th {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 9px !important;
    }


    body.student-theme
    .student-dashboard-record-card
    .data-table tbody td {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        font-size: 10.5px !important;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    body.student-theme
    .student-dashboard-kpi-grid,
    body.student-theme
    .student-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 760px) {

    body.student-theme .topbar {
        min-height: 64px !important;
    }

        body.student-theme .topbar h1 {
            font-size: 20px !important;
        }


    body.student-theme
    .student-dashboard-hero {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 18px !important;
    }


    body.student-theme
    .student-dashboard-status-card {
        width: 100% !important;
        min-width: 0 !important;
    }


    body.student-theme
    .student-dashboard-photo {
        width: 66px !important;
        height: 66px !important;
        flex-basis: 66px !important;
    }


    body.student-theme
    .student-dashboard-snapshot {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 9px !important;
    }
}


@media (max-width: 560px) {

    body.student-theme
    .student-dashboard-kpi-grid,
    body.student-theme
    .student-dashboard-actions {
        grid-template-columns: 1fr !important;
    }


    body.student-theme
    .student-dashboard-kpi-card {
        min-height: 125px !important;
    }


    body.student-theme
    .student-dashboard-hero-copy h2 {
        font-size: 20px !important;
    }
}


/* =========================================================
   STUDENT DASHBOARD - CLEAN PROFILE HEADER
   Matches Medical Information design language
   ========================================================= */

body.student-theme .student-dashboard-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 28px;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 18px;
    background: var(--theme-surface, #ffffff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   LEFT SIDE - STUDENT INFORMATION
   ========================================================= */

body.student-theme .student-dashboard-profile {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}


/* Student photo */

body.student-theme
.student-dashboard-profile-card
.student-dashboard-photo {
    width: 108px !important;
    height: 108px !important;
    flex: 0 0 108px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix( in srgb, var(--theme-primary, #f97316) 24%, var(--theme-border, #e5e7eb) ) !important;
    border-radius: 22px !important;
    background: var(--theme-surface, #ffffff) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07) !important;
}


    body.student-theme
    .student-dashboard-profile-card
    .student-dashboard-photo img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
    }


/* Initials fallback */

body.student-theme
.student-dashboard-profile-card
.student-dashboard-photo-initials {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: var(--theme-primary-soft, #fff7ed) !important;
    color: var(--theme-primary-dark, #ea580c) !important;
    font-size: 26px;
    font-weight: 850;
}


/* Student information */

body.student-theme .student-dashboard-profile-info {
    min-width: 0;
}


body.student-theme
.student-dashboard-profile-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--theme-primary-dark, #ea580c);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


body.student-theme
.student-dashboard-profile-info h2 {
    margin: 0;
    color: var(--theme-text, #1f2937) !important;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.025em;
}


body.student-theme
.student-dashboard-profile-info p {
    margin: 9px 0 0;
    color: var(--theme-muted, #6b7280) !important;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================================
   RIGHT SIDE - ENROLLMENT INFORMATION
   Similar visual weight to Medical Reminder panel
   ========================================================= */

body.student-theme
.student-dashboard-enrollment-panel {
    width: 320px;
    max-width: 34%;
    flex: 0 0 auto;
    padding: 20px 22px;
    border: 1px solid color-mix( in srgb, var(--theme-primary, #f97316) 32%, var(--theme-border, #e5e7eb) );
    border-radius: 18px;
    background: color-mix( in srgb, var(--theme-primary-soft, #fff7ed) 70%, var(--theme-surface, #ffffff) );
}


    body.student-theme
    .student-dashboard-enrollment-panel > span {
        display: block;
        margin-bottom: 6px;
        color: var(--theme-primary-dark, #ea580c);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }


    body.student-theme
    .student-dashboard-enrollment-panel > strong {
        display: block;
        color: var(--theme-text, #1f2937);
        font-size: 21px;
        line-height: 1.25;
        font-weight: 850;
    }


    body.student-theme
    .student-dashboard-enrollment-panel > small {
        display: block;
        margin-top: 7px;
        color: var(--theme-muted, #6b7280);
        font-size: 11px;
        line-height: 1.5;
        font-weight: 500;
    }


/* =========================================================
   IMPORTANT:
   Disable old hero effects if old dashboard CSS still exists.
   ========================================================= */

body.student-theme .student-dashboard-profile-card::before,
body.student-theme .student-dashboard-profile-card::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    body.student-theme
    .student-dashboard-profile-card {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
        padding: 22px;
    }


    body.student-theme
    .student-dashboard-enrollment-panel {
        width: auto;
        max-width: none;
    }
}


@media (max-width: 600px) {

    body.student-theme
    .student-dashboard-profile {
        align-items: flex-start;
        gap: 15px;
    }


    body.student-theme
    .student-dashboard-profile-card
    .student-dashboard-photo {
        width: 78px !important;
        height: 78px !important;
        flex-basis: 78px !important;
        border-radius: 16px !important;
    }


    body.student-theme
    .student-dashboard-profile-info h2 {
        font-size: 20px;
    }


    body.student-theme
    .student-dashboard-profile-info p {
        font-size: 12px;
    }


    body.student-theme
    .student-dashboard-profile-card {
        padding: 18px;
        border-radius: 15px;
    }


    body.student-theme
    .student-dashboard-enrollment-panel {
        padding: 16px 18px;
        border-radius: 14px;
    }
}

/* =========================================================
   STUDENT GRADES PAGE - CANONICAL THEME-AWARE STYLES
   2026-09-15

   Single source of truth for Grades.cshtml.
   - No hard-coded orange accent.
   - Accent follows --theme-primary.
   - Semantic success remains green.
   - Failing grades remain red.
   - Subject/Grade quarter table is compact and centered.
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

body.student-theme .student-grades-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--theme-text, #1f2937);
}


    /* =========================================================
   PAGE HEADER
   ========================================================= */

    body.student-theme .student-grades-page .grades-page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 24px 26px;
        background: var(--theme-surface, #ffffff);
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 18px;
    }

    body.student-theme .student-grades-page .grades-page-header-content {
        min-width: 0;
    }

    body.student-theme .student-grades-page .grades-page-eyebrow {
        display: block;
        margin-bottom: 5px;
        color: var(--theme-primary, #64748b) !important;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    body.student-theme .student-grades-page .grades-page-header h2 {
        margin: 0;
        color: var(--theme-text, #1f2937);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
    }

    body.student-theme .student-grades-page .grades-page-header p {
        margin: 7px 0 0;
        color: var(--theme-muted, #6b7280);
        font-size: 14px;
        line-height: 1.55;
    }


    /* =========================================================
   SCHOOL YEAR
   ========================================================= */

    body.student-theme .student-grades-page .grades-school-year {
        flex: 0 0 auto;
        min-width: 190px;
    }

        body.student-theme .student-grades-page .grades-school-year label {
            display: block;
            margin-bottom: 7px;
            color: var(--theme-muted, #6b7280);
            font-size: 12px;
            font-weight: 600;
        }

        body.student-theme .student-grades-page .grades-school-year select {
            width: 100%;
            min-height: 42px;
            padding: 8px 36px 8px 12px;
            border: 1px solid var(--theme-border, #e5e7eb);
            border-radius: 10px;
            background: var(--theme-surface, #ffffff);
            color: var(--theme-text, #1f2937);
            font-size: 14px;
            outline: none;
        }

            body.student-theme .student-grades-page .grades-school-year select:focus {
                border-color: var(--theme-primary, #64748b);
                box-shadow: 0 0 0 3px color-mix( in srgb, var(--theme-primary, #64748b) 12%, transparent );
            }


    /* =========================================================
   PUBLICATION SUMMARY
   ========================================================= */

    body.student-theme .student-grades-page .grades-publication-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 17px 20px;
        background: color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 28%, var(--theme-surface, #ffffff) );
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 14px;
    }

    body.student-theme .student-grades-page .grades-publication-info {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    body.student-theme .student-grades-page .grades-publication-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        /* Semantic success indicator stays green. */
        background: #eef8f1 !important;
        color: #258249 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    body.student-theme .student-grades-page .grades-publication-info strong {
        display: block;
        color: var(--theme-text, #1f2937);
        font-size: 14px;
    }

    body.student-theme .student-grades-page .grades-publication-info > div > span {
        display: block;
        margin-top: 2px;
        color: var(--theme-muted, #6b7280);
        font-size: 12px;
    }

    body.student-theme .student-grades-page .grades-school-year-badge {
        flex: 0 0 auto;
        padding: 7px 11px;
        background: var(--theme-surface, #ffffff);
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 999px;
        color: var(--theme-text, #1f2937);
        font-size: 12px;
        font-weight: 600;
    }


    /* =========================================================
   QUARTER NAVIGATION
   ========================================================= */

    body.student-theme .student-grades-page .grades-period-nav {
        display: flex;
        gap: 8px;
        padding: 5px;
        overflow-x: auto;
        background: color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 20%, var(--theme-bg, #f8fafc) );
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 12px;
        scrollbar-width: thin;
    }

    body.student-theme .student-grades-page .grades-period-button {
        position: relative;
        flex: 1 0 125px;
        min-height: 48px;
        padding: 8px 12px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--theme-muted, #6b7280);
        cursor: pointer;
        font-family: inherit;
        text-align: center;
        transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

        body.student-theme .student-grades-page .grades-period-button strong {
            display: block;
            font-size: 13px;
            font-weight: 700;
        }

        body.student-theme .student-grades-page .grades-period-button small {
            display: block;
            margin-top: 2px;
            color: var(--theme-muted, #6b7280);
            font-size: 10px;
            font-weight: 500;
        }

        body.student-theme .student-grades-page .grades-period-button.is-active {
            background: var(--theme-surface, #ffffff);
            color: var(--theme-primary, #64748b) !important;
            box-shadow: 0 2px 7px color-mix( in srgb, var(--theme-primary, #64748b) 12%, rgba(15, 23, 42, .05) );
        }

            body.student-theme .student-grades-page .grades-period-button.is-active small {
                color: var(--theme-primary, #64748b) !important;
                opacity: .78;
            }

        body.student-theme .student-grades-page .grades-period-button.is-unpublished {
            color: color-mix( in srgb, var(--theme-muted, #6b7280) 55%, white );
            cursor: not-allowed;
            opacity: .70;
        }

            body.student-theme .student-grades-page .grades-period-button.is-unpublished strong {
                color: inherit;
            }


    /* =========================================================
   REPORT CARD
   ========================================================= */

    body.student-theme .student-grades-page .grades-report-card {
        overflow: hidden;
        background: var(--theme-surface, #ffffff);
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 16px;
    }

    body.student-theme .student-grades-page .grades-report-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 22px;
        background: linear-gradient( 90deg, var(--theme-surface, #ffffff) 0%, color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 22%, var(--theme-surface, #ffffff) ) 100% );
        border-bottom: 1px solid var(--theme-border, #e5e7eb);
    }

        body.student-theme .student-grades-page .grades-report-header h3 {
            margin: 0;
            color: var(--theme-text, #1f2937);
            font-size: 17px;
            font-weight: 700;
        }

        body.student-theme .student-grades-page .grades-report-header p {
            margin: 4px 0 0;
            color: var(--theme-muted, #6b7280);
            font-size: 12px;
        }

    body.student-theme .student-grades-page .grades-report-status {
        flex: 0 0 auto;
        color: var(--theme-primary, #64748b) !important;
        font-size: 12px;
        font-weight: 700;
    }


    /* =========================================================
   QUARTER TABLE
   Compact layout: Subject and Grade stay visually close.
   ========================================================= */

    body.student-theme .student-grades-page .quarter-grade-table {
        width: 100%;
        max-width: 680px;
        margin: 16px auto 20px;
        border: 1px solid var(--theme-border, #e5e7eb);
        border-radius: 12px;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        background: var(--theme-surface, #ffffff);
    }

        body.student-theme .student-grades-page .quarter-grade-table th {
            padding: 10px 18px;
            background: color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 28%, var(--theme-surface, #ffffff) );
            border-bottom: 1px solid var(--theme-border, #e5e7eb);
            color: var(--theme-primary, #64748b) !important;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-align: left;
            text-transform: uppercase;
        }

            body.student-theme .student-grades-page .quarter-grade-table th:nth-child(1),
            body.student-theme .student-grades-page .quarter-grade-table td:nth-child(1) {
                width: 50%;
                text-align: left;
            }

            body.student-theme .student-grades-page .quarter-grade-table th:nth-child(2),
            body.student-theme .student-grades-page .quarter-grade-table td:nth-child(2) {
                width: 20%;
                text-align: center;
            }

            body.student-theme .student-grades-page .quarter-grade-table th:nth-child(3),
            body.student-theme .student-grades-page .quarter-grade-table td:nth-child(3) {
                width: 30%;
                text-align: center;
            }

        body.student-theme .student-grades-page .quarter-grade-table td {
            padding: 10px 18px;
            border-bottom: 1px solid var(--theme-border, #e5e7eb);
            background: var(--theme-surface, #ffffff);
            color: var(--theme-text, #1f2937);
            font-size: 14px;
            vertical-align: middle;
        }

        body.student-theme .student-grades-page .quarter-grade-table tbody tr:last-child td {
            border-bottom: 0;
        }

        body.student-theme .student-grades-page .quarter-grade-table tbody tr:hover td {
            background: color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 16%, var(--theme-surface, #ffffff) );
        }

    body.student-theme .student-grades-page .quarter-grade-subject strong {
        display: block;
        color: var(--theme-text, #1f2937);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
    }

    body.student-theme .student-grades-page .quarter-grade-value {
        display: inline;
        min-width: 0;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--theme-text, #1f2937);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
    }


    /* =========================================================
   QUARTER / FULL REPORT VISIBILITY
   ========================================================= */

    body.student-theme .student-grades-page .grades-full-report,
    body.student-theme .student-grades-page .grades-quarter-view {
        display: none;
    }

        body.student-theme .student-grades-page .grades-full-report.is-active,
        body.student-theme .student-grades-page .grades-quarter-view.is-active {
            display: block;
        }

        body.student-theme .student-grades-page .grades-full-report .table-wrap {
            max-width: 1050px;
            margin: 0 auto;
        }


    /* =========================================================
   FAILING GRADES
   Semantic red - does not follow portal accent theme.
   ========================================================= */

    body.student-theme .student-grades-page .grade-failed {
        color: #dc2626 !important;
        font-weight: 700 !important;
    }

    body.student-theme .student-grades-page .quarter-grade-value.grade-failed {
        background: transparent !important;
        color: #dc2626 !important;
        font-weight: 700 !important;
    }


    /* Quarter-level remarks */
    body.student-theme .student-grades-page .quarter-grade-table .status-pill {
        min-width: 64px;
        padding: 4px 9px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }


    /* =========================================================
   FINAL SUMMARY
   ========================================================= */

    body.student-theme .student-grades-page .grades-final-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding: 18px 20px;
        background: color-mix( in srgb, var(--theme-primary-soft, #f8fafc) 18%, var(--theme-bg, #f8fafc) );
        border-top: 1px solid var(--theme-border, #e5e7eb);
    }

    body.student-theme .student-grades-page .grades-final-summary-item {
        min-width: 0;
    }

        body.student-theme .student-grades-page .grades-final-summary-item span {
            display: block;
            color: var(--theme-muted, #6b7280);
            font-size: 11px;
            font-weight: 600;
        }

        body.student-theme .student-grades-page .grades-final-summary-item strong {
            display: block;
            margin-top: 4px;
            color: var(--theme-text, #1f2937);
            font-size: 16px;
        }


    /* =========================================================
   EMPTY / UNPUBLISHED
   ========================================================= */

    body.student-theme .student-grades-page .grades-unpublished {
        padding: 45px 20px;
        text-align: center;
    }

        body.student-theme .student-grades-page .grades-unpublished strong {
            display: block;
            color: var(--theme-text, #1f2937);
            font-size: 15px;
        }

        body.student-theme .student-grades-page .grades-unpublished span {
            display: block;
            margin-top: 5px;
            color: var(--theme-muted, #6b7280);
            font-size: 12px;
        }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    body.student-theme .student-grades-page .grades-page-header {
        flex-direction: column;
        padding: 20px;
    }

    body.student-theme .student-grades-page .grades-school-year {
        width: 100%;
    }

    body.student-theme .student-grades-page .grades-publication-card {
        align-items: flex-start;
        flex-direction: column;
    }

    body.student-theme .student-grades-page .grades-period-button {
        flex: 0 0 125px;
    }

    body.student-theme .student-grades-page .grades-report-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.student-theme .student-grades-page .grades-final-summary {
        grid-template-columns: 1fr;
    }

    body.student-theme .student-grades-page .quarter-grade-table {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px auto 18px;
    }

        body.student-theme .student-grades-page .quarter-grade-table th,
        body.student-theme .student-grades-page .quarter-grade-table td {
            padding-left: 14px;
            padding-right: 14px;
        }
}



/* =========================================================
   GRADES - REPORT CARD PREVIEW LINK
   ========================================================= */

body.student-theme
.student-grades-page
.grades-report-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


body.student-theme
.student-grades-page
.grades-report-preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--theme-primary, #64748b);
    border-radius: 8px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-primary, #64748b) !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}


    body.student-theme
    .student-grades-page
    .grades-report-preview-link:hover {
        background: var(--theme-primary, #64748b);
        color: var(--theme-primary-text, #ffffff) !important;
        border-color: var(--theme-primary, #64748b);
    }


@media (max-width: 760px) {

    body.student-theme
    .student-grades-page
    .grades-report-header-actions {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }



    body.student-theme
    .student-grades-page
    .preschool-grades {
        width: 100%;
    }

    body.student-theme
    .student-grades-page
    .preschool-grade-section {
        margin-top: 18px;
        margin-bottom: 22px;
    }

    body.student-theme
    .student-grades-page
    .preschool-grade-section-title {
        padding: 10px 14px;
        border: 1px solid var(--theme-border, #e5e7eb);
        border-bottom: 0;
        border-radius: 10px 10px 0 0;
        background: var(--theme-primary-soft, #f1f5f9);
        color: var(--theme-primary, #475569);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.student-theme
    .student-grades-page
    .preschool-grade-table-wrap {
        overflow-x: auto;
    }

    body.student-theme
    .student-grades-page
    .preschool-grade-table {
        width: 100%;
        border: 1px solid var(--theme-border, #e5e7eb);
        border-collapse: separate;
        border-spacing: 0;
        background: var(--theme-surface, #ffffff);
    }

        body.student-theme
        .student-grades-page
        .preschool-grade-table th,
        body.student-theme
        .student-grades-page
        .preschool-grade-table td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--theme-border, #e5e7eb);
            font-size: 12px;
            vertical-align: middle;
        }

        body.student-theme
        .student-grades-page
        .preschool-grade-table th {
            background: var(--theme-bg, #f8fafc);
            color: var(--theme-muted, #64748b);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }

            body.student-theme
            .student-grades-page
            .preschool-grade-table th:first-child,
            body.student-theme
            .student-grades-page
            .preschool-grade-table td:first-child {
                width: 88%;
                text-align: left;
            }

            body.student-theme
            .student-grades-page
            .preschool-grade-table th:last-child,
            body.student-theme
            .student-grades-page
            .preschool-grade-table td:last-child {
                width: 12%;
                text-align: center;
            }

        body.student-theme
        .student-grades-page
        .preschool-grade-table tbody tr:last-child td {
            border-bottom: 0;
        }

    body.student-theme
    .student-grades-page
    .preschool-grade-indicator {
        color: var(--theme-text, #1f2937);
    }

    body.student-theme
    .student-grades-page
    .preschool-rating-value {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        min-height: 28px;
        padding: 4px 8px;
        border-radius: 7px;
        background: var(--theme-primary-soft, #f1f5f9);
        color: var(--theme-primary, #475569);
        font-weight: 700;
    }

    body.student-theme
    .student-grades-page
    .preschool-rating-empty {
        color: var(--theme-muted, #9ca3af);
    }
}


/* =========================================================
   PRESCHOOL / DEVELOPMENTAL GRADES
   ========================================================= */

body.student-theme
.student-grades-page
.preschool-grades {
    width: 100%;
}


/* CATEGORY */

body.student-theme
.student-grades-page
.preschool-grade-section {
    width: 100%;
    margin: 18px 0 24px;
}


body.student-theme
.student-grades-page
.preschool-grade-section-title {
    padding: 10px 14px;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--theme-primary-soft, #f1f5f9);
    color: var(--theme-primary, #475569);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}


/* TABLE WRAPPER */

body.student-theme
.student-grades-page
.preschool-grade-table-wrap {
    width: 100%;
    overflow-x: auto;
}


/* TABLE */

body.student-theme
.student-grades-page
.preschool-grade-table {
    width: 100%;
    min-width: 720px;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--theme-surface, #ffffff);
    table-layout: fixed;
}


    /* CELLS */

    body.student-theme
    .student-grades-page
    .preschool-grade-table th,
    body.student-theme
    .student-grades-page
    .preschool-grade-table td {
        padding: 9px 12px;
        border-bottom: 1px solid var(--theme-border, #e5e7eb);
        color: var(--theme-text, #1f2937);
        font-size: 12px;
        line-height: 1.35;
        vertical-align: middle;
    }


    /* HEADER */

    body.student-theme
    .student-grades-page
    .preschool-grade-table thead th {
        background: var(--theme-bg, #f8fafc);
        color: var(--theme-muted, #64748b);
        font-size: 10px;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
    }


    /* INDICATOR COLUMN */

    body.student-theme
    .student-grades-page
    .preschool-grade-table th:first-child,
    body.student-theme
    .student-grades-page
    .preschool-grade-table td:first-child {
        width: 60%;
        text-align: left;
    }


body.student-theme
.student-grades-page
.preschool-grade-indicator {
    white-space: normal;
    word-break: normal;
}


/* QUARTER COLUMNS */

body.student-theme
.student-grades-page
.preschool-grade-quarter-table th:not(:first-child),
body.student-theme
.student-grades-page
.preschool-grade-quarter-table td:not(:first-child) {
    width: 10%;
    text-align: center;
}


/* REMOVE LAST BORDER */

body.student-theme
.student-grades-page
.preschool-grade-table tbody tr:last-child td {
    border-bottom: 0;
}


/* RATING */

body.student-theme
.student-grades-page
.preschool-rating-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 26px;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--theme-primary-soft, #f1f5f9);
    color: var(--theme-primary, #475569);
    font-size: 11px;
    font-weight: 800;
}


body.student-theme
.student-grades-page
.preschool-rating-empty {
    color: var(--theme-muted, #9ca3af);
}


/* MOBILE */

@media (max-width: 768px) {

    body.student-theme
    .student-grades-page
    .preschool-grade-table {
        min-width: 680px;
    }

        body.student-theme
        .student-grades-page
        .preschool-grade-table th,
        body.student-theme
        .student-grades-page
        .preschool-grade-table td {
            padding: 8px 10px;
        }
}


body.student-theme
.student-dashboard-page
.student-dashboard-kpi-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
    body.student-theme
    .student-dashboard-page
    .student-dashboard-kpi-grid-two {
        grid-template-columns: 1fr;
    }
}