html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}


  :root {
  --root-bg: #ebebeb;
  }


#calendar {
  height: 90vh;
  margin: 0 auto;
}
.fc-timegrid-slot {
  height: 3em !important;
}

/* fallback si pas de @apply */
.fc .fc-button {
  background-color: oklch(45% 0.24 277.023); /* équivalent btn-primary */
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  font-size: 0.875rem;
  cursor: pointer;
}

.fc-button:focus {
  outline: none !important;          /* supprime le contour focus */
  box-shadow: none !important;       /* supprime l’ombre si DaisyUI ou Tailwind en met */
}

.fc .fc-button:hover {
  background-color: oklch(93% 0.034 272.788); /* hover btn-primary */
  color: oklch(45% 0.24 277.023); /* équivalent btn-primary */
}

/* ciblage spécifique */
.fc-today-button {
  background-color: oklch(93% 0.034 272.788) !important;
  color: oklch(45% 0.24 277.023) !important;
}

.fc-today-button:hover {
  background-color: #422ad5 !important;
  color: oklch(93% 0.034 272.788) !important;
  opacity: 1 !important;
}

/* Vue dayGrid ou timeGrid : surbrillance du jour aujourd'hui */
.fc .fc-day-today {
  background-color: #e0e7ff !important; 
  border: 2px solid #e0e7ff !important; /* bordure jaune */
  border-radius: 6px;
}

/* header de la colonne */
.fc .fc-col-header-cell.fc-day-today {
  background-color: #e0e7ff !important;
  color: #422ad5 !important;
  border-radius: 0px !important;
}

.fc-event {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* ou enlever si tu veux 2 lignes max */
  font-size: 0.85em;
  line-height: 1.2em;
}

/* Styles CSS pour le calendrier FullCalendar */

/* Applique le curseur 'pointer' par défaut à tous les événements cliquables standards */
.fc-event:not(.fc-event-background) {
  cursor: pointer;
}

/* Force le curseur 'default' sur les événements de fond générés par FullCalendar */
/* Ces classes sont appliquées directement par FC aux éléments de fond */
.fc-event-background,
.fc-timegrid-bg-event,
.fc-daygrid-bg-event {
  cursor: default !important; /* Ceci est crucial pour écraser les styles par défaut */
}

/* Si les règles ci-dessus ne fonctionnent pas, il est possible qu'il y ait une surcouche.
   On peut tenter de cibler plus spécifiquement le conteneur du fond si le problème persiste. */
.fc-bg-event {
    cursor: default !important;
    background-color: #d3d3d3 !important;

}

/* Assurez-vous que les éléments redimensionnables (si présents sur les fonds par erreur) n'ont pas de pointeur */
.fc-event-resizable {
    cursor: default !important;
}

/* Le reste de votre CSS FullCalendar... */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
#calendar {
  height: 90vh;
  margin: 0 auto;
}
.fc-timegrid-slot {
  height: 3em !important;
}

/* fallback si pas de @apply */
.fc .fc-button {
  background-color: oklch(45% 0.24 277.023); /* équivalent btn-primary */
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  font-size: 0.875rem;
  cursor: pointer;
}

.fc-button:focus {
  outline: none !important;          /* supprime le contour focus */
  box-shadow: none !important;       /* supprime l’ombre si DaisyUI ou Tailwind en met */
}

.fc .fc-button:hover {
  background-color: oklch(93% 0.034 272.788); /* hover btn-primary */
  color: oklch(45% 0.24 277.023); /* équivalent btn-primary */
}

/* ciblage spécifique */
.fc-today-button {
  background-color: oklch(93% 0.034 272.788) !important;
  color: oklch(45% 0.24 277.023) !important;
}

.fc-today-button:hover {
  background-color: rgb(66, 42, 213) !important;
  color: oklch(93% 0.034 272.788) !important;
  opacity: 1 !important;
}

/* Vue dayGrid ou timeGrid : surbrillance du jour aujourd'hui */
.fc .fc-day-today {
  background-color: #e0e7ff !important; /* jaune pâle translucide */
  border: 2px solid #e0e7ff !important; /* bordure jaune */
  border-radius: 6px;
}

/* header de la colonne */
.fc .fc-col-header-cell.fc-day-today {
  background-color: #e0e7ff !important;
  color: #422ad5 !important;
  border-radius: 0px !important;
}


/* Styles personnalisés pour Flatpickr avec DaisyUI */

/* Container principal */
.flatpickr-calendar {
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid hsl(var(--border-color, 220 13% 91%)) !important;
  background: hsl(var(--background, 0 0% 100%)) !important;
}

/* Header du calendrier */
.flatpickr-calendar .flatpickr-months {
  background-color: #422ad5 !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.flatpickr-calendar .flatpickr-month {
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
}

.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Jours de la semaine */
.flatpickr-calendar .flatpickr-weekdays {
  background: hsl(var(--base-200, 220 14.3% 95.9%)) !important;
}

.flatpickr-calendar .flatpickr-weekday {
  color: hsl(var(--base-content, 220.9 39.3% 11%)) !important;
  font-weight: 600;
}

/* Jours du calendrier */
.flatpickr-calendar .flatpickr-day {
  color: hsl(var(--base-content, 220.9 39.3% 11%)) !important;
  border-radius: 0.25rem !important;
}

