/* app/assets/stylesheets/ui/heatmap.css */
/* Peak Hours heatmap on /reports. Color steps come from ReportsHelper#heatmap_level_class. */

.heatmap-cell {
  @apply block h-9 min-w-7 rounded-md transition-shadow;
}

.heatmap-cell:focus-visible {
  @apply outline-none ring-2 ring-teal-600 ring-offset-1;
}

/* Closed: no doctor scheduled at this time. Hatched so it never reads as
   "open but empty", which is a light solid fill. */
.heatmap-closed {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-gray-100) 0 3px,
    transparent 3px 7px
  );
}

/* The shared tooltip only shows on hover; heatmap cells are focusable, so
   keyboard users get the same readout. */
.heatmap-cell.tooltip:focus-visible::before,
.heatmap-cell.tooltip:focus-visible::after {
  @apply opacity-100;
}

.heatmap-swatch {
  @apply inline-block w-4 h-4 rounded;
}

/* Fade while a metric/period chip loads the next view into the Turbo Frame. */
turbo-frame#peak_hours[busy] #peak-hours {
  @apply opacity-60 transition-opacity;
}