/* =========================================
   全体・テーブルコンテナ
========================================= */
.ps-type-table-wrapper {
  overflow-y: auto;
  overflow-x: auto;
  max-height: 650px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  margin-top: 25px;
  border: 1px solid #e2e8f0;
}

/* スクロールバーのカスタマイズ（見栄え良く） */
.ps-type-table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ps-type-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.ps-type-table-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.ps-type-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.ps-type-table {
  border-collapse: collapse;
  width: 100%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #334155;
  min-width: 1250px;
}

/* =========================================
   セル共通・配置設定
========================================= */
.ps-type-table th,
.ps-type-table td {
  padding: 8px 6px; /* 縦幅を少し詰めて一覧性を向上 */
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
}

/* 列の間のうっすらとした縦線 */
.ps-type-table td {
  border-right: 1px dashed #f1f5f9;
}
.ps-type-table th:last-child,
.ps-type-table td:last-child {
  border-right: none;
}

/* =========================================
   行のホバーエフェクト（軽量な背景色変更のみ）
========================================= */
.ps-type-table tbody tr:hover td {
  background-color: #f8fafc;
}

/* =========================================
   ヘッダー固定 & 装飾
========================================= */
.ps-type-table thead th {
  position: sticky;
  top: 0;
  background-color: #1e293b;
  color: #f8fafc;
  z-index: 10;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
  padding: 12px 6px;
}

.ps-stat-col {
  background-color: #334155 !important;
  min-width: 85px;
}

/* =========================================
   左端列（No.とポケモン名）の固定
========================================= */
/* --- 1列目: No. --- */
.ps-type-table th:first-child,
.ps-type-table td.ps-no-col {
  position: sticky;
  left: 0;
  z-index: 6;
  min-width: 40px;
  width: 40px;
  background-color: #ffffff;
  color: #94a3b8;
  font-family: monospace;
}

/* --- 2列目: ポケモン名 --- */
.ps-type-table th:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 20;
  background-color: #1e293b;
  border-right: 2px solid #0f172a;
}

.ps-type-table td.ps-sticky-col {
  position: sticky;
  left: 40px; /* 1列目の幅に合わせる */
  z-index: 5;
  min-width: 190px; /* アイコンが追加された分、少し幅を広げるのがオススメ（例: 140px -> 190px） */
  background-color: #ffffff;
  border-right: 2px solid #e2e8f0;
  
  /* 横並び・中央揃えのための設定を追加 */
  display: flex;
  align-items: center;
  gap: 8px; /* 画像とテキストの隙間 */
}

/* 追加：ポケモンアイコンのスタイル（40x40固定） */
.ps-pokemon-icon {
  width: 40px;
  height: 40px;
  object-fit: contain; /* 画像の比率を保つ */
  flex-shrink: 0; /* テーブル幅が狭まっても画像が潰れないようにする */
}

/* 追加：テキスト側の微調整（必要に応じて） */
.ps-pokemon-name {
  font-weight: bold;
  white-space: nowrap;
}

/* 固定列のホバー時背景色同期 */
.ps-type-table tbody tr:hover td.ps-no-col,
.ps-type-table tbody tr:hover td.ps-sticky-col {
  background-color: #f8fafc;
}

/* ヘッダー部分のレイヤー調整 */
.ps-type-table thead th:first-child {
  z-index: 25;
  background-color: #1e293b;
}
.ps-type-table thead th:nth-child(2) {
  z-index: 20;
  background-color: #1e293b;
  border-right: 2px solid #0f172a;
}

/* =========================================
   相性・補完率の装飾（バッジ化）
========================================= */
.ps-badge-cell {
  width: 32px;
}

/* バッジの基本スタイル */
.ps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.8rem;
  margin: 0 auto;
}

