/* Flowva Desk stylesheet 2 of 5: Login page, sidebar tabs & items, Desktop view, badges. The 5 files load one after the other (hooks.py: app_include_css and web_include_css, in this order) and work as one file. */
/* -------------------------------------------------------------------------
   7. REDESIGNED LOGIN PAGE (Full Viewport, Warm Amber Gradient, Elevated Card)
   Matches Screenshot 2 Pixel-for-Pixel
   ------------------------------------------------------------------------- */
html:has(> body[data-path="login"]),
body[data-path="login"] {
	min-height: 100vh !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	background-color: #fffbf9 !important;
	background-image: 
		radial-gradient(at 10% 15%, rgba(249, 115, 22, 0.12) 0px, transparent 55%),
		radial-gradient(at 88% 18%, rgba(245, 158, 11, 0.10) 0px, transparent 50%),
		radial-gradient(at 85% 85%, rgba(234, 88, 12, 0.08) 0px, transparent 55%),
		radial-gradient(at 15% 80%, rgba(251, 146, 60, 0.08) 0px, transparent 50%),
		radial-gradient(at 50% 35%, rgba(251, 146, 60, 0.14) 0%, rgba(254, 215, 170, 0.18) 45%, #fffbf9 100%),
		radial-gradient(rgba(249, 115, 22, 0.06) 1.2px, transparent 1.2px) !important;
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 24px 24px !important;
	background-attachment: fixed !important;
}

/* Strictly eradicate any freeze, splash, or loading overlays on login to guarantee zero freezing */
body[data-path="login"] #freeze,
body[data-path="login"] .freeze,
body[data-path="login"] #splash,
body[data-path="login"] .splash,
body[data-path="login"] #freeze,
body[data-path="login"] .freeze,
body[data-path="login"] #splash,
body[data-path="login"] .splash,
body[data-path="login"] .freeze-message-container,
body[data-path="login"] .freeze-message,
body.for-login #freeze,
body.for-login .freeze,
body.for-login #splash,
body.for-login .splash,
body.for-login .freeze-message-container,
body.for-login .freeze-message,
body:not(.desk-page):not([data-route*="app"]):not([data-route*="desk"]) #freeze,
body:not(.desk-page):not([data-route*="app"]):not([data-route*="desk"]) .freeze,
body:not(.desk-page):not([data-route*="app"]):not([data-route*="desk"]) #splash,
body:not(.desk-page):not([data-route*="app"]):not([data-route*="desk"]) .splash,
body:not(.desk-page):not([data-route*="app"]):not([data-route*="desk"]) .modal-backdrop.freeze {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	z-index: -9999 !important;
}

/* Ensure login card, form, and all inputs are strictly interactive and elevated */
.page-card,
.form-signin,
.login-content,
#page-login,
#login_email,
#login_password,
.form-signin .form-control,
.form-signin button[type="submit"],
.page-card button[type="submit"],
.page-card .btn-primary,
.page-card input,
.page-card a,
.page-card button {
	pointer-events: auto !important;
	position: relative !important;
	z-index: 999999 !important;
}

/* Hide website navigation headers, footers and stock wrappers on login */
body[data-path="login"] .web-footer,
body[data-path="login"] footer,
body[data-path="login"] .navbar,
body[data-path="login"] header {
	display: none !important;
}

/* Zero-FOUC single-card enforcement on login:
   Strictly hide all non-login views immediately before Frappe JS runs */
body[data-path="login"] .for-signup:not([data-active-card="signup"]),
body[data-path="login"] .for-forgot:not([data-active-card="forgot"]),
body[data-path="login"] .for-email-login:not([data-active-card="email-login"]),
body[data-path="login"] .for-login-with-email-link:not([data-active-card="login-with-email-link"]) {
	display: none !important;
}

/* Transparent outer containers for perfect centering */
body[data-path="login"] .page-container,
body[data-path="login"] .main-section,
body[data-path="login"] .page-content {
	width: 100% !important;
	max-width: 480px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Active card wrapper: Main login view active by default */
body[data-path="login"]:not([data-active-card]) .for-login,
body[data-path="login"][data-active-card="login"] .for-login,
body[data-path="login"] .for-login:not(.hide):not([style*="display: none"]) {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Multi-card switching support via JS data-active-card attribute */
body[data-path="login"][data-active-card]:not([data-active-card="login"]) .for-login {
	display: none !important;
}
body[data-path="login"][data-active-card="email-login"] .for-email-login,
body[data-path="login"][data-active-card="login-with-email-link"] .for-email-login,
body[data-path="login"][data-active-card="login-with-email-link"] .for-login-with-email-link,
body[data-path="login"][data-active-card="signup"] .for-signup,
body[data-path="login"][data-active-card="forgot"] .for-forgot {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Dark mode login background */
html[data-theme="dark"] body[data-path="login"],
html[data-theme="dark"] .for-login {
	background-color: #0b0f19 !important;
	background-image: 
		radial-gradient(at 15% 15%, rgba(249, 115, 22, 0.22) 0px, transparent 55%),
		radial-gradient(at 85% 85%, rgba(245, 158, 11, 0.16) 0px, transparent 55%),
		radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
	background-size: 100% 100%, 100% 100%, 28px 28px !important;
}

/* Floating Elevated Login Card (Matches Screenshot 2) */
.for-login .page-card,
.for-email-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.login-content.page-card {
	position: relative !important;
	max-width: 440px !important;
	width: 92% !important;
	margin: 0 auto !important;
	padding: 2.75rem 2.25rem 2.25rem 2.25rem !important;
	background: #ffffff !important;
	border: 1px solid rgba(249, 115, 22, 0.16) !important;
	border-radius: 20px !important;
	box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.15), 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.08) !important;
	overflow: hidden !important;
	transition: all 220ms ease !important;
}

/* Vibrant Flowva Orange Top Accent Hairline */
.for-login .page-card::before,
.for-email-login .page-card::before,
.for-signup .page-card::before,
.for-forgot .page-card::before,
.for-login-with-email-link .page-card::before,
.login-content.page-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3.5px !important;
	background: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #fb923c 100%) !important;
}

html[data-theme="dark"] .for-login .page-card,
html[data-theme="dark"] .login-content.page-card {
	background: rgba(17, 24, 39, 0.95) !important;
	border: 1px solid rgba(249, 115, 22, 0.25) !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Logo Presentation on Login */
.page-card-head,
.login-content .page-card-head {
	text-align: center !important;
	margin-bottom: 1.25rem !important;
}

.page-card-head .app-logo,
.page-card .app-logo,
.login-content .app-logo,
.for-login .app-logo {
	max-height: 68px !important;
	width: auto !important;
	max-width: 220px !important;
	object-fit: contain !important;
	margin: 0 auto 0.75rem auto !important;
	display: block !important;
	filter: drop-shadow(0 4px 10px rgba(249, 115, 22, 0.35)) !important;
}

/* Typography on Login */
.page-card-head-text h4,
.login-content h4 {
	font-size: 1.55rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: #0f172a !important;
	margin-top: 0.25rem !important;
	margin-bottom: 0.35rem !important;
	text-align: center !important;
}

.page-card-subtitle,
.login-content .page-card-subtitle {
	font-size: 0.9rem !important;
	color: #64748b !important;
	line-height: 1.45 !important;
	text-align: center !important;
}

/* Form Input Controls on Login */
.login-content .form-control,
.form-signin .form-control,
.for-login input.form-control,
.for-email-login input.form-control,
.for-signup input.form-control,
.for-forgot input.form-control,
#login_email,
#login_password {
	height: 44px !important;
	font-size: 0.94rem !important;
	padding: 10px 14px !important;
	border-radius: 10px !important;
	border: 1.5px solid #e2e8f0 !important;
	background-color: #f8fafc !important;
	color: #0f172a !important;
	transition: all 180ms ease !important;
}

.login-content .form-control:focus,
.form-signin .form-control:focus,
.for-login input.form-control:focus,
.for-email-login input.form-control:focus,
.for-signup input.form-control:focus,
.for-forgot input.form-control:focus,
#login_email:focus,
#login_password:focus {
	border-color: #f97316 !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18) !important;
	outline: none !important;
}

