/**
 * Bima Mail — переопределения стилей поверх Roundcube Elastic (1.6.x)
 * Версия 2: точное соответствие макету Figma «Бима Почта».
 *
 * Файл подключается ПОСЛЕ styles/styles.css скина bima,
 * поэтому достаточно обычной специфичности селекторов.
 *
 * Все дизайн-токены собраны в :root — чтобы подогнать тему,
 * правьте только этот блок.
 */

:root {
    /* Тема Бима — только светлая, как в макете Figma.
       Запрещаем браузеру принудительно инвертировать цвета
       (Chrome/Яндекс «тёмная тема для сайтов»). */
    color-scheme: light;

    /* === Бренд (снято с макета Figma) === */
    --bima-accent:            #fbbe07;  /* фирменный жёлтый Бима */
    --bima-accent-dark:       #e5ab06;  /* hover для жёлтого */
    --bima-accent-soft:       #fff2cd;  /* светло-жёлтая плашка (активный пункт меню) */
    --bima-on-accent:         #ffffff;  /* текст на жёлтом */

    /* === Светлая тема === */
    --bima-ink:               #111827;  /* заголовки, основной текст */
    --bima-body:              #374151;  /* текст писем */
    --bima-muted:             #6b7280;  /* вторичный текст, тулбар */
    --bima-faint:             #9ca3af;  /* даты, подсказки */
    --bima-bg:                #ffffff;  /* общий фон */
    --bima-panel:             #f5f6f8;  /* колонка списка писем */
    --bima-surface:           #ffffff;  /* карточки */
    --bima-border:            #e5e8ef;  /* разделители, рамки полей */
    --bima-search-bg:         #e5e8ef;  /* серая «пилюля» поиска */
    --bima-icon-gray:         #c9ccd3;  /* иконки на белой рейке */
    --bima-row-hover:         #fafbfc;
    --bima-link:              #8a6800;  /* ссылки (контраст на белом) */

    /* === Статусы === */
    --bima-danger:            #e5484d;
    --bima-success:           #2e9e4f;

    /* === Геометрия (крупные радиусы макета) === */
    --bima-radius-sm:         8px;
    --bima-radius:            12px;   /* кнопки, поля */
    --bima-radius-lg:         16px;   /* карточки списка */
    --bima-radius-xl:         24px;   /* попапы, карточка чтения */

    /* === Тени === */
    --bima-shadow-card:       0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --bima-shadow-pop:        0 12px 32px rgba(16, 24, 40, .16);
}

/* ============================================================
   БАЗА
   ============================================================ */

body {
    color: var(--bima-ink);
    background-color: var(--bima-bg);
}

a {
    color: var(--bima-link);
}

::selection {
    background: var(--bima-accent-soft);
}

/* Тонкие скроллбары в духе макета */
.scrollable::-webkit-scrollbar,
.listing::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scrollable::-webkit-scrollbar-thumb,
.listing::-webkit-scrollbar-thumb {
    background: #d6d9e0;
    border-radius: 8px;
}

/* ============================================================
   КАРКАС: рейка задач / колонка папок / список / контент
   ============================================================ */

#layout {
    background: var(--bima-bg);
}

/* --- Левая узкая рейка задач: белая, иконки серые --- */
#layout-menu {
    background: var(--bima-surface) !important;
    border-right: 1px solid #f0f1f4 !important;
}

/* Настоящий логотип Бима вверху рейки (как в макете Figma) */
@media screen and (min-width: 481px) {
    #layout-menu::before {
        content: "";
        display: block;
        height: 56px;
        margin: 14px 10px 8px;
        background: url("../images/bima-logo.png") center / contain no-repeat;
    }
}

#taskmenu a,
#taskmenu .special-buttons a,
#taskmenu a.logout {
    color: var(--bima-icon-gray) !important;
    background: transparent !important;
}

/* У elastic контейнер кнопки выхода с тёмной заливкой — убираем */
#taskmenu .special-buttons {
    background: transparent !important;
}

