/* Отчёт «Директ помесячно» — таблица истории кликов на странице /reports.
   Задача Анны 28.08.2026: «мне надо это увидеть глазами прям таблицей».
   Отдельный файл, потому что кроме этой страницы такой таблицы нигде нет;
   общие правила таблиц живут в components.css и layout.css и здесь не
   переопределяются. */

/* Полоска в колонке кликов: сколько из месяца — поиск, сколько — сети.
   Она тут не украшение: 600 кликов в сутки из РСЯ и 200 с поиска — разные
   люди, и в одной колонке «клики» разницу глазами не видно. */
.clicks-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-border);
  margin-top: 4px;
  min-width: 64px;
}
.clicks-bar span { display: block; height: 100%; }
.clicks-bar .search { background: var(--color-accent); }
.clicks-bar .network { background: color-mix(in srgb, var(--chart-5) 55%, var(--color-bg)); }

/* Легенда полоски — тем же цветом, что и сама полоска. */
.clicks-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.clicks-legend span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.clicks-legend i { width: 12px; height: 6px; border-radius: 3px; display: inline-block; }
.clicks-legend .search i { background: var(--color-accent); }
.clicks-legend .network i { background: color-mix(in srgb, var(--chart-5) 55%, var(--color-bg)); }

/* Строка текущего (неполного) месяца — приглушена: сравнивать её с целыми
   месяцами можно только по колонке «в сутки», и это должно быть видно. */
.table tr.month-partial td { color: var(--color-muted); }
.table tr.month-partial td.num { font-weight: 400; }

/* Сравнение «было → стало» над таблицей: тот же приём, что у воронки на
   /finance — сначала вывод, потом двадцать строк цифр. */
.clicks-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.clicks-summary .cell {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.clicks-summary .cell .label { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.clicks-summary .cell .value {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl);
  font-variant-numeric: tabular-nums; color: var(--color-text);
}
.clicks-summary .cell .was { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }
.clicks-summary .cell .value .up { color: var(--color-success); }
.clicks-summary .cell .value .down { color: var(--color-danger); }

.clicks-notes { margin-top: var(--space-4); }
.clicks-notes li { font-size: var(--text-xs); color: var(--color-muted); line-height: var(--leading-sm); margin-bottom: var(--space-2); }


/* ТАБЛИЦА КАНАЛОВ «было → стало» (/reports, блок «Каналы»).
   Задача Анны 05.09.2026: «наглядно все видны… давай пока просто таблицу без
   графика». Своих цветов не вводит: только токены дизайн-системы, раздел 6
   design/design-system.md запрещает выдумывать новые. */

/* Метка канала: платный он или служебный. Без неё в столбце «конверсия»
   строка «Внутренние переходы 21 %» читается как достижение, хотя это
   переходы внутри своих же поддоменов. */
.ch-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--text-xs);
  line-height: 1.6;
  vertical-align: middle;
}
.ch-tag-paid { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg)); color: var(--color-accent); }
.ch-tag-sys { background: var(--color-border); color: var(--color-muted); }

/* Пояснение под названием канала — мелким и приглушённым: оно нужно один раз,
   когда человек впервые смотрит на строку, и не должно спорить с цифрами. */
.ch-note {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-muted);
  max-width: 46ch;
}

/* Служебная строка приглушена целиком: она в итог не входит, и это видно
   глазами, а не только сноской под таблицей. */
.table tr.ch-service td { color: var(--color-muted); }

/* Направление изменения конверсии. Только цвет текста и только в одной
   колонке: стрелка «было → стало» уже стоит в самой клетке, дублировать её
   значком незачем. */
.table td.ch-up, .table th.ch-up { color: var(--color-success); }
.table td.ch-down, .table th.ch-down { color: var(--color-danger); }