/* ==========================================================================
   EWB Radar – tooltips.css
   Generische Button-Tooltips via data-t-tooltip-Attribut (richtungsabhängig je
   Container: right-controls, controls, overflow, legend, theme-toggle, panel).
   Ausgelagert aus style.css (Modularisierung, Issue #94).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Generische Button-Tooltips via data-t-tooltip-Attribut

   Ersetzt das native title-Attribut: kein Browser-Delay, konsistentes Styling.
   Richtung je nach Container:
     #right-controls    → Tooltip erscheint LINKS  (Buttons sind rechts am Rand)
     #controls          → Tooltip erscheint OBEN   (Buttons sind unten)
     #controls-overflow → Tooltip erscheint LINKS  (Menü ist rechts am Rand)
     .dbz-legend        → Tooltip erscheint RECHTS (Legende ist links am Rand)
     #theme-toggle      → Tooltip erscheint LINKS  (Button ist rechts am Rand)
     .side-panel        → Tooltip erscheint LINKS  (Panel ist rechts am Rand)

   Rand-Schutz: max-width + white-space:normal + overflow-wrap verhindern
   dass Tooltips über den Viewport-Rand laufen.
   Sanfte Einblend-Animation via opacity + translateX/Y.
   -------------------------------------------------------------------------- */
[data-t-tooltip] {
  position: relative;
}

[data-t-tooltip]::after {
  content: attr(data-t-tooltip);
  position: absolute;
  /* Rand-Schutz: umbrechen statt über den Viewport-Rand laufen */
  white-space: normal;
  width: max-content;
  max-width: min(200px, 90vw);
  overflow-wrap: break-word;
  background: var(--glass-bg);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 10500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* right-controls: Tooltip links erscheinen */
#right-controls [data-t-tooltip]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
#right-controls [data-t-tooltip]:hover::after,
#right-controls [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* controls (bottom-bar): Tooltip oben erscheinen */
#controls [data-t-tooltip]::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
#controls [data-t-tooltip]:hover::after,
#controls [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* controls-overflow: Tooltip links erscheinen (Menü ist rechts am Rand) */
#controls-overflow [data-t-tooltip]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
#controls-overflow [data-t-tooltip]:hover::after,
#controls-overflow [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* dbz-legend: Tooltip rechts erscheinen (Legende ist links am Rand) */
.dbz-legend[data-t-tooltip]::after {
  left: calc(100% + 8px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
}
.dbz-legend[data-t-tooltip]:hover::after,
.dbz-legend[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* theme-toggle: Tooltip links erscheinen (Button ist rechts am Rand) */
#theme-toggle[data-t-tooltip]::after {
  right: calc(100% + 8px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
#theme-toggle[data-t-tooltip]:hover::after,
#theme-toggle[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* side-panel: Tooltip links erscheinen (Panel ist rechts am Rand).
   Gilt für den Toggle-Button sowohl im ausgeklappten als auch
   im eingeklappten Zustand (.side-panel--collapsed). */
.side-panel [data-t-tooltip]::after {
  right: calc(100% + 8px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
.side-panel [data-t-tooltip]:hover::after,
.side-panel [data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Such-Button-Tooltip unterdrücken wenn Suchleiste offen ist.
   .geocoder-wrap--open ist direkter Vorgänger des Such-Buttons im DOM –
   der ~-Selektor (general sibling) trifft ihn exakt. */
.geocoder-wrap--open ~ [data-t-tooltip]::after {
  display: none !important;
}

/* Controls-Bar: Tooltip für den Anker-Button (höchste button_order, ganz rechts)
   rechtsbündig ausrichten, damit er nicht über den Viewport-Rand läuft.
   Das data-tooltip-align="right"-Attribut wird von features.js auf dem
   Anker-Button gesetzt (Button mit der höchsten order in der Controls-Bar). */
#controls [data-tooltip-align="right"][data-t-tooltip]::after {
  left: auto;
  right: 0;
  width: max-content;
  transform: translateX(0) translateY(4px);
}
#controls [data-tooltip-align="right"][data-t-tooltip]:hover::after,
#controls [data-tooltip-align="right"][data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* leaflet-zoom: Tooltip rechts erscheinen (Buttons sind links am Rand) */
.leaflet-control-zoom a[data-t-tooltip]::after {
  left: calc(100% + 8px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
  /* #147: border-radius explizit wiederholen — im <a>-Kontext sonst eckig */
  border-radius: var(--radius-sm);
  /* #147: Body-Font (Inter) erzwingen — die Zoom-<a> erben Leaflets Monospace,
     das schlüge sonst auf den Tooltip durch (andere Tooltips erben Inter vom Host). */
  font-family: var(--font-body);
}
.leaflet-control-zoom a[data-t-tooltip]:hover::after,
.leaflet-control-zoom a[data-t-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}