/* =============================================================
   MCT – css/mod_bildungskontexte.css
   Layout für mod_bildungskontexte
   Technische Vorlage: css/mod_bildungsplaene.css (Titelzeile/Meldung/
   Editor-Aktionen), css/mod_lul.css (Badge-Zuordnung)
   Respektiert Variablen/Konventionen aus style.css
   ============================================================= */

#mod-bildungskontexte > div {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-bottom: 1rem;
}

.bk-platzhalter-text {
	color: var(--text-muted);
	font-size: .88rem;
}

.bk-platzhalter-eingerueckt {
	padding-left: 1.6rem;
}

/* -------------------------------------------------------------
   Titelzeile (gleiches Muster wie #bp-titel-zeile): Titel links,
   Meldung nimmt den restlichen Platz zentriert ein, Neu-Aktionen
   rechts daneben.
   ------------------------------------------------------------- */
#bk-titel-zeile {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	background: none;
	border: none;
	padding: 0;
}

#bk-titel-zeile h2 {
	margin: 0;
	flex: 0 0 auto;
}

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

#bk-titel-aktionen {
	flex: 0 0 auto;
	display: flex;
	gap: .5rem;
}

/* -------------------------------------------------------------
   Neu-/Edit-Bereich: standardmäßig ausgeblendet, kein Accordion -
   Öffnen/Schließen läuft über jQuery slideDown(250)/slideUp(250)
   (siehe js/mod_bildungskontexte.js).
   ------------------------------------------------------------- */
#bk-editor-bereich {
	display: none;
}

#bk-editor-titelzeile {
	margin-bottom: .75rem;
}

#bk-editor-titelzeile h3 {
	margin: 0;
}

#bk-editor-inhalt {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	gap: 1.5rem;
}

.bk-feldgruppe {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-bottom: .75rem;
}

.bk-feldgruppe label {
	font-size: .85rem;
	color: var(--text-muted);
}

#bk-editor-stammdaten input,
#bk-editor-stammdaten select {
	width: 100%;
	max-width: 320px;
}

/* -------------------------------------------------------------
   Bildungsstufen-Zuordnung rechts (zwei Boxen nebeneinander,
   gleiches Grundmuster wie #edit-lul-inhalt-klassen in mod_lul.css)
   ------------------------------------------------------------- */
#bk-editor-stufen {
	display: flex;
	gap: 1rem;
}

.bk-stufen-box {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
}

.bk-stufen-box h4 {
	margin: 0 0 .4rem;
	font-size: .85rem;
	color: var(--text-muted);
}

.bk-badge-liste {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.bk-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .15rem .5rem;
	border-radius: 3px;
	font-size: .8rem;
	white-space: nowrap;
	background: var(--bg-table-alt);
	color: var(--text-base);
	cursor: pointer;
}

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

/* -------------------------------------------------------------
   Button-Leiste: Abbrechen links / Speichern rechts (gleiches Muster
   wie #bp-editor-aktionen)
   ------------------------------------------------------------- */
#bk-editor-aktionen {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	margin-top: 1rem;
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

#bk-editor-aktionen #btn-bk-abbrechen { order: 1; }
#bk-editor-aktionen #btn-bk-speichern { order: 2; }

/* -------------------------------------------------------------
   Baum (Dateimanager-artig, siehe Auftrag Abschnitt 14/15)
   ------------------------------------------------------------- */
.bk-knoten {
	margin-bottom: .15rem;
}

.bk-knoten-bildungsgang {
	margin-left: 1.4rem;
}

.bk-knoten-stufe {
	margin-left: 2.8rem;
}

.bk-zeile {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .2rem .3rem;
	border-radius: 4px;
}

.bk-knoten-bereich > .bk-zeile,
.bk-knoten-bildungsgang > .bk-zeile {
	cursor: pointer;
}

.bk-knoten-bereich > .bk-zeile:hover,
.bk-knoten-bildungsgang > .bk-zeile:hover {
	background: var(--bg-hover);
}

.bk-toggle {
	display: inline-block;
	width: 1rem;
	text-align: center;
	font-size: .7rem;
	color: var(--text-muted);
}

.bk-icon {
	font-size: .95rem;
}

.bk-name {
	flex: 1 1 auto;
	min-width: 0;
}

.bk-knoten-bereich.bk-inaktiv > .bk-zeile .bk-name,
.bk-knoten-bildungsgang.bk-inaktiv > .bk-zeile .bk-name,
.bk-knoten-stufe.bk-inaktiv .bk-name {
	color: var(--text-muted);
	text-decoration: line-through;
}

.bk-aktionen {
	flex: 0 0 auto;
	display: flex;
	gap: .2rem;
}

.bk-btn-aktion {
	background: none;
	border: none;
	/* BUGFIX (Auftrag "Bildungsstufen sortieren"): ohne color:inherit
	   erbt der Button den globalen button{color:var(--btn-text)}-Reset
	   (style.css) - also weißen Text. Bei den bisherigen Icons dieser
	   Klasse (📁✏️🚫✅) fiel das nie auf, da Farb-Emoji die CSS-
	   color-Eigenschaft ignorieren; die neuen ↑/↓-Sortierpfeile sind
	   reine Textzeichen und waren dadurch weiß auf weiß unsichtbar.
	   Gleiches Muster wie button.btn-icon (color:inherit, style.css). */
	color: inherit;
	cursor: pointer;
	padding: .1rem .25rem;
	font-size: .85rem;
	border-radius: 3px;
	line-height: 1;
}

.bk-btn-aktion:hover {
	background: var(--bg-hover);
}

/* Sortier-Icons am Rand (Auftrag "Bildungsstufen sortieren") - selbes
   Ausgrau-Muster wie das projektweite button.btn-icon:disabled
   (style.css), hier für die modul-eigene Icon-Klasse ergänzt, da
   .bk-btn-aktion bisher keinen disabled-Zustand kannte. */
.bk-btn-aktion:disabled {
	opacity: .4;
	cursor: default;
}

.bk-btn-aktion:disabled:hover {
	background: none;
}

.bk-kinder {
	margin-top: .1rem;
}

/* -------------------------------------------------------------
   Responsive: auf schmalen Displays Stammdaten/Stufen-Zuordnung
   untereinander statt nebeneinander (gleiches Muster wie andere
   modernisierte Module, siehe style.css)
   ------------------------------------------------------------- */
@media (max-width: 767px) {
	#bk-editor-inhalt {
		grid-template-columns: 1fr;
	}
	#bk-editor-stufen {
		flex-direction: column;
	}
	#bk-titel-zeile {
		flex-direction: column;
		align-items: stretch;
	}
	#bk-meldung {
		order: 3;
	}
	#bk-titel-aktionen {
		order: 2;
	}
}