/*# sourceMappingURL=custom.min.css.map */


ul.pagination {
    margin-bottom: 0;
}

#remove-multiple {
    display: none;
}

.bg-red {
	background-color: #F44336!important;
	color: #fff!important;
}

.bg-green {
	background-color: #4CAF50!important;
	color: #fff!important;
}

.disabled-cls {
	background-color: #eff2f7!important; 
}

.edit-page-cls .choices {
    margin-bottom: unset !important;
}


#suggestion-list-1, #suggestion-list-2, #suggestion-category, #suggestion-brand {
    background-color: #ffffff;  /* solid white background */
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1051;  /* High enough to overlay other elements */
}

.highlighted-row {
    background-color: #d1e7dd !important;
    transition: background-color 0.5s ease;
}

.st-w-35 {
  width: 25% !important;
}

.buildmypcform .choices {
    margin-bottom: 0;
    width: 74%;
}

.usage-cls .choices {
    width: 75%;
}

.inline-editable {
    padding: 8px;
}

/* Sidebar responsive fixes and color overrides */

/* Ensure overlay and sidebar behave correctly on mobile/tablet */
@media (max-width: 1024px) {
	/* When sidebar is enabled on small screens, make it cover content and sit above overlay */
	.vertical-sidebar-enable .app-menu {
		margin-right: 0 !important;
		width: 260px !important; /* comfortable width on tablet/phone */
		z-index: 1040; /* above overlay (overlay is 1003) */
	}
	/* Let content take full width when sidebar is overlaid */
	.vertical-sidebar-enable .app-content,
	.vertical-sidebar-enable .footer {
		right: 0 !important;
	}
	/* Improve tap targets in sidebar on mobile - REMOVED to prevent conflicts */
	/* Original padding moved to comprehensive alignment fixes above */
}

/* Fine-tune very small phones */
@media (max-width: 575.98px) {
	.vertical-sidebar-enable .app-menu { width: 240px !important; }
}

/* Sidebar color scheme overrides */
:root {
	/* Neutralize strong purple accents to a more modern palette */
	--vz-vertical-menu-bg: #ffffff;
	--vz-vertical-menu-border: #eef0f2;
	--vz-vertical-menu-item-color: #475569; /* slate-600 */
	--vz-vertical-menu-item-hover-color: #111827; /* neutral-900 */
	--vz-vertical-menu-item-active-color: #111827;
	--vz-vertical-menu-item-bg: rgba(0, 0, 0, 0.05); /* subtle neutral bg */
	--vz-vertical-menu-item-active-bg: rgba(0, 0, 0, 0.08);
	--vz-vertical-menu-sub-item-color: #64748b; /* slate-500 */
	--vz-vertical-menu-sub-item-hover-color: #111827;
	--vz-vertical-menu-sub-item-active-color: #111827;
	--vz-vertical-menu-title-color: #94a3b8; /* slate-400 */
}

/* Respect dark theme while improving contrast */
[data-bs-theme="dark"] {
	--vz-vertical-menu-bg: #101317;
	--vz-vertical-menu-border: #101317;
	--vz-vertical-menu-item-color: rgba(255,255,255,0.7);
	--vz-vertical-menu-item-hover-color: #ffffff;
	--vz-vertical-menu-item-active-color: #ffffff;
	--vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.1);
	--vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
	--vz-vertical-menu-sub-item-color: rgba(255,255,255,0.6);
	--vz-vertical-menu-sub-item-hover-color: #ffffff;
	--vz-vertical-menu-sub-item-active-color: #ffffff;
	--vz-vertical-menu-title-color: rgba(255,255,255,0.55);
}

/* Ensure sidebar colors match desktop on all viewports */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar] {
	--vz-vertical-menu-bg: #ffffff;
	--vz-vertical-menu-border: #eef0f2;
	--vz-vertical-menu-item-color: #475569;
	--vz-vertical-menu-item-hover-color: #111827;
	--vz-vertical-menu-item-active-color: #111827;
	--vz-vertical-menu-item-bg: rgba(59, 130, 246, 0.08);
	--vz-vertical-menu-item-active-bg: rgba(59, 130, 246, 0.12);
	--vz-vertical-menu-sub-item-color: #64748b;
	--vz-vertical-menu-sub-item-hover-color: #111827;
	--vz-vertical-menu-sub-item-active-color: #111827;
	--vz-vertical-menu-title-color: #94a3b8;
}

