/* ══════════════════════════════════════════════════════════════════════════
   DINSP CRM 2 — тема «Тёмный технологичный» (вариант 2c из макета редизайна).
   Источник: CRM Redesign - standalone.html, блок #t1 — угольный фон,
   светлый текст, бирюзовый акцент. Строгий, угловатый корпоративный стиль:
   малые радиусы, без пилюль, плотная вёрстка.
   Файл подключается последним и переопределяет CSS-переменные страниц,
   поэтому палитра меняется разом.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* — токены 2c — */
  --t-bg: #101317;
  --t-surface: #1b1f26;
  --t-surface-2: #161a20;
  --t-text: #e8eaed;
  --t-accent: #39e2b0;
  --t-accent-hover: #2bd39f;
  --t-accent-ink: #101317;
  --t-accent-soft: #12312a;
  --t-accent-soft-2: #173c33;
  --t-accent-text: #eafff6;

  --t-n-100: #262c35;
  --t-n-200: #14171c;
  --t-n-300: #2a2f38;
  --t-n-400: #3a4048;
  --t-n-500: #6b7280;
  --t-n-600: #8b95a3;
  --t-n-700: #aab2bd;
  --t-n-800: #e5e7eb;
  --t-n-900: #0b0d10;

  --t-blue: #4a9eff;
  --t-violet: #a78bfa;
  --t-amber: #f5a623;
  --t-rose: #fb7185;
  --t-cyan: #22d3ee;
  --t-green: #22c55e;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);

  /* — переопределение переменных базовых страниц — */
  --bg: var(--t-bg);
  --panel: var(--t-surface);
  --panel-soft: var(--t-n-200);
  --text: var(--t-text);
  --muted: var(--t-n-600);
  --line: var(--t-n-300);
  --line-strong: var(--t-n-400);
  --nav: var(--t-n-900);
  --brand: var(--t-accent);
  --brand-dark: var(--t-accent-hover);
  --green: var(--t-green);
  --amber: var(--t-amber);
  --red: var(--t-rose);
  --cyan: var(--t-cyan);
  --violet: var(--t-violet);
  --shadow: var(--shadow-md);
  --radius: var(--radius-md);
}

body {
  background: var(--t-bg);
  color: var(--t-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

h1, h2, h3, h4, h5, h6,
.brand strong, .brand h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t-text);
}

h1 { font-size: 24px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

/* ── плотность по макету: заголовок 24px, подпись 13px, тело 11-13px ── */
.main {
  padding: 0 !important;
  gap: 0 !important;
}

.topbar {
  min-height: 0 !important;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--t-n-300);
  margin: 0;
}

/* Заголовок страницы: на index/workspace/tasks это h1, на admin/analytics/
   task-analytics — h2 со своим размером. Приводим к одному кеглю. */
.page-title h1,
.page-title h2 { font-size: 24px !important; line-height: 1.15; margin: 0; }
.page-title p { margin: 2px 0 0; font-size: 13px !important; color: var(--t-n-600); }

/* Заголовки панелей тоже различаются по тегу (h2 против h3). */
.panel-head h2,
.panel-head h3 { font-size: 14px !important; margin: 0; }

/* Отступ сверху был задан только первой секции и трём именованным классам
   (.metric-grid/.view-bar/.panel) — обычные <section> без класса (у index.html
   это несколько .content-grid подряд: воронка, планировщик, реестр сделок,
   управление шагом) отступа не получали и стояли впритык друг к другу. */
.main > section,
.main > .panel,
.main > .metric-grid,
.main > .view-bar,
.main > .board-toolbar {
  margin: 12px 24px 0;
}

.main > section:first-of-type,
.main > .panel:first-of-type,
.main > .metric-grid:first-of-type { margin-top: 14px; }
.main > section:last-child,
.main > .panel:last-child { margin-bottom: 20px; }
.main > .view-bar { margin-top: 14px; }

.panel-head {
  min-height: 0 !important;
  padding: 10px 14px !important;
}

.panel-head h2 { font-size: 14px; }
.panel-body { padding: 12px 14px !important; }

/* метрики: подпись-«кикер» 10px капсом, значение 24px */
.metric {
  min-height: 0 !important;
  padding: 12px 16px !important;
  display: grid !important;
  gap: 3px !important;
  align-items: start !important;
}

