/*
 * KLIXY unified interface theme
 * Visual-only overrides shared by Desk, ERPNext, HRMS, Gameplan, CRM, Raven,
 * Mail and KLIXY custom apps. Business logic and component behavior stay intact.
 */

@font-face {
	font-family: "Funnel Display";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("/assets/klixy_sales/fonts/FunnelDisplay-Variable.ttf") format("truetype");
}

:root,
html[data-theme="light"],
html[data-theme="dark"] {
	color-scheme: dark;
	--klixy-bg: #161616;
	--klixy-surface: #1c1c1c;
	--klixy-surface-raised: #232323;
	--klixy-surface-hover: #2b2b2b;
	--klixy-border: #343434;
	--klixy-border-strong: #535151;
	--klixy-text: #ffffff;
	--klixy-text-soft: #d4d4d4;
	--klixy-muted: #acacac;
	--klixy-subtle: #717171;
	--klixy-accent: #8fff00;
	--klixy-accent-hover: #a4ff33;
	--klixy-accent-active: #78d600;
	--klixy-accent-soft: rgba(143, 255, 0, 0.12);
	--klixy-accent-border: rgba(143, 255, 0, 0.42);
	--klixy-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
	--klixy-font: "Funnel Display", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

	/* Frappe / ERPNext semantic tokens */
	--primary: var(--klixy-accent);
	--primary-color: var(--klixy-accent);
	--brand-color: var(--klixy-accent);
	--primary-light: var(--klixy-accent-soft);
	--bg-color: var(--klixy-bg);
	--fg-color: var(--klixy-surface);
	--card-bg: var(--klixy-surface);
	--navbar-bg: var(--klixy-bg);
	--popover-bg: var(--klixy-surface-raised);
	--modal-bg: var(--klixy-surface-raised);
	--control-bg: var(--klixy-surface-raised);
	--control-bg-on-gray: var(--klixy-surface);
	--subtle-accent: var(--klixy-surface-hover);
	--sidebar-select-color: var(--klixy-surface-hover);
	--awesomplete-hover-bg: var(--klixy-surface-hover);
	--awesomebar-focus-bg: var(--klixy-surface-raised);
	--text-color: var(--klixy-text-soft);
	--text-muted: var(--klixy-muted);
	--heading-color: var(--klixy-text);
	--input-disabled-bg: #202020;
	--disabled-text-color: var(--klixy-subtle);
	--border-color: var(--klixy-border);
	--light-border-color: #2b2b2b;
	--dark-border-color: var(--klixy-border-strong);
	--table-border-color: var(--klixy-border);
	--shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.2);
	--shadow-md: var(--klixy-shadow);
	--shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.42);

	/* Shared frappe-ui tokens used by Gameplan, CRM and Mail */
	--neutral-white: #ffffff;
	--neutral-black: #000000;
	--neutral: var(--klixy-bg);
	--invert-neutral: var(--klixy-text);
	--gray-50: #f8f8f8;
	--gray-100: #d4d4d4;
	--gray-200: #acacac;
	--gray-300: #808080;
	--gray-400: #717171;
	--gray-500: #535151;
	--gray-600: #424242;
	--gray-700: #343434;
	--gray-800: #232323;
	--gray-900: #161616;
	--surface-white: var(--klixy-bg);
	--surface-menu-bar: var(--klixy-bg);
	--surface-cards: var(--klixy-surface);
	--surface-modal: var(--klixy-surface-raised);
	--surface-selected: var(--klixy-surface-hover);
	--surface-gray-1: var(--klixy-surface);
	--surface-gray-2: var(--klixy-surface-raised);
	--surface-gray-3: var(--klixy-surface-hover);
	--surface-gray-4: var(--klixy-border);
	--surface-gray-5: #808080;
	--surface-gray-6: var(--klixy-text-soft);
	--surface-gray-7: var(--klixy-text);
	--ink-white: var(--klixy-bg);
	--ink-gray-1: var(--klixy-surface-raised);
	--ink-gray-2: var(--klixy-border);
	--ink-gray-3: var(--klixy-border-strong);
	--ink-gray-4: var(--klixy-subtle);
	--ink-gray-5: #808080;
	--ink-gray-6: var(--klixy-muted);
	--ink-gray-7: var(--klixy-text-soft);
	--ink-gray-8: #f8f8f8;
	--ink-gray-9: var(--klixy-text);
	--outline-white: var(--klixy-surface);
	--outline-gray-1: #2b2b2b;
	--outline-gray-2: var(--klixy-border);
	--outline-gray-3: #424242;
	--outline-gray-4: #808080;
	--outline-gray-5: var(--klixy-border);
	--outline-gray-modals: var(--klixy-border);

	/* The website's fluorescent green becomes the shared interactive accent. */
	--blue-50: #f6ffe8;
	--blue-100: #e8ffc7;
	--blue-200: #ceff8f;
	--blue-300: #b5ff57;
	--blue-400: #a1ff2e;
	--blue-500: var(--klixy-accent);
	--blue-600: #78d600;
	--blue-700: #61ad00;
	--blue-800: #497f06;
	--blue-900: #2d4d08;
	--surface-blue-1: #1c2a08;
	--surface-blue-2: #263a08;
	--surface-blue-3: var(--klixy-accent);
	--ink-blue-1: #efffd8;
	--ink-blue-2: var(--klixy-accent-hover);
	--ink-blue-3: var(--klixy-accent);
	--ink-blue-link: var(--klixy-accent);
	--outline-blue-1: var(--klixy-accent-border);
	--focus-ring-color: var(--klixy-accent-border);
	--highlight-color: var(--klixy-accent-soft);

	/* Data table tokens */
	--dt-cell-bg: var(--klixy-surface);
	--dt-header-cell-bg: var(--klixy-surface-raised);
	--dt-row-hover: var(--klixy-surface-hover);
	--dt-border-color: var(--klixy-border);

	font-family: var(--klixy-font);
	background: var(--klixy-bg);
	color: var(--klixy-text-soft);
}

