/* =============================================================
   MCT – css/mod_ergebnisse.css
   Statistik-/Auswertungsseite
   Desktop: Filterkacheln + Von/Bis/Thema/Lehrkraft-Select
   Smartphone (<=640px): nur Filter-Icon + Overlay mit Switch-Kacheln
   ============================================================= */

#mod-ergebnisse {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#ergebnisse-aktion-bereich,
.erg-desktop-only {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}

/* Boxstyling nur am Kaskaden-Div, das nie leer gerendert wird */
#ergebnisse-kaskade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}
#ergebnisse-kaskade label { font-weight: bold; }
#ergebnisse-kaskade select { width: 20%; }

/* #ergebnisse-aktion-bereich selbst bekommt KEIN Boxstyling mehr,
   sonst wieder leerer Kasten bei SuS (nur meldung-Span vorhanden) */

.erg-desktop-only {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}

.erg-mobil-only { display: none; }

@media (max-width: 640px) {
	.erg-desktop-only { display: none; }
	.erg-mobil-only   { display: block; }
}

/* entfällt: #erg-mobil-filter-oeffnen-zeile (kompletter Regelblock) */

#erg-titel-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .4rem .8rem;
}

#erg-titel-zeile h2 {
	margin: 0;
}

/* Meldungsbereich + Filter-Icon rechtsbündig in derselben Zeile wie
   die Überschrift; darf auf Smartphone bei wenig Platz umbrechen. */
#erg-titel-rechts {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

#erg-titel-zeile .mod-meldung {
	margin-top: 0;
}

/* Diagramm/Liste erst sichtbar, sobald tatsächlich Daten geladen wurden */
#ergebnisse-diagramm-bereich {
	display: none;
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
	height: 360px;
}
#ergebnisse-liste-bereich {
	display: none;
}

/* -------------------------------------------------------------
   Umschaltung Desktop <-> Smartphone, rein über CSS
   (Breakpoint 640px – analog mod_aufgaben_sus.css)
   ------------------------------------------------------------- */


@media (max-width: 640px) {
	.erg-desktop-only { display: none; }
	.erg-mobil-only   { display: block; }
}


/* -------------------------------------------------------------
   Desktop: Filterkacheln – Basisoptik über .test-kachel wiederverwendet
   ------------------------------------------------------------- */
#erg-kacheln {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	margin-bottom: 12px;
}

.erg-desktop-only .as-filter-kachel {
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 74px;
}

.as-filter-kachel-suche {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-panel);
	min-width: 0;
	cursor: default;
}

.as-filter-kachel-suche input,
.as-filter-kachel-suche select {
	width: 100%;
}

/* -------------------------------------------------------------
   Diagrammbereich
   ------------------------------------------------------------- */
#ergebnisse-diagramm-bereich {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
	height: 360px;
}

#ergebnisse-chart {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------
   Filter-Overlay (Smartphone) – 1:1 aus mod_aufgaben_sus übernommen
   ------------------------------------------------------------- */
#erg-filter-overlay-hintergrund {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

#erg-filter-overlay-box {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 20px;
	min-width: 300px;
	max-width: 90%;
}

@media (max-width: 640px) {
	#erg-filter-overlay-hintergrund {
		padding: 16px;
	}
	#erg-filter-overlay-box {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

#erg-filter-overlay-kacheln {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin: 12px 0;
}

#erg-filter-overlay-aktion-zeile {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
}

.as-overlay-icon-btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-page);
	font-size: 1.2rem;
	cursor: pointer;
}

.as-overlay-icon-btn-ok {
	background: var(--msg-ok-bg);
	color: var(--msg-ok-text);
	border-color: var(--msg-ok-bg);
}

.as-filter-kachel .test-opt-state {
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Overlay: Platzhalter, hält 2-Spalten-Raster stabil (z.B. wenn
   Privat-Kachel bei LuL/Admin nicht klickbar, aber sichtbar bleibt)
   ------------------------------------------------------------- */
.as-filter-kachel-leer {
	visibility: hidden;
	pointer-events: none;
}

/* -------------------------------------------------------------
   Privat-Kachel deaktiviert (LuL/Admin): sichtbar, nicht bedienbar
   ------------------------------------------------------------- */
.as-filter-kachel-deaktiviert {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}