/* Раздел «Тарифы VIP»: блоки <style> из tarifs-family-vip.php и
   add-tarif-family-vip.php. Правила iziToast и SweetAlert2 не переносятся —
   тосты и подтверждение в новой админке свои.

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

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

/* Подпись перед переключателем в панели инструментов. Своя, а не
   .toolbar__*: элемент общего блока в общем слое не объявлен. */
.tb-caption{ color:var(--muted); font-size:13px; white-space:nowrap }

/* ===== ширины колонок списка =====
   В assets/main.css они заданы на .tariffs-table без модификатора, но эту
   же таблицу использует раздел «Тарифы Main» с другим набором колонок,
   поэтому здесь ширины привязаны к модификатору. У VIP колонок одиннадцать:
   к набору Main добавлены «Базовая квота» и «При продлении». */
.tariffs-table--vip th:nth-child(1){ width:64px }
.tariffs-table--vip th:nth-child(2){ width:180px }
.tariffs-table--vip th:nth-child(3){ width:110px }
.tariffs-table--vip th:nth-child(4){ width:170px }
.tariffs-table--vip th:nth-child(5){ width:120px }
.tariffs-table--vip th:nth-child(6){ width:150px }
.tariffs-table--vip th:nth-child(7){ width:150px }
.tariffs-table--vip th:nth-child(8){ width:250px }
.tariffs-table--vip th:nth-child(9){ width:170px }
.tariffs-table--vip th:nth-child(10){ width:150px }
.tariffs-table--vip th:nth-child(11){ width:96px }

.tariffs-table--vip thead th{ border-bottom:1px solid var(--border) }

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

.device-switch{
  display:inline-flex;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:3px;
  gap:3px;
}
.device-switch-btn{
  border:1px solid transparent;
  outline:0;
  cursor:pointer;
  padding:8px 12px;
  border-radius:var(--radius-xs);
  background:transparent;
  color:var(--text-dim);
  font-size:13.5px;
  font-family:inherit;
  white-space:nowrap;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.device-switch-btn:hover{ background:var(--surface-hover); color:var(--text) }
.device-switch-btn:active{ background:var(--surface-active) }

/* Переключатели во всей админке синие — общим правилом из ui.css.
 *
 * Здесь стояли два переопределения, красившие активный элемент в
 * оранжевый (`--warn`): у кнопки устройства в строке VIP-таблицы и у
 * сегментированного переключателя в панели инструментов. Второе было
 * написано с расчётом на то, что «файл подключают только страницы VIP»,
 * — а это неправда: макет грузит ВСЕ файлы стилей на каждой странице
 * (см. apps/admin/src/app/layout.tsx). Поэтому оранжевыми становились
 * сегменты по всей панели — и на дашборде, и в тарифах, и в VIP.
 *
 * Правила убраны целиком, а не перекрашены: цвет активного состояния
 * должен задаваться в одном месте, иначе следующая такая «локальная»
 * правка снова разъедется по всей админке. Вид активной кнопки теперь
 * берётся из tarifs-main.css, где он и был синим.
 */

.inp-small{ width:104px }
.inp-medium{ width:150px }
.td-tag{ min-width:230px }

/* Вариант устройства внутри ячейки. Раньше был display:contents, из-за чего
   тумблер приходилось поднимать transform'ом; обычный инлайн-флекс
   выравнивает поле, подпись и тумблер сам. */
.variant-hidden{ display:none }
.variant-active{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  vertical-align:middle;
}
.td-tag .variant-active{ flex-direction:row; gap:10px }

/* Подпись статуса — тем же начертанием, что .status-text в системе.
   Отступ до тумблера даёт gap у .status-cell, свой margin не нужен. */
.variant-status-text{
  font-family:Roboto-Medium;
  color:var(--bad);
}
.variant-status-text.is-active{ color:var(--good) }

/* Поле квоты при продлении раньше стояло в постоянной жёлтой рамке —
   цветная обводка повторялась в каждой строке и читалась как ошибка.
   Колонки и так подписаны в шапке и пояснением под полем, поэтому
   в покое рамка обычная, а тёплым остаётся только кольцо фокуса. */
.vip-renew-input:focus{ box-shadow:0 0 0 3px var(--warn-soft) }

.vip-help-text{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

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

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

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

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

.tariffs-table--vip .delete-row-tarif{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Ручка перетаскивания: в покое почти незаметна, при наведении на строку
   становится кнопкой — иначе непонятно, за что тянуть. */
.tariffs-table--vip .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);
}
.tariffs-table--vip tbody tr:hover .tariffs-grip{ opacity:1 }
/* Ручка при наведении светлеет, но не красится акцентом: курсор идёт
   по списку сверху вниз, и цветная вспышка в каждой строке рябила. */
.tariffs-table--vip tbody tr:hover .tariffs-grip i{
  background:var(--surface-3);
  border-color:var(--border);
  color:var(--text);
}
.tariffs-table--vip .tariffs-grip:active{ cursor:grabbing }
.tariffs-table--vip .tariffs-grip:active i{
  background:var(--surface-active);
  border-color:var(--border-strong);
}

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

@media(max-width: 900px){
  .device-switch-btn{ padding:8px 10px }
  .inp-small{ width:88px }
  .tariffs-table--vip .inp-adm-style{ width:88px }
}

/* ===== форма «Добавить VIP-тариф» =====
   Была набором разноширинных инпутов в строку с подписью слева.
   Стала сеткой на 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) }

/* Секция без своего фона: раньше шло surface-2 → surface → surface-2,
   и вложенная коробка устройства читалась как дыра в карточке. Теперь
   светлота только растёт: карточка → секция (одна линия) → коробка. */
.devices-card{
  margin-top:14px;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
/* Заголовок секции: 15px Roboto-Medium, иконка серая. Цвет раздела
   остаётся у шапки страницы и активного переключателя, а не у каждой
   иконки подряд. */
.devices-card-title{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text);
  font-family:Roboto-Medium;
  font-size:15px;
  margin-bottom:12px;
}
.devices-card-title i{ color:var(--muted); font-size:14px }
.devices-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.device-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  background:var(--surface);
  transition:border-color var(--base);
}
.device-box:hover{ border-color:var(--border-strong) }
.device-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:Roboto-Medium;
  font-size:15px;
  color:var(--text);
  margin-bottom:12px;
}
.device-title i{ color:var(--muted); font-size:14px }

@media (max-width: 1000px){
  .devices-grid{ grid-template-columns:1fr }
}
@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 }
}