body[data-page="login"] {
    min-height: 100dvh;
    overflow: hidden;
}

.login-page-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3dvh, 32px);
}

.login-page-row {
    min-height: calc(100dvh - clamp(24px, 6dvh, 64px));
    align-items: center;
    justify-content: center;
}

.login-form-column {
    z-index: 2;
    min-height: calc(100dvh - clamp(24px, 6dvh, 64px));
    padding: 0;
}

.login-background {
    z-index: 0;
}

.login-bg-image {
    object-fit: cover;
}

.login-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.05) 100%);
}

#loginBgSlider {
    position: relative;
    z-index: 0;
}

#loginBgSlider .carousel-item img {
    animation: bgZoom 18s ease-in-out infinite alternate;
}

.login-panel {
    position: relative;
    z-index: 20;
    max-width: 400px;
    max-height: calc(100dvh - clamp(24px, 6dvh, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: clamp(18px, 3.2dvh, 30px) clamp(20px, 3vw, 32px);
    border-top: 5px solid transparent;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        linear-gradient(90deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 70%, white), color-mix(in srgb, var(--bs-primary) 60%, black), color-mix(in srgb, var(--bs-primary) 80%, purple), var(--bs-primary));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 400% 100%;
    animation: panelBorderMove 8s linear infinite;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 -2px 8px rgba(108, 80, 191, 0.35);
}

.login-panel:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 25px rgba(var(--bs-primary-rgb), 0.35);
    transition: box-shadow 0.35s ease;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.login-logo {
    height: clamp(38px, 6dvh, 48px);
    margin-bottom: 6px;
}

.login-slogan {
    font-size: 12.5px;
    letter-spacing: 0.45px;
    color: #495057;
}

.login-divider {
    width: 54%;
    height: 1px;
    margin: 10px auto 14px;
    background: linear-gradient(to right, transparent, var(--bs-primary), transparent);
}

.login-page-title {
    font-size: clamp(1.05rem, 2.2dvh, 1.18rem);
    text-align: center;
}

.login-page-subtitle {
    font-size: 0.88rem;
    text-align: center;
}

#draggableLoginPanel.login-panel .form-label {
    margin-bottom: 0.32rem;
    font-size: 0.88rem;
}

#draggableLoginPanel.login-panel .form-control {
    min-height: 44px;
    padding: 0.55rem 0.78rem;
    border-radius: 0.5rem;
}

#draggableLoginPanel.login-panel #btnLogin {
    min-height: 44px;
}

#draggableLoginPanel.login-panel.is-challenge-step {
    scrollbar-gutter: auto;
}

#draggableLoginPanel.login-panel.is-challenge-step .login-challenge-panel {
    margin-top: 0.5rem !important;
}

.login-password-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.login-password-toggle {
    min-width: 74px;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.login-status-message.is-error,
.app-status-message.is-error {
    color: #b42318;
}

.login-status-message.is-neutral,
.app-status-message.is-neutral {
    color: #333;
}

.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.16);
}

.form-control[aria-invalid="true"] + .login-password-toggle {
    border-color: #dc3545;
}

.login-company-selection {
    border-color: rgba(13, 110, 253, 0.18) !important;
}

.login-company-selection .form-select {
    min-height: 44px;
    border-radius: 0.5rem;
}

.email-step-up-status {
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(108, 80, 191, 0.07);
    border: 1px solid rgba(108, 80, 191, 0.16);
}

.email-step-up-status__line {
    font-size: 0.84rem;
    color: #4f4a5f;
}

.email-step-up-status__line + .email-step-up-status__line {
    margin-top: 0.25rem;
}

@keyframes panelBorderMove {
    0% {
        background-position: 0% 0%, 0% 0%;
    }

    100% {
        background-position: 0% 0%, 400% 0%;
    }
}

@keyframes bgZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

@media (max-width: 768px) {
    .login-page-shell {
        padding: 12px;
    }

    .login-page-row,
    .login-form-column {
        min-height: calc(100dvh - 24px);
    }

    .login-panel {
        width: min(100%, 400px);
        max-height: calc(100dvh - 24px);
        padding: 18px 18px;
    }

    .login-logo {
        height: 38px;
    }

    .login-divider {
        margin: 8px auto 10px;
    }
}

@media (max-height: 720px) {
    .login-page-shell {
        padding-block: 8px;
    }

    .login-page-row,
    .login-form-column {
        min-height: calc(100dvh - 16px);
    }

    .login-panel {
        max-height: calc(100dvh - 16px);
        padding-block: 14px;
    }

    .login-logo {
        height: 34px;
    }

    .login-divider,
    .login-page-subtitle {
        margin-bottom: 0.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-panel,
    #loginBgSlider .carousel-item img {
        animation: none !important;
    }

    .login-panel:hover {
        transition: none !important;
    }
}