/* レポート画面（＝保存済み営業資料のプレビュー）の見た目。
 *
 * 本番指摘:「非エンジニアの現場営業でも直感的にわかりやすく修正しやすい、
 *   リッチでシンプルな見た目に（UXはノータッチ）」。
 *
 * 方針は1つだけ: **紙(営業資料)と同じ配色・同じ骨格に寄せる**。画面と紙で見た目が
 * 違うと、営業は「画面で直したものが紙のどこに出るのか」を毎回探すことになる。
 * 色は deck/theme.py の HEX から採る(brand #c30d23 / dark #8f0a1a)。
 *
 * ⚠ **UXは変えない。** DOM構造・id・data属性・操作の順序には触れないこと。ここは
 *   見た目だけを上書きする層で、JS が出す markup はそのまま使う。
 *
 * ⚠ **不透明な明色を焼き込まない。** この画面は AMコックピット(`body.am-mode`=ダーク)
 *   にも埋め込まれる。地色に #fff や #fdf0f2 を直書きすると、暗面でその行だけ白地に
 *   なり、暗面から継承した明色文字が乗って読めなくなる(過去に実際に起きた)。
 *   **地色は必ず半透明ティント(rgba)** にして、下地の明暗にそのまま乗せる。
 *
 * ⚠ `!important` を使わない。`#rpt-deckview` はIDなので、Tailwind のユーティリティ
 *   (クラス1つ=詳細度0,0,1,0)より必ず勝つ。`!important` で潰すと、AM側の
 *   am_cockpit.css がダーク用に当てている色まで潰してしまう。
 */

:root {
  --rpt-brand: #c30d23;
  --rpt-brand-dark: #8f0a1a;
  /* 面に敷く赤。⚠ 半透明のまま使う(下地がダークでも溶ける) */
  --rpt-brand-tint: rgba(195, 13, 35, 0.06);
  --rpt-brand-tint-strong: rgba(195, 13, 35, 0.11);
  --rpt-brand-line: rgba(195, 13, 35, 0.18);
  /* 罫は無彩色の半透明。明面では薄いグレー、暗面では薄い白として見える */
  --rpt-hairline: rgba(128, 128, 140, 0.22);
}

/* AMコックピット(ダーク)では赤を明るく起こす。#c30d23 は暗地の上だと沈む。
   ⚠ 面の色は上書きしない(半透明ティントは暗地でもそのまま効く)。 */
body.am-mode {
  --rpt-brand: #ff6b7a;
  --rpt-brand-dark: #ff8f9a;
  --rpt-hairline: rgba(200, 200, 215, 0.22);
}

/* ── 節カード ───────────────────────────────────────────── */
/* 資料の1ページ = 画面の1カード。境界を面でなく**余白と細い罫**で作る。 */
#rpt-deckview section[data-deck-slide] {
  border-radius: 14px;
  border-color: var(--rpt-brand-line);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px -16px rgba(0, 0, 0, 0.28);
}

/* 見出し行(節タイトル＋補助テキスト) */
#rpt-deckview section[data-deck-slide] > div:first-child {
  border-bottom: 1px solid var(--rpt-brand-line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* 節タイトルの左に赤い縦棒。資料の見出し帯と同じ合図にする。 */
#rpt-deckview section[data-deck-slide] h3 {
  position: relative;
  padding-left: 14px;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
#rpt-deckview section[data-deck-slide] h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: var(--rpt-brand);
}
/* 節番号(①②③④)は赤。資料の番号と対応していることを一目で分かるようにする。 */
#rpt-deckview section[data-deck-slide] h3 > span:first-child {
  color: var(--rpt-brand);
  font-weight: 700;
}

/* 小見出し(sub) */
#rpt-deckview section[data-deck-slide] .text-sm.font-bold.text-gray-700 {
  letter-spacing: 0.02em;
}

