/* Jura Rando Map — styles
   Palette inspirée des cartes topographiques : vert sapin, ocre sentier,
   crème "papier carte", accent rouille pour les alertes. */

.jrm-wrapper {
	--jrm-forest: #22423a;
	--jrm-forest-dark: #172e28;
	--jrm-trail: #b5651d;
	--jrm-trail-light: #d98a3d;
	--jrm-paper: #f6f2e9;
	--jrm-paper-dark: #ece4d2;
	--jrm-ink: #24291f;
	--jrm-alert: #9a3324;
	--jrm-water: #2f6690;
	--jrm-radius: 4px;
	--jrm-shadow: 0 2px 10px rgba(23, 46, 40, 0.18);

	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--jrm-ink);
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	background: var(--jrm-paper);
	overflow: hidden;
	/* Empêche les éléments Leaflet à fort z-index (contrôles, popups : jusqu'à 1000)
	   de "sortir" du widget et de passer devant l'en-tête du site au scroll. */
	isolation: isolate;
	z-index: 0;
}

.jrm-wrapper *,
.jrm-wrapper *::before,
.jrm-wrapper *::after {
	box-sizing: border-box;
}

/* Certains thèmes/frameworks appliquent des règles globales (ex. sur les
   balises <a> ou <div>) qui neutralisent le comportement natif de l'attribut
   HTML "hidden" (display:none). On force ce comportement partout dans le
   plugin, quoi qu'il arrive côté thème — c'est ce qui pilote l'ouverture/
   fermeture du panneau "Mon itinéraire", du volet "Profil altimétrique",
   du bouton "Retour à la fiche", etc. */
.jrm-wrapper [hidden] {
	display: none !important;
}

/* Toolbar */
.jrm-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var(--jrm-forest);
	border-bottom: 3px solid var(--jrm-trail);
}

.jrm-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 14px;
	border-radius: var(--jrm-radius);
	border: 1px solid var(--jrm-paper-dark);
	background: var(--jrm-paper);
	color: var(--jrm-forest-dark);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.jrm-btn:hover {
	color: var(--jrm-forest-dark);
	background: var(--jrm-paper);
	transform: translateY(-1px) scale(1.04);
	box-shadow: var(--jrm-shadow);
}

.jrm-btn:active {
	transform: translateY(1px) scale(1);
}

.jrm-btn:focus-visible {
	outline: 3px solid var(--jrm-trail-light);
	outline-offset: 1px;
}

.jrm-btn-primary {
	background: var(--jrm-trail);
	border-color: var(--jrm-trail);
	color: #fff;
}

.jrm-btn-primary:hover {
	color: #fff;
	background: var(--jrm-trail-light);
	border-color: var(--jrm-trail-light);
}

.jrm-mode-btn.is-active:hover {
	color: #fff;
	background: var(--jrm-forest);
}

.jrm-marker-btn.is-active:hover {
	color: #fff;
	background: var(--jrm-trail);
}

.jrm-toggle-planner .jrm-icon {
	display: inline-block;
	margin-right: 6px;
	font-weight: 700;
}

.jrm-toggle-planner[aria-expanded="true"] .jrm-icon {
	transform: rotate(45deg);
}

.jrm-toolbar-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.jrm-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.jrm-fullscreen-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
}

.jrm-toggle-official.is-active {
	background: #2f6690;
	border-color: #2f6690;
	color: #fff;
}

.jrm-fullscreen-btn svg {
	flex: none;
}

/* Un seul des deux pictogrammes doit être visible à la fois. On pilote
   l'affichage uniquement via CSS (attribut aria-pressed, mis à jour en JS)
   plutôt que via l'attribut HTML "hidden", que certains thèmes neutralisent
   avec des règles génériques du type "svg { display: block; }". */
.jrm-fullscreen-btn svg.jrm-icon-expand,
.jrm-fullscreen-btn svg.jrm-icon-compress {
	display: none !important;
}

