/* Page de connexion aux couleurs de Pilotua (ADR-0071) : fond marine du logo, carte blanche, bouton et liens
   marine. Servie par le hook web_include_css ; ne touche que les pages de connexion et de mot de passe. */

html:has(body[data-path="login"]),
html:has(body[data-path="update-password"]) {
	background: #16283f;
}

body[data-path="login"],
body[data-path="update-password"] {
	--pilotua-marine: #1f3a5f;
	--pilotua-marine-sombre: #16283f;
	--pilotua-creme: #f2efe6;
	--pilotua-encre: #1b2537;
	--pilotua-texte: #5b6b82;
	--pilotua-champ: #f4f6f9;
	--pilotua-bord: #dfe4ec;
	background: radial-gradient(1100px 650px at 15% -10%, #2b4b78 0%, var(--pilotua-marine) 45%, var(--pilotua-marine-sombre) 100%);
	background-attachment: fixed;
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
}

/* Frappe réserve 60 px en haut pour une barre de navigation absente ici : sans ce retrait, la page défile. */
body[data-path="login"] .page-content-wrapper,
body[data-path="update-password"] .page-content-wrapper {
	padding-top: 0;
}

body[data-path="login"] .page_content,
body[data-path="update-password"] .page_content {
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}

body[data-path="login"] .page_content > .container,
body[data-path="login"] .page_content section,
body[data-path="update-password"] .page_content > .container,
body[data-path="update-password"] .page_content section {
	width: 100%;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	background: #ffffff;
	max-width: 440px;
	padding: 40px 40px 36px;
	border-radius: 20px;
	border: none;
	box-shadow: 0 30px 80px rgba(8, 16, 32, 0.45);
	gap: 28px;
}

/* En-tête : marque discrète, puis le titre. */
body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
	align-items: center;
	column-gap: 12px;
	row-gap: 28px;
	text-align: center;
}

body[data-path="login"] .page-card-head img.app-logo,
body[data-path="update-password"] .page-card-head img.app-logo {
	max-height: 40px;
	grid-column: 2;
	grid-row: 1;
}

/* Cadre marine autour du logo et du nom : il couvre les deux colonnes centrales et déborde de son padding. */
body[data-path="login"] .page-card-head::before,
body[data-path="update-password"] .page-card-head::before {
	content: "";
	grid-column: 2 / 4;
	grid-row: 1;
	align-self: stretch;
	margin: -8px -14px;
	border: 2px solid var(--pilotua-marine);
	border-radius: 10px;
}

/* Le nom de l'application à côté du bouclier : nom de marque, sans traduction. */
body[data-path="login"] .page-card-head::after,
body[data-path="update-password"] .page-card-head::after {
	content: "Pilotua";
	grid-column: 3;
	grid-row: 1;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--pilotua-marine);
}

body[data-path="login"] .page-card-head .page-card-head-text,
body[data-path="update-password"] .page-card-head .page-card-head-text {
	grid-column: 1 / -1;
	gap: 8px;
	align-items: center;
	text-align: center;
}

body[data-path="login"] .page-card-head h4,
body[data-path="update-password"] .page-card-head h4 {
	color: var(--pilotua-encre);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body[data-path="login"] .page-card-subtitle,
body[data-path="update-password"] .page-card-subtitle {
	color: var(--pilotua-texte);
	font-size: 14px;
	line-height: 1.5;
}

/* Champs */
body[data-path="login"] .page-card .form-label,
body[data-path="update-password"] .page-card .form-label {
	font-size: 13px;
	font-weight: 500;
	color: #3c4a5e;
}

body[data-path="login"] .page-card .form-control,
body[data-path="update-password"] .page-card .form-control {
	height: 44px;
	font-size: 15px;
	color: var(--pilotua-encre);
	background: var(--pilotua-champ);
	border: 1px solid var(--pilotua-bord);
	border-radius: 10px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body[data-path="login"] .page-card .form-control:focus,
body[data-path="update-password"] .page-card .form-control:focus {
	background: #ffffff;
	border-color: var(--pilotua-marine);
	box-shadow: 0 0 0 4px rgba(31, 58, 95, 0.12);
}

body[data-path="login"] .page-card .forgot-password-message a,
body[data-path="login"] .page-card a,
body[data-path="update-password"] .page-card a {
	color: var(--pilotua-marine);
	font-size: 13px;
	font-weight: 500;
}

/* Bouton principal */
body[data-path="login"] .page-card .page-card-actions .btn-login,
body[data-path="login"] .page-card .page-card-actions .btn-ldap-login,
body[data-path="login"] .page-card .btn-primary,
body[data-path="update-password"] .page-card .page-card-actions .btn-login,
body[data-path="update-password"] .page-card .btn-primary {
	height: 46px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--pilotua-marine);
	border-color: var(--pilotua-marine);
	border-radius: 10px;
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(31, 58, 95, 0.3);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body[data-path="login"] .page-card .page-card-actions .btn-login:hover,
body[data-path="login"] .page-card .page-card-actions .btn-login:focus,
body[data-path="login"] .page-card .page-card-actions .btn-login:active,
body[data-path="login"] .page-card .btn-primary:hover,
body[data-path="update-password"] .page-card .page-card-actions .btn-login:hover,
body[data-path="update-password"] .page-card .btn-primary:hover {
	background: var(--pilotua-marine-sombre);
	border-color: var(--pilotua-marine-sombre);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(31, 58, 95, 0.35);
}

@media (max-width: 575px) {
	body[data-path="login"] .page_content,
	body[data-path="update-password"] .page_content {
		padding: 0;
	}

	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card {
		border-radius: 0;
		box-shadow: none;
		padding: 56px 28px 32px;
	}
}