/* ============================================
   Data Table コンポーネント（BEM: .data-table / .data-table__* / .data-table--*）

   構成: トークン → ラッパー → 横スクロール → ソート/ローディング → 本体 → 行状態
        → 列/リンク → レスポンシブ(MQ)。

   Block: .data-table | Element: .data-table__table, __sort, __cell-content 等 | Modifier: --scrollable, --scroll-x 等
   MQ: 992 / 768 / 576 / 480
   ============================================ */

/* ─── テーブル専用トークン ──────────────────── */
:root {
  --table-scroll-fade: color-mix(in srgb, var(--color-white) 90%, transparent);
  --table-head-note-margin: calc(var(--space-1) / 2);
  --table-data-label-min-w: 8em;
  --table-data-label-basis: 10em;
  --data-table-max-height: min(50rem, 80vh);
  --table-sort-trigger-padding: calc(var(--space-1) * 0.5);
  --table-sort-trigger-radius: var(--radius-sm);
  --table-sort-icon-transition-duration: var(--motion-base);
  --data-table-loading-min-height: 45rem;
  --table-row-selected-bg: var(--color-yellow-100);
  --table-row-accent-bg: var(--color-yellow-100);
  --table-row-accent-hover-bg: var(--color-yellow-200);
}

/* カード表示用ラベル＋ツールチップ行（モバイルのみ表示、768px 以下で .data-table__col--card 内で表示） */
.data-table__card-label-row {
  display: none;
}

/* ─── データ表ラッパー ───────────────────────────────────────────────── */
.data-table {
  margin: var(--space-6) 0;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  contain: layout style;
  content-visibility: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  container-type: inline-size;
  container-name: data-table;
}

.data-table:focus-within {
  contain: layout style paint;
}

.data-table::-webkit-scrollbar,
.data-table--scrollable::-webkit-scrollbar {
  height: var(--space-2);
}
.data-table--scrollable::-webkit-scrollbar {
  width: var(--space-2);
}
.data-table::-webkit-scrollbar-track,
.data-table--scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.data-table::-webkit-scrollbar-thumb,
.data-table--scrollable::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-md);
}
.data-table::-webkit-scrollbar-thumb:hover,
.data-table--scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* ─── 横スクロール（列数が多いテーブル用 .data-table--scroll-x）──────────── */
.data-table--scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table--scroll-x .data-table__table {
  min-width: max-content;
}

/* 縦スクロールと横スクロールを同時に使う場合 */
.data-table--scrollable.data-table--scroll-x {
  overflow-x: auto;
  overflow-y: auto;
}

/* ソート中（二重送信防止・UX + ローディング表示） */
.data-table--sort-busy {
  min-height: var(--data-table-loading-min-height);
}

/* ソート中は全 thをグレー表示 */
.data-table--sort-busy .data-table__table th {
  pointer-events: none;
  opacity: 0.7;
}

.data-table--sort-busy .data-table__table th .data-table__sort:focus-visible,
.data-table--sort-busy .data-table__table th .sortable:focus-visible {
  outline: none;
}

/* ソート中のローディングオーバーレイ（表頭以下・10行分の高さ） */
.data-table__sort-loading {
  position: absolute;
  top: var(--data-table-loading-top, 0);
  left: 0;
  right: 0;
  height: var(--data-table-loading-height, var(--size-thumb-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--color-white) 85%, transparent);
  z-index: var(--z-above);
  pointer-events: none;
}

.data-table__sort-loading-spinner {
  width: var(--size-button-sm);
  height: var(--size-button-sm);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-yellow-600);
  border-radius: var(--radius-full);
  animation: data-table-sort-spin 0.8s linear infinite;
}

.data-table__sort-loading-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@keyframes data-table-sort-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-table__sort-loading-spinner {
    animation: none;
    border-top-color: var(--color-yellow-600);
  }
}

/* 横スクロール時のグラデーション（JS: .is-scrollable-left / .is-scrollable-right） */
.data-table::before,
.data-table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-6);
  pointer-events: none;
  z-index: var(--z-above);
  opacity: 0;
  transition: opacity var(--motion-slow);
}

