/* =============================================================
 *  出品者向けフォーム共通スタイル
 *  読み込み: catalog/controller/common/header.php の NewstoreMinifier 経由
 *
 *  このファイルは用途の異なる2系統のスタイルを含む（各セクション冒頭にも見出しコメントあり）:
 *    [A] #product_form スコープ（Bootstrap の .form-group / .control-label 系）
 *        - catalog/view/theme/default/template/developer/edit_form.tpl     (単品出品)
 *        - catalog/view/theme/default/template/developer/editset_form.tpl  (セット出品)
 *    [B] .lr-form-dialog / .lr-form-grid スコープ（Element UI の el-form-item 系）
 *        - catalog/view/theme/default/template/developer/product.tpl       (キャンペーン申請ダイアログ)
 *        - catalog/view/theme/default/template/developer/campaign.tpl      (クーポン発行フォーム)
 *
 *  影響範囲: いずれも上記の限定セレクタでスコープしており、
 *           他ページの .form-group / .control-label / .el-form-item には影響しない設計。
 *
 *  ↓↓↓ ここから [A] #product_form スコープ ↓↓↓
 * ============================================================= */

/* ---- フォーム行レイアウト ---- */
#product_form .form-group {
    display: flex;
    /* ラベル列のグレー帯が入力列の高さに追従するよう stretch を使用 */
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #ebeef5;
    margin-left: 0;
    margin-right: 0;
    transition: background-color 0.15s ease;
}
#product_form .form-group:last-of-type {
    border-bottom: none;
}
/* JSで表示/非表示を切り替える行は display:none インラインではなく
   このクラスで制御することで、表示時に .form-group の flex を維持する */
#product_form .form-group.is-row-hidden {
    display: none !important;
}

/* ---- hover時の行ハイライト（控えめ） ---- */
#product_form .form-group:hover .control-label {
    background: #f1f6fc;
}
#product_form .form-group:hover .col-sm-9,
#product_form .form-group:hover .col-sm-10 {
    background: #fafcff;
}

/* ---- focus-within時の行ハイライト（編集中の行を明確化） ---- */
#product_form .form-group:focus-within {
    box-shadow: inset 3px 0 0 #409eff;
}
#product_form .form-group:focus-within .control-label {
    background: #dceeff;
    color: #0f4cb0;
}
#product_form .form-group:focus-within .col-sm-9,
#product_form .form-group:focus-within .col-sm-10 {
    background: #ecf5ff;
}

/* ---- 入力セル ---- */
#product_form .form-group .col-sm-9,
#product_form .form-group .col-sm-10 {
    padding: 12px 24px;
    flex: 1;
    background: #ffffff;
    transition: background-color 0.15s ease;
}

/* ---- ラベルセル ---- */
#product_form .control-label {
    font-size: 14px;
    font-weight: 500 !important;
    color: #363c48;
    text-align: left !important;
    padding: 14px 20px;
    background: #f8f9fb;
    border-right: 1px solid #ebeef5;
    border-left: none;
    border-radius: 0;
    margin-bottom: 0;
    min-height: 52px;
    /* ラベル列を全行で固定幅化。入力列の左端を一直線に揃え、白/グレーのリズムを保つ */
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
}
/* 必須マーク（赤いアスタリスク） */
#product_form .form-group.required .control-label::before {
    color: #e74c3c;
    font-size: 12px;
    margin-right: 2px;
}

/* ---- 入力フィールド ---- */
#product_form .form-control {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding: 8px 12px;
    font-size: 14px;
    color: #1e2a36;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#product_form .form-control:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.12);
    outline: none;
}
#product_form .form-control::placeholder {
    color: #b0b6bf;
}
#product_form .input-group {
    max-width: 340px;
}

/* ---- ファイル名表示用の input-group は full width で使う ----
   version_form.tpl のバックテスト HTM/GIF・パッケージ等、ファイル名（長文字列）を
   表示する readonly 入力は max-width 制約を解除してセル内をフルに使う。
   価格/マージン等の数値入力（340px）と用途が異なる。
   #backtest-list 配下は構造的に該当するので自動適用、
   それ以外（EAパッケージ等）は .input-group-file クラスで opt-in する */
#product_form #backtest-list .input-group,
#product_form .input-group-file {
    max-width: none;
}

