/* ============================================================
   Dealer-FX redesign stylesheet
   Shared by logins/Login.Redesign.aspx,
   logins/ForgetPassword/ForgetPasswordRedesign.aspx and
   logins/ResetPassword/ResetPasswordRedesign.aspx.

   REQUIRES logins/css/sui/styles.css to be linked BEFORE this file.
   That is the SUI 2.0 design system, vendored unmodified from the
   Claude Design project; every token below resolves through it, so
   without it the page renders unstyled colours and zero spacing.
   ============================================================ */

/* ==========================================================================
   SUI 2.0 tokens (Dealer-FX design system).

   These are aliases, not values. Every one resolves through sui/styles.css --
   the design system's own CSS, vendored unmodified from the Claude Design
   project -- so the palette, type ramp and spacing scale come from the design
   system rather than from numbers transcribed out of it. Each page links
   sui/styles.css before this file.

   The --dfxr-* layer stays because the rules below and the three pages' markup
   are written against it; it is now a thin naming shim over SUI, and the place
   to look when a token here has no SUI equivalent (--dfxr-font-display,
   --dfxr-promo-*, the two icon glyphs).

   Verified when this indirection was introduced: every literal that used to sit
   here resolved to the same colour through SUI, so the swap was value-preserving.
   ========================================================================== */
:root {
    --dfxr-font-sans: var(--font-sans);
    /* Not SUI: the design system is Inter throughout. Poppins is the Dealer-FX
       marketing face, used only on the promo panel's headline. */
    --dfxr-font-display: 'Poppins', var(--dfxr-font-sans);

    --dfxr-surface-default: var(--color-surface-default);
    --dfxr-surface-raised: var(--color-surface-raised);

    --dfxr-text-primary: var(--color-text-primary);
    --dfxr-text-default: var(--color-text-default);
    --dfxr-text-secondary: var(--color-text-secondary);
    --dfxr-text-disabled: var(--color-text-disabled);

    --dfxr-border-subtle: var(--color-border-subtle);
    --dfxr-border-strong: var(--color-border-strong);
    --dfxr-border-stronger: var(--color-border-stronger);

    --dfxr-action-default: var(--color-action-default);
    --dfxr-action-hover: var(--color-action-hover);
    --dfxr-action-pressed: var(--color-action-pressed);
    --dfxr-action-subtle: var(--color-action-subtle);
    --dfxr-focus-ring: var(--color-state-focus-ring);

    --dfxr-brand-primary: var(--color-brand-primary);
    --dfxr-brand-primary-hover: var(--color-brand-primary-hover);
    --dfxr-brand-primary-pressed: var(--color-brand-primary-darker);
    --dfxr-brand-secondary: var(--color-brand-secondary);

    --dfxr-error: var(--color-feedback-error-default);
    --dfxr-error-dark: var(--color-feedback-error-dark);
    --dfxr-error-lightest: var(--color-feedback-error-lightest);
    --dfxr-warning-lightest: var(--color-feedback-warning-lightest);
    --dfxr-warning-dark: var(--color-feedback-warning-dark);
    --dfxr-warning-darker: var(--color-feedback-warning-darker);
    --dfxr-success-dark: var(--color-feedback-success-dark);
    --dfxr-success-default: var(--color-feedback-success-default);
    --dfxr-success-lightest: var(--color-feedback-success-lightest);
    --dfxr-info-default: var(--color-feedback-info-default);
    --dfxr-info-lightest: var(--color-feedback-info-lightest);

    /* Filled "!" in a circle, used as a mask for field-level error messages and
       for the error-intent alert icon. */
    --dfxr-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");

    /* Outline "!" in a triangle: SI-09's Caps Lock hint and the warning-intent alert
       icon (SI-06). Geometry is the design's own path, transform included -- the
       matrix nudges the glyph down 1.5 so it sits centred in the 24 grid. */
    --dfxr-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 11.644 2.452 C 11.719 2.325 11.855 2.25 12 2.25 C 12.145 2.25 12.281 2.325 12.356 2.452 L 21.652 17.719 C 21.717 17.827 21.75 17.948 21.75 18.07 C 21.75 18.445 21.445 18.75 21.07 18.75 L 2.93 18.75 C 2.555 18.75 2.25 18.445 2.25 18.07 C 2.25 17.944 2.283 17.822 2.348 17.719 L 11.644 2.452 Z M 9.722 1.28 L 0.427 16.547 C 0.145 17.006 0 17.531 0 18.07 C 0 19.688 1.313 21 2.93 21 L 21.07 21 C 22.688 21 24 19.688 24 18.07 C 24 17.531 23.85 17.006 23.573 16.547 L 14.278 1.28 C 13.795 0.487 12.933 0 12 0 C 11.067 0 10.205 0.487 9.722 1.28 Z M 13.5 15.75 C 13.5 15.352 13.342 14.971 13.061 14.689 C 12.779 14.408 12.398 14.25 12 14.25 C 11.602 14.25 11.221 14.408 10.939 14.689 C 10.658 14.971 10.5 15.352 10.5 15.75 C 10.5 16.148 10.658 16.529 10.939 16.811 C 11.221 17.092 11.602 17.25 12 17.25 C 12.398 17.25 12.779 17.092 13.061 16.811 C 13.342 16.529 13.5 16.148 13.5 15.75 Z M 13.125 7.125 C 13.125 6.502 12.623 6 12 6 C 11.377 6 10.875 6.502 10.875 7.125 L 10.875 11.625 C 10.875 12.248 11.377 12.75 12 12.75 C 12.623 12.75 13.125 12.248 13.125 11.625 L 13.125 7.125 Z' fill-rule='nonzero' transform='matrix(1 0 0 1 0 1.5)'/%3E%3C/svg%3E");

    --dfxr-disabled-fill: var(--color-action-disabled);
    --dfxr-on-action-disabled: var(--color-action-on-action-disabled);

    /* Spacing scale */
    --dfxr-space-3xs: var(--space-3xs);
    --dfxr-space-2xs: var(--space-2xs);
    --dfxr-space-xs: var(--space-xs);
    --dfxr-space-sm: var(--space-sm);
    --dfxr-space-md: var(--space-md);
    --dfxr-space-lg: var(--space-lg);
    --dfxr-space-xl: var(--space-xl);
    --dfxr-space-2xl: var(--space-2xl);

    /* Radii / strokes */
    --dfxr-radius-box: var(--radius-box);
    --dfxr-radius-control: var(--radius-control);
    --dfxr-radius-full: var(--radius-full);
    --dfxr-stroke-sm: var(--stroke-sm);

    /* Elevation */
    --dfxr-shadow-raised: var(--shadow-raised);
    --dfxr-shadow-overlay: var(--shadow-overlay);

    /* Promo panel. Not SUI: the panel is artwork, and these two are darker than
       anything on the Obsidian ramp. */
    --dfxr-promo-bg: #141E2C;
    --dfxr-promo-tile: #0A0F16;
}

