/* =============================================================
   MCT – css/mod_system.css
   Layout für mod_system: KI-Basisfunktion testen
   Respektiert Variablen/Konventionen aus style.css
   ============================================================= */

/* -------------------------------------------------------------
   Überschriftscontainer (wie mod_lul/mod_sus)
   ------------------------------------------------------------ */
#mod-system > div {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-bottom: 1rem;
}

#system-titel-zeile {
	background: none;
	border: none;
	padding: 0;
}

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

/* -------------------------------------------------------------
   Akkordeon-Titelzeile (#system-prompts, #system-db)
   ------------------------------------------------------------ */
.system-akkordeon-titel {
	cursor: pointer;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.system-akkordeon-pfeil {
	display: inline-block;
	width: 1em;
}

/* Globaler Meldungsmechanismus (siehe js/mct.js: meldung_ausgeben()),
   analog zu #lul-meldung in css/mod_lul.css */
.system-akkordeon-titel .meldung {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
	min-width: 0;
}

.system-akkordeon-inhalt {
	margin-top: .8rem;
}

/* -------------------------------------------------------------
   Hauptbereich: zweispaltiges Grid (links Eingabe, rechts Ergebnis)
   ------------------------------------------------------------ */
#ki-funktionen {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.2rem;
	align-items: start;
}

#ki-funktionen h2 {
	grid-column: 1 / -1;
}

#ki-links {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}

#ki-links label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin: .6rem 0 .25rem;
}

#ki-links label:first-of-type {
	margin-top: 0;
}

#system-ki-auswahl,
#system-aufruf-typ {
	display: block;
	max-width: 48%;
}

#ki-links textarea {
	width: 100%;
}

#ki-links select,
#ki-links textarea {
	margin-bottom: .2rem;
}

#btn-system-ki-test {
	display: block;
	margin-top: 1rem;
}

/* -------------------------------------------------------------
   Rechte Spalte: knappe Ergebnisausgabe
   ------------------------------------------------------------ */
#ki-rechts {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}

#ki-rechts > label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin-bottom: .4rem;
}

#system-ergebnis-kurz p {
	margin-bottom: .4rem;
	font-size: .9rem;
}

#system-ergebnis-kurz pre {
	max-height: 240px;
	overflow-y: auto;
}

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

/* -------------------------------------------------------------
   Themenkaskade / Frage-Anzeige (linke Spalte)
   ------------------------------------------------------------ */
#system-themenkaskade {
	margin: .6rem 0;
}

#system-themenkaskade-selects {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: .5rem;
}

.system-kaskade-feld {
	flex: 0 1 48%;
	min-width: 200px;
}

.system-kaskade-feld label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin: 0 0 .25rem;
}

.system-kaskade-feld select {
	width: 100%;
	max-width: none;
}

#system-frage-anzeige {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
	margin: .6rem 0;
	font-size: .9rem;
}

#system-frage-antworten {
	margin: .3rem 0 0 1.2rem;
}

/* -------------------------------------------------------------
   Vorformatierte Ausgaben (Antwort, Prompt, Request, Response)
   ------------------------------------------------------------ */
#ki-rechts pre,
#ki-details pre,
#queue-test-rechts pre,
#queue-test-details pre {
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
	font-size: .85rem;
	font-family: 'Courier New', monospace;
}

/* -------------------------------------------------------------
   Detailbereich: Akkordeons unterhalb von #ki-funktionen
   ------------------------------------------------------------ */
#ki-details {
	margin-top: 1.4rem;
}

#ki-details details {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: .5rem;
	padding: .5rem .8rem;
}

#ki-details summary {
	cursor: pointer;
	font-weight: bold;
	font-size: .9rem;
	color: var(--text-base);
	padding: .2rem 0;
}

#ki-details details[open] summary {
	margin-bottom: .4rem;
}

#ki-details pre {
	max-height: 320px;
	overflow-y: auto;
}

/* -------------------------------------------------------------
   API-Queue testen: gleiches zweispaltiges Prinzip wie #ki-funktionen
   ------------------------------------------------------------ */
