/* ==========================================================
   AI-CRIMS LOGIN — PREMIUM ACADEMIC LIGHT THEME
   ==========================================================
   Scope: templates/auth/login/login.html ONLY.
   This file is linked only from the login template and every
   rule below is namespaced under body.login-light-theme, so it
   cannot leak onto the landing page or any other screen.

   It is a pure visual layer: it does not touch markup structure,
   IDs, classes, form actions/methods, input names, or JS. Any
   existing dark-theme rule this overrides simply loses the
   cascade because this stylesheet loads last.
   ========================================================== */

body.login-light-theme {
    --lt-bg-0: #F3F7FF;
    --lt-bg-1: #EDF1FF;
    --lt-bg-2: #F7F5FF;

    --lt-blue: #3E7BFA;
    --lt-blue-deep: #2354D6;
    --lt-cyan: #22D3EE;
    --lt-violet: #8B5CF6;
    --lt-lavender: #B49BFF;

    --lt-text: #1B2545;
    --lt-text-soft: #4B577C;
    --lt-muted: #7C88AC;
    --lt-line: rgba(92, 133, 235, .22);

    --lt-card-bg: rgba(255, 255, 255, .60);
    --lt-card-border: rgba(255, 255, 255, .75);
    --lt-field-bg: rgba(255, 255, 255, .72);

    color: var(--lt-text);
}

/* ---------------------------------------------------------
   PAGE BACKGROUND — off-white with soft blue/cyan/lavender
   ambient lighting, blurred gradient circles and a faint
   academic dot grid.
--------------------------------------------------------- */

body.login-light-theme {
    background:
        radial-gradient(38% 32% at 10% 8%, rgba(62, 123, 250, .16), transparent 68%),
        radial-gradient(34% 30% at 92% 6%, rgba(139, 92, 246, .14), transparent 68%),
        radial-gradient(40% 38% at 88% 92%, rgba(34, 211, 238, .13), transparent 70%),
        radial-gradient(34% 30% at 6% 94%, rgba(180, 155, 255, .12), transparent 70%),
        linear-gradient(160deg, #F8FAFF 0%, #F2F5FF 45%, #F6F2FF 100%) !important;
}

body.login-light-theme::before {
    background: none !important;
}

body.login-light-theme .scene {
    background:
        radial-gradient(3px 3px at 8% 22%, rgba(62, 123, 250, .35), transparent 100%),
        radial-gradient(3px 3px at 18% 68%, rgba(139, 92, 246, .32), transparent 100%),
        radial-gradient(3px 3px at 32% 12%, rgba(34, 211, 238, .35), transparent 100%),
        radial-gradient(3px 3px at 48% 82%, rgba(62, 123, 250, .3), transparent 100%),
        radial-gradient(3px 3px at 64% 30%, rgba(139, 92, 246, .3), transparent 100%),
        radial-gradient(3px 3px at 78% 60%, rgba(34, 211, 238, .3), transparent 100%),
        radial-gradient(3px 3px at 90% 20%, rgba(62, 123, 250, .3), transparent 100%),
        radial-gradient(3px 3px at 94% 78%, rgba(139, 92, 246, .3), transparent 100%),
        radial-gradient(46% 40% at 12% 14%, rgba(62, 123, 250, .16), transparent 70%),
        radial-gradient(40% 36% at 88% 22%, rgba(139, 92, 246, .14), transparent 70%),
        radial-gradient(120% 90% at 50% 100%, #F5F8FF 0%, #EEF2FF 55%, #F7F4FF 100%) !important;
    background-size:
        220px 220px, 260px 260px, 200px 200px, 240px 240px,
        230px 230px, 250px 250px, 210px 210px, 245px 245px,
        auto, auto, auto !important;
}

body.login-light-theme .scene::before {
    display: none !important;
}

body.login-light-theme .scene::after {
    opacity: .05 !important;
    background-image:
        linear-gradient(120deg, transparent 0 47%, rgba(62, 123, 250, .5) 48%, transparent 49%),
        linear-gradient(35deg, transparent 0 48%, rgba(139, 92, 246, .4) 49%, transparent 50%) !important;
}

body.login-light-theme .beam {
    opacity: 0 !important;
    display: none !important;
}

body.login-light-theme #graphCanvas {
    opacity: .32 !important;
    mix-blend-mode: multiply;
}

body.login-light-theme .ai-life-canvas {
    opacity: .38 !important;
    mix-blend-mode: multiply;
}

/* Large soft blurred "blob" circles for depth, drifting gently. */
body.login-light-theme .scene::after,
body.login-light-theme .shell::before,
body.login-light-theme .shell::after {
    content: "";
}

body.login-light-theme .shell {
    position: relative;
    z-index: 3;
}

body.login-light-theme .shell::before {
    position: fixed;
    width: 460px;
    height: 460px;
    left: -160px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 123, 250, .20), rgba(62, 123, 250, .05) 45%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
    z-index: -1;
    animation: ltBlobFloat 14s ease-in-out infinite alternate;
}

