/* 技評価リストハブ (/move-evaluation-list/) テーブルCSS。
 * pokemon-summary.css の sticky header / table-layout:fixed 方式を踏襲。
 * user依頼2026-07-06「ノーマル/ゲージのフィルタを無くし、h2見出し+別テーブルに分離」
 * を受け、#pms-tableという単一IDではなく table[id^="pms-table-"] (fast/charge の2枚)
 * を対象にした属性セレクタへ変更。
 */
/* 評価基準の説明ブロック (user依頼2026-07-06「評価基準を書くようにしてほしい」)。
 * 折りたたみ状態でも展開可能と分かるよう、maxbattle-type-durability.css の
 * .pmt-lead-fold と同じ回転シェブロン("▶"→90度回転)パターンを踏襲する。 */
.move-eval-methodology {
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fafbfc;
}

.move-eval-methodology > summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    user-select: none;
}

.move-eval-methodology > summary::-webkit-details-marker {
    display: none;
}

.move-eval-methodology > summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    font-size: 11px;
    color: #888;
    transition: transform 0.15s ease;
}

.move-eval-methodology[open] > summary::before {
    transform: rotate(90deg);
}

.move-eval-methodology[open] > summary {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 8px;
}

.move-eval-methodology > summary:hover {
    background: #f0f2f4;
}

.move-eval-methodology > p, .move-eval-methodology > table {
    margin-left: 12px;
    margin-right: 12px;
}

.move-eval-methodology-tbl {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 12px;
}

.move-eval-methodology-tbl th, .move-eval-methodology-tbl td {
    border: 1px solid #ddd;
    padding: 5px 10px;
    text-align: left;
}

.move-eval-methodology-tbl th {
    background: #f8f9fa;
}

.move-eval-methodology-note {
    font-size: 12px;
    color: #555;
}

.pms-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.pms-search-input {
    padding: 6px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 13px;
    min-width: 160px;
}

.pms-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pms-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #d0d7de;
    background: #f8f9fa;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}

.pms-type-chip-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
}

/* user依頼2026-07-06「フィルタは、そのボタンを押したときにそのタイプの技のみが表示
   されるようにしてほしい」。除外方式(.excluded)から単一選択方式(.is-active)へ変更。 */
.pms-type-chip.is-active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* ノーマル技/ゲージ技それぞれの見出し (user依頼2026-07-06「h2見出し+別テーブルに分離」)。 */
.pms-section-heading {
    margin: 20px 0 8px;
    font-size: 18px;
    font-weight: 800;
}

.move-eval-intro {
    font-size: 13px;
    color: #444;
}

.move-eval-methodology-kind {
    margin-top: 0;
    margin-bottom: 12px;
}

.pms-section-count {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.pms-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

table[id^="pms-table-"] {
    border-collapse: collapse;
    table-layout: fixed;
}

table[id^="pms-table-"] th, table[id^="pms-table-"] td {
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}

/* 数値セルは折り返すと"10.00"のような値が数字の途中で分断されるため禁止。 */
table[id^="pms-table-"] td {
    white-space: nowrap;
}

table[id^="pms-table-"] .pms-col-name {
    text-align: left;
    white-space: normal;
}

/* user依頼2026-07-07: モバイルで技名の前に配置するタイプアイコン (タイプ列を統合して省スペース化) */
.pms-name-type-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    width: 16px;
    height: 16px;
}

/* 追加効果列 (user依頼2026-07-06「ゲージ技に追加効果の列が必要」) は文章のため
   数値セルと違い折り返し可・左寄せにする (nowrapだと横に長すぎるテキストが切れるため)。 */
table[id^="pms-table-"] .pms-col-effect {
    white-space: normal;
    text-align: left;
    font-size: 11px;
}

/* user依頼2026-07-06「自分に有利な効果は青、不利な効果は赤にしたい」。
 * effect_bonus (発動確率×効果段階数×極性重み) の符号で判定 (自分バフ/相手デバフ=プラス
 * =青、自分デバフ/相手バフ=マイナス=赤)。 */
