/* Раздел «Бонусы»: блоки <style> страниц bonuses.php и promocode.php.

   Селекторы таблиц и карточек обёрнуты в .bonuses-page / .promo-page по
   двум причинам: в оригинале .btn и .status-text объявлены без префикса
   и перебили бы одноимённые классы из admin.css на всех остальных
   страницах; и наоборот — локальные варианты должны выигрывать
   у глобальных, а лежат они в файле, порядок подключения которого
   не гарантирован. Поэтому свойства здесь дублируются целиком,
   а не «дописываются» поверх admin.css.

   Раскладка страницы (шапка, показатели, пустое состояние) живёт
   в ui.css. Новые классы формы (.form-fields, .form-field, .ff-*)
   в общем слое не объявлены, поэтому префикс им не нужен. */

/* ===== вертикальный ритм страницы ===== */
.page-body{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================
   bonuses.php — «За действия»
   ============================================================ */

/* Без тени — как .tariffs-table-wrap в системе: слои разделяет светлота
   поверхности, а не подложенная тень. */
.bonuses-page .bonuses-table-wrap{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.bonuses-page .bonuses-table-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:inherit;
  -webkit-overflow-scrolling:touch;
}
.bonuses-page .bonuses-table{
  width:100%;
  min-width: 960px;
  border-collapse:collapse;
  table-layout:auto;
  font-size:14px;
  color:var(--text);
  /* Колонка «Дней VPN» — числовое поле, без табличных цифр она дёргается
     при наборе. */
  font-variant-numeric:tabular-nums;
}
.bonuses-page .bonuses-table thead{ background:rgba(255,255,255,.025); }
.bonuses-page .bonuses-table th{
  font-family:Roboto-Medium; font-size:12.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border);
}
.bonuses-page .bonuses-table th,
.bonuses-page .bonuses-table td{
  padding:12px 14px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bonuses-page .bonuses-table tbody tr{
  background:transparent;
  transition:background var(--fast);
}
.bonuses-page .bonuses-table tbody tr:hover{ background:rgba(255,255,255,.03); }
.bonuses-page .bonuses-table tbody tr:not(:last-child){ border-bottom:1px solid var(--border); }

.bonuses-page .bonuses-table th:nth-child(1){ width:70px; }   /* № */
.bonuses-page .bonuses-table th:nth-child(2){ width:640px; }  /* Описание */
.bonuses-page .bonuses-table th:nth-child(3){ width:200px; }  /* Дни */
.bonuses-page .bonuses-table th:nth-child(4){ width:200px; }  /* Статус */

.bonuses-page .col-num{ color:var(--muted); }

/* инпуты как в тарифах: та же высота поля, что в таблицах тарифов,
   иначе строка бонуса выше строки тарифа на четыре пиксела */
.bonuses-page .bonuses-table .inp-adm-style{
  padding:10px 12px;
  font-size:14px;
}
.bonuses-page .inp-bonus,
.bonuses-page .inp-bonus-name{
  width:100%;
}
.bonuses-page .inp-bonus-name{
  text-align:left;
}
.bonuses-page .inp-bonus-days{
  max-width:110px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* Ячейка «Дней VPN»: поле и подпись единицы измерения. */
.bonuses-page .days-cell{
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.bonuses-page .days-cell .days-unit{ color:var(--muted); font-size:13px; }

/* Статус — как в тарифах: текст + iOS-свитч по центру */
.bonuses-page .td-status .status-cell{
  display:inline-flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  cursor:pointer;
  padding:4px 8px;
  border-radius:var(--radius-sm);
  transition:background var(--fast);
}
.bonuses-page .td-status .status-cell:hover{ background:var(--surface-hover); }
.bonuses-page .status-text{
  font-family:Roboto-Medium;
  color:var(--bad);
  transition:color var(--fast);
}
.bonuses-page .status-text.is-active{
  color:var(--good);
}

@media(max-width: 680px){
  .bonuses-page .bonuses-table th:nth-child(2){ width:420px; }
  .bonuses-page .bonuses-table th:nth-child(3){ width:160px; }
}

/* ============================================================
   promocode.php — «Промокоды»
   ============================================================ */

/* ===== карточка создания =====
   Поверхность та же, что у .form-card в тарифах и пакетах: карточка формы
   в разделе должна быть одна и та же, а не светлее на одной странице
   и темнее на другой. */
.promo-page .pcard{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  transition:border-color var(--base);
}
.promo-page .pcard:hover{ border-color:var(--border-strong); }
/* Заголовок секции: 15px Roboto-Medium, иконка серая. */
.promo-page .pcard-title{
  display:flex; align-items:center; gap:9px;
  font-family:Roboto-Medium; font-size:15px; margin-bottom:14px;
}
.promo-page .pcard-title i{ color:var(--muted); font-size:14px; }

/* ===== сетка полей формы =====
   Раньше это были три колонки одинаковой ширины, а срок действия
   и статус висели отдельной строкой под гридом. Теперь ширина поля
   назначается по смыслу: код широкий, число активаций узкое. */
.form-fields{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:12px 14px;
  align-items:start;
}
.form-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-field__label{ color:var(--text-dim); font-size:13px; }
.form-field__hint{ color:var(--muted); font-size:12.5px; line-height:1.45; }
.form-field__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.form-field .inp-adm-style{ width:100%; }
/* В строке из нескольких контролов поле тянется, а кнопка или подпись
   рядом сохраняет свой размер. */
.form-field__row .inp-adm-style{ flex:1 1 130px; width:auto; min-width:0; }


.ff-2{ grid-column:span 2; }
.ff-3{ grid-column:span 3; }
.ff-4{ grid-column:span 4; }
.ff-5{ grid-column:span 5; }
.ff-6{ grid-column:span 6; }
.ff-7{ grid-column:span 7; }
.ff-8{ grid-column:span 8; }
.ff-12{ grid-column:span 12; }

/* Действие формы — внизу справа, отделено линией от полей.
   Прежняя синяя кнопка во всю ширину карточки весила больше,
   чем сама форма. */
.form-actions{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

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

.promo-page .thin-note{ color:var(--muted); font-size:12.5px; letter-spacing:.02em; }

/* Локальный .btn обязан объявлять фон и тень целиком: порядок подключения
   этого файла относительно admin.css не гарантирован. */
.promo-page .btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border); color:var(--text);
  background:var(--surface-3);
  box-shadow:var(--shadow-soft);
  white-space:nowrap;
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.promo-page .btn:hover{
  background:var(--surface-hover); border-color:var(--border-strong);
  transform:translateY(-1px);
}
.promo-page .btn:active{ transform:translateY(0) scale(.985); }
/* Иконка кнопки того же цвета, что подпись: акцент оставлен активному
   элементу и ссылке, у обычной кнопки он ничего не сообщал. */
.promo-page .btn i{ color:var(--text-dim); transition:color var(--fast); }

.promo-page .status-text{ font-family:Roboto-Medium; color:var(--bad); transition:color var(--fast); }
.promo-page .status-text.is-active{ color:var(--good); }

/* ===== таблица ===== */
.promo-page .orders-table-wrap{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.promo-page .orders-table-scroll{
  overflow-x:auto; overflow-y:hidden; border-radius:inherit;
  -webkit-overflow-scrolling:touch;
}
.promo-page .promos-table{
  width:100%;
  min-width: 920px;
  border-collapse:collapse;
  table-layout:auto;
  font-size:14px;
  color:var(--text);
  /* Колонки «Макс. активаций» и «Активировали раз» — числовые. */
  font-variant-numeric:tabular-nums;
}
.promo-page .promos-table thead{ background:rgba(255,255,255,.025); }
.promo-page .promos-table th{
  font-family:Roboto-Medium; font-size:12.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border);
}
.promo-page .promos-table th,
.promo-page .promos-table td{
  padding:12px 14px; text-align:center; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.promo-page .promos-table tbody tr{
  background:transparent;
  transition:background var(--fast);
}
.promo-page .promos-table tbody tr:hover{ background:rgba(255,255,255,.03); }
.promo-page .promos-table tbody tr:not(:last-child){ border-bottom:1px solid var(--border); }

.promo-page .btn-copy{ margin-left:6px; opacity:.5; transition:opacity var(--fast), color var(--fast); }
.promo-page .click-copy{ cursor:pointer; }
.promo-page .click-copy:hover .btn-copy{ opacity:1; color:var(--accent); }

/* Сам код — моноширинно и в рамке: его копируют, а не читают как текст.
   Оформляем обёртку Copyable, чтобы не заводить лишний узел в разметке. */
.promo-page .promos-table .click-copy{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:var(--radius-sm);
  background:var(--surface-3); border:1px solid var(--border);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.06em; font-size:13.5px;
  transition:border-color var(--fast), background var(--fast);
}
.promo-page .promos-table .click-copy:hover{
  border-color:var(--border-strong); background:var(--surface-hover);
}

.promo-page .btn-danger{
  color:var(--bad);
  background:var(--bad-soft);
  border-color:transparent;
  box-shadow:none;
}
.promo-page .btn-danger i{ color:var(--bad); }
/* Литералы rgba(244,112,127,…) остались от прежней палитры и к новому
   --bad отношения не имели. Теперь наведение — та же заливка плюс
   волосяная рамка. */
.promo-page .btn-danger:hover{
  background:var(--bad-soft);
  border-color:var(--border-strong);
  color:var(--bad);
}

/* ===== пустое состояние =====
   Рисует общий EmptyState: у ячейки снимаем только собственные отступы. */
.bonuses-page tbody tr.row-empty:hover,
.promo-page tbody tr.row-empty:hover{ background:transparent; }
.bonuses-page tbody tr.row-empty > td,
.promo-page tbody tr.row-empty > td{ padding:0; white-space:normal; }

/* SweetAlert2 в стиле панели.

   Самой библиотеки в новом проекте нет (внешние CDN не подключаем),
   поэтому окно собрано вручную: .swal2-popup и кнопки — из оригинала,
   остальное повторяет раскладку SweetAlert2. */
/* Затемнение нейтральное: прежний rgba(4,8,16,…) отдавал синевой,
   которой в палитре больше нет. */
.promo-page .swal2-container{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.promo-page .swal2-popup{
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius); border:1px solid var(--border);
  /* Тень оставлена: окно висит над затемнением, а не лежит в потоке. */
  box-shadow:var(--shadow);
  width:100%; max-width:400px; padding:20px; text-align:center;
}
.promo-page .swal2-icon{
  width:52px; height:52px; margin:0 auto 12px;
  display:grid; place-items:center; border-radius:50%;
  font-size:22px; color:var(--warn);
  background:var(--warn-soft); border:1px solid var(--warn-soft);
}
.promo-page .swal2-title{ font-family:Roboto-Medium; font-size:17px; margin:0 0 8px; }
.promo-page .swal2-html-container{ font-size:14px; color:var(--text-dim); line-height:1.5; }
.promo-page .swal2-actions{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px;
}
.promo-page .swal-btn-danger,
.promo-page .swal-btn-cancel{
  padding:11px 18px; border-radius:12px; border:1px solid transparent;
  font-family:Roboto-Medium; cursor:pointer;
  font-size:14px;
  transition:background var(--fast), border-color var(--fast), filter var(--fast), transform var(--fast);
}
.promo-page .swal-btn-danger{ background:var(--bad); color:#fff; }
.promo-page .swal-btn-danger:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.promo-page .swal-btn-danger:active{ transform:translateY(0) scale(.985); }
.promo-page .swal-btn-cancel{
  background:var(--surface-3); color:var(--text); border-color:var(--border);
}
.promo-page .swal-btn-cancel:hover{ background:var(--surface-hover); border-color:var(--border-strong); }
.promo-page .swal-btn-cancel:active{ transform:scale(.985); }
.promo-page .swal-btn-danger:disabled,
.promo-page .swal-btn-cancel:disabled{
  opacity:.5; cursor:not-allowed; transform:none; filter:none;
}

@media(max-width: 900px){
  .form-fields > .ff-2,
  .form-fields > .ff-3,
  .form-fields > .ff-4,
  .form-fields > .ff-5,
  .form-fields > .ff-6,
  .form-fields > .ff-7,
  .form-fields > .ff-8{ grid-column:span 12; }
  .form-actions{ flex-direction:column-reverse; align-items:stretch; }
  .form-actions > *{ justify-content:center; }
}