/*
 * Раздел «Платежи»: журнал, потерянные уведомления, веб-покупки.
 *
 * Все правила вложены в .pay-page — имена вроде .pay-note и .orphan-card
 * ничем не заняты, но раздел новый, и скоупить его дешевле, чем потом
 * искать, кто кого перебил.
 *
 * Значения — только токены :root из admin.css. Отступы по системе:
 * блок 15px, ячейка таблицы 12px 14px, скругления var(--radius)/(--radius-sm).
 */

/* ---- Пояснение над списком ----
   Не украшение: на всех трёх страницах оно объясняет, что означают
   строки и чего кнопка НЕ делает. Без него «Отметить разобранным»
   читается как «зачислить деньги». */

.pay-page .pay-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.pay-page .pay-note i {
  color: var(--muted);
  margin-top: 2px;
  flex: none;
}

.pay-page .pay-note a {
  color: var(--accent);
  text-decoration: none;
}

.pay-page .pay-note a:hover { text-decoration: underline }

/* Денежная страница отличается не рамкой целиком, а левым кантом:
   сплошная жёлтая обводка вокруг абзаца читалась как ошибка формы. */
.pay-page .pay-note--warn {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  color: var(--text);
}

.pay-page .pay-note--warn i { color: var(--warn) }

/* ---- Мелкая строка под значением ---- */

.pay-page .pay-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.pay-page .pay-user { min-width: 0 }
.pay-page .pay-user .copy-ico { margin-left: 6px }

/* ---- Журнал платежей ---- */

.pay-page .data-table--payments td { font-variant-numeric: tabular-nums }

/* Идентификатор у платёжки бывает длинным (UUID у Antilopay) и в
   свободной колонке растягивал таблицу на полтора экрана. */
.pay-page .data-table--payments .pay-provider-id {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.pay-page .data-table--payments .pay-purpose {
  max-width: 260px;
  white-space: normal;
  line-height: 1.4;
}

/* Невыданный товар — единственное красное пятно в журнале: по нему
   страница и просматривается. */
.pay-page .pay-undelivered {
  color: var(--bad);
  font-family: Roboto-Medium, Arial, sans-serif;
}

/* ---- Потерянные уведомления ---- */

.pay-page .orphan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.pay-page .orphan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
}

/* Разобранное гасим, а не прячем: список «Все» нужен как раз чтобы
   видеть, что и когда закрывали. */
.pay-page .orphan-card.is-resolved { opacity: .72 }

.pay-page .orphan-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.pay-page .orphan-card__head .pay-sub { margin-top: 0 }

.pay-page .orphan-card__provider {
  font-family: Roboto-Medium, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
}

.pay-page .orphan-card__reason {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 12.5px;
  white-space: nowrap;
}

.pay-page .orphan-card__done { margin-left: auto }

/* Тело уведомления — на фоне страницы, а не карточки: так видно, что
   это чужой текст, который мы не разбирали. */
.pay-page .orphan-card__body {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 220px;
  overflow: auto;
}

.pay-page .orphan-card__note {
  margin-top: 11px;
  color: var(--text-dim);
  font-size: 13px;
}

.pay-page .orphan-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pay-page .orphan-card__input {
  flex: 1 1 320px;
  min-width: 0;
  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;
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}

.pay-page .orphan-card__input::placeholder { color: var(--muted) }

.pay-page .orphan-card__input:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Веб-покупки ---- */

.pay-page .data-table--webco .webco-state { min-width: 200px }

.pay-page .data-table--webco .webco-reason {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  max-width: 320px;
}

/* Кнопка выдачи — акцентная намеренно, в отличие от остальных действий
   в строках: она встречается в единицах строк и означает деньги. */
.pay-page .data-table--webco .btn-primary {
  padding: 8px 13px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pay-page .toolbar__controls { width: 100% }
  .pay-page .seg { width: 100%; overflow-x: auto }
  .pay-page .orphan-card__actions .btn-primary,
  .pay-page .orphan-card__actions .btn { width: 100%; justify-content: center }
}