/* KinoDuo Почта — оформление поверх Elastic.
   На компьютере: сверху полоса с логотипом и разделами, слева «Написать» и
   папки, список писем и само письмо — белые карточки на тёплом фоне.
   На телефоне раскладка остаётся Elastic, меняются только цвета и шрифты.
   Цвета — те же токены, что в public/style.css сайта. */

@font-face { font-family: 'Inter'; font-weight: 300 800; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Inter'; font-weight: 300 800; font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --kd-bg: #f4f1ec;
  --kd-surface: #ffffff;
  --kd-surface-2: #faf8f4;
  --kd-hover: rgba(60, 40, 10, .05);
  --kd-line: #ece6dc;
  --kd-text: #1e1a17;
  --kd-text-2: #6b625a;
  --kd-text-3: #9a9087;
  --kd-accent: #f0b45c;
  --kd-accent-hover: #e6a443;
  --kd-accent-tekst: #8f5408;
  --kd-on-accent: #1f1606;
  --kd-tint: rgba(240, 180, 92, .18);
  --kd-tint-strong: rgba(240, 180, 92, .30);
  --kd-shadow: 0 1px 2px rgba(40, 25, 5, .05), 0 4px 16px rgba(40, 25, 5, .05);
  --kd-radius: 16px;
  --kd-top: 64px;
}
html.dark-mode {
  --kd-bg: #141110;
  --kd-surface: #1e1a17;
  --kd-surface-2: #231e1a;
  --kd-hover: rgba(255, 240, 220, .05);
  --kd-line: #2e2823;
  --kd-text: #f3ece2;
  --kd-text-2: #b3a899;
  --kd-text-3: #857a6e;
  --kd-accent-tekst: #f0b45c;
  --kd-tint: rgba(240, 180, 92, .14);
  --kd-tint-strong: rgba(240, 180, 92, .24);
  --kd-shadow: none;
}

body, input, select, textarea, button, .popover, .tooltip, .ui-dialog {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
h1, h2, h3, .boxtitle, .formcontent legend, .ui-dialog-title, #message-header h2.subject {
  font-family: 'Manrope', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body { background: var(--kd-bg); color: var(--kd-text); }

/* ================================================================ акцент */

.btn-primary, .button.mainaction, .btn.btn-primary, #rcmloginsubmit,
.ui-dialog .ui-dialog-buttonset .btn.mainaction {
  background-color: var(--kd-accent) !important;
  border-color: var(--kd-accent) !important;
  color: var(--kd-on-accent) !important;
  font-weight: 600;
  border-radius: 10px;
}
.btn-primary:hover, .button.mainaction:hover, #rcmloginsubmit:hover {
  background-color: var(--kd-accent-hover) !important;
  border-color: var(--kd-accent-hover) !important;
}
.btn { border-radius: 10px; }
a { color: var(--kd-accent-tekst); }
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--kd-accent) !important;
  box-shadow: 0 0 0 .2rem var(--kd-tint) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked {
  background-color: var(--kd-accent) !important;
  border-color: var(--kd-accent) !important;
}
.searchbar a.selected, .listing li.selected a, .unreadcount { color: var(--kd-accent-tekst); }

/* ============================================ раскладка на компьютере */

html.layout-large #layout, html.layout-normal #layout {
  flex-wrap: wrap;
  align-content: flex-start;
  background: var(--kd-bg);
  padding: 0 12px 12px;
  column-gap: 12px;
}
html.layout-large #layout > div:not(#layout-menu),
html.layout-normal #layout > div:not(#layout-menu) {
  height: calc(100% - var(--kd-top) - 12px);
}

