/* Button bar layout restructuring using pure CSS */

/* Target the last row in the listing container (buttonbar row) */
.listing-container > .row:last-child {
	display: flex;
	flex-wrap: wrap;
}

/* Buttonbar column - full width on first row */
.listing-container > .row:last-child > .col-sm-8 {
	flex: 0 0 100%;
	max-width: 100%;
	order: 1;
}

/* Loader column - half width, goes below */
.listing-container > .row:last-child > .col-sm-1 {
	flex: 0 0 50%;
	max-width: 50%;
	order: 2;
	margin-top: 0.5rem;
	text-align: left !important;
}

/* Pagination column - half width, goes below */
.listing-container > .row:last-child > .col-sm-3 {
	flex: 0 0 50%;
	max-width: 50%;
	order: 3;
	margin-top: 0.5rem;
}

/* Buttonbar - use flexbox to separate left and right buttons */
.listing-container .buttonbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	gap: 0.25rem;
}

/* Non-destructive buttons (clear_selection, save, submit, verify) - stay on left */
.listing-container .buttonbar #clear_selection,
.listing-container .buttonbar #save_transition,
.listing-container .buttonbar #submit_transition,
.listing-container .buttonbar #verify_transition {
	order: 1;
}

/* Spacer to push destructive buttons to the right */
.listing-container .buttonbar #save_transition::after,
.listing-container .buttonbar #submit_transition::after,
.listing-container .buttonbar #verify_transition::after {
	content: "";
	flex-grow: 1;
}

/* Destructive buttons (retest, retract, reject) - move to right */
.listing-container .buttonbar #retest_transition,
.listing-container .buttonbar #retract_transition,
.listing-container .buttonbar #reject_transition {
	order: 3;
}

/* Create a spacer element between left and right groups */
.listing-container .buttonbar::before {
	content: "";
	order: 2;
	flex-grow: 1;
}