html[data-theme="dark"] .login-content .form-control,
html[data-theme="dark"] .form-signin .form-control,
html[data-theme="dark"] #login_email,
html[data-theme="dark"] #login_password {
	background-color: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .login-content .form-control:focus,
html[data-theme="dark"] .form-signin .form-control:focus,
html[data-theme="dark"] #login_email:focus,
html[data-theme="dark"] #login_password:focus {
	background-color: #0f172a !important;
	border-color: #f97316 !important;
	box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25) !important;
}

/* Primary Sign In / Continue Button (Vibrant Orange Elevation - Matches Screenshot 2) */
.login-content .es-button[data-variant="solid"],
.form-signin button[type="submit"],
.btn-login,
.for-login .btn-primary,
.for-email-login .btn-primary,
.for-signup .btn-primary,
.for-forgot .btn-primary,
.page-card .btn-primary,
.page-card button[type="submit"],
body[data-path="login"] .btn-primary,
body[data-path="login"] button[type="submit"] {
	height: 46px !important;
	font-size: 0.96rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
	background-color: #ea580c !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(234, 88, 12, 0.40) !important;
	cursor: pointer !important;
	transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	width: 100% !important;
	margin-top: 1.25rem !important;
}

.login-content .es-button[data-variant="solid"]:hover,
.form-signin button[type="submit"]:hover,
.btn-login:hover,
.for-login .btn-primary:hover,
.for-email-login .btn-primary:hover,
.for-signup .btn-primary:hover,
.for-forgot .btn-primary:hover,
.page-card .btn-primary:hover,
body[data-path="login"] .btn-primary:hover {
	transform: translateY(-1.5px) !important;
	box-shadow: 0 8px 22px rgba(234, 88, 12, 0.50) !important;
	filter: brightness(1.06) !important;
	color: #ffffff !important;
}

