/* /Components/Buttons/Group/ToggleButtonComp.razor.rz.scp.css */
/* ToggleButtonComp styles - Component uses MainButtonComp for styling */
#container[b-pivvh6hbgo] {
	/* Container for the toggle button - styling handled by MainButtonComp */
}
/* /Components/Buttons/Group/ToggleGroupComp.razor.rz.scp.css */
/* ToggleGroupComp - Minimal styling, layout controlled by parent components */

/* Container for the toggle group - inherit layout from parent */
.toggle-group-container[b-ckonwwobz0] {
	display: contents; /* Pass through to parent's grid/flex layout */
	width: 100%;
}
/* /Components/Buttons/MainButtonComp.razor.rz.scp.css */
/* MainButtonComp.razor.css - Phase 3: Using Full C# Logic & Gradient */

.main-button-wrapper[b-81hn52k67k] {
	width: 100%;
	height: var(--ht); /* Using explicit height from component parameters */
	padding: 1px;
	display: flex; /* Flex wrapper for proper height handling */
	/* Responsive sizing - use CSS variables when height is auto */
	min-height: var(--main-button-height);
}

.mainbutton[b-81hn52k67k] {
	width: 100%;
	flex-grow: 1; /* If wrapper is flex, button grows */

	background: linear-gradient(
		to bottom right,
		var(--bkg1),
		var(--bkg2)
	); /* USE GRADIENT */
	color: var(--fore);
	font-size: var(--fs);
	border-style: solid; /* Added back */
	border-width: 1px; /* Standard border */
	border-color: var(
		--bkg1
	); /* Border color related to primary background color */
	border-radius: 12px; /* Restore your original border-radius */

	padding: 5px 1rem; /* Restore more typical padding */
	margin: 0;
	box-sizing: border-box;
	font-family: var(--font-family-app); /* Use global font stack */
	font-weight: 600; /* Restore original font-weight */

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	outline: transparent; /* Good practice */
	text-decoration: none; /* Good practice */
	transition: box-shadow 0.2s ease-in-out, transform 0.1s ease-out; /* For active effects */
}

.mainbutton:disabled[b-81hn52k67k] {
	cursor: not-allowed;
	/* The ButtonStyle.Disabled case in C# will set appropriate --bkg1, --bkg2, --fore */
	/* You can add universal opacity here if desired: */
	/* opacity: 0.65; */
}

.mainbutton:not(:disabled):active[b-81hn52k67k] {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	transform: translateY(1px);
}

/* Restore caption styles from your original OCR or the version I reconstructed */
.caption-container[b-81hn52k67k] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
}

.caption1 .line1[b-81hn52k67k] {
	/* For single line */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	line-height: 1.2;
}

.caption2 .line1[b-81hn52k67k],
.caption2 .line2[b-81hn52k67k] {
	/* For two lines */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: block;
}

.caption2 .line1[b-81hn52k67k] {
	line-height: 1.2em;
}

.caption2 .line2[b-81hn52k67k] {
	font-size: 0.85em;
	line-height: 1.1em;
	opacity: 0.9;
}

/* ==========================================================================
   Responsive MainButton Enhancements
   ========================================================================== */

/* When button height is auto, use responsive CSS variables */
.main-button-wrapper[style*='--ht: auto'][b-81hn52k67k] {
	height: var(--main-button-height);
}

/* Responsive font size when using default 1em */
.mainbutton[style*='--fs: 1em'][b-81hn52k67k] {
	font-size: var(--main-button-font-size);
}

/* Mobile optimizations for better touch interaction */
@media (max-width: 480px) {
	.mainbutton[b-81hn52k67k] {
		/* Ensure adequate padding for smaller screens */
		padding: 4px 0.75rem;
		border-radius: 10px; /* Slightly smaller radius on mobile */
	}

	.caption2 .line1[b-81hn52k67k] {
		line-height: 1.1em; /* Tighter line height on mobile */
	}

	.caption2 .line2[b-81hn52k67k] {
		font-size: 0.8em; /* Smaller secondary text on mobile */
		line-height: 1em;
	}
}

/* Extra small mobile devices */
@media (max-width: 360px) {
	.mainbutton[b-81hn52k67k] {
		padding: 3px 0.5rem; /* Minimal padding for very small screens */
		border-radius: 8px; /* Even smaller radius */
	}

	.caption2 .line2[b-81hn52k67k] {
		font-size: 0.75em; /* Even smaller secondary text */
	}
}
/* /Components/CustomToast.razor.rz.scp.css */
/* Custom Toast Container - Professional stacking layout */
.custom-toast-container[b-998y4lhcqw] {
	position: fixed;
	top: 60px;
	right: 10px;
	width: 80%;
	max-width: 80vw;
	z-index: 10000; /* Higher than spinner overlay (9999) */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5em;
	pointer-events: none; /* Allow clicks through container */
}

/* Toast card styling - Professional enterprise appearance */
.custom-toast[b-998y4lhcqw] {
	pointer-events: auto; /* Re-enable clicks on toast itself */
	width: 100%; /* Full width of container (80% of viewport) */
	min-height: 60px;
	max-height: calc(100vh - 120px); /* Never exceed viewport */
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.1);
	overflow: hidden;
	cursor: pointer;
	animation: slideInRight-b-998y4lhcqw 0.4s ease-out;
	transition: all 0.3s ease;
	font-family: var(--font-family-app);
}

.custom-toast:hover[b-998y4lhcqw] {
	transform: translateX(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Paused toast styling - subtle visual indicator */
.custom-toast.toast-paused[b-998y4lhcqw] {
	border: 2px solid rgba(0, 123, 255, 0.3);
	box-shadow: 0 6px 20px rgba(0, 123, 255, 0.1),
		0 0 0 1px rgba(0, 123, 255, 0.2);
}

.custom-toast.toast-paused:hover[b-998y4lhcqw] {
	border-color: rgba(0, 123, 255, 0.5);
	box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15),
		0 0 0 1px rgba(0, 123, 255, 0.3);
}

/* Toast content with professional layout */
.toast-content[b-998y4lhcqw] {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	gap: 15px;
	position: relative;
	max-height: calc(100vh - 160px); /* Account for margins */
	overflow-y: auto; /* Scrollbar if content is too tall */
}

/* Toast icon - Larger and more prominent */
.toast-icon[b-998y4lhcqw] {
	font-size: 24px;
	flex-shrink: 0;
	font-weight: bold;
}

/* Toast message - Professional typography */
.toast-message[b-998y4lhcqw] {
	flex: 1;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: #333;
	word-wrap: break-word;
	overflow-wrap: break-word;
	padding-right: 30px; /* Space for pin button */
}

/* Pin button - Upper-right corner positioning */
.toast-pin[b-998y4lhcqw] {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 20px;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
	user-select: none;
}

.toast-pin:hover[b-998y4lhcqw] {
	background-color: rgba(0, 0, 0, 0.1);
	transform: scale(1.15);
}

/* Toast type styling - Professional color schemes */
.toast-warning[b-998y4lhcqw] {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	border-left: 5px solid #ffc107;
	color: #856404;
}

.toast-warning .toast-icon[b-998y4lhcqw] {
	color: #f39c12;
}

.toast-success[b-998y4lhcqw] {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border-left: 5px solid #28a745;
	color: #155724;
}

.toast-success .toast-icon[b-998y4lhcqw] {
	color: #28a745;
}

.toast-error[b-998y4lhcqw] {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	border-left: 5px solid #dc3545;
	color: #721c24;
}

.toast-error .toast-icon[b-998y4lhcqw] {
	color: #dc3545;
}

.toast-info[b-998y4lhcqw] {
	background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
	border-left: 5px solid #17a2b8;
	color: #0c5460;
}

.toast-info .toast-icon[b-998y4lhcqw] {
	color: #17a2b8;
}

/* Animation - Smooth slide-in from right */
@keyframes slideInRight-b-998y4lhcqw {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.custom-toast-container[b-998y4lhcqw] {
		width: 90%;
		right: 5px;
	}

	.toast-content[b-998y4lhcqw] {
		padding: 14px 16px;
	}

	.toast-message[b-998y4lhcqw] {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.custom-toast-container[b-998y4lhcqw] {
		width: 95%;
		right: 2.5%;
	}

	.toast-content[b-998y4lhcqw] {
		padding: 12px 14px;
	}

	.toast-message[b-998y4lhcqw] {
		font-size: 12px;
	}

	.toast-icon[b-998y4lhcqw] {
		font-size: 20px;
	}

	.toast-pin[b-998y4lhcqw] {
		font-size: 18px;
		width: 24px;
		height: 24px;
	}
}

/* iPhone SE and smaller devices */
@media (max-width: 375px) {
	.toast-content[b-998y4lhcqw] {
		padding: 10px 12px;
		gap: 10px;
		max-height: calc(100vh - 140px);
	}

	.toast-message[b-998y4lhcqw] {
		font-size: 11px;
		line-height: 1.3;
	}

	.toast-icon[b-998y4lhcqw] {
		font-size: 18px;
	}

	.toast-pin[b-998y4lhcqw] {
		font-size: 16px;
		width: 22px;
		height: 22px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.custom-toast[b-998y4lhcqw] {
		border-width: 3px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.custom-toast[b-998y4lhcqw] {
		animation: none;
	}
}
/* /Components/GridComp.razor.rz.scp.css */
#search[b-m4ze6stmyn] {
	grid-area: ss;
	margin-left: 1em;
	margin-right: 1em;
	align-self: start;
	margin-bottom: 10px;
	width: 90%;
}

#grid[b-m4ze6stmyn] {
	height: 100%;
	overflow: auto;
	border-bottom: solid;
	border-bottom-color: #193549;
}

.row[b-m4ze6stmyn] {
	font-size: 0.9em;
	padding-left: 1em;
	padding-top: 5px;
	padding-bottom: 7px;
	cursor: pointer;
	width: 96%;
	border-bottom-style: solid;
	border-bottom-color: #193549;
}

.row:nth-child(odd)[b-m4ze6stmyn] {
	background-color: #add7f6;
}

.row:nth-child(even)[b-m4ze6stmyn] {
	background-color: #87bfff;
}

.row-content[b-m4ze6stmyn] {
	height: 1.1em;
	font-size: 0.9em;
	padding-left: 1em;
	padding-right: 1em;
	justify-content: start;
	align-self: center;
	text-align: left;
}

.trans[b-m4ze6stmyn] {
	display: grid;
	grid-template-columns: 1fr;
	padding-left: 0px;
	cursor: pointer;
	background-color: transparent;
	border-color: transparent;
	border-width: 0;
	width: 100%;
	justify-content: start;
}

/* ==========================================================================
   Mobile Responsive Optimizations for iPhone SE and Small Screens
   ========================================================================== */

/* Mobile devices (phones in portrait) - 480px and below */
@media (max-width: 480px) {
	#search[b-m4ze6stmyn] {
		width: 95%; /* Slightly wider on mobile to use more screen space */
		margin-left: 0.75em; /* Reduce margins slightly */
		margin-right: 0.75em;
		margin-bottom: 8px; /* Reduce bottom margin to save space */
	}

	.row[b-m4ze6stmyn] {
		padding-left: 0.75em; /* Reduce left padding */
		padding-top: 6px; /* Slightly increase for better touch targets */
		padding-bottom: 8px;
		width: 98%; /* Use more available width */
		min-height: 44px; /* Ensure minimum touch target size */
	}

	.row-content[b-m4ze6stmyn] {
		padding-left: 0.75em; /* Reduce padding to save space */
		padding-right: 0.75em;
		font-size: 0.85em; /* Slightly smaller font for mobile */
		line-height: 1.2; /* Tighter line height for compact display */
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	#search[b-m4ze6stmyn] {
		width: 98%; /* Use almost full width on iPhone SE */
		margin-left: 0.5em;
		margin-right: 0.5em;
		margin-bottom: 6px; /* Minimal bottom margin */
	}

	.row[b-m4ze6stmyn] {
		padding-left: 0.5em; /* Minimal left padding */
		padding-top: 8px; /* Ensure adequate touch target */
		padding-bottom: 10px;
		width: 99%; /* Use maximum available width */
		min-height: 46px; /* Slightly larger touch target for iPhone SE */
	}

	.row-content[b-m4ze6stmyn] {
		padding-left: 0.5em; /* Minimal padding */
		padding-right: 0.5em;
		font-size: 0.8em; /* Smaller font for iPhone SE */
		line-height: 1.15; /* Compact line height */
		height: auto; /* Allow content to flow naturally */
	}

	#grid[b-m4ze6stmyn] {
		border-bottom-width: 1px; /* Thinner border to save space */
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	#search[b-m4ze6stmyn] {
		width: 99%; /* Maximum width utilization */
		margin-left: 0.25em;
		margin-right: 0.25em;
		margin-bottom: 4px; /* Minimal spacing */
	}

	.row[b-m4ze6stmyn] {
		padding-left: 0.25em; /* Minimal padding */
		padding-top: 10px; /* Ensure touch targets remain adequate */
		padding-bottom: 12px;
		width: 99.5%; /* Use nearly all available width */
		min-height: 48px; /* Maintain good touch targets */
	}

	.row-content[b-m4ze6stmyn] {
		padding-left: 0.25em;
		padding-right: 0.25em;
		font-size: 0.75em; /* Compact font for very small screens */
		line-height: 1.1;
	}
}

/* Touch devices optimization - ensure adequate touch targets */
@media (hover: none) and (pointer: coarse) {
	.row[b-m4ze6stmyn] {
		min-height: 44px; /* iOS Human Interface Guidelines minimum */
	}

	.trans[b-m4ze6stmyn] {
		min-height: 44px; /* Ensure button meets touch target requirements */
	}
}
/* /Components/GridCompCrew.razor.rz.scp.css */
#search[b-maz6yho140] {
	margin-bottom: 5px;
	width: 98%;
}

.instructions[b-maz6yho140] {
	margin-bottom: 5px;
	margin-top: 0px;
	padding: 0 0px;
	font-size: 0.9em;
	color: var(--text-color-medium);
}

.grid-comp-crew-wrapper[b-maz6yho140] {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.grid-comp-crew-container[b-maz6yho140] {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	position: relative;
	gap: 0.5em;
}

#emp-list[b-maz6yho140] {
	flex: 1 1 auto;
	overflow-y: auto;
	border-bottom: solid;
	border-bottom-color: var(--brand-primary-blue);
	margin-bottom: 0.5em;
	min-height: 0; /* Important for flex child to shrink properly */
}

#rr-crew[b-maz6yho140] {
	flex: 0 0 auto;
	overflow-y: visible;
	border: 2px solid var(--border-color-standard);
	padding: 1em;
	background-color: var(--brand-secondary-blue);
	min-height: 100px;
	height: auto;
}

.row[b-maz6yho140] {
	display: flex;
	justify-content: space-between;
	padding: 5px;
	padding-left: 1em;
	border-bottom: 1px solid var(--border-color-light-gray);
	height: 2em; /* Setting the row height */
}

.row-content[b-maz6yho140] {
	flex: 1;
}

.crew-row[b-maz6yho140] {
	display: grid;
	grid-template-columns: 30px 1fr 30px 30px;
	align-items: center;
	height: 30px;
	width: 100%;
	gap: 5px;
}

.remove-icon[b-maz6yho140] {
	margin-right: 10px;
}

.user-icon[b-maz6yho140] {
	width: 24px;
	height: 24px;
	color: var(--text-color-medium);
}

.user-icon.delegate-user[b-maz6yho140] {
	color: var(--brand-primary-blue);
	cursor: pointer;
	transition: color 0.2s ease;
}

.user-icon.delegate-user:hover[b-maz6yho140] {
	color: var(--brand-secondary-blue);
}

.delegate-icon-placeholder[b-maz6yho140] {
	width: 24px;
	height: 24px;
}

/* Dialog content styling */
.dialog-content p[b-maz6yho140] {
	margin-bottom: 1rem;
	margin-top: 0;
}

.delegate-checkbox-container[b-maz6yho140] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.delegate-checkbox-container input[type='checkbox'][b-maz6yho140] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.delegate-checkbox-label[b-maz6yho140] {
	cursor: pointer;
	font-size: 0.95rem;
	user-select: none;
}

#rr-crew p[b-maz6yho140] {
	line-height: 1.3;
	font-size: small;
	margin-top: 5px;
}

#rr-crew h5[b-maz6yho140] {
	margin-top: 0;
	margin-bottom: 0;
}

/* Legacy styling for non-crew-row divs in rr-crew */
#rr-crew div:not(.crew-row)[b-maz6yho140] {
	display: grid;
	grid-template-columns: 30px 1fr 30px;
	align-items: center;
	line-height: 1.6;
	font-size: large;
}

#rr-crew div img[b-maz6yho140] {
	margin-top: -2px; /* Adjust value accordingly */
}

.trans[b-maz6yho140] {
	display: grid;
	background: none;
	border: none;
	padding: 0;
	width: 100%;
	font: inherit;
	cursor: pointer;
	justify-content: start;
	align-content: center;
}

/* Mobile-specific optimizations for phones */
@media (max-width: 480px) {
	#search[b-maz6yho140] {
		width: 100%;
		margin-bottom: 0.5rem;
	}

	.instructions[b-maz6yho140] {
		font-size: 0.85rem;
		margin-bottom: 0.5rem;
		padding: 0 0.25rem;
	}

	.grid-comp-crew-container[b-maz6yho140] {
		gap: 0.25em;
	}

	#emp-list[b-maz6yho140] {
		margin-bottom: 0.25em;
	}

	#rr-crew[b-maz6yho140] {
		padding: 0.75em;
		min-height: 80px;
	}

	.row[b-maz6yho140] {
		padding: 8px;
		padding-left: 0.75em;
		height: 2.5em; /* Larger touch targets on mobile */
	}

	.crew-row[b-maz6yho140] {
		height: 35px; /* Larger touch targets */
	}

	.user-icon[b-maz6yho140] {
		width: 28px; /* Larger touch target on mobile */
		height: 28px;
	}

	.delegate-icon-placeholder[b-maz6yho140] {
		width: 28px;
		height: 28px;
	}

	/* Mobile-friendly checkbox sizing for dialog */
	.delegate-checkbox-container input[type='checkbox'][b-maz6yho140] {
		width: 22px;
		height: 22px;
	}

	.delegate-checkbox-label[b-maz6yho140] {
		font-size: 1rem;
	}

	#rr-crew h5[b-maz6yho140] {
		font-size: 1rem;
	}

	#rr-crew p[b-maz6yho140] {
		font-size: 0.8rem;
	}

	#rr-crew div:not(.crew-row)[b-maz6yho140] {
		font-size: 1rem; /* Slightly smaller on mobile */
	}
}

/* Extra small screens */
@media (max-width: 360px) {
	.instructions[b-maz6yho140] {
		font-size: 0.8rem;
	}

	#rr-crew[b-maz6yho140] {
		padding: 0.5em;
	}

	.row[b-maz6yho140] {
		padding: 6px;
		padding-left: 0.5em;
	}

	#rr-crew div:not(.crew-row)[b-maz6yho140] {
		font-size: 0.9rem;
	}
}
/* /Components/JobComp.razor.rz.scp.css */
#flex-container[b-et27u4vlmc] {
	/* Remove margins as they're now handled by the parent container */
	margin: 0;
	width: 100%;
	display: flex;
	flex-direction: column !important; /* Force column layout on all platforms */
	gap: 0.5rem; /* Reduced from 0.75rem for better mobile density */
	/* Ensure content fits within scrollable container */
	min-height: 0; /* Allow flex item to shrink below content size */
	overflow: hidden; /* Prevent content from breaking out */
}

