/**
 * SageAI_BAC public auth pages.
 * Scoped to login.html and register.html.
 */

body {
    margin: 0;
}

.login-container {
    --auth-bg: var(--bg-secondary, hsl(var(--background)));
    --auth-surface: var(--bg-primary, hsl(var(--card)));
    --auth-surface-muted: var(--bg-tertiary, hsl(var(--muted)));
    --auth-text: var(--text-primary, hsl(var(--foreground)));
    --auth-muted: var(--text-secondary, hsl(var(--muted-foreground)));
    --auth-border: var(--border, hsl(var(--border)));
    --auth-primary: var(--primary);
    --auth-primary-hover: var(--primary-hover, var(--primary));
    --auth-primary-soft: var(--primary-light, hsl(var(--ai) / .12));
    --auth-accent: var(--auth-primary);
    --auth-on-primary-soft: var(--auth-primary);
    --auth-success: var(--success, hsl(var(--success)));
    --auth-warning: var(--warning, hsl(var(--warning)));
    --auth-error: var(--error, hsl(var(--destructive)));
    --auth-info: var(--info, hsl(var(--info)));
    min-height: 100vh;
    display: grid;
    background: var(--auth-bg);
    color: var(--auth-text);
}

.dark .login-container {
    --auth-bg: hsl(var(--background));
    --auth-surface: hsl(var(--card));
    --auth-surface-muted: hsl(var(--muted));
    --auth-text: hsl(var(--foreground));
    --auth-muted: hsl(var(--muted-foreground));
    --auth-border: hsl(var(--border));
    --auth-primary-soft: hsl(var(--ai) / .18);
    --auth-accent: color-mix(in srgb, hsl(var(--ai)) 52%, hsl(var(--foreground)));
    --auth-on-primary-soft: hsl(var(--foreground));
}

.auth-split {
    grid-template-columns: 1fr;
}

.auth-brand {
    display: none;
}

.login-card {
    width: min(100%, 31rem);
    align-self: center;
    justify-self: center;
    display: grid;
    gap: 1rem;
    background: var(--auth-surface);
    border: .0625rem solid var(--auth-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.login-header {
    display: grid;
    gap: .375rem;
}

.login-header h1 {
    margin: 0;
    color: var(--auth-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

.login-header p,
.auth-context-panel span,
.auth-help-panel span,
.auth-sso-panel span,
.register-link,
.login-link {
    color: var(--auth-muted);
}

.login-header p {
    margin: 0;
    line-height: 1.45;
}

.auth-context-panel,
.auth-help-panel,
.auth-sso-panel,
.auth-ai-panel {
    border: .0625rem solid var(--auth-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--auth-surface) 88%, var(--auth-surface-muted));
}

.auth-context-panel {
    display: grid;
    gap: .375rem;
    border-left: .25rem solid var(--auth-primary);
    padding: .875rem 1rem;
}

.auth-context-panel strong,
.auth-help-panel strong,
.auth-sso-panel strong {
    color: var(--auth-text);
    font-size: .9375rem;
    font-weight: 700;
}

.auth-context-panel span,
.auth-help-panel span,
.auth-sso-panel span {
    display: block;
    font-size: .875rem;
    line-height: 1.5;
}

.auth-ai-panel {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem;
}

.auth-ai-panel span {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    border: .0625rem solid color-mix(in srgb, var(--auth-primary) 30%, var(--auth-border));
    border-radius: var(--sage-app-radius-pill);
    background: var(--auth-primary-soft);
    color: var(--auth-on-primary-soft);
    font-size: .8125rem;
    font-weight: 700;
    padding: 0 .625rem;
}

.login-container .brand-accent {
    color: var(--auth-accent);
}

.auth-help-panel {
    display: grid;
    gap: .375rem;
    padding: .875rem 1rem;
}

.auth-sso-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .875rem;
    padding: .875rem 1rem;
}

.auth-sso-panel[hidden] {
    display: none !important;
}

.btn-sso {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: .0625rem solid color-mix(in srgb, var(--auth-primary) 35%, var(--auth-border));
    border-radius: var(--radius);
    background: var(--auth-surface);
    color: var(--auth-primary);
    font-size: .875rem;
    font-weight: 700;
    padding: 0 .875rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn-sso:hover,
.btn-sso:focus-visible {
    background: var(--auth-primary-soft);
    text-decoration: none;
}

.login-container form {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.login-container .form-group {
    display: grid;
    gap: .5rem;
    margin: 0;
}

.login-container .form-group label {
    color: var(--auth-text);
    font-size: .9375rem;
    font-weight: 700;
}

.required-mark {
    color: var(--auth-error);
}

.login-container .form-group input {
    width: 100%;
    min-height: 2.75rem;
    border: .0625rem solid var(--auth-border);
    border-radius: var(--radius);
    background: var(--auth-surface);
    color: var(--auth-text);
    font: inherit;
    font-size: 1rem;
    padding: 0 .875rem;
}

.login-container .form-group input:focus {
    outline: .1875rem solid color-mix(in srgb, var(--auth-primary) 30%, transparent);
    border-color: var(--auth-primary);
}

.login-container .password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-container .password-input-wrapper input {
    padding-right: 4.25rem;
}

.login-container .password-toggle-btn {
    position: absolute;
    right: .375rem;
    min-height: 2rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--auth-primary);
    cursor: pointer;
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
    padding: 0 .625rem;
}

.login-container .password-toggle-btn:hover,
.login-container .password-toggle-btn:focus-visible {
    background: var(--auth-primary-soft);
    outline: none;
}

.btn-login,
.btn-register {
    min-height: 2.875rem;
    width: 100%;
    border: .0625rem solid transparent;
    border-radius: var(--radius);
    background: var(--auth-primary);
    color: hsl(var(--primary-foreground));
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 1rem;
}

.btn-login:hover,
.btn-register:hover {
    background: var(--auth-primary-hover);
}

.btn-login:disabled,
.btn-register:disabled {
    background: var(--auth-muted);
    cursor: not-allowed;
}

.login-container .error-message,
.login-container .success-message {
    display: none;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.45;
    padding: .875rem 1rem;
}

.login-container .error-message {
    border: .0625rem solid color-mix(in srgb, var(--auth-error) 38%, var(--auth-border));
    background: color-mix(in srgb, var(--auth-error) 10%, var(--auth-surface));
    color: var(--auth-error);
}

.login-container .success-message {
    border: .0625rem solid color-mix(in srgb, var(--auth-success) 38%, var(--auth-border));
    background: color-mix(in srgb, var(--auth-success) 12%, var(--auth-surface));
    color: var(--auth-success);
}

.login-container .error-message.show,
.login-container .success-message.show {
    display: block;
}

.login-container .field-error {
    display: none;
    color: var(--auth-error);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-container .field-error-input {
    border-color: var(--auth-error) !important;
    outline: .1875rem solid color-mix(in srgb, var(--auth-error) 18%, transparent);
}

.register-link,
.login-link {
    margin-top: .25rem;
    text-align: center;
    font-size: .9375rem;
}

.auth-secondary-link {
    margin-top: -.25rem;
}

.register-link a,
.login-link a {
    color: var(--auth-primary);
    font-weight: 700;
    text-decoration: none;
}

.register-link a:hover,
.login-link a:hover {
    text-decoration: underline;
}

#password-strength-container {
    display: none;
    margin-top: .5rem;
}

#password-strength-container.is-visible {
    display: grid;
    gap: .625rem;
}

.password-strength-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

#password-strength-bar {
    height: .5rem;
    overflow: hidden;
    border-radius: var(--sage-app-radius-pill);
    background: var(--auth-surface-muted);
}

#password-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
}

