/* ============================================================================
   WKING-4052 Plan 01-02 — auth-v2.css
   Enterprise-SaaS auth-page stylesheet.
   Consumes tokens + component specs from docs/WKING-4052-redesign/component-specs.md
   Shared design tokens with web/css/company-v2.css (shipped e75956f46).
   Scope: everything under .auth-v2 — accidental loading elsewhere is a no-op.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Tokens — scoped to .auth-v2 to prevent leakage into other layouts.
   ---------------------------------------------------------------------------- */
.auth-v2 {
    /* Brand */
    --color-brand:             #2f6b20;
    --color-brand-hover:       #255419;
    --color-brand-dark:        #1f4315;
    --color-brand-tint:        #e7f2df;
    --color-brand-gradient:    linear-gradient(135deg, #3d8a2b 0%, #255419 100%);

    /* Text */
    --color-text-heading:      #0f172a;
    --color-text-body:         #334155;
    --color-text-muted:        #475569;
    --color-text-subtle:       #475569;
    --color-text-invert:       #ffffff;

    /* Surface */
    --color-surface:           #ffffff;
    --color-surface-alt:       #f7f8fa;
    --color-surface-hover:     #eef1f4;

    /* State */
    --color-error:             #dc2626;
    --color-error-hover:       #b91c1c;
    --color-error-bg:          #fee2e2;
    --color-error-border:      #fca5a5;
    --color-warning:           #b45309;
    --color-warning-bg:        #fef3c7;
    --color-warning-border:    #fcd34d;
    --color-success:           #059669;
    --color-success-bg:        #d1fae5;
    --color-success-border:    #6ee7b7;

    /* Border */
    --color-border:            #cbd5e1;
    --color-border-strong:     #94a3b8;
    --color-border-focus:      var(--color-brand);

    /* Typography */
    --font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    --font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "tnum";

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.04);
    --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06), 0 1px 3px rgba(2, 6, 23, 0.04);
    --shadow-md: 0 4px 12px rgba(2, 6, 23, 0.08);
    --shadow-lg: 0 8px 24px rgba(2, 6, 23, 0.10), 0 2px 6px rgba(2, 6, 23, 0.05);

    /* Motion */
    --duration-fast: 120ms;
    --duration:      180ms;
    --duration-slow: 280ms;
    --ease-out:      cubic-bezier(0.32, 0.72, 0, 1);
}

/* ----------------------------------------------------------------------------
   Scoped reset — margin/padding/box-sizing.
   Never cross out of .auth-v2.
   ---------------------------------------------------------------------------- */
.auth-v2,
.auth-v2 *,
.auth-v2 *::before,
.auth-v2 *::after {
    box-sizing: border-box;
}

.auth-v2 h1,
.auth-v2 h2,
.auth-v2 h3,
.auth-v2 p {
    margin: 0;
}

/* ----------------------------------------------------------------------------
   Page layout — full-viewport centered flow.
   The .auth-v2 class is applied to a wrapper div the auth view puts
   around its content; main.php's legacy .wrapper layer is overridden below.
   ---------------------------------------------------------------------------- */
.auth-v2 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-5);
    background: var(--color-surface-alt);
    font-family: var(--font-body);
    font-feature-settings: var(--font-feature-settings);
    color: var(--color-text-heading);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media (max-width: 480px) {
    .auth-v2 {
        padding: var(--space-6) var(--space-3);
        gap: var(--space-4);
        justify-content: flex-start;
        padding-top: var(--space-8);
    }
}

/* ----------------------------------------------------------------------------
   Brand lockup — WaiverKing full-colour logo above card.
   ---------------------------------------------------------------------------- */
.auth-v2__brand {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    text-decoration: none;
    transition: opacity var(--duration) var(--ease-out);
}

.auth-v2__brand:hover {
    opacity: 0.85;
    text-decoration: none;
}

.auth-v2__brand-img {
    height: 36px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
}

/* ----------------------------------------------------------------------------
   Auth card — container for form.
   ---------------------------------------------------------------------------- */
