/* Estilos próprios do projeto — o framework (Preline/Tailwind) cobre o resto. */

/* jQuery Validation Unobtrusive (Views/Shared/_ValidationScriptsPartial.cshtml)
   injeta a classe abaixo direto no input inválido, sem hook de configuração -
   não dá pra expressar isso só com classes Tailwind estáticas no markup. */
.input-validation-error {
  border-color: var(--color-red-500);
}
.input-validation-error:focus {
  border-color: var(--color-red-500);
  --tw-ring-color: var(--color-red-500);
}

/* Fallback pro estado disabled de botões de submit (wwwroot/js/site.js
   desabilita no evento submit pra evitar duplo request) - cobre variantes
   de botão (ex: links de ação estilizados como texto) que não têm as
   classes utilitárias disabled:opacity-50/disabled:pointer-events-none
   do Tailwind explícitas no markup. */
button:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Datepicker (HSDatepicker/vanilla-calendar-pro, ver wwwroot/js/site.js) -
   o CSS vendorizado (wwwroot/lib/preline/src/plugins/datepicker/styles.css)
   usa classes de escala bruta do Tailwind (bg-white, bg-primary-600,
   text-white, text-surface-4...) em vez dos tokens semânticos do resto do
   app (bg-dropdown, bg-primary, text-primary-foreground...), então o
   calendário destoava visualmente de todo o resto (outros dropdowns,
   botões). As regras abaixo sobrescrevem só a cor/tamanho - a estrutura
   (grid, tamanho dos botões, etc.) continua vindo do CSS vendorizado.
   Carrega depois de preline-built.css no _LayoutApp, então empata em
   especificidade e ganha por ordem de carregamento.

   Também resolve a largura: o tipo "default" não tem largura definida em
   lugar nenhum (só o "multiple" ganha w-80/w-160 do próprio Preline) e o
   wrapper externo (.--single-month) tem overflow-hidden - se o popup
   herdar uma largura menor que a necessária pros 7 dias da semana do
   input em que está ancorado (comum em campos de filtro estreitos), a
   última coluna (domingo) fica cortada. w-80 (320px) é o valor usado no
   próprio exemplo de referência do Preline. */
.vc[data-vc-type="default"] {
  width: 320px;
  background-color: var(--color-dropdown);
  border-color: var(--color-dropdown-line);
}

.vc-week__day {
  color: var(--color-muted-foreground-1);
}

.vc-date {
  color: var(--color-foreground);
}

.vc-date:hover {
  color: var(--color-primary-hover);
}

.vc-date:hover::before {
  border-color: var(--color-primary-hover);
}

.vc-date[data-vc-date-month="prev"],
.vc-date[data-vc-date-month="next"] {
  color: var(--color-muted-foreground-2);
}

/* Hoje ganha só um contorno (não preenchido) - preenchido igual à data
   selecionada (regra abaixo, mesma especificidade e carregada depois, por
   isso vence quando os dois coincidem) fazia hoje e a data selecionada
   parecerem "2 dias marcados" sempre que a seleção não cai em hoje (ex.:
   campo Início do relatório de velocidade, que nasce com ontem
   selecionado - "ontem" preenchido + "hoje" preenchido pareciam duas
   seleções). background-color precisa ser declarado aqui mesmo sem valor
   nenhum pra sobrescrever - CSS cascateia por propriedade, não por regra,
   então só "não declarar" background-color aqui não anula o
   background-color: var(--primary-600) do CSS vendorizado (preline-built.css)
   pra esse mesmo seletor. */
.vc-date[data-vc-date-today] {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 600;
}
.vc-date[data-vc-date-today]::before {
  border-color: var(--color-primary);
}

.vc-date[data-vc-date-selected] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.vc-arrow:hover,
.vc-arrow:focus {
  background-color: var(--color-muted-hover);
}
.vc-arrow:focus {
  background-color: var(--color-muted-focus);
}

/* Mês/ano do modo custom-select (data-hs-datepicker-monthyear no
   wwwroot/js/site.js) - o botão vem de um <select> gerado dinamicamente,
   sem classe estável própria pra mirar, só as classes utilitárias cruas
   que o Preline embute (text-gray-800 dark:text-neutral-200...). Mira o
   <button> pelo wrapper em vez de tentar sobrescrever essas classes. */
.hs-datepicker-monthyear button {
  color: var(--color-foreground);
}
.hs-datepicker-monthyear button:hover {
  color: var(--color-primary-hover);
}
.hs-datepicker-monthyear button:focus {
  color: var(--color-primary-focus);
}

/* Marca: esconder o wordmark onde só cabe o símbolo. Precisa ser CSS próprio
   porque o seletor age num filho a partir de uma classe do pai, o que não se
   expressa com utilitárias estáticas no markup. */
.marca-simbolo .marca-texto {
  display: none;
}