@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --cm-bg: #cbd4cb;
  --cm-surface: #fff;
  --cm-soft: #eef2ed;
  --cm-border: #dfe6de;
  --cm-control: #d3dcd1;
  --cm-ink: #111;
  --cm-muted: #667063;
  --cm-accent: #1f7a38;
  --cm-selected: #dfe8dc;
}
html.dark-mode {
  --cm-bg: #171d18;
  --cm-surface: #222a23;
  --cm-soft: #2c362d;
  --cm-border: #3a473b;
  --cm-control: #526050;
  --cm-ink: #f1f5ef;
  --cm-muted: #a8b5a4;
  --cm-accent: #9ccc94;
  --cm-selected: #344d36;
}
html, body, button, input, textarea, select, .popover, .ui-widget {
  font-family: 'Inter Variable', sans-serif;
}
body, html.dark-mode body { background: var(--cm-bg); color: var(--cm-ink); }
a, html.dark-mode a { color: var(--cm-accent); }
a:hover { color: var(--cm-ink); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cm-ink);
  outline-offset: 3px;
}
.form-control, .custom-select, .input-group-text,
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode .input-group-text {
  background-color: var(--cm-surface);
  border-color: var(--cm-control);
  color: var(--cm-ink);
  border-radius: 7px;
}
.form-control:focus, .custom-select:focus, html.dark-mode .form-control:focus {
  border-color: var(--cm-ink);
  box-shadow: 0 0 0 3px rgb(80 104 73 / 12%);
}
.form-control::placeholder { color: var(--cm-muted); opacity: .8; }
.btn { border-radius: 7px; font-weight: 650; }
.btn-primary, .btn-primary:focus, .btn-primary:active,
html.dark-mode .btn-primary, html.dark-mode .btn-primary:focus {
  background: #111; border-color: #111; color: #fff;
}
.btn-primary:hover, html.dark-mode .btn-primary:hover { background: #2a2a2a; border-color: #2a2a2a; color: #fff; }
.btn-primary.disabled, .btn-primary:disabled { background: #111; border-color: #111; opacity: .5; }
.custom-control-input:checked ~ .custom-control-label:before {
  background-color: var(--cm-accent); border-color: var(--cm-accent);
}
.badge, .unreadcount { border-radius: 5px; }

/* The sign-in card uses the same dimensions and tokens as CleverMart's login. */
body.task-login #layout {
  min-height: 100%; height: 100dvh; overflow: auto;
  padding: 24px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 20%, rgb(255 255 255 / 94%), transparent 38%), var(--cm-bg);
}
html.dark-mode .task-login #layout {
  background: radial-gradient(circle at 50% 20%, #354737, transparent 45%), var(--cm-bg);
}
body.task-login #layout-content {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: none; min-width: 0;
  padding: 0; margin: auto; background: none; border: 0; box-shadow: none;
  overflow: visible; flex: 1;
}
.cm-login-card {
  width: 410px; max-width: 100%; box-sizing: border-box;
  background: var(--cm-surface); border: 1px solid var(--cm-border);
  border-radius: 14px; box-shadow: 0 18px 50px rgb(36 48 33 / 12%);
  overflow: hidden;
}
.cm-card-header {
  min-height: 82px; padding: 0 34px; border-bottom: 1px solid var(--cm-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cm-brand, .cm-brand:hover, html.dark-mode .cm-brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--cm-ink); text-decoration: none;
}
.cm-brand-mark {
  width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
  background: #111; color: #fff; font-size: 10px; font-weight: 850;
}
.cm-brand-wordmark { font-size: 15px; font-weight: 850; letter-spacing: .12em; }
.cm-home-link {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cm-muted); border-radius: 7px;
}
.cm-home-link svg { width: 19px; height: 19px; }
.cm-home-link:hover { background: var(--cm-soft); color: var(--cm-ink); }
.cm-login-intro { padding: 27px 34px 0; text-align: left; }
.cm-login-intro h1 { margin: 0 0 8px; font-size: 23px; font-weight: 750; letter-spacing: -.035em; }
.cm-login-intro p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cm-muted); }
body.task-login #login-form { position: static; top: auto; width: auto; max-width: none; margin: 0; padding: 25px 34px 25px; }
body.task-login #login-form input:focus-visible { outline: none; }
body.task-login #login-form .input-group { margin-bottom: 18px; border: 1px solid var(--cm-control); border-radius: 7px; }
body.task-login #login-form .input-group:focus-within { border-color: var(--cm-ink); box-shadow: 0 0 0 3px rgb(17 17 17 / 7%); }
body.task-login #login-form .form-control { height: 44px; font-size: 16px; padding-left: 12px; }
body.task-login #login-form .input-group-text { border: 0; border-radius: 7px 0 0 7px; color: var(--cm-muted); }
body.task-login #login-form .input-group > .form-control { border: 0; box-shadow: none; border-radius: 0 7px 7px 0; }
body.task-login #login-form .btn { min-height: 42px; margin-top: 4px; font-size: 13px; text-transform: none; }
body.task-login #login-footer { margin-top: 22px; color: var(--cm-muted); font-size: 12px; }

