/* ================================================
   M-Ads 広告ダッシュボード styles
   Prefix: .mad-ad- (ad-dashboard)
   移植元: ax-malasada public/styles/ad-dashboard.css（85行・.mad-ad-*部分）。
   マラサダ側は共通CSSの .ig-* クラス（wrap/loading/spinner/card/table等）に依存していたが、
   ax-mad にはそれが無いため、下半分（「ax-mad向けに自己完結で追加」節）ですべて .mad-ad- 接頭辞で
   自前定義する。色は ax-mad の既存CSS変数（mad.css の :root）を使うため、ダークモードは
   [data-theme="dark"] 側で変数が再定義されるだけで自動的に読める配色になる（ここでの重複定義は不要）。
   ================================================ */

.mad-ad-wrap { padding-bottom: 8px; }


.mad-ad-kpi-heading { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.mad-ad-kpi-heading-note { font-weight: 400; font-size: 12px; color: var(--text-sub); margin-left: 4px; }

.mad-ad-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.mad-ad-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--kpi-c, var(--accent));
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.mad-ad-kpi-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 6px;
}
.mad-ad-kpi-badge-muted { background: var(--bg); color: var(--text-sub); }
.mad-ad-kpi-badge-warn { background: #fef3c7; color: #b45309; }
/* 停止推奨（DESIGN_FINAL §4-2）専用。既存の「許容CPA超過」warnバッジ（amber）とは
   意図的に色を変え、停止推奨だけがひときわ目立つようにする（mad.css .mad-pill.ng と同じ配色式）。 */
.mad-ad-kpi-badge-bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); font-weight: 700; }
/* バッジは静的表示のみ（目標設定への導線は範囲外）＝押せそうに見せない */
.mad-ad-kpi-badge { cursor: default; user-select: none; }

.mad-ad-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--text-sub); }
.mad-ad-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.mad-ad-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; flex-shrink: 0; }

.mad-ad-chart-range-note { font-size: 12px; color: var(--text-sub); margin: -4px 0 12px; }

/* 横スクロール可の視覚手がかり（磨き込み①）。右端をフェードして「まだ続きがある」ことを示す。
   スクロール終端かどうかをCSSのみでは判定できないため常時フェード（オーバーフローしない
   デスクトップ幅ではフェード帯が最終列の内側に軽くかかる程度に留め、極端な見た目にならない
   よう帯幅を控えめ(24px)にしている）。 */
.mad-ad-chart-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
/* min-width を min(640px, 100%) にしているのは、狭い画面で「表示幅より広いviewBoxに
   引き伸ばされて中の文字が縮む」のを防ぐため（2026-08-27）。デスクトップでは従来どおり
   640pxを下限に横スクロールする。 */
.mad-ad-chart-svg { width: 100%; min-width: min(640px, 100%); height: auto; display: block; }

.mad-ad-table-footnote { font-size: 12px; color: var(--text-sub); margin: 10px 2px 0; }
/* 第6周 T3: 計測開始日が前進しようとして引き戻された（＝いま計測漏れが出ている）ときの警告。
   通常の脚注と同じ字送りのまま色だけ変え、見落とされない程度に目立たせる。 */
.mad-ad-table-footnote-warn { color: #b45309; font-weight: 600; }
.mad-ad-footnote-mark { color: var(--text-sub); font-size: 11px; margin-left: 2px; }

.mad-ad-delta-up { color: #16a34a; }
.mad-ad-delta-down { color: #dc2626; }

/* GA4計測のファネルカード（LP流入→CTAクリック→申込・2026-08-31・views/ga-lp-widget.js）。
   リアサポ・YJJの両方が同じHTML/クラスを描くため、ここに1回だけ定義すれば両画面に揃って効く。 */
.mad-ad-funnel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 6px;
  margin-bottom: 14px;
}
.mad-ad-funnel-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  min-width: 140px;
  flex: 1 1 160px;
}
.mad-ad-funnel-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  flex: 0 0 auto;
  padding: 0 4px;
}
.mad-ad-funnel-arrow { font-size: 18px; color: var(--text-sub); }

