/* Контейнер всплывающего окна */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Содержимое всплывающего окна */
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  max-height: 90vh;
  max-width: 80vw;
  overflow: auto;
}

/* Внешний контейнер для сетки (можно просто с отступами) */
.table-container {
  margin-top: 10px;
}

/* Основная сетка для номеров песен — 20 колонок */
.matrix {
  display: grid;
  grid-template-columns: repeat(20, 1fr); /* ровно 20 колонок */
  gap: 5px;
  max-height: 80vh;       /* ограничение высоты */
  overflow-y: auto;       /* вертикальный скролл */
  padding: 5px;
  border: 1px solid #ddd;
}

/* Стили для каждой ссылки (ячейки) */
.song-id {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  background-color: #f0f0f0;
  text-decoration: none;
  color: black;
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Ховер эффект на ячейках */
.song-id:hover {
  background-color: #d0ebff;
  border-color: #3399ff;
}