#flex-container h3[b-et27u4vlmc] {
	font-size: 1.125rem; /* Reduced from 1.25rem, uses global responsive scaling */
	font-weight: 600;
	margin: 0 0 0.5rem 0; /* Reduced bottom margin */
	padding-bottom: 0.375rem; /* Reduced padding */
	border-bottom: 2px solid var(--brand-primary-blue);
	text-align: center;
}

#flex-container h4[b-et27u4vlmc] {
	margin: 0 0 0.375rem 0; /* Reduced margin */
	font-size: 1rem; /* Reduced from 1.1rem */
	font-weight: 500;
}

#flex-container div[b-et27u4vlmc] {
	word-wrap: break-word;
	word-break: break-word; /* Ensure long words break properly */
	line-height: 1.3; /* Slightly tighter line height */
	padding: 0.125rem 0; /* Reduced from 0.25rem for better density */
	font-size: 0.9rem; /* Reduced from 1rem for better mobile fit */
	color: var(--text-color-dark);
	/* Prevent individual divs from causing overflow */
	max-width: 100%;
	overflow-wrap: break-word;
	/* Ensure consistent left alignment for all content */
	text-align: left;
	margin-left: 0; /* Explicitly remove any inherited margins */
}

/* Work Order Number styling - first div in Compact/Mid modes */
#flex-container > div:first-of-type:not(.job-comp-wrapper)[b-et27u4vlmc] {
	font-weight: 600;
	font-size: 1rem; /* Reduced from 1.1rem */
	margin-left: 0; /* Ensure left alignment */
	padding-left: 0; /* Ensure no left padding */
}

/* PO Number styling - second div in Compact mode - FIXED ALIGNMENT */
#flex-container > div:nth-of-type(2):not(.job-comp-wrapper)[b-et27u4vlmc] {
	margin-left: 0; /* Ensure left alignment matches other rows */
	padding-left: 0; /* Remove any inherited padding */
}

/* Additional job details styling - third div and beyond in Compact/Mid modes */
#flex-container > div:nth-of-type(n + 3):not(.job-comp-wrapper)[b-et27u4vlmc] {
	font-size: 0.85rem; /* Reduced from 0.95rem */
	margin-left: 0; /* Ensure consistent left alignment */
	padding-left: 0; /* Remove any inherited padding */
}

/* Label styling for Full mode */
#flex-container .label[b-et27u4vlmc] {
	font-weight: 700;
	color: var(--brand-primary-blue);
	margin-right: 0.5rem;
	display: inline-block;
	min-width: 120px; /* Consistent label width for alignment */
}

/* Mobile-specific optimizations for phones */
@media (max-width: 480px) {
	#flex-container[b-et27u4vlmc] {
		gap: 0.375rem; /* Tighter spacing on mobile */
	}

	#flex-container h3[b-et27u4vlmc] {
		font-size: 1rem; /* Leverages global responsive scaling (15px base) */
		margin-bottom: 0.375rem;
		padding-bottom: 0.25rem;
	}

	#flex-container > div:first-of-type:not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.9rem; /* Slightly smaller on mobile */
	}

	#flex-container > div:nth-of-type(2):not(.job-comp-wrapper)[b-et27u4vlmc] {
		padding: 0.125rem 0; /* Consistent with other divs */
		font-size: 0.85rem;
		margin-left: 0; /* Ensure left alignment on mobile */
		padding-left: 0;
	}

	#flex-container > div:nth-of-type(n + 3):not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.8rem;
		padding: 0.125rem 0;
		margin-left: 0; /* Ensure consistent alignment */
		padding-left: 0;
	}

	/* Mobile label adjustments */
	#flex-container .label[b-et27u4vlmc] {
		min-width: 80px; /* Reduced for mobile */
		font-size: 0.8rem;
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	#flex-container[b-et27u4vlmc] {
		gap: 0.25rem; /* Even tighter spacing for iPhone SE */
	}

	#flex-container h3[b-et27u4vlmc] {
		font-size: 0.95rem; /* Leverages global responsive scaling (14.5px base) */
		margin-bottom: 0.25rem;
		padding-bottom: 0.2rem;
	}

	#flex-container > div:first-of-type:not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.85rem;
	}

	#flex-container > div:nth-of-type(2):not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.8rem;
	}

	#flex-container > div:nth-of-type(n + 3):not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.75rem;
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	#flex-container[b-et27u4vlmc] {
		gap: 0.2rem; /* Minimal spacing for very small screens */
	}

	#flex-container h3[b-et27u4vlmc] {
		font-size: 0.9rem; /* Leverages global responsive scaling (14px base) */
		margin-bottom: 0.2rem;
		padding-bottom: 0.15rem;
	}

	#flex-container > div:first-of-type:not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.8rem;
	}

	#flex-container > div:nth-of-type(2):not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.75rem;
	}

	#flex-container > div:nth-of-type(n + 3):not(.job-comp-wrapper)[b-et27u4vlmc] {
		font-size: 0.7rem;
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	#flex-container[b-et27u4vlmc] {
		/* Ensure adequate touch spacing */
		gap: 0.6rem;
		/* Explicitly maintain column direction on touch devices */
		flex-direction: column;
	}

	#flex-container div[b-et27u4vlmc] {
		/* Slightly larger touch targets */
		min-height: 24px;
		/* Remove display: flex to prevent horizontal layout issues */
		/* Keep content as block elements for consistent vertical layout */
	}
}

/* JobComp background wrapper for better contrast */
#flex-container .job-comp-wrapper[b-et27u4vlmc] {
	background-color: var(--background-color-light);
	border: 1px solid var(--border-color-standard);
	border-radius: var(--corner-radius);
	padding: 0.5rem !important; /* Use !important to override #flex-container div padding */
	margin-top: 0; /* Move up to fill gap from removed HR */
}

/* CSS Grid layout for Full mode - Nested Grid Approach */
.full-mode-grid[b-et27u4vlmc] {
	display: grid;
	grid-template-columns: 1fr !important; /* Force single column layout on all platforms */
	gap: 0.25rem; /* Increased from 0.1em for better readability */
	margin-top: 0.125rem;
	margin-left: 0; /* Remove extra margin since wrapper now has proper padding */
}

/* Each row is its own grid with controlled spacing */
.grid-row-container[b-et27u4vlmc] {
	display: flex;
	flex-direction: column !important; /* Force column layout for label-value pairs */
	gap: 0.125rem; /* Small gap between label and value for readability */
	margin: 0;
	padding: 0;
}

/* Pull subsequent .grid-row-container elements closer - REDUCED NEGATIVE MARGIN */
.grid-row-container + .grid-row-container[b-et27u4vlmc] {
	margin-top: -0.125rem; /* Much less aggressive spacing reduction */
}

.row-label[b-et27u4vlmc] {
	font-weight: 700;
	color: var(--brand-primary-blue);
	font-size: 0.75rem; /* Slightly reduced for mobile */
	line-height: 1.2; /* Slightly more breathing room */
	margin: 0;
	padding: 0;
}

.row-value[b-et27u4vlmc] {
	color: var(--text-color-dark);
	font-weight: normal;
	font-size: 0.8rem; /* Slightly reduced for mobile */
	line-height: 1.2; /* Consistent with label */
	margin-top: 0; /* Removed negative margin for better readability */
	padding: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Mobile adjustments for Full mode grid layout */
@media (max-width: 480px) {
	#flex-container .job-comp-wrapper[b-et27u4vlmc] {
		padding: 0.4rem !important; /* Adequate padding on mobile - not too tight */
	}

	.full-mode-grid[b-et27u4vlmc] {
		gap: 0.2rem; /* Balanced spacing on mobile */
		margin-top: 0.1rem;
		margin-left: 0; /* No extra margin needed */
	}

	.grid-row-container[b-et27u4vlmc] {
		gap: 0.1rem; /* Balanced label-to-value spacing on mobile */
	}

	.grid-row-container + .grid-row-container[b-et27u4vlmc] {
		margin-top: -0.1rem; /* Slightly tighter on mobile */
	}

	.row-label[b-et27u4vlmc] {
		font-size: 0.7rem; /* Leverages global responsive scaling */
	}

	.row-value[b-et27u4vlmc] {
		font-size: 0.75rem; /* Leverages global responsive scaling */
	}
}

/* iPhone SE and similar devices - Full mode optimizations */
@media (max-width: 375px) {
	#flex-container .job-comp-wrapper[b-et27u4vlmc] {
		padding: 0.35rem !important; /* Adequate padding for iPhone SE - not too cramped */
	}

	.full-mode-grid[b-et27u4vlmc] {
		gap: 0.15rem; /* Tighter spacing for iPhone SE */
		margin-left: 0; /* No extra margin needed */
	}

	.grid-row-container[b-et27u4vlmc] {
		gap: 0.08rem; /* Tighter label-to-value spacing */
	}

	.row-label[b-et27u4vlmc] {
		font-size: 0.65rem; /* Smaller for iPhone SE */
	}

	.row-value[b-et27u4vlmc] {
		font-size: 0.7rem; /* Smaller for iPhone SE */
	}
}

/* Small mobile devices - Full mode optimizations */
@media (max-width: 360px) {
	#flex-container .job-comp-wrapper[b-et27u4vlmc] {
		padding: 0.3rem !important; /* Still adequate padding for very small screens */
	}

	.full-mode-grid[b-et27u4vlmc] {
		gap: 0.1rem; /* Very tight spacing */
		margin-left: 0; /* No extra margin needed */
	}

	.grid-row-container[b-et27u4vlmc] {
		gap: 0.05rem; /* Very tight label-to-value spacing */
	}

	.row-label[b-et27u4vlmc] {
		font-size: 0.6rem; /* Very small for compact screens */
	}

	.row-value[b-et27u4vlmc] {
		font-size: 0.65rem; /* Very small for compact screens */
	}
}
/* /Components/TimeEntry/DateSelectorComp.razor.rz.scp.css */
#datecontainer[b-ennl3xj5sy] {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 10px;
}

#datebuttons[b-ennl3xj5sy] {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.dateinner[b-ennl3xj5sy] {
	width: 100%;
}

/* Syncfusion styles */
.property-panel-section .property-value[b-ennl3xj5sy] {
	padding: 5px 0px 10px;
}

.property-panel-content[b-ennl3xj5sy] {
	padding: 0px 0px 15px 0px;
}

.property-panel-content:last-child[b-ennl3xj5sy] {
	padding: 0px 0px 40px 0px;
}

input.e-input[b-ennl3xj5sy],
textarea.e-input[b-ennl3xj5sy],
.e-input-group[b-ennl3xj5sy],
.e-input-group.e-control-wrapper[b-ennl3xj5sy] {
	font-size: 1.3em;
}

.e-dropdownbase .e-list-item[b-ennl3xj5sy] {
	font-size: 1.3em;
}

/* Mobile optimizations for space saving */
@media (max-width: 480px) {
	#datecontainer[b-ennl3xj5sy] {
		margin-bottom: 5px;
	}
}

/* iPhone SE and similar devices (375px width) */
@media (max-width: 375px) {
	#datecontainer[b-ennl3xj5sy] {
		margin-bottom: 4px;
	}
}

@media (max-width: 360px) {
	#datecontainer[b-ennl3xj5sy] {
		margin-bottom: 3px;
	}
}
/* /Components/TimeEntry/KeypadComp.razor.rz.scp.css */
/* KeypadComp.razor.css */

#keypad-container[b-whth8qkjdn] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas:
		'k1 k2 k3'
		'k4 k5 k6'
		'k7 k8 k9'
		'am k0 kd';
	gap: 0.1rem;
	margin-top: 0;
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	/* Improve touch targets for mobile */
	touch-action: manipulation;
}

/* Mobile optimizations for space saving */
@media (max-width: 480px) {
	#keypad-container[b-whth8qkjdn] {
		transform: scale(0.95);
		transform-origin: center top;
		margin-top: -5px;
		margin-bottom: -10px;
	}
}

@media (max-width: 380px) {
	#keypad-container[b-whth8qkjdn] {
		transform: scale(0.9);
		transform-origin: center top;
		margin-top: -8px;
		margin-bottom: -15px;
	}
}

/* Individual key positioning */
#key1[b-whth8qkjdn] {
	grid-area: k1;
}
#key2[b-whth8qkjdn] {
	grid-area: k2;
}
#key3[b-whth8qkjdn] {
	grid-area: k3;
}
#key4[b-whth8qkjdn] {
	grid-area: k4;
}
#key5[b-whth8qkjdn] {
	grid-area: k5;
}
#key6[b-whth8qkjdn] {
	grid-area: k6;
}
#key7[b-whth8qkjdn] {
	grid-area: k7;
}
#key8[b-whth8qkjdn] {
	grid-area: k8;
}
#key9[b-whth8qkjdn] {
	grid-area: k9;
}
#key0[b-whth8qkjdn] {
	grid-area: k0;
}
#keyd[b-whth8qkjdn] {
	grid-area: kd;
}

/* AM/PM section improvements */
#ampm[b-whth8qkjdn] {
	grid-area: am;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	/* Ensure proper sizing and centering */
	min-height: 40px;
	/* Improve accessibility */
	user-select: none;
}

#ampm-label[b-whth8qkjdn] {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand-primary-blue-dark, #15232d) !important;
	text-align: center;
	line-height: 1;
	margin: 0;
	/* Prevent text selection */
	user-select: none;
	/* Improve readability */
	letter-spacing: 0.025em;
}

/* Syncfusion Switch customizations for better mobile experience */
#ampm .e-switch-wrapper[b-whth8qkjdn] {
	margin: 0;
	/* Ensure proper touch target size */
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#ampm .e-switch[b-whth8qkjdn] {
	/* Ensure the switch is appropriately sized for mobile */
	transform: scale(0.9);
	/* Improve touch responsiveness */
	touch-action: manipulation;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
	#keypad-container[b-whth8qkjdn] {
		gap: 0.375rem;
		margin-top: 0.75rem;
		max-width: 350px;
	}

	#ampm-label[b-whth8qkjdn] {
		font-size: 0.8rem;
	}

	#ampm .e-switch[b-whth8qkjdn] {
		transform: scale(0.8);
	}

	#ampm .e-switch-wrapper[b-whth8qkjdn] {
		min-width: 40px;
		min-height: 40px;
	}
}

@media (max-width: 360px) {
	#keypad-container[b-whth8qkjdn] {
		gap: 0.25rem;
		max-width: 320px;
	}

	#ampm[b-whth8qkjdn] {
		gap: 0.125rem;
		padding: 0.125rem;
	}

	#ampm-label[b-whth8qkjdn] {
		font-size: 0.75rem;
	}

	#ampm .e-switch[b-whth8qkjdn] {
		transform: scale(0.7);
	}

	#ampm .e-switch-wrapper[b-whth8qkjdn] {
		min-width: 36px;
		min-height: 36px;
	}
}

/* High DPI display adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#ampm-label[b-whth8qkjdn] {
		/* Improve text rendering on high DPI displays */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	#ampm .e-switch[b-whth8qkjdn] {
		transition: none;
	}
}
/* /Components/TimeEntry/TimeEntryComp.razor.rz.scp.css */
#time-entry-container[b-5r3ycrft6l] {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 0.5em;
	padding: 1em;
}

#time-with-lunch[b-5r3ycrft6l] {
	display: grid;
	grid-template-rows: auto auto;
}

#in-out[b-5r3ycrft6l] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	height: 50px;
}

.trans[b-5r3ycrft6l] {
	background: transparent;
	border: none;
	padding: 0;
	width: 100%;
}

.time-display-button[b-5r3ycrft6l] {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr;
	justify-content: space-between;
	align-content: center;
	margin-bottom: 10px;
	padding-top: 2px;
	border-radius: 12px;
	height: 2em;
	cursor: pointer;
	transition: all 0.2s ease;
}

.time-display-button.valid[b-5r3ycrft6l] {
	border-color: green;
	background-color: white;
}

.time-display-button.invalid[b-5r3ycrft6l] {
	border-color: red;
	background-color: white;
}

.time-display-button.focused[b-5r3ycrft6l] {
	background-color: yellow !important;
}

.time-display-button .icon[b-5r3ycrft6l] {
	font-size: 0.9em;
	font-weight: bold;
	margin-top: 1px;
	margin-left: 0.5em;
	color: #333;
}

.time-display-button .time-text[b-5r3ycrft6l] {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: -1px;
	margin-right: 0.5em;
	color: #333;
}

#lunchandhours[b-5r3ycrft6l] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 2em;
	gap: 0.5em;
}

#invalid-time-text[b-5r3ycrft6l] {
	font-size: 0.8em;
	color: red;
	font-weight: normal;
	margin-right: auto;
}

#hours[b-5r3ycrft6l] {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #333;
}

.keypad-separator[b-5r3ycrft6l] {
	border: none;
	border-top: 1px solid #ddd;
	margin: 0.5em 0;
	width: 100%;
}

#keypad[b-5r3ycrft6l] {
	margin-top: 0;
}

.time-display-border-ok[b-5r3ycrft6l] {
	border: 3px solid green; /* Or whatever styling you want for valid time */
}

.time-display-border-bad[b-5r3ycrft6l] {
	border: 3px solid red; /* Or whatever styling you want for invalid time */
}

/* Mobile optimizations for space saving */
@media (max-width: 480px) {
	#time-entry-container[b-5r3ycrft6l] {
		gap: 0.3em;
		padding: 0.7em;
	}
}

/* iPhone SE and similar devices (375px width) */
@media (max-width: 375px) {
	#time-entry-container[b-5r3ycrft6l] {
		gap: 0.25em;
		padding: 0.6em;
	}
}

@media (max-width: 360px) {
	#time-entry-container[b-5r3ycrft6l] {
		gap: 0.2em;
		padding: 0.5em;
	}
}
/* /Components/TimeEntry/TimeHistoryComp.razor.rz.scp.css */
.time-history-container[b-f1012bhm46] {
	display: flex;
	flex-direction: column;
	gap: 0px;
	padding: 0px;
}

.history-row[b-f1012bhm46] {
	display: grid;
	grid-template-columns: 1fr 2fr 0.8fr 1fr 1fr 0.8fr 0.5fr;
	gap: 0.25rem;
	align-items: center;
	padding: 3px 5px;
	border-bottom: 1px solid #ccc;
	font-size: 0.85rem;
	cursor: pointer;
	margin-bottom: 1px;
}

.history-row:nth-child(odd)[b-f1012bhm46] {
	background-color: #add7f6;
}

.history-row:nth-child(even)[b-f1012bhm46] {
	background-color: #87bfff;
}

.history-row:last-child[b-f1012bhm46] {
	border-bottom: none;
}

.d-wo[b-f1012bhm46] {
	font-weight: bold;
	color: #333;
	padding-left: 5px;
	display: flex;
	align-items: center;
}

