/* ============================================================
 * 商家端移动端覆盖样式（mobile.css）
 * 原则：全部规则包在 @media (max-width:768px) 内，只做覆盖；
 *       宽屏（>768px）完全不生效，桌面端样式与逻辑零影响。
 * 用途：解决手机窄屏下的指标块挤压、图表并排、弹窗输入框等问题。
 * ============================================================ */
@media (max-width: 768px) {

  /* ---------- P3：进销存配件卡片 4 指标块太挤（每格仅 72px） ---------- */
  .inventory-part-card-mid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .inventory-part-stat-item {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  /* ---------- P3：消耗分析 6 指标块 3 列太挤 ---------- */
  .consume-analysis-mid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .consume-analysis-stat-item {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  /* ---------- P6：营收统计图表卡片手机上下堆叠，不再并排挤压 ---------- */
  .content-row-s2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .content-row-s2 > .panel-s2 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- P1：下拉/自动补全浮层在移动端可点、层级足够、点击区够大 ---------- */
  .el-select-dropdown,
  .el-autocomplete-suggestion {
    z-index: 99999 !important;
  }
  .el-select-dropdown__item,
  .el-autocomplete-suggestion li {
    min-height: 44px !important;
    line-height: 22px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ---------- 通用：弹窗内表格允许横向滚动，不撑破屏幕 ---------- */
  .el-dialog .el-table,
  .el-dialog .el-table__body-wrapper {
    max-width: 100% !important;
  }
  .el-dialog .el-table__body-wrapper {
    overflow-x: auto !important;
  }

  /* ---------- P7：弹窗表单手机上统一竖排，InputNumber 占满整宽 ---------- */
  .el-dialog .el-row { display: block !important; }
  .el-dialog .el-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  /* 自定义 form-row/form-col（成本价/销售价并排的真正容器）也改单列 */
  .el-dialog .form-row { display: block !important; }
  .el-dialog .form-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  .el-dialog .el-form-item__content { margin-left: 0 !important; }
  .el-dialog .el-input-number {
    width: 100% !important;
  }

  /* InputNumber 左右 −/+ 按钮浮在 input 上，手机上数字居中并左右留空，避免被按钮压住 */
  .el-dialog .el-input-number .el-input__inner {
    padding-left: 38px !important;
    padding-right: 38px !important;
    text-align: center !important;
  }
  .el-dialog .el-input-number .el-input { flex: 1 1 auto !important; }

  /* ---------- 通用：底部安全区，避免被手机浏览器工具栏遮挡 ---------- */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ---------- 维修单详情抽屉：手机上整屏宽，不再被右边缘裁切 ---------- */
  .el-drawer,
  .el-drawer.rtl,
  .el-drawer.ltr,
  .el-drawer__container,
  .el-drawer__body {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}