/* Utilitay School — login and website pages. */
:root {
	/* Brand tokens. Defaults are Utilitay's; each school's site overrides them from
	   /api/method/utilitay_school.theme.css (school_theme in site_config.json). */
	--brand-ink: #0b0b0c;       /* dark surfaces: menus, hero */
	--brand-accent: #c0ff0e;    /* highlight backgrounds */
	--brand-on-accent: #0b0b0c; /* text on the highlight */
	--brand-accent-ink: #5c7300;/* highlight-coloured text and lines on white */
	--brand-paper: #f7f6f2;     /* page background */
	--brand-logo-bg: #c0ff0e;   /* tile behind the logo */
	--brand-ink-accent: var(--brand-accent); /* highlight used on dark surfaces */
	--brand-heading-font: inherit;      /* serif for schools whose identity uses one */
	--brand-heading-weight: 650;
	--brand-radius: 16px;
	--brand-hero-image: none;
	--brand-logo-w: 44px;
	--brand-logo-h: 44px;
	--brand-logo-pad: 6px;
	--us-lime: var(--brand-accent);
	--us-ink: var(--brand-ink);
	--us-paper: var(--brand-paper);
}

body {
	font-family: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="light"] body,
body:not([data-theme]) {
	background-color: var(--us-paper);
}

.btn-primary {
	background-color: var(--us-ink);
	border-color: var(--us-ink);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: #26262a;
	border-color: #26262a;
}

/* Login: one centred card with a brand stripe */
.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card {
	border: 1px solid rgba(11, 11, 12, 0.08);
	border-radius: var(--brand-radius);
	box-shadow: 0 1px 2px rgba(11, 11, 12, 0.04), 0 18px 48px rgba(11, 11, 12, 0.08);
	background: #fff;
	position: relative;
	overflow: hidden;
}
.for-login .page-card::before,
.for-forgot .page-card::before,
.for-login-with-email-link .page-card::before,
.for-signup .page-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--us-ink) 0 60%, var(--us-lime) 60% 100%);
	z-index: 1;
}
.page-card-head .app-logo {
	width: var(--brand-logo-w);
	height: var(--brand-logo-h);
	max-width: 100%;
	padding: var(--brand-logo-pad);
	border-radius: 12px;
	background: var(--brand-logo-bg, var(--us-lime));
	object-fit: contain;
}
.page-card-head h4 {
	font-family: var(--brand-heading-font);
	font-weight: var(--brand-heading-weight);
	letter-spacing: -0.01em;
}
.form-control:focus {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--us-lime) 60%, transparent);
	border-color: var(--brand-accent-ink);
}

[data-theme="dark"] .page-card {
	background: var(--card-bg);
	border-color: var(--border-color);
}

/* Centre the sign-in card on every view (password, email link, forgot, signup) at any width */
.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 420px;
}
/* ...and vertically, in the middle of the window */
body[data-path="login"] .page-content-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}
body[data-path="login"] .page-content-wrapper > main.container {
	flex: 0 1 540px;
	margin: 0;
}
/* Frappe makes the card full-screen on phones; keep it a card that fits its content */
body[data-path="login"] .page-card {
	min-height: 0;
}

/* Frappe 16's sign-in page uses its own es-button (data-variant="solid"); keep the school's colour */
body[data-path="login"] .es-button[data-variant="solid"],
body[data-path="login"] .btn-primary,
body[data-path="login"] .btn.btn-primary {
	background-color: var(--us-ink);
	border-color: var(--us-ink);
	color: #fff;
}
body[data-path="login"] .es-button[data-variant="solid"]:hover,
body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-primary:focus {
	background-color: color-mix(in srgb, var(--us-ink) 85%, white);
	border-color: color-mix(in srgb, var(--us-ink) 85%, white);
}

/* Frappe 16 buttons (es-button) take their colours from these variables */
:root .es-button {
	--bt-solid-bg: var(--brand-ink);
	--bt-solid-bg-hover: color-mix(in srgb, var(--brand-ink) 86%, white);
	--bt-solid-bg-active: color-mix(in srgb, var(--brand-ink) 78%, white);
	--bt-solid-fg: #fff;
}
:root .es-button[data-theme="red"] {
	--bt-solid-bg: var(--surface-red-7);
	--bt-solid-bg-hover: var(--surface-red-8);
	--bt-solid-bg-active: var(--surface-red-9);
	--bt-solid-fg: var(--ink-red-1);
}

/* phones: finger-sized fields and buttons; 16px text so iPhones don't zoom in on tap */
@media (max-width: 640px) {
	body[data-path="login"] .page-content-wrapper {
		padding: 20px 14px;
	}
	body[data-path="login"] .page-card {
		padding: 28px 22px;
	}
	body[data-path="login"] input.form-control,
	body[data-path="login"] .form-control {
		min-height: 46px;
		font-size: 16px;
	}
	body[data-path="login"] .es-button,
	body[data-path="login"] .btn {
		min-height: 46px;
		font-size: 16px;
		width: 100%;
	}
	body[data-path="login"] .forgot-password-message a,
	body[data-path="login"] a {
		display: inline-block;
		padding: 8px 0;
	}
}
@media (max-width: 640px) {
	body[data-path="login"] .es-button,
	body[data-path="login"] .btn {
		justify-content: center;
		text-align: center;
	}
}