/* ---- input-group のアドオン（￥/%/Pips 等）を Element UI 寄せに ----
   editset_form.tpl/edit_form.tpl の販売価格・マージン・SL/TP 等で使用。
   フォーム機構は Bootstrap のままだが、見た目だけ el-input 系と揃える。
   ガイドライン §5-5「Bootstrap input-group の暫定パターン」参照 */
#product_form .input-group-addon {
    background: var(--lr-surface-sub);          /* 薄グレー（el-input の prepend 既定と近似） */
    border: 1px solid var(--lr-border-strong);  /* el-input と同じ枠色 #dcdfe6 */
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);
    padding: 0 var(--lr-space-md);
    /* el-input default の高さと揃える */
    min-width: 44px;
    text-align: center;
    transition: border-color var(--lr-transition-base);
}

/* input-group 内の form-control（入力部分）の枠色をアドオンと揃える */
#product_form .input-group .form-control {
    border-color: var(--lr-border-strong);
}

/* input-group 内の form-control がフォーカスされたとき、隣接アドオンも青枠に追従 */
#product_form .input-group:focus-within .input-group-addon {
    border-color: var(--lr-color-primary);
}

/* ---- 注意書き（style="color:red" のp要素を上書き） ---- */
#product_form .form-group p[style*="color: red"],
#product_form .form-group p[style*="color:red"] {
    color: #e6a23c !important;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 2px;
    line-height: 1.6;
}

/* ---- ラジオボタン ---- */
#product_form .radio-inline {
    font-size: 14px;
    color: #363c48;
    cursor: pointer;
    padding: 6px 16px 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}
#product_form .radio-inline:hover {
    color: #409EFF;
}
#product_form .radio-inline input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #c0c4cc;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease;
    flex-shrink: 0;
}
#product_form .radio-inline input[type="radio"]:checked {
    border-color: #409EFF;
}
#product_form .radio-inline input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #409EFF;
}
#product_form .radio-inline input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.12);
    outline: none;
}

/* ---- フォーム余白 ---- */
#product_form fieldset {
    padding: 0;
}

/* ---- ボタンエリア（行のリズムに合わせて背景を白に揃え、上罫線のみで区切る） ----
   edit_form.tpl はタブ構造 (.tab-pane > .row:last-child)
   editset_form.tpl は fieldset 構造 (fieldset > .row:last-child)
   ※ どちらのテンプレでも同じ見た目になるよう両セレクタを書く */
#product_form .tab-pane > .row:last-child,
#product_form fieldset > .row:last-child {
    padding: 20px 24px;
    border-top: 1px solid #ebeef5;
    background-color: #ffffff;
    margin: 0;
}

/* ---- ボタン帯のボタンに最小幅を確保 ----
   ガイドライン §5-6「幅（min-width）」に従い、ページレベル CTA は 120px。
   「保存」「戻る」「次へ」など 2-4 文字の短いラベルでも存在感を出す。
   テンプレ側に追加クラス不要で自動適用される（ボタン帯セレクタのみが対象なので、
   フォーム本文中のアイコンボタン等には波及しない） */
#product_form .tab-pane > .row:last-child .el-button,
#product_form fieldset > .row:last-child .el-button {
    min-width: 120px;
}

/* ---- 説明欄エディタ（Summernote）のツールバー視認性 ----
   edit_form.tpl / editset_form.tpl の商品説明欄（textarea.summernote）で使用。
   テンプレ内の <style> ブロックから 2026-06-03 移管。
   Summernote 既定の細かい padding（5/6/8/10px）は内部UI実装の都合上維持する */
#product_form .note-toolbar {
    background: var(--lr-surface-sub);
    border-bottom: 1px solid var(--lr-border);
    padding: 5px 8px;
}
#product_form .note-toolbar .note-btn {
    font-size: var(--lr-fs-md);
    padding: 6px 10px;
    color: var(--lr-text-body);
    border: 1px solid var(--lr-border-strong);
    background: var(--lr-surface);
}
#product_form .note-toolbar .note-btn:hover {
    background: var(--lr-surface-hover);
    border-color: var(--lr-text-muted);
}
#product_form .note-toolbar .note-btn .note-current-fontname,
#product_form .note-toolbar .note-btn .note-current-fontsize {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-body);
}

