/* =========================================
   GRID & LEGEND
   ========================================= */


/* LEGEND */
.grid-legend {
  display: flex;
  gap: 2rem;
  margin: 2rem 0 1rem;
  font-size: 1rem;
  color: var(--ink-3);
}

.legend-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 0.5rem;
  cursor: pointer;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 50px;
  transition: all 0.2s ease;
}
.legend-item:hover {
  filter: brightness(95%);
}
.legend-item.active {
  border-color: var(--silver-light);
}

.legend-box {
  width: 16px; height: 16px; border-radius: 3px;
}
.legend-box.regular { background: var(--silver-light); }
.legend-box.playoff { background: var(--gold-light); }

/* GRID */
.schedule-grid-container {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
}

.day-label-column {
  display: grid;
  grid-template-rows: repeat(8, 1.5rem);
  gap: 4px;
  margin-right: 1rem;
}

.day-label,
.day-blank {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
}

.schedule-scroll-wrapper {
  flex-grow: 1;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.schedule-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.schedule-grid {
  display: inline-grid;
  grid-template-rows: repeat(8, 1.5rem); /* Header + 7 Days */
  grid-auto-flow: column;
  grid-auto-columns: 1.5rem;
  gap: 4px;
}

.month-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  height: 1.5rem;
  display: flex;
  align-items: flex-end;
}

.grid-cell {
  width: 1.5rem; 
  height: 1.5rem;
  font-size: 0.75rem;

  color: var(--ink-4);
  background-color: var(--bg-2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-cell.bg-regular { background-color: var(--silver-light); }
.grid-cell.bg-playoff { background-color: var(--gold-light); }

.grid-cell,
.day-label-column,
.month-label {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.schedule-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem;
  position: relative;
  z-index: 10;
}
.schedule-nav button {
  pointer-events: auto;
  cursor: pointer;
}

.nav-arrow,
.nav-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-2);
  color: var(--ink-3);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nav-arrow:hover,
.nav-today:hover {
  filter: brightness(95%);
}