/* =========================================================================
   tokens.css — デザイントークン定義（正本: docs/design_2026-06-16_design_tokens.md）
   - --ntb-* 名前空間。Bootstrap の --bs-* は壊さない。
   - ライト=既定。ダークは [data-bs-theme="dark"] で同名トークンを上書き。
   ========================================================================= */

:root,
[data-bs-theme="light"] {
  /* color */
  --ntb-color-brand: #0a6cbf;
  --ntb-color-brand-strong: #005396;
  --ntb-color-brand-subtle: #e8f1fa;
  --ntb-color-text: #1f2937;
  --ntb-color-muted: #6c757d;
  --ntb-color-surface: #ffffff;
  --ntb-color-surface-subtle: #f8fafc;
  /* ページ地。MOL Blue と同じ hue 210° 上で surface-subtle(#f8fafc) と
     brand-subtle(#e8f1fa) の中間。カードの #fff が浮く明度差を確保する */
  --ntb-color-surface-page: #eef3f8;
  /* MOL Blue 原色のRGB成分。rgb(var(--x) / a) で任意の透明度に使う */
  --ntb-color-brand-strong-rgb: 0 83 150;
  --ntb-color-border: #e9eef5;
  --ntb-color-border-dashed: #cfd8e3;
  /* state subtle backgrounds */
  --ntb-color-danger-subtle: #fff5f5;
  --ntb-color-success-subtle: #f0fdf4;
  --ntb-color-primary-subtle: #eff6ff;
  --ntb-color-warning-subtle: #fffaf0;
  /* 運航会社カラー（グループ会社のコーポレートカラー） */
  --ntb-color-company-green: #198754;
  --ntb-color-company-green-accent: #20c997;
  --ntb-color-company-green-subtle: #e8f6ef;
  --ntb-color-company-orange: #DC3513;
  --ntb-color-company-orange-accent: #f07830;
  --ntb-color-company-orange-subtle: #fdeee9;
  /* radius */
  --ntb-radius-md: 1rem;
  --ntb-radius-pill: 999px;
  /* shadow */
  --ntb-shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);
  --ntb-shadow-card-hover: 0 14px 28px rgba(15, 23, 42, 0.1);
  --ntb-shadow-hero: 0 12px 30px rgba(15, 23, 42, 0.06);
  --ntb-shadow-btn: 0 4px 12px rgba(15, 23, 42, 0.08);
  /* space */
  --ntb-space-1: 0.25rem;
  --ntb-space-2: 0.5rem;
  --ntb-space-3: 1rem;
  --ntb-space-4: 1.25rem;
  --ntb-space-5: 1.5rem;
  /* typography */
  --ntb-font-size-xs: 0.8rem;
  --ntb-font-size-display: 2rem;
  --ntb-font-weight-bold: 700;
  --ntb-font-weight-heavy: 800;
  /* z-index */
  --ntb-z-sticky: 1020;
  --ntb-z-overlay: 1030;
  --ntb-z-modal: 1055;
  --ntb-z-widget: 1060;
  --ntb-z-toast: 1090;
  /* motion */
  --ntb-transition-fast: 0.18s ease;
  --ntb-transition-base: 0.3s ease;
  /* Bootstrap既定の純白(#fff)をページ地トークンに差し替え */
  --bs-body-bg: var(--ntb-color-surface-page);
}

