/*
 * SellKit UI — components
 * ---------------------------------------------------------------------------
 * Every class is prefixed with `ui-`. Modifiers use `--` (ui-btn--outline),
 * parts use `__` (ui-card__title), states use `is-*` or ARIA attributes.
 * Colours come exclusively from tokens.css. Copy-paste markup for each
 * component lives in docs/ui-system.md.
 */

/* ===========================================================================
 * Base
 * ======================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: var(--background);
	color: var(--foreground);
}

/* Typography base for redesigned areas */
.ui-main,
.ui-auth,
.ui-sidebar,
.ui-mobilebar,
.ui-dialog,
.ui-sheet,
.ui-toaster,
.ui-dropdown__menu,
.ui-scope {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ui-main :is(h1, h2, h3, h4, h5, h6),
.ui-auth :is(h1, h2, h3, h4, h5, h6),
.ui-dialog :is(h1, h2, h3, h4, h5, h6),
.ui-sheet :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
	color: var(--foreground);
	letter-spacing: var(--tracking-tight);
}

.ui-main :focus-visible,
.ui-auth :focus-visible,
.ui-sidebar :focus-visible,
.ui-mobilebar :focus-visible,
.ui-dialog :focus-visible,
.ui-sheet :focus-visible,
.ui-dropdown__menu :focus-visible,
.ui-toaster :focus-visible,
.ui-focus-ring:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

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

.ui-skip-link {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	z-index: var(--z-tooltip);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--primary);
	color: var(--primary-foreground);
	font: 500 var(--text-base)/1.4 var(--font-sans);
	transform: translateY(-200%);
}
.ui-skip-link:focus {
	transform: none;
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* Text helpers */
.ui-h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); margin: 0; color: var(--foreground); }
.ui-h2 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: 0; color: var(--foreground); }
.ui-h3 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0; color: var(--foreground); }
.ui-h4 { font-size: var(--text-base); line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0; color: var(--foreground); }
.ui-lead { font-size: var(--text-md); color: var(--muted-foreground); margin: 0; }
.ui-text { font-size: var(--text-base); color: var(--foreground); margin: 0; }
.ui-text-sm { font-size: var(--text-sm); }
.ui-text-xs { font-size: var(--text-xs); }
.ui-text-muted { color: var(--muted-foreground); }
.ui-text-success { color: var(--success-subtle-foreground); }
.ui-text-warning { color: var(--warning-subtle-foreground); }
.ui-text-danger { color: var(--danger-subtle-foreground); }
.ui-text-mono { font-family: var(--font-mono); font-size: 0.92em; }
.ui-tabular { font-variant-numeric: tabular-nums; }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

.ui-link {
	color: var(--brand);
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--duration-fast) ease;
}
.ui-link:hover {
	color: var(--brand);
	text-decoration-color: currentColor;
}

/* Simple layout primitives (gap via --gap) */
.ui-stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); min-width: 0; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2)); min-width: 0; }
.ui-row--between { justify-content: space-between; }
.ui-row--end { justify-content: flex-end; }
.ui-row--nowrap { flex-wrap: nowrap; }
.ui-grow { flex: 1 1 auto; min-width: 0; }

/* Icons rendered by display_svg_icon() */
.ui-icon,
.ui-icon svg {
	width: var(--icon-size, 1rem);
	height: var(--icon-size, 1rem);
	flex-shrink: 0;
}
.ui-icon { display: inline-flex; align-items: center; justify-content: center; }
.ui-icon svg { display: block; }
.ui-icon--sm { --icon-size: 0.875rem; }
.ui-icon--lg { --icon-size: 1.25rem; }

/* ===========================================================================
 * Spinner
 * ======================================================================== */
.ui-spinner {
	display: inline-block;
	width: var(--spinner-size, 1rem);
	height: var(--spinner-size, 1rem);
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ui-spin 0.7s linear infinite;
	flex-shrink: 0;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ===========================================================================
 * Button
 * ======================================================================== */
.ui-btn {
	--btn-bg: var(--primary);
	--btn-fg: var(--primary-foreground);
	--btn-border: transparent;
	--btn-bg-hover: var(--primary-hover);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-h);
	min-height: var(--control-h);
	padding: 0 var(--space-4);
	border: 1px solid var(--btn-border);
	border-radius: var(--radius-md);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: var(--weight-medium) var(--text-base) / 1 var(--font-sans);
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: var(--shadow-xs);
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.ui-btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.ui-btn:active:not(:disabled) { transform: translateY(0.5px); }
.ui-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ui-btn > span { display: inline-flex; align-items: center; gap: inherit; }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"],
.ui-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

.ui-btn--secondary { --btn-bg: var(--secondary); --btn-fg: var(--secondary-foreground); --btn-bg-hover: var(--secondary-hover); box-shadow: none; }
.ui-btn--outline { --btn-bg: var(--background); --btn-fg: var(--foreground); --btn-border: var(--border); --btn-bg-hover: var(--accent); }
.ui-btn--outline:hover { color: var(--accent-foreground); }
.ui-btn--ghost { --btn-bg: transparent; --btn-fg: var(--foreground); --btn-bg-hover: var(--accent); box-shadow: none; }
.ui-btn--ghost:hover { color: var(--accent-foreground); }
.ui-btn--destructive { --btn-bg: var(--destructive); --btn-fg: var(--destructive-foreground); --btn-bg-hover: var(--destructive-hover); }
.ui-btn--contrast { --btn-bg: var(--contrast); --btn-fg: var(--contrast-foreground); --btn-bg-hover: color-mix(in srgb, var(--contrast) 85%, var(--background)); }
.ui-btn--link {
	--btn-bg: transparent; --btn-fg: var(--brand); --btn-bg-hover: transparent;
	box-shadow: none; height: auto; min-height: 0; padding: 0;
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.ui-btn--link:hover { text-decoration-color: currentColor; }

.ui-btn--sm { height: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); gap: var(--space-1-5); }
.ui-btn--lg { height: var(--control-h-lg); min-height: var(--control-h-lg); padding: 0 var(--space-6); }
.ui-btn--icon { width: var(--control-h); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--control-h-sm); }
.ui-btn--icon.ui-btn--lg { width: var(--control-h-lg); }
.ui-btn--block { display: flex; width: 100%; }

/* Loading: add .is-loading (or aria-busy="true"); label stays for width */
.ui-btn.is-loading,
.ui-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.ui-btn.is-loading > *,
.ui-btn[aria-busy="true"] > * { visibility: hidden; }
.ui-btn.is-loading::after,
.ui-btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--btn-fg);
	border-right-color: transparent;
	border-radius: 50%;
	animation: ui-spin 0.7s linear infinite;
}

/* Compatibility with submit_form.js (ARTBEES.Submit): it toggles
   .form-in-submission / .is-btn-success / .is-btn-error and expects the
   .js__btn-loader / .js__btn-success / .js__btn-error children. */
.ui-btn .js__btn-loader,
.ui-btn .btn-icon-status { display: none; }
.ui-btn .js__btn-loader.spinner-border {
	width: 1rem;
	height: 1rem;
	margin: 0;
	border-width: 2px;
	vertical-align: middle;
}
.ui-btn.form-in-submission .js__btn-loader { display: inline-block; }
.ui-btn.form-in-submission { pointer-events: none; }
.ui-btn.is-btn-success .js__btn-success,
.ui-btn.is-btn-error .js__btn-error { display: inline-flex; }
.ui-btn .btn-icon-status svg { width: 1rem; height: 1rem; }

.ui-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ===========================================================================
 * Form controls
 * ======================================================================== */
.ui-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	color: var(--foreground);
	cursor: default;
}
.ui-label__optional { font-weight: var(--weight-normal); color: var(--muted-foreground); }
.ui-label__required { color: var(--danger-subtle-foreground); }

