/* =============================================================
 *  出品者向けフォーム共通スタイル
 *  読み込み: 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;
}

/* ---- 注意書き（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;
}

/* =============================================================
 *  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;
}

/* ---- 行内の注釈（color:red のp や small/p を統一トーンに） ---- */
.lr-form-dialog .el-form > .el-form-item > .el-form-item__content p[style*="color: red"],
.lr-form-dialog .el-form > .el-form-item > .el-form-item__content p[style*="color:red"],
.lr-form-grid > .el-form-item > .el-form-item__content p[style*="color: red"],
.lr-form-grid > .el-form-item > .el-form-item__content p[style*="color:red"] {
    color: #e6a23c !important;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 2px;
    line-height: 1.6;
}
.lr-form-dialog .el-form > .el-form-item > .el-form-item__content > small,
.lr-form-dialog .el-form > .el-form-item > .el-form-item__content > p,
.lr-form-grid > .el-form-item > .el-form-item__content > small,
.lr-form-grid > .el-form-item > .el-form-item__content > p {
    color: #909399;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
}

/* ---- 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;
}

/* ---- ラベル無し行の制御（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 をボタン帯化） ---- */
.lr-form-dialog .el-form > .el-form-item:last-child {
    border-top: 1px solid #ebeef5;
}
.lr-form-dialog .el-form > .el-form-item:last-child > .el-form-item__label {
    display: none;
}
.lr-form-dialog .el-form > .el-form-item:last-child > .el-form-item__content {
    margin-left: 0 !important;
    padding: 20px 24px !important;
    background: #ffffff;
    text-align: right;
}
.lr-form-dialog .el-form > .el-form-item:last-child:hover > .el-form-item__content,
.lr-form-dialog .el-form > .el-form-item:last-child:focus-within > .el-form-item__content {
    background: #ffffff;
}
.lr-form-dialog .el-form > .el-form-item:last-child:focus-within {
    box-shadow: none;
}

/* ---- ダイアログ本体の余白を詰めて、行が端から端まで広がる見た目に ---- */
.lr-form-dialog .el-dialog__body {
    padding: 0;
}
.lr-form-dialog .el-form {
    margin: 0;
}