/* ==========================================================================
   IPDS — Info Plus Design System
   File:    formField.css
   Version: 2.2.3 (zerar border-radius herdado de .ui-button)
   --------------------------------------------------------------------------
   Estilos base para componentes de formulário (TextField, NumberField,
   ComboBox, TextArea, RadioGroup, CheckBox, DateTimeField, FileField).

   MUDANÇAS DA v2.2.2 → v2.2.3:
     • NumberField: zerado border-radius e font-weight no .ui-spinner-button
       base. A regra global ".ui-button { border-radius: var(...); }" no
       jquery-ui.ipds.theme.css cascateava para os botões do spinner
       (que têm class="ui-button"), aplicando radius em TODOS os cantos
       e criando aspecto de "pílula" em cada botão individual. Agora o
       radius é aplicado só onde faz sentido: top-right do up, bottom-right
       do down, alinhado com o radius do container do input.

   MUDANÇAS DA v2.2.1 → v2.2.2:
     • Setas do NumberField agora desenhadas via "border-triangle trick"
       (bordas CSS puras) em vez de glyphs Unicode (▲▼). Causa: Inter, SF
       Pro Display e fallbacks do sistema não tinham os glyphs Unicode
       desenhados, então as setas ficavam invisíveis. Bordas CSS funcionam
       em qualquer fonte/browser/contexto, sem dependências externas.
       As setas usam currentColor, então herdam a cor do botão (navy-700
       default, navy-900 hover, blue-700 active).

   MUDANÇAS DA v2.2.0 → v2.2.1:
     • NumberField — visual ajustado:
       - Setas migradas de Material Symbols (keyboard_arrow_up/down) para
         caracteres Unicode (▲ ▼). Os Material Symbols não estavam
         renderizando corretamente nos pseudo-elements e ficaram invisíveis;
         o Unicode renderiza com qualquer fonte.
       - Background dos botões agora é transparente (era navy-50). Mais leve
         visualmente, deixa o foco no input. O navy-50 reaparece só no hover.
       - Botões com 20×16px (era 22×16px) — mais discretos.
       - Border-left dos botões em navy-100 (era border-default mais escuro).
       - Cor das setas: navy-500 default → navy-900 hover → blue-700 active.

   MUDANÇAS DA v2.1.1 → v2.2.0:
     • NumberField totalmente reformulado:
       - Container .ui-spinner ganha border + radius IPDS, hover e
         focus-within (em vez de border:0 que deixava o input "solto").
       - Botões up/down empilhados verticalmente à direita via position
         absolute, cada um com altura 50% do input (16px) e largura 22px.
         Antes: 13.5×17px inline pelo JS, deixavam ~5px sem cobertura
         vertical e visual quebrado.
       - Setas migradas do sprite do jQuery UI (triangle-1-n / triangle-1-s,
         que estavam com problemas de renderização) para Material Symbols
         (keyboard_arrow_up, keyboard_arrow_down) via pseudo-elements.
       - Estados hover (navy-100), active (blue-50), disabled (opacity 0.4)
         seguindo paleta IPDS.
       - Container de moeda (R$, $) reposicionado: agora top:50% transform
         translateY(-50%) em vez de bottom:4px, ficando alinhado ao centro
         vertical do input independente da altura.

   MUDANÇAS DA v2.1.0 → v2.1.1:
     • Fix overflow horizontal: o .chosen-single (texto visível do Chosen
       combobox) ganhou overflow:hidden + text-overflow:ellipsis +
       white-space:nowrap. Sem isso, opções com nomes longos (ex.: razões
       sociais de banco) estouravam ~15px e criavam scrollbar horizontal
       no dialog. A fonte 13px (versus 12px antiga) tornou o problema
       mais frequente, mas a causa real é texto longo sem clipping.

   MUDANÇAS DA v2.0 → v2.1:
     • Tipografia uniformizada: todos os campos de entrada (input, select,
       textarea, Chosen, flatpickr, file) passam a usar var(--ipds-input-font-size)
       (= 14px). Anteriormente eram 12px hardcoded.
     • Altura padrão dos inputs: 25px → 32px (var(--ipds-input-height)).
       Necessário para acomodar a fonte 14px sem cortar o texto.
     • Padding ajustado para usar tokens (--ipds-input-padding-x/y).
     • Container .divFormField teve altura reajustada de 25px para 32px,
       e .divFormField.empilhado de 45px para 50px, para acomodar a nova
       altura dos inputs.
     • Margin-top da label flutuante: 7px → 10px (centraliza no input maior).

   IMPACTO VISUAL ESPERADO:
     • Inputs ficam ~7px mais altos. Formulários ocupam mais espaço vertical.
     • Texto fica MAIS LEGÍVEL (era 12px Verdana, agora 14px Inter).
     • Layouts com altura calculada/fixa podem precisar de ajuste fino.

   MUDANÇAS DA v1 → v2:
     • Fontes hardcoded substituídas por tokens IPDS
       (verdana, sans-serif → var(--ipds-font-sans))
       (calibri, sans-serif → var(--ipds-font-sans))
     • Cores hardcoded substituídas por tokens
       (silver, rgb(143, 143, 157), white)
     • Variável legada (--corTitulo) substituída pelo semântico (--ipds-text-primary)
     • Tamanhos canônicos (10px, 14px, 16px) passam a usar tokens IPDS
     • ZERO mudanças de classe, comportamento ou layout

   IMPACTO VISUAL ESPERADO:
     • Inputs e selects ganham fonte Inter no lugar de Verdana — mais estreita,
       moderna e legível em telas de alta densidade. Layouts apertados podem
       sobrar 1-2 caracteres a mais por linha.
     • Bordas de inputs passam a ter tom navy levemente azulado em vez de
       cinza puro (silver). Mais elegante, mais sutil.
     • Símbolo de moeda (R$) no NumberField passa a usar Inter em vez de Calibri.

   COMPATIBILIDADE COM HTML EXISTENTE: 100%
     Nenhuma classe foi renomeada, removida ou teve sua estrutura alterada.

   FONTE DE SENHA MASCARADA:
     A fonte 'text-security-disc' é mantida como está — é específica para
     mascarar caracteres em campo de senha e não tem equivalente IPDS.
   ========================================================================== */


