/* History Page */

.history-main {
  padding: 28px 40px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.history-header {
  margin-bottom: 24px;
}

.history-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--app-text-white);
  margin: 0 0 4px;
}

.history-header p {
  font-size: 13px;
  color: var(--app-text-muted);
  margin: 0;
}

/* Tabs */
.history-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #1e2536;
  margin-bottom: 20px;
  overflow-x: auto;
}

.history-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.history-tab:hover {
  color: #ccd6e0;
}

.history-tab.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
}

/* Filters bar */
.history-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.history-filter-select,
.history-filter-input {
  padding: 8px 12px;
  font-size: 13px;
  background: #1e2536;
  border: 1px solid #3a4660;
  border-radius: 6px;
  color: #ccd6e0;
  outline: none;
}

.history-filter-select:focus,
.history-filter-input:focus {
  border-color: var(--app-primary);
}

.history-filter-input {
  width: 160px;
}

.history-filter-input--search {
  width: 220px;
}

.history-filter-input::placeholder {
  color: var(--app-text-muted);
}

.history-filter-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  background: #1e2536;
  border: 1px solid #2a3248;
  border-radius: 6px;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.history-filter-btn:hover {
  background: #2a3248;
  color: #ccd6e0;
}

/* Table */
.history-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #1e2536;
  background: #0f1319;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.history-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--app-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #141926;
  border-bottom: 1px solid #1e2536;
  white-space: nowrap;
}

.history-table tbody td {
  padding: 12px 16px;
  color: #ccd6e0;
  border-bottom: 1px solid #1a1f2e;
  white-space: nowrap;
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}

.history-table tbody tr:hover {
  background: #141926;
}

/* BUG #303: transient highlight for an order deep-linked from the Spot
   success banner (/history?tab=spot&orderId=...). Uses an inset box-shadow
   overlay so the row's own background / hover stripe is never disturbed. */
.history-table tbody tr.history-row-highlight {
  animation: historyRowHighlight 2.6s ease-out 1;
}

@keyframes historyRowHighlight {
  0%   { box-shadow: inset 0 0 0 9999px rgba(92, 184, 230, 0.28); }
  100% { box-shadow: inset 0 0 0 9999px rgba(92, 184, 230, 0); }
}

/* Category badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-deposit {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-withdrawal {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.badge-futures {
  background: rgba(92, 184, 230, 0.15);
  color: var(--app-primary);
}

.badge-spot {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.badge-options {
  background: rgba(224, 160, 80, 0.15);
  color: var(--app-sell);
}

.badge-fee {
  background: rgba(138, 148, 166, 0.15);
  color: var(--app-text-muted);
}

/* AI Trading (copy-trade) category badge. Own hue so an AI row is separable at
   a glance from Futures (primary blue) and Spot (purple) on the All tab. */
