/* 驾驶舱 · 每日回款页工具栏窄屏修复（2026-11-04）
   实测问题：
     1. .page-toolbar 是 flex-wrap:nowrap，左右两个 .toolbar-group 无法换行；
     2. 左侧 14 个日期胶囊超出自身容器，与右侧「导出 CSV」水平相撞，
        1024/900/820 三个视口分别压住 10-19、10-21、10-22 等胶囊；
     3. 390px 下 14 个胶囊只有 6 个可见，其余被 <main> 的 overflow-x:hidden 裁掉，
        祖先不提供横向滚动 → 10-27 及更早的日期完全无法触达。

   修法：窄屏让工具栏整体换行、两组各占一行，胶囊行内部允许折行。
   作用域用 :has(input[type=date]) 锁定到带日期选择器的页面，不波及其它页 toolbar。

   注意：不要给 div.text-sm 加 white-space:normal —— 标签「可用日期：」会被拆成
   一列单字（实测 390px 变成竖排四行）。baseline.css 的 nowrap 要保留，只让 span 折行。 */

@media (max-width: 1200px) {
  body.aph2-theme main .page-toolbar:has(input[type="date"]) {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  /* 两组各占一整行，消除水平相撞 */
  body.aph2-theme main .page-toolbar:has(input[type="date"]) > .toolbar-group {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }

  /* 胶囊行允许折行；标签文字保持单行。
     关键：div.text-sm 自身是 display:flex + flex-wrap:nowrap，
     只给它加 min-width 不够 —— 必须让 div 也 wrap，span 才能另起一行，
     否则 span 会与「可用日期：」挤在同一行、胶囊往左溢出到标签上方。 */
  body.aph2-theme main .page-toolbar:has(input[type="date"]) .toolbar-group > div.text-sm {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  body.aph2-theme main .page-toolbar:has(input[type="date"]) .toolbar-group > div.text-sm > span {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 右组（片区筛选 + 导出）内部保持一行，靠右对齐 */
  body.aph2-theme main .page-toolbar:has(input[type="date"]) > .toolbar-group.ml-auto {
    justify-content: flex-end !important;
  }
}

/* 手机上胶囊折成两行更易点，标签单独占一行 */
@media (max-width: 640px) {
  body.aph2-theme main .page-toolbar:has(input[type="date"]) .toolbar-group > div.text-sm > span {
    flex: 1 1 100% !important;
  }
  body.aph2-theme main .page-toolbar:has(input[type="date"]) .toolbar-group > div.text-sm > span > * {
    margin-bottom: 2px;
  }
}