/* =============================================================================
   mobile.css — 移动端响应式（375 / 414 / 768 三档，触控热区 ≥44px）
   依赖 base.css / app.css 的设计令牌；桌面端不生效。
   T01 完整实现版（覆盖占位版，并保留占位版类名以兼容并行开发引用）。
   ========================================================================== */

/* ---------- 占位版兼容类（保持原语义，供其他泳道引用） ---------- */
.mobile-tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--c-surface, #fff); border-top: 1px solid var(--c-line, #e8e2d4);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tabbar .tab-item {
  flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: 11px; color: var(--c-text-3, #8b857c); text-decoration: none;
}
.mobile-tabbar .tab-item.active { color: var(--c-primary, #b8860b); }
.mobile-tabbar .tab-item .badge-dot { top: 4px; right: 50%; margin-right: -18px; }
.mode-flag { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; vertical-align: middle; border: 1px solid transparent; font-weight: 600; }
.mode-flag-LIVE { background: #fdeaea; color: #cf3a3a; border-color: #f2cfcf; }
.mode-flag-SANDBOX { background: #fdf3e2; color: #d98324; border-color: #f4ddba; }
.mode-flag-SIM { background: #f0efe9; color: #8b857c; border-color: #e3ded4; }
.gantt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.badge-dot { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: #cf3a3a; color: #fff; font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px; }
.split-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* ---------- ≤768px：平板 / 手机 ---------- */
@media (max-width: 768px) {

  /* 外壳：隐藏侧栏，启用底部 Tab */
  .app-shell,
  .app-shell.is-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sh-3);
  }
  .app-shell.is-mobile-open .sidebar { transform: none; }
  body[data-end] .mobile-tabbar { display: flex; }
  .content { padding: var(--s3) var(--s3) calc(70px + env(safe-area-inset-bottom)); }

  /* 顶栏收紧 */
  .topbar { padding: 0 var(--s3); gap: var(--s2); height: 52px; }
  .topbar-title { font-size: var(--f-md); }
  .topbar-crumb { display: none; }
  .topbar-toggle { width: 44px; height: 44px; }

  /* 页头与工具栏 */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-title { font-size: var(--f-lg); }
  .page-toolbar { width: 100%; }
  .page-toolbar .btn { flex: 1 1 auto; }

  /* 触控热区 ≥44px */
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn-sm { min-height: 38px; padding: 8px 12px; }
  .input, .select, .textarea { min-height: 44px; font-size: 16px; /* 防 iOS 聚焦缩放 */ }
  .tab { padding: 12px 14px; min-height: 44px; }
  .menu-item { padding: 13px var(--s4); }
  .modal-close { width: 44px; height: 44px; }
  .pager-btn { min-width: 40px; height: 40px; }
  .kanban-card { padding: 12px; }
  .todo-item { min-height: 48px; }
  .notice-panel-item { min-height: 52px; }
  .login-acc { min-height: 48px; }

  /* KPI 两列 */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kpi-value { font-size: var(--f-xl); }
  .kpi-card { padding: var(--s3); }

  /* 表格：卡片化容器 + 横向滚动，首列吸左 */
  .table-wrap { border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
  .table { min-width: 520px; }
  .table th, .table td { padding: 10px 8px; font-size: var(--f-xs); }
  .table th:first-child, .table td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; }

  /* 表单 / 详情单列 */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .info-grid, .info-grid.cols-3 { grid-template-columns: 1fr; }

  /* 甘特横向内滚 */
  .gantt { min-width: 640px; }
  .gantt-row-label { width: 110px; }

  /* 弹窗 / 抽屉全屏化 */
  .modal-mask { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-bd { padding: var(--s4); }
  .modal-ft { padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .drawer { width: 100%; max-width: 100vw; }

  /* v2 组件降级 */
  .section-admin { grid-template-columns: 1fr; }
  .cost-drill-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-form { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .batch-bar { flex-wrap: wrap; }
  .report-filter .form-row { min-width: calc(50% - var(--s3)); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .login-card { padding: var(--s5) var(--s4); }
}

/* ---------- ≤480px：小屏手机（375 档） ---------- */
@media (max-width: 480px) {
  :root { --f-md: 14px; }

  .content { padding: var(--s2) var(--s2) calc(66px + env(safe-area-inset-bottom)); }
  .kpi-value { font-size: 20px; }
  .kpi-card { padding: var(--s2) var(--s3); }
  .card-bd { padding: var(--s3); }
  .card-hd { padding: var(--s2) var(--s3); }

  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar .btn { width: 100%; }

  .gantt { min-width: 560px; }
  .table th, .table td { padding: 9px 6px; font-size: 11px; }
  .mobile-tabbar .tab-item { font-size: 10px; }
}

/* ---------- 横屏矮窗：隐藏底部 Tab ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mobile-tabbar { display: none; }
  .content { padding-bottom: var(--s3); }
}

/* ---------- 打印 ---------- */
@media print {
  .mobile-tabbar, .sidebar, .topbar-end, .topbar-groups { display: none !important; }
}