/*
 * TrcNeT Roundcube login
 * Desktop: HQ artwork + live form controls + OAuth/Passkey button
 * Mobile/tablet login layout remains responsive and uses the mobile artwork.
 */

html,
body.trcnet-hq-login {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body.trcnet-hq-login {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #0b3151 url("../images/trcnet-login-desktop.webp") center center / cover no-repeat fixed;
}

/* Desktop artwork already contains the logo, title, labels and input borders. */
body.trcnet-hq-login #trcnet-login-root,
body.trcnet-hq-login #login-form,
body.trcnet-hq-login #login-form form,
body.trcnet-hq-login #login-form table,
body.trcnet-hq-login #login-form tbody,
body.trcnet-hq-login #login-form tr,
body.trcnet-hq-login #login-form td {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.trcnet-hq-login #login-form form,
body.trcnet-hq-login #login-form table,
body.trcnet-hq-login #login-form tbody,
body.trcnet-hq-login #login-form tr,
body.trcnet-hq-login #login-form td {
    display: contents !important;
}

body.trcnet-hq-login #login-form td.title,
body.trcnet-hq-login #login-form label,
body.trcnet-hq-login .mobile-brand,
body.trcnet-hq-login .mobile-footer {
    display: none !important;
}

/* Remove Larry's normal login paragraph spacing and the separator line
 * between the password login and OAuth button. Both live buttons are
 * positioned independently on the desktop artwork. */
body.trcnet-hq-login #login-form p.formbuttons,
body.trcnet-hq-login #login-form p.oauthlogin,
body.trcnet-hq-login #login-form p.formbuttons + p.oauthlogin {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* JS mirrors CSS background-size: cover and positions these over the artwork. */
body.trcnet-hq-login #rcmloginuser,
body.trcnet-hq-login #rcmloginpwd {
    position: fixed !important;
    z-index: 30 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 50px !important;
    color: #fff !important;
    caret-color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(14px, 1vw, 18px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.trcnet-hq-login #rcmloginuser:focus,
body.trcnet-hq-login #rcmloginpwd:focus {
    box-shadow: inset 0 0 0 1px rgba(85, 201, 255, .25) !important;
}

/* Keep Chrome/Brave/Edge password-manager/autofill styling inside the TrcNeT artwork. */
body.trcnet-hq-login #rcmloginuser:-webkit-autofill,
body.trcnet-hq-login #rcmloginuser:-webkit-autofill:hover,
body.trcnet-hq-login #rcmloginuser:-webkit-autofill:focus,
body.trcnet-hq-login #rcmloginpwd:-webkit-autofill,
body.trcnet-hq-login #rcmloginpwd:-webkit-autofill:hover,
body.trcnet-hq-login #rcmloginpwd:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(5, 49, 82, .97) inset !important;
    box-shadow: 0 0 0 1000px rgba(5, 49, 82, .97) inset !important;
    transition: background-color 9999s ease-out 0s !important;
}

/* Smaller live login button. The old baked button was removed from the artwork. */
body.trcnet-hq-login #rcmloginsubmit {
    position: fixed !important;
    z-index: 34 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 18px !important;
    opacity: 1 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(14px, .95vw, 17px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: 1px solid rgba(103, 207, 255, .72) !important;
    border-radius: 10px !important;
    outline: 0 !important;
    background: linear-gradient(180deg, #42b9f5 0%, #128dd7 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 99, 165, .26) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.trcnet-hq-login #rcmloginsubmit:hover,
body.trcnet-hq-login #rcmloginsubmit:focus {
    background: linear-gradient(180deg, #56c6ff 0%, #1699e5 100%) !important;
    box-shadow: 0 0 0 3px rgba(66, 181, 238, .16), 0 8px 20px rgba(0, 99, 165, .26) !important;
}

/* Clickable eye-icon hotspot in the desktop artwork. */
body.trcnet-hq-login #trcnet-password-toggle {
    position: fixed;
    z-index: 36;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
}

/* Live desktop footer, centered by JS inside the card. */
body.trcnet-hq-login .desktop-footer {
    position: fixed !important;
    z-index: 34 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c9dce9 !important;
    text-align: center !important;
    font-size: clamp(12px, .8vw, 14px) !important;
    line-height: 1.25 !important;
    pointer-events: none !important;
}

/* Keep auth messages readable without disturbing the normal card. */
body.trcnet-hq-login #message {
    position: fixed;
    z-index: 50;
    left: 50%;
    bottom: 22px;
    width: min(540px, calc(100vw - 32px));
    transform: translateX(-50%);
    box-sizing: border-box;
}

body.trcnet-hq-login #message:empty {
    display: none !important;
}

body.trcnet-hq-login #message .boxerror,
body.trcnet-hq-login #message .boxwarning,
body.trcnet-hq-login #message .boxinformation,
body.trcnet-hq-login #message .boxconfirmation {
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* Hide old Larry login decoration/footer inherited from base CSS. */
body.trcnet-hq-login #bottomline,
body.trcnet-hq-login .loginfooter,
body.trcnet-hq-login #logo {
    display: none !important;
}

