@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Sora:wght@400;500;600;700&display=swap");

/*
 * TopMail skin — безопасная тема.
 * Не трогаем display/position/flex у .popupmenu / тулбаров Elastic
 * (из‑за этого ломалась вёрстка).
 */

:root,
html,
html.dark-mode,
body {
  --tm-ink: #13212b;
  --tm-muted: #5b6b76;
  --tm-faint: #8a98a3;
  --tm-bg: #e9f0ec;
  --tm-surface: #ffffff;
  --tm-soft: #f4f7f5;
  --tm-line: #dde5e0;
  --tm-accent: #0f7a63;
  --tm-accent-deep: #0a5747;
  --tm-accent-soft: #e7f3ef;
  --tm-warm: #e8a24a;
  --tm-danger: #b42318;
  --tm-font: "Sora", "Segoe UI", system-ui, sans-serif;
  --tm-display: "Fraunces", Georgia, serif;
  --tm-r: 12px;

  --color-main: var(--tm-ink) !important;
  --color-link: var(--tm-accent) !important;
  --color-border: var(--tm-line) !important;
  --color-layout-background: var(--tm-bg) !important;
  --color-layout-sidebar-background: var(--tm-surface) !important;
  --color-layout-list-background: var(--tm-surface) !important;
  --color-layout-content-background: var(--tm-surface) !important;
  --color-layout-header-background: var(--tm-surface) !important;
  --color-layout-footer-background: var(--tm-soft) !important;
  --color-layout-border: var(--tm-line) !important;
  --color-taskmenu-background: var(--tm-surface) !important;
  --color-list-selected-background: var(--tm-accent-soft) !important;
  --color-list-selected: var(--tm-ink) !important;
  --color-list-hover-background: #f0f6f3 !important;
  --color-btn-primary-background: var(--tm-accent) !important;
  --color-btn-primary: #fff !important;
  --color-toolbar: var(--tm-ink) !important;
}

html,
html.dark-mode,
body,
html.dark-mode body {
  font-family: var(--tm-font) !important;
  color: var(--tm-ink) !important;
  background: var(--tm-bg) !important;
  color-scheme: light !important;
}

/* гасим dark-mode визуально, без ломки layout */
html.dark-mode #layout,
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .header,
html.dark-mode .footer,
html.dark-mode .content {
  background-color: var(--tm-surface) !important;
  color: var(--tm-ink) !important;
  filter: none !important;
}

/* ===== LOGIN ===== */
body.task-login,
body.task-login #layout,
body.task-login #layout-content {
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(15, 122, 99, 0.2), transparent 60%),
    radial-gradient(720px 420px at 92% 0%, rgba(232, 162, 74, 0.14), transparent 55%),
    linear-gradient(180deg, #eef5f1 0%, #f7f3ea 50%, #eef2f6 100%) !important;
  min-height: 100vh;
}

body.task-login #layout-content {
  display: grid !important;
  place-items: center !important;
  padding: 1.5rem !important;
}

body.task-login #login-form,
body.task-login .formcontent {
  width: min(400px, 100%) !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(19, 33, 43, 0.1) !important;
}

body.task-login #logo {
  display: none !important;
}

body.task-login #login-form::before {
  content: "TopMail";
  display: block;
  font-family: var(--tm-display);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tm-accent-deep);
  line-height: 1;
  margin-bottom: 0.35rem;
}

body.task-login #login-form::after {
  content: "Вход в почтовый ящик";
  display: block;
  color: var(--tm-muted);
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
}

body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"] {
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r) !important;
  padding: 0.85rem 0.95rem !important;
  background: #fff !important;
}

body.task-login input:focus {
  border-color: rgba(15, 122, 99, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(15, 122, 99, 0.12) !important;
}

.button.mainaction,
input.button.mainaction,
a.button.mainaction {
  background: var(--tm-accent) !important;
  border-color: var(--tm-accent) !important;
  color: #fff !important;
  border-radius: var(--tm-r) !important;
  font-weight: 600 !important;
}

.button.mainaction:hover {
  background: var(--tm-accent-deep) !important;
  border-color: var(--tm-accent-deep) !important;
}

/* ===== SHELL (только цвета/фон, без ломки flex Elastic) ===== */
#layout {
  background: var(--tm-bg) !important;
}

#layout > div {
  border-color: var(--tm-line) !important;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
  background: var(--tm-surface) !important;
  border-bottom-color: var(--tm-line) !important;
  box-shadow: none !important;
}

#layout-menu {
  background: var(--tm-surface) !important;
  border-right-color: var(--tm-line) !important;
}