/* ---------------------------------------------------------------- shell */
html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: var(--dfxr-font-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--dfxr-text-default);
    background: var(--dfxr-surface-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body > form {
    height: 100%;
}

@keyframes dfxrAuthIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.dfxr-shell {
    display: flex;
    height: 100dvh;
    min-height: 100vh;
    width: 100%;
    background: var(--dfxr-surface-default);
    overflow: hidden;
}

.dfxr-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;
}

/* ----------------------------------------------------------- form panel */
.dfxr-form-panel {
    flex: 1 1 45%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--dfxr-surface-raised);
    position: relative;
}

.dfxr-form-scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--dfxr-space-2xl) var(--dfxr-space-xl);
    overflow-y: auto;
}

.dfxr-form-inner {
    width: 100%;
    max-width: 400px;
}

.dfxr-signin {
    display: flex;
    flex-direction: column;
    gap: var(--dfxr-space-md);
    animation: dfxrAuthIn 280ms ease;
}

.dfxr-signin-head {
    text-align: center;
    margin-bottom: var(--dfxr-space-xl);
}

/* Design spec: the stacked lockup at 104px, centred, 24px above the subtitle.
   Full-colour artwork, so it renders as a real image. */
.dfxr-signin-logo {
    height: 104px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto var(--dfxr-space-lg);
}

