/*
 * Раздел «Реф.Бонус».
 *
 * Отдельный файл, потому что раньше у страницы стилей не было вовсе:
 * `.settings-card` объявлена в packs.css, которую эта страница не
 * подключает, а `.inp-narrow`, `.range-cell` и `.range-dash` не
 * объявлены нигде. Поля получали размеры браузера по умолчанию —
 * отсюда обрезанный текст и нечитаемые колонки.
 *
 * Всё вложено в .refbonus-page: имена вроде .settings-card и
 * .status-cell заняты другими разделами, и перебивать их глобально
 * нельзя.
 *
 * Значения — только токены :root из admin.css.
 */

/* ---- Карточка «только за первую покупку» ---- */

.refbonus-page .settings-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.refbonus-page .settings-card .form-field {
  /* Подпись и пояснение должны читаться строкой, а не столбиком по
     два слова: на широком экране места хватает с запасом. */
  flex: 1 1 520px;
  min-width: 0;
}

.refbonus-page .settings-card .form-field__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 14.5px;
  font-family: Roboto-Medium, Arial, sans-serif;
}

.refbonus-page .settings-card .form-field__label i {
  color: var(--muted);
  font-size: 14px;
}

.refbonus-page .settings-card .form-field__hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 780px;
}

.refbonus-page .status-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.refbonus-page .status-text {
  font-family: Roboto-Medium, Arial, sans-serif;
  color: var(--bad);
  font-size: 13.5px;
  transition: color var(--fast);
}

.refbonus-page .status-text.is-active { color: var(--good) }

/* ---- Таблица правил ---- */

/*
 * Минимальная ширина задана намеренно: правило читается слева направо
 * как фраза «за покупку такого-то тарифа на столько-то дней дать
 * столько-то», и переносить её по строкам нельзя. На узком экране
 * появляется горизонтальная прокрутка — это честнее, чем сплющенные
 * до трёх символов поля.
 */
/*
 * Ширины подобраны так, чтобы комментарию гарантированно доставалось
 * не меньше 320 пикселей.
 *
 * Считается это просто: при `table-layout: fixed` колонка с `auto`
 * забирает всё, что осталось от заданных. Заданные в сумме дают 940,
 * значит минимальная ширина таблицы 1260 оставляет комментарию 320,
 * а на широком экране он растёт сам. Первая моя версия ставила
 * min-width 1180 при сумме 1050 — на полутора тысячах пикселей
 * комментарию оставалось полторы сотни, то есть та же обрезка,
 * от которой уходили.
 */
.refbonus-page .refbonus-table {
  min-width: 1260px;
  table-layout: fixed;
}

.refbonus-page .refbonus-table th,
.refbonus-page .refbonus-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

.refbonus-page .refbonus-table th:nth-child(1) { width: 150px }  /* За покупку */
.refbonus-page .refbonus-table th:nth-child(2) { width: 190px }  /* Срок тарифа */
.refbonus-page .refbonus-table th:nth-child(3) { width: 110px }  /* Дней обычной */
.refbonus-page .refbonus-table th:nth-child(4) { width: 110px }  /* Дней VIP */
.refbonus-page .refbonus-table th:nth-child(5) { width: 120px }  /* ГБ трафика */
.refbonus-page .refbonus-table th:nth-child(6) { width: auto }   /* Комментарий */
.refbonus-page .refbonus-table th:nth-child(7) { width: 140px }  /* Статус */
.refbonus-page .refbonus-table th:nth-child(8) { width: 120px }  /* Удалить */

/* Заголовки не должны переносить слова: «Дней обычной» в две строки
   поднимает шапку и рвёт ритм. */
.refbonus-page .refbonus-table th { white-space: nowrap }

/* ---- Поля ---- */

.refbonus-page .inp-adm-style {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}

.refbonus-page .inp-adm-style:hover { border-color: var(--border-strong) }

.refbonus-page .inp-adm-style:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/*
 * Числовые поля. Раньше на них висел .inp-narrow, у которого не было
 * ни одного правила, — поле получало ширину по умолчанию, и вместе
 * со стрелками счётчика на число оставалось два символа.
 */
.refbonus-page .inp-narrow {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Стрелки счётчика съедают место у самого числа. Оставляем их —
     ими пользуются, — но поле теперь достаточно широкое для трёх цифр
     и бесконечности. */
  padding: 0 6px;
}

/* Диапазон «от — до» одной строкой. Класса .range-cell не существовало,
   и оба поля просто вставали друг за другом без выравнивания. */
.refbonus-page .range-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refbonus-page .range-dash {
  color: var(--muted);
  flex: none;
}

/* Комментарий. Однострочное поле обрезало текст на пятой букве, и
   единственное человеческое пояснение к правилу было нечитаемо. */
.refbonus-page .td-comment { vertical-align: top }

.refbonus-page .inp-comment {
  height: auto;
  min-height: 62px;
  padding: 9px 12px;
  line-height: 1.45;
  resize: vertical;
  white-space: pre-wrap;
}

.refbonus-page .inp-comment::placeholder { color: var(--muted) }

/* Селект тарифа: своя стрелка браузера, поэтому справа нужен запас. */
.refbonus-page select.inp-adm-style {
  padding-right: 8px;
  cursor: pointer;
}

/* ---- Статус и удаление ---- */

.refbonus-page .status-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--fast);
}

.refbonus-page .status-cell:hover { background: var(--surface-hover) }

.refbonus-page .td-delete { text-align: right }

.refbonus-page .delete-row-tarif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 69, 58, .26);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
}

.refbonus-page .delete-row-tarif:hover { background: rgba(255, 69, 58, .16) }
.refbonus-page .delete-row-tarif:active { transform: scale(.97) }

@media (max-width: 900px) {
  .refbonus-page .settings-card { align-items: stretch }
  .refbonus-page .status-inline { justify-content: space-between; width: 100% }
}