/*
 * Curseur de notation (0 à 10) — ecole_evaluations.php.
 *
 * Remplace ion.RangeSlider (ancien thème, jQuery) par un <input
 * type="range"> natif : plus léger, sans dépendance, et cohérent avec le
 * reste de la refonte (Choices.js/Flatpickr/Simple-DataTables — vanilla JS,
 * sans jQuery). Le comportement (survol des graduations 0-10, sauvegarde à
 * la fin du glissement) est repris de assets/js/ecole-evaluations.js sur
 * l'évènement natif "change" (équivalent de l'évènement onFinish
 * d'ion.RangeSlider — ne se déclenche qu'au relâchement, pas à chaque pas
 * du glissement, pour éviter une requête AJAX par pixel de déplacement).
 */

.ag-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ag-space-2, 8px);
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
}

.ag-slider__valeur {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ag-color-primary);
	min-width: 3ch;
	text-align: center;
}

.ag-slider__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: var(--ag-radius-full, 999px);
	background: var(--ag-color-border-strong, #d0d5dd);
	outline: none;
	cursor: pointer;
}

.ag-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ag-color-primary);
	border: 2px solid var(--ag-color-primary-contrast, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.ag-slider__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ag-color-primary);
	border: 2px solid var(--ag-color-primary-contrast, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.ag-slider__input:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.ag-slider__input:disabled::-webkit-slider-thumb {
	background: var(--ag-color-text-muted, #667085);
}

.ag-slider__input:disabled::-moz-range-thumb {
	background: var(--ag-color-text-muted, #667085);
}

/*
 * Graduations 0-10 sous le curseur (équivalent du "grid: true"
 * d'ion.RangeSlider) — un <datalist> natif (voir HTML5 <input list="...">)
 * n'affiche les graduations que sur certains navigateurs (Firefox), d'où ce
 * repère textuel explicite, affiché partout.
 */
.ag-slider__graduations {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 0.7rem;
	color: var(--ag-color-text-muted, #667085);
	padding: 0 2px;
}