/*!
 * bs5-compat.css — Bootstrap 5.3 移行用の互換レイヤー
 *
 * 本アプリは旧 BS3.4.1(管理画面)/ BS4.1.3(作図・PDF・公開)のクラスを多用している。
 * BS5 で廃止・改名されたクラスのうち、テンプレートを書き換えずに見た目・挙動を
 * 維持できるものはここで旧名のまま再現する(BS5 本体の後に読み込むこと)。
 * 構造的に壊れるもの(col-xs グリッド / custom-control ラジオ / modal close ボタン)は
 * テンプレート側を BS5 へ書き換えている。
 */

/* ---- フォーム(BS3/BS4 で廃止) ---- */
.form-group { margin-bottom: 1rem; }
.control-label { margin-bottom: .5rem; font-weight: 700; } /* BS3 は label を太字にしていた */
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }

/* BS3 バリデーション状態(form_sender.js が has-error / help-block を付与) */
.has-error .control-label,
.has-error .help-block { color: #a94442; }
.has-error .form-control,
.has-error .form-select {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus,
.has-error .form-select:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

/* form-horizontal(BS4 で廃止)。BS5 では .form-group が行(flex)にならず、
   label と入力欄が縦積みになる/日付レンジ(作成日・更新日)が折り返すため復元する。 */
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.form-horizontal .form-group > [class^="col-"],
.form-horizontal .form-group > [class*=" col-"] {
  padding-right: 8px;
  padding-left: 8px;
}
.form-horizontal .control-label {
  margin-bottom: 0;
  text-align: right;
}

/* form-inline(BS4 で廃止) */
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }

/* ---- テーブル(BS3 で廃止) ---- */
/* 行のコンテキストカラー(BS3 の .danger/.warning 等。BS5 は .table-danger 等に改名)。
   一覧の「保存期限が近い行」の色分け(is_danger/is_warning)に使用。 */
.table > tbody > tr.danger  { --bs-table-bg: #f2dede; }
.table > tbody > tr.warning { --bs-table-bg: #fcf8e3; }
.table > tbody > tr.success { --bs-table-bg: #dff0d8; }
.table > tbody > tr.info    { --bs-table-bg: #d9edf7; }
.table > tbody > tr.active  { --bs-table-bg: #f5f5f5; }
/* table-condensed(BS3。BS5 は table-sm) */
.table-condensed > :not(caption) > * > * { padding: .3rem; }

/* ---- well(BS3 で廃止) ---- */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }

/* コメント入力モーダルは中央でなく左寄せで表示(背後の図が見えるようにする旧仕様の再現)。
   旧実装は .modal に margin-left:-1000px を当てていたが寄せ過ぎで見切れるため、
   BS5 では dialog を左マージンに固定する。 */
#modal-comment .modal-dialog {
  margin-left: 1rem;
  margin-right: auto;
}

/* ---- ボタン(BS4 で廃止) ---- */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }

/* btn-primary の色味を系統別に復元(どちらも BS5 デフォルト #0d6efd とは異なる)。
   - System B(作図/作成/公開/PDF = 旧 BS4): クリアブルー #007bff。
   - System A(管理画面 = #container 配下 = 旧 BS3): 紺 #337ab7(ページャー active と同色)。 */
.btn-primary {
  --bs-btn-bg: #007bff;
  --bs-btn-border-color: #007bff;
  --bs-btn-hover-bg: #0069d9;
  --bs-btn-hover-border-color: #0062cc;
  --bs-btn-active-bg: #0062cc;
  --bs-btn-active-border-color: #005cbf;
  --bs-btn-disabled-bg: #007bff;
  --bs-btn-disabled-border-color: #007bff;
  --bs-btn-focus-shadow-rgb: 38, 143, 255;
}
#container .btn-primary {
  --bs-btn-bg: #337ab7;
  --bs-btn-border-color: #2e6da4;
  --bs-btn-hover-bg: #286090;
  --bs-btn-hover-border-color: #204d74;
  --bs-btn-active-bg: #204d74;
  --bs-btn-active-border-color: #122b40;
  --bs-btn-disabled-bg: #337ab7;
  --bs-btn-disabled-border-color: #2e6da4;
  --bs-btn-focus-shadow-rgb: 51, 122, 183;
}

/* 色バリアント無しの .btn(例: 作図ツールバーの「コメント」「規制」「建物等」)は
   BS3/BS4 ではブラウザ既定の薄グレーで描画されていたが、BS5 は .btn 基底が
   背景透明のため白く見える。既定ボタン相当の薄グレーを復元する。 */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-pink):not(.btn-close):not([class*="btn-outline"]) {
  --bs-btn-bg: #f0f0f2;
  --bs-btn-border-color: transparent;
  --bs-btn-color: #212529;
  --bs-btn-hover-bg: #e7e7e9;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-bg: #dddde0;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: #212529;
}

/* thead-light(BS4 で廃止。BS5 は table-light)。右ペイン「当方/相手方」の
   ヘッダ背景がグレー→白になるため復元。 */
.thead-light { --bs-table-bg: #e9ecef; }
.thead-light th { color: #495057; }

/* BS5 のラジオ/チェックボックスの枠線(既定 rgba(0,0,0,.25))は薄く見づらいため濃くする。 */
.form-check-input { border-color: #888; }

/* 距離(発見/危険認知/停止地点)・速度の数値入力を単位・配置ボタンと横並び(折り返し無し)に。
   BS5 の .form-control は display:block;width:100% で全幅化し単位/ボタンが次行へ回るため、
   inline-block + 固定幅に戻す(col-4/col-6 指定は .row 親が無く効かない)。 */
.input-distance,
#input-speed-self,
#input-speed-opponent {
  display: inline-block;
  vertical-align: middle;
}
.input-distance { width: 3.2em; }
#input-speed-self,
#input-speed-opponent { width: 2.9em; }

/* PDF では職員番号:過失の行を 4:6 の幅で配置(編集画面は内容幅のまま)。 */
.pdf-page .staff-fault-row { width: 100%; }
.pdf-page .staff-fault-row .staff-group { flex: 4 1 0; }
.pdf-page .staff-fault-row .fault-group { flex: 6 1 0; }
/* PDF は幅に余裕があるので「職員<br>番号」の改行を無効化し1行表示にする */
.pdf-page .staff-group label br { display: none; }
/* PDF の職員番号ラベルと値が近すぎるため約3文字分あける */
.pdf-page .staff-group label { margin-right: 3em; }

/* <select class="form-control"> の右端キャレット復元。BS5 では select の矢印は
   .form-select が描画するため、.form-control のままだと▽が出ない。
   form-select 相当の背景矢印を付与(幅 90px の車種プルダウン向けに余白は控えめ)。 */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .4rem center;
  background-size: 12px 10px;
  padding-right: 1.4rem;
}
/* PDF(静的描画)では▽不要かつ appearance:none + padding で文字が見切れるため、
   ネイティブ select に戻して幅 90px 内に収める。 */
.pdf-page select.form-control {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  background-image: none;
  padding-right: .25rem;
  width: auto !important;   /* 選択値が切れないよう内容幅に(インライン width:90px を上書き) */
  max-width: none;
}

/* ---- 旧 float / 配置ユーティリティ ---- */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }

/* BS4 の font-weight-bold(BS5 は fw-bold に改名)。PDF の「事故状況図」「状況図ID…」等の見出しに使用 */
.font-weight-bold { font-weight: 700 !important; }

/* BS4 の text-left/right(BS5 は text-start/end に改名) */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* BS4 の float-left/right(BS5 は float-start/end に改名) */
.float-left  { float: left  !important; }
.float-right { float: right !important; }

/* ---- BS4 の方向付きスペーシング(BS5 は ml->ms / mr->me / pl->ps / pr->pe に改名) ---- */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }