/**
 * 狭い画面での表を段積みカードに切り替える。
 *
 * .table-responsive 内の表に responsive-tables.js が .table-stack を付与し、
 * 各セルにはヘッダー名を data-label として設定する。
 * JS が動かない場合は従来どおり横スクロールのままなので、表示が壊れることはない。
 */

@media (max-width: 767.98px) {

  /* 段積み時は横スクロールを止める */
  .table-responsive:has(> .table-stack),
  .table-responsive:has(> form > .table-stack) {
    overflow-x: visible;
  }

  table.table-stack,
  table.table-stack tbody,
  table.table-stack tr,
  table.table-stack td {
    display: block;
    width: 100%;
  }

  table.table-stack thead,
  table.table-stack tr.table-stack-head {
    display: none;
  }

  table.table-stack tbody tr {
    margin-bottom: .75rem;
    padding: .25rem .85rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: .5rem;
    background: transparent;
  }

  /* 縞模様は段積みでは邪魔になるので解除 */
  table.table-stack.table-striped tbody tr:nth-of-type(odd) > * {
    background-color: transparent;
    box-shadow: none;
  }

  table.table-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    border: 0;
    border-bottom: 1px solid rgba(128, 128, 128, .15);
    text-align: right;
    word-break: break-word;
  }

  table.table-stack tbody tr td:last-child {
    border-bottom: 0;
  }

  /* 見出しを各セルの左側に出す */
  table.table-stack tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-weight: 600;
    opacity: .7;
  }

  /* 見出しが無いセル（操作ボタンなど）は幅いっぱいに */
  table.table-stack tbody td:not([data-label]) {
    justify-content: flex-end;
  }

  /* 「該当なし」など colspan のある行はカード化しない */
  table.table-stack tbody tr.table-stack-skip {
    border: 0;
    padding: 0;
  }

  table.table-stack tbody tr.table-stack-skip td {
    display: block;
    text-align: center;
    border-bottom: 0;
  }

  table.table-stack tbody tr.table-stack-skip td::before {
    content: none;
  }
}