[data-bs-theme="dark"]:is([data-layout=vertical],[data-layout=semibox])[data-sidebar] {
	--vz-vertical-menu-bg: #101317;
	--vz-vertical-menu-border: #101317;
	--vz-vertical-menu-item-color: rgba(255,255,255,0.7);
	--vz-vertical-menu-item-hover-color: #ffffff;
	--vz-vertical-menu-item-active-color: #ffffff;
	--vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.1);
	--vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
	--vz-vertical-menu-sub-item-color: rgba(255,255,255,0.6);
	--vz-vertical-menu-sub-item-hover-color: #ffffff;
	--vz-vertical-menu-sub-item-active-color: #ffffff;
	--vz-vertical-menu-title-color: rgba(255,255,255,0.55);
}

/* Force mobile/overlay sidebar to use desktop colors */
html[data-layout=vertical][data-sidebar],
html[data-layout=semibox][data-sidebar] {
	--vz-vertical-menu-bg: #ffffff !important;
	--vz-vertical-menu-border: #eef0f2 !important;
	--vz-vertical-menu-item-color: #475569 !important;
	--vz-vertical-menu-item-hover-color: #111827 !important;
	--vz-vertical-menu-item-active-color: #111827 !important;
	--vz-vertical-menu-item-bg: rgba(0, 0, 0, 0.05) !important;
	--vz-vertical-menu-item-active-bg: rgba(0, 0, 0, 0.08) !important;
	--vz-vertical-menu-sub-item-color: #64748b !important;
	--vz-vertical-menu-sub-item-hover-color: #111827 !important;
	--vz-vertical-menu-sub-item-active-color: #111827 !important;
	--vz-vertical-menu-title-color: #94a3b8 !important;
}

html[data-bs-theme="dark"][data-layout=vertical][data-sidebar],
html[data-bs-theme="dark"][data-layout=semibox][data-sidebar] {
	--vz-vertical-menu-bg: #101317 !important;
	--vz-vertical-menu-border: #101317 !important;
	--vz-vertical-menu-item-color: rgba(255,255,255,0.7) !important;
	--vz-vertical-menu-item-hover-color: #ffffff !important;
	--vz-vertical-menu-item-active-color: #ffffff !important;
	--vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.1) !important;
	--vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15) !important;
	--vz-vertical-menu-sub-item-color: rgba(255,255,255,0.6) !important;
	--vz-vertical-menu-sub-item-hover-color: #ffffff !important;
	--vz-vertical-menu-sub-item-active-color: #ffffff !important;
	--vz-vertical-menu-title-color: rgba(255,255,255,0.55) !important;
}