.d-job[b-f1012bhm46] {
	font-size: 0.85rem;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.d-type[b-f1012bhm46] {
	text-align: left;
	font-weight: normal;
	padding-left: 5px;
	display: flex;
	align-items: center;
}

.d-in[b-f1012bhm46],
.d-out[b-f1012bhm46] {
	text-align: right;
	font-family: inherit;
	padding-right: 5px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.d-hrs[b-f1012bhm46] {
	text-align: right;
	font-weight: bold;
	color: #333;
	padding-right: 5px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.d-lunch[b-f1012bhm46] {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-history[b-f1012bhm46] {
	text-align: center;
	padding: 1rem;
	color: #666;
	font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
	.history-row[b-f1012bhm46] {
		grid-template-columns: 1fr 1.5fr 0.6fr 0.8fr 0.8fr 0.6fr 0.4fr;
		gap: 0.2rem;
		font-size: 0.75rem;
		padding: 2px 3px;
	}

	.d-job[b-f1012bhm46] {
		font-size: 0.75rem;
	}

	.time-history-container[b-f1012bhm46] {
		padding: 0px;
	}
}

/* Extra small mobile adjustments */
@media (max-width: 360px) {
	.history-row[b-f1012bhm46] {
		grid-template-columns: 1fr 1fr 0.5fr 0.7fr 0.7fr 0.5fr 0.3fr;
		font-size: 0.7rem;
		padding: 1px 2px;
	}

	.d-job[b-f1012bhm46] {
		font-size: 0.7rem;
	}
}
/* /Components/TimeEntry/TimeListComp.razor.rz.scp.css */
#time-list-container[b-064gyb0enw] {
	margin-bottom: 2em;
	padding-left: 0.5em;
	padding-right: 0.75em;
	font-size: 0.8em;
	overflow: auto;
	flex: 1; /* Take up available space in flex container */
	min-height: 65px; /* Ensure minimum height accounting for overlay padding */
}

/* Mobile-first responsive design */
@media (max-width: 480px) {
	#time-list-container[b-064gyb0enw] {
		font-size: 0.7em;
		padding-left: 0.25em;
		padding-right: 0.5em;
	}
}

#heading[b-064gyb0enw] {
	display: grid;
	grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr 1fr;
	border-bottom: 2px solid var(--border-color-subtle);
	padding-right: 5px;
	padding-bottom: 3px;
}

/* Mobile responsive heading */
@media (max-width: 480px) {
	#heading[b-064gyb0enw] {
		grid-template-columns: 0.8fr 0.4fr 0.8fr 0.8fr 0.8fr 0.6fr;
		font-size: 0.9em;
	}
}

#h-type[b-064gyb0enw] {
	padding-left: 5px;
}

#h-in[b-064gyb0enw],
#h-out[b-064gyb0enw],
#h-hrs[b-064gyb0enw] {
	text-align: right;
	padding-right: 5px; /* 5px padding to the right */
}

#h-lunch[b-064gyb0enw] {
	text-align: center;
}

.notes[b-064gyb0enw] {
	font-size: x-small;
}

.row[b-064gyb0enw] {
	display: grid;
	grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
		'd-wo d-type d-in d-out d-hrs d-lunch'
		'd-note d-note d-note d-note d-note d-note';
	background-color: var(--background-color-timeclock);
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 1px;
	cursor: pointer;
}

/* Mobile responsive row layout */
@media (max-width: 480px) {
	.row[b-064gyb0enw] {
		grid-template-columns: 0.8fr 0.4fr 0.8fr 0.8fr 0.8fr 0.6fr;
		padding-top: 2px;
		padding-bottom: 2px;
	}
}

.row:nth-child(odd)[b-064gyb0enw] {
	background-color: var(--background-color-row-odd);
}

.row:nth-child(even)[b-064gyb0enw] {
	background-color: var(--background-color-row-even);
}

.d-wo[b-064gyb0enw] {
	grid-area: d-wo;
	padding-left: 5px;
}

.d-type[b-064gyb0enw] {
	grid-area: d-type;
	padding-left: 5px;
}

.d-in[b-064gyb0enw] {
	grid-area: d-in;
}

.d-out[b-064gyb0enw] {
	grid-area: d-out;
}

.d-hrs[b-064gyb0enw] {
	grid-area: d-hrs;
}

.d-lunch[b-064gyb0enw] {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: d-lunch;
}

.d-note[b-064gyb0enw] {
	grid-area: d-note;
	font-size: small;
	padding-left: 20px;
}

.d-in[b-064gyb0enw],
.d-out[b-064gyb0enw],
.d-hrs[b-064gyb0enw] {
	text-align: right; /* Right-aligning the text */
	padding-right: 5px; /* Consistent with header alignment */
}

/* Mobile adjustments for data cells */
@media (max-width: 480px) {
	.d-wo[b-064gyb0enw],
	.d-type[b-064gyb0enw] {
		padding-left: 3px;
	}

	.d-note[b-064gyb0enw] {
		padding-left: 15px;
		font-size: x-small;
	}
}

/* Styling for empty related times state - moved here for component scoping */
#no-related-times-container[b-064gyb0enw] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-height: 65px;
	height: 100%;
	box-sizing: border-box;
}

.no-related-times-message[b-064gyb0enw] {
	color: #666;
	font-style: italic;
	font-size: 0.9em;
	text-align: center;
	margin: 0;
}

/* Overlap highlighting styles */
.overlapping-entry[b-064gyb0enw] {
	background-color: #ffcccc !important; /* Light red background */
	border: 2px solid #cc0000 !important; /* Darker red border */
}
/* /Components/TimeEntry/TimeTypeComp.razor.rz.scp.css */
#TimeTypeGroup[b-kg7ou746dc] {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	gap: 2px;
	margin-left: 1em;
	margin-right: 1em;
}

/* Mobile optimizations for space saving */
@media (max-width: 480px) {
	#TimeTypeGroup[b-kg7ou746dc] {
		gap: 1px;
		margin-left: 0.5em;
		margin-right: 0.5em;
		margin-bottom: 5px;
	}
}

/* iPhone SE and similar devices (375px width) */
@media (max-width: 375px) {
	#TimeTypeGroup[b-kg7ou746dc] {
		gap: 1px;
		margin-left: 0.45em;
		margin-right: 0.45em;
		margin-bottom: 4px;
	}
}

@media (max-width: 360px) {
	#TimeTypeGroup[b-kg7ou746dc] {
		gap: 0px;
		margin-left: 0.4em;
		margin-right: 0.4em;
		margin-bottom: 3px;
	}
}
/* /Components/TimeReviewComp.razor.rz.scp.css */
/* ==========================================================================
   TimeReviewComp - Mobile-First Responsive Design
   Optimized for iPhone SE 2020 (375px width minimum)
   Uses Global Responsive Font System (rem units scale automatically)
   ========================================================================== */

/* Container for the time entry list */
.time-list-container[b-qe981riq5a] {
	font-size: 0.8rem; /* Uses global font scaling */
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	overflow: hidden;
}

/* Individual time entry row */
.row[b-qe981riq5a] {
	display: grid;
	grid-template-columns: 3rem 1fr; /* Fixed width for remove button, flexible content */
	background-color: #87bfff;
	padding: 0.5rem 0;
	margin-bottom: 1px;
	min-height: 44px; /* Minimum touch target for mobile */
	align-items: center;
}

.row:nth-child(odd)[b-qe981riq5a] {
	background-color: #add7f6;
}

.row:nth-child(even)[b-qe981riq5a] {
	background-color: #87bfff;
}

/* Remove button container */
.d-remove[b-qe981riq5a] {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	min-height: 44px; /* Ensure touch target */
}

.remove-icon[b-qe981riq5a] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.remove-icon:hover[b-qe981riq5a] {
	transform: scale(1.1);
}

/* Main content area - clickable for editing */
.row-content[b-qe981riq5a] {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	min-height: 44px; /* Ensure touch target */
	align-content: center;
}

.row-content:hover[b-qe981riq5a] {
	background-color: rgba(255, 255, 255, 0.1);
}

/* First row: Work Order and Job Description */
.row-1[b-qe981riq5a] {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
	align-items: center;
}

.d-wo[b-qe981riq5a] {
	font-weight: 800;
	font-size: 0.9rem;
	color: #333;
	white-space: nowrap;
}

.d-job[b-qe981riq5a] {
	font-weight: 800;
	font-size: 0.85rem;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Second row: Time details */
.row-2[b-qe981riq5a] {
	display: grid;
	grid-template-columns: 0.4fr 1fr 1fr 0.6fr 0.8fr; /* Optimized: reduced Time Type from 1fr to 0.4fr, increased In/Out times from 0.8fr to 1fr */
	gap: 0.25rem;
	align-items: center;
	font-size: 0.75rem;
}

.d-type[b-qe981riq5a] {
	font-weight: 600;
	color: #555;
}

.d-in[b-qe981riq5a],
.d-out[b-qe981riq5a],
.d-hrs[b-qe981riq5a] {
	text-align: right;
	font-weight: 500;
	color: #333;
}

.d-lunch[b-qe981riq5a] {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: #666;
}

/* No entries message */
.no-entries[b-qe981riq5a] {
	margin: 2rem 1rem;
	text-align: center;
	padding: 2rem 1rem;
	background-color: #f8f9fa;
	border-radius: 0.5rem;
	border: 1px solid #e9ecef;
}

.no-entries h3[b-qe981riq5a] {
	color: #6c757d;
	font-size: 1.1rem;
	margin: 0;
	font-weight: 500;
}

/* ==========================================================================
   Mobile Responsive Breakpoints
   ========================================================================== */

/* Small mobile devices (iPhone SE and similar - 375px and below) */
@media (max-width: 375px) {
	.row[b-qe981riq5a] {
		grid-template-columns: 2.5rem 1fr; /* Slightly smaller remove button area */
		padding: 0.4rem 0;
	}

	.d-remove[b-qe981riq5a] {
		padding: 0.4rem;
	}

	.remove-icon[b-qe981riq5a] {
		width: 18px;
		height: 18px;
	}

	.row-content[b-qe981riq5a] {
		padding: 0.2rem 0.3rem; /* Reduced horizontal padding from 0.4rem to 0.3rem for more space */
		gap: 0.2rem;
	}

	.row-1[b-qe981riq5a] {
		gap: 0.3rem; /* Reduced gap from 0.4rem to 0.3rem */
	}

	.d-wo[b-qe981riq5a] {
		font-size: 0.85rem;
	}

	.d-job[b-qe981riq5a] {
		font-size: 0.8rem;
	}

	.row-2[b-qe981riq5a] {
		gap: 0.15rem; /* Reduced gap from 0.2rem to 0.15rem for maximum space efficiency */
		font-size: 0.7rem;
	}

	.d-lunch[b-qe981riq5a] {
		font-size: 0.65rem;
	}

	.no-entries[b-qe981riq5a] {
		margin: 1.5rem 0.5rem;
		padding: 1.5rem 0.5rem;
	}

	.no-entries h3[b-qe981riq5a] {
		font-size: 1rem;
	}
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
	.row[b-qe981riq5a] {
		grid-template-columns: 2rem 1fr; /* Even smaller remove button area */
	}

	.remove-icon[b-qe981riq5a] {
		width: 16px;
		height: 16px;
	}

	.d-wo[b-qe981riq5a] {
		font-size: 0.8rem;
	}

	.d-job[b-qe981riq5a] {
		font-size: 0.75rem;
	}

	.row-2[b-qe981riq5a] {
		font-size: 0.65rem;
	}

	.d-lunch[b-qe981riq5a] {
		font-size: 0.6rem;
	}
}

/* Touch devices - enhance touch targets */
@media (hover: none) and (pointer: coarse) {
	.row[b-qe981riq5a] {
		min-height: 48px; /* Larger touch target for touch devices */
	}

	.d-remove[b-qe981riq5a] {
		min-height: 48px;
		padding: 0.6rem;
	}

	.row-content[b-qe981riq5a] {
		min-height: 48px;
	}

	.remove-icon[b-qe981riq5a] {
		width: 22px;
		height: 22px;
	}
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Rte.Client/Layout/MainLayout.razor.css */

/* ... .main-layout-grid, .header-row (background & basic flex), .body-row, .footer-row definitions ... */
/* Ensure these are using var() for heights as per the previous successful step for layout structure */

/* Menu items styling - Third grid row (flexible) with space distribution */
.menu-items-container[b-0y8mtndnjb] {
	display: flex;
	flex-direction: column;
	justify-content: space-around; /* Distribute menu items evenly in available space */
	gap: 1rem; /* Reduced gap to fit more content */
	margin-top: 1rem;
	margin-bottom: 1rem;
	overflow-y: auto; /* Allow scrolling if absolutely necessary */
	min-height: 0; /* Allow grid item to shrink below content size */
}

/* Menu item styling - responsive font sizing with em units */
.menu-item[b-0y8mtndnjb] {
	color: white;
	font-size: var(
		--sidebar-menu-font-size
	); /* Responsive font size using CSS variables */
	padding: 0.8rem 0.5rem 0.8rem 30px; /* Reduced vertical padding for better space utilization */
	cursor: pointer;
	transition: background-color 0.2s ease;
	border-radius: 4px;
	line-height: 1.2; /* Maintain good readability */
	flex-shrink: 0; /* Prevent items from shrinking too much */
}

.menu-item:hover[b-0y8mtndnjb] {
	background-color: rgba(255, 255, 255, 0.1);
}

.menu-item.disabled[b-0y8mtndnjb] {
	color: #6c757d;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Loading and not-logged-in states - positioned in third grid row */
.menu-loading[b-0y8mtndnjb],
.menu-not-logged-in[b-0y8mtndnjb] {
	color: #f7f0f0;
	font-style: italic;
	padding: 1rem 0.5rem 0.5rem 30px; /* Match the indentation of user info */
	display: flex;
	align-items: center; /* Center vertically in the menu area */
	justify-content: flex-start; /* Align to left */
}

/* Sidebar styling - CSS Grid layout for optimal space distribution */
.sidebar-content[b-0y8mtndnjb] {
	max-width: 98%;
	padding: 0 0.5rem;
	display: grid;
	grid-template-rows: auto auto 1fr auto; /* User info, Divider, Menu (flexible), Footer */
	height: 100%;
	gap: 0; /* Remove gap to control spacing manually */
}

/* User info section - first grid row */
.user-info-section[b-0y8mtndnjb] {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	padding-left: 30px; /* Added indent of 30px */
}

.logged-in-text[b-0y8mtndnjb] {
	color: #f7f0f0;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.user-name[b-0y8mtndnjb] {
	color: #ffc107; /* Golden yellow color as shown in the image */
	font-size: var(
		--sidebar-user-name-font-size
	); /* Responsive font size using CSS variables */
	font-weight: 500;
	margin-bottom: 0.5rem;
}

/* Sidebar divider - second grid row */
.sidebar-divider[b-0y8mtndnjb] {
	border-color: #2d5575;
	border-width: 2px; /* Increased thickness from default 1px to 2px */
	margin: 0.5rem 0 1rem 0;
	opacity: 0.8; /* Slightly increased opacity for better visibility */
}

/* Footer section - version info at bottom (fourth grid row) */
.version-info[b-0y8mtndnjb] {
	padding: 1rem 0.5rem 1rem 30px; /* Match the indentation of other elements */
	color: #6c757d; /* Muted gray color */
	font-size: var(
		--sidebar-version-font-size
	); /* Responsive font size using CSS variables */
	font-style: italic;
	text-align: left;
	margin-top: 0; /* Remove auto margin since grid handles positioning */
}

.main-layout-grid[b-0y8mtndnjb] {
	display: grid;
	grid-template-rows: var(--header-height) 1fr var(--footer-height-hidden);
	grid-template-areas:
		'header'
		'body'
		'footer';
	height: 100%;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.main-layout-grid.show-bottom-button[b-0y8mtndnjb] {
	grid-template-rows: var(--header-height) 1fr var(--footer-height-visible);
}

.header-row[b-0y8mtndnjb] {
	grid-area: header;
	background-color: #15232d;
	color: white;
	padding: 0 0.5rem;
	display: flex;
	align-items: center;
	height: var(--header-height); /* Using variable */
	min-height: var(--header-height); /* Using variable */
	box-sizing: border-box;
	z-index: 1002;
}

.header-row .app-bar-content[b-0y8mtndnjb] {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Styles for the button and image - reverting to the version before explicit button sizing */
.header-row .btn-outline-secondary[b-0y8mtndnjb] {
	/* Sidebar Toggle Button */
	background-color: transparent;
	border: none;
	padding: 0;
	margin-right: 10px;
	cursor: pointer;
	line-height: 1;
	height: auto;
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Add this to remove the default browser outline on focus */
	outline: none;
}

.header-row .btn-outline-secondary[b-0y8mtndnjb] {
	/* Sidebar Toggle Button */
	background-color: transparent;
	border: none;
	padding: 2px; /* Added a little padding */
	margin-right: 10px;
	cursor: pointer;
	line-height: 1;
	/* UPDATED to fit 32x32 image + padding */
	height: 36px;
	width: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none; /* Keep this to remove default browser outline */
}

.header-row .btn-outline-secondary:focus[b-0y8mtndnjb] {
	box-shadow: none !important; /* Keep this to remove Bootstrap focus shadow */
	outline: none !important;
}

.header-row .btn-outline-secondary:hover[b-0y8mtndnjb] {
	background-color: rgba(255, 255, 255, 0.1);
	border: none;
}

.header-row .btn-outline-secondary img[b-0y8mtndnjb] {
	height: 32px; /* UPDATED to native image size */
	width: 32px; /* UPDATED to native image size */
	display: block;
	/* object-fit: contain; /* Optional, but good if images aren't perfectly square or to prevent scaling issues */
}

.header-row .page-title[b-0y8mtndnjb] {
	margin-left: 10px;
	font-size: 1.1rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ... .body-row, .footer-row, and other styles as per the last working layout ... */
.body-row[b-0y8mtndnjb] {
	grid-area: body;
	overflow-y: auto;
	padding: 1rem;
	height: 100%; /* Add this */
	box-sizing: border-box; /* Ensure padding doesn't add to height */
	width: 100%;
	max-width: 100%;
	overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Mobile optimizations for body-row to save space */
@media (max-width: 480px) {
	.body-row[b-0y8mtndnjb] {
		padding: 0.5rem; /* Reduce padding from 1rem to 0.5rem on mobile */
		overflow-y: hidden;  Prevent scrolling - content should fit 
	}
}

@media (max-width: 380px) {
	.body-row[b-0y8mtndnjb] {
		padding: 0.25rem; /* Minimal padding on very small screens */
	}
}

/* iOS Safari specific fixes for layout */
@supports (-webkit-touch-callout: none) {
	.main-layout-grid[b-0y8mtndnjb] {
		position: relative;
		overflow: hidden;
	}

	.body-row[b-0y8mtndnjb] {
		position: relative;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* Prevent horizontal expansion when keyboard appears */
	@media (max-width: 480px) {
		.body-row[b-0y8mtndnjb] {
			padding: 0.5rem 0.25rem; /* Reduce horizontal padding more aggressively on iOS */
		}
	}
}

.footer-row[b-0y8mtndnjb] {
	grid-area: footer;
	background-color: #e9ecef;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
	z-index: 1000;
	height: var(--footer-height-hidden);
}

.main-layout-grid.show-bottom-button .footer-row[b-0y8mtndnjb] {
	padding: var(--main-button-padding);
	height: var(--footer-height-visible);
}
/* /Pages/AA_Login.razor.rz.scp.css */
/* AA_Login.razor.css - Login page isolated styles */

/* Main login container */
.login-container[b-wbgfhlkas6] {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	background-color: var(--background-color-app);
	padding: 20px;
	padding-top: 60px;
}

/* Login header section */
.login-header[b-wbgfhlkas6] {
	text-align: center;
	margin-bottom: 40px;
}

.login-header h1[b-wbgfhlkas6] {
	font-size: 2rem;
	margin-bottom: 0;
	outline: none;
}

.login-header h2[b-wbgfhlkas6] {
	font-size: 1.2rem;
	margin-top: 5px;
	outline: none;
}

/* Login form container */
.login-form[b-wbgfhlkas6] {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 400px;
}

.login-form h3[b-wbgfhlkas6] {
	margin-bottom: 20px;
	font-weight: bold;
	outline: none;
}

/* Form elements */
.form-group[b-wbgfhlkas6] {
	width: 100%;
	margin-bottom: 15px;
}

.form-control[b-wbgfhlkas6] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px; /* Prevent zoom on iOS Safari */
}

/* Input with icons styling */
.input-with-icon[b-wbgfhlkas6] {
	position: relative;
}

.input-icon-container[b-wbgfhlkas6] {
	position: relative;
	display: flex;
	align-items: center;
}

.input-with-icons[b-wbgfhlkas6] {
	padding-left: 40px;
	padding-right: 40px;
}

.input-icon[b-wbgfhlkas6] {
	position: absolute;
	width: 20px;
	height: 20px;
	color: #666;
	pointer-events: none;
	z-index: 2;
}

.input-icon-left[b-wbgfhlkas6] {
	left: 12px;
}

.input-icon-right[b-wbgfhlkas6] {
	right: 12px;
	pointer-events: auto;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-toggle[b-wbgfhlkas6] {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	z-index: 10;
}

.password-toggle:hover[b-wbgfhlkas6] {
	color: var(--brand-primary-blue);
}

.password-toggle:focus[b-wbgfhlkas6] {
	outline: none;
}

.password-toggle:active[b-wbgfhlkas6] {
	transform: scale(0.95);
}

/* Forgot password link */
.forgot-password[b-wbgfhlkas6] {
	align-self: flex-start;
	margin-bottom: 20px;
}

.forgot-password a[b-wbgfhlkas6] {
	color: var(--brand-primary-blue);
	text-decoration: none;
}

/* Checkbox group styling */
.checkbox-group[b-wbgfhlkas6] {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	gap: 15px;
	margin-bottom: 20px;
	width: 100%;
}

.checkbox-item[b-wbgfhlkas6] {
	display: flex;
	align-items: center;
	gap: 8px;
}

.enhanced-checkbox[b-wbgfhlkas6] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	cursor: pointer;
}

.checkbox-item label[b-wbgfhlkas6] {
	cursor: pointer;
	user-select: none;
	font-size: 1rem;
}

/* Hidden checkbox - maintains layout space but invisible */
.hidden-checkbox[b-wbgfhlkas6] {
	visibility: hidden;
}

.hidden-checkbox input[b-wbgfhlkas6],
.hidden-checkbox label[b-wbgfhlkas6] {
	visibility: hidden;
	pointer-events: none;
}

/* Error message styling */
.alert-danger[b-wbgfhlkas6] {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.4;
}

/* Mobile-specific responsive adjustments */
@media (max-width: 480px) {
	.login-container[b-wbgfhlkas6] {
		padding: 15px;
		padding-top: 40px;
	}

	.login-header[b-wbgfhlkas6] {
		margin-bottom: 30px;
	}

	.login-header h1[b-wbgfhlkas6] {
		font-size: 1.6rem;
	}

	.login-header h2[b-wbgfhlkas6] {
		font-size: 1rem;
	}

	.form-group[b-wbgfhlkas6] {
		margin-bottom: 12px;
	}

	.form-control[b-wbgfhlkas6] {
		padding: 12px;
	}

	.input-with-icons[b-wbgfhlkas6] {
		padding-left: 42px;
		padding-right: 42px;
	}

	.input-icon[b-wbgfhlkas6] {
		width: 22px;
		height: 22px;
	}

	.enhanced-checkbox[b-wbgfhlkas6] {
		width: 22px;
		height: 22px;
		min-width: 22px;
		min-height: 22px;
	}

	.checkbox-group[b-wbgfhlkas6] {
		gap: 18px;
	}

	/* Mobile-specific error message styling */
	.alert-danger[b-wbgfhlkas6] {
		padding: 8px;
		margin-bottom: 12px;
		font-size: 0.9rem;
		line-height: 1.3;
	}
}
/* /Pages/CC_Main.razor.rz.scp.css */
/* Optional: Basic reset and box-sizing */
*[b-ou9930pbve] {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body[b-ou9930pbve] {
	font-family: var(--font-family-app);
	padding: 20px; /* Give some space around the container */
}

/* The CSS Grid Container */
#cc-container[b-ou9930pbve] {
	display: grid;
	grid-template-rows: 2fr 2fr 2fr 6fr;
	height: 100%; /* Give the container a defined height for 'fr' units to work clearly */
	gap: 5px; /* Optional: adds a small gap between rows */
}

/* Styling for all rows */
#cc-container > div[b-ou9930pbve] {
	display: flex; /* All rows are flex containers */
	font-weight: bold;
	/* The following alignment properties are overridden for row1 and row2 */
	align-items: start; /* Default for non-specific rows like row3, row4 if they were flex */
	justify-content: start; /* Default for non-specific rows */
}

/* Individual row styling with contrasting colors */
#row1[b-ou9930pbve] {
	flex-direction: column; /* Stack children (button and checkbox) vertically */
	align-items: center; /* Center children horizontally within the row */
	justify-content: center; /* Center children vertically within the row */
}

#row2[b-ou9930pbve] {
	flex-direction: column; /* Stack children (button and checkbox) vertically */
	align-items: center; /* Center children horizontally within the row */
	justify-content: center; /* Center children vertically within the row */
}

#row3[b-ou9930pbve] {
	flex-direction: column; /* Stack children (button and checkbox) vertically */
	align-items: center; /* Center children horizontally within the row */
	justify-content: center; /* Center children vertically within the row */
}

#row4[b-ou9930pbve] {
	/* Height will be determined by content for 'auto' */
	min-height: 50px; /* Give it a minimum height if content is very short or non-existent */
	flex-direction: column; /* Stack children vertically */
	align-items: flex-start; /* Align items to the start of the flex container */
	justify-content: flex-start; /* Align items to the start of the flex container */
	width: 100%; /* Ensure full width within grid */
	overflow: hidden; /* Prevent content from breaking out */
}

/* Active Job Component Styling */
#active-job[b-ou9930pbve] {
	width: calc(100% - 1rem); /* Account for left/right margins */
	max-width: calc(100% - 1rem); /* Ensure it doesn't exceed parent width */
	margin: 1rem 0.5rem 0 0.5rem;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--border-color-standard);
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-height: 120px;
	max-height: 300px; /* Prevent excessive growth */
	overflow-y: auto; /* Enable vertical scrolling within container */
	overflow-x: hidden; /* Prevent horizontal scrolling */
	transition: box-shadow 0.2s ease, transform 0.1s ease;
	/* Ensure content stays within container bounds */
	word-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Hover effect for non-touch devices */
@media (hover: hover) and (pointer: fine) {
	#active-job:hover[b-ou9930pbve] {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		transform: translateY(-1px);
	}
}

