/* ==========================================================================
   IPDS — Info Plus Design System
   File:    ipds.chosen.css
   Version: 1.0.2 (forçar input do search a 100% para alinhar com a lupa)
   --------------------------------------------------------------------------
   Override completo do Chosen 1.8.7 (Harvest jQuery port).

   MUDANÇAS DA v1.0.1 → v1.0.2:
     • Forçado width: 100% !important + box-sizing: border-box no input do
       .chosen-search. O JS do Chosen aplica um width inline no input
       (geralmente baseado no select original), o que pode deixar o input
       menor que o container .chosen-search. Como o ícone de lupa é um
       pseudo-element do .chosen-search, ele ficava posicionado "fora"
       do input. Forçando o input a 100%, lupa e input ficam alinhados.

   MUDANÇAS DA v1.0.0 → v1.0.1:
     • Aumentado o espaçamento entre o input de busca (.chosen-search input)
       e o ícone de lupa: padding-right do input 32px → 36px, e o "right"
       da pseudo-element ::after de 8px → 14px (relativos ao .chosen-search).
       Resultado: gap visual de ~14px entre a borda direita do input e a
       lupa, em vez dos ~8px anteriores.

   ESTRATÉGIA:
     • Mantém TODAS as classes do Chosen (.chosen-container, .chosen-single,
       .chosen-drop, .chosen-results, .search-choice, etc.) — só rebrand
       visual, zero mudança no JS da lib.
     • Substitui chosen-sprite.png/chosen-sprite@2x.png por Material Symbols
       renderizados via pseudo-elements.
     • Remove gradients legados (efeito "vidro" datado), usa fundos sólidos.
     • Estados visuais alinhados com inputs e botões IPDS (border navy-200,
       hover navy-300, focus blue-500 + shadow-focus, etc.)
     • Multi-select (search-choice) renderizado como chips estilo IPDS.

   COMO USAR:
     1. Manter chosen.jquery.js (lib JS continua igual).
     2. SUBSTITUIR chosen.css por ipds.chosen.css no JSP/HTML.
     3. (Opcional) Remover chosen-sprite.png e chosen-sprite@2x.png — não
        são mais usados.

   COMPATIBILIDADE: 100% com Chosen 1.8.7. Nenhuma classe removida.
   DEPENDE DE: ipds.tokens.css, material-symbols.css
   ========================================================================== */


/* ==========================================================================
   1. CONTAINER BASE
   ========================================================================== */
.chosen-container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	color: var(--ipds-input-text);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.chosen-container * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Garante altura padronizada com inputs IPDS (override do !important: 25px
   que existia no chosen.css original) */
.chosen-container,
.chosen-container .chosen-single,
.chosen-container .chosen-single span {
	height: var(--ipds-input-height) !important;
}

/* Group label (quando há optgroup) */
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
	margin-right: 4px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: var(--ipds-font-weight-medium);
	color: var(--ipds-text-muted);
}

.chosen-container .search-choice .group-name::after,
.chosen-container .chosen-single .group-name::after {
	content: ":";
	padding-left: 2px;
	vertical-align: top;
}


/* ==========================================================================
   2. SINGLE CHOSEN — campo "fechado" mostrando opção selecionada
   ========================================================================== */
.chosen-container-single .chosen-single {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 var(--ipds-input-padding-x);
	height: var(--ipds-input-height);
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-input-radius);
	background: var(--ipds-input-bg);
	color: var(--ipds-input-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ipds-transition-fast);
	box-shadow: none;
}

.chosen-container-single .chosen-single:hover {
	border-color: var(--ipds-input-border-hover);
}

/* Placeholder ("Selecione uma opção") */
.chosen-container-single .chosen-default {
	color: var(--ipds-input-placeholder);
}

/* Texto da opção selecionada */
.chosen-container-single .chosen-single span {
	flex: 1;
	display: block;
	overflow: hidden;
	margin-right: 26px;             /* espaço para a seta */
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--ipds-font-weight-regular);
	line-height: var(--ipds-input-height);
}

/* Quando há botão X de deselect, dá mais espaço */
.chosen-container-single .chosen-single-with-deselect span {
	margin-right: 50px;
}