/* ── 表 ────────────────────────────────────────────────── */
/* 罫を減らして行で読ませる。⚠ 数字は等幅数字にする(桁が揃わないと比較できない)。 */
#rpt-deckview table {
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  width: 100%;
}
#rpt-deckview table th {
  background: var(--rpt-brand-tint);
  border: 0;
  border-bottom: 1px solid var(--rpt-brand-line);
  padding: 7px 10px;
  font-weight: 700;
  white-space: nowrap;
}
#rpt-deckview table td {
  border: 0;
  border-bottom: 1px solid var(--rpt-hairline);
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
}
#rpt-deckview table tbody tr:last-child td {
  border-bottom: 0;
}
/* 1列目は項目名。等幅数字にしない(店舗名・媒体名が痩せて見える) */
#rpt-deckview table td:first-child {
  font-variant-numeric: normal;
}
#rpt-deckview table tbody tr:hover td {
  background: var(--rpt-brand-tint);
}

/* ── KPIカード ──────────────────────────────────────────── */
/* 数字を主役にする。ラベルは小さく、値は大きく、注記はさらに小さく。 */
#rpt-deckview .rpt-kpi {
  border-color: var(--rpt-brand-line);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 140px;
}
#rpt-deckview .rpt-kpi-value {
  font-size: 1.35rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#rpt-deckview .rpt-kpi-label {
  letter-spacing: 0.04em;
}

/* 「伸びしろ」の帯。⚠ 地色は半透明ティント(下地がダークでもそのまま乗る)。 */
#rpt-deckview .rpt-band {
  background: var(--rpt-brand-tint-strong);
  border-color: var(--rpt-brand-line);
  color: inherit;
}
#rpt-deckview .rpt-band b {
  color: var(--rpt-brand-dark);
  font-variant-numeric: tabular-nums;
}
#rpt-deckview .rpt-band-note {
  opacity: 0.7;
}

/* ── 章タブ / 節タブ ────────────────────────────────────── */
#rpt-deckview [data-deck-tabs] {
  border-bottom-color: var(--rpt-brand-line);
  gap: 2px;
}
#rpt-deckview [data-deck-tab] {
  border-bottom: 2px solid transparent;
}
/* 選択中の章。⚠ 色は JS が付ける indigo 系クラスに勝たせる(IDで詳細度が上) */
#rpt-deckview [data-deck-tab].font-bold {
  color: var(--rpt-brand);
  border-bottom-color: var(--rpt-brand);
}
#rpt-deckview [data-deck-sec-tab] {
  border-radius: 999px;
  border-color: var(--rpt-hairline);
}
#rpt-deckview [data-deck-sec-tab].font-bold {
  color: var(--rpt-brand);
  border-color: var(--rpt-brand-line);
  background: var(--rpt-brand-tint-strong);
}

/* ── 編集の操作(鉛筆・行の追加削除) ───────────────────────── */
/* 本文より目立たせない。ただし押せる面積は確保する(本番指摘「鉛筆が分かりづらい」)。 */
#rpt-deckview [data-dv-pen],
#rpt-deckview [data-dv-row-del],
#rpt-deckview [data-dv-row-add] {
  border-radius: 7px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
/* 行に触れているあいだだけ操作を起こす。常時濃いと本文が読みにくい。 */
#rpt-deckview tr:hover [data-dv-pen],
#rpt-deckview tr:hover [data-dv-row-del],
#rpt-deckview div:hover > [data-dv-pen] {
  border-color: var(--rpt-brand-line);
}

/* ── 契約形態のラベル(工程タブの上) ─────────────────────── */
#rpt-contract .rpt-chip {
  border-color: var(--rpt-brand-line);
  background: var(--rpt-brand-tint);
  color: var(--rpt-brand-dark);
}

/* ── 工程タブ(①レポートを作る〜③営業資料) ───────────────── */
/* ⚠ ここは report.js が RPT_STAGE_ACTIVE/INACTIVE でクラスを差し替える。
 *   色だけ寄せて、選択の仕組みには触れない。 */
#rpt-stage-tabs button {
  border: 1px solid var(--rpt-hairline);
  border-radius: 999px;
}
#rpt-stage-tabs button.bg-indigo-600 {
  background: var(--rpt-brand);
  border-color: var(--rpt-brand);
}