/**
 * ПЕРЕРАБОТАННАЯ ЦВЕТОВАЯ СХЕМА ROUNDCUBE
 * Профессиональная UX-оптимизированная палитра
 * 
 * ПРАВИЛО: Красный = важность/действие, НЕ основной текст
 */

:root {
  /* Brand Colors */
  --color-navy: #002366;
  --color-navy-light: rgba(0, 35, 102, 0.08);
  --color-navy-dark: #001a4d;
  --color-red: #E31937;
  --color-red-dark: #B31229;
  --color-gray-text: #323232;      /* Основной текст */
  --color-gray-medium: #6B7280;    /* Второстепенный текст */
  --color-gray-light: #F5F7FA;
  --color-gray-border: #E5E7EB;
  --color-white: #FFFFFF;
}

/* ===== ОСНОВНОЙ ТЕКСТ - Темно-серый ===== */

/* Текст в меню навигации */
.task-menu a,
.task-menu button,
.taskmenu a,
.taskmenu button {
  background-color: transparent !important;
  color: var(--color-gray-text) !important; /* Темно-серый вместо Red */
  border-radius: 6px !important;
  margin: 2px 4px !important;
  transition: all 0.2s ease !important;
}

/* Hover - акцент Navy */
.task-menu a.button:hover,
.task-menu button:hover {
  background-color: var(--color-gray-light) !important;
  color: var(--color-navy) !important; /* Navy при hover */
}

/* Выбранный элемент - Navy текст + Red граница */
.task-menu a.button.selected,
.task-menu button.selected {
  background-color: var(--color-navy-light) !important; /* Очень светлый Navy фон */
  color: var(--color-navy) !important; /* Navy текст */
  border-left: 3px solid var(--color-red) !important; /* Красная акцентная граница */
  font-weight: 600 !important;
}

/* ===== КРАСНЫЙ ТОЛЬКО ДЛЯ ВАЖНЫХ ДЕЙСТВИЙ ===== */

/* Primary кнопка (Написать сообщение) - красная */
.task-menu a.button.compose,
.task-menu button.compose,
button.btn-primary,
.button.primary,
input[type="submit"].primary {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.task-menu a.button.compose:hover,
button.btn-primary:hover,
.button.primary:hover {
  background-color: var(--color-red-dark) !important;
  border-color: var(--color-red-dark) !important;
}

/* Кнопка "Написать сообщение" - выделяется красным */
.task-menu a[href*="compose"],
.task-menu button[onclick*="compose"] {
  background-color: var(--color-red) !important;
  color: #fff !important;
}

.task-menu a[href*="compose"]:hover {
  background-color: var(--color-red-dark) !important;
}

/* ===== ИКОНКИ - Соответствуют тексту ===== */

/* Иконки в меню - темно-серые */
.task-menu a i,
.task-menu button i,
.task-menu a:before,
.task-menu button:before {
  color: inherit !important; /* Наследуют цвет текста */
}

/* Иконки в выбранном элементе - Navy */
.task-menu a.button.selected i,
.task-menu button.selected i {
  color: var(--color-navy) !important;
}

/* ===== ССЫЛКИ - Red только для активных ===== */

/* Обычные ссылки - Navy */
a {
  color: var(--color-navy) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--color-red) !important; /* Red при hover */
}

/* Активные/важные ссылки - Red */
a.active,
a.important {
  color: var(--color-red) !important;
}

/* ===== ПАПКИ И СПИСКИ ===== */

/* Папки - темно-серый текст */
.treelist li > div {
  color: var(--color-gray-text) !important;
  border-radius: 4px !important;
  margin: 1px 0 !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

/* Hover на папке - Navy */
.treelist li:hover > div {
  background-color: var(--color-gray-light) !important;
  color: var(--color-navy) !important;
}

/* Выбранная папка - Navy текст + Red граница */
.treelist li.selected > div {
  background-color: var(--color-navy-light) !important;
  color: var(--color-navy) !important;
  border-left: 3px solid var(--color-red) !important;
  font-weight: 600 !important;
}

/* ===== HEADER & TOOLBAR ===== */

/* Header - белый фон */
#layout > .header,
body #layout > .header {
  background-color: var(--color-white) !important;
  border-bottom: 2px solid var(--color-gray-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Красная акцентная линия под header */
#layout > .header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-red) !important;
}

/* Toolbar - белый */
.toolbar,
.header-toolbar,
body .toolbar {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-gray-border) !important;
}

