/*
 * Тема TravelGo поверх Elastic: шрифт и токены нового дизайна сайта
 * (frontend/src/app/styles/_corp-theme.scss) - полотно, карточки, индиго без градиентов.
 */

@font-face {
    font-family: 'Google Sans';
    src: url('GoogleSans-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --tg-ground: #f3f4f9;
    --tg-card: #fff;
    --tg-fill: #e8eaf4;
    --tg-fill-soft: #f5f6fb;
    --tg-line: #e8eaf4;
    --tg-line-strong: #dde0f0;
    --tg-ink: #14162b;
    --tg-muted: #5c607a;
    --tg-faint: #9da1b8;
    --tg-brand: #6066f6;
    --tg-brand-hover: #4b52ed;
    --tg-brand-text: #474ddb;
    --tg-brand-soft: #ecedfe;
    --tg-menu: #23267a;
    --tg-radius-s: 10px;
    --tg-radius-m: 12px;
    --tg-radius-l: 18px;
    --tg-shadow-s: 0 1px 2px rgb(20 22 43 / 4%);
    --tg-shadow-m: 0 4px 12px rgb(20 22 43 / 6%);
    --tg-shadow-l: 0 12px 28px rgb(20 22 43 / 12%);
    --tg-font: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Шрифт и база ── */

body,
button,
input,
select,
textarea,
.ui-widget,
.popover,
.ui-dialog,
.btn,
.form-control,
.custom-select {
    font-family: var(--tg-font);
}

body {
    color: var(--tg-ink);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #d7d9fd;
}

a,
.btn-link,
.ui.alert a:not(.btn) {
    color: var(--tg-brand-text);
}

* {
    scrollbar-color: #cfd3e6 transparent;
}

/* ── Каркас: панели-карточки на полотне ── */

html:not(.iframe) body {
    background: var(--tg-ground);
}

#layout > div > .header,
#layout > div > .footer {
    background-color: var(--tg-card);
    border-color: var(--tg-line);
    color: var(--tg-ink);
}

#layout > div > .header .header-title {
    font-weight: 600;
    letter-spacing: -.01em;
}

#layout-sidebar,
#layout-list,
#layout-content {
    background-color: var(--tg-card);
    border-color: var(--tg-line);
}

@media screen and (min-width: 1025px) {
    html:not(.iframe) #layout {
        box-sizing: border-box;
        padding: 12px;
        gap: 12px;
    }

    html:not(.iframe) #layout > #layout-menu,
    html:not(.iframe) #layout > #layout-sidebar,
    html:not(.iframe) #layout > #layout-list,
    html:not(.iframe) #layout > #layout-content {
        border: 0;
        border-radius: var(--tg-radius-l);
        overflow: hidden;
        box-shadow: var(--tg-shadow-s), var(--tg-shadow-m);
    }

    html:not(.iframe) #layout > #layout-menu {
        height: auto;
        box-shadow: none;
    }
}

/* ── Боковое меню ── */

#layout-menu,
#taskmenu .special-buttons {
    background-color: var(--tg-menu);
}

/* В теме у ячейки логотипа фон задан с !important - иначе не перебить. */
#layout-menu .popover-header {
    background-color: var(--tg-menu) !important;
}

#layout-menu #logo {
    filter: brightness(0) invert(1);
}

/* Колонка чуть шире стандартной: «Настройки» и «Контакты» не обрезаются. */
#layout-menu {
    position: relative;
    width: 90px;
    min-width: 90px;
}

#taskmenu a {
    color: #c9ccf5;
    border-radius: var(--tg-radius-m);
    width: auto;
    margin: 3px 7px;
    font-size: .8rem;
    transition: background-color .15s, color .15s;
}

#taskmenu .special-buttons {
    width: 100%;
    left: 0;
    bottom: 6px;
}

#taskmenu a:hover,
#taskmenu a.selected {
    color: #fff;
    background-color: rgb(255 255 255 / 13%);
}

#taskmenu a.selected {
    font-weight: 600;
}

