/* =============================================================================
   Login — Sober Centered Design (x99)
   Keeps the sidebar/header visible; only restyles the login form itself to match
   the neutral white-transparent tokens used across invoices/dashboard/cancel.
   ============================================================================= */

/* ─── Break out of the Bootstrap .container width on login pages so the card
   can render at its full designed size regardless of viewport or sidebar. */
body.page-login .main-body > .container,
body.page-password-reset-container .main-body > .container,
body.page-clientregister .main-body > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ─── Wrapper: centers the card in whatever container the layout provides ─── */
.x99-login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    gap: 20px;
    box-sizing: border-box;
    min-height: 80vh;
    width: 100%;
}
/* Mobile: o topbar já reserva 56px via .app-main padding-top, não precisa
   de mais 40px no wrapper. Edgar 2026-04-29. */
@media (max-width: 991px) {
    .x99-login-page {
        padding: 16px;
        min-height: calc(100vh - 56px);
    }
}

/* ─── Card (square-ish) ─── */
.x99-login-card {
    width: 480px;
    min-height: 480px;
    max-width: 100%;
    background: rgba(var(--text-rgb), 0.02);
    border: 1px solid rgba(var(--text-rgb), 0.06);
    border-radius: 18px;
    padding: 32px 48px 28px;
    box-sizing: border-box;
    /* Three-row grid keeps the top (logo/title/description) and the bottom
       (back link) anchored at the same Y regardless of how tall the active
       step's body content is. */
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
}
/* Taller variant for forms with more inputs (e.g. the change-password step
   which has two password inputs + strength bar + generate chip). */
.x99-login-card--tall {
    min-height: 580px;
}

/* Top zone: logo + title + description */
.x99-login-card-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Body zone: flexible middle that holds the form(s), alerts, errors */
.x99-login-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 0; /* allow grid 1fr row to shrink when needed */
}

/* Bottom zone: signup / back-to-login link */
.x99-login-card-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ─── Logo ─── */
.x99-login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
}
.x99-login-logo .logo,
.x99-login-logo .login-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.x99-login-logo img {
    max-height: 32px;
    max-width: 180px;
    height: auto;
    width: auto;
    opacity: 0.9;
}
.x99-login-logo .logo-text {
    color: rgba(var(--text-rgb), 0.9);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

/* ─── Heading ─── */
.x99-login-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.x99-login-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: rgba(var(--text-rgb), 0.95);
    letter-spacing: -0.015em;
}
.x99-login-subtitle {
    margin: 0;
    font-size: 12px;
    color: rgba(var(--text-rgb), 0.4);
    font-weight: 400;
}

/* ─── Alerts / flash messages ───
   Sober, icon-less styling for WHMCS's flash messages rendered inside the
   login / password-reset / register card. WHMCS's default theme paints a
   FontAwesome glyph via an `::before` pseudo-element on every alert
   variant — we strip it here along with the rounded corners and shadow so
   the alert reads as a plain inline note. *)  */
