/* Heatmap grid */
.heatmap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.15s ease-out;
}

/* Slide-in panel */
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.slide-in {
  animation: slideIn 0.2s ease-out;
}

/* Value input inline */
.value-input {
  width: 4rem;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.875rem;
}

/* Smooth toggle */
.toggle-btn {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.toggle-btn:active {
  transform: scale(0.92);
}

/* Habit row hover */
.habit-row {
  transition: background-color 0.1s ease;
}

/* Drag handles */
.habit-drag-handle {
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: grab;
}

.habit-row:hover .habit-drag-handle {
  opacity: 1;
}

.habit-drag-handle:active,
.group-drag-handle:active {
  cursor: grabbing;
}

/* Group section */
.group-section {
  margin-bottom: 0.75rem;
}

/* Group header action buttons — show on hover */
.group-header-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.group-header:hover .group-header-actions {
  opacity: 1;
}

/* SortableJS ghost while dragging */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  outline: 2px solid #d1d5db;
  border-radius: 0.75rem;
}