/*
 * SellKit UI — Admin pages (Plugins, Releases, Promotion codes, Licenses, Invoices, Segments, Campaigns, Email settings)
 * ---------------------------------------------------------------------------
 * Owned by the admin page engineer. Only this engineer edits this file.
 * Scope every rule under your page class (e.g. .ui-page-admin ...), use tokens
 * only (no raw colours), and check light, dark and system. See
 * docs/ui-system.md.
 *
 * Every staff view is wrapped in <div class="ui-container ui-page-admin ui-page-admin--<area>">.
 * Behaviour lives in assets/js/admin-pages.js (confirm dialogs, quick filters,
 * auto-submit selects, editor theming), manage-licenses.js and promotion-code.js.
 */

/* ===========================================================================
 * 0. Page rhythm
 * ======================================================================== */
.ui-page-admin { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: var(--space-12); }
.ui-page-admin > .ui-page-header { margin-bottom: 0; }
.ui-page-admin :is(h1, h2, h3, h4) { color: var(--foreground); }
.ui-page-admin svg:not(.ui-logo) path { stroke: currentColor; }
.ui-page-admin .ui-page-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ui-page-admin .ui-page-header__title .ui-badge { font-size: var(--text-xs); letter-spacing: 0; }
.ui-page-admin .ui-page-header__actions { flex-wrap: wrap; }
.ui-page-admin .ui-alert { margin: 0; }

/* Count pill next to a card title */
.ui-page-admin .ui-card__title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-page-admin .ui-admin-count {
	display: inline-flex;
	align-items: center;
	height: 1.25rem;
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ===========================================================================
 * 1. List card: sticky toolbar + flush table + footer pagination
 * ======================================================================== */
.ui-page-admin .ui-admin-list { overflow: visible; }
.ui-page-admin .ui-admin-toolbar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--card) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ui-page-admin .ui-card__header + .ui-admin-toolbar { margin-top: var(--space-4); border-top: 1px solid var(--border); border-radius: 0; }
@media (max-width: 1024px) { .ui-page-admin .ui-admin-toolbar { top: var(--topbar-h); } }
.ui-page-admin .ui-admin-toolbar form { display: contents; }
.ui-page-admin .ui-admin-toolbar .ui-toolbar__search { flex: 1 1 16rem; max-width: 22rem; min-width: 0; }
.ui-page-admin .ui-admin-toolbar .ui-toolbar__spacer { flex: 1 1 auto; }
.ui-page-admin .ui-admin-toolbar .ui-dd { flex: 0 0 auto; width: auto; min-width: 8.5rem; }
.ui-page-admin .ui-admin-toolbar .ui-dd .ui-dd__trigger { width: 100%; }
.ui-page-admin .ui-admin-toolbar__meta { color: var(--muted-foreground); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
	.ui-page-admin .ui-admin-toolbar { position: static; padding: var(--space-3) var(--space-4); -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
	.ui-page-admin .ui-admin-toolbar .ui-toolbar__search { flex-basis: 100%; max-width: none; }
	.ui-page-admin .ui-admin-toolbar .ui-toolbar__spacer { display: none; }
}

/* Segmented filter (links or buttons) with counts */
.ui-page-admin .ui-admin-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: var(--radius-lg);
	background: var(--muted);
}
.ui-page-admin .ui-admin-segmented__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	height: calc(var(--control-h-sm) - 2px);
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--muted-foreground);
	font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.ui-page-admin .ui-admin-segmented__item:hover { color: var(--foreground); }
.ui-page-admin .ui-admin-segmented__item:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-page-admin .ui-admin-segmented__item:is([aria-current="page"], [aria-pressed="true"]) {
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
.ui-page-admin .ui-admin-segmented__count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-weight: var(--weight-normal); }
@media (max-width: 767px) { .ui-page-admin .ui-admin-segmented__item { height: calc(var(--touch-target) - 6px); } }

