/* ==========================================================================
   Champ de date (sc:dateInput / p:datePicker)
   --------------------------------------------------------------------------
   Charge sur toutes les vues par GlobalResourcesListener.
   Voir docs/PLAN_DATES_SAFARI.md

   DIRECTION
   Le champ se tait, le panneau parle. Le champ apparait 145 fois dans des
   formulaires denses : tout ce qui y brille devient du bruit au bout de trois
   lignes. Le panneau, lui, est une surface transitoire et focalisee, sur
   laquelle l'oeil se pose une seconde : c'est la qu'on peut soigner.

   Deux gestes portent l'ensemble :
   - le jour retenu est une pastille pleine legerement soulevee, avec une ombre
     teintee de l'accent ;
   - aujourd'hui n'est PAS un anneau (il rivaliserait avec la selection) mais un
     simple point sous le chiffre.

   MISE EN PAGE
   PrimeFaces rend deux elements freres dans un <span class="ui-calendar"> qui
   n'impose aucune mise en page : des que l'input passe a 100% de largeur, le
   bouton bascule a la ligne. On fait donc du span la coquille du champ (c'est
   elle qui porte bordure, rayon et anneau de focus), l'input devient
   transparent, et le declencheur est une zone calme A L'INTERIEUR du champ.

   PRECEDENCE
   La feuille est ajoutee en fin de construction de vue (PreRenderViewEvent),
   donc APRES le theme et les CSS de page : le prefixe "body" suffit a
   l'emporter a specificite egale, sans un seul !important.
   ========================================================================== */

:root {
	/* Un seul point de reglage. Une page qui a sa propre identite redefinit
	   --sc-date-accent sur son conteneur ; les teintes derivees suivent toutes
	   seules sur les navigateurs qui connaissent color-mix, et retombent sinon
	   sur les valeurs concretes declarees juste au-dessus. */
	--sc-date-accent: var(--sherpa-primary, #8b1538);

	--sc-date-soft: rgba(139, 21, 56, .08);
	--sc-date-soft: color-mix(in srgb, var(--sc-date-accent) 9%, transparent);

	--sc-date-glow: rgba(139, 21, 56, .32);
	--sc-date-glow: color-mix(in srgb, var(--sc-date-accent) 34%, transparent);

	--sc-date-ring: rgba(139, 21, 56, .13);
	--sc-date-ring: color-mix(in srgb, var(--sc-date-accent) 14%, transparent);

	/* Teinte du declencheur : plus dense que --sc-date-soft, qui sert de fond
	   d'appoint dans le panneau et disparaitrait derriere l'icone. */
	--sc-date-tint: rgba(139, 21, 56, .11);
	--sc-date-tint: color-mix(in srgb, var(--sc-date-accent) 12%, transparent);

	--sc-date-tint-strong: rgba(139, 21, 56, .2);
	--sc-date-tint-strong: color-mix(in srgb, var(--sc-date-accent) 20%, transparent);

	--sc-date-ink: #16202f;
	--sc-date-muted: #98a2b3;
	--sc-date-line: #e4e7ec;
	--sc-date-surface: #ffffff;

	/* Elevation au repos : le champ se detache du fond au lieu d'etre un simple
	   rectangle trace. C'est ce qui fait le rendu "pose sur la page". */
	--sc-date-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);

	--sc-date-radius: 10px;
	--sc-date-radius-panel: 16px;
	--sc-date-cell: 10px;
}

/* ══ LE CHAMP ═══════════════════════════════════════════════════════════════
   Calme par defaut, net au focus. */

body .ui-calendar {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	background: var(--sc-date-surface);
	border: 1px solid var(--sc-date-line);
	border-radius: var(--sc-date-radius);
	box-shadow: var(--sc-date-lift);
	overflow: hidden;
	transition: border-color .16s ease, box-shadow .16s ease;
}

/* Dans une grille fluide, le champ occupe la largeur offerte. Ailleurs on
   laisse la largeur intrinseque : les pages qui veulent du pleine largeur le
   declarent deja sur .ui-calendar, et inline-flex l'honore. */
body .ui-fluid .ui-calendar {
	display: flex;
	width: 100%;
}

body .ui-calendar:hover {
	border-color: #d0d5dd;
}

/* L'anneau de focus appartient a la coquille, pas a l'input : le champ
   s'allume d'un seul tenant, qu'on y entre au clavier ou par le bouton.
   L'elevation est conservee sous l'anneau, sinon le champ "retombe" a plat
   au moment precis ou on entre dedans. */
