/* ================================================================================
   ファイル名: app/assets/stylesheets/global_loading.css
   目的: グローバルローディングオーバーレイのスタイル定義
   作成日: 2026-01-24
   更新日: 2026-01-24 - プログレスバー追加、i18n対応
   コメント追加日: 2026-01-24
   ================================================================================

   【リファクタリング基準】※CSSファイル用、コメント行は除外
     - 500行未満: 完璧
     - 800行未満: 問題なし
     - 1200行未満: 注意喚起、リファクタリング要検討
     - 1200行以上: リファクタリング必須

   【現在の状態】
     - コード行数（コメント除外）: 約180行
     - ステータス: 完璧（500行未満）

   【リファクタリング改善案】※将来的な対応として参考
     現状は問題なし。将来的にスタイルが増えた場合:
     1. アニメーション定義を別ファイル（global_loading_animations.css）に分離
     2. レスポンシブスタイルを別ファイルに分離
     3. CSS変数を使用してカラーテーマを一元管理

   ================================================================================

   【デザイン仕様】
   - フルスクリーンオーバーレイ（画面全体を覆う）
   - 半透明ダークバックグラウンド（操作ブロックを視覚的に表現）
   - 3重リングスピナー（既存スピナーデザインと統一）
   - プログレスバー（金色グラデーション、アニメーション）
   - ラグジュアリーテーマとの統一（金色グラデーション使用）

   【カラーパレット】
   - 金色（プライマリ）: #FFD700
   - オレンジ（セカンダリ）: #FFA500
   - 青（アクセント）: #60A5FA
   - 背景オーバーレイ: rgba(0, 0, 0, 0.7)

   【関連ファイル】
   - app/javascript/utils/global_loading.js（JavaScript制御）
   - app/views/layouts/board.html.erb（HTML構造）
   - app/views/layouts/application.html.erb（HTML構造）
   - app/assets/stylesheets/kanban_board.css（既存スピナースタイル参照）

   【多言語対応】※2026-01-24追加
   - テキスト表示はJavaScriptから動的に設定
   - CSSはテキスト表示のスタイルのみ担当

   ================================================================================ */

/* ================================================================================
   グローバルローディングオーバーレイ
   ================================================================================
   【役割】画面全体を覆い、ユーザー操作を完全にブロック
   【z-index】最前面（20000）で他の要素より上に配置
   ================================================================================ */
.global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

/* 表示状態 */
.global-loading-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ================================================================================
   ローディングコンテンツコンテナ
   ================================================================================ */
.global-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 50px;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  min-width: 280px;
}

/* ================================================================================
   スピナーコンテナ（3重リング）
   ================================================================================
   【デザイン】既存のkanban_board.cssのスピナーと統一
   【サイズ】80x80px（やや大きめで視認性向上）
   ================================================================================ */
.global-loading-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

/* ================================================================================
   スピナーリング - 共通スタイル
   ================================================================================ */
.global-spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  animation: globalSpinnerRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* 外側リング（金色 #FFD700） */
.global-spinner-ring:nth-child(1) {
  border-top-color: var(--gold-primary);
  animation-delay: -0.45s;
}

/* 中間リング（オレンジ #FFA500） */
.global-spinner-ring:nth-child(2) {
  border-top-color: var(--gold-secondary);
  animation-delay: -0.3s;
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
}

/* 内側リング（青 #60A5FA） */
.global-spinner-ring:nth-child(3) {
  border-top-color: #60A5FA;
  animation-delay: -0.15s;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
}

/* ================================================================================
   スピナー回転アニメーション
   ================================================================================ */
@keyframes globalSpinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ================================================================================
   ローディングテキスト
   ================================================================================ */
.global-loading-text {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  animation: globalLoadingPulse 1.5s ease-in-out infinite;
}

/* テキスト点滅アニメーション */
@keyframes globalLoadingPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* ================================================================================
   プログレスバー
   ================================================================================
   【デザイン】金色グラデーション、光沢エフェクト付き
   【アニメーション】左から右へ進行するインジケーター
   ================================================================================ */
.global-loading-progress {
  width: 100%;
  max-width: 220px;
  height: 6px;
  background: var(--bg-surface-active);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* プログレスバーの進行部分 */
.global-loading-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-primary) 0%, var(--gold-secondary) 50%, var(--gold-primary) 100%);
  border-radius: 3px;
  transition: width 0.3s ease-out;
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.3);
}

/* プログレスバーの光沢エフェクト */
.global-loading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  border-radius: 3px 3px 0 0;
}

/* プログレスバーの輝きアニメーション（進行中） */
.global-loading-progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: globalProgressShine 1.5s ease-in-out infinite;
}

@keyframes globalProgressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ================================================================================
   プログレスバー完了状態
   ================================================================================
   100%到達時の特別なスタイル
   ================================================================================ */
.global-loading-progress-bar.complete {
  width: 100% !important;
  transition: width 0.2s ease-out;
}

.global-loading-progress-bar.complete::before {
  animation: none;
}

/* パーセンテージテキスト */
.global-loading-percent {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ================================================================================
   レスポンシブ対応
   ================================================================================ */
@media (max-width: 768px) {
  .global-loading-content {
    padding: 30px 40px;
    margin: 20px;
    min-width: 240px;
  }

  .global-loading-spinner {
    width: 60px;
    height: 60px;
  }

  .global-spinner-ring {
    border-width: 3px;
  }

  .global-loading-text {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .global-loading-progress {
    max-width: 180px;
    height: 5px;
  }

  .global-loading-percent {
    font-size: 11px;
  }
}