/* Fallback until the stacked lockup is added to /logins/images. The marks
   that ship there are solid-white alpha artwork (drawn for the old dark
   login backdrop), so the horizontal wordmark is used as a mask and painted
   in brand blue to stay legible on the white panel. Delete with the
   HasStackedLogo branch once the real asset lands. */
.dfxr-signin-logo--masked {
    height: 60px;
    width: 342px;
    background-color: var(--dfxr-brand-primary);
    -webkit-mask: url("images/dfx-horizontal.png") center center / contain no-repeat;
    mask: url("images/dfx-horizontal.png") center center / contain no-repeat;
}

.dfxr-signin-subtitle {
    font: 400 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-secondary);
}

/* --------------------------------------------------------------- alert */
/* SI-05 Unknown user and the reset-password alerts. The design draws this as a
   flat tint with a solid accent bar down the leading edge -- not an outlined
   box -- and keeps the title in ink, letting the bar and the icon carry the
   intent on their own. A red title on a red tint inside a red outline was three
   signals for one message. */
.dfxr-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--dfxr-space-sm);
    padding: var(--dfxr-space-md);
    /* Not a token: the scale stops at --dfxr-stroke-sm (1px), and this is an
       accent bar rather than a border weight. */
    border-left: 4px solid var(--dfxr-error);
    border-radius: var(--dfxr-radius-control);
    background: var(--dfxr-error-lightest);
}

/* A filled disc with a knocked-out "!" -- the same glyph the field-level
   helpers use, so the two error surfaces agree. Drawn as a mask over
   currentColor rather than inline markup: it keeps the span empty (the three
   alerts across two pages were each carrying their own copy of the SVG) and
   lets the warning intent swap the glyph from CSS. */
.dfxr-alert-icon {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    color: var(--dfxr-error);
    -webkit-mask: var(--dfxr-icon-error) center / contain no-repeat;
    mask: var(--dfxr-icon-error) center / contain no-repeat;
}

.dfxr-alert-body {
    min-width: 0;
}

.dfxr-alert-title {
    font: 600 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-primary);
}

.dfxr-alert-message {
    font: 400 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-default);
    margin-top: 2px;
}

.dfxr-alert-action {
    display: inline-block;
    margin-top: var(--dfxr-space-xs);
    font-size: 13px;
}

/* PR-06's action is a filled pill rather than a text link, so it needs the
   button classes plus this hook for the gap under the message. Kept separate
   from .dfxr-alert-action, which the sign-in alerts still use as a link. */
.dfxr-alert-cta {
    margin-top: var(--dfxr-space-sm);
}

/* SI-06 Account locked is the design's one warning-intent sign-in alert. Keeps
   the outline triangle it has always used -- only SI-05 was checked against the
   design, so the glyph is unchanged here; the shared rules above just move it
   from inline markup to a mask. */
.dfxr-alert--warning {
    border-left-color: var(--dfxr-warning-dark);
    background: var(--dfxr-warning-lightest);
}

.dfxr-alert--warning .dfxr-alert-icon {
    color: var(--dfxr-warning-dark);
    -webkit-mask-image: var(--dfxr-icon-warning);
    mask-image: var(--dfxr-icon-warning);
}

/* ---------------------------------------------------------- form field */
.dfxr-field {
    display: flex;
    flex-direction: column;
    gap: var(--dfxr-space-xs);
}

.dfxr-field-label,
.dfxr-field-label .form-control-placeholder {
    font: 600 13px/18px var(--dfxr-font-sans);
    color: var(--dfxr-text-primary);
    margin: 0;
}

.dfxr-field-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dfxr-req {
    color: var(--dfxr-error);
}

/* Per-field helper / error text. The design pairs it with a filled info icon
   and colours the whole row with the field's intent. */
.dfxr-helper {
    display: flex;
    align-items: flex-start;
    gap: var(--dfxr-space-2xs);
    font: 400 12px/16px var(--dfxr-font-sans);
    color: var(--dfxr-text-secondary);
}