.x99-login-card .alert,
.x99-login-card .alert-lagom {
    background: rgba(var(--danger-rgb), 0.08) !important;
    border: 1px solid rgba(var(--danger-rgb), 0.18) !important;
    color: rgba(254,202,202,0.9) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
}
/* Hide the stock icon glyphs so the alert is just the text. */
.x99-login-card .alert::before,
.x99-login-card .alert-lagom::before,
.x99-login-card .alert .alert-icon,
.x99-login-card .alert-lagom .alert-icon {
    display: none !important;
    content: none !important;
}
.x99-login-card .alert .alert-body,
.x99-login-card .alert-lagom .alert-body {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
/* Strip the stock bold headline that WHMCS injects as "Error!" /
   "Link Initiated!" so the alert stays one compact sentence. We keep the
   text readable but demote the bold treatment. */
.x99-login-card .alert strong,
.x99-login-card .alert-lagom strong {
    font-weight: 600 !important;
    color: inherit !important;
    opacity: 0.9;
    margin-right: 4px;
}
.x99-login-card .alert-success,
.x99-login-card .alert-lagom.alert-success {
    background: rgba(var(--success-rgb), 0.08) !important;
    border-color: rgba(var(--success-rgb), 0.18) !important;
    color: rgba(187,247,208,0.9) !important;
}
.x99-login-card .alert-info,
.x99-login-card .alert-lagom.alert-info {
    background: rgba(var(--text-rgb), 0.03) !important;
    border-color: rgba(var(--text-rgb), 0.1) !important;
    color: rgba(var(--text-rgb), 0.75) !important;
}
.x99-login-card .alert-warning,
.x99-login-card .alert-lagom.alert-warning {
    background: rgba(var(--warning-rgb), 0.08) !important;
    border-color: rgba(var(--warning-rgb), 0.2) !important;
    color: rgba(254,215,170,0.9) !important;
}
.x99-login-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Strip the provider logo (Google "G", Facebook "f", etc.) that WHMCS's
   scripts.js prepends to the pre-link feedback alert. The icon is injected
   via `$container.html(icon + feedbackMsg)` so we just hide any leading
   <img>/<svg>/<i> inside the alert container. */
.x99-login-card .providerLinkingFeedback img,
.x99-login-card .providerLinkingFeedback svg,
.x99-login-card .providerLinkingFeedback i,
.x99-login-card .providerLinkingFeedback .fa,
.x99-login-card .providerLinkingFeedback .fas,
.x99-login-card .providerLinkingFeedback .lm {
    display: none !important;
}

/* Pre-link feedback: we keep `alert-warning` (the "Quase lá! Faça o login
   manualmente para vincular a sua conta Google." prompt shown on the
   first-ever link attempt — the user actually needs to see that one) and
   `alert-danger` (real failures) visible, and hide the two tones that are
   just noise echoing the action the user just took ("Termine o login…"
   info + the transient success toast). */
.x99-login-card .providerLinkingFeedback.alert-info,
.x99-login-card .providerLinkingFeedback.alert-success {
    display: none !important;
}

/* ─── Form ─── */
.x99-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.x99-login-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.x99-login-field-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--text-rgb), 0.4);
}
.x99-login-forgot {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(var(--text-rgb), 0.45);
    text-decoration: none;
    transition: color 0.15s ease;
}
.x99-login-forgot:hover,
.x99-login-forgot:focus {
    color: rgba(var(--text-rgb), 0.85);
    text-decoration: none;
    outline: none;
}

/* Inputs — match the neutral tokens used in x99-inv-balance-btn / dashboard */
.x99-login-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: rgba(var(--text-rgb), 0.03) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    border-radius: 12px !important;
    color: rgba(var(--text-rgb), 0.92) !important;
    font-size: 14px;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.x99-login-input::placeholder {
    color: rgba(var(--text-rgb), 0.25);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
}
/* Password field uses larger bullet glyphs for the placeholder so the dots are
   legible at the same visual weight as the email placeholder text. */
.x99-login-input--password::placeholder {
    font-size: 18px;
    letter-spacing: 2px;
    color: rgba(var(--text-rgb), 0.28);
    line-height: 1;
}
.x99-login-input:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    border-color: rgba(var(--text-rgb), 0.14) !important;
}
.x99-login-input:focus {
    background: rgba(var(--text-rgb), 0.05) !important;
    border-color: rgba(var(--text-rgb), 0.22) !important;
    box-shadow: none !important;
}
/* Autofill — keep the sober look */
.x99-login-input:-webkit-autofill,
.x99-login-input:-webkit-autofill:hover,
.x99-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgba(var(--text-rgb), 0.92) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(30, 30, 36, 1) inset !important;
    transition: background-color 999999s ease-in-out 0s;
}

