/* Auth screens (Login / MFA / reset password) — all AuthType branches of Views/Auth/Login.cshtml share this file. */

.ist-login-body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    font-family: var(--ist-font-family);
    color: var(--ist-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 600px at 78% 18%, color-mix(in srgb, var(--ist-accent) 16%, transparent), transparent 60%),
        radial-gradient(900px 700px at 12% 88%, rgba(var(--ist-primary-rgb), .42), transparent 55%),
        linear-gradient(160deg, var(--ist-primary-900) 0%, color-mix(in srgb, var(--ist-primary-900) 72%, black) 46%, color-mix(in srgb, var(--ist-primary-900) 45%, black) 100%);
}

.ist-login-photo {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ist-login-vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45));
}

.ist-login-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: var(--ist-space-6);
    padding: clamp(24px, 6vh, 56px) clamp(16px, 5vw, 72px);
}

.ist-login-card {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: end;
    width: 400px;
    max-width: 100%;
    padding: var(--ist-space-7) var(--ist-space-6) var(--ist-space-6);
    background: color-mix(in srgb, var(--ist-surface) 50%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--ist-radius-xl);
    box-shadow: var(--ist-shadow-5), 0 0 0 1px color-mix(in srgb, var(--ist-primary-900) 4%, transparent);
}

.ist-login-logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto var(--ist-space-2);
}

.ist-login-hi {
    margin: 2px 0 var(--ist-space-5);
    text-align: center;
    font-size: 13px;
    color: var(--ist-neutral-700);
}

/* Notice / error boxes rendered by login.js renderAuthPasswordPolicy() */
.ist-login-msgs {
    display: grid;
    gap: var(--ist-space-3);
    margin-bottom: var(--ist-space-4);
    text-align: left;
}

.ist-login-msgs .ist-notice > div,
.ist-login-error > div {
    flex: 1;
    min-width: 0;
}

/* FA icon classes force line-height:1; match the text's line box so the glyph centers on the first line */
.ist-login-msgs .ist-notice > i,
.ist-login-error > i {
    margin-top: 0;
    line-height: var(--ist-line-height-normal);
}

.ist-login-error {
    display: flex;
    align-items: flex-start;
    gap: var(--ist-space-2);
    padding: var(--ist-space-2) var(--ist-space-3);
    font-size: var(--ist-font-size-sm);
    line-height: var(--ist-line-height-normal);
    color: color-mix(in srgb, var(--ist-danger) 82%, black);
    background: var(--ist-danger-bg);
    border: 1px solid color-mix(in srgb, var(--ist-danger) 35%, white);
    border-radius: var(--ist-radius-md);
}

.ist-login-error > i {
    flex: 0 0 auto;
    color: var(--ist-danger);
}

.ist-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--ist-space-4);
}

.ist-login-field {
    display: flex;
    align-items: center;
    gap: var(--ist-space-3);
    height: 48px;
    padding: 0 var(--ist-space-4);
    background: var(--ist-surface);
    border: 1.5px solid var(--ist-border);
    border-radius: var(--ist-radius-md);
    transition: border-color var(--ist-duration-base) var(--ist-ease-standard),
                box-shadow var(--ist-duration-base) var(--ist-ease-standard);
}

.ist-login-field > i {
    flex: none;
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--ist-neutral-500);
    transition: color var(--ist-duration-base) var(--ist-ease-standard);
}

.ist-login-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ist-text);
}

.ist-login-field input::placeholder {
    color: var(--ist-neutral-500);
}

/* Chrome paints autofilled inputs pale blue; repaint the interior with an inset shadow */
.ist-login-field input:-webkit-autofill,
.ist-login-field input:-webkit-autofill:hover,
.ist-login-field input:-webkit-autofill:focus,
.ist-login-input:-webkit-autofill,
.ist-login-input:-webkit-autofill:hover,
.ist-login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ist-surface) inset;
    box-shadow: 0 0 0 1000px var(--ist-surface) inset;
    -webkit-text-fill-color: var(--ist-text);
    caret-color: var(--ist-text);
}

.ist-login-field:focus-within {
    border-color: var(--ist-primary);
    box-shadow: 0 0 0 4px rgba(var(--ist-primary-rgb), .14);
}

.ist-login-field:focus-within > i {
    color: var(--ist-primary);
}

.ist-login-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-2);
}

.ist-login-captcha img {
    border: 1px solid var(--ist-border);
    border-radius: var(--ist-radius-sm);
}

/* DNTCaptcha's text-box template wrapper — push the input to its own full-width row */
.ist-login-captcha > div {
    flex: 1 1 100%;
}

/* Standalone bordered input — used by the captcha textbox, which cannot live inside .ist-login-field */
.ist-login-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--ist-space-4);
    background: var(--ist-surface);
    border: 1.5px solid var(--ist-border);
    border-radius: var(--ist-radius-md);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ist-text);
}

.ist-login-input:focus {
    outline: 0;
    border-color: var(--ist-primary);
    box-shadow: 0 0 0 4px rgba(var(--ist-primary-rgb), .14);
}

