/* Lista de opções com o desenho do menu do card de dia.

   O `<select>` nativo não deixa estilizar as opções — quem desenha a caixa com
   o realce azul quadrado é o sistema operacional. Por isso a lista é nossa, e
   o select fica escondido como fonte de verdade (ver select-menu.js).

   Os valores abaixo espelham `.day-card-actions-menu` em records-daycard.css:
   mesma borda, mesmo raio, mesma sombra, mesmo hover. Se aquele menu mudar,
   este deve acompanhar — é o mesmo componente aos olhos de quem usa. */

/* O invólucro é o do rótulo flutuante (.j-floating-control), que já é
   position:relative — a lista se ancora nele. */
.select-menu { position: relative; }

/* O select continua no DOM (é ele que o app lê e escreve), só não aparece.
   `display:none` o tiraria da validação de formulário e de alguns leitores;
   escondido assim ele continua existindo para o código de sempre. */
.select-menu-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O gatilho é a CARA de um campo com rótulo flutuante: mesmos tokens de
   altura, raio e borda dos demais filtros do painel. A legenda fica na
   linha da borda; o vão é do contorno, sem retângulo atrás do texto. */
.select-menu-trigger {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  margin: 0;
  padding: 0 34px 0 15px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center/12px;
  color: #263a53;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.select-menu-trigger:hover:not(:disabled) { border-color: var(--ui-control-border-hover); }

/* Campo protegido. O tracejado é o que diferencia "não pode mexer agora" de
   "está vazio": borda cheia e cinza leria como campo comum sem valor. */
.select-menu-trigger:disabled,
.select-menu-trigger.is-locked {
  background: #f1f3f6;
  color: #5d6b80;
  border-style: dashed;
  cursor: not-allowed;
}

/* Mesmo foco dos demais campos (floating-fields.css). */
.select-menu-trigger:focus-visible,
.select-menu-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus);
}

/* --- a lista, espelhando .day-card-actions-menu --- */
.select-menu-list {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, 80vw);
  max-height: 320px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(18, 37, 65, .16);
  text-align: left;
}

/* Guarda obrigatória: `.hidden` e `.select-menu-list` empatam em
   especificidade (0,1,0), e a ordem das folhas decidiria quem vence. Já
   aconteceu três vezes neste projeto — há teste para isso. */
.select-menu-list.hidden { display: none; }

.select-menu-trigger[hidden] { display: none !important; }
input.select-menu-trigger {
  font-family: inherit;
  cursor: text;
}
.select-menu-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.select-menu-empty {
  margin: 0;
  padding: 12px 14px;
  color: #7b8a9e;
  font-size: 12px;
  font-weight: 650;
}

.select-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #40526a;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

/* O rótulo empurra o contador e o "✓" para a direita, e encolhe antes deles:
   nome comprido de setor não pode espremer o número que a pessoa veio ver. */
.select-menu-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quantas linhas aquela opção traz, com os OUTROS filtros como estão.
   Sem o número, filtrar é tentativa e erro: escolhe, espera a lista, não tem
   nada, volta. Zero aparece apagado em vez de sumir — "nenhum" é resposta, e
   esconder faria a opção parecer não contada. */
.select-menu-count {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef2f8;
  color: #54677f;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.select-menu-count.is-zero { background: #f5f7fa; color: #aab5c4; }
.select-menu-item.is-selected .select-menu-count {
  background: var(--color-primary-soft, #e6edff);
  color: var(--color-primary, #416eec);
}

.select-menu-item + .select-menu-item { border-top: 1px solid #eef2f7; }
.select-menu-item:hover { background: #f4f7fb; }
.select-menu-item:focus-visible {
  outline: none;
  background: #eef4ff;
  box-shadow: inset 3px 0 0 var(--color-primary, #416eec);
}

/* A opção em vigor não depende de COR sozinha: o peso da fonte sobe junto, e é
   ele que continua distinguindo a linha para quem não separa bem as duas cores.
   O "✓" saiu — ele repetia o que a cor e o peso já diziam e disputava a mesma
   ponta da linha com o contador. */
.select-menu-item.is-selected {
  color: var(--color-primary, #416eec);
  font-weight: 800;
}


@media (max-width: 720px) {
  .select-menu-trigger { min-width: 0; }
  .select-menu-list { max-width: calc(100vw - 48px); }
}

/* Abre para CIMA quando não cabe embaixo. A decisão é tomada no JS, medindo
   contra a caixa que recorta (o diálogo, não a janela). */
.select-menu-list-acima {
  top: auto;
  bottom: calc(100% + 8px);
}