/* ============================================================================
   ファイル名: app/assets/stylesheets/shared_sidebar_sakura.css
   コメント付与日: 2026-07-04
   【ファイルの役割】shared_sidebar.css の桜テーマ（夜桜 sakura_night / 昼桜 sakura_day）専用オーバーライド。
     base の行数ガードレール spec 超過回避のため base から分離した companion。base の
     stylesheet_link_tag 直後に読み込む（Propshaft により app/assets 配下は自動配信・assets.rb 登録不要）。
   【リファクタリング基準】※コメント行・空行は行数カウントから除外（CSS 基準）
     1. 500 行未満: 完璧 / 2. 800 行未満: 問題なし / 3. 1200 行未満: 注意喚起・要検討 / 4. 1200 行以上: 必須
     実コード行数: 約 166 行（コメント・空行除外・2026-07-04 計測）→ 判定: 完璧
   【ジュニア向け解説】夜桜は wood テーマの色（コッパー/木目）を桜ピンク/花びらへ、昼桜は light テーマの
     色（ブラウンゴールド）を濃ローズへ写したミラー。値の対応は docs/design-system/themes.md 参照。
============================================================================ */

/* ===== 桜テーマ（夜桜 sakura_night / 昼桜 sakura_day）— Phase 2 / 2026-07-01 ===== */

/* --- 夜桜 sakura_night（wood ミラー） --- */
/* wood テーマの銅色（#c87941 系）を桜ピンク（#ff9dc4 = rgba(255,157,196)）へ置き換えたミラー */
[data-theme="sakura_night"] .sidebar-premium-edition {
  color: var(--lx-gold-text);
}

/* ランク名の文字色: ランク固有色を桜ピンクへわずかにブレンドして馴染ませる */
[data-theme="sakura_night"] .sidebar-rank-name {
  color: color-mix(in srgb, var(--rank-color) 85%, #f5e6ee);
}

/* サイドバー本体: 桜花びらの背景画像 + ピンク系グロー */
[data-theme="sakura_night"] .sidebar {
  background-image: var(--sakura-petal-sidebar);
  box-shadow:
    inset 0 1px 0 rgba(255, 157, 196, 0.1),
    0 0 50px rgba(255, 157, 196, 0.03);
}

[data-theme="sakura_night"] .sidebar::before {
  background: linear-gradient(90deg, transparent, rgba(255, 157, 196, 0.06), transparent);
}

[data-theme="sakura_night"] .sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 157, 196, 0.2) 50%, transparent 100%);
}

/* スクロールバー: ピンク系に統一 */
[data-theme="sakura_night"] .sidebar nav::-webkit-scrollbar-track {
  background: rgba(255, 157, 196, 0.03);
}

[data-theme="sakura_night"] .sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255, 157, 196, 0.25);
}

[data-theme="sakura_night"] .sidebar nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 157, 196, 0.4);
}

[data-theme="sakura_night"] .sidebar nav {
  scrollbar-color: rgba(255, 157, 196, 0.25) rgba(255, 157, 196, 0.03);
}

/* アクティブ項目: ピンク系グラデーション背景 + ボーダー */
[data-theme="sakura_night"] .sidebar-item.active {
  background: linear-gradient(135deg, rgba(255, 157, 196, 0.12) 0%, rgba(255, 157, 196, 0.06) 100%) !important;
  border: 1px solid rgba(255, 157, 196, 0.25) !important;
  box-shadow: 0 4px 15px rgba(255, 157, 196, 0.1) !important;
}

[data-theme="sakura_night"] .sidebar-item::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255, 157, 196, 0.04) 50%, transparent 70%);
}

/* ロゴ・検索・アバター: ピンク系グロー */
[data-theme="sakura_night"] .luxury-logo {
  box-shadow:
    0 15px 30px rgba(255, 157, 196, 0.15),
    0 0 0 1px rgba(255, 157, 196, 0.15);
}

[data-theme="sakura_night"] .luxury-search:focus {
  border-color: rgba(255, 157, 196, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 157, 196, 0.08);
}

[data-theme="sakura_night"] .luxury-avatar {
  border: 2px solid rgba(255, 157, 196, 0.25);
  box-shadow: 0 4px 15px rgba(15, 8, 14, 0.3);
}

[data-theme="sakura_night"] .luxury-user-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 157, 196, 0.2) 50%, transparent 100%);
}

/* 区切り線: CSS border-image で桜グラデーション（--sakura-divider-gradient）を適用 */
[data-theme="sakura_night"] .sidebar-item {
  border-bottom: 1px solid transparent;
  border-image: var(--sakura-divider-gradient) 1;
}

/* フォーカスリング・認証ボタン・ピンボタン: ピンク系 */
[data-theme="sakura_night"] .sidebar-item:focus {
  outline: 2px solid rgba(255, 157, 196, 0.4);
}

[data-theme="sakura_night"] .luxury-auth-btn-primary {
  box-shadow: 0 8px 25px rgba(255, 157, 196, 0.2);
}

[data-theme="sakura_night"] .luxury-auth-btn-primary:hover {
  box-shadow: 0 12px 35px rgba(255, 157, 196, 0.3);
}

