/*
 * Lumen Layout - Tooltips & Hover-Einblendungen
 * Die Widget-Optik der jQuery-UI-Tooltips (.ui-tooltip: dunkel, weiße Schrift)
 * liegt in jquery-ui.css. Hier kommen die Inhalts-/Sonderfälle dazu, die im
 * klassischen Layout über style.css gestylt waren (dort im Lumen-Layout nicht
 * geladen):
 *  - Validierungs-Tooltips an Eingabefeldern (.toolTip mit Label/Inhalt-Zeilen)
 *  - Sondervarianten (mehrzeilig bzw. rahmenlos)
 *  - die per JS erzeugten Bild-/Vorschau-Tooltips (.toolTipWrapper) z. B. für
 *    Teilnehmerfotos und Anwesenheits-Hover
 */

/* ---------- Validierungs-Tooltips (tooltipClass "toolTip") ---------- */
/* Inhalt: je Zeile eine Beschriftung und ein erklärender Text (col-* ohne .row,
   stapeln daher; siehe form.css). Beschriftung hervorheben, Zeilen trennen. */
.ui-tooltip .toolTipRow + .toolTipRow {
  margin-top: 6px;
}

.ui-tooltip .toolTipLbl {
  font-weight: 700;
}

/* ---------- Sondervarianten ---------- */
/* Anmelde-Button-Hinweis: mehrzeiliger Text soll Zeilenumbrüche behalten */
.ui-tooltip.anmeldenButton_tooltip {
  white-space: pre-line;
}

/* Raumsuche-Tooltip: bringt eigenen Inhalt mit, daher rahmen-/hintergrundlos */
.ui-tooltip.rsToolTip {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  white-space: nowrap;
}

/* ---------- Bild-/Vorschau-Tooltips (KuferTools.HandleToolTip) ---------- */
/* Schwebender Container, der per JS in die gehoverte Zelle eingehängt wird
   (Teilnehmerfoto, Anwesenheits-Hover). Ohne position:absolute würde er den
   Tabellenfluss aufblähen. Sichtbarkeit schaltet das JS per inline-display. */
.toolTipWrapper,
.toolTipWrapper2 {
  position: absolute;
  z-index: 50;
  display: none;
  max-width: 320px;
  max-height: 320px;
  overflow: visible;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* Vorschaubilder im Tooltip auf eine sinnvolle Maximalgröße begrenzen */
.toolTipWrapper > img,
.toolTipWrapper2 > img,
.tooltip_teilnehmer_picture,
.anw_tooltip_image_visible {
  display: block;
  max-width: 320px;
  max-height: 320px;
}