/* ---- ダーク: Tomorrow Night Blue ベース + MOL ブランド映え微調整 ---- */
[data-bs-theme="dark"] {
  /* Bootstrap body背景をグレーから濃紺に上書き */
  --bs-body-bg: #001a3d;
  --bs-body-color: #ffffff;
  --ntb-color-brand: #4d9fff;
  --ntb-color-brand-strong: #7ab8ff;
  --ntb-color-brand-subtle: #003f8e;
  --ntb-color-text: #ffffff;
  --ntb-color-muted: #7285b7;
  --ntb-color-surface: #004a99;
  --ntb-color-surface-subtle: #005bb8;
  --ntb-color-border: #2b6fc2;
  --ntb-color-border-dashed: #4b82c9;
  /* state subtle: 濃紺に各色をわずかに混ぜた暗トーン（目視調整前提のたたき台） */
  --ntb-color-danger-subtle: #3a1f2a;
  --ntb-color-success-subtle: #14301f;
  --ntb-color-primary-subtle: #103258;
  --ntb-color-warning-subtle: #332a16;
  /* 運航会社カラー: 色相は維持したまま暗背景で沈まないよう明度を上げる */
  --ntb-color-company-green: #2fbf7d;
  --ntb-color-company-green-accent: #4ad9a0;
  --ntb-color-company-green-subtle: #14301f;
  --ntb-color-company-orange: #ff6a3d;
  --ntb-color-company-orange-accent: #ff9166;
  --ntb-color-company-orange-subtle: #3d2118;
  /* shadow: 暗背景では濃い影＋不透明度UP */
  --ntb-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.4);
  --ntb-shadow-card-hover: 0 14px 28px rgba(0, 0, 0, 0.5);
  --ntb-shadow-hero: 0 12px 30px rgba(0, 0, 0, 0.4);
  --ntb-shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* =========================================================================
   ダークモード フォールバック層（フェーズB）
   -------------------------------------------------------------------------
   157テンプレート中80が独自 <style> を持ち、面・文字色を直書きしている。
   全件をトークン化するのは本番リスクが高いため、ダーク時のみ
   「白い面」「黒い文字」を一括で拾う防御層をここに置く。

   ★ すべて [data-bs-theme="dark"] 配下。ライト表示は一切変わらない。
   ★ 個別画面をトークン化すれば、その画面はこの層より詳細度の高い
     指定で自然に上書きされる（この層は最後の砦）。
   ========================================================================= */

/* ---- Bootstrap ユーティリティ: 面 ---- */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--ntb-color-surface) !important;
  color: var(--ntb-color-text);
}

/* ---- Bootstrap ユーティリティ: 文字 ---- */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
  color: var(--ntb-color-text) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
  color: var(--ntb-color-muted) !important;
}

/* ---- 面を持つ主要コンポーネント ---- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .offcanvas {
  background-color: var(--ntb-color-surface);
  border-color: var(--ntb-color-border);
  color: var(--ntb-color-text);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  background-color: var(--ntb-color-surface-subtle);
  border-color: var(--ntb-color-border);
}

/* ---- テーブル: 直書き背景を透過させて body 背景を活かす ---- */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ntb-color-text);
  --bs-table-border-color: var(--ntb-color-border);
}

[data-bs-theme="dark"] .table > thead th {
  background-color: var(--ntb-color-surface-subtle);
  background-image: none;  /* グラデーション直書き対策 */
  color: var(--ntb-color-text);
  border-color: var(--ntb-color-border);
}

/* ---- フォーム ---- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--ntb-color-surface-subtle);
  border-color: var(--ntb-color-border);
  color: var(--ntb-color-text);
}

[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
  background-color: var(--ntb-color-brand-subtle);
  color: var(--ntb-color-muted);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--ntb-color-muted);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--ntb-color-surface-subtle);
  border-color: var(--ntb-color-border);
  color: var(--ntb-color-text);
}

/* ---- 境界線ユーティリティ ---- */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start {
  border-color: var(--ntb-color-border) !important;
}

/* ---- サードパーティ（Select2 / Flatpickr）の白い面 ---- */
[data-bs-theme="dark"] .select2-container--default .select2-selection,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .flatpickr-calendar {
  background-color: var(--ntb-color-surface);
  border-color: var(--ntb-color-border);
  color: var(--ntb-color-text);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered,
[data-bs-theme="dark"] .flatpickr-day {
  color: var(--ntb-color-text);
}

/* =========================================================================
   モーション設定の尊重
   pulse / fuelPulse など無限ループするアニメーションを、
   OS で「視差効果を減らす」を有効にした利用者に対してのみ停止する。
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}