/*
 * Login-only layout, on top of the app-wide account-theme.css. Scoped to
 * #authentication: the full-height centered single-card presentation used by the
 * login / portal-select / oauth-account screens. Component look (panel, inputs,
 * buttons, alerts) comes from account-theme.css; this file is just the centering,
 * the grid-neutralization, and the card padding specific to these pages.
 */

#authentication {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	background: var(--rv-bg);
}

/* These pages are a single centered card — collapse the Bootstrap grid wrappers. */
#authentication .container,
#authentication .row,
#authentication .row > div {
	width: 100%;
	margin: 0;
	padding: 0;
	max-width: 420px;
}

/* Login content sits directly inside .panel (no panel-body), so pad the panel. */
#authentication .panel,
#authentication .panel-default {
	padding: 32px 28px 24px;
	margin: 0;
}

/* …but the select / oauth-account screens DO use .panel-body — don't double-pad. */
#authentication .panel-body {
	padding: 0;
}

/* Branding logo */
#authentication .company-img {
	max-width: 180px;
	margin: 0 auto 22px;
	text-align: center;
}

#authentication .company-img img {
	max-width: 100%;
	height: auto;
}

/* Center the headings on the auth cards. */
#authentication h3,
#authentication h4 {
	text-align: center;
}

#authentication #flash-notify:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Portal select
 * The post-login account chooser. Portals are grouped under one header
 * per account (account name stated once); each row is a real, scannable
 * target labelled by its role, with a type icon and a chevron.
 * ------------------------------------------------------------------ */

#authentication .portal-subtitle {
	margin: 2px 0 22px;
	color: var(--rv-text-muted);
	font-size: 14px;
}

/* Filter — only rendered for long lists; lets a user with many accounts jump straight to one. */
#authentication .portal-filter {
	position: relative;
	margin-bottom: 14px;
}

#authentication .portal-filter-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--rv-text-muted);
	pointer-events: none;
}

#authentication .portal-filter-input {
	width: 100%;
	padding: 10px 12px 10px 36px;
	font: inherit;
	font-size: 14px;
	color: var(--rv-text);
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-sm);
}

#authentication .portal-filter-input:focus {
	outline: none;
	border-color: var(--rv-primary);
	box-shadow: var(--rv-focus-ring);
}

/*
 * Cap the list height so the card stays bounded no matter how many accounts a
 * user belongs to — scroll happens inside the list, keeping the footer actions
 * on screen. The negative margin + padding let the focus ring on edge rows
 * breathe without being clipped by overflow.
 */
#authentication .portal-scroll {
	max-height: min(48vh, 520px);
	overflow-y: auto;
	margin: 0 -4px;
	padding: 2px 4px;
}

#authentication .portal-empty {
	margin: 8px 0 0;
	text-align: center;
	color: var(--rv-text-muted);
	font-size: 14px;
}

#authentication .portal-group + .portal-group {
	margin-top: 18px;
}

#authentication .portal-group-header {
	margin: 0 0 8px 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rv-text-muted);
}

#authentication .portal-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#authentication .portal-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-sm);
	background: var(--rv-surface);
	color: var(--rv-text);
	text-decoration: none;
	transition:
		border-color 0.12s ease,
		background-color 0.12s ease,
		box-shadow 0.12s ease;
}

#authentication .portal-item:hover,
#authentication .portal-item:focus {
	border-color: var(--rv-primary);
	background: var(--rv-success-surface);
	box-shadow: var(--rv-focus-ring);
	text-decoration: none;
}

#authentication .portal-item-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--rv-radius-sm);
	background: var(--rv-bg);
	color: var(--rv-primary);
}

#authentication .portal-item-icon svg {
	width: 20px;
	height: 20px;
}

#authentication .portal-item-label {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 600;
}

#authentication .portal-item-chevron {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--rv-text-muted);
	transition:
		transform 0.12s ease,
		color 0.12s ease;
}

#authentication .portal-item:hover .portal-item-chevron,
#authentication .portal-item:focus .portal-item-chevron {
	transform: translateX(2px);
	color: var(--rv-primary);
}

/* Footer actions — admin / logout demoted below the portal list. */
#authentication .portal-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--rv-border);
}

#authentication .pull-right {
	float: right;
}

#authentication .clearfix::after {
	content: '';
	display: block;
	clear: both;
}

/* Error pages (404, etc.) — share the centered auth card. */
#authentication .error-code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 2px;
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--rv-primary);
}

/* Playful, on-brand 404: the "0" is a house that drifts/sways while the 4s bob. */
#authentication .error-code .digit {
	display: inline-block;
	animation: rv404-bob 3s ease-in-out infinite;
}

#authentication .error-code .digit-2 {
	animation-delay: 0.45s;
}

#authentication .error-house {
	display: inline-block;
	font-size: 58px;
	transform-origin: center bottom;
	animation: rv404-float 3s ease-in-out infinite;
}

@keyframes rv404-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}

@keyframes rv404-float {
	0%,
	100% {
		transform: translateY(0) rotate(-5deg);
	}
	50% {
		transform: translateY(-10px) rotate(5deg);
	}
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	#authentication .error-code .digit,
	#authentication .error-house {
		animation: none;
	}
}

#authentication .error-message {
	margin: 4px 0 22px;
	color: var(--rv-text-muted);
}

#authentication .error-detail {
	font-size: 13px;
	color: var(--rv-text-muted);
}