/* ENGENO Energiedaten — Frontend-Styles */

.engeno-energie {
	--engeno-green: #78b329;
	--engeno-green-dark: #5e8d20;
	--engeno-teal: #0d6785;
	--engeno-gray: #f4f6f4;
	margin: 1.25em 0;
	font-size: 0.92rem;
}

.engeno-energie__loading,
.engeno-energie__error {
	padding: 1em;
	background: var(--engeno-gray, #f4f6f4);
	border-radius: 6px;
}

.engeno-energie__head {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.75em;
}

.engeno-energie__title {
	margin: 0;
}

/* Kachel-Grid */
.engeno-energie__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.engeno-energie__tile {
	background: var(--engeno-gray, #f4f6f4);
	border-radius: 8px;
	padding: 0.7em 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.engeno-energie__tile-value {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.2;
}

.engeno-energie__tile-label {
	font-size: 0.8em;
	opacity: 0.75;
}

/* Dashboard: Summen-Kacheln zentriert (Einzelanlage bleibt linksbündig). */
.engeno-energie--dashboard .engeno-energie__grid .engeno-energie__tile {
	align-items: center;
	text-align: center;
}

.engeno-energie__tile--co2 .engeno-energie__tile-value {
	color: var(--engeno-green, #78b329);
}

/* CO2-Hero (Dashboard) */
.engeno-energie__co2-hero {
	background: linear-gradient(135deg, var(--engeno-green, #78b329), var(--engeno-teal, #0d6785));
	color: #fff;
	border-radius: 10px;
	padding: 1em 1.25em;
	margin-bottom: 0.8em;
}

.engeno-energie__co2-title {
	margin: 0 0 0.5em;
	color: #fff;
	font-size: 1.1em;
	text-align: center;
}

.engeno-energie__co2-hero-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75em;
}

.engeno-energie__co2-hero .engeno-energie__tile {
	background: rgba(255, 255, 255, 0.12);
	align-items: center;
	text-align: center;
}

.engeno-energie__co2-hero .engeno-energie__tile-value {
	color: #fff;
	font-size: 1.4em;
}

.engeno-energie__co2-hero .engeno-energie__tile-label {
	color: #fff;
	opacity: 0.85;
}

/* Anlagen-Karten (Dashboard) */
.engeno-energie__anlagen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.engeno-energie__card {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 0.6em 0.85em;
}

.engeno-energie__card-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-bottom: 0.4em;
}

.engeno-energie__card-title {
	font-weight: 600;
	text-decoration: none;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__card-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	font-size: 0.85em;
	opacity: 0.85;
	text-align: center;
}

/* Karte */
.engeno-energie__map {
	height: 260px;
	border-radius: 8px;
	margin-bottom: 0.8em;
	z-index: 0;
}

/* Chart */
.engeno-energie__ranges {
	display: flex;
	gap: 0.4em;
	margin-bottom: 0.5em;
}

.engeno-energie__range-btn {
	border: 1px solid #c8c8c8;
	background: #fff;
	border-radius: 999px;
	padding: 0.25em 1em;
	cursor: pointer;
	font-size: 0.85em;
}

.engeno-energie__range-btn.is-active {
	background: var(--engeno-green, #78b329);
	border-color: var(--engeno-green, #78b329);
	color: #fff;
}

.engeno-energie__chart {
	position: relative;
	height: 220px;
}

.engeno-energie__chart[data-empty]::after {
	content: attr(data-empty);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
}

.engeno-energie__updated {
	font-size: 0.8em;
	opacity: 0.7;
	margin-top: 0.5em;
}

/* Gesamt-Übersicht [energie_uebersicht] — drei prominente Stat-Cards. */
.engeno-energie--uebersicht .engeno-energie__grid--uebersicht {
	grid-template-columns: repeat(3, 1fr);
}

.engeno-energie__tile--stat {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-top: 3px solid var(--engeno-green, #78b329);
	border-radius: 10px;
	padding: 1.1em 1.1em;
	align-items: center;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.engeno-energie__tile--stat .engeno-energie__tile-value {
	font-size: 1.9em;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__tile--stat .engeno-energie__tile-label {
	margin-top: 0.25em;
	font-size: 0.85em;
}

@media (max-width: 640px) {
	.engeno-energie--uebersicht .engeno-energie__grid--uebersicht {
		grid-template-columns: 1fr;
	}
}

/* Performance-Ranking [energie_ranking] — Vorstands-Seite. */
.engeno-energie__grid--ranking {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.5em;
	margin-bottom: 1.1em;
}

/* Kompaktere, ruhigere KPI-Karten im Ranking (die Übersichts-Cards sind größer). */
.engeno-energie--ranking .engeno-energie__tile--stat {
	padding: 0.7em 0.8em;
}

.engeno-energie--ranking .engeno-energie__tile--stat .engeno-energie__tile-value {
	font-size: 1.35em;
}

.engeno-energie--ranking .engeno-energie__tile--stat .engeno-energie__tile-label {
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

.engeno-energie__tile--stat .engeno-energie__tile-sub {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--engeno-green-dark, #5e8d20);
	margin-top: 0.15em;
}

.engeno-energie__table-wrap {
	overflow-x: auto;
	border: 1px solid #ececec;
	border-radius: 10px;
}

.engeno-energie__ranking-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.engeno-energie__ranking-table th,
.engeno-energie__ranking-table td {
	padding: 0.55em 0.8em;
	text-align: right;
	border-bottom: 1px solid #f0f0f0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Rang + Anlagenname linksbündig, alle Zahlenspalten rechtsbündig. */
.engeno-energie__ranking-table th.engeno-energie__col-rank,
.engeno-energie__ranking-table td.engeno-energie__rank-num,
.engeno-energie__ranking-table th.engeno-energie__col-name,
.engeno-energie__ranking-table td.engeno-energie__rank-name {
	text-align: left;
}

.engeno-energie__ranking-table thead th {
	font-size: 0.74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #666;
	border-bottom: 2px solid #e2e2e2;
	vertical-align: bottom;
	line-height: 1.25;
}

/* Einheit als kleine, ruhige zweite Zeile unter dem Spaltentitel. */
.engeno-energie__unit {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #aaa;
}

/* Zebra + Hover für leichtere Zeilenführung. */
.engeno-energie__ranking-table tbody tr:nth-child(even) {
	background: #fafbfa;
}

.engeno-energie__ranking-table tbody tr:hover {
	background: rgba(13, 103, 133, 0.07);
}

/* Sortierbare Spaltenköpfe */
.engeno-energie__ranking-table th.is-sortable {
	cursor: pointer;
	user-select: none;
	padding-right: 1.3em;
	position: relative;
}

.engeno-energie__ranking-table th.is-sortable:hover {
	opacity: 1;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__ranking-table th.is-sortable::after {
	content: '↕';
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	opacity: 0.35;
	font-size: 0.9em;
}

.engeno-energie__ranking-table th.is-sorted-asc::after {
	content: '▲';
	opacity: 0.9;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__ranking-table th.is-sorted-desc::after {
	content: '▼';
	opacity: 0.9;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__ranking-table th.is-sortable:focus-visible {
	outline: 2px solid var(--engeno-green, #78b329);
	outline-offset: -2px;
}

.engeno-energie__cell-strong {
	font-weight: 700;
	color: var(--engeno-teal, #0d6785);
}

.engeno-energie__col-rank {
	width: 2.5em;
}

.engeno-energie__rank-num {
	font-weight: 600;
	color: #aaa;
}

.engeno-energie__rank-name {
	font-weight: 600;
	color: #222;
}

/* Performance-Index: Balken + Wert; Farbe nur am Wert/Balken, nicht ganze Zeile. */
.engeno-energie__index {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5em;
	min-width: 120px;
}

.engeno-energie__index-bar {
	flex: 1;
	max-width: 80px;
	height: 7px;
	background: #ececec;
	border-radius: 999px;
	overflow: hidden;
}

.engeno-energie__index-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #c2ccd2, #93a6af);
}

.engeno-energie__index-val {
	font-weight: 700;
	min-width: 2.4em;
	text-align: right;
}

.engeno-energie__index.is-good .engeno-energie__index-bar span {
	background: linear-gradient(90deg, var(--engeno-teal, #0d6785), var(--engeno-green, #78b329));
}

.engeno-energie__index.is-good .engeno-energie__index-val {
	color: var(--engeno-green-dark, #5e8d20);
}

.engeno-energie__index.is-weak .engeno-energie__index-bar span {
	background: #d9a441;
}

.engeno-energie__index.is-weak .engeno-energie__index-val {
	color: #b07d18;
}

.engeno-energie__footnote {
	font-size: 0.8em;
	opacity: 0.75;
	margin-top: 0.6em;
	line-height: 1.4;
}

@media (max-width: 640px) {
	.engeno-energie__grid--ranking {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Dezentes Einblenden der Karten (nur wenn Bewegung erwünscht ist). */
@media (prefers-reduced-motion: no-preference) {
	.engeno-energie--uebersicht .engeno-energie__tile--stat {
		animation: engeno-energie-rise 0.5s ease both;
	}

	.engeno-energie--uebersicht .engeno-energie__tile--stat:nth-child(2) {
		animation-delay: 0.08s;
	}

	.engeno-energie--uebersicht .engeno-energie__tile--stat:nth-child(3) {
		animation-delay: 0.16s;
	}

	@keyframes engeno-energie-rise {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}