/* Flowva Desk stylesheet 4 of 5: Form sidebars, phone drawer & lists, display density, row editor. 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. */
/* -------------------------------------------------------------------------
   Flowva Desk v3.1.0.0: Form Right Sidebar & Left Sidebar Collapse Controls
   ------------------------------------------------------------------------- */
/* Left Sidebar: Inner sidebar collapse when explicitly collapsed while preserving outer container expanded */
body.flowva-sidebar-is-collapsed .body-sidebar,
body.sidebar-hidden .body-sidebar {
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	flex: 0 0 0 !important;
	display: none !important;
	overflow: hidden !important;
}

body.flowva-sidebar-is-collapsed .body-sidebar-container,
body.sidebar-hidden .body-sidebar-container {
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	flex: 0 0 0 !important;
	overflow: hidden !important;
	transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Frappe Native Sidebar Toggle / Expand Button (Breadcrumb / Page Head) */
.sidebar-toggle-btn,
.page-head .sidebar-toggle-btn,
.page-head-content .sidebar-toggle-btn,
.breadcrumbs .sidebar-toggle-btn,
.navbar .sidebar-toggle-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	color: #475569 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
	cursor: pointer !important;
	margin-right: 8px !important;
	vertical-align: middle !important;
	transition: all 0.15s ease !important;
}
.sidebar-toggle-btn:hover,
.page-head .sidebar-toggle-btn:hover,
.page-head-content .sidebar-toggle-btn:hover,
.breadcrumbs .sidebar-toggle-btn:hover,
.navbar .sidebar-toggle-btn:hover {
	color: var(--primary, #f97316) !important;
	background: rgba(249, 115, 22, 0.08) !important;
	border-color: rgba(249, 115, 22, 0.35) !important;
	transform: scale(1.05) !important;
}
.sidebar-toggle-btn svg,
.sidebar-toggle-btn i,
.sidebar-toggle-btn .icon {
	width: 14px !important;
	height: 14px !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* Remove old native bottom collapse button completely */
.collapse-sidebar-link,
.body-sidebar .collapse-sidebar-link,
.body-sidebar > .sidebar-toggle-btn {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Prevent tooltip element from intercepting mouse and causing hover / cursor loops */
.tooltip,
.bs-tooltip-right,
.bs-tooltip-left,
.bs-tooltip-top,
.bs-tooltip-bottom {
	pointer-events: none !important;
}

/* Position new collapse button at top right of body-sidebar-bottom (bottom yellow box) */
/* Sidebar Bottom User & Collapse Row: Button placed right next to user data button */
.flowva-sidebar-user-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px !important;
	width: 100% !important;
	padding: 2px 8px !important;
	box-sizing: border-box !important;
}

.flowva-sidebar-user-row .sidebar-user-button,
.flowva-sidebar-user-row a[onclick*="route_to_user"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
}

.flowva-sidebar-user-row .flowva-sidebar-collapse-btn {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.05) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--text-color, #475569) !important;
	cursor: pointer !important;
	font-size: 11px !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flowva-sidebar-user-row .flowva-sidebar-collapse-btn:hover {
	color: var(--primary, #f97316) !important;
	background: rgba(249, 115, 22, 0.12) !important;
	border-color: rgba(249, 115, 22, 0.35) !important;
	transform: scale(1.06) !important;
	box-shadow: 0 2px 8px var(--flowva-glow-color, rgba(249, 115, 22, 0.25)) !important;
}

[data-flowva-preset="stock-dark"] .flowva-sidebar-user-row .flowva-sidebar-collapse-btn,
html[data-theme="dark"] .flowva-sidebar-user-row .flowva-sidebar-collapse-btn {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #cbd5e1 !important;
}

/* Sidebar resize handle: Neutralize broken resize affordance into a sleek static separator line */
.sidebar-resize-handle {
	cursor: default !important;
	pointer-events: none !important;
	width: 1px !important;
	background: var(--border-color, rgba(0, 0, 0, 0.08)) !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
	z-index: 10 !important;
}

[data-flowva-preset="stock-dark"] .sidebar-resize-handle,
html[data-theme="dark"] .sidebar-resize-handle {
	background: rgba(255, 255, 255, 0.08) !important;
}

/* Hide redundant home icon in navbar breadcrumbs as navbar brand logo routes to desk */
.navbar-breadcrumbs li:has(a[href="/desk"]),
.navbar-breadcrumbs li:has(use[href*="icon-home"]),
.navbar-breadcrumbs a[href="/desk"],
.breadcrumbs li:has(use[href*="icon-home"]),
.page-head .breadcrumbs li:first-child:has(a[href="/desk"]) {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Floating Sidebar Expand Trigger Dock (Appears only when Sidebar is Collapsed)
   ------------------------------------------------------------------------- */
.flowva-sidebar-dock-trigger,
#flowva-sidebar-dock-trigger {
	position: fixed !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 1040 !important;
	display: none; /* Controlled by active/collapsed states below */
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	max-width: 42px !important;
	height: 42px !important;
	padding: 0 0 0 4px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(16px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	border-left: none !important;
	border-radius: 0 21px 21px 0 !important;
	box-shadow: 4px 0 18px rgba(0, 0, 0, 0.08), 0 2px 6px var(--flowva-glow-color, rgba(249, 115, 22, 0.2)) !important;
	cursor: pointer !important;
	user-select: none !important;
	overflow: hidden !important;
	transition: width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

[data-flowva-preset="stock-dark"] .flowva-sidebar-dock-trigger,
html[data-theme="dark"] .flowva-sidebar-dock-trigger {
	background: rgba(30, 41, 59, 0.95) !important;
	border-color: rgba(51, 65, 85, 0.85) !important;
	box-shadow: 4px 0 22px rgba(0, 0, 0, 0.45) !important;
}

.flowva-sidebar-dock-trigger .flowva-sidebar-dock-icon-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
}

.flowva-sidebar-dock-trigger .flowva-sidebar-dock-arrow {
	font-size: 15px !important;
	color: var(--primary, #f97316) !important;
	transition: transform 0.25s ease, color 0.25s ease !important;
}

.flowva-sidebar-dock-trigger:hover {
	transform: translateY(-50%) scale(1.08) !important;
	border-color: var(--flowva-accent, var(--primary, #f97316)) !important;
	box-shadow: 6px 0 24px var(--flowva-glow-color, rgba(249, 115, 22, 0.4)) !important;
}

/* Show dock trigger on BOTH desktop and mobile ONLY when sidebar is collapsed */
body.flowva-sidebar-is-collapsed .flowva-sidebar-dock-trigger,
body.flowva-sidebar-is-collapsed #flowva-sidebar-dock-trigger,
body.sidebar-hidden .flowva-sidebar-dock-trigger,
body.sidebar-hidden #flowva-sidebar-dock-trigger {
	display: flex !important;
}

/* Strictly hide dock trigger on desktop when sidebar is open or expanded */
@media (min-width: 992px) {
	body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .flowva-sidebar-dock-trigger,
	body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) #flowva-sidebar-dock-trigger,
	body:has(.body-sidebar-container.expanded):not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .flowva-sidebar-dock-trigger,
	body:has(.body-sidebar-container.expanded):not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) #flowva-sidebar-dock-trigger {
		display: none !important;
	}
}

/* Strictly suppress dock trigger on login page and when mobile drawer is already open */
body[data-path="login"] .flowva-sidebar-dock-trigger,
body[data-route="login"] .flowva-sidebar-dock-trigger,
body.for-login .flowva-sidebar-dock-trigger,
body.flowva-mobile-sidebar-open .flowva-sidebar-dock-trigger {
	display: none !important;
}

/* Desktop-specific navbar rules */
@media (min-width: 992px) {
	/* Navbar toggle buttons must never appear on desktop */
	.sidebar-toggle-btn,
	.page-head .sidebar-toggle-btn,
	.page-head-content .sidebar-toggle-btn,
	.breadcrumbs .sidebar-toggle-btn,
	.navbar .sidebar-toggle-btn {
		display: none !important;
	}
}

/* Strict size control on brand logos: never allow unconstrained SVG expansion */
.flowva-navbar-brand-logo,
.navbar-brand img,
.navbar-home img,
.workspace-brand-logo-img {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	object-fit: contain !important;
	vertical-align: middle !important;
	display: inline-block !important;
}

/* Suppress redundant workspace title logos that can blow up layout */
.workspace-header-custom-logo,
.page-head .title-text .workspace-header-custom-logo,
.page-title .title-text .workspace-header-custom-logo {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Scrollbar Guarantees: ensure workspace pages never freeze scrolling */
body:not(.modal-open) {
	overflow-y: auto !important;
}
.main-section:not(.modal-open) {
	overflow-y: auto !important;
}
.layout-main-section-wrapper {
	overflow-y: visible !important;
}
.workspace-content {
	overflow-y: visible !important;
}

/* Right Form Sidebar: Default Collapsed */
.layout-side-section.right {
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	flex: 0 0 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-left: none !important;
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
	pointer-events: none !important;
	align-self: flex-start !important;
}

/* Right Form Sidebar: Expanded (padding: 0, margin-left: 0, strictly 240px) */
.layout-side-section.right.flowva-right-open,
.form-sidebar.flowva-right-open,
.form-sidebar.overlay-sidebar.flowva-right-open,
.layout-main.flowva-right-open .layout-side-section.right,
.layout-main.flowva-right-open .form-sidebar {
	width: 240px !important;
	min-width: 240px !important;
	max-width: 240px !important;
	flex: 0 0 240px !important;
	opacity: 1 !important;
	overflow-y: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	margin-left: 0 !important;
	border-left: 1px solid var(--border-color, #e2e8f0) !important;
	pointer-events: auto !important;
	display: block !important;
}

/* Suppress page head toggle button as edge dock tab is preferred */
.flowva-right-sidebar-toggle {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	pointer-events: none !important;
}

/* Floating edge tab for right sidebar: Strictly only shown on Form pages */
.flowva-right-sidebar-dock-tab {
	position: fixed !important;
	right: 0 !important;
	top: 130px !important;
	z-index: 1020 !important;
	width: 28px !important;
	height: 38px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	border-right: none !important;
	border-radius: 8px 0 0 8px !important;
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.08) !important;
	display: none !important; /* Hidden by default */
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #475569 !important;
	font-size: 12px !important;
	transition: all 0.2s ease !important;
}
.flowva-right-sidebar-dock-tab:hover {
	color: var(--primary, #f97316) !important;
	width: 34px !important;
	background: #fff7ed !important;
}

/* Display dock tab strictly when an active Form page is in the DOM */
body[data-route*="Form"] .flowva-right-sidebar-dock-tab {
	display: flex !important;
}

/* Guarantee dock tab disappears when routing to Workspaces, Lists, or Desktop */
body:not([data-route*="Form"]) #flowva-right-sidebar-dock-tab {
	display: none !important;
}

/* User search dropdown in Personal Widget */
.flowva-user-dropdown-list {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 1050 !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	max-height: 180px !important;
	overflow-y: auto !important;
	display: none;
	margin-top: 2px !important;
	padding: 4px 0 !important;
}
.flowva-user-dropdown-item {
	padding: 6px 12px !important;
	font-size: 12px !important;
	color: #334155 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	transition: background 0.12s ease !important;
}
.flowva-user-dropdown-item:hover,
.flowva-user-dropdown-item.active {
	background: rgba(249, 115, 22, 0.08) !important;
	color: var(--primary, #f97316) !important;
}

/* -------------------------------------------------------------------------
   Sidebar Tabs & Items Visibility Guarantees across Desktop & Mobile
   ------------------------------------------------------------------------- */
body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .body-sidebar .sidebar-items,
body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .body-sidebar .standard-sidebar-section,
body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .body-sidebar .body-sidebar-cards,
body:not(.sidebar-hidden):not(.flowva-sidebar-is-collapsed) .desk-sidebar .sidebar-items,
.body-sidebar-container:not(.collapsed):not(.hidden) .body-sidebar .sidebar-items,
.body-sidebar-container:not(.collapsed):not(.hidden) .body-sidebar .standard-sidebar-section,
.body-sidebar-container:not(.collapsed):not(.hidden) .desk-sidebar .sidebar-items {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body[data-sidebar="0"]:not(.flowva-sidebar-is-collapsed) .body-sidebar .sidebar-items,
body[data-sidebar="0"]:not(.flowva-sidebar-is-collapsed) .body-sidebar .standard-sidebar-section {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Mobile / Phone View Responsive Drawer Styling (<= 991px)
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* Hide in-page layout-side-section on mobile to prevent empty left gap */
	.layout-main > .layout-side-section:not(.right),
	.layout-side-section:not(.right):not(.body-sidebar-container):not(.body-sidebar) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		visibility: hidden !important;
		overflow: hidden !important;
	}

	/* Convert desktop sidebar to smooth off-canvas slide drawer on mobile */
	.body-sidebar-container {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		height: 100vh !important;
		max-height: 100vh !important;
		width: 280px !important;
		max-width: 85vw !important;
		min-width: 0 !important;
		flex: none !important;
		z-index: 1045 !important;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
		transform: translateX(-100%) !important;
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
		background: #ffffff !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
		box-sizing: border-box !important;
	}

	body:not(.flowva-mobile-sidebar-open) .body-sidebar-container {
		display: none !important;
		width: 0 !important;
		max-width: 0 !important;
		min-width: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.flowva-mobile-sidebar-open .body-sidebar-container {
		display: flex !important;
		transform: translateX(0) !important;
		pointer-events: auto !important;
		visibility: visible !important;
	}

	.main-section,
	.page-container,
	.layout-main,
	.layout-main-section,
	.layout-main-section-wrapper {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		flex: 1 1 100% !important;
	}

	.body-sidebar,
	.desk-sidebar {
		position: relative !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 100% !important;
		max-height: 100% !important;
		flex: 1 1 100% !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
		box-sizing: border-box !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Collapse Button on Mobile: Appears halfway sticking out of the drawer above page content */
	.body-sidebar .flowva-sidebar-collapse-btn,
	.desk-sidebar .flowva-sidebar-collapse-btn {
		position: absolute !important;
		right: -13px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		width: 26px !important;
		height: 26px !important;
		border-radius: 50% !important;
		background: var(--card-bg, #ffffff) !important;
		border: 1px solid var(--border-color, #e2e8f0) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		z-index: 1050 !important;
		color: var(--text-muted, #64748b) !important;
		font-size: 11px !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.body-sidebar-top {
		flex: 0 0 auto !important;
		overflow: visible !important;
	}

	/* Sidebar Header in Mobile Drawer: comfortable margins and clean border-radius */
	.body-sidebar .sidebar-header,
	.desk-sidebar .sidebar-header,
	.sidebar-header {
		margin: 10px 12px 6px 12px !important;
		padding: 10px 12px !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		cursor: pointer !important;
	}

	/* Mobile Sidebar Header Dropdown Menu: clean margins and touch-friendly padding */
	.sidebar-header .dropdown-menu,
	.sidebar-header .frappe-menu,
	.sidebar-header .context-menu,
	.sidebar-header-menu,
	.frappe-menu.context-menu,
	.context-menu,
	.frappe-menu {
		margin: 4px 12px !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
		max-height: 70vh !important;
		overflow-y: auto !important;
		z-index: 1065 !important;
	}
	.sidebar-header-menu .dropdown-item,
	.sidebar-header .dropdown-menu .dropdown-item,
	.frappe-menu .dropdown-item,
	.context-menu .dropdown-item,
	.frappe-menu.context-menu .dropdown-item,
	.frappe-menu .menu-item,
	.context-menu .menu-item,
	.frappe-menu.context-menu .menu-item {
		margin: 2px 4px !important;
		padding: 8px 12px !important;
		border-radius: 8px !important;
	}

	.body-sidebar .sidebar-items,
	.desk-sidebar .sidebar-items {
		flex: 1 1 auto !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		min-height: 0 !important;
	}

	/* Pin body-sidebar-bottom strictly to the bottom of the sidebar with lowered free space */
	.body-sidebar-bottom,
	.desk-sidebar-bottom,
	.sidebar-bottom {
		margin-top: auto !important;
		flex-shrink: 0 !important;
		width: 100% !important;
		background: inherit !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		box-sizing: border-box !important;
		padding: 4px 8px max(6px, env(safe-area-inset-bottom, 6px)) 8px !important;
		gap: 3px !important;
	}

	.flowva-sidebar-footer {
		margin-top: 2px !important;
		padding: 4px 8px 3px 8px !important;
		gap: 4px !important;
	}

	/* Search Tab: Completely suppressed in mobile sidebar */
	[item-name="Search"],
	[data-name="Search"],
	.standard-sidebar-item[item-name="Search"],
	.standard-sidebar-item[data-name="Search"],
	.standard-sidebar-item[data-item-name="Search"],
	.sidebar-item-container:has([item-name="Search"]),
	.sidebar-item-container:has([data-name="Search"]),
	.sidebar-item-container.flowva-injected-search {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		width: 0 !important;
		opacity: 0 !important;
		pointer-events: none !important;
		overflow: hidden !important;
	}

	[data-flowva-preset="stock-dark"] .body-sidebar,
	html[data-theme="dark"] .body-sidebar,
	[data-flowva-preset="stock-dark"] .body-sidebar-container,
	html[data-theme="dark"] .body-sidebar-container {
		background: #0f172a !important;
	}

	/* Slide drawer into view when toggled open on mobile */
	body.flowva-mobile-sidebar-open .body-sidebar-container {
		transform: translateX(0) !important;
		display: flex !important;
		visibility: visible !important;
	}

	/* Dimmed touch-dismiss backdrop overlay */
	.flowva-mobile-sidebar-backdrop {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(15, 23, 42, 0.5) !important;
		backdrop-filter: blur(2px) !important;
		z-index: 1044 !important;
		display: none;
	}
	body.flowva-mobile-sidebar-open .flowva-mobile-sidebar-backdrop {
		display: block !important;
	}

	/* Main section on mobile: strictly full-width, no horizontal row squishing */
	.layout-main,
	.layout-main.flowva-right-open,
	.layout-main:has(.layout-side-section.right.flowva-right-open) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		flex-direction: column !important;
	}
	.layout-main-section-wrapper,
	.layout-main.flowva-right-open .layout-main-section-wrapper,
	.layout-main:has(.layout-side-section.right.flowva-right-open) .layout-main-section-wrapper,
	.layout-main-section,
	.page-container {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	/* Floating Sidebar Expand Dock Trigger on Phone/Mobile */
	.flowva-sidebar-dock-trigger {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: fixed !important;
		left: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 1045 !important;
		width: 38px !important;
		max-width: 38px !important;
		height: 38px !important;
		border-radius: 0 19px 19px 0 !important;
		box-shadow: 2px 0 14px rgba(0, 0, 0, 0.16) !important;
		cursor: pointer !important;
	}
	/* On Phone/Mobile: Strictly suppress dock trigger ONLY on desk desktop launcher view or login */
	body[data-route="desktop"] .flowva-sidebar-dock-trigger,
	body[data-route="desktop"] #flowva-sidebar-dock-trigger,
	body[data-route="app"] .flowva-sidebar-dock-trigger,
	body[data-route="app"] #flowva-sidebar-dock-trigger,
	body[data-route=""] .flowva-sidebar-dock-trigger,
	body[data-route=""] #flowva-sidebar-dock-trigger,
	body[data-flowva-desktop-view="1"] .flowva-sidebar-dock-trigger,
	body[data-flowva-desktop-view="1"] #flowva-sidebar-dock-trigger,
	html[data-flowva-desktop-view="1"] .flowva-sidebar-dock-trigger,
	html[data-flowva-desktop-view="1"] #flowva-sidebar-dock-trigger,
	body:has(.user-onboarding) .flowva-sidebar-dock-trigger,
	body.flowva-mobile-sidebar-open .flowva-sidebar-dock-trigger,
	body[data-path="login"] .flowva-sidebar-dock-trigger,
	body[data-route="login"] .flowva-sidebar-dock-trigger {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Compact right-side navbar buttons and page actions to maximize breadcrumbs space */
	header.navbar .btn,
	header.navbar .btn-default,
	header.navbar .btn-primary,
	header.navbar .nav-link,
	header.navbar .dropdown-search .btn,
	header.navbar .search-bar,
	header.navbar .menu-btn-group .btn,
	header.navbar .actions-btn-group .btn,
	header.navbar .standard-actions .btn,
	.page-head .page-actions .btn,
	.page-head .standard-actions .btn,
	.page-head .menu-btn-group .btn,
	.page-head .custom-actions .btn,
	.page-head .actions-btn-group .btn,
	.standard-actions .btn,
	.page-actions .btn,
	.menu-btn-group .btn {
		height: 26px !important;
		min-height: 26px !important;
		padding: 2px 7px !important;
		font-size: 11px !important;
		line-height: 1.25 !important;
		border-radius: 6px !important;
		margin-left: 3px !important;
		margin-right: 0 !important;
	}

	header.navbar .dropdown-search .btn,
	header.navbar .btn-search,
	.page-head .menu-btn-group > .btn,
	.standard-actions .menu-btn-group > .btn,
	.page-actions .menu-btn-group > .btn {
		width: 26px !important;
		min-width: 26px !important;
		max-width: 26px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	header.navbar .btn svg,
	header.navbar .btn i,
	.page-head .page-actions svg,
	.page-head .page-actions i,
	.page-head .standard-actions svg,
	.page-head .standard-actions i,
	.menu-btn-group .btn svg,
	.menu-btn-group .btn i {
		width: 12px !important;
		height: 12px !important;
		font-size: 11px !important;
	}

	/* Navbar tiny status indicator dot (ONLY navbar/breadcrumbs, NEVER list view status pills) */
	.navbar .indicator,
	.navbar-nav .indicator,
	.page-head .breadcrumbs .indicator {
		width: 7px !important;
		height: 7px !important;
		min-width: 7px !important;
		margin: 0 4px !important;
		padding: 0 !important;
	}

	/* Status Indicator Pills in List View: Full text display with beautiful badge styling on mobile */
	.list-row .indicator-pill,
	.list-row .indicator,
	.frappe-list .indicator-pill,
	.frappe-list .indicator,
	.page-head .indicator-pill {
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 3px 8px !important;
		border-radius: 9999px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 5px !important;
		white-space: nowrap !important;
	}

	/* List View on Phone: Strict viewport fit, no body overflow */
	.frappe-list {
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	/* Global & Mobile: Remove background and background-color from .level-right (Fix 10.1) */
	.frappe-list .list-row .level-right,
	.frappe-list .list-row-head .level-right {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
		background-color: transparent !important;
		background: transparent !important;
		border-left: none !important;
	}
	[data-flowva-preset="stock-dark"] .frappe-list .list-row .level-right,
	html[data-theme="dark"] .frappe-list .list-row .level-right {
		background-color: transparent !important;
		background: transparent !important;
		border-left: none !important;
	}

	/* Mobile Dashboard View & Widgets: Stack vertically in 100% full width, eliminate 5-column squish (Point 7) */
	.dashboard-view,
	.workspace-content,
	.widget-group,
	.widget-group .grid-row,
	.dashboard-view .widget-group,
	.workspace-content .widget-group {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.widget,
	.widget-group .widget,
	.widget-group .grid-col,
	.widget-group [class*="col-"],
	.dashboard-view .widget,
	.chart-widget-box,
	.number-card-widget,
	.shortcut-widget-box,
	.quick-list-widget-box,
	.onboarding-widget-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	/* Complete suppression of phantom columns in list view (Tag and redundant name at end) */
	.frappe-list .tag-col,
	.frappe-list .list-row-col.tag-col,
	.frappe-list [data-fieldname="_user_tags"],
	.frappe-list .list-row-head [data-fieldname="_user_tags"],
	.frappe-list .list-row [data-fieldname="_user_tags"],
	.frappe-list .list-row-head .list-row-col[data-fieldname="name"]:not(:first-child),
	.frappe-list .list-row .list-row-col[data-fieldname="name"]:not(:first-child):not(.list-subject) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		width: 0 !important;
		max-width: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		flex: 0 0 0px !important;
	}

	/* -------------------------------------------------------------------------
	   Phone List View: Generous Column Spaces, Horizontal Side-Scrolling & Zero Gaps
	   Allows smooth touch side-scrolling while giving plenty of room for all columns
	   ------------------------------------------------------------------------- */
	.frappe-list,
	.frappe-list .page-body,
	.frappe-list .layout-main,
	.frappe-list .layout-main-section-wrapper,
	.frappe-list .layout-main-section {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Eliminate vertical free space above and under data rows on mobile */
	.frappe-list .page-body {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
	.frappe-list .page-form {
		margin-top: 0px !important;
		margin-bottom: 2px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
	.frappe-list .standard-filter-section,
	.frappe-list .filter-section {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
	.frappe-list .filter-section:empty,
	.frappe-list .filter-tags:empty,
	.frappe-list .tag-filters-area:empty {
		display: none !important;
		height: 0px !important;
		min-height: 0px !important;
		margin: 0px !important;
		padding: 0px !important;
		border: none !important;
	}

	/* Scrollable table container: Enables smooth touch side-scrolling across columns on phone */
	.frappe-list .result-container,
	.frappe-list .result {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0px !important;
		height: auto !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
		scrollbar-width: thin !important;
	}
	.frappe-list .result-list {
		margin: 0px !important;
		padding: 0px !important;
		width: 100% !important;
		min-width: max-content !important;
		min-height: 0px !important;
		height: auto !important;
		overflow-x: visible !important;
	}

	/* Suppress empty placeholder or skeleton containers */
	.frappe-list .result .list-row-container:empty,
	.frappe-list .result-list > .list-row-container:not(:has(.list-row)):not(:has(.list-row-head)),
	.frappe-list .result > .list-row-container:not(:has(.list-row)):not(:has(.list-row-head)),
	.frappe-list .list-row-container:has(.list-row-skeleton),
	.frappe-list .list-row-skeleton,
	.frappe-list .list-skeleton {
		display: none !important;
		height: 0px !important;
		min-height: 0px !important;
		max-height: 0px !important;
		padding: 0px !important;
		margin: 0px !important;
		border: none !important;
		overflow: hidden !important;
	}

	/* Suppress bottom gap: hide no-result, empty-state, freeze, loading when rows exist */
	.frappe-list:has(.list-row) :is(.empty-state, .no-result, .freeze, .loading, .list-loading, .skeleton),
	.frappe-list:has(.list-row) .no-result,
	.frappe-list:has(.list-row) .empty-state,
	.frappe-list:has(.list-row) .freeze,
	.frappe-list .result:has(.list-row) ~ :is(.empty-state, .no-result, .freeze, .loading, .list-loading, .skeleton),
	.frappe-list .result-list:has(.list-row) ~ :is(.empty-state, .no-result, .freeze, .loading, .list-loading, .skeleton) {
		display: none !important;
		height: 0px !important;
		min-height: 0px !important;
		max-height: 0px !important;
		padding: 0px !important;
		margin: 0px !important;
		border: none !important;
		overflow: hidden !important;
	}

	/* Row Containers & Rows: width: max-content with 600px min-width enables full horizontal scrolling */
	.frappe-list .list-row-container {
		width: max-content !important;
		min-width: 600px !important;
		max-width: none !important;
		min-height: 52px !important;
		height: auto !important;
		margin: 0px !important;
		padding: 0px !important;
		border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
		display: flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	.frappe-list .list-row {
		width: max-content !important;
		min-width: 600px !important;
		max-width: none !important;
		min-height: 52px !important;
		height: auto !important;
		margin: 0px !important;
		padding: 6px 12px !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	/* -------------------------------------------------------------------------
	   Phone List View: Header, Dynamic Columns & Smooth Horizontal Scrolling
	   Supports all DocTypes dynamically with proper column names and alignment
	   ------------------------------------------------------------------------- */
	.frappe-list .list-row-head,
	.frappe-list header.list-row-head,
	.frappe-list .result .list-row-head,
	.frappe-list .list-header {
		width: max-content !important;
		min-width: 600px !important;
		max-width: none !important;
		height: 36px !important;
		min-height: 36px !important;
		max-height: 36px !important;
		margin: 0px !important;
		padding: 0 12px !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		background: var(--card-bg, #ffffff) !important;
		border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
		box-sizing: border-box !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 5 !important;
	}

	.frappe-list .list-row .level-left,
	.frappe-list .list-row-head .level-left,
	.frappe-list .list-row-head .level-left.list-header-subject {
		height: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		width: max-content !important;
		min-width: max-content !important;
		max-width: none !important;
		gap: 12px !important;
		margin: 0px !important;
		padding: 0px !important;
		overflow: visible !important;
	}

	.frappe-list .mobile-layout,
	.frappe-list .mobile-layout-seperator {
		display: contents !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}

	/* Strictly hide distracting activity icons, hearts, comment bubbles, and user tags */
	.frappe-list .select-like,
	.frappe-list .list-row-activity,
	.frappe-list .list-row-like,
	.frappe-list .comment-count,
	.frappe-list .like-action,
	.frappe-list [data-liked],
	.frappe-list svg.icon-heart,
	.frappe-list svg.icon-comment,
	.frappe-list .level-item:has(.like-action),
	.frappe-list .level-item:has(.comment-count),
	.frappe-list .tag-col,
	.frappe-list [data-fieldname="_user_tags"],
	.frappe-list .list-row-head .select-like:not(:has(input)),
	.frappe-list .list-row .select-like:not(:has(input)),
	.frappe-list .list-row-head .list-count {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
	}

	/* Checkbox styling */
	.frappe-list .list-row .list-subject .list-row-checkbox,
	.frappe-list .list-row .list-subject input[type="checkbox"],
	.frappe-list .list-row-head .list-subject .list-check-all,
	.frappe-list .list-row-head .list-subject input[type="checkbox"],
	.frappe-list .list-row .level-left > .list-row-col:first-child input[type="checkbox"],
	.frappe-list .list-row-head .level-left > .list-row-col:first-child input[type="checkbox"] {
		position: relative !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
		width: 18px !important;
		min-width: 18px !important;
		max-width: 18px !important;
		height: 18px !important;
		margin: 0 8px 0 0 !important;
		padding: 0 !important;
		vertical-align: middle !important;
	}

	/* Column 1: Document Subject (Title + ID under it on rows, Checkbox + Column 1 Name on header) */
	.frappe-list .list-row .list-subject,
	.frappe-list .list-row-head .list-subject,
	.frappe-list .list-row-head .level-left > .list-row-col:first-child,
	.frappe-list .list-row .level-left > .list-row-col:first-child {
		flex: 0 0 210px !important;
		width: 210px !important;
		min-width: 210px !important;
		max-width: 230px !important;
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.frappe-list .list-row .list-subject a,
	.frappe-list .list-row .level-left > .list-row-col:first-child a {
		font-size: 13px !important;
		font-weight: 700 !important;
		color: var(--text-color, #0f172a) !important;
		overflow: hidden !important;
		text-decoration: none !important;
		max-width: 100% !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;
	}

	/* Generic DocType Support: Force all columns to render on mobile without hidden-xs suppression */
	.frappe-list .list-row-head .list-row-col,
	.frappe-list .list-row .list-row-col,
	.frappe-list .list-row-head .list-row-col.hidden-xs,
	.frappe-list .list-row .list-row-col.hidden-xs {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Header column titles: crisp, bold, dark slate text */
	.frappe-list .list-row-head .list-col-title,
	.frappe-list .list-row-head [data-sort-by],
	.frappe-list .list-row-head .list-row-col span {
		font-size: 11.5px !important;
		font-weight: 700 !important;
		color: var(--text-muted, #475569) !important;
		text-transform: capitalize !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		line-height: 1.2 !important;
	}

	/* Subsequent columns (Column 2, 3, 4, 5... for ANY DocType): generous 95px min-width */
	.frappe-list .list-row-head .level-left > .list-row-col:not(:first-child),
	.frappe-list .list-row .level-left > .list-row-col:not(:first-child) {
		display: inline-flex !important;
		flex: 0 0 auto !important;
		min-width: 95px !important;
		max-width: 160px !important;
		align-items: center !important;
		justify-content: flex-start !important;
		font-size: 12px !important;
		color: var(--text-color, #1e293b) !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		padding: 0 4px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Specific column enhancements when present in any DocType */
	.frappe-list .list-row .list-row-col[data-fieldname="status"],
	.frappe-list .list-row-head .list-row-col[data-fieldname="status"] {
		min-width: 90px !important;
		width: 90px !important;
	}
	.frappe-list .list-row .list-row-col[data-fieldname*="total"],
	.frappe-list .list-row-head .list-row-col[data-fieldname*="total"] {
		min-width: 120px !important;
		font-weight: 700 !important;
		justify-content: flex-end !important;
		text-align: right !important;
	}
	.frappe-list .list-row .list-row-col[data-fieldname*="date"],
	.frappe-list .list-row-head .list-row-col[data-fieldname*="date"] {
		min-width: 100px !important;
		color: var(--text-muted, #64748b) !important;
	}

	/* Suppress duplicate Status in level-right when status is already present in level-left */
	.frappe-list .list-row:has(.level-left [data-fieldname="status"]) .level-right,
	.frappe-list .list-row-head:has(.level-left [data-fieldname="status"]) .level-right {
		display: none !important;
		width: 0px !important;
		min-width: 0px !important;
		max-width: 0px !important;
		margin: 0px !important;
		padding: 0px !important;
		overflow: hidden !important;
	}

	/* Fallback: If status is only in level-right, display it cleanly without duplicating */
	.frappe-list .list-row:not(:has(.level-left [data-fieldname="status"])) .level-right,
	.frappe-list .list-row-head:not(:has(.level-left [data-fieldname="status"])) .level-right {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 0 0 90px !important;
		min-width: 90px !important;
		width: 90px !important;
		margin: 0 !important;
		padding: 0 4px !important;
		background: transparent !important;
		border: none !important;
	}
	.frappe-list .list-row .level-right > :not(:has(.indicator-pill)):not(.indicator-pill) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	/* Pagination footer: eliminate bottom gap */
	.frappe-list .list-paging-area {
		margin-top: 4px !important;
		margin-bottom: 8px !important;
		padding: 4px 8px !important;
	}/* Activity Center Filter Buttons on Phone: full button height, no squishing, clean touch scroll */
	.flowva-activity-drawer .flowva-drawer-tabs {
		margin: 8px 12px !important;
		padding: 6px 8px !important;
		gap: 6px !important;
		min-height: 44px !important;
		height: 44px !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		flex-wrap: nowrap !important;
		max-width: calc(100% - 24px) !important;
		scrollbar-width: none !important;
	}
	.flowva-activity-drawer .flowva-drawer-tabs::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
	.flowva-activity-drawer .flowva-drawer-tab-btn {
		padding: 5px 11px !important;
		font-size: 11.5px !important;
		font-weight: 600 !important;
		gap: 5px !important;
		min-height: 32px !important;
		height: 32px !important;
		border-radius: 9999px !important;
		min-width: 0 !important;
		flex-shrink: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}
	.flowva-activity-drawer .flowva-drawer-tab-btn i {
		font-size: 12px !important;
	}
	.flowva-activity-drawer .flowva-drawer-tab-count {
		font-size: 10px !important;
		padding: 1px 5px !important;
		min-width: 16px !important;
		border-radius: 9999px !important;
		text-align: center !important;
		line-height: 1.2 !important;
	}

	/* Breadcrumbs Route Clean Display on Phone & Mobile View: Shrink-to-fit without leading slash */
	.nav.d-sm-flex.navbar-breadcrumbs,
	.navbar-breadcrumbs,
	.page-head .navbar-breadcrumbs,
	.page-head .breadcrumbs {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		font-size: clamp(0.64rem, 2.7vw, 0.72rem) !important;
		letter-spacing: -0.015em !important;
		line-height: 1.25 !important;
		max-width: calc(100vw - 105px) !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 2px !important;
		margin-left: 4px !important;
	}
	.navbar-breadcrumbs::-webkit-scrollbar,
	.breadcrumbs::-webkit-scrollbar {
		display: none !important;
	}
	.navbar-breadcrumbs li,
	.breadcrumbs li {
		font-size: inherit !important;
		display: inline-flex !important;
		align-items: center !important;
		flex-shrink: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* On phone only: hide intermediate module hierarchy (e.g. Selling) so only [ DocType / Document ID ] is shown */
	@media (max-width: 767.98px) {
		.navbar-breadcrumbs li:not(:last-child):not(:nth-last-child(2)),
		.breadcrumbs li:not(:last-child):not(:nth-last-child(2)) {
			display: none !important;
		}
	}
	.navbar-breadcrumbs li a,
	.navbar-breadcrumbs li span,
	.breadcrumbs li a,
	.breadcrumbs li span {
		font-size: inherit !important;
		max-width: none !important;
		flex: 0 1 auto !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}
	.navbar-breadcrumbs li:nth-last-child(2) a,
	.navbar-breadcrumbs li:nth-last-child(2) span {
		color: var(--text-muted, #64748b) !important;
		font-weight: 500 !important;
		flex-shrink: 2 !important;
	}
	.navbar-breadcrumbs li:last-child a,
	.navbar-breadcrumbs li:last-child span {
		color: var(--text-color, #1e293b) !important;
		font-weight: 600 !important;
		flex-shrink: 1 !important;
	}

	/* Suppress default sibling dividers to prevent leading slash before first visible breadcrumb */
	.navbar-breadcrumbs li::before,
	.breadcrumbs li::before {
		content: none !important;
		display: none !important;
	}
	/* Only apply slash divider to the last item (between DocType and Document ID) */
	.navbar-breadcrumbs li:last-child::before,
	.breadcrumbs li:last-child::before {
		content: "/" !important;
		display: inline-block !important;
		font-size: 0.65rem !important;
		padding: 0 3px !important;
		color: var(--text-muted, #94a3b8) !important;
		opacity: 0.6 !important;
	}

	/* Right Form Sidebar Off-Canvas Drawer: Desktop Parity from Right Side */
	.layout-side-section.right.flowva-right-open {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
		height: 100vh !important;
		max-height: 100vh !important;
		width: 270px !important;
		max-width: 80vw !important;
		min-width: 0 !important;
		flex: none !important;
		z-index: 1050 !important;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1) !important;
		background: var(--card-bg, #ffffff) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		border-left: 1px solid var(--border-color, #e2e8f0) !important;
	}

	/* Desktop parity: inside .layout-side-section.right, .form-sidebar stays strictly inside on the right side */
	.layout-side-section.right.flowva-right-open .form-sidebar,
	.layout-side-section.right.flowva-right-open .overlay-sidebar,
	.layout-side-section.right.flowva-right-open .form-sidebar.overlay-sidebar,
	.layout-side-section.right .form-sidebar,
	.layout-side-section.right .overlay-sidebar,
	.layout-side-section.right .form-sidebar.overlay-sidebar,
	.form-sidebar.flowva-right-open,
	.overlay-sidebar.flowva-right-open {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: none !important;
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		visibility: visible !important;
		opacity: 1 !important;
		float: none !important;
	}

	/* Fallback if form-sidebar is direct child without layout-side-section.right */
	.form-sidebar.flowva-right-open:not(.layout-side-section.right *) {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
		height: 100vh !important;
		max-height: 100vh !important;
		width: 270px !important;
		max-width: 80vw !important;
		min-width: 0 !important;
		flex: none !important;
		z-index: 1050 !important;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1) !important;
		background: var(--card-bg, #ffffff) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		border-left: 1px solid var(--border-color, #e2e8f0) !important;
	}

	[data-flowva-preset="stock-dark"] .layout-side-section.right.flowva-right-open,
	[data-flowva-preset="stock-dark"] .form-sidebar.flowva-right-open,
	html[data-theme="dark"] .layout-side-section.right.flowva-right-open,
	html[data-theme="dark"] .form-sidebar.flowva-right-open {
		background: #0f172a !important;
		border-left: 1px solid rgba(51, 65, 85, 0.7) !important;
	}

	/* Persistent Toggle Tab: Stays at the exact same location (right: 0) at all times */
	.flowva-right-sidebar-dock-tab,
	body.flowva-right-sidebar-mobile-open .flowva-right-sidebar-dock-tab,
	.flowva-right-sidebar-dock-tab.active {
		right: 0 !important;
		top: 130px !important;
		z-index: 1060 !important;
		display: flex !important;
		background: var(--card-bg, #ffffff) !important;
		border: 1px solid var(--border-color, rgba(0, 0, 0, 0.14)) !important;
		border-right: none !important;
		border-radius: 8px 0 0 8px !important;
		box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08) !important;
	}
	.flowva-right-sidebar-dock-tab.active {
		color: var(--primary, #f97316) !important;
		background: #fff7ed !important;
	}
	[data-flowva-preset="stock-dark"] .flowva-right-sidebar-dock-tab.active,
	html[data-theme="dark"] .flowva-right-sidebar-dock-tab.active {
		background: #1e293b !important;
		color: #fb923c !important;
	}

	/* Transparent backdrop: Do NOT change, dim, or blur the page background */
	.flowva-mobile-right-sidebar-backdrop {
		position: fixed !important;
		inset: 0 !important;
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		z-index: 1049 !important;
		display: none;
	}
	body.flowva-right-sidebar-mobile-open .flowva-mobile-right-sidebar-backdrop {
		display: block !important;
	}

	/* Desktop Parity: Unblock all functional sections (Title/ID/Actions, Assign, Attachments, Tags, Share, Stats) */
	.layout-side-section.right.flowva-right-open,
	.layout-side-section.right.flowva-right-open .form-sidebar,
	.layout-side-section.right.flowva-right-open .form-sidebar-title,
	.layout-side-section.right.flowva-right-open .sidebar-section,
	.layout-side-section.right.flowva-right-open .sidebar-meta-details,
	.layout-side-section.right.flowva-right-open .form-sidebar-section,
	.layout-side-section.right.flowva-right-open .form-assignments,
	.layout-side-section.right.flowva-right-open .form-attachments,
	.layout-side-section.right.flowva-right-open .form-tags,
	.layout-side-section.right.flowva-right-open .form-shared,
	.layout-side-section.right.flowva-right-open .sidebar-section.text-muted,
	.layout-side-section.right.flowva-right-open .form-sidebar-stats,
	.layout-side-section.right.flowva-right-open .form-sidebar-stats li,
	.layout-side-section.right.flowva-right-open .modified-by,
	.layout-side-section.right.flowva-right-open .created-by,
	.form-sidebar.flowva-right-open,
	.form-sidebar.flowva-right-open .form-sidebar-title,
	.form-sidebar.flowva-right-open .sidebar-section,
	.form-sidebar.flowva-right-open .sidebar-meta-details,
	.form-sidebar.flowva-right-open .form-sidebar-section,
	.form-sidebar.flowva-right-open .form-assignments,
	.form-sidebar.flowva-right-open .form-attachments,
	.form-sidebar.flowva-right-open .form-tags,
	.form-sidebar.flowva-right-open .form-shared,
	.form-sidebar.flowva-right-open .sidebar-section.text-muted,
	.form-sidebar.flowva-right-open .form-sidebar-stats,
	.form-sidebar.flowva-right-open .form-sidebar-stats li,
	.form-sidebar.flowva-right-open .modified-by,
	.form-sidebar.flowva-right-open .created-by {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Form Meta Details: Customer Title & Doc ID & Print / Likes */
	.layout-side-section.right.flowva-right-open .sidebar-meta-details,
	.form-sidebar.flowva-right-open .sidebar-meta-details {
		display: block !important;
		padding-bottom: 12px !important;
		margin-bottom: 10px !important;
		border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
	}
	.layout-side-section.right.flowva-right-open .sidebar-meta-details .form-details,
	.form-sidebar.flowva-right-open .sidebar-meta-details .form-details {
		font-weight: 600 !important;
		font-size: 13px !important;
		color: var(--text-color, #0f172a) !important;
	}
	.layout-side-section.right.flowva-right-open .sidebar-meta-details .form-name-container,
	.form-sidebar.flowva-right-open .sidebar-meta-details .form-name-container {
		font-size: 12px !important;
		font-weight: 500 !important;
		color: var(--text-muted, #64748b) !important;
	}
	.layout-side-section.right.flowva-right-open .form-stats-likes,
	.form-sidebar.flowva-right-open .form-stats-likes {
		display: flex !important;
		gap: 8px !important;
		align-items: center !important;
	}

	/* Override Frappe core mobile .hidden-xs and .hidden-sm inside the open drawer */
	.layout-side-section.right.flowva-right-open .hidden-xs,
	.layout-side-section.right.flowva-right-open .hidden-sm,
	.form-sidebar.flowva-right-open .hidden-xs,
	.form-sidebar.flowva-right-open .hidden-sm {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Only hide empty feedback, empty links, and followed by */
	.layout-side-section.right.flowva-right-open .form-feedback,
	.layout-side-section.right.flowva-right-open .form-links,
	.layout-side-section.right.flowva-right-open .followed-by-section,
	.layout-side-section.right.flowva-right-open .sidebar-rating,
	.layout-side-section.right.flowva-right-open .sidebar-section.hide,
	.layout-side-section.right.flowva-right-open .sidebar-section.hidden,
	.layout-side-section.right.flowva-right-open .user-actions,
	.layout-side-section.right.flowva-right-open .form-title-wrapper,
	.layout-side-section.right.flowva-right-open [data-sidebar-section="feedback"],
	.layout-side-section.right.flowva-right-open [data-sidebar-section="links"],
	.layout-side-section.right.flowva-right-open [data-sidebar-section="followed_by"],
	.form-sidebar.flowva-right-open .form-feedback,
	.form-sidebar.flowva-right-open .form-links,
	.form-sidebar.flowva-right-open .followed-by-section,
	.form-sidebar.flowva-right-open .sidebar-rating,
	.form-sidebar.flowva-right-open .sidebar-section.hide,
	.form-sidebar.flowva-right-open .sidebar-section.hidden,
	.form-sidebar.flowva-right-open .user-actions,
	.form-sidebar.flowva-right-open .form-title-wrapper,
	.form-sidebar.flowva-right-open [data-sidebar-section="feedback"],
	.form-sidebar.flowva-right-open [data-sidebar-section="links"],
	.form-sidebar.flowva-right-open [data-sidebar-section="followed_by"] {
		display: none !important;
	}

	.layout-side-section.right.flowva-right-open .sidebar-image-section:has(img[src]:not([src=""]):not([src="#"])),
	.layout-side-section.right.flowva-right-open .sidebar-image-wrapper:has(img[src]:not([src=""]):not([src="#"])),
	.form-sidebar.flowva-right-open .sidebar-image-section:has(img[src]:not([src=""]):not([src="#"])),
	.form-sidebar.flowva-right-open .sidebar-image-wrapper:has(img[src]:not([src=""]):not([src="#"])) {
		display: block !important;
	}
}

/* Sidebar bottom layout: FROZEN & pinned sticky to bottom of sidebar */
@media (min-width: 992px) {
	.body-sidebar-container,
	.body-sidebar,
	.desk-sidebar {
		display: flex !important;
		flex-direction: column !important;
		height: 100vh !important;
		max-height: 100vh !important;
		overflow: visible !important; /* CRITICAL: Must be visible so circular collapse button projects over page content */
		box-sizing: border-box !important;
		position: relative !important;
	}
}

@media (max-width: 991px) {
	.body-sidebar,
	.desk-sidebar {
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
		max-height: 100vh !important;
		overflow: visible !important; /* CRITICAL: Must be visible so circular collapse button projects 50% over page content */
		box-sizing: border-box !important;
		position: relative !important;
	}
}

/* Stray splash or freeze loading logos attached to body must never display */
body > .flowva-loading-logo,
body > .flowva-freeze-logo,
body > .flowva-splash-logo {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Sidebar Standard Sections: Natural content height without unused empty space */
.standard-items-sections,
.body-sidebar .standard-items-sections,
.desk-sidebar .standard-items-sections {
	flex: 0 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: calc(100vh - 220px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

/* Sidebar Tabs: Independently scrollable body-sidebar-top expanding directly under standard-items-sections till bottom box */
.body-sidebar-top,
.body-sidebar .body-sidebar-top,
.standard-sidebar-items,
.body-sidebar .standard-sidebar-items,
.body-sidebar .sidebar-items,
.desk-sidebar .sidebar-items,
.body-sidebar-container .sidebar-items,
.body-sidebar .standard-sidebar-section {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important; /* Firefox: completely invisible */
	-ms-overflow-style: none !important; /* IE/Edge: completely invisible */
}

.standard-items-sections::-webkit-scrollbar,
.body-sidebar .standard-items-sections::-webkit-scrollbar,
.body-sidebar-top::-webkit-scrollbar,
.standard-sidebar-items::-webkit-scrollbar,
.body-sidebar .standard-sidebar-items::-webkit-scrollbar,
.body-sidebar .sidebar-items::-webkit-scrollbar,
.desk-sidebar .sidebar-items::-webkit-scrollbar,
.body-sidebar-container .sidebar-items::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.standard-items-sections:empty,
.body-sidebar-top:empty,
.body-sidebar-cards:empty {
	display: none !important;
	flex: 0 0 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.body-sidebar-bottom,
.desk-sidebar-bottom,
.sidebar-bottom {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	min-height: fit-content !important;
	max-height: none !important;
	overflow: visible !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 4px !important;
	margin-top: auto !important;
	flex-shrink: 0 !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	padding: 8px 10px 0 10px !important; /* Strictly zero bottom padding */
	box-sizing: border-box !important;
	position: relative !important;
	bottom: 0 !important;
	z-index: 30 !important;
	background: var(--card-bg, #ffffff) !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04) !important;
}

[data-flowva-preset="stock-dark"] .body-sidebar-bottom,
html[data-theme="dark"] .body-sidebar-bottom,
[data-theme="dark"] .body-sidebar-bottom {
	background: #0f172a !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Sidebar Footer & Bottom Box: clean bottom padding on footer & remove .mt-3 top margin */
.flowva-sidebar-footer,
.body-sidebar-bottom .flowva-sidebar-footer,
.body-sidebar .flowva-sidebar-footer {
	padding: 6px 12px 14px 12px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box !important;
}

.body-sidebar-bottom .mt-3,
.body-sidebar .mt-3,
.desk-sidebar-bottom .mt-3,
.flowva-sidebar-footer.mt-3 {
	margin-top: 0 !important;
}

/* Sidebar Collapse Toggle Button: Positioned on .body-sidebar or .body-sidebar-container at centered height */
body:not(.flowva-sidebar-is-collapsed) .body-sidebar-container,
body:not(.flowva-sidebar-is-collapsed) .body-sidebar,
body:not(.flowva-sidebar-is-collapsed) .desk-sidebar,
.body-sidebar-container:not(.collapsed),
.body-sidebar:not(.collapsed),
.desk-sidebar:not(.collapsed) {
	overflow: visible !important;
	position: relative !important;
	z-index: 1050 !important;
}

/* When sidebar is explicitly collapsed, collapse button MUST completely disappear */
body.flowva-sidebar-is-collapsed .flowva-sidebar-collapse-btn,
.body-sidebar-container.collapsed .flowva-sidebar-collapse-btn,
.body-sidebar.collapsed .flowva-sidebar-collapse-btn,
.desk-sidebar.collapsed .flowva-sidebar-collapse-btn,
[data-flowva-sidebar-state="collapsed"] .flowva-sidebar-collapse-btn {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

@media (max-width: 991px) {
	/* On mobile phone view, collapse button only shows when the drawer is open */
	body:not(.flowva-mobile-sidebar-open) .flowva-sidebar-collapse-btn {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}
}

.body-sidebar-container .flowva-sidebar-collapse-btn,
.body-sidebar .flowva-sidebar-collapse-btn,
.desk-sidebar .flowva-sidebar-collapse-btn,
.flowva-sidebar-collapse-btn {
	position: absolute !important;
	right: -13px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: var(--card-bg, #ffffff) !important;
	border: 1px solid var(--border-color, #e2e8f0) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 99999 !important; /* Above .sidebar-resize-handle and all containers */
	color: var(--text-muted, #64748b) !important;
	font-size: 11px !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
	outline: none !important;
}

.body-sidebar-container .flowva-sidebar-collapse-btn:hover,
.body-sidebar .flowva-sidebar-collapse-btn:hover,
.desk-sidebar .flowva-sidebar-collapse-btn:hover {
	background: var(--primary, #f97316) !important;
	color: #ffffff !important;
	border-color: var(--primary, #f97316) !important;
	transform: translateY(-50%) scale(1.15) !important;
	box-shadow: 0 4px 12px var(--flowva-glow-color, rgba(249, 115, 22, 0.4)) !important;
}

[data-flowva-preset="stock-dark"] .body-sidebar .flowva-sidebar-collapse-btn,
html[data-theme="dark"] .body-sidebar .flowva-sidebar-collapse-btn {
	background: #1e293b !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	color: #cbd5e1 !important;
}

/* Ensure default user data is forcefully displayed with avatar on the left and data on the right */
.sidebar-user-button,
a.sidebar-user-button,
.body-sidebar-bottom .sidebar-user-button,
.body-sidebar-bottom a[onclick*="route_to_user"] {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: 100% !important;
	min-height: 40px !important;
	padding: 4px 6px !important;
	gap: 8px !important;
	border-radius: 8px !important;
	color: var(--text-color, #1e293b) !important;
	text-decoration: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

.sidebar-user-button .avatar,
a.sidebar-user-button .avatar,
.sidebar-user-button .avatar-frame,
a.sidebar-user-button .avatar-frame {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	order: 1 !important; /* Avatar strictly on the left */
}

.sidebar-user-button .user-details,
a.sidebar-user-button .user-details,
.sidebar-user-button .flowva-user-details,
a.sidebar-user-button .flowva-user-details {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	margin-left: 0 !important;
	overflow: hidden !important;
	flex: 1 1 auto !important;
	text-align: left !important;
	visibility: visible !important;
	opacity: 1 !important;
	min-width: 0 !important;
	order: 2 !important; /* User data strictly on the right of avatar */
}

.sidebar-user-button .user-name,
a.sidebar-user-button .user-name {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--text-color, #0f172a) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 170px !important;
	line-height: 1.25 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.sidebar-user-button .user-email,
a.sidebar-user-button .user-email {
	display: block !important;
	font-size: 11px !important;
	color: var(--text-muted, #64748b) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 170px !important;
	line-height: 1.2 !important;
	visibility: visible !important;
	opacity: 1 !important;
}


/* Flowva v3.1.0.0 - Activity Center Audit Trail & Sales Order Service Button */
.flowva-drawer-tab-btn[data-tab="audit_log"] {
	color: #6366f1 !important;
}
.flowva-drawer-tab-btn[data-tab="audit_log"].active {
	background: #eef2ff !important;
	border-color: #6366f1 !important;
	color: #4f46e5 !important;
}
.flowva-audit-trail-container {
	padding: 10px 16px;
}
.flowva-audit-log-item {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.flowva-audit-log-head {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #64748b;
	margin-bottom: 4px;
}
.flowva-audit-log-head strong {
	color: #0f172a;
}
.flowva-audit-log-desc {
	font-size: 12px;
	color: #334155;
}
.flowva-so-service-btn {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
	color: #ffffff !important;
	border: none !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25) !important;
}

/* Suppress promotional <p> banner above user data in sidebar */
.body-sidebar-bottom p,
.body-sidebar p,
.desk-sidebar-bottom p,
.sidebar-bottom p,
.body-sidebar-bottom .promotional-banner,
.body-sidebar .promotional-banner,
.promotional-banner {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

/* Main Layout Empty Left Gap: Hide in-page layout-side-section on BOTH desktop and mobile */
.layout-main > .layout-side-section:not(.right),
.page-body:has(.form-page) .layout-main > .layout-side-section:not(.right),
.form-page .layout-main > .layout-side-section:not(.right),
.layout-main:has(.layout-side-section.right) > .layout-side-section:not(.right),
.page-container[data-page-route*="Form"] .layout-main > .layout-side-section:not(.right),
.layout-main-section-wrapper ~ .layout-side-section:not(.right),
.layout-side-section:not(.right):has(+ .layout-main-section-wrapper) {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	visibility: hidden !important;
	overflow: hidden !important;
	flex: 0 0 0 !important;
	pointer-events: none !important;
}

/* Mobile Phone Viewport Overflow Protection & Performance Acceleration */
@media (max-width: 991px) {
	/* 1. Prevent viewport overflow without breaking native momentum touch scrolling */
	html, body {
		max-width: 100vw !important;
		overflow-x: clip !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		-webkit-overflow-scrolling: touch !important;
	}
	.page-container, .page-body, .layout-main {
		max-width: 100vw !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* 2. Neutralize background-attachment: fixed on mobile (prevents 60fps full-viewport repaints during scroll) */
	body[data-path="login"],
	.for-login,
	body {
		background-attachment: scroll !important;
	}

	/* 3. Neutralize GPU-heavy backdrop-filter: blur() on sticky/fixed elements during mobile scrolling */
	.navbar,
	[data-flowva-theme="1"] .navbar,
	.desktop-navbar {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(255, 255, 255, 0.96) !important;
	}
	[data-flowva-preset="stock-dark"] .navbar,
	html[data-theme="dark"] .navbar,
	[data-theme="dark"] .navbar {
		background: rgba(15, 23, 42, 0.96) !important;
	}

	/* Relieve mobile GPU fillrate on floating triggers, backdrops, and drawer overlays */
	.flowva-sidebar-dock-trigger,
	#flowva-sidebar-dock-trigger,
	.flowva-activity-dock-trigger,
	#flowva-personal-widget-trigger,
	#flowva-personal-widget-window,
	.flowva-drawer-backdrop,
	.flowva-mobile-sidebar-backdrop,
	[data-flowva-theme="1"][data-flowva-preset="aurora-glass"] .widget {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	.flowva-drawer-backdrop,
	.flowva-mobile-sidebar-backdrop {
		background: rgba(15, 23, 42, 0.45) !important;
	}

	/* 4. Disable continuous infinite animations on mobile to keep CPU/GPU in low-power state */
	.flowva-activity-dock-icon-wrap i,
	.flowva-activity-dock-trigger:hover .flowva-activity-dock-icon-wrap i {
		animation: none !important;
	}
	.flowva-pw-deadline-badge.overdue {
		animation: none !important;
	}

	/* 5. Static mobile list-view styles: replaces heavy JS runtime loops with zero-cost native CSS */
	.frappe-list .result,
	.frappe-list .result-container {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
		scrollbar-width: none !important;
	}
	.frappe-list .result-list {
		width: 100% !important;
		min-width: max-content !important;
	}
	.frappe-list .list-row,
	.frappe-list .list-row-head,
	.frappe-list header.list-row-head,
	.frappe-list .list-row-container {
		min-width: 600px !important;
		width: max-content !important;
		max-width: none !important;
	}
	.frappe-list .result .list-row-container {
		content-visibility: auto !important;
		contain-intrinsic-size: auto 48px !important;
	}
	.frappe-list .page-form {
		margin-top: 0px !important;
		margin-bottom: 2px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
	.frappe-list .list-paging-area {
		margin-top: 4px !important;
		margin-bottom: 8px !important;
		padding: 4px 8px !important;
	}
	.frappe-list .select-like,
	.frappe-list .list-row-activity,
	.frappe-list .list-row-like,
	.frappe-list .comment-count,
	.frappe-list .like-action,
	.frappe-list [data-liked],
	.frappe-list .tag-col,
	.frappe-list [data-fieldname='_user_tags'] {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		visibility: hidden !important;
	}

	/* 6. Clean touch scrollbars */
	html::-webkit-scrollbar,
	body::-webkit-scrollbar,
	.page-container::-webkit-scrollbar,
	.page-body::-webkit-scrollbar,
	.layout-main::-webkit-scrollbar,
	.frappe-list::-webkit-scrollbar,
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
}



/* =========================================================================
   Flowva v3.2.3.3 - Size tokens for Flowva's own list UI.
   Display Density (below) only redefines these, so it never has to fight
   selector specificity with the list rules.
   ========================================================================= */
:root {
	--fd-card-title: 14px;
	--fd-card-id: 11.5px;
	--fd-card-chip: 12px;
	--fd-card-pad-y: 10px;
	--fd-card-pad-x: 14px;
	--fd-card-gap-y: 4px;
	--fd-pill: 11px;
	--fd-crumb: clamp(0.64rem, 2.7vw, 0.72rem);
}

/* =========================================================================
   Mobile list rows: Title + Document ID (classes set by
   flowva_desk.apply_double_title_to_row; replaces per-row inline styles)
   ========================================================================= */
.frappe-list .list-row a.flowva-double-title {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: flex-start !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	overflow: hidden !important;
	line-height: 1.25 !important;
}
.frappe-list .list-row .flowva-list-row-title {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fd-card-title) !important;
	font-weight: 700;
	color: var(--text-color, #0f172a);
	line-height: 1.25;
}
.frappe-list .list-row .flowva-list-row-docname {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fd-card-id) !important;
	font-weight: 500;
	color: var(--text-muted, #64748b);
	line-height: 1.2;
	margin-top: 2px;
}

/* =========================================================================
   Phone & tablet list view (<= 991px): card rows, no side-scrolling
   Line 1: title + ID (left) and status pill (right)
   Line 2: every other list column as a labelled "Label value" chip
   ========================================================================= */
@media (max-width: 991.98px) {
	/* The phone drawer must overlay the page. Older desktop rules such as
	   "body:not(.flowva-sidebar-is-collapsed) .body-sidebar-container { position: relative !important }"
	   out-rank the drawer's position: fixed and would push the page aside (list squeezed to the right). */
	body .body-sidebar-container.body-sidebar-container.body-sidebar-container {
		position: fixed !important;
	}

	/* Drawer height = the VISIBLE screen height. 100vh on phone browsers is the height with the address
	   bar hidden, which pushed the sidebar footer below the screen. Browsers without dvh keep 100vh. */
	body .body-sidebar-container.body-sidebar-container.body-sidebar-container {
		height: 100vh !important;
		max-height: 100vh !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
	}
	body .body-sidebar-container .body-sidebar.body-sidebar {
		max-height: 100vh !important;
		max-height: 100dvh !important;
	}

	/* An open drawer is never "collapsed" (desktop collapse state must not zero its width) */
	body.flowva-mobile-sidebar-open .body-sidebar-container.collapsed.collapsed {
		display: flex !important;
		width: 280px !important;
		max-width: 85vw !important;
		min-width: 0 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
	body.flowva-mobile-sidebar-open .body-sidebar-container .body-sidebar.collapsed.collapsed {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		visibility: visible !important;
	}

	.frappe-list.frappe-list .result,
	.frappe-list.frappe-list .result-container {
		overflow-x: hidden !important;
		touch-action: pan-y !important;
	}
	.frappe-list.frappe-list .result-list {
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Column header row is replaced by the labels on each card */
	.frappe-list.frappe-list .list-row-container:has(> .list-row-head),
	.frappe-list.frappe-list .list-row-head {
		display: none !important;
	}

	.frappe-list.frappe-list .list-row-container {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 0 !important;
		contain-intrinsic-size: auto 66px !important;
	}
	.frappe-list.frappe-list .list-row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		padding: var(--fd-card-pad-y) var(--fd-card-pad-x) !important;
	}
	.frappe-list.frappe-list .list-row .level-left {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		gap: var(--fd-card-gap-y) 14px !important;
		overflow: hidden !important;
	}
	/* Zero-height full-width flex item that pushes the value chips onto their own line */
	.frappe-list.frappe-list .list-row .level-left::after {
		content: "" !important;
		order: 1 !important;
		flex: 0 0 100% !important;
		height: 0 !important;
		margin: 0 !important;
	}
	/* Doubled classes: must out-rank the older ":not(:has(...)) .level-right" rules above */
	.frappe-list.frappe-list.frappe-list .list-row .level-right.level-right {
		display: none !important;
	}

	/* Line 1 (left): title + document ID */
	.frappe-list.frappe-list .list-row .level-left .list-row-col.list-subject {
		order: 0 !important;
		flex: 1 1 0% !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	/* Line 1 (right): document status pill (column classified by flowva_desk.label_mobile_list_cols) */
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-status-col {
		order: 0 !important;
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 48% !important;
		padding: 0 !important;
		justify-content: flex-end !important;
	}
	.frappe-list.frappe-list .list-row .indicator-pill,
	.frappe-list.frappe-list .list-row .indicator-pill span {
		font-size: var(--fd-pill) !important;
	}

	/* Line 2+: labelled value chips - every other configured list column, for any DocType */
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col {
		order: 2 !important;
		flex: 0 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
		justify-content: flex-start !important;
		text-align: left !important;
		font-size: var(--fd-card-chip) !important;
		font-weight: 600 !important;
		color: var(--text-color, #1e293b) !important;
		line-height: 1.35 !important;
	}
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col * {
		font-size: inherit !important;
	}
	/* Long values wrap onto more lines instead of being cut off: the card grows to fit its data */
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col,
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col * {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		overflow-wrap: anywhere;
	}
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col {
		align-items: baseline !important;
	}
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-chip-col .indicator-pill {
		font-size: var(--fd-pill) !important;
	}
	/* Percent fields: compact progress bar + number */
	.frappe-list.frappe-list .list-row .flowva-chip-col div:has(> .progress) {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		width: auto !important;
	}
	.frappe-list.frappe-list .list-row .flowva-chip-col .progress {
		display: inline-flex !important;
		width: 56px !important;
		min-width: 56px !important;
		height: 6px !important;
	}
	.frappe-list.frappe-list .list-row .flowva-chip-pct {
		font-weight: 600;
	}
	.frappe-list.frappe-list .list-row .level-left .list-row-col[data-flowva-label]::before {
		content: attr(data-flowva-label);
		flex-shrink: 0;
		margin-right: 5px;
		font-weight: 500;
		color: var(--text-muted, #64748b);
		white-space: nowrap;
	}

	/* Never show tag / empty / duplicated-ID columns as chips */
	.frappe-list.frappe-list .list-row .level-left .list-row-col.tag-col,
	.frappe-list.frappe-list .list-row .level-left .list-row-col.flowva-empty-col,
	.frappe-list.frappe-list .list-row .level-left .list-row-col[data-fieldname="name"]:not(.list-subject),
	.frappe-list.frappe-list .list-row .level-left .list-row-col[data-fieldname="_user_tags"] {
		display: none !important;
	}

	/* Mobile breadcrumbs size follows the density token */
	.nav.d-sm-flex.navbar-breadcrumbs.navbar-breadcrumbs,
	.page-head .navbar-breadcrumbs.navbar-breadcrumbs,
	.page-head .breadcrumbs.breadcrumbs {
		font-size: var(--fd-crumb) !important;
	}
}

/* =========================================================================
   Display Density (Theme picker -> Display Density)
   Sets data-flowva-density="compact" | "spacious" on <html> and <body>.
   Default mode adds nothing. Compact ~ -1.5px / tighter, Spacious ~ +2px /
   roomier, applied to Frappe's design tokens, Flowva's tokens above, and the
   hard-coded sizes used by the sidebar, menus, forms, lists and headers.
   ========================================================================= */
html[data-flowva-density="compact"] {
	--text-tiny: 10px;
	--text-2xs: 10.5px;
	--text-xs: 11px;
	--text-sm: 12px;
	--text-base: 12.5px;
	--text-md: 12.5px;
	--text-lg: 14.5px;
	--text-xl: 16.5px;
	--text-2xl: 18px;
	--padding-xs: 3px;
	--padding-sm: 5px;
	--padding-md: 10px;
	--padding-lg: 14px;
	--padding-xl: 22px;
	--margin-xs: 3px;
	--margin-sm: 6px;
	--margin-md: 10px;
	--margin-lg: 14px;
	--margin-xl: 22px;
	--input-height: 26px;
	--btn-height: 26px;
	--list-row-height: 26px;
	--input-padding: 4px 8px;
	--dropdown-padding: 3px 6px;
	--grid-padding: 6px 6px;

	--fd-card-title: 13px;
	--fd-card-id: 10.5px;
	--fd-card-chip: 11px;
	--fd-card-pad-y: 6px;
	--fd-card-pad-x: 12px;
	--fd-card-gap-y: 2px;
	--fd-pill: 10px;
	--fd-crumb: 9.5px;
	--fd-crumb-desktop: 14px;
	--fd-control-label: 11.5px;
	--fd-section-head: 12.5px;
	--fd-page-title: 15px;
	--fd-btn: 11.5px;
	--fd-sidebar-item: 12px;
	--fd-sidebar-item-h: 28px;
	--fd-menu-item: 12px;
	--fd-menu-pad: 4px 10px;
}

html[data-flowva-density="spacious"] {
	--text-tiny: 12.5px;
	--text-2xs: 13.5px;
	--text-xs: 13.5px;
	--text-sm: 15px;
	--text-base: 16px;
	--text-md: 16px;
	--text-lg: 18px;
	--text-xl: 21px;
	--text-2xl: 23px;
	--text-3xl: 27px;
	--padding-xs: 7px;
	--padding-sm: 10px;
	--padding-md: 20px;
	--padding-lg: 26px;
	--padding-xl: 38px;
	--margin-xs: 7px;
	--margin-sm: 13px;
	--margin-md: 20px;
	--margin-lg: 26px;
	--margin-xl: 38px;
	--input-height: 38px;
	--btn-height: 36px;
	--list-row-height: 44px;
	--input-padding: 8px 12px;
	--dropdown-padding: 8px 12px;
	--grid-padding: 12px 10px;

	--fd-card-title: 16.5px;
	--fd-card-id: 13px;
	--fd-card-chip: 14px;
	--fd-card-pad-y: 15px;
	--fd-card-pad-x: 16px;
	--fd-card-gap-y: 7px;
	--fd-pill: 14px;
	--fd-crumb: 12.5px;
	--fd-crumb-desktop: 18px;
	--fd-control-label: 15px;
	--fd-section-head: 17px;
	--fd-page-title: 21px;
	--fd-btn: 14.5px;
	--fd-sidebar-item: 15.5px;
	--fd-sidebar-item-h: 44px;
	--fd-menu-item: 15.5px;
	--fd-menu-pad: 10px 14px;
}

/* Generic text */
html[data-flowva-density] body {
	font-size: var(--text-base) !important;
}

/* Forms */
html[data-flowva-density] .form-control,
html[data-flowva-density] .frappe-control input,
html[data-flowva-density] .frappe-control select,
html[data-flowva-density] .frappe-control textarea,
html[data-flowva-density] .frappe-control .control-value,
html[data-flowva-density] .frappe-control .like-disabled-input {
	font-size: var(--text-base) !important;
}
html[data-flowva-density] .frappe-control .control-label,
html[data-flowva-density] .frappe-control label.control-label,
html[data-flowva-density] .grid-field label.control-label,
html[data-flowva-density] .checkbox .label-area {
	font-size: var(--fd-control-label) !important;
}
html[data-flowva-density] .frappe-control .help-box,
html[data-flowva-density] .frappe-control .tooltip-content {
	font-size: var(--text-xs) !important;
}
html[data-flowva-density] .form-section .section-head,
html[data-flowva-density] .form-tabs .nav-link,
html[data-flowva-density] .new-timeline .activity-title h4,
html[data-flowva-density] .comment-input-header .comment-title {
	font-size: var(--fd-section-head) !important;
}
html[data-flowva-density] .frappe-control input.form-control,
html[data-flowva-density] .frappe-control select.form-control {
	height: var(--input-height) !important;
	min-height: var(--input-height) !important;
}
html[data-flowva-density] .grid-body .grid-row .row-index,
html[data-flowva-density] .grid-body .grid-row .row-index span,
html[data-flowva-density] .grid-body .grid-row .static-area,
html[data-flowva-density] .grid-heading-row .static-area,
html[data-flowva-density] .grid-heading-row .row-index,
html[data-flowva-density] .timeline-content,
html[data-flowva-density] .form-sidebar .form-sidebar-label,
html[data-flowva-density] .form-sidebar .sidebar-menu a {
	font-size: var(--text-sm) !important;
}
html[data-flowva-density="compact"] .form-section .section-body,
html[data-flowva-density="compact"] .form-column {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
html[data-flowva-density="spacious"] .form-section .section-body {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
html[data-flowva-density="spacious"] .frappe-control.form-group,
html[data-flowva-density="spacious"] .form-group {
	margin-bottom: 18px !important;
}
/* Child table rows being edited: the taller inputs and padding above do not fit a table cell (the values
   disappeared, e.g. Other Order Costs in spacious mode). Inside a row the cell padding shrinks and the input fills it. */
html[data-flowva-density] .grid-body .editable-row .grid-static-col {
	padding: 4px 6px !important;
	height: auto !important;
}
html[data-flowva-density] .grid-body .editable-row .frappe-control .form-control,
html[data-flowva-density] .grid-body .editable-row .frappe-control input.form-control,
html[data-flowva-density] .grid-body .editable-row .frappe-control select.form-control {
	height: calc(var(--input-height) - 4px) !important;
	min-height: 0 !important;
	padding: 2px 10px !important;
	line-height: normal !important;
}
html[data-flowva-density] .grid-body .editable-row .frappe-control.form-group,
html[data-flowva-density] .grid-body .editable-row .form-group {
	margin-bottom: 0 !important;
}

/* Page head, breadcrumbs and buttons */
html[data-flowva-density] .page-head .title-text,
html[data-flowva-density] .page-head .page-title .title-text {
	font-size: var(--fd-page-title) !important;
}
html[data-flowva-density] .navbar-breadcrumbs,
html[data-flowva-density] .navbar-breadcrumbs li,
html[data-flowva-density] .navbar-breadcrumbs li a {
	font-size: var(--fd-crumb-desktop) !important;
}
html[data-flowva-density] .page-head .btn,
html[data-flowva-density] .page-head .btn span,
html[data-flowva-density] .page-form .btn,
html[data-flowva-density] .list-paging-area .btn,
html[data-flowva-density] .form-page .btn,
html[data-flowva-density] .grid-buttons .btn,
html[data-flowva-density] .grid-bulk-actions .btn,
html[data-flowva-density] .modal .btn {
	font-size: var(--fd-btn) !important;
}
@media (max-width: 991.98px) {
	html[data-flowva-density] .nav.d-sm-flex.navbar-breadcrumbs,
	html[data-flowva-density] .nav.d-sm-flex.navbar-breadcrumbs li,
	html[data-flowva-density] .nav.d-sm-flex.navbar-breadcrumbs li a,
	html[data-flowva-density] .page-head .breadcrumbs li a {
		font-size: var(--fd-crumb) !important;
	}
	html[data-flowva-density] header.navbar .btn,
	html[data-flowva-density] .page-head .page-actions .btn,
	html[data-flowva-density] .page-head .standard-actions .btn,
	html[data-flowva-density] .page-head .standard-actions .btn span {
		font-size: var(--fd-btn) !important;
	}
}

/* Sidebar items */
html[data-flowva-density] .desk-sidebar .sidebar-item-container > a,
html[data-flowva-density] .body-sidebar .sidebar-item-container > a,
html[data-flowva-density] .standard-sidebar-item,
html[data-flowva-density] .flowva-sidebar-item,
html[data-flowva-density] .flowva-sidebar-link-btn {
	height: var(--fd-sidebar-item-h) !important;
	min-height: var(--fd-sidebar-item-h) !important;
	font-size: var(--fd-sidebar-item) !important;
}
html[data-flowva-density] .sidebar-header .header-title,
html[data-flowva-density] .body-sidebar .sidebar-item-label {
	font-size: var(--fd-sidebar-item) !important;
}
html[data-flowva-density="spacious"] .desk-sidebar .sidebar-item-container > a,
html[data-flowva-density="spacious"] .body-sidebar .sidebar-item-container > a,
html[data-flowva-density="spacious"] .standard-sidebar-item,
html[data-flowva-density="spacious"] .flowva-sidebar-item,
html[data-flowva-density="spacious"] .flowva-sidebar-link-btn {
	padding: 0 12px !important;
	margin: 2px 4px !important;
}
html[data-flowva-density="spacious"] .sidebar-item-icon,
html[data-flowva-density="spacious"] .standard-sidebar-item .sidebar-item-icon,
html[data-flowva-density="spacious"] .flowva-sidebar-item .sidebar-item-icon {
	font-size: 17px !important;
}

/* Dropdown & context menus */
html[data-flowva-density] .dropdown-menu a,
html[data-flowva-density] .dropdown-menu .dropdown-item,
html[data-flowva-density] .frappe-menu .dropdown-menu-item a,
html[data-flowva-density] .frappe-menu .menu-item-title {
	padding: var(--fd-menu-pad) !important;
	font-size: var(--fd-menu-item) !important;
}
html[data-flowva-density] .frappe-menu .menu-item-title {
	padding: 0 !important;
}

/* List view (desktop table) */
html[data-flowva-density="compact"] .frappe-list .list-row {
	min-height: 34px !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}
html[data-flowva-density="spacious"] .frappe-list .list-row {
	min-height: 54px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
html[data-flowva-density] .frappe-list .list-row,
html[data-flowva-density] .frappe-list .list-row .list-row-col,
html[data-flowva-density] .frappe-list .list-row .list-subject a {
	font-size: var(--text-base) !important;
}
html[data-flowva-density] .frappe-list .list-row-head,
html[data-flowva-density] .frappe-list .list-row-head .list-row-col,
html[data-flowva-density] .frappe-list .list-row-head .list-col-title,
html[data-flowva-density] .frappe-list .list-row-head [data-sort-by] {
	font-size: var(--text-sm) !important;
}
html[data-flowva-density] .frappe-list .indicator-pill,
html[data-flowva-density] .frappe-list .indicator-pill span {
	font-size: var(--fd-pill) !important;
}
html[data-flowva-density="spacious"] .frappe-list .indicator-pill {
	padding: 4px 10px !important;
}

/* Workspace widgets */
html[data-flowva-density] .widget .widget-title,
html[data-flowva-density] .widget .widget-head .widget-title,
html[data-flowva-density] .links-widget-box .link-item,
html[data-flowva-density] .shortcut-widget-box .widget-title,
html[data-flowva-density] .ce-header {
	font-size: var(--text-base) !important;
}

/* Form breadcrumb: last item shows the document ID; tapping it copies the ID (flowva_desk.sync_mobile_breadcrumbs) */
.navbar-breadcrumbs li.flowva-copy-docname-li,
.breadcrumbs li.flowva-copy-docname-li,
.navbar-breadcrumbs li.flowva-copy-docname-li a.flowva-copy-docname,
.breadcrumbs li.flowva-copy-docname-li a.flowva-copy-docname,
.navbar-breadcrumbs li.flowva-copy-docname-li .flowva-copy-docname {
	pointer-events: auto !important;
	cursor: copy !important;
}

/* =========================================================================
   Child-table row editor (Frappe ".grid-row-open .form-in-grid"): centred on the
   content area (right of the sidebar), slightly narrower, height limited to the
   visible screen with its own scroll, over a dimmed + blurred backdrop.
   --flowva-content-left is set by flowva_desk.set_grid_form_open().
   ========================================================================= */
body.flowva-grid-form-open::after {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--flowva-content-left, 0px);
	background: rgba(15, 23, 42, 0.42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 1019;
	cursor: pointer;
	animation: flowva-grid-backdrop-in 0.18s ease-out;
}
@keyframes flowva-grid-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
body.flowva-grid-form-open .grid-row-open .form-in-grid {
	position: fixed !important;
	top: 4vh !important;
	top: 4dvh !important;
	left: calc(var(--flowva-content-left, 0px) + (100vw - var(--flowva-content-left, 0px)) / 2) !important;
	transform: translateX(-50%) !important;
	width: min(820px, calc(100vw - var(--flowva-content-left, 0px) - 64px)) !important;
	max-width: none !important;
	height: auto !important;
	max-height: 92vh !important;
	max-height: 92dvh !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	margin: 0 !important;
	z-index: 1021 !important;
	border-radius: 14px !important;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35), 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}
/* Keep the row header (title + actions) visible while the editor body scrolls */
body.flowva-grid-form-open .grid-row-open .form-in-grid .grid-form-heading {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--card-bg, #ffffff);
}
@media (max-width: 991.98px) {
	body.flowva-grid-form-open .grid-row-open .form-in-grid {
		top: 12px !important;
		width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
		max-height: calc(100dvh - 24px) !important;
		border-radius: 12px !important;
	}
}

/* Personal workspace tasks: priority badge + coloured left edge per priority */
.flowva-pw-priority-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 9999px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.6;
	border: 1px solid transparent;
}
.flowva-pw-priority-badge i { font-size: 9px; }
.flowva-pw-priority-badge.prio-urgent { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.flowva-pw-priority-badge.prio-high { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.flowva-pw-priority-badge.prio-medium { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.flowva-pw-priority-badge.prio-low { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.flowva-pw-task-card.prio-urgent { box-shadow: inset 3px 0 0 #dc2626, 0 2px 6px rgba(0, 0, 0, 0.03) !important; }
.flowva-pw-task-card.prio-high { box-shadow: inset 3px 0 0 #ea580c, 0 2px 6px rgba(0, 0, 0, 0.03) !important; }
.flowva-pw-task-card.prio-medium { box-shadow: inset 3px 0 0 #3b82f6, 0 2px 6px rgba(0, 0, 0, 0.03) !important; }
.flowva-pw-task-card.prio-low { box-shadow: inset 3px 0 0 #94a3b8, 0 2px 6px rgba(0, 0, 0, 0.03) !important; }
.flowva-pw-task-card.prio-urgent:hover { box-shadow: inset 3px 0 0 #dc2626, 0 4px 14px rgba(0, 0, 0, 0.06) !important; }
.flowva-pw-task-card.prio-high:hover { box-shadow: inset 3px 0 0 #ea580c, 0 4px 14px rgba(0, 0, 0, 0.06) !important; }
.flowva-pw-task-card.prio-medium:hover { box-shadow: inset 3px 0 0 #3b82f6, 0 4px 14px rgba(0, 0, 0, 0.06) !important; }
.flowva-pw-task-card.prio-low:hover { box-shadow: inset 3px 0 0 #94a3b8, 0 4px 14px rgba(0, 0, 0, 0.06) !important; }
.flowva-pw-task-card.completed.completed { box-shadow: none !important; }

/* Personal workspace: new task form - due date quick picks and priority buttons */
.flowva-pw-form-meta {
	flex-direction: column;
	gap: 10px;
}
.flowva-pw-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.flowva-pw-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 20px;
}
.flowva-pw-field-head label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	margin: 0;
}
.flowva-pw-due-hint {
	font-size: 10.5px;
	font-weight: 600;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.flowva-pw-due-hint.is-weekend { color: #b45309; }
.flowva-pw-due-hint.is-past { color: #dc2626; }
.flowva-pw-due-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.flowva-pw-due-chip {
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	padding: 3px 8px;
	border-radius: 9999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.flowva-pw-due-chip:hover { border-color: var(--primary, #f97316); color: var(--primary, #f97316); }
.flowva-pw-due-chip.active {
	background: var(--primary, #f97316);
	border-color: var(--primary, #f97316);
	color: #ffffff;
}
.flowva-pw-date-input { position: relative; }
.flowva-pw-date-input > i {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #94a3b8;
	pointer-events: none;
	z-index: 2; /* .form-control is positioned and would paint over the icon */
}
.flowva-pw-date-input input,
.flowva-pw-date-input .flowva-pw-date-btn {
	padding-left: 30px !important;
	font-size: 12px !important;
	border-radius: 8px !important;
	cursor: pointer;
}
.flowva-pw-priority-picker {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
}
.flowva-pw-prio-opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	padding: 6px 4px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	color: #64748b;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.flowva-pw-prio-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowva-pw-prio-opt i { font-size: 10px; flex-shrink: 0; }
.flowva-pw-prio-opt.prio-low i { color: #94a3b8; }
.flowva-pw-prio-opt.prio-medium i { color: #3b82f6; }
.flowva-pw-prio-opt.prio-high i { color: #ea580c; }
.flowva-pw-prio-opt.prio-urgent i { color: #dc2626; }
.flowva-pw-prio-opt:hover { border-color: #cbd5e1; background: #f8fafc; }
.flowva-pw-prio-opt.active.prio-low { background: #f1f5f9; border-color: #94a3b8; color: #334155; box-shadow: 0 0 0 1px #94a3b8; }
.flowva-pw-prio-opt.active.prio-medium { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; box-shadow: 0 0 0 1px #3b82f6; }
.flowva-pw-prio-opt.active.prio-high { background: #fff7ed; border-color: #ea580c; color: #c2410c; box-shadow: 0 0 0 1px #ea580c; }
.flowva-pw-prio-opt.active.prio-urgent { background: #fef2f2; border-color: #dc2626; color: #b91c1c; box-shadow: 0 0 0 1px #dc2626; }
.flowva-pw-due-chip:focus-visible,
.flowva-pw-prio-opt:focus-visible { outline: 2px solid var(--primary, #f97316); outline-offset: 1px; }
@media (max-width: 480px) {
	/* Phones: four priority buttons in ~63px each */
	.flowva-pw-prio-opt { gap: 4px; padding: 6px 2px; font-size: 11px; }
}

[data-flowva-preset="stock-dark"] .flowva-pw-form-card,
html[data-theme="dark"] .flowva-pw-form-card {
	background: #1e293b !important;
	border-color: rgba(249, 115, 22, 0.35) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
[data-flowva-preset="stock-dark"] .flowva-pw-form-title,
html[data-theme="dark"] .flowva-pw-form-title { color: #f1f5f9 !important; }
html[data-theme="dark"] .flowva-pw-field-head label,
html[data-theme="dark"] .flowva-pw-due-hint { color: #94a3b8; }
html[data-theme="dark"] .flowva-pw-due-hint.is-weekend { color: #fbbf24; }
html[data-theme="dark"] .flowva-pw-due-hint.is-past { color: #f87171; }
html[data-theme="dark"] .flowva-pw-due-chip { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .flowva-pw-due-chip.active { background: var(--primary, #f97316); border-color: var(--primary, #f97316); color: #ffffff; }
html[data-theme="dark"] .flowva-pw-prio-opt { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .flowva-pw-prio-opt:hover { background: #1e293b; border-color: #475569; }
html[data-theme="dark"] .flowva-pw-prio-opt.active.prio-low { background: rgba(148, 163, 184, 0.14); border-color: #94a3b8; color: #e2e8f0; }
html[data-theme="dark"] .flowva-pw-prio-opt.active.prio-medium { background: rgba(59, 130, 246, 0.16); border-color: #3b82f6; color: #93c5fd; }
html[data-theme="dark"] .flowva-pw-prio-opt.active.prio-high { background: rgba(234, 88, 12, 0.16); border-color: #ea580c; color: #fdba74; }
html[data-theme="dark"] .flowva-pw-prio-opt.active.prio-urgent { background: rgba(220, 38, 38, 0.16); border-color: #dc2626; color: #fca5a5; }
html[data-theme="dark"] .flowva-pw-priority-badge.prio-urgent { background: rgba(220, 38, 38, 0.15); color: #fca5a5; border-color: rgba(220, 38, 38, 0.35); }
html[data-theme="dark"] .flowva-pw-priority-badge.prio-high { background: rgba(234, 88, 12, 0.15); color: #fdba74; border-color: rgba(234, 88, 12, 0.35); }
html[data-theme="dark"] .flowva-pw-priority-badge.prio-medium { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); }
html[data-theme="dark"] .flowva-pw-priority-badge.prio-low { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.3); }