/* FENIBS Outreach — Bundled Stylesheet (адаптировано из CRM v5.0) */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --fenibs-dark:    #0A4F7E;
  --fenibs-blue:    #5A9BC4;
  --fenibs-teal:    #5FB8C0;
  --fenibs-navy:    #4A6AAE;
  --fenibs-coral:   #F47D89;
  --fenibs-orange:  #FF9A7D;
  --fenibs-green:   #72D494;

  --canvas:          #0B100E;
  --canvas-deep:     #080D0B;
  --surface:         #141C18;
  --surface-raised:  #1A2420;
  --surface-sunken:  #101714;

  --accent:         #5FB8C0;
  --accent-deep:    #4DA3AB;
  --accent-light:   #7ECDD4;
  --accent-subtle:  rgba(95,184,192,0.12);
  --accent-muted:   rgba(95,184,192,0.20);

  --secondary:        #5A9BC4;
  --secondary-deep:   #4A88B3;
  --secondary-subtle: rgba(90,155,196,0.12);

  --warm:        #F47D89;
  --warm-deep:   #E06A77;
  --warm-subtle: rgba(244,125,137,0.12);

  --success:        #72D494;
  --success-subtle: rgba(114,212,148,0.14);
  --warning:        #EAA832;
  --warning-subtle: rgba(234,168,50,0.14);
  --error:          #E85C5C;
  --error-subtle:   rgba(232,92,92,0.14);
  --info:           #5A9BC4;
  --info-subtle:    rgba(90,155,196,0.14);

  --text-primary:    #E8F0EC;
  --text-secondary:  #9AABA2;
  --text-tertiary:   #647870;
  --text-quaternary: #3D4E46;
  --text-inverse:    #0B100E;

  --border:        rgba(232,240,236,0.06);
  --border-strong: rgba(232,240,236,0.12);
  --border-accent: rgba(95,184,192,0.25);

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 9999px;

  --sh-xs:    0 1px 2px rgba(0,0,0,0.20);
  --sh-sm:    0 2px 8px rgba(0,0,0,0.25);
  --sh-md:    0 4px 20px rgba(0,0,0,0.30);
  --sh-lg:    0 8px 40px rgba(0,0,0,0.35);
  --sh-teal:  0 4px 24px rgba(95,184,192,0.25);

  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  --glow-accent: 0 0 20px rgba(95,184,192,0.15), 0 0 40px rgba(95,184,192,0.05);

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  --sidebar-width: 240px;
  --topbar-height: 56px;

  /* Тема для НАТИВНЫХ контролов браузера (иконка календаря в date-input, базовый
     вид radio/checkbox, скроллбары, спиннеры number, автозаполнение). Без этого
     браузер рисует их в light по умолчанию → на тёмной теме иконка календаря
     чёрная (невидима), а radio с чужой светлой окантовкой. Значение должно совпадать
     с активной темой; каскад такой же, как у токенов (:root = dark, ниже light). */
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;

  --canvas:         #F5F8F6;
  --canvas-deep:    #EDF1EE;
  --surface:        #FFFFFF;
  --surface-raised: #F9FBF9;
  --surface-sunken: #EDF1EE;

  --text-primary:    #0D1A12;
  --text-secondary:  #4E6357;
  --text-tertiary:   #7A9187;
  --text-quaternary: #A8BDB5;
  --text-inverse:    #FFFFFF;

  --border:        rgba(13,26,18,0.08);
  --border-strong: rgba(13,26,18,0.16);

  --sh-xs:  0 1px 2px rgba(0,0,0,0.06);
  --sh-sm:  0 2px 8px rgba(0,0,0,0.08);
  --sh-md:  0 4px 20px rgba(0,0,0,0.10);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.12);
}

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  background: var(--canvas);
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
code, pre { font-family: var(--mono); }
hr { border: none; border-top: 1px solid var(--border); }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-accent     { color: var(--accent); }
.text-success    { color: var(--success); }
.text-warning    { color: var(--warning); }
.text-error      { color: var(--error); }

.mono { font-family: var(--mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   APP SHELL
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  /* Высота = вьюпорт: контент скроллится внутри .app-main, а сайдбар/топбар
     остаются на месте (футер «Выйти» всегда внизу экрана, как в CRM).
     min-height растягивал бы грид по высоте контента → футер уезжал вниз. */
  height: 100vh;
  transition: grid-template-columns var(--dur-3) var(--ease);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 64px 1fr;
}

.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.app-topbar__title { font-size: var(--text-md); font-weight: 600; }
.app-topbar__user  { color: var(--text-secondary); font-size: var(--text-sm); }

/* ── Правый кластер топбара: уведомления / тема / профиль ── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Аватар / профиль — 36×36 с рамкой, как иконочные кнопки (радиус как в CRM) */
.topbar-user {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.topbar-user:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
  text-decoration: none;
}

/* Переключение иконок темы: солнце в тёмной, луна в светлой */
.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

.app-sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Логотип ── */
.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  min-height: var(--topbar-height);
  border-bottom: 1px solid var(--border);
}
.sidebar-logo:hover { text-decoration: none; }
.sidebar-logo-full  { height: 32px; width: auto; }
.sidebar-logo-short { display: none; height: 32px; width: auto; }