.login-content .es-button[data-variant="solid"]:active,
.form-signin button[type="submit"]:active,
.btn-login:active,
.for-login .btn-primary:active,
.for-email-login .btn-primary:active,
.for-signup .btn-primary:active,
.for-forgot .btn-primary:active,
.page-card .btn-primary:active,
body[data-path="login"] .btn-primary:active {
	transform: translateY(0) !important;
}

/* -------------------------------------------------------------------------
   8. Custom Sidebar Tabs & Links (Placed WITH the Tab List)
   ------------------------------------------------------------------------- */
.flowva-custom-sidebar-links {
	margin-top: auto !important;
	padding: 10px 10px 12px 10px !important;
	border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.flowva-custom-sidebar-section {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	width: 100% !important;
}

.flowva-sidebar-link-btn {
	display: flex !important;
	align-items: center !important;
	padding: 7px 12px !important;
	margin: 3px 6px !important;
	border-radius: var(--border-radius-sm, 8px) !important;
	color: var(--text-color, #1e293b) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease !important;
}

.flowva-sidebar-link-btn:hover {
	background-color: var(--control-bg, rgba(249, 115, 22, 0.08)) !important;
	color: var(--primary, #f97316) !important;
	text-decoration: none !important;
	transform: none !important;
}

/* Active / Selected state across ALL sidebar tabs (Default: Flowva Orange) */
.desk-sidebar .sidebar-item-container.active,
.desk-sidebar .sidebar-item-container.selected,
.desk-sidebar .sidebar-item-container.active > a,
.desk-sidebar .sidebar-item-container.selected > a,
.desk-sidebar .sidebar-item-container.selected .standard-sidebar-item,
.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.active,
.body-sidebar .sidebar-item-container.active,
.body-sidebar .sidebar-item-container.selected,
.body-sidebar .sidebar-item-container.active > a,
.body-sidebar .sidebar-item-container.selected > a,
.body-sidebar .sidebar-item-container.selected .standard-sidebar-item,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .standard-sidebar-item.active,
.sidebar-items .sidebar-item-container.selected,
.sidebar-items .sidebar-item-container.selected > a,
.sidebar-items .sidebar-item-container.selected .standard-sidebar-item,
.sidebar-items .standard-sidebar-item.selected,
.sidebar-items .standard-sidebar-item.active,
.flowva-sidebar-item-container.active,
.flowva-sidebar-item-container.selected,
.flowva-sidebar-item-container.active .flowva-sidebar-item,
.flowva-sidebar-item-container.selected .flowva-sidebar-item,
.flowva-sidebar-item.selected,
.flowva-sidebar-item.active,
.standard-sidebar-item.selected,
.standard-sidebar-item.active,
a.standard-sidebar-item.selected,
a.standard-sidebar-item.active {
	background-color: rgba(249, 115, 22, 0.15) !important;
	color: #ea580c !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

.desk-sidebar .sidebar-item-container.active .sidebar-item-label,
.desk-sidebar .sidebar-item-container.active .sidebar-item-icon,
.desk-sidebar .sidebar-item-container.active a,
.desk-sidebar .sidebar-item-container.selected .sidebar-item-label,
.desk-sidebar .sidebar-item-container.selected .sidebar-item-icon,
.desk-sidebar .sidebar-item-container.selected a,
.body-sidebar .sidebar-item-container.active .sidebar-item-label,
.body-sidebar .sidebar-item-container.active .sidebar-item-icon,
.body-sidebar .sidebar-item-container.active a,
.body-sidebar .sidebar-item-container.selected .sidebar-item-label,
.body-sidebar .sidebar-item-container.selected .sidebar-item-icon,
.body-sidebar .sidebar-item-container.selected a,
.sidebar-items .sidebar-item-container.selected .sidebar-item-label,
.sidebar-items .sidebar-item-container.selected .sidebar-item-icon,
.sidebar-items .sidebar-item-container.selected a,
.standard-sidebar-item.selected .sidebar-item-label,
.standard-sidebar-item.selected .sidebar-item-icon,
.standard-sidebar-item.active .sidebar-item-label,
.standard-sidebar-item.active .sidebar-item-icon,
.flowva-sidebar-item.selected .sidebar-item-label,
.flowva-sidebar-item.selected .sidebar-item-icon,
.flowva-sidebar-item.active .sidebar-item-label,
.flowva-sidebar-item.active .sidebar-item-icon,
a.standard-sidebar-item.selected .sidebar-item-label,
a.standard-sidebar-item.selected .sidebar-item-icon,
a.standard-sidebar-item.active .sidebar-item-label,
a.standard-sidebar-item.active .sidebar-item-icon {
	color: #ea580c !important;
	fill: #ea580c !important;
}

/* Theme-specific selected states */
[data-flowva-preset="flowva-indigo"] .sidebar-item-container.selected > a,
[data-flowva-preset="flowva-indigo"] .sidebar-item-container.active > a,
[data-flowva-preset="flowva-indigo"] .standard-sidebar-item.selected,
[data-flowva-preset="flowva-indigo"] .standard-sidebar-item.active {
	background-color: rgba(91, 108, 255, 0.15) !important;
	color: #4f46e5 !important;
}
[data-flowva-preset="flowva-indigo"] .sidebar-item-container.selected .sidebar-item-label,
[data-flowva-preset="flowva-indigo"] .sidebar-item-container.selected .sidebar-item-icon,
[data-flowva-preset="flowva-indigo"] .standard-sidebar-item.selected .sidebar-item-label,
[data-flowva-preset="flowva-indigo"] .standard-sidebar-item.selected .sidebar-item-icon {
	color: #4f46e5 !important;
}

[data-flowva-preset="stock-dark"] .sidebar-item-container.selected > a,
[data-flowva-preset="stock-dark"] .sidebar-item-container.active > a,
[data-flowva-preset="stock-dark"] .standard-sidebar-item.selected,
[data-flowva-preset="stock-dark"] .standard-sidebar-item.active,
html[data-theme="dark"] .sidebar-item-container.selected > a,
html[data-theme="dark"] .sidebar-item-container.active > a,
html[data-theme="dark"] .standard-sidebar-item.selected,
html[data-theme="dark"] .standard-sidebar-item.active {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}
[data-flowva-preset="stock-dark"] .sidebar-item-container.selected .sidebar-item-label,
[data-flowva-preset="stock-dark"] .sidebar-item-container.selected .sidebar-item-icon,
[data-flowva-preset="stock-dark"] .standard-sidebar-item.selected .sidebar-item-label,
[data-flowva-preset="stock-dark"] .standard-sidebar-item.selected .sidebar-item-icon,
html[data-theme="dark"] .sidebar-item-container.selected .sidebar-item-label,
html[data-theme="dark"] .sidebar-item-container.selected .sidebar-item-icon,
html[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-label,
html[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-icon {
	color: #ffffff !important;
}

/* Sanitization: Cleanly hide docs and support links */
a[href*="frappe.io"],
a[href*="docs.frappe.io"],
.dropdown-item[data-action="about"],
.dropdown-item[data-action="support"],
.sidebar-header-menu .dropdown-item[data-action*="about"] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   9. Sidebar Base Items, Reset & Layout
   ------------------------------------------------------------------------- */
.desk-sidebar .sidebar-item-container > a,
.body-sidebar .sidebar-item-container > a,
.standard-sidebar-item,
.flowva-sidebar-item,
.flowva-sidebar-link-btn {
	display: flex !important;
	align-items: center !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 10px !important;
	margin: 1px 4px !important;
	width: calc(100% - 8px) !important;
	max-width: calc(100% - 8px) !important;
	box-sizing: border-box !important;
	border-radius: var(--border-radius-sm, 8px) !important;
	color: var(--text-color, #1e293b) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	transition: color 0.18s ease !important;
	transform: none !important;
	will-change: auto !important;
}

/* Base icon & label GPU-accelerated transition */
.sidebar-item-icon,
.standard-sidebar-item .sidebar-item-icon,
.flowva-sidebar-item .sidebar-item-icon,
.flowva-sidebar-link-btn .sidebar-item-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	margin-right: 8px !important;
	font-size: 14px !important;
	color: var(--text-muted, #64748b) !important;
	transition: color 0.18s ease !important;
	transform: none !important;
	will-change: auto !important;
}

.sidebar-item-label,
.standard-sidebar-item .sidebar-item-label,
.flowva-sidebar-item .sidebar-item-label,
.desk-sidebar .sidebar-item-container > a span:not(.flowva-sidebar-badge):not(.modern-sidebar-badge) {
	transition: color 0.18s ease !important;
	transform: none !important;
	will-change: auto !important;
	display: inline-block !important;
}

/* Prevent horizontal scrollbar on sidebar items */
.sidebar-items,
.body-sidebar .sidebar-items,
.desk-sidebar .sidebar-items {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

.body-sidebar,
.desk-sidebar,
.body-sidebar-container {
	overflow: visible !important;
	position: relative !important;
}

/* Permanently hide Frappe's native "+ Add Sidebar Item" button from the sidebar */
.add-sidebar-item,
.btn-add-sidebar-item,
[data-label="Add Sidebar Item"],
[data-label="Add Sidebar Item" i],
[data-name="add sidebar item" i],
[item-name="Add Sidebar Item" i],
.sidebar-item-container:has([item-name*="Add Sidebar" i]),
.sidebar-item-container:has([data-label*="Add Sidebar" i]),
.sidebar-item-container:has([data-name*="add-sidebar" i]),
.sidebar-item-container:has(a[href*="add-sidebar-item"]),
.sidebar-item-container:has(.add-sidebar-item),
.sidebar-item-container[item-name*="Add Sidebar" i],
.sidebar-item-container[data-name*="add-sidebar" i],
.desk-sidebar .add-sidebar-item,
.body-sidebar .add-sidebar-item,
.standard-sidebar-item.add-sidebar-item,
/* Frappe v16: div.edit-mode.standard-sidebar-item.hidden[data-name="add-sidebar-item"] (and the other edit-mode
   controls while Frappe keeps them hidden) */
[data-name="add-sidebar-item"],
.standard-sidebar-item[data-name*="add-sidebar" i],
.body-sidebar .standard-sidebar-item.edit-mode.hidden,
.desk-sidebar .standard-sidebar-item.edit-mode.hidden {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* Workspace Customizer Items: Placed directly WITH the tab list in .sidebar-items */
.desk-sidebar .sidebar-items > .sidebar-item-container,
.body-sidebar .sidebar-items > .sidebar-item-container,
.flowva-sidebar-item-container {
	margin: 2px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Sidebar Tabs Hover: Fast, silky-smooth, zero-lag single-target background tint */
.sidebar-items .sidebar-item-container,
.desk-sidebar .sidebar-items .sidebar-item-container,
.body-sidebar .sidebar-items .sidebar-item-container,
.sidebar-item-container {
	border-radius: 8px !important;
	transition: background-color 0.12s ease !important;
}

/* Ensure inner anchor and children have transparent backgrounds to prevent stacked opacity & double-repaints */
.sidebar-item-container .standard-sidebar-item,
.sidebar-item-container .standard-sidebar-item:hover,
.sidebar-item-container .item-anchor,
.sidebar-item-container .item-anchor:hover,
.sidebar-child-items .sidebar-item-container > .standard-sidebar-item,
.sidebar-child-items .sidebar-item-container:hover > .standard-sidebar-item {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transition: color 0.12s ease !important;
}

/* Single hover background strictly applied to outer container */
.sidebar-item-container:hover {
	background-color: var(--flowva-sidebar-hover-bg, rgba(249, 115, 22, 0.08)) !important;
	transform: none !important;
}

/* Hover color: strictly direct text & icon */
.sidebar-item-container:hover .sidebar-item-label,
.sidebar-item-container:hover .sidebar-item-icon,
.sidebar-item-container:hover a,
.standard-sidebar-item:hover .sidebar-item-label,
.standard-sidebar-item:hover .sidebar-item-icon {
	color: var(--flowva-sidebar-hover-color, var(--primary)) !important;
}

/* -------------------------------------------------------------------------
   10. Desktop View: Instantaneous Pure-CSS Sidebar Suppression & Full Width
   ------------------------------------------------------------------------- */
body[data-flowva-desktop-view="1"] .body-sidebar-container,
body[data-flowva-desktop-view="1"] .body-sidebar-container.expanded,
[data-flowva-desktop-view="1"] .body-sidebar-container,
[data-flowva-desktop-view="1"] .body-sidebar-container.expanded,
body[data-flowva-desktop-view="1"] .layout-side-section,
body[data-flowva-desktop-view="1"] .desk-sidebar,
body[data-flowva-desktop-view="1"] .body-sidebar,
[data-flowva-desktop-view="1"] .layout-side-section,
[data-flowva-desktop-view="1"] .desk-sidebar,
[data-flowva-desktop-view="1"] .body-sidebar,
body[data-route="desktop"] .layout-side-section,
body[data-route="desktop"] .desk-sidebar,
body[data-route="desktop"] .body-sidebar,
body[data-route="desktop"] .body-sidebar-container {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	flex: 0 0 0px !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   11. Contract Badges & Status Indicators
   ------------------------------------------------------------------------- */
.flowva-contract-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 3px 8px !important;
	border-radius: 9999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

/* Drawer card badges & action buttons consolidated into Section 12 */

/* -------------------------------------------------------------------------
   Strict Page Isolation Guard (Frappe Router hidden pages MUST stay hidden)
   ------------------------------------------------------------------------- */
.page-container[style*="display: none"],
.page-container.hide {
	display: none !important;
}

/* Desktop & Workspace Top Bar: Curved in corners (Soft Clay Neumorphic aesthetic) */
body[data-flowva-desktop-view="1"] .navbar,
html[data-flowva-desktop-view="1"] .navbar,
body[data-route="app"] .navbar,
body[data-route="desktop"] .navbar,
body[data-route=""] .navbar,
.desktop-navbar {
	position: sticky !important;
	top: 12px !important;
	margin: 12px auto 0 auto !important;
	width: 94% !important;
	max-width: 1180px !important;
	min-height: 52px !important;
	padding: 0 24px !important;
	border-radius: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	backdrop-filter: blur(16px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 1030 !important;
	box-sizing: border-box !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Standard Desk & Workspace Navbar: Sticky top with clean curved bottom edge */
.navbar:not(.desktop-navbar) {
	position: sticky !important;
	top: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: 52px !important;
	padding: 0 20px !important;
	border-radius: 0 0 16px 16px !important;
	z-index: 1020 !important;
	box-sizing: border-box !important;
}

/* Ensure inner navbar containers span full width without detached pill effects */
.navbar > .container,
.navbar > .navbar-container,
.navbar > .container-fluid,
header.navbar > .container,
header.navbar > .navbar-container,
header.navbar > .container-fluid {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* Body & page container padding-top reset */

/* Light Themes Desktop Navbar Variations */
[data-flowva-preset="flowva-orange"] .desktop-navbar,
[data-flowva-preset="flowva-orange"] .navbar {
	background: rgba(255, 255, 255, 0.90) !important;
	border-radius: 20px !important;
	border: 1px solid rgba(249, 115, 22, 0.20) !important;
	box-shadow: 0 8px 30px rgba(249, 115, 22, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-flowva-preset="flowva-indigo"] .desktop-navbar,
[data-flowva-preset="flowva-indigo"] .navbar {
	background: rgba(255, 255, 255, 0.90) !important;
	border-radius: 20px !important;
	border: 1px solid rgba(91, 108, 255, 0.20) !important;
	box-shadow: 0 8px 30px rgba(91, 108, 255, 0.08) !important;
}

[data-flowva-preset="aurora-glass"] .desktop-navbar,
[data-flowva-preset="aurora-glass"] .navbar {
	background: rgba(255, 255, 255, 0.75) !important;
	border: 1px solid rgba(139, 92, 246, 0.25) !important;
	box-shadow: 0 10px 32px rgba(139, 92, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

[data-flowva-preset="nordic-slate"] .desktop-navbar,
[data-flowva-preset="nordic-slate"] .navbar {
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(2, 132, 199, 0.18) !important;
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06) !important;
}

[data-flowva-preset="soft-clay"] .desktop-navbar,
[data-flowva-preset="soft-clay"] .navbar {
	background: #f4efe6 !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	box-shadow: 6px 6px 16px #e0d8cb, -6px -6px 16px #ffffff !important;
	border-radius: 20px !important;
}

[data-flowva-preset="swiss-paper"] .desktop-navbar,
[data-flowva-preset="swiss-paper"] .navbar {
	box-shadow: 4px 4px 0px #1c1917 !important;
	border-radius: 20px !important;
}

/* Dark Themes Desktop Navbar Variations */
[data-flowva-preset="obsidian-night"] .desktop-navbar,
[data-flowva-preset="obsidian-night"] .navbar {
	background: rgba(15, 23, 42, 0.88) !important;
	border: 1px solid rgba(0, 240, 255, 0.25) !important;
	box-shadow: 0 8px 32px rgba(0, 240, 255, 0.08), 0 0 16px rgba(0, 240, 255, 0.04) !important;
}

[data-flowva-preset="emerald-matrix"] .desktop-navbar,
[data-flowva-preset="emerald-matrix"] .navbar {
	background: rgba(6, 26, 18, 0.90) !important;
	border: 1px solid rgba(16, 185, 129, 0.28) !important;
	box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 0 16px rgba(16, 185, 129, 0.04) !important;
}

[data-flowva-preset="violet-abyss"] .desktop-navbar,
[data-flowva-preset="violet-abyss"] .navbar {
	background: rgba(19, 13, 36, 0.90) !important;
	border: 1px solid rgba(168, 85, 247, 0.28) !important;
	box-shadow: 0 8px 32px rgba(168, 85, 247, 0.08), 0 0 16px rgba(168, 85, 247, 0.04) !important;
}

[data-flowva-preset="solar-dusk"] .desktop-navbar,
[data-flowva-preset="solar-dusk"] .navbar {
	background: rgba(28, 18, 16, 0.90) !important;
	border: 1px solid rgba(249, 115, 22, 0.28) !important;
	box-shadow: 0 8px 32px rgba(249, 115, 22, 0.08) !important;
}

[data-flowva-preset="crimson-eclipse"] .desktop-navbar,
[data-flowva-preset="crimson-eclipse"] .navbar {
	background: rgba(28, 13, 18, 0.90) !important;
	border: 1px solid rgba(244, 63, 94, 0.28) !important;
	box-shadow: 0 8px 32px rgba(244, 63, 94, 0.08) !important;
}

[data-flowva-preset="titanium-gray"] .desktop-navbar,
[data-flowva-preset="titanium-gray"] .navbar {
	background: rgba(24, 27, 34, 0.90) !important;
	border: 1px solid rgba(56, 189, 248, 0.25) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .desktop-navbar,
html[data-theme="dark"] .navbar,
[data-flowva-preset="stock-dark"] .desktop-navbar,
[data-flowva-preset="stock-dark"] .navbar {
	background: rgba(17, 24, 39, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}
.body-sidebar .sidebar-items > .sidebar-item-container > a.active .sidebar-item-icon,
.flowva-sidebar-item.selected .sidebar-item-icon,
.flowva-sidebar-item.active .sidebar-item-icon,
.standard-sidebar-item.selected .sidebar-item-icon,
.standard-sidebar-item.active .sidebar-item-icon {
	color: var(--flowva-sidebar-active-color, inherit) !important;
	transform: scale(1.06) !important;
}

/* Neutral sub-child items in expanded tree menus */
.sidebar-child-item,
.sidebar-child-items .sidebar-child-item,
.sidebar-child-item a {
	color: var(--text-muted, #64748b) !important;
	padding-right: 20px !important;
}

/* Instantaneous CSS detection: Collapse sidebar column strictly in desktop app launcher view */
body[data-flowva-desktop-view="1"] .body-sidebar-container,
body[data-flowva-desktop-view="1"] .body-sidebar-container.expanded,
[data-flowva-desktop-view="1"] .body-sidebar-container,
[data-flowva-desktop-view="1"] .body-sidebar-container.expanded,
body[data-flowva-desktop-view="1"] .desk-sidebar,
body[data-flowva-desktop-view="1"] .body-sidebar,
[data-flowva-desktop-view="1"] .desk-sidebar,
[data-flowva-desktop-view="1"] .body-sidebar,
body[data-route="desktop"] .body-sidebar-container,
body[data-route="desktop"] .desk-sidebar,
body[data-route="desktop"] .body-sidebar {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	flex: 0 0 0px !important;
	visibility: hidden !important;
}

/* Sidebar layout & collapse support: Honor native Frappe sidebar collapse and expansion */
.body-sidebar-container.hidden,
.body-sidebar-container.collapsed,
.body-sidebar-container[style*="display: none"],
.body-sidebar-container[style*="width: 0px"],
body.sidebar-hidden .body-sidebar-container {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Force full-width centered desktop viewport across all container layers */
body[data-flowva-desktop-view="1"] .page-container:not([style*="display: none"]),
[data-flowva-desktop-view="1"] .page-container:not([style*="display: none"]) {
	grid-template-columns: 1fr !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Desktop App Launcher: reset .main-section so it fills 100% width strictly in launcher mode */
body[data-flowva-desktop-view="1"] .main-section,
html[data-flowva-desktop-view="1"] .main-section,
body[data-route="desktop"] .main-section {
	margin-left: 0 !important;
	padding-left: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

body[data-flowva-desktop-view="1"] .layout-main,
body[data-route="desktop"] .layout-main {
	margin-left: 0 !important;
	padding-left: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

body[data-flowva-desktop-view="1"] .layout-main-section-wrapper,
body[data-route="desktop"] .layout-main-section-wrapper {
	margin-left: 0 !important;
	padding-left: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

body[data-flowva-desktop-view="1"] .page-body:not([style*="display: none"]),
body[data-flowva-desktop-view="1"] .page-content:not([style*="display: none"]),
body[data-flowva-desktop-view="1"] .layout-main-section-wrapper:not([style*="display: none"]),
body[data-flowva-desktop-view="1"] .layout-main:not([style*="display: none"]) {
	margin: 0 auto !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 980px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Guard: List view & Form pages must NEVER inherit desktop 980px max-width or margins */
.frappe-list,
.frappe-list .page-body,
.page-container:has(.frappe-list) .page-body,
.page-container:has(.frappe-list) .page-content,
.page-container:has(.frappe-list) .layout-main-section-wrapper,
.page-container:has(.frappe-list) .layout-main,
.page-container:has(.form-layout) .page-body,
.page-container:has(.form-layout) .page-content,
.page-container:has(.form-layout) .layout-main-section-wrapper,
.page-container:has(.form-layout) .layout-main {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Zero-flash custom workspace icon system: instantly suppress default SVGs on desktop grid before custom icon is attached */
.desktop-grid .app-item svg:not(.flowva-icon):not(.es-icon),
.desktop-grid .module-box svg:not(.flowva-icon):not(.es-icon),
.desktop-icons .app-item svg:not(.flowva-icon):not(.es-icon),
.modules-container .app-item svg:not(.flowva-icon):not(.es-icon) {
	display: none !important;
}

.desk-sidebar .sidebar-items .sidebar-item-icon[data-flowva-icon] svg,
.body-sidebar .sidebar-items .sidebar-item-icon[data-flowva-icon] svg {
	display: none !important;
}

[data-flowva-desktop-view="1"] .modules-container,
[data-flowva-desktop-view="1"] .desktop-grid,
[data-flowva-desktop-view="1"] .desktop-icons,
.modules-container,
.desktop-grid {
	margin: 20px auto 0 auto !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 980px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Soft Clay Neumorphic Desktop Icon Card Styling (Issue 3) */
[data-flowva-preset="soft-clay"] .modules-container .app-item,
[data-flowva-preset="soft-clay"] .desktop-grid .app-item,
[data-flowva-preset="soft-clay"] .modules-container .module-box,
[data-flowva-preset="soft-clay"] .desktop-grid .module-box {
	background: #f4efe6 !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	box-shadow: 6px 6px 14px #e0d8cb, -6px -6px 14px #ffffff !important;
	border-radius: 16px !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-flowva-preset="soft-clay"] .modules-container .app-item:hover,
[data-flowva-preset="soft-clay"] .desktop-grid .app-item:hover {
	transform: translateY(-3px) scale(1.02) !important;
	box-shadow: 8px 8px 18px #dcd3c4, -8px -8px 18px #ffffff !important;
}


/* Soft Clay Neumorphic Desktop Icon Card Styling (Issue 3) */
[data-flowva-preset="soft-clay"] .modules-container .app-item,
[data-flowva-preset="soft-clay"] .desktop-grid .app-item,
[data-flowva-preset="soft-clay"] .modules-container .module-box,
[data-flowva-preset="soft-clay"] .desktop-grid .module-box {
	background: #f5f0e8 !important;
	border: 1px solid rgba(255, 255, 255, 0.85) !important;
	box-shadow: 6px 6px 14px #e0d8cb, -6px -6px 14px #ffffff !important;
	border-radius: 20px !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-flowva-preset="soft-clay"] .modules-container .app-item:hover,
[data-flowva-preset="soft-clay"] .desktop-grid .app-item:hover {
	transform: translateY(-3px) scale(1.02) !important;
	box-shadow: 8px 8px 18px #dcd3c4, -8px -8px 18px #ffffff !important;
}

/* -------------------------------------------------------------------------
   Theme-Driven Sidebar Tab Styles (Selected & Active Follow Theme Presets)
   Unified Selected UI for BOTH Default Tabs and Custom Tabs (Issue 4)
   ------------------------------------------------------------------------- */
/* Default tabs when not active: transparent, zero white card background */
.desk-sidebar .standard-sidebar-item:not(.selected):not(.active):not(:hover),
.body-sidebar .standard-sidebar-item:not(.selected):not(.active):not(:hover),
.body-sidebar .standard-sidebar-item:not(.selected):not(.active):not(:hover),
.sidebar-items .standard-sidebar-item:not(.selected):not(.active):not(:hover),
.standard-sidebar-item:not(.selected):not(.active):not(:hover),
.desk-sidebar .sidebar-item-container:not(.selected):not(.active):not(:hover) > .standard-sidebar-item,
.body-sidebar .sidebar-item-container:not(.selected):not(.active):not(:hover) > .standard-sidebar-item,
.desk-sidebar .sidebar-item-container:not(.selected):not(.active):not(:hover) > a,
.body-sidebar .sidebar-item-container:not(.selected):not(.active):not(:hover) > a,
[item-name="Home"]:not(.selected):not(.active):not(:hover),
[data-name="home" i]:not(.selected):not(.active):not(:hover) {
	background-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	border-left: 3px solid transparent !important;
}

/* Unified active tab UI: Single, clean, rounded pill aesthetic directly on the selected tab */
.sidebar-item-container.selected > .standard-sidebar-item,
.sidebar-item-container.active > .standard-sidebar-item,
.sidebar-item-container.selected > a,
.sidebar-item-container.active > a,
.desk-sidebar .sidebar-item-container.selected > .standard-sidebar-item,
.desk-sidebar .sidebar-item-container.active > .standard-sidebar-item,
.body-sidebar .sidebar-item-container.selected > .standard-sidebar-item,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item,
.sidebar-items .sidebar-item-container.selected > .standard-sidebar-item,
.sidebar-items .sidebar-item-container.active > .standard-sidebar-item,
.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.active,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .standard-sidebar-item.active,
.sidebar-items .standard-sidebar-item.selected,
.sidebar-items .standard-sidebar-item.active,
.flowva-sidebar-item.selected,
.flowva-sidebar-item.active,
a.standard-sidebar-item.selected,
a.standard-sidebar-item.active,
.standard-sidebar-item.selected,
.standard-sidebar-item.active {
	background-color: var(--flowva-sidebar-active-bg, rgba(249, 115, 22, 0.12)) !important;
	color: var(--flowva-sidebar-active-color, #ea580c) !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	border: none !important;
	box-shadow: none !important;
}

/* Neutralize inner child elements and outer containers to prevent double-styling */
.sidebar-item-container,
.sidebar-item-container.selected,
.sidebar-item-container.active,
.desk-sidebar .sidebar-items > .sidebar-item-container.selected,
.desk-sidebar .sidebar-items > .sidebar-item-container.active,
.body-sidebar .sidebar-items > .sidebar-item-container.selected,
.body-sidebar .sidebar-items > .sidebar-item-container.active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-left: none !important;
	box-shadow: none !important;
}

.standard-sidebar-item .item-anchor,
.sidebar-item-container .item-anchor,
.standard-sidebar-item:hover .item-anchor,
.sidebar-item-container:hover .item-anchor,
.item-anchor,
.item-anchor:hover,
.item-anchor:active,
.item-anchor:focus {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	transform: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	color: inherit !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	height: 100% !important;
}

.sidebar-item-container.selected .sidebar-item-label,
.sidebar-item-container.active .sidebar-item-label,
.standard-sidebar-item.selected .sidebar-item-label,
.standard-sidebar-item.active .sidebar-item-label,
.flowva-sidebar-item.selected .sidebar-item-label,
.flowva-sidebar-item.active .sidebar-item-label {
	color: var(--flowva-sidebar-active-color, #ea580c) !important;
	font-weight: 600 !important;
}

.desk-sidebar .sidebar-items > .sidebar-item-container > a.selected .sidebar-item-icon,
.desk-sidebar .sidebar-items > .sidebar-item-container > a.active .sidebar-item-icon,
.body-sidebar .sidebar-items > .sidebar-item-container > a.selected .sidebar-item-icon,
.body-sidebar .sidebar-items > .sidebar-item-container > a.active .sidebar-item-icon,
.flowva-sidebar-item.selected .sidebar-item-icon,
.flowva-sidebar-item.active .sidebar-item-icon,
.standard-sidebar-item.selected .sidebar-item-icon,
.standard-sidebar-item.active .sidebar-item-icon {
	color: var(--flowva-sidebar-active-color, #ea580c) !important;
	transform: scale(1.06) !important;
}