/* ================================================================================
 * ファイル名: app/assets/stylesheets/pagination_shared.css
 * 作成日: 2026-04-27
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外 / CSS）
 *   1. 500行未満  → 完璧 ← 【現在ここ: 実コード約163行 (2026-05-31 計測)】
 *   2. 800行未満  → 問題なし
 *   3. 1200行未満 → 注意喚起・リファクタリング要検討
 *   4. 1200行以上 → リファクタリング必須
 * 概要: 全一覧画面で共通利用するページネーションコンポーネントのスタイル
 *       タスクリストのデザイン (.task-list-pagination) を基準に統一する。
 *
 * 利用箇所:
 *   - app/views/shared/_pagination.html.erb (共通パーシャル)
 *   - app/views/app/projects/index.html.erb (JS でレンダリング)
 *
 * 移行履歴:
 *   2026-04-27 統一作成。以下の旧クラスを廃止し、本ファイルへ集約:
 *     - .task-list-pagination → .shared-pagination
 *     - .projects-pagination  → .shared-pagination (wrapper のみリネーム)
 *     - .whiteboard-pagination → .shared-pagination
 *     - .notifications-pagination → .shared-pagination
 *     - .tp-pagination / .tp-page-link / .tp-page-current → .shared-pagination / .pagination-*
 * ================================================================================ */

.shared-pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shared-pagination:empty {
  display: none;
}

.pagination-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pagination-numbers {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}

.pagination-btn svg {
  width: 16px;
  height: 16px;
}

.pagination-btn:hover {
  background: rgba(var(--gold-primary-rgb), 0.1);
  border-color: rgba(var(--gold-primary-rgb), 0.3);
  color: var(--lx-gold-text, var(--gold-primary));
}

.pagination-btn-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}

.pagination-page:hover {
  background: rgba(var(--gold-primary-rgb), 0.1);
  border-color: rgba(var(--gold-primary-rgb), 0.3);
  color: var(--lx-gold-text, var(--gold-primary));
}

.pagination-page-active {
  background: linear-gradient(135deg, rgba(var(--gold-primary-rgb), 0.2) 0%, rgba(var(--gold-secondary-rgb), 0.15) 100%);
  border-color: rgba(var(--gold-primary-rgb), 0.4);
  color: var(--lx-gold-text, var(--gold-primary));
  font-weight: 600;
  cursor: default;
}

/* タブレット〜モバイル: タッチターゲット確保のためボタンを 40px に拡大
   （44x44 推奨だが横並び 7 要素のレイアウト維持を優先し 40px に統一） */
@media (max-width: 768px) {
  .shared-pagination {
    padding: 16px 0;
  }

  .pagination-container {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-btn {
    width: 40px;
    height: 40px;
  }

  .pagination-btn svg {
    width: 14px;
    height: 14px;
  }

  .pagination-page {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* 小型スマホ（〜480px）: 折り返し許容前提で隙間を更に縮め、タップ間隔は 8px 確保 */
@media (max-width: 480px) {
  .pagination-container {
    gap: 8px;
    row-gap: 8px;
  }

  .pagination-numbers {
    gap: 6px;
  }

  .pagination-btn {
    width: 40px;
    height: 40px;
  }

  .pagination-page {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
  }
}

/* ライトテーマ: 視認性補強（2026-05-31 Phase F-3 / reference 05-theme-gallery 準拠）。
   旧実装は hover/active が color: var(--gold-primary) のままで、Light では --gold-primary が
   未上書き（#FFD700 黄金）のため白系背景に同化し不可視だった。通常リンクは白背景 + dark navy
   文字、hover/active は amber 系背景 + dark navy 文字、disabled は opacity 0.5 で識別可能に。 */
[data-theme="light"] .pagination-btn,
[data-theme="light"] .pagination-page {
  color: var(--text-primary);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  font-weight: 500;
}

[data-theme="light"] .pagination-btn:hover,
[data-theme="light"] .pagination-page:hover {
  background: rgba(202, 138, 4, 0.14);
  border-color: rgba(202, 138, 4, 0.55);
  color: var(--text-primary);
}

[data-theme="light"] .pagination-page-active {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.32) 0%, rgba(180, 83, 9, 0.26) 100%);
  border-color: rgba(202, 138, 4, 0.75);
  color: var(--text-primary);
  font-weight: 700;
}

[data-theme="light"] .pagination-btn-disabled {
  opacity: 0.5;
}

/* ウッドテーマ: コッパー系の継承 */
[data-theme="wood"] .pagination-btn,
[data-theme="wood"] .pagination-page {
  color: rgba(200, 149, 106, 0.7);
  background: rgba(200, 149, 106, 0.08);
  border-color: rgba(200, 149, 106, 0.15);
}

[data-theme="wood"] .pagination-btn:hover,
[data-theme="wood"] .pagination-page:hover {
  background: rgba(200, 149, 106, 0.18);
  border-color: rgba(200, 149, 106, 0.35);
  color: var(--lx-gold-text, var(--gold-primary));
}

[data-theme="wood"] .pagination-page-active {
  background: linear-gradient(135deg, rgba(200, 149, 106, 0.22) 0%, rgba(220, 180, 120, 0.15) 100%);
  border-color: rgba(200, 149, 106, 0.4);
  color: var(--lx-gold-text, var(--gold-primary));
}