/*
 * Lumen Layout - jQuery-UI-Skin
 * Überschreibt das Default-Theme von jQuery UI (jquery-ui.min.css wird zuvor geladen),
 * damit Dialog, Datepicker, Tabs und Tooltip zum Lumen-Design passen (Roboto, Teal,
 * runde Ecken, weiche Schatten). Nur die sichtbare Optik wird angepasst; die
 * strukturellen Regeln stammen weiter aus dem Default-Theme.
 */

/* Grundschrift / Flächen */
.ui-widget {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: inherit;
}

/* iOS Safari zoomt bei Fokus auf Eingabefelder unter 16px heran - auf
   Touch-Geräten daher effektive 16px für Dialog-Felder (SAF-01). */
@media (pointer: coarse) {
  .ui-widget input,
  .ui-widget select,
  .ui-widget textarea {
    font-size: 1rem;
  }
}

.ui-widget-content {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

/* jQuery-UI färbt Links im Widget dunkel (.ui-widget-content a { color:#222 }) und
   überschreibt damit die weiße Button-Schrift, wenn ein Button ein <a> ist - z. B.
   der grüne "Auswählen"-Button im Teilnehmer-Auswahldialog (dessen Icon sonst
   schwarz auf Grün und kaum lesbar ist). Button-Textfarbe wiederherstellen, damit
   das Icon zur Button-Farbe passt (das Icon erbt die Farbe des <a>). */
.ui-widget-content a.btn-success,
.ui-widget-content a.btn-primary,
.ui-widget-content a.btn-danger,
.ui-widget-content a.btn-info {
  color: #fff;
}

.ui-widget-content a.btn-default {
  color: var(--ink);
}

.ui-widget-header {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 700;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right {
  border-radius: var(--radius-sm);
}

/* Zustände (Buttons, Datepicker-Tage, …) */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-button:hover,
.ui-state-focus {
  background: var(--bg);
  border-color: #cfd7d8;
  color: var(--ink);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  background: var(--teal-soft);
  border-color: var(--teal-soft);
  color: var(--teal-d);
}

/* Dialog */
.ui-dialog {
  /* Am Fenster verankert, nicht am Dokument. jQuery-UI positioniert mit einem inline
     gesetzten top in DOKUMENT-Koordinaten (Scrollstand beim Oeffnen + Zentrierung).
     Bei position:absolute wandert der Dialog deshalb mit jeder Rollbewegung aus dem
     Bild - beim Bestaetigungsdialog des Anmeldeformulars stand die Titelzeile
     gemessen bei -86px. Mit position:fixed rechnet jQuery ueber .offset() dieselbe
     Zielposition in Fensterkoordinaten um (offset-Setter zieht den Scrollstand ab),
     die Zentrierung bleibt also korrekt und das Verschieben per Titelzeile
     (jQuery-UI draggable behandelt cssPosition "fixed") funktioniert weiter.
     Die Hoehenbegrenzung des Inhalts steht weiter unten bei .ui-dialog-content;
     dass der Dialog nach spaeterem Nachladen (AJAX-Tabellen) unten aus dem Fenster
     ragt, faengt lumen/js/components/dialogfenster.js ab. */
  position: fixed;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(16, 40, 44, 0.18);
  overflow: hidden;
  /* Nie breiter als der Viewport (jQuery-UI setzt eine feste Pixelbreite inline). */
  max-width: calc(100vw - 16px);
}

/* Schmale Viewports (Smartphone): Dialog über die volle Breite (von Kante zu Kante).
   jQuery-UI setzt Breite und (für die volle Breite berechnete) left-Position inline;
   diese werden hier überschrieben. left:0 + right:0 + width:auto füllt die Breite des
   Offset-Parents (body) ohne 100vw-Scrollbar-Überlauf. Rahmen/Rundung an den
   Bildschirmkanten entfallen für eine saubere randlose Darstellung. */
@media (max-width: 47.9375em) {
  .ui-dialog {
    /* position:fixed gilt inzwischen fuer alle Breiten (siehe oben); hier wird der
       Dialog zusaetzlich an die obere Kante geheftet, statt ihn zu zentrieren. */
    top: 0 !important;
    left: 0 !important;
    right: 0;
    width: auto !important;
    max-width: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

.ui-dialog .ui-dialog-titlebar {
  padding: 14px 16px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Lange Inhalte scrollen IM Dialog statt mit der Seite: Höhe auf den Viewport
   begrenzt (~160px Reserve für Titelzeile und Buttonleiste; dvh berücksichtigt die
   ein-/ausfahrende mobile URL-Leiste). !important nötig, weil jQuery-UI bei
   height:'auto' inline max-height:none auf den Inhalt setzt. overscroll-behavior
   verhindert, dass das Scroll-Ende an die Seite dahinter weitergereicht wird
   (Scroll-Chaining/iOS). */
.ui-dialog .ui-dialog-content {
  padding: 16px;
  color: var(--ink);
  max-height: calc(100vh - 160px) !important; /* Fallback für Browser ohne dvh */
  max-height: calc(100dvh - 160px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* Dialog-Buttons klar sichtbar machen: sichtbarer Rahmen (Kontrast >= 3:1 gegen weiße
   und helle Flächen, WCAG 1.4.11) statt des fast unsichtbaren --line-Rahmens.
   Der Schließen-Button (X) in der Titelleiste ist ausgenommen. */
.ui-dialog .ui-button:not(.ui-dialog-titlebar-close),
.ui-dialog .ui-dialog-buttonpane .ui-button {
  margin: 0 0 0 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--ink-3);
  color: var(--ink);
}

.ui-dialog .ui-button:not(.ui-dialog-titlebar-close):hover,
.ui-dialog .ui-button:not(.ui-dialog-titlebar-close):focus,
.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:focus {
  background: var(--bg);
  border-color: var(--ink-2);
  color: var(--ink);
}

/* jQuery-UI-Priorität (sofern die Buttons so markiert sind): primär = gefülltes Teal */
.ui-dialog .ui-button.ui-priority-primary {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

.ui-dialog .ui-button.ui-priority-primary:hover,
.ui-dialog .ui-button.ui-priority-primary:focus {
  filter: brightness(0.92);
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

/* jQuery UI dimmt sekundäre Buttons (opacity .7) - das senkt den Kontrast, daher zurücksetzen. */
.ui-dialog .ui-button.ui-priority-secondary {
  opacity: 1;
}

.ui-dialog .ui-dialog-titlebar-close {
  border-radius: var(--radius-sm);
}

.ui-widget-overlay {
  background: rgba(16, 40, 44, 0.34);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Datums- und Uhrzeitwähler
 *
 * Beide leben im selben Element (#ui-datepicker-div, der Timepicker ist ein
 * Aufsatz auf den Datepicker) und hängen an <body>. jQuery UI setzt dort beim
 * Öffnen ein INLINE z-index, berechnet aus den positionierten Vorfahren der
 * Eingabe - hat sie keine, ist das eine 1. Die angedockte Aktionszeile am
 * Formularende liegt bei 4 (components/form.css), der klebende Tabellenkopf bei
 * 3: Der Wähler verschwände hinter beiden, sobald er nach unten aufklappt.
 *
 * Ein Inline-Stil lässt sich nur mit !important überstimmen. Die Alternative
 * wäre, jeder Eingabe einen positionierten Vorfahren mit hohem z-index zu geben
 * - das beträfe jedes Formular und verschöbe das Problem nur.
 * Gemessen am laufenden System: Dialoge stapeln ab 100 und liegen bei 101-105,
 * die höchsten Seitenelemente (Sprunglink, Klappmenü) bei 1000. Ein fester
 * kleiner Wert wäre also FALSCH: sobald das Datumsfeld in einem Dialog liegt -
 * etwa beim Erfassen eines Kindes -, verschwände der Kalender dahinter.
 * 2000 liegt über allem, was auf der Seite klebt, UND über jedem Dialog.
 * ------------------------------------------------------------------------- */
#ui-datepicker-div {
  z-index: 2000 !important;
}

/* Datepicker */
.ui-datepicker {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}

.ui-datepicker .ui-datepicker-header {
  background: #fff;
  border: 0;
  color: var(--ink);
  font-weight: 700;
}

.ui-datepicker .ui-datepicker-title {
  font-weight: 700;
}

.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 6px;
}

.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-state-highlight {
  background: var(--teal-soft);
  border-color: var(--teal-soft);
  color: var(--teal-d);
}

.ui-datepicker .ui-state-active {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

/* Navigationspfeile: das Standard-jQuery-UI-Icon-Sprite ausblenden und durch
   schlichte Chevrons ersetzen (das klassische Layout nutzte dafür Glyphicons,
   die im Lumen-Layout nicht geladen werden). */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 6px;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  display: block;
  line-height: 1.6em;
  text-align: center;
  font-size: 1rem;
  color: var(--ink-2);
}

.ui-datepicker .ui-datepicker-prev::after {
  content: "\2039"; /* ‹ */
}

.ui-datepicker .ui-datepicker-next::after {
  content: "\203A"; /* › */
}

/* Monats-/Jahres-Auswahl im Kopf (changeMonth/changeYear) */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  margin: 0 2px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
}

/* Kalenderwochen-Spalte (showWeek) */
.ui-datepicker .ui-datepicker-week-col {
  color: var(--ink-3);
  font-weight: 600;
}

/* Tages-Markierungen (beforeShowDay/Ferien): kräftige Klassik-Farben durch
   weiche Lumen-Tints ersetzen, Unterscheidung bleibt erhalten.
   Reihenfolge so, dass die Wochenauswahl (current-day) zuletzt gewinnt. */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-saturday,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-sunday {
  background: var(--green-bg);
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-holiday {
  background: var(--amber-bg);
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-holiday-one-day {
  background: var(--red-bg);
}

/* Aktuell gewählter Tag / gewählte Woche (Wochenpicker) */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day {
  background: var(--teal-soft);
  border-radius: var(--radius-sm);
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
  color: var(--teal-d);
}

/* Der tatsaechlich ausgewaehlte Tag (ui-state-active) bleibt gefuellt mit
   weisser Schrift - auch innerhalb der gewaehlten Woche (current-day, sonst
   gewinnt die teal-d-Textfarbe oben gegen den teal-d-Hintergrund und der Tag
   ist unlesbar) und wenn er zugleich "heute" ist (sonst gewinnt die
   today-Regel den Hintergrund). */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a.ui-state-active {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

/* Timepicker-Addon (z. B. Hausmeister-Raumbelegung): Schieberegler im Teal-Ton */
.ui-timepicker-div dt {
  font-weight: 600;
  color: var(--ink);
}

.ui-timepicker-div .ui-slider {
  background: var(--line-2);
  border: 0;
  border-radius: 999px;
}

.ui-timepicker-div .ui-slider .ui-slider-range {
  background: var(--teal);
  border-radius: 999px;
}

.ui-timepicker-div .ui-slider .ui-slider-handle {
  background: var(--teal-d);
  border-color: var(--teal-d);
  border-radius: 50%;
}

/* Tabs */
.ui-tabs {
  padding: 0;
  border: 0;
  background: none;
}

.ui-tabs .ui-tabs-nav {
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.ui-tabs .ui-tabs-nav li {
  margin: 0 2px -1px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.ui-tabs .ui-tabs-nav li a {
  padding: 10px 14px;
  color: var(--ink-2);
  font-weight: 600;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--teal-d);
  box-shadow: inset 0 -2px 0 var(--teal-d);
}

.ui-tabs .ui-tabs-panel {
  padding: 4px 2px;
  border: 0;
  background: none;
}

/* Tooltip */
.ui-tooltip {
  max-width: 320px;
  padding: 7px 10px;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(16, 40, 44, 0.18);
  color: #fff;
  font-size: 0.78125rem;
  font-weight: 500;
  /* Nimmt die Umbruchvorgabe aus base.css hier wieder zurueck. Im klassischen
     Layout war genau das ein gemeldeter Fehler: Commit 28f7f1f36d vom 2025-03-31
     ("Bugfix Darstellungsfehler von Tooltips korrigiert") schaltet overflow-wrap
     fuer .ui-tooltip ab, elf Tage nachdem die Vorgabe dort eingefuehrt wurde.
     Grund: Der Tooltip ist eine Shrink-to-fit-Box mit max-width, die jQuery UI
     NACH dem Rendern per JavaScript vermisst und positioniert - ein zusaetzlicher
     Umbruch mitten im Wort aendert seine Hoehe. Ausserdem trennt overflow-wrap
     lautlos, ohne Bindestrich; bei Adressen und Bezeichnern in Tooltips ist das
     die irrefuehrendere Trennung.
     Die Silbentrennung bleibt bewusst an - im klassischen Layout steht fuer
     .ui-tooltip bis heute kein hyphens: none, sie war dort nie das Problem.
     Betrifft auch .ui-tooltip.anmeldenButton_tooltip (tooltip.css), das mit
     white-space: pre-line ausdruecklich umbrechen darf. */
  overflow-wrap: normal;
}

.ui-tooltip .ui-tooltip-content {
  color: #fff;
}