/* RiskTape login theme — layers on top of keycloak.v2.
 *
 * Palette + typography mirror src/app.css so the Keycloak screens feel
 * like the same product as the dashboard. We override a handful of
 * PatternFly-5 custom properties (--pf-v5-global--*) where the parent
 * theme reads them, plus a few layout-y rules we want to replace
 * outright (background mesh, logo swap, glass card treatment).
 */

/* Inter is self-hosted (#312): the login page must not send the user's
 * browser to Google before they have even authenticated. Same woff2 set
 * as the app's static/fonts (latin + latin-ext). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/inter-800-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

:root {
	/* Canonical RiskTape tokens (kept in sync with src/app.css) */
	--rt-bg: #1a2030;
	--rt-metal-sheen-low: rgba(14, 18, 28, 0.6);
	--rt-metal-sheen-mid: rgba(35, 42, 56, 0.5);
	--rt-metal-sheen-high: rgba(80, 95, 120, 0.28);
	--rt-metal-glint-1: rgba(180, 195, 220, 0.05);
	--rt-metal-glint-2: rgba(95, 110, 135, 0.07);

	--rt-text-1: #f1f5f9;
	--rt-text-2: #cbd5e1;
	--rt-text-muted: #a8b5c7;
	--rt-text-tertiary: #8292a8;

	--rt-accent: #d4a03a;
	--rt-accent-hover: #e0b14c;
	--rt-on-accent: #0b0f17;

	--rt-danger: #ef4444;
	--rt-success: #10b981;
	--rt-warning: #f59e0b;

	--rt-surface: rgba(255, 255, 255, 0.07);
	--rt-surface-raised: rgba(255, 255, 255, 0.11);
	--rt-surface-border: rgba(255, 255, 255, 0.18);
	--rt-surface-border-strong: rgba(255, 255, 255, 0.28);
	--rt-input-bg: rgba(11, 15, 23, 0.55);

	--rt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* PatternFly overrides — keycloak.v2 reads these in its default
	 * stylesheet. Overriding at :root keeps specificity low. */
	--pf-v5-global--Color--100: var(--rt-text-1);
	--pf-v5-global--Color--200: var(--rt-text-2);
	--pf-v5-global--Color--light-100: var(--rt-text-1);
	--pf-v5-global--BackgroundColor--100: transparent;
	--pf-v5-global--BackgroundColor--light-100: transparent;
	--pf-v5-global--link--Color: var(--rt-accent);
	--pf-v5-global--link--Color--hover: var(--rt-accent-hover);
	--pf-v5-global--primary-color--100: var(--rt-accent);
	--pf-v5-global--primary-color--200: var(--rt-accent-hover);
	--pf-v5-global--danger-color--100: var(--rt-danger);
	--pf-v5-global--success-color--100: var(--rt-success);
	--pf-v5-global--warning-color--100: var(--rt-warning);
	--pf-v5-global--FontFamily--text: var(--rt-font-body);
	--pf-v5-global--FontFamily--heading: var(--rt-font-body);
	--pf-v5-global--FontFamily--sans-serif: var(--rt-font-body);
}

/* Brushed-metal mesh background, replacing the stock keycloak-bg.png.
 * Stack = two soft highlight glints + diagonal metal gradient. */
html,
body,
.login-pf,
.login-pf body {
	background: var(--rt-bg) !important;
	background-image:
		radial-gradient(ellipse at 12% 8%, var(--rt-metal-glint-1) 0%, transparent 45%),
		radial-gradient(ellipse at 88% 92%, var(--rt-metal-glint-2) 0%, transparent 55%),
		linear-gradient(
			145deg,
			var(--rt-metal-sheen-low) 0%,
			var(--rt-metal-sheen-mid) 50%,
			var(--rt-metal-sheen-high) 100%
		) !important;
	background-attachment: fixed !important;
	background-size: cover !important;
	color: var(--rt-text-1);
	font-family: var(--rt-font-body);
	min-height: 100vh;
}

/* Kill the raster fallback baked into keycloak.v2 */
.login-pf body {
	background-image:
		radial-gradient(ellipse at 12% 8%, var(--rt-metal-glint-1) 0%, transparent 45%),
		radial-gradient(ellipse at 88% 92%, var(--rt-metal-glint-2) 0%, transparent 55%),
		linear-gradient(
			145deg,
			var(--rt-metal-sheen-low) 0%,
			var(--rt-metal-sheen-mid) 50%,
			var(--rt-metal-sheen-high) 100%
		) !important;
}

/* Glass card around the login form */
.pf-v5-c-login__main {
	background: var(--rt-surface);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid var(--rt-surface-border);
	border-radius: 14px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.32),
		0 2px 8px rgba(0, 0, 0, 0.24);
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer,
.pf-v5-c-login__header {
	background: transparent;
	color: var(--rt-text-1);
}

/* Headings / title */
#kc-page-title,
.pf-v5-c-login__main-header-desc,
.pf-v5-c-title {
	color: var(--rt-text-1);
	font-family: var(--rt-font-body);
	letter-spacing: -0.01em;
}

#kc-header-wrapper {
	color: var(--rt-text-1) !important;
	letter-spacing: 2px;
}

