/* ================================================================================
   📋 ファイル名: app/assets/stylesheets/components/luxury_tooltip.css
   📊 リファクタリング基準: 【✅ 完璧】
       現在の行数: 約280行（コメント含む）
       コメント除外後: 約120行
       ✅ 500行未満: 完璧 ← 【現在の状態】
       ⬚ 800行未満: 問題なし
       ⬚ 1200行未満: 注意喚起・リファクタリング要検討
       ⬚ 1200行以上: リファクタリング必須

   📅 作成日: 2026-01-17
   📅 最終更新: 2026-01-17
   ✏️ 作成者: AI Agent (Claude)

   🎯 目的:
       - 共通ツールチップスタイルの提供
       - data-tooltip属性を使用したカスタムツールチップ
       - ラグジュアリーなデザイン統一
       - 複数の表示位置オプション（上・下・左・右）

   📦 使用箇所:
       - app/views/app/projects/index.html.erb（編集・削除ボタン）
       - app/views/app/task_projects/show.html.erb（各種アクションボタン）
       - 今後追加予定の各種ツールチップ

   🔧 使用方法:
       基本:
       <element class="luxury-tooltip" data-tooltip="ツールチップテキスト">...</element>

       位置指定（オプション）:
       <element class="luxury-tooltip luxury-tooltip-bottom" data-tooltip="下に表示">...</element>

       カラーバリエーション:
       <element class="luxury-tooltip luxury-tooltip-green" data-tooltip="成功系">...</element>

   📌 設計方針:
       1. CSSのみで実装（JavaScript不要）
       2. ::before（矢印）と::after（本体）の擬似要素を使用
       3. ホバー時にアニメーション付きで表示
       4. タッチデバイスでは非表示（誤動作防止）

   ⚠️ 注意事項:
       - 親要素にposition: relativeが必要
       - z-index: 10000を使用（他のモーダルより下）
       - white-space: nowrapのため長いテキストは横に伸びる

   📚 変更履歴:
       【2026-01-17】新規作成
           - タスク管理のツールチップデザインを共通化
           - プロジェクト一覧の編集・削除ボタンで使用開始
           - 4方向の位置バリエーション追加
           - 4色のカラーバリエーション追加
           - レスポンシブ対応追加
================================================================================ */

/* ================================================================================
   セクション1: 基本ツールチップスタイル
   ================================================================================

   📖 概要:
       ツールチップの基本スタイルを定義
       他のバリエーションクラスはこの基本スタイルを継承する

   🏗️ 構成:
       - .luxury-tooltip: 親要素（position: relative）
       - .luxury-tooltip::after: ツールチップ本体（テキスト表示）
       - .luxury-tooltip::before: 矢印（三角形）

   🎨 デザイン特徴:
       - 黒系グラデーション背景（ラグジュアリー感）
       - ゴールドボーダー（デフォルト）
       - ドロップシャドウ（浮遊感）
       - スムーズなアニメーション（0.2秒）
================================================================================ */

/* -----------------------------------------------------------------------------
   基本スタイル

   親要素に適用するクラス
   position: relativeを設定し、ツールチップの基準位置となる
----------------------------------------------------------------------------- */
.luxury-tooltip {
  position: relative;
}

/* -----------------------------------------------------------------------------
   ツールチップ本体（::after擬似要素）

   【技術解説】
   content: attr(data-tooltip) で data-tooltip属性の値を表示
   これにより、HTML側でテキストを指定できる柔軟な設計

   【表示位置の計算】
   bottom: calc(100% + 8px) = 親要素の上端から8px上
   left: 50% + translateX(-50%) = 親要素の中央に配置
----------------------------------------------------------------------------- */
.luxury-tooltip::after {
  /* data-tooltip属性の値をコンテンツとして表示 */
  content: attr(data-tooltip);

  /* 絶対配置（親要素を基準） */
  position: absolute;

  /* 他の要素より上に表示（モーダルより下） */
  z-index: 10000;

  /* ================== デザイン ================== */

  /* ラグジュアリーな黒系グラデーション背景 */
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.98) 0%, rgba(5, 5, 5, 0.95) 100%);

  /* 白テキスト */
  color: var(--text-primary);

  /* 内側余白 */
  padding: 8px 12px;

  /* 角丸（やわらかい印象） */
  border-radius: 8px;

  /* フォント設定 */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  /* 折り返しなし（長いテキストは横に伸びる） */
  white-space: nowrap;

  /* ================== ボーダーとシャドウ ================== */

  /* ゴールドのアクセントボーダー（デフォルト） */
  border: 1px solid rgba(255, 215, 0, 0.3);

  /* 2層シャドウ:
     - 1層目: 通常のドロップシャドウ（浮遊感）
     - 2層目: ゴールドの発光（ラグジュアリー感） */
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(255, 215, 0, 0.1);

  /* ================== 非表示状態（初期値） ================== */

  /* 透明 */
  opacity: 0;

  /* 非表示 */
  visibility: hidden;

  /* 少し上にずれた位置（アニメーション用） */
  transform: translateX(-50%) translateY(-4px);

  /* スムーズなトランジション */
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

  /* ホバー対象外（クリック等を透過） */
  pointer-events: none;

  /* ================== デフォルト位置: 上 ================== */

  /* 親要素の上端から8px上に配置 */
  bottom: calc(100% + 8px);

  /* 親要素の中央（translateX(-50%)と組み合わせ） */
  left: 50%;
}

