/* Stili per il componente calendario a semaforo */

.calendar-container {
    background-color: var(--color-bg, #ffffff);
    padding: var(--space-md, 16px);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
}

.calendar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md, 16px);
}

.calendar-header span {
    font-weight: 700;
}

.calendar-header button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-bg-alt, #f5f5f5);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.calendar-header button:hover {
    background-color: var(--color-border, #e0e0e0);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-weekday {
    font-size: 0.7rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text-light, #757575);
    padding-bottom: 8px;
}

.calendar-day {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Verde: Disponibile */
.calendar-day--available {
    background-color: #E8F5E9;
    color: #2E7D32;
    animation: pulse-semaphore 3s infinite alternate;
}
.calendar-day--available:hover {
    background-color: #C8E6C9;
}

/* Giallo: Pochi posti */
.calendar-day--few-spots {
    background-color: #FFF3E0;
    color: #E65100;
    animation: pulse-semaphore 3s infinite alternate;
}
.calendar-day--few-spots:hover {
    background-color: #FFE0B2;
}

/* Rosso: Esaurito */
.calendar-day--booked {
    background-color: #FFEBEE;
    color: #C62828;
    cursor: not-allowed;
    opacity: 0.7;
    position: relative;
}

/* Giorno selezionato */
.calendar-day--selected {
    border: 2px solid var(--color-primary, #ff6b00);
    background-color: var(--color-primary-light, #fff0e6);
    font-weight: bold;
    color: var(--color-primary, #ff6b00);
}

/* Oggi */
.calendar-day--today {
    outline: 2px solid var(--color-border, #e0e0e0);
    outline-offset: -2px;
}

/* Cella vuota */
.calendar-day--empty {
    background: transparent;
    cursor: default;
}

/* Legenda sotto il calendario */
.calendar-legend {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-top: var(--space-md, 16px);
    font-size: 0.8rem;
    color: var(--color-text-light, #757575);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-legend-dot--available { background-color: #4CAF50; }
.calendar-legend-dot--few-spots { background-color: #FF9800; }
.calendar-legend-dot--booked { background-color: #F44336; }

/* Animazione semaforo */
@keyframes pulse-semaphore {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

/* Transizioni Swipe */
.calendar-month-enter {
    transform: translateX(100%);
    opacity: 0;
}
.calendar-month-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s ease-out;
}
.calendar-month-exit {
    transform: translateX(0);
    opacity: 1;
}
.calendar-month-exit-active {
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.3s ease-in;
}