/* ========== FONTE PARA CAMPO DE SENHA MASCARADO ========== */
@font-face {
	font-family: 'text-security-disc';
	src: url('fonts/text-security-disc.woff2') format('woff2'),
	     url('fonts/text-security-disc.woff') format('woff');
}

input.passwordMasked {
	font-family: 'text-security-disc' !important;
	-webkit-text-security: disc;
}


/* ========== LABEL (Container de todos os FormFields) ========== */
.divFormField {
	height: var(--ipds-input-height);
	position: relative;
	vertical-align: bottom;
	cursor: default;
	display: inline-block;
	margin-bottom: 10px;
}

/* Label empilhado (label acima do campo) */
.divFormField.empilhado {
	height: 50px;
}


/* ========== SPAN (Texto do label) ========== */
.nomeCampo {
	float: left;
}

/* Span em layout horizontal (label ao lado do campo) */
.divFormField:not(.empilhado) .nomeCampo {
	margin-top: 10px;
	margin-right: 10px;
	text-align: right;
}

/* Span em layout empilhado (label acima do campo) */
.divFormField.empilhado .nomeCampo {
	margin-top: 0;
	margin-right: 0;
	text-align: left;
}


/* ========== TEXTFIELD (input type="text") ========== */
.divFormField input[type="text"],
.divFormField input[type="password"],
.divFormField input:not([type]) {
	height: var(--ipds-input-height);
	padding: var(--ipds-input-padding-y) var(--ipds-input-padding-x);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-input-radius);
}

.divFormField.empilhado input[type="text"],
.divFormField.empilhado input[type="password"],
.divFormField.empilhado input:not([type]) {
	display: inline-block;
	margin-top: 2px;
}


/* ==========================================================================
   NUMBERFIELD — input numérico com spinner

   Estrutura DOM gerada pelo formfield.js:

     <span class="ui-spinner ui-widget ui-widget-content">
         <div class="containerMoeda">R$</div>     <!-- opcional -->
         <input type="text" />
         <a class="ui-spinner-button ui-spinner-up">
             <span class="ui-button-icon ui-icon ui-icon-triangle-1-n"></span>
         </a>
         <a class="ui-spinner-button ui-spinner-down">
             <span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span>
         </a>
     </span>

   ESTRATÉGIA:
     - Container .ui-spinner com border + radius (substitui visual do jQuery UI)
     - Botões empilhados verticalmente à direita via position:absolute, cada um
       com altura 50% do input (16px se input = 32px)
     - Setas via Material Symbols (esconde o sprite do jQuery UI antigo)
     - Estados hover/active/focus-within seguindo paleta IPDS
   ========================================================================== */

.divFormField .ui-spinner {
	display: inline-block;
	position: relative;
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-input-radius);
	background: var(--ipds-input-bg);
	transition: var(--ipds-transition-fast);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.divFormField .ui-spinner:hover {
	border-color: var(--ipds-input-border-hover);
}

