/* Login Layout Styles */

:root {
    --vh: 1vh;
}

/* Desktop styles (lg and above) */
@media (min-width: 992px) {
    .login-wrapper {
        display: flex;
        align-items: stretch;
    }

    .login-logo {
        width: 50%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
    }

        .login-logo img {
            max-height: 5em;
        }

    .login-content {
        width: 50%;
        background: white;
        display: flex;
        flex-direction: column;
    }

    .min-vh-100-lg {
        min-height: 100vh !important;
    }
}

/* Mobile styles (below lg) */
@media (max-width: 991.98px) {
    .login-wrapper {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for modern browsers */
    }

    .login-logo {
        position: absolute;
        top: 0;
        left: 0;
        padding: 1rem;
        z-index: 10;
    }

        .login-logo img {
            max-height: 3.5em;
        }

    .login-content {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for modern browsers */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        padding-top: 5rem;
    }

        .login-content > div {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 1rem;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
}