/* Estilos gerais do datepicker */
.ui-datepicker {
  background-color: #fff;
  border-radius: 0;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  width: 100% !important;
  max-width: 600px;
  padding: 0;
  border: 1px solid #f0f0f0;
  z-index: 1000 !important;
  font-family: inherit;
  overflow: hidden;
}

/* Layout para dois meses lado a lado */
.ui-datepicker-multi-2 .ui-datepicker-group {
  float: left;
  width: 50%;
  box-sizing: border-box;
  min-width: 280px; /* Garante espaço mínimo para 7 células de 40px */
}

/* Cabeçalho do datepicker */
.ui-datepicker-header {
  background: transparent;
  border: none;
  padding: 10px 8px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

/* Ajuste da fonte dos meses para 15px e font-weight 600 */
.ui-datepicker-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Botões de navegação anterior/próximo */
.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: #f8f8f8;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.ui-datepicker-prev {
  left: 15px;
}

.ui-datepicker-next {
  right: 15px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block;
  text-indent: -9999px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #888;
  border-left: 2px solid #888;
  transition: border-color 0.2s ease;
}

.ui-datepicker-prev span {
  transform: rotate(-45deg);
  margin-left: 3px;
}

.ui-datepicker-next span {
  transform: rotate(135deg);
  margin-right: 3px;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background-color: #f2f2f2;
}

.ui-datepicker-prev:hover span,
.ui-datepicker-next:hover span {
  border-color: #555;
}

/* CONFIGURAÇÃO DA TABELA E ALTURA DE CÉLULAS - CRÍTICO */
/* Definindo uma altura base consistente para todos os elementos */
:root {
  --cell-height: 26px;
  --cell-height-mobile: 34px;
  --cell-height-small: 28px;
}

/* Tabela do calendário - configuração fundamental */
.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  border-spacing: 0;
  empty-cells: show; /* Forçar mostrar células vazias */
}

/* GARANTIA DE ALTURA CONSISTENTE PARA TODAS AS LINHAS */
.ui-datepicker tr {
  background-color: #fff !important;
  height: var(--cell-height) !important; /* Altura fixa via variável */
  min-height: var(--cell-height) !important; /* Altura mínima */
  max-height: var(--cell-height) !important; /* Altura máxima */
  line-height: var(--cell-height) !important; /* Linha também fixa */
  box-sizing: border-box !important;
  display: table-row !important; /* Força comportamento de linha de tabela */
  border: none !important; /* Evitar qualquer borda nas linhas */
  padding: 0 !important; /* Evitar padding que afete altura */
  margin: 0 !important; /* Evitar margin que afete altura */
}

/* TRATAMENTO ESPECIAL PARA PRIMEIRA E ÚLTIMA LINHA */
/* Regras específicas para corrigir o problema das primeiras e últimas linhas */
.ui-datepicker tr:first-child,
.ui-datepicker tr:last-child {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  overflow: hidden !important; /* Impedir overflow */
}

/* Estilo para os dias da semana (cabeçalhos) */
.ui-datepicker th {
  padding: 0 !important; /* Remover padding que pode alterar altura */
  text-align: center;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  font-size: 11px;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  width: 40px;
  height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* APLICAÇÃO RIGOROSA DE ALTURA CONSISTENTE EM TODAS AS CÉLULAS */
.ui-datepicker td {
  border: 1px solid #f5f5f5;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
  vertical-align: middle !important;
  width: 40px;
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: table-cell !important; /* Força comportamento de célula */
  overflow: hidden !important; /* Evita problema de overflow */
  font-size: 13px !important; /* Garantir consistência de fonte */
}

/* SOLUÇÃO ESPECÍFICA PARA AS PRIMEIRAS E ÚLTIMAS LINHAS DO MÊS */
/* Estas são especificamente as que causam o problema de 0.5px */
.ui-datepicker tr:first-child td,
.ui-datepicker tr:last-child td {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  font-size: 13px !important;
  padding: 0 !important;
  position: relative !important;
  border-width: 1px !important; /* Garantir espessura de borda consistente */
  overflow: hidden !important;
}

/* Correção específica para os dias de outros meses que aparecem na primeira linha */
.ui-datepicker tr:first-child td.ui-datepicker-other-month,
.ui-datepicker tr:last-child td.ui-datepicker-other-month {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  padding: 0 !important;
  border-width: 1px !important;
}

/* Correção para a borda dupla entre os meses */
.ui-datepicker-group-first td:last-child {
  border-right: none;
}
.ui-datepicker-group-last td:first-child {
  border-left: none;
}

/* GARANTIR CONSISTÊNCIA PARA TODAS AS VARIAÇÕES DE CÉLULAS */
/* Regras específicas para células vazias, outros meses, etc. */
.ui-datepicker td.ui-datepicker-other-month,
.ui-datepicker td.ui-datepicker-unselectable,
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  padding: 0 !important;
  display: table-cell !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

/* NORMALIZAÇÃO DOS ELEMENTOS INTERNOS DAS CÉLULAS */
.ui-datepicker td span,
.ui-datepicker td a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  text-decoration: none;
  color: #333;
  border-radius: 0;
  transition: all 0.2s ease;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: normal;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: normal !important; /* Evita que line-height cause problemas */
}

