/* ===========================================================
   Карточка пользователя: раскладка в две колонки, профиль-сводка,
   секции подписки, устройств и таблиц.

   Файл подключается только страницей /users/[systemId] и грузится
   после pages.css и ui.css, поэтому здесь можно уточнять общие классы
   (.user-card, .section, .data, .table-wrap, .detail-grid) — на другие
   разделы это не влияет.

   Значения берутся из токенов admin.css: новых цветов и размеров
   тут не появляется.
   =========================================================== */

/* ===================== РАСКЛАДКА СТРАНИЦЫ ===================== */

/* Левая колонка .detail-grid: секции идут одна за другой с общим шагом.
   Собственных отступов у секций больше нет — иначе шаг сетки и margin
   складываются и разрывы между блоками получаются разными.
   (.detail-grid и .detail-grid__side живут в ui.css, главной колонки
   там нет — она нужна только карточкам с длинным списком секций.) */
.detail-grid{ gap:14px }
.detail-grid__main{
  display:flex; flex-direction:column; gap:14px;
  min-width:0;
}
.detail-grid__main > .section{ margin-top:0 }

/* ===================== ПРОФИЛЬ-СВОДКА ===================== */

/* Профиль переехал из широкой шапки в прилипающую колонку 340px:
   карточка стала вертикальной, поля — в один столбец. */
.user-card{
  display:block;
  padding:0;
  overflow:hidden;
  /* Слои разделяет светлота поверхности, тень под карточкой не нужна. */
  box-shadow:none;
}

.user-card__top{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:16px; text-align:center;
  border-bottom:1px solid var(--border);
}

.user-card .user-avatar{
  width:82px; height:82px;
  flex:none;
  /* Кольцо волосяное: в pages.css под аватаром ещё тяжёлая тень,
     она была заметнее самого аватара. */
  box-shadow:0 0 0 1px var(--border);
}

.user-card__ident{
  min-width:0; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.user-card__name{
  font-family:Roboto-Medium;
  font-size:18px; line-height:1.25; letter-spacing:.2px;
  color:var(--text);
  overflow-wrap:anywhere;
}

.user-card__tags{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
}

/* Идентификаторы под именем: значение + подпись-ключ, чтобы понять,
   что это за число, не читая таблицу полей. */
.ident-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--text-dim); font-size:12.5px;
  font-variant-numeric:tabular-nums;
  transition:background var(--fast), border-color var(--fast);
}
.ident-chip:hover{ background:var(--surface-hover) }
.ident-chip__key{
  color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
}
.ident-chip--empty{ color:var(--muted) }

/* Пометка «Тестовый» стоит в одном ряду с чипами — выравниваем по высоте. */
.user-card__tags .badge-test{ padding:5px 11px; border:1px solid var(--border) }

/* Кнопка сохранения уехала в шапку страницы. Зелёная — так было
   в оригинале; форму и движение берём у системной .btn-primary,
   переопределяем заливку и гасим синее свечение от --shadow-accent:
   под зелёной кнопкой оно читалось как ореол чужого цвета. */
.btn-save-user{
  background:var(--good); color:#fff;
  box-shadow:none;
}

/* ===================== ПОЛЯ ПРОФИЛЯ ===================== */

/* В колонке 340px пары «подпись — значение» читаются построчно:
   подпись слева, значение прижато вправо, разделитель между строками. */
.user-card .user-meta{ display:block; padding:2px 16px 12px }

.user-card .meta-line{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:12px;
  min-height:0; padding:9px 0;
}
.user-card .meta-line + .meta-line{ border-top:1px solid var(--border) }
.user-card .meta-label{ font-size:12.5px }
/* Идентификаторы и суммы моноширинными цифрами — иначе соседние строки
   расходятся по ширине. */
.user-card .meta-value{
  min-width:0; justify-content:flex-end; text-align:right;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}
