/* Раздел «Биллинг и платёжки»: блоки <style> из billing-providers.php,
   add-billing-provider.php, billing-nodes.php, add-billing-node.php,
   payments-systems.php и add-payments.php.

   Всё, кроме модалки удаления, обёрнуто в .billing-page. Имена .form-card,
   .form-grid, .box, .nodes-table дословные из legacy и повторяются
   в packs.css, tarifs-*.css, vip-*.css и auth.css, а файл раздела остаётся
   в <head> после клиентского перехода — без обёртки правила утекали бы
   на чужие страницы (и чужие на эти).

   Раскладку страниц держит общий слой (ui.css): шапка .page-head с
   действиями, .stats-grid со сводкой, .detail-grid с прилипающей боковой
   колонкой, пустые состояния. Здесь — только то, чего в нём нет. */

/* Само окно подтверждения — общий ConfirmDialog и /css/confirm-dialog.css.
   Здесь только отступ у иконки в кнопке удаления и блокирующий лоадер,
   который SweetAlert2 показывал после подтверждения (Swal.showLoading).
   Оба блока рисуются вне .billing-page, поэтому без обёртки.

   Своего :hover здесь намеренно нет. Раньше стояло filter:brightness(.95),
   что при той же специфичности спорило с brightness(1.08) из
   confirm-dialog.css: кнопка то темнела, то светлела в зависимости от
   порядка <link> в <head>. Ховер держит общий файл диалога. */
.swal-btn-danger i{ margin-right:6px; }

.billing-busy{
  position:fixed; inset:0; z-index:1070;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:10px;
}
.billing-busy__popup{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 26px; text-align:center;
}
.billing-busy__title{ font-size:16px; font-family:Roboto-Medium; }

/* ===================== ДЕЙСТВИЯ В ШАПКЕ СТРАНИЦЫ ===================== */

/* .btn-top-right из admin.css рассчитан на строку крошек: он несёт нижний
   отступ и остаётся строчным, потому что в оригинале лежал в <div>. В ряду
   действий шапки и в пустом состоянии это перекашивает строку. */
.billing-page .page-head__actions .btn-top-right,
.billing-page .empty__action .btn-top-right{
  display:inline-flex; align-items:center; margin-bottom:0;
}

/* Сохранение и создание раньше были широкими кнопками внизу страницы: на
   длинной таблице до них надо было доскроллить. В шапке стоит общая
   .btn-primary из admin.css — своей кнопки раздел не заводит. */

.billing-page .billing-stats{ margin-bottom:14px; }

/* ===================== ОБЩЕЕ ДЛЯ ТАБЛИЦ РАЗДЕЛА ===================== */

.billing-page .providers-table-wrap,
.billing-page .nodes-table-wrap{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.billing-page .providers-table,
.billing-page .nodes-table{
  width:100%; border-collapse:collapse;
  font-size:14px; color:var(--text);
  /* Суммы и даты стоят колонкой — пропорциональные цифры её дёргают. */
  font-variant-numeric:tabular-nums;
}

.billing-page .providers-table thead,
.billing-page .nodes-table thead{ background:rgba(255,255,255,.025); }

.billing-page .providers-table th,
.billing-page .nodes-table th{
  font-family:Roboto-Medium; font-weight:400;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}

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

.billing-page .providers-table tbody tr,
.billing-page .nodes-table tbody tr{ transition:background var(--fast); }
.billing-page .providers-table tbody tr:hover,
.billing-page .nodes-table tbody tr:hover{ background:rgba(255,255,255,.03); }
.billing-page .providers-table tbody tr:not(:last-child),
.billing-page .nodes-table tbody tr:not(:last-child){ border-bottom:1px solid var(--border); }

.billing-page .providers-table .col-num,
.billing-page .nodes-table .col-num{ width:52px; color:var(--muted); }
.billing-page .providers-table .td-delete{ width:150px; }
.billing-page .nodes-table .td-delete{ width:150px; white-space:nowrap; }
.billing-page .status-text{ margin-right:2px; }

/* Строка-заглушка не должна подсвечиваться как обычная, а её ячейка —
   поджимать блок пустого состояния своими отступами и nowrap. */
.billing-page tbody tr.row-empty:hover{ background:transparent; }
.billing-page tbody tr.row-empty td{ padding:0; white-space:normal; }
/* Селектор с id перебивает правило выше — у платёжек он свой. */
.billing-page #paymentsTable tbody tr.row-empty td{ padding:0; white-space:normal; }

/* Кнопка удаления в строке. Подъёма под курсором нет — он подбрасывал
   ячейку в каждой строке таблицы; наведение заливает кнопку целиком. */
.billing-page .delete-provider,
.billing-page .delete-node{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--radius-xs);
  background:var(--bad-soft); color:var(--bad);
  border:0; font-size:13px;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:background var(--fast), color var(--fast), transform var(--fast);
}
.billing-page .delete-provider:hover,
.billing-page .delete-node:hover{ background:var(--bad); color:#fff; }
.billing-page .delete-provider:active,
.billing-page .delete-node:active{ transform:scale(.98); }

.billing-page .date-hint{ color:var(--muted); font-size:11.5px; margin-top:5px; }

/* Поля провайдера и описания тянутся: в них длинные строки. */
.billing-page .sel-provider{ min-width:220px; width:100%; }
.billing-page .inp-desc{ min-width:260px; width:100%; }
.billing-page .inp-adm-style{ font-variant-numeric:tabular-nums; }

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

/* ===================== ФОРМЫ ДОБАВЛЕНИЯ ===================== */

.billing-page .form-card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:15px;
}
.billing-page .form-grid{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:12px 14px;
  align-items:center;
}
.billing-page .form-grid .label{
  display:flex; align-items:center; gap:9px;
  color:var(--text-dim); font-size:13.5px;
}
/* Иконка подписи серая. Раньше акцентом были подсвечены все шесть подписей
   формы разом — синий переставал что-либо выделять. */
