/*
 * myInteger application design system
 * Canonical styles for the shell, screens, components and responsive layouts.
 * Keep screen-specific rules grouped beneath their component headings.
 */

:root {
	--ui-bg: #f3f6fa;
	--ui-surface: #ffffff;
	--ui-surface-muted: #f8fafc;
	--ui-sidebar: #111827;
	--ui-sidebar-soft: #1f2937;
	--ui-text: #172033;
	--ui-muted: #64748b;
	--ui-border: #dfe6ef;
	--ui-brand: #2e98d4;
	--ui-brand-dark: #1478b2;
	--ui-accent: #ed2b5c;
	--ui-success: #16a36a;
	--ui-warning: #d78a00;
	--ui-danger: #d73a49;
	--ui-purple: #7c5ce5;
	--ui-radius-sm: 8px;
	--ui-radius: 14px;
	--ui-radius-lg: 22px;
	--ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
	--ui-shadow: 0 14px 40px rgba(15, 23, 42, .10);
	--ui-sidebar-width: 264px;
	--ui-transition: 180ms ease;
}

/* Filtered content is removed consistently across tables and card layouts. */
body.app-body .is-ui-filtered,
body.app-body [hidden].is-ui-filtered {
	display: none !important;
}

/* Mobile settings uses a horizontal section rail and keeps the active form visible. */
@media (max-width: 900px) {
	.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor > .settings {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto minmax(0, 1fr);
		height: 100% !important;
		overflow: hidden;
	}

	.app-body .ui-settings-workspace-host .ui-settings-editor .settingsnav {
		position: static !important;
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 7px !important;
		overflow: hidden !important;
		background: #18263a;
		border: 0;
		border-radius: 0 !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.app-body .ui-settings-workspace-host .ui-settings-editor .settingsnav .menu-toggle { display: none !important; }

	.app-body .ui-settings-workspace-host .ui-settings-editor #settings_tab_buttons {
		display: flex !important;
		gap: 4px;
		width: 100%;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: thin;
	}

	.app-body .ui-settings-workspace-host .ui-settings-editor #settings_tab_buttons > li {
		flex: 0 0 auto;
		width: auto !important;
		min-height: 36px;
		margin: 0;
		padding: 8px 10px;
		white-space: nowrap;
	}

	.app-body .ui-settings-workspace-host .ui-settings-editor .settingswrapper {
		height: 100% !important;
		min-height: 0;
		margin: 0 !important;
		padding: 10px !important;
		overflow-y: auto !important;
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.app-body .ui-settings-workspace-host .ui-settings-editor__header > div { flex: 1 1 auto; min-width: 0; }
	.app-body .ui-settings-workspace-host .ui-settings-editor__header h2 { width: auto !important; overflow-wrap: anywhere; }
	.app-body .ui-settings-workspace-host .ui-settings-editor__close { display: inline-grid !important; flex: 0 0 42px; }
}

/* -------------------------------------------------------------------------
   Second-pass operational workspaces
   ------------------------------------------------------------------------- */

/* Dashboard context, source switch and useful percentage indicators. */
.app-body .dashboard.ui-dashboard .inner > .ui-dashboard__header {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px !important;
	padding: 20px 22px !important;
	background: linear-gradient(125deg, #fff 0%, #f7fbfe 62%, #e8f5fb 100%);
	border: 1px solid var(--ui-border);
	border-radius: 18px;
	box-shadow: var(--ui-shadow-sm);
}

.ui-dashboard__heading { min-width: 0; }

.ui-dashboard__scope {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 9px;
	color: var(--ui-muted);
	font-size: 9px;
}

.ui-dashboard__scope span {
	padding: 3px 7px;
	color: var(--ui-brand-dark);
	background: #e4f3fb;
	border-radius: 999px;
	font-size: 7px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ui-dashboard__scope strong {
	min-width: 0;
	overflow: hidden;
	color: #364c63;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-body .dashboard.ui-dashboard #toggleDashboard {
	position: static !important;
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 4px !important;
	background: #e9eff5 !important;
	border: 1px solid #d4dee8;
	border-radius: 11px !important;
}

.app-body .dashboard.ui-dashboard #toggleDashboard .titles {
	display: flex !important;
	align-items: center;
	gap: 3px;
	width: auto !important;
}

.app-body .dashboard.ui-dashboard #toggleDashboard .titleonline,
.app-body .dashboard.ui-dashboard #toggleDashboard .titleinstore {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 82px;
	height: 34px;
	padding: 0 12px;
	color: #607086 !important;
	background: transparent !important;
	border-radius: 8px;
	font-size: 8px !important;
	font-weight: 800;
	cursor: pointer;
}

.app-body .dashboard.ui-dashboard #toggleDashboard.online .titleonline,
.app-body .dashboard.ui-dashboard #toggleDashboard.instore .titleinstore {
	color: #fff !important;
	background: #13233c !important;
	box-shadow: 0 5px 12px rgba(15, 35, 61, .18);
}

.app-body .dashboard.ui-dashboard #toggleDashboard .togglebtn { display: none !important; }

.app-body .dashboard.ui-dashboard .shoplogo {
	position: static !important;
	display: grid !important;
	float: none !important;
	place-items: center;
	width: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d8e3ec;
	border-radius: 12px;
}

.app-body .dashboard.ui-dashboard .shoplogo img { width: 100%; height: 100%; object-fit: cover; }

.ui-dashboard-sales__total {
	display: block;
	align-self: end;
	color: #715410;
	font-size: 8px;
	line-height: 1.25;
}

.ui-dashboard-sales__total strong {
	display: block;
	font-size: 25px;
	line-height: 1;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-mix { grid-template-rows: auto auto auto !important; }
.app-body .dashboard.ui-dashboard .inner .row3 > .ui-dashboard-mix > img { grid-row: 1 / 3; }

.ui-dashboard-mix__track {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	height: 5px;
	margin-top: 12px;
	overflow: hidden;
	background: #e8eef4;
	border-radius: 99px;
}

.ui-dashboard-mix__track i {
	display: block;
	width: var(--ui-dashboard-value, 0%);
	height: 100%;
	background: linear-gradient(90deg, var(--ui-brand), #43b6d1);
	border-radius: inherit;
}

/* Settings is now a real workspace, not content expanded inside a list row. */
.app-body .shopsettingspulldown.ui-settings-workspace-host {
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	left: calc(var(--ui-sidebar-width) + 10px) !important;
	z-index: 1250 !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 10px !important;
	overflow: hidden;
	background: rgba(15, 29, 49, .62) !important;
	border: 0 !important;
	backdrop-filter: blur(5px);
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor {
	position: absolute !important;
	top: 10px;
	right: auto;
	bottom: 78px;
	left: 50%;
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(1380px, calc(100% - 20px)) !important;
	height: auto;
	min-height: 0;
	margin: 0 auto !important;
	overflow: hidden;
	background: #eef3f8 !important;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 25px 75px rgba(7, 20, 38, .36);
	transform: translateX(-50%);
}

.app-body .ui-settings-workspace-host .ui-settings-editor__header {
	margin: 0 !important;
	padding: 15px 19px;
	border: 0;
	border-bottom: 1px solid var(--ui-border);
	border-radius: 16px 16px 0 0;
	box-shadow: none;
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor > .settings {
	height: 100%;
	min-height: 0 !important;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.app-body .ui-settings-workspace-host .ui-settings-editor .settingsnav {
	position: static;
	height: 100%;
	max-height: none;
	border-radius: 0;
}

.app-body .ui-settings-workspace-host .ui-settings-editor .settingswrapper {
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	border-radius: 0;
}

.app-body .ui-settings-workspace-host > .savebar {
	position: absolute !important;
	right: auto;
	bottom: 10px;
	left: 50%;
	width: min(1380px, calc(100% - 20px)) !important;
	margin: 0 !important;
	border: 0;
	border-top: 1px solid var(--ui-border);
	border-radius: 0 0 16px 16px;
	transform: translateX(-50%);
}

/* Hosted-site list and dedicated editor. */
.app-body .ui-hosted-sites .ui-domain-status {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	color: #426079;
	background: #edf3f7;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .035em;
}

.app-body .ui-hosted-sites .ui-domain-status.is-managed { color: #08754c; background: #dff6eb; }
.app-body .ui-hosted-sites .ui-domain-status.is-warning { color: #9a5b00; background: #fff0ce; }

.app-body .forcepulldown.ui-domain-workspace-host {
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	left: calc(var(--ui-sidebar-width) + 10px) !important;
	z-index: 1250 !important;
	display: grid !important;
	grid-template-rows: minmax(0, 1fr) auto;
	width: auto !important;
	padding: 10px !important;
	overflow: hidden;
	background: rgba(15, 29, 49, .62) !important;
	backdrop-filter: blur(5px);
}

.app-body .ui-domain-editor {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	width: min(1380px, 100%);
	height: 100%;
	min-height: 0;
	margin: 0 auto;
	overflow: hidden;
	background: #eef3f8;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 25px 75px rgba(7, 20, 38, .36);
}

.ui-domain-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 19px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #176b8f);
}

.ui-domain-editor__header small { display: block; margin-bottom: 2px; color: #7bd0f3; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.ui-domain-editor__header h2 { margin: 0; padding: 0 !important; color: #fff; font-size: 20px; text-indent: 0 !important; }
.ui-domain-editor__header p { margin: 3px 0 0; color: #c4dceb; font-size: 9px; }
.ui-domain-editor__header button { width: 40px; height: 40px; padding: 0; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 11px; font-size: 22px; cursor: pointer; }

.ui-domain-editor__tabs,
.ui-promo-tabs {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 12px;
	overflow-x: auto;
	background: #fff;
	border-bottom: 1px solid var(--ui-border);
}

.ui-domain-editor__tabs button,
.ui-promo-tabs button {
	flex: 0 0 auto;
	min-height: 34px;
	padding: 7px 12px;
	color: #5a6d81;
	background: #f2f6f9;
	border: 0;
	border-radius: 8px;
	font-size: 8px;
	font-weight: 800;
	cursor: pointer;
}

.ui-domain-editor__tabs button.is-active,
.ui-promo-tabs button.is-active { color: #fff; background: var(--ui-brand); box-shadow: 0 5px 13px rgba(23, 120, 178, .2); }

.app-body .ui-domain-editor .domrecdetails {
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto;
	background: #eef3f8;
}

.app-body .ui-domain-editor .ui-domain-editor__body {
	display: block !important;
	width: 100% !important;
	padding: 14px !important;
}

.app-body .ui-domain-editor .ui-domain-editor__content {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.app-body .ui-domain-editor .ui-domain-editor__content > h2 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 15px; }

.app-body .ui-domain-editor .orderitem,
.app-body .ui-domain-editor .customerinfo {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px !important;
	background: #fff !important;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
}

.app-body .ui-domain-editor .orderitem > .label { display: block; margin: 0 0 3px; color: var(--ui-text); font-size: 10px; font-weight: 800; }
.app-body .ui-domain-editor .orderitem > .sub { display: block; margin: 0 0 8px; color: var(--ui-muted); font-size: 8px; }
.app-body .ui-domain-editor .orderitem > .details { display: block; width: 100%; }
.app-body .ui-domain-editor input:not([type="checkbox"]):not([type="color"]),
.app-body .ui-domain-editor select,
.app-body .ui-domain-editor textarea { width: 100%; min-height: 39px; padding: 8px 10px; background: #f9fbfd; border: 1px solid #cad7e4; border-radius: 8px; }
.app-body .ui-domain-editor textarea { min-height: 130px; }
.app-body .ui-domain-editor input[type="color"] { width: 58px; height: 38px; padding: 3px; border: 1px solid #cad7e4; border-radius: 8px; }
.app-body .ui-domain-editor .upload-box { display: grid !important; min-height: 76px; place-items: center; padding: 12px !important; color: #557086; background: #f7fbfd !important; border: 1px dashed #a9c7d8 !important; border-radius: 9px !important; font-size: 8px; }
.app-body .ui-domain-editor [data-domain-section="media"],
.app-body .ui-domain-editor [data-domain-section="about"],
.app-body .ui-domain-editor [data-domain-section="contact"] { align-self: start; }
.app-body .ui-domain-editor .customerinfowrapper { float: none; width: 100%; margin: 0 0 10px; }
.app-body .ui-domain-editor .customerinfo > h2 { margin: 0 0 10px; font-size: 14px; }

.app-body .ui-domain-workspace-host > .savebar {
	position: static !important;
	width: min(1380px, 100%) !important;
	margin: 0 auto !important;
	border: 0;
	border-top: 1px solid var(--ui-border);
	border-radius: 0 0 16px 16px;
}

/* Promo editor now reveals one decision group at a time. */
.app-body .ui-promo-editor .ui-promo-tabs { position: sticky; top: 0; z-index: 5; }
.app-body .ui-promo-editor .promoinfo > .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.app-body .ui-promo-editor .promoinfo .item[hidden] { display: none !important; }
.app-body .ui-promo-editor .promoinfo .item:not(.itemdate) > .option { display: grid !important; grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.app-body .ui-promo-editor .promoinfo .item:not(.itemdate) > .option > .toggleSwitch { grid-column: 1; }
.app-body .ui-promo-editor .promoinfo .item:not(.itemdate) > .option > span { grid-column: 2; min-width: 0; }
.app-body .ui-promo-editor .promoinfo .toggleSwitch { flex: 0 0 42px; width: 42px !important; min-width: 42px; }

/* Push audience is a first-class, persistent piece of information. */
.app-body .push-audience-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, #10233f, #176b8f) !important;
}

.app-body .push-audience-card::after {
	position: absolute;
	right: -22px;
	bottom: -34px;
	width: 110px;
	height: 110px;
	background: rgba(255,255,255,.06);
	border-radius: 50%;
	content: "";
}

.app-body .push-audience-card span,
.app-body .push-audience-card strong,
.app-body .push-audience-card small { position: relative; z-index: 1; }

/* Refund tool within the normal MyInteger shell. */
.app-body .ui-refund-workspace { display: grid; gap: 12px; }

.app-body .ui-refund-guide {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.2fr);
	align-items: center;
	gap: 20px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-refund-guide small { display: block; color: var(--ui-danger); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.app-body .ui-refund-guide strong { display: block; margin: 3px 0; font-size: 15px; }
.app-body .ui-refund-guide p { margin: 0; color: var(--ui-muted); font-size: 9px; }
.app-body .ui-refund-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-body .ui-refund-guide li { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px; color: #4e6378; background: #f5f8fb; border-radius: 9px; font-size: 8px; font-weight: 700; }
.app-body .ui-refund-guide li span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; color: #fff; background: var(--ui-brand); border-radius: 7px; }
.app-body .ui-refund-frame { display: block; width: 100%; min-height: 680px; height: calc(100vh - 290px); background: #f4f7fb; border: 1px solid var(--ui-border); border-radius: 14px; }

/* Keep modal content near the top of the viewport. */
.app-body .ui-store-locator-editor .overlay,
.app-body .ui-image-upload .overlay {
	align-items: flex-start !important;
	padding-top: 10px !important;
}

@media (max-width: 900px) {
	.app-body .dashboard.ui-dashboard .inner > .ui-dashboard__header { grid-template-columns: 1fr auto; }
	.app-body .dashboard.ui-dashboard .shoplogo { display: none !important; }
	.app-body .shopsettingspulldown.ui-settings-workspace-host,
	.app-body .forcepulldown.ui-domain-workspace-host { inset: 0 !important; padding: 0 !important; }
	.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor,
	.app-body .ui-domain-editor { width: 100% !important; border-radius: 0; }
	.app-body .ui-settings-workspace-host .ui-settings-editor__header,
	.ui-domain-editor__header { border-radius: 0; }
	.app-body .ui-settings-workspace-host > .savebar,
	.app-body .ui-domain-workspace-host > .savebar { width: 100% !important; border-radius: 0; }
	.app-body .ui-domain-editor .ui-domain-editor__content { grid-template-columns: 1fr; }
	.app-body .ui-refund-guide { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.app-body .dashboard.ui-dashboard .inner > .ui-dashboard__header { grid-template-columns: 1fr; padding: 17px !important; }
	.app-body .dashboard.ui-dashboard #toggleDashboard { justify-self: stretch; }
	.app-body .dashboard.ui-dashboard #toggleDashboard .titles > span { flex: 1; }
	.app-body .ui-refund-guide ol { grid-template-columns: 1fr; }
	.app-body .ui-refund-frame { min-height: 720px; height: calc(100vh - 250px); }
	.app-body .ui-promo-editor .promoinfo > .inner { grid-template-columns: 1fr; }
}

html {
	min-height: 100%;
	background: var(--ui-bg);
	scroll-behavior: smooth;
}

body,
html {
	color: var(--ui-text);
	font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

body {
	min-height: 100vh;
	background: var(--ui-bg);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
[role="button"],
a {
	-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 3px solid rgba(46, 152, 212, .35);
	outline-offset: 2px;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Application shell */

body.app-body {
	overflow-x: hidden;
}

.app-body .header {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 1000;
	display: flex;
	float: none;
	flex-direction: column;
	width: var(--ui-sidebar-width);
	height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--ui-sidebar);
	box-shadow: 12px 0 32px rgba(15, 23, 42, .09);
}

.app-body #logo {
	position: static;
	display: flex;
	flex: 0 0 88px;
	align-items: center;
	width: 100%;
	padding: 0 26px;
	background: #fff;
	border-bottom: 1px solid var(--ui-border);
}

.app-body #logo a {
	display: block;
	width: 174px;
	line-height: 0;
}

.app-body #logo img {
	display: block;
	width: 100%;
	height: auto;
}

#mobile-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 11px;
	background: transparent;
	border: 0;
	border-radius: var(--ui-radius-sm);
	cursor: pointer;
}

#mobile-nav-toggle > span:not(.sr-only) {
	display: block;
	width: 22px;
	height: 2px;
	margin: 4px 0;
	background: var(--ui-text);
	border-radius: 2px;
	transition: transform var(--ui-transition), opacity var(--ui-transition);
}

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 990;
	display: none;
	background: rgba(15, 23, 42, .52);
	backdrop-filter: blur(2px);
}

.app-body .mainnav {
	position: static;
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #475569 transparent;
}

.app-body .mainnav > ul {
	display: block;
	margin: 0;
	padding: 16px 12px 28px;
}

.app-body .mainnav > ul > li {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	min-height: 48px;
	margin: 3px 0;
	padding: 0;
	background: transparent !important;
	border-radius: 10px;
	text-align: left;
}

.app-body .mainnav > ul > li::after {
	display: none !important;
}

.nav-trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	color: #cbd5e1;
	background: transparent;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: color var(--ui-transition), background var(--ui-transition), transform var(--ui-transition);
}

.nav-trigger::before {
	position: absolute;
	inset: 10px auto 10px 0;
	width: 3px;
	background: transparent;
	border-radius: 4px;
	content: "";
}

.nav-trigger::after {
	display: block;
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 1.5px solid #64748b;
	border-bottom: 1.5px solid #64748b;
	content: "";
	transform: rotate(45deg);
	transition: transform var(--ui-transition);
}

.mainnav > ul > li.is-open > .nav-trigger::after {
	transform: rotate(-135deg);
}

.mainnav > ul > li.is-active > .nav-trigger,
.mainnav > ul > li.is-open > .nav-trigger,
.nav-trigger:hover {
	color: #fff;
	background: rgba(255, 255, 255, .09);
}

.mainnav > ul > li.is-active > .nav-trigger::before {
	background: var(--ui-brand);
}

.nav-trigger img,
.app-body .mainnav li .nav-trigger img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
	opacity: .88;
}

/* Until the script builds the navigation buttons the menu is the plain server markup: keep its icons at menu size, not their natural size. */
body.app-body:not(.ui-ready) #app-navigation li > img {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
}

/* Direct pages and browser favourites share the authorised navigation links. */
.app-body #app-navigation .ui-nav-direct > .nav-trigger::after,
.app-body #app-navigation .ui-nav-support > .nav-trigger::after {
	display: none;
}
.app-body #app-navigation .mi-favourite-nav-item {
	position: relative;
}
.app-body #app-navigation .ui-nav-direct.mi-favourite-nav-item > .nav-trigger {
	gap: 10px;
	padding-right: 40px;
}
.app-body #app-navigation .ui-nav-direct .nav-label {
	line-height: 1.4;
	white-space: normal;
}
.app-body #app-navigation .dropdown .mi-favourite-nav-item > a,
.app-body #app-navigation .dropdown .mi-favourite-nav-item > a:hover,
.app-body #app-navigation .dropdown .mi-favourite-nav-item > a:focus-visible {
	padding-right: 40px !important;
}
.mi-favourite-toggle {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 36px;
	margin: 0;
	padding: 8px;
	color: #94a3b8;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.mi-favourite-toggle svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
}
.mi-favourite-toggle:hover,
.mi-favourite-toggle[aria-pressed="true"] {
	color: #fbbf24;
	background: rgba(251, 191, 36, .08);
}
.mi-favourite-toggle[aria-pressed="true"] svg {
	fill: currentColor;
}
.mi-favourite-toggle:focus-visible,
.mi-favourite-link:focus-visible {
	outline: 2px solid #fbbf24;
	outline-offset: -2px;
}
.app-body #app-navigation .mi-favourite-nav-star {
	position: absolute;
	top: 6px;
	right: 2px;
}
.app-body #app-navigation .dropdown .mi-favourite-nav-star {
	top: 1px;
}
.app-body #app-navigation .mi-favourites {
	padding: 14px 12px 12px;
	border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.app-body #app-navigation .mi-favourites[hidden],
.app-body #app-navigation .mi-favourites-notice[hidden] {
	display: none;
}
.app-body #app-navigation .mi-favourites-heading {
	margin: 0 10px 7px;
	color: #94a3b8;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mi-favourite-row {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 2px 0;
}
@media (hover: hover) and (pointer: fine) {
	.app-body #app-navigation .mi-favourite-toggle {
		opacity: 0;
		pointer-events: none;
	}
	.app-body #app-navigation .mi-favourite-nav-item:hover > .mi-favourite-toggle,
	.app-body #app-navigation .mi-favourite-nav-item:focus-within > .mi-favourite-toggle,
	.app-body #app-navigation .mi-favourite-row:hover > .mi-favourite-toggle,
	.app-body #app-navigation .mi-favourite-row:focus-within > .mi-favourite-toggle {
		opacity: 1;
		pointer-events: auto;
	}
}
.mi-favourite-link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 40px;
	padding: 8px 10px;
	color: #dbe5f2;
	background: transparent;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}
.mi-favourite-link:hover,
.mi-favourite-link.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .09);
}
.mi-favourite-link img {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	object-fit: contain;
}
.app-body #app-navigation .mi-favourites-notice {
	margin: 8px 10px 0;
	color: #fcd875;
	font-size: 11px;
	line-height: 1.5;
}
.ui-page-header__tools .mi-favourite-page {
	width: 40px;
	min-height: 40px;
	color: #64748b;
	background: #fff;
	border: 1px solid #dbe5f2;
}
.ui-page-header__tools .mi-favourite-page:hover,
.ui-page-header__tools .mi-favourite-page[aria-pressed="true"] {
	color: #b77905;
	background: #fffbeb;
	border-color: #f5d88b;
}

.nav-trigger .nav-label {
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Keep an applied historical date visible when its menu is closed. */
.mainnav > ul > li.date.has-date-filter > .nav-trigger {
    color: #fff0c2;
    background: rgba(245, 158, 11, .13);
}
.mainnav > ul > li.date.has-date-filter > .nav-trigger::before { background: #fbbf24; }
.mainnav .date .nav-label { white-space: normal; }
.ui-date-filter-marker {
    display: block;
    margin-top: 3px;
    color: #fcd875;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
}
.ui-date-filter-marker[hidden] { display: none; }
.ui-dashboard-dates { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 15px; }
.ui-dashboard-dates > strong { font-size: 12px; color: var(--ui-ink, #172b45); }
.ui-dashboard-dates > div { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-dashboard-dates button { padding: 7px 12px; color: #235274; border: 1px solid #cbdde9; border-radius: 8px; background: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.ui-dashboard-dates button:hover { background: #e9f4fb; }
.ui-dashboard-dates button[aria-pressed="true"] { color: #fff; border-color: #167eb4; background: #167eb4; }
.ui-dashboard-dates button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.ui-dashboard-date-limit { margin: 8px 0 0; font-size: 11px; color: var(--ui-muted, #64748b); }

.app-body .mainnav ul.dropdown {
	position: static;
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: 0;
	margin: 0 6px;
	padding: 0;
	overflow: hidden;
	color: #dbe5f2;
	background: rgba(2, 6, 23, .28) !important;
	border: 0;
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	transition: max-height 240ms ease, opacity var(--ui-transition), margin var(--ui-transition);
}

.app-body .mainnav ul.dropdown.show,
.app-body .mainnav > ul > li.is-open > ul.dropdown {
	max-height: 560px;
	margin-top: 4px;
	margin-bottom: 8px;
	opacity: 1;
	visibility: visible;
}

.app-body .mainnav ul.dropdown li {
	display: block;
	width: 100% !important;
	height: auto;
	min-height: 0;
	margin: 0 !important;
	padding: 0;
	background: transparent !important;
	line-height: 1.35;
	text-align: left;
}

.app-body .mainnav ul.dropdown li a {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px 10px 42px;
	color: #aebdd0;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	letter-spacing: .025em;
	transition: color var(--ui-transition), background var(--ui-transition);
}

.app-body .mainnav ul.dropdown li a:hover,
.app-body .mainnav ul.dropdown li a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

/* Account identity is context, not a navigation destination. */
.app-body .mainnav ul.dropdown li.nav-account-identity {
	padding: 8px 8px 5px !important;
}

.app-body .nav-account-identity__card {
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 10px 11px;
	color: #fff;
	background: rgba(46, 152, 212, .12);
	border: 1px solid rgba(115, 195, 236, .2);
	border-radius: 8px;
}

.app-body .nav-account-identity__eyebrow {
	color: #7dc9ed;
	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .09em;
}

.app-body .nav-account-identity__card strong {
	min-width: 0;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.app-body .mainnav ul.dropdown li.nav-account-manage a {
	color: #dceaf6;
}

.app-body .mainnav ul.dropdown li.nav-account-logout {
	margin-top: 5px !important;
	padding-top: 5px !important;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.app-body .mainnav ul.dropdown li.nav-account-logout a:hover,
.app-body .mainnav ul.dropdown li.nav-account-logout a:focus-visible {
	color: #ffc5cc;
	background: rgba(227, 53, 81, .12);
}

.app-body .mainnav .closepopupmenu {
	display: none;
}

/* Utility navigation panels */

.app-body .mainnav li.date ul.dropdown,
.app-body .mainnav li.search ul.dropdown,
.app-body .mainnav li.filter ul.dropdown,
.app-body .mainnav li.lred ul.dropdown {
	position: static;
	right: auto;
	top: auto;
	width: auto !important;
	height: auto;
}

.app-body .mainnav .searchbox,
.app-body .mainnav .date .searchbox {
	position: static;
	display: block;
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
}

.app-body .mainnav .searchbox fieldset {
	display: block !important;
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.app-body .mainnav .searchbox fieldset.ui-nav-search-form {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 40px;
	gap: 6px;
	align-items: center;
}

.app-body .mainnav .searchbox input,
.app-body .mainnav .searchbox input[type="date"] {
	display: block;
	width: 100%;
	height: 40px;
	padding: 8px 10px;
	color: #f8fafc;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	color-scheme: dark;
}

.app-body .mainnav .searchbox .ui-nav-search-form > input {
	min-width: 0;
}

.app-body .mainnav .ui-nav-search-submit {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #fff;
	background: #2498d0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}

.app-body .mainnav .ui-nav-search-submit span {
	display: block;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("../images/svg/search.svg") center / contain no-repeat;
	mask: url("../images/svg/search.svg") center / contain no-repeat;
}

.app-body .mainnav .ui-nav-search-submit:hover {
	background: #1788bd;
}

.app-body .mainnav .ui-nav-search-submit:active {
	transform: translateY(1px);
}

.app-body .mainnav .ui-nav-search-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ui-order-search-choice {
	position: fixed;
	inset: 0;
	z-index: 10020;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(8, 24, 42, .62);
	backdrop-filter: blur(3px);
}

.ui-order-search-choice__dialog {
	position: relative;
	width: min(560px, 100%);
	padding: 28px;
	color: #17314d;
	background: #fff;
	border: 1px solid #c9dce8;
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(4, 22, 39, .3);
}

.ui-order-search-choice__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: #1288be;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ui-order-search-choice__dialog h2 {
	margin: 0 38px 6px 0;
	font-size: 23px;
}

.ui-order-search-choice__dialog > p {
	margin: 0 0 20px;
}

.ui-order-search-choice__dialog code {
	color: #526b80;
	font-size: 13px;
}

.ui-order-search-choice__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	padding: 0;
	color: #51677a;
	background: #eff5f8;
	border: 0;
	border-radius: 9px;
	font-size: 22px;
	cursor: pointer;
}

.ui-order-search-choice__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.ui-order-search-choice__actions button {
	display: grid;
	gap: 5px;
	min-height: 92px;
	padding: 16px;
	color: #17314d;
	text-align: left;
	background: #f5f9fb;
	border: 1px solid #d5e3eb;
	border-radius: 12px;
	cursor: pointer;
}

.ui-order-search-choice__actions button:hover,
.ui-order-search-choice__actions button:focus-visible {
	background: #eaf6fb;
	border-color: #2298cd;
	outline: none;
}

.ui-order-search-choice__actions strong {
	font-size: 14px;
}

.ui-order-search-choice__actions span,
.ui-order-search-choice__dialog > small {
	color: #657b8e;
	font-size: 11px;
	line-height: 1.45;
}

@media (max-width: 600px) {
	.ui-order-search-choice { padding: 12px; }
	.ui-order-search-choice__dialog { padding: 22px; }
	.ui-order-search-choice__actions { grid-template-columns: 1fr; }
}

.app-body .mainnav .searchbox input::placeholder {
	color: #94a3b8;
}

.app-body .mainnav li.filter .dropdown {
	overflow: visible;
}

.app-body .mainnav li.filter:not(.is-open) .dropdown {
	overflow: hidden;
}

.app-body .mainnav .select2-container {
	width: 100% !important;
}

.app-body .mainnav .select2-container--default .select2-selection--multiple {
	min-height: 42px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
}

.app-body .mainnav .filter-apply,
.app-body .mainnav .filter-clear {
	min-height: 36px;
	padding: 7px 12px;
	color: #fff;
	background: var(--ui-brand);
	border: 0;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.app-body .mainnav .filter-clear {
	color: #cbd5e1;
	background: rgba(255, 255, 255, .10);
}

/* Main content */

.app-body > .loading_toggle,
.app-body #maincontent,
.app-body #searchcontent {
	float: none;
}

.app-body #maincontent,
.app-body #searchcontent {
	width: calc(100% - var(--ui-sidebar-width));
	min-height: 100vh;
	margin: 0 0 0 var(--ui-sidebar-width);
	padding: 26px;
	background: var(--ui-bg);
}

.app-body #maincontent > .content,
.app-body #searchcontent > .content,
.app-body #maincontent > .shops,
.app-body #maincontent > .hours {
	float: none;
	width: 100%;
}

.contentheader {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	margin-bottom: 14px;
}

.contentheader .add {
	position: static;
	margin-left: auto;
}

.contentheader .add img,
img.cross,
img.expandbutton,
img.toggleIntContent {
	width: 32px;
	height: 32px;
	padding: 7px;
	background: #eef5fa;
	border-radius: 9px;
	cursor: pointer;
	transition: background var(--ui-transition), transform var(--ui-transition);
}

.contentheader .add img:hover,
img.cross:hover,
img.expandbutton:hover,
img.toggleIntContent:hover {
	background: #dcecf7;
	transform: translateY(-1px);
}

/* Dashboard */

.app-body .dashboard {
	padding: 0;
	background: transparent;
}

.app-body .dashboard > .inner,
.app-body .dashboard .inner {
	width: min(1440px, 100%);
	margin: 0 auto;
	padding: 0 0 72px;
}

.app-body .dashboard .inner > .row {
	display: grid;
	float: none;
	width: 100%;
	margin: 0 0 20px;
	gap: 16px;
}

.app-body .dashboard .inner .row1 {
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	padding: 6px 4px 16px;
	background: transparent !important;
	border-bottom: 1px solid var(--ui-border);
	border-radius: 0;
}

.app-body .dashboard .inner .row1 > div:nth-child(1) {
	width: auto;
}

.app-body .dashboard .inner .row1 > div:first-child > .title {
	display: block;
	width: auto;
	padding: 0;
	color: var(--ui-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: clamp(23px, 2vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.025em;
}

.app-body .altdashboard .inner .row1 div.toggle {
	position: relative;
	width: 236px;
	height: 44px;
	padding: 4px;
	background: #e9eef5;
	border: 1px solid var(--ui-border);
	border-radius: 999px;
}

.app-body .altdashboard .row1 .toggle .titles {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	height: 100%;
	padding: 0;
}

.app-body .altdashboard .toggle .titles .titleonline,
.app-body .altdashboard .toggle .titles .titleinstore {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--ui-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
}

.app-body .altdashboard .toggle.online .titles .titleonline,
.app-body .altdashboard .toggle.instore .titles .titleinstore {
	color: #fff;
}

.app-body .altdashboard .toggle .togglebtn,
.app-body .altdashboard .toggle.online .togglebtn,
.app-body .altdashboard .toggle.instore .togglebtn {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px) !important;
	height: 34px;
	background: var(--ui-sidebar) !important;
	border: 0;
	border-radius: 999px;
	box-shadow: var(--ui-shadow-sm);
	transition: transform 220ms ease;
}

.app-body .altdashboard .toggle.instore .togglebtn {
	right: auto;
	transform: translateX(100%);
}

.app-body .dashboard .inner .row2 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-body .dashboard .inner .row2 > div,
.app-body .dashboard .inner .row2 > div:nth-child(n) {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	min-height: 176px;
	margin: 0;
	padding: 26px;
	overflow: hidden;
	color: var(--ui-text);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow-sm);
	text-align: left;
}

.app-body .dashboard .inner .row2 > div:nth-child(1) {
	color: #fff;
	background: linear-gradient(135deg, #169f6a, #087752);
	border-color: transparent;
}

.app-body .dashboard .inner .row2 > div:nth-child(2) {
	color: #fff;
	background: linear-gradient(135deg, #2e98d4, #1b6f9f);
	border-color: transparent;
}

.app-body .dashboard .inner .row2 > div:nth-child(3) a {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

.app-body .dashboard .inner .row2 > div .total {
	display: block;
	margin: 0 0 16px;
	padding: 0;
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
}

.app-body .dashboard .inner .row2 > div .description {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .055em;
}

.app-body .dashboard .inner .row2 > div:nth-child(3) .total {
	margin-bottom: 12px;
}

.app-body .dashboard .inner .row2 > div:nth-child(3) img {
	width: auto;
	height: 58px;
	max-height: 58px;
}

.app-body .dashboard .inner .row3 {
	grid-template-columns: minmax(240px, 1.35fr) repeat(6, minmax(120px, 1fr));
	align-items: stretch;
}

.app-body .dashboard .inner .row3 > div,
.app-body .dashboard .inner .row3 > div:nth-child(n) {
	display: flex;
	float: none;
	flex-direction: column;
	width: auto;
	min-width: 0;
	min-height: 238px;
	margin: 0;
	padding: 22px 14px;
	color: var(--ui-text);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow-sm);
}

.app-body .dashboard .inner .row3 > div:first-child {
	padding: 14px;
}

.app-body .dashboard .inner .row3 > div > img {
	float: none;
	width: 100%;
	height: 52px;
	margin: 18px auto 22px;
	object-fit: contain;
	filter: saturate(.7) brightness(.72);
}

.app-body .dashboard .inner .row3 > div > .title {
	float: none;
	width: 100%;
	min-height: 42px;
	margin: 0;
	color: var(--ui-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .04em;
}

.app-body .dashboard .inner .row3 > div > .total {
	float: none;
	width: 100%;
	margin-top: auto;
	padding: 0;
	color: var(--ui-text);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}

.app-body .dashboard .salesheader,
.app-body .dashboard .inner .row .salesheader {
	width: 100% !important;
	padding: 10px 12px;
	background: #fff6d7 !important;
	border: 0 !important;
	border-radius: 10px !important;
}

.app-body .dashboard .inner .row .salesheader .title {
	min-height: 0;
	padding: 0;
	color: #9b6500;
	font-size: 12px;
	line-height: 28px;
}

.app-body .dashboard .inner .row3 .details {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 0;
	background: transparent;
	border: 0;
}

.app-body .dashboard .inner .row3 .details .row {
	display: grid;
	grid-template-columns: 1fr auto;
	width: 100%;
	margin: 0;
	padding: 7px 3px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #eef2f6;
}

.app-body .dashboard .inner .row3 .details .row .title,
.app-body .dashboard .inner .row3 .details .row .total {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
}

.app-body .dashboard .inner .row3 .details .row .total {
	font-size: 16px;
}

.contact-button {
	position: fixed;
	right: 22px;
	bottom: 20px;
	z-index: 50;
	left: auto;
	width: auto;
	min-height: 44px;
	padding: 10px 18px;
	color: #fff;
	background: var(--ui-sidebar);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* Data grids and native tables */

.ui-data-table,
.ui-table-scroll {
	width: 100%;
	overflow-x: auto;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow-sm);
	scrollbar-color: #aebdce transparent;
	scrollbar-width: thin;
}

.ui-data-table .tableheader {
	position: static;
	display: flex;
	float: none;
	min-width: 760px;
	min-height: 52px;
	margin: 0;
	color: #526177;
	background: #f7f9fc;
	border: 0;
	border-bottom: 1px solid var(--ui-border);
}

body.app-body .ui-data-table .tableheader > .menuitem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: auto;
	min-height: 52px;
	padding: 12px 14px;
	color: #526177 !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .055em;
}

.ui-data-table .tablecontent {
	float: none;
	min-width: 760px;
	background: var(--ui-surface);
}

.ui-data-table .ui-data-row {
	position: relative;
	display: flex;
	float: none;
	width: 100%;
	min-height: 54px;
	margin: 0;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #edf1f6;
	transition: background var(--ui-transition);
}

.ui-data-table .ui-data-row:last-child {
	border-bottom: 0;
}

.ui-data-table .ui-data-row:hover {
	background: #f8fbfd;
}

body.app-body .ui-data-table .ui-data-row > .menuitem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: auto;
	min-height: 54px;
	padding: 10px 14px;
	overflow-wrap: anywhere;
	color: #334155;
	background: transparent !important;
	border: 0 !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

body.app-body .ui-data-table .ui-data-row > .menuitem:first-child,
body.app-body .ui-data-table .ui-data-row > .menuitem.licence,
body.app-body .ui-data-table .ui-data-row > .menuitem.online {
	color: var(--ui-brand-dark) !important;
	background: transparent !important;
	font-weight: 700;
}

.ui-data-table .ui-data-row > span,
.ui-data-table .ui-data-row > .shopsettingspulldown,
.ui-data-table .ui-data-row > .shoporderspulldown,
.ui-data-table .ui-data-row > .forcepulldown,
.ui-data-table .ui-data-row > .vieworderspulldown {
	flex: 0 0 100%;
	width: 100%;
}

.ui-table-scroll table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background: #fff;
}

.ui-table-scroll th,
.ui-table-scroll td {
	padding: 12px 14px;
	border-bottom: 1px solid #edf1f6;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
}

.ui-table-scroll th {
	color: #526177;
	background: #f7f9fc;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Switches */

.tablecontent .btn,
.menuitem .btn.toggleSwitch,
.menuitem > .btn {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	width: 42px;
	height: 24px;
	margin: 0;
	padding: 3px;
	background: #d9e0e8 !important;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.tablecontent .btn .inner,
.menuitem .btn .inner {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	background: #fff !important;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
	transform: translateX(0);
	transition: transform var(--ui-transition), background var(--ui-transition);
}

.tablecontent .btn .inner.on,
.menuitem .btn .inner.on {
	background: #fff !important;
	transform: translateX(18px);
}

.tablecontent .btn:has(.inner.on),
.menuitem .btn:has(.inner.on) {
	background: var(--ui-success) !important;
}

/* Forms and editor panels */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea,
.inputbox input,
.inputbox textarea,
.selectbox select {
	min-height: 42px;
	padding: 9px 12px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #cfd8e4;
	border-radius: var(--ui-radius-sm);
	font-size: 13px;
	transition: border var(--ui-transition), box-shadow var(--ui-transition);
}

textarea,
.inputbox textarea {
	min-height: 112px;
	line-height: 1.5;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.inputbox input:focus,
.inputbox textarea:focus {
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 3px rgba(46, 152, 212, .12);
	outline: 0;
}

.configcontent,
.configintcontent,
.shopsettingspulldown,
.forcepulldown,
.vieworderspulldown,
.shoporderspulldown {
	color: var(--ui-text);
	background: #f8fafc;
	border-top: 1px solid var(--ui-border);
}

.savebar {
	position: sticky;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 14px 18px;
	background: rgba(255, 255, 255, .94);
	border-top: 1px solid var(--ui-border);
	box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
	backdrop-filter: blur(8px);
}

.savebar .controls {
	display: flex;
	gap: 10px;
	width: auto;
}

.savebar .btn,
.controls > .btn,
button.submit-btn,
.ui-retry-button,
.loginbox .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 18px;
	color: #fff !important;
	background: var(--ui-brand) !important;
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.savebar .btn.dred,
.controls > .btn.dred {
	color: #9f2530 !important;
	background: #fff0f1 !important;
}

/* Loading, errors, dialogs and timeout */

.pageload,
#loading_screen.pageload {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: none;
	place-items: center;
	width: 100%;
	height: 100%;
	background: rgba(243, 246, 250, .88);
	backdrop-filter: blur(5px);
}

/* Signed-in shell: the overlay only appears once a load has taken ~200ms
   (body.is-loading-overlay, set by loadingScreenToggle); the login page still uses is-loading. */
body.app-body.is-loading-overlay #loading_screen.pageload,
#loading_screen.pageload[style*="display: block"] {
	display: grid !important;
}

body.app-body:not(.ui-ready) #loading_screen.pageload {
	display: grid !important;
}

/* The shell is hidden from the first paint (the server adds ui-initializing) until the script has built the navigation. If the script never finishes, show it anyway after 5s. */
body.app-body.ui-initializing #app-navigation,
body.app-body.ui-initializing #maincontent {
	visibility: hidden;
	animation: ui-shell-reveal 0s 5s forwards;
}
@keyframes ui-shell-reveal {
	to { visibility: visible; }
}

#svgContainer {
	display: grid;
	place-items: center;
	width: 220px;
	height: auto;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.ui-brand-loader { display: grid; place-items: center; gap: 18px; }
.ui-brand-loader > img { display: block; width: 190px; max-width: 70vw; height: auto; }
.ui-brand-loader__spinner { display: block; width: 30px; height: 30px; border: 3px solid rgba(46, 152, 212, .20); border-top-color: var(--ui-brand); border-radius: 50%; animation: ui-brand-loader-spin .75s linear infinite; }
@keyframes ui-brand-loader-spin { to { transform: rotate(360deg); } }

.ui-search-status {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 10020;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: min(430px, calc(100vw - 32px));
	padding: 14px 18px;
	border: 1px solid rgba(13, 73, 111, .16);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 15px 38px rgba(15, 35, 58, .2);
	color: #13243d;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.ui-search-status.is-visible { opacity: 1; transform: translateY(0); }
.ui-search-status__indicator { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #2d9bd3; }
.ui-search-status.is-loading .ui-search-status__indicator { border: 2px solid #d8e8f2; border-top-color: #2d9bd3; background: transparent; animation: ui-brand-loader-spin .7s linear infinite; }
.ui-search-status.is-success .ui-search-status__indicator { background: #16a36f; }
.ui-search-status.is-routing .ui-search-status__indicator { background: #ef9b23; }
.ui-search-status.is-error .ui-search-status__indicator { background: #d73d50; }

@media (max-width: 600px) {
	.ui-search-status { right: 16px; bottom: 16px; left: 16px; max-width: none; }
}

.ui-error {
	width: min(620px, 100%);
	margin: 10vh auto 0;
	padding: 34px;
	background: #fff;
	border: 1px solid #f2cfd3;
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow);
}

.ui-error__eyebrow {
	color: var(--ui-danger);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.ui-error h2 {
	margin: 8px 0 10px;
	font-size: 25px;
}

.ui-error p {
	color: var(--ui-muted);
}

.ui-error .ui-error__ref {
	display: grid;
	gap: 6px;
	margin: 18px 0;
	padding: 12px 14px;
	background: #f4f7fa;
	border: 1px dashed #cfd9e3;
	border-radius: 10px;
	font-size: 12px;
}

.ui-error .ui-error__ref code {
	color: #17314d;
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
	user-select: all;
}

.ui-empty-state {
	width: min(600px, 100%);
	margin: 10vh auto 0;
	padding: 38px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow-sm);
	text-align: center;
}

.ui-empty-state__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 18px;
	color: var(--ui-brand-dark);
	background: #e7f4fb;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 700;
}

.ui-empty-state h2 {
	margin: 0 0 8px;
	font-size: 23px;
}

.ui-empty-state p {
	margin: 0 auto 20px;
	color: var(--ui-muted);
}

.ui-empty-state__filter {
	min-height: 42px;
	padding: 9px 16px;
	color: #fff;
	background: var(--ui-brand);
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

.support-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(15, 23, 42, .64);
	backdrop-filter: blur(4px);
}

.support-modal__dialog {
	position: relative;
	width: min(920px, 100%);
	max-height: min(860px, calc(100vh - 40px));
	padding: 38px;
	overflow: auto;
	background: #fff;
	border-radius: var(--ui-radius-lg);
	box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
	transition: width .2s ease;
}

.support-modal__dialog--chat {
	width: min(900px, 100%);
}

.support-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--ui-muted);
	background: #f0f3f7;
	border: 0;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
}

.support-modal__view.is-hidden {
	display: none;
}

.support-modal__header {
	max-width: 560px;
	margin: 0 auto 26px;
	text-align: center;
}

.support-modal__header--left {
	margin-left: 0;
	text-align: left;
}

.support-modal__eyebrow {
	display: block;
	margin-bottom: 5px;
	color: var(--ui-brand);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
}

.support-modal h2 {
	margin: 0 0 6px;
	font-size: 27px;
}

.support-modal__intro {
	margin: 0;
	color: var(--ui-muted);
}

.support-modal textarea {
	width: 100%;
	min-height: 150px;
	padding: 14px;
	resize: vertical;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-sm);
	font: inherit;
}

.support-modal textarea:focus {
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 3px rgba(35, 157, 214, .13);
	outline: 0;
}

.support-modal__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.support-modal__choices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.support-modal__choices--single {
	grid-template-columns: minmax(280px, 360px);
	justify-content: center;
}

.support-modal__choice {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 128px;
	padding: 18px;
	color: var(--ui-ink);
	text-align: left;
	background: #f7fafd;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.support-modal__choice:hover,
.support-modal__choice:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(35, 157, 214, .55);
	box-shadow: 0 12px 24px rgba(31, 56, 88, .1);
	outline: 0;
}

.support-modal__choice-icon {
	display: grid;
	flex: 0 0 42px;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-right: 12px;
	color: var(--ui-brand);
	background: rgba(35, 157, 214, .1);
	border-radius: 12px;
}

.support-modal__choice--whatsapp .support-modal__choice-icon {
	color: #138f63;
	background: rgba(19, 143, 99, .1);
}

.support-modal__choice--call .support-modal__choice-icon {
	color: #17476f;
	background: rgba(23, 71, 111, .1);
}

.support-modal__choice-icon svg,
.support-modal__success-icon svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.support-modal__choice--whatsapp .support-modal__choice-icon svg {
	width: 27px;
	height: 27px;
}

.support-modal__choice-copy {
	display: grid;
	min-width: 0;
	gap: 3px;
}

.support-modal__choice-copy strong {
	font-size: 15px;
}

.support-modal__choice-copy span {
	color: var(--ui-muted);
	font-size: 12px;
	line-height: 1.4;
}

.support-modal__choice-arrow {
	margin-left: auto;
	padding-left: 8px;
	color: var(--ui-brand);
	font-size: 18px;
}

.support-modal__back {
	margin: -10px 0 22px;
	padding: 0;
	color: var(--ui-brand);
	background: transparent;
	border: 0;
	font-weight: 700;
	cursor: pointer;
}

.support-modal__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

.support-modal__submit {
	min-height: 44px;
	padding: 10px 20px;
	color: #fff;
	background: var(--ui-success);
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

.support-modal__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.support-modal__feedback {
	min-height: 20px;
	margin: 8px 0 0;
	color: var(--ui-danger);
	font-size: 13px;
}

.support-modal__chat-host {
	min-height: 480px;
	overflow: hidden;
	background: #f5f8fb;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
}

.support-modal__chat-frame {
	display: block;
	width: 100%;
	height: min(600px, 65vh);
	min-height: 480px;
	border: 0;
}

.support-modal__success {
	padding: 34px 0 12px;
	text-align: center;
}

.support-modal__success-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	color: #fff;
	background: var(--ui-success);
	border-radius: 50%;
}

.support-modal__success .support-modal__actions {
	justify-content: center;
}

@media (max-width: 980px) and (min-width: 761px) {
	.support-modal__choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.support-modal__choices--single {
		grid-template-columns: minmax(280px, 360px);
	}
}

@media (max-width: 760px) {
	.support-modal {
		padding: 10px;
	}

	.support-modal__dialog {
		max-height: calc(100vh - 20px);
		padding: 32px 18px 22px;
	}

	.support-modal__choices {
		grid-template-columns: 1fr;
	}

	.support-modal__choice {
		min-height: 84px;
	}

	.support-modal__chat-host,
	.support-modal__chat-frame {
		min-height: 60vh;
	}
}

#idle-timeout-warning {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	width: min(360px, calc(100vw - 40px));
	padding: 18px;
	color: #704e00;
	background: #fff9e6;
	border: 1px solid #f3dfa1;
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
}

.idle-warning__title {
	margin-bottom: 6px;
	font-weight: 700;
}

.idle-warning__text {
	margin-bottom: 12px;
}

#stay-active-btn,
#reload-page-btn {
	min-height: 40px;
	padding: 8px 15px;
	color: #fff;
	background: var(--ui-sidebar);
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-weight: 600;
	cursor: pointer;
}

.timeout-page {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
	background: var(--ui-bg);
}

.timeout-page__card {
	width: min(480px, 100%);
	padding: 42px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow);
	text-align: center;
}

.timeout-page__card img {
	width: 210px;
}

/* Login */

body.login-page {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 28px;
	overflow: hidden;
	background:
		radial-gradient(circle at 14% 12%, rgba(46, 152, 212, .30), transparent 32%),
		radial-gradient(circle at 88% 84%, rgba(237, 43, 92, .20), transparent 31%),
		linear-gradient(145deg, #10243b 0%, #0d1728 58%, #171323 100%);
}

body.login-page::before,
body.login-page::after {
	position: fixed;
	width: 280px;
	height: 280px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 50%;
	content: "";
}

body.login-page::before { top: -135px; right: -80px; }
body.login-page::after { bottom: -170px; left: -80px; width: 360px; height: 360px; }

.login-page .loginsidebar {
	position: relative;
	z-index: 1;
	display: block;
	float: none;
	width: min(480px, 100%);
	min-width: 0;
	height: auto;
	padding: 46px;
	overflow: visible;
	background: rgba(255, 255, 255, .98) !important;
	border: 1px solid rgba(255, 255, 255, .48);
	border-radius: 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.login-page .bgshape {
	display: none;
}

.login-page .loginsidebar .inner {
	width: 100%;
	height: auto;
	margin: 0;
}

.login-page .loginsidebar .inner .logo {
	width: 212px;
	margin: 0 auto 28px;
}

.login-page .loginsidebar .inner .logo img { display: block; width: 100%; height: auto; }

.login-page .login-step-copy { margin: 0 0 24px; text-align: center; }
.login-page .login-eyebrow { display: block; margin-bottom: 7px; color: var(--ui-brand-dark); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.login-page .login-step-copy h1 { margin: 0; color: var(--ui-text); font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
.login-page .login-step-copy p { margin: 9px auto 0; max-width: 340px; color: var(--ui-muted); font-size: 13px; line-height: 1.55; }
.login-page .login-step-copy strong { color: var(--ui-text); overflow-wrap: anywhere; }

.login-page .loginbox {
	width: 100%;
	margin: 0;
}

.login-page .loginbox .item {
	width: 100%;
	height: auto;
	margin: 12px 0;
	background: transparent;
	border-radius: var(--ui-radius-sm);
	line-height: normal;
}

.login-page .loginbox .item .inputbox {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.login-page .loginbox .item .inputbox input {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 15px;
	color: var(--ui-text);
	background: #f8fbfe;
	border: 1px solid #bfd0df;
	border-radius: 11px;
	outline: 0;
	font-size: 14px;
	line-height: 50px;
	text-align: left;
}

.login-page .loginbox .item .inputbox input:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 4px rgba(46, 152, 212, .14); }

.login-page .loginbox .item .inputbox.button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 18px;
	color: #fff;
	background: linear-gradient(135deg, #229dd7, #1687c4);
	border: 0;
	border-radius: 11px;
	box-shadow: 0 10px 22px rgba(29, 145, 199, .22);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.login-page .loginbox .item .inputbox.button:hover { background: linear-gradient(135deg, #168fca, #117bb5); }

.login-page .auth-container {
	width: 100%;
	color: var(--ui-text);
	text-align: center;
}

.login-page .code-inputs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin: 22px 0;
}

.login-page .code-inputs input {
	width: 100%;
	height: 52px;
	padding: 0;
	font-size: 21px;
	font-weight: 700;
	text-align: center;
}

.login-page .code-inputs input:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px rgba(46, 152, 212, .14); outline: 0; }

.login-page .submit-btn {
	width: 100%;
	min-height: 48px;
	color: #fff;
	background: linear-gradient(135deg, #229dd7, #1687c4);
	border: 0;
	border-radius: 11px;
	box-shadow: 0 10px 22px rgba(29, 145, 199, .20);
	font-weight: 700;
	cursor: pointer;
}

.login-page .login-back { margin: 17px 0 -5px; padding: 4px; color: var(--ui-brand-dark); background: transparent; border: 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.login-page .login-message { margin: 16px 0 0; padding: 10px 12px; color: var(--ui-danger); background: rgba(215, 58, 73, .08); border: 1px solid rgba(215, 58, 73, .25); border-radius: 10px; font-size: 13px; line-height: 1.5; text-align: center; }
.login-page .login-message[hidden] { display: none; }

/* Skip link: visible only while focused */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 10000; padding: 10px 14px; color: #fff; background: #111827; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; outline: 3px solid var(--ui-brand); outline-offset: 2px; }
#maincontent:focus { outline: none; }

/* Tablet */

@media (max-width: 1500px) and (min-width: 901px) {
	:root {
		--ui-sidebar-width: 224px;
	}

	.app-body #logo {
		padding-inline: 22px;
	}

	.app-body .dashboard .inner .row3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.app-body .dashboard .inner .row3 > div:first-child {
		grid-column: span 3;
	}
}

/* Mobile shell and card tables */

@media (max-width: 900px) {
	:root {
		--ui-sidebar-width: min(326px, 88vw);
	}

	body.app-body {
		padding-top: 72px;
	}

	.app-body .header {
		inset: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 72px;
		padding: 0 14px 0 18px;
		background: #fff;
		border-bottom: 1px solid var(--ui-border);
		box-shadow: 0 5px 20px rgba(15, 23, 42, .08);
	}

	.app-body #logo {
		flex: 0 0 auto;
		width: 164px;
		height: auto;
		padding: 0;
		background: transparent;
		border: 0;
	}

	.app-body #logo a {
		width: 164px;
	}

	#mobile-nav-toggle {
		display: block;
	}

	body.nav-open #mobile-nav-toggle > span:nth-child(2) {
		transform: translateY(6px) rotate(45deg);
	}

	body.nav-open #mobile-nav-toggle > span:nth-child(3) {
		opacity: 0;
	}

	body.nav-open #mobile-nav-toggle > span:nth-child(4) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.app-body .mainnav {
		position: fixed;
		inset: 72px auto 0 0;
		z-index: 1001;
		width: var(--ui-sidebar-width);
		height: calc(100vh - 72px);
		background: var(--ui-sidebar);
		box-shadow: 14px 0 36px rgba(15, 23, 42, .2);
		transform: translateX(-105%);
		transition: transform 240ms ease;
	}

	body.nav-open .mainnav {
		transform: translateX(0);
	}

	body.nav-open .nav-scrim {
		display: block;
	}

	.app-body #maincontent,
	.app-body #searchcontent {
		width: 100%;
		min-height: calc(100vh - 72px);
		margin: 0;
		padding: 18px 14px 86px;
	}

	.app-body .dashboard .inner .row1 {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-bottom: 14px;
	}

	.app-body .dashboard .inner .row1 > div:first-child > .title {
		font-size: 25px;
	}

	.app-body .altdashboard .inner .row1 div.toggle {
		width: 100%;
		max-width: 260px;
	}

	.app-body .dashboard .inner .row2 {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.app-body .dashboard .inner .row2 > div,
	.app-body .dashboard .inner .row2 > div:nth-child(n) {
		min-height: 150px;
		padding: 22px;
	}

	.app-body .dashboard .inner .row2 > div .total {
		font-size: 40px;
	}

	.app-body .dashboard .inner .row3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.app-body .dashboard .inner .row3 > div,
	.app-body .dashboard .inner .row3 > div:nth-child(n) {
		min-height: 190px;
	}

	.app-body .dashboard .inner .row3 > div:first-child {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.app-body .dashboard .inner .row3 > div > img {
		height: 42px;
		margin: 12px auto 18px;
	}

	.app-body .dashboard .inner .row3 > div > .total {
		font-size: 27px;
	}

	.contact-button {
		right: 14px;
		bottom: 14px;
	}

	.ui-data-table {
		overflow: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.ui-data-table .tableheader {
		display: none !important;
	}

	.ui-data-table .tablecontent {
		display: grid;
		min-width: 0;
		gap: 12px;
		background: transparent;
	}

	.ui-data-table .ui-data-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100% !important;
		min-width: 0;
		margin: 0;
		overflow: hidden;
		background: #fff;
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius);
		box-shadow: var(--ui-shadow-sm);
	}

	body.app-body .ui-data-table .ui-data-row > .menuitem {
		display: block !important;
		float: none !important;
		visibility: visible !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 64px;
		padding: 11px 13px;
		border-bottom: 1px solid #edf1f6 !important;
		font-size: 13px;
		text-align: left !important;
	}

	.ui-data-table .ui-data-row > .menuitem::before {
		display: block;
		margin-bottom: 4px;
		color: var(--ui-muted);
		font-size: 9px;
		font-weight: 700;
		line-height: 1.25;
		text-transform: uppercase;
		letter-spacing: .06em;
		content: attr(data-label);
	}

	.ui-data-table .ui-data-row > .menuitem:only-child,
	.ui-data-table .ui-data-row > .menuitem:nth-last-child(1):nth-child(odd) {
		grid-column: 1 / -1;
	}

	.ui-data-table .ui-data-row > span,
	.ui-data-table .ui-data-row > .shopsettingspulldown,
	.ui-data-table .ui-data-row > .shoporderspulldown,
	.ui-data-table .ui-data-row > .forcepulldown,
	.ui-data-table .ui-data-row > .vieworderspulldown {
		grid-column: 1 / -1;
	}

	.savebar {
		position: fixed;
		left: 0;
		padding: 11px 14px;
	}

	.support-modal__dialog {
		padding: 30px 20px 24px;
	}

	body.login-page {
		padding: 16px;
	}

	.login-page .loginsidebar {
		padding: 30px 22px;
		border-radius: 20px;
	}
}

@media (max-width: 520px) {
	.app-body .dashboard .inner .row3 {
		grid-template-columns: 1fr;
	}

	.app-body .dashboard .inner .row3 > div:first-child {
		grid-column: auto;
	}

	.app-body .dashboard .inner .row3 > div,
	.app-body .dashboard .inner .row3 > div:nth-child(n) {
		min-height: 164px;
	}

	.ui-data-table .ui-data-row {
		grid-template-columns: 1fr;
	}

	.ui-data-table .ui-data-row > .menuitem:nth-last-child(1):nth-child(odd) {
		grid-column: auto;
	}

	.login-page .code-inputs {
		gap: 5px;
	}

	.login-page .code-inputs input {
		height: 48px;
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Interface rethink: page framework, deterministic grids and settings workspace */

.app-body #maincontent.ui-page {
	display: block;
}

.ui-page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	margin: 0 0 20px;
	padding: 26px 28px;
	background:
		radial-gradient(circle at 92% 8%, rgba(46, 152, 212, .14), transparent 32%),
		linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: var(--ui-shadow-sm);
}

.ui-page-header__copy {
	min-width: 0;
}

.ui-page-header__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 17px;
}

.ui-page-header__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	background: linear-gradient(145deg, var(--ui-brand), #197fb9);
	border-radius: 14px;
	box-shadow: 0 9px 20px rgba(27, 132, 191, .18);
}

.ui-page-header__icon img {
	display: block;
	width: 23px;
	height: 23px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.ui-page-header__kicker,
.ui-settings-editor__eyebrow {
	display: block;
	margin-bottom: 7px;
	color: var(--ui-brand-dark);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .14em;
}

.ui-page-header h1,
.ui-settings-editor__header h2 {
	margin: 0;
	padding: 0 !important;
	color: var(--ui-text);
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.035em;
	text-indent: 0 !important;
}

.ui-page-header p,
.ui-settings-editor__header p {
	max-width: 680px;
	margin: 8px 0 0;
	color: var(--ui-muted);
	font-size: 13px;
	line-height: 1.55;
}

.ui-page-header__tools {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.ui-page-count {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 12px;
	color: #42526a;
	background: #eef3f8;
	border: 1px solid #e0e7ef;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.ui-page-search {
	position: relative;
	display: block;
	width: min(260px, 30vw);
}

.ui-page-search input[type="search"] {
	width: 100%;
	min-height: 42px;
	padding: 9px 38px 9px 13px;
	background: #fff;
	border: 1px solid #cfd8e4;
	border-radius: 999px;
}

.ui-page-search__icon {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ui-muted);
	border-radius: 50%;
	transform: translateY(-58%);
	pointer-events: none;
}

.ui-page-search__icon::after {
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 6px;
	height: 2px;
	background: var(--ui-muted);
	border-radius: 2px;
	transform: rotate(45deg);
	transform-origin: left center;
	content: "";
}

@media (min-width: 901px) {
	.ui-data-table.ui-grid-ready .tableheader,
	.ui-data-table.ui-grid-ready .ui-data-row {
		display: grid !important;
		grid-template-columns: var(--ui-grid-template) !important;
		align-items: stretch;
		width: 100% !important;
		min-width: 100%;
	}

	.ui-data-table.ui-grid-ready .tableheader {
		position: sticky !important;
		top: 0 !important;
		left: auto !important;
		z-index: 5;
	}

	.ui-data-table.ui-grid-ready .tablecontent {
		min-width: 0 !important;
	}

	.ui-data-table.ui-grid-ready > .allshopslistheader {
		position: sticky !important;
		top: 0 !important;
		left: auto !important;
		z-index: 6;
		display: block;
		width: 100% !important;
		min-width: 100%;
	}

	body.app-body .ui-data-table.ui-grid-ready .tableheader > .menuitem,
	body.app-body .ui-data-table.ui-grid-ready .ui-data-row > .menuitem {
		display: flex !important;
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.ui-data-table.ui-grid-ready .ui-data-row > span,
	.ui-data-table.ui-grid-ready .ui-data-row > .shopsettingspulldown,
	.ui-data-table.ui-grid-ready .ui-data-row > .shoporderspulldown,
	.ui-data-table.ui-grid-ready .ui-data-row > .forcepulldown,
	.ui-data-table.ui-grid-ready .ui-data-row > .vieworderspulldown {
		grid-column: 1 / -1;
	}
}

.ui-data-table.ui-grid-ready {
	border-radius: 16px;
}

.ui-data-table.ui-grid-ready .tableheader {
	background: #f5f7fa;
}

.ui-data-table.ui-grid-ready .ui-data-row:hover {
	background: #f7fbfd;
}

.ui-data-table.ui-grid-ready .menuitem > .subcolumn {
	display: flex;
	float: none;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: auto;
	min-height: 30px;
	font-size: 11px;
}

.ui-data-table.ui-grid-ready .menuitem:has(> .subcolumn) {
	padding: 0 5px !important;
}

.ui-data-table.ui-grid-ready .ui-data-row > .menuitem img.cross,
.ui-data-table.ui-grid-ready .ui-data-row > .menuitem img.expandbutton {
	width: 32px;
	height: 32px;
	padding: 8px;
	background: #eef5f9;
	border-radius: 9px;
	opacity: 1;
	transition: background var(--ui-transition), transform var(--ui-transition);
}

.ui-data-table.ui-grid-ready .ui-data-row > .menuitem img.cross:hover,
.ui-data-table.ui-grid-ready .ui-data-row > .menuitem img.expandbutton:hover {
	background: #dcecf5;
	transform: translateY(-1px);
}

.ui-inline-error {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 15px;
	width: min(680px, calc(100% - 40px));
	margin: 34px auto;
	padding: 22px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #f0c9ce;
	border-left: 4px solid var(--ui-danger);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}

.ui-inline-error__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: #fff;
	background: var(--ui-danger);
	border-radius: 12px;
	font-size: 20px;
	font-weight: 700;
}

.ui-inline-error__kicker {
	display: block;
	margin-bottom: 4px;
	color: var(--ui-danger);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.ui-inline-error h2 {
	margin: 0;
	font-size: 17px;
}

.ui-inline-error p {
	margin: 5px 0 12px;
	color: var(--ui-muted);
	font-size: 12px;
}

.ui-inline-error details {
	font-size: 11px;
}

.ui-inline-error summary {
	color: #536579;
	font-weight: 600;
	cursor: pointer;
}

.ui-inline-error pre {
	max-height: 150px;
	margin: 10px 0 0;
	padding: 11px;
	overflow: auto;
	color: #71313a;
	background: #fff5f6;
	border-radius: 8px;
	font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre-wrap;
}

/* Shop settings list/detail transition */

body[data-page="shopsettings"] .shopsettings .ui-data-row > .menuitem:nth-child(5):not(:empty) {
	color: #37546d;
	font-size: 11px;
	font-weight: 600;
}

body[data-page="shopsettings"] .shopsettings.expanded {
	overflow: visible;
	background: transparent;
	border: 0;
	box-shadow: none;
}

body[data-page="shopsettings"] .shopsettings.expanded > .tableheader {
	display: none !important;
}

body[data-page="shopsettings"] .shopsettings.expanded > .tablecontent {
	display: block;
	min-width: 0 !important;
	background: transparent;
}

body[data-page="shopsettings"] .shopsettings.expanded .shoprow.ui-settings-row-open {
	display: block !important;
	width: 100% !important;
	min-height: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	box-shadow: none;
}

body[data-page="shopsettings"] .shopsettings.expanded .shoprow.ui-settings-row-open > .menuitem {
	display: none !important;
}

body[data-page="shopsettings"] .shopsettings.expanded .shoprow.ui-settings-row-open > .shopsettingspulldown {
	display: block !important;
	width: 100% !important;
	color: var(--ui-text);
	background: transparent;
	border: 0;
}

#settingslistpage.ui-settings-editor,
.shopsettingspulldown #settingslistpage.ui-settings-editor {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

.ui-settings-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	margin: 0 0 14px;
	padding: 23px 26px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow-sm);
}

.ui-settings-editor__header h2 {
	font-size: 24px;
}

.ui-integer-managed-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 7px 10px;
	color: #4d6074;
	background: #f3f6f9;
	border: 1px solid #d7e0e8;
	border-radius: 10px;
	font: inherit;
	font-size: 9px;
	font-weight: 750;
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
}

.ui-integer-managed-toggle:hover,
.ui-integer-managed-toggle:focus-visible {
	color: var(--ui-brand-dark);
	background: #eaf5fb;
	border-color: #9bcce7;
	outline: none;
}

.ui-integer-managed-toggle__track {
	position: relative;
	display: inline-flex;
	flex: 0 0 30px;
	align-items: center;
	width: 30px;
	height: 18px;
	padding: 2px;
	background: #a7b4c2;
	border-radius: 999px;
	transition: background var(--ui-transition);
}

.ui-integer-managed-toggle__track > span {
	display: block;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
	transform: translateX(0);
	transition: transform var(--ui-transition);
}

.ui-integer-managed-toggle.is-active .ui-integer-managed-toggle__track {
	background: var(--ui-brand);
}

.ui-integer-managed-toggle.is-active .ui-integer-managed-toggle__track > span {
	transform: translateX(12px);
}

.ui-settings-editor .ui-integer-managed-hidden,
.ui-settings-editor #settings_tab_buttons > li.ui-integer-category-hidden {
	display: none !important;
}

.ui-settings-search {
	position: relative;
	z-index: 80;
	flex: 0 1 390px !important;
	min-width: 250px;
	max-width: 390px;
}

.ui-settings-search__field {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
}

.ui-settings-search__field input {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 42px 0 42px;
	color: var(--ui-text);
	background: #f8fafc;
	border: 1px solid #cfd9e5;
	border-radius: 999px;
	font: inherit;
	font-size: 13px;
	outline: 0;
	transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}

.ui-settings-search__field input:focus {
	background: #fff;
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 3px rgba(46, 152, 212, .13);
}

.ui-settings-search__field input::-webkit-search-cancel-button {
	display: none;
}

.ui-settings-search__icon {
	position: absolute;
	left: 15px;
	z-index: 1;
	width: 16px;
	height: 16px;
	border: 2px solid #60748a;
	border-radius: 50%;
	pointer-events: none;
}

.ui-settings-search__icon::after {
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 7px;
	height: 2px;
	background: #60748a;
	border-radius: 2px;
	transform: rotate(45deg);
	content: "";
}

.ui-settings-search__clear {
	position: absolute;
	right: 8px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: #617286;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ui-settings-search__clear[hidden] {
	display: none;
}

.ui-settings-search__clear::before,
.ui-settings-search__clear::after {
	position: absolute;
	width: 12px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	content: "";
}

.ui-settings-search__clear::before { transform: rotate(45deg); }
.ui-settings-search__clear::after { transform: rotate(-45deg); }

.ui-settings-search__clear:hover,
.ui-settings-search__clear:focus-visible {
	color: var(--ui-text);
	background: #e9eff5;
}

.ui-settings-search__results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 100;
	max-height: min(430px, 58vh);
	padding: 7px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #d7e0ea;
	border-radius: 13px;
	box-shadow: 0 20px 45px rgba(15, 35, 58, .2);
}

.ui-settings-search__results[hidden] {
	display: none;
}

.ui-settings-search__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 10px 11px;
	color: var(--ui-text);
	background: transparent;
	border: 0;
	border-radius: 9px;
	text-align: left;
	cursor: pointer;
}

.ui-settings-search__result + .ui-settings-search__result {
	border-top: 1px solid #edf1f5;
}

.ui-settings-search__result:hover,
.ui-settings-search__result:focus-visible {
	background: #eef7fd;
	outline: 0;
}

.ui-settings-search__result-copy {
	display: block;
	min-width: 0;
}

.ui-settings-search__result-copy strong,
.ui-settings-search__result-copy small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-settings-search__result-copy strong {
	font-size: 13px;
	font-weight: 700;
}

.ui-settings-search__result-copy small {
	margin-top: 3px;
	color: var(--ui-muted);
	font-size: 10px;
}

.ui-settings-search__tab {
	flex: 0 0 auto;
	max-width: 126px;
	padding: 5px 8px;
	overflow: hidden;
	color: #0872ad;
	background: #e7f4fb;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .04em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ui-settings-search__empty,
.ui-settings-search__more {
	margin: 0;
	padding: 13px 11px;
	color: var(--ui-muted);
	font-size: 11px;
}

.ui-settings-search__more {
	padding-top: 8px;
	border-top: 1px solid #edf1f5;
}

.ui-settings-editor .settingsinfo > .inner > .item.ui-setting-search-hit {
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 4px rgba(46, 152, 212, .17), 0 12px 28px rgba(28, 102, 145, .15);
	animation: ui-setting-search-pulse 850ms ease-out 2;
}

@keyframes ui-setting-search-pulse {
	0%, 100% { background: #fff; }
	45% { background: #eaf7ff; }
}

.ui-settings-editor__close {
	position: relative;
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: #506176;
	background: #f1f5f8;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.ui-settings-editor__close > span::before,
.ui-settings-editor__close > span::after {
	position: absolute;
	top: 20px;
	left: 12px;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	content: "";
}

.ui-settings-editor__close > span::before {
	transform: rotate(45deg);
}

.ui-settings-editor__close > span::after {
	transform: rotate(-45deg);
}

#settingslistpage.ui-settings-editor > .settings {
	display: grid;
	float: none;
	grid-template-columns: 236px minmax(0, 1fr);
	align-items: start;
	width: 100%;
	min-height: 560px;
	margin: 0;
	padding: 0 !important;
	background: transparent;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow-sm);
}

.ui-settings-editor .settingsnav {
	position: sticky;
	top: 14px;
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: 100%;
	max-height: calc(100vh - 120px);
	margin: 0;
	padding: 18px 12px;
	overflow-y: auto;
	background: #182233;
	border-radius: 13px 0 0 13px;
}

.ui-settings-editor .settingsnav .menu-toggle {
	display: none;
}

.ui-settings-editor #settings_tab_buttons {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.ui-settings-editor #settings_tab_buttons > li {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 39px;
	margin: 2px 0;
	padding: 9px 11px;
	color: #aebbc9;
	background: transparent;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: .015em;
	transition: color var(--ui-transition), background var(--ui-transition), padding var(--ui-transition);
}

.ui-settings-editor #settings_tab_buttons > li::before {
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-right: 10px;
	background-image: var(--ui-tab-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: grayscale(1) brightness(1.65);
	opacity: .78;
	content: "";
}

.ui-settings-editor #settings_tab_buttons > li.active::before,
.ui-settings-editor #settings_tab_buttons > li:hover::before {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.ui-settings-editor #settings_tab_buttons > li:hover,
.ui-settings-editor #settings_tab_buttons > li:focus-visible {
	padding-left: 15px;
	color: #fff;
	background: rgba(255, 255, 255, .07);
}

.ui-settings-editor #settings_tab_buttons > li.active {
	color: #fff;
	background: linear-gradient(135deg, rgba(46, 152, 212, .95), rgba(46, 152, 212, .72));
	box-shadow: 0 7px 18px rgba(7, 89, 139, .22);
}

.ui-settings-editor .settingswrapper {
	grid-column: 2;
	grid-row: 1;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 22px;
	background: #f4f7fa;
	border-radius: 0 13px 13px 0;
}

.ui-settings-editor .settingsinfo {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
}

.ui-settings-editor .settingsinfo > h2 {
	margin: 0 0 14px;
	padding: 0;
	color: var(--ui-text);
	background: transparent;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.ui-settings-editor .settingsinfo > .inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.ui-settings-editor .settingsinfo > .inner > .item {
	position: relative;
	display: block;
	float: none;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 108px;
	margin: 0;
	padding: 16px;
	overflow: visible;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
	text-align: left;
}

.ui-settings-editor .settingsinfo > .inner > .item:nth-of-type(odd) {
	margin-right: 0;
}

.ui-settings-editor .ui-integer-managed-note {
	display: flex;
	grid-column: 1 / -1;
	align-items: flex-start;
	gap: 5px;
	padding: 13px 15px;
	color: #6b4d10;
	background: #fff9e8;
	border: 1px solid #f0d58d;
	border-left: 4px solid #d8a52c;
	border-radius: 10px;
	flex-direction: column;
}

.ui-settings-editor .ui-integer-managed-note strong {
	color: #5c430f;
	font-size: 12px;
	font-weight: 800;
}

.ui-settings-editor .ui-integer-managed-note span {
	font-size: 10px;
	line-height: 1.45;
}

.ui-settings-editor .settingsinfo > .inner > .item.ui-integer-managed-setting {
	padding-right: 132px;
	background: #f7f9fb;
	border-color: #d7dee7;
	box-shadow: inset 3px 0 0 #9aa9b8;
	cursor: not-allowed;
}

.ui-settings-editor .ui-integer-managed-editable {
	display: contents;
}

.ui-settings-editor .settingsinfo > .inner > .item.ui-integer-managed-setting--editable {
	background: #fff;
	border-color: #cbdde9;
	box-shadow: inset 3px 0 0 var(--ui-brand);
	cursor: default;
}

.ui-settings-editor .ui-integer-managed-setting--editable .ui-integer-managed-badge {
	color: #17658f !important;
	background: #e7f5fc;
	border-color: #b9ddf0;
}

.ui-settings-editor .ui-integer-managed-setting--editable .inputbox,
.ui-settings-editor .ui-integer-managed-setting--editable .option,
.ui-settings-editor .ui-integer-managed-setting--editable .button-group > .btn {
	pointer-events: auto;
}

.ui-settings-editor .ui-integer-managed-setting--editable .button-group > .btn,
.ui-settings-editor .ui-integer-managed-setting--editable > .option > .btn {
	filter: none;
	opacity: 1;
}

.ui-settings-editor .ui-integer-managed-badge {
	position: absolute;
	top: 13px;
	right: 13px;
	display: inline-flex !important;
	width: auto !important;
	margin: 0 !important;
	padding: 4px 7px !important;
	color: #536477 !important;
	background: #e8edf2;
	border: 1px solid #d3dbe4;
	border-radius: 999px;
	font-size: 8px !important;
	font-weight: 800;
	line-height: 1.2 !important;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.ui-settings-editor .ui-integer-managed-setting:not(.ui-integer-managed-setting--editable) .inputbox,
.ui-settings-editor .ui-integer-managed-setting:not(.ui-integer-managed-setting--editable) .option,
.ui-settings-editor .ui-integer-managed-setting:not(.ui-integer-managed-setting--editable) .button-group > .btn {
	pointer-events: none;
}

.ui-settings-editor .ui-integer-managed-setting input:disabled,
.ui-settings-editor .ui-integer-managed-setting select:disabled,
.ui-settings-editor .ui-integer-managed-setting textarea:disabled {
	color: #526171 !important;
	-webkit-text-fill-color: #526171;
	background: #edf1f5 !important;
	border-color: #d4dce5 !important;
	opacity: 1;
	cursor: not-allowed;
}

.ui-settings-editor .ui-integer-managed-setting:not(.ui-integer-managed-setting--editable) .button-group > .btn,
.ui-settings-editor .ui-integer-managed-setting:not(.ui-integer-managed-setting--editable) > .option > .btn {
	filter: saturate(.35);
	opacity: .72;
}

.ui-settings-editor .settingsinfo > .inner > .item > span,
.ui-settings-editor .settingsinfo .button-group > span {
	float: none;
	width: auto;
	padding: 0;
	color: var(--ui-muted);
	font-size: 11px;
	line-height: 1.45;
}

/* Legacy setting fragments render the name and help copy as adjacent spans.
   Keep them on separate lines so long descriptions cannot run into the name. */
.ui-settings-editor .settingsinfo > .inner > .item > span {
	display: block;
}

.ui-settings-editor .settingsinfo > .inner > .item > span:not(.title) {
	margin-top: 3px;
}

.ui-settings-editor .settingsinfo > .inner > .item > span.title,
.ui-settings-editor .settingsinfo .button-group > span.title {
	margin-bottom: 5px;
	color: var(--ui-text);
	font-size: 13px;
	font-weight: 700;
}

.ui-settings-editor .settingsinfo .button-group {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 11px;
	align-items: center;
	width: 100%;
	min-height: 72px;
}

.ui-settings-editor .settingsinfo .button-group > .btn {
	grid-row: 1 / 3;
}

.ui-settings-editor .settingsinfo .button-group > span.title {
	align-self: end;
}

.ui-settings-editor .settingsinfo .button-group > span:not(.title) {
	align-self: start;
}

.ui-settings-editor .settingsinfo .button-group > .btn,
.ui-settings-editor .settingsinfo > .inner > .item > .option > .btn {
	position: relative;
	display: inline-flex;
	float: none;
	align-items: center;
	width: 42px;
	height: 24px;
	margin: 0;
	padding: 3px;
	background: #d7dfe8 !important;
	border: 0;
	border-radius: 999px;
}

.ui-settings-editor .settingsinfo .button-group > .btn > .inner,
.ui-settings-editor .settingsinfo > .inner > .item > .option > .btn > .inner {
	position: static;
	display: block;
	width: 18px !important;
	height: 18px;
	margin: 0;
	padding: 0 !important;
	background: #fff !important;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
	transform: translateX(0);
}

.ui-settings-editor .settingsinfo .button-group > .btn > .inner.on,
.ui-settings-editor .settingsinfo > .inner > .item > .option > .btn > .inner.on {
	transform: translateX(18px);
}

.ui-settings-editor .settingsinfo .button-group > .btn:has(.inner.on),
.ui-settings-editor .settingsinfo > .inner > .item > .option > .btn:has(.inner.on) {
	background: var(--ui-success) !important;
}

.ui-settings-editor .settingsinfo > .inner > .item > .option {
	display: flex;
	float: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 9px 0 0;
}

.ui-settings-editor .settingsinfo > .inner > .item > .option > span.title {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
}

.ui-settings-editor .inputbox,
.ui-settings-editor .selectbox,
.ui-settings-editor .settingsinfo > .inner > .item > .option:has(> select) {
	display: block;
	float: none;
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
	background: transparent;
}

.ui-settings-editor .inputbox input,
.ui-settings-editor .inputbox textarea,
.ui-settings-editor .option select,
.ui-settings-editor .selectbox select {
	float: none !important;
	width: 100% !important;
	min-height: 42px;
	padding: 9px 11px !important;
	background: #fff;
	border: 1px solid #cfd8e4 !important;
	border-radius: 8px;
}

.ui-settings-editor .warning {
	top: 12px;
	right: 12px;
	bottom: auto;
	width: 20px;
	height: 20px;
	background-size: 18px;
}

.shopsettingspulldown > .savebar {
	position: sticky;
	right: auto;
	bottom: 0;
	left: auto;
	z-index: 30;
	justify-content: flex-end;
	width: 100%;
	margin-top: 14px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: 0 -7px 22px rgba(15, 23, 42, .08);
}

.shopsettingspulldown > .savebar .controls {
	display: flex;
	float: none;
	gap: 9px;
	width: auto;
	margin: 0;
}

.shopsettingspulldown > .savebar .controls .btn {
	float: none;
	width: auto;
	min-width: 100px;
	min-height: 40px;
	margin: 0;
	padding: 9px 17px;
	border-radius: 8px;
	font-size: 11px;
}

@media (max-width: 900px) {
	.ui-page-header {
		align-items: stretch;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 14px;
		padding: 21px 18px;
		border-radius: 16px;
	}

	.ui-page-header h1 {
		font-size: 27px;
	}

	.ui-page-header__identity {
		align-items: flex-start;
	}

	.ui-page-header__icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}

	.ui-page-header__tools {
		width: 100%;
	}

	.ui-page-search {
		flex: 1 1 auto;
		width: auto;
	}

	.ui-page-count {
		flex: 0 0 auto;
	}

	body[data-page="shopsettings"] .shopsettings.expanded .shoprow.ui-settings-row-open {
		overflow: visible;
	}

	.ui-settings-editor__header {
		padding: 19px 17px;
	}

	.ui-settings-editor__header h2 {
		font-size: 21px;
	}

	#settingslistpage.ui-settings-editor > .settings {
		display: block;
		min-height: 0;
		border: 0;
		box-shadow: none;
	}

	.ui-settings-editor .settingsnav {
		position: relative;
		top: auto;
		width: 100%;
		max-height: none;
		padding: 10px;
		border-radius: 12px;
	}

	.ui-settings-editor .settingsnav .menu-toggle {
		position: relative;
		top: auto;
		left: auto;
		display: flex;
		float: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 0 13px;
		overflow: hidden;
		color: #fff;
		background: rgba(255, 255, 255, .08);
		border: 0;
		border-radius: 8px;
	}

	.ui-settings-editor .settingsnav .menu-toggle .hamburger,
	.ui-settings-editor .settingsnav .menu-toggle .hamburger::before,
	.ui-settings-editor .settingsnav .menu-toggle .hamburger::after {
		position: absolute;
		left: 0;
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		content: "";
	}

	.ui-settings-editor .settingsnav .menu-toggle .hamburger {
		position: relative;
		top: auto;
		left: auto;
		flex: 0 0 18px;
		transform: none;
	}

	.ui-settings-editor .settingsnav .menu-toggle .hamburger::before {
		top: -6px;
	}

	.ui-settings-editor .settingsnav .menu-toggle .hamburger::after {
		top: 6px;
	}

	.ui-settings-editor .settingsnav .menu-toggle::after {
		margin-left: 9px;
		font-size: 11px;
		font-weight: 700;
		content: "Choose settings section";
	}

	.ui-settings-editor #settings_tab_buttons {
		max-height: 46vh;
		margin-top: 8px;
		overflow-y: auto;
	}

	.ui-settings-editor .settingswrapper {
		width: 100%;
		margin-top: 12px;
		padding: 16px 0 0;
		background: transparent;
		border-radius: 0;
	}

	.ui-settings-editor .settingsinfo > .inner {
		grid-template-columns: 1fr;
	}

	.ui-settings-editor .settingsinfo > .inner > .item {
		min-height: 100px;
	}

	.shopsettingspulldown > .savebar {
		position: fixed;
		left: 0;
		margin: 0;
		border-radius: 0;
	}
}

@media (max-width: 520px) {
	.ui-page-header__tools {
		align-items: stretch;
		flex-direction: column;
	}

	.ui-page-count {
		align-self: flex-start;
	}

	.ui-settings-editor__header {
		position: relative;
		align-items: flex-start;
		flex-wrap: wrap;
		padding-right: 62px;
	}

	.ui-settings-editor__header > div:first-child {
		flex: 1 1 100%;
	}

	.ui-settings-editor__header .ui-settings-search {
		flex: 1 1 100% !important;
		min-width: 0;
		max-width: none;
	}

	.ui-settings-editor__header .ui-integer-managed-toggle {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ui-settings-editor__header .ui-settings-editor__close {
		position: absolute;
		top: 16px;
		right: 15px;
	}

	body[data-page="shopsettings"] .ui-data-table:not(.expanded) .ui-data-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body[data-page="shopsettings"] .ui-data-table:not(.expanded) .ui-data-row > .menuitem {
		min-height: 66px;
	}
}

/* Live Orders: operational overview and shop cards */

body[data-page="liveview"] #maincontent {
	padding-bottom: 36px;
}

body[data-page="liveview"] .ui-page-header {
	align-items: center;
	margin-bottom: 14px;
	padding: 19px 24px;
}

body[data-page="liveview"] .ui-page-header__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
}

body[data-page="liveview"] .ui-page-header h1 {
	font-size: 28px;
}

body[data-page="liveview"] .ui-live-orders-page {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

.ui-live-summary {
	width: 100%;
	margin: 0 0 14px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 16px;
	box-shadow: var(--ui-shadow-sm);
}

.ui-live-summary > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 14px;
}

.ui-live-summary > header > div > span {
	display: block;
	margin-bottom: 3px;
	color: var(--ui-brand-dark);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.ui-live-summary h2 {
	margin: 0;
	color: var(--ui-text);
	font-size: 18px;
	line-height: 1.25;
}

.ui-live-sort {
	display: flex;
	align-items: center;
	gap: 9px;
}

.ui-live-sort > span {
	color: var(--ui-muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}

.ui-live-sort select {
	width: 190px;
	min-height: 38px;
	padding: 7px 30px 7px 10px;
	font-size: 11px;
}

.ui-live-summary__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ui-live-stat {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 12px;
	background: #f7f9fc;
	border: 1px solid #e6ebf1;
	border-radius: 12px;
}

.ui-live-stat__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: linear-gradient(145deg, #2e98d4, #197fb9);
	border-radius: 10px;
}

.ui-live-stat__icon img {
	width: 19px;
	height: 19px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.ui-live-stat div {
	min-width: 0;
}

.ui-live-stat div > span,
.ui-live-stat small {
	display: block;
	overflow: hidden;
	color: var(--ui-muted);
	font-size: 9px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-live-stat div > span {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ui-live-stat strong {
	display: block;
	margin: 1px 0;
	color: var(--ui-text);
	font-size: 18px;
	line-height: 1.15;
}

body[data-page="liveview"] .shops.ui-live-orders {
	display: block;
	width: 100%;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body[data-page="liveview"] .ui-live-orders > .allshopslistheader {
	display: none !important;
}

body[data-page="liveview"] .ui-live-orders > .tablecontent {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: 100%;
	min-width: 0 !important;
	background: transparent;
}

body.app-body[data-page="liveview"] .ui-data-table.ui-grid-ready .tablecontent .ui-data-row.ui-live-order-card {
	display: block !important;
	grid-template-columns: none !important;
	width: 100% !important;
	min-width: 0;
	min-height: 0;
	margin: 0;
	overflow: visible;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 16px;
	box-shadow: var(--ui-shadow-sm);
	transition: border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

body.app-body[data-page="liveview"] .ui-data-table.ui-grid-ready .tablecontent .ui-data-row.ui-live-order-card:hover {
	background: #fff;
	border-color: #cad9e6;
	box-shadow: 0 9px 26px rgba(15, 23, 42, .075);
	transform: translateY(-1px);
}

body.app-body[data-page="liveview"] .ui-data-table.ui-grid-ready .ui-live-order-card > .menuitem.ui-live-order-source {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

.ui-live-order-card__layout {
	display: block;
	width: 100%;
}

.ui-live-order-card__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 42px;
	align-items: center;
	gap: 18px;
	min-height: 68px;
	padding: 12px 16px;
	border-bottom: 1px solid #edf1f5;
}

.ui-live-order-card__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}

.ui-live-order-card__licence {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	height: 32px;
	padding: 5px 9px;
	color: #fff;
	background: #172235;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
}

.ui-live-order-card__identity > div {
	min-width: 0;
}

.ui-live-order-card__identity h3 {
	margin: 0;
	overflow: hidden;
	color: var(--ui-text);
	font-size: 15px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-live-order-card__identity p {
	margin: 3px 0 0;
	color: var(--ui-muted);
	font-size: 10px;
}

.ui-live-order-card__average {
	min-width: 104px;
	padding-right: 4px;
	text-align: right;
}

.ui-live-order-card__average span {
	display: block;
	color: var(--ui-muted);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .055em;
}

.ui-live-order-card__average strong {
	display: block;
	margin-top: 2px;
	font-size: 18px;
	line-height: 1.2;
}

.ui-live-order-card__action {
	display: grid;
	place-items: center;
}

.ui-live-order-card__action img {
	width: 38px !important;
	height: 38px !important;
	padding: 10px !important;
	background: #eaf4fa !important;
	border-radius: 11px !important;
	cursor: pointer;
}

.ui-live-order-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
	gap: 14px;
	padding: 14px 16px 16px;
}

.ui-live-channels,
.ui-live-breakdowns {
	min-width: 0;
}

.ui-live-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.ui-live-section-title h4,
.ui-live-mix h4 {
	margin: 0;
	color: var(--ui-text);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .055em;
}

.ui-live-section-title span {
	color: var(--ui-muted);
	font-size: 9px;
}

.ui-live-channels__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 7px;
}

.ui-live-channel {
	min-width: 0;
	padding: 10px;
	background: #f7f9fc;
	border: 1px solid #e5eaf0;
	border-radius: 10px;
}

.ui-live-channel__name {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	color: #46576c;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-live-channel__name i {
	display: block;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: #172235;
	border-radius: 50%;
}

.ui-live-channel--justeat .ui-live-channel__name i {
	background: #f7a719;
}

.ui-live-channel--ubereats .ui-live-channel__name i {
	background: #0aa76b;
}

.ui-live-channel--deliveroo .ui-live-channel__name i {
	background: #29aaa7;
}

.ui-live-channel--kiosk .ui-live-channel__name i {
	background: #7754bc;
}

.ui-live-channel strong {
	display: block;
	margin: 7px 0 1px;
	font-size: 14px;
	line-height: 1.2;
}

.ui-live-channel small {
	display: block;
	color: var(--ui-muted);
	font-size: 9px;
}

.ui-live-channel.is-zero {
	background: #fbfcfd;
	opacity: .68;
}

.ui-live-breakdowns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ui-live-mix {
	min-width: 0;
	padding: 10px;
	background: #f7f9fc;
	border: 1px solid #e5eaf0;
	border-radius: 10px;
}

.ui-live-mix h4 {
	margin-bottom: 8px;
}

.ui-live-mix__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ui-live-mix__chip {
	display: inline-grid;
	grid-template-columns: 14px minmax(0, auto) auto;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	min-height: 25px;
	padding: 4px 7px;
	color: #34485e;
	background: #fff;
	border: 1px solid #dfe6ed;
	border-radius: 999px;
	font-size: 8px;
	line-height: 1;
}

.ui-live-mix__chip img {
	width: 13px;
	height: 13px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) opacity(.65);
}

.ui-live-mix__chip > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-live-mix__chip strong {
	color: var(--ui-text);
	font-size: 9px;
}

.ui-live-mix__chip.is-zero {
	color: #8996a7;
	background: transparent;
	opacity: .62;
}

@media (max-width: 1120px) and (min-width: 901px) {
	.ui-live-order-card__body {
		grid-template-columns: 1fr;
	}

	.ui-live-breakdowns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	body[data-page="liveview"] .ui-page-header {
		align-items: stretch;
		padding: 18px;
	}

	.ui-live-summary > header {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.ui-live-sort {
		justify-content: space-between;
	}

	.ui-live-sort select {
		flex: 1 1 auto;
		width: auto;
		max-width: 240px;
	}

	.ui-live-summary__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body[data-page="liveview"] .ui-live-orders > .tablecontent {
		display: grid;
		gap: 12px;
	}

	body[data-page="liveview"] .ui-live-order-card {
		display: block !important;
		padding: 0;
	}

	.ui-live-order-card__body {
		grid-template-columns: 1fr;
	}

	.ui-live-breakdowns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ui-live-summary {
		padding: 14px;
	}

	.ui-live-stat {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 8px;
		padding: 9px;
	}

	.ui-live-stat__icon {
		width: 32px;
		height: 32px;
	}

	.ui-live-stat__icon img {
		width: 16px;
		height: 16px;
	}

	.ui-live-stat strong {
		font-size: 15px;
	}

	.ui-live-order-card__top {
		grid-template-columns: minmax(0, 1fr) 38px;
		gap: 10px;
		padding: 12px;
	}

	.ui-live-order-card__average {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 9px 0 0;
		border-top: 1px solid #edf1f5;
		text-align: left;
	}

	.ui-live-order-card__action {
		grid-column: 2;
		grid-row: 1;
	}

	.ui-live-order-card__body {
		padding: 12px;
	}

	.ui-live-channels__grid,
	.ui-live-breakdowns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-live-section-title span {
		display: none;
	}
}

/* Shop scope panel */

.app-body .mainnav > ul > li.filter.is-open {
	z-index: 1002;
}

.app-body .mainnav .ui-shop-filter.ui-shop-filter {
	margin: 5px 0 10px;
	color: #dce7f5;
	background: #182235 !important;
	border: 1px solid rgba(148, 163, 184, .16);
	border-radius: 14px;
	box-shadow: 0 18px 35px rgba(2, 6, 23, .24);
}

.app-body .mainnav .ui-shop-filter .ui-shop-filter__body {
	padding: 14px;
}

.ui-shop-filter__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}

.ui-shop-filter__icon {
	display: grid;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	place-items: center;
	background: linear-gradient(145deg, #2e98d4, #1679b4);
	border-radius: 10px;
	box-shadow: 0 7px 16px rgba(20, 120, 178, .26);
}

.ui-shop-filter__icon img {
	width: 18px;
	height: 18px;
	filter: brightness(0) invert(1);
}

.ui-shop-filter__heading > span:last-child {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.ui-shop-filter__heading small {
	color: #74c5ef;
	font-size: 8px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.ui-shop-filter__heading strong {
	color: #fff;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
}

.app-body .mainnav .ui-shop-filter .ui-shop-filter__intro {
	margin: 0 0 13px;
	padding: 0;
	color: #9cacbf;
	background: transparent;
	border-radius: 0;
	font-size: 9px;
	line-height: 1.55;
}

.ui-shop-filter__label {
	display: block;
	margin: 0 0 6px;
	color: #c9d5e4;
	font-size: 9px;
	font-weight: 600;
}

.app-body .mainnav .ui-shop-filter .select2-container {
	display: block;
	margin: 0;
}

.app-body .mainnav .ui-shop-filter .select2-container--default .select2-selection--multiple {
	min-height: 46px;
	max-height: 116px;
	padding: 5px 7px;
	overflow-x: hidden;
	overflow-y: auto;
	color: #182235;
	background: #fff;
	border: 1px solid #cdd8e5;
	border-radius: 10px;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.app-body .mainnav .ui-shop-filter .select2-container--open .select2-selection--multiple {
	border-color: #54addd;
	box-shadow: 0 0 0 3px rgba(46, 152, 212, .18);
}

.app-body .mainnav .ui-shop-filter .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 0;
}

.app-body .mainnav .ui-shop-filter .select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	float: none;
	max-width: 100%;
	margin: 0 !important;
	padding: 4px 7px !important;
	overflow: hidden;
	color: #126b9d;
	background: #e7f4fb !important;
	border: 0 !important;
	border-radius: 7px;
	font-size: 8px;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-body .mainnav .ui-shop-filter .select2-selection--multiple .select2-selection__choice__remove {
	position: static !important;
	display: inline-grid;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: -2px 0 -2px -3px;
	padding: 0 !important;
	place-items: center;
	color: #4385aa !important;
	background: rgba(46, 152, 212, .10);
	border: 0;
	font-size: 13px !important;
}

.app-body .mainnav .ui-shop-filter .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff !important;
	background: var(--ui-danger) !important;
}

.app-body .mainnav .ui-shop-filter .select2-search--inline {
	display: block;
	flex: 1 1 110px;
	min-width: 70px;
}

.app-body .mainnav .ui-shop-filter .select2-search--inline .select2-search__field {
	display: block !important;
	width: 100% !important;
	min-width: 60px;
	height: 27px;
	margin: 0;
	padding: 3px 2px;
	color: #24344a;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	font-size: 10px;
	line-height: 20px;
	color-scheme: light;
}

.app-body .mainnav .ui-shop-filter .select2-search--inline .select2-search__field::placeholder {
	color: #718096;
}

.app-body .mainnav .ui-shop-filter .ui-shop-filter__footer {
	display: grid;
	gap: 11px;
	margin: 12px 0 0;
	padding: 11px 0 0;
	background: transparent;
	border-top: 1px solid rgba(148, 163, 184, .13);
	border-radius: 0;
}

.ui-shop-filter__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	line-height: 1.35;
}

.ui-shop-filter__status strong {
	color: #f6f9fd;
	font-size: 9px;
	font-weight: 600;
}

.ui-shop-filter__status small {
	color: #8293a9;
	font-size: 8px;
	white-space: nowrap;
}

.ui-shop-filter__actions {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: 7px;
}

.app-body .mainnav .ui-shop-filter .filter-apply,
.app-body .mainnav .ui-shop-filter .filter-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 7px 9px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 9px;
	font-weight: 650;
	line-height: 1;
}

.app-body .mainnav .ui-shop-filter .filter-apply {
	color: #fff;
	background: linear-gradient(145deg, #2e98d4, #1478b2);
	box-shadow: 0 6px 14px rgba(20, 120, 178, .20);
}

.app-body .mainnav .ui-shop-filter .filter-clear {
	color: #c1cede;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(148, 163, 184, .16);
}

.app-body .mainnav .ui-shop-filter .filter-apply:hover,
.app-body .mainnav .ui-shop-filter .filter-clear:hover:not(:disabled) {
	filter: brightness(1.08);
}

.app-body .mainnav .ui-shop-filter .filter-clear:disabled {
	cursor: not-allowed;
	opacity: .38;
}

.ui-shop-filter__badge {
	display: none;
	min-width: 19px;
	height: 19px;
	margin-left: auto;
	padding: 0 5px;
	color: #fff;
	background: var(--ui-brand);
	border-radius: 999px;
	font-size: 8px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.ui-shop-filter__badge[style*="display: inline"] {
	display: inline-block !important;
}

.mainnav .filter.has-selection > .nav-trigger::before {
	background: var(--ui-brand);
}

.ui-shop-filter-results {
	margin-top: 6px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d4deea;
	border-radius: 12px;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
}

.ui-shop-filter-results .select2-search--dropdown {
	padding: 9px;
	background: #f6f9fc;
	border-bottom: 1px solid #e3e9f1;
}

.ui-shop-filter-results .select2-search__field {
	height: 38px;
	padding: 7px 10px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #cbd6e3 !important;
	border-radius: 8px;
	font-size: 11px;
}

.ui-shop-filter-results .select2-results__options {
	max-height: 250px !important;
	padding: 5px;
}

.ui-shop-filter-results .select2-results__option {
	margin: 1px 0;
	padding: 8px 9px;
	color: #35465b;
	border-radius: 7px;
	font-size: 10px;
}

.ui-shop-filter-results .select2-results__option--highlighted[aria-selected] {
	color: #fff;
	background: var(--ui-brand);
}

.ui-shop-filter-results .select2-results__option[aria-selected="true"] {
	color: #126b9d;
	background: #eaf5fb;
}

.app-body .fulloverlay.active {
	background: rgba(15, 23, 42, .46);
	backdrop-filter: blur(1px);
}

/* Normalise legacy switch positioning so active thumbs stay inside tracks. */

body.app-body .tablecontent .menuitem > .btn > .inner,
body.app-body .tablecontent .menuitem > .btn:hover > .inner,
body.app-body .tablecontent .menuitem > .btn > .inner.on,
body.app-body .tablecontent .menuitem > .btn:hover > .inner.on {
	position: static !important;
	inset: auto !important;
	display: block;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	margin: 0;
	padding: 0 !important;
	background: #fff !important;
	border-radius: 50%;
}

body.app-body .tablecontent .menuitem > .btn > .inner {
	transform: translateX(0);
}

body.app-body .tablecontent .menuitem > .btn > .inner.on {
	transform: translateX(18px);
}

@media (max-width: 900px) {
	.app-body .mainnav .ui-shop-filter.ui-shop-filter {
		margin-right: 3px;
		margin-left: 3px;
	}

	.app-body .mainnav .ui-shop-filter .ui-shop-filter__body {
		padding: 15px;
	}
}

/* Grouped settings scope and conflict cues */

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope {
	display: grid !important;
	float: none;
	grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
	align-items: center;
	gap: 7px;
	width: 100%;
	margin: 0 0 13px;
	padding: 11px;
	color: #d7e3f1;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(148, 163, 184, .16);
	border-radius: 11px;
	cursor: pointer;
	transition: border-color var(--ui-transition), background var(--ui-transition);
}

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope:hover,
.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope:focus-visible {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(84, 173, 221, .42);
}

.ui-settings-scope__title {
	display: flex;
	grid-column: 1 / -1;
	flex-direction: column;
	margin-bottom: 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.ui-settings-scope__title small {
	color: #6fc0ea;
	font-size: 7px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.ui-settings-scope__title strong {
	margin-top: 2px;
	color: #fff;
	font-size: 10px;
	font-weight: 650;
	line-height: 1.3;
}

.ui-settings-editor .settingsnav .ui-settings-scope > .styletoggle,
.ui-settings-editor .settingsnav .ui-settings-scope > .licencetoggle {
	display: flex;
	float: none;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 6px;
	flex-direction: column;
	color: #8192a8;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
	line-height: 1.2;
	text-align: left;
}

.ui-settings-editor .settingsnav .ui-settings-scope > .licencetoggle {
	text-align: right;
}

.ui-settings-scope > .styletoggle small,
.ui-settings-scope > .licencetoggle small {
	font-size: 6px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.ui-settings-scope > .styletoggle strong,
.ui-settings-scope > .licencetoggle strong {
	margin-top: 2px;
	overflow: hidden;
	font-size: 9px;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-settings-scope:not(.is-branch-mode) > .styletoggle,
.ui-settings-scope.is-branch-mode > .licencetoggle {
	color: #fff;
	background: rgba(46, 152, 212, .19);
	border-color: rgba(84, 173, 221, .30);
}

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope > .btn {
	position: relative;
	display: flex;
	float: none;
	align-items: center;
	width: 34px !important;
	height: 18px;
	margin: 0;
	padding: 2px;
	background: #54657a !important;
	border: 0;
	border-radius: 999px;
}

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope > .btn > .inner,
.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope > .btn > .inner.on {
	position: static;
	inset: auto;
	display: block;
	width: 14px !important;
	height: 14px;
	margin: 0;
	padding: 0 !important;
	background: #fff !important;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(2, 6, 23, .35);
	transition: transform var(--ui-transition);
}

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope > .btn > .inner {
	transform: translateX(0);
}

.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope > .btn > .inner.on {
	transform: translateX(16px);
}

.ui-settings-editor .warning {
	display: none;
}

.ui-settings-editor .warning.warningon {
	display: block;
	width: 25px;
	height: 25px;
	background-color: #fff8e6;
	background-position: center;
	background-size: 17px;
	border: 1px solid #f2d695;
	border-radius: 7px;
	cursor: pointer;
}

.ui-settings-editor .warning.warningon::before {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #a86400;
	content: "!";
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

/* Live Orders display density control */

.ui-live-summary__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.ui-live-view-toggle {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	background: #edf2f7;
	border: 1px solid #dce4ed;
	border-radius: 10px;
}

.ui-live-view-toggle button {
	min-height: 30px;
	padding: 6px 10px;
	color: #69788c;
	background: transparent;
	border: 0;
	border-radius: 7px;
	font-size: 9px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.ui-live-view-toggle button.is-active {
	color: #126f9f;
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

.ui-live-order-compact,
.ui-live-compact-header {
	display: none;
}

body[data-page="liveview"] .ui-live-orders.is-compact > .ui-live-compact-header,
body[data-page="liveview"] .ui-live-orders.is-compact .ui-live-order-compact {
	display: grid;
	grid-template-columns: minmax(190px, 2fr) repeat(5, minmax(72px, .72fr)) minmax(74px, .6fr) 40px;
	align-items: center;
}

body[data-page="liveview"] .ui-live-orders.is-compact > .ui-live-compact-header {
	min-height: 38px;
	padding: 0 13px;
	color: #65758a;
	background: #f3f6fa;
	border: 1px solid var(--ui-border);
	border-bottom: 0;
	border-radius: 13px 13px 0 0;
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .055em;
}

body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent {
	display: block;
	gap: 0;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 0 0 13px 13px;
	box-shadow: var(--ui-shadow-sm);
}

body.app-body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent .ui-live-order-card {
	border: 0;
	border-bottom: 1px solid #e8edf3;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

body.app-body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent .ui-live-order-card:last-child {
	border-bottom: 0;
}

body.app-body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent .ui-live-order-card:hover {
	background: #f8fbfd;
	border-color: #e8edf3;
	box-shadow: none;
	transform: none;
}

.ui-live-orders.is-compact .ui-live-order-card__top,
.ui-live-orders.is-compact .ui-live-order-card__body {
	display: none;
}

.ui-live-order-compact {
	min-height: 58px;
	padding: 8px 13px;
}

.ui-live-order-compact__identity {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ui-live-order-compact__identity > span {
	display: inline-grid;
	min-width: 48px;
	height: 28px;
	padding: 0 7px;
	place-items: center;
	color: #fff;
	background: #182235;
	border-radius: 8px;
	font-size: 9px;
	font-weight: 700;
}

.ui-live-order-compact__identity > div {
	min-width: 0;
}

.ui-live-order-compact__identity strong,
.ui-live-order-compact__identity small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-live-order-compact__identity strong {
	font-size: 11px;
}

.ui-live-order-compact__identity small {
	margin-top: 2px;
	color: var(--ui-muted);
	font-size: 8px;
}

.ui-live-order-compact__metric,
.ui-live-order-compact__average {
	min-width: 0;
	padding-left: 10px;
	border-left: 1px solid #edf1f5;
}

.ui-live-order-compact__metric small,
.ui-live-order-compact__average small {
	display: none;
}

.ui-live-order-compact__metric strong,
.ui-live-order-compact__metric span,
.ui-live-order-compact__average strong {
	display: block;
	font-style: normal;
	line-height: 1.25;
}

.ui-live-order-compact__metric strong,
.ui-live-order-compact__average strong {
	font-size: 10px;
}

.ui-live-order-compact__metric span {
	margin-top: 2px;
	color: var(--ui-muted);
	font-size: 8px;
}

.ui-live-order-compact__metric span::after {
	content: " orders";
}

.ui-live-order-compact__action {
	display: grid;
	place-items: center;
}

.ui-live-order-compact__action img {
	width: 32px;
	height: 32px;
	padding: 9px;
	background: #eef6fa;
	border-radius: 9px;
	cursor: pointer;
}

@media (max-width: 1120px) and (min-width: 901px) {
	.ui-live-summary__controls {
		align-items: flex-end;
		flex-direction: column-reverse;
		gap: 7px;
	}

	body[data-page="liveview"] .ui-live-orders.is-compact > .ui-live-compact-header,
	body[data-page="liveview"] .ui-live-orders.is-compact .ui-live-order-compact {
		grid-template-columns: minmax(150px, 1.7fr) repeat(5, minmax(60px, .65fr)) 68px 36px;
	}
}

@media (max-width: 900px) {
	.ui-live-summary__controls {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.ui-live-view-toggle {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.ui-live-view-toggle button {
		width: 100%;
	}

	body[data-page="liveview"] .ui-live-orders.is-compact > .ui-live-compact-header {
		display: none;
	}

	body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent {
		display: grid;
		gap: 8px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	body.app-body[data-page="liveview"] .ui-live-orders.is-compact > .tablecontent .ui-live-order-card {
		background: #fff;
		border: 1px solid var(--ui-border);
		border-radius: 12px;
		box-shadow: var(--ui-shadow-sm);
	}

	body[data-page="liveview"] .ui-live-orders.is-compact .ui-live-order-compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 9px 0;
		padding: 11px;
	}

	.ui-live-order-compact__identity {
		grid-column: 1 / -1;
		padding-bottom: 9px;
		border-bottom: 1px solid #edf1f5;
	}

	.ui-live-order-compact__metric {
		padding: 0 7px;
	}

	.ui-live-order-compact__metric small,
	.ui-live-order-compact__average small {
		display: block;
		margin-bottom: 2px;
		color: var(--ui-muted);
		font-size: 7px;
		font-weight: 650;
	}

	.ui-live-order-compact__average {
		grid-column: 2 / 4;
		padding: 8px 7px 0;
		border-top: 1px solid #edf1f5;
		border-left: 0;
	}

	.ui-live-order-compact__metric--kiosk {
		padding-top: 8px;
		border-top: 1px solid #edf1f5;
	}

	.ui-live-order-compact__action {
		grid-column: 4;
		padding-top: 8px;
		border-top: 1px solid #edf1f5;
	}
}

/* Order drill-down: dense operational rows with readable, consistent icon controls. */
body.app-body .ui-shop-orders {
	margin-top: 0;
}

body.app-body .ui-shop-orders .tableheader,
body.app-body .ui-shop-orders .ui-data-row {
	justify-content: space-between;
	min-height: 50px;
}

/* The body owns its vertical scrollbar; reserve the same gutter in the header. */
body.app-body .ui-shop-orders .tableheader {
	box-sizing: border-box;
	padding-right: var(--ui-order-scrollbar, 0px) !important;
}

body.app-body .ui-shop-orders .tableheader > .menuitem,
body.app-body .ui-shop-orders .ui-data-row > .menuitem {
	box-sizing: border-box;
	min-width: 0;
	min-height: 50px;
	padding: 8px 10px;
}

body.app-body .ui-shop-orders .tableheader > .menuitem:nth-child(n+9) {
	justify-content: center;
	padding-right: 4px;
	padding-left: 4px;
	text-align: center;
}

body.app-body .ui-shop-orders .ui-order-number-cell,
body.app-body .ui-shop-orders .ui-order-email-cell {
	display: block !important;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.app-body .ui-shop-orders .ui-order-number-cell {
	font-variant-numeric: tabular-nums;
}

.ui-order-time {
	display: inline-flex;
	align-items: baseline;
	min-width: 58px;
	padding: 6px 8px;
	color: #116f9f;
	background: #edf7fc;
	border: 1px solid #d9eaf4;
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ui-order-time strong {
	font-size: 11px;
	line-height: 1;
}

.ui-order-time small {
	color: #6f8197;
	font-size: 8px;
	font-weight: 700;
}

body.app-body .ui-shop-orders .ui-order-when.has-order-date .ui-order-time {
	padding: 5px 7px;
	justify-content: center;
}

body.app-body .ui-shop-orders .ui-order-when.has-order-date {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
}

body.app-body .ui-shop-orders .ui-order-when.has-order-date .ui-order-date,
body.app-body .ui-shop-orders .ui-order-when.has-order-date .ui-order-time {
	flex: 0 0 auto;
}

body.app-body .ui-shop-orders .ui-order-later-marker {
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 1;
	display: block;
	width: 27px;
	height: 27px;
	pointer-events: none;
	background: #153653;
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

body.app-body .ui-shop-orders .ui-order-later-marker::before {
	position: absolute;
	top: 4px;
	left: 4px;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	content: '';
	background: transparent;
	border: 1.5px solid #fff;
	border-radius: 50%;
}

body.app-body .ui-shop-orders .ui-order-later-marker::after {
	position: absolute;
	top: 6px;
	left: 8px;
	box-sizing: border-box;
	width: 3px;
	height: 4px;
	content: '';
	border-bottom: 1.5px solid #fff;
	border-left: 1.5px solid #fff;
}

body.app-body .ui-shop-orders .ui-data-row.is-order-for-later {
	position: relative;
}

body.app-body .ui-shop-orders .ui-order-when.ofl::before {
	content: none !important;
	display: none !important;
}

body.app-body .ui-shop-orders .ui-order-icon-cell {
	align-items: center;
	justify-content: center !important;
	padding: 6px !important;
}

body.app-body .ui-shop-orders .ui-order-icon-cell > .service,
body.app-body .ui-shop-orders .ui-order-icon-cell > .payment,
body.app-body .ui-shop-orders .ui-order-icon-cell > .device {
	display: grid !important;
	float: none !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	place-items: center;
	background: #1d344e !important;
	border: 0 !important;
	border-radius: 9px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

body.app-body .ui-shop-orders .ui-order-icon-cell > .payment {
	background: #1b856d !important;
}

body.app-body .ui-shop-orders .ui-order-icon-cell > .device {
	background: #227faf !important;
}

body.app-body .ui-shop-orders .ui-order-icon-cell > .device.user {
	background: #71508e !important;
}

body.app-body .ui-shop-orders .ui-order-icon-cell img.toggleOrderType {
	display: block;
	width: 17px !important;
	height: 17px !important;
	padding: 0 !important;
	object-fit: contain;
}

body.app-body .ui-shop-orders .ui-order-icon-cell > .service img.toggleOrderType {
	width: 18px !important;
	height: 18px !important;
}

@media (max-width: 900px) {
	body.app-body .ui-shop-orders .ui-data-row {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	body.app-body .ui-shop-orders .ui-data-row > .menuitem[data-label="Order No."],
	body.app-body .ui-shop-orders .ui-data-row > .menuitem[data-label="Email"] {
		grid-column: span 2;
	}

	body.app-body .ui-shop-orders .ui-order-icon-cell {
		min-height: 58px;
	}

	body.app-body .ui-shop-orders .ui-order-icon-cell::before {
		text-align: center;
	}
}

/* Dashboard: operational overview rather than a strip of legacy tiles. */
.app-body .dashboard.ui-dashboard .inner > .row {
	margin-bottom: 16px;
}

.app-body .dashboard.ui-dashboard .inner .row1 {
	padding: 3px 2px 15px;
}

.ui-dashboard__eyebrow {
	display: block;
	margin-bottom: 3px;
	color: var(--ui-brand-dark);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.app-body .dashboard.ui-dashboard .inner .row1 > div:first-child > .title {
	font-size: clamp(24px, 2.2vw, 34px);
}

.ui-dashboard__subtitle {
	margin: 4px 0 0;
	color: var(--ui-muted);
	font-size: 12px;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 {
	display: grid !important;
	grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, .86fr);
	gap: 14px;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > div,
.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > div:nth-child(n) {
	float: none !important;
	width: 100% !important;
	min-height: 144px;
	padding: 22px 24px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 17px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > .ui-dashboard-kpi {
	padding-left: 29px;
}

.ui-dashboard-kpi::before {
	position: absolute;
	top: 21px;
	bottom: 21px;
	left: 0;
	width: 5px;
	background: var(--ui-success);
	border-radius: 0 5px 5px 0;
	content: "";
}

.ui-dashboard-kpi--direct::before {
	background: var(--ui-brand);
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > div .total {
	margin: 0 0 8px;
	color: var(--ui-text);
	font-size: clamp(34px, 3vw, 45px);
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > div .description {
	color: #35445a;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.ui-dashboard-kpi > small,
.ui-dashboard-analytics small {
	display: block;
	margin-top: 5px;
	color: var(--ui-muted);
	font-size: 10px;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > .ui-dashboard-analytics {
	background: linear-gradient(135deg, #f4f9fd, #eaf5fc);
	border-color: #cfe4f1;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-analytics a {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	align-items: center;
	column-gap: 14px;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-analytics .total {
	grid-row: 1 / 3;
	display: grid !important;
	width: 50px;
	height: 50px;
	margin: 0 !important;
	place-items: center;
	background: #fff;
	border: 1px solid #d8e8f2;
	border-radius: 14px;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-analytics .total img {
	width: 30px !important;
	height: 30px !important;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-analytics .description {
	align-self: end;
	font-size: 12px !important;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-analytics small {
	align-self: start;
	margin: 2px 0 0;
}

.ui-dashboard-analytics__action {
	grid-column: 1 / -1;
	align-self: end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding-top: 10px;
	color: var(--ui-brand-dark);
	border-top: 1px solid #d8e8f2;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .045em;
}

.ui-dashboard-analytics__action span {
	font-size: 17px;
	line-height: .8;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3:not(.ui-dashboard-source-mix) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 > div,
.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 > div:nth-child(n) {
	float: none !important;
	width: 100% !important;
	min-height: 130px;
	padding: 18px;
	border-radius: 15px;
}

.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 > .ui-dashboard-sales {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 15px;
	padding: 14px;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-sales .salesheader {
	display: grid;
	height: 100%;
	min-height: 0;
	padding: 14px !important;
	place-items: start;
	background: linear-gradient(145deg, #fff7db, #fff2bf) !important;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: center;
	gap: 0 16px;
	margin: 0;
}

.app-body .dashboard.ui-dashboard .inner .row3 .details .row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	float: none !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0;
	padding: 8px 2px;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details .row > .title,
.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details .row > .total {
	position: static;
	display: block;
	float: none;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details .row > .title {
	font-size: 8px;
	font-weight: 750;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details .row > .total {
	font-size: 13px;
	font-weight: 800;
}

.app-body .dashboard.ui-dashboard .ui-dashboard-mix {
	display: grid !important;
	grid-template-columns: 46px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: center;
	column-gap: 12px;
}

.app-body .dashboard.ui-dashboard .inner .row3 > .ui-dashboard-mix > img {
	grid-row: 1 / 3;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 8px;
	background: #166b96;
	border-radius: 11px;
}

.app-body .dashboard.ui-dashboard .inner .row3 > .ui-dashboard-mix > .title {
	align-self: end;
	min-height: 0;
	font-size: 9px;
}

.app-body .dashboard.ui-dashboard .inner .row3 > .ui-dashboard-mix > .total {
	align-self: start;
	margin: 5px 0 0;
	font-size: 27px;
}

@media (max-width: 1100px) {
	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > .ui-dashboard-analytics {
		grid-column: 1 / -1;
		min-height: 128px;
	}
}

@media (max-width: 900px) {
	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 {
		grid-template-columns: 1fr;
	}

	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row2 > .ui-dashboard-analytics {
		grid-column: auto;
	}

	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 > .ui-dashboard-sales {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 {
		grid-template-columns: 1fr;
	}

	.app-body .dashboard.ui-dashboard .inner #dashboard_online > .row3 > .ui-dashboard-sales {
		grid-column: auto;
		grid-template-columns: 1fr;
	}

	.app-body .dashboard.ui-dashboard .ui-dashboard-sales .details {
		grid-template-columns: 1fr;
	}
}

/* Settings editor density and plain group/licence scope selection. */
.ui-settings-editor .settingsnav #styletoggle.ui-settings-scope {
	grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
	gap: 5px;
	margin-bottom: 9px;
	padding: 7px;
	border-radius: 9px;
}

.ui-settings-editor .settingsnav .ui-settings-scope > .styletoggle,
.ui-settings-editor .settingsnav .ui-settings-scope > .licencetoggle {
	justify-content: center;
	min-height: 32px;
	padding: 6px 7px;
	text-align: center;
}

.ui-settings-editor .settingsnav .ui-settings-scope > .licencetoggle {
	text-align: center;
}

.ui-settings-scope > .styletoggle strong,
.ui-settings-scope > .licencetoggle strong {
	margin: 0;
	font-size: 10px;
}

#settingslistpage.ui-settings-editor > .settings {
	grid-template-columns: 220px minmax(0, 1fr);
	min-height: 520px;
}

.ui-settings-editor .settingsnav {
	padding: 12px 10px;
}

.ui-settings-editor #settings_tab_buttons > li {
	min-height: 36px;
	padding: 8px 10px;
	font-size: 10px;
}

.ui-settings-editor .settingswrapper {
	padding: 16px;
}

.ui-settings-editor .settingsinfo > h2 {
	margin-bottom: 10px;
	font-size: 16px;
}

.ui-settings-editor .settingsinfo > .inner {
	gap: 8px;
}

.ui-settings-editor .settingsinfo > .inner > .item {
	min-height: 82px;
	padding: 12px 14px;
	border-radius: 10px;
}

.ui-settings-editor .settingsinfo .button-group {
	min-height: 56px;
}

.ui-settings-editor .settingsinfo > .inner > .item > span,
.ui-settings-editor .settingsinfo .button-group > span {
	font-size: 10px;
	line-height: 1.35;
}

.ui-settings-editor .settingsinfo > .inner > .item > span.title,
.ui-settings-editor .settingsinfo .button-group > span.title {
	margin-bottom: 3px;
	font-size: 12px;
}

.ui-settings-editor .inputbox,
.ui-settings-editor .selectbox,
.ui-settings-editor .settingsinfo > .inner > .item > .option:has(> select) {
	margin-top: 7px;
}

.ui-settings-editor .inputbox input,
.ui-settings-editor .inputbox textarea,
.ui-settings-editor .option select,
.ui-settings-editor .selectbox select {
	min-height: 38px;
	padding: 7px 10px !important;
}

@media (max-width: 900px) {
	#settingslistpage.ui-settings-editor > .settings {
		display: block;
	}

	.ui-settings-editor .settingswrapper {
		padding: 14px 0 0;
	}
}

/* Product image library and upload flow. */
.app-body #shop_image_upload.ui-image-upload {
	width: 100%;
	padding: 0;
	background: transparent;
}

.app-body #shop_image_upload.ui-image-upload > .overlay {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	background: transparent;
}

.app-body #shop_image_upload.ui-image-upload .popup {
	width: min(860px, 100%);
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 18px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body #shop_image_upload.ui-image-upload .popup > h2 {
	margin: 0;
	padding: 22px 26px 4px;
	color: var(--ui-text);
	background: #fff;
	font-size: 23px;
	line-height: 1.25;
	text-align: left;
}

.ui-image-upload__intro {
	margin: 0;
	padding: 0 26px 20px;
	color: var(--ui-muted);
	border-bottom: 1px solid var(--ui-border);
	font-size: 12px;
}

.app-body #imageuploadform > .inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	padding: 24px 26px 26px;
	background: #f7f9fc;
}

.app-body #imageuploadform .item {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 17px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
}

.app-body #imageuploadform .item[data-step] {
	padding-top: 43px;
}

.app-body #imageuploadform .item[data-step]::before {
	position: absolute;
	top: 14px;
	left: 17px;
	color: var(--ui-brand-dark);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	content: "Step " attr(data-step);
}

.app-body #imageuploadform .item > .title {
	display: block;
	width: 100%;
	margin-bottom: 7px;
	color: var(--ui-text);
	font-size: 12px;
	font-weight: 700;
	text-align: left;
}

.app-body #imageuploadform .inputbox {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent !important;
}

.app-body #imageuploadform select {
	width: 100%;
	min-height: 42px;
	padding: 8px 11px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #cfd9e5;
	border-radius: 9px;
}

.app-body #imageuploadform .item:has(#dropzone),
.app-body #imageuploadform .item:last-child {
	grid-column: 1 / -1;
}

.app-body #dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 220px;
	margin: 0;
	padding: 72px 20px 30px;
	color: #496078;
	background: #f4f9fd url('../images/svg/upload.svg') center 42px / 31px 31px no-repeat;
	border: 2px dashed #a9c8da;
	border-radius: 13px;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.4;
	text-align: center;
}

.app-body #dropzone::after {
	display: block;
	margin-top: 6px;
	color: var(--ui-muted);
	font-size: 10px;
	font-weight: 500;
	content: "PNG or JPG / use a clear square image where possible";
}

.app-body #dropzone:hover,
.app-body #dropzone.hover,
.app-body #dropzone:focus-visible {
	color: var(--ui-brand-dark);
	background-color: #eaf6fc;
	border-color: var(--ui-brand);
	outline: none;
}

.app-body #imageuploadform .item:last-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 17px;
}

.app-body #imageuploadform .note {
	max-width: 480px;
	color: var(--ui-muted);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
}

.app-body #imageuploadform .controls {
	display: flex;
	flex: 0 0 auto;
	gap: 9px;
	width: auto;
}

.app-body #imageuploadform .controls .btn {
	min-width: 112px;
	height: 42px;
	margin: 0;
	padding: 0 18px;
	border-radius: 10px;
}

.app-body #shop_images.ui-image-gallery .gallery > .inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
	width: 100%;
	padding: 0;
	background: transparent;
	justify-content: stretch;
}

.app-body #shop_images.ui-image-gallery .image {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
	aspect-ratio: auto;
	margin: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ui-border) !important;
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body #shop_images.ui-image-gallery .gallery {
	display: block;
	width: 100%;
}

.app-body #shop_images .img-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 16px;
}

.app-body #shop_images .img-purge {
	margin-left: auto;
	padding: 8px 14px;
	border-radius: 9px;
	font-size: 12px;
	white-space: nowrap;
}

.app-body #shop_images .img-source {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	background: #eef2f6;
	border-radius: 12px;
}

.app-body #shop_images .img-source button {
	padding: 8px 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ui-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.app-body #shop_images .img-source button small {
	display: block;
	color: var(--ui-muted);
	font-size: 11px;
	font-weight: 500;
}

.app-body #shop_images .img-source button.is-active {
	background: #fff;
	box-shadow: var(--ui-shadow-sm);
}

.app-body #shop_images .img-search {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 260px;
	max-width: 430px;
}

.app-body #shop_images .img-search input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 320px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
}

.app-body #shop_images .img-search span {
	flex: none;
	white-space: nowrap;
	color: var(--ui-muted);
	font-size: 12px;
}

.app-body #shop_images.ui-image-gallery .image > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.app-body #shop_images.ui-image-gallery .image > .title {
	display: block;
	position: static;
	width: auto;
	margin: 0;
	padding: 10px 12px;
	min-height: 2.8em;
	color: var(--ui-text);
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}

.app-body #shop_images.ui-image-gallery .image:first-child {
	display: grid;
	place-items: center;
	background: #f1f7fb;
}

.app-body #shop_images.ui-image-gallery .image:first-child .add,
.app-body #shop_images.ui-image-gallery .image:first-child .add img {
	position: static;
	width: 34px;
	height: 34px;
	margin: 0;
}

.app-body #shop_images.ui-image-gallery > center {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 12px;
}

.app-body #shop_images.ui-image-gallery > center button {
	min-height: 38px;
	padding: 0 13px;
	color: #9a3347;
	background: #fff0f3;
	border: 0;
	border-radius: 9px;
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}

@media (max-width: 680px) {
	.app-body #imageuploadform > .inner {
		grid-template-columns: 1fr;
		padding: 16px;
	}

	.app-body #imageuploadform .item:has(#dropzone),
	.app-body #imageuploadform .item:last-child {
		grid-column: auto;
	}

	.app-body #imageuploadform .item:last-child {
		align-items: stretch;
		flex-direction: column;
	}

	.app-body #imageuploadform .controls,
	.app-body #imageuploadform .controls .btn {
		width: 100%;
	}
}

/* Push notifications: queue and guided workflow */
.app-body .ui-push-list {
	display: grid;
	gap: 14px;
}

.app-body .ui-push-list > .add {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
}

.app-body .ui-primary-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 42px;
	padding: 0 17px;
	color: #fff;
	background: var(--ui-brand);
	border: 0;
	border-radius: 11px;
	box-shadow: 0 8px 20px rgba(24, 147, 204, .2);
	font: inherit;
	font-size: 11px;
	font-weight: 750;
	cursor: pointer;
}

.app-body .ui-primary-action > span {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, .17);
	border-radius: 6px;
	font-size: 17px;
	line-height: 1;
}

.app-body .ui-push-filter {
	display: grid !important;
	grid-template-columns: minmax(180px, 1fr) minmax(150px, 200px) auto auto;
	align-items: end;
	gap: 12px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 16px !important;
	background: #fff !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-push-filter__heading small,
.app-body .ui-push-filter__heading strong {
	display: block;
}

.app-body .ui-push-filter__heading small {
	margin-bottom: 3px;
	color: var(--ui-brand-dark);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.app-body .ui-push-filter__heading strong {
	color: var(--ui-text);
	font-size: 15px;
}

.app-body .ui-push-filter > .filtericon {
	display: none;
}

.app-body .ui-push-filter > .selectbox {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.app-body .ui-push-filter > .selectbox::before,
.app-body .ui-push-filter > .selectbox::after { display: none !important; }

.app-body .ui-push-filter select {
	width: 100%;
	height: 42px;
	padding: 0 36px 0 12px;
	color: var(--ui-text);
	background-color: #f8fbfe !important;
	border: 1px solid #cedae7 !important;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 650;
	box-shadow: none !important;
}

.app-body .ui-push-filter label { display: block; margin-bottom: 6px; color: var(--ui-muted); font-size: 10px; font-weight: 700; }
.app-body .ui-push-periods { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; border-top: 1px solid var(--ui-border); padding-top: 12px; }
.app-body .ui-push-period { display: flex; align-items: center; gap: 4px; }
.app-body .ui-push-period > span { min-width: 38px; margin-right: 4px; color: var(--ui-muted); font-size: 10px; font-weight: 750; }
.app-body .ui-push-period button { padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 8px; background: #fff; color: var(--ui-text); font: inherit; font-size: 11px; cursor: pointer; }
.app-body .ui-push-period button[aria-pressed="true"] { color: #fff; background: var(--ui-brand-dark); border-color: var(--ui-brand-dark); }
.app-body .ui-push-periods > p { margin: 0; color: var(--ui-muted); font-size: 10px; }
.app-body .ui-push-sort { padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; }
.app-body .ui-push-sort:hover { text-decoration: underline; }
.app-body .ui-push-sort--mobile { display: none; }
@media (max-width: 900px) {
	.app-body .ui-push-sort--mobile { display: inline-block; color: var(--ui-brand-dark); font-size: 11px; font-weight: 700; }
}
.app-body .ui-push-period button:focus-visible,
.app-body .ui-push-sort:focus-visible { outline: 2px solid var(--ui-brand-dark); outline-offset: 3px; }
.app-body .ui-push-empty { margin: 0; padding: 24px; color: var(--ui-muted); font-size: 12px; }
.app-body .push [hidden] { display: none !important; }
.app-body .ui-push-list[data-push-manage="0"] .ui-push-filter { grid-template-columns: minmax(180px, 1fr) minmax(150px, 200px) auto; }
.app-body .ui-push-filter > .add { grid-column: 4; grid-row: 1; float: none; width: auto; height: auto; margin: 0; }
.app-body .ui-push-filter > .add .ui-primary-action { min-height: 42px; white-space: nowrap; }
.app-body .ui-push-schedule { padding: 14px; border: 1px solid var(--ui-border); border-radius: 14px; background: #fff; box-shadow: var(--ui-shadow-sm); min-width: 0; }
.app-body .ui-push-schedule__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.app-body .ui-push-schedule__heading h2 { margin: 0; color: var(--ui-text); font-size: 16px; }
.app-body .ui-push-schedule__heading p { margin: 0; color: var(--ui-muted); font-size: 10px; }
.app-body .ui-push-schedule__days { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.app-body .ui-push-schedule__day { min-width: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 8px; background: #f8fbfe; }
.app-body .ui-push-schedule__day[data-today] { border-color: #9dcce7; }
.app-body .ui-push-schedule__day h3 { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 9px; margin: 0; font-size: 11px; color: var(--ui-text); border-bottom: 1px solid var(--ui-border); }
.app-body .ui-push-schedule__day[data-today] h3 { color: var(--ui-brand-dark); background: #eef8fd; }
.app-body .ui-push-schedule__day h3 small { display: block; margin-top: 2px; font-size: 9px; font-weight: 500; color: var(--ui-muted); }
.app-body .ui-push-day-count { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; color: var(--ui-brand-dark); background: #eaf2f9; font-size: 10px; }
.app-body .ui-push-schedule__day ul { list-style: none; margin: 0; padding: 0; max-height: 224px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.app-body .ui-push-schedule__day li { margin: 0; padding: 0; border-bottom: 1px solid var(--ui-border); }
.app-body .ui-push-schedule__day li:last-child { border-bottom: 0; }
.app-body .ui-push-agenda-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 8px; gap: 4px; padding: 8px; cursor: pointer; list-style: none; }
.app-body .ui-push-agenda-item summary::-webkit-details-marker { display: none; }
.app-body .ui-push-agenda-item summary::after { content: ''; grid-column: 2; grid-row: 1; width: 5px; height: 5px; margin-top: 3px; border-right: 1px solid var(--ui-muted); border-bottom: 1px solid var(--ui-muted); transform: rotate(45deg); }
.app-body .ui-push-agenda-item[open] summary::after { transform: rotate(225deg); }
.app-body .ui-push-agenda-item summary:hover { background: #edf5fb; }
.app-body .ui-push-agenda-time { font-size: 10px; font-weight: 800; color: var(--ui-brand-dark); }
.app-body .ui-push-agenda-app { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 10px; line-height: 1.4; color: var(--ui-text); }
.app-body .ui-push-agenda-title { display: none; grid-column: 1 / -1; min-width: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.5; }
.app-body .ui-push-agenda-item[open] .ui-push-agenda-title,
.app-body .ui-push-agenda-item[open] .ui-push-agenda-app { display: block; white-space: normal; overflow-wrap: anywhere; }
.app-body .ui-push-agenda-detail { padding: 0 8px 10px; font-size: 10px; line-height: 1.5; color: var(--ui-text); overflow-wrap: anywhere; }
.app-body .ui-push-agenda-detail small { color: var(--ui-muted); font-size: 9px; }
.app-body .ui-push-agenda-detail p { margin: 5px 0 0; }
.app-body .ui-push-schedule__day .ui-push-schedule__empty { padding: 14px 9px; color: var(--ui-muted); font-size: 10px; }
.app-body .ui-push-agenda-item summary:focus-visible,
.app-body .ui-push-schedule__days:focus-visible,
.app-body .ui-push-schedule__day ul:focus-visible { outline: 2px solid var(--ui-brand-dark); outline-offset: -2px; }
@media (max-width: 900px) {
    .app-body .ui-push-list .ui-push-filter,
    .app-body .ui-push-list[data-push-manage="0"] .ui-push-filter { grid-template-columns: 1fr 1fr; }
    .app-body .ui-push-filter > .add { grid-column: 2; grid-row: 2; justify-self: end; }
    .app-body .ui-push-filter > .ui-push-filter__count { grid-column: 1; grid-row: 2; justify-self: start; }
    .app-body .ui-push-periods { grid-row: 3; }
}
@media (max-width: 520px) {
    .app-body .ui-push-list .ui-push-filter { gap: 10px; padding: 12px !important; }
    .app-body .ui-push-filter select { padding-left: 8px; }
    .app-body .ui-push-filter > .add .ui-primary-action { min-width: 0; padding: 9px; font-size: 10px; }
}

.app-body .ui-push-duplicate-help {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ui-muted);
	font-size: 9px;
	line-height: 1.4;
}

/* Opening overrides use a dedicated, top-aligned editor instead of an inline expansion. */
.app-body.has-force-close-modal { overflow: hidden !important; }

.app-body .forcepulldown.ui-force-workspace-host {
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	left: calc(var(--ui-sidebar-width) + 10px) !important;
	z-index: 1280 !important;
	display: grid !important;
	grid-template-rows: minmax(0, 1fr) auto;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	padding: 10px !important;
	overflow: hidden !important;
	background: rgba(15, 29, 49, .64) !important;
	border: 0 !important;
	backdrop-filter: blur(6px);
}

.app-body #setforceclose.ui-force-editor {
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(1280px, 100%) !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #eef3f8 !important;
	border: 0 !important;
	border-radius: 16px 16px 0 0 !important;
	box-shadow: 0 25px 75px rgba(7, 20, 38, .36);
}

.app-body .ui-force-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 19px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #176b8f);
}

.app-body .ui-force-editor__header small {
	display: block;
	margin-bottom: 2px;
	color: #7bd0f3;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.app-body .ui-force-editor__header h2 { margin: 0; padding: 0 !important; color: #fff; font-size: 20px; text-indent: 0 !important; }
.app-body .ui-force-editor__header p { margin: 3px 0 0; color: #c4dceb; font-size: 9px; }
.app-body .ui-force-editor__header button {
	display: grid;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	font-size: 22px;
	cursor: pointer;
}

.app-body #setforceclose.ui-force-editor > .settings {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #eef3f8 !important;
	border: 0 !important;
}

.app-body #setforceclose .ui-force-reference {
	position: static !important;
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 15px !important;
	overflow-y: auto;
	color: var(--ui-text) !important;
	background: #f8fbfd !important;
	border: 0 !important;
	border-right: 1px solid var(--ui-border) !important;
	border-radius: 0 !important;
}

.app-body #setforceclose .ui-force-reference ul {
	display: grid;
	gap: 7px;
	margin: 0 0 12px !important;
	padding: 12px !important;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 11px;
	box-shadow: var(--ui-shadow-sm);
	list-style: none !important;
}

.app-body #setforceclose .ui-force-reference li {
	float: none !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #4d6378 !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 9px;
	line-height: 1.45;
}

.app-body #setforceclose .ui-force-reference li b { color: var(--ui-text); font-size: 10px; }
.app-body #setforceclose .ui-force-regular li:not(.ui-force-regular__title) { display: grid !important; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; gap: 10px; }
.app-body #setforceclose .ui-force-regular li:not(.ui-force-regular__title) strong { color: var(--ui-text); font-size: 9px; font-weight: 700; text-align: right; }
.app-body #setforceclose .ui-force-regular__title { margin-bottom: 3px !important; }
.app-body #setforceclose .ui-force-reference__eyebrow {
	color: var(--ui-brand-dark) !important;
	font-size: 8px !important;
	font-weight: 850;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.app-body #setforceclose .ui-force-reference .space { display: none !important; }
.app-body #setforceclose .ui-force-reference .inputbox {
	width: 100% !important;
	height: auto !important;
	margin: 7px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.app-body #setforceclose .ui-force-reference textarea {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 92px !important;
	padding: 10px !important;
	color: var(--ui-text) !important;
	background: #f8fbfe !important;
	border: 1px solid #cad7e4 !important;
	border-radius: 9px !important;
	font: inherit;
}

.app-body #setforceclose .settingswrapper {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto !important;
	background: #eef3f8 !important;
}

.app-body #setforceclose .ui-force-schedule {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 100% !important;
	margin: 0 !important;
	padding: 16px !important;
	background: #eef3f8 !important;
	border: 0 !important;
}

.app-body #setforceclose .ui-force-schedule > h2 {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ui-text) !important;
	background: transparent !important;
	font-size: 16px !important;
}

.app-body #setforceclose .ui-force-schedule__intro { margin: 4px 0 12px; color: var(--ui-muted); font-size: 9px; }
.app-body #setforceclose .ui-force-schedule > .inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.app-body #setforceclose .ui-force-day {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 10px;
	box-sizing: border-box;
	width: 100% !important;
	min-height: 108px !important;
	margin: 0 !important;
	padding: 12px !important;
	background: #fff !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: 11px !important;
	box-shadow: var(--ui-shadow-sm);
}

.app-body #setforceclose .ui-force-day.is-closed { border-color: #f0c9cc !important; }
.app-body #setforceclose .ui-force-day.is-custom { border-color: #9bcfe6 !important; }
.app-body #setforceclose .ui-force-day > .maintitle {
	display: block !important;
	grid-column: 1;
	margin: 0 !important;
	color: var(--ui-text) !important;
	font-size: 11px !important;
	font-weight: 800;
}

.app-body #setforceclose .ui-force-day__state {
	display: block;
	grid-column: 1;
	margin: 2px 0 0;
	color: var(--ui-muted);
	font-size: 8px;
}

.app-body #setforceclose .ui-force-day > .inner {
	display: grid !important;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr);
	gap: 9px;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

.app-body #setforceclose .ui-force-day .btncontainer,
.app-body #setforceclose .ui-force-day .row,
.app-body #setforceclose .ui-force-day .col-xs-12 { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.app-body #setforceclose .ui-force-day .switch {
	position: relative !important;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100% !important;
	height: auto !important;
	min-height: 34px;
	margin: 0 !important;
	padding: 3px !important;
	background: #edf2f7 !important;
	border: 1px solid #d5e0ea;
	border-radius: 9px !important;
}

.app-body #setforceclose .ui-force-day .switch-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.app-body #setforceclose .ui-force-day .switch-label {
	position: static !important;
	z-index: 1;
	display: grid !important;
	width: auto !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 5px !important;
	place-items: center;
	color: #63778a !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 7px !important;
	font-size: 8px !important;
	font-weight: 750;
	cursor: pointer;
}

.app-body #setforceclose .ui-force-day .switch-input:checked + .switch-label {
	color: #fff !important;
	background: var(--ui-brand) !important;
	box-shadow: 0 3px 8px rgba(16, 71, 105, .18);
}
.app-body #setforceclose .ui-force-day .switch-input[value="C"]:checked + .switch-label { background: var(--ui-danger) !important; }
.app-body #setforceclose .ui-force-day .switch-selector { display: none !important; }

.app-body #setforceclose .ui-force-day .changetimes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.app-body #setforceclose .ui-force-day .changetimes input[type="hidden"] { display: none !important; }
.app-body #setforceclose .ui-force-day .changetimes select {
	box-sizing: border-box;
	width: 100% !important;
	height: 35px !important;
	margin: 0 !important;
	padding: 0 28px 0 9px !important;
	color: var(--ui-text) !important;
	background: #f8fbfe !important;
	border: 1px solid #cad7e4 !important;
	border-radius: 8px !important;
	font-size: 9px;
}

.app-body .ui-force-workspace-host > .ui-force-savebar {
	position: static !important;
	box-sizing: border-box;
	width: min(1280px, 100%) !important;
	margin: 0 auto !important;
	padding: 11px 14px !important;
	background: rgba(255, 255, 255, .97) !important;
	border: 0 !important;
	border-top: 1px solid var(--ui-border) !important;
	border-radius: 0 0 16px 16px !important;
	box-shadow: none !important;
}

.app-body .ui-force-workspace-host > .ui-force-savebar .controls {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	width: 100% !important;
	margin: 0 !important;
}
.app-body .ui-force-workspace-host > .ui-force-savebar .btn { float: none !important; min-width: 104px; }

@media (max-width: 900px) {
	.app-body .forcepulldown.ui-force-workspace-host { inset: 0 !important; padding: 0 !important; }
	.app-body #setforceclose.ui-force-editor { width: 100% !important; border-radius: 0 !important; }
	.app-body .ui-force-editor__header { border-radius: 0; }
	.app-body #setforceclose.ui-force-editor > .settings { grid-template-columns: 220px minmax(0, 1fr) !important; }
	.app-body #setforceclose .ui-force-schedule > .inner { grid-template-columns: 1fr; }
	.app-body .ui-force-workspace-host > .ui-force-savebar { width: 100% !important; border-radius: 0 !important; }
}

@media (max-width: 680px) {
	.app-body #setforceclose.ui-force-editor > .settings { display: block !important; overflow-y: auto !important; }
	.app-body #setforceclose .ui-force-reference { height: auto !important; max-height: none !important; overflow: visible; border-right: 0 !important; border-bottom: 1px solid var(--ui-border) !important; }
	.app-body #setforceclose .settingswrapper { height: auto !important; overflow: visible !important; }
	.app-body #setforceclose .ui-force-schedule { min-height: 0 !important; }
	.app-body .ui-force-editor__header p { display: none; }
}

.app-body .ui-push-filter__count {
	align-self: center;
	padding: 8px 11px;
	color: var(--ui-muted);
	background: var(--ui-surface-muted);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 750;
	white-space: nowrap;
}

/* Registered-customer lookup is an actual workflow, not a dead-end hint. */
.app-body .ui-customer-workspace { display: grid !important; gap: 12px; }
.app-body .ui-customer-search {
	display: grid;
	grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.3fr) auto;
	align-items: end;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-customer-search small {
	display: block;
	margin-bottom: 3px;
	color: var(--ui-brand-dark);
	font-size: 8px;
	font-weight: 850;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.app-body .ui-customer-search h2 { margin: 0; color: var(--ui-text); font-size: 16px; }
.app-body .ui-customer-search p { margin: 3px 0 0; color: var(--ui-muted); font-size: 9px; }
.app-body .ui-customer-search form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.app-body .ui-customer-search label { min-width: 0; }
.app-body .ui-customer-search input {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	padding: 0 13px;
	color: var(--ui-text);
	background: #f8fbfe;
	border: 1px solid #cbd8e5;
	border-radius: 10px;
	font: inherit;
}
.app-body .ui-customer-search.has-error input { border-color: #d45a64; box-shadow: 0 0 0 3px rgba(197, 55, 66, .09); }
.app-body .ui-customer-search button {
	min-width: 126px;
	height: 42px;
	padding: 0 14px;
	color: #fff;
	background: var(--ui-brand);
	border: 0;
	border-radius: 10px;
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}
.app-body .ui-customer-search output {
	align-self: center;
	padding: 8px 11px;
	color: var(--ui-muted);
	background: var(--ui-surface-muted);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 750;
	white-space: nowrap;
}

.app-body .ui-customer-results { width: 100% !important; margin: 0 !important; }
.app-body .ui-customer-results .tableheader,
.app-body .ui-customer-results .tablecontent > .user {
	display: grid !important;
	grid-template-columns: 90px minmax(150px, 1fr) minmax(220px, 1.4fr) 120px 90px 90px 90px;
	align-items: center;
	width: 100% !important;
	min-width: 880px;
}
.app-body .ui-customer-results .tablecontent > .user {
	min-height: 58px;
	background: #fff;
	border-bottom: 1px solid var(--ui-border);
}
.app-body .ui-customer-results .tablecontent > .user:last-child { border-radius: 0 0 13px 13px; }
.app-body .ui-customer-results .menuitem { box-sizing: border-box; width: auto !important; min-width: 0 !important; padding: 10px 12px !important; overflow-wrap: anywhere; }
.app-body .ui-customer-results .menuitem.points,
.app-body .ui-customer-results .menuitem.stamps { color: #08754c; font-weight: 850; cursor: pointer; }

.app-body .ui-customer-empty {
	display: grid !important;
	box-sizing: border-box;
	max-width: none !important;
	min-height: 230px;
	margin: 0 !important;
	padding: 32px !important;
	place-items: center;
	align-content: center;
	text-align: center;
	background: #fff !important;
	border: 1px dashed #bfd0df !important;
	border-radius: 14px !important;
}
.app-body .ui-customer-empty > span { display: grid; width: 44px; height: 44px; margin-bottom: 10px; place-items: center; color: #fff; background: var(--ui-brand); border-radius: 13px; font-size: 19px; }
.app-body .ui-customer-empty h3 { margin: 0; color: var(--ui-text); font-size: 16px; }
.app-body .ui-customer-empty p { max-width: 430px; margin: 5px 0 0; color: var(--ui-muted); font-size: 10px; }

@media (max-width: 900px) {
	.app-body .ui-customer-search { grid-template-columns: 1fr; align-items: stretch; }
	.app-body .ui-customer-search output { justify-self: start; }
}

@media (max-width: 520px) {
	.app-body .ui-customer-search form { grid-template-columns: 1fr; }
	.app-body .ui-customer-search button { width: 100%; }
}

.app-body .ui-push-list > .shops {
	margin: 0;
}

.app-body .ui-push-list .tableheader,
.app-body .ui-push-list .tablecontent > .shop {
	grid-template-columns: minmax(150px, 1.4fr) 110px 90px 200px 80px 80px 140px !important;
}

.app-body .ui-push-list[data-push-manage="0"] .tableheader,
.app-body .ui-push-list[data-push-manage="0"] .tablecontent > .shop {
	grid-template-columns: minmax(150px, 1.4fr) 110px 90px 200px 80px 80px !important;
}

.app-body .ui-push-count {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--ui-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.app-body .ui-push-actions {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.app-body .ui-push-action {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #d8e4ed;
	border-radius: 10px;
	background: #f2f7fa;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.app-body .ui-push-action:hover,
.app-body .ui-push-action:focus-visible {
	border-color: #8fc8e7;
	background: #e3f4fc;
	transform: translateY(-1px);
}

.app-body .ui-push-action img {
	display: block;
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.app-body .ui-push-duplicate {
	background: #eaf6fc;
}

.app-body .ui-push-delete {
	border-color: #f2c9cf;
	background: #fff3f4;
}

.app-body .ui-push-delete:hover,
.app-body .ui-push-delete:focus-visible {
	border-color: #df8792;
	background: #ffe7ea;
}

.app-body .ui-push-status {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	padding: 0 9px;
	color: #52657a;
	background: #eef3f8;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
}

.app-body .ui-push-status--1 { color: #856200; background: #fff3c9; }
.app-body .ui-push-status--2 { color: #075c83; background: #dff4ff; }
.app-body .ui-push-status--3 { color: #087249; background: #dff7ec; }
.app-body .ui-push-status--9 { color: #a52c42; background: #fde7ec; }

.app-body .ui-push-editor #pushForm > .settings {
	display: grid;
	grid-template-columns: 228px minmax(0, 1fr);
	gap: 14px;
	width: 100%;
	margin: 0;
	background: transparent;
}

.app-body .ui-push-steps {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin: 0;
	padding: 7px;
	list-style: none;
	background: #e8eef5;
	border: 1px solid #d5e0ea;
	border-radius: 13px;
}

.app-body .ui-push-steps li {
	display: grid;
	grid-template-columns: 30px 1fr;
	grid-template-rows: auto auto;
	column-gap: 9px;
	align-items: center;
	padding: 8px 10px;
	color: #6f8092;
	border-radius: 9px;
}

.app-body .ui-push-steps li > span {
	display: grid;
	grid-row: 1 / 3;
	place-items: center;
	width: 30px;
	height: 30px;
	background: #d3dde7;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 800;
}

.app-body .ui-push-steps strong { font-size: 10px; }
.app-body .ui-push-steps small { font-size: 8px; }

.app-body .ui-push-steps li.is-active {
	color: var(--ui-text);
	background: #fff;
	box-shadow: 0 2px 7px rgba(21, 45, 74, .08);
}

.app-body .ui-push-steps li.is-active > span,
.app-body .ui-push-steps li.is-complete > span {
	color: #fff;
	background: var(--ui-brand);
}

.app-body .ui-push-steps li.is-complete > span { background: var(--ui-success); }

.app-body .ui-push-editor .settingsnav {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 100%;
	height: fit-content;
	margin: 0;
	padding: 16px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-push-editor .settingsnav > .title {
	font-size: 13px;
	font-weight: 800;
}

.app-body .ui-push-editor .settingsnav > .desc {
	display: block;
	color: var(--ui-muted);
	font-size: 9px;
	line-height: 1.45;
}

.app-body .ui-push-editor .settingsnav .inputbox,
.app-body .ui-push-editor .settingsnav select {
	width: 100%;
	height: 42px;
	margin: 0;
}

.app-body .push-audience-card {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 2px 8px;
	margin-top: 6px;
	padding: 13px;
	color: #fff;
	background: linear-gradient(145deg, #12304b, #176b8f);
	border-radius: 11px;
}

.app-body .push-audience-card > span {
	grid-column: 1 / -1;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.app-body .push-audience-card strong {
	font-size: 25px;
	line-height: 1;
}

.app-body .push-audience-card small {
	color: rgba(255, 255, 255, .75);
	font-size: 8px;
}

.app-body .push-audience-card.is-loading strong { opacity: .45; }

.app-body .ui-push-editor .settingswrapper,
.app-body .ui-push-editor .settingsinfo,
.app-body .ui-push-editor .publish {
	width: 100%;
	margin: 0;
	background: transparent;
}

.app-body .ui-push-editor .publish > h2 {
	margin: 0;
	padding: 16px 18px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	font-size: 15px;
	text-align: left;
	text-transform: none;
}

.app-body .ui-push-editor .publish > .inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	padding: 14px;
	background: #f0f5fa;
	border: 1px solid var(--ui-border);
	border-radius: 0 0 14px 14px;
}

.app-body .ui-push-editor .publish .item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-height: 0;
	height: auto !important;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid #dce5ee;
	border-radius: 11px;
	box-shadow: none;
}

.app-body .ui-push-editor .publish .item > .title {
	margin: 0;
	color: var(--ui-text);
	font-size: 10px;
	font-weight: 800;
	text-align: left;
}

.app-body .ui-push-editor .publish .inputbox,
.app-body .ui-push-editor .publish input,
.app-body .ui-push-editor .publish select,
.app-body .ui-push-editor .publish textarea {
	float: none;
	width: 100%;
	min-height: 40px;
	margin: 0;
	color: var(--ui-text);
	background: #fbfdff;
	border-color: #cdd9e5;
	border-radius: 9px;
}

.app-body .ui-push-editor .publish .inputbox {
	display: block;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.app-body .ui-push-editor .publish input,
.app-body .ui-push-editor .publish select,
.app-body .ui-push-editor .publish textarea {
	display: block;
	padding: 9px 10px;
	background: #fbfdff !important;
	border: 1px solid #cdd9e5 !important;
	box-sizing: border-box;
}

.app-body .ui-push-editor .publish textarea { min-height: 92px; resize: vertical; }

.app-body .ui-push-editor .stage1 .item:nth-child(4),
.app-body .ui-push-editor .stage1 .controls,
.app-body .ui-push-editor .stage2 .item:last-child,
.app-body .ui-push-editor .pushcenter .item:first-child {
	grid-column: 1 / -1;
}

.app-body .ui-push-editor .publish .controls {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	width: 100%;
	margin: 2px 0 0;
	padding: 0;
}

.app-body .ui-push-editor .publish .controls .btn {
	float: none;
	min-width: 120px;
	height: 40px;
	margin: 0;
	border-radius: 9px;
}

.app-body .ui-push-editor .pushusers {
	color: var(--ui-brand-dark);
	font-size: 28px;
	font-weight: 800;
}

/* Promo list filters and contained editor */
.app-body .ui-promo-toolbar {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 160px 160px auto auto;
	align-items: end;
	gap: 10px;
	margin: 12px 0;
	padding: 13px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-promo-toolbar label > span {
	display: block;
	margin: 0 0 5px 2px;
	color: #60738a;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.app-body .ui-promo-toolbar input,
.app-body .ui-promo-toolbar select {
	width: 100%;
	height: 39px;
	padding: 0 11px;
	color: var(--ui-text);
	background: #f8fbfe;
	border: 1px solid #cfdae6;
	border-radius: 9px;
	font-size: 10px;
}

.app-body .ui-promo-toolbar output {
	align-self: center;
	padding: 8px 11px;
	color: #556b81;
	background: #eef4f8;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
}

.app-body .ui-promo-toolbar .ui-promo-add {
	position: static !important;
	display: inline-flex !important;
	float: none !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto !important;
	height: 39px !important;
	margin: 0 !important;
	padding: 0 13px;
	color: #fff;
	background: var(--ui-brand);
	border-radius: 9px;
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}

.app-body .ui-promo-toolbar .ui-promo-add img {
	display: none !important;
}

.app-body .ui-promo-toolbar .ui-promo-add::before {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: var(--ui-brand-dark);
	background: rgba(255, 255, 255, .9);
	border-radius: 6px;
	content: "+";
	font-size: 14px;
	line-height: 1;
}

.app-body .ui-promo-codes .tableheader,
.app-body .ui-promo-codes .tablecontent > .item-promo-code {
	display: grid !important;
	grid-template-columns: 100px 108px 108px 82px 86px 56px 85px minmax(82px, 1fr) 50px !important;
	width: 100% !important;
}

.app-body .ui-promo-codes .tableheader > .menuitem:nth-child(9),
.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:nth-child(9) {
	grid-column: 9 / 10 !important;
	grid-row: 1 !important;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
}

.app-body #promocodes > .shops.promo .tableheader,
.app-body #promocodes > .shops.promo .tablecontent > .shop {
	display: grid !important;
	grid-template-columns: 76px minmax(175px, 1.5fr) repeat(5, minmax(70px, .7fr)) 50px !important;
	width: 100% !important;
}

.app-body .shops.promo .lastmi,
.app-body .ui-promo-codes .menuitem:last-child {
	position: relative;
	display: grid;
	place-items: center;
	width: auto;
	min-width: 0;
	padding: 6px !important;
}

.app-body .shops.promo .lastmi img,
.app-body .ui-promo-codes .menuitem:last-child img {
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 9px;
	background: #edf5fa;
	border-radius: 9px;
	box-sizing: border-box;
	opacity: .78;
}

.app-body .shops.promo .lastmi img:hover,
.app-body .ui-promo-codes .menuitem:last-child img:hover {
	background: #dff1fb;
	opacity: 1;
}

.app-body .ui-promo-codes.is-empty::after {
	display: block;
	padding: 24px;
	color: var(--ui-muted);
	content: "No promo codes match these filters.";
	font-size: 11px;
	text-align: center;
}

.app-body [id^="configintcontent_"]:has(> #editpromocode) {
	position: fixed;
	z-index: 1100;
	inset: 0;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 22px;
	background: rgba(8, 22, 42, .62);
	backdrop-filter: blur(4px);
}

/* Promo editor is a centred dialog; the top padding keeps it clear of browser chrome. */
.app-body [id^="configintcontent_"]:has(> #editpromocode) > #editpromocode {
	align-self: center !important;
}

.app-body .ui-promo-editor .btn.toggleSwitch {
	position: relative !important;
	display: inline-flex !important;
	flex: 0 0 42px !important;
	align-items: center !important;
	box-sizing: border-box !important;
	width: 42px !important;
	min-width: 42px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 3px !important;
	background: #d9e2eb !important;
	border: 0 !important;
	border-radius: 999px !important;
}

.app-body .ui-promo-editor .btn.toggleSwitch > .inner,
.app-body .ui-promo-editor .btn.toggleSwitch:hover > .inner {
	position: static !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(15, 31, 49, .24);
	transform: translateX(0) !important;
}

.app-body .ui-promo-editor .btn.toggleSwitch > .inner.on,
.app-body .ui-promo-editor .btn.toggleSwitch:hover > .inner.on {
	transform: translateX(18px) !important;
}

.app-body .ui-promo-editor .btn.toggleSwitch:has(> .inner.on) { background: var(--ui-success) !important; }

.app-body .ui-promo-editor .promoinfo .item:not(.itemdate) > .option {
	grid-template-columns: 50px minmax(0, 1fr);
	column-gap: 10px;
}

.app-body .ui-promo-editor .promoinfo .item.itemdate {
	display: grid !important;
	grid-template-columns: 50px minmax(0, 1fr);
	align-items: center;
	align-self: start;
	column-gap: 10px;
}

.app-body .ui-promo-editor .promoinfo .item.itemdate > .toggleSwitch { grid-column: 1; grid-row: 1 / span 2; }
.app-body .ui-promo-editor .promoinfo .item.itemdate > .title,
.app-body .ui-promo-editor .promoinfo .item.itemdate > span:not(.title) { grid-column: 2; margin: 0; }
.app-body .ui-promo-editor .promoinfo .item.itemdate > #promoneverexpire { grid-column: 1 / -1; width: 100%; }

.app-body #editpromocode.ui-promo-editor {
	display: block;
	width: min(1080px, 100%);
	max-height: calc(100vh - 112px);
	margin: 0;
	overflow: auto;
	background: #eef4f9;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 17px 17px 0 0;
	box-shadow: 0 25px 75px rgba(7, 21, 40, .35);
}

.app-body .ui-promo-editor__header {
	position: sticky;
	z-index: 4;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #174c69);
}

.app-body .ui-promo-editor__header small {
	display: block;
	margin-bottom: 2px;
	color: #6fd1f3;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.app-body .ui-promo-editor__header h2 {
	margin: 0;
	padding: 0 !important;
	color: #fff;
	font-size: 18px;
	text-indent: 0 !important;
}

.app-body .ui-promo-editor__header p {
	margin: 3px 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: 9px;
}

.app-body .ui-promo-editor__header button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 10px;
	font-size: 22px;
	cursor: pointer;
}

.app-body .ui-promo-editor > .settings {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 13px;
	width: 100%;
	margin: 0;
	padding: 13px;
	background: transparent;
}

.app-body .ui-promo-editor .promonav {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	height: fit-content;
	margin: 0;
	padding: 14px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
}

.app-body .ui-promo-editor .promonav .promoname,
.app-body .ui-promo-editor .promonav .inputbox,
.app-body .ui-promo-editor .promonav input {
	width: 100%;
	margin: 0;
}

.app-body .ui-promo-editor .promonav .inputbox {
	display: block;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.app-body .ui-promo-editor .promonav input,
.app-body .ui-promo-editor .promonav input:disabled {
	display: block;
	height: 40px !important;
	padding: 0 10px !important;
	color: var(--ui-text) !important;
	background: #f8fbfd !important;
	border: 1px solid #cbd8e4 !important;
	border-radius: 9px !important;
	opacity: 1 !important;
	-webkit-text-fill-color: var(--ui-text);
}

.app-body .ui-promo-editor .promonav .whitetext {
	color: var(--ui-muted);
	font-size: 8px;
	line-height: 1.4;
}

.app-body .ui-promo-editor .promonav ul {
	margin: 3px 0;
	padding: 0;
}

.app-body .ui-promo-editor .promonav li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding: 10px 0;
	color: var(--ui-text);
	border-top: 1px solid var(--ui-border);
	border-bottom: 1px solid var(--ui-border);
	font-size: 9px;
}

.app-body .ui-promo-editor .emailreport {
	width: 100%;
	height: 38px;
	color: var(--ui-brand-dark);
	background: #e7f5fc;
	border: 0;
	border-radius: 9px;
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}

.app-body .ui-promo-editor .settingswrapper,
.app-body .ui-promo-editor .settingsinfo {
	width: 100%;
	margin: 0;
	background: transparent;
}

.app-body .ui-promo-editor .promoinfo > h2 {
	margin: 0;
	padding: 14px 16px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-bottom: 0;
	border-radius: 13px 13px 0 0;
	font-size: 14px;
}

.app-body .ui-promo-editor .promoinfo > .inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 11px;
	background: #e4ecf4;
	border: 1px solid var(--ui-border);
	border-radius: 0 0 13px 13px;
}

.app-body .ui-promo-editor .promoinfo .left,
.app-body .ui-promo-editor .promoinfo .right {
	display: contents;
}

.app-body .ui-promo-editor .promoinfo .item {
	display: block;
	width: 100%;
	min-height: 0;
	height: auto !important;
	margin: 0;
	padding: 12px;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid #d8e2ec;
	border-radius: 10px;
	box-shadow: none;
	box-sizing: border-box;
}

.app-body .ui-promo-editor .promoinfo .item > .title {
	display: block;
	margin: 0 0 3px;
	color: var(--ui-text);
	font-size: 10px;
	font-weight: 800;
}

.app-body .ui-promo-editor .promoinfo .item > span:not(.title) {
	display: block;
	margin-bottom: 9px;
	color: var(--ui-muted);
	font-size: 8px;
	line-height: 1.35;
}

.app-body .ui-promo-editor .promoinfo .option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 29px;
	margin: 3px 0;
	font-size: 8px;
}

.app-body .ui-promo-editor .promoinfo .toggleSwitch {
	float: none !important;
	flex: 0 0 46px;
	width: 46px !important;
	min-width: 46px;
	margin: 0 5px 0 0 !important;
}

.app-body .ui-promo-editor .promoinfo .inputbox,
.app-body .ui-promo-editor .promoinfo input,
.app-body .ui-promo-editor .promoinfo select,
.app-body .ui-promo-editor .promoinfo textarea {
	float: none;
	width: 100%;
	min-height: 38px;
	margin: 4px 0 0;
	color: var(--ui-text);
	background: #fbfdff;
	border-color: #cad7e4;
	border-radius: 8px;
	border-style: solid;
}

.app-body .ui-promo-editor .itemdate #promoneverexpire {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 8px;
}

.app-body .ui-promo-editor .itemdate .option {
	display: grid;
	grid-template-columns: 54px minmax(85px, 1fr) 90px;
	gap: 5px;
}

.app-body .ui-promo-editor .itemdate .option > .title { grid-column: 1 / -1; }

.app-body .ui-promo-editor .button-group a {
	display: inline-flex;
	width: auto;
	min-height: 30px;
	margin: 3px;
	padding: 6px 9px;
	border-radius: 8px;
}

.app-body [id^="configintcontent_"]:has(> #editpromocode) > .ui-promo-savebar {
	position: static;
	display: block;
	width: min(1080px, 100%);
	margin: 0;
	padding: 10px 13px;
	background: rgba(255, 255, 255, .98);
	border-radius: 0 0 17px 17px;
	box-shadow: 0 18px 55px rgba(7, 21, 40, .24);
}

.app-body .ui-promo-savebar .controls {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	width: 100%;
}

.app-body .ui-promo-savebar .btn {
	float: none;
	min-width: 110px;
	height: 39px;
	margin: 0;
	border-radius: 9px;
}

/* Store locator workspace */
.app-body .ui-store-locator {
	display: grid;
	gap: 14px;
}

.app-body .ui-locator-guide {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 18px;
	color: var(--ui-text);
	background: linear-gradient(120deg, #fff, #edf8fd);
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
	text-align: left;
}

.app-body .ui-locator-guide small {
	color: var(--ui-brand-dark);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.app-body .ui-locator-guide h2 {
	margin: 4px 0;
	font-size: 18px;
}

.app-body .ui-locator-guide p {
	margin: 0;
	color: var(--ui-muted);
	font-size: 9px;
	line-height: 1.45;
}

.app-body .ui-locator-guide details {
	padding: 12px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid #d5e4ed;
	border-radius: 10px;
}

.app-body .ui-locator-guide summary {
	color: var(--ui-text);
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}

.app-body .ui-locator-guide__rules {
	display: grid;
	gap: 4px;
	margin-top: 9px;
}

.app-body .ui-locator-guide__rules p {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	gap: 7px;
}

.app-body .ui-locator-guide code {
	padding: 4px 6px;
	color: var(--ui-brand-dark);
	background: #e7f4fb;
	border-radius: 6px;
	font-weight: 800;
	text-align: center;
}

.app-body .ui-store-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 4px 2px;
}

.app-body .ui-store-toolbar small,
.app-body .ui-store-toolbar strong { display: block; }
.app-body .ui-store-toolbar small { color: var(--ui-brand-dark); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.app-body .ui-store-toolbar strong { color: var(--ui-text); font-size: 15px; }
.app-body .ui-store-toolbar p { margin: 0; color: var(--ui-muted); font-size: 9px; }

.app-body .ui-store-locator > .stores,
.app-body .ui-store-locator > .stores > .inner {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

.app-body .ui-store-locator > .stores > .inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
	gap: 12px;
}

.app-body .ui-store-locator .teaser.store {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 210px;
	margin: 0;
	overflow: hidden;
	color: var(--ui-text);
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.app-body .ui-store-locator .teaser.store:hover,
.app-body .ui-store-locator .teaser.store:focus-visible {
	border-color: #8ecde8;
	box-shadow: 0 11px 24px rgba(29, 68, 102, .12);
	outline: none;
	transform: translateY(-2px);
}

.app-body .ui-store-locator .license,
.app-body .ui-store-locator .title {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	text-align: left;
}

.app-body .ui-store-locator .license {
	color: var(--ui-text);
	background: #fff;
	border-bottom: 1px solid var(--ui-border);
	font-size: 11px;
	font-weight: 800;
}

.app-body .ui-store-locator .title {
	min-height: 48px;
	color: var(--ui-muted);
	background: #f8fbfd;
	font-size: 9px;
	line-height: 1.45;
}

.app-body .ui-store-locator .postcode {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 5px;
	width: 100%;
	padding: 12px 14px;
	background: #fff;
}

.app-body .ui-store-locator .postcode p {
	margin: 0;
	padding: 4px 7px;
	color: #27536d;
	background: #eaf5fb;
	border-radius: 6px;
	font-size: 8px;
	font-weight: 750;
}

.app-body .ui-store-locator .teaser.store footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 10px 14px;
	color: var(--ui-muted);
	background: #f8fbfd;
	border-top: 1px solid var(--ui-border);
	font-size: 8px;
}

.app-body .ui-store-locator .teaser.store footer strong { color: var(--ui-brand-dark); }

.app-body .ui-store-locator-editor .overlay {
	position: fixed;
	z-index: 1100;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(8, 22, 42, .62);
	backdrop-filter: blur(4px);
}

.app-body .ui-store-locator-editor .popup {
	width: min(650px, 100%);
	height: auto !important;
	min-height: 0 !important;
	max-height: calc(100vh - 40px);
	margin: 0;
	overflow: auto;
	overflow: hidden;
	background: #f1f6fa;
	border-radius: 16px;
	box-shadow: 0 25px 70px rgba(7, 21, 40, .36);
}

.app-body .ui-store-locator-editor .popup > h2 {
	margin: 0;
	padding: 17px 19px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #176b8f);
	font-size: 16px;
	text-align: left;
}

.app-body .ui-store-locator-editor .popup > .infoblock {
	margin: 0;
	padding: 12px 18px;
	color: #49647b;
	background: #e8f4fa;
	border: 0;
	font-size: 9px;
	line-height: 1.5;
	text-align: left;
}

.app-body .ui-store-locator-editor .popup > .inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	padding: 14px;
}

.app-body .ui-store-locator-editor .item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	justify-content: flex-start !important;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
}

.app-body .ui-store-locator-editor .item:last-child { grid-column: 1 / -1; }
.app-body .ui-store-locator-editor .item > .title { font-size: 9px; font-weight: 800; }
.app-body .ui-store-locator-editor .inputbox,
.app-body .ui-store-locator-editor select,
.app-body .ui-store-locator-editor textarea { width: 100%; margin: 0; }
.app-body .ui-store-locator-editor textarea { min-height: 210px; padding: 11px; text-align: left !important; }
.app-body .ui-store-locator-editor .controls { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
.app-body .ui-store-locator-editor .controls .btn { float: none; min-width: 105px; margin: 0; border-radius: 9px; }

@media (max-width: 900px) {
	.app-body .ui-push-filter,
	.app-body .ui-promo-toolbar { grid-template-columns: 1fr 1fr; }
	.app-body .ui-push-filter__heading,
	.app-body .ui-promo-search { grid-column: 1 / -1; }
	.app-body .ui-push-editor #pushForm > .settings,
	.app-body .ui-promo-editor > .settings { grid-template-columns: 1fr; }
	.app-body .ui-push-editor .settingsnav,
	.app-body .ui-promo-editor .promonav { display: grid; grid-template-columns: 1fr 1fr; }
	.app-body .push-audience-card { margin: 0; }
	.app-body .ui-locator-guide { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.app-body .ui-push-filter,
	.app-body .ui-promo-toolbar,
	.app-body .ui-push-editor .publish > .inner,
	.app-body .ui-promo-editor .promoinfo > .inner,
	.app-body .ui-store-locator-editor .popup > .inner { grid-template-columns: 1fr; }
	.app-body .ui-push-filter__heading,
	.app-body .ui-promo-search,
	.app-body .ui-push-editor .stage1 .item:nth-child(4),
	.app-body .ui-push-editor .stage1 .controls,
	.app-body .ui-push-editor .stage2 .item:last-child,
	.app-body .ui-push-editor .pushcenter .item:first-child,
	.app-body .ui-store-locator-editor .item:last-child { grid-column: auto; }
	.app-body .ui-push-steps li { grid-template-columns: 26px 1fr; padding: 7px; }
	.app-body .ui-push-steps li > span { width: 26px; height: 26px; }
	.app-body .ui-push-steps small { display: none; }
	.app-body .ui-push-editor .settingsnav,
	.app-body .ui-promo-editor .promonav { display: flex; }
	.app-body [id^="configintcontent_"]:has(> #editpromocode) { padding: 0; justify-content: flex-start; }
	.app-body #editpromocode.ui-promo-editor { max-height: calc(100vh - 62px); border-radius: 0; }
	.app-body [id^="configintcontent_"]:has(> #editpromocode) > .ui-promo-savebar { border-radius: 0; }
	.app-body .ui-promo-editor .itemdate #promoneverexpire { grid-template-columns: 1fr; }
	.app-body .ui-store-locator-editor .overlay { padding: 0; }
	.app-body .ui-store-locator-editor .popup { height: 100%; overflow: auto; border-radius: 0; }

	/* Dense operational tables remain useful on phones instead of becoming
	   one very tall field per row. Labels are supplied by the existing UI
	   enhancer, so a two-column card keeps every control readable. */
	body.app-body[data-page="shopsettings"] .shopsettings .tablecontent > .ui-data-row,
	.app-body .ui-push-list .tablecontent > .shop.ui-data-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		align-items: stretch !important;
	}

	body.app-body[data-page="shopsettings"] .shopsettings .tablecontent > .ui-data-row > .menuitem,
	.app-body .ui-push-list .tablecontent > .shop.ui-data-row > .menuitem {
		display: block !important;
		grid-column: auto !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 56px !important;
		padding: 9px 10px !important;
	}

	body.app-body[data-page="shopsettings"] .shopsettings .tablecontent > .ui-data-row > .menuitem:last-child,
	.app-body .ui-push-list .tablecontent > .shop.ui-data-row > .menuitem:last-child {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.app-body .ui-push-list .tablecontent > .shop.ui-data-row > .menuitem:nth-child(1),
	.app-body .ui-push-list .tablecontent > .shop.ui-data-row > .menuitem:nth-child(4) {
		background: #f6fafd;
	}

	/* Promo rows are full desktop grids. Collapse them into labelled cards on
	   phones so codes and dates never shrink into vertical letter stacks. */
	.app-body #promocodes > .shops.promo .tableheader,
	.app-body .ui-promo-codes .tableheader {
		display: none !important;
	}

	.app-body #promocodes > .shops.promo .tablecontent > .shop,
	.app-body .ui-promo-codes .tablecontent > .item-promo-code {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem,
	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem {
		display: block !important;
		grid-column: auto !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 54px !important;
		padding: 9px 10px !important;
		word-break: normal !important;
		overflow-wrap: anywhere;
	}

	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:first-child {
		white-space: nowrap;
		overflow-wrap: normal;
	}

	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:nth-child(5):empty,
	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:nth-child(8):empty {
		display: none !important;
	}

	.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem:last-child:empty {
		display: none !important;
	}

	.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem:last-child,
	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:last-child {
		display: grid !important;
		grid-column: 1 / -1 !important;
		place-items: center !important;
	}

	.app-body .ui-promo-toolbar .ui-promo-add {
		width: 100% !important;
	}
}

/* Workspace containment fixes: legacy screen widths must never escape the viewport. */
.app-body .shopsettingspulldown.ui-settings-workspace-host,
.app-body .forcepulldown.ui-domain-workspace-host {
	box-sizing: border-box !important;
	width: calc(100vw - var(--ui-sidebar-width) - 20px) !important;
	max-width: calc(100vw - var(--ui-sidebar-width) - 20px) !important;
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor,
.app-body .ui-domain-workspace-host .ui-domain-editor {
	box-sizing: border-box !important;
	width: min(1380px, 100%) !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	align-self: stretch;
}

.app-body .ui-settings-workspace-host > .savebar {
	height: 68px;
	min-height: 68px;
	margin: 0 !important;
	box-sizing: border-box;
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor > .settings {
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
}

.app-body .ui-settings-workspace-host .ui-settings-editor .settingsnav,
.app-body .ui-settings-workspace-host .ui-settings-editor .settingswrapper {
	height: auto !important;
	min-height: 0 !important;
	max-height: 100% !important;
}

.app-body .ui-domain-workspace-host .ui-domain-editor {
	height: auto !important;
}

.app-body .ui-settings-workspace-host #settingslistpage.ui-settings-editor > .settings,
.app-body .ui-settings-workspace-host .settingswrapper,
.app-body .ui-settings-workspace-host .settingsinfo,
.app-body .ui-domain-workspace-host .domrecdetails,
.app-body .ui-domain-workspace-host .ui-domain-editor__content {
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

@media (max-width: 900px) {
	.app-body .shopsettingspulldown.ui-settings-workspace-host,
	.app-body .forcepulldown.ui-domain-workspace-host {
		width: 100vw !important;
		max-width: 100vw !important;
	}
}

/* Hosted website tabs and weekly hours. */
.app-body .ui-domain-editor [data-domain-section][hidden] {
	display: none !important;
}

.app-body .ui-domain-editor .ui-domain-editor__content > h2 {
	display: none !important;
}

.app-body .ui-domain-editor .ui-opening-hours {
	grid-column: 1 / -1;
	padding: 14px !important;
}

.app-body .ui-domain-editor .ui-opening-hours > .details {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

.app-body .ui-domain-editor .ui-opening-day {
	display: grid !important;
	grid-template-columns: 74px 76px minmax(250px, 1fr) minmax(250px, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 8px 10px !important;
	background: #f7fafc;
	border: 1px solid #dce5ed;
	border-radius: 9px;
}

.app-body .ui-domain-editor .ui-opening-day > label {
	color: var(--ui-text);
	font-size: 10px;
	font-weight: 800;
}

.app-body .ui-domain-editor .ui-opening-day__state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0b7d55;
	font-size: 8px;
	font-weight: 800;
}

.app-body .ui-domain-editor .ui-opening-day__state input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--ui-success);
}

.app-body .ui-domain-editor .ui-opening-shift {
	display: grid;
	grid-template-columns: auto minmax(82px, 1fr) auto minmax(82px, 1fr);
	align-items: center;
	gap: 6px;
}

.app-body .ui-domain-editor .ui-opening-shift small {
	color: var(--ui-muted);
	font-size: 7px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.app-body .ui-domain-editor .ui-opening-shift > span {
	color: var(--ui-muted);
	font-size: 8px;
}

.app-body .ui-domain-editor .ui-opening-day select {
	min-width: 0;
	min-height: 34px;
	padding: 6px 25px 6px 8px;
}

.app-body .ui-domain-editor .ui-opening-add-shift {
	min-height: 32px;
	padding: 6px 9px;
	white-space: nowrap;
	color: #176b8f;
	background: #e6f4fa;
	border: 1px solid #bddbea;
	border-radius: 7px;
	font-size: 7px;
	font-weight: 800;
	cursor: pointer;
}

.app-body .ui-domain-editor .ui-opening-day.is-closed {
	background: #f3f5f7;
}

.app-body .ui-domain-editor .ui-opening-day.is-closed .ui-opening-day__state {
	color: #697b8d;
}

.app-body .ui-domain-editor .ui-opening-day.is-incomplete {
	border-color: #e8b13b;
	box-shadow: inset 3px 0 0 #e8b13b;
}

@media (max-width: 1120px) {
	.app-body .ui-domain-editor .ui-opening-day {
		grid-template-columns: 70px 74px minmax(230px, 1fr);
	}
	.app-body .ui-domain-editor .ui-opening-shift--secondary,
	.app-body .ui-domain-editor .ui-opening-add-shift {
		grid-column: 3;
	}
}

@media (max-width: 700px) {
	.app-body .ui-domain-editor .ui-opening-day {
		grid-template-columns: 1fr auto;
	}
	.app-body .ui-domain-editor .ui-opening-shift,
	.app-body .ui-domain-editor .ui-opening-shift--secondary,
	.app-body .ui-domain-editor .ui-opening-add-shift {
		grid-column: 1 / -1;
	}
	.app-body .ui-domain-editor .ui-opening-shift {
		grid-template-columns: 1fr auto 1fr;
	}
	.app-body .ui-domain-editor .ui-opening-shift small {
		grid-column: 1 / -1;
	}
}

/* Live-order channel explanation, presence and compact breakdown panels. */
.app-body .ui-live-summary__channel-guide {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.app-body .ui-live-channel-guide {
	display: grid;
	grid-template-columns: 9px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 10px;
	background: #f7fafc;
	border: 1px solid #e1e8ef;
	border-radius: 9px;
}

.app-body .ui-live-channel-guide__dot {
	width: 8px;
	height: 8px;
	background: #182b46;
	border-radius: 50%;
}

.app-body .ui-live-channel-guide--integration .ui-live-channel-guide__dot {
	background: linear-gradient(135deg, #f5a716 0 33%, #14a56f 33% 66%, #31aeb2 66%);
}

.app-body .ui-live-channel-guide--kiosk .ui-live-channel-guide__dot {
	background: #7754bc;
}

.app-body .ui-live-channel-guide strong,
.app-body .ui-live-channel-guide small {
	display: block;
}

.app-body .ui-live-channel-guide strong { color: var(--ui-text); font-size: 9px; }
.app-body .ui-live-channel-guide small { margin-top: 1px; color: var(--ui-muted); font-size: 7px; }
.app-body .ui-live-channel-guide__value { color: var(--ui-text); font-size: 11px; font-weight: 800; }
.app-body .ui-live-channel-guide__orders { color: #5e7185; font-size: 8px; font-weight: 700; }

.app-body .ui-live-order-card__identity p {
	display: flex;
	align-items: center;
	gap: 6px;
}

.app-body .ui-shop-presence {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #566c80;
	font-size: 8px;
	font-weight: 800;
}

.app-body .ui-shop-presence::before {
	width: 7px;
	height: 7px;
	background: #9aa9b7;
	border-radius: 50%;
	content: "";
}

.app-body .ui-shop-presence.is-online { color: #08754c; }
.app-body .ui-shop-presence.is-online::before { background: #14a56f; box-shadow: 0 0 0 3px rgba(20, 165, 111, .12); }
.app-body .ui-shop-presence.is-offline { color: #8a5a48; }
.app-body .ui-shop-presence.is-offline::before { background: #bd765a; }

.app-body .ui-live-mix { padding: 7px 8px; }
.app-body .ui-live-mix__chips { align-content: center; min-height: 30px; }

/* Order status keeps the server's full status sequence visible and keyboard-accessible. */
body.app-body .ui-shop-orders .ui-order-status {
	position: relative;
	z-index: 3;
	justify-content: center !important;
	min-width: 0 !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px !important;
	cursor: help;
}

body.app-body .ui-shop-orders .ui-order-status.i,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.i { background-image: url(../images/svg/status/order-placed.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.ii,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.ii { background-image: url(../images/svg/status/order-rejected.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.iii,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.iii { background-image: url(../images/svg/status/order-cancelled.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.iv,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.iv { background-image: url(../images/svg/status/order-received.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.v,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.v { background-image: url(../images/svg/status/order-accept.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.vi,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.vi { background-image: url(../images/svg/status/order-domed.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.vii,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.vii { background-image: url(../images/svg/status/driver-assigned.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.viii,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.viii { background-image: url(../images/svg/status/order-enroute.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.ix,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.ix { background-image: url(../images/svg/status/order-delivered.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status.x,
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.x { background-image: url(../images/svg/status/order-complete.svg) !important; }

body.app-body .ui-shop-orders .ui-order-status > .statushover {
	position: absolute !important;
	top: 44px !important;
	left: 4px !important;
	z-index: 400 !important;
	display: none !important;
	width: 220px !important;
	min-height: 0 !important;
	padding: 8px !important;
	overflow: visible !important;
	background: #fff !important;
	border: 1px solid #d7e1ea;
	border-radius: 10px;
	box-shadow: 0 14px 35px rgba(18, 35, 57, .22) !important;
}

body.app-body .ui-shop-orders .ui-order-status:hover > .statushover,
body.app-body .ui-shop-orders .ui-order-status:focus > .statushover,
body.app-body .ui-shop-orders .ui-order-status:focus-within > .statushover {
	display: grid !important;
}

body.app-body .ui-shop-orders .ui-data-row:hover,
body.app-body .ui-shop-orders .ui-data-row:focus-within {
	position: relative;
	z-index: 100;
	overflow: visible !important;
}

body.app-body .ui-shop-orders .ui-order-status:hover,
body.app-body .ui-shop-orders .ui-order-status:focus,
body.app-body .ui-shop-orders .ui-order-status:focus-within {
	z-index: 300;
}

body.app-body .ui-shop-orders .ui-order-status .statusrow {
	display: grid !important;
	grid-template-columns: 34px 54px minmax(0, 1fr);
	align-items: center;
	float: none !important;
	min-height: 36px;
	border-bottom: 1px solid #edf2f6;
}

body.app-body .ui-shop-orders .ui-order-status .statusrow:last-child { border-bottom: 0; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon { width: 34px !important; height: 34px !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 20px !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon1 { background-image: url(../images/svg/status/order-placed.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon2 { background-image: url(../images/svg/status/order-rejected.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon3 { background-image: url(../images/svg/status/order-cancelled.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon4 { background-image: url(../images/svg/status/order-received.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon5 { background-image: url(../images/svg/status/order-accept.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon6 { background-image: url(../images/svg/status/order-domed.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon7 { background-image: url(../images/svg/status/driver-assigned.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon8 { background-image: url(../images/svg/status/order-enroute.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon9 { background-image: url(../images/svg/status/order-delivered.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .icon.icon10 { background-image: url(../images/svg/status/order-complete.svg) !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .time { width: auto !important; height: auto !important; color: #5f7183; font-size: 8px; line-height: 1.2 !important; }
body.app-body .ui-shop-orders .ui-order-status .statusrow .title { width: auto; margin: 0; color: var(--ui-text); font-size: 8px; font-weight: 800; text-align: left; }

body.app-body .ui-shop-orders .ui-order-icon-cell.is-app-version-8 { position: relative; }
body.app-body .ui-shop-orders .ui-device-version-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	display: grid;
	width: 14px;
	height: 14px;
	place-items: center;
	color: #176185;
	background: #fff;
	border: 1px solid #b9d7e5;
	border-radius: 50%;
	font-size: 7px;
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 900px) {
	.app-body .ui-live-summary__channel-guide { grid-template-columns: 1fr; }
	.app-body .ui-live-channel-guide { grid-template-columns: 9px minmax(0, 1fr) auto; }
	.app-body .ui-live-channel-guide__orders { grid-column: 2 / -1; }
}

/* Shop order detail is a top-aligned workspace instead of an inline expansion. */
.app-body .shoporderspulldown.ui-orders-workspace-host {
	position: fixed !important;
	top: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	left: calc(var(--ui-sidebar-width) + 10px) !important;
	z-index: 1260 !important;
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	box-sizing: border-box !important;
	width: calc(100vw - var(--ui-sidebar-width) - 20px) !important;
	max-width: calc(100vw - var(--ui-sidebar-width) - 20px) !important;
	min-width: 0 !important;
	padding: 10px !important;
	overflow: hidden !important;
	background: rgba(15, 29, 49, .66) !important;
	backdrop-filter: blur(5px);
}

.app-body .ui-orders-workspace__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(1420px, 100%);
	margin: 0 auto;
	padding: 13px 17px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #176b8f);
	border-radius: 15px 15px 0 0;
	box-sizing: border-box;
}

.app-body .ui-orders-workspace__header small { display: block; margin-bottom: 2px; color: #7bd0f3; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.app-body .ui-orders-workspace__header h2 { margin: 0; padding: 0 !important; color: #fff; font-size: 20px; text-indent: 0 !important; }
.app-body .ui-orders-workspace__header p { margin: 3px 0 0; color: #c4dceb; font-size: 9px; }
.app-body .ui-orders-workspace__header button { width: 40px; height: 40px; padding: 0; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; font-size: 22px; cursor: pointer; }

.app-body .ui-orders-workspace-host > section.content {
	display: block !important;
	box-sizing: border-box;
	width: min(1420px, 100%) !important;
	height: 100% !important;
	min-height: 0;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: hidden;
	background: #fff;
	border-radius: 0 0 15px 15px;
}

.app-body .ui-orders-workspace-host .ui-shop-orders {
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0;
	margin: 0 !important;
	overflow: hidden !important;
	background: #fff;
}

.app-body .ui-orders-workspace-host .ui-shop-orders > .tablecontent {
	min-height: 0;
	overflow: auto;
}

body.app-body .ui-shop-orders .ui-order-status-empty {
	justify-content: center !important;
	color: #a2afbb;
	font-size: 15px;
}

@media (max-width: 900px) {
	.app-body .shoporderspulldown.ui-orders-workspace-host {
		inset: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		padding: 0 !important;
	}
	.app-body .ui-orders-workspace__header,
	.app-body .ui-orders-workspace-host > section.content { width: 100% !important; border-radius: 0; }
}

/* Reward movement is visible at a glance without making zero-value rows noisy. */
body.app-body .ui-shop-orders .ui-order-points {
	justify-content: center !important;
	font-variant-numeric: tabular-nums;
}

body.app-body .ui-shop-orders .ui-order-points.is-earned,
body.app-body .ui-shop-orders .ui-order-points.is-spent {
	display: flex !important;
	width: fit-content !important;
	min-width: 38px !important;
	height: 24px !important;
	margin: auto !important;
	padding: 0 7px !important;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 900;
}

body.app-body .ui-shop-orders .ui-order-points.is-earned {
	color: #08754c;
	background: #e3f7ef !important;
	border: 1px solid #b6e8d4;
}

body.app-body .ui-shop-orders .ui-order-points.is-spent {
	color: #8d3f57;
	background: #fbeaf0 !important;
	border: 1px solid #efc5d3;
}

body.app-body .ui-shop-orders .ui-order-points.is-zero { color: #a4b0bb; }

/* Individual order records open as a polished, top-aligned modal workspace. */
body.app-body.has-order-detail-modal { overflow: hidden; }
body.app-body.has-order-detail-modal .shoporderspulldown.ui-orders-workspace-host { backdrop-filter: none; }

body.app-body .vieworderspulldown.ui-order-detail-modal-host {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: var(--ui-sidebar-width) !important;
	z-index: 1900 !important;
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	box-sizing: border-box;
	width: calc(100vw - var(--ui-sidebar-width)) !important;
	max-width: none !important;
	padding: 14px !important;
	overflow: hidden !important;
	background: rgba(12, 26, 45, .72) !important;
	backdrop-filter: blur(7px);
}

body.app-body .ui-order-detail-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	box-sizing: border-box;
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: 14px 18px;
	color: #fff;
	background: linear-gradient(125deg, #10233f, #17749b);
	border-radius: 16px 16px 0 0;
}

body.app-body .ui-order-detail-modal__header small {
	display: block;
	margin-bottom: 2px;
	color: #79d3f5;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.app-body .ui-order-detail-modal__header h2 { margin: 0; padding: 0 !important; color: #fff; font-size: 20px; text-indent: 0 !important; }
body.app-body .ui-order-detail-modal__header p { margin: 3px 0 0; color: #c5deea; font-size: 9px; }
body.app-body .ui-order-detail-modal__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
body.app-body .ui-order-detail-download {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 12px !important;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 11px;
	font-size: 9px;
	font-weight: 900;
	cursor: pointer;
}
body.app-body .ui-order-detail-download::before {
	content: none;
	display: none;
}
body.app-body .ui-order-detail-download img {
	position: static !important;
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
	overflow: visible;
	clip: auto;
	clip-path: none;
	filter: brightness(0) invert(1);
	object-fit: contain;
}
body.app-body .ui-order-detail-modal__header button {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 11px;
	font-size: 23px;
	cursor: pointer;
}
body.app-body .ui-order-detail-modal__header .ui-order-detail-context-action {
	width: auto;
	min-width: 96px;
	padding: 0 12px;
	font-size: 9px;
	font-weight: 900;
	white-space: nowrap;
}
body.app-body .ui-order-detail-modal__header .ui-order-detail-context-action:hover,
body.app-body .ui-order-detail-modal__header .ui-order-detail-context-action:focus-visible {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .4);
}

body.app-body .vieworderspulldown.ui-order-detail-modal-host > .ui-order-detail-modal {
	display: block !important;
	align-self: start;
	box-sizing: border-box;
	width: min(1180px, 100%) !important;
	height: auto !important;
	max-height: 100% !important;
	min-height: 0;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: auto !important;
	background: #eef3f8 !important;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 24px 70px rgba(6, 18, 33, .35);
}

body.app-body .ui-order-detail-modal .ui-order-detail-modal__body {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 14px;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	min-height: 0;
	padding: 14px !important;
}

body.app-body .ui-order-detail-modal .orderinfo,
body.app-body .ui-order-detail-modal .customerinfo {
	display: block !important;
	float: none !important;
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dce5ed;
	border-radius: 13px;
	box-shadow: 0 6px 18px rgba(20, 42, 67, .06);
}

body.app-body .ui-order-detail-modal .orderinfo { grid-column: 1; grid-row: 1; }
body.app-body .ui-order-detail-modal .customerinfo { grid-column: 2; grid-row: 1; }
body.app-body .ui-order-detail-modal .orderinfo > h2,
body.app-body .ui-order-detail-modal .customerinfo > h2 {
	margin: 0 !important;
	padding: 12px 15px !important;
	color: #172b46 !important;
	background: #f5f8fb !important;
	border-bottom: 1px solid #dfe7ee;
	font-size: 11px !important;
	font-weight: 900;
	letter-spacing: .06em;
}

body.app-body .ui-order-detail-modal .inner .orderitem {
	box-sizing: border-box;
	padding: 10px 14px !important;
	border-bottom: 1px solid #edf1f5 !important;
}

body.app-body .ui-order-detail-modal .inner .orderitem:last-child { border-bottom: 0 !important; }
body.app-body .ui-order-detail-modal .inner .orderitem .label { display: block; color: #607388; font-size: 8px; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; }
body.app-body .ui-order-detail-modal .inner .orderitem .details { display: block; margin-top: 4px; color: #162a44; font-size: 10px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
body.app-body .ui-order-detail-modal .orderinfo .orderitem { padding-top: 12px !important; padding-bottom: 12px !important; }
body.app-body .ui-order-detail-modal .orderinfo .orderitem .price { color: #172b46; font-size: 11px; }
body.app-body .ui-order-detail-modal .orderinfo .ui-order-detail-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: start;
}
body.app-body .ui-order-detail-modal .orderinfo .ui-order-detail-product .details { min-width: 0; }
body.app-body .ui-order-detail-modal .orderinfo > .total {
	display: block;
	margin: 0;
	padding: 14px;
	color: #fff;
	background: #172b46;
	font-size: 18px;
	font-weight: 900;
	text-align: right;
}

body.app-body .ui-order-detail-modal .customerinfo { background: #f4f7fa; }
body.app-body .ui-order-detail-modal .ui-order-detail-groups {
	display: grid;
	gap: 10px;
	box-sizing: border-box;
	padding: 11px;
}

body.app-body .ui-order-detail-summary {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 8px 10px;
	align-items: center;
	padding: 10px;
	color: #fff;
	background: linear-gradient(135deg, #152c49, #1b7398);
	border-radius: 11px;
}

body.app-body .ui-order-detail-summary__avatar {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #15304c;
	background: #fff;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 900;
}

body.app-body .ui-order-detail-summary__identity { min-width: 0; }
body.app-body .ui-order-detail-summary__identity small {
	display: block;
	margin-bottom: 2px;
	color: #9edcf4;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.app-body .ui-order-detail-summary__identity strong {
	display: block;
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.app-body .ui-order-detail-summary__chips {
	display: flex;
	grid-column: 2;
	flex-wrap: wrap;
	gap: 5px;
}

body.app-body .ui-order-detail-chip {
	display: inline-flex;
	align-items: center;
	min-height: 23px;
	box-sizing: border-box;
	padding: 4px 8px;
	color: #eaf8ff;
	background: rgba(255, 255, 255, .11);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	font-size: 8px;
	font-weight: 800;
}
body.app-body .ui-order-detail-chip--payment {
	display: inline-grid;
	grid-template-columns: 30px minmax(0, auto);
	gap: 8px;
	min-height: 40px;
	padding: 5px 11px 5px 5px;
	color: #17314c;
	background: #fff;
	border-color: rgba(255, 255, 255, .45);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(6, 23, 40, .15);
}
body.app-body .ui-order-detail-chip__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	color: #fff;
	background: #17314c;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 900;
}
body.app-body .ui-order-detail-chip--payment img {
	display: block;
	width: 24px;
	max-width: 24px;
	height: 20px;
	margin: 0;
	object-fit: contain;
}
body.app-body .ui-order-detail-chip--payment.is-monochrome img { filter: brightness(0) invert(1); }
body.app-body .ui-order-detail-chip__copy { align-self: center; min-width: 0; }
body.app-body .ui-order-detail-chip__copy small,
body.app-body .ui-order-detail-chip__copy strong { display: block; line-height: 1.15; }
body.app-body .ui-order-detail-chip__copy small {
	margin-bottom: 2px;
	color: #607388;
	font-size: 6px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}
body.app-body .ui-order-detail-chip__copy strong { font-size: 10px; white-space: nowrap; }
body.app-body .ui-order-integration-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 4px 9px 4px 5px;
	color: #fff;
	background: rgba(7, 22, 38, .3);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
}
body.app-body .ui-order-integration-chip > img {
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	padding: 4px;
	background: rgba(255, 255, 255, .08);
	border-radius: 8px;
	object-fit: contain;
}
body.app-body .ui-order-integration-chip small,
body.app-body .ui-order-integration-chip strong { display: block; line-height: 1.15; }
body.app-body .ui-order-integration-chip small { color: #99daf3; font-size: 6px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
body.app-body .ui-order-integration-chip strong { margin-top: 2px; font-size: 10px; }

body.app-body .ui-order-detail-section,
body.app-body .ui-order-detail-disclosure {
	margin: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dce5ed;
	border-radius: 10px;
}

body.app-body .ui-order-detail-section > header,
body.app-body .ui-order-detail-disclosure > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 35px;
	padding: 8px 10px;
	background: #f8fafc;
	border-bottom: 1px solid #e5ebf1;
}

body.app-body .ui-order-detail-disclosure > summary {
	cursor: pointer;
	list-style: none;
}
body.app-body .ui-order-detail-disclosure > summary::-webkit-details-marker { display: none; }
body.app-body .ui-order-detail-disclosure > summary::after {
	content: '+';
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-left: 8px;
	color: #2d6f91;
	background: #e8f4fa;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 900;
}
body.app-body .ui-order-detail-disclosure[open] > summary::after { content: '\2212'; }
body.app-body .ui-order-detail-disclosure > summary small {
	margin-left: auto;
	color: #74869a;
	font-size: 8px;
	font-weight: 700;
}

body.app-body .ui-order-detail-section__heading {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}
body.app-body .ui-order-detail-section__heading img {
	width: 15px;
	height: 15px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(32%) sepia(36%) saturate(1054%) hue-rotate(154deg) brightness(91%) contrast(90%);
}
body.app-body .ui-order-detail-section__heading strong {
	color: #1b314c;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.app-body .ui-order-detail-section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
body.app-body .ui-order-detail-disclosure .ui-order-detail-section__grid { grid-template-columns: 1fr; }
body.app-body .ui-order-detail-modal .ui-order-detail-section__grid .orderitem {
	min-width: 0;
	padding: 9px 10px !important;
	background: #fff;
	border-right: 0;
	border-bottom: 1px solid #edf1f5 !important;
}
body.app-body .ui-order-detail-modal .ui-order-detail-section__grid .orderitem:last-child { border-bottom: 0 !important; }
body.app-body .ui-order-detail-modal .ui-order-detail-section__grid .ui-order-detail-field--wide {
	grid-column: 1 / -1;
	border-right: 0;
}
body.app-body .ui-order-detail-modal .ui-order-detail-section--technical-details .ui-order-detail-section__grid {
	grid-template-columns: 1fr;
}
body.app-body .ui-order-detail-modal .ui-order-detail-section--technical-details .orderitem {
	border-right: 0;
}
body.app-body .ui-order-detail-modal .ui-order-detail-section--payments-charges .ui-order-detail-charge { background: #fff; }
body.app-body .ui-order-detail-modal .ui-order-detail-section--payments-charges .ui-order-detail-charge .label { color: #607388; font-style: normal; }
body.app-body .ui-order-detail-modal .ui-order-detail-disclosure .orderitem { border-right: 0; }

body.app-body .ui-order-detail-supplement {
	display: grid;
	grid-column: 3;
	grid-row: 1;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 10px;
}
body.app-body .ui-order-detail-supplement .ui-order-detail-section,
body.app-body .ui-order-detail-supplement .ui-order-detail-disclosure { min-width: 0; }

@media (max-width: 1180px) and (min-width: 901px) {
	body.app-body .ui-order-detail-modal .ui-order-detail-modal__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	body.app-body .vieworderspulldown.ui-order-detail-modal-host {
		inset: 0 !important;
		width: 100vw !important;
		padding: 0 !important;
	}
	body.app-body .ui-order-detail-modal__header,
	body.app-body .vieworderspulldown.ui-order-detail-modal-host > .ui-order-detail-modal { width: 100% !important; border-radius: 0; }
	body.app-body .vieworderspulldown.ui-order-detail-modal-host > .ui-order-detail-modal { align-self: stretch; height: 100% !important; }
	body.app-body .ui-order-detail-modal .ui-order-detail-modal__body { grid-template-columns: 1fr; padding: 10px !important; }
	body.app-body .ui-order-detail-modal .orderinfo,
	body.app-body .ui-order-detail-modal .customerinfo { grid-column: 1; grid-row: auto; }
	body.app-body .ui-order-detail-modal .orderinfo { order: 1; }
	body.app-body .ui-order-detail-modal .customerinfo { order: 2; }
	body.app-body .ui-order-detail-supplement { grid-column: 1; grid-template-columns: 1fr; order: 3; }
}

@media (max-width: 520px) {
	body.app-body .ui-order-detail-modal__header { padding: 12px 14px; }
	body.app-body .ui-order-detail-modal__header p { display: none; }
	body.app-body .ui-order-detail-modal__header h2 { font-size: 16px; overflow-wrap: anywhere; }
	body.app-body .ui-order-detail-summary { grid-template-columns: 34px minmax(0, 1fr); }
	body.app-body .ui-order-detail-summary__avatar { width: 34px; height: 34px; }
	body.app-body .ui-order-detail-section__grid { grid-template-columns: 1fr; }
	body.app-body .ui-order-detail-modal .ui-order-detail-section__grid .orderitem { border-right: 0; }
	body.app-body .ui-order-detail-modal .ui-order-detail-section__grid .orderitem:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #edf1f5 !important; }
}

/* Cross-page polish: scrolling, compact navigation panels and dense records. */
body.app-body { overflow-y: auto !important; }
body.app-body.has-order-detail-modal { overflow: hidden !important; }
.app-body #maincontent,
.app-body #searchcontent { overflow: visible; }

.app-body .mainnav > ul > li:hover,
.app-body .mainnav > ul > li:focus-within {
	height: auto !important;
	padding: 0 !important;
}
.app-body .mainnav ul.dropdown li:hover,
.app-body .mainnav ul.dropdown li:focus-within {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.app-body .mainnav ul.dropdown li a:hover,
.app-body .mainnav ul.dropdown li a:focus-visible {
	padding: 10px 12px 10px 42px !important;
}

.app-body .mainnav .date .searchbox { padding: 9px; }
.app-body .ui-order-date-range {
	display: grid;
	gap: 9px;
	padding: 9px;
	color: #dce7f3;
	background: #172338;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
}
.app-body .ui-order-date-range label { display: grid; gap: 4px; }
.app-body .ui-order-date-range label > span {
	color: #aebed0;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.app-body .ui-order-date-range label small { font-size: inherit; font-weight: 500; text-transform: none; }
.app-body .ui-order-date-range__end {
	display: grid;
	gap: 7px;
}
.app-body .ui-order-date-range__end[hidden] { display: none !important; }
.app-body .mainnav .ui-order-date-range input[type="date"] {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 9px !important;
	color: #eef6fb !important;
	color-scheme: dark;
	background: #222f46 !important;
	border: 1px solid #42516a !important;
	border-radius: 8px !important;
	font-size: 11px !important;
}
.app-body .ui-order-date-range__end > p { margin: 0; color: #8fa2b7; font-size: 7px; line-height: 1.4; }
.app-body .ui-date-range-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 31px;
	padding: 0 9px;
	color: #b9cbe0;
	background: transparent;
	border: 1px dashed #52627a;
	border-radius: 8px;
	font-size: 8px;
	font-weight: 800;
	cursor: pointer;
}
.app-body .ui-date-range-toggle:hover,
.app-body .ui-date-range-toggle:focus-visible {
	color: #fff;
	background: rgba(50, 170, 220, .1);
	border-color: #63c2e8;
}
.app-body .ui-date-range-toggle > span {
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}
.app-body .ui-order-date-range__actions { display: grid; grid-template-columns: .75fr 1.25fr; gap: 6px; }
.app-body .ui-order-date-range__actions--single { grid-template-columns: 1fr; }
.app-body .ui-order-date-presets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}
.app-body .ui-order-date-presets button {
	min-height: 30px;
	padding: 5px 7px;
	color: #d7e5f2;
	background: #24334a;
	border: 1px solid #3a4b63;
	border-radius: 7px;
	font-size: 8px;
	font-weight: 750;
	cursor: pointer;
}
.app-body .ui-order-date-presets button:hover,
.app-body .ui-order-date-presets button:focus-visible { color: #fff; border-color: #32a4d9; background: #2b405b; }
.app-body .ui-order-date-range__actions button {
	height: 34px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	font-size: 8px;
	font-weight: 900;
	cursor: pointer;
}
.app-body .ui-order-date-range__actions .ui-date-today { color: #cbd9e8; background: #29374e; }
.app-body .ui-order-date-range__actions .ui-date-apply { color: #fff; background: var(--ui-brand); }
.app-body .mainnav ul.dropdown li#datebox { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.app-body .ui-order-date-range__direction {
	display: grid;
	width: 20px;
	height: 20px;
	margin: -3px auto;
	place-items: center;
	color: #75c9ee;
	background: rgba(50, 170, 220, .12);
	border-radius: 999px;
	font-size: 11px;
}

/* Live orders empty state replaces the legacy illustration. */
.app-body .ui-live-empty.nothing {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	box-sizing: border-box;
	width: auto;
	min-height: 0;
	max-height: none;
	margin: 14px 0 0;
	padding: 20px 22px;
	background: #fff;
	background-image: none;
	border: 1px solid var(--ui-line);
	border-radius: 16px;
	box-shadow: var(--ui-shadow-soft);
}
.app-body .ui-live-empty__icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	background: linear-gradient(145deg, #34aadc, #1387c2);
	border-radius: 14px;
	box-shadow: 0 8px 18px rgba(18, 137, 194, .18);
}
.app-body .ui-live-empty__icon img {
	width: 23px;
	height: 23px;
	filter: brightness(0) invert(1);
}
.app-body .ui-live-empty__copy { min-width: 0; }
.app-body .ui-live-empty__copy > span {
	display: block;
	margin-bottom: 3px;
	color: var(--ui-brand-dark);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.app-body .ui-live-empty__copy h2 {
	margin: 0;
	padding: 0;
	color: var(--ui-ink);
	font-size: 18px;
	line-height: 1.25;
}
.app-body .ui-live-empty__copy p {
	margin: 4px 0 0;
	color: var(--ui-muted);
	font-size: 10px;
	line-height: 1.45;
}
.app-body .ui-live-empty__copy small {
	display: inline-flex;
	margin-top: 9px;
	padding: 5px 9px;
	color: #23506d;
	background: #eaf6fb;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 700;
}
@media (max-width: 700px) {
	.app-body .ui-live-empty.nothing {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 13px;
		padding: 16px;
	}
}

/* Multi-day order activity keeps the selected business dates visible. */
.app-body .ui-shop-orders-range {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	padding: 9px 12px;
	color: #36516c;
	background: #eaf6fb;
	border: 1px solid #cce6f2;
	border-radius: 11px;
	font-size: 9px;
}
.app-body .ui-shop-orders-range > span { color: #0873a7; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.app-body .ui-shop-orders-range > strong { color: #102a46; font-size: 10px; }
.app-body .ui-shop-orders-range > i { color: #7990a7; font-style: normal; }
.app-body .ui-shop-orders-range > small { margin-left: auto; color: #657d92; }
.app-body .ui-order-when {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	grid-auto-flow: row !important;
	align-content: center;
	justify-items: start;
	gap: 2px;
	line-height: 1 !important;
}
.app-body .ui-order-when .ui-order-time { box-sizing: border-box; min-width: 0; max-width: 100%; }
.app-body .ui-order-when .ui-order-time { order: 2; color: #0876ae; font-weight: 900; }
.app-body .ui-order-when .ui-order-date { order: 1; color: #526b82; font-size: 7.5px; font-weight: 900; letter-spacing: .01em; white-space: nowrap; }

/* Existing-image context in the replacement workflow. */
.app-body #shop_image_upload .ui-image-current {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: #fff;
	border: 1px solid #d9e5ef;
	border-radius: 11px;
}
.app-body #shop_image_upload .ui-image-current > img { width: 96px; height: 72px; object-fit: cover; background: #eef3f7; border-radius: 8px; }
.app-body #shop_image_upload .ui-image-current.is-placeholder > img { box-sizing: border-box; padding: 12px; object-fit: contain; opacity: .68; }
.app-body #shop_image_upload .ui-image-current > div { display: grid; gap: 3px; min-width: 0; }
.app-body #shop_image_upload .ui-image-current small { color: #0875aa; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.app-body #shop_image_upload .ui-image-current strong { overflow: hidden; color: #142b46; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-body #shop_image_upload .ui-image-current span { color: #73869a; font-size: 8px; }

/* Team access: a focused editor rather than an expanded table row. */
.app-body .ui-team-list .tableheader,
.app-body .ui-team-list .tablecontent > .user {
	display: grid !important;
	grid-template-columns: 130px minmax(100px, .55fr) minmax(170px, .82fr) 190px minmax(200px, 1.05fr) minmax(150px, .8fr) 88px 74px !important;
	min-width: 1200px;
}
.app-body .ui-team-list { overflow-x: auto; }
.app-body .ui-team-list .menuitem { display: flex !important; align-items: center; box-sizing: border-box; width: auto !important; min-width: 0 !important; padding: 11px 12px !important; overflow-wrap: anywhere; }
.app-body .ui-team-list .menuitem:nth-child(2),
.app-body .ui-team-list .menuitem:nth-child(3) { overflow: hidden; }
.app-body .ui-team-list .menuitem:nth-child(2) > *,
.app-body .ui-team-list .menuitem:nth-child(3) > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .ui-team-licence-list { display: flex; flex-wrap: wrap; gap: 5px; }
.app-body .ui-team-licence-list > span {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 3px 7px;
	color: #0873a7;
	background: #eaf5fb;
	border-radius: 7px;
	font-size: 10px;
	font-weight: 850;
	line-height: 1;
}
.app-body .ui-team-last-login,
.app-body .ui-team-ip-address { font-variant-numeric: tabular-nums; }
.app-body .ui-team-last-login,
.app-body .ui-team-ip-address { overflow-wrap: normal !important; white-space: nowrap; }
.app-body .ui-team-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.app-body .ui-team-sort i { color: #8092a4; font-size: 12px; font-style: normal; line-height: 1; }
.app-body .ui-team-sort:hover,
.app-body .ui-team-sort:focus-visible,
.app-body .ui-team-sort.is-active { color: #0875aa; outline: none; }
.app-body .ui-team-sort.is-active i { color: #0875aa; }
.app-body .ui-team-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	min-width: 55px;
	min-height: 32px;
	padding: 5px 8px;
	color: #0873a7;
	background: #eef5fa;
	border: 0;
	border-radius: 9px;
	font: inherit;
	font-size: 9px;
	font-weight: 850;
	cursor: pointer;
}
.app-body .ui-team-edit:hover { background: #dcecf7; }
.app-body .ui-team-edit:focus-visible { outline: 3px solid rgba(36, 163, 219, .3); outline-offset: 2px; }
.app-body .ui-team-edit img { width: 16px; height: 16px; padding: 0; background: transparent; border-radius: 0; transform: none; }
body.app-body.has-team-editor { overflow: hidden !important; }
.app-body .ui-team-editor-host {
	display: grid !important;
	position: fixed !important;
	z-index: 1280;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 10px !important;
	place-items: start center;
	overflow: auto;
	background: rgba(8, 22, 39, .68);
	backdrop-filter: blur(5px);
}
.app-body .ui-team-editor {
	display: grid !important;
	grid-template-columns: 270px minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	box-sizing: border-box;
	width: min(1020px, 100%) !important;
	max-height: calc(100vh - 20px);
	margin: 0 !important;
	overflow: hidden;
	background: #edf3f8 !important;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(4, 18, 35, .34);
}
.app-body .ui-team-editor--standalone { min-height: 610px; margin: 0 auto !important; box-shadow: var(--ui-shadow); }
.app-body .ui-team-editor--standalone > .ui-team-editor__header { display: none; }
.app-body .ui-team-editor__header {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	color: #fff;
	background: linear-gradient(110deg, #132d4c, #106b8e);
}
.app-body .ui-team-editor__header small { color: #79d0f2; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.app-body .ui-team-editor__header h2 { margin: 2px 0 0; padding: 0 !important; color: #fff; font-size: 18px; text-indent: 0 !important; }
.app-body .ui-team-editor__header p { margin: 3px 0 0; color: #d3e6f0; font-size: 8px; }
.app-body .ui-team-editor__header button { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; font-size: 22px; cursor: pointer; }
.app-body .ui-team-editor .ui-team-permissions {
	display: grid !important;
	grid-auto-rows: min-content;
	align-content: start;
	gap: 12px;
	box-sizing: border-box;
	width: auto !important;
	height: 100% !important;
	padding: 18px !important;
	background: linear-gradient(180deg, #152b46 0%, #122239 100%) !important;
}
.app-body .ui-team-permissions__heading { padding: 3px 2px 13px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.app-body .ui-team-permissions__heading small { color: #78caed; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.app-body .ui-team-permissions__heading strong { display: block; margin-top: 2px; font-size: 12px; }
.app-body .ui-team-permissions__heading p { margin: 4px 0 0; color: #9fb0c3; font-size: 8px; line-height: 1.45; }
.app-body .ui-team-editor .ui-team-permissions ul { display: grid; gap: 10px; margin: 0; padding: 0; }
.app-body .ui-team-editor .ui-team-permissions li {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 78px;
	gap: 12px;
	padding: 12px !important;
	color: #e7f1f8;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 11px;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.app-body .ui-team-editor .ui-team-permissions li:hover { background: rgba(255,255,255,.09); border-color: rgba(121,208,242,.42); }
.app-body .ui-team-editor .ui-team-permissions li:focus-visible { outline: 3px solid rgba(73,182,230,.35); outline-offset: 2px; }
.app-body .ui-team-editor .ui-team-permissions li[aria-checked="true"] { background: rgba(31,151,203,.16); border-color: rgba(104,207,244,.52); }
.app-body .ui-team-permission__copy { display: grid; min-width: 0; gap: 4px; }
.app-body .ui-team-permission__title { color: #fff; font-size: 11px; font-weight: 850; line-height: 1.2; }
.app-body .ui-team-permission__copy small { color: #aebfd0; font-size: 8.5px; font-weight: 500; line-height: 1.4; }
.app-body .ui-team-editor .ui-team-permission > .btn { flex: 0 0 auto; margin: 0 !important; }
.app-body .ui-team-editor__body { box-sizing: border-box; width: auto !important; min-width: 0; height: 100% !important; padding: 16px !important; overflow: auto; }
.app-body .ui-team-editor__form { display: block !important; width: auto !important; padding: 0 !important; background: transparent !important; }
.app-body .ui-team-editor__form > h2,
.app-body .ui-team-editor__intro { margin-left: 0 !important; }
.app-body .ui-team-editor__form > h2 {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #172f49;
	background: transparent !important;
	border: 0 !important;
	font-size: 17px;
	line-height: 1.25;
}
.app-body .ui-team-editor__intro { margin: 3px 0 12px; color: #6e8397; font-size: 9px; }
.app-body .ui-team-editor__fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100% !important; }
.app-body .ui-team-editor__fields > .item { box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 12px !important; background: #fff; border: 1px solid #dce5ee; border-radius: 11px; }
.app-body .ui-team-editor__fields > .ui-team-shop-access,
.app-body .ui-team-editor__fields > .controls { grid-column: 1 / -1; }
.app-body .ui-team-editor__fields #user-name,
.app-body .ui-team-editor__fields #user-email,
.app-body .ui-team-editor__fields .inputbox { box-sizing: border-box; width: 100% !important; min-height: 40px; margin: 6px 0 0 !important; }
.app-body .ui-team-shop-tools { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 7px; margin: 8px 0; }
.app-body .ui-team-shop-tools input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cbd9e6; border-radius: 8px; }
.app-body .ui-team-shop-tools button { height: 34px; padding: 0 10px; color: #126f9c; background: #e9f5fb; border: 0; border-radius: 8px; font-size: 8px; font-weight: 850; cursor: pointer; }
.app-body .ui-team-shop-tools output { color: #637b91; font-size: 8px; font-weight: 800; white-space: nowrap; }
.app-body .ui-team-editor #l_shops { box-sizing: border-box; width: 100% !important; min-height: 260px; padding: 5px !important; border: 1px solid #cbd9e6; border-radius: 9px; }
.app-body .ui-team-editor .controls {
	position: sticky;
	bottom: -16px;
	z-index: 4;
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	min-height: 54px;
	gap: 8px;
	margin: 0 -12px -12px !important;
	padding: 10px 12px !important;
	background: rgba(247, 250, 253, .96) !important;
	border-top: 1px solid #dce5ee;
	backdrop-filter: blur(8px);
}
.app-body .ui-team-editor__fields > .controls {
	box-sizing: border-box;
	width: 100% !important;
}
.app-body .ui-team-editor .controls .btn {
	display: inline-flex !important;
	float: none !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 98px;
	min-height: 38px;
	margin: 0 !important;
	padding: 9px 14px !important;
	border-radius: 9px !important;
	line-height: 1.1 !important;
	text-align: center;
}

/* Order history search. */
.app-body .ui-order-search { display: grid !important; gap: 12px; }
.app-body .ui-order-search__toolbar {
	display: grid;
	grid-template-columns: minmax(180px, .8fr) minmax(420px, 1.8fr) auto;
	align-items: end;
	gap: 14px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow);
}
.app-body .ui-order-search__toolbar small { color: #0875aa; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.app-body .ui-order-search__toolbar h2 { margin: 2px 0 0; color: #142a45; font-size: 15px; }
.app-body .ui-order-search__toolbar p { margin: 3px 0 0; color: #74869a; font-size: 8px; }
.app-body .ui-order-search__toolbar form { display: grid; grid-template-columns: 135px minmax(190px, 1fr) auto; align-items: end; gap: 8px; }
.app-body .ui-order-search__toolbar label { display: grid; gap: 4px; }
.app-body .ui-order-search__toolbar label > span { color: #536a80; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.app-body .ui-order-search__toolbar input,
.app-body .ui-order-search__toolbar select { box-sizing: border-box; width: 100%; height: 40px; padding: 0 10px; background: #f9fbfd; border: 1px solid #cbd9e6; border-radius: 9px; font-size: 10px; }
.app-body .ui-order-search__toolbar button { height: 40px; padding: 0 16px; color: #fff; background: var(--ui-brand); border: 0; border-radius: 9px; font-size: 9px; font-weight: 900; cursor: pointer; }
.app-body .ui-order-search__toolbar output { justify-self: end; padding: 8px 10px; color: #526a80; background: #eef5fa; border-radius: 999px; font-size: 8px; font-weight: 850; white-space: nowrap; }
.app-body .ui-order-search__toolbar.has-error input { border-color: #d44f5c; box-shadow: 0 0 0 3px rgba(196,55,68,.08); }
.app-body .ui-order-search__empty { display: grid !important; min-height: 240px; place-items: center; align-content: center; gap: 6px; text-align: center; background: #fff !important; border: 1px solid var(--ui-border); border-radius: 14px; }
.app-body .ui-order-search__empty > span { display: grid; width: 45px; height: 45px; place-items: center; color: #fff; background: var(--ui-brand); border-radius: 13px; font-size: 18px; }
.app-body .ui-order-search__empty h3 { margin: 4px 0 0; color: #172d48; font-size: 15px; }
.app-body .ui-order-search__empty p { max-width: 470px; margin: 0; color: #71859a; font-size: 9px; }
.app-body .ui-order-search__results { overflow-x: auto; }
.app-body .ui-order-search__results .tableheader,
.app-body .ui-order-search__results .tablecontent > .shop { min-width: 1180px; }

/* Internal publishing queue. */
.app-body .ui-menu-queue { display: grid; gap: 12px; }
.app-body .ui-menu-queue > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; color: #fff; background: linear-gradient(110deg, #15304f, #177695); border-radius: 14px; }
.app-body .ui-menu-queue > header small { color: #7ed4ef; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.app-body .ui-menu-queue > header h2 { margin: 2px 0 0; color: #fff; font-size: 16px; }
.app-body .ui-menu-queue > header p { margin: 3px 0 0; color: #d3e6ef; font-size: 8px; }
.app-body .ui-menu-queue > header > span { padding: 7px 9px; color: #d9eaf2; background: rgba(255,255,255,.1); border-radius: 999px; font-size: 7px; }
.app-body .ui-queue-panel { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ui-border); border-radius: 13px; box-shadow: var(--ui-shadow); }
.app-body .ui-queue-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid #e2e9f0; }
.app-body .ui-queue-panel > header h3 { margin: 0; color: #18314d; font-size: 12px; }
.app-body .ui-queue-panel > header output { color: #637b91; font-size: 8px; font-weight: 800; }
.app-body .ui-queue-table-scroll { max-width: 100%; overflow-x: auto; }
.app-body .ui-queue-panel table { width: 100%; margin: 0 !important; border: 0 !important; border-collapse: collapse; }
.app-body .ui-queue-panel th { padding: 9px 10px !important; color: #536a80 !important; background: #f4f7fa !important; border: 0 !important; border-bottom: 1px solid #dfe7ef !important; font-size: 7px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.app-body .ui-queue-panel td { padding: 10px !important; border: 0 !important; border-bottom: 1px solid #e8edf2 !important; font-size: 8px; vertical-align: top; }
.app-body .ui-queue-panel .is-empty-column { display: none; }
.app-body .ui-queue-summary-table tr:first-child { display: none; }
.app-body .ui-queue-summary-table tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 10px; }
.app-body .ui-queue-summary-table tr { display: flex; align-items: center; justify-content: space-between; padding: 11px; background: #f6f9fc; border: 1px solid #dce6ef; border-radius: 10px; }
.app-body .ui-queue-summary-table td { padding: 0 !important; border: 0 !important; font-weight: 850; }
.app-body .ui-queue-table { min-width: 980px; table-layout: auto; }
.app-body .ui-queue-table td:last-child,
.app-body .ui-queue-table td:nth-last-child(2) { min-width: 190px; max-width: 320px; overflow-wrap: anywhere; color: #566d83; }

/* Log events use a primary identity line and a full-width diagnostic line. */
.app-body .ui-log-results-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px; color: #62798e; font-size: 11px; }
.app-body .ui-log-results-meta strong { color: #173651; font-size: 13px; }
.app-body .ui-log-results-meta__context { display: flex; align-items: center; justify-content: flex-end; min-width: 0; gap: 7px; }
.app-body .ui-log-results-meta__date { flex: 0 0 auto; padding: 6px 9px; color: #075f8d; background: #dff2fb; border-radius: 7px; font-weight: 800; white-space: nowrap; }
.app-body .ui-log-results-meta__query { max-width: 70%; padding: 6px 9px; overflow: hidden; color: #24516d; background: #eaf5fb; border-radius: 7px; font-family: Consolas, 'Courier New', monospace; text-overflow: ellipsis; white-space: nowrap; }
.app-body .ui-log-viewer { box-sizing: border-box; width: 100% !important; max-width: 100%; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.app-body .ui-log-viewer .tableheader { display: none !important; }
.app-body .ui-log-viewer .tablecontent { display: grid; min-width: 0 !important; gap: 10px; background: transparent; }
.app-body .ui-log-viewer .tablecontent > .shop {
	display: grid !important;
	grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d8e3ec;
	border-radius: 12px;
	box-shadow: 0 4px 13px rgba(27, 52, 77, .055);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.app-body .ui-log-viewer .tablecontent > .shop:hover { border-color: #99c9de; box-shadow: 0 8px 20px rgba(27, 52, 77, .09); transform: translateY(-1px); }
body.app-body .ui-data-table.ui-grid-ready.ui-log-viewer .ui-data-row > .menuitem {
	display: grid !important;
	align-content: start;
	align-items: start;
	justify-content: stretch;
	gap: 5px;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	min-height: 62px;
	padding: 12px 13px !important;
	overflow: hidden !important;
	color: #1d3852;
	background: #fff !important;
	border: 0 !important;
	border-right: 1px solid #e7edf3 !important;
	font-size: 13px !important;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: normal !important;
}
.app-body .ui-log-viewer .menuitem::before { color: #71869a; content: attr(data-label); font-family: Poppins, system-ui, sans-serif; font-size: 8px; font-weight: 850; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
.app-body .ui-log-viewer .menuitem.is-empty { color: #a7b5c2; }
.app-body .ui-log-viewer .ui-log-time { grid-column: span 2; color: #0874aa; font-size: 13px !important; font-weight: 850; }
.app-body .ui-log-viewer .ui-log-source { grid-column: span 3; }
.app-body .ui-log-viewer .ui-log-event { grid-column: span 3; color: #17314e; font-weight: 800; }
.app-body .ui-log-viewer .ui-log-licence { grid-column: span 2; font-weight: 850; }
.app-body .ui-log-viewer .ui-log-postcode { grid-column: span 2; }
.app-body .ui-log-viewer .ui-log-order { grid-column: span 4; border-right: 0 !important; color: #153653; font-family: Consolas, 'Courier New', monospace; font-size: 11.5px !important; white-space: nowrap; }
.app-body .ui-log-viewer .ui-log-ip,
.app-body .ui-log-viewer .ui-log-script,
.app-body .ui-log-viewer .ui-log-info { min-height: 66px; background: #f6f9fc !important; border-top: 1px solid #e1e9f0 !important; font-family: Consolas, 'Courier New', monospace; font-size: 11px !important; line-height: 1.5; }
.app-body .ui-log-viewer .ui-log-ip { grid-column: 1 / span 5; }
.app-body .ui-log-viewer .ui-log-script { grid-column: 6 / span 4; color: #0c6f9c; }
.app-body .ui-log-viewer .ui-log-info { grid-column: 10 / span 7; color: #536b80; border-right: 0 !important; }
.app-body .ui-log-viewer .ui-log-source strong { color: #17314e; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.app-body .ui-log-viewer .ui-log-source small { color: #70849a; font-size: 9px; line-height: 1.2; text-transform: capitalize; }

@media (max-width: 900px) {
	.app-body .ui-shop-orders-range { flex-wrap: wrap; }
	.app-body .ui-shop-orders-range > small { flex-basis: 100%; margin-left: 0; }
	.app-body .ui-team-editor { grid-template-columns: 1fr; max-height: none; border-radius: 0; }
	.app-body .ui-team-editor .ui-team-permissions { height: auto !important; }
	.app-body .ui-team-editor__fields { grid-template-columns: 1fr; }
	.app-body .ui-team-editor__fields > .item { grid-column: 1; }
	.app-body .ui-team-shop-tools { grid-template-columns: 1fr 1fr; }
	.app-body .ui-team-shop-tools label,
	.app-body .ui-team-shop-tools output { grid-column: 1 / -1; }
	.app-body .ui-order-search__toolbar { grid-template-columns: 1fr; align-items: stretch; }
	.app-body .ui-order-search__toolbar form { grid-template-columns: 1fr; }
	.app-body .ui-order-search__toolbar output { justify-self: start; }
	.app-body .ui-queue-summary-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.app-body #shop_image_upload .ui-image-current { grid-template-columns: 74px minmax(0, 1fr); }
	.app-body #shop_image_upload .ui-image-current > img { width: 74px; height: 60px; }
	.app-body .ui-queue-summary-table tbody { grid-template-columns: 1fr; }
}

/* Promo grids use one shared column definition so headers and values align. */
.app-body .ui-promo-codes .tableheader,
.app-body .ui-promo-codes .tablecontent > .item-promo-code {
	grid-template-columns: minmax(80px, .8fr) minmax(102px, 1fr) minmax(102px, 1fr) minmax(78px, .75fr) minmax(70px, .7fr) minmax(52px, .5fr) minmax(84px, .8fr) minmax(78px, .75fr) 58px !important;
}
.app-body .ui-promo-codes .tableheader > .menuitem,
.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem,
.app-body #promocodes > .shops.promo .tableheader > .menuitem,
.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem {
	display: flex !important;
	align-items: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}
.app-body .ui-promo-codes .tableheader > .menuitem:last-child,
.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:last-child,
.app-body #promocodes > .shops.promo .tableheader > .menuitem:last-child,
.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem:last-child {
	display: grid !important;
	place-items: center;
	padding-inline: 5px !important;
	text-align: center;
}
.app-body .ui-promo-codes .menuitem:last-child img,
.app-body .shops.promo .lastmi img {
	width: 30px !important;
	height: 30px !important;
	padding: 8px !important;
}

.app-body .ui-promo-date-range {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px !important;
	padding: 10px;
	background: #f5f9fc;
	border: 1px solid #dce6ef;
	border-radius: 9px;
}
.app-body .ui-promo-date-range > header {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #dfe8f0;
}
.app-body .ui-promo-date-range > header img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(38%) sepia(31%) saturate(1113%) hue-rotate(153deg); }
.app-body .ui-promo-date-range > header span { display: grid; gap: 1px; }
.app-body .ui-promo-date-range > header strong { color: #1a314c; font-size: 9px; }
.app-body .ui-promo-date-range > header small { color: #6d8094; font-size: 7px; }
.app-body .ui-promo-editor .ui-promo-date-range > .option {
	display: grid;
	grid-template-columns: 68px minmax(96px, 1fr) 86px;
	gap: 6px;
	min-width: 0;
	margin: 0;
}
.app-body .ui-promo-editor .ui-promo-date-range > .option > .title {
	grid-column: 1 / -1;
	margin: 0;
	color: #51687e;
	font-size: 8px;
	font-weight: 900;
	text-transform: uppercase;
}
.app-body .ui-promo-editor .ui-promo-date-range select {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 28px 0 10px !important;
	font-size: 10px !important;
	line-height: 40px !important;
}

.app-body .ui-promo-editor #promodiscount > .item > .option {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	align-items: center;
	gap: 6px 8px;
}
.app-body .ui-promo-editor .ui-promo-value {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr) 96px;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	margin: 1px 0 5px !important;
	padding: 8px 9px;
	background: #f5f9fc;
	border: 1px solid #e0e8f0;
	border-radius: 8px;
}
.app-body .ui-promo-editor .ui-promo-value > .title { margin: 0 !important; color: #51687e; font-size: 8px; line-height: 1.35; }
.app-body .ui-promo-editor .ui-promo-value > .inputbox {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 96px !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #cad8e5 !important;
	border-radius: 8px !important;
}
.app-body .ui-promo-editor .ui-promo-value > .inputbox::after {
	position: absolute;
	top: 50%;
	right: 10px;
	color: #6b8094;
	font-size: 10px;
	font-weight: 800;
	transform: translateY(-50%);
}
.app-body .ui-promo-editor .ui-promo-value--percent > .inputbox::after { content: '%'; }
.app-body .ui-promo-editor .ui-promo-value--fixed > .inputbox::after { content: '\00a3'; }
.app-body .ui-promo-editor .ui-promo-value input {
	box-sizing: border-box;
	width: 100% !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 28px 0 10px !important;
	background: transparent !important;
	border: 0 !important;
	text-align: right;
}

body.app-body .ui-shop-orders .ui-order-discount {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: center;
	gap: 3px;
	line-height: 1.1;
}
body.app-body .ui-shop-orders .ui-order-discount:not(.has-promo) {
	flex-direction: row;
	align-items: center !important;
}
body.app-body .ui-shop-orders .ui-order-discount__amount { white-space: nowrap; }
body.app-body .ui-shop-orders .ui-order-promo-code {
	display: inline-flex;
	max-width: 100%;
	padding: 3px 6px;
	overflow: hidden;
	color: #7b3d0c;
	background: #fff2d9;
	border: 1px solid #f1d4a2;
	border-radius: 999px;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .03em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.app-body .ui-promo-date-range { grid-template-columns: 1fr; }
	.app-body .ui-promo-date-range > header { grid-column: 1; }
}

@media (max-width: 680px) {
	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem,
	.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem { display: block !important; }
	.app-body .ui-promo-codes .tablecontent > .item-promo-code > .menuitem:last-child,
	.app-body #promocodes > .shops.promo .tablecontent > .shop > .menuitem:last-child { display: grid !important; }
	.app-body .ui-promo-editor .ui-promo-date-range > .option { grid-template-columns: 68px minmax(100px, 1fr) 82px; }
	.app-body .ui-promo-editor .ui-promo-value { grid-template-columns: minmax(0, 1fr) 88px; }
	.app-body .ui-promo-editor .ui-promo-value > .inputbox { width: 88px !important; }
}

/* Final visibility guard: upgraded searches and tab panels must outrank the
   original screen-specific display declarations. */
html body.app-body .ui-data-row.is-ui-filtered,
html body.app-body .ui-promo-editor .is-ui-filtered,
html body.app-body .ui-domain-editor .is-ui-filtered,
html body.app-body .is-ui-filtered[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Final workspace refinements: dense data, clear actions and mobile access
   ------------------------------------------------------------------------- */

/* The no-orders state is a useful starting screen, not a poster. */
.app-body .dashboard.welcome.ui-dashboard-welcome {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	padding: 18px !important;
	background: linear-gradient(125deg, #fff 0%, #f5fafe 58%, #e4f4fb 100%) !important;
	border: 1px solid var(--ui-border);
	border-radius: 18px;
	box-shadow: var(--ui-shadow);
}
.app-body .dashboard.welcome.ui-dashboard-welcome > .inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
	align-items: center;
	gap: 28px;
	box-sizing: border-box;
	width: min(1040px, 100%) !important;
	min-height: 470px;
	margin: 0 auto !important;
	padding: 30px !important;
}
.app-body .ui-dashboard-welcome .left,
.app-body .ui-dashboard-welcome .right { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
.app-body .ui-dashboard-welcome .left { display: grid; justify-items: start; gap: 12px; }
.app-body .ui-dashboard-welcome__eyebrow { color: #0874aa; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.app-body .ui-dashboard-welcome h1 { max-width: 560px; margin: 0; color: #132c49; font-size: clamp(30px, 4vw, 52px); line-height: 1.03; }
.app-body .ui-dashboard-welcome .left > p { max-width: 560px; margin: 0; color: #5f7489; font-size: 13px; line-height: 1.6; }
.app-body .ui-dashboard-welcome__status { display: grid; grid-template-columns: 11px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; padding: 11px 13px; background: rgba(255,255,255,.74); border: 1px solid #d8e7ef; border-radius: 11px; }
.app-body .ui-dashboard-welcome__status > span { width: 9px; height: 9px; background: #18a76e; border: 3px solid #d5f5e8; border-radius: 50%; }
.app-body .ui-dashboard-welcome__status strong,
.app-body .ui-dashboard-welcome__status small { display: block; }
.app-body .ui-dashboard-welcome__status strong { color: #17334f; font-size: 10px; }
.app-body .ui-dashboard-welcome__status small { margin-top: 2px; color: #71859a; font-size: 8px; }
.app-body .ui-dashboard-welcome__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.app-body .ui-dashboard-welcome__actions button { min-height: 40px; margin: 0 !important; padding: 0 15px !important; color: #176b92; background: #fff; border: 1px solid #c7dce8; border-radius: 9px; font-size: 9px; font-weight: 900; cursor: pointer; }
.app-body .ui-dashboard-welcome__actions .ui-primary-action { color: #fff; background: var(--ui-brand); border-color: var(--ui-brand); }
.app-body .ui-dashboard-welcome .right { display: grid; place-items: center; }
.app-body .ui-dashboard-welcome .right img { display: block; width: min(360px, 100%); max-height: 360px; object-fit: contain; }

/* Dashboard: answer the four questions operators ask first. */
.app-body .ui-dashboard-snapshot { margin: 0 0 14px; padding: 16px; background: #fff; border: 1px solid var(--ui-border); border-radius: 15px; box-shadow: var(--ui-shadow-sm); }
.app-body .ui-dashboard-snapshot > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.app-body .ui-dashboard-snapshot > header small { color: #0874aa; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.app-body .ui-dashboard-snapshot > header h2 { margin: 2px 0 0; color: #172f4d; font-size: 17px; }
.app-body .ui-dashboard-snapshot > header p { margin: 0; color: #637a91; font-size: 9px; font-weight: 800; }
.app-body .ui-dashboard-snapshot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.app-body .ui-dashboard-snapshot article { padding: 12px 13px; background: #f4f8fb; border: 1px solid #dce6ee; border-radius: 11px; }
.app-body .ui-dashboard-snapshot article > span,
.app-body .ui-dashboard-snapshot article > strong,
.app-body .ui-dashboard-snapshot article > small { display: block; }
.app-body .ui-dashboard-snapshot article > span { color: #536b81; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.app-body .ui-dashboard-snapshot article > strong { margin-top: 4px; color: #132e4a; font-size: 22px; line-height: 1.1; }
.app-body .ui-dashboard-snapshot article > small { margin-top: 3px; color: #7a8da0; font-size: 8px; }

/* Store locator: the guide stays visible and shops wrap into usable cards. */
.app-body .ui-locator-guide { grid-template-columns: minmax(280px, 1fr) minmax(310px, .9fr) !important; padding: 15px 17px !important; }
.app-body .ui-locator-guide__reference { padding: 10px 12px; background: rgba(255,255,255,.82); border: 1px solid #d5e4ed; border-radius: 10px; }
.app-body .ui-locator-guide__reference h3 { margin: 0; color: #172f4c; font-size: 10px; }
.app-body .ui-locator-guide__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 7px; }
.app-body .ui-store-locator > .stores > .inner { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; }
.app-body .ui-store-locator .teaser.store { min-height: 190px; }
.app-body .ui-store-locator .postcode { max-height: 112px; overflow: auto; }
.app-body .ui-store-card__edit { margin-left: auto; padding: 5px 7px; color: #0875aa; background: transparent; border: 0; border-radius: 6px; font-size: 8px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.app-body .ui-store-card__edit:hover,
.app-body .ui-store-card__edit:focus-visible { background: #e6f4fb; outline: none; }

/* Customer-account export is deliberately small and explicit. */
.app-body .ui-uac-export { display: grid !important; min-height: 430px; padding: 18px !important; place-items: start center; background: transparent !important; }
.app-body .ui-uac-export > .overlay { position: static !important; display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; background: transparent !important; }
.app-body .ui-uac-export__card { box-sizing: border-box; width: min(720px, 100%) !important; margin: 0 auto !important; overflow: hidden; background: #fff !important; border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow); }
.app-body .ui-uac-export__card > h2 { margin: 0 !important; padding: 17px 20px !important; color: #fff !important; background: linear-gradient(110deg, #173452, #16759a) !important; font-size: 17px !important; text-align: left !important; }
.app-body .ui-uac-export__card > .inner { box-sizing: border-box; width: 100% !important; min-height: 0 !important; padding: 24px !important; text-align: left !important; }
.app-body .ui-uac-export__card h3 { margin: 0 0 6px !important; color: #172e49; font-size: 20px !important; }
.app-body .ui-uac-export__card .desc { display: block; max-width: 540px; color: #546c82; font-size: 10px; line-height: 1.55; }
.app-body .ui-uac-export__card .desc small { display: block; margin-top: 3px; color: #7c8fa2; font-size: 8px; }
.app-body .ui-uac-export__notice { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin: 18px 0 0; padding: 12px; color: #36536e; background: #edf7fc; border: 1px solid #cde5f1; border-radius: 10px; }
.app-body .ui-uac-export__notice > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: #238fbd; border-radius: 8px; font-weight: 900; }
.app-body .ui-uac-export__notice p { margin: 0; font-size: 9px; }
.app-body .ui-uac-export__notice strong { display: block; color: #173650; }
.app-body .ui-uac-export__card .item { width: 100% !important; margin: 0 !important; padding: 18px 0 0 !important; }
.app-body .ui-uac-export__card .controls { display: flex !important; justify-content: flex-end; gap: 8px; width: 100% !important; }

/* Shop report uses the same compact form language as other workspaces. */
.app-body .content:has(.ui-shop-report) { padding: 18px !important; background: transparent !important; }
.app-body .content:has(.ui-shop-report) > .overlay { position: static !important; display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; background: transparent !important; }
.app-body .ui-shop-report { box-sizing: border-box; width: min(780px, 100%) !important; margin: 0 auto !important; overflow: hidden; background: #fff !important; border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow); }
.app-body .ui-shop-report > h2 { margin: 0 !important; padding: 17px 20px !important; color: #fff !important; background: linear-gradient(110deg, #163451, #16759a) !important; font-size: 17px !important; text-align: left !important; }
.app-body .ui-shop-report > .inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; box-sizing: border-box; width: 100% !important; min-height: 0 !important; padding: 20px !important; }
.app-body .ui-shop-report > .inner > h3,
.app-body .ui-shop-report__intro,
.app-body .ui-shop-report__actions { grid-column: 1 / -1; }
.app-body .ui-shop-report > .inner > h3 { margin: 0 !important; color: #172f4b; font-size: 18px !important; }
.app-body .ui-shop-report__intro { margin: -7px 0 4px; color: #697f94; font-size: 9px; }
.app-body .ui-shop-report__field { display: grid; gap: 5px; box-sizing: border-box; width: auto !important; margin: 0 !important; padding: 12px !important; background: #f7fafc; border: 1px solid #dce6ee; border-radius: 10px; }
.app-body .ui-shop-report__field .title { color: #496176; font-size: 8px; font-weight: 900; }
.app-body .ui-shop-report__field .selectbox { width: 100% !important; }
.app-body .ui-shop-report__field input,
.app-body .ui-shop-report__field select { box-sizing: border-box; width: 100% !important; min-height: 40px; margin: 0 !important; padding: 0 10px; color: #19334e; background: #fff !important; border: 1px solid #cbd9e5; border-radius: 8px; }
.app-body .ui-shop-report__actions { padding: 4px 0 0 !important; }
.app-body .ui-shop-report__actions .controls { display: flex !important; justify-content: flex-end; gap: 8px; }

/* LetsInsight owns its header; it does not need the generic page header too. */
.app-body .ui-letsinsight { box-sizing: border-box; width: 100%; padding: 0 !important; }
.app-body .ui-letsinsight .li-topbar { margin: 0 0 12px; padding: 17px 19px; background: linear-gradient(125deg, #fff, #edf8fd); border: 1px solid var(--ui-border); border-radius: 15px; box-shadow: var(--ui-shadow-sm); }
.app-body .ui-letsinsight__eyebrow { display: block; margin-bottom: 4px; color: #0874aa; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.app-body .ui-letsinsight .li-title { color: #142f4b; font-size: 22px; }
.app-body .ui-letsinsight__scope { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 13px; color: #294c65; background: #eaf6fb; border: 1px solid #cce5f0; border-radius: 10px; }
.app-body .ui-letsinsight__scope > span { width: 8px; height: 8px; color: transparent; background: #1f94bf; border-radius: 50%; }
.app-body .ui-letsinsight__scope strong { display: block; font-size: 10px; }
.app-body .ui-letsinsight__scope p { margin: 2px 0 0; color: #637b90; font-size: 8px; }
.app-body .ui-letsinsight__scope--detail { background: #f4f8fb; border-color: #dbe5ed; }
.app-body .ui-letsinsight > .li-empty { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 0; padding: 18px; }
.app-body .ui-letsinsight > .li-empty > span { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: #218fbb; border-radius: 11px; font-size: 18px; }
.app-body .ui-letsinsight > .li-empty strong { color: #18334f; }
.app-body .ui-letsinsight > .li-empty p { margin: 3px 0 0; color: #6a7f94; font-size: 9px; }

/* System log lookup is available on the empty screen and above results. */
.app-body .ui-log-search { display: grid !important; gap: 12px; }
.app-body .ui-log-search-form { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(360px, 1.2fr) auto; align-items: end; gap: 14px; padding: 17px; background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-sm); }
.app-body .ui-log-search-form small { color: #0874aa; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.app-body .ui-log-search-form h2 { margin: 3px 0 0; color: #17314d; font-size: 18px; }
.app-body .ui-log-search-form p { margin: 4px 0 0; color: #71869a; font-size: 10px; }
.app-body .ui-log-search-form label { display: grid; gap: 4px; }
.app-body .ui-log-search-form label span { color: #50687e; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.app-body .ui-log-search-form input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 13px; color: #173651; background: #f9fbfd; border: 1px solid #cbd9e5; border-radius: 9px; font-size: 13px; }
.app-body .ui-log-search-form button { height: 44px; padding: 0 20px; color: #fff; background: var(--ui-brand); border: 0; border-radius: 9px; font-size: 11px; font-weight: 900; cursor: pointer; }

/* Historical orders: a readable card row instead of a fourteen-column squeeze. */
.app-body .ui-order-search__summary { box-sizing: border-box; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.app-body .ui-order-search__summary .tableheader { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-width: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.app-body .ui-order-search__summary .tableheader > .menuitem { display: grid !important; align-content: center; box-sizing: border-box; width: auto !important; min-width: 0 !important; min-height: 76px; padding: 12px !important; color: #16314d; background: #fff; border: 1px solid var(--ui-border); border-radius: 11px; font-size: 18px !important; font-weight: 900; overflow: hidden; }
.app-body .ui-order-search__summary .tableheader > .menuitem::after { margin-top: 5px; color: #667d92; content: attr(data-label); font-size: 7px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.app-body .ui-order-search__summary .tablefooter { display: none !important; }
.app-body .ui-order-search__results { overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.app-body .ui-order-search__results > .tableheader { display: none !important; }
.app-body .ui-order-search__results > .tablecontent { display: grid !important; gap: 8px; }
.app-body .ui-order-search__results .ui-order-search-card {
	display: grid !important;
	grid-template-columns: 82px 68px minmax(145px, 1fr) minmax(92px, .68fr) minmax(185px, 1.15fr) 105px 205px 40px !important;
	grid-template-rows: minmax(82px, auto) !important;
	gap: 6px;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 96px !important;
	padding: 7px !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: var(--ui-shadow-sm);
	cursor: pointer;
}
.app-body .ui-order-search-card:focus-visible,
.app-body .ui-order-search-card:hover { border-color: #8ec9e4; outline: none; box-shadow: 0 8px 18px rgba(25,67,99,.1); }
.app-body .ui-order-search-card > .menuitem {
	position: static;
	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 9px 10px !important;
	overflow: hidden;
	background: #f8fbfd;
	border: 1px solid #e1ebf2 !important;
	border-radius: 9px;
	font-size: 9px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-body .ui-order-search-card > .menuitem::before,
.app-body .ui-order-search-card > section > small {
	position: static;
	display: block;
	margin: 0 0 5px;
	color: #6d8195;
	content: attr(data-label);
	font-size: 6px;
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1.1;
	text-transform: uppercase;
}
body.app-body .ui-order-search__results .ui-order-search-card > .menuitem:first-child { display: none !important; }
.app-body .ui-search-order-date { grid-column: 1; grid-row: 1; color: #173651; font-weight: 850; }
.app-body .ui-search-order-shop { grid-column: 2; grid-row: 1; align-items: center !important; color: #fff; background: #142d48 !important; font-size: 10px !important; font-weight: 900; text-align: center; }
.app-body .ui-search-order-number { grid-column: 3; grid-row: 1; color: #173651; font-family: Consolas, monospace; font-size: 9px !important; font-weight: 800; overflow-wrap: anywhere; white-space: normal; }
.app-body .ui-search-order-customer { grid-column: 4; grid-row: 1; color: #173651; font-weight: 800; white-space: normal; }
.app-body .ui-search-order-action { grid-column: 8; grid-row: 1; align-items: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.app-body .ui-search-order-action img { width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border-radius: 9px; }
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-payment,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-device,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-channel,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-promo,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-points,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-subtotal,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-discount,
body.app-body section#maincontent .ui-order-search__results .ui-order-search-card > .ui-search-order-total { display: none !important; }
.app-body .ui-search-order-route,
.app-body .ui-search-order-extras,
.app-body .ui-search-order-money {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: 9px 10px;
	background: #f8fbfd;
	border: 1px solid #e1ebf2;
	border-radius: 9px;
}
.app-body .ui-search-order-route { grid-column: 5; grid-row: 1; }
.app-body .ui-search-order-route > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.app-body .ui-search-order-route__item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 6px; color: #21425f; background: #eaf4f9; border-radius: 7px; font-size: 7px; font-weight: 800; line-height: 1; }
.app-body .ui-search-order-route__item img { width: 15px !important; height: 15px !important; margin: 0 !important; object-fit: contain; filter: none !important; }
.app-body .ui-search-order-route__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .ui-search-order-extras { grid-column: 6; grid-row: 1; }
.app-body .ui-search-order-money { grid-column: 7; grid-row: 1; }
.app-body .ui-search-order-extras dl,
.app-body .ui-search-order-money dl { display: grid; gap: 5px; margin: 0; }
.app-body .ui-search-order-money dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.app-body .ui-search-order-extras dl > div,
.app-body .ui-search-order-money dl > div { min-width: 0; }
.app-body .ui-search-order-extras dt,
.app-body .ui-search-order-money dt { color: #71869a; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.app-body .ui-search-order-extras dd,
.app-body .ui-search-order-money dd { margin: 2px 0 0; color: #173651; font-size: 8px; font-weight: 850; overflow-wrap: anywhere; }
.app-body .ui-search-order-money .is-total { padding-left: 5px; border-left: 2px solid #29a0d5; }
.app-body .ui-search-order-money .is-total dd { color: #0874aa; font-size: 11px; }

/* On phones the whole order row is the target and date/time has one clean block. */
.app-body .ui-mobile-order-row { cursor: pointer; }
@media (max-width: 900px) {
	.app-body .dashboard.welcome.ui-dashboard-welcome > .inner { grid-template-columns: 1fr; min-height: 0; padding: 18px !important; }
	.app-body .ui-dashboard-welcome .right { order: -1; }
	.app-body .ui-dashboard-welcome .right img { max-height: 210px; }
	.app-body .ui-dashboard-snapshot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-locator-guide { grid-template-columns: 1fr !important; }
	.app-body .ui-locator-guide__rules { grid-template-columns: 1fr 1fr; }
	.app-body .ui-shop-report > .inner { grid-template-columns: 1fr; }
	.app-body .ui-shop-report__field { grid-column: 1; }
	.app-body .ui-log-search-form { grid-template-columns: 1fr; }
	.app-body .ui-log-results-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
	.app-body .ui-log-results-meta__context { box-sizing: border-box; align-items: flex-start; flex-direction: column; width: 100%; }
	.app-body .ui-log-results-meta__date { box-sizing: border-box; width: 100%; }
	.app-body .ui-log-results-meta__query { box-sizing: border-box; width: 100%; max-width: 100%; }
	.app-body .ui-log-viewer .tablecontent > .shop { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body.app-body .ui-data-table.ui-grid-ready.ui-log-viewer .ui-data-row > .menuitem { grid-column: auto !important; min-height: 58px; border-right: 0 !important; border-bottom: 1px solid #e7edf3 !important; }
	.app-body .ui-log-viewer .ui-log-event,
	.app-body .ui-log-viewer .ui-log-order,
	.app-body .ui-log-viewer .ui-log-ip,
	.app-body .ui-log-viewer .ui-log-script,
	.app-body .ui-log-viewer .ui-log-info { grid-column: 1 / -1 !important; }
	.app-body .ui-log-viewer .ui-log-order { border-right: 0 !important; }
	.app-body .ui-log-viewer .ui-log-ip,
	.app-body .ui-log-viewer .ui-log-script,
	.app-body .ui-log-viewer .ui-log-info { min-height: 0; border-top: 0; }
	.app-body .ui-order-search__summary .tableheader { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.app-body .ui-order-search__results .ui-order-search-card {
		grid-template-columns: 82px 68px minmax(155px, 1fr) minmax(110px, .8fr) 40px !important;
		grid-template-rows: auto auto !important;
		min-width: 0 !important;
	}
	.app-body .ui-search-order-date { grid-column: 1; grid-row: 1; }
	.app-body .ui-search-order-shop { grid-column: 2; grid-row: 1; }
	.app-body .ui-search-order-number { grid-column: 3; grid-row: 1; }
	.app-body .ui-search-order-customer { grid-column: 4; grid-row: 1; }
	.app-body .ui-search-order-action { grid-column: 5; grid-row: 1; }
	.app-body .ui-search-order-route { grid-column: 1 / 3; grid-row: 2; }
	.app-body .ui-search-order-extras { grid-column: 3; grid-row: 2; }
	.app-body .ui-search-order-money { grid-column: 4 / 6; grid-row: 2; }
	.app-body .ui-order-search__results { overflow: visible !important; padding-bottom: 0; }
}

@media (max-width: 520px) {
	.app-body .dashboard.welcome.ui-dashboard-welcome { padding: 8px !important; border-radius: 12px; }
	.app-body .dashboard.welcome.ui-dashboard-welcome > .inner { gap: 15px; padding: 12px !important; }
	.app-body .ui-dashboard-welcome h1 { font-size: 29px; }
	.app-body .ui-dashboard-welcome__actions { display: grid; width: 100%; }
	.app-body .ui-dashboard-welcome__actions button { width: 100%; }
	.app-body .ui-dashboard-snapshot > header { align-items: start; flex-direction: column; gap: 5px; }
	.app-body .ui-dashboard-snapshot__grid { grid-template-columns: 1fr 1fr; }
	.app-body .ui-dashboard-snapshot article > strong { font-size: 18px; }
	.app-body .ui-log-search-form { padding: 13px; }
	.app-body .ui-log-viewer .tablecontent > .shop { grid-template-columns: 1fr !important; }
	body.app-body .ui-data-table.ui-grid-ready.ui-log-viewer .ui-data-row > .menuitem { grid-column: 1 !important; border-right: 0 !important; }
	.app-body .ui-locator-guide__rules { grid-template-columns: 1fr; }
	.app-body .ui-store-locator > .stores > .inner { grid-template-columns: 1fr !important; }
	.app-body .ui-order-search__summary .tableheader { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-order-search__results { overflow: visible !important; padding-bottom: 0; }
	.app-body .ui-order-search__results .ui-order-search-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px !important;
		grid-template-rows: repeat(6, auto) !important;
		min-width: 0 !important;
		padding: 4px !important;
	}
	.app-body .ui-search-order-date { grid-column: 1; grid-row: 1; }
	.app-body .ui-search-order-shop { grid-column: 2; grid-row: 1; }
	.app-body .ui-search-order-action { grid-column: 3; grid-row: 1; }
	.app-body .ui-search-order-number { grid-column: 1 / 4; grid-row: 2; }
	.app-body .ui-search-order-customer { grid-column: 1 / 4; grid-row: 3; }
	.app-body .ui-search-order-route { grid-column: 1 / 4; grid-row: 4; }
	.app-body .ui-search-order-extras { grid-column: 1 / 4; grid-row: 5; }
	.app-body .ui-search-order-money { grid-column: 1 / 4; grid-row: 6; }
	body.app-body .ui-shop-orders .ui-order-when { grid-column: 1 / -1 !important; display: flex !important; align-items: center; justify-content: flex-start; gap: 7px; padding: 9px 11px !important; background: #edf7fc; border-bottom: 1px solid #d8e8f0 !important; }
	body.app-body .ui-shop-orders .ui-order-when::before { position: static !important; width: auto !important; content: 'When' !important; }
	body.app-body .ui-shop-orders .ui-order-when .ui-order-date,
	body.app-body .ui-shop-orders .ui-order-when .ui-order-time { font-size: 9px; line-height: 1.2; white-space: nowrap; }
	body.app-body .ui-shop-orders .ui-order-when .ui-order-date { order: 1; }
	body.app-body .ui-shop-orders .ui-order-when .ui-order-time { order: 2; }
	body.app-body .ui-shop-orders .ui-mobile-order-row { padding-top: 0 !important; overflow: hidden; }
	body.app-body .ui-shop-orders .ui-mobile-order-row .ui-order-later-marker {
		left: auto;
		right: -1px;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}
	body.app-body .ui-shop-orders .ui-mobile-order-row .ui-order-later-marker::before {
		left: auto;
		right: 4px;
	}
}

/* -------------------------------------------------------------------------
   Push credentials: operational summaries and focused, safe editors
   ------------------------------------------------------------------------- */

.app-body .ui-credential-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 14px;
	padding: 16px 18px;
	background: linear-gradient(120deg, #fff 0%, #f4fafe 66%, #e9f6fb 100%);
	border: 1px solid var(--ui-border);
	border-radius: 15px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-credential-overview small {
	color: #0874aa;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.app-body .ui-credential-overview h2 { margin: 3px 0 2px; color: #162f4b; font-size: 18px; }
.app-body .ui-credential-overview p { margin: 0; color: #61788e; font-size: 9px; line-height: 1.45; }
.app-body .ui-credential-overview dl {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(96px, 1fr);
	gap: 8px;
	margin: 0;
}
.app-body .ui-credential-overview dl > div {
	min-width: 88px;
	padding: 9px 11px;
	background: rgba(255,255,255,.84);
	border: 1px solid #d8e6ee;
	border-radius: 10px;
}
.app-body .ui-credential-overview dt { color: #647b90; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.app-body .ui-credential-overview dd { margin: 2px 0 0; color: #17324e; font-size: 17px; font-weight: 900; }

.app-body .ui-credential-workspace > .contentheader {
	display: flex !important;
	justify-content: flex-end;
	min-height: 0 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}
.app-body .ui-credential-workspace > .contentheader .add {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	width: auto !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 13px !important;
	background: #e8f7ef !important;
	border: 1px solid #ccebdc;
	border-radius: 10px;
	cursor: pointer;
}
.app-body .ui-credential-workspace > .contentheader .add img { display: none !important; }
.app-body .ui-credential-workspace > .contentheader .add::before { content: '+'; color: #fff; background: #21a46e; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; font-size: 15px; font-weight: 900; line-height: 1; }
.app-body .ui-credential-add-label { color: #176a4e; font-size: 8px; font-weight: 900; white-space: nowrap; }
.app-body .ui-credential-workspace > .contentheader .add:hover,
.app-body .ui-credential-workspace > .contentheader .add:focus-visible { background: #d7f3e4 !important; outline: 2px solid #2e98c6; outline-offset: 2px; }

.app-body .ui-credential-list {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-credential-list > .tableheader,
.app-body .ui-credential-list > .tablecontent > .shop {
	display: grid !important;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
}
.app-body .ui-credential-list--apple > .tableheader,
.app-body .ui-credential-list--apple > .tablecontent > .applecert {
	grid-template-columns: 76px 94px 94px minmax(150px, 250px) 96px minmax(150px, 190px) minmax(130px, 1fr) minmax(150px, 190px) 54px !important;
}
.app-body .ui-credential-list--apple > .tablecontent > .applecert > .menuitem:nth-child(4),
.app-body .ui-credential-list--apple > .tablecontent > .applecert > .menuitem:nth-child(6),
.app-body .ui-credential-list--apple > .tablecontent > .applecert > .menuitem:nth-child(7) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-body .ui-credential-list--android > .tableheader,
.app-body .ui-credential-list--android > .tablecontent > .singleshop {
	grid-template-columns: minmax(190px, 1fr) minmax(200px, 1fr) 62px !important;
}
.app-body .ui-credential-list > .tableheader {
	min-height: 44px;
	padding: 0 8px !important;
	background: #f1f6fa !important;
	border-bottom: 1px solid #d7e3ec;
}
.app-body .ui-credential-list > .tablecontent { width: 100% !important; }
.app-body .ui-credential-list > .tablecontent > .shop {
	min-height: 58px !important;
	padding: 0 8px !important;
	background: #fff !important;
	border-bottom: 1px solid #e1e9ef !important;
}
.app-body .ui-credential-list > .tablecontent > .shop:last-child { border-bottom: 0 !important; }
.app-body .ui-credential-list .menuitem {
	display: flex !important;
	align-items: center;
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 9px 7px !important;
	overflow: hidden;
	color: #203b55;
	font-size: 9px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-body .ui-credential-list > .tableheader .menuitem {
	color: #526b82;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.app-body .ui-credential-list .menuitem.licence { color: #0874aa; font-weight: 900; }
.app-body .ui-credential-list .menuitem:last-child { justify-content: center; }
.app-body .ui-credential-list .menuitem:last-child img {
	display: block;
	box-sizing: border-box;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 8px;
	background: #edf6fa;
	border-radius: 8px;
	cursor: pointer;
}
.app-body .ui-credential-list .menuitem:last-child img:hover,
.app-body .ui-credential-list .menuitem:last-child img:focus-visible { background: #dff1f8; outline: 2px solid #2c98c6; outline-offset: 1px; }
.app-body .ui-credential-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 900;
	white-space: nowrap;
}
.app-body .ui-credential-status::before { width: 6px; height: 6px; content: ''; border-radius: 50%; }
.app-body .ui-credential-status.is-ready { color: #0c7650; background: #e4f7ef; }
.app-body .ui-credential-status.is-ready::before { background: #13a66f; }
.app-body .ui-credential-status.is-missing { color: #986816; background: #fff4d7; }
.app-body .ui-credential-status.is-missing::before { background: #e4a71e; }
.app-body .ui-credential-list .ui-muted { color: #8293a3; font-style: italic; }

/* Credential editing is a proper task surface rather than an inline expansion. */
.app-body .ui-credential-modal {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 215px !important;
	z-index: 5000 !important;
	box-sizing: border-box;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px !important;
	overflow: hidden !important;
	background: rgba(17,39,59,.72) !important;
	backdrop-filter: blur(5px);
}
.app-body .ui-credential-modal > .overlay {
	position: static !important;
	display: grid !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	place-items: center;
	background: transparent !important;
}
.app-body .ui-credential-modal > .settings {
	display: grid !important;
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	place-items: center;
	background: transparent !important;
}
.app-body .ui-credential-modal .settingswrapper {
	display: grid !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	place-items: center;
}
.app-body .ui-credential-editor {
	display: flex !important;
	flex-direction: column;
	box-sizing: border-box;
	width: min(900px, 100%) !important;
	height: auto !important;
	max-height: calc(100vh - 20px) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #eef4f8 !important;
	border: 1px solid rgba(255,255,255,.65);
	border-radius: 16px !important;
	box-shadow: 0 24px 60px rgba(5,25,42,.38) !important;
}
.app-body .ui-credential-editor > h2 {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 2px;
	box-sizing: border-box;
	width: 100% !important;
	min-height: 86px;
	margin: 0 !important;
	padding: 17px 20px !important;
	color: #fff !important;
	background: linear-gradient(110deg, #153451, #16769b) !important;
	text-align: left !important;
}
.app-body .ui-credential-editor > h2 small { color: #84dcff; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.app-body .ui-credential-editor > h2 strong { color: #fff; font-size: 20px; line-height: 1.1; }
.app-body .ui-credential-editor > h2 span { color: #d7edf7; font-size: 8px; font-weight: 650; }
.app-body .ui-credential-editor > .inner {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 14px !important;
	overflow-y: auto !important;
	background: #eef4f8 !important;
}
.app-body .ui-credential-form {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
}
.app-body .ui-credential-form > .item {
	display: grid !important;
	align-content: start;
	gap: 4px;
	box-sizing: border-box;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px !important;
	background: #fff !important;
	border: 1px solid #d8e4ec;
	border-radius: 11px;
}
.app-body .ui-credential-form > .item:has(.applep8),
.app-body .ui-credential-form > .item:has(.controls),
.app-body .ui-credential-form > .ui-credential-danger { grid-column: 1 / -1; }
.app-body .ui-credential-form > .item > .title {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	color: #233e58;
	font-size: 9px !important;
	font-weight: 900;
	text-align: left !important;
	text-transform: none !important;
}
.app-body .ui-credential-form > .item > small { min-height: 25px; color: #6c8296; font-size: 7px; line-height: 1.4; }
.app-body .ui-credential-form .inputbox {
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.app-body .ui-credential-form input[type='text'],
.app-body .ui-credential-form select,
.app-body .ui-credential-form textarea {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	padding: 9px 10px !important;
	color: #17324e;
	background: #f8fbfd !important;
	border: 1px solid #cbd9e5 !important;
	border-radius: 8px !important;
	font-size: 10px !important;
}
.app-body .ui-credential-form input[type='text'],
.app-body .ui-credential-form select { min-height: 40px !important; }
.app-body .ui-credential-form textarea {
	min-height: 180px !important;
	resize: vertical;
	font-family: Consolas, 'Courier New', monospace;
	font-size: 9px !important;
	line-height: 1.45;
	white-space: pre-wrap;
}
.app-body .ui-credential-form input[readonly] { color: #60788e; background: #edf2f6 !important; }
.app-body .ui-credential-form .note { color: #5d758b; font-size: 8px; line-height: 1.45; }
.app-body .ui-credential-form .controls {
	display: flex !important;
	justify-content: flex-end;
	gap: 8px;
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
}
.app-body .ui-credential-form .controls .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 116px;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 14px !important;
	border-radius: 8px !important;
	font-size: 8px !important;
	font-weight: 900;
	cursor: pointer;
}
.app-body .ui-credential-danger {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center !important;
	gap: 14px !important;
	color: #8f2537;
	background: #fff2f4 !important;
	border-color: #f2cfd6 !important;
}
.app-body .ui-credential-danger strong { display: block; font-size: 9px; }
.app-body .ui-credential-danger p { margin: 2px 0 0; color: #a45665; font-size: 7px; }
.app-body .ui-credential-danger input[type='button'] {
	min-height: 36px;
	padding: 0 12px;
	color: #a61f37;
	background: #fff !important;
	border: 1px solid #e6aeb9 !important;
	border-radius: 8px;
	font-size: 8px;
	font-weight: 900;
	cursor: pointer;
}

@media (max-width: 980px) {
	.app-body .ui-credential-list { overflow-x: auto; }
	.app-body .ui-credential-list--apple > .tableheader,
	.app-body .ui-credential-list--apple > .tablecontent > .applecert { min-width: 1010px !important; }
}

@media (max-width: 720px) {
	.app-body .ui-credential-overview { grid-template-columns: 1fr; gap: 12px; }
	.app-body .ui-credential-overview dl { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.app-body .ui-credential-modal { left: 0 !important; padding: 0 !important; }
	.app-body .ui-credential-editor { width: 100% !important; max-height: 100vh !important; border: 0; border-radius: 0 !important; }
	.app-body .ui-credential-editor > h2 { min-height: 78px; padding: 14px 15px !important; }
	.app-body .ui-credential-editor > .inner { padding: 10px !important; }
	.app-body .ui-credential-form { grid-template-columns: 1fr; }
	.app-body .ui-credential-form > .item,
	.app-body .ui-credential-form > .item:has(.applep8),
	.app-body .ui-credential-form > .item:has(.controls),
	.app-body .ui-credential-form > .ui-credential-danger { grid-column: 1; }
}

@media (max-width: 480px) {
	.app-body .ui-credential-overview dl { grid-template-columns: 1fr 1fr; }
	.app-body .ui-credential-list--android > .tableheader,
	.app-body .ui-credential-list--android > .tablecontent > .singleshop { grid-template-columns: minmax(150px, 1fr) minmax(145px, 1fr) 50px !important; min-width: 390px !important; }
	.app-body .ui-credential-danger { grid-template-columns: 1fr; }
	.app-body .ui-credential-danger input[type='button'] { width: 100%; }
}

/* Dashboard: keep the useful figures, remove repetition and show the mix. */
.app-body .ui-dashboard-snapshot__note {
	margin: 10px 0 0;
	padding: 9px 11px;
	color: #31536d;
	background: #edf7fc;
	border-left: 3px solid #2798c6;
	border-radius: 0 8px 8px 0;
	font-size: 9px;
	font-weight: 800;
}
.app-body .ui-dashboard-route-chart {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;
	padding: 17px 18px 15px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 15px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-dashboard-route-chart > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
}
.app-body .ui-dashboard-route-chart > header small {
	color: #0874aa;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.app-body .ui-dashboard-route-chart > header h2 { margin: 3px 0 0; color: #17314d; font-size: 17px; }
.app-body .ui-dashboard-route-chart > header p { margin: 3px 0 0; color: #708499; font-size: 8px; }
.app-body .ui-dashboard-route-chart__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.app-body .ui-dashboard-route-chart__actions span { color: #617a90; font-size: 8px; font-weight: 850; white-space: nowrap; }
.app-body .ui-dashboard-route-chart__actions button {
	min-height: 28px;
	padding: 0 10px;
	color: #0875aa;
	background: #edf7fc;
	border: 1px solid #bee0ef;
	border-radius: 7px;
	font-size: 8px;
	font-weight: 900;
	cursor: pointer;
}
.app-body .ui-dashboard-route-chart__actions button[hidden] { display: none; }
.app-body .ui-dashboard-route-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 9px;
}
.app-body .ui-dashboard-route-chart__legend > button {
	appearance: none;
	display: inline-grid;
	grid-template-columns: 8px auto auto;
	align-items: center;
	gap: 5px;
	min-height: 26px;
	padding: 0 8px;
	color: #405c74;
	background: #f5f8fb;
	border: 1px solid #dfe8ef;
	border-radius: 999px;
	font-size: 8px;
	font-family: inherit;
	cursor: pointer;
	transition: color .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.app-body .ui-dashboard-route-chart__legend > button:hover { background: #edf5fa; border-color: #bed4e2; }
.app-body .ui-dashboard-route-chart__legend > button.is-off { color: #8496a6; background: #fff; border-color: #e1e8ee; opacity: .66; }
.app-body .ui-dashboard-route-chart__legend > button.is-off i { background: #aebbc6 !important; }
.app-body .ui-dashboard-route-chart__legend > button.is-off b { text-decoration: line-through; }
.app-body .ui-dashboard-route-chart__legend > .ui-dashboard-route-chart__show-all { grid-template-columns: auto; color: #0875aa; font-weight: 900; }
.app-body .ui-dashboard-route-chart__legend > .ui-dashboard-route-chart__show-all[hidden] { display: none; }
.app-body .ui-dashboard-route-chart__legend i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.app-body .ui-dashboard-route-chart__legend b { font-weight: 800; }
.app-body .ui-dashboard-route-chart__legend strong { min-width: 16px; color: #17324d; font-size: 9px; text-align: right; }
.app-body .ui-dashboard-route-chart__plot {
	position: relative;
	min-height: 180px;
	overflow-x: auto;
	background: linear-gradient(180deg, #fbfdfe, #f6f9fb);
	border: 1px solid #e0e8ef;
	border-radius: 11px;
}
.app-body .ui-dashboard-route-chart__plot svg { display: block; width: 100%; min-width: 720px; height: auto; }
.app-body .ui-dashboard-route-chart__gridline { stroke: #dbe5ed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.app-body .ui-dashboard-route-chart__hourline { stroke: #e9eff4; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.app-body .ui-dashboard-route-chart__axis-label { fill: #70869a; font-size: 9px; font-weight: 750; }
.app-body .ui-dashboard-route-chart__line {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.app-body .ui-dashboard-route-chart__crosshair { visibility: hidden; stroke: #17324d; stroke-width: 1; stroke-dasharray: 4 4; opacity: .58; vector-effect: non-scaling-stroke; }
.app-body .ui-dashboard-route-chart__crosshair.is-visible { visibility: visible; }
.app-body .ui-dashboard-route-chart__selection { visibility: hidden; fill: rgba(38, 151, 196, .15); stroke: #2697c4; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.app-body .ui-dashboard-route-chart__selection.is-visible { visibility: visible; }
.app-body .ui-dashboard-route-chart__empty-label { fill: #6c8194; font-size: 10px; font-weight: 800; }
.app-body .ui-dashboard-route-chart__overlay { fill: transparent; cursor: crosshair; touch-action: none; }
.app-body .ui-dashboard-route-chart__tooltip {
	position: absolute;
	top: 10px;
	z-index: 2;
	display: grid;
	width: 178px;
	gap: 4px;
	box-sizing: border-box;
	padding: 10px;
	color: #49647b;
	background: rgba(255, 255, 255, .97);
	border: 1px solid #cad9e5;
	border-radius: 9px;
	box-shadow: 0 12px 50px rgba(17, 46, 73, .18);
	font-size: 8px;
	pointer-events: none;
	transform: translateX(-50%);
}
.app-body .ui-dashboard-route-chart__tooltip[hidden] { display: none; }
.app-body .ui-dashboard-route-chart__tooltip.is-right { transform: translateX(-100%); }
.app-body .ui-dashboard-route-chart__tooltip > strong { margin-bottom: 3px; color: #17324d; font-size: 10px; }
.app-body .ui-dashboard-route-chart__tooltip > span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 6px; }
.app-body .ui-dashboard-route-chart__tooltip i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.app-body .ui-dashboard-route-chart__tooltip b { font-weight: 750; }
.app-body .ui-dashboard-route-chart__tooltip em { color: #17324d; font-style: normal; font-weight: 900; }
.app-body .ui-dashboard-route-chart__state {
	display: grid;
	place-items: center;
	min-height: 180px;
	margin: 0;
	padding: 18px;
	box-sizing: border-box;
	color: #687f94;
	font-size: 9px;
	font-weight: 800;
	text-align: center;
}
.app-body .ui-dashboard-route-chart.is-loading .ui-dashboard-route-chart__state::before {
	display: block;
	width: 21px;
	height: 21px;
	margin: 0 auto 8px;
	border: 3px solid #d9e8f1;
	border-top-color: #2698c5;
	border-radius: 50%;
	animation: ui-spin .75s linear infinite;
	content: '';
}
.app-body .ui-dashboard #dashboard_online > .row2 {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, .75fr) !important;
	gap: 10px !important;
	margin: 0 0 12px !important;
}
.app-body .ui-dashboard #dashboard_online > .row2 > div {
	position: relative;
	box-sizing: border-box;
	width: auto !important;
	min-height: 116px !important;
	margin: 0 !important;
	padding: 15px 17px !important;
	overflow: hidden;
}
.app-body .ui-dashboard .ui-dashboard-kpi::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, currentColor var(--ui-dashboard-share), #dfe8ef var(--ui-dashboard-share));
	content: '';
	opacity: .7;
}
.app-body .ui-dashboard .ui-dashboard-kpi > .total { font-size: 28px !important; line-height: 1 !important; }
.app-body .ui-dashboard .ui-dashboard-kpi > .description { margin-top: 7px !important; font-size: 9px !important; text-transform: none !important; }
.app-body .ui-dashboard .ui-dashboard-kpi > small { margin-top: 2px !important; color: #708499 !important; font-size: 7px !important; }
.app-body .ui-dashboard-kpi__meta {
	position: absolute;
	top: 18px;
	right: 17px;
	display: grid;
	justify-items: end;
	gap: 2px;
}
.app-body .ui-dashboard-kpi__meta strong { color: #233f58; font-size: 9px; }
.app-body .ui-dashboard-kpi__meta span { color: #71869a; font-size: 7px; }
.app-body .ui-dashboard .ui-dashboard-analytics a { display: grid !important; grid-template-columns: 38px minmax(0, 1fr); align-content: center; gap: 1px 10px; min-height: 82px !important; padding: 0 !important; }
.app-body .ui-dashboard .ui-dashboard-analytics .total { grid-row: 1 / 4; width: 36px !important; height: 36px !important; margin: 0 !important; }
.app-body .ui-dashboard .ui-dashboard-analytics .description { margin: 0 !important; font-size: 9px !important; }
.app-body .ui-dashboard .ui-dashboard-analytics small { margin: 0 !important; font-size: 7px !important; }
.app-body .ui-dashboard .ui-dashboard-analytics__action { margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 7px !important; }
body.app-body .ui-dashboard #dashboard_online > .row3.ui-dashboard-source-mix { display: none !important; }
.app-body .ui-dashboard-breakdowns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
}
.app-body .ui-dashboard-breakdowns > article {
	box-sizing: border-box;
	min-height: 188px;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-dashboard-breakdowns header { margin-bottom: 11px; }
.app-body .ui-dashboard-breakdowns header small { color: #0874aa; font-size: 7px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.app-body .ui-dashboard-breakdowns h3 { margin: 2px 0 0; color: #17314d; font-size: 15px; }
.app-body .ui-dashboard-breakdown__row { display: grid; gap: 4px; margin-top: 9px; }
.app-body .ui-dashboard-breakdown__row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.app-body .ui-dashboard-breakdown__row span { color: #405c74; font-size: 8px; font-weight: 850; }
.app-body .ui-dashboard-breakdown__row strong { color: #18334e; font-size: 10px; }
.app-body .ui-dashboard-breakdown__row i { display: block; height: 5px; overflow: hidden; background: #e2ebf1; border-radius: 999px; }
.app-body .ui-dashboard-breakdown__row i b { display: block; width: var(--ui-breakdown-value); height: 100%; background: linear-gradient(90deg, #258fc0, #43bfd1); border-radius: inherit; }
.app-body .ui-dashboard-breakdown__row small { color: #8293a3; font-size: 7px; }
.app-body .ui-dashboard-timing > strong { display: block; margin-top: 7px; color: #17324e; font-size: 42px; line-height: 1; }
.app-body .ui-dashboard-timing > p { max-width: 260px; margin: 6px 0 15px; color: #667e93; font-size: 8px; line-height: 1.45; }
.app-body .ui-dashboard-timing > a { display: inline-flex; gap: 6px; color: #0875aa; font-size: 8px; font-weight: 900; text-decoration: none; }

.app-body .ui-dashboard-history {
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 15px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-dashboard-history > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}
.app-body .ui-dashboard-history > header small {
	color: #0874aa;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.app-body .ui-dashboard-history > header h2 { margin: 3px 0 0; color: #17314d; font-size: 17px; }
.app-body .ui-dashboard-history > header p { margin: 3px 0 0; color: #708499; font-size: 8px; }
.app-body .ui-dashboard-history > header a { color: #0875aa; font-size: 8px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.app-body .ui-dashboard-history__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 9px;
}
.app-body .ui-dashboard-history__grid > article {
	grid-column: span 4;
	box-sizing: border-box;
	min-width: 0;
	min-height: 120px;
	padding: 13px;
	background: #f7fafc;
	border: 1px solid #dce6ee;
	border-radius: 11px;
}
.app-body .ui-dashboard-history__pace { display: grid; align-content: center; gap: 4px; }
.app-body .ui-dashboard-history__pace > small,
.app-body .ui-dashboard-history__channels > small,
.app-body .ui-dashboard-history__customers small,
.app-body .ui-dashboard-history__offers > small { color: #536d84; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.app-body .ui-dashboard-history__pace > strong { color: #172f49; font-size: 22px; line-height: 1.05; }
.app-body .ui-dashboard-history__pace > span { color: #73879a; font-size: 7px; font-weight: 800; }
.app-body .ui-dashboard-history__pace > span.is-up { color: #12815c; }
.app-body .ui-dashboard-history__pace > span.is-down { color: #b74d5f; }
.app-body .ui-dashboard-history__customers { display: grid; grid-template-columns: auto minmax(82px, 1fr); align-items: center; gap: 12px; }
.app-body .ui-dashboard-history__customers > div { display: grid; gap: 2px; }
.app-body .ui-dashboard-history__customers > div > strong { color: #17324d; font-size: 27px; line-height: 1; }
.app-body .ui-dashboard-history__customers > div > span { color: #657d92; font-size: 7px; }
.app-body .ui-dashboard-history__customer-note { grid-column: 1 / -1; margin: 0; padding-top: 7px; color: #60788e; border-top: 1px solid #dfe8ef; font-size: 7px; font-weight: 750; }
.app-body .ui-dashboard-history dl { display: grid; gap: 5px; margin: 0; }
.app-body .ui-dashboard-history dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.app-body .ui-dashboard-history dt { color: #667e93; font-size: 7px; }
.app-body .ui-dashboard-history dd { margin: 0; color: #17324d; font-size: 8px; font-weight: 900; }
.app-body .ui-dashboard-history__channels { display: grid; align-content: center; gap: 9px; }
.app-body .ui-dashboard-history__channel-row { display: grid; gap: 3px; }
.app-body .ui-dashboard-history__channel-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.app-body .ui-dashboard-history__channel-row span { color: #405c74; font-size: 8px; font-weight: 850; }
.app-body .ui-dashboard-history__channel-row strong { color: #17324d; font-size: 12px; }
.app-body .ui-dashboard-history__channel-row > i { display: block; height: 5px; overflow: hidden; background: #e1eaf1; border-radius: 999px; }
.app-body .ui-dashboard-history__channel-row > i b { display: block; width: var(--ui-channel-share); height: 100%; background: #268fbd; border-radius: inherit; }
.app-body .ui-dashboard-history__channel-row[data-channel="integration"] > i b { background: #18a46e; }
.app-body .ui-dashboard-history__channel-row > small { color: #7890a4; font-size: 7px; }
.app-body .ui-dashboard-history__offers { display: grid; align-content: center; gap: 8px; }
.app-body .ui-dashboard-history__offers dl { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.app-body .ui-dashboard-history__offers dl > div { display: grid; grid-template-rows: minmax(20px, auto) auto; align-content: start; gap: 3px; padding-top: 5px; border-top: 1px solid #dfe8ef; }
.app-body .ui-dashboard-history__offers dd { display: grid; align-self: end; justify-items: start; gap: 1px; }
.app-body .ui-dashboard-history__offers dd strong { color: #17324d; font-size: 10px; }
.app-body .ui-dashboard-history__offers dd span { color: #7890a4; font-size: 7px; font-weight: 750; }

/* Legacy grid defaults had enough specificity to flatten the search totals. */
body.app-body .ui-data-table.ui-grid-ready.ui-order-search__summary .tableheader > .menuitem {
	display: grid !important;
	align-content: center !important;
	min-height: 72px !important;
	color: #16314d !important;
	background: #fff !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: 11px !important;
}
.app-body .ui-order-search-card .ui-search-order-payment .payment { background: #168c72 !important; }
.app-body .ui-order-search-card .ui-search-order-device .device { background: #258eb9 !important; }
.app-body .ui-order-search-card .ui-search-order-channel .device { background: #173650 !important; }

/* Blocked contacts */
.app-body .ui-blocked-workspace { display: grid; gap: 14px; }
.app-body .ui-blocked-add {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 0 15px;
	color: #fff;
	background: #168f72;
	border-radius: 10px;
	box-shadow: 0 8px 18px rgba(22, 143, 114, .18);
	cursor: pointer;
}
.app-body .ui-blocked-add > span { display: grid; place-items: center; width: 21px; height: 21px; color: #168f72; background: #fff; border-radius: 50%; font-size: 18px; font-weight: 900; }
.app-body .ui-blocked-add > strong { font-size: 10px; }
.app-body .ui-blocked-list .tableheader,
.app-body .ui-blocked-list .singleshop { grid-template-columns: minmax(100px, .65fr) minmax(260px, 4fr) 76px 76px !important; }
.app-body .ui-blocked-list .tablecontent > .singleshop { min-height: 58px !important; }
.app-body .ui-blocked-list .menuitem { align-content: center; }
.app-body .ui-blocked-list .tablecontent > .singleshop > .menuitem:nth-child(2) { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; }
.app-body .ui-blocked-scope { display: inline-flex; width: max-content; padding: 5px 9px; color: #176c94; background: #e6f4fb; border-radius: 999px; font-size: 9px; font-weight: 850; }
.app-body .ui-blocked-value { display: block; color: #18334d; font-size: 10px; overflow-wrap: anywhere; }
.app-body .ui-blocked-type { display: block; margin-top: 2px; color: #7c8fa0; font-size: 7px; }
.app-body .ui-blocked-list img[alt="Delete"],
.app-body .ui-blocked-list img[alt="Edit"] { width: 18px !important; height: 18px !important; cursor: pointer; }
.app-body.has-blocked-contact-modal { overflow: hidden; }
.app-body .ui-blocked-modal { position: fixed !important; inset: 0; z-index: 1450; display: grid !important; place-items: start center; box-sizing: border-box; width: 100vw !important; height: 100dvh !important; padding: clamp(12px, 3vh, 30px); background: rgba(14, 34, 52, .74) !important; backdrop-filter: blur(7px); overflow: auto; }
.app-body .ui-blocked-modal > .overlay { display: contents; }
.app-body .ui-blocked-editor { width: min(620px, 100%) !important; height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid rgba(255,255,255,.58); border-radius: 16px !important; box-shadow: 0 28px 70px rgba(8, 28, 46, .28); }
.app-body .ui-blocked-editor > h2 { position: relative; display: grid; gap: 3px; margin: 0 !important; padding: 20px 64px 19px 22px !important; text-align: left !important; background: linear-gradient(135deg, #12324f, #1479a0) !important; }
.app-body .ui-blocked-editor > h2 small { color: #74d3f3; font-size: 7px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.app-body .ui-blocked-editor > h2 strong { color: #fff; font-size: 20px; }
.app-body .ui-blocked-editor > h2 span { color: #d8edf5; font-size: 9px; font-weight: 500; }
.app-body .ui-blocked-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; cursor: pointer; }
.app-body .ui-blocked-close i,
.app-body .ui-blocked-close i::after { display: block; width: 15px; height: 2px; background: currentColor; border-radius: 999px; transform: rotate(45deg); content: ''; }
.app-body .ui-blocked-close i::after { transform: rotate(90deg); }
.app-body .ui-blocked-editor > .inner { height: auto !important; min-height: 0 !important; padding: 22px !important; background: #f3f7fa !important; }
.app-body .ui-blocked-editor #bannedform { display: grid; grid-template-columns: 1.6fr .7fr; gap: 12px; }
.app-body .ui-blocked-field { display: grid !important; float: none !important; box-sizing: border-box; width: auto !important; gap: 6px; min-height: 0 !important; margin: 0 !important; padding: 16px !important; background: #fff; border: 1px solid var(--ui-border); border-radius: 12px; }
.app-body .ui-blocked-field > .title { color: #17324d; font-size: 10px !important; font-weight: 900; }
.app-body .ui-blocked-field > small { min-height: 30px; color: #708399; font-size: 8px; line-height: 1.45; }
.app-body .ui-blocked-field .inputbox { width: 100% !important; }
.app-body .ui-blocked-field input { box-sizing: border-box; width: 100% !important; height: 42px !important; padding: 0 12px !important; color: #18334d !important; background: #f8fbfd !important; border: 1px solid #c8d7e3 !important; border-radius: 9px !important; }
.app-body .ui-blocked-actions { grid-column: 1 / -1; margin: 0 !important; padding: 4px 0 0 !important; min-height: 0 !important; }
.app-body .ui-blocked-actions .controls { display: flex !important; justify-content: flex-end; gap: 9px; }
.app-body .ui-blocked-actions .btn { float: none !important; min-width: 118px !important; min-height: 42px !important; margin: 0 !important; border-radius: 9px !important; }

@media (max-width: 900px) {
	.app-body .ui-dashboard #dashboard_online > .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.app-body .ui-dashboard #dashboard_online > .row2 > .ui-dashboard-analytics { grid-column: 1 / -1; }
	.app-body .ui-dashboard-breakdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-dashboard-breakdowns > article:last-child { grid-column: 1 / -1; min-height: 150px; }
	.app-body .ui-dashboard-history__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.app-body .ui-dashboard-history__grid > article { grid-column: span 2; }
}

@media (max-width: 560px) {
	.app-body .ui-dashboard #dashboard_online > .row2,
	.app-body .ui-dashboard-breakdowns { grid-template-columns: 1fr !important; }
	.app-body .ui-dashboard #dashboard_online > .row2 > .ui-dashboard-analytics,
	.app-body .ui-dashboard-breakdowns > article:last-child { grid-column: 1; }
	.app-body .ui-dashboard #dashboard_online > .row2 > div { min-height: 108px !important; }
	.app-body .ui-dashboard-history { padding: 14px; }
	.app-body .ui-dashboard-route-chart { padding: 14px; }
	.app-body .ui-dashboard-route-chart > header { align-items: flex-start; flex-direction: column; gap: 7px; }
	.app-body .ui-dashboard-route-chart__actions { justify-content: flex-start; flex-wrap: wrap; }
	.app-body .ui-dashboard-history > header { align-items: flex-start; flex-direction: column; gap: 8px; }
	.app-body .ui-dashboard-history__grid { grid-template-columns: 1fr !important; }
	.app-body .ui-dashboard-history__pace,
	.app-body .ui-dashboard-history__channels,
	.app-body .ui-dashboard-history__customers,
	.app-body .ui-dashboard-history__offers { grid-column: 1; }
	.app-body .ui-blocked-list .tableheader { display: none !important; }
	.app-body .ui-blocked-list .tablecontent > .singleshop { grid-template-columns: 88px minmax(0, 1fr) 38px 38px !important; padding: 8px !important; }
	.app-body .ui-blocked-add { justify-self: stretch; justify-content: center; }
	.app-body .ui-blocked-editor #bannedform { grid-template-columns: 1fr; }
	.app-body .ui-blocked-actions { grid-column: 1; }
}

/* Dashboard: dedicated in-store view. */
.app-body .ui-dashboard #dashboard_instore.ui-instore-dashboard {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.app-body .ui-instore-shop-select {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: var(--ui-shadow-sm);
}

.app-body .ui-instore-shop-select label { display: grid; gap: 2px; }
.app-body .ui-instore-shop-select label span { color: #17314d; font-size: 10px; font-weight: 900; }
.app-body .ui-instore-shop-select label small { color: #708499; font-size: 8px; }
.app-body .ui-instore-shop-select select {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 0 36px 0 12px;
	color: #17314d;
	background: #f7fafc;
	border: 1px solid #cbd9e4;
	border-radius: 9px;
	font: inherit;
}

.app-body .ui-instore-overview {
	display: grid;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
}

.app-body .ui-instore-overview__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding: 4px 2px 0;
}

.app-body .ui-instore-overview__header > div { display: grid; gap: 2px; }
.app-body .ui-instore-overview__header > div > span,
.app-body .ui-instore-panel > header > span {
	color: #0874aa;
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.app-body .ui-instore-overview__header h2 { margin: 0; color: #17314d; font-size: 18px; line-height: 1.15; }
.app-body .ui-instore-overview__header p { margin: 2px 0 0; color: #708499; font-size: 8px; }
.app-body .ui-instore-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	color: #28735d;
	background: #eaf7f2;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 850;
	white-space: nowrap;
}
.app-body .ui-instore-live i { width: 7px; height: 7px; background: #19a875; border-radius: 50%; box-shadow: 0 0 0 3px rgba(25,168,117,.12); }

.app-body .ui-instore-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.app-body .ui-instore-kpis > article {
	position: relative;
	display: grid;
	align-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: 104px;
	padding: 15px 16px 15px 19px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-instore-kpis > article::before { position: absolute; inset: 15px auto 15px 0; width: 4px; background: #2798c6; border-radius: 0 4px 4px 0; content: ''; }
.app-body .ui-instore-kpis > article:nth-child(2)::before { background: #17a474; }
.app-body .ui-instore-kpis > article:nth-child(3)::before { background: #1b526f; }
.app-body .ui-instore-kpis > article:nth-child(4)::before { background: #e9aa2a; }
.app-body .ui-instore-kpis article > span { color: #587187; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.app-body .ui-instore-kpis article > strong { display: block; margin: 4px 0 2px; color: #17314d; font-size: clamp(23px, 2.25vw, 32px); line-height: 1; }
.app-body .ui-instore-kpis article > small { color: #7b8ea0; font-size: 7px; }

.app-body .ui-instore-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 10px;
}
.app-body .ui-instore-panel {
	box-sizing: border-box;
	min-width: 0;
	min-height: 178px;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 13px;
	box-shadow: var(--ui-shadow-sm);
}
.app-body .ui-instore-panel > header { display: grid; gap: 2px; margin-bottom: 12px; }
.app-body .ui-instore-panel > header h3 { margin: 0; color: #17314d; font-size: 14px; }
.app-body .ui-instore-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px; }
.app-body .ui-instore-bar { display: grid; gap: 5px; }
.app-body .ui-instore-bar > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.app-body .ui-instore-bar span { color: #4d667b; font-size: 8px; font-weight: 800; }
.app-body .ui-instore-bar strong { color: #17314d; font-size: 13px; }
.app-body .ui-instore-bar > i { height: 6px; overflow: hidden; background: #e3ebf1; border-radius: 999px; }
.app-body .ui-instore-bar > i > b { display: block; width: var(--ui-instore-value, 0%); height: 100%; background: linear-gradient(90deg, #238fc0, #48bbcd); border-radius: inherit; transition: width .25s ease; }
.app-body .ui-instore-bar[data-source='instore'] > i > b { background: linear-gradient(90deg, #178c69, #38bf8e); }
.app-body .ui-instore-bar[data-source='telephone'] > i > b { background: linear-gradient(90deg, #e29d1f, #f2c35e); }
.app-body .ui-instore-bar[data-source='integrations'] > i > b { background: linear-gradient(90deg, #1e536f, #287fa0); }
.app-body .ui-instore-bar[data-source='other'] > i > b { background: linear-gradient(90deg, #7c6a91, #a18db9); }

.app-body .ui-instore-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-body .ui-instore-split > div {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-items: center;
	column-gap: 10px;
	box-sizing: border-box;
	min-width: 0;
	padding: 12px;
	background: #f6fafc;
	border: 1px solid #dce7ee;
	border-radius: 10px;
}
.app-body .ui-instore-split img { grid-row: 1 / 4; box-sizing: border-box; width: 34px; height: 34px; padding: 7px; background: #166b96; border-radius: 9px; }
.app-body .ui-instore-split span { color: #577086; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.app-body .ui-instore-split strong { color: #17314d; font-size: 22px; line-height: 1.1; }
.app-body .ui-instore-split small { color: #7b8fa1; font-size: 7px; }

.app-body .ui-instore-service dl,
.app-body .ui-instore-progress dl { display: grid; gap: 0; margin: 0; }
.app-body .ui-instore-service dl > div,
.app-body .ui-instore-progress dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #e4ebf0; }
.app-body .ui-instore-service dt,
.app-body .ui-instore-progress dt { color: #587086; font-size: 8px; font-weight: 750; }
.app-body .ui-instore-service dd,
.app-body .ui-instore-progress dd { margin: 0; color: #17314d; font-size: 11px; font-weight: 900; text-align: right; }
.app-body .ui-instore-service dd.is-empty { color: #8293a2; font-size: 8px; font-weight: 800; }
.app-body .ui-instore-service > p { margin: 9px 0 0; padding: 8px 9px; color: #587087; background: #eef6fa; border-radius: 8px; font-size: 7px; line-height: 1.4; }
.app-body .ui-instore-progress dl { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.app-body .ui-instore-progress dd { min-width: 24px; padding: 4px 7px; color: #167455; background: #eaf7f2; border-radius: 999px; font-size: 9px; }

@media (max-width: 900px) {
	.app-body .ui-instore-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-instore-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.app-body .ui-instore-shop-select { grid-template-columns: 1fr; }
	.app-body .ui-instore-overview__header { align-items: flex-start; flex-direction: column; gap: 8px; }
	.app-body .ui-instore-kpis { grid-template-columns: 1fr 1fr; }
	.app-body .ui-instore-kpis > article { min-height: 92px; padding: 13px 12px 13px 16px; }
	.app-body .ui-instore-kpis article > strong { font-size: 21px; }
	.app-body .ui-instore-bars,
	.app-body .ui-instore-split,
	.app-body .ui-instore-progress dl { grid-template-columns: 1fr; }
}

/* Shop settings: payment provider credentials. */
.app-body .ui-settings-editor #settingscontainer_0_onlinepaymentconfig {
	padding: 18px;
	background: #f3f7fa;
}

.app-body .ui-settings-editor #settingscontainer_0_onlinepaymentconfig .settingsinfo > .inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 14px;
}

.app-body .ui-settings-editor .ui-payment-provider {
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dce5ed;
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(20, 48, 72, .06);
}

.app-body .ui-settings-editor .ui-payment-provider__header {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 92px;
	padding: 17px 18px;
	background: linear-gradient(135deg, #fff, #f5f9fc);
	border-bottom: 1px solid #e3eaf0;
}

.app-body .ui-settings-editor .ui-payment-provider__logo {
	display: grid;
	flex: 0 0 130px;
	place-items: center;
	height: 55px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #e1e8ee;
	border-radius: 10px;
}

.app-body .ui-settings-editor .ui-payment-provider__logo img {
	display: block;
	width: auto !important;
	max-width: 100%;
	max-height: 34px;
	margin: 0;
}

.app-body .ui-settings-editor .ui-payment-provider__header h3,
.app-body .ui-settings-editor .ui-payment-provider__header p {
	margin: 0;
}

.app-body .ui-settings-editor .ui-payment-provider__header h3 {
	color: #17324d;
	font-size: 16px;
	font-weight: 800;
}

.app-body .ui-settings-editor .ui-payment-provider__header p {
	margin-top: 4px;
	color: #6d8093;
	font-size: 10px;
	line-height: 1.4;
}

.app-body .ui-settings-editor .ui-payment-provider__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 14px;
}

.app-body .ui-settings-editor .ui-payment-provider__fields > .item {
	position: relative;
	display: flex;
	float: none;
	flex-direction: column;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 88px;
	margin: 0;
	padding: 13px;
	overflow: visible;
	color: #17324d;
	background: #f8fafc;
	border: 1px solid #e0e7ee;
	border-radius: 10px;
}

.app-body .ui-settings-editor .ui-payment-provider__fields > .item > span.title {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 7px;
	padding: 0;
	color: #17324d;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
}

.app-body .ui-settings-editor .ui-payment-provider__fields > .item > span:not(.title):empty {
	display: none;
}

.app-body .ui-settings-editor .ui-payment-provider__fields .inputbox,
.app-body .ui-settings-editor .ui-payment-provider__fields .option {
	display: block;
	float: none;
	width: 100%;
	margin: auto 0 0;
	padding: 0;
	background: transparent;
}

.app-body .ui-settings-editor .ui-payment-provider__fields input,
.app-body .ui-settings-editor .ui-payment-provider__fields select {
	box-sizing: border-box;
	width: 100% !important;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 8px 10px !important;
	color: #17324d;
	background: #fff;
	border: 1px solid #cbd7e2 !important;
	border-radius: 8px;
	font-size: 11px;
}

.app-body .ui-settings-editor .ui-payment-provider__fields input:focus,
.app-body .ui-settings-editor .ui-payment-provider__fields select:focus {
	border-color: var(--ui-accent) !important;
	box-shadow: 0 0 0 3px rgba(46, 152, 212, .12);
	outline: 0;
}

.app-body .ui-settings-editor .ui-payment-provider__subhead {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 3px 1px -1px;
	padding-top: 9px;
	border-top: 1px solid #e3e9ef;
}

.app-body .ui-settings-editor .ui-payment-provider__subhead strong {
	color: #17324d;
	font-size: 10px;
}

.app-body .ui-settings-editor .ui-payment-provider__subhead span {
	color: #718498;
	font-size: 8px;
}

.app-body .ui-settings-editor .ui-payment-provider__fields > .item.ui-setting-search-hit {
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 4px rgba(46, 152, 212, .17), 0 12px 28px rgba(28, 102, 145, .15);
	animation: ui-setting-search-pulse 850ms ease-out 2;
}

@media (max-width: 1180px) {
	.app-body .ui-settings-editor #settingscontainer_0_onlinepaymentconfig .settingsinfo > .inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.app-body .ui-settings-editor #settingscontainer_0_onlinepaymentconfig { padding: 12px 0 0; }
	.app-body .ui-settings-editor .ui-payment-provider__header { align-items: flex-start; flex-direction: column; gap: 9px; }
	.app-body .ui-settings-editor .ui-payment-provider__logo { width: 120px; height: 45px; }
	.app-body .ui-settings-editor .ui-payment-provider__fields { grid-template-columns: 1fr; padding: 10px; }
	.app-body .ui-settings-editor .ui-payment-provider__subhead { display: grid; gap: 3px; }
}

/* Single-shop settings open directly. Keep the intermediate list out of view
   while the branch configuration request is in flight. */
.app-body #maincontent.ui-settings-auto-opening {
	position: relative;
	min-height: calc(100vh - 24px);
	overflow: hidden;
}

.app-body #maincontent.ui-settings-auto-opening > *:not(.ui-settings-opening) {
	visibility: hidden !important;
}

.app-body .ui-settings-opening {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	box-sizing: border-box;
	min-height: 420px;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	padding: clamp(86px, 14vh, 150px) 24px 48px;
	color: #17324d;
	background: #f3f7fb;
	text-align: center;
}

.app-body .ui-settings-opening__spinner {
	width: 38px;
	height: 38px;
	margin-bottom: 18px;
	border: 4px solid #d9e5ef;
	border-top-color: var(--ui-accent, #2e98d4);
	border-radius: 50%;
	animation: ui-settings-opening-spin .75s linear infinite;
}

.app-body .ui-settings-opening__eyebrow {
	margin-bottom: 7px;
	color: #0871ad;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.app-body .ui-settings-opening h1 {
	margin: 0;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.1;
}

.app-body .ui-settings-opening p {
	margin: 9px 0 0;
	color: #647b91;
	font-size: 13px;
}

@keyframes ui-settings-opening-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.app-body .ui-settings-opening__spinner { animation-duration: 1.8s; }
}

/* Delivery-area editor: one explicit mode, with the shorthand rules in view. */
.app-body .ui-store-locator-editor [hidden] { display: none !important; }
.app-body .ui-storelocator-mode__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-body .ui-storelocator-mode__choices label { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 11px; color: #17334c; background: #f3f8fc; border: 1px solid #d6e3ed; border-radius: 9px; font-size: 10px; font-weight: 750; cursor: pointer; }
.app-body .ui-storelocator-mode__choices input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-brand); }
.app-body .ui-storelocator-radius-input { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #cbd9e5; border-radius: 9px; }
.app-body .ui-storelocator-radius-prefix { display: grid; height: 100%; place-items: center; color: #0875aa; background: #e8f5fb; border-right: 1px solid #cbd9e5; font-size: 15px; font-weight: 900; }
.app-body .ui-storelocator-radius-input input { border: 0 !important; border-radius: 0 !important; }
.app-body .ui-storelocator-hint { margin: 0; color: var(--ui-muted); font-size: 9px; line-height: 1.45; }
.app-body .ui-storelocator-rules { grid-column: 1 / -1; padding: 12px 14px; background: #edf7fc; border: 1px solid #cfe5f1; border-radius: 10px; }
.app-body .ui-storelocator-rules > strong { display: block; margin-bottom: 8px; color: #163b57; font-size: 10px; }
.app-body .ui-storelocator-rules dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin: 0; }
.app-body .ui-storelocator-rules dl > div { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 7px; align-items: start; }
.app-body .ui-storelocator-rules dt,
.app-body .ui-storelocator-rules dd { margin: 0; color: #49647b; font-size: 8px; line-height: 1.45; }
.app-body .ui-storelocator-rules code { color: #0875aa; font-weight: 850; }

/* Shop settings starts with suspended branches hidden, with a reversible control. */
.app-body .ui-suspended-toggle { min-height: 38px; padding: 8px 12px; color: #38536b; background: #fff; border: 1px solid var(--ui-border); border-radius: 10px; font-size: 9px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.app-body .ui-suspended-toggle:hover,
.app-body .ui-suspended-toggle:focus-visible,
.app-body .ui-suspended-toggle[aria-pressed="true"] { color: #0875aa; background: #eaf6fc; border-color: #9ed2ea; }

/* Pay links: compact identity/status fields and room for references and timestamps. */
.app-body .ui-paylinks-summary { display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 1fr)); gap: 20px; align-items: center; margin: 0 0 18px; padding: 20px 22px; border: 1px solid var(--ui-border); border-radius: 16px; background: #f6fbfd; box-shadow: var(--ui-shadow-sm); }
.app-body .ui-paylinks-summary__scope > small, .app-body .ui-paylinks-summary__metric > span { display: block; color: var(--ui-brand-dark); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-body .ui-paylinks-summary h2 { margin: 5px 0; color: var(--ui-text); font-size: 17px; }
.app-body .ui-paylinks-summary p, .app-body .ui-paylinks-summary__metric > small { display: block; margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.6; }
.app-body .ui-paylinks-summary__metric { padding-left: 20px; border-left: 1px solid var(--ui-border); }
.app-body .ui-paylinks-summary__metric > strong { display: block; margin: 4px 0 2px; color: var(--ui-text); font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; }
.app-body .ui-paylinks-page-empty { padding: 14px; background: #f6fbfd; border-radius: 10px; }
.app-body .ui-paylinks .tableheader,
.app-body .ui-paylinks .tablecontent > .shop { min-width: 1340px; grid-template-columns: 72px 92px 105px 92px 108px 126px 136px minmax(220px, 1.2fr) minmax(170px, .8fr) minmax(170px, .8fr) 76px !important; }
.app-body .ui-paylinks .menuitem { min-width: 0; overflow-wrap: anywhere; }
.app-body .ui-paylinks .menuitem:nth-child(2),
.app-body .ui-paylinks .menuitem:nth-child(9),
.app-body .ui-paylinks .menuitem:nth-child(10) { white-space: nowrap; overflow-wrap: normal; }
.app-body .ui-paylinks-filter { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(190px, 270px) minmax(170px, 230px) auto; align-items: end; gap: 12px; margin: 0 0 14px; padding: 15px 16px; background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-sm); }
.app-body .ui-paylinks-filter__heading small,
.app-body .ui-paylinks-filter__heading strong,
.app-body .ui-paylinks-filter label > span { display: block; }
.app-body .ui-paylinks-filter__heading small { margin-bottom: 3px; color: var(--ui-brand-dark); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.app-body .ui-paylinks-filter__heading strong { color: var(--ui-text); font-size: 15px; }
.app-body .ui-paylinks-filter label > span { margin-bottom: 5px; color: var(--ui-muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.app-body .ui-paylinks-filter select { width: 100%; height: 40px; padding: 0 34px 0 11px; color: var(--ui-text); background: #f8fbfe; border: 1px solid #cedae7; border-radius: 10px; font-size: 10px; font-weight: 650; }
.app-body .ui-paylinks-filter__clear { min-height: 40px; padding: 0 14px; color: #38536b; background: #f3f7fa; border: 1px solid #d5e0e9; border-radius: 10px; font-size: 9px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.app-body .ui-paylinks-filter__clear:hover,
.app-body .ui-paylinks-filter__clear:focus-visible { color: #0875aa; background: #eaf6fc; border-color: #9ed2ea; }
.app-body .ui-paylink-status span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.app-body .ui-paylink-status span::before { width: 7px; height: 7px; content: ""; border-radius: 50%; }
.app-body .ui-paylink-status.is-paid span { color: #08764f; background: #e5f8ef; }
.app-body .ui-paylink-status.is-paid span::before { background: #16a36d; }
.app-body .ui-paylink-status.is-unpaid span { color: #9e3745; background: #fff0f2; }
.app-body .ui-paylink-status.is-unpaid span::before { background: #d45162; }
.app-body .ui-paylink-payment { display: inline-flex !important; align-items: center; gap: 7px; min-width: 0; }
.app-body .ui-paylink-payment img { width: 25px; height: 25px; padding: 4px; object-fit: contain; background: #eef6fb; border-radius: 7px; }

@media (max-width: 900px) {
	.app-body .ui-paylinks-summary { grid-template-columns: 1fr 1fr; }
	.app-body .ui-paylinks-summary__scope { grid-column: 1 / -1; }
	.app-body .ui-paylinks-summary__metric { padding-left: 0; border-left: 0; }
	.app-body .ui-paylinks-filter { grid-template-columns: 1fr 1fr; }
	.app-body .ui-paylinks-filter__heading { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.app-body .ui-paylinks-filter { grid-template-columns: 1fr; }
	.app-body .ui-paylinks-filter__heading { grid-column: auto; }
	.app-body .ui-paylinks-filter__clear { width: 100%; }
}
.app-body .ui-paylink-payment span { color: #29445c; font-size: 9px; font-weight: 750; white-space: nowrap; }

.app-body .ui-paylink-order-action {
	display: flex;
	align-items: center;
	justify-content: center;
}

.app-body .ui-paylink-order-view {
	flex: 0 0 auto;
	min-height: 27px;
	padding: 4px 8px;
	color: #0875aa;
	background: #e9f6fc;
	border: 1px solid #b8dff0;
	border-radius: 7px;
	font-size: 8px;
	font-weight: 850;
	cursor: pointer;
}

.app-body .ui-paylink-order-view:hover,
.app-body .ui-paylink-order-view:focus-visible {
	color: #fff;
	background: var(--ui-brand);
	border-color: var(--ui-brand);
	outline: none;
}

body.app-body.has-paylink-order-modal {
	overflow: hidden !important;
}

.ui-paylink-order-modal {
	position: fixed;
	inset: 0;
	z-index: 10020;
	display: grid;
	place-items: center;
	padding: 22px;
	background: rgba(10, 24, 43, .68);
	backdrop-filter: blur(4px);
}

.ui-paylink-order-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1040px, 100%);
	max-height: calc(100vh - 44px);
	overflow: hidden;
	background: #f3f7fb;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 20px;
	box-shadow: 0 30px 90px rgba(5, 19, 38, .38);
}

.ui-paylink-order-modal__close {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: #536a7e;
	background: rgba(255, 255, 255, .82);
	border: 1px solid #d7e2eb;
	border-radius: 50%;
	font-size: 21px;
	cursor: pointer;
}

.ui-paylink-order-modal__close:hover,
.ui-paylink-order-modal__close:focus-visible {
	color: #fff;
	background: #d44155;
	border-color: #d44155;
	outline: none;
}

.ui-paylink-order-modal__title {
	flex: 0 0 auto;
	padding: 23px 70px 20px 25px;
	background: linear-gradient(120deg, #fff 15%, #e5f5fc 100%);
	border-bottom: 1px solid #d7e3ed;
}

.ui-paylink-order-modal__title span,
.ui-paylink-order-result__header small,
.ui-paylink-order-message small {
	display: block;
	margin-bottom: 4px;
	color: #0875aa;
	font-size: 8px;
	font-weight: 850;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ui-paylink-order-modal__title h2 {
	margin: 0;
	color: #10243d;
	font-size: 22px;
}

.ui-paylink-order-modal__title p {
	margin: 3px 0 0;
	color: #6a7d90;
	font-size: 10px;
}

.ui-paylink-order-modal__content {
	min-height: 210px;
	padding: 18px;
	overflow: auto;
}

.ui-paylink-order-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 170px;
	color: #405a70;
	font-size: 11px;
}

.ui-paylink-order-loading span {
	width: 25px;
	height: 25px;
	border: 3px solid #cce5f2;
	border-top-color: var(--ui-brand);
	border-radius: 50%;
	animation: ui-spin .75s linear infinite;
}

.ui-paylink-order-result {
	display: grid;
	gap: 13px;
}

.ui-paylink-order-result__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 17px 18px;
	background: #fff;
	border: 1px solid #d8e3ec;
	border-radius: 14px;
}

.ui-paylink-order-result__header h3,
.ui-paylink-order-message h3 {
	margin: 0;
	color: #10243d;
	font-size: 18px;
}

.ui-paylink-order-result__header p,
.ui-paylink-order-message p {
	margin: 4px 0 0;
	color: #687d90;
	font-size: 9px;
}

.ui-paylink-order-status {
	flex: 0 0 auto;
	padding: 7px 11px;
	color: #08764f;
	background: #e5f8ef;
	border: 1px solid #c9eddd;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 850;
}

.ui-paylink-order-status.is-status-0 {
	color: #4f667a;
	background: #edf2f6;
	border-color: #d9e2e9;
}

.ui-paylink-order-status.is-status-1,
.ui-paylink-order-status.is-status-2 {
	color: #946510;
	background: #fff5d9;
	border-color: #f0dda7;
}

.ui-paylink-order-status.is-status-3 {
	color: #086b9c;
	background: #e6f5fc;
	border-color: #c5e5f3;
}

.ui-paylink-order-section {
	padding: 15px;
	background: #fff;
	border: 1px solid #d8e3ec;
	border-radius: 14px;
}

.ui-paylink-order-section h4 {
	margin: 0 0 11px;
	color: #17314c;
	font-size: 11px;
}

.ui-paylink-order-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.ui-paylink-order-fact {
	min-width: 0;
	padding: 10px;
	background: #f6f9fc;
	border: 1px solid #e1e8ef;
	border-radius: 9px;
}

.ui-paylink-order-fact span {
	display: block;
	margin-bottom: 3px;
	color: #738698;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ui-paylink-order-fact strong {
	display: block;
	color: #213b54;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ui-paylink-order-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px;
}

.ui-paylink-order-columns .ui-paylink-order-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-paylink-order-summary pre {
	max-height: 260px;
	margin: 0;
	padding: 14px;
	overflow: auto;
	color: #263f57;
	background: #f6f9fc;
	border: 1px solid #dfe8ef;
	border-radius: 10px;
	font: 500 10px/1.6 Consolas, "Courier New", monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

.ui-paylink-order-summary__empty {
	margin: 0;
	color: #718397;
	font-size: 9px;
}

.ui-paylink-order-message {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 20px auto;
	padding: 18px;
	max-width: 650px;
	background: #fff;
	border: 1px solid #d7e3ec;
	border-radius: 14px;
}

.ui-paylink-order-message__icon {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #0875aa;
	background: #e7f5fc;
	border-radius: 11px;
	font-weight: 900;
}

.ui-paylink-order-message.is-error {
	border-color: #f0c8cf;
}

.ui-paylink-order-message.is-error .ui-paylink-order-message__icon {
	color: #fff;
	background: #d44155;
}

@media (max-width: 760px) {
	.ui-paylink-order-modal { padding: 8px; }
	.ui-paylink-order-modal__dialog { max-height: calc(100vh - 16px); border-radius: 15px; }
	.ui-paylink-order-modal__title { padding: 18px 58px 16px 17px; }
	.ui-paylink-order-modal__content { padding: 10px; }
	.ui-paylink-order-result__header { align-items: flex-start; }
	.ui-paylink-order-facts,
	.ui-paylink-order-columns,
	.ui-paylink-order-columns .ui-paylink-order-facts { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.app-body .ui-storelocator-mode__choices,
	.app-body .ui-storelocator-rules dl { grid-template-columns: 1fr; }
}

/* Final responsive repairs from the customer-access review. */
.app-body .ui-settings-editor .settingsnav { color: #c8d5e2 !important; }
.app-body .ui-settings-editor #settings_tab_buttons > li { color: #bdcad7 !important; opacity: 1 !important; text-shadow: none !important; }
.app-body .ui-settings-editor #settings_tab_buttons > li:hover,
.app-body .ui-settings-editor #settings_tab_buttons > li:focus-visible,
.app-body .ui-settings-editor #settings_tab_buttons > li.active { color: #fff !important; }

.app-body #freeitem .item-inner > .inputbox:has(> select),
.app-body #itemqualifier .item-inner > .inputbox:has(> select) {
	box-sizing: border-box;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.app-body #freeitem .item-inner > .inputbox > select,
.app-body #itemqualifier .item-inner > .inputbox > select {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	border: 1px solid #bfd0df !important;
	border-radius: 9px !important;
	box-shadow: none !important;
}

.content.loading .loadingicon.ui-brand-loader { width: 220px !important; height: auto !important; margin: 12vh auto 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* In-store orders: lightweight remote view of shoporders.orderdata. */
.app-body .ui-instore-orders-page { display: block; }
.app-body .ui-instore-summary {
	display: grid;
	/* One row whatever the number of cards (four, or five when there are cancelled orders). */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
	margin-bottom: 12px;
}
.app-body .ui-instore-summary article {
	min-width: 0;
	padding: 16px 17px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-soft);
}
.app-body .ui-instore-summary span,
.app-body .ui-instore-operations span,
.app-body .ui-instore-daily header > span {
	display: block;
	color: var(--ui-brand-dark);
	font-size: 8px;
	font-weight: 850;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.app-body .ui-instore-summary strong {
	display: block;
	margin-top: 6px;
	color: var(--ui-ink);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1;
}
.app-body .ui-instore-summary small {
	display: block;
	margin-top: 7px;
	color: var(--ui-muted);
	font-size: 9px;
}
.app-body .ui-instore-operations {
	display: grid;
	grid-template-columns: repeat(var(--instore-metrics, 4), minmax(90px, .7fr)) minmax(210px, 1.4fr);
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-soft);
	overflow: hidden;
}
.app-body .ui-instore-operations.has-kiosks { --instore-metrics: 5; }
.app-body .ui-instore-operations > div { padding: 13px 15px; border-right: 1px solid var(--ui-line); }
.app-body .ui-instore-operations > div:last-child { border-right: 0; }
.app-body .ui-instore-operations strong { display: block; margin-top: 5px; color: var(--ui-ink); font-size: 14px; }
.app-body .ui-instore-daily {
	margin-bottom: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 14px;
	box-shadow: var(--ui-shadow-soft);
	overflow-x: auto;
}
.app-body .ui-instore-daily h2 { margin: 4px 0 13px; color: var(--ui-ink); font-size: 17px; }
.app-body .ui-instore-daily__table { min-width: 760px; border: 1px solid var(--ui-line); border-radius: 11px; overflow: hidden; }
.app-body .ui-instore-daily__row { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(7, minmax(74px, .7fr)); align-items: center; }
.app-body .ui-instore-daily__row + .ui-instore-daily__row { border-top: 1px solid var(--ui-line); }
.app-body .ui-instore-daily__row > * { padding: 10px 12px; color: var(--ui-text); font-size: 10px; }
.app-body .ui-instore-daily__row.is-header { background: #f4f8fc; }
.app-body .ui-instore-daily__row.is-header > * { color: #536a80; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.app-body .ui-instore-orders-table { margin-top: 0; }
.app-body .ui-instore-orders-table .tableheader,
.app-body .ui-instore-orders-table .tablecontent > .ui-instore-order-row {
	min-width: 1320px;
	grid-template-columns: 82px minmax(90px, .6fr) minmax(195px, 1.35fr) 145px 95px minmax(165px, 1.15fr) 90px 115px 120px minmax(140px, .9fr) 70px !important;
}
.app-body .ui-instore-orders-table .tableheader > .menuitem,
.app-body .ui-instore-orders-table .tablecontent > .ui-instore-order-row > .menuitem {
	min-width: 0;
	overflow: hidden;
	overflow-wrap: normal !important;
	text-overflow: ellipsis;
	white-space: nowrap !important;
	word-break: normal;
}
.app-body .ui-instore-when strong,
.app-body .ui-instore-order-number strong { display: block; color: var(--ui-ink); font-size: 10px; }
.app-body .ui-instore-when small,
.app-body .ui-instore-order-number small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .ui-instore-online-order,
.app-body .ui-instore-driver { overflow: hidden; color: var(--ui-ink); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.app-body .ui-instore-total { color: var(--ui-ink); font-weight: 850; white-space: nowrap; }
.app-body .ui-instore-orders-table .tableheader > .menuitem:nth-child(8),
.app-body .ui-instore-orders-table .tableheader > .menuitem:nth-child(9),
.app-body .ui-instore-orders-table .ui-instore-payment,
.app-body .ui-instore-orders-table .ui-instore-status {
	align-items: center;
	justify-content: center !important;
	text-align: center;
}
.app-body .ui-instore-payment { flex-direction: row; gap: 6px; }
.app-body .ui-instore-payment > span,
.app-body .ui-instore-status > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: 999px;
	font-size: 8px;
	font-weight: 850;
	white-space: nowrap;
}
.app-body .ui-instore-payment > span::before,
.app-body .ui-instore-status > span::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }
.app-body .ui-instore-payment .is-paid { color: #087a58; background: #ddf6ed; }
.app-body .ui-instore-payment .is-cash { color: #30506c; background: #eaf1f7; }
.app-body .ui-instore-payment > small { flex: 0 0 auto; color: #0875aa; font-size: 8px; font-weight: 800; white-space: nowrap; }
.app-body .ui-instore-status.is-complete > span { color: #087a58; background: #ddf6ed; }
.app-body .ui-instore-status.is-enroute > span { color: #0875aa; background: #e4f4fb; }
.app-body .ui-instore-status.is-ready > span { color: #7052a0; background: #f0eafb; }
.app-body .ui-instore-status.is-kitchen > span { color: #93640a; background: #fff0ce; }
.app-body .ui-instore-status.is-received > span,
.app-body .ui-instore-status.is-unknown > span { color: #586d7f; background: #edf2f6; }
.app-body .ui-instore-order-action { justify-content: center; }
.app-body .ui-instore-order-view {
	min-width: 52px;
	min-height: 32px;
	padding: 0 10px;
	color: #0875aa;
	background: #eaf6fc;
	border: 1px solid #b8dced;
	border-radius: 9px;
	font-size: 8px;
	font-weight: 850;
	cursor: pointer;
}
.app-body .ui-instore-order-view:hover,
.app-body .ui-instore-order-view:focus-visible { color: #fff; background: var(--ui-brand-dark); border-color: var(--ui-brand-dark); }
.ui-instore-order-result__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.ui-instore-open-online,
.ui-instore-driver-route {
	min-height: 34px;
	padding: 0 12px;
	color: #0875aa;
	background: #eaf6fc;
	border: 1px solid #b8dced;
	border-radius: 9px;
	font-size: 9px;
	font-weight: 850;
	cursor: pointer;
}
.ui-instore-open-online:hover,
.ui-instore-open-online:focus-visible,
.ui-instore-driver-route:hover,
.ui-instore-driver-route:focus-visible { color: #fff; background: var(--ui-brand-dark); border-color: var(--ui-brand-dark); }
.app-body .ui-instore-empty {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 15px;
	box-shadow: var(--ui-shadow-soft);
}
.app-body .ui-instore-empty > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--ui-brand); border-radius: 13px; font-weight: 900; }
.app-body .ui-instore-empty > span img { width: 23px; height: 23px; filter: brightness(0) invert(1); }
.app-body .ui-instore-empty small { color: var(--ui-brand-dark); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.app-body .ui-instore-empty h2 { margin: 4px 0; color: var(--ui-ink); font-size: 18px; }
.app-body .ui-instore-empty p { margin: 0; color: var(--ui-muted); font-size: 10px; }

@media (max-width: 1050px) {
	.app-body .ui-instore-summary { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-instore-operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .ui-instore-operations > div { border-bottom: 1px solid var(--ui-line); }
	.app-body .ui-instore-operations > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 620px) {
	.app-body .ui-instore-summary { grid-auto-flow: row; grid-template-columns: 1fr; }
	.app-body .ui-instore-operations { grid-template-columns: 1fr; }
	.app-body .ui-instore-operations > div,
	.app-body .ui-instore-operations > div:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); }
	.app-body .ui-instore-operations > div:last-child { border-bottom: 0; }
}

/* Full-result summaries and server-paged details. */
.mi-pagination{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0;padding:12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm)}
.mi-pagination button,.mi-export{padding:9px 14px;border:1px solid var(--ui-border);border-radius:8px;color:var(--ui-brand-dark);background:var(--ui-surface);cursor:pointer}
.mi-data-note{font-size:13px;color:var(--ui-muted);line-height:1.5}

/* Staff home: daily work summaries, with the existing network statistics. */
.app-body .sh-home { display: grid; gap: 20px; }
.app-body .sh-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 2px; }
.app-body .sh-eyebrow { color: var(--ui-brand-dark); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.app-body .sh-heading h1 { margin: 6px 0; color: var(--ui-text); font-size: clamp(24px, 3vw, 32px); }
.app-body .sh-heading p, .app-body .sh-detail { margin: 6px 0; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
.app-body .sh-home button { font: inherit; cursor: pointer; }
.app-body .sh-home button:disabled { opacity: .55; cursor: wait; }
.app-body .sh-overview { border: 1px solid var(--ui-brand-dark); border-radius: var(--ui-radius-sm); background: var(--ui-brand-dark); color: #fff; padding: 11px 18px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-body .sh-overview:hover { background: var(--ui-text); }
.app-body .sh-tasks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.app-body .sh-task[data-sh-card='applecheck'].has-work { border-top-color: #cb3545; }
.app-body .sh-task[data-sh-card='applecheck'].has-work .sh-count strong { color: #b52b3b; }
.app-body .sh-task { display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-top-width: 3px; border-radius: var(--ui-radius); background: var(--ui-surface); padding: 20px; box-shadow: var(--ui-shadow-sm); }
.app-body .sh-task.has-work { border-top-color: var(--ui-warning); }
.app-body .sh-task.is-clear { border-top-color: var(--ui-success); }
.app-body .sh-task[data-sh-card='menuuploads'].has-work { border-top-color: #cb3545; }
.app-body .sh-task[data-sh-card='menuuploads'].has-work .sh-count strong { color: #b52b3b; }
.app-body .sh-task header, .app-body .sh-task footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-body .sh-task h2 { margin: 0; font-size: 16px; color: var(--ui-text); }
.app-body .sh-task header button { padding: 3px 0; border: 0; background: transparent; color: var(--ui-muted); font-size: 11px; }
.app-body .sh-task-content { flex: 1; min-height: 112px; padding: 16px 0 12px; }
.app-body .sh-count { display: flex; align-items: baseline; gap: 10px; color: var(--ui-text); }
.app-body .sh-count strong { font-size: 36px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-body .sh-count span { font-size: 12px; }
.app-body .sh-task footer { border-top: 1px solid var(--ui-border); padding-top: 12px; }
.app-body .sh-task footer small { font-size: 10px; color: var(--ui-muted); }
.app-body .sh-task footer button { border: 0; background: transparent; padding: 4px 0; color: var(--ui-brand-dark); font-size: 12px; font-weight: 600; }
.app-body .sh-task-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.app-body .sh-task-links button { border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-muted); color: var(--ui-text); padding: 5px 9px; font-size: 11px; }
.app-body .sh-listing-metrics { display: grid; grid-template-columns: 1fr 1.4fr 1.3fr; gap: 12px; }
.app-body .sh-listing-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ui-text); text-align: left; }
.app-body .sh-listing-metric strong { font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-body .sh-listing-metric span { font-size: 11px; line-height: 1.4; color: var(--ui-muted); }
.app-body .sh-listing-metric.has-work strong { color: #a46608; }
.app-body .sh-listing-metric + .sh-listing-metric { padding-left: 12px; border-left: 1px solid var(--ui-border); }
.app-body .sh-task button:hover { text-decoration: underline; }
.app-body .sh-scope { margin: -12px 2px 0; color: var(--ui-muted); font-size: 10px; }
.app-body .sh-state { color: var(--ui-muted); font-size: 12px; }
.app-body .sh-warning { color: #9a5900; font-size: 12px; }
.app-body .sh-home button:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
.app-body .sh-monitor { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); padding: 12px 16px; box-shadow: var(--ui-shadow-sm); }
.app-body .sh-monitor header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.app-body .sh-monitor h2 { display: inline; margin: 0 12px 0 0; color: var(--ui-text); font-size: 14px; }
.app-body .sh-monitor header small { color: var(--ui-muted); font-size: 10px; white-space: nowrap; }
.app-body .sh-monitor-actions { display: flex; align-items: center; gap: 16px; }
.app-body .sh-monitor-actions button { padding: 3px 0; border: 0; background: transparent; color: var(--ui-brand-dark); font-size: 11px; font-weight: 600; white-space: nowrap; }
.app-body .sh-monitor-actions button:hover { text-decoration: underline; }
.app-body .sh-monitor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.app-body .sh-server { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; border: 1px solid var(--ui-border); border-radius: 6px; padding: 7px 9px; text-align: left; background: var(--ui-surface-muted); color: var(--ui-text); }
.app-body .sh-server strong { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.app-body .sh-server strong::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #738095; }
.app-body .sh-server.is-healthy strong::before { background: var(--ui-success); }
.app-body .sh-server.is-warning strong::before { background: var(--ui-warning); }
.app-body .sh-server.is-failed strong::before { background: #cb3545; }
.app-body .sh-server.is-warning { background: #fff9ed; border-color: #efdab3; }
.app-body .sh-server.is-failed { background: #fff2f3; border-color: #efc6cb; }
.app-body .sh-server-status { font-size: 10px; line-height: 1.35; }
.app-body .sh-monitor .sh-warning { margin: 10px 0 0; }
@media (max-width: 1100px) {
	.app-body .sh-monitor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.app-body .sh-heading { align-items: flex-start; flex-wrap: wrap; }
	.app-body .sh-tasks { grid-template-columns: minmax(0, 1fr); }
	.app-body .sh-task { padding: 16px; }
	.app-body .sh-task-content { min-height: 70px; }
	.app-body .sh-monitor { padding: 14px 16px; }
	.app-body .sh-monitor header { align-items: flex-start; flex-wrap: wrap; }
	.app-body .sh-monitor h2 { display: block; margin-bottom: 4px; }
}
@media (min-width: 701px) and (max-width: 950px) {
	.app-body .sh-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-body .sh-task[data-sh-card='listings'] { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) {
	.app-body .sh-monitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Global front-end additions: load progress, toasts, confirm dialog, focus,
   timeout overlay and small-screen touch targets.
   ========================================================================== */

/* Loading: header and navigation stay visible. A thin progress bar runs while any
   screen is loading, clicks on the content are blocked straight away (double-click
   protection), and the dimmed overlay covers only the content area. */
body.app-body.is-loading::before {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 6000;
	height: 3px;
	background: linear-gradient(90deg, transparent 0, var(--ui-brand) 35%, var(--ui-accent) 70%, transparent 100%);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: ui-progress-slide 1.1s ease-in-out infinite;
	content: "";
	pointer-events: none;
}

@keyframes ui-progress-slide {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

body.app-body.is-loading #maincontent,
body.app-body.is-loading #searchcontent {
	pointer-events: none;
}

body.app-body #loading_screen.pageload {
	left: var(--ui-sidebar-width);
	/* inset sizes the overlay; 100% plus a left offset pushed the centre off-screen */
	width: auto;
	height: auto;
	background: rgba(243, 246, 250, .72);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 900px) {
	body.app-body #loading_screen.pageload {
		top: 72px;
		left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.app-body.is-loading::before {
		background-size: 100% 100%;
		background-color: var(--ui-brand);
		animation: none;
	}
}

/* Focus moved to a screen heading after navigation should not draw a ring for mouse users. */
#maincontent h1[tabindex="-1"]:focus,
#maincontent h1[tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

/* Toasts (MyIntegerUI.toast) */
.ui-toast-region {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99990;
	display: grid;
	gap: 10px;
	width: min(380px, calc(100vw - 36px));
	pointer-events: none;
}

.ui-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 16px;
	color: var(--ui-text);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-left: 4px solid var(--ui-brand);
	border-radius: var(--ui-radius-sm);
	box-shadow: var(--ui-shadow);
	font-size: 14px;
	line-height: 1.45;
	pointer-events: auto;
}

.ui-toast--success { border-left-color: var(--ui-success); }
.ui-toast--warning { border-left-color: var(--ui-warning); }
.ui-toast--error { border-left-color: var(--ui-danger); }
.ui-toast__text { flex: 1 1 auto; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }

.ui-toast__action,
.ui-toast__close {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 6px 12px;
	color: var(--ui-brand-dark);
	background: transparent;
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ui-toast__close { min-width: 36px; padding: 0; color: var(--ui-muted); font-size: 22px; line-height: 1; }
.ui-toast__action:hover,
.ui-toast__close:hover { background: var(--ui-surface-muted); }

/* Confirmation dialog (MyIntegerUI.confirm) */
.ui-dialog-scrim {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(15, 23, 42, .5);
}

.ui-dialog {
	width: min(440px, 100%);
	padding: 24px;
	color: var(--ui-text);
	background: var(--ui-surface);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
}

.ui-dialog h2 { margin: 0 0 10px; font-size: 18px; }
.ui-dialog__text { margin: 0 0 20px; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ui-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }

.ui-dialog__cancel,
.ui-dialog__ok {
	min-height: 44px;
	min-width: 96px;
	padding: 9px 18px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.ui-dialog__cancel { color: var(--ui-text); background: var(--ui-surface-muted); }
.ui-dialog__ok { color: #fff; background: var(--ui-brand-dark); border-color: var(--ui-brand-dark); }
.ui-dialog__ok.is-danger { background: var(--ui-danger); border-color: var(--ui-danger); }

/* Session timeout when the page holds unsaved changes: cover, do not destroy. */
.ui-timeout-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
}

.ui-timeout-overlay .timeout-page__card p { margin: 0 0 14px; }
.timeout-page__secondary { min-height: 40px; padding: 8px 15px; color: var(--ui-text); background: var(--ui-surface-muted); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font-weight: 600; cursor: pointer; }

/* Small screens: comfortable touch targets for navigation links and save bars. */
@media (max-width: 900px) {
	.app-body .mainnav ul.dropdown li a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.savebar .btn,
	.controls > .btn {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Channel cards filter the live-orders shop list. */
body.app-body[data-page="liveview"] .ui-data-table.ui-grid-ready .tablecontent .ui-data-row.ui-live-order-card.ui-live-filtered,
.app-body .ui-live-filtered { display: none !important; }
.app-body .ui-live-channel-guide[role="button"] { cursor: pointer; }
.app-body .ui-live-channel-guide[role="button"]:hover { border-color: #8ec9df; }
.app-body .ui-live-channel-guide[aria-pressed="true"] { border-color: #147faa; box-shadow: 0 0 0 2px #147faa33; background: #eef8fd; }
.app-body .ui-live-channel-guide[role="button"]:focus-visible { outline: 3px solid #f2b347; outline-offset: 2px; }
.app-body .ui-live-channel-clear { align-self: center; border: 0; background: none; color: #147faa; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 4px 6px; }
.app-body .ui-live-filter-empty { margin: 14px 4px 4px; padding: 12px 14px; border-radius: 10px; background: #f4f8fc; border: 1px dashed #c8d8e6; color: #526b80; font-size: 13px; }

/* Staff home: kiosk payment workers. */
.app-body .sh-kiosk { margin-top: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); padding: 12px 16px; box-shadow: var(--ui-shadow-sm); }
.app-body .sh-kiosk.has-work { border-color: #efc6cb; }
.app-body .sh-kiosk header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.app-body .sh-kiosk h2 { display: inline; margin: 0 12px 0 0; color: var(--ui-text); font-size: 14px; }
.app-body .sh-kiosk header small { color: var(--ui-muted); font-size: 10px; white-space: nowrap; }
.app-body .sh-kiosk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.app-body .sh-kiosk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; }
.app-body .sh-kiosk-clear { color: var(--ui-success); font-weight: 600; }
.app-body .sh-kiosk-attention { border: 1px solid #efc6cb; border-radius: 6px; background: #fff2f3; color: #b52b3b; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.app-body .sh-kiosk-attention:hover { background: #fde6e9; }
.app-body .sh-kiosk-banner { margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; background: #e4f5ed; color: #187851; }
.app-body .sh-kiosk-banner.is-warn { background: #fff1ce; color: #7a5710; }
.app-body .sh-kiosk-banner.is-down { background: #d8362a; color: #fff; font-size: 15px; }
.app-body .sh-kiosk.has-work { border-color: #d8362a; }

.timeout-page__card button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.timeout-page__card button:disabled { opacity: .85; cursor: progress; }
.timeout-page__spinner { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: timeout-spin .7s linear infinite; }
@keyframes timeout-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .timeout-page__spinner { animation-duration: 2s; } }

/* Login: keep me signed in */
.login-remember { margin: 2px 0 10px; text-align: left; }
.login-remember label { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #33465c; cursor: pointer; }
.login-remember input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #166b96; }
.login-remember small { display: block; margin: 4px 0 0 25px; color: #6a7f91; font-size: 11px; }
.app-body .sh-server-time { color: var(--ui-muted); font-size: 10px; font-weight: 500; }
.app-body .sh-server.is-slow { background: #ffeaf1; border-color: #f2b2c8; }
.app-body .sh-server-time.is-slow { color: #c2275a; font-weight: 700; }
.app-body .ui-team-added { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 10px; }
.app-body .ui-team-muted { color: var(--ui-muted); font-size: 12px; }
.app-body .ui-team-devices summary { cursor: pointer; font-weight: 700; color: #0873a7; list-style: none; }
.app-body .ui-team-devices summary::-webkit-details-marker { display: none; }
.app-body .ui-team-devices summary small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 10px; font-weight: 500; }
.app-body .ui-team-devices ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.app-body .ui-team-devices li { padding: 7px 9px; border-radius: 8px; background: #f1f7fb; }
.app-body .ui-team-devices li strong { display: block; font-size: 11px; }
.app-body .ui-team-devices li small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 10px; white-space: normal; }
.app-body .ui-team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.app-body .ui-team-stats > div { padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.app-body .ui-team-stats span { display: block; color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.app-body .ui-team-stats strong { display: block; margin: 3px 0 1px; color: var(--ui-text); font-size: 24px; line-height: 1.2; }
.app-body .ui-team-stats small { color: var(--ui-muted); font-size: 11px; }

/* In-store: cancelled orders (status 8) stand out */
.app-body .ui-instore-status.is-cancelled > span { color: #fff; background: #d8362a; font-weight: 900; }
.app-body .ui-instore-orders-table .tablecontent > .ui-instore-order-row.is-cancelled-row { background: #fff1ef; box-shadow: inset 4px 0 0 #d8362a; }
.app-body .ui-instore-orders-table .tablecontent > .ui-instore-order-row.is-cancelled-row .ui-instore-total { color: #a72c26; text-decoration: line-through; }
.app-body .ui-instore-orders-table .tablecontent > .ui-instore-order-row.is-cancelled-row .ui-instore-order-number strong { color: #a72c26; }
.app-body .ui-instore-summary .ui-instore-cancelled-card { background: #fff1ef; border-color: #f0b8b0; }
.app-body .ui-instore-summary .ui-instore-cancelled-card strong { color: #c42b1f; }
.app-body .ui-paylink-order-status.is-status-8 { color: #fff; background: #d8362a; }

.app-body .shop-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.app-body .shop-toolbar .shop-create { min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ui-brand, #2e98d4); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.app-body .shop-toolbar .shop-create:hover { filter: brightness(.95); }
.app-body .shop-toolbar .shop-create:focus-visible { outline: 3px solid #bfe3f7; outline-offset: 2px; }

/* Force Close list on a phone: one compact card per shop (name, licence, hours strip, overridden switch, edit button). */
@media (max-width: 900px) {
	body.app-body .hours.ui-data-table .ui-data-row.hour {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas: "shop shop shop more" "lic lic lic more" "open close otoday ctoday" "over over over over";
		align-items: start;
	}
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem { min-height: 0 !important; padding: 10px 14px !important; border-bottom: 0 !important; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(1) { grid-area: lic; padding: 0 14px 12px !important; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(2) { grid-area: shop; padding: 14px 8px 0 14px !important; color: var(--ui-text); font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(1)::before { display: inline; margin: 0; font-size: 12px; letter-spacing: 0; text-transform: none; content: "Licence "; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(2)::before { display: none; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(3) { grid-area: open; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(4) { grid-area: close; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(5) { grid-area: otoday; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(6) { grid-area: ctoday; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(n+3):nth-child(-n+6) { padding: 10px 6px 10px 14px !important; border-top: 1px solid #edf1f6; font-variant-numeric: tabular-nums; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(n+3):nth-child(-n+6)::before { font-size: 8px; white-space: nowrap; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(7) { grid-area: over; display: flex !important; align-items: center; justify-content: space-between; border-top: 1px solid #edf1f6; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(7)::before { margin: 0; font-size: 11px; content: "Overridden today"; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(8) { grid-area: more; padding: 12px 14px 0 0 !important; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(8)::before { display: none; }
	body.app-body .hours.ui-data-table .ui-data-row.hour > .menuitem:nth-child(8) img.cross { display: block; width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: 12px; background: #f3f8fc; cursor: pointer; }
}

/* Close button in the Apple certificate editor header (closes in place, no reload). */
.app-body .ui-credential-editor > h2 { position: relative; padding-right: 64px !important; }
.app-body .ui-credential-editor > h2 .ui-credential-close { position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; }
.app-body .ui-credential-editor > h2 .ui-credential-close:hover { background: rgba(255,255,255,.24); }
.app-body .ui-credential-editor > h2 .ui-credential-close:focus-visible { outline: 2px solid #84dcff; outline-offset: 2px; }

/* Hosted website editor: Custom CSS box. */
.app-body textarea.ui-custom-css { display: block; box-sizing: border-box; width: 100%; min-height: 240px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 10px; background: #f7fafc; color: var(--ui-text); font: 13px/1.5 Consolas, "Courier New", monospace; tab-size: 2; resize: vertical; white-space: pre; overflow: auto; }

/* Push editor: the message fields sit in two cards (in-app push with emoji, notification without), then one card for artwork and promo code. */
.app-body .ui-push-editor .stage1 .ui-push-group { gap: 12px; }
.app-body .ui-push-editor .stage1 .ui-push-group--wide { grid-column: 1 / -1; }
.app-body .ui-push-editor .stage1 .ui-push-group > h3 { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 700; }
.app-body .ui-push-editor .stage1 .ui-push-group__hint { margin: -6px 0 2px; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
.app-body .ui-push-editor .stage1 .ui-push-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-body .ui-push-editor .stage1 .ui-push-field > .title { margin: 0; color: var(--ui-text); font-size: 11px; font-weight: 700; text-align: left; }
.app-body .ui-push-editor .stage1 .ui-push-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.app-body .ui-push-editor .stage1 .ui-push-field--check { flex-direction: row; align-items: center; gap: 10px; }
.app-body .ui-push-editor .stage1 .ui-push-field--check .inputbox { width: auto; min-height: 0; }
.app-body .ui-push-editor .stage1 .ui-push-field--check input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; padding: 0; }
@media (max-width: 900px) { .app-body .ui-push-editor .stage1 .ui-push-options { grid-template-columns: 1fr; } }

/* Push list: the status chip and the View button share one cell and wrap instead of running into the next column; empty dates read as a dash. */
@media (min-width: 901px) {
	.app-body .ui-push-list .tablecontent > .shop > .menuitem[data-label="Status"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
	.app-body .ui-push-list .tablecontent > .shop > .menuitem[data-label="Status"] .ui-push-view--row { margin: 0; }
}
.app-body .ui-push-list .tablecontent > .shop > .menuitem.ui-push-empty-cell { color: var(--ui-muted); }

/* Push editor steps: a finished step can be clicked to go back to it. */
.app-body .ui-push-steps li.is-clickable { cursor: pointer; transition: background-color .15s ease; }
.app-body .ui-push-steps li.is-clickable:hover { background: rgba(255, 255, 255, .7); }
.app-body .ui-push-steps li.is-clickable:hover strong { text-decoration: underline; }
.app-body .ui-push-steps li.is-clickable:focus-visible { outline: 2px solid #087fae; outline-offset: 2px; }
/* View as customer (staff, read-only) */
body.app-body .ui-impersonate { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 9px 16px; background: #7a2e0e; color: #fff; font-size: 13px; line-height: 1.4; text-align: center; position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); z-index: 99999; }
body.app-body .ui-impersonate strong { font-weight: 700; }
body.app-body .ui-impersonate button { border: 1px solid rgba(255,255,255,.7); border-radius: 6px; background: #fff; color: #7a2e0e; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
body.app-body .ui-view-as { background: #166b96; color: #fff; }

/* Blocked contacts (customer screen) */
.app-body .ui-bl-page { display: grid; gap: 14px; }
.app-body .ui-bl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.app-body .ui-bl-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; color: #33506b; background: #fff; border: 1px solid #d5e1ec; border-radius: 999px; font-weight: 700; cursor: pointer; }
.app-body .ui-bl-tabs button span { min-width: 22px; padding: 2px 7px; color: #176c94; background: #e6f4fb; border-radius: 999px; font-size: 11px; text-align: center; }
.app-body .ui-bl-tabs button.is-active { color: #fff; background: #166b96; border-color: #166b96; }
.app-body .ui-bl-tabs button.is-active span { color: #166b96; background: #fff; }
.app-body .ui-bl-panel { display: grid; gap: 12px; }
.app-body .ui-bl-panel[hidden] { display: none; }
.app-body .ui-bl-add { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px; background: #fff; border: 1px solid #d5e1ec; border-radius: 12px; }
.app-body .ui-bl-add label { display: grid; gap: 5px; flex: 1 1 240px; min-width: 0; font-size: 12px; font-weight: 700; color: #33506b; }
.app-body .ui-bl-add input[type=text], .app-body .ui-bl-add select { box-sizing: border-box; width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; border: 1px solid #c9d7e4; border-radius: 9px; background: #fff; }
.app-body .ui-bl-submit { min-height: 42px; padding: 0 22px; color: #fff; background: #166b96; border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }
.app-body .ui-bl-note { margin: 0; color: #5d7388; font-size: 12px; line-height: 1.5; }
.app-body .ui-bl-feedback { margin: 0; padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.app-body .ui-bl-feedback.is-ok { color: #187851; background: #e4f5ed; }
.app-body .ui-bl-feedback.is-error { color: #a12626; background: #fdecec; }
.app-body .ui-bl-search input { box-sizing: border-box; width: min(360px, 100%); min-height: 40px; padding: 8px 12px; font: inherit; border: 1px solid #c9d7e4; border-radius: 9px; }
.app-body .ui-bl-table { display: grid; background: #fff; border: 1px solid #d5e1ec; border-radius: 12px; overflow: hidden; }
.app-body .ui-bl-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 110px; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #e6edf4; }
.app-body .ui-bl-row--global { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); }
.app-body .ui-bl-head { color: #5d7388; background: #f4f8fb; border-top: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-body .ui-bl-shop { display: grid; min-width: 0; }
.app-body .ui-bl-shop span { color: #6b8095; font-size: 12px; overflow-wrap: anywhere; }
.app-body .ui-bl-value { min-width: 0; font-family: Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.app-body .ui-bl-act { text-align: right; }
.app-body .ui-bl-remove { padding: 7px 14px; color: #a12626; background: #fff5f5; border: 1px solid #efc9c9; border-radius: 8px; font-weight: 700; cursor: pointer; }
.app-body .ui-bl-remove:disabled { opacity: .6; cursor: default; }
.app-body .ui-bl-empty { margin: 0; padding: 22px; color: #5d7388; text-align: center; background: #fff; border: 1px dashed #c9d7e4; border-radius: 12px; }
@media (max-width: 640px) {
	.app-body .ui-bl-row, .app-body .ui-bl-row--global { grid-template-columns: 1fr; gap: 6px; }
	.app-body .ui-bl-head { display: none; }
	.app-body .ui-bl-act { text-align: left; }
}
.app-body .ui-bl-row--staff { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 170px; }
.app-body .ui-bl-gedit, .app-body .ui-bl-gsave, .app-body .ui-bl-gcancel { padding: 7px 14px; color: #176c94; background: #f1f8fc; border: 1px solid #c4dceb; border-radius: 8px; font-weight: 700; cursor: pointer; }
.app-body .ui-bl-gremove { padding: 7px 14px; color: #a12626; background: #fff5f5; border: 1px solid #efc9c9; border-radius: 8px; font-weight: 700; cursor: pointer; }
.app-body .ui-bl-gremove:disabled { opacity: .6; cursor: default; }
.app-body .ui-bl-inline { box-sizing: border-box; width: 100%; min-height: 38px; padding: 6px 10px; font: inherit; font-family: Consolas, monospace; border: 1px solid #c9d7e4; border-radius: 8px; }
@media (max-width: 640px) { .app-body .ui-bl-row--staff { grid-template-columns: 1fr; } }

/* Promo codes: a single licence needs no summary row. */
.app-body #promocodes > .shops.promo.ui-promo-single .tableheader,
.app-body #promocodes > .shops.promo.ui-promo-single .tablecontent > .shop { display: none !important; }

.app-body #promocodes .content > .contentheader.ui-promo-header-empty { display: none !important; }


/* Queued reports: readable multi-line SQL and a cancel button. */
.app-body .queued.ui-data-table { --ui-grid-template: 64px 140px minmax(200px, 1fr) minmax(340px, 3fr) 96px !important; }
.app-body .queued .ui-q-sql { font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; color: #2b3b4b; background: #f4f7fa; border: 1px solid #e1e8ee; border-radius: 8px; padding: 8px 10px; white-space: normal; overflow-wrap: anywhere; }
.app-body .queued .ui-q-ind { display: inline-block; width: 18px; }
.app-body .queued .ui-q-cancel { font: inherit; font-weight: 600; font-size: 12px; color: #b4432f; background: #fff; border: 1px solid #e3b7ad; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.app-body .queued .ui-q-cancel:hover:not(:disabled) { background: #fcefeb; }
.app-body .queued .ui-q-cancel:disabled { opacity: .5; cursor: default; }