/*
 * Buttons are :is(a, button).sb-lta-btn.sb-lta-btn (0,2,1): .sb-sf button (0,1,1, css/sample-finder.css,
 * later in the cascade) resets font and background otherwise (QC round 1).
 *
 * Lot-table actions, export gate, saved searches (loop L20261015-1525, dev-backend-2).
 * js/lot-table-actions.js, js/export-fields.js, js/saved-searches.js,
 * template-parts/account/saved-searches.php.
 *
 * Colours come from the Sample Finder's tokens (.sb-sf, css/sample-finder.css);
 * the fallbacks are the same values, for elements appended to <body>.
 * Selectors inside the toolbar carry `.sb-sf .sb-tb ... button.x` because
 * `.sb-sf .sb-tb button:not(...)` resets every button there with `all: unset`.
 */

.sb-lta-toast, .sb-xg, .sb-ss-strip, .sb-lta-bar, .sb-xs, .sb-ssa, .sb-ss-pop, .sb-lta-paste__pop {
	--lta-accent: hsl(var(--accent, 19 81% 42%));
	--lta-accent-fg: hsl(var(--accent-foreground, 0 0% 100%));
	--lta-primary: hsl(var(--primary, 242 96% 28%));
	--lta-fg: hsl(var(--foreground, 220 40% 13%));
	--lta-muted: hsl(var(--muted, 216 18% 94%));
	--lta-muted-fg: hsl(var(--muted-foreground, 216 18% 48%));
	--lta-border: hsl(var(--border, 216 18% 88%));
	--lta-card: hsl(var(--card, 0 0% 100%));
	--lta-danger: hsl(var(--destructive, 4 78% 51%));
}

/* ---- buttons (h-7 text-xs, the design's bar buttons) ---- */
:is(a, button).sb-lta-btn.sb-lta-btn,
.sb-sf .sb-tb button.sb-lta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	height: 28px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: 600 12px/1 Inter, system-ui, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}
:is(a, button).sb-lta-btn.sb-lta-btn:focus-visible { outline: 2px solid var(--lta-primary); outline-offset: 2px; }
:is(a, button).sb-lta-btn.sb-lta-btn:disabled { opacity: .5; cursor: not-allowed; }
:is(a, button).sb-lta-btn.sb-lta-btn--accent, .sb-sf .sb-tb button.sb-lta-btn--accent { background: var(--lta-accent); color: var(--lta-accent-fg); }
:is(a, button).sb-lta-btn.sb-lta-btn--accent:hover { filter: brightness(.94); }
:is(a, button).sb-lta-btn.sb-lta-btn--outline, .sb-sf .sb-tb button.sb-lta-btn--outline { background: var(--lta-card); border-color: var(--lta-primary); color: var(--lta-primary); font-weight: 700; }
:is(a, button).sb-lta-btn.sb-lta-btn--outline:hover { background: hsl(var(--primary, 242 96% 28%) / .1); }
:is(a, button).sb-lta-btn.sb-lta-btn--ghost, .sb-sf .sb-tb button.sb-lta-btn--ghost { background: transparent; color: var(--lta-fg); padding: 0 8px; }
:is(a, button).sb-lta-btn.sb-lta-btn--ghost:hover { background: var(--lta-muted); }
:is(a, button).sb-lta-btn.sb-lta-btn--danger, .sb-sf .sb-tb button.sb-lta-btn--danger { background: transparent; color: var(--lta-danger); }
:is(a, button).sb-lta-btn.sb-lta-btn--block, .sb-sf .sb-tb button.sb-lta-btn--block { width: 100%; height: 32px; }

/* ---- row: tick box, Added state, row error ---- */
/*
 * The box has its own column in the cell (design: `flex items-start gap-2`,
 * box `mt-0.5`; header `items-center`), so it never sits on the link.
 * Box = src/components/ui/checkbox.tsx: 16px, 1px navy border, radius 3px,
 * card fill; checked / indeterminate navy fill with a 12px white tick / minus
 * (stroke 3) centred. Header box: card fill with a navy tick (design classes
 * data-[state=checked]:bg-card text-primary).
 */
