/* Shared by the real login and the isolated configuration preview. */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #eef2ff, #f8fafc);
    position: relative;
    isolation: isolate;
}
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--login-background-light, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme="dark"] .login-page { background: linear-gradient(145deg, #111827, #0b0f17); }
[data-bs-theme="dark"] .login-page::before { background-image: var(--login-background-dark, var(--login-background-light, none)); }
.login-page .login-card { width: min(430px, 100%); flex-shrink: 0; margin: auto; background: var(--bs-body-bg); }
.login-theme-toggle { z-index: 2; max-width: calc(100% - 2rem); }
.login-brand { margin: 0 auto 1.25rem; text-align: center; }
.login-brand-logo { display: block; width: min(220px, 100%); height: 100px; object-fit: contain; margin: auto; padding: .5rem .75rem; background: #fff; border-radius: .5rem; }
.login-brand [hidden] { display: none !important; }
.login-brand .login-icon { margin-bottom: 0; }
.login-page [data-login-name] { overflow-wrap: anywhere; }
@media (max-width: 575px) { .login-page { padding: 4.75rem 1rem 1.25rem; } }
@media (max-height: 550px) { .login-page { padding-top: 4.5rem; } }
.login-page .login-card { border-color: var(--bs-border-color); }
.login-page .text-secondary { color: var(--bs-secondary-color) !important; }

[data-bs-theme="dark"] .login-brand-logo {
    background: transparent;
    filter: brightness(0) invert(1);
}