/*
 * Artumi branding for Roundcube Elastic (ART7538).
 * Palette from artumi.com (resources/css/app.css in 2021-artumi-site):
 *   mid-blue #195aa3 (header band), dark-blue #142280 (nav band),
 *   mid-purple #3519a3 (hero), sky #0ea5e9 / #38bdf8 (call-to-action buttons).
 */

/* ---------- Login page: artumi.com hero behind a card with the site header ---------- */

html body.task-login {
    overflow: auto;
    background-color: #3519a3;
    background-image: radial-gradient(ellipse 34rem 52rem at 50% -6rem, #195aa3 0%, #195aa3 35%, rgba(25, 90, 163, 0) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
    background: transparent;
    height: auto;
    min-height: 100%;
}

body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    /* Extra bottom padding lifts the card above true centre: the blue card header
       is visually heavy and makes a centred card look like it sits low. */
    padding: 2rem 1rem calc(2rem + 14vh);
    background: transparent;
}

/* Card header: the logo on mid-blue with the dark-blue nav band under it, as on artumi.com */
body.task-login #logo,
html.dark-mode body.task-login #logo {
    position: relative;
    z-index: 0;
    top: auto;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 28rem;
    max-height: none;
    height: 10rem;
    padding: 1.6rem 0 1.4rem;
    object-fit: contain;
    opacity: 1;
    background: #195aa3;
    border-bottom: .5rem solid #142280;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
}

/* Card body */
body.task-login #login-form {
    position: relative;
    z-index: 1;
    top: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 28rem;
    margin: 0;
    padding: 2.5rem 2.75rem 1.75rem;
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
    text-align: left;
}

body.task-login #login-form::before {
    content: "Sign in to your mailbox";
    display: block;
    margin-bottom: 2rem;
    color: #142280;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
}

body.task-login #login-form .input-group {
    margin-bottom: .75rem;
}

body.task-login #login-form .formbuttons {
    margin-top: 1.5rem;
}

body.task-login #login-form .input-group-text {
    color: #195aa3;
}

/* Primary call-to-action, styled like "Read The Case Studies" on artumi.com */
body.task-login #rcmloginsubmit {
    margin-top: .5rem;
    padding: .7rem 1rem;
    color: #fff;
    background: #0ea5e9;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 10px 15px -3px rgba(14, 165, 233, .35), 0 4px 6px -4px rgba(0, 0, 0, .15);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: none !important; /* Elastic's ui.js adds Bootstrap's .text-uppercase */
    transition: background-color .15s;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus {
    background: #38bdf8;
}

body.task-login #login-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6e3dc;
    color: #555;
    text-align: center;
}

body.task-login #login-footer a {
    color: #195aa3;
    font-weight: 500;
}

/* Company line under the card, like the artumi.com footer */
body.task-login #layout-content::after {
    content: "Artumi Systems Ltd \2022  Sheffield \2022  0114 299 8033";
    display: block;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
    text-align: center;
}

html.dark-mode body.task-login #login-form {
    background: #21292c;
}

html.dark-mode body.task-login #login-form::before {
    color: #fff;
}

html.dark-mode body.task-login #login-form .input-group-text {
    color: #559fcd;
}

html.dark-mode body.task-login #login-footer {
    color: #c5d1d3;
    border-top-color: #374549;
}

html.dark-mode body.task-login #login-footer a {
    color: #559fcd;
}

/* ---------- Task menu (left rail) ----------
 * A muted Artumi navy rather than the full-strength header blue, so it sits
 * quietly beside the mail list; brand colour shows only as the selection bar.
 */

@media screen and (min-width: 481px) {
    html #layout-menu,
    html.dark-mode #layout-menu {
        background-color: #1c2541;
    }

    html #layout-menu .popover-header,
    html.dark-mode #layout-menu .popover-header {
        background-color: #1c2541 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }

    html #layout-menu .popover-header img,
    html.dark-mode #layout-menu .popover-header img {
        max-width: 3.4rem;
        padding: .5rem 0;
        opacity: 1;
    }

    html #taskmenu a,
    html.dark-mode #taskmenu a {
        color: #c3cbe0;
    }

    html #taskmenu a:hover,
    html.dark-mode #taskmenu a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }

    html #taskmenu a.selected,
    html #taskmenu a.selected:hover,
    html.dark-mode #taskmenu a.selected,
    html.dark-mode #taskmenu a.selected:hover {
        color: #fff;
        background: rgba(255, 255, 255, .1);
        box-shadow: inset 3px 0 0 #559fcd;
    }

    html #taskmenu .action-buttons a,
    html.dark-mode #taskmenu .action-buttons a {
        color: #c3cbe0;
    }

    html #taskmenu .action-buttons a:hover,
    html.dark-mode #taskmenu .action-buttons a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }

    html #taskmenu .special-buttons,
    html.dark-mode #layout-menu .special-buttons {
        background-color: #161d34 !important;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    html.dark-mode #layout-menu .special-buttons a:not(:focus) {
        background: transparent;
    }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    html #layout-menu .popover-header img,
    html.dark-mode #layout-menu .popover-header img {
        max-width: 2rem;
    }
}

/* Phone layout: menu is a white sheet, but its header carries the logo, so keep it dark */
html.layout-phone #layout-menu .popover-header {
    background-color: #1c2541 !important;
}

html.layout-phone #layout-menu .popover-header img {
    max-width: 7rem;
}

html.layout-phone #layout-menu .popover-header a,
html.layout-phone #layout-menu .popover-header a:before {
    color: #fff;
}

/* Links in mail-reading and settings panes pick up the brand blue */
#layout-content a.support-link,
.formcontent a:not(.btn):not(.button) {
    color: #195aa3;
}

html.dark-mode .formcontent a:not(.btn):not(.button) {
    color: #559fcd;
}