#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover {
    color: #fff;
    background-color: var(--tg-brand);
    box-shadow: 0 6px 16px rgb(10 12 60 / 35%);
    margin-bottom: 10px;
}

#taskmenu .action-buttons a:hover {
    background-color: #7379ff;
}

/* «Написать сообщение» в узкую колонку не влезает и обрезается многоточием. */
#taskmenu a.compose .inner {
    font-size: 0;
}

#taskmenu a.compose .inner::after {
    content: 'Написать';
    font-size: .8rem;
    font-weight: 600;
}

/* Тема сделана для светлого режима, поэтому переключатель и «О программе» убраны. */
#taskmenu a.theme,
#taskmenu a.about {
    display: none;
}

#taskmenu a.logout {
    color: #ff9aa5;
}

/* ── Кнопки ── */

.btn {
    border-radius: var(--tg-radius-m);
    font-weight: 600;
    padding: .5rem 1.05rem;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.floating-action-buttons a.button,
div.tox .tox-dialog__footer .tox-button {
    background: var(--tg-brand);
    border-color: var(--tg-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.floating-action-buttons a.button:hover {
    background: var(--tg-brand-hover);
    border-color: var(--tg-brand-hover);
    color: #fff;
    box-shadow: 0 6px 16px rgb(96 102 246 / 28%);
}

.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
    background: var(--tg-fill);
    border-color: var(--tg-fill);
    color: var(--tg-ink);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: #dde0f0;
    border-color: #dde0f0;
    color: var(--tg-ink);
    box-shadow: none;
}

.btn-danger {
    border-radius: var(--tg-radius-m);
}

/* ── Панели инструментов ── */

.menu.toolbar a,
#layout > div > .header a.button {
    color: var(--tg-muted);
    border-radius: var(--tg-radius-s);
    transition: background-color .15s, color .15s;
}

.menu.toolbar a:not(.disabled):hover,
#layout > div > .header a.button:not(.disabled):hover {
    color: var(--tg-brand-text);
    background-color: var(--tg-brand-soft);
}

.menu.toolbar a.disabled,
#layout > div > .header a.button.disabled {
    color: var(--tg-faint);
    opacity: .55;
}

.menu.toolbar a .inner {
    font-weight: 500;
}

/* ── Поиск ── */

.searchbar {
    background: var(--tg-fill-soft);
    border: 0;
    border-radius: var(--tg-radius-m);
    margin: 10px 12px 6px;
    color: var(--tg-muted);
}

.searchbar input,
.searchbar input:focus {
    background: transparent;
}

.searchbar a.button {
    color: var(--tg-muted);
}

/* ── Списки: папки, настройки ── */

.listing li,
.listing tbody td,
ul.treelist li {
    border-color: transparent;
}

ul.treelist li > a,
ul.treelist li > div > a,
.listing:not(.messagelist):not(.attachmentslist) li > a {
    border-radius: var(--tg-radius-m);
    margin: 2px 8px;
    color: var(--tg-ink);
    transition: background-color .15s;
}

ul.treelist li > a:hover,
ul.treelist li > div > a:hover,
.listing:not(.messagelist) li > a:hover {
    background-color: var(--tg-fill-soft);
}

.listing li.selected,
.listing tr.selected td,
.table-widget table.options-table tr.selected td,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
    background-color: var(--tg-brand-soft);
    color: var(--tg-brand-text);
}

.listing:not(.messagelist) li.selected {
    background-color: transparent;
}

.listing:not(.messagelist) li.selected > a {
    background-color: var(--tg-brand-soft);
    color: var(--tg-brand-text);
    font-weight: 600;
}

ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
    font-weight: 600;
}

.listing:not(.messagelist) tbody tr td {
    border-bottom: 1px solid var(--tg-line);
}

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
    background: var(--tg-brand);
    color: #fff;
    border-radius: 999px;
    min-width: 1.6em;
    font-weight: 600;
}

.quota-widget .value {
    background-color: var(--tg-brand);
}

/* ── Список писем ── */

