/**
 * OrderCarry admin styles.
 *
 * Design intent: this screen must look like it shipped with WooCommerce, not
 * like a SaaS product embedded in an iframe. So the palette is WordPress's own
 * (#2271b1 blue, #00a32a green, #b32d2e red, the #f6f7f7/#dcdcde greys), the
 * type is the admin's own stack, and there are no gradients, no custom fonts
 * and no decoration. What makes it feel finished instead of plain is the
 * discipline underneath: one spacing scale, one radius, one focus ring, and a
 * deliberate order of visual weight -- switch, then title, then status, then
 * fields, then actions.
 *
 * It also has to survive all eight WordPress admin colour schemes and whatever
 * a host's theme does to the dashboard, which is why colours are literal
 * rather than inherited.
 *
 * @package Ordsync
 */

.ordsync-wrap {
	/* Palette — WordPress core values, named so they stay consistent. */
	--ord-blue: #2271b1;
	--ord-blue-dark: #135e96;
	--ord-blue-bg: #f0f6fc;
	--ord-green: #00a32a;
	--ord-green-dark: #007017;
	--ord-green-bg: #edfaef;
	--ord-red: #b32d2e;
	--ord-red-dark: #8a2424;
	--ord-red-bg: #fcf0f1;
	/* "Retrying" is neither success nor failure — it needs its own colour,
	   or a temporary 503 reads as a permanent error. */
	--ord-amber: #dba617;
	--ord-amber-dark: #8a6116;
	--ord-amber-bg: #fcf9e8;
	--ord-text: #1d2327;
	--ord-muted: #646970;
	--ord-line: #dcdcde;
	--ord-line-strong: #c3c4c7;
	--ord-hairline: #f0f0f1;
	--ord-soft: #f6f7f7;
	--ord-tint: #fbfbfc;

	/* One 4px spacing scale. Every gap below is a multiple of it. */
	--ord-s1: 4px;
	--ord-s2: 8px;
	--ord-s3: 12px;
	--ord-s4: 16px;
	--ord-s5: 20px;
	--ord-s6: 24px;

	--ord-radius: 4px;
	--ord-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	--ord-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

	max-width: 920px;
}

/* ---- Page header ------------------------------------------------------- */

.ordsync-tagline {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ord-muted);
	margin: 0 0 var(--ord-s3);
}

.ordsync-intro {
	margin: var(--ord-s5) 0 var(--ord-s4);
	font-size: 13px;
	line-height: 1.6;
	max-width: 700px;
}

/* ---- Generic card (Logs tab) ------------------------------------------- */

.ordsync-card {
	background: #fff;
	border: 1px solid var(--ord-line-strong);
	border-top: none;
	border-radius: 0 0 var(--ord-radius) var(--ord-radius);
	padding: var(--ord-s2) var(--ord-s6) var(--ord-s6);
	box-shadow: var(--ord-shadow);
}

.ordsync-card h2 {
	margin-top: var(--ord-s5);
}

.ordsync-steps {
	margin: 0 0 var(--ord-s4) var(--ord-s5);
	line-height: 1.9;
}

.ordsync-steps li {
	margin-bottom: var(--ord-s1);
}

/* ---- Stacked fields ---------------------------------------------------- */

/*
 * Replaces WordPress's two-column .form-table. The label-on-the-left layout
 * is what makes a settings screen read as a developer tool; stacking puts
 * the label directly above the thing it names.
 */
.ordsync-field {
	margin: 0 0 var(--ord-s5);
}

.ordsync-field > label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ord-text);
	margin-bottom: 6px;
}

.ordsync-field input[type="text"],
.ordsync-field input[type="url"],
.ordsync-field textarea {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
}

.ordsync-field select {
	max-width: 100%;
}

/* Apps Script URLs run to ~110 characters, so the field has to be wide. */
.ordsync-wrap .ordsync-field input.ordsync-url {
	font-size: 12px;
	font-family: var(--ord-mono);
}

