/* ============================================================================
 * app/assets/stylesheets/components/luxury_action_menu.css
 *
 * 最終更新: 2026-06-14
 * ----------------------------------------------------------------------------
 * 【リファクタリング基準】（CSS 用しきい値 / コメント行・空行は行数カウントから除外）
 *   500 行未満  = 完璧（分割不要）
 *   800 行未満  = 問題なし
 *   1200 行未満 = 注意喚起（分割を要検討）
 *   1200 行以上 = リファクタリング必須
 *   現在の実コード行数: 約 346 行 → 判定: 完璧。
 *   1コンポーネント（.luxury-action-menu）のスタイルに閉じており責務が明確なため現状維持でよい。
 *   今後の追記で 500 行に近づいた場合は、テーマ別上書き（[data-theme] ブロック）や
 *   @media ブロックを別ファイルへ切り出すことを検討する。
 * ----------------------------------------------------------------------------
 *
 * 概要: 共通「アクションメニュー」コンポーネント（ケバブ ⋯ → 項目リスト）。
 *       意匠は「エングレーブ・フォイル」: 深いマット地に彫り込んだベベルと
 *       金箔シマーのリッチなドロップダウン。
 *
 * 由来: 2026-06-07 にタスク編集モーダルのケバブメニュー（案2）として実装したものを、
 *       デザインシステムの共通コンポーネントとして抽出・汎用化（#taskEditModal
 *       スコープを外し .luxury-action-menu の BEM 命名へ）。
 *
 * 【テーマ対応】色は theme_variables.css のトークンを参照し dark / light / wood に
 *   追従する（--gold-primary-rgb はテーマ別に 黄 / アンバー / 銅 へ変化、
 *   --bg-surface-elevated / --lx-gold-text / --color-danger 等も同様）。
 *
 * 【関連】
 *   - app/views/shared/components/_action_menu.html.erb（markup / locals API）
 *   - app/javascript/controllers/action_menu_controller.js（開閉・外側/ESC・a11y）
 *   - レイアウトでの読み込み: layouts/application.html.erb, layouts/board.html.erb
 * ============================================================================ */

.luxury-action-menu {
  position: relative;
  display: inline-flex;
  /* このコンポーネント専用のイージング（速度カーブ）をローカルCSS変数として定義し、配下の transition / animation で使い回している。foil は金箔のキラッとした動き向け（最後に強く減速）、soft は控えめなホバー用。値を一箇所で管理できるので動きの調整が容易。 */
  --lxam-ease-foil: cubic-bezier(.19, 1, .22, 1);
  --lxam-ease-soft: cubic-bezier(.33, .9, .25, 1);
}

/* トリガー（彫り込みタイルのケバブボタン） */
.luxury-action-menu__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(var(--surface-rgb), 0.1);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)),
    var(--bg-surface-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -6px 10px rgba(0, 0, 0, 0.16) inset,
    0 2px 5px rgba(0, 0, 0, 0.22);
  transition: color .28s var(--lxam-ease-soft), border-color .28s var(--lxam-ease-soft),
    box-shadow .28s var(--lxam-ease-soft), transform .28s var(--lxam-ease-soft);
}
.luxury-action-menu__trigger:hover,
.luxury-action-menu__trigger[aria-expanded="true"] {
  color: var(--lx-gold-text);
  border-color: rgba(var(--gold-primary-rgb), 0.45);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -6px 12px rgba(0, 0, 0, 0.18) inset,
    0 0 0 1px rgba(var(--gold-primary-rgb), 0.14),
    0 0 16px rgba(var(--gold-primary-rgb), 0.25),
    0 4px 10px rgba(0, 0, 0, 0.28);
}
.luxury-action-menu__trigger:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}
.luxury-action-menu__trigger svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* ドロップダウン（彫り込みパネル） */
.luxury-action-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 40;
  width: 240px;
  padding: 7px;
  transform-origin: top right;
  isolation: isolate;
  /* 新しいスタックコンテキストを作る指定。子要素の ::before / ::after に付けた z-index（-1 等）が、メニュー外側の要素と重なり順で干渉しないように閉じ込めている。 */
  background:
    linear-gradient(180deg, rgba(var(--gold-primary-rgb), 0.05), rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.05)),
    var(--bg-surface-elevated);
  border: 1px solid rgba(var(--surface-rgb), 0.08);
  border-radius: calc(var(--radius-md) + 2px);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -12px 22px rgba(0, 0, 0, 0.3) inset,
    0 0 0 1px rgba(var(--gold-primary-rgb), 0.06);
  animation: lxActionMenuIn .42s var(--lxam-ease-foil) both;
}
/* 配置（既定は右寄せ＝トリガー右端に揃える） */
.luxury-action-menu__dropdown--right { right: 0; transform-origin: top right; }
.luxury-action-menu__dropdown--left { left: 0; transform-origin: top left; }
/* 開閉は JS（action_menu_controller.js）が hidden 属性を付け外しして制御する。CSS 側はこの一行で「閉じている＝非表示」を担保しているだけ。 */
.luxury-action-menu__dropdown[hidden] { display: none; }

