/* =============================================================================
   MotoVend Admin — Base Styles
   MotoVend Admin — all classes prefixed mva-
   ============================================================================= */

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

[hidden] { display: none !important; }

/* Work Sans — self-hosted, the same file the marketing site serves (variable
   weight 300–700, latin). Fetched only by a page that asks for the family,
   which today is the sign-up page (--mva-brand-font): the admin itself stays
   on the system stack and never downloads it. */
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(../fonts/work-sans/work-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ── Admin shell colours ───────────────────────────────────────────────── */
	--mva-sidebar-bg:    #1a1f2e;
	--mva-sidebar-text:  #8892a4;
	--mva-sidebar-hover: #ffffff;
	--mva-sidebar-active:#ffffff;
	--mva-sidebar-accent:#3b82f6;
	--mva-topbar-bg:     #ffffff;
	--mva-topbar-border: #e5e7eb;
	--mva-body-bg:       #f3f4f6;
	--mva-sidebar-width: 220px;
	--mva-text-white:	#FFFFFF;

	/* ── MotoVend admin colours ─────────────────────────────────────────── */
	--mv-admin-accent:       #2c3c6d;
	--mv-admin-accent-hover: #1b3a97;
	--mv-admin-accent-dim:   rgba(232, 50, 10, 0.1);
	/* Success token — Publish buttons, "verified" badges, positive-action affordances.
	   Distinct from --mv-admin-accent (orange) so a "publish" green can stand apart from
	   the standard primary-action orange in the same surface. */
	--mv-admin-success:       #44bc96;
   	--mv-admin-success-hover: #24a47c;
	--mv-admin-success-dim:   #eefbf7;
	--mv-admin-success-text:   #FFFFFF;
	   	   
	--mv-admin-info:       #2f73d6;
	--mv-admin-info-hover: #468aec;
	--mv-admin-info-dim:   #e0ecfc;
	--mv-admin-info-text:  #FFFFFF;
	
	--mv-admin-warning:       #ffc107;
	--mv-admin-warning-hover: #ffca2c;
	--mv-admin-warning-dim:   #fff7e3;
	--mv-admin-warning-text:  #000000;
	
	--mv-admin-danger:       #dc3545;
	--mv-admin-danger-hover: #bb2d3b;
	--mv-admin-danger-dim:   #f5dfe1;
	--mv-admin-danger-text:  #FFFFFF;
	
	--mv-admin-neutral:       #e5e5e5;
	--mv-admin-neutral-hover: #ededed;
	--mv-admin-neutral-dim:   #f3f3f3;
	--mv-admin-neutral-text:  #333333;
	
	--mv-admin-dark:       #272727;
	--mv-admin-dark-hover: #000000;
	--mv-admin-dark-dim:   #f2f2f2;
	--mv-admin-dark-text:  #FFFFFF;
	
	--mv-admin-text:         #111827;
	--mv-admin-text-secondary: #6b7280;
	--mv-admin-border:       #e5e7eb;
	--mv-admin-surface:      #ffffff;
	--mv-admin-surface-alt:  #f9fafb;
	--mv-admin-radius:       6px;
	--mv-admin-radius-lg:    10px;
	--mv-admin-sidebar-item: #e8320a;
	--mv-admin-vrm: #fdd500;
	--mv-admin-vrm-border: #414141;

	/* ── Typography ─────────────────────────────────────────────────────── */
	--admin-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* ── Brand — the front door ─────────────────────────────────────────────
	   The sign-up page, and the navy behind every auth page. Copied from the
	   marketing site's assets/style.css; the token each value came from is named
	   beside it. These are NOT the admin's own accent / success colours above
	   and must not be swapped for them — they exist so the pages a dealer sees
	   before logging in match the site that sent them there.
	   /admin/assets/css/platform-root.css carries the same values for the
	   landing page; change one, change the other. */
	--mva-brand-navy-deep:    #0A1A2E;                    /* --color-primary-dark */
	--mva-brand-navy:         #1f3065;                    /* --color-primary */
	--mva-brand-mint:         #00EAAD;                    /* --color-accent */
	--mva-brand-mint-hover:   #13ffc1;                    /* --color-accent-hover */
	--mva-brand-mint-ink:     #00523d;                    /* --color-accent-dark — text on mint */
	--mva-brand-band:         #f3f4f8;                    /* --color-light */
	--mva-brand-on-navy:      rgba(255, 255, 255, 0.75);  /* footer text (a literal there) */
	--mva-brand-on-navy-line: rgba(255, 255, 255, 0.22);  /* .mv-hero-panel border (a literal there) */
	--mva-brand-focus:        rgba(31, 48, 101, 0.14);    /* --mva-brand-navy at 14% — input focus ring */
	--mva-brand-font:         'Work Sans', var(--admin-font);

	/* ── Design system v2 (admin beautify) ───────────────────────────────────
	   Elevation, surfaces and a disciplined accent-tint set. Reference these
	   tokens from component classes — never inline raw shadows/colours. */
	--mva-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.07);
	--mva-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 8px 22px rgba(16, 24, 40, 0.10);
	--mva-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.06);
	--mva-radius-xl: 16px;
	--mva-surface-sunken: #eef1f5;
	/* Dark "feature" panel for a single headline metric. */
	--mva-feature-bg:    linear-gradient(135deg, #1a1f2e 0%, #2b3457 100%);
	--mva-feature-text:  #ffffff;
	--mva-feature-muted: #9aa6c0;
	--mva-feature-line:  rgba(255, 255, 255, 0.12);
	/* Stat-tile accent tints (top-stripe + figure). One disciplined palette. */
	--mva-tint-accent:  #e8320a;
	--mva-tint-success: #44bc96;
	--mva-tint-info:    #2f73d6;
	--mva-tint-warning: #d9870a;
	--mva-tint-neutral: #9ca3af;
	--mva-tint-danger:  #dc2626;
	/* Dim tint fills — icon chips, inline notices, soft washes. */
	--mva-tint-accent-dim:  #fcf2f0;
	--mva-tint-success-dim: #eefbf7;
	--mva-tint-success-dim-trans: rgba(68, 188, 150, 0.12);
	--mva-tint-info-dim:    #f2f5fc;
	--mva-tint-warning-dim: #fbf7f1;
	--mva-tint-danger-dim:  #fcf2f0;
	--mva-tint-neutral-dim: #f3f4f5;
	--mva-youtube: #ff0000;   /* YouTube brand red (one-off brand colour token) */
	/* "Needs attention" amber wash card. */
	--mva-attention-bg:     var(--mva-tint-accent-dim);
	--mva-attention-border: var(--mva-tint-accent);
	/* The page builder's dim behind an open settings drawer. Light on purpose:
	   the canvas behind it shows the result of Apply Changes. */
	--mva-drawer-scrim: rgba(15, 23, 42, 0.35);
}

/* Stop wide content (the stock-list table) scrolling the whole page horizontally.
   MUST be `hidden`, not `clip`, on the root <html>: the CSS spec excludes `clip`
   from root→viewport overflow propagation, so `clip` here is silently ignored and
   the page still scrolls. `hidden` propagates to the viewport and actually clips. */
html { overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--admin-font);
	font-size: 14px;
	color: var(--mv-admin-text);
	background: var(--mva-body-bg);
	/* 🚨 `clip`, NOT `hidden` — and the difference is load-bearing for every
	   position:sticky element on the page.

	   `overflow-x: hidden` on <body> forces the computed overflow-y to `auto`,
	   which makes BODY a scroll container. Sticky descendants then resolve
	   against body rather than the viewport, and since the viewport is what
	   actually scrolls, they never stick — they simply scroll away.
	   `overflow-x: clip` clips without creating a scroll container, so both
	   behaviours are preserved.

	   Measured in a browser rather than reasoned about, because the two rules
	   look interchangeable. Scrolled to y=1200 with a sticky top:70 sidebar:
	     body overflow-x: hidden  ->  side.top = -1130   (gone off the top)
	     body overflow-x: clip    ->  side.top =    70   (stuck, correct)
	   And the clip still holds: scrollTo(500,0) leaves scrollX at 0 with either.

	   🚨 Do NOT "simplify" this by deleting the line and relying on the <html>
	   rule above. That was tried and measured: with body's rule removed the page
	   really does scroll horizontally (scrollTo(500,0) -> scrollX 500). The root
	   rule propagates to the viewport but does not clip body's own box.
	   The reason `clip` is wrong on <html> and right here is the same spec
	   quirk, read in both directions: clip is excluded from root->viewport
	   propagation, so it is inert up there and exactly right down here. */
	overflow-x: clip;
}

a { color: var(--mv-admin-accent); text-decoration: none; }
a:hover { color: var(--mv-admin-accent-hover); }

/* =============================================================================
   MotoVend ADMIN SHELL LAYOUT
   ============================================================================= */

.mva-shell {
	display: flex;
	min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.mva-sidebar {
	width: var(--mva-sidebar-width);
	background: var(--mva-sidebar-bg);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100;
	overflow-y: auto;
}

.mva-sidebar-brand {
	padding: 20px 20px 16px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.5px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin-bottom: 8px;
}

.mva-sidebar-logo-link { display: block; line-height: 0; }
/* .mva-sidebar-logo-link img { filter: brightness(0) invert(1); opacity: 0.9; } */
.mva-sidebar-logo-link img { opacity: 0.9; }
.mva-sidebar-logo-link:hover img { opacity: 1; }

.mva-nav {
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--mva-sidebar-text);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}

.mva-nav-item:hover {
	background: rgba(255,255,255,0.06);
	color: var(--mva-sidebar-hover);
}

.mva-nav-item:hover svg { opacity: 1; }

.mva-nav-item.active {
	/* background: var(--mva-tint-success); */
	color: var(--mva-sidebar-active);
}

.mva-nav-item.active i  {
	color: var(--mva-tint-success);
}

.mva-nav-item.active svg { opacity: 1; }

.mva-mt-3 {
	margin-top: 1rem;
}

.mva-mb-3 {
	margin-bottom: 1rem;
}

.mva-my-3 {
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.mva-ms-2 {
	margin-left: 0.5rem;
}

.mva-ms-3 {
	margin-left: 1rem;
}

.mva-me-2 {
	margin-right: 0.5rem;
}

.mva-me-3 {
	margin-right: 1rem;
}

.rounded {
	border-radius: var(--mv-admin-radius);
}

.rounded-lg {
	border-radius: var(--mv-admin-radius-lg);
}

/* Website nav item — MotoVend accent */
.mva-nav-item--website {
	margin-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 14px;
	color: #ff6b4a;
}

.mva-nav-item--website:hover,
.mva-nav-item--website.active {
	background: rgba(232, 50, 10, 0.15);
	color: #ff8c73;
}

/* ── Expandable nav group ────────────────────────────────────────────────────── */
.mva-nav-group-toggle {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--admin-font);
	justify-content: flex-start;
}

.mva-nav-chevron {
	width: 14px;
	height: 14px;
	margin-left: auto;
	flex-shrink: 0;
	transition: transform 0.2s;
	opacity: 0.5;
}

.mva-nav-group-toggle.open .mva-nav-chevron {
	transform: rotate(180deg);
}

.mva-nav-sub {
	display: none;
	flex-direction: column;
	gap: 1px;
	padding: 2px 0 4px 36px;
}

.mva-nav-sub.open {
	display: flex;
}

.mva-nav-sub-item {
	display: block;
	padding: 7px 10px;
	border-radius: 5px;
	color: var(--mva-sidebar-text);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.mva-nav-sub-item:hover {
	background: rgba(255,255,255,0.06);
	color: var(--mva-sidebar-hover);
}

.mva-nav-sub-item.active {
	color: var(--mva-text-white);
}

/* ── Main area ───────────────────────────────────────────────────────────────── */
.mva-main {
	margin-left: var(--mva-sidebar-width);
	flex: 1;
	min-width: 0; /* allow the main column to shrink below its content width so wide
	                 tables scroll inside their card instead of overflowing the page
	                 (without this, min-width:auto floors main at content width and the
	                 sidebar margin pushes it past the viewport) */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mva-topbar {
	background: var(--mva-topbar-bg);
	border-bottom: 1px solid var(--mva-topbar-border);
	padding: 0 24px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 50;
	gap: 12px;
}

i {
	font-size: 1rem;
}

i.icon-lg {
	font-size: 1.2rem;
}

i.icon-xl {
	font-size: 1.75rem;
}

.mva-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mva-topbar-badges {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	margin-top: 10px;
	padding: 0 1rem;
	flex-direction: row-reverse;
}
.mva-topbar-overlimit {
	text-decoration: none;
	cursor: pointer;
}
.mva-topbar-overlimit:hover { opacity: 0.85; }
.mva-overlimit-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fffbeb;
	border-bottom: 1px solid #fcd34d;
	padding: 12px 1.5rem;
	font-size: 13px;
	color: #92400e;
	line-height: 1.5;
	margin: 1rem 0;
	justify-content: center;
}
.mva-overlimit-panel p { margin: 0; }
.mva-overlimit-panel a { color: #92400e; font-weight: 600; text-decoration: underline; }
.mva-overlimit-panel a:hover { opacity: 0.8; }

/* Install-template guardrail — visible on every admin page when on a tenant
   flagged is_template=1. Distinct indigo palette so it doesn't visually
   collide with the warning-orange overlimit panel; still subtle enough to
   leave the rest of the UI breathing room. */
.mva-template-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #eef2ff;
	border-bottom: 1px solid #c7d2fe;
	padding: 12px 1.5rem;
	font-size: 13px;
	color: #3730a3;
	line-height: 1.5;
	margin: 1rem 0;
	justify-content: center;
}
.mva-template-panel p { margin: 0; max-width: 880px; }
.mva-template-panel strong { color: #312e81; }
.mva-template-panel svg { color: #4f46e5; }

/* AutoTrader sandbox-mode banner — visible on every admin page when
   MV_AUTOTRADER_SANDBOX=true in mv-config.php. Distinct orange palette
   between the amber overlimit panel (#fcd34d) and pure danger-red, so
   it's unmistakable without being alarmist. Operational-state notice,
   not a breakage warning. */
.mva-sandbox-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff7ed;
	border-bottom: 1px solid #fdba74;
	padding: 12px 1.5rem;
	font-size: 13px;
	color: #9a3412;
	line-height: 1.5;
	margin: 1rem 0;
	justify-content: center;
}
.mva-sandbox-panel p { margin: 0; max-width: 880px; }
.mva-sandbox-panel strong { color: #7c2d12; }
.mva-sandbox-panel svg { color: #ea580c; }

/* Auto-enabled vehicle-type banner — appears when AT sync provisions a
   vehicle type the dealer hadn't manually enabled. Distinct blue palette
   to read as informational (not warning, not error); Dismiss button on
   the right collapses it via the dismiss endpoint. One panel per
   pending-review type, stacked. Self-contained — the parent doesn't need
   to know about how many will render. */
.mva-autoenabled-panel {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #eff6ff;
	border-bottom: 1px solid #bfdbfe;
	padding: 12px 1.5rem;
	font-size: 13px;
	color: #1e3a8a;
	line-height: 1.5;
	margin: 1rem 0;
}
.mva-autoenabled-panel p { margin: 0; flex: 1; max-width: 880px; }
.mva-autoenabled-panel strong { color: #1e40af; }
.mva-autoenabled-panel svg { color: #1d4ed8; }
.mva-autoenabled-panel a { color: #1d4ed8; font-weight: 600; text-decoration: underline; }
.mva-autoenabled-panel a:hover { opacity: 0.8; }
.mva-autoenabled-dismiss {
	background: transparent;
	border: 1px solid #93c5fd;
	color: #1d4ed8;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}
.mva-autoenabled-dismiss:hover:not(:disabled) { background: #dbeafe; }
.mva-autoenabled-dismiss:disabled { opacity: 0.6; cursor: default; }

/* AT import-pull pending — tenant-wide informational banner that appears when
   any at_inbound stock at an outbound-AT location is still being mirrored
   to MV (at_payload_hash IS NULL). Cyan palette distinguishes it visually
   from the existing blue autoenabled-panel so two info banners stack
   without colour collision. No dismiss — auto-clears once every at_inbound
   stock has completed its pull (typically minutes during connect-time
   onboarding). Mirrors layout of the other operational-state panels. */
.mva-import-pull-panel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #ecfeff;
	border-bottom: 1px solid #a5f3fc;
	padding: 12px 1.5rem;
	font-size: 13px;
	color: #155e75;
	line-height: 1.5;
	margin: 1rem 0;
	justify-content: center;
}
.mva-import-pull-panel p { margin: 0; max-width: 880px; }
.mva-import-pull-panel strong { color: #0e4f5b; }

/* Per-stock import-pending state — replaces the stock edit form entirely
   when the gate returns state='pending' for this specific vehicle. Friendly
   centred card with refresh icon + auto-reload countdown. Shares cyan
   palette with the tenant-wide panel so dealers recognise the AT-import-
   in-progress visual language across both surfaces. */
.mva-stock-import-pending {
	max-width: 640px;
	margin: 2rem auto;
	padding: 2.5rem 2rem;
	text-align: center;
	background: #ecfeff;
	border: 1px solid #a5f3fc;
}
.mva-stock-import-pending-icon {
	color: #0e7490;
	margin: 0 auto 1rem;
	animation: mva-spin 2s linear infinite;
}
@keyframes mva-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.mva-stock-import-pending h2 {
	font-size: 18px;
	font-weight: 600;
	color: #0e4f5b;
	margin: 0 0 0.75rem;
}
.mva-stock-import-pending p {
	font-size: 14px;
	color: #155e75;
	line-height: 1.6;
	margin: 0 0 1rem;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.mva-stock-import-pending-meta {
	font-size: 13px;
	color: #0e7490;
}
.mva-stock-import-pending-meta #mva-import-countdown {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.mva-stock-import-pending-actions {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Per-stock timed-out warning — inline banner ABOVE the form when the
   6h escape hatch has fired (form remains editable but dealer should
   double-check anything that looks off). Amber palette matches the
   overlimit-panel — both are "be careful, something's not quite right"
   states the dealer can still work past. */
.mva-stock-import-stale {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 4px;
	padding: 12px 16px;
	font-size: 13px;
	color: #92400e;
	line-height: 1.5;
	margin: 0 0 1rem;
}
.mva-stock-import-stale p { margin: 0; flex: 1; }
.mva-stock-import-stale strong { color: #78350f; }
.mva-stock-import-stale svg { color: #b45309; flex-shrink: 0; }

/* AT-inbound listing lock — informational (blue), shown above the stock edit
   form when AT owns the listing and only the cost base is editable. */
.mva-stock-listing-locked {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 4px;
	padding: 12px 16px;
	font-size: 13px;
	color: #1e40af;
	line-height: 1.5;
	margin: 0 0 1rem;
}
.mva-stock-listing-locked strong { color: #1e3a8a; }
.mva-stock-listing-locked svg { color: #2563eb; flex-shrink: 0; }

/* Listing-locked (AT-inbound) stock form — hide the AT-owned cards entirely.
   Vehicle Details stays visible (read-only, JS-disabled) for dealer context;
   Cost Base, Publishing and the Status card's Featured + Save remain editable.
   Hiding via CSS (vs not rendering) keeps the form-render path untouched and
   avoids a flash — admin.css is in <head>. */
.mva-stock-form--locked #registration-lookup,
.mva-stock-form--locked #specifications,
.mva-stock-form--locked #history-provenance,
.mva-stock-form--locked #trim-condition,
.mva-stock-form--locked #features,
.mva-stock-form--locked #strapline,
.mva-stock-form--locked #selling-points,
.mva-stock-form--locked #description,
.mva-stock-form--locked #images,
.mva-stock-form--locked #video {
	display: none;
}

.mva-page-title-bar {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	color: var(--mv-admin-text);
}

.mva-content {
	padding: 24px;
	flex: 1;
}

.mva-toolbar {
	justify-content: space-between;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

.mva-toolbar-left {
	display: inline-flex;
}

.mva-toolbar-right {
}

/* ── Dummy notice ────────────────────────────────────────────────────────────── */
.mva-dummy-notice {
	background: #fefce8;
	border: 1px solid #fde68a;
	border-radius: var(--mv-admin-radius);
	padding: 16px 20px;
	color: #92400e;
	font-size: 13px;
	max-width: 480px;
}

.mva-dummy-notice p { margin: 0 0 6px; }
.mva-dummy-notice p:last-child { margin: 0; }

/* =============================================================================
   MOTOVEND ADMIN — SHARED COMPONENTS
   Used within the /mv-admin/ section.
   ============================================================================= */

/* ── Page header ─────────────────────────────────────────────────────────────── */
/* .mva-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 16px;
}

.mva-page-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	color: var(--mv-admin-text);
	letter-spacing: -0.01em;
}

.mva-page-subtitle {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 4px 0 0;
} */

.mva-page-header, .mva-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--mva-feature-bg);
	color: var(--mva-feature-text);
	border-radius: var(--mva-radius-xl);
	box-shadow: var(--mva-shadow-lg);
	padding: 26px 30px;
	margin-bottom: 24px;
}

.mva-page-header .mva-page-title, .mva-hero-title {
	color: var(--mva-feature-text);
	margin: auto;
}

.mva-page-header .mva-page-subtitle, .mva-hero-sub {
	color: var(--mva-feature-muted);
	margin-block: auto;
}

.mva-page-header .mva-breadcrumb a {
	color: var(--mva-feature-text);
	text-decoration: none;
}

.mva-page-header .mva-breadcrumb a:hover {
	color: var(--mva-feature-text);
	text-decoration: underline;
}

.mva-page-header .mva-breadcrumb span:last-child {
	color: var(--mva-feature-muted);
	margin-left: 0;
}

/* ── Cards ─────────────────────────────────────────────────────────────────────
   overflow-x: auto on the base rule so any card whose content (typically a
   wide table, but also long button rows, code blocks, etc.) outgrows the
   viewport scrolls within itself rather than pushing the page horizontally.
   `auto` only renders a scrollbar when content actually overflows — cards
   that fit the viewport show no scrollbar. -webkit-overflow-scrolling
   enables iOS momentum scrolling. Promoted to base 2026-05-27 after the
   per-page (.mva-card--flush) approach proved too narrow — most admin
   tables live inside a plain .mva-card, not .mva-card--flush. */
.mva-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: var(--mva-shadow-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mva-card-title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 16px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.mva-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	font-weight: 500;
	font-family: var(--admin-font);
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	text-decoration: none;
	line-height: 1;
}

.mva-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Disabled state — applies to ALL .mva-btn variants. Used by the dirty-save
   wiring (admin-utils.js) so per-card save buttons grey out until a field
   in the card changes. pointer-events:none stops the hover state showing
   through the dimmed look. */
.mva-btn:disabled,
.mva-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.mva-btn--primary {
	background: var(--mv-admin-accent);
	color: #ffffff;
	border-color: var(--mv-admin-accent);
}

.mva-btn--primary:hover {
	background: var(--mv-admin-accent-hover);
	border-color: var(--mv-admin-accent-hover);
	color: #ffffff;
}

.mva-btn--secondary {
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	border-color: var(--mv-admin-border);
}

.mva-btn--secondary:hover {
	border-color: #9ca3af;
	color: var(--mv-admin-text);
}

.mva-btn--warning {
	background: #ffeccf;
	color: #dc7500;
	border-color: #ffe6c1;
}

.mva-btn--warning:hover {
	background: #ffe0b1;
	color: #dc7500;
	border-color: #ffe0b1;
}

.mva-btn--danger {
	background: var(--mv-admin-danger);
	color: var(--mv-admin-danger-text);
	border-color: var(--mv-admin-danger);
}

.mva-btn--danger:hover {
	background: var(--mv-admin-danger-hover);
	color: var(--mv-admin-danger-text);
	border-color: var(--mv-admin-danger);
}

.mva-btn--sm {
	padding: 5px 10px;
	font-size: 12px;
}

/* ── .mva-yesno — inline No/Yes segmented toggle ───────────────────────────────
 * A compact boolean for places a checkbox in a settings panel would be the wrong
 * shape — chiefly a row in a list, where the value is as much a STATUS as a
 * control and the reader wants to see it without opening anything.
 *
 * 🚨 NOT NAMED .mva-toggle, AND THAT NAME MUST NOT BE REUSED HERE. .mva-toggle is
 * already the iOS-style slider switch further down this file (~line 8780, with
 * .mva-toggle-slider, used by the publishing pills), and .mva-toggle-label is
 * already the checkbox-row label at ~3420. Both are declared LATER than this
 * block, so at equal specificity they win on source order: naming this control
 * .mva-toggle silently forced it to the slider's `width: 40px; height: 22px`,
 * which collapsed the label onto a second line and overflowed the row below.
 * Nothing errored — the pill still looked right, so it read as a spacing bug.
 * (Cost a round trip on 2026-08-17. Grep a class name before claiming it.)
 *
 * ONE <button role="switch">, not two radios and not a label-wrapped checkbox.
 * A <button> is exempt from mvaTreeRowClick()'s closest() guard in the page
 * editor where a <label> would not be — so even if this control is ever moved
 * back inside a clickable row, a click on its text cannot collapse the row.
 *
 * Both options stay visible (rather than one label that changes) so the control
 * reads as a question with a current answer. The track is aria-hidden and the
 * button carries its own aria-label, so a screen reader gets "Swipe on mobile,
 * switch, on" rather than "Swipe on mobile? No Yes".
 *
 * Green for on: this is an ENHANCEMENT being enabled, so success reads correctly.
 * Neutral for off, never red — off is a legitimate choice, not a fault.
 *
 * Base + identifier, per the house convention: wear .mva-yesno for the control
 * and add an identifier (.mva-pe-swipe) for whatever placement-specific spacing
 * the host surface needs. NO width, height or margin here — that is the host's
 * business, and a size on the base is what caused the collision above.
 *
 * 🚨 RESTYLED 2026-11-06 (Matt, page-builder/structure-rail-polish) from a
 * segmented No/Yes text pill to a Bootstrap-style switch — a pill TRACK with a
 * sliding circular KNOB (.mva-yesno-track and its ::after, below) — applied
 * ADMIN-WIDE on purpose: this is the one shared base rule in the one shared
 * admin stylesheet, so any future .mva-yesno anywhere in admin gets the same
 * look with no separate opt-in. The markup is UNCHANGED (role="switch",
 * aria-checked, the two .mva-yesno-opt "No" / "Yes" spans) — only how it is
 * drawn. Both spans stay in the tree (the button's own aria-label already says
 * the full question + state) but are visually collapsed to nothing; the knob's
 * position and the track's colour key off the SAME aria-checked on the button
 * that always drove this control's state — see "do not add a separate --on
 * class" on .mva-yesno-opt below, now true of the track too. Green for on
 * still comes from --mv-admin-success, a CSS variable, never a literal #hex.
 */
.mva-yesno {
	display: inline-flex;
	align-items: center;
	/* nowrap on both axes: this control is one line by definition, and the label
	   sitting above the pill is the exact failure the collision produced. */
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	color: var(--mv-admin-text-secondary);
}

.mva-yesno-label {
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

/* Row-action controls sit on the SAME visual band as the inputs beside them.
 * align-items:flex-end already lines their bottoms up exactly (measured: delta
 * 0.0) — the stagger comes from height, not alignment. An input is 34.5px, the
 * small button 24px and the chip 15.5px, so three different centre lines land in
 * one row. Matching the control height to the input puts bottoms AND centres
 * together. --mva-row-control-h tracks .mva-input's box: 8px padding x2 +
 * 1px border x2 + ~17px line-box at 14px/normal.
 */
.mva-sale-addon-row,
.mva-sale-px-row { --mva-row-control-h: 35px; }
/* Descendant, not child: the PX "Add to stock" / "In stock" control is built by
 * addPxStockControl() inside a .mva-row-action wrapper, so a > selector missed
 * it and left that one button at 24px, 5.25px off the input's centre line. */
.mva-sale-addon-row .mva-btn,
.mva-sale-px-row .mva-btn,
.mva-sale-addon-row .mva-unsaved-chip,
.mva-sale-px-row .mva-unsaved-chip {
	height: var(--mva-row-control-h);
	box-sizing: border-box;
}
.mva-sale-addon-row .mva-btn,
.mva-sale-px-row .mva-btn { justify-content: center; }
/* Flex, so the wrapper hugs its button exactly — a block wrapper round an
 * inline-flex child picks up baseline leading and reintroduces the offset. */
.mva-row-action { display: flex; align-items: flex-end; flex: 0 0 auto; margin: 0; }

/* The switch TRACK — a fixed-size pill, Bootstrap-switch proportions (roughly
   2:1). Fixed, not flex-sized from its children any more: the children
   (.mva-yesno-opt, below) no longer occupy visible space, so the track needs
   its own dimensions rather than hugging them. position:relative anchors the
   knob (::after). */
.mva-yesno-track {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 34px;
	height: 18px;
	border: 1px solid var(--mv-admin-border);
	border-radius: 999px;
	background: var(--mv-admin-surface-alt);
	transition: background-color 0.15s, border-color 0.15s;
}

/* The knob. Position and colour both key off aria-checked on the BUTTON —
   the one source of state this control has ever had; see the "do not add a
   separate --on class" rule this inherits from the old .mva-yesno-opt rules
   below. 1px inset on a 34x18 track leaves 16px of travel for a 14px knob. */
.mva-yesno-track::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mv-admin-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
	transition: transform 0.15s;
}

.mva-yesno[aria-checked="true"] .mva-yesno-track {
	background: var(--mv-admin-success);
	border-color: var(--mv-admin-success);
}
.mva-yesno[aria-checked="true"] .mva-yesno-track::after {
	transform: translateX(16px);
}

/* The "No" / "Yes" text — still in the markup (role="switch" carries the
   accessible state via aria-checked, and the button's own aria-label already
   says the full question + state), now visually replaced by the knob above.
   Collapsed to nothing rather than display:none, so removing it from layout
   can never resize the track it used to fill. Exactly one bare declaration,
   per the harness's count — the two aria-checked highlight rules this used to
   carry moved onto the track and the knob above, where the colour now lives. */
.mva-yesno-opt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.mva-yesno:hover .mva-yesno-track { border-color: var(--mv-admin-accent); }
.mva-yesno:hover .mva-yesno-label { color: var(--mv-admin-text); }

.mva-yesno:focus-visible {
	outline: 2px solid var(--mv-admin-accent);
	outline-offset: 2px;
	border-radius: 999px;
}

/* In flight — the optimistic flip has happened but the write has not landed yet.
   Dimmed rather than disabled: disabling moves focus and would make a
   double-click feel broken, and the pointer-events block already stops a second
   request. */
.mva-yesno[data-busy="1"] {
	opacity: 0.55;
	pointer-events: none;
}

/* ── Form elements ───────────────────────────────────────────────────────────── */
.mva-form-group {
	margin-bottom: 18px;
}

.mva-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text);
	margin-bottom: 6px;
}

.mva-label-hint {
	font-weight: 400;
	color: var(--mv-admin-text-secondary);
	margin-left: 6px;
}

.mva-input,
.mva-select,
.mva-textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	font-size: 14px;
	font-family: var(--admin-font);
	color: var(--mv-admin-text);
	background: var(--mv-admin-surface);
	transition: border-color 0.15s, box-shadow 0.15s;
	appearance: none;
}

.mva-input:focus,
.mva-select:focus,
.mva-textarea:focus {
	outline: none;
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px var(--mv-admin-accent-dim);
}

.mva-textarea { resize: vertical; min-height: 100px; }

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.mva-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.mva-table th {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mv-admin-border);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
}

.mva-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--mv-admin-border);
	color: var(--mv-admin-text);
	vertical-align: middle;
}

.mva-table tr:last-child td { border-bottom: none; }
.mva-table tr:hover td { background: var(--mv-admin-surface-alt); }

/* ── Status badges ───────────────────────────────────────────────────────────── */
.mva-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.mva-badge i {
	font-size: 10px;
	margin-right: 3px;
}

.mva-badge--success { background: var(--mv-admin-success); color:var(--mva-text-white) !important; }
.mva-badge--warning { background: var(--mv-admin-warning); color:var(--mv-admin-warning-text) !important; }
.mva-badge--danger  { background: var(--mv-admin-danger); color:var(--mv-admin-danger-text) !important; }
.mva-badge--neutral { background: var(--mv-admin-neutral); color:var(--mv-admin-neutral-text) !important; }
.mva-badge--info    { background: var(--mv-admin-info); color:var(--mv-admin-info-text) !important; }
.mva-badge--dark { background: var(--mv-admin-dark); color:var(--mv-admin-dark-text) !important; }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.mva-empty {
	text-align: center;
	padding: 48px 24px;
	color: var(--mv-admin-text-secondary);
}

.mva-empty-icon {
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	opacity: 0.3;
}

.mva-empty h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--mv-admin-text);
	margin: 0 0 6px;
}

.mva-empty p {
	font-size: 13px;
	margin: 0 0 16px;
}

/* Media library: an EMPTY folder is an invitation, not a dead end — the whole
   empty state is a large dashed button that opens the upload modal INTO that
   folder. Wears .mva-empty for the type and spacing; this adds the affordance. */
.mva-media-upload-tile {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 24px auto;
	background: var(--mv-admin-surface);
	border: 2px dashed var(--mv-admin-border);
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	transition: border-color .12s, background .12s;
}
.mva-media-upload-tile:hover,
.mva-media-upload-tile:focus-visible {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-surface-alt);
	outline: none;
}
.mva-media-upload-tile-icon {
	display: block;
	font-size: 44px;
	line-height: 1;
	margin: 0 auto 12px;
	color: var(--mv-admin-accent);
}
/* The same invitation as the FIRST card of a populated grid — sized by the
   grid like every other card, dashed so it reads as an action, not a picture. */
.mva-media-upload-card {
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 100%;
	padding: 24px 12px;
	border: 2px dashed var(--mv-admin-border);
	cursor: pointer;
	font: inherit;
	color: var(--mv-admin-text);
	transition: border-color .12s, background .12s;
}
.mva-media-upload-card:hover,
.mva-media-upload-card:focus-visible {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-surface-alt);
	outline: none;
}
.mva-media-upload-card-icon {
	font-size: 40px;
	line-height: 1;
	color: var(--mv-admin-accent);
}
.mva-media-upload-card-label {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ── Alert / notice ──────────────────────────────────────────────────────────── */
.mva-alert {
	padding: 12px 16px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}

.mva-alert--success { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.mva-alert--error   { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.mva-alert--warning { background: #fef9c3; border-color: #fde68a; color: #854d0e; }
.mva-alert--info    { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }

/* ── Cross-sell panel ─────────────────────────────────────────────────────────
   Points from one settings card at a more capable one elsewhere on the page.
   Deliberately NOT an .mva-alert: an alert says "something needs attention",
   which is the wrong voice for a recommendation, and its palettes are all
   status colours. Uses the admin accent so it reads as a feature, not a notice. */
.mva-promo {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px solid var(--mv-admin-border);
	border-left: 3px solid var(--mv-admin-accent);
	border-radius: var(--mv-admin-radius);
	background: #f8fafc;
}

.mva-promo-icon {
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--mv-admin-accent);
	margin-top: 2px;
}

.mva-promo-body { flex: 1 1 auto; min-width: 0; }

.mva-promo-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--mv-admin-text);
	margin: 0 0 4px;
}

.mva-promo-text {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 12px;
	line-height: 1.5;
}

/* Stacks below 640px — see the canonical breakpoint block at the end of the file. */

/* ── MotoVend admin sub-nav ──────────────────────────────────────────────────── */
.mva-subnav {
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--mv-admin-border);
	padding-bottom: 0;
}

.mva-subnav-item {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
	text-decoration: none;
}

.mva-subnav-item:hover { color: var(--mv-admin-text); }

.mva-subnav-item.active {
	color: var(--mv-admin-accent);
	border-bottom-color: var(--mv-admin-accent);
}

/* =============================================================================
   SETTINGS PAGE
   ============================================================================= */

.mva-settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}

.mva-form-group--full {
	grid-column: 1 / -1;
}

/* Opening Times card — when "Appointment only" is ticked, the day grid
   stays in the DOM (so unticking restores values) but is visually muted
   to show the hours aren't currently published. Pure cosmetic; no
   server-side reliance on the class. */
.mva-opening-hours-grid--muted {
	opacity: 0.45;
	pointer-events: none;
}

.mva-field-hint {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 4px 0 0;
}

/* =============================================================================
   PAGES — LIST VIEW
   ============================================================================= */

.mva-pages-group-desc {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: -8px 0 16px;
}

.mva-page-title-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var(--mv-admin-text);
}

