/* --- VARIABLES --- */
/* On définit quelques variables locales pour la cohérence */
.fc {
  --fc-page-bg-color: #ffffff;
  --fc-neutral-bg-color: #f9fafb; /* Gray 50 */
  --fc-border-color: #e5e7eb;     /* Gray 200 — assez visible pour repérer les heures/jours sur un planning vide */
  
  --fc-button-text-color: #374151;
  --fc-button-bg-color: #ffffff;
  --fc-button-border-color: #e5e7eb;
  --fc-button-hover-bg-color: #f3f4f6;
  --fc-button-active-bg-color: #f3f4f6;
  --fc-button-active-border-color: #d1d5db;
  
  --fc-event-bg-color: #eef2ff;   /* Indigo 50 */
  --fc-event-border-color: #6366f1; /* Indigo 500 */
  --fc-event-text-color: #4338ca;   /* Indigo 700 */
  
  --fc-today-bg-color: #fafafa;
  --fc-now-indicator-color: #ef4444;
  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 16px;
  border: 1px solid #e5e7eb;
}

/* --- HEADER & TOOLBAR --- */
.fc .fc-toolbar {
  margin-bottom: 1.5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827; /* Gray 900 */
  letter-spacing: -0.025em;
}

/* Boutons "Ghost" modernes */
.fc .fc-button {
  background-color: white;
  border: 1px solid #e5e7eb; /* Gray 200 */
  color: #374151; /* Gray 700 */
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 8px; /* Coins plus arrondis */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  text-transform: capitalize;
}

.fc .fc-button:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.fc .fc-button:focus {
  box-shadow: 0 0 0 4px rgba(229, 231, 235, 0.5) !important; /* Ring focus gris doux */
}

/* --- GRILLE & JOURS --- */
.fc-theme-standard td, 
.fc-theme-standard th {
  border-color: var(--fc-border-color);
}

/* En-têtes de jours (Lundi 10, Mardi 11...) — texte capitalisé, plus affirmé.
   FullCalendar rend ces cellules comme des liens <a> cliquables (navigation
   vers le jour) : sans text-decoration:none, le navigateur les souligne. */
.fc .fc-col-header-cell-cushion {
  padding: 14px 0;
  color: #374151; /* Gray 700 */
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: normal;
  text-decoration: none;
}

/* Jour actif dans l'en-tête : indigo + puce ronde avant le nom */
.fc .fc-day-today .fc-col-header-cell-cushion {
  color: #6366f1; /* Indigo 500 */
}

.fc .fc-day-today .fc-col-header-cell-cushion::before {
  content: '●';
  font-size: 0.5rem;
  vertical-align: middle;
  margin-right: 4px;
}

/* Ligne des dates : fond gris clair uni, détachée de la grille */
.fc .fc-col-header,
.fc .fc-col-header-cell {
  background-color: var(--fc-neutral-bg-color);
}

/* Colonne des heures (vue semaine/jour) : élargie de 50%, texte centré.
   FullCalendar calcule la largeur de cette colonne en JS (min-width inline
   sur .fc-timegrid-axis-frame) : un simple `width` en CSS classique est
   ignoré, il faut un !important sur min-width pour la forcer. */
.fc .fc-timegrid-axis {
  background-color: var(--fc-neutral-bg-color);
}

.fc .fc-timegrid-axis-frame {
  min-width: 90px !important; /* ~ +50% par rapport à la largeur par défaut */
  justify-content: center;
}

.fc .fc-timegrid-slot-label-cushion {
  color: #374151; /* Gray 700 — plus lisible que le gris clair précédent */
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Cellules */
.fc-daygrid-day-frame {
  padding: 4px;
}

/* Numéros de jours */
.fc .fc-daygrid-day-number {
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 4px;
}

/* Aujourd'hui (vue mois) : pas de fond, juste la pastille sur le numéro */
.fc .fc-daygrid-day.fc-day-today {
  background-color: transparent !important; /* On retire le fond jaune moche par défaut */
}

/* Aujourd'hui (vue semaine/jour) : léger fond teinté sur toute la colonne,
   pour repérer le jour même sans événement (cf. calendar_events grid vide) */
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(99, 102, 241, 0.06) !important; /* Indigo très clair */
}

.fc .fc-day-today .fc-daygrid-day-number {
  background-color: #111827; /* Pastille noire élégante pour aujourd'hui */
  color: white;
  font-weight: 700;
}