/* ----- Botão X de deselect (substitui sprite por Material Symbol) ----- */
.chosen-container-single .chosen-single abbr {
	position: absolute;
	top: 50%;
	right: 28px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: none;               /* remove sprite */
	border-radius: var(--ipds-radius-xs);
	cursor: pointer;
	font-size: 1px;
	transition: background 150ms;
}

.chosen-container-single .chosen-single abbr::before {
	content: 'close';
	font-family: 'Material Symbols Outlined';
	font-size: 16px;
	color: var(--ipds-text-muted);
	transition: color 150ms;
}

.chosen-container-single .chosen-single abbr:hover {
	background: var(--ipds-state-hover-bg);
}

.chosen-container-single .chosen-single abbr:hover::before {
	color: var(--ipds-text-primary);
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover::before {
	color: var(--ipds-text-muted);
}


/* ----- Seta caret (substitui sprite por Material Symbol) ----- */
.chosen-container-single .chosen-single div {
	position: absolute;
	top: 0;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 100%;
	pointer-events: none;
	background: transparent !important;     /* remove gradient legado */
	border: none !important;
}

.chosen-container-single .chosen-single div b {
	display: block;
	width: 100%;
	height: 100%;
	background: none !important;             /* remove sprite */
	position: relative;
}

.chosen-container-single .chosen-single div b::before {
	content: 'expand_more';
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
	color: var(--ipds-text-secondary);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 200ms ease;
}

/* Seta rotaciona quando dropdown está aberto */
.chosen-container-active.chosen-with-drop .chosen-single div b::before {
	transform: translate(-50%, -50%) rotate(180deg);
}


/* ==========================================================================
   3. SEARCH INPUT (dentro do dropdown — busca)
   ========================================================================== */
.chosen-container-single .chosen-search {
	position: relative;
	z-index: 1010;
	margin: 0;
	padding: var(--ipds-space-3);
	border-bottom: 1px solid var(--ipds-border-subtle);
	background: var(--ipds-bg-surface);
	white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
	margin: 0;
	padding: 6px 36px 6px 10px;     /* padding-right reservando espaço para a lupa + gap */
	/* width 100% com !important: o JS do Chosen aplica width inline no input
	   (geralmente baseado no select original, ignorando o container do drop).
	   Sem !important, o input fica menor que o .chosen-search e a lupa
	   posicionada em relação ao .chosen-search aparece "fora" do input. */
	width: 100% !important;
	box-sizing: border-box;
	height: auto;
	min-height: 28px;
	outline: 0;
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-radius-sm);
	background: var(--ipds-bg-surface);
	color: var(--ipds-input-text);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	line-height: normal;
	transition: var(--ipds-transition-fast);
	box-shadow: none;
}

.chosen-container-single .chosen-search input[type="text"]:focus {
	border-color: var(--ipds-input-border-focus);
	box-shadow: var(--ipds-input-shadow-focus);
}

.chosen-container-single .chosen-search input[type="text"]::placeholder {
	color: var(--ipds-input-placeholder);
}

/* Ícone de lupa via Material Symbol — afastado ~14px da borda direita
   do input para dar espaço visual entre texto digitado e o ícone. */
