/* AMG: "AMG OS" theme (AMG Dynamics fork), light + dark.
 * Loaded after desk.bundle.css / website.bundle.css (frappe/hooks.py app_include_css + web_include_css) and by
 * the CRM SPA (crm/frontend/index.html), so it only overrides Espresso tokens; colors.css stays untouched (it is
 * generated upstream).
 *
 * The semantic tokens (--surface-* / --ink-* / --outline-*) are set as literals, not through the --gray-* ramp:
 * the desk aliases them to the ramp, but frappe-ui (CRM) ships them as literals, and both must land on the same
 * values. The ramp is set too, for desk code that reads --gray-N directly.
 *
 * Selectors carry one extra class/attribute of specificity (:root[...] / :root:not(...)) so they win over the
 * CRM bundle, which Vite injects after this file, as well as over colors.css.
 *
 * Brand (amgdynamics.com): monochrome near-black / warm white, iridescent pastel accent, Geist type.
 * Contrast: body text, labels and controls meet WCAG AA in both themes (checked pair by pair when tuned).
 */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/assets/frappe/css/fonts/geist/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/assets/frappe/css/fonts/geist/geist-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--font-stack: "Geist", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", sans-serif;
	/* frappe-ui (CRM) puts InterVar on <html>; this outranks it and is a no-op in the desk */
	font-family: var(--font-stack);

	/* iridescent accent from the AMG website */
	--amg-iris-1: #8399ff;
	--amg-iris-2: #c9aaff;
	--amg-iris-3: #ffccfd;
	--amg-iris-4: #fdffbc;
	--amg-iris-5: #b3e1ff;
	--amg-iris: linear-gradient(100deg, var(--amg-iris-1), var(--amg-iris-2) 35%, var(--amg-iris-3) 68%, var(--amg-iris-4));
	--amg-iris-vertical: linear-gradient(180deg, var(--amg-iris-1), var(--amg-iris-2) 40%, var(--amg-iris-3) 75%, var(--amg-iris-4));

	--amg-mark: url("/assets/frappe/images/amg/amg-mark.svg");
	--amg-app-icon: url("/assets/frappe/images/amg/amg-app-icon.svg");
}

/* ------------------------------------------------------------------------------------------------
 * AMG Light: warm-neutral whites, near-black ink, crisp hairlines.
 * ---------------------------------------------------------------------------------------------- */