.auth-v2__card {
    width: 100%;
    max-width: 440px;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 480px) {
    .auth-v2__card {
        padding: var(--space-6) var(--space-5);
        border-radius: 10px;
        max-width: 100%;
    }
}

/* Wide variant for multi-column signup forms */
.auth-v2__card--wide {
    max-width: 560px;
}

/* Extra-wide variant — reserved for long-form legal reading (signup2 agreement).
 * 1200px lets the agreement render full-page so users don't have to scroll
 * inside a small box (WKING-4055). */
.auth-v2__card--xwide {
    max-width: 1200px;
}

/* Top-aligned page variant — for long-form pages (signup2 agreement) where
 * vertical centering pushes the heading below the fold (WKING-4055).
 * Bare-class form for non-wrapper hosts; the wrapper-scoped form below
 * carries higher specificity to defeat .wrapper > .auth-v2 padding reset. */
.auth-v2--start {
    justify-content: flex-start;
}

.wrapper > .auth-v2.auth-v2--start {
    padding-top: var(--space-12);
}

/* ----------------------------------------------------------------------------
   Card header.
   Legacy screen.css line 162 sets `header { height:100px; background:#ffa427 }`
   site-wide as a raw element selector. Kill it everywhere under .auth-v2.
   ---------------------------------------------------------------------------- */
.auth-v2 header,
.auth-v2 .auth-v2__header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 var(--space-6) 0 !important;
    display: block !important;
}

.auth-v2__title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-2) 0;
}

.auth-v2__subtitle {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-body);
    margin: 0;
}

@media (max-width: 480px) {
    .auth-v2__title {
        font-size: 22px;
    }
    .auth-v2__subtitle {
        font-size: 14px;
    }
}

/* ----------------------------------------------------------------------------
   Form-group — Yii ActiveForm produces `.form-group` wrapper with
   `.control-label` label, `.form-control` input, `.help-block` error.
   Target those exact class names for drop-in compatibility.
   ---------------------------------------------------------------------------- */
.auth-v2 .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-5) 0;
    position: relative;
}

.auth-v2 .form-group:last-child {
    margin-bottom: 0;
}

/* Yii control-label → form-group__label */
.auth-v2 .form-group label,
.auth-v2 .form-group .control-label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--color-text-heading);
    margin: 0;
}

/* Required asterisk — when Yii marks field as required, it adds .required class */
.auth-v2 .form-group.required .control-label::after,
.auth-v2 .form-group.field-required .control-label::after {
    content: ' *';
    color: var(--color-error);
    font-weight: 500;
}

/* Yii form-control → .auth-v2 input */
.auth-v2 .form-group .form-control,
.auth-v2 input[type="text"],
.auth-v2 input[type="email"],
.auth-v2 input[type="password"],
.auth-v2 input[type="tel"],
.auth-v2 input[type="url"],
.auth-v2 textarea,
.auth-v2 select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-heading);
    color-scheme: light;
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.auth-v2 textarea {
    min-height: 88px;
    resize: vertical;
}

.auth-v2 select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23475569'><path d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

/* Hover */
.auth-v2 .form-group .form-control:hover,
.auth-v2 input[type="text"]:hover,
.auth-v2 input[type="email"]:hover,
.auth-v2 input[type="password"]:hover,
.auth-v2 input[type="tel"]:hover,
.auth-v2 textarea:hover,
.auth-v2 select:hover {
    border-color: #64748b;
}

/* Focus */
.auth-v2 .form-group .form-control:focus,
.auth-v2 input[type="text"]:focus,
.auth-v2 input[type="email"]:focus,
.auth-v2 input[type="password"]:focus,
.auth-v2 input[type="tel"]:focus,
.auth-v2 textarea:focus,
.auth-v2 select:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(59, 122, 42, 0.15);
}

/* Error state — Yii adds .has-error to the form-group wrapper */
.auth-v2 .form-group.has-error .form-control,
.auth-v2 .form-group.has-error input,
.auth-v2 .form-group.has-error textarea,
.auth-v2 .form-group.has-error select {
    border-color: var(--color-error);
}

