/* 🔹 Ensure calendar container is centered */
#calendar {
  margin: auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* 🔹 Style calendar header */
.fc-toolbar {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
}

/* 🔹 Style the navigation buttons */
.fc-button {
  background: #007bff !important;
  color: white !important;
  border-radius: 5px !important;
  border: none !important;
  padding: 5px 10px !important;
}

/* 🔹 Calendar grid & cell styling */
.fc-daygrid-day {
  border: 1px solid #ddd !important;
}

.fc-daygrid-day-number {
  text-decoration: none !important;
  color: #333 !important;
  font-weight: 600 !important;
  font-size: 14px;
}

/* 🔹 Make weekend days visually different */
.fc-day-sat,
.fc-day-sun {
  background: #f4f4f4 !important;
}

/* 🔹 Highlight the current day */
.fc-day-today {
  background: rgba(255, 193, 7, 0.2) !important;
  border: 3px solid #ff0707 !important;
}

.fc .fc-list-event-dot {
  border: calc(var(--fc-list-event-dot-width) / 2) solid #fff !important;
}
/* 🔹 Improve event visibility */
.fc-daygrid-event {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  font-size: 14px !important;
  font-weight: bold;
  text-align: center;
  padding: 8px !important;
  border-radius: 5px !important;
  color: white !important;
  border: none !important;
}

/* Regular Event */
.special-event {
  background: linear-gradient(
    135deg,
    #007bff,
    #0056b3
  ) !important; /* Blue theme */
  color: white !important;
}

.special-event:hover {
  background: linear-gradient(135deg, #0056b3, #003580) !important;
  transition: 0.3s ease-in-out;
}

/* Special Event */
.regular-event {
  background: linear-gradient(
    135deg,
    #f4c711,
    #e8a82f
  ) !important; /* Yellow-Orange theme */
  color: black !important;
}

.regular-event:hover {
  background: linear-gradient(135deg, #ff9900, #cc7700) !important;
  transition: 0.3s ease-in-out;
}

.holiday-event {
  background: linear-gradient(
    135deg,
    #ff4d4d,
    #cc0000
  ) !important; /* Red theme */
  color: white !important;
}

.holiday-event:hover {
  background: linear-gradient(135deg, #cc0000, #990000) !important;
  transition: 0.3s ease-in-out;
}

/* 🔹 Improve hover effect on events */

.fc-daygrid-event.holiday-event {
  background: linear-gradient(135deg, #ff4d4d, #cc0000) !important;
  color: white !important;
  font-weight: bold !important;
}

.fc-daygrid-event.holiday-event:hover {
  background: linear-gradient(135deg, #cc0000, #990000) !important;
  transition: 0.3s ease-in-out;
}

.fc-daygrid-dot-event.holiday-event {
  background-color: #cc0000 !important;
  color: white !important;
}
/* 🔹 Tooltip styling */
.tooltip-custom {
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1000;
  display: none;
  pointer-events: none;
}

/* 🔹 Header Styling */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 🔹 Logo Styling */
.logo {
  height: 60px;
  width: auto;
}

/* 🔹 Title Styling */
.title {
  font-size: 26px;
  font-weight: bold;
  text-align: right;
  flex-grow: 1;
  color: #333;
}

/* 📱 Mobile Responsive */
@media (max-width: 767px) {
  .fc-header-toolbar {
    flex-direction: column;
  }

  .fc-toolbar-title {
    font-size: 16px !important;
    text-align: center;
  }

  /* 🔥 Change font size and padding for events */
  .fc-daygrid-event {
    font-size: 12px !important;
    padding: 5px !important;
  }

  /* 🔥 Adjust button size */
  .fc-button {
    font-size: 12px !important;
    padding: 3px 5px !important;
  }

  /* 🔹 List View: Improve spacing */
  .fc-listMonth-view {
    font-size: 14px !important;
  }

  .header {
    flex-direction: column;
    text-align: center;
  }

  .title {
    text-align: center;
    margin-top: 10px;
  }

  /* Adjust event size on mobile */
  .fc-daygrid-event {
    font-size: 12px !important;
    padding: 5px !important;
  }

  .event-legend {
    text-align: center;
    font-size: 14px;
  }

  .regular-event .fc-list-event-title a {
    color: rgb(54, 92, 204) !important;
  }
}

.fc-list-day-cushion a {
  text-decoration: none !important; /* Removes underline */
  color: inherit !important; /* Inherits the color from the parent */
}

/* 🔥 Legend Styling */
.event-legend {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
}

.legend-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 5px;
}

.special-box {
  background: linear-gradient(135deg, #007bff, #0056b3); /* Blue */
}

.holiday-box {
  background: linear-gradient(135deg, #ff4d4d, #cc0000); /* Red */
}

.regular-box {
  background: linear-gradient(
    135deg,
    #f4c711,
    #e8a82f
  ) !important; /* Yellow-Orange */
}

/* 🔹 Hide Other Month Dates */
.hide-other-month {
  opacity: 0; /* Hide other month dates */
  pointer-events: none; /* Prevent clicks */
  visibility: hidden;
}

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