/*
 * Dashboard di compagnia.
 *
 * Lo stesso foglio serve il sito e l'amministrazione: i riquadri sono gli
 * stessi, e due fogli diversi sarebbero due cose da tenere allineate.
 *
 * I colori passano da variabili così un tema scuro può ridefinirle senza
 * riscrivere le regole, e le misure sono in em perché la dashboard deve seguire
 * la dimensione del testo del tema che la ospita invece di imporre la propria.
 */

.wpvams-dashboard {
	--wpvams-bg:     #fff;
	--wpvams-line:   #dcdcde;
	--wpvams-ink:    #1d2327;
	--wpvams-mute:   #646970;
	--wpvams-accent: #2271b1;

	color: var(--wpvams-ink);
	font-size: 1rem;
}

/* --- testata ---------------------------------------------------------- */

.wpvams-dashboard-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .6em 1.2em;
	margin-bottom: 1em;
}

.wpvams-dashboard-head h2 { margin: 0; font-size: 1.4em; line-height: 1.2; }

.wpvams-periods { display: flex; flex-wrap: wrap; gap: .1em; font-size: .85em; }

.wpvams-periods a,
.wpvams-periods span {
	padding: .25em .7em;
	border-radius: 999px;
	text-decoration: none;
	color: var(--wpvams-mute);
}

