/*
 * La frise de l'année, v5-l'année sur une frise. Les formes viennent du design system
 * (util-timeline-event, util-graduation, util-rail-marker, util-timeline-striped) : cette feuille ne
 * porte que leur placement sur l'axe de l'année, comme series.css place les pastilles du plan de
 * culture. Tout sélecteur est borné par breeding-year, la feuille d'un package restant chargée en
 * navigation ajax.
 */

/* ===================================================== piste A, l'année en largeur */
.breeding-year-row {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.5rem;
}

.breeding-year-head {
	padding-top: 0;
	padding-bottom: 0;
}

.breeding-year-label {
	line-height: 1.3;
}

.breeding-year-track {
	position: relative;
	height: 1.45rem;
}

.breeding-year-track-2 {
	height: 3rem;
}

.breeding-year-track + .breeding-year-track {
	margin-top: 0.25rem;
}

/* La pastille du design system est un flex centré : une barre de lot lit son nom depuis son début, et
   le coupe d'une ellipse quand la durée du lot ne le contient pas, ce qu'un flex ne sait pas faire. */
.breeding-year-track > .util-timeline-event {
	position: absolute;
	top: 0;
}

.breeding-year-lot {
	display: block;
	padding: 0 0.5rem;
	font-size: 0.9rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.45rem;
	text-decoration: none;
}

.breeding-year-lot.util-timeline-event-expected {
	line-height: calc(1.45rem - 2px);
}

.breeding-year-lane-1 {
	top: 1.55rem !important;
}

.breeding-year-lot.dropdown-toggle::after,
.breeding-year-dot.dropdown-toggle::after {
	display: none;
}

.breeding-year-track > .breeding-year-gap {
	top: 0.35rem;
}

/* Une échéance ou une fête est un instant : la pastille se centre sur son jour. */
.breeding-year-track > .breeding-year-dot {
	transform: translateX(-50%);
	padding: 0 0.375rem;
	text-decoration: none;
	z-index: 1;
}

/* Deux échéances d'une même pastille se lisent séparées : collées, « BR » se lit comme un mot. */
.breeding-year-dot > [data-due] + [data-due] {
	margin-left: 0.25rem;
	padding-left: 0.25rem;
	border-left: 1px solid currentColor;
}

.util-legend-mark.breeding-year-feast-mark {
	width: 1.5rem;
}

.breeding-year-track > .util-rail-marker {
	z-index: 0;
}

/* Le trait du jour passe sous les barres, pour ne pas couper le nom d'un lot en cours. */
.breeding-year-track > .breeding-year-lot {
	z-index: 1;
}

@media (max-width: 767px) {

	.breeding-year-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.25rem;
		padding: 0.5rem 0.25rem;
	}

	.breeding-year-head > .breeding-year-label {
		display: none;
	}

	.breeding-year-track {
		height: 1.9rem;
	}

	.breeding-year-track-2 {
		height: 4rem;
	}

	.breeding-year-lot {
		height: 1.9rem;
		padding: 0 0.25rem;
		font-size: 0.85rem;
		line-height: 1.9rem;
	}

	.breeding-year-lane-1 {
		top: 2.05rem !important;
	}

	.breeding-year-lot.util-timeline-event-expected {
		line-height: calc(1.9rem - 2px);
	}

	.breeding-year-feast {
		font-size: 0.65rem;
		padding: 0 0.25rem !important;
	}

	/* Une échéance ou une fête se touche du doigt : 2,5rem font 27 px, contre 19 pour la pastille. */
	.breeding-year-track-dots {
		height: 2.5rem;
	}

	.breeding-year-track-dots > .breeding-year-dot {
		min-width: 1.75rem;
		height: 2.5rem;
		padding: 0;
	}

	.breeding-year-track-dots > .breeding-year-gap {
		top: 0.9rem;
	}

}

/* Les gestes de tête de page gardent leur libellé au téléphone (maquette.py, gestes_nommes) : leur boîte
   prend alors un rang entier sous le titre, où ils passent à la ligne au lieu de déborder. Le
   `flex: 0 0 auto` de component.css pèse trois classes, :not() compris : il faut les trois ici aussi,
   cette feuille venant après. */
@media (max-width: 575px) {

	.util-page-header > .util-page-header-aside.breeding-year-actions {
		flex: 1 1 100%;
	}

}

/* Un vide sanitaire, une fenêtre d'abattage, une mise à l'abri : une période, teintée de sa couleur. */
.breeding-year-gap,
.breeding-year-shelter {
	background-color: color-mix(in srgb, currentColor 35%, transparent);
}

.breeding-year-gap:not(.color-production) {
	color: var(--muted);
}

.breeding-year-track-shelter {
	height: 0.75rem;
}

/* Le nom d'un lot qui ne tient pas dans sa barre passe en tête de rangée (BreedingYear.names). */
.breeding-year-lot-short > .breeding-year-lot-name {
	display: none;
}

.breeding-year-names > :not(.hide) ~ :not(.hide)::before {
	content: ' · ';
}

@media (min-width: 768px) {

	.breeding-year-lot[data-movable] {
		cursor: grab;
		touch-action: none;
	}

	.breeding-year-lot.breeding-year-dragging {
		cursor: grabbing;
		z-index: 3;
	}

}