/* スマホ（既存ブレークポイント640px。mad-ad-kpi-rowの2列化・文字サイズ底上げと同じ基準に合わせる）:
 * 横1列に並べたファネルはそのままだと375px幅でカードが潰れて読めなくなるため、
 * 「LPを見た→ボタンを押した→申し込んだ」を縦に積み、率(→)も縦の途中に矢印↓として置く
 * （藤山さん指示・2026-08-31：スマホは縦に減っていくファネルの方が分かりやすい）。
 * 横スクロールは発生させない（幅は常に100%＝親カードの内側幅に収まる）。 */
@media (max-width: 640px) {
  .mad-ad-funnel-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .mad-ad-funnel-step {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .mad-ad-funnel-step .mad-ad-kpi-value { font-size: 20px; }
  .mad-ad-funnel-rate {
    flex-direction: row;
    justify-content: center;
    font-size: 13px;
    padding: 2px 4px;
  }
  .mad-ad-funnel-rate .mad-ad-funnel-arrow { transform: rotate(90deg); font-size: 16px; }
}

.mad-ad-row-muted { color: var(--text-sub); background: var(--bg); }
.mad-ad-row-muted td { padding: 10px 14px; }

.mad-ad-footer { font-size: 12px; color: var(--text-sub); text-align: right; margin-top: 4px; }

/* 経路別内訳・配信回別成績の各表にも同じ右端フェードを付ける（磨き込み①）。
   .mad-ad-table-wrap は他パネルとも共有するクラスのため、影響を .mad-ad-wrap 配下に限定する。 */
.mad-ad-wrap .mad-ad-table-wrap {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

@media (max-width: 1100px) {
  .mad-ad-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mad-ad-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================
   ax-mad向けに自己完結で追加（マラサダの .ig-* 相当・存在しないため新規定義）
   ================================================ */

.mad-ad-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 60px 0; color: var(--text-sub); font-size: 13px;
}
.mad-ad-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  animation: mad-ad-spin 0.8s linear infinite;
}
@keyframes mad-ad-spin { to { transform: rotate(360deg); } }

.mad-ad-error {
  background: var(--surface); border: 1px solid var(--bad); border-radius: 12px;
  padding: 20px; color: var(--bad); font-size: 13.5px; font-weight: 600;
}

/* ax-mad側がビュー見出し（h1）を自前で出すため、モジュール内では見出しを重複させず
   サブ説明文（.mad-ad-head-sub）だけを出す（h2は削除済み・藤山AX指示）。 */
.mad-ad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.mad-ad-head-sub { font-size: 12px; color: var(--text-sub); margin: 0; }

/* サービス専用パネル（1(b)）: リアサポ以外のサービス選択時に集計APIを呼ばず出す案内カード */
.mad-ad-scope-notice p { color: var(--text-sub); font-size: 13.5px; margin: 0 0 14px; }
.mad-ad-switch-btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px;
}
.mad-ad-switch-btn:hover { opacity: 0.9; }

/* ⚠️ 2026-09-01（段階3）: .mad-ad-period-select / .mad-ad-period-btn は削除した。
   期間トグルをヘッダー右上（.mad-period・mad.css:239-244）へ集約したため、この画面が
   自前で持つ必要がなくなった。実測すると両者の指定は**完全に同一**だった
   （同じ角丸・同じpadding・同じ選択色）＝見た目の定義が2箇所に重複していた。
   ⚠️ ここに復活させないこと。期間トグルの見た目は .mad-period 1箇所が正本。 */

.mad-ad-kpi-label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.mad-ad-kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.mad-ad-kpi-value .mad-ad-kpi-unit { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-left: 2px; }
.mad-ad-kpi-sub { font-size: 11px; color: var(--text-sub); margin-top: 6px; }

.mad-ad-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.mad-ad-card-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

.mad-ad-table-wrap { overflow-x: auto; }

