/* Пакеты трафика VIP и интервальные цены устройств.
   Классы перенесены из блоков <style> старых страниц
   vip-pockets-traffic.php, add-vip-pocket-traffic.php,
   pockets-devices-intervals.php.

   Раскладка страницы (шапка, показатели, пустое состояние) живёт
   в ui.css — здесь только специфика этих двух таблиц и формы. */

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

/* Ширины колонок. В старой панели они лежали в общем main.css
   (th:nth-child(1..9)), а страница интервалов перебивала их своими.
   Здесь оба набора привязаны к своей таблице, чтобы не задеть
   другие таблицы админки. */
#vipTrafficTable th:nth-child(1){ width:70px; }
#vipTrafficTable th:nth-child(2){ width:170px; }
#vipTrafficTable th:nth-child(3){ width:140px; }
#vipTrafficTable th:nth-child(4){ width:250px; }
#vipTrafficTable th:nth-child(5){ width:170px; }
#vipTrafficTable th:nth-child(6){ width:150px; }
#vipTrafficTable th:nth-child(7){ width:96px; }

#intervalsTable th:nth-child(1){ width:70px; }
#intervalsTable th:nth-child(2){ width:150px; }
#intervalsTable th:nth-child(3){ width:150px; }
#intervalsTable th:nth-child(4){ width:140px; }
#intervalsTable th:nth-child(5){ width:250px; }
#intervalsTable th:nth-child(6){ width:170px; }
#intervalsTable th:nth-child(7){ width:150px; }
#intervalsTable th:nth-child(8){ width:96px; }

#vipTrafficTable thead th,
#intervalsTable thead th{ border-bottom:1px solid var(--border); }

/* Перетаскиваемая строка: акцентная заливка. Обычной подсветки наведения
   тут мало — под курсором строка и так подсвечена. */
.sorting-row{ background:var(--accent-soft) !important; }

/* ===== ячейки и поля ввода в таблицах ===== */

/* Иначе колонки с ГБ и ценами дёргаются при вводе. */
#vipTrafficTable td,
#vipTrafficTable input,
#intervalsTable td,
#intervalsTable input{ font-variant-numeric:tabular-nums; }

/* Редактируемые ячейки: одинаковая ширина числовых полей и текст по центру,
   иначе колонка выглядит рваной. */
#vipTrafficTable .inp-adm-style,
#intervalsTable .inp-adm-style{
  width:104px;
  text-align:center;
  padding:10px 12px;
  font-size:14px;
}
#vipTrafficTable .inp-tag-text,
#intervalsTable .inp-tag-text{ width:150px; }

/* Поле тега и тумблер стоят в одной ячейке: выравниваем по середине
   строки вместо прежнего сдвига transform'ом. */
.td-popular .inp-adm-style,
.td-popular .toggle-cell{ vertical-align:middle; }
.td-popular .toggle-cell{ margin-left:10px; }

/* Строка подсвечивается и когда в ней просто стоит курсор ввода. */
#vipTrafficTable tbody tr:focus-within,
#intervalsTable tbody tr:focus-within{ background:rgba(255,255,255,.03); }

#vipTrafficTable .delete-row-tarif{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* «Удалить» на странице интервалов в оригинале — просто красный текст:
   класс .delete-row-interval в legacy CSS отсутствовал, в отличие от
   .delete-row-tarif с красной плашкой. Расхождение сохранено, добавлено
   только состояние наведения — без него кнопка не отзывается на курсор. */
.delete-row-interval{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--bad);
  cursor:pointer;
  padding:9px 14px;
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  transition:background var(--fast), border-color var(--fast);
}
.delete-row-interval:hover{ background:var(--bad-soft); border-color:var(--bad-soft); }
.delete-row-interval:active{ background:var(--bad-soft); border-color:var(--border-strong); }

/* Ручка перетаскивания: в покое почти незаметна, при наведении на строку
   становится кнопкой — иначе непонятно, за что тянуть. */
#vipTrafficTable .tariffs-grip i,
#intervalsTable .tariffs-grip i{
  display:inline-grid;
  place-items:center;
  width:38px; height:32px;
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  color:var(--muted);
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
#vipTrafficTable tbody tr:hover .tariffs-grip,
#intervalsTable tbody tr:hover .tariffs-grip{ opacity:1; }
/* Ручка при наведении светлеет, но не красится акцентом: курсор идёт
   по списку сверху вниз, и синяя вспышка в каждой строке рябила. */
