/* styles/heatmap.css */
:root {
  --heatmap-edge-padding: clamp(24px, 5vw, 96px);
  --heatmap-section-height: 560px;
}

body.heatmap-page {
  background-color: #0d1117;
}

.heatmap-page .container {
  max-width: none;
  padding: 0;
}

.heatmap-header {
  padding: 0 var(--heatmap-edge-padding);
  gap: 1rem;
}

.heatmap-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.heatmap-header-right {
  align-items: flex-start;
  margin-top: 0.5rem;
}

.heatmap-section > h2 {
  padding-left: var(--heatmap-edge-padding);
  padding-right: var(--heatmap-edge-padding);
}

.heatmap-container {
  width: fit-content;
  height: 100%;
}

.heatmap-scroll-wrapper {
  width: calc(100% - 2 * var(--heatmap-edge-padding));
  max-width: calc(100% - 2 * var(--heatmap-edge-padding));
  height: var(--heatmap-section-height);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  margin: 0 var(--heatmap-edge-padding);
  box-sizing: border-box;
}

.heatmap-scroll-wrapper::-webkit-scrollbar {
  height: 10px;
}

.heatmap-scroll-wrapper::-webkit-scrollbar-track {
  background-color: rgba(15, 23, 42, 0.6);
}

.heatmap-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.35);
  border-radius: 9999px;
}

.heatmap-container--uniform {
  --uniform-gap: 4px;
  --uniform-cell-width: 150px;
  --uniform-cell-height: 110px;
  --uniform-row-count: 4;
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: var(--uniform-cell-width);
  grid-auto-rows: var(--uniform-cell-height);
  grid-template-rows: repeat(var(--uniform-row-count), var(--uniform-cell-height));
  gap: var(--uniform-gap);
  width: max-content;
  height: 100%;
  min-width: 100%;
}

.heatmap-container--uniform .heatmap-block {
  width: 100%;
  height: 100%;
  padding: 8px;
  border-radius: 4px;
  line-height: 1.3;
}

.heatmap-container--marketcap {
  --heatmap-cell: 32px;
  --heatmap-row-count: 8;
  --heatmap-gap: 2px;
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: var(--heatmap-cell);
  grid-auto-rows: var(--heatmap-cell);
  grid-template-rows: repeat(var(--heatmap-row-count), var(--heatmap-cell));
  gap: var(--heatmap-gap);
  width: max-content;
  height: 100%;
  min-width: 100%;
}

.heatmap-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px;
  border-radius: 6px;
  color: white;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.heatmap-block .symbol {
  font-weight: 600;
}

.heatmap-block .price {
  margin-top: 2px;
  font-weight: 500;
}

.heatmap-block .change {
  margin-top: 2px;
}

.heatmap-block .market-cap {
  margin-top: 2px;
  font-size: 0.85em;
}

.heatmap-container--uniform .heatmap-block.size-fixed {
  width: 100%;
  height: 100%;
}

.heatmap-block.compact {
  padding: 4px;
}

.heatmap-block.tight .change {
  margin-top: 0;
}

.heatmap-block.tight .price,
.heatmap-block.tight .market-cap {
  margin-top: 1px;
}

.legend-color.heatmap-block {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  grid-column: auto;
  grid-row: auto;
}

/* Color classes */
.heatmap-block.up-3 { background-color: #0f5132; }
.heatmap-block.up-2 { background-color: #146c43; }
.heatmap-block.up-1 { background-color: #198754; }
.heatmap-block.flat { background-color: #495057; }
.heatmap-block.down-1 { background-color: #dc3545; }
.heatmap-block.down-2 { background-color: #b02a37; }
.heatmap-block.down-3 { background-color: #842029; }

.heatmap-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 20px;
}

.toggle-switch input:checked + .toggle-track {
  background-color: #16a34a;
}

.toggle-switch .toggle-thumb {
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-track + .toggle-thumb {
  transform: translateX(24px);
}