/* Detail page styles (loaded on top of styles.css). */

.detail-body {
  background: var(--bg, #0b1020);
}

.detail-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 16px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-summary .summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 8px 4px;
}

.summary-grid .cell {
  background: var(--card-soft, rgba(255, 255, 255, 0.03));
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-grid .cell .label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted, #7a83a4);
  letter-spacing: 0.06em;
}
.summary-grid .cell .value {
  font-size: 16px;
  font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.summary-grid .cell .value.long { color: var(--up, #19c39a); }
.summary-grid .cell .value.short { color: var(--down, #ff5d6a); }
.summary-grid .cell .value.muted { color: var(--muted, #7a83a4); }

.detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.detail-col { display: flex; flex-direction: column; gap: 16px; }

.ticker-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 8px 0 12px;
}
.ticker-row .cell {
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.ticker-row .cell .label { color: var(--muted, #7a83a4); }

.book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.book-side h3 {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted, #7a83a4);
  letter-spacing: 0.08em;
}
.book-side table { width: 100%; border-collapse: collapse; }
.book-side td { padding: 2px 6px; }
.book-side td:first-child { width: 60%; }
.book-side td:last-child { text-align: right; }
.book-side.asks td:first-child { color: var(--down, #ff5d6a); }
.book-side.bids td:first-child { color: var(--up, #19c39a); }

.table-wrap.small td, .table-wrap.small th { font-size: 12px; padding: 4px 6px; }

.qty-shortcuts {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.qty-shortcuts button {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: inherit;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.qty-shortcuts button:hover { background: rgba(255, 255, 255, 0.12); }

#cancelAllBtn { margin-top: 8px; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(20, 24, 40, 0.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 200;
  max-width: 380px;
}
.toast.error { background: rgba(120, 30, 40, 0.95); }
.toast.ok { background: rgba(25, 80, 60, 0.95); }