[data-theme="sakura_night"] .sidebar-pin-btn {
  border-color: rgba(255, 157, 196, 0.4) !important;
  color: #ff9dc4 !important;
}
[data-theme="sakura_night"] .sidebar-pin-btn:hover {
  background: rgba(255, 157, 196, 0.15) !important;
  border-color: rgba(255, 157, 196, 0.6) !important;
}
[data-theme="sakura_night"] .sidebar.is-pinned .sidebar-pin-btn {
  background: rgba(255, 157, 196, 0.22) !important;
  border-color: rgba(255, 157, 196, 0.7) !important;
}
[data-theme="sakura_night"] .sidebar:not(:hover):not(.is-pinned) .luxury-section-title {
  background: linear-gradient(90deg, rgba(255, 157, 196, 0.5), rgba(255, 157, 196, 0)) !important;
}

/* --- 昼桜 sakura_day（light ミラー） --- */
/* light テーマの琥珀色（#b45309 系）を濃ローズ（rgba(194,24,91) 系）へ置き換えたミラー */
[data-theme="sakura_day"] .sidebar-premium-edition {
  color: rgba(194, 24, 91, 0.85);
}

/* ランク名の文字色: ランク固有色を濃ローズ寄りに引きつけ視認性を維持 */
[data-theme="sakura_day"] .sidebar-rank-name {
  color: color-mix(in srgb, var(--rank-color) 55%, #3d2b32);
}

/* サイドバー本体: 濃ローズ系グロー（light テーマの金色グローを置換） */
[data-theme="sakura_day"] .sidebar {
  box-shadow:
    inset 0 1px 0 rgba(194, 24, 91, 0.1),
    0 0 50px rgba(194, 24, 91, 0.03);
}

[data-theme="sakura_day"] .sidebar::before {
  background: linear-gradient(90deg, transparent, rgba(194, 24, 91, 0.06), transparent);
}

[data-theme="sakura_day"] .sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(194, 24, 91, 0.2) 50%, transparent 100%);
}

/* スクロールバー: 濃ローズ系に統一（track は light に合わせ透明黒） */
[data-theme="sakura_day"] .sidebar nav::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="sakura_day"] .sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(194, 24, 91, 0.25);
}

[data-theme="sakura_day"] .sidebar nav::-webkit-scrollbar-thumb:hover {
  background: rgba(194, 24, 91, 0.4);
}

[data-theme="sakura_day"] .sidebar nav {
  scrollbar-color: rgba(194, 24, 91, 0.25) rgba(0, 0, 0, 0.03);
}

/* アクティブ項目: 濃ローズ系グラデーション背景 + ボーダー */
[data-theme="sakura_day"] .sidebar-item.active {
  background: linear-gradient(135deg, rgba(194, 24, 91, 0.12) 0%, rgba(194, 24, 91, 0.06) 100%) !important;
  border: 1px solid rgba(194, 24, 91, 0.25) !important;
  box-shadow: 0 4px 15px rgba(194, 24, 91, 0.1) !important;
}

[data-theme="sakura_day"] .sidebar-item::before {
  background: linear-gradient(45deg, transparent 30%, rgba(0, 0, 0, 0.04) 50%, transparent 70%);
}

/* ロゴ・検索・アバター: 濃ローズ系グロー */
[data-theme="sakura_day"] .luxury-logo {
  box-shadow:
    0 15px 30px rgba(194, 24, 91, 0.15),
    0 0 0 1px rgba(194, 24, 91, 0.15);
}

[data-theme="sakura_day"] .luxury-search:focus {
  border-color: rgba(194, 24, 91, 0.4);
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.08);
}

[data-theme="sakura_day"] .luxury-avatar {
  border: 2px solid rgba(194, 24, 91, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

[data-theme="sakura_day"] .luxury-user-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(194, 24, 91, 0.2) 50%, transparent 100%);
}

/* フォーカスリング・認証ボタン・ピンボタン: 濃ローズ系 */
[data-theme="sakura_day"] .sidebar-item:focus {
  outline: 2px solid rgba(194, 24, 91, 0.4);
}

[data-theme="sakura_day"] .luxury-auth-btn-primary {
  box-shadow: 0 8px 25px rgba(194, 24, 91, 0.2);
}

[data-theme="sakura_day"] .luxury-auth-btn-primary:hover {
  box-shadow: 0 12px 35px rgba(194, 24, 91, 0.3);
}

[data-theme="sakura_day"] .sidebar-pin-btn {
  border-color: rgba(194, 24, 91, 0.35) !important;
  color: #c2185b !important;
}
[data-theme="sakura_day"] .sidebar-pin-btn:hover {
  background: rgba(194, 24, 91, 0.10) !important;
  border-color: rgba(194, 24, 91, 0.60) !important;
}
[data-theme="sakura_day"] .sidebar.is-pinned .sidebar-pin-btn {
  background: rgba(194, 24, 91, 0.18) !important;
  border-color: rgba(194, 24, 91, 0.70) !important;
}
[data-theme="sakura_day"] .sidebar:not(:hover):not(.is-pinned) .luxury-section-title {
  background: linear-gradient(90deg, rgba(194, 24, 91, 0.4), rgba(194, 24, 91, 0)) !important;
}

/* 検索ボックス本体: 白背景 + 黒ボーダー（light テーマ用・夜桜には不要） */
[data-theme="sakura_day"] .luxury-search {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="sakura_day"] .luxury-search:focus {
  background: #ffffff;
}