/* ================================================================
   crm/analytics-2.5.css — окончательный файл стилей аналитики CRM 2.5.

   Правка 2026-08-27 («привести CRM 2.5 в окончательный вид»): файл
   переименован из crm/analytics-stage21.css в постоянное имя без номера
   этапа — содержимое не менялось, только имя файла и адрес подключения
   в crm 2.5.html (без ?v=..., окончательное имя однозначно отличает файл
   от более ранних версий). crm/analytics-stage21.css удалён — CRM 2.5 на
   него больше не ссылается, а больше ничего в проекте на него не
   ссылалось (проверено поиском по всему репозиторию).

   Всё содержимое ниже — то же самое, что было в crm/analytics-stage21.css.

   Только для CRM 2.5 — подключается исключительно crm 2.5.html.
   crm/analytics.js и стили других версий не затронуты: правила ниже
   перенесены из инлайн-блока crm 2.4.html (унаследован от CRM 2.3) без
   изменения смысла там, где не требовалось, и дополнены компактной
   сеткой обзора + подробными экранами.
   ================================================================ */

.crm-an-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ---- Шапка ---- */
.crm-an-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.crm-an-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.crm-an-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.crm-an-tz { font-size: 11px; color: var(--text-muted, #94a3b8); margin-left: 6px; }
.crm-an-updated { font-size: 12px; color: var(--text-muted, #94a3b8); white-space: nowrap; }

.crm-an-warning {
  padding: 10px 14px; border: 1px solid #fde68a; background: #fffbeb;
  color: #92400e; border-radius: 10px; font-size: 13px; line-height: 1.5;
}

/* ---- Фильтры (общие для обзора и подробного экрана, §8 задания) ---- */
.crm-an-filters {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px;
}
.crm-an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-an-chip {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px;
  background: #fff; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; min-height: 30px;
}
.crm-an-chip.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; font-weight: 600; }

.crm-an-custom-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.crm-an-custom-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.crm-an-custom-row input {
  padding: 6px 10px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 6px; outline: none; background: #fff; min-height: 32px;
}

.crm-an-filters-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.crm-an-select { display: flex; flex-direction: column; gap: 3px; min-width: 160px; flex: 0 1 200px; }
.crm-an-select > span { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.crm-an-select > select {
  padding: 6px 10px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 6px; outline: none; background: #fff; min-height: 32px; width: 100%;
}
.crm-an-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.crm-an-btn { min-height: 32px; padding: 6px 12px; font-size: 13px; }

/* ---- Карточки показателей (§4: компактнее, если мешают помещаться) ---- */
.crm-an-cards {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.crm-an-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.crm-an-card-click { cursor: pointer; }
.crm-an-card-click:hover { border-color: #94a3b8; box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.crm-an-card-danger { border-color: #fecaca; background: #fffafa; }
.crm-an-card-label { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 5px; }
.crm-an-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: #e2e8f0;
  color: #64748b; font-size: 9px; font-weight: 700; cursor: help; flex-shrink: 0;
}
.crm-an-card-value { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; word-break: break-word; }
.crm-an-card-danger .crm-an-card-value { color: #dc2626; }
.crm-an-card-sub { font-size: 10.5px; color: var(--text-muted, #94a3b8); }

.crm-an-delta { font-size: 11px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.crm-an-delta-up   { color: #16a34a; }
.crm-an-delta-down { color: #dc2626; }
.crm-an-delta-flat { color: var(--text-muted, #94a3b8); font-weight: 500; }
.crm-an-delta-abs  { font-weight: 500; opacity: .8; }

/* ---- Панели (используются внутри подробных экранов — включая полные
   таблицы «Требуют внимания»/«Источники»/«Результаты менеджеров», теперь
   открываемые по клику на карточку в .crm-an2-grid-row3, см. ниже) ---- */
.crm-an-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.crm-an-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-an-panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.crm-an-badge-now {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #eff6ff; color: #2563eb; padding: 2px 8px; border-radius: 8px;
}
.crm-an-metric {
  margin-left: auto; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; outline: none; min-height: 34px; max-width: 100%;
}
.crm-an-two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.crm-an-skeleton { padding: 24px 12px; text-align: center; color: var(--text-muted, #94a3b8); font-size: 13px; }
.crm-an-note { font-size: 11.5px; color: var(--text-muted, #94a3b8); line-height: 1.5; margin-top: 8px; }

/* ---- График: примитивы SVG общие для мини-вида (в карточке обзора) и
   подробного экрана — конкретный размер задаётся классом-контекстом
   ниже (.crm-an2-mini-chart-box / .crm-an2-detail-chart-box), не здесь.
   vector-effect держит толщину линии/сетки постоянной в экранных
   пикселях независимо от масштаба контейнера. ---- */
.crm-an-svg { width: 100%; display: block; }
.crm-an-grid { stroke: #e2e8f0; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.crm-an-axis { fill: #94a3b8; font-size: 15px; font-family: inherit; }
.crm-an-area { fill: rgba(37,99,235,.10); }
.crm-an-line { fill: none; stroke: #2563eb; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crm-an-dot  { fill: #2563eb; r: 2px; }
.crm-an-chart-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--text-secondary);
}
.crm-an-chart-gran { font-size: 11px; color: var(--text-muted, #94a3b8); }

/* ---- Воронка ---- */
.crm-an-funnel-head { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.crm-an-funnel { display: flex; flex-direction: column; gap: 4px; }
.crm-an-funnel-row {
  display: grid; grid-template-columns: minmax(70px, 1.2fr) minmax(60px, 2fr) minmax(90px, auto);
  align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer;
}
.crm-an-funnel-row:hover { background: #f8fafc; }
.crm-an-funnel-name { font-size: 12.5px; font-weight: 500; color: var(--text); word-break: break-word; }
.crm-an-funnel-bar { background: #f1f5f9; border-radius: 4px; height: 9px; overflow: hidden; max-width: 480px; }
.crm-an-funnel-bar > span { display: block; height: 100%; background: #2563eb; border-radius: 4px; }
.crm-an-funnel-nums { text-align: right; font-size: 11.5px; color: var(--text-secondary); display: flex; flex-direction: column; }
.crm-an-funnel-nums b { font-size: 13px; color: var(--text); }
.crm-an-funnel-prev { font-size: 10.5px; color: var(--text-muted, #94a3b8); }

/* ---- Мини-показатели (задачи) ---- */
.crm-an-minis { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.crm-an-mini { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.crm-an-mini-click { cursor: pointer; }
.crm-an-mini-click:hover { border-color: #94a3b8; }
.crm-an-mini-danger { background: #fef2f2; border-color: #fecaca; }
.crm-an-mini-value { font-size: 16px; font-weight: 700; color: var(--text); }
.crm-an-mini-danger .crm-an-mini-value { color: #dc2626; }
.crm-an-mini-label { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }

/* ---- Таблицы ---- */
.crm-an-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-an-table th, .crm-an-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.crm-an-table th { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.crm-an-table td.num, .crm-an-table th.num { text-align: right; white-space: nowrap; }
.crm-an-table tbody tr:last-child td { border-bottom: none; }
.crm-an-row-click { cursor: pointer; }
.crm-an-row-click:hover { background: #f8fafc; }
.crm-an-muted { color: var(--text-muted, #94a3b8); }
.crm-an-off {
  display: inline-block; font-size: 10px; font-weight: 600; background: #f1f5f9;
  color: #64748b; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
}
.crm-an-problem { font-size: 12px; font-weight: 600; color: #b45309; white-space: nowrap; }
.crm-an-problem-more { font-size: 10px; color: var(--text-muted, #94a3b8); margin-left: 4px; }

.crm-an-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }

/* ================================================================
   §2-4 задания: КОМПАКТНАЯ СЕТКА ОБЗОРА (8 блоков — ряды 1-2 ниже,
   ряд 3 — отдельная 3-колоночная сетка .crm-an2-grid-row3 ближе к
   концу этого раздела, правка «завершить обзор аналитики»)
   ================================================================ */

/* Верхние карточки показателей: см. .crm-an-cards выше — уже сделаны
   компактнее (padding 8px/10px, значение 18px вместо 22px, метки
   10.5px вместо 11px) в рамках этого же файла, отдельного класса не
   потребовалось — .crm-an-cards в CRM 2.5 больше нигде не используется
   с прежними (более крупными) размерами. */

.crm-an2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* Порядок блоков в разметке (см. crm/analytics-stage21.js) — ряд 1:
   Динамика(2) + Воронка(1) + Распределение(1) = 4; ряд 2: Задачи(2) +
   Причины(2) = 4 — авто-раскладка grid-auto-flow:row заполняет ряды
   без явного grid-row. */
.crm-an2-block-chart  { grid-column: span 2; }
.crm-an2-block-funnel { grid-column: span 1; }
.crm-an2-block-dist   { grid-column: span 1; }
.crm-an2-block-tasks  { grid-column: span 2; }
.crm-an2-block-loss   { grid-column: span 2; }

/* Карточка блока: §3 — высота ~210-240px, §7 — целиком кликабельна,
   лёгкое выделение при наведении, курсор-указатель, подпись «Открыть
   подробнее», управление Enter (role="button" tabindex="0" в разметке). */
.crm-an2-block {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; height: 220px; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.crm-an2-block:hover, .crm-an2-block:focus-visible {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 2px 10px rgba(37,99,235,.12);
}
.crm-an2-block:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.crm-an2-block:active { transform: scale(.997); }

.crm-an2-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; flex-shrink: 0;
}
.crm-an2-block-head h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.crm-an2-open-hint {
  font-size: 10.5px; color: var(--accent, #2563eb); font-weight: 600;
  opacity: 0; transition: opacity .12s; white-space: nowrap; flex-shrink: 0;
}
.crm-an2-block:hover .crm-an2-open-hint,
.crm-an2-block:focus-visible .crm-an2-open-hint { opacity: 1; }

.crm-an2-block-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Элементы внутри карточки, которые не должны сами открывать подробный
   экран (§7) — выпадающий список метрики графика. JS дополнительно
   останавливает всплытие клика (event.stopPropagation()); курсор
   возвращён на обычный, чтобы не выглядело кликабельной частью карточки. */
.crm-an2-block-head select { cursor: pointer; }

/* Мини-график внутри карточки «Динамика» — высота меньше, чем на
   подробном экране, подписи осей скрыты (незачитываемы в такой высоте). */
.crm-an2-mini-chart-box { width: 100%; }
.crm-an2-mini-chart-box .crm-an-svg { height: 130px; }
.crm-an2-mini-chart-box .crm-an-axis { display: none; }
.crm-an2-mini-foot { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

@media (max-width: 1200px) {
  .crm-an2-grid { grid-template-columns: repeat(2, 1fr); }
  .crm-an2-block-chart, .crm-an2-block-funnel, .crm-an2-block-dist,
  .crm-an2-block-tasks, .crm-an2-block-loss { grid-column: span 1; }
  .crm-an2-grid-row3, .crm-an2-grid-row3-2col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .crm-an2-grid { grid-template-columns: 1fr; }
  .crm-an2-block { height: auto; min-height: 190px; }
  .crm-an2-grid-row3, .crm-an2-grid-row3-2col { grid-template-columns: 1fr; }
}

/* Ряд 3 (правка «завершить обзор аналитики»): «Требуют внимания»,
   «Источники», «Результаты менеджеров» — три одинаковые кликабельные
   карточки той же высоты и того же дизайна, что верхние 5 (используют
   тот же класс .crm-an2-block). Отдельная 3-колоночная сетка, а не
   продолжение .crm-an2-grid (там 4 колонки — на 3 не делится ровно).
   .crm-an2-grid-row3-2col — вариант для не-администратора: карточки
   «Требуют внимания»/«Источники» без «Результатов менеджеров», каждая
   занимает половину, а не треть. Полных таблиц здесь больше нет —
   удалены вместе с прежним .crm-an2-more, см. отчёт. */
.crm-an2-grid-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.crm-an2-grid-row3-2col { grid-template-columns: repeat(2, 1fr); }

/* ================================================================
   §5-6 задания: ПОДРОБНЫЙ ЭКРАН
   ================================================================ */

.crm-an2-detail-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 4px;
}
.crm-an2-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text);
  background: #f8fafc; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; min-height: 36px;
}
.crm-an2-back-btn:hover { border-color: #94a3b8; }
.crm-an2-detail-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.crm-an2-detail-sub { font-size: 12.5px; color: var(--text-secondary); }

.crm-an2-detail-body { display: flex; flex-direction: column; gap: 16px; }

/* Подробный график — большой, с подписями осей (в отличие от мини). */
.crm-an2-detail-chart-box { width: 100%; max-width: 720px; }
.crm-an2-detail-chart-box .crm-an-svg { height: 280px; }

/* Список сделок/задач под показателем (проваливание на второй уровень
   внутри подробного экрана, не модальное окно) */
.crm-an2-sublist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.crm-an2-sublist-title { font-size: 13px; font-weight: 700; color: var(--text); }
.crm-an2-sublist-close { font-size: 12px; color: var(--accent, #2563eb); cursor: pointer; background: none; border: none; padding: 4px 6px; }

/* ---- Модальное окно детализации (устаревший путь из общей аналитики,
   класс не используется в новых экранах CRM 2.5, оставлен только если
   переиспользуется где-то ещё в разметке модуля) ---- */
.crm-an-drill-modal .crm-modal-body { max-height: 70vh; overflow-y: auto; }
.crm-an-drill-modal .crm-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ================================================================
   §9 задания: АДАПТИВНОСТЬ
   ================================================================ */
@media (max-width: 900px) {
  .crm-an-two { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .crm-an2-detail-chart-box { max-width: 100%; }
  .crm-an2-detail-chart-box .crm-an-svg { height: 200px; }
}

@media (max-width: 640px) {
  .crm-an-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .crm-an-updated { white-space: normal; }

  .crm-an-chips { flex-wrap: wrap; }
  .crm-an-chip { flex: 1 1 calc(50% - 6px); text-align: center; min-height: 40px; }

  .crm-an-filters-row { flex-direction: column; align-items: stretch; }
  .crm-an-select { flex: 1 1 auto; min-width: 0; }
  .crm-an-filter-actions { margin-left: 0; }
  .crm-an-filter-actions .crm-an-btn { flex: 1 1 calc(50% - 4px); min-height: 42px; }

  .crm-an-custom-row { flex-direction: column; align-items: stretch; }
  .crm-an-custom-row input { width: 100%; box-sizing: border-box; }
  .crm-an-custom-row .crm-an-btn { min-height: 42px; }

  .crm-an-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .crm-an-card-value { font-size: 18px; }

  .crm-an-metric { margin-left: 0; width: 100%; min-height: 40px; }
  .crm-an-panel-head { flex-direction: column; align-items: flex-start; }

  .crm-an-funnel-row { grid-template-columns: 1fr; gap: 4px; padding: 8px; border: 1px solid var(--border); }
  .crm-an-funnel-nums { flex-direction: row; gap: 8px; align-items: baseline; text-align: left; flex-wrap: wrap; }

  /* Широкие таблицы → карточки: каждая строка становится блоком,
     подписи берутся из data-l. Внутренней горизонтальной прокрутки
     при этом не остаётся (§9: таблицы не должны ломать страницу). */
  .crm-an-table-cards { display: block; }
  .crm-an-table-cards thead { display: none; }
  .crm-an-table-cards tbody, .crm-an-table-cards tr, .crm-an-table-cards td { display: block; width: 100%; }
  .crm-an-table-cards tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px; background: #fff;
  }
  .crm-an-table-cards td { border-bottom: none; padding: 3px 0; text-align: left !important; white-space: normal; }
  .crm-an-table-cards td[data-l]::before {
    content: attr(data-l) ': ';
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
  }
  .crm-an-table-cards td:first-child { font-weight: 600; font-size: 14px; }
  .crm-an-table-cards td:first-child::before { display: block; font-weight: 600; }

  .crm-an-pager .crm-an-btn { min-height: 42px; }

  .crm-an2-back-btn { min-height: 44px; }
  .crm-an2-detail-head { gap: 8px; }
}