/* ================================
   Player Stats Detail Grid Component
   ガイドライン 1.2/1.3 準拠: 非データ用途の table 禁止
   チームサマリーと同じレイアウト構造
   ================================ */

/* ================================
   分離レイアウト（Split Layout）
   モバイルSafariでの白線/ズレ問題を根本解決
   ================================ */

/* 分離レイアウト用ラッパー */
.player-stats-detail-split {
  display: flex;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-surface);
  /* 角丸クリップ */
  clip-path: inset(0 round 8px);
  /* ヘッダー高さ統一用の変数 */
  --psd-header-h: 52px;
  /* 列幅の一元管理（JSとCSSで共有） */
  --cell-width-number: 3rem;
  --cell-width-position: 3.25rem;
  --cell-width-numeric: 5.25rem;
  --cell-width-numeric-wide: 7.25rem;
}

/* 固定列コンテナ（左側） */
.player-stats-detail-split__fixed {
  flex-shrink: 0;
  /* No列 + 選手名列の合計幅 */
  width: calc(var(--sticky-number-w, 3rem) + 120px);
  min-width: calc(var(--sticky-number-w, 3rem) + 120px);
  max-width: calc(var(--sticky-number-w, 3rem) + 120px);
  /* 縦スクロールはJSで制御しつつ、フォールバックとしてネイティブスクロールを維持 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーの余白を出さない */
  scrollbar-gutter: auto;
  /* スクロールバーを非表示にする (Firefox) */
  scrollbar-width: none;
  /* ヘッダー1行 + データ行11行分の高さを設定 */
  max-height: 600px;
  /* スクロールの伝播を防ぐ */
  overscroll-behavior: contain;
  /* 背景色を設定 */
  background-color: var(--color-surface);
}

.player-stats-detail-split__fixed::-webkit-scrollbar {
  /* スクロールバーを非表示にする (Chrome, Safari) */
  display: none;
}

/* スクロール列コンテナ（右側） */
.player-stats-detail-split__scroll {
  flex: 1;
  min-width: 0;
  /* 縦スクロール */
  overflow-y: auto;
  /* 横スクロール */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーのスペースを確保 */
  scrollbar-gutter: stable;
  /* ヘッダー1行 + データ行11行分の高さを設定 */
  max-height: 600px;
  /* スクロールの伝播を防ぐ */
  overscroll-behavior: contain;
  /* 背景色を設定 */
  background-color: var(--color-surface);
  /* Firefox: 横スクロールバーを非表示に（下部プロキシに集約） */
  scrollbar-width: none;
  /* 最後列が見切れないように右端の余白を確保 */
  box-sizing: border-box;
  padding-inline-end: 16px;
}

/* スクロール列コンテナの横スクロールバーは「下部プロキシ」に集約（重複表示を防ぐ）
   - 縦スクロールバーは維持する
   - WebKit系（Chrome/Safari/iOS）で横スクロールバーのみ非表示 */
.player-stats-detail-split__scroll::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

/* 横スクロールバー専用要素 */
.player-stats-detail-split__hscroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーのスペースを確保 */
  scrollbar-gutter: stable;
  /* 背景色を設定 */
  background-color: var(--color-surface);
  /* 角丸クリップ */
  clip-path: inset(0 round 0 0 8px 8px);
  /* PCでも必ず表示されるように最小高さを設定 */
  min-height: 17px;
}

/* 横スクロールバー用スペーサー */
.player-stats-detail-split__hscroll-spacer {
  height: 1px;
  /* 幅はJSで動的に設定される */
}

/* 分離レイアウト適用時にstickyを無効化 */
.player-stats-detail-split .player-stats-detail-cell--number,
.player-stats-detail-split .player-stats-detail-cell--name {
  position: static;
  left: auto;
  z-index: auto;
}

.player-stats-detail-split .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--number,
.player-stats-detail-split .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--name {
  position: static;
  left: auto;
  z-index: auto;
}

/* 分離レイアウト適用時のヘッダー固定（縦スクロール時のみ） */
.player-stats-detail-split .player-stats-detail-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-button);
}

