/**
 * custom.css — тема оформления «Веб-почта» (стилистика Mail.ru)
 * ---------------------------------------------------------------------------
 * Скин: elastic (Roundcube 1.6.9)
 * Файл НЕ является частью ядра скина: ядро (styles.less / styles.min.css /
 * *.less в widgets/) не изменяется. Все правила здесь только переопределяют
 * цвета, скругления, тени и шрифт поверх штатной темы.
 *
 * Подключение: skins/elastic/templates/includes/layout.html — строка
 *   <link rel="stylesheet" href="/styles/custom.css">
 * сразу ПОСЛЕ styles.min.css, поэтому правила ниже имеют приоритет.
 * Правило отката: удалить эту строку и этот файл.
 *
 * Тёмная тема (html.dark-mode) намеренно не затрагивается — все правила
 * ограничены селектором html:not(.dark-mode), чтобы не ломать штатный dark-mode.
 * Логотип и бренд Mail.ru не используются — только цветовая схема и компоновка.
 */

:root {
    /* Акцент и оттенки */
    --wp-blue:          #005FF9;
    --wp-blue-hover:    #0050D0;
    --wp-blue-active:   #0046B8;
    --wp-blue-soft:     #F0F5FF;
    --wp-blue-light:    #E4EEFE;
    --wp-blue-ring:     rgba(0, 95, 249, .16);

    /* Фон и поверхности */
    --wp-bg:            #F5F7FA;
    --wp-card:          #FFFFFF;
    --wp-hover:         #F5F7FA;

    /* Границы */
    --wp-border:        #E4E8EF;
    --wp-border-soft:   #EEF1F6;

    /* Текст */
    --wp-text:          #23272E;
    --wp-text-2:        #6B7683;
    --wp-text-3:        #98A2B0;

    /* Статусы */
    --wp-red:           #E8384F;
    --wp-green:         #12A54A;
    --wp-yellow:        #F5A623;

    /* Форма */
    --wp-radius:        10px;
    --wp-radius-sm:     8px;
    --wp-shadow-card:   0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
    --wp-shadow-popup:  0 8px 32px rgba(16, 24, 40, .16);
    --wp-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ===========================================================================
   1. База: фон, шрифт, ссылки
   =========================================================================== */

html:not(.dark-mode) body {
    background-color: var(--wp-bg);
    color: var(--wp-text);
}

html:not(.dark-mode) body,
html:not(.dark-mode) button,
html:not(.dark-mode) input,
html:not(.dark-mode) optgroup,
html:not(.dark-mode) select,
html:not(.dark-mode) textarea,
html:not(.dark-mode) .popover {
    font-family: var(--wp-font);
}

html:not(.dark-mode) a {
    color: var(--wp-blue);
}

html:not(.dark-mode) a:hover {
    color: var(--wp-blue-hover);
}

html:not(.dark-mode) ::selection {
    background: var(--wp-blue-light);
}

/* ===========================================================================
   2. Раскладка и панели (белые «карточки» на светлом фоне)
   =========================================================================== */

html:not(.dark-mode) #layout-sidebar {
    border-right: 1px solid var(--wp-border);
    background-color: var(--wp-card);
}

html:not(.dark-mode) #layout-list {
    border-right: 1px solid var(--wp-border);
    background-color: var(--wp-card);
}

html:not(.dark-mode) #layout-content {
    background-color: var(--wp-card);
}

html:not(.dark-mode) .column-resizer:hover {
    background-color: var(--wp-blue-light);
}

/* ===========================================================================
   3. Левое меню (иконки-разделы) — светлая панель, синий акцент
   =========================================================================== */

html:not(.dark-mode) #layout-menu {
    background-color: var(--wp-card) !important;
    border-right: 1px solid var(--wp-border);
    box-shadow: none;
}

/* «Шапка» меню с логотипом (в т.ч. поповер на узких экранах) */
html:not(.dark-mode) #layout-menu .popover-header {
    background-color: var(--wp-card) !important;
    border-bottom: 1px solid var(--wp-border-soft);
    border-radius: 0;
}

html:not(.dark-mode) #layout-menu .popover-header img {
    padding: .5rem;
}

