/**
 * Shared, theme-friendly styles for all three Ampache blocks/shortcode views. Stable
 * BEM-like classes only; no hard-coded colors or fonts beyond what block supports provide.
 */

.jba-heading {
	margin: 0 0 0.5em;
}

.wp-block-jackson-brain-ampache-library-stats,
.wp-block-jackson-brain-ampache-now-playing {
	margin-bottom: 0.75em;
}

.jba-stat-list {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jba-stat-label {
	font-weight: 600;
}

.jba-track-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jba-track {
	align-items: center;
	display: flex;
	gap: 0.75em;
	padding: 0.5em 0;
}

.jba-art {
	border-radius: 3px;
	flex-shrink: 0;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.jba-track-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.jba-track-title {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jba-track-meta,
.jba-time,
.jba-user,
.jba-client {
	color: currentColor;
	opacity: 0.75;
}

.jba-track-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jba-time,
.jba-user,
.jba-client {
	flex-shrink: 0;
	font-size: 0.85em;
}

.jba-empty,
.jba-fallback,
.jba-updated {
	opacity: 0.75;
}

.jba-editor-status {
	border-top: 1px dashed currentColor;
	margin-top: 0.75em;
	opacity: 0.6;
	padding-top: 0.5em;
}