/*
 * Student Mitraa automatic device theme
 *
 * The existing site styles are the dark-mode baseline. This stylesheet keeps
 * that design for dark devices and supplies a complete light-mode token layer
 * when the operating system/browser prefers a light color scheme.
 */

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    /* Informational pages contain legacy inline light-card styles. */
    body > .page-container {
        background: var(--bg-surface) !important;
        color: var(--text-body) !important;
        border: 1px solid var(--border-color);
        box-shadow: 0 18px 45px var(--shadow-color) !important;
    }

    .page-container h1,
    .page-container h2,
    .page-container h3 {
        color: var(--text-heading) !important;
    }

    .page-container p,
    .page-container li,
    .page-container label {
        color: var(--text-body) !important;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        background: var(--bg-surface-alt) !important;
        color: var(--text-body) !important;
        border-color: var(--border-strong) !important;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg-page: #f4f7fb;
        --bg-surface: #ffffff;
        --bg-surface-alt: #f8fafc;
        --bg-surface-hover: #edf4ff;
        --text-heading: #0f172a;
        --text-body: #334155;
        --text-secondary: #64748b;
        --text-muted: #64748b;
        --text-tertiary: #475569;
        --border-color: rgba(15, 23, 42, 0.10);
        --border-strong: rgba(15, 23, 42, 0.18);
        --brand-blue: #2563eb;
        --shadow-color: rgba(15, 23, 42, 0.08);
        --shadow-color-strong: rgba(15, 23, 42, 0.14);

        --dash-bg: #f4f7fb;
        --dash-side: #0d1b31;
        --dash-card: #ffffff;
        --dash-card-dark: #f8fafc;
        --dash-border: #dbe3ef;
        --dash-text: #172033;
        --dash-muted: #64748b;
        --dash-blue: #2563eb;
        --dash-green: #119669;
        --dash-yellow: #b77907;
    }

    html,
    body {
        background-color: var(--bg-page);
        color: var(--text-body);
    }

    body {
        transition: background-color 180ms ease, color 180ms ease;
    }

    input,
    select,
    textarea,
    button {
        color-scheme: light;
    }

    /* Shared navigation */
    .navbar {
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom-color: var(--border-color) !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
    }

    .navbar .logo-text,
    .navbar .logo-text span {
        color: var(--text-heading) !important;
    }

    .search-nav-btn,
    .shortlist-nav-btn,
    .auth-nav-btn,
    .top-colleges-nav-link,
    .nav-link {
        color: var(--text-body) !important;
    }

    .search-nav-btn:hover,
    .shortlist-nav-btn:hover,
    .auth-nav-btn:hover,
    .top-colleges-nav-link:hover,
    .nav-link:hover {
        color: var(--brand-blue) !important;
    }

    /* Legacy informational pages */
    body > .page-container {
        background: var(--bg-surface) !important;
        color: var(--text-body) !important;
        border: 1px solid var(--border-color);
        box-shadow: 0 18px 45px var(--shadow-color) !important;
    }

    .page-container h1,
    .page-container h2,
    .page-container h3 {
        color: var(--text-heading) !important;
    }

    .page-container p,
    .page-container li,
    .page-container label {
        color: var(--text-body) !important;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        background: var(--bg-surface-alt) !important;
        color: var(--text-body) !important;
        border-color: var(--border-strong) !important;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        color: #94a3b8 !important;
    }

    /* Home-page trust and discovery components */
    .home-trust-strip {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 16px 36px var(--shadow-color) !important;
    }

    .home-trust-item {
        border-color: var(--border-color) !important;
    }

    .home-trust-item > i {
        background: #e8f0ff !important;
        color: var(--brand-blue) !important;
    }

    .home-trust-item strong {
        color: var(--text-heading) !important;
    }

    .home-trust-item small {
        color: var(--text-secondary) !important;
    }

    /* Sign-in modal */
    #authModal {
        background: rgba(15, 23, 42, 0.48) !important;
    }

    .auth-modal-box {
        background: var(--bg-surface) !important;
        border-color: #dbe3ef !important;
        color: var(--text-heading) !important;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2) !important;
    }

    .auth-modal-title,
    .auth-modal-box h1,
    .auth-modal-box h2,
    .auth-modal-box h3 {
        color: var(--text-heading) !important;
    }

    .auth-modal-subtitle,
    .auth-signup-copy {
        color: var(--text-secondary) !important;
    }

    .auth-modal-icon {
        background: #e8f0ff !important;
        border-color: #93c5fd !important;
        color: var(--brand-blue) !important;
    }

    .auth-modal-box .auth-input-shell input {
        background: var(--bg-surface-alt) !important;
        border-color: #cbd5e1 !important;
        color: var(--text-heading) !important;
    }

    .auth-modal-box .auth-input-shell input::placeholder {
        color: #94a3b8 !important;
    }

    .auth-modal-box .auth-input-shell i,
    .auth-password-toggle,
    .auth-cancel-action,
    .auth-modal-close {
        color: var(--text-secondary) !important;
    }

    .auth-modal-box .auth-input-shell:focus-within input {
        background: #ffffff !important;
        border-color: var(--brand-blue) !important;
    }

    .auth-forgot-link,
    .auth-signup-copy a {
        color: var(--brand-blue) !important;
    }

    .auth-cancel-action:hover,
    .auth-modal-close:hover {
        color: var(--text-heading) !important;
    }

    .auth-error,
    .register-error {
        color: #b91c1c !important;
        background: #fef2f2 !important;
        border-color: #fecaca !important;
    }

    /* Registration, verification and password-reset pages */
    .register-page-body,
    .auth-page {
        background:
            radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.10), transparent 30%),
            radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.08), transparent 34%),
            var(--bg-page) !important;
        color: var(--text-body) !important;
    }

    .register-page-card,
    .auth-page .register-page-card {
        background: var(--bg-surface) !important;
        border-color: #dbe3ef !important;
        color: var(--text-body) !important;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14) !important;
    }

    .register-card-header h1,
    .register-form-heading h2,
    .register-label,
    .auth-page h1,
    .auth-page h2,
    .auth-page h3,
    .auth-page label {
        color: var(--text-heading) !important;
    }

    .register-card-header p,
    .register-form-heading p,
    .register-helper,
    .auth-page p,
    .auth-page .helper-text {
        color: var(--text-secondary) !important;
    }

    .register-page-card input,
    .register-page-card select,
    .register-page-card textarea,
    .auth-page input,
    .auth-page select,
    .auth-page textarea {
        background: var(--bg-surface-alt) !important;
        border-color: #cbd5e1 !important;
        color: var(--text-heading) !important;
    }

    .register-page-card input::placeholder,
    .register-page-card textarea::placeholder,
    .auth-page input::placeholder,
    .auth-page textarea::placeholder {
        color: #94a3b8 !important;
    }

    .register-step-number,
    .step-number {
        background: #e2e8f0 !important;
        border-color: #cbd5e1 !important;
        color: var(--text-secondary) !important;
    }

    .active .register-step-number,
    .register-step.active .register-step-number,
    .active .step-number {
        background: var(--brand-blue) !important;
        border-color: var(--brand-blue) !important;
        color: #ffffff !important;
    }

    .register-back-button,
    .auth-back-button {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: #cbd5e1 !important;
        color: var(--text-body) !important;
    }

    .register-prototype-banner,
    .prototype-banner {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1e40af !important;
    }

    .register-modal-icon,
    .auth-page .success-icon {
        background: #e8f0ff !important;
        border-color: #93c5fd !important;
        color: var(--brand-blue) !important;
    }

    /* Student dashboard. The sidebar remains a strong brand surface while the
       content area follows the device's light appearance. */
    body.student-dashboard {
        background: var(--dash-bg) !important;
        color: var(--dash-text) !important;
    }

    .dashboard-main h1,
    .dashboard-main h2,
    .dashboard-main h3,
    .breadcrumb strong,
    .student-account strong,
    .summary-value,
    .panel-header h2,
    .college-match h3,
    .plan-title,
    .deadline-row strong,
    .document-row strong,
    .document-footer strong,
    .reply-time strong,
    .booking-card h2 {
        color: var(--dash-text) !important;
    }

    .breadcrumb,
    .student-account span,
    .heading-copy,
    .summary-title,
    .summary-help,
    .panel-header p,
    .sort-button:not(.active),
    .college-meta,
    .match-score small,
    .plan-detail,
    .plan-status,
    .deadline-row span,
    .document-row span,
    .reply-time span,
    .document-footer,
    .dashboard-note,
    .booking-card p,
    .booking-slots button:not(.selected),
    .booking-cancel,
    .dashboard-logout {
        color: var(--dash-muted) !important;
    }

    .dashboard-topbar,
    .dashboard-card,
    .dashboard-panel,
    .summary-card {
        background: var(--dash-card) !important;
        border-color: var(--dash-border) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    }

    .college-match {
        background: var(--dash-card-dark) !important;
        border-color: var(--dash-border) !important;
    }

    .summary-title i {
        background: #e8f0ff !important;
        color: var(--dash-blue) !important;
    }

    .summary-progress {
        background: #e2e8f0 !important;
    }

    .sort-button,
    .booking-slots button {
        background: var(--dash-card-dark) !important;
        border-color: #cbd5e1 !important;
    }

    .sort-button.active,
    .booking-slots button.selected {
        background: var(--dash-blue) !important;
        border-color: var(--dash-blue) !important;
        color: #ffffff !important;
    }

    .plan-icon {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: var(--dash-muted) !important;
    }

    .plan-connector {
        background: #cbd5e1 !important;
    }

    .plan-status {
        background: #eef2f7 !important;
    }

    .dashboard-note,
    .booking-card {
        background: var(--dash-card) !important;
        border-color: var(--dash-border) !important;
    }
}