.jrm-fullscreen-btn svg.jrm-icon-expand {
	display: inline-block !important;
}

.jrm-fullscreen-btn[aria-pressed="true"] svg.jrm-icon-expand {
	display: none !important;
}

.jrm-fullscreen-btn[aria-pressed="true"] svg.jrm-icon-compress {
	display: inline-block !important;
}

/* Map + legend */
.jrm-map-container {
	position: relative;
}

.jrm-map {
	width: 100%;
	background: #dfe7e4;
	/* Curseur "grab" par défaut (Leaflet), remplacé par une croix précise
	   quand le panneau de création d'itinéraire est ouvert. */
	cursor: grab;
}

/* Mode plein écran : la carte occupe tout l'écran et s'ajuste en hauteur. */
.jrm-wrapper:fullscreen,
.jrm-wrapper:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	max-width: none;
}

.jrm-wrapper:fullscreen .jrm-map-container,
.jrm-wrapper:-webkit-full-screen .jrm-map-container {
	flex: 1 1 auto;
	min-height: 0;
}

.jrm-wrapper:fullscreen .jrm-map,
.jrm-wrapper:-webkit-full-screen .jrm-map {
	height: 100% !important;
}

.jrm-wrapper:fullscreen .jrm-planner,
.jrm-wrapper:-webkit-full-screen .jrm-planner {
	max-height: 45vh;
}

/* Curseur précis en mode création d'itinéraire / ajout de repère.
   Les marqueurs conservent leur propre curseur (pointer / move via Leaflet). */
.jrm-wrapper.jrm-planner-open .jrm-map,
.jrm-wrapper.jrm-planner-open .leaflet-container {
	cursor: crosshair;
}

/* Légende */
.jrm-legend {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 1000;
	background: rgba(246, 242, 233, 0.92);
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	padding: 8px 10px;
	font-size: 11.5px;
	color: var(--jrm-ink);
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: var(--jrm-shadow);
	pointer-events: none;
}

.jrm-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.jrm-legend-swatch {
	display: inline-block;
	width: 20px;
	height: 0;
	border-top-width: 3px;
	border-top-style: solid;
}

.jrm-legend-trail {
	border-top-color: #22423a;
	opacity: 0.75;
}

.jrm-legend-route {
	border-top-color: #b5651d;
}

.jrm-legend-official {
	border-top-color: #2f6690;
	opacity: 0.9;
}

.jrm-legend-zoom-hint {
	font-style: italic;
	color: #6b6656;
}

@media (max-width: 640px) {
	.jrm-legend {
		font-size: 10.5px;
		padding: 6px 8px;
	}
}

.jrm-attribution {
	margin: 0;
	padding: 6px 12px;
	font-size: 11px;
	color: #6b6656;
	background: var(--jrm-paper);
	border-top: 1px solid var(--jrm-paper-dark);
}

/* Planner panel */
.jrm-planner {
	background: var(--jrm-paper);
	border-bottom: 1px solid var(--jrm-paper-dark);
	max-height: 70vh;
	overflow-y: auto;
}

.jrm-planner-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 6px;
}

.jrm-planner-header h3 {
	margin: 0;
	font-size: 17px;
	letter-spacing: 0.02em;
	color: var(--jrm-forest-dark);
}

.jrm-close-planner {
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--jrm-forest-dark);
	padding: 4px 8px;
}

.jrm-close-planner:hover {
	color: var(--jrm-alert);
}

.jrm-planner-body {
	padding: 6px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jrm-field-group label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jrm-forest);
	margin-bottom: 6px;
}

.jrm-field-group input[type="text"] {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	background: #fff;
	font-size: 14px;
	color: var(--jrm-ink);
}

.jrm-field-group input[type="text"]:focus-visible {
	outline: 2px solid var(--jrm-trail);
	outline-offset: 1px;
}

