/* aii-heatboard.css (rev3)
   - Merge section title + header into one row
   - KPI: progress bar color by value (JS sets --kpi-accent)
   - Heat cells: text color only (no pill/radius/no tinted background)
   - Dark mode friendly (html.dark / data-bs-theme="dark")
*/

.aii-heatboard-page{
  --aii-primary: var(--ds_primary_color, #003366);
  --aii-primary-hover: var(--ds_primary_hover_color, #336699);

  --aii-text: var(--bs-body-color, #333);
  --aii-muted: var(--bs-secondary-color, #666);

  --aii-bg: var(--bs-body-bg, #fff);
  --aii-surface: var(--bs-tertiary-bg, #f6f7f9);
  --aii-border: var(--bs-border-color, #e5e7eb);

  --aii-radius: 16px;
  --aii-shadow: 0 8px 24px rgba(0,0,0,.06);

  /* Heatboard up/down coloring (default: RED is up, GREEN is down) */
  --aii-up: 239,68,68;
  --aii-down: 34,197,94;
  --aii-neutral: 120,120,120;

  color: var(--aii-text);
}

html.dark .aii-heatboard-page,
html[data-bs-theme="dark"] .aii-heatboard-page{
  --aii-surface: rgba(255,255,255,.06);
  --aii-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.aii-heatboard-page .aii-cardlike{
  background: var(--aii-bg);
  border: 1px solid var(--aii-border);
  border-radius: var(--aii-radius);
  box-shadow: var(--aii-shadow);
}

.aii-heatboard-page .aii-spacer{ height: 14px; }

/* ----------------------------
   H1 page title
---------------------------- */
.aii-heatboard-page .aii-page-title{
  margin: 0 0 12px;
  color: var(--aii-primary);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(20px, 0.8vw + 16px, 24px);
}

/* ----------------------------
   KPI (quick stats) — NO outer wrapper border
---------------------------- */
.aii-heatboard-page .aii-brief-stats{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.aii-heatboard-page .aii-kpi-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 991px){
  .aii-heatboard-page .aii-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .aii-heatboard-page .aii-kpi-grid{ grid-template-columns: 1fr; }
}

.aii-heatboard-page .kpi{
  --kpi-accent: var(--aii-primary); /* JS will override this by value */
  --kpi-pct: 0%;
  padding: 12px 12px 10px;
  border: 1px solid var(--aii-border);
  border-radius: 14px;
  background: var(--aii-bg);
}
html.dark .aii-heatboard-page .kpi,
html[data-bs-theme="dark"] .aii-heatboard-page .kpi{
  background: var(--aii-surface);
}

.aii-heatboard-page .kpi-head{ margin-bottom: 6px; }
.aii-heatboard-page .kpi-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

.aii-heatboard-page .kpi-main{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.aii-heatboard-page .kpi-main-row{ width: 100%; }

.aii-heatboard-page .kpi-value{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(20px, 2.2vw, 26px);
}

/* Chip stays on the right */
.aii-heatboard-page .kpi-state{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--aii-border);
  color: var(--aii-muted);
  background: rgba(var(--aii-neutral), .06);
  white-space: nowrap;
}

/* Meter */
.aii-heatboard-page .kpi-meter{
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--aii-neutral), .10);
  overflow: hidden;
}
.aii-heatboard-page .kpi-bar{
  height: 100%;
  width: var(--kpi-pct);
  background: var(--kpi-accent);
  border-radius: 999px;
}

/* Fallback (if JS did not set --kpi-accent) */
.aii-heatboard-page .kpi[data-state="neutral"]{ --kpi-accent: rgba(var(--aii-neutral), .55); }
.aii-heatboard-page .kpi[data-state="fear"]{ --kpi-accent: rgb(245,158,11); }
.aii-heatboard-page .kpi[data-state="extreme fear"]{ --kpi-accent: rgb(239,68,68); }
.aii-heatboard-page .kpi[data-state="greed"]{ --kpi-accent: rgb(34,197,94); }
.aii-heatboard-page .kpi[data-state="extreme greed"]{ --kpi-accent: rgb(16,185,129); }

/* ----------------------------
   Heatboard
---------------------------- */
.aii-heatboard-page .aii-board{
  padding: clamp(12px, 2.2vw, 18px);
}

/* Toggle: swap up/down meaning */
.aii-heatboard-page .aii-board.mode-green-up{
  --aii-up: 34,197,94;
  --aii-down: 239,68,68;
}

.aii-heatboard-page .aii-title{
  color: var(--aii-primary);
  font-weight: 900;
  font-size: clamp(17px, 0.5vw + 14px, 20px);
  margin: 0;
}
.aii-heatboard-page .aii-asof{
  color: var(--aii-muted);
  font-weight: 700;
  font-size: 12px;
}

.aii-heatboard-page .aii-btn{
  padding: 6px 12px;
  border: 1px solid var(--aii-primary);
  background: transparent;
  color: var(--aii-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.aii-heatboard-page .aii-btn:hover{ background: rgba(0,0,0,.03); }
html.dark .aii-heatboard-page .aii-btn:hover,
html[data-bs-theme="dark"] .aii-heatboard-page .aii-btn:hover{ background: rgba(255,255,255,.06); }

.aii-heatboard-page .aii-viewport{
  width: 100%;
  border-top: 1px solid var(--aii-border);
  margin-top: 10px;
  overflow-x: hidden;
}
@media (max-width: 767px){
  .aii-heatboard-page .aii-viewport{ overflow-x: auto; }
}

.aii-heatboard-page .aii-grid{
  display: grid;
  grid-template-columns: 2fr repeat(7, 1fr);
  column-gap: 0;
}
.aii-heatboard-page .aii-row{ display: contents; }

.aii-heatboard-page .aii-gth,
.aii-heatboard-page .aii-cell,
.aii-heatboard-page .aii-sec-head{
  padding: 10px 12px;
  border-bottom: 1px solid var(--aii-border);
  background: var(--aii-bg);
  font-size: clamp(12px, 2.0vw, 14px);
}

/* Merged header row: first cell = section title */
.aii-heatboard-page .aii-sec-head{
  background: var(--aii-surface);
  color: var(--aii-primary);
  font-weight: 900;
  text-align: left;
  border-top: 1px solid var(--aii-border);
}

/* Same row header cells */
.aii-heatboard-page .aii-gth{
  background: var(--aii-surface);
  color: var(--aii-primary);
  font-weight: 900;
  text-align: right;
  border-top: 1px solid var(--aii-border);
}

.aii-heatboard-page .name-line{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.aii-heatboard-page .aii-name{
  font-weight: 900;
  color: var(--aii-text);
  white-space: nowrap;
}
.aii-heatboard-page .chip{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--aii-primary);
  color: var(--aii-primary);
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.aii-heatboard-page .right{ text-align: right; }
.aii-heatboard-page .muted{ color: var(--aii-muted); }

/* Heat cells: text color only */
.aii-heatboard-page .heat{
  border-radius: 0;
  background: transparent !important;
}

/* Color meaning depends on vars (toggle swaps) */
.aii-heatboard-page .heat.positive{ color: rgb(var(--aii-up)); }
.aii-heatboard-page .heat.negative{ color: rgb(var(--aii-down)); }
.aii-heatboard-page .heat.flat{ color: rgba(var(--aii-neutral), .85); }

/* Optional hover */
.aii-heatboard-page .aii-grid .aii-row:hover .aii-cell{
  background: rgba(0,0,0,.015);
}
html.dark .aii-heatboard-page .aii-grid .aii-row:hover .aii-cell,
html[data-bs-theme="dark"] .aii-heatboard-page .aii-grid .aii-row:hover .aii-cell{
  background: rgba(255,255,255,.03);
}

@media (max-width: 767px){
  .aii-heatboard-page .aii-grid{
    grid-template-columns: 220px repeat(7, 120px);
  }
  .aii-heatboard-page .aii-gth,
  .aii-heatboard-page .aii-cell,
  .aii-heatboard-page .aii-sec-head{
    padding: 10px 10px;
  }
}

/* Heatboard row hover: extend to ALL cells, including .heat */
.aii-board .aii-grid .aii-row:hover .aii-cell{
  background: rgba(0,0,0,.02);
}
html.dark .aii-board .aii-grid .aii-row:hover .aii-cell,
html[data-bs-theme="dark"] .aii-board .aii-grid .aii-row:hover .aii-cell{
  background: rgba(255,255,255,.03);
}

/* If .heat has its own background that blocks hover, force override */
.aii-board .aii-grid .aii-row:hover .aii-cell.heat{
  background: rgba(0,0,0,.02) !important;
}
html.dark .aii-board .aii-grid .aii-row:hover .aii-cell.heat,
html[data-bs-theme="dark"] .aii-board .aii-grid .aii-row:hover .aii-cell.heat{
  background: rgba(255,255,255,.03) !important;
}