/* Default style for LONG events (text centered in the middle of the week) */
.fc-daygrid-event-harness {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: auto !important;
}

/* Override for SHORT events to fit text inside the box */
.fc-daygrid-event-harness.short-event {
    position: relative !important; /* Resets the positioning */
    top: auto !important;
    transform: none !important;
    margin-top: 5px !important;
    height: 35px !important; /* Give short events a fixed height */
}

/* Make the event's own container transparent so the cell background shows */
.fc-daygrid-event {
    background-color: transparent !important;
    border: none !important;
    height: 100%; /* Fill the harness */
}

/* Custom container for the title text */
.event-title-container {
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style the day number to be visible on colored days */
.fc-daygrid-day[style*="background-color"] .fc-daygrid-day-number {
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Make ONLY colored day cells appear clickable */
.fc-daygrid-day[style*="background-color"] {
    cursor: pointer;
}