/* Petit complément CSS à la charte Zeina (classes Tailwind déjà compilées :
   btn-primary, card, inputbox, etc.) — uniquement ce que le thème ne fournit
   pas déjà : badge Bêta, pastilles de statut, et la carte Leaflet. */

/* Zeina force les <input type="text">/<select> en largeur automatique dès
   qu'ils sont dans un .panel (compat thème avec l'extension "Pages", pensée
   pour des formulaires en ligne) — .page-body .panel input[type="text"] a
   une spécificité plus forte que .inputbox seul et gagne sinon, rendant nos
   champs texte (ex. "Lieu de départ") minuscules malgré .inputbox. On
   restaure ici la pleine largeur uniquement pour nos propres champs. */
.page-body .panel .inputbox[type="text"] {
	display: block;
	width: 100%;
}

.covoit-beta {
	display: inline-block;
	font-size: 0.6em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: #f0ad4e;
	color: #fff;
	border-radius: 3px;
	padding: 2px 6px;
	vertical-align: middle;
	margin-left: 6px;
}

.covoit-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;
}

.covoit-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.covoit-pill-pending {
	background: #fef9c3;
	color: #854d0e;
}

.covoit-pill-accepted {
	background: #dcfce7;
	color: #166534;
}

.covoit-pill-rejected {
	background: #fef2f2;
	color: #b91c1c;
}

.covoit-pill-cancelled {
	background: #f3f4f6;
	color: #4b5563;
}

.dark .covoit-pill-pending {
	background: rgba(250, 204, 21, 0.12);
	color: #fde047;
}

.dark .covoit-pill-accepted {
	background: rgba(34, 197, 94, 0.12);
	color: #86efac;
}

.dark .covoit-pill-rejected {
	background: rgba(239, 68, 68, 0.12);
	color: #fca5a5;
}

.dark .covoit-pill-cancelled {
	background: rgba(255, 255, 255, 0.06);
	color: #94a3b8;
}

#covoit-map {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	margin-top: 8px;
	/* Leaflet's internal panes/controls use z-index up to 1000, which
	   otherwise out-ranks Zeina's sticky navbar (z-index: 9) and bleeds
	   over it on scroll. Isolating the map contains all of Leaflet's
	   internal stacking inside this box. */
	isolation: isolate;
}

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

.covoit-arrival-marker {
	filter: hue-rotate(140deg);
}

#covoit-stop-list {
	list-style: none;
	margin: 8px 0;
	padding: 0;
}

#covoit-stop-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

#covoit-stop-list li .covoit-stop-label {
	flex: 1 1 12rem;
	min-width: 0;
}

#covoit-stop-list li .covoit-stop-time {
	flex: 0 1 12rem;
}

/* Suggestions d'adresse (Nominatim) sous les champs "lieu" */
.covoit-geosuggest {
	position: relative;
}

.covoit-geosuggest-list {
	position: absolute;
	z-index: 20;
	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;
}

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

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

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

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

/* Encart d'avertissement (ex. trajet aller-seul/retour-seul) — mêmes tons
   ambre que .covoit-pill-pending, en dehors des classes Tailwind yellow/
   amber qui ne sont pas compilées dans la feuille Zeina de ce forum. */
.covoit-warning-box {
	background: #fef9c3;
	border: 1px solid #fde68a;
	color: #854d0e;
}

.dark .covoit-warning-box {
	background: rgba(250, 204, 21, 0.12);
	border-color: rgba(250, 204, 21, 0.3);
	color: #fde047;
}

/* Bandeau "réservé aux membres" (invité) : léger fond teinté pour le
   distinguer des autres .card, ajusté séparément par thème — un fond basé
   sur --color-primary à une opacité qui reste visible en light comme en
   dark demande deux valeurs différentes ici, car ce bleu est aussi proche
   de la couleur de fond des .card en dark (peu de contraste à faible
   opacité). */
.covoit-highlight-card {
	background-color: rgba(var(--color-primary), 0.08);
}

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

.covoit-avatar {
	width: 44px;
	height: 44px;
	border-radius: 0.5rem;
	overflow: hidden;
	flex-shrink: 0;
}

.covoit-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}