/* Alfa Poly Tech Industries — ERP login.
   Palette and type are the APTI brand system: navy #082D71, red #B30E0F,
   Archivo and IBM Plex Mono. */

:root {
	--apti-navy: #082D71;
	--apti-navy-deep: #041A44;
	--apti-red: #B30E0F;
	--apti-paper: #FDFCFC;
	--apti-ink: #10131A;
	--apti-muted: #5C6473;
	--apti-rule: #DBDFE8;

	/* Swap this one line to drop the shop-floor photograph in. */
	--apti-panel-image: none;
}

/* One screen, no page scroll. The form column scrolls inside itself if a
   taller view (forgot password, email link) needs the room. */
html, body {
	height: 100%;
	overflow: hidden;
	/* iOS standalone reports a stale 100vh; this is the reliable fallback. */
	min-height: -webkit-fill-available;
}

body {
	margin: 0;
	background: var(--apti-paper);
	font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--apti-ink);
}

/* frappe nests the page in wrappers built for a centred card — .page-content-wrapper
   alone adds 60px of padding. Rather than unpick each one, take the layout out of
   the flow entirely. */
body > div,
.page-content-wrapper,
.page_content,
main.container,
main.page-content,
.container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.navbar, footer, .web-footer, .page-head { display: none !important; }

.apti {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 52fr 48fr;
	overflow: hidden;
	background: var(--apti-paper);
}

/* ── Brand panel ──────────────────────────────────────────────────────── */

.apti-brand {
	position: relative;
	display: flex;
	align-items: stretch;
	background-color: var(--apti-navy-deep);
	background-image: var(--apti-panel-image);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Navy over the photograph, heavy enough that white type stays legible on any
   frame. Without a photo this reads as a plain navy field. */
.apti-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgba(8, 45, 113, .82) 0%, rgba(4, 26, 68, .94) 100%);
}

/* The one red in the design. */
.apti-brand::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--apti-red);
}

.apti-brand-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.25rem;
	padding: 4rem clamp(2.5rem, 5vw, 5rem);
	width: 100%;
}

/* The logo carries the identity — no wordmark text beside it.
   It is navy outlined letterforms plus a red-ruled box, so it needs a light
   ground: reversed to white the hollow letters collapse into a blob, and set
   straight onto navy the outlines vanish. Hence the plate. */
.apti-plate {
	display: inline-flex;
	align-self: flex-start;
	padding: 1.1rem 1.4rem;
	background: var(--apti-paper);
	border-radius: 4px;
	box-shadow: 0 18px 40px rgba(4, 16, 44, .28);
}

.apti-mark {
	width: clamp(200px, 19vw, 280px);
	height: auto;
	display: block;
}

.apti-identity p {
	margin: 0;
	max-width: 26ch;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, .82);
}

/* Signature: the date every record filed today will carry. */
.apti-date {
	position: absolute;
	left: clamp(2.5rem, 5vw, 5rem);
	right: clamp(2.5rem, 5vw, 5rem);
	bottom: 2.75rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.apti-date-label {
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.apti-date-value {
	font-size: 1.28rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: #fff;
}

.apti-date-time {
	font-size: .8rem;
	color: rgba(255, 255, 255, .55);
}

/* ── Form panel ───────────────────────────────────────────────────────── */

.apti-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	background: var(--apti-paper);
	overflow-y: auto;
}

.apti-panel-inner {
	width: 100%;
	max-width: 380px;
}

/* frappe sizes each auth section to the full viewport so its own centred-card
   layout works. Inside our column that makes the section 844px tall on a phone
   and pushes everything after it — including the footer — below the fold. */
.apti-panel .for-login,
.apti-panel .for-signup,
.apti-panel .for-forgot,
.apti-panel .for-email-login,
.apti-panel section {
	height: auto !important;
	min-height: 0 !important;
	padding: 0;
	margin: 0;
}

/* Never override the hidden state: frappe's script shows exactly one of these
   panes at a time, and a stray display rule reveals all three at once. */
.apti-panel section[style*="display: none"],
.apti-panel .hide,
.apti-panel .hidden {
	display: none !important;
}

/* Strip frappe's card chrome — it already sits in a column of its own. */
.apti-panel .page-card,
.apti-panel .login-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	/* frappe gives the card min-height:100vh so it can centre itself on a bare
	   page. In our column that made the card a full screen tall and pushed the
	   footer below the fold on phones. */
	min-height: 0 !important;
	height: auto !important;
}

.apti-panel .page-card-head { margin-bottom: 2rem; }
.apti-panel .page-card-head .app-logo { display: none; }   /* the panel carries the logo */

