/* Responsive styles for BTC Trend Lab */

/* Outline buttons: brighter text for dark backgrounds */
.btn-outline-secondary {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.btn-outline-light {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Plotly charts: prevent overflow */
.js-plotly-plot, .plotly, .plot-container {
  max-width: 100% !important;
}

/* Mobile (width <= 768px) */
@media (max-width: 768px) {
  /* Smaller title */
  .dashboard-title {
    font-size: 1.2rem !important;
  }

  /* Button groups wrap on small screens */
  .btn-group {
    flex-wrap: wrap !important;
  }

  /* Navigation row wrap */
  .nav-row {
    flex-wrap: wrap !important;
  }

  /* Hide Plotly toolbar on mobile */
  .modebar {
    display: none !important;
  }

  /* Reduce container padding */
  .container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Shrink main chart on mobile */
  .dash-graph {
    min-height: 0 !important;
  }
  #main-chart {
    height: 35vh !important;
    min-height: 180px !important;
  }

  /* Smaller font for tables */
  .table {
    font-size: 0.75rem !important;
  }

  /* Compact buttons */
  .btn-sm {
    font-size: 0.7rem !important;
    padding: 2px 5px !important;
  }
}