.app-sidebar.collapsed .sidebar-logo { justify-content: center; padding: 0; }
.app-sidebar.collapsed .sidebar-logo-full  { display: none; }
.app-sidebar.collapsed .sidebar-logo-short { display: block; }

/* ── Навигация ── */
.sidebar-nav {
  flex: 1;
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sidebar-nav-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-3) var(--sp-2);
}

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item-label { white-space: nowrap; overflow: hidden; }

/* ── Кнопка сворачивания ── */
.sidebar-toggle-btn {
  background: none;
  color: var(--text-tertiary);
}
.sidebar-toggle-icon { flex-shrink: 0; transition: transform var(--dur-3) var(--ease); }

/* ── Футер ── */
.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.nav-item-danger { color: var(--text-tertiary); }
.nav-item-danger:hover { background: var(--error-subtle); color: var(--error); }

/* ── Свёрнутое состояние ── */
.app-sidebar.collapsed { overflow: visible; }

.app-sidebar.collapsed .sidebar-nav-divider { display: none; }

/* В свёрнутом виде заголовки секций схлопываются в разделители (как в CRM) —
   иначе иконки разных секций слипаются без визуальной границы. */
.app-sidebar.collapsed .sidebar-section-label {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2);
  padding: 0;
  font-size: 0;
  overflow: hidden;
}

.app-sidebar.collapsed .sidebar-nav,
.app-sidebar.collapsed .sidebar-footer { padding-left: var(--sp-2); padding-right: var(--sp-2); }

.app-sidebar.collapsed .nav-item {
  justify-content: center;
  padding: var(--sp-2);
  position: relative;
  overflow: visible;
}
.app-sidebar.collapsed .sidebar-toggle-icon { transform: rotate(180deg); }

/* Тултипы при наведении в свёрнутом состоянии */
.app-sidebar.collapsed .nav-item .nav-item-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
  z-index: 300;
  box-shadow: var(--sh-md);
}
.app-sidebar.collapsed .nav-item:hover .nav-item-label { opacity: 1; }

/* Кнопка сворачивания тултип не показывает */
.app-sidebar.collapsed .sidebar-toggle-btn .nav-item-label { display: none; }

.app-main {
  grid-area: main;
  padding: var(--sp-6) var(--sp-8);
  overflow-y: auto;
  min-height: 0; /* позволяет .app-main скроллиться внутри грид-ячейки */
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.page-title    { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
.page-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--sp-1); }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.card-raised { background: var(--surface-raised); box-shadow: var(--sh-sm); }
.card-title  { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--sp-3); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-1) var(--ease);
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: var(--grad-accent); color: var(--text-inverse); box-shadow: var(--sh-teal); }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(95,184,192,0.4), var(--glow-accent); }

.btn-secondary { background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-subtle); }

.btn-danger    { background: var(--error-subtle); color: var(--error); border: 1px solid rgba(232,92,92,0.2); }
.btn-danger:hover { background: var(--error); color: #fff; }

.btn-ghost     { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text-primary); background: var(--surface-raised); }

.btn-sm { height: 32px; padding: 5px 12px; font-size: var(--text-xs); }

/* Квадратная иконочная кнопка 36×36 (колокольчик, тема); рамка — от .btn-ghost */
.btn-icon { width: 36px; height: 36px; padding: 8px; flex-shrink: 0; }

/* Иконочная кнопка для строк таблицы / карточек — 36×36 как в CRM */
.btn-icon-sm { width: 36px; height: 36px; padding: 8px; flex-shrink: 0; justify-content: center; }

/* ============================================================
   FORMS
   ============================================================ */

.form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.form-label.required::after { content: ' *'; color: var(--error); }

/* Строка «label слева, ссылка справа» (логин: label «Пароль» + «Забыли пароль?»). */
.form-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.form-label-row a { font-size: var(--text-sm); }

.form-control {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  outline: none;
}

.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle), var(--glow-accent); }
.form-control::placeholder { color: var(--text-tertiary); }

/* Кастомная валидация обязательных полей: красная обводка + шейк вместо
   нативного попапа браузера. Класс .is-invalid/.shake вешает form_validation.js
   на submit пустого required-поля (или его видимую обёртку — .doc-upload-zone
   для скрытого file-input). */
.form-control.is-invalid,
.doc-upload-zone.is-invalid { border-color: var(--error); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--error-subtle); }

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake { animation: field-shake 0.4s var(--ease); }

