/**
 * HCGPT Salon Suite — Performance Dashboard V4 (executive redesign).
 *
 * Design language inherited from the Formula Book client card / Formula
 * Builder / Service Ticket V2 editorial register: Neuton display for the
 * money anchors, Roboto Mono uppercase micro-labels, brand gradient as the
 * revenue signature, flat hairline cards, pill chips. One scan answers:
 * what happened, who is performing, where money comes from.
 *
 * Scoped module CSS: token-based surfaces, light/dark via UI-kit tokens,
 * no inline styles, no blue canvas.
 */

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] #hcgpt-app-view-performance {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar__chat,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar__settings,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar__formula,
.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar__academy {
	display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-viewhost {
	gap: 0;
}

.hcgpt-salon-performance {
	--hcgpt-perf-display: "Neuton", Georgia, serif;
	--hcgpt-perf-mono: var(--hcgpt-font-mono, "Roboto Mono", monospace);
	--hcgpt-perf-booked: var(--hcgpt-info, #2563eb);
	--hcgpt-perf-added: var(--hcgpt-primary, #6e3aff);
	--hcgpt-perf-retail: var(--hcgpt-success, #10b981);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 100%;
	padding: clamp(14px, 2vw, 24px);
	color: var(--hcgpt-color-text);
	background: var(--hcgpt-color-bg, var(--hcgpt-color-surface));
}

/* ===== Top bar title + reusable period filters ===== */
.hcgpt-salon-performance__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__top[data-perf-relocated] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-left: var(--hcgpt-topbar-desktop-title-offset, 0px);
	box-sizing: border-box;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"]:not([data-view="performance"]) .hcgpt-app-topbar .hcgpt-salon-performance__top[data-perf-relocated] {
	display: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__top-title {
	flex: 0 0 auto;
	min-width: 0;
}

.hcgpt-salon-performance__title {
	margin: 0;
	font-family: var(--hcgpt-font-sans);
	font-weight: var(--hcgpt-font-weight-semibold, 600);
	font-size: var(--hcgpt-font-size-18);
	letter-spacing: 0;
	text-transform: none;
	line-height: var(--hcgpt-line-height-120, 1.2);
	color: var(--hcgpt-color-text, #212121);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__title {
	font-size: var(--hcgpt-font-size-18);
	line-height: var(--hcgpt-line-height-120, 1.2);
	white-space: nowrap;
}

.hcgpt-salon-performance__subtitle {
	margin: 4px 0 0;
	font-size: 0.84rem;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__filters {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: 999px;
	background: var(--hcgpt-color-surface-2);
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__filters {
	flex: 0 1 auto;
	max-width: min(72vw, 680px);
	overflow-x: auto;
	scrollbar-width: none;
}

.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__filters::-webkit-scrollbar {
	display: none;
}

.hcgpt-salon-performance__filters button {
	border: 0;
	background: transparent;
	min-height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__filters button.is-active {
	background: var(--hcgpt-color-surface);
	color: var(--hcgpt-color-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Filter wrapper: inline fallback in the view body, moved into the shared
   HairCoPilot sidebar by performance.js when the app shell sidebar is present. */
.hcgpt-salon-performance__filterbar {
	display: contents;
}

/* Header label for the filter group; sidebar styles reveal it. */
.hcgpt-salon-performance__filters-head {
	display: none;
}

.hcgpt-salon-performance__filters-grab {
	display: block;
	width: 36px;
	height: 4px;
	margin: 2px auto 6px;
	border-radius: 999px;
	background: var(--hcgpt-color-border);
}

.hcgpt-salon-performance__filters-title {
	display: block;
	padding: 0 4px 4px;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__custom {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.hcgpt-salon-performance__custom[hidden] {
	display: none;
}

.hcgpt-salon-performance__custom label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hcgpt-salon-performance__custom label span {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__custom input {
	border: 1px solid var(--hcgpt-color-border);
	border-radius: 9px;
	padding: 7px 10px;
	background: var(--hcgpt-color-surface);
	color: var(--hcgpt-color-text);
}

.hcgpt-salon-performance__state {
	position: absolute;
	z-index: 4;
	top: clamp(10px, 1.4vw, 18px);
	right: clamp(10px, 1.6vw, 22px);
	margin: 0;
	max-width: min(260px, calc(100% - 20px));
	padding: 7px 10px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--hcgpt-color-surface) 92%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px color-mix(in srgb, #111827 10%, transparent);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hcgpt-color-text-muted);
	pointer-events: none;
}

.hcgpt-salon-performance__state[hidden] {
	display: none;
}

/* ===== 1 · Executive hero ===== */
.hcgpt-salon-performance__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 12px;
}

/* The anchor: revenue owns the page, brand gradient = money signature. */
.hcgpt-salon-performance__hero-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	min-height: 180px;
	padding: 26px 28px;
	border-radius: var(--hcgpt-radius-lg, 16px);
	background: var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b, #ff8a3d));
	color: var(--hcgpt-color-on-primary, #fff);
	overflow: hidden;
}

.hcgpt-salon-performance__hero-label {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--hcgpt-color-on-primary, #fff) 80%, transparent);
}

.hcgpt-salon-performance__hero-value {
	font-family: var(--hcgpt-perf-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.hcgpt-salon-performance__hero-foot .hcgpt-salon-performance__trend {
	background: color-mix(in srgb, #ffffff 18%, transparent);
	border-color: color-mix(in srgb, #ffffff 32%, transparent);
	color: var(--hcgpt-color-on-primary, #fff);
}

.hcgpt-salon-performance__hero-side {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.hcgpt-salon-performance__hero-mini {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 13px);
	background: var(--hcgpt-color-surface);
}

.hcgpt-salon-performance__hero-mini span {
	flex: 1;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__hero-mini strong {
	font-size: 1.3rem;
	line-height: 1;
}

/* ===== Trend chips ===== */
.hcgpt-salon-performance__trend {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	width: fit-content;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--hcgpt-color-border);
	background: var(--hcgpt-color-surface-2);
	font-size: 0.72rem;
	font-weight: 700;
}

.hcgpt-salon-performance__trend i {
	font-style: normal;
	font-size: 0.62rem;
	font-weight: 600;
	color: inherit;
	opacity: 0.75;
}

.hcgpt-salon-performance__trend--up {
	color: var(--hcgpt-success-hover, #047857);
	background: color-mix(in srgb, var(--hcgpt-success) 12%, transparent);
	border-color: color-mix(in srgb, var(--hcgpt-success) 26%, transparent);
}

.hcgpt-salon-performance__trend--down {
	color: var(--hcgpt-danger, #ef4444);
	background: color-mix(in srgb, var(--hcgpt-danger) 10%, transparent);
	border-color: color-mix(in srgb, var(--hcgpt-danger) 24%, transparent);
}

.hcgpt-salon-performance__trend--flat {
	color: var(--hcgpt-color-text-muted);
}

/* ===== 2 · Business health KPIs ===== */
.hcgpt-salon-performance__health {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.hcgpt-salon-performance__kpi {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 13px);
	background: var(--hcgpt-color-surface);
}

.hcgpt-salon-performance__kpi span {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__kpi strong {
	font-size: 1.5rem;
	line-height: 1;
}

.hcgpt-salon-performance__kpi--booked strong { color: var(--hcgpt-perf-booked); }
.hcgpt-salon-performance__kpi--added strong { color: var(--hcgpt-perf-added); }
.hcgpt-salon-performance__kpi--retail strong { color: var(--hcgpt-perf-retail); }

/* Upsell: the achievement KPI — gradient border tile (Ticket V2 pattern). */
.hcgpt-salon-performance__kpi--upsell {
	border-color: transparent;
	background:
		linear-gradient(
			color-mix(in srgb, var(--hcgpt-primary) 6%, var(--hcgpt-color-surface)),
			color-mix(in srgb, var(--hcgpt-primary) 6%, var(--hcgpt-color-surface))
		) padding-box,
		var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b)) border-box;
}

/* ===== Layout rows + panels ===== */
.hcgpt-salon-performance__row {
	display: grid;
	gap: 12px;
}

.hcgpt-salon-performance__row--charts {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.hcgpt-salon-performance__row--intel,
.hcgpt-salon-performance__row--ops {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hcgpt-salon-performance__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 13px);
	background: var(--hcgpt-color-surface);
	min-width: 0;
}

.hcgpt-salon-performance__panel--flat {
	border: 0;
	padding: 0;
	background: transparent;
}

.hcgpt-salon-performance__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hcgpt-salon-performance__panel-head h2 {
	margin: 0;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__panel-meta {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__panel-head select {
	border: 1px solid var(--hcgpt-color-border);
	border-radius: 999px;
	padding: 5px 12px;
	background: var(--hcgpt-color-surface);
	color: var(--hcgpt-color-text);
	font-size: 0.78rem;
}

/* ===== 3 · Revenue composition donut (conic-gradient, no chart lib) ===== */
.hcgpt-salon-performance__donut-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.hcgpt-salon-performance__donut {
	position: relative;
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	border-radius: 50%;
}

.hcgpt-salon-performance__donut-hole {
	position: absolute;
	inset: 17%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hcgpt-color-surface);
	text-align: center;
	padding: 6px;
}

.hcgpt-salon-performance__donut-hole b {
	font-size: 0.98rem;
	line-height: 1.1;
}

.hcgpt-salon-performance__legend {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hcgpt-salon-performance__legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hcgpt-salon-performance__legend-row i {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.hcgpt-salon-performance__legend-row--booked i { background: var(--hcgpt-perf-booked); }
.hcgpt-salon-performance__legend-row--added i { background: var(--hcgpt-perf-added); }
.hcgpt-salon-performance__legend-row--retail i { background: var(--hcgpt-perf-retail); }

.hcgpt-salon-performance__legend-row span {
	flex: 1;
	min-width: 0;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__legend-row em {
	font-style: normal;
	font-weight: 800;
	font-size: 0.82rem;
}

.hcgpt-salon-performance__legend-row b {
	font-size: 0.78rem;
	color: var(--hcgpt-color-text-muted);
}

/* ===== 4 · Revenue trend (inline SVG bars) ===== */
.hcgpt-salon-performance__trend-svg {
	display: block;
	width: 100%;
	height: 190px;
}

.hcgpt-salon-performance__trend-bar {
	fill: var(--hcgpt-perf-added);
	opacity: 0.85;
}

.hcgpt-salon-performance__trend-bar:hover {
	opacity: 1;
}

.hcgpt-salon-performance__trend-label {
	fill: var(--hcgpt-color-text-muted);
	font-family: var(--hcgpt-perf-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ===== 6 · Top performer achievements ===== */
.hcgpt-salon-performance__tops {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.hcgpt-salon-performance__tops[hidden] {
	display: none;
}

.hcgpt-salon-performance__top-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: var(--hcgpt-radius-md, 13px);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--hcgpt-color-surface), var(--hcgpt-color-surface)) padding-box,
		var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b)) border-box;
}

.hcgpt-salon-performance__top-card span {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__top-card strong {
	font-family: var(--hcgpt-perf-display);
	font-weight: 700;
	font-size: 1.18rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcgpt-salon-performance__top-card b {
	font-size: 0.95rem;
}

/* ===== 5 · Operator performance cards ===== */
.hcgpt-salon-performance__operators {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 12px;
}

.hcgpt-salon-performance__operator {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 13px);
	background: var(--hcgpt-color-surface);
}

.hcgpt-salon-performance__operator.is-first {
	border-color: transparent;
	background:
		linear-gradient(var(--hcgpt-color-surface), var(--hcgpt-color-surface)) padding-box,
		var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b)) border-box;
}

.hcgpt-salon-performance__operator-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hcgpt-salon-performance__operator-head strong {
	flex: 1;
	min-width: 0;
	font-family: var(--hcgpt-perf-display);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcgpt-salon-performance__operator-head b {
	font-size: 1.02rem;
}

.hcgpt-salon-performance__rank {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	border: 1px solid var(--hcgpt-color-border);
	background: var(--hcgpt-color-surface-2);
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__operator.is-first .hcgpt-salon-performance__rank {
	border-color: transparent;
	background: var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b));
	color: var(--hcgpt-color-on-primary, #fff);
}

.hcgpt-salon-performance__share {
	height: 5px;
	border-radius: 999px;
	background: var(--hcgpt-color-surface-2);
	overflow: hidden;
}

.hcgpt-salon-performance__share i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--hcgpt-brand-gradient, linear-gradient(120deg, #6e3aff, #ff3d8b));
}

.hcgpt-salon-performance__operator-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
}

.hcgpt-salon-performance__operator-grid span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.hcgpt-salon-performance__operator-grid small {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__operator-grid b {
	font-size: 0.88rem;
}

/* ===== 7 · Retail intelligence ===== */
.hcgpt-salon-performance__mini-title {
	margin: 0 0 8px;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__product {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--hcgpt-color-border);
}

.hcgpt-salon-performance__product:last-child {
	border-bottom: 0;
}

.hcgpt-salon-performance__product-thumb {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	object-fit: cover;
	border: 1px solid var(--hcgpt-color-border);
	background: var(--hcgpt-color-surface-2);
}

.hcgpt-salon-performance__product-thumb--letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hcgpt-perf-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__product-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.hcgpt-salon-performance__product-copy strong {
	font-size: 0.86rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcgpt-salon-performance__product-copy small {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__product > b {
	font-size: 0.9rem;
	color: var(--hcgpt-perf-retail);
}

/* ===== 8 · Service intelligence ===== */
.hcgpt-salon-performance__svc-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.hcgpt-salon-performance__rank-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--hcgpt-color-border);
}

.hcgpt-salon-performance__rank-row:last-child {
	border-bottom: 0;
}

.hcgpt-salon-performance__rank-row i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hcgpt-color-surface-2);
	border: 1px solid var(--hcgpt-color-border);
	font-style: normal;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.58rem;
	font-weight: 700;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__rank-row span {
	flex: 1;
	min-width: 0;
	font-size: 0.84rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcgpt-salon-performance__rank-row b {
	font-size: 0.84rem;
}

/* ===== 9 · Delta insight ===== */
.hcgpt-salon-performance__delta-flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.hcgpt-salon-performance__delta-step {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hcgpt-salon-performance__delta-step small {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__delta-step strong {
	font-size: 1.12rem;
	line-height: 1.05;
}

.hcgpt-salon-performance__delta-step--gain {
	padding: 8px 12px;
	border-radius: var(--hcgpt-radius-md, 12px);
	border: 1px solid color-mix(in srgb, var(--hcgpt-success) 28%, transparent);
	background: color-mix(in srgb, var(--hcgpt-success) 10%, transparent);
}

.hcgpt-salon-performance__delta-step--gain strong {
	color: var(--hcgpt-success-hover, #047857);
}

.hcgpt-salon-performance__delta-step--gain.is-negative {
	border-color: color-mix(in srgb, var(--hcgpt-danger) 26%, transparent);
	background: color-mix(in srgb, var(--hcgpt-danger) 8%, transparent);
}

.hcgpt-salon-performance__delta-step--gain.is-negative strong {
	color: var(--hcgpt-danger, #ef4444);
}

.hcgpt-salon-performance__delta-arrow {
	font-style: normal;
	font-size: 1rem;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__delta-caption {
	margin: 0;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__delta-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hcgpt-salon-performance__delta-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--hcgpt-color-border);
	background: var(--hcgpt-color-surface-2);
	font-size: 0.76rem;
}

.hcgpt-salon-performance__delta-chip b {
	font-weight: 800;
}

.hcgpt-salon-performance__delta-chip i {
	font-style: normal;
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

/* ===== 10+11 · Stat tiles (productivity + live) ===== */
.hcgpt-salon-performance__stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.hcgpt-salon-performance__stat-grid--live {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hcgpt-salon-performance__stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px;
	border: 1px solid var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 12px);
	background: var(--hcgpt-color-surface-2);
	min-width: 0;
}

.hcgpt-salon-performance__stat span {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__stat strong {
	font-size: 1.16rem;
	line-height: 1;
}

.hcgpt-salon-performance__stat.is-pulse strong {
	color: var(--hcgpt-success-hover, #047857);
}

/* Live header dot: the section breathes. */
.hcgpt-salon-performance__live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hcgpt-success, #10b981);
	animation: hcgpt-perf-pulse 2s ease-in-out infinite;
}

@keyframes hcgpt-perf-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
	.hcgpt-salon-performance__live-dot {
		animation: none;
	}
}

/* ===== Compact rows (retail operators) ===== */
.hcgpt-salon-performance__compact-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--hcgpt-color-border);
}

.hcgpt-salon-performance__compact-row:last-child {
	border-bottom: 0;
}

.hcgpt-salon-performance__compact-row span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.hcgpt-salon-performance__compact-row strong {
	font-size: 0.84rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcgpt-salon-performance__compact-row small {
	font-family: var(--hcgpt-perf-mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcgpt-color-text-muted);
}

.hcgpt-salon-performance__compact-row b {
	font-size: 0.86rem;
}

/* ===== Compact empty states — hard cap, no dead zones ===== */
.hcgpt-salon-performance__empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	max-height: 120px;
	padding: 16px;
	border: 1px dashed var(--hcgpt-color-border);
	border-radius: var(--hcgpt-radius-md, 12px);
	text-align: center;
}

.hcgpt-salon-performance__empty p {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 600;
}

.hcgpt-salon-performance__empty small {
	font-size: 0.74rem;
	color: var(--hcgpt-color-text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
	.hcgpt-salon-performance__row--charts {
		grid-template-columns: 1fr;
	}

	.hcgpt-salon-performance__stat-grid--live {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.hcgpt-salon-performance__hero {
		grid-template-columns: 1fr;
	}

	.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__top[data-perf-relocated] {
		gap: 10px;
		padding-left: var(--hcgpt-topbar-mobile-title-offset, 0px);
	}

	.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__title {
		font-size: var(--hcgpt-font-size-16);
	}

	.hcgpt-salon-performance__filters-head {
		display: block;
	}

	.hcgpt-salon-performance__filters-grab {
		display: none;
	}

	.hcgpt-salon-performance__filters,
	.hcgpt-app-shell.hcgpt-scope[data-shell="v2"][data-hcgpt-app="unified"][data-view="performance"] .hcgpt-app-topbar .hcgpt-salon-performance__filters {
		position: static;
		z-index: auto;
		width: 100%;
		max-width: none;
		max-height: none;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 3px;
		padding: 8px;
		border: 1px solid var(--hcgpt-color-border);
		border-radius: 16px;
		background: color-mix(in srgb, var(--hcgpt-color-surface) 96%, transparent);
		box-shadow: none;
		overflow: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.hcgpt-salon-performance__filters button {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: flex-start;
		min-height: 38px;
		padding: 0 14px;
		font-family: var(--hcgpt-font-sans);
		font-size: 0.82rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
		text-align: left;
		border-radius: 12px;
	}

	.hcgpt-salon-performance__filters button.is-active {
		background: var(--hcgpt-color-surface-2);
		box-shadow: none;
	}

	/* Custom date range, relocated into the sheet on mobile, stacks full-width. */
	.hcgpt-salon-performance__filters .hcgpt-salon-performance__custom {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-top: 4px;
		padding-top: 8px;
		border-top: 1px solid var(--hcgpt-color-border);
	}

	.hcgpt-salon-performance__filters .hcgpt-salon-performance__custom label,
	.hcgpt-salon-performance__filters .hcgpt-salon-performance__custom input {
		width: 100%;
	}

	.hcgpt-salon-performance__filters .hcgpt-salon-performance__custom .hcgpt-btn {
		width: 100%;
		justify-content: center;
	}

	.hcgpt-salon-performance__hero-card {
		min-height: 150px;
	}

	.hcgpt-salon-performance__health {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hcgpt-salon-performance__tops {
		grid-template-columns: 1fr;
	}

	.hcgpt-salon-performance__row--intel,
	.hcgpt-salon-performance__row--ops {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.hcgpt-salon-performance__health {
		grid-template-columns: 1fr;
	}

	.hcgpt-salon-performance__operators {
		grid-template-columns: 1fr;
	}

	.hcgpt-salon-performance__svc-split {
		grid-template-columns: 1fr;
	}

	.hcgpt-salon-performance__stat-grid,
	.hcgpt-salon-performance__stat-grid--live {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hcgpt-salon-performance__donut-wrap {
		justify-content: center;
	}
}