/* =====================================================================
   手机端基础样式（万联创孵 / 万联AI选品）
   ---------------------------------------------------------------------
   设计原则（对桌面零影响）：
   1. 所有规则都包裹在 @media (max-width: Npx) 内，仅在窄屏生效；
   2. 桌面（>800px）完全走各页面原有内联样式，本文件不参与；
   3. 本 <link> 放在各页面 </head> 之前（即内联 <style> 之后），
      同等选择器权重下「后来者胜」，可正确覆盖页面内的响应式规则；
   4. 新增的手机专属元素默认 display:none，仅在本文件媒体查询内 display，
      桌面永远看不到。
   ===================================================================== */

/* ---------- 0. 全局底层（防横向溢出 / 防 iOS 误缩放 / 触控优化 / 去数字箭头） ---------- */
@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }
  * { -webkit-tap-highlight-color: transparent; }
  img { max-width: 100%; height: auto; }
  /* iOS 聚焦输入框会自动放大页面，字体≥16px 可避免 */
  input, textarea, select, button { font-size: 16px; }
  button, .btn, .btn-primary, .btn-ghost, .btn-nav-ghost,
  .wb-tab, .mod-card, a[onclick], [role="button"] {
    touch-action: manipulation; /* 去除 300ms 点击延迟 */
  }
}

/* ---------- 1. 全局导航 .t-nav（所有页面通用） ---------- */
@media (max-width: 800px) {
  .t-nav {
    height: 52px;
    padding: 0 12px;
    min-width: 0;                 /* 去掉桌面 min-width:320px，避免撑出横向滚动 */
    gap: 8px;
  }
  .t-nav .brand { font-size: 15px; }
  .t-nav .brand img { height: 34px; }
  .t-nav .links {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox 隐藏滚动条 */
  }
  .t-nav .links::-webkit-scrollbar { display: none; }  /* WebKit 隐藏 */
  .t-nav .links a { font-size: 13px; padding: 6px 2px; }
  .t-nav .right { gap: 6px; margin-left: 8px; }
  .nav-user-info { display: none; }   /* 手机上省空间，登录态已在功能内体现 */
  .btn-nav-ghost { padding: 6px 10px; font-size: 12px; }
}