/* Логотип: тонируем штатный SVG в акцентный синий (бренд Mail.ru не используется) */
html:not(.dark-mode) #layout-menu .popover-header #logo,
html:not(.dark-mode) #layout .popover-header #logo,
html:not(.dark-mode) body.task-login #logo {
    filter: brightness(0) saturate(100%) invert(24%) sepia(94%) saturate(3548%) hue-rotate(212deg) brightness(96%) contrast(101%);
}

html:not(.dark-mode) #taskmenu a {
    color: var(--wp-text-2);
    border-radius: var(--wp-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

html:not(.dark-mode) #taskmenu a:not(.disabled):hover,
html:not(.dark-mode) #taskmenu a:focus {
    color: var(--wp-blue) !important;
    background-color: var(--wp-blue-soft) !important;
}

html:not(.dark-mode) #taskmenu a.selected {
    color: var(--wp-blue) !important;
    background-color: var(--wp-blue-light) !important;
    box-shadow: inset 3px 0 0 0 var(--wp-blue);
}

/* Кнопка «Написать» (основное действие) */
html:not(.dark-mode) #taskmenu .action-buttons a {
    color: var(--wp-blue) !important;
    background-color: var(--wp-blue-light) !important;
}

html:not(.dark-mode) #taskmenu .action-buttons a:hover,
html:not(.dark-mode) #taskmenu .action-buttons a:focus {
    color: #fff !important;
    background-color: var(--wp-blue) !important;
}

html:not(.dark-mode) #taskmenu .special-buttons {
    background-color: var(--wp-card) !important;
}

html:not(.dark-mode) #taskmenu a.logout {
    color: var(--wp-red) !important;
}

html:not(.dark-mode) #taskmenu a.logout:hover {
    color: #fff !important;
    background-color: var(--wp-red) !important;
}

/* ===========================================================================
   4. Заголовки панелей, футеры, тулбары
   =========================================================================== */

html:not(.dark-mode) #layout > div > .header {
    background-color: var(--wp-card);
    border-bottom: 1px solid var(--wp-border);
    color: var(--wp-text);
    font-weight: 600;
}

html:not(.dark-mode) #layout > div > .footer {
    background-color: var(--wp-card);
    border-top: 1px solid var(--wp-border);
}

html:not(.dark-mode) #layout > div > .header > .header-title {
    color: var(--wp-text);
    font-weight: 600;
}

html:not(.dark-mode) .menu.toolbar a {
    color: var(--wp-text-2);
}

html:not(.dark-mode) .menu a:not(.disabled):hover,
html:not(.dark-mode) .menu a:not(.disabled):focus {
    background-color: var(--wp-blue-soft) !important;
    color: var(--wp-blue);
}

html:not(.dark-mode) .menu.toolbar a.selected {
    color: var(--wp-blue);
}

html:not(.dark-mode) .header a.button.icon {
    color: var(--wp-text-2);
    border-radius: var(--wp-radius-sm);
}

html:not(.dark-mode) .header a.button.icon:not(.disabled):hover,
html:not(.dark-mode) .header a.button.icon:not(.disabled):focus {
    background-color: var(--wp-blue-soft) !important;
    color: var(--wp-blue);
}

html:not(.dark-mode) .menu.pagenav.pagenav-list {
    background-color: var(--wp-bg);
    border-bottom: 1px solid var(--wp-border-soft);
}

html:not(.dark-mode) .menu.pagenav a {
    color: var(--wp-text-2);
}

html:not(.dark-mode) .menu.pagenav .pagenav-text {
    color: var(--wp-text-3);
}

html:not(.dark-mode) .menu.pagenav.pagenav-list + .navlist {
    background-color: var(--wp-bg);
}

/* ===========================================================================
   5. Кнопки
   =========================================================================== */

html:not(.dark-mode) .btn {
    border-radius: var(--wp-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) button.mainaction,
html:not(.dark-mode) .button.mainaction {
    color: #fff;
    background-color: var(--wp-blue);
    border-color: var(--wp-blue);
}

html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) button.mainaction:hover,
html:not(.dark-mode) .button.mainaction:hover {
    background-color: var(--wp-blue-hover);
    border-color: var(--wp-blue-hover);
}

html:not(.dark-mode) .btn-primary:active,
html:not(.dark-mode) .btn-primary.active,
html:not(.dark-mode) button.mainaction:active {
    background-color: var(--wp-blue-active);
    border-color: var(--wp-blue-active);
}

