/* 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); }
}
/* 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);
}
.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); }
.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;
}