/* Значок способа авторизации — такой же серый, как подпись слева:
   в pages.css он акцентный, и синяя точка висела в каждой второй строке.
   Иконку копирования не трогаем: подсветка на наведении — её единственный
   признак кликабельности. */
.user-card .meta-value > i:not(.copy-ico){ color:var(--muted) }

/* Редактируемые поля: обычный бейдж превращается в поле ввода только
   на фокусе — так правка видна, но строка не выглядит формой. */
.balance-badge{
  padding:5px 10px 5px 11px;
  border-radius:var(--radius-sm);
  background:var(--surface-3);
  border:1px solid var(--border);
  transition:background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
/* Иконка поля — серая: акцент оставлен фокусу, он тут единственное
   по-настоящему активное состояние. */
.balance-badge i{ color:var(--muted) }
.balance-badge:hover{ border-color:var(--border-strong) }
.balance-badge:focus-within{
  background:var(--surface-hover);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.balance-badge:focus-within i{ color:var(--accent) }
.balance-badge input{
  width:58px; padding:3px 2px;
  background:transparent; border:0; outline:none;
  color:var(--text); text-align:right;
  font-family:inherit; font-size:14.5px;
  font-variant-numeric:tabular-nums;
}
.balance-badge .badge-rub{ font-size:13px }

/* Тумблер бана. В карточке он темнее общего переключателя панели,
   поэтому переопределяем его только внутри .user-card. */
.user-card .ios-toggle{
  position:relative; display:inline-block;
  width:44px; height:26px; min-width:44px; vertical-align:middle;
}
.user-card .ios-toggle__input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:2;
}
/* Дорожка выключенного тумблера — заливка, а не рамка: базовый
   переключатель имитирует границу через inset-тень, здесь этого нет. */
.user-card .ios-toggle__slider{
  position:absolute; inset:0;
  background:var(--surface-active);
  border:1px solid var(--border);
  border-radius:999px; box-shadow:none;
  transition:background var(--base), border-color var(--base);
}
.user-card .ios-toggle__slider::after{
  content:""; position:absolute; top:1px; left:1px;
  width:22px; height:22px; border-radius:50%;
  background:var(--text); box-shadow:none;
  transition:transform var(--base), background var(--base);
}
.user-card .ios-toggle:hover .ios-toggle__slider{ border-color:var(--border-strong) }
.user-card .ios-toggle__input:checked + .ios-toggle__slider{
  background:var(--good-soft); border-color:transparent;
}
.user-card .ios-toggle__input:checked + .ios-toggle__slider::after{
  transform:translateX(18px); background:var(--good);
}
.user-card .ios-toggle__input:focus-visible + .ios-toggle__slider{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ===================== СЕКЦИИ ===================== */

.section > .section-title{
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  font-size:15px; font-family:Roboto-Medium;
}

.section-title__text{ display:inline-flex; align-items:center; gap:9px; min-width:0 }

/* Заголовок секции — строка, а не плитка: цветной квадрат с иконкой
   остаётся только у шапки страницы. Иконка приглушённая — она помогает
   различать пять секций подряд, но не тянет на себя акцент. */
.section-title__ico{
  width:auto; height:auto; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:0; background:none;
  color:var(--muted); font-size:13px;
}

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

/* Колонок столько, сколько влезает: слева от профиля места меньше,
   чем было на всю ширину страницы, и жёсткая пара колонок ломалась. */
.sub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px,1fr));
  gap:2px 14px;
}
.sub-grid .meta-line{
  display:grid;
  grid-template-columns:minmax(0,168px) minmax(0,1fr);
  align-items:center; gap:10px;
  min-height:0; padding:8px 10px;
  border-radius:var(--radius-sm);
  transition:background var(--fast);
}
/* При наведении меняется только фон — рамку строка больше не наращивает. */
.sub-grid .meta-line:hover{ background:var(--surface-3) }
.sub-grid .meta-label{ display:flex; align-items:center; gap:8px }
/* Значки подписей серые: в pages.css они акцентные, и полтора десятка
   синих иконок подряд рябили сильнее, чем сами значения. */