textarea.form-control { height: auto; min-height: 140px; padding: var(--sp-3) var(--sp-4); font-family: var(--mono); resize: vertical; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AABA2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Стрелка селекта подхватывает цвет темы: в SVG-data-URI нельзя использовать
   var(), поэтому на светлой теме переопределяем chevron на светлый --text-secondary
   (#4E6357) вместо тёмного #9AABA2 — иначе стрелка не адаптируется под тему. */
[data-theme="light"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6357' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Компактный инпут/селект для строки фильтров */
.form-control-sm { height: 32px; padding: 0 10px; font-size: var(--text-xs); }
select.form-control-sm { padding-right: 30px; background-position: right 10px center; }

.form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ============================================================
   TABLES
   ============================================================ */

/* Таблицы — значения портированы из CRM (источник правды по дизайну) */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.table thead th {
  padding: 10px 16px;
  background: var(--surface-raised);
  color: var(--text-tertiary);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap; position: relative;
}

/* Акцентная градиентная полоса слева у первой колонки шапки */
.table thead th:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--grad-accent);
  border-radius: 0 2px 2px 0;
}

.table tbody td { padding: 12px 16px; color: var(--text-primary); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover { background: var(--accent-subtle); }
.table tbody tr:nth-child(even) { background: rgba(95,184,192,0.02); }
.table tbody tr:nth-child(even):hover { background: var(--accent-subtle); }

/* Обёртка таблицы — рамка + радиус + тень на ховере (как в CRM) */
.table-container {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--dur-2) var(--ease);
}
.table-container:hover { box-shadow: var(--sh-sm); }

/* Сырая таблица (вкладка «Загружено») — колонки берут естественную ширину и не
   переносятся, поэтому при большом числе колонок таблица шире контейнера и
   .table-container даёт горизонтальный скролл. Точечно, не трогая глобальный .table. */
.table--nowrap th, .table--nowrap td { white-space: nowrap; }

/* Колонка «№» (и любая ячейка с .text-tertiary): глобальный .table tbody td задаёт
   --text-primary и перебивает класс по специфичности — поднимаем специфичность,
   чтобы порядковый номер был серым. */
.table tbody td.text-tertiary { color: var(--text-tertiary); }

/* Колонка действий — выровнена вправо, кнопки видны всегда (как в CRM) */
.table-actions { text-align: right; white-space: nowrap; }

/* Строка-ссылка: вся строка кликабельна (например, /imports). */
.table tbody tr.clickable-row { cursor: pointer; }

/* ── Статус ответа (/replies): чип + дропдаун, модель как на CRM-странице задач ── */
.reply-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
}
.reply-status-dropdown {
  z-index: 9999; min-width: 210px; padding: var(--sp-1);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
}
.reply-status-option {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: none; background: none; cursor: pointer;
  border-radius: var(--r-sm); font-size: var(--text-sm);
  color: var(--text-primary); text-align: left; white-space: nowrap;
}
.reply-status-option:hover { background: var(--surface-sunken); }

/* Строка-состояние: card_created → серая+зачёркнута, irrelevant → просто серая. */
.table tbody tr.reply-done,
.table tbody tr.reply-irrelevant { opacity: 0.55; }
.table tbody tr.reply-done:hover,
.table tbody tr.reply-irrelevant:hover { opacity: 0.8; }
.table tbody tr.reply-done td:not(.no-strike) {
  text-decoration: line-through; color: var(--text-tertiary);
}

/* Табы (Stimulus tabs_controller): подчёркнутая ленточка под активной кнопкой. */
.tabs-nav {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.tabs-nav .tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: transparent; border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tabs-nav .tab-btn:hover { color: var(--text-primary); }
.tabs-nav .tab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs-nav .tab-btn .tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--surface-raised);
  color: var(--text-tertiary);
  font-size: 11px; font-weight: 600;
}
.tabs-nav .tab-btn.is-active .tab-count {
  background: var(--accent-subtle); color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Палитра цветов (радио-чипы): /settings/segments — выбор цвета бейджа. */
.color-palette { display: flex; flex-wrap: wrap; gap: 10px; }
.color-chip { position: relative; display: inline-flex; cursor: pointer; }
.color-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.color-chip-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--chip);
  border: 2px solid transparent;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.color-chip:hover .color-chip-dot { transform: scale(1.08); }
.color-chip input:checked + .color-chip-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--chip);
}
.color-chip input:focus-visible + .color-chip-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* Иконочные действия в строках таблицы — узкая горизонтальная группа. */
.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.row-actions form { margin: 0; }
.row-actions .btn-icon-sm { padding: 0; }
.row-actions svg { width: 16px; height: 16px; }

