/*
	Habillage de l'administration, par-dessus Bootstrap.

	Une grille a deux colonnes plutot qu'un conteneur centre : un back-office se
	consulte sur un ecran large, et les tableaux ont besoin de toute la largeur.
*/

.admin-shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: 100vh;
}

.admin-sidebar {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.admin-main {
	min-width: 0; /* sans quoi un tableau large deborde la grille */
}

.admin-topbar {
	position: sticky;
	top: 0;
	z-index: 3;
	height: 3.25rem;
}

.admin-icone {
	display: inline-block;
	width: 1.25rem;
	text-align: center;
	opacity: .75;
}

/* Sous 992 px la barre laterale devient un panneau lateral Bootstrap. */
@media (max-width: 991.98px) {
	.admin-shell { grid-template-columns: 1fr; }
	.admin-sidebar { display: none; }
}

.admin-vignette {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: .375rem;
}

/* Zone de depot de fichiers. */
.admin-depot {
	border: 2px dashed var(--bs-border-color);
	border-radius: .5rem;
	transition: border-color .15s ease, background-color .15s ease;
}

.admin-depot:hover {
	border-color: var(--bs-secondary-border-subtle);
}

.admin-depot.est-survole {
	border-color: var(--bs-primary);
	background-color: var(--bs-tertiary-bg);
}

/* Le survol de depot traverse les enfants et declencherait un dragleave a
   chaque passage d'un element a l'autre : on les rend transparents au pointeur
   pendant le glisser. */
.admin-depot.est-survole * {
	pointer-events: none;
}

/* Le bouton de secours n'a d'utilite que sans JavaScript, ou si le depot
   echoue. On le laisse, discret. */
.admin-depot + [data-depot-secours] {
	opacity: .85;
}

/* --- Classement des rubriques ------------------------------------------- */

/* Poignee et fleches sont revelees par la classe que pose le script : sans
   JavaScript, seul le champ numerique repond, et il ne faut pas afficher des
   commandes inertes. */
.admin-poignee,
.admin-rangeable .admin-fleches {
	display: none;
}

.admin-rangeable.est-rangeable .admin-fleches {
	display: inline-flex;
}

/* Le glissement n'apparait qu'a partir de « md » : sur un telephone il se
   disputerait avec le defilement de la page. */
@media (min-width: 768px) {
	.admin-rangeable.est-rangeable .admin-poignee {
		display: inline-flex;
		align-items: center;
		cursor: grab;
		color: var(--bs-secondary-color);
		font-size: 1.1rem;
		line-height: 1;
		user-select: none;
	}
}

.admin-rangeable .admin-ordre {
	width: 4.5rem;
	flex: 0 0 auto;
}

/* Ligne en cours de deplacement : on la garde visible mais en retrait, pour
   qu'on suive ou elle va. */
.admin-rangeable [data-rangeable-element].est-saisie {
	opacity: .45;
}

.admin-rangeable [data-rangeable-element].est-cible {
	box-shadow: inset 0 2px 0 0 var(--bs-primary);
}