/**
 * Módulo visual de paneles y métricas.
 *
 * @package Groowleck
 */

.dashboard {
	display: grid;
	gap: var(--groowleck-space-8);
}

.dashboard__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--groowleck-space-4);
}

.dashboard__title {
	font-size: var(--groowleck-font-size-3xl);
}

.dashboard__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--groowleck-space-5);
}

.dashboard-card {
	display: grid;
	gap: var(--groowleck-space-4);
	padding: var(--groowleck-space-6);
	border: var(--groowleck-border-default);
	border-radius: var(--groowleck-radius-lg);
	background: var(--groowleck-color-background);
	box-shadow: var(--groowleck-shadow-xs);
}

.dashboard-card__label {
	color: var(--groowleck-color-text-muted);
	font-size: var(--groowleck-font-size-sm);
	font-weight: var(--groowleck-font-weight-medium);
}

.dashboard-card__value {
	color: var(--groowleck-color-text-heading);
	font-size: var(--groowleck-font-size-3xl);
	font-weight: var(--groowleck-font-weight-bold);
	line-height: var(--groowleck-line-height-tight);
}

.dashboard-card__meta {
	display: flex;
	align-items: center;
	gap: var(--groowleck-space-2);
	color: var(--groowleck-color-text-muted);
	font-size: var(--groowleck-font-size-sm);
}

.dashboard-panel {
	min-width: 0;
	overflow: hidden;
	border: var(--groowleck-border-default);
	border-radius: var(--groowleck-radius-lg);
	background: var(--groowleck-color-background);
	box-shadow: var(--groowleck-shadow-xs);
}

.dashboard-panel__header,
.dashboard-panel__body,
.dashboard-panel__footer {
	padding: var(--groowleck-space-6);
}

.dashboard-panel__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--groowleck-space-3);
	border-block-end: var(--groowleck-border-default);
}

.dashboard-panel__footer {
	border-block-start: var(--groowleck-border-default);
}

@media (max-width: 64rem) {
	.dashboard__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 42rem) {
	.dashboard__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}