/* =========================================
   全体・テーブルコンテナ
========================================= */
.ps-type-table-wrapper {
  overflow-y: auto;
  overflow-x: auto; /* 横スクロールも念のため有効化 */
  max-height: 600px; /* 少し広めに確保 */
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* 角丸でモダンに */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* ふんわりとした影 */
  background: #fff;
  margin-top: 20px;
}

.ps-type-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
}

/* =========================================
   セル共通・配置設定
========================================= */
.ps-type-table th,
.ps-type-table td {
  padding: 10px 6px;
  text-align: center; /* 中央揃えで見やすく */
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0; /* 薄い縦線で区切る */
}

/* 行の最後の縦線を消す */
.ps-type-table th:last-child,
.ps-type-table td:last-child {
  border-right: none;
}

/* =========================================
   ヘッダー固定 & 装飾
========================================= */
.ps-type-table thead th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  color: #495057;
  z-index: 10;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ヘッダー下の影 */
}

/* =========================================
   左端列（ポケモン名）の固定
========================================= */
.ps-type-table th:first-child,
.ps-type-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 5;
  min-width: 130px;
  text-align: left; /* 名前は左揃えが読みやすい */
  padding-left: 15px;
  font-weight: bold;
  border-right: 2px solid #e0e0e0; /* 固定列の境界を強調 */
}

/* 左上角のセル（最前面） */
.ps-type-table thead th:first-child {
  z-index: 20;
  background-color: #f8f9fa;
}

/* =========================================
   行のホバーアクション（マウスオーバー時）
========================================= */
/* 背景色がついているセルも暗くするための特殊な指定（inset shadow） */
.ps-type-table tbody tr:hover td {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
  cursor: default;
}

/* =========================================
   相性・記号ごとの色分け（文字色のみ）
========================================= */
/* ★ 4倍 (黄色) */
.m-4 { 
    background-color: transparent !important; 
    color: #f1c40f; 
    font-weight: bold; 
    font-size: 1.2rem;
} 

/* ◎ 2倍 (赤) */
.m-2 { 
    background-color: transparent !important; 
    color: #e74c3c; 
    font-weight: bold; 
    font-size: 1.2rem;
} 

/* △ 0.5倍 (緑) */
.m-0-5 { 
    background-color: transparent !important; 
    color: #27ae60; 
    font-weight: bold;
} 

/* ▽ 0.25倍 (緑) */
.m-0-25 { 
    background-color: transparent !important; 
    color: #2ecc71; 
    font-weight: bold;
} 

/* ✕ 無効 (青) */
.m-0 { 
    background-color: transparent !important; 
    color: #3498db; 
    font-weight: bold; 
    font-size: 1.1rem;
}

/* 補完率の列も少し落ち着いた色に変更（お好みで） */
.ps-stat-col {
    background-color: #f8f9fa !important; /* 薄いグレーに */
    color: #333 !important;
    min-width: 65px;
}

.ps-stat-cell {
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
}

/* =========================================
   検索フォーム
========================================= */
#ps-search-form {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* フォームを浮かせる */
  border: 1px solid #eaeaea;
}

#ps-search-form label {
  display: flex;
  flex-direction: column; /* ラベルとセレクトボックスを縦並びに */
  font-size: 0.85rem;
  font-weight: bold;
  color: #555;
  gap: 5px;
}

#ps-search-form select {
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  min-width: 180px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

#ps-search-form select:focus {
  outline: none;
  border-color: #3498db;
  background-color: #fff;
}

#ps-search-form button {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#ps-search-form button:hover {
  background-color: #2980b9;
}

#ps-search-form button:active {
  transform: scale(0.98); /* クリック時に少しへこむ */
}

/* =========================================
   ローディング
========================================= */
#ps-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  color: #666;
  font-size: 0.9em;
  font-weight: bold;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(52, 152, 219, 0.2);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ps-loading-active {
  opacity: 0.7;
  pointer-events: none;
}