body.login-light-theme .shell::after {
    position: fixed;
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .18), rgba(34, 211, 238, .06) 45%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
    z-index: -1;
    animation: ltBlobFloat 16s ease-in-out infinite alternate-reverse;
}

@keyframes ltBlobFloat {
    from { transform: translate3d(0, 0, 0) scale(.94); }
    to   { transform: translate3d(24px, -18px, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    body.login-light-theme .shell::before,
    body.login-light-theme .shell::after {
        animation: none !important;
    }
}

/* ---------------------------------------------------------
   LEFT PANEL — brand, headline, feature cards
--------------------------------------------------------- */

body.login-light-theme .promo-logo {
    background: #fff !important;
    border: 1px solid rgba(62, 123, 250, .25) !important;
    box-shadow: 0 10px 30px -8px rgba(62, 123, 250, .35), 0 0 0 5px rgba(62, 123, 250, .06) !important;
}

body.login-light-theme .promo-brand-name {
    color: var(--lt-text) !important;
}

body.login-light-theme .promo-brand-sub {
    color: var(--lt-muted) !important;
}

body.login-light-theme .promo-badge {
    background: linear-gradient(120deg, rgba(62, 123, 250, .12), rgba(139, 92, 246, .12)) !important;
    border: 1px solid rgba(62, 123, 250, .25) !important;
    color: var(--lt-blue-deep) !important;
}

body.login-light-theme .promo-badge i {
    color: var(--lt-violet) !important;
}

body.login-light-theme .promo-headline {
    color: var(--lt-text) !important;
}

body.login-light-theme .promo-headline span {
    background: linear-gradient(120deg, var(--lt-blue) 0%, var(--lt-violet) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.login-light-theme .promo-text {
    color: var(--lt-text-soft) !important;
}

body.login-light-theme .feature-card {
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    box-shadow:
        0 14px 34px -14px rgba(62, 90, 160, .22),
        inset 0 1px 0 rgba(255, 255, 255, .6) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.login-light-theme .feature-card:hover {
    border-color: rgba(62, 123, 250, .35) !important;
    box-shadow:
        0 18px 40px -14px rgba(62, 90, 160, .28),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

body.login-light-theme .feature-icon {
    background: linear-gradient(140deg, rgba(62, 123, 250, .18), rgba(139, 92, 246, .14)) !important;
    border: 1px solid rgba(62, 123, 250, .22) !important;
    color: var(--lt-blue-deep) !important;
}

/* Give each of the four cards a distinct, elegant icon tint,
   matching the reference: blue, violet, teal, lavender. */
body.login-light-theme .feature-card:nth-of-type(1) .feature-icon {
    background: linear-gradient(140deg, rgba(62, 123, 250, .20), rgba(34, 211, 238, .12)) !important;
    border-color: rgba(62, 123, 250, .28) !important;
    color: #2E6BEE !important;
}

body.login-light-theme .feature-card:nth-of-type(2) .feature-icon {
    background: linear-gradient(140deg, rgba(139, 92, 246, .20), rgba(180, 155, 255, .14)) !important;
    border-color: rgba(139, 92, 246, .28) !important;
    color: #7C4DEB !important;
}

body.login-light-theme .feature-card:nth-of-type(3) .feature-icon {
    background: linear-gradient(140deg, rgba(34, 211, 238, .22), rgba(62, 123, 250, .12)) !important;
    border-color: rgba(34, 211, 238, .3) !important;
    color: #0EA5B7 !important;
}

body.login-light-theme .feature-card:nth-of-type(4) .feature-icon {
    background: linear-gradient(140deg, rgba(180, 155, 255, .22), rgba(139, 92, 246, .12)) !important;
    border-color: rgba(180, 155, 255, .32) !important;
    color: #8B5CF6 !important;
}/* Mobile visual refinements. Layout/order is centralized in auth-shared.css. */
@media (max-width: 940px) {
    body.login-light-theme .promo-headline {
        font-size: clamp(40px, 8vw, 54px) !important;
    }
    body.login-light-theme .promo-text { margin-bottom: 22px !important; }
    body.login-light-theme .card { padding: 28px 24px !important; }
}

/* ---------------------------------------------------------
   AUTH CARD — large glass panel
--------------------------------------------------------- */

body.login-light-theme .card-glow {
    display: block !important;
    background: linear-gradient(135deg, rgba(62, 123, 250, .55), rgba(34, 211, 238, .18) 40%, rgba(139, 92, 246, .5)) !important;
    opacity: .55 !important;
    filter: blur(2px);
}

body.login-light-theme .card {
    background:
        radial-gradient(340px 200px at 100% 0%, rgba(139, 92, 246, .10), transparent 70%),
        radial-gradient(300px 200px at 0% 100%, rgba(34, 211, 238, .08), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58)) !important;
    border: 1px solid var(--lt-card-border) !important;
    box-shadow:
        0 30px 70px -24px rgba(62, 90, 160, .35),
        0 0 0 1px rgba(62, 123, 250, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

body.login-light-theme .card::before {
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(62, 123, 250, .10), transparent 60%) !important;
}

body.login-light-theme .card::after {
    background: linear-gradient(120deg, transparent 0 24%, rgba(34, 211, 238, .10) 38%, rgba(139, 92, 246, .12) 48%, transparent 64%) !important;
    opacity: .5 !important;
}

body.login-light-theme .brand-mark {
    background: #fff !important;
    border: 1px solid rgba(62, 123, 250, .28) !important;
    box-shadow: 0 8px 22px -8px rgba(62, 123, 250, .35) !important;
}

body.login-light-theme .brand-tag {
    color: var(--lt-muted) !important;
}

body.login-light-theme h1.headline {
    color: var(--lt-text) !important;
}

body.login-light-theme h1.headline .accent {
    background: linear-gradient(120deg, var(--lt-blue), var(--lt-violet)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.login-light-theme .sub {
    color: var(--lt-muted) !important;
}

/* Tabs */

body.login-light-theme .auth-tabs {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid rgba(62, 123, 250, .18) !important;
}

body.login-light-theme .auth-tab {
    color: var(--lt-muted) !important;
}

body.login-light-theme .auth-tab.active {
    color: #fff !important;
    background: linear-gradient(100deg, var(--lt-blue), var(--lt-violet)) !important;
    box-shadow: 0 6px 16px -4px rgba(62, 123, 250, .45) !important;
}

body.login-light-theme .auth-tab-indicator {
    display: none !important;
}

/* Fields */

body.login-light-theme .field-box {
    background: var(--lt-field-bg) !important;
    border: 1.5px solid rgba(62, 123, 250, .18) !important;
}

body.login-light-theme .field-box i {
    color: var(--lt-muted) !important;
}

body.login-light-theme .field-box input,
body.login-light-theme .card input,
body.login-light-theme .card select {
    color: var(--lt-text) !important;
    background: transparent !important;
}

body.login-light-theme .field label {
    color: var(--lt-muted) !important;
}

body.login-light-theme .field-box:focus-within {
    border-color: var(--lt-blue) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 0 0 4px rgba(62, 123, 250, .12) !important;
}

body.login-light-theme .field-box:focus-within + label,
body.login-light-theme .field.filled label,
body.login-light-theme .field input:not(:placeholder-shown) ~ label,
body.login-light-theme .field-box:has(input:not(:placeholder-shown)) + label {
    color: var(--lt-blue-deep) !important;
    background: linear-gradient(180deg, transparent 45%, #F8FAFF 45%) !important;
}

body.login-light-theme .toggle-password {
    color: var(--lt-muted) !important;
}

body.login-light-theme .toggle-password:hover {
    color: var(--lt-blue) !important;
}

body.login-light-theme .field-hint {
    color: var(--lt-muted) !important;
}

/* Sign Up panel — Program/Section style dropdowns */

body.login-light-theme .field.field-select label {
    color: var(--lt-muted) !important;
}

body.login-light-theme .field-select .field-box select {
    color-scheme: light;
    color: var(--lt-text) !important;
}

body.login-light-theme .field-select .field-box select option {
    background-color: #fff !important;
    color: var(--lt-text) !important;
}

/* Remember / forgot */

body.login-light-theme .remember {
    color: var(--lt-text-soft) !important;
}

body.login-light-theme .remember input {
    accent-color: var(--lt-blue) !important;
}

body.login-light-theme .forgot {
    color: var(--lt-muted) !important;
}

body.login-light-theme .forgot:hover {
    color: var(--lt-blue) !important;
}

/* Submit button */

body.login-light-theme .submit-btn,
body.login-light-theme .card button[type="submit"],
body.login-light-theme .card .btn-primary {
    background: linear-gradient(100deg, var(--lt-blue) 0%, #6E6BF0 50%, var(--lt-violet) 100%) !important;
    color: #fff !important;
    box-shadow:
        0 14px 30px -10px rgba(62, 123, 250, .45),
        0 0 0 1px rgba(255, 255, 255, .12) inset !important;
}

body.login-light-theme .submit-btn:hover,
body.login-light-theme .card button[type="submit"]:hover,
body.login-light-theme .card .btn-primary:hover {
    box-shadow:
        0 18px 36px -10px rgba(62, 123, 250, .55),
        0 0 0 1px rgba(255, 255, 255, .16) inset !important;
}

/* Alert / role buttons / divider / google button (kept light-safe
   in case those panels are ever re-enabled on this page) */

body.login-light-theme .alert {
    background: rgba(248, 113, 113, .10) !important;
    border-color: rgba(248, 113, 113, .3) !important;
    color: #C5342A !important;
}

body.login-light-theme .role-btn {
    background: rgba(255, 255, 255, .55) !important;
    border-color: rgba(62, 123, 250, .18) !important;
    color: var(--lt-text-soft) !important;
}

body.login-light-theme .role-btn:hover {
    color: var(--lt-text) !important;
    border-color: rgba(62, 123, 250, .35) !important;
}

body.login-light-theme .role-btn.active {
    background: linear-gradient(160deg, rgba(62, 123, 250, .18), rgba(139, 92, 246, .12)) !important;
    border-color: var(--lt-blue) !important;
    color: var(--lt-blue-deep) !important;
}

body.login-light-theme .role-label {
    color: var(--lt-muted) !important;
}

body.login-light-theme .divider {
    color: var(--lt-muted) !important;
}

body.login-light-theme .divider::before,
body.login-light-theme .divider::after {
    background: rgba(62, 123, 250, .18) !important;
}

body.login-light-theme .google-btn {
    background: rgba(255, 255, 255, .6) !important;
    border-color: rgba(62, 123, 250, .18) !important;
    color: var(--lt-text) !important;
}

/* Footer links */

body.login-light-theme .login-footer {
    border-top-color: rgba(62, 123, 250, .16) !important;
}

body.login-light-theme .foot {
    color: var(--lt-muted) !important;
}

body.login-light-theme .foot a,
body.login-light-theme .switch-tab {
    color: var(--lt-blue) !important;
}

body.login-light-theme .foot a:hover,
body.login-light-theme .switch-tab:hover {
    color: var(--lt-blue-deep) !important;
}

body.login-light-theme .login-footer .back-to-home {
    color: var(--lt-muted) !important;
}

body.login-light-theme .login-footer .back-to-home:hover {
    color: var(--lt-blue) !important;
}

body.login-light-theme .back-to-landing {
    color: var(--lt-text-soft) !important;
    background: rgba(255, 255, 255, .7) !important;
    border-color: rgba(62, 123, 250, .22) !important;
}

body.login-light-theme .back-to-landing:hover {
    color: var(--lt-blue-deep) !important;
    background: rgba(255, 255, 255, .9) !important;
    border-color: rgba(62, 123, 250, .4) !important;
}

/* ::selection stays legible on a light surface */
body.login-light-theme ::selection {
    background: rgba(62, 123, 250, .22);
    color: var(--lt-text);
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 940px) {
    body.login-light-theme .shell::before,
    body.login-light-theme .shell::after {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 600px) {
    body.login-light-theme {
        background:
            radial-gradient(60% 40% at 50% 0%, rgba(62, 123, 250, .14), transparent 55%),
            #F5F8FF !important;
    }
}

/* Authentication layout is centralized in auth-shared.css. */

/* Medium desktop visual refinements. Layout is centralized in auth-shared.css. */
@media (min-width: 941px) and (max-width: 1200px) {
    body.login-light-theme .promo-text { max-width: 500px !important; }
    body.login-light-theme .feature-card { min-height: 108px !important; }
}

/* Mobile visual refinements. Layout/order is centralized in auth-shared.css. */
@media (max-width: 940px) {
    body.login-light-theme .promo-headline {
        font-size: clamp(40px, 8vw, 54px) !important;
    }
    body.login-light-theme .promo-text { margin-bottom: 22px !important; }
    body.login-light-theme .card { padding: 28px 24px !important; }
}

@media (max-width: 600px) {
    body.login-light-theme .shell {
        width: calc(100% - 24px) !important;
        padding-top: 24px !important;
        gap: 22px !important;
    }

    body.login-light-theme .promo-brand {
        margin-bottom: 22px !important;
    }

    body.login-light-theme .promo-brand-sub {
        font-size: 8px !important;
    }

    body.login-light-theme .promo-headline {
        font-size: 38px !important;
    }

    body.login-light-theme .promo-features {
        gap: 9px !important;
    }

    body.login-light-theme .feature-card {
        min-height: 104px !important;
        padding: 13px !important;
    }

    body.login-light-theme .feature-desc {
        font-size: 10.5px !important;
    }

    body.login-light-theme .promo-illustration {
        max-width: 210px !important;
    }

    body.login-light-theme .card {
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login-light-theme .promo-illustration {
        animation: none !important;
    }
}