.mva-system-lock {
	display: inline-flex;
	align-items: center;
	color: var(--mv-admin-text-secondary);
	opacity: 0.5;
	flex-shrink: 0;
}

.mva-type-label {
	display: inline-block;
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	padding: 2px 7px;
	font-weight: 500;
}

.mva-slug {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	padding: 2px 6px;
}

.mva-date-cell {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	white-space: nowrap;
}

.mva-row-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.mva-page-cap-label {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	padding: 4px 10px;
	white-space: nowrap;
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.mva-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 4px;
}

.mva-breadcrumb a {
	color: var(--mv-admin-text-secondary);
	text-decoration: none;
}

.mva-breadcrumb a:hover {
	color: var(--mv-admin-accent);
}

.mva-breadcrumb span:last-child {
	color: var(--mv-admin-text);
}

/* =============================================================================
   BLOCK EDITOR
   ============================================================================= */

.mva-block-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}

/* ── H1 status banner (page builder) ─────────────────────────────────────────── */
/* Sits above the block list on the page-edit view, surfaces which block (if
   any) currently owns the page <h1>. Two states — --ok (a block claims H1)
   vs --missing (no block claims). JS in mvaUpdateH1Banner() flips the
   modifier classes + content. See BlockRenderer::claimH1() docblock for
   the underlying convention. */
.mva-h1-banner {
	max-width: 1200px;
	margin: 0 auto 16px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mva-h1-banner--ok {
	background: #e8f5ee;
	color: #1f5132;
	border: 1px solid #b6dcc1;
}
.mva-h1-banner--missing {
	background: #fff4e0;
	color: #8a5a00;
	border: 1px solid #f3d99b;
}
.mva-h1-banner-block-tag {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(0,0,0,0.06);
}

/* In-modal hint shown when another block already owns H1 — replaces the
   "Use this heading as the page H1" toggle for the block being edited.
   See mvaApplyH1ToggleGate() in mv-admin/views/website/pages/edit.php. */
.mva-h1-locked-note > p {
	background: #fff4e0;
	border: 1px solid #f3d99b;
	color: #8a5a00;
	padding: 10px 12px;
	border-radius: 6px;
	margin: 0;
}

/* ── Block card ──────────────────────────────────────────────────────────────── */
.mva-block-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.15s;
}

.mva-block-card--draggable {
	cursor: default;
}

.mva-block-card.sortable-ghost {
	opacity: 0.4;
	background: var(--mv-admin-surface-alt);
}

.mva-block-card.sortable-chosen {
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ── Block header ────────────────────────────────────────────────────────────── */
.mva-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	cursor: pointer;
	user-select: none;
	background: var(--mv-admin-surface);
	transition: background 0.1s;
}

.mva-block-header:hover {
	background: var(--mv-admin-surface-alt);
}

.mva-block-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Stage 2B2 — let the label/preview/tile cluster shrink with viewport so
	   the edit/delete buttons in header-right are never clipped off the row.
	   min-width: 0 enables flex children to actually contract below their
	   intrinsic content size. */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.mva-block-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Edit/delete buttons keep their fixed footprint — never shrink, never
	   clip. flex-shrink: 0 enforces this even when header-left tries to
	   demand more space than the row has. */
	flex: 0 0 auto;
}

.mva-block-drag-handle {
	display: flex;
	align-items: center;
	color: var(--mv-admin-text-secondary);
	cursor: grab;
	padding: 2px 4px;
	border-radius: 3px;
	transition: color 0.15s;
}

.mva-block-drag-handle:hover {
	color: var(--mv-admin-text);
}

.mva-block-drag-handle:active {
	cursor: grabbing;
}

.mva-block-type-icon {
	display: flex;
	align-items: center;
	color: var(--mv-admin-text-secondary);
}

.mva-block-type-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

.mva-block-chevron {
	display: flex;
	align-items: center;
	color: var(--mv-admin-text-secondary);
	transition: transform 0.2s;
}

.mva-chevron--open {
	transform: rotate(180deg);
}

/* ── Block body ──────────────────────────────────────────────────────────────── */
.mva-block-body {
	display: none;
	border-top: 1px solid var(--mv-admin-border);
	padding: 20px;
}

.mva-block-body--open {
	display: block;
}

.mva-block-fields {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.mva-block-field {
	margin-bottom: 14px;
}

.mva-block-field--narrow {
	max-width: 180px;
}

.mva-block-field--checkbox {
	margin-bottom: 10px;
}

.mva-block-field:last-child {
	margin-bottom: 0;
}

/* ── Form-builder field-list editor (Tranche 3b) ─────────────────────────────
   Contact-form block instance editor for picking which curated catalogue
   fields appear, with per-field label / required / placeholder overrides.
   Driven by mvaFormBuilderInit() in pages/edit.php; Sortable.js handles
   drag-reorder via the ⋮⋮ handle. Visual language deliberately distinct
   from the rest of the block fields (subtle card-in-card) so the dealer
   sees it as a structured sub-region, not yet-another text input. */
.mva-fb-fields-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mva-fb-field-row {
	background: #f8fafc;
	border: 1px solid var(--mv-admin-border, #e2e8f0);
	border-radius: 6px;
	padding: 10px 12px;
}
.mva-fb-field-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mva-fb-field-drag {
	cursor: grab;
	color: #94a3b8;
	font-size: 14px;
	line-height: 1;
	user-select: none;
	letter-spacing: -2px;
}
.mva-fb-field-drag:active { cursor: grabbing; }
.mva-fb-field-name {
	font-weight: 600;
	font-size: 14px;
	flex: 1 1 auto;
}
.mva-fb-field-type-badge {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: #e2e8f0;
	color: #475569;
	padding: 2px 7px;
	border-radius: 4px;
	font-weight: 500;
}
.mva-fb-field-remove {
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	padding: 0 4px;
}
.mva-fb-field-remove:hover { color: #dc2626; }

.mva-fb-field-body {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
}
.mva-fb-field-body input.mva-input {
	margin: 0;  /* override default mva-input bottom margin inside the grid */
}
.mva-fb-field-required-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #475569;
	white-space: nowrap;
}

/* Sortable.js drag-state — same pattern as other admin sortables. */
.mva-fb-field-row.sortable-ghost {
	opacity: 0.4;
}
.mva-fb-field-row.sortable-drag {
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.mva-fb-add {
	display: flex;
	gap: 8px;
	align-items: center;
}
.mva-fb-add-select {
	flex: 1 1 auto;
	margin: 0;
}

.mva-align-picker {
	display: inline-flex;
	gap: 4px;
}

.mva-align-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mva-align-btn:hover {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
}

.mva-align-btn--active {
	background: var(--mv-admin-accent);
	border-color: var(--mv-admin-accent);
	color: #fff;
}

/* ── Generic radio-button group (text labels, not icons) ─────────────────────
 * Used by mva_field_radio_buttons helper. Visually mirrors the align picker
 * but sized for short text labels (Swipe / Fade / Yes / No / 400px etc.).
 */
.mva-radio-group {
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}

.mva-radio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	height: 32px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mva-radio-btn:hover {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
}

.mva-radio-btn--active {
	background: var(--mv-admin-accent);
	border-color: var(--mv-admin-accent);
	color: #fff;
}

.mva-block-textarea {
	min-height: 120px;
}

.mva-block-no-fields {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0;
	font-style: italic;
}

.mva-required {
	color: var(--mv-admin-accent);
	margin-left: 2px;
}

/* ── Checkbox field ──────────────────────────────────────────────────────────── */
.mva-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mv-admin-text);
	cursor: pointer;
}

.mva-checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--mv-admin-accent);
	cursor: pointer;
	flex-shrink: 0;
}

/* ── Block save actions ──────────────────────────────────────────────────────── */
.mva-block-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--mv-admin-border);
}

.mva-block-saved-msg {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
}

.mva-block-saved-msg--ok {
	color: #166534;
}

/* ── Add block panel ─────────────────────────────────────────────────────────── */
.mva-add-block-section {
	margin-top: 8px;
	padding: 20px;
	background: var(--mv-admin-surface);
	border: 1px dashed var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
}

.mva-add-block-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 12px;
}

/* Subsequent group sub-headings get top spacing to separate from the
 * previous group's button grid. First group has no top margin. */
.mva-add-block-section > .mva-add-block-label:not(:first-child) {
	margin-top: 20px;
}

.mva-add-block-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Card-grid variant — used by the widget picker modal. Each button is a
   wider card with a description below the label. Auto-fills the modal
   panel width into a tidy multi-column grid. */
.mva-add-block-grid--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.mva-add-block-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	font-family: var(--admin-font);
}

.mva-add-block-btn:hover {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
	background: var(--mv-admin-accent-dim);
}

.mva-add-block-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.mva-add-block-btn svg {
	flex-shrink: 0;
}

/* Card-shaped button — taller, two-line text (label + description).
   Used by the widget picker modal so each option is discoverable
   without hovering for a tooltip. Icon stays top-aligned with the
   label so longer descriptions don't shove the icon down. */
.mva-add-block-btn--card {
	display: flex;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	padding: 12px 14px;
	min-height: 56px;
}

.mva-add-block-btn--card svg {
	margin-top: 2px;          /* visual baseline alignment with the label */
	color: var(--mv-admin-text-secondary);
}

.mva-add-block-btn--card:hover svg {
	color: var(--mv-admin-accent);
}

.mva-add-block-btn-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;             /* allow ellipsis-truncation if a description is unusually long */
}

.mva-add-block-btn-label {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
}

.mva-add-block-btn-desc {
	font-size: 11px;
	font-weight: 400;
	color: var(--mv-admin-text-secondary);
	line-height: 1.35;
}

.mva-add-block-btn--card:hover .mva-add-block-btn-desc {
	/* Keep the secondary text neutral on hover — only the label + icon
	   shift to accent. Otherwise the description's brand-accent colour
	   washes out against the dim accent background. */
	color: var(--mv-admin-text-secondary);
}

/* Section header in the widget picker modal — visually separates
   "Content Blocks" from "Widgets". Subtle text-only treatment, not
   a heavy bar — the cards are the visual focus. */
.mva-widget-picker-section + .mva-widget-picker-section {
	margin-top: 24px;
}

.mva-widget-picker-section-heading {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mv-admin-text-secondary);
}

/* ── Toast notification ──────────────────────────────────────────────────────── */
.mva-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	padding: 10px 18px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	font-weight: 500;
	z-index: 9999;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.mva-toast--visible {
	opacity: 1;
	transform: translateY(0);
}

.mva-toast--success {
	background: #166534;
	color: #ffffff;
}

.mva-toast--error {
	background: #991b1b;
	color: #ffffff;
}

/* ── Pending-reorder bar ─────────────────────────────────────────────────────
 * Shown when a dealer has reordered blocks but not yet saved. Sticky to the
 * top of the viewport so it remains visible while scrolling the block list.
 * Hidden by default via the global `[hidden]` attribute rule — JS toggles it.
 */
.mva-reorder-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 18px;
	margin-bottom: 16px;
	background: #fef3c7;
	color: #78350f;
	border: 1px solid #fcd34d;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mva-reorder-bar-msg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mva-reorder-bar-actions {
	display: inline-flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Repeating block sections (image_cards / banner_carousel / usps) ──
 * Two orthogonal states managed by JS in pages/edit.php:
 *   --hidden    : section is above the current count (entire wrapper invisible)
 *   --expanded  : accordion body is open (header is always visible regardless)
 *
 * Default state (no class): wrapper visible, body collapsed (header only).
 * 5000px max-height is intentional — large enough to never clip real content
 * but bounded so the transition runs over a finite duration regardless.
 */
.mva-repeating-section {
	overflow: hidden;
	max-height: 5000px;
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

.mva-repeating-section--hidden {
	max-height: 0;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.mva-repeating-section-header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	margin-top: 12px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: background 0.15s, border-color 0.15s;
}

.mva-repeating-section-header:hover {
	background: var(--mv-admin-surface);
	border-color: var(--mv-admin-text-secondary);
}

.mva-repeating-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-repeating-section-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
	color: var(--mv-admin-text-secondary);
}

.mva-repeating-section--expanded .mva-repeating-section-chevron {
	transform: rotate(180deg);
}

.mva-repeating-section-body {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
	padding: 0 4px;
}

.mva-repeating-section--expanded .mva-repeating-section-body {
	max-height: 5000px;
	opacity: 1;
	padding-top: 12px;
	padding-bottom: 4px;
}

/* ── Block edit modal — full-screen focus mode ───────────────────────────────
 * Markup at top of mv-admin/views/website/pages/edit.php; JS in same file's
 * IIFE. Modal panel slides in from right with backdrop fade. ESC + × + Close
 * button to dismiss (NOT click-outside — too easy to lose state by accident).
 */
.mva-block-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mva-block-modal[hidden] {
	display: none !important;
}

.mva-block-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mva-block-modal--open .mva-block-modal-backdrop {
	opacity: 1;
}

.mva-block-modal-panel {
	position: relative;
	width: 90vw;
	height: 95vh;
	max-width: 1200px;
	background: var(--mv-admin-surface);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateX(40px);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.mva-block-modal--open .mva-block-modal-panel {
	transform: translateX(0);
	opacity: 1;
}

.mva-block-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--mv-admin-border);
	flex-shrink: 0;
}

.mva-block-modal-icon {
	display: inline-flex;
	align-items: center;
	color: var(--mv-admin-text-secondary);
}

.mva-block-modal-title {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	color: var(--mv-admin-text);
	margin: 0;
}

.mva-block-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	color: var(--mv-admin-text-secondary);
	padding: 0 6px;
	transition: color 0.15s;
}

.mva-block-modal-close:hover {
	color: var(--mv-admin-text);
}

.mva-block-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

.mva-block-modal-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-top: 1px solid var(--mv-admin-border);
	background: var(--mv-admin-surface-alt);
	flex-shrink: 0;
}
/* Convention: the first button in any edit-modal footer is the Close /
   Cancel action — pushed left via auto-margin so all Save buttons cluster
   right. Same shape applies to .mva-modal-footer below; both footers
   share this convention. Future edit modals should follow it. */
.mva-block-modal-footer > button:first-child {
	margin-right: auto;
}

/* Prevent body scroll while the modal is open */
body.mva-modal-open {
	overflow: hidden;
}

/* =============================================================================
   SEO EDITOR
   ============================================================================= */

.mva-seo-fields {
	display: flex;
	flex-direction: column;
}

/* ── SERP preview ────────────────────────────────────────────────────────────── */
.mva-serp-preview {
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 16px 20px;
	margin-bottom: 24px;
	max-width: 600px;
}

.mva-serp-url {
	font-size: 12px;
	color: #1a7f37;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mva-serp-title {
	font-size: 18px;
	color: #1a0dab;
	margin-bottom: 4px;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.mva-serp-desc {
	font-size: 13px;
	color: #4d5156;
	line-height: 1.5;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ── Character counter ───────────────────────────────────────────────────────── */
.mva-char-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 4px;
	gap: 8px;
}

.mva-char-count {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

.mva-char-count--warning {
	color: #92400e;
}

.mva-char-count--over {
	color: #991b1b;
	font-weight: 600;
}

/* ── Save bar ────────────────────────────────────────────────────────────────── */
.mva-seo-save-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0 8px;
}

/* =============================================================================
   MENU MANAGER
   ============================================================================= */

.mva-menu-section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.mva-menu-empty {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	padding: 12px 0;
	font-style: italic;
}

/* ── Menu item list ───────────────────────────────────────────────────────────── */
.mva-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mva-menu-list--children {
	margin: 4px 0 4px 32px;
}

/* Fixed rows — the Home link. Sits above the sortable list and is not part of
   it, so it gets the list's own spacing rather than the gap between items. */
.mva-menu-list--fixed {
	margin-bottom: 4px;
}

/* ── Menu item ───────────────────────────────────────────────────────────────── */
.mva-menu-item {
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	overflow: hidden;
	transition: border-color 0.15s;
}

.mva-menu-item--child {
	background: var(--mv-admin-surface);
}

.mva-menu-item--disabled .mva-menu-item-label {
	opacity: 0.45;
}

.mva-menu-item--disabled .mva-menu-item-url {
	opacity: 0.45;
}

.mva-menu-item.sortable-ghost {
	opacity: 0.4;
}

.mva-menu-item.sortable-chosen {
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.mva-menu-item-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.mva-menu-drag {
	flex-shrink: 0;
	cursor: grab;
}

.mva-menu-drag:active {
	cursor: grabbing;
}

/* Not draggable — the icon occupies the handle slot so the row lines up with
   its neighbours, but must not offer a grab cursor it cannot honour. */
.mva-menu-drag--fixed,
.mva-menu-drag--fixed:hover,
.mva-menu-drag--fixed:active {
	cursor: default;
	color: var(--mv-admin-text-secondary);
}

.mva-menu-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mva-menu-item-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text);
	white-space: nowrap;
}

.mva-menu-item-url {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mva-menu-item-badge {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
}

.mva-menu-item-actions {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

/* ── Item forms ──────────────────────────────────────────────────────────────── */
.mva-edit-item-form,
.mva-child-add-form {
	border-top: 1px solid var(--mv-admin-border);
}

.mva-add-item-form {
	margin-top: 16px;
	border-top: 1px solid var(--mv-admin-border);
	padding-top: 16px;
}

.mva-item-form {
	padding: 16px;
	background: var(--mv-admin-surface);
}

.mva-item-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.mva-item-form-options {
	margin: 4px 0 12px;
}

.mva-item-form-actions {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--mv-admin-border);
}

/* =============================================================================
   ADD PAGE — LAYOUT PICKER & DETAILS
   ============================================================================= */

/* ── Layout grid ─────────────────────────────────────────────────────────────── */
.mva-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-top: 4px;
}

.mva-layout-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px;
	background: var(--mv-admin-surface-alt);
	border: 2px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	cursor: pointer;
	text-align: left;
	font-family: var(--admin-font);
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	width: 100%;
}

.mva-layout-card:hover {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-surface);
}

.mva-layout-card--selected {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-accent-dim);
	box-shadow: 0 0 0 3px var(--mv-admin-accent-dim);
}

.mva-layout-card-icon {
	color: var(--mv-admin-text-secondary);
	margin-bottom: 4px;
}

.mva-layout-card--selected .mva-layout-card-icon {
	color: var(--mv-admin-accent);
}

.mva-layout-card-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--mv-admin-text);
}

.mva-layout-card-desc {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.4;
}

.mva-layout-card-blocks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

/* ── Selected layout display ─────────────────────────────────────────────────── */
.mva-add-page-selected-layout {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 8px 12px;
	margin-bottom: 4px;
}

.mva-add-page-selected-layout strong {
	color: var(--mv-admin-text);
}

/* ── Slug input ──────────────────────────────────────────────────────────────── */
.mva-slug-input-wrap {
	display: flex;
	align-items: center;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	overflow: hidden;
	background: var(--mv-admin-surface);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mva-slug-input-wrap:focus-within {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px var(--mv-admin-accent-dim);
}

.mva-slug-prefix,
.mva-slug-suffix {
	padding: 8px 10px;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	white-space: nowrap;
	flex-shrink: 0;
}

.mva-slug-suffix {
	border-left: 1px solid var(--mv-admin-border);
}

.mva-slug-prefix {
	border-right: 1px solid var(--mv-admin-border);
}

.mva-slug-input {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1;
	min-width: 0;
}

.mva-slug-input:focus {
	outline: none;
	box-shadow: none !important;
}

/* ── Slug availability check ─────────────────────────────────────────────────── */
.mva-slug-check {
	font-size: 12px;
	margin-top: 5px;
	min-height: 18px;
}

.mva-slug-check--ok {
	color: #166534;
	font-weight: 500;
}

.mva-slug-check--error {
	color: #991b1b;
	font-weight: 500;
}

/* =============================================================================
   INLINE SLUG EDITING
   ============================================================================= */

.mva-slug-edit-wrap {
	display: flex;
	align-items: center;
	gap: 5px;
}

.mva-slug-edit-btn {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	padding: 2px;
	border-radius: 3px;
	transition: color 0.15s;
	flex-shrink: 0;
}

.mva-slug-edit-btn:hover {
	color: var(--mv-admin-accent);
}

.mva-slug-input-inline {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.mva-input--sm {
	padding: 4px 8px;
	font-size: 12px;
	width: 160px;
}

.mva-slug-check--sm {
	font-size: 11px;
	margin-top: 2px;
}

/* =============================================================================
   MENU MANAGER — NESTED DRAG AND DROP
   ============================================================================= */

.mva-menu-list--root {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mva-menu-list--children {
	list-style: none;
	margin: 4px 0 4px 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 8px; /* drop target when empty */
}

.mva-menu-list--empty {
	border: 1px dashed transparent;
	border-radius: var(--mv-admin-radius);
	transition: border-color 0.15s, background 0.15s;
}

/* Highlight empty child list as drop target during drag */
.sortable-drag ~ .mva-menu-list--empty,
.mva-menu-list--empty.sortable-over {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-accent-dim);
	min-height: 36px;
}

.mva-menu-item-badge--child {
	background: var(--mv-admin-accent-dim);
	color: var(--mv-admin-accent);
	border-color: transparent;
}

/* =============================================================================
   IMAGE FIELD — BROWSE/UPLOAD BUTTON + PREVIEW
   ============================================================================= */

.mva-image-field-wrap {
	display: flex;
	gap: 8px;
	align-items: center;
}

.mva-image-field-wrap .mva-image-url-input {
	flex: 1;
	min-width: 0;
}

.mva-image-browse-btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.mva-image-preview {
	margin-top: 8px;
	position: relative;
	display: inline-block;
	max-width: 200px;
}

.mva-image-preview img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	border-radius: var(--mv-admin-radius);
	border: 1px solid var(--mv-admin-border);
	background: var(--mv-admin-surface-alt);
}

.mva-image-preview-clear {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: none;
	background: var(--mv-admin-text);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s;
}

.mva-image-preview-clear:hover {
	background: var(--mv-admin-accent);
}

/* =============================================================================
   SHARED MEDIA MODAL
   ============================================================================= */

.mva-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mva-modal-backdrop[hidden] {
	display: none;
}

.mva-modal {
	background: var(--mv-admin-surface);
	border-radius: var(--mv-admin-radius-lg);
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mva-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mv-admin-border);
	flex-shrink: 0;
}

.mva-modal-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--mv-admin-text);
}

.mva-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	padding: 2px 6px;
	border-radius: var(--mv-admin-radius);
	transition: color 0.15s, background 0.15s;
}

.mva-modal-close:hover {
	color: var(--mv-admin-text);
	background: var(--mv-admin-surface-alt);
}

.mva-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

.mva-modal-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--mv-admin-border);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
}
/* Same first-child-pushed-left convention as .mva-block-modal-footer.
   See the docblock there for the rationale. */
.mva-modal-footer > button:first-child {
	margin-right: auto;
}

/* ── "Choose a document" picker (admin/assets/js/document-picker.js) ───────────
   The shared modal, narrower, holding one button per document. */
.mva-docpick {
	max-width: 560px;
}
.mva-docpick-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.mva-docpick-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.mva-docpick-item:hover,
.mva-docpick-item:focus-visible {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-surface-alt);
}
.mva-docpick-title {
	font-weight: 600;
	color: var(--mv-admin-text);
}
.mva-docpick-meta,
.mva-docpick-note {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	overflow-wrap: anywhere;
}
/* Beside a link field (mva_field_link, pages/edit.php): the box takes the row,
   the button keeps its words on one line. */
.mva-image-field-wrap > .mva-block-input {
	flex: 1;
	min-width: 0;
}
.mva-doc-pick-btn {
	flex-shrink: 0;
	white-space: nowrap;
}
/* A "Choose a document" button that sits under its field, not beside it. */
.mva-doc-pick-btn--below {
	margin-top: 6px;
}

.mva-modal-tabs {
	display: flex;
	border-bottom: 1px solid var(--mv-admin-border);
	flex-shrink: 0;
}

.mva-modal-tab {
	background: none;
	border: none;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}

.mva-modal-tab:hover {
	color: var(--mv-admin-text);
}

.mva-modal-tab.active {
	color: var(--mv-admin-accent);
	border-bottom-color: var(--mv-admin-accent);
}

.mva-modal-tab-panel {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.mva-modal-tab-panel[hidden] {
	display: none;
}

/* Library grid inside modal */
.mva-modal-lib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}

.mva-modal-lib-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mv-admin-text-secondary);
	font-size: 13px;
	padding: 20px 0;
}

.mva-modal-lib-empty {
	color: var(--mv-admin-text-secondary);
	font-size: 13px;
	padding: 20px 0;
}

.mva-modal-media-item {
	background: var(--mv-admin-surface-alt);
	border: 2px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 6px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 5px;
	overflow: hidden;
}

.mva-modal-media-item:hover {
	border-color: var(--mv-admin-accent);
}

.mva-modal-media-item.selected {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px var(--mv-admin-accent-dim);
}

.mva-modal-media-item img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
	background: var(--mv-admin-border);
}

.mva-modal-media-filename {
	font-size: 10px;
	color: var(--mv-admin-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

/* =============================================================================
   UPLOAD DROPZONE
   ============================================================================= */

.mva-upload-dropzone {
	border: 2px dashed var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 48px 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--mv-admin-text-secondary);
}

.mva-upload-dropzone:hover,
.mva-upload-dropzone--over {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-accent-dim);
	color: var(--mv-admin-accent);
}

.mva-upload-dropzone svg {
	opacity: 0.5;
}

.mva-upload-dropzone--over svg {
	opacity: 1;
}

.mva-upload-dropzone-text {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	color: inherit;
}

.mva-upload-dropzone-hint {
	font-size: 12px;
	margin: 0;
	color: var(--mv-admin-text-secondary);
}
/* "Uploading into <folder>" — shown only when the library page opened the
   modal with a folder (a folder is also a gallery). */
.mva-upload-folder-note {
	margin-top: 8px;
	color: var(--mv-admin-text);
}

/* Free photos tab (media modal): a search row above the shared library grid.
   The row wraps on a narrow modal, so it needs no breakpoint of its own. */
.mva-free-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.mva-free-search .mva-input {
	flex: 1 1 200px;
	width: auto;
}
.mva-free-search .mva-select {
	flex: 0 0 auto;
	width: auto;
}
.mva-free-note {
	margin-bottom: 12px;
}
/* Photos are chosen by eye, so the tiles are larger than the library's. */
.mva-modal-lib-grid--photos {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.mva-modal-lib-grid--photos .mva-modal-media-item img {
	height: 110px;
}
.mva-modal-media-item--busy {
	opacity: 0.6;
	pointer-events: none;
}

.mva-upload-progress {
	padding: 32px 0;
	text-align: center;
}

.mva-upload-progress-bar {
	height: 6px;
	background: var(--mv-admin-border);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 12px;
}

.mva-upload-progress-fill {
	height: 100%;
	background: var(--mv-admin-accent);
	border-radius: 3px;
	transition: width 0.2s ease;
	width: 0%;
}

.mva-upload-progress-label {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0;
}

.mva-upload-error {
	margin-top: 12px;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--mv-admin-radius);
	color: #991b1b;
	font-size: 13px;
}

/* =============================================================================
   MEDIA LIBRARY PAGE
   ============================================================================= */

.mva-media-lib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.mva-media-lib-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mv-admin-text-secondary);
	padding: 24px 0;
}

.mva-media-lib-empty {
	color: var(--mv-admin-text-secondary);
	padding: 24px 0;
}

.mva-media-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mva-media-thumb {
	aspect-ratio: 4/3;
	background: var(--mv-admin-surface-alt);
	overflow: hidden;
	cursor: pointer;
	position: relative;  /* anchor for .mva-media-folder-pill overlay */
}

.mva-media-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s;
	pointer-events: none;
}

.mva-media-thumb:hover img {
	transform: scale(1.03);
}

.mva-media-meta {
	padding: 8px 10px 4px;
	flex: 1;
}

.mva-media-filename {
	font-size: 12px;
	font-weight: 500;
	color: var(--mv-admin-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-media-info {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	margin-top: 2px;
}

.mva-media-actions {
	padding: 8px 10px;
	border-top: 1px solid var(--mv-admin-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mva-media-inuse-badge {
	font-size: 11px;
}

/* In-use badge as clickable button (opens usage modal) */
button.mva-media-inuse-badge {
	cursor: pointer;
	border: none;
	font: inherit;
	font-size: 11px;
	transition: filter .12s ease;
}
button.mva-media-inuse-badge:hover {
	filter: brightness(0.95);
}
.mva-media-inuse-badge-icon {
	margin-left: 4px;
	opacity: 0.7;
}

/* Usage modal — list of pages/blocks where a media item is referenced */
.mva-usage-intro {
	margin-top: 0;
	color: var(--mv-admin-text-secondary);
}
.mva-usage-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mva-usage-list-item {
	padding: 10px 12px;
	border: 1px solid var(--mv-admin-border);
	border-radius: 6px;
	margin-bottom: 8px;
}
.mva-usage-list-item:last-child {
	margin-bottom: 0;
}
.mva-usage-page-link {
	font-weight: 600;
	text-decoration: none;
}
.mva-usage-page-link:hover {
	text-decoration: underline;
}
.mva-usage-detail {
	color: var(--mv-admin-text-secondary);
	font-size: 13px;
	margin-top: 2px;
}

.mva-media-lib-pagination {
	margin-top: 24px;
}

/* =============================================================================
   SPINNER ANIMATION
   ============================================================================= */

@keyframes mva-spin {
	to { transform: rotate(360deg); }
}

.mva-spinner {
	animation: mva-spin 0.8s linear infinite;
	transform-origin: center;
}

/* =============================================================================
   PAGINATION (shared — media library + modal)
   ============================================================================= */

.mva-pagination {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.mva-pagination-btn {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 5px 10px;
	font-size: 13px;
	cursor: pointer;
	color: var(--mv-admin-text);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mva-pagination-btn:hover {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
}

.mva-pagination-btn.active {
	background: var(--mv-admin-accent);
	border-color: var(--mv-admin-accent);
	color: #fff;
}

/* =============================================================================
   APPEARANCE — LOGO & FAVICON UPLOAD
   ============================================================================= */

.mva-appearance-card {
	margin-bottom: 16px;
}

.mva-appearance-hint {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 16px;
}

.mva-appearance-asset-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.mva-appearance-asset-preview {
	width: 200px;
	min-height: 80px;
	flex-shrink: 0;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mva-appearance-asset-preview img {
	max-width: 100%;
	max-height: 100px;
	display: block;
	object-fit: contain;
	padding: 8px;
}

.mva-appearance-asset-preview--small {
	width: 80px;
	min-height: 80px;
}

.mva-appearance-asset-preview--small img {
	max-height: 60px;
}

.mva-appearance-asset-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--mv-admin-text-secondary);
	padding: 16px 8px;
	text-align: center;
}

.mva-appearance-asset-empty span {
	font-size: 11px;
}

.mva-appearance-asset-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	justify-content: center;
}

.mva-appearance-asset-note {
	font-size: 12px;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--mv-admin-radius);
	padding: 5px 10px;
	margin: 0;
	display: flex;
	align-items: center;
}

/* .mva-appearance-save-bar {
	position: sticky;
	bottom: 0;
	background: var(--mv-admin-surface);
	border-top: 1px solid var(--mv-admin-border);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 -24px -24px;
	z-index: 10;
} */

.mva-appearance-save-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mva-appearance-save-bar[hidden] {
	display: none;
}

.mva-appearance-save-hint {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0;
	flex: 1;
}

/* Design save bar — one staged save across Template + Colour scheme + Fonts +
   Header + Footer. Sibling of .mva-appearance-save-bar above (which covers logo
   / favicon and posts to a different endpoint).

   FIXED, not sticky. It was sticky, and sticky only floats while its containing
   block is still in view — on an element that IS the end of the document there
   is no room below it to float into, so it behaved statically and the dealer had
   to scroll to the very bottom of a seven-card page to reach Save. Fixed is the
   whole point: the bar is reachable from wherever they happen to be working.
   Offset by the sidebar so it spans the content column rather than sliding under
   the nav; the sidebar is z-index 100 (200 open on mobile) and modals are 1000,
   so both correctly cover it. */
.mva-design-save-bar {
	position: fixed;
	bottom: 16px;
	left: calc(var(--mva-sidebar-width) + 24px);
	right: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 20;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.mva-design-save-bar[hidden] {
	display: none;
}

/* Out of flow, so the last card would sit under the bar once scrolled to the
   bottom — and the last card is the Footer one, whose switches are the very
   thing being changed. The class is toggled with the bar rather than applied
   permanently, or every clean page would carry a gap for a bar that is not
   there. */
body.mva-has-design-bar .mva-content {
	padding-bottom: 96px;
}

.mva-design-save-hint {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	flex: 1;
}

/* Unsaved marker on a card whose staged state differs from what is saved.
   The single bar says SOMETHING is unsaved; this says WHICH — the part the
   dealer was actually missing on a page this tall. Every dirty state is
   attributable to exactly one card (see _apCardDirty), so the bar showing while
   no card is marked would be a bug, not a valid state.

   Worn alongside .mva-badge--warning, which already carries the pill shape, the
   type and the palette; this modifier adds only what differs — the gap it sits
   in and the dot. */
.mva-card-flag {
	gap: 5px;
	margin-left: 10px;
	vertical-align: 1px;
}

.mva-card-flag[hidden] {
	display: none;
}

.mva-card-flag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Right-hand control group in the theme-preview modal header (Appearance
   popover + Save + close), so .mva-modal-header's space-between keeps them
   together against the title rather than spreading all four evenly. */
.mva-tp-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── Preview viewport (device) toggle ────────────────────────────────────────
   Shared segmented control for every surface embedding a live tenant preview:
   the custom-colour editor, the Appearance theme preview, and the page-builder
   canvas. Markup: mv-admin/views/partials/viewport-toggle.php (also the source
   of truth for the view list). Driver: /admin/assets/js/viewport-toggle.js.

   The preview renders at a FIXED LOGICAL WIDTH and is scaled to fit its pane,
   rather than the pane's physical width deciding the layout (Desktop treats
   its 1440 as a MINIMUM and fills a wider pane at 1:1). Without that, a
   380px control column leaves a laptop's preview short of Bootstrap's lg
   breakpoint, so theme chrome that is d-none d-lg-block (Forge's secondary nav
   band) never renders — and its colour picker edits something invisible. */
.mva-vp-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
}
.mva-vp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 24px;
	padding: 0;
	font-size: 13px;
	line-height: 1;
	background: none;
	border: 0;
	border-radius: calc(var(--mv-admin-radius) - 1px);
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mva-vp-btn:hover { background: var(--mv-admin-surface); color: var(--mv-admin-text); }
.mva-vp-btn.is-active { background: var(--mv-admin-accent); color: #fff; }

/* Scaled-preview geometry. Both classes are added by the driver on attach, not
   in the markup, so a surface without a toggle keeps exactly the sizing it had.
   The iframe is taken out of flow and its width / height / transform written
   inline — every pane that hosts one already sizes itself from its own flex
   context, never from the iframe, so nothing collapses. */
.mva-vp-pane { position: relative; overflow: hidden; }
.mva-vp-frame { position: absolute; top: 0; left: 0; display: block; border: 0; }

/* Device shell for the tablet / phone views. The driver creates it as the
   iframe's NEXT sibling (never a wrapper — reparenting an iframe reloads it),
   sizes it, and writes its border width inline from the partial's data-vp-bezel
   so that number has one home. It paints OVER the iframe: the border is the
   bezel, the middle is transparent, and pointer-events: none lets clicks fall
   through to the page. The pane carries data-vp-device while a device view is
   active, which is what rounds the iframe's own corners into a screen. */
.mva-vp-device {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	transform-origin: top left;
	border-style: solid;
	border-color: var(--mv-admin-dark);
	background: transparent;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.mva-vp-device[data-vp-device="phone"]  { border-radius: 52px; }
.mva-vp-device[data-vp-device="tablet"] { border-radius: 30px; }
.mva-vp-pane[data-vp-device="phone"]  .mva-vp-frame { border-radius: 38px; background: var(--mv-admin-surface); }
.mva-vp-pane[data-vp-device="tablet"] .mva-vp-frame { border-radius: 8px;  background: var(--mv-admin-surface); }

/* Phone furniture drawn on the screen side: the island (::before) and the home
   indicator (::after). Positioned from the shell's PADDING box, i.e. the screen
   edge, and rotated with the device — island on the short top edge in portrait,
   on the short left edge in landscape. Tablets get the indicator only. */
.mva-vp-device::before,
.mva-vp-device::after {
	content: '';
	position: absolute;
	border-radius: 999px;
}
.mva-vp-device[data-vp-device="phone"]::before { background: var(--mv-admin-dark-hover); }
.mva-vp-device[data-vp-device="tablet"]::before { display: none; }
.mva-vp-device::after { background: var(--mv-admin-dark); opacity: 0.55; }

.mva-vp-device[data-vp-orient="portrait"]::before  { top: 12px; left: 50%; width: 112px; height: 34px; transform: translateX(-50%); }
.mva-vp-device[data-vp-orient="landscape"]::before { left: 12px; top: 50%; width: 34px; height: 112px; transform: translateY(-50%); }
.mva-vp-device[data-vp-orient="portrait"]::after   { bottom: 9px; left: 50%; width: 132px; height: 5px; transform: translateX(-50%); }
.mva-vp-device[data-vp-orient="landscape"]::after  { right: 9px; top: 50%; width: 5px; height: 132px; transform: translateY(-50%); }

/* ── Appearance popover — compact Template / Scheme / Fonts ──────────────────
   Styles for mv-admin/views/partials/appearance-pickers.php: the toolbar-sized
   picker trio that sits beside a live preview. Shared, not per-view — BOTH the
   Appearance preview modal and the page-builder top bar render that partial,
   and the editor's inline copies of these rules were removed when it adopted it.
   The .mva-ap-pop / -summary / -caret / -menu / -note rules below dress the
   Appearance modal's own popover wrapper; the editor supplies its own chrome
   (.mva-appearance*, styled locally) around the same groups.
   Built on <details>/<summary> so open/close needs no JS. */
.mva-ap-pop { position: relative; }

.mva-ap-pop-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}
.mva-ap-pop-summary::-webkit-details-marker { display: none; }
.mva-ap-pop-summary::marker { content: ""; }
.mva-ap-pop-summary:hover { background: var(--mv-admin-bg); }
.mva-ap-pop[open] .mva-ap-pop-summary {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
}
.mva-ap-pop-caret { font-size: 11px; opacity: 0.7; }
.mva-ap-pop[open] .mva-ap-pop-caret { transform: rotate(180deg); }

.mva-ap-pop-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	width: 300px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 14px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	text-align: left;
}

.mva-ap-pop-group + .mva-ap-pop-group {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mv-admin-border);
}
.mva-ap-pop-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 8px;
}
.mva-ap-pop-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.mva-ap-pop-grid--scheme {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.mva-ap-pop-opt,
.mva-ap-pop-swatch-opt,
.mva-ap-pop-custom-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 12px;
	font-family: inherit;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	color: inherit;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mva-ap-pop-opt:hover,
.mva-ap-pop-swatch-opt:hover,
.mva-ap-pop-custom-btn:hover { background: var(--mv-admin-bg); }

.mva-ap-pop-opt.is-active,
.mva-ap-pop-swatch-opt.is-active {
	border-color: var(--mv-admin-accent);
	color: var(--mv-admin-accent);
	font-weight: 600;
}

.mva-ap-pop-swatch-opt { justify-content: flex-start; overflow: hidden; }
.mva-ap-pop-swatch-opt--wide { width: 100%; margin-top: 6px; }
.mva-ap-pop-swatches { display: inline-flex; flex: 0 0 auto; }
.mva-ap-pop-swatch {
	width: 12px;
	height: 18px;
	display: block;
	border: 1px solid var(--mv-admin-border);
}
.mva-ap-pop-swatch:not(:first-child) { border-left: 0; }
.mva-ap-pop-swatch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mva-ap-pop-custom-btn { width: 100%; margin-top: 8px; justify-content: center; }

/* Font chips carry their pairing's real typefaces (inline font-family, since
   the value comes from font-pairs.php). The name takes the HEADING face and the
   "Aa" the BODY face — a pairing is two fonts, and two of ours would be
   misread from the heading alone.
   Baselines differ wildly across ~20 display faces, so the two spans are
   centred against each other rather than sharing a baseline, and the chip gets
   a min-height so the row doesn't jump as faces swap in. */
.mva-ap-pop-font { align-items: center; gap: 8px; min-height: 34px; }
.mva-ap-pop-font-name {
	font-size: 14px;
	line-height: 1.2;
	/* Synthesised bold — the preview stylesheet loads regular weight only, on
	   purpose (see font-preview-css.php). */
	font-weight: 700;
}
.mva-ap-pop-font-sample {
	font-size: 12px;
	line-height: 1.2;
	opacity: 0.6;
	flex: 0 0 auto;
}

.mva-ap-pop-note {
	margin: 14px 0 0;
	font-size: 11px;
	line-height: 1.45;
	font-style: italic;
	color: var(--mv-admin-text-secondary);
}

.mva-appearance-divider {
	border: none;
	border-top: 1px solid var(--mv-admin-border);
	margin: 20px 0;
}

.mva-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mv-admin-text);
	cursor: pointer;
	user-select: none;
}

