:root {
		--color-nav-green: #f5f5f5; /* Light gray background */
		--color-nav-admin: #e5e1f5; /* Light purple for admin mode */
		--color-livna-logo: #204080; /* Deep blue that complements #fec302 (yellow/gold) */
		--color-nav-active-bg-light: transparent; /* Active item matches the nav background (no tint) */
		--color-nav-hover-bg-light: rgba(0, 0, 0, 0.04); /* Faint neutral hover, theme-agnostic */
		--color-nav-active-text-light: #1f2937; /* Dark neutral active text (bold conveys active) */
		--color-nav-active-border-light: transparent; /* No accent border */
	}

	/* Mobile-friendly touch targets */
	.touch-target {
		min-height: 48px !important; /* Minimum touch target size for accessibility */
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}

	/* Add subtle press feedback on mobile */
	.touch-target:active {
		transform: scale(0.98);
		background-color: var(--color-nav-hover-bg-light);
	}

	html[data-mode='dark'] .touch-target:active {
		background-color: var(--color-nav-hover-bg-dark);
	}

	/* Mobile menu backdrop animation */
	#mobile-menu-backdrop {
		transition: opacity 0.3s ease-in-out;
	}

	#mobile-menu-backdrop.hidden {
		opacity: 0;
		pointer-events: none;
	}

	#mobile-menu-backdrop:not(.hidden) {
		opacity: 1;
	}

	html[data-mode='dark'] {
		--color-nav-green: #333333; /* Dark grey for dark mode */
		--color-nav-admin: #3f3f3f; /* Dark grey for admin mode - keeping it similar */
		--color-livna-logo: #4080ff; /* Lighter blue for dark mode for better contrast */
		--color-nav-active-bg-dark: transparent; /* Active item matches the nav background (no tint) */
		--color-nav-hover-bg-dark: rgba(255, 255, 255, 0.06); /* Faint neutral hover */
		--color-nav-active-text-dark: #f3f4f6; /* Light neutral active text (bold conveys active) */
		--color-nav-active-border-dark: transparent; /* No accent border */
	}

	.nav-section-container.flex {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.nav-section-container.flex svg {
		margin: 0.5rem 0;
	}

	/* Always ensure the sidebar toggle button is visible */
	.sidebar-toggle-button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 50 !important;
		min-width: 28px !important;
		height: 28px !important;
		transition: all 0.3s ease !important;
		color: var(--color-surface-700) !important;
		padding: 0.25rem !important;
		border-radius: 4px !important;
	}

	.sidebar-toggle-button:hover {
		transform: scale(1.05) !important;
		color: var(--color-surface-900) !important;
	}

	html[data-mode='dark'] .sidebar-toggle-button {
		color: var(--color-surface-200) !important;
	}

	html[data-mode='dark'] .sidebar-toggle-button:hover {
		color: white !important;
	}

	/* Remove hover effects for logo */
	.sidebar-logo-link.no-hover:hover {
		background-color: transparent !important;
		color: inherit !important;
		transform: none !important;
	}

	.pin-sidebar-button-wrapper {
		margin-top: 0;
	}

	.pin-sidebar-button-wrapper .pin-toggle-button {
		color: var(--color-surface-600);
		background: transparent;
		border: none;
	}

	html[data-mode='dark'] .pin-sidebar-button-wrapper .pin-toggle-button {
		color: var(--color-surface-300);
	}

	.pin-sidebar-button-wrapper .pin-toggle-button:hover {
		color: var(--color-primary-500);
	}

	html[data-mode='dark'] .pin-sidebar-button-wrapper .pin-toggle-button:hover {
		color: var(--color-primary-300);
	}

	.pin-sidebar-button-wrapper .pin-toggle-button.pin-toggle-active {
		background-color: var(--color-nav-active-bg-light, rgba(59, 130, 246, 0.15));
		color: var(--color-nav-active-text-light, var(--color-primary-700, currentColor));
	}

	html[data-mode='dark'] .pin-sidebar-button-wrapper .pin-toggle-button.pin-toggle-active {
		background-color: var(--color-nav-active-bg-dark, rgba(37, 99, 235, 0.35));
		color: var(--color-nav-active-text-dark, var(--color-primary-200, currentColor));
	}

	.pin-sidebar-button-wrapper .pin-icon {
		transition:
			transform 0.2s ease,
			color 0.2s ease;
	}

	.pin-sidebar-button-wrapper .pin-icon.pin-active {
		transform: rotate(-45deg);
	}

	/* Adjustments for collapsed sidebar - maintain same spacing as expanded */

	.sidebar-collapsed .sidebar-text {
		opacity: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		width: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Keep all elements visible but center icons only */
	.sidebar-collapsed a {
		justify-content: center !important;
		padding: 0.5rem 0.75rem !important; /* Keep same padding as expanded */
	}

	.sidebar-collapsed button {
		justify-content: center !important;
		padding: 0.5rem 0.75rem !important; /* Keep same padding as expanded */
	}

	/* Keep section headings visible but hide text */
	.sidebar-collapsed .nav-section-heading {
		opacity: 0 !important;
		visibility: visible !important; /* Keep visibility to maintain layout */
		height: 1.5rem !important; /* Maintain height for spacing */
		margin-top: 1rem !important; /* Add proper spacing */
		margin-bottom: 0.5rem !important; /* Keep same margin as expanded */
	}

	/* Ensure the products heading is visible in collapsed mode but text is hidden */
	.sidebar-collapsed .products-heading-li {
		display: block !important; /* Keep the element in the layout */
		visibility: visible !important;
		height: 2rem !important; /* Fixed height to maintain proper spacing */
		margin: 1.5rem 0 0.75rem 0 !important; /* Increased margin for more spacing */
	}

	/* Ensure the INVENTORY text is properly invisible but takes up space */
	.sidebar-collapsed .products-heading-div {
		opacity: 0 !important;
		visibility: visible !important; /* Keep visibility to maintain layout */
		display: block !important;
		height: 1.5rem !important; /* Fixed height */
		border-top: 1px solid rgba(100, 116, 139, 0.15) !important; /* Add a subtle divider to maintain visual structure */
		padding-top: 0.5rem !important;
	}

	/* Admin sidebar section headings */
	.sidebar-heading {
		padding: 0.5rem 0;
		margin: 0.5rem 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Hide heading text in collapsed mode but show divider */
	.sidebar-collapsed .sidebar-heading .sidebar-text {
		opacity: 0 !important;
		visibility: hidden !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Show horizontal line in collapsed mode */
	.sidebar-collapsed .sidebar-divider {
		opacity: 1 !important;
		visibility: visible !important;
		margin: 0.75rem 0.5rem !important;
		border-color: rgba(100, 116, 139, 0.3) !important;
	}

	/* Normal mode - show text, hide or minimal divider */
	.sidebar-divider {
		margin: 0.25rem 0 0 0;
		opacity: 0.6;
	}

	/* Ensure icons are centered but maintain same vertical spacing */
	.sidebar-collapsed a svg,
	.sidebar-collapsed button svg {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Ensure user info avatar text color is distinct */
	.user-avatar {
		background-color: var(--color-surface-300);
		color: var(--color-surface-700);
	}
	html[data-mode='dark'] .user-avatar {
		background-color: var(--color-surface-600);
		color: var(--color-surface-200);
	}

	/* Improve contrast for section headings in dark mode */
	.nav-section-heading {
		color: var(--color-surface-500);
	}
	html[data-mode='dark'] .nav-section-heading {
		color: var(--color-surface-200);
		font-weight: 600;
	}

	/* Adjust overall header padding when collapsed */
	#desktop-sidebar.sidebar-collapsed .header-container {
		padding: 1.5rem 0.5rem 1rem 0.5rem; /* Reduced horizontal padding for collapsed mode */
		justify-content: center; /* Center the logo */
	}

	/* Force logo link to center its content like other icons when collapsed */
	#desktop-sidebar.sidebar-collapsed .sidebar-logo-link {
		justify-content: center;
	}

	/* Keep logo full size in collapsed mode */
	#desktop-sidebar.sidebar-collapsed .sidebar-logo-link img.sidebar-logo {
		margin-right: 0; /* Remove margin when text is hidden */
		height: 2rem !important; /* Match h-8 class (32px) */
		width: 2rem !important; /* Match w-8 class (32px) */
	}

	/* Make sure sidebar toggle is positioned correctly */
	#sidebar-toggle {
		position: relative !important;
		z-index: 30 !important;
		margin-right: 0 !important;
		display: flex !important;
	}

	/* Rotate icon when sidebar is collapsed */
	.sidebar-collapsed #sidebar-toggle .arrow-icon {
		transform: rotate(180deg) !important;
		transition: transform 0.3s ease !important;
	}

	/* Apply transition to the icon for smooth rotation */
	#sidebar-toggle .arrow-icon {
		transition: transform 0.3s ease !important;
	}

	/* Hover expansion for collapsed sidebar */
	aside#desktop-sidebar.sidebar-collapsed {
		transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		z-index: 70 !important; /* Ensure sidebar is above content but below top bar */
	}

	aside#desktop-sidebar.sidebar-collapsed:hover {
		width: 16rem !important; /* 256px - same as desktop:w-64 */
		box-shadow:
			0 10px 25px -3px rgba(0, 0, 0, 0.1),
			0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
		z-index: 75 !important; /* Above content but still below top bar */
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}

	/* Additional specificity to ensure overflow-x hidden takes precedence */
	html aside#desktop-sidebar.sidebar-collapsed,
	html aside#desktop-sidebar.sidebar-collapsed:hover {
		overflow-x: hidden !important;
	}

	/* Fix scrollbar issue in navigation container - applies to all scrollable containers within sidebar */
	aside#desktop-sidebar .flex-1.overflow-y-auto,
	aside#desktop-sidebar nav,
	aside#desktop-sidebar .overflow-y-auto {
		overflow-x: hidden !important;
	}

	/* Ensure all child containers in collapsed sidebar also hide horizontal overflow */
	aside#desktop-sidebar.sidebar-collapsed .flex-1.overflow-y-auto,
	aside#desktop-sidebar.sidebar-collapsed nav,
	aside#desktop-sidebar.sidebar-collapsed .overflow-y-auto,
	aside#desktop-sidebar.sidebar-collapsed:hover .flex-1.overflow-y-auto,
	aside#desktop-sidebar.sidebar-collapsed:hover nav,
	aside#desktop-sidebar.sidebar-collapsed:hover .overflow-y-auto {
		overflow-x: hidden !important;
	}

	html[data-mode='dark'] #desktop-sidebar.sidebar-collapsed:hover {
		box-shadow:
			0 10px 25px -3px rgba(0, 0, 0, 0.3),
			0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
	}

	/* Show text on hover when collapsed */
	#desktop-sidebar.sidebar-collapsed:hover .sidebar-text {
		opacity: 1 !important;
		visibility: visible !important;
		position: static !important;
		width: auto !important;
		overflow: visible !important;
		padding-left: 0.75rem !important;
		margin: 0 !important;
		display: inline-block !important;
		transition:
			opacity 0.2s ease-in-out 0.1s,
			visibility 0.2s ease-in-out 0.1s,
			width 0.2s ease-in-out 0.1s !important;
	}

	/* Restore normal layout on hover */
	#desktop-sidebar.sidebar-collapsed:hover a {
		justify-content: flex-start !important;
		padding: 0.5rem 0.75rem !important;
	}

	#desktop-sidebar.sidebar-collapsed:hover button {
		justify-content: flex-start !important;
		padding: 0.5rem 0.75rem !important;
	}

	#desktop-sidebar.sidebar-collapsed:hover .nav-section-heading,
	#desktop-sidebar.sidebar-collapsed:hover .products-heading-div {
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		text-align: left !important;
		display: block !important;
		border-top: 1px solid rgba(100, 116, 139, 0.15) !important;
		padding-top: 0.5rem !important;
	}

	/* Restore normal icon positioning on hover */
	#desktop-sidebar.sidebar-collapsed:hover a svg,
	#desktop-sidebar.sidebar-collapsed:hover button svg {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Restore logo layout on hover */
	#desktop-sidebar.sidebar-collapsed:hover .sidebar-logo-link {
		justify-content: flex-start !important;
	}

	#desktop-sidebar.sidebar-collapsed:hover .sidebar-logo-link img.sidebar-logo {
		margin-right: 0.75rem !important;
		height: 2rem !important; /* Keep the same size as collapsed */
		width: 2rem !important; /* Keep the same size as collapsed */
	}

	#desktop-sidebar.sidebar-collapsed:hover .header-container {
		padding: 1.5rem 1rem 1rem 1rem !important; /* Restore expanded mode padding */
		justify-content: flex-start !important;
	}

	/* Ensure smooth transitions for all elements */
	#desktop-sidebar .sidebar-text {
		transition:
			opacity 0.2s ease-in-out,
			visibility 0.2s ease-in-out,
			width 0.2s ease-in-out !important;
		white-space: nowrap !important; /* Prevent text wrapping */
	}

	/* Prevent main content from being affected by hover expansion */
	#desktop-sidebar.sidebar-collapsed:hover ~ #main-content,
	#desktop-sidebar.sidebar-collapsed:hover + * #main-content {
		margin-left: 5rem !important; /* Keep the collapsed margin */
		transition: none !important; /* Disable transition during hover */
		position: relative !important; /* Ensure proper stacking context */
		z-index: 10 !important; /* Lower z-index than sidebar */
	}

	/* Navigation links active and hover states */
	#desktop-sidebar a.active,
	.mobile-menu a.active {
		background-color: var(--color-nav-active-bg-light) !important;
		background-image: none !important;
		font-weight: 600;
		color: var(--color-nav-active-text-light) !important;
		border-radius: 0.375rem;
	}

	html[data-mode='dark'] #desktop-sidebar a.active,
	html[data-mode='dark'] .mobile-menu a.active {
		background-color: var(--color-nav-active-bg-dark) !important;
		background-image: none !important;
		font-weight: 600;
		color: var(--color-nav-active-text-dark) !important;
	}

	#desktop-sidebar a:hover:not(.active),
	.mobile-menu a:hover:not(.active) {
		background-color: var(--color-nav-hover-bg-light);
		border-radius: 0.375rem;
	}

	html[data-mode='dark'] #desktop-sidebar a:hover:not(.active),
	html[data-mode='dark'] .mobile-menu a:hover:not(.active) {
		background-color: var(--color-nav-hover-bg-dark);
	}

	/* Ensure proper spacing and styling for navigation links */
	#desktop-sidebar a,
	.mobile-menu a {
		border-radius: 0.375rem;
		padding: 0.5rem 0.75rem;
		transition: all 0.2s ease;
		margin-bottom: 0.25rem;
	}

	/* Special handling for collapsed sidebar active states */
	#desktop-sidebar.sidebar-collapsed a.active {
		border-radius: 0.375rem;
		background-color: var(--color-nav-active-bg-light) !important;
		background-image: none !important;
		font-weight: 600;
	}

	html[data-mode='dark'] #desktop-sidebar.sidebar-collapsed a.active {
		background-color: var(--color-nav-active-bg-dark) !important;
		background-image: none !important;
		font-weight: 600;
	}

	/* 1980s Dot-Matrix Styling for "On The Floor" nested item */
	.nested-job-status a {
		font-family: 'Courier New', 'Monaco', 'Lucida Console', monospace !important;
		position: relative;
		padding-top: 0.125rem !important;
		padding-bottom: 0.375rem !important;
	}

	.dot-matrix-text {
		font-family: 'Courier New', 'Monaco', 'Lucida Console', monospace !important;
		font-weight: normal !important;
		letter-spacing: 0.05em !important;
		font-size: 0.875rem !important;
		color: var(--color-surface-700);
	}

	/* Dark mode adjustments for dot-matrix */
	html[data-mode='dark'] .dot-matrix-text {
		color: var(--color-surface-200);
	}

	/* Hover effects for nested items */
	.nested-job-status a:hover .dot-matrix-text {
		color: var(--color-primary-500);
	}

	/* Active state for nested items */
	.nested-job-status a.active {
		background-color: var(--color-surface-100);
		border-left: 2px solid var(--color-primary-500);
		padding-left: calc(1rem - 2px) !important;
	}

	.nested-job-status a.active .dot-matrix-text {
		color: var(--color-primary-600);
	}

	html[data-mode='dark'] .nested-job-status a.active {
		background-color: var(--color-surface-700);
	}

	html[data-mode='dark'] .nested-job-status a.active .dot-matrix-text {
		color: var(--color-primary-400);
	}

	/* Collapsed sidebar adjustments for nested items */
	.sidebar-collapsed .nested-job-status {
		display: none !important;
	}

	/* Add subtle animation */
	.nested-job-status a {
		transition: all 0.15s ease-in-out;
	}

	.dot-matrix-text {
		transition: all 0.15s ease-in-out;
	}

	/* Admin Exit button active state */
	.admin-exit-active {
		background-color: var(--color-nav-active-bg-light);
		font-weight: 600;
		color: var(--color-nav-active-text-light) !important;
		border-radius: 0.375rem;
	}

	html[data-mode='dark'] .admin-exit-active {
		background-color: var(--color-nav-active-bg-dark);
		font-weight: 600;
		color: var(--color-nav-active-text-dark) !important;
	}

	/* Mobile admin exit active state */
	.admin-exit-active-mobile {
		background-color: var(--color-nav-active-bg-light) !important;
		font-weight: 600;
		color: var(--color-nav-active-text-light) !important;
	}

	html[data-mode='dark'] .admin-exit-active-mobile {
		background-color: var(--color-nav-active-bg-dark) !important;
		font-weight: 600;
		color: var(--color-nav-active-text-dark) !important;
	}

	/* Theme button active states - prevent hover styles when active */
	.theme-light-button.bg-surface-200:hover,
	.theme-dark-button.bg-surface-200:hover {
		background-color: rgb(229 229 229) !important; /* surface-200 */
	}

	html[data-mode='dark'] .theme-light-button.bg-surface-200:hover,
	html[data-mode='dark'] .theme-dark-button.bg-surface-200:hover {
		background-color: rgb(55 65 81) !important; /* surface-700 in dark mode */
	}

	/* Footer styles - ensure it takes full width available in its container */
	/* (empty) footer {
		/* Add any specific non-Tailwind styles if necessary *\/
	}*/

	/* Base breadcrumb container */
	.breadcrumb-container.svelte-mhuuw7 {
		padding: 0.75rem 0;
	}

	/* Breadcrumb list */
	.breadcrumb-list.svelte-mhuuw7 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Breadcrumb items */
	.breadcrumb-item.svelte-mhuuw7 {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	/* Breadcrumb links - following Navigation.svelte patterns */
	.breadcrumb-link.svelte-mhuuw7 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.375rem 0.5rem;
		border-radius: 0.375rem;
		color: var(--color-surface-600);
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.breadcrumb-link.svelte-mhuuw7:hover {
		color: var(--color-primary-600);
		background-color: var(--color-surface-50);
	}

	html[data-mode='dark'] .breadcrumb-link.svelte-mhuuw7 {
		color: var(--color-surface-400);
	}

	html[data-mode='dark'] .breadcrumb-link.svelte-mhuuw7:hover {
		color: var(--color-primary-400);
		background-color: var(--color-surface-800);
	}

	/* Admin mode styling */
	.breadcrumb-link.admin-mode.svelte-mhuuw7 {
		color: var(--color-surface-700);
	}

	.breadcrumb-link.admin-mode.svelte-mhuuw7:hover {
		color: var(--color-primary-700);
		background-color: rgba(139, 92, 246, 0.1);
	}

	html[data-mode='dark'] .breadcrumb-link.admin-mode.svelte-mhuuw7 {
		color: var(--color-surface-300);
	}

	html[data-mode='dark'] .breadcrumb-link.admin-mode.svelte-mhuuw7:hover {
		color: var(--color-primary-300);
		background-color: rgba(139, 92, 246, 0.2);
	}

	/* Current page styling */
	.breadcrumb-current.svelte-mhuuw7 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.375rem 0.5rem;
		color: var(--color-surface-900);
		font-size: 0.875rem;
		font-weight: 600;
	}

	html[data-mode='dark'] .breadcrumb-current.svelte-mhuuw7 {
		color: var(--color-surface-100);
	}

	.breadcrumb-current.admin-mode.svelte-mhuuw7 {
		color: var(--color-primary-700);
	}

	html[data-mode='dark'] .breadcrumb-current.admin-mode.svelte-mhuuw7 {
		color: var(--color-primary-300);
	}

	/* Text styling */
	.breadcrumb-text.svelte-mhuuw7 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 12rem;
	}

	/* Separator styling */
	.breadcrumb-separator.svelte-mhuuw7 {
		display: flex;
		align-items: center;
		color: var(--color-surface-400);
		margin: 0 0.125rem;
	}

	html[data-mode='dark'] .breadcrumb-separator.svelte-mhuuw7 {
		color: var(--color-surface-600);
	}

	.breadcrumb-separator-slash.svelte-mhuuw7 {
		font-size: 0.875rem;
		font-weight: 400;
	}

	/* Responsive adjustments */
	@media (max-width: 640px) {
		.breadcrumb-container.svelte-mhuuw7 {
			padding: 0.5rem 0;
		}

		.breadcrumb-text.svelte-mhuuw7 {
			max-width: 8rem;
		}

		.breadcrumb-link.svelte-mhuuw7,
		.breadcrumb-current.svelte-mhuuw7 {
			padding: 0.25rem 0.375rem;
			font-size: 0.8125rem;
		}
	}

	/* Accessibility improvements */
	.breadcrumb-link.svelte-mhuuw7:focus {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 2px;
	}

	.breadcrumb-current.svelte-mhuuw7:focus {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 2px;
	}

	/* Print styles */
	@media print {
		.breadcrumb-container.svelte-mhuuw7 {
			border-bottom: 1px solid #000;
		}

		.breadcrumb-link.svelte-mhuuw7,
		.breadcrumb-current.svelte-mhuuw7 {
			color: #000 !important;
			background: none !important;
		}

		.breadcrumb-separator.svelte-mhuuw7 {
			color: #000 !important;
		}
	}

	.system-banners.svelte-1ub018h {
		position: relative;
		z-index: 40;
	}

	:root {
		--color-livna-logo: #204080; /* Deep blue that complements #fec302 (yellow/gold) */
		--scrollbar-width: 17px; /* Default scrollbar width in most browsers */
		--grid-line-color: var(--color-surface-200, #e5e7eb); /* Fallback light gray */
		--grid-bg-color: var(--color-surface-50, #f9fafb); /* Fallback very light gray/off-white */
	}
	.dark {
		--color-livna-logo: #4080ff; /* Lighter blue for dark mode for better contrast */
		--grid-line-color: var(--color-surface-700, #374151); /* Fallback darker gray */
		--grid-bg-color: var(--color-surface-800, #1f2937); /* Fallback dark gray */
	}

	.livna-toast-viewport {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 0.75rem !important;
		pointer-events: none !important;
		max-width: min(420px, 90vw) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.livna-toast-viewport [data-part='group'] {
		position: relative !important;
		inset: auto !important;
		width: auto !important;
		max-width: min(420px, 90vw) !important;
		pointer-events: none !important;
	}

	.livna-toast-viewport [data-part='root'] {
		position: relative !important;
		inset: auto !important;
		translate: none !important;
		scale: 1 !important;
		height: auto !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		margin: 0 !important;
		width: auto !important;
		max-width: min(420px, 90vw) !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.livna-toast-viewport [data-part='root'] * {
		max-width: min(420px, 90vw) !important;
	}

	/* Always show scrollbar to prevent layout shifts */
	.scrollbar-stable {
		scrollbar-gutter: stable;
		-ms-overflow-style: scrollbar;
	}

	/* Make sure login page has consistent layout too */
	html {
		overflow-y: scroll;
	}

	/* Full width container class for pages that need to stretch 100% width */
	.container-full {
		width: 100%;
		max-width: none;
	}

	/* Responsive width container for pages that need to expand based on content */
	.responsive-width-container {
		width: 100%;
		max-width: none;
		min-width: 100%;
		overflow-x: visible;
	}
	/* Prevent flash of narrow content on assembly table pages */
	body:has(.assembly-table-page) .container.svelte-12qhfyh {
		max-width: 100% !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}