table[id^="pms-table-"] .pms-effect-favorable {
    color: #1565c0;
    font-weight: 600;
}

table[id^="pms-table-"] .pms-effect-unfavorable {
    color: #c62828;
    font-weight: 600;
}

/* 列見出し行 (2行目)。グループ見出し行 (1行目、下記 .pms-group-row) の下にsticky表示。
 * user依頼2026-07-06「スクロールしたときに、第一行は固定したい」を受け、1行目(グループ
 * 見出し)・2行目(列見出し)ともにsticky化。行の高さを明示固定し、2行目のtopオフセットを
 * 1行目の高さと一致させることでズレなく積み重ねる。 */
table[id^="pms-table-"] thead tr.pms-col-row th {
    position: sticky;
    top: 23px;
    background: #f8f9fa;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    z-index: 5;
}

table[id^="pms-table-"] thead tr.pms-col-row th:hover {
    background: #e8ecf0;
}

/* ジムレイド指標/PVP指標のグループ見出し行 (user依頼2026-07-06「第一行で
 * ジムレイド向け/PVP向けの指標列を分かりやすく」)。高さを明示固定(line-height+padding=23px)
 * し、列見出し行のtopオフセット計算の基準にする。 */
table[id^="pms-table-"] thead tr.pms-group-row th {
    position: sticky;
    top: 0;
    background: #eef2f5;
    font-weight: 800;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    padding: 4px 4px;
    border-bottom: 1px solid #d0d7de;
    cursor: default;
    z-index: 6;
}

.pms-group-th--none { background: #fff; }
.pms-group-th--raid { color: #b71c1c; }
.pms-group-th--pvp { color: #1565c0; }

table[id^="pms-table-"] thead th .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    opacity: .35;
    font-size: 10px;
}

table[id^="pms-table-"] thead th.sort-asc .sort-arrow::after { content: "▲"; opacity: 1; }
table[id^="pms-table-"] thead th.sort-desc .sort-arrow::after { content: "▼"; opacity: 1; }
table[id^="pms-table-"] thead th:not(.sort-asc):not(.sort-desc) .sort-arrow::after { content: "⇅"; }

/* タイプバッジ (pokemon-summary.css .pks-type-chip/.pks-type--<type> と同一パレット、
 * user依頼2026-07-06「タイプアイコンとタイプ名を/type-ranking/に倣って」)。
 * 注意: フィルターボタン(.pms-type-chip、上部で定義済み)とはクラス名を分離し、
 * どちらも同じ.pms-type-chipを名乗ってCSSが衝突していたバグを修正 (2026-07-06)。 */
.pms-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.pms-type-badge-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.pms-type--ノーマル   { background: #9fa19f; }
.pms-type--ほのお     { background: #e62829; }
.pms-type--みず       { background: #2980ef; }
.pms-type--でんき     { background: #fac000; color: #3a2e00; }
.pms-type--くさ       { background: #3fa129; }
.pms-type--こおり     { background: #3dcef3; color: #003a48; }
.pms-type--かくとう   { background: #ff8000; }
.pms-type--どく       { background: #9141cb; }
.pms-type--じめん     { background: #915121; }
.pms-type--ひこう     { background: #81b9ef; color: #1a3055; }
.pms-type--エスパー   { background: #ef4179; }
.pms-type--むし       { background: #91a119; }
.pms-type--いわ       { background: #b0ab82; color: #2e2a16; }
.pms-type--ゴースト   { background: #704170; }
.pms-type--ドラゴン   { background: #5060e1; }
.pms-type--あく       { background: #4f3f3d; }
.pms-type--はがね     { background: #60a1b8; color: #fff; }
.pms-type--フェアリー { background: #ef70ef; }

.pms-grade-badge {
    display: inline-block;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
}

.pms-grade-null {
    color: #ccc;
    font-size: 11px;
}

@media (max-width: 640px) {
    table[id^="pms-table-"] th, table[id^="pms-table-"] td {
        padding: 4px 5px;
        font-size: 11px;
    }
    .pms-search-input {
        min-width: 100%;
    }
}