/* Species management dashboard — styled to match the Gin admin theme.
   Uses Gin's CSS custom properties with sensible fallbacks, so colours,
   border-radius and dark mode are inherited from the active theme. Button
   styling is handled by Gin via the core `.button` classes in the template. */

.tournament-species-dashboard {
  color: var(--gin-color-text, #1b1b1b);
}

.tournament-species-dashboard .dashboard-intro {
  margin: 0 0 var(--gin-spacing-l, 1.5rem);
  color: var(--gin-color-text-light, #545560);
}

/* Toolbar (Add Family / Add Species). */
.tournament-species-dashboard .dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gin-spacing-s, 0.75rem);
  justify-content: flex-end;
  margin-bottom: var(--gin-spacing-l, 1.5rem);
}

/* Family / Species listing table. */
.tournament-species-dashboard .species-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gin-bg-layer, #fff);
  border: 1px solid var(--gin-border-color-table, var(--gin-border-color, #d4d4d8));
  border-radius: var(--gin-border-radius, 8px);
  overflow: hidden;
}

.tournament-species-dashboard .species-table th,
.tournament-species-dashboard .species-table > tr > td {
  padding: var(--gin-spacing-xxs, 0.25rem) var(--gin-spacing-s, 0.625rem);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gin-border-color-table, var(--gin-border-color, #e6e6ec));
}

.tournament-species-dashboard .species-table th {
  background: var(--gin-bg-layer2, #f3f4f9);
  color: var(--gin-color-title, #1b1b1b);
  font-weight: 700;
}

.tournament-species-dashboard .species-table > tr:hover > td {
  background: var(--gin-bg-app, rgba(0, 0, 0, 0.02));
}

/* Family cell (name + edit/delete icons). */
.tournament-species-dashboard .sptable {
  width: 100%;
  font-weight: 700;
}

.tournament-species-dashboard .sptable img,
.tournament-species-dashboard .subspecies img {
  width: 20px;
  height: 20px;
  max-width: none;
  cursor: pointer;
}

/* Sortable species "chips". */
.tournament-species-dashboard .connectedSortable {
  min-height: 20px;
}

.tournament-species-dashboard .subspecies {
  border: 1px solid var(--gin-border-color, #d4d4d8);
  background: var(--gin-bg-layer, #fff);
  padding: var(--gin-spacing-xxs, 0.125rem) var(--gin-spacing-xs, 0.375rem);
  margin: 0 0 var(--gin-spacing-xxs, 0.25rem);
  border-radius: var(--gin-border-radius, 6px);
  cursor: move;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tournament-species-dashboard .subspecies:hover {
  border-color: var(--gin-color-primary, #0550e6);
}

.tournament-species-dashboard .subspecies table {
  width: 100%;
  margin-block: 0 !important;
  border-collapse : unset !important;
}

/* Tighten the inner Family / Species cell tables (Gin adds generous td padding). */
.tournament-species-dashboard .sptable td,
.tournament-species-dashboard .subspecies td {
  padding: var(--gin-spacing-xxs, 0.125rem) var(--gin-spacing-xs, 0.375rem);
  vertical-align: middle;
  border: 0;
}

/* jQuery UI sortable placeholder. */
.tournament-species-dashboard .ui-state-highlight {
  height: 26px;
  margin-bottom: var(--gin-spacing-xxs, 0.25rem);
  border: 1px dashed var(--gin-color-primary, #0550e6);
  border-radius: var(--gin-border-radius, 6px);
  background: var(--gin-color-primary-light, rgba(5, 80, 230, 0.08));
}

/* Generic popups (replaces the former Bootstrap modals). Toggled to
   display:flex / display:none by the dashboard's openModal()/closeModal(). */
.ts-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
}

.ts-modal {
  background: var(--gin-bg-layer, #fff);
  color: var(--gin-color-text, #1b1b1b);
  width: 500px;
  max-width: 90%;
  margin-top: 80px;
  border-radius: var(--gin-border-radius, 8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.ts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gin-spacing-m, 1rem) var(--gin-spacing-l, 1.5rem);
  border-bottom: 1px solid var(--gin-border-color-layer, var(--gin-border-color, #e6e6ec));
}

.ts-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gin-color-title, #1b1b1b);
}

.ts-modal-close {
  background: none;
  border: 0;
  color: var(--gin-color-text-light, #545560);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.ts-modal-close:hover {
  color: var(--gin-color-primary, #0550e6);
}

.ts-modal-body {
  padding: var(--gin-spacing-l, 1.5rem);
}

.ts-modal-body table {
  width: 100%;
}

.ts-modal-body td {
  padding: var(--gin-spacing-xs, 0.5rem) var(--gin-spacing-xs, 0.5rem) var(--gin-spacing-xs, 0.5rem) 0;
  vertical-align: middle;
}

.ts-modal-body input[type="text"],
.ts-modal-body select {
  width: 100%;
}

.ts-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--gin-spacing-s, 0.75rem);
  padding: var(--gin-spacing-m, 1rem) var(--gin-spacing-l, 1.5rem);
  border-top: 1px solid var(--gin-border-color-layer, var(--gin-border-color, #e6e6ec));
}