@charset "utf-8";
/*
 * responsive_card.css
 * テーブルをスマホ幅でカード化する共通スタイル
 *
 * 使い方:
 *   <table class="table table-responsive-card">
 *     <thead>...</thead>
 *     <tbody>
 *       <tr>
 *         <td data-label="From">xxx</td>
 *         ...
 *       </tr>
 *     </tbody>
 *   </table>
 *
 * - 992px 以上: 通常のテーブル表示（既存挙動を維持）
 * - 992px 未満: 1行=1カードに変形し、各セルに data-label を見出しとして表示
 */

@media (max-width: 991.98px) {
	.table-responsive-card thead {
		display: none;
	}

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

	.table-responsive-card tbody tr {
		margin-bottom: 12px;
		padding: 10px 12px;
		border: 1px solid #dee2e6;
		border-radius: 6px;
		background-color: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	}

	/* table-striped の縞模様をカード化時に無効化 */
	.table-responsive-card.table-striped > tbody > tr:nth-of-type(odd) > td {
		background-color: transparent;
	}

	.table-responsive-card tbody td {
		padding: 6px 0;
		border: none;
		border-bottom: 1px dashed #eee;
		text-align: right;
		position: relative;
		padding-left: 40%;
		min-height: 28px;
		word-break: break-word;
	}

	.table-responsive-card tbody td:last-child {
		border-bottom: none;
	}

	.table-responsive-card tbody td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		top: 6px;
		width: 38%;
		padding-right: 8px;
		font-weight: 600;
		color: #555;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 操作ボタン列はラベル非表示にして全幅で並べる */
	.table-responsive-card tbody td.actions-cell {
		padding-left: 0;
		text-align: center;
		padding-top: 10px;
	}
	.table-responsive-card tbody td.actions-cell::before {
		content: none;
	}
	.table-responsive-card tbody td.actions-cell .btn {
		margin: 2px;
	}
}