/* Shared async loading overlay (blockchain spinner pattern). */
.portal-async-loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.portal-async-loading:not([hidden]) {
  pointer-events: auto;
}

.portal-async-loading[hidden] {
  display: none !important;
}

.portal-async-loading__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg, #f8f6f1) 90%, transparent);
}

body.theme-dark .portal-async-loading__backdrop {
  background: color-mix(in srgb, var(--color-bg, #0f1a24) 88%, transparent);
}

/* Fixed to the viewport centre — visible when the table is scrolled. */
.portal-async-loading__status,
.portal-async-loading__status--portaled {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transform: translate(-50%, -50%);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: var(--color-bg, #f8f6f1);
  color: var(--color-text-muted);
  text-align: center;
  box-shadow: 0 8px 32px rgba(20, 40, 60, 0.12);
  pointer-events: none;
}

body.theme-dark .portal-async-loading__status,
body.theme-dark .portal-async-loading__status--portaled {
  background: var(--color-bg, #0f1a24);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.portal-async-loading__spinner {
  width: 3rem;
  height: 3rem;
}