/* ══════════════════════════════════════════════════════════════════════
   mail.specvlvm.com — облик Init*
   Слой поверх разметки elastic: своя палитра, своя семья радиусов,
   свой шрифт и свой вход. Чужая бирюзово-фиолетовая тема не должна
   проступать нигде.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --i-base:      #0B1020;
  --i-surface:   #141A28;
  --i-surface-2: #1A2133;
  --i-hover:     #1D2436;
  --i-active:    #232B40;
  --i-line:      #26304A;
  --i-line-soft: #202940;

  --i-text:      #DDE2F0;
  --i-text-hi:   #FFFFFF;
  --i-muted:     #7E88A3;
  --i-subtle:    #A9C6F0;

  --i-brand:     #2559E8;   /* почта — синий */
  --i-brand-hi:  #4FB2FF;
  --i-cyan:      #35CFFF;
  --i-good:      #4FE39A;
  --i-warn:      #F2D1A0;
  --i-crit:      #F4A9A9;

  --i-r-sm: 8px;
  --i-r-md: 12px;
  --i-r-lg: 18px;
  --i-font: "Inter", "Inter Variable", -apple-system, "Segoe UI", system-ui,
            "Noto Sans", sans-serif;
}

html, body,
input, textarea, select, button,
.propform, .listing, .toolbar, #messagelist {
  font-family: var(--i-font) !important;
}

body {
  background: var(--i-base) !important;
  color: var(--i-text);
  letter-spacing: -0.005em;
}

/* ── общее поле приложения ────────────────────────────────────────── */
#layout, #layout > div { background: transparent; }

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--i-base);
  border-color: var(--i-line-soft) !important;
}

#layout-sidebar, #layout-list { border-inline-end: 1px solid var(--i-line-soft); }

/* ── шапки колонок ────────────────────────────────────────────────── */
#layout .header,
#layout > div > .header,
.ui-dialog .ui-dialog-titlebar {
  background: var(--i-base) !important;
  border-bottom: 1px solid var(--i-line-soft) !important;
  color: var(--i-text-hi);
  height: 56px;
  line-height: 56px;
}

#layout .header .header-title {
  color: var(--i-text-hi);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
}

/* ── левая полоса задач ───────────────────────────────────────────── */
#layout-menu { background: #080D1A; border-inline-end: 1px solid var(--i-line-soft); }

#taskmenu a {
  color: var(--i-muted);
  border-radius: var(--i-r-md);
  margin: 4px 6px;
  transition: background-color .14s ease, color .14s ease;
}

#taskmenu a:hover { background: var(--i-hover); color: var(--i-text); }

#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: #2559E826;
  color: var(--i-brand-hi);
}

#taskmenu a.selected::before,
#taskmenu a.selected::after { background: transparent !important; }

#taskmenu a.logout { color: var(--i-crit); }

/* знак в углу полосы задач */
#taskmenu::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 12px auto 14px;
  background: url("../images/mark.svg") center / contain no-repeat;
  opacity: .95;
}

/* ── списки: папки и письма ──────────────────────────────────────── */
.listing li > a,
.listing tr > td {
  color: var(--i-text);
  border-radius: var(--i-r-sm);
}

.listing li.selected > a,
.listing tr.selected > td {
  background: #2559E82E !important;
  color: var(--i-text-hi) !important;
}

.listing li > a:hover,
.listing tr:hover > td { background: var(--i-hover); }

.folderlist li a { font-weight: 500; }
.folderlist li.unread > a { color: var(--i-text-hi); }

.listing li .unreadcount,
.folderlist .unreadcount {
  background: var(--i-brand);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  padding: 1px 8px;
}

/* ── список писем ─────────────────────────────────────────────────── */
#messagelist { border-collapse: separate; border-spacing: 0; }

#messagelist tr { border-bottom: 1px solid var(--i-line-soft); }
#messagelist tr td { padding-block: 12px; }

#messagelist tr.unread td.subject,
#messagelist tr.unread td.fromto { color: var(--i-text-hi); font-weight: 600; }

#messagelist td.subject .date,
#messagelist td.subject .fromto,
#messagelist .msgicon,
.message-part .date { color: var(--i-muted); }

#messagelist tr.selected td { background: #2559E82E !important; }
#messagelist tr.focused td { box-shadow: inset 2px 0 0 var(--i-brand-hi); }
#messagelist tr.flagged td.subject { color: var(--i-warn); }