/* ---- верхняя полоса ---- */
html.layout-large #layout-menu, html.layout-normal #layout-menu {
  order: -1;
  flex: 0 0 100%;
  width: 100% !important;
  height: var(--kd-top);
  display: flex;
  align-items: center;
  background: transparent !important;
  padding: 0 4px;
}
html.layout-large #layout-menu .popover-header,
html.layout-normal #layout-menu .popover-header {
  display: flex;
  align-items: center;
  flex: 0 0 236px;
  height: var(--kd-top);
  line-height: normal;
  background: transparent !important;
  padding: 0 8px !important;
  text-align: left;
}
html.layout-large #layout-menu .popover-header img,
html.layout-normal #layout-menu .popover-header img {
  max-height: 34px;
  max-width: none;
  padding: 0;
}
html.layout-large #taskmenu, html.layout-normal #taskmenu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
}
html.layout-large #taskmenu .action-buttons,
html.layout-normal #taskmenu .action-buttons { display: none; }
html.layout-large #taskmenu a, html.layout-normal #taskmenu a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  /* Elastic режет пункты меню до 6rem: «Контакты» превращались в «Конта». */
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: nowrap;
  flex: none;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px;
  color: var(--kd-text-2) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
}
html.layout-large #taskmenu a:before, html.layout-normal #taskmenu a:before {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
html.layout-large #taskmenu a .inner, html.layout-normal #taskmenu a .inner {
  display: inline !important;
  padding: 0;
  font-size: 14px;
}
html.layout-large #taskmenu a:hover, html.layout-normal #taskmenu a:hover {
  background: var(--kd-hover) !important;
  color: var(--kd-text) !important;
}
html.layout-large #taskmenu a.selected, html.layout-normal #taskmenu a.selected {
  background: var(--kd-surface) !important;
  color: var(--kd-text) !important;
  box-shadow: var(--kd-shadow);
}
html.layout-large #taskmenu .special-buttons,
html.layout-normal #taskmenu .special-buttons {
  position: static !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: transparent !important;
}
/* Тема и «О программе» — круглые кнопки без подписи. */
html.layout-large #taskmenu .special-buttons a.theme,
html.layout-large #taskmenu .special-buttons a.about,
html.layout-normal #taskmenu .special-buttons a.theme,
html.layout-normal #taskmenu .special-buttons a.about {
  width: 40px !important;
  padding: 0 !important;
  justify-content: center;
}
html.layout-large #taskmenu .special-buttons a.theme .inner,
html.layout-large #taskmenu .special-buttons a.about .inner,
html.layout-normal #taskmenu .special-buttons a.theme .inner,
html.layout-normal #taskmenu .special-buttons a.about .inner { display: none !important; }
html.layout-large #taskmenu a.logout, html.layout-normal #taskmenu a.logout {
  color: var(--kd-text-2) !important;
}
html.layout-large #taskmenu a.logout:hover, html.layout-normal #taskmenu a.logout:hover {
  color: #c2410c !important;
}

/* ---- папки слева ---- */
html.layout-large #layout-sidebar, html.layout-normal #layout-sidebar {
  flex: 0 0 236px;
  min-width: 236px;
  max-width: 236px;
  background: transparent;
  border: 0;
}
html.layout-large #layout-sidebar > .header,
html.layout-normal #layout-sidebar > .header {
  background: transparent;
  border: 0;
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  padding: 0 4px 0 12px;
  justify-content: flex-start;
}
html.layout-large #layout-sidebar > .header .header-title,
html.layout-normal #layout-sidebar > .header .header-title {
  margin: 0;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--kd-text-3);
}
html.layout-large #layout-sidebar .column-resizer,
html.layout-normal #layout-sidebar .column-resizer,
html.layout-large #layout-list .column-resizer,
html.layout-normal #layout-list .column-resizer { display: none; }
html.layout-large #layout-sidebar > .footer,
html.layout-normal #layout-sidebar > .footer { background: transparent; border: 0; }

/* «Написать» — плагин добавляет её первой в колонку папок. */
.kd-compose-wrap { padding: 0 4px 10px; }
.kd-compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border-radius: 14px;
  background: var(--kd-accent);
  color: var(--kd-on-accent) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(240, 180, 92, .35);
  transition: background .15s, transform .15s;
}
.kd-compose:hover { background: var(--kd-accent-hover); }
.kd-compose:active { transform: translateY(1px); }
.kd-compose svg { width: 18px; height: 18px; }
html:not(.layout-large):not(.layout-normal) .kd-compose-wrap { display: none; }

#folderlist-content { background: transparent; }
#mailboxlist li.mailbox > a, .treelist li > a {
  border-radius: 10px;
  margin: 1px 4px;
  color: var(--kd-text);
  height: 38px;
  line-height: 38px;
}
html.layout-large #mailboxlist li.mailbox > a,
html.layout-normal #mailboxlist li.mailbox > a { border: 0 !important; }
#mailboxlist li.mailbox > a:hover { background: var(--kd-hover); }
#mailboxlist li.mailbox.selected > a {
  background: var(--kd-tint-strong) !important;
  color: var(--kd-text) !important;
  font-weight: 600;
}
#mailboxlist li.mailbox.selected > a:before { color: var(--kd-accent-tekst); }
#mailboxlist li.mailbox .unreadcount {
  background: transparent !important;
  color: var(--kd-text) !important;
  font-weight: 700;
  font-size: 13px;
  border: 0;
}
#mailboxlist li.mailbox.selected .unreadcount { color: var(--kd-accent-tekst) !important; }
#mailboxlist, .treelist, .listing { border: 0; }
.listing li { border-bottom: 0 !important; }