/* 上端のゴールド・フォイルきらめき帯 */
.luxury-action-menu__dropdown::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  margin: 0 10px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--gold-primary-rgb), 0.5) 26%,
    rgba(var(--gold-primary-rgb), 0.95) 50%, rgba(var(--gold-primary-rgb), 0.5) 74%, transparent);
  box-shadow: 0 0 8px rgba(var(--gold-primary-rgb), 0.3);
}
/* 内側の彫り込みグルーヴ */
.luxury-action-menu__dropdown::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius-md) - 2px);
  pointer-events: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35) inset,
    0 -1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* 見出しラベル */
.luxury-action-menu__label {
  position: relative;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 12px 8px 13px;
  color: var(--lx-gold-text);
}
/* ラベルと項目の間：ゴールドグラデ区切り線 */
.luxury-action-menu__divider {
  height: 1px;
  margin: 2px 7px 7px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--gold-primary-rgb), 0.5) 24%, rgba(var(--gold-primary-rgb), 0.85) 50%, rgba(var(--gold-primary-rgb), 0.5) 76%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* 行 */
.luxury-action-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px 11px 11px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 540;
  letter-spacing: 0.012em;
  text-align: left;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transition: color .3s var(--lxam-ease-soft), transform .3s var(--lxam-ease-soft);
}
.luxury-action-menu__item + .luxury-action-menu__item { margin-top: 2px; }
.luxury-action-menu__item:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: -2px;
}
/* 行の装飾レイヤー（背面でフェード） */
.luxury-action-menu__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  /* 装飾用の背面レイヤー。item 自身に z-index:0 を与えた上でこの ::before を -1 に置くことで、テキストやアイコン（前面）の背後にホバー時のグラデ/影だけを敷ける。 */
  opacity: 0;
  transition: opacity .3s var(--lxam-ease-soft);
}

/* アイコンチップ（彫り込みタイル） */
.luxury-action-menu__icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.1)),
    rgba(var(--surface-rgb), 0.03);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -3px 6px rgba(0, 0, 0, 0.18) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background .32s var(--lxam-ease-soft), box-shadow .32s var(--lxam-ease-soft),
    transform .32s var(--lxam-ease-foil);
}
.luxury-action-menu__icon svg {
  width: 17px;
  height: 17px;
  transition: color .3s var(--lxam-ease-soft), transform .32s var(--lxam-ease-foil), fill .3s var(--lxam-ease-soft);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.luxury-action-menu__text {
  flex: 1 1 auto;
  transition: text-shadow .3s var(--lxam-ease-soft);
}
/* 右端ヒントシェブロン（控えめ） */
.luxury-action-menu__hint {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: rgba(var(--surface-rgb), 0.22);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .3s var(--lxam-ease-soft), transform .32s var(--lxam-ease-foil), color .3s var(--lxam-ease-soft);
}

/* 標準（複製等）行：ホバー / フォーカス */
.luxury-action-menu__item--copy:hover,
.luxury-action-menu__item--copy:focus-visible {
  color: var(--text-primary);
  transform: translateX(1px);
}
.luxury-action-menu__item--copy:hover::before,
.luxury-action-menu__item--copy:focus-visible::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(var(--gold-primary-rgb), 0.12), rgba(var(--gold-primary-rgb), 0.025));
  box-shadow:
    0 0 0 1px rgba(var(--gold-primary-rgb), 0.3) inset,
    0 -1px 16px rgba(var(--gold-primary-rgb), 0.22) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 20px rgba(0, 0, 0, 0.22);
}
.luxury-action-menu__item--copy:hover .luxury-action-menu__text,
.luxury-action-menu__item--copy:focus-visible .luxury-action-menu__text {
  text-shadow: 0 0 14px rgba(var(--gold-primary-rgb), 0.3);
}
.luxury-action-menu__item--copy:hover .luxury-action-menu__icon,
.luxury-action-menu__item--copy:focus-visible .luxury-action-menu__icon {
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 38%, #f59e0b 72%, #d97706 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -2px 3px rgba(120, 78, 4, 0.35) inset,
    0 5px 14px rgba(var(--gold-primary-rgb), 0.42),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px) scale(1.04);
}
.luxury-action-menu__item--copy:hover .luxury-action-menu__icon svg,
.luxury-action-menu__item--copy:focus-visible .luxury-action-menu__icon svg {
  color: #2a1d04;
  fill: rgba(42, 29, 4, 0.16);
  transform: scale(1.03);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}