/* Explicit link/icon colors to avoid theme bleed on phones */
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link { color: var(--vz-vertical-menu-item-color) !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover { color: var(--vz-vertical-menu-item-hover-color) !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] { color: var(--vz-vertical-menu-item-active-color) !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link svg { color: var(--vz-vertical-menu-item-color) !important; fill: currentColor !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link { color: var(--vz-vertical-menu-sub-item-color) !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover { color: var(--vz-vertical-menu-sub-item-hover-color) !important; }
.vertical-sidebar-enable .navbar-menu .navbar-nav .menu-title { color: var(--vz-vertical-menu-title-color) !important; }

/* Strong selectors for phone sidebar text and icons - respect theme */
/* Light theme selectors */
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link span,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link i,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link svg { color: #475569 !important; fill: currentColor !important; }

html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover span,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover i,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover svg { color: #111827 !important; }

html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link.active,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link[aria-expanded="true"] { color: #111827 !important; }

/* Dark theme selectors */
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link span,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link i,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link svg { color: var(--vz-vertical-menu-item-color) !important; fill: currentColor !important; }

html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover span,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover i,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link:hover svg { color: var(--vz-vertical-menu-item-hover-color) !important; }

html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link.active,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu #navbar-nav a.menu-link[aria-expanded="true"] { color: var(--vz-vertical-menu-item-active-color) !important; }

/* Mobile overlay sidebar colors - respect data-sidebar attribute */
/* Light sidebar on mobile (when data-sidebar="light" or no data-sidebar) */
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu { 
	background-color: #ffffff !important; 
	border-left: 1px solid #eef0f2 !important; 
}
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link { color: #475569 !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover { color: #111827 !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] { color: #111827 !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link svg,
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link .icon-dual { color: #475569 !important; fill: currentColor !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link { color: #64748b !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover { color: #111827 !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:before { background-color: #64748b !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover:before { background-color: #111827 !important; }
html:not([data-sidebar="dark"]) .vertical-sidebar-enable .navbar-menu .navbar-nav .menu-title { color: #94a3b8 !important; }

/* Match desktop dark sidebar on phones (use theme variables) */
html[data-sidebar="dark"][data-layout="vertical"] .vertical-sidebar-enable .navbar-menu,
html[data-sidebar="dark"][data-layout="semibox"] .vertical-sidebar-enable .navbar-menu {
	background: var(--vz-vertical-menu-bg) !important;
	border-left: 1px solid var(--vz-vertical-menu-border) !important;
}
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link { color: var(--vz-vertical-menu-item-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover { color: var(--vz-vertical-menu-item-hover-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] { color: var(--vz-vertical-menu-item-active-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link svg { color: var(--vz-vertical-menu-item-color) !important; fill: currentColor !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link { color: var(--vz-vertical-menu-sub-item-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover { color: var(--vz-vertical-menu-sub-item-hover-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:before { background-color: var(--vz-vertical-menu-sub-item-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover:before { background-color: var(--vz-vertical-menu-sub-item-hover-color) !important; }
html[data-sidebar="dark"] .vertical-sidebar-enable .navbar-menu .navbar-nav .menu-title { color: var(--vz-vertical-menu-title-color) !important; }

/* CORRECT FIX: Force LIGHT theme for mobile navigation to match desktop */
/* Override any dark theme styles that might be interfering */

/* Target the exact mobile breakpoint used in the original theme */
@media (max-width: 767.98px) {
	/* FORCE LIGHT SIDEBAR: Override any dark theme interference */
	.vertical-sidebar-enable .app-menu,
	.app-menu,
	html[data-topbar="light"] .app-menu,
	html[data-topbar="light"] .vertical-sidebar-enable .app-menu {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
	
	/* Force navbar menu to use LIGHT colors */
	.vertical-sidebar-enable .navbar-menu,
	.navbar-menu {
		background-color: #ffffff !important;
		background: #ffffff !important;
		color: #475569 !important;
	}
	
	/* Force all navigation links to use LIGHT theme colors */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link,
	.navbar-menu .navbar-nav .nav-link {
		color: #475569 !important;
	}
	
	/* Force navigation links hover state */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover,
	.navbar-menu .navbar-nav .nav-link:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}
	
	/* Force navigation links active state */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
	.navbar-menu .navbar-nav .nav-link.active,
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link[aria-expanded="true"],
	.navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
		color: #111827 !important;
	}
	
	/* Force icons to use LIGHT theme colors */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
	.navbar-menu .navbar-nav .nav-link i {
		color: #475569 !important;
	}
	
	/* Force brand box to use LIGHT colors */
	.vertical-sidebar-enable .navbar-brand-box,
	.navbar-brand-box {
		background-color: #ffffff !important;
		background: #ffffff !important;
		border-bottom: 1px solid #eef0f2 !important;
	}
	
	/* Force scrollbar area to be light */
	.vertical-sidebar-enable #scrollbar,
	#scrollbar {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
	
	/* Force menu titles to use light theme colors */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .menu-title,
	.navbar-menu .navbar-nav .menu-title {
		color: #94a3b8 !important;
	}
	
	/* Force submenu items to use light theme colors */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link,
	.navbar-menu .navbar-nav .nav-sm .nav-link {
		color: #64748b !important;
	}
	
	/* Force submenu hover state */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-sm .nav-link:hover,
	.navbar-menu .navbar-nav .nav-sm .nav-link:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}
}

/* ADDITIONAL LIGHT THEME OVERRIDE: Cover all mobile breakpoints */
@media (max-width: 768px) {
	.vertical-sidebar-enable .app-menu,
	.app-menu {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
}

@media (max-width: 991.98px) {
	.vertical-sidebar-enable .app-menu,
	.app-menu {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
}

/* Additional LIGHT theme fixes for larger mobile devices */
@media (max-width: 1024px) {
	/* Ensure light sidebar background and borders on mobile */
	.vertical-sidebar-enable .app-menu {
		background-color: #ffffff !important;
		border-right: 1px solid #eef0f2 !important;
	}
	
	/* Fix navbar brand box colors on mobile light theme */
	.vertical-sidebar-enable .navbar-brand-box {
		background-color: #ffffff !important;
		border-bottom: 1px solid #eef0f2 !important;
	}
	
	/* Ensure scrollbar area matches light theme */
	.vertical-sidebar-enable #scrollbar {
		background-color: #ffffff !important;
	}
	
	/* Fix menu dropdown backgrounds on mobile light theme */
	.vertical-sidebar-enable .navbar-menu .menu-dropdown {
		background-color: rgba(255,255,255,0.95) !important;
	}
	
	/* Ensure proper contrast for active/hover states on mobile */
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}
	
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
	.vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
		background-color: rgba(0, 0, 0, 0.08) !important;
	}
}

/* NAVBAR/TOPBAR CONSISTENCY FIX: Make mobile navbar match desktop design */

/* Fix topbar/navbar header consistency across devices */
@media (max-width: 767.98px) {
	/* Ensure topbar background matches desktop */
	#page-topbar {
		background-color: var(--vz-header-bg) !important;
		border-bottom: 1px solid var(--vz-header-border) !important;
	}
	
	/* Ensure navbar header styling matches desktop */
	.navbar-header {
		background-color: var(--vz-header-bg) !important;
		height: 70px !important;
	}
	
	/* Fix topbar button colors to match desktop */
	.navbar-header .btn-topbar {
		color: var(--vz-header-item-sub-color) !important;
		background-color: transparent !important;
	}
	
	.navbar-header .btn-topbar:hover,
	.navbar-header .btn-topbar:focus,
	.navbar-header .btn-topbar:active,
	.navbar-header .btn-topbar.active {
		background-color: var(--vz-header-item-bg) !important;
	}
	
	/* Fix header item colors */
	.navbar-header .header-item {
		color: var(--vz-header-item-color) !important;
	}
	
	/* Fix user name text colors */
	.navbar-header .user-name-text {
		color: var(--vz-header-item-color) !important;
	}
	
	.navbar-header .user-name-sub-text {
		color: var(--vz-header-item-sub-color) !important;
	}
	
	/* Fix hamburger menu button */
	.vertical-menu-btn.topnav-hamburger {
		color: var(--vz-header-item-sub-color) !important;
	}
	
	.vertical-menu-btn.topnav-hamburger:hover {
		background-color: var(--vz-header-item-bg) !important;
	}
	
	/* Fix dropdown menus in topbar */
	.navbar-header .dropdown-menu {
		background-color: var(--vz-body-bg) !important;
		border: 1px solid var(--vz-border-color) !important;
	}
	
	/* Fix notification badge */
	.topbar-badge {
		background-color: var(--vz-danger) !important;
	}
}

/* Additional navbar consistency fixes for larger mobile devices */
@media (max-width: 991.98px) {
	/* Ensure consistent topbar styling */
	#page-topbar {
		background-color: var(--vz-header-bg) !important;
		border-bottom: 1px solid var(--vz-header-border) !important;
	}
	
	/* Fix navbar header background */
	.navbar-header {
		background-color: var(--vz-header-bg) !important;
	}
}

/* NUCLEAR OVERRIDE: Force light theme on ALL mobile navigation elements */
/* This will override ANY JavaScript or CSS that tries to apply dark colors */

@media (max-width: 1024px) {
	/* FORCE WHITE BACKGROUND on all possible sidebar elements */
	body .vertical-sidebar-enable .app-menu,
	body .app-menu,
	body .navbar-menu,
	body .vertical-sidebar-enable .navbar-menu,
	body [class*="sidebar"] [class*="menu"],
	body [class*="vertical"] [class*="menu"],
	body [id*="sidebar"],
	body [class*="nav"] {
		background-color: #ffffff !important;
		background: #ffffff !important;
		color: #475569 !important;
	}
	
	/* FORCE LIGHT TEXT on all navigation links */
	body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link,
	body .navbar-menu .navbar-nav .nav-link,
	body .app-menu .navbar-nav .nav-link,
	body [class*="nav"] a,
	body [class*="menu"] a {
		color: #000000 !important;
		background-color: transparent !important;
	}
	
	/* FORCE DEEP BLACK ICONS */
	body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
	body .navbar-menu .navbar-nav .nav-link i,
	body [class*="nav"] i,
	body [class*="menu"] i {
		color: #000000 !important;
	}
	
	/* FORCE HOVER STATES */
	body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link:hover,
	body .navbar-menu .navbar-nav .nav-link:hover,
	body [class*="nav"] a:hover,
	body [class*="menu"] a:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}
	
	/* CLEAN ACTIVE STATES FOR MOBILE - TEXT HIGHLIGHT ONLY */
	body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active,
	body .navbar-menu .navbar-nav .nav-link.active,
	body [class*="nav"] a.active,
	body [class*="menu"] a.active {
		color: #000000 !important;
		background: transparent !important;
		border: none !important;
		font-weight: 700 !important;
		transition: all 0.2s ease !important;
		position: relative !important;
	}
	
	/* Enhanced mobile active state icons */
	body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link.active i,
	body .navbar-menu .navbar-nav .nav-link.active i,
	body [class*="nav"] a.active i,
	body [class*="menu"] a.active i {
		color: #000000 !important;
		transform: scale(1.1) !important;
		transition: transform 0.2s ease !important;
	}
	

	
	/* FORCE BRAND BOX */
	body .vertical-sidebar-enable .navbar-brand-box,
	body .navbar-brand-box {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
	
	/* FORCE SCROLLBAR AREA */
	body .vertical-sidebar-enable #scrollbar,
	body #scrollbar {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
	
	/* OVERRIDE ANY DARK THEME VARIABLES */
	body {
		--vz-vertical-menu-bg: #ffffff !important;
		--vz-vertical-menu-border: #eef0f2 !important;
		--vz-vertical-menu-item-color: #475569 !important;
		--vz-vertical-menu-item-hover-color: #111827 !important;
		--vz-vertical-menu-item-active-color: #111827 !important;
	}
}

/* DESKTOP CONTRAST ENHANCEMENT: Add visual contrast for better desktop appearance */
/* Only apply on desktop screens (1025px and above) */
@media (min-width: 1025px) {
	/* Add subtle gradient background to sidebar for desktop contrast */
	html[data-sidebar="light"] .app-menu {
		background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
		border-right: 1px solid #e2e8f0 !important;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
	}
	
	/* Enhanced navbar brand box with subtle contrast */
	html[data-sidebar="light"] .navbar-brand-box {
		background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
		border-bottom: 1px solid #e2e8f0 !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
	}
	
	/* Deep black text for desktop navigation */
	html[data-sidebar="light"] .app-menu .nav-link {
		color: #000000 !important;
	}
	
	/* Add hover effects for better desktop interaction */
	html[data-sidebar="light"] .app-menu .nav-link:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
		transform: translateX(2px);
		transition: all 0.2s ease;
	}
	
	/* Clean active menu item - text highlight only */
	html[data-sidebar="light"] .app-menu .nav-link.active,
	html[data-sidebar="light"] .app-menu .nav-link[aria-expanded="true"] {
		background: transparent !important;
		color: #000000 !important;
		border: none !important;
		font-weight: 700 !important;
		position: relative !important;
		transition: all 0.2s ease !important;
	}
	
	/* Menu titles with better contrast */
	html[data-sidebar="light"] .app-menu .menu-title {
		color: #64748b !important;
		font-weight: 600 !important;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.5px;
	}
	
	/* Icons with deep black color */
	html[data-sidebar="light"] .app-menu .nav-link i,
	html[data-sidebar="light"] .app-menu .nav-link svg {
		color: #000000 !important;
		transition: color 0.2s ease;
	}
	
	html[data-sidebar="light"] .app-menu .nav-link:hover i,
	html[data-sidebar="light"] .app-menu .nav-link:hover svg {
		color: #000000 !important;
	}
	
	html[data-sidebar="light"] .app-menu .nav-link.active i,
	html[data-sidebar="light"] .app-menu .nav-link.active svg {
		color: #000000 !important;
		transform: scale(1.1) !important;
		transition: transform 0.2s ease !important;
	}
	

}

/* ULTIMATE OVERRIDE: Force deep black text with maximum specificity */
html body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link,
html body .navbar-menu .navbar-nav .nav-link,
html body .app-menu .navbar-nav .nav-link,
html body .app-menu .nav-link,
html body [class*="nav"] a,
html body [class*="menu"] a,
html[data-sidebar="light"] body .app-menu .nav-link {
	color: #000000 !important;
}

html body .vertical-sidebar-enable .navbar-menu .navbar-nav .nav-link i,
html body .navbar-menu .navbar-nav .nav-link i,
html body [class*="nav"] i,
html body [class*="menu"] i,
html[data-sidebar="light"] body .app-menu .nav-link i,
html[data-sidebar="light"] body .app-menu .nav-link svg {
	color: #000000 !important;
}

/* PARENT-CHILD NAVIGATION HIGHLIGHTING */
/* Ensure both parent and child labels are highlighted when expanded */

/* Parent menu item highlighting when expanded */
.app-menu .nav-link[aria-expanded="true"] {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Child menu items highlighting */
.app-menu .menu-dropdown.show .nav-sm .nav-link.active {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	padding: 8px 20px 8px 45px !important;
}

/* Ensure parent stays highlighted when child is active */
.app-menu .nav-item:has(.menu-dropdown.show .nav-link.active) > .nav-link {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Alternative selector for browsers that don't support :has() */
.app-menu .nav-link.collapsed.active {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Mobile navigation parent-child highlighting */
@media (max-width: 1024px) {
	.vertical-sidebar-enable .navbar-menu .nav-link[aria-expanded="true"] {
		color: #000000 !important;
		font-weight: 600 !important;
		background-color: rgba(0, 0, 0, 0.06) !important;
	}
	
	.vertical-sidebar-enable .navbar-menu .menu-dropdown.show .nav-sm .nav-link.active {
		color: #000000 !important;
		font-weight: 600 !important;
		background-color: rgba(0, 0, 0, 0.10) !important;
		border: none !important;
		padding: 12px 20px 12px 50px !important;
	}
	
	/* Parent highlighting when child is active on mobile */
	.vertical-sidebar-enable .navbar-menu .nav-item:has(.menu-dropdown.show .nav-link.active) > .nav-link {
		color: #000000 !important;
		font-weight: 600 !important;
		background-color: rgba(0, 0, 0, 0.06) !important;
	}
}

/* Expanded dropdown background */
.app-menu .menu-dropdown.show {
	background-color: rgba(0, 0, 0, 0.02) !important;
	border: none !important;
	margin-left: 0 !important;
	border-radius: 0 !important;
}

/* Sub-menu visual hierarchy */
.app-menu .menu-dropdown.show .nav-sm {
	padding: 8px 0 !important;
	margin-left: 0 !important;
}

.app-menu .menu-dropdown.show .nav-sm .nav-link {
	padding: 8px 20px 8px 45px !important;
	margin: 1px 0 !important;
	border-radius: 0 !important;
	transition: all 0.2s ease !important;
}

.app-menu .menu-dropdown.show .nav-sm .nav-link:hover {
	background-color: rgba(0, 0, 0, 0.06) !important;
	color: #000000 !important;
	font-weight: 600 !important;
}

/* AUTOMATIC PARENT EXPANSION WHEN CHILD IS ACTIVE */
/* Ensure parent menu stays expanded when any child is active */

/* Force parent menu to stay expanded when child is active */
.app-menu .nav-item:has(.menu-dropdown .nav-link.active) .nav-link[data-bs-toggle="collapse"] {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Force dropdown to show when child is active */
.app-menu .nav-item:has(.nav-link.active) .menu-dropdown {
	display: block !important;
}

/* Alternative approach using class-based selectors */
.app-menu .nav-item .menu-dropdown:has(.nav-link.active) {
	display: block !important;
}

.app-menu .nav-item:has(.menu-dropdown .nav-link.active) > .nav-link {
	color: #000000 !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Mobile version */
@media (max-width: 1024px) {
	.vertical-sidebar-enable .navbar-menu .nav-item:has(.menu-dropdown .nav-link.active) .nav-link[data-bs-toggle="collapse"] {
		color: #000000 !important;
		font-weight: 600 !important;
		background-color: rgba(0, 0, 0, 0.06) !important;
	}
	
	.vertical-sidebar-enable .navbar-menu .nav-item:has(.nav-link.active) .menu-dropdown {
		display: block !important;
	}
	
	.vertical-sidebar-enable .navbar-menu .nav-item .menu-dropdown:has(.nav-link.active) {
		display: block !important;
	}
	
	/* Fix mobile sub-menu indentation */
	.vertical-sidebar-enable .navbar-menu .menu-dropdown .nav-sm .nav-link {
		padding: 10px 20px 10px 50px !important;
		margin: 0 !important;
	}
}

/* Ensure proper Bootstrap collapse behavior override */
.app-menu .collapse.menu-dropdown:has(.nav-link.active) {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
}

.vertical-sidebar-enable .navbar-menu .collapse.menu-dropdown:has(.nav-link.active) {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
}

/* NAVIGATION MENU ALIGNMENT AND POSITIONING FIXES */

/* Fix navigation item alignment - ensure consistent positioning */
.app-menu .navbar-nav .nav-item,
.navbar-menu .navbar-nav .nav-item {
	display: block !important;
	width: 100% !important;
	position: relative !important;
}

/* Fix navigation link alignment and spacing */
.app-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-link {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	text-decoration: none !important;
	position: relative !important;
	min-height: 48px !important;
	border-radius: 0 !important;
}

/* Fix icon positioning and spacing */
.app-menu .navbar-nav .nav-link i,
.navbar-menu .navbar-nav .nav-link i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	margin-right: 12px !important;
	flex-shrink: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

/* Fix text positioning and alignment */
.app-menu .navbar-nav .nav-link span,
.navbar-menu .navbar-nav .nav-link span {
	display: inline-block !important;
	flex: 1 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.2 !important;
	margin-right: 30px !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
}

/* Fix collapse/expand arrow positioning */
.app-menu .nav-link[data-bs-toggle="collapse"]:after,
.navbar-menu .nav-link[data-bs-toggle="collapse"]:after {
	content: "\f0142" !important;
	font-family: "Material Design Icons" !important;
	font-size: 16px !important;
	line-height: 1 !important;
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	transition: transform 0.3s ease !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.app-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:after,
.navbar-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:after {
	transform: translateY(-50%) rotate(-90deg) !important;
}

/* Enhanced navigation typography */
.navbar-menu .menu-title,
.app-menu .menu-title {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	font-size: 0.75rem !important;
}

/* Improve navigation link typography */
.navbar-menu .navbar-nav .nav-link,
.app-menu .navbar-nav .nav-link {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	font-size: 0.9375rem !important;
}

/* Active state improvements */
.navbar-menu .navbar-nav .nav-link.active,
.app-menu .navbar-nav .nav-link.active {
	font-weight: 600 !important;
}

/* Dropdown menu typography */
.navbar-menu .navbar-nav .nav-link .dropdown-menu .dropdown-item,
.app-menu .navbar-nav .nav-link .dropdown-menu .dropdown-item {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

/* Topbar typography improvements */
.navbar-header .user-name-text,
.navbar-header .user-name-sub-text {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.navbar-header .user-name-text {
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

.navbar-header .user-name-sub-text {
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

/* Topbar dropdown menu typography */
.navbar-header .dropdown-menu .dropdown-item {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

.navbar-header .dropdown-menu .dropdown-header {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

.app-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="false"]:after,
.navbar-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="false"]:after {
	transform: translateY(-50%) rotate(0deg) !important;
}

/* Remove dashes from child navigation items */
.navbar-menu .navbar-nav .nav-sm .nav-link:before,
.app-menu .navbar-nav .nav-sm .nav-link:before {
	display: none !important;
}

/* Also remove dashes from nested child items */
.navbar-menu .navbar-nav .nav-sm .nav-sm .nav-link:before,
.app-menu .navbar-nav .nav-sm .nav-sm .nav-link:before {
	display: none !important;
}

/* ROBUST PARENT-CHILD EXPANSION - PREVENT RANDOM HIDING */

/* Method 1: Force parent expansion using :has() selector */
.navbar-menu .nav-item:has(.menu-dropdown .nav-link.active) > .nav-link[data-bs-toggle="collapse"],
.app-menu .nav-item:has(.menu-dropdown .nav-link.active) > .nav-link[data-bs-toggle="collapse"] {
	color: var(--vz-vertical-menu-item-active-color) !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
	aria-expanded: true !important;
}

/* Method 2: Force dropdown visibility when child is active */
.navbar-menu .nav-item:has(.menu-dropdown .nav-link.active) .menu-dropdown,
.app-menu .nav-item:has(.menu-dropdown .nav-link.active) .menu-dropdown {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	opacity: 1 !important;
	overflow: visible !important;
}

/* Method 3: Override Bootstrap collapse behavior */
.navbar-menu .collapse.menu-dropdown:has(.nav-link.active),
.app-menu .collapse.menu-dropdown:has(.nav-link.active) {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	opacity: 1 !important;
	overflow: visible !important;
}

/* Method 4: Class-based fallback for browsers without :has() support */
.navbar-menu .nav-item .menu-dropdown.show,
.app-menu .nav-item .menu-dropdown.show,
.navbar-menu .nav-item .menu-dropdown:not(.collapse),
.app-menu .nav-item .menu-dropdown:not(.collapse) {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	opacity: 1 !important;
}

/* Method 5: Prevent collapse animation interference */
.navbar-menu .menu-dropdown.collapsing,
.app-menu .menu-dropdown.collapsing {
	height: auto !important;
	transition: none !important;
}

/* Method 6: Force specific menu sections to stay open when active */
#sidebarLayouts:has(.nav-link.active),
#sidebarstproduct:has(.nav-link.active),
#sidebarutilities:has(.nav-link.active),
#sidebarstquotation:has(.nav-link.active),
#sidebarPurchaseManager:has(.nav-link.active) {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	opacity: 1 !important;
}

/* Fix sub-menu alignment and positioning */
.app-menu .menu-dropdown,
.navbar-menu .menu-dropdown {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: rgba(0, 0, 0, 0.02) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.app-menu .menu-dropdown .nav-sm,
.navbar-menu .menu-dropdown .nav-sm {
	margin: 0 !important;
	padding: 8px 0 !important;
	list-style: none !important;
}

.app-menu .menu-dropdown .nav-sm .nav-link,
.navbar-menu .menu-dropdown .nav-sm .nav-link {
	padding: 8px 20px 8px 52px !important;
	margin: 1px 0 !important;
	position: relative !important;
	display: block !important;
	width: 100% !important;
	text-decoration: none !important;
	border-radius: 0 !important;
	min-height: 40px !important;
	transition: all 0.2s ease !important;
}

/* Ensure dropdown animations don't cause shifting */
.app-menu .menu-dropdown.collapse:not(.show),
.navbar-menu .menu-dropdown.collapse:not(.show) {
	height: 0 !important;
	opacity: 0 !important;
	display: block !important;
	visibility: hidden !important;
	overflow: hidden !important;
}

.app-menu .menu-dropdown.collapse.show,
.navbar-menu .menu-dropdown.collapse.show {
	height: auto !important;
	opacity: 1 !important;
	display: block !important;
	visibility: visible !important;
	overflow: visible !important;
}

/* Fix navigation container positioning */
.app-menu .navbar-nav,
.navbar-menu .navbar-nav {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
}

.app-menu .navbar-nav .nav-item:first-child .nav-link,
.navbar-menu .navbar-nav .nav-item:first-child .nav-link {
	margin-top: 0 !important;
}

/* Fix mobile navigation alignment */
@media (max-width: 1024px) {
	.app-menu .navbar-nav .nav-link,
	.navbar-menu .navbar-nav .nav-link {
		padding: 14px 15px !important;
		min-height: 52px !important;
	}

	.app-menu .navbar-nav .nav-link i,
	.navbar-menu .navbar-nav .nav-link i {
		font-size: 16px !important;
		margin-right: 10px !important;
	}

	.app-menu .navbar-nav .nav-link span,
	.navbar-menu .navbar-nav .nav-link span {
		margin-right: 25px !important;
		font-size: 14px !important;
	}

	.app-menu .nav-link[data-bs-toggle="collapse"]:after,
	.navbar-menu .nav-link[data-bs-toggle="collapse"]:after {
		right: 15px !important;
		font-size: 14px !important;
	}

	.app-menu .menu-dropdown .nav-sm .nav-link,
	.navbar-menu .menu-dropdown .nav-sm .nav-link {
		padding: 10px 15px 10px 50px !important;
		min-height: 44px !important;
		font-size: 14px !important;
	}
}

/* Fix RTL layout alignment */
[dir="rtl"] .app-menu .navbar-nav .nav-link i,
[dir="rtl"] .navbar-menu .navbar-nav .nav-link i {
	margin-right: 0 !important;
	margin-left: 12px !important;
}

[dir="rtl"] .app-menu .navbar-nav .nav-link span,
[dir="rtl"] .navbar-menu .navbar-nav .nav-link span {
	margin-right: 0 !important;
	margin-left: 30px !important;
}

[dir="rtl"] .app-menu .nav-link[data-bs-toggle="collapse"]:after,
[dir="rtl"] .navbar-menu .nav-link[data-bs-toggle="collapse"]:after {
	right: auto !important;
	left: 20px !important;
}

[dir="rtl"] .app-menu .menu-dropdown .nav-sm .nav-link,
[dir="rtl"] .navbar-menu .menu-dropdown .nav-sm .nav-link {
	padding: 8px 52px 8px 20px !important;
}

/* Ensure smooth transitions */
.app-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-link,
.app-menu .menu-dropdown,
.navbar-menu .menu-dropdown,
.app-menu .menu-dropdown .nav-sm .nav-link,
.navbar-menu .menu-dropdown .nav-sm .nav-link {
	transition: all 0.3s ease !important;
}

/* Mobile responsive fixes - INTEGRATED INTO COMPREHENSIVE ALIGNMENT SYSTEM ABOVE */

/* TomSelect Placeholder Styling */
.ts-control .ts-placeholder {
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

.ts-control input::placeholder {
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

/* Make Select... option appear like placeholder */
.ts-dropdown .option[data-value=""] {
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

/* When Select... is selected, make it appear light */
.ts-control .item[data-value=""] {
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

/* Style the input when it shows Search products... */
.ts-control input[value="Search products..."] {
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

/* Style for empty state showing Search products... */
.ts-control.single .ts-control-input {
	color: #6c757d !important;
}

.ts-control.single .ts-control-input:empty::before {
	content: "Search products...";
	color: #6c757d !important;
	opacity: 0.65 !important;
	font-style: italic;
}

/* Hide placeholder when focused */
.ts-control.focus .ts-control-input:empty::before {
	display: none !important;
}

/* Ensure input is ready for typing when focused */
.ts-control.focus input {
	color: #000 !important;
	opacity: 1 !important;
	font-style: normal !important;
}

/* Cache Buster - Updated: $(date) */