/* Styles fuer /gedo/insights (Analyse-Dashboard) - ergaenzt gedo-site.css
   (.gedo-table, .swatch, .gedo-tooltip) und das Theme-Stylesheet (.card,
   Farbvariablen). Eigene Datei statt alles in gedo-site.css zu haeufen, da
   diese Seite ein eigenstaendiges Layout (KPI-Kacheln, Panels, Heatmap-Grid)
   mitbringt, das mit der Karte nichts zu tun hat. */

.gedo-insights { padding-top: 24px; }

.gedo-insights-intro { margin-bottom: 20px; }
.gedo-insights-intro h1 { margin: 0 0 6px; color: var(--gedo-navy); }
.gedo-insights-intro p { margin: 0; color: var(--gedo-text-muted); }

/* KPI-Kachelreihe: gleiche Glaskarten-Optik wie .card, aber kompakt und in
   einer responsiven Reihe statt untereinander. */
.gedo-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}
.gedo-kpi-tile {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gedo-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--gedo-navy); line-height: 1.15; }
.gedo-kpi-label { font-size: 0.78rem; color: var(--gedo-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* Panels: gleicher .card-Look, aber breiter, mit eigenem Innenabstand statt
   dem Standard-Karten-Padding (die Panels enthalten selbst wieder
   strukturierte Unterbereiche). */
.gedo-panel { margin-bottom: 24px; padding: 24px 26px; }
.gedo-panel-head {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 14px; margin-bottom: 16px;
}
.gedo-panel-head h2 { margin: 0 0 4px; color: var(--gedo-navy); font-size: 1.2rem; }
.gedo-panel-head h3 { margin: 0; color: var(--gedo-navy); font-size: 1rem; }
.gedo-panel-sub { margin: 0; font-size: 0.85rem; color: var(--gedo-text-muted); max-width: 60ch; }
.gedo-panel-empty { color: var(--gedo-text-muted); font-size: 0.85rem; font-style: italic; }

/* Typ-/Quellen-Umschalter: kompakte Pillen statt der Kartengrid-Buttons
   (.gedo-type-filter) - hier immer nur eine flache Zeile mit wenigen
   Optionen statt sechs Kacheln, ein Grid waere hier ueberdimensioniert. */
.gedo-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.gedo-chip-group button {
	padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gedo-border);
	background: rgba(255, 255, 255, 0.6); color: var(--gedo-navy);
	cursor: pointer; font-size: 0.78rem; font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gedo-chip-group button:hover { border-color: var(--gedo-navy); }
.gedo-chip-group button.active { background: var(--gedo-navy); color: #fff; border-color: var(--gedo-navy); font-weight: 700; }

/* Saisonalitaets-Heatmap: Jahr-Zeilen x Monat-Spalten, eine schmale
   Beschriftungsspalte links. auto-Spalten fuer die 12 Monate teilen sich den
   Rest gleichmaessig (minmax(0,1fr) - gleicher Grund wie beim
   Typ-Filter-Grid: verhindert, dass eine Spalte ueber ihren Anteil hinaus
   waechst). */
.gedo-heatmap { overflow-x: auto; }
.gedo-heatmap-grid {
	display: grid;
	grid-template-columns: 52px repeat(12, minmax(0, 1fr));
	gap: 3px;
	min-width: 560px;
}
.gedo-heatmap-col-label, .gedo-heatmap-row-label {
	font-size: 0.72rem; color: var(--gedo-text-muted); display: flex; align-items: center;
}
.gedo-heatmap-col-label { justify-content: center; padding-bottom: 2px; }
.gedo-heatmap-row-label { justify-content: flex-end; padding-right: 6px; }
.gedo-heatmap-cell {
	aspect-ratio: 1.4 / 1;
	border-radius: 3px;
	cursor: default;
	transition: transform 0.1s ease;
}
.gedo-heatmap-cell:hover { transform: scale(1.15); }
.gedo-heatmap-cell-empty { background: repeating-linear-gradient(45deg, var(--gedo-border), var(--gedo-border) 3px, transparent 3px, transparent 6px); }

.gedo-heatmap-scale { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.75rem; color: var(--gedo-text-muted); }
.gedo-heatmap-scale-bar { flex: 1; max-width: 200px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #eaf4fb, #0f3d63); }

/* Korrelations-Panel: uPlot-Container brauchen eine explizite Breite/Hoehe
   (siehe gedo-chart.js selbes Muster), sonst rendern sie beim ersten Laden
   mit Breite 0. */
#gedo-correlation-series-chart { margin-bottom: 12px; }
.gedo-correlogram-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.gedo-best-lag { font-size: 0.85rem; color: var(--gedo-text-muted); }

/* Datenqualitaet: drei Spalten (tote Sensoren/Luecken/Sentinels) auf breiten
   Bildschirmen, untereinander auf schmalen. */
.gedo-quality-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}
.gedo-quality-grid h3 { margin: 0 0 8px; font-size: 0.9rem; color: var(--gedo-navy); }
.gedo-count-badge {
	display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px;
	background: var(--gedo-sky); color: var(--gedo-navy); font-size: 0.72rem; font-weight: 700;
	text-align: center; vertical-align: middle;
}
/* Lange Listen (z.B. Luecken) bekommen eine feste Scrollhoehe statt den
   ganzen Panel-Bereich zu sprengen. */
.gedo-scroll-table { max-height: 260px; overflow-y: auto; }
.gedo-scroll-table .gedo-table { margin-bottom: 0; }
.gedo-scroll-table thead th { position: sticky; top: 0; background: #fff; }

.gedo-leaderboard-head { margin-top: 8px; margin-bottom: 12px; }

@media (max-width: 640px) {
	.gedo-panel { padding: 18px 16px; }
	.gedo-kpi-value { font-size: 1.35rem; }
}