/* Table — テーブルコンポーネント（Figma Table 仕様準拠） */
.ui-table {
  @apply w-full border-collapse;

  thead {
    @apply bg-gray-50;
  }

  th {
    @apply px-3 py-2 text-xs font-semibold text-gray-600 text-left whitespace-nowrap;
  }

  tbody tr {
    @apply border-t border-gray-200;
  }

  /* 展開行は常に表示しレイアウトに参加するため、ボーダーを打ち消す */
  tbody tr.ui-table-expand {
    border: none;
  }

  td {
    @apply px-3 py-2.5 text-sm text-gray-900;
  }
}

/* セルタイプ修飾 — th/td どちらに付けても右寄せ・幅 80px などの修飾が効くよう、
   .ui-table 配下にネストして specificity を th/td デフォルト (.ui-table th/td) より高くする */
.ui-table .ui-table-cell--number {
  @apply text-right;
}

.ui-table-cell--checkbox {
  @apply w-10;
}

.ui-table-cell--empty {
  @apply text-gray-400;
}

.ui-table-cell--link {
  @apply text-indigo-500 hover:underline;
}

/* キャプションセル（メインテキスト + サブテキスト） */
.ui-table-cell-caption__sub {
  @apply text-xs text-gray-400 leading-4;
}

/* 開閉行 — CSS-only（checkbox + :has + grid アニメーション） */

.ui-table-expand > td {
  @apply p-0;
}

/* grid ラッパーで高さアニメーション */
.ui-table-expand__grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}

.ui-table-expand__grid > .ui-table-expand__inner {
  @apply overflow-hidden;
}

tr:has(.ui-table-expand-toggle :checked) + tr.ui-table-expand .ui-table-expand__grid {
  grid-template-rows: 1fr;
}

.ui-table-expand__content {
  @apply bg-gray-50 pl-18 pr-7 py-3;

  table {
    @apply w-full;

    tr {
      @apply border-0;
    }

    th {
      @apply px-3 py-2 text-xs font-semibold text-gray-600 text-left;
    }

    td {
      @apply px-3 py-2.5 text-sm text-gray-900;
    }
  }
}

/* 開閉トグルボタン（label + hidden checkbox） */
.ui-table-expand-toggle {
  @apply inline-flex items-center justify-center cursor-pointer text-gray-400;

  input {
    @apply hidden;
  }

  .icon-chevron-right {
    transition: transform 0.2s ease-out;
  }

  .icon-chevron-down {
    @apply hidden;
  }

  &:has(:checked) {
    .icon-chevron-right {
      transform: rotate(90deg);
    }
    .icon-chevron-down {
      @apply hidden;
    }
  }
}

.ui-table-expand-toggle:hover {
  @apply text-gray-600;
}

/* 一覧空状態 — CSS only で表示切り替え
   .ui-table-list 配下の `<tbody>` に `<tr>` が無いとき、空状態を表示してページネーションを隠す。
   `tbody:empty` は ERB 改行で生じる空白テキストノードに弱いので、`:has(tr)` で判定する。 */
.ui-table-list [data-list-empty-state] {
  display: none;
}

.ui-table-list:not(:has(tbody tr)) [data-list-empty-state] {
  display: block;
}

.ui-table-list:not(:has(tbody tr)) [data-list-pagination] {
  display: none;
}