/* ============================================================
   login.css — Web VM login page
   ============================================================
   Loads after style.css/mobile.css and replaces the split-screen
   layout entirely. Watermark logo composition behind a popped
   white card with a brand accent bar at the top. Light-mode
   only (locked via meta + color-scheme). Form fields and button
   match the modal inputs in the main app.
============================================================ */

:root {
	--wvm-brand: #2563eb;
	--wvm-brand-hover: #1d4ed8;
	--wvm-brand-soft: #dbeafe;
	--wvm-ink: #0f172a;
	--wvm-ink-2: #475569;
	--wvm-ink-3: #94a3b8;
	--wvm-line: #e2e8f0;
	--wvm-bg: #f1f5f9;
	--wvm-surface: #ffffff;
	--wvm-page: rgb(151, 198, 252);
	--wvm-radius: 16px;
	--wvm-radius-sm: 10px;
	color-scheme: light;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	/* Two soft brand-tinted blooms anchor opposite corners and a
	   gentle vertical wash sits underneath. The corners feel "lit"
	   and the centre stays calm — a calm pool around the card.
	   Cyan top-left + brand-blue bottom-right gives the page a sense
	   of depth and motion without anything actually moving.
	   background-attachment fixed so the composition doesn't shift
	   on scroll. */
	background: radial-gradient(65% 55% at 15% 18%, rgba(226, 244, 252, 0), transparent 60%) fixed,
	            radial-gradient(70% 60% at 88% 88%, rgba(127, 166, 251, 0), transparent 65%),
	            linear-gradient(rgba(245, 249, 252, 0.15), rgba(232, 238, 246, 0.31)) !important;
	background-attachment: fixed !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--wvm-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ============================================================
   Watermark backdrop. Fixed to viewport. The brand-coloured
   blooms in the body background do the focus work, so this layer
   is purely decorative pattern — no central vignette needed here,
   and no blur on the SVGs (the blooms provide all the atmosphere).
============================================================ */
.login-backdrop {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 1;
	pointer-events: none;
}
.login-backdrop svg {
	position: absolute;
	display: block;
	color: #2563eb;
	/* Heavier blur so the logos read as atmosphere rather than
	   discrete shapes — they should feel like the page has a faint
	   memory of branding rather than logos applied to it. */
	filter: blur(2.5px);
}
/* Two-tier opacity. Very low — the watermarks are now ambient
   suggestion rather than visible pattern. The bloom underneath
   carries all the visual weight; this layer just adds a hint of
   branded texture if you happen to look. */
.bd-op-low { opacity: 0.022; }
.bd-op-mid { opacity: 0.04; }
.bd-op-high { opacity: 0.04; } /* legacy alias — same as mid now */

/* ============================================================
   Stage — full-viewport flex container that centers the card.
============================================================ */
.login-stage {
	position: relative;
	z-index: 3;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	box-sizing: border-box;
}

/* ============================================================
   Card. White, generous padding, layered shadow with a faint
   brand-blue glow at the bottom. Brand accent bar at the top
   inside the rounded corners (overflow:hidden lets the :before
   stripe respect the radius).
============================================================ */
.login-card {
	width: 100%;
	max-width: 440px;
	background: var(--wvm-surface);
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 20px;
	padding: 44px 42px 36px;
	/* Six-layer shadow stack — each layer plays a specific role:
	   1. Tight contact (1-2px) — defines the edge against the page
	      so the card doesn't dissolve into the soft blue background.
	   2. Near ambient (4-8px) — soft fill underneath, sells the lift.
	   3. Mid cast (12-24px) — broad spread, gives weight.
	   4. Far cast (32-56px) — long throw, real height off the page.
	   5. Long throw (60-120px) — the layer that makes the card feel
	      "lifted" rather than just "with a shadow".
	   6. Brand glow (40-80px, blue) — saturates the cast with brand
	      colour so it picks up the bloom tones underneath and feels
	      native to the composition rather than imported. */
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.08),
		0 4px 8px rgba(15, 23, 42, 0.06),
		0 12px 24px rgba(15, 23, 42, 0.10),
		0 32px 56px rgba(15, 23, 42, 0.16),
		0 60px 120px rgba(15, 23, 42, 0.20),
		0 40px 80px rgba(37, 99, 235, 0.28);
	box-sizing: border-box;
	position: relative;
}
/* Hairline highlight along the top edge — picks up light from the
   page above and reinforces the lift. The brain reads this kind of
   highlight as "physical object catching ambient light", which is
   exactly the feeling we want. */
