@import "../dojo/dijit/themes/soria/soria.css";

@font-face {
	font-family: "FFInfoDisplay";
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url("../fonts/39CE4B_0_0.woff2") format("woff2"),
		url("../fonts/39CE4B_0_0.woff") format("woff");
}

@font-face {
	font-family: "FFInfoDisplay";
	font-style: normal;
	font-weight: bold;
	font-display: swap;
	src: url("../fonts/39CE4B_1_0.woff2") format("woff2"),
		url("../fonts/39CE4B_1_0.woff") format("woff");
}

:root {
	--jati-blue: #009ade;
	--jati-blue-dark: #007fb8;
	--jati-green: #009d4f;
	--jati-text: #454d50;
	--jati-muted: #687276;
	--jati-border: #d9e4e7;
	--jati-surface: #f3f7f8;
	--jati-white: #fff;
	--jati-shadow: 0 12px 34px rgba(49, 72, 79, 0.16);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: 0;
	width: 100%;
}

body {
	background: #edf3f4;
	color: var(--jati-text);
	font-family: "FFInfoDisplay", "Trebuchet MS", sans-serif;
	font-size: 14px;
	line-height: 1.35;
	overflow-x: hidden;
}

.dew-calculator {
	background: var(--jati-white);
	border: 1px solid rgba(0, 154, 222, 0.16);
	border-radius: 14px;
	box-shadow: var(--jati-shadow);
	height: 500px;
	margin: 0 auto;
	max-width: 750px;
	overflow: hidden;
	width: 100%;
}

.calculator-header {
	align-items: center;
	background: linear-gradient(115deg, var(--jati-blue-dark) 0%, var(--jati-blue) 56%, var(--jati-green) 135%);
	display: flex;
	height: 76px;
	justify-content: space-between;
	padding: 13px 24px;
}

.calculator-title {
	color: var(--jati-white);
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
}

.calculator-logo {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 8px;
	display: flex;
	height: 50px;
	justify-content: center;
	padding: 7px 12px;
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	width: 146px;
}