#queue-test-funktionen {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.2rem;
	align-items: start;
}

#queue-test-funktionen h2 {
	grid-column: 1 / -1;
}

#queue-test-links {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}

#queue-test-links label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin: .6rem 0 .25rem;
}

#queue-test-links label:first-of-type {
	margin-top: 0;
}

#queue-test-ki-auswahl,
#queue-test-testart {
	display: block;
	max-width: 48%;
}

#btn-queue-test-starten {
	display: block;
	margin-top: 1rem;
}

#queue-test-rechts {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}

#queue-test-rechts > label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin-bottom: .4rem;
}

#queue-test-ergebnis-kurz p {
	margin-bottom: .4rem;
	font-size: .9rem;
}

#queue-test-ergebnis-kurz pre {
	max-height: 240px;
	overflow-y: auto;
}

#queue-test-details {
	margin-top: 1.4rem;
}

#queue-test-details details {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: .5rem;
	padding: .5rem .8rem;
}

#queue-test-details summary {
	cursor: pointer;
	font-weight: bold;
	font-size: .9rem;
	color: var(--text-base);
	padding: .2rem 0;
}

#queue-test-details details[open] summary {
	margin-bottom: .4rem;
}

#queue-test-details pre {
	max-height: 320px;
	overflow-y: auto;
}

/* -------------------------------------------------------------
   Datenbank-Service: Aktionsleiste (Remote-DB, Aktion, Ausführen)
   ------------------------------------------------------------ */
#db-aktion {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0 1rem;
}

#db-aktion label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin-bottom: .25rem;
}

#db-aktion select {
	display: block;
}

/* -------------------------------------------------------------
   Datenbank-Service: Ergebnis
   Ebene 1 – #db-ergebnis-info: durchgängige Statuszeile(n)
   Ebene 2 – #db-ergebnis-ausgabe: 45% / 10% / 45%-Vergleichsspalten
   ------------------------------------------------------------ */
#db-ergebnis {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-top: 1.4rem;
}

/* Ebene 1: hebt sich als eigener, dezenter Block vom Panel darum ab */
#db-ergebnis-info {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
	margin-bottom: 1rem;
}

#db-ergebnis-info p {
	margin-bottom: .3rem;
	font-size: .9rem;
}

#db-ergebnis-info p:last-child {
	margin-bottom: 0;
}

/* Ebene 2: 45% / 10% / 45% – lokale Spalte, Richtungssymbol, Remote-Spalte */
#db-ergebnis-ausgabe {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
}

.db-ergebnis-spalte {
	flex: 1 1 45%;
	min-width: 0;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem;
}

.db-ergebnis-titel {
	margin: 0 0 .5rem;
	font-size: .85rem;
	font-weight: bold;
	color: var(--text-muted);
}

#db-ergebnis-richtung {
	flex: 0 0 10%;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Übertragungsrichtung umschaltbar (wirkt nur bei "Testergebnisse
   übertragen" – bei "Tabellenstrukturen vergleichen" bleibt der
   Button vorhanden, wird aber serverseitig ignoriert) */
#btn-db-richtung {
	font-size: 1.3rem;
	color: var(--text-muted);
}

/* -------------------------------------------------------------
   Testergebnisse übertragen: Detailzeilen je Aufgabe, gleiches
   Badge-Muster wie .db-diff-zeile
   ------------------------------------------------------------ */
#db-ergebnis-details {
	margin-top: 1rem;
}

/* Einzelner Unterschied als kleines Badge – Breite richtet sich nach
   dem jeweiligen Inhalt, keine Breitenberechnung/Ausrichtung wie bei
   Klassen/LuL. \n in links/rechts (z.B. "tabelle.spalte\nTyp: ...")
   wird über white-space:pre-line als eigene Zeile innerhalb des
   Badges dargestellt. */
.db-diff-zeile {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .25rem .55rem;
	margin-bottom: .35rem;
	font-size: .85rem;
	white-space: pre-line;
}

.db-diff-zeile:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------
   Passwort-Service: Filterleiste
   ------------------------------------------------------------ */
#pwd-system-filter {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: 1rem;
}