/* @light */
:root:not([data-theme="dark"]),
[data-theme="light"] {
	color-scheme: light;

	--gray-50: #f7f7f5;
	--gray-100: #f0efec;
	--gray-200: #e8e7e3;
	--gray-300: #dedcd7;
	--gray-400: #c7c5bf;
	--gray-500: #9d9b95;
	--gray-600: #77756f;
	--gray-700: #52504b;
	--gray-800: #32312e;
	--gray-900: #1c1c1a;
	--gray-950: #0c0c0b;

	--surface-base: #fdfdfc;
	--surface-gray-1: #f7f7f5;
	--surface-gray-2: #f0efec;
	--surface-gray-3: #e8e7e3;
	--surface-gray-4: #dedcd7;
	--surface-gray-5: #c7c5bf;
	--surface-gray-6: #9d9b95;
	--surface-gray-7: #77756f;
	--surface-gray-8: #52504b;
	--surface-gray-9: #32312e;
	--surface-gray-10: #131312;
	--surface-sidebar: #f7f7f5;
	--surface-elevation-1: #ffffff;
	--surface-elevation-2: #ffffff;
	--surface-elevation-3: #ffffff;

	--ink-base: #ffffff;
	--ink-gray-1: #e8e7e3;
	--ink-gray-2: #dedcd7;
	--ink-gray-3: #8c8a84;
	--ink-gray-4: #7c7a74;
	--ink-gray-5: #63615c;
	--ink-gray-6: #52504b;
	--ink-gray-7: #3a3935;
	--ink-gray-8: #1c1c1a;
	--ink-gray-9: #0c0c0b;
	--ink-blue-link: #4b59d6;

	--outline-base: #fdfdfc;
	--outline-gray-1: #e9e8e4;
	--outline-gray-2: #dfded9;
	--outline-gray-3: #cac8c2;
	--outline-gray-4: #8c8a84;
	--outline-gray-5: #77756f;
	--outline-gray-6: #52504b;
	--outline-gray-7: #32312e;
	--outline-gray-8: #1c1c1a;
	--outline-gray-9: #0c0c0b;
	--outline-elevation-1: #e9e8e4;
	--outline-elevation-2: #e4e3de;

	/* "blue" (info, links, selection, subtle blue buttons) is the brand periwinkle, not sky blue.
	   Text steps (ink 6+) hold >= 4.5:1 on surface-blue-2; the solid fill holds 4.5:1 under white. */
	--surface-blue-1: #f4f5ff;
	--surface-blue-2: #eceeff;
	--surface-blue-3: #dde1ff;
	--surface-blue-4: #c6ccff;
	--surface-blue-5: #a2aefe;
	--surface-blue-6: #5466e6;
	--surface-blue-7: #4b59d6;
	--surface-blue-8: #3f4cbd;
	--surface-blue-9: #313b92;
	--surface-blue-10: #20275e;
	--ink-blue-1: #ffffff;
	--ink-blue-2: #eceeff;
	--ink-blue-3: #dde1ff;
	--ink-blue-4: #a2aefe;
	--ink-blue-5: #6577f0;
	--ink-blue-6: #4b59d6;
	--ink-blue-7: #4352c8;
	--ink-blue-8: #3a47b3;
	--ink-blue-9: #313b92;
	--ink-blue-10: #252d70;
	--outline-blue-1: #dde1ff;
	--outline-blue-2: #c6ccff;
	--outline-blue-3: #a2aefe;
	--outline-blue-4: #8399ff;
	--outline-blue-5: #6577f0;
	--outline-blue-6: #4b59d6;
	--outline-blue-7: #3f4cbd;
	--outline-blue-8: #313b92;
	--outline-blue-9: #252d70;
	--outline-blue-10: #20275e;

	/* status pills (ink-*-8 on surface-*-2) that sit under 4.5:1 upstream */
	--ink-amber-8: #9e5a07;
	--ink-cyan-8: #17708c;

	/* iris focus: a crisp 1px line (>= 3:1) inside a soft halo */
	--amg-focus: #6577f0;
	--focus-default: 0px 0px 0px 1px #6577f0, 0px 0px 0px 4px #8399ff33;
	--focus-outline-default: 2px solid #6577f0;
	--focus-blue: 0px 0px 0px 1px #6577f0, 0px 0px 0px 4px #8399ff33;
	--focus-outline-blue: 2px solid #6577f0;
	--focus-violet: 0px 0px 0px 1px #8b6be8, 0px 0px 0px 4px #c9aaff40;
	--focus-outline-violet: 2px solid #8b6be8;

	--amg-selection: #8399ff40;
	/* pastel stops vanish on white, so the light edges run deeper on the same hues (the 2px active-row edge
	   one step further than the login hairline, or its lower half fades into the row) */
	--amg-iris-edge: linear-gradient(100deg, #7d8ffc, #b99af8 35%, #f3a6ea 68%, #ecd98a);
	--amg-iris-vertical: linear-gradient(180deg, #7d8ffc, #a98bf5 40%, #e48ad6 75%, #dcb65a);
	--amg-page-glow: radial-gradient(1200px 520px at 50% -180px, #c9aaff1f, #b3e1ff14 45%, transparent 70%);

	/* controls: a crisp hairline at rest and a firmer one on hover (text fields also carry their fill and label);
	   checkbox edges hold 3:1 on the box fill and the page; placeholders hold 4.5:1 on the fill and its hover step */
	--amg-control-line: #c4c2bc;
	--amg-control-line-hover: #a9a7a1;
	--amg-check-edge: #8c8a84;
	--amg-check-edge-hover: #6e6c67;
	--amg-placeholder: #686661;
}

/* ------------------------------------------------------------------------------------------------
 * AMG Dark: deep, slightly cool blacks; one ramp for every surface, ink and hairline.
 * ---------------------------------------------------------------------------------------------- */
/* @dark */
:root[data-theme="dark"],
[data-theme="dark"],
.dark {
	color-scheme: dark;

	--gray-50: #fafafa;
	--gray-100: #ececef;
	--gray-200: #cfcfd6;
	--gray-300: #a8a8b1;
	--gray-400: #85858f;
	--gray-450: #5f5f68;
	--gray-500: #45454c;
	--gray-600: #303036;
	--gray-700: #242428;
	--gray-800: #1b1b1e;
	--gray-900: #131315;
	--gray-950: #0a0a0b;

	--surface-base: #0a0a0b;
	--surface-gray-1: #111113;
	--surface-gray-2: #1b1b1e;
	--surface-gray-3: #242428;
	--surface-gray-4: #303036;
	--surface-gray-5: #3c3c43;
	--surface-gray-6: #5f5f68;
	--surface-gray-7: #85858f;
	--surface-gray-8: #a8a8b1;
	--surface-gray-9: #ececef;
	--surface-gray-10: #fafafa;
	--surface-sidebar: #0e0e10;
	--surface-elevation-1: #111113;
	--surface-elevation-2: #161618;
	--surface-elevation-3: #202024;

	--ink-base: #0a0a0b;
	--ink-gray-1: #1b1b1e;
	--ink-gray-2: #303036;
	--ink-gray-3: #6e6e78;
	--ink-gray-4: #85858f;
	--ink-gray-5: #93939d;
	--ink-gray-6: #a8a8b1;
	--ink-gray-7: #cfcfd6;
	--ink-gray-8: #ececef;
	--ink-gray-9: #fafafa;
	--ink-blue-link: #8399ff;

	--outline-base: #0a0a0b;
	--outline-gray-1: #1f1f23;
	--outline-gray-2: #2a2a2f;
	--outline-gray-3: #3a3a41;
	--outline-gray-4: #6e6e78;
	--outline-gray-5: #85858f;
	--outline-gray-6: #a8a8b1;
	--outline-gray-7: #ececef;
	--outline-gray-8: #f4f4f5;
	--outline-gray-9: #fafafa;
	--outline-elevation-1: #242428;
	--outline-elevation-2: #2a2a2f;

	/* "blue" is the brand periwinkle here too (see the light block) */
	--surface-blue-1: #181d3d;
	--surface-blue-2: #222b5e;
	--surface-blue-3: #2d3a82;
	--surface-blue-4: #3d4cab;
	--surface-blue-5: #5265d6;
	--surface-blue-6: #6a7ff0;
	--surface-blue-7: #8399ff;
	--surface-blue-8: #97a6ff;
	--surface-blue-9: #b0bbff;
	--surface-blue-10: #ccd3ff;
	--ink-blue-1: #ffffff;
	--ink-blue-2: #2d3a82;
	--ink-blue-3: #3d4cab;
	--ink-blue-4: #5265d6;
	--ink-blue-5: #6a7ff0;
	--ink-blue-6: #8399ff;
	--ink-blue-7: #97a6ff;
	--ink-blue-8: #b0bbff;
	--ink-blue-9: #ccd3ff;
	--ink-blue-10: #e3e7ff;
	--outline-blue-1: #222b5e;
	--outline-blue-2: #2d3a82;
	--outline-blue-3: #3d4cab;
	--outline-blue-4: #5265d6;
	--outline-blue-5: #6a7ff0;
	--outline-blue-6: #8399ff;
	--outline-blue-7: #97a6ff;
	--outline-blue-8: #b0bbff;
	--outline-blue-9: #ccd3ff;
	--outline-blue-10: #e3e7ff;

	/* black shadows vanish on a black page: popovers and menus get a faint hairline instead */
	--elevation-md: 0px 0px 0px 1px #ffffff0f, 0px 6px 16px -2px #00000099;
	--elevation-lg: 0px 0px 0px 1px #ffffff12, 0px 18px 32px -6px #000000b3;
	--elevation-xl: 0px 0px 0px 1px #ffffff12, 0px 24px 40px -8px #000000b3;
	--elevation-2xl: 0px 0px 0px 1px #ffffff14, 0px 44px 64px -10px #000000cc;

	--amg-focus: #8399ff;
	--focus-default: 0px 0px 0px 1px #8399ff, 0px 0px 0px 4px #8399ff33;
	--focus-outline-default: 2px solid #8399ff;
	--focus-blue: 0px 0px 0px 1px #8399ff, 0px 0px 0px 4px #8399ff33;
	--focus-outline-blue: 2px solid #8399ff;
	--focus-violet: 0px 0px 0px 1px #c9aaff, 0px 0px 0px 4px #c9aaff33;
	--focus-outline-violet: 2px solid #c9aaff;

	--amg-selection: #8399ff59;
	--amg-iris-edge: var(--amg-iris);
	--amg-page-glow: radial-gradient(1200px 520px at 50% -200px, #8399ff1f, #c9aaff12 45%, transparent 70%);

	/* controls (see the light block) */
	--amg-control-line: #303036;
	--amg-control-line-hover: #4a4a52;
	--amg-check-edge: #6e6e78;
	--amg-check-edge-hover: #93939d;
	--amg-placeholder: #8c8c96;

	/* desk sidebar panel (sidebar.scss): one step off the page, like the CRM sidebar */
	--desk-sidebar-bg: var(--surface-gray-1);
}

::selection {
	background: var(--amg-selection);
}

/* ------------------------------------------------------------------------------------------------
 * Desk
 * ---------------------------------------------------------------------------------------------- */

/* the row you are on in the sidebar carries a thin iridescent edge (rows only: the sidebar header also
   takes .active-sidebar while its menu is open, and keeps its own look) */
.body-sidebar .standard-sidebar-item.active-sidebar {
	position: relative;
}
.body-sidebar .standard-sidebar-item.active-sidebar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: var(--amg-iris-vertical);
}
:root[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar {
	background: var(--surface-elevation-2);
	box-shadow: inset 0 0 0 1px var(--outline-gray-1);
}
:root:not([data-theme="dark"]) .body-sidebar .standard-sidebar-item.active-sidebar {
	background: var(--surface-elevation-3);
	box-shadow: 0 0 0 1px var(--outline-gray-1), 0 1px 2px #1c1c1a0d;
}

/* ------------------------------------------------------------------------------------------------
 * Controls. Desk rules are scoped to html[data-theme-mode], which only www/desk.html sets.
 * ---------------------------------------------------------------------------------------------- */

/* text controls: the fill plus a crisp hairline, firmer on hover (upstream: fill only, ~1.1:1 on the page).
   Editable grid cells sit inside the grid's own lines and keep no hairline. */
html[data-theme-mode] .form-control:not(.grid-body *) {
	box-shadow: inset 0 0 0 1px var(--amg-control-line);
}
html[data-theme-mode] .form-control:not(.grid-body *):hover:not(:focus):not(:disabled) {
	box-shadow: inset 0 0 0 1px var(--amg-control-line-hover);
}
/* a button joined to a text control (the list filters' match-type toggle) shares its hairline, edges overlapped */
html[data-theme-mode] .input-group > .form-control + .input-group-btn > .btn {
	margin-left: -1px;
	box-shadow: inset 0 0 0 1px var(--amg-control-line);
}
/* the iris focus ring (upstream: a 2px grey at 25%, ~1.3:1). The error state's red ring still wins. */
html[data-theme-mode] .form-control:focus {
	box-shadow: var(--focus-default);
}
html[data-theme-mode] .grid-body .editable-row .form-control:focus {
	box-shadow:
		inset 0 0 0 1px var(--amg-focus),
		inset 0 0 0 3px #8399ff33;
}

/* checkboxes: a 1px edge at >= 3:1 on the box and the page (upstream: --gray-500, ~2.7:1 on light; read-only
   ones a 0.5px line on light and nothing on dark) */
html[data-theme-mode] input[type="checkbox"]:not(:checked):not(.disabled-selected) {
	border: 1px solid var(--amg-check-edge);
}
html[data-theme-mode] input[type="checkbox"]:not(:checked):not(:disabled):not(.disabled-deselected):hover {
	border-color: var(--amg-check-edge-hover);
}
html[data-theme-mode] input[type="checkbox"].disabled-deselected,
html[data-theme-mode] input[type="checkbox"]:disabled:not(:checked):not(.disabled-selected) {
	background-color: var(--surface-gray-1);
	box-shadow: none;
}

/* placeholders: >= 4.5:1 on the control fill and its hover step in both themes (upstream desk --gray-500 and
   frappe-ui --ink-gray-4, 2-3.7:1 here); desk, login and CRM alike */
:root input::placeholder,
:root textarea::placeholder,
:root .ProseMirror:not(.ProseMirror-focused) p.is-editor-empty::before {
	color: var(--amg-placeholder);
}

/* AMG mark in the dock header instead of each app's own logo (the header is the "All apps" switcher) */
.dock-logo .header-logo img {
	content: var(--amg-app-icon);
}
/* the desktop (apps screen) brand slot gets the same tile while Navbar Settings points at the AMG mark */
.desktop-navbar #brand-logo[src*="/amg/amg-mark"] {
	content: var(--amg-app-icon);
	width: 28px;
	height: 28px;
}

/* desk splash: the mark, small and calm, on the theme background */
.splash img {
	width: 56px !important;
	height: auto;
	animation: amg-splash 1.6s ease-in-out infinite alternate;
}
:root[data-theme="dark"] .splash img[src*="/amg/amg-mark"] {
	content: url("/assets/frappe/images/amg/amg-mark-light.svg");
}
@keyframes amg-splash {
	from {
		opacity: 0.55;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ------------------------------------------------------------------------------------------------
 * CRM (frappe-ui): the same control language, hooked onto frappe-ui's own utility class names.
 * ---------------------------------------------------------------------------------------------- */

/* subtle TextInput / Textarea / Autocomplete: upstream paints the border in the fill colour, so the field has
   no edge at rest; give it the desk hairline, firmer on hover */
:root[data-theme] [class~="border-[--surface-gray-2]"]:not(:hover):not(:focus) {
	border-color: var(--amg-control-line);
}
:root[data-theme] [class~="border-[--surface-gray-2]"]:hover:not(:focus) {
	border-color: var(--amg-control-line-hover);
}
/* the iris focus wherever frappe-ui would show its grey focus border (inputs, textareas, editors, comboboxes;
   upstream: border outline-gray-4 and a 0px ring) */
:root[data-theme] [class*="focus:border-outline-gray-4"]:focus {
	border-color: var(--amg-focus);
	outline: none;
}
:root[data-theme] [class*="focus:border-outline-gray-4"]:focus-visible {
	box-shadow: var(--focus-default);
}
:root[data-theme]:not([data-theme-mode]) input[type="checkbox"]:focus-visible {
	box-shadow: var(--focus-default);
	outline: none;
}

/* ------------------------------------------------------------------------------------------------
 * Login (website pages): the theme comes from www/login.html, which sets data-theme on <html>.
 * ---------------------------------------------------------------------------------------------- */
body[data-path="login"] {
	background: var(--amg-page-glow), var(--surface-base);
	background-attachment: fixed;
	min-height: 100vh;
}
body[data-path="login"] .page-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	min-height: 100vh;
}
body[data-path="login"] .page-content-wrapper > .container,
body[data-path="login"] .page_content,
body[data-path="login"] main {
	width: 100%;
}
body[data-path="login"] .page-card {
	position: relative;
	max-width: 384px;
	padding: 32px 32px 28px;
	background: var(--surface-elevation-1);
	border: 1px solid var(--outline-gray-1);
	border-radius: 16px;
	box-shadow: 0 1px 0 #ffffff0a inset, 0 24px 48px -24px #0000002e;
	overflow: hidden;
}
:root[data-theme="dark"] body[data-path="login"] .page-card {
	box-shadow: 0 1px 0 #ffffff0d inset, 0 32px 64px -24px #000000cc;
}
/* signature: a hairline of the iridescent accent across the top of the card */
body[data-path="login"] .page-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--amg-iris-edge);
}
body[data-path="login"] .page-card-head {
	gap: 20px;
}
body[data-path="login"] .page-card-head .app-logo {
	width: 44px;
	height: 44px;
	max-height: none;
	object-fit: contain;
}
/* colour mark on light, reversed (light-on-dark) mark on dark, as brand guidelines do */
:root[data-theme="dark"] body[data-path="login"] .page-card-head .app-logo[src*="/amg/amg-mark"] {
	content: url("/assets/frappe/images/amg/amg-mark-light.svg");
}
body[data-path="login"] .page-card-head h4 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
body[data-path="login"] .page-card .page-card-body input.form-control[type] {
	height: 36px;
	padding: 8px 12px;
	background: var(--surface-base);
	border: 1px solid var(--outline-gray-2);
	border-radius: 8px;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}
body[data-path="login"] .page-card .page-card-body input.form-control[type]:hover {
	border-color: var(--outline-gray-3);
}
body[data-path="login"] .page-card .page-card-body input.form-control[type]:focus {
	border-color: var(--amg-focus);
	box-shadow: 0 0 0 4px #8399ff33;
	outline: none;
}
body[data-path="login"] .page-card-body label {
	color: var(--ink-gray-6);
	font-weight: 500;
}
body[data-path="login"] .page-card-actions .es-button {
	height: 36px;
	border-radius: 8px;
	font-weight: 500;
}
body[data-path="login"] .page-card-actions .es-button[data-variant="solid"] {
	background: var(--surface-gray-10);
	color: var(--ink-base);
}
body[data-path="login"] .page-card-actions .es-button[data-variant="solid"]:hover {
	background: var(--surface-gray-9);
}
body[data-path="login"] .page-card-actions .es-button:focus-visible {
	box-shadow: var(--focus-default);
	outline: none;
}
/* AMG (release 13): the two-factor step of the sign-in (templates/includes/login/login.js request_otp): the same card,
   mark, inputs and button as the sign-in form above it */
body[data-path="login"] #twofactor_div .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 16px;
}
body[data-path="login"] #twofactor_div .amg-2fa-logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
}
:root[data-theme="dark"] body[data-path="login"] #twofactor_div .amg-2fa-logo[src*="/amg/amg-mark"] {
	content: url("/assets/frappe/images/amg/amg-mark-light.svg");
}
body[data-path="login"] #twofactor_div .amg-2fa-title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
body[data-path="login"] #twofactor_div #otp_div .text-muted {
	color: var(--ink-gray-7) !important;
	font-size: 14px;
	line-height: 20px;
	padding-bottom: 16px !important;
}
body[data-path="login"] #twofactor_div #qr_lost {
	color: var(--ink-gray-5);
	font-size: 13px;
}
body[data-path="login"] #twofactor_div #login_token.form-control {
	height: 40px;
	padding: 8px 12px;
	background: var(--surface-base);
	border: 1px solid var(--outline-gray-2);
	border-radius: 8px;
	color: var(--ink-gray-9);
	font-size: 16px;
	letter-spacing: 0.2em;
	font-variant-numeric: tabular-nums;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}
