/* ==========================================================================
   Environnements : sélecteur du menu, pages environments / environment-edit,
   membres, zone dangereuse, composant de visibilité.
   ========================================================================== */

/* ---------- Sélecteur d'environnement (menu latéral) ---------- */
nav#menu .env-selector {
	position: relative;
	padding: 0 1rem 0.5rem 1rem;
	z-index: 20;
}

/* Bouton compact : une seule ligne (pastille, nom, rôle, chevron) */
nav#menu .env-selector-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: none;
	border-radius: 0.5rem;
	background-color: var(--ColorMenuNavbar);
	color: var(--ColorTextNavbar);
	cursor: pointer;
	text-align: left;
	font-size: var(--FontSize);
	transition: var(--Transition);
}

nav#menu .env-selector-btn:hover,
nav#menu .env-selector.open .env-selector-btn {
	background-color: var(--ColorMenuHoverNavbar);
}

nav#menu .env-selector-btn > i {
	margin-left: auto;
	font-size: 0.7rem;
	opacity: 0.8;
	transition: var(--Transition);
}

nav#menu .env-selector.open .env-selector-btn > i {
	transform: rotate(180deg);
}

.env-color-dot {
	flex: 0 0 auto;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	display: inline-block;
}

/* Bloc texte : nom + rôle sur une ligne, tronqués par des points de suspension (pas de flex imbriqué) */
nav#menu .env-selector-infos {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.3;
}

nav#menu .env-selector-infos .env-name {
	display: inline;
	font-family: var(--FontTitle);
	font-size: var(--FontSize);
}

nav#menu .env-selector-infos .env-role {
	display: inline;
	margin-left: 0.4rem;
	font-size: var(--FontSize-s);
	opacity: 0.65;
}

/* Liste en surcouche : positionnée par-dessus le menu, sans décaler le contenu */
nav#menu .env-selector-list {
	display: none;
	position: absolute;
	top: calc(100% - 0.25rem);
	left: 1rem;
	right: 1rem;
	z-index: 30;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	background-color: var(--ColorMenuNavbar);
	border: solid 1px var(--ColorMenuHoverNavbar);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	max-height: 16rem;
	overflow: auto;
}

nav#menu .env-selector.open .env-selector-list {
	display: flex;
}

nav#menu .env-selector-list form {
	margin: 0;
	width: 100%;
}

nav#menu .env-selector-list .env-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	border: none;
	border-radius: 0.375rem;
	background-color: transparent;
	color: var(--ColorTextNavbar);
	cursor: pointer;
	text-align: left;
	font-size: var(--FontSize);
	text-decoration: none;
	transition: var(--Transition);
}

nav#menu .env-selector-list .env-item:hover {
	background-color: var(--ColorMenuHoverNavbar);
}

nav#menu .env-selector-list .env-item.active {
	background-color: var(--ColorMessageNavbar);
	font-family: var(--FontTitle);
}

nav#menu .env-selector-list .env-item .env-name {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav#menu .env-selector-list .env-item .env-role {
	flex: 0 0 auto;
	opacity: 0.7;
	white-space: nowrap;
	font-size: var(--FontSize-s);
}

nav#menu .env-selector-list .env-manage {
	border-top: solid 1px var(--ColorMenuHoverNavbar);
	margin-top: 0.25rem;
	padding-top: 0.625rem;
	justify-content: center;
	opacity: 0.85;
}

/* ---------- Badges / tableaux ---------- */
.badges.env-personal {
	background-color: var(--ColorPurple10);
	color: var(--ColorPurple);
}

.env-name-cell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.env-name-cell .env-color-dot {
	width: 1rem;
	height: 1rem;
	box-shadow: var(--Shadow);
}

.env-name-cell .column {
	align-items: flex-start;
	gap: 0.25rem;
}

