/**
 * wap-editorial — geteilte Komponenten (Status-Badges, Typ-/Diff-Pills,
 * Karten, Filter-Pills). Verwendet AUSSCHLIESSLICH theme.json-Presets und
 * Theme-:root-Tokens. Geladen von „Meine Überarbeitungen", Reviewer und Diff.
 */

/* --------------------------------------------------------- Status-Badges */
.wap-ed-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 5px 11px 5px 9px;
	border-radius: var(--wap-radius-pill);
}
.wap-ed-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}
.wap-ed-badge--active {
	background: var(--wp--preset--color--secondary-15);
	color: var(--wp--preset--color--primary);
}
.wap-ed-badge--active .wap-ed-badge__dot {
	background: var(--wp--preset--color--secondary);
}
.wap-ed-badge--submitted {
	background: var(--wp--preset--color--warning-bg);
	color: var(--wp--preset--color--warning);
}
.wap-ed-badge--submitted .wap-ed-badge__dot {
	background: var(--wp--preset--color--warning);
}
.wap-ed-badge--approved {
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
}
.wap-ed-badge--approved .wap-ed-badge__dot {
	background: var(--wp--preset--color--success);
}
.wap-ed-badge--rejected {
	background: var(--wp--preset--color--danger-bg);
	color: var(--wp--preset--color--danger);
}
.wap-ed-badge--rejected .wap-ed-badge__dot {
	background: var(--wp--preset--color--danger);
}
.wap-ed-badge--expired,
.wap-ed-badge--revoked {
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--text-muted);
}
.wap-ed-badge--expired .wap-ed-badge__dot,
.wap-ed-badge--revoked .wap-ed-badge__dot {
	background: var(--wp--preset--color--border-strong);
}

/* ----------------------------------------------------------- Typ-Pills */
.wap-ed-type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 10px;
	border-radius: var(--wap-radius-pill);
	border: 1px solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--surface);
}
.wap-ed-type .wap-ed-ic {
	width: 12px;
	height: 12px;
}
.wap-ed-type--order {
	border-color: var(--wap-primary-50);
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-04);
}
.wap-ed-type--idea {
	border-color: var(--wp--preset--color--secondary-70);
	color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary-15);
}

/* ----------------------------------------------------------- Diff-Pills */
.wap-ed-diff-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 9px;
	border-radius: var(--wap-radius-pill);
}
.wap-ed-diff-pill .wap-ed-ic {
	width: 12px;
	height: 12px;
}
.wap-ed-diff-pill--changed {
	background: var(--wp--preset--color--secondary-15);
	border: 1px solid var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}
.wap-ed-diff-pill--added {
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
}
.wap-ed-diff-pill--removed {
	background: var(--wp--preset--color--danger-bg);
	color: var(--wp--preset--color--danger);
}
.wap-ed-diff-pill--unchanged {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text-subtle);
	font-weight: 600;
	font-size: 10px;
	padding: 3px 8px;
}

/* ----------------------------------------------------- Filter-Pill-Tabs */
.wap-ed-filter {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}
.wap-ed-sfilter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--wap-radius-pill);
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	transition: background var(--wap-dur-fast) var(--wap-ease-standard),
		color var(--wap-dur-fast) var(--wap-ease-standard),
		border-color var(--wap-dur-fast) var(--wap-ease-standard);
}
.wap-ed-sfilter:hover {
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}
.wap-ed-sfilter.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}
.wap-ed-sfilter__count {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.65;
}
.wap-ed-sfilter:focus-visible {
	outline: none;
	box-shadow: var(--wap-focus-ring);
}

/* ------------------------------------------------ Profil-Verweis-Karte */
.wap-ed-profile-card {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 820px;
	margin: 24px auto 0;
	padding: 16px 20px;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wap-radius-md );
	box-shadow: var( --wap-shadow-1 );
	text-decoration: none;
	transition: box-shadow var( --wap-dur-fast ) var( --wap-ease-standard ),
		border-color var( --wap-dur-fast ) var( --wap-ease-standard );
}
.wap-ed-profile-card:hover {
	box-shadow: var( --wap-shadow-2 );
	border-color: var( --wp--preset--color--secondary );
}
.wap-ed-profile-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var( --wap-radius-md );
	background: var( --wp--preset--color--secondary-15 );
	color: var( --wp--preset--color--secondary );
}
.wap-ed-profile-card__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.wap-ed-profile-card__text strong {
	font-family: var( --wp--preset--font-family--display );
	font-size: 16px;
	font-weight: 700;
	color: var( --wp--preset--color--primary );
}
.wap-ed-profile-card__hint {
	font-size: 13px;
	color: var( --wp--preset--color--text-muted );
}
.wap-ed-profile-card__badge {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: var( --wap-radius-pill );
	background: var( --wp--preset--color--secondary );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.wap-ed-profile-card__arrow {
	color: var( --wp--preset--color--text-subtle );
	font-size: 18px;
}
.wap-ed-profile-card:hover .wap-ed-profile-card__arrow {
	color: var( --wp--preset--color--secondary );
}

/* --------------------------------------------------------- Avatar (mini) */
.wap-ed-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	background: var(--wp--preset--color--primary-08);
	color: var(--wap-primary-70);
}