/* -----------------------------------------------------------------------------
   ツールチップ矢印（::before擬似要素）

   【技術解説】
   borderを使用した三角形の描画テクニック
   透明なボーダー + 1方向だけ色付き = 三角形

   border: 6px solid transparent → 全ボーダー透明
   border-top-color: 色 → 上ボーダーだけ色付き（下向き三角形）
----------------------------------------------------------------------------- */
.luxury-tooltip::before {
  /* 空のコンテンツ（矢印用） */
  content: '';

  /* 絶対配置 */
  position: absolute;

  /* ツールチップ本体より上に表示 */
  z-index: 10001;

  /* ================== 矢印のデザイン ================== */

  /* 三角形を作成するボーダー設定 */
  border: 6px solid transparent;

  /* 上ボーダーを色付け（下向きの三角形になる） */
  border-top-color: rgba(15, 15, 15, 0.98);

  /* ================== 非表示状態 ================== */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;

  /* ================== デフォルト位置: 上 ================== */

  /* ツールチップ本体の下端に配置 */
  bottom: calc(100% - 4px);

  /* 中央配置 */
  left: 50%;
  transform: translateX(-50%);
}

/* -----------------------------------------------------------------------------
   ホバー時の表示スタイル

   親要素にホバーした時に::afterと::beforeを表示
   opacityとvisibilityの両方を変更することでスムーズなアニメーション
----------------------------------------------------------------------------- */
.luxury-tooltip:hover::after,
.luxury-tooltip:hover::before {
  /* 表示 */
  opacity: 1;
  visibility: visible;
}

/* ツールチップ本体のホバー時位置（元の位置に戻る） */
.luxury-tooltip:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* ================================================================================
   セクション2: 位置バリエーション
   ================================================================================

   📖 概要:
       ツールチップの表示位置を変更するためのクラス
       デフォルトは「上」、他に「下」「右」「左」を提供

   🔧 使用例:
       <span class="luxury-tooltip luxury-tooltip-bottom" data-tooltip="下に表示">

   ⚠️ 注意:
       位置クラスは必ずluxury-tooltipと組み合わせて使用
       単独では動作しない
================================================================================ */

/* -----------------------------------------------------------------------------
   下に表示 (luxury-tooltip-bottom)

   【変更点】
   - bottom → top に変更
   - 矢印の向きを上向きに変更（border-bottom-color）
----------------------------------------------------------------------------- */
.luxury-tooltip-bottom::after {
  /* 上からの配置に変更 */
  bottom: auto;
  top: calc(100% + 8px);

  /* 下から出現するアニメーション用 */
  transform: translateX(-50%) translateY(4px);
}

.luxury-tooltip-bottom::before {
  /* 矢印を下側に配置 */
  bottom: auto;
  top: calc(100% - 4px);

  /* 上向きの三角形（上ボーダー透明、下ボーダー色付き） */
  border-top-color: transparent;
  border-bottom-color: rgba(15, 15, 15, 0.98);
}

.luxury-tooltip-bottom:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* -----------------------------------------------------------------------------
   右に表示 (luxury-tooltip-right)

   【変更点】
   - leftを100%+8pxに変更（親要素の右側）
   - 中央揃えはtop: 50% + translateY(-50%)
   - 矢印は左向き
----------------------------------------------------------------------------- */
.luxury-tooltip-right::after {
  /* 右側に配置 */
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;

  /* 右から出現するアニメーション用 */
  transform: translateY(-50%) translateX(4px);
}

.luxury-tooltip-right::before {
  /* 矢印を左側に配置 */
  bottom: auto;
  left: calc(100% - 4px);
  top: 50%;
  transform: translateY(-50%);

  /* 左向きの三角形 */
  border-top-color: transparent;
  border-right-color: rgba(15, 15, 15, 0.98);
}