/* ---- 数値入力フィールドの幅統一 ----
   edit_form.tpl / editset_form.tpl で使う数値入力 id に上限幅を当てる。
   ガイドライン §5-5 の .lr-input-* は class ベースだが、Bootstrap の id ベース実装に合わせて
   こちら側は id セレクタで指定する。
   max-width: 300px は 220 (.lr-input-md) と 320 (.lr-input-lg) の中間：
   ・「￥」アドオン + 数字 7 桁 + placeholder「販売価格を入力してください」を見切れず収めたい
   ・かといって 320px だと右隣の補足文と離れすぎる
   → 既存実装の 300px を踏襲し意図を CSS 側で明示する */
#product_form #input-price,
#product_form #input-affiliate-margin,
#product_form #input-maximum-lot,
#product_form #input-maximum-position,
#product_form #input-stop-loss,
#product_form #input-profit {
    max-width: 300px;
}

/* ---- Bootstrap nav-tabs（#order）の装飾 ----
   edit_form.tpl の「基本情報・EAプロフィール」 タブで使用。
   §5-12 では el-tabs (card) が標準だが、ここは Bootstrap タブ機構を温存して見た目だけ整える。
   将来 el-tabs 化する場合は本セクション削除 */
#product_form #order {
    border-bottom: 2px solid var(--lr-color-primary);
    margin-bottom: 0;
}
#product_form #order > li > a {
    border: none !important;
    border-radius: var(--lr-radius-md) var(--lr-radius-md) 0 0;
    color: var(--lr-text-label);
    font-size: var(--lr-fs-md);   /* 元 15px → 14px に統一（ガイドライン §3） */
    font-weight: var(--lr-fw-bold);
    padding: var(--lr-space-md) var(--lr-space-2xl);
    transition: background var(--lr-transition-base);
}
#product_form #order > li.active > a,
#product_form #order > li.active > a:hover,
#product_form #order > li.active > a:focus {
    background: var(--lr-color-primary);
    color: var(--lr-text-on-primary);
    border: none;
}
#product_form #order > li > a:hover {
    background: var(--lr-color-primary-bg-soft);
}

/* ---- タブ内コンテンツの余白リセット ----
   edit_form.tpl の <div class="tab-content"> の padding を 0 にして、
   外側カードの padding と二重に余白が出ないようにする */
#product_form .tab-content {
    padding: 0;
}

/* ---- well-sm（タグ/商品 選択結果コンテナ）の見た目統一 ----
   editset_form.tpl の商品セット選択コンテナ、
   edit_form.tpl のトレードスタイル/時間足/通貨ペア選択コンテナで使う。
   select で選んだ要素がチップ的にここへ並ぶ。空状態でも 40px の高さを確保 */
#product_form .well.well-sm {
    min-height: 40px;
    overflow: auto;
}

/* ---- 行内アクション帯（form-group の外に置かれた操作ボタン） ----
   version_form.tpl の「もっと追加」など、form-group 行のリズムから外れた
   独立ボタンが詰まって見えないよう、上下とフォーム本文の左揃え位置に余白を確保 */
#product_form .lr-inline-action {
    padding: var(--lr-space-md) var(--lr-space-2xl);
    background: var(--lr-surface);
}

/* ---- バージョン番号入力（Major.Minor.Revision の3つ並び） ----
   旧 Bootstrap .row + .col-xs-* 入れ子は親 .col-sm-10 のカスタム padding(24px) と
   row の margin-left: -15px のズレで左端が他行と揃わなかった。
   flex 化で：
   - 全 input が完全に等幅（flex:1）
   - 等間隔（gap）
   - 先頭 input の左端が他行の入力と整列（親 .col-sm-10 の content 起点） */
#product_form .lr-version-inputs {
    display: flex;
    gap: var(--lr-space-md);
}
#product_form .lr-version-inputs > .form-control {
    flex: 1;
    min-width: 0; /* flex child のデフォルト min-width: auto で潰れない問題を解消 */
}

/* ---- セクション見出し（#product_form 配下の <legend>） ----
   version_form.tpl の「バックテスト結果」「EAパッケージ」等のセクション見出し。
   ガイドライン §5-1 のページヘッダー（card-header h3）より一段小さく、
   フォーム本文内のセクション境界として機能する。

   設計判断: 旧案で grey 帯を全幅に敷くと、直下の form-group の
   ラベル列(220px)と「グレー領域の幅」が食い違って整列崩れに見えた。
   そこで本実装ではヘッダー帯ではなく「左に青のアクセントバー＋下に細線」だけの
   軽量見出しスタイルとし、フォーム本文と縦リズムを揃える */