/* Jedes Filterkriterium ein eigener Flex-Container (Label über Feld),
   damit die fünf Kriterien zuverlässig als Einheit in einer Zeile
   bleiben (nowrap) statt einzeln zu umbrechen. Suche wächst stärker
   als die kompakten Selects (gleiches Verhältnis wie #benutzer-filter
   in style.css, das dem Suchfeld ebenfalls mehr Platz gibt). */
.pwd-filter-feld {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	flex: 1 1 0;
	min-width: 0;
}

.pwd-filter-feld-suche {
	flex: 2 1 0;
}

#pwd-system-filter label {
	font-size: .85rem;
	color: var(--text-muted);
}

#pwd-system-filter input,
#pwd-system-filter select {
	width: 100%;
}

/* -------------------------------------------------------------
   Passwort-Service: Ergebnistabelle
   ------------------------------------------------------------ */
#pwd-system-tabelle {
	margin-top: 1rem;
}

#pwd-tabelle-anzahl {
	margin-bottom: .5rem;
	font-size: .85rem;
	color: var(--text-muted);
	text-align: left;
}

/* Sortierbare Spaltenköpfe – gleiches Muster wie #lul-tabelle/#benutzer-tabelle */
#pwd-tabelle .sortierbar {
	cursor: pointer;
	user-select: none;
}

#pwd-tabelle .sortierbar:hover {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

#pwd-tabelle .sort-asc::after  { content: ' ▲'; font-size: .75em; }
#pwd-tabelle .sort-desc::after { content: ' ▼'; font-size: .75em; }

/* Rollen/Klassen je Benutzer als einzelne Badges untereinander (nie
   nebeneinander), Breite je Badge nur nach Inhalt – gleiches Muster
   wie .db-diff-zeile weiter oben, keine feste/einheitliche Breite. */
.pwd-badge-liste {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
}

.pwd-badge {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .15rem .5rem;
	font-size: .82rem;
}

/* -------------------------------------------------------------
   Passwort-Service: Passwortfelder
   ------------------------------------------------------------ */
#pwd-system-passwort {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-top: 1.4rem;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: 1rem;
}

/* Wie .pwd-filter-feld: Label über Feld, ein Flex-Container je Element,
   damit alle vier Elemente zuverlässig in einer Zeile bleiben. Der
   Button-Container hat kein Label und richtet sich über
   align-items:flex-end am unteren Rand der Eingabefelder aus. */
.pwd-passwort-feld {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	flex: 1 1 0;
	min-width: 0;
}

.pwd-passwort-feld-button {
	flex: 0 0 auto;
}

#pwd-system-passwort label {
	font-size: .85rem;
	color: var(--text-muted);
}

#pwd-system-passwort input {
	width: 100%;
}

#pwd-system-passwort button {
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Passwort-Service: Bestätigungsbereich
   ------------------------------------------------------------ */
#pwd-system-confirm {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-top: 1.4rem;
}

#pwd-confirm-text p {
	margin-bottom: .3rem;
	font-size: .9rem;
}

.pwd-gruppe-titel {
	font-weight: bold;
	margin-top: .6rem;
}

.pwd-gruppe-titel:first-child {
	margin-top: 0;
}

.pwd-gruppe-zeile {
	margin-left: 1rem;
}

#pwd-confirm-warnungen {
	margin-top: .8rem;
}

.pwd-warnung-hinweis {
	color: var(--text-muted);
	font-size: .88rem;
	margin-bottom: .4rem;
}

.pwd-warnung-warnung,
.pwd-warnung-stark {
	background: var(--msg-err-bg);
	color: var(--msg-err-text);
	border-radius: var(--radius);
	padding: .4rem .7rem;
	margin-bottom: .4rem;
	font-weight: bold;
}

.pwd-warnung-stark {
	border: 2px solid var(--msg-err-text);
	font-size: 1.05rem;
}

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

/* -------------------------------------------------------------
   Responsive: unter 800px einspaltig
   ------------------------------------------------------------ */
@media (max-width: 800px) {
	#ki-funktionen {
		grid-template-columns: 1fr;
	}
}