/* assets/css/status-search.css */

/* 検索結果エリアを横スクロール可能に */
#search-results {
  overflow-x: auto; /* 必要に応じて横スクロールを許可 */
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem; /* 検索フォームとの間に余白を追加 */
}

/* テーブル全体の設定 */
/* JSで付与される .table クラスをターゲットにします */
.table {
  table-layout: fixed; /* 列幅を固定してはみ出しを抑える */
  width: 100%; /* 親要素に合わせる */
  border-collapse: collapse; /* セルの境界線を結合 */
}

/* セル内のテキストの表示と余白 */
.table th,
.table td {
  padding: .5rem; /* パディングを調整 */
  text-align: center;
  vertical-align: middle;
  word-break: break-all; /* 長い単語がはみ出さないように改行させる */
  white-space: normal; /* テキストの折り返しを許可（重要） */
}

/* ヘッダーにマウスオーバー効果 */
#search-results th {
  cursor: pointer;
  user-select: none;
}
#search-results th:hover {
  background-color: #f8f9fa;
}

/* ソートアイコンのスタイル (▲▼のテキストが見えるようにする) */
.sort-icon {
  display: inline-block;
  min-width: 1em; /* アイコンの幅を確保 */
  font-size: 0.8em; /* アイコンのサイズを少し小さく */
}

/* 各列の幅とテキストの折り返しを明示的に設定 */
.col-version {
  width: 10%; /* バージョンの幅を調整 */
}
.col-rarity {
  width: 8%; /* レアリティの幅を調整 */
}

.col-hp,
.col-attack,
.col-magic-attack,
.col-defense,
.col-magic-defense,
.col-agility {
  width: 10%; /* 各ステータス列の幅を調整 (6列で合計60%) */
}

.col-atk-mgatk,
.col-def-mgdef {
  width: 11%; /* 攻撃+魔攻, 防御+魔防の幅を調整 (2列で合計22%) */
}

/* 合計10% + 8% + 6*10% + 2*11% = 10% + 8% + 60% + 22% = 100% */


/* ページネーションのスタイル */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none !important; /* リストの「・」を確実に除去 */
  border-radius: .25rem;
  flex-wrap: wrap; /* スマホでページ番号が収まらない場合に折り返す */
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: center; /* 中央寄せ */
}

.page-item {
    list-style: none !important; /* 個々のアイテムのリストスタイルも確実に除去 */
}

.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
  text-decoration: none; /* リンクの下線を消す */
  min-width: 2.5rem; /* ページ番号のボタンの最小幅を確保 */
}

.page-item:first-child .page-link {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.page-link:hover {
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

/* スマホ対応の調整 */
@media (max-width: 768px) {
  .table {
    font-size: 0.85rem; /* スマホではフォントサイズを小さく */
  }
  .table th, .table td {
    padding: .3rem; /* パディングをさらに減らす */
  }
  /* 列幅をスマホ向けに再調整する例 */
  .col-version, .col-rarity {
    width: 15%; /* スマホで少し広げる */
  }
  .col-hp, .col-attack, .col-magic-attack,
  .col-defense, .col-magic-defense, .col-agility {
    width: 12%; /* スマホで調整 */
  }
  .col-atk-mgatk, .col-def-mgdef {
    width: 17%; /* スマホでさらに広げる */
  }
}

/* 小さなスマホ向けにさらに調整 */
@media (max-width: 576px) {
  .table {
    font-size: 0.75rem; /* さらにフォントサイズを小さく */
  }
  .table th, .table td {
    padding: .2rem; /* パディングをさらに減らす */
  }
  .page-link {
    padding: .3rem .5rem; /* ページネーションボタンのパディングを減らす */
    min-width: 2rem; /* 最小幅をさらに減らす */
  }
}