/* Remember me */
.x99-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(var(--text-rgb), 0.5);
    cursor: pointer;
    user-select: none;
}
.x99-login-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(var(--text-rgb), 0.18);
    border-radius: 4px;
    background: rgba(var(--text-rgb), 0.03);
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.x99-login-remember input[type="checkbox"]:hover {
    border-color: rgba(var(--text-rgb), 0.3);
}
.x99-login-remember input[type="checkbox"]:checked {
    background: rgba(var(--text-rgb), 0.18);
    border-color: rgba(var(--text-rgb), 0.35);
}
.x99-login-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 3px;
    height: 7px;
    border: solid rgba(var(--text-rgb), 0.95);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Captcha */
.x99-login-captcha {
    display: flex;
    justify-content: center;
    margin: 2px 0;
    min-height: 0;
}
.x99-login-captcha > * {
    max-width: 100%;
}

/* Submit button — red primary action; invertido como New Server */
.x99-login-submit {
    width: 100%;
    height: 50px;
    margin-top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    background: var(--c-danger) !important;     /* red CTA */
    border: none;
    border-radius: 12px;
    color: #fff !important;                     /* white text on red bg — both modes */
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 16px;
    box-sizing: border-box;
}
.x99-login-submit .x99-login-submit-text {
    color: #fff !important;
}
.x99-login-submit:hover,
.x99-login-submit:focus {
    background: var(--c-accent);                /* hover mais claro */
    color: #fff;
    outline: none;
}
.x99-login-submit:active {
    transform: translateY(1px);
}
.x99-login-submit:disabled {
    opacity: 0.85;
    cursor: wait;
}
.x99-login-submit-loader {
    display: inline-flex;
    align-items: center;
}
.x99-login-submit-loader.hidden {
    display: none;
}

/* ─── Loading shimmer (on form submit) ─── */
.x99-login-submit.is-loading {
    cursor: wait;
    pointer-events: none;
    color: transparent !important;
    background: rgba(var(--text-rgb), 0.05);
    transition: background 0.25s ease, color 0.15s ease;
}
.x99-login-submit.is-loading .x99-login-submit-text,
.x99-login-submit.is-loading .x99-login-submit-loader {
    visibility: hidden;
}
.x99-login-submit.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--text-rgb), 0.06) 35%,
        rgba(var(--text-rgb), 0.18) 50%,
        rgba(var(--text-rgb), 0.06) 65%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: x99-login-shimmer 2.4s linear infinite;
    pointer-events: none;
}
@keyframes x99-login-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Divider */
.x99-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
}
.x99-login-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(var(--text-rgb), 0.06);
}
.x99-login-divider-text {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--text-rgb), 0.3);
}

/* Linked / social providers */
.x99-login-linked,
.x99-login-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.x99-login-linked a,
.x99-login-linked .btn,
.x99-login-social a,
.x99-login-social .btn {
    background: rgba(var(--text-rgb), 0.03) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    border-radius: 10px !important;
    color: rgba(var(--text-rgb), 0.75) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
}
.x99-login-linked a:hover,
.x99-login-linked .btn:hover,
.x99-login-social a:hover,
.x99-login-social .btn:hover {
    background: rgba(var(--text-rgb), 0.05) !important;
    border-color: rgba(var(--text-rgb), 0.14) !important;
    color: #fff !important;
}

/* ─── Google Identity Services button override ───
   Strip every piece of theme chrome (background / border / radius / padding /
   shadow / transition / hover) from every wrapper the WHMCS Google linked-
   account flow ships, so the only thing on screen is Google's own rendered
   button — unstyled by this theme. */
.x99-login-linked .providerPreLinking,
.x99-login-linked .providerPreLinking *,
.x99-login-linked .social-signin-btn,
.x99-login-linked .social-signin-btn *,
.x99-login-linked .btn-social,
.x99-login-linked .btn-google,
.x99-login-linked .g_id_signin,
.x99-login-linked [id^="btnGoogleSignin"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 0 !important;
    transition: none !important;
    color: inherit !important;
    font-size: inherit !important;
    text-decoration: none !important;
}
/* Kill any hover / focus / active state our theme applied to the generic
   `.x99-login-linked a / .btn` selectors when they happen to wrap a Google
   widget. */
