/*
 * Bruecke zwischen Bootstrap-5-JS und dem noch vorhandenen Bootstrap-3-CSS
 *
 * Hintergrund: Das JS ist bereits Bootstrap 5, das CSS in style.css ist aber
 * noch Bootstrap 3. BS5 rendert Popovers mit anderen Klassen als BS3:
 *
 *   BS3                BS5
 *   .popover-title  -> .popover-header
 *   .popover-content-> .popover-body
 *   .arrow          -> .popover-arrow
 *   .popover.top    -> .bs-popover-top / .bs-popover-auto[data-popper-placement^="top"]
 *
 * Ausserdem setzt das BS3-CSS ".popover { display: none }" — BS5 erwartet
 * "display: block" aus seinem eigenen CSS. Ohne die Regeln hier waeren die
 * Popovers also unsichtbar.
 *
 * Werte uebernommen aus dem bisherigen Aussehen (style.css: .popover,
 * .popover .popover-content). Muss NACH style.css eingebunden werden.
 *
 * TODO nach der Bootstrap-5-Migration (Schritt 1+2): Diese Datei kann dann
 * entfallen, weil das originale BS5-CSS die Regeln mitbringt. Nur die
 * VBV-Anpassungen (max-width 310px, border-radius 0) muessen erhalten bleiben.
 */

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1070;
  display: block; /* BS3-CSS setzt display:none */
  max-width: 310px;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.popover .popover-header {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  color: inherit;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 0;
}

.popover .popover-header:empty {
  display: none;
}

.popover .popover-body {
  padding: 9px 14px;
  color: inherit;
}

/* --- Pfeil ------------------------------------------------------------- */

.popover .popover-arrow {
  position: absolute;
  display: block;
  width: 16px;
  height: 8px;
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

/* oben */
.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
  bottom: calc(-8px - 1px);
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  border-width: 8px 8px 0;
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
  bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.2);
}

.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  bottom: 1px;
  border-top-color: #ffffff;
}

/* unten */
.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
  top: calc(-8px - 1px);
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  border-width: 0 8px 8px 8px;
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
  top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  top: 1px;
  border-bottom-color: #ffffff;
}

/* rechts */
.bs-popover-end > .popover-arrow,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
  left: calc(-8px - 1px);
  width: 8px;
  height: 16px;
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  border-width: 8px 8px 8px 0;
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
  left: 0;
  border-right-color: rgba(0, 0, 0, 0.2);
}

.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  left: 1px;
  border-right-color: #ffffff;
}

/* links */
.bs-popover-start > .popover-arrow,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
  right: calc(-8px - 1px);
  width: 8px;
  height: 16px;
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  border-width: 8px 0 8px 8px;
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
  right: 0;
  border-left-color: rgba(0, 0, 0, 0.2);
}

.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  right: 1px;
  border-left-color: #ffffff;
}

/* --- mobil (entspricht dem bisherigen Media-Query in style.css) --------- */

@media (max-width: 767px) {
  .popover {
    width: 310px;
    max-width: 96%;
  }
}

/* --- Ein-/Ausblenden ---------------------------------------------------- */
/* Generell: BS3 markiert den sichtbaren Zustand mit ".in", BS5 mit ".show".
   Ohne diese Regeln bleiben Popovers & Co. auf opacity:0 stehen, also
   unsichtbar — obwohl sie korrekt im DOM liegen und positioniert sind. */

.fade.show {
  opacity: 1;
}

/* --- Collapse ---------------------------------------------------------- */
/* BS3-CSS blendet ueber ".collapse.in" ein, BS5-JS setzt stattdessen ".show"
   (betrifft den Footer-Navigationsbereich in MainView.ui.xml). */

.collapse.show {
  display: block;
}

tr.collapse.show {
  display: table-row;
}

tbody.collapse.show {
  display: table-row-group;
}