/* 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;
  }

  /* Opção escolhida com texto longo quebra a linha, em vez de ser cortada
     com reticências. O fim era justamente a informação útil: se o BM está
     aberto ou entregue (Exportação BM, Relatórios) e quantas vagas a linha
     tem (Colaboradores, "1.4 - Téc..."). Revisão visual da operação de teste
     OPTESTE, 27/09/2026. O Dash 4.4 põe `nowrap` e reticências no valor. */
  .dash-dropdown .dash-dropdown-value,
  .dash-dropdown .dash-dropdown-value-item {
    white-space: normal;
    text-overflow: clip;
  }

  .dash-dropdown .dash-dropdown-trigger {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}

/* Campo de texto que cortava a parte de baixo das letras no computador:
   "obriqatório", "reieitar", o "g" e o "@" do e-mail no Login, a vírgula
   virando ponto (revisão visual da operação de teste OPTESTE, 27/09/2026,
   conferido também com o Tailwind 4 da imagem). O Dash 4 fixa o invólucro do
   dcc.Input em 34 px, e o CAMPO põe nele `py-2.5` (`py-3` no celular): sobravam
   12 px para o <input>, que tem 4 px de margem própria e letra de 20 px de
   linha. A altura é a do Dash (e os 44 px do celular, acima); o <input> ocupa
   o invólucro inteiro, sem a margem de cima e de baixo do token. */
div.dash-input-container {
  padding-top: 0;
  padding-bottom: 0;
}

/* 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;
}

/* Cabeçalho da página (`layout.cabecalho_pagina`). No celular o alerta e o
   sino ficam na linha do título, à direita, e a hora da atualização sai
   debaixo do subtítulo, em letra pequena. Antes os dois ícones sem rótulo
   caíam numa linha própria com "Última atualização" ao lado: uma faixa solta
   entre o subtítulo e o conteúdo, em toda tela (revisão OPTESTE, 28/09/2026).
   No computador fica como era, com a hora ao lado do sino. */
@media (max-width: 639px) {
  .cabecalho-pagina {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .cabecalho-pagina > .cabecalho-acoes {
    gap: 0.25rem;
    margin-top: -0.375rem;
    margin-right: -0.5rem;
  }

  .cabecalho-pagina .cabecalho-atualizacao {
    display: none;
  }
}

@media (min-width: 640px) {
  .cabecalho-pagina .cabecalho-atualizacao-celular {
    display: none;
  }
}

/* Quem está logado, no rodapé do menu (`layout.rodape_usuario`): o nome e o
   perfil quebram a linha em vez de sair cortados ("TESTE OPER...",
   "Administrador do..."), e o contrato vem embaixo. O nome longo para na
   segunda linha, com o nome inteiro no `title`. */
.rodape-usuario-nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.25rem;
}

.rodape-usuario-perfil {
  line-height: 1rem;
  overflow-wrap: anywhere;
}

/* O botão Sair com alvo de toque de 36 px, e não os 16 do ícone. */
.rodape-usuario-sair {
  width: 2.25rem;
  height: 2.25rem;
  justify-content: center;
  border-radius: 0.5rem;
}

.rodape-usuario-sair:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* As etapas da evidência no Painel (`cadeia-de-etapas`): no celular, uma por
   linha, com a seta para baixo entre elas. Com o `flex-wrap` elas quebravam
   em 1, 2 e 1, e a seta, que só aparece a partir de `xl`, sumia: a ordem
   deixava de ser lida (revisão OPTESTE, 28/09/2026). */
@media (max-width: 639px) {
  .cadeia-de-etapas {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .cadeia-de-etapas > svg {
    display: block;
    margin-left: 0.625rem;
    transform: rotate(90deg);
  }
}