.metric span {
  order: 0 !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-accent) !important;
}

.metric strong {
  order: 0 !important;
  font-size: 24px !important;
  line-height: 1.05;
}

/* «Выиграно»: точное значение из CRM Redesign.dc.html:232 —
   var(--color-accent-2-700), приглушённый серо-синий, НЕ зелёный,
   несмотря на формулировку в README. */
.metric-won { color: var(--t-n-700) !important; }

.metric small {
  order: 0 !important;
  width: auto !important;
  font-size: 10px !important;
  opacity: .6;
}

/* Каждая страница уже задаёт свою сетку metric-grid (repeat(5,...) с
   собственными точками адаптива под 3/2/1 колонку). Я было заменил её на
   auto-fit с minmax(150px,1fr) — из-за этого лишняя метрика при недостатке
   места переносилась на вторую строку с большим разрывом вместо аккуратного
   уменьшения ширины колонок. Трогаем только отступ, колонки не переопределяем. */
.metric-grid {
  gap: 10px !important;
}

/* «Сделки» — единственная страница с 7 метриками (добавили Конверсию и
   План на месяц). Унаследованная сетка repeat(5,...) оставляла 2 карточки
   на второй строке с тремя пустыми колонками справа; auto-fit по колонкам
   даёт ту же дыру на других ширинах (2 карточки всё равно занимают только
   2 из 5 колоночных дорожек). Flex-wrap решает это по-настоящему: неполная
   последняя строка сама растягивается на всю ширину без хвоста. */
#dealMetrics {
  display: flex !important;
  flex-wrap: wrap !important;
}

#dealMetrics .metric {
  flex: 1 1 150px;
}

/* полоса выполнения плана в метрике */
.plan-track {
  height: 5px;
  margin-top: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--t-n-300);
}

.plan-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--t-accent);
  transition: width 180ms ease;
}

/* Кнопка «Добавить задачу» переиспользуется в панели дня календаря задач
   (tasks.html) — сам планировщик-календарь дашборда перенесён туда же,
   в существующую вкладку «📅 Календарь», см. #calendarDayList ниже. */
.planner-add { margin-top: 10px; width: 100%; }

/* метка «риск» у узкого места */
.risk-flag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 4px;
  color: #ffe4e9;
  background: rgba(251, 113, 133, .22);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* фильтры и поля — компактнее */
.filters { gap: 8px !important; }
.field label { font-size: 11px !important; }

input, select, textarea,
.field input, .field select {
  min-height: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}

textarea, textarea.input, .field textarea {
  height: auto !important;
  min-height: 78px !important;
  padding: 8px 10px !important;
}

/* Подписи чекбоксов длинные и переносятся на две строки. Жёсткая высота
   ломала ряд фильтров (47px против 32px у соседних полей), поэтому высота
   свободная, а кегль и межстрочный интервал подобраны так, чтобы две
   строки укладывались в габарит соседних контролов. */
.checkbox,
.filters-field.filter-check {
  min-height: 32px !important;
  height: auto !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  align-items: center !important;
}

.checkbox span,
.filters-field.filter-check span {
  line-height: 1.2;
}

/* Нативная иконка календаря в date-полях: прижималась к рамке */
input[type="date"] {
  padding-right: 6px !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 2px;
  opacity: .75;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* карточки задач (экран «Задачи» — плотность ещё не сверена с макетом) */
.task-card {
  padding: 8px !important;
  gap: 3px !important;
}

.task-card strong {
  font-size: 12px !important;
  line-height: 1.25;
}

.task-deal,
.task-card > div {
  font-size: 11px !important;
}

/* карточка сделки — точные значения из CRM Redesign.dc.html:255-261 */
.deal-card {
  padding: 14px !important;
  gap: 8px !important;
}

.deal-card strong {
  font-size: 14.5px !important;
  line-height: 1.3;
}

.deal-card .product {
  font-size: 13px !important;
  color: var(--t-n-600);
}

.deal-card .card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deal-amount { font-size: 14px !important; font-weight: 700; }

.deal-owner-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101317;
  font-size: 11px;
  font-weight: 700;
}

.stage-head,
.column-head {
  min-height: 0 !important;
  padding: 8px 10px !important;
  font-size: 11.5px !important;
}