.dfxr-helper[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Field-level error glyph -- a filled "!" in a circle, defined once here.

   Three shapes need it and only one of them can hold real markup:
     .dfxr-helper-icon        an empty element (sign-in field helpers)
     .error-warning::before   ASP.NET validator output is text only
     .dfxr-field-validator::before          same, on the forgot-password page
   So it is drawn as a mask over background-color: currentColor, which makes it
   inherit whatever colour the surrounding message already uses.

   The glyph is unconditional, so it appears whenever a validator renders a
   message. Do NOT put these classes on a control that is always rendered but
   usually empty (an unused asp:Label, say) -- it would show a stray glyph on
   every page load. Give such a control no class instead.
   --------------------------------------------------------------------------- */
.dfxr-helper-icon,
.error-warning::before,
.dfxr-field-validator::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--dfxr-icon-error) center / contain no-repeat;
    mask: var(--dfxr-icon-error) center / contain no-repeat;
}

/* .dfxr-helper-icon is a real element inside a flex row, so gap spaces it. */
.dfxr-helper-icon {
    margin-top: 1px;
}

/* The two validator glyphs must not rely on their parent being a flex container:
   ASP.NET writes style="display:inline" onto a Display="Dynamic" validator when it
   fires, which beats the class and would leave an inline ::before whose width and
   height are ignored. inline-block plus a margin works either way. */
.error-warning::before,
.dfxr-field-validator::before {
    display: inline-block;
    margin-right: var(--dfxr-space-2xs);
    vertical-align: -2px;
}

/* Validator messages, shared by the reset-password and forgot-password pages. */
.error-warning,
.dfxr-field-validator {
    font: 400 12px/16px var(--dfxr-font-sans);
    color: var(--dfxr-error);
}


#dfxrResetPasswordLink[hidden] {
    display: none;
}

a.dfxr-link--sm {
    font-size: 13px;
    line-height: 18px;
}

/* --------------------------------------------------------------- input */
.dfxr-input-wrap {
    position: relative;
    display: block;
}

.dfxr-input-icon {
    position: absolute;
    left: var(--dfxr-space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--dfxr-text-secondary);
    pointer-events: none;
}

.dfxr-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--dfxr-space-md);
    border: var(--dfxr-stroke-sm) solid var(--dfxr-border-strong);
    border-radius: var(--dfxr-radius-control);
    background: var(--dfxr-surface-default);
    font: 400 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-primary);
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.dfxr-input::-ms-reveal,
.dfxr-input::-ms-clear {
    display: none;
}

.dfxr-input--icon-left {
    padding-left: 44px;
}

.dfxr-input--action-right {
    padding-right: 48px;
}

.dfxr-input::placeholder {
    color: var(--dfxr-text-disabled);
    opacity: 1;
}

.dfxr-input:hover {
    border-color: var(--dfxr-border-stronger);
}

.dfxr-input:focus {
    outline: none;
    border-color: var(--dfxr-action-default);
    box-shadow: 0 0 0 2px var(--dfxr-surface-raised), 0 0 0 4px var(--dfxr-focus-ring);
}

.dfxr-field.is-error .dfxr-input {
    border-color: var(--dfxr-error);
    background: var(--dfxr-error-lightest);
}

.dfxr-field.is-error .dfxr-input-icon {
    color: var(--dfxr-error-dark);
}

.dfxr-field.is-error .dfxr-helper {
    color: var(--dfxr-error);
}

/* password reveal (ButtonUtility, 32x32) */
.dfxr-input-action {
    position: absolute;
    right: var(--dfxr-space-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--dfxr-radius-control);
    background: transparent;
    color: var(--dfxr-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dfxr-input-action:hover {
    background: rgba(0,0,0,0.05);
    color: var(--dfxr-text-primary);
}

.dfxr-input-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--dfxr-surface-raised), 0 0 0 4px var(--dfxr-focus-ring);
}

.dfxr-input-action svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* password block: field + caps-lock hint */
.dfxr-password-group {
    display: flex;
    flex-direction: column;
    gap: var(--dfxr-space-2xs);
}

.dfxr-caps {
    display: flex;
    align-items: center;
    gap: var(--dfxr-space-2xs);
    font: 500 12px/16px var(--dfxr-font-sans);
    color: var(--dfxr-warning-darker);
}

