/* General container */
#calendar {
  max-width: 1200px;
  margin: 2rem auto;
  background: #f3bc47;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  font-size: 1rem; /* affects calendar text size */
}

/* Header (month + buttons) */
.fc .fc-toolbar-title {
  font-size: 1.6rem;
  color: #231430;
}

.fc .fc-button {
  background: #f3bc47;
  border: none;
  color: #231430;
  font-weight: bold;
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fc .fc-button:hover {
  background: #ecbc6e;
}

/* Day headers (Sun, Mon, ...) */
.fc .fc-col-header-cell-cushion {
  color: #231430;
  font-weight: bold;
}

/* Individual day cells */
.fc-daygrid-day {
  background-color: #fcdfa0;
  border: 1px solid #000000;
  border-radius: 6px;
  padding: 4px;
}

/* Events (blocks in cells) */
.fc .fc-event {
  background-color: #f3bc47;
  border: none;
  color: #000 !important; /* Make event text black */
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9rem;
  margin: 2px 0;
}

/* Force event title text to black */
.fc .fc-event-title,
.fc-event-title,
.fc .fc-event-main,
.fc-event-main {
  color: #000 !important;
}

/* Static events: add a class to distinguish them */
.fc-event-static {
  background-color: #7bb7fa !important;
  color: #000 !important; /* Make static event text black */
  border: none !important;
}

.fc .fc-event:hover,
.fc-event-static:hover {
  background-color: #ffea8b;
  cursor: pointer;
}

.fc-event-bubble {
  position: absolute; /* Change from fixed to absolute */
  z-index: 9999;
  background: #7bb7fa;
  color: #231430;
  border: 1.5px solid #336eb2;
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  max-width: 320px;
  min-width: 180px;
  pointer-events: none;
  animation: fadeInBubble 0.15s;
  /* Use left/top for absolute positioning relative to document */
  left: var(--bubble-x, 50vw);
  top: var(--bubble-y, 50vh);
  transform: translate(0, 0);
}

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

/* Grid line color for the standard theme */
.fc-theme-standard td, 
.fc-theme-standard th {
  border-color: #000000 !important; /* Papyrus-like grid line color */
}

/* Add a border around the entire grid including weekdays */
.fc-daygrid {
  border: 3px solid #000000;
  border-radius: 0px;
  overflow: hidden;
  background: none;
}

/* Remove double border between header and body */
.fc-daygrid-header {
  border-bottom: none !important;
}

/* Add a black border above the weekdays row */
.fc .fc-col-header {
  border-top: 2px solid #000 !important;
}

/* Make the border below the weekday headers black */
.fc .fc-col-header-cell {
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
}

/* Remove unwanted top and left borders from FullCalendar grid */
.fc-scrollgrid,
.fc-scrollgrid-sync-table {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* Change background color around the calendar grid (including weekdays bar) */
.fc-scrollgrid {
  background: #f69b82 !important; /* Choose your desired color */
}