.ui-input,
.ui-textarea,
.ui-select {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: var(--control-h);
	padding: 0 var(--space-3);
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	background-color: var(--input-background);
	color: var(--foreground);
	font: var(--weight-normal) var(--text-base) / 1.4 var(--font-sans);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
	-webkit-appearance: none;
	appearance: none;
}
/* 16px on small screens prevents iOS zoom-on-focus */
@media (max-width: 767px) {
	.ui-input, .ui-textarea, .ui-select { font-size: 16px; }
}
.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
.ui-input:hover,
.ui-textarea:hover,
.ui-select:hover { border-color: color-mix(in srgb, var(--input) 70%, var(--foreground)); }
.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}
.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--muted); }
.ui-input[readonly] { background-color: var(--muted); }
.ui-input[aria-invalid="true"],
.ui-textarea[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-input.is-error,
.ui-textarea.is-error,
.ui-select.is-error { border-color: var(--destructive); }
.ui-input[aria-invalid="true"]:focus,
.ui-input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 22%, transparent); }
.ui-input--sm { height: var(--control-h-sm); font-size: var(--text-sm); }
/* --sm comes later than the 16px mobile rule above; keep 16px (iOS zoom, and
   the same size as the select triggers next to it). */
@media (max-width: 767px) { .ui-input--sm { font-size: 16px; } }
.ui-input--lg { height: var(--control-h-lg); }
.ui-input[type="file"] { padding: var(--space-1-5) var(--space-3); height: auto; }

.ui-textarea {
	height: auto;
	min-height: 5.5rem;
	padding: var(--space-2) var(--space-3);
	line-height: var(--leading-normal);
	resize: vertical;
}

.ui-select {
	padding-right: var(--space-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888891' stroke-width='2' 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 var(--space-3) center;
	background-size: 1rem;
	cursor: pointer;
}
.ui-select[multiple] { height: auto; padding: var(--space-1); background-image: none; }

/* Input with leading/trailing icon or addon */
.ui-input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.ui-input-group > .ui-input { flex: 1 1 auto; }
.ui-input-group__icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--space-3);
	display: inline-flex;
	align-items: center;
	color: var(--muted-foreground);
	pointer-events: none;
}
.ui-input-group__icon svg { width: 1rem; height: 1rem; }
.ui-input-group__icon ~ .ui-input { padding-left: calc(var(--space-3) + 1.5rem); }
.ui-input-group__icon--end { left: auto; right: var(--space-3); }
.ui-input-group__icon--end ~ .ui-input { padding-left: var(--space-3); padding-right: calc(var(--space-3) + 1.5rem); }
.ui-input-group__action {
	position: absolute;
	top: 50%;
	right: var(--space-1);
	transform: translateY(-50%);
}
.ui-input-group__action ~ .ui-input,
.ui-input-group:has(.ui-input-group__action) > .ui-input { padding-right: calc(var(--control-h-sm) + var(--space-2)); }
.ui-input-group__action .ui-btn { height: calc(var(--control-h) - 8px); min-height: 0; width: calc(var(--control-h) - 8px); }
.ui-input-group__addon {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-3);
	border: 1px solid var(--input);
	background: var(--muted);
	color: var(--muted-foreground);
	font-size: var(--text-sm);
	white-space: nowrap;
}
.ui-input-group__addon:first-child { border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.ui-input-group__addon:last-child { border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ui-input-group__addon:first-child + .ui-input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-input-group > .ui-input:has(+ .ui-input-group__addon) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Checkbox & radio (native input, restyled) */
.ui-checkbox,
.ui-radio {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0 0;
	border: 1px solid var(--input);
	background: var(--input-background);
	color: var(--primary-foreground);
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.ui-checkbox { border-radius: 4px; }
.ui-radio { border-radius: 50%; }
.ui-checkbox::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	transform: scale(0);
	transition: transform var(--duration-fast) ease;
	background: currentColor;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.ui-radio::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	transform: scale(0);
	transition: transform var(--duration-fast) ease;
	background: var(--primary);
}
.ui-checkbox:checked,
.ui-checkbox:indeterminate { background: var(--primary); border-color: var(--primary); }
.ui-checkbox:checked::before { transform: scale(1); }
.ui-checkbox:indeterminate::before { transform: scale(1); clip-path: inset(40% 10%); }
.ui-radio:checked { border-color: var(--primary); }
.ui-radio:checked::before { transform: scale(1); }
.ui-checkbox:focus-visible,
.ui-radio:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-checkbox:disabled,
.ui-radio:disabled { opacity: 0.5; cursor: not-allowed; }

/* Switch: <input type="checkbox" role="switch" class="ui-switch"> */
.ui-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 2.25rem;
	height: 1.25rem;
	margin: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: var(--input);
	cursor: pointer;
	transition: background-color var(--duration) var(--ease-out);
}
.ui-switch::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--background);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration) var(--ease-out);
}
.ui-switch:checked { background: var(--primary); }
.ui-switch:checked::before { transform: translateX(1rem); }
.ui-switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* Choice row: control + label (+ description) */
.ui-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2-5, 0.625rem);
	font-size: var(--text-base);
	color: var(--foreground);
	cursor: pointer;
	line-height: var(--leading-snug);
}
.ui-choice > .ui-switch { margin-top: 0; }
/* Block, not flex: labels mix text with inline spans (names, emails) that must flow as one sentence. */
.ui-choice__text { display: block; min-width: 0; overflow-wrap: anywhere; }
.ui-choice__description { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--muted-foreground); }
@media (max-width: 767px) {
	.ui-choice { min-height: var(--touch-target); align-items: center; }
}

/* Field: label + control + help/error */
.ui-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ui-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ui-field__help { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--muted-foreground); }
.ui-field__error { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--danger-subtle-foreground); font-weight: var(--weight-medium); }
.ui-field__error:empty { display: none; }

.ui-form { display: flex; flex-direction: column; gap: var(--space-5); }
.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.ui-form-grid > .ui-field--full { grid-column: 1 / -1; }
@media (max-width: 639px) { .ui-form-grid { grid-template-columns: minmax(0, 1fr); } }
.ui-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.ui-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ui-fieldset > legend { padding: 0; margin-bottom: var(--space-3); font-weight: var(--weight-semibold); color: var(--foreground); }

/* Settings-style section: description column + fields column */
.ui-form-section {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: var(--space-6) var(--space-10);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--border);
}
.ui-form-section:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 899px) { .ui-form-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* ===========================================================================
 * Card
 * ======================================================================== */
.ui-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: var(--shadow-xs);
}
.ui-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6) 0;
}
.ui-card__header > :first-child { min-width: 0; }
/* Title-only header: centre the action (e.g. "View all") on the title. */
.ui-card__header:not(:has(.ui-card__description)) { align-items: center; }
.ui-card__title {
	margin: 0;
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--card-foreground);
}
.ui-card__description { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--muted-foreground); line-height: var(--leading-snug); }
.ui-card__content { padding: var(--space-5) var(--space-6); flex: 1 1 auto; min-width: 0; }
.ui-card__header + .ui-card__content { padding-top: var(--space-4); }
/* Header with its own divider: give the description room above the line. */
.ui-card__header--divided { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.ui-card__header--divided + .ui-card__content { padding-top: var(--space-5); }
.ui-card__footer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--border);
}
.ui-card__content + .ui-card__footer { margin-top: auto; }
.ui-card--flush > .ui-card__content { padding: 0; }
/* Flush cards drop padding for edge-to-edge tables; a message/empty state in
   their place (no table) still needs the normal card padding. */
.ui-card--flush > .ui-card__content:has(> p:only-child, > .ui-empty:only-child, > .ui-alert:only-child) { padding: var(--space-5) var(--space-6); }
@media (max-width: 767px) {
	.ui-card--flush > .ui-card__content:has(> p:only-child, > .ui-empty:only-child, > .ui-alert:only-child) { padding: var(--space-4); }
}
.ui-card--muted { background: var(--muted); box-shadow: none; }
.ui-card--compact .ui-card__header { padding: var(--space-4) var(--space-4) 0; }
.ui-card--compact .ui-card__content { padding: var(--space-4); }
.ui-card--compact .ui-card__footer { padding: var(--space-3) var(--space-4); }
@media (max-width: 639px) {
	.ui-card__header { padding: var(--space-4) var(--space-4) 0; }
	.ui-card__content { padding: var(--space-4); }
	.ui-card__footer { padding: var(--space-3) var(--space-4); }
}
/* The padding shorthands above (compact, mobile) reset padding-bottom to 0;
   a divided header keeps room between its description and the line. */
.ui-card .ui-card__header--divided { padding-bottom: var(--space-5); }
.ui-card--compact .ui-card__header--divided { padding-bottom: var(--space-4); }
/* A card that is only a header (e.g. a note card) still needs bottom room. */
.ui-card > .ui-card__header:last-child { padding-bottom: var(--space-5); }
@media (max-width: 639px) {
	.ui-card .ui-card__header--divided,
	.ui-card > .ui-card__header:last-child { padding-bottom: var(--space-4); }
}

