/* ===============================
   カラートークン
==================================*/
:root{
  --bg:        #f7f8fa;
  --text:      #0f172a;
  --muted:     #64748b;
  --card:      #ffffff;
  --border:    #e5e7eb;
  --accent:    #2563eb;
  --accent-weak:#dbeafe;
  --shadow:    0 1px 6px rgba(0,0,0,.06);
}

/* ダーク */
html[data-theme="dark"]{
  --bg:        #0b1220;   /* ページ背景は黒に近い濃紺 */
  --text:      #e6edf7;   /* 文字は明るいグレー */
  --muted:     #93a4bf;
  --card:      #1c1f26;   /* ★ カードを濃いグレーに変更 */
  --border:    #2b2f38;   /* カードの枠も暗めに */
  --accent:    #60a5fa;
  --accent-weak:#0b295a;
  --shadow:    0 1px 8px rgba(0,0,0,.35);
}

/* ベース適用 */
body{
  background: var(--bg);
  color: var(--text);
}

/* リンク */
a{ color: var(--accent); }
a:hover{ text-decoration: underline; }

/* 境界/表面 */
hr, .wp-block-separator{ border-color: var(--border); }
.wp-block-table, table{ border-color: var(--border); }
.wp-block-table td, .wp-block-table th, table td, table th{ border-color: var(--border); }

/* ===============================
   コンポーネント（自分WIKI想定）
==================================*/

/* ディレクトリ：カード */
#dareca-dir .dir-card{
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  color: var(--text);
}
#dareca-dir .dir-card .dir-name{ color: var(--text); }
#dareca-dir .dir-card .dir-meta{ color: var(--muted); }

/* タグ・バッジ */
#dareca-dir .dir-tags .tag,
.sw-skill-tag, .sw-region-tag{
  background: var(--accent-weak);
  color: var(--text);
  border: 1px solid var(--border);
}

/* プロフィール：セクション */
.sw-section{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
}

/* SNSアイコン（SVG塗り差し替えに効く） */
.sw-sns-icon svg{ fill: var(--text); opacity:.9; }
.sw-sns-icon:hover svg{ opacity:1; }

/* Better Messages 等の背景が真っ黒にならないようガード */
.bm-wrapper, .bpbm-wrapper{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* トグルボタン */
.sw-theme-toggle{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: .5rem .75rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, border-color .2s ease, background .2s ease;
}
.sw-theme-toggle:hover{ border-color: var(--accent); }
.sw-theme-toggle:active{ transform: translateY(1px); }

/* ===== ダークモードでカード強制 ===== */
html[data-theme="dark"] .sw-section,
html[data-theme="dark"] #dareca-dir .dir-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ===== Dark: 取りこぼし上書き（カード/箱/テーブル/フォーム） ===== */
html[data-theme="dark"] .sw-section,
html[data-theme="dark"] .sw-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .sw-profile-header,
html[data-theme="dark"] .sw-name-box,
html[data-theme="dark"] .sw-summary,
html[data-theme="dark"] .sw-info,
html[data-theme="dark"] .sw-profile-table,
html[data-theme="dark"] #dareca-dir .dir-card,
html[data-theme="dark"] .wp-block-group.has-background,
html[data-theme="dark"] .wp-block-columns.has-background,
html[data-theme="dark"] .wp-block-column.has-background,
html[data-theme="dark"] .wp-block-table,
html[data-theme="dark"] table {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

/* テーブルセル（プロフィールの表など） */
html[data-theme="dark"] .wp-block-table td,
html[data-theme="dark"] .wp-block-table th,
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* チップ/タグ（楕円のバッジ） */
html[data-theme="dark"] .sw-skill-tag,
html[data-theme="dark"] .sw-region-tag,
html[data-theme="dark"] #dareca-dir .dir-tags .tag {
  background: #242833 !important;   /* 濃いグレーのピル */
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 入力欄・ボタンの下地が白固定の対策 */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1e222b !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .button,
html[data-theme="dark"] button {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* プラグイン系の白背景を包ごと上書き（保険） */
html[data-theme="dark"] [class*="box"],
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Dark: Directory フィルター（地域/ジャンル） ===== */
html[data-theme="dark"] #dareca-dir .dir-filter {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] #dareca-dir .dir-filter fieldset.dir-region,
html[data-theme="dark"] #dareca-dir .dir-filter fieldset.dir-genres {
  background: var(--card) !important;
  border: 0 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] #dareca-dir .dir-filter legend {
  color: var(--muted) !important;
}

/* ラベルの文字が薄く見える対策（opacity 指定を打消し） */
html[data-theme="dark"] #dareca-dir .dir-filter label span {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* ラジオ/チェックの下地と枠線 */
html[data-theme="dark"] #dareca-dir .dir-filter input[type="radio"],
html[data-theme="dark"] #dareca-dir .dir-filter input[type="checkbox"] {
  background: #1e222b !important;
  border: 1px solid var(--border) !important;
}

/* ボタン行の箱 */
html[data-theme="dark"] #dareca-dir .dir-actions {
  background: transparent !important;
  border-top: 0 !important;
}

