/* ================================================================================
 * ファイル名: app/assets/stylesheets/layout.css
 * 目的: レイアウト構造CSS（メインコンテナ・サイドバー・ヘッダー・ツールバー等）
 * 抽出元: application.css（リファクタリング分割）
 * 作成日: 2026-02-18
 * ================================================================================
 *
 * 【リファクタリング基準】CSSファイル用（コメント行は行数カウントから除外）
 * ----------------------------------------------------------------
 * 現在の実コード行数: 約490行（コメント除く）
 * 判定: ✅ 完璧（500行未満）
 * ----------------------------------------------------------------
 * 基準（CSSファイル専用）:
 *   1. 500行未満 → 完璧 ✅
 *   2. 800行未満 → 問題なし ✅
 *   3. 1200行未満 → 注意喚起。リファクタリング要検討 ⚠️
 *   4. 1200行以上 → リファクタリング必須 🚨
 * ================================================================================*/

/* ========================================
   レイアウトスタイル - メイン構造の定義
   ======================================== */

/* メインコンテナ: 画面全体を左右に分割するための親要素 */
.main-container {
  display: flex;              /* 横並びレイアウト（サイドバー + メインコンテンツ） */
  height: 100vh;              /* 画面の高さいっぱいに表示 */
  position: relative;         /* 子要素の絶対配置の基準点 */
}

/* サイドバー: 左側のナビゲーション領域 */
.sidebar {
  width: 280px;               /* 固定幅280px */
  background: var(--bg-gradient);
  border-right: 1px solid var(--border-primary);  /* 右辺に境界線 */
  display: flex;              /* 縦並びレイアウト */
  flex-direction: column;     /* 上から下に要素を配置 */
  position: relative;         /* 疑似要素の配置基準 */
  z-index: 10;               /* 重なり順序（高い値ほど前面） */
}

/* メインコンテンツ: 右側のコンテンツ領域 */
.main-content {
  flex: 1;                   /* 残りの幅をすべて使用 */
  display: flex;             /* 縦並びレイアウト */
  flex-direction: column;    /* ヘッダー + コンテンツの縦配置 */
  background: transparent;
  position: relative;
  z-index: 1;        /* 疑似要素の配置基準 */
}

/* ヘッダー: 上部のタイトル・ボタン領域 */
.header {
  height: 96px;              /* 固定高さ96px（サイドバーのロゴセクションと同じ） */
  padding: 24px 40px;        /* 内側の余白（上下24px、左右40px） */
  border-bottom: 1px solid var(--border-primary);  /* 下辺に境界線 */
  background: rgba(0, 0, 0, 0.2);     /* 半透明の背景 */
  backdrop-filter: blur(20px);        /* 背景ぼかし効果 */
  -webkit-backdrop-filter: blur(20px); /* Safari対応 */
  position: relative;        /* 疑似要素の配置基準 */
  z-index: 5;               /* 重なり順序 */
  display: flex;            /* 横並びレイアウト */
  align-items: center;      /* 縦方向中央揃え */
}

/* ========================================
   境界線の微調整点 - 美しいレイアウトのための調整
   ======================================== */

/*
 * サイドバーの疑似要素: 縦線の調整
 * 目的: サイドバーとヘッダーの境界線が滑らかに交差するように微調整
 * 修正時の注意: topの値はヘッダーの高さ-1pxに設定する */
.sidebar::after {
  content: '';                /* 疑似要素を表示するために必要 */
  position: absolute;         /* サイドバーを基準とした絶対配置 */
  top: 95px;                 /* ヘッダーの高さ(96px)より1px上に配置 */
  right: -1px;               /* サイドバーの右端に配置 */
  width: 1px;                /* 縦線の幅 */
  height: 2px;               /* 縦線の高さ */
  background: var(--bg-surface-active);  /* 境界線と同じ色 */
  z-index: 15;              /* 重なり順序 */
}

/*
 * メインコンテナの疑似要素: 横線の調整
 * 目的: ヘッダーとサイドバーの境界線が滑らかに交差するように微調整
 * 修正時の注意: topの値はヘッダーの高さと同じに設定する */