.sb-lta-cell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.sb-lta-cell--head { align-items: center; }
.sb-lta-cell__body { flex: 1 1 auto; min-width: 0; }
input.sb-lta-check {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	border: 1px solid hsl(var(--primary, 242 96% 28%));
	border-radius: 3px;
	background: hsl(var(--card, 0 0% 100%)) center / 12px 12px no-repeat;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms;
}
.sb-lta-cell--head input.sb-lta-check { margin-top: 0; }
input.sb-lta-check:checked {
	background-color: hsl(var(--primary, 242 96% 28%));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input.sb-lta-check:indeterminate {
	background-color: hsl(var(--primary, 242 96% 28%));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
input.sb-lta-check.sb-lta-check--head { border-color: hsl(var(--primary-foreground, 0 0% 100%)); }
input.sb-lta-check.sb-lta-check--head:checked,
input.sb-lta-check.sb-lta-check--head:indeterminate { background-color: hsl(var(--card, 0 0% 100%)); border-color: hsl(var(--card, 0 0% 100%)); }
input.sb-lta-check.sb-lta-check--head:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input.sb-lta-check.sb-lta-check--head:indeterminate {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
input.sb-lta-check:focus-visible { outline: 2px solid hsl(var(--ring, 242 96% 28%)); outline-offset: 2px; }
@media (forced-colors: active) {
	input.sb-lta-check { appearance: auto; -webkit-appearance: checkbox; background-image: none; }
}
.sb-sf-atc-btn.is-added { white-space: nowrap; }
.sb-lta-tick { margin-left: 2px; font-size: 11px; }
.sb-lta-row-error { margin: 4px 0 0; color: hsl(var(--destructive, 4 78% 51%)); font-size: 11px; line-height: 14px; white-space: normal; text-align: right; }

/* ---- selected-lots bar: above the table; docked bottom on a phone ---- */
.sb-lta-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-bottom: 1px solid hsl(var(--border, 216 18% 88%) / .6);
	background: hsl(var(--muted, 216 18% 94%) / .4);
}
.sb-lta-bar__sum { margin-right: auto; font-size: 12px; font-weight: 600; color: var(--lta-fg); }
@media (max-width: 699px) {
	.sb-lta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--lta-border);
		border-bottom: 0;
		background: var(--lta-card);
		box-shadow: 0 -8px 24px rgba(20, 29, 46, .12);
	}
	body.sb-lta-has-bar { padding-bottom: 64px; }
	/* The toast sits above the docked bar. */
	body.sb-lta-has-bar .sb-lta-toast { bottom: 76px; }
}

/* ---- toast (3 s) ---- */
.sb-lta-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100002;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 32px);
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid #dbdfe6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(20, 29, 46, .16);
	color: #141d2e;
	font: 600 13px/18px Inter, system-ui, sans-serif;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}
.sb-lta-toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sb-lta-toast__action { color: var(--lta-primary); font-weight: 700; text-decoration: underline; white-space: nowrap; }
@media (max-width: 699px) { .sb-lta-toast { left: 16px; right: 16px; } }

/* Slow add (js/lot-table-actions.js SLOW_MS / STALL_MS): spinner + amber edge. */
.sb-lta-toast--warn { border-left: 4px solid #b45309; }
.sb-lta-spin {
	display: inline-block;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: sb-lta-spin 0.8s linear infinite;
}
.sb-lta-toast .sb-lta-spin { margin-right: 0; }
@keyframes sb-lta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sb-lta-spin { animation-duration: 2.4s; } }

