/* フォーム管理モジュール専用スタイル
   命名規則: .fm-{component}-{modifier} */

.fm-wrap { padding: 24px; max-width: 1100px; margin: 0 auto; }
.fm-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.fm-head h2 { margin: 0; font-size: 22px; }
.fm-btn-primary { background:#d97706; color:#fff; border:0; border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer; font-size:14px; }
.fm-btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.fm-btn-secondary { background:#f3f4f6; color:#111; border:1px solid #d1d5db; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px; }
.fm-btn-danger { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px; }
.fm-btn-icon { background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:2px 6px; cursor:pointer; font-size:12px; line-height:1; }
.fm-btn-icon:hover { background:#f9fafb; }
.fm-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.fm-table th { background:#f9fafb; text-align:left; padding:12px; font-size:13px; color:#6b7280; border-bottom:1px solid #e5e7eb; }
.fm-table td { padding:12px; border-bottom:1px solid #f3f4f6; font-size:14px; vertical-align:top; }
.fm-table tr:hover { background:#fffbeb; }
.fm-url { font-family:monospace; font-size:12px; color:#1f2937; background:#f3f4f6; padding:2px 6px; border-radius:4px; word-break:break-all; }
.fm-empty { background:#fff; padding:40px; text-align:center; color:#6b7280; border-radius:8px; }
.fm-actions { display:flex; gap:6px; flex-wrap:wrap; }
.fm-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.fm-field { margin-bottom:14px; }
.fm-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#1f2937; }
.fm-field input[type=text], .fm-field input[type=email], .fm-field input[type=time], .fm-field input[type=number], .fm-field textarea, .fm-field select {
  width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; font-family:inherit; box-sizing:border-box;
}
.fm-field textarea { min-height:120px; font-family:inherit; }
.fm-field-hint { color:#6b7280; font-size:11px; margin-top:4px; }
.fm-tabs { display:flex; gap:0; border-bottom:2px solid #e5e7eb; margin-bottom:20px; }
.fm-tab { background:none; border:0; padding:10px 18px; cursor:pointer; font-size:14px; color:#6b7280; border-bottom:2px solid transparent; margin-bottom:-2px; font-weight:500; }
.fm-tab.active { color:#d97706; border-bottom-color:#d97706; font-weight:700; }
.fm-tab:disabled { color:#d1d5db; cursor:not-allowed; }
.fm-tab-panel { display:none; }
.fm-tab-panel.active { display:block; }
.fm-msg-card, .fm-fld-card { border:1px solid #e5e7eb; border-radius:8px; padding:16px; margin-bottom:14px; background:#fafbfc; }
.fm-msg-head, .fm-fld-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.fm-msg-head .fm-msg-num, .fm-fld-head .fm-fld-num { background:#d97706; color:#fff; padding:4px 10px; border-radius:14px; font-size:12px; font-weight:700; white-space:nowrap; }
.fm-msg-head input.fm-msg-label, .fm-fld-head .fm-fld-label-input { flex:1; padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; }
.fm-fld-head .fm-fld-actions { display:flex; gap:4px; }
.fm-fld-type-tag { display:inline-block; background:#eff6ff; color:#1e40af; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:8px; }
.fm-msg-row, .fm-fld-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px; }
.fm-msg-row .fm-field, .fm-fld-row .fm-field { margin-bottom:0; }
.fm-msg-toggle { display:flex; align-items:center; gap:6px; font-size:13px; color:#6b7280; }
.fm-toolbar { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.fm-checkbox-row { display:flex; align-items:center; gap:8px; padding:10px; background:#fff8ef; border:1px solid #fde68a; border-radius:8px; margin-bottom:14px; }
.fm-checkbox-row input[type=checkbox] { width:18px; height:18px; cursor:pointer; }
.fm-checkbox-row label { font-size:14px; font-weight:600; cursor:pointer; }
.fm-section-title { font-size:16px; font-weight:700; margin:20px 0 10px; color:#1f2937; }
.fm-banner-info { background:#eff6ff; color:#1e40af; padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; line-height:1.6; }
.fm-opt-row { display:flex; gap:6px; margin-bottom:6px; align-items:center; }
.fm-opt-row input { flex:1; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; }
.fm-modal { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:none; align-items:center; justify-content:center; z-index:9000; }
.fm-modal.active { display:flex; }
.fm-modal-card { background:#fff; border-radius:12px; padding:24px; max-width:520px; width:90%; max-height:80vh; overflow-y:auto; }
.fm-modal-card h3 { margin:0 0 14px; }
.fm-modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.fm-type-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
.fm-type-btn { background:#fff; border:1px solid #d1d5db; padding:14px; border-radius:8px; cursor:pointer; text-align:left; }
.fm-type-btn:hover { background:#fffbeb; border-color:#d97706; }
.fm-type-btn-icon { font-size:20px; margin-right:8px; }
.fm-type-btn-name { font-weight:600; font-size:14px; }
.fm-type-btn-desc { font-size:11px; color:#6b7280; margin-top:4px; }
.fm-system-step { border:2px solid #f59e0b; border-radius:8px; padding:12px 16px; margin-bottom:14px; background:#fffbeb; }
.fm-system-step-head { display:flex; align-items:center; gap:8px; }
.fm-system-step-label { font-weight:700; font-size:13px; color:#92400e; }
.fm-system-step-desc { font-size:12px; color:#78716c; margin-top:4px; margin-left:26px; line-height:1.5; }
.fm-system-step .fm-system-badge { display:inline-block; background:#fef3c7; color:#b45309; font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; border:1px solid #f59e0b; }
.fm-flow-arrow { text-align:center; color:#94a3b8; font-size:18px; margin:2px 0 6px; letter-spacing:2px; }
.fm-invoice-tag { display:inline-block; background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:6px; }
/* 電子契約の自動送付は「申込＝契約書が飛ぶ」という最も重い属性なので、
   請求書バッジより強い色（赤系）にして一覧で見落とさないようにする。 */
.fm-gmo-tag { display:inline-block; background:#fee2e2; color:#b91c1c; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:6px; }
.fm-msg-card .fm-attach-badge { display:inline-block; background:#dbeafe; color:#1e40af; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:6px; }
.fm-rt-toolbar { display:flex; gap:4px; flex-wrap:wrap; padding:6px 8px; background:#f9fafb; border:1px solid #d1d5db; border-bottom:0; border-radius:6px 6px 0 0; align-items:center; }
.fm-rt-toolbar button { background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:4px 8px; cursor:pointer; font-size:13px; line-height:1; min-width:28px; }
.fm-rt-toolbar button:hover { background:#f3f4f6; }
.fm-rt-toolbar button.active { background:#dbeafe; border-color:#3b82f6; }
.fm-rt-toolbar select { padding:3px 6px; border:1px solid #d1d5db; border-radius:4px; font-size:12px; background:#fff; cursor:pointer; }
.fm-rt-toolbar .fm-rt-sep { width:1px; height:20px; background:#d1d5db; margin:0 2px; }
.fm-rt-body { min-height:140px; padding:10px 12px; border:1px solid #d1d5db; border-radius:0 0 6px 6px; font-size:14px; font-family:inherit; line-height:1.7; outline:none; overflow-y:auto; max-height:400px; background:#fff; }
.fm-rt-body:focus { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,0.15); }
.fm-rt-body:empty::before { content:attr(data-placeholder); color:#9ca3af; }

/* チャネル別 URL 管理パネル */
.fm-channel-row td { background: #f8fafc; }
.fm-channel-panel { padding: 16px 20px; border-top: 2px solid #e2e8f0; }
.fm-channel-head { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: #374151; }
.fm-channel-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.fm-channel-table th { text-align: left; padding: 6px 10px; background: #f1f5f9; color: #6b7280; font-weight: 600; font-size: 12px; border-bottom: 1px solid #e2e8f0; }
.fm-channel-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.fm-channel-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fm-channel-add input { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }

/* ヘルプボタン */
.fm-btn-help { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; border-radius:6px; padding:6px 14px; cursor:pointer; font-size:13px; font-weight:600; }
.fm-btn-help:hover { background:#dbeafe; }

/* ヘルプモーダル */
.fm-help-card { max-width:720px !important; }
.fm-help-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid #e5e7eb; }
.fm-help-header h3 { margin:0; font-size:17px; }
.fm-help-section { margin-bottom:24px; }
.fm-help-tab-label { display:inline-block; padding:5px 14px; border-radius:20px; font-size:13px; font-weight:700; margin-bottom:10px; }
.fm-help-basic { background:#fff8ef; color:#92400e; border:1px solid #fde68a; }
.fm-help-fields { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.fm-help-scenario { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.fm-help-content > p { font-size:13px; color:#374151; margin:0 0 10px; line-height:1.6; }
.fm-help-table { width:100%; border-collapse:collapse; margin-bottom:8px; font-size:13px; }
.fm-help-table th { text-align:left; padding:7px 10px; background:#f9fafb; font-weight:600; color:#374151; border:1px solid #e5e7eb; width:170px; white-space:nowrap; vertical-align:top; }
.fm-help-table td { padding:7px 10px; border:1px solid #e5e7eb; color:#4b5563; line-height:1.55; vertical-align:top; }
.fm-help-table code { background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:12px; font-family:monospace; }
.fm-help-note { background:#f9fafb; border-left:3px solid #d97706; padding:8px 12px; font-size:12px; color:#6b7280; line-height:1.55; border-radius:0 4px 4px 0; margin-top:8px; }
.fm-help-subtitle { font-size:13px; font-weight:700; color:#1f2937; margin:14px 0 6px; }

/* 電子契約（GMOサイン）の自動送付状態。画面から変更できない属性なので、
   トグルではなく状態表示として出す（有効時は強い色で見落とさないように）。 */
.fm-gmo-state { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.fm-gmo-state-on { background: #fee2e2; color: #b91c1c; font-weight: 600; }
.fm-gmo-state-off { background: #f3f4f6; color: #6b7280; }

/* 「申込完了後に何が起きるか」を一覧で見せるバッジ。電子契約（赤）・請求書（黄）と並ぶが、
   こちらは広告成果に関わる設定なので計測=青・リダイレクト=紫で系統を分ける。 */
.fm-flow-tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:6px; white-space:nowrap; }
.fm-flow-tag-tracking { background:#dbeafe; color:#1e40af; }
.fm-flow-tag-redirect { background:#ede9fe; color:#6d28d9; }

/* ── 「?」ツールチップ（長い説明文を初期表示から外す） ── */
.fm-tip { position:relative; display:inline-block; vertical-align:middle; margin-left:4px; }
.fm-tip-i { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#e5e7eb; color:#4b5563; font-size:11px; font-weight:700; cursor:help; line-height:1; }
.fm-tip:hover .fm-tip-i, .fm-tip:focus .fm-tip-i, .fm-tip:focus-within .fm-tip-i { background:#d97706; color:#fff; }
.fm-tip-body { display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:20; width:min(420px, 80vw); padding:10px 12px; background:#1f2937; color:#f9fafb; font-size:12px; font-weight:400; line-height:1.6; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18); white-space:normal; }
.fm-tip:hover .fm-tip-body, .fm-tip:focus .fm-tip-body, .fm-tip:focus-within .fm-tip-body { display:block; }
.fm-tip:focus { outline:none; }

/* ── 「申込完了後の動き」の時系列プレビュー ── */
.fm-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; padding:14px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:10px; }
.fm-flow-step { display:flex; gap:10px; align-items:flex-start; min-width:150px; flex:1 1 150px; padding:10px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; }
.fm-flow-icon { font-size:18px; line-height:1; margin-top:2px; }
.fm-flow-title { font-size:13px; font-weight:700; color:#1f2937; }
.fm-flow-sub { font-size:11px; color:#6b7280; margin-top:2px; word-break:break-all; }
.fm-flow-arrow { align-self:center; color:#9ca3af; font-size:16px; padding:0 2px; }
.fm-flow-off { opacity:.55; border-style:dashed; }
.fm-flow-off .fm-flow-title { color:#6b7280; }
.fm-flow-end { border-color:#c4b5fd; background:#f5f3ff; }
@media (max-width:720px) { .fm-flow-arrow { display:none; } .fm-flow-step { flex-basis:100%; } }