.chosen-container-single .chosen-search::after {
	content: 'search';
	font-family: 'Material Symbols Outlined';
	font-size: 16px;
	color: var(--ipds-text-muted);
	position: absolute;
	right: calc(var(--ipds-space-3) + 14px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Quando o select é "no_results_text: false" (sem busca), esconde o input */
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	-webkit-clip-path: inset(100% 100%);
	clip-path: inset(100% 100%);
}


/* ==========================================================================
   4. DROP (caixa do dropdown)
   ========================================================================== */
.chosen-container .chosen-drop {
	position: absolute;
	top: calc(100% + 2px);          /* pequeno gap entre input e drop */
	left: 0;
	z-index: 1010;
	width: 100%;
	border: 1px solid var(--ipds-border-default);
	border-radius: var(--ipds-radius-md);
	background: var(--ipds-bg-surface);
	box-shadow: var(--ipds-shadow-md);
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	-webkit-clip-path: inset(100% 100%);
	clip-path: inset(100% 100%);
}

.chosen-container.chosen-with-drop .chosen-drop {
	clip: auto;
	-webkit-clip-path: none;
	clip-path: none;
	animation: ipds-chosen-fadein 150ms ease-out;
}

@keyframes ipds-chosen-fadein {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   5. RESULTS (lista de opções)
   ========================================================================== */
.chosen-container .chosen-results {
	color: var(--ipds-text-primary);
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	max-height: 280px;
	-webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
	display: none;
	margin: 0;
	padding: 8px 12px;
	list-style: none;
	line-height: 1.4;
	word-wrap: break-word;
	-webkit-touch-callout: none;
	transition: background 100ms;
}

.chosen-container .chosen-results li.active-result {
	display: list-item;
	cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
	display: list-item;
	color: var(--ipds-text-muted);
	cursor: default;
}

/* Item destacado (hover do mouse OU navegação por teclado) */
.chosen-container .chosen-results li.highlighted {
	background: var(--ipds-state-hover-bg);
	color: var(--ipds-text-primary);
	cursor: pointer !important;
}

/* Sem resultados ("No results match...") */
.chosen-container .chosen-results li.no-results {
	color: var(--ipds-text-muted);
	display: list-item;
	background: var(--ipds-bg-subtle);
	text-align: center;
	font-style: italic;
	padding: 12px;
	cursor: default;
}

/* Group header (label de optgroup) */
.chosen-container .chosen-results li.group-result {
	display: list-item;
	font-weight: var(--ipds-font-weight-semibold);
	font-size: var(--ipds-font-size-xs);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ipds-text-secondary);
	cursor: default;
	padding: 12px 12px 4px;
	background: transparent;
}

/* Item dentro de group fica indentado */
.chosen-container .chosen-results li.group-option {
	padding-left: 24px;
}

/* Marcação de busca (parte do texto que casa com o termo procurado) */
.chosen-container .chosen-results li em {
	font-style: normal;
	font-weight: var(--ipds-font-weight-semibold);
	background: var(--ipds-color-gold-100);
	color: var(--ipds-text-on-gold);
	padding: 0 2px;
	border-radius: var(--ipds-radius-xs);
	text-decoration: none;
}


/* ==========================================================================
   6. MULTI CHOSEN — múltiplas seleções com chips
   ========================================================================== */
.chosen-container-multi .chosen-choices {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin: 0;
	padding: 4px;
	width: 100%;
	min-height: var(--ipds-input-height);
	height: auto !important;        /* override do height: 25px do original */
	border: 1px solid var(--ipds-input-border);
	border-radius: var(--ipds-input-radius);
	background: var(--ipds-input-bg);
	cursor: text;
	transition: var(--ipds-transition-fast);
	overflow: hidden;
}

.chosen-container-multi .chosen-choices:hover {
	border-color: var(--ipds-input-border-hover);
}

.chosen-container-multi .chosen-choices li {
	float: none;                    /* override original */
	list-style: none;
	margin: 0;
}

/* Campo de busca/digitação dentro do multi */
.chosen-container-multi .chosen-choices li.search-field {
	flex: 1;
	min-width: 60px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	margin: 0;
	padding: 0 4px;
	width: 100%;
	height: 22px;
	outline: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none;
	color: var(--ipds-input-text);
	font-size: var(--ipds-input-font-size);
	font-family: var(--ipds-font-sans);
	line-height: normal;
	border-radius: 0;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"]::placeholder {
	color: var(--ipds-input-placeholder);
}


/* ----- Chips (search-choice) — opções já selecionadas ----- */
.chosen-container-multi .chosen-choices li.search-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 2px 26px 2px 8px;
	border: 1px solid var(--ipds-border-subtle);
	border-radius: var(--ipds-radius-sm);
	max-width: 100%;
	background: var(--ipds-bg-subtle);
	background-image: none;          /* remove gradient legado */
	color: var(--ipds-text-primary);
	font-size: var(--ipds-input-font-size);
	line-height: 1.4;
	cursor: default;
	box-shadow: none;
	transition: var(--ipds-transition-fast);
}

.chosen-container-multi .chosen-choices li.search-choice:hover {
	background: var(--ipds-state-hover-bg);
	border-color: var(--ipds-border-default);
}