/*
 * Help text sits close to its field, in the muted tone, so it reads as
 * support rather than as another instruction competing for attention.
 */
.ordsync-field .description {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ord-muted);
	max-width: 640px;
}

/* ---- Destination cards ------------------------------------------------- */

.ordsync-slot {
	border: 1px solid var(--ord-line-strong);
	border-left: 3px solid var(--ord-green);
	border-radius: var(--ord-radius);
	margin: 0 0 var(--ord-s5);
	background: #fff;
	box-shadow: var(--ord-shadow);
}

/*
 * A disabled destination stays fully readable -- greying the fields out
 * would hide the very settings someone came to check. Only the accent and
 * the switch report the state.
 */
.ordsync-slot.is-off {
	border-left-color: var(--ord-line-strong);
}

/* Shows which card you are working in without moving anything. */
.ordsync-slot:focus-within {
	border-color: var(--ord-blue);
}

.ordsync-slot-head {
	display: flex;
	align-items: center;
	gap: var(--ord-s3);
	flex-wrap: wrap;
	padding: var(--ord-s3) var(--ord-s5);
	border-bottom: 1px solid var(--ord-hairline);
	background: var(--ord-tint);
	border-radius: var(--ord-radius) var(--ord-radius) 0 0;
}

/*
 * The name is the card's heading and is edited in place: borderless until
 * you touch it, so it reads as a title rather than as one more empty field
 * demanding to be filled in.
 *
 * Qualified with .ordsync-wrap input on purpose. wp-admin styles the plain
 * input[type="text"] selector, which outranks a bare class -- without the
 * extra weight the title renders as an ordinary bordered box and stops
 * reading as a heading. Found by looking at it, not by reading the CSS.
 */
.ordsync-wrap input.ordsync-slot-title {
	flex: 1 1 180px;
	min-width: 140px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ord-text);
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	padding: var(--ord-s1) var(--ord-s2);
	margin: 0;
	border-radius: var(--ord-radius);
	transition: background .12s ease-in-out, border-color .12s ease-in-out;
}

.ordsync-wrap input.ordsync-slot-title::placeholder {
	color: var(--ord-muted);
	opacity: 1;
}

.ordsync-wrap input.ordsync-slot-title:hover {
	border-color: var(--ord-line);
	background: #fff;
}

.ordsync-wrap input.ordsync-slot-title:focus {
	border-color: var(--ord-blue);
	background: #fff;
	box-shadow: 0 0 0 1px var(--ord-blue);
	outline: none;
}

.ordsync-slot-body {
	padding: var(--ord-s5) var(--ord-s5) var(--ord-s1);
}

.ordsync-slot-foot {
	display: flex;
	align-items: center;
	gap: var(--ord-s3);
	flex-wrap: wrap;
	padding: var(--ord-s3) var(--ord-s5);
	border-top: 1px solid var(--ord-hairline);
	background: var(--ord-tint);
}

.ordsync-foot-spacer {
	flex: 1 1 auto;
}

/* ---- Status chip ------------------------------------------------------- */

.ordsync-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	padding: 2px 10px 2px 8px;
	border-radius: 11px;
	border: 1px solid transparent;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * Dashicons rather than a coloured dot: colour alone fails for colour-blind
 * users and vanishes in forced-colours mode, so the shape carries the meaning
 * and the colour merely reinforces it. The words do the rest.
 */
.ordsync-chip::before {
	font-family: dashicons;
	font-size: 14px;
	line-height: 1;
	width: 14px;
	height: 14px;
	speak: never;
	-webkit-font-smoothing: antialiased;
}

.ordsync-chip.is-ok {
	background: var(--ord-green-bg);
	border-color: var(--ord-green);
	color: var(--ord-green-dark);
}

.ordsync-chip.is-ok::before {
	content: "\f147"; /* yes */
}

.ordsync-chip.is-error {
	background: var(--ord-red-bg);
	border-color: var(--ord-red);
	color: var(--ord-red-dark);
	cursor: help;
}

.ordsync-chip.is-error::before {
	content: "\f534"; /* warning */
}