/* Whole-card link */
a.ui-card,
.ui-card--interactive {
	text-decoration: none;
	color: var(--card-foreground);
	transition: border-color var(--duration) ease, box-shadow var(--duration) ease, transform var(--duration) var(--ease-out);
}
a.ui-card:hover,
.ui-card--interactive:hover {
	color: var(--card-foreground);
	border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 18%);
	box-shadow: var(--shadow-md);
}
a.ui-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Icon chip used in cards/list items */
.ui-icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
.ui-icon-chip svg { width: 1.125rem; height: 1.125rem; }
.ui-icon-chip--brand { background: var(--brand-subtle); color: var(--brand-subtle-foreground); border-color: transparent; }

/* ===========================================================================
 * Table
 * ======================================================================== */
.ui-table-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
}
.ui-table-wrap--scroll { max-height: var(--table-max-h, 70vh); }
.ui-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-base);
	color: var(--foreground);
	caption-side: bottom;
}
.ui-table caption { padding: var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); }
.ui-table th,
.ui-table td {
	/* style.css sets table td { color:#3c4257 }, unreadable in dark mode. */
	color: inherit;
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.ui-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 2.5rem;
	padding-top: 0;
	padding-bottom: 0;
	background: color-mix(in srgb, var(--muted) 70%, var(--card));
	color: var(--muted-foreground);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}
.ui-table tbody tr { transition: background-color var(--duration-fast) ease; }
.ui-table tbody tr:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-table tbody tr[aria-selected="true"],
.ui-table tbody tr.is-selected { background: var(--muted); }
.ui-table .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .ui-table__wrap { white-space: normal; min-width: 14rem; }
.ui-table .ui-table__actions { text-align: right; width: 1%; }
.ui-table .ui-table__check { width: 1%; padding-right: 0; }
.ui-table a:not(.ui-btn) { color: var(--foreground); font-weight: var(--weight-medium); text-decoration: none; }
.ui-table a:not(.ui-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-table--compact th,
.ui-table--compact td { padding: var(--space-2) var(--space-3); }
/* A table in a flush card: the card is the frame (no inner border box). */
.ui-card--flush > .ui-table-wrap,
.ui-card--flush > .ui-card__content > .ui-table-wrap { border: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: transparent; }
/* Edge-to-edge table in a flush card: the outer columns line up with the
   card header text (space-6) instead of sitting 8px further out. */
@media (min-width: 640px) {
	.ui-card--flush .ui-table:not(.ui-table--compact) :is(th, td):first-child { padding-left: var(--space-6); }
	.ui-card--flush .ui-table:not(.ui-table--compact) :is(th, td):last-child { padding-right: var(--space-6); }
}
.ui-table--compact thead th { height: 2.25rem; }

/* Stacked rows on small screens: add data-label="Column" to each td */
@media (max-width: 639px) {
	.ui-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ui-table--stack,
	.ui-table--stack tbody,
	.ui-table--stack tr,
	.ui-table--stack td { display: block; width: 100%; }
	.ui-table--stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
	.ui-table--stack tbody tr:last-child { border-bottom: 0; }
	.ui-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; white-space: normal; text-align: right; }
	.ui-table--stack td::before { content: attr(data-label); color: var(--muted-foreground); font-size: var(--text-sm); text-align: left; }
	.ui-table--stack td.ui-table__actions { justify-content: flex-end; width: 100%; }
}

/* ===========================================================================
 * Badge
 * ======================================================================== */
.ui-badge {
	--badge-bg: var(--primary);
	--badge-fg: var(--primary-foreground);
	--badge-border: transparent;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 1.375rem;
	padding: 0 var(--space-2);
	border: 1px solid var(--badge-border);
	border-radius: var(--radius-full);
	background: var(--badge-bg);
	color: var(--badge-fg);
	font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
	white-space: nowrap;
	vertical-align: middle;
}
.ui-badge svg { width: 0.75rem; height: 0.75rem; }
.ui-badge--secondary { --badge-bg: var(--secondary); --badge-fg: var(--secondary-foreground); }
.ui-badge--outline { --badge-bg: transparent; --badge-fg: var(--foreground); --badge-border: var(--border); }
.ui-badge--success { --badge-bg: var(--success-subtle); --badge-fg: var(--success-subtle-foreground); --badge-border: var(--success-border); }
.ui-badge--warning { --badge-bg: var(--warning-subtle); --badge-fg: var(--warning-subtle-foreground); --badge-border: var(--warning-border); }
.ui-badge--danger  { --badge-bg: var(--danger-subtle); --badge-fg: var(--danger-subtle-foreground); --badge-border: var(--danger-border); }
.ui-badge--info    { --badge-bg: var(--info-subtle); --badge-fg: var(--info-subtle-foreground); --badge-border: var(--info-border); }
.ui-badge--brand   { --badge-bg: var(--brand-subtle); --badge-fg: var(--brand-subtle-foreground); --badge-border: transparent; }
.ui-badge--count { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; justify-content: center; font-variant-numeric: tabular-nums; }
.ui-badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Status dot + text, for dense tables */
.ui-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--foreground); }
.ui-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--status-color, var(--muted-foreground)); }
.ui-status--success { --status-color: var(--success); }
.ui-status--warning { --status-color: var(--warning); }
.ui-status--danger  { --status-color: var(--destructive); }
.ui-status--info    { --status-color: var(--info); }

/* ===========================================================================
 * Alert / callout
 * ======================================================================== */
.ui-alert {
	--alert-bg: var(--card);
	--alert-fg: var(--card-foreground);
	--alert-border: var(--border);
	--alert-icon: var(--foreground);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--alert-border);
	border-radius: var(--radius-lg);
	background: var(--alert-bg);
	color: var(--alert-fg);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
}
.ui-alert__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--alert-icon); }
.ui-alert__icon svg { width: 1rem; height: 1rem; }
.ui-alert__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.ui-alert__title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-base); color: inherit; }
.ui-alert__description { margin: 0; color: inherit; opacity: 0.92; }
.ui-alert__description a,
.ui-alert__title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ui-alert__actions { display: flex; gap: var(--space-2); flex-shrink: 0; align-self: center; }
.ui-alert--info    { --alert-bg: var(--info-subtle); --alert-fg: var(--info-subtle-foreground); --alert-border: var(--info-border); --alert-icon: var(--info-subtle-foreground); }
.ui-alert--success { --alert-bg: var(--success-subtle); --alert-fg: var(--success-subtle-foreground); --alert-border: var(--success-border); --alert-icon: var(--success-subtle-foreground); }
.ui-alert--warning { --alert-bg: var(--warning-subtle); --alert-fg: var(--warning-subtle-foreground); --alert-border: var(--warning-border); --alert-icon: var(--warning-subtle-foreground); }
.ui-alert--danger  { --alert-bg: var(--danger-subtle); --alert-fg: var(--danger-subtle-foreground); --alert-border: var(--danger-border); --alert-icon: var(--danger-subtle-foreground); }
.ui-alert--brand   { --alert-bg: var(--brand-subtle); --alert-fg: var(--brand-subtle-foreground); --alert-border: transparent; --alert-icon: var(--brand-subtle-foreground); }
@media (max-width: 639px) {
	/* Only alerts with an actions row wrap; otherwise the icon would drop onto its own line. */
	.ui-alert:has(> .ui-alert__actions) { flex-wrap: wrap; }
	/* Basis 0 keeps the body on the icon's row; only the actions wrap. */
	.ui-alert:has(> .ui-alert__actions) > .ui-alert__body { flex-basis: 0; }
	.ui-alert__actions { width: 100%; padding-left: calc(1rem + var(--space-3)); }
}

/* ===========================================================================
 * Tabs  (behaviour: ui.js [data-ui-tabs])
 * ======================================================================== */
.ui-tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-tabs__list {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	width: fit-content;
	padding: 3px;
	border-radius: var(--radius-lg);
	background: var(--muted);
	color: var(--muted-foreground);
	overflow-x: auto;
	scrollbar-width: none;
}
.ui-tabs__list::-webkit-scrollbar { display: none; }
.ui-tabs__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1-5);
	height: calc(var(--control-h) - 6px);
	padding: 0 var(--space-3);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--muted-foreground);
	font: var(--weight-medium) var(--text-base) / 1 var(--font-sans);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.ui-tabs__trigger:hover { color: var(--foreground); }
