/* ==========================================================================
   MBM Holdings Limited — branded webmail login
   --------------------------------------------------------------------------
   Roundcube 1.6 / elastic skin.

   Loaded last (plugin stylesheets are appended after the skin's
   styles.min.css and bootstrap), and every rule is scoped to body.task-login,
   so the signed-in webmail is left on the stock skin.

   Selectors mirror the DOM the skin actually produces:
     #logo                                  logo <img>
     #login-form                            the form (becomes the card)
     #login-form tr.form-group              one field row
     #login-form td.input.input-group       field wrapper, added by elastic ui.js
     .input-group-prepend .icon             leading field icon, added by ui.js
     #rcmloginuser / #rcmloginpwd           the inputs
     #rcmloginsubmit                        the submit button
   ========================================================================== */

body.task-login {
    --mbm-blue: #0f75ba;
    --mbm-blue-dark: #0b5c93;
    --mbm-red: #d02028;
    --mbm-silver: #989898;
    /* Contrast-checked against #ffffff / #f8fafc:
       border 3.2:1 (WCAG 1.4.11 non-text), muted text 4.5:1 (WCAG 1.4.3). */
    --mbm-border: #88929c;
    --mbm-ink: #1b2b35;
    --mbm-muted: #667580;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 16px;
    background:
        radial-gradient(900px 460px at 50% -10%, #ffffff 0%, #eef4f8 58%, #e3ebf2 100%);
    background-attachment: fixed;
}

/* The skin pushes the logo and form down with top:16vh / top:20vh; centre
   them properly instead. */
body.task-login #layout,
body.task-login #layout-content {
    position: static;
    top: auto;
    width: 100%;
}

/* The skin paints #layout-content white and lets it grow (flex:6), which hides
   the page gradient behind it -- clear it and centre the card here instead. */
body.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    padding: 24px 16px;
}

/* ---- logo -------------------------------------------------------------- */

body.task-login #logo {
    position: static;
    top: auto;
    display: block;
    width: 258px;
    max-width: 74vw;
    max-height: none;
    height: auto;
    margin: 0 auto 26px;
}

/* ---- card -------------------------------------------------------------- */

body.task-login #login-form {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 384px;
    margin: 0 auto;
    padding: 34px 30px 24px;
    background: #ffffff;
    border: 1px solid var(--mbm-border);
    border-radius: 18px;
    box-shadow:
        0 24px 48px -12px rgba(14, 45, 70, .18),
        0 4px 10px -4px rgba(14, 45, 70, .08);
}

/* Brand rule across the top of the card, taken from the logo's own colours. */
body.task-login #login-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg,
        var(--mbm-red) 0 32%,
        var(--mbm-blue) 32% 68%,
        var(--mbm-silver) 68% 100%);
}

/* ---- fields ------------------------------------------------------------ */

body.task-login #login-form tr.form-group {
    display: block;
    margin: 0 0 14px;
}

body.task-login #login-form .input-group {
    position: relative;
    display: block;
    width: 100%;
}

/* Leading icon. ui.js injects this as an absolutely-positioned adornment so
   it sits inside the field rather than taking a column of its own. */
body.task-login #login-form .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
    color: var(--mbm-muted);
    /* Above bootstrap's `.input-group > .form-control:focus { z-index: 3 }`,
       otherwise the focused input paints over the glyph. */
    z-index: 4;
}

/* Bootstrap boxes the adornment (grey fill, border, padding) for use as a
   standalone group segment; strip that so only the bare glyph remains. */
body.task-login #login-form .input-group-prepend .input-group-text {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

/* background-color (not the `background` shorthand) so nothing the skin sets
   as a background-image on the input is wiped out. */
body.task-login #login-form .form-control {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 44px;
    font-size: 15px;
    line-height: 50px;
    color: var(--mbm-ink);
    background-color: #f8fafc;
    border: 1px solid var(--mbm-border);
    border-radius: 11px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.task-login #login-form .form-control::placeholder {
    color: var(--mbm-muted);
}

body.task-login #login-form .form-control:focus {
    background-color: #ffffff;
    border-color: var(--mbm-blue);
    box-shadow: 0 0 0 3.5px rgba(15, 117, 186, .16);
    outline: none;
}

body.task-login #login-form .formbuttons {
    margin: 0;
}

/* ---- show / hide password toggle --------------------------------------- */

body.task-login .mbm-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 40px keeps the tap target at the touch minimum. */
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--mbm-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    z-index: 3;
    transition: color .15s ease, background-color .15s ease;
}

body.task-login .mbm-pw-toggle:hover {
    color: var(--mbm-blue);
    background-color: rgba(15, 117, 186, .10);
}

body.task-login .mbm-pw-toggle:focus-visible {
    color: var(--mbm-blue);
    outline: 2px solid var(--mbm-blue);
    outline-offset: 1px;
}

body.task-login .mbm-pw-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
}

/* ---- submit ------------------------------------------------------------ */

body.task-login #rcmloginsubmit,
body.task-login #login-form .formbuttons button {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #ffffff;
    background-color: var(--mbm-blue);
    background-image: none;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 8px 18px -8px rgba(15, 117, 186, .8);
    transition: background-color .15s ease, box-shadow .15s ease;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #login-form .formbuttons button:hover {
    background-color: var(--mbm-blue-dark);
    box-shadow: 0 10px 22px -8px rgba(15, 117, 186, .9);
}

body.task-login #rcmloginsubmit:active {
    transform: translateY(1px);
}

/* ---- footer ------------------------------------------------------------ */

body.task-login #login-footer {
    margin-top: 20px;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--mbm-muted);
}

/* Support line, injected into the skin's "loginfooter" container. */
body.task-login #login-footer .mbm-support {
    margin: 8px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mbm-muted);
}

/* ---- dark mode --------------------------------------------------------- */

html.dark-mode body.task-login {
    /* Re-tuned for the dark surfaces rather than reusing the light values. */
    --mbm-muted: #8b9daa;
    --mbm-border: #547c92;
    background:
        radial-gradient(900px 460px at 50% -10%, #16323f 0%, #0d1f29 58%, #0a1922 100%);
}

html.dark-mode body.task-login #login-form {
    background: #12242f;
    border-color: #1e3a49;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6);
}

html.dark-mode body.task-login #login-form .form-control {
    color: #e8f0f5;
    background-color: #0e1e28;
    border-color: var(--mbm-border);
}

html.dark-mode body.task-login #login-form .form-control::placeholder {
    color: var(--mbm-muted);
}

html.dark-mode body.task-login #login-form .form-control:focus {
    background-color: #102530;
}

html.dark-mode body.task-login #login-form .input-group-prepend {
    color: var(--mbm-muted);
}

html.dark-mode body.task-login #logo {
    opacity: 1;
}

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 420px) {
    body.task-login #login-form {
        padding: 26px 20px 20px;
        border-radius: 15px;
    }

    body.task-login #login-form::before {
        border-radius: 15px 15px 0 0;
    }

    body.task-login #logo {
        width: 208px;
        margin-bottom: 20px;
    }
}