#taskmenu a:hover {
    color: var(--bima-muted) !important;
}

/* Активный раздел: жёлтая иконка на светло-жёлтой плашке */
#taskmenu a.selected {
    color: var(--bima-accent) !important;
    background: var(--bima-accent-soft) !important;
    border-radius: var(--bima-radius) !important;
}

@media screen and (min-width: 481px) {
    #taskmenu a {
        border-radius: var(--bima-radius);
    }
    /* В макете рейка только с иконками, без подписей */
    #taskmenu a .inner,
    #taskmenu .special-buttons a .inner {
        display: none !important;
    }
}

/* --- Колонка папок (sidebar): белая --- */
#layout-sidebar {
    background: var(--bima-surface);
    border-right: 1px solid #f0f1f4;
}

#layout-sidebar > .header,
#layout-sidebar .header {
    background: var(--bima-surface);
    border-bottom: 1px solid var(--bima-border);
}

#layout-sidebar .header a.button,
#layout-sidebar .header .header-title {
    color: var(--bima-ink);
    font-weight: 700;
}

/* Шапка «Почта» + жёлтая кнопка «+ Написать» (шаблон templates/mail.html, по макету) */
#layout-sidebar .header.bima-mail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: .5rem;
    height: auto !important;      /* у elastic .header фиксированной высоты */
    min-height: 0 !important;
    overflow: visible !important;
    padding: 1.2rem 1.1rem 1rem;
    border-bottom: none;
}

#layout-sidebar .bima-mail-title {
    flex: none !important;
    margin: 0 !important;            /* у elastic .header-title имеет margin:0 -20rem */
    text-align: left !important;
    overflow: visible !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bima-ink);
}

#layout-sidebar a.bima-compose,
#layout-sidebar a.bima-compose .inner {
    color: var(--bima-on-accent) !important;
}

#layout-sidebar a.bima-compose {
    display: block;
    width: 100%;
    order: 3;
    margin-top: .4rem;
    background: var(--bima-accent);
    border-radius: var(--bima-radius);
    padding: .55rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(251, 190, 7, .35);
}

#layout-sidebar a.bima-compose:hover {
    background: var(--bima-accent-dark);
}

/* Убираем иконку elastic у кнопки, подпись показываем всегда */
#layout-sidebar a.bima-compose:before {
    content: none !important;
}

#layout-sidebar a.bima-compose .inner {
    display: inline !important;
}

/* «+» перед подписью, как в макете */
#layout-sidebar a.bima-compose .inner:before {
    content: "+ ";
    font-weight: 700;
}

/* --- Колонка списка писем: светло-серая --- */
#layout-list {
    background: var(--bima-panel);
    border-right: 1px solid transparent;
}

#layout-list > .header,
#layout-list .header {
    background: var(--bima-panel);
    border-bottom: none;
}

#layout-list .header a.button {
    color: var(--bima-muted);
}

/* --- Колонка чтения: белая карточка --- */
#layout-content {
    background: var(--bima-surface);
}

#layout-content > .header,
#layout-content .header {
    background: var(--bima-surface);
    border-bottom: 1px solid var(--bima-border);
}

#layout-content .header a.button {
    color: var(--bima-muted);
}

/* Футер-статусы */
#layout-list > .footer,
#layout-content > .footer,
#layout-sidebar > .footer {
    background: transparent;
    border-top: 1px solid var(--bima-border);
    color: var(--bima-faint);
}

/* ============================================================
   ПОИСК — серая «пилюля»
   ============================================================ */

.searchbar {
    background: var(--bima-search-bg) !important;
    border-radius: 999px !important;
    border: none !important;
    height: 2.6rem;
}

.searchbar input,
.searchbar input::placeholder {
    color: var(--bima-muted);
}

.searchbar input:focus {
    color: var(--bima-ink);
}

.searchbar a,
.searchbar button,
.searchbar span.icon {
    color: var(--bima-faint) !important;
}

.searchbar.focused,
.searchbar:hover {
    background: #eceff5 !important;
    box-shadow: none !important;
}

