@layer components {
  /*
   * Popover implementation with unique anchoring
   * Each popover needs a unique anchor to work correctly
   */

  /* Triggers with unique anchor names via inline styles */
  .popover-trigger {
    anchor-name: var(--anchor-name);
    cursor: pointer;
  }

  /* Popover content anchored to its specific trigger */
  .popover-content {
    border-radius: var(--panel-border-radius, 1em);

    /* Reset inherited styles */
    font-weight: normal;
    text-transform: none;

    /* Anchors to the specific anchor name */
    position-anchor: var(--anchor-name);
    margin: 0;
    inset: auto;
    transform: none;

    /* Default: centered above the trigger */
    bottom: anchor(top);
    left: anchor(center);

    /* Smooth transitions */
    opacity: 0;
    transition:
      opacity 0.4s,
      display 0.4s,
      overlay 0.4s;
    transition-behavior: allow-discrete;

    /* Try different positions if default doesn't fit */
    position-try-fallbacks:
      --below-center, --above-left, --above-right, --below-left, --below-right,
      --left-center, --right-center;

    & > * {
      padding: 0.5rem;
    }

    &:popover-open {
      display: block; /* Override Bootstrap's dialog { display: none } */
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  /* Fallback: centered below trigger */
  @position-try --below-center {
    inset: auto;
    top: anchor(bottom);
    left: anchor(center);
  }

  /* Fallback: above trigger, left-aligned */
  @position-try --above-left {
    inset: auto;
    bottom: anchor(top);
    left: anchor(left);
  }

  /* Fallback: above trigger, right-aligned */
  @position-try --above-right {
    inset: auto;
    bottom: anchor(top);
    right: anchor(right);
  }

  /* Fallback: below trigger, left-aligned */
  @position-try --below-left {
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
  }

  /* Fallback: below trigger, right-aligned */
  @position-try --below-right {
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
  }

  /* Fallback: left of trigger, vertically centered */
  @position-try --left-center {
    inset: auto;
    right: anchor(left);
    top: anchor(center);
  }

  /* Fallback: right of trigger, vertically centered */
  @position-try --right-center {
    inset: auto;
    left: anchor(right);
    top: anchor(center);
  }
}