/* The design's Caps Lock glyph is the outline "!" triangle at 13px, not a caps-lock
   key symbol. Sizing only -- the glyph is inline in the markup and takes
   currentColor, so the hint survives a stale copy of this file. */
.dfxr-caps svg {
    width: 13px;
    height: 13px;
    flex: none;
}

/* ------------------------------------------------------ remember / link */
.dfxr-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dfxr-space-sm);
}

.dfxr-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--dfxr-space-xs);
    cursor: pointer;
    font: 400 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-default);
    margin: 0;
}

.dfxr-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dfxr-checkbox-box {
    width: 18px;
    height: 18px;
    flex: none;
    border: var(--dfxr-stroke-sm) solid var(--dfxr-border-stronger);
    border-radius: var(--dfxr-radius-box);
    background: var(--dfxr-surface-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.dfxr-checkbox-box svg {
    width: 12px;
    height: 12px;
    display: block;
}

.dfxr-checkbox:hover .dfxr-checkbox-box {
    border-color: var(--dfxr-action-default);
}

.dfxr-checkbox input:checked + .dfxr-checkbox-box {
    background: var(--dfxr-action-default);
    border-color: var(--dfxr-action-default);
    color: #fff;
}

.dfxr-checkbox input:focus-visible + .dfxr-checkbox-box {
    box-shadow: 0 0 0 2px var(--dfxr-surface-raised), 0 0 0 4px var(--dfxr-focus-ring);
}

a.dfxr-link,
a.dfxr-link:link,
a.dfxr-link:visited {
    font: 500 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-action-default);
    text-decoration: none;
    border-radius: 2px;
}

a.dfxr-link:hover,
a.dfxr-link:focus {
    color: var(--dfxr-action-hover);
    text-decoration: underline;
}

a.dfxr-link:focus-visible {
    outline: 2px solid var(--dfxr-focus-ring);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- buttons */
.dfxr-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dfxr-space-sm);
    width: 100%;
    height: 48px;
    padding: 0 var(--dfxr-space-lg);
    border: 0;
    border-radius: var(--dfxr-radius-full);
    font: 600 14px/1 var(--dfxr-font-sans);
    letter-spacing: 0.1px;
    cursor: pointer;
    text-align: center;
    /* Some of these are anchors (PR-06's and PR-08's actions); Bootstrap's reboot
       underlines a:hover, which no button in the design has. */
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dfxr-btn:hover,
.dfxr-btn:focus {
    text-decoration: none;
}

/* Bootstrap's reboot puts the UA focus ring on every :focus button; the design
   uses a two-tone ring on keyboard focus only. */
.dfxr-btn:focus,
.dfxr-input-action:focus,
.dfxr-locale .dfxr-locale-btn:focus {
    outline: none;
}

.dfxr-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--dfxr-surface-raised), 0 0 0 4px var(--dfxr-focus-ring);
}

.dfxr-btn svg {
    flex: none;
}

.dfxr-btn--primary {
    background: var(--dfxr-brand-primary);
    color: #fff;
}

.dfxr-btn--primary:hover {
    background: var(--dfxr-brand-primary-hover);
    color: #fff;
}

.dfxr-btn--primary:active {
    background: var(--dfxr-brand-primary-pressed);
}

.dfxr-btn--disabled,
.dfxr-btn:disabled {
    background: var(--dfxr-disabled-fill);
    color: var(--dfxr-on-action-disabled);
    cursor: default;
}

.dfxr-btn--outline {
    background: var(--dfxr-surface-raised);
    border: var(--dfxr-stroke-sm) solid var(--dfxr-border-strong);
    color: var(--dfxr-text-primary);
}

.dfxr-btn--outline:hover {
    background: var(--dfxr-surface-default);
}

.dfxr-btn--dark {
    background: #000;
    color: #fff;
}

.dfxr-btn--dark:hover {
    background: #1c1c1e;
    color: #fff;
}

.dfxr-btn--tertiary {
    background: transparent;
    color: var(--dfxr-brand-primary);
}

.dfxr-btn--tertiary:hover {
    background: rgba(52,74,107,0.07);
    color: var(--dfxr-brand-primary-hover);
}