.login-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 1) 50%, transparent 100%);
}

/* ============================================================
   Brand: logo + product name. Sits above the heading.
============================================================ */
.login-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}
.login-brand-logo {
	width: 36px !important;
	height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	min-width: 36px !important;
	flex-shrink: 0;
	flex-grow: 0;
	display: block;
	object-fit: contain;
}
.login-brand-name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wvm-ink);
}

/* ============================================================
   Heading + subtitle.
============================================================ */
.login-heading {
	font-size: 24px;
	font-weight: 600;
	color: var(--wvm-ink);
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}
.login-sub {
	font-size: 14px;
	color: var(--wvm-ink-2);
	margin: 0 0 26px;
}

/* ============================================================
   Form fields — match the modal inputs in the main app.
============================================================ */
.login-card .form-control {
	border-radius: var(--wvm-radius-sm) !important;
	border: 1px solid var(--wvm-line);
	font-size: 15px;
	padding: 13px 14px;
	height: auto;
	color: var(--wvm-ink);
	background: var(--wvm-surface);
	transition: border-color 0.12s, box-shadow 0.12s;
	box-shadow: none;
	width: 100%;
	box-sizing: border-box;
}
.login-card .form-control:focus {
	border-color: var(--wvm-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: none;
}
.login-card .form-control::placeholder {
	color: var(--wvm-ink-3);
}
.login-field {
	margin-bottom: 10px;
}

/* ============================================================
   Sign-in button. Layered shadow with a brand-blue glow
   underneath so it feels lifted off the card surface.
============================================================ */
.btn-login,
.login-card .btn-primary {
	width: 100% !important;
	background: var(--wvm-brand) !important;
	border: 1px solid var(--wvm-brand) !important;
	color: #fff !important;
	border-radius: var(--wvm-radius-sm) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 13px 16px !important;
	margin-top: 8px;
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.20),
	            0 6px 16px rgba(37, 99, 235, 0.22) !important;
	transition: background 0.12s, box-shadow 0.12s, transform 0.06s;
}
.btn-login:hover,
.login-card .btn-primary:hover {
	background: var(--wvm-brand-hover) !important;
	border-color: var(--wvm-brand-hover) !important;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.28),
	            0 10px 24px rgba(37, 99, 235, 0.30) !important;
}
.btn-login:active,
.login-card .btn-primary:active {
	transform: translateY(1px);
}
.btn-login:focus,
.login-card .btn-primary:focus {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30) !important;
	outline: none;
}

/* ============================================================
   Forgot password link.
============================================================ */
.login-card .small {
	color: var(--wvm-ink-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.12s;
}
.login-card .small:hover {
	color: var(--wvm-brand);
	text-decoration: none;
}
.login-card .text-center {
	margin-top: 14px;
	text-align: center;
}

/* ============================================================
   Inline alerts.
============================================================ */
.login-card .alert {
	border-radius: var(--wvm-radius-sm);
	font-size: 13px;
	padding: 10px 12px;
	border: 1px solid transparent;
	margin-bottom: 12px;
}
.login-card .alert-danger {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}
.login-card .alert-primary,
#loggedOut.alert-primary,
#sessionTimeout.alert-primary {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	color: #166534 !important;
}

/* ============================================================
   Trust strip — three pillars beneath the card.
   Horizontal flex with separator dots between items. White-tinted
   text + icons match the watermark colour family so the strip
   reads as part of the page surface, not a separate component.
   Wraps on narrow viewports so it doesn't squash on mobile.
============================================================ */
.login-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 22px;
	flex-wrap: wrap;
	color: var(--wvm-ink-2);
}
.login-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.005em;
}
.login-trust-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: 0.7;
}
.login-trust-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--wvm-ink-3);
	flex-shrink: 0;
}
/* Mobile: trust pillars stack as a single row but tighter; the
   dots disappear and we lean on gap for separation. */