/* 分離レイアウト適用時のヘッダーセル背景 */
.player-stats-detail-split .player-stats-detail-header__item {
  background-color: var(--color-button);
  color: var(--color-surface);
  /* ヘッダー最小高さ確保 + 上下中央揃え */
  min-height: var(--psd-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 上下余白を確保（2行以上でも切れないように） */
  padding-block: 6px;
  padding-inline: 6px;
  /* 改行を許可（自然に改行して表示） */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  /* 日本語の改行を自然に */
  word-break: keep-all;
  line-break: strict;
  text-wrap: balance;
}

/* split-table: ヘッダー内は数値列も含めてセンター */
.player-stats-detail-split .player-stats-detail-header__item.player-stats-detail-cell--numeric,
.player-stats-detail-split .player-stats-detail-header__item.player-stats-detail-cell--numeric-wide {
  text-align: center;
}

/* 分離レイアウト適用時のzebra背景 */
.player-stats-detail-split .player-stats-detail-row {
  --row-bg: var(--color-surface);
  background-color: var(--row-bg, var(--color-surface));
}

.player-stats-detail-split .player-stats-detail-row--odd {
  --row-bg: color-mix(in srgb, var(--color-primary) 4%, var(--color-background));
  background-color: var(--row-bg, color-mix(in srgb, var(--color-primary) 4%, var(--color-background)));
}

.player-stats-detail-split .player-stats-detail-cell {
  background-color: var(--row-bg, var(--color-surface));
  /* 実データ行の上下中央揃え */
  display: flex;
  align-items: center;
}

/* 数値列は右寄せ（既存のtext-align:rightを維持） */
.player-stats-detail-split .player-stats-detail-cell--numeric,
.player-stats-detail-split .player-stats-detail-cell--numeric-wide {
  justify-content: flex-end;
}

/* 名前列・ポジション列は左寄せ */
.player-stats-detail-split .player-stats-detail-cell--name,
.player-stats-detail-split .player-stats-detail-cell--position {
  justify-content: flex-start;
}

/* 背番号列は中央揃え */
.player-stats-detail-split .player-stats-detail-cell--number {
  justify-content: center;
}

.player-stats-detail-split .player-stats-detail-row--odd .player-stats-detail-cell {
  background-color: var(--row-bg, color-mix(in srgb, var(--color-primary) 4%, var(--color-background)));
}

/* モバイル対応：分離レイアウトの固定列幅を調整 */
@media (max-width: 768px) {
  .player-stats-detail-split__fixed {
    width: calc(var(--sticky-number-w, 40px) + 100px);
    min-width: calc(var(--sticky-number-w, 40px) + 100px);
    max-width: calc(var(--sticky-number-w, 40px) + 100px);
  }
}

/* ================================
   既存のsticky方式（後方互換性のため維持）
   ================================ */

/* プレイヤースタッツ詳細 Grid コンテナ */
/* ヘッダーと各行を縦に並べるため、1列のグリッド */
/* 固定列とスクロール可能な列を実装 */
.player-stats-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-lg) 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  /* 横スクロールの責務は __scrollable に委譲（二重スクロールを防ぐ） */
  overflow-x: visible;
  overflow-y: visible;

  /* sticky列のleft計算をremで設定（ユーザーのフォントサイズ変更に追従） */
  --sticky-number-w: 3rem;
  --sticky-name-left: var(--sticky-number-w);
  /* 列幅の一元管理（JSとCSSで共有、splitレイアウトと共通） */
  --cell-width-number: 3rem;
  --cell-width-position: 3.25rem;
  --cell-width-numeric: 5.25rem;
  --cell-width-numeric-wide: 7.25rem;
}

/* スクロール可能なコンテナ */
/* 縦スクロール: 2-12行目（11行）を初期表示、13行目以降をスクロール可能 */
.player-stats-detail-grid__scrollable {
  /* 角丸をスクロールコンテナに移す（横スクロール時も正しく表示されるように） */
  border-radius: 8px;
  /* 角丸クリップの主役：clip-path で確実にクリップ（overflow-x/y: auto でも角丸が効く） */
  clip-path: inset(0 round 8px);
  /* 背景色を設定（角丸の外側が見えないように） */
  background-color: var(--color-surface);
  /* 横スクロール */
  overflow-x: auto;
  /* 縦スクロール */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーのスペースを常に確保（横スクロール時の左ズレを防ぐ） */
  scrollbar-gutter: stable;

  /* ヘッダー1行 + データ行11行分の高さを設定 */
  max-height: 600px;

  /* 横スクロール時にヘッダーが確実に表示されるように */
  position: relative;

  /* スクロールの伝播を防ぐ（コンテナ内のスクロールが親ページに影響しないように） */
  overscroll-behavior: contain;

  /* sticky + overflowの描画安定化（カクつき軽減） */
  isolation: isolate;
  backface-visibility: hidden;
}

