/* overview.css — Seite "Übersicht" (Dashboard Allgemein, Standardseite) */

.overview-hero {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: clamp(14px, 2.2vh, 24px);
}
@media (max-width: 900px) { .overview-hero { grid-template-columns: repeat(2, 1fr); } }

.overview-charts {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: clamp(6px, 1vh, 10px);
}
@media (max-width: 1100px) { .overview-charts { grid-template-columns: 1fr; } }
.overview-chart-card { display: flex; flex-direction: column; }
/* Runde 32: Wetter-Karte (Graph + Druck/Feuchtigkeit/Regen-Zeile darunter)
   braucht mehr Platz als die kompakten PV-/Batterie-/Temperatur-Karten
   daneben — deshalb eigene volle Breite in einer zusätzlichen Zeile statt
   einer vierten, zu schmalen Spalte. */
.overview-chart-card--wide { grid-column: 1 / -1; }
.ov-weather-kv { margin-top: 10px; }

.overview-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .overview-cards { grid-template-columns: 1fr; } }

.overview-card {
  position: relative;
  cursor: pointer;
  padding-right: clamp(30px, 3vw, 40px);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.overview-card:active { transform: scale(0.985); }
.overview-card::after {
  content: '›';
  position: absolute;
  top: clamp(12px, 1.6vh, 18px);
  right: clamp(12px, 1.4vw, 18px);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-faint);
}

