/* --- Styles Personnalisés pour le Calendrier --- */
#calendar-wrapper {
 font-family: 'Inter', sans-serif;
 width: 100%;
 position: relative;
}

#custom-calendar-header-container {
 background-color: white;
 border: none;
 margin-bottom: 20px;
 padding: 20px !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
      border-radius: 15px;
}

#custom-calendar-body-container {
 position: relative;
 padding: 20px !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
      border-radius: 15px;
}

/* En-tête : Flèches, Titre du Mois, et Bouton */
.calendar-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #2c3e50;
}

.header-nav {
 display: flex;
 align-items: center;
 gap: 15px;
}

.calendar-header h2 {
    color: rgba(16, 57, 111, 1);
 margin: 0;
 font-size: 22px;
 font-weight: 700;
 min-width: 180px;
 text-align: center;
}

.nav-arrow {
 background-color: rgba(255, 190, 2, 1);
 border: none;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 cursor: pointer;
 transition: background-color 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 40%;
}

.nav-arrow:hover {
 background-color: rgba(255, 190, 2, 1);
}

.nav-arrow.nav-arrow-prev {
 background-image: url('../icons/arrow-left.png');
 transform: scaleX(-1); /* Flips the right arrow icon */
}

.nav-arrow.nav-arrow-next {
 background-image: url('../icons/arrow-left.png');
}

/* --- Menu Déroulant --- */
.month-dropdown-container {
 position: relative;
 display: inline-block;
}

.month-dropdown {
 background-color: #2c5282;
 color: white;
 border: none;
 border-radius: 20px;
 padding: 8px 16px;
 font-weight: 500;
 cursor: pointer;
 transition: background-color 0.2s;
}

.month-dropdown:hover {
 background-color: #1a365d;
}

.dropdown-arrow {
 margin-left: 8px;
 font-size: 12px;
}

.dropdown-content {
 display: none;
 position: absolute;
 right: 0;
 background-color: #ffffff;
 min-width: 150px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
 z-index: 10;
 border-radius: 8px;
 padding: 5px 0;
 margin-top: 5px;
}

.dropdown-content a {
 color: #333;
 padding: 10px 15px;
 text-decoration: none;
 display: block;
 font-size: 14px;
}

.dropdown-content a:hover {
 background-color: #f1f1f1;
}

.show {
 display: block;
}

/* En-tête des jours de la semaine */
.calendar-week-header {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 background-color: #e3e8f7;
 border-radius: 10px 10px 0 0 ;
 padding: 12px 0;
 /* margin-bottom: 5px; */
 text-align: center;
 font-weight: 600;
 font-size: 14px;
 color: #334155;
}

/* Grille principale du calendrier */
.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 border: 1px solid #e2e8f0;
 border-radius: 0px 0px 10px 10px;
 overflow: hidden; 
}

.calendar-day {
 background-color: #ffffff;
 min-height: 140px;
 padding: 8px;
 font-size: 14px;
 color: #334155;
 position: relative;
 border-right: 1px solid #e2e8f0;
 border-bottom: 1px solid #e2e8f0;
}

/* Remove borders from the edges of the grid */
.calendar-day:nth-child(7n) {
 border-right: none;
}
.calendar-day:nth-last-child(-n+7) {
 border-bottom: none;
}

.day-number {
 font-weight: 600;
 display: inline-block;
 margin-bottom: 5px;
 font-size: 13px;
}

.calendar-day.dimmed .day-number {
 color: #94a3b8;
 font-weight: 500;
}

.day-number.today {
 background-color: #2c5282;
 color: #ffffff;
 border-radius: 50%;
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* --- Style des événements --- */
#calendar-events-container {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none; 
}

.calendar-event {
 padding:5px  10px;
 border-radius: 6px;
 font-size: 13px;
 font-weight: 500;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 border-left: 4px solid;
 z-index: 5;
 pointer-events: all;
 box-sizing: border-box; 
 height: 26px;
 line-height: 18px; /* Vertically center text */
 transition: all 0.2s ease-in-out;
 position: relative; /* --- ADD: Required for tooltip positioning --- */
}

/* --- EDIT: Refined hover effect for events --- */
.calendar-event:hover,
.calendar-event:focus {
 z-index: 10;
 transform: scale(1.05);
 outline: none; /* --- ADD: Remove default browser outline --- */
}

/* --- ADD: Custom tooltip style --- */
.calendar-event::after {
 content: attr(title);
 position: absolute;
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%) scale(0.8);
 background-color: #334155;
 color: #ffffff;
 padding: 6px 12px;
 border-radius: 6px;
 font-size: 12px;
 white-space: nowrap;
 z-index: 20;
 opacity: 0;
 visibility: hidden;
 transition: all 0.2s ease-in-out;
 pointer-events: none;
}

/* --- ADD: Custom tooltip arrow --- */
.calendar-event::before {
 content: '';
 position: absolute;
 bottom: calc(125% - 5px);
 left: 50%;
 transform: translateX(-50%) scale(0.8);
 border: 6px solid transparent;
 border-top-color: #334155;
 opacity: 0;
 visibility: hidden;
 transition: all 0.2s ease-in-out;
 pointer-events: none;
 z-index: 21;
}

/* --- ADD: Show tooltip on hover --- */
.calendar-event:hover::after,
.calendar-event:hover::before {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) scale(1);
}

.event-blue {
 background-color: #e0f5ff;
 color: #0c5464;
 border-color: #4da9c3;
  /* height: 40px; */
}

/* --- ADD: Custom outline/glow for each color --- */
.event-blue:hover,
.event-blue:focus {
 box-shadow: 0 0 0 2px #4da9c3, 0 4px 12px rgba(0,0,0,0.15);
}

.event-yellow {
 background-color: #fff9e6;
 color: #664d03;
 border-color: #f7c95c;
  /* height: 40px; */
}

.event-yellow:hover,
.event-yellow:focus {
 box-shadow: 0 0 0 2px #f7c95c, 0 4px 12px rgba(0,0,0,0.15);
}

.event-red {
 background-color: #fde8e8;
 color: #721c24;
 border-color: #f5c6cb;
 /* height: 40px; */
}

.event-red:hover,
.event-red:focus {
 box-shadow: 0 0 0 2px #f5c6cb, 0 4px 12px rgba(0,0,0,0.15);
}

.event-green {
 background-color: #d4edda;
 color: #155724;
 border-color: #c3e6cb;
  /* height: 40px; */
}

.event-green:hover,
.event-green:focus {
 box-shadow: 0 0 0 2px #c3e6cb, 0 4px 12px rgba(0,0,0,0.15);
}