/* Table inside a flush card: the card is the frame */
.ui-page-admin .ui-admin-list .ui-table-wrap { border: 0; border-radius: 0; background: transparent; }
.ui-page-admin .ui-admin-list .ui-table-wrap:last-child { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.ui-page-admin .ui-admin-list > .ui-card__header + .ui-table-wrap { margin-top: var(--space-4); border-top: 1px solid var(--border); }
.ui-page-admin .ui-admin-list .ui-table thead th { background: color-mix(in srgb, var(--muted) 60%, var(--card)); }
.ui-page-admin .ui-admin-list .ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-page-admin .ui-table tbody tr { transition: background-color var(--duration-fast) ease; }
.ui-page-admin .ui-table tbody tr:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.ui-page-admin .ui-table tbody tr[hidden] { display: none; }
.ui-page-admin .ui-admin-list > .ui-card__footer { justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.ui-page-admin .ui-admin-list > .ui-card__footer .ui-pagination { width: 100%; }
/* One left edge per list card: header, toolbar, table columns and footer all
   start at space-4 (the compact table's 12px cells sat 4px left of the toolbar). */
.ui-page-admin .ui-admin-list > :is(.ui-card__header, .ui-card__footer) { padding-inline: var(--space-4); }
@media (min-width: 640px) {
	.ui-page-admin .ui-admin-list .ui-table :is(th, td):first-child { padding-left: var(--space-4); }
	.ui-page-admin .ui-admin-list .ui-table :is(th, td):last-child { padding-right: var(--space-4); }
}

/* Cells */
.ui-page-admin .ui-admin-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-page-admin .ui-admin-cell > strong,
.ui-page-admin .ui-admin-cell__title { color: var(--foreground); font-weight: var(--weight-medium); }
.ui-page-admin .ui-admin-cell > small,
.ui-page-admin .ui-admin-cell__sub { color: var(--muted-foreground); font-size: var(--text-sm); }
.ui-page-admin .ui-admin-cell--wrap { white-space: normal; min-width: 12rem; max-width: 28rem; }
.ui-page-admin .ui-admin-cell--wrap .ui-admin-cell__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-page-admin .ui-admin-mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--foreground); }
.ui-page-admin .ui-admin-muted { color: var(--muted-foreground); }
.ui-page-admin .ui-admin-nowrap { white-space: nowrap; }

/* Row actions: compact icon buttons, no menus (menus would be clipped by the scroll container) */
.ui-page-admin .ui-admin-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.ui-page-admin .ui-admin-actions form { display: inline-flex; margin: 0; }
.ui-page-admin .ui-admin-actions .ui-btn--icon { color: var(--muted-foreground); }
.ui-page-admin .ui-admin-actions .ui-btn--icon:hover { color: var(--foreground); }
.ui-page-admin .ui-admin-actions .ui-admin-danger:hover,
.ui-page-admin .ui-admin-actions .ui-admin-danger:focus-visible { background: var(--danger-subtle); color: var(--danger-subtle-foreground); }

/* Stacked rows on phones: actions sit on their own line, left-aligned */
@media (max-width: 639px) {
	.ui-page-admin .ui-table--stack td.ui-table__actions::before { content: none; }
	.ui-page-admin .ui-table--stack td.ui-table__actions { justify-content: flex-start; padding-top: var(--space-2); }
	.ui-page-admin .ui-table--stack td:first-child { display: block; text-align: left; padding-bottom: var(--space-2); }
	.ui-page-admin .ui-table--stack td:first-child::before { content: none; }
	.ui-page-admin .ui-table--stack .ui-admin-cell--wrap { max-width: none; min-width: 0; }
	.ui-page-admin .ui-table--stack td > .ui-admin-cell:not(:first-child) { align-items: flex-end; text-align: right; }
	/* Editable cells (Email settings senders): label above a full-width
	   control, so every input in the row starts on the same edge. */
	.ui-page-admin .ui-table--stack td:has(> :is(.ui-input, .ui-dd, .ui-select)) { flex-direction: column; align-items: stretch; gap: var(--space-1-5); text-align: left; }
	/* The "Default" radio keeps its label (it is the row's first cell). */
	.ui-page-admin .ui-table--stack td.ui-admin-radio-cell:first-child { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; }
	.ui-page-admin .ui-table--stack td.ui-admin-radio-cell:first-child::before { content: attr(data-label); }
}

/* Empty list */
.ui-page-admin .ui-admin-list .ui-empty { border: 0; }
.ui-page-admin .ui-admin-empty-row td { padding: 0 !important; }
.ui-page-admin .ui-admin-filter-empty { padding: var(--space-8) var(--space-4); color: var(--muted-foreground); text-align: center; font-size: var(--text-sm); }

/* ===========================================================================
 * 2. Forms: sectioned card, sticky save bar
 * ======================================================================== */
