/* ==========================================================================
   Auth Pages — shared public account/auth styling
   Location recommendation: wwwroot/css/auth-pages.css

   Purpose:
   - Shared styling for Login, Forgot Password, Register, Register Step 2,
     and future public account pages.
   - Keep site.css and ngds.css global-safe.
   - Keep page .razor.css files for layout/artwork/page-specific details only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared tokens
   -------------------------------------------------------------------------- */

:root {
    --auth-text: #101828;
    --auth-muted: #667085;
    --auth-label: #475467;
    --auth-border: var(--border, #e6eaf0);
    --auth-surface: rgba(255, 255, 255, .94);
    --auth-input-border: #d0d5dd;
    --auth-primary: #155ce5;
    --auth-primary-hover: #0f4ccf;
    --auth-primary-start: #2f7bff;
    --auth-danger-text: #9f1239;
    --auth-danger-border: #fbcfe8;
    --auth-danger-bg: #fce7ef;
    --auth-focus: rgba(37, 99, 235, .12);
    --auth-focus-strong: rgba(37, 99, 235, .25);
    --auth-shadow-card: 0 18px 48px rgba(16, 24, 40, .09);
    --auth-shadow-card-mobile: 0 10px 28px rgba(16, 24, 40, .07);
    --auth-radius-card: 18px;
    --auth-radius-card-mobile: 14px;
    --auth-radius-control: 12px;
    --auth-page-minh: clamp(0px, calc(100dvh - 64px - 88px - 4rem), 680px);
}

/* --------------------------------------------------------------------------
   Shared centered page shell
   Use future class: .auth-page-center
   Current page aliases included for compatibility.
   -------------------------------------------------------------------------- */

.auth-page-center,
.loginhome-shell,
.forgotpassword-page,
.register-page,
.registerstep2-page {
    width: 100%;
    min-height: var(--auth-page-minh);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Shared card/surface
   Use future class: .auth-card
   Current page aliases included for compatibility.
   -------------------------------------------------------------------------- */

.auth-card,
.forgotpassword-card,
.register-panel--form,
.registerstep2-panel {
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-card);
    background: var(--auth-surface);
    box-shadow: var(--auth-shadow-card);
}

.auth-card,
.forgotpassword-card {
    width: min(100%, 480px);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2rem);
}

.register-panel--form,
.registerstep2-panel {
    padding: clamp(1.25rem, 4vw, 2rem);
}

/* Larger custom card shell used by Loginhome */
.loginhome-card {
    background: var(--surface, #fff);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-card-mobile);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .08);
}

/* --------------------------------------------------------------------------
   Shared headers
   Use future class: .auth-header
   Current page aliases included for compatibility.
   -------------------------------------------------------------------------- */

.auth-header,
.forgotpassword-header,
.register-header,
.registerstep2-header {
    margin-bottom: 1.35rem;
}

.auth-header--center,
.forgotpassword-header {
    text-align: center;
}

    .auth-header h1,
    .forgotpassword-header h1,
    .register-header h1,
    .registerstep2-header h1 {
        margin: 0;
        color: var(--auth-text);
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: -.025em;
    }

    .auth-header p,
    .forgotpassword-header p,
    .register-header p,
    .registerstep2-header p {
        margin: .55rem 0 0;
        color: var(--auth-muted);
        font-size: 1.05rem;
        line-height: 1.45;
    }

    .forgotpassword-header p {
        font-size: 1rem;
    }

/* --------------------------------------------------------------------------
   Shared icon bubble
   Use future class: .auth-icon
   Current page aliases included for compatibility.
   -------------------------------------------------------------------------- */

.auth-icon,
.forgotpassword-icon,
.register-external-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .18);
    background: rgba(37, 99, 235, .08);
    color: var(--auth-primary);
}

.auth-icon,
.forgotpassword-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
}

.register-external-icon {
    width: 42px;
    height: 42px;
    margin-bottom: .9rem;
}

.auth-icon .oi,
.forgotpassword-icon .oi {
    font-size: 1.05rem;
}

