/*
 * Скин "Yandex Mail Style" для Roundcube 1.7 (наследует elastic, см. meta.json)
 *
 * 1) Первый @import подключает базовые стили Elastic: наш styles.css
 *    ЗАМЕНЯЕТ родительский файл, без импорта интерфейс останется «голым».
 * 2) Селекторы сверены с реальной разметкой Elastic 1.7.4.
 * 3) Структура сайдбара/тулбара изменена нашими шаблонами
 *    (templates/mail.html), поведение — ui-extra.js.
 */

@import url("/static.php/skins/elastic/styles/styles.min.css");

:root {
    --ya-red: #fc3f1d;
    --ya-red-dark: #e63315;
    --ya-red-soft: #fff3f1;
    --ya-yellow: #ffdb4d;
    --ya-yellow-dark: #ffd32a;
    --ya-bg: #ffffff;
    --ya-bg-2: #f5f6f8;
    --ya-bg-3: #eceef1;
    --ya-border: #e5e9ef;
    --ya-text: #21201f;
    --ya-text-2: #6d7379;
    --ya-radius: 12px;
}

/* ============================================================
   1. Левый рейл задач (#layout-menu)
   ============================================================ */
#layout-menu {
    background-color: var(--ya-bg);
    border-right: 1px solid var(--ya-border);
    width: 78px;
}

#taskmenu {
    padding-top: 8px;
}

/* Круглые кнопки-иконки без подписей (как в Яндекс Почте).
   ВАЖНО: !important + высокая специфичность нужны, чтобы перебить
   правила Elastic вида "#taskmenu a{width:78px}" и
   "html.dark-mode #taskmenu a{width:77px}" — без этого в тёмной
   теме кнопки растягиваются в овал. */
#layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    margin: 5px auto !important;
    box-sizing: border-box !important;
    color: var(--ya-text-2);
    border-radius: 50% !important;
}

/* Иконка по центру круга, без float и отступов Elastic */
#layout-menu #taskmenu a:before {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 17px;
    line-height: 1;
}

#layout-menu #taskmenu a > .inner {
    display: none !important;
}

#layout-menu #taskmenu a:hover,
html.dark-mode #layout-menu #taskmenu a:hover {
    background-color: var(--ya-bg-2) !important;
    color: var(--ya-text) !important;
}

#layout-menu #taskmenu a.mail.selected,
#layout-menu #taskmenu a.contacts.selected,
#layout-menu #taskmenu a.settings.selected,
html.dark-mode #layout-menu #taskmenu a.selected {
    background-color: var(--ya-red) !important;
    color: #fff !important;
}

/* Тёмная полоса под нижними кнопками из Elastic — убираем,
   кнопки и так круглые с hover-подсветкой */
#layout-menu #taskmenu .special-buttons {
    background-color: transparent !important;
}

/* Зона логотипа в левом верхнем углу рейла */
#layout-menu .popover-header {
    background-color: var(--ya-bg) !important;
    border-bottom: 1px solid var(--ya-border);
    height: 58px;
}

#layout-menu .popover-header img#logo {
    max-height: 42px;
    max-width: 64px;
    object-fit: contain;
    padding: 0;
}

/* В тёмной теме тёмно-синий/чёрный логотип теряется — подкладываем
   белый круг под круглый логотип (выглядит как фирменный значок) */
html.dark-mode #layout-menu .popover-header img#logo {
    background-color: #fff;
    border-radius: 50%;
    padding: 3px;
}

/* Кнопка «Написать» в рейле не нужна — она переехала в сайдбар */
@media (min-width: 1001px) {
    #taskmenu .action-buttons {
        display: none;
    }
}

/* ============================================================
   2. Сайдбар папок (#layout-sidebar)
   ============================================================ */
#layout-sidebar {
    background-color: var(--ya-bg);
    border-right: 1px solid var(--ya-border);
    flex: 0 0 290px;
    max-width: 290px;
    min-width: 290px;
}

#layout-sidebar > .header {
    background-color: var(--ya-bg);
    border-bottom: 0;
    min-height: 52px;
}