.ui-page-admin .ui-admin-form { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.ui-page-admin .ui-admin-form .ui-card__content { display: flex; flex-direction: column; gap: var(--space-5); }
.ui-page-admin .ui-admin-form .ui-form-section { padding-left: var(--space-6); padding-right: var(--space-6); }
.ui-page-admin .ui-admin-form .ui-form-section > :first-child h2 { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ui-page-admin .ui-admin-form .ui-form-section > :first-child p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.ui-page-admin .ui-admin-fields { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-page-admin .ui-admin-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.ui-page-admin .ui-admin-grid--3 { --cols: 3; }
.ui-page-admin .ui-admin-grid--4 { --cols: 4; }
@media (max-width: 1199px) { .ui-page-admin .ui-admin-grid--4 { --cols: 2; } }
@media (max-width: 767px) { .ui-page-admin .ui-admin-grid--3 { --cols: 1; } }
@media (max-width: 639px) { .ui-page-admin .ui-admin-grid { --cols: 1; } }

/* Legacy inputs that keep form-control / sellkit-text-input for submit_form.js */
.ui-page-admin .ui-field :is(.form-control, .sellkit-text-input) { max-width: none; width: 100%; margin: 0; }
.ui-page-admin .ui-field > label.ui-label { padding: 0; font-size: var(--text-base); }
.ui-page-admin .ui-field .sellkit-input-error-msg { color: var(--destructive); font-size: var(--text-sm); }

/* Save bar: stays in reach on long forms */
.ui-page-admin .ui-admin-savebar {
	position: sticky;
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	background: color-mix(in srgb, var(--card) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
}
.ui-page-admin .ui-admin-savebar .ui-toolbar__spacer { flex: 1 1 auto; }
.ui-page-admin .ui-admin-savebar .ui-alert { flex: 1 1 100%; order: 10; }
.ui-page-admin .ui-admin-savebar .sellkit-form-ajax-response { margin: 0 !important; }
@media (max-width: 639px) {
	.ui-page-admin .ui-admin-form .ui-form-section { padding-left: var(--space-4); padding-right: var(--space-4); }
	.ui-page-admin .ui-admin-savebar { padding: var(--space-3) var(--space-4); }
	.ui-page-admin .ui-admin-savebar .ui-btn { flex: 1 1 auto; }
	.ui-page-admin .ui-admin-savebar .ui-choice { flex: 1 1 100%; }
}

/* Switch row (plugins / releases "Active") */
.ui-page-admin .ui-admin-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }

/* ---- WordPress classic editor (wp_editor) -------------------------------- */
.ui-page-admin .wp-editor-wrap { border-radius: var(--radius-md); }
.ui-page-admin .wp-editor-tabs { float: right; display: flex; gap: 2px; }
.ui-page-admin .wp-editor-tabs .wp-switch-editor {
	float: none;
	height: auto;
	margin: 0 0 -1px;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: var(--muted);
	color: var(--muted-foreground);
	font: var(--weight-medium) var(--text-sm) / 1.6 var(--font-sans);
}
.ui-page-admin :is(.tmce-active .switch-tmce, .html-active .switch-html) { background: var(--card); color: var(--foreground); border-bottom-color: var(--card); }
.ui-page-admin .wp-editor-tools { display: flow-root; padding: 0; }
.ui-page-admin .wp-media-buttons { float: left; }
.ui-page-admin .wp-media-buttons .button { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font-size: var(--text-sm); }
.ui-page-admin .wp-editor-container { clear: both; border: 1px solid var(--input); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; background: var(--input-background); }
.ui-page-admin .wp-editor-container:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); border-color: var(--ring); }
.ui-page-admin .wp-editor-container .mce-panel,
.ui-page-admin .wp-editor-container .mce-toolbar-grp,
.ui-page-admin .wp-editor-container .mce-statusbar,
.ui-page-admin .quicktags-toolbar { background: var(--muted) !important; border-color: var(--border) !important; color: var(--foreground); }
.ui-page-admin .wp-editor-container .mce-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.ui-page-admin .wp-editor-container .mce-btn:hover,
.ui-page-admin .wp-editor-container .mce-btn.mce-active { background: var(--accent) !important; }
.ui-page-admin .wp-editor-container .mce-btn button,
.ui-page-admin .wp-editor-container .mce-ico,
.ui-page-admin .wp-editor-container .mce-txt,
.ui-page-admin .wp-editor-container .mce-path,
.ui-page-admin .wp-editor-container .mce-path-item,
.ui-page-admin .wp-editor-container .mce-wordcount { color: var(--foreground) !important; text-shadow: none !important; }
.ui-page-admin .wp-editor-container .mce-statusbar .mce-path-item { color: var(--muted-foreground) !important; }
.ui-page-admin .wp-editor-container .mce-edit-area { border-color: var(--border) !important; }
.ui-page-admin .quicktags-toolbar input.button { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); }
.ui-page-admin textarea.wp-editor-area { display: block; width: 100%; border: 0; background: var(--input-background); color: var(--foreground); font-family: var(--font-mono); font-size: var(--text-sm); padding: var(--space-3); }

