/* Eden CEA Command Center — premium dashboard, Eden brand palette */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.ecd-root {
	--ecd-forest: #1B3A2E;
	--ecd-forest-deep: #12271F;
	--ecd-mint: #5FA88A;
	--ecd-mint-glow: #3E7F5E;
	--ecd-gold: #9C7A2E;
	--ecd-gold-bright: #C9A84C;
	--ecd-cream: #FBF9F4;
	--ecd-cream-alt: #F3EEE3;
	--ecd-ink: #23302A;
	--ecd-danger: #B3452F;
	--ecd-warn: #B98A2E;
	--ecd-good: #3E7F5E;
	--ecd-panel: #FFFFFF;
	--ecd-panel-border: #E6E0D2;
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--ecd-ink);
	background: var(--ecd-cream);
}
.ecd-root * { box-sizing: border-box; }
.ecd-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.ecd-header { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 34px; flex-wrap: wrap; }
.ecd-header-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ecd-mint-glow); font-weight: 600; }
.ecd-header h1 { font-family: 'Playfair Display', serif; font-size: 36px; color: var(--ecd-forest); margin: 8px 0 10px; }
.ecd-header-sub { color: #56655D; max-width: 560px; line-height: 1.6; margin: 0; font-size: 14px; }

.ecd-section-title {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ecd-gold);
	font-weight: 600;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ecd-panel-border);
}

