/* Auth pages (sign in / 2FA / activate) — mirrors the main app's _AuthLayout look:
   full-bleed night-sky background + a centred, logo-topped card. Ported from the app's
   body.auth-bg (site.css) and _AuthLayout.cshtml.css scoped styles, minus the SPA
   transition machinery the console doesn't need. */

body.auth-bg {
    background-image: url("/img/auth/page-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.auth-card {
    width: calc(100% - 40px);
    max-width: 654px;
    border: none;
    border-radius: 10px;
    padding: 20px;
}

@media (min-width: 768px) {
    .auth-card {
        border-radius: 20px;
        padding: 50px 60px;
    }
}

/* The app strips card chrome so header/body read as one surface. */
.auth-card .card-header,
.auth-card .card-body,
.auth-card .card-footer {
    background: none;
    border-width: 0;
    padding: 0;
}

.auth-card .card-header {
    margin-bottom: 45px;
}

.card-logo {
    height: 63px;
    width: auto;
    margin-bottom: 10px;
    user-select: none;
}

/* "Control Plane" wordmark under the shared logo — distinguishes the ops console
   from the tenant-facing app while keeping the same brand logo (decision: variant б). */
.card-logo-sub {
    display: block;
    margin-bottom: 34px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

/* Bigger auth-page title/subtitle, matching the app (overrides the theme defaults;
   loaded after custom-theme.css so these win). */
.auth-card .card-title {
    font-size: 24px;
    margin-bottom: 12px;
}

.auth-card .card-subtitle {
    font-size: 14px;
}

@media (min-width: 768px) {
    .auth-card .card-title {
        font-size: 30px;
    }

    .auth-card .card-subtitle {
        font-size: 20px;
    }
}