/* Solana arb dashboard — slim overrides on top of Bootstrap dark. */

body {
  background-color: #0c0f14;
  color: #d7dde6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.card {
  background-color: #161b22;
  border: 1px solid #1f2630;
}
.card-header {
  background-color: #1f2630;
  border-bottom: 1px solid #2a313c;
}
.table-dark {
  --bs-table-bg: #161b22;
  --bs-table-color: #d7dde6;
  --bs-table-striped-bg: #1a2029;
}
.navbar {
  background-color: #11151c;
}

.metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a93a3;
}
.metric-value {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.metric-value.up    { color: #4ade80; }
.metric-value.down  { color: #f87171; }
.metric-value.warn  { color: #facc15; }

td.num, th.num, .text-end {
  font-variant-numeric: tabular-nums;
}

.badge.bg-success-soft { background-color: #14532d; color: #4ade80; }
.badge.bg-danger-soft  { background-color: #7f1d1d; color: #fca5a5; }
.badge.bg-warning-soft { background-color: #713f12; color: #fbbf24; }

/* Chart containers — explicit height so Chart.js with maintainAspectRatio:false
 * can't grow the canvas without bound. Without this, mobile browsers enter a
 * resize feedback loop where the canvas keeps adding height every layout pass,
 * producing infinite-scroll pages.
 */
.chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}
.chart-wrap-sm {
  position: relative;
  height: 160px;
  width: 100%;
}
.chart-wrap canvas,
.chart-wrap-sm canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 576px) {
  .chart-wrap    { height: 220px; }
  .chart-wrap-sm { height: 130px; }
}