/*
 * La v3 de la maquette Élevage : ce que le tour ajoute aux composants du design system. Tout le reste vient de
 * `util-deck`, `util-days`, `util-sheet`, `util-keypad`, `util-omnibox-keypad` et `util-basket-bar`.
 */

/* `util-deck-row` et `util-card` posent un `display` qui l'emporte sur celui que le navigateur donne à
   `[hidden]` : une ligne de cause ou un champ masqué resterait affiché sans cette règle, comme
   `.util-counter[hidden]` le fait déjà dans component.css. */
.breeding-tour [hidden],
[data-onboarding-page] [hidden] {
	display: none;
}

/* Un nombre du tour, son unité et la place du `+1`. La place est gardée sur les lignes qui n'en ont pas et
   les unités ont une largeur commune : les champs d'une carte tombent en colonne (ui.md n° 4). */
.breeding-tour-value {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--space-xs);
}

.breeding-tour-value > .btn,
.breeding-tour-slot {
	flex: 0 0 var(--touch-target);
	padding-inline: 0;
}

/* `div.input-group` pose `width: 100%`, d'où le même poids de sélecteur ici et dans les règles suivantes. */
div.breeding-tour-input {
	flex: 0 0 auto;
	width: auto;
}

div.breeding-tour-input > .form-control {
	flex: 0 0 5.5rem;
	width: 5.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

div.breeding-tour-input > .input-group-addon {
	flex: 0 0 4.75rem;
}

.breeding-tour-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* La cause d'une perte, le lot d'une perte partagée et la suite des restés d'un abattage prennent toute la largeur
   de la carte sous leur nom : leurs choix n'entrent pas à côté (glaçon tour 6 pour le lot, tour 7 pour les restés). */
.breeding-tour :is([data-tour-cause], [data-tour-split-for], [data-tour-stayed]) {
	flex-wrap: wrap;
}

.breeding-tour :is([data-tour-cause], [data-tour-split-for], [data-tour-stayed]) > :is(.field-radio-group, input) {
	flex: 1 1 100%;
}

/* La feuille reprend le tiroir des récoltes (`#planning-harvest-sheet`, planning.css) : son affichage, son
   pavé et l'écart entre eux. La planche propose d'en faire `util-sheet-display` et `util-sheet-keypad`. */
#breeding-tour-sheet .util-sheet-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.breeding-tour-sheet-display {
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.breeding-tour-sheet-unit {
	font-size: 1.5rem;
	font-weight: normal;
}

/* Le composant ne fixe aucune hauteur au pavé, c'est à celui qui le pose de le faire. */
#breeding-tour-sheet .breeding-tour-sheet-keypad {
	width: 16rem;
	margin-inline: auto;
}

#breeding-tour-sheet .util-keypad {
	height: calc(4 * var(--touch-target) + 5 * var(--space-xs));
	grid-template-rows: repeat(4, var(--touch-target));
	gap: var(--space-xs);
	padding: var(--space-xs);
	border-radius: var(--radius);
	background-color: var(--secondary);
}

#breeding-tour-sheet .util-keypad-key {
	font-size: 1.75rem;
	cursor: pointer;
}

#breeding-tour-sheet .breeding-tour-sheet-cause .field-radio-group {
	margin: 0;
}

.breeding-tour .util-sheet-foot > .btn {
	flex: 1;
}

/* Une ligne cochée passe en gras dans form.css ; dans la liste des parcelles, seul le nom l'est. */
form[data-range-move] .field-radio-group-item:has( > input[type="radio"]:checked:not(:disabled)) {
	font-weight: normal;
}

@media (max-width: 575px) {

	/* Au doigt, un geste prévu passe sous son texte, et ses boutons gardent leur taille de pouce. */
	.breeding-tour [data-tour-planned] {
		flex-wrap: wrap;
	}

	.breeding-tour [data-tour-planned] > .util-deck-row-name {
		flex: 1 1 100%;
	}

}

/* La navigation du bas du gabarit est fixe et `util-basket-bar` se colle à 0 : sans ce décalage, le seul
   bouton de l'écran passe dessous. Le décalage revient au socle, dans le gabarit structure (recul.md). */
@media (max-width: 767px), (max-height: 599px) {

	body[data-template~="structure-rail"] .breeding-tour-bar {
		bottom: var(--nav-structure);
	}

}

