/* =============================================================================
   Login redesign — two-column auth surface (VOC-4853 follow-up)
   Scoped under .lg-* and the body.login wrapper. Token-driven (design.md);
   brand-adaptive via data-brand (brand-theming.md). No hardcoded brand hex —
   accents come from --interactive-primary / --primary-* which switch per brand.
   ============================================================================= */

:root {
    --lg-radius: 12px;
    --lg-radius-lg: 20px;
    /* Single accent the whole login surface keys off. Defaults to the brand-adaptive
       DS token; overridden per brand below where the global token doesn't resolve. */
    --lg-primary: var(--interactive-primary);
    --lg-accent: var(--lg-primary);
    --lg-accent-2: var(--primary-2d);
}

/* Uniden — neutral charcoal scheme. The global theme-tokens penumbra override does not
   win on the login surface, so pin the login accents to the penumbra ramp directly. */
html[data-brand="uniden"] {
    --lg-primary: var(--brand-penumbra-4d);
    --lg-accent: var(--brand-penumbra-3d);
    --lg-accent-2: var(--brand-penumbra-2d);
}

/* Uniden: the charcoal accent ramp (penumbra 2d/3d) reads as washed-out grey on
   the hero cycling word and the Australia map. Pin those to the near-black ink
   instead — black, not grey. The aurora glows keep the softer accents so the
   panel background stays light. Login surface only (this file is login-scoped). */
html[data-brand="uniden"] .lg-cycle-word {
    background: none;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}
html[data-brand="uniden"] .lg-map-fill {
    fill: color-mix(in srgb, var(--text-primary) 12%, transparent);
    stroke: color-mix(in srgb, var(--text-primary) 42%, transparent);
}
html[data-brand="uniden"] .lg-city-pin   { stroke: var(--text-primary); }
html[data-brand="uniden"] .lg-city-glow  { fill: var(--text-primary); }
html[data-brand="uniden"] .lg-arc-route  { stroke: color-mix(in srgb, var(--text-primary) 30%, transparent); }
html[data-brand="uniden"] .lg-arc-glow   { stroke: color-mix(in srgb, var(--text-primary) 45%, transparent); }
html[data-brand="uniden"] .lg-arc-comet  { stroke: var(--text-primary); }
html[data-brand="uniden"] .lg-ping       { stroke: var(--text-primary); }

/* Defeat legacy login.min.css: forced blue body bg + 400px centered card */
body.login {
    background: var(--surface-primary) !important;
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
}

.lg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

/* =========================================================================
   LEFT — brand panel
   ========================================================================= */
.lg-brand {
    position: relative;
    padding: var(--space-xl) var(--space-2xl);
    color: var(--text-primary);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--lg-accent) 6%, var(--surface-primary)) 0%,
            color-mix(in srgb, var(--lg-accent) 12%, var(--surface-primary)) 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    isolation: isolate;
    border-right: 1px solid var(--border-primary);
}
.lg-brand > * { position: relative; z-index: 3; }

/* Aurora blobs (VOC) */
.lg-aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}
.lg-aurora span {
    position: absolute;
    display: block;
    width: 520px; height: 520px;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
}
.lg-aurora .a1 { background: radial-gradient(circle, var(--lg-accent) 0%, transparent 60%); top: -10%; left: -10%; animation: lg-drift1 18s ease-in-out infinite alternate; }
.lg-aurora .a2 { background: radial-gradient(circle, var(--lg-accent-2) 0%, transparent 60%); top: 30%; left: 35%; animation: lg-drift2 22s ease-in-out infinite alternate; }
.lg-aurora .a3 { background: radial-gradient(circle, var(--primary-3d) 0%, transparent 60%); bottom: -10%; right: -5%; animation: lg-drift3 26s ease-in-out infinite alternate; }
.lg-aurora .a4 { background: radial-gradient(circle, var(--lg-accent) 0%, transparent 60%); top: 55%; left: -5%; width: 380px; height: 380px; opacity: 0.6; animation: lg-drift1 30s ease-in-out infinite alternate-reverse; }
@keyframes lg-drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(80px,60px,0) scale(1.15); } }
@keyframes lg-drift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-100px,40px,0) scale(0.9); } }
@keyframes lg-drift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-60px,-80px,0) scale(1.1); } }

