/**
 * Utility classes
 */

.table .table-col-shrink {
  width: 1px;
  white-space: nowrap;
}

/* テーブルを縦スクロール可能にする */
.table-responsive-sticky {
  position: relative;
  overflow: auto;
  max-height: var(--table-responsive-max-height, 25rem);
  margin-bottom: 1rem;
}

.table-responsive-sticky table {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ヘッダー行を固定する */
.table-responsive-sticky table thead th {
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #dee2e6;
}

/* フッター行はテーブルの下部に固定する */
.table-responsive-sticky table tfoot th,
.table-responsive-sticky table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid #dee2e6;
  border-bottom: none;
}

/* 複製して登録ボタン列のヒントテキスト */
.copy-registration-hint {
  display: inline-block;
  text-align: left;
  font-weight: normal;
  max-width: 8em;
  white-space: normal;
  color: #6c757d;
}

/* number input のスピンボタン（上下矢印）を非表示にする */
input[type="number"].no-spinner::-webkit-inner-spin-button,
input[type="number"].no-spinner::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

input[type="number"].no-spinner {
  appearance: textfield;
}

/* 管理画面で確認を促す箇所を目立たせるハイライト（例: 支払額と金額合計欄の整合性確認）。
   table セル内では Bootstrap の table striping (box-shadow inset) が背景色を覆い隠すため、!important で明示的に上書きする */
.highlight-pink {
  background-color: #f472b6 !important;
  box-shadow: none !important;
  padding: 0 0.25rem;
  border-radius: 0.2rem;
}

/* 長くなりがちなテキスト列の折り返し制御（案件名・会社名・番組名など） */
.cell-wrap {
  min-width: 250px;
  max-width: 250px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* .cell-wrap の幅だけを変える修飾クラス（.cell-wrap と併用する）
   sm: 担当者など短い氏名の列。lg: 案件名など特に長い列 */
.cell-wrap.cell-wrap-sm {
  min-width: 7rem;
  max-width: 7rem;
}

.cell-wrap.cell-wrap-lg {
  min-width: 400px;
  max-width: 400px;
}

.width-xs {
  min-width: 1rem;
}

.width-sm {
  min-width: 4rem;
}

.width-md {
  min-width: 7rem;
}

.width-lg {
  min-width: 14rem;
}

.width-xl {
  min-width: 20rem;
}

/* 横スクロールしても右端に固定表示したい列（例: 選手明細テーブルの削除ボタン列）に使う */
.table-responsive-sticky .table-col-sticky-end {
  position: sticky;
  right: 0;
  background-color: #fff;
}

.table-responsive-sticky thead .table-col-sticky-end,
.table-responsive-sticky tfoot .table-col-sticky-end {
  z-index: 3;
}

.table-responsive-sticky tbody .table-col-sticky-end {
  z-index: 1;
  box-shadow: inset 1px 0 0 #dee2e6;
}