/*
 * Раздел «Бонусы → Скидка».
 *
 * Всё вложено в .discount-page: имена вроде .settings-card, .card-title
 * и .status-cell заняты другими разделами, и перебивать их глобально
 * нельзя — иначе правка здесь тихо поедет в «Пакеты» или «Реф.Бонус».
 *
 * Сетка полей (.form-fields, .ff-*) и поле .inp-adm-style берутся
 * готовыми из общих файлов, здесь только то, чего нет: две колонки
 * карточек, выбор тарифов галочками и предпросмотр сообщения.
 *
 * Значения — только токены :root из admin.css.
 */

/* ---- Две колонки: слева условие, справа само сообщение ---- */

/*
 * Порядок не случаен. Слева задаётся, КОГДА и КОМУ, справа — ЧТО
 * человек увидит, и рядом живой предпросмотр. Так правка текста и
 * результат оказываются в одном поле зрения: иначе приходится
 * прокручивать страницу туда-обратно на каждое слово.
 */
.discount-page .discount-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.discount-page .discount-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1200px) {
  /* На узком экране две колонки дали бы поля в полтора слова шириной. */
  .discount-page .discount-grid { grid-template-columns: minmax(0, 1fr) }
}

/* ---- Карточка ---- */

/*
 * Карточка — обычный блок.
 *
 * В packs.css `.settings-card` объявлена флекс-СТРОКОЙ с
 * `align-items: flex-end`: там в карточке лежат одно поле и кнопка
 * рядом. Здесь же внутри заголовок, сетка полей и предупреждения —
 * и как элементы флекс-строки они вставали друг рядом с другом, а
 * сетка полей сжималась по содержимому вместо ширины карточки.
 */
.discount-page .settings-card {
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.discount-page .card-title {
  font-family: Roboto-Medium, Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
}

.discount-page .card-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Предупреждение внутри карточки: заметное, но не кричащее. */
.discount-page .card-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 159, 10, .26);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.discount-page .card-warn i {
  color: var(--warn);
  margin-top: 2px;
}

/* Тумблер «включено» стоит в одной строке с подписью. */
.discount-page .discount-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.discount-page .discount-status .card-title { margin-bottom: 4px }
.discount-page .discount-status .card-hint { margin: 0 }

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

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

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

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

/*
 * Своя сетка полей вместо общей двенадцатиколоночной.
 *
 * Общая рассчитана на карточку во всю ширину страницы. Здесь карточка
 * живёт в одной из двух колонок — это около 530 пикселей, то есть 31
 * пиксель на столбец, и поле шириной в два столбца получалось уже
 * собственной подписи над ним: подписи и пояснения соседних полей
 * налезали друг на друга.
 *
 * Ширину теперь не назначаем вручную вовсе: колонка не уже 168 пикселей,
 * а сколько их поместится — решает браузер. На узком экране поля сами
 * встают в столбик, и подгонять числа под каждую ширину не нужно.
 */
.discount-page .form-fields {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/*
 * Снимаем жёсткую минимальную ширину поля.
 *
 * В packs.css стоит `.settings-card .form-field { min-width: 220px }`,
 * и она перебивает общее `min-width: 0`. Поле получалось шире своей
 * колонки — 220 против 141 — и налезало на соседнее. Именно это, а не
 * выбор ширин, и было причиной съехавшей вёрстки.
 */
.discount-page .settings-card .form-field {
  min-width: 0;
}

/* Ширины из общей сетки внутри этой карточки неприменимы: span 6 в
   трёхколоночном ряду вылезает за край. Гасим на всякий случай. */
.discount-page .form-fields > .form-field {
  grid-column: auto;
}

/* Поле на всю строку — название, признак, текст сообщения. */
.discount-page .form-fields > .ff-wide {
  grid-column: 1 / -1;
}

/*
 * Строка из нескольких коротких полей — своя вложенная сетка.
 *
 * В общей сетке они делили дорожки с полями во всю ширину, и пустая
 * дорожка справа не схлопывалась: на широком экране тройка чисел
 * прижималась влево, оставляя четверть строки пустой. Здесь дорожек
 * ровно столько, сколько полей, и они делят ширину поровну.
 */
.discount-page .form-fields > .form-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 14px;
  align-items: start;
}