body .ui-calendar:focus-within {
	border-color: var(--sc-date-accent);
	box-shadow: 0 0 0 3px var(--sc-date-ring), var(--sc-date-lift);
}

body .ui-calendar > input.ui-inputfield {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: .68rem .9rem;
	color: var(--sc-date-ink);
	letter-spacing: .01em;
	/* Chiffres a chasse fixe : sous le masque, la date ne tressaute plus a
	   chaque frappe, et les colonnes de dates s'alignent dans les tableaux. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

body .ui-calendar > input.ui-inputfield:focus,
body .ui-calendar > input.ui-inputfield:hover {
	border: 0;
	box-shadow: none;
	outline: none;
}

body .ui-calendar > input.ui-inputfield::placeholder {
	color: var(--sc-date-muted);
	opacity: .8;
	letter-spacing: .04em;
}

/* ── Le declencheur ───────────────────────────────────────────── */

/* Le champ est calme, mais son seul point d'entree au clic ne doit pas se
   deviner : le declencheur porte l'accent en permanence, sur une plage teintee
   qui occupe toute la hauteur du champ. C'est la seule couleur du champ au
   repos, donc elle ne rivalise avec rien. */
body .ui-calendar .ui-datepicker-trigger.ui-button {
	flex: 0 0 auto;
	/* flex plutot que le centrage du theme : l'icone reste centree quoi que le
	   theme fasse du libelle masque. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	/* align-self indispensable : sans lui le bouton retombe a sa hauteur de
	   contenu et l'icone se retrouve calee en haut du champ. */
	align-self: stretch;
	padding: 0;
	margin: 0;
	border: 0;
	border-left: 1px solid var(--sc-date-line);
	border-radius: 0;
	background: var(--sc-date-tint);
	color: var(--sc-date-accent);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

body .ui-calendar .ui-datepicker-trigger.ui-button:enabled:hover {
	background: var(--sc-date-tint-strong);
	color: var(--sc-date-accent);
	box-shadow: none;
}

/* Champ actif : la plage se densifie et la separation prend l'accent, en accord
   avec la bordure du champ qui vient de s'allumer. */
body .ui-calendar:focus-within .ui-datepicker-trigger.ui-button {
	background: var(--sc-date-tint-strong);
	border-left-color: var(--sc-date-accent);
	color: var(--sc-date-accent);
}

body .ui-calendar .ui-datepicker-trigger.ui-button .ui-button-text {
	display: none;
}

/* Le centrage se joue ICI et pas sur le bouton. Sur un bouton sans libelle, le
   theme sort l'icone du flux ("position:absolute" + "top/left:50%" rattrapes par
   des marges de -.5em) : le "justify-content:center" du bouton n'a alors plus
   rien a centrer, et les marges de rattrapage supposent une boite de 1em qui
   n'est plus vraie des qu'on grossit le glyphe. On rend donc l'icone au flux
   avant toute chose ; le bouton s'occupe du reste. */
body .ui-calendar .ui-datepicker-trigger.ui-button .ui-icon {
	position: static;
	top: auto;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	font-size: 1.2rem;
	line-height: 1;
	text-indent: 0;
}

/* Le glyphe PrimeIcons se dessine dans un ::before : sa propre hauteur de ligne
   est ce qui decalait l'icone dans sa boite. */
body .ui-calendar .ui-datepicker-trigger.ui-button .ui-icon::before {
	display: block;
	line-height: 1;
}

/* Champ inutilisable : la plage reste, la couleur part. Garder l'accent sur un
   champ grise laisserait croire que le calendrier s'ouvre encore. */
body .ui-calendar:has(> input:disabled) .ui-datepicker-trigger.ui-button,
body .ui-calendar:has(> input[readonly]) .ui-datepicker-trigger.ui-button {
	background: transparent;
	color: var(--sc-date-muted);
}

/* ── Etats ─────────────────────────────────────────────────────────────── */

/* Un champ inutilisable ne flotte pas : on lui retire l'elevation en meme temps
   qu'on grise son fond. */
body .ui-calendar:has(> input:disabled),
body .ui-calendar:has(> input[readonly]) {
	background: #f7f8fa;
	box-shadow: none;
}

body .ui-calendar:has(> input:disabled) {
	opacity: .72;
}

/* Saisie incomplete laissee en place par maskAutoClear="false" : on la signale
   plutot que de l'effacer en silence.
   Les deux regles restent separees : un navigateur sans :has() invaliderait
   toute une liste de selecteurs qui en contient un, y compris la partie qu'il
   sait pourtant appliquer. */
body .ui-calendar.ui-state-error {
	border-color: #dc2626;
}

body .ui-calendar:has(> input.ui-state-error) {
	border-color: #dc2626;
}

body .ui-calendar:has(> input.ui-state-error):focus-within {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .14), var(--sc-date-lift);
}

/* ══ LE PANNEAU ════════════════════════════════════════════════════════════ */

body .ui-datepicker {
	max-width: calc(100vw - 1rem);
	padding: .35rem;
	background: var(--sc-date-surface);
	border: 0;
	border-radius: var(--sc-date-radius-panel);
	/* Le filet fait par une ombre plutot qu'une bordure : pas de trait dur au
	   raccord des coins arrondis. */
	box-shadow: 0 0 0 1px var(--sc-date-line),
	            0 18px 44px -12px rgba(22, 32, 47, .28),
	            0 4px 12px -4px rgba(22, 32, 47, .10);
	overflow: hidden;
}

/* Ouverture : une montee courte plutot que l'ecrasement vertical par defaut
   de PrimeFaces, qui deforme les chiffres pendant la transition. */
body .ui-datepicker.ui-connected-overlay-enter {
	opacity: 0;
	transform: translateY(-6px) scale(.98);
}

body .ui-datepicker.ui-connected-overlay-enter-active {
	opacity: 1;
	transform: none;
	transition: opacity .16s ease-out, transform .16s cubic-bezier(.2, .8, .3, 1);
}

/* ── En-tete ───────────────────────────────────────────────────────────── */

body .ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .55rem .4rem .5rem;
	background: linear-gradient(180deg, var(--sc-date-soft), transparent);
	border: 0;
	border-radius: calc(var(--sc-date-radius-panel) - 4px);
	color: var(--sc-date-ink);
}

