/**
 * Savvy X — global theme (Desk, CRM SPA, Website).
 * Bootstrap Icons: vendored in bootstrap-icons.min.css + css/fonts/ (see hooks app_include_css order).
 * Desk logo / favicon: savvy-x-mark.svg via boot + branding (not Frappe include_icons).
 */

:root {
	--sxy-brand: #0f4c81;
	--sxy-brand-light: #e8f1fa;
}

/* ERPNext / Desk chrome */
.navbar-home,
.app-logo,
.navbar-brand {
	font-weight: 700 !important;
	color: var(--sxy-brand) !important;
}

/* Hide vendor promo surfaces (Help docs → JS redirect) */
a[href*="discuss.frappe.io"],
a[href*="github.com/frappe"],
a[href*="erpnext.com"] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Savvy X — shared design tokens (Desk light theme + CRM + web)
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"],
html.savvy-x {
	--outline-white: #ffffff;
	--outline-gray-1: #dce3ed;
	--outline-gray-2: #c9d4e4;
	--outline-gray-3: #a8b8cc;
	--outline-gray-4: #7c8ca0;
	--outline-gray-5: #3d4f63;
	--outline-gray-modals: #dce3ed;

	--surface-white: #ffffff;
	--surface-gray-1: #f3f6fa;
	--surface-gray-2: #e9eef5;
	--surface-gray-3: #dce4ef;
	--surface-gray-4: #cbd5e4;
	--surface-gray-5: #64748b;
	--surface-gray-6: #475569;
	--surface-gray-7: #1e293b;

	--surface-menu-bar: #eef2f8;
	--surface-cards: #ffffff;
	--surface-modal: #ffffff;
	--surface-selected: #f8fafc;

	--surface-blue-1: #e8f1fa;
	--surface-blue-2: #d4e7f7;
	--surface-blue-3: var(--sxy-brand);

	--surface-red-1: #fef7f7;
	--surface-red-2: #fdecec;
	--surface-red-3: #ffd6d6;
	--surface-red-4: #f9c0c0;
	--surface-red-5: #c62828;
	--surface-red-6: #b12727;
	--surface-red-7: #8f1f1f;

	--surface-green-1: #f0fdf6;
	--surface-green-2: #dcfae8;
	--surface-green-3: #1d8b5c;

	--surface-amber-1: #fffbeb;
	--surface-amber-2: #fef3c7;
	--surface-amber-3: #c27803;

	--surface-orange-1: #fff4ed;
	--surface-violet-1: #f3f0ff;
	--surface-cyan-1: #e8fbff;
	--surface-pink-1: #fdf2f8;

	--ink-white: #ffffff;
	--ink-gray-1: #e2e8f0;
	--ink-gray-2: #cbd5e1;
	--ink-gray-3: #94a3b8;
	--ink-gray-4: #77879f;
	--ink-gray-5: #5f6c80;
	--ink-gray-6: #4b5569;
	--ink-gray-7: #475569;
	--ink-gray-8: #334155;
	--ink-gray-9: #0f172a;

	--ink-blue-1: #e8f1fa;
	--ink-blue-2: #2a6dad;
	--ink-blue-3: var(--sxy-brand);
	--ink-blue-link: #6eb3f0;

	--ink-red-2: #e85d5e;
	--ink-red-3: #d32f2f;
	--ink-green-2: #3da575;
	--ink-green-3: #1d8b5c;
	--ink-amber-2: #c27803;
	--ink-amber-3: #b45309;

	--outline-red-1: #fecaca;
	--outline-red-2: #f59797;
	--outline-red-3: #d32f2f;
	--outline-green-1: #bbf7d0;
	--outline-green-2: #86d9a8;
	--outline-blue-1: #b6d4f0;
	--outline-amber-1: #fde68a;
	--outline-amber-2: #fbbf24;
	--outline-orange-1: #fdba8c;

	--gray-50: #f8fafc;
	--gray-100: #f1f5f9;
	--gray-200: #e2e8f0;
	--gray-300: #cbd5e1;
	--gray-400: #94a3b8;
	--gray-500: #77879f;
	--gray-600: #5f6c80;
	--gray-700: #475569;
	--gray-800: #334155;
	--gray-900: #0f172a;

	--blue-50: #e8f1fa;
	--blue-100: #d4e7f7;
	--blue-200: #b8d9f2;
	--blue-300: #8fc2e8;
	--blue-400: #5a9fd9;
	--blue-500: #2a6dad;
	--blue-600: var(--sxy-brand);
	--blue-700: #0c3d66;
	--blue-800: #083351;
	--blue-900: #062a42;

	--green-50: #f0fdf6;
	--green-100: #dcfae8;
	--green-200: #bbf7d0;
	--green-300: #86efac;
	--green-400: #4ade80;
	--green-500: #3da575;
	--green-600: #1d8b5c;
	--green-700: #166e4a;
	--green-800: #145a3e;
	--green-900: #164532;

	--red-50: #fef7f7;
	--red-100: #fdecec;
	--red-200: #ffd6d6;
	--red-300: #f9c0c0;
	--red-400: #e85d5e;
	--red-500: #d32f2f;
	--red-600: #c62828;
	--red-700: #b12727;
	--red-800: #941f1f;
	--red-900: #6b1515;

	/* Desk / shared — primary actions & brand (Espresso + Vue) */
	--primary: var(--sxy-brand);
	--brand-color: var(--sxy-brand);
	--btn-primary: var(--sxy-brand);

	color-scheme: light;
}

