/* Chart Box */
.chart-container {
  width: 25rem;
  height: 10rem;
  background: #000;
  border: none; /* 1px solid var(--main-gold); */
  padding: 0.5rem;
  box-sizing: border-box;
}
canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}
.charts-row {
  display: flex;
  flex-direction: wrap;
  gap: 1rem;
  padding: 1rem;
}
.chart-container p {
  color: var(--main-gold); /* or any color you prefer */
  font-size: 0.5rem;
  margin-bottom: 0.2rem;
  margin-top: 0rem;
  margin-bottom: 0rem;

}
@media (max-width: 768px) {
  .chart-container {
    width: 100%;
    height: auto;
  }
}
.chart-modal {
  position: fixed;
  top: 5vh;
  left: 5vw;
  width: 90vw;
  height: 90vh;
  overflow: auto;
  background-color: transparent; /*(0,0,0,0.8); */
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
}

.chart-content {
  width: 100%;
  max-width: 1000px;
  background: #000;
  padding: 0.5rem;
  border-radius: 8px;
  position: relative;
}
.chart-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  color: var(--main-gold);
  cursor: pointer;
}
.chart-trigger {
  padding: 0.5rem;
  background: #000;
  border-radius: 8px;
  transition: transform 0.3s;
}
.chart-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(207, 181, 59, 0.3);
}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /*repeat(auto-fill, minmax(200px, 1fr));*/
  gap: 0.8rem;
  padding: 0.5rem;
  justify-items: center;
}

.chart-card {
  width: 16vw;
  background: #000;
  border: 1px solid var(--main-gold);
  border-radius: 8px;
  padding: 0.1rem;
  text-align: center;
  color: var(--main-gold);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
@media (max-width: 600px) {
  .chart-card {
    width: 20vw; /* or any mobile-friendly width */
  }
}
.chart-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(207, 181, 59, 0.3);
}
.chart-card h3 {
  font-size: 1rem;
  margin-bottom: 0rem;
}
.chart-card p {
  font-size: 0.9rem;
  margin: 0;
}