/* Styles for the multi-step sign in flow (email -> password -> 2FA). */
/* Alignment and margins come from the shared .header rule in onboarding.css. */
.header {
    font-weight: 800;
}

/* Extends the shared .bodyText style (onboarding.css); pulls the subtitle up under the title. */
.signinSubtitle {
    margin-top: -16px;
}

.emailPill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F4F7FC;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 var(--outer-margin) 19px var(--outer-margin);
    font-family: Lato;
    font-weight: 400;
    font-size: 14px;
    color: #242940;
}

.emailPill .emailPillAddress {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emailPill a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 16px;
    white-space: nowrap;
}

.primaryButtonRoot {
    background: #3F51B5; /* design system blue-500 */
}

.primaryButton {
    background: #3F51B5; /* design system blue-500 */
    color: #FFFFFF;
}

.primaryButton:hover {
    background: #334297; /* design system blue-600 */
    color: #FFFFFF;
}

.primaryButton:disabled,
.primaryButton:disabled:hover {
    background: #9FA8DA; /* design system blue-200 */
    color: #FFFFFF;
    cursor: not-allowed;
    pointer-events: none;
}

.primaryButtonRoot:has(.primaryButton:disabled) {
    background: #9FA8DA; /* design system blue-200 */
}

.signinFooter {
    display: flex;
    justify-content: space-between;
    margin: 0 var(--outer-margin) 32px var(--outer-margin);
    font-size: 12px;
    font-weight: 400;
}

/* Tighter grouping of Continue -> "or" -> Continue with Microsoft. */
#emailStep .buttonRoot {
    margin-bottom: 0;
}

#ssoSection .externalLoginButtonRoot {
    margin-bottom: 24px;
}

.signinFooter a {
    text-decoration: underline;
}

/* Without the SSO section, the footer directly follows the login form; match
   the 24px gap the "Continue with Microsoft" button provides when SSO is on. */
form + .signinFooter {
    margin-top: 24px;
}

.mfaFooter {
    margin: 0 var(--outer-margin) 32px var(--outer-margin);
    font-size: 12px;
    font-weight: 400;
}

/* 2FA code entry. Colours from ClientApp/src/styles/designSystemColours.ts */
.mfaCodeInput {
    width: 100%;
    border: 1px solid #ADAFB5; /* neutral-300 */
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: 2px;
}

.resendCodeButtonRoot {
    background: none;
    margin-bottom: 24px;
}

.resendCodeButton {
    background: #FFFFFF;
    border: 1px solid #ADAFB5; /* neutral-300 */
    color: #686C74; /* neutral-500 */
    text-transform: uppercase;
}

.resendCodeButton:hover {
    filter: none;
    background: #F8F8FA; /* neutral-100 */
}

.resendCodeButton:disabled {
    color: #A8A9AC; /* neutral-350 */
    background: #FFFFFF;
    border-color: #E0E0E1; /* neutral-250 */
}

.resendCodeButton .resendTimer {
    display: none;
}

.rememberDeviceRow {
    display: flex;
    align-items: center;
}

.rememberDeviceRow input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.rememberDeviceRow .rememberDeviceLabel {
    margin: 0 0 0 12px;
    font-family: Lato;
    font-weight: 400;
    font-size: 14px;
    color: #131416; /* neutral-800 */
}


.mfaFooter a {
    text-decoration: underline;
}

/* "Switch to Microsoft sign-in?" consent screen. */
.formRoot:has(.ssoSwitch) .header {
    display: none;
}

.ssoSwitch {
    text-align: center;
    font-family: Lato;
    color: #242940;
}

.ssoSwitchLogo {
    width: 64px;
    height: 64px;
    margin: 8px auto 20px auto;
    border-radius: 50%;
    background-color: #F4F7FC;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'>\
                <rect x='1' y='1' width='10' height='10' fill='%23F25022'/>\
                <rect x='12' y='1' width='10' height='10' fill='%237FBA00'/>\
                <rect x='1' y='12' width='10' height='10' fill='%2300A4EF'/>\
                <rect x='12' y='12' width='10' height='10' fill='%23FFB900'/>\
            </svg>");
}

.ssoSwitchTitle {
    font-size: 18px;
    font-weight: 800;
    margin: 0 var(--outer-margin) 12px var(--outer-margin);
}

.ssoSwitchLead {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #5F6368;
    margin: 0 var(--outer-margin) 16px var(--outer-margin);
}

.ssoSwitchFinePrint {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #5F6368;
    margin: 0 var(--outer-margin) 28px var(--outer-margin);
}

.ssoSwitchContinueButton {
    text-transform: none;
}

.ssoSwitchContinueButton .button-text::before {
    content: '';
    display: inline-block;
    vertical-align: -3px;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'>\
                <rect x='1' y='1' width='10' height='10' fill='white'/>\
                <rect x='12' y='1' width='10' height='10' fill='white'/>\
                <rect x='1' y='12' width='10' height='10' fill='white'/>\
                <rect x='12' y='12' width='10' height='10' fill='white'/>\
            </svg>");
}

.ssoSwitchContinueRoot {
    margin-bottom: 24px; /* match resend button spacing on 2FA pages */
}

.ssoSwitchNotNowRoot {
    margin-bottom: 32px;
}