/* =============================================================
 *  サイトキャンペーン関連スタイル（developer/promotion）
 *  読み込み: catalog/controller/common/header.php の NewstoreMinifier 経由
 *
 *  対象テンプレ:
 *    - developer/promotion_list.tpl  (募集中・申請履歴の一覧)
 *    - developer/promotion_form.tpl  (一括価格申請フォーム)
 *
 *  方針:
 *    - 価格・商品IDは等幅フォント（JetBrains Mono）で読みやすく揃える。
 *    - 色値は design-tokens.css の var(--lr-*) を参照。
 *    - 一括操作 UI のため、テーブルセル padding を密にして情報量を確保する。
 *    - sticky ヘッダー / sticky 申請バーで縦長フォームの操作性を担保する。
 * ============================================================= */

/* ===== v-cloak ===== */
#promotion_app[v-cloak],
#promotion_form_app[v-cloak] {
    display: none;
}

/* =============================================================
 *  共通: 等幅フォント
 * ============================================================= */
.lr-mono {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* =============================================================
 *  募集中キャンペーン一覧 (#promotion_app)
 * ============================================================= */

#promotion_app .meta-line {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
    line-height: 1.9;
}
#promotion_app .meta-line b {
    color: var(--lr-text-label);
}
#promotion_app .meta-icon {
    color: var(--lr-text-muted);
    margin-right: var(--lr-space-xs);
}
#promotion_app .campaign-desc {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
    white-space: pre-line;
    margin-top: var(--lr-space-sm);
    padding-top: var(--lr-space-sm);
    border-top: 1px dashed var(--lr-border);
}

/* 終了日挙動の小さな注意ラベル（インラインで控えめに） */
#promotion_app .end-date-hint {
    display: inline-block;
    margin-left: var(--lr-space-sm);
    font-size: 11px;
    color: var(--lr-color-warning);
    background: #fdf6ec;
    padding: 1px 6px;
    border-radius: 3px;
}

/* 旧 .product-id-link は 2026-06-03 削除（ガイドライン §5-3 統一で
   <el-button @click="handlePreview"> に置換した） */

/* タブラベル横のバッジ位置調整 */
#promotion_app .tab-badge {
    margin-left: var(--lr-space-sm);
    vertical-align: middle;
}
#promotion_app .tab-badge .el-badge__content {
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 11px;
    border: none;
}

/* 募集中キャンペーン未開催時のガイド
   Element UI 2.15.1 には el-empty が未搭載のため独自マークアップで描画 */
#promotion_app .empty-guide {
    text-align: center;
    padding: 56px var(--lr-space-2xl) 48px;
}
#promotion_app .empty-guide__icon {
    font-size: 64px;
    color: var(--lr-border-strong);
    line-height: 1;
    margin-bottom: var(--lr-space-xl);
}
#promotion_app .empty-guide__title {
    color: var(--lr-text-label);
    font-size: var(--lr-fs-lg);
    font-weight: var(--lr-fw-bold);
    margin: 0 0 var(--lr-space-md);
}
#promotion_app .empty-guide__desc {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
    line-height: 1.9;
    margin: 0 auto var(--lr-space-2xl);
    max-width: 560px;
}
#promotion_app .empty-guide__hints {
    display: inline-block;
    text-align: left;
    list-style: none;
    padding: var(--lr-space-lg) var(--lr-space-2xl);
    margin: 0;
    background: #FAFAFA;
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius-sm);
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
    line-height: 2;
}
#promotion_app .empty-guide__hints li {
    padding-left: 0;
}
#promotion_app .empty-guide__hints .el-icon-check {
    color: var(--lr-color-success);
    margin-right: var(--lr-space-sm);
}

/* 申請履歴なし時のシンプル表示 */
#promotion_app .empty-simple {
    text-align: center;
    padding: 48px var(--lr-space-2xl);
}
#promotion_app .empty-simple__icon {
    font-size: 56px;
    color: var(--lr-border-strong);
    line-height: 1;
    margin-bottom: var(--lr-space-md);
}
#promotion_app .empty-simple__desc {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-muted);
    margin: 0;
}

/* カード本体（募集中キャンペーン） */
#promotion_app .lr-campaign-card {
    margin-bottom: var(--lr-space-lg);
}
#promotion_app .lr-campaign-card__title {
    font-weight: var(--lr-fw-bold);
    font-size: var(--lr-fs-lg);
}
#promotion_app .lr-campaign-card__actions {
    margin-top: var(--lr-space-md);
    text-align: right;
}