/* ── кнопки и панель инструментов ────────────────────────────────── */
.toolbar a.button,
a.button, button.button, .ui.button {
  border-radius: var(--i-r-sm);
  color: var(--i-text);
  font-weight: 500;
}

.toolbar a.button:hover, a.button:hover { background: var(--i-hover); color: var(--i-text-hi); }
.toolbar a.button.disabled, a.button.disabled { color: #4A5474; }

button.btn-primary, .btn-primary, a.button.btn-primary,
button.mail.compose, a.button.compose {
  background: var(--i-brand) !important;
  border-color: var(--i-brand) !important;
  color: #fff !important;
  border-radius: var(--i-r-sm);
  font-weight: 600;
}

button.btn-primary:hover, .btn-primary:hover { background: var(--i-brand-hi) !important; }

button.btn-secondary, .btn-secondary {
  background: var(--i-surface-2) !important;
  border: 1px solid var(--i-line) !important;
  color: var(--i-text) !important;
  border-radius: var(--i-r-sm);
}

/* кнопка «написать» — главная в почте */
#layout-list .header a.button.create,
a.button.create, .floating-action-buttons a.button {
  background: var(--i-brand);
  color: #fff;
  border-radius: var(--i-r-md);
}

/* ── поля ввода ───────────────────────────────────────────────────── */
input, textarea, select,
.form-control, .propform input, .propform textarea {
  background: #10162A !important;
  border: 1px solid var(--i-line) !important;
  border-radius: var(--i-r-sm) !important;
  color: var(--i-text) !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--i-brand-hi) !important;
  box-shadow: 0 0 0 3px #2559E833 !important;
  outline: none !important;
}

::placeholder { color: var(--i-muted) !important; }

/* ── письмо ───────────────────────────────────────────────────────── */
#messageheader, .message-part, #messagebody {
  background: var(--i-base);
  color: var(--i-text);
}

#messageheader { border-bottom: 1px solid var(--i-line-soft); }
#messageheader .subject { color: var(--i-text-hi); font-weight: 700; letter-spacing: -0.01em; }
#messagebody { font-size: 15px; line-height: 1.65; }
#messagebody a, a { color: var(--i-cyan); }
a:hover { color: #7FE3FF; }

/* ── всплывающие меню и диалоги ──────────────────────────────────── */
.popover, .ui-dialog, .ui-menu, .popupmenu {
  background: var(--i-surface) !important;
  border: 1px solid var(--i-line) !important;
  border-radius: var(--i-r-md) !important;
  box-shadow: 0 24px 60px #04081399 !important;
}

.popover .listing li > a:hover, .ui-menu li:hover { background: var(--i-hover); }

/* ── вход ─────────────────────────────────────────────────────────── */
body.task-login { background: var(--i-base); }

.init-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(760px 480px at 50% 26%, #2559E840 0%, transparent 70%),
    radial-gradient(560px 420px at 82% 76%, #35CFFF1C 0%, transparent 72%),
    var(--i-base);
}

.init-card {
  width: 100%;
  max-width: 420px;
  background: #141A28CC;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  padding: 36px 34px 30px;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 70px #04081377;
  text-align: center;
}

.init-card #logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 12px 28px #2559E855);
}

.init-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--i-text-hi);
}

.init-sub {
  margin: 6px 0 26px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--i-muted);
}

.init-card #login-form { text-align: start; }

.init-card #login-form td.title,
.init-card #login-form label {
  color: var(--i-muted);
  font-size: 13px;
  font-weight: 500;
}

.init-card #login-form input {
  width: 100%;
  padding: 11px 14px !important;
  font-size: 15px;
  margin-bottom: 14px;
}

.init-card #login-form .formbuttons,
.init-card #login-form button[type="submit"],
.init-card #login-form input[type="submit"] {
  width: 100%;
}

.init-card #login-form button[type="submit"],
.init-card #login-form input[type="submit"] {
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--i-brand);
  border: 0;
  border-radius: var(--i-r-sm);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.init-card #login-form button[type="submit"]:hover { background: var(--i-brand-hi); }

.init-card #login-footer { margin-top: 18px; color: var(--i-muted); font-size: 12px; }

/* ── полоса прокрутки ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--i-active); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }