@import url("/assets/27f97f1b06b6cc25.css");
@import url("/assets/e0fdf42a0cea7285.css");
@import url("/assets/8ae631b27c708df4.css");
@import url("/assets/7c41516f3235fde9.css");
@import url("/assets/ea2bb4337b61b64a.css");

/* 2026-05-15: arbitrage chart modal embedded inline on /tru. Override modal
   overlay styles so the chart card renders as a regular block element under
   the TRU table (not as a fixed overlay over the entire page). */
.tru-arb-chart-inline.modal {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  background: transparent !important;
  display: block !important;
  pointer-events: auto !important;
}
.tru-arb-chart-inline .modal-backdrop {
  display: none !important;
}
.tru-arb-chart-inline .modal-card.arb-chart-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 12px 0 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 440px !important; /* короче — чтобы выплаты помещались без скролла, страница компактнее */
  box-shadow: none !important;
  border-radius: 14px !important;
}
.tru-arb-chart-inline .modal-close {
  display: none !important;
}

/* 2026-05-15: side-by-side layout — arb chart (left, wide) + Live panel (right, narrow, frameless). */
.tru-charts-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.tru-charts-row .tru-arb-chart-inline {
  flex: 1 1 auto;
  min-width: 0;
}
.tru-charts-row .tru-arb-chart-inline .modal-card.arb-chart-card {
  margin: 0 !important;
}
.tru-charts-row .tru-live-panel-frameless {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
}
.tru-charts-row .tru-live-panel-frameless .tru-live-panel-head {
  margin-bottom: 6px;
}
.tru-charts-row .tru-live-panel-frameless .tru-live-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.tru-charts-row .tru-live-panel-frameless .tru-live-canvas-wrap canvas {
  width: 100%;
  height: 100%;
}

/* 2026-05-15: Live panel slightly shorter — align with arb chart card minus head height. */
.tru-charts-row .tru-live-panel-frameless {
  align-self: stretch;
  max-height: 520px;
}

/* 2026-05-15: equal-width 1:1 layout, no labels on Live panel. */
.tru-charts-row {
  align-items: stretch;
}
.tru-charts-row .tru-arb-chart-inline {
  flex: 1 1 70%;
  min-width: 0;
}
.tru-charts-row .tru-live-panel-frameless {
  flex: 1 1 30%;
  min-width: 0;
  align-self: flex-start;
  height: 440px; /* match the reduced IN/OUT card */
  max-height: 440px;
  margin-top: 12px; /* align top with the arb chart card's 12px margin */
}
.tru-charts-row .tru-live-panel-frameless .tru-live-canvas-wrap {
  height: 100%;
}

/* 2026-05-15: hide resolution picker on Live panel (user request). */
.tru-charts-row .tru-live-canvas-wrap .chart-resolution-picker {
  display: none !important;
}

/* 2026-05-15: nudge arb chart resolution picker lower on /tru. The picker
   JS sets `--chart-resolution-top` as inline style (higher specificity than
   ancestor CSS-var), so override `top` directly with !important to win. */
.tru-charts-row .tru-arb-chart-inline .chart-resolution-picker {
  top: 4px !important;
}

/* 2026-05-15: shift chart canvas lower within the card — more breathing
   room at the top (so picker doesn't overlap), tighter bottom. */
.tru-charts-row .tru-arb-chart-inline .arb-chart-canvas-wrap {
  padding-top: 36px !important;
  padding-bottom: 0 !important;
}

/* 2026-06-06: re-enabled the coin/exchange picker buttons in the TRU table top row
   (user request — reverses the 2026-05-15 disable). Click a leg's exchange to pick
   another venue that lists the coin, or the coin to pick another token on that
   exchange (options come from the full arb universe; see pair_config_controller.js). */
.tru-page .tru-select-btn,
.tru-page [data-tru-picker-trigger="1"] {
  pointer-events: auto;
  cursor: pointer;
}

/* 2026-06: Price + Funding metric-compare charts — two panels in one row below
   the IN/OUT chart. Each panel = main per-exchange chart (top) + spread
   sub-chart (bottom), 1:1 with the arbitrage metric modal. */
