/* ============================================================================
   EquipDash Design System v2 - ui kit styles (P1)
   Styles for the <x-ui.*> blade components. Tokens only - no raw hexes.
   Spec: docs/mockups/design-system-v2.html
   ========================================================================== */

/* ---- <x-ui.button> ---- */
.ui-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: none;
	border-radius: var(--ed-r-pill);
	padding: 9px 17px;
	font: 600 13.5px/1.4 var(--ed-font);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--ed-fast), color var(--ed-fast);
}

.ui-btn--primary {
	background: var(--ed-navy-700);
	color: var(--ed-on-accent);
}

.ui-btn--primary:hover {
	background: var(--ed-navy-600);
	color: var(--ed-on-accent);
}

.ui-btn--secondary {
	background: var(--ed-surface);
	border: 1px solid var(--ed-border);
	color: var(--ed-ink);
}

.ui-btn--secondary:hover {
	background: var(--ed-sunken);
	color: var(--ed-ink);
}

.ui-btn--ghost {
	background: none;
	color: var(--ed-navy-600);
}

.ui-btn--ghost:hover {
	background: var(--ed-navy-100);
	color: var(--ed-navy-700);
}

.ui-btn--danger {
	background: var(--ed-danger);
	color: var(--ed-on-accent);
}

.ui-btn--danger:hover {
	background: var(--ed-danger-strong);
	color: var(--ed-on-accent);
}

.ui-btn--ai {
	background: linear-gradient(120deg, var(--ed-ai), var(--ed-ai-2));
	color: var(--ed-on-accent);
}

.ui-btn--sm {
	padding: 6px 13px;
	font-size: 13px;
}

.ui-btn:disabled,
.ui-btn.disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

/* Row-action icon button: plain muted glyph, never boxed, never wraps. */
.ui-btn--icon {
	background: none;
	border: none;
	border-radius: var(--ed-r-ctl);
	padding: 4px 5px;
	color: var(--ed-muted);
}

.ui-btn--icon:hover {
	background: var(--ed-sunken);
	color: var(--ed-ink);
}

/* ---- <x-ui.pill> ---- */
.ui-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: var(--ed-r-pill);
	padding: 3px 10px;
	font: 600 11.5px/1.4 var(--ed-font);
	white-space: nowrap;
}

.ui-pill--success { background: var(--ed-success-soft); color: var(--ed-success); }
.ui-pill--warning { background: var(--ed-warning-soft); color: var(--ed-warning); }
.ui-pill--danger  { background: var(--ed-danger-soft);  color: var(--ed-danger); }
.ui-pill--info    { background: var(--ed-navy-100);     color: var(--ed-navy-600); }
.ui-pill--ai      { background: var(--ed-ai-soft);      color: var(--ed-ai); }
.ui-pill--count   { background: var(--ed-navy-100);     color: var(--ed-navy-600); padding: 1px 7px; font-size: 10.5px; }

/* ---- <x-ui.card> ---- */
.ui-card {
	background: var(--ed-surface);
	border-radius: var(--ed-r-card);
	box-shadow: var(--ed-shadow-card);
}

.ui-card__header {
	display: flex;
	align-items: center;
	gap: var(--ed-s2);
	padding: 13px 18px;
	border-bottom: 1px solid var(--ed-border);
	font: 600 13.5px/1.4 var(--ed-font);
	color: var(--ed-ink);
}

.ui-card__action {
	margin-left: auto;
	font: 600 12.5px/1.4 var(--ed-font);
	color: var(--ed-navy-600);
}

.ui-card__body {
	padding: var(--ed-s4) 18px;
}

/* ---- <x-ui.empty-state> ---- */
.ui-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--ed-s8) var(--ed-s6);
	text-align: center;
}

.ui-empty__art {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--ed-navy-100);
	display: grid;
	place-items: center;
	font-size: 28px;
}

.ui-empty__title {
	font: 600 15px/1.4 var(--ed-font);
	color: var(--ed-ink);
}

.ui-empty__body {
	font: 400 12.5px/1.5 var(--ed-font);
	color: var(--ed-muted);
	max-width: 40ch;
}

/* ---- <x-ui.setup-card> (unset feature; no padlock - lock means plan gating) ---- */
.ui-setup {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px dashed var(--ed-setup-border);
	border-radius: 10px;
	padding: 12px 15px;
	background: var(--ed-sunken);
	/* Breathing room above/below - these cards sat flush against their
	   neighbors in the detail rails (#4312). Sibling margins collapse. */
	margin: 12px 0;
}

.ui-setup__title {
	font: 600 13px/1.4 var(--ed-font);
	color: var(--ed-ink);
	display: block;
}

.ui-setup__status {
	font: 400 12px/1.45 var(--ed-font);
	color: var(--ed-muted);
	display: block;
}

.ui-setup__action {
	margin-left: auto;
	flex: 0 0 auto;
	font: 600 12.5px/1.4 var(--ed-font);
	color: var(--ed-navy-600);
	white-space: nowrap;
}

.ui-setup__action button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

/* ---- <x-ui.choice-cards> ---- */
.ui-choice {
	display: flex;
	gap: 10px;
}

.ui-choice__card {
	flex: 1;
	border: 1.5px solid var(--ed-border);
	border-radius: 10px;
	padding: 12px 14px;
	background: var(--ed-surface);
	cursor: pointer;
	margin: 0;
	transition: border-color var(--ed-fast), background var(--ed-fast);
}

.ui-choice__card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ui-choice__title {
	font: 600 13px/1.4 var(--ed-font);
	color: var(--ed-ink);
	display: block;
	margin-bottom: 2px;
}

.ui-choice__desc {
	font: 400 12px/1.45 var(--ed-font);
	color: var(--ed-muted);
	display: block;
}

.ui-choice__card.is-selected,
.ui-choice__card:has(input:checked) {
	border-color: var(--ed-navy-600);
	background: var(--ed-navy-100);
}

@media (max-width: 767px) {
	.ui-choice {
		flex-direction: column;
	}
}

/* ---- <x-ui.stepper> ---- */
.ui-stepper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.ui-stepper__btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--ed-border);
	background: var(--ed-surface);
	color: var(--ed-muted);
	display: grid;
	place-items: center;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.ui-stepper__btn--add {
	background: var(--ed-navy-700);
	color: var(--ed-on-accent);
	border-color: var(--ed-navy-700);
}

.ui-stepper__btn:disabled {
	opacity: .4;
	cursor: default;
}

.ui-stepper__value {
	font: 600 14px/1 var(--ed-font);
	min-width: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- <x-ui.field> ---- */
.ui-field { display: flex; flex-direction: column; }
.ui-field__label { font: 600 13px/1.4 var(--ed-font); color: var(--ed-ink); margin-bottom: 2px; }
.ui-field__hint { font: 400 12px/1.45 var(--ed-font); color: var(--ed-muted); margin-bottom: 7px; }
.ui-field__error { font: 400 12px/1.45 var(--ed-font); color: var(--ed-danger); margin-top: 4px; }

/* ---- <x-ui.toggle> row (the switch itself is the global .form-switch spec) ---- */
.ui-toggle-row { display: flex; align-items: center; gap: 12px; }
.ui-toggle-row__label { flex: 1; font: 400 13.5px/1.4 var(--ed-font); color: var(--ed-ink); margin: 0; }

/* ---- <x-ui.tabs> ---- */
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ed-border); list-style: none; padding: 0; margin: 0 0 var(--ed-s4); flex-wrap: nowrap; overflow-x: auto; }
.ui-tabs__item { flex: 0 0 auto; }
.ui-tabs__link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font: 600 13px/1.4 var(--ed-font); color: var(--ed-muted); white-space: nowrap; cursor: pointer; }
.ui-tabs__link.is-active { color: var(--ed-navy-700); border-bottom-color: var(--ed-navy-700); }

/* ---- <x-ui.advanced> ---- */
.ui-adv { border-top: 1px solid var(--ed-border); margin-top: var(--ed-s2); }
.ui-adv__header { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 11px 0; font: 600 13px/1.4 var(--ed-font); color: var(--ed-muted); cursor: pointer; text-align: left; }
.ui-adv__chevron { display: inline-block; transition: transform var(--ed-fast); }
.ui-adv__chevron.is-open { transform: rotate(90deg); }
.ui-adv__summary { font-weight: 400; color: var(--ed-faint); }
.ui-adv__body { display: flex; flex-direction: column; gap: var(--ed-s3); padding: 2px 0 var(--ed-s3); }

