/**
 * Unified Login — standalone branded login page styles
 *
 * Extracted from inline <style> block in unified-login.php in v1.8.230.
 * Loaded by the template via a <link rel="stylesheet"> in its <head>.
 *
 * This page is a fully self-contained HTML document (no CRM shell, no
 * Houzez theme) — it renders for /dashboard/ and similar unified login
 * entry points. The standalone nature means it ships its own complete
 * stylesheet rather than relying on inherited CRM/Houzez styles.
 *
 * @package MLS_Genie
 * @since   1.7.467
 */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Brand tokens from client settings ── */
/* Brand colors are set per-installation via an inline `style="--ul-primary:..."` */
/* attribute on the <html> element in the template (HTML carries configuration  */
/* data, this stylesheet stays static). Defaults below are MLS Genie brand and  */
/* render if the installation has no brand override configured.                 */
:root {
	--ul-primary:   #1e88e5;
	--ul-dark:      #0d47a1;
	--ul-neutral:   #64748b;
	--ul-bg:        #f1f5f9;
	--ul-surface:   #ffffff;
	--ul-border:    #e2e8f0;
	--ul-text:      #1e293b;
	--ul-muted:     #64748b;
	--ul-error:     #dc2626;
	--ul-radius:    12px;
}

/* ── Layout ── */
html,body{min-height:100%;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

.ul-page{
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}

/* ── Card ── */
.ul-card{
	width:100%;
	max-width:400px;
	padding:32px 28px 28px;
	display:flex;
	flex-direction:column;
	gap:16px;
}

/* ── Logo / brand ── */
.ul-brand{
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.ul-brand__logo-link{display:block;line-height:0;}
.ul-brand__logo{width:280px;max-width:100%;object-fit:contain;display:block;}
.ul-brand__name{
	font-size:22px;
	font-weight:800;
	color:var(--ul-dark);
	letter-spacing:-.03em;
}
.ul-brand__sub{font-size:13px;color:var(--ul-muted);}

/* ── Error ── */
.ul-error{
	background:#fef2f2;
	border:1px solid #fecaca;
	border-radius:8px;
	padding:10px 14px;
	font-size:13px;
	color:var(--ul-error);
	display:none;
}
.ul-error.is-visible{display:block;}

/* ── Google button ── */
.ul-google-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:44px;
	background:#fff;
	border:1.5px solid var(--ul-border);
	border-radius:8px;
	font-size:14px;
	font-weight:600;
	color:var(--ul-text);
	cursor:pointer;
	text-decoration:none;
	transition:border-color .15s,box-shadow .15s;
}
.ul-google-btn:hover{
	border-color:var(--ul-primary);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--ul-primary) 15%, transparent);
}
.ul-google-btn svg{flex-shrink:0;}

/* ── Biometric button ── */
.ul-bio-btn{
	display:none;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	height:44px;
	background:var(--ul-dark);
	border:none;
	border-radius:8px;
	font-size:14px;
	font-weight:600;
	color:#fff;
	cursor:pointer;
	transition:filter .15s;
}
.ul-bio-btn:hover{filter:brightness(.9);}
.ul-bio-btn.is-visible{display:flex;}

/* ── Divider ── */
.ul-divider{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--ul-muted);
	font-size:12px;
}
.ul-divider::before,.ul-divider::after{
	content:'';
	flex:1;
	height:1px;
	background:var(--ul-border);
}

/* ── Form fields ── */
.ul-field{display:flex;flex-direction:column;gap:5px;}
.ul-field label{font-size:13px;font-weight:600;color:var(--ul-text);}
.ul-field input{
	height:42px;
	padding:0 12px;
	border:1.5px solid var(--ul-border);
	border-radius:8px;
	font-size:14px;
	font-family:inherit;
	color:var(--ul-text);
	background:#fff;
	transition:border-color .15s;
	width:100%;
}
.ul-field input:focus{
	outline:none;
	border-color:var(--ul-primary);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--ul-primary) 15%, transparent);
}

/* ── Password wrapper ── */
.ul-pw-wrap{position:relative;}
.ul-pw-wrap input{padding-right:44px;}
.ul-pw-toggle{
	position:absolute;
	right:0;top:0;bottom:0;
	width:42px;
	background:none;border:none;
	cursor:pointer;
	color:var(--ul-muted);
	display:flex;align-items:center;justify-content:center;
}

/* ── Submit ── */
.ul-submit{
	width:100%;
	height:44px;
	background:var(--ul-primary);
	color:#fff;
	border:none;
	border-radius:8px;
	font-size:15px;
	font-weight:700;
	font-family:inherit;
	cursor:pointer;
	transition:filter .15s;
	display:flex;align-items:center;justify-content:center;gap:8px;
}
.ul-submit:hover{filter:brightness(.9);}
.ul-submit:disabled{opacity:.6;pointer-events:none;}

/* ── Spinner ── */
.ul-spinner{
	width:18px;height:18px;
	border:2px solid rgba(255,255,255,.3);
	border-top-color:#fff;
	border-radius:50%;
	animation:ul-spin .6s linear infinite;
	display:none;
}
.ul-spinner.is-visible{display:block;}
@keyframes ul-spin{to{transform:rotate(360deg)}}

/* ── Forgot password link ── */
.ul-forgot{
	text-align:center;
	font-size:13px;
	margin-top:-4px;
}
.ul-forgot a{
	color:var(--ul-muted);
	text-decoration:none;
	transition:color .15s;
}
.ul-forgot a:hover{
	color:var(--ul-primary);
	text-decoration:underline;
}
.ul-forgot a:focus-visible{
	outline:2px solid var(--ul-primary);
	outline-offset:2px;
	border-radius:4px;
}

/* ── Footer ── */
.ul-footer{text-align:center;font-size:12px;color:var(--ul-muted);}

/* ── Mobile ── */
@media(max-width:440px){
	.ul-card{padding:28px 20px 24px;border-radius:16px;}
}
