/* card ヘッダ (タイトル + 右側ボタン/コントロール群) の phone 折返し (viewport-sweep VSW-ALL-101)。
   .card / .card-header の見た目定義は PJ 所有 (dtu-manual.css の衝突回避方針) のため再定義せず、
   phone 幅のレイアウト挙動だけを追加系で上書きする。

   対象は Bootstrap 系 pj で実測した 2 構造 (kojima/kyowa/three_k/sankou + DTU テンプレート 9 画面):
     A. .card-header > .d-flex …  — dtu_list_card_header.html とその手書きコピー
        (タイトル .me-auto + ボタン群が兄弟。bd-highlight は no-op class のため selector に使わない)
     B. .card-header.d-flex …     — ヘッダ自身が flex コンテナの変種 (daily_report_input 等)

   phone では nowrap flex がタイトル列を圧縮し、CJK が語中で縦割れする
   (「出荷履/歴」「Issue カ/ンバン」等の実測)。flex-wrap で「縮めず折る」に変え、
   ボタンは white-space で語中折返し (「見積管/理へ」「タイムラ/イン」) を禁止する。
   Tailwind 系 pj (threek_base 系) は .d-flex を持たないため本ファイルは no-op
   (爆風を Bootstrap 系の card ヘッダに限定する)。 */
/* dtu_list_card_header.html (Bootstrap パス) のアクション置き場。
   タグが出す 1 要素にだけ効く DTU 所有クラスなので、手書きコピー (実測 347 箇所) は
   巻き込まない — 爆風をタグ利用箇所 (three_k 74 + marusan 1) に閉じるための設計。

   縦中央・等間隔・狭幅で折返し。これが無いと子は通常フローで並ぶため、block 要素
   (<form> / .input-group / <div>) を入れると縦積みになり ? アイコンが次行へ落ちる。
   tailwind パスの .dtu-card__actions (dtu-admin.css) と同一の挙動に揃えてある。

   ⚠️ 既存の呼び出しは要素ごとに me-2 / me-3 を手当てしているため gap と加算され、
   右側の間隔が 8〜16px 広がる (崩れではない。2026-08-05 決裁で許容)。
   畳むなら pj 側から margin ユーティリティを剥がす。 */
.dtu-card-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .card-header.d-flex,
  .card-header > .d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .card-header.d-flex .btn,
  .card-header > .d-flex .btn {
    white-space: nowrap;
  }
}