/* ---- <x-ui.select> ---- */
.ui-select { height: 40px; border: 1px solid var(--ed-border); border-radius: var(--ed-r-ctl); padding: 0 34px 0 13px; font: 400 13.5px/1.4 var(--ed-font); color: var(--ed-ink); background: var(--ed-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a2b6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; appearance: none; }
.ui-select:focus { outline: 2px solid var(--ed-navy-600); outline-offset: -1px; }

/* ---- <x-ui.kbd> ---- */
.ui-kbd { display: inline-flex; align-items: center; border: 1px solid var(--ed-border); background: var(--ed-sunken); border-radius: 5px; padding: 2px 7px; font: 600 11px/1.3 var(--ed-font); color: var(--ed-muted); white-space: nowrap; }

/* ---- <x-ui.hero> ---- */
.ui-hero { display: flex; align-items: center; gap: var(--ed-s4); background: var(--ed-surface); border-radius: var(--ed-r-card); box-shadow: var(--ed-shadow-card); padding: var(--ed-s4) var(--ed-s5); }
.ui-hero__facts { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.ui-hero__k { font: 600 11px/1.3 var(--ed-font); text-transform: uppercase; letter-spacing: .06em; color: var(--ed-faint); }
.ui-hero__v { font: 600 13.5px/1.4 var(--ed-font); color: var(--ed-ink); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ui-hero__actions { margin-left: auto; display: flex; gap: var(--ed-s2); flex: 0 0 auto; }
@media (max-width: 767px) {
	.ui-hero { flex-wrap: wrap; }
	.ui-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
	.ui-hero__actions { margin-left: 0; width: 100%; }
	.ui-hero__actions .ui-btn { flex: 1; justify-content: center; }
}

/* ---- <x-ui.stat> ---- */
.ui-stat { border: 1px solid var(--ed-border); border-radius: 10px; padding: 14px 16px; background: var(--ed-surface); }
.ui-stat__value { font: var(--ed-display-24); color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.ui-stat__label { font: 400 12.5px/1.45 var(--ed-font); color: var(--ed-muted); }
.ui-stat__gauge { height: 8px; border-radius: var(--ed-r-pill); background: var(--ed-border); overflow: hidden; margin-top: 8px; }
.ui-stat__gauge i { display: block; height: 100%; background: var(--ed-navy-600); }

/* ---- <x-ui.bulk-bar> ---- */
.ui-bulk { display: flex; align-items: center; gap: 12px; background: var(--ed-ink); color: var(--ed-on-accent); border-radius: 10px; padding: 9px 14px; font: 600 13px/1.4 var(--ed-font); }
.ui-bulk a, .ui-bulk button { color: var(--ed-on-accent); background: none; border: none; font: inherit; cursor: pointer; text-decoration: underline; }
.ui-bulk__sep { color: var(--ed-faint); }
.ui-bulk__clear { margin-left: auto; color: rgba(255, 255, 255, .8) !important; text-decoration: none !important; }
.ui-bulk__clear:hover { color: var(--ed-on-accent) !important; }

/* ---- <x-ui.filter-bar> ---- */
.ui-filter-bar { display: flex; align-items: center; gap: 9px; margin-bottom: var(--ed-s3); flex-wrap: wrap; }
.ui-filter-bar__trailing { margin-left: auto; display: flex; gap: 9px; }
.ui-search { display: flex; align-items: center; gap: 8px; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: var(--ed-r-pill); padding: 0 15px; height: 40px; min-width: 240px; color: var(--ed-faint); }
.ui-search input { border: none; outline: none; background: none; font: 400 13.5px/1.4 var(--ed-font); color: var(--ed-ink); flex: 1; }
.ui-filter-pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: var(--ed-r-pill); padding: 0 15px; font: 600 13px/1.4 var(--ed-font); color: var(--ed-ink); white-space: nowrap; cursor: pointer; }
.ui-filter-pill i { font-size: 10px; color: var(--ed-faint); }
@media (max-width: 767px) {
	.ui-search { min-width: 100%; order: -1; }
}

/* ---- <x-ui.actions-cell> ---- */
.ui-actions-cell { white-space: nowrap; }

/* ---- <x-ui.code-block> + <x-ui.secret-row> ---- */
.ui-code { border: 1px solid var(--ed-border); border-radius: 10px; overflow: hidden; }
.ui-code__header { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--ed-sunken); border-bottom: 1px solid var(--ed-border); font: 600 12.5px/1.4 var(--ed-font); color: var(--ed-ink); }
.ui-code__copy { margin-left: auto; background: none; border: none; font: 600 12px/1.4 var(--ed-font); color: var(--ed-navy-600); cursor: pointer; }
.ui-code__pre { margin: 0; padding: 13px 15px; background: var(--ed-ink); color: var(--ed-navy-100); font: 11.5px/1.6 ui-monospace, Menlo, monospace; overflow-x: auto; }
.ui-secret { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ed-border); border-radius: 10px; padding: 10px 15px; background: var(--ed-surface); }
.ui-secret__label { flex: 1; font: 600 13px/1.4 var(--ed-font); color: var(--ed-ink); }
.ui-secret__label small { display: block; font: 400 11px/1.4 var(--ed-font); color: var(--ed-faint); }
.ui-secret__value { font: 600 12px/1.4 ui-monospace, Menlo, monospace; color: var(--ed-muted); }
.ui-secret__action { background: none; border: none; font: 600 12px/1.4 var(--ed-font); color: var(--ed-navy-600); cursor: pointer; white-space: nowrap; }


/* ============================================================================
   Kit coverage (#4104): charts, calendar, reorder, builders.
   ========================================================================== */

/* --- KPI row + stat delta --- */
.ui-kpi { display: flex; gap: 12px; flex-wrap: wrap; }
.ui-kpi .ui-stat { flex: 1; min-width: 150px; background: var(--ed-surface); }
.ui-stat__delta { font-size: 11px; font-weight: 800; margin-left: 4px; }
.ui-stat__delta.is-good { color: var(--ed-success); }
.ui-stat__delta.is-bad { color: var(--ed-danger); }

/* --- Comparison bar chart --- */
.ui-chart__header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ui-chart__title { font-size: 13.5px; color: var(--ed-ink); }
.ui-chart__toolbar { margin-left: auto; }
.ui-chart__plot { display: flex; align-items: flex-end; gap: 14px; height: 140px; border-bottom: 1px solid var(--ed-border); padding: 0 4px; }
.ui-chart__bar { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.ui-chart__bar i { display: block; width: 16px; border-radius: 4px 4px 0 0; }
.ui-chart__prev { background: var(--ed-navy-200); }
.ui-chart__cur { background: var(--ed-navy-600); }
.ui-chart__axis { display: flex; gap: 14px; padding: 6px 4px 0; }
.ui-chart__axis span { flex: 1; text-align: center; font: var(--ed-caption-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ed-faint); }

/* --- Segmented chart toolbar --- */
.ui-chart-seg { display: inline-flex; background: var(--ed-sunken); border: 1px solid var(--ed-border); border-radius: 999px; padding: 2px; gap: 2px; }
.ui-chart-seg button { border: none; background: none; border-radius: 999px; padding: 5px 12px; font: 600 12px/1.2 var(--ed-font); color: var(--ed-muted); cursor: pointer; white-space: nowrap; }
.ui-chart-seg button.is-on { background: var(--ed-surface); color: var(--ed-navy-700); box-shadow: 0 1px 2px rgba(29, 43, 69, .08); }

/* --- Donut + legend --- */
.ui-donut-wrap { display: flex; gap: 16px; align-items: center; }
.ui-donut { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 96px; }
.ui-donut i { width: 62px; height: 62px; border-radius: 50%; background: var(--ed-surface); display: grid; place-items: center; font: 700 14px/1 var(--ed-font); color: var(--ed-ink); font-style: normal; }
.ui-donut__legend { display: flex; flex-direction: column; gap: 6px; font: var(--ed-small-12); color: var(--ed-muted); }
.ui-donut__legend span { display: flex; align-items: center; gap: 7px; }
.ui-donut__legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.ui-donut__legend b { color: var(--ed-ink); }

/* --- Date strip --- */
.ui-dstrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.ui-dstrip__day { flex: 1; min-width: 44px; min-height: 44px; border: 1px solid var(--ed-border); background: var(--ed-surface); border-radius: 10px; padding: 6px 4px; text-align: center; cursor: pointer; }
.ui-dstrip__day small { display: block; font: var(--ed-caption-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ed-faint); }
.ui-dstrip__day b { display: block; font-size: 15px; color: var(--ed-ink); margin-top: 2px; }
.ui-dstrip__day.is-selected { border-color: var(--ed-navy-700); background: var(--ed-navy-100); }
.ui-dstrip__day.is-selected b { color: var(--ed-navy-700); }

/* --- Timeline lanes --- */
.ui-lane { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ed-border); }
.ui-lane:last-child { border-bottom: 0; }
.ui-lane__name { width: 130px; flex: 0 0 130px; font: var(--ed-small-12); color: var(--ed-muted); }
.ui-lane__name b { display: block; color: var(--ed-ink); }
.ui-lane__track { flex: 1; height: 18px; border-radius: 6px; background: var(--ed-sunken); position: relative; overflow: hidden; }
.ui-lane__seg { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; }
.ui-lane__seg.is-available { background: var(--ed-success-soft); border: 1px solid var(--ed-success-border); }
.ui-lane__seg.is-booked { background: var(--ed-navy-100); border: 1px solid var(--ed-navy-200); }
.ui-lane__seg.is-blocked { background: var(--ed-hatch-blocked); }
.ui-lane__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ed-danger); }