/* 各倍率のカラー設定（少し彩度を抑えて目に優しく） */
.m-4 { background-color: #f59e0b; color: #fff; box-shadow: 0 1px 3px rgba(245,158,11,0.3); } 
.m-2 { background-color: #ef4444; color: #fff; box-shadow: 0 1px 3px rgba(239,68,68,0.3); } 
.m-1 { background-color: transparent; color: #94a3b8; font-weight: normal; } 
.m-0-5 { background-color: #10b981; color: #fff; } 
.m-0-25 { background-color: #059669; color: #fff; } 
.m-0 { background-color: #3b82f6; color: #fff; }

.ps-stat-cell { white-space: nowrap; }
.ps-stat-num { font-size: 1rem; font-weight: 700; color: #334155; }
.ps-stat-rate { font-size: 0.75rem; color: #64748b; margin-left: 4px; }

/* =========================================
   検索フォーム
========================================= */
#ps-search-form {
  display: flex; gap: 15px; flex-wrap: wrap; align-items: center;
  background: #f8fafc; padding: 20px; border-radius: 8px;
  border: 1px solid #e2e8f0;
}
#ps-search-form label {
  font-size: 0.9rem; font-weight: bold; color: #475569;
  display: flex; align-items: center; gap: 8px;
}
#ps-search-form select {
  padding: 8px 12px; font-size: 0.95rem; border: 1px solid #cbd5e1;
  border-radius: 6px; min-width: 200px; outline: none;
  background-color: #fff; transition: border-color 0.2s;
}
#ps-search-form select:focus {
  border-color: #3b82f6;
}
#ps-search-form button {
  padding: 10px 20px; font-weight: bold; color: #fff;
  background: #3b82f6; border: none; border-radius: 6px; cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
#ps-search-form button:hover {
  background: #2563eb;
}
#ps-search-form button:active {
  transform: translateY(1px);
}

#ps-loader { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 0.9rem; }
.spinner {
  width: 18px; height: 18px; border: 2px solid #e2e8f0;
  border-top-color: #3b82f6; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================
   Select2 カスタム（ドロップダウン内のアイコン対応）
========================================= */
/* セレクトボックス自体の横幅を調整 */
.select2-container--default .select2-selection--single {
  height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
}

/* 選択肢・選択済みの項目を横並びにする */
.ps-select-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ドロップダウン内のアイコンサイズ（30x30くらいがフォーム内だと綺麗） */
.ps-select-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* 検索入力枠のスタイル微調整 */
.select2-search__field {
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  outline: none;
}

/* 選択肢全体の文字サイズ調整 */
.select2-results__option {
  font-size: 0.95rem;
  padding: 6px 12px !important;
}

/* =========================================
   タイプ列 ＆ タイプバッジの装飾
========================================= */
/* タイプを入れる列（td）の設定 */
.ps-type-col {
  min-width: 130px;
  text-align: center;
  white-space: nowrap;
}

/* タイプバッジの共通デザイン */
.ps-type-badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ffffff;
  border-radius: 4px;
  margin: 2px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  min-width: 55px;
  text-align: center;
}

/* 各タイプの色（18タイプ分＋おまけ） */
.type-ノーマル { background-color: #949494; }
.type-ほのお   { background-color: #ff4422; }
.type-みず     { background-color: #3399ff; }
.type-でんき   { background-color: #ffcc33; color: #333 !important; text-shadow: none; } /* 黄色は文字を暗く */
.type-くさ     { background-color: #77cc55; }
.type-こおり   { background-color: #66ccff; }
.type-かくとう { background-color: #bb5544; }
.type-どく     { background-color: #aa5599; }
.type-じめん   { background-color: #ddbb55; }
.type-ひこう   { background-color: #8899ff; }
.type-エスパー { background-color: #ff5599; }
.type-むし     { background-color: #aabb22; }
.type-いわ     { background-color: #bbaa66; }
.type-ゴースト { background-color: #6666bb; }
.type-ドラゴン { background-color: #7766ee; }
.type-あく     { background-color: #775544; }
.type-はがね   { background-color: #aaaabb; }
.type-フェアリー { background-color: #ee99ee; }

/* =========================================
   抜群補完タイプ ポップアップ（ツールチップ）
========================================= */
/* ポップアップを仕込んだセルの基本設定 */
.ps-has-tooltip {
  position: relative; /* ポップアップの基準点になる */
  cursor: help;       /* マウスカーソルを「？」にする */
}

/* ポップアップの本体（マウスホバー時に表示） */
.ps-has-tooltip:hover::after {
  content: attr(data-tooltip); /* data-tooltip属性のテキストを表示 */
  position: absolute;
  bottom: 120%; /* セルの少し上に配置 */
  left: 50%;
  transform: translateX(-50%); /* 中央揃え */
  
  /* ポップアップの見た目（ユーザーさんのイメージ通りに装飾） */
  background-color: #ffffff; /* 白背景 */
  color: #334155;            /* 暗いグレー文字 */
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1; /* 薄いグレーの枠線 */
  font-size: 0.8rem;
  font-weight: normal;
  white-space: nowrap; /* 折り返さない */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
  z-index: 100;
}

/* ポップアップの下にある三角形の矢印 */
.ps-has-tooltip:hover::before {
  content: "";
  position: absolute;
  bottom: 100%; /* セルの真上 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent; /* 白い三角形 */
  z-index: 101;
}

/* =========================================
   【追加】検索フォーム レイアウト調整 & トグルスイッチ
========================================= */
/* 既存のフォームを縦並びブロックに分割して綺麗に */
#ps-search-form {
  display: flex;
  flex-direction: column; /* 縦並びに変更して要素を整理 */
  gap: 15px;
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* メインコントロール（選択肢とボタン）の横並び設定 */
.ps-form-main-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

/* 追加したオプションエリアのスタイル */
.ps-form-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1; /* 上部にうっすら区切り線 */
  width: 100%;
}

.ps-options-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: #64748b;
}

/* トグルスイッチのコンテナ */
.ps-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem !important; /* 親labelのバグ回避 */
  color: #334155 !important;
}

/* 本物のチェックボックスは隠す */
.ps-toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* トグルスイッチの背景（オフ状態） */
.ps-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background-color: #cbd5e1;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

/* トグルスイッチの丸ボタン */
.ps-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

/* オン状態の背景色（鮮やかな青） */
.ps-toggle-label input[type="checkbox"]:checked + .ps-toggle-switch {
  background-color: #3b82f6;
}

/* オン状態の丸ボタン移動 */
.ps-toggle-label input[type="checkbox"]:checked + .ps-toggle-switch::after {
  transform: translateX(18px);
}

/* テキストのスタイル微調整 */
.ps-toggle-text {
  font-weight: 500;
  font-size: 0.85rem;
}

/* ホバー時にスイッチを少し明快に */
.ps-toggle-label:hover .ps-toggle-switch {
  filter: brightness(0.95);
}