.data-table.is-scrollable-left::before,
.data-table.scrollable-left::before {
  opacity: 1;
  left: 0;
  right: auto;
  background: linear-gradient(to right, var(--table-scroll-fade), transparent);
}

.data-table.is-scrollable-right::after,
.data-table.scrollable-right::after {
  opacity: 1;
  left: auto;
  right: 0;
  background: linear-gradient(to left, var(--table-scroll-fade), transparent);
}

/* ─── テーブル本体 ───────────────────────────────────────────────────── */
.data-table .data-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-responsive-base);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  table-layout: auto;
  contain: layout style;
}

.data-table .data-table__table thead {
  background: var(--color-bg-subtle);
}

.data-table .data-table__table th,
.data-table .data-table__table td {
  padding: var(--space-4) clamp(var(--space-2), 4vw, var(--space-8));
  vertical-align: middle;
  text-align: left;
  border: 1px solid var(--color-border);
}

.data-table .data-table__table th {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-responsive-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
  background: var(--color-bg-subtle);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.data-table .data-table__table th:last-child,
.data-table .data-table__table td:last-child {
  width: auto;
  min-width: 0;
}

.data-table .data-table__table td {
  color: var(--color-text-secondary);
  background: var(--color-bg);
  min-width: 0;
}

/* 最終列のみ改行可、それ以外は改行しない */
.data-table .data-table__table tbody td:not(:last-child) {
  white-space: nowrap;
}

.data-table .data-table__table tbody td:last-child {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 最終列を残り幅で占有: .data-table--last-col-fill */
.data-table--last-col-fill .data-table__table th:last-child,
.data-table--last-col-fill .data-table__table td:last-child {
  width: 100%;
}

.data-table--last-col-fill .data-table__table td:last-child {
  white-space: normal;
  min-width: 0;
}

/* 全ての列で改行可・列幅は自動調整（.data-table--wrap 用） */
.data-table--wrap .data-table__table {
  table-layout: auto;
}

.data-table--wrap .data-table__table th,
.data-table--wrap .data-table__table td {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* ─── 高さ制限 + 固定ヘッダ（.data-table--scrollable）───────────────────── */
.data-table--scrollable {
  max-height: var(--data-table-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  padding-top: 0;
}

/* 検索結果3ページ専用: 戻るボタンまで同一画面で見えるよう高さを抑える */
.data-table--scrollable.data-table--search-result-compact {
  max-height: clamp(16rem, 42vh, 28rem);
}


.data-table--scrollable .data-table__table {
  border: none;
  margin-top: 0;
}

/* ヘッダーを1px上に配置し、影で上部の隙間を補完 */
.data-table--scrollable .data-table__table thead {
  position: sticky;
  top: -1px;
  z-index: var(--z-sticky);
  isolation: isolate;
  background: var(--color-bg-subtle);
  box-shadow:
    0 -1px 0 var(--color-bg-subtle),
    0 1px 0 var(--color-bg-subtle);
}

.data-table--scrollable .data-table__table thead th {
  position: relative;
  z-index: var(--z-above);
  background: var(--color-bg-subtle);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

.data-table .data-table__table tbody td:first-child {
  font-weight: var(--font-weight-regular);
}

/* ─── 行状態: 通常・ホバー・選択・フォーカス ─────────────────────────── */
.data-table .data-table__table tbody tr {
  background: var(--color-bg);
  transition:
    background-color var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast);
}

.data-table .data-table__table tbody tr:hover {
  background-color: var(--color-bg-hover);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.data-table .data-table__table tbody tr:hover td {
  background-color: var(--color-bg-hover);
}

.data-table .data-table__table tbody tr:active,
.data-table .data-table__table tbody tr:active td {
  background-color: var(--color-border-subtle);
}

/* 選択行（.data-table__row-selected / aria-selected="true"） */
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]),
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"])
  td,
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]):hover,
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]):hover
  td {
  background-color: var(--table-row-selected-bg);
}
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]) {
  box-shadow: inset var(--space-1) 0 0 var(--color-brand);
}
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]):hover {
  box-shadow:
    inset var(--space-1) 0 0 var(--color-brand),
    inset 0 0 0 1px var(--color-border);
}

