:root {
	/* ==========================================================================
   Height Variables - Responsive Layout System
   ========================================================================== */
	--header-height: 48px; /* Header height - consistent across devices */

	/* Footer Heights - Responsive based on screen size */
	--footer-height-visible: 70px; /* Default footer height for desktop/tablet */
	--footer-height-hidden: 0px; /* Effectively hides the footer row */

	/* MainButton Responsive Sizing */
	--main-button-height: 60px; /* Default button height */
	--main-button-font-size: 1.5rem; /* Default button font size - now uses global scaling */
	--main-button-padding: 0.5rem; /* Default footer padding */

	/* Sidebar Font Sizing - Now using rem for global responsive scaling */
	--sidebar-menu-font-size: 1.5rem; /* Menu items - scales with global font system */
	--sidebar-user-name-font-size: 1.875rem; /* User name - scales with global font system */
	--sidebar-version-font-size: 0.75rem; /* Version text - scales with global font system */
	/* ==========================================================================
   Color Palette Variables
   ========================================================================== */
	--brand-primary-blue: #193549;
	--brand-primary-blue-dark: #15232d;
	--brand-secondary-blue: #87bfff;
	--brand-secondary-blue-dark: #193549;
	--brand-highlight-orange: #f6ae2d;
	--brand-highlight-orange-dark: #f26419;
	--brand-neutral-blue: #87bfff;
	--brand-neutral-gray-blue: #93acb5;
	--status-danger-red: #dc3545;
	--status-danger-red-dark: #b32121;
	--status-success-green: #198754;
	--status-success-green-outline: #26b050;
	--status-warning-yellow: #ffc107;
	--status-warning-yellow-light: #fcf8e3; /* Consider if this is distinct enough or can be merged */
	--status-info-cyan: #0dcaf0;
	--text-color-dark: #212529;
	--text-color-medium: #343a40;
	--text-color-light: #495057;
	--text-color-subtle: #6c757d; /* Harmonized from various Bootstrap grays */
	--text-color-disabled: #5c5a5b;
	--text-color-white: #fff;
	--text-color-primary-on-dark: #f7f0f0; /* SideBarComp menu items [cite: 1452, 1473] */
	--text-color-highlight-on-dark: #f5b841; /* SideBarComp logged-in user [cite: 538, 1476] */

	--background-color-light: #f8f9fa;
	--background-color-medium-light: #e9ecef;
	--background-color-medium: #dee2e6;
	--background-color-medium-dark: #ced4da; /* Consider merging some of these grays if too similar */
	--background-color-dark: #adb5bd;
	--background-color-very-dark: #6c757d;
	--background-color-app: #e1f2fe;
	--background-color-app-bar: #15232d;
	--background-color-button-disabled: #7f7d7e;
	--background-color-error-ui: lightyellow; /* #blazor-error-ui [cite: 125] */
	--background-color-row-odd: #add7f6; /* .row:nth-child(odd) [cite: 418, 548, 572, 597, 1327, 1827] */
	--background-color-row-even: #87bfff; /* .row:nth-child(even) [cite: 458, 501, 572, 597, 1249, 1301, 1327, 1827] */
	--background-color-dialog-header: #193549; /* Accordion headers [cite: 1136, 1140, 1143, 1204, 1208, 1211, 1252, 1256, 1267, 1308] */
	--background-color-dialog-header-hover: #18a999; /* Accordion header hover [cite: 1137, 1205] */
	--background-color-timeclock: yellow; /* #timeclock [cite: 801] */
	--background-color-enteringfor-crew: #87bfff; /* .row-content-enteringfor (crew) [cite: 902, 1115, 1198, 1249] */
	--background-color-enteringfor-individual: palevioletred; /* .row-content-enteringfor (individual) [cite: 902, 1115] */

	--border-color-standard: #193549; /* Used in various places like #grid, .time-display-border-ok, #active-job border [cite: 358, 414, 416, 500, 801, 804, 899, 1123, 1260, 1312] */
	--border-color-subtle: gray; /* .time-list-container [cite: 546, 595] */
	--border-color-error: red; /* .time-display-border-bad, .invalid input outline [cite: 125, 359] */
	--border-color-light-gray: #ccc; /* .dlg-row border [cite: 1262, 1313] */

	--corner-radius: 8px;

	/* ==========================================================================
   Color Palette Variables
   ========================================================================== */
	--font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
		'Liberation Mono', 'Courier New', monospace;
	--font-family-app: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--font-size-base: 1rem; /* Now automatically responsive via root font-size scaling */
	--font-weight-base: 400;
	--line-height-base: 1.5;
}

