/**
 * AFV Modular Forms - Mobile Optimization
 * Otimizações específicas para dispositivos móveis
 * Baseado em WCAG 2.2 AA e Flow Design System
 *
 * @package AFV_Simple_Portal
 * @version 2.0.0
 */

/* ============================================
   MOBILE-SPECIFIC OVERRIDES (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {

	/* Container e Spacing */
	.afvsp-form-wrapper {
		padding: 0.75rem;
	}

	.afvsp-form-block {
		padding: 1rem;
		margin-bottom: 1rem;
	}

	/* Header reduzido */
	.afvsp-form-header {
		margin-bottom: 1.5rem;
	}

	.afvsp-form-header h1 {
		font-size: 1.5rem;
	}

	.afvsp-form-subtitle {
		font-size: 0.9375rem;
	}

	/* Tabs verticais no mobile */
	.afvsp-form-tabs {
		margin-bottom: 1.5rem;
	}

	.afvsp-form-tab button {
		padding: 0.875rem 1rem;
		font-size: 0.9375rem;
	}

	/* Fields otimizados */
	.afvsp-form-field {
		margin-bottom: 1.25rem;
	}

	.afvsp-form-field label {
		font-size: 0.875rem;
		margin-bottom: 0.375rem;
	}

	/* Inputs com padding otimizado */
	.afvsp-form-field input,
	.afvsp-form-field select,
	.afvsp-form-field textarea {
		padding: 0.875rem;
		font-size: 16px; /* Evita zoom no iOS */
	}

	/* Help text menor */
	.afvsp-form-help {
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	/* Botões full-width no mobile */
	.afvsp-form-actions {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		gap: 0.75rem;
	}

	.afvsp-form-actions .afvsp-btn {
		padding: 1rem 1.25rem;
		font-size: 1rem;
	}

	/* Progress bar compacta */
	.afvsp-progress-bar-wrapper {
		padding: 0.75rem;
		margin-bottom: 1.5rem;
	}

	/* Alerts compactas */
	.afvsp-alert {
		padding: 0.875rem 1rem;
		gap: 0.5rem;
		font-size: 0.875rem;
	}

	.afvsp-alert-icon {
		font-size: 1.125rem;
	}

	/* Repeater items compactos */
	.afvsp-repeater-item {
		padding: 1rem;
	}

	.afvsp-repeater-remove {
		padding: 0.375rem;
		font-size: 1.125rem;
	}

	/* Grid sempre single column no mobile */
	.afvsp-form-grid,
	.afvsp-form-grid-2,
	.afvsp-form-grid-3 {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}
}

/* ============================================
   SMALL MOBILE (max-width: 374px)
   ============================================ */

@media (max-width: 374px) {

	.afvsp-form-wrapper {
		padding: 0.5rem;
	}

	.afvsp-form-block {
		padding: 0.875rem;
		border-radius: 8px;
	}

	.afvsp-form-header h1 {
		font-size: 1.375rem;
	}

	.afvsp-form-subtitle {
		font-size: 0.875rem;
	}

	.afvsp-form-block-title {
		font-size: 1.125rem;
	}

	.afvsp-form-field label {
		font-size: 0.8125rem;
	}

	.afvsp-form-field input,
	.afvsp-form-field select,
	.afvsp-form-field textarea {
		padding: 0.75rem;
	}

	.afvsp-form-grid {
		gap: 0.875rem;
	}

	.afvsp-btn {
		padding: 0.875rem 1rem;
		font-size: 0.9375rem;
	}
}

/* ============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {

	.afvsp-form-header {
		margin-bottom: 1rem;
	}

	.afvsp-form-header h1 {
		font-size: 1.375rem;
		margin-bottom: 0.25rem;
	}

	.afvsp-form-subtitle {
		font-size: 0.875rem;
	}

	.afvsp-form-block {
		margin-bottom: 0.875rem;
	}

	.afvsp-form-field {
		margin-bottom: 1rem;
	}

	/* Reduzir vertical padding */
	.afvsp-form-actions {
		margin-top: 1rem;
		padding-top: 1rem;
	}

	.afvsp-progress-bar-wrapper {
		margin-bottom: 1rem;
	}
}

/* ============================================
   TOUCH TARGET OPTIMIZATIONS (WCAG 2.2 AA)
   ============================================ */

@media (max-width: 767px) {

	/* Garantir tamanho mínimo de 44x44px para todos os elementos tocáveis */
	.afvsp-form-tab button {
		min-height: 48px;
		min-width: 44px;
	}

	.afvsp-btn {
		min-height: 48px;
		min-width: 44px;
	}

	.afvsp-checkbox-field input[type="checkbox"],
	.afvsp-radio-field input[type="radio"] {
		min-width: 22px;
		min-height: 22px;
	}

	/* Aumentar área de toque para checkboxes/radios */
	.afvsp-checkbox-field,
	.afvsp-radio-field {
		padding: 0.5rem 0;
	}

	.afvsp-repeater-remove {
		min-width: 44px;
		min-height: 44px;
	}

	.afvsp-repeater-add {
		min-height: 48px;
		padding: 0.875rem 1.25rem;
	}

	/* Select com altura mínima */
	select.afvsp-form-field {
		min-height: 48px;
	}
}

/* ============================================
   OVERFLOW PREVENTION
   ============================================ */

