/* PropNex CRM web — Material 3, roles copied verbatim from the android app's Color.kt (seed #113CF9) */

*{box-sizing:border-box}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}

/* the roles, BrandLight and BrandDark from Color.kt, seed #113CF9 */
:root{
	/* the device decides until the toggle pins one, and it drives the caret, selection, autofill and scrollbars too */
	color-scheme:light dark;

	--md-primary:light-dark(#1442fe,#acc7ff); --md-on-primary:light-dark(#ffffff,#0b267e);
	--md-primary-container:light-dark(#d6e3fe,#1f4098); --md-on-primary-container:light-dark(#02006d,#d5e3ff);
	--md-secondary:light-dark(#4f5e7e,#85d2e5); --md-on-secondary:light-dark(#ffffff,#003640);
	--md-secondary-container:light-dark(#cdd8ee,#004e5c); --md-on-secondary-container:light-dark(#0f1b35,#a7eeff);
	--md-error:light-dark(#b91e16,#ffb4a8); --md-on-error:light-dark(#ffffff,#690000);
	--md-error-container:light-dark(#ffdad4,#930000); --md-on-error-container:light-dark(#410000,#ffdad4);
	--md-background:light-dark(#eceef2,#1d2025); --md-on-background:light-dark(#1a1c1e,#dfe3eb);
	--md-surface:light-dark(#f7f9fe,#111319); --md-on-surface:light-dark(#1a1c1e,#dfe3eb);
	--md-surface-variant:light-dark(#dee3ec,#404755); --md-on-surface-variant:light-dark(#43474f,#bec7d8);
	--md-outline:light-dark(#737780,#8991a1); --md-outline-variant:light-dark(#c2c7d0,#404755);
	--md-surface-container-lowest:light-dark(#ffffff,#0c0e13); --md-surface-container-low:light-dark(#f2f4f8,#191c21);
	--md-surface-container:light-dark(#eceef2,#1d2025); --md-surface-container-high:light-dark(#e6e8ec,#272a30);
	--md-surface-container-highest:light-dark(#e0e2e7,#32353b);

	--md-font:"Roboto","Helvetica Neue",system-ui,Arial,sans-serif;

	/* shape scale */
	--md-corner-xs:4px; --md-corner-sm:8px; --md-corner-md:12px;
	--md-corner-lg:16px; --md-corner-xl:28px; --md-corner-full:100px;

	/* elevation */
	--md-elevation-1:0 1px 2px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
	--md-elevation-2:0 1px 2px 0 rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
}

/* the toggle pins a scheme, system stores nothing and leaves the device to decide */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* body medium */
body{
	margin:0;min-height:100vh;font-family:var(--md-font);
	font-size:14px;line-height:20px;letter-spacing:.25px;
	background:var(--md-background);color:var(--md-on-background);
	-webkit-font-smoothing:antialiased;
}

/* label large */
.eyebrow{
	font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;
	color:var(--md-primary);
}

/* ============================== SPLASH ============================== */

/* pinned dark in both schemes, the logo's white strokes need a dark ground. only the splash
   pins - the rest of the login flow follows the device */
.splash{
	color-scheme:dark;

	--md-primary:#acc7ff; --md-on-primary:#0b267e;
	--md-on-surface:#dfe3eb; --md-on-surface-variant:#bec7d8;

	min-height:100vh;padding:24px 24px 32px;
	background:#1c1c1e;color:var(--md-on-surface);
	display:flex;flex-direction:column;
}

.splash .brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
/* headline large */
.splash .brand-name{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.02em}
/* headline small */
.splash .tagline{font-size:24px;line-height:32px;letter-spacing:-.01em;color:var(--md-on-surface-variant);text-align:center}

/* the sharp mark over a blurred copy of itself, the blur is the halo */
.splash .logo{position:relative;width:min(300px,66vw);aspect-ratio:189/167}
.splash .logo img{position:absolute;inset:0;width:100%;height:100%}
.splash .logo .glow{filter:blur(16px);animation:glow 3.6s ease-in-out infinite}
@keyframes glow{
	0%,100%{opacity:.6;transform:scale(.99)}
	50%{opacity:1;transform:scale(1.02)}
}

.splash .actions{width:min(100%,420px);margin:48px auto 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.splash .primary{margin-top:0}
/* text button with the support icon */
.splash .support{
	display:flex;align-items:center;gap:8px;margin-top:64px;text-decoration:none;
	font-size:14px;line-height:20px;letter-spacing:.25px;color:var(--md-on-surface-variant);
}
.splash .support svg{width:18px;height:18px}

/* ============================== LOGIN FLOW ============================== */

/* the same page fill the apps give the login screens */
.login{min-height:100vh;background:var(--md-surface-container-low)}
.login .topbar{height:56px;background:transparent}

.login-page{max-width:404px;margin:0 auto;padding:8px 24px 40px}
/* headline large */
.login-page h1{font-size:32px;line-height:40px;font-weight:400;letter-spacing:0;margin-bottom:24px}
.login-page .hint{margin:-12px 0 24px}
.login-page .primary{margin-top:24px}
.login-page .link{margin-top:8px}

/* icon button */
.iconbutton{
	display:flex;align-items:center;justify-content:center;text-decoration:none;
	appearance:none;border:0;padding:0;background:none;cursor:pointer;
	width:40px;height:40px;border-radius:var(--md-corner-full);
	color:var(--md-on-surface);transition:background-color .15s;
}
.iconbutton:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.iconbutton:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
.iconbutton svg{width:24px;height:24px;fill:currentColor}

/* the bar's icon buttons hug its edges */
.topbar > .iconbutton:first-child{margin-left:-8px}
.topbar .theme-toggle{margin-right:-8px}

/* one icon per mode, system until the toggle pins one */
.theme-toggle svg{display:none}
.theme-toggle .i-system{display:block}
:root[data-theme="light"] .theme-toggle .i-system{display:none}
:root[data-theme="light"] .theme-toggle .i-light{display:block}
:root[data-theme="dark"] .theme-toggle .i-system{display:none}
:root[data-theme="dark"] .theme-toggle .i-dark{display:block}

/* body small, the field label sits above the box */
.pane label{
	display:block;font-size:12px;line-height:16px;letter-spacing:.4px;
	color:var(--md-on-surface-variant);margin:0 0 6px;
}
.pane label + input{margin-bottom:20px}

/* outlined text field */
.pane input{
	width:100%;height:56px;font-family:var(--md-font);font-size:16px;line-height:24px;letter-spacing:.5px;
	color:var(--md-on-surface);background:transparent;
	border:1px solid var(--md-outline);border-radius:var(--md-corner-xs);padding:0 16px;
	transition:border-color .15s,box-shadow .15s;
}
.pane input:hover{border-color:var(--md-on-surface)}
/* focused outline thickens to 2px without moving the box */
.pane input:focus{outline:none;border-color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary)}

/* filled button */
.primary{
	display:block;width:100%;appearance:none;border:0;cursor:pointer;margin-top:8px;
	height:40px;padding:0 24px;border-radius:var(--md-corner-full);
	background:var(--md-primary);color:var(--md-on-primary);
	font-family:var(--md-font);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;
	transition:background-color .15s,box-shadow .15s;
}
/* hover state layer, on-primary at 8% */
.primary:hover{background:color-mix(in srgb,var(--md-on-primary) 8%,var(--md-primary));box-shadow:var(--md-elevation-1)}
/* pressed, 10% and back down to level 0 */
.primary:active{background:color-mix(in srgb,var(--md-on-primary) 10%,var(--md-primary));box-shadow:none}
.primary:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}

/* text button */
.link{
	appearance:none;border:0;background:none;cursor:pointer;
	height:40px;padding:0 12px;border-radius:var(--md-corner-full);
	font-family:var(--md-font);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;
	color:var(--md-primary);transition:background-color .15s;
}
.link:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}
.link:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}

/* the same two buttons as links */
a.primary,a.link{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* error container */
.error{
	margin-top:20px;background:var(--md-error-container);color:var(--md-on-error-container);
	border-radius:var(--md-corner-md);padding:12px 16px;
	font-size:14px;line-height:20px;letter-spacing:.25px;
}

/* body medium, muted */
.hint{font-size:14px;line-height:20px;letter-spacing:.25px;color:var(--md-on-surface-variant)}

/* ============================== SHELL ============================== */

/* small top app bar, flat at rest */
.topbar{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	height:64px;padding:0 16px;
	background:var(--md-surface);color:var(--md-on-surface);
}
/* label large */
.topbar .agent{
	display:flex;align-items:center;gap:8px;
	font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;color:var(--md-on-surface-variant);
}

.page{max-width:960px;margin:0 auto;padding:32px 24px}
/* headline medium */
.page h1{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0;margin-bottom:4px}

@media (prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
}