/* ---- список писем и письмо: карточки ---- */
html.layout-large #layout-list, html.layout-normal #layout-list,
html.layout-large #layout-content, html.layout-normal #layout-content {
  border: 0;
  border-radius: var(--kd-radius);
  background: var(--kd-surface);
  box-shadow: var(--kd-shadow);
  overflow: hidden;
}
html.layout-large #layout-list, html.layout-normal #layout-list {
  flex: 0 0 38%;
  max-width: 560px;
  min-width: 340px;
}
html.layout-large #layout > div > .header,
html.layout-normal #layout > div > .header {
  background: var(--kd-surface);
  border-bottom: 1px solid var(--kd-line);
  color: var(--kd-text);
  font-weight: 600;
}
html.layout-large #layout-sidebar > .header,
html.layout-normal #layout-sidebar > .header { background: transparent; border: 0; }
#layout > div > .header a.button, .toolbar a.button { color: var(--kd-text-2); border-radius: 10px; }
#layout > div > .header a.button:not(.disabled):hover,
.toolbar a.button:not(.disabled):hover { color: var(--kd-text); background: var(--kd-hover); }

/* Поиск — серое скруглённое поле. */
#layout-list .searchbar {
  margin: 10px 12px 6px;
  border: 0 !important;
  border-radius: 12px;
  background: var(--kd-surface-2);
  box-shadow: inset 0 0 0 1px var(--kd-line);
}
#layout-list .searchbar input { color: var(--kd-text); }
#layout-list .searchbar:focus-within { box-shadow: inset 0 0 0 2px var(--kd-accent); }

/* Строки писем. */
table.messagelist { background: transparent; }
table.messagelist tr td { border-bottom: 1px solid var(--kd-line) !important; }
table.messagelist tr:hover td { background: var(--kd-surface-2); }
table.messagelist tr.selected td, table.messagelist tr.selected:hover td {
  background: var(--kd-tint) !important;
  color: var(--kd-text) !important;
}
table.messagelist tr.focused td { outline: 0 !important; }
table.messagelist tr.focused td.subject { box-shadow: inset 3px 0 0 var(--kd-accent); }
table.messagelist td.subject { position: relative; padding-left: 64px !important; }
table.messagelist td.subject span.fromto { color: var(--kd-text); font-size: 14px; }
table.messagelist td.subject span.subject,
table.messagelist td.subject span.subject a { color: var(--kd-text-2); font-size: 13.5px; }
table.messagelist td.subject span.date { color: var(--kd-text-3); font-size: 12.5px; }
table.messagelist tr.unread td.subject span.fromto,
table.messagelist tr.unread td.subject span.subject a { color: var(--kd-text); font-weight: 700; }
table.messagelist tr.deleted td { opacity: .5; }

/* Кружок с буквой отправителя (добавляет kinoduo.js). Непрочитанное —
   янтарная точка на кружке. */
.kd-ava {
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 'Manrope', 'Inter', sans-serif;
  color: #fff;
  user-select: none;
}
table.messagelist tr.unread .kd-ava::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--kd-accent);
  box-shadow: 0 0 0 2px var(--kd-surface);
}
/* Кружок не нужен в узкой раскладке и при выборе галочками. */
html.layout-phone table.messagelist td.subject { padding-left: .5rem !important; }
html.layout-phone .kd-ava { display: none; }
table.messagelist.withselection td.subject { padding-left: .5rem !important; }
table.messagelist.withselection .kd-ava { display: none; }

/* Пустой экран без письма. */
#layout-content .iframe-wrapper { background: var(--kd-surface); }

/* ================================================== просмотр письма */

html.iframe body { background: var(--kd-surface); }
#message-header { background: var(--kd-surface); border-bottom: 1px solid var(--kd-line); padding: 18px 24px 14px; }
#message-header h2.subject {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--kd-text);
  margin-bottom: 10px;
}
#message-header .header-headers, #message-header .header .header-content { color: var(--kd-text-2); }
#messagebody { padding: 20px 24px; }
#message-objects .notice { border-radius: 12px; }
.message-partheaders, .message-htmlpart, .message-part { color: var(--kd-text); }