.ecd-gauge-section { margin-bottom: 34px; }
.ecd-gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ecd-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Shared widget card shell ---------- */
.ecd-widget, .ecd-hero-gauge {
	background: #fff;
	border: 1px solid var(--ecd-panel-border);
	border-radius: 18px;
	padding: 20px 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 8px 22px rgba(27,58,46,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
	position: relative;
}
.ecd-hero-gauge { width: 240px; padding: 24px 16px 18px; }

.ecd-live-tag {
	position: absolute; top: 12px; right: 14px;
	font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
	padding: 2px 7px; border-radius: 10px; font-weight: 600;
}
.ecd-live-tag.is-live { background: #E4F1EA; color: var(--ecd-good); }
.ecd-live-tag.is-manual { background: var(--ecd-cream-alt); color: #A79A7C; }

/* ---------- GAUGE (light dial, dark needle, readout below) ---------- */
.ecd-gauge-bezel {
	position: relative;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #FFFFFF, #F1ECDD 78%);
	box-shadow:
		0 6px 16px rgba(27,58,46,0.12),
		inset 0 2px 3px rgba(255,255,255,0.9),
		inset 0 -5px 9px rgba(156,122,46,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ecd-hero-gauge .ecd-gauge-bezel { width: 190px; height: 190px; }

.ecd-gauge-bezel svg { position: relative; }

.ecd-gauge-glare {
	position: absolute;
	top: 8%;
	left: 20%;
	width: 50%;
	height: 26%;
	background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%);
	border-radius: 50%;
	pointer-events: none;
}

.ecd-gauge-readout { text-align: center; margin-top: 10px; }
.ecd-gauge-value { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--ecd-forest); line-height: 1; }
.ecd-hero-gauge .ecd-gauge-value { font-size: 36px; }
.ecd-gauge-unit { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8A9689; margin-left: 4px; }

.ecd-gauge-label { font-size: 12.5px; color: var(--ecd-forest); font-weight: 600; margin-top: 8px; text-align: center; }
.ecd-gauge-zone-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 20px; margin-top: 6px; }
.ecd-gauge-zone-tag.zone-optimal { background: #E4F1EA; color: var(--ecd-good); }
.ecd-gauge-zone-tag.zone-low, .ecd-gauge-zone-tag.zone-high { background: #FCF1DC; color: var(--ecd-warn); }
.ecd-gauge-zone-tag.zone-critical { background: #FBEAE4; color: var(--ecd-danger); }

/* ---------- BATTERY (3D energy cell) ---------- */
.ecd-battery-shell { display: flex; flex-direction: column; align-items: center; margin: 4px 0 2px; }
.ecd-battery-nub {
	width: 34px; height: 10px; background: linear-gradient(180deg, #EDE6D2, #C9BFA0);
	border-radius: 4px 4px 0 0; border: 1px solid #D8CFB4; border-bottom: none;
}
.ecd-battery-body {
	position: relative;
	width: 84px; height: 118px;
	background: linear-gradient(155deg, #FFFFFF, #F1ECDD 60%, #E6DEC7);
	border: 1px solid #DCD3B9;
	border-radius: 10px;
	box-shadow: 0 8px 18px rgba(27,58,46,0.12), inset 0 2px 3px rgba(255,255,255,0.8), inset 0 -4px 8px rgba(156,122,46,0.12);
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.ecd-battery-fill {
	position: absolute; bottom: 0; left: 3px; right: 3px;
	border-radius: 6px;
	transition: height .6s ease;
	box-shadow: inset 0 3px 6px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.15);
}
.ecd-battery-glare {
	position: absolute; top: 6%; left: 12%; width: 30%; height: 80%;
	background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
	border-radius: 6px; pointer-events: none;
}
.ecd-battery-bolt { position: relative; z-index: 2; font-size: 20px; margin-top: 44px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

/* ---------- TANK (3D cylinder, water/nutrient) ---------- */
.ecd-tank-shell { display: flex; flex-direction: column; align-items: center; margin: 2px 0; }
.ecd-tank-cap {
	width: 92px; height: 14px; border-radius: 50%;
	background: linear-gradient(180deg, #FFFFFF, #E6DEC7);
	border: 1px solid #DCD3B9;
	box-shadow: inset 0 2px 3px rgba(255,255,255,0.8);
	margin-bottom: -7px; z-index: 2; position: relative;
}
.ecd-tank-body {
	position: relative;
	width: 92px; height: 108px;
	background: linear-gradient(90deg, #F3EEE3, #FFFFFF 45%, #F3EEE3);
	border-left: 1px solid #DCD3B9; border-right: 1px solid #DCD3B9;
	overflow: hidden;
	box-shadow: inset 6px 0 10px -6px rgba(0,0,0,0.08), inset -6px 0 10px -6px rgba(0,0,0,0.08);
}
.ecd-tank-liquid {
	position: absolute; bottom: 0; left: 0; right: 0;
	transition: height .6s ease;
}
.ecd-tank-wave {
	position: absolute; top: -6px; left: -25%; width: 150%; height: 12px;
	background: rgba(255,255,255,0.35);
	border-radius: 50%;
	animation: ecdWave 3.2s ease-in-out infinite;
}
@keyframes ecdWave {
	0%, 100% { transform: translateX(0) scaleY(1); }
	50% { transform: translateX(-6%) scaleY(1.4); }
}
.ecd-tank-glass-glare {
	position: absolute; top: 0; left: 10%; width: 18%; height: 100%;
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.5));
	pointer-events: none;
}
.ecd-tank-base {
	width: 100px; height: 10px; border-radius: 3px;
	background: linear-gradient(180deg, #E6DEC7, #D8CFB4);
	border: 1px solid #CFC5A5;
	margin-top: -1px;
}

/* ---------- SUBSYSTEMS ---------- */
.ecd-subsystem-section { margin-bottom: 34px; }
.ecd-subsystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ecd-subsystem-link { text-decoration: none; color: inherit; display: block; }
.ecd-subsystem-card {
	background: #fff;
	border: 1px solid var(--ecd-panel-border);
	border-radius: 14px;
	padding: 16px;
	position: relative;
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(27,58,46,0.05);
}
.ecd-subsystem-card:hover { transform: translateY(-2px); border-color: var(--ecd-mint); box-shadow: 0 10px 22px rgba(27,58,46,0.1); }
.ecd-subsystem-card::before {
	content: ''; position: absolute; inset: 0; opacity: .6; pointer-events: none;
	background: radial-gradient(circle at 100% 0%, rgba(95,168,138,0.06), transparent 60%);
}
.ecd-subsystem-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ecd-subsystem-icon { font-size: 22px; }
.ecd-subsystem-status-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.status-online .ecd-subsystem-status-dot { background: var(--ecd-good); color: var(--ecd-good); }
.status-warning .ecd-subsystem-status-dot { background: var(--ecd-warn); color: var(--ecd-warn); }
.status-offline .ecd-subsystem-status-dot { background: var(--ecd-danger); color: var(--ecd-danger); }
.ecd-subsystem-name { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--ecd-forest); margin-bottom: 8px; }
.ecd-subsystem-stat { display: flex; justify-content: space-between; font-size: 12px; color: #7A8A80; margin-bottom: 6px; }
.ecd-subsystem-stat strong { color: var(--ecd-ink); font-family: 'IBM Plex Mono', monospace; }
.ecd-subsystem-bottom { display: flex; justify-content: space-between; align-items: center; }
.ecd-subsystem-status-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.status-online .ecd-subsystem-status-label { color: var(--ecd-good); }
.status-warning .ecd-subsystem-status-label { color: var(--ecd-warn); }
.status-offline .ecd-subsystem-status-label { color: var(--ecd-danger); }
.ecd-sync-tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.ecd-sync-tag.is-live { background: #E4F1EA; color: var(--ecd-good); }
.ecd-sync-tag.is-manual { background: var(--ecd-cream-alt); color: #A79A7C; }

/* ---------- ALERTS ---------- */
.ecd-alerts-section { margin-bottom: 20px; }
.ecd-alerts-list { display: flex; flex-direction: column; gap: 8px; }
.ecd-alert-row {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border: 1px solid var(--ecd-panel-border); border-radius: 10px;
	padding: 11px 14px; font-size: 13px;
}
.ecd-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ecd-alert-row.sev-warning .ecd-alert-dot { background: var(--ecd-warn); }
.ecd-alert-row.sev-critical .ecd-alert-dot { background: var(--ecd-danger); }
.ecd-alert-row.sev-info .ecd-alert-dot { background: var(--ecd-mint); }
.ecd-alert-subsystem { color: var(--ecd-gold); font-weight: 600; font-size: 12px; min-width: 150px; }
.ecd-alert-message { color: #56655D; flex: 1; }
.ecd-alert-time { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #7A8A80; }
.ecd-alert-resolve { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ecd-panel-border); background: transparent; color: #7A8A80; cursor: pointer; }
.ecd-alert-resolve:hover { color: var(--ecd-forest); border-color: var(--ecd-mint); }

.ecd-admin-hint { color: #7A8A80; font-size: 12.5px; text-align: center; margin-top: 24px; }
.ecd-loading, .ecd-empty-state { padding: 24px; text-align: center; color: #7A8A80; font-size: 13px; }

@media (max-width: 1000px) {
	.ecd-gauge-grid { grid-template-columns: repeat(2, 1fr); }
	.ecd-resource-grid { grid-template-columns: repeat(2, 1fr); }
	.ecd-subsystem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ecd-gauge-grid { grid-template-columns: 1fr 1fr; }
	.ecd-resource-grid { grid-template-columns: 1fr; }
	.ecd-subsystem-grid { grid-template-columns: 1fr; }
	.ecd-header { flex-direction: column; align-items: flex-start; }
}