/* Live energy dashboard - sits on top of ../../assets/all.css and follows its dark/light switch */

:root {
	--e-card:		#3a3a3a;
	--e-card-2:		#454545;
	--e-line:		#555;
	--e-muted:		#a8a8a8;
	--e-text:		#fff;
	--e-shadow:		0 0 5px 0 #1e1e1e;

	--e-solar:		#ffb300;
	--e-self:		#00a990;
	--e-export:		#42a5f5;
	--e-import:		#f97352;
	--e-charge:		#f0a030;
	--e-discharge:	#42a5f5;
	--e-ok:			#00a990;
	--e-warn:		#f0a030;
	--e-dead:		#8a8a8a;
}

body.lightMode {
	--e-card:		#fff;
	--e-card-2:		#f2f2f2;
	--e-line:		#ddd;
	--e-muted:		#6a6a6a;
	--e-text:		#333;
	--e-shadow:		0 0 5px 0 #bbb;
	--e-dead:		#999;
}

/* ---------------------------------------------------------------- building blocks */

.e-wrap			{ color: var(--e-text); font-size: 15px; line-height: 1.5; text-align: left }
.e-wrap h2		{ font-size: 15px; letter-spacing: 3px; margin: 34px 0 12px; color: var(--e-text) }
.e-wrap h2:first-child { margin-top: 0 }

.e-card			{ background: var(--e-card); border-radius: 10px; box-shadow: var(--e-shadow); padding: 16px 18px }
.e-grid			{ display: grid; gap: 14px }
.e-grid--4		{ grid-template-columns: repeat(4, 1fr) }
.e-grid--3		{ grid-template-columns: repeat(3, 1fr) }
.e-grid--2		{ grid-template-columns: repeat(2, 1fr) }

.e-label		{ color: var(--e-muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase }
.e-value		{ font-size: 30px; font-weight: bold; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums }
.e-value small	{ font-size: 15px; font-weight: normal; color: var(--e-muted); margin-left: 3px }
.e-sub			{ color: var(--e-muted); font-size: 13px; margin-top: 4px }

.e-solar		{ color: var(--e-solar) }
.e-self			{ color: var(--e-self) }
.e-export		{ color: var(--e-export) }
.e-import		{ color: var(--e-import) }
.e-charge		{ color: var(--e-charge) }
.e-discharge	{ color: var(--e-discharge) }

/* ------------------------------------------------------------------ status pill */

.e-status		{ display: inline-flex; align-items: center; gap: 8px; background: var(--e-card); border-radius: 20px;
				  padding: 6px 14px; font-size: 13px; color: var(--e-muted); box-shadow: var(--e-shadow) }
.e-dot			{ width: 9px; height: 9px; border-radius: 50%; background: var(--e-dead); flex: 0 0 9px }
.e-dot--live	{ background: var(--e-ok); animation: e-pulse 2s ease-in-out infinite }
.e-dot--stale	{ background: var(--e-warn) }
@keyframes e-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

/* --------------------------------------------------------------- the solar split */

.e-split		{ display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--e-card-2); margin: 6px 0 10px }
.e-split span	{ display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;
				  color: #10261f; white-space: nowrap; overflow: hidden; transition: width 0.6s ease }
.e-split__self	{ background: var(--e-self) }
.e-split__export{ background: var(--e-export) }

.e-legend		{ display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--e-muted) }
.e-legend b		{ display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px }

/* ------------------------------------------------------------------ battery card */

.e-batt			{ display: flex; gap: 18px; align-items: center }
.e-ring			{ flex: 0 0 96px; width: 96px; height: 96px }
.e-ring text	{ fill: var(--e-text) }
.e-ring .e-ring__sub { fill: var(--e-muted) }

.e-rows			{ flex: 1 1 auto; min-width: 0 }
.e-rows div		{ display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--e-line) }
.e-rows div:last-child { border-bottom: 0 }
.e-rows span:first-child { color: var(--e-muted) }
.e-rows span:last-child	 { font-variant-numeric: tabular-nums; text-align: right }

/* ------------------------------------------------------------------------ tables */

.e-table		{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.e-table th,
.e-table td		{ padding: 8px 6px; border-bottom: 1px solid var(--e-line); text-align: right }
.e-table th:first-child,
.e-table td:first-child { text-align: left; color: var(--e-muted) }
.e-table thead th { color: var(--e-muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: normal }
.e-table tfoot td { font-weight: bold; border-bottom: 0; border-top: 2px solid var(--e-line) }

/* ------------------------------------------------------------------------ charts */

.e-chart		{ width: 100%; height: auto; display: block; overflow: visible }
.e-chart .e-axis	{ fill: var(--e-muted); font-size: 11px }
.e-chart .e-grid-line { stroke: var(--e-line); stroke-width: 1 }
.e-chart .e-hit		{ fill: transparent }
.e-chart .e-hit:hover { fill: currentColor; opacity: 0.12 }

.e-ranges		{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.e-range		{ background: var(--e-card); color: var(--e-muted); border: 1px solid var(--e-line); border-radius: 5px;
				  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer }
.e-range:hover	{ color: var(--e-text); border-color: var(--e-self) }
.e-range--on	{ background: var(--e-self); border-color: var(--e-self); color: #fff; font-weight: bold }

.e-empty		{ color: var(--e-muted); font-style: italic; padding: 24px 0; text-align: center }
.e-note			{ color: var(--e-muted); font-size: 13px; line-height: 1.7 }

@media (max-width: 992px) {
	.e-grid--4	{ grid-template-columns: repeat(2, 1fr) }
	.e-grid--3	{ grid-template-columns: 1fr }
	.e-grid--2	{ grid-template-columns: 1fr }
}

@media (max-width: 560px) {
	.e-grid--4	{ grid-template-columns: 1fr }
	.e-value	{ font-size: 26px }
	.e-batt		{ flex-direction: column; align-items: flex-start }
}