/*
 * Modul-CSS Projekt. Bewusst sparsam — Core-Klassen werden überall wieder-
 * verwendet (datentabelle, karte, status-badge, btn, …). Nur Modul-eigene
 * Bausteine ohne Core-Pendant landen hier.
 */

/* Kleines Farb-Quadrat zur Vorschau einer Status-/Bereichs-Farbe.
 * Hintergrund per Inline-Style aus dem hinterlegten Farb-Wert.
 */
.farb-chip {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 3px;
	margin-right: 0.4em;
	vertical-align: middle;
	border: 1px solid color-mix(in srgb, var(--f-text-schwach, #6c7086) 30%, transparent);
}

/* Schmaler horizontaler Fortschrittsbalken für Projekt-Listen und -Detail.
 * Füllung wird per Inline-Style aus dem Prozent-Wert (0-100) gesetzt.
 */
.fortschritt-balken {
	display: block;
	width: 100%;
	max-width: 140px;
	height: 8px;
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 12%, transparent);
	border-radius: 4px;
	overflow: hidden;
}

.fortschritt-balken__fuellung {
	display: block;
	height: 100%;
	background: var(--f-status-aktiv, #a6e3a1);
	transition: width 0.2s ease;
}

/* Kommentar-Block im Aufgaben-Detail. */
.kommentar-eintrag {
	border-left: 3px solid color-mix(in srgb, var(--f-aktiv, #89b4fa) 50%, transparent);
	padding: 0.5em 0.75em;
	margin-bottom: 0.75em;
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 5%, transparent);
	border-radius: 4px;
}

.kommentar-kopf {
	display: flex;
	gap: 0.75em;
	align-items: baseline;
	margin-bottom: 0.3em;
}

.kommentar-kopf small {
	color: var(--f-text-schwach, #6c7086);
}

/* Hervorhebung für überfällige Aufgaben in Listen. */
.zeile-warnung {
	background: color-mix(in srgb, var(--f-status-inaktiv, #f38ba8) 8%, transparent);
}