.tru-side-charts-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.tru-side-charts-row .tru-side-chart {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 540px;
}
.tru-side-charts-row .tru-side-chart-state {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(234, 236, 239, 0.78);
  padding: 2px 6px 0;
  min-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tru-side-charts-row .tru-side-chart-state--spread {
  margin-top: 4px;
}
.tru-side-charts-row .tru-side-canvas-wrap {
  position: relative;
  min-height: 0;
}
.tru-side-charts-row .tru-side-canvas-wrap--main {
  /* equal CANVAS height with the spread chart below: flex-basis 26px offsets the
     padding-top reserve so canvas (wrap − 26px) == spread canvas (grow 1 each). */
  flex: 1 1 26px;
  padding-top: 26px; /* room for the resolution picker overlay */
}
.tru-side-charts-row .tru-side-canvas-wrap--spread {
  flex: 1 1 0;
}
.tru-side-charts-row .tru-side-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
/* resolution/time picker sits at the top of the main canvas (1:1 with arb) */
.tru-side-charts-row .tru-side-canvas-wrap--main .chart-resolution-picker {
  top: 2px !important;
}
/* faint watermark label ("Цена" / "Фандинг") over each metric chart */
.tru-side-watermark {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(234, 236, 239, 0.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .tru-side-charts-row { flex-direction: column; }
  .tru-side-charts-row .tru-side-chart { height: 440px; }
}

/* 2026-06: unify the four charts into ONE framed board — single border, thin
   dividers instead of gaps, equal columns (aligned 2x2 grid), no per-chart
   card chrome — so they read as one table, not separate charts. */
.tru-charts-board {
  margin-top: 12px;
  border: 1px solid var(--border, #2b3139);
  border-radius: 12px;
  overflow: hidden;
}
.tru-charts-board .tru-charts-row {
  margin: 0 !important;
  gap: 0 !important;
}
.tru-charts-board .tru-side-charts-row {
  border-top: 1px solid var(--border, #2b3139); /* divider between the two rows */
}
.tru-charts-board .tru-charts-row > * {
  min-width: 0 !important; /* keep existing column widths (IN/OUT wide, Live narrow) */
}
.tru-charts-board .tru-charts-row > * + * {
  border-left: 1px solid var(--border, #2b3139); /* divider between the two columns */
}
.tru-charts-board .tru-arb-chart-inline .modal-card.arb-chart-card {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tru-charts-board .tru-live-panel-frameless {
  margin-top: 0 !important;
  align-self: stretch !important;
}

/* 2026-06: funding-payments table — narrow scrollable panel left of IN/OUT. */
.tru-charts-board .tru-payments-panel {
  flex: 0 0 300px !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: flex-start;
  height: 440px;       /* фикс-бокс под высоту IN/OUT-графика — список скроллится внутри, не уезжает вниз */
  max-height: 440px;
}
.tru-payments-head {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(234, 236, 239, 0.5);
  padding: 8px 10px 6px;
}
.tru-payments-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.tru-pay-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}
.tru-pay-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #14181d;
  padding: 4px 6px;
  font-weight: 500;
  border-bottom: 1px solid var(--border, #2b3139);
  white-space: nowrap;
}
.tru-pay-th-time { text-align: left; color: rgba(234, 236, 239, 0.5); }
.tru-pay-th-ex { text-align: right; }
.tru-pay-th-ex img { width: 13px; height: 13px; vertical-align: middle; }
.tru-pay-day td {
  position: sticky;
  top: 25px;
  /* непрозрачный фон — чтобы при скролле строки/соседние дни не просвечивали
     сквозь залипший заголовок дня (виден только текущий верхний день) */
  background: #1b2026;
  z-index: 1;
  color: rgba(234, 236, 239, 0.6);
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;   /* день по центру, не сбоку */
}
.tru-pay-day-date { color: #e8c34a; font-weight: 700; }   /* дата — жёлтым */
.tru-pay-day-sum { margin-left: 8px; font-weight: 600; }  /* сумма спреда за день (рядом) */
.tru-pay-table tbody td {
  padding: 2px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.tru-pay-time { color: rgba(234, 236, 239, 0.55); white-space: nowrap; }
.tru-pay-val { text-align: right; white-space: nowrap; }
.tru-pay-val--na { color: rgba(234, 236, 239, 0.28); }
.tru-pay-empty { padding: 12px 10px; color: rgba(234, 236, 239, 0.4); font-size: 12px; }
/* колонка спреда выплаты (short − long) — отделена тонкой линией слева */
.tru-pay-th-spread { text-align: right; color: rgba(234, 236, 239, 0.5); white-space: nowrap; }
.tru-pay-spread { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.tru-pay-table thead th,
.tru-pay-table tbody td { padding-left: 5px; padding-right: 5px; }

/* колокольчик «добавить связку в алерт» в действиях строки (как в live-таблице) */
.tru-page .alert-add-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(16px, 1.6vw, 20px);
  height: clamp(16px, 1.6vw, 20px);
  border-radius: 7px;
  background: rgba(110, 231, 183, 0.10);
  border: 1px solid rgba(110, 231, 183, 0.35);
  color: #6ee7b7;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
  flex: 0 0 auto;
}
.tru-page .alert-add-btn:hover{
  background: rgba(110, 231, 183, 0.18);
  border-color: rgba(110, 231, 183, 0.55);
}
.tru-page .alert-add-btn:active{ transform: scale(0.95); }
.tru-page .alert-add-btn-ico{
  width: clamp(10px, 1.0vw, 12px);
  height: clamp(10px, 1.0vw, 12px);
  display: block;
}