/* ---- Login page — split layout: illustration left, form right ---- */
.login-visual {
    background: var(--border-light);
    min-height: 420px;
}

.login-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The image column stretches to match the form column's height (Bootstrap
   .row default), but the form column's own content only sizes to its
   content unless told to fill that height too — same lesson as the
   wizard's type-card labels earlier. Centering vertically here means the
   form doesn't look top-anchored with a lot of empty space below it next
   to a tall illustration. */
.login-form-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.login-password-wrap {
    position: relative;
}

.login-password-wrap .form-control {
    padding-right: 2.75rem;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #94a3b8;
    border-radius: 0.4rem;
}

.login-password-toggle:hover {
    color: #64748b;
    background: rgba(15, 23, 42, 0.05);
}

@media (max-width: 991.98px) {
    .login-visual {
        min-height: 0;
    }

    .login-form-col {
        height: auto;
    }
}