.badge-ai {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

/* The AI Trading tab + the bot filter ship with the `hidden` attribute and are
   revealed from JS. Neither element has a `display` rule of its own today, so
   the UA `[hidden]{display:none}` already applies — this is a guard so that
   adding one later cannot silently un-hide an allowlist-gated control. */
.history-tab[hidden],
.history-filter-select[hidden] { display: none !important; }

/* Side badges */
.side-buy, .side-long {
  color: var(--app-primary);
  font-weight: 600;
}

.side-sell, .side-short {
  color: var(--app-sell);
  font-weight: 600;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.status-liquidated {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-reserved {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.status-released {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-filled, .status-completed, .status-confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-pending, .status-processing {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.status-cancelled, .status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-open {
  background: rgba(92, 184, 230, 0.15);
  color: var(--app-primary);
}

/* AI Trading row statuses (spec §9). Deliberately NOT wired into the shared
   getStatusBadge() map: 'released' / 'reserved' are also emitted by Spot rows
   and re-colouring those would change tabs this PR must leave alone. These are
   applied only by the AI-row renderer. Sign + colour both, per #889 — the label
   carries the meaning and the hue only reinforces it. */
.status-returned,
.status-profit {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-loss {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-charged,
.status-settled {
  background: rgba(138, 148, 166, 0.18);
  color: var(--app-text-muted);
}

/* Funds still held (reserve with no release/settle yet — an open cycle, or one
   under review). Amber = "your money is committed, not lost". */
.status-held {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

/* Plain-language sub-line under an AI row's Details cell. `white-space:normal`
   overrides the table's global `nowrap` so the held-funds sentence wraps instead
   of forcing the page body to scroll sideways on mobile. */
.history-ai-note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--app-text-muted);
  white-space: normal;
  max-width: 340px;
}

.history-ai-note--held { color: #eab308; }

/* The three rows of one settlement read as a block: a hairline on the left ties
   principal → profit/loss → fee together, and the last row closes the group. */
.history-table tbody tr.history-ai-split td:first-child {
  box-shadow: inset 2px 0 0 rgba(99, 102, 241, 0.55);
}

/* Amount positive/negative */
.amount-positive { color: #22c55e; }
.amount-negative { color: #ef4444; }

/* Empty state */
.history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--app-text-muted);
}

.history-empty svg {
  margin-bottom: 16px;
  opacity: 0.4;
}

.history-empty p {
  font-size: 14px;
  margin: 0;
}

/* Loading */
.history-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--app-text-muted);
}

.history-loading .spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #1e2536;
  border-top-color: var(--app-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
  .history-main { padding: 24px 20px 60px; }
}
@media (max-width: 768px) {
  .history-main {
    padding: 20px 16px 60px;
  }

  .history-tabs {
    gap: 0;
  }

  .history-tab {
    padding: 10px 14px;
    font-size: 12px;
  }

  .history-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .history-filter-input {
    width: 100%;
  }
  /* #323: the BEM modifier .history-filter-input--search has higher
     specificity than the base .history-filter-input rule above, so its base
     220px width carried into mobile — making the Search Symbol/Currency
     input visually narrower than the other filter controls on iPhone.
     Force 100% at this breakpoint too. */
  .history-filter-input--search {
    width: 100%;
  }
  /* Keep the AI Details column from dominating the (horizontally scrollable)
     table on a phone. The note still wraps rather than forcing the page body
     to scroll sideways. */
  .history-ai-note {
    max-width: 220px;
    font-size: 10px;
  }
}

/* ===== Ultimo light-theme overrides (audit 2026-06-25) =====
   history.css uses raw dark literals (#1e2536 / #2a3248 / #0f1319 / #141926 + light
   text #ccd6e0) built for the dark VESTEX page → carried over dark on the light
   Ultimo page. Flip the search/filter controls + the results table to light
   surfaces with dark text. Shared CSS → applies to ALL tabs. Scoped → vestex zero-diff. */
html[data-brand="ultimo"] .history-tabs { border-bottom-color: var(--app-border); }
html[data-brand="ultimo"] .history-tab:hover { color: var(--app-text-strong); }
html[data-brand="ultimo"] .history-filter-select,
html[data-brand="ultimo"] .history-filter-input {
  background: var(--app-surface-1);
  border-color: var(--app-border);
  color: var(--app-text-strong);
}
html[data-brand="ultimo"] .history-filter-btn {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text-strong);
}
html[data-brand="ultimo"] .history-filter-btn:hover { background: var(--app-surface-1); color: var(--app-text-strong); }
html[data-brand="ultimo"] .history-table-wrap {
  background: var(--app-surface-1);
  border-color: var(--app-border);
}
html[data-brand="ultimo"] .history-table thead th {
  background: var(--app-surface-2);
  border-bottom-color: var(--app-border);
}
html[data-brand="ultimo"] .history-table tbody td {
  color: var(--app-text-1);
  border-bottom-color: var(--app-border);
}
html[data-brand="ultimo"] .history-table tbody tr:hover { background: var(--app-surface-2); }
html[data-brand="ultimo"] .history-loading .spinner { border-color: var(--app-border); }
/* cyan-tint info badges + buy-side use the buy color, not the gold accent */
html[data-brand="ultimo"] .badge-futures,
html[data-brand="ultimo"] .status-open,
html[data-brand="ultimo"] .side-buy,
html[data-brand="ultimo"] .side-long { color: var(--app-buy); }

/* Ultimo: history.js renders Price (avgPrice/price) and Balance After values in an
   inline span color:#c9d1d9 (raw light gray) + Details in #6a7a8a → faint on the
   light table. Darken via attribute selectors scoped to .history-table. audit 2026-06-26 */
html[data-brand="ultimo"] .history-table [style*="#c9d1d9"] { color: var(--app-text-1) !important; }
html[data-brand="ultimo"] .history-table [style*="#6a7a8a"] { color: var(--app-text-muted) !important; }

/* Ultimo: the AI Trading badge + the amber "funds held" tokens are tuned for the
   dark VESTEX table; on the light shell #818cf8 / #eab308 drop below a readable
   contrast on white. Darken the foreground only — the tinted backgrounds carry
   over unchanged, so the hue still reads the same. */
html[data-brand="ultimo"] .badge-ai { color: #4338ca; }
html[data-brand="ultimo"] .status-held { color: #854d0e; }
html[data-brand="ultimo"] .history-ai-note--held { color: #854d0e; }
html[data-brand="ultimo"] .status-charged,
html[data-brand="ultimo"] .status-settled { color: var(--app-text-1); }