/* Раздел «Подписки»: список и карточка подписки.
   Общие таблицы, бейджи и тосты живут в pages.css, шапка страницы,
   панель фильтров и состояния — в ui.css. Здесь только то, чего там нет
   или что на этих страницах выглядит иначе. */

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

/* Кнопка поиска дизайн-системы рассчитана на прежнюю строку фильтров
   высотой 44px; в панели инструментов соседние поля ниже, и без правки
   она торчала бы над ними. Радиус берём тот же, что у поля поиска,
   иначе рядом стоящие углы не совпадают. */
.subs-page .btn-go-search{
  height:38px; min-width:42px; padding:0 14px; border-radius:var(--radius-sm);
}

/* У подписок таблица уже общей: 1120px против 1200px. */
.data-table--subs{ min-width:1120px }
.data-table--subs th:nth-child(1){ width:190px } /* Пользователь */
.data-table--subs th:nth-child(2){ width:260px } /* Ссылка на подписку */
.data-table--subs th:nth-child(3){ width:110px } /* Лимит */
.data-table--subs th:nth-child(4){ width:130px } /* Расход */
.data-table--subs th:nth-child(5){ width:140px } /* Онлайн */
.data-table--subs th:nth-child(6){ width:210px } /* Действует до */
.data-table--subs th:nth-child(7){ width:130px } /* Статус */
.data-table--subs th:nth-child(8){ width:110px } /* Инфо */

/* Гигабайты и даты набраны цифрами разной ширины: без табличных цифр
   колонки дёргаются, когда подгружается следующая страница. */
.data-table--subs td{ font-variant-numeric:tabular-nums }

/* Только колонке со ссылкой разрешён перенос: сплошной токен
   иначе растягивает таблицу на всю свою длину. */