.x99-login-linked .providerPreLinking:hover,
.x99-login-linked .providerPreLinking:focus,
.x99-login-linked .providerPreLinking:active,
.x99-login-linked .providerPreLinking *:hover,
.x99-login-linked .providerPreLinking *:focus,
.x99-login-linked .providerPreLinking *:active,
.x99-login-linked .social-signin-btn:hover,
.x99-login-linked .social-signin-btn:focus,
.x99-login-linked .social-signin-btn:active,
.x99-login-linked .btn-google:hover,
.x99-login-linked .btn-google:focus,
.x99-login-linked .btn-google:active,
.x99-login-linked .btn-social:hover,
.x99-login-linked .btn-social:focus,
.x99-login-linked .btn-social:active,
.x99-login-linked .g_id_signin:hover,
.x99-login-linked .g_id_signin:focus,
.x99-login-linked .g_id_signin:active,
.x99-login-linked [id^="btnGoogleSignin"]:hover,
.x99-login-linked [id^="btnGoogleSignin"]:focus,
.x99-login-linked [id^="btnGoogleSignin"]:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}
/* The Google SDK renders its button inside an iframe/div — let it manage
   itself entirely (size, border-radius, hover states come from Google). */
.x99-login-linked .providerPreLinking {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

/* Signup line */
.x99-login-signup {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(var(--text-rgb), 0.4);
}
.x99-login-signup-link {
    color: var(--c-accent-warm);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.15s ease;
}
.x99-login-signup-link:hover,
.x99-login-signup-link:focus {
    color: #fecaca;
    text-decoration: none;
    outline: none;
}

/* Footer under the card */
.x99-login-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(var(--text-rgb), 0.3);
}
.x99-login-footer .login-language,
.x99-login-footer .dropdown {
    font-size: 12px;
    color: rgba(var(--text-rgb), 0.5);
}
.x99-login-footer .login-language a,
.x99-login-footer .dropdown-toggle {
    color: rgba(var(--text-rgb), 0.55) !important;
    text-decoration: none !important;
}
.x99-login-footer .login-language a:hover,
.x99-login-footer .dropdown-toggle:hover {
    color: rgba(var(--text-rgb), 0.85) !important;
}
.x99-login-copyright {
    font-size: 11px;
    color: rgba(var(--text-rgb), 0.25);
    letter-spacing: 0.02em;
}

/* ─── Neutralise the base .login / .login-wrapper / .login-body wrappers
   (used by the default Lagom layout) so they don't add an extra panel frame. */
body.page-login .login,
body.page-login .login-wrapper,
body.page-login .login-body,
body.page-login .login-header,
body.page-login .login-footer,
body.page-password-reset-container .login,
body.page-password-reset-container .login-wrapper,
body.page-password-reset-container .login-body,
body.page-password-reset-container .login-header,
body.page-password-reset-container .login-footer,
body.page-clientregister .login,
body.page-clientregister .login-wrapper,
body.page-clientregister .login-body,
body.page-clientregister .login-header,
body.page-clientregister .login-footer {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* If RSThemes uses the "sidebar" login page layout, hide its left info panel
   since we already have the actual navigation sidebar visible. */
body.page-login .main-body-sidebar,
body.page-password-reset-container .main-body-sidebar,
body.page-clientregister .main-body-sidebar {
    display: none !important;
}
body.page-login .main-body-has-sidebar,
body.page-login .main-body-has-sidebar-left,
body.page-login .main-body-has-sidebar-right,
body.page-password-reset-container .main-body-has-sidebar,
body.page-password-reset-container .main-body-has-sidebar-left,
body.page-password-reset-container .main-body-has-sidebar-right,
body.page-clientregister .main-body-has-sidebar,
body.page-clientregister .main-body-has-sidebar-left,
body.page-clientregister .main-body-has-sidebar-right {
    display: block !important;
}
body.page-login .main-body-content,
body.page-password-reset-container .main-body-content,
body.page-clientregister .main-body-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ─── Password reset — extra UI bits ─── */
/* Description line (one-liner under the title) */
.x99-login-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(var(--text-rgb), 0.5);
    text-align: center;
}

