/**
 * 模态框月份选择器样式
 * 确保模态框中的月份输入框与日期输入框样式一致
 */

/* 模态框中的月份选择器包装器 */
.custom-month-picker-wrapper {
    position: relative !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* 模态框中的月份输入框样式 */
#recordMonth {
    cursor: pointer !important;
    background-color: #fff !important;
    width: 100% !important;
    height: auto !important;
    padding: 0.375rem 0.75rem !important; /* 与Bootstrap标准form-control一致 */
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* 确保月份输入框与其他表单控件高度一致 */
#recordMonth {
    min-height: calc(1.5em + 0.75rem + 2px) !important; /* Bootstrap标准高度 */
}

/* 悬停效果 */
.custom-month-picker-wrapper:hover #recordMonth {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15) !important;
}

/* 焦点效果 */
#recordMonth:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important;
    outline: 0 !important;
}

/* 确保在模态框中正确显示 */
.modal-body .custom-month-picker-wrapper {
    display: block !important;
    width: 100% !important;
}

/* 确保与其他form-control元素一致 */
.modal-body #recordMonth {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 移除可能的额外样式干扰 */
#recordMonth[readonly] {
    background-color: #fff !important;
    opacity: 1 !important;
}

/* 确保月份选择器与日期选择器高度完全一致 */
#recordDate,
#recordMonth {
    height: calc(1.5em + 0.75rem + 2px) !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    max-height: calc(1.5em + 0.75rem + 2px) !important;
}

/* 响应式处理 */
@media (max-width: 768px) {
    #recordMonth {
        font-size: 16px !important; /* 防止iOS缩放 */
    }
}