/* Sous 576 px, une carte de parcelle par ligne. `.plan-schema-plot` est en `flex: 0 1 auto` (plan.css) :
   chaque carte prend la largeur de son texte, et la colonne serait déchiquetée. */
@media (max-width: 575px) {
	#breeding-range-plan .plan-schema-plot {
		flex: 1 1 100%;
	}
}

/* `util-steps` sert ici à naviguer entre les quatre pages d'un lot : `active` met déjà le libellé en gras,
   le trait dessous dit que c'est la page affichée et non l'étape où en est le lot. */
#breeding-steps .util-steps-step[data-current] .util-steps-label {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* À lancer : la table d'occupation des poulaillers, puis la frise muette dessous. */
#breeding-occupation {
	grid-template-columns: minmax(6rem, .8fr) minmax(10rem, 2fr) minmax(7rem, 1fr) minmax(10rem, 2fr) minmax(9rem, 1.2fr);
	margin-bottom: 1rem;
}

#breeding-frise .util-rail-track {
	height: 1.5rem;
}

/* Sous 768 px, une ligne de poulailler passe sur deux rangs : le poulailler et sa date de liberté, puis le
   lot en cours, le vide et le lot suivant, chacun sous son intitulé, les en-têtes de colonne étant masqués. */
@media (max-width: 767px) {
	#breeding-occupation {
		grid-template-columns: 1fr auto;
	}
	#breeding-occupation .util-table-head {
		display: none;
	}
	#breeding-occupation .util-table-row > :nth-child(5) {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}
	#breeding-occupation .util-table-row > :nth-child(2),
	#breeding-occupation .util-table-row > :nth-child(3),
	#breeding-occupation .util-table-row > :nth-child(4) {
		grid-column: 1 / -1;
		padding-top: 0;
		padding-left: 1rem;
	}
	#breeding-occupation .util-table-row > :nth-child(3):not(:empty)::before {
		content: "Vide sanitaire ";
	}
	#breeding-occupation .util-table-row > :nth-child(4):not(:empty)::before {
		content: "Puis ";
	}
	#breeding-occupation .util-table-row > :nth-child(5)::before {
		content: "Libre dès le ";
		color: var(--muted);
	}
	#breeding-occupation .util-table-row > :empty {
		display: none;
	}
}

.libre-order-name,
.libre-lot-name {
	font-weight: bold;
}

.libre-order-date {
	white-space: nowrap;
}

.libre-order-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: .5rem;
	row-gap: .25rem;
}

/* Dans une table, la cellule se partage avec les autres colonnes : sans ce verrou, la date passe sous le bouton
   dès que le tableau se tasse. À 360, la table n'a plus que deux colonnes et la date peut descendre. */
@media (min-width: 576px) {
	td > .libre-order-action {
		flex-wrap: nowrap;
	}
}

.libre-order {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1rem;
	padding: .5rem 0;
}

.libre-order + .libre-order {
	border-top: 1px solid var(--border);
}


/* Lots en cours, sous 576 px : une chose à faire par ligne, le texte à gauche, le geste à droite sans jamais passer
   dessous. `min-width: 0` laisse le texte se replier au lieu de pousser le bouton hors de la carte. */
.libre-todo-compact .libre-order {
	flex-wrap: nowrap;
}
.libre-todo-compact .libre-order-text {
	flex: 1 1 auto;
	min-width: 0;
}
.libre-todo-compact .libre-order-action {
	flex: 0 0 auto;
}