/* Sign-in pages on a phone (Login, Register, OTP, LoginConfirmation, ResetPassword, PasskeySetup).
   Matches the iPhone/Android app's sign-in screen: no card, the app icon on top, centred headings,
   uppercase labels, rounded inputs and a full-width dark green button.
   Loaded after Aaf.Web.styles.css, so these win over each page's scoped styles at the same weight.
   Every rule is scoped under .login-page, which only these pages use. */

/* Hidden on larger screens, where the green brand panel shows the logo. */
.login-page .auth-mobile-brand,
.login-page .auth-mobile-tabs {
    display: none;
}

@media (max-width: 1000px) {

    /* ---------- Page: full screen, scrolls, no card ---------- */
    /* Doubled class: the page's own scoped .login-page rule weighs the same as two classes. */
    .login-page.login-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: flex-start;
        overflow-y: auto;
        padding: 40px 20px calc(32px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    .login-page .login-split {
        width: 100%;
        max-width: 380px;
        height: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        background: transparent;
    }

    .login-page .login-form-panel {
        width: 100%;
        padding: 0;
        background: transparent;
        overflow: visible;
    }

    .login-page .login-form-inner {
        max-width: none;
    }

    /* ---------- App icon header ---------- */
    .login-page .auth-mobile-brand {
        display: flex;
        justify-content: center;
        margin-bottom: 22px;
    }

        .login-page .auth-mobile-brand img {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-md);
            box-shadow: 0 8px 20px -8px rgba(18, 67, 62, 0.4);
        }

    /* ---------- Sign In / Create Account switch ---------- */
    .login-page .auth-mobile-tabs {
        display: flex;
        background: var(--LogoLightGrey);
        border-radius: var(--radius-md);
        padding: 4px;
        margin-bottom: 24px;
    }

        .login-page .auth-mobile-tabs a {
            flex: 1;
            text-align: center;
            font-size: var(--SmallMediumFont);
            font-weight: 700;
            color: var(--DarkGreen);
            text-decoration: none;
            padding: 10px 0;
            border-radius: var(--radius-sm);
        }

            .login-page .auth-mobile-tabs a.active {
                background: white;
                color: var(--LogoGreen);
                box-shadow: 0 2px 8px rgba(18, 67, 62, 0.14);
            }

    /* ---------- Headings ---------- */
    .login-page .login-heading {
        text-align: center;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .login-page .login-subheading {
        text-align: center;
        line-height: 1.45;
        margin-bottom: 22px;
    }

    .login-page .passkey-badge {
        margin-left: auto;
        margin-right: auto;
    }

    /* ---------- Fields ---------- */
    .login-page .input-header {
        font-size: var(--SmallFont);
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--DarkGreen);
        margin: 14px 0 6px;
    }

    .login-page .username-input,
    .login-page .password-input,
    .login-page .input-field {
        width: 100%;
        font-size: var(--BodyFont); /* 16px stops iOS zooming into the field */
        padding-top: 13px;
        padding-bottom: 13px;
        border-radius: var(--radius-md);
        box-sizing: border-box;
    }

    .login-page .validation-message {
        display: block;
        margin-left: 2px;
    }

    /* ---------- Buttons ---------- */
    .login-page .btn-container {
        margin-top: 22px;
        gap: 14px;
    }

    .login-page .btn-container .e-btn-primary,
    .login-page .passkey-add-form .e-btn-primary {
        width: 100%;
        height: auto;
        min-height: 50px;
        padding: 14px 0;
        border: none;
        border-radius: var(--radius-md);
        background-color: var(--LogoGreen);
        color: var(--TextColour);
        font-size: var(--MediumFont);
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 10px 20px -8px rgba(18, 67, 62, 0.45);
    }

    .login-page .passkey-login-form .passkey-login-btn {
        width: 100%;
        height: auto;
        min-height: 50px;
        margin: 0;
        padding: 13px 0;
        border-radius: var(--radius-md);
        border: 1.5px solid var(--LogoGreen);
        background: white;
        color: var(--LogoGreen);
        font-size: var(--MediumFont);
        font-weight: 700;
    }

    .login-page .login-divider {
        margin: 22px 0 18px;
    }

    /* Text links ("Register as a new user", "Back to login") read like the app's switch link. */
    .login-page .register-as-user-link,
    .login-page .back-to-login-link,
    .login-page .return-to-login-link,
    .login-page .reset-password-link {
        font-size: var(--SmallMediumFont);
        font-weight: 700;
        color: var(--LogoGreen);
    }

    /* The Sign In / Create Account switch already links between the two pages. */
    .login-page .btn-container .register-as-user-link {
        display: none;
    }

    /* ---------- Login: passkey first ----------
       Logo, switch, heading, then the passkey button, "or", and the username/password form.
       The passkey is the main button here; Log in becomes the outlined one. */
    .login-page .login-form-inner:has(.passkey-login-form) {
        display: flex;
        flex-direction: column;
    }

    .login-page .login-form-inner .passkey-login-form {
        order: 1;
    }

    .login-page .login-form-inner .login-divider {
        order: 2;
        margin: 22px 0 4px;
    }

    .login-page .login-form-inner .password-login-form {
        order: 3;
    }

    .login-page .login-form-inner .invalid-login-container {
        order: 4;
    }

    .login-page .passkey-login-form .passkey-login-btn {
        border: none;
        background-color: var(--LogoGreen);
        color: var(--TextColour);
        box-shadow: 0 10px 20px -8px rgba(18, 67, 62, 0.45);
    }

        .login-page .passkey-login-form .passkey-login-btn img {
            filter: brightness(0) invert(1); /* white icon on green */
        }

    .login-page .password-login-form .btn-container .e-btn-primary {
        border: 1.5px solid var(--LogoGreen);
        background-color: white;
        color: var(--LogoGreen);
        box-shadow: none;
    }

    /* ---------- Messages ---------- */
    .login-page .invalid-login-container,
    .login-page .invalid-user-container,
    .login-page .invalid-OTP-container {
        border-radius: var(--radius-md);
    }
}