/*
 * Переключатель признака.
 *
 * Подписи тут длинные («Не купил после регистрации»), и на узком экране
 * плашка вылезала бы за край карточки. Переносить её саму нельзя —
 * это пилюля, и в две строки она выглядит как клякса. Поэтому кнопки
 * делят ширину поровну, а текст переносится внутри них; скругление
 * меняем на прямоугольное, иначе двухстрочная кнопка не влезает в дугу.
 */
.discount-page .seg {
  display: flex;
  max-width: 100%;
  border-radius: var(--radius);
}

.discount-page .seg__item {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  border-radius: var(--radius-sm);
}

.discount-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);
}

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

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

.discount-page .inp-adm-style::placeholder { color: var(--muted) }

/* Текст уведомления. Однострочное поле здесь бесполезно: сообщение
   на два-три предложения, и его надо видеть целиком. */
.discount-page .inp-text {
  height: auto;
  min-height: 150px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
  white-space: pre-wrap;
}

.discount-page .form-field__hint code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 12px;
}

/* ---- Выбор тарифов ---- */

.discount-page .plan-group { margin-bottom: 14px }
.discount-page .plan-group:last-child { margin-bottom: 0 }

.discount-page .plan-group__title {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-bottom: 8px;
}

.discount-page .plan-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * Галочка на СЕМЕЙСТВО, а не на строку тарифа. У каждого семейства в
 * базе по строке на вариант количества устройств, и выбор построчно
 * означал бы, что скидка на «Месяц» достаётся только тем, кто берёт
 * версию на два устройства. Владельцу такое различать незачем.
 */
.discount-page .plan-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}

.discount-page .plan-check:hover { border-color: var(--border-strong) }

.discount-page .plan-check:has(input:checked) {
  border-color: var(--border-accent);
  background: var(--accent-soft);
  color: var(--text);
}

.discount-page .plan-check input { accent-color: var(--accent); cursor: pointer }

/* ---- Предпросмотр сообщения ---- */

.discount-page .tg-preview {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.discount-page .tg-preview__text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

.discount-page .tg-preview__text a { color: var(--accent) }

/* Кнопка нарисована, а не активна: это предпросмотр, нажимать нечего. */
.discount-page .tg-preview__button {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13.5px;
  text-align: center;
}

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

.discount-page .discount-table {
  min-width: 1180px;
  table-layout: fixed;
}

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

.discount-page .discount-table th { white-space: nowrap }

.discount-page .discount-table th:nth-child(1) { width: auto }   /* Название */
.discount-page .discount-table th:nth-child(2) { width: 260px }  /* Когда */
.discount-page .discount-table th:nth-child(3) { width: 110px }  /* Через */
.discount-page .discount-table th:nth-child(4) { width: 100px }  /* Скидка */
.discount-page .discount-table th:nth-child(5) { width: 130px }  /* Действует */
.discount-page .discount-table th:nth-child(6) { width: 130px }  /* Тарифы */
.discount-page .discount-table th:nth-child(7) { width: 150px }  /* Статус */
/* Две кнопки в ряд занимают 215 px плюс зазор, и с отступами ячейки по
   14 px это ровно 243 — замерено в браузере на боевых стилях. Берём 250,
   чтобы правый отступ не съедался. */
.discount-page .discount-table th:nth-child(8) { width: 250px }  /* Действия */

.discount-page .discount-name {
  font-family: Roboto-Medium, Arial, sans-serif;
  color: var(--text);
  /* Пунктир под названием — единственный намёк, что строка куда-то
     ведёт. Без него название неотличимо от соседних ячеек, и войти в
     правило можно было только случайно. */
  border-bottom: 1px dashed var(--border-strong);
}

.discount-page .discount-name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.discount-page .discount-trigger { color: var(--text-dim) }

.discount-page .discount-percent {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--good-soft);
  color: var(--good);
  font-family: Roboto-Medium, Arial, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.discount-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);
}

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

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

.discount-page .row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Правка — действие обычное, поэтому кнопка нейтральная: красную
   заливку оставляем удалению, иначе две одинаково громкие кнопки рядом
   и промахнуться легко. */
.discount-page .edit-row-tarif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}

.discount-page .edit-row-tarif:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.discount-page .edit-row-tarif:active { transform: scale(.97) }

.discount-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);
}

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