/**
 * Planning shortcode [cmci_planning] styles (FullCalendar availability calendar).
 *
 * Class-scoped; the user-configured availability colours are passed as CSS
 * custom properties (set via an inline style attribute on .cmv2-planning).
 *
 * @package ChaletMontagne
 * @since   1.0.62
 */

/* Planning component styles - scoped to this instance */
.cmv2-planning {
    margin: 1.5rem 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.cmv2-planning .cmv2-planning__header {
    padding: 1rem 1.5rem;
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.cmv2-planning .cmv2-planning__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.cmv2-planning .cmv2-planning__legend {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.cmv2-planning .cmv2-planning__legend-item {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.cmv2-planning .cmv2-planning__calendar {
    padding: 1rem 1.5rem;
    min-height: 400px;
}

.cmv2-planning .cmv2-planning__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: #666;
}

.cmv2-planning .cmv2-loading__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #eee;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: cmv2-spin 0.8s linear infinite;
}

@keyframes cmv2-spin {
    to { transform: rotate(360deg); }
}

.cmv2-planning .cmv2-planning__footer {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    text-align: center;
}

.cmv2-planning .cmv2-planning__contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    background-color: #007bff;
    color: #ffffff;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cmv2-planning .cmv2-planning__contact-btn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    text-decoration: none;
}

.cmv2-planning .cmv2-planning__contact-icon {
    display: flex;
    align-items: center;
}

/* FullCalendar custom styles */
.cmv2-planning__calendar .fc {
    font-family: inherit;
}

/* Hide event titles for background events - only colors should show */
.cmv2-planning__calendar .fc-bg-event .fc-event-title,
.cmv2-planning__calendar .fc-bg-event .fc-event-time,
.cmv2-planning__calendar .fc-event-title-container {
    display: none !important;
}

/* Disable pointer cursor on calendar days and events */
.cmv2-planning__calendar .fc-bg-event,
.cmv2-planning__calendar .fc-day,
.cmv2-planning__calendar .fc-daygrid-day {
    cursor: default !important;
}

.cmv2-planning__calendar .fc-multimonth {
    border: none;
}

.cmv2-planning__calendar .fc-multimonth-month {
    padding: 0.5rem;
}

.cmv2-planning__calendar .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    /* Use default theme color */
}

.cmv2-planning__calendar .fc-button-primary {
    background-color: var(--cmv2-dispo-bg) !important;
    border-color: var(--cmv2-dispo-bg) !important;
    color: var(--cmv2-dispo-text) !important;
}

.cmv2-planning__calendar .fc-button-primary:hover,
.cmv2-planning__calendar .fc-button-primary:focus,
.cmv2-planning__calendar .fc-button-primary:active,
.cmv2-planning__calendar .fc-button-primary:not(:disabled):active,
.cmv2-planning__calendar .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--cmv2-dispo-bg) !important;
    border-color: var(--cmv2-dispo-bg) !important;
    color: var(--cmv2-dispo-text) !important;
    filter: brightness(0.85);
    box-shadow: none !important;
    outline: none !important;
}

.cmv2-planning__calendar .fc-button-primary:disabled {
    opacity: 0.5;
    box-shadow: none !important;
}

/* Default: all day cells are indispo (red) */
.cmv2-planning__calendar .fc-daygrid-day {
    background-color: var(--cmv2-indispo-bg) !important;
}

/* Default text color for all day numbers: indispo */
.cmv2-planning__calendar .fc-daygrid-day .fc-daygrid-day-number,
.cmv2-planning__calendar .fc-daygrid-day .fc-daygrid-day-top,
.cmv2-planning__calendar .fc-daygrid-day a {
    color: var(--cmv2-indispo-text) !important;
    font-weight: 600;
    text-decoration: none;
}

/* Hide days outside current month */
.cmv2-planning__calendar .fc-day-other {
    visibility: hidden;
}

/* Today highlight on top of indispo */
.cmv2-planning__calendar .fc-day-today {
    background-color: var(--cmv2-indispo-bg) !important;
    box-shadow: inset 0 0 0 2px rgba(52, 152, 219, 0.6);
}

/* Available day cells: replace red background with solid green */
.cmv2-planning__calendar .fc-day.cmv2-event--available.fc-daygrid-day {
    background-color: var(--cmv2-dispo-bg) !important;
}

/* Available periods: override indispo text color */
.cmv2-planning__calendar .fc-day.cmv2-event--available .fc-daygrid-day-number,
.cmv2-planning__calendar .fc-day.cmv2-event--available .fc-daygrid-day-top,
.cmv2-planning__calendar .fc-day.cmv2-event--available a {
    color: var(--cmv2-dispo-text) !important;
    font-weight: 700;
    text-decoration: none;
}

.cmv2-planning__calendar .cmv2-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cmv2-planning .cmv2-planning__header,
    .cmv2-planning .cmv2-planning__legend,
    .cmv2-planning .cmv2-planning__calendar,
    .cmv2-planning .cmv2-planning__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cmv2-planning .cmv2-planning__title {
        font-size: 1.1rem;
    }

    .cmv2-planning .cmv2-planning__legend {
        justify-content: center;
    }
}

/* Phones: stack the calendar header so the prev/today/next buttons sit on the
   first line and the period title on the second, instead of overlapping on a
   single cramped line. */
@media (max-width: 600px) {
    .cmv2-planning__calendar .fc-header-toolbar.fc-toolbar {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
    }

    .cmv2-planning__calendar .fc-toolbar-title {
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.2;
    }
}