.data-table--subs td.link-cell,
.data-table--subs th.link-cell{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* В оригинале бейджи статуса здесь на пиксель мельче общих. */
.data-table--subs .status-pill-ok,
.data-table--subs .status-pill-bad{ font-size:12px }

/* Колонка, по которой сейчас идёт сортировка: стрелка гаснуть не должна,
   иначе непонятно, какой порядок применён. Это единственное место списка,
   где уместен акцент — выбранный столбец. */
.data-table--subs th.is-sorted{ color:var(--text-dim) }
.data-table--subs th.is-sorted i{ opacity:1; color:var(--accent) }

/* Аватар над ID пользователя. Отступ тот же, что у .user-avatar-cell
   в общих таблицах, — строки списка не должны быть разной высоты. */
.subs-user-avatar{ margin:0 auto 8px }

/* Ссылка набрана мельче остального текста строки. */
.subs-link-copy{ font-size:12px }
.subs-link-copy .click-copy{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
/* Копирование — не активное состояние, поэтому под курсором меняется
   только подложка. Акцентная заливка на каждой строке рябила. */
.subs-link-copy .click-copy:hover{
  background:var(--surface-hover);
  border-color:var(--border);
  color:var(--text);
}

.subs-online{ color:var(--text) }
.subs-online--recent{ color:var(--good) }
/* Точка «был недавно»: цвет текста один в списке легко пропустить. */
.subs-online--recent::before{
  content:'';
  display:inline-block; vertical-align:middle;
  width:6px; height:6px; margin-right:7px;
  border-radius:50%;
  background:var(--good);
}

/* Ячейка под пустое состояние и заглушку загрузки: отступы задаёт сам
   блок из ui.css, поэтому у ячейки они гасятся. Селектор с таблицей —
   чтобы перебить padding общего .data-table td. */
.data-table--subs td.subs-state-cell{ padding:0; white-space:normal }

/* ======================= карточка ======================= */

/* Отметка VIP нужна в пяти местах карточки, поэтому держим её тремя
   переменными раздела: производные прозрачности иначе расползаются
   по файлу числами. Раньше здесь был литерал #FFD700 — теперь смысловой
   токен предупреждения, как уже сделано в tarifs-vip.css. */
.sub-card{
  --vip-gold:var(--warn);
  --vip-soft:var(--warn-soft);
  --vip-line:rgba(255,159,10,.26);
}

/* --- левая колонка: смысловые блоки --- */

.sub-main{ display:flex; flex-direction:column; gap:14px; min-width:0 }

/* Плоская поверхность и волосяная рамка: слои в тёмной теме разделяет
   светлота, а не тень. */
.sub-group{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

/* Заголовок блока — обычный заголовок секции: 15px Roboto-Medium.
   Раньше он был набран как шапка таблицы (мелкий капс), из-за чего
   шесть блоков карточки читались как шесть безымянных таблиц. */
.sub-group__head{
  display:flex; align-items:center; gap:9px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-family:Roboto-Medium; font-size:15px; color:var(--text);
}
.sub-group__head i{ color:var(--muted); font-size:13px }
/* Единственный цветной значок заголовка на странице: он отмечает
   VIP-блок, а не украшает его. */
.sub-group--vip .sub-group__head i{ color:var(--vip-gold) }

/* Строка поля: подпись, значение и место под кнопку копирования.
   Третья колонка держится и у строк без кнопки — иначе копии
   разъезжаются по вертикали. */
.sub-card .tab-field-info{
  display:grid;
  grid-template-columns:minmax(190px, 290px) minmax(0, 1fr) 32px;
  align-items:center; gap:12px;
  margin:0; padding:12px 14px;
  font-size:14px; line-height:1.45;
  transition:background var(--fast);
}
.sub-card .tab-field-info + .tab-field-info{ border-top:1px solid var(--border) }
.sub-card .tab-field-info:hover{ background:rgba(255,255,255,.03) }

.sub-card .title-field-info{
  display:flex; align-items:center; gap:9px;
  color:var(--muted); font-size:13.5px;
}
.sub-card .title-field-info i{
  width:16px; margin:0; text-align:center;
  color:var(--muted); font-size:13px;
}
.sub-card .title-field-info i.is-gold{ color:var(--vip-gold) }

.sub-card .value-field-info{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-left:0; color:var(--text);
  font-variant-numeric:tabular-nums;
  word-break:break-word; overflow-wrap:anywhere;
}
.sub-card .value-field-info.is-good{ color:var(--good) }
.sub-card .value-field-info.is-bad{ color:var(--bad) }
.sub-card .value-field-info a{
  color:var(--accent); text-decoration:none;
  transition:color var(--fast);
}
.sub-card .value-field-info a:hover{ color:var(--accent-hover); text-decoration:underline }

.btn-copy-field-info{
  display:grid; place-items:center;
  width:32px; height:32px; margin-left:0;
  border:1px solid transparent; border-radius:var(--radius-xs);
  background:transparent; color:var(--muted);
  opacity:.65; cursor:pointer;
  transition:background var(--fast), color var(--fast),
             border-color var(--fast), opacity var(--fast), transform var(--fast);
}
.tab-field-info:hover .btn-copy-field-info{ opacity:1 }
.btn-copy-field-info:hover{
  background:var(--surface-hover); border-color:var(--border); color:var(--text);
}
.btn-copy-field-info:active{ transform:scale(.92) }

/* --- правая колонка: сводка --- */

.sub-side{ display:flex; flex-direction:column; gap:14px; min-width:0 }

.sub-summary{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.sub-summary__owner{ display:flex; align-items:center; gap:12px; min-width:0 }
.sub-summary__who{ min-width:0 }
.sub-summary__id{
  font-family:Roboto-Medium; font-size:16px; color:var(--text);
  word-break:break-word;
}
.sub-summary__sub{
  margin-top:3px; color:var(--muted); font-size:12.5px;
  font-variant-numeric:tabular-nums;
}

/* Аватар владельца: среди общих .user-avatar-* размера под сводку нет.
   Кольцо волосяное, как у .user-avatar-lg, без подсветки снизу. */
.sub-owner-avatar{
  width:54px; height:54px; flex:none;
  border-radius:50%;
  background:var(--surface-3) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--border-strong);
}

/* Владелец и показатели — разные вещи, между ними волосяной разделитель. */
.sub-summary__list{
  margin:14px 0 0; padding:14px 0 0;
  border-top:1px solid var(--border);
}
.sub-summary__item{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:10px 0;
}
.sub-summary__item:first-child{ padding-top:0 }
.sub-summary__item + .sub-summary__item{ border-top:1px solid var(--border) }
.sub-summary__item dt{ color:var(--muted); font-size:12.5px; white-space:nowrap }
.sub-summary__item dd{
  margin:0; text-align:right; color:var(--text); font-size:13.5px;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:flex-end;
  flex-wrap:wrap; gap:7px;
}

/* margin меньше отступа списка: у последней строки сводки уже есть
   свои 10px снизу, вместе получалось 28px пустоты перед кнопками. */
.sub-summary__actions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:6px; padding-top:14px;
  border-top:1px solid var(--border);
}

/* Бейджи карточки: у pages.css одноимённые классы другой геометрии,
   область .sub-card перебивает их по весу селектора. */
.sub-card .status-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:92px; height:26px; padding:0 12px;
  border:1px solid transparent; border-radius:999px;
  font-size:12px; line-height:1;
}
.sub-card .status-pill-warn{ color:var(--warn); background:var(--warn-soft); border-color:rgba(255,159,10,.26) }
.sub-card .status-pill-bad{ color:var(--bad); background:var(--bad-soft); border-color:rgba(255,69,58,.26) }
.sub-card .status-pill-vip{
  color:var(--vip-gold);
  background:var(--vip-soft);
  border-color:var(--vip-line);
}

/* Общий .counts-days-val рассчитан на список — подпись под датой.
   На карточке это приписка справа от значения, поэтому она оформлена
   отдельной плашкой. */
.sub-card .counts-days-val{
  display:inline-flex; align-items:center;
  margin:0; padding:3px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--surface-3);
  color:var(--muted); font-size:12.5px;
}
.sub-card .counts-days-val.is-gold{
  color:var(--vip-gold);
  background:var(--vip-soft);
  border-color:var(--vip-line);
}