.lg-brand-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.lg-brand-logo img { display: block; height: 64px; max-height: 64px; width: auto; }

.lg-brand-hero { margin-top: var(--space-l); }
.lg-eyebrow {
    display: inline-block;
    font-size: var(--step--3);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-m);
}
.lg-brand-headline {
    font-size: var(--step-7);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin-bottom: var(--space-m);
    color: var(--text-primary);
}
.lg-brand-hero p {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    max-width: 460px;
}

/* Cycling word */
.lg-cycle-wrap { display: inline-block; position: relative; vertical-align: bottom; min-width: 6ch; text-align: left; }
.lg-cycle-word {
    position: absolute; left: 0; top: 0; white-space: nowrap;
    opacity: 0; transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
    background: linear-gradient(90deg, var(--lg-accent) 0%, var(--lg-accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lg-cycle-word.active { opacity: 1; transform: translateY(0); }
.lg-cycle-word.leaving { opacity: 0; transform: translateY(-20px); }
.lg-cycle-spacer { visibility: hidden; display: inline-block; white-space: nowrap; transition: width 400ms cubic-bezier(0.4,0,0.2,1); }

/* Australia map */
.lg-map { position: relative; width: 66%; margin: var(--space-l) auto 0; aspect-ratio: 1 / 1; }
.lg-map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-map-fill {
    fill: color-mix(in srgb, var(--lg-accent) 10%, transparent);
    stroke: var(--border-secondary);
    stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round;
}
.lg-city-pin { fill: var(--surface-pure); stroke: var(--lg-accent); stroke-width: 2; }
.lg-city-glow { fill: var(--lg-accent); opacity: 0.35; transform-origin: center; transform-box: fill-box; animation: lg-city-breathe 3s ease-in-out infinite; }
@keyframes lg-city-breathe { 0%,100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.6); opacity: 0.55; } }
.lg-city-label {
    font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600;
    fill: var(--text-primary); pointer-events: none; paint-order: stroke;
    stroke: color-mix(in srgb, var(--surface-primary) 90%, transparent); stroke-width: 4; stroke-linejoin: round;
}
.lg-arc-route { fill: none; stroke: color-mix(in srgb, var(--lg-accent) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round; }
.lg-arc-glow { fill: none; stroke: color-mix(in srgb, var(--lg-accent) 55%, transparent); stroke-width: 9; stroke-linecap: round; filter: blur(5px); opacity: 0.85; }
.lg-arc-comet { fill: none; stroke: url(#lgArcGradient); stroke-width: 2.6; stroke-linecap: round; }
.lg-ping { fill: none; stroke: var(--lg-accent); stroke-width: 2.5; opacity: 0; }
.lg-ping.go { animation: lg-ping-expand 1200ms cubic-bezier(0.2,0.6,0.3,1) forwards; }
@keyframes lg-ping-expand { 0% { r: 4; opacity: 0; stroke-width: 3; } 10% { r: 6; opacity: 0.95; stroke-width: 3; } 100% { r: 38; opacity: 0; stroke-width: 0.8; } }

/* =========================================================================
   RIGHT — form panel
   ========================================================================= */
.lg-panel {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--surface-primary);
    overflow: hidden;
}
.lg-form-wrap { position: relative; width: 100%; max-width: 420px; z-index: 1; }

.lg-mobile-logo { display: none; margin-bottom: var(--space-l); }
.lg-mobile-logo img { display: block; height: 52px; max-height: 52px; width: auto; }

.lg-heading { margin-bottom: var(--space-l); }
.lg-heading__title {
    font-size: var(--step-5);
    line-height: 1.15; font-weight: 700; letter-spacing: -0.025em;
    color: var(--text-primary); margin-bottom: var(--space-3xs);
}
.lg-heading__sub { font-size: var(--step-0); color: var(--text-tertiary); }

.fieldsContainer { position: relative; }

/* Fields */
.lg-field { margin-bottom: var(--space-s); }
.lg-label {
    display: block; font-size: var(--step--1); font-weight: 600;
    color: var(--text-primary); margin-bottom: var(--space-2xs);
}
.lg-input-wrap { position: relative; }
.lg-lead-icon {
    position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
    color: var(--text-tertiary); pointer-events: none; transition: color 120ms ease;
}
.lg-lead-icon svg { width: 18px; height: 18px; display: block; }
.lg-input-wrap .lg-input {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: var(--step-0); color: var(--text-primary);
    background: var(--surface-container-low);
    border: 1px solid var(--border-secondary); border-radius: var(--lg-radius);
    padding: 13px 14px 13px 44px;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.lg-input-wrap .lg-input::placeholder { color: var(--text-tertiary); }
.lg-input-wrap .lg-input:hover { background: var(--surface-container); border-color: var(--border-primary); }
.lg-input-wrap .lg-input:focus {
    outline: none; background: var(--surface-pure);
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-primary) 18%, transparent);
}
.lg-input-wrap:focus-within .lg-lead-icon { color: var(--lg-primary); }
.lg-input-wrap--toggle .lg-input { padding-right: 44px; }
.lg-toggle-pwd {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: transparent; border: 0; padding: 6px; cursor: pointer;
    color: var(--text-tertiary); border-radius: 8px;
    transition: color 120ms ease, background 120ms ease;
}
.lg-toggle-pwd:hover { color: var(--text-primary); background: var(--surface-container); }
.lg-toggle-pwd svg { display: block; width: 18px; height: 18px; }

.lg-hint { margin-top: var(--space-3xs); font-size: var(--step--1); color: var(--text-tertiary); line-height: 1.5; }
.lg-form-row { display: flex; justify-content: flex-end; align-items: center; margin: var(--space-3xs) 0 var(--space-m); }
.lg-link { font-size: var(--step--1); font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color 120ms ease; }
.lg-link:hover { color: var(--lg-primary); }
.lg-link-strong { color: var(--text-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border-secondary); transition: border-color 120ms ease; }
.lg-link-strong:hover { border-bottom-color: var(--lg-primary); }

/* Primary submit (brand-adaptive fill) */
.lg-submit {
    position: relative; width: 100%;
    font-family: inherit; font-size: var(--step-0); font-weight: 600;
    color: var(--on-interactive-primary, #fff);
    background: var(--lg-primary);
    border: 1px solid var(--lg-primary);
    border-radius: var(--lg-radius); padding: 14px 18px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: filter 120ms ease, box-shadow 200ms ease, transform 120ms ease;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--lg-primary) 60%, transparent);
}
.lg-submit:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--lg-primary) 55%, transparent); }
.lg-submit:active:not(:disabled) { transform: translateY(1px); }
.lg-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.lg-submit__arrow { transition: transform 200ms ease; }
.lg-submit:hover:not(:disabled) .lg-submit__arrow { transform: translateX(3px); }
.lg-submit--inline { width: auto; }

