/* Garam — палитра брендбука для Roundcube Elastic */
:root {
  --g-white: #faf9f5;
  --g-ivory: #f1ece3;
  --g-pearl: #e5e1da;
  --g-mineral: #c8c2b8;
  --g-nude: #cbaa94;
  --g-graphite: #252422;
}

html:not(.dark-mode) body,
html:not(.dark-mode) #layout > div,
html:not(.dark-mode) .content,
html:not(.dark-mode) .sidebar,
html:not(.dark-mode) .header,
html:not(.dark-mode) .footer,
html:not(.dark-mode) .list-container {
  background-color: var(--g-white);
}

html:not(.dark-mode) #layout-menu {
  background-color: var(--g-ivory);
}

html:not(.dark-mode) #layout-menu a,
html:not(.dark-mode) #layout-menu .special-buttons a {
  color: var(--g-graphite);
}

html:not(.dark-mode) #layout-menu a.selected,
html:not(.dark-mode) #layout-menu a:hover {
  background-color: var(--g-pearl);
  color: var(--g-graphite);
}

html:not(.dark-mode) a,
html:not(.dark-mode) .link {
  color: var(--g-graphite);
}

.btn-primary,
.btn.mainaction,
button.mainaction,
input.mainaction,
.formbuttons .btn.mainaction,
#login-form .btn.mainaction {
  background-color: var(--g-graphite) !important;
  border-color: var(--g-graphite) !important;
  color: var(--g-white) !important;
  border-radius: 999px;
}

.btn-primary:hover,
.btn.mainaction:hover {
  background-color: #3a3835 !important;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) table.listing tr.selected td,
html:not(.dark-mode) table.records-table tr.selected td,
html:not(.dark-mode) .listing li.selected > a {
  background-color: var(--g-pearl) !important;
  color: var(--g-graphite) !important;
}

html:not(.dark-mode) table.messagelist tr.unread td {
  font-weight: 600;
}

html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-select:focus,
html:not(.dark-mode) input:focus {
  border-color: var(--g-nude) !important;
  box-shadow: 0 0 0 0.15rem rgba(203, 170, 148, 0.35) !important;
}

html:not(.dark-mode) .badge,
html:not(.dark-mode) .unreadcount,
html:not(.dark-mode) .msgcount {
  background-color: var(--g-nude) !important;
  color: var(--g-graphite) !important;
}

/* страница входа: как заглушка сайта — логотип, светлый фон, тонкая линия */
html:not(.dark-mode) body.task-login {
  background: radial-gradient(60% 50% at 50% 35%, var(--g-ivory), var(--g-white) 70%);
}

body.task-login #logo {
  max-width: 220px;
  margin-bottom: 1.5rem;
}

body.task-login #login-footer {
  color: var(--g-mineral);
  letter-spacing: 0.08em;
}

#layout-menu #logo {
  max-height: 34px;
}

/* нижние кнопки меню (тёмная тема/справка/выход) — в той же светлой подложке */
html:not(.dark-mode) #layout-menu .special-buttons,
html:not(.dark-mode) #layout-menu .popover-header {
  background-color: var(--g-ivory);
}

html:not(.dark-mode) #layout-menu .special-buttons a,
html:not(.dark-mode) #layout-menu .special-buttons a.logout {
  color: var(--g-graphite);
}

/* плавающая кнопка «Написать» на телефоне */
.floating-action-buttons a.button,
.floating-action-buttons a.button.compose {
  background-color: var(--g-graphite) !important;
  color: var(--g-white) !important;
}

html:not(.dark-mode) #messagelist tr.unread td.subject span.subject a,
html:not(.dark-mode) .listing li .unreadcount {
  color: var(--g-graphite);
}

html:not(.dark-mode) #messagelist tr.unread td.subject .msgicon.status:before,
html:not(.dark-mode) #messagelist tr.unread .status.unread:before {
  color: var(--g-nude);
}

/* шапка левого меню с логотипом */
html:not(.dark-mode) #layout-menu .popover-header {
  background-color: var(--g-ivory) !important;
}