/* Extracted from Areas/Identity/Pages/Account/Login.cshtml. Keep view-specific rules isolated here. */

.login-page {
        background:
            radial-gradient(
                circle at top left,
                rgba(33, 37, 41, 0.08),
                transparent 32rem
            ),
            linear-gradient(
                135deg,
                #f8f9fa 0%,
                #eef1f4 100%
            );
    }

    .login-shell {
        max-width: none;
        margin-inline: auto;
        padding: 1.5rem;
    }

    .login-layout {
        display: grid;
        grid-template-columns: minmax(320px, 520px) minmax(220px, 1fr);
        align-items: center;
        gap: clamp(2.5rem, 4vw, 6rem);
        width: 100%;
    }

    .login-panel {
        width: 100%;
        justify-self: start;
    }

    .tenant-brand-panel {
        width: 100%;
        justify-self: end;
    }

    .login-card {
        max-width: 520px;
        margin-inline: 0;
        background: rgba(255, 255, 255, 0.98);
    }

    .login-card .form-control {
        min-height: 3.5rem;
        border-color: #dee2e6;
    }

    .login-card .form-control:focus {
        border-color: #212529;
        box-shadow:
            0 0 0 0.2rem rgba(33, 37, 41, 0.15);
    }

    .login-error-banner {
        border-left: 5px solid #dc3545;
        animation: fadeSlideIn 0.35s ease;
    }

    .password-toggle-btn {
        z-index: 5;
        text-decoration: none;
    }

    .password-toggle-btn:hover,
    .password-toggle-btn:focus {
        color: #000 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    #login-submit {
        min-height: 3rem;
    }

    #login-submit:disabled {
        opacity: 0.9;
        cursor: not-allowed;
    }

    /*
     * Separate tenant branding area.
     * This is intentionally not styled as part of the login card.
     */
    .tenant-brand-area {
        min-height: 320px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .tenant-brand-content {
        width: 100%;
        min-height: inherit;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 1.5rem;
        text-align: right;
    }

    .tenant-logo {
        display: block;
        width: auto;
        height: auto;
        max-width: min(100%, 520px);
        max-height: 360px;
        object-fit: contain;
        filter: drop-shadow(0 18px 34px rgba(33, 37, 41, 0.14));
    }

    .tenant-logo-fallback {
        color: #6c757d;
    }

    @media (min-width: 992px) {
        .login-shell {
            width: 90vw;
            margin-inline: calc(50% - 45vw);
            padding: 2rem 0;
        }

        .tenant-brand-area {
            min-height: 560px;
        }

        .tenant-brand-content {
            padding: 2rem 0 2rem 2.5rem;
        }

        .tenant-logo {
            max-width: min(36vw, 650px);
            max-height: 500px;
        }
    }

    @media (min-width: 1200px) {
        .tenant-logo {
            max-width: min(36vw, 720px);
            max-height: 540px;
        }
    }

    @media (max-width: 991.98px) {
        .login-shell {
            padding: 1rem;
        }

        .login-layout {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .login-panel {
            order: 2;
        }

        .tenant-brand-panel {
            order: 1;
        }

        .login-card {
            margin-inline: auto;
        }

        .tenant-brand-area {
            min-height: 220px;
        }

        .tenant-brand-content {
            justify-content: center;
            padding: 1rem 1rem 0;
            text-align: center;
        }

        .tenant-logo {
            max-width: min(92%, 360px);
            max-height: 230px;
        }
    }

    @media (max-width: 575.98px) {
        .login-card .card-body {
            padding: 1.5rem !important;
        }

        .tenant-brand-area {
            min-height: 180px;
        }

        .tenant-logo {
            max-width: min(90%, 290px);
            max-height: 180px;
        }
    }

    @keyframes fadeSlideIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }