/* ApepSoft Pro+ login (Roundcube) - mirrors the admin panel login. Always dark. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

html:has(body.task-login) { background: #09090b; color-scheme: dark; }

body.task-login {
    background: #09090b !important;
    color: #d4d4d8;
    font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.task-login #layout { background: transparent !important; }

body.task-login #layout-content {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden;
}

/* grid + lime glow, same as the panel */
body.task-login #layout-content::before,
body.task-login #layout-content::after {
    /* soft glow drawn with a gradient (no filter:blur - iOS Safari draws a dark box) */
    top: 0;
    left: 0;
    right: 0;
    height: 70vh;
    background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(55, 190, 255, .16), rgba(55, 190, 255, .05) 45%, transparent 70%);
}
body.task-login #layout-content::before {
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 40%, transparent 100%);
}
body.task-login #layout-content::after {
    top: -12rem;
    left: 50%;
    width: 36rem;
    height: 36rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(55, 190, 255, .16);
    filter: blur(140px);
}
body.task-login #layout-content > * { position: relative; z-index: 1; }

/* brand */
body.task-login .apepsoft-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body.task-login #logo {
    height: 28px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    position: static !important;   /* Elastic offsets the logo with top: ~142px */
    inset: auto !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1);
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.task-login .apepsoft-badge {
    background: #37beff;
    color: #06131c;
    font: 700 12px/1 "Inter Variable", sans-serif;
    letter-spacing: .06em;
    padding: 5px 8px;
    border-radius: 6px;
    box-shadow: 0 10px 25px -8px rgba(55, 190, 255, .5);
}
body.task-login .apepsoft-subtitle {
    margin: 10px 0 32px;
    color: #71717a;
    font-size: 14px;
    text-align: center;
}

/* card */
body.task-login #login-form {
    width: 100%;
    max-width: 384px;
    margin: 0 !important;
    top: auto !important;          /* Elastic offsets the form with top: ~178px */
    inset: auto !important;
    padding: 28px !important;
    background: rgba(17, 17, 20, .7) !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
}
body.task-login #login-form table,
body.task-login #login-form tbody { display: block; width: 100%; margin: 0; }
body.task-login #login-form tr.form-group {
    display: block;
    margin: 0 0 16px !important;
}
body.task-login #login-form td.title {
    display: block !important;      /* Elastic hides the labels inline */
    text-align: left !important;
    padding: 0 0 6px !important;
    width: auto !important;
}
body.task-login #login-form td.title label {
    margin: 0;
    color: #a1a1aa;
    font-size: 12px;
    font-weight: 500;
}
body.task-login #login-form td.input {
    position: relative;
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
}
body.task-login #login-form .input-group-prepend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    pointer-events: none;
    margin: 0;
}
body.task-login #login-form .input-group-text {
    height: auto;
    padding: 0 0 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: #52525b !important;
    font-size: 13px;
}
body.task-login #login-form .form-control {
    height: 44px !important;
    padding: 0 14px 0 40px !important;
    background: rgba(0, 0, 0, .3) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 10px !important;
    color: #f4f4f5 !important;
    font-size: 15px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2) !important;
    transition: border-color .15s, box-shadow .15s;
}
body.task-login #login-form .form-control::placeholder { color: #52525b; }
body.task-login #login-form .form-control:focus {
    border-color: rgba(55, 190, 255, .65) !important;
    box-shadow: 0 0 0 4px rgba(55, 190, 255, .18) !important;
    outline: 0;
}
body.task-login #login-form .formbuttons { margin: 24px 0 0 !important; padding: 0 !important; }
body.task-login #rcmloginsubmit {
    width: 100%;
    height: 46px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #5ccbff, #2bb3f5) !important;
    color: #06131c !important;
    font: 700 15px/1 "Inter Variable", sans-serif;
    text-transform: none !important;
    letter-spacing: 0;
    box-shadow: 0 12px 28px -10px rgba(55, 190, 255, .55);
    transition: background .15s, transform .05s;
}
body.task-login #rcmloginsubmit:hover { background: linear-gradient(180deg, #74d3ff, #3dbcf8) !important; }
body.task-login #rcmloginsubmit:active { transform: scale(.98); }
body.task-login #login-footer {
    margin-top: 18px;
    color: #52525b;
    font-size: 12px;
    text-align: center;
}

/* show / hide password (added by login.js) */
body.task-login .apepsoft-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 5;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #71717a;
    cursor: pointer;
}
body.task-login .apepsoft-eye:hover { color: #e4e4e7; background: rgba(255, 255, 255, .06); }
body.task-login .apepsoft-eye svg { width: 18px; height: 18px; }
body.task-login #rcmloginpwd { padding-right: 44px !important; }

body.task-login .apepsoft-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 6px 14px 6px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: #a1a1aa !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}
body.task-login .apepsoft-help:hover { color: #fff !important; border-color: rgba(55, 190, 255, .45); }
body.task-login .apepsoft-help span { color: #37beff; }

/* error / info messages on the login page */
body.task-login #messagestack div {
    border-radius: 12px;
    font-family: "Inter Variable", sans-serif;
}

/* phones: no card, everything centred */
@media (max-width: 640px) {
    body.task-login #layout-content {
        justify-content: flex-start;
        align-items: center;
        padding: 14vh 24px 32px !important;
    }
    body.task-login .apepsoft-brand { justify-content: center; }
    body.task-login #logo { height: 30px !important; }
    body.task-login .apepsoft-subtitle { text-align: center; font-size: 15px; color: #a1a1aa; margin-bottom: 32px; }
    body.task-login #login-form {
        max-width: 420px;
        padding: 0 !important;
        background: transparent !important;
        border: 0;
        box-shadow: none;
    }
    body.task-login #login-form td.title label { font-size: 14px; color: #d4d4d8; }
    body.task-login #login-form .form-control { height: 50px !important; font-size: 16px !important; border-radius: 12px !important; }
    body.task-login #rcmloginsubmit { height: 50px; border-radius: 12px !important; font-size: 16px; }
}