.jrm-search-row {
	position: relative;
}

.jrm-search-results {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	box-shadow: var(--jrm-shadow);
	max-height: 220px;
	overflow-y: auto;
}

.jrm-search-results li {
	padding: 8px 10px;
	cursor: pointer;
	font-size: 14px;
	border-radius: var(--jrm-radius);
}

.jrm-search-results li:hover,
.jrm-search-results li.is-active {
	background: var(--jrm-paper-dark);
}

.jrm-hint {
	font-size: 12.5px;
	color: #5c5848;
	margin: 4px 0;
}

.jrm-mode-buttons,
.jrm-marker-palette,
.jrm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jrm-mode-btn.is-active {
	background: var(--jrm-forest);
	border-color: var(--jrm-forest);
	color: #fff;
}

.jrm-marker-btn {
	font-weight: 500;
}

.jrm-marker-btn.is-active {
	background: var(--jrm-trail);
	border-color: var(--jrm-trail);
	color: #fff;
}

.jrm-stats {
	display: flex;
	gap: 18px;
	background: var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	padding: 12px 14px;
}

.jrm-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jrm-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--jrm-forest);
	font-weight: 700;
}

.jrm-stat-value {
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--jrm-ink);
}

.jrm-elevation-canvas {
	width: 100%;
	height: 120px;
	background: #fff;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
}

.jrm-routes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jrm-routes-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	font-size: 13px;
}

.jrm-routes-list .jrm-route-meta {
	color: #6b6656;
	font-size: 12px;
}

.jrm-routes-list .jrm-route-actions {
	display: flex;
	gap: 6px;
}

.jrm-routes-list button {
	background: transparent;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
}

/* Marker icons (divIcon) */
.jrm-div-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	width: 28px;
	height: 28px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	border: 2px solid #fff;
}

.jrm-div-icon span {
	transform: rotate(45deg);
}

