/*
 * Lumen Layout - Kopf-Aktionsleisten mit Priority-plus / Overflow.
 * Genutzt auf der Kursdetailseite (.actions.kursdetails_buttons) UND auf den
 * Übersichtsseiten (.actions.uebersicht_buttons).
 *
 * Die Buttons laufen in einer Zeile; was nicht passt, wandert per JS
 * (kopfaktionen.js) in das "Mehr"-Menue. Diese Datei liefert nur das Aussehen -
 * ohne JS bleibt die Leiste umbrechend (siehe panel.css), die Klassen
 * .kopf-aktiv / .kopf-aktiv-host setzt erst das Skript (auf der jeweils
 * verarbeiteten Leiste, daher hier mainClass-unabhängig auf .actions.kopf-aktiv).
 */

/* Host (.kurseactions) und Leiste fuellen die Restbreite der Kopfzeile, damit
   clientWidth/scrollWidth den echten Ueberlauf abbilden. */
.kurseactions.kopf-aktiv-host {
  flex: 1 1 auto;
  min-width: 0;
}

/* Unter .kurseactions gescopet (3 Klassen), damit nowrap die panel.css-Regel
   `.kurseactions .actions { flex-wrap: wrap }` (2 Klassen) sicher schlaegt -
   unabhaengig von der Ladereihenfolge. */
.kurseactions .actions.kopf-aktiv {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  /* nicht clippen: das Overflow-Menue ist ein absolut positioniertes Popover,
     overflow:hidden wuerde es abschneiden. Der echte Ueberlauf wird per JS in
     das Menue verschoben, bleibt also nicht sichtbar stehen. */
  overflow: visible;
}

/* Aktions-Elemente behalten ihre natuerliche Breite (nicht schrumpfen),
   sonst misst der Ueberlauf falsch. */
.kurseactions .actions.kopf-aktiv > .btn,
.kurseactions .actions.kopf-aktiv > .btn-group,
.kurseactions .actions.kopf-aktiv > .kopf-dropdown,
.kurseactions .actions.kopf-aktiv > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* "Mehr"-Container */
.kopf-mehr {
  position: relative;
  flex: 0 0 auto;
}

.kopf-mehr:not(.is-visible) {
  display: none;
}

.kopf-mehr-toggle {
  white-space: nowrap;
}

/* Overflow-Menue: Karte im Lumen-Stil, rechtsbuendig unter dem Button */
.kopf-mehr-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  min-width: 13.75rem;
  max-width: 18rem;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.kopf-mehr-menu[hidden] {
  display: none;
}

/* Buttons im Menue: volle Breite, linksbuendig, gestapelt */
.kopf-mehr-menu .btn,
.kopf-mehr-menu .btn-group,
.kopf-mehr-menu .btn-group > .btn {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
  border-radius: var(--radius-sm);
}

.kopf-mehr-menu .btn-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Link-Wrapper (a > button) im Menue als Block, damit der Button voll fuellt */
.kopf-mehr-menu a:not(.btn) {
  display: block;
}

/* Mobil identisch zum Desktop (verankertes Dropdown), nur gegen das Ablaufen
   ueber den rechten/linken Bildschirmrand begrenzt. */
@media (max-width: 40em) {
  .kopf-mehr-menu {
    max-width: calc(100vw - 24px);
  }
}

/*
 * Aufklapp-Buttons in der Kopfleiste (basis/buttondropdown.sgt, z. B. "Exportieren"
 * und "Sortierung" der Kursuebersicht). Das Auf-/Zuklappen uebernimmt das bestehende
 * dropdown.js ueber data-toggle="dropdown" + Klasse .open am Container (.dropdown);
 * das Menue nutzt bewusst NICHT die Klasse .dropdown-menu, damit die Link-Eintraege
 * normal navigieren (dropdown.js unterbindet Klicks auf .dropdown-menu a).
 */
.kopf-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.kopf-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  min-width: 13.75rem;
  max-width: 20rem;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.kopf-dropdown.open > .kopf-dropdown-menu {
  display: flex;
}

/* Menue-Eintraege: volle Breite, linksbuendig, im Lumen-Stil */
.kopf-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.kopf-dropdown-item:hover,
.kopf-dropdown-item:focus {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

/* Aktiver Eintrag (z. B. die aktuelle Sortierung) */
.kopf-dropdown-item.is-active {
  background: var(--teal-soft);
  color: var(--teal-d);
}

/*
 * Umschalter "Aktive Kurse zuerst" im Sortierung-Menue: kein Sortierkriterium, sondern
 * eine Gruppierung darueber - deshalb durch eine Linie von der Kriterienliste abgesetzt.
 * Das Icon (fa-toggle-on/-off) zeigt den Zustand, .is-active hebt ihn zusaetzlich hervor.
 */
.kopf-dropdown-item.sortierung-umschalter {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/*
 * Derselbe Umschalter als eigener Kopf-Button (Uebersichten von Teilnehmer und Firma,
 * die kein Sortierung-Menue haben). Das Icon (fa-toggle-on/-off) zeigt den Zustand;
 * eingeschaltet hebt ihn zusaetzlich die Flaeche hervor, weil das Lumen-Layout die
 * Bootstrap-Klasse .active an Buttons sonst nicht gestaltet.
 */
.btn.aktive-kurse-zuerst-button.active {
  border-color: var(--teal-soft);
  background: var(--teal-soft);
  color: var(--teal-d);
}

/* Wandert der Aufklapp-Button ins "Mehr"-Menue, klappt sein Menue im Fluss auf
   (eingeruckt statt als Popover) - ein Popover wuerde das Mehr-Menue ueberlagern. */
.kopf-mehr-menu .kopf-dropdown {
  width: 100%;
}

.kopf-mehr-menu .kopf-dropdown-menu {
  position: static;
  max-width: none;
  padding: 0 0 0 12px;
  border: 0;
  box-shadow: none;
}