.ui-tabs__trigger[aria-selected="true"],
.ui-tabs__trigger[aria-current="page"],
.ui-tabs__trigger.is-active {
	background: var(--background);
	color: var(--foreground);
	border-color: var(--border);
	box-shadow: var(--shadow-xs);
}
.ui-tabs__trigger svg { width: 1rem; height: 1rem; }
.ui-tabs__panel[hidden] { display: none; }
.ui-tabs__panel:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Underline variant (page-level navigation) */
.ui-tabs--underline .ui-tabs__list {
	width: 100%;
	padding: 0;
	gap: var(--space-4);
	border-radius: 0;
	background: transparent;
	border-bottom: 1px solid var(--border);
}
.ui-tabs--underline .ui-tabs__trigger {
	height: var(--control-h-lg);
	padding: 0 var(--space-1);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 -2px 0 transparent;
}
.ui-tabs--underline .ui-tabs__trigger[aria-selected="true"],
.ui-tabs--underline .ui-tabs__trigger[aria-current="page"],
.ui-tabs--underline .ui-tabs__trigger.is-active {
	background: transparent;
	box-shadow: inset 0 -2px 0 var(--foreground);
}

/* ===========================================================================
 * Dropdown menu  (behaviour: ui.js [data-ui-dropdown])
 * ======================================================================== */
.ui-dropdown { position: relative; display: inline-flex; }
.ui-dropdown__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: var(--z-dropdown);
	min-width: 12rem;
	max-width: min(20rem, calc(100vw - 2rem));
	max-height: min(24rem, 70vh);
	overflow-y: auto;
	margin: 0;
	padding: var(--space-1);
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lg);
	transform-origin: top left;
	animation: ui-pop-in var(--duration) var(--ease-out);
}
.ui-dropdown__menu[hidden] { display: none; }
.ui-dropdown__menu--end { left: auto; right: 0; transform-origin: top right; }
.ui-dropdown__menu--up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.ui-dropdown__menu--up.ui-dropdown__menu--end { transform-origin: bottom right; }
.ui-dropdown__menu--full { left: 0; right: 0; min-width: 0; max-width: none; }
.ui-dropdown__label {
	padding: var(--space-1-5) var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--muted-foreground);
}
.ui-dropdown__separator { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border); }
.ui-dropdown__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 2rem;
	padding: var(--space-1-5) var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--popover-foreground);
	font: var(--weight-normal) var(--text-base) / 1.3 var(--font-sans);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	outline: none;
}
.ui-dropdown__item svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.ui-dropdown__item:hover,
.ui-dropdown__item:focus,
.ui-dropdown__item:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: none; }
.ui-dropdown__item:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.ui-dropdown__item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.ui-dropdown__item--danger,
.ui-dropdown__item--danger svg { color: var(--danger-subtle-foreground); }
.ui-dropdown__item--danger:hover,
.ui-dropdown__item--danger:focus { background: var(--danger-subtle); color: var(--danger-subtle-foreground); }
.ui-dropdown__shortcut { margin-left: auto; font-size: var(--text-xs); color: var(--muted-foreground); letter-spacing: 0.05em; }
/* Check mark for menuitemradio / menuitemcheckbox */
.ui-dropdown__check { margin-left: auto; display: inline-flex; visibility: hidden; color: var(--foreground); }
.ui-dropdown__item[aria-checked="true"] .ui-dropdown__check { visibility: visible; }
.ui-dropdown__item[aria-checked="true"] .ui-dropdown__check svg { color: var(--foreground); }
@media (max-width: 767px) {
	.ui-dropdown__item { min-height: var(--touch-target); }
}

@keyframes ui-pop-in {
	from { opacity: 0; transform: scale(0.97) translateY(-2px); }
	to { opacity: 1; transform: none; }
}

/* ===========================================================================
 * Dialog (modal)  (behaviour: ui.js [data-ui-dialog-open])
 * Separate from the legacy MicroModal .artbees-modal, which keeps working.
 * ======================================================================== */
.ui-dialog {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	color: var(--foreground);
}
.ui-dialog[hidden] { display: none; }
.ui-dialog__overlay {
	position: fixed;
	inset: 0;
	background: var(--overlay);
	backdrop-filter: blur(2px);
	animation: ui-fade-in var(--duration) ease;
}
.ui-dialog__content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--dialog-width, 32rem);
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-xl);
	animation: ui-dialog-in var(--duration-slow) var(--ease-out);
}
.ui-dialog--sm { --dialog-width: 24rem; }
.ui-dialog--lg { --dialog-width: 42rem; }
.ui-dialog--xl { --dialog-width: 56rem; }
.ui-dialog__header { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-6) var(--space-6) 0; padding-right: var(--space-12); }
.ui-dialog__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--foreground); }
.ui-dialog__description { margin: 0; font-size: var(--text-base); color: var(--muted-foreground); }
.ui-dialog__body { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1 1 auto; }
.ui-dialog__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--muted) 45%, var(--popover));
}
.ui-dialog__close { position: absolute; top: var(--space-3); right: var(--space-3); }
@media (max-width: 639px) {
	.ui-dialog { align-items: flex-end; padding: 0; }
	.ui-dialog__content { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; animation-name: ui-sheet-up; }
	.ui-dialog__footer { flex-direction: column-reverse; align-items: stretch; }
	.ui-dialog__footer .ui-btn { width: 100%; }
}

@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ui-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* Prevent background scroll while a dialog/sheet is open (set by ui.js) */
html.ui-scroll-locked { overflow: hidden; }

/* ===========================================================================
 * Sheet / drawer  (same API as dialog: data-ui-dialog-open="id")
 * ======================================================================== */
.ui-sheet { position: fixed; inset: 0; z-index: var(--z-modal); color: var(--foreground); }
.ui-sheet[hidden] { display: none; }
.ui-sheet__overlay { position: fixed; inset: 0; background: var(--overlay); animation: ui-fade-in var(--duration) ease; }
.ui-sheet__content {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--sheet-width, 28rem), 100vw);
	background: var(--popover);
	color: var(--popover-foreground);
	border-left: 1px solid var(--border);
	box-shadow: var(--shadow-xl);
	animation: ui-sheet-right var(--duration-slow) var(--ease-out);
}
.ui-sheet--left .ui-sheet__content { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); animation-name: ui-sheet-left; }
.ui-sheet--lg { --sheet-width: 40rem; }
.ui-sheet__header { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-6); padding-right: var(--space-12); border-bottom: 1px solid var(--border); }
.ui-sheet__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-sheet__description { margin: 0; color: var(--muted-foreground); }
.ui-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6); }
.ui-sheet__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.ui-sheet__close { position: absolute; top: var(--space-4); right: var(--space-4); }
@keyframes ui-sheet-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ui-sheet-left { from { transform: translateX(-100%); } to { transform: none; } }

/* ===========================================================================
 * Toast  (window.SellkitUI.toast(...))
 * ======================================================================== */
.ui-toaster {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-2);
	width: min(24rem, calc(100vw - 2rem));
	pointer-events: none;
}
.ui-toast {
	--toast-accent: var(--foreground);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lg);
	pointer-events: auto;
	animation: ui-toast-in var(--duration-slow) var(--ease-out);
}
.ui-toast.is-leaving { animation: ui-toast-out var(--duration) ease forwards; }
.ui-toast__icon { display: inline-flex; margin-top: 2px; color: var(--toast-accent); flex-shrink: 0; }
.ui-toast__icon svg { width: 1rem; height: 1rem; }
.ui-toast__body { flex: 1 1 auto; min-width: 0; }
.ui-toast__title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-base); }
.ui-toast__description { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-toast__close { margin: -4px -8px -4px 0; }
.ui-toast--success { --toast-accent: var(--success); }
.ui-toast--warning { --toast-accent: var(--warning); }
.ui-toast--danger { --toast-accent: var(--destructive); }
.ui-toast--info { --toast-accent: var(--info); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(16px); } }
@media (max-width: 639px) {
	.ui-toaster { left: var(--space-4); right: var(--space-4); width: auto; bottom: var(--space-4); }
}

