/* Plot explorer ([epv_plot_explorer]) - layout of tabs, axis rows and the plot. */

.epv-plot-explorer {
	margin: 1rem 0 2rem;
}

/* tab bar: one accent per cell set, scrolls sideways on narrow screens */
.epv-plot-tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
}
.epv-plot-tabs .nav-link {
	white-space: nowrap;
	font-weight: 600;
	color: #333;
}
.epv-plot-tabs .nav-link:disabled {
	color: #999;
	font-weight: 400;
}
.epv-plot-tabs .nav-link.active { background-color: #cfe2ff !important; }

.epv-plot-body {
	border: 1px solid #dee2e6;
	border-top: 0;
	border-radius: 0 0 .375rem .375rem;
	padding: .75rem 1rem 1rem;
}

/* axis button rows */
.epv-plot-axis {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .25rem 0 .5rem;
}
.epv-plot-axis-label {
	font-weight: 600;
	min-width: 1.5rem;
}
/* axis buttons: separate, equally wide, in a mid blue (#005aa3: the hue of
   the site's #004176 with less black) */
.epv-plot-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.epv-plot-explorer .epv-plot-btn {
	--bs-btn-color: #005aa3;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #005aa3;
	--bs-btn-hover-color: #005aa3;
	--bs-btn-hover-bg: #e5eff8;
	--bs-btn-hover-border-color: #005aa3;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #005aa3;
	--bs-btn-active-border-color: #005aa3;
	--bs-btn-disabled-color: #005aa3;
	--bs-btn-disabled-bg: #fff;
	--bs-btn-disabled-border-color: #005aa3;
	--bs-btn-focus-shadow-rgb: 0, 90, 163;
	--bs-btn-border-radius: .15rem;
	--bs-btn-padding-y: .35rem;
	--bs-btn-font-size: 1rem; /* btn-sm's 14 px looked undersized next to the 18 px page text */
	min-width: 6.75rem;
	line-height: 1.3;
}
.epv-plot-btn sub {
	font-size: .75em;
	bottom: -.2em;
}

/* plot with a status overlay (loading / empty / error) */
.epv-plot-stage {
	position: relative;
}
.epv-plot-canvas {
	/* always 4 : 3 (was 1.4 : 1), whatever the screen or browser zoom: the
	   height follows the width. Full width, unless that would be taller than
	   85 % of the window (laptop, zoomed in) - then narrower, same shape, centred. */
	width: min(100%, calc(85vh * 4 / 3));
	aspect-ratio: 4 / 3;
	margin: 0 auto;
}
.epv-plot-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .7);
	color: #555;
	pointer-events: none;
}
.epv-plot-status:empty {
	display: none;
}

.epv-plot-hint {
	font-size: .9375rem;
	color: #666;
	margin: .5rem 0 0;
}

/* filter row: technology dropdown, year range, best-cells switch, counter */
.epv-plot-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin-top: .5rem;
	padding-top: .6rem;
	border-top: 1px dashed #dee2e6;
	font-size: 1rem;
}
.epv-plot-filters .btn {
	--bs-btn-font-size: 1rem;
}
.epv-plot-filters .form-select {
	display: inline-block;
	width: auto;
	font-size: 1rem;
}
.epv-plot-years {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
}
.epv-plot-tech-menu {
	min-width: 14rem;
	max-height: 18rem;
	overflow-y: auto;
}
.epv-plot-tech-menu .form-check {
	margin: 0 .25rem;
	white-space: nowrap;
}
.epv-plot-filters .form-switch {
	margin: 0;
}
.epv-plot-count {
	margin-left: auto;
	color: #666;
}

/* sidebar next to the plot ([epv_plot_explorer sidebar="records"], used on /data):
   the plot takes the remaining width and keeps its shape; without any record
   card the sidebar is hidden and the plot gets the full width */
.epv-plot-main {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.epv-plot-main > .epv-plot-stage {
	flex: 1 1 auto;
	min-width: 0;
}
.epv-plot-side {
	flex: 0 0 250px;
	max-height: 85vh;
	overflow-y: auto;
}
.epv-plot-side:not(:has(.epv-record)) {
	display: none;
}
@media (max-width: 900px) {
	.epv-plot-main { flex-direction: column; }
	.epv-plot-side { flex-basis: auto; width: 100%; }
}