#product_form legend {
    display: block;
    width: 100%;
    margin: var(--lr-space-2xl) 0 0;
    padding: var(--lr-space-md) 0 var(--lr-space-md) var(--lr-space-lg);
    background: transparent;
    border: none;
    border-left: var(--lr-bw-3) solid var(--lr-color-primary);
    border-bottom: 1px solid var(--lr-border);
    border-radius: 0;
    font-size: var(--lr-fs-lg);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
    line-height: var(--lr-lh-tight);
    letter-spacing: 0.02em;
}
/* 最上部の legend だけは card-header との間隔を詰める */
#product_form .card-header + form > legend:first-child,
#product_form > form > legend:first-child {
    margin-top: var(--lr-space-lg);
}

/* ---- 確認事項チェックリスト（terms2-*） ----
   version_form.tpl のバージョンUP申請、edit_form.tpl/editset_form.tpl の
   「その他確認事項2」で使用される、複数項目を縦に並べた個別チェックリスト UI。
   旧テンプレ内 <style> ブロックから 2026-06-03 移管。
   :has() セレクタが効くブラウザでは、チェック済み項目が緑にハイライトされる */
.terms2-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.terms2-label {
    display: flex !important;
    align-items: flex-start;
    font-weight: var(--lr-fw-normal) !important;
    font-size: var(--lr-fs-sm);
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: var(--lr-lh-base);
}
.terms2-label:hover {
    background: var(--lr-color-primary-bg-soft);
    border-color: #b3d4fc;
}
.terms2-label input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin: 3px 10px 0 0;
    flex-shrink: 0;
}
.terms2-label:has(input:checked) {
    background: #f0fdf4;
    border-color: #86efac;
}
/* 確認事項2のチェック数カウンター（旧 inline style="color:#6b7280;font-weight:normal;font-size:12px;" を移管） */
.terms2-counter {
    font-size: var(--lr-fs-xs);
    color: #6b7280;
    font-weight: var(--lr-fw-normal);
}
/* 確認事項2のリード文（チェックを促す説明文）の見た目共通化 */
.terms2-lead {
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    margin-bottom: var(--lr-space-md);
}

/* =============================================================
 *  Element UI フォーム共通スタイル（edit_form トーンと統一）
 *  対象: 明示的に opt-in したフォーム/ダイアログのみ
 *    - <el-dialog custom-class="lr-form-dialog"> : developer/product.tpl のキャンペーン申請ダイアログ等
 *    - <el-form class="lr-form-grid">           : developer/campaign.tpl のクーポン発行フォーム等
 *
 *  共通スコープ: 「直接の子の .el-form-item」だけにスタイルを当てるため、
 *  ネストされた el-form-item（有効期間の開始/終了など）には影響しない設計。
 * ============================================================= */

/* ---- フォーム行 ----
   .lr-form-dialog 配下では el-form の直接子、
   .lr-form-grid は .el-form-item を直接子に持つ前提で書く */
.lr-form-dialog .el-form > .el-form-item,
.lr-form-grid > .el-form-item {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    border-bottom: 1px solid #ebeef5;
    transition: background-color 0.15s ease;
}
.lr-form-dialog .el-form > .el-form-item:last-of-type,
.lr-form-grid > .el-form-item:last-of-type {
    border-bottom: none;
}

/* ---- ラベル列 ---- */
.lr-form-dialog .el-form > .el-form-item > .el-form-item__label,
.lr-form-grid > .el-form-item > .el-form-item__label {
    /* el-form の label-width 属性を上書きして全行で固定幅化 */
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px;
    box-sizing: border-box;
    padding: 14px 20px !important;
    background: #f8f9fb;
    border-right: 1px solid #ebeef5;
    font-size: 14px;
    font-weight: 500;
    color: #363c48;
    text-align: left !important;
    display: flex;
    align-items: center;
    min-height: 52px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    margin: 0;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
}

/* ---- 入力セル ---- */
.lr-form-dialog .el-form > .el-form-item > .el-form-item__content,
.lr-form-grid > .el-form-item > .el-form-item__content {
    padding: 12px 24px !important;
    flex: 1;
    margin-left: 0 !important;
    background: #ffffff;
    line-height: 1.6;
    transition: background-color 0.15s ease;
}