.divFormField .ui-spinner:focus-within {
	border-color: var(--ipds-input-border-focus);
	box-shadow: var(--ipds-input-shadow-focus);
}

/* Input dentro do spinner — sem borda própria, herda do container */
.divFormField .ui-spinner input {
	height: var(--ipds-input-height);
	padding: var(--ipds-input-padding-y) var(--ipds-input-padding-x);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	color: var(--ipds-input-text);
	border: none;
	background: transparent;
	box-shadow: none;
	outline: none;
	margin: 0 !important;
	box-sizing: border-box;
}

.divFormField .ui-spinner input:focus {
	border: none;
	box-shadow: none;
}

/* Container empilhado mobile — ajuste vertical do span */
.divFormField.empilhado .ui-spinner {
	margin-top: 2px;
}


/* ===== BOTÕES UP / DOWN ============================================== */

.divFormField .ui-spinner-button {
	/* !important para sobrescrever quaisquer dimensões inline legadas */
	position: absolute !important;
	right: 0 !important;
	width: 20px !important;
	/* Cada botão = 50% da altura do input (16px com input de 32px) */
	height: calc(var(--ipds-input-height) / 2) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent;
	border: none;
	border-left: 1px solid var(--ipds-border-default);
	/* IMPORTANTE: zerar border-radius e font-weight herdados de .ui-button
	   (regra global no jquery-ui.ipds.theme.css). Sem isso, cada botão
	   ganha radius em TODOS os cantos, criando aspecto de "pílula" em vez
	   de cantos retos no lado interno. Os cantos externos (canto superior
	   direito do up, canto inferior direito do down) recebem radius
	   específico nas regras .ui-spinner-up / .ui-spinner-down abaixo. */
	border-radius: 0;
	font-weight: normal;
	color: var(--ipds-text-secondary);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
	user-select: none;
}

.divFormField .ui-spinner-up {
	top: 0 !important;
	border-top-right-radius: var(--ipds-input-radius);
	border-bottom: 1px solid var(--ipds-border-default);
}

.divFormField .ui-spinner-down {
	bottom: 0 !important;
	border-bottom-right-radius: var(--ipds-input-radius);
}

.divFormField .ui-spinner-button:hover {
	background: var(--ipds-state-hover-bg);
	color: var(--ipds-text-primary);
}

.divFormField .ui-spinner-button:active {
	background: var(--ipds-color-blue-50);
	color: var(--ipds-color-blue-700);
}

/* Esconde sprite do jQuery UI (ui-icon-triangle-1-n / ui-icon-triangle-1-s).
   O ícone real vem via caractere Unicode no pseudo-element abaixo. */
.divFormField .ui-spinner-button .ui-button-icon,
.divFormField .ui-spinner-button .ui-icon {
	display: none !important;
}

/* Setas desenhadas via "border-triangle trick" — usa bordas para criar
   um triângulo geométrico. Não depende de fonte (Inter, fontes do sistema
   e Material Symbols não tinham os glyphs ▲▼ disponíveis nesta página).
   Funciona em qualquer browser, qualquer contexto. */
.divFormField .ui-spinner-up::before,
.divFormField .ui-spinner-down::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.divFormField .ui-spinner-up::before {
	/* Triângulo apontando pra cima: border-bottom em cor sólida */
	border-bottom: 5px solid currentColor;
}

.divFormField .ui-spinner-down::before {
	/* Triângulo apontando pra baixo: border-top em cor sólida */
	border-top: 5px solid currentColor;
}


/* ===== ESTADOS DESABILITADOS ========================================= */

.divFormField .ui-spinner.ineditavel,
.divFormField .ui-spinner:has(input:disabled),
.divFormField .ui-spinner:has(input[readonly]) {
	background: var(--ipds-state-disabled-bg);
}

.divFormField .ui-spinner:has(input:disabled) .ui-spinner-button,
.divFormField .ui-spinner:has(input[readonly]) .ui-spinner-button {
	pointer-events: none;
	opacity: 0.4;
}


/* ===== CONTAINER DE MOEDA (R$, US$, etc) ============================= */

.divFormField .containerMoeda {
	position: absolute;
	left: var(--ipds-input-padding-x);
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	color: var(--ipds-text-secondary);
	pointer-events: none;
	z-index: 1;
	width: auto;
	padding: 0;
}

/* Quando há moeda, abre espaço à esquerda do texto do input */
.divFormField .ui-spinner:has(.containerMoeda) input {
	padding-left: 28px;
}