.messagelist tbody tr td {
    border-bottom: 1px solid var(--tg-line);
    transition: background-color .12s;
}

.messagelist tbody tr:hover td {
    background-color: var(--tg-fill-soft);
}

.messagelist tbody tr.selected td,
.messagelist tbody tr.selected:hover td {
    background-color: var(--tg-brand-soft);
}

.messagelist tbody tr.selected td.subject,
.messagelist tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--tg-brand);
}

.messagelist td.subject {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.messagelist td.subject span.fromto,
.messagelist td.subject span.date {
    color: var(--tg-muted);
}

.messagelist tr.unread td.subject span.fromto {
    color: var(--tg-ink);
    font-weight: 600;
}

.messagelist td.subject span.subject a {
    color: var(--tg-muted);
}

.messagelist tr.unread td.subject span.subject a {
    color: var(--tg-ink);
    font-weight: 700;
}

.messagelist tr.selected td.subject span.subject a {
    color: var(--tg-ink);
}

.messagelist td.subject span.msgicon.status.unread::before,
.messagelist tr.unread td.subject span.msgicon.status::before {
    color: var(--tg-brand);
}

.messagelist thead th {
    background: var(--tg-card);
    border-color: var(--tg-line);
    color: var(--tg-muted);
}

/* ── Формы ── */

.form-control,
.custom-select,
.custom-file-label,
.recipient-input,
.multi-input > .content,
.input-group-text {
    border-color: var(--tg-line-strong);
    border-radius: var(--tg-radius-m);
    color: var(--tg-ink);
}

.input-group-text {
    background: var(--tg-fill-soft);
    color: var(--tg-muted);
}

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

.form-control:focus,
.custom-select:focus,
.recipient-input.focus,
.multi-input > .content.focused,
.custom-file-input:focus ~ .custom-file-label,
div.tox.focused {
    border-color: var(--tg-brand);
    box-shadow: 0 0 0 3px rgb(96 102 246 / 16%);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tg-brand);
    border-color: var(--tg-brand);
}

label,
.col-form-label {
    color: var(--tg-muted);
}

fieldset legend {
    color: var(--tg-ink);
    font-weight: 700;
    letter-spacing: -.01em;
    border-color: var(--tg-line);
}

.formcontent {
    padding: 1.25rem 1.5rem;
}

.formbuttons {
    border-color: var(--tg-line);
    background: var(--tg-card);
}

/* ── Редактор письма ── */

div.tox.tox-tinymce {
    border-color: var(--tg-line-strong);
    border-radius: 14px;
}

div.tox .tox-toolbar,
div.tox .tox-toolbar__primary,
div.tox .tox-toolbar-overlord,
div.tox .tox-editor-header {
    background-color: var(--tg-fill-soft) !important;
}

div.tox .tox-tbtn:hover,
div.tox .tox-tbtn--enabled,
div.tox .tox-tbtn--enabled:hover {
    background: var(--tg-brand-soft);
    color: var(--tg-brand-text);
}

#compose-attachments .upload-form,
.file-upload {
    border-radius: 14px;
}

.attachmentslist li {
    border-radius: var(--tg-radius-s);
}

.recipient-input li.recipient {
    background: var(--tg-brand-soft);
    border-color: transparent;
    border-radius: 8px;
    color: var(--tg-brand-text);
}

/* ── Всплывающие меню, окна, уведомления ── */

.popover {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--tg-shadow-l);
    overflow: hidden;
}

.popover .menu li a,
.popupmenu .listing li > a {
    color: var(--tg-ink);
}

.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active {
    background-color: var(--tg-brand-soft);
    border-color: transparent;
    color: var(--tg-brand-text);
}

.popover .menu li a:not(.disabled):hover::before,
.popupmenu .listing li > a:not(.disabled):hover::before {
    color: var(--tg-brand-text);
}

.ui-dialog {
    border: 0;
    border-radius: var(--tg-radius-l);
    box-shadow: var(--tg-shadow-l);
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--tg-card);
    border-color: var(--tg-line);
}

