/* Login page (/account/login) form controls on the dark glass card — uppercase labels above Syncfusion
   outline inputs (no float label: its white notch would show on dark), password eye toggle, red eIMS CTA,
   champagne SSO buttons, divider, MFA prompt and OTP boxes.
   Linked globally from _Index.cshtml: every rule is scoped under .eims-login* / .eims-pw-*.
   Palette tokens (--eims-red, --eims-gold, ...) are defined on .eims-login in login-page.css. */

/* ---------- Fields ---------- */
.eims-login-field {
    margin-bottom: 18px;
}

.eims-login-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Syncfusion outline wrapper, re-skinned for dark glass. !important beats the theme's own specificity. */
.eims-login .e-input-group.e-outline,
.eims-login .e-input-group.e-outline.e-control-wrapper {
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.eims-login .e-input-group.e-outline.e-input-focus,
.eims-login .e-input-group.e-outline.e-control-wrapper.e-input-focus {
    border-color: var(--eims-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18) !important;
}

.eims-login .e-input-group.e-outline::before,
.eims-login .e-input-group.e-outline::after {
    display: none !important;   /* no material underline animation */
}

.eims-login .e-input-group.e-outline input.e-input {
    min-height: 46px;
    padding: 0 14px !important;
    font-size: 15px;
    color: #ffffff !important;
    background: transparent !important;
}

.eims-login .e-input-group input.e-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Browser autofill paints a pale yellow/blue box; keep it in the glass palette. */
.eims-login input.e-input:-webkit-autofill,
.eims-login input.e-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #15284F inset;
    caret-color: #ffffff;
    transition: background-color 9999s ease-out;
}

/* Password field: relative wrapper so the eye button sits inside the input (label sits above it). */
.eims-pw-field {
    position: relative;
}

.eims-pw-field input.e-input {
    padding-right: 44px !important;
}

.eims-pw-toggle {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    padding: 0;
}

.eims-pw-toggle:hover {
    color: var(--eims-gold);
}

.eims-pw-toggle:focus-visible {
    outline: 2px solid var(--eims-gold);
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.eims-login-cta {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--eims-red) !important;
    background-color: var(--eims-red) !important;
    border-color: var(--eims-red) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px -10px rgba(237, 28, 36, 0.6) !important;
}

.eims-login-cta:hover,
.eims-login-cta:focus {
    background: var(--eims-red-dark) !important;
    background-color: var(--eims-red-dark) !important;
    border-color: var(--eims-red-dark) !important;
}

.eims-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.eims-login-divider::before,
.eims-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.eims-login-sso {
    width: 100%;
    height: 48px;
    border-radius: 24px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--eims-gold-soft) !important;
    color: var(--eims-gold) !important;
    box-shadow: none !important;
}

.eims-login-sso:hover {
    background: rgba(201, 169, 97, 0.08) !important;
    background-color: rgba(201, 169, 97, 0.08) !important;
}

/* ---------- MFA / OTP (scoped under .eims-login: MfaSection.razor reuses .otp-input-wrapper on a light page) ---------- */
.eims-login-mfa-prompt {
    margin: 0 0 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.eims-login .otp-input-wrapper {
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;
}

.eims-login .otp-input-wrapper .e-otp-input-field {
    width: 44px !important;
    height: 52px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}