/*
 * am_cockpit.css — AM ストラテジー・コックピット「ダーク・コックピット」テーマ
 * ------------------------------------------------------------------------
 * スコープ厳守: すべてのルールは `body.am-mode` 配下に限定する。
 *  - body.am-mode は category === 'am-dashboard' のときだけ付与(app.js) →
 *    AMモードを抜けた瞬間、このテーマは一切効かない = 他カテゴリへ絶対に漏れない。
 *  - AMモード中は「ページ全体」がコックピット(シェル + 4塔 + レポート + アンケート + Google広告)。
 *    白いアプリシェルの中に暗い箱が浮く分断を避けるため、ヘッダー/地色/埋め込みビューまで
 *    一貫してダーク化する。
 *
 * 構成:
 *   §0 パレット変数        §1 シェル(body/ヘッダー/編集用パネルの非表示)
 *   §2 共通ダーク化        (4塔 + レポート + アンケート + Google広告 = CONTENT スコープ)
 *   §3 AM専用(サブナビ/トップバーのコントロール/操作ガイド・ドロワー)
 *   §4 レポート/アンケート個別(インラインstyle・注入CSS・PDF等の“CSSで届かない”対処)
 *
 * CONTENT スコープ = `body.am-mode :is(#am-dashboard-section,#report-section,#survey-section,#google-ads-section)`
 *   :is() の詳細度は最も強い引数(=ID)を採用するため、report.js が実行時注入する
 *   `#report-section .rpt-*` ルール(ID 1個)にも競り勝てる。
 *   Tailwind CDN の単一クラス(低詳細度)は常に上書きされる。
 * ========================================================================= */

/* ===========================================================================
 * §0 パレット
 * ========================================================================= */
body.am-mode {
  --am-bg: #0b1220;        /* ページ地色(最も暗い) */
  --am-panel: #0f1c31;     /* カード面 */
  --am-panel-2: #0f172a;   /* 補助パネル/テーブル帯 */
  --am-raised: #1e2f4d;    /* 罫線・持ち上げ面 */
  /* 文字階調。⚠ ライトUIの gray-400/300 をそのまま暗くすると暗背景で沈んで読めない
   * (実測コントラスト3.0前後)。11px級の細かい注記が多い画面なので、
   * 「弱い」階調でも本文コントラスト4.5:1を確保できる明るさに寄せている。 */
  --am-fg: #f1f5f9;        /* 既定文字 */
  --am-fg-2: #dbe4ee;      /* やや弱い文字 */
  --am-fg-3: #b3c0d1;      /* 補助文字 */
  --am-fg-4: #94a3b8;      /* 最も弱い文字(ラベル・注記) */
  --am-cyan: #38bdf8;      /* 主アクセント */
  --am-cyan-soft: #7dd3fc;
  --am-good: #34d399;
  --am-warn: #fbbf24;
  --am-bad: #f87171;
  --am-orange: #fb923c;
  --am-violet: #c4b5fd;
  --am-glow: rgba(56, 189, 248, 0.35);
}

/* ===========================================================================
 * §1 シェル: AMモード中はページ全体をコックピット地色に沈める
 * ========================================================================= */
body.am-mode {
  background-color: var(--am-bg);
  color: var(--am-fg);
}

