/* Calendar Styles */
.fc {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--color-background);
}

    .fc .fc-toolbar {
        padding: 10px;
        padding-bottom: 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-navy);
    }

    .fc .fc-button {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border-radius: 0.375rem;
        border: none;
        background: var(--color-light-gray);
        color: var(--color-navy);
        transition: var(--transition-default);
    }

        .fc .fc-button:hover {
            background: var(--color-navy-light);
            color: var(--color-white);
        }

    .fc .fc-button-primary {
        background: var(--color-navy);
        color: var(--color-white);
    }

        .fc .fc-button-primary:hover {
            background: var(--color-navy-light);
        }

    /* Highlight today's cell with an elegant border and rounded corners */
    .fc .fc-day-today {
        background: var(--color-light-gray) !important;
        border: 2px solid var(--color-navy);
        border-radius: 8px;
    }

    .fc .fc-event {
        cursor: pointer;
        border-radius: 4px;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s;
        width: 100%;
    }

        .fc .fc-event:hover {
            transform: translateY(-1px);
        }

    /* Past dates styling */
    .fc .fc-day-past {
        opacity: 0.75;
        background-color: #f8f0f0 !important; /* Light reddish background */
        position: relative;
    }

        /* Adding a subtle red shadow/border to past dates */
        .fc .fc-day-past:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3); /* EF4444 with opacity */
            pointer-events: none; /* Ensures the overlay doesn't interfere with events */
            border-radius: 4px;
            z-index: 1;
        }

        /* Past date events styling */
        .fc .fc-day-past .fc-event {
            cursor: not-allowed;
            opacity: 0.7;
            filter: grayscale(30%);
        }

            /* Override the hover effect for past events */
            .fc .fc-day-past .fc-event:hover {
                transform: none;
                box-shadow: none;
            }

        /* Apply diagonal strikethrough pattern for past dates (optional) */
        .fc .fc-day-past .fc-daygrid-day-frame {
            background-image: repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(239, 68, 68, 0.05) 5px, rgba(239, 68, 68, 0.05) 10px );
        }

        /* Ensure past date numbers are visible but subdued */
        .fc .fc-day-past .fc-daygrid-day-number {
            color: #777;
        }

/* Fix for event cursor on past dates */
.fc-event-draggable,
.fc-event-resizable {
    cursor: pointer;
}

.fc-day-past .fc-event-draggable,
.fc-day-past .fc-event-resizable {
    cursor: not-allowed !important;
}

.event-modal-content {
    padding: 1rem;
    background: var(--color-white);
    color: var(--color-navy);
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: var(--color-white);
    font-weight: 500;
    margin-bottom: 1rem;
}

.event-details {
    margin-bottom: 1.5rem;
}

.event-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

    .event-actions .btn {
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        text-decoration: none;
    }

/* Improved responsive adjustments */
@media (max-width: 600px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.2rem;
        text-align: center;
    }

    .fc .fc-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
        flex: 1;
        min-width: auto;
        white-space: nowrap;
    }

    .event-modal-content {
        padding: 0.75rem;
    }

    .event-actions {
        flex-direction: column;
    }

        .event-actions .btn {
            width: 100%;
            text-align: center;
        }
}