.wpvams-periods a:hover { background: rgba(0, 0, 0, .05); color: var(--wpvams-ink); }
.wpvams-periods .is-active { background: var(--wpvams-accent); color: #fff; font-weight: 600; }

/* --- griglia ---------------------------------------------------------- */

.wpvams-dashboard-grid {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.wpvams-cols-2 .wpvams-dashboard-grid,
	.wpvams-cols-3 .wpvams-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Un riquadro "pieno" occupa la riga: i grafici a trenta colonne e le
	   tabelle diventano illeggibili in mezza larghezza. */
	.wpvams-cols-2 .wpvams-w-full,
	.wpvams-cols-3 .wpvams-w-full { grid-column: 1 / -1; }
}

@media (min-width: 75em) {
	.wpvams-cols-3 .wpvams-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wpvams-widget {
	background: var(--wpvams-bg);
	border: 1px solid var(--wpvams-line);
	border-radius: 6px;
	padding: 1em 1.1em 1.1em;
	min-width: 0; /* Senza questo una tabella larga sfonda la colonna della griglia. */
}

.wpvams-widget > h3 {
	margin: 0 0 .8em;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wpvams-mute);
}

.wpvams-widget-note {
	margin: .7em 0 0;
	font-size: .82em;
	line-height: 1.45;
	color: var(--wpvams-mute);
}

.wpvams-chart-empty {
	margin: .2em 0;
	color: var(--wpvams-mute);
	font-style: italic;
}

/* --- numeri grandi ---------------------------------------------------- */

.wpvams-tiles {
	display: grid;
	gap: .7em;
	grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
}

.wpvams-dtile {
	--accent: var(--wpvams-accent);
	border-left: 3px solid var(--accent);
	padding: .1em 0 .1em .7em;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpvams-dtile .v {
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.wpvams-dtile .l { font-size: .84em; margin-top: .15em; }
.wpvams-dtile .h { font-size: .76em; color: var(--wpvams-mute); margin-top: .2em; }

/* --- grafici ---------------------------------------------------------- */

.wpvams-chart { width: 100%; height: auto; display: block; overflow: visible; }

.wpvams-chart-axis { stroke: #c3c4c7; stroke-width: .5; }
.wpvams-chart-grid { stroke: #e8e8e9; stroke-width: .5; stroke-dasharray: 2 2; }

.wpvams-chart-label {
	font-size: 6px;
	fill: #787c82;
	text-anchor: middle;
}

.wpvams-chart-max {
	font-size: 6px;
	fill: #787c82;
	font-weight: 600;
}

.wpvams-chart rect:hover { filter: brightness(1.15); }

/* --- anello ----------------------------------------------------------- */

.wpvams-donut-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em 1.4em;
}

.wpvams-donut { width: 8.5em; height: 8.5em; flex: none; }

.wpvams-donut-total {
	font-size: 6px;
	font-weight: 700;
	text-anchor: middle;
	fill: #1d2327;
}

.wpvams-donut-sub {
	font-size: 3.2px;
	text-anchor: middle;
	fill: #787c82;
	text-transform: uppercase;
	letter-spacing: .1px;
}

.wpvams-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 10em;
	min-width: 0;
	font-size: .86em;
}

.wpvams-legend li {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .2em 0;
	border-bottom: 1px solid #f0f0f1;
}

.wpvams-legend li:last-child { border-bottom: 0; }

.wpvams-legend i {
	width: .7em;
	height: .7em;
	border-radius: 2px;
	flex: none;
}

.wpvams-legend span { flex: 1; min-width: 0; }
.wpvams-legend b { font-variant-numeric: tabular-nums; }
.wpvams-legend em { color: var(--wpvams-mute); font-style: normal; width: 3em; text-align: right; }

/* --- classifiche ------------------------------------------------------ */

.wpvams-ranking { list-style: none; margin: 0; padding: 0; }
.wpvams-ranking li { margin-bottom: .75em; }
.wpvams-ranking li:last-child { margin-bottom: 0; }

.wpvams-ranking-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .8em;
	font-size: .9em;
}

.wpvams-ranking-head span { min-width: 0; overflow-wrap: anywhere; }
.wpvams-ranking-head small { color: var(--wpvams-mute); font-weight: 400; }
.wpvams-ranking-head b { flex: none; font-variant-numeric: tabular-nums; }

.wpvams-ranking-bar {
	height: 5px;
	border-radius: 3px;
	background: #f0f0f1;
	overflow: hidden;
	margin-top: .25em;
}

.wpvams-ranking-bar > i { display: block; height: 100%; border-radius: 3px; }
.wpvams-ranking-note { display: block; font-size: .78em; color: var(--wpvams-mute); margin-top: .15em; }

/* --- tabelle ---------------------------------------------------------- */

.wpvams-scroll { overflow-x: auto; }

.wpvams-dtable { width: 100%; border-collapse: collapse; font-size: .88em; }
.wpvams-dtable th {
	text-align: left;
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpvams-mute);
	padding: 0 .5em .35em 0;
	white-space: nowrap;
}
.wpvams-dtable td { padding: .4em .5em .4em 0; border-top: 1px solid #f0f0f1; }
.wpvams-dtable td.num, .wpvams-dtable th.num {
	text-align: right;
	padding-right: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wpvams-dtable small { color: var(--wpvams-mute); }

.wpvams-grade {
	display: inline-block;
	min-width: 2em;
	padding: .05em .4em;
	border-radius: 3px;
	color: #fff;
	font-weight: 700;
	font-size: .9em;
	text-align: center;
}

/* --- luoghi ----------------------------------------------------------- */

.wpvams-places { list-style: none; margin: .8em 0 0; padding: 0; font-size: .88em; }

.wpvams-places li {
	display: grid;
	grid-template-columns: 3.4em 2.2em 1fr;
	align-items: baseline;
	gap: .4em;
	padding: .35em 0;
	border-top: 1px solid #f0f0f1;
}

.wpvams-places b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wpvams-places span { color: var(--wpvams-mute); font-variant-numeric: tabular-nums; }
.wpvams-places small { color: var(--wpvams-mute); min-width: 0; overflow-wrap: anywhere; }

/* --- mappa ------------------------------------------------------------ */

.wpvams-dmap {
	height: 22em;
	border-radius: 4px;
	border: 1px solid var(--wpvams-line);
	background: #eaeaec;
	z-index: 0; /* Sotto ai menu del tema: Leaflet alza i suoi pannelli a 400. */
}

.wpvams-dmap-n {
	background: none;
	border: 0;
	box-shadow: none;
	color: #fff;
	font-weight: 700;
	font-size: .72em;
	padding: 0;
}

.wpvams-dmap-n::before { display: none; }