.mva-toggle-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--mv-admin-accent);
}

.mva-oh-location-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}

/* =============================================================================
   TEMPLATE PICKER
   ============================================================================= */

.mva-theme-intro {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mv-admin-text-secondary);
}

.mva-theme-intro p,
.mva-theme-intro ul {
	margin: 0 0 10px;
}

.mva-theme-intro ul {
	padding-left: 18px;
}

.mva-theme-intro li + li {
	margin-top: 4px;
}

.mva-theme-intro strong {
	color: var(--mv-admin-text);
}

.mva-theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.mva-theme-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background: var(--mv-admin-bg);
	border: 2px solid var(--mv-admin-border);
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
	position: relative;
}

.mva-theme-card:hover:not(:disabled) {
	border-color: var(--mv-admin-accent);
}

.mva-theme-card--active {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.mva-theme-card--unavailable {
	opacity: 0.5;
	cursor: not-allowed;
}

.mva-theme-card-preview {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background: var(--mv-admin-surface-alt);
	line-height: 0;
}

/* A design style drawn from its own values (DesignStyle::diagram()): page
   width, spacing, corners, borders, card depth, heading, price and button.
   Hovering the card replays the style's entrance and its card hover. */
.mva-ds-frame {
	position: relative;
	width: 100%;
	height: 100%;
	container-type: inline-size;
}

.mva-ds-mini {
	width: 72px;
	margin: 0 auto;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	border: 1px solid var(--mv-admin-border);
	border-radius: 3px;
}

.mva-ds {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
	background: var(--mv-admin-surface-alt);
	line-height: 1.2;
}

.mva-ds-page {
	box-sizing: border-box;
	width: 88%;
	padding: calc(4cqw * var(--ds-d)) 0;
	display: flex;
	flex-direction: column;
	gap: calc(3cqw * var(--ds-d));
}

.mva-ds[data-width="narrow"] .mva-ds-page { width: 74%; }
.mva-ds[data-width="wide"] .mva-ds-page { width: 94%; }
.mva-ds[data-width="full"] .mva-ds-page { width: 100%; padding-left: 3cqw; padding-right: 3cqw; }

.mva-ds-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3cqw;
}

.mva-ds-h,
.mva-ds-btn {
	text-transform: var(--ds-case);
	letter-spacing: calc(0.08em * var(--ds-t));
	white-space: nowrap;
}

.mva-ds-h {
	font-size: calc(4.6cqw * var(--ds-h));
	font-weight: 800;
	color: var(--mv-admin-text);
}

.mva-ds-btn {
	flex-shrink: 0;
	padding: 1.4cqw 2.6cqw;
	font-size: 3.2cqw;
	font-weight: 700;
	color: var(--mv-admin-surface);
	background: var(--mv-admin-accent);
	border-radius: var(--ds-r);
}

.mva-ds[data-btn="pill"] .mva-ds-btn { border-radius: 999px; }
.mva-ds[data-hover*="arrow"] .mva-ds-btn::after { content: " \2192"; }

.mva-ds-cards {
	display: grid;
	grid-template-columns: repeat(var(--ds-cards), 1fr);
	gap: calc(2.5cqw * var(--ds-d));
}

.mva-ds-card {
	position: relative;
	overflow: hidden;
	background: var(--mv-admin-surface);
	border: var(--ds-b) solid var(--mv-admin-border);
	border-radius: var(--ds-r);
	transition: transform 0.2s ease-out;
}

.mva-ds[data-depth="soft"] .mva-ds-card { box-shadow: 0 0.5cqw 1cqw rgba(0, 0, 0, 0.12); }
.mva-ds[data-depth="raised"] .mva-ds-card { box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.2); }
.mva-ds[data-depth="offset"] .mva-ds-card { box-shadow: 0.9cqw 0.9cqw 0 color-mix(in srgb, var(--mv-admin-accent) 45%, transparent); }
.mva-ds[data-depth="glow"] .mva-ds-card { box-shadow: 0 1cqw 4cqw color-mix(in srgb, var(--mv-admin-accent) 45%, transparent); }

.mva-ds-img {
	aspect-ratio: 16 / 9;
	background: var(--mv-admin-neutral-dim);
}

.mva-ds-body {
	display: flex;
	flex-direction: column;
	gap: 1.5cqw;
	padding: calc(2cqw * var(--ds-d));
}

.mva-ds-line {
	width: 70%;
	height: 1.5cqw;
	border-radius: 1cqw;
	background: var(--mv-admin-border);
}

.mva-ds-price {
	align-self: flex-start;
	font-size: 3.6cqw;
	font-weight: 800;
	color: var(--mv-admin-text);
}

.mva-ds[data-price="accent"] .mva-ds-price { font-size: 4cqw; color: var(--mv-admin-accent); }
.mva-ds[data-price="pill"] .mva-ds-price { padding: 0.5cqw 1.8cqw; font-size: 3.2cqw; color: var(--mv-admin-surface); background: var(--mv-admin-accent); border-radius: 999px; }
.mva-ds[data-price="quiet"] .mva-ds-price { font-size: 3.2cqw; font-weight: 600; }

.mva-ds[data-hover*="line"] .mva-ds-card:first-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1cqw;
	background: var(--mv-admin-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease-out;
}

.mva-theme-card:hover .mva-ds[data-hover*="line"] .mva-ds-card:first-child::after { transform: scaleX(1); }
.mva-theme-card:hover .mva-ds-card:first-child { transform: translateY(calc(-1 * var(--ds-lift))); }

.mva-theme-card:hover .mva-ds-card {
	animation: mva-ds-in var(--ds-dur) var(--ds-ease) both;
	animation-delay: calc(var(--i) * var(--ds-step));
}

@keyframes mva-ds-in {
	from {
		opacity: var(--ds-op);
		transform: var(--ds-from);
	}
}

.mva-theme-card-info {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mva-theme-card-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

/* The whole tagline, never clamped (Matt, 2026-10-19). The card keeps room
   for the Preview button below it, and cards in a row stretch to one height. */
.mva-theme-card-tagline {
	font-size: 11px;
	line-height: 1.35;
	color: var(--mv-admin-text-secondary);
	text-align: left;
}

/* Extended copy for the staged style, under the grid. Its own surface rather
   than more body text, so it reads as belonging to the selection above it. */
.mva-theme-descr {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--mv-admin-bg-subtle, #f8fafc);
	border: 1px solid var(--mv-admin-border);
	border-radius: 6px;
}

/* .mva-card-title carries a 16px bottom margin for use as a CARD heading. Inside
   this panel it is a small label directly above its own paragraph, so the gap is
   tightened rather than a new class being introduced — the styling is the card
   title's, only the spacing differs. */
.mva-theme-descr .mva-card-title {
	margin-bottom: 6px;
}

.mva-theme-descr-body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary);
}

/* =============================================================================
   COLOUR SCHEME PICKER
   ============================================================================= */

.mva-scheme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.mva-scheme-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--mv-admin-bg);
	border: 2px solid var(--mv-admin-border);
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
	position: relative;
}

.mva-scheme-card:hover {
	border-color: var(--mv-admin-accent);
}

.mva-scheme-card--active {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px rgba(var(--mv-admin-accent-rgb, 59,130,246), 0.15);
}

.mva-scheme-swatches {
	display: flex;
	gap: 5px;
}

.mva-scheme-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.mva-scheme-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-scheme-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

.mva-scheme-desc {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.4;
}

.mva-scheme-check {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mv-admin-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s;
}

.mva-scheme-card--active .mva-scheme-check {
	opacity: 1;
}

/* =============================================================================
   CHROME PICKER — header / footer shape + element switches
   Deliberately thin. A shape card, a nav-mode card and a colour-scheme card are
   the same object — a selectable tile with a name, a line of description and a
   tick — so they wear .mva-scheme-card wholesale and only what actually differs
   lives here. Anything added below that is NOT specific to chrome belongs up
   there in the base instead.
   ============================================================================= */

/* Wider track than the colour swatches need: these cards carry a wireframe and
   a full sentence, and at 180px the description wraps to four lines. */
.mva-scheme-grid--wide {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* The wireframe slot. currentColor throughout the SVG, so the diagram inherits
   the card's text colour and needs no separate active/inactive palette. */
.mva-shape-wire {
	display: block;
	border-radius: 6px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	color: var(--mv-admin-text-secondary);
	overflow: hidden;
}

.mva-shape-wire svg {
	display: block;
	width: 100%;
	height: auto;
}

.mva-scheme-card--active .mva-shape-wire {
	color: var(--mv-admin-accent);
	border-color: var(--mv-admin-accent);
}

/* A labelled group inside a card — the nav-mode choice and the switch list. */
.mva-chrome-block {
	margin-top: 22px;
}

.mva-chrome-block-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 10px;
}

/* The -4px top margin here used to be unconditional, from when a note only ever
   followed the block heading and wanted pulling up under it. Notes now also follow
   CARD GRIDS — the strip choice, the column count — where a negative margin lifts
   the text into the cards above it. Tightened only in the position it was written
   for. */
.mva-chrome-block-note {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.5;
	margin: 10px 0 12px;
}

.mva-chrome-block-label + .mva-chrome-block-note {
	margin-top: -4px;
}

/* Rows are wide — a label on the far left and two selects on the far right — so
   without a rule and a stripe the eye loses the line on the way across and picks
   the neighbouring control. Worse on a high-DPI screen, where a 1px rule alone is
   faint. The stripe is applied by JS rather than :nth-child because rows are
   HIDDEN per shape: a hidden row still counts to the selector, so any shape that
   hides one would show two adjacent stripes the same colour. */
.mva-chrome-rows {
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	overflow: hidden;
}

/* Ruled on every row and removed from the first VISIBLE one, rather than
   `* + *` — a hidden first row still leaves its successor as the visual top of
   the list, which would then draw a stray rule against the container border. */
.mva-chrome-rows > * {
	border-top: 1px solid var(--mv-admin-border);
}

.mva-chrome-rows > .is-row-first {
	border-top: 0;
}

.mva-chrome-rows > .is-alt {
	background: var(--mv-admin-surface-alt);
}

/* .mva-toggle-label centres its content, which is right for a one-line switch
   and wrong for one carrying a hint underneath — hence the two overrides. */
.mva-chrome-toggle {
	display: flex;
	align-items: flex-start;
	padding: 8px 12px;
}

.mva-chrome-toggle input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
}

/* .mva-chrome-toggle--fixed lived here: the indent for a structural element's
   row, which had a placement but no switch. Both surfaces place by dragging now,
   so a row with no switch has no control at all and is not rendered — the
   element is still there as a chip in the Layout grid. */
.mva-chrome-toggle-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-chrome-toggle-hint {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.4;
}

/* The one select left in the chrome settings, in a footer column's head. Its
   wrapper (.mva-chrome-place, a flex group at the end of a switch row) went with
   the per-element placement selects it used to hold — both surfaces place things
   by dragging now, and the switch rows are visibility only. */
.mva-chrome-place-sel {
	font-size: 11px;
	padding: 3px 6px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	cursor: pointer;
}

.mva-chrome-place-sel:focus {
	outline: 2px solid var(--mv-admin-accent);
	outline-offset: 1px;
}

/* ── Dealer style controls (Shape & Spacing, and Type detail in Font Style) ───
   One ruled row per control, label left and select right. Rows sit inside
   .mva-chrome-rows so they inherit its border, its ruling and its striping —
   those are generic child selectors, so a row does not have to be a chrome
   toggle to get them, and the JS that stamps is-row-first / is-alt by VISIBLE
   position covers these too.

   A grouped block rather than one flat list of nine: "Layout" and "Surfaces"
   answer different questions, and an undifferentiated column of selects is
   where a settings page stops being read. */
.mva-style-block + .mva-style-block {
	margin-top: 22px;
}

/* The Type detail block sits under the pairing grid in the Font Style card and
   needs the same separation a sibling block gets. The PHP between them emits no
   nodes, so they are genuine element siblings. */
.mva-font-grid + .mva-style-block {
	margin-top: 26px;
}

.mva-style-block-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 8px;
}

.mva-style-block-note {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.5;
	margin: -2px 0 10px;
}

/* Label and select on ONE line with the label taking the slack, so every select
   lines up down the right regardless of how long a label runs. align-items is
   flex-start rather than center because a row carrying help text is two lines
   tall and its select should sit with the label, not float in the middle. */
.mva-style-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	margin: 0;
	cursor: pointer;
}

.mva-style-row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 13px;
	color: var(--mv-admin-text);
}

.mva-style-row-help {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	line-height: 1.4;
}

/* flex-shrink: 0 so a long help line cannot squeeze the select down to its
   arrow; the label wraps instead, which is the one of the two that can. */
.mva-style-select {
	flex: 0 0 auto;
	min-width: 150px;
	font-size: 12px;
	padding: 4px 8px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	cursor: pointer;
}

.mva-style-select:focus {
	outline: 2px solid var(--mv-admin-accent);
	outline-offset: 1px;
}

@media (max-width: 600px) {
	/* Stack rather than let a 150px select and a wrapping label fight over a
	   narrow row — below this the two-column arrangement stops reading. */
	.mva-style-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.mva-style-select {
		width: 100%;
	}
}

/* ── Header layout grid ───────────────────────────────────────────────────────
   Six drop targets — two rows by three ends — that the dealer drags chips
   between. Replaces the row/zone selects: a drag sets row, end AND order in one
   gesture, and order has no honest dropdown equivalent.
   Deliberately mirrors the thing it configures, so the control reads as the
   header it is describing rather than as a form. */
.mva-zone-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mva-zone-row-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--mv-admin-text-secondary);
}

/* The strip row stays usable when the strip is off — an element parked there
   could not otherwise be moved out — so it says so rather than disappearing. */
.mva-zone-row-off {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mv-admin-warning-text);
	background: var(--mv-admin-warning-dim);
	border-radius: 999px;
	padding: 1px 8px;
}

.mva-zone-row-off[hidden] {
	display: none;
}

.mva-zone-row[hidden] {
	display: none;
}

/* Strip switched off but still holding something. Its drop zones are closed —
   nothing new goes in — while what is already there stays draggable OUT, so the
   row can be emptied and then disappears on its own. */
.mva-zone-row.is-closed .mva-zone-drop {
	border-style: dotted;
	opacity: 0.65;
}

/* --zone-cells so a surface sets its own track count without a class per count.
   The header is always three ends; the footer follows the dealer's column
   picker, and the same grid then serves both.
   minmax(0, 1fr) rather than 1fr: a track's default minimum is its content, so a
   long chip label would otherwise push the grid wider than its card. */
.mva-zone-cells {
	display: grid;
	grid-template-columns: repeat(var(--zone-cells, 3), minmax(0, 1fr));
	gap: 8px;
}

.mva-zone-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mva-zone-cell[hidden] {
	display: none;
}

/* A flex row on the BASE, not on the footer's cells alone: the footer's head
   carries an alignment control beside the name and the header's carries only the
   name, and putting the row on just the one that needs it today is how the header
   ended up with six bugs whose single cause was a shared property living in a
   per-shape utility. min-height keeps the two surfaces' drop zones on the same
   line as each other when they sit side by side. */
.mva-zone-cell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 22px;
}

.mva-zone-cell-name {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-zone-drop {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 54px;
	padding: 8px;
	border: 1px dashed var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface-alt);
}

/* An empty target has to stay an obvious target — it is the thing you are
   dragging TO, so it keeps its full height rather than collapsing. */
.mva-zone-drop.is-empty {
	background: transparent;
}

.mva-zone-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	font-size: 12px;
	text-align: left;
	cursor: grab;
}

.mva-zone-chip[hidden] {
	display: none;
}

.mva-zone-chip:focus-visible {
	outline: 2px solid var(--mv-admin-accent);
	outline-offset: 1px;
}

/* Switched off is not the same as unplaceable: the switch list owns visibility,
   and a dealer has to be able to position something before turning it on. */
.mva-zone-chip.is-off {
	opacity: 0.5;
}

.mva-zone-chip.is-ghost {
	opacity: 0.4;
}

.mva-zone-chip-grip {
	color: var(--mv-admin-text-secondary);
	flex-shrink: 0;
	line-height: 1;
}

.mva-zone-live {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 8px 0 0;
	min-height: 1em;
}

/* Column-count picker. Each option draws its own count as vertical bars, which
   says "three columns" faster than the numeral does.
   One picker PER ROW — the footer's top row carries its own count — so each is
   labelled and the set stacks. */
.mva-chrome-colrow + .mva-chrome-colrow {
	margin-top: 14px;
}

.mva-chrome-colrow[hidden] {
	display: none;
}

.mva-chrome-colrow-name {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--mv-admin-text-secondary);
}

.mva-chrome-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mva-chrome-col-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 84px;
	padding: 10px;
	background: var(--mv-admin-bg);
	border: 2px solid var(--mv-admin-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.mva-chrome-col-opt:hover { border-color: var(--mv-admin-accent); }

.mva-chrome-col-opt.is-active {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px rgba(var(--mv-admin-accent-rgb, 59,130,246), 0.15);
}

.mva-chrome-col-wire {
	display: flex;
	gap: 3px;
	width: 100%;
	height: 26px;
}

.mva-chrome-col-wire span {
	flex: 1;
	border-radius: 2px;
	background: var(--mv-admin-text-secondary);
	opacity: 0.35;
}

.mva-chrome-col-opt.is-active .mva-chrome-col-wire span {
	background: var(--mv-admin-accent);
	opacity: 0.55;
}

.mva-chrome-col-num {
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

/* =============================================================================
   MEDIA LIGHTBOX
   ============================================================================= */

.mva-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}

.mva-lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
}

.mva-lightbox-inner img {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--mv-admin-radius);
	box-shadow: 0 8px 40px rgba(0,0,0,0.6);
	cursor: default;
}

.mva-lightbox-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: var(--mv-admin-text);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s;
}

.mva-lightbox-close:hover {
	background: var(--mv-admin-accent);
}

/* =============================================================================
   MULTI-FILE UPLOAD — FILE LIST
   ============================================================================= */

.mva-upload-file-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mva-upload-file-item {
	font-size: 12px;
	padding: 5px 10px 5px 26px;
	border-radius: var(--mv-admin-radius);
	position: relative;
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mva-upload-file-item::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mv-admin-border);
}

.mva-upload-file-item--uploading::before {
	background: #f59e0b;
	animation: mva-spin 0.8s linear infinite;
}

.mva-upload-file-item--done {
	color: #166534;
	background: var(--mv-admin-success-dim);
}

.mva-upload-file-item--done::before {
	background: var(--mv-admin-success);
}

.mva-upload-file-item--error {
	color: #991b1b;
	background: #fef2f2;
}

.mva-upload-file-item--error::before {
	background: #dc2626;
}

/* =============================================================================
   MEDIA LIBRARY — LAYOUT (SIDEBAR + MAIN), FILTERS, TOOLBAR
   ============================================================================= */

/* Sidebar + main two-column layout. Sidebar is fixed-width on desktop;
   stacks above content on narrow viewports. */
.mva-media-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 20px;
	align-items: start;
}

.mva-media-sidebar {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 12px;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.mva-media-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 8px 12px;
	border-bottom: 1px solid var(--mv-admin-border);
	margin-bottom: 8px;
}

.mva-media-sidebar-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mv-admin-text-secondary);
}

.mva-media-new-folder-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: 12px;
}

.mva-media-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mva-media-folder-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--mv-admin-text);
	transition: background 0.12s ease;
	position: relative;
}

.mva-media-folder-item:hover {
	background: var(--mv-admin-surface-alt);
}

.mva-media-folder-item--active {
	background: var(--mv-admin-accent-soft, #e7f0ff);
	color: var(--mv-admin-accent, #2563eb);
	font-weight: 600;
}

.mva-media-folder-item--active:hover {
	background: var(--mv-admin-accent-soft, #e7f0ff);
}

.mva-media-folder-name {
	flex: 1;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.mva-media-folder-count {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.mva-media-folder-item--active .mva-media-folder-count {
	color: var(--mv-admin-accent, #2563eb);
}

.mva-media-folder-actions {
	display: none;
	gap: 2px;
	flex-shrink: 0;
}

.mva-media-folder-item:hover:not(.mva-media-folder-item--system) .mva-media-folder-actions {
	display: inline-flex;
}

.mva-media-folder-item:hover:not(.mva-media-folder-item--system) .mva-media-folder-count {
	display: none;
}

.mva-media-folder-action-btn {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mva-media-folder-action-btn:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--mv-admin-text);
}

.mva-media-folder-action-btn--danger:hover {
	background: rgba(220, 38, 38, 0.1);
	color: #dc2626;
}

.mva-media-folder-divider {
	height: 1px;
	background: var(--mv-admin-border);
	margin: 8px 4px;
	list-style: none;
}

/* Main content side ─ filters + toolbar + grid */
.mva-media-main {
	min-width: 0;  /* prevent grid blowout when filenames are very long */
}

.mva-media-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.mva-media-search {
	flex: 1;
	min-width: 200px;
	max-width: 360px;
}

/* Lightbox extension — file meta + move picker shown below the image. */
.mva-lightbox-meta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.mva-lightbox-filename {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-lightbox-move-row {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
}

.mva-lightbox-move-row label {
	flex-shrink: 0;
	opacity: 0.85;
}

.mva-lightbox-move-row select {
	flex: 1;
	background: rgba(255, 255, 255, 0.95);
	color: #222;
	border: 0;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
}

/* Alt-text editor row inside lightbox detail panel — sits below
   Move-to row, same visual treatment (label + control) but a textarea
   so dealers can write a sentence-length alt description. Auto-saves
   on blur (mirrors the folder-picker's on-change save). */
.mva-lightbox-alt-text-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
}

.mva-lightbox-alt-text-row label {
	flex-shrink: 0;
	opacity: 0.85;
	padding-top: 6px;  /* nudge label to top-align with textarea */
}

.mva-lightbox-alt-text {
	flex: 1;
	background: rgba(255, 255, 255, 0.95);
	color: #222;
	border: 0;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 12px;
	font-family: inherit;
	resize: vertical;
	min-height: 44px;
	max-width: none;  /* override site-wide max-width on textarea */
}

.mva-lightbox-alt-text:disabled {
	opacity: 0.7;
	cursor: progress;
}

/* Lightbox actions row — primary "Save & close" button sits below the
   alt-text textarea, right-aligned. Explicit completion affordance —
   auto-save on blur stays as the safety net. */
.mva-lightbox-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.mva-lightbox-save {
	min-width: 110px;
}

/* Folder name pill — overlays image top-left on the media card. Only
   renders when the image is in a folder AND the dealer isn't currently
   filtering to that folder (avoids dead-end redundancy). Click jumps
   to the folder. */
.mva-media-folder-pill {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	max-width: calc(100% - 16px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background 0.12s ease;
	z-index: 2;
}

.mva-media-folder-pill:hover {
	background: rgba(0, 0, 0, 0.9);
}

/* Edit pencil button in the card actions row — small icon button.
   Sits between the checkbox and the Delete (or In Use badge). Clicking
   opens the lightbox, same outcome as clicking the thumbnail but with
   an explicit "edit metadata" affordance. */
.mva-media-edit-btn {
	background: transparent;
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	padding: 5px 7px;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: background 0.12s ease, color 0.12s ease;
}

.mva-media-edit-btn:hover {
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text);
}

/* =============================================================================
   MEDIA LIBRARY — TOOLBAR, CHECKBOXES, BULK SELECT
   ============================================================================= */

.mva-media-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 12px;
	flex-wrap: wrap;
	min-height: 36px; /* keep height stable when toolbar buttons are hidden */
}

.mva-media-toolbar-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mva-media-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 150px;
}

.mva-select--sm {
	padding: 5px 8px;
	font-size: 13px;
}

.mva-media-select-all-label {
	font-size: 13px;
	font-weight: 500;
}

/* Checkbox in actions row — bottom-left, always visible */
.mva-media-card {
	position: relative;
}

.mva-media-card-checkbox-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mva-media-card-checkbox-wrap input[type="checkbox"] {
	width: 15px;
	height: 15px;
	cursor: pointer;
	accent-color: var(--mv-admin-accent);
	flex-shrink: 0;
}

.mva-media-card:has(.mva-media-checkbox:checked) {
	outline: 2px solid var(--mv-admin-accent);
	outline-offset: -2px;
	border-radius: var(--mv-admin-radius-lg);
}

/* =============================================================================
   MENU ITEM — UNPUBLISHED PAGE WARNING
   ============================================================================= */

.mva-menu-item--warning {
	background: #fffcfc;
	border: 1px solid #dc2626 !important;
	border-radius: var(--mv-admin-radius);
}

.mva-menu-item-warning-banner {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #dc2626;
	padding: 5px 12px;
	border-bottom: 1px solid #fecaca;
	background: #fef2f2;
	border-radius: var(--mv-admin-radius) var(--mv-admin-radius) 0 0;
}

/* =============================================================================
   AUTH PAGES — login, signup, reset
   Standalone branded pages — no sidebar shell
   ============================================================================= */

/* ── Shared auth body ────────────────────────────────────────────────────────── */
.mva-auth-body {
	min-height: 100vh;
	background: var(--mva-brand-navy-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}

/* ── Login / reset — single centred card ─────────────────────────────────────── */
.mva-auth-wrap {
	width: 100%;
	max-width: 420px;
}

.mva-auth-card {
	background: var(--mv-admin-surface);
	border-radius: var(--mv-admin-radius-lg);
	padding: 40px 36px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.32);
}

.mva-auth-logo {
	margin-bottom: 28px;
}

.mva-auth-logo img {
	height: 32px;
	display: block;
}

.mva-auth-heading {
	font-size: 22px;
	font-weight: 700;
	color: var(--mv-admin-text);
	margin: 0 0 6px;
}

.mva-auth-sub {
	font-size: 14px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 24px;
}

.mva-auth-flash {
	margin-bottom: 20px;
}

.mva-auth-forgot {
	float: right;
	font-size: 12px;
	font-weight: 400;
	color: var(--mv-admin-text-secondary);
}

.mva-auth-forgot:hover {
	color: var(--mv-admin-accent);
}

.mva-auth-switch {
	text-align: center;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 20px 0 0;
}

/* ── Email-OTP (new-device verification) ─────────────────────────────────────── */
.mva-otp-input {
	letter-spacing: 6px;
	font-size: 20px;
	text-align: center;
}

.mva-otp-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px;
}

/* ── Superadmin Migrations page ──────────────────────────────────────────────── */
.mva-mig-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.mva-mig-summary {
	display: flex;
	gap: 28px;
}

.mva-mig-stat {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.mva-mig-stat-num {
	font-size: 24px;
	font-weight: 700;
	color: var(--mv-admin-text);
}

.mva-mig-stat-num--warn { color: #b45309; }

.mva-mig-stat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary);
}

.mva-mig-help {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 14px 0 0;
}

.mva-mig-script {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--mv-admin-text);
}

/* ── Support tickets ─────────────────────────────────────────────────────────── */
.mva-support-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	flex-wrap: wrap;
}

.mva-support-tab {
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text-secondary);
	text-decoration: none;
}

.mva-support-tab:hover { background: var(--mv-admin-surface-alt); }

.mva-support-tab--active {
	background: var(--mv-admin-text);
	color: #fff;
}

.mva-support-catfilter { margin-left: auto; }
.mva-support-catfilter select { min-width: 160px; }

.mva-support-row { cursor: pointer; }
.mva-support-subject { font-weight: 600; }

.mva-support-actions { display: flex; gap: 8px; align-items: center; }

.mva-support-thread {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mva-support-msg {
	border: 1px solid var(--mv-admin-border);
	border-radius: 10px;
	padding: 12px 14px;
	max-width: 80%;
}

.mva-support-msg--dealer {
	align-self: flex-start;
	background: var(--mv-admin-surface-alt);
}

.mva-support-msg--support {
	align-self: flex-end;
	background: #eef4ff;
	border-color: #cfe0ff;
}

.mva-support-msg-head {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.mva-support-msg-who { font-weight: 700; font-size: 13px; }
.mva-support-msg-when { font-size: 12px; color: var(--mv-admin-text-secondary); }
.mva-support-msg-body { font-size: 14px; line-height: 1.5; word-break: break-word; }

.mva-support-textarea { resize: vertical; min-height: 90px; }

/* ── Upsell card ("Need custom work / SEO?") ─────────────────────────────────── */
.mva-upsell-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 16px 18px;
	background: var(--mva-tint-success-dim);
	border: 1px solid var(--mv-admin-border);
	border-top: 5px solid var(--mva-tint-success);
	background: var(--mva-feature-bg);
	border-radius: var(--mv-admin-radius-lg);
}

.mva-upsell-icon {
	flex: 0 0 auto;
	color: var(--mva-tint-success);
	margin-top: 1px;
}

.mva-upsell-body { flex: 1 1 auto; }

.mva-upsell-heading {
	font-size: 14px;
	font-weight: 700;
	color: var(--mva-feature-text);
	margin-bottom: 2px;
}

.mva-upsell-blurb {
	font-size: 13px;
	color: var(--mva-feature-muted);
	margin: 0 0 12px;
}

.mva-upsell-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mva-upsell-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--mva-feature-text);
	text-decoration: none;
}

.mva-upsell-more:hover { color: var(--mva-feature-text); text-decoration: underline; }

/* ── Sticky sidebar footer (Help Centre / Get Support) ───────────────────────── */
.mva-nav-footer {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	background: var(--mva-sidebar-bg);
	padding: 10px 12px 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-nav-footer-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--mva-sidebar-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.mva-nav-footer-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.mva-nav-footer-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--mva-sidebar-active); }
.mva-nav-footer-item.active { background: rgba(255, 255, 255, 0.10); color: var(--mva-sidebar-active); }

/* ── Help Centre (dealer) ────────────────────────────────────────────────────── */
.mva-help-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--mv-admin-border);
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mva-help-search svg { color: var(--mv-admin-text-secondary); flex-shrink: 0; }
.mva-help-search input {
	flex: 1 1 auto;
	border: none;
	outline: none;
	font-size: 15px;
	background: transparent;
	color: var(--mv-admin-text);
}
.mva-help-search-clear { font-size: 13px; color: var(--mv-admin-text-secondary); text-decoration: none; }
.mva-help-search-clear:hover { text-decoration: underline; }

