/* The dashboard (templates/admin/index.html): rows of Unfold cards in a grid, the headline figures large. */
.eb-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.eb-dash-row {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.eb-dash-four {
		grid-template-columns: repeat(2, 1fr);
	}

	.eb-dash-three {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.eb-dash-four {
		grid-template-columns: repeat(4, 1fr);
	}

	.eb-dash-wide {
		grid-template-columns: 2fr 1fr;
	}
}

.eb-dash-stat {
	align-items: flex-start;
	display: flex;
	gap: 0.875rem;
	padding: 0.25rem;
}

.eb-dash-icon {
	background: var(--color-primary-50);
	border-radius: 0.625rem;
	color: var(--color-primary-600);
	font-size: 22px;
	padding: 0.5rem;
}

.eb-dash-label {
	font-size: 0.875rem;
	font-weight: 500;
}

.eb-dash-value {
	color: var(--color-font-important-light);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0.125rem;
}

.eb-dash-note {
	color: var(--color-font-subtle-light);
	font-size: 0.8125rem;
	margin-top: 0.125rem;
}

.eb-dash-shares {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.eb-dash-activity,
.eb-dash-site {
	display: flex;
	flex-direction: column;
}

.eb-dash-activity li {
	align-items: flex-start;
	border-bottom: 1px solid var(--color-base-100);
	display: flex;
	gap: 0.75rem;
	padding: 0.625rem 0;
}

.eb-dash-activity li:last-child,
.eb-dash-site li:last-child {
	border-bottom: 0;
}

.eb-dash-activity .material-symbols-outlined {
	color: var(--color-primary-600);
	font-size: 20px;
}

.eb-dash-activity li > div {
	flex: 1;
	min-width: 0;
}

.eb-dash-activity a:hover,
.eb-dash-site a:hover span {
	color: var(--color-primary-600);
}

.eb-dash-activity time {
	color: var(--color-font-subtle-light);
	flex: none;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.eb-dash-site li {
	border-bottom: 1px solid var(--color-base-100);
	padding: 0.75rem 0;
}

.eb-dash-site a {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

.eb-dash-site strong {
	color: var(--color-font-important-light);
	font-size: 1.25rem;
}

.dark .eb-dash-icon {
	background: var(--color-base-800);
	color: var(--color-primary-400);
}

.dark .eb-dash-value,
.dark .eb-dash-site strong {
	color: var(--color-font-important-dark);
}

.dark .eb-dash-note,
.dark .eb-dash-activity time {
	color: var(--color-font-subtle-dark);
}

.dark .eb-dash-activity li,
.dark .eb-dash-site li {
	border-color: var(--color-base-800);
}

/* Under a table that runs to the card's edges (card_included), so it needs its own room. */
.eb-dash-more {
	color: var(--color-primary-600);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 2rem;
	position: relative;
}

.eb-dash-more:hover {
	text-decoration: underline;
}