/* ==========================================================================
   Text Color Utilities
   ========================================================================== */
.text-primary-blue {
	color: var(--brand-primary-blue);
}

.text-secondary-blue {
	color: var(--brand-secondary-blue);
}

.text-highlight-orange {
	color: var(--brand-highlight-orange);
}

.text-status-danger {
	color: var(--status-danger-red);
}

.text-status-success {
	color: var(--status-success-green);
}

.text-status-warning {
	color: var(--status-warning-yellow);
}

.text-status-info {
	color: var(--status-info-cyan);
}

.text-dark {
	color: var(--text-color-dark);
}

.text-medium {
	color: var(--text-color-medium);
}

.text-light {
	color: var(--text-color-light);
}

.text-subtle {
	color: var(--text-color-subtle);
}

.text-disabled {
	color: var(--text-color-disabled);
}

.text-white {
	color: var(--text-color-white);
}

.text-primary-on-dark {
	color: var(--text-color-primary-on-dark);
}

.text-highlight-on-dark {
	color: var(--text-color-highlight-on-dark);
}

/* ==========================================================================
   Background Color Utilities
   ========================================================================== */
.bg-app {
	background-color: var(--background-color-app);
}

.bg-app-bar {
	background-color: var(--background-color-app-bar);
}

.bg-light {
	background-color: var(--background-color-light);
}

.bg-error-ui {
	background-color: var(--background-color-error-ui);
}

.bg-row-odd {
	background-color: var(--background-color-row-odd);
}

.bg-row-even {
	background-color: var(--background-color-row-even);
}

.bg-dialog-header {
	background-color: var(--background-color-dialog-header);
}

.bg-dialog-header-hover {
	background-color: var(--background-color-dialog-header-hover);
}
/* For interactive elements */
.bg-timeclock {
	background-color: var(--background-color-timeclock);
}

.bg-enteringfor-crew {
	background-color: var(--background-color-enteringfor-crew);
}

.bg-enteringfor-individual {
	background-color: var(--background-color-enteringfor-individual);
}

/* ==========================================================================
   Border Utilities
   ========================================================================== */
.border-standard {
	border-color: var(--border-color-standard);
}

.border-subtle {
	border-color: var(--border-color-subtle);
}

.border-error {
	border-color: var(--border-color-error);
}

.border-light-gray {
	border-color: var(--border-color-light-gray);
}

/* ==========================================================================
   Typography & Layout Utilities
   ========================================================================== */
.font-family-app {
	font-family: var(--font-family-app);
}

.font-size-base {
	font-size: var(--font-size-base);
}

.font-weight-bold {
	font-weight: 700;
}
/* Common bold weight */
.font-weight-semi-bold {
	font-weight: 600;
}
/* MainButtonComp [cite: 265] */
.font-weight-medium {
	font-weight: 500;
}
/* h1-h6, HeaderComp h4 [cite: 108, 515] */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.d-grid {
	display: grid;
}