/* Кнопки toolbar - темно-серые */
.toolbar button,
.header-toolbar button {
  color: var(--color-gray-text) !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

/* Hover toolbar - Navy текст, светлый фон */
.toolbar button:hover,
.header-toolbar button:hover {
  background-color: var(--color-gray-light) !important;
  color: var(--color-navy) !important;
}

/* ===== ПРЕДУПРЕЖДЕНИЯ И УВЕДОМЛЕНИЯ - Красный ===== */

/* Только для важных уведомлений */
.ui.alert.error,
.alert-danger,
.error-message {
  background-color: #FEE2E2 !important;
  color: var(--color-red) !important;
  border-left: 4px solid var(--color-red) !important;
}

.ui.alert.warning {
  background-color: #FEF3C7 !important;
  color: #F59E0B !important;
  border-left: 4px solid #F59E0B !important;
}

.ui.alert.success {
  background-color: #D1FAE5 !important;
  color: #059669 !important;
  border-left: 4px solid #059669 !important;
}

/* ===== BADGES - Счетчики непрочитанных ===== */

.badge.badge-important,
.badge.unread,
.unread-count {
  background-color: var(--color-red) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ===== FOCUS STATES ===== */

*:focus-visible {
  outline: 2px solid var(--color-navy) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-navy) !important;
  box-shadow: 0 0 0 4px rgba(0, 35, 102, 0.1) !important;
}

/* ===== КОНТЕКСТНОЕ МЕНЮ ===== */

.popupmenu.listing li {
  color: var(--color-gray-text) !important;
}

.popupmenu.listing li:hover {
  background-color: var(--color-gray-light) !important;
  color: var(--color-navy) !important;
}

.popupmenu.listing li.selected {
  background-color: var(--color-navy-light) !important;
  color: var(--color-navy) !important;
}

/* ===== CHECKBOXES ===== */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
}

/* ===== TABS ===== */

.tabsbar .tab {
  color: var(--color-gray-text) !important;
}

.tabsbar .tab:hover {
  color: var(--color-navy) !important;
}

.tabsbar .tab.selected {
  border-bottom: 3px solid var(--color-red) !important;
  color: var(--color-navy) !important;
  font-weight: 600 !important;
}

/* ===== SELECTED ITEMS ===== */

.listing li.selected,
.listing tr.selected {
  background-color: var(--color-navy-light) !important;
  border-left: 3px solid var(--color-red) !important;
}

.listing li:hover,
.listing tr:hover {
  background-color: var(--color-gray-light) !important;
}
/**
 * УЛЬТРА-СПЕЦИФИЧНЫЕ СЕЛЕКТОРЫ для Roundcube
 * Перекрывают встроенные стили Elastic skin
 */

/* ===== ССЫЛКИ В ПАПКАХ - Темно-серый ===== */

/* Ссылки в дереве папок */
.treelist li > div > a,
.treelist li > a,
nav.folderlist li > a,
.listing.treelist li a,
.folderlist li a {
  color: #323232 !important; /* Темно-серый вместо Red */
}

/* Hover на ссылках в папках - Navy */
.treelist li > div > a:hover,
.treelist li > a:hover,
nav.folderlist li > a:hover,
.folderlist li a:hover {
  color: #002366 !important; /* Navy */
}

/* Выбранная папка - Navy текст + Red граница */
.treelist li.selected > div > a,
.treelist li.selected > a,
nav.folderlist li.selected > a,
.folderlist li.selected a {
  color: #002366 !important; /* Navy */
  font-weight: 600 !important;
}

/* ===== ССЫЛКИ В ADDRESSBOOK (Контакты) ===== */

/* Персональные адреса, Собранные получатели и т.д. */
.listing.contacts li a,
.addressbook .treelist li a,
nav[aria-label*="Groups"] li a,
nav[aria-label*="Группы"] li a,
nav.groups-tree li a {
  color: #323232 !important; /* Темно-серый */
}

