/* =====================================================================
   tools-dev / tools ダークモード（2026-09-28）

   club の仕組みを踏襲する。状態は Cookie ecm_theme（domain=.ec-masters.net）で
   club / サポートレター / フォーラム / 動画 と共有する。

   ★方針
     ① Bootstrap 5.3 が持つダーク（data-bs-theme="dark"）に土台を任せる。
     ② ここで書くのは「Bootstrap が知らない独自クラス」だけ。
     ③ セレクタは必ず html[data-theme="dark"] 配下に閉じる。
        ライトの利用者には 1px も影響しない。

   ★詳細度について（2026-09-28 修正）
     各テンプレートは <style> をページ内に持っており、外部CSSより後に評価される。
     同じ詳細度だと負けるため、独自クラスの打ち消しは
       html[data-theme="dark"] .xxx  （0,2,0）
     では足りないことがある。確実に当てたいものは !important を付ける。
     ここは「ダークのときだけ」効く閉じた範囲なので、!important の副作用は無い。
   ===================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  /* 地色は html にも入れる。body だけだと padding/margin の隙間から白が出る */
  background-color: var(--bs-body-bg, #212529);
}

/* ---------------------------------------------------------------
   0. 面と文字の基本値（Bootstrap のトークンに寄せる）
   --------------------------------------------------------------- */
html[data-theme="dark"] body {
  background-color: var(--bs-body-bg, #212529);
  color: var(--bs-body-color, #dee2e6);
}

/* ---------------------------------------------------------------
   1. カード（.app-card）とその中身
      ★テンプレートが background:#fff / color:#222 を直書きしているため、
        背景だけ暗くして文字が黒のまま＝読めない、という状態になっていた。
        面・枠・文字をまとめて倒す。
   --------------------------------------------------------------- */
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .notice-widget {
  background: var(--bs-secondary-bg, #2b3035) !important;
  border-color: var(--bs-border-color, #495057) !important;
  color: var(--bs-body-color, #dee2e6) !important;
}
html[data-theme="dark"] .app-card-header,
html[data-theme="dark"] .app-card-footer {
  border-color: var(--bs-border-color, #495057) !important;
}
html[data-theme="dark"] .app-card-title,
html[data-theme="dark"] .card-name {
  color: var(--bs-emphasis-color, #f8f9fa) !important;
}
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .favorite-title,
html[data-theme="dark"] .notice-widget ul li {
  color: var(--bs-secondary-color, #adb5bd) !important;
}
html[data-theme="dark"] .section-title {
  color: var(--bs-emphasis-color, #f8f9fa) !important;
}

/* アイコンの下地は白のまま残す（ロゴが白前提で作られているため） */
html[data-theme="dark"] .icon-container {
  background: #fff;
}

/* お気に入りの丸ボタン */
html[data-theme="dark"] .favorite {
  background: var(--bs-tertiary-bg, #343a40) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .favorite-icon {
  color: #6c757d;
}

/* ---------------------------------------------------------------
   2. バッジ（.badge-outline-*）
      background:white 直書きなので透過にする。文字色と枠線はそのまま活かす。
   --------------------------------------------------------------- */
html[data-theme="dark"] .badge-outline-primary,
html[data-theme="dark"] .badge-outline-info,
html[data-theme="dark"] .badge-outline-warning,
html[data-theme="dark"] .badge-outline-success,
html[data-theme="dark"] .badge-outline-diamond {
  background: transparent !important;
}
/* ライトで #666/#aaa だったものは暗い面で沈むので少し上げる */
html[data-theme="dark"] .badge-outline-diamond {
  color: #adb5bd !important;
  border-color: #6c757d !important;
}

/* ---------------------------------------------------------------
   3. サイドバー・カテゴリ一覧
      ★Bootstrap のクラスを使っておらず白のまま残っていた部分。
        よく使う汎用クラスをまとめて倒す。
   --------------------------------------------------------------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: var(--bs-body-bg, #212529) !important;
}
html[data-theme="dark"] .text-dark {
  color: var(--bs-body-color, #dee2e6) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: var(--bs-border-color, #495057) !important;
}

/* リスト系（list-group をサイドバーに使っている場合） */
html[data-theme="dark"] .list-group-item {
  background-color: var(--bs-body-bg, #212529);
  border-color: var(--bs-border-color, #495057);
  color: var(--bs-body-color, #dee2e6);
}
html[data-theme="dark"] .list-group-item:hover {
  background-color: var(--bs-tertiary-bg, #343a40);
}

/* ---------------------------------------------------------------
   4. テーブル
   --------------------------------------------------------------- */
html[data-theme="dark"] table.table {
  --bs-table-bg: transparent;
  color: var(--bs-body-color, #dee2e6);
}

/* ---------------------------------------------------------------
   5. 外部ライブラリ（tablesorter 等）
   --------------------------------------------------------------- */
html[data-theme="dark"] .tablesorter-default th,
html[data-theme="dark"] .tablesorter-default thead td {
  background-color: var(--bs-secondary-bg, #343a40);
  color: var(--bs-body-color, #dee2e6);
  border-color: var(--bs-border-color, #495057);
}

/* ---------------------------------------------------------------
   6. 画像の白飛び対策（必要な要素に .ecm-dark-dim を付けて使う）
   --------------------------------------------------------------- */
html[data-theme="dark"] img.ecm-dark-dim {
  filter: brightness(.85);
}

/* ---------------------------------------------------------------
   7. レイアウト本体（default.php のインライン <style> の打ち消し）
      .app-header { background:#fff }, .app-body { background:#f9fafb } が
      直書きされているため、ここで倒す。
   --------------------------------------------------------------- */
html[data-theme="dark"] .app-header {
  background: var(--bs-secondary-bg, #2b3035) !important;
  border-bottom-color: var(--bs-border-color, #495057) !important;
  color: var(--bs-body-color, #dee2e6);
}
html[data-theme="dark"] .app-body {
  background: var(--bs-body-bg, #212529) !important;
}
html[data-theme="dark"] .app-page,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .app-wrapper {
  background: var(--bs-body-bg, #212529);
  color: var(--bs-body-color, #dee2e6);
}

/* 見出し・リンクの既定色 */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: var(--bs-emphasis-color, #f8f9fa);
}

/* ---------------------------------------------------------------
   7. テーブルのヘッダ・セル（2026-09-30 追加）
      既存の 4. は table.table の背景を transparent にするだけで、
      thead th の白背景（Bootstrap / 各ツールのCSS由来）が残っていた。
      RPPキャンペーン画面などで見出し行が白いままだったため補う。
   --------------------------------------------------------------- */
html[data-theme="dark"] table.table > thead > tr > th,
html[data-theme="dark"] table.table > thead > tr > td,
html[data-theme="dark"] .table-bordered > thead > tr > th {
  background-color: var(--bs-secondary-bg, #343a40) !important;
  color: var(--bs-emphasis-color, #f8f9fa) !important;
  border-color: var(--bs-border-color, #495057) !important;
}
html[data-theme="dark"] table.table > tbody > tr > td,
html[data-theme="dark"] table.table > tbody > tr > th {
  color: var(--bs-body-color, #dee2e6);
  border-color: var(--bs-border-color, #495057);
}
/* table-hover の行ホバー（既定は白寄りの色が乗る） */
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--bs-tertiary-bg, #3a4047) !important;
  color: var(--bs-emphasis-color, #f8f9fa);
}
/* 縞模様 */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #31363c !important;
}
/* 枠線 */
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--bs-border-color, #495057) !important;
}
/* 表を囲む横スクロール枠 */
html[data-theme="dark"] .table-responsive {
  background-color: transparent;
}