/* ===========================================================================
 * Tooltip (CSS only; content is also exposed via aria-describedby)
 * ======================================================================== */
.ui-tooltip { position: relative; display: inline-flex; }
.ui-tooltip__content {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	z-index: var(--z-tooltip);
	width: max-content;
	max-width: 16rem;
	padding: var(--space-1-5) var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--contrast);
	color: var(--contrast-foreground);
	font: var(--weight-medium) var(--text-xs) / 1.35 var(--font-sans);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 2px);
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, visibility var(--duration-fast);
}
.ui-tooltip--bottom .ui-tooltip__content { bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -2px); }
.ui-tooltip--right .ui-tooltip__content { bottom: auto; top: 50%; left: calc(100% + 6px); transform: translate(-2px, -50%); }
.ui-tooltip:hover .ui-tooltip__content,
.ui-tooltip:focus-within .ui-tooltip__content { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 300ms; }
.ui-tooltip--right:hover .ui-tooltip__content,
.ui-tooltip--right:focus-within .ui-tooltip__content { transform: translate(0, -50%); }
@media (hover: none) { .ui-tooltip:hover .ui-tooltip__content { opacity: 0; visibility: hidden; } }

/* ===========================================================================
 * Avatar
 * ======================================================================== */
.ui-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--avatar-size, 2rem);
	height: var(--avatar-size, 2rem);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--muted);
	color: var(--muted-foreground);
	font: var(--weight-medium) calc(var(--avatar-size, 2rem) * 0.38) / 1 var(--font-sans);
	text-transform: uppercase;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-avatar--sm { --avatar-size: 1.5rem; }
.ui-avatar--lg { --avatar-size: 2.75rem; }
.ui-avatar--xl { --avatar-size: 4rem; }
.ui-avatar--square { border-radius: var(--radius-md); }
.ui-avatar-stack { display: inline-flex; }
.ui-avatar-stack > .ui-avatar { box-shadow: 0 0 0 2px var(--background); }
.ui-avatar-stack > .ui-avatar + .ui-avatar { margin-left: -0.5rem; }

/* ===========================================================================
 * Skeleton
 * ======================================================================== */
.ui-skeleton {
	display: block;
	height: var(--skeleton-h, 1rem);
	width: var(--skeleton-w, 100%);
	border-radius: var(--radius-md);
	background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 37%, var(--skeleton) 63%);
	background-size: 400% 100%;
	animation: ui-shimmer 1.4s ease infinite;
}
.ui-skeleton--text { --skeleton-h: 0.75rem; border-radius: var(--radius-sm); }
.ui-skeleton--circle { border-radius: 50%; width: var(--skeleton-h, 2rem); height: var(--skeleton-h, 2rem); }
@keyframes ui-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; } }

/* ===========================================================================
 * Empty state
 * ======================================================================== */
.ui-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-12) var(--space-6);
	border: 1px dashed var(--border);
	border-radius: var(--radius-xl);
	text-align: center;
	color: var(--foreground);
}
.ui-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-2);
	border-radius: var(--radius-lg);
	background: var(--muted);
	color: var(--muted-foreground);
}
.ui-empty__icon svg { width: 1.5rem; height: 1.5rem; }
.ui-empty__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-empty__description { margin: 0; max-width: 28rem; color: var(--muted-foreground); }
.ui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.ui-empty--plain { border: 0; padding: var(--space-8) var(--space-4); }

/* ===========================================================================
 * Pagination
 * ======================================================================== */
.ui-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ui-pagination__summary { font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-pagination__list { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ui-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-width: var(--control-h);
	height: var(--control-h);
	padding: 0 var(--space-2-5, 0.625rem);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--foreground);
	font: var(--weight-medium) var(--text-base) / 1 var(--font-sans);
	text-decoration: none;
	background: transparent;
	cursor: pointer;
}
.ui-pagination__link:hover { background: var(--accent); color: var(--accent-foreground); }
.ui-pagination__link[aria-current="page"] { border-color: var(--border); background: var(--background); box-shadow: var(--shadow-xs); }
.ui-pagination__link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.ui-pagination__link svg { width: 1rem; height: 1rem; }
.ui-pagination__ellipsis { min-width: var(--control-h); text-align: center; color: var(--muted-foreground); }

/* ===========================================================================
 * Breadcrumb
 * ======================================================================== */
.ui-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.ui-breadcrumb li + li::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	background: currentColor;
	opacity: 0.6;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--foreground); }
.ui-breadcrumb [aria-current="page"] { color: var(--foreground); font-weight: var(--weight-medium); }

/* ===========================================================================
 * Separator, kbd, code
 * ======================================================================== */
.ui-separator { height: 1px; width: 100%; margin: 0; border: 0; background: var(--border); flex-shrink: 0; }
.ui-separator--vertical { width: 1px; height: auto; align-self: stretch; }
.ui-separator--label {
	display: flex; align-items: center; gap: var(--space-3); height: auto; background: none;
	font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em;
}
.ui-separator--label::before,
.ui-separator--label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

.ui-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3125rem;
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: var(--radius-sm);
	background: var(--muted);
	color: var(--muted-foreground);
	font: var(--weight-medium) 0.6875rem/1 var(--font-mono);
}

.ui-code {
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	background: var(--muted);
	color: var(--foreground);
	font-family: var(--font-mono);
	font-size: 0.875em;
	word-break: break-word;
}
.ui-code-block {
	position: relative;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 60%, var(--card));
	color: var(--foreground);
	overflow: hidden;
}
.ui-code-block pre {
	margin: 0;
	padding: var(--space-4);
	overflow-x: auto;
	font: var(--weight-normal) var(--text-sm) / 1.6 var(--font-mono);
	tab-size: 2;
	white-space: pre;
}
.ui-code-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-4);
	border-bottom: 1px solid var(--border);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ui-code-block > .ui-copy { position: absolute; top: var(--space-2); right: var(--space-2); }

/* Copy button feedback (ui.js [data-ui-copy]) */
.ui-copy .ui-copy__done { display: none; }
.ui-copy.is-copied .ui-copy__idle { display: none; }
.ui-copy.is-copied .ui-copy__done { display: inline-flex; }

/* ===========================================================================
 * Progress
 * ======================================================================== */
.ui-progress {
	position: relative;
	width: 100%;
	height: var(--progress-h, 0.5rem);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--muted);
}
.ui-progress__bar {
	display: block;
	height: 100%;
	width: var(--value, 0%);
	border-radius: inherit;
	background: var(--progress-color, var(--primary));
	transition: width var(--duration-slow) var(--ease-out);
}
.ui-progress--brand { --progress-color: var(--brand); }
.ui-progress--success { --progress-color: var(--success); }
.ui-progress--warning { --progress-color: var(--warning); }
.ui-progress--danger { --progress-color: var(--destructive); }
.ui-progress--sm { --progress-h: 0.375rem; }

/* ===========================================================================
 * Stat / KPI tile
 * ======================================================================== */
.ui-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-4); }
.ui-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: var(--shadow-xs);
}
.ui-stat__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ui-stat__label { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted-foreground); }
.ui-stat__icon { color: var(--muted-foreground); display: inline-flex; }
.ui-stat__icon svg { width: 1rem; height: 1rem; }
.ui-stat__value {
	margin: var(--space-1) 0 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: 1.15;
	letter-spacing: var(--tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--card-foreground);
}
.ui-stat__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-stat__delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.ui-stat__delta--up { color: var(--success-subtle-foreground); }
.ui-stat__delta--down { color: var(--danger-subtle-foreground); }
.ui-stat--compact { padding: var(--space-4); }
.ui-stat--compact .ui-stat__value { font-size: var(--text-xl); }

/* ===========================================================================
 * Description list (detail pages)
 * ======================================================================== */
