/**
 * Sort screen.
 *
 * One list of soft rows inside the admin's own palette. Nothing here introduces a colour the
 * admin does not already use.
 */

.adminkeep-order-screen {
	max-width: 960px;
}

.adminkeep-order-lead {
	color: #646970;
	font-size: 13px;
	margin: 4px 0 16px;
}

.adminkeep-order-back {
	margin-left: 8px;
	text-decoration: none;
}

/* The list. A table for accessibility and for jQuery UI sortable, drawn as tiles. The widths
   live on the <colgroup> so a fixed layout never takes them from the first row — mid-drag that
   row is the empty placeholder, and every column collapsed to a third. */
.adminkeep-order-table {
	border-collapse: separate;
	border-spacing: 0 6px;
	table-layout: fixed;
	width: 100%;
	margin-top: -6px;
}

.adminkeep-order-col-drag {
	width: 44px;
}

.adminkeep-order-col-pos {
	width: 64px;
}

.adminkeep-order-table td {
	background: #fff;
	border-top: 1px solid #e2e6ea;
	border-bottom: 1px solid #e2e6ea;
	box-sizing: border-box;
	height: 52px;
	padding: 0 8px;
	vertical-align: middle;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.adminkeep-order-table td:first-child {
	border-left: 1px solid #e2e6ea;
	border-radius: 8px 0 0 8px;
}

.adminkeep-order-table td:last-child {
	border-right: 1px solid #e2e6ea;
	border-radius: 0 8px 8px 0;
}

.adminkeep-order-table tr:hover > td {
	border-color: #c3c4c7;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

/* Handle. */
.adminkeep-order-table .adminkeep-order-drag {
	text-align: center;
}

.adminkeep-order-handle {
	color: #c3c4c7;
	cursor: grab;
	display: inline-block;
	line-height: 0;
	padding: 8px 6px;
	transition: color 0.15s;
}

.adminkeep-order-table tr:hover .adminkeep-order-handle {
	color: #50575e;
}

.adminkeep-order-handle:active,
tr.ui-sortable-helper .adminkeep-order-handle {
	cursor: grabbing;
}

/* Position: large, light, secondary. First cell of the row, right-aligned within its narrow
   column so multi-digit numbers keep lining up. */
.adminkeep-order-table .adminkeep-order-cell {
	padding-left: 16px;
	text-align: right;
}

.adminkeep-order-number {
	color: #8c8f94;
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Title: primary. */
.adminkeep-order-title {
	color: #1d2327;
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.adminkeep-order-title a {
	color: inherit;
	text-decoration: none;
}

.adminkeep-order-title a:hover,
.adminkeep-order-title a:focus {
	color: #2271b1;
}

.adminkeep-order-status {
	background: #f0f0f1;
	border-radius: 999px;
	color: #50575e;
	display: inline-block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	margin-left: 6px;
	padding: 1px 7px;
	vertical-align: 1px;
}

.adminkeep-order-id {
	color: #a7aaad;
	font-size: 12px;
	font-weight: 400;
	margin-left: 8px;
}

/* Dragging: the helper lifts, the placeholder holds the slot. */
tr.ui-sortable-helper > td {
	background: #fff;
	border-color: #c3c4c7;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

tr.ui-sortable-helper {
	transform: scale( 1.01 );
}

.adminkeep-order-placeholder > td {
	background: #f6f9fc;
	border: 1px dashed rgba( 34, 113, 177, 0.4 );
	border-right-width: 0;
	border-left-width: 0;
	visibility: visible;
}

.adminkeep-order-placeholder > td:first-child {
	border-left-width: 1px;
}

.adminkeep-order-placeholder > td:last-child {
	border-right-width: 1px;
}

/* Settle: the dropped row glows briefly so the eye lands where it went. */
@keyframes adminkeep-order-settle {
	from {
		background-color: #eef5fb;
	}

	to {
		background-color: #fff;
	}
}

tr.adminkeep-order-settled > td {
	animation: adminkeep-order-settle 0.6s ease-out;
}

/* Action bar: Save left, pages right; sticks to the bottom when the list is tall. */
.adminkeep-order-actions {
	align-items: center;
	backdrop-filter: blur( 4px );
	background: rgba( 240, 240, 241, 0.92 );
	bottom: 0;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 12px 0;
	position: sticky;
	z-index: 2;
}

.adminkeep-order-actions .tablenav,
.adminkeep-order-actions .tablenav-pages {
	float: none;
	height: auto;
	margin: 0;
	padding: 0;
}

.adminkeep-order-submit {
	align-items: center;
	display: flex;
	gap: 10px;
}

/* Unsaved changes. No notice, no nag — a dot beside the button carries it. It sits on the
   wrapper, not the button: submit_button() renders an <input>, a replaced element on which
   ::before never renders. */
.adminkeep-order-dirty .adminkeep-order-submit::before {
	animation: adminkeep-order-pulse 1.6s ease-in-out infinite;
	background: #2271b1;
	border-radius: 50%;
	content: "";
	height: 6px;
	width: 6px;
}

@keyframes adminkeep-order-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.adminkeep-order-table td,
	.adminkeep-order-handle {
		transition: none;
	}

	tr.adminkeep-order-settled > td,
	.adminkeep-order-dirty .adminkeep-order-submit::before {
		animation: none;
	}

	tr.ui-sortable-helper {
		transform: none;
	}
}