/*
 * auth-dark.css  (or append to the bottom of auth.css)
 *
 * The left brand panel is already dark blue — these rules bring the
 * right form panel into dark mode to match. All colors use MudBlazor's
 * CSS variables so they stay in sync with whatever palette your
 * MudThemeProvider defines.
 */

/* ── Right panel — swap white background for dark surface ──────────── */
.auth-panel {
    background: var(--mud-palette-background, #1a1a2e);
}

.auth-panel__inner {
    background: transparent;
}

/* ── Headings & body text ─────────────────────────────────────────── */
.auth-heading {
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
}

.auth-subheading {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.60));
}

.auth-footer-text {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.60));
}

/* ── MudBlazor inputs — outlined variant on dark needs explicit bg ── */
.auth-field .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.23);
}

.auth-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.60);
}

/* ── Separator / divider between the two panels on mobile ────────── */
.auth-shell {
    background: var(--mud-palette-background, #1a1a2e);
}

/* ── Mobile logo (shown on small screens) ────────────────────────── */
.auth-mobile-logo img {
    /* keep logo colours as-is — no filter needed */
}