/* Сверка колонок импорта (/imports/:id/mapping) — повёрнутая таблица:
   заголовки сверху, селект под каждым, ниже — превью первых строк файла.
   Каждая колонка ≥220px (длиннейший пункт селекта — «→ в переменные письма»);
   если колонок больше, чем влезает — таблица скроллится внутри .mapping-grid. */
.mapping-grid { overflow-x: auto; max-width: 100%; }
.mapping-table { width: auto; border-collapse: collapse; }
.mapping-table thead th,
.mapping-table tbody td { min-width: 220px; width: 220px; }
.mapping-table thead th { white-space: nowrap; }
.mapping-table .mapping-selects td { padding: 10px 12px; background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.mapping-table .mapping-selects td .form-control { width: 100%; }
.mapping-table .mapping-preview-row td { background: var(--surface); white-space: normal; word-break: break-word; }
.mapping-table .mapping-preview-row:nth-child(even) td { background: rgba(95,184,192,0.02); }
.mapping-table .mapping-preview-row td:first-child,
.mapping-table .mapping-selects td:first-child { border-left: none; }

/* Лёгкий dropdown-меню для иконочной кнопки (триггер + .menu-popup рядом).
   Открытие/закрытие — на data-controller="menu" (см. menu_controller.js). */
.menu { position: relative; display: inline-block; }
.menu-popup {
  position: fixed; left: -9999px; top: 0; z-index: 1100;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md, 0 12px 32px rgba(0,0,0,0.16));
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.menu.is-open .menu-popup { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
.menu-item, .menu-item:hover, .menu-item:focus, .menu-item:active { text-decoration: none; }
.menu-item:hover { background: var(--accent-subtle); }

/* «Карточки выбора» в модалке удаления базы — два варианта в столбик. */
.delete-choice { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-4); }
.delete-choice .row-action-form { margin: 0; }
.delete-choice-btn {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.delete-choice-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.delete-choice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.delete-choice-btn--danger:hover {
  border-color: var(--error);
  background: var(--error-subtle);
  color: var(--error);
}
.delete-choice-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.delete-choice-btn--danger .delete-choice-icon { color: var(--error); background: var(--error-subtle); }
.delete-choice-title { display: block; font-size: var(--text-sm); font-weight: 600; }
.delete-choice-hint  { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.delete-choice-btn--danger:hover .delete-choice-hint { color: var(--error); opacity: 0.75; }
.menu-item .menu-item-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.menu-item .menu-item-icon svg { width: 16px; height: 16px; }
.menu-item-title { font-size: var(--text-sm); font-weight: 500; }
.menu-item-hint  { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }

/* Drop-zone для загрузки файлов (портировано из CRM companies → documents tab). */
.doc-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.doc-upload-zone:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.doc-upload-zone--drag {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.doc-upload-zone--has-file {
  border-color: var(--success);
  border-style: solid;
  background: var(--surface);
}
.doc-upload-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.doc-upload-zone--has-file .doc-upload-icon {
  background: var(--success-subtle);
  color: var(--success);
}
.doc-upload-filename {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-primary);
}
.doc-upload-details {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.doc-upload-zone--has-file .doc-upload-icon svg { stroke: var(--success); }

/* ============================================================
   ВИЗУАЛЬНЫЙ РЕДАКТОР ШАБЛОНА (contenteditable) + чипы переменных
   ============================================================ */

/* Чипы переменных — клик вставляет {{...}} в активное поле. */
.variable-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.variable-chip {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.variable-chip:hover { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
.variable-chip--custom { border-style: dashed; }

/* Обёртка редактора: тулбар + контент в одной рамке. */
.rich-editor {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.rich-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.rich-toolbar-btn {
  min-width: 30px; height: 30px;
  padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rich-toolbar-btn:hover { background: var(--accent-subtle); border-color: var(--border-strong); color: var(--text-primary); }
.rich-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.rich-link-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.rich-link-row .form-control-sm { flex: 1; }

.rich-editor-content {
  min-height: 220px;
  max-height: 420px;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.6;
  outline: none;
}
.rich-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle), var(--glow-accent); }
.rich-editor-content p { margin: 0 0 var(--sp-3); }
.rich-editor-content ul, .rich-editor-content ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.rich-editor-content a { color: var(--accent); text-decoration: underline; }
.rich-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
}

/* Список вложений (существующие в edit + только что выбранные) — карточки файлов.
   :empty схлопывает пустой список, чтобы второй (existing/picked) не добавлял
   фантомный отступ над видимым файлом. */
.attachment-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.attachment-list:empty { display: none; }
.attachment-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.attachment-item:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.attachment-icon {
  flex: none; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent-subtle); color: var(--accent);
}
.attachment-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attachment-name { color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: var(--text-tertiary); font-size: var(--text-xs); }
.attachment-remove {
  flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-tertiary);
  font-size: var(--text-sm); line-height: 1; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.attachment-remove:hover { background: var(--error-subtle); color: var(--error); }

/* Сырой HTML под шевроном — «для разработчиков». */
details.advanced-html { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
details.advanced-html > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  user-select: none;
}
details.advanced-html > summary::-webkit-details-marker { display: none; }
details.advanced-html > summary::before {
  content: "›";
  display: inline-block;
  font-size: var(--text-base);
  transition: transform var(--dur-1) var(--ease);
}
details.advanced-html[open] > summary::before { transform: rotate(90deg); }
details.advanced-html > summary:hover { color: var(--text-primary); }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
}
.modal-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); padding: 4px;
}
.modal-close:hover { color: var(--text-primary); }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-accent  { background: var(--accent-subtle); color: var(--accent); }
.badge-success { background: var(--success-subtle); color: var(--success); }
.badge-warning { background: var(--warning-subtle); color: var(--warning); }
.badge-error   { background: var(--error-subtle); color: var(--error); }
.badge-info    { background: var(--info-subtle); color: var(--info); }
.badge-muted   { background: var(--surface-raised); color: var(--text-secondary); }

/* Флажок «ответил» в таблице отправок — НЕ пилюля (чтобы не путать с badge-success
   «Отправлено»): контурная check-circle + зелёный текст. */
.reply-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.reply-flag svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================================================
   FLASH
   ============================================================ */

.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 500;
}

