/* =============================================================
   MCT – css/mod_freigaben.css
   Klassenbezogene Themenfreigaben
   ============================================================= */

#frg-hauptbereich {
	display: flex;
	flex-direction: column;
}

#button-leiste select {
	margin-right: 8px;
}

#button-leiste .fe-label {
	margin-right: 4px;
}

/* -------------------------------------------------------------
   Zweispaltiges Layout: Themenbaum links, Details rechts
   analog #tv-hauptbereich in der Themenverwaltung
   ------------------------------------------------------------- */
#frg-spalten {
	display: flex;
	gap: 20px;
}

#frg-baum-bereich {
	flex: 0 0 35%;
	min-width: 0;
}

#frg-rechts {
	flex: 1 1 65%;
	min-width: 0;
}

#frg-baum-bereich,
#frg-rechts {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}

#frg-baum-container {
	max-width: 100%;
}





/* -------------------------------------------------------------
   Freigabe-Status der Baumknoten (nicht aktiv, nicht hover)
   ------------------------------------------------------------- */
.tv-knoten.frg-voll > .tv-knoten-name {
	background-color: var(--msg-ok-bg);
}

.tv-knoten.frg-teil > .tv-knoten-name {
	background-image: repeating-linear-gradient(
		45deg,
		var(--msg-ok-bg) 0,
		var(--msg-ok-bg) 8px,
		var(--bg-panel) 8px,
		var(--bg-panel) 16px
	);
}

.tv-knoten-name {
	padding-left: 4px;
}

/* -------------------------------------------------------------
   Linker grüner Rand bei vorhandenen Freigaben – unabhängig
   von aktiv/hover, bleibt in allen Zuständen sichtbar
   ------------------------------------------------------------- */
/*.tv-knoten.frg-teil > .tv-knoten-name,
.tv-knoten.frg-voll > .tv-knoten-name {
	border-left: 4px solid var(--msg-ok-text);
	padding-left: 4px;
}*/




/* -------------------------------------------------------------
   Aktiver Knoten – exakt wie mod_themen, schlägt Freigabe-Hintergrund
   (höhere Spezifität durch Kombination mit .frg-* nötig)
   ------------------------------------------------------------- */
.tv-knoten-name.tv-aktiv,
.tv-knoten.frg-teil > .tv-knoten-name.tv-aktiv,
.tv-knoten.frg-voll > .tv-knoten-name.tv-aktiv {
	background: var(--farbe-primaer, #337ab7);
	background-image: none;
	color: #fff;
	font-weight: bold;
}
/* grüner Rand */
.tv-knoten.frg-teil > .tv-knoten-name.tv-aktiv,
.tv-knoten.frg-voll > .tv-knoten-name.tv-aktiv {
	border-right: 10px solid var(--msg-ok-bg);
}


.tv-knoten-name.tv-aktiv .tv-fragen-anzahl {
	color: rgba(255,255,255,0.75);
}

.tv-knoten:has(> .tv-knoten-name.tv-aktiv) > .thema-aktionen {
	opacity: 1;
}
/* -------------------------------------------------------------
   Hover
   ------------------------------------------------------------- */
.tv-knoten-name:hover {
	background: var(--farbe-hover, #e8f0fb);
	background-image: none;
}
.tv-knoten-name.tv-aktiv:hover,
.tv-knoten.frg-teil > .tv-knoten-name.tv-aktiv:hover,
.tv-knoten.frg-voll > .tv-knoten-name.tv-aktiv:hover {
	background: var(--farbe-hover, #e8f0fb);
	background-image: none;
	color: var(--text-base);
}





/* -------------------------------------------------------------
   Freigeben-/Entfernen-Icons
   ------------------------------------------------------------- */
.frg-btn {
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	margin-left: 6px;
	padding: 0 4px;
	border-radius: var(--radius);
	transition: var(--transition);
}

.frg-btn-plus {
	color: var(--msg-ok-text);
}
.frg-btn-plus:hover {
	background-color: var(--bg-hover);
}

.frg-btn-entfernen {
	color: var(--msg-err-text);
}
.frg-btn-entfernen:hover {
	background-color: var(--bg-hover);
}

/* -------------------------------------------------------------
   Rechter Bereich: Zusammenfassung / Fragenliste
   ------------------------------------------------------------- */
.frg-fragenliste-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.frg-fragenliste-kopf h3 {
	margin: 0;
}

.frg-antworten-alle-toggle {
	cursor: pointer;
	color: var(--text-muted);
	font-size: 0.9em;
	white-space: nowrap;
}
.frg-antworten-alle-toggle:hover {
	color: var(--text-base);
}

.tv-frage-zeile {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 10px 12px;
	margin-bottom: 10px;
	background-color: var(--bg-panel);
}

.tv-frage-status {
	margin-bottom: 6px;
}

.tv-frage-vorspann {
	font-style: italic;
	color: var(--text-muted);
	margin-bottom: 4px;
}

.tv-frage-text {
	font-weight: bold;
	margin-bottom: 6px;
}

.frg-antworten-toggle {
	cursor: pointer;
	color: var(--text-muted);
	font-size: 0.9em;
}

.tv-antworten-liste {
	list-style: none;
	padding-left: 0;
	margin-top: 6px;
}

.tv-antworten-liste li {
	padding: 4px 8px;
	border-bottom: 1px solid var(--border);
}

.tv-antworten-liste li.tv-antwort-korrekt {
	font-weight: bold;
	color: var(--msg-ok-text);
}

/* -------------------------------------------------------------
   Mobile (Breakpoint 700px) – analog Themenverwaltung
   ------------------------------------------------------------- */
@media (max-width: 700px) {
	#frg-spalten {
		flex-direction: column;
	}

	#frg-baum-bereich,
	#frg-rechts {
		flex: 1 1 100%;
	}
}