/*
 * Atlas skin for the Keycloak login page (guards /v0/plateforme).
 *
 * Same tokens as frontend/src/styles/tokens.css and the marimo theme, copied
 * rather than imported: Keycloak serves this file from a theme directory that
 * has no access to the frontend build. Three copies of these hex values now
 * exist (hub tokens, infra/marimo/theme/atlas.css, here) -- change all three.
 *
 * Only the selectors below are overridden. Everything else is PatternFly via
 * the parent theme, which is deliberate: this is a login form, not a surface
 * worth reimplementing.
 */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
	--atlas-ink: #17191c;
	--atlas-body: #3c4149;
	--atlas-muted: #6b717a;
	--atlas-paper: #faf9f6;
	--atlas-canvas: #e9e6df;
	--atlas-hairline: #e7e3db;
	--atlas-border-strong: #d8d3c8;
	--atlas-pine: #0c6b5e;
	--atlas-pine-hover: #0a5347;
	--atlas-danger: #b4432e;
}

/* The stock page is a full-bleed photograph. The hub is warm paper on a warm
   canvas and never uses imagery as chrome, so the photo goes. */
.login-pf body,
body.login-pf-page,
html.login-pf {
	background: var(--atlas-canvas) !important;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	color: var(--atlas-ink);
}

/* Header: the parent renders the realm's display name in uppercase with 3px
   tracking. Hide the text (font-size:0 rather than display:none, so the
   element keeps its box and the wordmark below can sit in it) and paint the
   Atlas lockup in its place. */
#kc-header-wrapper {
	font-size: 0 !important;
	letter-spacing: normal !important;
	padding: 48px 10px 22px !important;
}

#kc-header-wrapper::before {
	content: "";
	display: block;
	width: 190px;
	height: 64px;
	margin: 0 auto;
	background: url("../img/atlas-logo.png") no-repeat center center;
	background-size: contain;
}

/* The card. PatternFly's card-pf is white with a hard shadow; the hub's cards
   are paper-white with a warm hairline and a soft, wide shadow. */
.login-pf-page .card-pf {
	background: #fff;
	border: 1px solid var(--atlas-hairline);
	border-radius: 12px;
	box-shadow: 0 30px 80px -34px rgba(20, 25, 35, 0.3),
		0 2px 8px rgba(0, 0, 0, 0.04);
	padding: 32px 32px 28px;
	margin-bottom: 40px;
}

/* "Sign in to Atlas" and friends -- the hub sets headings in Newsreader. */
#kc-page-title,
.login-pf-page .login-pf-header h1 {
	font-family: "Newsreader", Georgia, serif !important;
	font-weight: 500;
	font-size: 25px;
	letter-spacing: -0.01em;
	color: var(--atlas-ink);
	text-transform: none;
}

.login-pf-page .login-pf-header {
	margin-bottom: 18px;
}

/* Labels and inputs. */
.pf-c-form__label,
.pf-c-form__label-text,
label.control-label {
	font-family: "IBM Plex Sans", system-ui, sans-serif !important;
	font-weight: 500;
	font-size: 13px;
	color: var(--atlas-body);
}

input.pf-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 14px;
	border: 1px solid var(--atlas-border-strong) !important;
	border-radius: 9px !important;
	padding: 10px 12px !important;
	height: auto !important;
	background: #fff;
	color: var(--atlas-ink);
	/* PatternFly draws its focus state as a bottom-border trick; replace it
	   with a ring so the field does not appear to jump on focus. */
	box-shadow: none !important;
}

input.pf-c-form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
	border-color: var(--atlas-pine) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(12, 107, 94, 0.15) !important;
}

/* Primary action. */
.pf-c-button.pf-m-primary,
input[type="submit"].pf-c-button,
#kc-login {
	background: var(--atlas-pine) !important;
	border-color: var(--atlas-pine) !important;
	border-radius: 9px !important;
	font-family: "IBM Plex Sans", system-ui, sans-serif !important;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	padding: 11px 16px !important;
	color: #faf9f6 !important;
}

.pf-c-button.pf-m-primary:hover,
#kc-login:hover {
	background: var(--atlas-pine-hover) !important;
	border-color: var(--atlas-pine-hover) !important;
}

/* Links (forgot password, register, back to application). */
a,
#kc-registration a,
#kc-info-wrapper a {
	color: var(--atlas-pine);
	text-decoration: none;
}

a:hover {
	color: var(--atlas-pine-hover);
	text-decoration: underline;
}

/* Alerts: Keycloak's error banner is a loud red bar. Keep the hub's danger
   tone and the same hairline treatment as the card. */
.pf-c-alert.pf-m-danger,
.alert-error {
	border-radius: 9px;
	border: 1px solid rgba(180, 67, 46, 0.35);
	background: #fbeeea;
	color: var(--atlas-danger);
}

.pf-c-alert__title {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 13px;
}

/* The "Remember me" checkbox row and small print. */
#kc-form-options,
.login-pf-page .login-pf-signup,
#kc-info-wrapper {
	font-size: 13px;
	color: var(--atlas-muted);
}

::selection {
	background: #c9e6de;
}