.luxury-action-menu__item--copy:hover .luxury-action-menu__hint,
.luxury-action-menu__item--copy:focus-visible .luxury-action-menu__hint {
  opacity: 1;
  transform: translateX(0);
  color: rgba(var(--gold-primary-rgb), 0.65);
}
/* アクティブ行：金箔シマーの左アクセント帯 */
.luxury-action-menu__item--copy:hover::after,
.luxury-action-menu__item--copy:focus-visible::after {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(105deg,
    rgba(212, 146, 10, .85) 0%, rgba(251, 191, 36, .95) 22%, #fffbeb 44%,
    rgba(255, 255, 255, .98) 50%, #fde68a 56%, rgba(245, 158, 11, .95) 78%, rgba(180, 120, 8, .85) 100%);
  background-size: 100% 280%;
  /* 縦に 280% 引き伸ばしたグラデーションを lxActionMenuFoil アニメで上下に動かすことで、金箔が流れるシマー（きらめき）を表現している。background-position を動かすだけなので再描画コストが軽い。 */
  box-shadow: 0 0 9px rgba(var(--gold-primary-rgb), 0.6);
  animation: lxActionMenuFoil 2.8s ease-in-out infinite;
}

/* 危険（削除等）行 */
.luxury-action-menu__item--danger {
  color: rgba(var(--color-danger-rgb), 0.92);
}
.luxury-action-menu__item--danger .luxury-action-menu__icon {
  background:
    linear-gradient(180deg, rgba(var(--color-danger-rgb), 0.14), rgba(0, 0, 0, 0.12)),
    rgba(var(--color-danger-rgb), 0.06);
  box-shadow:
    0 1px 0 rgba(var(--color-danger-rgb), 0.16) inset,
    0 -3px 6px rgba(0, 0, 0, 0.18) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
}
.luxury-action-menu__item--danger .luxury-action-menu__icon svg {
  color: var(--color-danger);
}
.luxury-action-menu__item--danger:hover,
.luxury-action-menu__item--danger:focus-visible {
  color: #ff8585;
  transform: translateX(1px);
}
.luxury-action-menu__item--danger:hover::before,
.luxury-action-menu__item--danger:focus-visible::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(var(--color-danger-rgb), 0.16), rgba(var(--color-danger-rgb), 0.045));
  box-shadow:
    0 0 0 1px rgba(var(--color-danger-rgb), 0.36) inset,
    0 -1px 16px rgba(var(--color-danger-rgb), 0.26) inset,
    0 1px 0 rgba(255, 220, 220, 0.08) inset,
    0 8px 20px rgba(0, 0, 0, 0.24);
}
.luxury-action-menu__item--danger:hover .luxury-action-menu__text,
.luxury-action-menu__item--danger:focus-visible .luxury-action-menu__text {
  text-shadow: 0 0 14px rgba(var(--color-danger-rgb), 0.4);
}
.luxury-action-menu__item--danger:hover .luxury-action-menu__icon,
.luxury-action-menu__item--danger:focus-visible .luxury-action-menu__icon {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 48%, #b91c1c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -2px 3px rgba(120, 12, 12, 0.4) inset,
    0 5px 14px rgba(var(--color-danger-rgb), 0.48),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px) scale(1.04);
}
.luxury-action-menu__item--danger:hover .luxury-action-menu__icon svg,
.luxury-action-menu__item--danger:focus-visible .luxury-action-menu__icon svg {
  color: #fff;
  transform: scale(1.03);
  filter: drop-shadow(0 1px 1px rgba(90, 8, 8, 0.55));
}
.luxury-action-menu__item--danger:hover .luxury-action-menu__hint,
.luxury-action-menu__item--danger:focus-visible .luxury-action-menu__hint {
  opacity: 1;
  transform: translateX(0);
  color: rgba(var(--color-danger-rgb), 0.72);
}
.luxury-action-menu__item--danger:hover::after,
.luxury-action-menu__item--danger:focus-visible::after {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #fca5a5, #ef4444 50%, #b91c1c);
  box-shadow: 0 0 9px rgba(var(--color-danger-rgb), 0.55);
}