nav.groups-tree li a:hover,
.addressbook .treelist li a:hover {
  color: #002366 !important; /* Navy при hover */
}

nav.groups-tree li.selected a,
.addressbook .treelist li.selected a {
  color: #002366 !important; /* Navy для выбранных */
  font-weight: 600 !important;
}

/* ===== ВСЕ ССЫЛКИ В NAVIGATION ===== */

/* Универсальный селектор для всех navigation ссылок */
nav a,
aside nav a,
.sidebar nav a,
navigation a {
  color: #323232 !important;
}

nav a:hover,
aside nav a:hover {
  color: #002366 !important;
}

nav a.selected,
nav li.selected a {
  color: #002366 !important;
  font-weight: 600 !important;
}

/* ===== ССЫЛКИ В ВЕРХНЕМ TOOLBAR ===== */

/* "Выбрать", "Обсуждения", "Параметры" */
.menu.toolbar a,
.toolbar .menu a,
.listing-menu a {
  color: #323232 !important;
}

.menu.toolbar a:hover,
.toolbar .menu a:hover {
  color: #E31937 !important; /* Red только при hover */
}

/* ===== ПЕРЕКРЫТИЕ ELASTIC SKIN СТИЛЕЙ ===== */

/* Elastic skin добавляет специфичные стили к ссылкам */
.elastic .treelist li a,
.elastic nav a,
.elastic .folderlist li a {
  color: #323232 !important;
}

.elastic .treelist li.selected a,
.elastic nav li.selected a {
  color: #002366 !important;
}
/**
 * ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ - Максимальная специфичность
 * Использует точные селекторы из HTML структуры Roundcube
 */

/* ===== ССЫЛКИ В СПИСКАХ - С МАКСИМАЛЬНОЙ СПЕЦИФИЧНОСТЬЮ ===== */

/* Для directorylist (addressbook) */
#directorylist li a,
#directorylist.treelist.listing.iconized li a,
ul.treelist.listing.iconized li a {
  color: #323232 !important;
}

#directorylist li a:hover,
ul.treelist.listing.iconized li a:hover {
  color: #002366 !important;
}

#directorylist li.selected a,
ul.treelist.listing.iconized li.selected a {
  color: #002366 !important;
  font-weight: 600 !important;
}

/* Для mailboxlist (folders) */
#mailboxlist li a,
#mailboxlist.treelist.listing.iconized li a {
  color: #323232 !important;
}

#mailboxlist li a:hover {
  color: #002366 !important;
}

#mailboxlist li.selected a {
  color: #002366 !important;
  font-weight: 600 !important;
}

/* ===== ВСЕ ССЫЛКИ - ГЛОБАЛЬНОЕ ПЕРЕКРЫТИЕ ===== */

/* Супер-специфичный селектор для ВСЕХ ссылок */
ul.listing.iconized li a,
.listing.treelist.iconized li a,
.listing.iconized.treelist li a {
  color: #323232 !important;
}

ul.listing.iconized li a:hover,
.listing.treelist.iconized li a:hover {
  color: #002366 !important;
}

ul.listing.iconized li.selected a,
.listing.treelist.iconized li.selected a {
  color: #002366 !important;
  font-weight: 600 !important;
}

/* ===== ПЕРЕКРЫТИЕ ВСТРОЕННЫХ СТИЛЕЙ ELASTIC ===== */

/* Elastic skin использует эти селекторы */
.listing.iconized li a[href],
ul.listing.treelist li a[href],
#directorylist.listing li a[href],
#mailboxlist.listing li a[href] {
  color: #323232 !important;
}

.listing.iconized li a[href]:hover,
ul.listing.treelist li a[href]:hover {
  color: #002366 !important;
}

.listing.iconized li.selected a[href],
ul.listing.treelist li.selected a[href] {
  color: #002366 !important;
  font-weight: 600 !important;
}
/**
 * АБСОЛЮТНЫЙ ПРИОРИТЕТ - В САМЫЙ КОНЕЦ ФАЙЛА
 * Перекрывает ВСЕ предыдущие стили для ссылок
 */

