body { font-family: Arial, sans-serif; margin: 0; background: #f5f7fb; color: #222; }
header { background: #1f4b99; color: white; padding: 12px 20px; }
main { padding: 16px; display: grid; grid-template-columns: 1fr; gap: 16px; }
section { background: white; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
input, select, button { padding: 6px; }
ul { list-style: none; padding: 0; max-height: 320px; overflow: auto; }
li { border-bottom: 1px solid #ddd; padding: 8px 0; }
.small { color: #666; font-size: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
audio { width: 100%; background: #f0f2f7; }


.player-section audio {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.small a { word-break: break-all; }

.reservation-group-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.reservation-items { margin-top: 8px; padding-left: 10px; border-left: 2px solid #eef2fb; max-height: none; }
.reservation-items > li:last-child { border-bottom: 0; }

#seriesWatchReservationList,
#singleEventReservationList {
  max-height: none;
  overflow: visible;
}

#recordingList {
  max-height: none;
  overflow: visible;
}

#seriesList,
#eventsList {
  max-height: none;
  overflow: visible;
}


.player-controls { display: flex; gap: 8px; margin: 8px 0; }

.now-playing {
  margin-bottom: 8px;
  font-weight: 600;
  color: #1f4b99;
}

.recording-status-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status-in-progress {
  background: #fff3cd;
  color: #7a5700;
}

.status-failed {
  background: #fde2e1;
  color: #9c1c1c;
}

.status-ready {
  background: #e3f6e8;
  color: #146c2e;
}

.status-unknown {
  background: #e9ecef;
  color: #495057;
}


.tab-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-button {
  background: #e9eef9;
  border: 1px solid #c8d5f3;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.tab-button.active {
  background: #1f4b99;
  color: #fff;
  border-color: #1f4b99;
}

.tab-panel[hidden] {
  display: none;
}