/* ==================================================================
   ASAP SYSTEMS - AUTH REDESIGN
   Shared, additive stylesheet for Login.aspx, Accounts/ForgetPassword.aspx
   and Accounts/ForgetPasswordV2.aspx. Visual layer only - it only ever
   targets classes/wrappers added alongside it, plus a few pre-existing
   presentational classes (.input-field, .password-toggle) whose
   underlying controls/ids/JS are untouched.

   Not linked from any other page, so it cannot affect them.
   ================================================================== */
.asap-auth {
    --accent: #00ace9;
    --accent-btn: #00ace9;
    --accent-ink: #0576a1;
    --navy: #1d2331;
    --body-ink: #303a52;
    --muted: #66718a;
    --line: #e3e9f2;
    --surface: #fff;
    --danger: #b3261e;
    --danger-bg: #fdf3f2;
    font-family: "Open Sans", Arial, sans-serif;
    color: var(--body-ink);
}

/* Without this, .input-field (content-box by default) renders wider than
   the password field (which sets border-box itself for its icon padding)
   even though both are width:100% of the same container. */
.asap-auth, .asap-auth *, .asap-auth *::before, .asap-auth *::after {
    box-sizing: border-box;
}

/* Full-viewport flex column so the gradient always covers the whole
   screen and the footer sits at the bottom, regardless of how short the
   card content is or how far the page is zoomed - #main-login/#footer
   are flex children of this wrapper (see .aa-page markup in Login.aspx). */
.aa-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.aa-body {
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding: 56px 24px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, #fff) 0%, transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #f7f9fc) 0%, #eef2f7 100%);
}

#main-login.asap-auth {
    display: contents;
}

.aa-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 38px 36px;
    box-shadow: 0 1px 2px rgba(29,35,49,.05), 0 14px 34px -14px rgba(29,35,49,.2);
}

.aa-logo {
    display: block;
    text-align: center;
    margin: 0 0 4px;
}

    .aa-logo img {
        height: 120px;
        width: auto;
        max-width: 100%;
        display: inline-block;
    }

.asap-auth h1, .aa-title {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    font-size: clamp(1.4rem, 1.15rem + .9vw, 1.75rem);
    line-height: 1.2;
    margin: 0 0 6px;
}

.aa-sub {
    margin: 0 0 26px;
    font-size: 14.5px;
    color: var(--muted);
    text-align: center;
}

.aa-error {
    margin: 0 0 20px;
    padding: 11px 14px;
    border-radius: 8px;
    background: var(--danger-bg);
    border: 1px solid #f2c9c6;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--danger);
    text-align: left;
}

.aa-error:empty {
    display: none;
}

/* #error_text_msg carries a pre-existing ID rule in LoginStyle.css
   (color/font-size/margin/display) that outranks a plain .aa-error class;
   match its specificity here so the box uses the new palette once JS
   reveals it via the existing show()/hide() calls in Login.aspx.cs. */
#error_text_msg.aa-error {
    color: var(--danger);
    font-size: 13.5px;
    margin: 0 0 20px;
}

.status:empty {
    display: none;
}

.aa-field {
    margin: 0 0 18px;
    text-align: left;
}

.asap-auth label.labels {
    display: block;
    position: static;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 7px;
    cursor: default;
}

.asap-auth input.input-field {
    width: 100%;
    height: 46px;
    background: var(--surface);
    box-shadow: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    opacity: 1;
    padding: 0 14px;
    font-size: 15px;
    color: var(--navy);
    transition: border-color .2s, box-shadow .2s;
}

    .asap-auth input.input-field:focus {
        outline: none;
        border-color: var(--accent-ink);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }

.asap-auth .password-field-wrap {
    position: relative;
    width: 100%;
    margin: 0;
}

    .asap-auth .password-field-wrap .input-field {
        width: 100%;
        box-sizing: border-box;
        padding-right: 3.25rem;
    }

