/* popover-menu.css — Generisches Popover (body-appended) + Popover-Menu-Items. */

/* ──────────────────────────────────────────────────────────────────────
 * Popover (Body-appended)
 * ────────────────────────────────────────────────────────────────────── */

.app-popover {
  position: fixed;
  background: #fff;
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-pill-sm);
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
  z-index: var(--z-app-toolbar-base);
  max-height: min(80vh, 560px);
  overflow-y: auto;
  /* Ohne explizites overflow-x werden breitere Inhalte (lange Projektnamen im
     Board-Switcher) zu einer horizontalen Scroll-Achse. Popover-Content muss
     sich immer an die Popover-Breite halten — Ellipsis/Wrap uebernimmt der Inhalt. */
  overflow-x: hidden;
  font-family: var(--lod-font-sans);
  /* Entrance (Charakter B) — vorher erschien das body-appended Popover instant
     ("Teleport"). Waechst dezent aus dem oberen Rand. Exit managt das JS (Remove). */
  transform-origin: top center;
  /* backwards (nicht both): kein gehaltener transform nach der Animation — das
     JS positioniert das Popover via top/left, ein gehaltener transform koennte
     spaetere Repositionierung stoeren. */
  animation: appPopoverIn var(--motion-quick) var(--ease-enter) backwards;
}
@keyframes appPopoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Variante „Hover-Karte" ────────────────────────────────────────────────
   Weiche Karte statt Default-Popover: groesserer Radius, Tooltip-Schatten,
   randloses Panel (der Inhalt polstert selbst), Tooltip-Layer.

   ★★ WARUM ALS VARIANTE: dieser Block stand FUENFMAL zeichengleich —
   `.dar-tip-popup` (Action-Rail) · `.set-info-popup` (Settings-ⓘ) ·
   `.nav-rail-tooltip-popup` · `.kpi-legend-popup` · `.pvw-info-popup`
   (Vertrags-Wizard). Vier der fuenf Kommentare sagten ausdruecklich „Optik
   identisch zur/wie die andere" — die Absicht war immer EINE Karte, extrahiert
   wurde sie nie. Wer eine sechste Hover-Karte baut, bekommt sie jetzt geschenkt;
   vorher schrieb er neun Deklarationen ab oder bekam das Default-Popover
   (kleiner Radius, harter Schatten) und sah den Unterschied nur im Vergleich.

   ★ STELLUNG IM DATEIFLUSS IST TEIL DER REGEL — bewusst VOR `.is-closing`.
   Die fuenf Kopien lagen in ihren eigenen Dateien, die alle NACH dieser laden,
   und trugen `animation: lod-fade-slide-in` bei (0,2,0) — also gleichauf mit
   `.app-popover.is-closing`, aber spaeter: die Eintritts-Animation gewann gegen
   den Austritt. Hier oben verliert sie korrekt gegen `.is-closing`.

   ★ `pointer-events: auto` steht bewusst NICHT hier. Es stand in drei der fuenf
   Kopien, ist aber entweder wirkungslos (auto IST der Default) oder schaedlich:
   bei (0,2,0) nach `.is-closing` hebelt es dessen `pointer-events: none` aus,
   und genau das soll verhindern, dass ein schliessendes Popover noch Klicks
   abfaengt. Dass es nicht tragend ist, zeigen die zwei Kopien OHNE die Zeile
   (`pvw-info` liegt im selben Drawer-Kontext wie `dar-tip` und funktioniert) —
   body-gemountete Panels erreicht ohnehin kein Container-`pointer-events`. */
.app-popover--karte {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  overflow: hidden;
  z-index: var(--z-tooltip);
  animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
}
@media (prefers-reduced-motion: reduce) {
  .app-popover--karte { animation: none; }
}
/* Exit (Charakter B) — schneller + Accelerate, getriggert via .is-closing
   (LoD.motion.animateOut). pointer-events:none, damit der schliessende
   Popover keine Klicks mehr abfaengt. */
.app-popover.is-closing {
  pointer-events: none;
  animation: appPopoverOut var(--motion-quick) var(--ease-exit) forwards;
}
@keyframes appPopoverOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.app-popover:focus-visible { outline: none; }

.app-popover-menu { padding: var(--space-1); }
.app-popover-menu-head {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lod-gray-500);
}
/* ── Erklärendes Menü: Gruppen-Kopf, Hinweis-Zeile, Beispielwert, Suche ───────
   Für das Variablen-Einfüge-Menü: ein Label allein („Name — {NAME}") sagt nicht,
   was eingesetzt wird. Alle Teile sind optional — einfache Menüs (Kanban-
   Gruppierung, Karten-Aktionen) sehen unverändert aus. */
