/* テーマ本体（theme_style.css）の上書き。
 *
 * theme_style.css は 21,897 行のベンダー製テーマで、直接編集すると
 * 次回のテーマ更新で差分が失われる。色のコントラスト（WCAG 2.1 AA・4.5:1）に
 * 届かない指定だけを、後から読み込むこのファイルで打ち消す。
 *
 * 読み込み順は templates/base.html を参照。
 *   style.css → theme_style.css → fonts_ja.css → このファイル → block additional_style
 * ページ個別の指定を殺さないため、additional_style より前に置くこと。
 *
 * 方針:
 *   - 色は DESIGN.md のトークンから選ぶ。パレット外の色を新設しない。
 *   - !important は使わず、同じ詳細度で後に書いて勝つ。
 *     テーマ側が !important を付けている宣言（Bootstrap のユーティリティなど）は、
 *     宣言が参照しているカスタムプロパティを要素側で再定義して値を差し替える。
 *   - ライト／ダークの両モードで 4.5:1 を満たすため、固定の16進数ではなく
 *     モードで切り替わる --bs-gray-* / --bs-primary を参照する。
 */

/* ---------------------------------------------------------------- #543
 * フォームラベル。
 * theme_style.css:2532,2538 が Secondary（#85878a）を指定していて、
 * 白背景で 3.60:1 にしかならない。DESIGN.md が「文字色に Secondary を
 * 白背景の本文へ使わない」と定めているので On Surface（#747579）へ戻す。
 */
.form-label,
.col-form-label {
  color: var(--bs-body-color);
}

/* ---------------------------------------------------------------- #544
 * 料金表示。
 * theme_style.css:10250 の .text-success は Success（#0cbc87）を !important で
 * 当てるため、color では上書きできない。宣言が参照する --bs-success-rgb を
 * 要素側で Primary に差し替える。
 *
 * 対象は見出し要素（h6.text-success）とその囲み（div.d-flex.text-success）に限る。
 * 予約完了・確認済みなど本来の状態表示は span.text-success で書かれており、
 * ここでは触らない。
 */
h6.text-success,
div.d-flex.text-success {
  --bs-success-rgb: var(--bs-primary-rgb);
}

/* ---------------------------------------------------------------- #545
 * 副次操作のボタン。
 * theme_style.css:3562 は白文字 on Secondary（#85878a）で 3.60:1。
 * 地色を On Surface（#747579）とその一段濃い階調（--bs-gray-700 / #5e5e5f）に
 * 下げて、通常・hover・active・disabled のすべてで 4.5:1 以上にする。
 * ダークモードで反転しないよう、階調は16進数のトークン値で固定する。
 */
.btn-secondary {
  --bs-btn-bg: #747579;
  --bs-btn-border-color: #747579;
  --bs-btn-hover-bg: #5e5e5f;
  --bs-btn-hover-border-color: #5e5e5f;
  --bs-btn-focus-shadow-rgb: 116, 117, 121;
  --bs-btn-active-bg: #5e5e5f;
  --bs-btn-active-border-color: #0b0a12;
  --bs-btn-disabled-bg: #747579;
  --bs-btn-disabled-border-color: #747579;
}

/* ---------------------------------------------------------------- #546
 * エリア選択（choices.js）。
 *
 * 候補の見出しはベンダー CSS（CDN の choices.min.css）の gray（#808080）で 3.95:1。
 * 先に読み込まれているので、同じ色指定を後から当てれば足りる。
 */
.choices .choices__list--dropdown .choices__heading {
  color: var(--bs-gray-600);
}

/* 先頭の「エリアを選んでください」は theme_style.css:20905 が
 * --bs-gray-400（#96969a）を !important で当てていて 2.95:1。
 * 参照先のカスタムプロパティを要素側で再定義して On Surface 相当に上げる。
 */
.choices .choices__list--dropdown .choices__item.choices__placeholder {
  --bs-gray-400: var(--bs-gray-600);
}