/* ===== スマホ専用カード表示（経路別内訳・配信回別成績・2026-08-31 藤山さん指示） =====
 * 「PC版を縮めたもの」ではなくスマホ専用レイアウトにする、という要件のため、表とは
 * 別に完全に独立したマークアップ（.mad-ad-mobile-cards）をJS側が常に描画しておき、
 * どちらを見せるかは幅だけで決める（.mad-ad-table-wrap--responsive が付いた表とペアで使う）。
 * 既存ブレークポイント640pxに合わせる（.mad-ad-kpi-rowの2列化・文字サイズ底上げと同じ基準）。
 * 幅は常に100%（親カードの内側幅）に収める＝横スクロールを作らない。 */
.mad-ad-mobile-cards { display: none; }
@media (max-width: 640px) {
  .mad-ad-table-wrap--responsive { display: none; }
  .mad-ad-mobile-cards { display: block; }
}

.mad-ad-mobile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  font-size: 14px;
}
.mad-ad-mobile-card:last-child { margin-bottom: 0; }
.mad-ad-mobile-card--muted { color: var(--text-sub); background: var(--bg); }
.mad-ad-mobile-card-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700;
  overflow-wrap: anywhere;
}
.mad-ad-mobile-card-sub {
  font-size: 12.5px; color: var(--text-sub); margin: 2px 0 10px;
  overflow-wrap: anywhere;
}
/* 最重要2指標（申込・CPA）をカード最上部に大きく置く（藤山さん指示：スマホで最初に知りたいのはこの2つ） */
.mad-ad-mobile-stat-row {
  display: flex; gap: 10px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.mad-ad-mobile-stat { flex: 1 1 0; min-width: 0; }
.mad-ad-mobile-stat-label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.mad-ad-mobile-stat-value {
  font-size: 22px; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.mad-ad-mobile-card-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-sub);
}
.mad-ad-mobile-card-foot-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px; overflow-wrap: anywhere;
}
.mad-ad-mobile-card-foot-line:last-child { margin-bottom: 0; }
.mad-ad-mobile-card-foot-cost { align-items: flex-start; }
.mad-ad-mobile-card-foot-cost > span:last-child { text-align: right; }
.mad-ad-mobile-card-foot small.mad-ad-text-sub { font-size: 11px; white-space: normal; }
/* このカード内のファネル(.mad-ad-funnel-row)は常に縦積み表示にする。
 * 元の @media(max-width:640px) は「カードを使う場面全体」が640px以下という前提を置いており、
 * このカード自体が640px以下でしか出ない（.mad-ad-mobile-cardsが640px以下でしか表示されない）ため
 * 条件は自然に満たされるが、念のため明示しておく（将来カードの表示幅条件だけ変えても崩れないように）。 */
.mad-ad-mobile-card .mad-ad-funnel-row { margin-bottom: 10px; }
.mad-ad-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.mad-ad-table th, .mad-ad-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: right; }
.mad-ad-table th:first-child, .mad-ad-table td:first-child { text-align: left; white-space: normal; }
.mad-ad-table th { color: var(--text-sub); font-weight: 600; font-size: 11.5px; }
.mad-ad-table-num { font-variant-numeric: tabular-nums; }
.mad-ad-text-sub { color: var(--text-sub); }
.mad-ad-empty-sm { color: var(--text-sub); font-size: 12px; }

/* 「今月の申込」の数え方の違いを説明する開閉注記（2026-08-21追加）。
   矢印マーカーはmad.cssの.mad-fold（折りたたみ共通の見た目）に統一 */
