/* WEOMAIL brand 2026-10-15. Application chrome and authored email content stay separate. */
:root {
 color-scheme:light;
 --wm-blue:#88672d; --wm-link:#88672d; --wm-ink:#272b24; --wm-muted:#686e60;
 --wm-line:#dcded3; --wm-soft:#f4f3ee; --wm-panel:#fdfcf8; --wm-sidebar:#eeede6;
 --wm-menu:#e8e8de; --wm-input:#fffefa; --wm-input-line:#929782;
 --wm-hover:#e9e6d9; --wm-selected:#e4d8be; --wm-selected-ink:#4e3b18;
 --wm-focus:#88672d; --wm-danger:#a23e36; --wm-shadow:0 16px 48px #272b2418;
 --wm-button-bg:linear-gradient(110deg,#ead3a8,#c7a974);
 --wm-button-hover:linear-gradient(110deg,#f0ddbc,#d7bb84); --wm-button-ink:#25231c;
}
html.dark-mode {
 color-scheme:dark;
 --wm-blue:#d7bb84; --wm-link:#d7bb84; --wm-ink:#f1eee6; --wm-muted:#b0b2a7;
 --wm-line:#34392f; --wm-soft:#121412; --wm-panel:#1b1e1a; --wm-sidebar:#171a16;
 --wm-menu:#10120f; --wm-input:#151813; --wm-input-line:#737a66;
 --wm-hover:#292e24; --wm-selected:#3b3526; --wm-selected-ink:#f1d7a8;
 --wm-focus:#d7bb84; --wm-danger:#f1a69e; --wm-shadow:0 16px 48px #0005;
}
html body:not(.task-login) {background:var(--wm-soft);color:var(--wm-ink)}
html body:not(.task-login) #layout-content,
html body:not(.task-login) #layout-list {background:var(--wm-panel);color:var(--wm-ink);border-color:var(--wm-line);min-width:0}
html body:not(.task-login) #layout-sidebar {background:var(--wm-sidebar);color:var(--wm-ink);border-color:var(--wm-line)}
html body:not(.task-login) #layout-menu {background:var(--wm-menu);border-color:var(--wm-line);box-shadow:none;flex-shrink:0}
html body:not(.task-login) #layout-menu .popover-header {background:var(--wm-menu)!important;border-color:var(--wm-line);align-items:center;justify-content:center}
html #layout-menu .popover-header a.weomail-menu-brand {display:flex!important;justify-content:center;align-items:center;height:100%;padding:.5rem;line-height:1}
.weomail-menu-logo {height:auto;object-fit:contain}
.weomail-menu-logo-full {width:155px}
.weomail-menu-logo-small {width:36px;height:36px}
.weomail-menu-logo-dark,.weomail-menu-logo-small {display:none}
html.dark-mode .weomail-menu-logo-light {display:none}
html.dark-mode .weomail-menu-logo-dark {display:block}
html body:not(.task-login) #taskmenu {background:transparent;box-shadow:none;padding:.4rem}
html body:not(.task-login) #taskmenu .special-buttons {background:var(--wm-menu)!important;padding:.4rem;width:100%}
html body:not(.task-login) #taskmenu a {width:100%;max-width:none;margin:.15rem 0;border-radius:10px;color:var(--wm-ink);background:transparent;box-shadow:none;transition:background-color .15s ease,color .15s ease}
html body:not(.task-login) #taskmenu a:before {color:inherit}
html body:not(.task-login) #taskmenu a span.inner {color:inherit;font-weight:600}
html body:not(.task-login) #taskmenu a:hover,
html body:not(.task-login) #taskmenu a:focus {background:var(--wm-hover);color:var(--wm-link)}
/* Roundcube marks the current task aria-disabled; it still needs an active appearance. */
html body:not(.task-login) #taskmenu a.selected {background:var(--wm-selected);color:var(--wm-selected-ink);opacity:1}
html body:not(.task-login) #taskmenu .action-buttons a.compose {background:var(--wm-button-bg);color:var(--wm-button-ink);opacity:1}
html body:not(.task-login) #taskmenu .action-buttons a.compose:hover {background:var(--wm-button-hover);color:var(--wm-button-ink)}
html body:not(.task-login) #layout-menu #taskmenu .special-buttons a {background:transparent}
html body:not(.task-login) #layout-menu #taskmenu .special-buttons a:hover {background:var(--wm-hover)}
html body:not(.task-login) #taskmenu a.logout {color:var(--wm-danger)!important}
html body:not(.task-login) #taskmenu a.about {display:none!important}
html body:not(.task-login) #layout > div > .header,
html body:not(.task-login) #layout > div > .footer,
html body:not(.task-login) .listbox .footer {background:var(--wm-panel);border-color:var(--wm-line);color:var(--wm-ink)}
html body:not(.task-login) .header-title,
html body:not(.task-login) #message-header .header-title {color:var(--wm-ink)}
/* Elastic also adds inline centering margins on resize; keep column titles left. */
html body:not(.task-login) #layout > div > .header {justify-content:flex-start}
html body:not(.task-login) #layout > div > .header > .header-title {text-align:left;margin:0!important;min-width:0}
html body:not(.task-login) #layout > div > .header > .header-title:not(.wm-compose-title) {padding:0 .75rem}
html body:not(.task-login) a {color:var(--wm-link)}
html body:not(.task-login) .menu.toolbar,
html body:not(.task-login) .menu.pagenav {box-shadow:none}
html body:not(.task-login) .menu.toolbar a,
html body:not(.task-login) .menu.pagenav a,
html body:not(.task-login) .header a.button {color:var(--wm-ink)}
html body:not(.task-login) .menu a:not(.disabled):hover,
html body:not(.task-login) .menu a:not(.disabled):focus {background-color:var(--wm-hover);color:var(--wm-ink)}
html body:not(.task-login) .menu a:not(.disabled):is(:hover,:focus)::before,
html body:not(.task-login) .menu a:not(.disabled):is(:hover,:focus)::after {color:inherit}
html body:not(.task-login) .btn-primary,
html body:not(.task-login) .button.mainaction {border:1px solid var(--wm-blue);background:var(--wm-button-bg);color:var(--wm-button-ink);border-radius:8px;box-shadow:none}
html body:not(.task-login) .btn-primary:hover,
html body:not(.task-login) .button.mainaction:hover {background:var(--wm-button-hover);border-color:var(--wm-blue)}
html body:not(.task-login) .floating-action-buttons a.button {background:var(--wm-button-bg);color:var(--wm-button-ink);opacity:1;box-shadow:0 4px 14px #12141226}
html body:not(.task-login) .btn-secondary {border-color:var(--wm-input-line);background:var(--wm-hover);color:var(--wm-ink);border-radius:8px}
html body:not(.task-login) .listing li,
html body:not(.task-login) .listing td {border-color:var(--wm-line)}
html body:not(.task-login) .listing li > a,
html body:not(.task-login) .listing td {color:var(--wm-ink)}
html body:not(.task-login) .listing li:hover,
html body:not(.task-login) .listing tr:hover td {background-color:var(--wm-hover)}
html body:not(.task-login) .listing li.selected,
html body:not(.task-login) .listing li.selected > a,
html body:not(.task-login) .listing tr.selected td,
html body:not(.task-login) .listing tr.selected td a {background-color:var(--wm-selected);color:var(--wm-selected-ink)}
html body:not(.task-login) .folderlist li.selected > a,
html body:not(.task-login) .folderlist li.selected > span {background:var(--wm-selected);color:var(--wm-selected-ink)}
html body:not(.task-login) .messagelist tr.unread td,
html body:not(.task-login) .messagelist tr.unread td.subject span.subject a {color:var(--wm-ink);font-weight:700}
html body:not(.task-login) .messagelist td.subject span.fromto,
html body:not(.task-login) .messagelist td.subject span.date,
html body:not(.task-login) .listing span.secondary,
html body:not(.task-login) .listing-info,
html body:not(.task-login) .formcontent .hint,
html body:not(.task-login) .quota-widget,
html body:not(.task-login) .text-muted {color:var(--wm-muted)!important}
html body:not(.task-login) .searchbar,
html body:not(.task-login) .searchbar form {background:var(--wm-panel);color:var(--wm-ink);border-color:var(--wm-line)}
html body:not(.task-login) .searchbar input,
html body:not(.task-login) .searchbar form:before {color:var(--wm-ink)}
html body:not(.task-login) .form-control,
html body:not(.task-login) .custom-select,
html body:not(.task-login) .recipient-input,
html body:not(.task-login) textarea {border-color:var(--wm-input-line);border-radius:8px;background-color:var(--wm-input);color:var(--wm-ink)}
html body:not(.task-login) input::placeholder,
html body:not(.task-login) textarea::placeholder {color:var(--wm-muted);opacity:1}
html body:not(.task-login) .recipient-input input,
html body:not(.task-login) .form-control-plaintext {color:var(--wm-ink)}
html body:not(.task-login) .recipient-input .recipient,
html body:not(.task-login) .input-group-text,
html body:not(.task-login) .html-editor .editor-toolbar {background:var(--wm-hover);color:var(--wm-ink);border-color:var(--wm-input-line)}
html body:not(.task-login) .form-control:focus,
html body:not(.task-login) .custom-select:focus,
html body:not(.task-login) textarea:focus,
html body:not(.task-login) .recipient-input.focus {background-color:var(--wm-input);color:var(--wm-ink);border-color:var(--wm-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-focus) 22%,transparent)}
html a:focus-visible,html button:focus-visible {outline:2px solid var(--wm-focus);outline-offset:-3px}
/* Floating surfaces only: applying these to every .menu breaks toolbars. */
html body:not(.task-login) .popover,
html body:not(.task-login) .popupmenu,
html body:not(.task-login) .ui-dialog,
html body:not(.task-login) .ui-menu {background:var(--wm-panel);color:var(--wm-ink);border-color:var(--wm-line);box-shadow:var(--wm-shadow)}
html body:not(.task-login) .popover-header,
html body:not(.task-login) .ui-dialog-titlebar,
html body:not(.task-login) .ui-dialog-buttonpane {background:var(--wm-sidebar);color:var(--wm-ink);border-color:var(--wm-line)}
html body:not(.task-login) .popover .menu,
html body:not(.task-login) .popupmenu .menu,
html body:not(.task-login) .ui-dialog-content {background:transparent;color:var(--wm-ink)}
html body:not(.task-login) .ui-widget-content {color:var(--wm-ink);border-color:var(--wm-line)}
html body:not(.task-login) .popupmenu .listing li > a:not(.disabled):is(:hover,:focus),
html body:not(.task-login) .popover .listing li > a:not(.disabled):is(:hover,:focus),
html body:not(.task-login) .dropdown-menu .dropdown-item:not(.disabled):is(:hover,:focus) {background-color:var(--wm-hover);color:var(--wm-ink)}
html body:not(.task-login) .popupmenu .listing li.selected,
html body:not(.task-login) .popupmenu .listing li.selected > a {background-color:var(--wm-selected);color:var(--wm-selected-ink)}
html body:not(.task-login) .ui-menu .ui-state-active {background:var(--wm-selected)!important;color:var(--wm-selected-ink)!important}
html body:not(.task-login) .ui-menu .ui-state-active a {color:inherit}
html body:not(.task-login) .file-upload {border-color:var(--wm-input-line);border-radius:10px}
html body:not(.task-login) .quota-widget .bar {background:var(--wm-hover);border-color:var(--wm-line)}
html body:not(.task-login) .quota-widget .value {background:var(--wm-blue)}
/* Display-only mail palette. Dark mode also covers inline HTML mail colours. */
html body:not(.task-login) .message-htmlpart {background:var(--wm-panel);color:var(--wm-ink);border:1px solid var(--wm-line);border-radius:10px;margin-top:.75rem;padding:1rem;overflow:auto}
html body:not(.task-login) .message-htmlpart div.rcmBody {color:var(--wm-ink)}
html body:not(.task-login) .message-htmlpart a {color:var(--wm-link)}
html body:not(.task-login) .message-htmlpart blockquote {background:var(--wm-soft);color:var(--wm-muted);border-color:var(--wm-input-line)}
@media screen {
 html.dark-mode body #messagebody .message-htmlpart {color-scheme:dark;--wm-mail-text:var(--wm-ink);background:var(--wm-panel)!important;color:var(--wm-ink)!important}
 html.dark-mode body #messagebody .message-htmlpart :where(div,span,p,table,thead,tbody,tfoot,tr,td,th,section,article,header,footer,h1,h2,h3,h4,h5,h6,ul,ol,li,a,b,strong,i,em,u,font,blockquote,pre,code,small,center) {color:var(--wm-mail-text)!important;background-color:transparent!important;background-image:none!important;border-color:var(--wm-line)!important}
 html.dark-mode body #messagebody .message-htmlpart a {--wm-mail-text:var(--wm-link)}
 html.dark-mode body #messagebody .message-htmlpart blockquote {--wm-mail-text:var(--wm-muted);background-color:var(--wm-soft)!important;border-left-color:var(--wm-input-line)!important}
 html.dark-mode body #messagebody .message-htmlpart :is(pre,code) {background-color:var(--wm-soft)!important}
}
@media print {
 html body .message-htmlpart,html body .message-htmlpart div.rcmBody {background:#fff;color:#272b24}
}
html body:not(.task-login) .message-part {color:var(--wm-ink)}
html body:not(.task-login) #messagepartframe {background:var(--wm-panel)}
@media screen and (min-width:481px) {
 html body:not(.task-login) #layout-menu {display:flex;flex-direction:column;width:96px}
 html body:not(.task-login) #layout-menu .popover-header {flex:0 0 58px}
 html body:not(.task-login) #taskmenu {flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
 html body:not(.task-login) #taskmenu .special-buttons {position:static;margin-top:auto;padding:0}
 html body:not(.task-login) #taskmenu a {width:100%;height:auto;min-height:58px;padding:.65rem .2rem}
 html body:not(.task-login) #taskmenu a span.inner {display:block;white-space:normal;line-height:1.25;padding:.2rem 0 0;font-size:.8rem}
 html #layout-menu .weomail-menu-logo-full {display:none}
 html #layout-menu .weomail-menu-logo-small-light {display:block}
 html.dark-mode #layout-menu .weomail-menu-logo-small-light {display:none}
 html.dark-mode #layout-menu .weomail-menu-logo-small-dark {display:block}
}
@media screen and (min-width:481px) and (max-width:1024px) {
 html body:not(.task-login) #layout-menu {width:54px}
 html body:not(.task-login) #taskmenu {padding:.25rem}
 html body:not(.task-login) #taskmenu a {min-height:46px;padding:.5rem 0}
 html body:not(.task-login) #taskmenu a:before {line-height:1.5}
 html body:not(.task-login) #taskmenu a span.inner {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media screen and (max-width:480px) {
 html body:not(.task-login) #layout-menu.popover {width:min(290px,100vw)}
 html body:not(.task-login) #taskmenu a {padding:0 .75rem;white-space:normal}
 html body:not(.task-login) #taskmenu .special-buttons {position:static;padding:0}
 html #layout-menu .weomail-menu-logo-small {display:none}
 html #layout-menu .popover-header a.weomail-menu-brand {flex:1}
 html #layout-menu .popover-header .weomail-menu-logo-full {max-width:155px}
}
@media (prefers-reduced-motion:reduce) {html #taskmenu a {transition:none}}
@media print {
 html body:not(.task-login),html body:not(.task-login) #layout-content {background:#fff;color:#000}
 html body:not(.task-login) .message-htmlpart {border:0;padding:0}
}

/* Montserrat is served locally, including Cyrillic. Preserve icon and authored mail fonts. */
html body,html button,html input,html optgroup,html select,html textarea,html .popover,
html .ui-dialog,html div.tox,html div.tox :not(svg):not(path) {font-family:Montserrat,system-ui,-apple-system,sans-serif!important}
html body {font-weight:400;letter-spacing:-.01em}
html body:not(.task-login) #taskmenu a span.inner {font-weight:500}
html body:not(.task-login) .header-title {font-weight:600}
html body:not(.task-login) .message-htmlpart {font-family:Arial,sans-serif;letter-spacing:normal}

@media (min-width:768px) {
 html body:not(.action-compose) .header .menu.toolbar a:not(.dropdown):before {height:1.4rem!important;font-size:1.2rem;line-height:1.4rem}
 html body .header .menu.toolbar a span.inner {white-space:normal;line-height:1.12;font-size:.78rem;text-overflow:clip;max-height:none}
}

/* Native Elastic controls use the same brand tokens as workspace controls. */
html body:not(.task-login) input:is([type=checkbox],[type=radio]) {accent-color:var(--wm-focus)}
html body:not(.task-login) .custom-control-label::before {background:var(--wm-input);border-color:var(--wm-input-line)}
html body:not(.task-login) .custom-control-input:checked ~ .custom-control-label::before {background:var(--wm-focus);border-color:var(--wm-focus)}
html body:not(.task-login) .custom-control-input:disabled ~ .custom-control-label {opacity:.55}
html body:not(.task-login) .custom-control-input:checked:disabled ~ .custom-control-label::before {background:var(--wm-focus);border-color:var(--wm-focus)}
html body:not(.task-login) .custom-control-input:focus ~ .custom-control-label::before {border-color:var(--wm-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-focus) 22%,transparent)}
html body:not(.task-login) .custom-switch .custom-control-input:checked ~ .custom-control-label::after {background:var(--wm-panel)}
html.dark-mode body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2325231c' d='M6.564.75 3.59 3.724l-1.6-1.6L.564 3.548l3.025 3.026 4.4-4.4z'/%3E%3C/svg%3E")}
html body:not(.task-login) .progress-bar {background:var(--wm-blue)}
html body:not(.task-login) .nav-tabs {border-color:var(--wm-line)}
html body:not(.task-login) .nav-tabs .nav-link.active {background:var(--wm-panel);color:var(--wm-link);border-color:var(--wm-line)}
html body:not(.task-login) .nav-tabs .nav-link:not(.active):hover {background:var(--wm-hover);border-color:var(--wm-line)}
html body:not(.task-login) .listing .unreadcount {background:var(--wm-selected);color:var(--wm-selected-ink)}
/* Reuse the source brand, with the same lower-right crop as the main site. */
.weomail-menu-brand-mark {display:none}
.weomail-menu-brand-logo {display:block;width:160px;height:auto;clip-path:polygon(0 0,100% 0,100% 75%,78% 75%,78% 100%,0 100%);filter:brightness(.38)}
html.dark-mode .weomail-menu-brand-logo {filter:none}
@media screen and (min-width:481px) {
 html #layout-menu .weomail-menu-brand-logo {display:none}
 html #layout-menu .weomail-menu-brand-mark {display:block;flex:none;width:34px;height:34px;background:var(--wm-link);-webkit-mask:url(../images/weboffice_logo_lk_dark_sm.png) center/contain no-repeat;mask:url(../images/weboffice_logo_lk_dark_sm.png) center/contain no-repeat}
}