.mva-help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.mva-help-cat {
	display: block;
	background: #fff;
	border: 1px solid var(--mv-admin-border);
	border-radius: 12px;
	padding: 20px;
	text-decoration: none;
	transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.mva-help-cat:hover { border-color: #1f9d76; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); transform: translateY(-1px); }

.mva-help-cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: #f3f8f6;
	color: var(--mv-admin-success);
	margin-bottom: 12px;
}

.mva-help-cat-title { display: block; font-size: 15px; font-weight: 700; color: var(--mv-admin-text); margin-bottom: 4px; }
.mva-help-cat-desc { display: block; font-size: 13px; color: var(--mv-admin-text-secondary); line-height: 1.45; margin-bottom: 10px; }
.mva-help-cat-count { display: block; font-size: 12px; font-weight: 600; color: #1f9d76; }

.mva-help-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: center;
	margin-top: 24px;
	padding: 18px;
	background: var(--mv-admin-surface-alt);
	border-radius: 12px;
	font-size: 14px;
	color: var(--mv-admin-text-secondary);
}

.mva-help-list { display: flex; flex-direction: column; }
.mva-help-list-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--mv-admin-border);
	text-decoration: none;
}
.mva-help-list-item:last-child { border-bottom: none; }
.mva-help-list-item:hover .mva-help-list-title { color: #1f9d76; }
.mva-help-list-title { font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }
.mva-help-list-summary { font-size: 13px; color: var(--mv-admin-text-secondary); margin-left: 6px; }
.mva-help-list-chevron { color: var(--mv-admin-text-secondary); margin-left: auto; flex-shrink: 0; }

.mva-help-results-count { font-size: 13px; color: var(--mv-admin-text-secondary); margin: 0 0 12px; }
.mva-help-results { display: flex; flex-direction: column; }
.mva-help-result {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--mv-admin-border);
	text-decoration: none;
}
.mva-help-result:last-child { border-bottom: none; }
.mva-help-result-title { font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }
.mva-help-result:hover .mva-help-result-title { color: #1f9d76; }
.mva-help-result-summary { font-size: 13px; color: var(--mv-admin-text-secondary); }
.mva-help-result-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #1f9d76; margin-top: 2px; }

/* Article body (RTE prose) */
.mva-help-article-body { font-size: 15px; line-height: 1.65; color: var(--mv-admin-text); max-width: 760px; }
.mva-help-article-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.mva-help-article-body h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.mva-help-article-body h4 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.mva-help-article-body p { margin: 0 0 14px; }
.mva-help-article-body ul,
.mva-help-article-body ol { margin: 0 0 14px; padding-left: 24px; }
.mva-help-article-body li { margin: 0 0 6px; }
.mva-help-article-body a { color: #1f9d76; text-decoration: underline; }
.mva-help-article-body strong { font-weight: 700; }
.mva-help-article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; border: 1px solid var(--mv-admin-border); }

/* Help Centre (superadmin management) */
.mva-help-admin-count { font-weight: 400; color: var(--mv-admin-text-secondary); }
.mva-help-admin-empty { font-size: 13px; color: var(--mv-admin-text-secondary); margin: 8px 0 0; }
.mva-help-admin-list { display: flex; flex-direction: column; }
.mva-help-admin-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--mv-admin-border);
}
.mva-help-admin-row:last-child { border-bottom: none; }
.mva-help-admin-handle { cursor: grab; color: var(--mv-admin-text-secondary); user-select: none; font-size: 14px; letter-spacing: -2px; }
.mva-help-admin-titlecol { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.mva-help-admin-title { font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }
.mva-help-admin-slug { font-size: 12px; color: var(--mv-admin-text-secondary); font-family: ui-monospace, Menlo, Consolas, monospace; }
.mva-help-admin-pub { cursor: pointer; border: none; }
.mva-help-admin-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Two-up form row for the Help editor (stacks on narrow widths). */
.mva-help-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ── Input with reveal button ────────────────────────────────────────────────── */
.mva-input-wrap {
	position: relative;
}

.mva-input-wrap .mva-input {
	padding-right: 42px;
}

.mva-input-reveal {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--mv-admin-text-secondary);
	display: flex;
	align-items: center;
}

.mva-input-reveal:hover {
	color: var(--mv-admin-text);
}

.mva-input-reveal .bi {
	font-size: 16px;
}

/* ── Full-width and large button modifiers ───────────────────────────────────── */
.mva-btn--full {
	width: 100%;
	justify-content: center;
}

.mva-btn--lg {
	padding: 12px 20px;
	font-size: 14px;
}

/* ── Consent checkbox ────────────────────────────────────────────────────────── */
.mva-form-group--consent {
	margin-bottom: 24px;
}

.mva-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	line-height: 1.5;
}

.mva-checkbox {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--mv-admin-accent);
	cursor: pointer;
}

/* ── Topbar logout ───────────────────────────────────────────────────────────── */
.mva-topbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mva-topbar-user {
	font-size: 13px;
	color: var(--mv-admin-text);
}

.mva-topbar-logout {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--mva-feature-bg);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: var(--mv-admin-radius);
	border: 1px solid var(--mv-admin-border);
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mva-topbar-logout:hover {
	color: var(--mva-feature-bg);
	border-color: #9ca3af;
	background: var(--mv-admin-surface-alt);
}

/* Topbar quick-access icons — Preview (always when tenant active) and Live
   (only when site is published + enabled + not in maintenance). Two icons sit
   to the left of the user/account/logout cluster on every admin page so the
   site is reachable from anywhere, not just the dashboard. */
/* .mva-topbar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--mv-admin-text-secondary);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mva-topbar-bg);
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
} */

.mva-topbar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mva-feature-bg);
	border: none;
	border-radius: var(--mv-admin-radius);
	background: none;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mva-topbar-icon:hover {
	color: var(--mv-admin-text);
	border-color: #9ca3af;
	background: var(--mv-admin-surface-alt);
}
.mva-topbar-icon--live {
	color: var(--mv-admin-success);
	border-color: #86efac;
}
.mva-topbar-icon--live:hover {
	color: #15803d;
	border-color: #4ade80;
	background: var(--mv-admin-success-dim);
}

/* =============================================================================
   SIGN-UP PAGE — two-column layout
   Left: the pitch on the brand navy, held in view while the form scrolls.
   Right: the form, in one white card on the light band.
   Every colour is a --mva-brand-* token (the marketing site's) or an existing
   admin token — never a literal.
   ============================================================================= */

/* --admin-font is redefined for this page only, so every control that already
   asks for it (.mva-input, .mva-btn) follows without a rule of its own. */
.mva-auth-body--signup {
	--admin-font: var(--mva-brand-font);
	align-items: stretch;
	padding: 0;
	font-family: var(--admin-font);
}

.mva-signup-wrap {
	display: flex;
	width: 100%;
	min-height: 100vh;
}

/* ── Left column ─────────────────────────────────────────────────────────────── */
/* Held in view while the form scrolls: the form on the right is several
   screens long, and without this the pitch is gone by the second field.

   🚨 Stuck by its BOTTOM edge (bottom: 0 + align-self: flex-end), not its top,
   and that is what makes a short window work. In a window tall enough to show
   it all, min-height makes it exactly the window's height and the two are the
   same thing. In a shorter one it scrolls with the page until its last line
   reaches the bottom of the window and holds there — so the whole column can
   be read, with no scrollbar of its own. Stuck by the top instead, whatever
   fell below the window could never be reached.

   The strip of the column's track above it, once it has moved, is the body
   showing through: .mva-auth-body carries the same navy. */
.mva-signup-left {
	flex: 0 0 44%;
	min-width: 420px;
	max-width: 720px;
	position: sticky;
	bottom: 0;
	align-self: flex-end;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 32px 48px 28px;
	background: var(--mva-brand-navy-deep);
	color: var(--mva-brand-on-navy);
}

.mva-signup-logo {
	margin-bottom: 24px;
}

.mva-signup-logo img {
	height: 34px;
	display: block;
}

/* Centred in whatever height is left between the logo and the contact line. */
.mva-signup-pitch {
	margin: auto 0;
	max-width: 520px;
}

.mva-signup-kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mva-brand-mint);
	margin: 0 0 12px;
}

.mva-signup-pitch-heading {
	font-size: clamp(26px, 2.5vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mva-text-white);
	margin: 0 0 12px;
}

/* The key phrase of the headline sits on a solid mint block. */
.mva-signup-mark {
	background: var(--mva-brand-mint);
	color: var(--mva-brand-navy-deep);
	padding: 0 0.22em;
	border-radius: 0.12em;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

.mva-signup-pitch-sub {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	margin: 0 0 22px;
}

.mva-signup-benefits {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.mva-signup-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mva-text-white);
}

.mva-signup-benefits .bi {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1.25;
	color: var(--mva-brand-mint);
}

/* Trial and price, in a hairline panel with the mint rule along its top. */
.mva-signup-price {
	margin: 0;
	padding: 14px 18px 16px;
	border: 1px solid var(--mva-brand-on-navy-line);
	border-top: 4px solid var(--mva-brand-mint);
	border-radius: var(--mv-admin-radius-lg);
	font-size: 14px;
	line-height: 1.55;
}

.mva-signup-price strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--mva-text-white);
	margin-bottom: 2px;
}

.mva-signup-contact {
	font-size: 13px;
	margin: 24px 0 0;
}

.mva-signup-contact a {
	color: var(--mva-text-white);
}

.mva-signup-contact a:hover {
	color: var(--mva-brand-mint);
}

/* ── Right column ────────────────────────────────────────────────────────────── */
.mva-signup-right {
	flex: 1;
	min-width: 0;
	background: var(--mva-brand-band);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 56px 40px;
}

/* The form's card: .mva-card carries the surface and border; this adds the
   larger corners, the lifted shadow and the room a long form needs. */
.mva-signup-card {
	width: 100%;
	max-width: 560px;
	margin-bottom: 0;
	padding: 36px 40px 32px;
	border-radius: var(--mva-radius-xl);
	box-shadow: var(--mva-shadow-lg);
	overflow: visible;
}

.mva-signup-card .mva-auth-heading {
	margin-bottom: 24px;
}

.mva-signup-card a {
	color: var(--mva-brand-navy);
}

.mva-signup-card .mva-input:focus {
	border-color: var(--mva-brand-navy);
	box-shadow: 0 0 0 3px var(--mva-brand-focus);
}

.mva-signup-card .mva-checkbox {
	accent-color: var(--mva-brand-navy);
}

.mva-signup-card .mva-btn--secondary {
	white-space: nowrap;
}

.mva-signup-card .mva-btn--lg {
	padding: 14px 20px;
	font-size: 15px;
}

/* The trial button, on the brand mint. */
.mva-btn--brand {
	background: var(--mva-brand-mint);
	border-color: var(--mva-brand-mint);
	color: var(--mva-brand-mint-ink);
	font-weight: 600;
}

.mva-btn--brand:hover {
	background: var(--mva-brand-mint-hover);
	border-color: var(--mva-brand-mint-hover);
	color: var(--mva-brand-mint-ink);
}

/* ── Name row — side by side ─────────────────────────────────────────────────── */
.mva-signup-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

/* ── Vehicle type radios ─────────────────────────────────────────────────────── */
.mva-vehicle-radios {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.mva-vehicle-radio {
	cursor: pointer;
}

.mva-vehicle-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mva-vehicle-radio-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	font-size: 12px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	text-align: center;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	cursor: pointer;
}

.mva-vehicle-radio-inner svg {
	opacity: 0.5;
	transition: opacity 0.15s;
}

.mva-vehicle-radio:hover .mva-vehicle-radio-inner {
	border-color: #9ca3af;
	color: var(--mv-admin-text);
}

.mva-vehicle-radio:hover .mva-vehicle-radio-inner svg {
	opacity: 0.75;
}

.mva-vehicle-radio input[type="radio"]:checked + .mva-vehicle-radio-inner {
	border-color: var(--mv-admin-accent);
	background: var(--mv-admin-accent-dim);
	color: var(--mv-admin-accent);
}

.mva-vehicle-radio input[type="radio"]:checked + .mva-vehicle-radio-inner svg {
	opacity: 1;
	stroke: var(--mv-admin-accent);
}

/* =============================================================================
   SUBDOMAIN CHOOSER — signup form
   ============================================================================= */

.mva-subdomain-wrap {
	display: flex;
	align-items: stretch;
}

.mva-subdomain-input {
	border-radius: var(--mv-admin-radius) 0 0 var(--mv-admin-radius);
	border-right: none;
	flex: 1;
	min-width: 0;
}

.mva-subdomain-input:focus {
	z-index: 1;
	position: relative;
}

.mva-subdomain-suffix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 0 var(--mv-admin-radius) var(--mv-admin-radius) 0;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

.mva-subdomain-feedback {
	font-size: 12px;
	margin-top: 5px;
	min-height: 18px;
	transition: color 0.15s;
}

.mva-subdomain-feedback--checking {
	color: var(--mv-admin-text-secondary);
}

.mva-subdomain-feedback--ok {
	color: var(--mv-admin-success);
}

.mva-subdomain-feedback--error {
	color: #dc2626;
}

.mva-input--ok {
	border-color: var(--mv-admin-success);
}

.mva-input--ok:focus {
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.mva-input--error {
	border-color: #dc2626;
}

.mva-input--error:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* A refused save (mvaWireDirtySave with reportErrors): "Required" under each
   empty required field, and the reason beside the Save button. */
.mva-field-required {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-danger);
}

.mva-save-error {
	display: inline-block;
	margin-left: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-danger);
	vertical-align: middle;
}

.mva-save-error[hidden] {
	display: none;
}

/* =============================================================================
   DASHBOARD — publish toggle
   ============================================================================= */

/* Enquiries "new" count shown inline in the stat number */
.mva-dash-enq-new {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	background: var(--mv-admin-accent);
	color: #fff;
	border-radius: 20px;
	padding: 1px 7px;
	vertical-align: middle;
	margin-left: 4px;
	line-height: 1.6;
}

.mva-btn--success {
	background: var(--mv-admin-success);
	color: var(--mva-text-white);
	border-color: var(--mv-admin-success);
}

.mva-btn--success:hover {
	background: var(--mv-admin-success-hover);
	color: var(--mva-text-white);
}

.mva-btn--danger-soft {
	background: #fee2e2;
	color: #991b1b;
	border-color: #fecaca;
}

.mva-btn--danger-soft:hover {
	background: #fecaca;
	color: #991b1b;
}

.mva-publish-feedback {
	font-size: 13px;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: var(--mv-admin-radius);
}

.mva-publish-feedback--success {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.mva-publish-feedback--error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.mva-status-note {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin-left: 8px;
}

/* ============================================================================
   STOCK MODULE
   Prefix: mva-stock-*, mva-filter-*, mva-vrm-*, mva-image-*
   ============================================================================ */

/* ── List header ─────────────────────────────────────────────────────────── */
.mva-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.mva-list-header-left,
.mva-list-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.mva-filter-tabs {
	display: flex;
	flex-wrap: wrap; /* status tabs wrap to a second row on narrow screens instead
	                    of forcing page overflow (<500px); single row on desktop */
	gap: 2px;
	background: var(--mv-admin-surface-alt);
	border-radius: var(--mv-admin-radius);
	padding: 6px;
}
.mva-filter-tab {
	/* Element-agnostic: renders identically whether used as <a> (stock list)
	   or <button> (JS-driven filters, e.g. tenants list). The resets below
	   strip native <button> chrome so both look the same. */
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
	margin: 0;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	text-decoration: none;
	border-radius: calc(var(--mv-admin-radius) - 2px);
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.mva-filter-tab:hover { color: var(--mv-admin-text); background: var(--mv-admin-surface); }
.mva-filter-tab.active { background: var(--mv-admin-accent); color: var(--mv-admin-surface); font-weight: 600; }
.mva-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--mv-admin-border);
	color: var(--mv-admin-text-secondary);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}
.mva-filter-tab.active .mva-tab-count {
	background: var(--mv-admin-accent);
	color: #fff;
}

/* ── Entitlement cap indicator ───────────────────────────────────────────── */
.mva-stock-cap {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 20px;
	padding: 4px 10px;
}
.mva-stock-cap--at-limit {
	background: #fee2e2;
	border-color: #fecaca;
	color: #991b1b;
	font-weight: 600;
}

/* ── Stock table ─────────────────────────────────────────────────────────── */
/* .mva-card--flush zeros card padding so inner tables sit edge-to-edge.
   Horizontal-scroll behaviour is inherited from the base .mva-card rule
   (overflow-x: auto on every card, set 2026-05-27). */
.mva-table.mva-stock-table td .mva-badge {
	   padding: 4px 5px;
	   border-radius: 4px;
	   font-size: 9px;
	   letter-spacing: 0;
	   margin: 2px auto !important;
   }
   
.mva-table.mva-stock-table td.td-col-vehicle {
	   width: 400px;
	   min-width: 340px;
   }
   
.mva-table.mva-stock-table td {
	   width: 100px;
	   min-width: 100px;
   }
   
.mva-table.mva-stock-table td.td-col-select {
	   width: 40px;
	   min-width: 40px;
   }
   
.mva-table.mva-stock-table td.td-col-price {
	   font-weight: bold;
   }
      
.mva-card--flush { padding: 0; }
.mva-stock-table .mva-stock-thumb-cell {
	padding: 8px;
	width: 100px;
	min-width: auto;
	max-width: 100px;
}

.mva-stock-thumb {
	width: 80px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	aspect-ratio: 4 / 3;
}
.mva-stock-thumb-link {
	display: inline-block; /* wraps the thumbnail tightly so the whole image is a clickable edit link */
	line-height: 0;
	border-radius: 6px;
}
.mva-stock-thumb--empty {
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mv-admin-text-secondary);
}
.mva-stock-title {
	font-weight: 600;
	color: var(--mv-admin-text);
	text-decoration: none;
	font-size: 14px;
}
.mva-stock-title:hover { color: var(--mv-admin-accent); }
.mva-stock-sub-title {
	display: block;       /* drops the variant/derivative onto its own line beneath the title */
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--mv-admin-text-secondary);
	line-height: 1.4;
}
.mva-table-muted { color: var(--mv-admin-text-secondary); font-size: 13px; }
.mva-table-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
/* When the class sits directly on a <td>, keep it a real table-cell — a flex <td>
   drops out of the row's border model and distorts the row divider on that column.
   (Buttons right-align with a margin gap instead of flex gap.) */
td.mva-table-actions { display: table-cell; text-align: right; white-space: nowrap; }
td.mva-table-actions > * + * { margin-left: 6px; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.mva-pagination {
	display: flex;
	gap: 4px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.mva-pagination-btn {
	padding: 6px 12px;
	font-size: 13px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
}
.mva-pagination-btn:hover { background: var(--mv-admin-surface-alt); }
.mva-pagination-btn.active { background: var(--mv-admin-accent); color: #fff; border-color: var(--mv-admin-accent); }
.mva-pagination-gap { padding: 6px 4px; font-size: 13px; color: var(--mv-admin-text-secondary); align-self: center; }
.mva-pagination-summary { font-size: 13px; color: var(--mv-admin-text-secondary); margin-top: 8px; }

/* ── Stock form · Cost Base footer (sales-dms.md MEDIUM-34) ──────────────── */
/* The footer states the margin TWICE — before VAT, and after the VAT that the
   margin scheme takes out of it. The qualifier and the note are what stop the
   first figure being read as the second, so they are styled to be read, not
   skipped. Colours come from the admin ramp; nothing here is scheme-dependent. */
.mva-cost-figure     { font-size: 18px; font-weight: 600; }
.mva-cost-figure-pct { font-size: 18px; font-weight: 600; margin-left: 8px; color: var(--mv-admin-text-secondary); }
.mva-cost-qual       { display: block; font-size: 11px; color: var(--mv-admin-text-secondary); margin-top: 2px; }

.mva-cost-vat-note {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
	padding: 8px 10px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary);
}
.mva-cost-vat-note a { color: var(--mv-admin-info); font-weight: 600; text-decoration: underline; }
.mva-cost-vat-note a:hover { color: var(--mv-admin-info-hover); }

/* ── Stock form layout ───────────────────────────────────────────────────── */
.mva-stock-form-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
	align-items: start;
}

.mva-stock-form-side {
	position: sticky;
	top: 70px;
}

/* ── Sticky anchor nav (generic — used by stock form + long settings pages) ─ */
/* Reusable horizontal in-page nav. Drop above any series of .mva-card[id]
   blocks to give dealers a one-click jump to each section. Links are anchors
   to card IDs; the .mva-card[id] scroll-margin-top rule below keeps the
   target clear of the sticky bar. */
.mva-anchor-nav {
	position: sticky;
	top: 5px;
	z-index: 98;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	background: var(--mva-sidebar-bg);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mva-radius-xl);
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mva-anchor-nav-link {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-surface);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.mva-anchor-nav-link:hover {
	background: var(--mv-admin-border);
	color: var(--mv-admin-text);
}
/* Active link state — set by admin-utils.js when anchor nav is in
   filter mode (.mva-anchor-nav--filter) and a section is selected. */
.mva-anchor-nav-link--active {
	background: var(--mv-admin-accent, #2563eb);
	color: #fff;
}
.mva-anchor-nav-link--active:hover {
	background: var(--mv-admin-accent, #2563eb);
	color: #fff;
}

/* Unsaved dot on a section anchor, mirroring the card's own .mva-card-flag.
   Not redundant with it: this nav runs in FILTER mode, so selecting one section
   hides every other card — and with it that card's marker. A dealer who staged a
   header change and then clicked Template would be looking at a save bar with
   nothing on screen explaining it, which is the exact problem the markers exist
   to solve, reappearing. This nav is sticky, so it is always in view. */
.mva-anchor-nav-link.is-dirty::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--mv-admin-warning);
	vertical-align: 1px;
}

/* On the selected pill the background is the accent, which the amber does not
   read against — the dot goes white with it. */
.mva-anchor-nav-link--active.is-dirty::after {
	background: var(--mva-text-white);
}
/* "View all" reset link — auto-injected by admin-utils.js as the last nav
   item when in filter mode. Hidden until a filter is active. Styled with a
   subtle separator on its left so it reads as "exit / clear filter" rather
   than another section anchor. */
.mva-anchor-nav-link--reset {
	font-style: italic;
	opacity: 0.85;
	margin-left: auto;
	padding-left: 14px;
	border-left: 1px solid var(--mv-admin-border);
	border-radius: 0 var(--mv-admin-radius) var(--mv-admin-radius) 0;
}

/* Filter-mode hidden section. Used by admin-utils.js to hide non-target
   cards when a filter is active. Form inputs inside stay in the DOM (and
   in the form payload) but are removed from the tab order via display:none. */
.mva-section-hidden {
	display: none !important;
}
/* When a cards-grid has any hidden child, drop to 1-col so the visible
   sibling spans full width instead of sitting in a half-row with empty
   space alongside. Uses :has() — modern browsers only, no fallback (the
   fallback is "looks slightly off in a stale browser", not broken). */

/* If ALL of a grid's children are hidden, hide the wrapper too — otherwise
   the grid's gap leaves empty vertical space. */
.mva-cards-grid:not(:has(> .mva-card:not(.mva-section-hidden))) {
	display: none;
}

.mva-card[id] { scroll-margin-top: 70px; }

/* ── Cards grid (responsive multi-col card layout) ───────────────────────── */
/* Wrap a series of .mva-card blocks to lay them out side-by-side at desktop
   widths and stack them at narrow widths. Default is 2-col; --3 for 3-col.
   A child card can opt out of the grid (span the whole row) with the modifier
   --full on its grid wrapper, useful for tall cards like RTE editors that
   need full width regardless. */
.mva-cards-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
	grid-template-columns: 1fr;
	align-items: start; /* Cards keep natural height — collapsed cards stay short */
}

/* Cards inside a grid lose the bottom margin they'd have stacked — gap
   handles spacing instead. */
.mva-cards-grid > .mva-card { margin-bottom: 0; }

/* ── Collapsible card variant ────────────────────────────────────────────── */
/* For sections that are usually in a steady "no action needed" state
   (e.g. Custom Domain when active). Title bar stays visible with a chevron;
   body hides when collapsed. Auto-state surfaces in .mva-card-title-meta
   so the dealer doesn't need to expand to confirm. JS toggles via
   .mva-card--collapsed on click. */
.mva-card--collapsible .mva-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	gap: 12px;
}
.mva-card-title-meta {
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	margin-right: 8px;
}
.mva-card-title-chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.18s ease;
	flex-shrink: 0;
	color: var(--mv-admin-text-secondary);
}
.mva-card--collapsed .mva-card-title-chevron {
	transform: rotate(-90deg);
}
/* When collapsed, hide the body. (When expanded, the title's existing
   16px margin-bottom is the natural spacing — no extra margin needed.) */
.mva-card--collapsed .mva-card-body {
	display: none;
}
/* When collapsed, drop the title's bottom margin too — otherwise it
   leaves dead space below the (now-only) title row. */
.mva-card--collapsed .mva-card-title {
	margin-bottom: 0;
}

/* ── Card subtitle (intro paragraph between title and first field) ───────── */
.mva-card-subtitle {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: -8px 0 16px;
	line-height: 1.4;
}

/* ── YouTube card ────────────────────────────────────────────────────────── */
.mva-yt-logo { vertical-align: -3px; margin-right: 6px; color: var(--mva-youtube); }
.mva-yt-hint {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 8px 0 0;
}
.mva-yt-hint svg { flex-shrink: 0; vertical-align: -2px; }
.mva-yt-highlight {
	display: inline-block;
	padding: 1px 6px;
	border: 1.5px solid var(--mv-admin-success);
	border-radius: 3px;
	background: #16a34a14;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--mv-admin-text);
}

/* ── Features card (mv_tenant_features library + per-vehicle tick state) ── */
.mva-features-empty {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	padding: 16px;
	background: var(--mv-admin-surface-alt, transparent);
	border: 1px dashed var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	text-align: center;
}
.mva-features-group { margin-top: 18px; }
.mva-features-group:first-child { margin-top: 0; }
.mva-features-group-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 8px;
}
.mva-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 12px;
}
.mva-features-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
	min-width: 0;
}
.mva-features-check input { flex-shrink: 0; }
.mva-features-check span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Feature modal (used by add-feature + manage-features on stock form) ───
   Class name is .mva-feature-modal (NOT .mva-modal) so it doesn't collide
   with the older .mva-modal pattern at the top of this file — that one
   pairs with .mva-modal-backdrop and is used by 12+ other modals across
   the admin (recipients, users, media library, theme preview, etc).
   The two patterns have different positioning roles: the old .mva-modal
   is the inner content panel sat inside .mva-modal-backdrop; this one
   IS the positioning element. Naming them the same broke every modal
   using the older pattern (top-left layout instead of centred). */
.mva-feature-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.mva-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}
.mva-modal-panel {
	position: relative;
	z-index: 1;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 24px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	width: 100%;
	max-width: 460px;
}
.mva-modal-panel--lg { max-width: 720px; }

/* ── Manage features modal — list rows ───────────────────────────────────── */
.mva-features-move-hint {
	font-size: 13px;
	padding: 8px 12px;
	margin: 0 0 12px;
	background: #16a34a14;
	border: 1px solid #16a34a55;
	border-radius: var(--mv-admin-radius);
	color: var(--mv-admin-text);
}
.mva-manage-features-list {
	max-height: 50vh;
	overflow-y: auto;
	margin: 0 -8px 4px;
}
.mva-manage-features-row {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto auto;
	gap: 8px;
	align-items: center;
	padding: 6px 8px;
	border-radius: var(--mv-admin-radius);
}
.mva-manage-features-row + .mva-manage-features-row {
	border-top: 1px solid var(--mv-admin-border);
}

.mva-modal-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--mv-admin-text);
}
.mva-modal-subtitle {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 18px;
	line-height: 1.4;
}
.mva-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.mva-form-row { margin-bottom: 16px; position: relative; }
.mva-form-row:last-child { margin-bottom: 0; }
.mva-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mva-label { display: block; font-size: 13px; font-weight: 600; color: var(--mv-admin-text); margin-bottom: 5px; }
.mva-required { color: var(--mv-admin-danger); }
.mva-input {
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.mva-input:focus { outline: none; border-color: var(--mv-admin-accent); }
.mva-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* A read-only field is NOT a disabled one, and must not look like it. Its value
   still matters and has to stay legible — a sale's purchase price is the VAT
   margin's other term — so it is tinted rather than faded at 0.5. It is owned
   somewhere else (the vehicle, the cost base); the hint under each field says
   where, and the focus ring is suppressed so clicking it does not promise an
   edit that will not happen. */
.mva-input[readonly] {
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text-secondary);
	cursor: not-allowed;
}
.mva-input[readonly]:focus { border-color: var(--mv-admin-border); }
.mva-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 32px; }
.mva-textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.5; }
.mva-field-hint { font-size: 12px; color: var(--mv-admin-text-secondary); margin-top: 4px; display: block; }

/* Phase 4 stock form preview block — shows the computed public-facing
   title so dealers can predict what visitors see without leaving the form.
   Sits below the Trim/Badge fields in the Vehicle Details card. Subtle
   visual treatment (not a form field) so it reads as a status indicator. */
.mva-preview-display { background: var(--mv-admin-surface-alt, #f4f6f8); border-left: 3px solid var(--mv-admin-accent, #2563eb); padding: 10px 12px; border-radius: 4px; }
.mva-preview-label { font-size: 12px; color: var(--mv-admin-text-secondary); display: block; margin-bottom: 2px; }
.mva-preview-title { font-size: 15px; color: var(--mv-admin-text); font-weight: 600; }
.text-important { font-size: 12px; color: var(--mv-admin-accent);}
.mva-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.mva-card-title-hint { font-size: 12px; font-weight: 400; color: var(--mv-admin-text-secondary); margin-left: 8px; }
.mva-breadcrumb { font-size: 13px; color: var(--mv-admin-text-secondary); margin-bottom: 16px; }
.mva-breadcrumb a { color: var(--mv-admin-text-secondary); text-decoration: none; }
.mva-breadcrumb a:hover { color: var(--mv-admin-text); }
.mva-breadcrumb span { margin: 0 6px; }

/* ── VRM lookup ──────────────────────────────────────────────────────────── */
.mva-vrm-row { display: flex; gap: 8px; }
.mva-vrm-input { font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; max-width: 200px; }
.mva-vrm-feedback { font-size: 13px; color: var(--mv-admin-text-secondary); margin-top: 8px; }

/* ── Model suggestions ───────────────────────────────────────────────────── */
.mva-model-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 100;
	max-height: 200px;
	overflow-y: auto;
}
.mva-model-suggestion {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	font-size: 14px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--mv-admin-text);
	border-bottom: 1px solid var(--mv-admin-border);
}
.mva-model-suggestion:last-child { border-bottom: none; }
.mva-model-suggestion:hover { background: var(--mv-admin-surface-alt); }

