/*
 * Public sign-in pages (Views/Shared/_AuthLayout.cshtml): Log in, Create account, password reset, registration pending, initial setup.
 * A brand panel beside a form card; the panel drops away on narrow screens. Uses the --kl-* tokens so light / dark / high-contrast all work.
 */
.kl-auth-body { margin: 0; background: var(--kl-bg); color: var(--kl-text); min-height: 100vh; }
.kl-auth { display: grid; grid-template-columns: minmax(20rem, 5fr) 6fr; min-height: 100vh; }

/* brand panel */
.kl-auth-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; color: #fff; background: linear-gradient(150deg, #0b1a2e 0%, #001f4d 45%, #0f6f73 100%); position: relative; overflow: hidden; }
.kl-auth-brand::after { content: ""; position: absolute; right: -8rem; bottom: -8rem; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events: none; }
:root[data-theme="contrast"] .kl-auth-brand { background: #000; border-right: 2px solid #ffff00; }
.kl-auth-logo { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.kl-auth-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: #fff; color: #0f4c8a; font-weight: 800; font-size: 1.3rem; }
.kl-auth-org { margin: .5rem 0 0; opacity: .85; font-size: .95rem; }
.kl-auth-pitch h2 { margin: 0 0 1.5rem; font-size: 2rem; line-height: 1.2; font-weight: 750; max-width: 24rem; color: #fff; }
.kl-auth-pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 26rem; }
.kl-auth-pitch li { padding-left: 1.4rem; position: relative; }
.kl-auth-pitch li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .6rem; height: .6rem; border-radius: 50%; background: #16c6c8; }
.kl-auth-pitch li strong { display: block; font-size: 1.02rem; }
.kl-auth-pitch li span { display: block; margin-top: .1rem; opacity: .85; font-size: .93rem; line-height: 1.45; }
.kl-auth-foot { margin: 0; font-size: .82rem; opacity: .75; }

/* form side */
.kl-auth-side { display: flex; flex-direction: column; min-width: 0; }
.kl-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2rem; }
.kl-auth-logo-sm { display: none; }
.kl-auth-logo-sm img { height: 2.4rem; width: auto; border-radius: 8px; }\n.kl-auth-logo-img { display: block; width: 100%; max-width: 20rem; height: auto; border-radius: 12px; }
.kl-auth-top nav { margin-left: auto; display: flex; gap: 1.25rem; }
.kl-auth-top a, .kl-auth-links a { color: var(--kl-link); font-weight: 600; font-size: .92rem; text-decoration: none; }
.kl-auth-top a:hover, .kl-auth-links a:hover { text-decoration: underline; }
.kl-auth-main { flex: 1; display: grid; place-items: center; padding: 1rem 2rem 2rem; }
.kl-auth-card { box-sizing: border-box; width: 100%; max-width: 30rem; padding: 2rem 2.1rem 1.75rem; background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: 14px; box-shadow: var(--kl-shadow-2, 0 8px 24px rgba(0,0,0,.08)); }
.kl-auth-links { display: flex; justify-content: center; gap: 1.5rem; padding: 1rem; }

/* content inside the card (legacy form markup, restyled) */
.kl-auth-card h1 { margin: 0 0 .35rem; font-size: 1.65rem; line-height: 1.2; color: var(--kl-text); }
.kl-auth-card > p.muted:first-of-type, .kl-auth-card h1 + p.muted { margin: 0 0 1.25rem; color: var(--kl-text-2); line-height: 1.5; }
.kl-auth-card .auth-logo { display: none; }
.kl-auth-card .form-group { margin: 0 0 1.1rem; }
.kl-auth-card label { display: block; margin: 0 0 .35rem; font-size: .9rem; font-weight: 650; color: var(--kl-text-2); }
.kl-auth-card .form-control, .kl-auth-card select, .kl-auth-card input[type=text], .kl-auth-card input[type=email], .kl-auth-card input[type=password], .kl-auth-card input[type=tel], .kl-auth-card input[type=date], .kl-auth-card input:not([type]) { display: block; width: 100%; max-width: none; box-sizing: border-box; padding: .65rem .8rem; font: inherit; color: var(--kl-text); background: var(--kl-surface); border: 1px solid var(--kl-border-strong); border-radius: var(--kl-radius-sm); }
.kl-auth-card .form-control:focus, .kl-auth-card select:focus, .kl-auth-card input:focus { outline: 3px solid var(--kl-focus, var(--kl-primary)); outline-offset: 1px; border-color: var(--kl-primary); }
.kl-auth-card .input-validation-error { border-color: var(--kl-danger); }
.kl-auth-card .field-error { display: block; margin-top: .3rem; font-size: .86rem; color: var(--kl-danger); }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-auth-card .field-error { color: #b91c1c; }
.kl-auth-card .password-field { position: relative; }
.kl-auth-card .password-field input { padding-right: 4.5rem; }
.kl-auth-card .password-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); padding: .3rem .6rem; border: 0; border-radius: var(--kl-radius-sm); background: transparent; color: var(--kl-link); font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; }
.kl-auth-card .password-toggle:hover { background: var(--kl-info-bg); text-decoration: none; }
.kl-auth-card .form-check { display: flex; align-items: center; gap: .55rem; }
.kl-auth-card .form-check input { width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; accent-color: var(--kl-primary); }
.kl-auth-card .form-check label { margin: 0; font-weight: 500; color: var(--kl-text); }
.kl-auth-card .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.kl-auth-card .form-group-inline { min-width: 0; }
.kl-auth-card .form-group-inline:nth-child(3):last-child { grid-column: 1 / -1; }
.kl-auth-card h1 + form { margin-top: 1.1rem; }
.kl-auth-card .btn-primary { width: 100%; padding: .7rem 1rem; font-size: 1rem; }
.kl-auth-card .btn-primary + .btn-secondary, .kl-auth-card .btn-secondary { display: inline-block; width: 100%; margin-top: .6rem; box-sizing: border-box; text-align: center; text-decoration: none; }
.kl-auth-card p.muted { color: var(--kl-text-2); line-height: 1.5; }
.kl-auth-card p.muted a, .kl-auth-card a:not(.btn) { color: var(--kl-link); font-weight: 600; }
.kl-auth-card form + p.muted { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--kl-border); }
.kl-auth-card .validation-summary { margin: 0 0 1rem; }
.kl-auth-card ol { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--kl-text-2); line-height: 1.6; }
.kl-auth-card h2.section-heading { margin: 1.5rem 0 .75rem; font-size: 1.05rem; }
.kl-auth-card .status-banner { margin: 0 0 1rem; }

@media (max-width: 900px) {
    .kl-auth { grid-template-columns: minmax(0, 1fr); }
    .kl-auth-brand { display: none; }
    .kl-auth-logo-sm { display: inline-flex; }\n    .kl-auth-logo-sm.kl-logo-themed .kl-logo-dark { display: none; }
    .kl-auth-top { padding: 1rem 1.25rem; }
    .kl-auth-main { padding: .5rem 1rem 1.5rem; place-items: start center; }
}
@media (max-width: 480px) {
    .kl-auth-card { padding: 1.5rem 1.25rem; border-radius: 12px; }
    .kl-auth-card .form-row { grid-template-columns: minmax(0, 1fr); }
    .kl-auth-top nav { gap: .9rem; }
}