/* Website pages (login, forgot password, client portal /my-home, web forms) on the design system.
   Tokens come from buildorbit-tokens.css (loaded first); the desk has its own buildorbit-ds.css. */
/* :root:root outranks the :root blocks of Frappe's website and login bundles, which load after this file (the login card kept
   --bg-color: white in the dark theme, so its light text was unreadable) */
:root:root, :root[data-theme="light"], :root[data-theme="dark"] {
	--primary: var(--app-primary);
	--primary-color: var(--app-primary);
	--btn-primary: var(--app-primary);
	--bg-color: var(--app-bg);
	--fg-color: var(--app-surface);
	--card-bg: var(--app-surface);
	--text-color: var(--app-text);
	--heading-color: var(--app-text);
	--text-muted: var(--app-text-secondary);
	--text-light: var(--app-text-muted);
	--border-color: var(--app-border);
	--control-bg: var(--app-surface);
	--font-stack: var(--app-font);
	--focus-default: var(--app-focus-ring);
	--surface-white: var(--app-surface); --surface-gray-1: var(--app-surface-2); --surface-gray-2: var(--app-hover); --surface-gray-3: var(--app-stone);
	--ink-gray-9: var(--app-text); --ink-gray-8: var(--app-text); --ink-gray-7: var(--app-text-secondary); --ink-gray-6: var(--app-text-secondary);
	--ink-gray-5: var(--app-text-muted); --outline-gray-2: var(--app-border); --outline-gray-3: var(--app-border-strong);
}
:root:root { --toggle-on: var(--app-toggle-on); }
html body { background: var(--app-bg); color: var(--app-text); font-family: var(--app-font); -webkit-font-smoothing: antialiased; }
.page-content-wrapper, .web-page-content, .page_content { background: transparent; }
a { color: var(--app-primary); }
::selection { background: var(--app-primary-soft); color: var(--app-text); }

/* buttons and fields on any website page */
.btn-primary, .btn-primary:hover, .btn-primary:focus { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-on-primary); font-weight: 600; }
.btn-primary:hover { background: var(--app-primary-hover); }
.btn-default { background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text); }
.btn-default:hover { background: var(--app-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--app-focus-ring); }
.form-control { background: var(--app-surface); border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-md); color: var(--app-text); }
.form-control:focus { border-color: var(--app-primary); box-shadow: var(--app-focus-ring); background: var(--app-surface); }

/* top bar of website pages (portal) */
.navbar { background: var(--app-surface) !important; border-bottom: 1px solid var(--app-border); box-shadow: none; }
.navbar .navbar-brand img { max-height: 32px; }
.navbar .nav-link { color: var(--app-text-secondary); }
.navbar .navbar-brand { color: var(--app-text); }
/* phone menu button: Lucide icons are strokes, the website CSS gives them no stroke colour (the button looked empty) */
.navbar .navbar-toggler { color: var(--app-text-secondary); border-color: var(--app-border); }
.navbar .navbar-toggler .icon { stroke: currentColor; fill: none; }
/* Frappe's website CSS colours headings with a fixed grey, unreadable on the dark theme */
html body :is(h1, h2, h3, h4, h5, h6) { color: var(--app-text); }
footer.web-footer { background: transparent; border-top: 1px solid var(--app-border); color: var(--app-text-muted); }

/* sign in, forgot password, email link: one calm card on ivory */
html body section.for-login, section.for-forgot, section.for-signup, section.for-login-with-email-link, section.for-email-login { padding: var(--app-space-12) var(--app-space-4) var(--app-space-16); }
html body .page-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; box-shadow: var(--app-shadow-md);
	padding: var(--app-space-8); max-width: 420px; margin: 0 auto; }
