/**
 * DMR75 — habillage des pages de statistiques.
 *
 * Les gabarits sont écrits en classes Bootstrap (card, table-striped,
 * bg-primary…) alors que Bootstrap n'est pas chargé sur le site : toutes ces
 * classes étaient inertes et les pages s'affichaient en HTML brut. On les
 * réimplémente ici, dans le langage visuel du reste du site, et scopées aux
 * trois gabarits de stats pour ne rien déborder ailleurs.
 */

.page-template-statistiques-mensuelles,
.page-template-statistiques-hebdos,
.page-template-statistiques-quotidiennes {
	--stats-accent: #0f4a7b;
	--stats-border: rgba(128, 128, 128, 0.25);
	--stats-surface: rgba(128, 128, 128, 0.06);
	--stats-zebra: rgba(128, 128, 128, 0.05);
}

.page-template-statistiques-mensuelles .container-fluid,
.page-template-statistiques-hebdos .container-fluid,
.page-template-statistiques-quotidiennes .container-fluid {
	padding: 0;
}

/* Cartes */
.page-template-statistiques-mensuelles .card,
.page-template-statistiques-hebdos .card,
.page-template-statistiques-quotidiennes .card {
	margin-bottom: 26px;
	border: 1px solid var(--stats-border);
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
}

.page-template-statistiques-mensuelles .card-body,
.page-template-statistiques-hebdos .card-body,
.page-template-statistiques-quotidiennes .card-body {
	padding: 0;
}

.page-template-statistiques-mensuelles .card-body.text-center,
.page-template-statistiques-hebdos .card-body.text-center,
.page-template-statistiques-quotidiennes .card-body.text-center {
	padding: 26px 20px;
	text-align: center;
	font-size: 34px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* En-têtes de section. Les gabarits distinguent les blocs par des classes
   Bootstrap de couleur ; on garde cette distinction mais dans une gamme
   sobre, accordée au reste du site. */
.page-template-statistiques-mensuelles .card h4,
.page-template-statistiques-hebdos .card h4,
.page-template-statistiques-quotidiennes .card h4 {
	margin: 0;
	padding: 13px 18px !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff !important;
	background: var(--stats-accent);
}

.page-template-statistiques-mensuelles .card h4.bg-info,
.page-template-statistiques-hebdos .card h4.bg-info,
.page-template-statistiques-quotidiennes .card h4.bg-info { background: #1f6f8b; }

.page-template-statistiques-mensuelles .card h4.bg-secondary,
.page-template-statistiques-hebdos .card h4.bg-secondary,
.page-template-statistiques-quotidiennes .card h4.bg-secondary { background: #4a5568; }

.page-template-statistiques-mensuelles .card h4.bg-warning,
.page-template-statistiques-hebdos .card h4.bg-warning,
.page-template-statistiques-quotidiennes .card h4.bg-warning { background: #8a5a00; }

.page-template-statistiques-mensuelles .card h4.bg-danger,
.page-template-statistiques-hebdos .card h4.bg-danger,
.page-template-statistiques-quotidiennes .card h4.bg-danger { background: #963b3f; }

/* Tableaux */
.page-template-statistiques-mensuelles .table,
.page-template-statistiques-hebdos .table,
.page-template-statistiques-quotidiennes .table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.page-template-statistiques-mensuelles .table th,
.page-template-statistiques-hebdos .table th,
.page-template-statistiques-quotidiennes .table th {
	padding: 10px 14px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	border-bottom: 1px solid var(--stats-border);
	background: var(--stats-surface);
}

.page-template-statistiques-mensuelles .table td,
.page-template-statistiques-hebdos .table td,
.page-template-statistiques-quotidiennes .table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--stats-border);
	vertical-align: middle;
}

/* Les colonnes de durée et de comptage se lisent en colonne : chasse fixe. */
.page-template-statistiques-mensuelles .table td:nth-last-child(-n+2),
.page-template-statistiques-hebdos .table td:nth-last-child(-n+2),
.page-template-statistiques-quotidiennes .table td:nth-last-child(-n+2) {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.page-template-statistiques-mensuelles .table-striped tbody tr:nth-child(odd),
.page-template-statistiques-hebdos .table-striped tbody tr:nth-child(odd),
.page-template-statistiques-quotidiennes .table-striped tbody tr:nth-child(odd) {
	background: var(--stats-zebra);
}

.page-template-statistiques-mensuelles .table tbody tr:last-child td,
.page-template-statistiques-hebdos .table tbody tr:last-child td,
.page-template-statistiques-quotidiennes .table tbody tr:last-child td {
	border-bottom: none;
}

/* Sélecteur de date : la liste couvre plusieurs années, elle doit rester
   utilisable sans déborder. */
.page-template-statistiques-mensuelles .form-group,
.page-template-statistiques-hebdos .form-group,
.page-template-statistiques-quotidiennes .form-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.page-template-statistiques-mensuelles .form-control,
.page-template-statistiques-hebdos .form-control,
.page-template-statistiques-quotidiennes .form-control {
	max-width: 320px;
	padding: 8px 12px;
	border: 1px solid var(--stats-border);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
}

.page-template-statistiques-mensuelles label,
.page-template-statistiques-hebdos label,
.page-template-statistiques-quotidiennes label {
	margin: 0;
	font-weight: 600;
	opacity: 0.75;
}

@media (max-width: 575px) {
	.page-template-statistiques-mensuelles .card-body.text-center,
	.page-template-statistiques-hebdos .card-body.text-center,
	.page-template-statistiques-quotidiennes .card-body.text-center {
		font-size: 26px;
	}
}