.register-external-icon .oi {
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Shared forms
   Use future class: .auth-form
   Current page aliases included for compatibility.
   -------------------------------------------------------------------------- */

form.auth-form,
form.loginhome-form,
form.forgotpassword-form,
form.register-form,
form.registerstep2-form {
    display: grid;
}

form.loginhome-form {
    gap: .8rem;
}

form.forgotpassword-form {
    gap: .85rem;
}

form.register-form {
    gap: .9rem;
}

form.registerstep2-form {
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Shared validation
   Use future classes:
   .auth-validation-summary
   .auth-validation-message
   -------------------------------------------------------------------------- */

.auth-validation-summary,
.forgotpassword-validation-summary,
.register-validation-summary,
.registerstep2-validation-summary {
    margin: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--auth-danger-border);
    border-radius: var(--auth-radius-control);
    background: var(--auth-danger-bg);
    color: var(--auth-danger-text);
    font-size: .9rem;
}

    .auth-validation-summary ul,
    .forgotpassword-validation-summary ul,
    .register-validation-summary ul,
    .registerstep2-validation-summary ul {
        margin: 0;
        padding-left: 1.1rem;
    }

.auth-validation-message,
.loginhome-validation,
.forgotpassword-validation-message,
.register-validation-message,
.registerstep2-validation-message {
    display: block;
    color: #d92d20;
    font-size: .82rem;
}

.loginhome-validation,
.forgotpassword-validation-message {
    margin-top: -.45rem;
}

/* --------------------------------------------------------------------------
   Shared field wrappers and labels
   Use future classes:
   .auth-field
   .auth-label
   -------------------------------------------------------------------------- */

.auth-field,
.register-field,
.registerstep2-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.forgotpassword-field,
.loginhome-field {
    position: relative;
}

.auth-label,
.register-label,
.registerstep2-label {
    color: var(--auth-label);
    font-size: .86rem;
    font-weight: 650;
}

.forgotpassword-label {
    position: absolute;
    left: 1rem;
    top: .45rem;
    color: var(--auth-muted);
    font-size: .78rem;
    font-weight: 600;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Shared controls
   Use future classes:
   .auth-input
   .auth-select
   -------------------------------------------------------------------------- */

.auth-input,
.auth-select,
.loginhome-input,
.forgotpassword-input,
.register-input,
.registerstep2-input,
.registerstep2-select {
    width: 100%;
    border: 1px solid var(--auth-input-border);
    border-radius: var(--auth-radius-control);
    background-color: #fff;
    color: var(--auth-text);
    font-size: 1rem;
    box-shadow: none;
}

.auth-input,
.auth-select,
.register-input,
.registerstep2-input,
.registerstep2-select {
    height: 52px;
    padding: .75rem 1rem;
}

.loginhome-input {
    height: 52px;
    padding-left: 2.85rem;
    padding-right: 1rem;
    border-radius: 11px;
}

.forgotpassword-input {
    height: 54px;
    padding: 1.35rem 1rem .45rem;
}

.auth-select,
.registerstep2-select {
    padding-right: 2.25rem;
}

.auth-input::placeholder,
.register-input::placeholder,
.registerstep2-input::placeholder {
    color: #98a2b3;
}

.loginhome-input::placeholder {
    color: var(--auth-muted);
}

.forgotpassword-input::placeholder {
    color: transparent;
}

.auth-input:focus,
.auth-select:focus,
.loginhome-input:focus,
.forgotpassword-input:focus,
.register-input:focus,
.registerstep2-input:focus,
.registerstep2-select:focus {
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 0 0 .22rem var(--auth-focus);
}

/* Loginhome input icon */

.loginhome-field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--auth-muted);
    font-size: .95rem;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Shared submit buttons
   Use future class: .auth-submit
   -------------------------------------------------------------------------- */

.auth-submit,
.loginhome-submit,
.forgotpassword-submit,
.register-submit,
.registerstep2-submit {
    width: 100%;
    border: 0;
    border-radius: var(--auth-radius-control);
    background: linear-gradient(135deg, var(--auth-primary-start) 0%, var(--auth-primary) 100%);
    color: #fff;
    font-size: 1.03rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(21, 92, 229, .20);
    cursor: pointer;
}

.auth-submit,
.forgotpassword-submit,
.register-submit,
.registerstep2-submit {
    height: 54px;
}

.loginhome-submit {
    height: 52px;
    margin-top: .25rem;
    gap: .8rem;
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(21, 92, 229, .22);
}

.register-submit,
.registerstep2-submit {
    margin-top: .15rem;
}

    .auth-submit:hover,
    .loginhome-submit:hover,
    .forgotpassword-submit:hover,
    .register-submit:hover,
    .registerstep2-submit:hover {
        background: linear-gradient(135deg, #226df2 0%, var(--auth-primary-hover) 100%);
    }

    .auth-submit:focus-visible,
    .loginhome-submit:focus-visible,
    .forgotpassword-submit:focus-visible,
    .register-submit:focus-visible,
    .registerstep2-submit:focus-visible {
        outline: 3px solid var(--auth-focus-strong);
        outline-offset: 3px;
    }

/* --------------------------------------------------------------------------
   Loginhome small shared pieces
   -------------------------------------------------------------------------- */

.loginhome-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: -.1rem;
}

.loginhome-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--auth-muted);
    font-size: .88rem;
    line-height: 1.2;
    min-width: 0;
}

    .loginhome-check span {
        white-space: nowrap;
    }

    .loginhome-check input {
        width: 1rem;
        height: 1rem;
        margin: 0;
        flex: 0 0 auto;
    }

