/* =========================================================================
   問い合わせフォーム営業 - 確定ブランド共通スタイル
   インプレックスアンドカンパニー株式会社 コーポレートトーン
   - 配色トークン(全テンプレート共通)
   - 共通コンポーネント(ボタン / カード / チップ / テーブル / KPIタイル)
   角丸なし(直角)を基調。ステータスのピル/バッジ/進捗バーのみ丸(pill)。
   ========================================================================= */

:root {
  /* --- 確定ブランド配色トークン --- */
  --paper: #FAFAFB;
  --surface: #FFFFFF;
  --ink: #111114;
  --ink2: #5B5B62;
  --ink3: #9A9AA1;
  --line: #EDEDED;
  --navy: #000066;
  --navy-soft: #EDEEF6;
  --blue: #267DCC;
  --pos: #3E7A5B;
  --neg: #B2543E;
  --amber: #8A6D2E;
  --amber-soft: #F4EFE1;

  /* ステータスの淡い背景(バッジ/ピル用・pillは丸のまま) */
  --pos-soft: #EAF1EC;
  --neg-soft: #F5EAE6;

  /* --- 後方互換エイリアス(既存テンプレートの var() 参照を保つ) --- */
  --page: var(--paper);
  --ink-secondary: var(--ink2);
  --ink-muted: var(--ink3);
  --grid: var(--line);
  --border: var(--line);
  --series-1: var(--navy);
  --series-2: var(--blue);
  --status-good: var(--pos);
  --status-good-text: var(--pos);
  --status-warning: var(--amber);
  --status-warning-text: var(--amber);
  --status-critical: var(--neg);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 数値・タブラー表示 */
.num, td.num, .kpi .value, table td, table th {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ヘッダー / ナビゲーション
   ========================================================================= */
header.appbar {
  background: var(--navy);
  color: #fff;
  padding: 0 28px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;       /* 社名・タブ・ログイン情報は1行に並べる */
  gap: 8px 24px;
  border-bottom: 3px solid var(--navy);
}
/* スマホ・狭いウィンドウでは横に並べきれないので段組みにする */
@media (max-width: 780px) {
  header.appbar { flex-wrap: wrap; padding: 0 16px; }
  header.appbar .brand { padding: 10px 0 0; }
  .appbar .session { margin-left: 0; padding-left: 0; padding-bottom: 10px; }
}

header.appbar .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0;
  flex-shrink: 0;          /* タブが増えても社名を折り返さない */
}
header.appbar .brand .eyebrow {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: #A7A9D6;
  text-transform: uppercase;
  line-height: 1.2;
}
header.appbar h1 {
  margin: 0;
  white-space: nowrap;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  line-height: 1.4;
  color: #fff;
}
nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
nav.tabs a {
  color: #C9CAE6;
  text-decoration: none;
  padding: 18px 11px;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
nav.tabs a:hover { color: #fff; border-bottom-color: var(--blue); }
nav.tabs a.active { color: #fff; border-bottom-color: #fff; font-weight: 700; }

main { max-width: 1120px; margin: 0 auto; padding: 28px; }

/* =========================================================================
   カード / パネル(角丸なし・ヘアライン基調・影は最小)
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.card h2 {
  margin: 0 0 14px;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}

/* =========================================================================
   テーブル
   ========================================================================= */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 企業名・業種などの短い語を「株式会社ホライズン / 商事」のように途中で割らない */
.nowrap { white-space: nowrap; }
/* 企業名: 文字の途中では割らず、法人格の前後(<wbr>)でだけ折り返す(company_name フィルタと組) */
.company-name { word-break: keep-all; }
.company-name .cn-part { white-space: nowrap; }  /* 「シンクロ・ / フード」のように記号でも割らない */
/* 表の中のボタンは小さめにする。ボタンの文字を割らない代わりに、列が広がって
   表が画面からはみ出さないようにする */
td button, td .btn { padding: 4px 10px; font-size: 12px; }
/* 操作ボタンの並び: 入りきらなければボタン単位で次の行へ送る(ボタンの文字は割らない) */
.row-actions .btn, .row-actions form.inline { margin: 2px 2px 2px 0; }

/* 企業リスト: 1社の行が縦に伸びすぎないよう、文字を一段小さく・余白を詰め、
   URLは1行(はみ出した分は「…」。マウスを重ねると全体が見える)にする */
table.company-table { font-size: 12px; }
table.company-table th, table.company-table td { padding: 7px 8px; }
table.company-table .badge { font-size: 11px; padding: 1px 7px; }
table.company-table .note { font-size: 11px; margin-top: 3px; }
table.company-table td form.inline { display: inline-block; margin: 0 3px 3px 0; }
table.company-table td.company-actions { min-width: 150px; }  /* 除外登録・削除を横に並べられる幅 */
table.company-table td form.inline button { padding: 3px 8px; font-size: 11.5px; }
.url-line {
  max-width: 215px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}
.url-line a { color: inherit; }
/* 自動では送れない理由(CAPTCHA・フォームが無い等)。送り直しても通らないので目立たせる */
.blocker {
  margin-top: 5px;
  padding: 4px 7px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5;
  max-width: 230px;
}
.blocker-action { color: var(--ink2); }
.url-line a:hover { color: var(--navy); }
.url-label {
  display: inline-block;
  min-width: 4.6em;
  color: var(--ink3);
  font-size: 11px;
}
th, td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  color: var(--ink2);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--line);
}

/* リンク(navy / hover は blue) */
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

.muted { color: var(--ink3); }
.secondary { color: var(--ink2); }
.note { font-size: 12px; color: var(--ink3); margin: 8px 0 0; line-height: 1.6; }
.scroll-x { overflow-x: auto; }
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* =========================================================================
   ステータスバッジ / チップ(pill = 丸のまま。色 + 必ずテキストラベル併記)
   ========================================================================= */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
}
.badge-success { background: var(--pos-soft); color: var(--pos); }
.badge-sent    { background: var(--pos-soft); color: var(--pos); }
.badge-failed  { background: var(--neg-soft); color: var(--neg); }
.badge-skipped { background: var(--amber-soft); color: var(--amber); }
.badge-draft   { background: var(--paper); color: var(--ink2); border: 1px solid var(--line); }
.badge-approved{ background: var(--navy-soft); color: var(--navy); }

/* =========================================================================
   フォーム(入力欄は直角)
   ========================================================================= */
form.inline { display: inline; }
input[type=text], textarea, select {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  width: 100%;
}
input[type=text]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-soft);
}
textarea { min-height: 260px; line-height: 1.8; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.form-grid label {
  display: block;
  font-size: 12px;
  color: var(--ink2);
  margin-bottom: 4px;
  font-weight: 500;
}

/* =========================================================================
   ボタン(直角。プライマリ=navy 塗り)
   ========================================================================= */
button, .btn {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  line-height: 1.5;
  white-space: nowrap;     /* 「今すぐ開 / 始」のようにボタンの文字を割らない */
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { border-color: var(--ink3); color: var(--ink); text-decoration: none; }
button:hover { border-color: var(--ink3); }
button.primary, .btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}
button.primary:hover, .btn-primary:hover {
  background: #000052;
  border-color: #000052;
  color: #fff;
}
button.approve {
  background: var(--pos);
  border-color: var(--pos);
  color: #fff;
  font-weight: 700;
}
button.approve:hover { background: #34664c; border-color: #34664c; }
button.danger {
  background: #fff;
  border-color: var(--neg);
  color: var(--neg);
  font-weight: 500;
}
button.danger:hover { background: var(--neg-soft); border-color: var(--neg); }

/* =========================================================================
   フィルターピル(pill = 丸のまま)
   ========================================================================= */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-row a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink2);
  background: var(--surface);
}
.filter-row a:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.filter-row a.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* =========================================================================
   KPIタイル(直角。数値は tabular-nums、navy で強調)
   ========================================================================= */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: 0;
  padding: 16px 18px;
}
.kpi .label {
  font-size: 12px;
  color: var(--ink2);
  font-weight: 500;
}
.kpi .value {
  font-size: 30px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.kpi .sub { font-size: 12px; color: var(--ink2); margin-top: 4px; }

/* =========================================================================
   ダッシュボード レイアウト
   ========================================================================= */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
/* グリッドアイテムの既定 min-width:auto を無効化し、
   カード内の canvas / 表の固有幅でカードが広がる(横はみ出しする)のを防ぐ */
.grid2 > * { min-width: 0; }
.kpis > * { min-width: 0; }
.chart-box { position: relative; height: 260px; min-width: 0; }
/* Chart.js の canvas はコンテナ幅に追従させる(固有幅で親を押し広げない) */
.chart-box canvas { max-width: 100%; }

/* 送信済み文面などの整形済みテキスト */
pre.body-view {
  white-space: pre-wrap;
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px;
  line-height: 1.8;
}

/* =========================================================================
   空状態(データ0件時の次アクションガイド)
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--ink2);
}
.empty-state .es-title {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.empty-state p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.9;
}
.empty-state ol {
  display: inline-block;
  text-align: left;
  margin: 0 0 10px;
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.9;
}

/* =========================================================================
   フォーム実行中の進捗・エラー表示(文面生成など)
   ========================================================================= */
.form-error {
  background: var(--neg-soft);
  border: 1px solid var(--neg);
  color: var(--neg);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 10px;
  white-space: pre-wrap;
}
button:disabled, button[disabled] {
  opacity: .55;
  cursor: wait;
}

/* =========================================================================
   エラーページ(404 / 403 / 500)
   ========================================================================= */
.error-page {
  max-width: 560px;
  margin: 48px auto;
  text-align: center;
}
.error-page .code {
  font-family: "Noto Serif JP", serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.error-page h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 10px;
  color: var(--ink);
}
.error-page p {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.9;
  margin: 0 0 8px;
}
.error-page .detail {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink2);
  text-align: left;
  margin: 14px 0;
  word-break: break-all;
}
.error-page .actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- ヘッダーのログイン情報(ユーザー名 + ログアウト) --- */
.appbar .session {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;          /* 「ログアウト」を途中で折り返さない */
}
.appbar .session form { margin: 0; }
.appbar .session-user {
  font-size: .78rem;
  color: #C9CAE6;          /* ネイビー背景の上なのでタブと同じ淡色にする */
  white-space: nowrap;
}
.appbar .session-user::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--pos);
  vertical-align: middle;
}
.appbar .session button.link {
  background: none;
  border: none;
  padding: 0;
  font-size: .78rem;
  color: #FFFFFF;
  white-space: nowrap;     /* 「ログアウ / ト」と割れないようにする */
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.appbar .session button.link:hover { color: #C9CAE6; }

/* --- 文面レビューの一括承認 --- */
.bulk-approve {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
}
.bulk-approve .bulk-approve-unsafe {
  font-size: .8rem;
  color: var(--ink2);
}
.bulk-approve .note { font-size: .74rem; }

/* --- ファイル取込(ドラッグ&ドロップ) --- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px 20px;
  border: 2px dashed var(--line);
  background: var(--paper);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.dropzone:hover { border-color: var(--blue); }
.dropzone:focus-within { outline: 2px solid var(--navy); outline-offset: 2px; }
.dropzone.is-over {
  border-color: var(--navy);
  border-style: solid;
  background: var(--navy-soft);
}
.dropzone.is-busy { cursor: progress; opacity: .7; }
.dropzone-title { font-size: 1rem; font-weight: 500; color: var(--ink); }
.dropzone-sub { font-size: .82rem; color: var(--ink-secondary); }
.dropzone-formats {
  font-size: .72rem;
  color: var(--ink-muted);
  letter-spacing: .04em;
  margin-top: 6px;
}
.dropzone-status { font-size: .82rem; color: var(--navy); margin-top: 8px; }

.column-help { margin-top: 14px; }
.column-help summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--blue);
  padding: 6px 0;
}
.column-help summary:hover { color: var(--navy); }
.column-help table { margin-top: 8px; }

/* --- 取込結果の通知 --- */
.flash {
  padding: 14px 18px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.flash strong { display: block; margin-bottom: 4px; font-size: .9rem; }
.flash p { margin: 0; font-size: .87rem; }
.flash ul { margin: 8px 0 0; padding-left: 1.2em; font-size: .84rem; }
.flash li { margin-bottom: 3px; }
.flash-ok { background: var(--pos-soft); border-color: var(--pos); color: var(--pos); }
.flash-error { background: var(--neg-soft); border-color: var(--neg); color: var(--neg); }
.flash-ok p, .flash-ok li, .flash-error p, .flash-error li { color: var(--ink); }

/* --- クリック計測URLが欠けている文面の印 --- */
.warn-tracking {
  color: var(--amber);
  font-weight: 500;
}
.warn-tracking::before { content: "◆ "; }

/* --- 文面生成: リスト単位のまとめ選択 --- */
.form-grid .span-2 { grid-column: 1 / -1; }
.bulk-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.bulk-pick select { min-width: 220px; }
.bulk-pick-count {
  font-size: .82rem;
  color: var(--navy);
  font-weight: 500;
}
.bulk-pick-count.empty { color: var(--ink3); font-weight: 400; }
#generate-companies { width: 100%; }

/* --- 文面の一括レビュー --- */
.review-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.review-filter label { font-size: .8rem; color: var(--ink2); }
.review-item { margin-bottom: 14px; }
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.review-company { font-weight: 700; font-size: 1rem; margin-right: 8px; }
.review-flag { font-size: .76rem; font-weight: 500; margin-left: 8px; }
.review-flag.danger { color: var(--neg); }
.review-flag.warn { color: var(--amber); }
.review-meta {
  font-size: .78rem;
  color: var(--ink3);
  margin-bottom: 10px;
  word-break: break-all;
}
.review-history {
  font-size: .8rem;
  color: var(--amber);
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  padding: 8px 12px;
  margin: 0 0 10px;
}
.review-safety {
  font-size: .8rem;
  color: var(--neg);
  background: var(--neg-soft);
  border-left: 3px solid var(--neg);
  padding: 8px 12px;
  margin: 0 0 10px;
}
.review-body {
  font-family: inherit;
  font-size: .87rem;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
  max-height: 420px;
  overflow-y: auto;
}
.filter-row .review-link { margin-left: auto; }

/* --- 取込時の商材選択 --- */
.upload-profile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.upload-profile label { font-size: .82rem; font-weight: 500; color: var(--ink2); }
.upload-profile select { min-width: 260px; }
.upload-profile .note { font-size: .76rem; }
.flash-info { background: var(--navy-soft); border-color: var(--navy); color: var(--navy); }
.flash-info p { color: var(--ink); }

/* --- 未使用の商材(プロファイル未割当) --- */
.unused-product { color: var(--amber); font-weight: 500; }

/* --- 画面からの送信予約 --- */
.worker-status {
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: .85rem;
  border-left: 4px solid;
}
.worker-status.alive { background: var(--pos-soft); border-color: var(--pos); }
.worker-status.down { background: var(--amber-soft); border-color: var(--amber); }
.worker-status .note { margin-top: 4px; }
.send-form { margin-bottom: 6px; }
.send-form-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
}
.send-form-row label { font-size: .87rem; }
.send-form-row input[type="radio"] { margin-right: 4px; }
table.send-jobs { margin-top: 14px; font-size: .82rem; }
/* 短い項目(本送信・すべて・待機中・日時・ボタン)は1行に保ち、長い「結果」だけを折り返す。
   折り返しを許すと、結果の文章に幅を取られて「本送 / 信」のように1文字ずつ割れる */
table.send-jobs th, table.send-jobs td { white-space: nowrap; }
table.send-jobs td.job-detail { white-space: normal; min-width: 12em; }
/* ボタンは文字を割らず、入りきらなければボタンごと縦に並べる */
table.send-jobs td.job-actions { white-space: normal; }
table.send-jobs td.job-actions form.inline { margin: 2px 0; }
.job-status { font-weight: 500; }
.job-queued { color: var(--amber); }
.job-running { color: var(--blue); }
.job-done { color: var(--pos); }
.job-failed { color: var(--neg); }
.job-cancelled { color: var(--ink3); }

/* --- 送信フロー(1画面で完結) --- */
.step-card { position: relative; }
.step-card.is-locked { opacity: .45; pointer-events: none; }
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.step-no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  flex-shrink: 0;
}
.step-card.is-locked .step-no { background: var(--ink3); }
.step-body { padding-left: 40px; }
.step-status {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  background: var(--surface-2, var(--paper));
  border-left: 3px solid var(--line);
}
.step-status.is-ok { background: var(--pos-soft); border-color: var(--pos); }
.step-status.is-error { background: var(--neg-soft); border-color: var(--neg); }
.step-status .note { margin-top: 4px; }
.review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.unsafe-toggle { font-size: .84rem; color: var(--ink2); }
.flow-message {
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.flash-warn { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.flash-warn p { color: var(--ink); }

/* --- 送信フロー: 文面の型の選択 --- */
.template-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.template-pick label { font-size: .82rem; font-weight: 500; color: var(--ink2); }
.template-pick select { min-width: 200px; }
.template-pick .note { font-size: .76rem; }

/* --- 文面の型の編集 --- */
.template-body {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  line-height: 1.7;
}

/* --- 送信後の画面の文言 --- */
.page-excerpt { margin-top: 4px; }
.page-excerpt summary {
  cursor: pointer;
  font-size: .76rem;
  color: var(--blue);
}
.page-excerpt p {
  margin: 6px 0 0;
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink2);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 10px;
  max-width: 420px;
  word-break: break-word;
}
.page-excerpt p { white-space: pre-wrap; }

/* --- 文面の型の編集(簡素化) --- */
.tpl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.tpl-actions { display: flex; gap: 8px; align-items: center; }
.tpl-desc {
  width: 100%;
  margin-bottom: 10px;
  font-size: .85rem;
}
.tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tpl-chip {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .74rem;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink2);
  cursor: pointer;
}
.tpl-chip:hover { border-color: var(--navy); color: var(--navy); }
.tpl-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tpl-copy input[type="text"] { min-width: 200px; }
.job-stopped { color: var(--amber); }

/* --- 自動チェックの警告についての案内 --- */
.unsafe-box {
  background: var(--amber-soft);
  border-left: 4px solid var(--amber);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.unsafe-box .unsafe-toggle { font-size: .88rem; color: var(--ink); }
.unsafe-box .note { margin: 6px 0 0; }

/* --- 企業リスト: 送信履歴の折りたたみ --- */
.send-history summary { cursor: pointer; white-space: nowrap; }
.send-history summary:hover { color: var(--navy); }
.send-history[open] summary { margin-bottom: 6px; }
.send-history-item { margin-bottom: 8px; min-width: 280px; }
.send-history-body {
  margin: 4px 0 0;
  padding: 8px;
  max-height: 220px;
  max-width: 420px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: .78rem;
  line-height: 1.5;
  background: var(--paper2, #f6f6f4);
  border: 1px solid var(--line, #e2e2de);
  border-radius: 6px;
}

/* --- 送信フロー: 作れなかった文面の一覧・このフローで作った文面 --- */
.gen-failures {
  margin: 4px 0 0;
  padding-left: 1.2em;
  max-height: 200px;
  overflow: auto;
  font-size: .82rem;
}
.review-flag.is-new { color: var(--navy); }


/* 送信結果: 列を減らし、細かい情報(入力内容・画面の文言・反応記録)は
   プルダウン(details)を開いたときだけ出して、1件の行を低く保つ */
.result-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.result-filter select { width: auto; min-width: 12em; }
table.result-table { font-size: 12.5px; }
table.result-table td { padding: 8px; }
table.result-table .sender {
  font-size: 11px; color: var(--ink3); max-width: 190px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.result-table .note { font-size: 11px; margin: 3px 0 0; }
table.result-table .note.ok { color: var(--pos); }
table.result-table .note.ng { color: var(--neg); }
table.result-table .reason {
  margin-top: 3px; font-size: 11px; color: var(--ink2); max-width: 340px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event-badges { margin-bottom: 4px; }
details.dropdown > summary {
  display: inline-block; cursor: pointer; list-style: none; white-space: nowrap;
  padding: 3px 10px; font-size: 12px; border: 1px solid var(--line); background: #fff;
}
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown > summary::after { content: " ▾"; color: var(--ink3); }
details.dropdown[open] > summary { border-color: var(--ink3); }
details.dropdown[open] > summary::after { content: " ▴"; }
.dropdown-panel {
  margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper);
  font-size: 11.5px; max-width: 360px;
}
.dropdown-panel p { margin: 2px 0 8px; white-space: pre-wrap; word-break: break-word; }
.dropdown-panel .panel-title { font-weight: 600; color: var(--ink2); }
.react-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.react-form select, .react-form input[type="text"] { width: auto; min-width: 7em; flex: 1 1 7em; }