/* =====================================================================
   /video（root vhost の CakePHP・レイアウト video.ctp）ダークテーマ
   2026-09-16。読み込み順は theme-tokens.css → video-dark.css
   適用条件は html[data-theme="dark"] の1属性だけ。

   ⚠️このレイアウトは /video 以外に /point（試作中）と payments（条件付き）でも使われる。
     検証Cookieを持つ人にはそれらも暗くなる（一般ユーザーには出ない）。
   Bootstrap 5 ベース。明るい面は実測で10セレクタ・3色（#f1f1f1 と白がほぼ全部）。
   ===================================================================== */

html[data-theme="dark"] body{
  background-color: var(--v2-page-bg) !important;
  color: var(--v2-text-body);
}

/* 面（コンテンツの地） */
html[data-theme="dark"] .video-contents,
html[data-theme="dark"] #content,
html[data-theme="dark"] .flex-fill{
  background-color: var(--v2-page-bg) !important;
  color: var(--v2-text-body);
}

/* ヘッダーのナビ（bg-white が当たっている） */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-light,
html[data-theme="dark"] .bg-white{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link{ color: var(--v2-text-sub) !important; }
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover{ color: var(--v2-text) !important; }

/* 動画カード */
html[data-theme="dark"] .card,
html[data-theme="dark"] .video-content,
html[data-theme="dark"] .thumbnail-block{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .card-title{ color: var(--v2-text) !important; }
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted{ color: var(--v2-text-muted) !important; }

/* 見出し・本文・リンク */
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(--v2-text-strong); }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] dd, html[data-theme="dark"] dt,
html[data-theme="dark"] td, html[data-theme="dark"] th, html[data-theme="dark"] label{ color: var(--v2-text-body); }
html[data-theme="dark"] a{ color: var(--v2-link); }
html[data-theme="dark"] a:hover{ color: var(--v2-link-hover); }
/* カード全体がリンクになっている場合は、カード側の文字色を活かす */
html[data-theme="dark"] a.card,
html[data-theme="dark"] .card a{ color: inherit; }
html[data-theme="dark"] .card a:hover{ color: var(--v2-link-hover); }

/* 入力欄（★背景と文字色は必ずセット） */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background-color: var(--v2-surface-card) !important;
  color: var(--v2-text) !important;
  border-color: var(--v2-border-input) !important;
}
html[data-theme="dark"] .form-control::placeholder{ color: var(--v2-text-dim); }

/* ボタン（既定の白系だけ。色付きは意味があるので触らない） */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-secondary{
  background-color: var(--v2-fill) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}

/* リスト・表・区切り */
html[data-theme="dark"] .list-group-item{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .table{ color: var(--v2-text-body); }
html[data-theme="dark"] .table > :not(caption) > * > *{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] hr{ border-color: var(--v2-border); }
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(--v2-border) !important; }

/* ページャ・タブ */
html[data-theme="dark"] .page-link{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-link) !important;
}
html[data-theme="dark"] .page-item.active .page-link{
  background-color: var(--v2-accent) !important;
  border-color: var(--v2-accent) !important;
  color: var(--v2-on-accent) !important;
}
html[data-theme="dark"] .nav-tabs{ border-color: var(--v2-border) !important; }
html[data-theme="dark"] .nav-tabs .nav-link{ color: var(--v2-text-sub) !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) var(--v2-border) var(--v2-surface) !important;
  color: var(--v2-text) !important;
}

/* モーダル・ドロップダウン */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
  background-color: var(--v2-surface) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{ border-color: var(--v2-border) !important; }
html[data-theme="dark"] .dropdown-item{ color: var(--v2-text-sub) !important; }
html[data-theme="dark"] .dropdown-item:hover{ background-color: var(--v2-fill) !important; color: var(--v2-text) !important; }

/* --- ダーク適用後の実測で残ったもの（site_check.js / path_probe.js の棚卸し） --- */
/* ★黒文字の出どころは video.css の `#sidebar a{color:black}` 系。
   祖先をたどると全部 a.nav-link 配下だった（推測でなく実測） */
html[data-theme="dark"] #sidebar a,
html[data-theme="dark"] #sidebar a *,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-link *{ color: var(--v2-text-body) !important; }
html[data-theme="dark"] #sidebar .category-title,
html[data-theme="dark"] .category-title{ color: var(--v2-text) !important; }

