.ballsack {
    position: fixed;
    z-index: 1;
    padding: 2em;

    width: 560px;

    /* Centering */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    /* Add the drop shadow */
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.19);
}

.tab-pane {

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

:root, [data-bs-theme=light] {
  --bs-primary: #f0b030 !important;
}

#modal {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  width: 400px;
  word-break: break-word;
  border-radius: 6px;
  background: #bad5ff;
}

/* Sortable table columns */
.sortable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  user-select: none;
}

.sortable:hover {
  text-decoration: underline;
  color: var(--bs-primary);
}

.sortable.sorted {
  font-weight: 600;
  color: var(--bs-primary);
}

/* Sortable table headers (for client-side sorting) */
.sortable-header {
  cursor: pointer;
  user-select: none;
}

.sortable-header:hover {
  background-color: rgba(240, 176, 48, 0.1);
}

.sortable-header.sorted-asc,
.sortable-header.sorted-desc {
  font-weight: 600;
  color: var(--bs-primary);
}

.sort-indicator {
  font-size: 0.8em;
}

/* Hide remove button by default, show on row hover */
.athlete-row .remove-athlete-btn {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.athlete-row:hover .remove-athlete-btn {
  opacity: 1;
}

/* Ensure dropdown menus appear above sticky table headers (sticky-top z-index is 1020) */
.dropdown-menu {
  z-index: 1021;
}

/* Mobile layout: reduce excess padding on small viewports */
@media (max-width: 575.98px) {
  main > div > .container-fluid,
  main > div > .container {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }
}

/* Hide remove button for crew athletes by default, show on row hover */
.crew-athlete-row .remove-crew-athlete-btn {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.crew-athlete-row:hover .remove-crew-athlete-btn {
  opacity: 1;
}