html body .page-card-head { margin-bottom: var(--app-space-6); }
/* BuildOrbit's square mark, or the organisation's logo (often wide) at the same height, never squeezed */
html body .page-card-head .app-logo { width: auto; max-width: 240px; height: 44px; object-fit: contain; border-radius: 10px; }
/* Frappe's login bundle loads after us with longer selectors */
html body .page-card-subtitle:not(.bo-a):not(.bo-b):not(.bo-c) { color: var(--app-text-secondary); }
html body .page-card-head h4 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--app-text); margin: var(--app-space-4) 0 var(--app-space-2); }
html body .page-card-subtitle { color: var(--app-text-muted); font-size: var(--app-fs-body); margin: 0; }
html body .page-card .form-group { margin-bottom: var(--app-space-4); }
html body .page-card .form-label { font-size: var(--app-fs-secondary); font-weight: 600; color: var(--app-text); margin-bottom: 6px; }
html body .page-card .form-control { height: 44px; font-size: 15px; }
html body .page-card .email-field svg, .page-card .password-field svg { --icon-stroke: var(--app-text-muted); }
html body .page-card .forgot-password-message { margin: var(--app-space-2) 0 0; }
html body .page-card .forgot-password-message a { color: var(--app-text-secondary); font-size: var(--app-fs-secondary); }
html body .page-card .forgot-password-message a:hover { color: var(--app-text); }
html body .page-card-actions { display: grid; gap: var(--app-space-3); margin-top: var(--app-space-2); }
html body .page-card-actions .btn { height: 44px; border-radius: var(--app-radius-md); font-size: 15px; margin: 0; }
html body .page-card .btn-login, .page-card .btn-forgot, .page-card .btn-signup { background: var(--app-primary); border: 1px solid var(--app-primary); color: var(--app-on-primary); font-weight: 600; }
html body .page-card .btn-login:hover, .page-card .btn-forgot:hover { background: var(--app-primary-hover); }
html body .page-card .btn-login-option { background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text); font-weight: 500; }
html body .page-card .btn-login-option:hover { background: var(--app-hover); }
html body .login-error-banner { background: var(--app-danger-bg); color: var(--app-danger-text); border-radius: var(--app-radius-md); }
html body .page-card .field-error { color: var(--app-danger-text); font-size: var(--app-fs-meta); }
@media (max-width: 480px) {
	html body section.for-login, html body section.for-forgot { padding: var(--app-space-6) var(--app-space-4); }
	html body .page-card { padding: var(--app-space-6) var(--app-space-5); border-radius: 12px; }
}
/* the card: Frappe's login bundle paints it with --bg-color (.for-login .page-card), the same as the page */
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card { background: var(--app-surface); }
/* Frappe's login bundle styles the buttons with 4-class selectors: outrank them */
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card .page-card-actions :is(.btn-login, .btn-forgot, .btn-signup, .btn-ldap-login) {
	background: var(--app-primary); border: 1px solid var(--app-primary); color: var(--app-on-primary); font-weight: 600; }
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card .page-card-actions :is(.btn-login, .btn-forgot, .btn-signup):hover { background: var(--app-primary-hover); }
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card .page-card-actions .btn-login-option {
	background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text); }
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card .page-card-actions .btn-login-option:hover { background: var(--app-hover); }
html body .page-card :is(.form-label, label) { font-size: var(--app-fs-secondary); font-weight: 600; color: var(--app-text); }
html body .page-card .form-control { height: 44px; border: 1px solid var(--app-border-strong); background: var(--app-surface); font-size: 15px; }
html body .page-card .form-control:focus { border-color: var(--app-primary); box-shadow: var(--app-focus-ring); }
html body .page-card .page-card-body { --outline-gray-2: var(--app-border-strong); --ink-gray-5: var(--app-text); }
html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card .page-card-body .form-label { font-weight: 600; font-size: var(--app-fs-secondary); }
@media (max-width: 576px) {
	html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) .page-card { padding: var(--app-space-8) var(--app-space-6); border: 0; border-radius: 0; box-shadow: none; max-width: none; }
	html body :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) { padding: 0; }
}

/* pop-ups on website pages (Frappe's msgprint "Message", dialogs): the theme's surface and text. Frappe's website CSS kept
   a white box while the text followed the dark theme, so a message on the dark login page was white on white. */
