/* =================================================================== */
/* CSS Final para o Componente de Input com Calendário (date-input)
/* Compatível com frameworks como Bootstrap (.form-control)
/* =================================================================== */

/* 1. Container principal
/* Serve como âncora para o posicionamento absoluto do ícone e do pop-up.
*/
.date-input-wrapper {
  position: relative;
}

/* 2. Input (.form-control)
/* Garante que haja espaço interno à direita para o ícone não cobrir o texto.
*/
.date-input-wrapper .form-control {
  padding-right: 40px !important; 
  margin-top: 0 !important;
  align-self: center !important;
}

/* 3. Ícone do Calendário
/* Posicionado de forma absoluta dentro do wrapper, à direita.
*/
.date-input-wrapper .calendar-icon {
  position: absolute;
  top: 0 !important;
  right: 5px !important;
  bottom: 0 !important;
  width: 30px;
  
  /* Centraliza o emoji verticalmente e horizontalmente */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  z-index: 3;
  cursor: pointer;
  font-style: normal;
  color: #888; /* Cor suave para o ícone */
}

/* 4. Pop-up do Calendário
/* O container principal do calendário que aparece abaixo do input.
*/
.date-input-wrapper .calendar-popup {
  position: absolute;
  top: 100%; /* Posiciona exatamente abaixo do input */
  left: 0;
  z-index: 1001; /* Garante que fique sobre outros elementos da página */
  
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  padding: 10px;
  margin-top: 2px; /* Um pequeno respiro entre o input e o calendário */
}

/* 4.1 Pop-up do Calendário dentro de Dialogs
/* Garante que o calendário apareça acima de Material Design dialogs
*/
md-dialog .date-input-wrapper .calendar-popup,
.md-dialog-container .date-input-wrapper .calendar-popup {
  z-index: 999999 !important; /* Z-index muito alto para aparecer acima de dialogs */
}

/* 4.2 Calendário posicionado no body (dentro de dialogs)
/* Remove posicionamento relativo e aplica estilos para posicionamento fixed
*/
.calendar-popup-in-dialog {
  /* Using inline styles with !important instead, keeping this for fallback */
  position: fixed;
  z-index: 999999;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  padding: 10px;
}

/* 5. Cabeçalho do Calendário (Mês/Ano e botões de navegação)
*/
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header span {
  font-weight: bold;
  font-size: 1.1em;
}

.calendar-header button {
  border: none;
  background: transparent;
  font-size: 1.4em;
  cursor: pointer;
  color: #337ab7; /* Cor temática azul */
  padding: 0 10px;
}
.calendar-header button:hover {
  color: #23527c;
}

/* 6. Grade do Calendário (Tabela de dias)
*/
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.calendar-grid th {
  font-size: 0.8em;
  color: #999;
  padding-bottom: 5px;
  width: 36px; /* Largura fixa para cada dia da semana */
  font-weight: normal;
}

.calendar-grid button {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* Deixa os dias redondos */
  border: 1px solid transparent;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 7. Estilos dos Dias (Estados diferentes)
*/
.calendar-grid button:not([disabled]):hover {
  background-color: #f0f0f0;
}

.calendar-grid button.other-month {
  color: #ccc;
  cursor: default; /* Remove o cursor de clique para dias de outros meses */
}

.calendar-grid button.today {
  border-color: #337ab7; /* Destaca o dia de hoje */
  font-weight: bold;
}

.calendar-grid button.selected {
  background-color: #337ab7; /* Destaca o dia selecionado */
  color: white;
  border-color: #2e6da4;
}