/*
	並び替えの操作部品は**上下ボタン1組だけ**（Issue #4355、オーナー決定2026-10-03）。
	十字のつかみ手は廃止したので、列の幅はボタン1個分（28pxの原則＝共通の
	`--elsa-block-action-height`）に戻る。入れ物（2つのボタンと間の隙間）が
	そのまま掴む面であり、`touch-action: none`で指の押しっぱなしが画面送りへ
	取られないようにする。
*/
.elsaSortControl { --elsa-sort-control-size: var(--elsa-block-action-height, 28px); --elsa-sort-move-gap: 2px; --elsa-sort-move-size: calc((var(--elsa-sort-control-size) - var(--elsa-sort-move-gap)) / 2); display: inline-grid; box-sizing: border-box; grid-template-columns: var(--elsa-sort-control-size); grid-template-rows: repeat(2, var(--elsa-sort-move-size)); align-items: center; width: var(--elsa-sort-control-size); min-width: var(--elsa-sort-control-size); height: var(--elsa-sort-control-size); min-height: var(--elsa-sort-control-size); row-gap: var(--elsa-sort-move-gap); white-space: nowrap; cursor: grab; touch-action: none; }
.elsaListCellField > .elsaSortControl { margin: 4px; vertical-align: middle; }
.elsaSortMove { box-sizing: border-box; width: var(--elsa-sort-control-size); min-width: var(--elsa-sort-control-size); height: var(--elsa-sort-move-size); min-height: var(--elsa-sort-move-size); padding: 0; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 4px; background: var(--elsa-button-default-bg, #d2d2d2); color: var(--elsa-button-default-color, #667085); font-size: 12px; line-height: 1; cursor: pointer; }
/*
	上へ・下へのボタンの図像は**塗りつぶしの三角（▲▼）**（Issue #4817、オーナー指摘）。
	共通の`triangle-up.svg`／`triangle-down.svg`を使い、共通の`arrow-up`／`arrow-down`
	（LISTの並び順・明細行・固定メニューなど）は変えない。

	図像の大きさは枠（border 1px×2）の内側の高さ以下に抑え、margin: autoで上下左右中央に置く。
	内側より大きいと中央寄せが効かず、図像が下の枠へ寄る（Issue #4817の差し戻し）。
*/
.elsaSortMove[data-sort-move="up"] { --elsa-sort-move-mask-size: var(--elsa-icon-triangle-up-mask-size, var(--elsa-icon-mask-size)); --elsa-sort-move-mask-position: var(--elsa-icon-triangle-up-mask-position, center); --elsa-sort-move-icon: var(--elsa-icon-triangle-up); grid-column: 1; grid-row: 1; }
.elsaSortMove[data-sort-move="down"] { --elsa-sort-move-mask-size: var(--elsa-icon-triangle-down-mask-size, var(--elsa-icon-mask-size)); --elsa-sort-move-mask-position: var(--elsa-icon-triangle-down-mask-position, center); --elsa-sort-move-icon: var(--elsa-icon-triangle-down); grid-column: 1; grid-row: 2; }
.elsaSortMoveIcon { display: block; width: min(var(--elsa-block-action-icon-size), calc(var(--elsa-sort-move-size) - 2px)); height: min(var(--elsa-block-action-icon-size), calc(var(--elsa-sort-move-size) - 2px)); margin: auto; background: currentColor; -webkit-mask: var(--elsa-sort-move-icon) var(--elsa-sort-move-mask-position, center) / var(--elsa-sort-move-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-sort-move-icon) var(--elsa-sort-move-mask-position, center) / var(--elsa-sort-move-mask-size, var(--elsa-icon-mask-size)) no-repeat; }
.elsaSortControl:active { cursor: grabbing; }
.elsaSortMove:focus-visible { background: var(--elsa-button-default-bg, #d2d2d2); color: var(--elsa-button-default-color, #667085); outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
/*
	並べ替えは並べ替え不可の一覧でボタンごと押せなくなる。**押せないの表現はアプリ共通の
	`--elsa-button-disabled-*`**（2026-08-28の利用者決定。Issue #2169の監査H5）。
	`opacity: .35`は矢印が消えかけて「壊れている」と読めた。
	`.is-saving`（保存中）は無効ではなく処理中なので、薄いままにする。
*/
.elsaSortMove:disabled { background: var(--elsa-button-disabled-bg); color: var(--elsa-button-disabled-color); border-color: var(--elsa-button-disabled-bg); cursor: default; opacity: 1; }
.elsaSortControl[data-sort-disabled="true"] { cursor: default; }
.elsaSortMove.is-saving { pointer-events: none; opacity: .45; }
/*
	持ち上げている間は行が**浮いた見た目**になる（Issue #4355 受入条件2）。薄くするだけ
	だった旧来の見え方は「消えかけ」と読めたので、面を残したまま影で持ち上げる。
	`position: relative`は影を隣の行の上へ出すためで、行の寸法は変えない。
*/
.elsaSortControl { user-select: none; -webkit-user-select: none; }
.is-reorder-lifting .elsaSortControl { cursor: grabbing; }
.is-sort-dragging { position: relative; z-index: 2; background: var(--elsa-list-row-bg, var(--elsa-surface, #fff)); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.elsaListReorderStatus { margin: 0; }
.elsaListReorderStatus:has(> .elsaStatusBlock:empty) { display: none; }
@media (hover: hover) {
	.elsaSortMove:not(:disabled):not(.is-saving):hover { background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #fff); }
}
/*
	**並べ替えの列の幅はここ1か所で決める**（Issue #4818、オーナー指摘2026-10-14）。
	列の幅＝ボタンの幅（`--elsa-block-action-height`、28px）＋左右の余白
	（共通の`--elsa-list-cell-control-gap`、3px）ちょうどで、画面ごとに数字を書かない。表の側は
	並べ替えの列の見出し（th）とセル（td）へ`data-sort-column`を付けるだけで乗る
	（伝票の明細の「順番」列、CSVの列の対応表）。共通LISTは見出しのthの組み方を
	他の列と揃えるため、見出しの字の側へ`data-sort-column-caption`を付ける。
	見出しの字（「順番」）は読み上げ用（`.elsaVisuallyHidden`）にして、字の長さで列を広げない。
	CSVの列の対応表は、640px以下でセルをカードにする独自の配置のときだけ上限を外す。
	`:is(th, td)`の詳細度は`.elsaList td`・明細のセル規則より強く、同じ列へ
	画面側の幅・余白を重ねても負けない。
*/
.elsaList :is(th, td)[data-sort-column], .elsaList th:has([data-sort-column-caption]), .elsaCsvMapping :is(th, td)[data-sort-column] { --elsa-sort-column-padding: var(--elsa-list-cell-control-gap, 3px); box-sizing: border-box; width: calc(var(--elsa-block-action-height, 28px) + 2 * var(--elsa-sort-column-padding)); min-width: calc(var(--elsa-block-action-height, 28px) + 2 * var(--elsa-sort-column-padding)); max-width: calc(var(--elsa-block-action-height, 28px) + 2 * var(--elsa-sort-column-padding)); padding-left: var(--elsa-sort-column-padding); padding-right: var(--elsa-sort-column-padding); text-align: center; white-space: normal; }
:is(.elsaList, .elsaCsvMapping) td[data-sort-column] > .elsaSortControl { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) {
	.elsaCsvMapping tr > td[data-sort-column] { width: auto; min-width: 0; max-width: none; padding-left: .35em; padding-right: .35em; text-align: left; }
}