/* v6.334.0 / v6.334.1: テストデータ削除の確認モーダル（4 画面共有・削除専用）
 *
 *   ⚠ 削除専用。他用途へ一般化しない（#92「共通化は 3 例目から」・現時点は 1 例目・信介さん確定）。
 *     ただし将来の一般化を妨げないよう、クラス名は用途を名乗る接頭辞 .bdm- で閉じている。
 *
 *   UI の正本: docs/samples/bulk_delete_modal_samples.html
 *   色は既存トークンのみ（--color-red / --color-amber / --color-text-muted 等）。新規リテラルカラーなし。
 *
 * ===== v6.334.1 hotfix: <dialog> + showModal() に変更（z-index では解決できない） =====
 *   v6.334.0 初版は body 直下の <div class="gs-modal-overlay">（z-index: 100）だったため、
 *   一括処理モーダルの**背後**に描画され実質見えなかった（信介さん staging 実機 FB）。
 *
 *   4 経路の一括処理モーダルの実体は 2 種類に分かれている:
 *     週間予定表   … <div class="modal-overlay">  z-index: 1000
 *     管制ボード   … <div class="cc-overlay">     z-index: 1000
 *     現場シフト表 2 経路 … **<dialog> + showModal()**（top layer）
 *
 *   **top layer はあらゆる z-index より前面**に描画されるため、通常の <div> はどれだけ
 *   z-index を上げても <dialog> の手前には出せない。z-index の数値競争では解決しない。
 *   → 本モーダル自身も <dialog> + showModal() にする。top layer 同士は
 *     **showModal() を呼んだ順で後が上**になるため、後から開く本モーダルが必ず前面に出る。
 *     結果として **z-index を一切指定しない**（数値の場当たり的な引き上げを持ち込まない）。
 *
 *   先例: site-shifts.css L1809 のコメント「テスト処理/OK確認/過剰警告は <dialog>
 *        （::backdrop / showModal の top-layer）で z-index 非依存のため対象外」。
 *   z-index 階層の全体像は docs/knowledge/css-ui.md に明文化した。
 */

/* dialog 自体がモーダルの箱（既存 .time-edit-modal と同じ流儀）。中央寄せは position:fixed + translate。 */
.bdm-dialog {
  border: none;
  padding: 28px;
  border-radius: 28px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-shadow: var(--shadow-2, 0 8px 28px rgba(0,0,0,.14));
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.bdm-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.bdm-title {
  font-size: var(--text-lg, 18px);
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-text);
}

/* 対象（日付範囲・拠点/現場）— 「表示中」という曖昧な語をやめて実際の範囲を出す */
.bdm-scope {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--color-bg, #f4f6f8);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.bdm-scope-label { font-size: 11px; color: var(--color-text-muted, #7f8c8d); }
.bdm-scope-val { font-size: 13px; font-weight: 700; color: var(--color-text); }

/* 内訳セクション */
.bdm-sec { margin-bottom: 16px; }
.bdm-sec-head {
  font-size: 12px; font-weight: 700; margin: 0 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.bdm-sec-head.is-del { color: var(--color-red, #c5221f); }
.bdm-sec-head.is-rev { color: var(--color-amber, #e67e22); }
.bdm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bdm-dot.is-del { background: var(--color-red, #c5221f); }
.bdm-dot.is-rev { background: var(--color-amber, #e67e22); }

.bdm-items { list-style: none; margin: 0; padding: 0; }
.bdm-items li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; padding: 7px 0;
  border-bottom: 1px dashed var(--color-border, #d5d8dc);
}
.bdm-items li:last-child { border-bottom: none; }
.bdm-item-name { flex: 1; color: var(--color-text); }
.bdm-item-sub {
  display: block; font-size: 11px; color: var(--color-text-muted, #7f8c8d);
  margin-top: 3px; line-height: 1.5;
}
.bdm-item-count { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bdm-item-count.is-del { color: var(--color-red, #c5221f); }
.bdm-item-count.is-rev { color: var(--color-amber, #e67e22); }

/* 守られるもの */
.bdm-keep {
  font-size: 12px; color: var(--color-text-muted, #7f8c8d); line-height: 1.7;
  padding: 11px 13px; background: var(--color-bg, #f4f6f8);
  border-radius: 8px; margin-bottom: 10px;
}
.bdm-keep b { color: var(--color-text); }

/* 取り消せない警告 */
.bdm-warn {
  background: #fdedec;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12px; line-height: 1.7;
  color: var(--color-red, #c5221f); font-weight: 700;
}

/* 対象 0 件 */
.bdm-empty {
  font-size: 13px; color: var(--color-text-muted, #7f8c8d);
  padding: 14px 0; text-align: center;
}

/* フッター（DESIGN.md §2-1 ピル / §2-3 危険ボタンは .gs-btn-danger を参照） */
.bdm-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .bdm-dialog { width: 92vw; padding: 20px; }
  .bdm-items li { font-size: 12px; }
}