.main-container::before {
  content: '';               /* 疑似要素を表示するために必要 */
  position: absolute;        /* メインコンテナを基準とした絶対配置 */
  top: 96px;                /* ヘッダーの高さと同じ位置に配置 */
  left: 279px;              /* サイドバーの幅(280px)より1px左に配置 */
  width: 2px;               /* 横線の幅 */
  height: 1px;              /* 横線の高さ */
  background: var(--bg-surface-active);  /* 境界線と同じ色 */
  z-index: 20;              /* 重なり順序（サイドバーより前面） */
}

.content-area {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

/* Luxury Search Input */
.luxury-search {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.3s ease;
}

.luxury-search:focus {
  outline: none;
  background: var(--bg-surface-hover);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.luxury-search::placeholder {
  color: var(--text-tertiary);
}

/* Sidebar Navigation */
.sidebar-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 0 12px 4px 12px;
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.sidebar-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  transform: translateX(4px);
}

.sidebar-item.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
  color: var(--gold-primary);
  border-left: 3px solid var(--gold-primary);
  margin-left: 9px;
}

/* Section Title */
.luxury-section-title {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  margin-top: 24px;
}

/* User Section */
.luxury-user-section {
  padding: 20px;
  border-top: 1px solid var(--border-primary);
  position: relative;
}

.luxury-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.luxury-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.luxury-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.luxury-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
  font-size: 16px;
}

/* User Menu */
.luxury-user-menu {
  position: absolute;
  bottom: 100%;
  left: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.luxury-user-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.luxury-user-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.luxury-user-menu-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* ========================================
   ヘッダー要素のスタイル定義
   ======================================== */

/*
 * ヘッダータイトル: ラグジュアリーなゴールドグラデーション
 * 修正時の注意: フォントサイズを変更する場合は、ヘッダーの高さも調整が必要 */
.luxury-header-title {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);  /* ゴールドグラデーション */
  -webkit-background-clip: text;      /* テキストにグラデーションを適用（webkit用） */
  background-clip: text;              /* テキストにグラデーションを適用（標準） */
  -webkit-text-fill-color: transparent;  /* テキストを透明にしてグラデーションを表示 */
  font-size: 28px;                   /* フォントサイズ */
  font-weight: 800;                  /* 太字（エクストラボールド） */
  margin: 0;                         /* 外側の余白をリセット */
  letter-spacing: -0.6px;            /* 文字間隔を狭める（高級感演出） */
  line-height: 1.2;                 /* 行間を調整 */
}

/*
 * ヘッダーボタン: ゴールドのアクションボタン
 * 修正時の注意: paddingを変更する場合は、ヘッダー全体のバランスを確認 */
.header-button {
  display: inline-flex;              /* インライン要素として横並び配置 */
  align-items: center;               /* 縦方向中央揃え */
  padding: 12px 20px;                /* 内側の余白（上下12px、左右20px） */
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));  /* ゴールドグラデーション背景 */
  color: #000;                       /* 黒文字（ゴールド背景に対するコントラスト） */
  text-decoration: none;             /* リンクの下線を除去 */
  font-size: 14px;                  /* フォントサイズ */
  font-weight: 600;                 /* セミボールド */
  border-radius: 12px;              /* 角を丸める */
  transition: all 0.3s ease;        /* ホバー効果のアニメーション */
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);  /* ゴールドの影効果 */
}

