/* InControl login (the shared admin login page, dressed up by index.php): frosted glass over the picked
   background, a transparent logo, and fields that glow in the background's colour while typing. */
body.admin-login main { min-height:100vh; min-height:100dvh; display:flex; justify-content:center; align-items:center; padding:24px 18px; box-sizing:border-box; background:none; }
.admin-login #login-wrap {
	position:relative; isolation:isolate; width:100%; max-width:390px; padding:30px 30px 20px; box-sizing:border-box;
	background:linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.03) 100%);
	border:1px solid rgba(255,255,255,.16); border-radius:34px;
	backdrop-filter:blur(30px) saturate(170%); -webkit-backdrop-filter:blur(30px) saturate(170%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.04), 0 40px 100px rgba(0,0,0,.5);
	animation:ctl-card-in .9s cubic-bezier(.16,1,.3,1) both;
}
/* a soft halo of the theme colour behind the card */
.admin-login #login-wrap::before {
	content:""; position:absolute; inset:-40px; z-index:-1; border-radius:60px; pointer-events:none;
	background:radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--ctl-accent) 38%, transparent), transparent 70%);
	filter:blur(20px);
}
@keyframes ctl-card-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }

.ctl-login-brand { display:flex; flex-direction:column; align-items:center; margin:-6px 0 22px; }
.ctl-login-logo { width:150px; height:150px; object-fit:contain; margin:-14px 0 -18px; filter:drop-shadow(0 8px 26px color-mix(in srgb, var(--ctl-accent) 55%, transparent)); }
.ctl-login-word { width:200px; height:auto; }

.admin-login #login { margin-top:0 !important; }
.admin-login #login .field { margin-bottom:14px; }
.admin-login #login input[type=email], .admin-login #login input[type=password], .admin-login #login input[type=text] {
	height:52px !important; padding:0 18px !important; border-radius:5px !important; font-size:16px !important;
	background:var(--ctl-field) !important; color:#fff !important;
	border:1px solid rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.25) !important;
	transition:border-color .25s, box-shadow .25s, background .25s !important;
}
.admin-login #login input::placeholder { color:rgba(255,255,255,.45); }
.admin-login #login input[type=email]:focus, .admin-login #login input[type=password]:focus, .admin-login #login input[type=text]:focus {
	outline:none !important; background:var(--ctl-field-on) !important;
	border-color:color-mix(in srgb, var(--ctl-accent) 80%, white 10%) !important;
	box-shadow:0 0 0 4px color-mix(in srgb, var(--ctl-accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--ctl-accent) 45%, transparent) !important;
}
.admin-login #login .eye { color:rgba(255,255,255,.55); }
/* The show / hide password eye: kui.form.css gives it a 40px box at the field's top - here it's the input's
   full 52px, with the icon centred in it */
.admin-login #login .field a.input.kft { top:0; bottom:auto; height:52px; width:44px; right:6px; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
.admin-login #login .field a.input.kft::before { line-height:1; }

/* Browser autofill (Chrome, Safari, Firefox) forces its own background colour, which page styles can't override - only
   paint over, with an inset shadow. So the fields are solid colours (--ctl-field, --ctl-field-on while typing, tinted by
   the background's colour) and autofilled fields are painted with exactly the same ones: no visible change.
   The standard :autofill and WebKit's -webkit-autofill sit in separate rules - a browser that doesn't know one drops the
   whole rule it's in. filter:none undoes older Firefox's autofill tint. */
.admin-login #login {
	--ctl-field:color-mix(in srgb, var(--ctl-accent) 12%, #1c1a22);
	--ctl-field-on:color-mix(in srgb, var(--ctl-accent) 16%, #24222c);
	--ctl-glow:0 0 0 4px color-mix(in srgb, var(--ctl-accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--ctl-accent) 45%, transparent);
}
.admin-login #login input:-webkit-autofill {
	-webkit-text-fill-color:#fff !important; caret-color:#fff; filter:none !important;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1000px var(--ctl-field) !important; transition:background-color 600000s 0s, color 600000s 0s !important;
}
.admin-login #login input:autofill {
	-webkit-text-fill-color:#fff !important; caret-color:#fff; filter:none !important;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1000px var(--ctl-field) !important; transition:background-color 600000s 0s, color 600000s 0s !important;
}
.admin-login #login input:-webkit-autofill:focus { box-shadow:inset 0 0 0 1000px var(--ctl-field-on), var(--ctl-glow) !important; }
.admin-login #login input:autofill:focus { box-shadow:inset 0 0 0 1000px var(--ctl-field-on), var(--ctl-glow) !important; }
/* Safari's suggested strong password (yellow-green) */
.admin-login #login input:-webkit-autofill-strong-password { -webkit-text-fill-color:#fff !important; box-shadow:inset 0 0 0 1000px var(--ctl-field) !important; }

.admin-login #loginBtn {
	height:52px; border-radius:5px !important; border:0 !important; font-size:16px; font-weight:600; letter-spacing:.02em; color:#fff;
	background:linear-gradient(180deg, color-mix(in srgb, var(--ctl-accent) 85%, white 15%), var(--ctl-accent)) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px color-mix(in srgb, var(--ctl-accent) 45%, transparent);
	transition:transform .15s, box-shadow .25s, filter .25s;
}
.admin-login #loginBtn:hover { filter:brightness(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 38px color-mix(in srgb, var(--ctl-accent) 60%, transparent); }
.admin-login #loginBtn:active { transform:scale(.98); }
.admin-login .chklabel { color:rgba(255,255,255,.72) !important; font-size:14px; }
.admin-login #pwdBtn { color:rgba(255,255,255,.55); background:none; border:0; font-size:13px; letter-spacing:.02em; }
.admin-login #pwdBtn:hover { color:#fff; }
.admin-login #aCreate { display:none; }
@media (prefers-reduced-motion:reduce) { .admin-login #login-wrap { animation:none; } }
/* Phones: the form is 85% of the screen's width (vw: #page_wrap shrinks to its content and the app template pads it), centred */
@media (max-width:699px) {
	body.admin-login main { padding-inline:0; }
	body.admin-login #page_wrap { width:100%; display:flex; justify-content:center; }
	.admin-login #login-wrap { width:85vw; max-width:none; }
}

/* Desktop widths only: the card 25% wider than it showed (266px -> 333px).
   #page_wrap shrinks to its content inside main's flex row, so it's given the full width to centre the card in. */
@media (min-width:1024px) {
	body.admin-login #page_wrap { width:100%; display:flex; justify-content:center; }
	.admin-login #login-wrap { width:333px; max-width:none; }
}