.task-list {
  min-height: 0 !important;
  padding: 8px !important;
  gap: 8px !important;
}

/* CRM Redesign.dc.html:243,253 — подложка доски темнее самих колонок,
   карточки внутри колонки отступают от края и снизу чуть больше, чем сверху */
.board-wrap {
  background: var(--t-n-200);
  border-radius: var(--radius-md);
  padding: 16px !important;
}

.stage-cards {
  min-height: 0 !important;
  padding: 2px 10px 12px !important;
  gap: 8px !important;
}

.badge {
  min-height: 0 !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
}

/* таблицы — 13px, шапка 11px */
table, .registry { font-size: 13px !important; }
table th, .registry th { padding: 8px 10px !important; font-size: 10px !important; }
table td, .registry td { padding: 8px 10px !important; }

/* переключатель видов и вкладки досок */
.view-bar { min-height: 0; }
.view-tabs button,
.view-tabs a {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.board-toolbar {
  min-height: 0 !important;
  padding: 10px 14px !important;
}

.board-tab {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.board-tab small,
.column-head small,
.stage-head small {
  padding: 1px 6px !important;
  font-size: 10px !important;
  border-radius: 4px;
}

.count-label { font-size: 11px !important; }

/* дровер */
.drawer-head { padding: 12px 14px !important; min-height: 0 !important; }
.drawer-title h2 { font-size: 15px !important; }
.drawer-footer { padding: 10px 14px !important; }
.detail-tab { min-height: 34px !important; padding: 0 12px !important; font-size: 13px !important; }

/* статус-плашка */
.storage-status,
.storage-pill {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

.page-title p,
.text-muted,
.count-label,
.empty {
  color: var(--t-n-600);
}

/* — кнопки: угловатые, малый радиус — */
.btn,
.icon-btn,
.overflow-item {
  border-radius: var(--radius-sm);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease;
}

.btn {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
  font-size: 13px;
  font-weight: 400;
}

.btn:hover {
  border-color: var(--t-n-400);
  background: var(--t-n-100);
}

.btn.primary {
  border-color: transparent;
  color: var(--t-accent-ink);
  background: var(--t-accent);
}

.btn.primary:hover {
  border-color: transparent;
  background: var(--t-accent-hover);
}

.btn.danger,
.icon-btn.danger-icon {
  color: var(--t-rose);
  border-color: rgba(251, 113, 133, .35);
  background: transparent;
}

.btn.danger:hover,
.icon-btn.danger-icon:hover {
  border-color: var(--t-rose);
  background: rgba(251, 113, 133, .12);
}

.btn:disabled,
.btn:disabled:hover {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--t-n-300);
  background: var(--t-surface);
}

.btn.icon-only,
.icon-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

/* Единый размер иконок: 15px в кнопках с текстом, 16px в квадратных,
   22px в сайдбаре. Базовые 17px оставались в переключателе видов. */
.crm-icon { width: 15px; height: 15px; }
.btn .crm-icon,
.view-tabs .crm-icon,
.overflow-item .crm-icon { width: 15px; height: 15px; }
.btn.icon-only .crm-icon,
.icon-btn .crm-icon { width: 16px; height: 16px; }
.sidebar .nav .nav-icon { width: 22px; height: 22px; }

.icon-btn:hover {
  border-color: var(--t-n-400);
  background: var(--t-n-100);
}

.btn-divider {
  background: var(--t-n-300);
}

/* — поля ввода — */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-n-200);
  font-family: Arial, Helvetica, sans-serif;
}

input::placeholder, textarea::placeholder {
  color: var(--t-n-500);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--t-n-400);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 3px rgba(57, 226, 176, .16) !important;
  outline: none;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--t-accent);
}

select option {
  color: var(--t-text);
  background: var(--t-surface);
}

.field label,
label,
.field-label,
.board-picker label {
  color: var(--t-n-600);
}

.checkbox {
  border-radius: var(--radius-sm);
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-n-200);
}

:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

::selection {
  color: var(--t-accent-ink);
  background: var(--t-accent);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--t-n-400); }
::-webkit-scrollbar-track { background: transparent; }

/* — панели и карточки — */
.panel,
.card,
.task,
.movement-row {
  border-radius: var(--radius-md);
  border-color: var(--t-n-300);
  background: var(--t-surface);
}

