
/* Overview v2 */
.esd-overview-v2 .esd-overview-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid rgba(15,23,42,.08);background:linear-gradient(180deg,#fff,rgba(248,250,252,.9));box-shadow:0 10px 30px rgba(15,23,42,.05);}
.esd-overview-v2 .button-title{display:flex;align-items:center;gap:14px;}
.esd-overview-v2 .button-title h2{margin:0;font-size:25px;line-height:1.1;letter-spacing:-.02em;}
.esd-overview-v2 .logo{width:42px;height:42px;object-fit:contain;}
.esd-overview-v2 .muted{color:#475569;font-size:13px;}
.esd-overview-live-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:22px 0;}
.esd-overview-v2 .card{border-top:2px solid rgb(86 86 86);border-right:3px solid rgb(86 86 86);border-bottom:3px solid rgb(86 86 86);background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.06);box-sizing:border-box;}
.esd-overview-kpi{position:relative;overflow:hidden;min-height:150px;padding:20px 20px 20px 30px;display:flex;flex-direction:column;gap:8px;}
.esd-overview-kpi:before{background:#16a34a;}
.esd-overview-kpi--solar:before{background:#f59e0b}.esd-overview-kpi--battery:before{background:#16a34a}.esd-overview-kpi--home:before{background:#2563eb}.esd-overview-kpi--grid:before{background:#7c3aed}.esd-overview-kpi--net:before{background:#0f766e}
.esd-kpi-top{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.esd-kpi-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:#f8fafc;font-size:20px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);}
.esd-overview-kpi .big{font-size:34px;line-height:1;font-weight:900;letter-spacing:-.04em;color:#0f172a;margin-top:6px;}
.esd-mini-bars{display:flex;align-items:end;gap:5px;height:34px;margin-top:auto;opacity:.75}.esd-mini-bars i{display:block;width:8px;border-radius:999px 999px 4px 4px;background:#f59e0b}.esd-mini-bars i:nth-child(1){height:9px}.esd-mini-bars i:nth-child(2){height:14px}.esd-mini-bars i:nth-child(3){height:11px}.esd-mini-bars i:nth-child(4){height:19px}.esd-mini-bars i:nth-child(5){height:27px}.esd-mini-bars i:nth-child(6){height:24px}.esd-mini-bars i:nth-child(7){height:17px}.esd-mini-bars i:nth-child(8){height:30px}.esd-mini-bars--blue i{background:#60a5fa}.esd-mini-bars--purple i{background:#a78bfa}.esd-mini-bars--green i{background:#2dd4bf}
.esd-progress{height:12px;border-radius:999px;background:#eaf4ee;overflow:hidden;margin-top:auto}.esd-progress span{display:block;height:100%;border-radius:inherit;background:#16a34a;transition:width .35s ease;}
.esd-overview-main-grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:18px;margin-bottom:18px;}
.esd-overview-flow-card,.esd-overview-money-card{padding:22px;}
.esd-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.esd-card-heading h3{margin:0;font-size:18px;letter-spacing:-.01em}.esd-live-dot{font-size:12px;color:#16a34a;font-weight:800}.esd-live-dot:before{content:'';display:inline-block;width:7px;height:7px;border-radius:99px;background:#16a34a;margin-right:7px;}
.esd-overview-flow-mini{position:relative;min-height:255px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:'solar home grid' 'battery home ev';align-items:center;gap:20px;}
.esd-overview-flow-mini:before,.esd-overview-flow-mini:after{content:'';position:absolute;left:22%;right:22%;top:50%;border-top:2px dashed rgba(37,99,235,.3);z-index:0}.esd-overview-flow-mini:after{top:31%;border-color:rgba(245,158,11,.35)}
.esd-flow-node{position:relative;z-index:1;text-align:center}.esd-flow-node span{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin:0 auto 8px;border-radius:999px;background:#f8fafc;border:1px solid rgba(15,23,42,.08);font-size:30px}.esd-flow-node strong,.esd-flow-node em{display:block}.esd-flow-node strong{font-size:15px;color:#0f172a}.esd-flow-node em{font-style:normal;font-size:13px;color:#475569;margin-top:2px}.esd-flow-node--solar{grid-area:solar}.esd-flow-node--home{grid-area:home}.esd-flow-node--grid{grid-area:grid}.esd-flow-node--battery{grid-area:battery}.esd-flow-node--ev{grid-area:ev}
.esd-overview-flow-summary{border-top:1px solid rgba(15,23,42,.08);padding-top:14px;}
.esd-money-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.esd-money-grid>div{padding:14px;background:#f8fafc;border:1px solid rgba(15,23,42,.05);min-height:100px}.esd-money-grid strong{display:block;font-size:23px;line-height:1.05;color:#0f172a;margin:8px 0;font-weight:900;overflow-wrap:anywhere}.esd-money-grid em,.esd-overview-insight em{display:block;font-style:normal;color:#475569;font-size:13px;}
.esd-overview-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.esd-overview-insight{padding:18px;display:flex;align-items:flex-start;gap:14px}.esd-overview-insight strong{display:block;color:#0f172a}.esd-overview-insight p{margin:5px 0 2px;font-size:24px;line-height:1.1;font-weight:900;color:#0f172a;}
@media (max-width:1200px){.esd-overview-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.esd-overview-main-grid{grid-template-columns:1fr}.esd-money-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.esd-overview-v2 .esd-overview-hero{align-items:flex-start;flex-direction:column}.esd-overview-live-grid,.esd-money-grid,.esd-overview-insight-grid{grid-template-columns:1fr}.esd-overview-flow-mini{grid-template-columns:1fr 1fr;grid-template-areas:'solar grid' 'home home' 'battery ev';}.esd-overview-flow-mini:before,.esd-overview-flow-mini:after{display:none}}
.esd-plan-list {margin-top:15px;}


/* EcoFlow system device cards */
.esd-ecoflow-system-card { margin-bottom: 18px; }
.esd-ecoflow-system-card__head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.esd-ecoflow-device-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(325px,1fr)); gap:12px; }
.esd-ecoflow-device-card { border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px; background:rgba(255,255,255,.6); }
.esd-ecoflow-device-card.is-offline { opacity:.62; }
.esd-ecoflow-device-image { display:flex; align-items:center; justify-content:center; min-height:118px; margin:-2px -2px 12px; border-radius:12px; background:rgba(255,255,255,.72); overflow:hidden; }
.esd-ecoflow-device-image img { display:block; width:100%; max-height:140px; object-fit:contain; padding:10px; box-sizing:border-box; }
.esd-ecoflow-device-card__top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.esd-ecoflow-device-name { font-weight:700; line-height:1.2; }
.esd-ecoflow-device-sn { font-size:.78rem; opacity:.7; word-break:break-all; margin-top:3px; }
.esd-ecoflow-badge { display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; font-size:.72rem; font-weight:700; background:rgba(0,0,0,.08); white-space:nowrap; }
.esd-ecoflow-badge.is-included { background:rgba(35,150,90,.14); }
.esd-ecoflow-badge.is-detected { background:rgba(70,120,190,.14); }
.esd-ecoflow-badge.is-offline { background:rgba(0,0,0,.1); }
.esd-ecoflow-device-role { margin-top:8px; font-size:.85rem; opacity:.82; }
.esd-ecoflow-device-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.esd-ecoflow-device-metric { border-radius:10px; background:rgba(0,0,0,.045); padding:8px; }
.esd-ecoflow-device-metric span { display:block; font-size:.72rem; opacity:.7; }
.esd-ecoflow-device-metric strong { display:block; margin-top:2px; }
#ecoflow-history-note {margin-top:15px;}

.esd-notification-card{display:flex;flex-direction:column;gap:16px;}
.esd-notification-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.esd-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:800;cursor:pointer;}
.esd-toggle input{width:20px;height:20px;accent-color:currentColor;}
.esd-notification-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.esd-notification-fields label{display:flex;flex-direction:column;gap:8px;font-weight:700;}
.esd-input-suffix{display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:8px 12px;background:#fff;}
.esd-input-suffix input{width:100%;border:0;background:transparent;font:inherit;font-weight:800;outline:0;}
.esd-input-suffix span{font-weight:800;opacity:.75;}
.esd-notification-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.esd-notification-help{line-height:1.5;}


.esd-energy-overview-chart-card {
	padding: 22px;
	margin: 18px 0;
}

.esd-energy-overview-chart-wrap {
	position: relative;
	height: 360px;
	width: 100%;
}

@media (max-width: 700px) {
	.esd-energy-overview-chart-wrap {
		height: 280px;
	}
}

.esd-energy-overview-chart-note {
	margin: 10px 0 0;
	font-size: 13px;
}

/* Side menu dashboard layout */
.esd-dashboard-layout--side-menu {
	--esd-nav-width: 260px;
	display: grid;
	grid-template-columns: var(--esd-nav-width) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	width: 100%;
}

.esd-dashboard-sidebar {
	position: sticky;
	top: 24px;
	z-index: 5;
	border: 1px solid rgba(15, 23, 42, .08);
	background: #fff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
	overflow: hidden;
}

.esd-dashboard-sidebar__brand {
	padding: 18px 18px 14px;
	border-bottom: 1px solid rgba(15, 23, 42, .07);
}

.esd-dashboard-sidebar__brand strong,
.esd-dashboard-sidebar__brand span {
	display: block;
}

.esd-dashboard-sidebar__brand strong {
	font-size: 17px;
	line-height: 1.2;
	color: #0f172a;
}

.esd-dashboard-sidebar__brand span {
	margin-top: 3px;
	font-size: 12px;
	color: #64748b;
}

.esd-side-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
}

.esd-side-nav__item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 12px 13px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #334155;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.esd-side-nav__item:hover,
.esd-side-nav__item:focus-visible {
	background: rgba(22, 163, 74, .08);
	color: #15803d;
	outline: none;
}

.esd-side-nav__item.is-active {
	background: rgba(22, 163, 74, .12);
	color: #15803d;
}

.esd-side-nav__item img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
}

.esd-dashboard-main {
	min-width: 0;
}

.esd-dashboard-layout--side-menu .dashboard-section {
	margin: 0 0 22px;
}

.esd-dashboard-layout--side-menu .dashboard-section[hidden] {
	display: none !important;
}

.esd-dashboard-layout--side-menu .dashboard-section.is-collapsible > .esd-section-toggle {
	cursor: default;
	pointer-events: none;
}

.esd-dashboard-layout--side-menu .dashboard-section.is-collapsible .esd-section-toggle-icon {
	display: none;
}

.esd-dashboard-layout--side-menu .dashboard-section.is-collapsible.is-collapsed {
	opacity: 1;
}

.esd-dashboard-layout--side-menu .esd-section-content[hidden] {
	display: block !important;
}

@media (max-width: 980px) {
	.esd-dashboard-layout--side-menu {
		display: block;
	}

	.esd-dashboard-sidebar {
		position: sticky;
		top: 0;
		margin-bottom: 18px;
		border-radius: 0 0 18px 18px;
	}

	.esd-dashboard-sidebar__brand {
		display: none;
	}

	.esd-side-nav {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
	}

	.esd-side-nav__item {
		width: auto;
		white-space: nowrap;
		flex: 0 0 auto;
	}
}

/* Mobile side-menu fallback: use a compact select instead of a sideways scrolling nav */
.esd-side-nav-mobile {
	display: none;
}

.esd-side-nav-mobile label {
	display: block;
	margin: 0 0 7px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748b;
}

.esd-side-nav-mobile__select {
	width: 100%;
	min-height: 46px;
	padding: 10px 42px 10px 13px;
	border: 1px solid rgba(15, 23, 42, .12);
	border-radius: 12px;
	background-color: #fff;
	color: #0f172a;
	font: inherit;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

@media (max-width: 980px) {
	.esd-dashboard-sidebar {
		position: sticky;
		top: 0;
		z-index: 20;
		padding: 10px;
		border-radius: 0 0 18px 18px;
	}

	.esd-side-nav {
		display: none;
	}

	.esd-side-nav-mobile {
		display: block;
	}
}


.esd-installer-clients {
	margin: 2rem 0;
}
.esd-installer-clients-table {
	width: 100%;
	border-collapse: collapse;
}
.esd-installer-clients-table th,
.esd-installer-clients-table td {
	padding: 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-align: left;
}
.esd-installer-clients-table .button {
	display: inline-block;
}
