/**
 * 月份选择器增强样式
 * 去掉日历图标，使整个输入框可点击
 */

/* 隐藏月份选择器的日历图标 */
#monthFilter::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 使整个月份选择器可点击 */
#monthPickerContainer {
    position: relative !important;
    cursor: pointer !important;
}

/* 移除覆盖层，因为它可能阻止点击事件传递 */
/* #monthPickerContainer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
} */

/* 确保月份选择器输入框样式正确 */
#monthFilter {
    cursor: pointer !important;
    background-color: #fff !important;
    padding-right: 8px !important; /* 减少右侧内边距，因为没有日历图标了 */
    z-index: 1 !important; /* 确保输入框在适当的层级 */
    position: relative !important; /* 确保z-index生效 */
}

/* 添加一个微小的视觉提示，表明此输入框是可点击的 */
#monthPickerContainer:hover #monthFilter {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15) !important;
}

/* 确保点击时的焦点样式正确 */
#monthFilter:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important;
}

/* 月份选择器包装器样式 */
.month-picker-wrapper {
    position: relative !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}