/* wb_receivable_ui.css —— PC（erp.hcs168.cn）欠款管理页 /#/receivable 顶部「查询条件 + 操作按钮」区域重排
 * @@ receivable-ui @@ 20261002  v1
 * ----------------------------------------------------------------------------
 * 位置：/opt/wugan_project1/pc_web/wb_receivable_ui.css，由 pc_web/index.html <head> 引入
 *       （纯样式覆盖层：不改 Vue 打包产物、不动 DOM、不动任何逻辑）
 * 回滚：删掉 index.html 里引入本文件的那一行 <link> 即可（本文件留着不生效）。
 * 作用域：所有选择器都挂在 #app .receivable-header 之下 —— 只影响欠款管理页的页头，
 *         全站其它页面的 .search-box / .filter-select / .table-actions / .btn 一律不动。
 *
 * 要修的问题（1600 及以下视口实测）：
 *   页头一行要塞「搜索框 600 + 两个筛选 143×2 + 4 个操作按钮 + 右上角用户胶囊」，
 *   横向放不下 105px，而按钮没有 white-space:nowrap，浏览器只能把按钮宽度压到 63px，
 *   于是按钮文字一个字一行竖排成 4 行、页头被撑到 86px 高，用户胶囊还被挤出视口右侧看不见。
 *
 * 做法（全部只加样式）：
 *   1) 按钮禁止折字、禁止压缩；页头放不下时整组换行，而不是压扁按钮；
 *   2) 搜索框 600px 固定宽 → 自适应（200~420px），腾出空间：≥1600 一行放得下；
 *   3) 搜索框 / 筛选下拉 / 操作按钮统一 40px 高；页头内边距 0，左边界与下方表格对齐。
 */
#app .receivable-header {
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 16px;
  margin-bottom: 20px;
  padding: 0;
}

/* 左侧：搜索 + 筛选；可收缩、有余量时被撑开，放不下时才换行 */
#app .receivable-header .header-left {
  flex: 1 1 auto;
  min-width: 0;
}

/* 右侧：操作按钮 + 用户胶囊整组靠右、整组不压缩 */
#app .receivable-header .header-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 操作按钮：永远单行、保持自然宽度 */
#app .receivable-header .table-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
#app .receivable-header .table-actions .btn {
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  height: 40px;
  padding: 0 16px;
  line-height: 1;
}

/* 搜索框：600px 固定宽 → 自适应 200~420px，与筛选下拉/按钮齐高 40px */
#app .receivable-header .search-box {
  flex: 1 1 220px;
  width: auto;
  min-width: 200px;
  max-width: 420px;
  height: 40px;
}
#app .receivable-header .search-box input {
  height: auto;
  padding: 0;
  line-height: 20px;
}

#app .receivable-header .filter-select {
  height: 40px;
}