.header-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Flash Messages */
.luxury-flash {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  color: #fff;
  font-weight: 500;
  z-index: 1000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.luxury-flash-notice {
  background: rgba(16, 185, 129, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.luxury-flash-alert {
  background: rgba(239, 68, 68, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Auth Buttons */
.luxury-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.luxury-auth-btn {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.luxury-auth-btn-primary {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
  color: #000;
}

.luxury-auth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.luxury-auth-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.luxury-auth-btn-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* Logo Styles */
/* ========================================
   ラグジュアリーツールバー - プルダウンメニュー
   ======================================== */

.luxury-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.luxury-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.luxury-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.luxury-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.luxury-filter-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  white-space: nowrap;
}

/* 改善されたセレクトボックス */
.luxury-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.95);
  border: none !important;
  border-radius: var(--radius-lg);
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 160px;
  position: relative;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.luxury-select:hover {
  border-color: none !important;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.luxury-select:focus {
  outline: none;
  border-color: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: rgba(255, 255, 255, 1);
}

/* オプション要素のスタイル */
.luxury-select option {
  background: #ffffff;
  color: #1f2937;
  padding: 0.75rem 1rem;
  font-weight: 500;
  border: none;
}

.luxury-select option:hover {
  background: #f3f4f6;
}

.luxury-select option:checked {
  background: var(--primary);
  color: white;
}

/* チームボタンの改善 */
.luxury-team-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.95);
  border: none !important;
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 160px;
}

.luxury-team-btn:hover {
  border-color: none !important;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.luxury-team-btn:focus {
  outline: none;
  border-color: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.luxury-team-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.luxury-dropdown-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ビューボタンの改善 */
.luxury-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.8);
  border: none !important;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-view-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.luxury-view-btn.luxury-view-active {
  background: var(--primary);
  border-color: none !important;
  color: white;
}

.luxury-view-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .luxury-filter-label {
    color: #d1d5db;
  }

  .luxury-select {
    background: rgba(31, 41, 55, 0.95);
    border: none !important;
    color: #f9fafb;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  }

  .luxury-select:hover {
    background: rgba(31, 41, 55, 1);
    border: none !important;
  }

  .luxury-select:focus {
    background: rgba(31, 41, 55, 1);
  }

  .luxury-select option {
    background: #1f2937;
    color: #f9fafb;
  }

  .luxury-select option:hover {
    background: #374151;
  }

  .luxury-team-btn {
    background: rgba(31, 41, 55, 0.95);
    border: none !important;
    color: #f9fafb;
  }

  .luxury-team-btn:hover {
    background: rgba(31, 41, 55, 1);
    border: none !important;
  }

  .luxury-view-btn {
    background: rgba(31, 41, 55, 0.8);
    border: none !important;
    color: #f9fafb;
  }

  .luxury-view-btn:hover {
    background: rgba(31, 41, 55, 1);
    border: none !important;
  }
}

/* モバイル対応 */
@media (max-width: 768px) {
  .luxury-toolbar {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .luxury-toolbar-left {
    flex-wrap: wrap;
    justify-content: center;
  }

  .luxury-select,
  .luxury-team-btn {
    min-width: 140px;
  }
}

.luxury-logo {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* ========================================
   ツールバー要素の醜い境界線のみ除去 (交差部分)
   ======================================== */

/* ツールバー内部全要素に強力なborder除去を適用 */
.luxury-toolbar * {
  border: none !important;
  outline: none !important;
}

.luxury-toolbar *:before,
.luxury-toolbar *:after {
  border: none !important;
  outline: none !important;
}

.luxury-toolbar *:hover,
.luxury-toolbar *:focus,
.luxury-toolbar *:active {
  border: none !important;
  outline: none !important;
}

/* 特定要素への個別指定 */
.luxury-select,
.luxury-team-btn,
.luxury-view-btn {
  border: none !important;
  outline: none !important;
}

.luxury-select:hover,
.luxury-select:focus,
.luxury-team-btn:hover,
.luxury-team-btn:focus,
.luxury-view-btn:hover,
.luxury-view-btn:active,
.luxury-view-btn.luxury-view-active {
  border: none !important;
  outline: none !important;
}

/* 最強力なツールバー境界線削除 - ブラウザデフォルトやTailwind上書き */
.luxury-toolbar select,
.luxury-toolbar button,
.luxury-toolbar input {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

.luxury-toolbar select:hover,
.luxury-toolbar select:focus,
.luxury-toolbar select:active,
.luxury-toolbar button:hover,
.luxury-toolbar button:focus,
.luxury-toolbar button:active,
.luxury-toolbar input:hover,
.luxury-toolbar input:focus,
.luxury-toolbar input:active {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* Tailwind CSS クラス上書き */
.luxury-toolbar .border,
.luxury-toolbar .border-gray-300,
.luxury-toolbar .border-gray-200,
.luxury-toolbar .border-1,
.luxury-toolbar .border-2 {
  border: none !important;
}

/* ブラウザデフォルトスタイル強制リセット */
.luxury-toolbar *[style*="border"] {
  border: none !important;
}

/* 国旗アイコンのみの表示（余分なものの除去） */
.luxury-locale-icon {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.luxury-flag-container {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.luxury-flag-icon {
  background: none !important;
}

/* 親要素の装飾も除去 */
.luxury-locale-info {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.luxury-current-locale {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 既存の装飾やレリーフを無効化 */
.luxury-locale-icon,
.luxury-current-locale,
.luxury-flag-container,
.luxury-flag-icon {
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}