/* Mobile-specific styling for active job */
@media (max-width: 480px) {
	#active-job[b-ou9930pbve] {
		width: calc(100% - 0.5rem); /* Account for margins */
		max-width: calc(100% - 0.5rem); /* Account for margins */
		margin: 0.75rem 0.25rem 0 0.25rem;
		padding: 0.75rem;
		min-height: 100px;
		max-height: 250px; /* Smaller max height on mobile */
		border-radius: 8px;
	}
}

/* Extra small screens */
@media (max-width: 360px) {
	#active-job[b-ou9930pbve] {
		width: 100%; /* Full width on very small screens */
		max-width: 100%; /* Full width on very small screens */
		margin: 0.75rem 0 0 0;
		padding: 0.5rem;
		min-height: 80px;
		max-height: 200px; /* Even smaller on very small screens */
		border-radius: 6px;
	}
}

/* Ensure smooth scrolling on touch devices */
@media (hover: none) and (pointer: coarse) {
	#active-job[b-ou9930pbve] {
		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
		scroll-behavior: smooth;
	}
}

/* Styling for the checkbox and its label container */
.check-same-job[b-ou9930pbve] {
	display: flex; /* Make this a flex container */
	align-items: center; /* Vertically center the checkbox and label */
	justify-self: start;
	margin-top: 4px; /* Reduced top margin to better associate with button above */
	margin-left: 40px;
	height: 30px;
}

/* Additional spacing when punched-in time display is showing */
.check-same-job.with-punched-time[b-ou9930pbve] {
	margin-top: 50px; /* Extra space to account for the yellow timeclock overlay */
}

.check-same-job input[type='checkbox'][b-ou9930pbve] {
	width: 30px;
	height: 30px;
	/* margin-left is removed as the flex container handles spacing if needed via gap or margins on label */
}

.check-same-job label[b-ou9930pbve] {
	margin-left: 5px; /* Add a small space between the checkbox and the label */
}

/* Styling for the checkbox container in row4 */
.checkbox-container[b-ou9930pbve] {
	display: flex;
	flex-direction: column;
	gap: 10px; /* Space between checkbox items */
	width: 100%;
}

/* Punch container for positioning the punch button and punched-in time */
#punch-container[b-ou9930pbve] {
	position: relative; /* Set up for absolute positioning context */
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Punched-in time display */
#punched-in-time[b-ou9930pbve] {
	position: absolute;
	top: 100%; /* Position below the punch button */
	left: 0;
	right: 0;
	z-index: 10;
	transform: translateY(-1em); /* Overlap slightly with the button */
	padding: 0 3em; /* Add horizontal padding for mobile */
}

#timeclock[b-ou9930pbve] {
	display: flex;
	height: 40px;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 2px solid #15232d;
	border-radius: 12px;
	background-color: yellow;
	margin: 0 auto;
	min-width: 200px; /* Ensure minimum width for readability */
	max-width: 300px; /* Prevent it from getting too wide */
}

#timeclock p[b-ou9930pbve] {
	font-size: 1.2em;
	font-weight: 700;
	margin: 0;
	color: #000; /* Ensure text is readable on yellow background */
	white-space: nowrap; /* Prevent text wrapping */
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
	#punched-in-time[b-ou9930pbve] {
		padding: 0 1em; /* Reduce padding on smaller screens */
	}

	#timeclock[b-ou9930pbve] {
		min-width: 180px;
		height: 35px;
	}

	#timeclock p[b-ou9930pbve] {
		font-size: 1.1em;
	}
}

/* iPhone SE specific optimizations - 375px and below */
@media (max-width: 375px) {
	/* Optimize grid container for iPhone SE */
	#cc-container[b-ou9930pbve] {
		gap: 4px; /* Slightly larger gap for better visual separation */
		padding: 0 0.5rem; /* Add proper horizontal padding */
	}

	/* Optimize checkbox containers for iPhone SE */
	.check-same-job[b-ou9930pbve] {
		margin-top: 4px; /* Reduced top margin to better associate with button above */
		margin-left: 25px; /* Balanced left margin */
		margin-right: 10px; /* Add right margin for breathing room */
		height: 32px; /* Adequate container height */
		padding: 2px 4px; /* Add internal padding */
	}

	.check-same-job input[type='checkbox'][b-ou9930pbve] {
		width: 22px; /* Compact but usable checkbox size */
		height: 22px;
		margin-right: 6px; /* Space between checkbox and label */
		flex-shrink: 0; /* Prevent checkbox from shrinking */
	}

	.check-same-job label[b-ou9930pbve] {
		margin-left: 0; /* Remove margin since we use margin-right on checkbox */
		font-size: 0.9rem; /* Slightly smaller label text */
		line-height: 1.2; /* Tighter line height */
		flex-grow: 1; /* Allow label to take remaining space */
	}

	/* Optimize punched-in time display for iPhone SE */
	#punched-in-time[b-ou9930pbve] {
		padding: 0 0.75em; /* Balanced padding */
	}

	#timeclock[b-ou9930pbve] {
		min-width: 160px; /* Smaller minimum width */
		height: 32px; /* Smaller height */
	}

	#timeclock p[b-ou9930pbve] {
		font-size: 1.05em; /* Slightly smaller font */
	}

	/* Additional spacing adjustment when punched-in time is showing */
	.check-same-job.with-punched-time[b-ou9930pbve] {
		margin-top: 48px; /* Adequate space for timeclock overlay */
	}

	/* Adjust checkbox item styling for better fit (debug checkboxes) */
	.checkbox-item input[type='checkbox'][b-ou9930pbve] {
		width: 20px; /* Smaller for hidden debug checkboxes */
		height: 20px;
	}

	.checkbox-item label[b-ou9930pbve] {
		margin-left: 6px;
		font-size: 0.85rem;
	}
}

/* Extra small mobile devices - 360px and below */
@media (max-width: 360px) {
	/* Further optimize for very small screens */
	#cc-container[b-ou9930pbve] {
		gap: 3px; /* Minimal but adequate gap */
		padding: 0 0.25rem; /* Minimal but adequate horizontal padding */
	}

	.check-same-job[b-ou9930pbve] {
		margin-left: 20px; /* Adequate left margin */
		margin-right: 8px; /* Adequate right margin */
		margin-top: 8px; /* Adequate top margin */
		padding: 1px 3px; /* Minimal internal padding */
	}

	.check-same-job input[type='checkbox'][b-ou9930pbve] {
		width: 20px; /* Smaller checkbox for very small screens */
		height: 20px;
		margin-right: 5px; /* Adequate spacing */
	}

	.check-same-job label[b-ou9930pbve] {
		font-size: 0.85rem; /* Smaller label text for very small screens */
		line-height: 1.1; /* Tighter line height */
	}

	#timeclock[b-ou9930pbve] {
		min-width: 150px; /* Even smaller for very compact screens */
		height: 30px;
	}

	#timeclock p[b-ou9930pbve] {
		font-size: 1em; /* Smaller font for very small screens */
	}

	.check-same-job.with-punched-time[b-ou9930pbve] {
		margin-top: 42px; /* Adequate space for timeclock */
	}
}

/* Styling for individual checkbox items */
.checkbox-item[b-ou9930pbve] {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.checkbox-item input[type='checkbox'][b-ou9930pbve] {
	width: 30px;
	height: 30px;
}

.checkbox-item label[b-ou9930pbve] {
	margin-left: 10px;
	font-size: 1.1em;
}

/* Crew Setup Dialog Styling */
[b-ou9930pbve] .e-dialog .e-dlg-header {
	background-color: #f8f9fa;
	border-bottom: 2px solid #0056b3;
}

[b-ou9930pbve] .e-dialog .e-dlg-content {
	background-color: #ffffff;
}

[b-ou9930pbve] .e-dialog .e-footer-content {
	background-color: #f8f9fa;
	border-top: 1px solid #dee2e6;
}

[b-ou9930pbve] .e-dialog .btn {
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.2s ease;
}

[b-ou9930pbve] .e-dialog .btn-primary {
	background-color: #0056b3;
	border-color: #0056b3;
}

[b-ou9930pbve] .e-dialog .btn-primary:hover {
	background-color: #004494;
	border-color: #004494;
}

[b-ou9930pbve] .e-dialog .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

[b-ou9930pbve] .e-dialog .btn-secondary:hover {
	background-color: #545b62;
	border-color: #545b62;
}

/* Crew Setup Dialog Styling */
[b-ou9930pbve] .e-dialog .e-dlg-header {
	background-color: #f8f9fa;
	border-bottom: 2px solid #0056b3;
}

[b-ou9930pbve] .e-dialog .e-dlg-content {
	background-color: #ffffff;
}

[b-ou9930pbve] .e-dialog .e-footer-content {
	background-color: #f8f9fa;
	border-top: 1px solid #dee2e6;
}

[b-ou9930pbve] .e-dialog .btn {
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.2s ease;
}

[b-ou9930pbve] .e-dialog .btn-primary {
	background-color: #0056b3;
	border-color: #0056b3;
}

[b-ou9930pbve] .e-dialog .btn-primary:hover {
	background-color: #004494;
	border-color: #004494;
}

[b-ou9930pbve] .e-dialog .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

[b-ou9930pbve] .e-dialog .btn-secondary:hover {
	background-color: #545b62;
	border-color: #545b62;
}
/* /Pages/DD_FlexJobForm.razor.rz.scp.css */
/* Container for the entire flex job form page */
.flex-job-container[b-w3h1pdetzn] {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
	box-sizing: border-box;
}

/* Instructions section */
#instructions[b-w3h1pdetzn] {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background-color: var(--background-color-light);
	border-radius: var(--corner-radius);
	border: 1px solid var(--border-color-subtle);
}

#instructions p[b-w3h1pdetzn] {
	margin: 0.5rem 0;
	font-size: 0.9rem;
	color: var(--text-color-secondary);
	line-height: 1.4;
}

#instructions p:first-child[b-w3h1pdetzn] {
	margin-top: 0;
}

#instructions p:last-child[b-w3h1pdetzn] {
	margin-bottom: 0;
}

/* Form container */
.form-container[b-w3h1pdetzn] {
	flex: 1;
}

/* Form fields container */
.form-fields[b-w3h1pdetzn] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Syncfusion TextBox customizations */
.e-custom[b-w3h1pdetzn] {
	width: 100%;
}

/* Enhanced Syncfusion TextBox styling for mobile */
.e-custom .e-input[b-w3h1pdetzn],
.e-custom .e-float-input input[b-w3h1pdetzn],
.e-custom .e-control-wrapper input[b-w3h1pdetzn] {
	font-size: 1rem; /* Will scale with global responsive system */
	padding: 0.75rem;
	border-radius: 8px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus states for better mobile interaction */
.e-custom .e-input:focus[b-w3h1pdetzn],
.e-custom .e-float-input input:focus[b-w3h1pdetzn],
.e-custom .e-control-wrapper input:focus[b-w3h1pdetzn] {
	outline: none;
	box-shadow: 0 0 0 3px rgba(246, 174, 45, 0.25); /* Brand orange with transparency */
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	.e-custom .e-input[b-w3h1pdetzn],
	.e-custom .e-float-input input[b-w3h1pdetzn],
	.e-custom .e-control-wrapper input[b-w3h1pdetzn] {
		/* Ensure adequate touch targets */
		min-height: 44px;
		touch-action: manipulation;
		/* Improve touch responsiveness */
		-webkit-tap-highlight-color: transparent;
	}

	.form-fields[b-w3h1pdetzn] {
		/* Ensure adequate spacing between touch targets */
		gap: max(0.6rem, 8px);
	}
}

/* Mobile-specific optimizations - Progressive Enhancement */

/* Standard mobile devices (tablets and large phones) */
@media (max-width: 768px) {
	.flex-job-container[b-w3h1pdetzn] {
		padding: 0.75rem;
	}

	#instructions[b-w3h1pdetzn] {
		margin-bottom: 1rem;
		padding: 0.75rem;
	}

	#instructions p[b-w3h1pdetzn] {
		font-size: 0.85rem;
	}

	.form-fields[b-w3h1pdetzn] {
		gap: 0.75rem;
	}
}