.panel-head,
.panel-body {
  border-color: var(--t-n-300);
}

.metric {
  border-radius: var(--radius-md);
  border-color: var(--t-n-300);
  background: var(--t-surface);
  box-shadow: none;
}

.metric span {
  color: var(--t-n-600);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric strong {
  color: var(--t-text);
}

.metric small {
  color: var(--t-n-500);
}

.metric-clickable {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.metric-clickable:hover {
  border-color: var(--t-accent);
}

.metric-clickable.is-active {
  border-color: var(--t-accent);
  background: var(--t-accent-soft);
}

.metric-clickable.is-active span {
  color: var(--t-accent);
}

.deal-card,
.task-card {
  border-radius: 6px;
  border-color: var(--t-n-300);
  background: var(--t-surface);
  color: var(--t-text);
}

.deal-card:hover,
.task-card:hover,
.deal-card:focus,
.task-card:focus {
  border-color: var(--t-accent);
}

.deal-card .product,
.task-deal,
.task-meta {
  color: var(--t-n-600);
}

.task-column {
  border-radius: var(--radius-sm);
  border-color: var(--t-n-300);
  background: var(--t-n-200);
}

.column-head {
  border-color: var(--t-n-300);
  border-radius: 0;
  color: var(--t-text);
  background: var(--t-surface);
}

/* колонка сделки — CRM Redesign.dc.html:245-252: фон surface (светлее
   подложки доски), радиус 12px, точка+название+счётчик без фона-пилюли,
   строка суммы этапа под заголовком */
.stage-column {
  border-radius: var(--radius-md);
  border-color: transparent;
  background: var(--t-surface);
  box-shadow: var(--shadow-sm);
}

.stage-head {
  padding: 12px 12px 8px !important;
  gap: 7px;
  border-color: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  color: var(--t-text);
  background: var(--t-surface);
  font-size: 13px !important;
}

.stage-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--stage-color);
}

.stage-sum {
  padding: 0 12px 6px;
  color: var(--t-text);
  opacity: .55;
  font-size: 11px;
}

.stage-head small {
  color: var(--t-text) !important;
  background: none !important;
  opacity: .55;
  font-weight: 400 !important;
}

/* счётчики-пилюли в заголовках колонок задач и вкладках досок (экран
   «Задачи» — своя стилистика, ещё не сверена с макетом отдельно) */
.column-head small,
.board-tab small {
  color: var(--t-n-700) !important;
  background: var(--t-n-100) !important;
}

.board-tab.active small {
  color: var(--t-accent-ink) !important;
  background: rgba(16, 19, 23, .22) !important;
}

.stage-cards.drag-over,
.task-list.drag-over {
  outline-color: var(--t-accent);
  background: rgba(57, 226, 176, .07);
}

/* ── иконочный сайдбар 84px по макету ── */
@media (min-width: 901px) {
  :root { --crm-sidebar-width: 84px; --sidebar-width: 84px; }

  .sidebar {
    width: 84px !important;
    padding: 16px 0 !important;
    align-items: center !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .main { margin-left: 84px !important; }

  .sidebar .brand { min-height: 0 !important; flex: none !important; }
  .sidebar .brand > strong,
  .sidebar .brand > h1,
  .sidebar .brand > span { display: none !important; }

  .sidebar .nav { gap: 6px !important; justify-items: center; }
  .sidebar .nav-group { gap: 6px !important; justify-items: center; }
  .nav-section { display: none !important; }

  .sidebar .nav a,
  .sidebar .nav button {
    position: relative;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .sidebar .nav .nav-icon { width: 22px; height: 22px; stroke-width: 2.75; }

  /* Подпись при наведении — вместо нативного title (медленный, вне темы).
     Всплывает справа от иконки, не сдвигает раскладку. */
  .sidebar .nav .nav-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    z-index: 40;
    padding: 6px 11px;
    border: 1px solid var(--t-n-300);
    border-radius: var(--radius-sm);
    background: var(--t-n-100);
    color: var(--t-text);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  }

  .sidebar .nav a:hover .nav-label,
  .sidebar .nav a:focus-visible .nav-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition-delay: 80ms;
  }

  /* аватар пользователя — кружок 40px вверху, как в макете */
  .sidebar .crm-user-context { margin: 0 !important; }
  .sidebar .crm-user-context label,
  .sidebar .crm-user-name,
  .sidebar .crm-user-role,
  .sidebar .crm-user-row select { display: none !important; }

  .sidebar .crm-user-row {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 8px !important;
  }

  .sidebar .crm-user-row .crm-avatar-button {
    width: 40px !important;
    height: 40px !important;
    border-color: rgba(232, 234, 237, .22) !important;
  }

  .sidebar .crm-user-logout {
    width: 32px !important;
    height: 32px !important;
  }

  .sidebar .side-summary { display: none !important; }
}