@media (max-width: 575.98px) {
	.login-trust {
		gap: 12px;
		font-size: 12px;
	}
	.login-trust-dot { display: none; }
}

/* ============================================================
   Footer block beneath the trust strip. Two lines: a brand
   tagline that gives the page a voice, then a small copyright
   mark.
============================================================ */
.login-foot {
	margin-top: 18px;
	text-align: center;
}
.login-foot-tagline {
	font-size: 13px;
	font-weight: 500;
	color: var(--wvm-ink-2);
	letter-spacing: 0.005em;
	margin-bottom: 4px;
}
.login-foot-mark {
	font-size: 11px;
	color: var(--wvm-ink-3);
	letter-spacing: 0.02em;
}

/* ============================================================
   Forgot Password modal — match the main-app modal idiom.
============================================================ */
#forgotModal .modal-dialog {
	max-width: 460px;
}
#forgotModal .modal-content {
	border-radius: var(--wvm-radius);
	border: none;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10),
	            0 30px 60px rgba(15, 23, 42, 0.15);
	overflow: hidden;
}
#forgotModal .modal-header {
	border-bottom: none;
	padding: 24px 24px 6px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
#forgotModal .modal-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--wvm-ink);
	letter-spacing: -0.01em;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
}
#forgotModal .modal-title::before {
	content: '';
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wvm-brand-soft);
	display: inline-block;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='16' r='1'/><rect x='3' y='10' width='18' height='12' rx='2' ry='2'/><path d='M7 10V7a5 5 0 0 1 9.33-2.5'/></svg>");
}
#forgotModal .modal-header .close {
	background: transparent;
	border: none;
	color: var(--wvm-ink-3);
	font-size: 22px;
	font-weight: 400;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	padding: 0;
	margin: 0;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-shadow: none;
	transition: background 0.12s, color 0.12s;
}
#forgotModal .modal-header .close:hover {
	background: var(--wvm-bg);
	color: var(--wvm-ink);
}
#forgotModal .modal-body {
	padding: 14px 24px 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wvm-ink-2);
}
#forgotModal .modal-footer {
	border-top: 1px solid var(--wvm-line);
	padding: 14px 24px;
	gap: 8px;
}
#forgotModal .modal-footer .btn {
	border-radius: var(--wvm-radius-sm);
	font-size: 14px;
	font-weight: 500;
	padding: 9px 18px;
	letter-spacing: 0;
	text-transform: none;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#forgotModal .modal-footer .btn-secondary {
	background: var(--wvm-surface);
	border: 1px solid var(--wvm-line);
	color: var(--wvm-ink);
}
#forgotModal .modal-footer .btn-secondary:hover {
	background: var(--wvm-bg);
	border-color: var(--wvm-line);
	color: var(--wvm-ink);
}

/* ============================================================
   Mobile. Shrink corner watermark anchors so they don't swamp
   the visible viewport on phone widths. Hide tiny accents that
   add noise rather than rhythm at small sizes.
============================================================ */
@media (max-width: 575.98px) {
	.login-stage {
		padding: 20px 16px;
	}
	.login-card {
		padding: 32px 24px 26px;
		border-radius: 16px;
		max-width: 100%;
		/* Lighter shadow on mobile — the 60-120px far cast is too
		   much for small viewports and bleeds past the card edges. */
		box-shadow:
			0 1px 2px rgba(15, 23, 42, 0.08),
			0 4px 8px rgba(15, 23, 42, 0.06),
			0 12px 24px rgba(15, 23, 42, 0.12),
			0 24px 48px rgba(15, 23, 42, 0.18),
			0 20px 40px rgba(37, 99, 235, 0.22);
	}
	.login-heading {
		font-size: 22px;
	}
	.login-card .form-control {
		font-size: 16px;            /* prevents iOS zoom on focus */
		padding: 12px 14px;
	}
	.bd-large  { width: 200px !important; height: 200px !important; }
	.bd-medium { width: 110px !important; height: 110px !important; }
	.bd-small  { width: 64px !important;  height: 64px !important;  }
	.bd-tiny   { display: none; }
}