body[data-path="login"] #twofactor_div #login_token.form-control:focus {
	border-color: var(--amg-focus);
	box-shadow: 0 0 0 4px #8399ff33;
	outline: none;
}
body[data-path="login"] #twofactor_div #verify_token.es-button {
	height: 36px;
	border-radius: 8px;
	font-weight: 500;
	background: var(--surface-gray-10);
	color: var(--ink-base);
}
body[data-path="login"] #twofactor_div #verify_token.es-button:hover {
	background: var(--surface-gray-9);
}
body[data-path="login"] a[href="#forgot"]:hover,
body[data-path="login"] .sign-up-message a:hover {
	color: var(--ink-blue-link);
	text-decoration: none;
}

/* ------------------------------------------------------------------------------------------------
 * AMG web pages outside the apps (E2E-50): set password (/update-password), the message page (an expired invite,
 * "not permitted"), not found, errors and the vendor "Your details" web form. templates/includes/amg_theme.html
 * sets data-theme (the person's pick, else their system's) and data-amg-web on <html> before first paint.
 * ---------------------------------------------------------------------------------------------- */
:root[data-amg-web] body {
	background: var(--amg-page-glow), var(--surface-base);
	background-attachment: fixed;
	color: var(--ink-gray-8);
	min-height: 100vh;
	font-family: var(--font-stack);
}
:root[data-amg-web] a {
	color: var(--ink-blue-link);
}
:root[data-amg-web] .page-content-wrapper,
:root[data-amg-web] main,
:root[data-amg-web] .page_content {
	background: transparent;
}

