/* オペレーター一覧テーブル。行高は OperatorList.razor.cs の CollapsedRowPx/HeaderRowPx(=34)と一致必須。 */
/* --col-name-w はマスター全言語の最長名(EN "Terra Research Commission" ≈171px)+MAX バッジ(≈31px)
   +gap 6px+セル padding 20px を常に収める下限 — 縮めるとその名前が省略される。最長名の MH01 は
   ☆1(特化/モジュール無し)ゆえレベル上限だけで最大育成が成立し、「最長名+バッジ」は実在しうる。
   他列は内容+ヘッダの最小限。 */
.ak-shell { --row-h: 34px; --col-code-w: 68px; --col-name-w: 240px; }

.op-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--bevel-frame);
    corner-shape: bevel;
    background: var(--panel);
    /* 自作可変高仮想化の scrollTop 補償(opvirtual.js pitfall 2)とブラウザ scroll anchoring の二重補正を防ぐ。 */
    overflow-anchor: none;
    /* 詳細パネル(.op-detail)の幅基準(100cqw)。td は横スクロールするテーブル全幅にまたがるため、
       可視ペイン幅への固定はコンテナクエリ単位でしか表現できない。 */
    container-type: inline-size;
    /* Chromium は cqw を縦スクロールバー幅を差し引かずに解決する — 詳細パネル(100cqw)が
       スクロールバー分(≈15px)はみ出し、横スクロールバーが常に出る。gutter 常時確保で
       cqw と実内容幅を一致させる(実測: clientWidth=1171 / 100cqw=1185.81 → 一致)。 */
    scrollbar-gutter: stable;
}

/* 仮想化スペーサ(可視ウィンドウ外の総スクロール量を再現)。空 <tr> の height が Chromium で効かない場合に備え
   colspan td 側へ height を載せる(pitfall 二次)。列幅は table-layout: fixed で thead が決めるため影響しない。 */
.op-spacer td { padding: 0; border: 0; }

/* 折りたたみ行の実高は 34px に固定(subpixel 込みで offsets とずれない, pitfall 二次)。 */
.op-row td { height: var(--row-h); }

.op-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
    color: var(--text);
}

.op-table th,
.op-table td {
    height: var(--row-h);
    padding: 0 10px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--rowline);
}

/* 列幅(table-layout: fixed) */
.col-code   { width: var(--col-code-w); }
.col-name   { width: var(--col-name-w); font-family: var(--font-display); }
.col-num    { width: 48px; text-align: right; }
.col-class  { width: 80px; }
.col-cell   { width: 64px; }
/* max-width が無いと、table-layout: fixed でもグループ列だけは中のラベルの max-content に
   引きずられて広がる(実測 所属6件で 86.6px→107.1px・他列がその分縮む)。所属が増えるたびに
   横スクロールバーが出入りし、そのリサイズ通知が開いているドロップダウンを閉じていた(#363)。
   一覧は記号のみの省略表示で枠固定とする — 全文(名前つき)は詳細パネルのバッジ列が持つ。
   幅 92px は「未設定」ラベルが省略されない下限から決めた実測値 — 実文字幅は ja/ch 36px・en 30px で、
   宣言 76px ではラベル枠が 27px しか残らず全言語で潰れる(92px で枠 43px = 7px の余裕)。
   複数所属の記号連結(6件で 58px)はここで省略される。 */
.col-group  { width: 92px; max-width: 92px; }
/* issue #103 追加列。paradox は ✓/空欄の2値表示(中央寄せ)、wide は種族/陣営/出身(長文言想定)。 */
.col-rarity  { width: 56px; text-align: center; }
.col-paradox { width: 64px; text-align: center; }
.col-wide    { width: 110px; }
/* ユーザー定義欄(#426)。内容追従幅は OperatorList.razor.cs が実測して th へ inline style を出す
   (MemoColumnWidthPolicy)。ここは未測定時の既定(初回 render〜測定完了の1往復)専用 — 内容が欠けて
   見える最小幅側ではなく上限値を既定にする(一瞬省略されてから広がるのを避ける)。inline style が
   出れば常にそちらが勝つ(#367 の固定上限 220px を、内容追従の上限としてそのまま継承)。 */
.col-memo    { width: 220px; max-width: 220px; }

/* 列境界の縦線: 各セル右端に短い線(上下は端まで届かせない)。border だと行の上下いっぱいに
   つながるため、背景グラデーションの 1px 帯を中央配置で描く。background ショートハンドは
   この帯を消すので、セル背景は必ず background-color で指定する。 */
.op-head th:not(:last-child),
.op-row td:not(:last-child) {
    background-image: linear-gradient(var(--vline), var(--vline));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1px 50%;
}

/* ヘッダ: 上端に sticky */
.op-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--head);
    color: var(--text2);
    border-bottom: 1px solid var(--head-line);
    font-weight: 600;
    cursor: pointer;
}

/* 列ソート(issue #62)マーカー。z-index は指定しない —
   .ecell-backdrop(4)/.dd-backdrop(8) がヘッダ(2/3)を覆う既存防御を飛び越えさせないため(#62 設計 §5-a)。
   border trick の三角形。padding-right の上書きは狭い列(col-num 48px 等)でラベルがマーカーと
   競合しないための余白確保。 */
