/* Base table container */
.table-container {
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
	max-width: 1400px;
	margin: 0 auto;
	/* padding: 20px; */
	overflow-x: auto;
}

/* Row styling */
.table-row {
	display: flex;
	width: 100%;
}

/* Cell styling */
.table-cell {
	padding: 10px;
	/* border-radius: 4px; */
	box-sizing: border-box;
	text-align: left;
	flex: 1 0 calc(100% / var(--col-count, 9));
	min-width: 90px; /* Minimum readable width */
	border: 1px solid #ddd;
}

/* Header row styling */
.table-row:first-child .table-cell {
	font-weight: bold;
	background-color: #f2f2f2;
}

/* Generic column order (optional, for control) */
.col-1 { order: 1; }
.col-2 { order: 2; }
.col-3 { order: 3; }
.col-4 { order: 4; }
.col-5 { order: 5; }
.col-6 { order: 6; }
.col-7 { order: 7; }
.col-8 { order: 8; }
.col-9 { order: 9; }

/* Optional custom width overrides (apply only where needed) */
.col-wide { flex: 2 0 calc(100% / var(--col-count, 9) * 1.5); min-width: 120px; }
.col-narrow { flex: 0.8 0 calc(100% / var(--col-count, 9) * 0.8); min-width: 75px; max-width: 200px;}
.cell-center {
	text-align: center;
}
.fixed-last-col {
	/* display: flex; */
	/* flex: 0 0 20%; */
	/* min-width: 150px; */
}

/* Responsive hiding with conditional logic */
@media (max-width: 1000px) {
	.table-row:not(:has(.fixed-last-col)) .table-cell:last-child,
	.table-row:has(.fixed-last-col) .table-cell:nth-last-child(2) {
		display: none;
	}
	.table-cell {
		flex: 1 0 calc(100% / (var(--col-count, 9) - 1));
		min-width: 80px;
	}
	.col-wide { flex: 2 0 calc(100% / (var(--col-count, 9) - 1) * 1.5); min-width: 100px; }
	.col-narrow { flex: 0.8 0 calc(100% / (var(--col-count, 9) - 1) * 0.8); min-width: 60px; }
}

@media (max-width: 800px) {
	.table-row:not(:has(.fixed-last-col)) .table-cell:nth-last-child(2),
	.table-row:has(.fixed-last-col) .table-cell:nth-last-child(3) {
		display: none;
	}
	.table-cell {
		flex: 1 0 calc(100% / (var(--col-count, 9) - 2));
		min-width: 70px;
	}
	.col-wide { flex: 2 0 calc(100% / (var(--col-count, 9) - 2) * 1.5); min-width: 90px; }
	.col-narrow { flex: 0.8 0 calc(100% / (var(--col-count, 9) - 2) * 0.8); min-width: 50px; }
}

@media (max-width: 600px) {
	.table-row:not(:has(.fixed-last-col)) .table-cell:nth-last-child(3),
	.table-row:has(.fixed-last-col) .table-cell:nth-last-child(4) {
		display: none;
	}
	.table-cell {
		flex: 1 0 calc(100% / (var(--col-count, 9) - 3));
		min-width: 60px;
	}
	.col-wide { flex: 2 0 calc(100% / (var(--col-count, 9) - 3) * 1.5); min-width: 80px; }
	.col-narrow { flex: 0.8 0 calc(100% / (var(--col-count, 9) - 3) * 0.8); min-width: 40px; }
}