body {
    background-color: #ffffff; /* 淡蓝色背景 */
}

.month-control {
    display: flex;
    justify-content: center; /* 水平居中 */
    display: flex;
    justify-content: space-between; /* 确保两侧按钮与中间年月标签有足够间距 */
    align-items: center;
    margin: 20px auto;
    padding: 15px 30px; /* 增加内边距以增加间距 */
    font-size: 20px; /* 增大字体大小 */
    color: #000000; /* 设置文字颜色为白色 */
    background-color: #ffffff; /* 更淡的蓝色背景，根据需要调整颜色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    border-radius: 15px; /* 圆角 */
    width: 80%;
    max-width: 1000px;
}

.room-status {
    font-size: 12px; /* 缩小字体尺寸 */
    color: #008000; /* 设置字体颜色为绿色 */
    margin: 0; /* 移除外边距 */
    padding: 0; /* 移除内边距 */
    display: inline-flex; /* 设置为内联弹性布局 */
    align-items: center; /* 垂直居中 */
}

.month-switch {
    display: inline-block;
    background-color: transparent; /* 保持背景透明 */
    color: #000000; /* 文字颜色设置为白色 */
    padding: 10px 15px; /* 根据符号大小调整内边距 */
    cursor: pointer;
    font-size: 48px; /* 增大字体大小使符号更明显 */
    margin: 0 20px; /* 与月份年份显示的间距 */
    user-select: none; /* 防止文本被选中 */
}
/*
.month-switch:hover {
    color: #cccccc; /* 鼠标悬停时文字颜色变化 *//*
}*/

.month-switch.disabled {
    color: #ccc; /* 浅灰色表示不可用 */
    cursor: not-allowed; /* 鼠标指针变为不允许的图标 */
}
.month-switch.reach-limit {
    animation: shake 0.5s; /* 添加一个简单的抖动动画作为反馈 */
}

@keyframes shake {
    0% { margin-left: 0; }
    25% { margin-left: 5px; }
    75% { margin-left: -5px; }
    100% { margin-left: 0; }
}

.calendar-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    flex-wrap: wrap;
}

.calendar {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
}

.calendar-title {
    display: flex;
    justify-content: center; /* 使内容居中 */
    align-items: center; /* 垂直居中 */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.weekDays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 15px; /* 增加星期标题和日期之间的间隔 */
    font-size: 16px; /* 星期标题的字体大小 */
}

.weekDays span {
    font-weight: bold; /* 星期标题加粗 */
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 10px; /* 日期间的间距 */
}

.day {
    position: relative;
    width: 40px; /* 设置固定宽度 */
    height: 40px; /* 设置固定高度，与宽度相同以形成圆形 */
    padding: 0; /* 可能需要移除或调整内边距以保持内容居中 */
    background-color: #ccffcc; /* 日期的背景色 */
    border-radius: 50%; /* 设置为50%以形成完美圆形 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* 日期的字体大小，根据实际情况调整以适应圆形尺寸 */
    margin: 5px; /* 可能需要添加外边距以避免圆形元素相互紧挨 */
}

.day.past {
    background-color: transparent; /* 淡灰色背景 */
    color: #dddddd; /* 字体颜色为白色 */
}

.day.closed {
    background-color: #ffcccc; /* 淡红色背景 */
}
.day.closed::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px; /* 控制线的粗细 */
    background: black; /* 线条颜色 */
    transform: translateY(-50%) rotate(135deg); /* 旋转斜线使其穿过文本中间 */
    transform-origin: 15 3; /* 设置变换的原点为元素的左上角 */
}

.empty-day {
    /* 你可以为没有日期的单元格设置不同的样式，比如透明背景 */
    background-color: transparent; /* 或者使用页面的默认背景色 */
    /* 可以添加其他样式以区分这些单元格 */
}

#prevMonth, #nextMonth {
    border: none;
    background-color: transparent; /* 去除按钮的背景色 */
    padding: 5px 10px;
    cursor: pointer;
}

/* 响应式设计，适应小屏幕设备 */
@media (max-width: 768px) {
    .calendar-container {
        flex-direction: column;
        align-items: center;
        margin-top: -20px;
    }

    .calendar {
        margin-bottom: 15px; /* 稍微减少底部外边距 */
        padding: 8px; /* 减少内边距 */
    }

    .month-control, .weekDays, .day {
        font-size: 14px; /* 减小字体大小 */
    }

    .day{
        padding: 5px 5px; /* 进一步减少内边距 */
        width: 14px; /* 设置固定宽度 */
        height: 14px; /* 设置固定高度，与宽度相同以形成圆形 */
    }

    .weekDays {
        margin-bottom: 8px; /* 减少与日期之间的间距 */
    }

    .month-control {
        padding: 12px 24px; /* 减少内边距 */
        font-size: 22px; /* 调整月份控制器的字体大小 */
    }

    .month-switch {
        font-weight: 900;
        font-size: 36px; /* 减小月份切换按钮的字体大小 */
        padding: 8px 12px; /* 减少内边距 */
    }
}