/* @import 'tailwindcss'; */

html, body, div, h1, h2, h3, h4, h5 {
		font-family: 'Arial', sans-serif;
	}

label {
		font-weight: bold;
	}

.htmx-indicator {
		opacity: 0;
		pointer-events: none;
		transition: opacity 500ms ease-in;
	}

.htmx-request .htmx-indicator {
		opacity: 1;
		pointer-events: auto;
	}

.htmx-request.htmx-indicator {
		opacity: 1;
		pointer-events: auto;
	}

/* Progress bar styles */
.progress-bar-container {
		width: 200px;
		height: 6px;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,0.2);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.5);
		display: inline-block;
		vertical-align: middle;
	}

.progress-bar-fill {
		position: absolute;
		height: 100%;
		width: 100%;
		background: #2196f3;
		border-radius: 4px;
		transform: translateX(-100%);
		animation: progressSlide 4s linear infinite;
		box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4);
	}

@keyframes progressSlide {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}

/* Top menu spinner positioning */
#spinner {
		display: inline-block;
		vertical-align: middle;
		padding: 0 20px;
	}

/* Map update visual feedback */
.map-updating {
		filter: blur(3px);
		opacity: 0.5;
		transition: all 0.1s ease;
		pointer-events: none;
	}

/* Wait cursor during updates */
.wait-cursor {
		cursor: wait !important;
	}

.wait-cursor * {
		cursor: wait !important;
	}

/* Modal blur effect - Translucent blur background for modal overlays */
.modal-backdrop,
[class*="fixed"][class*="inset-0"][class*="bg-black"] {
		background: rgba(255, 255, 255, 0.1) !important;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

/* Custom pale grey for read-only form fields (Tailwind: bg-gray-100) */
.bg-pale-grey {
	background-color: #f8f8f8 !important;
}

/* Custom medium grey text for read-only form fields (Tailwind: text-gray-500) */
.text-medium-grey {
	color: #666666 !important;
}

/* Rounded corners for all form input fields */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="color"],
select,
textarea {
	border-radius: 6px !important;
}

/* ============================================
   Global Sidebar Layout - Icon Menu
   Ensures consistent sidebar rendering on all pages
   ============================================ */

/* CSS Variables for sidebar dimensions */
:root {
	--sidebar-width: 56px;
	--header-height: 48px;
	--sidebar-gray-50: #f8fafc;
	--sidebar-gray-100: #f1f5f9;
	--sidebar-gray-200: #e2e8f0;
	--sidebar-gray-300: #cbd5e1;
}

/* Sidebar Container - Fixed Left Navigation */
.home-sidebar-redesign,
#homeColumnLeft.collapsed {
	position: fixed !important;
	top: var(--header-height) !important;
	left: 0 !important;
	width: var(--sidebar-width) !important;
	height: calc(100vh - var(--header-height)) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-right: 1px solid var(--sidebar-gray-200) !important;
	z-index: 100 !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
}

/* Sidebar Icons Container */
.home-sidebar-icons,
#homeColumnLeft.collapsed #listIcons {
	padding-top: 8px !important;
	height: 100% !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* Custom scrollbar for sidebar */
.home-sidebar-icons::-webkit-scrollbar,
#homeColumnLeft.collapsed #listIcons::-webkit-scrollbar {
	width: 4px;
}

.home-sidebar-icons::-webkit-scrollbar-track,
#homeColumnLeft.collapsed #listIcons::-webkit-scrollbar-track {
	background: transparent;
}

.home-sidebar-icons::-webkit-scrollbar-thumb,
#homeColumnLeft.collapsed #listIcons::-webkit-scrollbar-thumb {
	background: var(--sidebar-gray-300);
	border-radius: 2px;
}

/* Main Container - Ensure proper flex layout */
#homeRow {
	display: flex !important;
	flex-wrap: nowrap !important;
	min-height: 100vh;
}

/* Main Content Area - Offset by sidebar width */
.home-content-redesign,
#homeColumnRight {
	margin-left: var(--sidebar-width) !important;
	flex: 1 !important;
	min-width: 0 !important;
}

/* Responsive - Hide sidebar on mobile */
@media (max-width: 768px) {
	:root {
		--sidebar-width: 0px;
	}

	.home-sidebar-redesign,
	#homeColumnLeft.collapsed {
		display: none !important;
	}

	.home-content-redesign,
	#homeColumnRight {
		margin-left: 0 !important;
	}
}

/* Print styles - Hide sidebar */
@media print {
	.home-sidebar-redesign,
	#homeColumnLeft.collapsed {
		display: none !important;
	}

	.home-content-redesign,
	#homeColumnRight {
		margin-left: 0 !important;
	}
}