/* =============================================================
 *  出品リスト（developer/product）専用スタイル
 *  対象テンプレート: catalog/view/theme/default/template/developer/product.tpl
 *
 *  目的:
 *    出品リスト画面に design-tokens.css の var(--lr-*) を適用するための
 *    ページ固有スタイル集約ファイル。テンプレートからのインライン色を
 *    クラス参照に寄せ、見た目はテーブル統一パターンへ微調整する。
 *
 *  スコープ:
 *    すべての規則を #product 配下に限定し、他ページへの波及をゼロにする。
 *    （product.tpl のルート要素が <div id="product"> のため）
 *
 *  読み込み:
 *    catalog/controller/common/header.php の NewstoreMinifier 経由。
 *    developer-form.css の直後に addStyle されている。
 *
 *  関連:
 *    - 共通基盤（.card-header / .el-table / .el-button）は letsreal.css 側。
 *      本ファイルはそれを上書きせず、不足する細部のみ追加する。
 *    - キャンペーン申請ダイアログ（el-dialog custom-class="lr-form-dialog"）
 *      のフォーム部分は developer-form.css が担当。本ファイルは触らない。
 * ============================================================= */

/* ---- 旧 <style> ブロックの移管 ----
   .is-reday{background-color:gainsboro;} は未使用クラス（grep で参照ゼロ）
   のため移管せず破棄した。 */
#product [v-cloak] {
    display: none;
}
#product input[type=file] {
    display: none !important;
}
#product .el-upload__input {
    display: block !important;
}

/* ---- タブ装飾（el-tabs type="card"）----
   既定の Element UI スタイルでは選択状態がやや弱いため、
   アクティブタブをプライマリ色で明示し、ホバー時は薄背景を当てる。
   タブヘッダー帯と下罫線をデザイントークンで揃える。 */
#product > div > .el-tabs--card > .el-tabs__header {
    border-bottom: var(--lr-bw-1) solid var(--lr-border);
    margin: 0 0 var(--lr-space-md);
}
#product > div > .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-color: var(--lr-border);
    border-radius: var(--lr-radius-sm) var(--lr-radius-sm) 0 0;
}
#product > div > .el-tabs--card > .el-tabs__header .el-tabs__item {
    color: var(--lr-text-label);
    transition: color var(--lr-transition-fast), background-color var(--lr-transition-fast);
    border-left-color: var(--lr-border);
}
#product > div > .el-tabs--card > .el-tabs__header .el-tabs__item:hover {
    color: var(--lr-color-primary);
    background: var(--lr-color-primary-bg-soft);
}
#product > div > .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    color: var(--lr-color-primary);
    background: var(--lr-surface);
    border-bottom-color: var(--lr-surface);
    font-weight: var(--lr-fw-medium);
    box-shadow: inset 0 -2px 0 var(--lr-color-primary);
}

/* ---- テーブル微調整 ----
   letsreal.css の .el-table 系で大枠は揃っているため、
   ここでは「行高さの整え」と「セル内縦中央寄せ」を補強する程度に留める。 */
#product .el-table .cell {
    line-height: var(--lr-lh-tight);
}
#product .el-table td {
    vertical-align: middle;
}

/* ---- アクションボタン hover の box-shadow（テーブル統一パターン準拠）----
   テーブル内に並ぶ操作ボタン（確認・申請・設定・簡易版・詳細版・差替 等）
   を hover した際、軽い影で押せることを示す。色は触らず影だけ追加。

   ボタン中央寄せの強制：
   ブラウザ調査で display: inline, padding: 0 にリセットされているケースを確認。
   何かのCSSが Element UI のデフォルト（inline-block + padding 7px 12px）を
   上書きしていたため、テーブル内ボタンに対しては inline-flex で強制中央寄せし、
   padding を再宣言する。!important は最小限。 */
#product .el-table .el-button {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 7px 12px !important;
    transition: box-shadow var(--lr-transition-fast),
                background-color var(--lr-transition-fast),
                color var(--lr-transition-fast),
                border-color var(--lr-transition-fast);
}
/* mini サイズ専用の高さ調整（Element UI 既定の小さめ高さを維持） */
#product .el-table .el-button--mini {
    min-height: 28px;
}
#product .el-table .el-button:not(.is-disabled):hover {
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.18);
}
/* 危険色ボタン（詳細版など）の hover 影は赤系で */
#product .el-table .el-button--danger:not(.is-disabled):hover {
    box-shadow: 0 2px 6px rgba(245, 108, 108, 0.20);
}
/* 警告色ボタン（PW 設定中・BT差替 など）の hover 影は橙系で */
#product .el-table .el-button--warning:not(.is-disabled):hover {
    box-shadow: 0 2px 6px rgba(230, 162, 60, 0.20);
}
/* 成功色ボタン（設定済 など） */
#product .el-table .el-button--success:not(.is-disabled):hover {
    box-shadow: 0 2px 6px rgba(103, 194, 58, 0.20);
}

/* ---- ステータスラベル（キャンペーン履歴ダイアログ内） ----
   状態を意味的に表すクラス。色は design-tokens の状態色トークンへ寄せる。 */
#product .lr-status-cancel    { color: var(--lr-color-warning); }
#product .lr-status-approved  { color: var(--lr-color-success); }
#product .lr-status-rejected  { color: var(--lr-color-danger); }
#product .lr-status-pending   { color: var(--lr-text-muted); }

/* ---- 補助テキスト（ダッシュ「—」等） ---- */
#product .lr-text-aux {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-xs);
}

/* ---- 警告本文（赤色注意書き） ----
   旧 style="color: red" を意味的なクラスに寄せる。
   注意喚起のニュアンスは letsreal.css の .header-sub と同じ
   --lr-color-warning（#e6a23c）を採用し、サイト全体の警告トーンを統一する。 */
#product .lr-text-warn {
    color: var(--lr-color-warning);
}

/* ---- ドキュメントリンク（tooltip 内の「詳しくはこちら」等） ----
   既定の a 色が tooltip 内では暗くなりがちなので、
   プライマリ色で明示する。 */
#product .lr-doc-link {
    color: var(--lr-color-primary);
    text-decoration: underline;
}
#product .lr-doc-link:hover {
    color: var(--lr-color-primary-hover);
}

/* ---- バージョン情報ダイアログのラベル ----
   「Version: 」「登録時刻: 」等の見出し風ラベル。 */
#product .lr-version-label {
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-medium);
}