/* Custom calendar styling */
.calendar-cell {
  fill: #f3f4f6; /* Default background color */
}

/* Create a play density color range */
.play-level-1 { fill: #86efac; } /* Light green */
.play-level-2 { fill: #4ade80; } /* Medium green */
.play-level-3 { fill: #22c55e; } /* Bright green */
.play-level-4 { fill: #16a34a; } /* Strong green */

/* Responsive calendar container */
#calendar-heatmap {
  width: 100%;
  overflow-x: auto;
  min-height: 250px;
  margin-top:4px;
}

.calendar-wrapper {
  position: relative;
  width: 100%;
}

/* Make cells responsive to touch for mobile */
.calendar-cell:hover {
  stroke: #6b7280;
  stroke-width: 0.1px;
  cursor: pointer;
}

.calendar-cell:focus {
  stroke-width: 0.1px;
}

/* Month container for wrapping */
.month-container {
  display: inline-block;
  vertical-align: top;
  margin: 0 4px 16px 4px;
}

@media (max-width: 640px) {
  .calendar-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .year-nav {
    justify-content: center;
  }
  
  .month-container {
    width: calc(33.33% - 8px); /* 3 months per row on small screens */
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .month-container {
    width: calc(25% - 8px); /* 4 months per row on medium screens */
  }
}

@media (min-width: 1025px) {
  .month-container {
    width: calc(16.66% - 8px); /* 6 months per row on large screens */
  }
}