/* Native WordPress form adapter for the shared TruExpanse admin design system. */
body.login {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--te-space-lg) var(--te-space-md);
    background: var(--te-color-page);
    color: var(--te-ink-1);
    color-scheme: dark;
}

.login #login {
    width: min(100%, 440px);
    margin: auto;
    padding: var(--te-space-xl);
    border: var(--te-border-panel);
    border-radius: var(--te-radius-shell);
    background: var(--te-color-surface-panel);
    box-shadow: var(--te-shadow-modal);
}

.login .wp-login-logo a {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--te-ink-1);
    font: 700 1.75rem / var(--te-leading-tight) var(--te-font-ui);
    text-indent: 0;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.login .wp-login-logo img,
.login .wp-login-logo svg {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 64px;
    margin-inline: auto;
    object-fit: contain;
}

.login .login-welcome {
    margin: var(--te-space-sm) 0 0;
    color: var(--te-ink-3);
    font-size: var(--te-text-sm);
    line-height: var(--te-leading-body);
    text-align: center;
}

.login form {
    margin: var(--te-space-lg) 0 0;
    padding: var(--te-space-lg) 0 0;
    border: 0;
    border-top: var(--te-border-subtle);
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.login label {
    display: block;
    margin-bottom: var(--te-space-xs);
    color: var(--te-ink-1);
    font-size: var(--te-text-sm);
    font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.login select {
    width: 100%;
    min-height: var(--te-control-height);
    margin: 0 0 var(--te-space-lg);
    padding: var(--te-space-xs) var(--te-space-md);
    border: 1px solid var(--te-rule-2);
    border-radius: var(--te-radius-control);
    background: var(--te-paper-0);
    color: var(--te-ink-1);
    font: inherit;
    box-shadow: none;
}

.login .wp-pwd input {
    padding-inline-end: var(--te-control-height);
}

.login input::placeholder {
    color: var(--te-ink-3);
}

.login input:focus,
.login select:focus {
    border-color: var(--te-focus);
    outline: 2px solid var(--te-focus);
    outline-offset: 1px;
    box-shadow: none;
}

.login .button {
    min-height: var(--te-control-height);
    height: auto;
    padding: var(--te-space-sm) var(--te-space-md);
    border: var(--te-border-subtle);
    border-radius: var(--te-radius-control);
    background: var(--te-paper-2);
    color: var(--te-ink-1);
    font: 600 var(--te-text-sm) / var(--te-leading-ui) var(--te-font-ui);
    box-shadow: none;
    text-shadow: none;
}

.login .button:hover {
    background: var(--te-paper-3);
    color: var(--te-ink-1);
    border-color: var(--te-rule-2);
}

.login .button-primary {
    width: 100%;
    float: none;
    background: var(--te-paper-inverse);
    color: var(--te-ink-inverse);
}

.login .button-primary:hover {
    background: var(--te-color-surface-contrast-strong);
    color: var(--te-ink-inverse);
}

.login .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login a:focus-visible,
.login button:focus-visible,
.login .button:focus-visible,
.login .button.wp-hide-pw:focus-visible {
    outline: 2px solid var(--te-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.login .button.wp-hide-pw {
    width: var(--te-control-height);
    height: var(--te-control-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--te-ink-2);
}

.login .button.wp-hide-pw:hover {
    color: var(--te-ink-1);
}

.login form .forgetmenot {
    display: flex;
    align-items: center;
    float: none;
    gap: var(--te-space-xs);
    margin: 0 0 var(--te-space-lg);
}

.login .forgetmenot label,
.login .pw-weak label {
    display: inline;
    margin: 0;
    color: var(--te-ink-2);
    font-weight: 400;
}

.login input[type="checkbox"] {
    appearance: auto;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--te-paper-inverse);
}

.login input[type="checkbox"]::before {
    content: none;
}

.login .message,
.login .success,
.login #login_error {
    margin: var(--te-space-lg) 0 0;
    padding: var(--te-space-md);
    border: var(--te-border-subtle);
    border-inline-start: 3px solid var(--te-focus);
    border-radius: var(--te-radius-control);
    background: var(--te-paper-2);
    color: var(--te-ink-1);
    font-size: var(--te-text-sm);
    box-shadow: none;
}

.login #login_error { border-inline-start-color: var(--te-danger); }
.login .success { border-inline-start-color: var(--te-success); }

.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
    margin: var(--te-space-lg) 0 0;
    padding: 0;
    font-size: var(--te-text-sm);
    text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link,
.login .language-switcher label {
    color: var(--te-ink-2);
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-link:hover {
    color: var(--te-ink-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login .login-footer-text {
    max-width: 440px;
    margin: 0;
    padding-top: var(--te-space-lg);
    color: var(--te-ink-3);
    font-size: var(--te-text-xs);
    text-align: center;
}

.login .language-switcher { margin-top: var(--te-space-lg); }
.login .language-switcher form { margin: 0; padding: 0; border: 0; }
.login .language-switcher select { width: auto; margin: 0; }
.login .indicator-hint { color: var(--te-ink-3); }
.login .caps-warning { color: var(--te-ink-2); }
.login .caps-icon svg { fill: currentColor; stroke: currentColor; }
.login .wp-tooltip__toggle { color: var(--te-ink-3); }
.login .wp-tooltip__bubble {
    border: var(--te-border-panel);
    border-radius: var(--te-radius-control);
    background: var(--te-paper-2);
    color: var(--te-ink-1);
    box-shadow: var(--te-shadow-tooltip);
}

@media (max-width: 480px) {
    .login #login { padding: var(--te-space-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .login #login { animation: none; }
}