.apti-panel .page-card-head h4 {
	margin: 0 0 .4rem;
	font-family: "Archivo", sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	color: var(--apti-ink);
}

.apti-panel .page-card-subtitle,
.apti-panel .page-card-head p {
	margin: 0;
	font-size: .94rem;
	color: var(--apti-muted);
}

.apti-panel label,
.apti-panel .control-label {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--apti-muted);
	margin-bottom: .4rem;
}

.apti-panel .form-control,
.apti-panel input[type="text"],
.apti-panel input[type="email"],
.apti-panel input[type="password"] {
	height: 46px;
	padding: 0 .9rem;
	font-size: .98rem;
	color: var(--apti-ink);
	background: #fff;
	border: 1px solid var(--apti-rule);
	border-radius: 6px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.apti-panel .form-control:focus,
.apti-panel input:focus {
	outline: none;
	border-color: var(--apti-navy);
	box-shadow: 0 0 0 3px rgba(8, 45, 113, .14);
}

.apti-panel .btn.btn-login,
.apti-panel .btn.btn-primary,
.apti-panel button.btn-login {
	height: 46px;
	margin-top: .4rem;
	font-family: "Archivo", sans-serif;
	font-size: .96rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	background: var(--apti-navy) !important;
	border: 1px solid var(--apti-navy) !important;
	color: #fff !important;
	border-radius: 6px;
	transition: background .15s ease;
}

.apti-panel .btn.btn-login:hover,
.apti-panel .btn.btn-primary:hover {
	background: var(--apti-navy-deep) !important;
	border-color: var(--apti-navy-deep) !important;
}

.apti-panel .btn-default:not(.btn-login):not(.btn-primary) {
	height: 44px;
	font-weight: 500;
	color: var(--apti-navy);
	background: #fff;
	border: 1px solid var(--apti-rule);
	border-radius: 6px;
}

.apti-panel a { color: var(--apti-navy); }
.apti-panel a:hover { color: var(--apti-red); }

.apti-panel .forgot-password-message,
.apti-panel .sign-up-message {
	margin-top: 1.4rem;
	font-size: .88rem;
	color: var(--apti-muted);
}

.apti-foot {
	margin: 3rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--apti-rule);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--apti-muted);
}

/* Keyboard users must always be able to see where they are. */
.apti a:focus-visible,
.apti button:focus-visible,
.apti input:focus-visible {
	outline: 2px solid var(--apti-navy);
	outline-offset: 2px;
}

/* ── Shop floor: phones and tablets ───────────────────────────────────── */

@media (max-width: 900px) {
	/* Stacked: let the page scroll again, or an on-screen keyboard can cover
	   the password field with no way to reach it. */
	html, body { overflow: auto; height: auto; }

	.apti {
		position: static;
		grid-template-columns: 1fr;
		/* band hugs its content, the form takes what is left — otherwise the
		   grid shares the spare height and the band grows a dead navy gap. */
		grid-template-rows: auto 1fr;
		height: auto;
		min-height: 100dvh;
		overflow: visible;
	}

	/* absolute placement is a desktop device; here it collided with the logo */
	.apti-date {
		position: static;
		left: auto; right: auto; bottom: auto;
		padding-top: 0;
		border-top: 0;
	}
	.apti-panel { overflow-y: visible; }

	.apti-brand { min-height: 0; }

	.apti-brand-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		padding: 1.75rem 1.5rem;
	}

	.apti-plate { padding: .7rem .85rem; }
	.apti-mark { width: 118px; }
	.apti-identity p { display: none; }

	.apti-date {
		align-items: flex-end;
		padding-top: 0;
		border-top: 0;
		text-align: right;
	}
	.apti-date-label { font-size: .58rem; }
	.apti-date-value { font-size: .92rem; }
	.apti-date-time { font-size: .68rem; }

	/* Clear the notch, the status bar and the home indicator when installed
	   to the home screen. env() is 0 in a normal browser tab. */
	.apti-brand-inner {
		padding-top: calc(1.75rem + env(safe-area-inset-top));
		padding-left: calc(1.5rem + env(safe-area-inset-left));
		padding-right: calc(1.5rem + env(safe-area-inset-right));
	}

	.apti-panel {
		align-items: flex-start;
		padding: 2.25rem calc(1.5rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
	}
	.apti-foot { margin-top: 2rem; }

	/* Installed as a PWA there is no browser chrome, so the brand band can be
	   shorter and give the form more of the screen. */
	@media (display-mode: standalone) {
		.apti-brand { min-height: 150px; }
	}
}

@media (max-width: 520px) {
	.apti-identity { display: none; }
	.apti-brand { min-height: 140px; }
	.apti-brand-inner { justify-content: space-between; }
}

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