/* the sign-in card language (www/login.html) for set password */
:root[data-amg-web] body[data-path="update-password"] .page-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	min-height: 100vh;
}
:root[data-amg-web] body[data-path="update-password"] .page-content-wrapper > .container,
:root[data-amg-web] body[data-path="update-password"] main,
:root[data-amg-web] body[data-path="update-password"] .page_content {
	width: 100%;
}
:root[data-amg-web] .page-card,
:root[data-amg-web] .error-page > div {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 32px 32px 28px;
	background: var(--surface-elevation-1);
	border: 1px solid var(--outline-gray-1);
	border-radius: 16px;
	box-shadow: 0 1px 0 #ffffff0a inset, 0 24px 48px -24px #0000002e;
	overflow: hidden;
	color: var(--ink-gray-8);
}
:root[data-theme="dark"][data-amg-web] .page-card,
:root[data-theme="dark"][data-amg-web] .error-page > div {
	box-shadow: 0 1px 0 #ffffff0d inset, 0 32px 64px -24px #000000cc;
}
:root[data-amg-web] .page-card::before,
:root[data-amg-web] .error-page > div::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--amg-iris-edge);
}
:root[data-amg-web] .page-card .app-logo,
:root[data-amg-web] .amg-web-mark {
	display: block;
	width: 44px;
	height: 44px;
	max-height: none;
	object-fit: contain;
}
:root[data-theme="dark"][data-amg-web] .page-card .app-logo[src*="/amg/amg-mark"],
:root[data-theme="dark"][data-amg-web] .amg-web-mark {
	content: url("/assets/frappe/images/amg/amg-mark-light.svg");
}
:root[data-amg-web] .page-card h4,
:root[data-amg-web] .error-page h4 {
	color: var(--ink-gray-9);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
:root[data-amg-web] .page-card .page-card-subtitle,
:root[data-amg-web] .page-card label,
:root[data-amg-web] .error-page p {
	color: var(--ink-gray-6);
}
:root[data-amg-web] .page-card input.form-control[type] {
	height: 36px;
	padding: 8px 12px;
	color: var(--ink-gray-9);
	background: var(--surface-base);
	border: 1px solid var(--outline-gray-2);
	border-radius: 8px;
}
:root[data-amg-web] .page-card input.form-control[type]:focus {
	border-color: var(--amg-focus);
	box-shadow: 0 0 0 4px #8399ff33;
	outline: none;
}
:root[data-amg-web] .page-card .es-button[data-variant="solid"],
:root[data-amg-web] .error-page .btn-primary {
	height: 36px;
	border: 0;
	border-radius: 8px;
	font-weight: 500;
	background: var(--surface-gray-10);
	color: var(--ink-base);
}
:root[data-amg-web] .page-card .es-button[data-variant="solid"]:hover,
:root[data-amg-web] .error-page .btn-primary:hover {
	background: var(--surface-gray-9);
}
:root[data-amg-web] .page-card .es-button[data-variant="solid"]:disabled {
	opacity: 0.5;
}

/* message / not found / error / not permitted: an AMG card with the mark */
:root[data-amg-web] .error-page {
	min-height: 100vh;
	height: auto;
	padding: 24px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
:root[data-amg-web] .error-page > div {
	max-width: 440px;
	text-align: left;
}
:root[data-amg-web] .error-page h4 {
	text-align: left;
	margin: 20px 0 0;
}
:root[data-amg-web] .error-page .details {
	max-width: none;
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
	text-align: left;
}
:root[data-amg-web] .error-page .details p {
	line-height: 1.55;
}
:root[data-amg-web] .error-page .details .text-muted {
	color: var(--ink-gray-5) !important;
}
:root[data-amg-web] .error-page .error-content,
:root[data-amg-web] .error-page .fix-command {
	background: var(--surface-gray-1);
	color: var(--ink-gray-7);
}
:root[data-amg-web] .error-page .btn-primary,
:root[data-amg-web] .error-page .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0 14px;
	margin-top: 8px;
}

/* the website navbar and footer of the web forms (vendor "Your details") */
:root[data-amg-web] .navbar,
:root[data-amg-web] .web-footer {
	background: transparent !important;
	border-color: var(--outline-gray-1) !important;
}
:root[data-amg-web] .navbar .nav-link,
:root[data-amg-web] .navbar .navbar-brand,
:root[data-amg-web] .web-footer,
:root[data-amg-web] .web-footer a {
	color: var(--ink-gray-7) !important;
}
:root[data-amg-web] .dropdown-menu {
	background: var(--surface-elevation-2);
	border: 1px solid var(--outline-gray-2);
}
:root[data-amg-web] .dropdown-menu .dropdown-item {
	color: var(--ink-gray-8);
}
:root[data-amg-web] .dropdown-menu .dropdown-item:hover {
	background: var(--surface-gray-2);
}

/* web forms: the form card, labels, controls, sections, buttons */
:root[data-amg-web] .web-form-wrapper,
:root[data-amg-web] .web-form .web-form-wrapper {
	background: var(--surface-elevation-1);
	border: 1px solid var(--outline-gray-1);
	border-radius: 16px;
	color: var(--ink-gray-8);
}
:root[data-amg-web] .web-form-header,
:root[data-amg-web] .web-form-head,
:root[data-amg-web] .web-form .web-form-header {
	border-color: var(--outline-gray-1) !important;
}
:root[data-amg-web] .web-form h1,
:root[data-amg-web] .web-form h2,
:root[data-amg-web] .web-form .web-form-title,
:root[data-amg-web] .web-form .section-head {
	color: var(--ink-gray-9);
}
:root[data-amg-web] .web-form .control-label,
:root[data-amg-web] .web-form .help-box,
:root[data-amg-web] .web-form .web-form-introduction,
:root[data-amg-web] .web-form .text-muted {
	color: var(--ink-gray-6) !important;
}
:root[data-amg-web] .web-form .form-control,
:root[data-amg-web] .web-form select,
:root[data-amg-web] .web-form textarea {
	color: var(--ink-gray-9);
	background: var(--surface-base);
	border: 1px solid var(--outline-gray-2);
	border-radius: 8px;
}
:root[data-amg-web] .web-form .form-control:focus,
:root[data-amg-web] .web-form select:focus,
:root[data-amg-web] .web-form textarea:focus {
	border-color: var(--amg-focus);
	box-shadow: 0 0 0 4px #8399ff33;
}
:root[data-amg-web] .web-form .like-disabled-input,
:root[data-amg-web] .web-form .control-value,
:root[data-amg-web] .web-form .form-control:disabled {
	color: var(--ink-gray-8);
	background: var(--surface-gray-1);
	border-color: var(--outline-gray-1);
}
:root[data-amg-web] .web-form .form-section,
:root[data-amg-web] .web-form .form-section .section-head,
:root[data-amg-web] .web-form .web-form-footer {
	border-color: var(--outline-gray-1) !important;
}
:root[data-amg-web] .web-form .btn-primary,
:root[data-amg-web] .web-form .btn-primary-dark {
	border: 0;
	border-radius: 8px;
	background: var(--surface-gray-10);
	color: var(--ink-base);
}
:root[data-amg-web] .web-form .btn-default,
:root[data-amg-web] .web-form .btn-secondary {
	border: 1px solid var(--outline-gray-2);
	border-radius: 8px;
	background: var(--surface-gray-2);
	color: var(--ink-gray-8);
}
:root[data-amg-web] .web-form .grid-heading-row,
:root[data-amg-web] .web-form .grid-row,
:root[data-amg-web] .web-form .form-grid {
	background: var(--surface-base);
	border-color: var(--outline-gray-2);
	color: var(--ink-gray-8);
}
:root[data-amg-web] .web-form .checkbox label,
:root[data-amg-web] .web-form .checkbox .label-area {
	color: var(--ink-gray-8);
}
@media (max-width: 480px) {
	:root[data-amg-web] .page-card,
	:root[data-amg-web] .error-page > div {
		padding: 28px 20px 24px;
	}
}
:root[data-amg-web] .amg-web-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--ink-gray-6);
	text-decoration: none;
}
:root[data-amg-web] .amg-web-back:hover {
	color: var(--ink-gray-9);
}
:root[data-amg-web] .amg-web-note {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--outline-gray-2);
	border-left: 3px solid var(--amg-focus);
	border-radius: 8px;
	background: var(--surface-gray-1);
	color: var(--ink-gray-7);
	font-size: 13px;
}

