/******************************************************************************
 *
 * Reusable metric and summary cards
 *
 ******************************************************************************/

.metric-card {
	--metric-accent: var(--crdm-neutral);
	--metric-bubble: rgba(var(--crdm-neutral-rgb), .05);
	position: relative;
	display: flex;
	box-sizing: border-box;
	min-width: 0;
	min-height: 116px;
	padding: var(--crdm-space-5);
	overflow: hidden;
	flex-direction: column;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .025),
			rgba(255, 255, 255, .008)
		),
		var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border);
	border-radius: var(--crdm-radius-md);
	box-shadow: var(--crdm-shadow-inset);
	color: var(--crdm-text-strong);
	font-family: var(--crdm-font-ui);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition:
		transform var(--crdm-transition-fast),
		border-color var(--crdm-transition-fast),
		background var(--crdm-transition-fast);
}

.metric-card:hover,
.metric-card:focus-within,
a.metric-card:focus {
	transform: translateY(-2px) scale(1.01);
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .045),
			rgba(255, 255, 255, .012)
		),
		var(--crdm-surface-raised);
	border-color: var(--crdm-border-hover);
	color: #fff;
	outline: none;
}

.metric-card.is-active {
	border-color: var(--metric-accent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .035),
		0 0 0 1px color-mix(in srgb, var(--metric-accent) 22%, transparent),
		var(--crdm-shadow-raised);
}

.metric-card.is-active::before {
	height: 3px;
}

.metric-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--metric-accent);
}

.metric-card::after {
	content: "";
	position: absolute;
	right: -28px;
	bottom: -34px;
	width: 78px;
	height: 78px;
	background: var(--metric-bubble);
	border-radius: 50%;
	pointer-events: none;
}

.metric-card > * {
	position: relative;
	z-index: 1;
}

a.metric-card {
	display: flex;
}

.metric-card--neutral {
	--metric-accent: var(--crdm-neutral);
	--metric-bubble: rgba(var(--crdm-neutral-rgb), .05);
}

.metric-card--warning {
	--metric-accent: var(--crdm-warning);
	--metric-bubble: rgba(var(--crdm-warning-rgb), .05);
}

.metric-card--success {
	--metric-accent: var(--crdm-success);
	--metric-bubble: rgba(var(--crdm-success-rgb), .05);
}

.metric-card--danger {
	--metric-accent: var(--crdm-danger);
	--metric-bubble: rgba(var(--crdm-danger-soft-rgb), .05);
}

.metric-card--blue {
	--metric-accent: var(--crdm-info);
	--metric-bubble: rgba(var(--crdm-info-rgb), .05);
}

.metric-card--purple {
	--metric-accent: var(--crdm-purple);
	--metric-bubble: rgba(var(--crdm-purple-rgb), .05);
}

.metric-card--centered {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.metric-card--featured {
	align-items: center;
	justify-content: center;
	text-align: center;
	background:
		linear-gradient(
			135deg,
			rgba(88, 151, 251, .05),
			rgba(214, 180, 123, .045)
		),
		var(--crdm-surface-featured);
}

.metric-card__label {
	width: 100%;
	margin-bottom: 10px;
	overflow: hidden;
	color: var(--crdm-text-label);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .1em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.metric-card--centered .metric-card__label,
.metric-card--featured .metric-card__label {
	text-align: center;
}

.metric-card__label i {
	width: 17px;
	margin-right: 4px;
	color: var(--crdm-brand-gold);
	text-align: center;
}

.metric-card__main {
	display: flex;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.metric-card--centered .metric-card__main,
.metric-card--featured .metric-card__main {
	justify-content: center;
}

.metric-card__value {
	min-width: 0;
	overflow: hidden;
	color: var(--crdm-text-value);
	font-size: clamp(27px, 2.6vw, 36px);
	font-weight: 300;
	line-height: 1;
	text-overflow: ellipsis;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
	white-space: nowrap;
}

.metric-card__value--warning {
	color: var(--crdm-warning);
}

.metric-card__value--success {
	color: var(--crdm-success);
}

.metric-card__value--danger {
	color: var(--crdm-danger);
}

.metric-card__value--blue {
	color: var(--crdm-info-light);
}

.metric-card__value--purple {
	color: var(--crdm-purple-light);
}

.metric-card__value--featured {
	color: var(--crdm-warning);
	font-size: clamp(28px, 3vw, 40px);
	text-shadow: 0 0 14px rgba(240, 209, 87, .1);
}

.metric-card__secondary {
	flex: 0 0 auto;
	color: var(--crdm-info-light);
	font-size: clamp(15px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1;
	text-align: right;
}

.metric-card__footer {
	display: flex;
	width: 100%;
	margin-top: auto;
	padding-top: 8px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--crdm-text-muted);
	border-top: 1px solid var(--crdm-border);
	font-size: 10px;
	line-height: 1.3;
}

.metric-card__footer > :last-child {
	color: var(--crdm-text-strong);
	font-weight: bold;
	text-align: right;
}

.metric-card__note {
	max-width: 220px;
	color: var(--crdm-text-subtle);
	font-size: 9px;
	line-height: 1.35;
}

.metric-card__breakdown {
	display: grid;
	width: 100%;
	gap: 7px;
}

.metric-card__breakdown--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card__breakdown--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card__item {
	display: flex;
	box-sizing: border-box;
	min-width: 0;
	min-height: 69px;
	padding: 8px 5px 7px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .018);
	border: 1px solid var(--crdm-border);
	border-radius: var(--crdm-radius-sm);
	color: var(--crdm-text-strong);
	text-align: center;
	text-decoration: none;
	transition:
		background var(--crdm-transition-fast),
		border-color var(--crdm-transition-fast);
}

a.metric-card__item:hover,
a.metric-card__item:focus {
	background: rgba(255, 255, 255, .05);
	border-color: var(--crdm-border-strong);
	color: #fff;
	outline: none;
}

.metric-card__item-value {
	color: var(--metric-accent);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 300;
	line-height: 1;
}

.metric-card__item-label {
	margin-top: 7px;
	overflow: hidden;
	color: var(--crdm-text-muted);
	font-size: 9px;
	font-weight: bold;
	letter-spacing: .04em;
	line-height: 1.2;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.metric-card,
	.metric-card__item {
		transition: none;
	}
}