/* ---------- 2. 工作台 Tab 导航 .wb-tabs ---------- */
@media (max-width: 800px) {
  .wb-tabs {
    position: sticky;
    top: 52px;                   /* 吸顶，跟随全局导航 */
    z-index: 150;
    background: #F5F5F7;
    padding: 8px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wb-tabs::-webkit-scrollbar { display: none; }
  .wb-tab { padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }
  .wb-tab .tab-icon { font-size: 15px; }

  .tab-panel { padding: 14px 14px 56px; max-width: 100%; }
  .wrap { padding: 0; max-width: 100%; }
}

/* ---------- 3. 模块卡片网格：手机单列大卡（≤600 才单列，平板保留两列） ---------- */
@media (max-width: 600px) {
  .modules-grid {
    grid-template-columns: 1fr;
    padding: 14px 14px 40px;
    gap: 14px;
    max-width: 100%;
  }
  .mod-card { padding: 18px; }
  .mod-card .mc-icon { width: 46px; height: 46px; font-size: 21px; margin-bottom: 12px; }
  .mod-card .mc-title { font-size: 16px; }
  .mod-card .mc-desc { font-size: 13px; }
  .mod-card .mc-action { font-size: 14px; margin-top: 14px; }
  .mod-card .mc-tag { top: 12px; right: 12px; }
}

/* ---------- 4. 通用按钮在手机上更易点 ---------- */
@media (max-width: 800px) {
  .btn-primary, .btn-ghost, .btn-nav-ghost {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .toolbar { gap: 8px; }
  .toolbar .btn-primary, .toolbar .btn-ghost { flex: 1 1 auto; }
}

/* ---------- 5. AI 修图页 ai-image-tool.html ---------- */
@media (max-width: 800px) {
  /* 左侧参数区(400px固定)在手机上会溢出，改为上下单列 */
  .work-area {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  /* 顶部工具切换条：横滑即可，按钮别太小 */
  .tool-sidebar { padding: 6px 10px; gap: 2px; }
  .tool-btn { padding: 8px 10px; font-size: 13px; flex: 0 0 auto; }
  /* 参考图网格与结果网格在窄屏用更小的列宽，避免横向溢出 */
  .right-panel .image-grid-wrap { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .right-preview #resultArea { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .right-preview .res-card > img { min-height: 160px; max-height: 280px; }
  /* 操作按钮在手机上更舒展 */
  .result-bar { gap: 8px; }
  .result-bar .btn { flex: 1 1 auto; }
  /* 参数控件（引擎/强度等）在手机上占满一行，更易点 */
  .preset-row { gap: 6px; }
  .simple-opts { gap: 8px; }
  .opt-radio { padding: 8px 12px; }
}

/* ---------- 6. 工作台内部功能面板（周报 / 排名 / 成本 / 美客多） ---------- */
/* 这些面板在工作台内嵌，桌面端是双栏/宽表格，手机上需重排，否则「功能找不到」 */
@media (max-width: 800px) {

  /* 6.1 周报面板：计划/完成两栏 → 单列堆叠 */
  .wk-cols { grid-template-columns: 1fr; gap: 12px; }
  .wk-col { min-width: 0; }
  .wk-col-save { flex-wrap: wrap; }
  .wk-save { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .wk-save .form-err { margin-right: 0; width: 100%; }

  /* 6.2 排名跟踪面板：输入框 min-width:150px 会撑爆，改为占满整行 */
  .rk-wrap { padding: 12px 12px 32px; }
  .rk-toolbar { gap: 8px; }
  .rk-input, .rk-select {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
    height: 42px;            /* 触控友好 */
    font-size: 16px;
  }
  .rk-prod { margin-bottom: 12px; }
  .rk-prod-head { padding: 12px 14px; gap: 8px; }
  .rk-prod-name { font-size: 14px; }

  /* 6.3 成本核算面板：工具栏 nowrap 会溢出 → 允许换行 */
  .cost-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cost-tb-center { flex: 1 1 100%; }
  .cost-tb-right { flex-wrap: wrap; }
  /* 宽表格本身在 .cost-table-scroll 内横向滚动即可，确保不撑出页面 */
  .cost-table-scroll, .tax-table-wrap, .cost-table-wrap, .res-detail-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cost-table, .tax-table, .res-detail-table { width: max-content; min-width: 100%; }
  /* 成本核算内联输入控件在手机上更舒展 */
  .cinput-wrap { flex-wrap: wrap; gap: 6px; }
  .cinput-wrap input, .cinput-wrap select { min-width: 0; width: 100%; height: 42px; font-size: 16px; }

  /* 6.4 美客多（墨西哥）核算：复用成本表格规则，仅收一下边距 */
  .mlmx-rate-bar { padding: 10px 12px; gap: 8px; }
  .mlmx-rate-title { font-size: 13px; }
  .mlmx-note { padding: 14px 16px; margin-top: 16px; }
}

/* ---------- 7. FBA 出货系统（工作台 Tab + iframe 内页面） ---------- */
@media (max-width: 800px) {
  /* 工作台外壳：FBA 面板 iframe 高度随手机视口（覆盖内联默认值，避免顶到吸顶 Tab） */
  #panel-fba iframe { height: calc(100vh - 150px) !important; }

  /* FBA 内页 Tab：可横向滚动、吸顶 */
  .tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg, #F5F5F7);
    padding-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* FBA 页面：筛选栏字段两列占满，避免横向溢出 */
  .filters { padding: 10px 12px; gap: 8px; }
  .filters .fld { flex: 1 0 46%; }
  .filters .fld input, .filters .fld select { width: 100%; min-width: 0; }
  .filters .btn { flex: 1 0 46%; }

  /* 统计卡片字号略缩，2 列已在页面内 @media 处理 */
  .stat { padding: 12px 14px; }
  .stat .v { font-size: 18px; }

  /* 货件明细行：手机上单行横向滚动，标签在上 */
  .card { padding: 12px; }
  .row-card { padding: 10px; }
  .hint { font-size: 12px; }
  .row-single { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .fld-inline > label { font-size: 10px; }
  .row-single .row-num { margin-top: 14px; }
  .row-single .fld-del { margin-left: 2px; }

  /* 底部保存条贴底并留安全区 */
  .add-actions {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .add-actions .btn { flex: 1 1 auto; }

  /* 实时计算预览区紧凑 */
  .preview { gap: 8px 14px; font-size: 12px; }

  /* 弹窗底部按钮舒展 */
  .modal-foot .btn { flex: 1 1 auto; }

  /* FBA 下拉配置面板：手机上单列纵向 */
  .dd-config-panel { width: calc(100vw - 28px); right: -8px; padding: 12px; }
  .dd-config-grid { grid-template-columns: 1fr; gap: 12px; }
  .dd-config-foot .btn { flex: 1 1 auto; }
  .pg-head { flex-direction: column; align-items: flex-start; }
  .head-actions { width: 100%; justify-content: space-between; }
}