.chosen-container-multi .chosen-choices li.search-choice span {
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Botão X de remover chip */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: none;               /* remove sprite */
	border-radius: var(--ipds-radius-xs);
	font-size: 1px;
	cursor: pointer;
	transition: background 150ms;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
	content: 'close';
	font-family: 'Material Symbols Outlined';
	font-size: 14px;
	color: var(--ipds-text-secondary);
	transition: color 150ms;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
	background: var(--ipds-border-default);
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover::before {
	color: var(--ipds-text-primary);
}

/* Chip desabilitado */
.chosen-container-multi .chosen-choices li.search-choice-disabled {
	background: var(--ipds-state-disabled-bg);
	background-image: none;
	border-color: var(--ipds-border-subtle);
	color: var(--ipds-text-muted);
	padding-right: 8px;
	cursor: not-allowed;
}

/* Chip em foco (durante navegação por teclado) */
.chosen-container-multi .chosen-choices li.search-choice-focus {
	background: var(--ipds-color-blue-50);
	border-color: var(--ipds-color-blue-500);
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close::before {
	color: var(--ipds-color-blue-700);
}

.chosen-container-multi .chosen-results {
	margin: 0;
	padding: 0;
}

/* Opção já selecionada na lista do multi (fica disabled) */
.chosen-container-multi .chosen-drop .result-selected {
	display: list-item;
	color: var(--ipds-text-muted);
	cursor: default;
	background: var(--ipds-color-gold-50, var(--ipds-color-gold-100));
	opacity: 0.6;
}


/* ==========================================================================
   7. ACTIVE / WITH-DROP — quando o campo está focado/aberto
   ========================================================================== */
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
	border-color: var(--ipds-input-border-focus);
	box-shadow: var(--ipds-input-shadow-focus);
	height: var(--ipds-input-height) !important;  /* override do bug "height: 20px" */
}

/* Quando o drop está aberto, o single "gruda" no drop */
.chosen-container-active.chosen-with-drop .chosen-single {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: var(--ipds-border-subtle);
	background-image: none;
	box-shadow: var(--ipds-input-shadow-focus);
}

.chosen-container-active.chosen-with-drop .chosen-single div {
	border-left: none;
	background: transparent !important;
}

.chosen-container-active.chosen-with-drop .chosen-drop {
	margin-top: -1px;
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
	color: var(--ipds-input-text) !important;
}


/* ==========================================================================
   8. DISABLED
   ========================================================================== */
.chosen-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed;
	pointer-events: none;
}

.chosen-disabled .chosen-single,
.chosen-disabled .chosen-choices {
	cursor: not-allowed;
	background: var(--ipds-state-disabled-bg);
	color: var(--ipds-text-muted);
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
	cursor: not-allowed;
}


/* ==========================================================================
   9. RTL (Right-to-Left) — preservado para compat (português não usa, mas
   a lib suporta, mantém o comportamento)
   ========================================================================== */
.chosen-rtl {
	text-align: right;
}

.chosen-rtl .chosen-single {
	overflow: visible;
	padding: 0 var(--ipds-input-padding-x) 0 0;
}

.chosen-rtl .chosen-single span {
	margin-right: 0;
	margin-left: 26px;
	direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
	margin-left: 50px;
}

.chosen-rtl .chosen-single div {
	right: auto;
	left: 4px;
}

.chosen-rtl .chosen-single abbr {
	right: auto;
	left: 28px;
}

.chosen-rtl .chosen-choices li {
	float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
	direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
	margin: 0;
	padding: 2px 8px 2px 26px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
	right: auto;
	left: 4px;
}

.chosen-rtl.chosen-container-single .chosen-results {
	margin: 0;
	padding: 0;
}

.chosen-rtl .chosen-results li.group-option {
	padding-right: 24px;
	padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
	border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
	padding: 6px 10px 6px 32px;
	direction: rtl;
}

.chosen-rtl .chosen-search::after {
	right: auto;
	left: calc(var(--ipds-space-3) + 8px);
}


/* ==========================================================================
   10. RESPONSIVO (mobile)
   ========================================================================== */
@media (max-width: 768px) {
	.chosen-container .chosen-results {
		max-height: 220px;
	}

	.chosen-container .chosen-results li {
		padding: 10px 12px;       /* mais touch-friendly */
		min-height: 36px;
	}

	.chosen-container-multi .chosen-choices li.search-choice {
		font-size: var(--ipds-font-size-sm);
	}
}