/* ============================================================
   ТУЛБАРЫ — иконка + текст, серо-чёрные
   ============================================================ */

.menu.toolbar a,
.menu.toolbar .dropbutton a {
    color: var(--bima-muted);
    border-radius: var(--bima-radius-sm);
}

.menu.toolbar a:hover:not(.disabled),
.menu.toolbar a:focus:not(.disabled) {
    color: var(--bima-ink);
    background: rgba(17, 24, 39, .05);
}

.menu.toolbar a.disabled {
    color: #c4c9d1;
}

/* Кнопка «Написать» — жёлтый CTA, как «+ Написать» в макете */
.menu.toolbar a.compose,
a.button.compose {
    background: var(--bima-accent) !important;
    color: var(--bima-on-accent) !important;
    border-radius: var(--bima-radius) !important;
    font-weight: 600;
    padding: .45rem 1.1rem !important;
}

.menu.toolbar a.compose:hover,
a.button.compose:hover {
    background: var(--bima-accent-dark) !important;
}

/* Разделители в тулбарах — убрать лишние линии */
.menu.toolbar .spacer {
    opacity: .35;
}

/* ============================================================
   СПИСОК ПАПОК — выбранная папка: жёлтый текст, без заливки
   ============================================================ */

.folderlist li a,
.treelist li a {
    color: var(--bima-ink);
    border-radius: var(--bima-radius-sm);
}

.folderlist li a:hover,
.treelist li a:hover {
    background: var(--bima-row-hover);
    color: var(--bima-ink);
}

/* Выбранная папка: жёлтый текст + жёлтая иконка, фон прозрачный */
.folderlist li.selected > a,
.folderlist li a.selected,
#rcm_foldermenu li a.selected {
    background: transparent !important;
    color: var(--bima-accent) !important;
    font-weight: 600;
}

.folderlist li.selected > a::before,
.folderlist li a.selected::before {
    color: var(--bima-accent) !important;
}

/* Счётчик непрочитанных: жёлтый скруглённый квадрат, белая цифра */
.folderlist li .unreadcount,
ul.treelist li .unreadcount,
.folderlist li.selected .unreadcount {
    background: var(--bima-accent) !important;
    color: var(--bima-on-accent) !important;
    border-radius: 6px !important;
    font-weight: 600;
    min-width: 1.35rem;
    padding: 0 .35rem;
    box-shadow: none !important;
}

/* ============================================================
   СПИСОК ПИСЕМ — карточки на сером фоне
   ============================================================ */

/* Таблица превращается в ленту карточек */
table.messagelist {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent;
}

table.messagelist thead th {
    background: transparent;
    border: none;
    color: var(--bima-faint);
    font-weight: 600;
}