.asap-auth .password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

    .asap-auth .password-toggle:hover {
        color: var(--accent-ink);
        background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .asap-auth .password-toggle:focus-visible {
        outline: none;
        color: var(--accent-ink);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }

.aa-forgot {
    display: inline-block;
    font-size: 13.5px;
    color: var(--accent-ink);
    margin: -6px 0 20px;
}

    .aa-forgot:hover {
        text-decoration: underline;
    }

.asap-auth .recaptcha-container, .aa-captcha {
    margin: 0 0 20px;
    min-height: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.asap-auth .aa-submit, .asap-auth input.aa-submit {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    background: var(--accent-btn);
    border: 1px solid var(--accent-btn);
    color: #fff;
    transition: filter .2s, opacity .2s;
}

    .asap-auth .aa-submit:hover:not(:disabled) {
        filter: brightness(.92);
    }

    .asap-auth .aa-submit:disabled {
        cursor: not-allowed;
        opacity: .6;
    }

.aa-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    font-size: 13px;
    color: var(--muted);
}

    .aa-divider::before, .aa-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
    }

.asap-auth .aa-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 8px;
    margin: 0 0 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s;
}

    .asap-auth .aa-sso:hover {
        border-color: var(--accent-ink);
    }

    .asap-auth .aa-sso svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .asap-auth .aa-sso img {
        max-width: 100%;
        max-height: 36px;
        display: block;
    }

.asap-auth .aa-btn {
    height: 42px;
    min-width: 60px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: filter .2s, border-color .2s, background .2s;
}

.asap-auth .aa-btn--primary {
    background: var(--accent-btn);
    border: 1px solid var(--accent-btn);
    color: #fff;
}

    .asap-auth .aa-btn--primary:hover {
        filter: brightness(.92);
    }

.asap-auth .aa-btn--ghost {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--navy);
}

    .asap-auth .aa-btn--ghost:hover {
        border-color: var(--accent-ink);
    }

/* Single-row footer: copyright left, links right - matches the mockup's
   .aa-footer/.aa-copy/nav pattern. Kept position:fixed (pre-existing
   behavior) instead of the mockup's sticky-flex-column approach, since
   #footer isn't part of the same flex column as #main-login. */
/* #sub_footer carries a pre-existing LoginStyle.css ID rule
   (width:1050px;margin:auto) meant for the old centred layout; override it
   so the footer bar spans the full width of the new flex-column page. */
#sub_footer.aa-footer-wrap {
    width: 100%;
    margin: 0;
}

.aa-footer-bar {
    width: 100%;
    background: var(--surface);
    border-top: 1px solid #d8e0ec;
    box-shadow: 0 0px 16px -12px rgba(29,35,49,.5);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13.5px;
    color: var(--body-ink);
}

.aa-copy {
    margin: 0;
    white-space: nowrap;
    color: var(--muted);
}

/* #sub_footer p in LoginStyle.css (float/color/font-size) outranks a
   plain .aa-copy class; match its specificity so the copyright line
   keeps the new palette instead of the old gray. */
#sub_footer p.aa-copy {
    float: none;
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.aa-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 20px;
}

    .aa-footer-nav a {
        color: var(--body-ink);
        font-weight: 600;
        text-decoration: none;
        transition: color .2s;
    }

    .aa-footer-nav a:hover {
        color: var(--accent);
    }

/* Google / CAC sign-in images are already complete, self-shaped buttons
   (rounded pill, their own border/background baked into the PNG) - give
   them sizing/spacing only, no extra box, so they don't get a second
   border nested inside .aa-sso's rectangle. */
.asap-auth .aa-sso-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    border: 0;
    cursor: pointer;
}

    .asap-auth .aa-sso-image img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (max-width: 600px) {
    .aa-body {
        padding: 28px 14px;
    }

    .aa-card {
        padding: 26px 20px;
        border-radius: 11px;
    }

    .aa-footer-bar {
        padding: 12px 16px;
        justify-content: center;
        text-align: center;
    }

    .aa-footer-nav {
        justify-content: center;
    }
}