/* ===============================
   DataTables 風 レイアウト行
================================ */
.dt-container .dt-layout-row {
  display: flex;
  align-items: center;
  /* 縦中央揃え */
  margin: 0.75rem 0.5rem;
  /* 行全体に余白 */
}

/* 左側（件数表示） */
.dt-layout-start {
  margin-right: auto;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}

/* 右側（ページネーション） */
.dt-layout-end {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 件数表示 */
.dt-info {
  font-size: 1rem;
  display: flex;
  align-items: center;
}

/* ===============================
   ページネーション
================================ */
.dt-container.dt-paging {
  display: flex;
  justify-content: flex-end;
  /* 右寄せ */
  flex-wrap: wrap;
  gap: 0.5rem;
  /* ボタン間隔 */
  margin: 0;
  /* ← 行側で余白を管理 */
  color: inherit;
}

/* 共通ボタン */
.dt-container.dt-paging .dt-paging-button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: inherit !important;
  text-decoration: none !important;
}

/* 現在ページ */
.dt-container.dt-paging .dt-paging-button.current {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  background: linear-gradient(to bottom,
      rgba(230, 230, 230, 0.055) 0%,
      rgba(0, 0, 0, 0.05) 100%) !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* hover（current は変えない） */
.dt-container.dt-paging .dt-paging-button.current:hover {
  background-color: rgba(0, 0, 0, 0.01) !important;
}

/* active（current） */
.dt-container.dt-paging .dt-paging-button.current:active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
}

/* 無効ボタン */
.dt-container.dt-paging .dt-paging-button.disabled,
.dt-container.dt-paging .dt-paging-button.disabled:hover,
.dt-container.dt-paging .dt-paging-button.disabled:active {
  cursor: default !important;
  color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* hover（通常ボタン） */
.dt-container.dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  color: #fff !important;
  border: 1px solid #111 !important;
  background: linear-gradient(to bottom, rgb(88, 88, 88) 0%, #111 100%) !important;
}

/* active（通常ボタン） */
.dt-container.dt-paging .dt-paging-button:active:not(.disabled):not(.current) {
  background: #111 !important;
  box-shadow: inset 0 0 3px #111 !important;
  color: #fff !important;
}

/* 省略記号（…） */
.dt-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: default;
}

/* 上部コントロール行 */
.dt-top-control {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

/* 左寄せ */
.dt-top-left {
  display: flex;
  align-items: center;
}

/* 表示件数 */
.dt-length-label {
  display: flex;
  align-items: center;
  margin: 0;
}

.dt-length-label select {
  width: auto;
  padding: 4px;
}