#layout-sidebar,
#layout-list {
  background: var(--tm-surface) !important;
  border-right-color: var(--tm-line) !important;
}

#layout-content {
  background: var(--tm-soft) !important;
}

/* task menu */
#taskmenu a,
#layout-menu .special-buttons a {
  border-radius: 10px !important;
  color: var(--tm-ink) !important;
}

#taskmenu a:hover,
#layout-menu .special-buttons a:hover {
  background: var(--tm-accent-soft) !important;
  color: var(--tm-accent-deep) !important;
}

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

#taskmenu a.compose {
  background: var(--tm-accent) !important;
  color: #fff !important;
}

#taskmenu a.compose:hover {
  background: var(--tm-accent-deep) !important;
  color: #fff !important;
}

#layout-menu .special-buttons a.logout,
html.dark-mode #layout-menu .special-buttons a.logout {
  background: transparent !important;
  color: var(--tm-danger) !important;
}

#taskmenu a.theme,
#layout-menu a.theme,
#taskmenu a.about,
#layout-menu a.about {
  display: none !important;
}

/* folders */
#mailboxlist li a,
.folderlist li a {
  border-radius: 10px !important;
  color: var(--tm-ink) !important;
}

#mailboxlist li a:hover {
  background: var(--tm-soft) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > a:hover,
html.dark-mode #mailboxlist li.selected > a {
  background: var(--tm-accent-soft) !important;
  color: var(--tm-accent-deep) !important;
  font-weight: 600 !important;
}

.unreadcount,
#mailboxlist .unreadcount {
  background: var(--tm-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
}

/* search */
.searchbar input,
#quicksearchbox,
.searchbox input {
  border-radius: 10px !important;
  background: var(--tm-soft) !important;
  border-color: transparent !important;
  color: var(--tm-ink) !important;
}

.searchbar input:focus,
#quicksearchbox:focus {
  background: #fff !important;
  border-color: rgba(15, 122, 99, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(15, 122, 99, 0.1) !important;
}

/* toolbar buttons — только цвет, без размеров */
body.task-mail .header a.button,
body.task-mail .toolbar a {
  color: var(--tm-ink) !important;
  border-radius: 10px !important;
}

body.task-mail .header a.button:hover,
body.task-mail .toolbar a:hover {
  background: var(--tm-accent-soft) !important;
  color: var(--tm-accent-deep) !important;
}

/* message list */
.messagelist thead {
  display: none !important;
}

.messagelist tbody td {
  border-color: #eef2ef !important;
  background: transparent !important;
}

.messagelist tr.message:hover td {
  background: #f3f8f5 !important;
}

.messagelist tr.selected td,
html.dark-mode .messagelist tr.selected td {
  background: var(--tm-accent-soft) !important;
}

.messagelist tr.unread td.fromto,
.messagelist tr.unread td.subject a {
  font-weight: 700 !important;
  color: var(--tm-ink) !important;
}

.messagelist tr.unread {
  box-shadow: inset 3px 0 0 var(--tm-accent);
}

.messagelist td.fromto {
  font-weight: 600 !important;
  color: var(--tm-ink) !important;
}

.messagelist td.subject a {
  color: var(--tm-muted) !important;
}

.messagelist tr.unread td.subject a {
  color: var(--tm-ink) !important;
}

.messagelist td.date {
  color: var(--tm-faint) !important;
  font-size: 0.75rem !important;
}

.messagelist td.size {
  display: none !important;
}

#layout-list > .footer,
.boxfooter {
  background: var(--tm-soft) !important;
  border-top-color: var(--tm-line) !important;
  color: var(--tm-muted) !important;
}

/* reading pane */
#messageheader,
.messageheader {
  background: var(--tm-surface) !important;
  border-bottom-color: var(--tm-line) !important;
}

#messageheader .subject,
.messageheader .subject {
  font-family: var(--tm-font) !important;
  color: var(--tm-ink) !important;
}

/* ===== POPUPS: только косметика, Elastic сам позиционирует ===== */
.popupmenu,
.popover,
.ui-dialog {
  background: #fff !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r) !important;
  box-shadow: 0 14px 36px rgba(19, 33, 43, 0.14) !important;
  color: var(--tm-ink) !important;
}

.popupmenu a:hover,
.popover a:hover {
  background: var(--tm-accent-soft) !important;
  color: var(--tm-accent-deep) !important;
}

input,
select,
textarea,
.form-control {
  border-radius: 10px !important;
  border-color: var(--tm-line) !important;
  font-family: var(--tm-font) !important;
}

.attachmentslist li {
  border-radius: 10px !important;
  border-color: var(--tm-line) !important;
  background: var(--tm-soft) !important;
}