/* =============================================================
 *  出品報酬（developer/sales）専用スタイル
 *  対象テンプレート: catalog/view/theme/default/template/developer/sales.tpl
 *
 *  目的:
 *    出品報酬画面に design-tokens.css の var(--lr-*) を適用するための
 *    ページ固有スタイル集約ファイル。テンプレートからのインライン
 *    <style> ブロックを移管し、生 hex / 半端値を順次トークン参照へ寄せる。
 *
 *  スコープ:
 *    すべての規則を #bonus 配下に限定し、他ページへの波及をゼロにする。
 *    （sales.tpl のルート要素が <div id="bonus"> のため。
 *      ファイル名は sales だが id 名は bonus が歴史的経緯で残っている）
 *
 *  読み込み:
 *    catalog/controller/common/header.php の NewstoreMinifier 経由。
 *    developer-product.css の直後に addStyle する。
 *
 *  関連:
 *    - 共通基盤（.card-header / .el-table / .el-button / .el-tabs / .el-dialog）
 *      は letsreal.css 側。本ファイルはそれを上書きせず、ページ固有の細部のみ。
 *    - 段階A（本コミット）: <style> ブロック移管 + トークン参照化（見た目維持）。
 *      段階B以降（タブ card 化、テーブル size 統一、ダイアログ lr-dialog 化等）は
 *      別タスクで進める。
 * ============================================================= */

#bonus [v-cloak] {
    display: none;
}

/* ---- カードのセクション間余白 ---- */
#bonus .el-card {
    margin-bottom: var(--lr-space-xl);
}

/* ---- 概要カード（今月報酬／今月販売本数の大型数字エリア） ----
   旧クラス名 .gaiyao / .shang / .zhonge / .grayFont / .weightFont は
   テンプレ側がそのまま参照しているため、ここでは命名を変えずに移管する */
#bonus .gaiyao .shang {
    /* 11px → 12px に寄せて 4 の倍数化（ガイドライン §3） */
    padding: var(--lr-space-md) 0 var(--lr-space-xl);
}

#bonus .gaiyao .zhonge {
    /* 大型強調数字（30px / 50px）はトークン上の該当値がないため独自値で維持 */
    font-size: 30px;
    line-height: 50px;
    color: var(--lr-color-primary);
    font-weight: var(--lr-fw-bold);
}

#bonus .gaiyao .grayFont {
    color: var(--lr-text-muted);      /* #999 → #909399（Element UI 互換） */
}

#bonus .gaiyao .weightFont {
    font-weight: var(--lr-fw-bold);
    font-size: var(--lr-fs-lg);
}

/* ---- 検索アイコン（fa-search）の装飾 ----
   現状テンプレで使用箇所は確認できていないが、見た目維持のため移管する。
   段階Cでテンプレ確認後に未使用と判断できれば削除予定 */
#bonus i.fa-search {
    position: absolute;
    right: 3%;
    font-size: var(--lr-fs-xl);
    color: var(--lr-text-muted);
}

#bonus i.fa-search:hover {
    color: var(--lr-color-primary);
    /* キーフレーム名は元 .myfirst から bonus-search-shake へ改名（衝突回避） */
    animation: bonus-search-shake .5s linear 0s infinite alternate;
}

@keyframes bonus-search-shake {
    0% {
        color: var(--lr-color-primary);
        transform: rotate(0deg);
    }
    50% {
        color: var(--lr-color-primary);
        transform: rotate(30deg);
    }
    100% {
        color: var(--lr-color-primary);
        transform: rotate(0deg);
    }
}

/* ---- カード内タイトル直下の隙間調整 ---- */
#bonus .el-card__header {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ---- 内側タブ＋テーブルを囲む el-card：本体上部を詰める ---- */
#bonus .tab_paneTable .el-card__body {
    padding-top: 0;
}

/* ---- 詳細検索の開閉トランジション ----
   現状テンプレで参照箇所は要確認だが、見た目維持のため移管する。
   独自のイージング（cubic-bezier）はトークン化対象外として残す */
#bonus .fade_isShowSearch-enter-active {
    transition: all var(--lr-transition-slow);
}
#bonus .fade_isShowSearch-leave-active {
    transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
#bonus .fade_isShowSearch-enter,
#bonus .fade_isShowSearch-leave-to {
    transform: translateX(10px);
    opacity: 0;
}

/* ---- 詳細検索フォーム「検索／リセット」ボタン行を中央寄せ ---- */
#bonus .el-form-item.btn_ .el-form-item__content {
    margin: 0 !important;
    text-align: center;
}

/* ---- 小型テーブルの el-card 半幅化 ----
   報酬一覧（4列・数値のみ）のように情報量が少ないテーブルは、
   カード自体を半分の幅にしてテーブル幅とコンテンツがマッチするようにする。
   全幅カードに 4 列固定 width テーブルを置くと、右側に大きな空白が残り
   「データなし」のラベルも遠く中央に孤立して破綻する。
   SP では全幅に戻して縦スクロールに任せる。 */
#bonus .lr-card-half {
    max-width: 50%;
}
@media (max-width: 768px) {
    #bonus .lr-card-half {
        max-width: 100%;
    }
}