/* ヘッダー行 */
.player-stats-detail-header {
  display: grid;
  /* 列数は動的に決定される（JavaScriptで設定） */
  gap: 0;
  padding: 0; /* 行のpaddingを撤去（sticky基準点のズレを防ぐ） */
  font-weight: 600;
  font-size: var(--font-sm);
  /* 角丸は __scrollable に移したため 0 に */
  border-radius: 0;
  position: sticky;
  top: 0;
  /* z-indexを十分高くして常に前面に固定（縦スクロール時の見え抜けを防ぐ） */
  z-index: 50;
  /* レイヤー合成を安定化（縦スクロール時にヘッダー上に行が見えるのを防ぐ） */
  isolation: isolate;
  /* 親要素などで backdrop-filter が継承されている場合に無効化 */
  backdrop-filter: none;
}

/* ヘッダーセル */
.player-stats-detail-header__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 6px; /* 左右のpaddingを10pxから6pxに減らして列幅内のテキスト表示領域を広げる */
  position: relative;
  z-index: 1;

  /* ✅ ここで"直接"背景を塗る（親クラス依存/上書き競合を回避） */
  background-color: var(--color-button);
  color: var(--color-surface);

  /* ヘッダーのみ改行を許可（可読性向上） */
  overflow: hidden;
  white-space: normal;
  line-height: 1.3; /* 1.25 → 1.3 に調整して読みやすく */
  /* 親要素などで backdrop-filter が継承されている場合に無効化 */
  backdrop-filter: none;
}

/* データ行 */
.player-stats-detail-row {
  display: grid;
  /* 列数は動的に決定される（JavaScriptで設定） */
  gap: 0;
  padding: 0; /* 行のpaddingを撤去（sticky基準点のズレを防ぐ） */
  /* 背景色をCSS変数で定義（セルに伝播させる） */
  --row-bg: var(--color-surface);
  /* 行の背景色を設定（サブピクセル割れ対策：スマホの白抜けを防ぐ） */
  background-color: var(--row-bg, var(--color-surface));
  /* セル全面に背景を塗るため stretch に */
  align-items: stretch;
}

.player-stats-detail-row:last-child {
  /* 角丸は __scrollable に移したため 0 に */
  border-radius: 0;
}

/* セル要素 - 既存のmatch.htmlのスタイルを踏襲 */
.player-stats-detail-cell {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px; /* iOS含めタップしやすく、背景も安定 */
  /* 行の背景色変数を使用（横スクロール時も背景が抜けないように） */
  background-color: var(--row-bg, var(--color-surface));
  /* 既存のellipsisを活かす */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 背番号（No）列 - 固定列 */
.player-stats-detail-cell--number {
  width: var(--sticky-number-w);
  min-width: var(--sticky-number-w);
  max-width: var(--sticky-number-w);
  text-align: center;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  position: sticky;
  left: 0;
  z-index: 12; /* データ行のstickyを少し前へ */
  background-color: var(--row-bg, var(--color-surface));
}

/* 選手名列 - 固定列 */
.player-stats-detail-cell--name {
  text-align: left;
  width: auto;
  min-width: 120px;
  position: sticky;
  left: var(--sticky-name-left);
  z-index: 12;
  background-color: var(--row-bg, var(--color-surface));
}

/* 奇数行の背景色をCSS変数で定義（すべてのセルに伝播） */
.player-stats-detail-row:nth-child(odd) {
  --row-bg: color-mix(in srgb, var(--color-primary) 4%, var(--color-background));
}


/* ヘッダーの固定列も同様に固定 */
.player-stats-detail-header .player-stats-detail-header__item:is(.player-stats-detail-cell--number, .player-stats-detail-cell--name) {
  position: sticky;
  z-index: 60;
  backdrop-filter: none;

  /* ✅ 直接背景（ヘッダーは常にprimary） */
  background-color: var(--color-button);
  color: var(--color-surface);
}

.player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--number {
  left: 0;
}

.player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--name {
  left: var(--sticky-name-left);
}

.player-stats-detail-cell--name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  color: var(--color-text);
  text-decoration: none;
}

/* ホバー時はbase.cssのデフォルトスタイルを使用 */

/* ポジション（POS）列 - 既存の固定幅を踏襲 */
.player-stats-detail-cell--position {
  width: var(--cell-width-position, 3.25rem);
  min-width: var(--cell-width-position, 3.25rem);
  max-width: var(--cell-width-position, 3.25rem);
  text-align: left; /* 文字系は左寄せ */
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text);
}

