/* FastVPS Platform appearance for the osTicket staff login. */
#loginBody {
    --fastvps-login-leds: url("../../images/fastvps-login/fastvps-platform-leds.bef008014d06.svg");
    background-color: #071225;
}

#loginBody #brickwall,
#loginBody #background {
    background:
        linear-gradient(90deg, rgba(4,12,31,.96) 0%, rgba(4,12,31,.84) 35%, rgba(4,12,31,.38) 65%, rgba(4,12,31,.18) 100%),
        linear-gradient(180deg, rgba(4,12,31,.32), transparent 45%, rgba(4,12,31,.4)),
        var(--fastvps-login-leds) center / cover no-repeat,
        url("../../images/fastvps-login/fastvps-infrastructure-hero-v1.34118187f0f1.webp") center / cover no-repeat,
        #071225;
    background-attachment: fixed;
}

#loginBody #brickwall {
    position: fixed;
}

#loginBody #company {
    left: 0;
    width: 100%;
    margin-left: 0;
}

@media (max-width: 600px) {
    #loginBody #brickwall,
    #loginBody #background {
        background:
            linear-gradient(90deg, rgba(4,12,31,.88), rgba(4,12,31,.66)),
            linear-gradient(180deg, rgba(4,12,31,.22), transparent 40%, rgba(4,12,31,.5)),
            var(--fastvps-login-leds) 62% center / cover no-repeat,
            url("../../images/fastvps-login/fastvps-infrastructure-hero-v1.34118187f0f1.webp") 62% center / cover no-repeat,
            #071225;
        background-attachment: fixed;
    }
}

@media (max-width: 432px) {
    #loginBody #loginBox {
        left: 16px;
        right: 16px;
        width: auto;
        margin-left: 0;
    }
}

@media (max-height: 480px) {
    #loginBody #loginBox {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: min(400px, calc(100% - 32px));
        margin: 24px auto 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #loginBody {
        --fastvps-login-leds: none;
    }
}

/* A lighter glass panel; opaque text and readable controls remain separate. */
#loginBody #loginBox::after {
    background-color: rgba(255, 255, 255, 0.20);
}

#loginBody #loginBox h3 {
    color: #ffd4cc;
}

#loginBody #loginBox .banner {
    color: #eef4ff;
}

#loginBody #loginBox #reset-link {
    color: #e7f5ff;
}

#loginBody #loginBox .button {
    background-color: rgba(255, 255, 255, 0.72);
    color: #233244;
}

#loginBody #loginBox .button:hover {
    background-color: rgba(255, 255, 255, 0.92);
    color: #142235;
}

/* Keep field labels legible above the more transparent panel. */
#loginBody #loginBox input[type="text"],
#loginBody #loginBox input[type="password"] {
    background-color: rgba(255, 255, 255, 0.82);
}

#loginBody #loginBox input::placeholder {
    color: #475569;
    opacity: 1;
}