/* 並べ替え可能な表見出し（施設マスタ・清掃詳細ログ・エラー一覧共通。指示書BH 段階2） */

.thSortable {
  /* 印（△ / ▼▲）用に左右を 12px→6px に詰める（列幅を広げない。指示書BH §5） */
  padding: 10px 6px;
  font-size: 11px;
  color: var(--tx-m);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
  font-weight: 600;
}

.thSortableAlignLeft {
  text-align: left;
}

.thSortableAlignCenter {
  text-align: center;
}

.thSortableAlignRight {
  text-align: right;
}

/* children あり: th は table-cell のまま。中身だけ flex（指示書BH §11 R1） */
.thInner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

.sortButton {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  /* ★font: inherit を外さない★ — 外すと日本語が中華字形に落ちる（CLAUDE.md §0-3） */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.sortButtonWithChildren {
  width: auto;
}

.sortButtonAlignLeft {
  justify-content: flex-start;
}

.sortButtonAlignCenter {
  justify-content: center;
}

.sortButtonAlignRight {
  justify-content: flex-end;
}

.sortButton:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 編集中など: 見出し文字は薄くせず、印だけ薄く・カーソル default（指示書BH §11 R18） */
.sortButton:disabled {
  cursor: default;
  opacity: 1;
}

.sortButton:disabled .sortMark,
.sortButton:disabled .sortMarkActive {
  opacity: 0.35;
}

.sortMark,
.sortMarkActive {
  /* △ と ▼▲ で幅が変わって見出しが動かないよう固定（施設マスタからの移設） */
  display: inline-block;
  width: 9px;
  font-size: 9px;
  letter-spacing: 0;
  text-align: center;
  color: var(--sort-mark);
  /* ▲▼ を Geist Fallback（Arial）ではなく △ と同じ日本語フォントで描かせる（正は globals.css の --font-ja） */
  font-family: var(--font-ja);
}

.sortMark {
  opacity: 0.5;
}

.sortButton:hover:not(:disabled) .sortMark {
  opacity: 1;
}

.sortMarkActive {
  opacity: 1;
}