/* FlexyGrid brand theme for ERPNext / Frappe (desk + website + login).
 *
 * Source of truth: the FlexyGrid design system in FlexyGrid/platform
 * frontend/packages/design-tokens (primitives.css ramps, semantic.css roles,
 * chrome.css "Brand-on-edge"). Only Frappe's CSS variables and a handful of
 * stable selectors are touched, so ERPNext upgrades keep working.
 *
 * Brand-on-edge: header and sidebar stay NEUTRAL; the brand shows as a 2px
 * accent bar on top of the viewport, a 3px stripe on the selected sidebar item,
 * primary buttons, tabs, checkboxes and focus rings.
 *
 * Loaded by hooks.py app_include_css (desk) and web_include_css (login/portal).
 * Lato is served from this app (OFL, fonts/OFL.txt), not from Google Fonts.
 */

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/flexygrid_admin/fonts/lato-latin-400-normal.woff2") format("woff2");
	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;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/flexygrid_admin/fonts/lato-latin-700-normal.woff2") format("woff2");
	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;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/flexygrid_admin/fonts/lato-latin-ext-400-normal.woff2") format("woff2");
	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: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/flexygrid_admin/fonts/lato-latin-ext-700-normal.woff2") format("woff2");
	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;
}

/* ---------- FlexyGrid primitives (Emerald ramp, primitives.css) ---------- */
:root {
	--fg-primary-5: #ebf9f5;
	--fg-primary-10: #d8f3eb;
	--fg-primary-20: #b0e8d8;
	--fg-primary-30: #89dcc4;
	--fg-primary-40: #61d1b0;
	--fg-primary-50: #38c098; /* BRAND — Mint Spark */
	--fg-primary-60: #2e9e7d;
	--fg-primary-70: #23765e;
	--fg-primary-80: #174f3f; /* deep forest */
	--fg-font: "Lato", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Frappe variables → FlexyGrid semantic roles ---------- */
:root,
[data-theme="light"] {
	--fg-accent: var(--fg-primary-50);
	--fg-selected: var(--fg-primary-5); /* --surface-selected */
	--fg-link: var(--fg-primary-70); /* --text-link, AA on white */

	--primary: var(--fg-primary-50);
	--primary-color: var(--fg-primary-50);
	--brand-color: var(--fg-primary-50);
	--btn-primary: var(--fg-primary-50);
	--sidebar-select-color: var(--fg-selected);
	--checkbox-focus-shadow: 0 0 0 2px var(--fg-primary-20);
	--highlight-shadow: 0 0 0 2px var(--fg-primary-20);
	--font-stack: var(--fg-font);
}

[data-theme="dark"] {
	--fg-accent: var(--fg-primary-50);
	--fg-selected: rgba(56, 192, 152, 0.16); /* --surface-selected (dark) */
	--fg-link: var(--fg-primary-40); /* lifted for AA on dark */

	--primary: var(--fg-primary-50);
	--primary-color: var(--fg-primary-50);
	--brand-color: var(--fg-primary-50);
	--btn-primary: var(--fg-primary-50);
	--sidebar-select-color: var(--fg-selected);
	--checkbox-focus-shadow: 0 0 0 2px rgba(56, 192, 152, 0.4);
	--highlight-shadow: 0 0 0 2px rgba(56, 192, 152, 0.4);
	--font-stack: var(--fg-font);
}

body {
	font-family: var(--fg-font);
}

/* ---------- Brand-on-edge chrome (chrome.css) ---------- */
/* 2px accent bar at row 0 of the viewport, above every chrome element. */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--fg-accent);
	z-index: 1100;
	pointer-events: none;
}

/* Selected sidebar item: brand pill + 3px stripe on the inner edge. */
.standard-sidebar-item.selected,
.desk-sidebar-item.selected {
	background-color: var(--fg-selected);
	box-shadow: inset 3px 0 0 var(--fg-accent);
}

/* Logo: wordmark in the navbar, white variant on dark. */
.navbar-brand .app-logo {
	max-height: 24px;
	width: auto;
}
[data-theme="dark"] .navbar-brand .app-logo {
	content: url("/assets/flexygrid_admin/images/flexygrid-logo-dark.svg");
}

/* ---------- Actions (--action-primary*) ---------- */
.btn.btn-primary,
.btn.btn-primary:focus {
	background-color: var(--fg-primary-50);
	border-color: var(--fg-primary-50);
	color: #fff;
}
.btn.btn-primary:hover {
	background-color: var(--fg-primary-60);
	border-color: var(--fg-primary-60);
	color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
	background-color: var(--fg-primary-70);
	border-color: var(--fg-primary-70);
	color: #fff;
}

/* Inputs: brand focus ring (--border-focus). */
.form-control:focus,
.frappe-control input:focus,
.awesomplete input:focus {
	border-color: var(--fg-primary-50);
	box-shadow: 0 0 0 2px var(--fg-primary-20);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .frappe-control input:focus,
[data-theme="dark"] .awesomplete input:focus {
	box-shadow: 0 0 0 2px rgba(56, 192, 152, 0.4);
}

/* Inline links in form fields and text (--text-link). */
.control-value a,
.like-disabled-input a,
.ql-editor a,
.page-card a:not(.btn) {
	color: var(--fg-link);
}

/* ---------- Login / website ---------- */
/* Website navbar brand (Website Settings.brand_html, see branding.json). */
.navbar-brand .fg-brand-logo {
	height: 24px;
	width: auto;
}
[data-theme="dark"] .navbar-brand .fg-brand-logo {
	content: url("/assets/flexygrid_admin/images/flexygrid-logo-dark.svg");
}

.page-card-head .app-logo {
	width: auto;
	max-width: 240px;
	height: 44px;
}

@media print {
	body::before {
		display: none;
	}
}