.facility-usage {
	margin: 0 auto;
	font-family: var(--font-sans, "Nunito Sans", sans-serif);
}

.facility-usage__header {
	margin-bottom: 2rem;
	text-align: center;
}

.facility-usage__title {
	font-family: var(--font-mont, "Montserrat", sans-serif);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-gray-900, #131716);
	margin: 0 0 0.25rem;
}

.facility-usage__subtitle {
	font-size: 1.125rem;
	color: var(--color-gray-500, #535c5c);
	margin: 0 0 0.75rem;
}

.facility-usage__live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-gray-400, #868c8c);
}

.facility-usage__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-green, #00ac3e);
	animation: facility-usage-pulse 2s ease-in-out infinite;
}

.facility-usage__refreshing .facility-usage__dot {
	background: var(--color-yellow-400, #facc15);
}

@keyframes facility-usage-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Grid */
.facility-usage__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.facility-usage__grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}

@media (min-width: 1024px) {
	.facility-usage__grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* Cards */
.facility-usage__card {
	background: #fff;
	border: 1px solid var(--color-gray-100, #edeeee);
	border-radius: 12px;
	padding: 1.5rem 1rem;
	text-align: center;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
}

.facility-usage__card:hover {
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: var(--color-gray-200, #cbcece); */
}

.facility-usage__card--closed {
	opacity: 0.55;
}

/* SVG Progress Circle */
.facility-usage__circle-wrap {
	width: 110px;
	height: 110px;
	margin: 0 auto 0.75rem;
	position: relative;
}

.facility-usage__circle-svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.facility-usage__circle-bg {
	fill: none;
	stroke: var(--color-gray-100, #edeeee);
	stroke-width: 8;
}

.facility-usage__circle-progress {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.facility-usage__circle-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-gray-800, #212424);
}

.facility-usage__card--closed .facility-usage__circle-text {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-gray-400, #868c8c);
}

/* Card Content */
.facility-usage__name {
	font-family: var(--font-mont, "Montserrat", sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-gray-800, #212424);
	margin: 0 0 0.375rem;
	line-height: 1.3;
}

.facility-usage__count {
	font-size: 0.8125rem;
	color: var(--color-gray-500, #535c5c);
	margin-bottom: 0.375rem;
}

.facility-usage__status {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.375rem;
}

.facility-usage__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}

.facility-usage__updated {
	font-size: 0.6875rem;
	color: var(--color-gray-400, #868c8c);
}

/* Refresh timestamp */
.facility-usage__refresh-time {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--color-gray-400, #868c8c);
}