/* BCOM Horizontal Data Gauge – frontend styling */

.bcom-gauge {
	--active-bar-color: #27ae60;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 100%;
}

.gauge-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	justify-content: flex-start;
}

.gauge-labels--label-right {
	justify-content: flex-end;
}

.gauge-display {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.gauge-display--counter-right .gauge-counter {
	order: 2;
}

.gauge-display--counter-right .gauge-viz {
	order: 1;
}

.gauge-counter {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25em;
}

.gauge-number {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	transition: color 0.5s ease;
}

.gauge-viz {
	position: relative;
	flex: 1;
	min-width: 120px;
	overflow: visible;
}

.gauge-track {
	position: relative;
	width: 100%;
	overflow: visible;
	border-radius: 4px;
}

/* Smart gradient fill: uses --active-bar-color set by JS on .bcom-gauge */
.gauge-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 4px;
	transition: width 2s ease-out;
	pointer-events: none;
	overflow: hidden;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--active-bar-color) 70%, black) 0%,
		var(--active-bar-color) 100%
	);
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* Inner wrapper so sheen positioning is always relative to the fill bar (not ancestor transforms) */
.gauge-fill-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform: translateZ(0);
}

/* Sheen only on fill, only while track is hovered; constrained to .gauge-fill-inner */
.gauge-fill-inner::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 50%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.25) 50%,
		transparent 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	animation: none;
}

.gauge-viz:hover .gauge-fill-inner::after {
	opacity: 1;
	animation: sheen-sweep 3s linear infinite;
	animation-delay: 0.5s;
}

@keyframes sheen-sweep {
	0% { left: -100%; }
	100% { left: 200%; }
}

/* Marker + benchmark label: outside track so tooltip isn’t clipped */
/* Ghost delta fill: shows gap to benchmark on hover */
.gauge-ghost-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-radius: 0 4px 4px 0;
	background: repeating-linear-gradient(
		-45deg,
		color-mix(in srgb, var(--active-bar-color, #27ae60) 30%, transparent),
		color-mix(in srgb, var(--active-bar-color, #27ae60) 30%, transparent) 4px,
		color-mix(in srgb, var(--active-bar-color, #27ae60) 18%, transparent) 4px,
		color-mix(in srgb, var(--active-bar-color, #27ae60) 18%, transparent) 8px
	);
	pointer-events: none;
}

.gauge-ghost-fill.gauge-ghost-fill--hidden {
	display: none;
}

/* Hover anywhere on the bar (viz) to show ghost; track alone can miss when fill is on top */
.gauge-viz:hover .gauge-ghost-fill:not(.gauge-ghost-fill--hidden) {
	opacity: 1;
}

/* Delta value inline with our label: hidden by default, appears on bar hover */
.gauge-delta-in-label {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
	vertical-align: baseline;
}

.bcom-gauge.gauge-viz-hovered .gauge-delta-in-label.gauge-delta-in-label--has-value {
	max-width: 8em;
	opacity: 1;
}


/* Marker + benchmark label: outside track so tooltip is not clipped */
.gauge-marker-wrap {
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 0;
	width: 0;
	transform: translateX(-50%);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gauge-tooltip {
	position: relative;
	order: 1;
	flex-shrink: 0;
	transform: translateY(-100%);
	margin-bottom: 0;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 4px;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Benchmark value inline in tooltip: hidden by default, only show when track is hovered */
.gauge-tooltip-value {
	display: inline-block;
	width: 0;
	max-width: 0;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
	vertical-align: top;
}

.bcom-gauge.gauge-viz-hovered .gauge-tooltip-value {
	width: auto;
	max-width: 6em;
	opacity: 1;
	visibility: visible;
	transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

.gauge-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: inherit;
}

.gauge-marker {
	order: 2;
	flex: 1;
	width: 2px;
	min-height: 4px;
	margin-top: -30px;
	pointer-events: none;
	position: relative;
}

.gauge-marker::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	transition: box-shadow 0.3s ease;
}

.gauge-viz:hover .gauge-marker::before {
	animation: marker-node-glow 1.5s ease-in-out infinite;
}

@keyframes marker-node-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0 0 8px 2px rgba(255, 255, 255, 0.3); }
	50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 0 12px 4px rgba(255, 255, 255, 0.4); }
}

/* Mobile: single column, centered, order Bar → Our Label → Counter */
@media (max-width: 767px) {
	.bcom-gauge {
		align-items: center;
		text-align: center;
		gap: 0.75rem;
	}

	.bcom-gauge .gauge-display {
		display: contents;
	}

	.bcom-gauge .gauge-display--counter-right .gauge-counter,
	.bcom-gauge .gauge-display--counter-right .gauge-viz {
		order: unset;
	}

	/* Explicit order so Bar is first, then Our Label, then Counter (override any theme/Elementor order) */
	.bcom-gauge .gauge-viz {
		order: 1 !important;
		width: 100%;
		min-width: 0;
	}

	.bcom-gauge .gauge-labels {
		order: 2 !important;
		justify-content: center;
	}

	.bcom-gauge .gauge-labels--label-right {
		justify-content: center;
	}

	.bcom-gauge .gauge-counter {
		order: 3 !important;
		justify-content: center;
	}
}