/* ============================================================
   styles-ui-mobile-pages.css — 手机端 14 页模板视觉合并
   映射现有 dpg-page / pot-page section，保留全部 DOM ID
   来源：手机端ui模板/* /code.html + 标准手机端组件.html
   ============================================================ */

@media screen and (max-width: 768px) {
  /* ---- 全局页面壳 ---- */
  body.mob-shell .dpg-page,
  body.mob-shell .pot-page {
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
  }

  body.mob-shell .dpg-page .dpg-page-header,
  body.mob-shell .pot-page .pot-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }

  body.mob-shell .dpg-page .dpg-page-title,
  body.mob-shell .pot-page .pot-page-title {
    font-size: 1.25rem;
    color: #0f172a;
  }

  body.mob-shell .dpg-page .dpg-page-subtitle,
  body.mob-shell .pot-page .pot-page-subtitle {
    color: #64748b;
    font-size: 13px;
  }

  body.mob-shell .dpg-page .dpg-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* ---- 按钮（模板 touch） ---- */
  body.mob-shell .dpg-btn-primary,
  body.mob-shell .pot-btn-primary,
  body.mob-shell .btn-primary {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #2563eb !important;
    font-size: 14px;
    font-weight: 500;
  }

  body.mob-shell .dpg-btn-outline,
  body.mob-shell .pot-btn-outline,
  body.mob-shell .btn-secondary {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14px;
  }

  /* ---- 统计卡片（首页仪表盘 / 财务概览） ---- */
  body.mob-shell .dpg-stats-grid,
  body.mob-shell .pot-stats-grid,
  body.mob-shell .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  body.mob-shell .dpg-stat-card,
  body.mob-shell .pot-stat-card,
  body.mob-shell .stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: none !important;
  }

  body.mob-shell .dpg-stat-value,
  body.mob-shell .pot-stat-value,
  body.mob-shell .stat-value {
    font-size: 1.35rem !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
  }

  body.mob-shell .dpg-stat-label,
  body.mob-shell .stat-label {
    color: #64748b !important;
    font-size: 11px !important;
  }

  /* ---- 筛选栏 ---- */
  body.mob-shell .dpg-filter-bar,
  body.mob-shell .dpg-category-bar,
  body.mob-shell .filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    gap: 10px;
  }

  body.mob-shell .dpg-filter-field select,
  body.mob-shell .filter-bar select {
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
  }

  body.mob-shell .category-btn {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12px;
  }

  body.mob-shell .category-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }

  /* ---- 表格 → 横向滚动卡片容器 ---- */
  body.mob-shell .dpg-table-wrap,
  body.mob-shell .table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }

  body.mob-shell .data-table {
    font-size: 12px;
    min-width: 640px;
  }

  body.mob-shell .data-table thead th {
    background: #f1f5f9 !important;
    color: #64748b !important;
    padding: 10px 12px !important;
    white-space: nowrap;
  }

  body.mob-shell .data-table tbody td {
    padding: 10px 12px !important;
    color: #0f172a !important;
    background: #fff !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  /* ---- 项目列表 / 合同 / 材料等列表页卡片感 ---- */
  body.mob-shell #projectsTableBody tr,
  body.mob-shell #contractsTableBody tr,
  body.mob-shell #materialsTableBody tr,
  body.mob-shell #laborTableBody tr,
  body.mob-shell #expenseTableBody tr,
  body.mob-shell #equipmentTableBody tr,
  body.mob-shell #procurementTableBody tr {
    border-bottom: 1px solid #f1f5f9;
  }

  /* ---- 项目资料：页头操作区不被底栏遮挡 ---- */
  body.mob-shell .dpg-page--documents .dpg-page-actions {
    position: relative;
    z-index: 1;
    padding-bottom: 4px;
  }

  body.mob-shell .dpg-page--documents .dpg-page-actions .dpg-btn-primary,
  body.mob-shell .dpg-page--documents .dpg-page-actions .dpg-btn-outline {
    flex: 1 1 auto;
    min-width: calc(50% - 6px);
  }

  body.mob-shell .dpg-page--documents {
    padding-bottom: 8px;
  }

  /* ---- 项目资料网格 ---- */
  body.mob-shell .documents-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.mob-shell .document-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  /* ---- 任务看板 — 横向滑动单列（任务看板模板） ---- */
  body.mob-shell .dpg-task-board,
  body.mob-shell .task-board {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  body.mob-shell .dpg-task-col,
  body.mob-shell .task-column {
    flex: 0 0 88%;
    scroll-snap-align: start;
    min-height: 280px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  body.mob-shell .task-card-enhanced {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  /* ---- 面板 / 图表 ---- */
  body.mob-shell .dpg-panel,
  body.mob-shell .dpg-charts-row,
  body.mob-shell .chart-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  body.mob-shell .dpg-charts-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.mob-shell .dpg-panel__head h3,
  body.mob-shell .chart-card h3 {
    color: #0f172a;
    font-size: 15px;
  }

  /* ---- 项目一览表 pot ---- */
  body.mob-shell .pot-projects-grid {
    grid-template-columns: 1fr !important;
  }

  body.mob-shell .pot-footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- 团队邀请条 ---- */
  body.mob-shell .dpg-invite-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    flex-direction: column;
    align-items: stretch;
  }

  /* ---- 个人中心 ---- */
  body.mob-shell .dpg-profile-layout,
  body.mob-shell .profile-container {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.mob-shell .dpg-profile-card,
  body.mob-shell .dpg-profile-form,
  body.mob-shell .profile-card,
  body.mob-shell .profile-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }

  body.mob-shell .dpg-profile-clock-entry {
    margin-bottom: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 14px;
    text-align: center;
  }

  body.mob-shell .dpg-profile-clock-btn {
    width: 100%;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 12px;
    min-height: 52px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  }

  body.mob-shell .dpg-profile-clock-hint {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
  }

  /* ---- 登录注册：与桌面端一致的深色系（仅 auth-visible） ---- */
  body.mob-shell.auth-visible #authContainer,
  body.mob-shell.auth-visible .auth-container {
    background: transparent !important;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
  }

  body.mob-shell.clock-login-mode #clockOverlay,
  body.mob-shell.clock-overlay-mode #clockOverlay {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mob-shell.auth-visible .auth-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35) !important;
    border-radius: 16px !important;
  }

  body.mob-shell.auth-visible .auth-header h1 {
    font-size: 1.25rem;
    color: #ffffff !important;
  }

  body.mob-shell.auth-visible .auth-header p {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  body.mob-shell.auth-visible .auth-tabs {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.25rem;
  }

  body.mob-shell.auth-visible .auth-tab {
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent !important;
    min-height: 44px;
  }

  body.mob-shell.auth-visible .auth-tab.active {
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  }

  body.mob-shell.auth-visible .form-label {
    color: #e8edf4 !important;
  }

  body.mob-shell.auth-visible .form-input {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    font-size: 16px;
  }

  body.mob-shell.auth-visible .auth-footer p {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  body.mob-shell.auth-visible .auth-container .btn-primary {
    background: linear-gradient(135deg, #2563eb, #059669) !important;
    font-weight: 600;
  }

  body.mob-shell.app-visible .form-input {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 16px;
  }

  /* ---- 模态框：高于底栏，底部留安全间距 ---- */
  body.mob-shell .modal {
    z-index: 10000 !important;
    align-items: flex-start !important;
    padding: calc(52px + env(safe-area-inset-top, 0px)) 12px calc(var(--mob-tabbar-h, 72px) + 16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mob-shell .modal-content {
    width: 94% !important;
    max-width: 480px !important;
    border-radius: 16px !important;
    max-height: none !important;
    margin: auto 0;
    flex-shrink: 0;
  }

  body.mob-shell .modal-body {
    padding-bottom: 1rem !important;
  }

  body.mob-shell .modal-body form > div:last-child,
  body.mob-shell .modal-body .form-actions {
    margin-bottom: 0.5rem;
  }

  /* ---- 进度条 ---- */
  body.mob-shell .progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
  }

  body.mob-shell .progress-fill {
    background: linear-gradient(90deg, #2563eb, #059669);
    border-radius: 3px;
  }

  /* ---- 状态标签 ---- */
  body.mob-shell .status-tag,
  body.mob-shell .role-badge,
  body.mob-shell .category-badge {
    border-radius: 12px;
    font-size: 11px;
    padding: 2px 10px;
  }

  /* ---- 快捷操作 ---- */
  body.mob-shell .dpg-quick-actions {
    gap: 8px;
  }

  body.mob-shell .dpg-quick-actions button {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}