/*
 * HPB branding overrides for Roundcube Elastic
 * Main brand red: #EC3337
 */

/* Login logo: optimized for desktop, mobile, and short screens */
body.task-login #logo {
    width: min(260px, 72vw) !important;
    height: auto !important;
    max-width: 260px !important;
    max-height: 124px !important;
    object-fit: contain;
    top: 8vh !important;
}

body.task-login #login-form {
    top: 12vh !important;
}

/* Internal Roundcube menu logo */
#layout-menu .popover-header #logo {
    position: static !important;
    display: block !important;
    width: 100px !important;
    height: 42px !important;
    max-width: calc(100% - 18px) !important;
    max-height: 42px !important;
    object-fit: contain;
    box-sizing: border-box;
    padding: 7px 8px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 6px;
}

/* HPB login and primary buttons */
body.task-login #rcmloginsubmit,
body.task-login .btn-primary,
.btn-primary {
    background-color: #EC3337 !important;
    border-color: #EC3337 !important;
    color: #FFFFFF !important;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus,
body.task-login .btn-primary:hover,
body.task-login .btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: #D62B30 !important;
    border-color: #D62B30 !important;
}

body.task-login #rcmloginsubmit:active,
body.task-login .btn-primary:active,
.btn-primary:active {
    background-color: #BE252A !important;
    border-color: #BE252A !important;
}

/* Short laptop screens */
@media screen and (max-height: 720px) {
    body.task-login #logo {
        width: min(220px, 66vw) !important;
        max-width: 220px !important;
        max-height: 105px !important;
        top: 4vh !important;
    }

    body.task-login #login-form {
        top: 7vh !important;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    body.task-login #logo {
        width: min(230px, 68vw) !important;
        max-width: 230px !important;
        max-height: 110px !important;
    }

    #layout-menu .popover-header #logo {
        width: 108px !important;
        height: 44px !important;
        max-height: 44px !important;
    }
}