/* PR-06: the design fills the link-expired action in the alert's own error
   colour instead of the brand navy, so the button reads as part of the alert. */
.dfxr-btn--danger {
    background: var(--dfxr-error);
    color: #fff;
}

.dfxr-btn--danger:hover {
    background: var(--dfxr-error-dark);
    color: #fff;
}

/* An action that sits inside another block rather than filling the form column:
   natural width, and the design system's default control height
   (--control-h-md, 36px) instead of the 48px form CTA. */
.dfxr-btn--inline {
    width: auto;
    height: 36px;
    padding: 0 var(--dfxr-space-md);
}

.dfxr-submit-block {
    margin-top: var(--dfxr-space-lg);
}

/* SI-02 Loading: the design puts the primary button in a loading state while
   the credentials are checked. Here that covers the postback round-trip and
   doubles as double-submit protection.

   asp:Button renders <input type="submit">, which supports NEITHER of the
   obvious techniques: it generates no ::before/::after boxes, and the engine
   ignores `color: transparent` on the value text even when set inline with
   !important. So the busy state is a real overlay element instead -- it covers
   the input and reproduces its contents: spinner + label, centred as a pair,
   which is what SI-02 shows. The label text is copied off the input at submit
   time so it stays localized. Do not move this back onto the input. */
.dfxr-submit {
    position: relative;
    display: block;
}

.dfxr-btn--loading {
    pointer-events: none;
}

.dfxr-btn-busy {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Matches .dfxr-btn's own icon/label gap so the pair sits like the button's
       normal content. */
    gap: var(--dfxr-space-sm);
    padding: 0 var(--dfxr-space-lg);
    background: var(--dfxr-disabled-fill);
    border-radius: var(--dfxr-radius-full);
    color: var(--dfxr-brand-primary);
}

.dfxr-btn-busy[hidden] {
    display: none;
}

/* Same weight/size/tracking as .dfxr-btn. The line box is 20px rather than the
   button's own `/1`, because this is a span with overflow clipping: at
   line-height 1 the 14px box cuts the descenders off "Sign In". Centred by the
   flex parent either way, so nothing moves. */
.dfxr-btn-busy-label {
    min-width: 0;
    font: 600 14px/20px var(--dfxr-font-sans);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SI-02's spinner is the SUI `spinner` glyph: seven dots on a ring, all at full
   opacity, with the eighth slot (top-right) left empty -- that gap is what makes
   the rotation legible, not an opacity ramp. Geometry read off the design's own
   <path>: r=1.5 dots on a ring of radius 10.5 about (12,12) in a 24 grid, at 45
   degree intervals. The design draws each dot as an 8-segment bezier circle;
   <circle> is the same shape, so this reproduces it exactly.

   Painted as a mask over `currentColor` -- matches the design's
   `fill="currentColor"`, and keeps this a single empty element, which matters
   because ForgetPasswordRedesign and ResetPasswordRedesign reuse the class with
   identical markup. */
.dfxr-btn-spinner {
    --dfxr-spinner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='1.5' r='1.5'/%3E%3Ccircle cx='22.5' cy='12' r='1.5'/%3E%3Ccircle cx='19.423' cy='19.423' r='1.5'/%3E%3Ccircle cx='12' cy='22.5' r='1.5'/%3E%3Ccircle cx='4.577' cy='19.423' r='1.5'/%3E%3Ccircle cx='1.5' cy='12' r='1.5'/%3E%3Ccircle cx='4.577' cy='4.577' r='1.5'/%3E%3C/svg%3E");
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    /* Only reached if mask-image is unsupported -- degrades to a spinning dot
       rather than a solid square. */
    border-radius: var(--dfxr-radius-full);
    -webkit-mask-image: var(--dfxr-spinner-glyph);
    mask-image: var(--dfxr-spinner-glyph);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: dfxrSpin 700ms linear infinite;
}

@keyframes dfxrSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dfxr-btn-spinner { animation-duration: 2s; }
}

/* -------------------------------------------------------------- divider */
.dfxr-divider {
    display: flex;
    align-items: center;
    gap: var(--dfxr-space-md);
    margin: var(--dfxr-space-lg) 0;
}