html:not(.dark-mode) .btn-primary:focus,
html:not(.dark-mode) .btn-primary.focus,
html:not(.dark-mode) button.mainaction:focus {
    box-shadow: 0 0 0 .2rem var(--wp-blue-ring);
}

html:not(.dark-mode) .btn-secondary {
    color: var(--wp-text);
    background-color: #EFF2F7;
    border-color: #EFF2F7;
}

html:not(.dark-mode) .btn-secondary:hover,
html:not(.dark-mode) .btn-secondary:focus {
    color: var(--wp-text);
    background-color: #E4E9F2;
    border-color: #E4E9F2;
}

html:not(.dark-mode) .btn-danger {
    background-color: var(--wp-red);
    border-color: var(--wp-red);
}

html:not(.dark-mode) .btn-link,
html:not(.dark-mode) .btn-link:hover {
    color: var(--wp-blue);
}

html:not(.dark-mode) .floating-action-buttons a.button {
    background: var(--wp-blue);
    box-shadow: 0 6px 18px rgba(0, 95, 249, .35);
}

/* ===========================================================================
   6. Поля ввода и формы
   =========================================================================== */

html:not(.dark-mode) .form-control {
    color: var(--wp-text);
    background-color: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-sm);
}

html:not(.dark-mode) .form-control:focus {
    color: var(--wp-text);
    border-color: var(--wp-blue);
    box-shadow: 0 0 0 .2rem var(--wp-blue-ring);
}

html:not(.dark-mode) .form-control::placeholder {
    color: var(--wp-text-3);
}

html:not(.dark-mode) .input-group-text {
    color: var(--wp-text-2);
    background-color: var(--wp-bg);
    border-color: var(--wp-border);
}

html:not(.dark-mode) .formcontent .hint,
html:not(.dark-mode) .form-text {
    color: var(--wp-text-3);
}

html:not(.dark-mode) .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--wp-blue);
    background-color: var(--wp-blue);
}

html:not(.dark-mode) .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem var(--wp-blue-ring);
}

html:not(.dark-mode) .nav-tabs .nav-link {
    color: var(--wp-text-2);
}

html:not(.dark-mode) .nav-tabs .nav-link.active {
    color: var(--wp-blue);
    border-bottom-color: var(--wp-blue);
}

html:not(.dark-mode) .table-widget,
html:not(.dark-mode) .file-upload,
html:not(.dark-mode) fieldset,
html:not(.dark-mode) .multi-input > .content {
    border-color: var(--wp-border);
}

html:not(.dark-mode) .file-upload {
    border-radius: var(--wp-radius);
    background-color: var(--wp-bg);
}

/* ===========================================================================
   7. Строка поиска — «пилюля» как в Mail.ru
   =========================================================================== */

html:not(.dark-mode) .searchbar {
    background-color: var(--wp-bg);
    border-bottom: 1px solid var(--wp-border);
    padding: 0 .5rem;
}

html:not(.dark-mode) .searchbar form {
    height: 2.1rem;
    min-height: 2.1rem;
    background-color: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html:not(.dark-mode) .searchbar form:focus-within {
    border-color: var(--wp-blue);
    box-shadow: 0 0 0 .2rem var(--wp-blue-ring);
}

html:not(.dark-mode) .searchbar form:before {
    height: 2.1rem;
    line-height: 2.1rem;
    margin: 0 .25rem 0 .6rem;
    color: var(--wp-text-3);
}

html:not(.dark-mode) .searchbar input {
    padding: 0 .25rem;
    line-height: 2.1rem;
    height: 2.1rem;
}

html:not(.dark-mode) .searchbar a {
    color: var(--wp-text-2);
}

html:not(.dark-mode) .searchbar a:before {
    height: 2.1rem;
    line-height: 2.1rem;
}

html:not(.dark-mode) .searchbar a.selected {
    color: var(--wp-blue);
}

/* ===========================================================================
   8. Списки: папки и список писем
   =========================================================================== */

html:not(.dark-mode) .listing tbody td,
html:not(.dark-mode) .listing li {
    border-bottom-color: var(--wp-border-soft);
}

html:not(.dark-mode) .listing tbody td,
html:not(.dark-mode) .listing tbody td a,
html:not(.dark-mode) .listing li a {
    color: var(--wp-text);
}

html:not(.dark-mode) .listing span.secondary,
html:not(.dark-mode) .messagelist td.subject span.fromto,
html:not(.dark-mode) .messagelist td.subject span.date,
html:not(.dark-mode) .messagelist td.subject span.size {
    color: var(--wp-text-2);
}

/* Наведение на строку списка */
html:not(.dark-mode) .listing tbody tr:not(.selected):hover td,
html:not(.dark-mode) .listing ul li:not(.selected):hover {
    background-color: var(--wp-hover);
}

/* Выделенная строка/папка */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
    color: var(--wp-text);
    background-color: var(--wp-blue-light);
}