/* ── фильтры-чипы по макету ── */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 24px 0 !important;
}

.chip {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--t-n-300);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--t-text);
  background: var(--t-surface);
  font: 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.chip:hover {
  border-color: var(--t-n-400);
  background: var(--t-n-100);
}

.chip.active {
  border-color: var(--t-accent);
  background: var(--t-accent-soft);
}

.chip-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--t-accent);
}

.chip-dot-2 { background: var(--t-amber); }

.chip-divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--t-n-300);
}

/* — навигация — */
.sidebar {
  background: var(--t-n-900);
  color: var(--t-text);
}

.sidebar .nav .nav-icon { flex: none; }

.sidebar .brand span {
  color: var(--t-n-600);
}

/* Точные значения из исходника дизайна (navVM(), CRM Redesign.dc.html:608):
   неактивная иконка — --color-neutral-400 (#3a4048, приглушённый тёмный),
   активная — фон --color-accent-700 (#2bd39f, не базовый --color-accent),
   текст активной — #101317. Наведение в прототипе не описано отдельно
   (кнопки без класса .btn, обычный inline-стиль) — берём лёгкий подъём
   без полного цвета активной вкладки, чтобы не путать hover с "текущая". */
.sidebar .nav a,
.sidebar .nav button {
  border-radius: var(--radius-md);
  color: var(--t-n-400);
}

.sidebar .nav a:hover,
.sidebar .nav button:hover {
  color: var(--t-n-700);
  background: var(--t-n-100);
}

.sidebar .nav a[aria-current="page"],
.sidebar .nav a.active,
.sidebar .nav button.active {
  color: var(--t-accent-ink);
  background: var(--t-accent-hover);
}

.nav-section {
  color: var(--t-n-500) !important;
}

.side-summary {
  border-color: var(--t-n-300);
}

.side-summary span,
.side-summary small {
  color: var(--t-n-600);
}

.crm-nav-toggle,
.crm-user-row select,
.crm-user-logout,
.crm-user-row button,
.crm-user-row a {
  border-color: var(--t-n-300) !important;
  color: var(--t-text) !important;
  background: var(--t-surface) !important;
  border-radius: var(--radius-sm) !important;
}

.crm-user-name { color: var(--t-text) !important; }
.crm-user-role, .crm-user-context label { color: var(--t-n-600) !important; }

/* — теги, бейджи — */
.badge,
.stage-chip,
.tag {
  border-radius: 4px;
  letter-spacing: .02em;
}

.badge.hot, .badge.high {
  color: #ffe4e9;
  background: rgba(251, 113, 133, .22);
}

.badge.warm, .badge.medium {
  color: #ffeccc;
  background: rgba(245, 166, 35, .2);
}

.badge.cold, .badge.low {
  color: #d8f7ff;
  background: rgba(34, 211, 238, .18);
}

.badge.archive {
  color: var(--t-n-700);
  background: var(--t-n-100);
}

.draft-badge {
  color: var(--t-violet) !important;
  background: rgba(167, 139, 250, .18) !important;
}

.overdue {
  color: var(--t-rose) !important;
}

/* — таблицы — */
table th,
.registry th {
  color: var(--t-n-600);
  background: var(--t-n-200);
  border-color: var(--t-n-300);
  letter-spacing: .08em;
}

table td,
.registry td {
  color: var(--t-text);
  border-color: var(--t-n-300);
}

table tbody tr:hover,
.registry tbody tr:hover {
  background: var(--t-n-100);
}

.cell-main small {
  color: var(--t-n-600);
}

/* — переключатель видов — */
.view-tabs {
  padding: 0;
  border: 1px solid var(--t-n-300);
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: hidden;
}

