/*
 * 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);
}

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

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

.breeding-week td.text-end > input.form-control {
	margin-left: auto;
}

.onboarding-row:not(:has([name^="mobile["][value="1"]:checked)) .form-info:has(> .onboarding-range-mobile:only-child) {
	display: none;
}

@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;
	}

}

@media (max-width: 575px) {

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

}

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%;
}