/* ============================================================
   一帧设计 · 移动端布局优化（仅窄屏生效，不影响电脑端）
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 全局 ---------- */
  body { font-size: 13px !important; -webkit-text-size-adjust: 100%; }
  .page, .ds-page { padding-bottom: 64px !important; }

  /* ---------- 顶部 ---------- */
  .header { padding: 8px 10px !important; min-height: 46px !important; height: auto !important; }
  .header-top { gap: 4px !important; }
  .header .brand { flex: 0 1 auto !important; min-width: 0 !important; gap: 6px !important; }
  .header .brand img { width: 24px !important; height: 24px !important; flex: none !important; }
  .header .brand h1 {
    font-size: 12.5px !important; font-weight: 600 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 30vw !important; margin: 0 !important; line-height: 1.3 !important;
  }
  .header .brand p, .header .subtitle { display: none !important; }
  .header .header-right { flex: 0 0 auto !important; gap: 6px !important; flex-wrap: nowrap !important; }
  .header .header-right a, .header .header-right .btn, .header-right .btn, .header .btn { font-size: 12px !important; padding: 5px 9px !important; }
  .header .user-info #userName, .header .user-info .user-name, .header .menu-arrow { display: none !important; }
  .header .user-info, .header .user-box { gap: 4px !important; }
  .header .user-box, .header .user-avatar, .header .avatar { width: 26px !important; height: 26px !important; font-size: 11px !important; }
  .header .header-right .user-menu-wrap { margin-left: 0 !important; }
  .header .brand > div { min-width: 0 !important; flex: 1 1 auto !important; }
  .header .header-right .dash-edit-icon { width: 26px !important; height: 26px !important; flex: none !important; }


  /* ---------- 主容器 / 卡片 ---------- */
  .container { padding: 10px 8px !important; }
  .ds-page .container { margin-left: 0 !important; padding-left: 8px !important; padding-right: 8px !important; }
  .main, .content, .page-wrap, .main-content { margin-left: 0 !important; padding: 8px !important; }
  /* 业务/财务/制作/行政 统计行：手机 2 列 */
  .stats-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stats-row .stat-card { padding: 10px !important; border-radius: 10px !important; }
  .stats-row .stat-card .value { font-size: 17px !important; }
  .stats-row .stat-card .change { font-size: 11px !important; color: #888 !important; }
  .card { padding: 10px !important; margin-bottom: 10px !important; border-radius: 10px !important; }
  .card .card-title, .card h3, .card > .toolbar > span, .card .toolbar span:first-child { font-size: 14px !important; }
  .card .sec-t { font-size: 12px !important; }

  /* ---------- 工具栏 / 按钮 ---------- */
  .toolbar { flex-wrap: wrap !important; gap: 6px !important; }
  .toolbar input, .toolbar select { font-size: 12px !important; max-width: 100% !important; }
  .btn { padding: 6px 10px !important; font-size: 12px !important; border-radius: 6px !important; }
  .btn-sm, .btn-xs { padding: 4px 8px !important; font-size: 11px !important; }

  /* ---------- 表格：卡片内横向滑动，避免挤压 ---------- */
  .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* 任意表格的直接父容器手机可横向滑动（无 .card 包裹的宽表格） */
  div:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 560px !important; width: 100% !important; font-size: 12px !important; }
  table th, table td { padding: 6px 8px !important; white-space: nowrap; }
  .page > .card > table { min-width: 100% !important; }
  #teamDesignerTable { min-width: 100% !important; }

  /* ---------- 表单 ---------- */
  .form-row, form > div, .inline-form { flex-wrap: wrap !important; gap: 6px !important; }
  input[type=text], input[type=date], input[type=time], input[type=number], input[type=month], input[type=search], select, textarea {
    font-size: 13px !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  input[type=date], input[type=time], input[type=month], .dpick-auto-input { min-width: 0 !important; width: auto !important; }

  /* ---------- 网格改双列 ---------- */
  .grid, .card-grid, .stat-grid, .dash-grid, .overview-cards, .stat-cards, .form-grid, .detail-grid, .proj-grid, .prog-grid, .fin-hero-cards {
    grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;
  }
  .prog-col { padding: 10px !important; min-height: 0 !important; border-radius: 10px !important; }
  .prog-col .pc-title { font-size: 13px !important; margin-bottom: 8px !important; }
  .prog-col .pc-item { padding: 8px 10px !important; font-size: 12px !important; }
  .grid > *, .card-grid > * { min-width: 0 !important; }

  /* ---------- 侧边栏（业务/行政/制作）→ 顶部横向滚动导航 ---------- */
  .app-layout { flex-direction: column !important; }
  .app-layout .sidebar { width: 100% !important; }
  .app-layout .main-content { flex: none !important; width: 100% !important; }
  .sidebar {
    position: static !important; width: 100% !important; height: auto !important;
    display: flex !important; flex-direction: row !important; overflow-x: auto !important;
    padding: 6px 4px !important; border-right: none !important; border-bottom: 1px solid #eee !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .nav-item {
    flex: 0 0 auto !important; flex-direction: column !important; justify-content: center !important;
    padding: 6px 12px !important; font-size: 11px !important; gap: 2px !important;
  }
  .sidebar .nav-item .sico { width: 18px !important; height: 18px !important; margin: 0 !important; }
  .sidebar .nav-item span { font-size: 11px !important; }

  /* ---------- 顶部/底部 tab（设计端/管理端等）：让各页面自带规则生效，仅兜底等分不强制不收缩 ---------- */
  .tabs { display: flex !important; padding: 0 2px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .tabs .tab {
    flex: 1 1 0 !important; justify-content: center !important;
    font-size: 11px !important; padding: 8px 2px !important; gap: 3px !important;
    white-space: nowrap; min-width: 0 !important;
  }
  .tabs .tab .sico { width: 16px !important; height: 16px !important; }
  /* 导航项很多的端口（admin/finance）恢复自带横向滚动：不在此覆盖 */
  .adm-page .tabs .tab, .ds-page .tabs .tab, .fin-page .tabs .tab {
    flex: none !important; min-width: 68px !important; padding: 6px 2px 8px !important;
    font-size: 11.5px !important; height: 62px !important; justify-content: center !important; gap: 4px !important;
  }

  /* ---------- 底部 tab（其他端口） ---------- */
  .tab-bar, .bottom-nav, .bottom-tab-bar {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 999 !important; padding: 4px 0 !important; background: #fff !important;
    border-top: 1px solid #eee !important; box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
  }
  .tab-bar .tab, .bottom-nav .tab, .bottom-tab-bar .tab { flex: 1 !important; font-size: 11px !important; padding: 6px 2px !important; }
  .tab-bar .tab .sico, .bottom-nav .tab .sico { width: 18px !important; height: 18px !important; }

  /* ---------- 弹窗 ---------- */
  .modal, .modal-overlay .modal, .modal-dialog {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    height: 100% !important; max-height: 100% !important; border-radius: 0 !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  .modal .modal-body { padding: 12px !important; }

  /* ---------- 选择页 ---------- */
  .portal-grid { grid-template-columns: 1fr !important; gap: 10px !important; padding: 10px !important; }
  .portal-card { padding: 14px !important; }
  .portal-header h1 { font-size: 18px !important; }

  /* ---------- 打卡页 ---------- */
  .today-stat { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .today-stat .ts { padding: 10px 6px !important; }
  .today-stat .ts .v { font-size: 15px !important; }

  /* ---------- 团队统计（设计总监/组长）手机端 ---------- */
  #page-team h2 { font-size: 16px !important; }
  #page-team > div:first-child { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #page-team > div:first-child > div { width: 100% !important; }
  #teamMonthSelect { flex: 1 !important; min-width: 0 !important; }
  #teamOverviewCards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #teamOverviewCards > div { padding: 10px !important; border-radius: 10px !important; }
  #teamOverviewCards .num, #teamOverviewCards .val, #teamOverviewCards .value { font-size: 16px !important; }
  #teamOverviewCards .label, #teamOverviewCards .lbl { font-size: 11px !important; }
  /* 排名表：手机隐藏次要列（岗位/工时/提成比例），保留核心列适配屏宽 */
  #teamDesignerTable th:nth-child(3), #teamDesignerTable td:nth-child(3),
  #teamDesignerTable th:nth-child(5), #teamDesignerTable td:nth-child(5),
  #teamDesignerTable th:nth-child(7), #teamDesignerTable td:nth-child(7) { display: none !important; }
  #teamDesignerTable { min-width: 100% !important; font-size: 12px !important; }
  #teamDesignerTable th, #teamDesignerTable td { padding: 8px 6px !important; }
  #page-team > div[style*="background:#fff"] { padding: 12px !important; border-radius: 12px !important; }
  #page-team > div[style*="background:#fff"] h3 { font-size: 14px !important; margin-bottom: 10px !important; }

  /* ---------- 业务/管理 客户表：手机隐藏次要列（保留数据语义色） ---------- */
  table:has(> tbody#customerTableBody) thead th:nth-child(4),
  table:has(> tbody#customerTableBody) thead th:nth-child(6),
  #customerTableBody td:nth-child(4),
  #customerTableBody td:nth-child(6) { display: none !important; }
  #customerTableBody td:last-child { white-space: nowrap !important; }
  #customerTableBody td:last-child .btn { padding: 3px 6px !important; font-size: 11px !important; margin: 1px 0 !important; }

  /* ---------- 卡片文字：中文不拆字、标签单行省略、数值单位不拆 ---------- */
  .card, .dash-todo, .dash-stat, .stat-card, .proj-card, .proj-item-card, .card-body,
  [class*="card-body"], [class*="card-title"], .dt-d, .dm-bar, .flow-step {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  .ds-label, .card-title, .proj-card-name, [class*="card-title"] {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .ds-val, .proj-card-amt, [class*="card-amt"], .stat-card .val {
    white-space: nowrap !important;
  }
  .dt-d span { white-space: nowrap !important; }
  .dt-t { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* 流程看板：手机 2 列自适应，标签/数值单行 */
  #dashBoard > div[style*="display:flex"] { flex-wrap: wrap !important; gap: 10px !important; }
  #dashBoard > div[style*="display:flex"] > div { flex: 1 1 45% !important; min-width: 0 !important; padding: 12px 10px !important; }
  #dashBoard > div[style*="display:flex"] > div > div { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* ---------- select 选择页：标题与常用查询标签手机适配 ---------- */
  .portal-header h1 { font-size: 20px !important; letter-spacing: 2px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    max-width: 92vw !important; }
  .quick-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .quick-grid a, .quick-grid button, .quick-grid .quick-item, .quick-grid div {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    font-size: 12px !important; word-break: keep-all !important; }

  /* ---------- 财务：工具栏换行、按钮不拆、表格滚动兜底 ---------- */
  .fin-page button, .fin-page .btn { white-space: nowrap !important; }
  .fin-page [style*="display:flex"] { flex-wrap: wrap !important; }
  .fin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ---------- 待收/待办卡：手机单列全宽，内容不再被挤压拆行 ---------- */
  #dashTodo { grid-template-columns: 1fr !important; }
  #dashTodo .dash-todo { width: 100% !important; align-items: flex-start !important; }
  #dashTodo .dt-ic { width: 34px !important; height: 34px !important; font-size: 12px !important; border-radius: 10px !important; }
  #dashTodo .dt-body { min-width: 0 !important; flex: 1 !important; }
  #dashTodo .dt-t { font-size: 14px !important; }
  #dashTodo .dt-d { font-size: 12px !important; }
  #dashTodo .dt-btn { flex-shrink: 0 !important; font-size: 12px !important; padding: 6px 12px !important; }

  /* ---------- 统计卡片（各端口统一） ---------- */
  .stat-card, .report-card { padding: 10px !important; }
  .stat-card .num, .report-card .num { font-size: 18px !important; }
  .stat-card .label, .report-card .label { font-size: 11px !important; }

  /* ---------- 工作台/仪表盘 ---------- */
  .dash-hero, .hero-card { flex-direction: column !important; align-items: stretch !important; }
  .dash-todo { flex-wrap: wrap !important; gap: 6px !important; }

  /* ---------- 细节 ---------- */
  .desktop-only, .hide-mobile { display: none !important; }
  .badge, .tag { font-size: 11px !important; padding: 2px 6px !important; }
  .role-title { font-size: 15px !important; }
  .role-meta { flex-wrap: wrap !important; gap: 4px !important; }
  .sec { margin-bottom: 8px !important; }
  .sec-b { font-size: 12px !important; line-height: 1.7 !important; }
  .page-title { font-size: 16px !important; }
  .page-title + div, .page-desc { font-size: 12px !important; }
}

/* ---------- 客户管理卡片：窄屏自适应（手机 2 列紧凑、小平板 3 列） ---------- */
@media (max-width: 640px){
  .cust-parent-grid { grid-template-columns: 1fr !important; }
  .cust-children, .indep-wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cust-children .item-card, .indep-wrap .item-card { padding: 11px !important; }
  .cust-children .item-stats, .indep-wrap .item-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2px 4px !important; margin-top: 8px !important; }
  .cust-children .item-stats .stat-item, .indep-wrap .item-stats .stat-item { min-width: 0 !important; padding: 0 !important; }
  .cust-children .item-stats .k, .indep-wrap .item-stats .k { font-size: 9px !important; }
  .cust-children .item-stats .v, .indep-wrap .item-stats .v { font-size: 11px !important; }
  .cust-children .item-name, .indep-wrap .item-name { font-size: 13px !important; }
  .cust-children .contact-tag, .indep-wrap .contact-tag { font-size: 10px !important; }
  .cust-children .item-actions, .indep-wrap .item-actions { flex-wrap: wrap !important; gap: 4px !important; }
  .cust-children .item-actions .btn, .indep-wrap .item-actions .btn { padding: 3px 8px !important; font-size: 11px !important; }
  .cust-children { margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px){
  .cust-parent-grid, .cust-children, .indep-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}