html[data-theme="light"] body,
html.savvy-x body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html[data-theme="light"] .shadow-sm,
html.savvy-x .shadow-sm {
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .shadow-2xl,
html.savvy-x .shadow-2xl {
	box-shadow: 0 22px 48px -12px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .rounded-lg,
html.savvy-x .rounded-lg {
	border-radius: 0.625rem;
}

html[data-theme="light"] .rounded,
html.savvy-x .rounded {
	border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Savvy X — icon system (Bootstrap Icons CDN + local SVG sprite sx-*)
   --------------------------------------------------------------------------- */

:root {
	--sxy-icon-xs: 0.875rem;
	--sxy-icon-sm: 1rem;
	--sxy-icon-md: 1.25rem;
	--sxy-icon-lg: 1.5rem;
	--sxy-icon-xl: 1.75rem;
}

/* Optional local sprite: use <symbol> SVGs only; full logos must not be loaded via hooks include_icons */
.sxy-sprite {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: var(--sxy-icon-md);
	height: var(--sxy-icon-md);
	color: var(--ink-blue-3, var(--sxy-brand));
}

.sxy-sprite.sxy-icon-xs {
	width: var(--sxy-icon-xs);
	height: var(--sxy-icon-xs);
}
.sxy-sprite.sxy-icon-sm {
	width: var(--sxy-icon-sm);
	height: var(--sxy-icon-sm);
}
.sxy-sprite.sxy-icon-lg {
	width: var(--sxy-icon-lg);
	height: var(--sxy-icon-lg);
}
.sxy-sprite.sxy-icon-xl {
	width: var(--sxy-icon-xl);
	height: var(--sxy-icon-xl);
}

/* Bootstrap Icons: align with desk controls */
[data-theme="light"] .bi,
html.savvy-x .bi {
	vertical-align: -0.125em;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
   Savvy X — advanced chrome (Desk + CRM shell)
   --------------------------------------------------------------------------- */

html.sxy-advanced[data-theme="light"] .navbar,
html.sxy-advanced .navbar {
	background: linear-gradient(180deg, var(--surface-white, #fff) 0%, var(--surface-gray-1, #f3f6fa) 100%);
	border-bottom: 1px solid var(--outline-gray-1, #dce3ed);
	box-shadow: 0 1px 0 rgba(15, 76, 129, 0.06);
}

html.sxy-advanced[data-theme="light"] .standard-sidebar .sidebar-item-container:hover,
html.sxy-advanced .standard-sidebar .sidebar-item-container:hover {
	background: var(--surface-blue-1, #e8f1fa);
}

html.sxy-advanced[data-theme="light"] .btn-primary,
html.sxy-advanced .btn-primary {
	background: linear-gradient(180deg, var(--blue-500, #2a6dad) 0%, var(--sxy-brand) 100%);
	border-color: var(--sxy-brand);
	box-shadow: 0 1px 2px rgba(15, 76, 129, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
	html.sxy-advanced[data-theme="light"] .btn-primary:focus-visible,
	html.sxy-advanced .btn-primary:focus-visible {
		transition: box-shadow 0.2s ease, transform 0.15s ease;
	}
	html.sxy-advanced[data-theme="light"] .btn-primary:active,
	html.sxy-advanced .btn-primary:active {
		transform: translateY(1px);
	}
}

html.savvy-x.sxy-advanced body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.35;
	background:
		radial-gradient(ellipse 80% 50% at 10% -10%, rgba(15, 76, 129, 0.12), transparent 55%),
		radial-gradient(ellipse 60% 40% at 90% 0%, rgba(42, 109, 173, 0.08), transparent 50%);
}

html.savvy-x.sxy-advanced #app {
	position: relative;
	z-index: 1;
}

/* Icon-led module hints on sidebar labels (decorative) */
html.sxy-advanced .desk-sidebar .sidebar-item-label .icon,
html.sxy-advanced .standard-sidebar .icon {
	color: var(--sxy-brand);
}

html.sxy-advanced .page-head,
html.sxy-advanced .page-head-content {
	border-radius: 0.625rem;
}

html.sxy-advanced .form-sidebar {
	border-radius: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html.sxy-advanced .list-row-container:hover {
		transition: background-color 0.15s ease;
	}
}