/*
 * A passed test gets a tick like a real send, but in blue: the shape says
 * "this worked", the colour says "this is not the same as orders arriving".
 */
.ordsync-chip.is-test {
	background: var(--ord-blue-bg);
	border-color: var(--ord-blue);
	color: var(--ord-blue-dark);
}

.ordsync-chip.is-test::before {
	content: "\f147"; /* yes */
}

.ordsync-chip.is-idle {
	background: var(--ord-soft);
	border-color: var(--ord-line);
	color: var(--ord-muted);
}

.ordsync-chip.is-idle::before {
	content: "\f469"; /* clock/minus */
}

/* ---- Enable switch ----------------------------------------------------- */

.ordsync-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--ord-s2);
	cursor: pointer;
	flex: 0 0 auto;
	position: relative;
}

/*
 * The real checkbox stays in the DOM and keeps its name, so saving is
 * unchanged and keyboard focus still works -- it is only visually replaced.
 */
.ordsync-switch input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.ordsync-switch-track {
	position: relative;
	display: block;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: #a7aaad;
	transition: background .15s ease-in-out;
}

.ordsync-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transition: transform .15s ease-in-out;
}

.ordsync-switch input:checked + .ordsync-switch-track {
	background: var(--ord-green);
}

.ordsync-switch input:checked + .ordsync-switch-track::after {
	transform: translateX(20px);
}

.ordsync-switch input:focus-visible + .ordsync-switch-track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ord-blue);
}

.ordsync-switch-text {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ord-muted);
	min-width: 26px;
}

.ordsync-switch input:checked ~ .ordsync-switch-text {
	color: var(--ord-green-dark);
}

/* ---- Disclosures ------------------------------------------------------- */

.ordsync-disclosure {
	margin: 0 0 var(--ord-s4);
}

/*
 * Setting display:flex on a <summary> removes the native disclosure triangle
 * in Chrome and Safari, which left these rows looking like plain bold text
 * with nothing to say they could be clicked. The marker is now removed
 * deliberately on every engine and replaced with our own chevron, so the
 * control looks the same everywhere and actually reads as a control.
 */
.ordsync-disclosure > summary,
.ordsync-help > summary {
	cursor: pointer;
	min-height: 40px;
	box-sizing: border-box;
	padding: var(--ord-s2) var(--ord-s4);
	font-weight: 600;
	font-size: 13px;
	color: var(--ord-text);
	display: flex;
	align-items: center;
	gap: var(--ord-s2);
	list-style: none;
	user-select: none;
	background: var(--ord-soft);
	border: 1px solid var(--ord-line);
	border-radius: var(--ord-radius);
	transition: background .12s ease-in-out, border-color .12s ease-in-out, color .12s ease-in-out;
}

.ordsync-disclosure > summary::-webkit-details-marker,
.ordsync-help > summary::-webkit-details-marker {
	display: none;
}

/* Chevron: points down when closed, up when open. */
.ordsync-disclosure > summary::before,
.ordsync-help > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 2px;
	position: relative;
	top: -2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease-in-out, top .15s ease-in-out;
}

.ordsync-disclosure[open] > summary::before,
.ordsync-help[open] > summary::before {
	top: 2px;
	transform: rotate(-135deg);
}

.ordsync-disclosure > summary:hover,
.ordsync-help > summary:hover {
	background: var(--ord-hairline);
	border-color: var(--ord-line-strong);
	color: var(--ord-blue);
}

.ordsync-disclosure > summary:active,
.ordsync-help > summary:active {
	background: #e8e9ea;
}

/* Square off the join with the panel it opens. */
.ordsync-disclosure[open] > summary,
.ordsync-help[open] > summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ordsync-disclosure > summary:focus-visible,
.ordsync-help > summary:focus-visible {
	outline: 2px solid var(--ord-blue);
	outline-offset: -2px;
}

