:root {
    --fc-event-text-color: black;
    --fc-border-color: #D9D9D9;
    --text-muted: #727272;
    --fc-today-bg-color: #F2F2F2;
    --dot-color: #D9D9D9;
    --fc-event-hover-bg: rgba(234, 234, 234, 0.8); /* Light grey with transparency for dots */
}

#calendar { font-family: inherit; }

/* 1. Grid & Table */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th,
#calendar .fc-theme-standard .fc-scrollgrid { border: 1px solid var(--fc-border-color); }
#calendar .fc-scrollgrid { border-radius: 0; }

/* 2. Header */
#calendar .fc-col-header-cell { height: 48px; background: white; vertical-align: middle; }
#calendar .fc-col-header-cell-cushion { 
    font-size: 14px; 
    color: var(--text-muted); 
    text-transform: lowercase; 
    font-weight: 400; 
}

/* 3. Day Cells */
@media screen and (min-width:768px) {
    #calendar .fc-daygrid-day-frame { min-height: 124px; height: auto; display: block; position: relative; }
}

#calendar .fc-day-today { background-color: var(--fc-today-bg-color) !important; }

/* 4. Date Numbers */
#calendar .fc-daygrid-day-top { position: absolute; top: 8px; right: 8px; }
#calendar .fc-daygrid-day-number { font-size: 12px; color: black; text-decoration: none; }
#calendar .fc-day-other .fc-daygrid-day-number { color: var(--text-muted); }

/* 5. Event Spacing */
#calendar .fc-daygrid-day-events { margin-top: 40px; padding: 0 8px 8px 8px; }
#calendar .fc-daygrid-event-harness { padding-top: 5px; }

/* 6. Event Pills & Continuity Logic */
#calendar .fc-event {
    background-color: white;
    border: 1px solid black;
    padding: 7px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    border-radius: 0; /* Base state: square for continuity */
}

/* Rounded only on actual start/end dates */
#calendar .fc-event-start { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
#calendar .fc-event-end { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }

#calendar .fc-event-title { font-size: 12px; line-height: 1.2; color: black; overflow: hidden; text-overflow: ellipsis; }

/* 7. Hover State (Maintains dots) */
#calendar .fc-event:hover,
#calendar .fc-event.is-hovered {
    background-color: var(--fc-event-hover-bg) !important;
}

/* 8. Multi-day Dotted Pattern */
#calendar .event-is-dotted:not(.event-is-past) {
    background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
    background-size: 4px 4px;
}

/* 9. Past Event Styling */
#calendar .fc-event.event-is-past {
    background-image: none !important;
    background-color: #eee !important;
    border: 2px solid white !important;
    opacity: 0.7;
}

/* 10. Cleanup */
#calendar .fc-daygrid-event-dot,
#calendar .fc-event-time { display: none !important; }
#calendar a { text-decoration: none; }

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 0;
}

.fc-button-group .fc-button-primary {
    background: var(--grey-100);
    border: 1px solid white;
    color: black;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fc-button-group .fc-button-primary:hover {
    background: var(--grey-200);
    border-color: black;
    color: black;
}

.fc-button-group .fc-prev-button {border-radius: 90px 0 0 90px;}
.fc-button-group .fc-next-button {
    border-radius: 0 90px 90px 0;
    margin-left: 0;
}

.fc .fc-button-primary:focus, .fc .fc-button-primary:active {
    box-shadow: none;
}

.fc .fc-button-primary:disabled {
    pointer-events: none;
    background: var(--grey-100);
    color: rgba(0, 0, 0, 0.605);
    border-color: transparent;
}

#calendar .fc-toolbar-title {
    text-transform: capitalize;
}

.fc-today-button {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.02em;
}