/* ========== COMBOBOX (select) ========== */
.divFormField select {
	height: var(--ipds-input-height);
	border: 1px solid var(--ipds-border-default);
	background-color: var(--ipds-bg-surface);
	padding: var(--ipds-input-padding-y) var(--ipds-input-padding-x);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
}

.divFormField.empilhado select {
	margin-top: 2px;
}

/* Span do ComboBox tem margin-top menor */
.divFormField:not(.empilhado) select ~ .nomeCampo,
.divFormField:not(.empilhado) .chosen-container ~ .nomeCampo {
	margin-top: 2px;
}

/* Chosen ComboBox */
.divFormField .chosen-container {
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
}

/* Texto longo dentro do Chosen é clipado com ellipsis em vez de estourar
   o container. Sem isso, opções com nomes muito longos (ex.: bancos com
   razão social completa) causam overflow horizontal no dialog/form. */
.divFormField .chosen-container .chosen-single,
.divFormField .chosen-container .chosen-single span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.divFormField.empilhado .chosen-container {
	margin-top: 2px;
}


/* ========== TEXTAREA ========== */
.divFormField textarea {
	padding: var(--ipds-input-padding-y) var(--ipds-input-padding-x);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	border: 1px solid var(--ipds-border-default);
}

.divFormField.empilhado textarea {
	margin-top: 2px;
}

/* TextArea empilhado - altura automática para crescer com o textarea */
.divFormField.empilhado:has(textarea) {
	height: auto;
}

/* O <br> de clear:both é desnecessário dentro do flex column e cria espaço extra no Chrome */
.divFormField.empilhado:has(textarea) > br {
	display: none;
}

.divFormField:not(.empilhado) textarea ~ .nomeCampo {
	margin-top: 5px;
}


/* ========== RADIO (input type="radio") ========== */
.divFormField input[type="radio"] {
	border: 1px solid var(--ipds-border-default);
	float: left;
	margin-right: 3px;
}

.divFormField input[type="radio"] ~ .nomeCampo {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 0;
	text-align: left;
	float: none;
}

.divFormField.empilhado input[type="radio"] {
	margin-top: 15px;
}


/* ========== CHECKBOX (input type="checkbox") ========== */
.divFormField input[type="checkbox"] {
	border: 1px solid var(--ipds-border-default);
	margin-right: 3px;
	margin-left: 0;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
}

.divFormField input[type="checkbox"] ~ .nomeCampo {
	vertical-align: middle;
	margin-top: 0;
	margin-right: 0;
	text-align: left;
	float: none;
}


/* ========== DATETIMEFIELD ========== */
.divFormField input.flatpickr-input {
	height: var(--ipds-input-height);
	padding: var(--ipds-input-padding-y) var(--ipds-input-padding-x);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-input-radius);
}

.divFormField.empilhado input.flatpickr-input {
	display: inline-block;
	margin-top: 2px;
}


/* ========== FILEFIELD ========== */
.divFormField input[type="file"] {
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
}


/* ========== LARGURAS PADRÃO ========== */
/* Elemento (input, select, textarea) */
.divFormField input:not([type="checkbox"]):not([type="radio"]),
.divFormField select,
.divFormField textarea {
	width: calc(100% - 20px);
}


