/* =============================================================
   MCT – css/mod_challenges.css
   Challenges: Layout in Anlehnung an mod_lul.css (Editor/Badges)
   und mod_aufgaben_sus.css (Akkordeon/Karten/Filter-Overlay).
   Breakpoint 640px – wie im übrigen Projekt.
   ============================================================= */

#mod-challenges {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#mod-challenges > #challenges-titel-zeile,
#mod-challenges > #challenges-kaskadenfilter,
#challenges-editor-bereich,
#challenges-verwaltung-bereich {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}

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

#challenges-kaskadenfilter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}

#challenges-kaskadenfilter label {
	font-size: .85rem;
	color: var(--text-muted);
}

.challenges-platzhalter-text,
.challenges-karte-leer {
	color: var(--text-muted);
	font-size: .88rem;
}

.challenges-hinweis-text {
	color: var(--text-muted);
	font-size: .8rem;
	margin-top: .3rem;
}

/* -------------------------------------------------------------
   Akkordeon "Laufende Challenges" (gleiches Muster wie
   .as-akk-abschnitt in mod_aufgaben_sus.css, standardmäßig offen)
   ------------------------------------------------------------- */
.challenges-akk-abschnitt {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.challenges-akk-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 1rem;
	cursor: pointer;
	font-weight: bold;
}

.challenges-akk-pfeil {
	display: inline-block;
	width: 1em;
}

.challenges-akk-inhalt {
	padding: 0 1rem 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.challenges-mini-karte {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 8px 10px;
}

.challenges-mini-titel {
	font-weight: bold;
	margin-bottom: 2px;
}

.challenges-mini-zeile {
	color: var(--text-muted);
	font-size: .88rem;
}

.challenges-mini-balken {
	margin-top: 6px;
	height: 4px;
	border-radius: 2px;
	background: var(--bg-table-alt);
	overflow: hidden;
}

.challenges-mini-balken-fuellung {
	height: 100%;
	background: var(--btn-bg);
}

/* -------------------------------------------------------------
   Editor (Stammdaten + SuS-Zuordnung) – gleiches Grundmuster wie
   #edit-lul-* in mod_lul.css
   ------------------------------------------------------------- */
#edit-challenges-titelzeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

#edit-challenges-titelzeile h3 {
	margin: 0;
	flex: 0 0 auto;
}

#challenges-meldung {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
	min-width: 0;
}

#challenges-editor-bereich.challenges-editor-offen #edit-challenges-titelzeile {
	border-bottom: 1px solid var(--border);
	padding-bottom: .6rem;
	margin-bottom: 1rem;
}

#edit-challenges-inhalt {
	display: grid;
	grid-template-columns: minmax(0, 55%) minmax(0, 45%);
	gap: 1rem;
	margin-top: 1rem;
}

#edit-challenges-inhalt-stammdaten input[type="text"],
#edit-challenges-inhalt-stammdaten input[type="datetime-local"],
#edit-challenges-inhalt-stammdaten select,
#edit-challenges-inhalt-stammdaten textarea {
	width: 100%;
	max-width: 260px;
}

/* Zielwert-Bereich: feste Mindesthöhe für zwei Zeilen, damit der
   Wechsel zwischen Challenge-Arten mit einem bzw. zwei Feldern nicht
   springt (bleibt bei einem Feld einfach als leere zweite Zeile).
   #challenges-edit-felder ist absichtlich ein <div> IN der <td> (nicht
   die <td> selbst) – min-height auf einer display:table-cell-Zelle
   wird von Browsern für die Zeilenhöhen-Berechnung nicht zuverlässig
   berücksichtigt, auf einem normalen Block-Element dagegen schon. */
#challenges-edit-felder {
	min-height: 3.6rem;
}

.challenges-edit-feld {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-height: 1.7rem;
}

/* Einheitliche Label-Breite, damit die Eingabefelder unabhängig von
   der Beschriftungslänge ("Anzahl Fragen" vs. "Mindestens %") immer
   an derselben horizontalen Position stehen */
.challenges-edit-feld-label {
	display: inline-block;
	width: 9rem;
	flex: 0 0 auto;
}

.challenges-edit-feld-input {
	width: 90px !important;
	max-width: 90px !important;
}

/* Ergebnisbasis-Bereich: feste Mindesthöhe, damit der Wechsel zwischen
   drei Radios (Aktivität) und nur "öffentlich" + Hinweistext (Leistung
   bei LuL/Admin/Superadmin) nicht springt. Ebenfalls ein <div> in der
   <td>, siehe Kommentar bei #challenges-edit-felder. */
#challenges-edit-ergebnisbasis {
	min-height: 3.4rem;
}

#challenges-edit-ergebnisbasis label {
	margin-right: .8rem;
	font-size: .9rem;
}

#edit-challenges-action {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	margin-top: 1rem;
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

#edit-challenges-action #btn-challenges-abbrechen { order: 1; }
#edit-challenges-action #btn-challenges-speichern { order: 2; }

/* SuS-Zuordnung: zwei nebeneinanderliegende Container, immer sichtbar
   (siehe CLAUDE-Auftrag Abschnitt 11) */
#edit-challenges-inhalt-sus {
	display: flex;
	gap: 1rem;
}

.challenges-sus-spalte {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
}

.challenges-sus-spalte h4 {
	margin: 0 0 .4rem;
	font-size: .85rem;
	color: var(--text-muted);
}

.challenges-badge-liste {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	min-height: 1.6rem;
}

.challenges-badge {
	display: inline-flex;
	align-items: center;
	padding: .15rem .4rem;
	border-radius: 3px;
	font-size: .78rem;
	font-weight: bold;
	white-space: nowrap;
	background: var(--bg-table-alt);
	color: var(--text-base);
	cursor: pointer;
}

.challenges-badge:hover {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

.challenges-badge-aktion {
	margin-top: .5rem;
	font-size: .78rem;
	padding: .2rem .5rem;
}

/* -------------------------------------------------------------
   Verwaltungsbereich: Titelzeile, Filter-Kacheln, Tabelle/Karten
   ------------------------------------------------------------- */
#challenges-verwaltung-titelzeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-bottom: .6rem;
}

#challenges-verwaltung-titelzeile h3 {
	margin: 0;
}

.challenges-icon-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 1.05em;
	cursor: pointer;
	color: var(--text-base);
	padding: 0;
}

.challenges-icon-btn:hover {
	color: var(--btn-bg);
}

#challenges-filter-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(120px, 200px));
	gap: .6rem;
	margin-bottom: 12px;
}

.challenges-filter-kachel {
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 60px;
}

.chg-icon-inaktiv {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* -------------------------------------------------------------
   Umschaltung Desktop <-> Smartphone (Breakpoint 640px, wie im
   übrigen Projekt, siehe css/mod_aufgaben_sus.css)
   ------------------------------------------------------------- */
.challenges-mobil-only {
	display: none;
}

@media (max-width: 640px) {
	.challenges-desktop-only { display: none; }
	.challenges-mobil-only   { display: flex; flex-direction: column; gap: 10px; }
	.challenges-mobil-only.challenges-mobil-geschlossen { display: none; }

	#edit-challenges-inhalt {
		grid-template-columns: 1fr;
	}
	#edit-challenges-inhalt-sus {
		flex-direction: column;
	}
	#challenges-verwaltung-titelzeile h3 {
		cursor: pointer;
	}
	#challenges-filter-kacheln {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------
   Karten (Smartphone-Verwaltungsliste) – gleiches Muster wie
   .as-karte-* in mod_aufgaben_sus.css
   ------------------------------------------------------------- */
.challenges-karte {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 12px;
}

.challenges-karte-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.challenges-karte-titel {
	font-weight: bold;
}

.challenges-karte-icons {
	display: flex;
	gap: 2px;
}

.challenges-karte-icon-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 1.1em;
	line-height: 1;
	color: var(--text-base);
	cursor: pointer;
	padding: 0;
}

.challenges-karte-icon-btn:hover {
	color: var(--btn-bg);
}

.challenges-karte-zeile {
	color: var(--text-muted);
	margin-bottom: 2px;
}

/* -------------------------------------------------------------
   Filter-Overlay (Smartphone) – gleiches Muster wie
   #as-filter-overlay-* in mod_aufgaben_sus.css
   ------------------------------------------------------------- */
#challenges-filter-overlay-hintergrund {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

#challenges-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) {
	#challenges-filter-overlay-hintergrund { padding: 16px; }
	#challenges-filter-overlay-box { width: 100%; max-width: 100%; min-width: 0; }
}

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

.challenges-filter-kachel-leer {
	visibility: hidden;
	pointer-events: none;
}

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

.challenges-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;
}

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

/* -------------------------------------------------------------
   Ergebnis-Popup (touch-freundlich statt reinem :hover-Tooltip)
   ------------------------------------------------------------- */
#challenges-ergebnis-popup {
	position: absolute;
	z-index: 1100;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: .8rem 1rem;
	min-width: 200px;
	max-width: 260px;
}

#challenges-ergebnis-popup h4 {
	margin: 0 .6rem .4rem 0;
	font-size: .95rem;
}

#challenges-ergebnis-popup p {
	margin: .15rem 0;
	font-size: .85rem;
}

.chg-popup-schliessen {
	position: absolute;
	top: .3rem;
	right: .4rem;
	background: none;
	border: none;
	font-size: 1rem;
	cursor: pointer;
	color: var(--text-muted);
	padding: 0;
	line-height: 1;
}

.chg-popup-schliessen:hover {
	color: var(--text-base);
}