/* mobile.css —— 移动端 / iPad 自适应(卡片式 App 风格)
   只在媒体查询里生效,不影响桌面端;颜色一律走 tokens 变量。
   断点:≤1024px(iPad 竖屏)两列栅格 / 视图栏横向滚动 / 留白收紧;
        ≤768px(手机)App 式布局:rail 收成底部标签栏,viewbar 收成顶部横向滚动条。 */

/* ════════ ≤1024px:iPad 竖屏 ════════ */
@media (max-width:1024px){
  /* 两列栅格(覆盖 components.css ≤1280 的单列规则,mobile.css 后加载生效) */
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis.c5{grid-template-columns:repeat(2,1fr)}

  /* 视图栏允许横向滚动 */
  .viewbar{overflow-x:auto}

  /* 主区留白收紧 */
  .page{padding:16px 16px 32px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
}

/* ════════ ≤768px:手机,App 式布局 ════════ */
@media (max-width:768px){
  /* 外壳:单列。minmax(0,1fr) 锁死轨道宽度,防止宽表格/横滑顶栏把页面撑到 1500px */
  .app{grid-template-columns:minmax(0,1fr)}
  .app-body{display:flex;flex-direction:column;min-width:0}
  html,body{max-width:100%;overflow-x:hidden}

  /* rail → 固定底部标签栏(图标 + 小字,56px) */
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:50;order:2;
        flex-direction:row;align-items:center;justify-content:space-around;
        height:56px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));
        border-right:0;border-top:1px solid var(--rail-2)}
  .rail-ava,.rail .rail-sp,.rail .pop{display:none}
  .nav-item{flex:1;width:auto;height:48px;padding:2px 0 0;gap:2px;justify-content:flex-start}
  .nav-item .bdg{top:-1px;right:calc(50% - 24px)}
  .nav-item .lbl{display:block;font-size:10px;line-height:12px;color:var(--t2)}

  /* viewbar → 顶部自动换行面板:标题行 / 站点+新建 / 搜索 / 视图九宫格,全部可见不藏滚动 */
  .viewbar{order:0;flex:none;height:auto;min-width:0;
           display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;
           padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .viewbar .vb-h{flex:1 1 100%;border-bottom:0;margin-bottom:0;padding:0}
  .viewbar .vb-h>.vb-tt>.t{font-size:15px;line-height:20px}
  .viewbar .vb-h>.vb-tt>.s{display:none}
  .viewbar .vb-acts{flex:none}
  .viewbar .vb-search{flex:1 1 100%;margin:0;height:40px}
  .viewbar .vb-cta{flex:none;margin:0 0 0 8px}
  .viewbar .vb-cta .btn{width:auto}
  .viewbar .vb-sel{flex:1 1 auto;min-width:0;height:40px;margin:0}
  .viewbar .vb-g{display:none}
  .viewbar .vb-item{flex:1 1 calc(33.3% - 7px);height:36px;width:auto;margin:0;padding:0 6px;justify-content:center;gap:4px}
  .viewbar .vb-item .cnt{margin-left:0}
  /* 视图栏内下拉菜单:改钉在顶栏下方右侧 */
  .viewbar .pop>.menu.right{position:fixed!important;left:auto!important;right:8px!important;top:56px!important}

  /* 主区:占满剩余高度,底部避让标签栏 */
  .main{order:1;flex:1;min-height:0;min-width:0;padding-bottom:56px}
  .page{padding:12px 12px 72px}
  .page-head{flex-wrap:wrap}
  .ph-actions{width:100%;margin-left:0}

  /* 栅格:KPI 两列卡片,g2 单列,主从布局上下堆叠 */
  .kpis,.kpis.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g2e{grid-template-columns:minmax(0,1fr)}
  .md{grid-template-columns:1fr}
  .master{max-height:280px}
  .tpls,.accs{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}

  /* 表格容器横向滚动(固定列 c-check/c-co 照常生效),不撑破页面 */
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 卡片内边距与圆角按 tokens 收紧 */
  .kpi{padding:12px 14px}
  .card-b{padding:12px}
  .card-h{padding:12px 14px}
  .kpi>.v>strong{font-size:20px;line-height:26px}
  .mask{padding:12px}
  .dlg-b{padding:14px}
  .drawer{width:100vw;border-left:0}

  /* 触控目标 ≥40px */
  .btn{height:40px}
  .btn.sm{height:40px}
  .btn.txt{height:40px}
  .inp{height:40px}
  .inp-sm{height:40px}
  .vb-search{height:40px}
  .ibtn{width:38px;height:38px}
  .chip{height:36px}
}

/* 页头元信息与卡片标题在窄屏下换行,避免竖排文字 */
@media (max-width:768px){
  .page-meta{flex-wrap:wrap;row-gap:6px}
  .page-meta>.t3{flex:1 1 100%;white-space:normal}
  .card-h{flex-wrap:wrap;row-gap:2px}
  .viewbar .vb-item{font-size:12px;white-space:nowrap;overflow:hidden}
}