#layout-sidebar > .header .header-title.username {
    font-size: 20px;
    font-weight: 700;
    color: var(--ya-text);
}

/* Ряд «Написать» + «Обновить» */
.ya-compose-row {
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
}

#layout-sidebar a.ya-compose {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ya-yellow);
    color: var(--ya-text);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--ya-radius);
}

#layout-sidebar a.ya-compose:hover {
    background-color: var(--ya-yellow-dark);
}

#layout-sidebar a.ya-refresh {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ya-bg-2);
    border-radius: 50%;
    color: var(--ya-text-2);
}

#layout-sidebar a.ya-refresh:hover {
    background-color: var(--ya-bg-3);
    color: var(--ya-text);
}

#layout-sidebar a.ya-refresh > .inner {
    display: none;
}

/* Список папок */
#folderlist-content {
    padding: 0 8px;
}

#mailboxlist li a {
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--ya-text);
}

#mailboxlist li a:hover {
    background-color: var(--ya-bg-2);
}

#mailboxlist li.selected > a {
    background-color: var(--ya-bg-3) !important;
    font-weight: 600;
    color: var(--ya-text);
}

#mailboxlist li.mailbox.unread > a {
    font-weight: 600;
}

#mailboxlist li.mailbox .unreadcount {
    background-color: transparent !important;
    color: var(--ya-red) !important;
    font-weight: 600;
}

/* Чипы-фильтры и метки */
.ya-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 4px;
}

.ya-chip,
.ya-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background-color: var(--ya-bg-2);
    color: var(--ya-text);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.ya-chip:hover,
.ya-label-chip:hover {
    background-color: var(--ya-bg-3);
}

.ya-chip.active {
    background-color: var(--ya-red-soft);
    color: var(--ya-red);
    font-weight: 600;
}

.ya-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ya-yellow-dark);
}

.ya-chip-count {
    font-weight: 600;
}

.ya-filters-title {
    padding: 14px 16px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ya-text-2);
}

.ya-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 12px;
}

.ya-label-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--c, #7ecff5);
}

/* ============================================================
   3. Колонка списка (#layout-list) и шапка со списком действий
   ============================================================ */
#layout-list {
    background-color: var(--ya-bg);
    border-right: 1px solid var(--ya-border);
    flex: 4;
    max-width: none;
}

#messagelist-header {
    position: relative;
    background-color: var(--ya-bg);
    border-bottom: 1px solid var(--ya-border);
    min-height: 56px;
    flex-wrap: wrap;
    padding: 6px 10px;
}

/* Тулбар действий (Ответить/Переслать/Удалить/...) — в шапке карточки письма
   (режим чтения), см. templates/includes/reader-menu.html */

/* Дубли из Elastic в шапке списка (Выбрать/Обсуждения/Параметры) — скрываем,
   всё нужное есть в чипах и в тулбаре карточки письма */
#messagelist-header .toolbar.menu {
    display: none !important;
}

#layout-content > .header #mailtoolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: auto;
}

#layout-content > .header #mailtoolbar > a {
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--ya-text-2);
    font-size: 12px;
}

#layout-content > .header #mailtoolbar > a:before {
    font-size: 14px;
}

#layout-content > .header #mailtoolbar > a > .inner {
    font-size: 12px;
    color: inherit;
}

#layout-content > .header #mailtoolbar > a:not(.disabled):hover {
    background-color: var(--ya-bg-2);
    color: var(--ya-text);
}

#layout-content > .header #mailtoolbar > a.disabled {
    opacity: .45;
}

#layout-content > .header #mailtoolbar .dropbutton {
    display: inline-flex;
}

#layout-content > .header #mailtoolbar .spacer {
    flex: 0 0 6px;
    width: 6px;
}

/* Поиск — пилюля справа в шапке */
#messagelist-header .searchbar {
    margin-left: auto;
    padding: 0;
    background: none;
}

/* Кнопка-лупа рядом с пилюлей поиска дублирует сам поиск — скрываем
   на широких экранах (на узких Elastic показывает только её) */
@media (min-width: 1201px) {
    #messagelist-header .searchbar a.search {
        display: none !important;
    }
}

