/* Petit complément CSS à la charte Zeina (classes Tailwind déjà compilées) —
   uniquement ce que le thème ne fournit pas déjà : carte Leaflet, modal, et
   suggestions d'adresse (mêmes recettes déjà validées dans l'extension
   covoiturage : #covoit-map, .covoit-geosuggest, .covoit-highlight-card). */

.page-body .panel .inputbox[type="text"] {
	display: block;
	width: 100%;
}

/* Badge "Bêta" du footer — recette identique à .covoit-beta-sm (covoiturage). */
.cm-beta-sm {
	display: inline-block;
	flex-shrink: 0;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: #f0ad4e;
	color: #fff;
	border-radius: 3px;
	padding: 2px 6px;
	line-height: 1;
}

.cm-delete-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	color: #b91c1c;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.cm-delete-link:hover {
	text-decoration: underline;
}

/* .btn-primary de Zeina n'a pas de style :disabled visible par défaut (reste
   bleu plein) — on grise explicitement le bouton "Enregistrer" tant qu'aucune
   position n'a été choisie dans la popin. */
#cm-save-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Onglets "Top des pays / départements / villes" */
.cm-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 12px;
}

.dark .cm-tabs {
	border-color: rgb(2 6 23 / 0.4);
}

.cm-tab-btn {
	background: none;
	border: none;
	padding: 8px 12px;
	font-size: 0.875rem;
	font-weight: 500;
	color: inherit;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.cm-tab-btn.is-active {
	color: rgb(var(--color-primary));
	border-bottom-color: rgb(var(--color-primary));
}

/* En dark, --color-primary-dark vaut le même bleu qu'en light sur cette
   install (peu de contraste sur fond sombre, cf. retour utilisateur) — on
   bascule sur --color-text-dark (l'or de la charte ESTAC) à la place, plus
   visible et cohérent avec les autres accents dorés du thème (badge Bêta...). */
.dark .cm-tab-btn.is-active {
	color: rgb(var(--color-text-dark));
	border-bottom-color: rgb(var(--color-text-dark));
}

.cm-tab-panel[hidden] {
	display: none;
}

.dark .cm-delete-link {
	color: #fca5a5;
}

#cm-map,
#cm-picker-map {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	/* Les panneaux/contrôles internes de Leaflet montent jusqu'à z-index:1000,
	   ce qui dépasserait sinon la navbar sticky de Zeina (z-index:9) au
	   scroll. Isoler la carte confine tout l'empilement interne de Leaflet
	   dans cette boîte. */
	isolation: isolate;
}

.dark #cm-map,
.dark #cm-picker-map {
	border-color: rgb(2 6 23 / 0.4);
}

.cm-popup-members {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 180px;
	overflow-y: auto;
}

.cm-popup-members li + li {
	margin-top: 8px;
}

.cm-popup-member {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.cm-popup-avatar {
	/* Sans ça, flexbox réduit AUSSI l'avatar (flex-shrink:1 par défaut) dès
	   que le popup manque de place pour le reste de la ligne — c'était la
	   cause réelle de l'avatar "pas carré" : il rétrécissait en largeur sans
	   que sa hauteur suive. */
	flex-shrink: 0;
}

.cm-popup-avatar img {
	/* Neutralise la taille native de l'avatar (attributs width/height posés
	   par phpbb_get_avatar()) pour une vignette compacte cohérente dans la
	   popin, quelle que soit la taille configurée par le membre. max-width
	   doit aussi être neutralisé : la feuille leaflet.css impose déjà
	   `.leaflet-popup-content img{max-width:100%}`, qui l'emporte sur
	   `width` (max-width borne toujours la largeur utilisée, quel que soit
	   !important sur width) et écrasait l'avatar dès que le popup était
	   étroit — 2e cause du même bug, cumulée avec le flex-shrink ci-dessus. */
	width: 32px !important;
	height: 32px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.cm-popup-info {
	min-width: 0;
}

.cm-popup-username {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cm-popup-link {
	font-size: 0.8125rem;
	text-decoration: none;
	white-space: nowrap;
	color: rgb(var(--color-primary));
}

.cm-popup-link:hover {
	text-decoration: underline;
}

.dark .cm-popup-link {
	color: rgb(var(--color-primary-dark));
}

.cm-flag {
	display: inline-block;
	margin-right: 4px;
}

/* Bandeau "réservé aux membres" (invité) — même recette que
   .covoit-highlight-card : deux opacités distinctes en light/dark, le bleu
   ESTAC étant sinon presque invisible sur le fond sombre des .card. */
.cm-highlight-card {
	background-color: rgba(var(--color-primary), 0.08);
}

.dark .cm-highlight-card {
	background-color: rgba(var(--color-primary-dark), 0.35);
}

/* Suggestions d'adresse (Nominatim) sous le champ de recherche du modal */
.cm-geosuggest {
	position: relative;
}

.cm-geosuggest-list {
	position: absolute;
	z-index: 2100;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	max-height: 220px;
	overflow-y: auto;
}

.cm-geosuggest-item {
	padding: 6px 10px;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.cm-geosuggest-item.is-active,
.cm-geosuggest-item:hover {
	background: #f3f4f6;
}

.dark .cm-geosuggest-list {
	background: #0f172a;
	border-color: rgb(2 6 23 / 0.4);
}

.dark .cm-geosuggest-item.is-active,
.dark .cm-geosuggest-item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.cm-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.875rem;
	cursor: pointer;
}

.cm-checkbox-label input {
	margin-top: 3px;
	flex-shrink: 0;
}

/* Modal "Me localiser" */
.cm-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.cm-modal[hidden] {
	display: none;
}

.cm-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.cm-modal-panel {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

.cm-modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	padding: 0 4px;
}