.dfxr-divider span {
    font: 400 13px/18px var(--dfxr-font-sans);
    color: var(--dfxr-text-secondary);
}

.dfxr-divider i {
    flex: 1;
    height: var(--dfxr-stroke-sm);
    background: var(--dfxr-border-subtle);
}

.dfxr-social {
    display: flex;
    flex-direction: column;
    gap: var(--dfxr-space-sm);
}

.dfxr-federated[hidden] {
    display: none;
}

/* --------------------------------------------------------------- locale */
.dfxr-locale {
    position: absolute;
    bottom: var(--dfxr-space-lg);
    left: var(--dfxr-space-lg);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--dfxr-space-2xs);
}

.dfxr-locale-globe {
    display: flex;
    color: var(--dfxr-text-secondary);
}

.dfxr-locale .dropdown {
    position: relative;
}

.dfxr-locale .dfxr-locale-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 26px 0 var(--dfxr-space-2xs);
    border: 0;
    border-radius: var(--dfxr-radius-control);
    background: transparent;
    box-shadow: none;
    font: 500 13px/18px var(--dfxr-font-sans);
    color: var(--dfxr-text-primary);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}

.dfxr-locale .dfxr-locale-btn::after {
    content: '';
    position: absolute;
    right: var(--dfxr-space-2xs);
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237D828A'%3E%3Cpath d='M3.2 5.7a.7.7 0 0 1 1 0L8 9.4l3.8-3.7a.7.7 0 1 1 1 1l-4.3 4.2a.7.7 0 0 1-1 0L3.2 6.7a.7.7 0 0 1 0-1z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    border: 0;
}

.dfxr-locale .dfxr-locale-btn:hover {
    background: var(--dfxr-surface-default);
}

.dfxr-locale .dfxr-locale-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--dfxr-surface-raised), 0 0 0 4px var(--dfxr-focus-ring);
}

/* The menu opens upward via Bootstrap's .dropup on the parent, NOT by
   overriding top/bottom here: Popper writes `top: 0` inline, and an
   absolutely-positioned box with both top and bottom set takes its height
   from the containing block, which collapses the menu to its padding. */
.dfxr-locale .dropdown-menu {
    min-width: 190px;
    padding: var(--dfxr-space-3xs);
    margin: 0 0 var(--dfxr-space-3xs);
    border: var(--dfxr-stroke-sm) solid var(--dfxr-border-subtle);
    border-radius: var(--dfxr-radius-control);
    background: var(--dfxr-surface-raised);
    box-shadow: var(--dfxr-shadow-overlay);
}

.dfxr-locale .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--dfxr-space-xs);
    padding: var(--dfxr-space-xs) var(--dfxr-space-sm);
    border-radius: 6px;
    font: 400 14px/20px var(--dfxr-font-sans);
    color: var(--dfxr-text-default);
    white-space: nowrap;
}

.dfxr-locale .dropdown-menu .dropdown-item svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.dfxr-locale .dropdown-menu .dropdown-item:hover,
.dfxr-locale .dropdown-menu .dropdown-item:focus {
    background: var(--dfxr-surface-default);
    color: var(--dfxr-text-primary);
}

.dfxr-locale .dropdown-menu .dropdown-item.active {
    background: var(--dfxr-action-subtle);
    color: var(--dfxr-action-hover);
    font-weight: 600;
}

