/* Also used by the standalone account approval page, which keeps the original
   centered-logo layout rather than the split screen. */
.login-logo {
    width: auto;
    margin: 50px 0 25px 0;
    text-align: center;
}

    .login-logo img {
        height: auto;
        width: 200px;
        display: inline-block;
    }

/* Split screen: branded panel on the left, auth card on the right. The login page uses
   EmptyLayout (no nav), so the shell owns the full viewport. */
.login-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.login-brand {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background: var(--color-1);
    color: var(--color-1-reverse);
}

.login-brand-inner {
    max-width: 420px;
}

.login-brand-logo {
    width: 200px;
    height: auto;
    display: block;
    margin-bottom: 40px;
}

.login-brand h2 {
    margin: 0 0 30px 0;
    font-size: 1.6rem;
    line-height: 2.1rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--color-1-reverse);
}

.login-brand-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .login-brand-points li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
        font-size: 1rem;
        line-height: 1.4rem;
        opacity: .85;
    }

        .login-brand-points li i {
            width: 20px;
            text-align: center;
            font-size: 1.1rem;
        }

.login-panel {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scrolls rather than clipping when the taller create account form exceeds the viewport. */
    overflow-y: auto;
    padding: 50px;
    background: var(--background-color);
}

.login-panel-inner {
    width: 100%;
    max-width: 400px;
    /* auto margins instead of align-items centering so an overflowing form is not
       clipped at the top when it is taller than the panel. */
    margin: auto;
}

/* Only shown when the brand panel is hidden on small screens. */
.login-panel-logo {
    display: none;
    width: 160px;
    height: auto;
    margin: 0 auto 30px auto;
}

.login {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    font-size: .9rem;
    line-height: .9rem;
    background: var(--color-lightest);
    white-space: nowrap;
    border-radius: var(--card-radius);
    overflow: hidden;
}

    .login h1 {
        font-size: 1.1rem;
        line-height: 1.1rem;
        letter-spacing: normal;
        color: var(--color-darkest);
        font-weight: 600;
        margin: 0;
        background: var(--color-light);
        padding: 18px;
        display: block;
        text-align: center;
    }

    .login .fields {
        padding: 25px;
    }

        .login .fields .field {
            margin-bottom: 18px;
        }

        .login .fields label {
            display: block;
            margin: 0 0 6px 0;
            font-size: .85rem;
            line-height: 1rem;
            font-weight: 600;
            color: var(--sub-text-color);
        }

        /* Label and its inline action ("Forgot?") share a row. */
        .login .fields .field-label-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .login .fields .field-link {
            font-size: .8rem;
            line-height: 1rem;
        }

        .login .fields .field-optional {
            font-weight: 400;
            color: var(--color-gray);
        }

        .login .fields .field-intro {
            margin: 0 0 20px 0;
            font-size: .9rem;
            line-height: 1.3rem;
            white-space: normal;
            color: var(--sub-text-color);
        }

        /* Side by side fields (first/last name) that stack on narrow screens. */
        .login .fields .field-row {
            display: flex;
            gap: 12px;
        }

            .login .fields .field-row .field {
                flex: 1 1 50%;
                min-width: 0;
            }

        .login .fields input[type='text'],
        .login .fields input[type='password'],
        .login .fields input[type='email'],
        .login .fields input[type='number'] {
            width: 100%;
            display: block;
            min-width: 0;
        }

        .login .fields .password-wrap {
            position: relative;
        }

            /* Padded so the typed password never runs under the toggle. */
            .login .fields .password-wrap input {
                padding-right: 2.75rem;
            }

        .login .fields .password-toggle {
            position: absolute;
            top: 50%;
            right: .5rem;
            transform: translateY(-50%);
            padding: .5rem;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-gray);
            line-height: 1;
        }

            .login .fields .password-toggle:hover {
                color: var(--text-color);
            }

        .login .fields label.remember {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            font-weight: 400;
            color: var(--text-color);
            cursor: pointer;
        }

        .login .fields input[type='checkbox'] {
            margin: 0;
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
        }

        .login .fields .button.login-submit {
            width: 100%;
            margin-top: 20px;
            justify-content: center;
        }

    .login .alert-box {
        top: 0;
    }

p.login-help {
    font-size: .9rem;
    line-height: 1.1rem;
    margin: 20px auto 0 auto;
    position: relative;
    text-align: center;
    width: auto;
}

/* Login page has no nav sidebar, so center the forgot password modal in the viewport
   (overrides the nav-offset left calc in modal.css). */
.login.modal.modal-small {
    left: 50%;
    width: 380px;
    max-width: 380px;
    min-width: 380px;
}

/* Instance picker shown inside the login card when a sign-in matches more than one client database. */
.login .instance-list {
    padding: 25px;
}

.login .instance-intro {
    margin: 0 0 20px 0;
    font-size: .9rem;
    line-height: 1.3rem;
    white-space: normal;
    color: var(--sub-text-color);
}

.login .instance-filter {
    width: 100%;
    margin-bottom: 15px;
    display: block;
}

.login .instance-help {
    margin: 0 0 15px 0;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
    text-align: center;
}

.login .instance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    text-align: left;
    background: var(--color-lightest);
    border: 1px solid var(--color-light);
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
}

    /* Chevron hints that picking an account moves you forward. */
    .login .instance-item::after {
        content: "\f054";
        font-family: var(--font-icon);
        font-weight: 500;
        font-size: .7rem;
        color: var(--color-gray);
    }

    .login .instance-item:hover {
        background: var(--color-2);
        border-color: var(--color-2);
        color: var(--color-lightest);
    }

        .login .instance-item:hover::after {
            color: var(--color-lightest);
        }

    .login .instance-item:disabled {
        opacity: .6;
        cursor: default;
    }

    .login .instance-item.loading {
        position: relative;
        cursor: wait;
        opacity: .8;
        color: transparent;
    }

        .login .instance-item.loading::after {
            content: "\f3f4";
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            font-family: var(--font-icon);
            font-weight: 500;
            color: var(--color-1);
            animation: spin 1s infinite linear;
        }

.login .instance-back {
    margin: 15px 0 0 0;
    text-align: center;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
}

/* The brand panel is decorative, so drop it first and keep the form usable. */
@media (max-width: 900px) {
    .login-brand {
        display: none;
    }

    .login-panel {
        flex: 1 1 100%;
        padding: 30px 20px;
    }

    .login-panel-logo {
        display: block;
    }
}

@media (max-width: 480px) {
    .login .fields .field-row {
        display: block;
    }

    .login.modal.modal-small {
        width: 92%;
        max-width: 92%;
        min-width: 0;
    }
}