/* AMG (release 11, E2E-63): the row-number column of report tables is sized for the table's own font; at the AMG OS
   size a two-digit row number showed as "1…". Less side padding, and never an ellipsis on a number. */
.datatable .dt-cell--sticky > .dt-cell__content,
.datatable .dt-cell__content--col-0,
.datatable .dt-cell__content--header-0 {
	padding-left: 4px;
	padding-right: 4px;
	text-overflow: clip;
}

/* AMG (release 14, C100): the list's "Filters N" button once a filter is on (btn-primary-light) read mid-grey on a
   lighter grey chip in the dark desk (1.64:1): the theme's ink on a raised fill, in both themes */
html[data-theme-mode] .filter-button.btn-primary-light,
html[data-theme-mode] .filter-button.btn-primary-light .button-label {
	color: var(--ink-gray-9);
}
html[data-theme-mode] .filter-button.btn-primary-light {
	background-color: var(--surface-gray-3);
}
html[data-theme-mode] .filter-button.btn-primary-light:hover {
	background-color: var(--surface-gray-4);
}
html[data-theme-mode] .filter-button.btn-primary-light .filter-icon,
html[data-theme-mode] .filter-button.btn-primary-light .icon {
	--icon-stroke: var(--ink-gray-9);
	stroke: var(--ink-gray-9);
}
html[data-theme-mode] .filter-button.btn-primary-light .filter-label {
	color: var(--ink-gray-9);
	background-color: var(--surface-gray-5);
}

