/* ===== CALENDRIER - COULEURS UNIFIÉES ===== */
/* Version: 1.0.1 - Couleurs uniformes avec la légende */

/* Variables de couleurs unifiées */
:root {
  --calendar-violet: #7c3aed;
  --calendar-violet-soft: rgba(124, 58, 237, 0.8);
  --calendar-violet-border: rgba(124, 58, 237, 0.6);
  
  --calendar-gold: #d4af37;
  --calendar-gold-soft: rgba(212, 175, 55, 0.8);
  --calendar-gold-border: rgba(212, 175, 55, 0.6);
  
  --calendar-red: #dc3545;
  --calendar-red-soft: rgba(220, 53, 69, 0.8);
  --calendar-red-border: rgba(220, 53, 69, 0.6);
  
  --calendar-green: #39b36e;
  --calendar-green-border: rgba(57, 179, 110, 0.6);
}

/* ===== DATES OUVERTES ===== */

/* Midi ouvert - Violet uniforme */
#angemont-tunnel .ui-datepicker td.slot-lunch a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-lunch span.ui-state-default {
  background: var(--calendar-violet-soft) !important;
  box-shadow: inset 0 0 0 2px var(--calendar-violet-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Soir ouvert - Jaune uniforme */
#angemont-tunnel .ui-datepicker td.slot-dinner a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-dinner span.ui-state-default {
  background: var(--calendar-gold-soft) !important;
  box-shadow: inset 0 0 0 2px var(--calendar-gold-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Midi & Soir - Dégradé violet-jaune */
#angemont-tunnel .ui-datepicker td.slot-both a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-both span.ui-state-default {
  background: linear-gradient(135deg, var(--calendar-violet-soft) 0 50%, var(--calendar-gold-soft) 50% 100%) !important;
  box-shadow: 
    inset 0 0 0 2px var(--calendar-violet-border),
    inset 0 0 0 2px var(--calendar-gold-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ===== DATES COMPLÈTES (ROUGE) ===== */

/* Complet - Rouge uniforme */
#angemont-tunnel .ui-datepicker td.slot-full-both a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-full-both span.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-full-lunch a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-full-lunch span.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-full-dinner a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-full-dinner span.ui-state-default {
  background: var(--calendar-red-soft) !important;
  box-shadow: inset 0 0 0 2px var(--calendar-red-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Dates complètes non-cliquables */
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-both a,
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-both span,
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-lunch a,
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-lunch span,
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-dinner a,
#angemont-tunnel .ui-datepicker td.slot-closed.slot-full-dinner span {
  background: var(--calendar-red-soft) !important;
  box-shadow: inset 0 0 0 2px var(--calendar-red-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

/* ===== DATES MIXTES (DÉGRADÉS) ===== */

/* Midi complet + Soir ouvert - Dégradé rouge-jaune (SANS thème) */
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch:not(.slot-theme) a,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch:not(.slot-theme) span {
  background: linear-gradient(135deg, var(--calendar-red-soft) 0 50%, var(--calendar-gold-soft) 50% 100%) !important;
  box-shadow: 
    inset 0 0 0 2px var(--calendar-red-border),
    inset 0 0 0 2px var(--calendar-gold-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Soir complet + Midi ouvert - Dégradé violet-rouge (SANS thème) */
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner:not(.slot-theme) a,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner:not(.slot-theme) span {
  background: linear-gradient(135deg, var(--calendar-violet-soft) 0 50%, var(--calendar-red-soft) 50% 100%) !important;
  box-shadow: 
    inset 0 0 0 2px var(--calendar-violet-border),
    inset 0 0 0 2px var(--calendar-red-border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ===== DATES MIXTES À THÈME (DÉGRADÉ + BORDURE VERTE) ===== */

/* Midi complet + Soir ouvert + Thème - Dégradé rouge-jaune avec bordure verte */
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch.slot-theme a,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch a.slot-theme {
  background: linear-gradient(135deg, var(--calendar-red-soft) 0 50%, var(--calendar-gold-soft) 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--calendar-green) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

/* Soir complet + Midi ouvert + Thème - Dégradé violet-rouge avec bordure verte */
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner.slot-theme a,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner a.slot-theme {
  background: linear-gradient(135deg, var(--calendar-violet-soft) 0 50%, var(--calendar-red-soft) 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--calendar-green) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

/* ===== DATES À THÈME (VERT) ===== */

#angemont-tunnel .ui-datepicker td.slot-theme a,
#angemont-tunnel .ui-datepicker td a.slot-theme {
  position: relative;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 3px var(--calendar-green) !important;
}

#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-default,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-default,
#angemont-tunnel .ui-datepicker td a.slot-theme.ui-state-default {
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 3px var(--calendar-green) !important;
}

/* Supprimer le petit point vert */
#angemont-tunnel .ui-datepicker td.slot-theme a::after,
#angemont-tunnel .ui-datepicker td a.slot-theme::after {
  content: none !important;
}

/* ===== DATES SÉLECTIONNÉES (BORDURE JAUNE) ===== */

/* Bordure jaune pour les dates sélectionnées */
#angemont-tunnel .ui-datepicker td a.ui-state-active,
#angemont-tunnel .ui-datepicker td span.ui-state-active {
  position: relative;
}

#angemont-tunnel .ui-datepicker td a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td span.ui-state-active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 3px solid var(--calendar-gold);
  border-radius: 10px;
  z-index: 2;
  pointer-events: none;
}

/* Bordure jaune spécifique pour les dates complètes sélectionnées */
#angemont-tunnel .ui-datepicker td.slot-full-both a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-full-lunch a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-full-dinner a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-lunch.slot-full-dinner a.ui-state-active::after,
#angemont-tunnel .ui-datepicker td.slot-dinner.slot-full-lunch a.ui-state-active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 3px solid var(--calendar-gold);
  border-radius: 10px;
  z-index: 2;
  pointer-events: none;
}

/* Bordure jaune pour les dates à thème sélectionnées */
#angemont-tunnel .ui-datepicker td.slot-theme a.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-theme span.ui-state-active {
  box-shadow: inset 0 0 0 3px var(--calendar-gold) !important;
  z-index: 3;
  position: relative;
}

/* Bordure jaune pour les dates mixtes à thème sélectionnées (remplace la bordure verte) */
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch.slot-theme a.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner.slot-theme a.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-lunch.slot-theme span.ui-state-active,
#angemont-tunnel .ui-datepicker td.slot-both.slot-full-dinner.slot-theme span.ui-state-active {
  box-shadow: inset 0 0 0 3px var(--calendar-gold) !important;
  z-index: 3;
  position: relative;
}

/* ===== HOVER STATES ===== */

/* Effet hover pour toutes les dates cliquables */
#angemont-tunnel .ui-datepicker td a:hover,
#angemont-tunnel .ui-datepicker td a:focus {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Hover pour les dates à thème */
#angemont-tunnel .ui-datepicker td.slot-theme a:hover,
#angemont-tunnel .ui-datepicker td a.slot-theme:hover {
  box-shadow: inset 0 0 0 4px var(--calendar-green) !important;
}