/* --- Sortable row --- */
.ui-srow { display: flex; align-items: center; gap: 10px; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: 10px; padding: 9px 12px; }
.ui-srow.is-dragging-row { opacity: .55; }
.ui-srow.sort-drag-over { border-color: var(--ed-navy-600); box-shadow: 0 -2px 0 0 var(--ed-navy-600); }
.ui-srow__grip { cursor: grab; color: var(--ed-faint); font-size: 14px; }
.ui-srow__body { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ed-ink); }
.ui-srow__updn { display: flex; gap: 4px; }
.ui-srow__updn button { width: 28px; height: 28px; border: 1px solid var(--ed-border); background: var(--ed-surface); border-radius: 8px; color: var(--ed-muted); font-size: 10px; cursor: pointer; }
.ui-srow__updn button:disabled { opacity: .35; cursor: default; }

/* --- Builder palette / canvas / dropzone --- */
.ui-bpal { border: 1px solid var(--ed-border); background: var(--ed-surface); border-radius: 9px; padding: 8px 11px; font: 600 12.5px/1.3 var(--ed-font); color: var(--ed-ink); cursor: grab; }
.ui-bblock { position: relative; border: 1px solid var(--ed-border); background: var(--ed-surface); border-radius: 10px; padding: 12px 14px; }
.ui-bblock__tools { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.ui-bblock:hover .ui-bblock__tools { display: flex; }
.ui-bblock__tools button { width: 26px; height: 26px; border: 1px solid var(--ed-border); background: var(--ed-surface); border-radius: 7px; color: var(--ed-muted); font-size: 11px; cursor: pointer; }
.ui-bblock__title { font-size: 13px; color: var(--ed-ink); display: block; }
.ui-bblock__meta { font: var(--ed-small-12); color: var(--ed-muted); }
.ui-bdrop { border: 1.5px dashed var(--ed-setup-border); border-radius: 10px; padding: 14px; text-align: center; font: var(--ed-small-12); color: var(--ed-faint); background: var(--ed-sunken); }
.ui-bdrop.is-over { border-color: var(--ed-navy-600); color: var(--ed-navy-600); }

/* ============================================================================
   Responsive contracts (#4105) - every primitive owns its breakpoints; pages
   never write media queries for kit parts. Checkpoints: 375 / 768 / 1440.
   ========================================================================== */

/* Listing tables: a column marked data-priority="low" on its <th> and <td>s
   hides on phone - name, status and price stay; the rest waits for the row. */
@media (max-width: 767.98px) {
	.content .table [data-priority="low"],
	.ui-listing [data-priority="low"] { display: none; }

	/* Drawers are full-screen sheets on phone (style.css leaves them at 50%
	   until 576px); footer actions go full-width, primary keeps its place. */
	.modal-sidebar { width: 100%; }
	.modal-sidebar .qb-footer-actions,
	.modal-sidebar .drawer-footer-actions { display: flex; width: 100%; }
	.modal-sidebar .qb-footer-actions > * { flex: 1; justify-content: center; }

	/* Centered modals: near-full-width with a 16px inset. */
	.delete-modal-main .modal-dialog { margin: 16px auto; max-width: calc(100vw - 32px); }

	/* Touch targets: every kit control hits 44px on phone. */
	.ui-stepper__btn { width: 40px; height: 40px; }
	.ui-srow__updn button { width: 40px; height: 40px; }
	.ui-btn--icon { min-width: 44px; min-height: 44px; }
	.ui-btn--sm { min-height: 40px; }
	.ui-toggle-row { min-height: 44px; }
	.ui-tabs__link { min-height: 44px; }
	.ui-chart-seg button { min-height: 40px; }

	/* Charts: full width, alternate axis labels drop so the row never wraps;
	   donut legend wraps below the ring. */
	.ui-chart__axis span:nth-child(even) { visibility: hidden; }
	.ui-donut-wrap { flex-direction: column; align-items: flex-start; }

	/* KPI stats stack full-width. */
	.ui-kpi .ui-stat { flex: 1 1 100%; }
}

/* ============================================================================
   Live widget preview card (#4093).
   ========================================================================== */
.ui-wprev-controls { margin-left: auto; }
.ui-wprev-body { display: flex; flex-direction: column; gap: 12px; }
.ui-wprev-frame {
	margin: 0 auto;
	border: 8px solid var(--ed-ink);
	border-radius: 22px;
	overflow: hidden;
	background: var(--ed-surface);
	box-shadow: var(--ed-shadow-card);
	width: 100%;
}
.ui-wprev-frame.is-phone { max-width: 300px; height: 520px; }
.ui-wprev-frame.is-tablet { max-width: 420px; height: 560px; border-radius: 16px; }
.ui-wprev-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.ui-wprev-qr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-wprev-qr-toggle {
	background: none;
	border: none;
	padding: 0;
	font: 600 12.5px/1.4 var(--ed-font);
	color: var(--ed-navy-600);
	cursor: pointer;
}
.ui-wprev-hint { font: var(--ed-small-12); color: var(--ed-muted); }
.ui-wprev-qr { display: flex; align-items: center; gap: 14px; }
.ui-wprev-qr img { border: 1px solid var(--ed-border); border-radius: 10px; }

/* ---- <x-ui.search-select> (#4271) - searchable single-select ---- */
.ui-search-select { position: relative; }
.ui-search-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: 8px; font: 400 14px/1.4 var(--ed-font); color: var(--ed-ink); cursor: pointer; text-align: left; }
.ui-search-select__trigger img { width: 12px; flex: 0 0 auto; }
.ui-search-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search-select__value.is-placeholder { color: var(--ed-faint); }
.ui-search-select__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: 10px; box-shadow: var(--ed-shadow-pop); overflow: hidden; }
.ui-search-select__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ed-border); color: var(--ed-faint); }
.ui-search-select__search input { border: none; outline: none; background: none; flex: 1; font: 400 13.5px/1.4 var(--ed-font); color: var(--ed-ink); }
.ui-search-select__list { max-height: 220px; overflow-y: auto; padding: 4px; }
.ui-search-select__option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; background: none; border-radius: 7px; font: 400 13.5px/1.4 var(--ed-font); color: var(--ed-ink); cursor: pointer; }
.ui-search-select__option:hover { background: var(--ed-sunken); }
.ui-search-select__empty { padding: 12px 10px; font: 400 13px/1.4 var(--ed-font); color: var(--ed-faint); font-style: italic; }