.ui-dialog .ui-dialog-title {
    font-weight: 700;
    color: var(--tg-ink);
}

.ui-dialog .ui-dialog-buttonpane {
    border-color: var(--tg-line);
}

.ui-datepicker a.ui-state-active {
    background: var(--tg-brand);
}

#messagestack div {
    border-radius: 14px;
    box-shadow: var(--tg-shadow-l);
}

#messagestack .alert-info.information {
    background-color: var(--tg-menu);
}

/* ── Просмотр письма ── */

body.task-mail #message-header h2.subject,
body.task-mail h2.subject {
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--tg-ink);
}

body.task-mail .header .header-headers,
body.task-mail .header-summary,
body.task-mail .header .short-header {
    color: var(--tg-muted);
}

body.task-mail #message-header {
    padding: 1.25rem 1.5rem 1rem;
    border-color: var(--tg-line);
}

body.task-mail #message-content,
body.task-mail #messagebody {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ── Вход ── */

body.task-login #layout,
body.task-login #layout-content {
    background: var(--tg-ground);
    box-shadow: none !important;
}

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

body.task-login #login-form {
    background: var(--tg-card);
    border-radius: 20px;
    padding: 28px 28px 20px;
    box-shadow: var(--tg-shadow-l);
}

body.task-login #login-form .form-control,
body.task-login #login-form .input-group-text {
    height: 46px;
}

body.task-login .btn-primary {
    height: 46px;
    text-transform: none;
    font-size: 1rem;
}

body.task-login #login-footer {
    color: var(--tg-faint);
}

/* ── Подпись сотрудника ── */

.tg-hint {
    color: var(--tg-muted);
    font-size: 13px;
}

/* Подпись показываем на белом листе - так её увидит получатель письма. */
.tg-signature-preview {
    background: #fff;
    border: 1px solid var(--tg-line-strong);
    border-radius: 14px;
    padding: 20px;
    overflow-x: auto;
}

.tg-signature-note {
    background: var(--tg-fill-soft);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.1rem;
    margin-bottom: 1.25rem;
}

.tg-signature-note legend {
    float: left;
    width: 100%;
    border: 0;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1rem;
}

.tg-signature-note p {
    clear: both;
    color: var(--tg-muted);
    margin-bottom: .75rem;
}

/* Форма настроек растягивает таблицы на всю ширину и добавляет ячейкам отступы -
   подписи возвращаем её собственные размеры, заданные строчными стилями. */
.tg-signature-preview table {
    width: auto;
    margin: 0;
}

.tg-signature-preview td {
    width: auto;
    padding: 0;
    border: 0;
}

/* ── Переключатель ящиков: своя почта и общие ── */

.tg-mailboxes {
    display: flex;
    gap: 6px;
    padding: 10px 10px 4px;
}

.tg-mailboxes a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 7px 10px 8px;
    border-radius: var(--tg-radius-m);
    background: var(--tg-fill-soft);
    color: var(--tg-muted);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.tg-mailboxes a:hover {
    background: var(--tg-fill);
    color: var(--tg-ink);
}

.tg-mailboxes a.active {
    background: var(--tg-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgb(96 102 246 / 28%);
}

.tg-mailbox-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-mailbox-email {
    font-size: 11px;
    line-height: 14px;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Кружок отправителя ── */

.tg-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

.tg-avatar-own {
    background: var(--tg-brand) url('avatar-travelgo.png') center / cover no-repeat;
}

.tg-avatar-large {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 14px;
}

.messagelist td.subject.tg-has-avatar {
    position: relative;
    padding-left: 62px;
}

.messagelist td.subject.tg-has-avatar > .tg-avatar {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Открытое письмо: текст и шапка ── */

body.task-mail #message-header .header {
    align-items: center;
}

body.task-mail .message-part div.pre,
body.task-mail .message-part pre,
body.task-mail .message-part {
    font-family: var(--tg-font);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tg-ink);
}

body.task-mail #messagebody {
    padding: 1rem 1.5rem 2rem;
}