@use './variables.scss' as *;

/* ============================================================
 * 移动端全局兜底样式
 * 仅在 ≤768px 生效，PC（≥1025px）零影响。
 * 处理无法在组件内逐个绑定的命令式弹层（ElMessageBox 等）
 * 与通用触摸/溢出问题。
 * ========================================================= */

@include mobile {
  // 防止页面横向溢出（宽表格/固定宽度元素）
  html,
  body {
    overflow-x: hidden;
  }

  // 命令式确认框（ElMessageBox.confirm）无法逐个绑宽度，统一兜底
  .el-message-box {
    width: 86% !important;
    max-width: 86vw !important;
  }

  // 通知/消息更贴顶，避免遮挡底部 Tab
  .el-message {
    min-width: auto !important;
    max-width: 92vw !important;
  }

  // 分页器触摸热区加大
  .el-pagination {
    .btn-prev,
    .btn-next,
    .el-pager li {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
    }
  }

  // 表单标签更紧凑
  .el-form-item__label {
    font-size: 14px;
  }
}