/*
 * Explicit theme state set by device-theme.js. These selectors make the
 * result deterministic even in browsers that do not refresh media-query CSS
 * until a page reload. The media queries above remain as a no-JavaScript
 * fallback.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #0a1526;
    --bg-surface: #101f3d;
    --bg-surface-alt: #0d1830;
    --bg-surface-hover: #1a2c52;
    --text-heading: #ffffff;
    --text-body: #cbd5e1;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-tertiary: #a8b3c7;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --brand-blue: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --shadow-color-strong: rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] body > .page-container {
    background: var(--bg-surface) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 45px var(--shadow-color) !important;
}

html[data-theme="dark"] .page-container h1,
html[data-theme="dark"] .page-container h2,
html[data-theme="dark"] .page-container h3 {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .page-container p,
html[data-theme="dark"] .page-container li,
html[data-theme="dark"] .page-container label {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea {
    background: var(--bg-surface-alt) !important;
    color: var(--text-body) !important;
    border-color: var(--border-strong) !important;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg-page: #f4f7fb;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-surface-hover: #edf4ff;
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-secondary: #64748b;
    --text-muted: #64748b;
    --text-tertiary: #475569;
    --border-color: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.18);
    --brand-blue: #2563eb;
    --shadow-color: rgba(15, 23, 42, 0.08);
    --shadow-color-strong: rgba(15, 23, 42, 0.14);
    --dash-bg: #f4f7fb;
    --dash-side: #0d1b31;
    --dash-card: #ffffff;
    --dash-card-dark: #f8fafc;
    --dash-border: #dbe3ef;
    --dash-text: #172033;
    --dash-muted: #64748b;
    --dash-blue: #2563eb;
    --dash-green: #119669;
    --dash-yellow: #b77907;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: var(--bg-page) !important;
    color: var(--text-body) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] button {
    color-scheme: light;
}

html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--border-color) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .navbar .logo-text,
html[data-theme="light"] .navbar .logo-text span {
    color: var(--text-heading) !important;
}

html[data-theme="light"] .search-nav-btn,
html[data-theme="light"] .shortlist-nav-btn,
html[data-theme="light"] .auth-nav-btn,
html[data-theme="light"] .top-colleges-nav-link,
html[data-theme="light"] .nav-link {
    color: var(--text-body) !important;
}

html[data-theme="light"] .search-nav-btn:hover,
html[data-theme="light"] .shortlist-nav-btn:hover,
html[data-theme="light"] .auth-nav-btn:hover,
html[data-theme="light"] .top-colleges-nav-link:hover,
html[data-theme="light"] .nav-link:hover {
    color: var(--brand-blue) !important;
}

html[data-theme="light"] body > .page-container {
    background: var(--bg-surface) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 45px var(--shadow-color) !important;
}

html[data-theme="light"] .page-container h1,
html[data-theme="light"] .page-container h2,
html[data-theme="light"] .page-container h3 {
    color: var(--text-heading) !important;
}

html[data-theme="light"] .page-container p,
html[data-theme="light"] .page-container li,
html[data-theme="light"] .page-container label {
    color: var(--text-body) !important;
}

html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form textarea {
    background: var(--bg-surface-alt) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="light"] .home-trust-strip {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 16px 36px var(--shadow-color) !important;
}

html[data-theme="light"] .home-trust-item {
    border-color: var(--border-color) !important;
}

html[data-theme="light"] .home-trust-item > i {
    background: #e8f0ff !important;
    color: var(--brand-blue) !important;
}

html[data-theme="light"] .home-trust-item strong {
    color: var(--text-heading) !important;
}

html[data-theme="light"] .home-trust-item small {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] #authModal {
    background: rgba(15, 23, 42, 0.48) !important;
}

html[data-theme="light"] .auth-modal-box {
    background: var(--bg-surface) !important;
    border-color: #dbe3ef !important;
    color: var(--text-heading) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.20) !important;
}

html[data-theme="light"] .auth-modal-title,
html[data-theme="light"] .auth-modal-box h1,
html[data-theme="light"] .auth-modal-box h2,
html[data-theme="light"] .auth-modal-box h3 {
    color: var(--text-heading) !important;
}

html[data-theme="light"] .auth-modal-subtitle,
html[data-theme="light"] .auth-signup-copy {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .auth-modal-icon {
    background: #e8f0ff !important;
    border-color: #93c5fd !important;
    color: var(--brand-blue) !important;
}

html[data-theme="light"] .auth-modal-box .auth-input-shell input {
    background: var(--bg-surface-alt) !important;
    border-color: #cbd5e1 !important;
    color: var(--text-heading) !important;
}

html[data-theme="light"] .auth-modal-box .auth-input-shell > i,
html[data-theme="light"] .auth-modal-box .password-toggle,
html[data-theme="light"] .auth-cancel-action,
html[data-theme="light"] .auth-modal-close {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .auth-forgot-link,
html[data-theme="light"] .auth-signup-copy a {
    color: var(--brand-blue) !important;
}

/* Registration, verification and reset-password pages */
html[data-theme="light"] body.register-page-body,
html[data-theme="light"] .auth-page {
    background:
        radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.08), transparent 34%),
        var(--bg-page) !important;
    color: var(--text-body) !important;
}

