/* Ajustes que o Tailwind não cobre. Carregado depois do CSS gerado,
   por causa do prefixo numérico: o Dash lê assets/ em ordem alfanumérica. */

/* Alerta temporário.
   Some sozinho por animação, sem callback e sem Interval: um dcc.Interval
   por mensagem seria uma requisição a cada tique, para nada. Fica visível
   por ~5s, depois desaparece e para de ocupar espaço. */
@keyframes alerta-sumir {
  0%,
  75% {
    opacity: 1;
    transform: translateY(0);
    max-height: 120px;
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
}

.alerta-temporario {
  animation: alerta-sumir 6s ease-in forwards;
  overflow: hidden;
}

/* Dropdown do Dash com a cara do resto da interface.
   O react-select traz o próprio estilo, e sem isto os campos de horário
   destoam dos inputs de texto ao lado. */
.Select-control,
.is-searchable .Select-control {
  border-radius: 0.5rem !important;
  border-color: #e5e7eb !important;
  min-height: 2.625rem;
}

.is-focused:not(.is-open) > .Select-control {
  border-color: #1f3b6e !important;
  box-shadow: none !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  line-height: 2.5rem !important;
}

.Select-menu-outer {
  border-radius: 0.5rem !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(12, 26, 51, 0.08) !important;
  z-index: 40;
}

.Select-option.is-selected {
  background-color: #eef2f9 !important;
  color: #182f58 !important;
}

.Select-option.is-focused {
  background-color: #eef2f9 !important;
}

/* Rolagem discreta, para o menu de horários não parecer um bloco pesado. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Alvo de toque no celular
   --------------------------------------------------------------------------
   O `dcc.DatePickerSingle` e o `dcc.Dropdown` trazem altura própria, definida
   pelo componente e não pelo Tailwind. Medido no portal: 32px e 24px, contra
   os 44px que o polegar pede.

   Não é preciosismo de acessibilidade: quem usa a tela "Meu Dia" são 128
   pessoas de campo, em pé, no celular, muitas de luva. Errar o alvo custa um
   toque a mais em cada registro, todo dia.

   A regra vale só abaixo de 640px; no desktop os tamanhos originais são bons.
   O seletor certo depende da versão: o Dash 4.4 trocou a estrutura do
   `dcc.Dropdown`, que era react-select (`.Select-control`) e passou a ser
   `.dash-dropdown-trigger`. As duas ficam aqui porque a troca é recente e
   custa nada manter a anterior.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .dash-dropdown-trigger,
  .dash-dropdown .dash-dropdown-trigger,
  .dash-input-container,
  .DateInput_input,
  .dash-datepicker-input,
  .Select-control {
    min-height: 44px !important;
    font-size: 16px; /* abaixo de 16px o iOS dá zoom sozinho ao focar */
  }

  /* O `dcc.Input` do Dash 4.4 põe as classes no contêiner e deixa o <input>
     interno com altura própria; sem esta linha ele fica com 8px dentro de uma
     caixa de 44 e o toque acerta a borda, não o campo. */
  .dash-input-element {
    min-height: 40px;
    font-size: 16px;
  }

  .dash-dropdown-value,
  .dash-dropdown-placeholder,
  .dash-dropdown .Select-placeholder,
  .dash-dropdown .Select-value {
    line-height: 1.4;
  }
}

/* O CSS do dcc pinta de vermelho todo <input> que o navegador considera
   inválido, inclusive o e-mail ENQUANTO a pessoa digita, antes do "@". Parece
   erro para quem está no meio da digitação (chat dos vídeos, 12/09/2026). O
   portal avisa erro com mensagem própria, não com a cor do texto. */
input.dash-input-element:invalid {
  color: inherit;
}