/* =========================================================
   邹鲁网 · Element Plus 移动端适配 + 通用响应式补丁
   前台 / 后台 共用（index.html 与 admin/index.html 均引入）
   目的：修复弹窗、表格、分页、表单等组件在窄屏下溢出/显示不全
   ========================================================= */

/* ---------- 基础：防止 iOS 聚焦输入框时自动放大页面 ---------- */
@media (max-width: 992px) {
  .el-input__inner,
  .el-textarea__inner,
  .el-select .el-input__inner {
    font-size: 16px; /* ≥16px 可避免 iOS Safari 自动缩放 */
  }
}

/* ---------- 弹窗 Dialog ---------- */
/* 默认 width:50% 在手机上会挤成一条，改为接近满屏 */
@media (max-width: 992px) {
  .el-dialog {
    width: 92% !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }
  .el-dialog__header { padding: 16px 18px 10px !important; }
  .el-dialog__body { padding: 12px 18px 18px !important; max-height: 68vh; overflow-y: auto; }
  .el-dialog__footer { padding: 10px 18px 16px !important; }
  .el-dialog__title { font-size: 16px !important; }
}
@media (max-width: 576px) {
  .el-dialog { width: 96% !important; margin-top: 6vh !important; }
  .el-dialog__body { padding: 10px 14px 14px !important; max-height: 66vh; }
  .el-dialog__header { padding: 14px 14px 8px !important; }
  .el-dialog__footer { padding: 8px 14px 14px !important; }
  .el-dialog__footer .el-button { margin-left: 8px !important; }
}

/* ---------- 抽屉 Drawer（用于移动端导航） ---------- */
@media (max-width: 576px) {
  .el-drawer { --el-drawer-size: 82% !important; }
}
.el-drawer__header {
  margin-bottom: 0 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--zl-border, #e8ebef);
  color: var(--zl-text, #1f2328) !important;
}
.el-drawer__title { font-size: 16px; font-weight: 600; }
.el-drawer__body { padding: 0 16px 20px !important; overflow-y: auto; }

/* ---------- 表格 Table ---------- */
/* 表格在窄屏横向滚动，绝不撑破页面 */
.el-table { width: 100% !important; }
.el-table__body-wrapper { overflow-x: auto !important; }
@media (max-width: 992px) {
  .el-table { font-size: 13px; }
  .el-table .cell { padding-left: 8px !important; padding-right: 8px !important; }
  .el-table th.el-table__cell { padding: 8px 0 !important; }
  .el-table td.el-table__cell { padding: 8px 0 !important; }
  /* 长文本单元格允许换行，避免横向无限撑宽 */
  .el-table .cell { word-break: break-word; white-space: normal !important; }
}

/* ---------- 分页 Pagination ---------- */
/* 窄屏默认隐藏"跳至/总数"，只保留翻页，避免换行溢出 */
@media (max-width: 768px) {
  .el-pagination { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding: 4px 0; }
  .el-pagination__total,
  .el-pagination__jump,
  .el-pagination__sizes { display: none !important; }
  .el-pagination .btn-prev,
  .el-pagination .btn-next,
  .el-pagination .el-pager li {
    min-width: 30px !important; height: 30px !important; line-height: 30px !important;
  }
}
@media (max-width: 400px) {
  /* 超窄屏只保留首尾 + 当前页附近 */
  .el-pagination .el-pager li:not(.active):not(:first-child):not(:last-child) { display: none; }
}

/* ---------- 表单 Form ---------- */
@media (max-width: 768px) {
  /* 行内表单改为纵向堆叠（后台筛选区常用） */
  .el-form--inline .el-form-item { display: block !important; margin-right: 0 !important; margin-bottom: 12px !important; }
  .el-form--inline .el-form-item__content { display: block !important; width: 100% !important; }
  .el-form--inline .el-input,
  .el-form--inline .el-select { width: 100% !important; }
  .el-form-item__label { padding-bottom: 4px !important; }
}

/* ---------- 消息弹框 MessageBox / 通知 ---------- */
@media (max-width: 576px) {
  .el-message-box { width: 90% !important; max-width: 90% !important; }
  .el-message { min-width: auto !important; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; }
  .el-message__content { margin-right: 8px !important; }
}

/* ---------- 下拉菜单（贴边时不出屏） ---------- */
@media (max-width: 768px) {
  .el-select-dropdown { max-width: 92vw !important; }
  .el-picker__popper, .el-picker-panel { max-width: 96vw !important; }
  .el-date-editor.el-input, .el-date-editor.el-input__inner { width: 100% !important; }
}

/* ---------- 描述列表 / 标签 ---------- */
@media (max-width: 768px) {
  .el-descriptions { font-size: 13px; }
  .el-descriptions__body { overflow-x: auto; }
  .el-tag { margin: 2px 4px 2px 0; }
}

/* ---------- 通用：禁止任何 Element 组件撑破视口 ---------- */
.el-overlay, .el-dialog__wrapper, .el-drawer__wrapper { max-width: 100vw; }
img, video, table, pre, iframe { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------- 触摸设备：增大点击热区 ---------- */
@media (hover: none) and (pointer: coarse) {
  .el-button--small { min-height: 32px; }
  .el-menu-item { min-height: 46px; line-height: 46px !important; }
  /* 移动端点击不显示灰色高亮块 */
  * { -webkit-tap-highlight-color: transparent; }
}