.jrm-div-icon.jrm-icon-parking { background: #2f6690; }
.jrm-div-icon.jrm-icon-eau { background: #2f8fce; }
.jrm-div-icon.jrm-icon-vue { background: #22423a; }
.jrm-div-icon.jrm-icon-refuge { background: #b5651d; }
.jrm-div-icon.jrm-icon-attention { background: #9a3324; }
.jrm-div-icon.jrm-icon-waypoint { background: #d98a3d; }

/* Points d'itinéraire : départ / arrivée bien distincts des étapes intermédiaires */
.jrm-div-icon.jrm-icon-start {
	background: #2f7d32;
	width: 30px;
	height: 30px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

.jrm-div-icon.jrm-icon-end {
	background: #1c1c1c;
	width: 30px;
	height: 30px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

.jrm-toast {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jrm-forest-dark);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--jrm-radius);
	font-size: 13px;
	z-index: 1200;
	box-shadow: var(--jrm-shadow);
	max-width: 90%;
	text-align: center;
}

.jrm-toast.jrm-toast-error {
	background: var(--jrm-alert);
}

/* Leaflet popup tweaks to match theme */
.jrm-wrapper .leaflet-popup-content-wrapper {
	border-radius: var(--jrm-radius);
	font-family: inherit;
}

.jrm-popup-title {
	font-weight: 700;
	color: var(--jrm-forest-dark);
	margin-bottom: 4px;
}

.jrm-popup-remove {
	margin-top: 6px;
	background: var(--jrm-alert);
	color: #fff;
	border: none;
	border-radius: var(--jrm-radius);
	padding: 4px 8px;
	font-size: 12px;
	cursor: pointer;
}

.jrm-popup-link {
	display: inline-block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jrm-trail);
}

.jrm-popup-link:hover {
	color: var(--jrm-trail-light);
}

/* Responsive */
@media (max-width: 640px) {
	.jrm-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.jrm-stats {
		flex-wrap: wrap;
		gap: 10px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jrm-btn,
	.jrm-toggle-planner .jrm-icon {
		transition: none;
	}
}

/* ---------- Widget [jura_rando_trace] (visualiseur de trace GPX autonome) ---------- */

.jrm-trace-wrapper {
	padding: 0;
}

.jrm-trace-map {
	width: 100%;
	background: #dfe7e4;
}

.jrm-trace-chart-wrap {
	position: relative;
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid var(--jrm-paper-dark);
}

.jrm-trace-chart {
	width: 100%;
	height: 100%;
	display: block;
}

.jrm-trace-status {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.jrm-trace-link {
	margin: 0;
	padding: 12px;
	background: var(--jrm-paper);
	border-top: 1px solid var(--jrm-paper-dark);
	text-align: center;
}

.jrm-trace-toggle-row {
	padding: 10px 12px;
	background: var(--jrm-paper);
	border-top: 1px solid var(--jrm-paper-dark);
}

.jrm-trace-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.jrm-trace-toggle .jrm-icon {
	font-weight: 700;
	transition: transform 0.15s ease;
}

.jrm-trace-toggle.is-active .jrm-icon {
	transform: rotate(45deg);
}

.jrm-trace-toggle.is-active {
	background: var(--jrm-forest);
	border-color: var(--jrm-forest);
	color: #fff;
}

.jrm-trace-details {
	padding: 0 12px 12px;
	background: var(--jrm-paper);
	border-top: 1px solid var(--jrm-paper-dark);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jrm-trace-stats {
	margin-top: 12px;
	flex-wrap: wrap;
}

/* Bouton "Retour à la fiche" dans la barre d'outils, visible seulement quand
   on arrive depuis un widget [jura_rando_trace] (paramètre ?jrm_back=). */
.jrm-back-to-sheet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

/* ---------- Page "Mes itinéraires sauvegardés" ([jura_rando_mes_itineraires]) ---------- */

.jrm-routes-page {
	padding: 20px;
}

.jrm-routes-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.jrm-routes-page-header h2 {
	margin: 0;
	color: var(--jrm-forest-dark);
	font-size: 20px;
}

.jrm-routes-notice {
	background: var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	padding: 8px 12px;
	display: inline-block;
}

.jrm-routes-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--jrm-paper-dark);
	border-radius: var(--jrm-radius);
	overflow: hidden;
}

.jrm-routes-table th,
.jrm-routes-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--jrm-paper-dark);
	font-size: 14px;
	vertical-align: middle;
}

.jrm-routes-table thead th {
	background: var(--jrm-paper-dark);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--jrm-forest);
}

.jrm-routes-table tbody tr:last-child td {
	border-bottom: none;
}

.jrm-routes-table-title {
	font-weight: 700;
	color: var(--jrm-ink);
}

.jrm-routes-table-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.jrm-inline-form {
	display: inline-block;
	margin: 0;
}

.jrm-btn-danger {
	background: #fff;
	border-color: var(--jrm-alert);
	color: var(--jrm-alert);
}

.jrm-btn-danger:hover {
	background: var(--jrm-alert);
	color: #fff;
}

@media (max-width: 640px) {
	.jrm-routes-table,
	.jrm-routes-table thead,
	.jrm-routes-table tbody,
	.jrm-routes-table th,
	.jrm-routes-table td,
	.jrm-routes-table tr {
		display: block;
	}

	.jrm-routes-table thead {
		display: none;
	}

	.jrm-routes-table tr {
		border: 1px solid var(--jrm-paper-dark);
		border-radius: var(--jrm-radius);
		margin-bottom: 10px;
		padding: 6px 0;
	}

	.jrm-routes-table td {
		border-bottom: none;
		padding: 4px 12px;
	}

	.jrm-routes-table td:before {
		content: attr(data-label);
		display: block;
		font-size: 10px;
		text-transform: uppercase;
		color: var(--jrm-forest);
		font-weight: 700;
	}
}