/* =============================================================
 *  出品リスト（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"）----
   letsreal.css の `.el-tabs--card` グローバル装飾に移管済み（ガイドライン §5-12）。
   ページ固有の上書きが必要になったらここに戻すこと。 */

/* ---- リアル実績ダイアログ：ボタンエリア ----
   横タブ＋常時表示ボタン構造。
   ボタンは v-if での出し分けではなく :disabled で表現することで、
   タブ切替時にボタンエリアの高さが変動せず、テーブル位置が安定する。 */
.lr-realset-actions {
    display: flex;
    gap: var(--lr-space-sm);
    margin-bottom: var(--lr-space-md);
}

/* ---- テーブル微調整 ----
   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); }

/* ---- 補助テキスト・警告本文 ----
   .lr-text-aux と .lr-text-warn は letsreal.css へ移管しサイト全域化済み。
   ここでは #product 固有の追加スタイルが必要になったら追記する。 */

/* ---- ドキュメントリンク（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 Timeline
 *
 *  構造（テンプレ側）:
 *    .lr-version-timeline
 *      └── article.lr-version-item.lr-version-item--status-{0|1|2|3}
 *           ├── span.lr-version-item__dot         （タイムラインのノード）
 *           └── div.lr-version-item__body
 *                ├── header.lr-version-item__header
 *                │    ├── h4.lr-version-item__ver   （v1.0.12）
 *                │    └── el-tag                    （承認/却下/待ち）
 *                ├── time.lr-version-item__time      （日時＋GMT+0チップ）
 *                └── div.lr-version-item__notes      （リリースノート）
 *
 *  デザイン意図:
 *    - 縦の spine（細線）にドット（ノード）を並べて時系列を可視化
 *    - status を「ドットの色／塗り」と「Element UI バッジ」で二重符号化
 *    - 待ち（status=0）はホロー（白塗り＋枠線）で未確定感を表現
 *    - リリースノートは status 色の左罫線付きカードで引用調に
 *    - 開封時にスタッガード fade-in
 * ============================================================= */

#product .lr-version-timeline {
    position: relative;
    padding-left: 4px;
}

/* タイムラインの spine（縦線） */
#product .lr-version-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--lr-border);
    border-radius: 1px;
}

/* バージョン項目 */
#product .lr-version-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--lr-space-lg);
    padding: var(--lr-space-md) var(--lr-space-md) var(--lr-space-md) 0;
    margin-left: 0;
    border-radius: var(--lr-radius-sm);
    transition: background-color var(--lr-transition-fast);
    /* 開封時のスタッガード fade-in */
    opacity: 0;
    transform: translateX(-6px);
    animation: lr-version-item-in 0.4s ease-out forwards;
}
#product .lr-version-item:hover {
    background-color: var(--lr-surface-hover);
}
#product .lr-version-item:nth-child(1)     { animation-delay: 0.00s; }
#product .lr-version-item:nth-child(2)     { animation-delay: 0.05s; }
#product .lr-version-item:nth-child(3)     { animation-delay: 0.10s; }
#product .lr-version-item:nth-child(4)     { animation-delay: 0.15s; }
#product .lr-version-item:nth-child(5)     { animation-delay: 0.20s; }
#product .lr-version-item:nth-child(n+6)   { animation-delay: 0.25s; }

@keyframes lr-version-item-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ステータスドット（タイムラインのノード） */
#product .lr-version-item__dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 6px 0 0 0;
    border-radius: var(--lr-radius-full);
    background: var(--lr-surface);
    border: 2px solid var(--lr-text-muted);
    box-sizing: border-box;
    /* spine の縦線をドットの背後で隠す */
    box-shadow: 0 0 0 3px var(--lr-surface);
    transition: transform var(--lr-transition-base), box-shadow var(--lr-transition-base);
}
/* hover 時：ドットを少し拡大しつつ、フチの色も surface-hover に追随させる
   （spine 線がドットの背後で隠れたままになるよう、フチは行ホバー色と同色） */
#product .lr-version-item:hover .lr-version-item__dot {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--lr-surface-hover);
}

/* ステータス別ドット色 */
#product .lr-version-item--status-1 .lr-version-item__dot,
#product .lr-version-item--status-3 .lr-version-item__dot {
    background: var(--lr-color-success);
    border-color: var(--lr-color-success);
}
#product .lr-version-item--status-2 .lr-version-item__dot {
    background: var(--lr-color-danger);
    border-color: var(--lr-color-danger);
}
#product .lr-version-item--status-0 .lr-version-item__dot {
    /* 待ち：ホロー（白塗り＋枠線）で未確定感 */
    background: var(--lr-surface);
    border-color: var(--lr-text-muted);
}

/* 本体 */
#product .lr-version-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* ヘッダー：バージョン番号＋ステータスバッジ */
#product .lr-version-item__header {
    display: flex;
    align-items: baseline;
    gap: var(--lr-space-md);
    margin-bottom: 2px;
}

/* バージョン番号（v1.0.12） */
#product .lr-version-item__ver {
    font-family: var(--lr-font-family-display);
    font-size: var(--lr-fs-xl);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
    margin: 0;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* 登録時刻（タイムゾーン込みの一行表示） */
#product .lr-version-item__time {
    display: block;
    font-size: var(--lr-fs-xs);
    color: var(--lr-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    margin-bottom: var(--lr-space-sm);
}

/* リリースノート：status 色の左罫線付きカード */
#product .lr-version-item__notes {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-body);
    line-height: var(--lr-lh-base);
    background: var(--lr-surface-sub);
    border-radius: var(--lr-radius-sm);
    padding: 8px 12px;
    border-left: var(--lr-bw-3) solid var(--lr-border);
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: var(--lr-space-xs);
}
#product .lr-version-item--status-1 .lr-version-item__notes,
#product .lr-version-item--status-3 .lr-version-item__notes {
    border-left-color: var(--lr-color-success);
}
#product .lr-version-item--status-2 .lr-version-item__notes {
    border-left-color: var(--lr-color-danger);
}

/* リリースノートが空のときのプレースホルダ */
#product .lr-version-item__notes-empty {
    color: var(--lr-text-muted);
    font-style: italic;
}

/* リリースノート内のリッチテキスト（v-html）整形 */
#product .lr-version-item__notes p {
    margin: 0 0 4px;
}
#product .lr-version-item__notes p:last-child {
    margin-bottom: 0;
}

/* ---- 空状態 ----
   .lr-version-empty は letsreal.css の汎用 .lr-empty パターンへ移行済み
   （ガイドライン §5-11 リファレンス実装）。
   本ファイルではダイアログ固有の追加スタイルは不要。 */