@import url("/global.css");

.wrapper {
  display: flex;
  align-items: center;
  gap: 18px;
  width: auto;

  margin: 0 30px;
  position: relative;
}

.schedule-table {
  border-collapse: separate;
  border-spacing: 0 10px;          
  border-radius: 12px;
  border: 4px solid #ccc;
  overflow: hidden;

  width: 100%;
  background-color: transparent;   
  color: var(--color-body-bg);      
  font-size: 1.05rem;            
}


.schedule-table th {
  font-weight: 800;
  border-bottom: 2px solid #ccc;
  background-color: rgb(2, 2, 101);
  color: #fff;
  text-align: left;
  padding: 14px 12px;           
}


.schedule-table td {
  background: #fff;               
  border-bottom: none;            
  padding: 14px 12px;            
}

.schedule-table tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}
.schedule-table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
}

.schedule-table tr {
  height: auto;
}

.view-button {
  background-color: rgb(2, 2, 101);
  color: #fff;
  border: 1px solid rgb(2, 2, 101);

  width: 160px;            /* ✅ same length for all buttons */
  text-align: center;     /* center text */

  padding: 6px 0;         /* vertical padding only */
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}


.view-button:hover {
  filter: brightness(0.95);
}

.schedule-table tbody tr:hover {
  outline: 2px solid rgb(51, 57, 80);
}

#interactive-schedule :is(tr, .row, .schedule-row, .game-row):hover {
  outline: 2px solid rgb(51, 57, 80) !important;
}

/* Never outline the header row */
.schedule-table thead tr:hover,
.schedule-table thead tr:hover > th {
  outline: none !important;
}

/* Remove the vertical gap above the header row */
.schedule-table {
  border-spacing: 0; /* no global spacing */
}

/* Re-add spacing ONLY between body rows */
.schedule-table tbody {
  display: table-row-group;
}

.schedule-table tbody tr td {
  border-top: 10px solid transparent; /* creates the same “row gap” look */
}