/* ---- Package uploader (frontend.js .js__file-upload-holder) --------------- */
.ui-page-admin .ui-admin-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px dashed var(--input);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.ui-page-admin .ui-admin-upload .upload-file-btn { margin: 0 !important; cursor: pointer; }
.ui-page-admin .ui-admin-upload .upload-file-btn .svg-icon { width: 1rem; height: 1rem; }
.ui-page-admin .ui-admin-upload:has(.js__handle-file-upload:focus-visible) .upload-file-btn { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-page-admin .ui-admin-upload .js__btn-loader { display: none; width: 1rem; height: 1rem; border-width: 2px; }
.ui-page-admin .ui-admin-upload .uploaded-files-preview { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 16rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ui-page-admin .ui-admin-upload .uploaded-files-preview:empty { display: none; }
.ui-page-admin .ui-admin-upload .sellkit-uploaded-file-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	font-size: var(--text-sm);
}
.ui-page-admin .ui-admin-upload .sellkit-uploaded-file-item a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand); font-family: var(--font-mono); font-size: 0.8125rem; }
.ui-page-admin .ui-admin-upload .js__remove-uploaded-file {
	flex: 0 0 auto;
	display: inline-flex;
	width: var(--control-h-sm);
	height: var(--control-h-sm);
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: var(--muted-foreground);
	-webkit-mask-size: 1rem;
	mask-size: 1rem;
	cursor: pointer;
}
.ui-page-admin .ui-admin-upload .js__remove-uploaded-file:hover { background-color: var(--destructive); }
.ui-page-admin .ui-admin-upload .js__remove-uploaded-file:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-page-admin .ui-admin-upload .ui-field__help { flex: 1 1 100%; margin: 0; }

/* ===========================================================================
 * 3. Split layout (form + aside) and KPI strip
 * ======================================================================== */
.ui-page-admin .ui-admin-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside, 22rem); gap: var(--space-6); align-items: start; }
.ui-page-admin .ui-admin-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: sticky; top: var(--space-6); }
@media (max-width: 1099px) {
	.ui-page-admin .ui-admin-split { grid-template-columns: minmax(0, 1fr); }
	.ui-page-admin .ui-admin-aside { position: static; }
}
.ui-page-admin .ui-admin-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.ui-page-admin .ui-admin-kpis .ui-stat { height: 100%; }
.ui-page-admin .ui-admin-kpis .ui-stat__value { font-variant-numeric: tabular-nums; }

/* Key/value breakdown list (recipients by status, requirements) */
.ui-page-admin .ui-admin-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; font-size: var(--text-sm); }
.ui-page-admin .ui-admin-kv > :is(dt, dd) { margin: 0; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.ui-page-admin .ui-admin-kv > :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }
.ui-page-admin .ui-admin-kv dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); }
.ui-page-admin .ui-admin-kv dd { color: var(--foreground); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: right; }

/* Table at the bottom of an aside card */
.ui-page-admin .ui-admin-aside-table { margin-top: var(--space-4); border-width: 1px 0 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: transparent; }
.ui-page-admin .ui-admin-aside-table tbody tr:last-child > * { border-bottom: 0; }
/* Outer columns line up with the card header text above the table. */
.ui-page-admin .ui-admin-aside-table .ui-table :is(th, td):first-child { padding-left: var(--space-6); }
.ui-page-admin .ui-admin-aside-table .ui-table :is(th, td):last-child { padding-right: var(--space-6); }
@media (max-width: 639px) {
	.ui-page-admin .ui-admin-aside-table .ui-table :is(th, td):first-child { padding-left: var(--space-4); }
	.ui-page-admin .ui-admin-aside-table .ui-table :is(th, td):last-child { padding-right: var(--space-4); }
}

