/* Calendário */
.calendar {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colunas para segunda a sábado */
    gap: 5px; /* Espaço entre os dias */
    width: 100% !important; /* Ajustar à largura do container pai */
    max-width: 100%; /* Limitar a largura máxima */
    margin: 0 auto !important; /* Centralizar */
    padding: 10px !important; /* Adicionar padding interno */
    box-sizing: border-box;
    background: linear-gradient(135deg,  #a8a49d 0%, #e0ddd2);
     border-radius: 10px !important; /* Cantos arredondados */
}

.day {
    border: 1px solid #ccc; /* Borda mais suave */
    padding: 10px;
    min-height: 80px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    min-width: 0 !important; /* Evitar que as células forcem largura mínima */
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Permitir que o texto quebre em várias linhas */
    border-radius: 10px !important; /* Cantos arredondados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidade */
    transition: transform 0.2s, box-shadow 0.2s; /* Animação suave */
}

.day:hover {
    transform: scale(1.02); /* Efeito de hover leve */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

.day p {
    margin: 0;
    font-size: 0.85rem; /* Reduzir o tamanho do texto para evitar overflow */
    line-height: 1.2; /* Ajustar o espaçamento entre linhas */
}

.day-header {

    
    font-weight: bold;
    background: #2c3e50;
    color: white;
    text-align: center;
    min-height: 40px;
    padding: 5px;
    min-width: 0 !important; /* Evitar largura mínima */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Ajustes para mobile no calendário */
@media (max-width: 576px) {
    .calendar {
        gap: 2px; /* Reduzir o espaço entre os dias */
    }
    .day {
        padding: 5px; /* Reduzir padding */
        min-height: 60px; /* Reduzir altura mínima */
        font-size: 0.8rem; /* Reduzir tamanho da fonte */
        border-radius: 6px; /* Cantos ligeiramente menores em mobile */
    }
    .day p {
        font-size: 0.7rem; /* Reduzir ainda mais o texto no mobile */
    }
    .day-header {
        padding: 3px;
        font-size: 0.9rem;
        border-radius: 6px; /* Cantos menores em mobile */
    }
}

/* Cores para status (admin e PT) */
.calendar .day.disponivel { background-color: #e6ffe6 !important; }
.calendar .day.ferias { background-color: #fff3e6 !important; }
.calendar .day.ausencia { background-color: #ffe6e6 !important; }
.calendar .day.indisponivel { background-color: #ebd7e1 !important; }
.calendar .day.empty { background-color: #e9e8e3 !important; cursor: default; border: none; }

/* Cor para disponível em book.php (cliente) */
.calendar .day.available-day { background-color: #e6ffe6 !important; }

/* Cores para a legenda */
.legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #000;
    border-radius: 4px; /* Arredondar a legenda para consistência */
}
.legend-color.disponivel { background-color: #e6ffe6; }
.legend-color.ferias { background-color: #fff3e6; }
.legend-color.ausencia { background-color: #ffe6e6; }
.legend-color.indisponivel { background-color: #ebd7e1; }
.legend-color.nao-aplicavel { background-color: #e9e8e3; }