html[data-theme="light"] .register-page-card,
html[data-theme="light"] .auth-page .register-page-card {
    background: var(--bg-surface) !important;
    border-color: #dbe3ef !important;
    color: var(--text-body) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .register-page-card .register-back-link,
html[data-theme="light"] .register-login-link,
html[data-theme="light"] .register-login-link strong {
    color: var(--brand-blue) !important;
}

html[data-theme="light"] .register-card-header h1,
html[data-theme="light"] .register-form-heading h2,
html[data-theme="light"] .register-label,
html[data-theme="light"] .auth-page h1,
html[data-theme="light"] .auth-page h2,
html[data-theme="light"] .auth-page h3,
html[data-theme="light"] .auth-page label {
    color: var(--text-heading) !important;
}

html[data-theme="light"] .register-card-header > p:not(.register-card-eyebrow),
html[data-theme="light"] .register-form-heading p,
html[data-theme="light"] .register-label-hint,
html[data-theme="light"] .register-step-label,
html[data-theme="light"] .register-step.active .register-step-label,
html[data-theme="light"] .auth-page p,
html[data-theme="light"] .auth-page .helper-text {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .register-card-eyebrow,
html[data-theme="light"] .register-form-heading > span {
    color: var(--brand-blue) !important;
}

html[data-theme="light"] .register-input,
html[data-theme="light"] .auth-page input,
html[data-theme="light"] .auth-page select,
html[data-theme="light"] .auth-page textarea {
    background: var(--bg-surface-alt) !important;
    border-color: #cbd5e1 !important;
    color: var(--text-heading) !important;
}

html[data-theme="light"] .register-input:hover,
html[data-theme="light"] .register-input:focus,
html[data-theme="light"] .auth-page input:focus,
html[data-theme="light"] .auth-page select:focus,
html[data-theme="light"] .auth-page textarea:focus {
    background: #ffffff !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13) !important;
}

html[data-theme="light"] .register-page-card .password-toggle {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .register-page-card .password-toggle:hover,
html[data-theme="light"] .register-page-card .password-toggle:focus-visible {
    color: var(--brand-blue) !important;
    background: #e8f0ff !important;
}

html[data-theme="light"] .register-proto-banner {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #475569 !important;
}

html[data-theme="light"] .register-proto-banner i,
html[data-theme="light"] .register-proto-banner strong {
    color: #1e40af !important;
}

html[data-theme="light"] .register-step:not(:last-child)::after {
    background: #cbd5e1 !important;
}

html[data-theme="light"] .register-step.active:not(:last-child)::after,
html[data-theme="light"] .register-step.done:not(:last-child)::after {
    background: var(--brand-blue) !important;
}

html[data-theme="light"] .register-step-num {
    border-color: #cbd5e1 !important;
    color: var(--text-secondary) !important;
    background: #eef2f7 !important;
}

html[data-theme="light"] .register-step.active .register-step-num,
html[data-theme="light"] .register-step.done .register-step-num {
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
    background: var(--brand-blue) !important;
}

html[data-theme="light"] .register-back-btn {
    border-color: #cbd5e1 !important;
    color: var(--text-body) !important;
    background: #f8fafc !important;
}

html[data-theme="light"] .register-back-btn:hover {
    border-color: var(--brand-blue) !important;
    color: var(--brand-blue) !important;
    background: #eff6ff !important;
}

html[data-theme="light"] .register-page-card .field-error-msg {
    color: #b91c1c !important;
}

html[data-theme="light"] .register-input.input-error {
    border-color: #dc2626 !important;
}

html[data-theme="light"] .register-page-card .auth-message.error {
    border-color: #fecaca !important;
    color: #991b1b !important;
    background: #fef2f2 !important;
}

/* Dashboard content follows the device while the branded sidebar stays dark. */
html[data-theme="light"] body.student-dashboard {
    background: var(--dash-bg) !important;
    color: var(--dash-text) !important;
}

html[data-theme="light"] .dashboard-topbar,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .summary-card {
    background: var(--dash-card) !important;
    border-color: var(--dash-border) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] .dashboard-main h1,
html[data-theme="light"] .dashboard-main h2,
html[data-theme="light"] .dashboard-main h3,
html[data-theme="light"] .breadcrumb strong,
html[data-theme="light"] .student-account strong,
html[data-theme="light"] .summary-value,
html[data-theme="light"] .deadline-row strong,
html[data-theme="light"] .document-row strong,
html[data-theme="light"] .reply-time strong {
    color: var(--dash-text) !important;
}

html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .student-account span,
html[data-theme="light"] .heading-copy,
html[data-theme="light"] .summary-title,
html[data-theme="light"] .summary-help,
html[data-theme="light"] .college-meta,
html[data-theme="light"] .plan-detail,
html[data-theme="light"] .deadline-row span,
html[data-theme="light"] .document-row span,
html[data-theme="light"] .dashboard-note {
    color: var(--dash-muted) !important;
}

html[data-theme="light"] .college-match,
html[data-theme="light"] .sort-button,
html[data-theme="light"] .booking-slots button {
    background: var(--dash-card-dark) !important;
    border-color: var(--dash-border) !important;
}

html[data-theme="light"] .summary-progress {
    background: #e2e8f0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none !important;
    }
}