body .ui-datepicker .ui-datepicker-title {
	margin: 0 2.2rem;
	line-height: 1.9rem;
	font-family: Montserrat, "Public Sans", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
	text-transform: capitalize;
}

/* Fleches en pastilles fantomes : presentes, jamais bruyantes.
   top/margin-top vont ensemble : le theme centre par "top:50% + margin-top:-1rem",
   fixer l'un sans l'autre sortirait les fleches de l'en-tete. */
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
	top: 50%;
	margin-top: -.95rem;
	width: 1.9rem;
	height: 1.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sc-date-muted);
	transition: background-color .14s ease, color .14s ease;
}

body .ui-datepicker .ui-datepicker-prev { left: .45rem; }
body .ui-datepicker .ui-datepicker-next { right: .45rem; }

body .ui-datepicker .ui-datepicker-prev:hover,
body .ui-datepicker .ui-datepicker-next:hover {
	background: var(--sc-date-soft);
	color: var(--sc-date-accent);
}

/* Navigation mois / annee : 80 champs l'activent, elle doit tenir dans
   l'en-tete sans le casser. */
body .ui-datepicker .ui-datepicker-title select {
	margin: 0 .15rem;
	padding: .15rem 1.3rem .15rem .5rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: var(--sc-date-soft);
	color: var(--sc-date-ink);
	font-family: inherit;
	font-size: .86rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .14s ease;
}

body .ui-datepicker .ui-datepicker-title select:hover,
body .ui-datepicker .ui-datepicker-title select:focus {
	border-color: var(--sc-date-accent);
	outline: none;
}

/* ── La grille ─────────────────────────────────────────────────────────── */

body .ui-datepicker table {
	margin: .15rem 0 0;
	font-size: .88rem;
}

/* Initiales des jours : petites capitales espacees, elles se lisent comme un
   en-tete de colonne et non comme une ligne de donnees. */
