/* ===== 手机端财务台账：① 操作按钮文字垂直居中 ② 整体紧凑、一行多显示几列 =====
   原来：7 列表格宽 862px，单元格 9px 内边距 ⇒ 390 屏只能看见 2 列半，行也偏高 ✗
   现在：列宽收窄、内边距压到 5px、字号 11.5px ⇒ 一屏能看见 5 列左右 ✅
*/

@media (max-width: 680px) {
  /* ---------- ① 操作列按钮：文字垂直居中 ----------
     实际元素是 <span class="hz-fbtn">编辑</span>（inline-block，高 38px）
     ⇒ 文字贴在顶端，必须改成 inline-flex 居中 */
  #fin-wrap .hz-fbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 1 !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin: 0 1px !important;
  }

  #fin-wrap table button,
  #fin-wrap table a.btn,
  #fin-wrap table .btn,
  #fin-wrap table td button,
  #fin-wrap table td a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 1 !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  #fin-wrap table td:last-child {
    padding: 2px 4px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  /* 操作列里两个按钮之间的间距收紧，别占一坨 */
  #fin-wrap table td:last-child > * { margin: 0 1px !important; }

  /* ---------- ② 表格紧凑：一屏多列 ---------- */
  #fin-wrap .tw-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #fin-wrap .tw-scroll > table {
    min-width: 518px !important;      /* 原 862px → 518px，一屏能看 5 列左右 */
    width: auto !important;
    table-layout: fixed !important;   /* 关键：不固定布局时，长摘要会把列撑开，列宽设了也白设 */
    border-collapse: collapse !important;
  }
  #fin-wrap table th,
  #fin-wrap table td {
    padding: 5px 6px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
  #fin-wrap table thead th {
    font-size: 11px !important;
    padding: 6px 6px !important;
    background: #FFF8FA !important;
  }
  /* 各列宽：日期/分类/金额够用就行，摘要留弹性 */
  #fin-wrap table th:nth-child(1), #fin-wrap table td:nth-child(1) { width: 78px !important; max-width: 78px !important; }
  #fin-wrap table th:nth-child(2), #fin-wrap table td:nth-child(2) { width: 62px !important; max-width: 62px !important; }
  #fin-wrap table th:nth-child(3), #fin-wrap table td:nth-child(3) {
    width: auto; min-width: 104px !important;
    max-width: 124px !important; white-space: nowrap !important;
    overflow: hidden; text-overflow: ellipsis;
  }
  #fin-wrap table th:nth-child(4), #fin-wrap table td:nth-child(4) { width: 62px !important; max-width: 62px !important; text-align: right !important; }
  #fin-wrap table th:nth-child(5), #fin-wrap table td:nth-child(5) { width: 62px !important; max-width: 62px !important; text-align: right !important; }
  #fin-wrap table th:nth-child(6), #fin-wrap table td:nth-child(6) { width: 68px !important; max-width: 68px !important; text-align: right !important; }
  #fin-wrap table th:nth-child(7), #fin-wrap table td:nth-child(7) { width: 62px !important; max-width: 62px !important; }

  /* 金额用等宽数字，短一点好对齐 */
  #fin-wrap table td { font-variant-numeric: tabular-nums !important; }

  /* ---------- ③ 台账区域本身的内边距也收一收 ---------- */
  #fin-wrap .panel,
  #fin-wrap > div { padding-left: 8px !important; padding-right: 8px !important; }
  #fin-wrap table tbody tr { transition: background .12s ease; }
  #fin-wrap table tbody tr:nth-child(even) { background: #FEFBFC; }
}

/* 桌面端不受影响（仍按原宽度显示） */

  /* 单元格行内 style 会带 min-width，必须统一压掉，否则摘要列把表撑到 705px */
  #fin-wrap table th, #fin-wrap table td { min-width: 0 !important; width: auto; }
  #fin-wrap table th:nth-child(1), #fin-wrap table td:nth-child(1) { width: 78px !important; }
  #fin-wrap table th:nth-child(2), #fin-wrap table td:nth-child(2) { width: 62px !important; }
  #fin-wrap table th:nth-child(3), #fin-wrap table td:nth-child(3) { width: 124px !important; min-width: 0 !important; }
  #fin-wrap table th:nth-child(4), #fin-wrap table td:nth-child(4) { width: 62px !important; }
  #fin-wrap table th:nth-child(5), #fin-wrap table td:nth-child(5) { width: 62px !important; }
  #fin-wrap table th:nth-child(6), #fin-wrap table td:nth-child(6) { width: 68px !important; }
  #fin-wrap table th:nth-child(7), #fin-wrap table td:nth-child(7) { width: 62px !important; }

  /* 列宽要算上内边距才对得上：border-box ⇒ 声明的 78px 就真的是 78px */
  #fin-wrap table th, #fin-wrap table td { box-sizing: border-box !important; }