/**
 * Scroll an element into view using the dashboard `<main>` scroll container only.
 * Avoids document-level scrollIntoView, which conflicts with `.app-web-bg { overflow: hidden }`.
 */
export function scrollWithinMainScrollContainer(
  element: HTMLElement | null,
  options?: { behavior?: ScrollBehavior; padding?: number },
): void {
  if (!element) return;

  const behavior = options?.behavior ?? 'smooth';
  const padding = options?.padding ?? 16;
  const main = element.closest('main');

  if (!main) {
    element.scrollIntoView({ behavior, block: 'nearest' });
    return;
  }

  const mainRect = main.getBoundingClientRect();
  const elRect = element.getBoundingClientRect();

  if (elRect.top < mainRect.top + padding) {
    main.scrollBy({ top: elRect.top - mainRect.top - padding, behavior });
  } else if (elRect.bottom > mainRect.bottom - padding) {
    main.scrollBy({ top: elRect.bottom - mainRect.bottom + padding, behavior });
  }
}
