/* NAK-1344 — 入社順一覧。大塚さんの個人成績シート「◯月末終了時点」の見た目(見出しの黄・水色、6段階の青)を写す。
   表の中で縦にスクロールし、見出し3行と No.・名前の列を固定する(シートの固定行・列と同じ)
   NAK-1346 — 表は画面の幅に合わせて列を割る(1280幅で横スクロールなし)。それより狭い時だけ横にもスクロールする */
.ev .roster { border-top: 2px solid var(--ink); --roster-no: 36px; }
.ev .roster .search-result-count { margin: 10px 0; font-size: 13px; }
/* NAK-1352 — 時点(最新・◯月末)の選択。隣の検索欄と高さ・枠を揃える */
.ev .roster-month-field .combo { display: block; position: relative; width: 170px; margin-top: 4px; }
.ev .roster-month-field .combo input[type="text"] { box-sizing: border-box; width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: 14px; padding: 8px 28px 8px 12px; }
.ev .roster-scroll { max-height: calc(100dvh - 265px); min-height: 320px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ev .roster-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ev .roster-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; min-width: 820px; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.3; }
.ev .roster-table th, .ev .roster-table td { border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; padding: 2px 4px; white-space: nowrap; overflow: hidden; background: #fff; color: var(--ink); }
.ev .roster-col-no { width: var(--roster-no); }
.ev .roster-col-name { width: 92px; }
.ev .roster-col-store { width: 124px; }
.ev .roster-table thead { position: sticky; top: 0; z-index: 3; }
/* 長い見出しは「セッション／評価」のように <wbr> の位置でだけ折り返す */
.ev .roster-table thead th { text-align: center; vertical-align: middle; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ev .roster-groups th { font-size: 13px; font-weight: 750; color: #ff0000; height: 24px; }
.ev .roster-notes th { font-size: 11px; font-weight: 500; color: #ff0000; line-height: 1.2; height: 26px; }
.ev .roster-labels th { font-size: 12px; font-weight: 700; line-height: 1.2; border-bottom: 2px solid var(--ink); height: 32px; }
.ev .roster-table .skill { background: #ffe599; }
.ev .roster-table .stance { background: #2dd2f9; }
.ev .roster-table .roster-corner { background: #d9d9d9; color: #0000ff; font-size: 14px; font-weight: 750; }
.ev .roster-labels .roster-no, .ev .roster-labels .roster-name, .ev .roster-labels .roster-store { background: #d9d9d9; }
/* No.・名前を左に固定。見出しの角は本文より上に重ねる */
.ev .roster-table .roster-no { position: sticky; left: 0; z-index: 1; text-align: center; }
.ev .roster-table .roster-name { position: sticky; left: var(--roster-no); z-index: 1; text-align: center; border-right: 2px solid #d9d9d9; }
.ev .roster-labels .roster-no, .ev .roster-labels .roster-name { z-index: 4; }
.ev .roster-table .roster-name button { font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: #b5bac0; text-underline-offset: 3px; }
.ev .roster-table .roster-name button:hover { text-decoration-color: currentColor; }
.ev .roster-table .roster-store { text-align: center; }
.ev .roster-table .roster-value { text-align: center; }
.ev .roster-table tbody tr:hover td, .ev .roster-table tbody tr:hover th { box-shadow: inset 0 -2px 0 var(--ink); }
.ev .roster-table .band-1 { background: #cfe2f3; }
.ev .roster-table .band-2 { background: #9fc5e8; }
.ev .roster-table .band-3 { background: #6fa8dc; }
.ev .roster-table .band-4 { background: #3d85c6; color: #ffff00; }
.ev .roster-table .band-5 { background: #0b5394; color: #ffff00; }
.ev .roster-table .band-6 { background: #0000ff; color: #ffff00; }
@media (max-width: 720px) {
  .ev .roster-scroll { max-height: calc(100dvh - 200px); }
  .ev .roster-table th, .ev .roster-table td { padding: 5px 6px; }
  .ev .roster-table .roster-name button { min-height: 24px; }
}