/* ==========================================================================
 * peiste-cabinets.cn 业务页移动端通用补丁
 * 解决: 业务页(订单/客户/生产/财务...)在窄屏下字体太大、有效信息看不到
 * 加载: theme-cream → mobile-responsive → cockpit → cockpit-v2 → cockpit-v3 → mobile-business
 * 创建: 2026-06-06
 *
 * 策略:
 *  1) 全局缩小字号 + 行高 (Element UI 默认 14px → 12px)
 *  2) 表格 cell padding 压缩
 *  3) 表单 label/input 紧凑
 *  4) 卡片 / 面板 padding 减半
 *  5) 工具栏 (toolbar) 横向滚动
 *  6) el-page-header / page-title 缩
 *  7) dialog / drawer 全屏化
 *  8) 卡片式表格 (table-card) 模式 (Element 表格 <768 强制横滚易切)
 * ========================================================================== */

@media (max-width: 768px) {

  /* ===== 1. 全局字号缩 ===== */
  body, .app-main, .layout-main, [class*="main-content"] {
    font-size: 12px;
    line-height: 1.4;
  }
  .el-table, .el-table * {
    font-size: 12px !important;
  }
  .el-form-item__label {
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 0 6px 0 0 !important;
  }
  .el-form-item {
    margin-bottom: 10px !important;
  }
  .el-button {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .el-button--small {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  .el-button + .el-button { margin-left: 4px; }

  /* ===== 2. 表格 cell 压缩 + 横向滚动 ===== */
  .el-table .el-table__cell {
    padding: 4px 0 !important;
    min-width: 0 !important;
  }
  .el-table .cell {
    padding: 0 6px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  /* 表格容器横向滚动 */
  .el-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__body-wrapper, .el-table__header-wrapper {
    min-width: 100%;
  }
  .el-table .el-table__row td .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }

  /* ===== 3. 表单紧凑 ===== */
  .el-input__inner,
  .el-textarea__inner {
    font-size: 13px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 10px !important;
  }
  .el-textarea__inner {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 6px 10px !important;
  }
  .el-select .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
  }
  .el-input__prefix, .el-input__suffix {
    line-height: 30px !important;
  }
  .el-input-number .el-input__inner {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100% !important;
  }
  .el-radio, .el-checkbox {
    margin-right: 8px !important;
    font-size: 12px !important;
  }
  .el-radio__label, .el-checkbox__label {
    font-size: 12px !important;
    padding-left: 4px !important;
  }

  /* ===== 4. 卡片 / 面板 padding 减半 ===== */
  .el-card {
    margin-bottom: 10px !important;
  }
  .el-card__header {
    padding: 10px 12px !important;
    font-size: 13px !important;
    min-height: auto !important;
  }
  .el-card__body {
    padding: 12px !important;
  }

  /* ===== 5. 工具栏 (toolbar / search bar) 横向滚动 ===== */
  .toolbar, .search-bar, .filter-bar, .query-form, .el-form--inline,
  [class*="toolbar"], [class*="search"], [class*="filter"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px !important;
    background: var(--card-bg) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .el-form--inline .el-form-item__content {
    width: 130px;
  }

  /* ===== 6. 页面标题缩 ===== */
  .page-title, h2.page-title {
    font-size: 16px !important;
    margin: 8px 0 10px !important;
  }
  .el-page-header {
    padding: 6px 0 !important;
  }
  .el-page-header__content {
    font-size: 14px !important;
  }
  .el-page-header__title {
    font-size: 12px !important;
  }

  /* ===== 7. Dialog / Drawer 全屏化 ===== */
  .el-dialog {
    width: 100vw !important;
    margin: 0 !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
  }
  .el-dialog__header {
    padding: 14px 16px !important;
    border-radius: 0 !important;
  }
  .el-dialog__body {
    padding: 12px 16px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }
  .el-dialog__footer {
    padding: 10px 16px !important;
  }
  .el-drawer {
    width: 85% !important;
    max-width: 320px !important;
  }
  .el-drawer.rtl {
    width: 85% !important;
  }

  /* ===== 8. 通用间距压缩 ===== */
  .el-row { margin-bottom: 6px !important; }
  .el-col { padding: 0 4px !important; }
  .el-divider { margin: 10px 0 !important; }
  .el-tag { font-size: 11px !important; height: 20px !important; line-height: 18px !important; padding: 0 6px !important; }
  .el-alert { padding: 6px 10px !important; font-size: 12px !important; }
  .el-alert__title { font-size: 12px !important; }
  .el-tabs__item { font-size: 12px !important; padding: 0 10px !important; height: 36px !important; line-height: 36px !important; }
  .el-tabs__header { margin-bottom: 8px !important; }
  .el-tabs--card .el-tabs__item { padding: 0 8px !important; }

  /* ===== 9. 描述列表 (Descriptions) 紧凑 ===== */
  .el-descriptions-item__label {
    font-size: 11px !important;
    padding: 4px 8px !important;
    width: 80px !important;
  }
  .el-descriptions-item__content {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  .el-descriptions {
    font-size: 12px !important;
  }

  /* ===== 10. 分页紧凑 ===== */
  .el-pagination {
    padding: 8px 0 !important;
    text-align: center;
  }
  .el-pagination .el-pagination__sizes,
  .el-pagination .el-pagination__jump,
  .el-pagination button,
  .el-pagination .el-pager li {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
  }
  .el-pagination .el-pagination__total {
    font-size: 11px !important;
  }

  /* ===== 11. 步骤条 / 时间线 ===== */
  .el-steps {
    font-size: 12px !important;
  }
  .el-step__title { font-size: 12px !important; line-height: 1.3 !important; }
  .el-step__description { font-size: 11px !important; }
  .el-timeline-item__node { width: 10px !important; height: 10px !important; }
  .el-timeline-item__timestamp { font-size: 11px !important; }
  .el-timeline-item__content { font-size: 12px !important; }

  /* ===== 12. 上传 / 头像 ===== */
  .el-upload--picture-card,
  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px !important;
    height: 70px !important;
  }
  .el-avatar { font-size: 12px !important; }

  /* ===== 13. 统计卡 (业务页内的) ===== */
  [class*="stat-card"], .summary-card, .info-card {
    padding: 10px !important;
    font-size: 12px !important;
  }

  /* ===== 14. Element 消息 / 通知 ===== */
  .el-message { min-width: auto !important; max-width: 90vw !important; font-size: 12px !important; }
  .el-notification { width: 90vw !important; max-width: 360px !important; }

  /* ===== 15. 通用按钮组 / 工具条 ===== */
  .table-toolbar, .list-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 0 !important;
  }
  .table-toolbar .el-button { margin: 0 !important; }

  /* ===== 16. 详情页布局 (订单详情/客户详情) ===== */
  .detail-page .el-descriptions .el-descriptions-item__cell {
    display: block !important;
    width: 100% !important;
    padding: 4px 8px !important;
  }
  .detail-page {
    padding: 8px !important;
  }
}

/* ===== 极窄屏 (≤ 480px) 进一步缩 ===== */
@media (max-width: 480px) {
  body, .app-main, .layout-main {
    font-size: 11px;
  }
  .el-button {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  .el-card__header { padding: 8px 10px !important; }
  .el-card__body { padding: 10px !important; }
  .el-dialog__body { padding: 10px 12px !important; }
  .stat-card { padding: 8px !important; }
}