/* Hover sur les jours */
.fc-daygrid-day:hover {
  background-color: #f9fafb;
  cursor: pointer;
}

/* --- ÉVÉNEMENTS (Le cœur du design) ---
   Chaque événement fixe sa propre couleur (backgroundColor/borderColor/textColor,
   cf. calendar_events_controller.rb#serialize_event) : on ne force donc PAS ces
   propriétés ici avec !important, sinon tous les événements auraient la même
   teinte indigo par défaut quel que soit leur type. On ne définit que la forme
   commune (radius, padding, ombre) ; le fallback --fc-event-* ne s'applique
   qu'aux rares events sans couleur explicite. */
.fc-event {
  border: none;
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 4px;
  padding: 3px 6px;
  margin-bottom: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.fc-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  filter: brightness(0.97);
}

.fc-event-title {
  font-weight: 600;
}

.fc-event-time {
  font-weight: 500;
  opacity: 0.8;
  margin-right: 4px;
}

/* Dot pour la vue "Mois" si l'event est trop petit */
.fc-daygrid-event-dot {
  border-color: var(--fc-event-border-color);
}

/* Lien "+X" quand un créneau contient plus d'événements que eventMaxStack
   (cf. calendar_controller.js) — pilule pleine largeur avec icône, dégradé
   léger et effet de lift au survol, pour ressortir comme un vrai élément
   interactif plutôt qu'un simple lien discret. */
.fc-timegrid-more-link,
.fc-daygrid-more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff); /* Indigo 50 → 100 */
  color: #4338ca; /* Indigo 700 */
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(67, 56, 202, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fc-timegrid-more-link::before,
.fc-daygrid-more-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366f1; /* Indigo 500 */
}

.fc-timegrid-more-link:hover,
.fc-daygrid-more-link:hover {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe); /* Indigo 100 → 200 */
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(67, 56, 202, 0.25);
}

/* --- SÉLECTEUR DE PLAGE HORAIRE (double slider) ---
   Deux <input type="range"> superposés en pleine largeur : le track NATIF de
   chacun (pas seulement son thumb) couvre toute la piste, donc le track de
   l'input du dessus (déclaré en second dans le DOM) recouvrait visuellement
   le thumb de l'input du dessous — même avec z-index sur les thumbs. Solution :
   les deux tracks natifs sont rendus transparents, et un unique track gris
   statique (.calendar-time-range-track) est affiché en dessous de tout,
   comme la barre verte. Ordre d'empilement : track gris (0) < barre verte
   (1) < thumbs des deux inputs (2). */
.calendar-time-range-slider .calendar-time-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none; /* seul le thumb doit être cliquable, pas toute la piste */
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}

.calendar-time-range-slider .calendar-time-range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.calendar-time-range-slider .calendar-time-range-input::-moz-range-track {
  height: 4px;
  background: transparent;
}

/* Track gris statique, unique, en dessous de tout — remplace les tracks
   natifs des deux inputs (transparents ci-dessus) pour éviter qu'ils se
   recouvrent l'un l'autre. */
.calendar-time-range-track {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  z-index: 0;
}

.calendar-time-range-slider .calendar-time-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto; /* réactive le clic uniquement sur le curseur */
  position: relative;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #198754; /* vert — cohérent avec le bouton de validation */
  margin-top: -6px;
  cursor: pointer;
}

.calendar-time-range-slider .calendar-time-range-input::-moz-range-thumb {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #198754;
  cursor: pointer;
}

/* Barre verte entre les deux curseurs : position/largeur calculées en JS
   (cf. calendar_controller#previewTimeRange), superposée au track gris mais
   sous les thumbs (z-index 1 < 2 ci-dessus). */
.calendar-time-range-fill {
  position: absolute;
  top: 10px; /* centré verticalement dans le slider de 24px de haut (10 + 4 + 10) */
  height: 4px;
  background: #198754;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

/* --- VUE LISTE --- */
.fc-list {
  border: none !important;
}

.fc-list-day-cushion {
  background-color: #f9fafb !important;
}

.fc-list-event:hover td {
  background-color: #f3f4f6 !important;
}

.fc-list-day-text, .fc-list-day-side-text {
  font-weight: 600;
  color: #374151;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .fc {
    padding: 0;
    border: none;
    box-shadow: none;
  }

  .fc .fc-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .fc .fc-toolbar-title {
    font-size: 1.25rem;
    text-align: center;
  }
  
  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}