/* Mobile phones in portrait - 480px and below */
@media (max-width: 480px) {
	.flex-job-container[b-w3h1pdetzn] {
		padding: 0.5rem;
	}

	#instructions[b-w3h1pdetzn] {
		margin-bottom: 0.75rem;
		padding: 0.5rem;
	}

	#instructions p[b-w3h1pdetzn] {
		font-size: 0.8rem;
		line-height: 1.3;
		margin: 0.4rem 0;
	}

	.form-fields[b-w3h1pdetzn] {
		gap: 0.5rem;
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	.flex-job-container[b-w3h1pdetzn] {
		padding: 0.4rem;
		/* Account for PWA installation - more vertical space available */
		min-height: calc(
			100vh - var(--header-height) - var(--footer-height-visible)
		);
	}

	#instructions[b-w3h1pdetzn] {
		margin-bottom: 0.6rem;
		padding: 0.4rem;
	}

	#instructions p[b-w3h1pdetzn] {
		font-size: 0.75rem;
		line-height: 1.25;
		margin: 0.3rem 0;
	}

	.form-fields[b-w3h1pdetzn] {
		gap: 0.4rem;
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	.flex-job-container[b-w3h1pdetzn] {
		padding: 0.3rem;
	}

	#instructions[b-w3h1pdetzn] {
		margin-bottom: 0.5rem;
		padding: 0.3rem;
	}

	#instructions p[b-w3h1pdetzn] {
		margin: 0.25rem 0;
	}

	.form-fields[b-w3h1pdetzn] {
		gap: 0.35rem;
	}
}

/* iOS Safari specific optimizations */
@supports (-webkit-touch-callout: none) {
	.flex-job-container[b-w3h1pdetzn] {
		/* Prevent horizontal expansion when keyboard appears */
		position: relative;
		overflow-x: hidden;
	}

	.e-custom .e-input[b-w3h1pdetzn],
	.e-custom .e-float-input input[b-w3h1pdetzn],
	.e-custom .e-control-wrapper input[b-w3h1pdetzn] {
		/* iOS Safari keyboard fixes */
		-webkit-appearance: none;
		transform: translateZ(0);
		box-sizing: border-box;
	}
}

/* PWA-specific optimizations */
@media (display-mode: standalone) {
	.flex-job-container[b-w3h1pdetzn] {
		/* Take advantage of additional space when installed as PWA */
		min-height: calc(
			100vh - var(--header-height) - var(--footer-height-visible)
		);
		padding-top: 0.5rem;
	}

	/* More generous spacing when we have extra vertical space */
	@media (max-width: 375px) {
		.form-fields[b-w3h1pdetzn] {
			gap: 0.6rem;
		}

		#instructions[b-w3h1pdetzn] {
			margin-bottom: 0.8rem;
		}
	}
}

/* Dark mode support for non-Syncfusion elements */
@media (prefers-color-scheme: dark) {
	#instructions[b-w3h1pdetzn] {
		background-color: var(--background-color-medium-dark);
		border-color: var(--border-color-light-gray);
	}

	/* Dark mode for enhanced Syncfusion styling */
	.e-custom .e-input:focus[b-w3h1pdetzn],
	.e-custom .e-float-input input:focus[b-w3h1pdetzn],
	.e-custom .e-control-wrapper input:focus[b-w3h1pdetzn] {
		box-shadow: 0 0 0 3px rgba(135, 191, 255, 0.25); /* Brand secondary blue for dark mode */
	}
}
/* /Pages/EE_SelectJob.razor.rz.scp.css */
/* EE_SelectJob.razor.css */

.select-job-container[b-3c7kc9fxng] {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr; /* Equal height distribution */
	gap: 1rem;
	padding: 1rem;
	padding-bottom: 4em; /* Add 4em bottom margin as requested */
	background-color: var(
		--background-color-app
	); /* Use CSS variable for consistency */
	/* Calculate height: full viewport minus header minus bottom margin */
	height: calc(100dvh - var(--header-height) - 4em);
	/* Align buttons to top and stretch to fill available space */
	align-content: start;
	align-items: stretch;
}

/* Make buttons fill available height within the grid */
.select-job-container[b-3c7kc9fxng]  .main-button-wrapper {
	height: 100% !important; /* Override component's height setting */
	min-height: clamp(
		44px,
		8vh,
		120px
	); /* Responsive height with touch-friendly minimum */
}

/* Ensure button content scales appropriately with height */
.select-job-container[b-3c7kc9fxng]  .mainbutton {
	height: 100%;
	font-size: clamp(1.1rem, 3vh, 2rem); /* Increased font sizes */
}

/* Mobile-specific optimizations for better iPhone SE experience */
@media (max-width: 480px) {
	.select-job-container[b-3c7kc9fxng] {
		gap: 0.75rem;
		padding: 0.75rem;
		padding-top: 1rem;
		padding-bottom: 3em; /* Smaller bottom margin on mobile */
		/* Calculate height: full viewport minus header minus bottom margin */
		height: calc(100dvh - var(--header-height) - 3em);
	}

	/* Smaller buttons on mobile but still responsive to height */
	.select-job-container[b-3c7kc9fxng]  .main-button-wrapper {
		min-height: clamp(40px, 6vh, 80px); /* Smaller range for mobile */
	}

	.select-job-container[b-3c7kc9fxng]  .mainbutton {
		font-size: clamp(1rem, 2.5vh, 1.6rem); /* Increased mobile font sizes */
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	.select-job-container[b-3c7kc9fxng] {
		gap: 0.6rem;
		padding: 0.6rem;
		/* Account for PWA installation - optimize for available space */
		padding-top: 0.8rem;
		padding-bottom: 2.5em; /* Smaller bottom margin for iPhone SE */
		/* Calculate height: full viewport minus header minus bottom margin */
		height: calc(100dvh - var(--header-height) - 2.5em);
	}

	/* Even smaller buttons on iPhone SE but maintain touch targets */
	.select-job-container[b-3c7kc9fxng]  .main-button-wrapper {
		min-height: clamp(44px, 5vh, 70px); /* Maintain 44px minimum for touch */
	}

	.select-job-container[b-3c7kc9fxng]  .mainbutton {
		font-size: clamp(
			0.9rem,
			2.2vh,
			1.4rem
		); /* Increased iPhone SE font sizes */
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	.select-job-container[b-3c7kc9fxng] {
		gap: 0.5rem;
		padding: 0.5rem;
		padding-top: 0.7rem;
		padding-bottom: 2em; /* Minimal bottom margin for very small screens */
		/* Calculate height: full viewport minus header minus bottom margin */
		height: calc(100dvh - var(--header-height) - 2em);
	}

	/* Minimal but functional buttons on very small screens */
	.select-job-container[b-3c7kc9fxng]  .main-button-wrapper {
		min-height: clamp(44px, 4.5vh, 60px); /* Maintain touch targets */
	}

	.select-job-container[b-3c7kc9fxng]  .mainbutton {
		font-size: clamp(
			0.85rem,
			2vh,
			1.3rem
		); /* Increased very small screen font sizes */
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	.select-job-container[b-3c7kc9fxng] {
		/* Ensure adequate spacing between touch targets */
		gap: max(0.6rem, 8px);
		/* Optimize for thumb navigation */
		padding-bottom: 1rem;
	}

	/* Ensure touch-friendly minimum heights on all touch devices */
	.select-job-container[b-3c7kc9fxng]  .main-button-wrapper {
		min-height: max(
			44px,
			5vh
		) !important; /* Enforce 44px minimum for accessibility */
	}
}
/* /Pages/ERROR.razor.rz.scp.css */
.error-container[b-qa7rtrt0sv] {
	display: grid;
	grid-template-rows: auto 2fr auto 1fr;
	gap: 1.25rem; /* Using rem for responsive scaling */
	padding: 1.25rem; /* Using rem for responsive scaling */
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-family-app);
	height: 100%;
	max-height: 100%;
	box-sizing: border-box;
}

.error-title[b-qa7rtrt0sv] {
	color: #d32f2f;
	margin: 0;
	font-weight: bold;
	font-size: 1.5rem; /* Using rem for global responsive scaling */
	grid-row: 1;
}

.error-message-container[b-qa7rtrt0sv] {
	background-color: #ffebee;
	border: 1px solid #f44336;
	border-radius: 0.5rem; /* Using rem for responsive scaling */
	padding: 1rem; /* Using rem for responsive scaling */
	text-align: left;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	grid-row: 2;
	overflow-y: auto;
	min-height: 0; /* Important for grid items to shrink */
	max-height: 100%; /* Ensure it doesn't exceed grid area */
	/* Ensure proper spacing from container edges */
	margin: 0 0.25rem;
	/* Cursor indicates clickable */
	cursor: pointer;
	/* Smooth transition for expansion */
	transition: all 0.3s ease-in-out;
	/* Relative positioning for close button */
	position: relative;
}

/* Expanded state - full viewport overlay */
.error-message-container.expanded[b-qa7rtrt0sv] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 2rem;
	z-index: 1500; /* Above overlays (1000) but below global spinner (9999) */
	border-radius: 0; /* Remove border radius in full screen */
	box-shadow: none; /* Remove shadow in full screen */
	grid-row: unset; /* Remove grid positioning */
	/* Enhanced styling for full screen */
	background-color: #fff5f5; /* Slightly different background for expanded view */
	border: 3px solid #f44336; /* Thicker border for emphasis */
	/* Ensure content is scrollable */
	overflow-y: auto;
	overflow-x: hidden;
}

.error-message[b-qa7rtrt0sv] {
	color: #d32f2f;
	font-family: 'Courier New', Courier, monospace;
	word-wrap: break-word;
	margin: 0;
	white-space: pre-wrap;
	font-size: 0.9rem; /* Using rem for global responsive scaling */
	line-height: 1.4;
}

/* Enhanced error message styling in expanded view */
.error-message-container.expanded .error-message[b-qa7rtrt0sv] {
	font-size: 1rem; /* Larger font in expanded view */
	line-height: 1.5; /* Better readability */
	padding-right: 3rem; /* Space for close button */
}

/* Close button styling */
.error-close-button[b-qa7rtrt0sv] {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #f44336;
	color: white;
	border: none;
	border-radius: 50%;
	font-size: 1.25rem;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
	z-index: 1501; /* Above the expanded container */
	/* Ensure minimum touch target size */
	min-width: 44px;
	min-height: 44px;
}

.error-close-button:hover[b-qa7rtrt0sv] {
	background-color: #d32f2f;
	transform: scale(1.05);
}

.error-close-button:active[b-qa7rtrt0sv] {
	transform: scale(0.95);
}

/* Focus styles for accessibility */
.error-message-container:focus[b-qa7rtrt0sv] {
	outline: 2px solid #2196f3;
	outline-offset: 2px;
}

.error-close-button:focus[b-qa7rtrt0sv] {
	outline: 2px solid #2196f3;
	outline-offset: 2px;
}

/* Custom scrollbar styling for webkit browsers */
.error-message-container[b-qa7rtrt0sv]::-webkit-scrollbar {
	width: 8px;
}

.error-message-container[b-qa7rtrt0sv]::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.error-message-container[b-qa7rtrt0sv]::-webkit-scrollbar-thumb {
	background: #f44336;
	border-radius: 4px;
}

.error-message-container[b-qa7rtrt0sv]::-webkit-scrollbar-thumb:hover {
	background: #d32f2f;
}

.contact-info[b-qa7rtrt0sv] {
	background-color: #f5f5f5;
	border-radius: 0.5rem; /* Using rem for responsive scaling */
	padding: 1rem; /* Using rem for responsive scaling */
	border: 1px solid #ddd;
	grid-row: 3;
	/* Ensure proper spacing from container edges */
	margin: 0 0.25rem;
}

.contact-info p[b-qa7rtrt0sv] {
	margin: 10px 0;
	color: #333;
	line-height: 1.5;
}

.contact-info strong[b-qa7rtrt0sv] {
	color: #1976d2;
	font-weight: 600;
}

.error-image-container[b-qa7rtrt0sv] {
	display: flex;
	justify-content: center;
	align-items: center; /* Center vertically within the grid area */
	width: 80%;
	max-width: 400px; /* Reduced max-width for better mobile experience */
	margin: 0 auto;
	grid-row: 4;
	/* Constrain height to prevent image from taking too much space */
	max-height: 100%;
	overflow: hidden;
}

.error-image[b-qa7rtrt0sv] {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%; /* Ensure image doesn't exceed container height */
	opacity: 0.85;
	object-fit: contain; /* Maintain aspect ratio while fitting container */
}

/* Mobile devices (tablets and large phones) */
@media (max-width: 768px) {
	.error-container[b-qa7rtrt0sv] {
		padding: 1rem; /* Using rem for responsive scaling */
		margin: 0.625rem; /* Using rem for responsive scaling */
		height: calc(100% - 1.25rem); /* Account for margin */
		gap: 1rem; /* Reduced gap for mobile */
	}

	.error-title[b-qa7rtrt0sv] {
		font-size: 1.3rem; /* Using rem for global responsive scaling */
	}

	.error-message[b-qa7rtrt0sv] {
		font-size: 0.8rem; /* Using rem for global responsive scaling */
	}

	.error-image-container[b-qa7rtrt0sv] {
		width: 85%;
		max-width: 300px; /* Further constrain image size on mobile */
	}

	.error-message-container[b-qa7rtrt0sv],
	.contact-info[b-qa7rtrt0sv] {
		margin: 0; /* Remove side margins on mobile for more space */
		padding: 0.875rem; /* Slightly reduced padding */
	}

	/* Expanded view optimizations for tablets/large phones */
	.error-message-container.expanded[b-qa7rtrt0sv] {
		padding: 1.5rem;
	}

	.error-message-container.expanded .error-message[b-qa7rtrt0sv] {
		font-size: 0.95rem;
	}

	.error-close-button[b-qa7rtrt0sv] {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.125rem;
	}
}

/* Mobile phones (standard mobile devices) */
@media (max-width: 480px) {
	.error-container[b-qa7rtrt0sv] {
		padding: 0.75rem;
		margin: 0.5rem;
		height: calc(100% - 1rem);
		gap: 0.75rem; /* Further reduced gap */
	}

	.error-title[b-qa7rtrt0sv] {
		font-size: 1.25rem;
	}

	.error-message[b-qa7rtrt0sv] {
		font-size: 0.75rem;
		line-height: 1.3; /* Tighter line height for mobile */
	}

	.error-image-container[b-qa7rtrt0sv] {
		width: 90%;
		max-width: 250px;
	}

	.error-message-container[b-qa7rtrt0sv],
	.contact-info[b-qa7rtrt0sv] {
		padding: 0.75rem;
		border-radius: 0.375rem; /* Slightly smaller border radius */
	}

	/* Expanded view optimizations for mobile phones */
	.error-message-container.expanded[b-qa7rtrt0sv] {
		padding: 1.25rem;
	}

	.error-message-container.expanded .error-message[b-qa7rtrt0sv] {
		font-size: 0.9rem;
		padding-right: 2.5rem; /* Adjust for smaller close button */
	}

	.error-close-button[b-qa7rtrt0sv] {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
		top: 0.75rem;
		right: 0.75rem;
	}

	.contact-info p[b-qa7rtrt0sv] {
		margin: 0.5rem 0; /* Reduced margin between paragraphs */
		line-height: 1.4;
	}
}

/* iPhone SE and similar small devices (375px and below) */
@media (max-width: 375px) {
	.error-container[b-qa7rtrt0sv] {
		padding: 0.625rem; /* ~10px at 16px root font-size */
		margin: 0.375rem; /* ~6px at 16px root font-size */
		height: calc(100% - 0.75rem);
		gap: 0.625rem; /* Minimal gap for maximum content space */
		/* Consider PWA context - address bar space is available */
	}

	.error-title[b-qa7rtrt0sv] {
		font-size: 1.125rem; /* Compact but readable */
	}

	.error-message[b-qa7rtrt0sv] {
		font-size: 0.7rem; /* Smaller but still readable */
		line-height: 1.25; /* Tighter line height */
	}

	.error-image-container[b-qa7rtrt0sv] {
		width: 95%;
		max-width: 200px; /* Significantly constrain image on iPhone SE */
		/* Image gets minimal space (1fr out of 3fr+auto+1fr) */
	}

	.error-message-container[b-qa7rtrt0sv],
	.contact-info[b-qa7rtrt0sv] {
		padding: 0.625rem;
		border-radius: 0.25rem; /* Smaller border radius for compact design */
	}

	/* Expanded view optimizations for iPhone SE */
	.error-message-container.expanded[b-qa7rtrt0sv] {
		padding: 1rem; /* Minimal padding for maximum content space */
	}

	.error-message-container.expanded .error-message[b-qa7rtrt0sv] {
		font-size: 0.85rem; /* Smaller but readable on iPhone SE */
		line-height: 1.4; /* Tighter line height for more content */
		padding-right: 2.25rem; /* Space for compact close button */
	}

	.error-close-button[b-qa7rtrt0sv] {
		width: 1.875rem; /* 30px at 16px root font-size */
		height: 1.875rem;
		font-size: 0.875rem;
		top: 0.625rem;
		right: 0.625rem;
		/* Ensure still meets 44px touch target minimum */
		min-width: 44px;
		min-height: 44px;
	}

	.contact-info p[b-qa7rtrt0sv] {
		margin: 0.375rem 0; /* Minimal margin between paragraphs */
		line-height: 1.3;
		font-size: 0.875rem; /* Slightly smaller contact info text */
	}

	.contact-info strong[b-qa7rtrt0sv] {
		font-size: 0.9rem; /* Ensure phone numbers remain readable */
	}
}

/* Very small mobile devices (360px and below) */
@media (max-width: 360px) {
	.error-container[b-qa7rtrt0sv] {
		padding: 0.5rem;
		margin: 0.25rem;
		height: calc(100% - 0.5rem);
		gap: 0.5rem; /* Absolute minimal gap */
	}

	.error-title[b-qa7rtrt0sv] {
		font-size: 1rem;
	}

	.error-message[b-qa7rtrt0sv] {
		font-size: 0.65rem;
		line-height: 1.2;
	}

	.error-image-container[b-qa7rtrt0sv] {
		width: 100%;
		max-width: 180px; /* Very constrained image */
	}

	.error-message-container[b-qa7rtrt0sv],
	.contact-info[b-qa7rtrt0sv] {
		padding: 0.5rem;
	}

	/* Expanded view optimizations for very small devices */
	.error-message-container.expanded[b-qa7rtrt0sv] {
		padding: 0.875rem; /* Minimal padding for tiny screens */
	}

	.error-message-container.expanded .error-message[b-qa7rtrt0sv] {
		font-size: 0.8rem; /* Compact but still readable */
		line-height: 1.3;
		padding-right: 2rem;
	}

	.error-close-button[b-qa7rtrt0sv] {
		width: 1.75rem; /* Very compact but still 44px minimum */
		height: 1.75rem;
		font-size: 0.8rem;
		top: 0.5rem;
		right: 0.5rem;
		min-width: 44px;
		min-height: 44px;
	}

	.contact-info p[b-qa7rtrt0sv] {
		margin: 0.25rem 0;
		font-size: 0.8rem;
	}

	.contact-info strong[b-qa7rtrt0sv] {
		font-size: 0.85rem;
	}
}
/* /Pages/FF_SelJob.razor.rz.scp.css */
#ff[b-qnmyy0nj5i] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}
/* /Pages/FF_SelJob2.razor.rz.scp.css */
#ff[b-nitcubnazr] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* /Pages/GG_ConfirmJob.razor.rz.scp.css */
#gg[b-g3o2owkj6m] {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

#job[b-g3o2owkj6m] {
	margin-top: 1em;
}

