/* Раздел «Тарифы Main»: инлайн-<style> страниц tarifs-family-main.php
   и add-tarif-family-main.php плюс ширины колонок из assets/main.css.

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

/* ===== вертикальный ритм страницы =====
   Раньше блоки разъезжались собственными margin-top: у таблицы 20px,
   у кнопки сохранения 16px, у обёртки 26px. Теперь расстояние одно. */
.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; }

/* ===== список ===== */

/* Перетаскиваемая строка: акцентная заливка. Обычной подсветки наведения
   тут мало — под курсором строка и так подсвечена. */
.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); }
/* Заливка ровная и без свечения: переключатель стоит в каждой строке
   таблицы, и градиент с ореолом рябил на весь список. */
.device-switch-btn.active{
  background:var(--accent);
  color:#fff;
}
.device-switch-btn.active:hover{ filter:brightness(1.08); color:#fff; }

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

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

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

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

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

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

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

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

/* Ширины колонок таблицы тарифов. Привязаны к id, чтобы не спорить
   с другими разделами, которые используют класс .tariffs-table. */
#tariffsTable th:nth-child(1){ width:64px; }
#tariffsTable th:nth-child(2){ width:170px; }
#tariffsTable th:nth-child(3){ width:110px; }
#tariffsTable th:nth-child(4){ width:170px; }
#tariffsTable th:nth-child(5){ width:120px; }
#tariffsTable th:nth-child(6){ width:120px; }
#tariffsTable th:nth-child(7){ width:250px; }
#tariffsTable th:nth-child(8){ width:170px; }
#tariffsTable th:nth-child(9){ width:150px; }
#tariffsTable th:nth-child(10){ width:96px; }

/* ===== пустое состояние =====
   Рисует общий EmptyState: своя вёрстка «иконка + заголовок + подсказка»
   больше не нужна, у ячейки снимаем только собственные отступы. */
#tariffsTable tbody tr.row-empty:hover{ background:transparent; }
#tariffsTable tbody tr.row-empty > td{ padding:0; white-space:normal; }

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

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