.d-flex {
	display: flex;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-start {
	justify-content: start;
}

.justify-content-end {
	justify-content: end;
}

.justify-content-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

.align-items-start {
	align-items: flex-start;
}

.align-self-center {
	align-self: center;
}

.align-self-start {
	align-self: start;
}

.align-self-end {
	align-self: end;
}

/* Cursor utilities */
.cursor-pointer {
	cursor: pointer;
}

/* Margins & Paddings - Example utility classes, expand as needed */
.m-0 {
	margin: 0;
}

.mt-1 {
	margin-top: 0.5em;
}
/* Example, adjust values based on common usage */
.mb-1 {
	margin-bottom: 0.5em;
}
/* Example */
.ml-1 {
	margin-left: 0.5em;
}
/* Example */
.mr-1 {
	margin-right: 0.5em;
}
/* Example */
.m-auto {
	margin: auto;
}
/* #LayoutOuter [cite: 119] */

.p-1 {
	padding: 0.5em;
}
/* Example */
.pt-1 {
	padding-top: 0.5em;
}
/* Example */
.pb-1 {
	padding-bottom: 0.5em;
}
/* Example */
.pl-1 {
	padding-left: 0.5em;
}
/* Example */
.pr-1 {
	padding-right: 0.5em;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Global Responsive Font System - Root Font Size Scaling
   ========================================================================== */
html {
	/* Default root font size for larger phones/tablets (>480px) */
	font-size: 16px; /* Base size - all rem units scale from this */

	/* Disable iOS Safari automatic text size adjustment to ensure our responsive font system works correctly */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Mobile devices (phones in portrait) - 480px and below */
@media (max-width: 480px) {
	html {
		font-size: 15px; /* Slightly smaller for mobile phones */
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	html {
		font-size: 14.5px; /* Optimized for iPhone SE (375px width) */
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	html {
		font-size: 14px; /* Even smaller for compact phones */
	}
}

/* Large phones and small tablets - 600px and above */
@media (min-width: 600px) {
	html {
		font-size: 17px; /* Slightly larger for bigger screens */
	}
}

/* Tablets and larger - 768px and above */
@media (min-width: 768px) {
	html {
		font-size: 18px; /* Larger for tablet-sized screens */
	}
}

html,
body {
	background-color: #e1f1fe;
	font-family: var(--font-family-app);
	height: 100dvh; /* Use dynamic viewport height */
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden; /* Prevent scrollbars on html/body if grid is 100vh */
	/* iOS Safari keyboard fix - prevent horizontal expansion */
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
}

#app {
	height: 100dvh; /* Use dynamic viewport height */
	/* display: block; is fine, or if #app itself needs to be a flex container:
       display: flex;
       flex-direction: column;
    */
}

.valid.modified:not([type='checkbox']) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	color-scheme: light only;
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
			no-repeat 1rem/1.8rem,
		#b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: 'An error has occurred.';
}

.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

.loading-progress circle {
	fill: none;
	stroke: #e0e0e0;
	stroke-width: 0.6rem;
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
}

.loading-progress circle:last-child {
	stroke: #1b6ec2;
	stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
	transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
	position: absolute;
	text-align: center;
	font-weight: bold;
	inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
	content: var(--blazor-load-percentage-text, 'Loading');
}

/* ==========================================================================
   Responsive Layout System - Mobile-First Design
   ========================================================================== */

/* Mobile devices (phones in portrait) - 480px and below */
@media (max-width: 480px) {
	:root {
		--footer-height-visible: 60px; /* Smaller footer on mobile */
		--main-button-height: 50px; /* Smaller button height */
		--main-button-font-size: 1.3rem; /* Smaller font size - now uses global scaling */
		--main-button-padding: 0.4rem; /* Reduced padding */
		/* Note: Sidebar fonts now scale automatically via global root font-size */
	}
}

/* iPhone SE and similar devices - 375px and below */
@media (max-width: 375px) {
	:root {
		--footer-height-visible: 58px; /* Optimized for iPhone SE */
		--main-button-height: 48px; /* Compact but touch-friendly */
		--main-button-font-size: 1.25rem; /* Balanced font size for iPhone SE */
		--main-button-padding: 0.35rem; /* Optimized padding */
	}
}

/* Small mobile devices - 360px and below */
@media (max-width: 360px) {
	:root {
		--footer-height-visible: 55px; /* Even smaller footer */
		--main-button-height: 45px; /* Even smaller button */
		--main-button-font-size: 1.2rem; /* Even smaller font - now uses global scaling */
		--main-button-padding: 0.3rem; /* Minimal padding */
		/* Note: Sidebar fonts now scale automatically via global root font-size */
	}
}

/* Touch devices optimization */
@media (hover: none) and (pointer: coarse) {
	:root {
		/* Ensure adequate touch targets while keeping compact design */
		--main-button-height: max(
			var(--main-button-height),
			44px
		); /* Minimum 44px for touch */
	}
}

/* Utility classes for responsive design */
.footer-compact {
	--footer-height-visible: 55px !important;
	--main-button-height: 45px !important;
	--main-button-font-size: 1.2em !important;
}

.footer-spacious {
	--footer-height-visible: 80px !important;
	--main-button-height: 70px !important;
	--main-button-font-size: 1.6em !important;
}

/* ==========================================================================
   iOS Safari Keyboard Fix - Prevent Horizontal Expansion
   ========================================================================== */

/* iOS Safari specific fixes to prevent horizontal expansion when keyboard appears */
@supports (-webkit-touch-callout: none) {
	/* This targets iOS Safari specifically */
	html,
	body {
		position: fixed;
		overflow: hidden;
		width: 100%;
		height: 100%;
		/* Ensure text size adjustment is disabled on iOS Safari */
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	#app {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	/* Prevent input zoom on iOS Safari */
	input[type='text'],
	input[type='password'],
	input[type='email'],
	input[type='number'],
	textarea,
	select {
		font-size: 16px !important; /* Prevents zoom on iOS */
		transform: translateZ(0); /* Force hardware acceleration */
		-webkit-appearance: none;
		border-radius: 0; /* Remove iOS default styling */
	}

	/* Universal form container fixes for iOS - applies to all form containers */
	.login-container,
	.form-container,
	.install-notes-container,
	.flex-job-container,
	.grid-comp-crew-wrapper,
	.test-container,
	.component-container,
	div[class*='container'] {
		position: relative;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* Universal input styling for iOS - applies to text inputs only, excludes checkboxes and radio buttons */
	input[type='text'],
	input[type='password'],
	input[type='email'],
	input[type='number'],
	input[type='search'],
	input[type='tel'],
	input[type='url'],
	input[type='date'],
	input[type='datetime-local'],
	input[type='month'],
	input[type='time'],
	input[type='week'],
	textarea,
	select,
	.form-control,
	.e-input,
	.e-textbox,
	.e-float-input input,
	.e-float-input textarea,
	.e-control-wrapper input,
	.e-control-wrapper textarea {
		-webkit-appearance: none !important;
		border-radius: 8px !important;
		transform: translateZ(0) !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	/* Preserve native appearance for checkboxes and radio buttons on iOS */
	input[type='checkbox'],
	input[type='radio'] {
		-webkit-appearance: auto !important;
		transform: none !important;
	}
}

code {
	color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* ==========================================================================
   Syncfusion Spinner Color Override
   ========================================================================== */
/* Global override for all Syncfusion spinners to use brand orange color */
/* Material spinner uses stroke property */
.e-spinner-pane .e-spinner-inner .e-spin-material {
	stroke: var(--brand-highlight-orange) !important;
}

/* Bootstrap and Fabric spinners use border properties */
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap,
.e-spinner-pane .e-spinner-inner .e-spin-fabric {
	border-top-color: var(--brand-highlight-orange) !important;
	border-left-color: var(--brand-highlight-orange) !important;
	border-bottom-color: rgba(246, 174, 45, 0.3) !important;
	border-right-color: rgba(246, 174, 45, 0.3) !important;
}