/* ============================================================
   移动端适配（W3-A）。断点：<=768px 覆盖 375/768 两个测试断点；
   >768px（含 1440 桌面）不匹配任何规则，桌面布局逐字节保持不变。
   只加规则、不改 base/components/views 三个文件——层叠顺序保证
   本文件（挂在三者之后）覆盖同名选择器，desktop 回归风险降到 0。
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 整体骨架：侧边栏从「固定 260px 挤内容区」
     改成顶部可横向滚动的店铺条，内容区独占宽度 ---------- */
  .app { flex-direction: column; }
  /* 108px 是本次改动前的原始预算，只够放标题条 + 一行横向店铺卡；.store-filter
     插进标题条和店铺卡之间后原预算装不下三段，会溢出（overflow:visible）盖到
     .main-header 上。215px 曾是旧版店铺卡（仅名称+一行元信息+徽章）三段的实测值；
     店铺卡改用共享骨架（views/store-card.js）后多了「服务期」grid 行，Playwright
     实测（375px 宽、220px 卡宽）单卡自然高度涨到 138px，标题条47 + 压缩后筛选区
     83 + 店铺卡一行138 + 缓冲，285px 是三段都放得下且不重叠的最小可用值。 */
  .sidebar { width: 100%; max-height: 285px; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .sidebar-header { padding: 8px 14px; }
  .sidebar-header p { display: none; }
  .store-list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 8px; gap: 8px; }
  .store-item { flex: 0 0 220px; margin-bottom: 0; min-height: 44px; }
  /* 侧栏在这个断点是横向滚动条形布局，.store-filter 压缩到最小高度，
     不挤掉 .store-list 的可视空间；.store-count 与 chip 计数信息重复，隐藏掉 */
  .store-filter { padding: 5px 10px 3px; }
  .store-search input { padding: 5px 9px 5px 26px; font-size: 12px; }
  .store-search-icon { left: 8px; font-size: 11px; }
  .store-chips { margin-top: 4px; gap: 4px; }
  .store-chip { padding: 2px 7px; font-size: 10.5px; }
  .store-count { display: none; }
  .store-select-grid { grid-template-columns: 1fr; }

  /* ---------- 顶部主 header：标题 + 标签页 + 操作按钮换行，
     标签页超宽时横向滚动而不是把整行撑破 ---------- */
  .main-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .main-header > div:last-child { width: 100%; justify-content: space-between; }
  .main-title { font-size: 14px; }
  .tabs { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 8px 12px; font-size: 12px; white-space: nowrap; min-height: 44px; }
  .header-actions { flex-wrap: wrap; }
  .content { padding: 14px; }

  /* ---------- 运营清单：模块头收窄，任务行从单行硬挤改成
     「标题独占一行 + 操作项换行」，勾选框/按钮放大到 44x44 触控目标 ---------- */
  .module-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .module-header h3 { font-size: 13px; }
  .module-header > div { flex-wrap: wrap; gap: 6px; row-gap: 4px; }
  .module-bar { width: 60px; }

  .task-row { flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px 10px; }
  .task-title { order: -1; flex-basis: 100%; font-size: 13.5px; }
  .task-check { width: 44px; height: 44px; border-radius: var(--radius-sm); }
  .task-check.done::after { font-size: 18px; }
  .task-check.locked::after { font-size: 15px; }
  .task-upload-btn, .task-note-btn, .task-note-readonly, .task-status-badge, .task-lock-badge {
    min-height: 44px; padding: 8px 14px; font-size: 12.5px; display: inline-flex; align-items: center; }
  .task-date { width: auto; text-align: left; }
  .task-proof-area { padding-left: 14px; }

  /* 备注气泡按绝对定位由 JS 摆放，宽屏下固定 280px 没问题，窄屏必须夹住不超出视口 */
  .note-popover { max-width: calc(100vw - 24px); }

  /* 删除按钮平时靠 :hover 显示——触屏没有 hover，日志/凭证这两个优先页面必须常显才可用 */
  .log-del { opacity: 0.6; }
  .proof-thumb-del { opacity: 1; }

  /* 预览层的操作按钮与缩略图轨道补到 44px 触控下限（桌面下分别是 30px / 40px），
     口径同本文件其它控件 */
  .proof-act { min-height: 44px; display: inline-flex; align-items: center; }
  .proof-th { height: 44px; }

  /* ---------- 每日填报（运营端优先页面）：卡片内边距收紧，
     提交按钮保证达到 44px 触控高度 ---------- */
  .op-form-card { padding: 16px; }
  .op-submit-btn { min-height: 44px; }

  /* ---------- 设置页：运营人员表格是纯 HTML <table>、无法加包裹 div，
     直接让承载它的卡片横向滚动——与 dashboard.css 里 .bs-matrix-wrap{overflow-x:auto}
     是同一种模式，只是没有专门的包裹元素时改用最近的块级祖先 ---------- */
  .set-wrap { padding: 0; }
  .set-card { padding: 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 管理大屏：banner 与运营对比统计换行，避免定宽内容撑出视口 ---------- */
  .bs-banner { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  .bs-banner-date { margin-left: 0; }
  .bs-section-title { flex-wrap: wrap; row-gap: 4px; }
  .bs-op-stats-row { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
  .bs-store-card-stats { grid-template-columns: repeat(2, 1fr); }

  /* ---------- 通用触控目标：这些交互控件多数是 <span>/<button> 混用，
     统一转 inline-flex 居中 + 44px 下限，一次性满足「触控目标不小于 44x44」 ---------- */
  .filter-chip, .set-subtab, .mini-btn, .set-btn, .op-cat-pill, .log-cat-tag,
  .modal-btn, .gen-link-btn, .add-store-btn, .edit-store-btn, .note-save,
  .store-chip, .log-scope-btn, .task-seg-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  /* .log-add-head 保留桌面端 space-between 布局（图标标题居左、店铺日期提示居右），
     只补触控高度，不能并进上面那条居中规则，否则布局会被 justify-content:center 冲掉 */
  .log-add-head { min-height: 44px; }
}