/* 목록 조작 — 디자인 가이드 §4.8 목록 선택 / §4.17 목록 정렬 (v2.10.0).
 *
 * 다섯 템플릿이 같은 선택 CSS 를 각자 베껴 들고 있었고, 베끼는 동안 체크박스가
 * 18px 와 20px 로 갈렸으며 클래스 이름은 여덟 갈래(.row-select-stock,
 * .select-row, .sm-row-checkbox, .smSelectOne, .file-checkbox …)가 됐다.
 * 접근 가능한 이름도 aria-label · title · 없음으로 갈렸다.  여기서만 정한다.
 *
 * 정렬 표시도 두 갈래였다 — 서버 정렬은 `▲▼`, 클라이언트 정렬은 `↕↑↓`.
 * 같은 뜻에 두 모양을 두면 사용자는 둘이 다른 것인지 묻게 된다.  하나로 모은다.
 */

/* ── 선택 칸 ──────────────────────────────────────────────────────
   체크박스 자체는 18px 라 §6 의 40×40 에 못 미친다.  칸 전체를 클릭
   영역으로 만들어 채운다. */
.list-select-cell {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
    text-align: center;
    position: relative;
}

.list-select-hit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
    margin: 0;
}

.list-select-hit input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pundit-primary, #2458c6);
}

/* 키보드 focus 는 체크박스가 아니라 칸 전체에 보인다 — 실제로 눌리는 범위와
   테두리가 어긋나면 어디를 누르는지 알 수 없다. */
.list-select-hit input[type="checkbox"]:focus-visible {
    outline: none;
}

.list-select-hit:has(input[type="checkbox"]:focus-visible) {
    box-shadow: inset 0 0 0 3px rgba(36, 88, 198, 0.18);
    border-radius: 4px;
}

/* ── 선택 상태 문구 ──────────────────────────────────────────────
   건수는 행동 버튼 라벨이 아니라 여기에 적는다.  버튼은 무엇을 하는지만
   말하고, 무엇에 대해 하는지는 이 문장이 말한다. */
.list-select-status {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pundit-muted-strong, #526277);
    font-variant-numeric: tabular-nums;
}

.list-select-status b {
    color: var(--pundit-text, #172033);
    font-weight: 700;
}

.list-select-status button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--pundit-primary, #2458c6);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.list-select-status button:focus-visible {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 페이지를 넘기면 선택이 풀린다는 사실.  고른 것이 있을 때만 나온다 —
   고르지 않은 사람에게는 알릴 것이 없다. */
.list-select-volatile {
    color: var(--pundit-warning-strong, #8a4a05);
}

/* ── 일괄 처리 바 ────────────────────────────────────────────────
   표 바로 위에 늘 자리를 지킨다. 선택 전 숨기면 첫 선택 순간 표가 밀리고,
   사용자가 방금 누른 행을 놓친다. */
.list-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 56px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--pundit-border, #dce3ee);
    border-radius: 8px;
    background: var(--pundit-surface-soft, #f8fafc);
}

.list-bulk-bar .list-select-status {
    margin-right: auto;
}

.list-bulk-bar [data-list-select-requires]:disabled {
    opacity: 1;
    color: var(--pundit-muted, #69778d) !important;
    border-color: var(--pundit-border, #dce3ee) !important;
    background: var(--pundit-surface-soft, #f8fafc) !important;
    cursor: not-allowed;
}

/* ── 정렬 머리글 ────────────────────────────────────────────────
   클라이언트 정렬(stock_workspace.js)과 서버 정렬(<a class="list-sort">)이
   같은 모양으로 보이게 한다.  구현이 다른 것은 규모 때문이지 사용자가 알아야
   할 일이 아니다. */
th.is-sortable,
th.list-sort-cell {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.is-sortable::after,
.list-sort::after {
    content: "↕";
    margin-left: 6px;
    opacity: 0.35;
    font-size: 11px;
}

th.is-sortable:hover::after,
.list-sort:hover::after {
    opacity: 0.7;
}

th.is-sortable.is-sorted-asc::after,
.list-sort.is-sorted-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--pundit-primary, #2458c6);
}

th.is-sortable.is-sorted-desc::after,
.list-sort.is-sorted-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--pundit-primary, #2458c6);
}

/* 서버 정렬은 링크다.  링크처럼 보이면 안 된다 — 머리글이다. */
.list-sort {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    font: inherit;
}

.list-sort:hover {
    color: var(--pundit-primary, #2458c6);
}

th.is-sortable:focus-visible,
.list-sort:focus-visible {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (max-width: 650px) {
    .list-select-cell {
        width: 40px;
        min-width: 40px;
    }

    .list-bulk-bar {
        align-items: stretch;
    }

    .list-bulk-bar .list-select-status {
        flex-basis: 100%;
        margin-right: 0;
    }
}