.ui-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); margin: 0; }
.ui-dl > dt,
.ui-dl > dd { margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.ui-dl > dt { color: var(--muted-foreground); font-size: var(--text-base); padding-right: var(--space-4); }
.ui-dl > dd { color: var(--foreground); min-width: 0; overflow-wrap: anywhere; }
.ui-dl > :nth-last-child(-n + 2) { border-bottom: 0; }
@media (max-width: 479px) {
	.ui-dl { grid-template-columns: minmax(0, 1fr); }
	.ui-dl > dt { padding-bottom: 0; border-bottom: 0; }
	.ui-dl > dd { padding-top: var(--space-1); }
}

/* List with dividers (activity feeds, link lists) */
.ui-list { margin: 0; padding: 0; list-style: none; }
.ui-list > li { border-bottom: 1px solid var(--border); }
.ui-list > li:last-child { border-bottom: 0; }
.ui-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	color: var(--foreground);
	text-decoration: none;
	min-width: 0;
}
a.ui-list__item:hover { color: var(--foreground); }
a.ui-list__item:hover .ui-list__title { text-decoration: underline; text-underline-offset: 3px; }
.ui-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ui-list__title { font-weight: var(--weight-medium); color: var(--foreground); line-height: var(--leading-snug); }
.ui-list__meta { font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-list__trail { flex-shrink: 0; color: var(--muted-foreground); display: inline-flex; }
.ui-list__trail svg { width: 1rem; height: 1rem; }
.ui-list--inset > li { padding: 0 var(--space-6); }
@media (max-width: 639px) { .ui-list--inset > li { padding: 0 var(--space-4); } }

/* ===========================================================================
 * Theme toggle (segmented)  (behaviour: ui.js [data-ui-theme-set])
 * ======================================================================== */
.ui-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background: var(--background);
}
.ui-theme-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.ui-theme-toggle__btn svg { width: 0.9375rem; height: 0.9375rem; }
.ui-theme-toggle__btn:hover { color: var(--foreground); }
.ui-theme-toggle__btn[aria-pressed="true"] { background: var(--secondary); color: var(--foreground); box-shadow: var(--shadow-xs); }
.ui-theme-toggle__btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@media (max-width: 767px) {
	.ui-theme-toggle__btn { width: 2.5rem; height: 2.5rem; }
}

/* Icon reflecting the current choice (for a single trigger button) */
.ui-theme-icon,
.ui-btn > .ui-theme-icon { display: none; }
:root[data-theme="light"] .ui-theme-icon--light,
:root[data-theme="dark"] .ui-theme-icon--dark,
:root[data-theme="system"] .ui-theme-icon--system,
:root:not([data-theme]) .ui-theme-icon--system { display: inline-flex; }

/* Suppress transitions for the frame in which the theme flips (ui.js) */
.ui-theme-switching *,
.ui-theme-switching *::before,
.ui-theme-switching *::after { transition: none !important; }

/* ===========================================================================
 * Form response alert (partials/form-alert-message.php → .ui-alert.sellkit-alert)
 * submit_form.js / frontend.js add .sellkit-alert-success / -error and show
 * it with inline display:flex; .sellkit-form-ajax-response keeps it hidden
 * until then. The status icon is a CSS mask (::before), so the markup and
 * the JS that writes into .js__form-alert-message-text stay unchanged.
 * ======================================================================== */
.ui-alert.sellkit-alert {
	--alert-bg: var(--info-subtle);
	--alert-fg: var(--info-subtle-foreground);
	--alert-border: var(--info-border);
	--alert-mask: url(../../icons/general/info-circle.svg);
	gap: var(--space-3);
	margin: var(--space-3) 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--alert-border);
	border-radius: var(--radius-lg);
	background: var(--alert-bg);
	color: var(--alert-fg);
	box-shadow: none;
	font-size: var(--text-base);
	max-width: none;
}
.ui-alert.sellkit-alert::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: var(--alert-mask) center / contain no-repeat;
	mask: var(--alert-mask) center / contain no-repeat;
}
.ui-alert.sellkit-alert.sellkit-alert-success { --alert-bg: var(--success-subtle); --alert-fg: var(--success-subtle-foreground); --alert-border: var(--success-border); --alert-mask: url(../../icons/general/check-circle.svg); }
.ui-alert.sellkit-alert.sellkit-alert-error { --alert-bg: var(--danger-subtle); --alert-fg: var(--danger-subtle-foreground); --alert-border: var(--danger-border); --alert-mask: url(../../icons/alerts_feedback/alert-circle.svg); }
.ui-alert.sellkit-alert.sellkit-alert-warning { --alert-bg: var(--warning-subtle); --alert-fg: var(--warning-subtle-foreground); --alert-border: var(--warning-border); --alert-mask: url(../../icons/alerts_feedback/alert-triangle.svg); }
.ui-alert.sellkit-alert .sellkit-alert-text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: inherit;
	overflow-wrap: anywhere;
}
.ui-alert.sellkit-alert .sellkit-alert-text ul { margin: 0; padding-left: 1.125rem; }
.ui-alert.sellkit-alert .sellkit-alert-text a { color: inherit; text-decoration: underline; }

/* ===========================================================================
 * Legacy MicroModal frame (partials/modal-template.php → .ui-modal)
 * Behaviour stays with modal.min.js (data-micromodal-*). Only the frame is
 * restyled; content inside is bridged by legacy.css via .ui-scope.
 * ======================================================================== */
.artbees-modal__overlay { z-index: var(--z-modal); }
.ui-modal .artbees-modal__overlay {
	padding: var(--space-4);
	background: var(--overlay);
}
.ui-modal .artbees-modal__container {
	width: 100%;
	min-width: 0;
	max-width: 36rem;
	max-height: calc(100dvh - 2rem);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-xl);
}
.ui-modal .artbees-modal__container.artbees-modal-full { max-width: min(80rem, 100%); min-width: 0; min-height: 0; height: calc(100dvh - 2rem); }
.ui-modal .artbees-modal__header {
	gap: var(--space-3);
	padding: var(--space-5) var(--space-12) var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--border);
}
.ui-modal .artbees-modal-icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--background);
	box-shadow: var(--shadow-xs);
	color: var(--foreground);
}
.ui-modal .artbees-modal-icon svg { width: 1.25rem; height: 1.25rem; }
.ui-modal .artbees-modal-icon svg path { stroke: currentColor; }
.ui-modal .artbees-modal-icon-brand { color: var(--foreground); } /* monochrome: colour only where it carries meaning */
.ui-modal .artbees-modal-icon-note { color: var(--muted-foreground); }
.ui-modal .artbees-modal-icon-red { color: var(--danger-subtle-foreground); background: var(--danger-subtle); border-color: var(--danger-border); }
.ui-modal .artbees-modal-icon-success { color: var(--success-subtle-foreground); background: var(--success-subtle); border-color: var(--success-border); }
.ui-modal .artbees-modal__title {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.35;
	letter-spacing: var(--tracking-tight);
	color: var(--foreground);
}
.ui-modal .artbees-modal__desc { margin-top: 2px; font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--muted-foreground); }
.ui-modal .artbees-modal__close {
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h-sm);
	height: var(--control-h-sm);
	padding: 0; /* legacy global button padding */
	border-radius: var(--radius-md);
	background: transparent none;
	color: var(--muted-foreground);
	cursor: pointer;
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.ui-modal .artbees-modal__close:hover { background: var(--accent); color: var(--foreground); }
.ui-modal .artbees-modal__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-modal .artbees-modal__close svg { width: 1.125rem; height: 1.125rem; pointer-events: none; } /* MicroModal checks target/parent */
.ui-modal .artbees-modal__close svg path { stroke: currentColor; }
.ui-modal .artbees-modal__content { padding: var(--space-5) var(--space-6); color: var(--popover-foreground); }
.ui-modal .artbees-modal-full .artbees-modal__content { height: auto; max-height: none; flex: 1 1 auto; overflow-y: auto; }
.ui-modal .artbees-modal__footer {
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--muted) 45%, var(--popover));
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.ui-modal .artbees-modal__footer .button-group { gap: var(--space-2); margin-left: auto; }
.ui-modal .artbees-modal-more-link { color: var(--muted-foreground); font-size: var(--text-sm); }
.ui-modal .artbees-modal-more-link:hover { color: var(--foreground); }
.ui-modal .artbees-modal-more-link svg path { stroke: currentColor; }
@media (max-width: 639px) {
	.ui-modal .artbees-modal__overlay { align-items: flex-end; padding: 0; }
	.ui-modal .artbees-modal__container { max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
	.ui-modal .artbees-modal__header { padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); }
	.ui-modal .artbees-modal__content { padding: var(--space-4); }
	.ui-modal .artbees-modal__footer { padding: var(--space-3) var(--space-4); border-radius: 0; }
	.ui-modal .artbees-modal__close { width: var(--touch-target); height: var(--touch-target); top: var(--space-2); right: var(--space-2); }
}