/* ヘッダー(白帯 → 地色と同化した薄い境界のバー) */
body.am-mode header.bg-white {
  background-color: var(--am-bg);
  border-bottom: 1px solid var(--am-raised);
  box-shadow: none;
}
/* h1 はインラインstyleで色指定 → !important で上書き */
body.am-mode header h1 { color: var(--am-fg) !important; }
body.am-mode header .text-gray-600 { color: var(--am-fg-3); }
body.am-mode header .text-red-600 { color: var(--am-bad); }
body.am-mode header .text-red-600:hover { color: #fca5a5; }

/* ヘッダー右のSTABBLEロゴ: 原色の赤(#C8102E)は暗背景だと沈んでワードマークが読めないため、
 * AMモードでのみ明度を上げる(画像を差し替えずに済ませる) */
body.am-mode header #brand-watermark img { filter: brightness(1.45) saturate(1.05); }

/* ヘッダーの「📊 AMダッシュボード」ボタン: AMモード中は点灯状態 */
body.am-mode header .category-tab[data-category="am-dashboard"] {
  background: linear-gradient(135deg, var(--am-cyan), #6366f1);
  color: #0b1220;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}
body.am-mode header .category-tab[data-category="am-dashboard"] .bg-emerald-100 {
  background-color: rgba(11, 18, 32, 0.35);
  color: #0b1220;
  border-color: rgba(11, 18, 32, 0.4);
}

/* 店舗検索バー(#restaurant-picker-bar)。
 * AMは「担当者フィルタ × 担当店セレクタ」の2段構えをやめ、店舗を選ぶ必要があるビューでだけ
 * グルプラ本体と同じ「レストラン」検索窓(検索履歴付き)を出す方式に統一した。
 * バー自体は am_dashboard.js が #am-store-picker(サブタブ直下)へ move する。
 * ここでは「AMモードで #dashboard 直下に居るあいだ(=どのビューでも使わないとき)は隠す」だけを担う。
 * ⚠ セレクタをIDで名指しすること。`#dashboard > .mb-4` だと同じクラスを持つ
 *   #sticky-category-header(編集カテゴリタブ)まで巻き込み、AMで消えるはずのタブが出てしまう。
 * ⚠ 中の #restaurant-select(hidden select)は選択店舗の単一の真実なのでDOMからは消さない
 *   (display:none の子孫でも value/change は正常に機能する)。 */
body.am-mode #dashboard > #restaurant-picker-bar { display: none !important; }

/* 検索バーに同居する編集用ボタンはAMでは常に不要。 */
body.am-mode #sync-salesforce-btn,
body.am-mode #batch-add-btn { display: none !important; }

/* 検索窓のダーク配色。ドロップダウンの各項目は app.js が Tailwind クラスを
 * インラインで付けるため、ID起点(高詳細度)で上書きする。 */
body.am-mode #dashboard > .mb-4 > label { color: var(--am-fg-3); }
body.am-mode #restaurant-search-input {
  background-color: var(--am-panel-2);
  color: var(--am-fg);
  border-color: var(--am-raised);
}
body.am-mode #restaurant-search-input::placeholder { color: var(--am-fg-4); }
body.am-mode #restaurant-search-dropdown {
  background-color: var(--am-panel);
  border-color: var(--am-raised);
  color: var(--am-fg);
}
body.am-mode #restaurant-search-dropdown > div {
  border-color: var(--am-raised) !important;
  color: var(--am-fg);
}
body.am-mode #restaurant-search-dropdown > div:hover { background-color: var(--am-raised) !important; }
/* 履歴ヘッダー(「最近の検索」/「すべての店舗」)と「クリア」ボタン */
body.am-mode #restaurant-search-dropdown > div > span,
body.am-mode #restaurant-search-dropdown > div > button { color: var(--am-fg-3); }

/* AMモードでは編集ワークフロー用パネルを隠す(コックピットに無関係なため)。
 * 対象: 新規タスク作成フォーム / 一括処理リスト / コース一括操作 / プレビュー / レストラン実行履歴。
 * ⚠ #dashboard 直下のモーダル(.fixed)は対象外 — 一括で隠すと開けなくなるため、
 *   「常時表示の編集パネル」だけを構造(直下 + カード用クラス)と ID で名指しする。 */
body.am-mode #dashboard > #batch-queue-panel,
body.am-mode #dashboard > #course-bulk-action-panel,
body.am-mode #dashboard > div.bg-white.rounded-lg.shadow-md.p-6 {
  display: none !important;
}

/* Google広告セクション内の自前タブ行(📊ダッシュボード / 新規作成)。
 * AMコックピットでは「📊 店舗ダッシュボード」「➕ キャンペーン新規作成」サブタブが同じ役割を担うため、
 * 二重のタブ行になるのを避けて隠す。切替は am_dashboard.js が window.gaShowSubtab() で駆動する。 */