/* Searchable combobox (type-to-filter make/model on no-VRM stock) */
.mva-combobox { position: relative; }
.mva-combobox-list {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	max-height: 280px;
	overflow-y: auto;
}
.mva-combobox-item {
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	color: var(--mv-admin-text);
}
.mva-combobox-item:hover,
.mva-combobox-item.is-active { background: var(--mv-admin-surface-alt); }
.mva-combobox > input { padding-right: 34px; }   /* room for the clear (×) button */
.mva-combobox-clear {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text-muted, #6c757d);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.mva-combobox-clear:hover { background: var(--mv-admin-border); color: var(--mv-admin-text); }
.mva-combobox-empty {
	padding: 8px 10px;
	font-size: 14px;
	font-style: italic;
	color: var(--mv-admin-text-muted, #6c757d);
	cursor: default;
}
.mva-field-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--mv-admin-text-muted, #6c757d);
}

/* Session-expired recovery modal — non-destructive (never navigates away, so
   unsaved work is preserved). Raised by the global fetch interceptor. */
.mva-session-expired-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.6);
}
.mva-session-expired-modal {
	width: 100%;
	max-width: 460px;
	background: var(--mv-admin-surface, #ffffff);
	border-radius: var(--mv-admin-radius, 12px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 28px;
	text-align: center;
}
.mva-session-expired-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.mva-session-expired-title { margin: 0 0 8px; font-size: 20px; color: var(--mv-admin-text, #111827); }
.mva-session-expired-body {
	margin: 0 0 22px;
	color: var(--mv-admin-text-muted, #6c757d);
	line-height: 1.5;
}
.mva-session-expired-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Image grid ──────────────────────────────────────────────────────────── */
.mva-image-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
	min-height: 40px;
}
.mva-image-item {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid var(--mv-admin-border);
	aspect-ratio: 1;
	cursor: grab;
}
.mva-image-item:first-child { border-color: var(--mv-admin-accent); }
.mva-image-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mva-image-delete {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(0,0,0,0.6);
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s;
}
.mva-image-item:hover .mva-image-delete { opacity: 1; }
.mva-image-primary-badge {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--mv-admin-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	padding: 2px 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.mva-image-upload-row { display: flex; align-items: center; gap: 10px; }
.mva-image-upload-progress { font-size: 13px; color: var(--mv-admin-text-secondary); }

/* ── Stock image dropzone ────────────────────────────────────────────────── */
.mva-stock-dropzone {
	border: 2px dashed var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 20px 16px;
	text-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--mv-admin-text-secondary);
	transition: border-color 0.15s, background 0.15s;
}
.mva-stock-dropzone:hover,
.mva-stock-dropzone--over {
	border-color: var(--mv-admin-accent);
	background: #eff6ff;
}
.mva-dropzone-browse {
	background: none;
	border: none;
	color: var(--mv-admin-accent);
	cursor: pointer;
	font-size: inherit;
	padding: 0;
	text-decoration: underline;
}

/* ── Drag-to-reorder states ──────────────────────────────────────────────── */
.mva-image-item--dragging {
	opacity: 0.4;
	border-style: dashed;
}
.mva-image-item--dragover {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 2px var(--mv-admin-accent);
}

/* ── Image checkbox & bulk toolbar ──────────────────────────────────────────── */
.mva-image-check {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 2;
	cursor: pointer;
}
.mva-image-checkbox {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--mv-admin-accent);
}
.mva-image-item:has(.mva-image-checkbox:checked) {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 2px var(--mv-admin-accent);
}
.mva-bulk-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0 4px;
	flex-wrap: wrap;
}
.mva-bulk-count {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	font-weight: 500;
}

/* ── Stock-image bulk-download status banner ─────────────────────────────────
 * Surfaces under the bulk toolbar after the dealer clicks Download Selected.
 * Two visual states driven by JS:
 *   - Preparing (spinner visible, message text only)
 *   - Ready     (spinner hidden, message updated, Download now link visible)
 * The same component handles the "we'll email you" confirmation for jobs
 * that exceed MV_IMAGE_DOWNLOAD_SYNC_THRESHOLD — same markup, different
 * message + immediate Dismiss button. */
.mva-image-download-status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0;
	padding: 10px 14px;
	background: var(--mv-admin-bg-subtle, #f7f8fa);
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	font-size: 13px;
	color: var(--mv-admin-text, #1f2937);
	flex-wrap: wrap;
}
.mva-image-download-status-body {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 200px;
}
.mva-image-download-status-actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.mva-image-download-spinner {
	color: var(--mv-admin-accent, #e8320a);
	animation: mva-spin 1s linear infinite;
}
@keyframes mva-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ── Stock filter bar ────────────────────────────────────────────────────── */
.mva-stock-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.mva-stock-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.mva-stock-filter-fields {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	flex: 1;
}

/* ── Free-text search bar — full width above the filter dropdowns ─────────── */
.mva-stock-search-row {
	position: relative;
	width: 100%;
}
.mva-stock-search-input {
	width: 100%;
	padding-left: 38px;
	height: 40px;
	font-size: 14px;
}
.mva-stock-search-input::-webkit-search-cancel-button {
	cursor: pointer;
}
.mva-stock-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.5;
	font-size: 16px;   /* sizes the bi glyph (was the svg width/height) */
	line-height: 1;
}
.mva-stock-filter-input {
	width: auto;
	max-width: 160px;
}
.mva-stock-filter-input--vrm {
	width: 90px;
	text-transform: uppercase;
}
.mva-stock-filter-right {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.mva-stock-per-page {
	width: 70px;
}

/* Mobile filters disclosure — collapse the dropdown row behind a "Filters" toggle
   on phones (7 stacked dropdowns otherwise fill the screen). Desktop: toggle hidden,
   row always shown. The panel starts expanded when filters are active (class added
   server-side) so a filtered view doesn't hide its own filters. */
.mva-stock-filter-toggle { display: none; }
.mva-stock-filter-toggle-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--mv-admin-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* ── Sortable column headers ─────────────────────────────────────────────── */
.mva-sort-th {
	color: var(--mv-admin-text-secondary);
	text-decoration: none;
	white-space: nowrap;
	font-weight: 600;
	font-size: inherit;
}
.mva-sort-th:hover { color: var(--mv-admin-text); }
.mva-sort-th.active { color: var(--mv-admin-accent); }

/* ── VRM pill in stock list ──────────────────────────────────────────────── */
.mva-stock-vrm {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: var(--mv-admin-vrm);
	border: 1px solid var(--mv-admin-vrm-border);
	border-radius: 3px;
	padding: 1px 5px;
	margin-right: 3px;
	margin-top: -3px;
	color: var(--mv-admin-text);
	vertical-align: middle;
}

/* ── Sort icon ───────────────────────────────────────────────────────────── */
.mva-sort-icon {
	display: inline-block;
	vertical-align: middle;
	opacity: 0.35;
	margin-left: 2px;
	font-size: 11px;   /* sizes the bi glyph (was the svg width/height) */
	line-height: 1;
}
.mva-sort-icon--active {
	opacity: 1;
}

/* ── Superadmin impersonation strip ──────────────────────────────────────────
 * Thin in-flow strip directly under .mva-topbar, brand-accent background,
 * white centred text. Visible only when a superadmin is impersonating
 * another tenant via session impersonation (clicked Login from the tenants
 * list) OR URL-param peek (?tenant_id=N).
 *
 * Replaced the previous body-fixed loud-red banner — that pattern had a
 * silent-failure bug where the impersonation flag got overwritten in
 * mv-admin/index.php so the banner never rendered for session-based
 * impersonation. The strip is more contextual (sits under the topbar
 * inside the main content area) and uses the brand accent so it reads as
 * "you're in a different tenant's context" rather than as an alarm.
 */
.mva-impersonation-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 8px 20px;
	background: var(--mv-admin-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
}

.mva-impersonation-strip strong {
	font-weight: 700;
}

.mva-impersonation-strip-exit {
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--mv-admin-radius);
	color: #fff;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.mva-impersonation-strip-exit:hover {
	background: rgba(255, 255, 255, 0.28);
	border-color: rgba(255, 255, 255, 0.65);
}

.mva-impersonation-strip-exit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── Client-side sortable th (used by superadmin tenants list) ───────────────
 * Different from .mva-sort-th above — that one is for server-rendered links.
 * .mva-sortable is for plain <th> with JS click handlers.
 */
.mva-sortable {
	cursor: pointer;
	user-select: none;
	transition: color 0.15s;
}
.mva-sortable:hover {
	color: var(--mv-admin-accent);
}
.mva-sortable.mva-sort-active {
	color: var(--mv-admin-accent);
}

/* Disabled-looking button (no actual click). Used for placeholder action
 * buttons on UI that aren't wired up yet — visually clear that the action
 * exists but isn't currently available. Rendered as <span> so it can't be
 * activated by keyboard or click. */
.mva-btn--disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: auto; /* keep title tooltip working on hover */
}

/* Clickable badge — used for the Custom column on the superadmin tenants
 * list. Cursor + subtle hover lift to signal it's interactive. */
.mva-badge--toggle {
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.15s;
}
.mva-badge--toggle:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Monospace code editor — superadmin "Custom HTML" block. Larger, no
 * spell-check underlines (set in markup), monospace stack. */
.mva-block-code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12.5px;
	line-height: 1.5;
	min-height: 360px;
	tab-size: 2;
	-moz-tab-size: 2;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

/* "Managed by MotoVend" badge sits next to the block-type label in the
 * dealer's view of a superadmin-only block. */
.mva-block-managed-badge {
	margin-left: 8px;
	font-size: 11px;
}

/* Locked block card — visual cue for dealer-side superadmin-managed blocks.
 * Subtle de-emphasis so they don't dominate the list, but still legible. */
.mva-block-card--locked {
	background: var(--mv-admin-surface-alt);
}

/* Locked page row — same de-emphasis pattern for the pages list. */
.mva-page-row--locked {
	background: var(--mv-admin-surface-alt);
}

/* Empty actions placeholder for locked rows (pages, menu items) — used in
 * place of the action buttons. Centred dash, muted colour. */
.mva-row-actions-empty {
	color: var(--mv-admin-text-secondary);
	font-size: 13px;
	padding: 0 8px;
}

/* ── Tenant assets page (superadmin) — upload form + URL field ────────────── */
.mva-asset-upload-row {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.mva-asset-upload-row input[type="file"] {
	flex: 1;
	min-width: 240px;
}
.mva-asset-upload-msg {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
}
.mva-asset-upload-msg--error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}
.mva-asset-url {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	width: 100%;
	min-width: 280px;
	background: var(--mv-admin-surface-alt);
}

/* ── Generic filter row ──────────────────────────────────────────────────────
   A wrapping strip of selects above a table, with a result count pushed right.
   Named generically rather than per-page on purpose: the media library carries
   an identical layout under .mva-media-filters and should adopt this the next
   time it is touched, rather than a third copy appearing.
   No colour literals — inherit + opacity keeps this correct on every scheme. */
.mva-filter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.mva-filter-row-count {
	margin-left: auto;
	font-size: 13px;
	opacity: 0.7;
}
.mva-filter-row-clear {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: inherit;
	opacity: 0.7;
	text-decoration: underline;
	cursor: pointer;
}
.mva-filter-row-clear:hover {
	opacity: 1;
}

/* ── Superadmin tenants list — search bar + actions cell ─────────────────── */
.mva-sa-tenants-search {
	position: relative;
	margin-bottom: 16px;
}
.mva-sa-tenants-search-input {
	width: 100%;
	padding-left: 38px;
	height: 40px;
	font-size: 14px;
}
.mva-sa-tenants-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.5;
}

.mva-actions-col {
	white-space: nowrap;
}
.mva-actions-cell {
	white-space: nowrap;
}
.mva-actions-cell .mva-btn {
	margin-right: 4px;
}
.mva-actions-cell .mva-btn:last-child {
	margin-right: 0;
}

/* ── Three-column form row (price / was price / mileage) ─────────────────── */
.mva-form-row--thirds {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}

/* ── SEO template tokens ─────────────────────────────────────────────────── */
.mva-token {
	display: inline-block;
	padding: 2px 8px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s;
}
.mva-token:hover {
	background: var(--mv-admin-accent);
	color: #fff;
	border-color: var(--mv-admin-accent);
}
/* The seed tags on a seed account's page SEO screen (website/pages/seo.php). */
.mva-seo-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.mva-seo-counter {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin-top: 4px;
}
.mva-seo-counter--over {
	color: var(--mv-admin-warning, #c47a00);
}

/* Per-vehicle-type sub-section heading inside the Landing card on multi-type
   tenants. Renders once per enabled type ("Cars landing page",
   "Motorcycles landing page", …) so the dealer can scan all types at once
   when writing copy. Hidden on single-type tenants (no $is_multi_type
   condition met server-side). */
.mva-seo-vt-heading {
	font-size: 14px;
	font-weight: 600;
	color: var(--mv-admin-text);
	margin: 18px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--mv-admin-border);
}
.mva-seo-vt-heading:first-of-type {
	margin-top: 0;
}
.mva-seo-vt-block {
	margin-bottom: 8px;
}

/* =============================================================================
   MotoVend Admin — Superadmin
   ============================================================================= */

/* ── Bulk action bar ─────────────────────────────────────────────────────────── */
.mva-bulk-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: var(--mv-admin-radius);
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.mva-bulk-bar span {
	font-size: 13px;
	font-weight: 600;
	color: #1d4ed8;
	margin-right: 4px;
}

/* ── Muted table row (ignored items) ─────────────────────────────────────────── */
.mva-row--muted td {
	opacity: 0.45;
}

/* ── Superadmin detail grid ──────────────────────────────────────────────────── */
.mva-sa-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.mva-sa-detail-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 20px 24px;
}

.mva-sa-detail-card--full {
	grid-column: 1 / -1;
}

.mva-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--mv-admin-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 16px;
}

.mva-detail-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.mva-detail-table td {
	padding: 6px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--mv-admin-border);
}

.mva-detail-table td:last-child {
	border-bottom: none;
}

.mva-detail-label {
	color: var(--mv-admin-text-secondary);
	width: 130px;
	padding-right: 12px;
	white-space: nowrap;
}

.mva-muted {
	color: var(--mv-admin-text-secondary);
	font-style: italic;
}

/* ── Three-column settings grid ──────────────────────────────────────────────── */
.mva-settings-grid--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

/* =============================================================================
   MotoVend Admin — Billing Card (Dashboard)
   ============================================================================= */

.mva-billing-card {
	border-left: 3px solid var(--mv-admin-border);
}

.mva-billing-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.mva-billing-info {
	flex: 1;
	min-width: 0;
}

.mva-billing-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}

.mva-billing-plan {
	font-size: 14px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

.mva-billing-meta {
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
}

.mva-billing-meta--warning {
	color: var(--mva-tint-danger);
	font-weight: 500;
}

.mva-billing-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

/* =============================================================================
   PAGE EDITOR — TWO-COLUMN LAYOUT
   ============================================================================= */

.mva-edit-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.mva-edit-main {
	flex: 1;
	min-width: 0;
}

.mva-edit-sidebar {
	width: 280px;
	flex-shrink: 0;
	position: sticky;
	top: 80px; /* below topbar */
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

/* On the edit page, add-block panel fills the sidebar naturally */
.mva-edit-sidebar .mva-add-block-section {
	margin-top: 0;
}

/* Tighter grid in sidebar — one button per row makes it scannable */
.mva-edit-sidebar .mva-add-block-grid {
	flex-direction: column;
}

.mva-edit-sidebar .mva-add-block-btn {
	width: 100%;
	justify-content: flex-start;
}

/* =============================================================================
   MOBILE RESPONSIVE — SIDEBAR & SHELL
   ============================================================================= */

/* Hamburger button — hidden on desktop */
.mva-topbar-hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--mv-admin-text);
	border-radius: var(--mv-admin-radius);
	flex-shrink: 0;
}

.mva-topbar-hamburger:hover {
	background: var(--mv-admin-surface);
}

/* Sidebar backdrop — hidden by default */
.mva-sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 99;
}

/* =============================================================================
   FONT PAIR PICKER
   ============================================================================= */

.mva-font-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
}

.mva-font-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	background: var(--mv-admin-bg);
	border: 2px solid var(--mv-admin-border);
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mva-font-card:hover {
	border-color: var(--mv-admin-accent);
}

.mva-font-card--active {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.mva-font-card-preview {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mv-admin-border);
}

.mva-font-card-heading {
	font-size: 18px;
	font-weight: 700;
	color: var(--mv-admin-text);
	line-height: 1.2;
}

.mva-font-card-sample {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
}

.mva-font-card-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-font-card-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text);
}

.mva-font-card-desc {
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
}

/* =============================================================================
   STOCK FORM — SECTION LABELS
   ============================================================================= */

.mva-form-section-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mv-admin-text-secondary);
	padding: 16px 0 8px;
	border-top: 1px solid var(--mv-admin-border);
	margin-top: 8px;
}

/* =============================================================================
   CUSTOMERS (CRM) — ENQUIRIES LIST & DETAIL
   Prefix: mva-enq-*
   ============================================================================= */

/* ── List view ────────────────────────────────────────────────────────────────── */

.mva-enq-search-form {
	display: flex;
	align-items: center;
}

.mva-enq-search-input {
	width: 240px;
}

.mva-enq-table .mva-enq-col-contact { width: 220px; }
.mva-enq-table .mva-enq-col-vehicle { min-width: 160px; }
.mva-enq-table .mva-enq-col-date    { width: 160px; white-space: nowrap; }

.mva-enq-name {
	font-weight: 600;
	color: var(--mv-admin-text);
}

.mva-enq-vehicle {
	font-size: 13px;
	color: var(--mv-admin-text);
	display: block;
}

/* Secondary line under vehicle label — price + days in stock. Only slightly
   dimmer than the primary text so it remains readable at a glance but
   sits visually subordinate to the vehicle name. */
.mva-enq-vehicle-meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #6b7280;
}

.mva-sort-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.mva-sort-link:hover { color: var(--mv-admin-text); }

/* ── Detail view ──────────────────────────────────────────────────────────────── */

.mva-enq-detail-back {
	margin-bottom: 20px;
}

.mva-enq-detail-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}

.mva-enq-detail-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mva-enq-detail-aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Definition list — enquiry fields */
.mva-enq-dl {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 6px 16px;
	margin: 0 0 20px;
	font-size: 14px;
}

.mva-enq-dl dt {
	font-weight: 600;
	color: var(--mv-admin-text-secondary);
	padding-top: 2px;
}

.mva-enq-dl dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mva-enq-dl--snapshot {
	margin-bottom: 0;
}

.mva-enq-dl--snapshot dt { color: var(--mv-admin-text-secondary); font-weight: 500; }

/* Vehicle thumbnail at top of snapshot card — clickable → opens PDP in new tab */
.mva-enq-vehicle-thumb {
	display: block;
	margin: 0 0 16px;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;  /* removes the 4px gap inline images create under their baseline */
	transition: opacity 0.15s ease;
}
.mva-enq-vehicle-thumb img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 320px;
}
a.mva-enq-vehicle-thumb:hover { opacity: 0.88; }

/* Customer-uploaded photos gallery — image attachments from the form drop-zone
   (PDP PX form, future form builder, future Sell Your Vehicle widget). Grid
   of clickable thumbnails; click opens fullsize Bunny ?class=lg in a new tab. */
.mva-enq-customer-photos {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.mva-enq-customer-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
	border-radius: 6px;
	overflow: hidden;
}
.mva-enq-customer-photo-btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}
.mva-enq-customer-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.mva-enq-customer-photo-btn:hover img,
.mva-enq-customer-photo-btn:focus img {
	opacity: 0.92;
	transform: scale(1.02);
}
.mva-enq-customer-photo-btn:focus {
	outline: 2px solid var(--mv-admin-accent, #2563eb);
	outline-offset: 2px;
}

/* ── Lightbox modal for the customer-photos card ─────────────────────────────
   Self-contained viewer used only here. Fixed full-viewport overlay with a
   dark backdrop; image centred and bounded to the viewport. Single-image
   inspection only — no zoom, no swipe gestures (those live in the PDP
   gallery on the public side; admin viewing is mouse-driven). */
.mva-photo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;  /* above .mva-block-modal-overlay (1070) */
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px 40px;
}
.mva-photo-lightbox[hidden] {
	display: none;
}
body.mva-lightbox-open {
	overflow: hidden;  /* lock scroll on the admin underneath */
}
.mva-photo-lightbox-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;       /* allow flex child to shrink */
	width: 100%;
	max-width: 1400px;
}
/* Cursor states mirror the PDP gallery convention:
   - --swipeable: grab cursor on hover (only when there's more than one
     photo — single-image gallery has nothing to swipe to)
   - --grabbing: closed-hand cursor during active drag. !important so it
     wins over the static --swipeable rule. */
.mva-photo-lightbox-stage--swipeable { cursor: grab; }
.mva-photo-lightbox-stage--grabbing  { cursor: grabbing !important; }
.mva-photo-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.mva-photo-lightbox-meta {
	display: flex;
	gap: 12px;
	align-items: baseline;
	color: #cbd5e1;
	font-size: 13px;
	padding-top: 16px;
}
.mva-photo-lightbox-counter {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.mva-photo-lightbox-name {
	opacity: 0.85;
	max-width: 60vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-photo-lightbox-close,
.mva-photo-lightbox-prev,
.mva-photo-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.mva-photo-lightbox-close:hover,
.mva-photo-lightbox-prev:hover,
.mva-photo-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.2);
}
.mva-photo-lightbox-close {
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
}
.mva-photo-lightbox-prev,
.mva-photo-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 64px;
	border-radius: 6px;
	font-size: 36px;
	line-height: 1;
}
.mva-photo-lightbox-prev { left: 20px; }
.mva-photo-lightbox-next { right: 20px; }

/* Message body */
.mva-enq-message-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 8px;
}

.mva-enq-message-body {
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mv-admin-text);
	white-space: pre-wrap;
	word-break: break-word;
	tab-size: 4;
}

/* Source URL — clickable link in enquiry detail */
.mva-enq-source-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
}

/* mailto button inline with email address */
.mva-enq-mailto {
	display: inline-flex;
}

/* Notes textarea */
.mva-enq-notes-textarea {
	resize: vertical;
	min-height: 120px;
}

/* Status save actions row */
.mva-enq-status-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

/* Delete zone — separated from save actions with a visual boundary */
.mva-enq-delete-zone {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--mv-admin-border);
}

/* Inline save confirmation message */
.mva-enq-save-msg {
	font-size: 13px;
}

.mva-enq-save-msg--ok    { color: #166534; }
.mva-enq-save-msg--error { color: #991b1b; }

/* =============================================================================
   LOCATION MODAL — OPENING HOURS GRID
   ============================================================================= */

.mva-oh-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mva-oh-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	gap: 10px;
}

.mva-oh-day-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--mv-admin-text);
}

.mva-oh-input {
	max-width: 200px;
}

/* =============================================================================
   BUSINESS SETTINGS — PDP FORM TOGGLES
   ============================================================================= */

.mva-pdp-form-toggles {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mva-pdp-form-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
	padding: 10px 12px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface-alt);
	transition: background 0.15s;
}

.mva-pdp-form-toggle:hover {
	background: var(--mv-admin-surface);
}

.mva-pdp-form-toggle--locked {
	opacity: 0.7;
	cursor: default;
}

.mva-pdp-form-checkbox {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--mv-admin-accent);
}

.mva-pdp-form-toggle-label {
	font-weight: 500;
	flex: 1;
}

/* A second section inside a card — Vehicle Contact Forms' "Show on vehicle
   listings" (Page\VehicleIdentifiers). */
.mva-card-subsection {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mv-admin-border);
}

.mva-card-subsection-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
}

/* =============================================================================
   LIGHTWEIGHT RTE EDITOR
   ============================================================================= */

.mva-rte-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-bottom: none;
	border-radius: var(--mv-admin-radius) var(--mv-admin-radius) 0 0;
}

.mva-rte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	min-width: 26px;
	padding: 0 5px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--mv-admin-text-secondary);
	font-size: 12px;
	font-family: var(--admin-font);
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.mva-rte-btn:hover {
	background: var(--mv-admin-surface);
	color: var(--mv-admin-text);
}

.mva-rte-btn--active {
	background: color-mix(in srgb, var(--mv-admin-accent) 12%, transparent);
	color: var(--mv-admin-accent);
}

.mva-rte-btn svg {
	pointer-events: none;
	display: block;
}

.mva-rte-sep {
	display: inline-block;
	width: 1px;
	height: 16px;
	background: var(--mv-admin-border);
	margin: 0 3px;
}

/* Link entry bar — shown beneath the toolbar when the link button is pressed */
.mva-rte-link-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-top: none;
}
/* 🚨 The box keeps a width a link can be typed in, and the buttons WRAP beneath
   it when the bar is narrow. It was `flex: 1` with nothing to stop it shrinking:
   in the page builder's settings drawer a fourth button ("Choose a document")
   squeezed it to a sliver and no link could be typed (Matt, staging,
   2026-10-12). */
.mva-rte-link-bar .mva-rte-link-input {
	flex: 1 1 150px;
	min-width: 150px;
	height: 30px;
	font-size: 13px;
	padding: 0 8px;
}
.mva-rte-link-bar .mva-btn {
	flex-shrink: 0;
	white-space: nowrap;
}
.mva-rte-link-newtab-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 12px;
	white-space: nowrap;
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
}
/* With "Choose a document" in the bar there are four buttons: the box takes a
   row of its own and the buttons sit together beneath it. */
.mva-rte-link-bar:has(.mva-rte-link-doc) .mva-rte-link-input {
	flex-basis: 100%;
}
/* The Button control's words and look, on a row of their own above the link
   box while the bar is open for a button (rte.js unhides them). */
.mva-rte-link-bar .mva-rte-btn-text {
	flex: 1 1 150px;
	min-width: 150px;
	height: 30px;
	font-size: 13px;
	padding: 0 8px;
}
.mva-rte-link-bar .mva-rte-btn-style {
	flex: 0 0 auto;
	height: 30px;
	font-size: 13px;
	padding: 0 8px;
}

.mva-rte-editor {
	min-height: 160px;
	padding: 10px 12px;
	font-family: var(--admin-font);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mv-admin-text);
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: 0 0 var(--mv-admin-radius) var(--mv-admin-radius);
	outline: none;
	transition: border-color 0.15s;
}

.mva-rte-editor:focus {
	border-color: var(--mv-admin-accent);
}

.mva-rte-editor h2 { font-size: 18px; font-weight: 700; margin: 10px 0 5px; }
.mva-rte-editor h3 { font-size: 15px; font-weight: 700; margin: 8px 0 4px; }
.mva-rte-editor h4 { font-size: 13px; font-weight: 700; margin: 6px 0 3px; }
.mva-rte-editor a  { color: var(--mv-admin-accent); text-decoration: underline; }
/* A button in the text (the Button control) — drawn as a button here so the
   dealer can see it is one; on the site it wears the site's own .mv-btn. */
.mva-rte-editor a.mv-btn {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--mv-admin-accent);
	border-radius: var(--mv-admin-radius);
	text-decoration: none;
}
.mva-rte-editor a.mv-btn--primary {
	background: var(--mv-admin-accent);
	color: var(--mv-admin-surface);
}
.mva-rte-editor a.mv-btn--secondary {
	background: transparent;
	color: var(--mv-admin-accent);
}
.mva-rte-editor p  { margin: 0 0 0.5em; }
.mva-rte-editor p:last-child { margin-bottom: 0; }
.mva-rte-editor ul,
.mva-rte-editor ol { padding-left: 20px; margin: 6px 0; }

.mva-oh-info-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 10px 12px;
}

.mva-oh-info-notice a {
	color: var(--mv-admin-accent);
	text-decoration: none;
	font-weight: 500;
}

.mva-oh-info-notice a:hover {
	text-decoration: underline;
}

/* ── Package & Billing ───────────────────────────────────────────────────── */
.mva-pkg-usage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.mva-pkg-usage-item {}
.mva-pkg-usage-label {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}
.mva-pkg-usage-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--mv-admin-text);
	margin-bottom: 6px;
}
.mva-pkg-usage-value--over { color: var(--mv-admin-danger); }
.mva-usage-bar-wrap {
	height: 6px;
	background: var(--mv-admin-border);
	border-radius: 3px;
	overflow: hidden;
}
.mva-usage-bar {
	height: 100%;
	background: var(--mv-admin-accent);
	border-radius: 3px;
	transition: width 0.3s ease;
}
.mva-usage-bar--warn { background: #f59e0b; }
.mva-usage-bar--over { background: var(--mv-admin-danger); }
.mva-pkg-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mva-pkg-feature {
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 20px;
	font-weight: 500;
}
.mva-pkg-feature--on  { background: #dcfce7; color: #166534; }
.mva-pkg-feature--off { background: var(--mv-admin-border); color: var(--mv-admin-text-secondary); }
.mva-pkg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.mva-pkg-card-admin {
	border: 1px solid var(--mv-admin-border);
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}
.mva-pkg-card-admin--upgrade {
	border-color: var(--mv-admin-accent);
}
.mva-pkg-card-admin-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mv-admin-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.mva-pkg-card-admin-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--mv-admin-text);
}
.mva-pkg-card-admin-price {
	font-size: 24px;
	font-weight: 800;
	color: var(--mv-admin-text);
}
.mva-pkg-card-admin-features {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

/* =============================================================================
   Stock Source Onboarding Gate
   Used in: /mv-admin/views/stock/index.php (when mv_tenants.stock_source IS NULL)
   Replaces the stock list with a two-card "Choose manual or AutoTrader" gate.
   ============================================================================= */

.mva-stock-gate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

.mva-stock-gate-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mva-stock-gate-card:hover {
	border-color: var(--mv-admin-accent);
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
	transform: translateY(-2px);
}

.mva-stock-gate-card-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	color: var(--mv-admin-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mva-stock-gate-card-icon svg {
	width: 100%;
	height: 100%;
}

.mva-stock-gate-card-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--mv-admin-text);
	margin: 0 0 10px;
}

.mva-stock-gate-card-body {
	font-size: 13px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 20px;
	max-width: 36ch;
}

.mva-stock-gate-card-cta {
	margin-top: auto;
	min-width: 160px;
	justify-content: center;
}

.mva-stock-gate-card-cta:disabled {
	opacity: 0.5;
	cursor: wait;
}

.mva-stock-gate-footnote {
	text-align: center;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 4px 0 0;
}

/* =============================================================================
   Onboarding Banner + Topbar Pill
   Used by: /mv-admin/index.php (topbar pill) and /mv-admin/views/dashboard.php
   Banner/pill shown when tenant is mid-onboarding (not complete, not dismissed).
   ============================================================================= */

/* ── Topbar pill — compact "Setup X/Y" link that navigates to dashboard ─────── */
.mva-topbar-onboarding {
	cursor: pointer;
}

.mva-topbar-onboarding:hover {
	filter: brightness(0.95);
}

/* ── Full dashboard banner ──────────────────────────────────────────────────── */
.mva-onboarding-banner {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-left: 3px solid var(--mv-admin-accent);
	border-radius: var(--mv-admin-radius-lg);
	padding: 20px 24px;
	margin-bottom: 20px;
}

.mva-onboarding-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.mva-onboarding-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--mv-admin-text);
	line-height: 1.4;
}

.mva-onboarding-count {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
}

.mva-onboarding-close {
	background: transparent;
	border: none;
	padding: 4px;
	margin: -4px;
	cursor: pointer;
	color: var(--mv-admin-text-secondary);
	border-radius: var(--mv-admin-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
}

.mva-onboarding-close:hover {
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text);
}

/* ── Step list ──────────────────────────────────────────────────────────────── */
.mva-onboarding-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mva-onboarding-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	color: var(--mv-admin-text);
	transition: background 0.15s;
}

.mva-onboarding-item--next {
	background: var(--mv-admin-accent-dim);
}

.mva-onboarding-item--done {
	color: var(--mv-admin-text-secondary);
	opacity: 0.7;
}

.mva-onboarding-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mv-admin-surface-alt);
	color: var(--mv-admin-text-secondary);
}

.mva-onboarding-item--done .mva-onboarding-icon {
	background: #dcfce7;
	color: #166534;
}

.mva-onboarding-item--next .mva-onboarding-icon {
	background: var(--mv-admin-accent);
	color: #ffffff;
}

.mva-onboarding-label {
	flex: 1;
	min-width: 0;
}

.mva-onboarding-item--done .mva-onboarding-label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--mv-admin-text-secondary);
}

.mva-onboarding-cta {
	flex-shrink: 0;
}

.mva-onboarding-link {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	text-decoration: none;
}