html,
body,
#app,
#root,
.page-container,
.main-section {
	background-color: var(--klixy-bg);
	color: var(--klixy-text-soft);
}

body,
button,
input,
textarea,
select,
.form-control,
.frappe-control,
.ql-editor {
	font-family: var(--klixy-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.modal-title,
.form-section-heading,
.widget-head .widget-title {
	color: var(--klixy-text);
	font-family: var(--klixy-font) !important;
	font-weight: 600;
	letter-spacing: -0.015em;
}

::selection {
	background: var(--klixy-accent);
	color: #0a0a0a;
}

* {
	scrollbar-color: var(--klixy-border-strong) var(--klixy-bg);
}

*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

*::-webkit-scrollbar-track {
	background: var(--klixy-bg);
}

*::-webkit-scrollbar-thumb {
	background: var(--klixy-border-strong);
	border: 2px solid var(--klixy-bg);
	border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--klixy-accent);
}

:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--klixy-accent) !important;
	outline-offset: 2px;
}

a,
.link-btn {
	color: inherit;
}

a:hover,
.link-btn:hover {
	color: var(--klixy-accent);
}

/* Navigation and sidebars */
.navbar,
.desk-navbar,
.layout-side-section,
.desk-sidebar,
.list-sidebar,
.form-sidebar,
.standard-sidebar,
.standard-sidebar-section,
aside,
nav {
	border-color: var(--klixy-border) !important;
}

.navbar,
.desk-navbar,
.desk-sidebar,
.standard-sidebar {
	background-color: var(--klixy-bg) !important;
}

.standard-sidebar-item:hover,
.standard-sidebar-item.selected,
.desk-sidebar-item:hover,
.desk-sidebar-item.selected,
.list-sidebar .list-link:hover,
.list-sidebar .list-link.active,
.nav-link:hover,
.nav-link.active,
[role="tab"][aria-selected="true"] {
	background-color: var(--klixy-accent-soft) !important;
	color: var(--klixy-text) !important;
}

.standard-sidebar-item.selected,
.desk-sidebar-item.selected,
.nav-link.active,
[role="tab"][aria-selected="true"] {
	box-shadow: inset 3px 0 0 var(--klixy-accent);
}

