.heatmap {
  display: grid;
  width: 100%;
  max-width: 100%;
  margin: 2rem 0;
}

.heatmap-header {
  display: grid;
  grid-template-columns: clamp(40px, 8vw, 60px) repeat(12, minmax(0, 1fr));
  gap: 1px;
  align-items: center;
}

.heatmap-row {
  display: grid;
  grid-template-columns: clamp(40px, 8vw, 60px) repeat(24, minmax(0, 1fr));
  align-items: center;
}

.heatmap-corner { 
  height: 1px; 
}

.heatmap-day {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 500;
  padding: 4px;
  opacity: 0.9;
  text-align: right;
  letter-spacing: 0.02em;
}

.heatmap-time {
  font-size: clamp(0.625rem, 1.5vw, 0.75rem);
  opacity: 0.75;
  text-align: left;
  white-space: nowrap;
  padding: 2px 0;
}

.heatmap-cell {
  position: relative;
  overflow: hidden;
  height: clamp(24px, 5vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.heatmap-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(244, 180, 0, 0.3);
  z-index: 10;
  border-color: rgba(244, 180, 0, 0.4);
}

/* Smooth gradient levels (0 = least busy, 9 = peak busy) */
/* Green → Yellow-Gold → Orange → Red progression */
.lvl-0 { background: hsl(145, 65%, 28%); }  /* Deep green */
.lvl-1 { background: hsl(135, 70%, 32%); }  /* Green */
.lvl-2 { background: hsl(120, 75%, 36%); }  /* Lime green */
.lvl-3 { background: hsl(100, 80%, 42%); }  /* Yellow-green */
.lvl-4 { background: hsl(80, 85%, 48%); }   /* Chartreuse */
.lvl-5 { background: hsl(55, 90%, 52%); }   /* Gold (close to #f4b400) */
.lvl-6 { background: hsl(45, 92%, 50%); }   /* Deep gold */
.lvl-7 { background: hsl(35, 90%, 48%); }   /* Orange-gold */
.lvl-8 { background: hsl(20, 88%, 46%); }   /* Orange */
.lvl-9 { background: hsl(5, 85%, 44%); }    /* Red-orange (peak) */

.heatmap-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./concrete.jpg");
  background-size: 100%;
  mix-blend-mode: hard-light;
  opacity: 0.5;
  pointer-events: none;
}

.heatmap-legend {
  margin-left: clamp(40px, 8vw, 60px);
  display: flex;
  gap: clamp(12px, 3vw, 20px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: clamp(12px, 3vw, 16px) 0;
  margin-top: 8px;
}

.heatmap-tag {
  font-size: clamp(0.7rem, 1.8vw, 0.8rem);
  opacity: 0.85;
  display: flex;
  gap: 8px;
  align-items: center;
}

.heatmap-dot {
  width: clamp(8px, 2vw, 12px);
  height: clamp(8px, 2vw, 12px);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Tablet optimization */
@media (max-width: 768px) {
  .heatmap-header {
    grid-template-columns: 45px repeat(12, minmax(0, 1fr));
  }

  .heatmap-row {
    grid-template-columns: 45px repeat(24, minmax(0, 1fr));
  }

  .heatmap-time {
    font-size: clamp(0.55rem, 1.8vw, 0.65rem);
    padding: 1px 0;
  }

  .heatmap-day {
    font-size: clamp(0.7rem, 2.2vw, 0.8rem);
    padding: 2px;
  }
}

/* Mobile optimization - no horizontal scroll */
@media (max-width: 560px) {
  .heatmap {
    margin: 1rem 0;
  }

  .heatmap-header {
    grid-template-columns: 35px repeat(12, 1fr);
    gap: 0.5px;
  }

  .heatmap-row {
    grid-template-columns: 35px repeat(24, 1fr);
  }

  .heatmap-cell {
    border-width: 0.5px;
  }

  .heatmap-time {
    font-size: 0.5rem;
    padding: 0;
    line-height: 1.2;
  }

  .heatmap-day {
    font-size: 0.65rem;
    padding: 2px 1px;
  }

  .heatmap-legend {
    margin-left: 35px;
    gap: 8px;
    font-size: 0.65rem;
  }

  .heatmap-tag {
    font-size: 0.65rem;
    gap: 6px;
  }

  .heatmap-dot {
    width: 8px;
    height: 8px;
  }
}

/* Extra small screens - even more compact */
@media (max-width: 400px) {
  .heatmap-header {
    grid-template-columns: 30px repeat(12, 1fr);
    gap: 0.5px;
  }

  .heatmap-row {
    grid-template-columns: 30px repeat(24, 1fr);
  }

  .heatmap-time {
    font-size: 0.45rem;
  }

  .heatmap-day {
    font-size: 0.6rem;
    padding: 1px;
  }

  .heatmap-legend {
    margin-left: 30px;
  }

  /* Hide "Activity" text on smallest screens to save space */
  .heatmap-tag:first-child::after {
    content: " Low";
  }
  .heatmap-tag:first-child {
    font-size: 0;
  }
  .heatmap-tag:nth-child(2)::after {
    content: " Moderate";
  }
  .heatmap-tag:nth-child(2) {
    font-size: 0;
  }
  .heatmap-tag:last-child::after {
    content: " Peak";
  }
  .heatmap-tag:last-child {
    font-size: 0;
  }
  .heatmap-tag::after {
    font-size: 0.6rem;
  }
  .heatmap-dot {
    width: 7px;
    height: 7px;
  }
}