/* Heat Map Calendar Styles */
.heat-map-calendar {
  width: 100%;
}

/* Date Heat Map */
.date-heat-map-grid {
  padding: 8px;
}

.date-heat-map-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.date-heat-map-header {
  text-align: center;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
}

.date-heat-map-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-heat-map-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.date-heat-map-cell:hover:not(.date-past) {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

.date-heat-map-empty {
  aspect-ratio: 1;
}

.date-past {
  opacity: 0.4;
  cursor: not-allowed;
}

.date-today {
  font-weight: bold;
  border: 2px solid #0d6efd !important;
}

.date-selected {
  background-color: #0d6efd !important;
  color: white !important;
}

.heat-map-grid {
  display: flex;
  gap: 8px;
}

.heat-map-time-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 8px;
}

.heat-map-time-label {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 10px;
  color: #6c757d;
  padding-right: 4px;
}

.heat-map-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.heat-map-cell {
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.heat-map-cell:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

/* Heat levels */
.heat-level-0 {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.heat-level-1 {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
}

.heat-level-2 {
  background-color: #fed8b1;
  border: 1px solid #ffc107;
}

.heat-level-3 {
  background-color: #f5c6cb;
  border: 1px solid #f5c2c7;
}

.heat-level-4 {
  background-color: #d1454e;
  border: 1px solid #dc3545;
  color: white;
}

.heat-selected {
  border: 2px solid #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}