.luxury-tooltip-right:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* -----------------------------------------------------------------------------
   左に表示 (luxury-tooltip-left)

   【変更点】
   - rightを100%+8pxに変更（親要素の左側）
   - 中央揃えはtop: 50% + translateY(-50%)
   - 矢印は右向き
----------------------------------------------------------------------------- */
.luxury-tooltip-left::after {
  /* 左側に配置 */
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;

  /* 左から出現するアニメーション用 */
  transform: translateY(-50%) translateX(-4px);
}

.luxury-tooltip-left::before {
  /* 矢印を右側に配置 */
  bottom: auto;
  left: auto;
  right: calc(100% - 4px);
  top: 50%;
  transform: translateY(-50%);

  /* 右向きの三角形 */
  border-top-color: transparent;
  border-left-color: rgba(15, 15, 15, 0.98);
}

.luxury-tooltip-left:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* ================================================================================
   セクション3: カラーバリエーション
   ================================================================================

   📖 概要:
       ツールチップのアクセントカラーを変更するためのクラス
       ボーダーとシャドウの発光色を変更

   🎨 カラー一覧:
       - gold（デフォルト）: 標準のラグジュアリー
       - green: 成功・編集系アクション
       - red: 削除・警告系アクション
       - blue: 情報系アクション

   🔧 使用例:
       <button class="luxury-tooltip luxury-tooltip-green" data-tooltip="編集">
       <button class="luxury-tooltip luxury-tooltip-red" data-tooltip="削除">
================================================================================ */

/* -----------------------------------------------------------------------------
   ゴールドアクセント（デフォルト）

   基本スタイルで既にゴールドが適用されているため、
   このクラスは明示的にゴールドを指定したい場合に使用
----------------------------------------------------------------------------- */
.luxury-tooltip-gold::after {
  border-color: rgba(255, 215, 0, 0.3);
}

/* -----------------------------------------------------------------------------
   グリーンアクセント（成功/編集系）

   【用途】
   - 編集ボタン
   - 保存成功メッセージ
   - 完了系アクション
----------------------------------------------------------------------------- */
.luxury-tooltip-green::after {
  /* エメラルドグリーンのボーダー */
  border-color: rgba(52, 211, 153, 0.3);

  /* グリーンの発光シャドウ */
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(52, 211, 153, 0.1);
}

/* -----------------------------------------------------------------------------
   レッドアクセント（削除/警告系）

   【用途】
   - 削除ボタン
   - 警告メッセージ
   - 危険なアクション
----------------------------------------------------------------------------- */
.luxury-tooltip-red::after {
  /* レッドのボーダー */
  border-color: rgba(248, 113, 113, 0.3);

  /* レッドの発光シャドウ */
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(248, 113, 113, 0.1);
}

/* -----------------------------------------------------------------------------
   ブルーアクセント（情報系）

   【用途】
   - ヘルプ・情報アイコン
   - 詳細表示ボタン
   - 中立的なアクション
----------------------------------------------------------------------------- */
.luxury-tooltip-blue::after {
  /* ブルーのボーダー */
  border-color: rgba(96, 165, 250, 0.3);

  /* ブルーの発光シャドウ */
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(96, 165, 250, 0.1);
}

/* ================================================================================
   セクション4: レスポンシブ対応
   ================================================================================

   📖 概要:
       異なるデバイスサイズでの表示最適化

   📱 対応内容:
       1. タブレット/スマートフォン: フォントサイズ縮小
       2. タッチデバイス: ツールチップ非表示

   ⚠️ 設計意図:
       タッチデバイスではホバーが不安定なため、
       誤動作を防ぐためにツールチップを非表示にする
================================================================================ */

/* -----------------------------------------------------------------------------
   タブレット・スマートフォン向け調整

   768px以下の画面幅でフォントサイズと余白を縮小
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .luxury-tooltip::after {
    /* やや小さいフォント */
    font-size: 11px;

    /* コンパクトな余白 */
    padding: 6px 10px;
  }
}

/* -----------------------------------------------------------------------------
   タッチデバイス向け対応

   【技術解説】
   @media (hover: none) はタッチデバイス（ホバー不可）を検出
   iPhoneやAndroidスマートフォン等で適用される

   ツールチップはホバーで表示するため、
   タッチデバイスでは意図しないタイミングで表示される可能性がある
   そのため、タッチデバイスでは完全に非表示にする
----------------------------------------------------------------------------- */
@media (hover: none) {
  .luxury-tooltip::after,
  .luxury-tooltip::before {
    /* 完全に非表示 */
    display: none;
  }
}