/* V7 de `hierarchise.md` : la barre des phases d'un lot, sous 576 px, n'est qu'un repère entre la tête et le
   contenu. `util-steps` n'a pas de forme compacte : les bornes sortent, les ronds et les intitulés rapetissent,
   et l'intitulé quitte les capitales de Roboto Mono, plus lourdes que le titre de section qui suit. */
@media (max-width: 575px) {
	#breeding-steps {
		margin: var(--space-sm) 0;
	}
	#breeding-steps .util-steps-who {
		display: none;
	}
	#breeding-steps .util-steps-label {
		margin-bottom: var(--space-xs);
		font-family: inherit;
		font-size: .75rem;
		text-transform: none;
	}
	#breeding-steps .util-steps-circle {
		width: 2.25rem;
		height: 2.25rem;
		font-size: .7rem;
	}
	#breeding-steps .util-steps-step:not(:first-child)::before {
		bottom: calc(1.125rem - 1px);
	}
}

/* V5 de `hierarchise.md` : le jour sans tour prend la teinte « à faire » de `util-day-worked`, posée sur le jour
   lui-même puisque la bande n'a plus de colonnes. `--day-worked` est défini par `.util-day`. */
.util-calendar.breeding-tour-missed:not(.util-calendar-selected) {
	--accent: var(--todo);
	--calendar-background: var(--day-worked);
}

/* Glaçon tour 12 : la parcelle d'un poulailler porte le nom du panneau « Créer un poulailler », qui suit son type.
   Une cabane mobile part d'une parcelle ; un bâtiment fixe ouvre sur son parcours. */
.onboarding-row .onboarding-range-mobile {
	display: none;
}

.onboarding-row:has([name^="mobile["][value="1"]:checked) .onboarding-range-mobile {
	display: inline;
}

.onboarding-row:has([name^="mobile["][value="1"]:checked) .onboarding-range-fixed {
	display: none;
}

/* Glaçon tour 13 : « Rattraper un oubli ». Le champ, en largeur fixe, est un bloc : `text-end` ne le pousse pas,
   et sur ordinateur, où la colonne est plus large que lui, il restait à gauche de son titre aligné à droite. */
.breeding-week td.text-end > input.form-control {
	margin-left: auto;
}

/* Glaçon tour 13 : un bâtiment fixe n'a pas d'aide sous sa parcelle, la bordure de l'aide part avec elle. */
.onboarding-row:not(:has([name^="mobile["][value="1"]:checked)) .form-info:has(> .onboarding-range-mobile:only-child) {
	display: none;
}

/* Glaçon tour 13 : l'aperçu reste en vue pendant que la saisie défile. Le panneau rogne par `clip` et non par
   `hidden`, qui en ferait un conteneur de défilement et laisserait l'aperçu collé à un panneau qui ne défile pas. */
@media (min-width: 992px) {

	.onboarding-panel:has(.onboarding-preview-follow) {
		overflow: clip;
	}

	.onboarding-preview-follow {
		position: sticky;
		top: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.875rem;
	}

}

/* Glaçon tour 13 : sous 576 px, le design system pose Retour en pleine largeur sous le geste principal. Sa bordure
   tombe, pour que les deux boutons empilés ne pèsent pas autant l'un que l'autre. */
@media (max-width: 575px) {

	.onboarding-footer-side .btn-outline-primary:not(:hover) {
		border-color: transparent;
	}

}

/* Glaçon tour 13 : un toast du tour se pose au-dessus de la barre « Enregistrer le tour », collée en bas d'écran,
   au lieu de couvrir son bouton. La barre fait 44 px sur une ligne. */
body:has(.breeding-tour-bar) > .util-toast-stack {
	bottom: calc(44px + 1rem);
}

@media (max-width: 575px) {

	body[data-template~="structure-rail"]:has(.breeding-tour-bar) > .util-toast-stack {
		bottom: calc(var(--nav-structure) + 44px + 0.75rem);
	}

}

/* La barre de version de l'export Cocotte (hors produit), en tête de chaque écran. */
.breeding-mock-version {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--background);
	font-size: 0.9rem;
}

/* Sous 400 px, le produit fige l'aside de la tête (`flex: 0 0 auto`) : trois boutons, comme sur Lots en cours, le
   portent au-delà de la page d'un pixel. Borné à la largeur de la tête, l'aside renvoie son dernier bouton à la ligne. */
.util-page-header > .util-page-header-aside {
	max-width: 100%;
}