/*
 * Стили страниц «VIP Пользователи» (/vip-users) и «История Апгрейдов»
 * (/upgrades-history). Перенос блоков <style> из vip-users.php и
 * upgrades-history.php — общая часть у них совпадала до символа.
 *
 * Всё заперто внутри .vip-users-page / .upgrades-page. В оригинале
 * локальный <style> шёл после main.css и действовал только на своей
 * странице; здесь листы страниц живут в одном документе, и без ограничителя
 * .stat-card подрался бы с одноимённым классом vip-stats.css, а
 * .status-pill — с безусловным правилом subscribes.css.
 *
 * Шапка страницы, плитки показателей и пустые состояния переехали в ui.css:
 * .big-stat-* и .block-empty на /vip-users больше не нужны, у
 * /upgrades-history они остались своими.
 *
 * Значения — только токены :root из admin.css. Отступы приведены к системе:
 * блок 15px, ячейка таблицы 12px 14px, скругления var(--radius)/(--radius-sm).
 */

/* ============================================================
   Общее для обеих страниц
   ============================================================ */

/* Карточка светлее фона на ступень — слои разделяет светлота поверхности,
   а не тень и не подсветка кромки. */
.vip-users-page .stat-card,
.upgrades-page .stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
  transition:border-color var(--base);
}
/* На /vip-users карточки стоят в сетке и разводятся её зазором,
   на /upgrades-history — стопкой, как и раньше. */
.upgrades-page .stat-card{ margin-bottom:14px }
.vip-users-page .stat-card:hover,
.upgrades-page .stat-card:hover{ border-color:var(--border-strong) }

/* Шапка карточки: заголовок с иконкой слева, приписка справа. */
.vip-users-page .stat-card-head,
.upgrades-page .stat-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.vip-users-page .stat-card-title,
.upgrades-page .stat-card-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-family:Roboto-Medium, Arial, sans-serif;
  color:var(--text);
}
/* Иконка заголовка приглушена: акцент оставлен ссылкам и активным элементам. */
.vip-users-page .stat-card-title i,
.upgrades-page .stat-card-title i{ color:var(--muted); font-size:14px }
.vip-users-page .stat-card-note,
.upgrades-page .stat-card-note{ font-size:12.5px; color:var(--muted) }

.vip-users-page .nodes-table-wrap,
.upgrades-page .nodes-table-wrap{ width:100%; overflow-x:auto; border-radius:var(--radius-sm) }

.vip-users-page table.nodes-table,
.upgrades-page table.nodes-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  /* Колонки с суммами и датами иначе дёргаются от строки к строке. */
  font-variant-numeric:tabular-nums;
}

.vip-users-page table.nodes-table th, .vip-users-page table.nodes-table td,
.upgrades-page table.nodes-table th, .upgrades-page table.nodes-table td{
  padding:12px 14px;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
}

/* Тот же еле заметный налёт шапки, что у .data-table дизайн-системы. */
.vip-users-page table.nodes-table thead,
.upgrades-page table.nodes-table thead{ background:rgba(255,255,255,.025) }

.vip-users-page table.nodes-table th,
.upgrades-page table.nodes-table th{
  font-family:Roboto-Medium, Arial, sans-serif;
  font-size:12.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
}

.vip-users-page table.nodes-table td,
.upgrades-page table.nodes-table td{ color:var(--text) }

.vip-users-page table.nodes-table tbody tr,
.upgrades-page table.nodes-table tbody tr{
  background:transparent;
  transition:background var(--fast);
}
.vip-users-page table.nodes-table tbody tr:hover,
.upgrades-page table.nodes-table tbody tr:hover{ background:rgba(255,255,255,.03) }
.vip-users-page table.nodes-table tbody tr:last-child td,
.upgrades-page table.nodes-table tbody tr:last-child td{ border-bottom:0 }

/* Служебные ячейки: раньше задавались инлайн-стилями в разметке. */
.vip-users-page .cell-id,
.upgrades-page .cell-id{ color:var(--muted); font-size:12px }
.vip-users-page .cell-date{ font-size:13px; color:var(--muted) }
.vip-users-page .cell-date-strong{ font-size:13px; font-family:Roboto-Medium, Arial, sans-serif }

/* Лог апгрейдов. Даты здесь светлее, чем в списке VIP-подписок: в оригинале
   у них был #AFC1DA, а не opacity:.6, — поэтому --text-dim, а не --muted.
   «Стало VIP» — выигранные дни, зелёный акцент; курс — справочное значение. */
.upgrades-page .cell-date{ font-size:13px; color:var(--text-dim) }
.upgrades-page .cell-gain{ font-family:Roboto-Bold, Arial, sans-serif; color:var(--good) }
.upgrades-page .cell-rate{ color:var(--muted) }

.vip-users-page .user-link,
.upgrades-page .user-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  text-decoration:none;
  font-family:Roboto-Medium, Arial, sans-serif;
  transition:color var(--fast);
}
.vip-users-page .user-link:hover,
.upgrades-page .user-link:hover{ color:var(--accent-hover); text-decoration:underline }
.vip-users-page .user-link i,
.upgrades-page .user-link i{ font-size:11px; opacity:.75 }

/* Рамка сплошная и волосяная: пунктир по всей ширине карточки был самой
   заметной линией на странице, хотя это всего лишь «показать ещё». */
.vip-users-page .load-more-btn,
.upgrades-page .load-more-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  padding:12px;
  background:var(--surface-3);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-align:center;
  font-family:Roboto-Medium, Arial, sans-serif;
  font-size:14px;
  margin-top:12px;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.vip-users-page .load-more-btn:hover,