.sub-grid .meta-label i{ margin-right:0; width:16px; text-align:center; color:var(--muted) }
.sub-grid .meta-value{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.sub-grid .counts-days-val{ margin-top:0 }
.sub-grid .meta-line--wide{ grid-column:1 / -1 }

/* ===================== ТАБЛИЦЫ КАРТОЧКИ ===================== */

/* Внутри секции таблицу достаточно очертить волосяной рамкой. Заливка
   тут была темнее самой секции — получался колодец с рамкой, две
   границы на один блок. */
.table-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:transparent;
  overflow:hidden;
}
.table-scroll{ border-radius:inherit }

/* В карточке таблицы шире общего минимума из pages.css */
.section .data{ min-width:980px; font-variant-numeric:tabular-nums }
.section .data th{
  font-size:12.5px; letter-spacing:.03em;
  border-bottom:1px solid var(--border);
}
.section .data th,
.section .data td{ padding:12px 14px }

/* Строка-заглушка не должна подсвечиваться как обычная строка. */
.section .data tbody tr.is-blank:hover{ background:transparent }
.section .data td.blank-cell{ white-space:normal; padding:0 }

/* Пустое состояние и заглушки загрузки берутся из ui.css; внутри
   ячейки таблицы их общие отступы великоваты. */
.section .data td.blank-cell .empty{ padding:24px 18px; gap:8px }
.section .data td.blank-cell .empty__icon{ width:48px; height:48px; border-radius:14px; font-size:20px }
.section .data td.blank-cell .skeleton-rows{ padding:14px; gap:12px }

/* Бейджи статусов карточки: «не успешно» здесь оранжевое, а не красное.
   Заливки хватает, тонированной рамки у пилюли нет. */
.status-success-order,
.status-another-order{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:92px; height:26px; padding:0 12px;
  border-radius:999px; font-size:12.5px;
  border:0;
}
.status-success-order{ color:var(--good); background:var(--good-soft) }
.status-another-order{ color:var(--warn); background:var(--warn-soft) }
.section .status-vip-badge{ height:26px; border:0 }

/* ===================== КНОПКИ В СЕКЦИЯХ ===================== */

.btn-show-more{
  margin:0; display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-3); color:var(--text-dim);
  cursor:pointer; font-family:inherit; font-size:13px;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
/* Вторичные кнопки под курсором только светлеют: акцентная заливка
   и подъём остались от прежней версии и спорили с активной кнопкой. */
.btn-show-more:hover{
  background:var(--surface-hover); color:var(--text);
  border-color:var(--border-strong);
}
.btn-show-more:active{ transform:scale(.985) }

.section .btn-info-more-order:hover{
  background:var(--surface-hover); color:var(--text);
  border-color:var(--border-strong); transform:none;
}
.section .btn-info-more-order:active{ transform:scale(.985) }
.section .copy-ico:active,
.section .btn-copy:active{ transform:scale(.9) }

.btn-delete-device-admin{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  color:var(--bad); background:var(--surface-3);
  cursor:pointer; font-family:inherit; font-size:13px;
  transition:background var(--fast), border-color var(--fast);
}
/* Красный тут только в подписи: строка устройства не должна гореть
   целиком, пока курсор просто идёт по таблице. */
.btn-delete-device-admin:hover{
  background:var(--bad-soft); border-color:transparent;
}
.btn-delete-device-admin:active{ transform:scale(.985) }
.btn-delete-device-admin:disabled{ opacity:.55; cursor:not-allowed; transform:none }

/* Список устройств прокручивается только горизонтально */
#devicesScroll{
  max-height:none;
  overflow-y:visible;
  overflow-x:auto;
}

/* ===================== ПОДТВЕРЖДЕНИЕ УДАЛЕНИЯ ===================== */

/* В оригинале это SweetAlert2 с CDN; внешние скрипты не тянем, поэтому
   окно своё, но с теми же текстами и порядком кнопок (reverseButtons). */
