/*
 * Стили страниц «VIP Статистика» (/vip-stats) и «VIP Продажи» (/vip-stats-info).
 * Перенос блоков <style> из vip-stats.php и vip-stats-info.php.
 *
 * Всё заперто внутри .vip-stats-page / .vip-sales-page по двум причинам.
 * Первая: .bar-row, .bar-label, .bar-track, .bar-fill и .bar-val уже
 * объявлены в admin.css с другой геометрией и используются дашбордом —
 * в оригинале локальный <style> шёл после main.css и перебивал его только
 * на своей странице. Вторая: обе страницы объявляют одноимённые классы
 * (table.nodes-table) с разными значениями, и свести их в один набор нельзя.
 *
 * Шапка страницы, панель фильтров, плитки показателей и пустые состояния
 * живут в ui.css — здесь остались только блоки, которых там нет.
 *
 * Значения — только токены из :root admin.css. Отступы приведены к системе:
 * блок 15px, ячейка таблицы 12px 14px, скругления var(--radius)/(--radius-sm).
 */

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

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

.vip-stats-page .nodes-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:12px;
  flex-wrap:wrap;
}
.vip-stats-page .nodes-card-title{
  font-size:15px;
  font-family:Roboto-Medium, Arial, sans-serif;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text);
}
/* Иконка заголовка — приглушённая: акцент оставлен активному элементу
   и ссылке, иначе от него рябит на каждой карточке. */
.vip-stats-page .nodes-card-title > i{ color:var(--muted); font-size:14px }
.vip-stats-page .nodes-card-sub{
  font-size:12.5px;
  color:var(--muted);
  margin-top:4px;
}

/* Разнокалиберная сетка развела карточки по колонкам: собственный
   нижний отступ карточки в ней даёт двойной зазор. */
.vip-stats-page .stats-grid{ margin-bottom:14px }
/* align-items:start — иначе «Продажи VIP-тарифов» и «Типы событий»
   в одном ряду тянутся до высоты соседа и под коротким списком
   остаётся пустая половина карточки. */
.vip-stats-page .bento{ margin-bottom:14px; align-items:start }

