/* ---------------------------------
   Calendrier
----------------------------------- */
.calendar {
    margin-top: 20px;
}

.week-container {
	background:#f9f9f9;
	padding:10px;
}

.calendar-header,
.view-toggle {
    margin-bottom: 10px;
}

.view-toggle {
	background:#f9f9f9;
	padding:10px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.today {
    background-color: #d1ecf1;
}

.checked-day {
    background-color: #d4edda;
}

/* ---------------------------------
   Vue annuelle
----------------------------------- */
.year-view .card {
    border: 1px solid #ccc;
}

/* ---------------------------------
   Vue hebdomadaire (pastilles)
----------------------------------- */
.week-title {
  margin: 0;
  padding: 10px;
  background:#f9f9f9;
  text-transform: uppercase;
  font-weight: bold;
}

/* 
  On laisse la disposition à Bootstrap (dans index_view.php on a 
  .d-flex .justify-content-center .align-items-end .gap-3).
  Mais vous pouvez ajuster si besoin.
*/

.day-block {
  /* Bordure arrondie gérée aussi par .rounded-pill (Bootstrap), 
     on peut ajouter un border-radius supplémentaire si on veut */
  border-radius: 25px;
  /* Centrage du texte fait via .d-flex .flex-column .align-items-center .justify-content-center */
  position: relative;
  transition: background-color 0.3s;
}

.day-number {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.day-abbr {
  font-size: 0.8rem;
  line-height: 1;
}

.day-check {
  /* On gère la position absolue en inline style dans index_view.php,
     ou ici si vous préférez : */
  font-size: 0.9rem;
  color: #333;
}