:root {
  --primary-color: #204FB3;
  --secondary-color: #ffffff;
  --highlight-color: #9bc9f4;
  --text-color: #444444;
  --header-bg-color: #0078D7;
  --day-bg-color: #f6f9ff;
  --header-text-color: #ffffff;
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background: #f6f9ff;
  color: var(--text-color);
  width: 100%;
  overflow-x: hidden;
}

.container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.calendar-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
  background: var(--secondary-color);
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
  border-radius: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: bold;
}

.header button {
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.header button:hover {
  background-color: #005bb5;
}

.view-options {
  margin-bottom: 20px;
  text-align: center;
}

.view-options button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.view-options button:hover {
  background-color: #005bb5;
}

.date-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.date-selection label {
  margin-right: 10px;
  font-size: 18px;
}

.date-selection select {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 16px;
}

/* Estilo do calendário */
#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 colunas para 7 dias */
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

/* Cabeçalhos dos dias da semana */
.calendar-header {
  grid-column: span 7; /* Cabeçalho ocupa todas as 7 colunas */
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 colunas para 7 dias */
}

.calendar-header-cell {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
}

/* Estilo das células do calendário */
.calendar-cell {
  background-color: var(--day-bg-color);
  border: 1px solid #ddd;
  padding: 10px;
  position: relative;
  border-radius: 5px;
}

.empty-cell {
  background-color: transparent;
}

.calendar-cell:hover {
  background-color: var(--highlight-color);
  cursor: pointer;
}

/* Responsividade */

/* Para a visualização de "Dia" */
#calendar.day-view {
  grid-template-columns: 1fr; /* Apenas uma coluna para exibir o dia em destaque */
  grid-auto-rows: minmax(200px, auto); /* Aumentar a altura da célula para o dia */
}

.calendar-cell.day-view {
  font-size: 2em; /* Aumentar o tamanho da fonte do número do dia */
  padding: 20px; /* Aumentar o padding para destacar mais o dia */
  background-color: #ffffff;
}

/* Em telas pequenas */
@media (max-width: 768px) {
  #calendar {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas em telas pequenas */
  }

  .calendar-cell {
    font-size: 12px;
    padding: 10px;
  }

  .header h2 {
    font-size: 18px;
  }

  .header button, .view-options button {
    padding: 8px 12px;
    font-size: 14px;
  }

  .date-selection label, .date-selection select {
    font-size: 14px;
  }

  /* Para a visualização de "Dia" */
  #calendar.day-view {
    grid-template-columns: 1fr; /* Uma coluna para o dia */
    grid-auto-rows: minmax(300px, auto); /* Aumentar a altura em dispositivos menores */
  }
}

/* Cores baseadas no status do evento */
.status-confirmado {
  background-color: #d4edda; /* Verde claro */
  color: #155724;
  border-left: 5px solid #28a745;
}

.status-ausente {
  background-color: #f8d7da; /* Vermelho claro */
  color: #721c24;
  border-left: 5px solid #dc3545;
}

.status-pendente {
  background-color: #fff3cd; /* Amarelo claro */
  color: #856404;
  border-left: 5px solid #ffc107;
}

/* Estilo dos eventos */
.evento {
  padding: 5px;
  margin-top: 5px;
  border-radius: 4px;
  font-size: 0.9em;
  display: block;
}

/* Estilo para a exibição das horas */
.hora-cell {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  background-color: #f9f9f9;
}

.hora-cell .evento {
  margin-left: 10px;
  padding: 5px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
}

/* Melhorar a separação visual entre as horas */
.hora-cell {
  border-bottom: 1px solid #ddd;
  padding: 5px;
  background-color: #f9f9f9;
  font-weight: bold;
  font-size: 0.9em;
}

.hora-cell:hover {
  background-color: #f1f1f1;
}


/* Legenda de status */
.legend-container {
  margin-top: 20px;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.legend-color {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 5px;
}

/* Aplicar cores de status na legenda */
.legend-item.status-confirmado .legend-color {
  background-color: #d4edda; /* Verde claro */
  border-left: 5px solid #28a745;
}

.legend-item.status-cancelado .legend-color {
  background-color: #f8d7da; /* Vermelho claro */
  border-left: 5px solid #dc3545;
}

.legend-item.status-pendente .legend-color {
  background-color: #fff3cd; /* Amarelo claro */
  border-left: 5px solid #ffc107;
}


/* Estilo base para o layout das horas do dia */
.hora-cell {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  background-color: #f9f9f9; /* Cor de fundo padrão */
  font-weight: bold;
  font-size: 0.9em;
}

/* Destacar os horários comerciais (08:00 às 18:00) */
.hora-cell.horario-comercial {
  background-color: #e0eef7; /* Verde claro para horários comerciais */
}

.hora-cell .evento {
  margin-left: 10px;
  padding: 5px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
}

/* Melhorar a separação visual entre as horas */
.hora-cell:hover {
  background-color: #f1f1f1; /* Efeito de hover */
}

/* Limitar a altura da visualização do dia para horários comerciais */
.calendar-cell.day-view {
  max-height: 500px; /* Altura máxima visível */
  overflow-y: scroll; /* Permitir scroll para ver horários fora do expediente */
}

/* Para a visualização de "Dia" */
#calendar.day-view {
  grid-template-columns: 1fr; /* Uma coluna para o dia */
  grid-auto-rows: minmax(300px, auto);
}
/* Limitar a altura da visualização da semana para horários comerciais */
.calendar-cell.week-view {
  max-height: 500px; /* Altura máxima visível para cada dia na visualização semanal */
  overflow-y: scroll; /* Permitir scroll para ver horários fora do expediente */
}

/* Estilo para a exibição das horas */
.hora-cell {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  background-color: #f9f9f9;
}

/* Destacar os horários comerciais (08:00 às 18:00) */
.hora-cell.horario-comercial {
  background-color: #e0edf7; /* Verde claro para horários comerciais */
}


/* Estilo do popup */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 10px;
}

.popup-content {
  display: flex;
  flex-direction: column;
}

.popup-content h3 {
  margin-bottom: 10px;
}

.popup-content label {
  margin-bottom: 5px;
}

.popup-content select {
  margin-bottom: 10px;
}

.popup-content button {
  margin-top: 10px;
  padding: 10px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.popup-content button:hover {
  background-color: #005bb5;
}


.whatsapp-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  vertical-align: middle;
  cursor: pointer;
}