/* Auth-only surfaces. Keep the existing centered containers and form markup. */
.app.auth-forms .wrap-login100 {
    max-width: 100%;
    border: 1px solid var(--dashboard-border);
    border-radius: 1rem;
    background: var(--dashboard-surface);
    color: var(--dashboard-text);
    box-shadow: 0 8px 24px var(--dashboard-shadow);
    padding: 1.5rem !important;
}

.auth-forms .login100-form-title {
    color: var(--dashboard-text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.4;
    padding-bottom: 1rem !important;
}

.auth-forms .login100-form .panel {
    margin-bottom: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.auth-forms .login100-form .panel-body {
    padding-top: .5rem !important;
    color: var(--dashboard-text);
}

.auth-forms .wrap-input100 { margin-bottom: .85rem; }

/* Only vertical sizing changes: preserve the input's horizontal padding and
   the separate leading icon/password-toggle column (including ms-0). */
.app.auth-forms .wrap-input100 > .input100.form-control {
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-color: var(--dashboard-border);
    border-radius: 0 .65rem .65rem 0;
    background-color: var(--dashboard-surface);
    color: var(--dashboard-text);
    font-size: .82rem;
}

.app.auth-forms .wrap-input100 > .input-group-text {
    min-height: 40px;
    border-color: var(--dashboard-border);
    border-radius: .65rem 0 0 .65rem;
    background-color: var(--dashboard-soft) !important;
    color: var(--dashboard-muted) !important;
}

.auth-forms .wrap-input100 > button.input-group-text { cursor: pointer; }
.auth-forms .input100::placeholder { color: var(--dashboard-muted); opacity: .8; }

.app.auth-forms .wrap-input100 > .input100:focus {
    border-color: var(--primary-bg-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-bg-color) 15%, transparent);
}

.app.auth-forms .wrap-input100 > .input100:disabled {
    background-color: var(--dashboard-soft);
    color: var(--dashboard-muted);
    opacity: 1;
}

.app.auth-forms .wrap-input100 > .input100.is-valid { border-color: #368239; }
.app.auth-forms .wrap-input100 > .input100.is-invalid { border-color: #dc3545; }

.auth-forms .container-login100-form-btn { padding-top: .5rem; }

.auth-forms .login100-form-btn {
    min-height: 40px;
    border-radius: .65rem;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-bg-color) 18%, transparent);
}

.auth-forms .login100-form-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-forms .login100-form a,
.auth-forms .custom-control-label { font-size: .8rem; }
.auth-forms .custom-control-label { color: var(--dashboard-text); }

.auth-forms .login100-form-btn:focus-visible,
.auth-forms .wrap-input100 > button:focus-visible,
.auth-forms .login100-form a:focus-visible {
    outline: 2px solid var(--primary-bg-color);
    outline-offset: 3px;
}

/* Explicit dark surfaces also override the legacy auth theme. */
body.dark-mode.auth-forms .wrap-login100,
body.dark-mode.auth-forms .wrap-input100 > .input100 {
    background-color: var(--dashboard-surface);
    color: var(--dashboard-text);
}

@media (max-width: 575.98px) {
    .app.auth-forms .wrap-login100 { padding: 1.1rem !important; }
    .auth-forms .col-login .header-brand-img { max-width: 100%; height: auto; }
}