/* ---- Paste lot or patient IDs ---- */
.sb-lta-paste { position: relative; display: inline-flex; align-self: center; }
.sb-sf .sb-tb .sb-lta-paste button.sb-lta-paste__trigger,
.sb-lta-paste__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid hsl(var(--primary, 242 96% 28%) / .3);
	border-radius: 6px;
	color: hsl(var(--foreground, 220 40% 13%) / .8);
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	cursor: pointer;
}
.sb-sf .sb-tb .sb-lta-paste button.sb-lta-paste__trigger:hover { border-color: hsl(var(--primary, 242 96% 28%) / .5); background: hsl(var(--muted, 216 18% 94%) / .4); }
.sb-sf .sb-tb .sb-lta-paste button.sb-lta-paste__trigger[aria-expanded="true"] { border-style: dashed; background: hsl(var(--muted, 216 18% 94%) / .6); }
.sb-lta-paste__chev { color: hsl(var(--foreground, 220 40% 13%) / .6); font-size: 10px; }
.sb-lta-paste__pop {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 60;
	width: 320px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--lta-border);
	border-radius: 8px;
	background: var(--lta-card);
	box-shadow: 0 10px 28px rgba(20, 29, 46, .16);
}
.sb-lta-paste__pop[hidden] { display: none; }
.sb-lta-paste__title { margin: 0 0 8px; font: 700 14px/20px "Plus Jakarta Sans", Inter, sans-serif; color: var(--lta-fg); }
.sb-lta-paste__area { display: block; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--lta-border); border-radius: 6px; font: 12px/16px Inter, sans-serif; resize: vertical; }
.sb-lta-paste__row { display: flex; justify-content: flex-end; margin-top: 8px; }
.sb-lta-paste__result { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lta-border); font-size: 12px; color: var(--lta-fg); }
.sb-lta-paste__result[hidden] { display: none; }
.sb-lta-paste__line { margin: 0 0 8px; overflow-wrap: anywhere; }
.sb-lta-paste__error { margin: 0; color: var(--lta-danger); }

