/*
 * Lumen Layout - jQuery-DataTables (z. B. Auswahl-Dialoge: Teilnehmer-, Kurs- und
 * Adressauswahl). Im klassischen Layout stylt style.css diese Widgets; da style.css
 * im Lumen-Layout nicht geladen wird, erhalten die DataTables hier ein eigenes, zum
 * übrigen Lumen-Design passendes Aussehen (Karte, Kopf, Zeilen, Sortier-Pfeile,
 * Hover/Auswahl, Info-Zeile sowie – falls genutzt – Paginierung/Filter/Länge).
 *
 * Die Such- und Blätter-Leisten der Dialoge sind eigenes Markup (form-control/btn)
 * und werden bereits von form.css/button.css gestylt. Konfiguration laut
 * datatables.js: bPaginate/bFilter aus (eigene Leisten), Sortierung an, die
 * ausgewählte Zeile trägt die Klasse tr.active.
 */

.dataTables_wrapper {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* Tabelle als Lumen-Karte */
table.dataTable {
  width: 100% !important;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

table.dataTable th,
table.dataTable td {
  padding: 10px 12px;
  border-top: 1px solid var(--line-2);
  vertical-align: top;
  text-align: left;
}

/* Kopfzeile: weiß wie die Karte, mit Unterkante */
table.dataTable thead th {
  background: var(--card);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  border-top: none;
  box-shadow: inset 0 -1px 0 var(--line);
}

/* Obere Ecken runden (Kopf-Hintergrund nicht über den Rahmen ragen lassen) */
table.dataTable thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--radius-sm) - 1px);
}

table.dataTable thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--radius-sm) - 1px);
}

/* Zeilen: Hover sowie ausgewählte Zeile (tr.active) – konsistent zur übrigen
   Auswahl-Hervorhebung (teal). */
table.dataTable tbody tr {
  cursor: pointer;
}

table.dataTable tbody tr:hover {
  background: #f8fafc;
}

table.dataTable tbody tr.active,
table.dataTable tbody tr.active:hover,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected:hover {
  background: var(--teal-soft);
}

/* "keine Einträge"-Zelle */
table.dataTable td.dataTables_empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--ink-3);
}

/* Sortier-Indikatoren (die DataTables-Sprites werden im Lumen-Layout nicht
   geladen, daher als CSS-Pfeile). */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 22px;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem;
  line-height: 1;
}

table.dataTable thead th.sorting::after {
  content: "\2195"; /* ↕ */
  color: var(--ink-3);
  opacity: 0.5;
}

table.dataTable thead th.sorting_asc::after {
  content: "\25B2"; /* ▲ */
  color: var(--teal-d);
}

table.dataTable thead th.sorting_desc::after {
  content: "\25BC"; /* ▼ */
  color: var(--teal-d);
}

table.dataTable thead th.sorting_disabled {
  cursor: default;
}

/* Info-Zeile ("x bis y von z Einträgen") */
.dataTables_info {
  margin-top: 8px;
  font-size: 0.78125rem;
  color: var(--ink-3);
}

/* Verarbeitungs-/Ladeanzeige */
.dataTables_processing {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* Länge/Filter/Paginierung – in diesen Dialogen abgeschaltet, aber für sonstige
   DataTables-Seiten konsistent mitgestylt. */
.dataTables_filter input,
.dataTables_length select {
  height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.dataTables_paginate {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.875rem;
}

.dataTables_paginate .paginate_button:hover {
  border-color: var(--teal);
  color: var(--teal-d);
}

.dataTables_paginate .paginate_button.current {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  color: var(--ink-3);
  border-color: var(--line);
  cursor: default;
  opacity: 0.6;
}

/* ---------- Blätter-Pfeile in Auswahl-Dialogen (Vor/Zurück) ----------
 * utils.js zeigt die Navigierbarkeit an: Der jeweils blätterbare Pfeil-Wrapper
 * (.dataTableNext / .dataTablePrevious) bekommt die Klasse .active; zusätzlich
 * setzt es die Icon-Farbe inline (grün #5cb85c aktiv / grau #333 inaktiv). Im
 * Lumen-Layout wird das vereinheitlicht: blätterbar = Teal (Akzentfarbe), nicht
 * blätterbar = klar deaktiviert (gedimmt + not-allowed) - so ist der Zustand nicht
 * allein an der Farbe erkennbar (WCAG 1.4.1). !important schlägt die Inline-Farbe. */
.dataTablePrevious .fa,
.dataTableNext .fa {
  color: var(--teal-d) !important;
}

.dataTablePrevious:not(.active) .fa,
.dataTableNext:not(.active) .fa {
  color: var(--ink-3) !important;
}

.dataTablePrevious:not(.active) .btn,
.dataTableNext:not(.active) .btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * Rollmodus (sScrollY): der Tabellenrahmen passt nicht in die Breitenrechnung.
 *
 * DataTables teilt die Tabelle im Rollmodus in zwei Tabellen (Kopf und Koerper) und
 * setzt die Breite des inneren Kopfbereichs auf die gemessene Tabellenbreite. Den
 * 1px-Rahmen der Lumen-Kartenoptik (siehe table.dataTable oben) rechnet es dabei
 * nicht mit: der Koerper wird 918px breit, sein Rollbereich ist 916px - also 2px
 * Ueberlauf und eine waagrechte Rollleiste, selbst unter einer voellig leeren
 * Tabelle (Kinder-, Mehrfach- und Firmen-Dialog des Anmeldeformulars).
 *
 * Deshalb tragen die Tabellen im Rollmodus links und rechts keinen Rahmen mehr,
 * sondern einen eingesetzten Schatten: der sieht genauso aus, belegt aber keinen
 * Platz und faellt damit aus der Breitenrechnung heraus.
 */
.dataTables_scrollHead table.dataTable,
.dataTables_scrollBody table.dataTable {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}

/*
 * "Uebernehmen" in Auswahllisten: In Lumen traegt der Knopf das Wort statt eines
 * Download-Pfeils (HandleDataTableUseCase::getUebernehmenInhalt). Als voller
 * btn-success waere er in jeder Zeile ein gruener Block - hier deshalb kompakt und
 * ruhig: Teal-Umriss statt Flaeche, damit die Liste lesbar bleibt und der Knopf
 * trotzdem als die Aktion der Zeile erkennbar ist.
 */
table.dataTable td .btn.btn-uebernehmen {
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--card);
  border: 1px solid var(--teal);
  color: var(--teal-d);
}

table.dataTable td .btn.btn-uebernehmen:hover,
table.dataTable td .btn.btn-uebernehmen:focus-visible {
  background: var(--teal-soft);
  border-color: var(--teal-d);
  color: var(--teal-d);
}

/* Der Knopf liegt teils in einem <a> (Kursauswahl) - dessen Unterstreichung stoert. */
table.dataTable td > a:has(> .btn.btn-uebernehmen) {
  text-decoration: none;
}