html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing tr.selected td a {
    color: var(--wp-blue);
}

html:not(.dark-mode) .folderlist li.mailbox.selected > a {
    box-shadow: inset 3px 0 0 0 var(--wp-blue);
    font-weight: 600;
}

/* Папка со непрочитанными — синий «бейдж» */
html:not(.dark-mode) .folderlist li.mailbox .unreadcount,
html:not(.dark-mode) .folderlist li.mailbox.recent > a > .unreadcount {
    background: var(--wp-blue);
    color: #fff;
    border-radius: 9px;
    font-weight: 600;
}

html:not(.dark-mode) .folderlist li.mailbox.recent > a {
    color: var(--wp-text);
}

/* Список писем: непрочитанные, флажки, метки */
html:not(.dark-mode) .messagelist tr.unread td.subject span.subject {
    font-weight: 700;
    color: var(--wp-text);
}

html:not(.dark-mode) .messagelist tr.unread td.subject span.fromto {
    color: var(--wp-text);
    font-weight: 600;
}

html:not(.dark-mode) .messagelist td.subject span.msgicon.status.unread:before {
    color: var(--wp-blue);
}

html:not(.dark-mode) .messagelist tr.flagged td,
html:not(.dark-mode) .messagelist tr.flagged td.subject span.subject a,
html:not(.dark-mode) .messagelist tr.flagged td.subject span.date,
html:not(.dark-mode) .messagelist tr.flagged td.subject span.fromto {
    color: var(--wp-red);
}

html:not(.dark-mode) .messagelist tr.unroot td.subject a {
    color: var(--wp-blue);
}

html:not(.dark-mode) .listing .threads div:before {
    color: var(--wp-text-3);
}

/* Индикатор фокуса строки */
html:not(.dark-mode) .listing li > a:focus,
html:not(.dark-mode) .listing.focus tbody tr.focused > td:first-child {
    border-left-color: var(--wp-blue);
}

/* ===========================================================================
   9. Всплывающие меню, поповеры, диалоги
   =========================================================================== */

html:not(.dark-mode) .popover {
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-popup);
}

html:not(.dark-mode) .popover-header,
html:not(.dark-mode) .popover-body {
    background-color: var(--wp-card);
}

html:not(.dark-mode) .popover .menu li a:not(.disabled):hover,
html:not(.dark-mode) .popupmenu li a:not(.disabled):hover,
html:not(.dark-mode) .menu .popover li a:not(.disabled):hover {
    color: var(--wp-blue);
    background-color: var(--wp-blue-soft);
}

html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .ui-menu {
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-popup);
}

html:not(.dark-mode) .ui-dialog {
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-popup);
}

html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar {
    background-color: var(--wp-card);
    color: var(--wp-text);
    border-bottom: 1px solid var(--wp-border);
    border-radius: var(--wp-radius) var(--wp-radius) 0 0;
    font-weight: 600;
}

html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane {
    background-color: var(--wp-card);
    border-top: 1px solid var(--wp-border);
}

html:not(.dark-mode) .ui-widget-content a {
    color: var(--wp-blue);
}

html:not(.dark-mode) .formcontainer .formbuttons {
    background-color: var(--wp-bg);
    border-top: 1px solid var(--wp-border);
}

html:not(.dark-mode) .ui-datepicker .ui-datepicker-header,
html:not(.dark-mode) .ui-datepicker th {
    background-color: var(--wp-bg);
    color: var(--wp-text-2);
    border-color: var(--wp-border);
}

html:not(.dark-mode) .ui-datepicker td a.ui-state-active,
html:not(.dark-mode) .ui-datepicker td .ui-state-highlight {
    background-color: var(--wp-blue);
    border-color: var(--wp-blue);
    color: #fff;
}

