.debug-table,
.debug-inner-table {
	width: 100%;
	border-collapse: collapse;
	font-family: Arial, sans-serif;
	margin: 20px 0;
	box-shadow: 0 0 10px #ccc;
	table-layout: fixed;
}

.debug-table th,
.debug-table td,
.debug-inner-table th,
.debug-inner-table td {
	border: 1px solid #ccc;
	padding: 8px 12px;
	text-align: left;
	font-size: 14px;
	vertical-align: top;
	word-break: break-word;
	box-sizing: border-box;
}

.debug-table th,
.debug-inner-table th {
	background-color: #f5f5f5;
	font-weight: bold;
}

.debug-header {
	margin: 20px 0 5px;
	font-size: 16px;
	font-weight: bold;
	font-family: Arial, sans-serif;
}

/* Explicit column widths for consistent layout */
.debug-table col.key-col,
.debug-inner-table col.key-col {
	width: 20%;
}

.debug-table col.value-col,
.debug-inner-table col.value-col {
	width: 80%;
}

/* Responsive styles for small screens */
@media screen and (max-width: 600px) {
	.debug-table,
	.debug-inner-table,
	.debug-table thead,
	.debug-inner-table thead,
	.debug-table tbody,
	.debug-inner-table tbody,
	.debug-table th,
	.debug-inner-table th,
	.debug-table td,
	.debug-inner-table td,
	.debug-table tr,
	.debug-inner-table tr {
		display: block;
		width: 100%;
	}

	.debug-table tr,
	.debug-inner-table tr {
		margin-bottom: 12px;
	}

	.debug-table td,
	.debug-inner-table td {
		position: relative;
		padding-left: 12px;
		padding-top: 22px;
		text-align: left;
		box-sizing: border-box;
		white-space: normal;
		word-break: break-word;
		overflow-wrap: break-word;
		min-height: 40px;
		font-size: 14px;
	}

	.debug-table td::before,
	.debug-inner-table td::before {
		content: attr(data-label);
		display: block;
		position: absolute;
		top: 6px;
		left: 12px;
		font-weight: bold;
		color: #555;
		font-size: 13px;
	}

	.debug-table colgroup,
	.debug-inner-table colgroup,
	.debug-table th,
	.debug-inner-table th {
		display: none;
	}
}