/* ═══════════════════════════════════════════════════════════════
   TSV AMPFING — ZENTRALES MENÜ- & DROPDOWN-THEME
   Eine einzige, projektweite Lösung für ALLE Auswahlfelder, Dropdowns,
   Kontext-/Aktionsmenüs, Popover, Combobox/Command, Autocomplete,
   MultiSelect sowie native Datums-/Zeitauswahlen.

   Diese Datei wird auf JEDER Seite (öffentliche Website + Adminbereich)
   eingebunden. Neue Selects/Menüs erben das Theme automatisch — ohne
   zusätzliche Klassen.

   Ziel: nie wieder weißer Text auf weißem Hintergrund. Dunkles Menü,
   heller Text, Hover/Fokus im Vereinsblau, klarer aktiver Eintrag,
   abgeschwächte (aber lesbare) deaktivierte Einträge.

   Browser: Chrome, Edge, Firefox, Safari.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Zentrale Menü-Tokens. Fallbacks sind eingebacken, damit die Datei
     auch auf Seiten ohne eigene Tokens vollständig funktioniert. */
  --menu-bg:      #1a1a1a;   /* Menü-Hintergrund (dunkel) */
  --menu-bg-2:    #252525;   /* alternierender/hover-neutraler Ton */
  --menu-fg:      #f5f5f5;   /* Optionstext (sehr helles Grau/Weiß) */
  --menu-fg-dim:  rgba(245,245,245,.45); /* deaktiviert, aber lesbar */
  --menu-hover:   var(--blue, #1535c8);  /* Hover/Fokus im Vereinsblau */
  --menu-border:  rgba(255,255,255,.12);
  --menu-radius:  6px;
  --menu-shadow:  0 12px 32px rgba(0,0,0,.45);
}

/* ── Native Auswahlfelder + Optionslisten ───────────────────────── */
select{
  color-scheme:dark;                 /* dunkle native Popup-Liste + Pfeil, alle Browser */
}
/* Die aufgeklappte Optionsliste. Firefox/Safari respektieren dies
   vollständig; Chrome/Edge ab v120 ebenfalls. color-scheme:dark deckt
   ältere Versionen ab, sodass NIE weiß-auf-weiß entsteht. */
select option,
select optgroup{
  background-color:var(--menu-bg);
  color:var(--menu-fg);
}
select option:hover,
select option:focus{
  background-color:var(--menu-hover);
  color:#fff;
}
/* Ausgewählter/aktiver Eintrag klar markiert */
select option:checked,
select option[selected]{
  background:var(--menu-hover);
  color:#fff;
  font-weight:600;
}
/* Deaktivierte Optionen: abgeschwächt, aber ausreichend kontrastreich */
select option:disabled,
select:disabled{
  color:var(--menu-fg-dim);
  background-color:var(--menu-bg);
}
/* Sichtbarer Fokus-Ring für Tastaturbedienung im Vereinsblau */
select:focus,
select:focus-visible{
  outline:2px solid var(--blue, #1535c8);
  outline-offset:1px;
  border-color:var(--blue, #1535c8);
}

/* ── Native Datums-/Zeitauswahl (Kalender-/Uhr-Popups) ──────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
  color-scheme:dark;                 /* dunkles Kalender-/Uhr-Popup in allen Browsern */
}

/* ── Wiederverwendbare Komponente für BENUTZERDEFINIERTE Menüs ─────
   Für JS-gebaute Dropdowns, Kontext-/Aktionsmenüs, Popover, Combobox,
   Command, Autocomplete, MultiSelect und Tabellenfilter.
   Einfach class="menu-dark" auf das Popup-Panel und class="menu-dark__item"
   auf die Einträge setzen — künftige Menüs sind damit automatisch korrekt. */
.menu-dark,
[role="menu"],
[role="listbox"]{
  background-color:var(--menu-bg);
  color:var(--menu-fg);
  border:1px solid var(--menu-border);
  border-radius:var(--menu-radius);
  box-shadow:var(--menu-shadow);
}
.menu-dark__item,
[role="menuitem"],
[role="option"]{
  color:var(--menu-fg);
  background:transparent;
  white-space:normal;               /* lange Bezeichnungen nicht abschneiden */
  overflow-wrap:anywhere;
}
.menu-dark__item:hover,
.menu-dark__item:focus,
[role="menuitem"]:hover,
[role="menuitem"]:focus,
[role="option"]:hover,
[role="option"]:focus{
  background-color:var(--menu-hover);
  color:#fff;
}
/* Aktiver/ausgewählter Eintrag klar erkennbar */
.menu-dark__item[aria-selected="true"],
.menu-dark__item.is-active,
[role="option"][aria-selected="true"]{
  background-color:var(--menu-hover);
  color:#fff;
  font-weight:600;
}
/* Deaktivierte Einträge: abgeschwächt, aber lesbar */
.menu-dark__item[aria-disabled="true"],
.menu-dark__item:disabled,
[role="menuitem"][aria-disabled="true"],
[role="option"][aria-disabled="true"]{
  color:var(--menu-fg-dim);
  pointer-events:none;
}
/* Tastatur-Fokus deutlich sichtbar */
.menu-dark:focus-visible,
.menu-dark__item:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible{
  outline:2px solid var(--blue, #1535c8);
  outline-offset:-2px;
}