/* Card stack inside aside: equal paddings, compact */
.ui-page-admin .ui-admin-aside .ui-card__content { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-page-admin .ui-admin-aside .ui-card__description { font-size: var(--text-sm); }
.ui-page-admin .ui-admin-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-page-admin .ui-admin-btn-row > form { display: contents; }

/* ===========================================================================
 * 4. Page specifics
 * ======================================================================== */

/* Releases: changelog dialog body */
.ui-admin-changelog { color: var(--foreground); font-size: var(--text-base); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.ui-admin-changelog :is(ul, ol) { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.ui-admin-changelog li { margin: var(--space-1) 0; }
.ui-admin-changelog p { margin: 0 0 var(--space-3); }
.ui-admin-changelog :is(h1, h2, h3, h4) { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); color: var(--foreground); }
.ui-admin-changelog a { color: var(--brand); }
.ui-admin-changelog code { font-family: var(--font-mono); font-size: 0.85em; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--muted); }

/* Plugin picker (releases without a plugin id) */
.ui-page-admin .ui-admin-picker .ui-list-row__trail svg { width: 1rem; height: 1rem; }

/* Segments: rule builder */
.ui-page-admin .ui-admin-rules { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.ui-page-admin .ui-admin-rule {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: center;
	gap: var(--space-2);
	counter-increment: rule;
}
.ui-page-admin .ui-admin-rule::before {
	content: counter(rule);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-full);
	background: var(--muted);
	color: var(--muted-foreground);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
}
.ui-page-admin .ui-admin-rule .ui-dd { min-width: 0; }
.ui-page-admin .ui-admin-rules__head { display: grid; grid-template-columns: 1.75rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.ui-page-admin .ui-admin-rules__head > :first-child { grid-column: 2; }
@media (max-width: 767px) {
	.ui-page-admin .ui-admin-rules__head { display: none; }
	.ui-page-admin .ui-admin-rule { grid-template-columns: 1.75rem minmax(0, 1fr); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); }
	.ui-page-admin .ui-admin-rule::before { grid-row: span 3; align-self: start; }
}

/* Email settings: default radios + DNS records */
.ui-page-admin .ui-admin-radio-cell { width: 1%; text-align: center; }
.ui-page-admin .ui-admin-radio-cell .ui-radio { margin: 0; }
.ui-page-admin .ui-admin-inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ui-page-admin .ui-admin-inline-form .ui-input { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.ui-page-admin .ui-table td .ui-input,
.ui-page-admin .ui-table td .ui-dd { min-width: 11rem; }
.ui-page-admin .ui-admin-help { margin: 0; padding-left: var(--space-5); color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-normal); }
.ui-page-admin .ui-admin-help li + li { margin-top: var(--space-1-5); }
.ui-admin-dns .ui-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.ui-admin-dns .ui-table td:first-child { white-space: nowrap; }
.ui-admin-dns .ui-admin-mono { font-family: var(--font-mono); font-size: 0.8125rem; }

/* Campaign status chips (client-side filter) keep the segmented look */
.ui-page-admin .ui-admin-health { color: var(--muted-foreground); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Promotion codes: beat legacy promotion-code.css (!important there) on the copy icon button */
.ui-page-admin .ui-btn.js__copy-promotion-code { min-width: 0; background-color: transparent !important; border-color: transparent !important; color: var(--muted-foreground) !important; }
.ui-page-admin .ui-btn.js__copy-promotion-code:hover { background-color: var(--accent) !important; color: var(--foreground) !important; }

/* Promotion codes: redeemed-by line */
.ui-page-admin .ui-admin-redeemed { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-xs); white-space: nowrap; }

/* Detail sheet / confirm dialogs (rendered at page level, outside the container) */
.ui-admin-details { margin: 0; }
.ui-admin-details .ui-dl { margin: 0; }
.ui-admin-confirm__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1-5) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted); font-size: var(--text-sm); }
.ui-admin-confirm__meta:empty { display: none; }
.ui-admin-confirm__meta dt { color: var(--muted-foreground); }
.ui-admin-confirm__meta dd { margin: 0; color: var(--foreground); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.ui-admin-confirm__msg:empty { display: none; }

/* Sectioned plain card: first section needs top padding (ui-form-section:first-child resets it) */
.ui-page-admin .ui-card > .ui-form-section:first-child { padding-top: var(--space-6); }
.ui-page-admin .ui-card > .ui-form-section:last-of-type { padding-bottom: var(--space-6); }
.ui-page-admin .ui-admin-toolbar .ui-admin-inline-form { flex: 1 1 auto; flex-wrap: nowrap; }
@media (max-width: 639px) { .ui-page-admin .ui-admin-toolbar .ui-admin-inline-form { flex-wrap: wrap; } .ui-page-admin .ui-admin-inline-form .ui-input { max-width: none; } }
.ui-page-admin .ui-form-section code.ui-code { white-space: nowrap; font-size: 0.75rem; }
/* Inside a form + aside split the main column is narrow: section heading sits above its fields */
.ui-page-admin .ui-admin-split .ui-form-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* style.css paints every `table td` #3c4257 (unreadable in dark); components.css doesn't reset it */
.ui-page-admin .ui-table td,
.ui-admin-dns .ui-table td { color: var(--foreground); }
.ui-page-admin .ui-table th { color: var(--muted-foreground); }
.ui-page-admin .ui-admin-upload .sellkit-uploaded-file-item { box-shadow: none; color: var(--foreground); line-height: var(--leading-snug); }
#ui-admin-confirm .ui-dialog__header { padding-bottom: var(--space-5); }