/* 数値系カラム（出場時間、ゴール、アシストなど） - 既存の固定幅を踏襲 */
.player-stats-detail-cell--numeric {
  width: var(--cell-width-numeric, 5.25rem);
  min-width: var(--cell-width-numeric, 5.25rem);
  max-width: var(--cell-width-numeric, 5.25rem);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* 右寄せ数値が隠れないように余白を確保 */
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
}

/* 数値系カラム（パス数、ドリブル成功数、シュート数、デュエル勝利数） - 既存の固定幅を踏襲 */
.player-stats-detail-cell--numeric-wide {
  width: var(--cell-width-numeric-wide, 7.25rem);
  min-width: var(--cell-width-numeric-wide, 7.25rem);
  max-width: var(--cell-width-numeric-wide, 7.25rem);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* 右寄せ数値が隠れないように余白を確保 */
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
}

/* エラー表示用スタイル */
.player-stats-detail-row--empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-error);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.4;
  padding: var(--space-lg);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .player-stats-detail-header,
  .player-stats-detail-row {
    gap: 0; /* gapを0にして背景色の不整合を防ぐ（セルのpaddingで余白を確保） */
    padding: 0; /* 行のpaddingを撤去（sticky基準点のズレを防ぐ） */
  }

  /* ヘッダー行コンテナに下地背景を明示（セル間の白線を防ぐ） */
  .player-stats-detail-header {
    background-color: var(--color-button);
  }

  /* 共通CSS由来のborder/box-shadowを確実に無効化（スマホ限定で!important使用） */
  .player-stats-detail-header__item,
  .player-stats-detail-cell,
  .player-stats-detail-split .player-stats-detail-header__item,
  .player-stats-detail-split .player-stats-detail-cell {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box;
  }

  /* モバイル: ヘッダーが2行になった場合の行高を確保（見える行数が減りすぎないように） */
  .player-stats-detail-header__item,
  .player-stats-detail-split .player-stats-detail-header__item {
    min-height: 52px; /* 2行ヘッダーに対応（44px → 52px） */
  }

  /* モバイルでも display:flex を維持し、2行表示を許可（中央揃えを維持） */
  .player-stats-detail-split .player-stats-detail-header__item {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
  }

  /* 非stickyセルの背景を透明化して「行背景」に一本化（横スクロール中の白線を防ぐ） */
  .player-stats-detail-cell {
    background-color: transparent;
  }

  /* stickyセル（No/選手名）の背景色は維持 */
  .player-stats-detail-cell--number,
  .player-stats-detail-cell--name {
    background-color: var(--row-bg, var(--color-surface));
  }

  /* ヘッダーセルの背景を透明化（親のbackground-colorで塗る） */
  .player-stats-detail-header__item {
    background-color: transparent;
  }

  /* ヘッダーのstickyセルの背景色は維持 */
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--number,
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--name {
    background-color: var(--color-button);
  }

  /* のりしろの絶対配置を安定化（必須） */
  .player-stats-detail-cell--number,
  .player-stats-detail-cell--name,
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--number,
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--name {
    position: sticky; /* 念のため維持 */
    position: -webkit-sticky; /* iOS保険（あっても害なし） */
    overflow: visible; /* のりしろが切れないように */
  }

  /* sticky列の境界を上塗りする「のりしろ」を追加（横スクロール中の割れ対策） */
  .player-stats-detail-cell--number::after,
  .player-stats-detail-cell--name::after,
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--number::after,
  .player-stats-detail-header .player-stats-detail-header__item.player-stats-detail-cell--name::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background-color: inherit;
    pointer-events: none;
    z-index: 5;
  }

  /* sticky幅をモバイル用にpx固定で再定義（サブピクセル由来のカクつきを抑える） */
  .player-stats-detail-grid {
    --sticky-number-w: 40px;
    --sticky-name-left: 40px;
  }

  .player-stats-detail-cell--name {
    min-width: 100px;
  }

  .player-stats-detail-cell--position {
    width: var(--cell-width-position, 3.25rem);
    min-width: var(--cell-width-position, 3.25rem);
    max-width: var(--cell-width-position, 3.25rem);
  }

  .player-stats-detail-cell--numeric {
    width: var(--cell-width-numeric, 5.25rem); /* PC版と同じ幅に統一 */
    min-width: var(--cell-width-numeric, 5.25rem);
    max-width: var(--cell-width-numeric, 5.25rem);
  }

  .player-stats-detail-cell--numeric-wide {
    width: var(--cell-width-numeric-wide, 7.25rem); /* PC版と同じ幅に統一 */
    min-width: var(--cell-width-numeric-wide, 7.25rem);
    max-width: var(--cell-width-numeric-wide, 7.25rem);
  }
}