/*
 * CN-06 Popover — app/components/ui/popover_component.rb
 *
 * Positioning, flip and dismissal come from popover_controller.js
 * (app/javascript/controllers/popover_controller.js) — this file is purely
 * the visual shell. Always `--color-surface-solid` (never glass-on-glass —
 * spec §1.7 "stacked glass drops to solid").
 */

.ui-popover {
  display: inline-flex;
}

/*
 * Top-layer promotion. popover_controller.js sets `popover="manual"` on the
 * open panel so it is laid out against the viewport rather than against
 * whichever ancestor happens to establish a containing block for fixed
 * descendants — every `.surface-glass` card does, via backdrop-filter. See
 * that controller's header comment for the full reasoning.
 *
 * The UA stylesheet ships `[popover]` with its own box geometry
 * (`inset: 0; margin: auto; width/height: fit-content; overflow: auto;
 * border: solid; padding: 0.25em;` plus system colours). Left alone, its
 * `inset: 0` + `margin: auto` over-constrain the panel against the inline
 * `top`/`left` the controller measures and centre it in the viewport —
 * exactly the failure the dialog `margin: auto` fix already cost us once.
 *
 * Neutralised here for every popover-family panel at once, keyed off the
 * Stimulus target rather than four component class names. Wrapped in
 * `:where()` so the rule carries zero specificity: it still beats the UA
 * declarations (author origin always does), while each component's own
 * `.ui-*__panel` rules below and in listbox.css / dropdown_menu.css /
 * date_range_picker.css keep beating it for the values they do set.
 */
:where([data-popover-target="panel"][popover]) {
  inset: auto;
  margin: 0;
  width: auto;
  height: auto;
  overflow: visible;
  border: 0;
  padding: 0;
  color: inherit;
  background: none;
}

.ui-popover__panel {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
}

/*
 * Shared panel entrance (opacity + translateY crossfade) for every popover-
 * family panel — CN-06 Popover, FM-06/07/08 listbox, NV-07 dropdown menu.
 * Defined once here rather than in each component's stylesheet; listbox.css
 * and dropdown_menu.css intentionally do not redeclare it.
 */
.ui-popover__panel,
.ui-listbox__panel,
.ui-dropdown-menu__panel {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.ui-popover.is-open .ui-popover__panel {
  opacity: 1;
  transform: translateY(0);
}

.ui-popover.is-flipped .ui-popover__panel {
  transform: translateY(4px);
}

.ui-popover.is-open.is-flipped .ui-popover__panel {
  transform: translateY(0);
}