/* ============================================================================
   minecraft.fr · « État des services » — panneau « Temps de réponse » multi-services
   ----------------------------------------------------------------------------
   Sélecteur de service (5 onglets) × sélecteur de granularité (Jour/Semaine/Mois)
   propre à chaque service. 100 % CSS, aucun JS. Les 15 SVG sont dans le DOM ;
   un seul visible selon la combinaison sélectionnée.

   Réutilise le look des onglets de granularité existants (.mcfr-mp__tabs) et les
   styles internes de graphe déjà fournis par statut.css (.mcfr-chart .area, …).

   Les règles d'affichage par service (#mcfr-svc-{id}:checked ~ …) sont générées
   dynamiquement en PHP (ids de service variables) et injectées en inline-style.
   ============================================================================ */

/* Radios masqués mais focusables (même technique que .mcfr-mp__radio). */
.mcfr-metrics-panel--multi .mcfr-svc-radio,
.mcfr-metrics-panel--multi .mcfr-gran-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* Barre d'onglets de service : même style que .mcfr-mp__tabs. */
.mcfr-svc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 2px solid var(--mc-edge);
	box-shadow: var(--mc-sh-sm);
	margin: 16px 18px 0;
}
.mcfr-svc-tab {
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--mc-ink-2);
	background: var(--mc-surface);
	padding: 8px 14px;
	cursor: pointer;
	user-select: none;
}
.mcfr-svc-tab + .mcfr-svc-tab { border-left: 2px solid var(--mc-edge); }
.mcfr-svc-tab:hover { background: var(--mc-bone); }

/* Panneaux : cachés par défaut ; affichés par les règles générées en PHP. */
.mcfr-svc-panel { display: none; }

/* Onglets de granularité (par service) : même style que .mcfr-mp__tabs. */
.mcfr-gran-tabs {
	display: inline-flex;
	gap: 0;
	border: 2px solid var(--mc-edge);
	box-shadow: var(--mc-sh-sm);
	margin: 14px 18px 0;
}
.mcfr-gran-tabs label {
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--mc-ink-2);
	background: var(--mc-surface);
	padding: 8px 16px;
	cursor: pointer;
	user-select: none;
}
.mcfr-gran-tabs label + label { border-left: 2px solid var(--mc-edge); }
.mcfr-gran-tabs label:hover { background: var(--mc-bone); }

/* Zone des graphes. */
.mcfr-gran-views { padding: 12px 18px 18px; position: relative; }
.mcfr-gran-views .mcfr-chart { display: none; }
.mcfr-gran-views .mcfr-chart svg { width: 100%; height: auto; display: block; }

/* Granularité — affichage + onglet actif (générique : classes + data-gran). */
.mcfr-gran-radio.is-day:checked   ~ .mcfr-gran-views .mcfr-chart--day,
.mcfr-gran-radio.is-week:checked  ~ .mcfr-gran-views .mcfr-chart--week,
.mcfr-gran-radio.is-month:checked ~ .mcfr-gran-views .mcfr-chart--month {
	display: block;
}
.mcfr-gran-radio.is-day:checked   ~ .mcfr-gran-tabs label[data-gran="day"],
.mcfr-gran-radio.is-week:checked  ~ .mcfr-gran-tabs label[data-gran="week"],
.mcfr-gran-radio.is-month:checked ~ .mcfr-gran-tabs label[data-gran="month"] {
	background: var(--mc-tq);
	color: #06231E;
}

/* Focus clavier visible (parité avec .mcfr-mp__radio:focus-visible). */
.mcfr-svc-radio:focus-visible  ~ .mcfr-svc-tabs,
.mcfr-gran-radio:focus-visible ~ .mcfr-gran-tabs {
	outline: 2px solid var(--mc-tq);
	outline-offset: 2px;
}

/* Graphe « données insuffisantes ». */
.mcfr-chart--empty svg { width: 100%; height: auto; display: block; min-height: 160px; }
.mcfr-chart__empty {
	fill: var(--mc-muted);
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.mcfr-svc-tabs,
	.mcfr-gran-tabs { margin-left: 16px; margin-right: 16px; }
	.mcfr-gran-views { padding: 12px 14px 16px; }
}