/* FALLBACK PARA CÉLULAS VAZIAS */
/* Garantir que células vazias ainda mantenham altura consistente */
.ui-datepicker td:empty,
.ui-datepicker td.ui-datepicker-other-month:empty,
.ui-datepicker td.ui-datepicker-unselectable:empty,
.ui-datepicker td.ui-state-disabled:empty,
.ui-datepicker td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled:empty {
  height: var(--cell-height) !important;
  position: relative !important;
}

/* Conteúdo invisível para garantir altura em células vazias */
.ui-datepicker td:empty::after,
.ui-datepicker td.ui-datepicker-other-month:empty::after,
.ui-datepicker td.ui-datepicker-unselectable:empty::after,
.ui-datepicker td.ui-state-disabled:empty::after,
.ui-datepicker td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled:empty::after {
  content: "\00a0"; /* Espaço não-quebrável */
  display: block !important;
  height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  visibility: hidden; /* Torna invisível mas mantém espaço */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* RESET DE TAMANHOS PARA A PRIMEIRA CÉLULA DE CADA MÊS */
/* Esta regra específica corrige o problema sutil de 0.5px */
.ui-datepicker-group tr:first-child td:first-child,
.ui-datepicker-group tr:first-child td:first-child a,
.ui-datepicker-group tr:first-child td:first-child span {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  border-width: 1px !important;
  overflow: hidden !important;
}

/* Destaque para sábado e domingo */
.ui-datepicker-week-end a {
  font-weight: bold !important;
}

/* Dias de outro mês */
.ui-datepicker-other-month .ui-state-default {
  color: #ddd;
}

/* Remover estilo do dia atual/hoje */
.ui-datepicker-today .ui-state-default {
  position: relative;
  border: none;
  font-weight: normal;
}

/* Remover o ponto no dia atual */
.ui-datepicker-today .ui-state-default::after {
  display: none;
}

/* Dia selecionado (check-in) */
.ui-state-highlight.checkin-date .ui-state-default,
.ui-state-active {
  background-color: #3F332A !important;
  color: white !important;
  font-weight: normal;
  border-radius: 0;
  box-shadow: none;
}

/* Remover estilo especial para o dia 12 */
.date-2025-4-12 .ui-state-default {
  border: none;
  background-color: transparent;
}

/* Estilizar dias entre check-in e check-out */
.checkin-checkout-inner .ui-state-default {
  background-color: rgba(179, 135, 40, 0.15);
  color: #333;
}

/* Dia selecionado (check-out) */
.ui-state-highlight.checkout-date .ui-state-default {
  background-color: #3F332A !important;
  color: white !important;
  font-weight: normal;
  border-radius: 0;
  box-shadow: none;
}

/* Hover sobre os dias */
.ui-datepicker td a:hover {
  background-color: rgba(179, 135, 40, 0.08);
}

/* Dias desabilitados */
.ui-state-disabled {
  opacity: 0.4;
}

/* Ajuste para espaço entre os meses */
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
  height: 0;
}

/* Linha vertical que divide os dois meses */
.ui-datepicker-group-first {
  position: relative;
}

/* Ajuste da linha vertical para ocupar todo o espaço */
.ui-datepicker-group-first::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 2;
}

/* Último dia do mês e primeiro dia do próximo mês */
.ui-datepicker-group-first tr:last-child td:last-child a,
.ui-datepicker-group-last tr:first-child td:first-child a {
  position: relative;
}

/* Linha separadora entre os meses */
.ui-datepicker:after {
  content: "";
  display: block;
  clear: both;
}

/* Esconder o componente vbo-drp-commands-bottom completamente */
.vbo-drp-commands-bottom {
  display: none !important;
}

/* Remover qualquer background em linhas alternadas */
.ui-datepicker tr:nth-child(even) {
  background-color: #fff !important;
}

.ui-datepicker tr:nth-child(odd) {
  background-color: #fff !important;
}

/* HACK DEFINITIVO PARA CORRIGIR QUALQUER DIFERENÇA DE ALTURA */
/* Definindo uma altura absoluta para todas as células e seus filhos */
.ui-datepicker td,
.ui-datepicker td *,
.ui-datepicker th,
.ui-datepicker th *,
.ui-datepicker tr,
.ui-datepicker tr * {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* NOVA IMPLEMENTAÇÃO - OVERLAY E CENTRALIZAÇÃO */
/* Estilo para o overlay (aplicado em todas as resoluções) */
.datepicker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Centralização apenas para desktop */
@media screen and (min-width: 769px) {
  .datepicker-centered {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25) !important;
    z-index: 1001 !important;
    border-radius: 4px;
    border: none;
  }
}

/* Mobile: garantir que o z-index do datepicker seja maior que o overlay */
@media screen and (max-width: 768px) {
  .ui-datepicker {
    z-index: 1001 !important;
  }
}

