/* Seleção com busca (port do .selectlist do Crontex, com o padrão visual Project e Decor).
 * Sem fonte de ícones: a seta é desenhada com CSS. */
.selectlist-native-hidden { display: none !important; }
details.selectlist { position: relative; width: 100%; }
details.selectlist > summary { list-style: none; }
.selectlist-summary {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; cursor: pointer;
  font-family: Inconsolata, monospace; font-size: 15px; color: #1d2939; box-sizing: border-box;
}
.selectlist-summary::-webkit-details-marker { display: none; }
.selectlist-summary::marker { content: ""; }
.selectlist-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectlist-value.is-placeholder { color: #98a2b3; }
.selectlist-chevron { flex: none; width: 8px; height: 8px; border-right: 2px solid #4f6d82; border-bottom: 2px solid #4f6d82; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; margin-right: 4px; }
details[open].selectlist .selectlist-chevron { transform: rotate(-135deg) translateY(-2px); }
details[open].selectlist .selectlist-summary,
.selectlist-summary:focus-visible { border-color: #4f6d82; box-shadow: 0 0 0 3px rgba(79, 109, 130, .18); }
.selectlist-summary:focus-visible { outline: none; }
.selectlist-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 10px;
  background: #fff; border: 1px solid #eaecf0; border-radius: 10px; box-shadow: 0 12px 28px rgba(6, 27, 66, .12);
}
.selectlist-top { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid #eaecf0; }
.selectlist-search {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px;
  font-family: Inconsolata, monospace; font-size: 15px; color: #1d2939; box-sizing: border-box; background: #fff;
}
.selectlist-search:focus-visible { border-color: #4f6d82; outline: 2px solid rgba(79, 109, 130, .25); outline-offset: 0; }
.selectlist-options { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.selectlist-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-family: Inconsolata, monospace; font-size: 15px; color: #1d2939;
}
.selectlist-option:hover { background: #eef2f5; }
.selectlist-option.is-hidden { display: none; }
.selectlist-option input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #4f6d82; }
.selectlist-option span { font-size: 15px; }
.selectlist-option[aria-selected="true"] span { font-weight: 700; }
.selectlist-vazio { margin: 0; padding: 10px; font-family: Inconsolata, monospace; font-size: 14px; color: #667085; }
.selectlist-add {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 8px;
  border: 1px dashed #98a2b3; border-radius: 8px; background: #fff; cursor: pointer;
  font-family: Poppins, sans-serif; font-size: 14px; color: #4f6d82;
}
.selectlist-add:hover, .selectlist-add:focus-visible { border-style: solid; border-color: #4f6d82; background: #eef2f5; outline: none; }
.selectlist-add[disabled] { opacity: .5; cursor: wait; }
.selectlist-erro { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: #fdf1f0; color: #b42318; font-family: Inconsolata, monospace; font-size: 14px; }
.selectlist-erro[hidden] { display: none; }

/* Modo mínimo (dropdown de ordenação do site): só texto, sem busca nem checkboxes, colado no campo. */
details.selectlist.is-minimal { width: 100%; min-width: 0; }
.selectlist-pop.is-minimal {
  top: 100%; left: 0; right: 0; margin: 0; padding: 6px 0;
  background: rgba(255, 255, 255, .97); border: 0; border-radius: 0;
  box-shadow: 0 10px 24px rgba(6, 27, 66, .10);
}
.selectlist-option-btn {
  display: block; width: 100%; padding: 10px 12px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: Inconsolata, monospace; font-size: 15px; color: #4b5563; border-radius: 0;
}
.selectlist-option-btn:hover { background: #f2f4f7; }
.selectlist-option-btn:focus-visible { outline: none; background: #f2f4f7; box-shadow: inset 2px 0 0 #4f6d82; }
.selectlist-option-btn[aria-selected="true"] { color: #1d2939; font-weight: 700; }

/* Ordenação como ícone (lista pública): só o ícone no botão; o dropdown abre alinhado à direita. */
details.selectlist.is-icone { width: 24px; min-width: 0; }
details.selectlist.is-icone .selectlist-summary {
  width: 24px; height: 24px; padding: 0; justify-content: center; border: 0; border-radius: 0; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2939' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
details.selectlist.is-icone .selectlist-value, details.selectlist.is-icone .selectlist-chevron { display: none; }
details.selectlist.is-icone .selectlist-pop.is-minimal { left: auto; right: 0; width: 260px; }