/* spectator/css/resource-market.css — Resource Market styling */

.rm-container { padding: 16px; max-width: 1200px; margin: 0 auto; }
.rm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.rm-header h2 { margin: 0; font-size: 1.4em; }

.rm-resource-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-res-tab {
  padding: 6px 14px; border: 1px solid var(--border, #ddd); border-radius: 20px;
  background: var(--bg-card, #fff); cursor: pointer; font-size: 0.9em;
  transition: all 0.2s;
}
.rm-res-tab:hover { border-color: var(--accent, #4CAF50); }
.rm-res-tab.active { background: var(--accent, #4CAF50); color: #fff; border-color: var(--accent, #4CAF50); }

.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rm-summaries { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; }

.rm-summary-card {
  flex: 1; min-width: 140px; padding: 12px; border-radius: 8px;
  background: var(--bg-card, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.rm-summary-card:hover { transform: translateY(-2px); }
.rm-summary-card.selected { box-shadow: 0 2px 8px rgba(76,175,80,0.3); }
.rm-summary-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rm-summary-emoji { font-size: 1.4em; }
.rm-summary-name { font-weight: 600; text-transform: capitalize; }
.rm-summary-price { font-size: 1.6em; font-weight: 700; color: var(--accent, #4CAF50); }
.rm-summary-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78em; color: var(--text-secondary, #888); margin-top: 4px; }

.rm-orderbook, .rm-trades, .rm-chart {
  background: var(--bg-card, #fff); border-radius: 8px; padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.rm-orderbook h3, .rm-trades h3, .rm-chart h3 { margin: 0 0 10px 0; font-size: 1em; }

.rm-ob-header { display: flex; justify-content: space-between; font-size: 0.75em; color: var(--text-secondary, #888); padding: 0 4px 6px; border-bottom: 1px solid var(--border, #eee); }
.rm-ob-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; position: relative; font-size: 0.85em; }
.rm-ob-bar { position: absolute; top: 0; left: 0; height: 100%; opacity: 0.15; border-radius: 3px; }
.rm-ob-row.ask .rm-ob-bar { background: #ef5350; }
.rm-ob-row.bid .rm-ob-bar { background: #4CAF50; }
.rm-ob-row.ask .rm-ob-price { color: #ef5350; }
.rm-ob-row.bid .rm-ob-price { color: #4CAF50; }
.rm-ob-price { flex: 1; font-weight: 600; z-index: 1; }
.rm-ob-qty { flex: 1; text-align: right; z-index: 1; }
.rm-ob-orders { width: 30px; text-align: right; color: var(--text-secondary, #888); z-index: 1; }
.rm-ob-spread { text-align: center; padding: 6px; font-size: 0.8em; color: var(--text-secondary, #888); border-top: 1px solid var(--border, #eee); border-bottom: 1px solid var(--border, #eee); margin: 4px 0; }
.rm-ob-asks, .rm-ob-bids { max-height: 200px; overflow-y: auto; }

.rm-trade-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border, #f0f0f0); font-size: 0.85em; }
.rm-trade-agents { color: var(--text-secondary, #888); }
.rm-trade-details { font-weight: 500; }
.rm-trade-total { font-weight: 700; color: var(--accent, #4CAF50); }
.rm-trades-list { max-height: 250px; overflow-y: auto; }

.rm-chart canvas { width: 100%; }
.rm-empty { text-align: center; padding: 20px; color: var(--text-secondary, #888); font-style: italic; }

/* Dark mode */
.dark .rm-summary-card { background: var(--bg-card, #1e1e1e); }
.dark .rm-orderbook, .dark .rm-trades, .dark .rm-chart { background: var(--bg-card, #1e1e1e); }
.dark .rm-res-tab { background: var(--bg-card, #1e1e1e); border-color: #444; color: #ccc; }
.dark .rm-res-tab.active { background: var(--accent, #4CAF50); color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .rm-grid { grid-template-columns: 1fr; }
  .rm-summaries { flex-direction: column; }
  .rm-summary-card { min-width: auto; }
  .rm-resource-tabs { flex-wrap: wrap; }
}