/* Desktop Passkey/OAuth control. JS attaches this class to Roundcube's OAuth button. */
@media (min-width: 821px) and (min-aspect-ratio: 4/3) {
    body.trcnet-hq-login .trcnet-passkey-button {
        position: fixed !important;
        z-index: 35 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 0 46px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        color: #eef8ff !important;
        font-family: inherit !important;
        font-size: clamp(13px, .88vw, 16px) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        border: 1px solid rgba(73, 190, 247, .90) !important;
        border-radius: 10px !important;
        outline: 0 !important;
        background-color: rgba(3, 47, 79, .94) !important;
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef8ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='3.5'/><path d='M10 13l8-8m-1 1l2 2m-5 1l2 2'/></svg>"),
            linear-gradient(180deg, rgba(6, 65, 105, .98), rgba(3, 43, 73, .98)) !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: 20px center, center !important;
        background-size: 20px 20px, 100% 100% !important;
        box-shadow: 0 7px 18px rgba(0,0,0,.16) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    body.trcnet-hq-login .trcnet-passkey-button:hover,
    body.trcnet-hq-login .trcnet-passkey-button:focus {
        color: #fff !important;
        border-color: #73d5ff !important;
        background-color: rgba(7, 75, 119, .98) !important;
        box-shadow: 0 0 0 3px rgba(66,181,238,.14), 0 7px 18px rgba(0,0,0,.18) !important;
    }
}

/* ---------- Mobile / narrow layout ---------- */
@media (max-width: 820px), (max-aspect-ratio: 4/3) {
    body.trcnet-hq-login {
        overflow: auto;
        min-height: 100dvh;
        background:
            linear-gradient(rgba(6, 28, 49, .24), rgba(4, 24, 43, .55)),
            url("../images/trcnet-login-mobile.webp") center center / cover no-repeat fixed;
    }

    body.trcnet-hq-login #trcnet-login-root {
        min-height: 100dvh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(22px, env(safe-area-inset-top))
                 16px
                 max(22px, env(safe-area-inset-bottom));
    }

    body.trcnet-hq-login #login-form {
        position: relative !important;
        width: min(100%, 430px) !important;
        box-sizing: border-box !important;
        padding: 24px 24px 22px !important;
        border: 1px solid rgba(49, 190, 255, .72) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(7, 49, 81, .94), rgba(3, 31, 54, .97)) !important;
        box-shadow: 0 24px 65px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body.trcnet-hq-login .desktop-footer {
        display: none !important;
    }

    body.trcnet-hq-login .mobile-brand,
    body.trcnet-hq-login .mobile-footer {
        display: block !important;
    }

    body.trcnet-hq-login .mobile-brand {
        text-align: center;
    }

    body.trcnet-hq-login .mobile-brand img {
        display: block;
        width: min(88%, 310px);
        height: auto;
        margin: 0 auto 18px;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.24);
    }

    body.trcnet-hq-login .mobile-divider {
        height: 1px;
        margin: 0 0 20px;
        background: linear-gradient(90deg, transparent, rgba(91,190,239,.45), transparent);
    }

    body.trcnet-hq-login .mobile-title {
        margin: 0 0 22px;
        color: #fff;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.2;
        font-weight: 700;
    }

    body.trcnet-hq-login #login-form form,
    body.trcnet-hq-login #login-form table,
    body.trcnet-hq-login #login-form tbody,
    body.trcnet-hq-login #login-form tr,
    body.trcnet-hq-login #login-form td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.trcnet-hq-login #login-form td.title {
        display: block !important;
        padding: 5px 0 7px !important;
        color: #eef7ff !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    body.trcnet-hq-login #rcmloginuser,
    body.trcnet-hq-login #rcmloginpwd {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: 50px !important;
        margin: 0 0 8px !important;
        padding: 0 14px 0 44px !important;
        color: #fff !important;
        font-size: 16px !important;
        background-color: rgba(3, 29, 50, .78) !important;
        border: 1px solid rgba(49, 184, 245, .78) !important;
        border-radius: 11px !important;
        box-shadow: none !important;
    }

    body.trcnet-hq-login #rcmloginuser {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21a8 8 0 0 0-16 0'/><circle cx='12' cy='8' r='4'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-size: 19px 19px !important;
        background-position: 14px center !important;
    }

    body.trcnet-hq-login #rcmloginpwd {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V8a4 4 0 1 1 8 0v3'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-size: 19px 19px !important;
        background-position: 14px center !important;
        padding-right: 48px !important;
    }

    body.trcnet-hq-login #rcmloginuser:focus,
    body.trcnet-hq-login #rcmloginpwd:focus {
        border-color: #72d2ff !important;
        box-shadow: 0 0 0 3px rgba(66, 181, 238, .16) !important;
    }

    body.trcnet-hq-login #rcmloginsubmit {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        display: block !important;
        width: 100% !important;
        height: 54px !important;
        margin: 14px 0 0 !important;
        padding: 0 18px !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        border: 1px solid rgba(103, 207, 255, .65) !important;
        border-radius: 11px !important;
        background: linear-gradient(180deg, #49bbf7, #148fd8) !important;
        box-shadow: 0 10px 24px rgba(0, 107, 171, .26) !important;
    }

    body.trcnet-hq-login #trcnet-password-toggle {
        display: block !important;
        position: absolute !important;
        z-index: 40;
        right: 37px !important;
        top: auto !important;
        bottom: 148px !important;
        width: 38px !important;
        height: 44px !important;
    }

    body.trcnet-hq-login #trcnet-password-toggle::before {
        content: "◉";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: transparent;
    }

    body.trcnet-hq-login .mobile-footer {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid rgba(104, 193, 237, .22);
        color: #c3d8e7;
        text-align: center;
        font-size: 13px;
    }

    body.trcnet-hq-login #message {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        margin-top: 14px !important;
    }
}

@media (max-width: 380px) {
    body.trcnet-hq-login #login-form {
        padding: 20px 18px !important;
    }

    body.trcnet-hq-login .mobile-title {
        font-size: 23px;
    }
}