/* ============================================= */
/* Custom FullCalendar Styles (calendar-styles.css) */
/* Load AFTER FullCalendar's main.css         */
/* ============================================= */

/* Optional: Basic container styling */
#calendar-view-wrapper { /* Assuming this is the outer container */
  /* Add any specific wrapper styles */
}
#calendar-header { /* Assuming this holds Prev/Next/Title */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
body.dark-mode #calendar-header {
  border-color: #374151; /* gray-700 */ /* Adjusted dark border */
}
#calendar-grid { /* The element FullCalendar attaches to */
  /* Adjust height as needed */
  min-height: 650px;
}

/* --- Day Cell Styling --- */
.fc .fc-daygrid-day { /* Target day cells */
  min-height: 100px; /* Ensure enough space for dots + date */
  position: relative; /* Needed for event container positioning */
  padding: 2px; /* Small padding around cell content */
}

/* Date number styling */
.fc .fc-daygrid-day-top {
  display: flex; /* Use flex for layout */
  justify-content: center; /* Center date number */
  margin-bottom: 4px; /* Space between date and dots */
}
.fc .fc-daygrid-day-number {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151; /* gray-700 */
  padding: 2px 4px; /* Padding around the number */
  line-height: 1.2;
  border-radius: 50%; /* Make highlight round */
  width: 1.75em; /* Fixed width for circle */
  height: 1.75em; /* Fixed height for circle */
  text-align: center; /* Ensure number centered in circle */
  box-sizing: border-box;
  display: flex; /* center number inside */
  align-items: center;
  justify-content: center;
}
body.dark-mode .fc .fc-daygrid-day-number {
  color: #9ca3af; /* gray-400 */ /* Adjusted dark text */
}

/* Today's date number highlight */
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background-color: #bfdbfe; /* blue-200 */
  color: #1e3a8a; /* blue-800 */
  font-weight: bold;
}
body.dark-mode .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background-color: #1e40af; /* blue-800 */
  color: #eff6ff; /* blue-50 */
}

/* --- Event Dot Styling --- */

/* Container within the day cell that holds events */
.fc .fc-daygrid-day-events {
  min-height: 20px; /* Minimum space for dots */
  display: flex;
  flex-wrap: wrap; /* Allow dots to wrap to next line */
  align-content: flex-start; /* Start dots at the top */
  gap: 3px; /* Increased space between dots slightly */
  padding: 2px 0 0 2px; /* Padding above and left */
  overflow: visible; /* Ensure container doesn't hide dots */
  position: relative; /* Or static */
}

/* Hide the default "+n more" link if dayMaxEvents is NOT false */
.fc .fc-daygrid-more-link {
  /* display: none !important; */ /* Uncomment if using dayMaxEvents: true and want to hide */
}

/* Style the custom container from eventContent (if only showing dots) */
.event-content-wrapper {
  display: inline-block; /* Dots sit side-by-side */
  padding: 0;
  margin: 0;
  line-height: 1; /* Prevent extra line height */
}

/* The colored dot itself (created in eventContent JS) */
.event-dot {
  display: block; /* Takes up its own space */
  width: 7px;  /* Size of your colored dot */
  height: 7px;
  border-radius: 50%;
  /* background-color is set inline via eventContent */
}

/* --- HIDE FULLCALENDAR DEFAULT INNER DOT (AGGRESSIVE TEST) --- */
/* Force hide ALL pseudo-elements within the event dot structure */
.fc-daygrid-dot-event .fc-daygrid-event-dot *::before,
.fc-daygrid-dot-event .fc-daygrid-event-dot *::after {
    display: none !important;
    background: none !important;
    border: none !important; /* Also try removing border */
    content: none !important; /* Remove content */
}
/* Also ensure the direct span is hidden/transparent just in case */
.fc-daygrid-dot-event .fc-daygrid-event-dot span.fc-list-event-dot {
     background-color: transparent !important;
     display: none !important; /* Try display none too */
}
/* ---------------------------------------------------------- */


/* Hide the title/description spans if they were generated by eventContent */
/* (May not be needed if eventContent only returns the dot span) */
.event-title-text,
.event-desc-text {
  display: none;
}

/* Style completed event dots */
.event-completed .event-dot { /* If event-completed class added in JS */
  opacity: 0.5; /* Dim completed dots */
}


/* --- Dark Mode Cell Backgrounds (Optional) --- */
body.dark-mode .fc .fc-daygrid-day {
  background-color: #1f2937; /* gray-800 */ /* Adjusted dark background */
  /* border-color: #374151; */ /* gray-700 - Adjust if borders needed */
}
body.dark-mode .fc { /* General text color */
  color: #d1d5db; /* gray-300 */
}
body.dark-mode .fc .fc-col-header-cell-cushion { /* Day names (Mon, Tue...) */
  color: #e5e7eb; /* gray-200 */
}

/* --- CALENDAR EVENT TOOLTIP STYLING (VISIBILITY TEST) --- */
#calendar-tooltip {
  position: fixed;   /* TEST: Use fixed to ignore scroll */
  top: 50px;         /* TEST: Fixed position */
  left: 50px;        /* TEST: Fixed position */
  z-index: 1000;     /* TEST: Ensure high z-index */
  display: none;     /* Hidden by default (JS should set to 'block') */
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #ffffff;
  background-color: #1f2937; /* bg-gray-800 */
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  white-space: nowrap;
  pointer-events: none;
  border: 3px solid red !important; /* TEST: Make it obvious */
}

/* Dark mode tooltip variant */
body.dark-mode #calendar-tooltip {
  background-color: #111827; /* bg-gray-900 */
  color: #d1d5db; /* Example: gray-300 */
}
/* --- END TOOLTIP STYLING (VISIBILITY TEST) --- */