/* Layout for Views/Account/Login.cshtml when restyled to match the Azurio public-site theme.
   Relies on CSS custom properties + reset from ~/lib/azurio/css/main.min.css, which Login.cshtml
   loads ahead of this file via its own @section styles. plugins.css is deliberately NOT loaded
   on this page (768KB of unused Bootstrap-grid/Phosphor/Swiper CSS caused a visible flash of
   unstyled inputs) - the couple of margin resets it would have provided for h2/p are done here
   instead, scoped to just this page's markup. */

/* :where() keeps this reset's specificity at just the element (h2/p/form), so it never
   outranks a more specific rule like .mxd-auth-card__subtitle's own margin-bottom below -
   plain ".mxd-auth-card p" (0,1,1) was beating ".mxd-auth-card__subtitle" (0,1,0) and
   silently zeroing the gap before the form. */
:where(.mxd-auth-card) h2,
:where(.mxd-auth-card) p,
:where(.mxd-auth-card) form {
    margin: 0;
    padding: 0;
}

.mxd-auth-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: var(--base);
}

.mxd-auth-card {
    width: 100%;
    max-width: 46rem;
}

.mxd-auth-card__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 3.2rem;
}
.mxd-auth-card__logo .mxd-logo {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.mxd-auth-card__logo .mxd-logo__image {
    width: 3.2rem;
    height: auto;
    fill: var(--t-bright);
}
.mxd-auth-card__logo .mxd-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font: normal 700 1.8rem var(--_font-default);
    color: var(--t-bright);
}

.mxd-auth-card__title {
    text-align: center;
    margin-bottom: 1.2rem;
}

.mxd-auth-card__subtitle {
    text-align: center;
    color: var(--t-medium);
    margin-bottom: 3.2rem;
}

.mxd-auth-form .mxd-grid-item {
    margin-bottom: 2.4rem;
}

/* main.css's generic "form input" rule uses var(--_font-accent) (JetBrains Mono, the
   code/tag font) - override to the theme's default body font for these auth fields. */
.mxd-auth-form input {
    font-family: var(--_font-default);
}
/* Indent the username/password text (and placeholders) off the field's left edge. */
.mxd-auth-form .mxd-grid-item input {
    padding-left: 1.6rem;
}

.mxd-auth-form__password {
    position: relative;
}
.mxd-auth-form__password input {
    padding-right: 4.8rem;
}
.mxd-auth-form__password .show-hide {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}
.mxd-auth-form__password .password-toggle {
    color: var(--t-medium);
    display: inline-flex;
    cursor: pointer;
}
.mxd-auth-form__password .password-toggle svg {
    width: 1.8rem;
    height: 1.8rem;
}

.mxd-auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}
.mxd-auth-form__remember {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.mxd-auth-form__remember input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.mxd-auth-form__remember label {
    color: var(--t-medium);
    /* Same size as the subtitle (theme's base var(--_size) paragraph text) - matches
       AcceptTerms-azurio.css's equivalent label. */
    font: normal 500 var(--_size) / 1.4 var(--_font-default);
    margin: 0;
    cursor: pointer;
}

.mxd-auth-form__submit {
    margin-bottom: 2.4rem;
}

.mxd-auth-form__signup {
    text-align: center;
    color: var(--t-medium);
    margin-bottom: 0;
}
.mxd-auth-form__signup a {
    color: var(--t-bright);
    text-decoration: underline;
    margin-left: 0.4rem;
}

.mxd-auth-form__languages {
    margin-bottom: 2rem;
}
/* AccountLanguages view component renders plain Bootstrap badges - restyled here to match
   the theme instead of touching the shared component (also used by the non-Azurio Account
   layouts in the base template and BugNix customizations). Bootstrap's bg-*/text-*/border
   utilities are !important, so these overrides have to be too. */
.mxd-auth-form__languages .badge {
    font: normal 500 1.2rem var(--_font-accent) !important;
    letter-spacing: 0.05rem;
    padding: 0.6rem 1.2rem !important;
    border-radius: 0.4rem !important;
    transition: background-color var(--_animspeed-medium) var(--_animbezier),
        color var(--_animspeed-medium) var(--_animbezier),
        border-color var(--_animspeed-medium) var(--_animbezier);
}
.mxd-auth-form__languages .badge.bg-primary {
    background-color: var(--accent) !important;
    color: var(--t-opp-bright) !important;
}
.mxd-auth-form__languages .badge.bg-light {
    background-color: transparent !important;
    color: var(--t-medium) !important;
    border-color: var(--t-muted-extra) !important;
}
.mxd-auth-form__languages a:hover .badge.bg-light {
    color: var(--t-bright) !important;
    border-color: var(--t-medium) !important;
}

.mxd-auth-card__version {
    text-align: center;
    color: var(--t-medium);
    font: normal 500 1.2rem var(--_font-accent);
    margin-top: 3.2rem;
    margin-bottom: 0;
}

/* Tenant selection - shown instead of the form when the credentials match more than one tenant */
.mxd-auth-tenants__title {
    text-align: center;
    margin: 0 0 0.8rem;
    color: var(--t-bright);
}
.mxd-auth-tenants__detail {
    text-align: center;
    margin: 0 0 2rem;
    color: var(--t-medium);
}
.mxd-auth-tenants__list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mxd-auth-tenants__item {
    width: 100%;
    text-align: left;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--t-muted-extra);
    border-radius: 0.8rem;
    background: transparent;
    color: var(--t-bright);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--_animspeed-medium) var(--_animbezier),
        color var(--_animspeed-medium) var(--_animbezier);
}
.mxd-auth-tenants__item:hover,
.mxd-auth-tenants__item:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}
.mxd-auth-tenants__back {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--t-medium);
    font: inherit;
    cursor: pointer;
}
.mxd-auth-tenants__back:hover {
    color: var(--t-bright);
}

/* Two-factor verify step - reuses the tenant-selection panel's title/detail/back styles above */
.mxd-auth-2fa .mxd-auth-form {
    margin-top: 0.4rem;
}
.mxd-auth-2fa .mxd-auth-2fa__code {
    padding-left: 1.6rem;
    font: normal 500 2rem var(--_font-accent);
    letter-spacing: 0.6rem;
    text-align: center;
}
.mxd-auth-2fa .mxd-auth-2fa__code.is-recovery {
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
}
.mxd-auth-2fa__error {
    margin: 0.8rem 0 0;
    color: #ff6b6b;
    font: normal 500 1.4rem/1.4 var(--_font-default);
}
.mxd-auth-2fa__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.2rem;
}