/* オペレーター一覧の表。 */
.operator-layout { display: grid; grid-template-columns: minmax(18rem, 1.2fr) minmax(18rem, 1fr); gap: 1rem; }
.scroll-list { height: min(68vh, 700px); overflow-y: auto; border: 1px solid #59677b; }
.operator-table { overflow-x: auto; }
/* Virtualize の spacer(class を持たない直下の div)を行と同じ幅まで広げる (#722)。
   Virtualize は spacer と表示範囲の交差で描画範囲を更新するが、spacer の幅は既定で表示範囲の幅しかない。
   それより大きく横スクロールすると spacer が表示範囲の左へ出て交差が起きず、縦に動かしても行が更新されなくなる。 */
.operator-table > div:not([class]) { min-width: var(--operator-columns-min-width, 100%); }
.operator-column-header, .list-row { display: grid; align-items: center; width: max-content; min-width: 100%; height: 52px; text-align: left; }
.operator-column-header { background: #263344; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.app-shell.light .operator-column-header { background: #d7e1ef; }
.operator-column-header span, .operator-cell { padding: 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.list-row { border: 0 !important; border-bottom: 1px solid #59677b !important; }
.operator-layout { display: block; }
.operator-table { height: min(74vh, 850px); max-width: 100%; }
.operator-column-header, .list-row { height: 38px; font-size: .84rem; }
.operator-column-header span, .list-row .operator-cell { padding-inline: .4rem; }
.app-shell .scroll-list {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--bevel-frame);
    corner-shape: bevel;
    scrollbar-gutter: stable;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
}
.app-shell .operator-table { flex: 1 1 auto; height: auto; min-height: 0; container-type: inline-size; container-name: browser-operator-table; }
.app-shell .operator-column-header, .app-shell .list-row {
    height: 34px;
    font-size: 13px;
}
.app-shell .operator-column-header {
    color: var(--text2);
    background: var(--head);
    border-bottom: 1px solid var(--head-line);
    /* 左に固定したセル(1)より上、セル編集の backdrop(4)より下。 */
    z-index: 3;
}
.app-shell .operator-column-header .sort-heading, .app-shell .operator-cell {
    border-right: 1px solid var(--vline);
    padding: 0 3px;
}
.app-shell .operator-column-header .sort-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 34px;
    min-height: 0;
    color: var(--text2);
    background: var(--head);
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    white-space: nowrap;
    font-weight: 600;
}
.app-shell .operator-column-header .sort-heading:hover { color: var(--accent); background: var(--row-hover); }
/* ソート中の列は見出しの右端に三角を出す。ラベルと重ならないよう右の余白を広げる。 */
.app-shell .operator-column-header .sort-heading:is(.sort-asc, .sort-desc) { padding-right: 14px; }
.app-shell .operator-column-header .sort-heading:is(.sort-asc, .sort-desc)::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
.app-shell .operator-column-header .sort-heading.sort-asc::after { border-bottom: 4px solid currentColor; }
.app-shell .operator-column-header .sort-heading.sort-desc::after { border-top: 4px solid currentColor; }
/* 行の背景は --row-bg で持つ — 左端に固定したセルが同じ色を不透明な下地に重ねて描くため。 */
.app-shell .list-row {
    --row-bg: var(--panel);
    color: var(--text);
    background: var(--row-bg);
    border: 0 !important;
    border-bottom: 1px solid var(--rowline) !important;
    padding: 0;
    border-radius: 0;
    corner-shape: initial;
}
.app-shell .list-row:nth-child(even) { --row-bg: var(--row-alt); }
.app-shell .list-row:hover { --row-bg: var(--row-hover); color: var(--text); }
.app-shell .list-row.selected,
.app-shell .list-row.selected:hover { --row-bg: var(--accent-soft); color: var(--text); }
/* 検索一致の行。縞・hover・展開中の背景より優先して見せる。 */
.app-shell .operator-table .list-row.search-hit { --row-bg: var(--search-hit-bg); }
.app-shell .operator-table .list-row.search-current { --row-bg: var(--search-hit-current-bg); }
/* 横スクロールしても行を見失わないよう、先頭が CODE・名前の並びのときだけ2列を左に固定する。
   行の色が半透明でも下を流れるセルが透けないよう、パネル色を下地に敷く。 */
.app-shell .operator-table.id-first :is(.operator-cell, .sort-heading):is([data-column-key="code"], [data-column-key="name"]) { position: sticky; z-index: 1; }
.app-shell .operator-table.id-first .operator-cell:is([data-column-key="code"], [data-column-key="name"]) { background: linear-gradient(var(--row-bg), var(--row-bg)) var(--panel); }
.app-shell .operator-table.id-first .operator-column-header .sort-heading:is([data-column-key="code"], [data-column-key="name"]) { z-index: 2; }
.app-shell .operator-table.id-first [data-column-key="code"] { left: 0; }
.app-shell .operator-table.id-first [data-column-key="name"] { left: 68px; box-shadow: 4px 0 6px -4px #0008; }
.app-shell .operator-cell { display: flex; align-items: center; height: 34px; cursor: pointer; }
.app-shell .operator-cell:has(.ecell-zone),
.app-shell .operator-cell:has(.ecell-popover) { position: relative; overflow: visible; }
.app-shell .operator-cell .ecell-popover { cursor: default; }
.app-shell .operator-cell.cell-editing { padding: 0 3px; background: var(--accent-soft); overflow: visible; }
.app-shell .operator-cell input[type=checkbox] { margin: 0; cursor: pointer; }
.app-shell .cell-edit-inputs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.app-shell .cell-edit-inputs input { width: 38px; min-width: 0; height: 25px; padding: 2px; text-align: center; }
.app-shell .cell-edit-inputs select { width: 80px; min-width: 0; height: 25px; padding: 2px; }
.app-shell .cell-edit-inputs button { min-width: 21px; min-height: 25px; height: 25px; padding: 0; }
.app-shell .operator-name { position: relative; gap: 6px; padding-left: 15px; }
/* 読み上げ専用。画面には出さず、レイアウトにも寄与させない。 */
.app-shell .sort-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-shell .operator-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rbar-color, var(--r2));
}