#vipTrafficTable tbody tr:hover .tariffs-grip i,
#intervalsTable tbody tr:hover .tariffs-grip i{
  background:var(--surface-3);
  border-color:var(--border);
  color:var(--text);
}
#vipTrafficTable .tariffs-grip:active,
#intervalsTable .tariffs-grip:active{ cursor:grabbing; }
#vipTrafficTable .tariffs-grip:active i,
#intervalsTable .tariffs-grip:active i{
  background:var(--surface-active);
  border-color:var(--border-strong);
}

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

/* ===== форма добавления =====
   Была набором разноширинных инпутов в строку с подписью слева.
   Стала сеткой на 12 колонок: подпись сверху, поле снизу, ширина
   колонки — по смыслу поля. */

/* Тени нет: карточку от фона страницы отделяет светлота поверхности. */
.form-card{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.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; }
/* Поле занимает всю отведённую колонку: ширину задаёт сетка, а не input. */
.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-6{ grid-column:span 6; }
.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;
}
/* Подпись рядом с тумблером: раньше цвет задавался инлайном. */
.toggle-caption{ color:var(--text-dim); }

@media (max-width: 860px){
  .form-card{ padding:16px 14px; }
  .form-fields > .ff-2,
  .form-fields > .ff-3,
  .form-fields > .ff-4,
  .form-fields > .ff-6,
  .form-fields > .ff-8{ grid-column:span 12; }
  .form-actions{ flex-direction:column-reverse; align-items:stretch; }
  .form-actions > *{ justify-content:center; }
  .ios-toggle{ --w:52px; --h:30px; }
}

/* ===== карточка лимита устройств =====
   Лимит — не фильтр и сохраняется отдельной кнопкой, поэтому он остался
   собственной карточкой над таблицей, а не уехал в панель инструментов
   рядом с «Сохранить информацию»: две разные кнопки сохранения в одной
   полосе читались бы как одна. */
.settings-card{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.settings-card .form-field{ min-width:220px; }
.settings-card .form-field__label{
  display:flex;
  align-items:center;
  gap:8px;
}
.settings-card .form-field__label i{ color:var(--muted); }
.settings-card .inp-adm-style{
  width:180px;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

@media (max-width: 700px){
  .settings-card{ align-items:stretch; }
  .settings-card .form-field,
  .settings-card .inp-adm-style{ width:100%; }
  .settings-card .btn-primary{ justify-content:center; }
}

/* ===== модалка «Удаляем…» =====
   В оригинале её рисовал SweetAlert2 поверх окна подтверждения
   (showLoading + allowOutsideClick:false). Общий ConfirmDialog такого
   состояния не знает, поэтому оно своё и со своими именами классов —
   confirm-dialog.css в этот момент со страницы уже снят. */
/* Затемнение нейтральное: прежний rgba(4,8,16,…) отдавал синевой,
   которой в палитре больше нет. */
.packs-busy{
  position:fixed; inset:0; z-index:1060;
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:packs-busy-fade var(--base) both;
}
.packs-busy__popup{
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius);
  border:1px solid var(--border);
  /* Тень оставлена: окно висит над затемнением, а не лежит в потоке. */
  box-shadow:var(--shadow);
  width:26em; max-width:100%;
  padding:20px 18px;
  text-align:center;
}
.packs-busy__title{ font-size:17px; font-family:Roboto-Medium; color:var(--text); margin:0; }
.packs-busy__loader{
  width:34px; height:34px; margin:14px auto 0;
  border-radius:50%; border-width:4px; border-style:solid;
  border-color:var(--accent) transparent var(--accent) transparent;
  animation:packs-busy-spin .9s linear infinite;
}
/* На VIP-странице кольцо загрузки было жёлтым (.swal2-loader в её <style>). */
.packs-busy--vip .packs-busy__loader{
  border-color:var(--warn) transparent var(--warn) transparent;
}

@keyframes packs-busy-spin{
  to{ transform:rotate(360deg); }
}
@keyframes packs-busy-fade{
  from{ opacity:0 }
  to{ opacity:1 }
}