#password-strength-fill.weak {
    background: var(--auth-error);
}

#password-strength-text.weak {
    color: var(--auth-error);
}

#password-strength-fill.fair {
    background: var(--auth-warning);
}

#password-strength-text.fair {
    color: var(--auth-warning);
}

#password-strength-fill.good {
    background: var(--auth-info);
}

#password-strength-text.good {
    color: var(--auth-info);
}

#password-strength-fill.strong,
#password-strength-fill.very_strong {
    background: var(--auth-success);
}

#password-strength-text.strong,
#password-strength-text.very_strong {
    color: var(--auth-success);
}

#password-strength-text {
    min-width: 5rem;
    font-size: .8125rem;
    font-weight: 700;
    text-align: right;
}

#password-checklist {
    display: grid;
    gap: .375rem;
}

.password-requirement {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    color: var(--auth-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.password-requirement .check-icon {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: .0625rem solid var(--auth-border);
    border-radius: var(--sage-app-radius-pill);
    color: var(--auth-muted);
    font-size: .6875rem;
    font-weight: 700;
    padding: 0 .375rem;
}

.password-requirement.valid {
    color: var(--auth-text);
}

.password-requirement.valid .check-icon {
    border-color: color-mix(in srgb, var(--auth-success) 38%, var(--auth-border));
    background: color-mix(in srgb, var(--auth-success) 12%, var(--auth-surface));
    color: var(--auth-success);
}

.auth-brand-mark {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--auth-text);
    font-size: 1rem;
    font-weight: 700;
}

.auth-brand-mark img {
    border-radius: var(--radius);
}

.auth-brand-h {
    margin: 0;
    color: var(--auth-text);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

.auth-brand-points {
    display: grid;
    gap: .875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-brand-points li {
    display: grid;
    gap: .25rem;
    border: .0625rem solid var(--auth-border);
    border-radius: var(--radius);
    background: var(--auth-surface);
    padding: .875rem;
}

.auth-brand-points strong {
    color: var(--auth-text);
    font-size: .9375rem;
    font-weight: 700;
}

.auth-brand-points span,
.auth-brand-note {
    color: var(--auth-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.auth-brand-note {
    border-left: .25rem solid var(--auth-primary);
    background: var(--auth-primary-soft);
    border-radius: var(--radius);
    padding: .875rem 1rem;
    font-weight: 700;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: .1875rem solid color-mix(in srgb, var(--auth-primary) 34%, transparent);
    outline-offset: .125rem;
}

@media (min-width: 55rem) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 32rem);
    }

    .auth-brand {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.25rem;
        border-right: .0625rem solid var(--auth-border);
        background: color-mix(in srgb, var(--auth-primary-soft) 40%, var(--auth-bg));
        padding: 2rem;
    }

    .login-card {
        min-height: 100vh;
        width: 100%;
        max-width: none;
        align-self: stretch;
        border-block: 0;
        border-right: 0;
        border-radius: var(--sage-app-radius-square);
        justify-content: center;
        overflow-y: auto;
        padding: 2rem;
    }
}

@media (max-width: 54.9375rem) {
    .login-container {
        padding: 1rem;
    }
}

@media (max-width: 31rem) {
    .login-card {
        padding: 1rem;
    }

    .auth-sso-panel,
    .password-strength-row {
        grid-template-columns: 1fr;
    }

    .auth-sso-panel {
        display: grid;
    }

    .btn-sso {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-container *,
    .login-container *::before,
    .login-container *::after {
        transition-duration: var(--sage-app-motion-duration-instant) !important;
        animation-duration: var(--sage-app-motion-duration-instant) !important;
        animation-iteration-count: 1 !important;
    }
}