.billing-page .form-grid .label i{ color:var(--muted); font-size:13px; width:14px; }
.billing-page .form-grid--top{ align-items:flex-start; }
.billing-page .form-grid--top .label{ padding-top:11px; }
/* Длинному описанию и списку провайдеров тесно в 250px из .form-add-inp. */
.billing-page .form-grid textarea.inp-adm-style{
  width:100%; max-width:560px; min-height:88px; resize:vertical; line-height:1.5;
}
.billing-page .form-grid select.inp-adm-style{ width:100%; max-width:320px; cursor:pointer; }
.billing-page .form-grid select.inp-adm-style option{ background:var(--surface); color:var(--text); }

@media (max-width: 880px){
  .billing-page .form-grid{ grid-template-columns:1fr; gap:10px 0; }
  .billing-page .form-grid .label{ padding-top:2px; }
  .billing-page .form-grid--top .label{ padding-top:2px; }
}

/* ===================== ПЛАТЁЖНЫЕ СИСТЕМЫ ===================== */

/* Общий .tariffs-table-wrap несёт margin-top:20px из admin.css — он рассчитан
   на страницы тарифов, где таблица идёт сразу за крошками. Здесь над ней
   стоит сводка со своим отступом, и 20px сверху были пустой полосой. */
.billing-page .tariffs-table-wrap{ margin-top:0; }

.billing-page #paymentsTable{ min-width:1100px; }
.billing-page #paymentsTable th,
.billing-page #paymentsTable td{
  padding:12px 14px; text-align:center; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.billing-page #paymentsTable .col-num{ width:52px; color:var(--muted); }
.billing-page #paymentsTable .name-payments{ width:250px; }
.billing-page #paymentsTable .img-thumb{
  width:44px; height:44px; object-fit:contain;
  background:var(--surface); border-radius:var(--radius-xs);
  border:1px solid var(--border);
  display:inline-block; vertical-align:middle;
  transition:border-color var(--fast);
}
/* Наведение меняет только рамку: масштабирование иконки распирало строку
   таблицы по высоте. */
.billing-page #paymentsTable tbody tr:hover .img-thumb{ border-color:var(--border-strong); }
.billing-page #paymentsTable .file-hint{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.billing-page #paymentsTable .inp-image-url{
  display:block; width:240px; margin:0 auto;
  padding:9px 12px; font-size:13.5px;
}
.billing-page #paymentsTable .td-status .status-text{ margin-right:10px; color:var(--text-dim); }
.billing-page #paymentsTable .td-status .status-text.is-active{ color:var(--good); }
.billing-page #paymentsTable .tariffs-grip{
  cursor:grab; color:var(--muted);
  transition:color var(--fast), opacity var(--fast);
}
.billing-page #paymentsTable .tariffs-grip:hover{ color:var(--accent); }
.billing-page #paymentsTable .tariffs-grip:active{ cursor:grabbing; }
.billing-page #paymentsTable .tariffs-grip i{ font-size:16px; }
/* Перетаскиваемая строка — единственный случай акцентной заливки в разделе.
   Вставная тень в 3px слева, изображавшая полосу, убрана: границы в панели
   волосяные, а строка и так выделена фоном. */
.billing-page #paymentsTable .sorting-row{
  background:var(--accent-soft) !important;
}

/* ===================== ДОБАВЛЕНИЕ ПЛАТЁЖНОЙ СИСТЕМЫ ===================== */

.billing-page .box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
/* Заголовок карточки — строка 15px Roboto-Medium без иконки в цветном
   квадрате: квадрат остался только у шапки страницы. */
.billing-page .box-header{
  display:flex; align-items:center; gap:9px;
  padding:13px 15px; border-bottom:1px solid var(--border);
  font-family:Roboto-Medium; font-size:15px; color:var(--text);
}
.billing-page .box-header i{ color:var(--muted); font-size:14px; flex:none; }
.billing-page .box-body{ padding:15px; }

/* Поля формы внутри карточки: подпись сверху, поле во всю ширину колонки. */
.billing-page .box label.lbl{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-dim); margin:14px 0 6px;
}
.billing-page .box label.lbl:first-child{ margin-top:0; }
.billing-page .box label.lbl i{ color:var(--muted); font-size:12.5px; }
.billing-page .box .inp-adm-style{ width:100%; min-height:42px; }
.billing-page .box select.inp-adm-style{ cursor:pointer; }
.billing-page .box select.inp-adm-style option{ background:var(--surface); color:var(--text); }

.billing-page .preview-card{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:15px; text-align:center;
}
.billing-page .preview-card .icon{
  width:88px; height:88px; border-radius:var(--radius-sm); object-fit:contain;
  background:var(--surface); border:1px dashed var(--border);
}
.billing-page .preview-card .preview-name{ font-family:Roboto-Medium; font-size:15px; color:var(--text); }
.billing-page .preview-card .muted{ color:var(--muted); font-size:12.5px; }

/* Оговорка на ровной поверхности. Раньше весь блок был залит жёлтым и весь
   текст в нём — жёлтым же; на странице это читалось как ошибка, хотя это
   пояснение. Внимание держит одна иконка. */
.billing-page .billing-note{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:13px 15px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); font-size:13px; line-height:1.55;
}
.billing-page .billing-note i{ margin-top:2px; flex:none; color:var(--warn); }

@media (max-width: 620px){
  .billing-page .providers-table th,
  .billing-page .providers-table td,
  .billing-page .nodes-table th,
  .billing-page .nodes-table td{ padding:11px 12px; }
}
