/**
 * Field Inspection Styles
 * Mobile-optimized styles for field inspection camera interface
 */

/* Global mobile optimizations */
.field-inspection-container {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Prevent zoom on inputs */
.field-inspection-container input,
.field-inspection-container select,
.field-inspection-container textarea {
	font-size: 16px; /* Prevents iOS zoom */
}

/* Smooth scrolling for mobile */
.field-inspection-scroll {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

/* Touch-friendly button sizing */
.touch-target {
	min-width: 44px;
	min-height: 44px;
}

/* Animation utilities */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.fade-in {
	animation: fadeIn 0.3s ease;
}

.slide-up {
	animation: slideUp 0.3s ease;
}

/* Responsive utilities */
@media (max-width: 768px) {
	.hide-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.show-mobile {
		display: none !important;
	}
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
	.bottom-controls {
		padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
	}

	.top-bar {
		padding-top: calc(12px + env(safe-area-inset-top)) !important;
	}
}

/* Landscape mode adjustments */
@media (orientation: landscape) {
	.transcription-panel {
		bottom: 120px !important;
		max-height: 150px !important;
	}

	.bottom-controls {
		padding: 12px 16px 20px !important;
	}
}

/* Loading spinner sizes */
.spinner-small {
	width: 20px;
	height: 20px;
	border-width: 2px;
}

.spinner-medium {
	width: 40px;
	height: 40px;
	border-width: 3px;
}

.spinner-large {
	width: 60px;
	height: 60px;
	border-width: 4px;
}

/* Accessibility */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.capture-btn {
		border-width: 6px !important;
	}

	.voice-btn,
	.complete-btn {
		border-width: 3px !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Print styles */
@media print {
	.no-print {
		display: none !important;
	}
}

/* Camera viewport constraints */
#camera-video {
	background: #000;
	object-position: center;
}

/* Prevent pull-to-refresh on camera view */
body.camera-active {
	overscroll-behavior-y: contain;
	position: fixed;
	overflow: hidden;
}

/* Transcription text selection */
.transcription-text {
	user-select: text;
	-webkit-user-select: text;
}