@keyframes lxActionMenuIn {
  0% { opacity: 0; transform: scale(.82) translate(6px, -10px); filter: blur(3px); }
  55% { opacity: 1; filter: blur(0); }
  72% { transform: scale(1.012) translate(0, 0); }
  100% { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0); }
}
@keyframes lxActionMenuFoil {
  0%, 100% { background-position: 0 0; opacity: .82; }
  50% { background-position: 0 140%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .luxury-action-menu__dropdown { animation: none; }
  .luxury-action-menu__item--copy:hover::after,
  .luxury-action-menu__item--copy:focus-visible::after { animation: none; }
}

/* ライトテーマ: 白基調パネルに合わせ彫り込みの陰影をやわらげる
   （金線/ラベルは --gold-primary-rgb が light で濃いアンバーへ変わり自動で視認可）。 */
[data-theme="light"] .luxury-action-menu__dropdown {
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -10px 18px rgba(0, 0, 0, 0.045) inset,
    0 0 0 1px rgba(var(--gold-primary-rgb), 0.14);
}
[data-theme="light"] .luxury-action-menu__dropdown::after {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05) inset,
    0 -1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* 【2026-06-08 追加】danger 行ホバー文字色のライト/ウッド充足（ダーク不変）。
   base の #ff8585（L302）は白サーフェスで ~2.23:1（WCAG 不合格）になるため、
   light/wood のみトークン --color-danger（light #dc2626 / wood #c0392b）へ上書き。
   ダーク（暗サーフェス）は base #ff8585 のまま視認可＝不変。 */
[data-theme="light"] .luxury-action-menu__item--danger:hover,
[data-theme="light"] .luxury-action-menu__item--danger:focus-visible,
[data-theme="wood"] .luxury-action-menu__item--danger:hover,
[data-theme="wood"] .luxury-action-menu__item--danger:focus-visible {
  color: var(--color-danger);
}

/* ============================================================================
 * レスポンシブ（2026-06-08）: 粗いポインタ（タッチ）のみトリガー/項目を 44px に。
 * デスクトップ（pointer:fine）は意匠不変。色には触れない。SVG は中央寄せのまま。
 * ============================================================================ */
@media (pointer: coarse) {
  .luxury-action-menu__trigger { width: 44px; height: 44px; }
  .luxury-action-menu__item { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .luxury-action-menu__item + .luxury-action-menu__item { margin-top: 6px; }
}

/* ===== 桜テーマ（夜桜 sakura_night / 昼桜 sakura_day）— Phase 2 / 2026-07-01 ===== */
/* コメント付与: 2026-07-04。
 * sakura_night は wood テーマ上書きブロック（このファイル L406〜）を踏襲。
 * sakura_day  は light テーマ上書きブロック（このファイル L388〜）を踏襲。
 * 桜テーマのカラートークンは theme_variables.css 参照。
 * 保守時は wood / light 各対応ブロックと常にセットで変更すること（値の乖離防止）。 */

/* --- 夜桜 sakura_night（wood ミラー） --- */
/* danger 行ホバー文字色（元は light/wood 合成ルール。wood 分を分離して sakura_night へ）。
   var(--color-danger) はトークン参照のため色リテラルの置換なし。 */
[data-theme="sakura_night"] .luxury-action-menu__item--danger:hover,
[data-theme="sakura_night"] .luxury-action-menu__item--danger:focus-visible {
  color: var(--color-danger);
}

/* --- 昼桜 sakura_day（light ミラー） --- */
/* ドロップダウンパネルの box-shadow: light テーマ対応ブロック（L388）のミラー。
   白背景サーフェス向けに影を薄くした設定。ダーク基準の base ルール（L104〜）を上書きする。 */
[data-theme="sakura_day"] .luxury-action-menu__dropdown {
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -10px 18px rgba(0, 0, 0, 0.045) inset,
    0 0 0 1px rgba(var(--gold-primary-rgb), 0.14);
}
/* 彫り込みグルーヴ（::after 内影）: light テーマ対応ブロック（L396）のミラー。
   白背景に合わせ inset 影を弱める（base の濃い inset を上書き）。 */
[data-theme="sakura_day"] .luxury-action-menu__dropdown::after {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05) inset,
    0 -1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* danger 行ホバー文字色: light テーマ対応ブロック（L406）のミラー。
   白背景では base の #ff8585 が WCAG 不合格になるため var(--color-danger) トークンへ上書き。 */
[data-theme="sakura_day"] .luxury-action-menu__item--danger:hover,
[data-theme="sakura_day"] .luxury-action-menu__item--danger:focus-visible {
  color: var(--color-danger);
}