/* ============================================================
   咖莱翼 · 移动端自适应层（MVP-阶段5）
   - 增量样式：在 style.css 之后加载，仅小屏生效，PC 布局零影响
   - rem 基准：html 根字号由 index.html 内联脚本按视口设置
     （375px→10px 起，750px+→20px 封顶），关键尺寸用 rem 表达
   - flex/grid：多列转单列、导航/步骤条/平台页签横向滚动
   - 触屏：按钮/输入框最小触控高度，表格横向滚动
   ============================================================ */

@media (max-width: 768px) {
  :root { --radius: 10px; }
  body { font-size: .875rem; } /* 14px @20px root */

  /* ---------- 容器与卡片 ---------- */
  .container { padding: .8rem; }
  .card { padding: 1rem .9rem; margin-bottom: .8rem; border-radius: var(--radius); }
  .card-title { font-size: 1rem; }

  /* ---------- 表单：多列转单列 + 触屏输入 ---------- */
  .form-grid { grid-template-columns: 1fr; gap: .6rem; }
  .form-group { margin-bottom: .7rem; }
  .form-group label { font-size: .875rem; }
  .form-group input, .form-group select, .form-group textarea {
    min-height: 2.75rem;          /* 44px 触控目标 */
    font-size: 1rem;              /* 避免 iOS 聚焦缩放 */
  }
  .item-row { gap: .4rem; }
  .slider-group input[type="range"] { height: 2.2rem; }

  /* ---------- 按钮：触屏尺寸 ---------- */
  .btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9375rem; }
  .btn-sm { min-height: 2.4rem; padding: .4rem .7rem; font-size: .875rem; }
  .btn-group { flex-wrap: wrap; gap: .5rem; }
  .btn-group .btn { flex: 1 1 auto; min-width: 40%; }

  /* ---------- 表格：横向滚动（父级 .table-wrap 已 overflow:auto） ---------- */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap .data-table, .table-wrap .config-table { min-width: 34rem; }
  .data-table, .config-table { font-size: .8125rem; }
  .data-table th, .data-table td, .config-table th, .config-table td { padding: .5rem .55rem; }
  .data-table td, .config-table td { white-space: nowrap; }

  /* ---------- 应用外壳：顶栏保持 + 左子栏转顶部横向条 ---------- */
  .app-gnav { padding: 0 .8rem; gap: .6rem; }
  .gnav-brand-sub { display: none; }      /* 移动端省空间 */
  .gnav-user-info { display: none; }      /* 移动端只留头像 */
  .app-body { flex-direction: column; }
  .app-subnav {
    position: static;          /* 小屏不与页头抢 sticky 位置，页头独占吸顶 */
    top: auto;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sb-nav {
    flex-direction: row;
    gap: .4rem;
    padding: .5rem .8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sb-item { flex: 0 0 auto; padding: .5rem .7rem; font-size: .875rem; min-height: 2.5rem; }
  .sb-spacer { display: none; }
  /* 小屏子栏已横向铺开，折叠无意义 → 隐藏开关
     （shell.css 的折叠态规则本身已包在 min-width:769px 里，不会打到小屏） */
  .sb-collapse { display: none; }

  .page-head {
    flex: 0 0 auto;
    min-height: 3.4rem;
    padding: .5rem .8rem;
    flex-wrap: wrap;
  }
  .page-title { font-size: 1.05rem; white-space: normal; }
  .page-actions { gap: .4rem; }
  /* 小屏子栏不再吸顶，撤销 shell.css 的 demo 横幅让位（mobile.css 后加载，优先级更高） */
  body.demo-env .app-subnav { top: auto; height: auto; }

  /* ---------- 步骤条 / 平台页签 横向滚动 ---------- */
  .steps { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .step { min-width: 6.5rem; white-space: nowrap; }
  .platform-tabs, .submodel-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .platform-tab, .submodel-tab { white-space: nowrap; }

  /* ---------- 统计卡 ---------- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat-card { padding: .8rem .7rem; }

  /* ---------- 登录框 ---------- */
  .login-box { padding: 1.6rem 1.3rem; width: 100%; max-width: 21rem; }
  .login-title { font-size: 1.15rem; }

  /* ---------- 上传 / 模态 ---------- */
  .upload-zone { padding: 1rem; }
  .modal-content { width: 100%; max-width: 22rem; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 顶部演示横幅 ---------- */
  .demo-banner { height: 2.1rem; line-height: 2.1rem; font-size: .75rem; }

  /* ---------- 增强3-B：利润看板 ---------- */
  .pb-query-grid { grid-template-columns: 1fr; gap: .6rem; }
  .pb-actions .btn { flex: 1 1 auto; min-width: 45%; }
  .pb-metrics { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .pb-metric { padding: .55rem .6rem; }
  .pb-metric-val { font-size: 1.05rem; }
  .pb-metric-label { font-size: .6875rem; }
  .pb-import-zone { padding: 1rem .8rem; }
  .pb-platform-card { padding: .8rem .85rem; }
  .pb-chip { font-size: .75rem; padding: .3rem .6rem; }
  .pb-combined { padding: .8rem .85rem; }
  .pb-combined-head { font-size: .9375rem; }
}

@media (max-width: 480px) {
  .btn-group .btn { min-width: 100%; }  /* 超小屏按钮整行排列 */
  .page-sub { display: none; }
  .step { min-width: 5.5rem; }

  /* ---------- 增强3-B：利润看板 超小屏 ---------- */
  .pb-query-box { padding: .8rem; }
  .pb-metrics { grid-template-columns: repeat(2, 1fr); }
  .pb-metric-val { font-size: 1.05rem; }
  .pb-platform-head { font-size: .875rem; }
  .pb-export-bar .btn { flex: 1 1 auto; min-width: 40%; }
}