/* Open panel reads as one object with the header above it. */
.ordsync-disclosure-body {
	padding: var(--ord-s4);
	border: 1px solid var(--ord-line);
	border-top: none;
	border-radius: 0 0 var(--ord-radius) var(--ord-radius);
	background: #fff;
}

.ordsync-disclosure-body > *:last-child {
	margin-bottom: 0;
}

/* Rules and import live inside a card, so they align with its body. */
.ordsync-conditions {
	margin: 0 0 var(--ord-s5);
}

.ordsync-import-disclosure {
	margin: 0 var(--ord-s5) var(--ord-s5);
}

.ordsync-advanced {
	margin-top: var(--ord-s6);
}

.ordsync-filter-intro {
	margin: 0 0 var(--ord-s3);
	color: var(--ord-muted);
	font-size: 13px;
	line-height: 1.6;
}

.ordsync-count {
	background: var(--ord-blue);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	text-align: center;
	padding: 1px 7px;
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
}

/* ---- Setup help -------------------------------------------------------- */

.ordsync-help {
	margin-top: var(--ord-s3);
	max-width: 640px;
}

.ordsync-help > summary {
	color: var(--ord-blue);
	background: var(--ord-blue-bg);
	border-color: #c5d9ed;
}

.ordsync-help > summary:hover {
	background: #e5f0fa;
	border-color: var(--ord-blue);
}

.ordsync-help-body {
	padding: var(--ord-s4);
	border: 1px solid #c5d9ed;
	border-top: none;
	border-radius: 0 0 var(--ord-radius) var(--ord-radius);
	background: #fff;
}

.ordsync-help-body > *:last-child {
	margin-bottom: 0;
}

/*
 * Themes and security plugins routinely restyle every textarea in wp-admin.
 * On a real site this box rendered #f0f0f1 text on an #f0f0f0 background --
 * the script was present and copyable but completely invisible. The extra
 * specificity plus !important is what keeps it readable on any install.
 * Seen live 2026-08-05.
 */
.ordsync-wrap textarea.ordsync-script {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 280px;
	font-family: var(--ord-mono) !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	background: #1d2327 !important;
	background-color: #1d2327 !important;
	background-image: none !important;
	color: #f0f0f1 !important;
	border: 1px solid #1d2327 !important;
	border-radius: var(--ord-radius);
	padding: var(--ord-s3) !important;
	white-space: pre;
	overflow: auto;
	text-shadow: none !important;
	-webkit-text-fill-color: #f0f0f1 !important;
}

.ordsync-wrap textarea.ordsync-script:focus {
	background: #1d2327 !important;
	color: #f0f0f1 !important;
	border-color: var(--ord-blue) !important;
	box-shadow: 0 0 0 1px var(--ord-blue) !important;
	outline: none;
}

.ordsync-secret {
	display: inline-block;
	padding: 6px 10px;
	background: var(--ord-soft);
	border: 1px solid var(--ord-line);
	border-radius: var(--ord-radius);
	font-size: 13px;
	font-family: var(--ord-mono);
	user-select: all;
	word-break: break-all;
}

/* ---- Add / upsell ------------------------------------------------------ */

.ordsync-add-slot-row {
	display: flex;
	align-items: center;
	gap: var(--ord-s2);
	flex-wrap: wrap;
	margin: 0 0 var(--ord-s4);
}

/*
 * One callout pattern, used by both the upsell and the timing note, so the
 * page never invents a second way of saying "aside".
 */
.ordsync-quiet-upsell,
.ordsync-timing {
	border-left: 3px solid var(--ord-blue);
	border-radius: 0 var(--ord-radius) var(--ord-radius) 0;
	padding: var(--ord-s3) var(--ord-s4);
	font-size: 13px;
	line-height: 1.6;
}

.ordsync-quiet-upsell {
	background: var(--ord-blue-bg);
	margin: 0 0 var(--ord-s4);
}

.ordsync-timing {
	background: var(--ord-soft);
	margin: 0 0 var(--ord-s5);
}

.ordsync-pro-badge {
	background: var(--ord-blue);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 10px;
	line-height: 1.6;
}