[dir="rtl"] .standard-sidebar-item.selected,
[dir="rtl"] .desk-sidebar-item.selected,
[dir="rtl"] .nav-link.active,
[dir="rtl"] [role="tab"][aria-selected="true"] {
	box-shadow: inset -3px 0 0 var(--klixy-accent);
}

/* Cards, pages, dialogs and floating surfaces */
.card,
.widget,
.form-page,
.form-dashboard-section,
.layout-main-section,
.modal-content,
.dropdown-menu,
.popover,
.menu-content,
[role="dialog"],
[data-radix-popper-content-wrapper] > div {
	background-color: var(--klixy-surface) !important;
	border-color: var(--klixy-border) !important;
}

.card,
.widget,
.form-page,
.modal-content,
[role="dialog"] {
	border-radius: 16px;
	box-shadow: var(--klixy-shadow);
}

.dropdown-menu,
.popover,
.menu-content {
	box-shadow: var(--klixy-shadow) !important;
}

.dropdown-item,
[role="menuitem"] {
	color: var(--klixy-text-soft) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
[role="menuitem"]:hover,
[role="menuitem"]:focus {
	background: var(--klixy-surface-hover) !important;
	color: var(--klixy-text) !important;
}

/* Forms */
.form-control,
.input-with-feedback,
.input-group-text,
.ql-toolbar,
.ql-container,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
[role="combobox"] {
	background-color: var(--klixy-surface-raised) !important;
	border-color: var(--klixy-border) !important;
	color: var(--klixy-text) !important;
	box-shadow: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--klixy-subtle) !important;
}

