/* BMQ Divi Charts - shared front-end styles */

.bmq-chart-wrap {
	width: 100%;
}

.bmq_chart_title {
	margin: 0 0 0.75em;
}

/* Visually hidden but screen-reader-accessible accessible fallback for canvas/SVG charts */
.bmq-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

/* ---------- Bar / Pie / Line (Chart.js canvas) ---------- */

.bmq-chart-canvas-wrap {
	position: relative;
	width: 100%;
	height: 320px;
}

.bmq-chart-canvas-wrap canvas.bmq-chart-canvas {
	width: 100% !important;
	height: 100% !important;
}

/* ---------- Funnel Visualization ---------- */

.bmq-funnel {
	display: flex;
	flex-direction: column;
	gap: var( --bmq-funnel-gap, 4px );
}

.bmq-funnel-stage {
	position: relative;
	opacity: 0;
	transform: scaleY( 0.85 );
	transform-origin: center;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.bmq-funnel-stage.bmq-is-visible {
	opacity: 1;
	transform: scaleY( 1 );
}

.bmq-funnel-stage svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * No `color` here on purpose - stage text color is computed per stage (either
 * auto-contrast against that stage's fill, or the explicit pair of colors from
 * the Stage Text toggle) and applied inline by the module. A color declared
 * here would be dead weight at best and, for anyone reading the stylesheet,
 * would misleadingly look like the place to change it.
 */
.bmq_funnel_stage_label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
}

.bmq_funnel_stage_name {
	font-weight: 600;
}

.bmq_funnel_stage_value {
	font-size: 0.85em;
}

/* ---------- Heatmap ---------- */

.bmq-heatmap-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: var( --bmq-cell-gap, 2px );
}

.bmq_heatmap_axis {
	padding: 0.5em;
	text-align: center;
	font-weight: 600;
}

.bmq_heatmap_corner {
	background: transparent;
}

.bmq_heatmap_cell {
	text-align: center;
	vertical-align: middle;
	border-radius: 4px;
	padding: 0.5em;
}

/* ---------- Gauge / Progress Bar ---------- */

.bmq-chart-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
}

.bmq-gauge-visual {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bmq-chart-gauge--bar .bmq-gauge-visual {
	width: 100%;
	flex-direction: column;
}

/* Fat Bar and Dot Grid stack their value under the visual like the bar does,
   but size to their own content rather than filling the column. */
.bmq-chart-gauge--fatbar .bmq-gauge-visual,
.bmq-chart-gauge--dots .bmq-gauge-visual {
	flex-direction: column;
}

.bmq-gauge-bar-track {
	width: 100%;
	overflow: hidden;
}

.bmq-gauge-bar-fill {
	height: 100%;
	transition: width 1s ease;
}

/* Fat Bar: a thick column filling bottom-up. The track clips the fill, so the
   fill needs no radius of its own. */
.bmq-gauge-fatbar-track {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

.bmq-gauge-fatbar-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transition: height 1s ease;
}

/* Dot Grid. Colors arrive as --bmq-dot-on / --bmq-dot-off on the container so
   the reveal class on an ancestor can repaint the "on" dots. */
.bmq-gauge-dots {
	display: grid;
	justify-content: center;
	max-width: 100%;
}

.bmq-gauge-dot {
	border-radius: 50%;
	background: var( --bmq-dot-off, #e5e5e5 );
	transition: background-color 0.45s ease;
}

/* The finished state is the default, so a grid renders correctly with no JS at
   all. The animation is opt-in the other way round: JS adds .bmq-dots-pending
   to knock the "on" dots back to the track color, then drops it to play them in.
   This is the same direction the bar and ring fills already work. */
.bmq-gauge-dot--on {
	background: var( --bmq-dot-on, currentColor );
}

.bmq-gauge-dots.bmq-dots-pending .bmq-gauge-dot--on {
	background: var( --bmq-dot-off, #e5e5e5 );
}

.bmq-gauge-ring,
.bmq-gauge-arc {
	display: block;
	max-width: 100%;
	height: auto;
}

.bmq-gauge-ring-fill,
.bmq-gauge-arc-fill {
	transition: stroke-dashoffset 1s ease;
}

.bmq_gauge_value {
	font-weight: 700;
}

.bmq-chart-gauge--ring .bmq_gauge_value,
.bmq-chart-gauge--gauge .bmq_gauge_value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.bmq-chart-gauge--bar .bmq_gauge_value,
.bmq-chart-gauge--fatbar .bmq_gauge_value,
.bmq-chart-gauge--dots .bmq_gauge_value {
	margin-top: 0.25em;
}