/* =============================================================
   MCT – css/mod_api_dashboard.css
   API-/Queue-Monitoring (Auftrag "API-Dashboard"). Kartenlayout wie
   die übrigen einfachen Verwaltungsmodule (#mod-X > div-Kartenmuster),
   keine neue Layout-Architektur. Ausschließlich CSS-transition für die
   Live-Aktualisierung (Auftrag Abschnitt 6: "CSS reicht", kein
   requestAnimationFrame).
   ============================================================= */

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

#api-dash-titelzeile {
	display: flex;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
}

#api-dash-titelzeile h2 {
	margin: 0;
	flex: 1 1 auto;
}

#api-dash-gesamtstatus {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: var(--radius);
	font-weight: bold;
	font-size: .9rem;
	white-space: nowrap;
}

#api-dash-gesamtstatus.api-dash-status-ruhig        { background: var(--msg-ok-bg);   color: var(--msg-ok-text); }
#api-dash-gesamtstatus.api-dash-status-beschaeftigt { background: var(--msg-warn-bg); color: var(--msg-warn-text); }
#api-dash-gesamtstatus.api-dash-status-rueckstau    { background: var(--msg-err-bg);  color: var(--msg-err-text); }

#api-dash-fehlerhinweis {
	flex-basis: 100%;
	font-size: .85rem;
	color: var(--msg-warn-text);
}

.api-dash-gruppe h3 {
	margin: 0 0 .6rem;
	font-size: 1rem;
	color: var(--text-muted);
}

.api-dash-karten {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.api-dash-karte {
	flex: 1 1 220px;
	min-width: 220px;
	background: var(--bg-table-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .7rem .9rem;
}

.api-dash-karte-titel {
	font-weight: bold;
	margin-bottom: .5rem;
}

.api-dash-balken {
	height: .6rem;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: .5rem;
}

/* Live-Aktualisierung (Auftrag Abschnitt 6): alle 5s neue Zielbreite
   per JS (css('width', ...)), diese transition lässt den Balken
   darauf kontinuierlich zulaufen statt zu springen. Die Hintergrund-
   farbe wechselt schneller, damit ein Stufenwechsel (z.B. ruhig ->
   Rückstau) sofort auffällt, ohne 5s lang eine "falsche" Zwischenfarbe
   zu zeigen. */
.api-dash-balken-fuellung {
	height: 100%;
	transition: width 5s linear, background-color 1s linear;
}

.api-dash-balken-fuellung.api-dash-stufe-ruhig        { background: var(--msg-ok-text); }
.api-dash-balken-fuellung.api-dash-stufe-beschaeftigt { background: var(--msg-warn-text); }
.api-dash-balken-fuellung.api-dash-stufe-rueckstau    { background: var(--msg-err-text); }

.api-dash-werte {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	font-size: .85rem;
	color: var(--text-muted);
}