/* ============================================================================
 * mobile-fit-version: 20261015d36h395
 * D36h395（老板 2026-10-15 附两张手机截图：「ui排版还可以优化一下」）
 * 手机端「项目总览 → 财务」与收支流水的排版补丁
 *
 * 为什么单独一个文件（和 pill.css 同一个理由）：
 *   出毛病的行是 **public/app.js**（财务门户六件禁改之一）渲染出来的，但这些元素身上
 *   **没有写死宽度、也没有写死换行** ⇒ 一层外挂 CSS 就能重排，**不用动任何 JS**。
 *   写进 app.css 会撞 test/settings-uniform-height-guard 的 ⑧-1b（阶段D36h341 起不许 !important），
 *   所以另立一份，由入口页在 app.css **之后**引。
 *
 * 范围：只在手机宽（≤700px）生效，桌面一个字不变。
 * 克制：**不改字号、不改高度/内边距**（怕撞 D36h341「统一高度」那条护栏），
 *       只做两件事 —— ① 重新分行 ② 不许把元素挤压到变形。
 *
 * 改前实测（ops-kit/d36h395-fit-drill.cjs 改前那一跑，项目 #64）：
 *   标题「支出分析」2 行（被挤成"支出分/析"）、「本项目财务可见性（覆盖）」2 行；
 *   状态标签「待处理」31×51px（竖排）「部分付」29×51「已付款」40×51；
 *   「一键闭环（继续付款）」64×78px（4 行）「（入账+付款）」75×61px（3 行）；
 *   流水行高 [171,122,193,88,104,171]（最高 193px）；筛选区 168px 高、占 4 行。
 * ==========================================================================*/
@media (max-width: 700px) {

  /* ① 标题里塞了长说明的两处 h4（支出分析 / 本项目财务可见性）
        根因：app.css:202 `.workbench-panel h4{display:flex;align-items:center;gap:8px}` —— h4 自己是 flex 容器，
              里面的标题文字变成 flex 子项、被压到**最小宽度**（实测每行只有 28px = 2 个字）⇒「支出分析」拆成两行、
              「本项目财务可见性（覆盖）」断成两行。修法只有一条：手机端让这个 h4 回到 block（标题一行、
              说明另起一段），右边那个按钮自然落到下一行。
        （#id h4 的比重 1,0,1 高于 .workbench-panel h4 的 0,1,1，所以不用 !important 也压得住。） */
  #ov-expense-analysis h4,
  #ov-finvis-project h4 { flex: 1 1 100%; display: block; }
  #ov-expense-analysis h4 > span,
  #ov-finvis-project h4 > span { display: block; margin: 3px 0 0 0 !important; line-height: 1.55; }

  /* ② 收支流水行重排成三段：名称一行 / 状态标签+金额一行 / 操作按钮一行 */
  .tx-item { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
  .tx-item > div:first-child { flex: 1 1 100%; }
  /* ← 治「待处理」被压成竖排：标签永远保持一行、不参与收缩 */
  .tx-item .badge { flex: 0 0 auto; white-space: nowrap; }
  .tx-item .tx-amount { white-space: nowrap; }
  /* ← 治按钮折 3~4 行：按钮容器独占一行（它自己的内联样式只写了 display/flex-wrap/justify，没写 flex） */
  .tx-item > span[style*="inline-flex"] { flex: 1 1 100%; }
  .tx-item [data-txop] { white-space: nowrap; }
  /* 超长对方名最多两行 + 省略号（原来一条地址能把整行撑到 193px 高） */
  .tx-item .tx-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  /* ③ 筛选区：两个下拉并排、搜索框独占一行（原来搜索框和三个按钮挤在同一行） */
  #tx-filter select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  #tx-filter input { flex: 1 1 100%; min-width: 0; }
}