/* Password visibility toggle (ui.js [data-ui-password-toggle]) */
.ui-pw-toggle .ui-pw-toggle__hide { display: none; }
.ui-pw-toggle[aria-pressed="true"] .ui-pw-toggle__show { display: none; }
.ui-pw-toggle[aria-pressed="true"] .ui-pw-toggle__hide { display: inline-flex; }

/* Trailing arrow inside a link card */
.ui-card__trail { display: inline-flex; flex-shrink: 0; color: var(--muted-foreground); transition: transform var(--duration) var(--ease-out), color var(--duration-fast) ease; }
.ui-card__trail svg { width: 1rem; height: 1rem; }
a.ui-card:hover .ui-card__trail { color: var(--foreground); transform: translateX(2px); }

/* Thumbnail used in media lists */
.ui-thumb {
	flex-shrink: 0;
	width: var(--thumb-w, 4.5rem);
	aspect-ratio: var(--thumb-ratio, 4 / 3);
	overflow: hidden;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--muted) center / cover no-repeat;
}

/* ===========================================================================
 * Compatibility: ui-* classes added next to legacy form classes
 * ======================================================================== */
.ui-alert.sellkit-form-ajax-response { display: none; } /* JS shows it with inline display:flex */
.ui-field { align-items: stretch; }
.ui-field.form-group { margin-bottom: 0; }
.ui-field .ui-label.sellkit-ticket-field-label { flex-direction: column; align-items: flex-start; }
.ui-field .sellkit-form-group-input,
.ui-field .artbees-form-group-input { min-width: 0; width: 100%; max-width: none; } /* legacy sets fixed widths */
/* ui-* controls that keep the legacy .form-control / .sellkit-text-input class
   (JS hooks): style.css sets border:none !important there and draws the border
   as a box-shadow, so the border has to be restored with !important. */
:is(.ui-input, .ui-textarea, .ui-select):is(.form-control, .sellkit-text-input) { border: 1px solid var(--input) !important; }
:is(.ui-input, .ui-textarea, .ui-select):is(.form-control, .sellkit-text-input):hover { border-color: color-mix(in srgb, var(--input) 70%, var(--foreground)) !important; }
:is(.ui-input, .ui-textarea, .ui-select):is(.form-control, .sellkit-text-input):focus { border-color: var(--ring) !important; }
:is(.ui-input, .ui-textarea, .ui-select):is(.form-control, .sellkit-text-input):is(.is-error, [aria-invalid="true"]) { border-color: var(--destructive) !important; }
/* Legacy inline validation message written by submit_form.js after an .is-required field. */
.ui-field .sellkit-input-error-msg { margin: 0; font-size: var(--text-sm); color: var(--danger-subtle-foreground); }
/* …which lands inside .ui-input-group when the field has an action button. */
.ui-input-group:has(> .sellkit-input-error-msg) { flex-wrap: wrap; }
.ui-input-group > .sellkit-input-error-msg { flex: 1 0 100%; margin-top: var(--space-2); }
.ui-input-group:has(> .sellkit-input-error-msg) > .ui-input-group__action { top: calc(var(--control-h) / 2); }

/* ===========================================================================
 * Hues + tinted icon tile
 * ---------------------------------------------------------------------------
 * .ui-hue--{purple|violet|blue|sky|teal|emerald|green|amber|orange|red|pink|slate}
 * sets --hue / --hue-fg on any element; components (icon tile, list row,
 * stat, nav item) read them. Hue meaning map: docs/ui-system.md.
 * ======================================================================== */
.ui-hue--purple,  .ui-icon-tile--purple  { --hue: var(--hue-purple);  --hue-fg: var(--hue-purple-fg); }
.ui-hue--violet,  .ui-icon-tile--violet  { --hue: var(--hue-violet);  --hue-fg: var(--hue-violet-fg); }
.ui-hue--blue,    .ui-icon-tile--blue    { --hue: var(--hue-blue);    --hue-fg: var(--hue-blue-fg); }
.ui-hue--sky,     .ui-icon-tile--sky     { --hue: var(--hue-sky);     --hue-fg: var(--hue-sky-fg); }
.ui-hue--teal,    .ui-icon-tile--teal    { --hue: var(--hue-teal);    --hue-fg: var(--hue-teal-fg); }
.ui-hue--emerald, .ui-icon-tile--emerald { --hue: var(--hue-emerald); --hue-fg: var(--hue-emerald-fg); }
.ui-hue--green,   .ui-icon-tile--green   { --hue: var(--hue-green);   --hue-fg: var(--hue-green-fg); }
.ui-hue--amber,   .ui-icon-tile--amber   { --hue: var(--hue-amber);   --hue-fg: var(--hue-amber-fg); }
.ui-hue--orange,  .ui-icon-tile--orange  { --hue: var(--hue-orange);  --hue-fg: var(--hue-orange-fg); }
.ui-hue--red,     .ui-icon-tile--red     { --hue: var(--hue-red);     --hue-fg: var(--hue-red-fg); }
.ui-hue--pink,    .ui-icon-tile--pink    { --hue: var(--hue-pink);    --hue-fg: var(--hue-pink-fg); }
.ui-hue--slate,   .ui-icon-tile--slate   { --hue: var(--hue-slate);   --hue-fg: var(--hue-slate-fg); }

.ui-icon-tile {
	--tile-size: 2.25rem;  /* md = 36px */
	--tile-icon: 1.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--tile-size);
	height: var(--tile-size);
	border: 1px solid color-mix(in srgb, var(--hue, var(--hue-slate)) var(--hue-edge), transparent);
	border-radius: calc(var(--tile-size) * 0.28);
	background: color-mix(in srgb, var(--hue, var(--hue-slate)) var(--hue-tint), transparent);
	color: var(--hue-fg, var(--hue-slate-fg));
}
.ui-icon-tile svg { width: var(--tile-icon); height: var(--tile-icon); }
.ui-icon-tile svg path { stroke: currentColor; }
.ui-icon-tile--sm { --tile-size: 1.75rem; --tile-icon: 0.875rem; }
.ui-icon-tile--lg { --tile-size: 2.75rem; --tile-icon: 1.375rem; }

/* Coloured inline icon (no tile) */
.ui-hue-icon { color: var(--hue-fg, currentColor); display: inline-flex; }

/* ===========================================================================
 * Chip (subtle bordered pill for metadata, e.g. "↰ Follow-up of #123")
 * ======================================================================== */
.ui-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	height: 1.5rem;
	padding: 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--muted) 60%, transparent);
	color: var(--muted-foreground);
	font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}
.ui-chip svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
a.ui-chip:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 20%); }
.ui-chip[class*="ui-hue--"] {
	border-color: color-mix(in srgb, var(--hue) var(--hue-edge), transparent);
	background: color-mix(in srgb, var(--hue) var(--hue-tint), transparent);
	color: var(--hue-fg);
}

/* ===========================================================================
 * List row (tile + title + subtitle + optional chip/trailing; hairline dividers)
 * ======================================================================== */
.ui-list-rows { margin: 0; padding: 0; list-style: none; }
.ui-list-rows > li + li { border-top: 1px solid var(--border); }
.ui-list-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	color: var(--foreground);
	text-decoration: none;
	transition: background-color var(--duration-fast) ease;
}
a.ui-list-row:hover,
button.ui-list-row:hover,
.ui-list-row--interactive:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--foreground); }
a.ui-list-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
button.ui-list-row { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ui-list-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ui-list-row__title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--foreground); overflow: hidden; text-overflow: ellipsis; }
.ui-list-row__subtitle { font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-snug); }
.ui-list-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin-top: var(--space-1); }
.ui-list-row__trail { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.ui-list-row__trail svg { width: 1rem; height: 1rem; }
.ui-list-row--flush { padding-left: 0; padding-right: 0; }
@media (max-width: 767px) { .ui-list-row { min-height: var(--touch-target); } }

/* ===========================================================================
 * Colour accents for stats/cards
 * ======================================================================== */
.ui-stat[class*="ui-hue--"] .ui-stat__icon { color: var(--hue-fg); }
.ui-stat--accent { position: relative; overflow: hidden; }
.ui-stat--accent::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--hue, var(--primary));
}
.ui-stat .ui-icon-tile { margin-left: auto; }
.ui-card--hue { border-color: color-mix(in srgb, var(--hue) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 7%, var(--card)), var(--card) 60%); }

