/*
 * Rapid Fusion theme for ERPNext (desk), the login page and Frappe CRM.
 * Mirrors knowledge-centre public/rf-design-system.css: Karla, brand purple,
 * and the KC's blue-black dark palette. Frappe switches modes with
 * <html data-theme="light|dark">, so both blocks below follow the user's
 * own Light / Dark / Automatic choice.
 */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');

:root,
[data-theme="light"] {
	--rf-font: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--rf-primary: #8a4482;
	--rf-primary-hover: #763a6f;
	--rf-primary-muted: rgba(138, 68, 130, 0.1);
	--rf-on-primary: #ffffff;

	/* Desk font + accent */
	--font-stack: var(--rf-font);
	--primary: var(--rf-primary);
	--primary-color: var(--rf-primary);
	--btn-primary: var(--rf-primary);

	/* Frappe's "strongest fill" is the accent role: solid buttons,
	   checked boxes, active switches. Make it the brand purple. */
	--surface-gray-10: var(--rf-primary);
	--focus-default: 0 0 0 3px rgba(138, 68, 130, 0.25);
	--focus-outline-default: 3px solid rgba(138, 68, 130, 0.35);

	/* Espresso (desk) solid buttons */
	--bt-solid-bg: var(--rf-primary);
	--bt-solid-bg-hover: var(--rf-primary-hover);
	--bt-solid-bg-active: var(--rf-primary-hover);
	--bt-solid-fg: var(--rf-on-primary);

	/* KC light palette: grey page (#eef0f3), white panels, #f4f5f7 for the
	   sidebar and hovers, KC text and hairline colours */
	--surface-gray-1: #f4f5f7;
	--surface-gray-2: #eef0f3;
	--surface-menu-bar: #f4f5f7;
	--ink-gray-9: #1c2028;
	--ink-gray-8: rgba(16, 24, 40, 0.86);
	--ink-gray-7: rgba(16, 24, 40, 0.72);
	--ink-gray-6: rgba(16, 24, 40, 0.62);
	--ink-gray-5: rgba(16, 24, 40, 0.56);
	--ink-gray-4: rgba(16, 24, 40, 0.45);
	--outline-gray-1: rgba(16, 24, 40, 0.08);
	--outline-gray-2: rgba(16, 24, 40, 0.12);
	--outline-gray-3: rgba(16, 24, 40, 0.18);
	--bg-color: #eef0f3;
}

/* Page behind the white panels, as on the Knowledge Centre */
body,
.page-container,
.layout-main-section-wrapper { background-color: var(--bg-color); }

[data-theme="dark"] {
	--rf-primary: #a74e9e;
	--rf-primary-hover: #bb6db3;
	--rf-primary-muted: rgba(167, 78, 158, 0.15);

	--primary: var(--rf-primary);
	--primary-color: var(--rf-primary);
	--btn-primary: var(--rf-primary);
	--surface-gray-10: var(--rf-primary);
	--focus-default: 0 0 0 3px rgba(167, 78, 158, 0.35);
	--focus-outline-default: 3px solid rgba(167, 78, 158, 0.45);
	--bt-solid-bg: var(--rf-primary);
	--bt-solid-bg-hover: var(--rf-primary-hover);
	--bt-solid-bg-active: var(--rf-primary-hover);
	--bt-solid-fg: #ffffff;

	/* KC dark text scale: secondary 70%, tertiary 50% white */
	--ink-gray-9: #ffffff;
	--ink-gray-8: rgba(255, 255, 255, 0.92);
	--ink-gray-7: rgba(255, 255, 255, 0.8);
	--ink-gray-6: rgba(255, 255, 255, 0.7);
	--ink-gray-5: rgba(255, 255, 255, 0.56);
	--ink-gray-4: rgba(255, 255, 255, 0.42);

	/* KC dark palette (#0a0a0f / #111118 / #181820 / #1e1e28) */
	--surface-base: #111118;
	--surface-white: #111118;
	--surface-gray-1: #16161e;
	--surface-gray-2: #1e1e28;
	--surface-gray-3: #262630;
	--surface-gray-4: #2e2e3a;
	--surface-elevation-1: #16161e;
	--surface-elevation-2: #1e1e28;
	--surface-elevation-3: #262630;
	--surface-modal: #181820;
	--surface-menu-bar: #0d0d13;
	--ink-base: #111118;
	--outline-base: #111118;
	--outline-elevation-1: rgba(255, 255, 255, 0.08);
	--outline-elevation-2: rgba(255, 255, 255, 0.15);
	--outline-gray-1: rgba(255, 255, 255, 0.08);
	--outline-gray-2: rgba(255, 255, 255, 0.12);
	--bg-color: #0a0a0f;
}

/* Font everywhere: desk, login, CRM (Tailwind font-sans) */
html,
body,
.font-sans,
input,
textarea,
select,
button,
.frappe-control,
.ql-editor {
	font-family: var(--rf-font) !important;
}

/* Text on brand purple stays white in both modes */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.bg-surface-gray-10,
.bg-surface-gray-10 * {
	color: var(--rf-on-primary, #fff) !important;
	--ink-white: #fff;
	--icon-stroke: #fff;
}
.btn-primary:hover,
.hover\:bg-surface-gray-9:hover {
	background-color: var(--rf-primary-hover) !important;
}

/* Links in content */
.frappe-control a:not(.btn),
.ql-editor a,
.text-ink-blue-link {
	color: var(--rf-primary);
}

/* Logos: swap to the light-text variant in dark mode */
[data-theme="dark"] img[src*="rf-icon.svg"],
[data-theme="dark"] img[src*="rf-logo-full.svg"] {
	content: url('/assets/rf_theme/images/rf-icon-dark.svg');
}
[data-theme="dark"] img[src*="rf-logo-full.svg"] {
	content: url('/assets/rf_theme/images/rf-logo-full-dark.svg');
}

/* CRM's built-in app logo (an inline SVG, recoloured to #A74E9F at build
   time as a marker): show the real Rapid Fusion mark instead. */
svg:has(> path[fill="#A74E9F"]) {
	background: url('/assets/rf_theme/images/rf-icon.svg') center / contain no-repeat;
	border-radius: 0 !important;
}
[data-theme="dark"] svg:has(> path[fill="#A74E9F"]) {
	background-image: url('/assets/rf_theme/images/rf-icon-dark.svg');
}
svg:has(> path[fill="#A74E9F"]) > path {
	display: none;
}

/* Login page: the login styles set button colours on .es-button itself */
:root .es-button,
[data-theme="dark"] .es-button {
	--bt-solid-bg: var(--rf-primary);
	--bt-solid-bg-hover: var(--rf-primary-hover);
	--bt-solid-bg-active: var(--rf-primary-hover);
	--bt-solid-fg: #ffffff;
}
/* "Sign in with Knowledge Centre" is how staff sign in: make it the main button */
.login-button-wrapper:has(.btn-knowledge_centre),
.social-logins:has(.btn-knowledge_centre) {
	display: flex;
	flex-direction: column;
}
.btn-login-option img {
	width: 18px !important;
	height: 18px !important;
	margin-right: 8px;
	vertical-align: -3px;
}
.btn-knowledge_centre {
	order: -1;
	background: var(--rf-primary) !important;
	color: #ffffff !important;
	font-weight: 600;
}
.btn-knowledge_centre:hover {
	background: var(--rf-primary-hover) !important;
}