/* ── Clickable Status ──────────────────────────────────────────────── */
td.column-order_status .order-status {
	cursor: pointer;
	transition: opacity 0.15s;
}

td.column-order_status .order-status:hover {
	opacity: 0.75;
}

/* ── Status Dropdown ──────────────────────────────────────────────── */
.brikpanel-status-dropdown {
	display: none;
	position: absolute;
	z-index: 99999;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 4px 12px -2px rgba(26, 26, 26, 0.16),
		0 0 0 1px rgba(0, 0, 0, 0.06);
	padding: 0.375rem;
	min-width: 180px;
	max-height: 320px;
	overflow-y: auto;
}

.brikpanel-status-dropdown.open {
	display: block;
	animation: brikpanel-sd-in 0.12s ease-out;
}

@keyframes brikpanel-sd-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.brikpanel-status-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.375rem 0.625rem;
	border: none;
	background: transparent;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 450;
	color: #303030;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
}

.brikpanel-status-dropdown-item:hover {
	background: #f5f5f5;
}

.brikpanel-status-dropdown-item.current {
	background: #f0f0f0;
	font-weight: 600;
}

/* ── Dot indicator per status ─────────────────────────────────────── */
.brikpanel-sdi-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.status-dot-pending        { background: #9e9e9e; }
.status-dot-processing     { background: #73a724; }
.status-dot-on-hold        { background: #f0b849; }
.status-dot-completed      { background: #4a90d9; }
.status-dot-cancelled      { background: #a16207; }
.status-dot-refunded       { background: #9e9e9e; }
.status-dot-failed         { background: #d72c0d; }
.status-dot-draft          { background: #bdbdbd; }
.status-dot-checkout-draft { background: #bdbdbd; }
.status-dot-return-draft   { background: #7c3aed; }
.status-dot-change         { background: #f59e0b; }

/* ── Pending Badge (staged but not saved) ────────────────────────── */
td.column-order_status .order-status.brikpanel-status-pending {
	outline: 1px dashed #8a8a8a;
	outline-offset: 2px;
	position: relative;
}

/* ── Sticky Save Bar ─────────────────────────────────────────────── */
.brikpanel-status-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.625rem 0.625rem 0.625rem 1rem;
	background: #303030;
	color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.32),
		0 0 0 1px rgba(0, 0, 0, 0.06);
	font-size: 0.8125rem;
	font-weight: 450;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: calc(100vw - 2rem);
}

.brikpanel-status-bar.open {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.brikpanel-status-bar-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brikpanel-status-bar-actions {
	display: flex;
	gap: 0.375rem;
	flex-shrink: 0;
}

.brikpanel-status-bar-discard,
.brikpanel-status-bar-save {
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 550;
	border-radius: 0.5rem;
	padding: 0.4375rem 0.875rem;
	border: none;
	cursor: pointer;
	transition: background 0.12s ease;
}

.brikpanel-status-bar-discard {
	background: transparent;
	color: #e3e3e3;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.brikpanel-status-bar-discard:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.brikpanel-status-bar-discard:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px #ffffff;
}

.brikpanel-status-bar-save {
	background: #ffffff;
	color: #303030;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.brikpanel-status-bar-save:hover:not(:disabled) {
	background: #f1f1f1;
}

.brikpanel-status-bar-save:disabled {
	opacity: 0.6;
	cursor: default;
}

.brikpanel-status-bar-save:focus-visible {
	outline: none;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08),
		0 0 0 2px #303030,
		0 0 0 4px #ffffff;
}

/* ── Custom Status Badge Colors ───────────────────────────────────── */
mark.order-status.status-return-draft,
.order-status.status-return-draft {
	background: #ede9fe;
	color: #6d28d9;
}

mark.order-status.status-change,
.order-status.status-change {
	background: #fef3c7;
	color: #92400e;
}