.confirm-overlay{
  position:fixed; inset:0; z-index:300; padding:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:confirm-fade .18s var(--ease) both;
}
.confirm-box{
  width:100%; max-width:400px; text-align:center;
  padding:20px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
  animation:confirm-pop .22s var(--ease) both;
}
/* Селектор с .confirm-box, чтобы перебить display от FontAwesome. */
.confirm-box .confirm-icon{
  width:48px; height:48px; margin:0 auto 12px;
  display:grid; place-items:center;
  border-radius:50%; font-size:21px;
  color:var(--warn); background:var(--warn-soft);
  border:0;
}
.confirm-title{ font-family:Roboto-Medium; font-size:17px; margin-bottom:6px }
.confirm-text{ font-size:14px; color:var(--text-dim); line-height:1.5; margin-bottom:16px }
.confirm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.confirm-btn{
  padding:10px 16px; border-radius:12px;
  border:1px solid transparent; cursor:pointer;
  color:#fff; font-family:inherit; font-size:14px;
  transition:background var(--fast), color var(--fast), border-color var(--fast), filter var(--fast);
}
.confirm-btn:active{ transform:scale(.985) }
.confirm-btn:disabled{ opacity:.55; cursor:not-allowed; filter:none }
.confirm-btn--cancel{
  background:var(--surface-3); border-color:var(--border); color:var(--text-dim);
}
.confirm-btn--cancel:hover{
  background:var(--surface-hover); color:var(--text); border-color:var(--border-strong);
}
.confirm-btn--ok{ background:var(--bad); box-shadow:none }
.confirm-btn--ok:hover:not(:disabled){ filter:brightness(1.06) }

@keyframes confirm-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes confirm-pop{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }

/* ===================== АДАПТИВ ===================== */

@media (max-width: 1100px){
  /* Колонки схлопнулись в одну. Профиль должен идти первым: иначе,
     чтобы понять, чья это карточка, пришлось бы пролистать все таблицы. */
  .detail-grid__side{ order:-1 }

  /* На всю ширину визитка снова горизонтальная, а поля становятся
     сеткой — вертикальный столбец из девяти строк тут не нужен. */
  .user-card__top{
    flex-direction:row; align-items:center; text-align:left;
    gap:14px; padding:16px;
  }
  .user-card__ident{ align-items:flex-start; width:auto }
  .user-card__name{ font-size:20px }
  .user-card__tags{ justify-content:flex-start }

  .user-card .user-meta{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
    gap:0 14px; padding:4px 16px 12px;
  }
}

@media (max-width: 1000px){
  /* pages.css на этой ширине центрует всю карточку — профильной шапке
     это подходит, а сетке полей под ней нет. */
  .user-card{ text-align:left }
}

@media (max-width: 860px){
  .user-card .user-avatar{ width:64px; height:64px }
  .user-card__name{ font-size:18px }
}

@media (max-width: 760px){
  .section .data{ min-width:900px }
  .table-scroll{ max-height:300px }
  .sub-grid .meta-line{ grid-template-columns:1fr; align-items:flex-start; gap:4px }
  .meta-line{ align-items:flex-start }
}

@media (max-width: 700px){
  /* В шапке страницы кнопка действий занимает всю строку. */
  .btn-save-user{ width:100%; justify-content:center }
}

@media(max-width: 390px){
  .user-card .meta-line{
    display:block;
    padding:9px 0;
  }
  .user-card .meta-value{ justify-content:flex-start; text-align:left; margin-top:4px }
}

/* ===================== РЕФ-КЛЮЧ ===================== */

/* Ключ длиннее баланса и лимита устройств: восемь символов случайного
   и до шестидесяти четырёх у именного. Узкая плашка обрезала бы его
   ровно там, где начинается смысл. */
.balance-badge--wide{ min-width:0; flex:1 1 auto }
.balance-badge--wide input{
  width:100%;
  min-width:0;
  text-align:left;
  font-variant-numeric:normal;
  letter-spacing:.02em;
}