/* AMG (release 14, C101): the letters a search matched (the desk's Search / Cmd+K list and every awesomplete list,
   the global search results) are marked with the accent - a soft periwinkle under the theme's ink - not the
   browser's pale yellow, which glared and was hard to read in the dark desk */
html[data-theme-mode] .awesomplete mark,
html[data-theme-mode] .search-dialog mark,
html[data-theme-mode] .search-results mark,
html[data-theme-mode] .global-search mark,
html[data-theme-mode] .modal mark {
	padding: 0;
	border-radius: 2px;
	color: var(--ink-gray-9);
	background-color: var(--amg-selection);
	font-weight: 600;
}

/* AMG (release 14, C099): My Account (/me) and Third Party Apps (/third_party_apps) - the portal card in the AMG
   look (frappe/utils/amg_web_theme.py turns the AMG page styles on): the card, its accent hairline and the theme's
   ink; at phone width the card takes the width and a session's row keeps its "Revoke" inside it */
:root[data-amg-web] .portal-container {
	position: relative;
	max-width: 540px;
	margin: 48px auto;
	padding: 28px;
	overflow: hidden;
	background: var(--surface-elevation-1);
	border: 1px solid var(--outline-gray-1);
	border-radius: 16px;
	box-shadow: 0 1px 0 #ffffff0a inset, 0 24px 48px -24px #0000002e;
	color: var(--ink-gray-8);
}
:root[data-theme="dark"][data-amg-web] .portal-container {
	box-shadow: 0 1px 0 #ffffff0d inset, 0 32px 64px -24px #000000cc;
}
:root[data-amg-web] .portal-container::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--amg-iris-edge);
}
:root[data-amg-web] .portal-container .portal-section .title,
:root[data-amg-web] .portal-container h4,
:root[data-amg-web] .portal-container .font-weight-bold {
	color: var(--ink-gray-9);
}
:root[data-amg-web] .portal-container .text-muted,
:root[data-amg-web] .portal-container .item-link-text {
	color: var(--ink-gray-6) !important;
}
:root[data-amg-web] .portal-container .portal-items,
:root[data-amg-web] .portal-container .portal-items .portal-section {
	border-color: var(--outline-gray-1);
}
:root[data-amg-web] .portal-container .third-party-wrapper {
	padding: 12px;
	background: transparent;
}
:root[data-amg-web] .portal-container .third-party-wrapper h4 {
	margin: 4px 0 8px;
	font-size: 15px;
	font-weight: 600;
}
:root[data-amg-web] .portal-container .web-list-item .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
}
:root[data-amg-web] .portal-container .web-list-item .row > [class*="col-"] {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
}
:root[data-amg-web] .portal-container .web-list-item .row > .col-xs-6 {
	min-width: 0;
	overflow-wrap: anywhere;
}
:root[data-amg-web] .portal-container .well {
	background: var(--surface-gray-1);
	border: 1px solid var(--outline-gray-1);
	border-radius: 10px;
	padding: 14px;
}
:root[data-amg-web] .portal-container .empty-apps-state img {
	max-width: 120px;
	opacity: 0.85;
}
:root[data-amg-web] .portal-footer a {
	color: var(--ink-gray-6);
}
:root[data-amg-web] .portal-footer a:hover {
	color: var(--ink-gray-9);
}
@media (max-width: 575px) {
	:root[data-amg-web] .portal-container {
		margin: 16px;
		padding: 20px 16px;
	}
	:root[data-amg-web] .portal-container .third-party-wrapper {
		padding: 8px 0;
	}
	/* a session's app name takes the row; when it was signed in and "Revoke" sit under it */
	:root[data-amg-web] .portal-container .web-list-item .row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 4px;
	}
	:root[data-amg-web] .portal-container .web-list-item .row > .col-xs-6 {
		grid-column: 1 / -1;
	}
	:root[data-amg-web] .portal-container .web-list-item .row > .col-xs-4 {
		text-align: left;
	}
}

/* AMG (release 14, C104): on a phone (under 400 px) the apps screen's tile names wrap to two lines - "AMG Finance",
   never "AMG Fina…" */
@media (max-width: 399.98px) {
	.desktop-icon .icon-caption .icon-title {
		white-space: normal;
		text-overflow: clip;
		overflow: hidden;
		overflow-wrap: anywhere;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.25;
		text-align: center;
	}
}

/* AMG (release 14, C099): "Edit Profile" (/update-profile, from My Account) - its title is an h1 in the form's header,
   outside .web-form: the theme's ink there too (it stayed the website's near-black on the dark page) */
:root[data-amg-web] .web-form-header h1,
:root[data-amg-web] .web-form-header .web-form-title {
	color: var(--ink-gray-9);
}