/*
 * Раздел «Откуда приходят».
 *
 * Оформление таблицы повторяет «Конверсию скидок» (discount-conversion.css),
 * а та — «Прочее» (misc.css): те же отступы, заглавные подписи столбцов,
 * подсветка строки под курсором. Своего вида заводить незачем — таблицы
 * одного смысла в одной админке должны выглядеть одинаково.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ И СВОЙ SCOPE. Классы таблиц в этой админке НЕ
 * глобальны: `block-wrap` объявлен под `.misc-dev`, `.misc-notif` и
 * `.discount-scope`, `tbl` — под `.mailings-scope`. Страница без своего
 * scope получает голый HTML — ровно это и вышло при первой сборке:
 * таблица осталась без карточки и слилась с фоном.
 *
 * Цвета только токенами. Текстовых в admin.css ровно три: --text,
 * --text-dim, --muted. Токенов вида --text-1 или --font-mono не
 * существует, на них уже наступали.
 */

/* Карточка вокруг таблицы. Значения взяты из .misc-dev, чтобы блок сел
   в общий ряд с остальными разделами. */
.src-scope .block-wrap {
  width: 100%;
  margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.src-scope .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  border-radius: inherit;
}

/* Два ряда карточек подряд слипались в одну простыню: у .stats-grid есть
   внутренний зазор между ячейками, но не между самими сетками. */
.src-scope .stats-grid + .stats-grid {
  margin-top: 12px;
}

.src-scope .stats-grid {
  margin-bottom: 14px;
}

.src-scope table.src-table {
  width: 100%;
  border-collapse: collapse;
  /* Десять столбцов: на узком экране таблица прокручивается вбок, а не
     ужимается в нечитаемую кашу. */
  min-width: 1120px;
  color: var(--text);
  font-size: 14px;
  /* Цифры одной ширины — иначе столбцы сумм пляшут, и сравнить строки
     глазами нельзя. */
  font-variant-numeric: tabular-nums;
}

.src-scope thead {
  background: rgba(255, 255, 255, 0.025);
}

.src-scope th {
  font-family: Roboto-Medium;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.src-scope th,
.src-scope td {
  padding: 12px 14px;
  text-align: right;
  white-space: nowrap;
}

.src-scope th.left,
.src-scope td.left {
  text-align: left;
}

.src-scope tbody td {
  border-bottom: 1px solid var(--border);
}

/* Чередование строк: в широкой таблице глаз теряет строку на полпути
   между первым и последним столбцом. */
.src-scope tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.014);
}

.src-scope tbody tr:hover td {
  background: var(--surface-hover);
}

.src-scope tbody tr:last-child td {
  border-bottom: none;
}

.src-scope .row-empty td {
  padding: 0;
  background: transparent;
}

.src-scope .row-empty td:hover {
  background: transparent;
}

.src-scope .muted {
  color: var(--muted);
}

.src-scope .good {
  color: var(--good);
}

.src-scope .bad {
  color: var(--bad);
}

.src-scope .src-ref {
  color: var(--text-dim);
}

.src-scope .src-link {
  color: var(--accent);
  text-decoration: none;
}

.src-scope .src-link:hover {
  text-decoration: underline;
}

/* Пояснительная рамка. Без неё раздел врёт молчанием: цифры выглядят
   полными, хотя окно наблюдения началось только в апреле. */
.src-scope .src-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.src-scope .src-note i {
  margin-top: 2px;
  color: var(--accent);
}

.src-scope .src-note b {
  color: var(--text);
  font-weight: 600;
}

.src-scope .src-note--quiet {
  border-left-color: var(--border-strong);
}

.src-scope .src-note--quiet i {
  color: var(--muted);
}

.src-scope .src-key {
  margin: 4px 0 14px;
  color: var(--text-dim);
  font-size: 13px;
}

.src-scope .src-key code {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
}

.src-scope .src-block-head {
  padding: 14px 16px 12px;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------------------ форма */

.src-scope .src-form {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.src-scope .src-form__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.src-scope .src-form__field {
  display: block;
  flex: 1 1 260px;
  margin-bottom: 12px;
}

.src-scope .src-form__field--narrow {
  flex: 0 1 220px;
}

.src-scope .src-form__label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 12px;
}

.src-scope .src-form__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  /* Цвет текста задаётся явно: без него поле наследует цвет из браузера
     и на тёмном фоне ввод не виден. */
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.src-scope .src-form__input::placeholder {
  color: var(--muted);
}

.src-scope .src-form__input:focus {
  outline: none;
  border-color: var(--border-accent);
}

.src-scope .src-form__foot {
  display: flex;
  gap: 12px;
  align-items: center;
}

.src-scope .src-form__save {
  padding: 9px 20px;
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  background: var(--accent);
  /* Тот же урок: на кнопке цвет текста задаётся явно. */
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.src-scope .src-form__save:hover:not(:disabled) {
  background: var(--accent-hover);
}

.src-scope .src-form__save:disabled {
  opacity: 0.6;
  cursor: default;
}

.src-scope .src-form__error {
  color: var(--bad);
  font-size: 13px;
}

.src-scope .src-form__ok {
  color: var(--good);
  font-size: 13px;
}

/* --- Создание источника --------------------------------------------- */

.src-scope .src-create {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.src-scope .src-create__hint {
  color: var(--text-dim);
  font-size: 12px;
}

.src-scope .src-form__head {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

/* Подпись под полем: правила ключа читают один раз, но без них ключ
   заводят кириллицей, и метка молча не доезжает. */
.src-scope .src-form__hint {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.35;
}

.src-scope .src-form__field--wide {
  flex: 1 1 100%;
  min-width: 0;
}

.src-scope .src-form__link {
  margin: 14px 0;
}

.src-scope .src-form__linkrow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.src-scope .src-form__linkrow code {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft, rgba(255, 255, 255, 0.03));
  color: var(--text);
  font-size: 13px;
  word-break: break-all;
}

.src-scope .src-form__cancel {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.src-scope .src-form__cancel:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-accent);
}

/* --- Ссылка источника на карточке ------------------------------------ */

.src-scope .src-linkrow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.src-scope .src-linkrow__label {
  color: var(--text-dim);
  font-size: 13px;
}

/* Сама ссылка — кнопка: по клику копируется целиком. */
.src-scope .src-linkrow__value {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft, rgba(255, 255, 255, 0.03));
  color: var(--text);
  font: inherit;
  font-size: 13px;
  word-break: break-all;
  text-align: left;
  cursor: pointer;
}

.src-scope .src-linkrow__value:hover {
  border-color: var(--border-accent);
}

.src-scope .src-linkrow__copy {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.src-scope .src-linkrow__copy:hover {
  color: var(--text);
  border-color: var(--border-accent);
}

.src-scope .src-form__warn {
  color: var(--warn, #e0a458);
  font-weight: 500;
}

/* --- Коэффициент расхода VIP-трафика --------------------------------- */

.src-scope .vipmul-example {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft, rgba(255, 255, 255, 0.03));
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.src-scope .vipmul-example b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}