html:not(.dark-mode) .ui-slider .ui-slider-range,
html:not(.dark-mode) .ui-slider .ui-slider-handle {
    background-color: var(--wp-blue);
    border-color: var(--wp-blue);
}

html:not(.dark-mode) .ui-progressbar-value,
html:not(.dark-mode) .upload-progress progress,
html:not(.dark-mode) progress {
    background-color: var(--wp-blue);
}

html:not(.dark-mode) .quota-widget .value {
    background-color: var(--wp-blue);
}

html:not(.dark-mode) .quota-widget .bar {
    border-color: var(--wp-border);
}

html:not(.dark-mode) #rcmdraglayer {
    background-color: var(--wp-blue);
    color: #fff;
    border-radius: var(--wp-radius-sm);
}

/* ===========================================================================
   10. Уведомления (сообщения об операциях)
   =========================================================================== */

html:not(.dark-mode) .ui.alert.boxinformation {
    color: var(--wp-text);
    border: 1px solid var(--wp-border);
    border-left: 3px solid var(--wp-blue);
    border-radius: var(--wp-radius-sm);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}

html:not(.dark-mode) .ui.alert.boxerror {
    border-left-color: var(--wp-red);
}

html:not(.dark-mode) .ui.alert.boxwarning {
    border-left-color: var(--wp-yellow);
}

html:not(.dark-mode) .ui.alert.boxconfirmation {
    border-left-color: var(--wp-green);
}

html:not(.dark-mode) .invalid-feedback {
    color: var(--wp-red);
}

html:not(.dark-mode) .p.image-attachment,
html:not(.dark-mode) .attachmentslist li {
    border-color: var(--wp-border);
    border-radius: var(--wp-radius-sm);
}

/* ===========================================================================
   11. Экран входа — белая карточка на светлом фоне
   =========================================================================== */

html:not(.dark-mode) body.task-login {
    background-color: var(--wp-bg);
    background-image: linear-gradient(180deg, #EAF1FF 0%, #F5F7FA 42%);
    background-repeat: no-repeat;
}

html:not(.dark-mode) body.task-login #logo {
    max-height: 88px;
}

html:not(.dark-mode) #login-form {
    top: 17vh;
    max-width: 380px;
    padding: 1.5rem 1.5rem 1.25rem;
    background-color: var(--wp-card);
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    box-shadow: var(--wp-shadow-card);
    text-align: left;
}

html:not(.dark-mode) #login-form table {
    width: 100%;
}

html:not(.dark-mode) #login-form td.title {
    width: 38%;
    padding-right: .75rem;
    color: var(--wp-text-2);
    font-size: .9rem;
    font-weight: 500;
    vertical-align: middle;
}

html:not(.dark-mode) #login-form td.input {
    width: 62%;
}

html:not(.dark-mode) #login-form .form-control {
    height: 2.75rem;
    border-radius: var(--wp-radius);
    background-color: var(--wp-card);
}

html:not(.dark-mode) #login-form .formbuttons {
    margin: 1.25rem 0 0;
}

html:not(.dark-mode) #rcmloginsubmit {
    width: 100%;
    height: 2.75rem;
    border: 0;
    border-radius: var(--wp-radius);
    color: #fff;
    background-color: var(--wp-blue);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

html:not(.dark-mode) #rcmloginsubmit:hover {
    background-color: var(--wp-blue-hover);
}

html:not(.dark-mode) #rcmloginsubmit:active {
    background-color: var(--wp-blue-active);
}

html:not(.dark-mode) #login-footer {
    color: var(--wp-text-3);
    text-align: center;
}

html:not(.dark-mode) #login-footer > div {
    margin-top: 1.25rem;
    padding: .6rem;
    background: var(--wp-blue-soft);
    border-radius: var(--wp-radius-sm);
    color: var(--wp-text-2);
}

/* ===========================================================================
   12. Скроллбары, печать
   =========================================================================== */

html:not(.dark-mode) {
    scrollbar-color: #C9D2DE transparent;
}

html:not(.dark-mode) .webkit-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(35, 39, 46, .22);
    border: 2px solid var(--wp-card);
    border-radius: .25rem;
}

html:not(.dark-mode) .webkit-scroller::-webkit-scrollbar-thumb:hover {
    background-color: rgba(35, 39, 46, .35);
}

@media print {
    html:not(.dark-mode) #layout-menu {
        background: #fff !important;
    }
}