/*
 * TrcNeT Roundcube login, HQ desktop + responsive mobile
 * Reference artwork: 1672 x 941 (16:9-ish)
 */

:root {
    --trcnet-design-w: 1672;
    --trcnet-design-h: 941;
}

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: reference artwork already contains panel, logo, labels and button. */
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;
}

/*
 * JS calculates exact desktop coordinates from the actual CSS cover geometry
 * and writes pixel positions to these elements. This keeps the live form
 * aligned with the artwork on 16:9, 16:10 and ultrawide desktop screens.
 */
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, 1.0vw, 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, .22) !important;
}

body.trcnet-hq-login #rcmloginsubmit,
body.trcnet-hq-login input[type="submit"] {
    position: fixed !important;
    z-index: 34 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Clickable eye-icon hotspot in the reference 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;
}

/* Authentication errors remain readable without altering the normal view. */
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 if inherited from base CSS. */
body.trcnet-hq-login #bottomline,
body.trcnet-hq-login .loginfooter,
body.trcnet-hq-login #logo {
    display: none !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 .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,
    body.trcnet-hq-login input[type="submit"] {
        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 {
        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;
    }
}

/* ============================================================
 * TrcNeT mobile login form hardening (v9)
 * Reset Larry's desktop button/form rules completely on phones.
 * ============================================================ */
@media (max-width: 820px), (max-aspect-ratio: 4/3) {
    body.trcnet-hq-login #login-form form {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.trcnet-hq-login #login-form form table,
    body.trcnet-hq-login #login-form form tbody {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-spacing: 0 !important;
        box-sizing: border-box !important;
    }

    body.trcnet-hq-login #login-form form tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.trcnet-hq-login #login-form form td,
    body.trcnet-hq-login #login-form form td.input {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep the compact mobile look: field labels remain hidden. */
    body.trcnet-hq-login #login-form form td.title,
    body.trcnet-hq-login #login-form form td.title label {
        display: none !important;
    }

    body.trcnet-hq-login #login-form #rcmloginuser,
    body.trcnet-hq-login #login-form #rcmloginpwd,
    body.trcnet-hq-login #login-form input[type="text"],
    body.trcnet-hq-login #login-form input[type="email"],
    body.trcnet-hq-login #login-form input[type="password"] {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 50px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Roundcube's login submit is normally inside p.formbuttons. Reset Larry's
       centering/inline button rules so it always fills the card width. */
    body.trcnet-hq-login #login-form p.formbuttons {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: normal !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.trcnet-hq-login #login-form #rcmloginsubmit,
    body.trcnet-hq-login #login-form p.formbuttons input.button,
    body.trcnet-hq-login #login-form p.formbuttons input[type="submit"],
    body.trcnet-hq-login #login-form p.formbuttons button,
    body.trcnet-hq-login #login-form input.button.mainaction,
    body.trcnet-hq-login #login-form button.mainaction {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-indent: 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
        line-height: 52px !important;
        color: #fff !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        border: 1px solid rgba(103, 207, 255, .65) !important;
        border-radius: 11px !important;
        background-color: #148fd8 !important;
        background-image: linear-gradient(180deg, #49bbf7, #148fd8) !important;
        background-position: 0 0 !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 10px 24px rgba(0, 107, 171, .26) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Hide the desktop eye-hotspot on mobile; the password field stays clean. */
    body.trcnet-hq-login #trcnet-password-toggle {
        display: none !important;
    }

    /* Footer must follow the button, not overlap it. */
    body.trcnet-hq-login .mobile-footer {
        position: static !important;
        clear: both !important;
        width: 100% !important;
        margin: 22px 0 0 !important;
        padding: 18px 0 0 !important;
        box-sizing: border-box !important;
    }
}

/* On short phone screens don't lock the card to the vertical center. */
@media (max-width: 820px) and (max-height: 760px) {
    body.trcnet-hq-login #trcnet-login-root {
        align-items: flex-start !important;
        padding-top: 18px !important;
    }
}


/* =========================================================
 * v14: Roundcube OAuth/Passkey login
 *
 * Actual generated markup on this installation:
 *   <p class="oauthlogin">
 *     <a id="rcmloginoauth" ...>...</a>
 *   </p>
 *
 * This version does NOT move DOM nodes and uses NO MutationObserver.
 * ========================================================= */

body.trcnet-hq-login #login-form p.oauthlogin {
    position: fixed !important;
    z-index: 44 !important;
    display: none !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: initial !important;
}

body.trcnet-hq-login.oauth-passkey-available #login-form p.oauthlogin {
    display: block !important;
}

/* Remove the old Larry/OAuth separator/line completely. */
body.trcnet-hq-login #login-form p.oauthlogin::before,
body.trcnet-hq-login #login-form p.oauthlogin::after,
body.trcnet-hq-login #rcmloginoauth::before,
body.trcnet-hq-login #rcmloginoauth::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

body.trcnet-hq-login #rcmloginoauth {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 18px !important;

    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 1px solid rgba(103, 207, 255, .68) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #49bbf7 0%, #148fd8 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 9px 21px rgba(0,107,171,.26) !important;

    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}

body.trcnet-hq-login #rcmloginoauth:hover,
body.trcnet-hq-login #rcmloginoauth:focus-visible {
    filter: brightness(1.05);
    text-decoration: none !important;
}

body.trcnet-hq-login #trcnet-oauth-extension {
    position: fixed !important;
    z-index: 30 !important;
    display: none !important;

    box-sizing: border-box !important;
    background: #022340 !important;
    border: 1px solid rgba(45,183,245,.74) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.20) !important;

    pointer-events: none !important;
}

body.trcnet-hq-login.oauth-passkey-available #trcnet-oauth-extension {
    display: block !important;
}

body.trcnet-hq-login #trcnet-oauth-extension .trcnet-oauth-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;

    color: #e7f0f6;
    font-size: 16px;
    text-align: center;
}

/* Mobile/tablet login: keep OAuth/Passkey in normal form flow. */
@media (max-width: 820px), (max-aspect-ratio: 4/3) {
    body.trcnet-hq-login #trcnet-oauth-extension,
    body.trcnet-hq-login.oauth-passkey-available #trcnet-oauth-extension {
        display: none !important;
    }

    body.trcnet-hq-login #login-form p.oauthlogin,
    body.trcnet-hq-login.oauth-passkey-available #login-form p.oauthlogin {
        position: static !important;
        float: none !important;
        clear: both !important;

        width: 100% !important;
        height: 54px !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;
    }

    body.trcnet-hq-login #rcmloginoauth {
        width: 100% !important;
        height: 54px !important;
    }
}