/*
 * EduSchedX Login Authentication UI
 * Consolidated from the tested compact-login and forgot-password patches.
 * Generated: 08/08/2026 20:35:49
 */

/* ==================================================
   SOURCE: .\public\css\login-steady-compact-v3.css
   ================================================== */

/* EduSchedX Login - Steady Compact Desktop V3
   Keeps the V2 compact sizing but prevents the visible full-size -> zoom-out jump. */

/* Hide the page only during the first DOM setup so the user sees the final size immediately. */


html.edx-login-preparing body {
    visibility: hidden !important;
}

@media (min-width: 821px) {
    .edx-login-compact-target {
        transform: scale(.70) !important;
        transform-origin: center center !important;

        /* No animation: the card must stay visually steady. */
        transition: none !important;
        animation: none !important;
    }
}

/* Mid-size desktop/laptop windows */
@media (min-width: 821px) and (max-width: 1399px) {
    .edx-login-compact-target {
        transform: scale(.76) !important;
    }
}

/* Smaller laptop windows */
@media (min-width: 821px) and (max-width: 1100px) {
    .edx-login-compact-target {
        transform: scale(.82) !important;
    }
}

/* Preserve the existing mobile layout. */
@media (max-width: 820px) {
    .edx-login-compact-target {
        transform: none !important;
    }
}

/* Do not animate the compact card if existing login CSS has generic transitions. */
.edx-login-compact-target,
.edx-login-compact-target * {
    transition-property:
        color,
        background-color,
        border-color,
        box-shadow,
        opacity !important;
}


/* ==================================================
   SOURCE: .\public\css\login-forgot-flip-v4.css
   ================================================== */

/* EduSchedX Auth Flip V4
   Adds an in-place Forgot Password face to the EXISTING right side of the login card.
   The campus background and outer compact card never scale or move during the switch. */

.edx-auth-pane {
    position: relative !important;
    overflow: hidden !important;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition:
        transform 170ms cubic-bezier(.2,.75,.25,1),
        opacity 170ms ease !important;
}

.edx-auth-pane.edx-half-flip {
    transform: perspective(1200px) rotateY(-7deg) !important;
    opacity: .62;
}

.edx-forgot-face {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(26px, 4vw, 62px);

    background:
        radial-gradient(circle at 72% 58%, rgba(255, 205, 55, .13), transparent 34%),
        radial-gradient(circle at 78% 14%, rgba(36, 130, 81, .08), transparent 30%),
        #f8f8f4;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: perspective(1100px) rotateY(9deg);
    transform-origin: left center;

    transition:
        opacity 190ms ease,
        transform 220ms cubic-bezier(.2,.75,.25,1),
        visibility 0s linear 220ms !important;
}

.edx-forgot-face.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: perspective(1100px) rotateY(0deg);

    transition:
        opacity 190ms ease,
        transform 220ms cubic-bezier(.2,.75,.25,1),
        visibility 0s linear 0s !important;
}

.edx-forgot-inner {
    width: min(100%, 620px);
    margin: 0 auto;
}

.edx-forgot-back {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0 0 34px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    background: transparent;
    color: #167440;

    font: inherit;
    font-size: .94rem;
    font-weight: 800;

    cursor: pointer;
}

.edx-forgot-back:hover,
.edx-forgot-back:focus-visible {
    color: #0d4d2a;
    outline: none;
}

.edx-forgot-back .edx-arrow {
    font-size: 1.2em;
    line-height: 1;
}

.edx-forgot-eyebrow {
    margin: 0 0 14px;

    color: #677168;

    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.edx-forgot-title {
    margin: 0;

    color: #082d1b;

    font-size: clamp(2.15rem, 4vw, 3.55rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .98;
}

.edx-forgot-copy {
    max-width: 560px;
    margin: 18px 0 28px;

    color: #5d685f;

    font-size: .98rem;
    line-height: 1.65;
}

.edx-forgot-form {
    margin-top: 2px;
}

.edx-forgot-label {
    display: block;
    margin: 0 0 8px;

    color: #143622;

    font-size: .94rem;
    font-weight: 800;
}

.edx-forgot-input-wrap {
    position: relative;
}

.edx-forgot-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);

    color: #1a7b45;

    font-size: 1rem;
    line-height: 1;

    pointer-events: none;
}