/* Override JobComp styling for GG_ConfirmJob page - optimized for full information display */
#gg #job #flex-container[b-g3o2owkj6m] {
	/* Remove height constraints for better readability */
	max-height: none;
	overflow: visible;
	/* Increase spacing for better information hierarchy */
	gap: 1rem;
	/* Enhanced background for better contrast and readability */
	background-color: rgba(255, 255, 255, 0.95);
	border: 2px solid var(--border-color-standard);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 0;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Enhanced typography for GG_ConfirmJob */
#gg #job #flex-container h3[b-g3o2owkj6m] {
	font-size: 1.4rem;
	margin-bottom: 1rem;
	text-align: center;
	color: var(--brand-primary-blue);
	border-bottom: 2px solid var(--brand-primary-blue);
	padding-bottom: 0.75rem;
}

/* Better spacing and readability for job information */
#gg #job #flex-container div[b-g3o2owkj6m] {
	padding: 0.5rem 0;
	font-size: 1.1rem;
	line-height: 1.5;
	/* Enhanced contrast for better readability */
	color: var(--text-color-dark);
}

/* Enhanced label styling for GG_ConfirmJob Full mode */
#gg #job #flex-container .label[b-g3o2owkj6m] {
	font-weight: 700;
	color: var(--brand-primary-blue);
	margin-right: 0.75rem;
	display: inline-block;
	min-width: 140px; /* Wider labels for better alignment in Full mode */
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Work Order Number - more prominent on confirmation page */
#gg #job #flex-container div:first-of-type[b-g3o2owkj6m] {
	font-size: 1.25rem;
	font-weight: 600;
	background-color: rgba(135, 191, 255, 0.15);
	padding: 0.75rem;
	border-radius: 8px;
	border-left: 4px solid var(--brand-primary-blue);
	margin-bottom: 0.5rem;
}

/* Job description - enhanced for confirmation page */
#gg #job #flex-container div:nth-of-type(2)[b-g3o2owkj6m] {
	font-size: 1.15rem;
	font-weight: 500;
	background-color: rgba(135, 191, 255, 0.1);
	padding: 1rem;
	border-radius: 8px;
	border-left: 4px solid var(--brand-secondary-blue);
	margin: 0.5rem 0;
}

/* PO Number and Customer information - clear hierarchy */
#gg #job #flex-container div:nth-of-type(n + 3)[b-g3o2owkj6m] {
	font-size: 1.05rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(25, 53, 73, 0.15);
	background-color: rgba(255, 255, 255, 0.3);
	padding-left: 0.5rem;
	border-radius: 4px;
	margin: 0.25rem 0;
}

/* Last item - remove bottom border */
#gg #job #flex-container div:last-of-type[b-g3o2owkj6m] {
	border-bottom: none;
}

/* Mobile optimizations for GG_ConfirmJob */
@media (max-width: 480px) {
	#gg #job #flex-container[b-g3o2owkj6m] {
		padding: 1rem;
		margin: 0 0.5rem;
		gap: 0.75rem;
	}

	#gg #job #flex-container h3[b-g3o2owkj6m] {
		font-size: 1.2rem;
		margin-bottom: 0.75rem;
		padding-bottom: 0.5rem;
	}

	#gg #job #flex-container div[b-g3o2owkj6m] {
		font-size: 1rem;
		padding: 0.4rem 0;
	}

	#gg #job #flex-container div:first-of-type[b-g3o2owkj6m] {
		font-size: 1.1rem;
		padding: 0.6rem;
	}

	#gg #job #flex-container div:nth-of-type(2)[b-g3o2owkj6m] {
		font-size: 1.05rem;
		padding: 0.75rem;
		margin: 0.4rem 0;
	}

	#gg #job #flex-container div:nth-of-type(n + 3)[b-g3o2owkj6m] {
		font-size: 0.95rem;
		padding: 0.4rem;
		margin: 0.2rem 0;
	}

	/* Mobile label adjustments for GG_ConfirmJob */
	#gg #job #flex-container .label[b-g3o2owkj6m] {
		min-width: 110px;
		font-size: 0.9rem;
		margin-right: 0.5rem;
		letter-spacing: 0.3px;
	}
}

/* Extra small screens - Enhanced for iPhone SE and similar */
@media (max-width: 360px) {
	#gg #job #flex-container[b-g3o2owkj6m] {
		padding: 0.75rem;
		margin: 0 0.25rem;
		gap: 0.5rem; /* Slightly tighter spacing for very small screens */
	}

	#gg #job #flex-container h3[b-g3o2owkj6m] {
		font-size: 1.1rem;
		margin-bottom: 0.5rem; /* Reduced margin for compact layout */
	}

	#gg #job #flex-container div:first-of-type[b-g3o2owkj6m] {
		font-size: 1rem;
		padding: 0.5rem; /* Slightly reduced padding */
	}

	#gg #job #flex-container div:nth-of-type(2)[b-g3o2owkj6m] {
		font-size: 1rem;
		padding: 0.6rem; /* Slightly reduced padding */
	}

	#gg #job #flex-container div:nth-of-type(n + 3)[b-g3o2owkj6m] {
		padding: 0.3rem; /* Reduced padding for additional info */
		margin: 0.15rem 0; /* Tighter margins */
	}

	/* Extra small screen label adjustments */
	#gg #job #flex-container .label[b-g3o2owkj6m] {
		min-width: 90px;
		font-size: 0.85rem;
		display: block;
		margin-bottom: 0.25rem;
		margin-right: 0;
	}
}

[b-g3o2owkj6m] .e-dialog {
	max-width: 100vw !important;
	max-height: 100vh !important;
}

[b-g3o2owkj6m] .e-dlg-content {
	padding: 1em;
}

[b-g3o2owkj6m] .e-dlg-header-content {
	padding: 0.5em;
	background-color: var(--sf-primary);
	color: white;
}

[b-g3o2owkj6m] .e-dlg-header {
	font-size: 1.2em;
	font-weight: bold;
}

[b-g3o2owkj6m] .e-footer-content {
	padding: 0.5em;
	text-align: center;
}

/* Mobile optimizations for dialog */
@media (max-width: 480px) {
	[b-g3o2owkj6m] .e-dlg-content {
		padding: 0.75em; /* Slightly reduced padding on mobile */
		font-size: 0.95rem; /* Leverages global responsive scaling */
	}

	[b-g3o2owkj6m] .e-dlg-header {
		font-size: 1.1em; /* Slightly smaller header on mobile */
	}

	[b-g3o2owkj6m] .e-footer-content {
		padding: 0.4em; /* Reduced footer padding on mobile */
	}
}

/* iPhone SE and smaller dialog optimizations */
@media (max-width: 375px) {
	[b-g3o2owkj6m] .e-dlg-content {
		padding: 0.6em; /* More compact padding for iPhone SE */
		font-size: 0.9rem; /* Smaller text for better fit */
		line-height: 1.4; /* Improved readability */
	}

	[b-g3o2owkj6m] .e-dlg-header {
		font-size: 1em; /* Compact header for small screens */
		padding: 0.4em; /* Reduced header padding */
	}

	[b-g3o2owkj6m] .e-footer-content {
		padding: 0.3em; /* Minimal footer padding */
	}

	/* Ensure dialog button is touch-friendly */
	[b-g3o2owkj6m] .e-btn {
		min-height: 44px; /* Minimum touch target size */
		padding: 0.5em 1em; /* Adequate padding for touch */
	}
}
/* /Pages/HH_EnterTimes.razor.rz.scp.css */
/* Existing Styles from HH_EnterTimes.razor.css */
#mm_pad[b-c58plzf8qj] {
	display: grid;
	grid-template-rows: auto auto auto 1fr; /* Defines rows for header, date, type, and then time entry/keypad */
	height: 100%; /* Ensure it takes full available height within its parent */
	/* overflow: auto; /* Might be better on specific scrollable sections if needed */
}

#mm-top-row[b-c58plzf8qj] {
	display: grid;
	grid-template-columns: 1fr; /* Single column to stack children */
	/* grid-template-rows: auto auto; /* Implicitly, rows will be auto based on content */
	align-content: start;
	row-gap: 5px; /* This will be the vertical gap between "Entering for" and "Work Order Desc" */
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 1em;
	padding-right: 1em;
}

/* Style for the direct children of #mm-top-row if they are not already .row-content */
/* If the structure is <div id="mm-top-row"> <div>...</div> <div>...</div> </div> */
/* you might not need this, but if it's <div id="mm-top-row"> <actual_content_1/> <actual_content_2/> </div> */
/* then this might be useful to ensure they behave as blocks. */
#mm-top-row > div[b-c58plzf8qj] {
	width: 100%; /* Ensure they take full width to stack properly */
}

#mm-top-row .row-content[b-c58plzf8qj] {
	font-size: 0.8em;
	line-height: 1.4em;
	padding: 2px 0.75em; /* Reduced vertical padding a bit */
	/* text-align: left; /* This is fine */
}

#mm-top-row .row-content-enteringfor[b-c58plzf8qj] {
	min-height: 25px;
	padding: 8px 12px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 4px;
	text-align: left; /* Changed to left to match your screenshot */
	/* display: grid; /* Not needed if it's just a span inside */
	/* align-content: center; /* Not needed for single line text */
}

#keypad[b-c58plzf8qj] {
	/* This is for the TimeEntryComp's keypad section */
	margin-top: 2px;
	min-height: 45px;
}

#mm_timelist[b-c58plzf8qj] {
	/* This is for the "Show Related Times" overlay */
	overflow: auto;
}

/* Styles for the SfDialog content - optimized for mobile */
#time-entry-dialog-content[b-c58plzf8qj] {
	/* This ID is for the content *inside* the SfDialog */
	padding: 15px;
	display: flex; /* Using flex for better layout of common-crew and split-crew */
	flex-direction: column;
	gap: 15px; /* Reduced space between common and split crew sections for mobile */
	height: 100%; /* Take full available height */
	overflow-y: auto; /* Allow scrolling if needed */
}

#time-entry-dialog-content h4[b-c58plzf8qj] {
	/* This was for a different dialog, adjust if needed for this one */
	margin-bottom: 20px;
}

/* Styling for sections within the SfDialog */
#common-crew-dialog[b-c58plzf8qj] {
	/* Renamed from #common-crew to be specific to dialog */
	background-color: #cce7ff; /* Light blue background */
	border: 1px solid #007bff;
	padding: 15px;
	border-radius: 8px;
	cursor: pointer;
	min-height: 120px; /* Maintain taller height */
}

#common-crew-dialog h5[b-c58plzf8qj] {
	margin-top: 0;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	color: #0056b3;
	padding: 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

#common-crew-dialog h5:hover[b-c58plzf8qj] {
	background-color: rgba(255, 193, 7, 0.3);
}

#common-crew-dialog .emp-item-dialog[b-c58plzf8qj] {
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#split-crew-dialog[b-c58plzf8qj] {
	background-color: #ffccdd; /* Light red/pink background */
	border: 1px solid #dc3545;
	padding: 15px;
	border-radius: 8px;
	min-height: 120px; /* Maintain taller height */
}

#split-crew-dialog h5[b-c58plzf8qj] {
	margin-top: 0;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	color: #721c24;
}

#split-crew-dialog .emp-item-dialog[b-c58plzf8qj] {
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#split-crew-dialog .emp-item-dialog span[b-c58plzf8qj] {
	flex-grow: 1;
	padding: 4px;
	border-radius: 3px;
	transition: background-color 0.2s;
}

#split-crew-dialog .emp-item-dialog span:hover[b-c58plzf8qj] {
	background-color: rgba(255, 193, 7, 0.3);
}

/* Checkmark styling */
.checkmark[b-c58plzf8qj] {
	color: #28a745; /* Green checkmark */
	font-weight: bold;
	font-size: 1.2em;
}

.checkmark-placeholder[b-c58plzf8qj] {
	width: 1.2em; /* Same width as checkmark to maintain alignment */
	height: 1.2em;
}

/* This was for #split-crew input[type="checkbox"], not directly applicable now */
/* We'll handle selection highlighting via .selected class */

/* General styling for selected items/areas in the dialog */
.dialog-selection-area.selected[b-c58plzf8qj] {
	border: 3px solid #ffc107 !important; /* Thicker yellow border for selected section */
	box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.emp-item-dialog.selected[b-c58plzf8qj] {
	background-color: #fff3cd !important; /* Light yellow background for selected individual */
	border: 2px solid var(--brand-primary-blue-dark) !important;
}

.emp-item-dialog.selected span[b-c58plzf8qj] {
	font-weight: bold; /* Bold the employee name when selected */
}

/* This was .emp-item, making it specific for dialog items if needed */
/* .emp-item-dialog {
  display: flex;
  justify-content: space-between !important;
} */

#punched-in[b-c58plzf8qj] {
	/* For the "Punched In at:" text */
	text-align: center;
	margin-top: 4em;
	margin-bottom: 8em;
}

.overlay-full-width[b-c58plzf8qj] {
	/* For "Show Related Times" */
	position: fixed;
	top: 52px; /* Adjust if your header height is different */
	left: 0;
	right: 0;
	/* height: 230px; /* Consider making height more dynamic or use max-height */
	max-height: calc(
		100vh - 120px
	); /* Example: leave some space from top and bottom */
	min-height: 75px; /* Ensure minimum height for the overlay */
	width: 100%;
	z-index: 1000; /* Ensure it's above other content but below modals if any */
	background-color: white;
	padding: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	display: flex; /* Use flexbox to ensure proper height behavior */
	flex-direction: column; /* Stack content vertically */
	align-items: stretch; /* Ensure children take full width */
}

/* Mobile-optimized dialog styling */
[b-c58plzf8qj] .mobile-optimized-dialog .e-dialog {
	max-height: 95vh !important;
}

[b-c58plzf8qj] .mobile-optimized-dialog .e-dlg-content {
	padding: 10px !important;
	height: calc(100% - 120px) !important; /* Account for header and footer */
	overflow-y: auto !important;
}

/* Empty related times styling moved to TimeListComp.razor.css for proper component scoping */

/* Base checkbox styling - ensures proper spacing on all screen sizes */
.chkbox[b-c58plzf8qj] {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-left: 1rem; /* Add left spacing to move checkbox away from edge */
	padding-right: 1rem;
	display: flex;
	align-items: center;
	min-height: 44px; /* Ensure minimum touch target height */
}

.chkbox input[type='checkbox'][b-c58plzf8qj] {
	margin-right: 0.5rem;
	min-width: 18px;
	min-height: 18px;
	cursor: pointer;
}

.chkbox label[b-c58plzf8qj] {
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.4;
	user-select: none; /* Prevent text selection on touch devices */
}

/* Responsive adjustments */
@media (max-width: 768px) {
	/* Mobile-optimized spacing for better touch interaction */
	#mm-top-row[b-c58plzf8qj] {
		row-gap: 8px;
		margin-top: 8px;
		margin-bottom: 8px;
		padding-left: 0.75em;
		padding-right: 0.75em;
	}

	.row-content-enteringfor[b-c58plzf8qj] {
		min-height: 35px;
		padding: 10px 14px;
		font-size: 14px;
	}

	/* Optimize dialog for mobile - full height utilization */
	[b-c58plzf8qj] .mobile-optimized-dialog .e-dialog {
		width: 95vw !important;
		height: 95vh !important;
		max-width: none !important;
		max-height: none !important;
	}

	[b-c58plzf8qj] .mobile-optimized-dialog .e-dlg-content {
		padding: 8px !important;
		height: calc(100% - 100px) !important; /* Reduced header/footer space */
	}

	#time-entry-dialog-content[b-c58plzf8qj] {
		padding: 8px;
		gap: 10px; /* Reduced gap for mobile */
		height: 100%;
	}

	/* Improve dialog sizing for mobile */
	#common-crew-dialog[b-c58plzf8qj],
	#split-crew-dialog[b-c58plzf8qj] {
		padding: 10px;
		margin-bottom: 6px;
		min-height: auto; /* Remove fixed height for better space utilization */
	}

	.emp-item-dialog[b-c58plzf8qj] {
		padding: 8px;
		margin-bottom: 4px;
		min-height: 40px; /* Better touch target */
	}

	/* Checkbox spacing for mobile - adjust from base styles */
	.chkbox[b-c58plzf8qj] {
		margin-top: 0.75rem;
		margin-bottom: 0.5rem;
		padding-left: 0.75rem; /* Slightly reduce left padding on mobile */
		padding-right: 0.75rem;
	}

	.chkbox label[b-c58plzf8qj] {
		font-size: 0.9rem; /* Use rem units for responsive scaling */
	}
}

/* Mobile-specific optimizations for fitting content without scrolling */
@media (max-width: 480px) {
	/* Ensure main container doesn't create extra space */
	.hh-enter-times-container[b-c58plzf8qj] {
		height: auto;
		min-height: 0;
		overflow: visible;
	}
	/* Reduce top row spacing */
	#mm-top-row[b-c58plzf8qj] {
		row-gap: 3px;
		margin-top: 5px;
		margin-bottom: 5px;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* Full-screen dialog for small mobile devices */
	[b-c58plzf8qj] .mobile-optimized-dialog .e-dialog {
		width: 100vw !important;
		height: 100vh !important;
		top: 0 !important;
		left: 0 !important;
		border-radius: 0 !important;
	}

	[b-c58plzf8qj] .mobile-optimized-dialog .e-dlg-content {
		padding: 5px !important;
		height: calc(100vh - 80px) !important; /* Minimal header/footer space */
	}

	#time-entry-dialog-content[b-c58plzf8qj] {
		padding: 5px;
		gap: 8px; /* Minimal gap for small screens */
	}

	#common-crew-dialog[b-c58plzf8qj],
	#split-crew-dialog[b-c58plzf8qj] {
		padding: 8px;
		margin-bottom: 4px;
	}

	/* Ensure checkbox stays visible above footer */
	.chkbox[b-c58plzf8qj] {
		margin-top: 0.5rem;
		margin-bottom: calc(
			var(--footer-height-visible) + 2px
		); /* Dynamic footer height + small buffer */
		padding-left: 0.5rem; /* Further reduce left padding on small screens */
		padding-right: 0.5rem;
	}
}

/* iPhone SE and similar devices (375px width) - optimized spacing */
@media (max-width: 375px) {
	.chkbox[b-c58plzf8qj] {
		padding-left: 0.6rem; /* Optimal spacing for iPhone SE */
		padding-right: 0.6rem;
		margin-top: 0.4rem;
	}

	.chkbox label[b-c58plzf8qj] {
		font-size: 0.9rem; /* Maintain readability on iPhone SE */
	}
}