/* ===== ГЛОБАЛЬНОЕ ПЕРЕКРЫТИЕ ВСЕХ ССЫЛОК ===== */

/* Убираем красный цвет со ВСЕХ ссылок */
body a,
body a:link,
body a:visited {
  color: #323232 !important; /* Темно-серый для всех ссылок */
}

/* Hover на ссылках - Navy или Red в зависимости от контекста */
body a:hover,
body a:focus {
  color: #002366 !important; /* Navy по умолчанию */
}

/* ===== СПЕЦИФИЧНЫЕ ПЕРЕКРЫТИЯ ДЛЯ ПАПОК ===== */

/* Дерево папок (#directorylist, #mailboxlist) */
body #directorylist li a,
body #directorylist.listing li a,
body #directorylist.treelist li a,
body #directorylist.listing.iconized li a,
body #mailboxlist li a,
body #mailboxlist.listing li a,
body #mailboxlist.treelist li a,
body #mailboxlist.listing.iconized li a {
  color: #323232 !important; /* Темно-серый */
}

body #directorylist li a:hover,
body #mailboxlist li a:hover {
  color: #002366 !important; /* Navy при hover */
}

body #directorylist li.selected a,
body #mailboxlist li.selected a {
  color: #002366 !important; /* Navy для выбранных */
  font-weight: 600 !important;
}

/* ===== СПИСКИ LISTING ===== */

/* Все listing ссылки */
body .listing li a,
body .listing tbody td a,
body ul.listing li a,
body .listing.iconized li a {
  color: #323232 !important;
}

body .listing li a:hover,
body .listing.iconized li a:hover {
  color: #002366 !important;
}

body .listing li.selected a,
body .listing.iconized li.selected a {
  color: #002366 !important;
  font-weight: 600 !important;
}

/* ===== МЕНЮ И ТУЛБАРЫ ===== */

/* Ссылки в меню тулбаров */
body .menu a,
body .toolbar .menu a,
body .listing-menu a {
  color: #323232 !important;
}

body .menu a:hover,
body .toolbar .menu a:hover {
  color: #E31937 !important; /* Red для action links */
}

/* ===== ИСКЛЮЧЕНИЯ: КРАСНЫЙ ТОЛЬКО ДЛЯ ДЕЙСТВИЙ ===== */

/* Ссылки в сообщениях (темы писем) - остаются Navy/Red */
body .messagelist td.subject a {
  color: #323232 !important;
}

body .messagelist td.subject a:hover {
  color: #E31937 !important;
}

/* Выбранное сообщение - Navy */
body .messagelist tr.selected td.subject a {
  color: #002366 !important;
}
/**
 * ИСПРАВЛЕНИЯ ДЛЯ МЕНЮ #layout-menu
 * Критические проблемы контрастности и фирменного стиля
 */

/* ===== КОНТЕЙНЕР МЕНЮ - Белый фон ===== */

#layout-menu {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E5E7EB !important;
}

/* Удаляем темный фон у special-buttons */
#taskmenu .special-buttons {
  background-color: transparent !important;
}

/* ===== КНОПКА "НАПИСАТЬ СООБЩЕНИЕ" - Красная CTA ===== */

#taskmenu a.compose,
#taskmenu .action-buttons a.compose {
  background-color: #E31937 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin: 4px !important;
  padding: 0.45rem !important;
}

#taskmenu a.compose:hover {
  background-color: #B31229 !important;
  color: #FFFFFF !important;
}

/* ===== ВЫБРАННЫЙ ПУНКТ - Navy + Red граница ===== */

#taskmenu a.selected {
  color: #002366 !important;
  background-color: rgba(0, 35, 102, 0.08) !important;
  border-left: 3px solid #E31937 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
}

#taskmenu a.selected:hover {
  background-color: rgba(0, 35, 102, 0.12) !important;
}

/* ===== ОБЫЧНЫЕ ПУНКТЫ - Темно-серый ===== */

#taskmenu a {
  color: #323232 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
  transition: all 0.2s ease !important;
}

#taskmenu a:hover {
  color: #002366 !important;
  background-color: #F5F7FA !important;
}

