/* BOS ERP (/login) and BOS HR & Payroll (/hrms/login) additions to the shared sign-in layout (BUSINESS-373).
   bos-signin.css is a byte-identical copy of brand/signin/bos-signin.css (don't edit it here); rooman-signin.js
   builds the layout. These rules fold Frappe's own sign-in markup into it. The `html body` prefix outranks the
   older brand rules in Website Settings > Head HTML (head_html.html), which still style the page if the layout
   is not drawn. */

/* Frappe's fonts: InterVariable on website pages, InterVar in the HR app (both Inter). */
html body .rooman-signin {
	font-family: "InterVariable", "InterVar", "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.rooman-signin[hidden] {
	display: none !important;
}

/* The layout replaces the page: Frappe's page, footer and the floating app switcher (nothing to switch to before
   sign-in) are hidden; the HR app (a full-screen Ionic page) stays underneath, hidden. */
html.rooman-signin-on #page-login,
html.rooman-signin-on .web-footer,
html.rooman-signin-on bos-app-switcher,
html.rooman-signin-on bos-app-switcher-panel,
html.rooman-signin-on #app {
	display: none !important;
}
html.rooman-signin-on body {
	margin: 0;
	background: #f5f6fa;
}
@media (prefers-color-scheme: dark) {
	html.rooman-signin-on body {
		background: #0e1222;
	}
}
.rooman-signin-hr {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
}

/* ERP: Frappe's sections inside the card, without their own card frame, logo and "Sign In" heading */
html body .rooman-signin-erp .login-content.page-card {
	width: 100%;
	min-height: 0 !important;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	gap: 20px;
	color: var(--bsi-text);
}
html body .rooman-signin-erp section.for-login .page-card-head,
html body .rooman-signin-erp .app-logo {
	display: none;
}
html body .rooman-signin-erp .page-card-head h4,
html body .rooman-signin-erp .page-card-head p {
	color: var(--bsi-text);
}
html body .rooman-signin-erp .form-login {
	gap: 16px;
}
html body .rooman-signin-erp .social-logins,
html body .rooman-signin-erp .social-login-buttons,
html body .rooman-signin-erp .login-button-wrapper {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

/* the main button (Frappe's a.btn-rooman_bos in the ERP, a copy of Vue's link in HR) */
html body .rooman-signin a.bos-signin-btn.btn-rooman_bos {
	height: 52px;
	border-radius: 12px;
	background: var(--bsi-text);
	color: var(--bsi-bg);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}
html body .rooman-signin a.bos-signin-btn.btn-rooman_bos:hover,
html body .rooman-signin a.bos-signin-btn.btn-rooman_bos:active {
	background: color-mix(in srgb, var(--bsi-text) 85%, var(--bsi-bg));
	color: var(--bsi-bg);
}
html body .rooman-signin a.bos-signin-btn.btn-rooman_bos:focus-visible {
	outline: 2px solid var(--bsi-focus);
	outline-offset: 2px;
}

/* where password sign-in is on (not on production): the toggle as the layout's quiet link */
html body .rooman-signin .rooman-password-toggle {
	padding: 2px 4px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bsi-text);
	text-underline-offset: 2px;
}