/* ============================================================
   История биржи (бета-модуль)

   Строка поиска — главный элемент; лента с бесконечной подгрузкой;
   карточка ордера — выдвижная панель справа, без ухода со страницы.
   Цвета — из токенов проекта (обе темы). Селекторы — под корневым классом.
   ============================================================ */

.exhist-page {
  --xh-panel: color-mix(in srgb, var(--text) 4%, transparent);
  --xh-panel2: color-mix(in srgb, var(--text) 7%, transparent);
  --xh-border: color-mix(in srgb, var(--text) 10%, transparent);
  --xh-mut: var(--muted);
  --xh-acc: var(--primary);
  --xh-warn: #e0a83c;
  --xh-bad: #e5484d;
  --xh-blue: #2f81f7;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;

  /* Значок «в реестре скамеров» приходит из общего виджета ника и построен
     на токене раздела Bybit. Сюда этот токен не доезжает — раздел объявляет
     свои --xh-*, — и обе декларации значка становились недействительными:
     прозрачный квадрат 8px и съехавший ник вместо метки. */
  --by-sell: #e5484d;
}

.exhist-page [hidden] { display: none !important; }

.exhist-page .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- поиск ---------- */

.exhist-page .xh-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--xh-panel);
  border: 1px solid var(--xh-border);
  border-radius: 10px;
}

.exhist-page .xh-search__input {
  flex: 1 1 320px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--xh-border);
  background: var(--xh-panel2);
  color: var(--text);
  font-size: 13px;
}
.exhist-page .xh-search__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--xh-acc) 55%, transparent);
}

.exhist-page .xh-search__chips { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.exhist-page .xh-search__chips:empty { display: none; }

.exhist-page .xh-chip {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--xh-border);
  color: var(--xh-mut);
}

/* Чип дип-линка «все сделки контрагента» (из карточки ордера). */
.exhist-page .xh-cpChipHost { padding: 0 2px 6px; }
.exhist-page .xh-cpChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  border: 1px solid color-mix(in srgb, var(--xh-acc) 45%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--xh-acc) 8%, transparent);
}
.exhist-page .xh-cpChip__x {
  border: none;
  background: transparent;
  color: var(--xh-mut);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0 3px;
}
.exhist-page .xh-cpChip__x:hover { color: var(--xh-acc); }
.exhist-page .xh-search__presets { max-width: 160px; }

/* ---------- фильтры ---------- */

.exhist-page .xh-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--xh-panel);
  border: 1px solid var(--xh-border);
  border-radius: 10px;
}

.exhist-page select,
.exhist-page .xh-inp {
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--xh-border);
  background: var(--xh-panel2);
  color: var(--text);
  font-size: 12px;
}
.exhist-page .xh-inp { width: 100px; }

.exhist-page .xh-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--xh-border);
  background: var(--xh-panel2);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.exhist-page .xh-btn--ghost { background: transparent; color: var(--xh-mut); }

.exhist-page .xh-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--xh-mut);
  cursor: pointer;
  user-select: none;
}

/* Переключатель «Моя команда | ВСЕ» — тот же вид, что был у пресетов периода. */
.exhist-page .xh-scope {
  display: inline-flex;
  border: 1px solid var(--xh-border);
  border-radius: 8px;
  overflow: hidden;
}
.exhist-page .xh-scope button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--xh-mut);
  cursor: pointer;
  font-size: 12px;
}
.exhist-page .xh-scope button.is-active {
  background: color-mix(in srgb, var(--xh-acc) 18%, transparent);
  color: var(--text);
}

/* Поля «от»/«до» с датой и временем. */
.exhist-page .xh-dt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--xh-mut);
}
.exhist-page .xh-inp--dt { width: 168px; }

/* Номер ордера копируется кликом. */
.exhist-page .xh-c--oid { cursor: copy; }
.exhist-page .xh-c--oid.is-copied { color: var(--xh-acc); }

/* ---------- лента ---------- */

.exhist-page .xh-tableHost {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--xh-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--xh-panel);
}

.exhist-page .xh-head,
.exhist-page .xh-row {
  display: grid;
  grid-template-columns: 130px 80px 190px 130px 120px minmax(140px, 1.2fr) minmax(120px, 1fr) 110px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.exhist-page .xh-head {
  height: 30px;
  color: var(--xh-mut);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--xh-border);
  background: var(--xh-panel2);
}

.exhist-page .xh-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}

.exhist-page .xh-row {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.exhist-page .xh-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

.exhist-page .xh-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.exhist-page .xh-status {
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--xh-border);
  color: var(--xh-mut);
}
.exhist-page .xh-status.is-done { color: var(--xh-acc); border-color: color-mix(in srgb, var(--xh-acc) 45%, transparent); }
.exhist-page .xh-status.is-appeal { color: var(--xh-warn); border-color: color-mix(in srgb, var(--xh-warn) 45%, transparent); }
.exhist-page .xh-status.is-cancel { color: var(--xh-bad); border-color: color-mix(in srgb, var(--xh-bad) 45%, transparent); }

.exhist-page .xh-flag { margin-left: 5px; font-size: 11px; color: var(--xh-mut); }
.exhist-page .xh-team {
  font-size: 10px;
  color: var(--xh-mut);
  border: 1px solid var(--xh-border);
  border-radius: 20px;
  padding: 0 5px;
}

.exhist-page .xh-empty { padding: 30px; text-align: center; color: var(--xh-mut); }
.exhist-page .xh-more { padding: 8px; text-align: center; color: var(--xh-mut); }