/**
 * Terminatop Tables — Consolidated table styling
 *
 * 1. Base: .table-responsive overflow, .styled-table styling
 * 2. Oxygen compat: word-break on .ct-span
 * 3. Mobile card layout: thead hidden, td as block with data-label
 */

/* ── Base ── */

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1em 0;
}

.styled-table,
.travel-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	min-width: 400px;
}

.styled-table thead tr,
.travel-table thead tr {
	background-color: #6b7280;
	color: #ffffff;
	text-align: left;
}

.styled-table th,
.styled-table td,
.travel-table th,
.travel-table td {
	padding: 12px 15px;
	border-bottom: 1px solid #dddddd;
	word-break: break-word;
}

.styled-table tbody tr:nth-of-type(even),
.travel-table tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type,
.travel-table tbody tr:last-of-type {
	border-bottom: 2px solid #6b7280;
}

/* ── Oxygen Compatibility ── */

.ct-span.oxy-stock-content-styles table {
	word-break: break-word;
}

.ct-span.oxy-stock-content-styles td,
.ct-span.oxy-stock-content-styles th {
	word-break: break-word;
}

/* ── Mobile overflow guard ──
 * Prevents any element inside the stock content wrapper from exceeding
 * the viewport width on mobile, regardless of intrinsic content width.
 */
@media (max-width: 768px) {
	.ct-span.oxy-stock-content-styles {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.ct-span.oxy-stock-content-styles > *,
	.ct-span.oxy-stock-content-styles p,
	.ct-span.oxy-stock-content-styles h2,
	.ct-span.oxy-stock-content-styles h3,
	.ct-span.oxy-stock-content-styles ul,
	.ct-span.oxy-stock-content-styles li,
	.ct-span.oxy-stock-content-styles .table-responsive {
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.ct-span.oxy-stock-content-styles .table-responsive {
		overflow-x: auto;
	}
}

/* ── Mobile Card Layout ── */

@media (max-width: 768px) {
	.styled-table,
	.travel-table {
		min-width: unset;
	}

	.styled-table thead,
	.travel-table thead {
		display: none;
	}

	.styled-table tbody tr,
	.travel-table tbody tr {
		display: block;
		margin-bottom: 16px;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.styled-table tbody tr:nth-of-type(even),
	.travel-table tbody tr:nth-of-type(even) {
		background-color: transparent;
	}

	.styled-table tbody td,
	.travel-table tbody td {
		display: block;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
		text-align: right;
	}

	.styled-table tbody td:last-child,
	.travel-table tbody td:last-child {
		border-bottom: none;
	}

	.styled-table tbody td::before,
	.travel-table tbody td::before {
		content: attr(data-label);
		float: left;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.85em;
		color: #555;
	}
}