/* Form labels + helper text */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-form__helper-text,
.pf-v5-c-check__label,
label {
	color: var(--rt-text-muted);
	font-family: var(--rt-font-body);
}

/* Inputs */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='tel'],
select,
textarea {
	background: var(--rt-input-bg);
	color: var(--rt-text-1);
	border: 1px solid var(--rt-surface-border);
	border-radius: 8px;
	font-family: var(--rt-font-body);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control input:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: var(--rt-accent);
	box-shadow: 0 0 0 3px rgba(212, 160, 58, 0.2);
	outline: none;
}

/* Primary button — RiskTape gold */
.pf-v5-c-button.pf-m-primary,
input[type='submit'].pf-m-primary,
button.pf-m-primary {
	background: var(--rt-accent);
	color: var(--rt-on-accent);
	border: none;
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition:
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.pf-v5-c-button.pf-m-primary:hover,
button.pf-m-primary:hover {
	background: var(--rt-accent-hover);
	box-shadow: 0 4px 14px rgba(212, 160, 58, 0.3);
}

.pf-v5-c-button.pf-m-primary:focus,
button.pf-m-primary:focus {
	box-shadow: 0 0 0 3px rgba(212, 160, 58, 0.35);
	outline: none;
}

/* Secondary + link buttons */
.pf-v5-c-button.pf-m-secondary {
	color: var(--rt-text-1);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--rt-surface-border);
	border-radius: 8px;
}
.pf-v5-c-button.pf-m-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--rt-accent);
}

.pf-v5-c-button.pf-m-link,
a,
a:link,
a:visited {
	color: var(--rt-accent);
}
.pf-v5-c-button.pf-m-link:hover,
a:hover {
	color: var(--rt-accent-hover);
	text-decoration: underline;
}

/* Inject the RiskTape logo above the page header. v2 uses #kc-header-wrapper
 * for the text "Sign in to <realm>"; we render the logo via a ::before
 * pseudo-element so we don't need to override template.ftl. */
/* The v2 template renders the realm displayName inside #kc-header-wrapper
 * (uppercase-transformed to e.g. "RISKTAPE"). Our logo already includes the
 * "RiskTape" wordmark so we hide the text via font-size:0 and render the
 * logo via ::before. Keeps things CSS-only — no template.ftl override. */
#kc-header-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0;
	padding: 0.5rem 0 1rem 0;
}
#kc-header-wrapper::before {
	content: '';
	display: block;
	background-image: url('../img/risktape-logo.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/* risktape-logo.png is 967×851 — keep the aspect so the owl doesn't
	 * stretch. 110×97 lands it comfortably above the card without
	 * crowding the "Sign in to your account" heading. */
	height: 97px;
	width: 110px;
}

/* Social / broker provider buttons (Entra federation row).
 *
 * Rendered as a bordered pill with the provider's brand mark on the
 * left and the displayName text on the right. The Microsoft logo is
 * injected via ::before on the entra broker link (alias=entra-risktape). */
.pf-v5-c-login__main-footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100%;
}
.pf-v5-c-login__main-footer-links-item {
	display: flex;
	justify-content: center;
	width: 100%;
}
.pf-v5-c-login__main-footer-links-item-link,
#social-providers .pf-v5-c-button,
a.zocial,
a.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.65rem 1.25rem;
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--rt-surface-border-strong);
	border-radius: 8px;
	color: var(--rt-text-1);
	font-family: var(--rt-font-body);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
}
.pf-v5-c-login__main-footer-links-item-link:hover,
#social-providers .pf-v5-c-button:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--rt-accent);
	color: var(--rt-text-1);
	text-decoration: none;
}
.pf-v5-c-login__main-footer-links-item-link .kc-social-provider-name {
	color: var(--rt-text-1);
}

/* Microsoft brand mark on the Entra broker button. Keycloak ids each
 * social link `social-<alias>`; our Entra broker uses alias=entra-risktape. */
#social-entra-risktape::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('../img/microsoft-logo.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Checkbox (Remember me) */
.pf-v5-c-check__input {
	accent-color: var(--rt-accent);
}

/* Alerts */
.pf-v5-c-alert {
	background: var(--rt-surface-raised);
	border: 1px solid var(--rt-surface-border);
	color: var(--rt-text-1);
	border-radius: 8px;
}
.pf-v5-c-alert.pf-m-danger {
	background: rgba(239, 68, 68, 0.14);
	border-color: var(--rt-danger);
	color: var(--rt-text-1);
}
.pf-v5-c-alert.pf-m-warning {
	background: rgba(245, 158, 11, 0.14);
	border-color: var(--rt-warning);
	color: var(--rt-text-1);
}
.pf-v5-c-alert.pf-m-success {
	background: rgba(16, 185, 129, 0.14);
	border-color: var(--rt-success);
	color: var(--rt-text-1);
}

/* Footer band + fine print */
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item,
.pf-v5-c-login__footer {
	color: var(--rt-text-muted);
}

/* Make all the PatternFly icons visible on the dark surface */
.pf-v5-c-form-control__icon {
	color: var(--rt-text-muted);
}