/* Extra small mobile devices - more aggressive space optimization */
@media (max-width: 360px) {
	/* Ensure main container doesn't create extra space */
	.hh-enter-times-container[b-c58plzf8qj] {
		height: auto;
		min-height: 0;
		overflow: visible;
	}
	/* Further reduce top row spacing */
	#mm-top-row[b-c58plzf8qj] {
		row-gap: 2px;
		margin-top: 3px;
		margin-bottom: 3px;
		padding-left: 0.4em;
		padding-right: 0.4em;
	}

	/* Ultra-compact dialog for very small screens */
	#time-entry-dialog-content[b-c58plzf8qj] {
		padding: 3px;
		gap: 5px; /* Minimal gap for very small screens */
	}

	#common-crew-dialog[b-c58plzf8qj],
	#split-crew-dialog[b-c58plzf8qj] {
		padding: 6px;
		margin-bottom: 3px;
	}

	#common-crew-dialog h5[b-c58plzf8qj],
	#split-crew-dialog h5[b-c58plzf8qj] {
		margin-bottom: 8px;
		font-size: 0.9em;
	}

	.emp-item-dialog[b-c58plzf8qj] {
		padding: 6px;
		margin-bottom: 2px;
		min-height: 35px;
		font-size: 0.9em;
	}

	/* Adjust checkbox for smaller footer */
	.chkbox[b-c58plzf8qj] {
		margin-top: 0.25rem;
		margin-bottom: calc(
			var(--footer-height-visible) + 2px
		); /* Dynamic footer height + small buffer */
		padding-left: 0.3rem; /* Minimal left padding for very small screens */
		padding-right: 0.3rem;
	}

	.chkbox label[b-c58plzf8qj] {
		font-size: 0.8rem; /* Smaller font for very small screens */
	}

	/* Reduce font sizes for extra space savings */
	.row-content[b-c58plzf8qj] {
		font-size: 0.75em;
		line-height: 1.3em;
		padding: 1px 0.5em;
	}

	.row-content-enteringfor[b-c58plzf8qj] {
		min-height: 30px;
		padding: 6px 10px;
		font-size: 13px;
	}
}
/* /Pages/HH_Help_Test.razor.rz.scp.css */
.hh-help-test-container[b-b475o8h2x7] {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.hh-help-test-container h3[b-b475o8h2x7] {
    margin: 0 0 1rem 0;
    color: var(--brand-primary-blue-dark);
    text-align: center;
}

.test-section[b-b475o8h2x7] {
    background-color: var(--background-color-timeclock);
    border: 1px solid var(--border-color-subtle);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.test-section h4[b-b475o8h2x7] {
    margin: 0 0 1rem 0;
    color: var(--brand-primary-blue-dark);
    font-size: 1.1rem;
    border-bottom: 2px solid var(--border-color-subtle);
    padding-bottom: 0.5rem;
}

.test-section h5[b-b475o8h2x7] {
    margin: 0.5rem 0;
    color: var(--brand-primary-blue-dark);
    font-size: 1rem;
}

/* TimeList overlay styling */
.test-overlay[b-b475o8h2x7] {
    background-color: white;
    border: 2px solid var(--border-color-subtle);
    border-radius: 4px;
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    min-height: 100px;
}

/* Input styling */
.input-group[b-b475o8h2x7] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input-group label[b-b475o8h2x7] {
    font-weight: 600;
    color: var(--text-color-primary);
    font-size: 0.9rem;
}

.time-inputs[b-b475o8h2x7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.button-group[b-b475o8h2x7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.test-button[b-b475o8h2x7] {
    min-width: 120px;
    padding: 0.5rem 1rem;
}

/* Results styling */
.test-result[b-b475o8h2x7] {
    padding: 1rem;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

.test-result.success[b-b475o8h2x7] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.test-result.error[b-b475o8h2x7] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.overlap-details[b-b475o8h2x7] {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.overlap-details ul[b-b475o8h2x7] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.overlap-details li[b-b475o8h2x7] {
    margin-bottom: 0.25rem;
    color: #856404;
    font-weight: 500;
}

.debug-info[b-b475o8h2x7] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    max-height: 200px;
    overflow-y: auto;
}

.debug-line[b-b475o8h2x7] {
    margin-bottom: 0.25rem;
    color: #495057;
    line-height: 1.4;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .hh-help-test-container[b-b475o8h2x7] {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .test-section[b-b475o8h2x7] {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .time-inputs[b-b475o8h2x7] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .button-group[b-b475o8h2x7] {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .test-button[b-b475o8h2x7] {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .hh-help-test-container[b-b475o8h2x7] {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .test-section[b-b475o8h2x7] {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .hh-help-test-container h3[b-b475o8h2x7] {
        font-size: 1.2rem;
    }
    
    .test-section h4[b-b475o8h2x7] {
        font-size: 1rem;
    }
    
    .test-overlay[b-b475o8h2x7] {
        max-height: 200px;
        min-height: 80px;
    }
    
    .debug-info[b-b475o8h2x7] {
        font-size: 0.8rem;
        max-height: 150px;
    }
}

/* Ensure Syncfusion components fit properly */
[b-b475o8h2x7] .test-input {
    width: 100%;
}

[b-b475o8h2x7] .test-input .e-input-group {
    width: 100%;
}

/* Override Syncfusion button styling for test buttons */
[b-b475o8h2x7] .test-button.e-btn {
    border-radius: 4px;
    font-weight: 500;
}

[b-b475o8h2x7] .test-button.e-btn.e-primary {
    background-color: var(--brand-primary-blue-dark);
    border-color: var(--brand-primary-blue-dark);
}

[b-b475o8h2x7] .test-button.e-btn.e-primary:hover {
    background-color: var(--brand-primary-blue);
    border-color: var(--brand-primary-blue);
}
/* /Pages/II_TravelDetailsComp.razor.rz.scp.css */
/* Main container layout */
.container[b-fq04hhooav] {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap: 2em;
}

/* Employee count display section */
#employees-in-vehicle[b-fq04hhooav] {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: 0.5rem;
	justify-content: center;
	align-content: center;
	margin: 1rem 0; /* Reduced from 2rem */
	flex-shrink: 0; /* Don't shrink this section */
}

#emp-count-label[b-fq04hhooav] {
	font-size: 1.2rem;
	font-weight: 500;
	text-align: center;
	color: var(--text-color-dark);
	line-height: 1.4;
}

#emp-count[b-fq04hhooav] {
	display: flex;
	justify-content: center;
	align-items: center;
	justify-self: center;
	font-size: 3rem;
	font-weight: bold;
	border: 2px solid var(--border-color-standard);
	border-radius: var(--corner-radius);
	height: 60px;
	width: 60px;
	background-color: var(--background-color-light);
	color: var(--text-color-dark);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
}

#emp-count:empty[b-fq04hhooav]::before {
	content: '0';
	color: var(--text-color-subtle);
}

/* Keypad section */
#travel-keypad[b-fq04hhooav] {
	border-top: 2px solid var(--brand-neutral-gray-blue);
	padding-top: 1rem;
	margin-bottom: 2rem; /* Reduced from 4rem */
	flex: 1; /* Allow keypad to take available space */
	display: flex;
	flex-direction: column;
	min-height: 0; /* Allow shrinking */
}

#travel-keypad > div[b-fq04hhooav] {
	margin: 0 2rem;
	flex: 1; /* Allow keypad component to expand */
	display: flex;
	flex-direction: column;
	min-height: 200px; /* Ensure minimum height for keypad */
}

/* Ensure keypad component is visible */
#travel-keypad #keypad-container[b-fq04hhooav] {
	flex: 1;
	min-height: 200px;
}

/* Material checkbox section */
#travel-material[b-fq04hhooav] {
	margin: 0 auto; /* Remove top margin, keep horizontal centering */
	padding: 1rem;
	background-color: var(--background-color-light);
	border-radius: var(--corner-radius);
	border: 1px solid var(--background-color-medium-light);
	flex-shrink: 0; /* Don't shrink this section */
	width: fit-content; /* Only take up as much width as needed */
	display: flex;
	justify-content: center; /* Center the checkbox content */
}

/* Bottom button container */
#BottomButton[b-fq04hhooav] {
	display: block;
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 4rem);
	max-width: 400px;
	z-index: 100;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
	.container[b-fq04hhooav] {
		gap: 1.5rem;
		padding: 0.5rem;
	}

	#employees-in-vehicle[b-fq04hhooav] {
		margin: 1rem 0;
	}

	#emp-count-label[b-fq04hhooav] {
		font-size: 1.1rem;
	}

	#emp-count[b-fq04hhooav] {
		font-size: 2.5rem;
		height: 50px;
		width: 50px;
	}

	#travel-keypad > div[b-fq04hhooav] {
		margin: 0 1rem;
	}

	#travel-material[b-fq04hhooav] {
		margin: 0 auto; /* Remove top margin, keep horizontal centering on mobile */
		padding: 0.75rem;
		width: fit-content; /* Maintain fit-content width */
	}

	#BottomButton[b-fq04hhooav] {
		bottom: 1rem;
		width: calc(100% - 2rem);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	#emp-count[b-fq04hhooav] {
		border-width: 3px;
		box-shadow: none;
	}

	#travel-material[b-fq04hhooav] {
		border-width: 2px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	#emp-count[b-fq04hhooav] {
		transition: none;
	}
}
/* /Pages/JJ_LNI.razor.rz.scp.css */
/* Mobile-optimized layout for iPhone and Android phones */
#toggle-group-container[b-bxydkca0ui] {
    display: grid;
    gap: 12px;
    align-content: start;
    margin: 1rem 0.5rem;
    padding: 0;
    /* Ensure proper touch targets and spacing on mobile */
    min-height: calc(100vh - 200px); /* Reserve space for bottom button */
}

#BottomButton[b-bxydkca0ui] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: var(--background-color, #ffffff);
    border-top: 1px solid var(--border-color, #e0e0e0);
    /* Ensure button is always accessible on mobile */
    z-index: 100;
    /* Add safe area padding for modern phones with notches */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Ensure content doesn't get hidden behind fixed button */
[b-bxydkca0ui] .page-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    #toggle-group-container[b-bxydkca0ui] {
        margin: 0.75rem 0.25rem;
        gap: 10px;
    }

    #BottomButton[b-bxydkca0ui] {
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}

/* Ensure proper touch interaction on mobile */
@media (hover: none) and (pointer: coarse) {
    #toggle-group-container[b-bxydkca0ui] {
        /* Optimize for touch devices */
        gap: 14px;
    }
}
/* /Pages/KK_InstallNotes.razor.rz.scp.css */
/* Container for the entire install notes page */
.install-notes-container[b-l1uemomabn] {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
	box-sizing: border-box;
}

/* Container for the text input area */
.text-input-container[b-l1uemomabn] {
	flex: 1;
	margin-bottom: 1rem;
}

/* Bottom button container - fixed at bottom */
.bottom-button-container[b-l1uemomabn] {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
	.install-notes-container[b-l1uemomabn] {
		padding: 0.75rem;
	}

	.bottom-button-container[b-l1uemomabn] {
		padding-top: 0.75rem;
	}
}

/* Mobile-specific focus state fixes for text input */
@media (max-width: 768px) {
	/* Override Syncfusion focus styling on mobile to ensure proper contrast */
	[b-l1uemomabn] textarea.e-input:focus,
	[b-l1uemomabn] .e-float-input textarea:focus,
	[b-l1uemomabn] .e-float-input.e-control-wrapper textarea:focus,
	[b-l1uemomabn] .e-input-group textarea:focus,
	[b-l1uemomabn] .e-input-group.e-control-wrapper textarea:focus {
		background-color: #ffffff !important;
		color: #000000 !important;
		border-color: #007bff !important;
		outline: none !important;
		box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
	}

	/* Ensure placeholder text is also readable */
	[b-l1uemomabn] textarea.e-input:focus::placeholder,
	[b-l1uemomabn] .e-float-input textarea:focus::placeholder,
	[b-l1uemomabn] .e-float-input.e-control-wrapper textarea:focus::placeholder {
		color: #666666 !important;
	}
}

/* Dark mode support for non-Syncfusion elements */
@media (prefers-color-scheme: dark) {
	.bottom-button-container[b-l1uemomabn] {
		border-top-color: #444;
	}
}
/* /Pages/LL_ConfirmTimeEntry.razor.rz.scp.css */
/* Main container for the LL page */
#ll[b-gs1wwjt5w8] {
	display: grid;
	align-content: start;
	row-gap: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-left: 1em;
	padding-right: 1em;
}

/* Bottom button container */
#BottomButton[b-gs1wwjt5w8] {
	display: block;
	margin-top: 20px;
}

/* Entering for row styling */
.row-content-enteringfor[b-gs1wwjt5w8] {
	display: grid;
	align-content: center;
	height: 30px;
	font-weight: 700;
	padding: 0.75em 1em;
	cursor: pointer;
	transition: opacity 0.2s ease;
	border-radius: 4px;
}

.row-content-enteringfor:hover[b-gs1wwjt5w8] {
	opacity: 0.8;
}

/* Job date row styling */
.row-content-jobdate[b-gs1wwjt5w8] {
	display: grid;
	justify-content: center;
	min-height: 20px;
	font-weight: 700;
	padding: 0.25em;
}

.row-content-jobdate h3[b-gs1wwjt5w8] {
	margin: 0;
	padding: 0;
}

/* Error message styling */
.error-container[b-gs1wwjt5w8] {
	display: grid;
	justify-content: center;
	padding: 1em;
	margin: 1em;
	background-color: #ffe6e6;
	border: 2px solid #ff4444;
	border-radius: 4px;
}

.error-message[b-gs1wwjt5w8] {
	color: #cc0000;
	font-weight: 600;
	text-align: center;
	margin: 0;
}

/* Enhanced mobile contrast with subtle borders */
.block[b-gs1wwjt5w8] {
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	padding: 0.5em;
	margin-bottom: 0.5em;
}

.detail[b-gs1wwjt5w8] {
	border-top: 1px solid #f0f0f0;
	padding-top: 0.5em;
	margin-top: 0.5em;
}

/* Content blocks */
.block[b-gs1wwjt5w8] {
	display: grid;
	margin-top: 5px;
	margin-left: 0;
	padding: 0.4em;
	background-color: var(--background-color-light);
	border-radius: var(--corner-radius);
	border: 1px solid var(--border-color-standard);
}

.block h4[b-gs1wwjt5w8] {
	margin: 0 0 0.25em 0;
	padding: 0;
	font-size: 1.1em;
}

/* Detail content positioning - Fixed overlap issue */
.detail[b-gs1wwjt5w8] {
	margin-top: 0;
	padding: 0;
}

.detail p[b-gs1wwjt5w8] {
	margin: 0;
	padding: 0.125em 0;
	line-height: 1.4em;
}

/* Loading and error states */
.loading-container[b-gs1wwjt5w8],
.error-container[b-gs1wwjt5w8] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	padding: 2em;
	text-align: center;
}

.error-container[b-gs1wwjt5w8] {
	color: #d32f2f;
}

/* Dialog styling */
#time-entry-dialog[b-gs1wwjt5w8] {
	padding: 1em;
}

#common-crew[b-gs1wwjt5w8] {
	display: grid;
	gap: 0.5em;
}

#common-crew > div[b-gs1wwjt5w8] {
	padding: 0.75em;
	background-color: #f5f5f5;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-weight: 500;
}