.loginhome-forgot {
    color: var(--auth-primary);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .loginhome-forgot:hover {
        color: var(--auth-primary-hover);
        text-decoration: underline;
    }

.loginhome-secure {
    margin-top: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--auth-muted);
    font-size: .82rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Secondary/external account panel
   Use future classes:
   .auth-secondary-panel
   .auth-secondary-card
   -------------------------------------------------------------------------- */

.auth-secondary-panel,
.register-panel--external {
    display: flex;
}

.auth-secondary-card,
.register-external-card {
    width: 100%;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-card);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .055);
}

.register-external-header {
    margin-bottom: 1rem;
}

    .register-external-header h2 {
        margin: 0;
        color: var(--auth-text);
        font-size: clamp(1.25rem, 2vw, 1.55rem);
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -.018em;
    }

.register-external-picker {
    color: var(--auth-label);
    font-size: .95rem;
    line-height: 1.45;
}

    .register-external-picker hr {
        display: none;
    }

    .register-external-picker p {
        margin: 0;
        color: var(--auth-label);
    }

/* --------------------------------------------------------------------------
   Mobile shared behavior
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .register-panel--external,
    .auth-secondary-panel {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .auth-page-center,
    .loginhome-shell,
    .forgotpassword-page,
    .register-page,
    .registerstep2-page {
        min-height: auto;
        display: block;
    }

    .auth-card,
    .forgotpassword-card,
    .register-panel--form,
    .registerstep2-panel,
    .register-external-card,
    .auth-secondary-card {
        border-radius: var(--auth-radius-card-mobile);
        box-shadow: var(--auth-shadow-card-mobile);
    }

    .loginhome-card {
        box-shadow: var(--auth-shadow-card-mobile);
    }

    .auth-header h1,
    .forgotpassword-header h1,
    .register-header h1,
    .registerstep2-header h1 {
        font-size: clamp(1.75rem, 7vw, 2.2rem);
    }

    .forgotpassword-header h1 {
        font-size: clamp(1.65rem, 7vw, 2.1rem);
    }

    .auth-header p,
    .register-header p,
    .registerstep2-header p {
        font-size: 1rem;
    }

    .register-external-icon {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Small phones
   -------------------------------------------------------------------------- */

@media (max-width: 389.98px) {
    .auth-card,
    .forgotpassword-card,
    .register-panel--form,
    .registerstep2-panel,
    .register-external-card,
    .auth-secondary-card {
        padding: 1rem;
    }

    .loginhome-check,
    .loginhome-forgot {
        font-size: .82rem;
    }

    .loginhome-options {
        gap: .5rem;
    }

    .auth-input,
    .auth-select,
    .register-input,
    .registerstep2-input,
    .registerstep2-select {
        height: 50px;
    }

    .auth-submit,
    .forgotpassword-submit,
    .register-submit,
    .registerstep2-submit {
        height: 52px;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .auth-submit,
    .auth-submit:hover,
    .loginhome-submit,
    .loginhome-submit:hover,
    .forgotpassword-submit,
    .forgotpassword-submit:hover,
    .register-submit,
    .register-submit:hover,
    .registerstep2-submit,
    .registerstep2-submit:hover,
    .auth-input,
    .auth-select,
    .loginhome-input,
    .forgotpassword-input,
    .register-input,
    .registerstep2-input,
    .registerstep2-select {
        transition: none;
    }
}