/**
 * DME Community - Badges (Modul "badges").
 * Inline-Badge-Reihe neben Usernamen + Admin-Zuordnungs-UI.
 * Nutzt die gemeinsamen Variablen aus community.css (Dependency: dmc-community).
 *
 * Da die Badge-Reihe auch ausserhalb eines .dmc-Wrappers gerendert werden kann
 * (z. B. inline neben einem Usernamen), definieren wir Fallback-Variablen direkt
 * auf .dmc-badges.
 */

.dmc-badges {
	--dmc-accent: #45f882;
	--dmc-gold: #ffbe18;
	--dmc-card: #22292f;
	--dmc-border: #22292f;

	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: middle;
	line-height: 1;
}

.dmc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	flex: 0 0 auto;
}

.dmc-badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Akzent-Glow auf Gold-Support und VIP. */
.dmc-badge--gold {
	box-shadow: 0 0 0 1px rgba(255, 190, 24, 0.35), 0 0 8px rgba(255, 190, 24, 0.25);
	border-color: rgba(255, 190, 24, 0.4);
}

.dmc-badge--vip {
	box-shadow: 0 0 0 1px rgba(69, 248, 130, 0.35), 0 0 8px rgba(69, 248, 130, 0.3);
	border-color: rgba(69, 248, 130, 0.4);
}

/* Groessere Variante (z. B. im Profil) ueber Modifier am Container. */
.dmc-badges--lg .dmc-badge {
	width: 40px;
	height: 40px;
	border-radius: 4px;
}

/* ----------------------------------------------------------------------
 * Admin-Zuordnungs-UI (Badges-Verwaltungsseite)
 * -------------------------------------------------------------------- */

.dmc-badges-admin .widefat td .dmc-badges {
	gap: 4px;
}

.dmc-badges-admin .widefat th,
.dmc-badges-admin .widefat td {
	vertical-align: middle;
}

.dmc-badges-admin .search-box {
	margin: 12px 0;
	display: flex;
	gap: 8px;
	align-items: center;
}

.dmc-badges-admin .dmc-badges-search input[type="search"] {
	min-width: 240px;
}

.dmc-badges-admin .button-primary {
	background: #1f8a4c;
	border-color: #1f8a4c;
}

.dmc-badges-admin .button-primary:hover,
.dmc-badges-admin .button-primary:focus {
	background: #45f882;
	border-color: #45f882;
	color: #0b0e13;
}