/* ==========================================================================
 * peiste-cabinets.cn 业务子页移动端精修 v2
 * 解决: 所有功能模块子页 (订单/客户/生产/财务/...) 在窄屏下的整体协调性
 * 加载: ... → mobile-business → mobile-cards → mobile-pages-finetune
 * ========================================================================== */

@media (max-width: 768px) {

  /* ============================================================
   * 1. 顶栏 (Header) 极简化
   * ============================================================ */
  .el-header,
  .layout-header,
  .app-header,
  [class*="header-bar"] {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important;
    background: var(--card-bg) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  }

  /* 顶栏左侧 (logo + 汉堡) 紧凑 */
  .el-header > *,
  .layout-header > *,
  .app-header > * {
    margin-right: 4px !important;
  }

  /* 顶栏标题居中 */
  .header-title,
  .layout-title,
  .navbar-title,
  .app-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    flex: 1;
    text-align: center;
    color: var(--text-main) !important;
  }

  /* 顶栏内 el-button 紧凑 */
  .el-header .el-button,
  .layout-header .el-button,
  .app-header .el-button {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .el-header .el-button .el-icon,
  .layout-header .el-button .el-icon {
    font-size: 16px !important;
  }

  /* 顶栏右侧头像/通知 - 只留图标 */
  .el-header .user-info,
  .el-header .user-name,
  .el-header .header-search,
  .el-header .el-breadcrumb,
  .layout-header .user-info,
  .layout-header .user-name,
  .app-header .user-name {
    display: none !important;
  }

  /* ============================================================
   * 2. 面包屑 - 简化
   * ============================================================ */
  .el-breadcrumb,
  [class*="breadcrumb"] {
    font-size: 12px !important;
    padding: 6px 12px !important;
    background: transparent !important;
  }
  .el-breadcrumb__item__inner,
  .el-breadcrumb__item__separator {
    font-size: 12px !important;
    color: var(--text-light) !important;
  }

  /* ============================================================
   * 3. 主内容区上下间距压缩
   * ============================================================ */
  .el-main,
  .layout-main,
  .app-main,
  [class*="main-content"],
  [class*="page-container"],
  [class*="page-wrapper"] {
    padding: 8px 10px 60px 10px !important;
  }

  /* ============================================================
   * 4. 页面标题区
   * ============================================================ */
  .page-header,
  .page-title-bar,
  [class*="page-header"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  .page-header .page-title,
  .page-title-bar .page-title {
    font-size: 18px !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }
  .page-header .page-desc,
  .page-title-bar .page-desc {
    font-size: 12px !important;
    color: var(--text-light) !important;
  }
  .page-header .page-actions,
  .page-title-bar .page-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ============================================================
   * 5. 工具栏 (toolbar) - 移到顶部 sticky
   * ============================================================ */
  .toolbar,
  .search-bar,
  .filter-bar,
  .query-form,
  .el-form--inline,
  [class*="toolbar"],
  [class*="search-bar"],
  [class*="filter-bar"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  .el-form--inline .el-form-item {
    display: block !important;
    margin: 0 0 8px 0 !important;
  }
  .el-form--inline .el-form-item:last-child { margin-bottom: 0 !important; }
  .el-form--inline .el-form-item__label {
    float: none !important;
    display: block !important;
    text-align: left !important;
    width: auto !important;
    margin-bottom: 4px !important;
    color: var(--text-light) !important;
    font-size: 11px !important;
  }
  .el-form--inline .el-form-item__content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .el-form--inline .el-input,
  .el-form--inline .el-select,
  .el-form--inline .el-date-editor {
    width: 100% !important;
  }

  /* ============================================================
   * 6. 列表区 - 卡片化 (强化版)
   * ============================================================ */
  .list-card,
  .table-card,
  .data-card,
  [class*="list-card"],
  [class*="data-card"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    overflow: hidden;
  }

  /* ============================================================
   * 7. 详情页头部
   * ============================================================ */
  .detail-header,
  .page-detail-header,
  [class*="detail-header"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }
  .detail-header h2,
  .detail-header .title {
    font-size: 18px !important;
    margin: 0 0 6px 0 !important;
    color: var(--text-main) !important;
  }
  .detail-header .meta,
  .detail-header .desc {
    font-size: 12px !important;
    color: var(--text-light) !important;
  }
  .detail-header .actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  /* ============================================================
   * 8. Tabs - 横向滚动不挤压
   * ============================================================ */
  .el-tabs__nav-wrap--scrollable {
    padding: 0 !important;
  }
  .el-tabs__nav-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .el-tabs__nav {
    white-space: nowrap !important;
    display: inline-flex !important;
  }
  .el-tabs__item {
    padding: 0 14px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 13px !important;
  }

  /* ============================================================
   * 9. 固定底部操作栏 (新建/批量操作)
   * ============================================================ */
  .fixed-bottom-actions,
  .bottom-actions,
  .footer-actions,
  [class*="fixed-bottom"],
  [class*="bottom-actions"],
  [class*="footer-actions"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--card-bg) !important;
    border-top: 1px solid var(--border-light) !important;
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1400 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .fixed-bottom-actions .el-button,
  .bottom-actions .el-button {
    margin: 0 !important;
    width: 100% !important;
  }

  /* ============================================================
   * 10. 空状态 / 加载状态
   * ============================================================ */
  .el-empty {
    padding: 40px 16px !important;
  }
  .el-empty__image {
    width: 80px !important;
  }
  .el-empty__description p {
    font-size: 13px !important;
    color: var(--text-light) !important;
  }

  /* ============================================================
   * 11. 浮动操作按钮 (FAB)
   * ============================================================ */
  .fab,
  .float-action,
  [class*="fab"] {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(196, 149, 106, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
    border: none !important;
  }

  /* ============================================================
   * 12. el-tabs 内子内容 padding
   * ============================================================ */
  .el-tab-pane {
    padding-top: 4px !important;
  }

  /* ============================================================
   * 13. 通用滚动容器
   * ============================================================ */
  .scroll-container,
  .scrollable,
  [class*="scroll"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ============================================================
   * 14. 文字大小重置 (兜底, 防止父级 font-size 干扰)
   * ============================================================ */
  .el-card,
  .el-table,
  .el-form {
    font-size: 12px !important;
  }

  /* ============================================================
   * 15. 卡片内表格 (嵌在 Card 里的) - 紧凑
   * ============================================================ */
  .el-card .el-table {
    font-size: 11px !important;
  }
  .el-card .el-table .el-table__cell {
    padding: 3px 0 !important;
  }

  /* ============================================================
   * 16. 抽屉 (Drawer) 子页
   * ============================================================ */
  .el-drawer__header {
    padding: 14px 16px !important;
    margin-bottom: 0 !important;
  }
  .el-drawer__header span {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .el-drawer__body {
    padding: 12px 16px !important;
  }

  /* ============================================================
   * 17. 子页常见 flex 布局修正
   * ============================================================ */
  .row-between,
  .flex-between,
  [class*="flex-between"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ============================================================
   * 18. el-radio-group / el-checkbox-group
   * ============================================================ */
  .el-radio-group, .el-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ===== 极窄屏 (≤ 480px) ===== */
@media (max-width: 480px) {
  .el-header,
  .layout-header,
  .app-header {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 6px !important;
  }
  .header-title,
  .layout-title {
    font-size: 14px !important;
  }
  .el-main,
  .layout-main,
  .app-main {
    padding: 6px 8px 60px 8px !important;
  }
}