/* Back-to-login link (neutral, paired with signup link) */
.x99-login-back-link {
    color: rgba(var(--text-rgb), 0.6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.x99-login-back-link:hover,
.x99-login-back-link:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Inline message blocks (success confirmation, inline errors) */
.x99-login-message {
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
}
.x99-login-message strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-weight: 600;
}
.x99-login-message p {
    margin: 0;
    color: inherit;
}
.x99-login-message--success {
    background: rgba(var(--success-rgb), 0.08);
    border: 1px solid rgba(var(--success-rgb), 0.2);
    color: rgba(187,247,208,0.92);
}
.x99-login-message--error {
    background: rgba(var(--danger-rgb), 0.08);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
    color: rgba(254,202,202,0.92);
}

/* Strength meter label (right-aligned, subtle). Hidden until the password
   field has at least one character — we toggle it via the has-value class
   set by the change-prompt JS. */
.x99-login-strength-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(var(--text-rgb), 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.x99-login-field.has-value .x99-login-strength-label {
    opacity: 1;
}

/* Extra breathing room between the confirm-password field and the submit
   button on the change form — keeps the login submit spacing unchanged. */
.using-password-strength .x99-login-submit {
    margin-top: 10px !important;
}
.x99-login-strength-label #passwordStrengthTextLabel {
    color: inherit;
    font-size: inherit;
}
/* The pwstrength.tpl script also sets an inline color on #passwordStrengthTextLabel;
   we override the dark theme defaults where possible. */
.x99-login-card #passwordStrengthTextLabel[style*="#198810"] { color: rgba(134,239,172,0.9) !important; }
.x99-login-card #passwordStrengthTextLabel[style*="#c59301"] { color: rgba(253,224,71,0.85) !important; }
.x99-login-card #passwordStrengthTextLabel[style*="#be0f1a"] { color: rgba(252,165,165,0.9) !important; }

/* Thin progress bar (stock WHMCS markup) */
.x99-login-card .x99-login-strength-bar,
.x99-login-card .progress {
    height: 4px;
    border-radius: 4px;
    background: rgba(var(--text-rgb), 0.06);
    margin-top: 8px;
    overflow: hidden;
    box-shadow: none !important;
}
.x99-login-card .progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.2s ease, background 0.2s ease;
    background: rgba(var(--text-rgb), 0.15);
}
.x99-login-card .progress-bar-danger  { background: rgba(var(--danger-rgb), 0.7); }
.x99-login-card .progress-bar-warning { background: rgba(var(--warning-rgb), 0.7); }
.x99-login-card .progress-bar-success { background: rgba(var(--success-rgb), 0.7); }

/* Field validation states (.has-error / .has-success add a border tint) */
.x99-login-field.has-error .x99-login-input {
    border-color: rgba(var(--danger-rgb), 0.4) !important;
}
.x99-login-field.has-success .x99-login-input {
    border-color: rgba(var(--success-rgb), 0.35) !important;
}
.x99-login-field-msg .help-block {
    margin: 6px 0 0;
    font-size: 11px;
    color: rgba(252,165,165,0.9);
}

/* Hide the stock pwstrength "Generate Password" chip — we render an inline
   red link inside the input instead (.x99-pw-gen-link below). */
.x99-login-card .password-content-group {
    display: none !important;
}

/* Inline actions (eye / copy / generate) positioned inside the first password
   input on the right. */
.x99-login-input-wrap {
    position: relative;
    width: 100%;
}
.x99-login-input--has-action {
    padding-right: 78px !important;
    transition: padding-right 0.15s ease;
}
.x99-login-input-wrap.has-value .x99-login-input--has-action {
    padding-right: 138px !important;
}
.x99-pw-actions {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
}
.x99-pw-action {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    color: rgba(var(--text-rgb), 0.45);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 6px;
}
.x99-login-input-wrap.has-value .x99-pw-action {
    display: inline-flex;
}
.x99-pw-action:hover,
.x99-pw-action:focus,
.x99-pw-action:focus-visible {
    color: rgba(var(--text-rgb), 0.85);
    background: rgba(var(--text-rgb), 0.04) !important;
    outline: none !important;
}
.x99-pw-action .x99-pw-icon {
    display: block;
}
/* Eye toggle — default shows the "eye" icon; when showing password the
   is-showing class swaps to the "eye-off" icon. */
.x99-pw-eye .x99-pw-icon-eye-off { display: none; }
.x99-pw-eye.is-showing .x99-pw-icon-eye     { display: none; }
.x99-pw-eye.is-showing .x99-pw-icon-eye-off { display: block; }
/* Copy button — swaps to the green checkmark briefly after a successful copy. */
.x99-pw-copy .x99-pw-icon-check { display: none; }
.x99-pw-copy.is-copied {
    color: var(--c-success) !important;
}
.x99-pw-copy.is-copied .x99-pw-icon-copy  { display: none; }
.x99-pw-copy.is-copied .x99-pw-icon-check { display: block; }
/* "Gerar" red text link sits at the far right of the action group. */
.x99-pw-gen-link {
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    margin: 0 0 0 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--c-accent-warm) !important;
    cursor: pointer;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: color 0.15s ease;
    outline: none !important;
    border-radius: 4px !important;
}
.x99-pw-gen-link:hover,
.x99-pw-gen-link:focus,
.x99-pw-gen-link:focus-visible {
    color: #fecaca !important;
    background: transparent !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Submit variant: <input type="submit"> can't show inner spans; keep text hidden
   via color:transparent during loading (already covered by .is-loading rules). */
.x99-login-submit--input {
    /* input type=submit resets to same tokens as .x99-login-submit (already applied by base selector) */
    text-align: center;
}
.x99-login-submit:disabled:not(.is-loading):not(.x99-login-submit--success) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Hidden utility (used by the inline pwreset error box toggle) */
.x99-pwreset-error.hidden {
    display: none !important;
}

/* Disabled input in the settled success state — keep value readable but
   visually signal it can't be edited. */
.x99-pwreset-form--done .x99-login-input:disabled {
    color: rgba(var(--text-rgb), 0.6) !important;
    background: rgba(var(--text-rgb), 0.02) !important;
    cursor: default !important;
}

/* Success state — green button with checkmark, shown after link was sent. */
.x99-login-submit--success {
    background: rgba(var(--success-rgb), 0.16) !important;
    color: #86efac !important;
    cursor: default !important;
    opacity: 1 !important;
    pointer-events: none;
    animation: x99-login-success-pop 0.28s ease-out both;
}
.x99-login-submit--success .x99-login-check {
    color: var(--c-success);
    flex-shrink: 0;
    animation: x99-login-check-draw 0.35s ease-out 0.05s both;
}
@keyframes x99-login-success-pop {
    0%   { transform: scale(0.96); background: rgba(var(--success-rgb), 0.08); }
    60%  { transform: scale(1.01); }
    100% { transform: scale(1); }
}
@keyframes x99-login-check-draw {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .x99-login-page {
        padding: 24px 12px;
        min-height: 70vh;
    }
    .x99-login-card {
        width: 100%;
        height: auto;
        min-height: 460px;
        padding: 36px 26px;
        border-radius: 14px;
    }
    .x99-login-title {
        font-size: 19px;
    }
    .x99-login-card--tall {
        min-height: 560px;
    }
}

/* ============================================================================
   Generate Password modal — themed to match the reset flow.
   Scoped to login / password-reset pages so admin & other client-area flows
   that also use this modal keep the stock Lagom/Bootstrap look.
   ============================================================================ */
body.page-login #modalGeneratePassword,
body.page-password-reset-container #modalGeneratePassword {
    color: rgba(var(--text-rgb), 0.85);
}
body.page-login #modalGeneratePassword .modal-dialog,
body.page-password-reset-container #modalGeneratePassword .modal-dialog {
    max-width: 380px;
}
/* Narrow the label column so the shorter labels don't look stranded */
body.page-login #modalGeneratePassword .control-label.col-md-4,
body.page-password-reset-container #modalGeneratePassword .control-label.col-md-4 {
    max-width: 33%;
    flex: 0 0 33%;
}
body.page-login #modalGeneratePassword .col-md-8,
body.page-password-reset-container #modalGeneratePassword .col-md-8 {
    max-width: 67%;
    flex: 0 0 67%;
}
body.page-login #modalGeneratePassword .col-md-8.offset-md-4,
body.page-password-reset-container #modalGeneratePassword .col-md-8.offset-md-4 {
    margin-left: 33%;
}
body.page-login #modalGeneratePassword .modal-content,
body.page-password-reset-container #modalGeneratePassword .modal-content {
    background: var(--c-bg-elevated);
    border: 1px solid rgba(var(--text-rgb), 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    padding: 8px 4px;
    color: rgba(var(--text-rgb), 0.85);
}
body.page-login #modalGeneratePassword .modal-header,
body.page-password-reset-container #modalGeneratePassword .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(var(--text-rgb), 0.06) !important;
    padding: 18px 24px 14px !important;
    position: relative;
}
body.page-login #modalGeneratePassword .modal-title,
body.page-password-reset-container #modalGeneratePassword .modal-title {
    color: rgba(var(--text-rgb), 0.92);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0;
}
body.page-login #modalGeneratePassword .modal-header .close,
body.page-password-reset-container #modalGeneratePassword .modal-header .close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: rgba(var(--text-rgb), 0.55) !important;
    font-size: 16px;
    opacity: 1;
    text-shadow: none;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.15s ease;
}
body.page-login #modalGeneratePassword .modal-header .close:hover,
body.page-password-reset-container #modalGeneratePassword .modal-header .close:hover {
    color: rgba(var(--text-rgb), 0.9) !important;
}

