/*
 * Auth surfaces in the admin design language: login, register, recover,
 * forgot-password and the sign-in details / change-password panels.
 * The surrounding public header and footer keep their own design.
 */

body:is(.login, .register, .recover, .forgot-password,
        .user-change-password, .user-change-email, .user-change-username) {
    --osc-bronze: var(--accent);
    --osc-bronze-deep: var(--accent-hover);
    --osc-bronze-tint: var(--accent-tint);
    --osc-accent-ink: var(--accent-ink);
    --osc-bench: light-dark(#fff, #1a1f27);
    --osc-bench-warm: light-dark(#f7f9fb, #232a35);
    --osc-bench-sunk: light-dark(#eef1f5, #14181f);
    --osc-chrome-hover: light-dark(rgb(15 24 40 / 0.07), rgb(255 255 255 / 0.06));
    --osc-rule: light-dark(#dde3ea, #333a45);
    --osc-rule-strong: light-dark(#7e8998, #79828f);
    --osc-ink: light-dark(#14181f, #e6ebf2);
    --osc-ink-muted: light-dark(#5f6b7a, #a6b0be);
    --osc-ink-emphasis: light-dark(#46505d, #c6cdd8);
    --osc-success: light-dark(#1d7d3e, #5cc27d);
    --osc-success-tint: light-dark(#e4f8e7, #183024);
    --osc-danger: light-dark(#c22826, #f0857f);
    --osc-danger-tint: light-dark(#ffe9e5, #331d1b);
    --osc-radius: 6px;
    --osc-radius-sm: 4px;
    --osc-shadow-overlay: 0 4px 12px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.06);
}

/* ---- Login and register ------------------------------------------------- */

body.login .oe-doc,
body.register .oe-doc {
    max-width: none;
    padding-block-start: 0;
}

body.login .oe-doc > .oe-h1,
body.register .oe-doc > .oe-h1 {
    display: none;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: start;
    width: min(1100px, calc(100% - 2rem));
    margin: clamp(1rem, 3vw, 2.5rem) auto clamp(2rem, 5vw, 4rem);
}

.auth-aside {
    position: sticky;
    top: calc(var(--header-h, 64px) + 1.5rem);
    padding: 1.35rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius);
    background: var(--osc-bench-warm);
    color: var(--osc-ink);
    box-shadow: var(--osc-shadow-overlay);
    overflow: hidden;
}

.auth-aside::after {
    display: none;
}

.auth-aside h2 {
    margin: 0 0 0.45rem;
    color: var(--osc-ink);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    max-width: 22ch;
}

.auth-aside p {
    margin: 0;
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
    max-width: 36ch;
}

.auth-benefits {
    display: grid;
    gap: 0.55rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--osc-ink);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.auth-benefits li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bronze-tint);
    color: var(--osc-bronze);
    font-size: 0.7rem;
    font-weight: 700;
}

.auth-trust {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--osc-rule);
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

.auth-card {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.35rem !important;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius);
    background: var(--osc-bench);
    box-shadow: var(--osc-shadow-overlay);
}

.auth-head {
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--osc-rule);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.35rem;
    color: var(--osc-bronze);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-head h1 {
    margin: 0;
    color: var(--osc-ink);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.auth-head p {
    margin: 0.35rem 0 0;
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ---- Recover / forgot password ----------------------------------------- */

body.recover .oe-doc,
body.forgot-password .oe-doc {
    max-width: 28rem;
    margin-inline: auto;
    padding-block-start: 1rem;
}

body.recover .oe-form-page,
body.forgot-password .oe-form-page {
    padding: 1.25rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius);
    background: var(--osc-bench);
    box-shadow: var(--osc-shadow-overlay);
}

body.recover .oe-form-page > .oe-h1,
body.forgot-password .oe-form-page > .oe-h1 {
    margin: 0 0 0.85rem;
    color: var(--osc-ink);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---- Sign-in details / change password --------------------------------- */

body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main > .oe-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius);
    background: var(--osc-bench);
}

body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main > .oe-panel > h2 {
    margin: 0 0 0.35rem;
    color: var(--osc-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-panel .oe-muted {
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
}

/* ---- Fields shared by all auth panels ---------------------------------- */

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-field,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-field {
    margin: 0 0 0.85rem;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-label,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--osc-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page :is(.oe-input, .form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea),
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main :is(.oe-input, .form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea) {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
    color: var(--osc-ink);
    font: 400 0.875rem/1.4 var(--font);
    box-shadow: none;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page :is(.oe-input, .form-control, input, select, textarea):focus,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main :is(.oe-input, .form-control, input, select, textarea):focus {
    outline: none;
    border-color: var(--osc-bronze);
    box-shadow: inset 0 0 0 1px var(--osc-bronze);
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-hint,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-hint {
    display: block;
    margin-top: 0.3rem;
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-check,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--osc-ink);
    font-size: 0.8125rem;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page input[type="checkbox"],
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main input[type="checkbox"] {
    accent-color: var(--osc-bronze);
    width: 1rem;
    height: 1rem;
}

/* ---- Actions ----------------------------------------------------------- */

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-actions,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1rem;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-btn,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-btn {
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border: 1px solid var(--osc-bronze);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bronze);
    color: var(--osc-accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-btn:hover,
body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-btn:focus-visible,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-btn:hover,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-btn:focus-visible {
    border-color: var(--osc-bronze-deep);
    background: var(--osc-bronze-deep);
    color: var(--osc-accent-ink);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--osc-bronze-deep);
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-btn.oe-secondary,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-btn.oe-secondary {
    border-color: var(--osc-rule);
    background: var(--osc-bench);
    color: var(--osc-ink);
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-btn.oe-secondary:hover,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-btn.oe-secondary:hover {
    border-color: var(--osc-bronze);
    background: var(--osc-bronze-tint);
    color: var(--osc-bronze);
}

body:is(.login, .register, .recover, .forgot-password) .auth-card .oe-actions .oe-btn {
    width: 100%;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page a:not(.oe-btn),
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main a:not(.oe-btn) {
    color: var(--osc-bronze);
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .oe-muted,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .oe-muted {
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
}

body:is(.login, .register, .recover, .forgot-password) .oe-form-page .glance-adsoyad {
    gap: 0.8rem !important;
}

/* ---- Alerts, errors and password toggle -------------------------------- */

body:is(.login, .register, .recover, .forgot-password) .flashmessage,
body:is(.login, .register, .recover, .forgot-password) .flash-wrap,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .flashmessage {
    margin-bottom: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
    color: var(--osc-ink);
    font-size: 0.8125rem;
    line-height: 1.45;
}

body:is(.login, .register, .recover, .forgot-password) .flashmessage-ok,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .flashmessage-ok {
    border-color: color-mix(in oklab, var(--osc-success) 35%, var(--osc-rule));
    background: var(--osc-success-tint);
    color: var(--osc-success);
}

body:is(.login, .register, .recover, .forgot-password) .flashmessage-error,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .flashmessage-error {
    border-color: color-mix(in oklab, var(--osc-danger) 35%, var(--osc-rule));
    background: var(--osc-danger-tint);
    color: var(--osc-danger);
}

body:is(.login, .register, .recover, .forgot-password) #error_list,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main #error_list {
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--osc-danger) 35%, var(--osc-rule));
    border-radius: var(--osc-radius-sm);
    background: var(--osc-danger-tint);
    color: var(--osc-danger);
    font-size: 0.8125rem;
    line-height: 1.45;
    list-style: none;
}

body:is(.login, .register, .recover, .forgot-password) #error_list:empty {
    display: none;
}

body:is(.login, .register, .recover, .forgot-password) .password-toggle,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .password-toggle {
    border-radius: var(--osc-radius-sm);
    color: var(--osc-ink-muted);
}

body:is(.login, .register, .recover, .forgot-password) .password-toggle:hover,
body:is(.login, .register, .recover, .forgot-password) .password-toggle:focus-visible,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .password-toggle:hover,
body:is(.user-change-password, .user-change-email, .user-change-username) .oe-account-main .password-toggle:focus-visible {
    background: var(--osc-chrome-hover);
    color: var(--osc-bronze);
}

@media (max-width: 63.999rem) {
    .auth-shell {
        display: block;
        width: calc(100% - 1rem);
        margin: 0.75rem auto 2rem;
    }

    .auth-aside {
        display: none;
    }

    .auth-card {
        padding: 1rem !important;
    }

    body.recover .oe-form-page,
    body.forgot-password .oe-form-page {
        padding: 1rem;
    }
}

/* Recover intro and page heading. */
body.recover .oe-doc > .oe-h1,
body.forgot-password .oe-doc > .oe-h1 {
    margin: 0 0 0.75rem;
    color: var(--osc-ink);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

body.recover .oe-form-page > p {
    margin: 0 0 0.9rem;
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* Registration extras from the verification plugin and legal/phone fields. */
.auth-card .biz-account {
    margin: 0.9rem 0 0.2rem;
}

.auth-card .biz-choice {
    gap: 0.5rem;
}

.auth-card .biz-choice-card {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
    box-shadow: none;
}

.auth-card .biz-choice-card:hover {
    border-color: var(--osc-bronze);
}

.auth-card .biz-choice-card:has(input:checked) {
    border-color: var(--osc-bronze);
    background: var(--osc-bronze-tint);
    box-shadow: inset 0 0 0 1px var(--osc-bronze);
}

.auth-card .biz-choice-card input {
    accent-color: var(--osc-bronze);
}

.auth-card .biz-choice-title {
    color: var(--osc-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.auth-card .biz-choice-desc {
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

.auth-card .biz-panel {
    padding: 1rem;
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius);
    background: var(--osc-bench-warm);
}

.auth-card .biz-head h3 {
    color: var(--osc-ink);
    font-size: 1rem;
    font-weight: 600;
}

.auth-card .biz-head p,
.auth-card .biz-note {
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

.auth-card .biz-badge {
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bronze-tint);
    color: var(--osc-bronze);
    font-size: 0.6875rem;
    font-weight: 600;
}

.auth-card .biz-docs {
    border: 1px dashed var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
}

.auth-card .biz-docs-title {
    color: var(--osc-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.auth-card .biz-doc-list li {
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench-sunk);
    color: var(--osc-ink);
    font-size: 0.75rem;
}

.auth-card .identity-phone-field .oe-muted {
    margin-top: 0.3rem;
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

.auth-card .identity-terms-field > label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--osc-ink);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.auth-card .identity-terms-field input[type="checkbox"] {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    accent-color: var(--osc-bronze);
}

.auth-card .identity-terms-field a {
    color: var(--osc-bronze);
}

.auth-card .glance-adsoyad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.8rem;
}

@media (max-width: 40rem) {
    .auth-card .glance-adsoyad {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-card .biz-choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-card .biz-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Change-password panels: beat the account sheet's own higher-specificity
   heading/button rules so the panel stays on the admin scale. */
body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel > h2 {
    margin: 0 0 0.4rem;
    color: var(--osc-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel > .oe-muted {
    margin: 0 0 0.85rem;
    color: var(--osc-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel .oe-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--osc-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel .oe-hint {
    display: block;
    margin-top: 0.3rem;
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel .oe-btn:not(.oe-btn-danger):not(.oe-secondary) {
    min-height: 2.4rem;
    padding: 0 0.85rem;
    border: 1px solid var(--osc-bronze);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bronze);
    color: var(--osc-accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body:is(.user-change-password, .user-change-email, .user-change-username)
    .oe-page .oe-account-main > .oe-panel .oe-btn:not(.oe-btn-danger):not(.oe-secondary):hover {
    border-color: var(--osc-bronze-deep);
    background: var(--osc-bronze-deep);
    color: var(--osc-accent-ink);
}

/* Phone input injected by the identity script, in the admin language. */
.auth-card .phone-control {
    border-color: var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
}

.auth-card .phone-control:focus-within {
    border-color: var(--osc-bronze);
    box-shadow: inset 0 0 0 1px var(--osc-bronze);
}

.auth-card .phone-prefix {
    border-inline-end-color: var(--osc-rule);
    background: var(--osc-bench-sunk);
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.auth-card .phone-control input[type="tel"] {
    color: var(--osc-ink);
    font-size: 0.8125rem;
}

.auth-card .phone-help,
.auth-card .otp-status {
    color: var(--osc-ink-muted);
    font-size: 0.75rem;
}

.auth-card .otp-code {
    border: 1px solid var(--osc-rule);
    border-radius: var(--osc-radius-sm);
    background: var(--osc-bench);
    color: var(--osc-ink);
    font: 600 0.875rem/1 var(--font);
}

.auth-card .otp-code:focus {
    outline: none;
    border-color: var(--osc-bronze);
    box-shadow: inset 0 0 0 1px var(--osc-bronze);
}

.auth-card .phone-verified {
    border-radius: var(--osc-radius-sm);
    background: var(--osc-success-tint);
    color: var(--osc-success);
    font-size: 0.6875rem;
    font-weight: 600;
}

body.recover .oe-page .oe-doc > .oe-h1,
body.forgot-password .oe-page .oe-doc > .oe-h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

body.recover .oe-page .oe-form-page > p {
    font-size: 0.8125rem !important;
}