.flash-notice  { background: var(--success-subtle); color: var(--success); }
.flash-alert   { background: var(--error-subtle); color: var(--error); }
.flash-warning { background: var(--warning-subtle); color: var(--warning); }

/* ============================================================
   AUTH
   ============================================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--canvas);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(95,184,192,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(90,155,196,0.06) 0%, transparent 50%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--sp-10) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.auth-brand {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--sp-2);
  text-align: center;
  letter-spacing: -0.02em;
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.auth-logo img {
  height: 48px;
  display: block;
  margin: 0 auto;
}

.auth-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--sp-1);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--sp-8);
}

.auth-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.auth-check input { accent-color: var(--accent); }
.auth-check label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.auth-links {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.auth-links a { font-size: var(--text-sm); }

/* ============================================================
   STATS GRID
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.stat-card {
  position: relative;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Цветной маркер слева — 3px полоса; цвет задаётся модификатором. */
.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-strong);
  transition: width var(--dur-1) var(--ease);
}
.stat-card:hover::before { width: 5px; }

.stat-card__label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-2); }
.stat-card__value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.stat-card__hint  { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--sp-2); }

/* Маленькая «фишка» с иконкой в правом верхнем углу — диаметр 32px. */
.stat-card__icon {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-raised);
  color: var(--text-tertiary);
}
.stat-card__icon svg { width: 16px; height: 16px; }

/* Цветовые модификаторы: полоса, число и иконка-кружок одного оттенка. */
.stat-card--info::before     { background: var(--info); }
.stat-card--info .stat-card__icon  { background: var(--info-subtle); color: var(--info); }

.stat-card--success::before  { background: var(--success); }
.stat-card--success .stat-card__value { color: var(--success); }
.stat-card--success .stat-card__icon  { background: var(--success-subtle); color: var(--success); }

.stat-card--warning::before  { background: var(--warning); }
.stat-card--warning .stat-card__value { color: var(--warning); }
.stat-card--warning .stat-card__icon  { background: var(--warning-subtle); color: var(--warning); }

.stat-card--accent::before   { background: var(--accent); }
.stat-card--accent .stat-card__icon { background: var(--accent-subtle); color: var(--accent); }

/* ============================================================
   UTILITIES
   ============================================================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

/* ============================================================
   MOBILE GATE — viewport < 960px (только десктоп)
   ============================================================ */

.mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--canvas);
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

.mobile-gate__card {
  text-align: center;
  max-width: 380px;
}

.mobile-gate__icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  margin: 0 auto var(--sp-6);
  display: block;
}

.mobile-gate__title {
  font-family: var(--font);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--sp-3);
}

.mobile-gate__text {
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
}

.mobile-gate__url {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--accent);
  background: var(--accent-subtle);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
}

@media (max-width: 959px) {
  .mobile-gate {
    display: flex;
  }
  body > *:not(.mobile-gate) {
    display: none !important;
  }
  body > .mobile-gate {
    display: flex !important;
  }
}

/* ============================================================
   AUTOCOMPLETE (портировано из CRM, токены outreach)
   ============================================================ */
.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  overflow: hidden;
}

.autocomplete-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }

.autocomplete-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background 0.1s;
}

.autocomplete-item:hover { background: var(--surface-raised); }
.autocomplete-name { font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.autocomplete-uid  { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--mono); }

/* ============================================================
   МУЛЬТИСЕЛЕКТ БАЗ (форма кампании, import_multiselect_controller)
   Попап — position:fixed (координаты ставит JS), иначе его обрежет
   overflow-y:auto у .card модалки; z-index выше .modal-overlay (1000).
   ============================================================ */