.vip-note{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:0; padding:4px 11px;
  border:1px solid var(--vip-line); border-radius:999px;
  background:var(--vip-soft);
  color:var(--vip-gold); font-size:12.5px;
}

/* ===================== ПРАВКА ПОДПИСКИ ===================== */

/* Форма пишет в Remnawave. Её вес на странице намеренно скромный:
   рядом стоит сводка, ради которой карточку и открывают, а править
   доступ руками приходится в единицах случаев. */
.sub-edit{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
}

.sub-edit__head{
  display:flex; align-items:center; gap:9px;
  color:var(--text); font-size:15px;
  font-family:Roboto-Medium, Arial, sans-serif;
  margin-bottom:12px;
}
.sub-edit__head i{ color:var(--muted); font-size:14px }

.sub-edit__note{
  margin:0 0 14px;
  color:var(--muted); font-size:12.5px; line-height:1.5;
}

.sub-edit__field{ display:block; margin-bottom:12px }
.sub-edit__field > span{
  display:block; margin-bottom:6px;
  color:var(--muted); font-size:12.5px;
}
.sub-edit__field input{
  width:100%; box-sizing:border-box;
  height:38px; padding:0 12px;
  background:var(--surface-3);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:inherit; font-size:14px;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.sub-edit__field input:focus{
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.sub-edit__field input:disabled{ opacity:.6 }
.sub-edit__field small{
  display:block; margin-top:5px;
  color:var(--muted); font-size:11.5px;
}

.sub-edit__toggle{
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
  color:var(--text-dim); font-size:13.5px;
  cursor:pointer;
}
.sub-edit__toggle input{ width:16px; height:16px; accent-color:var(--accent) }

.sub-edit__save{ width:100%; justify-content:center }

/* Быстрое продление отделено линией: это отдельное действие, которое
   срабатывает СРАЗУ, а не вместе с «Сохранить». Без разделителя кнопки
   читались как часть той же формы. */
.sub-edit__quick{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-top:15px; padding-top:15px;
  border-top:1px solid var(--border);
}
.sub-edit__quick-label{ color:var(--muted); font-size:12.5px; width:100% }
.sub-edit__quick .btn{ padding:7px 12px; font-size:13px }

/* Форма VIP стоит под формой обычной подписки. Отличается только
   иконкой заголовка: обводкой или золотом её выделять незачем —
   в узкой колонке два цветных блока подряд начинают спорить друг с другом. */
.sub-edit--vip{ margin-top:14px }
.sub-edit--vip .sub-edit__head i{ color:var(--vip-gold, var(--muted)) }

.sub-edit__ok{ color:var(--good) }
.sub-edit__bad{ color:var(--bad) }

/* Место кнопки «Редактировать подписку» из оригинала. Остаётся для
   архивных записей: их в Remnawave нет, и править нечего. */
.edit-locked-subscribe{
  display:flex; align-items:flex-start; gap:10px;
  padding:14px;
  border:1px solid rgba(255,159,10,.22); border-radius:var(--radius);
  background:var(--warn-soft);
  color:var(--text-dim); font-size:13px; line-height:1.5;
}
.edit-locked-subscribe i{ color:var(--warn); font-size:15px; margin-top:2px }
.edit-locked-subscribe a{ color:var(--accent); text-decoration:none }
.edit-locked-subscribe a:hover{ text-decoration:underline }

.sub-not-found{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

@media(max-width: 760px){
  /* Подпись над значением: в две колонки на телефоне остаётся
     полоска в двадцать символов. */
  .sub-card .tab-field-info{
    grid-template-columns:minmax(0, 1fr) 32px;
    gap:5px 12px; padding:11px 14px;
    font-size:14px;
  }
  .sub-card .title-field-info{ grid-column:1; grid-row:1 }
  .sub-card .value-field-info{ grid-column:1; grid-row:2 }
  .btn-copy-field-info{ grid-column:2; grid-row:1 / span 2; align-self:start }
}