/* =========================================================
   Schulungsportal – Gruppenliste Frontend (Shortcode)
   Responsive V2: Desktop Tabelle, Mobile Kartenlayout
   Scope: .sp-group-list-frontend
   ========================================================= */

/* ---------- Base wrapper ---------- */
.sp-group-list-frontend {
  width: 100%;
}

/* Optional: Such-/Filterbereich etwas stabiler */
.sp-group-list-frontend .sp-group-search-form,
.sp-group-list-frontend .sp-group-filter,
.sp-group-list-frontend .sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px 0;
}

/* ---------- Table base ---------- */
.sp-group-list-frontend .sp-group-table,
.sp-group-list-frontend table.sp-group-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto; /* wichtig: nicht fixed */
  background: #fff;
}

.sp-group-list-frontend .sp-group-table th,
.sp-group-list-frontend .sp-group-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Kopfzeile */
.sp-group-list-frontend .sp-group-table thead th {
  font-weight: 600;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* Zeilen */
.sp-group-list-frontend .sp-group-table tbody tr:hover {
  background: rgba(0,0,0,.02);
}

/* ---------- Desktop: Platz für Trainings schaffen ---------- */
/* Falls du die Beschreibungsspalte nicht brauchst: ausblenden (Header + Zellen).
   Achtung: Das ist nur Desktop/Tablet; Mobile wird ohnehin zu Karten. */
@media (min-width: 901px) {
  /* Beschreibung = 2. Spalte (wie in deinem Screenshot) */
  .sp-group-list-frontend .sp-group-table th:nth-child(2),
  .sp-group-list-frontend .sp-group-table td:nth-child(2) {
    display: none;
  }

  /* Spalten grob verteilen (Index bleibt trotz display:none gleich) */
  .sp-group-list-frontend .sp-group-table th:nth-child(1),
  .sp-group-list-frontend .sp-group-table td:nth-child(1) { width: 22%; }

  .sp-group-list-frontend .sp-group-table th:nth-child(3),
  .sp-group-list-frontend .sp-group-table td:nth-child(3) { width: 10%; white-space: nowrap; }

  .sp-group-list-frontend .sp-group-table th:nth-child(4),
  .sp-group-list-frontend .sp-group-table td:nth-child(4) { width: 50%; }

  .sp-group-list-frontend .sp-group-table th:nth-child(5),
  .sp-group-list-frontend .sp-group-table td:nth-child(5) { width: 18%; white-space: nowrap; }

  /* Trainingsliste in 2 Spalten (falls viele Checkboxen) */
  .sp-group-list-frontend .sp-trainings-list,
  .sp-group-list-frontend .trainings-list,
  .sp-group-list-frontend .sp-training-list,
  .sp-group-list-frontend .sp-group-table td:nth-child(4) {
    column-count: 2;
    column-gap: 24px;
  }

  .sp-group-list-frontend .sp-group-table td:nth-child(4) label,
  .sp-group-list-frontend .sp-group-table td:nth-child(4) .training-item,
  .sp-group-list-frontend .sp-trainings-list > * ,
  .sp-group-list-frontend .trainings-list > * ,
  .sp-group-list-frontend .sp-training-list > * {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin: 0 0 6px 0;
  }

  /* Aktionen kompakt */
  .sp-group-list-frontend .sp-group-table td:nth-child(5) .button,
  .sp-group-list-frontend .sp-group-table td:nth-child(5) button,
  .sp-group-list-frontend .sp-group-table td:nth-child(5) a {
    white-space: nowrap;
  }
}

/* ---------- Buttons (allgemein im Bereich) ---------- */
.sp-group-list-frontend .button,
.sp-group-list-frontend button,
.sp-group-list-frontend input[type="submit"],
.sp-group-list-frontend a.button {
  cursor: pointer;
}

.sp-group-list-frontend .button:disabled,
.sp-group-list-frontend button:disabled,
.sp-group-list-frontend input[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* =========================================================
   Responsive V2: Mobile Kartenlayout
   ========================================================= */
@media (max-width: 900px) {

  /* Kopfzeile ausblenden */
  .sp-group-list-frontend .sp-group-table thead {
    display: none;
  }

  /* Tabelle in Block-Layout umwandeln */
  .sp-group-list-frontend .sp-group-table,
  .sp-group-list-frontend .sp-group-table tbody,
  .sp-group-list-frontend .sp-group-table tr,
  .sp-group-list-frontend .sp-group-table td {
    display: block;
    width: 100%;
  }

  /* Jede Zeile wird zur Karte */
  .sp-group-list-frontend .sp-group-table tbody tr {
    margin: 0 0 14px 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    overflow: hidden;
  }

  /* Jede Zelle wird zur Zeile innerhalb der Karte */
  .sp-group-list-frontend .sp-group-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
    word-break: break-word;
  }

  .sp-group-list-frontend .sp-group-table td:last-child {
    border-bottom: none;
  }

  /* Linkes Label aus data-label */
  .sp-group-list-frontend .sp-group-table td::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: .75;
    flex: 0 0 38%;
    max-width: 38%;
    padding-right: 6px;
  }

  /* Rechter Inhalt */
  .sp-group-list-frontend .sp-group-table td > * {
    flex: 1 1 auto;
    max-width: 100%;
  }

  /* Trainings-Zuweisen: lieber untereinander statt gequetscht */
  .sp-group-list-frontend .sp-group-table td[data-label*="Train"],
  .sp-group-list-frontend .sp-group-table td[data-label*="Schulung"],
  .sp-group-list-frontend .sp-group-table td[data-label*="Training"] {
    flex-direction: column;
  }

  .sp-group-list-frontend .sp-group-table td[data-label*="Train"]::before,
  .sp-group-list-frontend .sp-group-table td[data-label*="Schulung"]::before,
  .sp-group-list-frontend .sp-group-table td[data-label*="Training"]::before {
    flex: 0 0 auto;
    max-width: 100%;
    margin-bottom: 6px;
  }

  /* Trainingsliste auf Mobil immer 1 Spalte */
  .sp-group-list-frontend .sp-trainings-list,
  .sp-group-list-frontend .trainings-list,
  .sp-group-list-frontend .sp-training-list {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  /* Checkbox-Zeilen schön untereinander */
  .sp-group-list-frontend .sp-trainings-list label,
  .sp-group-list-frontend .trainings-list label,
  .sp-group-list-frontend .sp-training-list label,
  .sp-group-list-frontend .sp-trainings-list .training-item,
  .sp-group-list-frontend .trainings-list .training-item,
  .sp-group-list-frontend .sp-training-list .training-item {
    display: block;
    margin: 0 0 8px 0;
  }

  /* Aktionen: Buttons full width */
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktion"],
  .sp-group-list-frontend .sp-group-table td[data-label*="Action"],
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktionen"] {
    flex-direction: column;
  }

  .sp-group-list-frontend .sp-group-table td[data-label*="Aktion"]::before,
  .sp-group-list-frontend .sp-group-table td[data-label*="Action"]::before,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktionen"]::before {
    flex: 0 0 auto;
    max-width: 100%;
    margin-bottom: 6px;
  }

  .sp-group-list-frontend .sp-group-table td[data-label*="Aktion"] a,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktion"] button,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktion"] .button,
  .sp-group-list-frontend .sp-group-table td[data-label*="Action"] a,
  .sp-group-list-frontend .sp-group-table td[data-label*="Action"] button,
  .sp-group-list-frontend .sp-group-table td[data-label*="Action"] .button,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktionen"] a,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktionen"] button,
  .sp-group-list-frontend .sp-group-table td[data-label*="Aktionen"] .button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* Optional: Beschreibung auch auf Mobil raus (falls sie als td existiert) */
  .sp-group-list-frontend .sp-group-table td[data-label="Beschreibung"],
  .sp-group-list-frontend .sp-group-table td[data-label="Description"] {
    display: none;
  }
}