/* =====================================================================
   LoginShell - shared look for every login and login-adjacent page.
   Temporary live copy: the same block is mirrored at the end of
   css/style.css (sandbox). Until style.css is promoted, pages link THIS
   file. XpertsPM keeps its own identical copy at
   xpertspm.com/wwwroot/css/LoginShell_tmp.css (separate site root) - edit
   all three together. Classes only - no id selectors, no inline styles in
   the markup, and no Tailwind needed on the page.

   Design source: login.cfm (white page, logo on top, #888888 card, white
   text, gray inputs, #f37021 button). Values are login.cfm's Tailwind 1.2
   classes written out (text-xs/sm, py-2 px-4, rounded, gray-100/200/700,
   red-500 focus, green/yellow/red-100/300/800 alerts).

   Markup:
   <body class="LoginShell">
     <div class="LoginShell-page">
       <img class="LoginShell-logo" src="new_logo.png" alt="Xperts">
       <div class="LoginShell-card">
         <h1 class="LoginShell-title">Login</h1>
         <div class="LoginShell-alert LoginShell-alert--error">...</div>   (--success / --warning)
         <p class="LoginShell-text">...</p>
         <form class="LoginShell-form">
           <div class="LoginShell-field">
             <label class="LoginShell-label">Email</label>
             <input class="LoginShell-input">                          (--code for OTP)
           </div>
           <div class="LoginShell-actions"><button class="LoginShell-btn">Submit</button></div>
         </form>
         <div class="LoginShell-links"><a class="LoginShell-link">...</a></div>
         <p class="LoginShell-note">...</p>
       </div>
     </div>
   </body>
   ===================================================================== */
.LoginShell{
	margin:0;
	background-color:#ffffff;
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
	line-height:1.5;
	-webkit-text-size-adjust:100%;
}
.LoginShell *,
.LoginShell *::before,
.LoginShell *::after{ box-sizing:border-box; }

.LoginShell-page{
	min-height:100vh;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:1rem 0 2rem;
}

/* login.cfm: 250px logo in a p-4 header row */
.LoginShell-logo{
	display:block;
	width:250px;
	max-width:70vw;
	height:auto;
	margin:1rem auto;
}

/* login.cfm: p-4 rounded-lg #888888 card; full width (mx-5) on phones,
   md:w-6/12 of a md:w-3/4 row (= 37.5% of the page) with md:mt-10 above */
.LoginShell-card{
	width:calc(100% - 2.5rem);
	margin:1rem 1.25rem 0;
	padding:1rem;
	border-radius:0.5rem;
	background-color:#888888;
	color:#ffffff;
	display:flex;
	flex-direction:column;
	align-items:center;
}
@media (min-width:768px){
	.LoginShell-card{
		width:37.5%;
		margin-top:3.5rem;
	}
}
.LoginShell-card > *{ width:100%; max-width:32rem; }

.LoginShell-title{
	margin:0;
	padding:0;
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
}
.LoginShell-text{
	margin:0.5rem 0 0.75rem;
	padding:0 0.75rem;
	font-size:0.875rem;
}
.LoginShell-text strong{ font-weight:700; }

.LoginShell-form{ margin:0; }

.LoginShell-field{
	margin:0.75rem 0 0;
	padding:0 0.75rem;
}
.LoginShell-field + .LoginShell-field{ margin-top:0.25rem; }

.LoginShell-label{
	display:block;
	margin-bottom:0.25rem;
	font-size:0.75rem;
	font-weight:400;
	letter-spacing:0.025em;
	color:#ffffff;
}

.LoginShell-input{
	display:block;
	width:100%;
	margin:0;
	padding:0.5rem 1rem;
	font-family:inherit;
	font-size:0.875rem;
	font-weight:400;
	line-height:1.25;
	color:#4a5568;
	background-color:#f7fafc;
	border:1px solid #edf2f7;
	border-radius:0.25rem;
	-webkit-appearance:none;
	appearance:none;
}
.LoginShell-input:focus{
	outline:none;
	background-color:#ffffff;
	border-color:#f56565;
}
.LoginShell-input::placeholder{ color:#a0aec0; }
/* One-time code: same box, centered digits */
.LoginShell-input--code{
	max-width:14rem;
	margin:0 auto;
	text-align:center;
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:0.1em;
}

/* Password field with the show/hide eye button (login.cfm) */
.LoginShell-pwd{ position:relative; }
.LoginShell-pwd .LoginShell-input{ padding-right:2.25rem; }
.LoginShell-pwd-toggle{
	position:absolute;
	right:0.6rem;
	top:50%;
	transform:translateY(-50%);
	background:none;
	border:0;
	padding:0;
	line-height:0;
	cursor:pointer;
	color:#718096;
}
.LoginShell-pwd-toggle:hover{ color:#2d3748; }
/* Caps Lock warning under a password field; JS toggles the hidden attribute */
.LoginShell-capswarn{
	margin:0.25rem 0 0;
	padding:0.25rem 0.5rem;
	font-size:0.75rem;
	font-weight:500;
	color:#744210;
	background-color:#fefcbf;
	border-radius:0.25rem;
}
.LoginShell-capswarn[hidden]{ display:none; }
.LoginShell input[type="password"]::-ms-reveal,
.LoginShell input[type="password"]::-ms-clear{ display:none; }

.LoginShell-actions{
	padding:1rem 0.75rem 0;
	margin-bottom:0.25rem;
}

.LoginShell-btn{
	display:block;
	width:100%;
	margin:0;
	padding:0.5rem;
	font-family:inherit;
	font-size:0.875rem;
	font-weight:400;
	line-height:1.5;
	color:#ffffff;
	background-color:#f37021;
	border:0;
	border-radius:0.25rem;
	cursor:pointer;
	text-align:center;
	text-decoration:none;
}
.LoginShell-btn:hover{
	background-color:#ffa366;
	color:#000000;
}
.LoginShell-btn:disabled{
	opacity:0.7;
	cursor:default;
}

.LoginShell-links{
	margin-top:0.5rem;
	padding:0 0.75rem;
	text-align:center;
}
.LoginShell-links > * + *{ margin-top:0.25rem; }
.LoginShell-links form{ margin:0; }
.LoginShell-link{
	font-family:inherit;
	font-size:0.75rem;
	color:#edf2f7;
	text-decoration:underline;
	background:none;
	border:0;
	padding:0;
	cursor:pointer;
}
.LoginShell-link:hover{ color:#ffffff; }

.LoginShell-note{
	margin:0.75rem 0 0;
	padding:0 0.75rem;
	font-size:0.75rem;
	color:#edf2f7;
	text-align:center;
}

.LoginShell-alert{
	margin:0 0 1rem;
	padding:0.75rem 1rem;
	font-size:0.875rem;
	border:1px solid;
	border-radius:0.25rem;
}
.LoginShell-alert--success{ background-color:#f0fff4; border-color:#9ae6b4; color:#276749; }
.LoginShell-alert--warning{ background-color:#fffff0; border-color:#faf089; color:#975a16; }
.LoginShell-alert--error  { background-color:#fff5f5; border-color:#feb2b2; color:#9b2c2c; }

.auto-grid{
	--min-column-size: 15.563rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: 
		repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 19.698rem));
}