.upgrades-page .load-more-btn:hover{
  background:var(--surface-hover);
  border-color:var(--border-strong);
  color:var(--text);
}
.vip-users-page .load-more-btn:active,
.upgrades-page .load-more-btn:active{ transform:scale(.99) }
.vip-users-page .load-more-btn.loading,
.upgrades-page .load-more-btn.loading{ opacity:0.5; pointer-events:none }

/* У ячейки таблицы гасим собственные отступы — их задаёт блок состояния
   из ui.css (на /upgrades-history — собственный .block-empty). Селектор
   с таблицей: иначе общее правило ячейки перебивает его по весу. */
.vip-users-page table.nodes-table td.cell-empty,
.upgrades-page table.nodes-table td.cell-empty{ padding:0; white-space:normal }

.upgrades-page .block-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px 16px;
  text-align:center;
}
.upgrades-page .table-empty__ico{ font-size:34px; color:var(--muted); opacity:.45 }
.upgrades-page .table-empty__title{ color:var(--text-dim); font-size:14.5px }
.upgrades-page .table-empty__hint{ color:var(--muted); font-size:12.5px }

/* ============================================================
   Страница 1 — vip-users.php
   ============================================================ */

/* Показатели и сетка блоков разводятся своим зазором; между ними
   нужен такой же шаг, как внутри сетки. */
.vip-users-page .stats-grid{ margin-bottom:14px }

/* Список подписок вытягивается на пять тысяч пикселей, а карточка
   популярности занимает шестьсот: рядом с таблицей оставалась колонка
   пустоты высотой в четыре с половиной тысячи. Карточка прилипает к
   верху и едет вместе с прокруткой таблицы. */
.vip-users-page .bento > .stat-card.span-5{
  align-self:start;
  position:sticky;
  top:calc(var(--header-h) + 22px);
}
/* align-items:start — иначе короткий список тарифов растягивается
   до высоты таблицы подписок и под полосами висит пустота. */
.vip-users-page .bento{ align-items:start }

/* График популярности */
.vip-users-page .pop-row{ margin-bottom:12px }
.vip-users-page .pop-row:last-child{ margin-bottom:0 }
.vip-users-page .pop-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
  margin-bottom:6px;
  color:var(--text);
}
.vip-users-page .pop-header span:last-child{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* Дорожка отличается светлотой, а не рамкой; заливка ровная и без ореола. */
.vip-users-page .pop-bar-bg{
  height:6px;
  background:var(--surface-3);
  border-radius:999px;
  overflow:hidden;
}
.vip-users-page .pop-bar-fill{
  height:100%;
  background:var(--accent);
  border-radius:999px;
  transition:width .9s var(--ease);
}

/* В оригинале эти бейджи прямоугольные по содержимому, а не капсулы:
   ими помечены строки списка, а не крупный статус карточки. */
.vip-users-page .status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--radius-xs); font-size:11px;
  text-transform:uppercase; letter-spacing:0.5px;
  border:1px solid transparent;
}
.vip-users-page .status-pill.st-up{
  background:var(--good-soft); color:var(--good);
}
.vip-users-page .status-pill.st-down{
  background:var(--surface-3); color:var(--muted); border-color:var(--border);
}

/* ============================================================
   Страница 2 — upgrades-history.php
   ============================================================ */

.upgrades-page .top-row{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap }

/* Плашка статистики. Подъём при наведении убран: в спокойной теме
   карточка отзывается только рамкой. Ширина ограничена: при flex:1 одно
   число растягивалось на пол-экрана, и это была самая заметная пустота
   страницы. */
.upgrades-page .info-card{
  flex:1 1 240px; max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color var(--base);
}
.upgrades-page .info-card:hover{ border-color:var(--border-strong) }
.upgrades-page .info-label{ font-size:13px; color:var(--text-dim); margin-bottom:5px; z-index:2 }
.upgrades-page .info-val{
  font-size:24px;
  font-family:Roboto-Medium, Arial, sans-serif;
  color:var(--text);
  letter-spacing:-0.3px;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  z-index:2;
}
.upgrades-page .info-icon{
  position:absolute; right:15px; top:15px; font-size:30px;
  color:var(--text); opacity:.07; z-index:1;
}

/* Плашка управления. Поверхность ровная: голубая заливка сверху была
   единственным градиентом на странице и тянула на себя всё внимание,
   хотя это поле ввода, а не главный показатель. */
.upgrades-page .control-card{
  flex:1 1 300px; max-width:440px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color var(--base);
}
.upgrades-page .control-card:hover{ border-color:var(--border-strong) }
.upgrades-page .control-row{ display:flex; gap:10px; align-items:center; margin-top:10px }
/* Приставка «1 к» перед полем — приглушённая; раньше стояла инлайном. */
.upgrades-page .coef-prefix{ font-size:14px; color:var(--text-dim) }

.upgrades-page .coef-input{
  background:var(--surface-3);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  font-size:16px;
  font-family:Roboto-Medium, Arial, sans-serif;
  font-variant-numeric:tabular-nums;
  width:100px; text-align:center; outline:none;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.upgrades-page .coef-input:hover{ border-color:var(--border-strong) }
.upgrades-page .coef-input:focus{
  border-color:var(--border-accent);
  background:var(--surface-hover);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.upgrades-page .save-btn{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff;
  border:1px solid transparent;
  padding:11px 18px;
  border-radius:var(--radius-sm);
  font-family:Roboto-Medium, Arial, sans-serif;
  font-size:14px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.upgrades-page .save-btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.upgrades-page .save-btn:active{ transform:translateY(0) scale(.985) }
.upgrades-page .save-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none }