/* ---- Conditional filters ----------------------------------------------- */

.ordsync-rule {
	display: flex;
	align-items: center;
	gap: var(--ord-s2);
	flex-wrap: wrap;
	margin-bottom: var(--ord-s2);
	padding: var(--ord-s2);
	background: var(--ord-tint);
	border: 1px solid var(--ord-line);
	border-radius: var(--ord-radius);
}

.ordsync-rule select,
.ordsync-rule input[type="text"] {
	margin: 0;
}

.ordsync-rule input[type="text"] {
	flex: 1;
	min-width: 140px;
}

/* The template row exists only to be cloned by admin.js. */
.ordsync-rule-template {
	display: none;
}

/*
 * Destructive actions are text links, never buttons: on a settings screen a
 * red button competes with Save for attention and gets clicked by accident.
 */
.ordsync-remove-rule,
.ordsync-remove-slot,
.ordsync-link-danger {
	color: var(--ord-red);
	cursor: pointer;
	text-decoration: none;
}

.ordsync-remove-rule:hover,
.ordsync-remove-slot:hover,
.ordsync-link-danger:hover {
	color: var(--ord-red-dark);
	text-decoration: underline;
}

.ordsync-remove-rule:focus-visible,
.ordsync-remove-slot:focus-visible,
.ordsync-link-danger:focus-visible {
	outline: 2px solid var(--ord-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Import ------------------------------------------------------------ */

.ordsync-import {
	display: flex;
	align-items: center;
	gap: var(--ord-s2);
	flex-wrap: wrap;
	margin: 0 0 var(--ord-s2);
}

/* ---- Result messages --------------------------------------------------- */

/*
 * The test result is the single most important message on this screen, so it
 * gets a pill with an icon rather than bare coloured text.
 */
.ordsync-import-result,
.ordsync-test-result {
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1.5;
}

.ordsync-import-result:empty,
.ordsync-test-result:empty {
	display: none;
}

.ordsync-import-result.is-working,
.ordsync-test-result.is-working {
	color: var(--ord-muted);
	font-weight: 400;
}

.ordsync-import-result.is-success,
.ordsync-test-result.is-success {
	color: var(--ord-green-dark);
	background: var(--ord-green-bg);
	border: 1px solid var(--ord-green);
	border-radius: var(--ord-radius);
	padding: 3px 10px;
}

.ordsync-import-result.is-error,
.ordsync-test-result.is-error {
	color: var(--ord-red-dark);
	background: var(--ord-red-bg);
	border: 1px solid var(--ord-red);
	border-radius: var(--ord-radius);
	padding: 3px 10px;
}

/* ---- Misc -------------------------------------------------------------- */

.ordsync-danger {
	margin-top: var(--ord-s3);
}

/* ---- Responsive -------------------------------------------------------- */

/* 782px is WordPress's own admin breakpoint, where controls grow for touch. */
@media screen and (max-width: 782px) {

	.ordsync-slot-head {
		align-items: center;
		row-gap: var(--ord-s2);
	}

	/* Title drops to its own line so the switch and status stay paired. */
	.ordsync-wrap input.ordsync-slot-title {
		flex-basis: 100%;
		order: 3;
		font-size: 16px; /* iOS zooms anything under 16px on focus. */
	}

	.ordsync-slot-body,
	.ordsync-slot-head,
	.ordsync-slot-foot {
		padding-left: var(--ord-s3);
		padding-right: var(--ord-s3);
	}

	.ordsync-import-disclosure {
		margin-left: var(--ord-s3);
		margin-right: var(--ord-s3);
	}

	.ordsync-slot-foot .button {
		flex: 1 1 auto;
		text-align: center;
	}

	.ordsync-foot-spacer {
		display: none;
	}

	.ordsync-rule select,
	.ordsync-rule input[type="text"] {
		flex-basis: 100%;
	}
}

/* ---- Accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ordsync-disclosure > summary,
	.ordsync-help > summary,
	.ordsync-disclosure > summary::before,
	.ordsync-help > summary::before,
	.ordsync-switch-track,
	.ordsync-switch-track::after,
	.ordsync-wrap input.ordsync-slot-title {
		transition: none;
	}
}

/*
 * Windows high-contrast mode drops author backgrounds, which would make the
 * switch and the chevron invisible -- both are drawn entirely with colour.
 * Give them borders that forced-colours keeps.
 */
@media (forced-colors: active) {

	.ordsync-switch-track {
		border: 1px solid CanvasText;
	}

	.ordsync-switch-track::after {
		background: CanvasText;
	}

	.ordsync-chip,
	.ordsync-pro-badge,
	.ordsync-count,
	.ordsync-ev,
	.ordsync-import-result.is-success,
	.ordsync-import-result.is-error,
	.ordsync-test-result.is-success,
	.ordsync-test-result.is-error,
	.ordsync-retry-result.is-success,
	.ordsync-retry-result.is-error {
		border: 1px solid CanvasText;
	}

	.ordsync-slot {
		border-left-width: 3px;
	}
}

/* -------------------------------------------------------------------------
 * Recent activity table (Logs tab)
 * ---------------------------------------------------------------------- */

.ordsync-events {
	margin: var(--ord-s4) 0 var(--ord-s3);
	border: 1px solid var(--ord-line);
	border-radius: var(--ord-radius);
}

/*
 * Only shown when the table actually needs to scroll (below). Without it, a
 * narrow phone clips the Result column -- the one holding the Retry button --
 * with no sign that there is anything past the edge of the screen. Found live
 * at 375px, where the table is ~72px wider than the viewport.
 */
.ordsync-events-scroll-hint {
	display: none;
}

.ordsync-events th {
	font-weight: 600;
}

.ordsync-events td {
	vertical-align: middle;
}

/*
 * Keeps the times and order numbers from wandering as rows differ in width,
 * which makes a long list far easier to scan down.
 */
.ordsync-events-when {
	white-space: nowrap;
	color: var(--ord-muted);
}

/* The result pill. Same shape as the card chip so the two read as one system. */
.ordsync-ev {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 9px;
	white-space: nowrap;
}

.ordsync-ev-sent {
	background: var(--ord-green-bg);
	border-color: var(--ord-green);
	color: var(--ord-green-dark);
}

/* Blue, matching .ordsync-chip.is-test on the settings tab -- a passed test
   is not a delivered order, and the two must not share a colour. */
.ordsync-ev-test {
	background: var(--ord-blue-bg);
	border-color: var(--ord-blue);
	color: var(--ord-blue-dark);
}

.ordsync-ev-retry {
	background: var(--ord-amber-bg);
	border-color: var(--ord-amber);
	color: var(--ord-amber-dark);
}

.ordsync-ev-failed {
	background: var(--ord-red-bg);
	border-color: var(--ord-red);
	color: var(--ord-red-dark);
}

/*
 * The error text. Allowed to wrap -- truncating it with an ellipsis would
 * hide the one thing the user opened this screen to read.
 */
.ordsync-ev-msg {
	display: block;
	margin-top: var(--ord-s1);
	font-size: 12px;
	color: var(--ord-muted);
	word-break: break-word;
}

.ordsync-events .ordsync-retry {
	margin-top: var(--ord-s2);
}

.ordsync-retry-result {
	display: inline-block;
	margin-left: var(--ord-s2);
	font-size: 12px;
	font-weight: 600;
}

.ordsync-retry-result.is-working {
	color: var(--ord-muted);
}

.ordsync-retry-result.is-success {
	color: var(--ord-green-dark);
}

.ordsync-retry-result.is-error {
	color: var(--ord-red-dark);
}

/*
 * On a narrow screen the four columns cannot all fit. Let the table scroll
 * inside its own card rather than pushing the whole admin page sideways.
 */
@media screen and (max-width: 782px) {

	.ordsync-events {
		display: block;
		overflow-x: auto;
	}

	.ordsync-events-scroll-hint {
		display: block;
	}
}
