/*
 * Cyberbabe Terminal theme
 *
 * In-universe communications terminal presentation. Shared Zimbra login
 * structure and behavior remain in src/shared; this file contains only
 * Cyberbabe scene, branding, and component-skin overrides.
 */

:root {
    --login-accent: #087fa8;
    --login-accent-hover: #066888;
    --login-focus-ring: rgba(8, 127, 168, 0.18);

    --login-background:
        radial-gradient(
            circle at 76% 30%,
            rgba(30, 143, 188, 0.15) 0%,
            rgba(30, 143, 188, 0.04) 22%,
            rgba(30, 143, 188, 0) 48%
        ),
        radial-gradient(
            ellipse at 88% 92%,
            rgba(20, 71, 119, 0.30) 0%,
            rgba(20, 71, 119, 0) 54%
        ),
        linear-gradient(
            142deg,
            #05080d 0%,
            #09121d 43%,
            #0b1b2b 72%,
            #07101b 100%
        );

    --login-artwork:
        url("/custom/login/cyberbabe/assets/bg-orbital-relay.webp");

    /*
     * Preserve the complete scene height and anchor its Earth/station side.
     * On ultrawide screens, the theme gradient fills any unused left area;
     * on narrower screens, cropping occurs primarily in the negative space.
     */
    --login-artwork-size: auto 100vh;
    --login-artwork-position: right center;
    --login-artwork-opacity: 1;

    --login-artwork-mobile-size: auto 100vh;
    --login-artwork-mobile-position: 78% center;
    --login-artwork-mobile-opacity: 0.55;
}

/* Keep the access panel upper-middle and left of center on normal desktops. */
#modifiedLogin .modernCenter {
    justify-content: flex-start !important;
    padding:
        clamp(50px, 8vh, 86px)
        clamp(24px, 7vw, 118px)
        38px !important;
}

/* A translucent graphite terminal enclosure with restrained chamfering. */
#modifiedLogin .modernContentBox {
    width: 418px !important;
    padding: 31px 35px 29px !important;

    background:
        linear-gradient(
            135deg,
            rgba(14, 27, 38, 0.93) 0%,
            rgba(8, 19, 29, 0.89) 58%,
            rgba(9, 24, 35, 0.92) 100%
        ) !important;

    border: 1px solid rgba(67, 196, 225, 0.72) !important;
    border-radius: 2px !important;

    box-shadow:
        0 26px 72px rgba(0, 4, 9, 0.48),
        0 0 22px rgba(31, 170, 205, 0.08),
        inset 0 1px 0 rgba(179, 237, 249, 0.12),
        inset 0 0 0 1px rgba(8, 63, 82, 0.42) !important;

    -webkit-clip-path:
        polygon(
            0 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% 100%,
            13px 100%,
            0 calc(100% - 13px)
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% 100%,
            13px 100%,
            0 calc(100% - 13px)
        );
}

/* Short precision marks reinforce the panel frame without adding text. */
#modifiedLogin .modernContentBox::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 9px;

    background:
        linear-gradient(#62d7ef, #62d7ef) left top / 24px 1px no-repeat,
        linear-gradient(#62d7ef, #62d7ef) left top / 1px 18px no-repeat,
        linear-gradient(#248eaa, #248eaa) right bottom / 28px 1px no-repeat,
        linear-gradient(#248eaa, #248eaa) right bottom / 1px 18px no-repeat;

    opacity: 0.72;
    pointer-events: none;
}

/* Restrained system-status indicator; decorative and non-interactive. */
#modifiedLogin .modernContentBox::after {
    content: "";

    position: absolute;
    z-index: 1;
    top: 20px;
    right: 25px;

    width: 7px;
    height: 7px;

    background: #d99335;
    border: 2px solid rgba(12, 28, 39, 0.96);
    border-radius: 50%;

    box-shadow: 0 0 0 1px rgba(225, 172, 91, 0.42);
    pointer-events: none;
}

/* Cyberbabe Communications Network wordmark. */
#modifiedLogin .logo {
    margin-bottom: 24px !important;
    padding-bottom: 17px !important;
    border-bottom: 1px solid rgba(86, 186, 211, 0.28) !important;
}

#modifiedLogin .logo::before {
    content: "CYBERBABE";

    color: #73d8ed;

    font-size: 27px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.13em;
}

#modifiedLogin .logo::after {
    content: "COMMUNICATIONS NETWORK";

    margin-top: 8px;

    color: #8da8b3;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.27em;
}

/* Visually reframe the existing localized heading without changing markup. */
#modifiedLogin .signIn {
    position: relative !important;

    padding-bottom: 12px !important;

    font-size: 0 !important;
}

#modifiedLogin .signIn::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 52px;
    height: 1px;

    background: #36b9d8;
    box-shadow: 56px 0 0 rgba(54, 185, 216, 0.24);
}

#modifiedLogin .signIn::after {
    content: "SECURE ACCESS";

    color: #f1f7f9;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.08em;
}

#modifiedLogin .twoFactorTitle {
    color: #f1f7f9 !important;
    font-size: 19px !important;
    letter-spacing: 0.035em !important;
}

#modifiedLogin .zLoginFieldLabel {
    color: #a8bbc3 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}

#modifiedLogin .zLoginFieldInput {
    color: #102630 !important;
    background: rgba(248, 252, 253, 0.97) !important;
    border-color: #8daeb9 !important;
    border-radius: 4px !important;
}

#modifiedLogin .zLoginFieldInput:hover {
    border-color: #54b3ca !important;
}

#modifiedLogin .loginButton {
    background:
        linear-gradient(180deg, #0b8db8, #08779e) !important;
    border-color: #076f94 !important;
    border-radius: 4px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

#modifiedLogin .loginButton:hover,
#modifiedLogin .loginButton:focus {
    background:
        linear-gradient(180deg, #087da4, #066888) !important;
    border-color: #065f7d !important;
}

#modifiedLogin .rememberCheckWrapper,
#modifiedLogin .twoFactorDescription,
#modifiedLogin .passwordRuleList {
    color: #a6b8bf !important;
}

#modifiedLogin .tfaMethodLabel {
    color: #b2c3ca !important;
}

#modifiedLogin .errorMessage {
    color: #ff9c91 !important;
}

#modifiedLogin #ZLoginNotice {
    color: rgba(198, 222, 233, 0.42) !important;
}

/* Add contrast only on the card side; leave the artwork side unobscured. */
#modifiedLogin.LoginScreen::after {
    background:
        linear-gradient(
            90deg,
            rgba(2, 7, 12, 0.32) 0%,
            rgba(2, 7, 12, 0.20) 28%,
            rgba(2, 7, 12, 0.06) 48%,
            rgba(2, 7, 12, 0) 68%,
            rgba(2, 7, 12, 0) 100%
        ) !important;
}

@media (max-width: 760px) {
    #modifiedLogin .modernCenter {
        justify-content: center !important;
        padding: 34px 16px 28px !important;
    }
}

@media (max-width: 520px) {
    #modifiedLogin .modernCenter {
        padding: 18px 10px 22px !important;
    }

    #modifiedLogin .modernContentBox {
        width: 100% !important;
        padding: 28px 23px 25px !important;
    }

    #modifiedLogin .logo::before {
        font-size: 23px;
        letter-spacing: 0.11em;
    }

    #modifiedLogin .logo::after {
        font-size: 8px;
        letter-spacing: 0.20em;
    }
}