table.messagelist tbody tr td {
    background: transparent;
    border: none !important;
    color: var(--bima-body);
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* Непрочитанные — жирный отправитель/тема */
table.messagelist tr.unread td.subject,
table.messagelist tr.unread td.fromto,
table.messagelist tr.unread td .subject {
    color: var(--bima-ink);
    font-weight: 700;
}

/* Выбранное письмо: белая карточка с мягкой тенью */
table.messagelist tr.selected td {
    background: var(--bima-surface) !important;
    box-shadow: var(--bima-shadow-card);
}

table.messagelist tr.selected td:first-child {
    border-top-left-radius: var(--bima-radius-lg) !important;
    border-bottom-left-radius: var(--bima-radius-lg) !important;
}

table.messagelist tr.selected td:last-child {
    border-top-right-radius: var(--bima-radius-lg) !important;
    border-bottom-right-radius: var(--bima-radius-lg) !important;
}

/* Наведение — лёгкое белое */
table.messagelist tbody tr:hover td {
    background: rgba(255, 255, 255, .65);
}

/* Звезда «Важное» — жёлтая */
table.messagelist td .flagged,
table.messagelist tr.flagged td .flagicon,
.messagelist .flagged {
    color: var(--bima-accent) !important;
}

/* Помеченные письма НЕ красные — только жёлтая звезда */
table.messagelist tr.flagged td.subject span.subject a {
    color: var(--bima-ink);
}

table.messagelist tr.flagged td.subject span.date,
table.messagelist tr.flagged td.subject span.fromto {
    color: var(--bima-muted);
}

/* ============================================================
   ЦЕПОЧКИ ПИСЕМ (режим «Цепочки») — как в макете Figma
   Корень — карточка с чипом «N ответа»; дочерние письма
   соединены жёлтым пунктиром с точками (js/bima.js)
   ============================================================ */

/* Дочерние письма — белые карточки с отступом вправо, как в макете
   (у дочерних строк td.subject имеет инлайн padding-left) */
table.messagelist tr:has(td.subject[style]) td {
    background: var(--bima-surface);
    box-shadow: var(--bima-shadow-card);
}

/* Отступ карточки вправо — прозрачная рамка td.subject (первая ячейка
   td.threads скрыта, :first-child не подходит). Пунктир и точку рисуем
   фоновыми слоями: псевдоэлементы внутри table-cell ненадёжны. */
table.messagelist tr:has(td.subject[style]) td.subject {
    border-left: 2.6rem solid transparent !important;   /* зазор под пунктир */
    background:
        radial-gradient(circle 4.5px at 1.28rem 50%, var(--bima-accent) 98%, transparent) border-box no-repeat,
        repeating-linear-gradient(to bottom, var(--bima-accent) 0 5px, transparent 5px 11px) border-box no-repeat,
        linear-gradient(var(--bima-surface), var(--bima-surface)) padding-box;
    background-size: auto, 2px calc(100% + 8px), auto;
    background-position: 0 0, 1.23rem -8px, 0 0;
    border-top-left-radius: var(--bima-radius-lg);
    border-bottom-left-radius: var(--bima-radius-lg);
}

table.messagelist tr:has(td.subject[style]) td:last-child {
    border-top-right-radius: var(--bima-radius-lg);
    border-bottom-right-radius: var(--bima-radius-lg);
}

/* Чип «N ответа» на корневой карточке (добавляет js/bima.js) */
.bima-thread-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    width: auto;
    margin-left: 3.6em;
    padding: .05em .5em .05em .4em;
    border-radius: 8px;
    color: var(--bima-muted);
    font-size: .85em;
    font-weight: 400;
    line-height: 1.7;
    cursor: pointer;
    user-select: none;
}

.bima-thread-chip:hover {
    background: rgba(17, 24, 39, .06);
    color: var(--bima-body);
}

.bima-thread-chip::before {
    font-family: 'Icons';
    content: "\f4ad";          /* comment-dots, как значок диалога в макете */
    color: var(--bima-faint);
}

.bima-thread-chip::after {
    font-family: 'Icons';
    content: "\f107";          /* chevron-down */
    font-weight: 900;
    color: var(--bima-faint);
}

.bima-thread-chip.exp::after {
    content: "\f106";          /* chevron-up */
}

/* Когда чипы нарисованы, штатная колонка-стрелка не нужна */
table.messagelist.bima-threaded td.threads,
table.messagelist.bima-threaded th.threads {
    display: none;
}

/* ============================================================
   АВАТАРЫ С ИНИЦИАЛАМИ (js/bima.js) — как в макете
   ============================================================ */

table.messagelist td.subject {
    position: relative;
}

.bima-avatar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* Маленький аватар — в списке контактов и чипах получателей */
.bima-avatar.bima-avatar-sm {
    position: static;
    transform: none;
    display: inline-flex;
    flex: none;
    width: 1.9em;
    height: 1.9em;
    margin-right: .5em;
    font-size: .75em;
    vertical-align: middle;
}

/* Текст уезжает правее аватара */
table.messagelist td.subject span.fromto {
    padding-left: 3.6em !important;
}

table.messagelist td.subject span.subject {
    padding-left: 3.6em;
}

/* Аватар дочернего письма — правее пунктирной линии */
table.messagelist td.subject[style] .bima-avatar {
    left: 16px;
}

