/*
 * Ather OS web pages (login, password reset): dark brand around a light card.
 * Palette: docs/engineering.md "Brand". Font: Arial throughout.
 */
:root {
	--ather-navy: #0a1628;
	--ather-card-edge: #1a3055;
	--ather-ink: #0f2a43;
	--ather-cyan: #22d3ee;
	--ather-cyan-deep: #06b6d4;
	--ather-muted: #b8c5d6;
	--ather-caption: #7a8aa0;
	--ather-font: Arial, "Helvetica Neue", Helvetica, "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}

/* Arial throughout (brand rule). Frappe sets Inter on many utility classes, hence !important. */
body,
body *:not(code):not(pre):not(kbd) {
	font-family: var(--ather-font) !important;
}

body[data-path="login"],
body[data-path="update-password"] {
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, 0.18), transparent 60%),
		radial-gradient(900px 500px at -10% 110%, rgba(139, 92, 246, 0.12), transparent 60%),
		var(--ather-navy);
	min-height: 100vh;
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="update-password"] .navbar,
body[data-path="update-password"] .web-footer {
	display: none;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	background: #fff;
	border: 1px solid var(--ather-card-edge);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	max-width: 400px;
	margin: 12vh auto 24px;
	padding: 32px 28px;
}

body[data-path="login"] .page-card .page-card-head .app-logo {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* "Ather OS" wordmark under the card. */
body[data-path="login"] .page-card::after {
	content: "Ather OS · by Ather-AI";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -32px;
	text-align: center;
	color: var(--ather-caption);
	font-size: 12px;
	letter-spacing: 0.04em;
}
body[data-path="login"] .page-card {
	position: relative;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .text-3xl-bold {
	color: var(--ather-ink);
}

/* Primary action (and the Google button, the main way in): cyan with navy text, contrast > 9:1. */
body .page-card .es-button[data-variant="solid"],
body .page-card .btn-google {
	background: var(--ather-cyan);
	border-color: var(--ather-cyan);
	color: var(--ather-navy);
	font-weight: 700;
	height: 40px;
}
body .page-card .es-button[data-variant="solid"]:hover,
body .page-card .btn-google:hover {
	background: var(--ather-cyan-deep);
	border-color: var(--ather-cyan-deep);
	color: var(--ather-navy);
}
/* Secondary options: outlined. */
body .page-card .btn-login-option:not(.btn-google) {
	background: transparent;
	border: 1px solid #2a3f60;
	color: var(--ather-ink);
}

body[data-path="login"] .form-control:focus {
	border-color: var(--ather-cyan-deep);
	box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.35);
}

body[data-path="login"] .ather-tagline {
	color: var(--ather-muted);
	text-align: center;
	font-size: 12px;
	margin-top: 8px;
}

/* Phones: keep the card compact (Frappe stretches it to full height). */
@media (max-width: 480px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card {
		height: auto !important;
		min-height: 0 !important;
		flex: none !important;
		box-sizing: border-box;
		width: 100% !important;
		margin: 14vh 0 48px !important;
		padding: 28px 20px;
	}
	/* Frappe's container already gives 24px gutters on each side. */
	body[data-path="login"] main.container,
	body[data-path="update-password"] main.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}