.ist-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-2);
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--ist-radius-md);
    background: var(--ist-primary);
    color: var(--ist-text-on-brand);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--ist-font-weight-semibold);
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--ist-primary-rgb), .28);
    transition: transform var(--ist-duration-fast) var(--ist-ease-emphasized),
                background var(--ist-duration-base) var(--ist-ease-standard),
                box-shadow var(--ist-duration-base) var(--ist-ease-standard);
}

.ist-login-btn > i {
    font-size: 14px;
    transition: transform var(--ist-duration-base) var(--ist-ease-emphasized);
}

.ist-login-btn:hover {
    background: var(--ist-primary-800);
    box-shadow: 0 10px 24px rgba(var(--ist-primary-rgb), .36);
}

.ist-login-btn:hover > i {
    transform: translateX(3px);
}

.ist-login-btn:active {
    transform: translateY(1px) scale(.99);
}

.ist-login-btn:disabled {
    opacity: .65;
    cursor: default;
}

.ist-login-btn.is-secondary {
    background: var(--ist-surface);
    color: var(--ist-text);
    border: 1.5px solid var(--ist-border-strong);
    box-shadow: none;
}

.ist-login-btn.is-secondary:hover {
    border-color: var(--ist-primary);
    color: var(--ist-primary);
    background: var(--ist-primary-50);
}

.ist-login-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ist-space-1);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ist-neutral-700);
}

.ist-login-link {
    color: var(--ist-primary);
    font-weight: var(--ist-font-weight-semibold);
    text-decoration: none;
}

.ist-login-link:hover {
    text-decoration: underline;
}

.ist-login-legal {
    display: flex;
    gap: var(--ist-space-4);
    justify-content: center;
    margin-top: var(--ist-space-5);
    font-size: var(--ist-font-size-xs);
}

.ist-login-legal a {
    color: var(--ist-neutral-600);
    text-decoration: none;
}

.ist-login-legal a:hover {
    color: var(--ist-primary);
}

.ist-login-ver {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--ist-space-2);
    padding: 6px 14px;
    border-radius: var(--ist-radius-pill);
    font-size: 11.5px;
    font-weight: var(--ist-font-weight-semibold);
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ist-login-ver b {
    color: var(--ist-text-on-brand);
    font-weight: var(--ist-font-weight-semibold);
}

.ist-login-ver-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ist-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ist-accent) 25%, transparent);
}

.ist-login-qr {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto var(--ist-space-4);
    padding: var(--ist-space-3);
    background: var(--ist-neutral-0);
    border: 1px solid var(--ist-border);
    border-radius: var(--ist-radius-md);
}

.ist-login-qr img,
.ist-login-qr canvas {
    display: block;
}

.ist-login-secret {
    margin: 0 0 var(--ist-space-2);
    padding: var(--ist-space-3) var(--ist-space-4);
    background: var(--ist-surface-sunken);
    border: 1px dashed var(--ist-border-strong);
    border-radius: var(--ist-radius-md);
    text-align: center;
}

.ist-login-secret-label {
    display: block;
    margin-bottom: var(--ist-space-1);
    font-size: var(--ist-font-size-xs);
    font-weight: var(--ist-font-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ist-neutral-600);
}

.ist-login-secret code {
    font-size: 13px;
    letter-spacing: .06em;
    word-break: break-all;
    color: var(--ist-text);
}

/* Push-approval card nests inside the glass card; the card already provides the padding */
.ist-login-card .approval-card {
    padding: 0;
}

/* jQuery-validate error labels (forgot-password / change-password modals) */
.error {
    color: var(--ist-danger);
}

.ist-login-reveal > * {
    opacity: 0;
    transform: translateY(10px);
    animation: ist-login-rise .55s var(--ist-ease-standard) forwards;
}

.ist-login-reveal > :nth-child(1) { animation-delay: .05s; }
.ist-login-reveal > :nth-child(2) { animation-delay: .12s; }
.ist-login-reveal > :nth-child(3) { animation-delay: .19s; }
.ist-login-reveal > :nth-child(4) { animation-delay: .26s; }
.ist-login-reveal > :nth-child(5) { animation-delay: .33s; }
.ist-login-reveal > :nth-child(6) { animation-delay: .40s; }
.ist-login-reveal > :nth-child(7) { animation-delay: .47s; }
.ist-login-reveal > :nth-child(8) { animation-delay: .54s; }

@keyframes ist-login-rise {
    to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
    .ist-login-wrap {
        /* minmax(0,1fr): with a bare 1fr the track sizes to the card's fixed width and overflows narrow viewports */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        justify-items: center;
        text-align: center;
    }

    .ist-login-card {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        width: 100%;
        max-width: 400px;
    }

    .ist-login-ver {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
    }
}

@media (max-width: 480px) {
    .ist-login-card {
        padding: var(--ist-space-6) var(--ist-space-5) var(--ist-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ist-login-reveal > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
}