/* Имя отправителя — тёмное и полужирное, как в макете */
table.messagelist td.subject span.fromto {
    color: var(--bima-ink);
    font-weight: 600;
}

/* Точка статуса не нужна — в макете её нет */
table.messagelist td.subject span.msgicon.status {
    display: none;
}

/* Тема письма — серая строка превью */
table.messagelist tr:not(.unread) td.subject span.subject a {
    color: var(--bima-muted);
}

/* Аватары в списке контактов */
#contacts-table td .bima-avatar-sm {
    margin-right: .6em;
}

/* Фото/заглушка контакта в шапке письма — круглая, как в макете */
#layout-content img.contactphoto {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: var(--bima-accent-soft);
}

/* ============================================================
   СПИСКИ (контакты, опции) — li-карточки
   ============================================================ */

ul.listing li,
.listing tbody tr {
    border-radius: var(--bima-radius-lg);
}

ul.listing li {
    color: var(--bima-body);
}

ul.listing li:hover {
    background: rgba(255, 255, 255, .7);
}

ul.listing li.selected,
.listing tbody tr.selected td {
    background: var(--bima-surface) !important;
    color: var(--bima-ink) !important;
    box-shadow: var(--bima-shadow-card);
}

ul.listing li a {
    color: inherit;
}

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn,
button.btn {
    border-radius: var(--bima-radius);
    font-weight: 600;
}

/* Primary — жёлтый с белым текстом (как «Сохранить», «Отправить», «Далее») */
.btn-primary,
.btn.btn-primary {
    background-color: var(--bima-accent) !important;
    border-color: var(--bima-accent) !important;
    color: var(--bima-on-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bima-accent-dark) !important;
    border-color: var(--bima-accent-dark) !important;
    color: var(--bima-on-accent) !important;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #cf9c05 !important;
    border-color: #cf9c05 !important;
    color: var(--bima-on-accent) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #fde9a8 !important;
    border-color: #fde9a8 !important;
    color: rgba(255, 255, 255, .85) !important;
}

/* Secondary — белая с тонкой рамкой (как «Отмена») */
.btn-secondary,
.btn.btn-secondary {
    background-color: var(--bima-surface) !important;
    border: 1px solid var(--bima-border) !important;
    color: var(--bima-ink) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bima-row-hover) !important;
    border-color: #d3d7e0 !important;
    color: var(--bima-ink) !important;
}

/* Danger — красный (как «Удалить») */
.btn-danger,
.btn.btn-danger {
    background-color: var(--bima-danger) !important;
    border-color: var(--bima-danger) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c93a3f !important;
    border-color: #c93a3f !important;
}

/* Фокус-обводка кнопок — жёлтая */
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 .2rem rgba(251, 190, 7, .35) !important;
}

/* ============================================================
   ФОРМЫ — подписи сверху, белые поля с тонкой рамкой
   ============================================================ */

.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.custom-select {
    background-color: var(--bima-surface);
    border: 1px solid var(--bima-border) !important;
    border-radius: var(--bima-radius) !important;
    color: var(--bima-ink);
    min-height: 2.6rem;
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--bima-surface);
    border-color: var(--bima-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(251, 190, 7, .25) !important;
    color: var(--bima-ink);
}

.form-control::placeholder {
    color: var(--bima-faint);
}

.propform label,
.form-group label,
legend {
    color: var(--bima-body);
    font-weight: 500;
}

/* Чекбоксы/переключатели — жёлтый акцент */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bima-accent) !important;
    border-color: var(--bima-accent) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(251, 190, 7, .25) !important;
}

/* ============================================================
   СОЗДАНИЕ ПИСЬМА — чипы получателей, вложения
   ============================================================ */

/* Чипы получателей: серая «пилюля», как в макете */
.recipient-input .recipient,
.recipient-input .recipient .email {
    background: #eef0f4;
    border-radius: 999px;
    color: var(--bima-ink);
}

.recipient-input .recipient a.button.icon.remove {
    color: var(--bima-faint);
}

