// 报表根容器提供默认占位高度，宿主可以通过 style 覆盖尺寸。
.pisell-superset-dashboard {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 520px;

  // React 容器、当前会话挂载节点和 SDK iframe 逐层填满可用空间。
  &-host,
  &-mount,
  iframe {
    width: 100%;
    height: 100%;
  }

  // 去掉 iframe 默认边框与行内元素基线留白。
  iframe {
    display: block;
    border: 0;
  }

  // 加载图标的浅灰圆角底框；图标自身沿用 Ant Design 主题色。
  &-loading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    background: #f9fafb;
  }

  // 加载文案使用次级文字颜色，与组件其他状态提示保持一致。
  &-loading-text {
    color: #667085;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
  }

  // 加载与失败状态共用遮罩，覆盖未完成初始化或已清理的报表区域。
  &-status {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: #fff;
    color: #475467;

    p {
      margin: 0;
    }

    // 错误状态的手动重试按钮。
    button {
      padding: 8px 16px;
      border: 1px solid #d0d5dd;
      border-radius: 6px;
      background: #fff;
      color: inherit;
      cursor: pointer;
    }
  }

  // 加载状态的图标与文案采用稍大的垂直间距。
  &-loading {
    gap: 16px;
  }

  // 尊重系统减少动画偏好，保留图标和文字，只关闭旋转动画。
  @media (prefers-reduced-motion: reduce) {
    &-loading-icon .anticon-spin {
      animation: none;
    }
  }
}