.data-table .data-table__table tbody tr:focus-within {
  outline: var(--focus-width) solid var(--color-brand);
  outline-offset: calc(var(--focus-offset) * -1);
}
.data-table .data-table__table tbody tr:focus-within td {
  background-color: var(--color-bg-hover);
}
.data-table
  .data-table__table
  tbody
  tr:is(.data-table__row-selected, [aria-selected="true"]):focus-within
  td {
  background-color: var(--table-row-selected-bg);
}

/* ─── 列モディファイア・ヘッダ脚注・アクセント行 ─────────────────────── */
.data-table .data-table__table th,
.data-table .data-table__table td {
  text-align: left;
}

.data-table .data-table__table th .data-table__head-note {
  display: inline;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  vertical-align: super;
  line-height: var(--leading-100);
  margin-left: var(--table-head-note-margin);
}

/* ─── ソート可能列: トリガー全体をクリック領域に・ホバー/フォーカス・アイコン状態 ─ */
.data-table .data-table__table th .data-table__sort,
.data-table .data-table__table th .sortable {
  display: inline-flex;
  align-items: center;
  gap: var(--table-sort-trigger-padding);
  padding: var(--table-sort-trigger-padding);
  margin: calc(var(--table-sort-trigger-padding) * -1);
  border-radius: var(--table-sort-trigger-radius);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--table-sort-icon-transition-duration) ease,
    color var(--table-sort-icon-transition-duration) ease;
}

.data-table .data-table__table th .data-table__sort:hover,
.data-table .data-table__table th .sortable:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text);
}

.data-table .data-table__table th .data-table__sort:focus-visible,
.data-table .data-table__table th .sortable:focus-visible {
  outline: var(--focus-width) solid var(--color-brand);
  outline-offset: var(--focus-offset);
}

.data-table .data-table__table th .data-table__sort .sort-icon,
.data-table .data-table__table th .sortable .sort-icon {
  font-size: 1.125em;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  transition:
    color var(--table-sort-icon-transition-duration) ease,
    transform var(--table-sort-icon-transition-duration) ease;
}

@media (prefers-reduced-motion: reduce) {
  .data-table .data-table__table th .data-table__sort .sort-icon,
  .data-table .data-table__table th .sortable .sort-icon {
    transition: none;
  }
}

/* ソート中: アイコンをより濃い黄色で強調 */
.data-table
  .data-table__table
  th
  .data-table__sort
  .sort-icon[data-order="asc"],
.data-table
  .data-table__table
  th
  .data-table__sort
  .sort-icon[data-order="desc"],
.data-table .data-table__table th .sortable .sort-icon[data-order="asc"],
.data-table .data-table__table th .sortable .sort-icon[data-order="desc"] {
  color: var(--color-yellow-600);
}

.data-table .data-table__table th[aria-sort="ascending"],
.data-table .data-table__table th[aria-sort="descending"] {
  background-color: var(--color-bg-subtle);
}

.data-table .data-table__table th[aria-sort="ascending"] .data-table__sort,
.data-table .data-table__table th[aria-sort="descending"] .data-table__sort,
.data-table .data-table__table th[aria-sort="ascending"] .sortable,
.data-table .data-table__table th[aria-sort="descending"] .sortable {
  font-weight: var(--font-weight-bold);
}

.data-table .data-table__table tbody tr.data-table__row-accent,
.data-table .data-table__table tbody tr.data-table__row-accent td {
  background-color: var(--table-row-accent-bg);
}
.data-table .data-table__table tbody tr.data-table__row-accent td {
  font-weight: var(--font-weight-bold);
}
.data-table .data-table__table tbody tr.data-table__row-accent td:first-child {
  font-weight: var(--font-weight-regular);
}
.data-table .data-table__table tbody tr.data-table__row-accent:hover,
.data-table .data-table__table tbody tr.data-table__row-accent:hover td {
  background-color: var(--table-row-accent-hover-bg);
}