/* ---- export gate (ExportGateDialog.tsx: max-w-md) ---- */
.sb-xg { position: fixed; inset: 0; z-index: 100003; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sb-xg[hidden] { display: none; }
.sb-xg__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.sb-xg__panel {
	position: relative;
	width: 100%;
	max-width: 448px;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 8px;
	background: #fff;
	color: #141d2e;
	font-family: Inter, system-ui, sans-serif;
	box-shadow: 0 10px 28px rgba(20, 29, 46, .2);
}
.sb-xg__x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; cursor: pointer; color: #6b7280; }
.sb-xg__title { margin: 0 32px 16px 0; font: 700 18px/1.3 "Plus Jakarta Sans", Inter, sans-serif; }
.sb-xg__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-xg__form { display: flex; flex-direction: column; gap: 16px; }
.sb-xg__label { display: block; margin-bottom: -12px; font-size: 12px; font-weight: 500; }
.sb-xg__input { height: 40px; padding: 8px 12px; border: 1px solid #dbdfe6; border-radius: 6px; font-size: 14px; }
.sb-xg__input:focus-visible { outline: 2px solid var(--lta-primary); outline-offset: 1px; }
.sb-xg__error { margin: -8px 0 0; color: var(--lta-danger); font-size: 12px; }
/* Consent at normal size and colour (text-sm text-foreground). */
.sb-xg__consent { margin: 0; font-size: 14px; line-height: 20px; color: #141d2e; }
.sb-xg__go { height: 40px; border: 0; border-radius: 6px; background: var(--lta-accent); color: var(--lta-accent-fg); font: 600 14px/1 Inter, sans-serif; cursor: pointer; }
.sb-xg__go:hover { filter: brightness(.94); }
.sb-xg__signin { margin: 0; text-align: center; font-size: 12px; color: #6b7280; }
.sb-xg__signin-link { color: var(--lta-primary); font-weight: 600; text-decoration: none; }
.sb-xg__signin-link:hover { text-decoration: underline; }
html.sb-xg-open { overflow: hidden; }
/* Mobile: one field in a bottom sheet. */
@media (max-width: 699px) {
	.sb-xg { align-items: flex-end; padding: 0; }
	.sb-xg__panel { max-width: none; border-radius: 12px 12px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---- export strip + saved-search strip ---- */
.sb-xs, .sb-ss-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-bottom: 1px solid hsl(var(--border, 216 18% 88%) / .6);
	background: hsl(var(--muted, 216 18% 94%) / .4);
	font-size: 12px;
	color: var(--lta-fg);
}
.sb-xs__text { margin-right: auto; font-weight: 600; }
.sb-xs__x { width: 28px; padding: 0; }
.sb-ss-strip { margin-bottom: 8px; border: 1px solid hsl(var(--primary, 242 96% 28%) / .2); border-radius: 8px; background: hsl(var(--primary, 242 96% 28%) / .05); }
.sb-ss-strip__text { font-weight: 600; }
.sb-ss-strip__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-ss-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: hsl(var(--primary, 242 96% 28%) / .1); color: var(--lta-primary); font-size: 12px; font-weight: 600; list-style: none; }
.sb-ss-chip--link { text-decoration: none; }
.sb-ss-chip--link:hover { background: hsl(var(--primary, 242 96% 28%) / .2); }

/* ---- Save this search ---- */
.sb-ss-save { position: relative; display: inline-flex; align-items: center; }
.sb-ss-btn,
.sb-sf .sb-tb .sb-ss-save button.sb-ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 8px;
	border-radius: 6px;
	color: hsl(var(--primary, 242 96% 28%));
	font: 600 12px/1 Inter, system-ui, sans-serif;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.sb-sf .sb-tb .sb-ss-save button.sb-ss-btn:hover, .sb-ss-btn:hover { background: hsl(var(--muted, 216 18% 94%)); }
.sb-ss-ico { width: 14px; height: 14px; }
.sb-ss-pop {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 60;
	width: 320px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--lta-border);
	border-radius: 8px;
	background: var(--lta-card);
	box-shadow: 0 10px 28px rgba(20, 29, 46, .16);
	text-align: left;
	font-size: 12px;
	color: var(--lta-fg);
}
.sb-ss-pop[hidden] { display: none; }
.sb-ss-pop__form { display: flex; flex-direction: column; gap: 10px; }
.sb-ss-pop__title { margin: 0; font: 700 14px/20px "Plus Jakarta Sans", Inter, sans-serif; }
.sb-ss-pop__meta { margin: 2px 0 10px; color: var(--lta-muted-fg); }
.sb-ss-pop__label { margin-bottom: -6px; font-weight: 500; }
.sb-ss-pop__input { height: 36px; padding: 0 10px; border: 1px solid var(--lta-border); border-radius: 6px; font-size: 12px; }
.sb-ss-pop__row { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.sb-ss-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.sb-ss-switch input { width: 32px; height: 18px; accent-color: hsl(var(--primary, 242 96% 28%)); }
.sb-ss-zero { margin: 12px auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sb-ss-zero__text { margin: 0; font-size: 14px; color: var(--lta-fg, #141d2e); }
.sb-ss-zero .sb-ss-pop { right: auto; left: 50%; transform: translateX(-50%); }
.sb-ss-new { display: inline-block; margin-left: 6px; padding: 0 6px; height: 16px; border-radius: 999px; background: hsl(var(--accent, 19 81% 42%)); color: hsl(var(--accent-foreground, 0 0% 100%)); font-size: 10px; line-height: 16px; font-weight: 700; vertical-align: middle; }

/* ---- My Account > Saved searches ---- */
.sb-ssa { font-family: Inter, system-ui, sans-serif; color: var(--lta-fg); }
.sb-ssa__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; border: 1px solid var(--lta-border); border-radius: 8px; text-align: center; }
.sb-ssa__empty-ico { width: 32px; height: 32px; color: var(--lta-primary); }
.sb-ssa__empty-title { margin: 0; font: 700 18px/1.3 "Plus Jakarta Sans", Inter, sans-serif; }
.sb-ssa__empty-text { margin: 0; max-width: 28rem; font-size: 14px; color: var(--lta-muted-fg); }
.sb-ssa__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sb-ssa__card { padding: 16px; border: 1px solid var(--lta-border); border-radius: 8px; background: var(--lta-card); display: flex; flex-direction: column; gap: 12px; }
.sb-ssa__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-ssa__titles { flex: 1; min-width: 0; }
.sb-ssa__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 16px/1.3 "Plus Jakarta Sans", Inter, sans-serif; }
.sb-ssa__name[hidden], .sb-ssa__rename[hidden] { display: none; }
.sb-ssa__badge { padding: 2px 10px; border-radius: 999px; background: var(--lta-accent); color: var(--lta-accent-fg); font-size: 12px; font-weight: 600; }
.sb-ssa__meta { margin: 2px 0 0; font-size: 12px; color: var(--lta-muted-fg); }
.sb-ssa__rename { display: flex; gap: 8px; }
.sb-ssa__rename input { height: 36px; max-width: 24rem; flex: 1; padding: 0 10px; border: 1px solid var(--lta-border); border-radius: 6px; }
.sb-ssa__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-ssa__actions :is(a, button).sb-lta-btn.sb-lta-btn { height: 32px; }
.sb-ssa__chips { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sb-ssa__alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--lta-border); font-size: 12px; }
.sb-ssa__alerts .sb-ss-switch { justify-content: flex-start; }
.sb-ssa__alerts .sb-ss-switch input { order: -1; }
.sb-ssa__alerts select { height: 32px; width: 112px; border: 1px solid var(--lta-border); border-radius: 6px; font-size: 12px; }

@media (forced-colors: active) {
	:is(a, button).sb-lta-btn.sb-lta-btn, .sb-ss-btn, .sb-lta-paste__trigger { border: 1px solid ButtonText; }
}

/* ---- "Save this search" card: visible fields and a real Save button (owner, 16 Oct) ----
   The popover lives inside the toolbar, where `.sb-sf .sb-tb button:not(...)` (0,3,1) unsets
   buttons and legacy input rules flatten fields, so these selectors carry extra weight. */
.sb-sf .sb-tb .sb-ss-pop.sb-ss-pop,
.sb-ss-pop.sb-ss-pop { padding: 16px; width: 340px; }
.sb-ss-pop .sb-ss-pop__form.sb-ss-pop__form { gap: 12px; }
.sb-ss-pop .sb-ss-pop__label.sb-ss-pop__label { margin-bottom: -8px; font: 600 12px/16px Inter, system-ui, sans-serif; color: #141d2e; }
.sb-ss-pop .sb-ss-pop__form .sb-ss-pop__input.sb-ss-pop__input {
	display: block;
	width: 100%;
	height: 38px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #8a94a6;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	font: 400 13px/1.2 Inter, system-ui, sans-serif;
	color: #141d2e;
}
.sb-ss-pop .sb-ss-pop__form .sb-ss-pop__input.sb-ss-pop__input:focus,
.sb-ss-pop .sb-ss-pop__form .sb-ss-pop__input.sb-ss-pop__input:focus-visible {
	outline: 2px solid #06038d;
	outline-offset: 1px;
	border-color: #06038d;
}
.sb-ss-pop .sb-ss-pop__form .sb-ss-pop__input.sb-ss-pop__input:disabled {
	background-color: #f1f3f6;
	color: #58677e;
	border-color: #c3c9d3;
}
.sb-ss-pop .sb-ss-pop__form select.sb-ss-pop__input.sb-ss-pop__input {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23141d2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.sb-ss-pop .sb-ss-switch.sb-ss-switch { padding: 8px 0 0; border-top: 1px solid #e3e7ed; font-weight: 600; color: #141d2e; }
.sb-ss-pop .sb-ss-switch.sb-ss-switch input { width: 18px; height: 18px; margin: 0; }
.sb-sf .sb-tb .sb-ss-pop .sb-ss-pop__row button.sb-lta-btn,
.sb-ss-pop .sb-ss-pop__row button.sb-lta-btn.sb-lta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 34px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: 600 13px/1 Inter, system-ui, sans-serif;
	cursor: pointer;
}
.sb-sf .sb-tb .sb-ss-pop .sb-ss-pop__row button.sb-lta-btn--accent,
.sb-ss-pop .sb-ss-pop__row button.sb-lta-btn.sb-lta-btn--accent { background: var(--lta-accent); color: var(--lta-accent-fg); }
.sb-sf .sb-tb .sb-ss-pop .sb-ss-pop__row button.sb-lta-btn--accent:hover,
.sb-ss-pop .sb-ss-pop__row button.sb-lta-btn.sb-lta-btn--accent:hover { filter: brightness(.92); }
.sb-sf .sb-tb .sb-ss-pop .sb-ss-pop__row button.sb-lta-btn--danger,
.sb-ss-pop .sb-ss-pop__row button.sb-lta-btn.sb-lta-btn--danger { background: #fff; color: #b42318; border-color: #b42318; }
.sb-sf .sb-tb .sb-ss-pop .sb-ss-pop__row button.sb-lta-btn:focus-visible,
.sb-ss-pop .sb-ss-pop__row button.sb-lta-btn.sb-lta-btn:focus-visible { outline: 2px solid #06038d; outline-offset: 2px; }

/* ---- My Account > Saved searches: cards aligned with the Save popover (Lovable 9447256f) ----
   Fields carry the popover's #8a94a6 border and navy focus ring; the alert row is
   "switch + label" then a labelled "Alert frequency" select (items-end, gap-x-5).
   Legacy account-page rules style bare inputs/selects/buttons, so these carry weight. */
.sb-ssa .sb-ssa__empty[hidden], .sb-ssa .sb-ssa__list[hidden] { display: none; }
.sb-ssa .sb-ssa__meta { margin-top: 4px; font-size: 12px; line-height: 16px; }
.sb-ssa .sb-ssa__rename input[type="text"] {
	height: 36px; max-width: 24rem; flex: 1 1 auto; margin: 0; padding: 0 10px; box-sizing: border-box;
	border: 1px solid #8a94a6; border-radius: 6px; background: #fff; box-shadow: none;
	font: 400 14px/1.2 Inter, system-ui, sans-serif; color: #141d2e;
}
.sb-ssa .sb-ssa__rename input[type="text"]:focus,
.sb-ssa .sb-ssa__rename input[type="text"]:focus-visible { outline: 2px solid #06038d; outline-offset: 1px; border-color: #06038d; }
.sb-ssa .sb-ssa__rename :is(a, button).sb-lta-btn.sb-lta-btn { height: 36px; padding: 0 14px; font-size: 13px; }
.sb-ssa .sb-ssa__alerts { align-items: flex-end; column-gap: 20px; row-gap: 12px; }
.sb-ssa .sb-ssa__alerts .sb-ss-switch { padding-bottom: 7px; font-size: 12px; font-weight: 500; color: #141d2e; }
.sb-ssa .sb-ssa__alerts .sb-ss-switch input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #06038d; }
.sb-ssa .sb-ssa__freq { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.sb-ssa .sb-ssa__freq-label { font: 500 12px/16px Inter, system-ui, sans-serif; color: #141d2e; }
.sb-ssa .sb-ssa__freq select {
	-webkit-appearance: none; appearance: none;
	height: 32px; width: 112px; margin: 0; padding: 0 28px 0 10px; box-sizing: border-box;
	border: 1px solid #8a94a6; border-radius: 6px; box-shadow: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23141d2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
	font: 400 12px/1.2 Inter, system-ui, sans-serif; color: #141d2e;
}
.sb-ssa .sb-ssa__freq select:focus,
.sb-ssa .sb-ssa__freq select:focus-visible { outline: 2px solid #06038d; outline-offset: 1px; border-color: #06038d; }
.sb-ssa .sb-ssa__freq select:disabled { background-color: #f1f3f6; color: #58677e; border-color: #c3c9d3; cursor: not-allowed; }
.sb-ssa .sb-ssa__actions :is(a, button).sb-lta-btn--danger.sb-lta-btn { border: 1px solid transparent; }
.sb-ssa .sb-ssa__actions :is(a, button).sb-lta-btn--danger.sb-lta-btn:hover { background: hsl(var(--destructive, 4 78% 51%) / .08); }
.sb-lta-toast button.sb-lta-toast__action {
	-webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; height: auto;
	font: 700 13px/18px Inter, system-ui, sans-serif; color: hsl(var(--primary, 242 96% 28%)); text-decoration: underline; cursor: pointer;
}
.sb-lta-toast button.sb-lta-toast__action:focus-visible { outline: 2px solid #06038d; outline-offset: 2px; }/* Legacy account-page `p` / `ul` / `li` margins opened 30-40px gaps inside the card. */
.sb-ssa .sb-ssa__card p.sb-ssa__name { margin: 0; }
.sb-ssa .sb-ssa__card p.sb-ssa__meta { margin: 4px 0 0; }
.sb-ssa .sb-ssa__card ul.sb-ssa__chips { margin: 0; padding: 0; list-style: none; }
.sb-ssa .sb-ssa__card ul.sb-ssa__chips li.sb-ss-chip { margin: 0; line-height: 16px; }
.sb-ssa .sb-ssa__card .sb-ssa__alerts label { margin: 0; }/* Phones: the title takes the row and the actions wrap under it (flex-wrap, as the design). */
.sb-ssa .sb-ssa__card .sb-ssa__titles { flex: 1 1 260px; }

/* ==========================================================================
 * Row quantity selector (feat-fb-table-atc-qty-stepper, L20261019-1900)
 *
 * js/lot-table-actions.js wraps each row's Add to Cart in .sb-lta-action and
 * swaps in .sb-lta-qty ([trash/-] [qty] [+]) once the lot is in the cart.
 *
 * OWNER, 19 Oct: "The Add to Cart buttons are too big on the inventory
 * tables." This overrides the design's 112x40 box and 180px column. The
 * button is back to its pre-loop size and the Price/Action column to its
 * pre-loop width (148px, 88px below 768, unchanged rules in
 * sample-finder-ui.css / sf-toolbar.css), and the selector takes exactly the
 * button's footprint so the row never jumps:
 *   >= 768   82 x 24, "Add to Cart" 12px; selector 28 / 26 / 28
 *   700-767  72 x 24, "Add" 12px (was 48 wide; 72 fits the selector in the
 *            unchanged 88px column); selector 24 / 24 / 24
 *   < 700    the pre-loop phone card: an 84px column, price over a
 *            full-height "Add" (min 44px tall); selector 28 / 28 / 28 at the
 *            same full height.
 * The long prefix out-ranks the older button rules (up to (0,4,5) !important).
 * ========================================================================== */

.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action {
	display: block;
	box-sizing: border-box;
	width: 82px;
	height: 24px;
	flex: 0 0 auto;
}

.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action button.sb-sf-atc-btn.sb-sf-atc-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	flex: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 8px !important;
	border: 0;
	border-radius: 4px !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px !important;
	line-height: 16px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action button.sb-sf-atc-btn.sb-sf-atc-btn::after { content: none !important; }
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action button.sb-sf-atc-btn.sb-sf-atc-btn[hidden] { display: none !important; }
.sb-lta-action .sb-lta-lbl-short { display: none; }
/* busy: Loader2 + "Adding…" / "Still adding…" */
.sb-lta-action .sb-lta-loader {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	pointer-events: none;
	animation: sb-lta-spin 1s linear infinite;
}

/* [trash/-] [qty] [+] in the button's box: 1px navy-40% border, the button's 4px radius, white. */
.sb-lta-qty {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 28px;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid hsl(242 96% 28% / 0.4);
	border-radius: 4px;
	background: hsl(0 0% 100%);
	color: hsl(242 96% 28%);
}
.sb-lta-qty__plus { display: block; height: 100%; min-width: 0; }
.sb-lta-qty__plus:focus { outline: 0; }
.sb-lta-qty__plus:focus-visible { box-shadow: inset 0 0 0 2px hsl(242 96% 28%); }
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn,
.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: hsl(242 96% 28%) !important;
	font-size: 12px !important;
	line-height: 16px !important;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: none;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:hover,
.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:hover { background: hsl(242 96% 28% / 0.1) !important; }
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:focus-visible,
.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:focus-visible {
	box-shadow: inset 0 0 0 2px hsl(242 96% 28%);
}
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:disabled,
.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:disabled { opacity: 0.5; pointer-events: none; cursor: default; }
.sb-lta-qty .sb-lta-qty__btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0; pointer-events: none; }
.sb-lta-qty[aria-busy="true"] { cursor: progress; }
.sb-lta-qty output.sb-lta-qty__n.sb-lta-qty__n,
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n,
.sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n {
	display: block;
	align-self: stretch;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: hidden;
	color: inherit !important;
	font: 600 12px/16px Inter, system-ui, sans-serif !important;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	cursor: text;
}
/* Typed quantity (21 Oct): an inset ring while editing, like the buttons' focus. */
.sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n:focus { outline: 0 !important; box-shadow: inset 0 0 0 2px hsl(242 96% 28%) !important; background: hsl(242 96% 28% / 0.05) !important; }
.sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n[readonly] { cursor: progress; }
@media (forced-colors: active) {
	.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn:focus-visible,
	.sb-lta-qty__plus:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* Retry on a row whose change stalled or failed: a text link in the error's red. */
.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-row-error button.sb-lta-row-retry.sb-lta-row-retry,
.sb-lta-row-error button.sb-lta-row-retry {
	display: inline !important;
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: inherit !important;
	font: inherit !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.sb-lta-row-error button.sb-lta-row-retry:focus-visible { outline: 2px solid hsl(242 96% 28%); outline-offset: 2px; }

/* Tooltip: TooltipContent `rounded-md border bg-popover px-3 py-1.5 text-sm shadow-md`, top, 4px off. */
.sb-lta-tip {
	position: absolute;
	z-index: 100002;
	box-sizing: border-box;
	overflow: hidden;
	padding: 6px 12px;
	border: 1px solid hsl(216 18% 88%);
	border-radius: 6px;
	background: hsl(0 0% 100%);
	color: hsl(220 40% 13%);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	font: 400 14px/20px Inter, system-ui, sans-serif;
	white-space: nowrap;
	pointer-events: none;
	animation: sb-lta-tip-in 150ms;
}
.sb-lta-tip[hidden] { display: none; }
@keyframes sb-lta-tip-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale3d(0.95, 0.95, 0.95); } }

/* 700-767: the 88px column of the phone-width table; "Add" as before. */
@media (max-width: 767px) {
	.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action { width: 72px; }
	.sb-lta-action .sb-lta-lbl-full { display: none; }
	.sb-lta-action .sb-lta-lbl-short { display: inline; }
	.sb-lta-qty { grid-template-columns: 24px minmax(0, 1fr) 24px; }
}

/* < 700: the pre-loop phone card -- price over a full-height "Add" (min 44px tap target) in the 84px column. */
@media (max-width: 699px) {
	.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action {
		display: flex;
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		min-height: 44px;
	}
	.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action button.sb-sf-atc-btn.sb-sf-atc-btn {
		flex: 1 1 auto !important;
		height: auto !important;
		min-height: 44px !important;
		padding: 4px 8px !important;
		font-size: 14px !important;
		line-height: 18px !important;
		white-space: normal !important;
	}
	.sb-lta-qty { flex: 1 1 auto; height: auto; min-height: 44px; grid-template-columns: 28px minmax(0, 1fr) 28px; }
	.sb-lta-qty__plus { align-self: stretch; }
	.sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn,
	.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty button.sb-lta-qty__btn.sb-lta-qty__btn { align-self: stretch; height: auto !important; min-height: 42px !important; }
	.sb-lta-qty output.sb-lta-qty__n.sb-lta-qty__n { font-size: 14px; line-height: 20px; }
	/* 16px on phones so iOS does not zoom into the field. */
	.sb-sf [data-sb-sf-instock] table.sb-sf-instock-table td[data-col="price"] .sb-lta-action .sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n,
	.sb-lta-qty input.sb-lta-qty__n.sb-lta-qty__n { font-size: 16px !important; line-height: 20px !important; }
}

/* --------------------------------------------------------------------------
 * Frozen Price / Action column: no half-cut text beside it (Admin, 19 Oct).
 *
 * The column is `position: sticky; right: 0` (sample-finder-ui.css), so the
 * horizontally scrolling columns pass under it. Its only cover was a hard
 * 14px strip (`box-shadow: -14px 0 0 0 #fff`), so whichever column sat at
 * the edge was cut mid-word and its first letters/digits ("Vitan", "Alope",
 * "03:0") read as stray text beside the price. Which column is cut changes
 * with every table width (a filter refresh, the cart rail opening or
 * collapsing, a resize), which is why it came and went. Nothing here is
 * computed in JS: `right: 0` needs no recalculation.
 *
 * A second, blurred shadow of the same colour (spread -8px, so the blur
 * stays inside the row and never smudges the rows above and below)
 * continues the strip as a fade, opaque to 18px and clear by 34px left of
 * the column, so a column
 * running under it fades out instead of being sliced. Same colour per state:
 * white rows, the hovered row's #f8fafc, the navy header.
 *
 * Brian, 29 Oct: "can we get rid of this gradient?" The fade is gone; the
 * column keeps only its hard 14px strip and its left border
 * (sample-finder-ui.css), so it reads as a clean frozen edge.
 * -------------------------------------------------------------------------- */