/* Install Notes Button Container */
.install-notes-button-container[b-gs1wwjt5w8] {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Install Notes Dialog Content */
.install-notes-dialog-content[b-gs1wwjt5w8] {
	padding: 1em;
	line-height: 1.5em;
	max-height: 60vh;
	overflow-y: auto;
}

.install-notes-dialog-content p[b-gs1wwjt5w8] {
	margin: 0;
	white-space: pre-wrap; /* Preserve line breaks and spacing */
	word-wrap: break-word; /* Handle long words gracefully */
}

/* Utility classes */
.smaller[b-gs1wwjt5w8] {
	font-size: 0.9em;
}

/* Notes styling (preserved from original) */
.notes[b-gs1wwjt5w8] {
	background-color: #93acb5;
	padding: 1em;
	border-style: solid;
	border-color: #193549;
	border-width: 1px;
	border-radius: 4px;
	line-height: 1.1em;
	height: 100%;
	max-height: 20vh;
	overflow: auto;
	margin-top: 5px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	#ll[b-gs1wwjt5w8] {
		padding-left: 0.5em;
		padding-right: 0.5em;
		margin-top: 5px;
		margin-bottom: 5px;
		row-gap: 8px;
	}

	.block[b-gs1wwjt5w8] {
		margin-left: 0;
		padding: 0.5em;
	}

	.row-content-enteringfor[b-gs1wwjt5w8],
	.row-content-jobdate[b-gs1wwjt5w8] {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	.block h4[b-gs1wwjt5w8] {
		font-size: 1em;
	}

	.install-notes-button-container[b-gs1wwjt5w8] {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.install-notes-dialog-content[b-gs1wwjt5w8] {
		padding: 0.75em;
		font-size: 0.95em;
	}
}
/* /Pages/RR_ReviewAndSubmit.razor.rz.scp.css */
/* RR_ReviewAndSubmit.razor.css - Mobile-First Responsive Design */

.rr[b-m8gwo2d2v2] {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100%;
	max-height: calc(
		100vh -
			(
				var(--header-height) + var(--footer-height-visible) +
					var(--main-padding) * 2
			)
	);
	overflow-y: auto;
	--main-padding: 1rem;
	gap: var(--main-padding);
	padding: var(--main-padding);
	/* Allow page scrolling when content exceeds viewport */
}

.instructions[b-m8gwo2d2v2] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: #666;
	text-align: left; /* Changed from center to left for better readability */
	padding: 0.75rem; /* Slightly increased padding for better text spacing */
	background-color: #f8f9fa;
	border-radius: 0.5rem;
	border: 1px solid #e9ecef;
}

.accordion-scroll-wrapper[b-m8gwo2d2v2] {
	/* Create scrollable container for accordion */
	/*overflow-y: auto;
	max-height: calc( 100vh - (var(--header-height) + var(--footer-height-visible) ));*/ /* Adjust based on header + instructions height */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.accordion[b-m8gwo2d2v2] {
	/* Remove internal scrolling - allow natural expansion */
	margin-bottom: 1rem;
}

.no-entries[b-m8gwo2d2v2] {
	display: flex;
	justify-content: center;
	align-items: start;
	flex: 1;
	text-align: center;
	margin-top: 2em;
}

.no-entries h4[b-m8gwo2d2v2] {
	background-color: #fff3cd;
	color: #856404;
	padding: 2rem;
	border-radius: 0.5rem;
	border: 1px solid #ffeaa7;
	margin: 0;
	font-size: 1.1rem;
}

/* Crew section styling */
h3[b-m8gwo2d2v2] {
	margin: 1rem 0 0 0;
	padding: 0.75rem;
	text-align: center;
	border: 1px solid #ccc;
	border-bottom: none;
	background-color: #ff9838;
	color: white;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 1rem;
}

h3:hover[b-m8gwo2d2v2] {
	background-color: #e8851f;
}

/* Crew dialog styling */
.crew-dialog[b-m8gwo2d2v2] {
	padding: 1rem 0;
}

.crew-list[b-m8gwo2d2v2] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.crew-member[b-m8gwo2d2v2] {
	padding: 0.75rem;
	background-color: #f8f9fa;
	border-radius: 0.25rem;
	border: 1px solid #e9ecef;
	font-weight: 500;
}

/* Responsive Design - Mobile First */

/* Small mobile devices (≤375px) - iPhone SE 2020 */
@media (max-width: 375px) {
	.rr[b-m8gwo2d2v2] {
		--main-padding: 0.75rem;
	}

	.instructions[b-m8gwo2d2v2] {
		font-size: 0.8rem;
		padding: 0.6rem; /* Maintain adequate padding for text spacing */
		gap: 0.3rem;
	}

	.no-entries h4[b-m8gwo2d2v2] {
		padding: 1.5rem;
		font-size: 1rem;
	}

	h3[b-m8gwo2d2v2] {
		padding: 0.6rem;
		font-size: 0.9rem;
	}

	.crew-member[b-m8gwo2d2v2] {
		padding: 0.6rem;
		font-size: 0.9rem;
	}
}

/* Medium mobile devices (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
	.rr[b-m8gwo2d2v2] {
		--main-padding: 0.875rem;
	}

	.instructions[b-m8gwo2d2v2] {
		font-size: 0.85rem;
	}

	h3[b-m8gwo2d2v2] {
		font-size: 0.95rem;
	}
}

/* Large mobile devices and small tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
	.rr[b-m8gwo2d2v2] {
		--main-padding: 1rem;
	}

	.instructions[b-m8gwo2d2v2] {
		font-size: 0.9rem;
	}

	h3[b-m8gwo2d2v2] {
		font-size: 1rem;
	}
}

/* Mobile responsive adjustments for scroll wrapper */
/*@media (max-width: 480px) {
	.accordion-scroll-wrapper {
		max-height: calc(100vh - 180px);  Smaller header/instructions on mobile
	}
}

@media (max-width: 375px) {
	.accordion-scroll-wrapper {
		max-height: calc(100vh - 160px);  Even more compact on small screens
	}
}*/

/* Tablets and larger (769px+) */
@media (min-width: 769px) {
	.rr[b-m8gwo2d2v2] {
		max-width: 800px;
		margin: 0 auto;
		--main-padding: 1.25rem;
	}

	.instructions[b-m8gwo2d2v2] {
		font-size: 1rem;
		flex-direction: row;
		justify-content: space-around;
		text-align: left;
	}

	/*.accordion-scroll-wrapper {
		max-height: calc(
			100vh - 220px
		);*/ /* More space for larger instructions on tablets */
	/*}*/

	.no-entries h4[b-m8gwo2d2v2] {
		font-size: 1.2rem;
		padding: 2.5rem;
	}

	h3[b-m8gwo2d2v2] {
		font-size: 1.1rem;
		padding: 1rem;
	}

	.crew-dialog[b-m8gwo2d2v2] {
		padding: 1.5rem 0;
	}

	.crew-member[b-m8gwo2d2v2] {
		padding: 1rem;
		font-size: 1rem;
	}
}

/* Allow accordion content to expand naturally */
.accordion[b-m8gwo2d2v2]  .e-acrdn-content {
	/* Remove height constraints to prevent content truncation */
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
}
/* /Pages/SS_SelectCrew.razor.rz.scp.css */
.ss[b-subxljtd25] {
	display: flex;
	flex-direction: column;
	padding: 1em;
	height: 100%;
	overflow: hidden;
	position: relative; /* Enable positioning for spinner overlays */
}

/* Spinner overlay styles - following the global spinner pattern */
.ss-spinner-overlay[b-subxljtd25] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	/* Semi-transparent black background */
	z-index: 1000;
	/* Ensure it's on top of page content */
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-spinner-container[b-subxljtd25] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Spinner label styling for better visibility */
.ss-spinner-container .e-spinner-pane .e-spinner-inner .e-spin-label[b-subxljtd25] {
	color: white;
	/* Make spinner label visible against dark overlay */
	margin-top: 10px;
	font-size: 1rem;
}

/* Material spinner color override for better contrast against dark overlay */
.ss-spinner-overlay
	.ss-spinner-container
	.e-spinner-pane
	.e-spinner-inner
	.e-spin-material[b-subxljtd25] {
	stroke: var(--brand-highlight-orange) !important;
	color: var(--brand-highlight-orange) !important;
}

/* Additional fallback for any spinner elements */
.ss-spinner-overlay .e-spinner-pane .e-spinner-inner[b-subxljtd25] {
	color: var(--brand-highlight-orange) !important;
}

.ss-spinner-overlay .e-spinner-pane .e-spinner-inner *[b-subxljtd25] {
	border-color: var(--brand-highlight-orange) !important;
	color: var(--brand-highlight-orange) !important;
}
/* /Pages/TestDateSelector.razor.rz.scp.css */
.test-container[b-phnnid3xn2] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.component-container[b-phnnid3xn2],
.results-container[b-phnnid3xn2] {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
}

h3[b-phnnid3xn2], h4[b-phnnid3xn2] {
    margin-bottom: 1rem;
}

.keypad-test-section[b-phnnid3xn2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.keypad-controls[b-phnnid3xn2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f0f0f0;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.keypad-controls label[b-phnnid3xn2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.keypad-controls input[type="checkbox"][b-phnnid3xn2] {
    margin: 0;
}

.keypad-controls button[b-phnnid3xn2] {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.keypad-controls button:hover[b-phnnid3xn2] {
    background-color: #5a6268;
}

.keypad-controls button:active[b-phnnid3xn2] {
    background-color: #545b62;
}

/* Responsive adjustments for keypad test section */
@media (max-width: 600px) {
    .keypad-controls[b-phnnid3xn2] {
        padding: 0.75rem;
    }

    .keypad-controls button[b-phnnid3xn2] {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}
/* /Pages/TestHome.razor.rz.scp.css */
/* MainButtonComp.razor.css */
.main-button-wrapper[b-4xbg2nk31r] {
    /* These are defaults; they will be overridden by ComputedStyleParam if provided */
    --bkg1: var(--button-bk1, silver);
    --bkg2: var(--button-bkg2, silver);
    --fore: var(--button-fontcolor, black);
    --ht: var(--button-height, auto); /* Default height */
    --fs: var(--button-font-size, 1em); /* Default font size */

    height: var(--ht); /* Wrapper takes the calculated or default height */
    width: 100%; /* Example: make wrapper take full available width */
    display: inline-block; /* Or block, depending on desired layout behavior */
}

.mainbutton[b-4xbg2nk31r] {
    width: 100%;
    height: 100%; /* Button fills the wrapper */
    background: linear-gradient(to bottom right, var(--bkg1), var(--bkg2));
    border-style: solid;
    border-width: 1px;
    border-color: var(--bkg1); /* Consider a more neutral border or var(--fore) */
    border-radius: 12px;
    color: var(--fore);
    cursor: pointer;
    display: flex; /* Use flex to center caption-container */
    flex-direction: column; /* Stack caption items vertically if needed */
    justify-content: center; /* Center caption-container vertically */
    align-items: center; /* Center caption-container horizontally */
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fs);
    font-weight: 600;
    outline: transparent;
    padding: 0 1rem; /* Adjust padding as needed */
    text-align: center;
    text-decoration: none;
    transition: box-shadow .2s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    /* white-space: nowrap; Removed to allow text to wrap if Line1 or Line2 are long */
}

    .mainbutton:disabled[b-4xbg2nk31r] {
        /* Styling for disabled state is primarily handled by Enums.ButtonStyle.Disabled setting the CSS variables.
       You can add more universal disabled styles here if needed, e.g., opacity. */
        cursor: not-allowed;
        /* opacity: 0.65; */ /* Example */
    }

    .mainbutton:not(:disabled):active[b-4xbg2nk31r] {
        background-color: orange; /* This overrides the gradient. Consider a different active effect like inset shadow or slight color shift of gradient. */
        box-shadow: 0 2px 3px rgba(0,0,0,0.3) inset; /* Example alternative active state */
        transform: translateY(1px); /* Slight press effect */
    }

.caption-container[b-4xbg2nk31r] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.caption1 .line1[b-4xbg2nk31r] {
    /* Styles for single line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.caption2 .line1[b-4xbg2nk31r] {
    line-height: 1.2em;
    /* align-self: end; /* Not needed with flex centering on mainbutton */
}

.caption2 .line2[b-4xbg2nk31r] {
    line-height: 1.2em;
    /* align-self: start; /* Not needed with flex centering on mainbutton */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
/* /Pages/TT_AuthAndSubmit.razor.rz.scp.css */
/* TT_AuthAndSubmit - Mobile-First Responsive Design */

.tt-container[b-x5eguxg4wu] {
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden; /* Prevent scrolling */
}

.tt-content[b-x5eguxg4wu] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

.authorization-text[b-x5eguxg4wu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 100%;
    line-height: 1.4;
}

.authorization-text h4[b-x5eguxg4wu] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    padding: 0 0.5rem;
    word-wrap: break-word;
    hyphens: auto;
}

.agreement-text[b-x5eguxg4wu] {
    font-size: 1rem;
    color: #34495e;
    font-style: italic;
    margin: 0;
    padding: 0 0.5rem;
    line-height: 1.3;
}

/* Tablet and larger screens (≥481px) */
@media (min-width: 481px) {
    .tt-container[b-x5eguxg4wu] {
        padding: 2rem;
    }
    
    .authorization-text[b-x5eguxg4wu] {
        gap: 2rem;
        max-width: 800px;
    }
    
    .authorization-text h4[b-x5eguxg4wu] {
        font-size: 1.3rem;
        padding: 0 1rem;
    }
    
    .agreement-text[b-x5eguxg4wu] {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
}

/* Desktop screens (≥769px) */
@media (min-width: 769px) {
    .tt-container[b-x5eguxg4wu] {
        padding: 3rem;
    }
    
    .authorization-text[b-x5eguxg4wu] {
        gap: 2.5rem;
        max-width: 900px;
    }
    
    .authorization-text h4[b-x5eguxg4wu] {
        font-size: 1.4rem;
        padding: 0 2rem;
    }
    
    .agreement-text[b-x5eguxg4wu] {
        font-size: 1.2rem;
        padding: 0 2rem;
    }
}

/* Large desktop screens (≥1200px) */
@media (min-width: 1200px) {
    .authorization-text[b-x5eguxg4wu] {
        max-width: 1000px;
    }
    
    .authorization-text h4[b-x5eguxg4wu] {
        font-size: 1.5rem;
    }
    
    .agreement-text[b-x5eguxg4wu] {
        font-size: 1.3rem;
    }
}

/* Small mobile optimization (≤360px) */
@media (max-width: 360px) {
    .tt-container[b-x5eguxg4wu] {
        padding: 0.75rem;
    }
    
    .authorization-text[b-x5eguxg4wu] {
        gap: 1.25rem;
    }
    
    .authorization-text h4[b-x5eguxg4wu] {
        font-size: 1rem;
        padding: 0 0.25rem;
        line-height: 1.3;
    }
    
    .agreement-text[b-x5eguxg4wu] {
        font-size: 0.95rem;
        padding: 0 0.25rem;
        line-height: 1.25;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .authorization-text h4[b-x5eguxg4wu] {
        color: #000;
        font-weight: 700;
    }
    
    .agreement-text[b-x5eguxg4wu] {
        color: #000;
        font-weight: 500;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *[b-x5eguxg4wu] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Pages/UU_History.razor.rz.scp.css */
.rr[b-333xiawwjd] {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	height: 100%;
	overflow: hidden;
}

.row-content-enteringfor[b-333xiawwjd] {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	align-content: center;
	justify-content: center;
	height: 30px;
	font-weight: 700;
	padding-left: 1em;
	background-color: #87bfff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.row-content-enteringfor:hover[b-333xiawwjd] {
	background-color: #6ba3e6;
}

.time-range-buttons[b-333xiawwjd] {
	position: sticky;
	top: 30px;
	z-index: 10;
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 0.75em;
	background-color: white;
	border-bottom: 1px solid #e0e0e0;
}

.time-range-buttons[b-333xiawwjd]  .toggle-group-container {
	display: flex;
	width: 100%;
	gap: 10px;
}

.time-range-buttons[b-333xiawwjd]  #container {
	flex: 1;
}

.time-range-buttons[b-333xiawwjd]  #container button {
	width: 100%;
}

.accordion[b-333xiawwjd] {
	overflow-y: auto;
	margin-top: 0;
	height: 100%;
	padding-top: 1em;
}

.no-entries[b-333xiawwjd] {
	display: flex;
	justify-content: center;
	align-items: center;
}

.no-entries h4[b-333xiawwjd] {
	background-color: yellow;
	margin-top: 3em;
	padding: 2em;
}

.grid-comp-crew-container[b-333xiawwjd] {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 180px);
}

#emp-list[b-333xiawwjd] {
	flex: 1;
	flex-direction: row;
	overflow-y: auto;
	border-bottom: solid 2px #193549;
	margin-bottom: 1rem;
}

#time-entry-dialog[b-333xiawwjd] {
	height: 100%;
}

.dlg-row[b-333xiawwjd] {
	display: flex;
	justify-content: space-between;
	padding: 5px;
	padding-left: 1em;
	border-bottom: 1px solid #ccc;
	height: 2em;
	align-items: center;
	transition: background-color 0.2s ease;
}

.dlg-row:hover[b-333xiawwjd] {
	background-color: #f8f9fa;
}

.dlg-row-content[b-333xiawwjd] {
	flex: 1;
	font-weight: 500;
}

.trans[b-333xiawwjd] {
	display: grid;
	background: none;
	border: none;
	padding: 0;
	width: 100%;
	font: inherit;
	cursor: pointer;
	justify-content: start;
	align-content: center;
	text-align: left;
}

/* Time range buttons responsive styling */
.time-range-buttons[b-333xiawwjd]  button {
	flex: 1;
	min-height: 2.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
	.rr[b-333xiawwjd] {
		grid-template-rows: auto auto 1fr;
	}

	.row-content-enteringfor[b-333xiawwjd] {
		height: 25px;
		font-size: 0.9rem;
		padding-left: 0.25em;
	}

	.time-range-buttons[b-333xiawwjd] {
		padding: 0.25em;
		gap: 8px;
		margin-bottom: 0.25em;
	}

	.time-range-buttons[b-333xiawwjd]  button {
		min-height: 2.25rem;
		font-size: 0.85rem;
	}

	.accordion[b-333xiawwjd] {
		padding-top: 0.75em;
	}

	.no-entries h4[b-333xiawwjd] {
		padding: 1.5em;
		font-size: 1rem;
	}

	.dlg-row[b-333xiawwjd] {
		height: 2em;
		padding: 4px;
		padding-left: 0.75em;
	}

	.grid-comp-crew-container[b-333xiawwjd] {
		height: calc(100vh - 160px);
	}
}

/* Extra small mobile adjustments */
@media (max-width: 360px) {
	.row-content-enteringfor[b-333xiawwjd] {
		height: 22px;
		font-size: 0.8rem;
		padding-left: 0.5em;
	}

	.time-range-buttons[b-333xiawwjd] {
		padding: 0.4em;
		gap: 6px;
		margin-bottom: 0.1em;
	}

	.time-range-buttons[b-333xiawwjd]  button {
		min-height: 2rem;
		font-size: 0.8rem;
		padding: 0.25rem;
	}

	.accordion[b-333xiawwjd] {
		padding-top: 0.5em;
	}

	.no-entries[b-333xiawwjd] {
		padding: 1rem;
	}

	.no-entries h4[b-333xiawwjd] {
		padding: 1em;
		font-size: 0.9rem;
	}

	.dlg-row[b-333xiawwjd] {
		height: 1.8em;
		padding: 3px;
		padding-left: 0.5em;
		font-size: 0.9rem;
	}
}
/* /Pages/VV_Summary.razor.rz.scp.css */
/* VV_Summary - Time Summary Page Styles */

/* Main container using CSS Grid for mobile-first responsive design */
.vv-container[b-oi4byqh4zv] {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	height: 100%;
	overflow: hidden;
	gap: 0;
}

/* Employee header section */
.employee-header[b-oi4byqh4zv] {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	align-content: center;
	justify-content: center;
	height: 2rem;
	font-weight: 700;
	padding: 0 1rem;
	background-color: #87bfff;
	cursor: pointer;
	font-size: 1rem;
}

/* Time range button container */
.time-range-buttons[b-oi4byqh4zv] {
	position: sticky;
	top: 2rem;
	z-index: 10;
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.75rem;
	background-color: white;
}

/* Toggle group styling to match UU_History */
.time-range-buttons[b-oi4byqh4zv]  .toggle-group-container {
	display: flex;
	width: 100%;
	gap: 0.625rem;
}

.time-range-buttons[b-oi4byqh4zv]  #container {
	flex: 1;
}

.time-range-buttons[b-oi4byqh4zv]  button {
	flex: 1;
	min-height: 2.5rem;
}

/* Time summary grid container */
.time-summary-container[b-oi4byqh4zv] {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	border: 2px solid #87bfff;
	padding: 0.625rem;
	background-color: #add7f6;
	overflow-y: auto;
	height: 100%;
}

/* Dialog styles */
.grid-comp-crew-container[b-oi4byqh4zv] {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 11.25rem);
}

#emp-list[b-oi4byqh4zv] {
	flex: 1;
	flex-direction: row;
	overflow-y: auto;
	border-bottom: solid;
	border-bottom-color: #193549;
	margin-bottom: 1rem;
}

.dlg-row[b-oi4byqh4zv] {
	display: flex;
	justify-content: space-between;
	padding: 0.3125rem;
	padding-left: 1rem;
	border-bottom: 1px solid #ccc;
	height: 2rem;
}

.dlg-row-content[b-oi4byqh4zv] {
	flex: 1;
}

.trans[b-oi4byqh4zv] {
	display: grid;
	background: none;
	border: none;
	padding: 0;
	width: 100%;
	font: inherit;
	cursor: pointer;
	justify-content: start;
	align-content: center;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 480px) {
	.employee-header[b-oi4byqh4zv] {
		height: 1.75rem;
		font-size: 0.9rem;
		padding: 0 0.5rem;
	}

	.time-range-buttons[b-oi4byqh4zv] {
		padding: 0.25em;
		gap: 8px;
		margin-bottom: 0.25em;
	}

	.time-range-buttons[b-oi4byqh4zv]  button {
		min-height: 2.25rem;
		font-size: 0.85rem;
	}

	.time-summary-container[b-oi4byqh4zv] {
		padding: 0.5rem;
		margin-top: 0.5rem;
	}

	.grid-comp-crew-container[b-oi4byqh4zv] {
		height: calc(100vh - 10rem);
	}
}

/* iPhone SE and similar small devices */
@media (max-width: 375px) {
	.employee-header[b-oi4byqh4zv] {
		height: 1.5rem;
		font-size: 0.85rem;
		padding: 0 0.5rem;
	}

	.time-range-buttons[b-oi4byqh4zv] {
		padding: 0.4em;
		gap: 6px;
		margin-bottom: 0.1em;
	}

	.time-range-buttons[b-oi4byqh4zv]  button {
		min-height: 2rem;
		font-size: 0.8rem;
		padding: 0.25rem;
	}

	.time-summary-container[b-oi4byqh4zv] {
		padding: 0.375rem;
		margin-top: 0.5rem;
	}

	.dlg-row[b-oi4byqh4zv] {
		padding: 0.25rem;
		padding-left: 0.75rem;
		height: 1.75rem;
	}
}

/* Time summary table styling */
.time-summary-grid[b-oi4byqh4zv] {
	border-collapse: collapse;
	width: 100%;
	font-size: 1rem;
}

.time-summary-grid thead th[b-oi4byqh4zv] {
	padding: 0.5rem;
	background-color: #193549;
	color: white;
	text-align: center;
	border-bottom: 2px solid #000;
	font-weight: 700;
}

.time-summary-grid tbody td[b-oi4byqh4zv] {
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;
}

.time-summary-grid .hours-column[b-oi4byqh4zv] {
	text-align: right;
	padding-right: 2rem;
}

.time-summary-grid .no-data[b-oi4byqh4zv] {
	text-align: center;
	font-style: italic;
	color: #666;
	padding: 2rem;
}

.time-summary-grid tbody tr:nth-child(odd)[b-oi4byqh4zv] {
	background-color: #add7f6;
}

.time-summary-grid tbody tr:nth-child(even)[b-oi4byqh4zv] {
	background-color: #87bfff;
}