/* FullCalendar aligned with the DataInput brand tokens. */
:root {
    --fc-button-bg-color: var(--di-brand);
    --fc-button-border-color: var(--di-brand);
    --fc-button-hover-bg-color: var(--di-brand-deep);
    --fc-button-hover-border-color: var(--di-brand-deep);
    --fc-button-active-bg-color: var(--di-brand-deep);
    --fc-button-active-border-color: var(--di-brand-deep);
    --fc-border-color: var(--di-line);
    /* Teal wash: accent highlights "today" per brand */
    --fc-today-bg-color: rgba(43, 179, 163, 0.1);
}

.fc .fc-button {
    border-radius: 0.5rem;
}

.fc a {
    text-decoration: none;
    color: inherit;
}

/* Booking status colors on the calendar (labels also appear as text). */
.booking-status-awaiting_guest_data {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning);
    color: var(--bs-body-color);
}

.booking-status-complete {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success);
    color: var(--bs-body-color);
}

.booking-status-draft {
    background-color: var(--bs-secondary-bg-subtle);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}

.booking-status-cancelled {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger);
    color: var(--bs-body-color);
    text-decoration: line-through;
}

/* Phone widths: stack the header toolbar so the month title no longer
   overlaps the navigation and view buttons. */
@media (max-width: 575.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

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

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