.env-name-cell .env-description {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
	max-width: 20rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.env-title-dot {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: middle;
	box-shadow: var(--Shadow);
}

.env-member-cell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.env-member-cell img {
	width: 2.5rem !important;
	height: 2.5rem !important;
	border-radius: 0.5rem !important;
}

.env-member-cell .column {
	align-items: flex-start;
	gap: 0.125rem;
}

.env-member-cell .env-email {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
}

/* Sélecteur de rôle dans le tableau des membres */
.env-role-form {
	margin: 0;
	display: inline-flex;
}

select.env-role-select {
	padding: 0.375rem 2rem 0.375rem 0.75rem;
	border: none;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorContainer);
	color: var(--ColorText);
	font-family: var(--FontPrincipale);
	font-size: var(--FontSize-s);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

select.env-role-select:focus {
	outline: solid 2px var(--ColorBlue10);
}

.env-role-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
}

.env-role-legend span strong {
	color: var(--ColorText);
}

/* ---------- Zone dangereuse ---------- */
.block.env-danger-zone {
	border: solid 1px var(--ColorRed10);
	box-shadow: inset 0 0 0 1px var(--ColorRed10);
}

.block.env-danger-zone .header h2 {
	color: var(--ColorRed);
}

.env-danger-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0;
}

.env-danger-row + .env-danger-row {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: solid 1px var(--ColorRowHover);
}

.env-danger-row .column {
	align-items: flex-start;
	gap: 0.25rem;
	flex: 1;
	/* Sans min-width, le libellé impose sa largeur minimale et écrase la ligne (cf. .option-row > .column) */
	min-width: 0;
}

.env-danger-row p {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
}

.env-danger-row .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Mobile : le bouton (non compressible, « Réinitialiser les statistiques » fait 262px) passe sous le libellé.
   Même seuil et même traitement que .option-row dans main.css. */
@media screen and (max-width: 800px) {
	.env-danger-row {
		flex-wrap: wrap;
	}

	.env-danger-row > .btn,
	.env-danger-row > form,
	.env-danger-row > .row {
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------- Onglet « Accès » */
.env-access-menu {
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

.env-access-menu .badges {
	flex: 0 0 auto;
}

.env-access-menu .env-access-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.env-access-menu .env-access-actions form {
	margin: 0;
}

p.env-access-help {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
	margin: 0 0 1rem 0;
}

/* Colonne d'actions du tableau alignée à droite */
.env-access-table th:last-child,
.env-access-table td:last-child {
	text-align: right;
}

.env-access-table td:last-child .row {
	justify-content: flex-end;
}

.env-access-help {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
}

.env-inline-form {
	margin: 0;
	display: inline-flex;
}

/* Popup d ajout : liste des membres disponibles */
.env-access-search {
	width: 100%;
	margin-bottom: 0.75rem;
}

.env-access-candidates {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 22rem;
	overflow-y: auto;
	margin-bottom: 1rem;
}

.env-access-candidates .env-member-check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorContainer);
	cursor: pointer;
}

.env-access-candidates .env-member-check:hover {
	background-color: var(--ColorRowHover);
}

.env-access-candidates .env-member-check[hidden] {
	display: none;
}

.env-access-candidates .env-member-check img {
	width: 2rem;
	height: 2rem;
	border-radius: 0.375rem;
}

.env-access-candidates .env-member-check .column {
	align-items: flex-start;
	gap: 0.125rem;
	flex: 1;
	min-width: 0;
}

.env-access-candidates .env-member-check .env-email {
	color: var(--ColorTextAlt);
	font-size: var(--FontSize-s);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.env-access-candidates .env-member-check input[type="checkbox"] {
	flex: 0 0 auto;
}
/* Popups « Déplacer », « Ajouter des utilisateurs », « Importer un composant » : tableau de sélection */
.move-env-table {
	margin: 0;
}

.move-env-table .container-table table tbody tr.move-env-row {
	cursor: pointer;
}

.move-env-table .container-table table tbody tr.move-env-row.active td {
	background-color: var(--ColorBlue10);
}

.access-add-table .container-table table tbody tr.move-env-row[hidden] {
	display: none;
}

.move-env-table .container-table table tbody tr.move-env-row.disabled {
	cursor: default;
	opacity: 0.55;
}