#mailsearchform {
    background-color: var(--ya-bg-2);
    border: none;
    border-radius: 999px;
    height: 40px;
    min-width: 220px;
    padding: 0 16px;
}

#mailsearchform:focus {
    box-shadow: 0 0 0 3px rgba(252, 63, 29, .14);
}

/* Выпадашка параметров поиска */
#searchmenu {
    position: absolute;
    top: 100%;
    right: 10px;
    z-index: 60;
    min-width: 320px;
    background-color: var(--ya-bg);
    border: 1px solid var(--ya-border);
    border-radius: var(--ya-radius);
    box-shadow: 0 10px 36px rgba(33, 32, 31, .16);
    padding: 12px;
}

/* ============================================================
   4. Список писем
   ============================================================ */
.messagelist thead,
.messagelist tr > th {
    display: none;
}

.messagelist tr {
    border-bottom: 1px solid var(--ya-bg-3);
}

.messagelist tr td {
    border: 0;
    padding: 10px 8px;
}

.messagelist tr:hover td {
    background-color: var(--ya-bg-2);
}

.messagelist tr.selected td,
.messagelist tr.focused td {
    background-color: var(--ya-bg-3) !important;
}

/* Непрочитанные: лёгкий тёплый фон + жирная тема */
.messagelist tr.unread td {
    background-color: rgba(255, 219, 77, .07);
}

.messagelist tr.unread.selected td,
.messagelist tr.unread.focused td {
    background-color: rgba(255, 219, 77, .16) !important;
}

.messagelist tr.unread td.subject span.subject {
    font-weight: 700;
}

/* Жёлтая точка вместо иконки непрочитанного */
.messagelist td.subject span.msgicon.status.unread:before,
.messagelist td.subject span.msgicon.status.unreadchildren:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ya-yellow-dark);
    vertical-align: middle;
}

/* Аватар (добавляет ui-extra.js) */
.ya-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Строка письма: [точка] [аватар] отправитель | тема
   (widescreen-режим: fromto и subject лежат в одной ячейке) */
.messagelist td.subject {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
}

.messagelist td.subject > span.msgicon.status {
    order: 0;
    flex: 0 0 auto;
    margin: 0;
    width: auto;
}

.messagelist td.subject > .ya-avatar {
    order: 1;
}

.messagelist td.subject > span.fromto {
    order: 2;
    flex: 0 1 240px;
    min-width: 120px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ya-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messagelist tr.unread td.subject > span.fromto {
    font-weight: 700;
}

.messagelist td.subject > span.subject {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ya-text-2);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messagelist td.subject > span.subject a {
    color: inherit;
}

/* Дата справа — серая */
.messagelist td.date {
    color: var(--ya-text-2);
    font-size: 13px;
    white-space: nowrap;
}

/* Флажок — красный */
.messagelist span.flagged:before {
    color: var(--ya-red);
}

/* Пагинация */
.pagenav.footer {
    border-top: 1px solid var(--ya-border);
    background-color: var(--ya-bg);
}

/* ============================================================
   5. Превью письма
   ============================================================ */
#layout-content {
    background-color: var(--ya-bg);
}

#layout-content > .header {
    background-color: var(--ya-bg);
    border-bottom: 1px solid var(--ya-border);
    min-height: 44px;
    flex: 0 0 auto;
}

#layout-content > .header .header-title {
    font-weight: 600;
}

/* ============================================================
   5а. Режим чтения: письмо открывается ВМЕСТО списка писем,
   как в Яндекс Почте. Рейл и сайдбар с папками остаются слева,
   на месте списка раскрывается письмо. Класс ya-reading ставит
   ui-extra.js, «Назад»/Esc возвращают список.
   ============================================================ */
#layout.ya-reading {
    position: relative;
}

/* Список писем занимает всю ширину: правая колонка предпросмотра
   отключена, письмо ВСЕГДА открывается вместо списка.
   ВАЖНО: жёстко ограничено страницей почты (body.task-mail). На
   настройках (body.task-settings) и контактах (body.task-addressbook)
   это правило НЕ должно применяться НИКОГДА — иначе их правая колонка
   (#layout-content) исчезнет и «ничего нельзя будет сделать». Двойная
   защита: и по классу ya-listview (ставит JS только на почте), и по
   body.task-mail (на случай устаревшего кеша JS в браузере). */