.auth-v2 .form-group.has-error .form-control:focus,
.auth-v2 .form-group.has-error input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.auth-v2 .form-group.has-error .control-label {
    color: var(--color-error-hover);
}

/* Yii help-block → .form-group__error/hint */
.auth-v2 .form-group .help-block {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-muted);
    min-height: 0;
}

.auth-v2 .form-group.has-error .help-block {
    color: var(--color-error-hover);
    font-weight: 500;
}

/* Disabled */
.auth-v2 .form-group .form-control:disabled,
.auth-v2 input:disabled,
.auth-v2 select:disabled,
.auth-v2 textarea:disabled {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
    box-shadow: none;
}

/* Placeholder — subtle but AA-compliant */
.auth-v2 ::placeholder {
    color: var(--color-text-muted);
    opacity: 0.65;
}

/* Suppress Chrome/Safari autofill yellow */
.auth-v2 input:-webkit-autofill,
.auth-v2 input:-webkit-autofill:hover,
.auth-v2 input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    -webkit-text-fill-color: var(--color-text-heading);
    transition: background-color 5000s ease-in-out 0s;
}

/* ----------------------------------------------------------------------------
   Checkbox + Radio — custom-styled with native input behind.
   Yii produces `<label><input type="checkbox"> Remember me</label>` wrapped
   in `.checkbox` div. Style both the label and the input.
   ---------------------------------------------------------------------------- */
.auth-v2 .checkbox,
.auth-v2 .radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--color-text-body);
}

.auth-v2 .checkbox label,
.auth-v2 .radio label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    user-select: none;
}

.auth-v2 input[type="checkbox"],
.auth-v2 input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: var(--color-brand);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-v2 input[type="checkbox"]:focus-visible,
.auth-v2 input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Primary button.
   Targets Yii's Html::submitInput output (`input[type="submit"]`) AND
   any button with .btn-primary / .wkbutton / .submit class (legacy).
   ---------------------------------------------------------------------------- */
.auth-v2 .btn-primary,
.auth-v2 .wkbutton,
.auth-v2 .submit,
.auth-v2 input[type="submit"],
.auth-v2 button[type="submit"],
.auth-v2 .reg-disc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--color-brand);
    color: var(--color-text-invert);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.auth-v2 .btn-primary:hover,
.auth-v2 .wkbutton:hover,
.auth-v2 .submit:hover,
.auth-v2 input[type="submit"]:hover,
.auth-v2 button[type="submit"]:hover,
.auth-v2 .reg-disc-button:hover {
    background: var(--color-brand-hover);
    box-shadow: var(--shadow-md);
    color: var(--color-text-invert);
    text-decoration: none;
}

.auth-v2 .btn-primary:focus-visible,
.auth-v2 .wkbutton:focus-visible,
.auth-v2 .submit:focus-visible,
.auth-v2 input[type="submit"]:focus-visible,
.auth-v2 button[type="submit"]:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.auth-v2 .btn-primary:active,
.auth-v2 .wkbutton:active,
.auth-v2 .submit:active,
.auth-v2 input[type="submit"]:active,
.auth-v2 button[type="submit"]:active {
    background: var(--color-brand-dark);
    box-shadow: var(--shadow-xs);
    transform: translateY(1px);
}

.auth-v2 .btn-primary:disabled,
.auth-v2 .wkbutton:disabled,
.auth-v2 input[type="submit"]:disabled,
.auth-v2 button[type="submit"]:disabled,
.auth-v2 .btn-primary.is-loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--color-brand);
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Loading-state — hides text, overlays spinner */
.auth-v2 .btn-primary.is-loading,
.auth-v2 .wkbutton.is-loading,
.auth-v2 input[type="submit"].is-loading {
    color: transparent;
    position: relative;
}

.auth-v2 .btn-primary.is-loading::after,
.auth-v2 .wkbutton.is-loading::after,
.auth-v2 input[type="submit"].is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: auth-v2-spin 800ms linear infinite;
}