/* ===========================================================================
 * Shortcut card (link card: tile + title + description + →/↗ arrow)
 * Arrow convention: → internal link, ↗ external link (opens new tab).
 * ======================================================================== */
a.ui-card.ui-shortcut,
.ui-shortcut {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
}
.ui-shortcut__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.ui-shortcut__title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--card-foreground); }
.ui-shortcut__description { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--muted-foreground); }
.ui-shortcut__arrow { align-self: flex-start; margin-top: 2px; }
a.ui-shortcut:hover .ui-icon-tile { border-color: color-mix(in srgb, var(--hue) 50%, transparent); }
a.ui-card:hover .ui-card__trail:has(+ .ui-sr-only),
a.ui-card[target="_blank"]:hover .ui-card__trail { transform: translate(2px, -2px); }
.ui-card > .ui-list-rows:last-child { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); overflow: hidden; }

/* ===========================================================================
 * Media row (thumbnail + text), e.g. the Recent Posts list.
 * Thumbnail is 11rem wide (4:3) on desktop; stacks full-width ≤639px.
 * ======================================================================== */
.ui-media { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) 0; min-width: 0; }
.ui-media__thumb {
	flex: 0 0 auto;
	display: block;
	width: var(--media-w, 11rem);
	aspect-ratio: var(--media-ratio, 4 / 3);
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--muted);
}
.ui-media__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.ui-media:hover .ui-media__thumb img { transform: scale(1.02); }
.ui-media__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 auto; padding-top: var(--space-1); }
.ui-media__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.ui-media__title a { color: var(--foreground); text-decoration: none; }
.ui-media__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
	.ui-media { flex-direction: column; gap: var(--space-3); }
	.ui-media__thumb { width: 100%; }
}

/* ===========================================================================
 * Password strength meter (ui.js: data-ui-password-strength).
 * Four bars + label, then the rule checklist; levels 0–4 set by JS.
 * ======================================================================== */
.ui-pw-meter { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.ui-pw-meter__row { display: flex; align-items: center; gap: var(--space-3); }
.ui-pw-meter__bars { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.ui-pw-meter__bars span { height: 0.375rem; border-radius: 999px; background: var(--muted); transition: background-color var(--duration-fast, 150ms) ease; }
.ui-pw-meter__label { min-width: 3.5rem; text-align: right; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-pw-meter { --pw-color: var(--destructive); }
.ui-pw-meter[data-level="2"] { --pw-color: var(--warning); }
.ui-pw-meter[data-level="3"],
.ui-pw-meter[data-level="4"] { --pw-color: var(--success); }
.ui-pw-meter[data-level="1"] .ui-pw-meter__bars span:nth-child(-n+1),
.ui-pw-meter[data-level="2"] .ui-pw-meter__bars span:nth-child(-n+2),
.ui-pw-meter[data-level="3"] .ui-pw-meter__bars span:nth-child(-n+3),
.ui-pw-meter[data-level="4"] .ui-pw-meter__bars span { background: var(--pw-color); }
.ui-pw-meter__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.ui-pw-meter__check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-pw-meter__dot { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: 999px; border: 1.5px solid var(--border-strong, var(--border)); position: relative; transition: background-color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease; }
.ui-pw-meter__check.is-met { color: var(--foreground); }
.ui-pw-meter__check.is-met .ui-pw-meter__dot { background: var(--success); border-color: var(--success); }
.ui-pw-meter__check.is-met .ui-pw-meter__dot::after {
	content: ""; position: absolute; left: 0.34rem; top: 0.17rem; width: 0.28rem; height: 0.52rem;
	border: solid var(--success-foreground, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ui-pw-meter__error { margin: 0; font-size: var(--text-sm); color: var(--destructive); }
@media (max-width: 420px) { .ui-pw-meter__checks { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ui-pw-meter__bars span, .ui-pw-meter__dot { transition: none; } }

/* Row being deleted (set by frontend.js on customer and staff tables). */
tr.is-deleting,
tr.is-deleting > td { background: var(--danger-subtle) !important; color: var(--danger-subtle-foreground); }
tr.is-deleting { opacity: 0.75; pointer-events: none; }

/* ===========================================================================
 * Custom dropdown (ui.js enhances every native <select>; see docs/ui-system.md).
 * The native select stays in .ui-dd, visually hidden but focusable.
 * ======================================================================== */
.ui-dd { position: relative; display: block; width: 100%; min-width: 0; }
.ui-dd *, .ui-dd__panel, .ui-dd__panel * { box-sizing: border-box; }
.ui-dd[hidden] { display: none; }
.ui-dd__native {
	position: absolute !important; left: 0; bottom: 0;
	width: 1px !important; height: 1px !important; min-width: 0 !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important;
	opacity: 0; pointer-events: none; clip-path: inset(50%);
}
.ui-select.ui-dd__trigger {
	display: flex; align-items: center; gap: var(--space-2);
	text-align: left; cursor: pointer;
	background-image: none; padding-right: var(--space-2-5);
}
.ui-dd__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dd__trigger.is-placeholder .ui-dd__value { color: var(--muted-foreground); }
.ui-dd__chevron { flex: 0 0 auto; color: var(--muted-foreground); transition: transform var(--duration-fast) ease; }
.ui-dd.is-open .ui-dd__chevron { transform: rotate(180deg); }
.ui-dd.is-open .ui-dd__trigger { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.ui-dd__trigger:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.ui-dd__trigger:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--muted); }
.ui-dd__trigger[aria-invalid="true"], .ui-dd__trigger.is-error { border-color: var(--destructive); }

.ui-dd__panel {
	position: fixed; z-index: 2147483000;
	display: flex; flex-direction: column;
	max-width: min(32rem, calc(100vw - 1rem));
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lg);
	animation: ui-dd-in 120ms var(--ease-out, ease-out);
}
.ui-dd__panel[hidden] { display: none; }
@keyframes ui-dd-in { from { opacity: 0; transform: translateY(-4px); } }
.ui-dd__panel.is-above { animation-name: ui-dd-in-up; }
@keyframes ui-dd-in-up { from { opacity: 0; transform: translateY(4px); } }
.ui-dd__search {
	display: flex; align-items: center; gap: var(--space-2);
	padding: 0 var(--space-3); border-bottom: 1px solid var(--border);
	color: var(--muted-foreground); flex: 0 0 auto;
}
.ui-dd__search-input {
	flex: 1 1 auto; min-width: 0; height: 2.5rem; border: 0; outline: none;
	background: transparent; color: var(--popover-foreground);
	font: inherit; font-size: var(--text-sm);
}
.ui-dd__search-input::placeholder { color: var(--muted-foreground); }
.ui-dd__list { list-style: none; margin: 0; padding: var(--space-1); overflow-y: auto; flex: 1 1 auto; outline: none; }
.ui-dd__option {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	min-height: 2.25rem; padding: var(--space-1-5, 0.375rem) var(--space-2-5);
	border-radius: var(--radius-md); cursor: pointer;
	font-size: var(--text-sm); line-height: 1.35; color: var(--popover-foreground);
}
.ui-dd__option-label { min-width: 0; overflow-wrap: anywhere; }
.ui-dd__option.is-active { background: var(--accent); color: var(--accent-foreground, var(--popover-foreground)); }
.ui-dd__option.is-selected { font-weight: var(--weight-medium); }
.ui-dd__check { display: inline-flex; color: var(--foreground); flex: 0 0 auto; }
.ui-dd__option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.ui-dd__group {
	padding: var(--space-2) var(--space-2-5) var(--space-1);
	font-size: var(--text-xs); font-weight: var(--weight-semibold);
	letter-spacing: 0.02em; color: var(--muted-foreground);
}
.ui-dd__empty { padding: var(--space-3) var(--space-2-5); font-size: var(--text-sm); color: var(--muted-foreground); }
@media (max-width: 767px) {
	.ui-dd__option { min-height: var(--touch-target, 2.75rem); font-size: var(--text-base); }
	.ui-dd__search-input { font-size: 16px; height: var(--touch-target, 2.75rem); }
}
@media (prefers-reduced-motion: reduce) { .ui-dd__panel { animation: none; } .ui-dd__chevron { transition: none; } }