body.task-mail #layout.ya-listview:not(.ya-reading) #layout-content {
    display: none !important;
}

/* В режиме чтения прячем список и отдаём всю ширину письму */
#layout.ya-reading #layout-list {
    display: none !important;
}

#layout.ya-reading #layout-content {
    flex: 1 1 auto !important;
    max-width: none !important;
    /* ВАЖНО: Elastic держит #layout-content как flex-колонку —
       .iframe-wrapper растягивается через flex:1. display:block здесь
       схлопывает iframe по высоте (виден только верх письма). */
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--ya-bg);
    border-left: 1px solid var(--ya-border);
}

/* Кнопка «Назад к списку» видна только в режиме чтения */
#layout-content > .header a.back-list-button {
    display: none;
}

#layout.ya-reading #layout-content > .header a.back-list-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--ya-text-2);
}

#layout.ya-reading #layout-content > .header a.back-list-button:hover {
    background-color: var(--ya-bg-2);
    color: var(--ya-text);
}

#layout.ya-reading #layout-content > .header a.back-list-button > .inner {
    display: none;
}

/* Плавное появление карточки письма (как в демо-макете) */
@keyframes ya-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#layout.ya-reading #layout-content {
    animation: ya-card-in .18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    #layout.ya-reading #layout-content {
        animation: none;
    }
}

/* ============================================================
   6. Формы, кнопки, меню
   ============================================================ */
.btn-primary {
    background-color: var(--ya-red) !important;
    border-color: var(--ya-red) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ya-red-dark) !important;
    border-color: var(--ya-red-dark) !important;
}

.form-control,
.custom-select,
.input-group-text {
    border-radius: 10px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--ya-red);
    box-shadow: 0 0 0 3px rgba(252, 63, 29, .12);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ya-red);
}

.popover,
.ui-dialog,
.ui-menu {
    border-radius: 14px;
}

.ui-dialog,
.popover {
    box-shadow: 0 10px 36px rgba(33, 32, 31, .16);
}

.ui-dialog .ui-dialog-titlebar {
    border-bottom: 1px solid var(--ya-border);
}

/* ============================================================
   7. Страница входа
   ============================================================ */
#login-form {
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .18);
}

img#logo {
    content: url("/static.php/skins/yandex-mail-style/images/logo.svg");
}

/* ============================================================
   8. Скроллбары
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #d5d9e0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c0c5cd;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   9. Тёмная тема (html.dark-mode)
   ============================================================ */
html.dark-mode {
    --ya-bg: #1b1d21;
    --ya-bg-2: #24262b;
    --ya-bg-3: #2c2e33;
    --ya-border: #2c2e33;
    --ya-text: #eceef1;
    --ya-text-2: #9aa0a6;
    --ya-red-soft: rgba(252, 63, 29, .14);
}

html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #messagelist-header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-content > .header,
html.dark-mode .pagenav.footer {
    background-color: var(--ya-bg) !important;
    border-color: var(--ya-border) !important;
}

html.dark-mode #taskmenu a {
    color: var(--ya-text-2);
}

html.dark-mode #taskmenu a:hover {
    background-color: var(--ya-bg-2);
    color: var(--ya-text);
}

/* Elastic даёт нижним иконкам постоянный тёмный фон — убираем,
   фон должен появляться только при наведении */
html.dark-mode #layout-menu #taskmenu .special-buttons a {
    background-color: transparent !important;
}

html.dark-mode #layout-menu .popover-header {
    background-color: var(--ya-bg) !important;
    border-bottom-color: var(--ya-border);
}

html.dark-mode #layout-sidebar a.ya-compose {
    color: #21201f;
}

html.dark-mode #searchmenu {
    background-color: var(--ya-bg-2);
    border-color: var(--ya-border);
}

html.dark-mode .messagelist tr.unread td {
    background-color: rgba(255, 219, 77, .05);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #3a3d42;
}