body.am-mode #ga-subtab-bar { display: none !important; }

/* 4塔セクション自体は「箱」をやめ、地色と一体化(=分断の主因だった枠を撤廃) */
body.am-mode #am-dashboard-section {
  background: transparent;
  color: var(--am-fg);
  padding: 0;
  border-radius: 0;
}
/* 主パネル(shellChrome直下の .bg-white): コックピットのヘッドバー */
body.am-mode #am-dashboard-section > .bg-white {
  background: radial-gradient(120% 140% at 0% 0%, #14263f, var(--am-bg) 60%);
  border: 1px solid var(--am-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ===========================================================================
 * §2 共通ダーク化 — 4塔 / レポート / アンケート に等しく適用
 * ========================================================================= */

/* --- 2.1 面(背景) --- */
/* グラデーション地(bg-gradient-to-* + from-/to-)はライト前提の白系に向かうため無効化し、
 * ダークのパネル面に置き換える(市況サマリーの外枠などで使用)。 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) [class*="bg-gradient-to-"] {
  background-image: none;
  background-color: var(--am-panel-2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .bg-white {
  background-color: var(--am-panel);
  border-color: var(--am-raised);
  color: var(--am-fg);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
/* slate系は gray系と同義に扱う。拾い漏らすと暗いカードの中に明るいベタが残る(#google-ads-section の
 * 「同業比較」パネルや KPIタグ・チップが該当)。 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-gray-50, .bg-slate-50) {
  background-color: var(--am-panel-2);
  color: var(--am-fg-2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .bg-gray-100 {
  background-color: var(--am-panel-2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-gray-200, .bg-slate-200) {
  background-color: var(--am-raised);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-gray-300, .bg-slate-300) {
  background-color: #475569;
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .bg-gray-600 {
  background-color: #475569;
  color: var(--am-fg);
}
/* レポート指標カードはインライン style="background:淡色" を持つためクラス上書きが届かない。
 * !important でダーク面へ強制上書き(白背景×薄い明色文字で値が消えるバグの修正)。 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .rpt-metric-card {
  background: var(--am-panel) !important;
  border-color: var(--am-raised) !important;
}

/* --- 2.2 文字(グレースケール) --- */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.text-gray-900, .text-gray-800) { color: var(--am-fg); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.text-gray-700, .text-gray-600, .text-slate-700) { color: var(--am-fg-2); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .text-gray-500 { color: var(--am-fg-3); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.text-gray-400, .text-gray-300) { color: var(--am-fg-4); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .text-black { color: var(--am-fg); }

/* 見出しは淡発光でコックピット感 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(h2.text-lg, .text-lg.font-bold, h2.text-xl) {
  color: var(--am-fg);
  text-shadow: 0 0 12px var(--am-glow);
}

/* --- 2.3 罫線 --- */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.border, .border-t, .border-b, .border-l, .border-r, .border-2,
      .border-gray-50, .border-gray-100, .border-gray-200, .border-gray-300, .border-gray-900,
      .border-indigo-100, .border-indigo-200, .border-blue-100, .border-blue-200, .border-purple-200,
      .border-slate-200, .border-sky-200) {
  border-color: var(--am-raised);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) hr { border-color: var(--am-raised); }

/* --- 2.4 フォーム部品(input/select/textarea) --- */
/* ⚠ type 属性のない <input>(既定は text)も対象に含める。含めないと暗いカードから
 * 継承した明色文字(--am-fg)がブラウザ既定の白背景に乗り、「白文字が見えない」状態になる
 * (アンケートテンプレート編集の設問文/ラベル/値入力が該当)。 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(select, textarea, input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="password"]) {
  background-color: var(--am-panel-2);
  color: var(--am-fg);
  border: 1px solid var(--am-raised);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) select option {
  background-color: var(--am-panel-2);
  color: var(--am-fg);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(input, textarea)::placeholder {
  color: var(--am-fg-4);
}
/* ネイティブUI(日付ピッカーのアイコン等)を暗背景向けに反転 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) input::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65);
}
/* ファイル選択はネイティブUIで暗くできないため、周囲だけ整える */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) input[type="file"] {
  color: var(--am-fg-2);
}

/* --- 2.5 テーブル --- */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) table { color: var(--am-fg-2); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(thead tr, th) { color: var(--am-fg-4); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) tr { border-color: var(--am-raised); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(tbody tr:hover, .hover\:bg-gray-50:hover) {
  background-color: rgba(148, 163, 184, 0.08);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .hover\:bg-gray-100:hover {
  background-color: rgba(148, 163, 184, 0.12);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .hover\:bg-gray-200:hover {
  background-color: rgba(148, 163, 184, 0.16);
}

/* --- 2.6 セマンティックカラー: 淡い地色(-50/-100)は半透明ティント、文字は明色へ --- */
/* 赤(悪い) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-red-200, .bg-red-100, .bg-red-50, .bg-rose-100, .bg-rose-50) {
  background-color: rgba(248, 113, 113, 0.2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.text-red-900, .text-red-800, .text-red-700, .text-red-600, .text-red-500,
      .text-rose-900, .text-rose-700, .text-rose-600, .text-rose-500) { color: #fca5a5; }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.border-red-300, .border-red-200, .border-rose-200) {
  border-color: rgba(248, 113, 113, 0.45);
}
/* 琥珀(警告) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.bg-yellow-100, .bg-yellow-50, .bg-amber-50, .bg-amber-100, .bg-amber-200) {
  background-color: rgba(251, 191, 36, 0.2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.text-yellow-900, .text-yellow-800, .text-yellow-700, .text-yellow-600,
      .text-amber-900, .text-amber-800, .text-amber-700, .text-amber-600,
      .text-orange-900, .text-orange-800, .text-orange-700, .text-orange-600) { color: #fcd34d; }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.border-yellow-300, .border-yellow-200, .border-amber-300, .border-amber-200) { border-color: rgba(251, 191, 36, 0.45); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .hover\:bg-amber-200:hover {
  background-color: rgba(251, 191, 36, 0.26);
}
/* 翠(良い) — emerald と green は別クラスなので両方 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.bg-emerald-100, .bg-emerald-50, .bg-green-200, .bg-green-100, .bg-green-50, .bg-teal-100, .bg-teal-50) {
  background-color: rgba(52, 211, 153, 0.2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.text-emerald-900, .text-emerald-800, .text-emerald-700, .text-emerald-600,
      .text-green-900, .text-green-800, .text-green-700, .text-green-600,
      .text-teal-700, .text-teal-600) { color: #6ee7b7; }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.border-emerald-200, .border-green-200, .border-green-300) { border-color: rgba(52, 211, 153, 0.45); }
/* 橙(重大寄り) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-orange-100, .bg-orange-50) {
  background-color: rgba(251, 146, 60, 0.2);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.text-orange-800, .text-orange-700, .text-orange-600) { color: #fdba74; }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.border-orange-300, .border-orange-200) { border-color: rgba(251, 146, 60, 0.45); }
/* 青/藍/空(情報) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.bg-blue-50, .bg-blue-50\/40, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-sky-50, .bg-sky-100) {
  background-color: rgba(56, 189, 248, 0.1);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.text-indigo-900, .text-indigo-800, .text-indigo-700, .text-indigo-600, .text-indigo-500, .text-indigo-400,
      .text-blue-900, .text-blue-800, .text-blue-700, .text-blue-600, .text-blue-500,
      .text-sky-900, .text-sky-700, .text-sky-600) { color: #7dd3fc; }
/* 紫(補助アクセント) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-purple-100, .bg-purple-50, .bg-violet-50) {
  background-color: rgba(139, 92, 246, 0.22);
}
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  :is(.text-purple-900, .text-purple-800, .text-purple-700, .text-purple-600,
      .text-violet-900, .text-violet-700, .text-fuchsia-700) { color: #d8b4fe; }

/* 濃色ベタ(バー塗り・ドット)は暗背景で沈むので鮮やかな明色へ */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-emerald-500, .bg-emerald-400, .bg-green-400, .bg-green-500) { background-color: var(--am-good); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) :is(.bg-red-400, .bg-red-500, .bg-rose-500) { background-color: var(--am-bad); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .bg-yellow-400 { background-color: var(--am-warn); }
/* 「自店」バッジ等の強調タグ。淡いティントのままだと10px太字が3.7:1しか出ないので、
 * 地色を濃いアンバーの実色にして文字を暗くする(=ライトUIの見た目に近い高コントラスト)。 */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .bg-yellow-200 { background-color: rgba(251, 191, 36, 0.85); }
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section)
  .bg-yellow-200:is(.text-yellow-800, .text-yellow-700, .text-amber-800) { color: #0b1220; }

/* --- 2.7 ボタン ---
 * AM本体(4塔)の indigo/blue ボタンは既存のシアン発光を踏襲。
 * レポート/アンケートの色付きボタンは意味を持つ(生成/送信/削除など)ため、
 * 白文字を維持したまま暗背景で映える彩度に置換する(text-white を潰さない)。 */
body.am-mode #am-dashboard-section :is(.bg-indigo-600, .bg-blue-600) {
  background: linear-gradient(135deg, var(--am-cyan), #6366f1);
  color: #0b1220;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
body.am-mode #am-dashboard-section :is(.hover\:bg-indigo-700:hover, .bg-indigo-700) {
  background: linear-gradient(135deg, #0ea5e9, #4f46e5);
}
body.am-mode :is(#report-section, #survey-section) :is(.bg-indigo-600, .bg-blue-600) { background-color: #4f46e5; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-indigo-700, .hover\:bg-indigo-700:hover, .hover\:bg-blue-700:hover) { background-color: #4338ca; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-emerald-600, .bg-green-600) { background-color: #059669; }
body.am-mode :is(#report-section, #survey-section) :is(.hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover) { background-color: #047857; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-sky-600, .bg-sky-500) { background-color: #0284c7; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-sky-700, .hover\:bg-sky-700:hover) { background-color: #0369a1; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-purple-600, .bg-purple-700) { background-color: #7c3aed; }
body.am-mode :is(#report-section, #survey-section) .hover\:bg-purple-700:hover { background-color: #6d28d9; }
body.am-mode :is(#report-section, #survey-section) :is(.bg-teal-600, .bg-orange-600) { background-color: #0d9488; }
body.am-mode :is(#report-section, #survey-section) .bg-orange-600 { background-color: #ea580c; }
/* Google広告の teal ボタン(ラベル一括紐付け等)。既定の teal-600 は白文字で 3.7:1 しか出ないので
 * 一段濃くして 4.5:1 を確保する(14px medium = 通常文字扱い)。 */
body.am-mode #google-ads-section .bg-teal-600 { background-color: #0f766e; }
body.am-mode #google-ads-section .hover\:bg-teal-700:hover { background-color: #115e59; }
/* 色付きボタン上の白文字は必ず白のまま(上の面ルールに巻き込まれない) */
body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) .text-white { color: #ffffff; }
body.am-mode #am-dashboard-section :is(.bg-indigo-600, .bg-blue-600).text-white { color: #0b1220; }

/* --- 2.8 目立つ数値の発光 --- */
body.am-mode #am-dashboard-section :is(.text-3xl.font-extrabold, .text-3xl) { text-shadow: 0 0 14px var(--am-glow); }
body.am-mode #am-dashboard-section :is(.text-3xl.text-emerald-700, .text-3xl.text-emerald-600) { text-shadow: 0 0 14px rgba(52, 211, 153, 0.45); }
body.am-mode #am-dashboard-section :is(.text-3xl.text-red-700, .text-3xl.text-red-600) { text-shadow: 0 0 14px rgba(248, 113, 113, 0.45); }

body.am-mode :is(#am-dashboard-section, #report-section, #survey-section, #google-ads-section) details.bg-gray-50 { background-color: var(--am-panel-2); }

/* ===========================================================================
 * §3 AM専用パーツ
 * ========================================================================= */

/* --- 3.1 ピル型サブナビ --- */
body.am-mode #am-dashboard-section .am-view-tab { color: var(--am-fg-3); }
body.am-mode #am-dashboard-section .am-view-tab:hover { color: var(--am-fg); }
body.am-mode #am-dashboard-section .am-view-tab.bg-white {
  background: linear-gradient(135deg, var(--am-cyan), #6366f1);
  color: #0b1220;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

/* --- 3.1b 担当スコープの小トグル(市況/GBP/Map/トレンドの本体先頭) --- */
body.am-mode #am-dashboard-section .am-owner-scope { color: var(--am-fg-3); background-color: var(--am-panel-2); }
body.am-mode #am-dashboard-section .am-owner-scope:hover { color: var(--am-fg); }
body.am-mode #am-dashboard-section .am-owner-scope.bg-indigo-600 {
  background: linear-gradient(135deg, var(--am-cyan), #6366f1);
  color: #0b1220;
}

/* --- 3.2 トップバーのコントロール --- */
body.am-mode #am-dashboard-section select {
  background-color: var(--am-panel-2);
  color: var(--am-fg);
  border: 1px solid var(--am-raised);
}
body.am-mode #am-dashboard-section #am-exit {
  background-color: transparent;
  color: var(--am-cyan);
  border: 1px solid var(--am-cyan);
}
body.am-mode #am-dashboard-section #am-exit:hover {
  background-color: rgba(56, 189, 248, 0.12);
  color: var(--am-cyan-soft);
}

/* --- 3.3 操作ガイド・ドロワー(am_guide.js) ---------------------------------
 * body直下に置くため CONTENT スコープの :is(...) には入らない。ここで個別に着色する。
 * 描画HTMLは本体の操作ガイドと同一。色差はここだけで吸収する
 * (am_guide.js 側はインライン背景色を持たない)。
 * ------------------------------------------------------------------------- */
body.am-mode #am-guide-drawer.hidden { display: none !important; }
/* 非モーダル: 背景を覆わず、本文をドロワー幅ぶん左へ寄せる。
 * (覆うとAMのタブ行が押せなくなり「開いたままタブ追従」が成立しない) */
body.am-mode.am-guide-open { padding-right: min(480px, 92vw); }

body.am-mode #am-guide-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(480px, 92vw);
  display: flex; flex-direction: column;
  background: var(--am-panel);
  border-left: 1px solid var(--am-raised);
  box-shadow: -12px 0 32px rgba(2, 6, 23, 0.55);
  color: var(--am-fg);
}
body.am-mode .am-guide-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--am-raised);
}
body.am-mode .am-guide-title { font-weight: 700; color: var(--am-fg); }
body.am-mode .am-guide-close {
  font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 6px;
  color: var(--am-fg-3); background: transparent; border: 1px solid var(--am-raised);
}
body.am-mode .am-guide-close:hover { color: var(--am-fg); background: var(--am-raised); }
body.am-mode .am-guide-body { overflow-y: auto; padding: 12px 16px 32px; }

body.am-mode .am-guide-intro { margin-bottom: 12px; }
body.am-mode .am-guide-intro-t { font-size: 13px; font-weight: 700; color: var(--am-fg); margin-bottom: 4px; }
body.am-mode .am-guide-intro-b { font-size: 12px; color: var(--am-fg-3); margin-bottom: 8px; }
body.am-mode .am-guide-cards { display: grid; gap: 8px; }
body.am-mode .am-guide-card {
  background: var(--am-panel-2); border: 1px solid var(--am-raised);
  border-radius: 8px; padding: 8px 10px;
}
body.am-mode .am-guide-card-t { font-size: 12px; font-weight: 700; color: var(--am-fg-2); }
body.am-mode .am-guide-card-b { font-size: 11px; color: var(--am-fg-3); }

body.am-mode .am-guide-group,
body.am-mode .am-guide-sec {
  border: 1px solid var(--am-raised); border-radius: 8px;
  margin-top: 8px; background: var(--am-panel-2);
}
body.am-mode .am-guide-group-sum,
body.am-mode .am-guide-sec-sum {
  cursor: pointer; padding: 8px 10px; font-size: 13px; font-weight: 700;
  color: var(--am-fg); list-style: none;
}
body.am-mode .am-guide-group-sum::-webkit-details-marker,
body.am-mode .am-guide-sec-sum::-webkit-details-marker { display: none; }
body.am-mode .am-guide-group-sum::before,
body.am-mode .am-guide-sec-sum::before { content: '▶ '; color: var(--am-fg-4); }
body.am-mode details[open] > .am-guide-group-sum::before,
body.am-mode details[open] > .am-guide-sec-sum::before { content: '▼ '; }
body.am-mode .am-guide-group-body { padding: 0 8px 8px; }
body.am-mode .am-guide-sec-body { padding: 0 10px 10px; }

body.am-mode .am-guide-purpose { font-size: 12px; color: var(--am-fg-2); margin-bottom: 6px; }
body.am-mode .am-guide-list { margin: 0 0 6px; padding-left: 18px; font-size: 12px; }
body.am-mode .am-guide-steps { list-style: decimal; color: var(--am-fg-3); }
body.am-mode .am-guide-cautions { list-style: '⚠ '; color: var(--am-warn); }
body.am-mode .am-guide-list li { margin-bottom: 4px; }
body.am-mode .am-guide-list strong,
body.am-mode .am-guide-purpose strong { color: var(--am-fg); }
body.am-mode .am-guide-fresh { font-size: 11px; color: var(--am-fg-4); }
body.am-mode .am-guide-term { font-size: 12px; font-weight: 700; color: var(--am-fg-2); margin-top: 6px; }
body.am-mode .am-guide-def { font-size: 11px; color: var(--am-fg-3); margin-left: 0; }

/* --- 3.4 エリアURL管理タブ(am_dashboard.js の areas ビュー) ---------------
 * ⚠ 明色をベタで焼き込まず半透明ティントを重ねる。暗い地色の上に不透明な
 *   bg-amber-50 等を置くと、そこだけ白板が浮いてコックピットが分断される。
 * input / table は §2.4 / §2.5 の汎用ルールが拾うのでここでは触らない。
 * ------------------------------------------------------------------------ */
body.am-mode #am-dashboard-section .am-tint-amber {
  background-color: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--am-fg-2);
}
body.am-mode #am-dashboard-section .am-tint-amber > summary { color: var(--am-warn); font-weight: 700; }
body.am-mode #am-dashboard-section .am-chip {
  background-color: var(--am-panel-2);
  border: 1px solid var(--am-raised);
  color: var(--am-fg-3);
}
body.am-mode #am-dashboard-section .am-chip .am-area-bind { color: var(--am-cyan); }
body.am-mode #am-dashboard-section .am-chip .am-area-bind:hover { color: var(--am-cyan-soft); }

/* ボタン。⚠ 背景を与えないと暗地で素のテキストと見分けが付かず「押せる」と分からない。 */
body.am-mode #am-dashboard-section :is(.am-btn, .am-area-save) {
  background-color: rgba(56, 189, 248, 0.14);
  border: 1px solid var(--am-cyan);
  color: var(--am-cyan);
}
body.am-mode #am-dashboard-section :is(.am-btn, .am-area-save):hover {
  background-color: rgba(56, 189, 248, 0.26);
  color: var(--am-cyan-soft);
}
body.am-mode #am-dashboard-section .am-area-row { border-color: var(--am-raised); }
body.am-mode #am-dashboard-section .am-area-msg { color: var(--am-fg-4); }

/* ===========================================================================
 * §4 レポート/アンケート個別 — “CSSクラスでは届かない”ものの対処
 * ========================================================================= */

/* --- 4.1 report.js が実行時注入する <style>(#report-section .rpt-*) の上書き ---
 *    注入側は詳細度(1,1,0)。ここは :is() 内のIDで(1,2,0)なので競り勝つ。 */
body.am-mode #report-section .rpt-section-divider { border-top-color: var(--am-raised); }
body.am-mode #report-section .rpt-flow-block { border-color: var(--am-raised); }
body.am-mode #report-section .rpt-flow-h { color: var(--am-fg-3); border-bottom-color: var(--am-raised); }
body.am-mode #report-section .rpt-flow-arrow { color: var(--am-fg-4); }

/* --- 4.2 インラインstyleの色ベタ書き(report.js 約29箇所) ---
 *    インライン指定は !important でしか上書きできない。値ごとに属性セレクタで対処。
 *    ⚠ 部分一致のため「短い値 → 長い値」の順に書くこと(#fff は #fff7ed にもマッチする)。 */
body.am-mode #report-section [style*="#fff"] { background-color: var(--am-panel) !important; }
body.am-mode #report-section [style*="#f9fafb"],
body.am-mode #report-section [style*="#f8f9fa"],
body.am-mode #report-section [style*="#f8fafc"] { background-color: var(--am-panel-2) !important; }
body.am-mode #report-section [style*="#f0fdf4"] { background-color: rgba(52, 211, 153, 0.12) !important; }
body.am-mode #report-section [style*="#eff6ff"],
body.am-mode #report-section [style*="#f0f9ff"],
body.am-mode #report-section [style*="#eef2ff"] { background-color: rgba(56, 189, 248, 0.1) !important; }
body.am-mode #report-section [style*="#fefce8"],
body.am-mode #report-section [style*="#fef9c3"],
body.am-mode #report-section [style*="#fffdf5"] { background-color: rgba(251, 191, 36, 0.14) !important; }
body.am-mode #report-section [style*="#fff7ed"] { background-color: rgba(251, 146, 60, 0.14) !important; }
/* 一括生成の進捗リスト: JS変数で文字色を決めるためクラスが無い */
body.am-mode #report-section li[style*="#374151"] { color: var(--am-fg-2) !important; }
body.am-mode #report-section li[style*="#16a34a"] { color: var(--am-good) !important; }
body.am-mode #report-section li[style*="#9ca3af"] { color: var(--am-fg-4) !important; }
body.am-mode #report-section li[style*="#ea580c"] { color: var(--am-orange) !important; }

/* --- 4.3 PDFプレビュー iframe ---
 *    中身はブラウザ内蔵PDFビューア = 原理的にダーク化不可(白い紙のまま)。
 *    「紙」として意図的に見せるため、暗い台紙に載せた見え方に整える。 */
body.am-mode #report-section iframe {
  border-color: var(--am-raised) !important;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ── AM Google広告: キャンペーン単位3パネル ── */
.am-panel{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:16px 20px;margin:14px 0;max-width:1180px;}
.am-panel h3{margin:0 0 10px;font-size:16px;}
.am-panel h4{margin:14px 0 6px;font-size:14px;opacity:.85;}
.am-panel table{width:100%;border-collapse:collapse;font-size:14px;}
.am-panel td,.am-panel th{padding:8px 14px;border-bottom:1px solid #21262d;text-align:left;}
.am-panel th{color:#8b949e;font-weight:600;}
/* 数値列は右寄せ＋内容幅に詰める(横の間延び防止・数値をまとめる) */
.am-num{text-align:right;white-space:nowrap;width:1%;}
.am-camp-table td:first-child,.am-camp-table th:first-child{white-space:nowrap;}
.am-up{color:#f85149;} .am-down{color:#58a6ff;}
.am-red{color:#f85149;} .am-yellow{color:#d29922;}
.am-empty{opacity:.6;font-size:13px;margin:6px 0;}
.am-sub{opacity:.6;font-size:12px;}
.am-camp-head{font-weight:600;font-size:15px;margin:10px 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;}
.am-badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:10px;margin-left:6px;}
.am-badge-action{background:#7d1f1f;color:#ffd7d5;}
.am-badge-nodata{background:#30363d;color:#8b949e;}

/* ローディング スピナー */
.am-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:48px 16px;color:#8b949e;font-size:14px;}
.am-spinner{width:22px;height:22px;border:3px solid #30363d;border-top-color:#1f6feb;border-radius:50%;animation:am-spin .8s linear infinite;}
@keyframes am-spin{to{transform:rotate(360deg);}}