/* ドロップダウンを開いた直後は先頭候補が薄紫（Primary 20%）で強調され、
 * On Surface のままだと 3.35:1 に落ちる。強調時だけ Primary に切り替える
 * （theme_style.css:20890 が強調候補に与えている色と揃う）。
 */
.choices .choices__list--dropdown .choices__item.choices__placeholder.is-highlighted {
  --bs-gray-400: var(--bs-primary);
}

/* ダークモードの Primary（#8e85e6）は暗い地に対して 4.05:1 までしか出ないので、
 * 強調時も候補と同じ階調のままにする。
 */
[data-bs-theme=dark] .choices .choices__list--dropdown .choices__item.choices__placeholder.is-highlighted {
  --bs-gray-400: var(--bs-gray-600);
}

/* ---------------------------------------------------------------- #548
 * フッター。
 * .text-body-secondary は theme_style.css:10315 が --bs-secondary-color を
 * !important で当てる。フッターの中だけ参照先を一段明るい階調に置き換える。
 * ライトは #96969a、ダークは #a1a1a8（DESIGN.md の dark-on-surface）になり、
 * どちらも地の #0b0a12 に対して 4.5:1 を超える。
 */
footer {
  --bs-secondary-color: var(--bs-gray-400);
}

/* ---------------------------------------------------------------- #553
 * ツールチップ・ポップオーバーの和文書体。
 * theme_style.css:6697,6807 が "DM Sans", sans-serif だけを指定していて
 * Noto Sans JP を含まないため、日本語が OS 既定のフォントで描画されていた。
 * fonts_ja.css が定める本文の書体スタックに合わせる。
 */
.tooltip,
.popover {
  font-family: var(--bs-body-font-family);
}


/* 日付ピッカーの日付（#578）
 *
 * theme_style.css:21541 が .flatpickr-day に var(--bs-gray-400)（#96969a）を
 * 当てており、白地で 2.95:1 と AA（4.5:1）に届かない。日付は「選べる日を
 * 読み取る」ための主要な情報なので、本文色（#747579 / 4.60:1）に上げる。
 * 選択不可の日は flatpickr 側の .flatpickr-disabled が別途薄くするため、
 * 選べる日と選べない日の区別は保たれる。
 */
.flatpickr-day {
  color: var(--bs-body-color);
}


/* ---------------------------------------------------------------- #549
 * 入力エラーの文字色。
 *
 * `.error-message` の同一定義が 12 テンプレートの <style> にコピーされ、
 * 文字色に赤の直値 #ff0000（白地で 4.00:1）を当てていた。定義をここへ 1 本化し、
 * 色は DESIGN.md の Danger（#d6293e・白地で 4.95:1）に置き換える。
 * font-size と margin-top はコピー元の値をそのまま引き継ぐ。
 *
 * ダークは #d6293e が地の #222529 に対して 3.11:1 しか出ないため、
 * テーマが持つ [data-bs-theme=dark] の --bs-danger-text（#ea868f・6.09:1）を使う。
 * ライトの --bs-danger-text は #b02a37 で Danger トークンと別値なので参照しない。
 */