/* ---------------------------------------------------------- brand panel */
.dfxr-brand-panel {
    flex: 1 1 55%;
    min-width: 0;
    position: relative;
    background: var(--dfxr-promo-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dfxr-promo {
    box-sizing: border-box;
    padding: 48px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dfxr-promo-head {
    margin: 0 0 28px;
}

.dfxr-promo-overline {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7E8CA0;
}

.dfxr-promo-title {
    font-family: var(--dfxr-font-display);
    font-size: 34px;
    line-height: 1.2;
    color: #F5F6F7;
    margin: 14px 0 0;
    font-weight: 600;
    letter-spacing: -.015em;
    max-width: 34ch;
}

.dfxr-promo-lede {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    margin: 14px 0 0;
    max-width: 60ch;
    line-height: 1.6;
}

.dfxr-bento {
    display: grid;
    grid-template-columns: 50% 1fr 1fr;
    grid-template-rows: minmax(150px,1fr) minmax(150px,1fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.dfxr-bento-live {
    grid-row: span 2;
    position: relative;
    overflow: hidden;
    background: var(--dfxr-promo-tile);
    border-radius: 16px;
    box-sizing: border-box;
    min-height: 0;
}

.dfxr-bento-live-photo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 20% 10%, rgba(52,74,107,.55) 0%, rgba(10,15,22,0) 60%),
        radial-gradient(90% 70% at 90% 100%, rgba(174,155,91,.22) 0%, rgba(10,15,22,0) 55%),
        linear-gradient(180deg, rgba(10,15,22,.82) 0%, rgba(10,15,22,.7) 45%, rgba(10,15,22,.86) 100%),
        url("../images/dealership-service-shop.jpg") center center / cover no-repeat,
        var(--dfxr-promo-tile);
}

.dfxr-bento-live-inner {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-sizing: border-box;
}

.dfxr-live-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dfxr-live-head span:last-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7E8CA0;
}

.ro-live {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--dfxr-success-dark);
    flex: none;
    animation: roPulse 2.4s ease-out infinite;
}

@keyframes roPulse {
    0% { box-shadow: 0 0 0 0 rgba(78,155,107,.55); }
    70% { box-shadow: 0 0 0 9px rgba(78,155,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(78,155,107,0); }
}

.ro-lane {
    position: relative;
    flex: 1;
    overflow: visible;
    margin: 0 -28px;
}

.dfxr-lane-cols {
    position: absolute;
    inset: 0;
    padding: 0 28px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.dfxr-lane-cols > div {
    padding-left: 12px;
}

.dfxr-lane-cols > div + div {
    border-left: 1px solid rgba(255,255,255,.08);
}

.dfxr-lane-cols span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.5);
}

.ro-chip {
    position: absolute;
    left: 0;
    width: 210px;
    will-change: transform;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--dfxr-surface-raised);
    border: 1px solid var(--dfxr-border-subtle);
    border-radius: var(--dfxr-radius-control);
    box-shadow: var(--dfxr-shadow-raised);
    white-space: nowrap;
    animation: roFlow 13s linear infinite;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ro-chip:hover {
    transform: translateY(-4px);
    box-shadow: var(--dfxr-shadow-overlay);
    z-index: 5;
}

@keyframes roFlow {
    0% { transform: translateX(-240px); }
    100% { transform: translateX(1110px); }
}

.ro-chip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ro-chip-ro {
    font-family: var(--dfxr-font-display);
    font-size: 13px;
    font-weight: 600;
    color: #141E2C;
}

.ro-chip-veh {
    font-size: 11px;
    color: #5B6472;
}

.ro-chip-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.ro-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: none;
}

.ro-chip-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    color: #8A94A3;
}

.dfxr-bento-stat {
    background: var(--dfxr-promo-tile);
    border-radius: 16px;
    padding: clamp(20px,2.4vw,32px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dfxr-bento-stat--wide {
    grid-column: span 2;
}

.dfxr-bento-stat-value {
    font-family: var(--dfxr-font-display);
    font-size: clamp(34px,4vw,60px);
    font-weight: 400;
    color: var(--dfxr-brand-secondary);
    letter-spacing: -.02em;
    line-height: 1;
}

.dfxr-bento-stat-label {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    line-height: 1.55;
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .ro-chip { animation: none; transform: translateX(30%); }
    .ro-live { animation: none; }
    .dfxr-signin { animation: none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .dfxr-brand-panel { display: none !important; }
    .dfxr-form-panel { flex: 1 1 100% !important; }
}

@media (max-width: 600px) {
    .dfxr-form-scroll { padding: 76px var(--dfxr-space-md) 88px !important; }
    .dfxr-signin-logo { height: 76px !important; margin-bottom: var(--dfxr-space-md) !important; }
    .dfxr-signin-logo--masked { height: 44px !important; width: 250px !important; }
    .dfxr-locale { bottom: var(--dfxr-space-md) !important; left: 50% !important; transform: translateX(-50%); }
}