/* App template (inc/shared/app) - the login / reset look built in Koder, the splash overlay, the DEV ribbon */

/* The colors are the site theme's Login tab (Koder: Apps > Theme > Login, --th-login-*); the fallbacks are Koder's */
body.app-login {
	--app-bg:     var(--th-login-bg, #020919);
	--app-text:   var(--th-login-text, #e6f3ff);
	--app-muted:  var(--th-login-muted, #8aa4c4);
	--app-line:   var(--th-login-line, rgba(70, 186, 255, .28));
	--app-cyan:   var(--th-login-accent, #4edaff);
	--app-glow:   0 0 22px var(--th-login-glow, rgba(78, 218, 255, .25));
	--app-btn-ring: var(--th-login-btn-ring, rgba(78, 218, 255, .18));
	margin: 0;
	min-height: 100dvh;
	overflow: hidden;
	background: var(--app-bg);
	color: var(--app-text);
	color-scheme: dark;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", sans-serif;
}
/* fixed, so it stays out of the main grid */
.app-login-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 65% 25%, var(--th-login-sky-1, #07549a), var(--th-login-sky-2, #041a38) 50%, var(--app-bg)); }
body.app-login main.app-login-main {
	position: relative;
	z-index: 1;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
	margin: 0;
	background: transparent;
}
.app-login-card {
	width: min(380px, 100%);
	box-sizing: border-box;
	padding: 34px 30px 26px;
	border-radius: 18px;
	background: var(--th-login-card, rgba(6, 20, 46, .72));
	box-shadow: 0 0 0 1px var(--app-line), 0 40px 90px -30px rgba(0,0,0,.95), var(--app-glow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	text-align: center;
}
.app-login-mark { display: block; margin: 0 auto; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 22px var(--th-login-logo-glow, #007bff30)); }
.app-login-card h1 { margin: 2px 0 0; font-family: inherit; font-style: normal; font-size: 34px; font-weight: 650; letter-spacing: -.05em; line-height: 1.12; color: var(--th-login-title, #f5fbff); text-transform: none; }
/* the site's own form and button colors give way to the template's */
body.app-login form.kui.dark input { background-color: var(--th-login-input, rgba(4, 16, 38, .8)); color: var(--app-text); }
/* the theme's field and checkbox colors (Forms tab) - kui sets them on the dark form itself, and the login body isn't .site-theme */
body.app-login form.kui.dark {
	--input-border: var(--th-input-border, #0f2a4d); --border-focus: var(--th-input-focus, #4f7ee6); --input-color: var(--th-input-text, #e6f3ffeb);
	--input-placeholder: var(--th-placeholder, #8aa4c4aa); --label-color: var(--th-label, #8aa4c4);
	--selection-background: color-mix(in srgb, var(--th-input-focus, #4f7ee6) 80%, transparent);
	--chk-background: var(--th-chk-bg, #06112a); --chk-background-checked: var(--th-chk-on, #3788ef); --chk-border: var(--th-chk-border, #2a4a73);
	--chk-border-hover: var(--app-cyan); --chk-label: var(--app-text);
}
/* the gradient's top color is a registered property, so hovering in and out fades; the shadow lists match so they fade too */
@property --app-btn-top { syntax: '<color>'; inherits: false; initial-value: #3d95ff; }
body.app-login .btn-primary { --app-btn-top: var(--th-login-btn-1, #3d95ff); background: linear-gradient(180deg, var(--app-btn-top), var(--th-login-btn-2, #1f5fd6)); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px var(--app-btn-ring), 0 0 0 transparent; transition: --app-btn-top .5s ease-in-out, box-shadow .5s ease-in-out; }
body.app-login .btn-primary:is(:focus,:active) { --app-btn-top: var(--th-login-btn-hover, #52a6ff); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 4px var(--app-btn-ring), 0 0 0 transparent; }
@media (hover: hover) { body.app-login .btn-primary:hover { --app-btn-top: var(--th-login-btn-hover, #52a6ff); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 4px var(--app-btn-ring), var(--app-glow); } }
.app-login-version { margin: 2px 0 0; font-size: 11px; letter-spacing: .08em; color: var(--app-muted); }
.app-reset-sub { margin: 6px 0 0; font-size: 13px; color: var(--app-muted); }
.app-reset-sub b { color: var(--app-text); font-weight: 500; }
.app-login-card form { text-align: left; margin-top: 22px; }
.app-login-card #login-chk { display: flex; justify-content: center; }
.app-login-card #pwdBtn { color: var(--app-muted); border: 1px solid var(--app-line); border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-inline: auto; padding: 0 18px; height: 34px; font-family: inherit; font-size: 13px; line-height: 1; box-sizing: border-box; transition: color .5s ease-in-out, border-color .5s ease-in-out, background .5s ease-in-out, box-shadow .5s ease-in-out; }
.app-login-card #pwdBtn:hover, .app-login-card #pwdBtn:focus-visible { color: #fff; border-color: var(--app-cyan); background: color-mix(in srgb, var(--app-cyan) 12%, transparent); box-shadow: var(--app-glow); }

/* Splash over the login, for sites without the PWA template (that one draws its own) */
#app-splash { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 9999; background: var(--app-bg, #020919); transition: opacity .65s ease; }
#app-splash.out { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #app-splash { transition: none; } }

/* DEV ribbon across the bottom-right corner (app_dev_ribbon(), dev only) */
.app-dev-ribbon {
	position: fixed;
	right: -48px;
	bottom: 22px;
	z-index: 2147483000;
	width: 180px;
	transform: rotate(-45deg);
	pointer-events: none;
	text-align: center;
	font: 800 12px/26px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: .32em;
	text-indent: .32em;
	color: #fff;
	background: linear-gradient(180deg, #ef4444, #b91c1c);
	border-top: 1px solid rgba(255,255,255,.35);
	border-bottom: 1px solid rgba(0,0,0,.25);
	box-shadow: 0 4px 14px rgba(185, 28, 28, .45), 0 1px 3px rgba(0,0,0,.4);
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
@media print { .app-dev-ribbon { display: none; } }