.ov-kv { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ov-kv > div {
  display: flex;
  justify-content: space-between;
  font-size: clamp(12px, 1vw, 14px);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ov-kv > div:last-child { border-bottom: none; }
.ov-kv > div > span:first-child { color: var(--text-muted); font-weight: 600; }
.ov-kv > div > span:last-child { font-weight: 700; color: var(--text); }

/* Runde 33: Temperatur-Karte hat jetzt 3 Legenden-Einträge (Außen/Raum/
   Taupunkt) statt bisher 2 — auf schmalen Breiten (3-spaltiges
   .overview-charts-Grid) darf die Legende umbrechen statt zu überlaufen. */
.overview-chart-card--temp3 .legend-row { flex-wrap: wrap; row-gap: 4px; }

/* Runde 33: "Energiebilanz"-Karte — volle Breite (gleiches Muster wie die
   bisherige, jetzt entfernte "🌤️ Wetter"-Karte), höherer Graph (6 gestapelte
   Serien statt einer einzelnen Linie/Fläche brauchen mehr Höhe), Legende mit
   5 Einträgen darf umbrechen. */
.overview-energybalance-card { grid-column: 1 / -1; margin-top: clamp(6px, 1vh, 10px); }
.overview-energybalance-card .legend-row { flex-wrap: wrap; row-gap: 4px; }

/* Runde 33: Detail-Tabelle unter dem Energiebilanz-Diagramm — natives
   <details>/<summary> (standardmäßig eingeklappt), Zeilen im selben Look wie
   '.ov-kv' oben, nur als echte Tabelle (zwei Spalten: Bezeichnung/Wert). */
.eb-details { margin-top: 10px; }
.eb-details summary {
  cursor: pointer;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}
.eb-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.eb-table td {
  font-size: clamp(12px, 1vw, 14px);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.eb-table tr:last-child td { border-bottom: none; }
.eb-table td:first-child { color: var(--text-muted); font-weight: 600; }
.eb-table td:last-child { text-align: right; font-weight: 700; color: var(--text); }

/* Runde 43: kleine Tacho-Diagramme (PV-Leistung, je Wechselrichter) bzw.
   Batterie-Symbole (Batteriespeicher gesamt, je Speicher) unten in der
   jeweiligen Kachel — siehe frontend/js/overview.js#invGaugeHtml()/
   batteryIconHtml(). Nur ab ausreichender Breite sichtbar: auf einem
   schmalen Touch-Gerät (Handy) wären die Kacheln sonst überladen, die
   Hauptwerte (Leistung/SoC gesamt) bleiben dort wie gewohnt die
   Kern-Information. */
.hero-tile-mini-charts {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .hero-tile-mini-charts { display: none; }
}

/* Runde 48: ".hero-tile-main" bündelt Kopfzeile/Wert/Unterzeile einer Kachel
   (siehe overview.js#heroTile()) — als eigener Flex-Container mit demselben
   Abstand wie vorher direkt auf ".hero-tile", damit sich am Aussehen JEDER
   Kachel OHNE Mini-Diagramme (also fast alle) nichts ändert. */
.hero-tile-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  /* Runde 49: neuer Positionierungs-Bezugsrahmen für ".hero-tile-badge"
     (jetzt hier drin statt direkt in ".hero-tile", siehe overview.js) —
     dadurch bleibt das Badge über der Wert-Spalte, auch wenn rechts daneben
     noch die Mini-Diagramme Platz beanspruchen. */
  position: relative;
}

/* Runde 48: Nico wollte die kleinen Tacho-/Batterie-Diagramme ("PV-Leistung"/
   "PV-Speicher") wenn möglich NEBEN statt UNTER den Werten — ab 641px reicht
   die Kachelbreite in der Regel dafür (bei 4/2 Spalten je nach
   .overview-hero-Breakpoint oben). Unterhalb von 641px bleibt es bei der
   bisherigen gestapelten Spalten-Anordnung (Mini-Diagramme selbst sind dort
   ohnehin schon per ".hero-tile-mini-charts"-Regel oben ausgeblendet) —
   ".hero-tile--with-mini" wirkt deshalb unterhalb von 641px bewusst NICHT,
   damit KEIN row-Layout mit nur einem sichtbaren Kind entsteht. */
@media (min-width: 641px) {
  .hero-tile--with-mini {
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
  }
  .hero-tile--with-mini .hero-tile-main { flex: 1 1 auto; }
  .hero-tile--with-mini .hero-tile-mini-charts {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--border);
    padding-left: clamp(8px, 1.2vw, 14px);
    flex: 0 0 auto;
  }
}

.mini-gauge-wrap, .mini-battery-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1 1 0;
  min-width: 0;
}
/* Runde 48: max-width jetzt mit vw-Anteil statt fest 72px — schrumpft auf
   mittleren Breiten (z.B. 4-spaltiges .overview-hero kurz oberhalb von
   900px, wo eine einzelne Kachel noch recht schmal ist) automatisch mit,
   damit neben 3 Tacho-Diagrammen (Wechselrichter) noch genug Platz für
   Label/Wert links bleibt ("sonst näher zusammenschieben", Nicos
   Formulierung) statt das Layout zu sprengen. */
.mini-gauge-canvas { width: 100%; max-width: clamp(38px, 4vw, 72px); height: 32px; }
/* Runde 49: nur 2 Speicher (Vitocharge/BYD) statt 3 Wechselrichter — genug
   Platz, um sie fest breit genug für den ausgeschriebenen Namen zu machen
   (Nico: "Vitocharge" wurde zu "Vitochar…" abgeschnitten), statt wie die
   Tacho-Spalten mit der Bildschirmbreite mitzuschrumpfen. */
.mini-battery-wrap { flex: 0 0 auto; min-width: 62px; }
.mini-gauge-value, .mini-battery-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mini-gauge-label, .mini-battery-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Runde 49: siehe .mini-battery-wrap oben — Label darf hier auf die volle
   Breite des (jetzt breiteren) Wraps, kein Abschneiden mehr nötig. */
.mini-battery-label { overflow: visible; text-overflow: clip; max-width: none; }
.mini-battery-icon { width: 18px; height: 32px; }
.mini-battery-svg { width: 100%; height: 100%; display: block; }
.mini-battery-outline { fill: none; stroke: var(--text-faint); stroke-width: 1.6; }