body .ui-datepicker table th > span {
	display: block;
	padding: .35rem 0;
	color: var(--sc-date-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

body .ui-datepicker table td {
	padding: 1px;
}

body .ui-datepicker table td > a,
body .ui-datepicker table td > span {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2.3rem;
	height: 2.3rem;
	margin: 0 auto;
	border: 0;
	border-radius: var(--sc-date-cell);
	color: var(--sc-date-ink);
	font-variant-numeric: tabular-nums;
	transition: background-color .13s ease, color .13s ease;
}

body .ui-datepicker table td > a:hover {
	background: var(--sc-date-soft);
	color: var(--sc-date-accent);
}

/* Le samedi et le dimanche s'effacent d'un cran : sur une date d'effet ou une
   echeance, reperer le week-end d'un coup d'oeil evite une relecture. */
body .ui-datepicker table td.ui-datepicker-week-end > a,
body .ui-datepicker table td.ui-datepicker-week-end > span {
	color: var(--sc-date-muted);
}

/* Les jours du mois voisin restent lisibles mais sortent du plan. */
body .ui-datepicker table td.ui-datepicker-other-month > a,
body .ui-datepicker table td.ui-datepicker-other-month > span {
	opacity: .32;
}

/* LE GESTE : le jour retenu est une pastille pleine, legerement soulevee par
   une ombre teintee de l'accent. C'est le seul element du panneau qui a du
   relief, donc le seul que l'oeil trouve immediatement. */
body .ui-datepicker table td > a.ui-state-active,
body .ui-datepicker table td.ui-datepicker-current-day > a {
	background: var(--sc-date-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 10px -2px var(--sc-date-glow);
}

body .ui-datepicker table td > a.ui-state-active:hover {
	background: var(--sc-date-accent);
	color: #fff;
}

/* Aujourd'hui : un point sous le chiffre, pas un anneau. Un anneau aurait la
   meme silhouette que la selection et les deux se confondraient. */
body .ui-datepicker table td.ui-datepicker-today > a:not(.ui-state-active)::after,
body .ui-datepicker table td.ui-datepicker-today > span:not(.ui-state-active)::after {
	content: "";
	position: absolute;
	bottom: .3rem;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--sc-date-accent);
}

body .ui-datepicker table td.ui-datepicker-today > a:not(.ui-state-active) {
	background: transparent;
	color: var(--sc-date-accent);
	font-weight: 700;
}

body .ui-datepicker table td > a.ui-state-disabled,
body .ui-datepicker table td > span.ui-state-disabled {
	opacity: .28;
	box-shadow: none;
}

/* ── Selecteur de mois (view="month") ──────────────────────────────────── */

body .ui-datepicker .ui-monthpicker .ui-monthpicker-month {
	padding: .6rem .2rem;
	border-radius: var(--sc-date-cell);
	color: var(--sc-date-ink);
	transition: background-color .13s ease, color .13s ease;
}

body .ui-datepicker .ui-monthpicker .ui-monthpicker-month:hover {
	background: var(--sc-date-soft);
	color: var(--sc-date-accent);
}

body .ui-datepicker .ui-monthpicker .ui-monthpicker-month.ui-state-active {
	background: var(--sc-date-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 10px -2px var(--sc-date-glow);
}

/* ── Barre de boutons ──────────────────────────────────────────────────── */

body .ui-datepicker .ui-datepicker-buttonbar {
	padding: .4rem .3rem .2rem;
	border-top: 1px solid var(--sc-date-line);
}

body .ui-datepicker .ui-datepicker-buttonbar .ui-button {
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--sc-date-accent);
	font-weight: 600;
	box-shadow: none;
}

body .ui-datepicker .ui-datepicker-buttonbar .ui-button:enabled:hover {
	background: var(--sc-date-soft);
}

/* ══ TACTILE ═══════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
	/* Safari iOS zoome sur tout champ sous 16px, ce qui decale la page et fait
	   perdre le panneau. On ne force la taille qu'au doigt : le back-office en
	   densite compacte garde ses tailles reduites a la souris. */
	body .ui-calendar > input.ui-inputfield {
		font-size: 16px;
		padding: .78rem .9rem;
	}

	body .ui-calendar .ui-datepicker-trigger.ui-button {
		width: 3.25rem;
	}

	body .ui-calendar .ui-datepicker-trigger.ui-button .ui-icon {
		font-size: 1.3rem;
	}

	body .ui-datepicker table td > a,
	body .ui-datepicker table td > span {
		width: 2.7rem;
		height: 2.7rem;
	}
}

/* ══ CONFORT ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	body .ui-calendar,
	body .ui-calendar .ui-datepicker-trigger.ui-button,
	body .ui-datepicker.ui-connected-overlay-enter-active,
	body .ui-datepicker .ui-datepicker-prev,
	body .ui-datepicker .ui-datepicker-next,
	body .ui-datepicker table td > a,
	body .ui-datepicker table td > span {
		transition: none;
	}

	body .ui-datepicker.ui-connected-overlay-enter {
		opacity: 1;
		transform: none;
	}
}