.mva-onboarding-link:hover {
	color: var(--mv-admin-accent);
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Superadmin — Make & Model Alias UI
   Used by /mv-admin/views/superadmin/makes.php and models.php
   Previously lived inline in makes.php; consolidated here per the
   no-CSS-in-PHP rule.
   ───────────────────────────────────────────────────────────────────────── */

.mva-alias-dirty-name {
	font-weight: 600;
	font-size: 14px;
	margin: 0;
	color: var(--mv-admin-text);
}

.mva-aliases {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}

.mva-aliases--empty {
	display: none;
}

.mva-alias-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px 1px 8px;
	background: var(--mv-admin-surface-alt, #2a2a2a);
	border: 1px solid var(--mv-admin-border, #3a3a3a);
	border-radius: 3px;
	font-size: 11px;
	color: var(--mv-admin-text-secondary, #888);
	white-space: nowrap;
}

.mva-alias-delete {
	background: none;
	border: none;
	padding: 0 1px;
	cursor: pointer;
	color: var(--mv-admin-text-secondary, #888);
	font-size: 13px;
	line-height: 1;
}

.mva-alias-delete:hover {
	color: #e03131;
}

.mva-hint {
	font-size: 12px;
	color: var(--mv-admin-text-secondary, #888);
	margin-top: 4px;
	margin-bottom: 0;
}

/* =============================================================================
   Superadmin Cron Manager — /mv-admin/superadmin/crons/
   View: mv-admin/views/superadmin/crons/index.php
   API:  admin/api/admin/superadmin/cron-{tail,run}.php
   Helper: classes/Shared/Crons.php
   ============================================================================= */

/* ── Summary panel — 4-stat row of healthy / stale / errored / total ────── */
.mva-cron-summary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	padding: 0;
	overflow: hidden;
	background: var(--mv-admin-border);
	margin-bottom: 20px;
}

.mva-cron-summary-stat {
	background: var(--mv-admin-surface);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.mva-cron-summary-num {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.mva-cron-summary-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.mva-cron-summary-stat--ok      .mva-cron-summary-num { color: #15803d; }
.mva-cron-summary-stat--warn    .mva-cron-summary-num { color: #b45309; }
.mva-cron-summary-stat--error   .mva-cron-summary-num { color: #b91c1c; }
.mva-cron-summary-stat--neutral .mva-cron-summary-num { color: var(--mv-admin-text); }

/* ── Card grid — one card per cron ─────────────────────────────────────── */
.mva-cron-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.mva-cron-card {
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
}

.mva-cron-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.mva-cron-card-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	color: var(--mv-admin-text);
}

.mva-cron-card-desc {
	font-size: 13px;
	line-height: 1.45;
	color: var(--mv-admin-text-secondary);
	margin: 0 0 14px;
}

/* Status pill — colour-coded by health class. The class- modifier is set
   from Crons::statusFor()['class'] which yields: ok / warn / error.
   "unknown" maps to warn at the PHP level. */
.mva-cron-status {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.mva-cron-status--ok {
	background: #d1fae5;
	color: #065f46;
}

.mva-cron-status--warn {
	background: #fef3c7;
	color: #92400e;
}

.mva-cron-status--error {
	background: #fee2e2;
	color: #991b1b;
}

/* dl-shaped meta block — schedule / last run / next run / last log line */
.mva-cron-card-meta {
	margin: 0 0 14px;
	display: grid;
	grid-template-columns: 100px 1fr;
	row-gap: 6px;
	column-gap: 12px;
	font-size: 13px;
}

.mva-cron-card-meta dt {
	color: var(--mv-admin-text-secondary);
	font-weight: 500;
}

.mva-cron-card-meta dd {
	margin: 0;
	color: var(--mv-admin-text);
}

/* Absolute timestamp shown beside relative — small + dim so the
   relative-time stays the primary signal */
.mva-cron-card-meta-abs {
	display: block;
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	margin-top: 1px;
}

/* Script path + systemd service name — monospace so they read as
   filesystem strings rather than prose */
.mva-cron-card-meta-mono {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px !important;
	word-break: break-all;
}

/* Last log line — monospace + ellipsis truncation. Click "View Log" for
   the full tail. */
.mva-cron-card-lastlog {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
	font-size: 12px !important;
	background: var(--mv-admin-surface-alt);
	padding: 6px 8px;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mva-cron-card-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

/* ── Per-card "Run manually via SSH" details block ──────────────────────
   Shown beneath the View Log button. Pure-HTML <details> — no JS. The
   command is the systemctl trigger; output writes to the cron's log file
   so View Log captures the result. */
.mva-cron-card-runcmd {
	margin-top: 12px;
	border-top: 1px solid var(--mv-admin-border);
	padding-top: 10px;
}

.mva-cron-card-runcmd > summary {
	font-size: 12px;
	font-weight: 500;
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mva-cron-card-runcmd > summary::-webkit-details-marker {
	display: none;
}

.mva-cron-card-runcmd > summary::before {
	content: '▸';
	font-size: 11px;
	transition: transform 0.15s;
	display: inline-block;
	width: 10px;
}

.mva-cron-card-runcmd[open] > summary::before {
	transform: rotate(90deg);
}

.mva-cron-card-runcmd > summary:hover {
	color: var(--mv-admin-text);
}

.mva-cron-card-runcmd p {
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	margin: 8px 0 4px;
}

.mva-cron-card-runcmd code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	padding: 1px 5px;
	border-radius: 3px;
}

.mva-cron-card-runcmd pre {
	margin: 4px 0;
	padding: 8px 10px;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: var(--mv-admin-radius);
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.5;
	user-select: all;
}

.mva-cron-card-runcmd pre code {
	background: transparent;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.mva-cron-card-runcmd-note {
	font-size: 11px !important;
	color: var(--mv-admin-text-secondary);
	font-style: italic;
}

/* ── Log modal — wider + monospace pre body ────────────────────────────── */
.mva-cron-log-modal-panel {
	max-width: 1080px;
	width: 95vw;
}

.mva-cron-log-body {
	margin: 0;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	background: #0f172a;
	color: #e2e8f0;
	padding: 14px 16px;
	border-radius: var(--mv-admin-radius);
	max-height: 65vh;
	overflow: auto;
	white-space: pre;
}

/* ── SSH reference panel — collapsible <details> blocks ────────────────── */
.mva-cron-ssh-ref {
	padding: 22px 24px;
}

.mva-cron-ssh-block {
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	margin-top: 10px;
	background: var(--mv-admin-surface-alt);
}

.mva-cron-ssh-block > summary {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	color: var(--mv-admin-text);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mva-cron-ssh-block > summary::-webkit-details-marker {
	display: none;
}

.mva-cron-ssh-block > summary::before {
	content: '▸';
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	transition: transform 0.15s;
	display: inline-block;
	width: 12px;
}

.mva-cron-ssh-block[open] > summary::before {
	transform: rotate(90deg);
}

.mva-cron-ssh-block > summary:hover {
	background: var(--mv-admin-border);
}

.mva-cron-ssh-block ol {
	padding: 4px 16px 12px 36px;
	margin: 0;
}

.mva-cron-ssh-block li {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mv-admin-text);
	margin-bottom: 10px;
}

.mva-cron-ssh-block li:last-child {
	margin-bottom: 0;
}

.mva-cron-ssh-block code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	padding: 1px 5px;
	border-radius: 3px;
}

.mva-cron-ssh-block pre {
	margin: 6px 0 0;
	padding: 10px 12px;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: var(--mv-admin-radius);
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.5;
}

.mva-cron-ssh-block pre code {
	background: transparent;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Standalone <pre><code> directly inside the .ssh-block (the Inspect
   block doesn't wrap in <ol>); same dark-pre styling. */
.mva-cron-ssh-block > pre {
	margin: 0 14px 14px;
}

/* ── AT Price Indicator widget (stock-edit form) ──
   Surfaces AT's auto-generated 5-band price indicator (LOW / GREAT / GOOD /
   FAIR / HIGH, plus NOANALYSIS) for outbound-published stocks. Cache lives
   on mv_stock.at_price_indicator_* — populated by the publish cron via
   OutboundConnection::refreshPriceIndicator(). Widget renders only when
   data is present; gracefully hides for non-AT tenants + new stock + stocks
   AT couldn't analyse. Click "View details" to open the modal with full
   band table + £-deltas (mirrors AT's portal Price Indicator modal UX). */
.mva-price-indicator {
	margin-top: 8px;
	padding: 10px 12px;
	background: #f4f7fb;
	border: 1px solid #d4dce6;
	border-radius: 6px;
	font-size: 12px;
}
.mva-price-indicator-noanalysis {
	color: #6b7280;
	font-style: italic;
}
.mva-price-indicator-bar {
	display: flex;
	height: 18px;
	border-radius: 4px;
	overflow: hidden;
	margin: 6px 0 8px;
	position: relative;
	background: #e5e7eb;
}
.mva-price-indicator-band { height: 100%; }
.mva-price-indicator-band--low   { background: #e5e7eb; }
.mva-price-indicator-band--great { background: #86efac; }
.mva-price-indicator-band--good  { background: var(--mv-admin-success); }
.mva-price-indicator-band--fair  { background: #fbbf24; }
.mva-price-indicator-band--high  { background: #f87171; }
.mva-price-indicator-marker {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 3px;
	background: #1e3a5f;
	border-radius: 2px;
}
.mva-price-indicator-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.mva-price-indicator-rating {
	display: inline-block;
	padding: 4px 5px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0px;
}
.mva-price-indicator-rating--low   { background: #e5e7eb; color: #4b5563; }
.mva-price-indicator-rating--great { background: #bbf7d0; color: #166534; }
.mva-price-indicator-rating--good  { background: var(--mv-admin-success); color: var(--mv-admin-success-text); }
.mva-price-indicator-rating--fair  { background: var(--mv-admin-warning); color: var(--mv-admin-warning-text); }
.mva-price-indicator-rating--high  { background: var(--mv-admin-danger); color: var(--mv-admin-danger-text); }
.mva-price-indicator-link {
	color: #2563eb;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	text-decoration: underline;
}
.mva-price-indicator-link:hover { color: #1e40af; }

/* Modal — full band table with £-deltas, mirrors AT portal's
   "Price indicator" modal layout */
.mva-price-indicator-modal-bar {
	display: flex;
	height: 28px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: #e5e7eb;
	margin: 16px 0 6px;
}
.mva-price-indicator-modal-bar .mva-price-indicator-band { height: 100%; }
.mva-price-indicator-modal-labels {
	display: flex;
	margin-bottom: 4px;
	font-size: 11px;
	color: #6b7280;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.4px;
}
.mva-price-indicator-modal-labels > span {
	flex: 1;
	text-align: center;
}
.mva-price-indicator-modal-thresholds {
	margin-top: 4px;
	font-size: 11px;
	color: #4b5563;
	position: relative;
	height: 44px;
}
.mva-price-indicator-modal-threshold {
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
	padding-top: 10px;
}
/* Thin connector line from each label up to the band-edge boundary it
   represents. Bar uses equal-width bands so thresholds at fixed 20/40/60/80
   positions never collide — no vertical stagger needed. */
.mva-price-indicator-modal-threshold::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -8px;
	width: 1px;
	height: 8px;
	background: #cbd5e1;
}
.mva-price-indicator-modal-threshold-amount { font-weight: 600; color: #1e3a5f; display: block; }
.mva-price-indicator-modal-threshold-delta  { color: #6b7280; display: block; font-size: 10px; }
.mva-price-indicator-modal-disclaimer {
	margin-top: 20px;
	padding: 10px 12px;
	background: #f4f7fb;
	border-radius: 4px;
	font-size: 12px;
	color: #4b5563;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── AT Valuations widget — button-driven, sits under Price input (Add+Edit) ──
   Companion to the post-publish price-indicator band widget above. Renders
   only when the tenant has an active outbound AT connection. Inactive state =
   hint + disabled button; active state on click = button + populated widget.
   See mv-admin/views/stock/form.php for the HTML + JS (mvaValuations*). */
.mva-valuations {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mva-valuations-hint {
	font-size: 12px;
	color: #6b7280;
	font-style: italic;
}
.mva-valuations-btn {
	align-self: flex-start;
	font-size: 12px;
}
.mva-valuations-widget {
	margin-top: 4px;
	padding: 10px 12px;
	background: #f4f7fb;
	border: 1px solid #d4dce6;
	border-radius: 6px;
	font-size: 12px;
}
.mva-valuations-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.mva-valuations-title {
	font-weight: 600;
	color: #1e3a5f;
}
.mva-valuations-refresh {
	background: none;
	border: none;
	color: #2563eb;
	cursor: pointer;
	font-size: 11px;
	padding: 0;
	text-decoration: underline;
}
.mva-valuations-refresh:hover { color: #1e40af; }
.mva-valuations-headline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 4px 0;
}
.mva-valuations-label {
	color: #4b5563;
	font-size: 12px;
}
.mva-valuations-retail {
	font-size: 16px;
	font-weight: 600;
	color: #1e3a5f;
}
.mva-valuations-delta {
	font-size: 12px;
	margin-top: 2px;
	padding: 4px 8px;
	border-radius: 4px;
	background: #e5e7eb;
	color: #4b5563;
}
.mva-valuations-delta--good  { background: #bbf7d0; color: #166534; }
.mva-valuations-delta--amber { background: #fef3c7; color: #92400e; }
.mva-valuations-delta--high  { background: #fee2e2; color: #991b1b; }
.mva-valuations-ref {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px dashed #d4dce6;
	color: #6b7280;
	font-size: 11px;
}
.mva-valuations-ref span span {
	color: #1e3a5f;
	font-weight: 600;
}
.mva-valuations-empty {
	color: #6b7280;
	font-style: italic;
	font-size: 12px;
	padding: 4px 0;
}
.mva-valuations-disclaimer {
	margin-top: 6px;
	color: #6b7280;
	font-style: italic;
	font-size: 11px;
	line-height: 1.4;
}
.mva-valuations-error {
	margin-top: 6px;
	padding: 6px 8px;
	background: #fee2e2;
	color: #991b1b;
	border-radius: 4px;
	font-size: 11px;
}

/* ── Publishing card — per-marketplace toggle UI (phase 3, stock-publishing) ──
   Renders inside .mva-card#publishing on the stock edit form. One sub-card
   per publishable destination. Click toggle → AJAX flip via
   /admin/api/admin/stock/toggle-publish.php → optimistic UI then status
   badge updates. */
.mva-publishing-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin-top: 4px;
}
.mva-publishing-card {
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}
.mva-publishing-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.mva-publishing-card-name {
	font-size: 13px;
	font-weight: 600;
	color: #1e3a5f;
}
/* Edit-form publishing card: logo + name grouped left, toggle stays right */
.mva-publishing-card-titlegroup {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.mva-publishing-card-logo {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 5px;
	object-fit: contain;
}
/* Destination panel header (publishing tab) — logo above the marketplace name */
.mva-destination-logo {
	display: block;
	height: auto;
	width: 134px;
	max-width: 70%;
	object-fit: contain;
	margin-bottom: 10px;
	padding: 1rem;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
}
.mva-publishing-card-status {
	font-size: 11px;
	color: #6b7280;
}
.mva-publishing-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 11px;
}
.mva-publishing-status--off       { background: #f1f5f9; color: #64748b; }
.mva-publishing-status--pending   { background: #fef3c7; color: #92400e; }
.mva-publishing-status--published { background: #d1fae5; color: #065f46; }
.mva-publishing-status--error     { background: #fee2e2; color: #991b1b; cursor: help; }
.mva-publishing-status--rejected  { background: #fee2e2; color: #991b1b; font-weight: 600; }
/* Nudge pill — dealer-actionable rejections (e.g. AT's "must contain images").
   Amber palette signals "needs your attention" rather than alarming red.
   Matches the existing --pending status palette so the visual language stays
   consistent across all amber states. */
.mva-publishing-status--nudge     { background: #fef3c7; color: #92400e; font-weight: 600; }
.mva-publishing-status-time       { font-weight: 400; opacity: 0.7; }

/* Marketplace rejection card border tint — subtle visual anchor on top of
   the status pill, draws the eye to the affected destination in the
   Publishing card grid. */
.mva-publishing-card--rejected {
	border-color: #fca5a5 !important;
	background: #fef7f7;
}
/* Nudge variant — amber border + soft amber tint. Same visual weight as
   --rejected (still draws the eye) but the colour cue communicates "fixable
   by you" rather than "AT-side block". */
.mva-publishing-card--nudge {
	border-color: #fcd34d !important;
	background: #fffbeb;
}

/* Rejection-message block inside a publishing card. CSS line-clamping
   handles the long-message UX — defaults to clamped at 3 lines, click
   "Show more" to expand. Long messages (>220 chars) get the
   --clamped modifier server-side; short ones don't and just render in
   full. Future eBay-style messages (often 500+ chars) get the same
   treatment automatically. */
.mva-publishing-rejection {
	margin-top: 8px;
	padding: 8px 10px;
	background: rgba(254, 226, 226, 0.5);
	border-radius: 6px;
	font-size: 12px;
	color: #7f1d1d;
	line-height: 1.5;
}
/* Nudge variant — same shape, amber tint instead of red. Quotes the
   verbatim AT message inside the calmer frame. */
.mva-publishing-rejection--nudge {
	background: rgba(254, 243, 199, 0.7);
	color: #78350f;
}
.mva-publishing-rejection--nudge .mva-publishing-rejection-expand { color: #92400e; }
.mva-publishing-rejection--nudge .mva-publishing-rejection-expand:hover { color: #78350f; }
.mva-publishing-rejection-msg {
	white-space: pre-wrap;
	word-wrap: break-word;
}
.mva-publishing-rejection--clamped .mva-publishing-rejection-msg {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mva-publishing-rejection-expand {
	display: inline-block;
	margin-top: 4px;
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: #991b1b;
	cursor: pointer;
	text-decoration: underline;
}
.mva-publishing-rejection-expand:hover { color: #7f1d1d; }
/* Once expanded (clamped class removed by JS toggle), button text doesn't
   auto-update — minor UX cost vs. the JS-free CSS-only toggle. Acceptable
   for v1; can refine to swap "Show more" / "Show less" if dealers
   ask. */

/* Re-check button row under the Publishing cards grid. */
.mva-publishing-recheck {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Toggle switch (iOS-style). Reusable beyond Publishing — but only used
   here for now. CSS-only via :checked + adjacent slider. */
.mva-toggle {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}
.mva-toggle input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}
.mva-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #cbd5e1;
	border-radius: 22px;
	transition: background-color 0.2s ease;
}
.mva-toggle-slider::before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	top: 3px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.mva-toggle input:checked + .mva-toggle-slider { background-color: var(--mv-admin-success); }
.mva-toggle input:checked + .mva-toggle-slider::before { transform: translateX(18px); }
.mva-toggle input:disabled + .mva-toggle-slider { opacity: 0.5; cursor: wait; }

/* ── Publishing hub vehicle-type filter dropdown (phase 6) ──
   Only rendered for multi-type tenants. Pushes a ?type=<slug> param onto
   the URL when changed; the server filters the cards-grid accordingly. */
.mva-publishing-typefilter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
}
.mva-publishing-typefilter-label {
	font-weight: 500;
	color: var(--mv-admin-text);
	margin-right: 2px;
}
.mva-publishing-typefilter select {
	min-width: 180px;
}
.mva-publishing-typefilter-meta {
	color: var(--mv-admin-text-secondary);
}
.mva-publishing-typefilter-meta a {
	margin-left: 6px;
}

/* ── Publishing hub cards-grid (phase 6, stock-publishing) ──
   Landing page at /mv-admin/settings/publishing/ shows one card per
   marketplace (filtered to those whose vehicle-type scope overlaps the
   tenant's enabled types). Card statuses: connected (green) / available
   (neutral blue, click to configure) / coming_soon (greyed). Click a
   card → drill into ?destination={slug}. */
.mva-publishing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 4px;
}
.mva-publishing-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mva-publishing-card:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}
.mva-publishing-card--coming_soon {
	opacity: 0.78;
}
.mva-publishing-card--coming_soon:hover {
	opacity: 1;
}
.mva-publishing-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mva-publishing-card-icon {
	width: 70px;
	height: 70px;
	flex-shrink: 0;
	border-radius: 6px;
	object-fit: contain;
	background: #f1f5f9;
	padding: 10px;
}
.mva-publishing-card-initial {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 6px;
	background: #e0e7ff;
	color: #3730a3;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}
.mva-publishing-card-title {
	flex: 1;
	font-weight: 600;
	color: var(--mv-admin-text);
	font-size: 14px;
	line-height: 1.3;
}
.mva-publishing-card-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}
.mva-publishing-card-status--connected {
	background: #dcfce7;
	color: #166534;
}
.mva-publishing-card-status--available {
	background: #dbeafe;
	color: #1e40af;
}
.mva-publishing-card-status--coming_soon {
	background: #f1f5f9;
	color: #475569;
}
.mva-publishing-card-scope {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.mva-publishing-card-scope-chip {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 11px;
	background: #f8fafc;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

/* ── AT Search cap chip strip (phase 5e, stock-publishing) ──
   Per-connection cap-usage chips above the stock filter row. One chip
   per active outbound AT connection. Colour state: green when under
   75% of cap, amber 75-95%, red ≥95%. Always-visible "where am I
   against my contract allowance" surface. */
.mva-cap-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.mva-cap-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	border: 1px solid transparent;
	white-space: nowrap;
}
.mva-cap-chip strong {
	font-weight: 600;
}
.mva-cap-chip-loc {
	color: inherit;
	opacity: 0.85;
}
.mva-cap-chip--green {
	background: var(--mv-admin-success-dim);
	border-color: var(--mv-admin-success);
	color: var(--mv-admin-text);
}
.mva-cap-chip--amber {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}
.mva-cap-chip--red {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

/* ── Bulk-action selection (phase 5b, stock-publishing) ──
   Per-row leftmost checkbox + master checkbox in the header. Floating
   bar appears under the filter row when ≥1 row is checked. Bar uses
   position:sticky so it stays visible as the dealer scrolls a long
   stock list. Bar markup is rendered unconditionally; visibility is
   driven by the [hidden] attribute (toggled by selection JS).

   5b ships with count + clear only. 5c populates the action dropdown
   into .mva-bulk-action-bar-actions and binds AJAX dispatch via the
   shared mvaBulkActionModal() helper in admin-utils.js. */
.mva-bulk-checkbox-cell {
	width: 36px;
	padding-left: 14px !important;
	padding-right: 4px !important;
}
.mva-bulk-checkbox-cell input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}
/* ── Automatic photo trim note — Sold / Archived tabs ─────────────────────────
   Sits above the filter row. A note, not a prompt: it says when MotoVend removes
   a retired vehicle's extra photos (the wording is ImageTrimSchedule's). It was
   a banner with a button until 2026-10, hence the class name.
   🚨 VARIABLES ONLY, no hex. .mva-bulk-action-bar just below is an older block
   carrying literal hex and is NOT the pattern to copy. */
.mva-trim-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	margin-bottom: 14px;
	background: var(--mv-admin-warning-dim);
	border: 1px solid var(--mv-admin-warning);
	border-radius: 8px;
}
.mva-trim-banner-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mva-trim-banner-text strong {
	font-size: 14px;
	color: var(--mv-admin-text);
}
.mva-trim-banner-text span {
	font-size: 13px;
	color: var(--mv-admin-text-muted);
}
.mva-bulk-action-bar {
	position: sticky;
	/* Filter row above is ~60-70px tall — bar pins immediately under it. */
	top: 70px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	margin-bottom: 14px;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
	font-size: 14px;
}
.mva-bulk-action-bar[hidden] { display: none; }
.mva-bulk-action-bar-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #334155;
}
.mva-bulk-action-bar-count strong {
	color: #1e293b;
	font-weight: 600;
}
.mva-bulk-action-bar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Modal internals — destination picker rows (Publish/Unpublish) */
.mva-bulk-dest-picker {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}
.mva-bulk-dest-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #e2e8f0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.mva-bulk-dest-row:last-child { border-bottom: none; }
.mva-bulk-dest-row:hover { background: #f8fafc; }
.mva-bulk-dest-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.mva-bulk-dest-row-name { flex: 1; font-weight: 500; color: #1e293b; }
.mva-bulk-dest-row-cap { font-size: 12px; color: #64748b; }

/* Price-adjust mode toggle — button-group style */
.mva-bulk-price-mode {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	background: #fff;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.mva-bulk-price-mode:hover { background: #f8fafc; border-color: #cbd5e1; }
.mva-bulk-price-mode input[type="radio"] { margin: 0; }
.mva-bulk-price-mode:has(input[type="radio"]:checked) {
	background: #eef2ff;
	border-color: #6366f1;
	color: #1e293b;
}

/* Stock list horizontal-scroll override deleted 2026-05-27 — the base
   .mva-card--flush rule now provides this behaviour platform-wide. The
   .mva-stock-list-table-wrap class is still present on the wrapper for
   future per-page tweaks but currently carries no styles of its own. */

/* ── Stock list publishing toggles (phase 4, stock-publishing) ──
   Per-stock publishing-pill STRIP rendered as a sub-row UNDER each
   main vehicle row. Visually attached to the parent via shared soft
   background + no top border. One pill per active marketplace; each
   pill = brand icon (or initial fallback) + name + small toggle, in
   a rounded container. Same AJAX endpoint as phase-3 edit-form
   toggles — single JS handler binds to .mva-publishing-toggle. */
.mva-stock-publishing-row > td {
	background: #f8fafc;
	border-top: none !important;
	padding: 8px 14px !important;
}
.mva-publishing-pill-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.mva-publishing-pill-strip-label {
	font-size: 11px;
	color: #64748b;
	font-weight: 500;
	margin-right: 4px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.mva-publishing-pill {
	display: inline-flex;
	position: relative;   /* contain the position:absolute hidden checkbox below — without this
	                         it escapes the card's overflow clip (card isn't its containing block)
	                         and extends the page's horizontal scroll on narrow viewports. */
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 9px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 10px;
	color: #334155;
	user-select: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.mva-publishing-pill:hover { border-color: #94a3b8; }
.mva-publishing-pill--on {
	background: var(--mv-admin-success-dim);
	border-color: var(--mv-admin-success);
	color: var(--mv-admin-text);
}
.mva-publishing-pill--rejected {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #991b1b;
	text-decoration: none;       /* when rendered as <a> link */
	cursor: pointer;
}
.mva-publishing-pill--rejected:hover {
	background: #fecaca;
	border-color: #f87171;
}
.mva-publishing-pill--rejected .mva-publishing-pill-initial { background: #991b1b; }

/* Nudge variant — dealer-actionable rejection (e.g. AT "must contain images").
   Amber tones signal "needs your attention" rather than alarming red.
   Same shape + interaction as --rejected so dealers don't relearn the affordance. */
.mva-publishing-pill--nudge {
	background: #fef3c7;
	border-color: #fcd34d;
	color: #92400e;
	text-decoration: none;
	cursor: pointer;
}
.mva-publishing-pill--nudge:hover {
	background: #fde68a;
	border-color: #f59e0b;
}
.mva-publishing-pill--nudge .mva-publishing-pill-initial { background: #92400e; }

/* "Rejected" badge that REPLACES the toggle on a rejected pill. Visual
   anchor — small chip with an X icon + the word "Rejected". Lives in
   the same slot as the toggle does on non-rejected pills, so the pill
   width stays roughly consistent. */
.mva-publishing-pill-rejected-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: #991b1b;
	color: #ffffff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Nudge variant — amber chip with a camera icon + classifier-supplied label
   ("Needs photo"). Same slot/shape as the rejected tag; only the colour
   and copy differ. */
.mva-publishing-pill-nudge-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: #92400e;
	color: #ffffff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mva-publishing-pill-icon {
	width: 25px;
	height: 25px;
	border-radius: 0;
	object-fit: contain;
	flex-shrink: 0;
}
.mva-publishing-pill-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1e3a5f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.mva-publishing-pill--on .mva-publishing-pill-initial { background: var(--mv-admin-success); }
.mva-publishing-pill-label {
	font-weight: 500;
	white-space: nowrap;
}
.mva-publishing-pill-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
/* Small toggle slider — used inside .mva-publishing-pill containers. */
.mva-toggle-slider--sm {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 16px;
	background-color: #cbd5e1;
	border-radius: 16px;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}
.mva-toggle-slider--sm::before {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 2px;
	top: 2px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.mva-publishing-pill input:checked + .mva-toggle-slider--sm { background-color: var(--mv-admin-success); }
.mva-publishing-pill input:checked + .mva-toggle-slider--sm::before { transform: translateX(12px); }
.mva-publishing-pill input:disabled + .mva-toggle-slider--sm { opacity: 0.5; cursor: wait; }

/* ── AI Description Style Library ────────────────────────────────────────────
   Classes used by /mv-admin/superadmin/ai-styles/ — kept together so
   superadmin-only UX stays clearly separable from dealer-facing styles.
   ──────────────────────────────────────────────────────────────────────────── */

.mva-form-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 12px;
}
.mva-form-grid--2col { grid-template-columns: 1fr 1fr; }

/* Monospace textarea — used for system_prompt where structure + indentation
   readability matters more than line-length. Roomy by default. */
.mva-input--mono {
	font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas, monospace;
	font-size: 13px;
	line-height: 1.55;
	white-space: pre-wrap;
}

/* Pills for table status columns — distinct from the larger .mva-pill in
   stock UI; smaller, inline-flush for table cells */
.mva-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.mva-pill--ok    { background: #dcfce7; color: #15803d; }
.mva-pill--warn  { background: #fef3c7; color: #b45309; }
.mva-pill--muted { background: #e5e7eb; color: #4b5563; }

/* Deactivated rows in the style-list table */
.mva-row--inactive { opacity: 0.55; }
.mva-row-sub { font-size: 12px; color: var(--mv-admin-text-secondary); margin-top: 2px; }

/* Live preview output panel on the edit form */
.mva-ai-preview-output {
	border: 1px solid var(--mv-admin-border);
	border-radius: 8px;
	background: var(--mv-admin-surface-alt);
	padding: 12px 14px;
}
.mva-ai-preview-meta {
	font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas, monospace;
	font-size: 11px;
	color: var(--mv-admin-text-secondary);
	margin-bottom: 10px;
	letter-spacing: 0.02em;
}
.mva-ai-preview-text {
	white-space: pre-wrap;
	line-height: 1.6;
	font-size: 14px;
	color: var(--mv-admin-text-primary);
}

/* Style-list table — uses base .mva-table; this just constrains cell width
   of the Sort column so the table looks tidy at superadmin's wide viewport */
.mva-table--styles th:first-child,
.mva-table--styles td:first-child { width: 60px; text-align: center; }
.mva-table--styles td code { font-size: 12px; padding: 1px 6px; background: var(--mv-admin-surface-alt); border-radius: 3px; }

/* Dealer-side AI description generator row in the Description card. Sits
   above the RTE; flex row with style picker + Generate button + cap counter.
   Stacks at narrow widths so admin still works on phone/tablet. */
.mva-ai-gen-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 10px 12px;
	background: var(--mv-admin-surface-alt);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
}
.mva-ai-gen-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
.mva-ai-gen-picker { min-width: 220px; flex: 0 1 auto; }
.mva-ai-gen-btn    { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.mva-ai-cap-counter {
	margin-left: auto;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Advisory banner inside the AI preview modal — shown when finish_reason is
   non-'stop'. Default amber (warning). JS swaps to mva-ai-finish-warning--ok
   variant when finish_reason='length' AND we trimmed cleanly server-side
   (soft info, not a real problem). */
.mva-ai-finish-warning {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
	padding: 10px 14px;
	border-radius: var(--mv-admin-radius);
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 12px;
}
.mva-ai-finish-warning[hidden] { display: none; }

/* ── Notifications bell — topbar dropdown ─────────────────────────────────────
   Bell button + unread badge + dropdown panel listing announcements. Sits in
   .mva-topbar-right between the live/preview icons and the user identity.
   Standard SaaS pattern (bell + count badge + dropdown on click). Per-click
   mark-as-read on individual notifications (vs auto-mark-all on open). */
.mva-topbar-notifications {
	position: relative;
	display: inline-flex;
}
.mva-topbar-notifications-bell {
	font: inherit;
	cursor: pointer;
	position: relative;
}
.mva-topbar-notifications-bell svg { display: block; }
.mva-topbar-notifications-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--mva-topbar-bg);
	pointer-events: none;
}
.mva-topbar-notifications-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: 70vh;
	background: var(--mv-admin-surface, #fff);
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mva-topbar-notifications-panel[hidden] { display: none; }
.mva-topbar-notifications-header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mv-admin-border, #e5e7eb);
	background: var(--mv-admin-surface-alt, #f9fafb);
}
.mva-topbar-notifications-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mv-admin-text, #111);
}
.mva-topbar-notifications-list {
	overflow-y: auto;
	flex: 1;
}
.mva-topbar-notifications-empty {
	padding: 32px 16px;
	text-align: center;
}
.mva-topbar-notifications-empty p {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-topbar-notifications-empty-sub {
	font-size: 12px;
	color: var(--mv-admin-text-tertiary, #9ca3af);
}
.mva-notification {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mv-admin-border, #f0f1f3);
	cursor: pointer;
	transition: background 0.12s;
	border-left: 3px solid transparent;
}
.mva-notification:last-child { border-bottom: none; }
.mva-notification:hover { background: var(--mv-admin-surface-alt, #f9fafb); }
.mva-notification--unread { background: #fff; border-left-color: #2563eb; }
.mva-notification--unread .mva-notification-title { font-weight: 600; }
.mva-notification--read { background: #fafafa; color: var(--mv-admin-text-secondary, #6b7280); }
.mva-notification--read .mva-notification-title { font-weight: 500; }
.mva-notification--info     { /* default — neutral */ }
.mva-notification--warning  { border-left-color: #d97706; }
.mva-notification--critical { border-left-color: #dc2626; }
.mva-notification--critical.mva-notification--read { border-left-color: #fca5a5; }
.mva-notification-title {
	font-size: 13px;
	color: var(--mv-admin-text, #111);
	margin-bottom: 4px;
}
.mva-notification-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary, #4b5563);
	margin-bottom: 6px;
	overflow-wrap: break-word;
}
.mva-notification-cta {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
	margin-top: 2px;
	margin-bottom: 6px;
}
.mva-notification-cta:hover { text-decoration: underline; }
.mva-notification-meta {
	font-size: 11px;
	color: var(--mv-admin-text-tertiary, #9ca3af);
}

/* Critical-severity full-width banner — escalation surface for critical
   announcements. Sits with the existing install-template / sandbox /
   overlimit / auto-enabled panels at top of every admin page. */
.mva-announcement-panel--critical {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--mva-attention-bg);
	border-left: 4px solid var(--mva-attention-border);
	padding: 12px 16px;
	color: var(--mva-attention-border);
}
.mva-announcement-panel--critical p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}
.mva-announcement-panel--critical strong { color: #991b1b; }
.mva-announcement-panel--critical a {
	color: #991b1b;
	font-weight: 600;
	text-decoration: underline;
}

/* ──────────────────────── Customer Reviews ────────────────────────
   /mv-admin/customers/reviews/ — moderation queue, share-link banner,
   ≥5-approved display gate notice. Inline star renderer via .mva-review-stars.
   ───────────────────────────────────────────────────────────────── */

.mva-reviews-share {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mva-reviews-share-text { flex: 1 1 auto; min-width: 0; }

.mva-reviews-share-label {
	font-size: 0.875rem;
	color: #555;
	margin-bottom: 4px;
}

.mva-reviews-share-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.95rem;
	color: #222;
	background: var(--mva-tint-success-dim);
	padding: 6px 10px;
	border-radius: 4px;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mva-reviews-share-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* Contextual status notice — under-threshold (amber, default) /
   above-threshold (green via --success modifier). Drives the same
   layout regardless of state; colour palette flips per modifier. */
.mva-reviews-gate {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fef9e6;
	border-left: 3px solid #f5b400;
}

.mva-reviews-gate-icon {
	color: #c68f00;
	flex-shrink: 0;
	margin-top: 2px;
}

.mva-reviews-gate--success {
	background: var(--mva-tint-success-dim);
	border-left-color: var(--mv-admin-success);
}

.mva-reviews-gate--success .mva-reviews-gate-icon {
	color: var(--mv-admin-success);
}

/* Star rendering — inline + 5-up cluster */
.mva-review-stars {
	display: inline-flex;
	gap: 1px;
	margin-left: 8px;
	vertical-align: middle;
}

.mva-review-stars svg.filled { color: #f5b400; }
.mva-review-stars svg.empty  { color: #e0e0e0; }

/* Per-review row */
.mva-reviews-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mva-reviews-row {
	padding: 20px 24px;
	border-bottom: 1px solid #eee;
}

.mva-reviews-row:last-child { border-bottom: none; }

.mva-reviews-row-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.mva-reviews-row-name {
	font-weight: 600;
	font-size: 1rem;
	color: #222;
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.mva-reviews-row-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.mva-reviews-row-time { color: #888; }

.mva-reviews-row-body {
	font-size: 0.95rem;
	color: #333;
	line-height: 1.5;
	margin-bottom: 12px;
	word-wrap: break-word;
}

.mva-reviews-row-email {
	font-size: 0.8rem;
	color: #888;
	margin-bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mva-reviews-row-email-note { font-style: italic; color: #aaa; }

.mva-reviews-row-note {
	font-size: 0.85rem;
	color: #555;
	background: #f8f8f8;
	padding: 8px 12px;
	border-radius: 4px;
	margin-bottom: 12px;
	border-left: 2px solid #ccc;
}

.mva-reviews-row-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ============================================================================
   ONBOARDING WIZARD — .mva-wiz-*
   ----------------------------------------------------------------------------
   Full-screen single-form-per-step setup wizard at /mv-admin/onboarding/.
   Renders without admin chrome (own <!doctype> shell in views/onboarding/
   index.php). Distinct namespace from the dashboard's .mva-onboarding-banner
   classes — the two surfaces are conceptually different (banner = dashboard
   chip, wiz = full-screen wizard).
   ============================================================================ */

.mva-wiz-body {
	/* 🚨 CLIP, not HIDDEN — and this is load-bearing, not a tidy-up.
	   The base `body` rule sets overflow-x: hidden to clip wide data tables.
	   Per spec, a non-visible value on one axis forces the OTHER axis to
	   compute as `auto`, so that rule silently turns <body> into a scroll
	   container. The page still scrolls on <html>, so any position: sticky
	   descendant resolves against a container that never scrolls and simply
	   never engages. Measured 2026-08-19: with `hidden` the preview column
	   scrolled clean off (top -266 at scrollY 800); with `clip` it pins at
	   top: 24. `clip` clips horizontally exactly as before but creates no
	   scroll container, so overflow-y stays `visible`.
	   Scoped to the wizard rather than fixed on `body` because that rule is
	   platform-wide — see the note handed over with this change. */
	overflow-x: clip;
	margin: 0;
	padding: 0;
	background: var(--mva-body-bg, #f3f4f6);
	color: var(--mv-admin-text, #111827);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── Branded header strip ─────────────────────────────────────────────────── */
.mva-wiz-header {
	background: var(--mva-sidebar-bg, #1a1f2e);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mva-wiz-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.mva-wiz-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	letter-spacing: 0.2px;
}
.mva-wiz-brand-mark {
	font-weight: 700;
	color: #fff;
}
.mva-wiz-brand-sep {
	color: rgba(255, 255, 255, 0.3);
	font-weight: 300;
}
.mva-wiz-brand-sub {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}
.mva-wiz-header-right {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
}
.mva-wiz-welcome {
	color: rgba(255, 255, 255, 0.85);
}
.mva-wiz-welcome strong {
	color: #fff;
	font-weight: 600;
}
.mva-wiz-logout {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 6px 12px;
	border-radius: var(--mv-admin-radius, 6px);
	transition: background 0.15s, color 0.15s;
}
.mva-wiz-logout:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.mva-wiz-progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}
.mva-wiz-progress-bar {
	height: 100%;
	background: var(--mv-admin-accent, #e8320a);
	transition: width 0.4s ease;
}

/* ── Main 2-col layout ────────────────────────────────────────────────────── */
.mva-wiz-main {
	flex: 1;
	/* 1400 rather than 1200: the design step runs rail + controls + preview, and
	   at 1200 the preview pane is narrow enough that mvaViewport scales desktop
	   (1440 logical) below ~0.5 and the type in it stops being readable. */
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 32px 40px;
	/* Single column, rail ACROSS THE TOP. It was a 260px left rail, which cost
	   the full width of a column on every step to show five short labels — and
	   the design step needs that width for controls + preview side by side.
	   Horizontal, the same information costs one shallow row. */
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: flex-start;
}

/* ── Left rail ────────────────────────────────────────────────────────────── */
.mva-wiz-rail {
	/* Not sticky: it sits above the content now, so pinning it would only eat
	   vertical space — the axis this whole layout is short of. */
	position: static;
}
.mva-wiz-rail-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--mv-admin-text-secondary, #6b7280);
	margin-bottom: 12px;
	padding-left: 4px;
}
.mva-wiz-step-list {
	list-style: none;
	margin: 0 0 8px 0;
	padding: 0;
	counter-reset: wiz-step;
	/* Wraps rather than scrolls or truncates: five labels fit one row on a
	   laptop and take two on a narrow window, which is a better failure than a
	   row that clips the step the dealer is looking for. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
}
.mva-wiz-step {
	margin: 0;
}
.mva-wiz-step-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--mv-admin-radius, 6px);
	color: var(--mv-admin-text, #111827);
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s;
	margin-bottom: 0;
	white-space: nowrap;
}
.mva-wiz-step-link:hover {
	background: rgba(0, 0, 0, 0.04);
}
.mva-wiz-step-marker {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.05);
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-step-num {
	color: var(--mv-admin-text-secondary, #6b7280);
	font-weight: 500;
	min-width: 18px;
}
.mva-wiz-step-label {
	/* flex: 1 was right in a vertical rail (fill the column). In a row it makes
	   every item fight for the same space and the labels drift apart. */
	flex: 0 0 auto;
}

/* Status variants */
.mva-wiz-step--done .mva-wiz-step-marker {
	background: var(--mv-admin-accent, #e8320a);
	color: #fff;
}
.mva-wiz-step--done .mva-wiz-step-label,
.mva-wiz-step--done .mva-wiz-step-num {
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-step--current .mva-wiz-step-link {
	background: rgba(232, 50, 10, 0.08);
}
.mva-wiz-step--current .mva-wiz-step-marker {
	background: var(--mv-admin-accent, #e8320a);
	color: #fff;
}
.mva-wiz-step--current .mva-wiz-step-dot {
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
}
.mva-wiz-step--current .mva-wiz-step-label,
.mva-wiz-step--current .mva-wiz-step-num {
	color: var(--mv-admin-text, #111827);
	font-weight: 600;
}
.mva-wiz-step--locked .mva-wiz-step-link {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.mva-wiz-rail-foot {
	margin-top: 16px;
	padding: 0 12px;
	color: var(--mv-admin-text-secondary, #6b7280);
	font-size: 12px;
	line-height: 1.5;
}

/* ── Content pane ─────────────────────────────────────────────────────────── */
.mva-wiz-content {
	background: var(--mv-admin-surface, #fff);
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius-lg, 10px);
	padding: 36px 40px;
	min-height: 480px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.mva-wiz-content-head {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mv-admin-border, #e5e7eb);
}
.mva-wiz-content-num {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--mv-admin-accent, #e8320a);
	margin-bottom: 6px;
}
.mva-wiz-content-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--mv-admin-text, #111827);
	margin: 0;
	line-height: 1.2;
}
.mva-wiz-intro {
	color: var(--mv-admin-text-secondary, #6b7280);
	margin: 0 0 28px 0;
	line-height: 1.55;
	font-size: 15px;
}
.mva-wiz-intro em {
	color: var(--mv-admin-text, #111827);
	font-style: normal;
	font-weight: 600;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.mva-wiz-form {
	display: block;
}
.mva-wiz-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}
.mva-wiz-type-card {
	position: relative;
	display: flex;
	align-items: center;
	padding: 16px 18px;
	border: 2px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	background: #fff;
}
.mva-wiz-type-card:hover {
	border-color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-type-card-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mva-wiz-type-card-input:checked ~ .mva-wiz-type-card-body {
	color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-type-card:has(.mva-wiz-type-card-input:checked) {
	border-color: var(--mv-admin-accent, #e8320a);
	background: var(--mv-accent-dim);
}
.mva-wiz-type-card-body {
	flex: 1;
	font-weight: 500;
	font-size: 15px;
}
.mva-wiz-type-card-label {
	display: block;
}

/* ── Error message ────────────────────────────────────────────────────────── */
.mva-wiz-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 10px 14px;
	border-radius: var(--mv-admin-radius, 6px);
	font-size: 14px;
	margin-bottom: 16px;
}

/* ── Step actions row ─────────────────────────────────────────────────────── */
.mva-wiz-actions {
	display: flex;
	align-items: center;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--mv-admin-border, #e5e7eb);
	gap: 12px;
}
.mva-wiz-actions-spacer {
	flex: 1;
}

/* ── Placeholder (steps not yet shipped) ──────────────────────────────────── */
.mva-wiz-placeholder {
	text-align: center;
	padding: 40px 20px 24px;
}
.mva-wiz-placeholder-icon {
	color: var(--mv-admin-text-secondary, #6b7280);
	margin-bottom: 16px;
	opacity: 0.5;
}
.mva-wiz-placeholder-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
	margin: 0 0 8px 0;
}
.mva-wiz-placeholder-body {
	color: var(--mv-admin-text-secondary, #6b7280);
	margin: 0 0 24px 0;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.55;
}

/* ── Wizard step 2 — Business Details form ──────────────────────────────── */

.mva-wiz-fieldset {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--mv-admin-border, #e5e7eb);
}
/* A fieldset's bottom border SEPARATES it from the next fieldset. When the
   actions bar follows instead, that bar draws its own top border and the two
   render as a doubled rule with ~52px of dead space between them — the
   fieldset's padding + margin meeting the actions' margin + padding. Visible
   on every step; worst where the step is short enough to show both at once.
   The second selector is not redundant: .mva-wiz-error sits hidden between the
   two on most steps, and a hidden element is still a sibling. */
.mva-wiz-fieldset:has(+ .mva-wiz-actions),
.mva-wiz-fieldset:has(+ .mva-wiz-error + .mva-wiz-actions),
/* The design step's fieldsets sit in their own column and the actions bar is
   outside it, so the last one has no actions sibling to match on — it would
   otherwise trail a rule under the font grid with nothing beneath it. */
.mva-wiz-design-controls > .mva-wiz-fieldset:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.mva-wiz-fieldset:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}
.mva-wiz-fieldset-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--mv-admin-text, #111827);
	margin: 0 0 4px 0;
}
.mva-wiz-fieldset-sub {
	font-size: 13px;
	color: var(--mv-admin-text-secondary, #6b7280);
	margin: 0 0 16px 0;
	line-height: 1.5;
}
.mva-wiz-fieldset-sub em {
	font-style: normal;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}

.mva-wiz-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 16px;
}
.mva-wiz-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mva-wiz-field--full {
	grid-column: 1 / -1;
}

.mva-wiz-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}
.mva-wiz-label-hint {
	font-weight: 400;
	color: var(--mv-admin-text-secondary, #6b7280);
	font-size: 12px;
}
.mva-wiz-req {
	color: var(--mv-admin-accent, #e8320a);
	font-weight: 700;
}

.mva-wiz-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	font-size: 14px;
	font-family: inherit;
	color: var(--mv-admin-text, #111827);
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.12s, box-shadow 0.12s;
}
.mva-wiz-input:focus {
	outline: none;
	border-color: var(--mv-admin-accent, #e8320a);
	box-shadow: 0 0 0 3px var(--mv-admin-accent-dim, rgba(232, 50, 10, 0.1));
}
.mva-wiz-input[readonly] {
	background: var(--mv-admin-surface-alt, #f9fafb);
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-input--sm {
	padding: 7px 10px;
	font-size: 13px;
}

.mva-wiz-postcode-row {
	display: flex;
	gap: 8px;
}
.mva-wiz-postcode-row .mva-wiz-input {
	flex: 1;
}
.mva-wiz-postcode-row .mva-btn {
	flex-shrink: 0;
	white-space: nowrap;
}
.mva-wiz-input--postcode {
	text-transform: uppercase;
}
.mva-wiz-postcode-feedback {
	font-size: 12px;
	margin-top: 2px;
	min-height: 1.2em;
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-postcode-feedback--ok    { color: #2c7a4f; }
.mva-wiz-postcode-feedback--error { color: #c0392b; }

.mva-wiz-hours-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 16px;
	margin-bottom: 12px;
}
.mva-wiz-hours-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 10px;
	align-items: center;
}
.mva-wiz-hours-label {
	font-size: 13px;
	color: var(--mv-admin-text, #111827);
}

.mva-wiz-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
	color: var(--mv-admin-text, #111827);
	cursor: pointer;
}
.mva-wiz-checkbox-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--mv-admin-accent, #e8320a);
	cursor: pointer;
}

/* ── Wizard step 3 — Theme / Scheme / Font cards ────────────────────────── */

/* Shared — hidden radio + check badge. Each card type extends with its own
   layout below. .mva-wiz-card-input is positioned off-screen so clicks
   register on the parent label (radio behaviour) without showing the
   native control. */
.mva-wiz-card-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mva-wiz-card-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mv-admin-accent, #e8320a);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ── Scheme cards ─────────────────────────────────────────────────────── */
.mva-wiz-scheme-grid {
	display: grid;
	/* auto-fill + a small floor, so the same rule gives 2 across in the narrow
	   controls column and more as it widens — no per-breakpoint column counts. */
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.mva-wiz-scheme-card,
.mva-wiz-seed-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #fff;
	border: 2px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.mva-wiz-scheme-card:hover,
.mva-wiz-seed-card:hover {
	border-color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-scheme-card--active,
.mva-wiz-seed-card--active {
	border-color: var(--mv-admin-accent, #e8320a);
	background: var(--mv-admin-accent-dim, rgba(232, 50, 10, 0.05));
}
.mva-wiz-scheme-card--active .mva-wiz-card-check,
.mva-wiz-seed-card--active .mva-wiz-card-check {
	display: inline-flex;
}
.mva-wiz-scheme-card-swatches {
	display: inline-flex;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}
.mva-wiz-scheme-card-swatch {
	display: inline-block;
	width: 10px;
	height: 26px;
}
.mva-wiz-scheme-card-body,
.mva-wiz-seed-card-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding-right: 20px; /* clear the check badge top-right */
}
.mva-wiz-scheme-card-label,
.mva-wiz-seed-card-name {
	font-size: 12px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}
/* 🚨 A scheme's description is HIDDEN, a seed's is not, and that asymmetry is
   deliberate. A palette is self-describing — the swatches say more than
   "dark navy with blue accent" ever did — whereas two seeds differ only by
   their name and blurb, so hiding it there would leave nothing to choose on. */
.mva-wiz-scheme-card-desc {
	display: none;
}
.mva-wiz-seed-card-desc {
	font-size: 11px;
	color: var(--mv-admin-text-secondary, #6b7280);
	line-height: 1.4;
}

/* Seed cards after the site exists: readable, not clickable. Deliberately NOT
   greyed into illegibility — the dealer is being shown what they chose, not
   refused something. The disabled radio is what actually enforces it. */
.mva-wiz-seed-grid--locked .mva-wiz-seed-card {
	cursor: default;
	opacity: 0.85;
}
.mva-wiz-seed-grid--locked .mva-wiz-seed-card:hover {
	border-color: var(--mv-admin-border, #e5e7eb);
}
.mva-wiz-seed-grid--locked .mva-wiz-seed-card--active:hover {
	border-color: var(--mv-admin-accent, #e8320a);
}

/* ── Design step layout ───────────────────────────────────────────────── */
/* Desktop-first, matching the file's convention: this IS the two-column state,
   and the stack lives in the max-width: 991.98px block at the foot.
   Mirrors the wizard shell's own 260px 1fr so the preview lines up with the
   content column rather than introducing a third rhythm. */
.mva-wiz-design-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 28px;
	align-items: start;
}
.mva-wiz-design-controls {
	min-width: 0;   /* let the card grids shrink inside the track, not overflow it */
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* 🚨 The sticky is the point of the whole layout, not the columns. Without it
   the preview scrolls out of view by the time the dealer reaches the fonts —
   the same buried-preview problem, one screen further down. */
.mva-wiz-design-preview {
	position: sticky;
	top: 24px;
	min-width: 0;
}

/* ── Seed Builder: unknown-token warning ──────────────────────────────── */
.mva-seed-tokenwarn {
	margin-top: 6px;
}
.mva-seed-tokenwarn-list {
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-seed-tokenwarn-list code {
	font-size: 11px;
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.06);
	color: var(--mv-admin-text, #111827);
}
.mva-seed-tokenwarn-note {
	margin-top: 4px;
	font-style: italic;
}

/* ── Brand-colour card + inline control ───────────────────────────────── */
/* 🚨 Namespaced `brandpick`, NOT `brand`. `.mva-wiz-brand` is already taken by
   the "MotoVend | Setup" wordmark in the wizard header — a flex row at 17px.
   Reusing it made this panel inherit that layout (rows collapsed onto one line
   and overflowed the 260px column) AND pushed this panel's padding, border and
   background onto the header wordmark, because this block sits later in the
   file. Grep before naming inside a shared prefix. */
/* The card is a scheme card (shared chrome above); only the swatch differs —
   a spectrum rather than a palette, because there is no palette until the
   dealer picks a colour. Spanning the full grid row so it reads as "or do
   this instead" rather than as a tenth preset. */
.mva-wiz-scheme-card--brand {
	grid-column: 1 / -1;
}
.mva-wiz-brandpick-swatch {
	width: 30px;
	background: linear-gradient(135deg, #e8320a 0%, #f0b429 25%, #22c55e 50%, #3b82f6 75%, #a855f7 100%);
}

.mva-wiz-brandpick {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	background: var(--mv-admin-bg-subtle, #f9fafb);
}
/* Measured 2026-08-19 against the real 260px controls column: fits with no
   overflow down to 220px, first spills at 180px. Deliberately NOT flex-wrap —
   wrapping removes the overflow at every width but costs 60px of panel height
   (162 -> 222 at 260px), and vertical space is the scarce axis on this step.
   The column is fixed at 260 on desktop and full-width when stacked, so 180
   does not occur; revisit only if that stops being true. */
.mva-wiz-brandpick-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.mva-wiz-brandpick-row:last-of-type {
	margin-bottom: 0;
}
.mva-wiz-brandpick-label {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
	min-width: 92px;
}
/* Native colour inputs carry a chunky default border and inner padding that
   makes them look nothing like the rest of the form; strip both. */
.mva-wiz-brandpick-color {
	flex: 0 0 auto;
	width: 38px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: 4px;
	background: none;
	cursor: pointer;
}
.mva-wiz-brandpick-hex,
.mva-wiz-brandpick-style {
	flex: 1 1 auto;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	font-size: 12px;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: 4px;
	background: #fff;
	color: var(--mv-admin-text, #111827);
}
.mva-wiz-brandpick-hex {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	text-transform: uppercase;
}
.mva-wiz-brandpick-note {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary, #6b7280);
}

/* ── Seed cards + live preview ────────────────────────────────────────── */
/* A seed card IS a scheme card with different innards — the shared chrome
   (border, hover, --active, check badge, body, name, desc) is declared on the
   scheme-card selectors above, which this is joined to. Only what genuinely
   differs lives here. */
.mva-wiz-seed-grid {
	display: grid;
	/* Seeds keep a wider floor than schemes: a scheme is legible as a swatch,
	   a seed is only distinguishable by its name and description. */
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
	margin-bottom: 0;
}
/* Seed cards carry no swatch strip, so their content starts at the left edge
   and they stack rather than centre — a two-line description would otherwise
   sit vertically centred against nothing. */
.mva-wiz-seed-card {
	align-items: flex-start;
}

.mva-wiz-preview {
	margin-top: 4px;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	overflow: hidden;
	background: var(--mv-admin-bg-subtle, #f9fafb);
}
.mva-wiz-preview-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--mv-admin-border, #e5e7eb);
	background: #fff;
}
.mva-wiz-preview-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mv-admin-text-secondary, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Fixed height: mvaViewport derives the iframe's height from THIS pane, so the
   pane must size itself from its own layout context and never from the frame —
   the frame is taken out of flow with width/height written inline. */
/* Viewport-relative so the preview uses the height a laptop actually has, which
   is the scarce axis here. Capped so it does not become absurd on a tall
   monitor, floored so it stays useful on a short one. mvaViewport derives the
   iframe height FROM this pane, so this is the single place that decides it. */
.mva-wiz-preview-pane {
	height: clamp(420px, calc(100vh - 220px), 820px);
	background: #fff;
}
.mva-wiz-preview-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.mva-wiz-preview-note {
	margin: 0;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--mv-admin-text-secondary, #6b7280);
	border-top: 1px solid var(--mv-admin-border, #e5e7eb);
	background: #fff;
}

.mva-wiz-actions-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--mv-admin-text-secondary, #6b7280);
}

/* ── Font cards ───────────────────────────────────────────────────────── */
.mva-wiz-font-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.mva-wiz-font-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 10px 8px;
	background: #fff;
	border: 2px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	min-height: 0;
}
.mva-wiz-font-card:hover {
	border-color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-font-card--active {
	border-color: var(--mv-admin-accent, #e8320a);
	box-shadow: 0 0 0 3px var(--mv-accent-dim);
}
.mva-wiz-font-card--active .mva-wiz-card-check {
	display: inline-flex;
}
.mva-wiz-font-card-preview-h {
	font-family: var(--mva-fp-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--mv-admin-text, #111827);
	line-height: 1.1;
	letter-spacing: -0.01em;
	padding-right: 20px; /* clear the check badge */
}
/* 🚨 Hidden, not deleted from the markup. The pairing is HEADING + BODY, and
   the body face is half of what is being chosen — at 110px wide it wrapped to
   four lines of unreadable grey and told the dealer nothing, but the element
   stays so widening the column can bring it back with one line of CSS. */
.mva-wiz-font-card-preview-b {
	display: none;
	font-family: var(--mva-fp-body);
	font-size: 13px;
	color: var(--mv-admin-text-secondary, #6b7280);
	line-height: 1.4;
}
/* Hidden, not removed from the markup — same reasoning as the body sample: the
   pair still HAS a name, and it is the only handle a dealer has if they ever
   need to describe their choice to support. At 110px the card is showing the
   font itself, which is the honest answer to "which one is this". */
.mva-wiz-font-card-label {
	display: none;
	margin-top: auto;
	padding-top: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--mv-admin-text-secondary, #6b7280);
	border-top: 1px solid var(--mv-admin-border, #e5e7eb);
}
/* ── Wizard step 4 — Logo & Favicon upload ───────────────────────────────── */
.mva-wiz-upload {
	display: flex;
	gap: 20px;
	padding: 18px;
	background: var(--mv-admin-surface-alt, #f9fafb);
	border: 1px dashed var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	align-items: center;
}
.mva-wiz-upload-preview {
	width: 120px;
	height: 80px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mva-wiz-upload-preview--sm {
	width: 64px;
	height: 64px;
}
.mva-wiz-upload-preview--has {
	background: #fff;
}
.mva-wiz-upload-empty {
	color: var(--mv-admin-text-secondary, #6b7280);
	opacity: 0.5;
}
.mva-wiz-upload-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.mva-wiz-upload-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.mva-wiz-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mva-wiz-upload-status {
	font-size: 12px;
	min-height: 1.2em;
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-upload-status--busy  { color: var(--mv-admin-text-secondary, #6b7280); }
.mva-wiz-upload-status--ok    { color: #2c7a4f; }
.mva-wiz-upload-status--error { color: #c0392b; }

/* Ghost button — used for "Skip for now" on step 4 + "Skip & continue" on step 6 */
.mva-btn.mva-btn--ghost {
	background: transparent;
	border: 1px solid transparent;
	color: var(--mv-admin-text-secondary, #6b7280);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mva-btn.mva-btn--ghost:hover {
	color: var(--mv-admin-text, #111827);
	background: rgba(0, 0, 0, 0.03);
}

/* ── Wizard step 5 — Radio cards (source + AT direction) ──────────────── */
.mva-wiz-radio-card {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 16px 18px 16px 18px;
	margin-bottom: 12px;
	background: #fff;
	border: 2px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.mva-wiz-radio-card:hover {
	border-color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-radio-card--active {
	border-color: var(--mv-admin-accent, #e8320a);
	background: var(--mv-admin-accent-dim, rgba(232, 50, 10, 0.05));
}
.mva-wiz-radio-card--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
.mva-wiz-radio-card--sub {
	margin-bottom: 10px;
}
.mva-wiz-radio-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mva-wiz-radio-marker {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--mv-admin-border, #e5e7eb);
	background: #fff;
	position: relative;
	margin-top: 2px;
}
.mva-wiz-radio-card--active .mva-wiz-radio-marker {
	border-color: var(--mv-admin-accent, #e8320a);
}
.mva-wiz-radio-card--active .mva-wiz-radio-marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mv-admin-accent, #e8320a);
	transform: translate(-50%, -50%);
}
.mva-wiz-radio-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.mva-wiz-radio-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}
/* "Recommended" chip on a radio-card heading. Reuses the shared .mva-badge
   rather than introducing a wizard-specific chip — spacing is the only thing
   that differs here, so this stays a scoped rule and not a new component. */
.mva-wiz-radio-title .mva-badge {
	margin-left: 8px;
	vertical-align: 1px;
}
.mva-wiz-radio-desc {
	font-size: 13px;
	color: var(--mv-admin-text-secondary, #6b7280);
	line-height: 1.5;
}
.mva-wiz-radio-desc em {
	font-style: italic;
	color: var(--mv-admin-accent, #e8320a);
}

/* AT direction sub-block — collapsed by default, expands when AT picked */
.mva-wiz-at-direction {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease;
	opacity: 0;
	margin-top: 0;
	padding-left: 28px;
	border-left: 2px solid var(--mv-admin-border, #e5e7eb);
}
.mva-wiz-at-direction--open {
	max-height: 600px;
	opacity: 1;
	margin-top: 8px;
}
.mva-wiz-sub-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--mv-admin-text-secondary, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 12px 0;
}

/* ── Wizard step 6 — Recipient list ──────────────────────────────────── */
.mva-wiz-recip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mva-wiz-recip-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--mv-admin-surface-alt, #f9fafb);
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	font-size: 14px;
}
.mva-wiz-recip-name {
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}
.mva-wiz-recip-email {
	color: var(--mv-admin-text-secondary, #6b7280);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mva-wiz-recip-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: 12px;
	flex-shrink: 0;
}
.mva-wiz-recip-badge--active {
	background: rgba(46, 122, 79, 0.12);
	color: #2c7a4f;
}
.mva-wiz-recip-badge--pending {
	background: rgba(232, 165, 50, 0.15);
	color: #b07b1a;
}

/* ── Completion screen ────────────────────────────────────────────────── */
.mva-wiz-done {
	text-align: center;
	padding: 20px 0 0;
}
.mva-wiz-done-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(46, 122, 79, 0.12);
	color: #2c7a4f;
	border-radius: 50%;
}
.mva-wiz-done-title {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: var(--mv-admin-text, #111827);
}
.mva-wiz-done-body {
	color: var(--mv-admin-text-secondary, #6b7280);
	margin: 0 auto 32px;
	max-width: 480px;
	line-height: 1.55;
	font-size: 15px;
}
.mva-wiz-done-body strong {
	color: var(--mv-admin-text, #111827);
	font-weight: 600;
}
.mva-wiz-done-cards {
	display: grid;
	gap: 12px;
	text-align: left;
	margin-bottom: 32px;
}
.mva-wiz-done-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: var(--mv-admin-radius, 6px);
	text-decoration: none;
	color: var(--mv-admin-text, #111827);
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mva-wiz-done-card:hover {
	border-color: var(--mv-admin-accent, #e8320a);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.mva-wiz-done-card--primary {
	border-color: var(--mv-admin-accent, #e8320a);
	background: var(--mv-admin-accent-dim, rgba(232, 50, 10, 0.05));
}
.mva-wiz-done-card-num {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--mv-admin-accent, #e8320a);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mva-wiz-done-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mva-wiz-done-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--mv-admin-text, #111827);
}
.mva-wiz-done-card-desc {
	font-size: 13px;
	color: var(--mv-admin-text-secondary, #6b7280);
	line-height: 1.45;
}
.mva-wiz-done-card-arrow {
	color: var(--mv-admin-text-secondary, #6b7280);
	font-size: 20px;
	flex-shrink: 0;
}
.mva-wiz-done-card:hover .mva-wiz-done-card-arrow {
	color: var(--mv-admin-accent, #e8320a);
}

/* Step rail — skipped state ─────────────────────────────────────────── */
.mva-wiz-step--skipped .mva-wiz-step-marker {
	background: rgba(232, 165, 50, 0.15);
	color: #b07b1a;
}
.mva-wiz-step--skipped .mva-wiz-step-label,
.mva-wiz-step--skipped .mva-wiz-step-num {
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-wiz-step--skipped .mva-wiz-step-label::after {
	content: ' (skipped)';
	font-style: italic;
	color: #b07b1a;
	font-weight: 400;
}

.pulsing {
  animation: pulsing 2s infinite;
}

@keyframes pulsing {
  0% {
	background-color: #ecfeff; /* Starting color */
  }
  50% {
	background-color: #b2faff; /* Mid-way color (darker/brighter) */
  }
  100% {
	background-color: #ecfeff; /* Back to starting color */
  }
}

/* ── Superadmin Security (IP firewall) ──────────────────────────────────────── */
.mva-sec-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 18px;
}

.mva-sec-stat {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--mv-admin-border, #e5e7eb);
	border-radius: 10px;
}
.mva-sec-stat-num {
	font-size: 26px;
	font-weight: 700;
	color: var(--mv-admin-text, #111827);
}
.mva-sec-stat-num--warn { color: #b45309; }
.mva-sec-stat-label {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mv-admin-text-secondary, #6b7280);
}
.mva-sec-banform {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.mva-sec-banform .mva-input { flex: 1 1 200px; min-width: 160px; }
.mva-sec-banform select.mva-input { flex: 0 0 140px; min-width: 120px; }
.mva-sec-ua, .mva-sec-path {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--mv-admin-text-secondary, #6b7280);
	max-width: 380px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =============================================================================
   Design system v2 (admin beautify) — shared components
   Every zone consumes these. No per-page / per-block styling.
   ============================================================================= */

/* Stats grid + metric tile */
.mva-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.mva-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--mv-admin-surface);
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius-lg);
	box-shadow: var(--mva-shadow-sm);
	padding: 18px 20px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mva-stat:hover { box-shadow: var(--mva-shadow-md); transform: translateY(-2px); }
.mva-stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mv-admin-text-secondary); margin: 0; }
.mva-stat-value { font-size: 27px; font-weight: 700; line-height: 1.05; color: var(--mv-admin-text); }
.mva-stat-sub   { font-size: 12px; color: var(--mv-admin-text-secondary); }
.mva-stat--accent  { border-top: 3px solid var(--mva-tint-accent); background: var(--mva-tint-accent-dim);}
.mva-stat--success { border-top: 3px solid var(--mva-tint-success); background: var(--mva-tint-success-dim); }
.mva-stat--info    { border-top: 3px solid var(--mva-tint-info); background: var(--mva-tint-info-dim); }
.mva-stat--warning { border-top: 3px solid var(--mva-tint-warning); background: var(--mva-tint-warning-dim); }
/* .mva-stat--accent  .mva-stat-value { color: var(--mva-tint-accent); }
.mva-stat--success .mva-stat-value { color: var(--mva-tint-success); } */

.mva-stat--accent .mva-stat-label {
	color: var(--mva-tint-accent);
}

.mva-stat--success .mva-stat-label {
	color: var(--mva-tint-success);
}

.mva-stat--info .mva-stat-label {
	color: var(--mva-tint-info);
}

.mva-stat--warning .mva-stat-label {
	color: var(--mva-tint-warning);
}

/* Extra tones for the stat tile (rounds out the tint set). */
.mva-stat--neutral { background: var(--mva-tint-neutral-dim); }
.mva-stat--neutral .mva-stat-label { color: var(--mv-admin-text-secondary); }
.mva-stat--danger  { border-top: 3px solid var(--mva-tint-danger); background: var(--mva-tint-danger-dim); }
.mva-stat--danger  .mva-stat-label { color: var(--mva-tint-danger); }

/* Compact, clickable stat tile for inside a panel (status counts etc). */
.mva-stats-grid--compact { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; margin-bottom: 0; }
.mva-stat--sm { padding: 12px 14px; gap: 2px; }
.mva-stat--sm .mva-stat-value { font-size: 22px; }
a.mva-stat { text-decoration: none; }
a.mva-stat:focus-visible { outline: 2px solid var(--mv-admin-accent); outline-offset: 2px; }

/* Flat stat cell — tiles sitting INSIDE a panel (no box, keep the tone accent). */
.mva-stat--flat { box-shadow: none; border-width: 0; border-top-width: 3px; }
.mva-stat--flat:hover { box-shadow: none; transform: none; }

/* Clickable list rows — hover affordance, no underline (enquiries / engagement). */
a.mva-list-row, a.mva-list-record { text-decoration: none; color: inherit; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; transition: background 0.12s ease; }
a.mva-list-row:hover, a.mva-list-record:hover { background: var(--mva-surface-sunken); }
a.mva-list-record { display: block; }
/* Feature panel — dark headline metric */
.mva-panel-feature {
	background: var(--mva-feature-bg);
	color: var(--mva-feature-text);
	border-radius: var(--mva-radius-xl);
	box-shadow: var(--mva-shadow-lg);
	padding: 26px 30px;
	margin-bottom: 24px;
}
.mva-panel-feature .mva-stat-label { color: var(--mva-feature-muted); }
.mva-panel-feature-value { font-size: 38px; font-weight: 800; line-height: 1.05; margin: 8px 0 0; }
.mva-panel-feature-sub { color: var(--mva-feature-muted); font-size: 13px; margin-top: 6px; }
.mva-panel-feature-row { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mva-feature-line); }
.mva-panel-feature-row .mva-stat-label { color: var(--mva-feature-muted); }
.mva-panel-feature-row strong { display: block; font-size: 18px; font-weight: 700; margin-top: 3px; color: var(--mva-feature-text); }

/* Raised card — rollout folds this shadow into the base .mva-card */
.mva-card--raised { box-shadow: var(--mva-shadow-md); }

/* Segmented stat bar + legend */
.mva-stat-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--mva-surface-sunken); }
.mva-stat-bar-seg { height: 100%; }
.mva-stat-bar-seg--success { background: var(--mva-tint-success); }
.mva-stat-bar-seg--warning { background: var(--mva-tint-warning); }
.mva-stat-bar-seg--info    { background: var(--mva-tint-info); }
.mva-stat-bar-seg--neutral { background: var(--mva-tint-neutral); }
.mva-stat-bar-seg--accent  { background: var(--mva-tint-accent); }
/* Thin proportion bar sitting inside a stat tile (share-of-total). */
.mva-stat-bar--tile { height: 5px; margin-top: 10px; }
.mva-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--mv-admin-text-secondary); }
.mva-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mva-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Section heading for stacked content (e.g. style guide, settings) */
.mva-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--mv-admin-text-secondary); margin: 28px 0 12px; }

/* === Design system v2 — dashboard / list-card components ================= */

/* Stat tile danger variant (e.g. negative margin) */
.mva-stat--danger { border-top: 3px solid var(--mva-tint-danger); }
.mva-stat--danger .mva-stat-value { color: var(--mva-tint-danger); }

/* Card header — icon + title + right-aligned link */
.mva-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mva-card-head-icon { color: var(--mv-admin-text); flex-shrink: 0; display: inline-flex; }
.mva-card-head-title { font-size: 15px; font-weight: 600; color: var(--mv-admin-text); }
.mva-card-head-link { margin-left: auto; font-size: 12px; color: var(--mv-admin-accent); text-decoration: none; }
.mva-card-head-link:hover { text-decoration: underline; }
.mva-card-head-action { margin-left: auto; flex-shrink: 0; }

/* Card footer — quiet summary + link line under a panel's body. */
.mva-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mv-admin-border); font-size: 12px; color: var(--mv-admin-text-secondary); }
.mva-card-foot a { color: var(--mv-admin-accent); text-decoration: none; font-weight: 500; }
.mva-card-foot a:hover { text-decoration: underline; }

/* Generic vertical list of rows */
.mva-list { display: flex; flex-direction: column; gap: 10px; }
.mva-list-row { display: flex; align-items: center; gap: 8px; }
.mva-list-row-label { font-size: 13px; color: var(--mv-admin-text); }
.mva-list-row-value { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }
.mva-list-row-meta  { margin-left: auto; font-size: 13px; color: var(--mv-admin-text-secondary); }
.mva-list-empty { font-size: 13px; color: var(--mv-admin-text-secondary); margin: 0; }
.mva-list-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }

/* Stacked record rows (name + meta) */
.mva-list-record-name { font-size: 13px; font-weight: 500; color: var(--mv-admin-text); }
.mva-list-record-meta { font-size: 12px; color: var(--mv-admin-text-secondary); }

/* Status dot */
.mva-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mva-dot--sq { border-radius: 2px; }
.mva-dot--success { background: var(--mva-tint-success); }
.mva-dot--warning { background: var(--mva-tint-warning); }
.mva-dot--info    { background: var(--mva-tint-info); }
.mva-dot--neutral { background: var(--mva-tint-neutral); }
.mva-dot--danger  { background: var(--mva-tint-danger); }

/* Big number inside a list card */
.mva-bignum { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--mv-admin-text); }
.mva-bignum-sub { font-size: 12px; color: var(--mv-admin-text-secondary); }

/* "new" count chip */
.mva-chip-new { font-size: 11px; font-weight: 600; background: var(--mva-tint-success-dim); color: var(--mva-tint-success); padding: 2px 8px; border-radius: 8px; }

/* Soft inline warning notice */
.mva-inline-warning { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--mva-tint-warning-dim); border: 1px solid var(--mva-tint-warning); border-radius: var(--mv-admin-radius); font-size: 12px; color: var(--mva-tint-warning); }

/* Needs-attention card */
.mva-attention { background: var(--mv-admin-success-dim); border-color: var(--mva-feature-text); border-radius: var(--mva-radius-xl); border-top: 3px solid var(--mva-tint-success); }
.mva-attention .mva-card-head-icon { color: var(--mva-tint-success); }
.mva-attention .mva-card-head-count { color: var(--mva-tint-success); }
.mva-attention .mva-card-head-title { color: var(--mva-tint-success); }
.mva-attention-list { display: grid; grid-template-columns: 1fr; gap: 8px; }

.mva-attention-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--mv-admin-radius); background: var(--mv-admin-surface); border: 1px solid var(--mva-tint-success); text-decoration: none; color: var(--mv-admin-text); transition: box-shadow 0.15s; }
.mva-attention-item:hover { box-shadow: var(--mva-shadow-sm); }
.mva-attention-ico { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mva-attention-ico--neutral  { background: var(--mva-tint-neutral-dim);  color: var(--mv-admin-text); }
.mva-attention-ico--success  { background: var(--mva-tint-success-dim);  color: var(--mva-tint-success); }
.mva-attention-ico--danger  { background: var(--mva-tint-danger-dim);  color: var(--mva-tint-danger); }
.mva-attention-ico--info    { background: var(--mva-tint-info-dim);    color: var(--mva-tint-info); }
.mva-attention-ico--warning { background: var(--mva-tint-warning-dim); color: var(--mva-tint-warning); }
.mva-attention-label { font-size: 13px; flex: 1; }
.mva-attention-chev { color: var(--mva-tint-neutral); flex-shrink: 0; }

/* Forecourt-overview stat grid sits inside a card — no extra bottom margin. */
.mva-overview-stats { margin-bottom: 0; }

/* Inline accent text link */
.mva-link { color: var(--mv-admin-accent); text-decoration: none; }
.mva-link:hover { text-decoration: underline; }

/* list-row danger modifier (e.g. rejected publishing row) */
.mva-list-row--danger,
.mva-list-row--danger .mva-list-row-label { color: var(--mva-tint-danger); }

/* card-head right-aligned count (e.g. "3 things today") */
.mva-card-head-count { margin-left: auto; font-size: 12px; color: var(--mv-admin-text); font-weight: bold; }

/* Follow-ups agenda */
.mva-fu-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mv-admin-text-secondary); margin: 14px 0 6px; }
.mva-fu-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--mv-admin-border); }
.mva-fu-time { font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 96px; color: var(--mv-admin-text); }
.mva-fu-detail { flex: 1; min-width: 0; font-size: 13px; }
.mva-fu-name { font-weight: 600; }
.mva-fu-note { color: var(--mv-admin-text-secondary); }

/* Responsive auto-fit card grid (variable card counts, e.g. dashboard rows) */
.mva-cards-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Generic button / action rows (replaces ad-hoc inline flex wrappers) */
.mva-btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* A hint that sits UNDER its field, and a value + unit pair on one line
   (an amount beside its "% / £" select) — first used by the Codeweavers tab. */
.mva-form-hint--after { margin-top: 6px; }
.mva-input-pair { display: flex; gap: 8px; }
.mva-input-pair > .mva-input:first-child { flex: 1; }
.mva-input-pair > select.mva-input { flex: 0 0 auto; width: auto; }
.mva-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Numeric table-cell sign colours + muted text utility */
.mva-cell-pos { color: var(--mva-tint-success); font-weight: 600; }
.mva-cell-neg { color: var(--mva-tint-danger); font-weight: 600; }
.mva-muted { color: var(--mv-admin-text-secondary); }

/* === Dashboard activity cockpit — 2 main columns + right rail ============= */
.mva-dash-cockpit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mva-dash-cockpit-col  { min-width: 0; }
.mva-dash-cockpit-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Rail cards size to their own content. The base .mva-card sets overflow-x:auto
   (for wide tables); per the CSS overflow spec that forces overflow-y to compute
   as auto, which surfaces a stray vertical scrollbar when a flex row stretches a
   rail card. These cards have no wide content, so reset to visible + don't stretch. */
.mva-dash-cockpit-rail > .mva-card { overflow: visible; }

/* Vehicle thumbnail tile — engagement leaderboard + enquiry rows (Bunny xxxs). */
.mva-dash-thumb { width: 40px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--mva-surface-sunken); }
.mva-dash-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mva-dash-thumb--empty { color: var(--mv-admin-text-secondary); border: 1px solid var(--mv-admin-border); }

/* Engagement leaderboard rows — thumb + stacked text (name / price / reg) + count */
a.mva-dash-eng-row { display: flex; align-items: center; gap: 10px; }
.mva-dash-eng-text { min-width: 0; flex: 1; }
.mva-dash-eng-text .mva-list-record-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mva-dash-eng-reg { font-size: 12px; color: var(--mv-admin-text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.mva-dash-eng-count { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }

/* Enquiries feed rows — thumb + stacked text (name / meta / vehicle) */
a.mva-dash-enq-row { display: flex; align-items: flex-start; gap: 10px; }
.mva-dash-enq-text { min-width: 0; flex: 1; }
.mva-dash-enq-row-chip { font-size: 10px; padding: 1px 6px; vertical-align: middle; margin-left: 4px; }
.mva-dash-enq-vehicle { font-size: 12px; color: var(--mv-admin-text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Your website" identity card — template preview + colour-scheme swatches */
.mva-yw-preview { border-radius: var(--mv-admin-radius); overflow: hidden; border: 1px solid var(--mv-admin-border); aspect-ratio: 8 / 5; background: var(--mva-surface-sunken); margin-bottom: 12px; }
.mva-yw-meta  { display: flex; flex-direction: column; gap: 8px; }
.mva-yw-row   { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.mva-yw-label { color: var(--mv-admin-text-secondary); }
.mva-yw-value { color: var(--mv-admin-text); font-weight: 500; text-align: right; }
.mva-yw-scheme { display: inline-flex; align-items: center; gap: 8px; }
.mva-yw-swatches { display: inline-flex; }
.mva-yw-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--mv-admin-border); margin-left: -4px; }
.mva-yw-swatch:first-child { margin-left: 0; }

/* DMS snapshot rail card — label + count + chevron rows */
.mva-dash-dms-row { gap: 8px; }
.mva-dash-dms-chev { color: var(--mva-tint-neutral); flex-shrink: 0; }

/* ── RBAC: Users role-picker + permission preview ───────────────────────── */
.mva-user-modal { max-width: 880px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.mva-user-modal-body { padding: 20px 24px 24px; overflow-y: auto; }
.mva-user-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mva-rolecard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }

.mva-rolecard {
	text-align: left; cursor: pointer; background: var(--mv-admin-surface);
	border: 1.5px solid var(--mv-admin-border); border-radius: var(--mv-admin-radius);
	padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
	transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.mva-rolecard:hover { border-color: var(--mv-admin-text-secondary); }
.mva-rolecard--active {
	border-color: var(--mv-admin-accent); background: var(--mv-admin-accent-dim);
	box-shadow: inset 0 0 0 1px var(--mv-admin-accent);
}
.mva-rolecard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mva-rolecard-name { font-weight: 600; font-size: 14px; color: var(--mv-admin-text); }
.mva-rolecard-count {
	font-size: 11px; color: var(--mv-admin-text-secondary); white-space: nowrap;
	background: var(--mv-admin-surface-alt); border: 1px solid var(--mv-admin-border);
	border-radius: 999px; padding: 1px 8px;
}
.mva-rolecard-desc { font-size: 12px; color: var(--mv-admin-text-secondary); line-height: 1.35; }

.mva-perm-headerline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.mva-perm-summary { font-size: 12px; font-weight: 600; color: var(--mv-admin-accent); }
.mva-perm-hint { font-size: 12px; color: var(--mv-admin-text-secondary); margin: 2px 0 12px; }

.mva-perm-preview {
	columns: 2; column-gap: 28px;
	border: 1px solid var(--mv-admin-border); border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface-alt); padding: 14px 16px;
}

.mva-perm-group { break-inside: avoid; margin-bottom: 14px; }
.mva-perm-group-title {
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--mv-admin-text-secondary); margin-bottom: 6px;
}
.mva-perm {
	display: flex; align-items: center; gap: 8px; padding: 3px 0;
	font-size: 13px; color: var(--mv-admin-text); cursor: pointer;
}
.mva-perm-cb { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--mv-admin-accent); cursor: pointer; }
.mva-perm-cb:disabled { cursor: default; }
.mva-perm--locked { cursor: default; color: var(--mv-admin-text-secondary); }
.mva-perm-label { flex: 1; }
.mva-perm-tag {
	font-size: 10px; font-weight: 600; color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface); border: 1px solid var(--mv-admin-border);
	border-radius: 999px; padding: 0 6px; white-space: nowrap;
}
.mva-user-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── Email Recipients — per-user enquiry-area routing grid ───────────────── */
.mva-recip-area-col { text-align: center; width: 88px; }
.mva-recip-table th.mva-recip-area-col { white-space: nowrap; }
.mva-recip-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--mv-admin-accent); }
.mva-recip-cb:disabled { cursor: default; opacity: 0.35; }

/* ── CRM Calendar (/mv-admin/calendar/) ─────────────────────────────────────── */
.mva-cal-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mva-cal-kind { margin-left: auto; }

/* Agenda view */
/* .mva-cal-agenda keeps the .mva-card default padding (no override). */
.mva-cal-group { margin: 0 0 18px; }
.mva-cal-group:last-child { margin-bottom: 0; }
.mva-cal-group-label { text-transform: uppercase; font-size: 11px; letter-spacing: .05em; font-weight: 700; color: var(--mv-admin-text-secondary); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--mv-admin-border); }
.mva-cal-group-label--overdue { color: var(--mva-tint-danger); }
.mva-cal-group-count { font-weight: 600; opacity: .7; }
.mva-cal-agenda-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--mva-surface-sunken); }
.mva-cal-agenda-row:last-child { border-bottom: 0; }
.mva-cal-agenda-date { flex: 0 0 92px; font-size: 12px; font-weight: 600; color: var(--mv-admin-text-secondary); }
.mva-cal-entry { min-width: 0; }
.mva-cal-entry-time { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 6px; }
.mva-cal-entry-name { font-weight: 600; text-decoration: none; color: var(--mv-admin-accent); }
.mva-cal-entry-name:hover { text-decoration: underline; }
.mva-cal-entry-src { font-size: 11px; color: var(--mv-admin-text-secondary); }
.mva-cal-entry-body { color: var(--mv-admin-text-secondary); }

/* Month grid view */
.mva-cal-monthbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mva-cal-monthbar-title { font-size: 16px; font-weight: 700; }
.mva-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--mv-admin-border); border: 1px solid var(--mv-admin-border); border-radius: var(--mv-admin-radius); overflow: hidden; }
.mva-cal-dow { background: var(--mva-surface-sunken); text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv-admin-text-secondary); padding: 6px 0; }
.mva-cal-day { background: var(--mv-admin-surface); min-height: 96px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }
.mva-cal-day--out { background: var(--mv-admin-surface); }
.mva-cal-day--out .mva-cal-daynum { opacity: .45; }
.mva-cal-day--today { box-shadow: inset 0 0 0 2px var(--mv-admin-accent); }
.mva-cal-daynum { font-size: 12px; font-weight: 600; color: var(--mv-admin-text-secondary); }
.mva-cal-pip { display: block; font-size: 11px; line-height: 1.35; padding: 1px 5px; border-radius: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--mva-tint-neutral-dim); color: var(--mv-admin-text); border-left: 3px solid var(--mva-tint-neutral); }
.mva-cal-pip--info   { background: var(--mva-tint-info-dim);   border-left-color: var(--mva-tint-info); }
.mva-cal-pip--accent { background: var(--mva-tint-accent-dim); border-left-color: var(--mva-tint-accent); }
.mva-cal-pip:hover { filter: brightness(0.97); }
.mva-cal-more { font-size: 11px; color: var(--mv-admin-text-secondary); }

/* ── Sale form: itemised Summary + unsaved-row state ───────────────────────────
 * Two blocks, because the panel answers two different questions: what the buyer
 * owes (mirrors the invoice line for line) and what the dealer makes (never
 * printed). Every row is a term in a sum the reader can follow top to bottom —
 * the old panel showed TOTAL output VAT while True gross profit deducted only
 * the vehicle's share, and hid prep entirely, so it could not be reconciled.
 */
.mva-sale-sum { width: 100%; border-collapse: collapse; font-size: 14px; }
.mva-sale-sum td { padding: 4px 0; vertical-align: baseline; }
.mva-sale-sum td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mva-sale-sum-head td {
	padding: 14px 0 6px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mv-admin-text-secondary);
}
.mva-sale-sum-head:first-child td { padding-top: 0; }
.mva-sale-sum-line td { color: var(--mv-admin-text-secondary); }
.mva-sale-sum-line td:last-child { color: var(--mv-admin-text); }
.mva-sale-sum-note { display: block; font-size: 11px; color: var(--mv-admin-text-secondary); }
.mva-sale-sum-sub td { border-top: 1px solid var(--mv-admin-border); padding-top: 6px; }
.mva-sale-sum-total td { font-weight: 700; border-top: 1px solid var(--mv-admin-border); padding-top: 6px; }
.mva-sale-sum-total--final td { font-size: 16px; }
.mva-sale-sum-ded td { color: var(--mv-admin-text-secondary); }
.mva-sale-sum-empty td { color: var(--mv-admin-text-secondary); font-style: italic; }
.mva-sale-sum-pos td:last-child { color: var(--mv-admin-success); }
.mva-sale-sum-neg td:last-child { color: var(--mv-admin-danger); }

/* Unsaved-row marker. Says "this exists but is not stored yet" — which is the
 * truth. Deliberately NOT a per-row confirm control: only Save writes, and on a
 * NEW sale there is no mv_sales row to attach a row to, so a per-row tick would
 * claim a persistence that cannot happen. */
.mva-row-unsaved { box-shadow: inset 3px 0 0 var(--mv-admin-accent); }
.mva-unsaved-chip {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--mva-tint-accent-dim);
	color: var(--mv-admin-text);
	white-space: nowrap;
}

/* ── Getting Started quick reference (/mv-admin/getting-started/) ──────────────
 * View: mv-admin/views/getting-started/index.php · content and link gates:
 * MotoVend\Help\GettingStarted. Built from pieces that already exist — the dark
 * .mva-page-header, the sticky .mva-anchor-nav, .mva-cards-grid--2, the
 * .mva-attention-ico--* icon chips, the dashboard's .mva-onboarding-* step rows
 * and .mva-help-search — so only what is new to this page lives here.
 * Tokens only: no hex. Narrow-screen rules are in the 640px block below.
 */
.mva-gs-group { margin-top: 32px; }

/* Jump targets clear the sticky jump bar, which wraps to two rows on a laptop
   (82px, measured) — the shared 70px .mva-card[id] margin left a heading 3px
   below it. Doubled class so it outranks that rule. */
.mva-card.mva-gs-setup,
.mva-card.mva-gs-done,
.mva-card.mva-gs-section,
.mva-card.mva-gs-help { scroll-margin-top: 104px; }

/* Sections in a row share a height so each pair reads as a set; the base grid
   keeps natural heights, which is right for collapsible settings cards and
   wrong for a reference sheet. */
.mva-gs-grid { align-items: stretch; }
.mva-gs-section { display: flex; flex-direction: column; }

.mva-gs-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.mva-gs-head .mva-attention-ico { width: 40px; height: 40px; }
.mva-gs-head .mva-attention-ico i { font-size: 18px; }
.mva-gs-head-text { flex: 1; min-width: 0; }
.mva-gs-eyebrow {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mv-admin-text-secondary);
}
.mva-gs-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mv-admin-text); }
.mva-gs-intro { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mv-admin-text-secondary); }
.mva-gs-count {
	flex-shrink: 0;
	padding-top: 4px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--mv-admin-text-secondary);
}

/* A real <progress> rather than a div with an inline width — the value is data,
   the look is here, and a screen reader gets the count for free. */
.mva-gs-progress {
	display: block;
	width: 100%;
	height: 6px;
	margin: 0 0 14px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	background: var(--mva-surface-sunken);
	-webkit-appearance: none;
	appearance: none;
}
.mva-gs-progress::-webkit-progress-bar { background: var(--mva-surface-sunken); border-radius: 999px; }
.mva-gs-progress::-webkit-progress-value { background: var(--mva-tint-success); border-radius: 999px; }
.mva-gs-progress::-moz-progress-bar { background: var(--mva-tint-success); border-radius: 999px; }

.mva-gs-actions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mv-admin-border); }
.mva-gs-action {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mv-admin-border);
}
.mva-gs-action:last-child { border-bottom: 0; padding-bottom: 0; }
.mva-gs-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mva-gs-action-label { font-size: 14px; font-weight: 600; color: var(--mv-admin-text); }
.mva-gs-action-desc { font-size: 12.5px; line-height: 1.45; color: var(--mv-admin-text-secondary); }

/* Open / Go and the Guide link, kept together on the right of a row. */
.mva-gs-links { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mva-gs-guide {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--mv-admin-text-secondary);
}
.mva-gs-guide:hover { color: var(--mv-admin-accent); text-decoration: underline; }
.mva-gs-guide i { font-size: 13px; }

/* Shown in place of a button the role cannot use — the step still reads, and
   its guide is still there. */
.mva-gs-owner { font-size: 12px; font-style: italic; white-space: nowrap; color: var(--mv-admin-text-secondary); }
.mva-gs-owner-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 8px 10px;
	font-size: 12px;
	color: var(--mv-admin-text-secondary);
	background: var(--mv-admin-surface-alt);
	border-radius: var(--mv-admin-radius);
}

.mva-gs-setup { border-top: 3px solid var(--mva-tint-warning); }
.mva-gs-setup .mva-onboarding-icon i { font-size: 14px; }
.mva-gs-done { border-left: 3px solid var(--mva-tint-success); background: var(--mva-tint-success-dim); }
.mva-gs-done .mva-gs-head { margin-bottom: 0; }

.mva-gs-help { margin-top: 32px; }
.mva-gs-search { margin-bottom: 14px; }
.mva-gs-search i { flex-shrink: 0; color: var(--mv-admin-text-secondary); }
.mva-gs-search .mva-btn { flex-shrink: 0; }

/* ============================================================
   RESPONSIVE / MEDIA QUERIES
   Consolidated + ordered: min-width ascending, then max-width
   descending. Cascade-verified (width-sampling) — do not scatter
   new @media blocks back through the file; add them here in order.
   ============================================================ */

@media (min-width: 768px) {
		/* ── Side-by-side grid for column-shaped repeating blocks ────────────────────
		 * image_cards gets its sections laid out as the public site
		 * actually displays them — 1 / 2 / 3 columns. Mirrors the layout dropdown
		 * via [data-layout] which JS keeps in sync. Above 768px the grid kicks in;
		 * below stays stacked (existing accordion behaviour).
		 *
		 * Sections beyond the current count keep --hidden (max-height 0) and just
		 * occupy a collapsed cell — no visual artefact, the row collapses naturally.
		 */
		.mva-repeating-sections-grid {
			display: grid;
			gap: 16px;
		}
		.mva-repeating-sections-grid[data-layout="full"] {
			grid-template-columns: 1fr;
		}
		.mva-repeating-sections-grid[data-layout="2col"] {
			grid-template-columns: 1fr 1fr;
		}
		.mva-repeating-sections-grid[data-layout="3col"] {
			grid-template-columns: 1fr 1fr 1fr;
		}
}

@media (min-width: 900px) {
		.mva-cards-grid--2:has(> .mva-card.mva-section-hidden) {
			grid-template-columns: 1fr;
		}
		.mva-cards-grid--3:has(> .mva-card.mva-section-hidden:nth-child(n+2)) {
			grid-template-columns: 1fr;
		}

		.mva-cards-grid--2 { grid-template-columns: 1fr 1fr; }
		.mva-cards-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
		.mva-cards-grid > .mva-cards-grid-item--full {
			grid-column: 1 / -1;
		}
}

@media (min-width: 1200px) {
	 .mva-attention-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1600px) {
		.mva-table.mva-stock-table td {
		width: auto;
		min-width: auto;
		max-width: fit-content;
	}

	.mva-stock-table td.mva-stock-thumb-cell {
		width: 150px;
		max-width: 150px;
	}
	.mva-stock-table .mva-stock-thumb {
		width: 130px;
	}

	 .mva-attention-list { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1199.98px) {
		.mva-settings-grid--3 {
			grid-template-columns: 1fr 1fr;
		}

		/* Page builder top bar: "View website" keeps its icon and loses its words.
		   The bar is at its tightest between here and 1024px — with the words, a
		   page carrying unpublished changes ran its buttons into the Appearance
		   menu. The link keeps its title and aria-label. */
		.mva-view-website-label { display: none; }
}

@media (max-width: 1100px) {
		.mva-dash-cockpit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		.mva-dash-cockpit-rail { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
		.mva-dash-cockpit-rail > * { flex: 1 1 260px; }

		/* Sign-up: the left column is at its narrowest here — give the text the width. */
		.mva-signup-left { padding: 28px 32px 24px; }
}

@media (max-width: 991.98px) {
		/* ── Onboarding design step: stack, and lift the preview ─────────────
		   Controls stay FIRST in the DOM (tab order follows the numbered
		   decisions); order:-1 moves the preview above them visually only.

		   🚨 It stays STICKY here rather than becoming a static block at the
		   top. Stacked-and-static is the buried-preview bug again in a
		   different shape: scroll to the colours and the preview is gone, so
		   changing one shows the dealer nothing. Shorter, pinned to the top,
		   controls running underneath it is the phone-shaped version of the
		   same idea. */
		.mva-wiz-design-layout {
			grid-template-columns: 1fr;
			gap: 16px;
		}
		.mva-wiz-design-preview {
			order: -1;
			top: 0;
			z-index: 5;
			/* Opaque: the controls scroll underneath this, not through it. */
			background: var(--mv-admin-bg, #f9fafb);
			padding-bottom: 8px;
		}
		.mva-wiz-preview-pane {
			height: clamp(200px, 34vh, 320px);
		}
		/* The note repeats what the pinned frame already shows, and on a phone
		   it costs a third of the sticky block's height. */
		.mva-wiz-preview-note {
			display: none;
		}

		/* Show hamburger */
		.mva-topbar-hamburger {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Sidebar off-screen by default */
		.mva-sidebar {
			transform: translateX(-100%);
			transition: transform 0.25s ease;
			z-index: 200;
		}

		/* Sidebar open state */
		.mva-sidebar.is-open {
			transform: translateX(0);
		}

		/* Backdrop visible when sidebar open */
		.mva-sidebar-backdrop.is-open {
			display: block;
		}

		/* Main fills full width */
		.mva-main {
			margin-left: 0;
			width: 100%;
			max-width: 100%;
		}

		/* …and so does the fixed design save bar, which is offset by the sidebar
		   above this breakpoint. The sidebar is off-canvas here, so keeping the
		   offset would leave a 220px dead strip down the left of the bar. */
		.mva-design-save-bar {
			left: 24px;
		}

		/* Edit main fills full available width */
		.mva-edit-main {
			width: 100%;
		}

		/* Topbar tighter on mobile */
		.mva-topbar {
			padding: 0 12px;
		}

		.mva-topbar-user {
			display: none;
		}

		/* Content padding tighter on mobile */
		.mva-content {
			padding: 16px;
		}

		/* Edit layout — single column on mobile */
		.mva-edit-layout {
			flex-direction: column;
			width: 100%;
		}

		.mva-edit-sidebar {
			width: 100%;
			position: static;
			max-height: none;
			overflow-y: visible;
		}

		.mva-edit-sidebar .mva-add-block-grid {
			flex-direction: row;
		}

		.mva-edit-sidebar .mva-add-block-btn {
			width: auto;
		}

		/* ── Responsive ────────────────────────────────────────────────────────────────── */
		.mva-enq-detail-grid {
			grid-template-columns: 1fr;
		}

		.mva-enq-detail-aside {
			order: -1;
		}

		.mva-enq-table .mva-enq-col-contact,
		.mva-enq-table .mva-enq-col-vehicle,
		.mva-enq-table .mva-enq-col-date {
			display: none;
		}

		.mva-enq-search-input {
			width: 180px;
		}
}

/* =============================================================================
   BLOCK EDITOR — Background video field group
   =============================================================================
   URL + preview on one row, the four playback toggles beneath, all inside one
   panel so the group reads as a single decision rather than six loose fields.

   🚨 NO MEDIA QUERY ANYWHERE IN HERE, deliberately. This lives in the block
   edit drawer, which is ~440px wide on a 1920px monitor — so a `max-width`
   query keyed on the viewport never fires exactly when the layout most needs
   it. The row wraps on flex-basis instead, which responds to the space actually
   available. (First version of this used a fixed 2-column grid and got crushed
   to a ~110px input beside a ribbon of wrapped hint text.)

   The preview is YouTube's own thumbnail rather than a live embed: the admin
   CSP allows https: images but deliberately does NOT list youtube.com in
   frame-src, and widening it for a convenience preview would be a poor trade.
   ============================================================================= */

.mva-bg-video {
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	padding: 12px;
	background: var(--mv-admin-surface-alt);
}

/* Side by side when the container can take it, stacked when it cannot. The
   basis on .mva-bg-video-main is what decides the switch: below roughly
   260 + 170 + gap the two no longer fit and the preview drops beneath. */
.mva-bg-video-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-start;
}

.mva-bg-video-main {
	flex: 1 1 260px;
	min-width: 0;   /* lets the input shrink rather than forcing an overflow */
}

.mva-bg-video-main .mva-field-hint {
	margin-bottom: 0;
}

.mva-bg-video-preview {
	flex: 0 1 170px;
	min-width: 0;
}

.mva-bg-video-thumb {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mva-bg-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* hqdefault is 4:3 with letterbox bars baked in */
	display: block;
}

.mva-bg-video-thumb[data-empty] span {
	padding: 0 8px;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
	color: var(--mv-admin-text-secondary);
}

.mva-bg-video-watch {
	display: inline-block;
	margin-top: 5px;
	font-size: 11px;
}

/* Two columns in the drawer, four when there is room. minmax(150px,…) rather
   than a smaller floor on purpose: at ~130px auto-fit would fit THREE columns
   into the drawer and leave a lone toggle stranded on a second row. */
.mva-bg-video-opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px 14px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--mv-admin-border);
}

.mva-bg-video-opts .mva-block-field--checkbox {
	margin: 0;
}

/* Muted while Autoplay is on: locked rather than merely explained. */
.mva-bg-video-opt--locked {
	opacity: 0.6;
}

.mva-bg-video-opt--locked .mva-checkbox-label {
	cursor: not-allowed;
}

.mva-bg-video-note {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--mv-admin-text-secondary);
}

.mva-bg-video-note[hidden] {
	display: none;   /* [hidden] is overridden by the display above without this */
}

/* The one note that is a problem rather than an explanation — a background video
   with no image behind it. Sits on the warning token rather than the secondary
   text colour so it reads as something to act on. */
.mva-bg-video-note--warn {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-warning-dim);
	color: var(--mv-admin-warning-text);
}

@media (max-width: 900px) {
		/* Chrome layout grids: two tracks whatever the surface asked for. Four
		   columns each holding a name, an alignment select and a stack of chips is
		   unreadable at ~150px, and the arrangement being configured is a DESKTOP
		   composition either way — the same reasoning as the tenant footer's own
		   two-track tablet rule.
		   🚨 Overriding grid-template-columns, NOT --zone-cells: the footer writes
		   that variable INLINE from JS as the dealer changes the count, and an
		   inline custom property beats a stylesheet one whatever the media query
		   says. Setting the variable here would look right and do nothing. */
		.mva-zone-cells {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.mva-media-layout {
			grid-template-columns: 1fr;
		}

		.mva-media-sidebar {
			position: static;
			max-height: none;
		}

		/* =============================================================================
		   RESPONSIVE — auth pages
		   ============================================================================= */
		.mva-signup-wrap {
			flex-direction: column;
		}

		/* One column: the pitch becomes a short band above the form — logo,
		   headline and the trial line. The feature list, the price panel and
		   the contact line are left out so the form is reached at once. */
		.mva-signup-left {
			flex: none;
			min-width: 0;
			max-width: none;
			width: 100%;
			position: static;
			min-height: 0;
			padding: 28px 24px;
		}

		.mva-signup-logo {
			margin-bottom: 20px;
		}

		.mva-signup-pitch {
			margin: 0;
			max-width: none;
		}

		.mva-signup-pitch-sub {
			margin-bottom: 0;
		}

		.mva-signup-benefits,
		.mva-signup-price,
		.mva-signup-contact {
			display: none;
		}

		.mva-signup-right {
			padding: 28px 16px 40px;
		}

		.mva-stock-form-layout { grid-template-columns: 1fr; }
		.mva-stock-form-side {
			position: sticky;
			top: -180px;
			z-index: 97;
			order: -1;
		}
}

@media (max-width: 767.98px) {
		/* Track .mva-content's tighter padding at this width so the bar stays
		   flush with the cards above it rather than inset from them. */
		.mva-design-save-bar {
			left: 16px;
			right: 16px;
			flex-wrap: wrap;
		}

		.mva-block-modal-panel {
			width: 100vw;
			height: 100vh;
			max-width: none;
			border-radius: 0;
		}

		.mva-stock-filter-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			padding: 10px 14px;
			background: var(--mv-admin-surface);
			border: 1px solid var(--mv-admin-border);
			border-radius: var(--mv-admin-radius);
			font-size: 14px;
			font-weight: 600;
			color: var(--mv-admin-text);
			cursor: pointer;
		}
		.mva-stock-filter-bar:not(.mva-filters-expanded) .mva-stock-filter-row { display: none; }

		/* Getting Started jump bar: ONE row that swipes sideways. Wrapped, its ten
		   links stood 181px tall (measured at 375px) and, being sticky, sat over a
		   quarter of the phone screen the whole way down the page. */
		.mva-gs-nav {
			flex-wrap: nowrap;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
		}
		.mva-gs-nav::-webkit-scrollbar { display: none; }
		.mva-gs-nav .mva-anchor-nav-link {
			flex-shrink: 0;
			white-space: nowrap;
		}

		/* ── Mobile breakpoint ────────────────────────────────────────────────────── */
		.mva-wiz-header-inner {
			padding: 12px 16px;
		}
		.mva-wiz-brand-sub {
			display: none;
		}
		.mva-wiz-welcome {
			display: none;
		}
		.mva-wiz-main {
			grid-template-columns: 1fr;
			padding: 24px 16px;
			gap: 24px;
		}
		.mva-wiz-rail {
			position: static;
			background: var(--mv-admin-surface, #fff);
			border: 1px solid var(--mv-admin-border, #e5e7eb);
			border-radius: var(--mv-admin-radius-lg, 10px);
			padding: 16px;
		}
		.mva-wiz-content {
			padding: 24px 20px;
		}
		.mva-wiz-content-title {
			font-size: 22px;
		}

		.mva-sa-detail-grid {
			grid-template-columns: 1fr;
		}
		.mva-sa-detail-card--full {
			grid-column: 1;
		}

		.mva-settings-grid--3 {
			grid-template-columns: 1fr;
		}

		.mva-sec-stats { grid-template-columns: repeat(2, 1fr); }

		.mva-dash-cockpit { grid-template-columns: 1fr; }
		/* Reset the row-mode overrides from the 1100 breakpoint — stacked rail
		   cards must be full width (stretch) at their natural height. */
		.mva-dash-cockpit-rail { flex-direction: column; align-items: stretch; }
		.mva-dash-cockpit-rail > * { flex: 0 1 auto; }

		.mva-cal-day { min-height: 64px; }
		.mva-cal-agenda-date { flex-basis: 70px; }
		.mva-cal-kind { margin-left: 0; }

		.mva-form-grid--2col { grid-template-columns: 1fr; }

		.mva-ai-gen-row { flex-wrap: wrap; }
		.mva-ai-gen-picker { width: 100%; }
		.mva-ai-cap-counter { margin-left: 0; }

	 .mva-rolecard-grid { grid-template-columns: repeat(2, 1fr); }

		.mva-form-row--thirds { grid-template-columns: 1fr 1fr; }

		.mva-cron-summary {
			grid-template-columns: repeat(2, 1fr);
		}
}

@media (max-width: 640px) {
	/* Icon column + side-by-side CTA both get tight once the pane narrows. */
	.mva-promo { flex-direction: column; gap: 10px; }

		.mva-item-form-grid {
			grid-template-columns: 1fr;
		}

		.mva-menu-item-actions {
			flex-wrap: wrap;
		}

		/* Mobile: single-column for form grids */
		.mva-wiz-grid,
		.mva-wiz-hours-grid {
			grid-template-columns: 1fr;
		}

	 .mva-user-modal-fields { grid-template-columns: 1fr; }

	 .mva-perm-preview { columns: 1; }

		.mva-auth-card {
			padding: 28px 20px;
		}

		.mva-signup-card {
			padding: 26px 20px 24px;
		}

		.mva-signup-name-row {
			grid-template-columns: 1fr;
		}

		.mva-vehicle-radios {
			grid-template-columns: repeat(2, 1fr);
		}

		.mva-manage-features-row {
			grid-template-columns: 1fr 1fr;
		}

		/* ── Mobile/narrow — stack the label above the CTA ──────────────────────────── */
		.mva-onboarding-header {
			flex-direction: column;
			gap: 8px;
		}
		.mva-onboarding-close {
			align-self: flex-end;
			margin-top: -32px;
		}
		.mva-onboarding-item {
			flex-wrap: wrap;
		}
		.mva-onboarding-cta,
		.mva-onboarding-link {
			margin-left: 34px;
		}

		/* Getting Started: a row's buttons drop beneath its words, and a setup
		   step's links line up under its label, clear of the step icon. */
		.mva-gs-action {
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
		}
		.mva-gs-setup .mva-gs-links {
			margin-left: 34px;
		}
		.mva-gs-head {
			flex-wrap: wrap;
		}
		.mva-gs-count {
			padding-top: 0;
		}

		/* Mobile: dropdown panel full-width with safe margins, no fixed 380px. */
		.mva-topbar-notifications-panel {
			position: fixed;
			top: 56px;
			right: 8px;
			left: 8px;
			width: auto;
			max-width: none;
			max-height: calc(100vh - 72px);
		}
}

@media (max-width: 479.98px) {
		/* <480px — stack topbar columns to full width so the icon row + account
		   cluster have breathing room on the smallest phones. Above 480px the
		   topbar stays on one line. */
		.mva-topbar {
			flex-direction: column;
			align-items: stretch;
			padding: 8px 12px;
			gap: 8px;
		}
		.mva-topbar-left,
		.mva-topbar-right {
			width: 100%;
		}
		.mva-topbar-right {
			justify-content: flex-end;
			margin-bottom: 1rem;
		}

	 .mva-rolecard-grid { grid-template-columns: 1fr; }
}

/* ── Custom colour scheme modal ─────────────────────────────────────────────
   Shared by the Appearance page + the page-builder editor. Split layout:
   core pickers on the left, live tenant preview iframe on the right. */
.mva-cscheme-modal[hidden] { display: none; }
.mva-cscheme-modal {
	position: fixed; inset: 0; z-index: 4000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.mva-cscheme-backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.mva-cscheme-dialog {
	position: relative;
	display: flex; flex-direction: column;
	/* Wide enough for the preview pane to clear Bootstrap's lg breakpoint. The
	   theme's secondary nav band is d-none d-lg-block, so below 992px of PREVIEW
	   width it isn't rendered at all — and the Nav band colour picker edits
	   something the dealer cannot see. Preview width is this minus the 380px
	   controls column, so 1300 left it ~920 and the band stayed hidden. */
	width: min(1400px, 96vw);
	height: min(1100px, 92vh);
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.mva-cscheme-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.mva-cscheme-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
/* Width toggle + close kept together on the right (see the head markup). */
.mva-cscheme-head-actions { display: flex; align-items: center; gap: 12px; }
.mva-cscheme-x {
	border: 0; background: none; cursor: pointer;
	font-size: 24px; line-height: 1; color: #6b7280; padding: 0 4px;
}
.mva-cscheme-x:hover { color: #111827; }
.mva-cscheme-body {
	display: flex; flex: 1 1 auto; min-height: 0;
}
.mva-cscheme-controls {
	flex: 0 0 380px; display: flex; flex-direction: column; min-height: 0;
	border-right: 1px solid #e5e7eb;
}
.mva-cscheme-intro {
	font-size: 12px; color: #6b7280; line-height: 1.5; margin: 0;
	padding: 14px 18px 10px;
}
/* Superadmin editing a PLATFORM PRESET rather than this tenant's own palette.
   Deliberately loud: the pickers, the preview and the muscle memory are all
   identical to the dealer flow, so the one thing that differs — what the save
   buttons below will actually change — has to be unmissable. */
.mva-cscheme-intro--preset {
	color: #1e3a8a; background: #eff6ff;
	border-bottom: 1px solid #bfdbfe;
	padding: 12px 18px;
}
/* Fixed header (intro + generate + nav) above a scrolling list — no sticky gap. */
.mva-cscheme-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 18px 16px; }
/* One-click scheme generator from a brand colour. */
.mva-cscheme-gen { padding: 4px 18px 12px; }
/* Reset palette — a recovery action, so deliberately quieter than Generate and
   set apart from the generate row rather than competing with it. */
.mva-cscheme-gen-reset { display: flex; justify-content: flex-end; margin-top: 8px; }
.mva-cscheme-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	font-size: 12px;
	font-family: inherit;
	background: none;
	border: 0;
	border-radius: var(--mv-admin-radius);
	color: var(--mv-admin-text-secondary);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}
.mva-cscheme-reset-btn:hover { color: var(--mv-admin-text); background: var(--mv-admin-bg); }
.mva-cscheme-gen-label {
	display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: #6b7280; margin-bottom: 6px;
}
.mva-cscheme-gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mva-cscheme-gen-hexin {
	flex: 0 0 82px; width: 82px; padding: 7px 8px;
	border: 1px solid #d1d5db; border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
	text-transform: lowercase;
}
.mva-cscheme-gen-row input[type="color"] {
	flex: 0 0 auto; width: 38px; height: 34px; padding: 0;
	border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; background: none;
}
.mva-cscheme-gen-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.mva-cscheme-gen-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.mva-cscheme-gen-row select {
	flex: 1 1 auto; min-width: 0; padding: 7px 8px;
	border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; background: #fff; cursor: pointer;
}
.mva-cscheme-gen-row .mva-btn { flex: 0 0 auto; white-space: nowrap; }
.mva-cscheme-group {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: #6b7280; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid #e5e7eb;
	scroll-margin-top: 8px;
}
.mva-cscheme-scroll > .mva-cscheme-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* Group anchor buttons — quick-jump chips in the fixed header. */
.mva-cscheme-nav {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 0 18px 10px; background: #fff; border-bottom: 1px solid #eef2f7;
}
.mva-cscheme-nav-btn {
	font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
	color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0;
	padding: 4px 10px; border-radius: 999px;
}
.mva-cscheme-nav-btn:hover { background: #e2e8f0; color: #0f172a; }
.mva-cscheme-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0;
	border-bottom: 1px solid #f1f3f5;
}
/* Transparency bar — wraps to its own line beneath the colour + hex. A
   checkerboard base with a transparent→colour gradient overlay and a slider
   thumb, so opacity reads visually (like a standard colour-picker alpha bar).
   --cscheme-col is the row's RGB as space-separated channels, set from JS. */
.mva-cscheme-alpha-track {
	flex: 0 0 100%; position: relative; height: 22px; margin-top: 6px;
	border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
		linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
		linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.mva-cscheme-alpha-track::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to right,
		rgb(var(--cscheme-col, 30 144 255) / 0),
		rgb(var(--cscheme-col, 30 144 255) / 1));
}
.mva-cscheme-alpha {
	position: relative; -webkit-appearance: none; appearance: none;
	display: block; width: 100%; height: 100%; margin: 0;
	background: transparent; cursor: pointer;
}
.mva-cscheme-alpha::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.mva-cscheme-alpha::-moz-range-track { background: transparent; height: 100%; border: 0; }
.mva-cscheme-alpha::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 12px; height: 20px; border-radius: 3px;
	background: #fff; border: 1px solid #64748b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mva-cscheme-alpha::-moz-range-thumb {
	width: 12px; height: 20px; border-radius: 3px;
	background: #fff; border: 1px solid #64748b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mva-cscheme-color {
	flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
	border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer;
	background: none;
}
.mva-cscheme-color::-webkit-color-swatch-wrapper { padding: 3px; }
.mva-cscheme-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.mva-cscheme-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mva-cscheme-row-label { font-size: 13px; font-weight: 600; color: #111827; }
.mva-cscheme-row-desc { font-size: 11px; color: #8a97a6; }
.mva-cscheme-hex {
	flex: 0 0 86px; width: 86px; padding: 7px 8px;
	border: 1px solid #d1d5db; border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
	text-transform: lowercase;
}
.mva-cscheme-preview {
	flex: 1 1 auto; min-width: 0; background: #f3f4f6;
	display: flex; align-items: stretch; justify-content: stretch;
}
.mva-cscheme-preview iframe {
	width: 100%; height: 100%; border: 0; display: block;
}
.mva-cscheme-noframe {
	margin: auto; padding: 24px; text-align: center;
	color: #6b7280; font-size: 13px;
}
.mva-cscheme-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 18px; border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.mva-cscheme-msg { font-size: 12px; }
.mva-cscheme-msg--ok { color: #166534; }
.mva-cscheme-msg--error { color: #b91c1c; }
.mva-cscheme-foot-actions { display: flex; gap: 8px; margin-left: auto; }
body.mva-cscheme-open { overflow: hidden; }
@media (max-width: 820px) {
	.mva-cscheme-dialog { height: 94vh; }
	.mva-cscheme-body { flex-direction: column; }
	.mva-cscheme-controls { flex: 1 1 auto; border-right: 0; border-bottom: 1px solid #e5e7eb; }
	.mva-cscheme-preview { flex: 0 0 240px; }
}

/* Row-level settings in a Layout grid's row head — padding on three axes, plus
   the footer's cross-axis alignment. Pushed to the right so the row NAME stays
   the leftmost thing and the heads line up down the grid.

   Grouped and CAPTIONED rather than four bare dropdowns: "Top / Bottom / Sides"
   does not say padding on its own, and the column head's own alignment select
   sits directly underneath, so an uncaptioned bar reads as one set of controls
   spanning two levels of the grid. The captioned group plus the rule below is
   what separates them. */
.mva-row-opts {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	margin-left: auto;
	flex-wrap: wrap;
}

.mva-row-optgroup {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 4px 8px 5px;
	border: 1px solid var(--mv-admin-border);
	border-radius: var(--mv-admin-radius);
	background: var(--mv-admin-surface-alt);
	position: relative;
}

/* The caption sits ON the group's top edge, so the group reads as a labelled
   fieldset without costing a row of height in an already-tall head. */
.mva-row-optgroup-name {
	position: absolute;
	top: -7px;
	left: 7px;
	padding: 0 4px;
	background: var(--mv-admin-surface);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mv-admin-text-secondary);
}

.mva-row-opt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 10px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mv-admin-text-secondary);
}

/* The row head is ROW-level settings; the cells below it are column-level. They
   were running together — the column's alignment select looked like the fourth
   dropdown in the row's padding bar. A rule and real space say where one ends. */
.mva-zone-row-head {
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--mv-admin-border);
}

/* Standalone host for the same controls outside a Layout grid — the footer's own
   frame padding, which is not a row and has no head to sit in. */
.mva-chrome-rowline {
	display: flex;
}

.mva-chrome-rowline .mva-row-opts {
	margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mva-theme-card:hover .mva-ds-card { animation: none; }
	.mva-ds-card,
	.mva-ds-card::after { transition: none; }
}