/* ===== КНОПКА "ВЫХОД" - Фирменный Red ===== */

#taskmenu a.logout {
  color: #E31937 !important;
}

#taskmenu a.logout:hover {
  color: #B31229 !important;
  background-color: rgba(227, 25, 55, 0.1) !important;
}

/* ===== ИСПРАВЛЕНИЕ ДЛЯ МОБИЛЬНЫХ ===== */

@media screen and (max-width: 480px) {
  #layout-menu {
    background-color: #FFFFFF !important;
  }
  
  #taskmenu a {
    color: #323232 !important;
  }
  
  #taskmenu a.selected {
    background-color: rgba(0, 35, 102, 0.08) !important;
    color: #002366 !important;
  }
}

/* ===== DESKTOP ВЕРСИЯ ===== */

@media screen and (min-width: 481px) {
  #layout-menu {
    background-color: #FFFFFF !important;
  }
  
  #taskmenu a {
    color: #323232 !important;
  }
  
  #taskmenu a.selected {
    color: #002366 !important;
    background-color: rgba(0, 35, 102, 0.08) !important;
  }
  
  #taskmenu a:hover {
    color: #002366 !important;
    background-color: #F5F7FA !important;
  }
}
/**
 * ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ МЕНЮ #layout-menu
 * Максимальный приоритет для перекрытия всех дефолтных стилей
 */

/* ===== #layout-menu КОНТЕЙНЕР - Белый фон ===== */

body #layout-menu,
#layout-menu,
div#layout-menu {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E5E7EB !important;
}

/* Special buttons - белый фон */
body #taskmenu .special-buttons,
#taskmenu .special-buttons {
  background-color: #FFFFFF !important;
}

/* ===== КНОПКА "НАПИСАТЬ СООБЩЕНИЕ" - Красная CTA ===== */

body #taskmenu a.compose,
body #taskmenu .action-buttons a.compose,
#taskmenu a.compose,
.action-buttons a.compose {
  background-color: #E31937 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin: 4px !important;
  padding: 0.45rem !important;
}

body #taskmenu a.compose:hover,
#taskmenu a.compose:hover {
  background-color: #B31229 !important;
  color: #FFFFFF !important;
}

/* ===== ВЫБРАННЫЙ ПУНКТ МЕНЮ - Navy + Red граница ===== */

body #taskmenu a.selected,
#taskmenu a.selected,
body #taskmenu a.mail.selected,
#taskmenu a.mail.selected {
  color: #002366 !important;
  background-color: rgba(0, 35, 102, 0.08) !important;
  border-left: 3px solid #E31937 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
}

body #taskmenu a.selected:hover,
#taskmenu a.selected:hover {
  background-color: rgba(0, 35, 102, 0.12) !important;
}

/* ===== ОБЫЧНЫЕ ПУНКТЫ - Темно-серый ===== */

body #taskmenu a,
#taskmenu a {
  color: #323232 !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
  transition: all 0.2s ease !important;
}

body #taskmenu a:hover,
#taskmenu a:hover {
  color: #002366 !important;
  background-color: #F5F7FA !important;
}

/* ===== КНОПКА "ВЫХОД" - Фирменный Red ===== */

body #taskmenu a.logout,
#taskmenu a.logout {
  color: #E31937 !important;
  background-color: transparent !important;
}

body #taskmenu a.logout:hover,
#taskmenu a.logout:hover {
  color: #B31229 !important;
  background-color: rgba(227, 25, 55, 0.1) !important;
}

/* ===== MOBILE & DESKTOP ВЕРСИИ ===== */

@media screen and (max-width: 480px) {
  body #layout-menu,
  #layout-menu {
    background-color: #FFFFFF !important;
  }
}

@media screen and (min-width: 481px) {
  body #layout-menu,
  #layout-menu {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E5E7EB !important;
  }
  
  body #taskmenu a,
  #taskmenu a {
    color: #323232 !important;
  }
  
  body #taskmenu a.selected,
  #taskmenu a.selected {
    color: #002366 !important;
    background-color: rgba(0, 35, 102, 0.08) !important;
  }
}