/**
 * Почта CDTO — оформление Elastic под палитру бренда CDTO (teal + lime + оранжевый акцент).
 * Источник: docs/operations/LMS-CDTO-ACTUAL-PALETTE-2026-03-04.md
 */
:root {
  --cdto-teal: #0f766e;
  --cdto-teal-hover: #0d5c56;
  --cdto-lime: #84cc16;
  --cdto-orange: #ed7d31;
  --cdto-text: #1e293b;
  --cdto-muted: #64748b;
  --cdto-bg: #f8fafc;
  --cdto-border: #e2e8f0;
  --cdto-footer-bg: #222222;
  --cdto-selected: #ecfdf5;
}

html {
  color-scheme: light;
}

body {
  color: var(--cdto-text) !important;
  background-color: var(--cdto-bg) !important;
}

#layout {
  background-color: var(--cdto-bg) !important;
}

/* Верхняя панель (список писем, настройки) — бирюзовый бренд */
#layout > div > .header {
  background-color: var(--cdto-teal) !important;
  background: var(--cdto-teal) !important;
  color: #ffffff !important;
  border-bottom-color: var(--cdto-teal-hover) !important;
}

#layout > div > .header .header-title,
#layout > div > .header .header-title a {
  color: #ffffff !important;
}

#layout > div > .header a.button,
#layout > div > .header a.toolbar-list-button,
#layout > div > .header a.toolbar-menu-button {
  color: #ffffff !important;
}

#layout > div > .header a.button:hover,
#layout > div > .header a.button:focus {
  color: var(--cdto-lime) !important;
}

/* Тулбар в шапке списка писем — текст на бирюзовом */
#layout > div > .header .toolbar.menu a,
#layout > div > .header .menu.toolbar a {
  color: #ffffff !important;
}

#layout > div > .header .toolbar.menu a:hover,
#layout > div > .header .menu.toolbar a:hover {
  color: var(--cdto-lime) !important;
}

/* Нижняя панель списка */
#layout > div > .footer {
  background-color: #ffffff !important;
  border-top-color: var(--cdto-border) !important;
  color: var(--cdto-muted) !important;
}

/* Боковая колонка */
#layout-sidebar {
  background-color: #ffffff !important;
  border-right-color: var(--cdto-border) !important;
}

#layout-menu .popover-header {
  background-color: var(--cdto-teal) !important;
  background: var(--cdto-teal) !important;
}

/* Основные кнопки (вместо #37beff) */
.btn-primary {
  color: #ffffff !important;
  background: var(--cdto-teal) !important;
  background-color: var(--cdto-teal) !important;
  border-color: var(--cdto-teal) !important;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus {
  background: var(--cdto-teal-hover) !important;
  background-color: var(--cdto-teal-hover) !important;
  border-color: var(--cdto-teal-hover) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.35) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  opacity: 0.65;
}

/* Ссылки в контенте */
#layout-content a,
.content a,
.propform a:not(.btn),
.listing a:not(.btn) {
  color: var(--cdto-teal) !important;
}

#layout-content a:hover,
.content a:hover {
  color: var(--cdto-lime) !important;
}

/* Заголовки разделов — оранжевый акцент бренда (как заголовки блоков на LMS) */
h1,
h2,
.boxtitle,
.ui-dialog .ui-dialog-title {
  color: var(--cdto-orange) !important;
}

/* Заголовки внутри бирюзовых панелей — белый (перекрывает правило для h2) */
#layout > div > .header .header-title,
#layout > div > .header .header-title a {
  color: #ffffff !important;
}

h3.boxtitle {
  color: var(--cdto-text) !important;
}

/* Выделенная строка в списках */
.listing tr.selected td,
.messagelist tr.selected td {
  background-color: var(--cdto-selected) !important;
  color: var(--cdto-text) !important;
}

/* Страница входа */
.task-login #layout-content {
  background-color: transparent !important;
}

.task-login body,
body.task-login {
  background: linear-gradient(180deg, #ecfdf5 0%, var(--cdto-bg) 45%) !important;
}

#login-form {
  background: #ffffff !important;
  border: 1px solid var(--cdto-border) !important;
  border-radius: 12px !important;
  padding: 1.5rem 1.25rem 1rem !important;
  box-shadow: 0 4px 24px rgba(15, 118, 110, 0.08) !important;
}

#login-form .form-control:focus {
  border-color: var(--cdto-teal) !important;
  box-shadow: 0 0 0 0.15rem rgba(15, 118, 110, 0.25) !important;
}

#login-footer,
#login-footer a {
  color: var(--cdto-muted) !important;
}

#login-footer a:hover {
  color: var(--cdto-teal) !important;
}

/* Поля ввода */
.form-control:focus {
  border-color: var(--cdto-teal) !important;
}

/* Тёмная тема: сохраняем бирюзовый акцент */
html.dark-mode .btn-primary {
  background-color: var(--cdto-teal) !important;
  color: #ffffff !important;
}

html.dark-mode .btn-primary:hover:not(:disabled) {
  background-color: var(--cdto-teal-hover) !important;
}

html.dark-mode #layout > div > .header {
  background-color: #0a5c54 !important;
}

html.dark-mode body {
  color: #e2e8e9 !important;
}