/* ========== RESPONSIVO - MOBILE ========== */
@media (max-width: 768px) {
	/* Layout empilhado forçado no mobile */
	.divFormField {
		display: block !important;
		height: auto !important;
		margin-bottom: 10px !important;
	}

	/* Width 100% apenas para divFormField que NÃO estão dentro de fieldset (RadioGroup) */
	:not(fieldset) > .divFormField {
		width: 100% !important;
	}

	/* RadioGroup - fieldset responsivo */
	fieldset {
		display: block !important;
		width: calc(100% - 10px) !important;
		max-width: calc(100% - 10px) !important;
		height: auto !important;
		box-sizing: border-box !important;
		padding: 5px !important;
		margin: 0 !important;
		overflow: visible !important;
	}

	/* RadioGroup - cada radio em linha separada no retrato */
	fieldset > .divFormField {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-bottom: 5px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		float: none !important;
		position: relative !important;
		left: auto !important;
		box-sizing: border-box !important;
		clear: both !important;
	}

	/* Remover <br> do RadioGroup vertical no mobile */
	fieldset > br {
		display: none !important;
	}

	fieldset > legend {
		display: inline-block !important;
		width: auto !important;
		margin-bottom: 5px !important;
		float: none !important;
	}

	/* Campos COM botões ao lado - usar flexbox */
	.divFormField.temBotoesAoLado {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-end !important;
		gap: 5px !important;
	}

	/* Campo expande para ocupar espaço restante */
	.divFormField.temBotoesAoLado input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	.divFormField.temBotoesAoLado select,
	.divFormField.temBotoesAoLado .chosen-container {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: 0 !important;
		max-width: none !important;
	}

	/* Botões mantêm largura fixa */
	.divFormField.temBotoesAoLado .ui-button,
	.divFormField.temBotoesAoLado button,
	.divFormField.temBotoesAoLado [class*="button"] {
		flex-shrink: 0 !important;
	}

	/* Span (label text) ocupa linha inteira */
	.divFormField .nomeCampo {
		display: block !important;
		width: 100% !important;
		float: none !important;
		margin: 0 0 4px 0 !important;
		text-align: left !important;
	}

	/* Label em flexbox - gap já cuida do espaçamento */
	.divFormField.temBotoesAoLado .nomeCampo {
		flex-basis: 100% !important;
		margin-bottom: 0 !important;
	}

	/* Span de checkbox/radio fica inline (na mesma linha) */
	.divFormField input[type="checkbox"] ~ .nomeCampo,
	.divFormField input[type="radio"] ~ .nomeCampo {
		display: inline !important;
		width: auto !important;
		vertical-align: middle !important;
		margin: 0 !important;
	}

	/* Esconder <br> no mobile - usamos margin no span */
	.divFormField br {
		display: none !important;
	}

	/* Campos SEM botões - ocupam 100% da largura */
	/* No mobile, Chosen é desativado então select.chosenComboBox vira select normal */
	.divFormField:not(.temBotoesAoLado) input:not([type="checkbox"]):not([type="radio"]),
	.divFormField:not(.temBotoesAoLado) select,
	.divFormField:not(.temBotoesAoLado) textarea,
	.divFormField:not(.temBotoesAoLado) .chosen-container,
	.divFormField:not(.temBotoesAoLado) .ui-spinner {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Altura mínima para touch - inputs e selects */
	.divFormField input:not([type="checkbox"]):not([type="radio"]),
	.divFormField select {
		min-height: 30px !important;
		font-size: var(--ipds-font-size-md) !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
	}

	/* Remover margin-top de todos os campos no mobile */
	.divFormField select,
	.divFormField textarea,
	.divFormField .chosen-container,
	.divFormField .ui-spinner,
	.divFormField.empilhado select,
	.divFormField.empilhado .chosen-container {
		margin-top: 0 !important;
	}

	/* TextArea mantém altura flexível */
	.divFormField textarea {
		min-height: 60px !important;
		font-size: var(--ipds-font-size-md) !important;
	}

	/* Checkbox e Radio */
	.divFormField input[type="checkbox"],
	.divFormField input[type="radio"] {
		width: 18px !important;
		height: 18px !important;
		margin-right: 5px !important;
	}

	/* Chosen ComboBox responsivo - alinhar à esquerda como inputs */
	.divFormField .chosen-container,
	.divFormField.temBotoesAoLado .chosen-container {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		left: 0 !important;
		flex: none !important;
	}

	.divFormField .chosen-container .chosen-single {
		height: 30px !important;
		line-height: 28px !important;
		padding: 0 8px !important;
		font-size: var(--ipds-font-size-md) !important;
		margin-left: 0 !important;
	}

	.divFormField .chosen-container .chosen-single span {
		line-height: 30px !important;
	}

	.divFormField .chosen-container .chosen-single div {
		top: 4px !important;
	}

	.divFormField .chosen-container .chosen-drop {
		max-height: 200px !important;
	}

	.divFormField .chosen-container .chosen-results li {
		padding: 10px !important;
		font-size: var(--ipds-font-size-lg) !important;
	}

	/* Esconder spinner buttons no mobile - usuário usa teclado numérico */
	.divFormField .ui-spinner-button {
		display: none !important;
	}

	/* Input do spinner ocupa largura total sem os botões */
	.divFormField .ui-spinner input {
		border-radius: var(--ipds-radius-xs) !important;
	}
}


/* ========== RESPONSIVO - TELAS MUITO PEQUENAS ========== */
@media (max-width: 480px) {
	.divFormField input:not([type="checkbox"]):not([type="radio"]),
	.divFormField select:not(.chosenComboBox) {
		min-height: 32px !important;
	}

	.divFormField .chosen-container .chosen-single {
		height: 32px !important;
		line-height: 30px !important;
	}

	.divFormField .chosen-container .chosen-single span {
		line-height: 32px !important;
	}

	.divFormField .nomeCampo {
		font-size: var(--ipds-font-size-base) !important;
	}
}