/* Responsividade - MOBILE */
@media screen and (max-width: 768px) {
  /* Atualizar variável de altura para mobile */
  :root {
    --cell-height: var(--cell-height-mobile);
  }
  
  .ui-datepicker {
    max-width: 100%;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    transition: transform 0.3s ease;
    z-index: 9999999 !important; /* Aumentado para um valor muito alto conforme solicitado */
    max-height: 80vh;
    padding-bottom: 20px;
  }

  /* Quando o datepicker NÃO estiver visível (controlado pelo jQuery UI) */
  .ui-datepicker[style*="display: none"] {
    transform: translateY(100%);
  }

  .ui-datepicker-multi-2 .ui-datepicker-group {
    width: 100%;
    float: none;
    margin: 0;
    min-width: auto;
  }

  .ui-datepicker-multi .ui-datepicker-group {
    margin: 0;
  }

  .ui-datepicker-multi .ui-datepicker-group table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
  }
  
  /* Em mobile, usar % para largura das células */
  .ui-datepicker th,
  .ui-datepicker td {
    width: 14.28%; /* 100% / 7 dias da semana */
  }

  /* Em mobile não há problema com bordas duplas, mas reseta caso existam */
  .ui-datepicker-group-first td:last-child {
    border-right: 1px solid #f5f5f5;
  }
  
  .ui-datepicker-group-last td:first-child {
    border-left: 1px solid #f5f5f5;
  }
  
  /* Remover a linha divisória em mobile */
  .ui-datepicker-group-first::after {
    display: none;
  }
  
  .ui-datepicker-row-break {
    display: none;
  }

  /* Ocultar o ::before do cabeçalho em dispositivos móveis */
  .ui-datepicker-header::before {
    display: none !important; /* Reforçando a ocultação */
  }
}

/* Para telas muito pequenas */
@media screen and (max-width: 375px) {
  /* Atualizar variável de altura para telas pequenas */
  :root {
    --cell-height: var(--cell-height-small);
  }
  
  .ui-datepicker th {
    font-size: 11px;
  }
  
  .ui-datepicker td span,
  .ui-datepicker td a {
    font-size: 12px;
  }
}

/* Personalizações específicas para a interface mobile */
@media screen and (max-width: 768px) {
  .ui-datepicker-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  /* Ocultar o indicador visual (barra de arrasto) */
  .ui-datepicker-header::before {
    display: none !important; /* Reforçando a ocultação */
  }
}

/* Para garantir que o datepicker só apareça quando chamado via JavaScript */
.ui-datepicker:not(.ui-datepicker-inline) {
  display: none;
}

/* Remover background em linhas alternadas (caso o jQuery UI adicione) */
.ui-datepicker-calendar tr:nth-child(even),
.ui-datepicker-calendar tr:nth-child(odd) {
  background-color: transparent !important;
}

/* Garantir que todos os dias tenham o mesmo fundo */
.ui-datepicker-calendar td,
.ui-datepicker-calendar th {
  background-color: transparent !important;
}

/* CORREÇÃO PARA PROBLEMA DE VISUALIZAÇÃO NO INTERNET EXPLORER */
/* IE tem comportamento diferente para altura de células de tabela */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ */
  .ui-datepicker td,
  .ui-datepicker th,
  .ui-datepicker tr {
    height: var(--cell-height) !important;
    line-height: var(--cell-height) !important;
  }

  .ui-datepicker td a,
  .ui-datepicker td span {
    line-height: var(--cell-height) !important;
    height: 100% !important;
  }
}

/* CORRIGINDO BUGS ESPECÍFICOS EM SAFARI */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .ui-datepicker td, 
    .ui-datepicker th,
    .ui-datepicker tr {
      height: var(--cell-height) !important;
    }
    
    .ui-datepicker td a,
    .ui-datepicker td span {
      height: 100% !important;
    }
  }
}

/* CORREÇÃO PARA PROBLEMA DE VISUALIZAÇÃO NO FIREFOX */
@-moz-document url-prefix() {
  .ui-datepicker td,
  .ui-datepicker th {
    height: var(--cell-height) !important;
  }
  
  .ui-datepicker tr {
    height: var(--cell-height) !important;
  }
}

/* GARANTIR QUE JQuery UI NÃO SOBREPONHA ESTAS REGRAS */
/* Estas regras CSS têm especificidade extremamente alta para prevalecer */
html body .ui-datepicker tr, 
html body .ui-datepicker td,
html body .ui-datepicker th {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
  box-sizing: border-box !important;
}

/* Regras específicas para primeira e última linha (onde ocorre o problema) */
html body .ui-datepicker tr:first-child td,
html body .ui-datepicker tr:last-child td {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
}

/* Garantir consistência também para as transições entre meses */
html body .ui-datepicker-group-first tr:last-child,
html body .ui-datepicker-group-last tr:first-child,
html body .ui-datepicker-group-first tr:last-child td,
html body .ui-datepicker-group-last tr:first-child td {
  height: var(--cell-height) !important;
  min-height: var(--cell-height) !important;
  max-height: var(--cell-height) !important;
  line-height: var(--cell-height) !important;
}