/*
  つかんで並べ替える一覧（「カテゴリー」画面と「メニュー」画面）の見た目です。
  以前は「表示順」タブの一覧でした。タブは廃止し、並べ替えはそれぞれの画面の中へ移しました（2026-09-20）。
  行を畳む・開く見た目（.acc-row / .acc-head / .acc-body）は admin-catalog.css にあります。
  ドラッグはPointer Eventsで実装しているため（admin-boards.js の bindSortList()）、ハンドルには
  touch-action: none が必須です。
  これが無いと、スマートフォンではブラウザの縦スクロールが優先されて並べ替えできません。
*/

.sort-list {
    display: grid;
    gap: 8px;
}

.sort-row {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e3de;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: 34px 30px minmax(0, 1fr) auto auto;
    padding: 8px 12px 8px 8px;
    position: relative;
    transition: border-color .16s ease, opacity .16s ease, transform .16s ease;
}

/* つかむ所・↑↓・行を開くボタン（.acc-toggle）は、どれも44pxの高さにそろえます（2026-10-15）。
   以前は 38px／約43px／44px で、1行の中で段違いでした。 */
.sort-handle {
    background: var(--brand);
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: grab;
    height: 44px;
    padding: 0;
    touch-action: none;
    width: 34px;
}

.sort-handle:active {
    cursor: grabbing;
}

.sort-handle span {
    font-size: 20px;
    line-height: 1;
    writing-mode: vertical-rl;
}

.sort-number {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.sort-label {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sort-steps {
    display: flex;
    gap: 6px;
}

.sort-steps button {
    min-height: 44px;
    min-width: 44px;
    padding: 0;
}

.sort-row.is-dragging {
    opacity: .52;
    transform: scale(.99);
}

.sort-row.drop-before::before,
.sort-row.drop-after::after {
    background: var(--brand);
    border-radius: 999px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
}

.sort-row.drop-before::before {
    top: -6px;
}

.sort-row.drop-after::after {
    bottom: -6px;
}

@media (max-width: 640px) {
    .sort-row {
        grid-template-columns: 34px 26px minmax(0, 1fr);
        row-gap: 6px;
    }

    .sort-steps {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* 売り切れは営業中に何度も触る操作なので、商品の行を開かずに切り替えられるようにする。
   商品ごとにチェックは1つだけ（admin.js の productCard() / setProductSoldOut()）。 */
.sort-sold-out {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    white-space: nowrap;
}

.sort-row.is-sold-out {
    background: #fdf4f3;
    border-color: #f0d4d0;
}

.sort-row.is-sold-out .sort-label,
.sort-row.is-sold-out .acc-label {
    color: #8a4b12;
}