.form-control:focus,
.input-with-feedback:focus,
input:focus,
textarea:focus,
select:focus,
[role="combobox"]:focus-within {
	border-color: var(--klixy-accent) !important;
	box-shadow: 0 0 0 3px var(--klixy-accent-soft) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.checkbox input:checked + label::before {
	background-color: var(--klixy-accent) !important;
	border-color: var(--klixy-accent) !important;
	color: #0a0a0a !important;
}

/* Buttons: fluorescent green for the main action, monochrome elsewhere. */
.btn-primary,
.btn.btn-primary,
button[data-variant="solid"],
[role="button"][data-variant="solid"],
button[class~="bg-surface-gray-7"],
a[class~="bg-surface-gray-7"] {
	background: var(--klixy-accent) !important;
	border-color: var(--klixy-accent) !important;
	color: #0a0a0a !important;
	box-shadow: none !important;
	font-weight: 600;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button[data-variant="solid"]:hover,
[role="button"][data-variant="solid"]:hover,
button[class~="bg-surface-gray-7"]:hover,
a[class~="bg-surface-gray-7"]:hover {
	background: var(--klixy-accent-hover) !important;
	border-color: var(--klixy-accent-hover) !important;
}

.btn-primary:active,
.btn.btn-primary:active,
button[data-variant="solid"]:active,
[role="button"][data-variant="solid"]:active,
button[class~="bg-surface-gray-7"]:active,
a[class~="bg-surface-gray-7"]:active {
	background: var(--klixy-accent-active) !important;
	border-color: var(--klixy-accent-active) !important;
}

.btn-default,
.btn-secondary,
.btn.btn-default,
.btn.btn-secondary {
	background: var(--klixy-surface-raised) !important;
	border-color: var(--klixy-border) !important;
	color: var(--klixy-text) !important;
	box-shadow: none !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn.btn-default:hover,
.btn.btn-secondary:hover {
	background: var(--klixy-surface-hover) !important;
	border-color: var(--klixy-border-strong) !important;
}

/* Lists, grids and tables */
.list-row,
.list-row-head,
.grid-heading-row,
.grid-row,
.datatable .dt-row,
.datatable .dt-cell,
table,
th,
td {
	border-color: var(--klixy-border) !important;
}

.list-row,
.grid-row,
.datatable .dt-cell,
tbody tr {
	background-color: var(--klixy-surface) !important;
}

.list-row-head,
.grid-heading-row,
.datatable .dt-header .dt-cell,
thead th {
	background-color: var(--klixy-surface-raised) !important;
	color: var(--klixy-muted) !important;
}

.list-row:hover,
.grid-row:hover,
.datatable .dt-row:hover .dt-cell,
tbody tr:hover td {
	background-color: var(--klixy-surface-hover) !important;
}

.indicator-pill,
.badge,
.tag {
	border: 1px solid var(--klixy-border);
}

.indicator-pill.gray,
.badge-secondary {
	background: var(--klixy-surface-raised) !important;
	color: var(--klixy-text-soft) !important;
}

.indicator-pill.blue,
.badge-primary {
	background: var(--klixy-accent-soft) !important;
	border-color: var(--klixy-accent-border) !important;
	color: var(--klixy-accent) !important;
}

/* Progress and selection affordances */
.progress-bar,
[role="progressbar"] > div,
.slider-progress,
.switch input:checked + .slider,
[role="switch"][aria-checked="true"] {
	background-color: var(--klixy-accent) !important;
}

.page-head,
.page-head-content,
.form-tabs-list,
.form-section,
.section-head,
.timeline,
.comment-box,
.ql-toolbar,
.ql-container {
	border-color: var(--klixy-border) !important;
}

/* Raven uses Radix Themes rather than frappe-ui tokens. */
.radix-themes {
	--default-font-family: var(--klixy-font);
	--heading-font-family: var(--klixy-font);
	--color-background: var(--klixy-bg);
	--panel-solid: var(--klixy-surface);
	--panel-translucent: rgba(28, 28, 28, 0.94);
	--accent-1: #182200;
	--accent-2: #1d2d00;
	--accent-3: #284100;
	--accent-4: #335600;
	--accent-5: #3e6b00;
	--accent-6: #4c8100;
	--accent-7: #5e9d00;
	--accent-8: #74c000;
	--accent-9: var(--klixy-accent);
	--accent-10: var(--klixy-accent-hover);
	--accent-11: #adff49;
	--accent-12: #efffd8;
	--accent-contrast: #0a0a0a;
	--accent-surface: var(--klixy-accent-soft);
	--accent-indicator: var(--klixy-accent);
	--accent-track: var(--klixy-accent);
	--gray-1: var(--klixy-bg);
	--gray-2: var(--klixy-surface);
	--gray-3: var(--klixy-surface-raised);
	--gray-4: var(--klixy-surface-hover);
	--gray-5: var(--klixy-border);
	--gray-6: #424242;
	--gray-7: var(--klixy-border-strong);
	--gray-8: var(--klixy-subtle);
	--gray-9: #808080;
	--gray-10: #999999;
	--gray-11: var(--klixy-muted);
	--gray-12: var(--klixy-text);
}

/* Login and public screens */
body[data-path="login"],
.for-login,
.for-forgot,
.for-signup {
	background: var(--klixy-bg) !important;
}

.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.login-content.page-card {
	background: var(--klixy-surface) !important;
	border: 1px solid var(--klixy-border);
	border-radius: 20px;
	box-shadow: var(--klixy-shadow);
}

.for-login h4,
.for-forgot h4,
.for-signup h4,
.page-card-head h4 {
	color: var(--klixy-text) !important;
}

.page-card-subtitle,
.page-card-actions,
.page-card-actions a,
.forgot-password-message,
.forgot-password-message a {
	color: var(--klixy-muted) !important;
}

.for-login button.btn-login:not(.btn-login-with-email-link) {
	background: var(--klixy-accent) !important;
	border-color: var(--klixy-accent) !important;
	color: #0a0a0a !important;
	font-weight: 600;
}

.for-login button.btn-login:not(.btn-login-with-email-link):hover {
	background: var(--klixy-accent-hover) !important;
	border-color: var(--klixy-accent-hover) !important;
}

@media (max-width: 768px) {
	.card,
	.widget,
	.form-page,
	.modal-content,
	[role="dialog"] {
		border-radius: 12px;
	}

	*::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
}

@media print {
	:root,
	html,
	body,
	#app,
	#root,
	.print-format {
		color-scheme: light;
		background: #ffffff !important;
		color: #000000 !important;
	}

	.card,
	.widget,
	.form-page,
	.list-row,
	.grid-row,
	.datatable .dt-cell,
	table,
	thead,
	tbody,
	tr,
	th,
	td {
		background: #ffffff !important;
		color: #000000 !important;
		box-shadow: none !important;
	}
}