/* ================================================================
   select-fix.css — CORREÇÃO GLOBAL DAS SETAS DOS <select>
   ================================================================
   Bug atual: campos <select> exibiam múltiplas setas repetidas
   ("▼▼▼▼▼") por conflito entre 3 técnicas ativas simultaneamente:

     1) Seta nativa do browser (não removida com appearance:none)
     2) Duplo linear-gradient em .cvr-select (crono-v2.css:1115 e :2306)
     3) SVG chevron em .crono-v2-modal-body .cvr-select (crono-v2.css:2801)

   Este arquivo é carregado POR ÚLTIMO no <head>, sobrescreve todas
   as técnicas anteriores e aplica UMA ÚNICA seta SVG (chevron).

   Escopo: TODOS os <select> do sistema (globais + .cvr-select).
   Compatibilidade: Chrome, Edge, Firefox, Safari, iOS, Android.
   Modos: light + dark (via [data-theme] e html.dark).
   ================================================================ */

/* ----------------------------------------------------------------
   1) RESET UNIVERSAL — remove seta nativa em TODOS os selects
   ---------------------------------------------------------------- */
select,
.cvr-select,
.cvr-input.cvr-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* Neutraliza qualquer background-image herdado
     (gradientes duplos antigos, chevrons parciais, etc.) */
  background-image: none !important;
  /* Espaço interno à direita para caber a seta customizada */
  padding-right: 40px !important;
  /* Impede que o texto da opção selecionada passe por baixo da seta */
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
}

/* Selects múltiplos e com [size] não têm dropdown — não desenhamos seta */
select[multiple],
select[size]:not([size="1"]),
select[multiple].cvr-select,
select[size]:not([size="1"]).cvr-select {
  background-image: none !important;
  padding-right: initial !important;
}

/* Selects nativos do IE (compat) */
select::-ms-expand {
  display: none !important;
}

/* ----------------------------------------------------------------
   2) SETA ÚNICA — SVG chevron (light mode padrão)
   ----------------------------------------------------------------
   Cor stroke: #52627a (cinza-azul, boa em fundo branco/claro) */
select,
.cvr-select,
.cvr-input.cvr-select,
[data-theme="light"] select,
[data-theme="light"] .cvr-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352627a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
}

/* Reforço: garantimos padding uniforme independente do tema */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none !important;
}

/* ----------------------------------------------------------------
   3) DARK MODE — seta clara para bom contraste em azul-marinho
   ----------------------------------------------------------------
   Cor stroke: #94a3b8 (cinza-claro, ótima em navy #0F1E36) */
[data-theme="dark"] select,
[data-theme="dark"] .cvr-select,
[data-theme="dark"] .cvr-input.cvr-select,
html.dark select,
html.dark .cvr-select,
html.dark .cvr-input.cvr-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
}
/* Selects múltiplos no dark também sem seta */
[data-theme="dark"] select[multiple],
html.dark select[multiple],
[data-theme="dark"] select[size]:not([size="1"]),
html.dark select[size]:not([size="1"]) {
  background-image: none !important;
}

/* ----------------------------------------------------------------
   4) FOCUS — mantém a seta e adiciona highlight laranja CorePro
   ---------------------------------------------------------------- */
select:focus,
.cvr-select:focus {
  outline: none !important;
  border-color: var(--cp-accent-500, #F97316) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
}

/* ----------------------------------------------------------------
   5) OPTIONS — cores consistentes em dark/light
   ----------------------------------------------------------------
   Alguns browsers (Firefox notavelmente) usam a cor de fundo do
   sistema para o dropdown popup. Forçamos aqui. */
[data-theme="dark"] select option,
html.dark select option {
  background-color: #1A2A44;
  color: #F1F5F9;
}
[data-theme="light"] select option,
html:not(.dark) select option {
  background-color: #FFFFFF;
  color: #0F172A;
}

/* ----------------------------------------------------------------
   6) DISABLED — opacidade reduzida + cursor
   ---------------------------------------------------------------- */
select:disabled,
.cvr-select:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
}

/* ----------------------------------------------------------------
   7) MOBILE — área de toque confortável (≥ 44px) + zoom iOS
   ----------------------------------------------------------------
   iOS Safari faz zoom automático em selects com font-size < 16px.
   Mantemos 16px + altura mínima confortável para dedos. */
@media (max-width: 640px) {
  select,
  .cvr-select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding-right: 40px !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
  }
}

/* ----------------------------------------------------------------
   8) OVERRIDE ESPECÍFICO — .crono-v2-modal-body .cvr-select
   ----------------------------------------------------------------
   O crono-v2.css tem regras específicas com maior especificidade.
   Reforçamos aqui para garantir que UMA ÚNICA seta prevaleça. */
.crono-v2-modal-body select,
.crono-v2-modal-body .cvr-select,
.cvr-modal-body select,
.cvr-modal-body .cvr-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352627a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}
[data-theme="dark"] .crono-v2-modal-body select,
[data-theme="dark"] .crono-v2-modal-body .cvr-select,
[data-theme="dark"] .cvr-modal-body select,
[data-theme="dark"] .cvr-modal-body .cvr-select,
html.dark .crono-v2-modal-body select,
html.dark .crono-v2-modal-body .cvr-select,
html.dark .cvr-modal-body select,
html.dark .cvr-modal-body .cvr-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
}

/* ================================================================
   FIM select-fix.css
   ================================================================ */