.recipient-input input.form-control {
    border: none !important;
    background: transparent;
    box-shadow: none !important;
}

/* Вложения — белые чипы с тонкой рамкой */
.attachmentslist li,
#compose-attachments ul li {
    background: var(--bima-surface);
    border: 1px solid var(--bima-border);
    border-radius: var(--bima-radius);
    color: var(--bima-body);
}

.attachmentslist li a.delete,
.attachmentslist li a.cancelupload {
    color: var(--bima-danger);
}

/* Панель форматирования TinyMCE — мягкая светло-жёлтая полоса */
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
    background: #fff8e1 !important;
}

.tox .tox-tinymce {
    border: 1px solid var(--bima-border) !important;
    border-radius: var(--bima-radius-lg) !important;
}

/* ============================================================
   ПОПАПЫ / МЕНЮ / ДИАЛОГИ — крупные радиусы, белые карточки
   ============================================================ */

.popover,
.popupmenu,
.googie_list,
.ui-widget-content,
.ui-datepicker {
    background: var(--bima-surface) !important;
    border: 1px solid #eef0f4 !important;
    border-radius: var(--bima-radius-lg) !important;
    box-shadow: var(--bima-shadow-pop) !important;
    color: var(--bima-ink);
}

.popover .listing li a,
.popupmenu li a,
.ui-menu .ui-menu-item a {
    color: var(--bima-body);
    border-radius: var(--bima-radius-sm);
}

.popover .listing li a:hover,
.popupmenu li a:hover,
.ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-active {
    background: var(--bima-accent-soft) !important;
    color: var(--bima-ink) !important;
}

.popover .listing li.selected a,
.popupmenu li.selected a {
    background: transparent !important;
    color: var(--bima-accent) !important;
    font-weight: 600;
}

.ui-dialog,
.modal-content {
    border-radius: var(--bima-radius-xl) !important;
    border: 1px solid #eef0f4 !important;
    box-shadow: var(--bima-shadow-pop) !important;
}

.ui-dialog .ui-dialog-titlebar,
.modal-header {
    background: var(--bima-surface);
    border-bottom: 1px solid var(--bima-border);
    color: var(--bima-ink);
    border-radius: var(--bima-radius-xl) var(--bima-radius-xl) 0 0 !important;
}

.ui-dialog .ui-dialog-buttonpane,
.modal-footer {
    background: var(--bima-surface);
    border-top: 1px solid var(--bima-border);
    border-radius: 0 0 var(--bima-radius-xl) var(--bima-radius-xl) !important;
}

/* Уведомления */
.ui.alertbox .ui-alert,
#messagestack div {
    border-radius: var(--bima-radius) !important;
}

#messagestack div.success,
#messagestack div.confirmation {
    background: #e9f7ee !important;
    color: #1c6b38 !important;
}

#messagestack div.error,
#messagestack div.warning {
    background: #fdeceb !important;
    color: #a02b2f !important;
}

/* Цитаты в письмах */
blockquote,
pre.blockquote {
    border-left: 3px solid var(--bima-accent);
    background: #fffdf4;
    border-radius: 0 var(--bima-radius-sm) var(--bima-radius-sm) 0;
    color: var(--bima-body);
}

/* ============================================================
   ЭКРАН ВХОДА — фото-фон + стеклянная карточка
   ============================================================ */

body.task-login {
    background: #10161a url("../images/login-bg.jpg") center 30% / cover no-repeat fixed !important;
}

/* Центрирование стеклянной карточки */
body.task-login #layout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: transparent !important;
}

/* затемнение для читаемости карточки */
body.task-login::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 17, .25), rgba(10, 14, 17, .45));
    pointer-events: none;
}

body.task-login #layout-content {
    position: relative;
    z-index: 1;
    flex: none !important;   /* в elastic #layout-content имеет flex:6 — сбрасываем */
    width: 440px !important;
    max-width: 92vw;
    background: rgba(18, 26, 31, .55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: var(--bima-radius-xl) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    color: #f4f6f8;
    padding: 2.5rem !important;
}