/* ---- 行内の注釈（補助メッセージ） ----
   2026-06-03 letsreal.css の .lr-helper / .lr-helper-warning / .lr-helper-error
   クラスへ移行済み。マークアップ例:
       <p class="lr-helper">開始日と終了日は０時基準です。</p>
       <p class="lr-helper-warning">割引率が50%を超える特別価格の申請はお控え下さい。</p>

   ここに以前あった、クラス無し <p>/<small> へ暗黙的に色とフォントサイズを当てる
   高詳細度ルール (.lr-form-dialog .el-form > .el-form-item > ... > p) は、
   .lr-helper-warning の orange を gray に上書きしてしまうため削除した。
   旧 <p style="color:red"> インラインスタイルへの orange 強制ルールも、
   lr-form-dialog/lr-form-grid 配下からは該当箇所が無くなったため削除した。
   ※ #product_form 側（edit_form/editset_form 等）の同種ルールは L125 付近に残してある。 */

/* ---- hover時の行ハイライト（控えめ） ---- */
.lr-form-dialog .el-form > .el-form-item:hover > .el-form-item__label,
.lr-form-grid > .el-form-item:hover > .el-form-item__label {
    background: #f1f6fc;
}
.lr-form-dialog .el-form > .el-form-item:hover > .el-form-item__content,
.lr-form-grid > .el-form-item:hover > .el-form-item__content {
    background: #fafcff;
}

/* ---- focus-within時の行ハイライト（編集中の行を明確化） ---- */
.lr-form-dialog .el-form > .el-form-item:focus-within,
.lr-form-grid > .el-form-item:focus-within {
    box-shadow: inset 3px 0 0 #409eff;
}
.lr-form-dialog .el-form > .el-form-item:focus-within > .el-form-item__label,
.lr-form-grid > .el-form-item:focus-within > .el-form-item__label {
    background: #dceeff;
    color: #0f4cb0;
}
.lr-form-dialog .el-form > .el-form-item:focus-within > .el-form-item__content,
.lr-form-grid > .el-form-item:focus-within > .el-form-item__content {
    background: #ecf5ff;
}

/* ---- 行の下罫線を消したい場合の opt-in ヘルパー ----
   留意事項ブロックなど、視覚的に独立させたい行で使用。
   旧 style="border-bottom:none" インライン指定の置換 */
.lr-form-dialog .el-form > .el-form-item.lr-no-border,
.lr-form-grid > .el-form-item.lr-no-border {
    border-bottom: none;
}

/* ---- ラベル無し行の制御（class="lr-no-label" を明示的に付けた行） ----
   留意事項のように label 属性を持たない el-form-item では、
   空のラベル列スペースを隠して入力列を全幅にする */
.lr-form-dialog .el-form > .el-form-item.lr-no-label > .el-form-item__label,
.lr-form-grid > .el-form-item.lr-no-label > .el-form-item__label {
    display: none;
}
.lr-form-dialog .el-form > .el-form-item.lr-no-label > .el-form-item__content,
.lr-form-grid > .el-form-item.lr-no-label > .el-form-item__content {
    margin-left: 0 !important;
    background: #ffffff;
}
.lr-form-dialog .el-form > .el-form-item.lr-no-label:hover > .el-form-item__content,
.lr-form-dialog .el-form > .el-form-item.lr-no-label:focus-within > .el-form-item__content,
.lr-form-grid > .el-form-item.lr-no-label:hover > .el-form-item__content,
.lr-form-grid > .el-form-item.lr-no-label:focus-within > .el-form-item__content {
    background: #ffffff;
}
.lr-form-dialog .el-form > .el-form-item.lr-no-label:focus-within,
.lr-form-grid > .el-form-item.lr-no-label:focus-within {
    box-shadow: none;
}

/* ---- ダイアログ本体の余白を詰めて、行が端から端まで広がる見た目に ----
   注: 以前ここに「最終行のラベル無し el-form-item をボタン帯化する」CSS があったが、
   フッターを <span slot="footer"> に移行したため不要になり削除済み。
   フッターの外装（白背景・上罫線・padding）は letsreal.css 側の
   .lr-form-dialog .el-dialog__footer で一元管理されている。 */
.lr-form-dialog .el-dialog__body {
    padding: 0;
}
.lr-form-dialog .el-form {
    margin: 0;
}