/* ─── テーブル内リンク・強調 ─────────────────────────────────────────── */
.data-table .data-table__table a,
.data-table .data-table__table .link,
.data-table .data-table__table .link-external {
  color: var(--color-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: var(--space-1) !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  display: inline;
  cursor: pointer;
  transition:
    color var(--motion-base),
    text-decoration-color var(--motion-base);
  word-break: break-all;
}

.data-table .data-table__table a:hover,
.data-table .data-table__table .link:hover,
.data-table .data-table__table .link-external:hover {
  color: var(--color-link-hover) !important;
  text-decoration-color: var(--color-link-hover) !important;
}

.data-table .data-table__table a:visited,
.data-table .data-table__table .link:visited,
.data-table .data-table__table .link-external:visited {
  color: var(--color-link-visited) !important;
}

.data-table .data-table__table a:focus-visible,
.data-table .data-table__table .link:focus-visible,
.data-table .data-table__table .link-external:focus-visible {
  outline: var(--focus-width) solid var(--color-brand);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.data-table .data-table__table td .text-red {
  color: var(--color-error);
  font-weight: var(--font-weight-regular);
  display: inline;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ========== レスポンシブ（--bp-lg / --bp-md / --bp-sm / --bp-xs）========== */

/* 768px 以下: テーブルをカード形式 (Container Query) */
@container data-table (max-width: 900px) {
  .data-table {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  /* カード表示時は横スクロールを無効化し、テーブル幅を親に合わせる */
  .data-table--scroll-x .data-table__table {
    min-width: 0;
  }

  .data-table .data-table__table,
  .data-table--scrollable {
    border: none;
  }

  .data-table .data-table__table {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: var(--text-responsive-xs);
    border-bottom: none;
  }

  .data-table .data-table__table thead {
    display: none;
  }

  .data-table .data-table__table tbody {
    display: block;
  }

  .data-table .data-table__table tbody tr {
    display: block;
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .data-table .data-table__table tbody tr:last-child {
    margin-bottom: 0;
  }

  .data-table .data-table__table tbody td {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-responsive-xs);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
  }

  .data-table .data-table__table tbody td:last-child {
    border-bottom: none;
  }

  .data-table .data-table__table tbody td > *,
  .data-table .data-table__table tbody td * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .data-table .data-table__table tbody td::before {
    content: attr(data-label);
    flex: 0 0 var(--table-data-label-basis);
    min-width: var(--table-data-label-min-w);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* モバイルカード用：セル内容のラッパー（改行を有効にするため） */
  .data-table .data-table__table tbody td .data-table__cell-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  /* 左にラベル＋ツールチップ、右にデータ（他列と同じ横並び） */
  .data-table .data-table__table tbody td.data-table__col--card::before {
    content: none;
  }
  .data-table .data-table__table tbody td.data-table__col--card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .data-table
    .data-table__table
    tbody
    td.data-table__col--card
    .data-table__card-label-row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space-1) * 0.5);
    flex: 0 0 var(--table-data-label-basis);
    min-width: var(--table-data-label-min-w);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
  }
  /* カード列内のツールチップトリガーも上揃え */
  .data-table
    .data-table__table
    tbody
    td.data-table__col--card
    .data-table__card-label-row
    .tooltip__trigger {
    align-self: flex-start;
    align-items: flex-start;
  }
  .data-table
    .data-table__table
    tbody
    td.data-table__col--card
    .data-table__cell-value {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .data-table .data-table__table tbody td .link,
  .data-table .data-table__table tbody td a {
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .data-table .data-table__table th,
  .data-table .data-table__table td {
    padding: var(--space-2) clamp(var(--space-unit), 2vw, var(--space-4));
    font-size: var(--text-responsive-xs);
  }
}