.mad-ad-basis-note {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
}
.mad-ad-basis-note summary { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.mad-ad-basis-note dl { margin: 10px 0 0; }
.mad-ad-basis-note dt { font-size: 12.5px; font-weight: 700; margin-top: 10px; }
.mad-ad-basis-note dt:first-child { margin-top: 0; }
.mad-ad-basis-note dd { font-size: 12px; color: var(--text-sub); margin: 2px 0 0; line-height: 1.6; }
/* 表セル内の広告費の出典・配信日などの補足行（折り返しを許可する） */
.mad-ad-table td small.mad-ad-text-sub { font-size: 10.5px; font-weight: 400; white-space: normal; display: inline-block; }

/* ===== モバイル文字サイズの正規化（2026-08-27・mad.css 末尾の同名ブロックの続き） =====
 * このファイルは index.html で mad.css より後に読み込まれる。そのため .mad-ad-* に対する
 * スマホ用の上書きは mad.css 側に書いても同詳細度で負ける（実測）。必ずここに書くこと。
 * 目的は mad.css 側と同じ: iOSの勝手な拡大を止めた後に残る「小さすぎる文字」の底上げと、
 * KPI数値のサイズをスマホで 18px に揃えること（JS側のinline 18pxと一致させる）。 */
@media (max-width: 640px) {
  .mad-ad-kpi-badge { font-size: 11px; }
  /* 表セル内の出典・配信日などの注記（経路別ダッシュボードに多数出る） */
  .mad-ad-table td small.mad-ad-text-sub { font-size: 11.5px; }
  .mad-ad-kpi-sub,
  .mad-ad-footnote-mark { font-size: 11px; }
  .mad-ad-kpi-value { font-size: 18px; }
  .mad-ad-kpi-value .mad-ad-kpi-unit { font-size: 12px; }
}

/* ===== P0-D: .mad-ad-table のsticky（2026-08-27 mobile-ux-redesign） =====
 * mad.css 側に同種の .mad-tbl--sticky があるが、このファイルは index.html で
 * mad.css より後に読み込まれるため、mad.css に書いても同詳細度で負ける（実測済み・
 * 上のモバイル文字サイズのコメントと同じ理由）。.mad-ad-table には --cards 相当の
 * カード化バリアントが存在しないため、対象を絞らず全 .mad-ad-table に適用する。
 * ⚠️ border-collapse: collapse と position: sticky の併用は罫線が消える既知挙動が
 * あるため、border-bottom を消して box-shadow の inset で代替する（mad.cssと同じ対処）。 */
@media (max-width: 640px) {
  .mad-ad-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--border-strong);
  }
  .mad-ad-table td:first-child,
  .mad-ad-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
  .mad-ad-table th:first-child { z-index: 3; }
  .mad-ad-table td:first-child {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--border);
  }
}

/* ===== チャネル管理・媒体別の目標CPA（2026-08-27追加） =====
 * サービス一覧の各行の直後に付く <tr class="mad-mtcpa-row">（colspanで全幅の1セル）の中身。
 * mad.css ではなくこちらに置いているのは、mad.css 末尾を別作業が同時に触っているため
 * （衝突回避）。このファイルは index.html で mad.css より後に読み込まれるので、
 * カード化（.mad-tbl--cards）のスマホ用ルールに同詳細度でも勝てる。
 * ⚠️ スマホ（実測 表示枠312px）で入力欄と保存ボタンに指が届くことが要件。
 * 過去に「表示枠312pxに対して表幅611px＝入力欄に到達不能」の事故があったため、
 * 横並び（flex）は使わず縦積み＋折り返しに寄せ、横スクロールを一切作らない。 */