.vip-stats-page .nodes-table-wrap{
  width:100%;
  overflow-x:auto;
  border-radius:var(--radius-sm);
}
.vip-stats-page table.nodes-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:960px;
  /* Колонки с объёмами и процентами иначе дёргаются от строки к строке. */
  font-variant-numeric:tabular-nums;
}
.vip-stats-page table.nodes-table th,
.vip-stats-page table.nodes-table td{
  padding:12px 14px;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
}
/* Тот же еле заметный налёт шапки, что у .data-table дизайн-системы. */
.vip-stats-page table.nodes-table thead{
  background:rgba(255,255,255,.025);
}
.vip-stats-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);
  border-bottom:1px solid var(--border);
}
.vip-stats-page table.nodes-table td{
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.vip-stats-page table.nodes-table tbody tr{
  background:transparent;
  transition:background var(--fast);
}
.vip-stats-page table.nodes-table tbody tr:hover{ background:rgba(255,255,255,.03) }
.vip-stats-page table.nodes-table tbody tr:last-child td{ border-bottom:0 }

/* ---- Поле выбора месяца в панели фильтров ---- */

/*
 * Месяц выбирается системным <input type="month">: список значений заранее
 * не известен, поэтому ни SelectField, ни Segmented из общего слоя не
 * подходят. Оформление подогнано под соседние поля панели: та же высота,
 * та же подложка, та же рамка.
 */
.vip-stats-page .native-field{
  display:inline-flex; align-items:center; gap:9px;
  height:38px; padding:0 12px;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.vip-stats-page .native-field:hover{ border-color:var(--border-strong) }
.vip-stats-page .native-field:focus-within{
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.vip-stats-page .native-field__label{
  color:var(--muted); font-size:12.5px; white-space:nowrap;
}
.vip-stats-page .native-field input{
  border:0; padding:0; outline:none;
  background:transparent; color:var(--text);
  font-family:inherit; font-size:14px;
  font-variant-numeric:tabular-nums;
}

.vip-stats-page .period-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.vip-stats-page .btn-admin-soft{
  height:38px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-3);
  color:var(--text-dim);
  padding:0 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-family:inherit;
  font-size:14px;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
/* Вторичная кнопка при наведении меняет только фон и рамку: акцентная
   заливка и подъём остались от прежней версии. */
.vip-stats-page .btn-admin-soft:hover{
  background:var(--surface-hover);
  color:var(--text);
  border-color:var(--border-strong);
}
.vip-stats-page .btn-admin-soft:active{ transform:scale(.985) }

.vip-stats-page .period-form button{
  height:38px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%);
  color:#fff;
  padding:0 16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:Roboto-Medium, Arial, sans-serif;
  font-size:14px;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.vip-stats-page .period-form button:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.vip-stats-page .period-form button:active{ transform:translateY(0) scale(.985) }

.vip-stats-page .nodes-empty{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  color:var(--bad);
  background:var(--bad-soft);
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  margin-bottom:14px;
  font-size:13.5px;
}

/* ---- Полосы расхода в ячейках таблицы ---- */

.vip-stats-page .traffic-bar-wrap{
  width:160px;
  height:6px;
  background:var(--surface-3);
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}
/* Заливка ровная и без свечения: градиент с ореолом читался как подсветка
   строки, хотя означает всего лишь долю расхода. */
.vip-stats-page .traffic-bar-val{
  height:100%;
  background:var(--accent);
  border-radius:999px;
  transition:width .9s var(--ease);
}
.vip-stats-page .traffic-bar-val.danger{ background:var(--bad) }

/* ---- Бейджи состояния ---- */

.vip-stats-page .status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  font-size:12.5px;
  border:1px solid transparent;
  white-space:nowrap;
}
/* Рамка бейджа осталась прозрачной: та же полупрозрачная заливка на краю
   давала двойную кромку и читалась как обводка. */
.vip-stats-page .status-pill.ok{ background:var(--good-soft); color:var(--good) }
.vip-stats-page .status-pill.bad{ background:var(--bad-soft); color:var(--bad) }
.vip-stats-page .status-pill.info{ background:var(--accent-soft); color:var(--accent-hover) }
.vip-stats-page .status-pill.warn{ background:var(--warn-soft); color:var(--warn) }

.vip-stats-page .user-cell{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.vip-stats-page .user-cell a{
  color:var(--accent);
  text-decoration:none;
  transition:color var(--fast);
}
.vip-stats-page .user-cell a:hover{
  color:var(--accent-hover);
  text-decoration:underline;
}
.vip-stats-page .user-cell span{
  color:var(--muted);
  font-size:12px;
}

/*
 * Полосы «Продажи тарифов» и «Типы событий». Геометрия своя (три колонки
 * вместо flex-ряда дашборда), а вид дорожки и заливки — системный:
 * position/inset/transition у .bar-fill доезжают из admin.css.
 */
.vip-stats-page .bar-row{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) 1.5fr auto;
  gap:14px;
  align-items:center;
  /* Вертикальный отступ задаёт padding базового правила. Здесь стоял ещё
     и margin:10px, и на пару строк набегало 36 пикселей воздуха вокруг
     16-пиксельного текста. */
  margin:0;
}
.vip-stats-page .bar-label{
  width:auto;
  color:var(--text-dim);
  font-size:13.5px;
}
/* Дорожка отличается от карточки светлотой, а не рамкой: рамка на полосе
   в 6 пикселей превращалась в заметный контур. */
.vip-stats-page .bar-track{
  height:6px;
  background:var(--surface-3);
  border:0;
  border-radius:999px;
  overflow:hidden;
}
.vip-stats-page .bar-fill{
  height:100%;
  background:var(--accent);
  border-radius:999px;
  box-shadow:none;
}
.vip-stats-page .bar-val{
  width:auto;
  color:var(--text-dim);
  min-width:120px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* В сетке дашборда эти две карточки занимают половину ширины: три колонки
   в них не помещаются, поэтому подпись и число встают строкой, а дорожка
   уезжает под них. */
/* Позиции закреплены областями, а не автопотоком: дорожка растянута на
   обе колонки, и автоматическое размещение уносило число на третью
   строку — ряд занимал 62 пикселя вместо 41. */
.vip-stats-page .bento .bar-row{
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:'label value' 'track track';
  gap:5px 12px;
  margin:0; padding:7px 2px;
}
.vip-stats-page .bento .bar-label{ grid-area:label }
.vip-stats-page .bento .bar-track{ grid-area:track }
.vip-stats-page .bento .bar-val{ grid-area:value; min-width:0 }

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

@media(max-width:760px){
  .vip-stats-page table.nodes-table{ min-width:1050px }
}

/* ============================================================
   Страница 2 — vip-stats-info.php
   ============================================================ */

.vip-sales-page .stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
  margin-top:14px;
  transition:border-color var(--base);
}
.vip-sales-page .stat-card:hover{ border-color:var(--border-strong) }

/* Шапка карточки: заголовок с иконкой слева, приписка справа. */
.vip-sales-page .stat-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.vip-sales-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-sales-page .stat-card-title i{ color:var(--muted); font-size:14px }
.vip-sales-page .stat-card-note{ font-size:12.5px; color:var(--muted) }

.vip-sales-page .nodes-table-wrap{
  width:100%;
  overflow-x:auto;
  border-radius:var(--radius-sm);
}
.vip-sales-page table.nodes-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.vip-sales-page table.nodes-table th,
.vip-sales-page table.nodes-table td{
  padding:12px 14px;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
}
.vip-sales-page table.nodes-table thead{ background:rgba(255,255,255,.025) }
.vip-sales-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);
  border-bottom:1px solid var(--border);
}
.vip-sales-page table.nodes-table td{
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.vip-sales-page table.nodes-table tbody tr{
  background:transparent;
  transition:background var(--fast);
}
.vip-sales-page table.nodes-table tbody tr:hover{ background:rgba(255,255,255,.03) }
.vip-sales-page table.nodes-table tbody tr:last-child td{ border-bottom:0 }

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

.vip-sales-page .status-success{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  color:var(--good);
  background:var(--good-soft);
  border:1px solid transparent;
  font-size:12.5px;
}

.vip-sales-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-sales-page .user-link:hover{ color:var(--accent-hover); text-decoration:underline }
.vip-sales-page .user-link i{ font-size:11px; opacity:.75 }

.vip-sales-page .loading-overlay{
  opacity:0.5;
  pointer-events:none;
  transition:opacity var(--base);
}