.op-head th.op-sort-asc,
.op-head th.op-sort-desc {
    padding-right: 14px;
}

.op-head th.op-sort-asc::after,
.op-head th.op-sort-desc::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.op-head th.op-sort-asc::after {
    border-bottom: 4px solid currentColor;
}

.op-head th.op-sort-desc::after {
    border-top: 4px solid currentColor;
}

/* 固定列(CODE / Name = 旧 FrozenColumnCount=2): 左端に sticky */
.sticky-l0 { position: sticky; left: 0; z-index: 1; background-color: var(--panel); }
.sticky-l1 { position: sticky; left: var(--col-code-w); z-index: 1; background-color: var(--panel); }

.op-head .sticky-l0,
.op-head .sticky-l1 { z-index: 3; background-color: var(--head); }

.op-row.op-alt td { background-color: var(--row-alt); }
.op-row.op-alt .sticky-l0,
.op-row.op-alt .sticky-l1 { background-color: var(--row-alt); }

.op-row:hover td { background-color: var(--row-hover); }
.op-row:hover .sticky-l0,
.op-row:hover .sticky-l1 { background-color: var(--row-hover); }


/* 現在▸目標: 目標側はアクセント色(--tgt-text) */
.tgt { color: var(--tgt-text); margin-left: 4px; }


/* 名前セルは「名前(可変・溢れたら省略) + MAX バッジ(固定幅)」の2要素。td 自体を flex にすると
   table-layout: fixed の列幅計算から外れるため、内側にラッパを置く。td は border-box で
   border-bottom 1px を含むため content box は 33px — 高さは 100% で受ける。 */
.op-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

/* min-width:0 が無いと名前が縮まず、バッジが td の overflow:hidden で黙って切れる。 */
.op-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最大育成バッジ。Name 文字列に混ぜない別 span(言語切替 in-place mutate と非干渉)。
   表記は全表示言語で "MAX" 固定(非ローカライズ)ゆえ幅は言語非依存。 */
.op-max {
    flex: none;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: 700 10px/16px var(--font-mono);
    letter-spacing: 0.04em;
}

/* オペレーター名セル左端: レアリティ色(--r1..--r6)の縦バー。
   名前文字は通常色のまま(両テーマで可読)、色は先頭 4px の帯だけが担う。null はバーなし。
   .sticky-l1 が position: sticky ゆえ ::before の絶対配置はこのセル基準になる。 */
.col-name.rbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rbar-color);
}
.col-name.r6 { --rbar-color: var(--r6); }
.col-name.r5 { --rbar-color: var(--r5); }
.col-name.r4 { --rbar-color: var(--r4); }
.col-name.r3 { --rbar-color: var(--r3); }
.col-name.r2 { --rbar-color: var(--r2); }
.col-name.r1 { --rbar-color: var(--r1); }

/* 検索クローズ時のスクリプトフォーカス戻し先(tabindex=-1, Issue #3)。フォーカスリングは出さない。 */
.op-table-scroll:focus { outline: none; }

/* 検索一致行のハイライト(#58: dark/light 両テーマで同一 CSS 変数集合を定義)。 */
.op-row.op-row-hit td { background-color: var(--search-hit-bg); }
.op-row.op-row-hit .sticky-l0,
.op-row.op-row-hit .sticky-l1 { background-color: var(--search-hit-bg); }

.op-row.op-row-hit-current td { background-color: var(--search-hit-current-bg); }
.op-row.op-row-hit-current .sticky-l0,
.op-row.op-row-hit-current .sticky-l1 { background-color: var(--search-hit-current-bg); }

/* CODE/名前セル: 詳細開閉を担う唯一のクリック対象(行全体 onclick は撤去済み, Issue #87)。 */
.op-clickable { cursor: pointer; }

/* 育成セル(col-cell)のインライン編集(Issue #87)。td を position:relative にして popover/半分ゾーンを
   flow 外(absolute)で重ねる — <tr> の行高・自作仮想化(BuildHeights/_detailPx/VirtualWindowCalculator)に
   一切寄与しない。overflow は .op-table td の hidden を打ち消す(セル中心のまま popover をセル外へ
   はみ出させる — セル内容は短い数値のみで ellipsis 切り詰めは不要)。 */
.op-table td.col-cell,
.op-table td.col-num {
    position: relative;
    overflow: visible;
}


/* 最右列の育成セルではセル中心固定をやめ、表の右端(td の padding box 右端)で止める。
   ここが表の右端そのもので余白は 0 — 右方向へ 1px でも越えると横スクロールバーが出て
   コンテナの clientHeight が縮み、ResizeObserver 経由の通知を誘発する(#169)。
   列は ColumnVisibilityViewModel で動的に消えるため、最右は :last-child で追従させる。 */
.op-table td.col-cell:last-child .ecell-popover,
.op-table td.col-num:last-child .ecell-popover {
    left: auto;
    right: 0;
    transform: translateY(-50%);
}