/* esevo360 website surfaces: login and the access-state pages, the customer and participant
 * portal (Esevo Portal module), web forms and any Frappe website page. Loaded with
 * web_include_css after Frappe's website CSS. Requires e360-tokens.css. Style only: no markup
 * or auth behaviour is changed here. */

:root {
	--font-stack: var(--e360-font-sans);
	--focus-default: var(--e360-focus-ring);
	--focus-outline-default: var(--e360-focus-outline);
}

html,
body {
	font-family: var(--e360-font-sans);
	-webkit-font-smoothing: antialiased;
}
body {
	font-size: var(--e360-text-body-lg);
	line-height: var(--e360-leading-body);
	color: var(--e360-text);
}

h1,
.h1 {
	font-size: var(--e360-text-page);
	font-weight: var(--e360-weight-semibold);
	line-height: var(--e360-leading-heading);
	letter-spacing: var(--e360-tracking-heading);
}
h2,
.h2 {
	font-size: var(--e360-text-section-lg);
	font-weight: var(--e360-weight-semibold);
	line-height: var(--e360-leading-heading);
}
h3,
.h3 {
	font-size: var(--e360-text-section);
	font-weight: var(--e360-weight-semibold);
}

.form-control,
input,
select,
textarea {
	font-family: inherit;
	font-size: var(--e360-text-body);
}
label,
.control-label {
	font-size: var(--e360-text-meta-lg);
	font-weight: var(--e360-weight-medium);
}
.btn,
.es-button,
.navbar,
.nav-link {
	font-size: var(--e360-text-ui);
}
.btn,
.es-button {
	font-weight: var(--e360-weight-medium);
}
code,
pre,
kbd {
	font-family: var(--e360-font-mono);
}

/* Primary actions take the instance accent */
.btn-primary,
.es-button[data-variant="solid"]:not([data-theme="red"]) {
	--bt-solid-bg: var(--e360-accent);
	--bt-solid-bg-hover: var(--e360-accent-strong);
	--bt-solid-bg-active: var(--e360-accent-strong);
	--bt-solid-fg: var(--e360-accent-contrast);
	background-color: var(--e360-accent);
	border-color: var(--e360-accent);
	color: var(--e360-accent-contrast);
}
.btn-primary:hover,
.es-button[data-variant="solid"]:not([data-theme="red"]):hover {
	background-color: var(--e360-accent-strong);
	border-color: var(--e360-accent-strong);
	color: var(--e360-accent-contrast);
}

:focus-visible {
	outline: var(--e360-focus-outline);
	outline-offset: var(--e360-focus-offset);
}
.form-control:focus,
.form-control:focus-visible,
.es-button:focus-visible,
.btn:focus-visible {
	box-shadow: var(--e360-focus-ring) !important;
	outline: none;
}
a {
	text-underline-offset: 2px;
}

/* ---------- Login and access-state cards ---------- */
.page-card,
.login-content.page-card {
	max-width: 420px;
	border: 1px solid var(--e360-border);
	border-radius: var(--e360-radius-lg);
	box-shadow: var(--e360-shadow);
	background: var(--e360-surface);
}
.page-card-head h4,
.page-card-head .text-3xl-bold,
.page-card-head-text h4 {
	font-size: var(--e360-text-section-lg);
	font-weight: var(--e360-weight-semibold);
	letter-spacing: var(--e360-tracking-heading);
}
.page-card-subtitle,
.sign-up-message {
	font-size: var(--e360-text-ui);
	color: var(--e360-text-muted);
}
.page-card .form-control {
	min-height: 40px;
}
.page-card .field-error {
	font-size: var(--e360-text-meta-lg);
	color: var(--e360-danger);
}
.page-card .es-button {
	min-height: 40px;
	font-size: var(--e360-text-ui);
}
.page-card .app-logo {
	max-height: 32px;
}
@media (max-width: 480px) {
	.page-card,
	.login-content.page-card {
		max-width: none;
		margin-left: 16px;
		margin-right: 16px;
		box-shadow: none;
	}
}

/* Access-state pages (invitation required, access denied, disabled user, session expired,
 * recovery). The auth module renders them; these classes are the shared look. Frappe's own
 * message page (www/message.html) uses .page-card too, so it is covered above. */
.e360-access {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--e360-space-6) var(--e360-space-4);
	background: var(--e360-bg-subtle);
}
.e360-access__card {
	width: 100%;
	max-width: 440px;
	padding: var(--e360-space-8) var(--e360-space-6);
	border: 1px solid var(--e360-border);
	border-top: 4px solid var(--e360-accent);
	border-radius: var(--e360-radius-lg);
	background: var(--e360-surface);
	box-shadow: var(--e360-shadow);
}
.e360-access__title {
	margin: var(--e360-space-3) 0 var(--e360-space-2);
	font-size: var(--e360-text-section-lg);
	font-weight: var(--e360-weight-semibold);
}
.e360-access__body {
	margin: 0 0 var(--e360-space-5);
	color: var(--e360-text-muted);
	font-size: var(--e360-text-body);
}
.e360-access__meta {
	margin-top: var(--e360-space-5);
	font-size: var(--e360-text-meta);
	color: var(--e360-text-subtle);
}

/* ---------- Portal (Esevo Portal module) ---------- */
.e360-portal,
.web-list-container,
.portal-container {
	color: var(--e360-text);
}
.e360-portal table,
.web-list-table {
	font-size: var(--e360-text-ui);
	font-variant-numeric: tabular-nums;
}
.e360-portal .e360-amount,
.web-list-table .text-right {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.web-footer,
.footer-powered {
	font-size: var(--e360-text-meta-lg);
}

/* Reset Inter-tuned tracking for Geist (see e360-desk.css). */
body *:not(h1):not(h2) {
	letter-spacing: normal !important;
}