/* =========================================
   Market charts – layout + theming
   ========================================= */

:root{
  --card-bg: #ffffff;
  --card-border: #e5e7eb;         /* gray-200 */
  --card-shadow: 0 8px 30px rgba(0,0,0,.06);
  --title-color: #111827;         /* gray-900 */
  --muted: #6b7280;               /* gray-500 */
  --accent: #0ea5e9;              /* sky-500 */
  --chip-bg: #f1f5f9;             /* slate-100 */
  --chip-text: #334155;           /* slate-700 */
}

@media (prefers-color-scheme: dark){
  :root{
    --card-bg: #0b1220;
    --card-border: #1f2937;       /* gray-800 */
    --card-shadow: 0 8px 30px rgba(0,0,0,.35);
    --title-color: #f9fafb;       /* gray-50 */
    --muted: #a3a3a3;             /* neutral-400 */
    --accent: #38bdf8;            /* sky-400 */
    --chip-bg: #111827;           /* gray-900 */
    --chip-text: #e5e7eb;         /* gray-200 */
  }

  .page-banner-section .page-banner-title2 { color: #f9fafb !important; }
  .page-breadcrumb li { color: var(--muted) !important; }
}

/* Filters ribbon */
.filters{
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  align-items: center;
  margin: 16px auto 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  position: sticky;
  top: 8px;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.filters select, .filters button{
  width: 100%;
  height: 40px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--title-color);
  border-radius: 10px;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
}
.filters button{
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border: none;
}
@media (max-width: 992px){
  .filters{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 576px){
  .filters{ grid-template-columns: repeat(2,1fr); }
}

/* Chart grid */
.chart-container{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 20px 0 40px;
}

/* in assets/css/marketchart.css */
.chart-container > h2.market-section-title{
  grid-column:1 / -1;   /* take full width of the grid */
  justify-self:center;  /* center the heading block itself */
}

.market-section-title{
  text-align:center !important;
  font-size:22px;
  font-weight:800;
  color:var(--title-color);
  margin:18px 0 10px;
}

@media (max-width: 992px){
  .chart-container{ grid-template-columns: 1fr; gap: 14px; }
}


/* Chart card */
.chart-box{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 14px 16px 12px;
  overflow: hidden;
}

/* subtle accent glow */
.chart-box::after{
  content: "";
  position: absolute;
  right: -20%;
  bottom: -50%;
  width: 60%;
  height: 140%;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 60%);
  opacity: .25;
  pointer-events: none;
}

/* Optional title/subtitle if you add them in JS */
.chart-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--title-color);
  margin: 2px 0 8px;
}
.chart-subtitle{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}


/* Canvas sizing
   If your Chart.js options use maintainAspectRatio:false (recommended),
   this height will be respected. Otherwise, set height attribute on <canvas>.
*/
.chart-box canvas{
  width: 100% !important;
  height: 320px !important;
  display: block;
}
@media (max-width: 576px){
  .chart-box canvas{ height: 260px !important; }
}

/* Little metric “chips” you might render inside cards (optional) */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--card-border);
  font-size: 12px;
  font-weight: 600;
}