/*
 * Loki colours on stock Elastic.
 * Light: dark fox (#004d4d) on mint. Dark: teal fox (#008080) on ink.
 */
html {
  --brand: #008080;
  --brand-dark: #004d4d;
  --brand-mid: #009999;
  --brand-soft: #e6f5f5;
  --brand-surface: #d6efef;
  --brand-ink: #1a2e2e;
  --brand-line: #b8d4d4;
  --brand-glow: rgba(0, 128, 128, 0.28);
}

html.dark-mode {
  --brand: #009999;
  --brand-dark: #008080;
}

html.dark-mode #logo {
  opacity: 1 !important;
}

/* Login canvas (light) */
body.task-login {
  background:
    radial-gradient(circle at top left, rgba(0, 128, 128, 0.18), transparent 42%),
    linear-gradient(160deg, #e6f5f5 0%, #d6efef 45%, #eef8f8 100%);
}

html.dark-mode body.task-login {
  background: #1a2e2e;
}

body.task-login #layout-content,
body.task-login #layout {
  background: transparent;
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand-dark);
}

html.dark-mode a {
  color: var(--brand-mid);
}

html.dark-mode a:hover {
  color: var(--brand-soft);
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.floating-action-buttons a.button,
div.tox .tox-dialog__footer .tox-button,
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled,
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus:not(:disabled):not(.disabled) {
  color: #fff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

html.dark-mode .btn-primary:hover:not(:disabled) {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
}

.form-control:focus,
.formcontent.raweditor .CodeMirror-focused,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
div.tox.focused,
div.tox .tox-color-input > input:focus,
div.tox .tox-listboxfield .tox-listbox--select:focus,
div.tox .tox-textarea:focus,
div.tox .tox-textfield:focus,
html.dark-mode .input-group a:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-glow) !important;
}

.input-group-text input:focus {
  border-color: var(--brand) !important;
}

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

.quota-widget .value,
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
.popupmenu .listing li.selected,
.popupmenu .listing li > a:not(.disabled):hover,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.ui-menu .ui-state-active,
#messagestack .alert-info,
#messagestack .alert-info.information,
.ui.alert.boxinformation,
.googie_list li.googie_list_onhover {
  background-color: var(--brand);
  color: #fff;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
  color: var(--brand-mid);
}

#taskmenu .action-buttons a,
.ui.alert a:not(.btn),
html.dark-mode #taskmenu .action-buttons a {
  color: var(--brand);
}

.ui-slider .ui-slider-handle.ui-state-active,
.ui-datepicker a.ui-state-active {
  background: var(--brand) !important;
  border-color: var(--brand-dark);
  color: #fff !important;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker.ui-widget-content .ui-state-highlight {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.floating-action-buttons a.button {
  box-shadow: 0 0 5px 5px var(--brand-glow);
}