/* ============================================================
   mobile-adapt.css  —  景瑞包装工作台 移动端适配覆盖层
   作用范围：仅 ≤768px 视口（手机 / 企业微信内置浏览器）
   ｜ 桌面端零影响 ｜ 纯追加，可整文件删除回滚
   ============================================================ */

@media (max-width: 768px) {
  /* ---------- 1. 底部导航：8 项不再硬挤，可横向滑动 ---------- */
  .bottom-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .bottom-tabs::-webkit-scrollbar { display: none; }
  .bt-item {
    flex: 0 0 auto !important;
    min-width: 66px !important;
    padding: 0 6px !important;
  }
  .bt-icon { font-size: 18px !important; }
  .bt-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* ---------- 2. 内容区底部留白：分页/末行不再被 tab 挡住 ---------- */
  .shell-content {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .page-footer { display: none !important; }

  /* ---------- 3. 表格：改为横向滚动，列不再被压成一条缝 ---------- */
  .shell-content > * { overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .el-table { min-width: 820px !important; }
  .el-table .cell { word-break: keep-all; }
  .el-table__header-wrapper,
  .el-table__body-wrapper { overflow-x: visible !important; }

  /* ---------- 4. Tabs：多标签可滑动，字重与内边距收窄 ---------- */
  .el-tabs__nav-wrap { overflow-x: auto !important; scrollbar-width: none; }
  .el-tabs__nav-wrap::-webkit-scrollbar { display: none; }
  .el-tabs__nav-wrap::after { display: none !important; }
  .el-tabs__item {
    padding: 0 10px !important;
    font-size: 13px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-tabs__nav { display: flex !important; flex-wrap: nowrap !important; }

  /* ---------- 5. 页头：标题与副标题换行更自然 ---------- */
  .page-header,
  .page-head,
  .page-title-bar { flex-wrap: wrap !important; gap: 4px 10px !important; }
  .page-header h2,
  .page-title { font-size: 18px !important; line-height: 1.3 !important; }
  .page-desc,
  .page-subtitle { font-size: 12px !important; }

  /* ---------- 6. 指标卡：两列铺满，不留怪缝 ---------- */
  .stat-grid,
  .stat-cards,
  .kpi-row,
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stat-card,
  .kpi-card { min-width: 0 !important; padding: 12px !important; }
  .stat-card .num,
  .kpi-card .num,
  .kpi-value { font-size: 22px !important; }

  /* ---------- 7. 分页：居中、可换行、不贴边 ---------- */
  .el-pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
    row-gap: 6px;
    padding: 8px 0 4px !important;
  }
  .el-pagination .el-pagination__total,
  .el-pagination .el-pagination__sizes { display: none !important; }

  /* ---------- 8. 表单/筛选条：整行铺开，控件不挤压 ---------- */
  .filter-bar,
  .search-bar,
  .toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .filter-bar > *,
  .toolbar > * { flex: 1 1 auto; min-width: 0; }
  .el-input__inner,
  .el-select { min-height: 36px; }

  /* ---------- 9. 按钮组：横向排不下就换行，避免文字被截断 ---------- */
  .action-btns,
  .btn-row,
  .form-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .action-btns .el-button,
  .btn-row .el-button,
  .form-actions .el-button { margin-left: 0 !important; }
  .el-button { min-height: 36px; }

  /* ---------- 10. 弹窗：满宽留边，按钮可点全 ---------- */
  .el-dialog { width: 92vw !important; max-width: 92vw !important; margin: 6vh auto !important; }
  .el-dialog__body { max-height: 68vh; overflow: auto; }
  .el-message-box { width: 88vw !important; max-width: 88vw !important; }

  /* ---------- 11. 卡片/面板内边距统一，避免负边距 -------------------- */
  .shell-content { padding-top: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .shell-body { padding: 8px !important; gap: 0 !important; }

  /* ---------- 12. 工作台首页三栏融合：通讯录/工作区互斥铺满 ---------- */
  .mobile-fused { flex-direction: column !important; height: 100% !important; }
  .mobile-contacts-bar { width: 100% !important; max-width: 100% !important; }
  .quick-nav { padding: 4px 6px !important; }
  .qe-text { display: none !important; }
  .quick-entry { min-width: 40px !important; padding: 4px 6px !important; }

  /* ---------- 13. AI 助手页：提示块与操作按钮可读 ---------- */
  .agent-tip,
  .guide-step { font-size: 13px !important; line-height: 1.6 !important; }
}