/* Заголовок «Вход», как в макете */
body.task-login #layout-content::after {
    content: "Вход";
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    pointer-events: none;
}

/* В макете Figma на карточке входа логотипа нет — скрываем */
body.task-login #logo {
    display: none !important;
}

body.task-login #login-form {
    top: 0 !important;
    max-width: 100%;
    width: 100%;
    margin-top: 3rem;   /* отступ под заголовок «Вход» */
    color: #e8ebef;
}

body.task-login #login-form td.title,
body.task-login #login-form label {
    color: rgba(255, 255, 255, .85) !important;
}

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: var(--bima-radius) !important;
    color: #ffffff !important;
}

body.task-login #login-form input::placeholder {
    color: rgba(255, 255, 255, .55) !important;
}

body.task-login #login-form input:focus {
    background: rgba(255, 255, 255, .12) !important;
    border-color: var(--bima-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(251, 190, 7, .3) !important;
}

body.task-login #login-form input[type="submit"],
body.task-login #login-form button.mainaction {
    background: var(--bima-accent) !important;
    border: none !important;
    border-radius: var(--bima-radius) !important;
    color: var(--bima-on-accent) !important;
    font-weight: 600;
    min-height: 2.9rem;
    width: 100%;
}

body.task-login #login-form input[type="submit"]:hover {
    background: var(--bima-accent-dark) !important;
}

body.task-login #login-footer,
body.task-login #login-footer a {
    color: rgba(255, 255, 255, .6) !important;
}

/* ============================================================
   ТЁМНЫЙ РЕЖИМ ELASTIC (html.dark-mode) — совместимость
   ============================================================ */

html.dark-mode #layout-menu {
    background: #16191d !important;
    border-right-color: #262b31 !important;
}

html.dark-mode #taskmenu a.selected {
    background: rgba(251, 190, 7, .18) !important;
    color: var(--bima-accent) !important;
}

html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li a.selected,
html.dark-mode .popover .listing li.selected a,
html.dark-mode .popupmenu li.selected a {
    color: var(--bima-accent) !important;
}

html.dark-mode .folderlist li .unreadcount,
html.dark-mode ul.treelist li .unreadcount {
    background: var(--bima-accent) !important;
    color: #1a1a1a !important;
}

html.dark-mode .btn-primary {
    color: #1a1a1a !important;
}

html.dark-mode .menu.toolbar a.compose {
    color: #1a1a1a !important;
}

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

@media screen and (max-width: 480px) {
    /* Рейка задач снизу остаётся белой с серыми иконками */
    #layout-menu {
        background: var(--bima-surface) !important;
        border-top: 1px solid #f0f1f4;
    }

    #taskmenu a.selected {
        background: var(--bima-accent-soft) !important;
        color: var(--bima-accent) !important;
    }

    /* Карточки списка чуть компактнее */
    table.messagelist {
        border-spacing: 0 6px !important;
    }

    .searchbar {
        height: 2.4rem;
    }
}

/* ============================================================
   РАЗНОЕ
   ============================================================ */

/* Индикатор квоты */
.quota-widget .value {
    color: var(--bima-accent-dark);
}

/* Вотермарк пустой области чтения */
#messagebody .watermark,
.watermark {
    opacity: .5;
}

/* Календарь Kolab: активные элементы в жёлтом */
#calendar .fc-button-primary,
.fc .fc-button-primary {
    background-color: var(--bima-accent) !important;
    border-color: var(--bima-accent) !important;
    color: var(--bima-on-accent) !important;
}

#calendar .fc-day-today,
.fc .fc-day-today {
    background: var(--bima-accent-soft) !important;
}

/* Кнопки выбора (селект списка) */
.select-button,
.pagenav a {
    color: var(--bima-muted);
}

.pagenav a:hover {
    color: var(--bima-ink);
}

/* Размер/счётчик списка в футере */
#layout-list .footer .countdisplay,
#layout-list .footer .quota {
    color: var(--bima-faint);
}