/* prices.css ─ Live Prices tab. Includes the shared metal selector + range bar chrome (also used by Bloomberg sub-nav). */

/* ── Toolbar ─────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.timestamp {
  font-size: 11px;
  color: #b0b6c8;
}

/* ── Prices table ────────────────────────────────── */
#prices-table {
  width: 100%;
  border-collapse: collapse;
}

#prices-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8bdd0;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #1e2130;
}

#prices-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #181b25;
  vertical-align: middle;
}

#prices-table tbody tr:hover {
  background: #1a1d27;
}

.metal-name {
  font-weight: 600;
  color: #e0e0e0;
}

.metal-symbol {
  display: block;
  font-size: 10px;
  color: #b0b6c8;
  margin-top: 1px;
}

.price-value {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #c9a84c;
}

.price-unit {
  font-size: 10px;
  color: #b0b6c8;
}

td.loading-cell {
  color: #aab0c0;
  font-style: italic;
  font-size: 12px;
}

/* ── Status ──────────────────────────────────────── */
.status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12px;
}

.status.error {
  background: #2a1515;
  color: #f08080;
  border: 1px solid #5a2020;
}

.status.info {
  background: #151e2a;
  color: #80b0f0;
  border: 1px solid #1a3050;
}

/* ── Insert panel ────────────────────────────────── */
.insert-options {
  margin-bottom: 12px;
}
.insert-cat-header {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c8cde0;
  margin: 8px 0 4px;
}
.insert-cat-header:first-child { margin-top: 0; }
.insert-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.fmt-axis-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
}
.fmt-axis-toggles label { white-space: nowrap; }

/* Category section header inside the prices table */
.category-row td {
  background: #1a1d27;
  color: #c8cde0;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px 4px !important;
  border-bottom: 1px solid #2a2d3a !important;
}

.insert-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #bbb;
  cursor: pointer;
}

.insert-options input[type='checkbox'] {
  accent-color: #c9a84c;
  width: 13px;
  height: 13px;
}

.insert-buttons {
  display: flex;
  gap: 8px;
}

/* ── Metal selector ──────────────────────────────── */
.metal-groups {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2d3a;
}

.metal-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.metal-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aab0c0;
}

.metal-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

/* Vertical line separating PGMs from PGM Baskets in the same row */
.metal-btn-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #2e3145;
  margin: 0 4px;
}

/* Basket pseudo-metals get a subtle gold tint so they read as a different concept */
.metal-btn-basket          { color: #8a7a3c; }
.metal-btn-basket:hover    { color: #d4b860; border-color: #c9a84c66; }
.metal-btn-basket.active   { background: #c9a84c22; border-color: #c9a84c; color: #c9a84c; }

.metal-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.metal-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.metal-btn.active {
  background: #c9a84c22;
  border-color: #c9a84c;
  color: #c9a84c;
}

.range-bar {
  display: flex;
  flex-wrap: wrap;       /* if a row is too long for the viewport, wrap to a second line rather than clipping content (e.g. the Animate button on the cost-curve View row) */
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.bb-anim-toggle-row {
  margin-top: 6px;
}