/*
 * ExarNet Mail — a small presentation layer over Roundcube Elastic 1.7.4.
 * The original Elastic skin is by The Roundcube Dev Team (see README.md).
 * Keep selectors scoped to login and application chrome, never email content.
 */

/* The login keeps the ExarNet website's graphite and lavender palette. */
body.task-login {
    min-width: 320px;
    color: #f5f4f6;
    background: #101012;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.task-login #layout {
    display: block;
    min-height: 100%;
    height: 100%;
    overflow: auto;
}

body.task-login #layout-content {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    height: auto;
    padding: clamp(32px, 7vh, 80px) 24px;
    color: #f5f4f6;
    background: radial-gradient(ellipse at 50% 0, #332547 0, transparent 52%), #101012;
}

body.task-login #logo {
    position: static;
    width: 68px;
    height: auto;
    max-width: 68px;
    max-height: 68px;
    margin: 0 0 25px;
    object-fit: contain;
    opacity: 1;
}

.task-login .exarnet-login-intro {
    width: 100%;
    max-width: 384px;
    text-align: center;
}

.task-login .exarnet-eyebrow {
    margin: 0 0 10px;
    color: #b5aacd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1.6;
}

.task-login .exarnet-login-title {
    margin: 0 0 12px;
    color: #f5f4f6;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.2;
}

.task-login .exarnet-login-help {
    margin: 0;
    color: #aaa6b4;
    font-size: 14px;
    line-height: 1.65;
}

body.task-login #login-form {
    position: static;
    width: 100%;
    max-width: 384px;
    margin: 26px auto 0;
    padding: 26px;
    color-scheme: dark;
    text-align: left;
    background: #18181c;
    border: 1px solid #302d37;
    border-radius: 16px;
    box-shadow: 0 22px 64px #0003;
}

.task-login #login-form table {
    width: 100%;
}

.task-login #login-form .form-group {
    margin-bottom: 16px;
}

.task-login #login-form .input-group-text,
.task-login #login-form .form-control,
.task-login #login-form .custom-select {
    min-height: 48px;
    color: #f5f4f6;
    background-color: #101012;
    border-color: #403b49;
    font-size: 16px;
}

.task-login #login-form .input-group-text {
    color: #aaa2ba;
    border-radius: 8px 0 0 8px;
}

.task-login #login-form .form-control {
    border-radius: 0 8px 8px 0;
}

.task-login #login-form input::placeholder {
    color: #aaa6b4;
    opacity: 1;
}

.task-login #login-form .form-control:focus,
.task-login #login-form .custom-select:focus {
    border-color: #ac9bff;
    box-shadow: 0 0 0 3px #ac9bff26;
}

.task-login #login-form .formbuttons {
    margin-top: 20px;
}

body.task-login #rcmloginsubmit {
    min-height: 48px;
    color: #17131f;
    background: #ac9bff;
    border: 1px solid #ac9bff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none !important;
    box-shadow: none;
}

body.task-login #rcmloginsubmit:hover:not(:disabled) {
    background: #bcb0ff;
    border-color: #bcb0ff;
}

body.task-login #rcmloginsubmit:disabled {
    opacity: .55;
}

body.task-login #login-footer {
    margin-top: 24px;
    color: #aaa6b4;
    font-size: 12px;
    line-height: 1.75;
    text-align: center;
}

.task-login #login-footer a {
    color: #c5b8ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.task-login #login-footer .exarnet-powered-by {
    margin: 7px 0 0;
    font-size: 11px;
}

.task-login #login-form :focus-visible,
#layout-menu #taskmenu a:focus-visible {
    outline: 2px solid #ac9bff;
    outline-offset: -3px;
}

/* Keep Elastic's light/dark choice and all of its responsive panel behavior. */
html #layout-menu,
html #layout-menu .popover-header,
html #layout-menu #taskmenu .special-buttons {
    color: #f5f4f6;
    background: #16151b !important;
}

html #layout-menu {
    border-color: #302d37;
}

html #layout-menu #logo {
    max-height: 40px;
    padding: 7px;
    object-fit: contain;
    opacity: 1;
}

html #layout-menu #taskmenu a,
html #layout-menu .popover-header a {
    color: #bcb7c8;
}

html #layout-menu #taskmenu a.selected,
html #layout-menu #taskmenu a:not(.disabled):hover {
    color: #e4ddff;
    background: #30263f;
}

html #layout-menu #taskmenu .action-buttons a {
    color: #c7baff;
    background: #231d30;
}

html #layout-menu #taskmenu .action-buttons a:hover {
    color: #f5f0ff;
    background: #39304c;
}

/* Apply the accent to folder selection only, not received message markup. */
html:not(.dark-mode) #mailboxlist li.selected > a {
    color: #4a2c8c;
    background-color: #eee8ff;
    border-left-color: #7052f8;
}

html.dark-mode #mailboxlist li.selected > a {
    color: #e0d5ff;
    background-color: #30263f;
    border-left-color: #ac9bff;
}

@media screen and (max-width: 480px) {
    body.task-login #layout-content {
        justify-content: flex-start;
        padding: 32px 18px;
    }

    body.task-login #login-form {
        padding: 22px 20px;
    }

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

    .task-login .exarnet-login-title {
        font-size: 28px;
    }

    html #layout-menu #taskmenu a {
        border-bottom-color: #302d37 !important;
    }
}

@media (forced-colors: active) {
    body.task-login #layout-content,
    body.task-login #login-form,
    html #layout-menu,
    html #layout-menu .popover-header,
    html #layout-menu #taskmenu .special-buttons {
        color: CanvasText;
        background: Canvas !important;
        border-color: CanvasText;
    }

    body.task-login #logo,
    html #layout-menu #logo {
        forced-color-adjust: none;
        background: #16151b;
        border-radius: 4px;
    }
}