/* タグボタン（#tag-content .active{color:black !important}） */
html[data-theme="dark"] #tag-content .active,
html[data-theme="dark"] .tag-btn{ color: var(--v2-text-body) !important; }
html[data-theme="dark"] .tag-btn{ background-color: var(--v2-fill) !important; border-color: var(--v2-border) !important; }

/* 動画カードの詳細部（#f1f1f1）と、フォーム内の面（#f9f9f9） */
html[data-theme="dark"] .video-detail,
html[data-theme="dark"] form > div{
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .video-title{ color: var(--v2-text) !important; }

/* パンくず */
html[data-theme="dark"] .breadcrumb-item.active{ color: var(--v2-text-muted) !important; }

/* 読み込み中のオーバーレイ */
html[data-theme="dark"] #loading_contents{
  background-color: var(--v2-page-bg) !important;
  color: var(--v2-text-body) !important;
}

/* 日付・件数・カテゴリなどの補助テキスト（#777 が当たっていてコントラスト4.07だった） */
html[data-theme="dark"] .video-detail span,
html[data-theme="dark"] .video-content span{ color: var(--v2-text-muted) !important; }
html[data-theme="dark"] .video-detail .video-title,
html[data-theme="dark"] .video-content .video-title{ color: var(--v2-text) !important; }

/* ---------------------------------------------------------------
   動画再生ページ（/video/play/...）のコメント欄
   ★CSSは View/Video/play.ctp の中に直書きされている（bodyに出るので
     読み込み順ではこちらが後だが、詳細度はこちらが上なので勝てる）。
     吹き出し・引用・リアクション・リンクプレビューが一式そこで定義されている。
   --------------------------------------------------------------- */
html[data-theme="dark"] span.msg,
html[data-theme="dark"] .msg{
  background: var(--v2-fill) !important;
  color: var(--v2-text) !important;
}
html[data-theme="dark"] .datetime{ color: var(--v2-text-muted) !important; }

/* 引用（返信元の吹き出し） */
html[data-theme="dark"] .reply-quote{
  background: var(--v2-surface-card) !important;
  border-left-color: var(--v2-border-input) !important;
  color: var(--v2-text-muted) !important;
}
html[data-theme="dark"] .reply-quote .reply-quote-nickname{ color: var(--v2-text-sub) !important; }
html[data-theme="dark"] .reply-quote .reply-quote-msg{ color: var(--v2-text-muted) !important; }

/* リアクションのバッジ */
html[data-theme="dark"] .reaction-count-badge{
  background: var(--v2-surface-card) !important;
  color: var(--v2-text-sub) !important;
  border-color: var(--v2-border) !important;
}
html[data-theme="dark"] .reaction-count-badge.has-reaction{
  background: var(--v2-fill-hover) !important;
  border-color: var(--v2-border-input) !important;
  color: var(--v2-text) !important;
}

/* リンクプレビュー */
html[data-theme="dark"] .link-preview{
  background: var(--v2-surface-card) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}
html[data-theme="dark"] .link-preview:hover{ background: var(--v2-fill) !important; }
html[data-theme="dark"] .link-preview-title{ color: var(--v2-link) !important; }
html[data-theme="dark"] .link-preview-desc{ color: var(--v2-text-muted) !important; }

/* チャット欄そのもの */
html[data-theme="dark"] #chat-contents,
html[data-theme="dark"] #chatlog,
html[data-theme="dark"] .message{
  background: var(--v2-page-bg) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-body) !important;
}

/* 購入案内などの bg-light（bootstrapの明色ユーティリティ） */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .purchase-list{
  background-color: var(--v2-surface) !important;
  color: var(--v2-text-body) !important;
}
/* .text-light は本来「明るい文字」なのに #777 が当たっていて暗い面で沈む */
html[data-theme="dark"] .text-light{ color: var(--v2-text-muted) !important; }

/* サムネイル画像はそのまま（反転しない） */

/* モーダルの閉じる×（黒のまま暗い面に乗っていた） */
html[data-theme="dark"] .modal .close,
html[data-theme="dark"] .modal .close span,
html[data-theme="dark"] .modal-header .close{
  color: var(--v2-text-sub) !important;
  opacity: .9 !important;
  text-shadow: none !important;
}