.edx-forgot-input {
    width: 100%;
    min-height: 58px;

    box-sizing: border-box;
    padding: 0 18px 0 48px;

    border: 1px solid rgba(23, 70, 43, .28);
    border-radius: 4px;

    background: rgba(255, 255, 255, .88);
    color: #143622;

    font: inherit;
    font-size: 1rem;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

.edx-forgot-input:focus {
    border-color: #1a7b45;
    box-shadow: 0 0 0 3px rgba(26, 123, 69, .10);
}

.edx-forgot-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 20px;

    border: 0;
    border-radius: 4px;

    background: linear-gradient(180deg, #25894f, #13713d);
    color: #ffffff;

    font: inherit;
    font-size: 1rem;
    font-weight: 900;

    box-shadow: 0 15px 28px rgba(12, 77, 40, .13);

    cursor: pointer;

    transition:
        filter .15s ease,
        box-shadow .15s ease !important;
}

.edx-forgot-submit:hover,
.edx-forgot-submit:focus-visible {
    filter: brightness(1.035);
    box-shadow: 0 16px 30px rgba(12, 77, 40, .18);
    outline: none;
}

.edx-forgot-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.edx-forgot-message {
    display: none;
    margin: 16px 0 0;
    padding: 12px 14px;

    border-radius: 5px;

    font-size: .9rem;
    line-height: 1.45;
}

.edx-forgot-message.is-visible {
    display: block;
}

.edx-forgot-message.is-error {
    border: 1px solid rgba(163, 42, 42, .18);
    background: rgba(163, 42, 42, .07);
    color: #8f2929;
}

.edx-forgot-message.is-success {
    border: 1px solid rgba(20, 116, 64, .18);
    background: rgba(20, 116, 64, .07);
    color: #12673a;
}

/* Keep the same mobile behavior as the existing auth page. */
@media (max-width: 820px) {
    .edx-forgot-face {
        padding: 28px 22px;
    }

    .edx-forgot-back {
        margin-bottom: 24px;
    }

    .edx-forgot-title {
        font-size: 2.35rem;
    }
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .edx-auth-pane,
    .edx-forgot-face {
        transition: none !important;
    }

    .edx-auth-pane.edx-half-flip,
    .edx-forgot-face,
    .edx-forgot-face.is-active {
        transform: none !important;
    }
}


/* ==================================================
   SOURCE: .\public\css\login-forgot-match-v5.css
   ================================================== */

/* EduSchedX Forgot Password - Match Login V5
   Keeps the V4 flip behavior but makes the reset face visually inherit
   the same typography, colors, spacing language, and control styling
   used by the existing login form. */

.edx-forgot-face {
    /* JS also copies the computed right-pane background at runtime. */
    background-color: inherit !important;
}

.edx-forgot-inner {
    width: min(100%, 620px);
}

.edx-forgot-back,
.edx-forgot-eyebrow,
.edx-forgot-title,
.edx-forgot-copy,
.edx-forgot-label,
.edx-forgot-input,
.edx-forgot-submit {
    font-family: inherit;
}

.edx-forgot-back {
    text-decoration: none !important;
}

.edx-forgot-back .edx-arrow {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

.edx-forgot-title {
    max-width: 100%;
}

.edx-forgot-input,
.edx-forgot-submit {
    box-sizing: border-box;
}

.edx-forgot-submit {
    text-align: center;
}

@media (max-width: 820px) {
    .edx-forgot-inner {
        width: 100%;
    }
}


/* ==================================================
   SOURCE: .\public\css\login-forgot-overlap-fix-v6.css
   ================================================== */

/* EduSchedX Forgot Password Overlap Fix V6
   Keeps the existing V3 compact size + V4 flip + V5 matching styles.
   Fixes only the overlapping login content underneath the reset form. */

.edx-auth-pane.edx-forgot-open > :not(.edx-forgot-face) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The reset face must be fully opaque so the login form cannot bleed through. */
.edx-auth-pane .edx-forgot-face {
    background:
        radial-gradient(circle at 72% 58%, rgba(255, 205, 55, .10), transparent 34%),
        radial-gradient(circle at 78% 14%, rgba(36, 130, 81, .06), transparent 30%),
        #f8f8f4 !important;
}

/* Keep the reset content above every hidden login element. */
.edx-auth-pane .edx-forgot-face.is-active {
    z-index: 100 !important;
}

/* Preserve a clean transition without resizing the outer card/background. */
.edx-auth-pane.edx-forgot-open {
    overflow: hidden !important;
}


/* ==================================================
   SOURCE: .\public\css\login-forgot-validation-v7.css
   ================================================== */

/* EduSchedX V7 - Compact forgot-password validation
   Error messages sit directly below the email field instead of appearing
   as a large alert block below the form. */

.edx-forgot-message {
    max-width: 100%;
    box-sizing: border-box;
}

/* Validation error: simple inline helper under the email field */
.edx-forgot-message.is-error {
    margin: 7px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #a12626 !important;

    font-family: inherit !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Successful reset request can still be a small status notice */
.edx-forgot-message.is-success {
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;

    border: 1px solid rgba(20, 116, 64, .16) !important;
    border-radius: 5px !important;
    background: rgba(20, 116, 64, .06) !important;

    color: #12673a !important;

    font-family: inherit !important;
    font-size: .82rem !important;
    line-height: 1.4 !important;
}


/* EDUSCHEDX_SMOOTH_AUTH_FLIP_START */

/*
 * Smooth Login <-> Forgot Password transition only.
 * Does not resize or redesign the auth card.
 */

.edx-auth-pane {
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    perspective: 1400px !important;

    transition:
        transform 280ms cubic-bezier(.22,.61,.36,1),
        opacity 240ms ease !important;

    will-change: transform, opacity;
}

.edx-auth-pane.edx-half-flip {
    transform:
        perspective(1400px)
        rotateY(-10deg)
        scale(.995) !important;

    opacity: .74 !important;
}

/* Forgot-password face enters gently instead of appearing suddenly */
.edx-forgot-face {
    transform:
        perspective(1400px)
        rotateY(10deg)
        translateX(8px) !important;

    transform-origin: center center !important;
    backface-visibility: hidden !important;

    transition:
        opacity 260ms ease,
        transform 300ms cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 300ms !important;

    will-change: transform, opacity;
}

.edx-forgot-face.is-active {
    opacity: 1 !important;

    transform:
        perspective(1400px)
        rotateY(0deg)
        translateX(0) !important;

    transition:
        opacity 260ms ease,
        transform 300ms cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 0s !important;
}

/* Smooth the original login content around the midpoint */
.edx-auth-pane > :not(.edx-forgot-face) {
    transition:
        opacity 220ms ease,
        visibility 0s linear 220ms !important;
}

.edx-auth-pane:not(.edx-forgot-open) > :not(.edx-forgot-face) {
    opacity: 1;
    visibility: visible;
}

/* Prevent repeated clicks while the animation is running */
.edx-auth-pane.edx-is-flipping {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .edx-auth-pane,
    .edx-forgot-face,
    .edx-auth-pane > :not(.edx-forgot-face) {
        transition: none !important;
    }
}

/* EDUSCHEDX_SMOOTH_AUTH_FLIP_END */


/* ============================================================
   INLINE FORGOT PASSWORD - SAME GLASS SURFACE
   ============================================================ */

.login-glass-page .edx-forgot-face {
    color: #F8FAF8;
    background:
        linear-gradient(
            145deg,
            rgba(24, 36, 32, .62),
            rgba(43, 47, 44, .48)
        ) !important;
    border: 0 !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.login-glass-page .edx-forgot-eyebrow {
    color: #FDC530 !important;
}

.login-glass-page .edx-forgot-title,
.login-glass-page .edx-forgot-copy,
.login-glass-page .edx-forgot-label,
.login-glass-page .edx-forgot-back {
    color: #F8FAF8 !important;
}

.login-glass-page .edx-forgot-input {
    color: #17231C !important;
    background: rgba(255,255,255,.84) !important;
    border-color: rgba(255,255,255,.50) !important;
}

.login-glass-page .edx-forgot-submit {
    color: #FFFFFF !important;
    background: #146939 !important;
    border-radius: 9px !important;
}

.login-glass-page .edx-forgot-submit:hover,
.login-glass-page .edx-forgot-submit:focus-visible {
    background: #1C7B48 !important;
}


/* ============================================================
   INLINE FORGOT PASSWORD - EXACT SAME LOGIN CARD
   Clicking "Forgot password?" changes only the content face.
   The outer Login card does not resize/reposition.
   ============================================================ */

.login-glass-page .edx-auth-pane {
    position: relative !important;
}

/* Use the Login auth-panel glass underneath; do not paint a different card. */
.login-glass-page .edx-forgot-face,
.login-glass-page .edx-auth-pane .edx-forgot-face {
    position: absolute !important;
    inset: 0 !important;
    z-index: 100 !important;
    padding: inherit !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Same content width and left edge as Login content. */
.login-glass-page .edx-forgot-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Back to Login sits in the same visual position as Back to Welcome. */
.login-glass-page .edx-forgot-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    margin: 0 0 1.45rem !important;
    padding: 0 !important;

    color: #F8FAF8 !important;
    background: transparent !important;
    border: 0 !important;

    font-size: .88rem !important;
    font-weight: 760 !important;
}

.login-glass-page .edx-forgot-back .edx-arrow {
    color: #FDC530 !important;
}

/* Match Login heading vertical rhythm. */
.login-glass-page .edx-forgot-eyebrow {
    margin: 0 0 .62rem !important;
    color: #FDC530 !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.login-glass-page .edx-forgot-title {
    margin: 0 0 .72rem !important;
    color: #FFFFFF !important;
    font-size: clamp(2.15rem, 4.2vw, 3.35rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
}

.login-glass-page .edx-forgot-copy {
    max-width: 31rem !important;
    margin: 0 0 1.35rem !important;
    color: rgba(255,255,255,.86) !important;
    font-size: .93rem !important;
    line-height: 1.5 !important;
}

.login-glass-page .edx-forgot-label {
    margin: 0 0 8px !important;
    color: #F8FAF8 !important;
    font-size: .9rem !important;
    font-weight: 760 !important;
}

/* Same translucent field treatment as Login. */
.login-glass-page .edx-forgot-input {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px 0 48px !important;

    color: #17231C !important;
    background: rgba(247,250,247,.62) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 5px !important;

    -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
    backdrop-filter: blur(10px) saturate(1.02) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 3px 12px rgba(0,0,0,.035) !important;
}

.login-glass-page .edx-forgot-input::placeholder {
    color: rgba(29,42,34,.56) !important;
}

/* Same button width/placement as Login button. */
.login-glass-page .edx-forgot-submit {
    width: 100% !important;
    min-height: 58px !important;
    margin: 20px 0 0 !important;
    padding: 0 16px !important;

    color: #FFFFFF !important;
    background: #146939 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 22px rgba(8,62,35,.20) !important;
}

/*
 * Mobile: keep the same outer Login card.
 * The reset face can scroll internally if needed, but the button is not clipped.
 */
@media (max-width: 767.98px) {
    .login-glass-page .edx-auth-pane.edx-forgot-open {
        position: relative !important;
        overflow: hidden !important;
    }

    .login-glass-page .edx-auth-pane.edx-forgot-open .edx-forgot-face {
        position: absolute !important;
        inset: 0 !important;
        min-height: 100% !important;
        height: 100% !important;
        padding: 22px 18px 28px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: inherit !important;
    }

    .login-glass-page .edx-forgot-back {
        margin-bottom: 1.05rem !important;
        font-size: .84rem !important;
    }

    .login-glass-page .edx-forgot-title {
        font-size: clamp(1.95rem, 9.5vw, 2.45rem) !important;
    }

    .login-glass-page .edx-forgot-copy {
        margin-bottom: 1.05rem !important;
        font-size: .88rem !important;
        line-height: 1.46 !important;
    }

    .login-glass-page .edx-forgot-input {
        min-height: 50px !important;
    }

    .login-glass-page .edx-forgot-submit {
        min-height: 50px !important;
        margin-top: 14px !important;
        position: static !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    .login-glass-page .edx-auth-pane.edx-forgot-open .edx-forgot-face {
        padding: 19px 14px 24px !important;
    }

    .login-glass-page .edx-forgot-title {
        font-size: 1.95rem !important;
    }

    .login-glass-page .edx-forgot-submit {
        min-height: 48px !important;
    }
}

/* Keep inline Forgot Password visually consistent with transparent Login fields. */
.login-glass-page .edx-forgot-input {
    color: #F7FAF7 !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.04) !important;
    backdrop-filter: blur(8px) saturate(1.04) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 16px rgba(0,0,0,.04) !important;
}

.login-glass-page .edx-forgot-input::placeholder {
    color: rgba(247,250,247,.64) !important;
}

.login-glass-page .edx-forgot-input-icon {
    color: rgba(247,250,247,.86) !important;
}

/* ============================================================
   FORGOT PASSWORD - UNDERLINE-ONLY EMAIL FIELD
   ============================================================ */

.login-glass-page .edx-forgot-input-wrap {
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login-glass-page .edx-forgot-input-wrap:focus-within {
    border-bottom-color: #FDC530 !important;
    box-shadow: 0 1px 0 rgba(253,197,48,.52) !important;
}

.login-glass-page .edx-forgot-input {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 10px 0 36px !important;

    color: #FFFFFF !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    outline: none !important;
}

.login-glass-page .edx-forgot-input:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-glass-page .edx-forgot-input::placeholder {
    color: rgba(255,255,255,.58) !important;
}

.login-glass-page .edx-forgot-input-icon {
    left: 4px !important;
    color: rgba(255,255,255,.84) !important;
}

@media (max-width: 767.98px) {
    .login-glass-page .edx-forgot-input-wrap,
    .login-glass-page .edx-forgot-input {
        min-height: 48px !important;
    }
}

/* ============================================================
   FORGOT PASSWORD - MATCH ACCOUNT ACCESS + MOBILE BACK POSITION
   UI only. Forgot-password behavior is unchanged.
   ============================================================ */

/* ACCOUNT RECOVERY matches ACCOUNT ACCESS exactly in style. */
.login-glass-page .edx-forgot-eyebrow {
    margin: 0 0 .9rem !important;
    color: #FDC530 !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* Mobile only: make Back to Login start exactly where Back to Welcome starts. */
@media (max-width: 767.98px) {
    .login-glass-page .edx-auth-pane.edx-forgot-open .edx-forgot-face,
    .login-glass-page .edx-forgot-face {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    .login-glass-page .edx-forgot-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .login-glass-page .edx-forgot-back {
        display: inline-flex !important;
        align-items: center !important;
        gap: .55rem !important;
        width: fit-content !important;
        margin: 0 0 1.45rem !important;
        padding: 0 !important;
        color: #F8FAF8 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: .84rem !important;
        font-weight: 760 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .login-glass-page .edx-forgot-back .edx-arrow {
        color: #FDC530 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .login-glass-page .edx-forgot-eyebrow {
        margin-bottom: .75rem !important;
        font-size: .75rem !important;
    }
}

/* ============================================================
   ACCOUNT RECOVERY - SAME TYPE AS ACCOUNT ACCESS, LEFT ALIGNED
   Applies to inline Forgot Password on desktop and mobile.
   ============================================================ */
.login-glass-page .edx-forgot-eyebrow {
    width: 100% !important;
    margin: 0 0 .9rem !important;
    color: #FDC530 !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    justify-self: start !important;
}

@media (max-width: 767.98px) {
    .login-glass-page .edx-forgot-eyebrow {
        margin-bottom: .75rem !important;
        font-size: .75rem !important;
        text-align: left !important;
        justify-self: start !important;
    }
}