/* もし .sw-btn が白固定なら */
html[data-theme="dark"] #dareca-dir .sw-btn.ghost {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Dark: SKILL / 趣味 行（ピル）のテキストを濃いグレーに ===== */
html[data-theme="dark"] .sw-section .sw-rows .sw-row {
  background: #232833 !important;        /* 濃いグレー背景 */
  border: 1px solid var(--border) !important;
  color: #d1d5db !important;             /* ← テキストは濃いグレー */
  box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .sw-section .sw-rows .sw-row__name {
  color: #d1d5db !important;             /* ← 明るすぎない落ち着いたグレー */
  opacity: 1 !important;
}

/* 見出しは少し強めに */
html[data-theme="dark"] .sw-section > h2 {
  color: #e5e7eb !important;             /* 少し薄めの白グレー */
}

/* ===== Dark: 公開一覧 / 公開ページ ボタンを白文字＋白枠線 ===== */
html[data-theme="dark"] .sw-btn.ghost,
html[data-theme="dark"] .sw-btn.is-secondary,
html[data-theme="dark"] .sw-btn.disabled {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  opacity: 1 !important;   /* グレーアウトを打消し */
}

html[data-theme="dark"] .dareca-brand img {
  filter: brightness(0) invert(1);
}

/* ===== Dark: ACFリピーター 左カラム＆行番号も濃いグレーに ===== */
html[data-theme="dark"] .acf-repeater .acf-table,
html[data-theme="dark"] .acf-repeater .acf-row,
html[data-theme="dark"] .acf-repeater .acf-row.-odd,
html[data-theme="dark"] .acf-repeater .acf-row.-even,
html[data-theme="dark"] .acf-table th,
html[data-theme="dark"] .acf-table td,
html[data-theme="dark"] .acf-table .acf-label,
html[data-theme="dark"] .acf-table .acf-label label,
html[data-theme="dark"] .acf-repeater .acf-row-handle,
html[data-theme="dark"] .acf-repeater .acf-row-handle.order,
html[data-theme="dark"] .acf-repeater .acf-row-handle.remove {
  background: #232833 !important;       /* 周囲と同トーン */
  color: var(--text) !important;
  border-color: var(--border) !important;
  opacity: 1 !important;                 /* 薄くされてたら打消し */
}

/* 入力エリア側の色（中の input/textarea を暗色に統一） */
html[data-theme="dark"] .acf-table .acf-input,
html[data-theme="dark"] .acf-table .acf-input input[type="text"],
html[data-theme="dark"] .acf-table .acf-input textarea {
  background: #1e222b !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Dark: ACF リピーター左カラムを完全にダーク統一 ===== */
html[data-theme="dark"] .acf-repeater .acf-table th,
html[data-theme="dark"] .acf-repeater .acf-table td.acf-field.-label,
html[data-theme="dark"] .acf-repeater .acf-field .acf-label,
html[data-theme="dark"] .acf-repeater .acf-field .acf-label label {
  background: #232833 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ラベル列に出る“白い小箱”対策（テーマ/ACFが付ける疑似要素） */
html[data-theme="dark"] .acf-repeater .acf-field .acf-label::before,
html[data-theme="dark"] .acf-repeater .acf-field .acf-label::after,
html[data-theme="dark"] .acf-repeater .acf-row-handle::before,
html[data-theme="dark"] .acf-repeater .acf-row-handle::after {
  background: #232833 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* 万一ラベルセル内にボタン/入力がある場合の保険 */
html[data-theme="dark"] .acf-repeater .acf-table td.acf-field.-label input,
html[data-theme="dark"] .acf-repeater .acf-table td.acf-field.-label .button,
html[data-theme="dark"] .acf-repeater .acf-table td.acf-field.-label .acf-button {
  background: #232833 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Dark: ACF テーブル全セルを強制ダーク化 ===== */
html[data-theme="dark"] .acf-repeater table.acf-table th,
html[data-theme="dark"] .acf-repeater table.acf-table td {
  background-color: #232833 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Dark: ACFリピーター左カラム（年/内容ラベル部分） ===== */
html[data-theme="dark"] .acf-repeater td.acf-fields.-left,
html[data-theme="dark"] .acf-repeater td.acf-fields.-left .acf-label,
html[data-theme="dark"] .acf-repeater td.acf-fields.-left label {
  background: #232833 !important;   /* 濃いグレーに統一 */
  color: var(--text) !important;    /* 文字色も白寄りに */
  border-color: var(--border) !important;
}

/* ===== Dark: 実績テーブル 左列（年/内容）を完全ダーク化 ===== */
html[data-theme="dark"] .acf-repeater td.acf-fields.-left,
html[data-theme="dark"] .acf-repeater td.acf-fields.-left *,
html[data-theme="dark"] .acf-repeater td.acf-fields.-left::before,
html[data-theme="dark"] .acf-repeater td.acf-fields.-left::after {
  background: #232833 !important;
  background-color: #232833 !important;  /* background-image対策 */
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 行番号ハンドル側も同トーンに（念のため） */
html[data-theme="dark"] .acf-repeater .acf-row-handle,
html[data-theme="dark"] .acf-repeater .acf-row-handle::before,
html[data-theme="dark"] .acf-repeater .acf-row-handle::after {
  background: #232833 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}