/* minibar.css — lightweight horizontal bar chart styling.
   Pairs with assets/js/minibar.js. */

.minibar {
	--minibar-color: #834884;
	margin: 10px 0;
}

/* The overview chart containers carry fixed heights + a border frame in
   oa.css (left over from the old Google Charts, which needed an explicit
   container size). A flowing bar list must grow with its content instead,
   otherwise the bars overflow the fixed box and paint over the page footer.
   id+class beats the bare-id oa.css rule and only matches once rendered. */
#namefreq_chart.minibar,
#profession_chart.minibar {
	height: auto;
	width: auto;
	border: 0;
}

.minibar-row {
	display: flex;
	align-items: center;
	min-height: 24px;
	cursor: pointer;
	border-radius: 2px;
}

.minibar-row:hover,
.minibar-row:focus {
	background: rgba(131, 72, 132, 0.10);
	outline: none;
}

.minibar-label {
	flex: 0 0 150px;
	width: 150px;
	padding-right: 8px;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333;
}

.minibar-track {
	flex: 1 1 auto;
	min-width: 0;
}

.minibar-fill {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	min-width: 1px;
	height: 18px;
	padding: 0 6px;
	background: var(--minibar-color);
	border-radius: 0 2px 2px 0;
	transition: width 1s ease-out;
	overflow: visible;
	white-space: nowrap;
}

.minibar-value {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #fff;
}

/* Narrow bars: show the count just after the bar instead of inside it. */
.minibar-fill .minibar-value {
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.minibar-empty {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #777;
	padding: 10px 0;
}

@media (max-width: 575px) {
	.minibar-label {
		flex-basis: 90px;
		width: 90px;
		font-size: 12px;
	}
}