/* pppoker — проектная вёрстка.
   Формы / кнопки / поля — через ядерные ds-components
   (`forge/templates/_components/`), их стили живут в `forge/static/css/`.
   Здесь только page-level layout. Хардкод цветов запрещён — только var(--token). */

html, body { margin: 0; }
body { padding-left: 4px; padding-right: 4px; }

/* admin-table actions: прижать к правому краю td. */
.admin-table td.admin-table__actions { text-align: right; }

/* числовые колонки — вправо, моноширинные цифры (ровные столбцы). */
.admin-table th.admin-table__num,
.admin-table td.admin-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-table__muted { color: var(--muted); }
/* num-pos / num-neg / num-zero — стилизованы в ядерном forge base.css. */

/* строка ИТОГО (tfoot) — как в Excel: отбивка сверху, жирнее. */
.admin-table tfoot .admin-table__total td {
  border-top: 2px solid var(--line);
  font-weight: 600;
}

/* карточка периода — заголовок нашим шрифтом, не выделять сильно. */
.admin-page__header h1.period-card__title {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* — home (главная) — */
.home {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px var(--gutter);
}
.home__hero h1 {
  font-size: 2rem;
  margin: 0 0 12px;
}
.home__hero .lead {
  color: var(--muted);
  margin: 0 0 32px;
}
.home__demo {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.home__demo p {
  margin: 0 0 20px;
}

/* — echo demo result — */
.echo-result {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.echo-result__text {
  margin: 0 0 8px;
  font-weight: 500;
}
.muted { color: var(--muted); }

/* — зона загрузки файлов периода — */
.period-dropzone {
  position: relative;
  margin: 16px 0;
  padding: 32px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}
.period-dropzone.is-drag {
  border-color: var(--accent);
}
.period-dropzone p { margin: 4px 0; }
.period-dropzone.is-loading { cursor: progress; opacity: .9; }

/* — верхняя полоса загрузки: индикатор «движения» (indeterminate) — */
.top-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}
.top-progress[hidden] { display: none; }
.top-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .3s ease;
}
.period-progress__status { margin: 8px 0 0; color: var(--muted); }

/* — карточка периода: сворачиваемые группы колонок — */
.table-scroll { overflow-x: auto; }
.club-table-tools { display: flex; gap: 8px; margin: 0 0 12px; }
.club-table-tools .ds-btn.is-on { border-color: var(--accent); color: var(--accent); }
/* группы E:M и S:AI скрыты по умолчанию, разворачиваются кнопкой. */
.admin-table .col-em,
.admin-table .col-sai { display: none; }
.admin-table.show-em .col-em { display: table-cell; }
.admin-table.show-sai .col-sai { display: table-cell; }

/* Список клубов: группы Player Winnings (col-pw) и Club Earnings (col-ce)
   скрыты по умолчанию, разворачиваются кнопкой (clubs-list.js тоглит класс
   show-pw / show-ce на таблице). Тот же паттерн что col-em/col-sai — надёжнее
   .hidden на каждой ячейке. */
.admin-table .col-pw,
.admin-table .col-ce { display: none; }
.admin-table.show-pw .col-pw { display: table-cell; }
.admin-table.show-ce .col-ce { display: table-cell; }

/* транзакции: миниатюра фото в списке + сетка больших фото в модалке */
.txn-thumb { display: inline-block; cursor: pointer; line-height: 0; }
.txn-thumb img {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border, #2a2a2a);
}
.txn-thumb:hover img { border-color: var(--color-accent, #6fcf97); }
.txn-photos {
  display: flex; flex-wrap: wrap; gap: var(--space-2, 8px);
  margin: var(--space-3, 12px) 0; max-height: 70vh; overflow: auto;
}
.txn-photos img {
  max-width: 320px; max-height: 320px; object-fit: contain;
  border-radius: var(--radius-sm, 4px);
}

/* модалки транзакций (история/фото) — крупнее дефолтного ds-dialog (440px),
   кнопка «Закрыть» компактная (не растянута). */
.ds-overlay .ds-dialog.txn-modal {
  max-width: 80vw;
  min-width: 560px;
  width: auto;
}
.txn-modal .ds-dialog__actions { justify-content: center; }
.txn-modal .ds-dialog__actions .ds-btn {
  flex: 0 0 auto;
  min-width: 120px;
  width: auto;
}
.txn-history { width: 100%; }

/* якорь для крестика .ds-dialog__close (position:absolute) в модалках транзакций */
.ds-overlay .ds-dialog.txn-modal { position: relative; }

/* Строка ИТОГО в списке клубов — отделена верхней границей, числа жирнее. */
.admin-table__total td {
    border-top: 2px solid var(--line);
    font-weight: 600;
    background: var(--bg-card, transparent);
}

/* Стайлгайд (/admin/styleguide/) — строка-витрина: пример + кнопка копировать. */
.sg-item { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sg-item--block { align-items: flex-start; }
.sg-demo { flex: 1; min-width: 0; }
.sg-copy { white-space: nowrap; }
/* Свотч: цвет в квадратике, подпись обычным текстом (читаемо на любом фоне). */
.sg-swatch { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg); }
.sg-sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }