/* DexWHM: Elastic in the brand's colours. Elastic's own blue (#37beff) is
   replaced where it shows: links, main buttons, selection, focus, counters.
   --brand comes from the WEBMAIL_ACCENT setting through config.php's <style>. */
:root {
    --brand: #3b5bfd;
    --brand-soft: #eef1ff;
}

html.dark-mode {
    --brand: #6b86ff;
    --brand-soft: #1c2240;
}

a,
a:visited,
.link,
.btn-link {
    color: var(--brand);
}

.btn-primary,
.button.mainaction,
.formbuttons .button.mainaction,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.btn-primary:hover,
.button.mainaction:hover {
    filter: brightness(0.92);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 25%, transparent) !important;
}

.listing li.selected,
.listing tr.selected td,
table.records-table tr.selected td,
#messagelist tr.selected td {
    background-color: var(--brand-soft) !important;
}

.listing li.selected > a,
#layout-menu .selected,
#layout-menu a.selected,
.menu a.selected,
#messagelist tr.unread .subject a {
    color: var(--brand) !important;
}

.unreadcount,
.menu .unreadcount,
.listing li .unreadcount {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* The login logo is a wordmark: no wider than the form under it. */
body.task-login #logo {
    max-width: 20rem;
    max-height: 4rem;
    width: auto;
    height: auto;
}

/* ---- The look of the DexRail dashboard: Inter, its greys and borders, a
   light menu instead of Elastic's slate one, rounder controls. Colours as in
   DexRail's index.css. */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("inter.woff2") format("woff2-variations");
}

:root {
    --page: #f5f6f8;
    --surface: #ffffff;
    --subtle: #f0f2f5;
    --line: #e6e8ec;
    --ink: #15181d;
    --ink-2: #5b6270;
    --ink-3: #8a909c;
}

html.dark-mode {
    --page: #0f1115;
    --surface: #171a20;
    --subtle: #1e222a;
    --line: #262a33;
    --ink: #e8eaee;
    --ink-2: #a3a9b5;
    --ink-3: #767d8a;
}

body,
input,
select,
textarea,
button,
.btn,
.popover,
.form-control {
    font-family: "Inter Variable", system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body,
html.dark-mode body {
    background-color: var(--page) !important;
    color: var(--ink);
}

/* The menu on the left: light, like the dashboard's sidebar. */
#layout-menu,
html.dark-mode #layout-menu {
    background: var(--surface) !important;
    border-right: 1px solid var(--line) !important;
}

#layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
    background: var(--surface) !important;
    border-bottom: 0 !important;
}

#layout-menu .menu a,
#layout-menu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a:not(:focus),
#layout-menu .special-buttons a:not(:focus) {
    color: var(--ink-2) !important;
    background: transparent !important;
    border-radius: 0.5rem;
    margin: 0.125rem 0.375rem;
}

#layout-menu .menu a:hover,
#layout-menu .special-buttons a:hover {
    color: var(--ink) !important;
    background: var(--subtle) !important;
}

#layout-menu .menu a.selected {
    color: var(--brand) !important;
    background: var(--brand-soft) !important;
}

#layout-menu .special-buttons a.logout {
    color: #d63a3a !important;
}

/* Column headers and toolbars: the page's surface with a hairline under it. */
#layout > div > .header,
#layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

#layout > div > .header a.button,
html.dark-mode #layout > div > .header a.button {
    color: var(--ink-2) !important;
}

#layout > div > .header a.button:hover:not(.disabled) {
    color: var(--ink) !important;
}

#layout-sidebar,
#layout-list,
#layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
}

.listing li,
.listing tr td,
#messagelist tr td,
.records-table td,
html.dark-mode .listing li,
html.dark-mode #messagelist tr td {
    border-color: var(--line) !important;
}

.listing li:hover,
#messagelist tbody tr:hover td {
    background-color: var(--subtle);
}

/* Unread mail: bold and dark, the dot in the accent, as in most mail apps. */
#messagelist tr.unread .subject a,
#messagelist tr.unread td.subject span.subject a {
    color: var(--ink) !important;
    font-weight: 650;
}

#messagelist tr.unread .msgicon.status::before,
#messagelist tr.unread span.msgicon.status {
    color: var(--brand) !important;
}

#messagelist td.subject span.fromto,
#messagelist td.subject span.date {
    color: var(--ink-3);
}

/* Controls: rounder, the dashboard's borders. */
.form-control,
.custom-select,
select.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
    border-radius: 0.5rem !important;
    border-color: var(--line);
}

.btn,
.button.mainaction,
.formbuttons .button {
    border-radius: 0.5rem !important;
}

.searchbar,
.header .searchbar {
    border-radius: 0.5rem;
}

.popover,
.popupmenu,
.ui-dialog,
.modal-content {
    border-radius: 0.75rem !important;
    border-color: var(--line) !important;
}

/* The folder list's unread count: a quiet pill. */
#folderlist-content li .unreadcount {
    border-radius: 999px;
}

/* The empty reading pane: the page's grey, not white. */
#layout-content .iframe-wrapper,
#layout-content > .watermark,
#layout-content .watermark {
    background-color: var(--page);
}

/* The login page: the logo above a card. */
body.task-login #layout-content {
    background: var(--page) !important;
}

body.task-login #login-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

/* The menu's bottom buttons sit in their own block, slate in Elastic. */
#layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
    background: var(--surface) !important;
    border-top: 1px solid var(--line);
}

/* Selection in the folder list, which Elastic colours separately. */
#folderlist-content li.selected,
#folderlist-content li.selected > a,
html.dark-mode #folderlist-content li.selected {
    background-color: var(--brand-soft) !important;
    color: var(--brand) !important;
}

/* The empty reading pane: no Roundcube artwork. */
#layout-content .watermark,
#layout-content > .watermark,
.watermark {
    background-image: none !important;
}

body.task-login #rcmloginsubmit,
#login-form .formbuttons .button {
    text-transform: none !important;
    font-weight: 600;
}