/* 却下理由ダイアログ */
#promotion_app .lr-reject-meta {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
    margin-bottom: 10px;
}
#promotion_app .lr-reject-meta .lr-reject-sep {
    color: var(--lr-border-strong);
}
#promotion_app .lr-reject-body {
    white-space: pre-wrap;
    word-break: break-word;
    background: #fdf6f6;
    border: 1px solid #fde2e2;
    color: #5e3030;
    padding: 14px var(--lr-space-lg);
    border-radius: var(--lr-radius-sm);
    font-size: var(--lr-fs-md);
    line-height: 1.7;
    max-height: 50vh;
    overflow-y: auto;
}
#promotion_app .lr-table-row-detail {
    padding: 0;
    margin-top: 3px;
    font-size: var(--lr-fs-xs);
}

/* =============================================================
 *  申請フォーム (#promotion_form_app)
 * ============================================================= */

#promotion_form_app {
    position: relative;
    padding-bottom: 80px; /* sticky bar 高さ分 */
}
#promotion_form_app .mono {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---- sticky キャンペーン情報ヘッダー ---- */
#promotion_form_app .campaign-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--lr-surface);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius-md);
    padding: var(--lr-space-md) var(--lr-space-lg);
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
#promotion_form_app .campaign-sticky .row-title {
    font-size: var(--lr-fs-lg);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-text-title);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
#promotion_form_app .campaign-sticky .row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12.5px;
    color: var(--lr-text-muted);
}
#promotion_form_app .campaign-sticky .row-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#promotion_form_app .campaign-sticky .row-meta .meta-item i {
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-sm);
}
#promotion_form_app .campaign-sticky .row-meta b {
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-bold);
}
#promotion_form_app .campaign-sticky .row-meta .accent {
    color: var(--lr-color-primary);
    font-weight: var(--lr-fw-bold);
}
#promotion_form_app .campaign-desc {
    color: var(--lr-text-muted);
    font-size: 12.5px;
    margin-top: var(--lr-space-sm);
    padding-top: var(--lr-space-sm);
    border-top: 1px dashed var(--lr-border);
    white-space: pre-line;
}

/* 終了日挙動の注意書き／参加対象外ルール説明 */
#promotion_form_app .end-date-notice {
    margin-top: var(--lr-space-sm);
    padding: 6px 10px;
    background: #fdf6ec;
    border-left: var(--lr-bw-3) solid var(--lr-color-warning);
    color: #946400;
    font-size: var(--lr-fs-xs);
    border-radius: 3px;
}
#promotion_form_app .eligibility-notice {
    margin-top: 6px;
    padding: 6px 10px;
    background: #f4f4f5;
    border-left: var(--lr-bw-3) solid var(--lr-color-info);
    color: var(--lr-text-muted);
    font-size: var(--lr-fs-xs);
    border-radius: 3px;
}

/* ---- ツールバー（検索 + 一括操作） ---- */
#promotion_form_app .toolbar {
    display: flex;
    align-items: center;
    gap: var(--lr-space-md);
    padding: 10px 14px;
    background: #fafafa;
    border: 1px solid var(--lr-border);
    border-bottom: none;
    border-radius: var(--lr-radius-md) var(--lr-radius-md) 0 0;
}
#promotion_form_app .toolbar .search-box {
    flex: 1;
    max-width: 320px;
}
#promotion_form_app .toolbar .stat {
    font-size: 12.5px;
    color: var(--lr-text-muted);
    margin-left: auto;
}
#promotion_form_app .toolbar .stat b {
    color: var(--lr-color-primary);
    font-weight: var(--lr-fw-bold);
}

/* ---- テーブル ---- */
#promotion_form_app .pricing-table {
    border: 1px solid var(--lr-border);
    border-radius: 0 0 var(--lr-radius-md) var(--lr-radius-md);
    overflow: hidden;
    background: var(--lr-surface);
}
#promotion_form_app .el-table th.el-table__cell {
    background: #f7f9fc !important;
    color: var(--lr-text-title);
    font-weight: var(--lr-fw-bold);
    font-size: var(--lr-fs-xs);
    letter-spacing: 0.03em;
    padding: 8px 0;
}
#promotion_form_app .el-table td.el-table__cell {
    padding: 6px 0;
}

/* 参加ON行: 左端の縦バー + 薄い背景 */
#promotion_form_app .el-table .row-selected {
    background-color: var(--lr-color-primary-bg-soft) !important;
    position: relative;
}
#promotion_form_app .el-table .row-selected td:first-child {
    box-shadow: inset 3px 0 0 0 var(--lr-color-primary);
}
#promotion_form_app .el-table .row-disabled td {
    color: var(--lr-border-strong);
}
/* 参加不可商品（90日制限該当）: より薄いグレーで「対象外」を示す */
#promotion_form_app .el-table .row-ineligible td {
    color: var(--lr-border-strong);
    background-color: #fafafa;
}

