/**
 * Front styling that Tailwind cannot reach: the table cells and the chrome
 * DataTables injects (search box, length, info, pagination), plus the mobile
 * stacked layout. Component styling (buttons, sticky bar, thumbnails) lives as
 * Tailwind utilities in the markup.
 */

/* Fallback before the JS relocates the button into the DataTables toolbar. */
.sptable-toolbar {
	margin-bottom: 12px;
}

.sptable-bulk-add.loading {
	opacity: 0.6;
	pointer-events: none;
}

.dataTables_filter .sptable-bulk-add--top {
	margin-left: 12px;
	vertical-align: middle;
}

.sptable-select-col {
	width: 32px;
	text-align: center;
}

.product-thumbnail {
	width: 72px;
}

/* Cells and headers. */
#sptable_datatable th,
#sptable_datatable td {
	padding: 10px 12px;
	vertical-align: middle;
}

#sptable_datatable thead th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #6b7280;
	border-bottom: 1px solid #e5e7eb;
}

#sptable_datatable tbody td {
	border-bottom: 1px solid #f0f0f1;
}

#sptable_datatable tbody tr:hover {
	background: #f9f9fb;
}

/* Stacked card layout on narrow screens, using each cell's data-title. */
@media (max-width: 640px) {
	#sptable_datatable thead {
		display: none;
	}

	#sptable_datatable,
	#sptable_datatable tbody,
	#sptable_datatable tr,
	#sptable_datatable td {
		display: block;
		width: 100%;
	}

	#sptable_datatable tr {
		margin-bottom: 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 6px 8px;
	}

	#sptable_datatable tbody td {
		border: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 8px;
	}

	#sptable_datatable tbody td[data-title]:before {
		content: attr(data-title);
		font-weight: 600;
		color: #6b7280;
	}
}