.mad-mtcpa-cell { text-align: left; padding: 8px 10px 12px; }
.mad-mtcpa-summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.mad-mtcpa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mad-mtcpa-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface);
  min-width: 0;
}
.mad-mtcpa-name { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.mad-mtcpa-now { color: var(--text-sub); font-size: 12px; margin: 2px 0 6px; overflow-wrap: anywhere; }
.mad-mtcpa-edit { white-space: normal; }
.mad-mtcpa-edit input.mad-media-target-cpa { width: 7em; margin-right: 6px; }

@media (max-width: 640px) {
  /* カード化された表（.mad-tbl--cards tbody td は display:flex）の中でこのセルだけは
   * ブロックに戻す。flexのまま（1行横並び）だと媒体名・現在値・入力欄・保存ボタンが
   * 1行に押し込まれ、カード幅を超えて保存ボタンに到達できなくなる。 */
  .mad-tbl--cards tbody td.mad-mtcpa-cell { display: block; text-align: left; }
  .mad-tbl--cards tbody td.mad-mtcpa-cell::before { content: none; }
  .mad-mtcpa-list { grid-template-columns: 1fr; }
  .mad-mtcpa-edit input.mad-media-target-cpa { width: 6.5em; }
}

/* ===== 判定バッジの共通表示（2026-08-27追加・verdict-ui.js 用） =====
 * docs/mobile-ux-redesign.md §6-①② の統一。判定の「見た目の言語」を
 * public/modules/verdict-ui.js 1本に集約したことに対応するスタイル。
 *
 * 3重コーディング（記号＋色＋語）: 色だけに頼らない。藤山さんは屋外・直射日光下でスマホから
 * 見るため、また色覚特性があっても読めるように、状態ごとに**形の違う記号**を先頭に付ける。
 *   ● 良好 / ▲ 注意 / ■ 危険 / — 判断材料なし
 * 記号は語と二重に読み上げさせないため aria-hidden にし、要素側に aria-label を持たせている。
 *
 * ⚠️ 色の値は既存（.mad-ad-kpi-badge-warn / -bad / -muted・mad.css の .mad-pill）と同じものを
 *    使い、PCの見た目を変えない。ここで新しく足しているのは
 *    「記号のための余白」と「good（緑）のバッジ修飾子」だけ。
 *    good は従来 yjj-dashboard.js が inline style で色を直書きしていた（＝共通化できていない
 *    唯一の状態だった）ため、他の3つと同じ形式のクラスとして定義し直す。 */
.mad-ad-kpi-badge-good {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: var(--good);
  font-weight: 700;
}
.mad-verdict-mark {
  /* 記号は語の一部として同じ行に置く。等幅にして状態が変わっても語の開始位置がずれないようにする
   * （バッジが縦に並んだとき、語頭が揃っていないと一覧として読めなくなる）。 */
  display: inline-block;
  width: 1em;
  margin-right: 4px;
  text-align: center;
  font-style: normal;
  line-height: 1;
}
/* 記号を入れた分だけ左右の余白を詰め、PCでのバッジ幅が従来より太らないようにする。 */
.mad-pill.mad-verdict { padding-left: 8px; padding-right: 9px; }

/* 経路別内訳の合計行（決定書C-4・A-7の実装／2026-08-31）。
 * 「合っている時ですら合っていると分からない」を潰すための行。本文行と区別が付くよう
 * 上罫線と背景で締める。判定は色だけに頼らず、記号（✓ / ⚠️）と文言をHTML側に必ず持たせる
 * （決定書I-2の「色＋形＋文言」の3点セット。屋外・色覚特性でも同じ結論に辿り着けるように）。 */
.mad-ad-row-total > td {
  border-top: 2px solid var(--line, #d1d5db);
  background: color-mix(in srgb, CanvasText 4%, transparent);
  vertical-align: top;
}
.mad-ad-total-ok { color: var(--good); font-weight: 700; }
.mad-ad-total-ng { color: var(--bad); font-weight: 700; }

/* ═══ P1束D #55: キーワード別CPA（スマホ2列＋行タップで内訳） ═══ */
/* 390px幅で横スクロールしないよう、列は「キーワード」と「獲得単価」の2つに固定する。 */
.mad-kw-tbl { table-layout: fixed; width: 100%; }
.mad-kw-tbl th:first-child, .mad-kw-tbl td:first-child { width: 62%; }
.mad-kw-tbl td { vertical-align: top; word-break: break-word; }
.mad-kw-row > summary { cursor: pointer; font-weight: 600; }
.mad-kw-detail-list { margin: 6px 0 0; font-size: 12px; }
.mad-kw-detail-list dt { color: #6b7280; margin-top: 4px; }
.mad-kw-detail-list dd { margin: 0 0 2px; }
.mad-kw-badge { margin-top: 4px; }
.mad-kw-over > td:first-child > .mad-kw-row > summary { color: #b45309; }

/* #58 チャネル管理: 終了済み媒体の注記（目標CPA一覧の内側の折りたたみ）。 */
.mad-mtcpa-retired-note { color: #6b7280; font-size: 11px; margin-top: 4px; }
.mad-mtcpa-retired > summary { color: #6b7280; font-size: 12px; }