.import-multiselect-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); width: 100%; text-align: left; cursor: pointer;
}
.import-multiselect-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.import-multiselect-trigger .is-placeholder { color: var(--text-tertiary); }
.import-multiselect-trigger svg { flex-shrink: 0; color: var(--text-tertiary); }

.import-multiselect-popup {
  position: fixed; z-index: 1100;
  display: flex; flex-direction: column;
  max-height: 380px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  overflow: hidden;
  padding: 0;
}

.import-multiselect-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.import-multiselect-close {
  flex: none; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.import-multiselect-close:hover { background: var(--surface-raised); color: var(--text-primary); }

.import-multiselect-list { overflow-y: auto; padding: var(--sp-2); }

.import-option {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer; user-select: none;
  transition: background var(--dur-1) var(--ease);
}
.import-option:hover { background: var(--surface-raised); }
.import-option.is-locked { opacity: 0.45; pointer-events: none; }
.import-option.is-locked input[type=checkbox] { cursor: not-allowed; }

.import-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.import-option-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.import-option-meta { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Кастомный чекбокс строки (вместо нативного): рамка → бирюзовая заливка с галкой */
.import-option input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  background: var(--surface); cursor: pointer; position: relative;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.import-option:hover input[type=checkbox]:not(:checked) { border-color: var(--accent); }
.import-option input[type=checkbox]:checked {
  background: var(--accent); border-color: var(--accent);
}
.import-option input[type=checkbox]:checked::after {
  content: ""; position: absolute;
  left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.import-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.import-chips:empty { display: none; }
.import-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface-raised);
  font-size: var(--text-xs); color: var(--text-secondary);
}
.import-chip-remove {
  border: none; background: transparent; color: var(--text-tertiary);
  cursor: pointer; font-size: 11px; line-height: 1;
  padding: 2px 3px; border-radius: var(--r-xs);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.import-chip-remove:hover { color: var(--error); background: var(--error-subtle); }

/* ============================================================
   EMPTY STATE (портировано из CRM)
   ============================================================ */
.empty-state { text-align: center; padding: var(--sp-16) var(--sp-8); color: var(--text-secondary); }
.empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.empty-state-desc  { font-size: var(--text-sm); color: var(--text-secondary); }
.empty-state svg { width: 40px; height: 40px; color: var(--text-tertiary); opacity: 0.6; margin: 0 auto var(--sp-3); }
.empty-state p { margin: 0; }
.empty-state p + p { margin-top: var(--sp-1); }

/* ============================================================
   CONTACT CARD (/contacts/:id)
   ============================================================ */
.contact-hero { display: flex; align-items: center; gap: var(--sp-4); }
.contact-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-lg); flex-shrink: 0;
}
.contact-avatar--p1 { background: var(--success-subtle); color: var(--success); }
.contact-avatar--p2 { background: var(--info-subtle); color: var(--info); }
.contact-avatar--p3 { background: var(--surface-raised); color: var(--text-tertiary); }

/* Полоса с email и быстрыми действиями */
.contact-emailbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.contact-emailbar__icon { width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.contact-emailbar__addr { font-size: var(--text-base); color: var(--text-primary); }
.contact-emailbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* Две колонки: Информация | Активность */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

/* Key-value список в карточке «Информация» */
.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row__label { width: 120px; flex-shrink: 0; color: var(--text-tertiary); font-size: var(--text-sm); padding-top: 2px; }
.info-row__value { color: var(--text-primary); min-width: 0; word-break: break-word; }
.contact-link { color: var(--accent); text-decoration: none; }
.contact-link:hover { text-decoration: underline; }

/* Доп-поля из импорта (variables) — чипы */
.var-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.var-chip {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--text-sm);
}
.var-chip b { color: var(--text-tertiary); font-weight: 500; margin-right: 4px; }

/* Лента активности рассылки */
.activity-item {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.activity-item:last-child { margin-bottom: 0; }
.activity-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.activity-events { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.activity-event { font-size: var(--text-sm); color: var(--text-secondary); display: flex; align-items: center; gap: var(--sp-2); }
.activity-event::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.activity-event--open::before    { background: var(--accent); }
.activity-event--click::before   { background: var(--warning); }
.activity-event--reply::before   { background: var(--success); }
.activity-event--bounce::before,
.activity-event--spam::before    { background: var(--error); }

/* ============================================================
   FILTER PANEL (right-drawer) — портировано из CRM companies
   ============================================================ */
.filter-icon-btn { position: relative; padding: 0 var(--sp-3); height: 36px; display: flex; align-items: center; justify-content: center; }
.filter-icon-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.filter-icon-btn--active { border-color: var(--accent) !important; color: var(--accent) !important; }
.filter-badge {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); pointer-events: none;
}

.filter-panel-backdrop {
  position: fixed;
  top: var(--topbar-height); left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: flex-start; justify-content: flex-end;
}

.filter-panel {
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  width: 320px; height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-lg);
  animation: slide-in-right var(--dur-2) var(--ease) both;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

.filter-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.filter-panel-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

.filter-panel-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-2);
  flex-shrink: 0;
}
.filter-panel-footer .btn { flex: 1; justify-content: center; text-align: center; }
.filter-panel-footer .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.filter-section { display: flex; flex-direction: column; }
.filter-section-title {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: var(--sp-2);
}

