Dropdowns & Popovers

// Dropdown toggle
document.querySelectorAll('.dropdown > button').forEach(button => {
  button.addEventListener('click', (e) => {
    e.stopPropagation()
    const dropdown = button.parentElement

    // Close other open dropdowns
    document.querySelectorAll('.dropdown.open').forEach(d => {
      if (d !== dropdown) d.classList.remove('open')
    })

    dropdown.classList.toggle('open')
  })
})

// Popover toggle
document.querySelectorAll('.popover-container > button').forEach(button => {
  button.addEventListener('click', (e) => {
    e.stopPropagation()
    const container = button.parentElement

    // Close other open popovers
    document.querySelectorAll('.popover-container.open').forEach(c => {
      if (c !== container) c.classList.remove('open')
    })

    container.classList.toggle('open')
  })
})

// Close on outside click
document.addEventListener('click', () => {
  document.querySelectorAll('.dropdown.open, .popover-container.open').forEach(el => {
    el.classList.remove('open')
  })
})

// Close on escape key
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.dropdown.open, .popover-container.open').forEach(el => {
      el.classList.remove('open')
    })
  }
})