/* ===================================================== piste B, l'année en hauteur */
.breeding-year-v {
	--year-label: 4.5rem;
	--year-ready: 3rem;
	--year-month: 3.5rem;
}

.breeding-year-v-grid {
	display: grid;
	grid-template-columns: var(--year-label) repeat(4, minmax(0, 1fr)) var(--year-ready);
	column-gap: 0.25rem;
}

.breeding-year-v-head {
	padding-bottom: 0.375rem;
	line-height: 1.2;
	text-align: center;
}

.breeding-year-v-head .color-muted {
	font-size: 0.8rem;
}

.breeding-year-v-body {
	position: relative;
}

.breeding-year-v-month {
	height: var(--year-month);
}

.breeding-year-v-label {
	padding: 0.25rem 0.5rem;
	line-height: 1.2;
}

.breeding-year-v-current .breeding-year-v-label b {
	color: var(--text);
}

.breeding-year-v-feast {
	font-size: 0.8rem;
	font-weight: bold;
}

.breeding-year-v-cols {
	position: absolute;
	inset: 0;
}

.breeding-year-v-col {
	position: relative;
}

/* Une barre de l'année en hauteur : la pastille du design system, couchée. Sa hauteur est sa durée,
   posée par l'écran, et son nom s'écrit en tête et revient à la ligne dans la colonne. */
.breeding-year-v-col > .util-timeline-event {
	position: absolute;
	display: block;
	left: 2px;
	right: 2px;
	min-height: 0;
	padding: 0.25rem 0.375rem;
	overflow: hidden;
	border-radius: var(--radius);
	line-height: 1.15;
	text-align: left;
	text-decoration: none;
	white-space: normal;
}

.breeding-year-v-col > .util-timeline-event[style*="width"] {
	right: auto;
}

.breeding-year-v-col > .breeding-year-v-gap {
	padding: 0 0.375rem;
	background-color: color-mix(in srgb, currentColor 20%, transparent);
	font-weight: normal;
}

.breeding-year-v-col > .util-timeline-event.dropdown-toggle::after,
.breeding-year-v-dots .dropdown-toggle::after {
	display: none;
}

.breeding-year-v-laying {
	position: absolute;
	left: 0.5rem;
	color: white;
	font-size: 0.8rem;
	z-index: 1;
}

.breeding-year-v-dots {
	position: absolute;
	right: 4px;
	display: flex;
	gap: 2px;
	z-index: 1;
}

.breeding-year-v-dots > .util-timeline-event {
	padding: 0 0.25rem;
	text-decoration: none;
}

.breeding-year-v-today {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--text);
	z-index: 2;
}

@media (max-width: 767px) {

	.breeding-year-v {
		--year-label: 2.75rem;
		--year-ready: 1.75rem;
	}

	.breeding-year-v-head {
		font-size: 0.8rem;
	}

	.breeding-year-v-label {
		padding: 0.25rem;
		font-size: 0.85rem;
	}

	.breeding-year-v-feast {
		font-size: 0.65rem;
	}

	.breeding-year-v-col > .util-timeline-event {
		padding: 0.125rem 0.25rem;
		font-size: 0.65rem;
	}

	.breeding-year-v-laying {
		left: 0.25rem;
		font-size: 0.7rem;
	}

}

/* Les menus de la frise portent la date et sa note en sous-titre, que le cadriciel garde sur une ligne
   (`white-space: nowrap`) : à 360, la note la plus longue poussait le menu hors de l'écran. */
.breeding-year-menu {
	max-width: min(20rem, calc(100vw - 2rem));
}

.breeding-year-menu .dropdown-subtitle {
	white-space: normal;
}

/* Le conseil se pose au pied de l'aperçu (`margin-top: auto`) pour suivre les cartes. Tant qu'aucune réponse ne les
   a remplies, il remonte en tête, plutôt que de laisser un panneau vide au-dessus de lui. */
.onboarding-preview:has(.onboarding-preview-header.hide) .onboarding-tip {
	margin-top: 0;
}

@media (max-width: 575px) {

	.breeding-day-actions > .input-group {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
	}

	.breeding-day-actions > .input-group > .form-control {
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
	}

}

@media (max-width: 575px) {

	.breeding-day-sub > a[data-panel],
	.breeding-day-rate > a {
		display: inline-block;
		padding: 0.5rem 0;
		font-size: 1.1rem;
		line-height: 1.2;
	}

}

.breeding-year-todo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
}

.breeding-year-todo-action {
	display: inline-flex;
	gap: 0.5rem;
}

.breeding-year-todo-lot > span {
	white-space: nowrap;
}

/* Le trait du jour en légende : le marqueur du rail est positionné en absolu sur sa piste. */
.util-legend-mark.breeding-year-today-mark {
	width: 2px;
	border-radius: 0;
	background-color: var(--text);
}

/* Une barre de lot en légende garde sa longueur de barre : courte, elle se confond avec la pastille d'une fête. */
.util-legend-mark.breeding-year-lot-mark {
	width: 2.5rem;
}

/* Le papillon d'un état vide est servi par le produit sous /static/ouvretaferme/, absent de la maquette : sans lui,
   le masque peint un carré plein. */
.util-empty:not(span):not(:has(p))::before,
.util-empty > p::before {
	-webkit-mask-image: url('papillon-jaune.svg');
	mask-image: url('papillon-jaune.svg');
}