.error-message {
  color: var(--bs-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

[data-bs-theme=dark] .error-message {
  color: var(--bs-danger-text);
}

/* ---------------------------------------------------------------- #595 → #596
 * 事業者の予約一覧の「詳細」リンク（インラインの #0000FF を削除した箇所）。
 *
 * #595 の時点では行（.reservation-item）の地が #fff 固定だったため、リンク色も
 * 16進数で #5143d9 に固定していた。#596 で地を --bs-body-bg に寄せ、ダークでは
 * #222529 になったので、リンク色もモードで切り替わる --bs-link-color に戻す。
 * ライトは #5143d9 のまま（白地で 6.66:1）、ダークは #8e85e6（#222529 上で 4.87:1）。
 * 指定を外すと囲みの h6 の色（--bs-heading-color）を継いでリンクに見えなくなる。
 */
.reservation-item a {
  color: var(--bs-link-color);
}

/* ---------------------------------------------------------------- #596
 * 予約一覧の「備考欄記載あり」。
 *
 * theme_style.css:10267 の .text-danger は --bs-danger（#d6293e）を !important で
 * 当てるため color では上書きできない。#596 で行の地がダークで #222529 になると
 * 3.11:1 まで落ちるので、参照先の --bs-danger-rgb を要素側で
 * --bs-danger-text（#ea868f・#222529 上で 6.09:1）の値に差し替える。
 * ライトは指定なし＝従来どおり #d6293e（白地で 4.95:1）。
 */
[data-bs-theme=dark] .reservation-item .text-danger {
  --bs-danger-rgb: 234, 134, 143;
}

/* ---------------------------------------------------------------- #540
 * 釣船情報テーブルの項目名。
 *
 * `templates/boat_detail.html` の <th> 9 箇所がパレット外の青 #1b76ff を
 * インラインで指定していた（白地で 4.13:1）。操作できない項目名に
 * Primary を当てるとリンクと誤認されるため、見出しの階調
 * （--bs-heading-color = ライト #0b0a12 / ダーク #fff）で本文より濃くする。
 * 折り返し防止の white-space はインラインから移設した。
 */
.boat-spec-label {
  color: var(--bs-heading-color);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- #539
 * 一覧カードの主要導線に使う枠線ボタン。
 *
 * `.btn-dark`（#0b0a12）から `.btn-outline-primary` へ変えた 3 画面用。
 * ライトは通常が #5143d9 on 白（6.66:1）、hover は白 on #5143d9（6.66:1）で足りる。
 * ダークは Primary が #8e85e6 になり、hover の白文字が 3.16:1 まで落ちるため、
 * hover と active の文字色を Heading（#0b0a12・#8e85e6 の上で 6.23:1）に替える。
 */
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-hover-color: #0b0a12;
  --bs-btn-active-color: #0b0a12;
}

/* ---------------------------------------------------------------- #550
 * モバイル幅のタップ領域。
 *
 * iOS ヒューマンインターフェイスガイドラインの 44×44px を下回る操作子が
 * 3 種類あった（計測値は 390px 幅）。
 *   .btn-sm                        高さ 34.3px（検索結果・事業者各画面）
 *   記録簿一覧の [入力する]/[編集する]  高さ 23.6px（.btn.btn-link.p-0）
 *   フッターの問い合わせリンク      高さ 18.0px
 *
 * 擬似要素で当たり判定だけ広げる手もあるが、それでは要素自身の
 * getBoundingClientRect() が 44px 未満のまま残り、支援技術やブラウザの
 * ヒットテスト検証で「小さいまま」と判定される。実寸で 44px を確保する。
 *
 * 効かせるのは md 未満（767.98px 以下）だけ。768px 以上ではこのブロックが
 * 無効になるため、デスクトップのボタン寸法は現状のまま変わらない。
 * 文字サイズ・padding・色は触らないので、大きくなるのは操作子の高さだけ。
 */
@media (max-width: 767.98px) {
  .btn-sm,
  .btn-group-sm > .btn,
  .btn.btn-link,
  footer a.text-body-secondary.text-primary-hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------------------------------------------------------------- 
 * Bootstrap モーダルの重なり順。
 *
 * .navbar-mobile（下部固定ナビ）が theme_style.css で z-index:99999 と
 * 指定されており、Bootstrap モーダル（既定 .modal 1055 / .modal-backdrop
 * 1050）より前面に来る。スマホ幅でカレンダー等の予約導線モーダルが
 * 下部ナビに隠れ、操作を奪われていた。
 *
 * モーダルとバックドロップをナビ(99999)より前面へ引き上げる。
 * 公開側 base.html でのみ読まれるため管理画面(Tabler)には影響しない。
 */
.modal {
  z-index: 100050;
}
.modal-backdrop {
  z-index: 100040;
}