.calculator-logo img {
	display: block;
	height: 34px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.calculator-logo:hover {
	background: var(--jati-white);
	box-shadow: 0 5px 14px rgba(22, 65, 80, 0.2);
	transform: translateY(-1px);
}

.calculator-logo:focus-visible {
	box-shadow: 0 0 0 3px var(--jati-white), 0 0 0 6px rgba(0, 157, 79, 0.82);
	outline: 0;
}

.calculator-body {
	display: flex;
	flex-direction: column;
	height: calc(100% - 76px);
	padding: 14px 22px 12px;
}

.calculator-controls {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calculator-control {
	background: var(--jati-white);
	border: 1px solid var(--jati-border);
	border-radius: 11px;
	box-shadow: 0 4px 14px rgba(47, 75, 84, 0.06);
	min-width: 0;
	padding: 9px 14px 10px;
}

.control-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 7px;
}

.control-label {
	color: var(--jati-text);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.15;
	margin: 0;
}

.control-value {
	color: var(--jati-blue-dark);
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}

.slider-wrap {
	align-items: center;
	display: flex;
	height: 24px;
	padding: 0 2px;
}

.slider-wrap > div {
	width: 100%;
}

/* The legacy Dojo slider remains functional, but adopts the JATI control styling. */
.soria .dijitSliderBarH,
.soria .dijitSliderBumperH,
.dijitSliderBarH,
.dijitSliderBumperH {
	border: 0 !important;
	height: 7px !important;
}

.soria .dijitSliderBarContainerH,
.dijitSliderBarContainerH {
	background: #dfe8ea;
	border-radius: 99px;
	height: 7px;
}

.soria .dijitSliderLeftBumper,
.soria .dijitSliderProgressBarH,
.dijitSliderLeftBumper,
.dijitSliderProgressBarH {
	background: linear-gradient(90deg, var(--jati-blue), var(--jati-green)) !important;
	border-radius: 99px 0 0 99px;
}

.soria .dijitSliderProgressBarH,
.dijitSliderProgressBarH {
	z-index: 2 !important;
}

.soria .dijitSliderRemainingBarH,
.soria .dijitSliderRightBumper,
.dijitSliderRemainingBarH,
.dijitSliderRightBumper {
	background: transparent !important;
	border-radius: 0 99px 99px 0;
}

.soria .dijitSliderRightBumper,
.dijitSliderRightBumper {
	background: #dfe8ea !important;
}

.soria .dijitSliderRemainingBarH,
.dijitSliderRemainingBarH {
	z-index: 1 !important;
}

.soria .dijitSliderImageHandleH,
.dijitSliderImageHandleH {
	background: var(--jati-white) !important;
	border: 4px solid var(--jati-blue) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 7px rgba(33, 82, 98, 0.28);
	height: 21px !important;
	margin-left: -10px !important;
	top: -7px !important;
	width: 21px !important;
}

.soria .dijitSliderHover .dijitSliderImageHandleH,
.dijitSliderHover .dijitSliderImageHandleH {
	border-color: var(--jati-green) !important;
}

.soria .dijitSliderFocused .dijitSliderImageHandleH,
.dijitSliderFocused .dijitSliderImageHandleH {
	box-shadow: 0 0 0 3px rgba(0, 154, 222, 0.24), 0 2px 7px rgba(33, 82, 98, 0.28);
	outline: 0;
}

.calculator-results {
	align-items: stretch;
	display: grid;
	gap: 12px;
	grid-template-columns: 145px 125px minmax(0, 1fr);
	margin: 11px 0 9px;
}

.result-card {
	background: var(--jati-surface);
	border-left: 4px solid var(--jati-blue);
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 7px 10px;
}

.result-card-tf75 {
	border-left-color: var(--jati-green);
}

.result-label {
	color: var(--jati-muted);
	font-size: 12px;
	line-height: 1.1;
}

.result-value {
	color: var(--jati-blue-dark);
	font-size: 23px;
	font-weight: bold;
	line-height: 1.05;
	margin-top: 3px;
	white-space: nowrap;
}

.result-card-tf75 .result-value {
	color: var(--jati-green);
}

.calculator-note {
	align-self: center;
	color: var(--jati-muted);
	font-size: 12px;
	line-height: 1.25;
	margin: 0;
	padding: 3px 2px;
}

.calculator-chart {
	background: linear-gradient(180deg, var(--jati-white), #f8fafb);
	border: 1px solid var(--jati-border);
	border-radius: 10px;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

#grafikContainer {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	width: 100%;
}

#grafik {
	height: 100%;
	width: 100%;
}

#grafik svg,
#grafik > svg {
	display: block;
	max-height: 100%;
	max-width: 100%;
}

#grafik svg * {
	font-family: "FFInfoDisplay", "Trebuchet MS", sans-serif !important;
}

.chart-legend {
	align-items: center;
	color: var(--jati-muted);
	display: flex;
	flex: 0 0 24px;
	font-size: 12px;
	gap: 7px;
	padding: 2px 12px 5px;
}

.chart-legend-swatch {
	background: var(--jati-blue);
	border-radius: 3px;
	display: block;
	height: 11px;
	width: 11px;
}

@media (max-width: 600px) {
	body {
		background: var(--jati-white);
	}

	.dew-calculator {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}

	.calculator-header {
		height: 72px;
		padding: 11px 14px;
	}

	.calculator-title {
		font-size: 21px;
	}

	.calculator-logo {
		height: 46px;
		padding: 7px 10px;
		width: 126px;
	}

	.calculator-logo img {
		height: 30px;
	}

	.calculator-body {
		height: auto;
		padding: 14px;
	}

	.calculator-controls,
	.calculator-results {
		grid-template-columns: minmax(0, 1fr);
	}

	.calculator-control {
		padding: 12px 14px 13px;
	}

	.control-heading {
		margin-bottom: 10px;
	}

	.slider-wrap {
		height: 28px;
	}

	.calculator-results {
		gap: 9px;
		margin: 12px 0;
	}

	.result-card {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		min-height: 58px;
		padding: 10px 13px;
	}

	.result-label {
		font-size: 14px;
	}

	.result-value {
		font-size: 25px;
		margin: 0 0 0 12px;
	}

	.calculator-note {
		background: var(--jati-surface);
		border-radius: 8px;
		font-size: 13px;
		line-height: 1.4;
		padding: 12px 13px;
	}

	.calculator-chart {
		flex: none;
		height: 272px;
	}
}

@media (max-width: 360px) {
	.calculator-title {
		font-size: 19px;
	}

	.calculator-logo {
		width: 112px;
	}

	.control-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.calculator-logo {
		transition: none;
	}
}