/* *,
::after,
::before {
	margin: 0;
	padding: 0;
	outline: 0;
	appearance: none;
	border: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
} */

*{
	box-sizing: border-box;
}

@font-face {
	font-family: "Gebuk";
	src: url("../fonts/Gebuk-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Hago";
	src: url("../fonts/Hago-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Preospe";
	src: url("../fonts/Preospe.otf") format("opentype");
}
@font-face {
	font-family: "Roba";
	src: url("../fonts/Roba-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "ibrand";
	src: url("../fonts/ibrand.otf") format("opentype");
}

.header-indicator{
	position: relative;
}

#header-container{
	position:relative;
}

#indicators-container{
	position: relative;
	left: 50%;
	translate: -50%;
}

/* ==========================================================================
   Consolidated Animations, Effects, and Utility Classes
   ========================================================================== */

.content-container::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.content-container {
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

* {
	scrollbar-width: none;
}

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

@keyframes pulse-slow {
	0%, 100% {
		opacity: 0.2;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(1.3);
	}
}

@keyframes glow-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.88;
	}
}

@keyframes border-flow {
	0% {
		border-color: rgba(6, 182, 212, 0.3);
		box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.1);
	}
	50% {
		border-color: rgba(6, 182, 212, 0.8);
		box-shadow: 0 0 20px 5px rgba(6, 182, 212, 0.2);
	}
	100% {
		border-color: rgba(6, 182, 212, 0.3);
		box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.1);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes spin-slow {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes ripple {
	0% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-in-scale {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.animate-pulse-slow {
	animation: pulse-slow 6s infinite ease-in-out;
}

.animate-glow {
	animation: glow-pulse 2.5s infinite ease-in-out;
}

.animate-border-flow {
	animation: border-flow 3s infinite ease-in-out;
}

.animate-shimmer {
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	background-size: 200% 100%;
	animation: shimmer 3s infinite;
}

.animate-spin-slow {
	animation: spin-slow 8s linear infinite;
}

.animate-ripple::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	animation: ripple 2s infinite;
	pointer-events: none;
}

.animate-slide-up {
	animation: slide-up 0.6s ease-out;
}

.animate-fade-in {
	animation: fade-in-scale 0.5s ease-out;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

.card-hover {
	transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.card-hover:hover {
	transform: translateY(-8px) scale(1.01);
	transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.table-row-hover {
	transition: all 0.2s ease;
}

.table-row-hover:hover {
	background: linear-gradient(
		90deg,
		rgba(6, 182, 212, 0.08),
		rgba(139, 92, 246, 0.08)
	);
}

.edit-mode {
	background: linear-gradient(
		135deg,
		rgba(6, 182, 212, 0.15),
		rgba(139, 92, 246, 0.15)
	);
	border-left: 3px solid #06b6d4;
}

.custom-scroll {
	scrollbar-width: thin !important;
	scrollbar-color: #06b6d4 rgba(6, 182, 212, 0.15) !important;
	-webkit-overflow-scrolling: touch;
}

.custom-scroll::-webkit-scrollbar {
	display: block !important;
	width: 6px !important;
	height: 6px !important;
}
.custom-scroll::-webkit-scrollbar-track {
	display: block !important;
	background: rgba(6, 182, 212, 0.1) !important;
	border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb {
	display: block !important;
	background: linear-gradient(135deg, #06b6d4, #8b5cf6) !important;
	border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #0891b2, #7c3aed) !important;
}

.number-cell {
	text-align: right;
	font-family: "JetBrains Mono", "Ubuntu Mono", monospace;
	font-weight: 600;
}

th.number-header {
	text-align: right;
}

.hour-cell {
	font-weight: 700;
	color: #06b6d4;
}
.dark .hour-cell {
	color: #22d3ee;
}
.headrace-value {
	color: #0891b2;
	font-weight: 600;
}
.dark .headrace-value {
	color: #22d3ee;
}
.tailrace-value {
	color: #0d9488;
	font-weight: 600;
}
.dark .tailrace-value {
	color: #2dd4bf;
}
.hourly-value {
	color: #8b5cf6;
	font-weight: 600;
}
.dark .hourly-value {
	color: #a78bfa;
}
.daily-value {
	color: #f59e0b;
	font-weight: 600;
}
.dark .daily-value {
	color: #fbbf24;
}

.conditional-field {
	transition: all 0.3s ease;
}

.hidden_forecast {
	display: none !important;
}

/* ==========================================================================
   Units & Gates Component Layouts & Typography
   ========================================================================== */

/* Units Container (4-column responsive grid) */
.units-container {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	width: 100%;
	align-items: stretch;
}
@media (min-width: 640px) {
	.units-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1280px) {
	.units-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.unit-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.unit-card:hover {
	transform: translateY(-4px);
}

/* Gates Container (Magazine Flex Wrap Layout) */
.gates-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	width: 100%;
	align-items: stretch;
}

.gate-card {
	flex: 1 1 calc(33.333% - 1.25rem);
	min-width: 280px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1536px) {
	.gate-card {
		flex: 1 1 calc(20% - 1.25rem);
		max-width: 340px;
	}
}
.gate-card:hover {
	transform: translateY(-4px);
}

/* Extra Small Text Utility (0.65rem) */
.text-2xs {
	font-size: 0.65rem !important;
	line-height: 0.85rem !important;
}

/* Status Indicator Dot & Ping */
.status-ping {
	animation: status-ping-anim 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-ping-anim {
	75%, 100% {
		transform: scale(2.2);
		opacity: 0;
	}
}

/* Range Slider Controls in Gate Cards */
.manual-control input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	background: #bfdbfe;
	border-radius: 9999px;
	outline: none;
}
.dark .manual-control input[type="range"] {
	background: #1e3a8a;
}
.manual-control input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #2563eb;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
	transition: transform 0.15s ease;
}
.manual-control input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}
.manual-control input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #2563eb;
	cursor: pointer;
	border: none;
	box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
}

/* Gradient Text System for Unit & Gate Metrics */
[class*="gradient-text-"],
[class*="bg-clip-text"] {
	text-shadow: none !important;
}

.gradient-text-orange {
	display: inline-block;
	background: linear-gradient(135deg, #ea580c, #dc2626);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-orange {
	background: linear-gradient(135deg, #fb923c, #f87171);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-amber {
	display: inline-block;
	background: linear-gradient(135deg, #d97706, #ea580c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-amber {
	background: linear-gradient(135deg, #fbbf24, #fb923c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-yellow {
	display: inline-block;
	background: linear-gradient(135deg, #ca8a04, #d97706);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-yellow {
	background: linear-gradient(135deg, #facc15, #fbbf24);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-lime {
	display: inline-block;
	background: linear-gradient(135deg, #65a30d, #16a34a);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-lime {
	background: linear-gradient(135deg, #a3e635, #4ade80);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-teal {
	display: inline-block;
	background: linear-gradient(135deg, #0d9488, #0891b2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-teal {
	background: linear-gradient(135deg, #2dd4bf, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-cyan {
	display: inline-block;
	background: linear-gradient(135deg, #0891b2, #2563eb);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-cyan {
	background: linear-gradient(135deg, #22d3ee, #60a5fa);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-blue {
	display: inline-block;
	background: linear-gradient(135deg, #2563eb, #4f46e5);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-blue {
	background: linear-gradient(135deg, #60a5fa, #818cf8);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.gradient-text-purple {
	display: inline-block;
	background: linear-gradient(135deg, #7c3aed, #c026d3);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dark .gradient-text-purple {
	background: linear-gradient(135deg, #a78bfa, #e879f9);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}