/* Keep Elastic's responsive navigation, keyboard handling and pane resizing. */
#layout > #layout-menu { background: #111; border-color: #111; }
#layout-menu #logo { width: 34px; height: 34px; max-width: 34px; max-height: 34px; }
#layout-menu .popover-header { background: #111 !important; }
#taskmenu .inner { font-size: 11px; }
#taskmenu a, html.dark-mode #taskmenu a { color: #d7e0d3; }
#taskmenu a:hover, #taskmenu a.selected, html.dark-mode #taskmenu a.selected {
  background: #29362a; color: #fff;
}
#taskmenu a.compose, html.dark-mode #taskmenu a.compose { color: #b9d7b0; }
#taskmenu a.logout { color: #d7e0d3; }
#taskmenu .special-buttons { background: #111; }
#layout-sidebar, #layout-list, #layout-content,
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content {
  background-color: var(--cm-surface); border-color: var(--cm-border);
}
#layout > div > .header, #layout > div > .footer,
html.dark-mode #layout > div > .header, html.dark-mode #layout > div > .footer {
  background-color: var(--cm-surface); color: var(--cm-ink); border-color: var(--cm-border);
}
#layout > div > .header { font-weight: 750; }
.header a, .footer a, .toolbar a, .listing li a,
html.dark-mode .header a, html.dark-mode .footer a, html.dark-mode .toolbar a, html.dark-mode .listing li a {
  color: var(--cm-muted);
}
.listing li.selected > a, .listing li.selected > div > a,
html.dark-mode .listing li.selected > a { color: var(--cm-ink); }
.listing li.selected, .listing tr.selected, .listing tr.selected td,
html.dark-mode .listing li.selected, html.dark-mode .listing tr.selected, html.dark-mode .listing tr.selected td {
  background-color: var(--cm-selected); color: var(--cm-ink);
}
.listing li:hover, .listing tr:hover { background-color: var(--cm-soft); }
ul.treelist li.selected > a, html.dark-mode ul.treelist li.selected > a { background: var(--cm-selected); color: var(--cm-ink); }
ul.treelist li > a:hover { background: var(--cm-soft); color: var(--cm-ink); }
.listing li, .listing tr td, html.dark-mode .listing li, html.dark-mode .listing tr td { border-color: var(--cm-border); }
.listing .unread, .messagelist tr.unread .subject { color: var(--cm-ink); font-weight: 750; }
.folderlist li.mailbox .unreadcount, .listing .unreadcount { background: var(--cm-ink); color: var(--cm-surface); }
.listing-info, .pagenav, .listing-filter, .searchbar,
html.dark-mode .listing-info, html.dark-mode .pagenav, html.dark-mode .listing-filter, html.dark-mode .searchbar {
  background-color: var(--cm-surface); border-color: var(--cm-border); color: var(--cm-muted);
}
.listing-filter .filter-menu, .listing-filter .filter-menu > a { color: var(--cm-ink); }
.searchbar input { background-color: var(--cm-soft); color: var(--cm-ink); }
.searchbar a, .searchbar:before { color: var(--cm-muted); }
.toolbar a:not(.disabled):hover, .header a:not(.disabled):hover { color: var(--cm-ink); }
.btn-link, html.dark-mode .btn-link { color: var(--cm-accent); }
.recipient-input.focus, .recipient-input:focus-within,
.mce-tinymce:focus-within, .mce-edit-area:focus-within {
  border-color: var(--cm-ink) !important; box-shadow: 0 0 0 3px rgb(80 104 73 / 12%) !important;
}
.popover, .popover-header, .popover-body, .ui-dialog, .ui-dialog-titlebar,
html.dark-mode .popover, html.dark-mode .popover-header, html.dark-mode .popover-body {
  background-color: var(--cm-surface); color: var(--cm-ink); border-color: var(--cm-border);
}
.popover, .ui-dialog { border-radius: 10px; }
.popover .listing li a:hover, .popover .listing li a:focus { background: var(--cm-selected); color: var(--cm-ink); }
.nav-tabs .nav-link, html.dark-mode .nav-tabs .nav-link { color: var(--cm-muted); }
.nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-link.active {
  color: var(--cm-ink); border-color: var(--cm-border); background: var(--cm-surface);
}
.ui-widget-content, .formcontent, .message-header, .message-part {
  border-color: var(--cm-border);
}
@media (min-width: 1025px) {
  body:not(.task-login) #layout { padding: 12px; gap: 10px; box-sizing: border-box; }
  body:not(.task-login) #layout > div { border: 1px solid var(--cm-border); border-radius: 10px; overflow: hidden; }
  body:not(.task-login) #layout > #layout-menu { border-color: #111; position: relative; }
  #taskmenu .special-buttons { left: 0; right: 0; bottom: 0; width: auto; }
  #layout-sidebar { min-width: 210px; }
  #layout-content { min-width: 0; }
}
@media (max-width: 480px) {
  body.task-login #layout { padding: 16px; }
  .cm-card-header { padding: 0 22px; min-height: 76px; }
  .cm-login-intro { padding: 24px 22px 0; }
  body.task-login #login-form { padding: 24px 22px; }
  .cm-brand-wordmark { font-size: 14px; }
}
@media print {
  body, html.dark-mode body { background: #fff; color: #111; }
}