/* 订单簿组件样式 */

.orderbook-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #0d1117);
  color: var(--text-primary, #d1d4dc);
  font-family: 'Monaco', 'Consolas', monospace;
}

/* 订单簿标题 */
.orderbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary, #161b22);
  border-bottom: 1px solid var(--border-color, #21262d);
}

.orderbook-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #d1d4dc);
}

.orderbook-legend {
  display: flex;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary, #8b949e);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.ask {
  background: rgba(239, 83, 80, 0.3);
  border: 1px solid #ef5350;
}

.legend-color.bid {
  background: rgba(38, 166, 154, 0.3);
  border: 1px solid #26a69a;
}

/* 列标题 */
.orderbook-columns {
  display: flex;
  padding: 8px 16px;
  background: var(--bg-secondary, #161b22);
  border-bottom: 1px solid var(--border-color, #21262d);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  text-transform: uppercase;
}

.orderbook-col {
  flex: 1;
  text-align: right;
}

.orderbook-col.price-col {
  text-align: left;
}

.orderbook-col.amount-col {
  text-align: center;
}

/* 卖盘区域 */
.orderbook-asks {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse; /* ⭐ 反向排列：捲軸在底部，向上捲看更遠賣單 */
  justify-content: flex-start;
}

/* 买盘区域 */
.orderbook-bids {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ⭐ 下面区域靠上对齐 */
}

/* 订单簿行 */
.orderbook-row {
  position: relative;
  display: flex;
  padding: 6px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 28px;
  align-items: center;
}

.orderbook-row:hover {
  background: var(--bg-hover, rgba(88, 166, 255, 0.1));
}

/* 深度背景条 */
.orderbook-depth {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  transition: width 0.3s ease;
}

.orderbook-row.bid .orderbook-depth {
  background: linear-gradient(to left, rgba(38, 166, 154, 0.15), transparent);
}

.orderbook-row.ask .orderbook-depth {
  background: linear-gradient(to left, rgba(239, 83, 80, 0.15), transparent);
}

/* 订单簿行内容 */
.orderbook-row-content {
  position: relative;
  display: flex;
  width: 100%;
  font-size: 12px;
  z-index: 1;
}

/* 价格列 */
.bid-price {
  color: #26a69a;
  font-weight: 600;
}

.ask-price {
  color: #ef5350;
  font-weight: 600;
}

/* 数量列 */
.amount-col {
  color: var(--text-primary, #d1d4dc);
}

/* 🆕 真实系统挂单样式 - 黄色显示 */
/* 🆕 系统挂单样式（浅蓝色） */
.amount-col.system-order {
  color: #64B5F6;  /* 浅蓝色 */
  font-weight: 600;
}

/* 🆕 系统挂单行的背景 */
.orderbook-row.system-order .orderbook-depth {
  opacity: 1.1;
}

/* 🆕 流动性订单样式（蓝色） */
.orderbook-row.liquidity-order {
  background-color: rgba(33, 150, 243, 0.08) !important;
}

.orderbook-row.liquidity-order .amount-col {
  color: #2196F3 !important;  /* 蓝色 */
  font-weight: 600;
}

.orderbook-row.liquidity-order .orderbook-depth {
  opacity: 1.2;
}

/* 累计列 */
.total-col {
  color: var(--text-secondary, #8b949e);
  font-size: 11px;
}

/* 当前价格栏 */
.orderbook-current-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-secondary, #161b22);
  border-top: 1px solid var(--border-color, #21262d);
  border-bottom: 1px solid var(--border-color, #21262d);
  position: sticky;
  top: 50%;
  z-index: 2;
}

.current-price-label {
  font-size: 11px;
  color: var(--text-secondary, #8b949e);
  text-transform: uppercase;
  font-weight: 600;
}

.current-price-value {
  font-size: 16px;
  font-weight: 700;
  transition: color 0.3s;
}

.current-price-value.up {
  color: #26a69a;
}

.current-price-value.down {
  color: #ef5350;
}

/* 页脚 */
.orderbook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-secondary, #161b22);
  border-top: 1px solid var(--border-color, #21262d);
}

.update-time {
  font-size: 10px;
  color: var(--text-secondary, #8b949e);
}

.config-info {
  font-size: 10px;
  color: var(--accent-primary, #58a6ff);
  font-weight: 600;
}

/* 滚动条样式 */
.orderbook-asks::-webkit-scrollbar,
.orderbook-bids::-webkit-scrollbar {
  width: 6px;
}

.orderbook-asks::-webkit-scrollbar-track,
.orderbook-bids::-webkit-scrollbar-track {
  background: var(--bg-primary, #0d1117);
}

.orderbook-asks::-webkit-scrollbar-thumb,
.orderbook-bids::-webkit-scrollbar-thumb {
  background: var(--border-color, #30363d);
  border-radius: 3px;
}

.orderbook-asks::-webkit-scrollbar-thumb:hover,
.orderbook-bids::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #8b949e);
}

/* 响应式 */
@media (max-width: 768px) {
  .orderbook-columns,
  .orderbook-row {
    padding: 6px 12px;
  }
  
  .orderbook-col {
    font-size: 10px;
  }
  
  .orderbook-row-content {
    font-size: 11px;
  }
  
  .current-price-value {
    font-size: 14px;
  }
}


/* ===== Orderbook column visibility settings ===== */
.hide-amount .amount-col,
.hide-amount .amount-header { display: none !important; }

.hide-total .total-col,
.hide-total .total-header { display: none !important; }

.hide-spread .spread-pct-col { display: none !important; }

.hide-icons .type-icon-col { display: none !important; }

/* Price col expands to fill when others hidden */
.orderbook-col.price-col { flex: 1; }
.orderbook-col.amount-col { flex: 1; }
.orderbook-col.total-col { flex: 1; }

/* Settings panel */
.ob-settings-panel {
  position: absolute;
  top: 32px;
  right: 0;
  background: var(--bg-tertiary, #1c2128);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 100;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.ob-settings-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-primary, #c9d1d9);
  cursor: pointer;
  user-select: none;
}

.ob-settings-panel input[type=checkbox] {
  cursor: pointer;
  accent-color: #58a6ff;
}