html body .modal-content { background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); }
html body .modal-header, html body .modal-footer { border-color: var(--app-border); }
html body .modal :is(.modal-title, .modal-body, .msgprint) { color: var(--app-text); }
html body .modal :is(.btn-modal-close, .close) { color: var(--app-text-secondary); opacity: 1; }
html body .modal :is(.btn-modal-close, .close) .icon { --icon-stroke: var(--app-text-secondary); stroke: var(--app-text-secondary); }
html body .modal-backdrop.show { background: var(--app-overlay); opacity: 1; }

/* ---------- sign-in page: split screen (owner, 2026-10-14, from a reference design). web-login.js adds body.bo-login, the
   photo panel (.bo-login-hero) and the "or" divider, on /login and on Set password (/update-password: reset link, welcome email); Frappe's own form, sections and scripts are unchanged. ---------- */
@keyframes bo-login-in { from { opacity: 0; filter: blur(6px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes bo-login-photo-in { from { opacity: 0; filter: blur(8px); transform: translateX(28px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes bo-login-card-in { from { opacity: 0; filter: blur(6px); transform: translateY(18px) scale(.96); } to { opacity: 1; filter: blur(0); transform: none; } }
html body.bo-login footer.web-footer { display: none; }
html body.bo-login :is(#page-login, #page-update-password) main.container { max-width: none; width: 100%; padding: 0; margin: 0; }
html body.bo-login :is(#page-login, #page-update-password) .page-content-wrapper { padding-top: 0; min-height: 0; }
html body.bo-login :is(#page-login, #page-update-password) .page_content > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
html body.bo-login :is(#page-login, #page-update-password) .page_content > div > :is(section, noscript) { grid-column: 1; grid-row: 1; align-self: center; justify-self: center;
	width: min(440px, calc(100% - 64px)); padding: var(--app-space-12) 0; }

/* the form column: no card, just the form on the page */
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card {
	background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; }
html body.bo-login .page-card-head { margin-bottom: var(--app-space-8); }
html body.bo-login .page-card-head h4 { font-size: clamp(38px, 3.6vw, 52px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.08;
	margin: var(--app-space-8) 0 var(--app-space-3); }
html body.bo-login .page-card-head .page-card-subtitle { font-size: 15px; line-height: 1.55; color: var(--app-text-secondary); }
html body.bo-login .page-card .form-group { margin-bottom: var(--app-space-5); }
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .page-card-body .form-label {
	font-size: var(--app-fs-secondary); font-weight: 500; color: var(--app-text-secondary); margin-bottom: 8px; }
/* fields: soft, rounded, no icons; the eye stays */
html body.bo-login .page-card .page-card-body :is(.email-field, .password-field) .field-icon { display: none; }
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .form-control {
	height: 54px; border-radius: 16px; padding: 0 18px; font-size: 15px; border: 1px solid var(--app-border);
	background: color-mix(in srgb, var(--app-text) 4%, var(--app-surface)); transition: border-color .15s, background-color .15s, box-shadow .15s; }
html body.bo-login :is(.for-login, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .password-field .form-control { padding-right: 52px; }
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .form-control:hover { border-color: var(--app-border-strong); }
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .form-control:focus {
	border-color: color-mix(in srgb, var(--app-primary) 70%, transparent); background: var(--app-primary-soft); box-shadow: var(--app-focus-ring); }
html body.bo-login .page-card .password-field .toggle-password { right: 18px; top: 50%; transform: translateY(-50%); cursor: pointer; }
html body.bo-login .page-card .forgot-password-message { text-align: right; margin-top: var(--app-space-3); --ink-gray-5: var(--app-accent-text); }
html body.bo-login .page-card .forgot-password-message a { color: var(--app-accent-text); font-weight: 500; }
html body.bo-login .page-card .forgot-password-message a:hover { color: var(--app-accent-text); text-decoration: underline; text-underline-offset: 3px; }
html body.bo-login .page-card-actions { gap: var(--app-space-4); margin-top: var(--app-space-6); }
html body.bo-login :is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login, .for-reset-password) .page-card .page-card-actions .btn {
	height: 54px; border-radius: 16px; font-size: 15px; }
html body.bo-login .bo-login-or { display: flex; align-items: center; gap: var(--app-space-4); color: var(--app-text-muted); font-size: var(--app-fs-secondary); margin: var(--app-space-2) 0; }
html body.bo-login .bo-login-or::before, html body.bo-login .bo-login-or::after { content: ""; flex: 1; border-top: 1px solid var(--app-border); }
html body.bo-login :is(.sign-up-message, .bo-login-note) { text-align: center; color: var(--app-text-muted); font-size: var(--app-fs-secondary); margin: var(--app-space-8) 0 0; }
html body.bo-login .sign-up-message a { color: var(--app-accent-text); font-weight: 500; }

/* the form comes in one line after another */
html body.bo-login :is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-reset-password) :is(.app-logo, .page-card-head h4, .page-card-subtitle, .form-group, .page-card-actions > *, .bo-login-note) {
	animation: bo-login-in .7s cubic-bezier(.2, .8, .2, 1) both; }
html body.bo-login .page-card-head h4 { animation-delay: .08s; }
html body.bo-login .page-card-subtitle { animation-delay: .16s; }
html body.bo-login .form-group:nth-child(2) { animation-delay: .24s; }
html body.bo-login .form-group:nth-child(3) { animation-delay: .32s; }
html body.bo-login .page-card-actions > :nth-child(1) { animation-delay: .4s; }
html body.bo-login .page-card-actions > :nth-child(2) { animation-delay: .48s; }
html body.bo-login .page-card-actions > :nth-child(n+3) { animation-delay: .56s; }
html body.bo-login .bo-login-note { animation-delay: .64s; }

/* the photo panel with three glass cards (one on laptops, two from 1280 px, three from 1536 px) */
html body.bo-login .bo-login-hero { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100dvh; padding: 16px; }
html body.bo-login .bo-login-photo { position: absolute; inset: 16px; border-radius: 28px; overflow: hidden;
	background: var(--app-surface-2) url(/assets/buildorbit/images/login-hero.jpg) center / cover no-repeat;
	animation: bo-login-photo-in .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
html body.bo-login .bo-login-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent 42%); }
html[data-theme="dark"] body.bo-login .bo-login-photo { filter: brightness(.82); }
html body.bo-login .bo-login-cards { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; gap: 16px; padding: 0 40px; }
html body.bo-login .bo-login-card { display: flex; align-items: flex-start; gap: 12px; width: 268px; padding: 18px; border-radius: 24px;
	background: color-mix(in srgb, var(--app-surface) 66%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
	border: 1px solid color-mix(in srgb, var(--app-on-dark) 22%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); color: var(--app-text);
	animation: bo-login-card-in .7s cubic-bezier(.2, .8, .2, 1) both; }
html body.bo-login .bo-login-card-1 { animation-delay: .9s; }
html body.bo-login .bo-login-card-2 { animation-delay: 1.1s; }
html body.bo-login .bo-login-card-3 { animation-delay: 1.3s; }
html body.bo-login .bo-login-card-ic { flex: none; width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--app-primary-soft); color: var(--app-primary); }
html body.bo-login .bo-login-card b { display: block; font-size: var(--app-fs-secondary); font-weight: 600; line-height: 1.35; }
html body.bo-login .bo-login-card p { margin: 3px 0 0; font-size: var(--app-fs-secondary); line-height: 1.4; color: var(--app-text-secondary); }
html body.bo-login .bo-login-card-2, html body.bo-login .bo-login-card-3 { display: none; }
@media (min-width: 1280px) { html body.bo-login .bo-login-card-2 { display: flex; } }
@media (min-width: 1536px) { html body.bo-login .bo-login-card-3 { display: flex; } }
/* tablets and phones: the form alone */
@media (max-width: 991px) {
	html body.bo-login :is(#page-login, #page-update-password) .page_content > div { grid-template-columns: minmax(0, 1fr); }
	html body.bo-login .bo-login-hero { display: none; }
	html body.bo-login :is(#page-login, #page-update-password) .page_content > div > :is(section, noscript) { align-self: start; width: min(440px, calc(100% - 48px)); padding: var(--app-space-12) 0; }
}
@media (prefers-reduced-motion: reduce) {
	html body.bo-login *, html body.bo-login *::before, html body.bo-login *::after { animation: none !important; }
}