/* Styles pour le calendrier */
.calendar {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    max-width: 500px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.calendar-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0;
}

.calendar-nav {
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calendar-nav:hover {
    background: var(--color-gray-200);
    transform: scale(1.1);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.calendar-weekday {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    padding: var(--spacing-sm);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--color-gray-50);
    color: var(--color-gray-800);
}

.calendar-day:not(.empty):not(.blocked):not(.past):hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: scale(1.1);
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.calendar-day.past {
    color: var(--color-gray-400);
    cursor: not-allowed;
}

.calendar-day.blocked {
    background: #fee2e2;
    color: #ef4444;
    text-decoration: line-through;
    cursor: pointer;
    /* Change to pointer to show it's clickable for the popup */
}

.calendar-day.selected {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.calendar-day.in-range {
    background: var(--color-primary-light);
    color: var(--color-white);
}

/* Légende */
.calendar-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calendar-legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
}

.calendar-legend-color.available {
    background: var(--color-gray-50);
}

.calendar-legend-color.selected {
    background: var(--color-primary);
}

.calendar-legend-color.blocked {
    background: var(--color-gray-200);
}