/* 商品ID/価格: 等幅フォント */
#promotion_form_app .pid {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--lr-fs-xs);
    color: var(--lr-text-muted);
}
#promotion_form_app .price-original {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--lr-fs-sm);
    font-weight: var(--lr-fw-medium);
    color: var(--lr-text-muted);
}
#promotion_form_app .price-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
#promotion_form_app .price-arrow {
    color: var(--lr-border-strong);
    font-size: var(--lr-fs-xs);
}
#promotion_form_app .price-applied {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    color: var(--lr-color-primary);
}
#promotion_form_app .price-applied.has-error {
    color: var(--lr-color-danger);
}
#promotion_form_app .price-discount-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: var(--lr-fw-medium);
    color: var(--lr-color-success);
    background: #f0f9eb;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: var(--lr-space-xs);
}
#promotion_form_app .price-discount-badge.error {
    color: var(--lr-color-danger);
    background: #fef0f0;
}

/* キャンペーン価格入力セル */
#promotion_form_app .price-cell {
    padding: 0 var(--lr-space-sm);
}
#promotion_form_app .price-cell .el-input__inner {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
    height: 30px;
    line-height: 30px;
}
#promotion_form_app .row-quick-rates {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    margin-top: var(--lr-space-xs);
}
#promotion_form_app .row-quick-rates .el-button {
    margin: 0;
    padding: 2px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    min-width: 32px;
    height: 22px;
    border-radius: 3px;
}
#promotion_form_app .row-error {
    color: var(--lr-color-danger);
    font-size: 11px;
    margin-top: 3px;
    text-align: right;
}
#promotion_form_app .price-missing {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-xs);
    font-size: var(--lr-fs-xs);
    color: var(--lr-color-warning);
    background: #fdf6ec;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: var(--lr-fw-medium);
}
#promotion_form_app .row-selected .el-input.is-disabled .el-input__inner {
    background-color: var(--lr-surface);
}
#promotion_form_app .row-selected.row-missing .price-cell .el-input__inner {
    border-color: var(--lr-color-warning);
    box-shadow: 0 0 0 2px rgba(230,162,60,0.1);
}

/* "—" placeholder（参加OFF や未入力時の右側プレースホルダー） */
#promotion_form_app .lr-empty-placeholder {
    color: var(--lr-border-strong);
    font-size: var(--lr-fs-xs);
}

/* ---- sticky 申請バー ---- */
#promotion_form_app .sticky-submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--lr-surface);
    border-top: 1px solid #e4e7ed;
    padding: var(--lr-space-md) var(--lr-space-2xl);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: var(--lr-space-lg);
}
#promotion_form_app .sticky-submit-bar .summary {
    font-size: var(--lr-fs-sm);
    color: var(--lr-text-muted);
    flex: 1;
    display: flex;
    gap: var(--lr-space-sm);
    align-items: center;
    flex-wrap: wrap;
}
#promotion_form_app .sticky-submit-bar .summary-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--lr-space-xs);
    padding: var(--lr-space-xs) 10px;
    border-radius: 14px;
    font-size: 12.5px;
}
#promotion_form_app .sticky-submit-bar .summary-pill b {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--lr-fs-md);
    font-weight: var(--lr-fw-bold);
    margin: 0 2px;
}
#promotion_form_app .sticky-submit-bar .summary-pill--target {
    background: var(--lr-color-primary-bg);
    color: var(--lr-color-primary);
}
#promotion_form_app .sticky-submit-bar .summary-pill--target b {
    color: var(--lr-color-primary);
}
#promotion_form_app .sticky-submit-bar .summary-pill--warn {
    background: #fdf6ec;
    color: var(--lr-color-warning);
}
#promotion_form_app .sticky-submit-bar .summary-pill--warn b {
    color: var(--lr-color-warning);
}
#promotion_form_app .sticky-submit-bar .summary-pill--muted {
    background: #f4f4f5;
    color: var(--lr-text-muted);
}
#promotion_form_app .sticky-submit-bar .actions {
    display: flex;
    gap: var(--lr-space-sm);
}

/* el-empty の調整 */
#promotion_form_app .el-empty {
    padding: var(--lr-space-xl) 0;
}

/* カード一覧の表示密度 */
.lr-campaign-card-col {
    margin-bottom: var(--lr-space-lg);
}

/* フォーム上部のサーバーサイドエラーアラート */
.lr-form-error-alert {
    margin-bottom: var(--lr-space-md);
}