/* Style global pour le body */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #333;
  color: #333;
}

/* Conteneur principal */
.beer-count {
  text-align: center;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #333;
  border: 2px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Titres */
h1 {
  color: #ddd;
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Paragraphes */
p {
  margin: 10px 0;
}

/* Style pour les totaux */
.total {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 10px;
}

/* Conteneur pour les boutons Ajouter et Retirer */
.quantity-buttons div {
  display: flex; /* Place les boutons côte à côte */
  align-items: center; /* Aligne verticalement */
  gap: 0; /* Supprime les espaces entre les boutons */
  margin-bottom: 15px; /* Espace entre les groupes */
  flex-wrap: nowrap; /* Empêche le retour à la ligne */
}

/* Boutons */
button {
  background-color: #2ecc71; /* Couleur verte par défaut */
  color: white;
  font-size: 1rem;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 0; /* Supprime les marges */
}

/* Boutons Ajouter et Retirer */
button.add, button.remove {
  flex: 1; /* Les boutons prennent la même largeur */
  border-radius: 0; /* Coins carrés */
  font-size: 0.9rem;
}

/* Coins arrondis extérieurs */
button.add {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #27ae60;
}

button.remove {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #e74c3c;
}

/* Supprimer la double bordure entre les boutons */
button.add {
  border-right: none;
}

/* Hover sur les boutons Ajouter et Retirer */
button.add:hover {
  background-color: #2ecc71;
}

button.remove:hover {
  background-color: #c0392b;
}

/* Bouton Réinitialiser */
button.reset {
  background-color: #f39c12;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

button.reset:hover {
  background-color: #e67e22;
}

/* Boutons désactivés */
button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Style pour le footer */
.footer {
  margin-top: 20px;
  padding: 10px;
  background-color: #333;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid #ddd;
}

.footer p {
  margin: 0;
  padding: 5px 0;
}

.counter_display, .calendar_link{
  color : #ddd;
}

/* Media Queries pour la version mobile */
@media (max-width: 600px) {
  .beer-count {
      max-width: 100%; /* Le contenu prend toute la largeur */
      border: none; /* Suppression de la bordure */
      padding: 10px;
  }

  .quantity-buttons div {
      flex-wrap: nowrap; /* Les boutons restent côte à côte */
  }

  /* Les boutons prennent toute la largeur combinée */
  button.add, button.remove {
      flex: 1; /* Garde les boutons collés et de taille égale */
      font-size: 1rem; /* Augmente la lisibilité sur mobile */
      padding: 15px; /* Plus de padding pour les doigts */
  }

  .footer {
      padding: 15px;
      font-size: 1rem;
  }
}


/* Page calendrier */
.calendar-container {
  margin-top: 20px;
  text-align: center;
}

#calendar {
  display: inline-block;
  margin-top: 20px;
  max-width: 100%; /* Empêche le calendrier de dépasser la largeur de la page */
}

#calendar table {
  width: 100%; /* Utilise toute la largeur disponible */
  border-collapse: collapse;
}

#calendar td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  width: 20%; /* Réduit la largeur des cellules pour n'afficher que 5 cases par ligne */
  vertical-align: top;
}

.calendar-day {
  display: flex;
  flex-direction: column; /* Organise les éléments verticalement */
  align-items: center; /* Centre la date et la quantité */
  justify-content: flex-start; /* Assure que tout le contenu est bien aligné en haut */
  min-height: 50px; /* Hauteur minimale pour chaque cellule */
}

.calendar-day-number {
  font-weight: bold;
  font-size: 1.2rem;
}

.calendar-day-quantity-wrapper {
  display: inline-flex; /* Utilisation de flex pour aligner la quantité et le "cl" sur la même ligne */
  align-items: center; /* Aligne la quantité et le "cl" horizontalement */
  justify-content: center;
  margin-top: 5px; /* Un petit espace entre la date et la quantité */
}

.calendar-day-quantity {
  font-size: 0.9rem;
  color: #666;
}

#daily-total {
  margin-top: 10px;
}

/* Media Query pour les petits écrans */
@media (max-width: 600px) {
  .calendar-container {
    overflow-x: auto; /* Permet un défilement horizontal si nécessaire */
  }

  #calendar table {
    width: auto; /* Ajuste la taille du tableau pour s'adapter à l'écran */
  }

  #calendar td {
    width: 33.33%; /* Réduit la largeur des cellules pour afficher 3 cases par ligne sur mobile */
  }

  .calendar-day {
    flex-direction: column; /* En mode mobile, la date et la quantité sont empilées verticalement */
    padding: 10px 0; /* Ajout de padding pour une meilleure lisibilité */
  }

  .calendar-day-number {
    font-size: 1rem; /* Ajuste la taille de la date pour le mobile */
  }

  .calendar-day-quantity-wrapper {
    font-size: 0.8rem; /* Ajuste la taille de la quantité pour le mobile */
    margin-top: 10px; /* Plus d'espace entre la date et la quantité */
  }
}