/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — ZENTRALE OVERLAY-/TOOLTIP-ARCHITEKTUR (Optik)
 *
 * EIN Layer für alles Schwebende. Er hängt direkt an <body>, damit ihn kein
 * `overflow` einer Tabelle, Karte, eines Drawers oder Dialogs zuschneiden kann,
 * und trägt EINEN z-index für die gesamte Anwendung.
 *
 * Rangfolge der schwebenden Ebenen (bewusst dokumentiert, nicht geraten):
 *   7000  Listen-/Zeilenmenüs (.vi-tbl-menu)
 *   8000  E-Mail-Fenster-Ebene (#mcx-layer)
 *   9200  E-Mail-Popover (#mcx-pop-layer)
 *   9600  DIESER Layer — Hinweise und Vorschauen liegen ÜBER allem, was sie erklären
 *
 * Doku: docs/TABLE_STANDARD.md §7
 * ═══════════════════════════════════════════════════════════════════════════════ */

.vi-ovl-layer {
  position: fixed; inset: 0;
  z-index: 9600;
  pointer-events: none;          /* der Layer selbst fängt nie einen Klick ab */
}

.vi-ovl-tip {
  position: fixed;
  /* Ohne feste Obergrenze zieht ein langer Pfad das Panel über den Bildschirm.
     Die Breite wird beim Positionieren zusätzlich gegen den Viewport geklemmt. */
  max-width: 420px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--gray-300, #D8DFDC);
  box-shadow: var(--shadow-pop, 0 8px 24px rgba(20, 26, 23, .12));
  color: var(--text-primary, #141A17);
  font: var(--fw-medium, 500) var(--text-sm, 13px)/1.45 var(--font-body);
  white-space: normal;
  overflow-wrap: anywhere;       /* lange Pfade brechen, statt zu überlaufen */
  opacity: 0; visibility: hidden;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.vi-ovl-tip.is-on { opacity: 1; visibility: visible; transform: none; }

/* Vorschau mit Aufbau (Objekt, Person, Dokument …): mehr Luft, klare Hierarchie. */
.vi-ovl-tip.is-rich { padding: var(--space-3, 12px); max-width: 380px; }
.vi-ovl-tip .vi-ovl-t {
  display: block; margin: 0 0 2px;
  font: var(--fw-semibold, 600) var(--text-md, 14px)/1.35 var(--font-body);
  color: var(--text-primary, #141A17);
}
.vi-ovl-tip .vi-ovl-s {
  display: block; font-size: var(--text-xs, 12px); line-height: 1.45;
  color: var(--text-muted, var(--gray-500, #5F6B66));
}
.vi-ovl-tip .vi-ovl-s + .vi-ovl-s { margin-top: 2px; }
.vi-ovl-tip .vi-ovl-k {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--gray-200, #E5EAE8);
  font-size: var(--text-xxs, 11px); color: var(--text-muted, #5F6B66);
}

@media (prefers-reduced-motion: reduce) {
  .vi-ovl-tip { transition: none; transform: none; }
}