/* Market heat map (/heatmap and the home page) and the home page's top movers. Tiles are laid out by js/heatmap.js. */
.heatmap-page { max-width: 100%; overflow-x: hidden; }
.heatmap-meta { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; }
.heatmap-note { color: var(--bs-secondary-color, #6c757d); font-size: 0.78rem; }
.heatmap-legend { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); }
.heatmap-legend-bar {
  display: inline-block;
  width: 8rem;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(242, 54, 69), rgb(66, 72, 82), rgb(8, 153, 80));
}
/* The bar reads red → green left to right in both languages, like the numbers around it. */
html[dir="rtl"] .heatmap-legend { direction: ltr; }
.heatmap {
  position: relative;
  width: 100%;
  min-height: 420px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0d1117;
}
/* The full page: a dark frame with its toolbar, like a trading screen's heat map. */
.heatmap-shell { background: #0d1117; border-radius: 0.6rem; padding: 0.5rem; color: #d1d4dc; }
.heatmap-shell:fullscreen { border-radius: 0; padding: 0.75rem; overflow: auto; }
.heatmap-shell .heatmap { border-radius: 0.35rem; }
.heatmap-shell .heatmap-legend { color: #9aa3b2; }
.heatmap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.15rem 0.25rem 0.55rem; font-size: 0.82rem; }
.heatmap-switch { display: inline-flex; align-items: center; gap: 0.2rem; }
.heatmap-switch-label { color: #9aa3b2; display: inline-flex; align-items: center; gap: 0.3rem; margin-inline-end: 0.2rem; }
.heatmap-switch-label .bx { font-size: 1rem; }
.heatmap-switch button, .heatmap-icon-btn {
  background: #1c222d;
  color: #d1d4dc;
  border: 1px solid #2a3140;
  border-radius: 0.4rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
}
.heatmap-switch button.active { background: #2962ff; border-color: #2962ff; color: #fff; }
.heatmap-switch button:hover:not(.active), .heatmap-icon-btn:hover { background: #262d3a; }
.heatmap-icon-btn { padding: 0.2rem 0.45rem; font-size: 1.05rem; }
.heatmap-sector { position: absolute; box-sizing: border-box; }
.heatmap-sector-title {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 18px;
  padding-inline: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  color: #d1d4dc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heatmap-sector-title::after { content: " ›"; color: #7d8696; }
html[dir="rtl"] .heatmap-sector-title::after { content: " ‹"; }
.heatmap-tile {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #0d1117;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.15rem;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
  overflow: hidden;
  transition: filter 0.15s ease;
}
.heatmap-tile:hover, .heatmap-tile:focus-visible { filter: brightness(1.18); z-index: 1; outline: 2px solid #fff; }
.heatmap-tile-name { font-weight: 700; font-size: 0.72rem; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heatmap-tile-name.is-wrapped { white-space: normal; }
.heatmap-tile-pct { font-size: 0.7rem; font-weight: 600; line-height: 1.15; opacity: 0.95; direction: ltr; }
.heatmap-empty { padding: 2rem 1rem; color: var(--bs-secondary-color, #6c757d); text-align: center; }
.heatmap-lead { font-size: 0.9rem; }
.heatmap.heatmap-compact { min-height: 260px; }
/* Home page: top gainers, losers and most traded, under the map. */
.market-movers { border: 1px solid var(--bs-border-color, #e4e6e8); border-radius: 0.5rem; padding: 0.6rem 0.75rem; }
.market-movers-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
.market-movers-title .bx { font-size: 1.15rem; }
.market-movers-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; color: inherit; text-decoration: none; border-top: 1px dashed var(--bs-border-color, #e4e6e8); }
.market-movers li:first-child .market-movers-row { border-top: 0; }
.market-movers-row:hover .fw-semibold { color: var(--bs-primary, #696cff); }
.market-movers-name { display: flex; flex-direction: column; min-width: 0; }
.market-movers-name .fw-semibold { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-movers-name small { color: var(--bs-secondary-color, #6c757d); font-size: 0.72rem; }
.market-movers-num { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.market-movers-extra { font-weight: 600; color: var(--bs-secondary-color, #6c757d); font-size: 0.75rem; }