@media (max-width: 767px) {

	/* Prevenir overflow horizontal */
	.afvsp-form-wrapper {
		max-width: 100vw;
		overflow-x: hidden;
	}

	* {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* Imagens e mídia responsivas */
	img,
	video {
		max-width: 100%;
		height: auto;
	}

	/* Prevenir overflow em inputs longos */
	.afvsp-form-field input,
	.afvsp-form-field textarea {
		max-width: 100%;
	}

	/* Tables responsivas */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================
   FONT SIZE ACCESSIBILITY
   ============================================ */

@media (max-width: 767px) {

	/* Texto mínimo de 14px para leitura */
	body,
	.afvsp-form-wrapper {
		font-size: 14px;
	}

	/* Labels mínimo 14px */
	.afvsp-form-field label {
		font-size: 14px;
	}

	/* Inputs mínimo 16px (previne zoom iOS) */
	.afvsp-form-field input,
	.afvsp-form-field select,
	.afvsp-form-field textarea {
		font-size: 16px !important;
	}

	/* Help text mínimo 13px */
	.afvsp-form-help,
	.afvsp-form-error {
		font-size: 13px;
	}
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767px) {

	/* Reduzir shadows para melhor performance */
	.afvsp-form-block {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	}

	.afvsp-save-status {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* Simplificar gradientes */
	.afvsp-progress-fill {
		background: var(--afvsp-primary);
	}

	/* Usar transform em vez de propriedades que causam reflow */
	.afvsp-btn:hover {
		transform: none;
	}

	/* Reduzir animações */
	.afvsp-conditional-field.show {
		animation-duration: 0.2s;
	}
}

/* ============================================
   STICKY ELEMENTS NO MOBILE
   ============================================ */

@media (max-width: 767px) {

	/* Tabs fixas no topo durante scroll */
	.afvsp-form-tabs.sticky {
		position: sticky;
		top: 0;
		z-index: 100;
		background: white;
		padding: 0.5rem;
		margin: -0.5rem -0.5rem 1rem;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	/* Actions fixas no bottom */
	.afvsp-form-actions.sticky-bottom {
		position: sticky;
		bottom: 0;
		background: white;
		margin: 2rem -1rem -1rem;
		padding: 1rem;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
	}
}

/* ============================================
   FOCUS VISIBLE (Keyboard Navigation)
   ============================================ */

@media (max-width: 767px) {

	/* Melhorar indicadores de foco para navegação por teclado */
	*:focus-visible {
		outline: 3px solid var(--afvsp-primary);
		outline-offset: 2px;
	}

	.afvsp-btn:focus-visible {
		outline-offset: 3px;
	}
}

/* ============================================
   SAFE AREAS (iPhone X+)
   ============================================ */

@supports (padding: max(0px)) {
	@media (max-width: 767px) {

		.afvsp-form-wrapper {
			padding-left: max(1rem, env(safe-area-inset-left));
			padding-right: max(1rem, env(safe-area-inset-right));
		}

		.afvsp-form-actions.sticky-bottom {
			padding-bottom: max(1rem, env(safe-area-inset-bottom));
		}

		.afvsp-save-status {
			bottom: max(1rem, env(safe-area-inset-bottom));
			right: max(1rem, env(safe-area-inset-right));
		}
	}
}

/* ============================================
   DARK MODE NO MOBILE
   ============================================ */

@media (max-width: 767px) and (prefers-color-scheme: dark) {

	.afvsp-form-wrapper {
		background: #1a1a1a;
		color: #e2e8f0;
	}

	.afvsp-form-block {
		background: #2d2d2d;
		border-color: #404040;
	}

	.afvsp-form-field input,
	.afvsp-form-field select,
	.afvsp-form-field textarea {
		background: #1a1a1a;
		border-color: #404040;
		color: #e2e8f0;
	}

	.afvsp-form-block-title {
		color: #f1f5f9;
		border-color: #404040;
	}

	.afvsp-form-field label {
		color: #cbd5e1;
	}

	.afvsp-form-help {
		color: #94a3b8;
	}
}

/* ============================================
   ORIENTATION CHANGE HANDLING
   ============================================ */

@media (max-width: 767px) {

	/* Smooth transition quando mudar orientação */
	@media (orientation: portrait) {
		.afvsp-form-wrapper {
			transition: padding 0.3s ease;
		}
	}

	@media (orientation: landscape) {
		.afvsp-form-wrapper {
			transition: padding 0.3s ease;
		}
	}
}

/* ============================================
   PRINT ADJUSTMENTS NO MOBILE
   ============================================ */

@media print and (max-width: 767px) {

	.afvsp-form-wrapper {
		padding: 0;
	}

	.afvsp-form-block {
		page-break-inside: avoid;
		margin-bottom: 1rem;
		padding: 1rem;
	}

	.afvsp-form-field {
		margin-bottom: 0.75rem;
	}

	/* Ocultar elementos não necessários */
	.afvsp-progress-bar-wrapper,
	.afvsp-form-tabs {
		display: none;
	}
}

/* ============================================
   LOADING STATE NO MOBILE
   ============================================ */

@media (max-width: 767px) {

	.afvsp-loading::after {
		width: 24px;
		height: 24px;
		margin: -12px 0 0 -12px;
		border-width: 2px;
	}
}

/* ============================================
   CUSTOM SCROLLBAR (Webkit - Mobile Safari)
   ============================================ */

@media (max-width: 767px) {

	/* Scrollbar mais sutil no mobile */
	::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 0, 0, 0.3);
	}
}