/* Two-factor */
/* The forced-2FA enrollment block (.force2FAUsageContainer, legacy display:flex
   from components.min.css) and the 2FA code-challenge block (.twoFactorContainer,
   set to display:flex inline by the JS) both default to flex-row, which cramps
   their items onto a single row. Force a vertical stack on the login surface only —
   these classes are reused on account pages. */
.lg-form-wrap .force2FAUsageContainer,
.lg-form-wrap .twoFactorContainer { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
/* Two competing .lcs_cursor rules ship with the LC-switch widget: an injected
   inline <style> centres the knob via `top:50%; margin-top:-11px`, while
   lc_switch.css uses `top:3px`. Source order mixes them (top:3px + margin-top:-11px)
   so the knob renders 8px above the track. Neutralise the stray margin here so
   `top:3px` centres the 22px knob in the 28px track. Scoped to the login surface. */
.lg-form-wrap .lcs_cursor { margin-top: 0; }
.lg-2fa-links { display: flex; flex-direction: column; gap: var(--space-4xs); margin-bottom: var(--space-s); }
.lg-checkbox { display: flex; align-items: center; gap: var(--space-3xs); font-size: var(--step-0); color: var(--text-primary); margin-bottom: var(--space-s); cursor: pointer; }
.lg-2fa-title { font-size: var(--step-1); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-s); display: flex; align-items: center; }
.lg-2fa-method { display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-s); }
.lg-2fa-method__label { margin: 0; font-size: var(--step-0); color: var(--text-primary); }
.lg-2fa-method__label.opacity-60 { opacity: 0.6; }