@keyframes auth-v2-spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   Secondary & ghost buttons.
   ---------------------------------------------------------------------------- */
.auth-v2 .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--color-surface);
    color: var(--color-text-heading);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

.auth-v2 .btn-secondary:hover {
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-heading);
    text-decoration: none;
}

.auth-v2 .btn-secondary:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.auth-v2 .btn-ghost,
.auth-v2 .forgotpass,
.auth-v2 .back,
.auth-v2 .back--signup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--color-brand);
    border: none;
    padding: 4px 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out);
}

.auth-v2 .btn-ghost:hover,
.auth-v2 .forgotpass:hover,
.auth-v2 .back:hover {
    color: var(--color-brand-hover);
    background: var(--color-brand-tint);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.auth-v2 .btn-ghost:focus-visible,
.auth-v2 .forgotpass:focus-visible,
.auth-v2 .back:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Link.
   ---------------------------------------------------------------------------- */
.auth-v2 a,
.auth-v2 .auth-link {
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color var(--duration) var(--ease-out);
}

.auth-v2 a:hover,
.auth-v2 .auth-link:hover {
    color: var(--color-brand-hover);
    text-decoration-thickness: 2px;
}

.auth-v2 a:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ghost-styled anchors (back + forgotpass) should NOT inherit the link
 * underline — their .btn-ghost/.back class already has the full ghost style. */
.auth-v2 a.btn-ghost,
.auth-v2 a.back,
.auth-v2 a.back--signup,
.auth-v2 a.forgotpass {
    text-decoration: none;
}

/* ----------------------------------------------------------------------------
   Alert banner — surfaced via Yii flash / Alert widget.
   ---------------------------------------------------------------------------- */
.auth-v2 .alert,
.auth-v2 .alert-warning,
.auth-v2 .alert-error,
.auth-v2 .alert-danger,
.auth-v2 .alert-info,
.auth-v2 .alert-success,
.auth-v2 .successmessage,
.auth-v2 .errormessage,
.auth-v2 .warningmessage,
.auth-v2 .infomessage {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 440px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 44px 14px 18px;
    margin: 0 0 var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-heading);
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: left;
    line-height: 1.5;
    opacity: 1 !important;
    text-shadow: none !important;
    z-index: auto !important;
}

.auth-v2 .alert-warning,
.auth-v2 .warningmessage {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    border-left-color: var(--color-warning);
}

.auth-v2 .alert-error,
.auth-v2 .alert-danger,
.auth-v2 .errormessage {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    border-left-color: var(--color-error);
}

.auth-v2 .alert-success,
.auth-v2 .successmessage {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    border-left-color: var(--color-success);
}

.auth-v2 .alert-info,
.auth-v2 .infomessage {
    background: #dbeafe;
    border-color: #93c5fd;
    border-left-color: #2563eb;
}

.auth-v2:has(.auth-v2__card--wide) .alert,
.auth-v2:has(.auth-v2__card--wide) [class*="message"] {
    max-width: 560px;
}

.auth-v2:has(.auth-v2__card--xwide) .alert,
.auth-v2:has(.auth-v2__card--xwide) [class*="message"] {
    max-width: 1200px;
}

/* ----------------------------------------------------------------------------
   2FA / OTP input — shown only when user has 2FA enabled.
   ---------------------------------------------------------------------------- */
.auth-v2 .form-group.field-loginform-ga_otp input,
.auth-v2 input.input--otp {
    letter-spacing: 0.3em;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 20px;
    min-height: 52px;
    font-weight: 500;
}

/* ----------------------------------------------------------------------------
   Captcha — preserve widget markup; just wrap spacing.
   ---------------------------------------------------------------------------- */
.auth-v2 .captcha,
.auth-v2 #captchaSmart {
    margin: 0 0 var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-v2 #udcaptcha-error,
.auth-v2 .reqfield {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-error-hover);
    margin: 0;
}

/* ----------------------------------------------------------------------------
   Form footer — row of links / buttons at bottom of card.
   ---------------------------------------------------------------------------- */