.app-popover-menu-kopf {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
  color: var(--lod-gray-500);
}
.app-popover-menu-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.app-popover-menu-label { font-size: var(--fs-body, 14px); color: inherit; }
.app-popover-menu-hinweis {
  font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--color-text-muted); white-space: normal;
}
.app-popover-menu-beispiel {
  flex: 0 0 auto; max-width: 38%; margin-left: var(--space-2); align-self: center;
  font-size: var(--fs-meta, 12px); color: var(--lod-gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-popover-menu-suche { padding: var(--space-2) var(--space-2) var(--space-1); }
.app-popover-menu-suchfeld {
  width: 100%; height: 32px; padding: 0 var(--space-2);
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-sm);
  font-size: var(--fs-body, 14px); font-family: inherit; color: var(--color-text);
}
.app-popover-menu-suchfeld:focus { outline: 2px solid var(--lod-darkblue-200, #b9cbe0); outline-offset: -1px; }
.app-popover-menu-liste { overflow-y: auto; overscroll-behavior: contain; }
/* Zweizeilige Einträge: Icon/Checkmark oben ausrichten statt mittig. */
.app-popover-menu-item:has(.app-popover-menu-hinweis) {
  align-items: flex-start; padding-top: var(--space-2); padding-bottom: var(--space-2);
}

.app-popover-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--lod-gray-700);
  text-align: left;
  cursor: pointer;
}
.app-popover-menu-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-popover-menu-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-popover-menu-item.danger { color: var(--lod-danger); }
.app-popover-menu-item.danger:hover { background: var(--status-danger-soft); color: var(--lod-danger); }
/* Sichtbar-aber-gesperrt (disabled-Option von PopoverMenu.open): der Eintrag
   bleibt lesbar — der Grund steht im `hinweis` —, verliert aber Hover-Fläche
   und Zeiger. Kein display:none: eine grundlos verschwundene Aktion sieht wie
   ein Fehler aus. */
.app-popover-menu-item:disabled { opacity: 0.55; cursor: not-allowed; }
.app-popover-menu-item:disabled:hover { background: none; color: inherit; }
.app-popover-menu-item img { opacity: 0.6; flex-shrink: 0; }
.app-popover-menu-item.is-active > img[src*="checkmark"]:last-child { margin-left: auto; opacity: 0.9; }
.app-popover-menu-sep { height: 1px; background: var(--lod-gray-100); margin: var(--space-1) 0; }

/* Board-Switcher-Panel */
.app-board-switcher-panel { padding: var(--space-1-5) 0; min-width: 260px; font-family: var(--lod-font-sans); }
.app-board-switcher-header {
  padding: var(--space-2) var(--space-3-5) var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lod-gray-500);
}
.app-board-switcher-list { padding: 0 var(--space-1-5) var(--space-1-5); }
.app-board-switcher-section {
  padding: var(--space-2-5) var(--space-2) var(--space-1);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lod-gray-500);
  border-top: 1px solid var(--lod-gray-100);
  margin-top: var(--space-1);
}
.app-board-switcher-section.muted { color: var(--lod-gray-400); font-style: italic; text-transform: none; letter-spacing: 0; }
.app-board-switcher-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--lod-gray-700);
  text-align: left;
  cursor: pointer;
  min-width: 0;                 /* erlaubt dem Label zu schrumpfen + Ellipsis */
}
.app-board-switcher-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-board-switcher-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-board-switcher-item img { opacity: 0.6; flex-shrink: 0; }
.app-board-switcher-item .app-switcher-check { margin-left: auto; opacity: 0.9; }
/* Einzeilige Optionen mit Ellipsis - verhindert Zeilenumbrueche bei langen
   Projektnamen. Popover-Breite ist an Trigger-Breite gebunden (siehe JS). */
.app-board-switcher-item-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mehrfach-Auswahl (Optionen mit `mehrfach: true`) ───────────────────────
   Das Kästchen steht VOR dem Label: es ist die Steuerung, nicht die Quittung. Das Häkchen
   der Einfach-Auswahl sitzt dagegen rechts — dort bestätigt es die getroffene Wahl. Zwei
   verschiedene Bedeutungen, zwei verschiedene Plätze. */
.app-popover-menu-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
}
/* Leere Spur einer Zeile OHNE Kästchen bzw. OHNE Icon: sie hält nur den Platz, damit alle
   Labels des Menüs auf einer Linie beginnen — sichtbar wäre ein leeres Kästchen an einer
   Radio-Zeile eine Falschaussage („hier kann man ankreuzen"). */
.app-popover-menu-box--leer {
  border-color: transparent;
  background: none;
}
.app-popover-menu-ico--leer {
  flex: 0 0 auto;
  display: inline-block;
  width: 14px;
  height: 14px;
}
.app-popover-menu-item--mehrfach.is-active .app-popover-menu-box {
  background: var(--brand-default);
  border-color: var(--brand-default);
}
.app-popover-menu-item--mehrfach.is-active .app-popover-menu-box img {
  filter: brightness(0) invert(1);
}