/* ======================================================= тёмная тема */

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-sidebar { background-color: var(--kd-bg) !important; }
html.dark-mode #layout-list, html.dark-mode #layout-content,
html.dark-mode #layout > div > .header, html.dark-mode .content,
html.dark-mode .formcontainer, html.dark-mode .ui-dialog, html.dark-mode .popover,
html.dark-mode table.messagelist, html.dark-mode html.iframe body,
html.dark-mode #message-header, html.dark-mode .iframe-wrapper {
  background-color: var(--kd-surface) !important;
}
html.dark-mode #layout-sidebar > .header { background: transparent !important; }
html.dark-mode table.messagelist tr td,
html.dark-mode .listing li, html.dark-mode table.records-table td,
html.dark-mode #layout > div > .header { border-color: var(--kd-line) !important; }
html.dark-mode .form-control, html.dark-mode .custom-select,
html.dark-mode .input-group-text, html.dark-mode .searchbar input {
  background-color: #191512 !important;
  border-color: #3a322b !important;
  color: var(--kd-text) !important;
}
html.dark-mode .input-group-text { color: var(--kd-text-2) !important; }
html.dark-mode #layout-list .searchbar { background: #191512; }
/* На телефоне/планшете меню остаётся тёмной колонкой Elastic. */
html.dark-mode:not(.layout-large):not(.layout-normal) #layout-menu,
html.dark-mode:not(.layout-large):not(.layout-normal) #layout-menu .popover-header { background-color: #141110 !important; }

/* ============================================================ вход */

body.task-login { background: var(--kd-bg) !important; }
body.task-login #layout, body.task-login #layout-content { background: transparent !important; box-shadow: none; }
#login-form {
  max-width: 400px; margin: 0 auto; padding: 32px 28px 24px;
  background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(40, 25, 5, .08);
}
html.dark-mode #login-form { box-shadow: none; }
#login-form #logo { max-height: 40px; margin-bottom: 18px; }
#login-form .input-group-text { border-radius: 10px 0 0 10px; }
#login-form .form-control { border-radius: 0 10px 10px 0; height: 44px; }
#rcmloginsubmit { height: 46px; font-size: 15px; text-transform: none; }
#login-footer { opacity: .55; }

/* Плавающая «Написать» на телефоне — янтарная. */
.floating-action-buttons a.button { background: var(--kd-accent) !important; color: var(--kd-on-accent) !important; }

/* ============================================ новое письмо: панель */

.kd-compose-bg {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(20, 14, 8, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: kd-fade .14s ease-out;
}
.kd-compose-bg[hidden] { display: none; }
.kd-compose-panel {
  width: min(1080px, 100%);
  height: min(860px, 100%);
  display: flex; flex-direction: column;
  background: var(--kd-surface);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(20, 14, 8, .32);
  overflow: hidden;
  animation: kd-rise .18s ease-out;
}
.kd-compose-head {
  flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 22px; border-bottom: 1px solid var(--kd-line);
}
.kd-compose-title { font: 800 17px/1 'Manrope', 'Inter', sans-serif; color: var(--kd-text); }
.kd-compose-x {
  width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent;
  color: var(--kd-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kd-compose-x svg { width: 18px; height: 18px; }
.kd-compose-x:hover { background: var(--kd-hover); color: var(--kd-text); }
.kd-compose-frame { flex: 1; width: 100%; border: 0; background: var(--kd-surface); }
html.kd-compose-open { overflow: hidden; }
/* Диалог «Сохранить в черновиках?» — над панелью. */
html.kd-compose-open .ui-dialog { z-index: 20010 !important; }
html.kd-compose-open .ui-widget-overlay { z-index: 20005 !important; }
@keyframes kd-fade { from { opacity: 0; } }
@keyframes kd-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  .kd-compose-bg, .kd-compose-panel { animation: none; }
}

/* Сама форма внутри панели: без фона, отступов и тени карточек. */
html.kd-in-panel body, html.kd-in-panel #layout { background: var(--kd-surface) !important; }
html.kd-in-panel #layout { padding: 0 !important; column-gap: 0 !important; }
html.kd-in-panel #layout > div { height: 100% !important; }
html.kd-in-panel #layout-content, html.kd-in-panel #layout-sidebar {
  border-radius: 0 !important; box-shadow: none !important;
}
html.kd-in-panel #layout-sidebar {
  background: var(--kd-surface-2) !important;
  border-right: 1px solid var(--kd-line) !important;
  flex: 0 0 280px !important; max-width: 280px !important; min-width: 240px !important;
}
html.kd-in-panel #layout-sidebar > .header { background: transparent !important; border-bottom: 1px solid var(--kd-line) !important; height: 50px; min-height: 50px; line-height: 50px; }
html.kd-in-panel #layout-content > .header { height: 50px; min-height: 50px; line-height: 50px; }
html.kd-in-panel .kd-compose-wrap { display: none; }
/* Кнопка «Отправить» — главная и янтарная. */
html.kd-in-panel #layout-content .formbuttons button.send,
html.kd-in-panel #compose-content .formbuttons .btn-primary {
  min-width: 140px; height: 42px; font-size: 15px;
}