:root {
    --vertiq-green: #8bc53f;
    --vertiq-green-dark: #2e7d32;
    --vertiq-navy: #0b1320;
    --vertiq-slate: #1d2633;
    --vertiq-white: #ffffff;
    --vertiq-border: #d8dee8;
    --vertiq-muted: #6c7685;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;

    color: var(--vertiq-navy);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background-color: #eef3f8;
}

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px 20px 34px;

    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(238, 245, 251, 0.02) 100%
        ),
        url("../img/login-background.png");

    background-position:
        center center,
        center bottom;

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        cover,
        cover;
}

.login-wrapper {
    width: 100%;
    max-width: 500px;

    animation:
        login-enter 0.55s ease-out both;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;
}

.login-logo-vertiq {
    display: block;

    width: min(100%, 390px);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 20px rgba(11, 19, 32, 0.08)
        );
}

.login-card {
    padding: 32px 40px 25px;

    border:
        1px solid rgba(255, 255, 255, 0.84);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 24px 60px rgba(11, 19, 32, 0.18);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.login-client {
    min-height: 36px;
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.login-client-logo {
    display: block;

    max-width: 210px;
    max-height: 78px;

    object-fit: contain;
}

.login-client-name {
    color: var(--vertiq-green-dark);

    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.login-heading {
    margin-bottom: 25px;

    text-align: center;
}

.login-heading h1 {
    margin: 0 0 8px;

    color: var(--vertiq-navy);

    font-size: 1.6rem;
    font-weight: 600;
}

.login-heading p {
    margin: 0;

    color: var(--vertiq-muted);

    font-size: 0.92rem;
}

.form-label {
    margin-bottom: 7px;

    color: var(--vertiq-navy);

    font-size: 0.88rem;
    font-weight: 500;
}

.login-input-group {
    position: relative;
}

.login-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #667184;

    transform:
        translateY(-50%);

    pointer-events: none;
}

.login-input-group .form-control {
    min-height: 50px;

    padding:
        11px 48px 11px 47px;

    color: var(--vertiq-navy);

    font-size: 0.93rem;

    border:
        1px solid var(--vertiq-border);

    border-radius: 7px;

    background-color:
        rgba(255, 255, 255, 0.98);

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.login-input-group .form-control::placeholder {
    color: #8b94a3;
}

.login-input-group .form-control:focus {
    border-color:
        var(--vertiq-green);

    box-shadow:
        0 0 0 0.2rem
        rgba(139, 197, 63, 0.18);
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: #667184;

    border: 0;
    border-radius: 50%;

    background: transparent;

    transform:
        translateY(-50%);
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    color:
        var(--vertiq-green-dark);

    background-color:
        rgba(139, 197, 63, 0.1);

    outline: none;
}

.login-submit {
    min-height: 50px;
    margin-top: 8px;

    color: var(--vertiq-white);

    font-size: 0.96rem;
    font-weight: 600;

    border: 0;
    border-radius: 7px;

    background:
        linear-gradient(
            90deg,
            var(--vertiq-green-dark) 0%,
            var(--vertiq-green) 100%
        );

    box-shadow:
        0 10px 24px
        rgba(46, 125, 50, 0.2);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.login-submit:hover,
.login-submit:focus {
    color: var(--vertiq-white);

    filter:
        brightness(1.03);

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 28px
        rgba(46, 125, 50, 0.25);
}

.login-card-footer {
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: var(--vertiq-muted);

    font-size: 0.75rem;
}

.alert {
    padding: 10px 12px;

    font-size: 0.84rem;

    border-radius: 7px;
}

.invalid-feedback {
    margin-top: 5px;

    font-size: 0.77rem;
}

@keyframes login-enter {
    from {
        opacity: 0;

        transform:
            translateY(14px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@media (max-width: 575.98px) {
    .login-page {
        align-items: flex-start;

        padding:
            22px 14px 28px;

        background-position:
            center center,
            center bottom;

        background-size:
            cover,
            auto 100%;
    }

    .login-brand {
        margin-bottom: 14px;
    }

    .login-logo-vertiq {
        width:
            min(100%, 315px);
    }

    .login-card {
        padding:
            27px 20px 22px;

        border-radius: 18px;
    }

    .login-client-logo {
        max-width: 180px;
        max-height: 68px;
    }

    .login-heading {
        margin-bottom: 22px;
    }

    .login-heading h1 {
        font-size: 1.42rem;
    }
}

@media (
    max-height: 720px
)
and (
    min-width: 576px
) {
    .login-page {
        align-items: flex-start;

        padding-top: 18px;
        padding-bottom: 18px;
    }

    .login-brand {
        margin-bottom: 12px;
    }

    .login-logo-vertiq {
        width:
            min(100%, 330px);
    }

    .login-card {
        padding-top: 24px;
        padding-bottom: 19px;
    }
}

@media (
    prefers-reduced-motion: reduce
) {
    .login-wrapper {
        animation: none;
    }

    .login-submit,
    .login-input-group .form-control {
        transition: none;
    }
}