.filter-checkbox-label {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) 0; cursor: pointer;
  font-size: var(--text-sm); color: var(--text-primary);
  user-select: none;
}
.filter-checkbox-label input[type=checkbox],
.filter-checkbox-label input[type=radio] {
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent);
}
/* Радио рисуем сами (appearance:none): нативный checked-radio с accent-color в
   СВЕТЛОЙ теме получает жирную тёмную внешнюю обводку, которую CSS не контролирует
   (accent-color задаёт только заливку). Кастомный «пончик» из токенов выглядит
   одинаково аккуратно в обеих темах. Чекбоксы оставляем нативными — у них проблемы нет. */
.filter-checkbox-label input[type=radio] {
  appearance: none; -webkit-appearance: none; margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-content: center;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.filter-checkbox-label input[type=radio]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--surface); transform: scale(0);
  transition: transform var(--dur-1) var(--ease);
}
.filter-checkbox-label input[type=radio]:checked {
  border-color: var(--accent); background: var(--accent);
}
.filter-checkbox-label input[type=radio]:checked::before { transform: scale(1); }
.filter-checkbox-label input[type=radio]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.filter-show-more {
  background: none; border: none; padding: var(--sp-1) 0;
  font-size: var(--text-sm); color: var(--accent);
  cursor: pointer; text-align: left; margin-top: var(--sp-1);
}
.filter-show-more:hover { text-decoration: underline; }

/* Дабл-рейндж (диапазон даты загрузки) */
.dual-range-wrapper { position: relative; height: 20px; margin: var(--sp-2) 0; }
.dual-range-track {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%); height: 4px;
  background: var(--border-strong); border-radius: 2px; pointer-events: none;
}
.dual-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--accent); border-radius: 2px; pointer-events: none;
}
.dual-range-input {
  position: absolute; width: 100%; top: 0; left: 0; height: 20px;
  background: none; -webkit-appearance: none; appearance: none;
  pointer-events: none; margin: 0;
}
.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); border: 2px solid var(--surface);
}
.dual-range-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; pointer-events: all;
  border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.dual-range-input::-webkit-slider-runnable-track { background: none; }
.dual-range-input::-moz-range-track { background: none; }

/* ============================================================
   NOTIFICATIONS / TASK LIST (портировано из CRM)
   ============================================================ */
.task-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.task-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.12s ease;
}
.task-item:hover { border-color: var(--border-strong); }
.task-item.notification-unread { border-left: 3px solid var(--accent); }
.task-item.notification-read   { opacity: 0.5; border-left: 3px solid transparent; }

.form-hint { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Корзина: глобальная пара массовых действий («Восстановить все» / «Удалить все»)
   живёт в .page-header (справа от заголовка, как в CRM); табы — обычный .tabs-nav ниже. */

/* Текст в массовых модалках корзины (подтверждение / подпись над выбором). */
.modal-text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-4); }

/* Плашки выбора разделов (модалка «Восстановить/Удалить все» при 2–3 разделах):
   иконка раздела (как в сайдбаре) + название + кастомный чекбокс справа. */
.trash-select-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-4); }
.trash-select-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer; user-select: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.trash-select-card:hover { border-color: var(--accent); }
.trash-select-card:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }

/* нативный чекбокс скрыт — состояние рисуем кастомно */
.trash-select-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.trash-select-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.trash-select-icon svg { width: 18px; height: 18px; }
.trash-select-card:has(input:checked) .trash-select-icon { background: var(--accent); color: var(--text-inverse); }

.trash-select-text { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.trash-select-title { font-size: var(--text-sm); font-weight: 600; }
.trash-select-count { color: var(--text-tertiary); font-size: var(--text-xs); }

.trash-select-check {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 2px solid var(--border); border-radius: 7px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.trash-select-check svg { width: 13px; height: 13px; }
.trash-select-card:has(input:checked) .trash-select-check { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }

.trash-select-note { font-size: var(--text-xs); color: var(--text-tertiary); margin: -4px 0 var(--sp-3); }

/* ════════════════════════════════════════════════════════════════════
   Дашборд-аналитика: бенто-сетка, KPI-плашки, toggle-pills, чарты
   (порт дизайн-системы CRM; ApexCharts через importmap)
   ════════════════════════════════════════════════════════════════════ */

/* ── Bento Grid (12 колонок) ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.bento-1  { grid-column: span 1; }
.bento-2  { grid-column: span 2; }
.bento-3  { grid-column: span 3; }
.bento-4  { grid-column: span 4; }
.bento-5  { grid-column: span 5; }
.bento-6  { grid-column: span 6; }
.bento-7  { grid-column: span 7; }
.bento-8  { grid-column: span 8; }
.bento-9  { grid-column: span 9; }
.bento-10 { grid-column: span 10; }
.bento-11 { grid-column: span 11; }
.bento-12 { grid-column: span 12; }

@media (max-width: 1200px) {
  .bento-3  { grid-column: span 6; }
  .bento-4  { grid-column: span 6; }
  .bento-8  { grid-column: span 12; }
  .bento-9  { grid-column: span 12; }
}
@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  [class^="bento-"] { grid-column: span 1; }
}

/* ── Card header (заголовок + переключатели в одну строку) ── */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.card-header .card-title { margin-bottom: 0; }
.card-header-controls { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Toggle Pills (период / режим #|%) ── */
.toggle-pills { display: flex; gap: 2px; background: var(--surface-sunken); border-radius: var(--r-full); padding: 2px; }
.toggle-pill {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
  line-height: 1;
}
.toggle-pill:hover { color: var(--text-secondary); background: rgba(95,184,192,0.05); }
.toggle-pill--active { background: var(--surface-raised); color: var(--accent); box-shadow: var(--sh-xs), inset 0 0 8px rgba(95,184,192,0.08); }

/* ── KPI-ряд (7 плашек, всегда видны над вкладками) ── */
.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
@media (max-width: 1200px) { .dashboard-kpi-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .dashboard-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-teal); }
.kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.kpi-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-family: var(--mono);
  line-height: 1;
}
.kpi-sub {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.kpi-tile--primary { border-color: var(--border-accent); background: var(--accent-subtle); }
.kpi-tile--primary .kpi-value { color: var(--accent); }

/* ── Контейнер чарта (ApexCharts управляет высотой сам) ── */
.dash-chart-fill { min-height: 280px; width: 100%; }
.dash-chart-fill .apexcharts-canvas { margin: 0 auto; }

/* Карточки в одном бенто-ряду — равная высота (grid-item растягивается,
   карточка заполняет его и становится flex-колонкой). */
.bento-grid > [class*="bento-"] { display: flex; }
.bento-grid > [class*="bento-"] > .card { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Контейнер чарта забирает остаток высоты и центрирует график по вертикали
   (донат в высокой карточке оказывается строго по центру). */
.bento-grid > [class*="bento-"] > .card > .dash-chart-fill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Дашборд: stat-card error-вариант + подсветка best/worst строк таблиц ── */
.is-hidden { display: none !important; }
.stat-card--error::before { background: var(--error); }
.dash-row-best  td { background: var(--success-subtle); }
.dash-row-worst td { background: var(--error-subtle); }

/* ── Виджет «Ответы без статуса»: скроллируемый список со сменой статуса на месте ── */
.escalation-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-right: var(--sp-1);
}
.escalation-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.escalation-row:hover { border-color: var(--border-accent); box-shadow: var(--sh-xs); }
/* Три зоны: контакт (слева) · метрики (центр) · статус (справа). Равный вес
   левой и правой зон удерживает метрики по центру карточки. */
.escalation-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.escalation-status { flex: 1 1 0; display: flex; justify-content: flex-end; }
.escalation-metrics {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; text-align: center;
  font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap;
}
.escalation-company {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escalation-email {
  font-size: var(--text-xs); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escalation-stat strong { font-weight: 700; color: var(--text-primary); }
.escalation-stat strong.is-warning { color: var(--warning); }
.escalation-stat strong.is-error { color: var(--error); }
.escalation-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-secondary); font-size: var(--text-sm); }
.escalation-list::-webkit-scrollbar { width: 6px; }
.escalation-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.escalation-list::-webkit-scrollbar-track { background: transparent; }

/* Ряд «Воронка + Ответы без статуса»: фикс высота строки — правая карточка
   совпадает по высоте с воронкой и скроллится ВНУТРИ, а не растягивает ряд
   под число ответов (паттерн CRM-ряда «Воронка + Просроченные задачи»). */
.dash-replies-row { grid-template-rows: 460px; }
.dash-replies-row > [class*="bento-"] > .card { min-height: 0; overflow: hidden; }

/* Fade-маска списка ответов (как у CRM «Просроченные задачи»): низ всегда
   выцветает — на коротком списке низ пуст и маска незаметна, при переполнении
   подсказывает прокрутку; верхняя кромка включается через onscroll при скролле. */
.escalation-list {
  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
}
.escalation-list.scrolled-top {
  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 24px), transparent);
}