/* =========================================================
   AQUAG · FORMULÁRIOS
   Ajustes finos de campos específicos que vão além do
   estilo genérico de .input (datas, filtros).

   Observação: o arquivo original acumulava 5 blocos de CSS
   "remendo" sucessivos para os campos de data (cada um
   sobrescrevendo o anterior). Aqui fica só o resultado final
   já consolidado, sem duplicidade — o efeito visual é o
   mesmo que estava valendo no arquivo original.
   ========================================================= */

input[type="date"],
#payment-date,
#edit-payment-date,
#birth-date,
#start-date,
#end-date,
#filter-date-start,
#filter-date-end {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 12px !important;
  text-align: center !important;
  line-height: 42px !important;
  font-size: .875rem !important;
  border-radius: .65rem !important;
  overflow: hidden !important;
}

input[type="date"]::-webkit-date-and-time-value,
#payment-date::-webkit-date-and-time-value,
#edit-payment-date::-webkit-date-and-time-value {
  text-align: center !important;
  line-height: 42px !important;
  min-height: 42px !important;
}

input[type="date"]::-webkit-datetime-edit,
#payment-date::-webkit-datetime-edit,
#edit-payment-date::-webkit-datetime-edit {
  text-align: center !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Campos de filtro mantêm o alinhamento e a largura do restante do formulário. */
#financial-filter {
  min-width: 150px;
}

/*
  No desktop, o select fica compacto (não ocupa a linha toda) — antes isso
  vinha da classe Tailwind !w-auto no HTML, mas no Safari do iPhone ela
  competia com o width:100% !important do celular (matricula.css) de um
  jeito que o <select> não respeitava (bug conhecido do WebKit com
  <select> + !important concorrente). Removida do HTML; aqui, sem nenhum
  !important, ela só faz efeito no desktop mesmo.
*/
@media (min-width: 768px) {
  #financial-filter {
    width: auto;
  }
}

/* Mesmo texto centralizado dos campos de data ao lado (que já usam
   text-align:center) e mesma altura (ver nota em components.css). */
#financial-filter {
  height: 42px !important;
  min-height: 42px !important;
  text-align: center !important;
  text-align-last: center !important;
}

@media (max-width: 767px) {

  input[type="date"],
  #payment-date,
  #edit-payment-date,
  #birth-date,
  #start-date,
  #end-date,
  #filter-date-start,
  #filter-date-end {
    width: calc(100% - 20px) !important;
    max-width: 420px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 9px !important;
    font-size: .82rem !important;
    line-height: 40px !important;
  }

  input[type="date"]::-webkit-date-and-time-value,
  #payment-date::-webkit-date-and-time-value,
  #edit-payment-date::-webkit-date-and-time-value {
    line-height: 40px !important;
    min-height: 40px !important;
  }

  #financial-filter {
    height: 40px !important;
    min-height: 40px !important;
  }

  /*
    iOS antigo (ex.: iPhone 6S) tem uma peculiaridade conhecida do WebKit
    onde um <input type="date"> às vezes ignora width:100% e usa um
    tamanho baseado no próprio conteúdo, ficando mais estreito que os
    outros campos. Aqui a caixa fica sem ambiguidade nenhuma: width e
    min-width no mesmo valor, e margem zerada (não auto) — misturar
    min-width com a margin:auto/width:calc(...) da regra acima é o que
    fazia a caixa ficar deslocada pra um dos lados em vez de ocupar a
    largura toda simetricamente.
  */
  #filter-date-start,
  #filter-date-end {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}