body.page-login #modalGeneratePassword .modal-body,
body.page-password-reset-container #modalGeneratePassword .modal-body {
    padding: 18px 22px 20px;
    color: rgba(var(--text-rgb), 0.75);
}

/* Single-row layout: password input + copy icon + generate button.
   Scoped under #modalGeneratePassword so these rules outrank the generic
   `.modal-body .btn-default` reset defined earlier in the same file. */
body.page-login #modalGeneratePassword .x99-genpw-row,
body.page-password-reset-container #modalGeneratePassword .x99-genpw-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
body.page-login #modalGeneratePassword .x99-genpw-input,
body.page-password-reset-container #modalGeneratePassword .x99-genpw-input {
    flex: 1;
    min-width: 0;
    height: 40px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.5px;
}
body.page-login #modalGeneratePassword .x99-genpw-iconbtn,
body.page-password-reset-container #modalGeneratePassword .x99-genpw-iconbtn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: rgba(var(--text-rgb), 0.65) !important;
    box-sizing: border-box;
}
body.page-login #modalGeneratePassword .x99-genpw-iconbtn.copied,
body.page-password-reset-container #modalGeneratePassword .x99-genpw-iconbtn.copied {
    color: var(--c-success) !important;
    background: rgba(var(--success-rgb), 0.14) !important;
    border-color: rgba(var(--success-rgb), 0.28) !important;
}
body.page-login #modalGeneratePassword .x99-genpw-generate,
body.page-password-reset-container #modalGeneratePassword .x99-genpw-generate {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto;
    white-space: nowrap;
    box-sizing: border-box;
}
body.page-login #modalGeneratePassword .control-label,
body.page-password-reset-container #modalGeneratePassword .control-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--text-rgb), 0.4);
    text-align: left !important;
    padding-top: 10px;
}
body.page-login #modalGeneratePassword .form-control,
body.page-password-reset-container #modalGeneratePassword .form-control {
    height: 40px;
    padding: 0 12px;
    background: rgba(var(--text-rgb), 0.03) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    border-radius: 10px !important;
    color: rgba(var(--text-rgb), 0.92) !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.page-login #modalGeneratePassword .form-control:focus,
