/* ============================================
   Spot Trading Page - Specific Styles
   Mirrors trade-futures.css layout/patterns
   Uses trade-option.css shared styles
   Color: Buy=#5cb8e6 (cyan) / Sell=#e0a050 (amber)
   ============================================ */

/* Grid order & flex sizing (mirrors trade-option.css base + trade-futures.css) */
.trade-top-grid { align-items: start; }

/* Chart: takes remaining space, 700px height */
.spot-chart-card {
  order: 1;
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
}
.spot-chart-card #spotTvChart {
  width: 100%;
  flex: 1;
  min-height: 400px;
}

/* Order Book: fixed 240px width, matches chart height */
.spot-orderbook {
  order: 2;
  flex: 0 0 240px;
  min-width: 200px;
  height: 700px;
  overflow-y: auto;
}

/* Order Panel: fixed 340px width */
.spot-order-panel {
  order: 3;
  flex: 0 0 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/* --- Compact order panel spacing (mirrors futures) --- */
.spot-order-panel { padding: 16px; }
.spot-order-panel .order-side-toggle { margin-bottom: 12px; }
.spot-order-panel .order-side-btn { padding: 8px; font-size: 13px; }
.spot-order-panel .order-type-row { margin-bottom: 10px; }
.spot-order-panel .order-field { margin-bottom: 10px; }
.spot-order-panel .order-field label { margin-bottom: 0; }
.spot-order-panel .order-input { padding: 8px 0; font-size: 14px; }
.spot-order-panel .order-summary { padding: 8px 0; margin-bottom: 10px; }
.spot-order-panel .order-summary-row { padding: 3px 0; }
.spot-order-panel .order-summary-row.total { padding-top: 6px; }
.spot-order-panel .order-submit-btn { padding: 12px; margin-bottom: 8px; font-size: 14px; }
.order-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.spot-avbl {
  font-size: 11px;
  color: #8a8a9a;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.spot-avbl:hover { color: #c0c0d0; }

/* ===== ORDER BOOK COLUMN OVERFLOW FIX ===== */
.spot-orderbook .ob-row {
  font-size: 11px;
  gap: 4px;
  padding: 4px 0;
}
.spot-orderbook .ob-price,
.spot-orderbook .ob-size,
.spot-orderbook .ob-total {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.spot-orderbook .ob-header-row {
  gap: 4px;
  font-size: 9px;
}
.spot-orderbook .ob-spread-row {
  padding: 4px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.spot-orderbook .ob-mid-price {
  font-size: 14px;
}
.spot-orderbook .ob-spread-val {
  margin-left: auto;
  font-size: 10px;
  color: #5a5a6a;
  white-space: nowrap;
}

/* Contract/Pair Type Tags */
.type-tag.spot { color: #5cb8e6; background: rgba(92, 184, 230, 0.1); }

/* ===== SYMBOL DROPDOWN SELECTOR ===== */
.spot-symbol-selector {
  position: relative;
}

.spot-symbol-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.spot-symbol-btn svg {
  color: #5a5a6a;
  transition: transform 0.2s;
}

.spot-symbol-selector.open .spot-symbol-btn svg {
  transform: rotate(180deg);
}

.spot-symbol-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-height: 440px;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
  flex-direction: column;
}

.spot-symbol-selector.open .spot-symbol-dropdown {
  display: flex;
}

.spot-symbol-search {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 14px;
  color: #e0e0e8;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.spot-symbol-search:focus {
  border-bottom-color: rgba(92,184,230,0.3);
}

.spot-symbol-search::placeholder {
  color: #4a4a5a;
}

.spot-symbol-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}

.spot-symbol-list::-webkit-scrollbar {
  width: 3px;
}

.spot-symbol-list::-webkit-scrollbar-thumb {
  background: rgba(92, 184, 230, 0.3);
  border-radius: 2px;
}

.spot-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.spot-dd-item:hover {
  background: rgba(255,255,255,0.04);
}

.spot-dd-item.active {
  background: rgba(92,184,230,0.08);
}

.spot-dd-item-symbol {
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e8;
}

.spot-dd-item-price {
  font-size: 13px;
  color: #a8a8b8;
  font-variant-numeric: tabular-nums;
}

/* ===== PRICE ROW WITH BBO (from futures) ===== */
.price-row-with-bbo {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.price-row-with-bbo .order-input-wrap { flex: 1; }

/* BBO Button */
.bbo-btn {
  background: rgba(92,184,230,0.08);
  border: 1px solid rgba(92,184,230,0.2);
  color: #5cb8e6;
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.bbo-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); color: #7ccbf0; }
.bbo-btn.flash { background: rgba(92,184,230,0.25); }

/* ===== AVAILABLE PAIRS LIST (mirrors Active Contracts) ===== */
.spot-pairs-section { margin-bottom: 16px; }
.pairs-tabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); overflow-x: auto; }
.pairs-tab { background: none; border: 1px solid rgba(255,255,255,0.08); color: #8a8a9a; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit; }
.pairs-tab:hover { background: rgba(255,255,255,0.04); color: #c0c0d0; }
.pairs-tab.active { background: rgba(92,184,230,0.1); border-color: rgba(92,184,230,0.3); color: #5cb8e6; }
.pairs-tab .tab-count { font-size: 10px; color: inherit; opacity: 0.7; margin-left: 2px; }
.pairs-filter-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pairs-show-all-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8a8a9a; cursor: pointer; white-space: nowrap; }
.pairs-search-wrap { padding: 6px 16px; }
.pairs-search { width: 180px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #e0e0e8; outline: none; font-family: inherit; }
.pairs-search:focus { border-color: rgba(92,184,230,0.3); }
.pairs-search::placeholder { color: #5a5a6a; }
.pairs-scroll { overflow-x: auto; max-height: 500px; overflow-y: auto; }
.pairs-table { min-width: 650px; }
.pairs-loading { padding: 24px; text-align: center; color: #5a5a6a; font-size: 13px; }
.pairs-header { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 0.8fr 70px; gap: 8px; padding: 8px 16px; font-size: 11px; color: #5a5a6a; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; background: #1a1a2e; z-index: 1; }
.pairs-row { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 0.8fr 70px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.15s; }
.pairs-row:hover { background: rgba(255,255,255,0.02); }
.pairs-row.active { background: rgba(92,184,230,0.04); border-left: 3px solid #5cb8e6; }
.pair-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #e0e0e8; }
.pair-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pair-quote { font-size: 11px; color: #8a8a9a; font-weight: 400; margin-left: 4px; }
.pair-price { font-size: 13px; font-weight: 600; color: #e0e0e8; font-variant-numeric: tabular-nums; }
.pair-change { font-size: 12px; font-weight: 500; }
.pair-change.positive { color: #5cb8e6; }
.pair-change.negative { color: #e0a050; }
.pair-vol { font-size: 12px; color: #a8a8b8; font-variant-numeric: tabular-nums; }
.pair-high, .pair-low { font-size: 12px; color: #a8a8b8; font-variant-numeric: tabular-nums; }
.pair-trade-btn { background: rgba(92,184,230,0.08); border: 1px solid rgba(92,184,230,0.2); color: #5cb8e6; font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.pair-trade-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); }

/* ===== OPEN ORDERS / TRADE HISTORY TABS (mirrors futures positions) ===== */
.spot-orders-section { margin-bottom: 16px; }
.spot-pos-tabs { display: flex; gap: 0; }
.spot-pos-tab {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
}
.spot-pos-tab:hover { color: #c8c8d8; }
.spot-pos-tab.active { color: #e0e0e8; border-bottom-color: #5cb8e6; }
.spot-pos-tab-count { font-size: 11px; color: #5cb8e6; font-weight: 600; margin-left: 4px; }
.spot-tab-content { display: none; }
.spot-tab-content.active { display: block; }

/* Spot orders table (reuses pos-table styles from trade-option.css) */
.spot-pos-table-wrap { overflow-x: auto; }
.spot-pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spot-pos-table thead th {
  color: #7a7a8a;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: right;
}
.spot-pos-table thead th:first-child { text-align: left; }
.spot-pos-table thead th:last-child { text-align: center; }
.spot-pos-table tbody td {
  padding: 10px 10px;
  color: #c8c8d8;
  font-weight: 500;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.spot-pos-table tbody td:first-child { text-align: left; color: #e0e0e8; font-weight: 700; }
.spot-pos-table tbody td:last-child { text-align: center; }
.spot-pos-table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Side tags */
.spot-side-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.spot-side-tag.buy { color: #5cb8e6; background: rgba(92,184,230,0.1); }
.spot-side-tag.sell { color: #e0a050; background: rgba(224,160,80,0.1); }

/* Status tags */
.spot-status-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.spot-status-tag.open, .spot-status-tag.pending { color: #5cb8e6; background: rgba(92,184,230,0.1); }
.spot-status-tag.filled { color: #5cb8e6; background: rgba(92,184,230,0.1); }
.spot-status-tag.cancelled { color: #8a8a9a; background: rgba(138,138,154,0.1); }
.spot-status-tag.error { color: #e0a050; background: rgba(224,160,80,0.1); }

/* Cancel button */
.spot-cancel-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(224,160,80,0.3);
  background: rgba(224,160,80,0.08);
  color: #e0a050;
  font-family: inherit;
}
.spot-cancel-btn:hover { background: rgba(224,160,80,0.18); }

/* ===== TOAST NOTIFICATIONS ===== */
.spot-toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spot-toast {
  background: #1e2038;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toastIn 0.2s ease;
}
.spot-toast.success { border-left: 3px solid #5cb8e6; }
.spot-toast.error { border-left: 3px solid #e0a050; }
.spot-toast-title { font-size: 12px; font-weight: 700; color: #e0e0e8; margin-bottom: 2px; }
.spot-toast-msg { font-size: 11px; color: #a8a8b8; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
/* BUG #122: brief pulse so the user catches the toast even if their eyes
   are on the order panel rather than the corner. One-shot, fades right
   into the steady-state toast. */
.spot-toast.success { animation: toastIn 0.2s ease, toastPulse 0.6s ease 0.2s 1; }
@keyframes toastPulse {
  0%   { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  50%  { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 4px rgba(92,184,230,0.25); }
  100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
}

/* BUG #122: persistent inline order result card directly below the submit
   button. Stays for 10s after a successful order, 12s after an error, or
   until the user dismisses it — Toast alone was being missed by users
   whose eyes were on the order panel rather than the top-right corner. */
.spot-order-result {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
/* BUG #136: slide-down + fade animation, only fires when JS adds the
   .spot-order-result-fresh class. The old `animation: toastIn` (slide
   from right 20px) was inherited from the corner toast and rendered as
   an almost-invisible 20px horizontal nudge on the inline element. */
@keyframes resultCardIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.spot-order-result.spot-order-result-fresh {
  animation: resultCardIn 0.25s ease;
}
.spot-order-result.success {
  background: rgba(92,184,230,0.08);
  border: 1px solid rgba(92,184,230,0.35);
  color: #d6efff;
  box-shadow: 0 0 0 1px rgba(92,184,230,0.35), 0 4px 16px rgba(92,184,230,0.18);
}
.spot-order-result.error {
  background: rgba(224,160,80,0.08);
  border: 1px solid rgba(224,160,80,0.35);
  color: #ffe8c8;
  box-shadow: 0 0 0 1px rgba(224,160,80,0.35), 0 4px 16px rgba(224,160,80,0.18);
}
.spot-order-result-msg { flex: 1; min-width: 0; word-break: break-word; }
.spot-order-result-link {
  display: inline-block;
  margin-top: 4px;
  color: #5cb8e6;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.spot-order-result-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.spot-order-result-close:hover { opacity: 1; }
@media (max-width: 480px) {
  .spot-order-result { font-size: 11px; padding: 8px 10px; }
}

/* ===== ORDER CONFIRMATION MODAL ===== */
.spot-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spot-confirm-modal {
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
}
.spot-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: #e0e0e8;
  margin-bottom: 16px;
}
.spot-confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.spot-confirm-row .label { color: #8a8a9a; }
.spot-confirm-row .value { color: #e0e0e8; font-weight: 600; font-variant-numeric: tabular-nums; }
.spot-confirm-row.total { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 8px; padding-top: 10px; }
.spot-confirm-row.total .value { font-size: 14px; }
.spot-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.spot-confirm-cancel {
  flex: 1;
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #a8a8b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.spot-confirm-cancel:hover { background: rgba(255,255,255,0.08); }
.spot-confirm-submit {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.spot-confirm-submit.buy {
  background: linear-gradient(135deg, #5cb8e6, #4ca8d6);
  color: #fff;
}
.spot-confirm-submit.buy:hover {
  background: linear-gradient(135deg, #6cc8f6, #5cb8e6);
  box-shadow: 0 4px 20px rgba(92,184,230,0.3);
}
.spot-confirm-submit.sell {
  background: linear-gradient(135deg, #e0a050, #d09040);
  color: #fff;
}
.spot-confirm-submit.sell:hover {
  background: linear-gradient(135deg, #f0b060, #e0a050);
  box-shadow: 0 4px 20px rgba(224,160,80,0.3);
}

/* ===== RESPONSIVE =====
   BUG #15: legacy @1100/@860 rules removed. Spot now relies on the
   unified Mid (1024-1439px) + Narrow (<1024px) layout defined in
   trade-option.css under `body.trade-page-3up`. */

@media (max-width: 480px) {
  .inst-bar-metrics { display: none !important; }
  .spot-order-panel { padding: 12px; }
}