@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;700;800;900&display=swap');

[x-cloak] {
	display: none !important;
}

:root {
	--primary: #3b82f6;
	--bg-dark: #07090f;
	/* Slightly deeper, cooler dark */
	--card-dark: #121620;
	/* Refined card darkness */
}

body {
	font-family: 'Inter', sans-serif;
	background-color: var(--bg-dark);
	background-image: radial-gradient(circle at 20% -10%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
		radial-gradient(circle at 90% 110%, rgba(29, 78, 216, 0.12) 0%, transparent 45%);
	color: #f0f6fc;
	overflow-x: hidden;
	letter-spacing: -0.01em;
	user-select: none;
	-webkit-user-select: none;
	transition: background-image 0.45s ease, background-color 0.45s ease;
}

body.mode-water {
	background-color: #07090f;
	background-image: radial-gradient(circle at 18% -10%, rgba(59, 130, 246, 0.2) 0%, transparent 52%),
		radial-gradient(circle at 92% 112%, rgba(30, 64, 175, 0.16) 0%, transparent 46%);
}

body.mode-fuel {
	background-color: #0c0906;
	background-image: radial-gradient(circle at 18% -10%, rgba(249, 115, 22, 0.24) 0%, transparent 52%),
		radial-gradient(circle at 92% 112%, rgba(194, 65, 12, 0.2) 0%, transparent 46%);
}

/* Apply Outfit font to all headings, numbers, and important labels */
h1,
h2,
h3,
h4,
h5,
h6,
.font-black,
.font-extrabold,
select,
[data-stat] {
	font-family: 'Outfit', sans-serif;
	letter-spacing: -0.02em;
}

.glass {
	background: rgba(15, 20, 28, 0.4);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.glass-inner {
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.01);
}

.glass-card {
	background: rgba(255, 255, 255, 0.01);
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.water-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
	overflow: visible;
}

.waves {
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	min-height: 20px;
	max-height: 20px;
}

.parallax>use {
	animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}

.parallax>use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}

.parallax>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}

.parallax>use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}

@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
	}

	100% {
		transform: translate3d(85px, 0, 0);
	}
}

.status-glow {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Hide scrollbar across all browsers */
* {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

*::-webkit-scrollbar {
	display: none;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Date picker icon color */
input[type="date"],
input[type="datetime-local"] {
	/*color-scheme: dark;*/
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.9;
	cursor: pointer;
}

input[type="date"]::-moz-calendar-picker-indicator,
input[type="datetime-local"]::-moz-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.9;
	cursor: pointer;
}

/* Global Button Micro-Animations */
button {
	transition: transform 0.15s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
}

button:active:not(:disabled) {
	transform: scale(0.94) !important;
}