.flatpickr-calendar .flatpickr-day:hover {
  background: hsl(var(--primary, 220.9 39.3% 11%)) !important;
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
}

.flatpickr-calendar .flatpickr-day.selected {
  background: hsl(var(--primary, 220.9 39.3% 11%)) !important;
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
  border-color: hsl(var(--primary, 220.9 39.3% 11%)) !important;
}

.flatpickr-calendar .flatpickr-day.today {
  background: hsl(var(--accent, 12.2 88.3% 80.8%)) !important;
  color: hsl(var(--accent-content, 349.7 89.2% 60.2%)) !important;
  border-color: hsl(var(--accent, 12.2 88.3% 80.8%)) !important;
}

.flatpickr-calendar .flatpickr-day.today:hover {
  background: hsl(var(--accent-focus, 12.2 88.3% 75.8%)) !important;
}

/* Jours désactivés */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: hsl(var(--base-300, 220 14.3% 85.9%)) !important;
}

/* Section horaire */
.flatpickr-calendar .flatpickr-time {
  border-top: 1px solid hsl(var(--border-color, 220 13% 91%)) !important;
  background: hsl(var(--base-100, 0 0% 100%)) !important;
}

.flatpickr-calendar .flatpickr-time input {
  background: transparent !important;
  color: hsl(var(--base-content, 220.9 39.3% 11%)) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  color: hsl(var(--base-content, 220.9 39.3% 11%)) !important;
}

.flatpickr-calendar .flatpickr-time .arrowUp,
.flatpickr-calendar .flatpickr-time .arrowDown {
  color: hsl(var(--primary, 220.9 39.3% 11%)) !important;
}

.flatpickr-calendar .flatpickr-time .arrowUp:hover,
.flatpickr-calendar .flatpickr-time .arrowDown:hover {
  background: hsl(var(--primary, 220.9 39.3% 11%)) !important;
  color: hsl(var(--primary-content, 210 20% 98%)) !important;
}

/* Animation d'ouverture */
.flatpickr-calendar.open {
  animation: flatpickrFadeIn 0.2s ease-out;
}

@keyframes flatpickrFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mode sombre (si vous utilisez le thème sombre) */
[data-theme="dark"] .flatpickr-calendar {
  background: hsl(var(--base-100, 220 23% 11%)) !important;
  border-color: hsl(var(--base-300, 220 17% 24%)) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day {
  color: hsl(var(--base-content, 220 13% 69%)) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-weekdays {
  background: hsl(var(--base-200, 220 18% 20%)) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-time {
  background: hsl(var(--base-100, 220 23% 11%)) !important;
  border-color: hsl(var(--base-300, 220 17% 24%)) !important;
}

/* Responsive */
@media (max-width: 640px) {
  .flatpickr-calendar {
    width: 280px !important;
  }
  
  .flatpickr-calendar .flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
  }
}

---
/* Styles for the "Mois" button */
.fc-dayGridMonth-button {
  background-color: oklch(50% 0.1 240); /* A moderate blue */
  color: white;
}

.fc-dayGridMonth-button:hover {
  background-color: oklch(55% 0.12 245); /* Lighter blue on hover */
  color: white;
}

.fc-dayGridMonth-button.fc-button-active {
  background-color: oklch(93% 0.034 272.788) !important; /* Darker, more vibrant blue when active */
  color: oklch(45% 0.24 277.023) !important;
}

.fc-dayGridMonth-button.fc-button-active:hover {
  background-color: oklch(93% 0.034 272.788) !important; /* Even darker on hover for active */
}

---
/* Styles for the "Semaine" button */
.fc-timeGridWeek-button {
  background-color: oklch(50% 0.1 150); /* A moderate green */
  color: white;
}

.fc-timeGridWeek-button:hover {
  background-color: oklch(55% 0.12 155); /* Lighter green on hover */
  color: white;
}

.fc-timeGridWeek-button.fc-button-active {
  background-color: oklch(93% 0.034 272.788) !important; /* Darker, more vibrant green when active */
  color: oklch(45% 0.24 277.023) !important;
}

.fc-timeGridWeek-button.fc-button-active:hover {
  background-color: oklch(93% 0.034 272.788) !important; /* Even darker on hover for active */
}

---
/* Styles for the "Jour" button */
.fc-timeGridDay-button {
  background-color: oklch(55% 0.15 40); /* A moderate orange */
  color: white;
}

.fc-timeGridDay-button:hover {
  background-color: oklch(60% 0.17 45); /* Lighter orange on hover */
  color: white;
}

.fc-timeGridDay-button.fc-button-active {
  background-color: oklch(93% 0.034 272.788) !important; /* Darker, more vibrant orange when active */
  color: oklch(45% 0.24 277.023) !important;
}

.fc-timeGridDay-button.fc-button-active:hover {
  background-color: oklch(93% 0.034 272.788) !important; /* Even darker on hover for active */
}

.fc-event.closed {
  /* This combines the hatched pattern and the gray background color */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 0,
    rgba(255, 255, 255, 0.4) 2px,
    transparent 2px,
    transparent 6px
  ),
  linear-gradient(to bottom, #a3a3a3, #a3a3a3) !important;
  /* Adds a subtle text color for contrast */
    color: #ffffff !important;
  /* Ensures the border is gray to match the background */
  border-color: #a3a3a3 !important;
}