/* =========================================================
   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;
        }