.auth-v2__form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.auth-v2__form-footer--centered {
    justify-content: center;
}

.auth-v2__form-footer-hint {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: var(--space-4);
}

/* ----------------------------------------------------------------------------
   Page footer — legal links below card.
   ---------------------------------------------------------------------------- */
.auth-v2__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-v2__footer a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 400;
}

.auth-v2__footer a:hover {
    color: var(--color-text-heading);
    text-decoration: underline;
}

.auth-v2__footer-sep {
    color: var(--color-border);
    user-select: none;
}

/* ----------------------------------------------------------------------------
   Standalone spinner utility — replaces legacy orange /img/ajaxloading.gif.
   ---------------------------------------------------------------------------- */
.auth-v2 .wkv2-spinner,
.wkv2-spinner {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(47, 107, 32, 0.2);
    border-top-color: var(--color-brand, #2f6b20);
    border-radius: 50%;
    animation: auth-v2-spin 800ms linear infinite;
}
.wkv2-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.wkv2-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* ----------------------------------------------------------------------------
   Screen-reader only.
   ---------------------------------------------------------------------------- */
.auth-v2 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------------
   Legacy-mute — suppress legacy wrapper / layout artefacts the V2 view inherits
   from `main.php` or from Yii field-generation macros we can't fully control.
   Also suppress the legacy `_parts/footer.php` when an auth-v2 footer is present.
   ---------------------------------------------------------------------------- */
.auth-v2 aside,
.auth-v2 .caption,
.auth-v2 .push {
    display: none;
}

/* main.php renders _parts/footer.php as a sibling of the .wrapper > .auth-v2.
 * Hide it on any page whose body contains .auth-v2 — the auth-v2 footer takes over. */
body:has(.auth-v2) .footer.footer--main {
    display: none !important;
}

/* Legacy register wrapper classes should not re-impose their border/padding
 * inside .auth-v2 — we rely on .auth-v2__card instead. */
.auth-v2 .register_container,
.auth-v2 .register,
.auth-v2 .register--login,
.auth-v2 .register--signup,
.auth-v2 .register_form,
.auth-v2 .reg-data {
    all: unset;
    display: block;
}

/* ----------------------------------------------------------------------------
   Reduced motion (WCAG 2.3.3).
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-v2,
    .auth-v2 *,
    .auth-v2 *::before,
    .auth-v2 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .auth-v2 .btn-primary.is-loading::after,
    .auth-v2 .wkbutton.is-loading::after,
    .auth-v2 input[type="submit"].is-loading::after {
        animation-duration: 2000ms !important;
    }
}

/* ----------------------------------------------------------------------------
   Forced colors (Windows High Contrast).
   ---------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .auth-v2 .btn-primary,
    .auth-v2 .wkbutton,
    .auth-v2 input[type="submit"],
    .auth-v2 button[type="submit"] {
        background: Highlight;
        color: HighlightText;
        border: 1px solid ButtonText;
    }
    .auth-v2 .form-group .form-control,
    .auth-v2 input,
    .auth-v2 select,
    .auth-v2 textarea {
        border: 1px solid FieldText;
    }
    .auth-v2 .form-group .form-control:focus-visible,
    .auth-v2 input:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
    .auth-v2 .form-group.has-error .help-block {
        color: Mark;
    }
    .auth-v2 .auth-v2__card {
        border: 1px solid ButtonText;
    }
}

/* ----------------------------------------------------------------------------
   Wrapper override — legacy main.php wraps content in `.wrapper`; when .auth-v2
   is inside that, let .auth-v2 take full control of layout.
   ---------------------------------------------------------------------------- */
.wrapper:has(> .auth-v2),
.wrapper > .auth-v2 {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

/* Fallback for browsers without :has() — reset .wrapper when auth-v2 is direct child */
body:has(.auth-v2) .wrapper {
    padding: 0;
    margin: 0;
}

/* ============================================================================
   END auth-v2.css
   ============================================================================ */