/* Forgot-password actions */
.lg-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-m); }
.lg-btn-secondary {
    font-family: inherit; font-size: var(--step-0); font-weight: 600;
    color: var(--lg-primary); background: var(--surface-pure);
    border: 1px solid var(--border-secondary); border-radius: var(--lg-radius);
    padding: 13px 18px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease;
}
.lg-btn-secondary:hover { background: var(--surface-container-low); border-color: var(--lg-primary); }

/* Loading / authenticating */
.loadingContainer { flex-direction: column; align-items: center; justify-content: center; min-height: 200px; gap: var(--space-s); }
.loadingMessage { color: var(--text-secondary); font-size: var(--step-0); font-weight: 600; }
.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 40px; }
.lds-ellipsis div { position: absolute; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--lg-primary); animation-timing-function: cubic-bezier(0,1,1,0); }
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lg-lds1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lg-lds2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lg-lds2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lg-lds3 0.6s infinite; }
@keyframes lg-lds1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes lg-lds3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes lg-lds2 { 0% { transform: translate(0,0); } 100% { transform: translate(24px,0); } }

/* Small inline spinner (resend email, loaderCont) */
.loader { border: 3px solid var(--border-primary); border-top: 3px solid var(--lg-primary); border-right: 3px solid var(--lg-primary); border-radius: 50%; width: 16px; height: 16px; animation: lg-spin 1s linear infinite; display: inline-block; margin-left: 8px; }
.loaderCont { display: inline-flex; align-items: center; }
@keyframes lg-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Alerts (restyle legacy OkMessage/ErrorMessage Bootstrap output to DS tokens) */
.lg-form-wrap .alert,
.loginContainer .alert,
.twoFactorContainer .alert {
    border-radius: 6px; padding: var(--space-2xs) var(--space-s);
    font-size: var(--step--1); font-weight: 500; border: 1px solid;
    margin-bottom: var(--space-s);
}
.lg-form-wrap .alert-danger,
.loginContainer .alert-danger,
.twoFactorContainer .alert-danger { background: var(--status-error-background); color: var(--status-error-text); border-color: var(--border-error); }
.lg-form-wrap .alert-success,
.loginContainer .alert-success,
.twoFactorContainer .alert-success { background: var(--status-success-background); color: var(--status-success-text); border-color: var(--border-success); }

/* Help row + footer */
.lg-help-row { display: flex; justify-content: center; gap: 6px; font-size: var(--step--1); color: var(--text-tertiary); margin-top: var(--space-l); }
.lg-panel-footer { position: absolute; left: 0; right: 0; bottom: var(--space-m); text-align: center; font-size: var(--step--1); color: var(--text-tertiary); display: flex; justify-content: center; gap: var(--space-m); }
.lg-panel-footer a { color: var(--text-tertiary); text-decoration: none; }
.lg-panel-footer a:hover { color: var(--text-primary); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
    .lg-layout { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
    .lg-brand { display: none; }
    .lg-mobile-logo { display: block; }
    .lg-panel { padding: var(--space-xl) var(--space-l) 96px; min-height: 100vh; }
}
@media (max-width: 480px) {
    .lg-heading__title { font-size: var(--step-4); }
    .lg-panel { padding: var(--space-l) var(--space-m) 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-aurora span, .lg-city-glow, .lds-ellipsis div, .loader { animation: none !important; }
}