/* --- CSS DO MODAL DE CALENDÁRIO --- */

/* Fundo Escuro que cobre tudo */
.modal-overlay {
  position: fixed; /* Fixa na tela inteira */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Fica por cima de tudo */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Classe para esconder o modal */
.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: none; /* Garante que não ocupa espaço */
}

/* A caixa branca do calendário */
.modal-content.calendar-box {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 16px;
  width: 90%;
  max-width: 350px; /* Largura máxima estilo mobile */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-calendar-toggle {
  background: none;
  border: none;
  font-size: 1.2rem; /* Levemente menor para alinhar melhor */
  cursor: pointer;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  padding: 0;
}

.btn-calendar-toggle:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Cabeçalho (Navegação) */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--primary-color);
}

.cal-nav-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 5px 10px;
}

/* Grid de Dias da Semana e Dias do Mês */
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 colunas iguais sempre */
  text-align: center;
  gap: 6px; /* Espaço entre as células */
}

.calendar-weekdays div {
  font-size: 0.75rem;
  font-weight: bold;
  color: #888;
  margin-bottom: 8px;
}

/* Célula do Dia */
.cal-day {
  aspect-ratio: 1 / 1; /* Mantém a célula quadrada */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%; /* Bolinha */
  font-weight: 500;
  font-size: 0.85rem;
  position: relative;

  background-color: var(--background-color); /* Cor padrão (dia não estudado) */
  color: var(--text-color);
  border: 1px solid transparent;

  padding: 2px 0;
  line-height: 1;
}

/* --- ESTADOS DO DIA --- */

/* Dia Estudado (Verde com Check) */
.cal-day.studied {
  background-color: #2ecc71; /* Verde */
  color: white;
}
/* Adiciona o ícone de check via CSS */
.cal-day.studied::after {
  content: "✓";
  font-size: 0.7rem;
  margin-top: 2px;
  line-height: 1;
}

/* Dia de Descanso (Amarelo/Laranja) */
.cal-day.rest {
  background-color: #f1c40f; /* Amarelo */
  color: #fff;
}

.cal-day.rest::after {
  content: "😴";
  font-size: 0.7rem;
  margin-top: 2px;
  line-height: 1;
}

/* Dia de Descanso (Amarelo/Laranja) */
.cal-day.missed {
  background-color: #ff5252; /* Amarelo */
  color: #fff;
}

/* Adiciona o ícone de check via CSS */
.cal-day.missed::after {
  content: "✕";
  font-size: 0.6rem;
  margin-top: 2px;
  line-height: 1;
}

/* Dia Vazio (Início do mês) */
.cal-day.empty {
  background: none;
}
/* Dia Atual (Hoje) - Opcional: Borda de destaque */
.cal-day.today {
  border-color: var(--primary-color);
}

/* --- Media Query para Telas Muito Pequenas (Ex: abaixo de 350px) --- */
@media (max-width: 375px) {
  .modal-content.calendar-box {
    padding: 15px; /* Reduz mais o padding interno */
    margin: 20px;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 4px; /* Reduz mais o espaço entre os dias */
  }

  .calendar-weekdays div {
    font-size: 0.7rem;
  }

  .cal-day {
    font-size: 0.8rem; /* Fonte mínima para o número */
  }
}