body.page-password-reset-container #modalGeneratePassword .form-control:focus {
    background: rgba(var(--text-rgb), 0.05) !important;
    border-color: rgba(var(--text-rgb), 0.22) !important;
}
body.page-login #modalGeneratePassword .input-inline-100,
body.page-password-reset-container #modalGeneratePassword .input-inline-100 {
    width: 100px !important;
}

/* Alert for length validation */
body.page-login #modalGeneratePassword .alert-lagom,
body.page-password-reset-container #modalGeneratePassword .alert-lagom,
body.page-login #modalGeneratePassword .alert-danger,
body.page-password-reset-container #modalGeneratePassword .alert-danger {
    background: rgba(var(--danger-rgb), 0.08) !important;
    border: 1px solid rgba(var(--danger-rgb), 0.2) !important;
    color: rgba(254,202,202,0.92) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

/* Inner action buttons: Generate new + Copy (small neutral chips) */
body.page-login #modalGeneratePassword .modal-body .btn-default,
body.page-password-reset-container #modalGeneratePassword .modal-body .btn-default {
    background: rgba(var(--text-rgb), 0.04) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    border-radius: 8px !important;
    color: rgba(var(--text-rgb), 0.7) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 7px 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-login #modalGeneratePassword .modal-body .btn-default:hover,
body.page-password-reset-container #modalGeneratePassword .modal-body .btn-default:hover,
body.page-login #modalGeneratePassword .modal-body .btn-default:focus,
body.page-password-reset-container #modalGeneratePassword .modal-body .btn-default:focus {
    background: rgba(var(--text-rgb), 0.07) !important;
    border-color: rgba(var(--text-rgb), 0.16) !important;
    color: #fff !important;
    outline: none !important;
}

/* Footer buttons */
body.page-login #modalGeneratePassword .modal-footer,
body.page-password-reset-container #modalGeneratePassword .modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(var(--text-rgb), 0.06) !important;
    padding: 14px 22px !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
body.page-login #modalGeneratePassword .modal-footer .btn,
body.page-password-reset-container #modalGeneratePassword .modal-footer .btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-login #modalGeneratePassword .modal-footer .btn-default,
body.page-password-reset-container #modalGeneratePassword .modal-footer .btn-default {
    background: rgba(var(--text-rgb), 0.05) !important;
    border: 1px solid rgba(var(--text-rgb), 0.12) !important;
    color: rgba(var(--text-rgb), 0.75) !important;
}
body.page-login #modalGeneratePassword .modal-footer .btn-default:hover,
body.page-password-reset-container #modalGeneratePassword .modal-footer .btn-default:hover {
    background: rgba(var(--text-rgb), 0.08) !important;
    border-color: rgba(var(--text-rgb), 0.2) !important;
    color: #fff !important;
}
/* Primary "Copy and insert" action uses the same red tone as the submit button */
body.page-login #modalGeneratePassword .modal-footer .btn-primary,
body.page-password-reset-container #modalGeneratePassword .modal-footer .btn-primary {
    background: rgba(var(--danger-rgb), 0.18) !important;
    border: 1px solid rgba(var(--danger-rgb), 0.35) !important;
    color: #fecaca !important;
}
body.page-login #modalGeneratePassword .modal-footer .btn-primary:hover,
body.page-password-reset-container #modalGeneratePassword .modal-footer .btn-primary:hover {
    background: rgba(var(--danger-rgb), 0.28) !important;
    border-color: rgba(var(--danger-rgb), 0.55) !important;
    color: #fff !important;
}

/* Backdrop */
body.page-login .modal-backdrop.show,
body.page-password-reset-container .modal-backdrop.show {
    background: #000;
    opacity: 0.6;
}