.view-tabs button,
.view-tabs a {
  min-height: 32px !important;
  border-radius: 0 !important;
  color: var(--t-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.view-tabs button + button,
.view-tabs a + a {
  border-left: 1px solid var(--t-n-300) !important;
}

.view-tabs button.active,
.view-tabs a.active {
  color: var(--t-accent-ink) !important;
  background: var(--t-accent) !important;
}

/* Сегмент-переключатель «Доска/Список» в шапке «Рабочего места»
   (CRM Redesign.dc.html:205-208) — тот же приём, что и .view-tabs выше,
   отдельный класс, чтобы не задеть .view-tabs на других страницах. */
.seg {
  padding: 0;
  border: 1px solid var(--t-n-300);
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: hidden;
}

.seg-opt {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 0 !important;
  color: var(--t-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.seg-opt + .seg-opt {
  border-left: 1px solid var(--t-n-300) !important;
}

.seg-opt.active {
  color: var(--t-accent-ink) !important;
  background: var(--t-accent) !important;
}

.header-search {
  background: var(--t-n-200) !important;
}

/* — вкладки досок задач — */
.board-tab {
  border-radius: var(--radius-sm);
  border-color: var(--t-n-300);
  color: var(--t-n-700);
  background: var(--t-surface);
}

.board-tab.active {
  color: var(--t-accent-ink);
  background: var(--t-accent);
  border-color: transparent;
}

.board-count {
  color: var(--t-n-600);
}

/* — дровер и диалоги — */
.drawer,
.access-panel,
.crm-avatar-panel,
.overflow-list {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

.drawer {
  border-radius: 0;
}

.access-panel,
.crm-avatar-panel {
  border-radius: var(--radius-md);
}

.overflow-list {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.overflow-item {
  color: var(--t-text);
}

.overflow-item:hover {
  background: var(--t-n-100);
}

.drawer-backdrop,
.access-dialog,
.crm-avatar-dialog {
  background: rgba(5, 7, 9, .66);
}

.detail-tabs,
.drawer-head,
.drawer-footer,
.access-head,
.access-footer,
.access-user,
.access-option {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

.drawer-footer,
.access-footer {
  background: var(--t-n-200);
}

.detail-tab {
  color: var(--t-n-600);
}

.detail-tab.active {
  color: var(--t-accent);
  border-color: var(--t-accent);
}

.crm-avatar-choice {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

.crm-avatar-choice:hover {
  border-color: var(--t-accent);
  background: var(--t-n-100);
}

.crm-avatar-choice.active {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 1px var(--t-accent);
  background: var(--t-accent-soft);
}

.crm-avatar-upload {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

/* .crm-avatar-panel/-head/-close are shared by the avatar picker AND the
   "Мои настройки" dialog (same injected markup, see crm-shell.js) — their
   colors come from a runtime-injected <style> tag, which wins over this
   file's cascade order without !important. */
.crm-avatar-panel,
.crm-avatar-head,
.crm-avatar-close,
.crm-settings-field label,
.crm-settings-field input,
.crm-settings-hint,
.crm-settings-checkbox,
.crm-settings-actions button {
  color: var(--t-text) !important;
  background: var(--t-surface) !important;
  border-color: var(--t-n-300) !important;
}

.crm-avatar-close,
.crm-settings-field input,
.crm-settings-actions button {
  background: var(--t-n-200) !important;
}

.crm-settings-field label,
.crm-settings-hint {
  background: transparent !important;
}

.crm-settings-hint {
  color: var(--t-n-600) !important;
}

.crm-settings-checkbox {
  background: transparent !important;
}

.crm-settings-actions button.primary {
  color: var(--t-accent-ink) !important;
  background: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
}

/* Two independent "show from date" filters live in the same dialog (deals
   vs contracts) — different tinted backgrounds so they read as separate
   settings, not one confusing block. */
.crm-settings-section {
  padding: 10px;
  border-radius: var(--radius-sm);
}

.crm-settings-section--leads {
  background: var(--t-n-100) !important;
}

.crm-settings-section--contracts {
  background: var(--t-accent-soft) !important;
}

/* — статусы, напоминания, тосты — */
.storage-status,
.storage-pill {
  border-radius: var(--radius-sm);
  border-color: var(--t-accent-soft-2);
  color: var(--t-accent-text);
  background: var(--t-accent-soft);
}

.storage-status.saving {
  border-color: rgba(245, 166, 35, .4);
  color: #ffeccc;
  background: rgba(245, 166, 35, .14);
}

.storage-status.error,
.crm-reminder-link {
  border-color: rgba(251, 113, 133, .4);
  color: #ffe4e9;
  background: rgba(251, 113, 133, .14);
  border-radius: var(--radius-sm);
}

.toast {
  border-radius: var(--radius-sm);
  color: var(--t-text);
  background: var(--t-n-100);
  border: 1px solid var(--t-n-300);
}

.crm-shell-banner {
  border-radius: var(--radius-sm);
  border-color: rgba(245, 166, 35, .4);
  color: #ffeccc;
  background: rgba(245, 166, 35, .14);
}

.crm-shell-banner button {
  border-radius: var(--radius-sm);
  border-color: rgba(245, 166, 35, .5);
  color: #ffeccc;
  background: transparent;
}

.crm-auth-failure {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-surface);
}

html.crm-auth-pending { background: var(--t-bg); }

/* — календарь задач — */
.calendar-day {
  min-height: 64px !important;
  padding: 5px !important;
  gap: 3px !important;
  border-radius: 6px;
  border-color: var(--t-n-300);
  background: var(--t-surface);
}

.calendar-grid { gap: 5px !important; }
.calendar-day-num { font-size: 11px !important; }
.calendar-chip { font-size: 10px !important; padding: 1px 5px !important; }
.calendar-more { font-size: 9px !important; }
.calendar-weekday { font-size: 10px !important; }
.calendar-legend { gap: 5px 14px !important; margin-bottom: 10px !important; }
.calendar-legend-item { font-size: 11px !important; }

.calendar-day.outside {
  background: var(--t-n-200);
  color: var(--t-n-500);
}

.calendar-day.today {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 1px var(--t-accent) inset;
}

.calendar-day.selected {
  border-color: var(--t-accent) !important;
  background: var(--t-accent-soft) !important;
  box-shadow: 0 0 0 1px var(--t-accent) inset;
}

.calendar-day:hover {
  border-color: var(--t-n-400);
}

/* панель «План на день» рядом с календарём задач */
#calendarDayList .task {
  border-color: var(--t-n-300);
  background: var(--t-n-200);
  color: var(--t-text);
}

#calendarDayList .task strong { color: var(--t-text); }
#calendarDayList .task > span { color: var(--t-n-600); }
#calendarDayList .task:hover { border-color: var(--t-accent); }

.calendar-chip {
  border-radius: 4px;
  color: var(--t-accent-ink);
}

.calendar-weekday,
.calendar-more,
.calendar-legend-item {
  color: var(--t-n-600);
}

/* — прогресс и полосы — */
.progress-line,
.mini-track,
.track {
  border-radius: 3px;
  background: var(--t-n-300);
}

.progress-line span,
.mini-fill,
.fill,
.stage-bar {
  border-radius: 3px;
}

.track span {
  border-color: var(--t-n-400);
  color: var(--t-text);
  background: rgba(22, 26, 32, .92);
}

/* — история карточки — */
.history-item,
.history-entry,
.contact-row,
.check-item {
  border-color: var(--t-n-300);
  background: var(--t-n-200);
}

.history-change-after { color: var(--t-accent); }

.history-tab-count,
.history-filter small,
.history-filter.active small {
  color: var(--t-n-700) !important;
  background: var(--t-n-100) !important;
}

.history-filter.active {
  border-color: var(--t-accent) !important;
  color: var(--t-accent) !important;
  background: var(--t-accent-soft) !important;
}

.history-filter.active small {
  color: var(--t-accent-ink) !important;
  background: var(--t-accent) !important;
}

/* Розовый #fb7185 на тёмной панели даёт контраст ~2.7 — для текста
   и подписей берём осветлённый тон, сам акцент рамки оставляем. */
.btn.danger,
.icon-btn.danger-icon,
.overdue,
.link-button.danger,
.status.error {
  color: #ff9caf !important;
}

/* ── добор: элементы с захардкоженным светлым фоном в базовых страницах ── */

/* Стили, вставляемые из JS (crm-shell.js, admin-ops.js, crm-multi-select.js),
   попадают в <head> позже этого файла, поэтому им нужен !important. */
.setting-toggle,
.user-role-select,
.crm-access-toggle,
.registry-access-toggle,
.ops-row,
.backup-row,
.audit-row,
.audit-entry,
.password-form {
  color: var(--t-text) !important;
  background: var(--t-n-200) !important;
  border-color: var(--t-n-300) !important;
}

.registry-access-toggle.has-access {
  color: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
}

.registry-access-menu {
  color: var(--t-text) !important;
  background: var(--t-surface) !important;
  border-color: var(--t-n-300) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6) !important;
}

.registry-access-menu label {
  color: var(--t-text) !important;
}

.toolbar-note {
  color: var(--t-n-600) !important;
  background: var(--t-n-200) !important;
  border-color: var(--t-n-300) !important;
}

.crm-reminder-link {
  border-color: rgba(251, 113, 133, .4) !important;
  color: #ffe4e9 !important;
  background: rgba(251, 113, 133, .14) !important;
}

.audit-kind,
.backup-meta {
  color: var(--t-n-600) !important;
  background: var(--t-n-100) !important;
}

.user-row,
.history-filter,
.history-compose,
.history-day,
.history-kind,
.history-stage-name,
.excel-table th:first-child,
.excel-table td:first-child,
.analytics-checkbox,
.stage-flow,
.timeline,
.chart-list,
.task-list-panel,
.board-picker select,
.storage-pill.dirty,
.storage-status.dirty {
  color: var(--t-text);
  background: var(--t-n-200);
  border-color: var(--t-n-300);
}

.user-row {
  border-radius: var(--radius-sm);
}

.user-row strong { color: var(--t-text); }
.user-row span,
.board-tab small,
.column-head small,
.history-filter small { color: var(--t-n-600); }

.board-tab.active small { color: var(--t-accent-ink); }

.storage-pill.dirty,
.storage-status.dirty {
  border-color: rgba(245, 166, 35, .4);
  color: #ffeccc;
  background: rgba(245, 166, 35, .14);
}

.crm-multiselect,
.crm-multiselect-trigger,
.crm-multiselect-menu,
.crm-multiselect-options,
.crm-multiselect-option,
.crm-multiselect-all {
  color: var(--t-text) !important;
  background: var(--t-n-200) !important;
  border-color: var(--t-n-300) !important;
}

.crm-multiselect-menu {
  background: var(--t-surface) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* В admin.html у кнопки «Сгенерировать» задана height:40px в разметке —
   выбивалась из общей высоты контролов. */
.password-create-control .btn {
  height: 32px !important;
}

/* Триггер мультиселекта рендерится из JS с высотой 40px и выбивался
   из ряда фильтров (остальные контролы 32px). */
.crm-multiselect-trigger {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
}

.crm-multiselect-option {
  min-height: 30px !important;
  font-size: 13px !important;
}

.crm-multiselect-option:hover,
.crm-multiselect-all:hover {
  background: var(--t-n-100) !important;
}

/* воронка на дашборде и полосы аналитики */
.stage-row,
.movement-row,
.mini-chart,
.funnel-row {
  color: var(--t-text);
}

.stage-name,
.mini-chart-top {
  color: var(--t-text);
}

.stage-bar-wrap,
.bar-track {
  border-radius: var(--radius-sm);
  background: var(--t-n-300);
}

.deadline {
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-n-200);
}

.deadline strong { color: var(--t-text); }
.deadline span,
.deadline time { color: var(--t-n-600); }

.stage-meta {
  color: var(--t-n-600);
}

.stage-meta strong {
  color: var(--t-text);
}

.stage-select,
.filters-field,
.filters-field.filter-check {
  border-radius: var(--radius-sm);
  border-color: var(--t-n-300);
  color: var(--t-text);
  background: var(--t-n-200);
}

/* Суммы поверх цветных полос воронки: цвета этапов взяты из макета и
   рассчитаны на тёмный фон, поэтому подпись держим тёмной, а не белой. */
.stage-bar span {
  color: #0b0d10;
  text-shadow: none;
}

.excel-content,
.excel-table {
  color: var(--t-text);
  background: var(--t-n-200);
}

.excel-table th {
  background: var(--t-n-100);
}

/* поля внутри тёмных панелей: не оставляем белых пятен */
.field input,
.field select,
.field textarea,
.board-picker select {
  background: var(--t-n-200) !important;
}