/*
 * USPIRE ERP — login and website pages (web_include_css).
 * BRAND_UI.md: login page shows the full-colour badge at >= 120 px on White or Mist,
 * clear space about 18% of the logo width; body Nunito Sans, headings Poppins.
 */

:root:not([data-theme="dark"]) {
	--font-stack: var(--usp-font-body);
	--btn-primary: var(--usp-navy);
	--primary: var(--usp-navy);
	--focus-default: 0 0 0 2px var(--usp-gold);
}

body {
	font-family: var(--usp-font-body);
	color: var(--usp-ink);
}

body[data-path="login"],
body[data-path="update-password"] {
	background-color: var(--usp-mist);
}

/* Dark theme: navy surfaces become the dark background; white headings; gold accent only. */
[data-theme="dark"] body[data-path="login"],
[data-theme="dark"] body[data-path="update-password"] {
	background-color: #0f0d33;
}
/* !important: login.bundle.css loads after web_include_css and paints the card grey. */
[data-theme="dark"] body .page-card {
	background-color: var(--usp-navy) !important;
	border-color: #2b2768 !important;
}
[data-theme="dark"] .page-card-head-text h4,
[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
	color: #ffffff !important;
}
[data-theme="dark"] .es-button[data-variant="solid"]:not([data-theme="red"]) {
	--bt-solid-bg: var(--usp-navy-2);
	--bt-solid-bg-hover: #2e2a75;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--usp-font-heading);
}
:root:not([data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--usp-navy);
}

/* Login card: white on Mist, navy hairline */
.page-card {
	background-color: var(--usp-white);
	border: 1px solid var(--usp-line);
	border-radius: 12px;
}

/* Full-colour badge, 120 px, centred, with ~18% clear space.
 * The desk keeps the tiny badge (Website Settings app_logo); only here the
 * primary file is shown. The image is never cropped, recoloured or stretched. */
.page-card-head {
	align-items: center !important;
	text-align: center !important;
}
/* !important: login.bundle.css is loaded after web_include_css and caps the logo at 32 px. */
body .page-card .page-card-head img.app-logo {
	content: url("/assets/uspire/images/uspire-logo-primary.png");
	width: 120px !important;
	height: 120px !important;
	max-height: none !important;
	max-width: none !important;
	object-fit: contain;
	margin: 22px auto;
}
.page-card-head-text h4 {
	font-family: var(--usp-font-heading);
}
:root:not([data-theme="dark"]) .page-card-head-text h4 {
	color: var(--usp-navy) !important;
}

/* Primary buttons: navy, white Poppins Medium text, Navy 2 on hover */
.btn {
	font-family: var(--usp-font-heading);
	font-weight: 500;
}
.btn.btn-primary,
.btn.btn-primary:focus {
	background-color: var(--usp-navy);
	border-color: var(--usp-navy);
	color: var(--usp-white);
}
.btn.btn-primary:hover,
.btn.btn-primary:active {
	background-color: var(--usp-navy-2) !important;
	color: var(--usp-white) !important;
}

a {
	color: var(--usp-navy);
}

/* Phone (360 px): keep 16 px side gutters, no horizontal scroll */
@media (max-width: 400px) {
	.page-card {
		margin-left: 16px;
		margin-right: 16px;
		width: auto;
	}
}