/* ===================== РЕФЕРАЛЬНАЯ ЭФФЕКТИВНОСТЬ ===================== */

/* Блок под закуп рекламы: по нему решают, брать ли у человека трафик
   дальше. Поэтому четыре числа стоят крупно и в один ряд, а всё
   объясняющее — мелким под ними. */
.ref-eff{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px;
}

.ref-eff__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom:12px;
}
.ref-eff__title{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--text); font-size:15px;
  font-family:Roboto-Medium, Arial, sans-serif;
}
.ref-eff__title i{ color:var(--muted); font-size:14px }

/* Переключатель периода — сегментами, как в остальных разделах. */
.ref-eff__periods{
  display:inline-flex; gap:4px;
  padding:3px;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:999px;
}
.ref-eff__period{
  border:0; background:transparent; cursor:pointer;
  padding:6px 13px; border-radius:999px;
  color:var(--muted); font-family:inherit; font-size:13px;
  transition:background var(--fast), color var(--fast);
}
.ref-eff__period:hover{ color:var(--text) }
.ref-eff__period.is-active{ background:var(--accent-soft); color:#fff }

.ref-eff__range{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.ref-eff__range label{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); font-size:13px;
}
.ref-eff__range input{
  height:36px; padding:0 10px;
  background:var(--surface-3);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:inherit; font-size:13.5px;
  outline:none;
}
.ref-eff__range input:focus{
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.ref-eff__note,
.ref-eff__aside{
  margin:0 0 12px;
  color:var(--muted); font-size:12.5px; line-height:1.5;
}
.ref-eff__aside{ margin:12px 0 0 }
.ref-eff__note b, .ref-eff__aside b{ color:var(--text-dim) }

.ref-eff__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  transition:opacity var(--fast);
}
/* Во время пересчёта числа гасятся, но не исчезают: скачок раскладки
   на каждом переключении периода читается как поломка. */
.ref-eff__grid.is-loading{ opacity:.45 }

.ref-eff__metric{
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:13px 15px;
}
.ref-eff__value{
  color:var(--text);
  font-size:22px; line-height:1.15;
  font-family:Roboto-Medium, Arial, sans-serif;
  font-variant-numeric:tabular-nums;
}
/* Деньги — единственное зелёное пятно: это ответ на вопрос, ради
   которого блок открывают. */
.ref-eff__metric--good .ref-eff__value{ color:var(--good) }
.ref-eff__label{ margin-top:5px; color:var(--text-dim); font-size:13px }
.ref-eff__hint{ margin-top:3px; color:var(--muted); font-size:11.5px }

.ref-eff__list{ margin-top:15px }
.ref-eff__list-head{
  color:var(--text-dim); font-size:13px;
  margin-bottom:8px;
}
.ref-eff__table{
  width:100%; border-collapse:collapse;
  font-size:13px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ref-eff__table th{
  text-align:left; padding:8px 10px;
  color:var(--muted); font-size:11.5px;
  letter-spacing:.03em; text-transform:uppercase;
  font-family:Roboto-Medium, Arial, sans-serif;
  border-bottom:1px solid var(--border);
}
.ref-eff__table td{
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.ref-eff__table tbody tr:last-child td{ border-bottom:0 }
.ref-eff__name{ color:var(--muted); font-size:11.5px; margin-top:2px }
.ref-eff__paid{ color:var(--good); font-family:Roboto-Medium, Arial, sans-serif }
.ref-eff__unpaid{ color:var(--muted) }
.ref-eff__more{ margin-top:8px; color:var(--muted); font-size:12px }

.ref-eff__empty{
  margin-top:12px; padding:14px;
  background:var(--surface-3);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); font-size:13px;
}

@media (max-width: 700px){
  .ref-eff__head{ align-items:stretch }
  .ref-eff__periods{ width:100%; justify-content:space-between }
}